/* =========================================================
   SI EL PADRE LO DICE — Design System
   Identidad: azul marino + blanco desgastado, varsity/grunge
   ========================================================= */
:root{
  --navy:#0A1330; --navy-2:#0E1B41; --panel:#12244F; --panel-2:#16295A;
  --ink:#EEF1F8; --muted:#AAB4CF; --faint:#7C89AB;
  --white:#F4F5F0; --ice:#B9CCF2; --steel:#3E5FA6;
  --red:#E23B3B;
  --line:rgba(238,241,248,.12); --line-2:rgba(238,241,248,.06);
  --maxw:1260px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--navy); color:var(--ink);
  font-family:"Barlow",system-ui,-apple-system,Segoe UI,sans-serif; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden}
.wrap{width:min(var(--maxw),90vw); margin-inline:auto}
h1,h2,h3{margin:0; line-height:.95; font-family:"Anton",Impact,sans-serif; font-weight:400; letter-spacing:.01em}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.disp{font-family:"Anton",Impact,sans-serif; text-transform:uppercase}
.cond{font-family:"Barlow Condensed",sans-serif}
.eyebrow{font-family:"Barlow Condensed",sans-serif; font-size:.9rem; letter-spacing:.32em;
  text-transform:uppercase; font-weight:600; color:var(--ice)}
.box{background:var(--white); color:var(--navy); padding:0 .16em; transform:skewX(-5deg);
  display:inline-block; box-shadow:6px 7px 0 rgba(0,0,0,.3)}
::selection{background:var(--ice); color:var(--navy)}
:focus-visible{outline:2px solid var(--ice); outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.hero-logo{max-width:min(560px,88%); height:auto; filter:drop-shadow(4px 6px 0 rgba(0,0,0,.35))}

/* texture overlays */
body::before{content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  box-shadow:inset 0 0 240px 50px rgba(0,0,0,.7)}
body::after{content:""; position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* reveal on scroll */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s ease,transform .8s cubic-bezier(.16,.8,.2,1)}
.reveal.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none} .glow,.ticker .row{animation:none!important}}

/* ---------- NAV ---------- */
.nav{position:fixed; inset:0 0 auto; z-index:40; transition:background .3s,border-color .3s; border-bottom:1px solid transparent; transform:translateZ(0); will-change:background-color}
.nav.scrolled{background:color-mix(in srgb,var(--navy) 86%,transparent); backdrop-filter:blur(10px); border-color:var(--line-2)}
@media(max-width:860px){.nav.scrolled{backdrop-filter:none; background:color-mix(in srgb,var(--navy) 95%,transparent)}}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; padding:.9rem 0}
.brand{display:flex; align-items:center; gap:.7rem}
.brand img{height:38px; width:auto}
.brand .lk{width:34px;height:34px;border:2px solid var(--ice); display:grid; place-items:center;
  font-family:"Anton"; font-size:1.1rem; color:var(--ice); transform:skewX(-6deg)}
.brand b{font-family:"Barlow Condensed"; font-weight:700; letter-spacing:.04em; text-transform:uppercase; font-size:1.05rem}
.navlinks{display:flex; gap:1.9rem; font-family:"Barlow Condensed"; text-transform:uppercase; letter-spacing:.08em;
  font-weight:600; font-size:.98rem; color:var(--muted)}
.navlinks a{transition:color .2s} .navlinks a:hover,.navlinks a[aria-current]{color:var(--ink)}
.btn{display:inline-flex; align-items:center; gap:.5rem; font-family:"Barlow Condensed"; text-transform:uppercase;
  letter-spacing:.08em; font-weight:700; font-size:.95rem; cursor:pointer; padding:.6rem 1.4rem;
  border:2px solid var(--ice); color:var(--navy); background:var(--ice); transform:skewX(-6deg); transition:.2s}
.btn span{display:inline-block; transform:skewX(6deg)}
.btn:hover{background:transparent; color:var(--ice)}
.btn.ghost{background:transparent; color:var(--ice)}
.btn.ghost:hover{background:var(--ice); color:var(--navy)}
.navtoggle{display:none; background:none; border:0; color:var(--ink); cursor:pointer; padding:.4rem}
@media(max-width:860px){
  .navlinks{position:fixed; inset:0 0 0 auto; width:min(78vw,320px); flex-direction:column; gap:1.4rem;
    background:var(--navy-2); padding:5rem 2rem; transform:translateX(100%); transition:transform .3s; z-index:41; font-size:1.3rem}
  .navlinks.open{transform:none}
  .navtoggle{display:inline-flex; z-index:42}
}

/* ---------- HERO ---------- */
.hero{position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; z-index:3; padding-top:5rem}
.glow{position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(60% 70% at 72% 40%, rgba(62,95,166,.4), transparent 62%),
             radial-gradient(50% 60% at 12% 90%, rgba(30,50,110,.5), transparent 60%);
  animation:breathe 11s ease-in-out infinite alternate}
@keyframes breathe{from{opacity:.75;transform:scale(1)}to{opacity:1;transform:scale(1.06)}}
.hero .wrap{position:relative; z-index:2; display:grid; grid-template-columns:1.08fr .92fr; gap:2.5rem; align-items:center}
.kick{display:inline-flex; align-items:center; gap:.7rem; margin-bottom:1.4rem}
.kick .ln{width:44px; height:2px; background:var(--ice)}
.hero h1{font-size:clamp(3.6rem,11vw,9rem); text-transform:uppercase; text-shadow:3px 4px 0 rgba(0,0,0,.35)}
.hero .lede{color:var(--muted); font-size:clamp(1.02rem,1.5vw,1.2rem); max-width:44ch; margin:1.8rem 0 2rem; line-height:1.7}
.hero-cta{display:flex; gap:1rem; flex-wrap:wrap}
.shot{position:relative; aspect-ratio:4/5; overflow:hidden; border:2px solid var(--line);
  background:linear-gradient(160deg,var(--panel),var(--navy) 75%)}
.shot img{width:100%; height:100%; object-fit:cover; object-position:center top}
.shot .ph{position:absolute; inset:0; display:grid; place-items:center; text-align:center; color:var(--faint);
  font-family:"Barlow Condensed"; text-transform:uppercase; letter-spacing:.14em; font-size:.85rem}
.shot .ph b{font-family:"Anton"; font-size:2.4rem; color:rgba(238,241,248,.1); display:block; margin-bottom:.4rem}
.shot::after{content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(10,19,48,.55),transparent 45%)}
.shot .tagpic{position:absolute; z-index:2; left:0; bottom:1.1rem; background:var(--white); color:var(--navy);
  font-family:"Barlow Condensed"; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:.35rem 1rem; transform:skewX(-5deg)}
.scrollcue{position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%); z-index:2; color:var(--faint);
  font-family:"Barlow Condensed"; letter-spacing:.3em; text-transform:uppercase; font-size:.78rem;
  display:flex; flex-direction:column; align-items:center; gap:.5rem}
.scrollcue .l{width:1px; height:34px; background:linear-gradient(var(--ice),transparent); animation:drop 2s infinite}
@keyframes drop{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}
@media(max-width:860px){.hero .wrap{grid-template-columns:1fr}.hero .shot{order:-1;aspect-ratio:4/5;max-height:56svh}.hero .shot img{object-position:50% 22%}.hero .shot .tagpic{display:none}.scrollcue{display:none}}

/* page hero (interior pages) */
.pagehero{position:relative; z-index:3; padding:8rem 0 3rem; border-bottom:1px solid var(--line-2)}
.pagehero h1{font-size:clamp(2.8rem,8vw,6rem); text-transform:uppercase; text-shadow:3px 4px 0 rgba(0,0,0,.35)}
.pagehero p{color:var(--muted); max-width:52ch; margin:1.2rem 0 0; font-size:1.08rem}

/* ---------- TICKER ---------- */
.ticker{position:relative; z-index:3; background:var(--ice); color:var(--navy); overflow:hidden; border-block:2px solid var(--navy)}
.ticker .row{display:flex; width:max-content; padding:.6rem 0; white-space:nowrap; font-family:"Anton";
  text-transform:uppercase; font-size:1.05rem; letter-spacing:.02em; animation:slide 26s linear infinite}
.ticker span{display:inline-flex; align-items:center; gap:2.5rem; padding-right:2.5rem}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- SECTIONS ---------- */
section{position:relative; z-index:3; padding:clamp(4rem,9vw,7rem) 0}
.divider{border-top:1px solid var(--line-2)}
.sec-head{display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin-bottom:3rem; flex-wrap:wrap}
.sec-head h2{font-size:clamp(2.2rem,5.5vw,4rem); text-transform:uppercase; max-width:16ch; text-shadow:2px 3px 0 rgba(0,0,0,.3)}
.sec-head p{color:var(--muted); max-width:34ch; margin:0}
.sec-link{font-family:"Barlow Condensed"; text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:var(--ice); white-space:nowrap}

/* facets */
.facets{display:grid; grid-template-columns:repeat(3,1fr); border-top:2px solid var(--line)}
.facet{padding:2.4rem 1.8rem 2.6rem; border-bottom:2px solid var(--line); border-right:2px solid var(--line); transition:background .3s}
.facet:nth-child(3n){border-right:0}
.facet:hover{background:var(--panel)}
.facet .num{font-family:"Anton"; font-size:2.2rem; color:var(--steel)}
.facet h3{font-size:1.7rem; text-transform:uppercase; margin:1rem 0 .7rem}
.facet p{margin:0; color:var(--muted); font-size:.97rem}
@media(max-width:820px){.facets{grid-template-columns:1fr}.facet{border-right:0}}

/* ---------- CONTENT CARDS ---------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem}
.card{background:var(--panel); border:2px solid var(--line); overflow:hidden; transition:.3s cubic-bezier(.16,.8,.2,1); display:flex; flex-direction:column}
.card:hover{transform:translateY(-6px); border-color:var(--ice)}
.thumb{aspect-ratio:16/9; position:relative; background:linear-gradient(150deg,var(--panel-2),var(--navy)); overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb::after{content:""; position:absolute; inset:0; margin:auto; width:0;height:0;
  border-left:20px solid var(--white); border-top:13px solid transparent; border-bottom:13px solid transparent;
  transition:transform .25s; filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.card[data-type="columna"] .thumb::after,.card[data-type="noticia"] .thumb::after{display:none}
.card:hover .thumb::after{transform:scale(1.18)}
.badge{position:absolute; z-index:3; top:.8rem; left:.8rem; font-family:"Barlow Condensed"; font-size:.78rem;
  letter-spacing:.1em; text-transform:uppercase; font-weight:700; padding:.25rem .6rem; background:var(--ice); color:var(--navy)}
.badge.on{background:var(--red); color:#fff}
.card .body{padding:1.2rem 1.3rem 1.5rem; display:flex; flex-direction:column; gap:.35rem; flex:1}
.card .tag{font-family:"Barlow Condensed"; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ice); font-weight:600}
.card h3{font-size:1.35rem; text-transform:uppercase; line-height:1}
.card p{margin:0; color:var(--muted); font-size:.9rem}
.card .date{margin-top:auto; padding-top:.6rem; color:var(--faint); font-family:"Barlow Condensed"; letter-spacing:.06em; font-size:.85rem}
/* --- Video de YouTube incrustado --- */
.videocard .thumb.ytplay{display:block; width:100%; padding:0; border:0; margin:0; cursor:pointer; font:inherit; color:inherit; background:#000}
.thumb.ytplay img{transition:transform .3s cubic-bezier(.16,.8,.2,1)}
.videocard:hover .thumb.ytplay img{transform:scale(1.05)}
.thumb.playing{aspect-ratio:16/9}
.thumb.playing::after{display:none}
.thumb.playing iframe{width:100%; height:100%; border:0; display:block}
.ytlink{margin-top:.6rem; font-family:"Barlow Condensed"; letter-spacing:.08em; text-transform:uppercase; font-size:.82rem; font-weight:600; color:var(--ice); text-decoration:none}
.ytlink:hover{color:var(--white)}
@media(max-width:820px){.cards{grid-template-columns:1fr}}

/* filters */
.filters{display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:2.2rem}
.chip{font-family:"Barlow Condensed"; text-transform:uppercase; letter-spacing:.08em; font-weight:700; font-size:.95rem;
  padding:.5rem 1.1rem; border:2px solid var(--line); color:var(--muted); background:none; cursor:pointer; transition:.2s}
.chip:hover{color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ice); color:var(--navy); border-color:var(--ice)}
.empty{color:var(--muted); padding:3rem 0}

/* ---------- PULL / FACT LISTS ---------- */
.pull{display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:center}
.pull .big{font-family:"Anton"; text-transform:uppercase; font-size:clamp(2rem,5vw,3.6rem); line-height:.98; text-shadow:2px 3px 0 rgba(0,0,0,.3)}
.pull .big em{font-style:normal; color:var(--ice)}
.factline{display:flex; gap:1rem; align-items:flex-start; padding:1.1rem 0; border-bottom:1px solid var(--line)}
.factline:last-child{border-bottom:0}
.factline .k{font-family:"Barlow Condensed"; font-size:.85rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ice); font-weight:700; flex:none; width:7rem; margin-top:.15rem}
.factline p{margin:0; font-size:.99rem}
.factline p.mut{color:var(--muted)}
@media(max-width:820px){.pull{grid-template-columns:1fr}.factline .k{width:auto}}

/* ---------- COMUNIDAD ---------- */
.community{background:var(--panel); border:2px solid var(--line); padding:clamp(2rem,5vw,3.5rem); text-align:center}
.community h2{font-size:clamp(2rem,5vw,3.4rem); text-transform:uppercase}
.community p{color:var(--muted); max-width:46ch; margin:1rem auto 1.8rem}
.subscribe{display:flex; gap:.7rem; max-width:440px; margin:0 auto; flex-wrap:wrap; justify-content:center}
.subscribe input{flex:1; min-width:200px; background:var(--navy); border:2px solid var(--line); color:var(--ink);
  padding:.7rem 1rem; font-family:"Barlow"; font-size:1rem}
.subscribe input:focus{border-color:var(--ice); outline:none}
.subscribe .note{width:100%; color:var(--faint); font-size:.82rem; margin-top:.6rem}

/* ---------- REDES / CONNECT ---------- */
.connect{text-align:center; padding:clamp(5rem,12vw,9rem) 0}
.connect h2{font-size:clamp(2.6rem,8vw,6rem); text-transform:uppercase; text-shadow:3px 4px 0 rgba(0,0,0,.35)}
.connect p{color:var(--muted); max-width:46ch; margin:1.6rem auto 2.4rem}
.socialgrid{display:flex; gap:1rem; flex-wrap:wrap; justify-content:center}
.schip{display:inline-flex; align-items:center; gap:.65rem; font-family:"Barlow Condensed"; text-transform:uppercase;
  letter-spacing:.08em; font-weight:700; font-size:1.1rem; color:var(--ink); padding:.85rem 1.7rem;
  border:2px solid var(--line); transition:transform .25s, background .25s, border-color .25s, color .25s}
.schip svg{width:20px; height:20px}
.schip:hover{transform:translateY(-4px)}
.schip.fb{border-color:#1877F2; color:#7fb0ff}
.schip.fb:hover{background:#1877F2; color:#fff}
.schip.ig{border-color:#E1306C; color:#f592b4}
.schip.ig:hover{background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF); border-color:transparent; color:#fff}
.schip.tt{border-color:#25F4EE; color:#7ff5f0}
.schip.tt:hover{background:#010101; border-color:#FE2C55; color:#fff}
.schip.yt{border-color:#FF0000; color:#ff7a7a}
.schip.yt:hover{background:#FF0000; color:#fff}

/* ---------- WhatsApp flotante ---------- */
.wa-float{position:fixed; right:18px; bottom:18px; z-index:60; width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.4); transition:transform .2s}
.wa-float svg{width:32px; height:32px}
.wa-float:hover{transform:scale(1.08)}
@media(max-width:600px){.wa-float{width:54px; height:54px; right:14px; bottom:14px}}

/* ---------- Cookies + accesibilidad ---------- */
.cookiebar{position:fixed; left:0; right:0; bottom:0; z-index:70; background:var(--navy-2);
  border-top:1px solid var(--line-2); padding:1rem 1.2rem; display:flex; gap:1rem; align-items:center;
  justify-content:center; flex-wrap:wrap; box-shadow:0 -6px 24px rgba(0,0,0,.45)}
.cookiebar p{margin:0; color:var(--muted); font-size:.9rem; max-width:58ch}
.cookiebar a{color:var(--ice)}
.cb-actions{display:flex; gap:.6rem}
.cookiebar button{font-family:"Barlow Condensed"; text-transform:uppercase; letter-spacing:.06em; font-weight:700;
  font-size:.9rem; padding:.55rem 1.3rem; border:2px solid var(--line-2); cursor:pointer; background:none; color:var(--ink); transition:.2s}
.cb-yes{background:var(--ice); border-color:var(--ice); color:var(--navy)}
.cb-yes:hover{filter:brightness(1.08)}
.cb-no:hover{border-color:var(--muted)}
@media(max-width:600px){.cookiebar{padding:.9rem 1rem} .cb-actions{width:100%} .cookiebar button{flex:1}}

/* Foco visible para navegación por teclado (accesibilidad) */
a:focus-visible, button:focus-visible, input:focus-visible, .chip:focus-visible, [tabindex]:focus-visible{
  outline:3px solid var(--ice); outline-offset:2px}

/* ---------- FOOTER ---------- */
footer{position:relative; z-index:3; border-top:1px solid var(--line-2); padding:2.6rem 0 3rem}
.foot{display:flex; justify-content:space-between; align-items:center; gap:1.5rem; flex-wrap:wrap}
.footlinks{display:flex; gap:1.4rem; font-family:"Barlow Condensed"; text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}
.footlinks a:hover{color:var(--ink)}
.fineprint{color:var(--faint); font-size:.82rem; margin-top:1.6rem; max-width:78ch; line-height:1.6}