/* ==========================================================================
   El Hombre de los Datos — Dr. Luis Alberto Fabra Garcés
   Hoja de estilos principal
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* Marca: azul eléctrico de la cabecera de YouTube (#2e40ac – #3f32ca) */
  --brand:#3a3fc9;
  --brand-700:#2a2f9c;
  --brand-600:#3236b4;
  --brand-300:#9095f0;
  --brand-100:#dfe1fc;
  --brand-50:#eeeffe;
  /* Cian de las reglas y subrayados del canal */
  --cian:#4cc3ff;

  /* Neutros: azulados, en la línea del fondo del canal (#010511 – #060a2d) */
  --ink:#070b1e;
  --ink-800:#0d1330;
  --ink-700:#1b2342;
  --ink-500:#49536b;
  --ink-400:#6a7389;
  --ink-300:#99a0b4;
  --line:#e1e5f1;
  --line-soft:#eef0f7;
  --paper:#ffffff;
  --paper-2:#f5f6fc;
  --paper-3:#eceefa;

  /* Señal (uso muy puntual: dato destacado) */
  --signal:#d9622c;
  --signal-text:#a3441a;   /* variante accesible sobre fondo claro (AA) */

  /* Tipografía */
  --font-display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* Escala fluida */
  --step--1:clamp(.82rem,.79rem + .12vw,.89rem);
  --step-0:1rem;            /* 16 px: tope del texto corrido */
  --step-1:clamp(1.18rem,1.1rem + .38vw,1.4rem);
  --step-2:clamp(1.42rem,1.28rem + .68vw,1.9rem);
  --step-3:clamp(1.72rem,1.48rem + 1.15vw,2.6rem);
  --step-4:clamp(1.95rem,1.6rem + 1.7vw,3.1rem);
  --step-5:clamp(2.2rem,1.5rem + 2.6vw,4.15rem);

  /* Layout */
  --wrap:1280px;
  --wrap-narrow:820px;
  --gutter:clamp(1.15rem,4vw,2.75rem);
  --section-y:clamp(4rem,9vw,8rem);
  --radius:14px;
  --radius-lg:22px;

  --shadow-sm:0 1px 2px rgba(13,18,32,.05),0 4px 14px -6px rgba(13,18,32,.08);
  --shadow-md:0 2px 6px rgba(13,18,32,.06),0 18px 40px -18px rgba(13,18,32,.18);
  --shadow-lg:0 4px 10px rgba(13,18,32,.07),0 34px 70px -28px rgba(13,18,32,.28);

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
img,svg,video{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}

html{scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

body{
  font-family:var(--font-sans);
  font-size:var(--step-0);
  line-height:1.65;
  color:var(--ink-700);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- 3. Utilidades ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:var(--wrap-narrow)}
.section{padding-block:var(--section-y)}
.section--tight{padding-block:clamp(3rem,6vw,5rem)}
.section--dark{background:var(--ink);color:#dfe3ee}
.section--soft{background:var(--paper-2)}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip-link{
  position:absolute;left:1rem;top:-999px;z-index:200;
  background:var(--brand);color:#fff;padding:.7rem 1.1rem;border-radius:8px;font-weight:600;
}
.skip-link:focus{top:1rem}

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2.5px solid var(--brand);outline-offset:3px;border-radius:4px;
}
:is(.section--dark,.hero,.page-hero,.news-hero,.cta-final,.cta-band,.site-footer,.yt) :where(a,button):focus-visible{outline-color:var(--brand-300)}

/* ---------- 4. Tipografía ---------- */
h1,h2,h3,h4,.display{
  font-family:var(--font-display);
  font-weight:700;
  font-variation-settings:"wdth" 96;
  line-height:1.06;
  letter-spacing:-.028em;
  color:var(--ink);
  text-wrap:balance;
}
:is(.section--dark,.hero,.page-hero,.news-hero,.cta-final,.cta-band,.site-footer,.yt) :is(h1,h2,h3,h4){color:#fff}

h1,.h1{font-size:var(--step-5)}
h2,.h2{font-size:var(--step-4)}
h3,.h3{font-size:var(--step-2)}
h4,.h4{font-size:var(--step-1);letter-spacing:-.01em}

.lede{font-size:1rem;line-height:1.7;color:var(--ink-500);text-wrap:pretty}
:is(.section--dark,.hero,.page-hero,.news-hero,.cta-final,.cta-band,.site-footer,.yt) .lede{color:#b8c0d4}

.prose p{font-size:1rem;line-height:1.7;margin-block:0 1.1em;text-wrap:pretty;max-width:68ch}
.prose p:last-child{margin-bottom:0}
.prose strong{font-weight:600;color:var(--ink)}
:is(.section--dark,.hero,.page-hero,.news-hero,.cta-final,.cta-band,.site-footer,.yt) .prose{color:#c3cadb}
:is(.section--dark,.hero,.page-hero,.news-hero,.cta-final,.cta-band,.site-footer,.yt) .prose strong{color:#fff}

/* Eyebrow / kicker */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-sans);font-size:.72rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--brand);
  margin-bottom:1.1rem;
}
.eyebrow::before{content:"";width:26px;height:2px;background:currentColor;border-radius:2px}
:is(.hero,.page-hero,.news-hero,.yt) .eyebrow::before{background:var(--cian)}
:is(.section--dark,.hero,.page-hero,.news-hero,.cta-final,.cta-band,.site-footer,.yt) .eyebrow{color:var(--brand-300)}

.section-head{max-width:64ch;margin-bottom:clamp(2.2rem,4.5vw,3.4rem)}
.section-head--center{margin-inline:auto;text-align:center}
.section-head--center .eyebrow::before{display:none}
.section-head .lede{margin-top:1.1rem}

/* ---------- 5. Botones ---------- */
.btn{
  --btn-bg:var(--brand);--btn-fg:#fff;--btn-bd:var(--brand);
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.78em 1.4em;
  background:var(--btn-bg);color:var(--btn-fg);border:1.5px solid var(--btn-bd);
  border-radius:999px;
  font-size:.87rem;font-weight:600;letter-spacing:.015em;
  text-decoration:none;cursor:pointer;
  transition:transform .25s var(--ease),background-color .25s var(--ease),
             border-color .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease);
}
.btn::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.28) 50%,transparent 62%);
  transform:translateX(-120%);
}
.btn:hover::after{animation:shine .75s var(--ease)}
@keyframes shine{to{transform:translateX(120%)}}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(51,77,170,.55)}
.btn:active{transform:translateY(0)}
.btn svg{width:1.05em;height:1.05em;flex:none;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(3px)}

.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:var(--line)}
.btn--ghost:hover{--btn-bd:var(--ink);box-shadow:none}
:is(.section--dark,.hero,.page-hero,.news-hero,.cta-final,.cta-band,.site-footer,.yt) .btn--ghost{--btn-fg:#fff;--btn-bd:rgba(255,255,255,.28)}
:is(.section--dark,.hero,.page-hero,.news-hero,.cta-final,.cta-band,.site-footer,.yt) .btn--ghost:hover{--btn-bd:#fff;--btn-bg:rgba(255,255,255,.07)}

.btn--light{--btn-bg:#fff;--btn-fg:var(--ink);--btn-bd:#fff}
.btn--light:hover{box-shadow:0 12px 26px -12px rgba(0,0,0,.5)}

.btn--lg{padding:.9em 1.7em;font-size:.95rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}

/* Enlace con flecha */
.link-arrow{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:var(--step--1);font-weight:600;color:var(--brand);
  text-decoration:none;
}
.link-arrow::after{content:"→";transition:transform .25s var(--ease)}
.link-arrow:hover::after{transform:translateX(4px)}
.link-arrow:hover{text-decoration:underline;text-underline-offset:4px}

/* ---------- 6. Cabecera ---------- */
.site-header{
  position:fixed;inset:0 0 auto;z-index:100;
  transition:background-color .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header__inner{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  min-height:76px;
}
.site-header.is-solid{background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-bottom-color:var(--line);box-shadow:0 1px 20px -10px rgba(13,18,32,.3)}
.site-header.is-hidden{transform:translateY(-100%)}
.site-header{transition:transform .4s var(--ease),background-color .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}

/* Logo */
.brand{display:inline-flex;align-items:center;gap:.72rem;text-decoration:none;color:#fff}
.brand__mark{width:32px;height:auto;color:var(--brand-300);flex:none;transition:color .35s var(--ease)}
.brand__text{display:flex;flex-direction:column;line-height:1.12}
.brand__name{font-family:var(--font-display);font-weight:800;font-size:.94rem;
  letter-spacing:.005em;text-transform:uppercase;color:inherit}
.brand__tag{font-size:.62rem;letter-spacing:.17em;text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:500}
.site-header.is-solid .brand{color:var(--ink)}
.site-header.is-solid .brand__mark{color:var(--brand)}
.site-header.is-solid .brand__tag{color:var(--ink-400)}
/* Páginas con cabecera clara desde el inicio */
.header-light .site-header:not(.is-solid) .brand{color:var(--ink)}
.header-light .site-header:not(.is-solid) .brand__mark{color:var(--brand)}
.header-light .site-header:not(.is-solid) .brand__tag{color:var(--ink-400)}
.header-light .site-header:not(.is-solid) .nav__link{color:var(--ink-500)}
.header-light .site-header:not(.is-solid) .nav__link:hover,
.header-light .site-header:not(.is-solid) .nav__link[aria-current]{color:var(--ink)}
.header-light .site-header:not(.is-solid) .nav-toggle{color:var(--ink)}
.header-light .site-header:not(.is-solid) .nav__cta{background:var(--brand);border-color:var(--brand);color:#fff}

/* Navegación */
.nav{display:flex;align-items:center;gap:clamp(1rem,2vw,1.9rem)}
.nav__list{display:flex;align-items:center;gap:clamp(.9rem,1.8vw,1.7rem)}
.nav__link{
  position:relative;text-decoration:none;font-size:.9rem;font-weight:500;
  color:rgba(255,255,255,.78);padding-block:.35rem;transition:color .25s var(--ease);
}
.nav__link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav__link:hover::after,.nav__link[aria-current]::after{transform:scaleX(1)}
.nav__link:hover,.nav__link[aria-current]{color:#fff}
.site-header.is-solid .nav__link{color:var(--ink-500)}
.site-header.is-solid .nav__link:hover,.site-header.is-solid .nav__link[aria-current]{color:var(--ink)}
.nav__cta{
  padding:.62em 1.25em;border-radius:999px;font-size:.85rem;font-weight:600;text-decoration:none;
  border:1.5px solid rgba(255,255,255,.35);color:#fff;
  transition:background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);
}
.nav__cta:hover{background:#fff;border-color:#fff;color:var(--ink)}
.site-header.is-solid .nav__cta{background:var(--brand);border-color:var(--brand);color:#fff}
.site-header.is-solid .nav__cta:hover{background:var(--brand-700);border-color:var(--brand-700)}

/* Botón hamburguesa */
.nav-toggle{
  display:none;width:44px;height:44px;place-items:center;
  background:none;border:0;color:#fff;cursor:pointer;margin-right:-8px;
}
.nav-toggle__bars{display:block;width:22px;height:14px;position:relative}
.nav-toggle__bars i{
  position:absolute;left:0;right:0;height:2px;background:currentColor;border-radius:2px;
  transition:transform .3s var(--ease),opacity .2s var(--ease);
}
.nav-toggle__bars i:nth-child(1){top:0}
.nav-toggle__bars i:nth-child(2){top:6px}
.nav-toggle__bars i:nth-child(3){top:12px}
[aria-expanded="true"] .nav-toggle__bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
[aria-expanded="true"] .nav-toggle__bars i:nth-child(2){opacity:0}
[aria-expanded="true"] .nav-toggle__bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:900px){
  .nav-toggle{display:grid}
  .site-header.is-solid .nav-toggle{color:var(--ink)}
  .nav{
    position:fixed;inset:76px 0 auto;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);
    padding:1rem var(--gutter) 2rem;
    box-shadow:var(--shadow-lg);
    transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:opacity .28s var(--ease),transform .28s var(--ease);
    max-height:calc(100dvh - 76px);overflow-y:auto;
  }
  .nav.is-open{opacity:1;transform:none;pointer-events:auto}
  .nav__list{flex-direction:column;align-items:stretch;gap:0}
  .nav__link{
    display:block;
    color:var(--ink)!important;font-size:1.12rem;font-family:var(--font-display);
    padding:.85rem 0;border-bottom:1px solid var(--line-soft);
  }
  .nav__list li:last-child .nav__link{border-bottom:0}
  .nav__link::after{display:none}
  .nav__cta{margin-top:1.2rem;text-align:center;background:var(--brand);border-color:var(--brand);color:#fff}
}

/* ---------- 7. Hero ---------- */
.hero{
  position:relative;background:var(--ink);color:#fff;overflow:clip;
  min-height:100svh;display:flex;flex-direction:column;
  padding-top:clamp(6rem,10vh,7.5rem);padding-bottom:0;
}

/* Retícula de datos */
.hero__grid{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:96px 96px;
  mask-image:radial-gradient(100% 65% at 50% 0%,#000 18%,transparent 72%);
}
.hero__inner{position:relative;z-index:2;flex:1;display:flex;align-items:center}
.hero__layout{position:relative;z-index:1}
.hero__layout{
  width:100%;
  display:grid;gap:clamp(2rem,4.5vw,4rem);align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  padding-block:clamp(1.5rem,3vh,3rem);
}
@media (max-width:940px){.hero__layout{grid-template-columns:1fr;align-items:start}}

.hero__title{font-size:clamp(2.1rem,1.25rem + 3.1vw,4.15rem);color:#fff;margin-bottom:1.15rem}
.hero__title .line{display:block}
.hero__title .accent{display:block}
.hero__role{
  font-size:1rem;color:#b8c0d4;
  max-width:38rem;line-height:1.65;text-wrap:pretty;
}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.4rem;
}
@media (min-width:1200px){
  .hero .btn{padding:.88em 1.6em;font-size:.94rem}
  .hero .btn-row{gap:.9rem;margin-top:2.3rem}
}
.tag{
  display:inline-block;padding:.42em .95em;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);
  font-size:clamp(.74rem,.7rem + .12vw,.84rem);font-weight:500;letter-spacing:.05em;color:#c9d1e6;
}

/* Retrato */
/* La figura se ciñe al ancho de la imagen para que el pie quede alineado con ella */
.hero__portrait{position:relative;width:fit-content;max-width:100%;
  --desplaza:clamp(-92px,-4.6vw,0px);
  margin-inline:auto;transform:translateX(var(--desplaza))}
.hero__portrait img{
  width:100%;max-width:min(470px,54vh);
  border-radius:var(--radius-lg);
  aspect-ratio:4/4.45;object-fit:cover;object-position:50% 20%;
  box-shadow:0 34px 70px -34px rgba(0,0,0,.85);
}
@media (min-height:1000px){.hero__portrait img{max-width:510px}}
.hero__portrait figcaption{
  position:absolute;left:-1.6rem;bottom:1.6rem;
  background:rgba(255,255,255,.96);color:var(--ink);
  padding:.75rem 1.1rem;border-radius:10px;box-shadow:var(--shadow-md);
  font-size:.78rem;line-height:1.35;max-width:230px;
}
.hero__portrait figcaption b{display:block;font-weight:600;font-size:.86rem}
.hero__portrait figcaption span{color:var(--ink-400)}
@media (max-width:940px){
  .hero__portrait img{max-width:320px;margin-left:0}
  .hero__portrait figcaption{position:static;margin-top:1rem;max-width:none;background:transparent;color:#b8c0d4;box-shadow:none;padding:0}
  .hero__portrait figcaption b{color:#fff}
  .hero__portrait figcaption span{color:#8b93a8}
}

@media (max-width:940px){
  .hero__portrait{--desplaza:0px;width:auto;margin-inline:0}
  .hero__portrait figcaption{left:0}
}

/* Barra de indicadores */
.stats{
  position:relative;z-index:2;
  border-top:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
}
.stats__list{
  display:grid;grid-template-columns:repeat(4,1fr);
}
.stat{padding:clamp(1.2rem,2.4vh,2rem) clamp(1rem,2vw,1.8rem);border-left:1px solid rgba(255,255,255,.1)}
.stat:first-child{border-left:0}
.stat__value{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.7rem,1.15rem + 1.9vw,2.9rem);
  line-height:1;color:#fff;letter-spacing:-.035em;font-variant-numeric:tabular-nums;
}
.stat__value .u{font-weight:600}
.stat__value .u{color:var(--brand-300)}
.stat__label{margin-top:.55rem;font-size:clamp(.78rem,.74rem + .13vw,.88rem);line-height:1.45;color:#98a1b8;max-width:24ch}
@media (max-width:860px){
  .stats__list{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(odd){border-left:0}
  .stat:nth-child(n+3){border-top:1px solid rgba(255,255,255,.1)}
}

/* Hero interior (páginas secundarias) */
.page-hero{position:relative;background:var(--ink);color:#fff;overflow:clip;
  padding-top:clamp(8.5rem,15vw,11.5rem);padding-bottom:clamp(3.5rem,7vw,6rem)}
.page-hero__bg{position:absolute;inset:0}
.page-hero__bg img{width:100%;height:100%;object-fit:cover;opacity:.22;filter:grayscale(.85)}
.page-hero__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,var(--ink) 22%,rgba(13,18,32,.82) 58%,rgba(13,18,32,.6) 100%)}
.page-hero__inner{position:relative;z-index:2;max-width:min(100%,54rem)}
.page-hero h1{font-size:clamp(2.1rem,1.2rem + 3.2vw,4rem);text-transform:uppercase;
  letter-spacing:-.035em;line-height:1}
.page-hero .lede{margin-top:1.5rem;max-width:46rem}
.page-hero--wide .page-hero__inner{max-width:min(100%,60rem)}

/* Migas */
.crumbs{display:flex;gap:.5rem;align-items:center;font-size:.76rem;color:#8b93a8;margin-bottom:1.4rem;letter-spacing:.04em}
.crumbs a{text-decoration:none;color:inherit}
.crumbs a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.crumbs span[aria-current]{color:var(--brand-300)}

/* ---------- 8. Rejillas y tarjetas ---------- */
.grid{display:grid;gap:clamp(1.2rem,2.4vw,1.9rem)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr))}

/* Split editorial */
.split{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr))}
.split--media-first .split__media{order:-1}
.split__media img{border-radius:var(--radius-lg);box-shadow:var(--shadow-md);width:100%}
/* Se limita el alto para que la imagen no descuelgue por debajo del texto */
.split__media--tall img{aspect-ratio:1/1;max-height:min(62vh,540px);object-fit:cover;object-position:50% 30%}
@media (max-width:820px){.split__media--tall img{aspect-ratio:5/4;max-height:none}}

/* Tarjeta de área */
.area{
  position:relative;display:block;overflow:hidden;border-radius:var(--radius-lg);
  text-decoration:none;color:#fff;background:var(--ink-800);
  min-height:clamp(300px,34vw,380px);
  isolation:isolate;
}
.area img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform .7s var(--ease),filter .5s var(--ease);
  filter:grayscale(.3) brightness(.92);object-position:50% 32%;
}
.area::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(175deg,rgba(13,18,32,.1) 12%,rgba(13,18,32,.55) 52%,rgba(13,18,32,.9) 92%);
  transition:opacity .4s var(--ease);
}
.area:hover img{transform:scale(1.055);filter:grayscale(0) brightness(1)}
.area__body{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(1.4rem,2.6vw,1.9rem);min-height:inherit}
.area__num{
  position:absolute;top:clamp(1.2rem,2.4vw,1.7rem);left:clamp(1.4rem,2.6vw,1.9rem);
  font-family:var(--font-display);font-size:.9rem;color:rgba(255,255,255,.6);
  letter-spacing:.06em;
}
.area__title{font-size:var(--step-2);color:#fff;margin-bottom:.5rem}
.area__desc{font-size:.88rem;color:#c2c9db;line-height:1.5;max-width:34ch;
  opacity:0;max-height:0;overflow:hidden;transition:opacity .35s var(--ease),max-height .45s var(--ease)}
.area:hover .area__desc,.area:focus-visible .area__desc{opacity:1;max-height:8rem}
@media (hover:none){.area__desc{opacity:1;max-height:8rem}}

/* Tarjeta genérica */
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.4rem,2.6vw,2rem);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.card--link{text-decoration:none;display:flex;flex-direction:column;gap:.7rem}
.card--link:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--brand-100)}
.card__icon{width:42px;height:42px;display:grid;place-items:center;border-radius:11px;
  background:var(--brand-50);color:var(--brand);margin-bottom:1.1rem}
.card__icon svg{width:21px;height:21px}
.card h3{margin-bottom:.55rem}
.card p{color:var(--ink-500);font-size:var(--step--1);line-height:1.6}

/* Métrica destacada (conferencias) */
.metric{padding:clamp(1.5rem,3vw,2.2rem) 0;border-top:2px solid var(--ink)}
.metric__value{font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.4rem,5.5vw,3.6rem);
  line-height:1;letter-spacing:-.04em;color:var(--brand);font-variant-numeric:tabular-nums}
.metric__title{margin-top:.9rem;font-weight:600;font-size:1rem;color:var(--ink);line-height:1.4}
.metric__desc{margin-top:.5rem;font-size:.86rem;color:var(--ink-500);line-height:1.55}

/* ---------- 9. Marquesina de logos ---------- */
.logos{overflow:hidden;position:relative;padding-block:.5rem}
.logos::before,.logos::after{
  content:"";position:absolute;top:0;bottom:0;width:clamp(40px,8vw,120px);z-index:2;pointer-events:none;
}
.logos::before{left:0;background:linear-gradient(90deg,var(--paper-2),transparent)}
.logos::after{right:0;background:linear-gradient(270deg,var(--paper-2),transparent)}
.logos__track{display:flex;gap:clamp(2.2rem,5vw,4.2rem);width:max-content;align-items:center;
  animation:marquee 46s linear infinite}
.logos:hover .logos__track,.logos:focus-within .logos__track{animation-play-state:paused}
/* Cada logotipo lleva su propio alto y ancho (calculados en build.py) para que
   todos ocupen la misma superficie. --k ajusta la escala del conjunto. */
.logos__item{flex:none;display:flex;align-items:center;justify-content:center;
  --k:1;width:calc(var(--w) * var(--k));height:calc(var(--h) * var(--k))}
.logos__item img{
  width:100%;height:100%;object-fit:contain;
  opacity:.72;transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.logos__item:hover img{opacity:1;transform:scale(1.05)}
@media (min-width:1400px){.logos__item{--k:1.1}}
@media (max-width:900px){.logos__item{--k:.82}}
@media (max-width:560px){.logos__item{--k:.72}}
.logos__item:hover img{filter:grayscale(0);opacity:1}
@keyframes marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .logos__track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;row-gap:2rem}
  .logos::before,.logos::after{display:none}
}

/* Rejilla estática de logos (agenda) */
.logo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:clamp(.7rem,1.5vw,1.1rem)}
.logo-grid__item{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  display:grid;place-items:center;padding:clamp(.9rem,1.8vw,1.35rem);min-height:142px;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.logo-grid__item:hover{border-color:var(--brand-100);box-shadow:var(--shadow-sm)}
.logo-grid__item img{--k:1.5;
  width:calc(var(--w) * var(--k));height:calc(var(--h) * var(--k));
  max-width:100%;object-fit:contain;
  opacity:.78;transition:opacity .3s var(--ease),transform .3s var(--ease)}
@media (max-width:600px){.logo-grid__item img{--k:1.25}}
.logo-grid__item:hover img{opacity:1;transform:scale(1.03)}

/* ---------- 10. Banda CTA ---------- */
.cta-band{position:relative;background:var(--brand-700);color:#fff;overflow:clip;border-radius:var(--radius-lg)}
.cta-band__inner{position:relative;z-index:2;padding:clamp(2rem,4vw,3.2rem);
  display:grid;gap:clamp(1.8rem,4vw,3.4rem);align-items:center;
  grid-template-columns:minmax(0,1.45fr) minmax(0,.55fr)}
.cta-band::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(60% 120% at 88% 20%,rgba(255,255,255,.16),transparent 60%);
}
.cta-band h2{color:#fff;max-width:26ch;font-size:var(--step-3)}
.cta-band p{color:#c9d3f2;margin-top:.9rem;max-width:56ch;font-size:.94rem;line-height:1.7}
.cta-band .eyebrow{color:#a8b8ee}
/* Columna de datos que rellena el hueco de la derecha */
ul.cta-band__facts{display:grid;gap:1.15rem;border-left:1px solid rgba(255,255,255,.25);
  padding-left:clamp(1.3rem,2.6vw,2.1rem)}
.cta-band__facts li{display:flex;flex-direction:column;gap:.2rem}
.cta-band__facts b{font-family:var(--font-display);font-size:clamp(1.5rem,2.6vw,2rem);
  color:#fff;line-height:1;letter-spacing:-.025em}
.cta-band__facts span{font-size:.79rem;line-height:1.45;color:#b6c2e8}
@media (max-width:860px){
  .cta-band__inner{grid-template-columns:1fr}
  ul.cta-band__facts{border-left:0;border-top:1px solid rgba(255,255,255,.25);
    padding-left:0;padding-top:1.6rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
}


/* Variante compacta: sin columna de datos, el titular ocupa más ancho */
.cta-band--compact .cta-band__inner{
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;padding:clamp(1.9rem,3.4vw,2.6rem) clamp(2rem,4vw,3.2rem);
}
.cta-band--compact h2{max-width:36ch;font-size:var(--step-2)}
@media (max-width:780px){
  .cta-band--compact .cta-band__inner{grid-template-columns:1fr}
}

/* CTA final oscuro con retrato */
.cta-final{position:relative;background:var(--ink);color:#fff;overflow:clip}
.cta-final__grid{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.cta-final__media img{border-radius:var(--radius-lg);aspect-ratio:5/4;object-fit:cover;width:100%}
@media (max-width:860px){.cta-final__grid{grid-template-columns:1fr}}

/* ---------- 11. Libro ---------- */
.book{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
@media (max-width:820px){.book{grid-template-columns:1fr}}
.book__cover{position:relative;display:grid;place-items:center;padding:clamp(1rem,3vw,2rem)}
.book__cover::before{
  content:"";position:absolute;inset:12% 6% 6%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(51,77,170,.2),transparent 72%);filter:blur(8px);
}
.book__cover img{position:relative;max-width:min(100%,330px);
  filter:drop-shadow(0 34px 44px rgba(13,18,32,.36))}
.book__quote{
  font-family:var(--font-display);font-weight:700;font-size:var(--step-3);line-height:1.14;
  letter-spacing:-.03em;color:var(--ink);margin-bottom:1.6rem;text-wrap:balance;
}
.book__quote em{font-style:normal;color:var(--brand);font-weight:800}
.book cite{font-style:normal;font-weight:600}

/* ---------- 12. Canales ---------- */
.channel{
  display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);
  text-decoration:none;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.channel:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--brand-100)}
.channel__media{position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--paper-3)}
.channel__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.channel:hover .channel__media img{transform:scale(1.05)}
.channel__badge{
  position:absolute;top:.85rem;left:.85rem;z-index:2;
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.35em .75em;border-radius:999px;background:rgba(13,18,32,.82);color:#fff;
  font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  backdrop-filter:blur(6px);
}
.channel__body{padding:clamp(1.2rem,2.4vw,1.6rem);display:flex;flex-direction:column;gap:.5rem;flex:1}
.channel__body h3{font-size:var(--step-1)}
.channel__body p{font-size:.88rem;color:var(--ink-500);line-height:1.55;flex:1}

/* ---------- 13. Prensa ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2.2rem}
.filter{
  padding:.5em 1.05em;border-radius:999px;border:1.5px solid var(--line);
  background:var(--paper);color:var(--ink-500);
  font-size:.82rem;font-weight:500;cursor:pointer;
  transition:all .22s var(--ease);
}
.filter:hover{border-color:var(--ink-300);color:var(--ink)}
.filter[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

.press-featured{
  display:grid;gap:clamp(1.6rem,4vw,3rem);align-items:center;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;margin-bottom:clamp(2.4rem,5vw,3.6rem);
}
.press-featured__media{order:2;align-self:stretch}
.press-featured__media img{width:100%;height:100%;object-fit:cover;min-height:260px}
.press-featured__body{order:1;padding:clamp(1.8rem,4vw,3rem)}
@media (max-width:820px){
  .press-featured{grid-template-columns:1fr}
  .press-featured__media{order:1}
  .press-featured__body{order:2}
}

.press-list{border-top:1px solid var(--line)}
.press-item{
  display:grid;gap:.6rem 1.8rem;align-items:baseline;
  grid-template-columns:minmax(140px,180px) minmax(0,1fr) auto;
  padding:clamp(1.1rem,2.4vw,1.6rem) 0;
  border-bottom:1px solid var(--line);
  text-decoration:none;
  transition:background-color .25s var(--ease);
}
.press-item:hover{background:var(--paper-2)}
.press-item:hover .press-item__title{color:var(--brand)}
.press-item[hidden]{display:none}
.press-item__outlet{
  font-size:.74rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--brand);
}
.press-item__date{display:block;margin-top:.25rem;font-size:.74rem;color:var(--ink-400);
  letter-spacing:.04em;text-transform:none;font-weight:400}
.press-item__title{
  font-family:var(--font-display);font-weight:600;font-size:var(--step-1);line-height:1.3;
  color:var(--ink);letter-spacing:-.02em;transition:color .25s var(--ease);text-wrap:pretty;
}
.press-item__go{
  font-size:.8rem;font-weight:600;color:var(--ink-400);white-space:nowrap;
  display:inline-flex;align-items:center;gap:.35rem;
}
.press-item__go::after{content:"↗";transition:transform .25s var(--ease)}
.press-item:hover .press-item__go{color:var(--brand)}
.press-item:hover .press-item__go::after{transform:translate(2px,-2px)}
@media (max-width:760px){
  .press-item{grid-template-columns:1fr;gap:.45rem}
  .press-item__date{display:inline;margin-left:.6rem}
  .press-item__go{margin-top:.2rem}
}
.press-empty{padding:3rem 0;text-align:center;color:var(--ink-400)}

/* Informes descargables */
.report{
  display:flex;flex-direction:column;gap:.8rem;
  padding:clamp(1.4rem,2.8vw,1.9rem);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  text-decoration:none;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.report:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--brand-100)}
.report__type{display:inline-flex;align-items:center;gap:.45rem;font-size:.7rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--signal-text)}
.report h3{font-size:var(--step-1);line-height:1.25}
.report p{font-size:.85rem;color:var(--ink-500);line-height:1.55;flex:1}
.report__go{font-size:.82rem;font-weight:600;color:var(--brand);display:inline-flex;gap:.4rem;align-items:center}
.report__go::after{content:"↗"}

/* ---------- 14. Galería ---------- */
.gallery{display:grid;gap:clamp(.7rem,1.4vw,1.05rem);grid-template-columns:repeat(12,1fr)}
.gallery figure{margin:0;overflow:hidden;border-radius:var(--radius);background:var(--paper-3)}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.gallery figure:hover img{transform:scale(1.05)}
.gallery .g-lg,
.gallery .g-sm{grid-column:span 6;aspect-ratio:16/10}
.gallery .g-third{grid-column:span 4;aspect-ratio:4/3}
@media (max-width:760px){
  .gallery{grid-template-columns:repeat(2,1fr)}
  .gallery .g-lg{grid-column:span 2;aspect-ratio:16/10}
  .gallery .g-sm,.gallery .g-third{grid-column:span 1;aspect-ratio:1}
}

/* ---------- 15. Formularios ---------- */
.form-panel{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(1.6rem,4vw,3rem);box-shadow:var(--shadow-sm);
}
.form{display:grid;gap:1.15rem}
.form__row{display:grid;gap:1.15rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.field{display:flex;flex-direction:column;gap:.42rem}
.field label{font-size:.82rem;font-weight:600;color:var(--ink);letter-spacing:.005em}
.field label .req{color:var(--signal-text);margin-left:.15rem}
.field .hint{font-size:.76rem;color:var(--ink-400)}
.field input,.field select,.field textarea{
  width:100%;padding:.82em 1em;
  background:var(--paper-2);border:1.5px solid var(--line);border-radius:10px;
  font-size:.95rem;color:var(--ink);
  transition:border-color .2s var(--ease),background-color .2s var(--ease),box-shadow .2s var(--ease);
}
.field textarea{min-height:140px;resize:vertical;line-height:1.6}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7488' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:16px;padding-right:2.6rem}
.field :is(input,select,textarea):focus{
  outline:none;background:var(--paper);border-color:var(--brand);
  box-shadow:0 0 0 4px rgba(51,77,170,.13);
}
.field :is(input,select,textarea):user-invalid{border-color:var(--signal)}
.field :is(input,select,textarea):user-invalid + .error{display:block}
.error{display:none;font-size:.76rem;color:var(--signal-text);font-weight:500}
.field--date .date-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}

.check{
  display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:start;
  font-size:.86rem;line-height:1.5;color:var(--ink-500);
  /* Toda la fila es pulsable, no solo la casilla */
  padding:.55rem .6rem;margin-inline:-.6rem;border-radius:10px;
  cursor:pointer;transition:background-color .18s var(--ease);
}
.check:hover{background:rgba(58,63,201,.05)}
/* Dos casillas seguidas van más juntas que el resto de campos: son una sola
   decisión del visitante, no dos apartados distintos. Se recorta parte del
   hueco de la rejilla del formulario, dejando el suficiente para que las
   filas no lleguen a tocarse y cada una siga siendo fácil de acertar. */
.check + .check{margin-top:-.7rem}
.check input{
  appearance:none;width:24px;height:24px;margin-top:0;flex:none;
  border:1.8px solid var(--ink-300);border-radius:7px;background:var(--paper);
  cursor:pointer;transition:all .18s var(--ease);
}
.check input:hover{border-color:var(--brand)}
.check input:focus-visible{outline:2.5px solid var(--brand);outline-offset:2px}
.check input:checked{background:var(--brand);border-color:var(--brand);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size:15px;background-position:center;background-repeat:no-repeat}
/* El enlace va sobre las propias palabras «Política de Privacidad». Se abre
   en otra pestaña: así, si alguien lo toca queriendo marcar la casilla, no
   pierde lo que ya había escrito en el formulario. El resto de la fila —que
   es casi toda— marca la casilla. */
.check a{
  color:var(--brand);font-weight:600;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;
  border-radius:4px;
}
.check a:hover{background:var(--brand-50)}
.check .req{color:var(--signal-text)}

.form__status{
  display:none;padding:.9rem 1.1rem;border-radius:10px;font-size:.86rem;font-weight:500;
  background:var(--brand-50);color:var(--brand-700);border:1px solid var(--brand-100);
}
.form__status.is-visible{display:block}
.form__status.is-error{background:#fdf0ea;color:#96431c;border-color:#f6d5c5}

/* Newsletter */
.news-hero{position:relative;background:var(--ink);color:#fff;overflow:clip;min-height:100dvh;display:grid;align-items:center;
  padding-block:clamp(7rem,14vw,9rem)}
.news-hero__grid{display:grid;gap:clamp(2.5rem,6vw,5rem);align-items:center;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);position:relative;z-index:2}
@media (max-width:880px){.news-hero{min-height:0}.news-hero__grid{grid-template-columns:1fr}}
.news-hero .form-panel{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.14);backdrop-filter:blur(10px)}
.news-hero .field label{color:#e6eaf4}
.news-hero .field input{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#fff}
.news-hero .field input::placeholder{color:#7d879e}
.news-hero .field input:focus{background:rgba(255,255,255,.1);border-color:var(--brand-300);box-shadow:0 0 0 4px rgba(138,160,228,.18)}
.news-hero .check{color:#aeb6ca}
.news-hero .check input{background-color:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
.news-hero .check a{color:var(--brand-300)}
.pull{
  font-family:var(--font-display);font-weight:700;font-size:var(--step-2);line-height:1.18;
  letter-spacing:-.025em;color:#fff;
  padding-left:1.3rem;border-left:3px solid var(--cian);margin-top:2rem;
}
.pull em{font-style:normal;color:var(--cian);font-weight:700}

/* ---------- 16. Agenda ---------- */
.agenda-empty{
  border:1px dashed var(--line);border-radius:var(--radius-lg);
  padding:clamp(2.4rem,6vw,4.5rem);text-align:center;background:var(--paper-2);
}
.agenda-empty__icon{width:56px;height:56px;margin:0 auto 1.4rem;display:grid;place-items:center;
  border-radius:16px;background:var(--paper);border:1px solid var(--line);color:var(--brand);box-shadow:var(--shadow-sm)}
.agenda-empty h2{margin-bottom:.8rem}
.agenda-empty p{font-size:1rem;line-height:1.7;max-width:54ch;margin-inline:auto;color:var(--ink-500)}

.event{
  display:grid;gap:1.2rem 2rem;align-items:center;
  grid-template-columns:auto minmax(0,1fr) auto;
  padding:clamp(1.3rem,2.6vw,1.8rem) 0;border-bottom:1px solid var(--line);
}
.event:first-child{border-top:1px solid var(--line)}
.event__date{text-align:center;min-width:74px;padding:.6rem .8rem;border-radius:12px;
  background:var(--brand-50);color:var(--brand-700)}
.event__day{display:block;font-family:var(--font-display);font-size:1.7rem;line-height:1}
.event__month{display:block;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-top:.2rem}
.event__title{font-family:var(--font-display);font-size:var(--step-1);color:var(--ink);line-height:1.25}
.event__meta{margin-top:.35rem;font-size:.83rem;color:var(--ink-400)}
@media (max-width:700px){.event{grid-template-columns:auto minmax(0,1fr)}.event > .btn{grid-column:1/-1;justify-self:start}}

/* ---------- 17. Pie ---------- */
.site-footer{background:var(--ink);color:#98a1b8;padding-block:clamp(3.5rem,7vw,5.5rem) 2rem}
.footer__top{display:grid;gap:clamp(2.2rem,5vw,3.5rem);
  grid-template-columns:minmax(0,1.5fr) repeat(auto-fit,minmax(150px,1fr));
  padding-bottom:clamp(2.5rem,5vw,3.5rem);border-bottom:1px solid rgba(255,255,255,.1)}
.footer__brand .brand{color:#fff;margin-bottom:1.2rem}
.footer__brand .brand__mark{color:var(--brand-300)}
.footer__brand .brand__tag{color:rgba(255,255,255,.5)}
.footer__desc{font-size:.88rem;line-height:1.6;max-width:38ch;color:#98a1b8}
.footer__title{font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:#fff;margin-bottom:1.1rem}
.footer__list{display:flex;flex-direction:column;gap:.6rem;font-size:.88rem}
.footer__list a{text-decoration:none;transition:color .2s var(--ease)}
.footer__list a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.footer__scope{font-size:.88rem;line-height:1.9}
.socials{display:flex;gap:.6rem;margin-top:1.6rem}
.socials a{
  width:40px;height:40px;display:grid;place-items:center;border-radius:11px;
  border:1px solid rgba(255,255,255,.14);color:#98a1b8;
  transition:all .25s var(--ease);
}
.socials a:hover{background:#fff;border-color:#fff;color:var(--ink);transform:translateY(-2px)}
.socials svg{width:18px;height:18px}
.footer__bottom{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;
  align-items:center;padding-top:2rem;font-size:.8rem;color:#8b94aa}
.footer__bottom a{text-decoration:none}
.footer__bottom a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* ---------- 18. Animación de entrada ---------- */
/* Sin JS el contenido se muestra siempre: la animación sólo se activa con .js */
.js [data-reveal]{opacity:0;transform:translateY(22px);
  transition:opacity .75s var(--ease),transform .75s var(--ease)}
.js [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js [data-reveal]{opacity:1;transform:none}}

/* ---------- 19. Documento legal ---------- */
.legal{max-width:70ch}
.legal h2{font-size:var(--step-2);margin-top:2.6rem;margin-bottom:.9rem}
.legal h2:first-child{margin-top:0}
.legal p{font-size:1rem;line-height:1.75;margin-bottom:1.1em;color:var(--ink-500);text-wrap:pretty}

/* ---------- 20. Botón volver arriba ---------- */
.to-top{
  position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:90;
  width:46px;height:46px;display:grid;place-items:center;border-radius:50%;
  background:var(--ink);color:#fff;border:0;cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(10px);
  box-shadow:var(--shadow-md);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s,background-color .25s;
}
.to-top.is-visible{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--brand)}
.to-top svg{width:18px;height:18px}

/* ---------- 21. Impresión ---------- */
@media print{
  .site-header,.to-top,.site-footer,.hero__bg,.logos{display:none!important}
  body{color:#000;background:#fff}
  .section{padding-block:1.5rem}
}

/* ==========================================================================
   22. YouTube — sección destacada de la portada
   ========================================================================== */
:root{
  --yt:#ff2d2d;
  --yt-dark:#c81b1b;
}

.yt{
  position:relative;background:var(--ink);color:#c9d0e0;overflow:clip;
  isolation:isolate;
}
/* Textura de grano: aporta profundidad al fondo oscuro */
.yt::before,.hero::before,.cta-final::before,.news-hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}
.yt__glow{
  position:absolute;z-index:0;pointer-events:none;
  top:-22%;right:-12%;width:min(760px,80vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,45,45,.20),rgba(255,45,45,.05) 55%,transparent 72%);
  filter:blur(18px);
}
.yt__inner{position:relative;z-index:1}

.eyebrow--yt{color:var(--yt)!important}
.eyebrow--yt::before{display:none}
.eyebrow--yt svg{width:20px;height:20px;flex:none}

.yt__head{
  display:grid;gap:clamp(1.8rem,4vw,3rem);align-items:end;
  grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  margin-bottom:clamp(2.2rem,4.5vw,3.2rem);
}
@media (max-width:900px){.yt__head{grid-template-columns:1fr;align-items:start}}

.yt__channel{
  display:grid;grid-template-columns:auto 1fr;gap:.85rem 1rem;align-items:center;
  padding:1.05rem 1.2rem;border-radius:var(--radius);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(8px);
}
.yt__avatar{width:48px;height:48px;border-radius:50%;overflow:hidden;flex:none;
  border:2px solid rgba(255,255,255,.2)}
.yt__avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.yt__channel-text{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.yt__channel-text b{color:#fff;font-size:.95rem;font-weight:600}
.yt__channel-text span{font-size:.8rem;color:#8f98ad}
.yt__channel .btn{grid-column:1/-1;width:100%}

.btn--yt{--btn-bg:var(--yt);--btn-fg:#fff;--btn-bd:var(--yt)}
.btn--yt:hover{--btn-bg:var(--yt-dark);--btn-bd:var(--yt-dark);
  box-shadow:0 12px 30px -12px rgba(255,45,45,.7)}
.btn--yt svg{width:1.15em;height:1.15em}
.btn--yt:hover svg{transform:none}

/* Rejilla de vídeos: uno destacado + lista */
.yt__grid{
  display:grid;gap:clamp(1.1rem,2.4vw,1.8rem);
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  align-items:start;
}
@media (max-width:900px){.yt__grid{grid-template-columns:1fr}}
.yt__list{display:grid;gap:clamp(.7rem,1.4vw,1rem)}

.vid{
  display:grid;gap:1rem;grid-template-columns:minmax(0,150px) minmax(0,1fr);
  align-items:center;text-decoration:none;color:inherit;
  padding:.6rem;border-radius:calc(var(--radius) + 4px);
  border:1px solid transparent;
  transition:background-color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.vid:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);transform:translateX(3px)}

.vid__media{
  position:relative;display:block;overflow:hidden;border-radius:var(--radius);
  aspect-ratio:16/9;background:#1b2234;
}
.vid__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease),filter .4s var(--ease)}
.vid:hover .vid__media img{transform:scale(1.06)}

.vid__play{
  position:absolute;inset:0;margin:auto;
  width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
  background:rgba(255,45,45,.94);color:#fff;
  box-shadow:0 6px 22px rgba(0,0,0,.45);
  transform:scale(.82);opacity:0;
  transition:transform .32s var(--ease),opacity .32s var(--ease);
}
.vid__play svg{width:16px;height:16px;margin-left:2px}
.vid:hover .vid__play,.vid:focus-visible .vid__play{transform:scale(1);opacity:1}
@media (hover:none){.vid__play{opacity:1;transform:scale(1)}}

.vid__tag{
  position:absolute;top:.8rem;left:.8rem;
  padding:.32em .8em;border-radius:999px;
  background:rgba(13,18,32,.78);backdrop-filter:blur(6px);
  color:#fff;font-size:.68rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
}
.vid__body{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.vid__title{
  font-family:var(--font-display);font-weight:600;font-size:var(--step-0);line-height:1.3;
  color:#fff;letter-spacing:-.015em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.vid:hover .vid__title{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.vid__desc{font-size:.85rem;line-height:1.55;color:#9aa3b8;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vid__meta{display:flex;align-items:center;flex-wrap:wrap;gap:.2rem .55rem;font-size:.76rem;color:#8f98ad}
.vid__meta b{color:#c4cbdc;font-weight:600;white-space:nowrap}
.vid__meta i{width:3px;height:3px;border-radius:50%;background:currentColor;flex:none}

/* Vídeo destacado */
.vid--lead{grid-template-columns:1fr;gap:1.2rem;padding:0;border:0}
.vid--lead:hover{background:none;border:0;transform:none}
.vid--lead .vid__media{aspect-ratio:16/9;border-radius:var(--radius-lg);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.vid--lead .vid__play{width:74px;height:74px;opacity:1;transform:scale(1)}
.vid--lead .vid__play svg{width:26px;height:26px;margin-left:3px}
.vid--lead:hover .vid__play{transform:scale(1.08)}
.vid--lead .vid__title{font-size:var(--step-2);-webkit-line-clamp:3}
.vid--lead .vid__body{padding-inline:.2rem}

/* Shorts: carrusel horizontal con anclaje */
.shorts{margin-top:clamp(2.5rem,5vw,3.8rem)}
.shorts__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.1rem}
.shorts__head h3{font-size:var(--step-1);color:#fff}
.shorts__hint{font-size:.76rem;color:#7d879e;letter-spacing:.04em}
@media (min-width:1100px){.shorts__hint{display:none}}

.shorts__track{
  display:flex;gap:clamp(.7rem,1.4vw,1rem);
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:.9rem;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent;
}
.shorts__track::-webkit-scrollbar{height:6px}
.shorts__track::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:99px}
.shorts__track::-webkit-scrollbar-track{background:transparent}
.shorts__track li{flex:none;scroll-snap-align:start}

.short{
  position:relative;display:block;width:clamp(140px,17vw,182px);aspect-ratio:9/16;
  border-radius:var(--radius);overflow:hidden;background:#1b2234;
  text-decoration:none;isolation:isolate;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.short:hover{transform:translateY(-5px);box-shadow:0 20px 38px -20px rgba(0,0,0,.9)}
.short img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform .6s var(--ease)}
.short:hover img{transform:scale(1.06)}
.short::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(13,18,32,0) 26%,rgba(13,18,32,.62) 56%,rgba(13,18,32,.97) 100%)}
.short__play{
  position:absolute;top:.6rem;right:.6rem;width:26px;height:26px;
  display:grid;place-items:center;border-radius:50%;
  background:rgba(255,45,45,.94);color:#fff;
}
.short__play svg{width:11px;height:11px;margin-left:1px}
.short__body{position:absolute;left:0;right:0;bottom:0;padding:.85rem .8rem .75rem;
  display:flex;flex-direction:column;gap:.22rem}
.short__title{font-size:.79rem;line-height:1.3;color:#fff;font-weight:600;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.short__views{font-size:.7rem;color:#b3bacb}

.yt__cta{margin-top:clamp(2.2rem,4.5vw,3rem)}

/* ==========================================================================
   23. Agenda — fichas de evento
   ========================================================================== */
.events{display:grid;gap:clamp(.8rem,1.6vw,1.1rem)}
.event{
  display:grid;gap:1rem clamp(1.2rem,2.4vw,2rem);align-items:center;
  grid-template-columns:auto minmax(0,1fr) auto;
  padding:clamp(1.1rem,2.4vw,1.6rem);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease);
}
.event:hover{border-color:var(--brand-100);box-shadow:var(--shadow-md);transform:translateY(-3px)}
.event--past{background:transparent}
.event--past .event__date{background:var(--paper);border:1px solid var(--line);color:var(--ink-500)}
.event--past .event__day{color:var(--ink)}

.event__date{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:78px;padding:.7rem .8rem;border-radius:12px;
  background:var(--brand);color:#fff;line-height:1;
}
.event__day{font-family:var(--font-display);font-weight:700;font-size:1.7rem;letter-spacing:-.03em}
.event__month{font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-top:.28rem}
.event__year{font-size:.68rem;opacity:.78;margin-top:.18rem;letter-spacing:.08em}
.event--past .event__year{opacity:1;color:var(--ink-400)}
.event--past .event__month{color:var(--ink-500)}

.event__main{min-width:0}
.event__title{font-family:var(--font-display);font-weight:700;font-size:var(--step-1);
  line-height:1.28;color:var(--ink);letter-spacing:-.02em;text-wrap:pretty}
.event__meta{margin-top:.35rem;font-size:.85rem;color:var(--ink-500)}
.event__where{margin-top:.55rem;font-size:.8rem;color:var(--ink-400);
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.event__time{
  display:inline-flex;align-items:center;gap:.35rem;
  font-weight:600;color:var(--ink-500);font-variant-numeric:tabular-nums;
}
.event__time::before{
  content:"";width:13px;height:13px;flex:none;background:currentColor;
  -webkit-mask:var(--icono-reloj) center/contain no-repeat;
  mask:var(--icono-reloj) center/contain no-repeat;
}
:root{
  --icono-reloj:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}
.event__pill{
  display:inline-block;padding:.24em .7em;border-radius:999px;
  background:var(--brand-50);color:var(--brand-700);
  font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.event__link{
  display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;
  font-size:.82rem;font-weight:600;color:var(--brand);text-decoration:none;
  padding:.6em 1.1em;border:1.5px solid var(--line);border-radius:999px;
  transition:border-color .25s var(--ease),background-color .25s var(--ease),color .25s var(--ease);
}
.event__link:hover{border-color:var(--brand);background:var(--brand);color:#fff}
@media (max-width:720px){
  /* Una sola columna: la fecha pasa a ser una etiqueta horizontal */
  .event{grid-template-columns:1fr;gap:.9rem;align-items:start}
  .event__date{
    flex-direction:row;align-items:baseline;justify-content:flex-start;gap:.45rem;
    width:max-content;min-width:0;padding:.42rem .8rem;border-radius:999px;
  }
  .event__day{font-size:1.12rem}
  .event__month,.event__year{margin-top:0}
  .event__month{font-size:.66rem}
  .event__link{justify-self:start}
}

/* ==========================================================================
   24. Detalles de interfaz
   ========================================================================== */
/* Barra de progreso de lectura */
.progress{
  position:fixed;top:0;left:0;right:0;height:2.5px;z-index:101;
  transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--brand),var(--brand-300));
  pointer-events:none;
}


@media (max-width:560px){
  .vid{grid-template-columns:minmax(0,124px) minmax(0,1fr);gap:.85rem;padding:.4rem}
  .vid__title{font-size:.9rem}
  .vid__meta{font-size:.72rem}
  .vid__meta i{display:none}
  .vid .vid__play{width:30px;height:30px}
  .vid .vid__play svg{width:11px;height:11px}
  .vid--lead{grid-template-columns:1fr;padding:0}
  .vid--lead .vid__play{width:58px;height:58px}
  .vid--lead .vid__play svg{width:20px;height:20px}
  .yt__channel .btn{font-size:.82rem}
  .short{width:152px}
  .short__title{-webkit-line-clamp:2;font-size:.75rem}
  .short__body{padding:.7rem .65rem .6rem}
}

/* ==========================================================================
   25. Motion design
   ========================================================================== */

/* --- Aurora del hero: sustituye a las barras, se mueve muy despacio --- */
.hero__aurora{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.hero__aurora i{
  position:absolute;display:block;border-radius:50%;
  filter:blur(70px);opacity:.5;mix-blend-mode:screen;
  will-change:transform;
}
.hero__aurora i:nth-child(1){
  width:52vw;height:52vw;left:-14%;bottom:-24%;
  background:radial-gradient(closest-side,rgba(51,77,170,.55),transparent 70%);
  animation:drift1 26s ease-in-out infinite alternate;
}
.hero__aurora i:nth-child(2){
  width:44vw;height:44vw;right:-8%;top:-16%;
  background:radial-gradient(closest-side,rgba(90,120,225,.4),transparent 70%);
  animation:drift2 32s ease-in-out infinite alternate;
}
.hero__aurora i:nth-child(3){
  width:34vw;height:34vw;left:38%;bottom:-30%;
  background:radial-gradient(closest-side,rgba(35,58,140,.5),transparent 70%);
  animation:drift3 38s ease-in-out infinite alternate;
}
@keyframes drift1{to{transform:translate3d(9%,-7%,0) scale(1.16)}}
@keyframes drift2{to{transform:translate3d(-11%,9%,0) scale(1.1)}}
@keyframes drift3{to{transform:translate3d(7%,-11%,0) scale(1.2)}}

/* --- Entrada escalonada del hero --- */
.js .hero [data-in]{
  opacity:0;transform:translateY(18px);
  animation:heroIn .85s var(--ease) forwards;
  animation-delay:calc(var(--d, 0) * 1ms);
}
.js .hero [data-in="1"]{--d:120}
.js .hero [data-in="2"]{--d:220}
.js .hero [data-in="3"]{--d:330}
.js .hero [data-in="4"]{--d:440}
.js .hero [data-in="5"]{--d:560}
.js .hero [data-in="6"]{--d:680}
@keyframes heroIn{to{opacity:1;transform:none}}

/* El retrato entra con un ligero zoom, conservando su desplazamiento lateral */
.js .hero__portrait[data-in]{
  transform:translateX(var(--desplaza)) translateY(26px) scale(.985);
  animation-name:portraitIn;animation-duration:1.05s;
}
@keyframes portraitIn{to{opacity:1;transform:translateX(var(--desplaza))}}

/* Las etiquetas del hero entran una tras otra dentro de su fila */
.js .hero__meta .tag{
  opacity:0;animation:tagIn .6s var(--ease) forwards;
}
.js .hero__meta .tag:nth-child(1){animation-delay:.30s}
.js .hero__meta .tag:nth-child(2){animation-delay:.39s}
.js .hero__meta .tag:nth-child(3){animation-delay:.48s}
@keyframes tagIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* --- Barra de indicadores: escalonada al entrar --- */
.js .stat{opacity:0;animation:statIn .8s var(--ease) forwards;
  animation-delay:calc(.75s + var(--n,1) * .11s)}
@keyframes statIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* Línea que se dibuja bajo cada cifra al aparecer */
.stat__value{position:relative}

/* --- Revelado al hacer scroll, más matizado --- */
.js [data-reveal]{
  opacity:0;transform:translateY(26px) scale(.995);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.js [data-reveal].is-in{opacity:1;transform:none}

/* --- Las cifras de la home y de conferencias suben al entrar --- */
.js .metric{opacity:0;transform:translateY(20px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .metric.is-in{opacity:1;transform:none}

/* --- Subrayado animado en los títulos de sección --- */
.eyebrow::before{transition:width .6s var(--ease) .1s}
.js [data-reveal] .eyebrow::before{width:0}
.js [data-reveal].is-in .eyebrow::before{width:26px}

/* --- Micro-interacciones --- */
.tag{transition:background-color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
.tag:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);transform:translateY(-1px)}

.area,.channel,.card,.report,.event,.vid,.short{will-change:transform}

.brand__mark{transition:transform .45s var(--ease),color .35s var(--ease)}
.brand:hover .brand__mark{transform:translateY(-2px) scale(1.06)}

.socials a svg{transition:transform .3s var(--ease)}
.socials a:hover svg{transform:scale(1.12)}


/* --- Respeto absoluto por prefers-reduced-motion --- */
@media (prefers-reduced-motion:reduce){
  .hero__aurora i{animation:none}
  .js .hero [data-in],
  .js .hero__meta .tag,
  .js .stat{opacity:1;transform:none;animation:none}
  .js [data-reveal],.js .metric{opacity:1;transform:none}
  .js [data-reveal] .eyebrow::before{width:26px}
  .btn:hover::after{animation:none}
}

/* --- Los titulares de sección se descubren de abajo arriba --- */
.js [data-reveal] :is(h2,.h2){
  animation:none;
}
.js [data-reveal] :is(h2,.h2) > *{display:inline-block}

/* --- Las imágenes entran con un zoom que se relaja --- */
.js [data-reveal] :is(.split__media,.cta-final__media) img,
.js [data-reveal] .gallery img{
  transform:scale(1.05);transition:transform 1.1s var(--ease);
}
.js [data-reveal].is-in :is(.split__media,.cta-final__media) img,
.js [data-reveal].is-in .gallery img{transform:none}

/* --- Las filas de prensa entran encadenadas --- */
.js .press-item{
  opacity:0;transform:translateY(14px);
  transition:opacity .6s var(--ease),transform .6s var(--ease),background-color .25s var(--ease);
}
.js .press-item.is-in{opacity:1;transform:none}

/* --- Las fichas de evento y los informes, igual --- */
.js .event,.js .report,.js .logo-grid__item{
  opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--ease),transform .6s var(--ease),
             border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.js .event.is-in,.js .report.is-in,.js .logo-grid__item.is-in{opacity:1;transform:none}

/* --- Paralaje ligado al scroll donde el navegador lo soporta --- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion:no-preference) and (min-width:941px){
    .split__media img,
    .cta-final__media img,
    .press-featured__media img{
      animation:slideParallax linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
    }
    @keyframes slideParallax{
      from{transform:translateY(-3.5%) scale(1.09)}
      to{transform:translateY(3.5%) scale(1.09)}
    }
    /* La banda de datos se despega ligeramente al salir el hero */
    .stats{
      animation:statsFloat linear both;
      animation-timeline:view();
      animation-range:exit 0% exit 100%;
    }
    @keyframes statsFloat{to{opacity:.55;transform:translateY(-8px)}}
  }
}

/* --- El logotipo respira al fijarse la cabecera --- */
.site-header.is-solid .brand__mark{transform:scale(.94)}

/* --- Las tarjetas de área levantan en bloque --- */
.area{transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.area:hover{transform:translateY(-6px);box-shadow:0 26px 50px -26px rgba(13,18,32,.55)}

/* --- El pie entra suave --- */
.js .footer__top > *{opacity:0;transform:translateY(14px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .footer__top.is-in > *{opacity:1;transform:none}
.js .footer__top.is-in > *:nth-child(2){transition-delay:.1s}
.js .footer__top.is-in > *:nth-child(3){transition-delay:.2s}

@media (prefers-reduced-motion:reduce){
  .js .press-item,.js .event,.js .report,.js .logo-grid__item,
  .js .footer__top > *{opacity:1;transform:none}
  .js [data-reveal] :is(.split__media,.cta-final__media) img,
  .js [data-reveal] .gallery img{transform:none}
  .area:hover{transform:none}
}

/* --- Primera pantalla en móvil: el retrato se recorta para que la barra de
       indicadores quede lo más arriba posible --- */
@media (max-width:700px){
  .hero{min-height:auto;padding-top:clamp(5.5rem,16vw,7rem)}
  .hero__copy{padding-bottom:1.6rem}
  .hero__portrait{--desplaza:0px;width:auto;margin-inline:0}
  .hero__portrait img{
    max-width:100%;
    aspect-ratio:16/10;object-position:50% 16%;
    border-radius:var(--radius-lg);
  }
  .hero__portrait figcaption{margin-top:.9rem}
  .hero__layout{padding-bottom:1.8rem}
  .stat{padding:1.1rem}
  .stat__value{font-size:1.75rem}
  .stat__label{font-size:.74rem}
}

/* ==========================================================================
   26. Identidad de marca — lockup del canal
   ========================================================================== */

/* Rótulo: nombre arriba en versalitas espaciadas, marca abajo en caja alta,
   igual que la cabecera de YouTube. */
.lockup{display:block;margin-bottom:1.15rem}
.lockup__name{
  display:block;font-family:var(--font-sans);
  font-size:clamp(.72rem,.68rem + .2vw,.86rem);font-weight:600;
  letter-spacing:.34em;text-transform:uppercase;
  color:var(--brand-300);margin-bottom:.85rem;
}
.lockup__mark{
  display:block;font-family:var(--font-display);font-weight:800;
  font-size:clamp(2.15rem,1.1rem + 3.6vw,4.6rem);
  line-height:.96;letter-spacing:-.035em;text-transform:uppercase;color:#fff;
}
.lockup__rule{
  width:clamp(74px,9vw,116px);height:3px;border-radius:3px;margin:1.4rem 0 1.1rem;
  background:linear-gradient(90deg,var(--cian),var(--brand-300));
}
.lockup__tag{
  font-family:var(--font-sans);
  font-size:clamp(.74rem,.7rem + .2vw,.88rem);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:#aeb7d8;margin-bottom:1.5rem;
}
.lockup__tag i{font-style:normal;color:var(--cian);margin:0 .28em}

/* Gráfico de datos del fondo: el mismo recurso de las piezas del canal */
.hero__chart{
  position:absolute;left:0;right:0;bottom:0;z-index:0;
  width:100%;height:clamp(280px,62vh,620px);pointer-events:none;
  opacity:.32;
  /* Se apaga hacia la izquierda para no pasar por detrás del titular */
  -webkit-mask-image:linear-gradient(95deg,transparent 6%,#000 46%,#000 100%);
  mask-image:linear-gradient(95deg,transparent 6%,#000 46%,#000 100%);
}
.hero__chart-line{
  fill:none;stroke:url(#chartFade);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 8px rgba(76,195,255,.5));
  stroke-dasharray:2400;stroke-dashoffset:2400;
  animation:dibujaLinea 3s var(--ease) .5s forwards;
}
/* Segunda serie, apenas insinuada: da profundidad al fondo */
.hero__chart-ghost{
  fill:none;stroke:var(--brand-300);stroke-width:1;opacity:.4;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:2400;stroke-dashoffset:2400;
  animation:dibujaLinea 3.8s var(--ease) .9s forwards;
}
.hero__chart-area{fill:url(#chartArea);opacity:0;animation:apareceArea 1.8s var(--ease) 2s forwards}
@keyframes dibujaLinea{to{stroke-dashoffset:0}}
@keyframes apareceArea{to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .hero__chart-line,.hero__chart-ghost{animation:none;stroke-dashoffset:0}
  .hero__chart-area{animation:none;opacity:1}
}
@media (max-width:700px){
  .hero__chart{opacity:.26;height:clamp(220px,42vh,340px)}
  .hero__chart{-webkit-mask-image:none;mask-image:none}
}

/* La retícula se afina para no competir con el gráfico */
.hero__grid{background-size:110px 110px}

/* ==========================================================================
   27. Documento legal
   ========================================================================== */
.legal__date{font-size:.86rem;color:var(--ink-400);margin-bottom:2.4rem;
  padding-bottom:1.2rem;border-bottom:1px solid var(--line)}
.legal h2{font-size:var(--step-1);margin-top:2.8rem;margin-bottom:1rem;
  letter-spacing:-.02em;scroll-margin-top:110px}
.legal h2:first-of-type{margin-top:0}

.legal ul.legal__list{display:grid;gap:.85rem;margin:0 0 1.4rem;padding:0;list-style:none}
.legal ul.legal__list li{
  position:relative;padding-left:1.5rem;font-size:1rem;line-height:1.7;color:var(--ink-500);
}
.legal ul.legal__list li::before{
  content:"";position:absolute;left:.15rem;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--brand-300);
}
.legal ul.legal__list b{color:var(--ink);font-weight:600}


.legal a{color:var(--brand);font-weight:500}
.legal a:hover{text-decoration:underline;text-underline-offset:3px}


/* ==========================================================================
   29. Formularios: trampa antispam y estados de envío
   ========================================================================== */
/* Campo señuelo: invisible para las personas, tentador para los robots.
   Se oculta sin display:none para que los robots que lo detectan lo rellenen. */
.trampa{
  position:absolute !important;
  left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}

.btn[disabled]{opacity:.6;cursor:progress;transform:none;box-shadow:none}
.btn[disabled]:hover{transform:none;box-shadow:none}

/* Página de agradecimiento */
.gracias__marca{
  display:grid;place-items:center;width:64px;height:64px;margin-bottom:1.6rem;
  border-radius:50%;background:rgba(76,195,255,.12);
  border:1.5px solid rgba(76,195,255,.4);color:var(--cian);
}
.gracias__marca svg{width:28px;height:28px}

/* ==========================================================================
   29. Correcciones de móvil
   ========================================================================== */

/* --- Pie: la marca ocupa todo el ancho arriba y debajo van dos columnas --- */
@media (max-width:820px){
  .footer__top{
    grid-template-columns:1fr 1fr;
    gap:clamp(1.8rem,5vw,2.6rem) clamp(1.2rem,4vw,2rem);
  }
  .footer__brand{grid-column:1 / -1}
  .footer__desc{max-width:46ch}
}
@media (max-width:820px){
  /* Las dos columnas se mantienen también en móvil: los textos se ajustan */
  .footer__title{font-size:.68rem;letter-spacing:.12em}
  .footer__list{font-size:.85rem;gap:.75rem}
  .footer__scope{font-size:.85rem;line-height:1.75}
  .site-footer .btn{font-size:.82rem;padding-inline:1.1rem}
}

/* El botón del pie no debe partirse en dos líneas */
.footer__scope + p .btn,
.site-footer .btn{white-space:nowrap}
@media (max-width:820px){
  .site-footer .btn{width:100%;justify-content:space-between}
}

/* --- Pie de foto del hero: dentro de la imagen, sobre un velo --- */
@media (max-width:940px){
  .hero__portrait{position:relative;isolation:isolate}
  .hero__portrait img{display:block}
  .hero__portrait figcaption{
    position:absolute;left:0;right:0;bottom:0;
    margin-top:0;padding:2.6rem 1.1rem .95rem;
    border-radius:0 0 var(--radius-lg) var(--radius-lg);
    background:linear-gradient(180deg,rgba(7,11,30,0),rgba(7,11,30,.55) 45%,rgba(7,11,30,.92));
    color:#c7cee0;font-size:.8rem;line-height:1.4;max-width:none;box-shadow:none;
  }
  .hero__portrait figcaption b{color:#fff;font-size:.9rem}
  .hero__portrait figcaption span{color:#b3bbcf}
}

/* --- Campos de formulario a 16 px en móvil ---------------------------------
   Safari en iOS amplía la página automáticamente al enfocar un campo que mida
   menos de 16 px. Es molesto y descoloca el diseño. */
@media (max-width:820px){
  .field input,
  .field select,
  .field textarea{font-size:16px}
}

/* --- Zonas táctiles del pie ------------------------------------------------
   Los enlaces de texto quedaban en 17 px de alto. Se les da recorrido vertical
   para que sean cómodos de pulsar sin cambiar su aspecto. */
@media (max-width:820px){
  .footer__list a,
  .footer__bottom a{display:inline-block;padding-block:.35rem}
  .footer__list{gap:.5rem}
  .socials a{width:44px;height:44px}
}

/* Las migas de pan también necesitan recorrido para el dedo */
@media (max-width:820px){
  .crumbs{gap:.4rem}
  .crumbs a{display:inline-block;padding-block:.4rem}
  .footer__brand .brand{padding-block:.3rem}
}

/* --- Casillas de consentimiento en móvil ---
   Una casilla de 20 px es muy difícil de acertar con el dedo. Se agranda la
   casilla y se le da altura a toda la fila. */
@media (max-width:820px){
  .check{padding:.7rem .6rem;gap:.85rem;font-size:.88rem;min-height:52px;align-items:center}
  .check input{width:26px;height:26px}
  
}

/* En el hero oscuro de la newsletter, el resalte al pasar por encima se aclara */
.news-hero .check:hover{background:rgba(255,255,255,.06)}
.news-hero .check input{background-color:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3)}
.news-hero .check input:hover{border-color:var(--cian)}
/* Cuidado con la propiedad en todo este bloque: «background» en versión
   corta tiene la MISMA especificidad que «.check input:checked» y va después,
   así que borraba la imagen del tick y dejaba un cuadrado azul liso. Aquí se
   toca solo el color de fondo, nunca la forma corta. */
.news-hero .check input:checked{background-color:var(--brand);border-color:var(--brand)}
.news-hero .check a:hover{background:rgba(255,255,255,.12)}

/* <picture> no debe alterar ninguna composición: la imagen sigue siendo,
   a efectos de maquetación, hija directa de su contenedor. */
picture{display:contents}