/* =========================================================
   Crónicas Canadienses – estilos (sin frameworks)
   ========================================================= */
:root{
  --bg:#ffffff; --ink:#111111; --text:#222428; --muted:#6f767d;
  --brand:#c2382f; --line:#e6e7ea; --card:#ffffff; --card-bottom:#f7f7f8;
  --shadow-sm:0 2px 6px rgba(17,17,17,.06);
  --shadow-md:0 12px 28px rgba(17,17,17,.08);
  --shadow-lg:0 28px 60px rgba(17,17,17,.10);
  --gap:18px;         /* carrusel */
  --cards:3;          /* 3 desktop / 1 móvil */
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;color:var(--text);background:var(--bg)}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.visually-hidden{position:absolute!important;clip:rect(1px,1px,1px,1px)!important;padding:0!important;border:0!important;height:1px!important;width:1px!important;overflow:hidden!important;white-space:nowrap!important}

.wrap{max-width:1320px;margin:0 auto;padding:12px 8px}
@media (min-width:1600px){ .wrap{max-width:1440px} }

/* ===== Header ===== */
.header{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow-sm)}
.masthead{display:grid;place-items:center;padding:14px 0 8px}
.logo-color{max-height:190px; margin:4px auto;filter:drop-shadow(0 2px 4px rgba(0,0,0,.06))}
@media (max-width:700px){ .logo-color{max-height:130px} }

/* ===== Nav de Regiones ===== */
.primary-nav{display:flex;justify-content:center;padding:6px 0 12px;border-top:1px solid var(--line)}
.topnav{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.topnav a{font:700 clamp(12px,1.2vw,16px)/1.05 "Georgia","Times New Roman",Times,serif;text-transform:uppercase;letter-spacing:.06em;color:var(--ink);padding:4px 0;position:relative}
.topnav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1.5px;background:transparent;transition:background .2s}
.topnav a:hover::after,.topnav a.active::after{background:var(--brand)}

/* ===== Bloques ===== */
.home-block{margin:28px auto 44px}
.home-title{font:700 26px/1.2 "Georgia","Times New Roman",Times,serif;color:var(--ink);margin:10px 0 14px}

/* Sección especial (Deportes + Agenda) */
.special-block{
  margin:0 auto 48px; padding:20px 8px 28px;
  background:radial-gradient(1200px 300px at 85% -50%, rgba(194,56,47,.08), transparent 60%),
             linear-gradient(180deg,#fafbfc, #f5f6f7);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  box-shadow:inset 0 8px 20px rgba(0,0,0,.04);
}

/* ===== Carrusel ===== */
.section{margin:0 0 34px}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.section-title{font:700 24px/1.2 "Georgia","Times New Roman",Times,serif;color:var(--ink);margin:0}
.pillbar{display:flex;gap:10px;flex-wrap:wrap}
.pill{font-size:12px;color:var(--brand);border:1px solid var(--brand);padding:6px 12px;border-radius:999px}

.carousel{position:relative}
.viewport{overflow:hidden;border-radius:16px;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-sm)}
.track{display:flex;gap:var(--gap);transition:transform .45s cubic-bezier(.22,.61,.36,1);will-change:transform;align-items:stretch}

/* ===== Tarjetas cuadradas ===== */
.card{
  min-width:calc((100% - (var(--gap) * (var(--cards) - 1))) / var(--cards));
  max-width:calc((100% - (var(--gap) * (var(--cards) - 1))) / var(--cards));
  aspect-ratio:1/1;display:grid;grid-template-rows:55% 45%;
  background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-md);overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease
}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}

.thumb{height:100%;border-bottom:2px solid #fff;background:#f4f5f6;overflow:hidden;position:relative}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.02)}
.thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,0) 35%,rgba(0,0,0,0) 65%,rgba(0,0,0,.06))}
.brand-stamp{position:absolute;right:10px;bottom:10px;width:26px;height:26px;border-radius:999px;overflow:hidden;box-shadow:0 4px 10px rgba(0,0,0,.25);background:#fff;display:grid;place-items:center}
.brand-stamp img{width:100%;height:100%;object-fit:contain}
.badge{position:absolute;top:10px;left:10px;background:#fff;color:var(--brand);border:1px solid var(--brand);font-size:12px;font-weight:700;border-radius:999px;padding:4px 10px;box-shadow:var(--shadow-sm)}

/* --- Área de texto (scroll, sin línea blanca) --- */
.content{
  position:relative;
  padding:14px 14px 26px 14px; /* ya no reservamos espacio para botón */
  background:var(--card-bottom);
  overflow:auto; /* se ve la barra */
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: rgba(0,0,0,.35) transparent;
}
/* WebKit scrollbar */
.content::-webkit-scrollbar{ width:8px }
.content::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.35); border-radius:8px }
.content::-webkit-scrollbar-track{ background:transparent }

/* quitamos la franja blanca inferior */
.content::after{ display:none !important; }

.kicker{color:#9aa1a7;font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 6px}
.title{font:800 20px/1.25 "Georgia","Times New Roman",Times,serif;margin:0 0 8px;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* texto completo (sin clamp) para permitir scroll */
.volanta{font-size:15px;line-height:1.6;color:#3e444a;margin:0 0 10px;display:block;overflow:visible}

.meta{display:flex;gap:14px;align-items:center;color:#7d848a;font-size:13px}
.readmore{font-weight:600}

/* Ocultamos por completo el antiguo botón de expandir */
.expand-btn{ display:none !important; }

/* Flechas del carrusel */
.actions{position:absolute;inset:0;pointer-events:none}
.nav-btn{pointer-events:auto;position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:999px;border:2px solid var(--brand);background:#fff;color:var(--brand);cursor:pointer;display:grid;place-items:center;box-shadow:var(--shadow-sm)}
.nav-btn:hover{background:var(--brand);color:#fff}
.nav-btn.is-disabled{opacity:.35;cursor:default}
.prev{left:10px}
.next{right:10px}
.carousel.is-ended .nav-btn{display:none}

/* ===== Bloque de enlaces (trendy) ===== */
.links-block{ margin:0 auto 56px; padding:16px 8px 8px; }
.quick-links{
  display:grid; grid-template-columns: repeat( auto-fit, minmax(220px,1fr) ); gap:16px;
}
.quick-link{
  position:relative;padding:18px 18px 20px;border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.92)) padding-box,
             linear-gradient(135deg, rgba(194,56,47,.35), rgba(194,56,47,0)) border-box;
  border:1px solid transparent; box-shadow:var(--shadow-sm); backdrop-filter: blur(6px);
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease; text-decoration:none;
}
.quick-link:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md);
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.98)) padding-box,
             linear-gradient(135deg, rgba(194,56,47,.55), rgba(194,56,47,0)) border-box; }
.qk-title{ font:800 18px/1.2 "Georgia","Times New Roman",Times,serif; color:var(--ink); position:relative; padding-right:28px; }
.qk-title::after{ content:"→"; position:absolute; right:2px; top:0; bottom:0; margin:auto 0; height:1em; line-height:1em; transform:translateX(-6px); opacity:0; transition: transform .22s ease, opacity .22s ease; }
.quick-link:hover .qk-title::after{ transform:translateX(0); opacity:1; }
.qk-desc{ font-size:14px; line-height:1.55; color:#3e444a; margin-top:6px; }

/* ===== About / Footer ===== */
.about{margin:28px auto 52px}
.about h2{font:700 28px/1.2 "Georgia","Times New Roman",Times,serif;color:var(--ink);margin:0 0 12px}
.about p{font-size:16px;line-height:1.65;color:#333a41;margin:10px 0}

.footer{position:relative;background:#0f1112;color:#cfd5da;margin-top:36px;border-top:2px solid #0b0c0d;box-shadow:inset 0 6px 12px rgba(0,0,0,.35)}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:6px;justify-content:center;text-align:center;padding:28px 12px}
.footer-brand{font:800 28px/1.1 "Georgia","Times New Roman",Times,serif;color:#fff}
.footer-meta{font-size:16px;color:#dfe4e8}
/* Marca de agua con logo blanco al fondo del footer */
.footer::before{
  content:""; position:absolute; right:6%; bottom:8px; width:420px; height:140px;
  background:url("Logos/logo_BLANCO.png") no-repeat center/contain;
  opacity:.10; pointer-events:none;
}

/* ===== Cookies ===== */
.cookie-popup{position:fixed;left:12px;right:12px;bottom:16px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-lg);border-radius:12px;z-index:1000}
.cookie-content{display:flex;align-items:center;gap:12px;padding:12px}
.cookie-logo{height:56px}
.cookie-text{margin:0}
.cookie-link{color:var(--brand);text-decoration:underline}
.cookie-btn{background:var(--brand);color:#fff;border:none;padding:10px 15px;border-radius:8px;font-weight:600;box-shadow:var(--shadow-sm);cursor:pointer}
.cookie-btn:hover{background:#a42f28}
.cookie-popup.hidden{display:none}

/* ===== Responsive: 1 tarjeta en móvil ===== */
@media (max-width:700px){
  :root{ --cards:1; --gap:14px; }
  .wrap{max-width:100%}
}