/* ======================================================================
   P.E.P.E. — Landing pública
   Rediseño v2: mismo lenguaje que el panel — tres capas de superficie
   (fondo / tarjeta que sobresale / caja hundida), UN acento verde y los
   colores semánticos (aire, seguridad) reservados para datos que
   significan algo. Display: Bricolage Grotesque. Botones pastilla.
   Claro y oscuro siguen al sistema y se pueden forzar.
   Independiente de styles.css para no tocar el panel privado.
   ====================================================================== */

/* Los tokens, la base, la marca y el botón de tema viven en core.css.
   Aquí solo queda lo propio de la landing. */
:root{ --nav-h:60px; --wind-color:#0284c7; }
:root[data-theme="dark"]{ --wind-color:#38bdf8; }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){ --wind-color:#38bdf8; }
}

body{
  font-family:var(--font);
  background:var(--paper);
  color:var(--ink);
  line-height:1.45;
  letter-spacing:-.012em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  width:100%;
  max-width:100vw;
}
html{
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
  overscroll-behavior-y:contain;
  width:100%;
  max-width:100vw;
}
main#top{
  overflow-x:hidden;
  width:100%;
  max-width:100vw;
}

/* ---------------- Barra superior ---------------- */
.nav{
  position:sticky; top:0; z-index:80;
  height:var(--nav-h);
  display:flex; align-items:center; gap:14px;
  padding:0 20px;
  background:var(--veil);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:.5px solid var(--hair);
}
/* Marca: el wordmark (máscara para que tome el color del tema) + la antefirma
   pequeña debajo. */
.nav__brand{ display:flex; flex-direction:column; gap:2px; flex:none; text-decoration:none; }
.nav__wordmark{
  display:block; width:104px; height:23px;
  background:var(--ink);
  -webkit-mask:url(../img/pepe-wordmark.png) left center/contain no-repeat;
          mask:url(../img/pepe-wordmark.png) left center/contain no-repeat;
}
.nav__tag{ font-size:8px; font-weight:500; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-3); white-space:nowrap; }

.nav__links{
  display:flex; gap:22px; justify-content:center;
  flex:1 1 auto; min-width:0;
  overflow-x:auto; scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.nav__links::-webkit-scrollbar{ display:none; }
.nav__links a{ display:grid; place-items:center; width:36px; height:36px; flex:none;
  border-radius:11px; color:var(--ink-2); transition:background .15s, color .15s; }
.nav__links a:hover{ background:var(--surface); color:var(--ink); }
.nav__links a i{ width:19px; height:19px; flex:none; display:block; color:var(--ink-2); transition:color .15s; }
.nav__links a:hover i{ color:var(--accent); }
.nav__right{ flex:none; }

/* Iconos del menú (Novedades/Modelos/Planeta/Finanzas): glifos curados,
   traídos como máscara CSS igual que el wordmark — así toman currentColor
   y sirven en claro y oscuro sin depender del sprite de trazos. */
.micon{ background:currentColor; -webkit-mask:var(--mi) center/contain no-repeat; mask:var(--mi) center/contain no-repeat; }
.micon--fire{ --mi:url(../img/menu/fire.webp); }
.micon--modeling{ --mi:url(../img/menu/modeling.webp); }
.micon--earth{ --mi:url(../img/menu/earth.webp); }
.micon--money{ --mi:url(../img/menu/money.webp); }

/* interruptor de tema: sol y luna dentro, la perilla tapa el que no aplica */
.themesw{
  width:56px; height:28px; flex:none; padding:0; border:0; cursor:pointer;
  border-radius:999px; background:var(--surface-2); position:relative;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 6px; transition:background .25s;
}
.themesw__i{ width:14px; height:14px; flex:none; display:block; position:relative; z-index:2;
  transition:color .25s, opacity .25s; }
.themesw__i--sun{ color:#e8a33d; }
.themesw__i--moon{ color:var(--ink-3); opacity:.5; }
.themesw__k{
  position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; z-index:1;
  background:var(--paper); box-shadow:0 2px 6px rgba(8,10,20,.28);
  transition:transform .28s var(--ease), background .25s, box-shadow .25s;
}
:root[data-theme="dark"] .themesw{ background:var(--accent-soft); }
/* En oscuro la perilla queda sobre la luna: halo verde para distinguirla */
:root[data-theme="dark"] .themesw__k{
  transform:translateX(28px);
  box-shadow:0 0 0 1px rgba(0,153,56,.60), 0 0 12px 2px rgba(0,153,56,.50), 0 2px 6px rgba(0,0,0,.45);
}
:root[data-theme="dark"] .themesw__i--sun{ color:var(--ink-3); opacity:.5; }
:root[data-theme="dark"] .themesw__i--moon{ color:var(--accent); opacity:1; }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .themesw{ background:var(--accent-soft); }
  :root:not([data-theme="light"]) .themesw__k{
    transform:translateX(28px);
    box-shadow:0 0 0 1px rgba(0,153,56,.60), 0 0 12px 2px rgba(0,153,56,.50), 0 2px 6px rgba(0,0,0,.45);
  }
  :root:not([data-theme="light"]) .themesw__i--sun{ color:var(--ink-3); opacity:.5; }
  :root:not([data-theme="light"]) .themesw__i--moon{ color:var(--accent); opacity:1; }
}
.nav__right{ margin-left:auto; display:flex; align-items:center; gap:10px; }
/* hora en vivo (como el panel) */
.nav__clock{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.15; margin-right:4px; }
.nav__time{ font-size:15px; font-weight:600; letter-spacing:-.02em; color:var(--ink);
  font-variant-numeric:tabular-nums; }
.nav__date{ font-size:10px; letter-spacing:.02em; color:var(--ink-3); text-transform:capitalize; }
@media (max-width:860px){ .nav__date{ display:none; } .nav__time{ font-size:13px; } }

/* .iconbtn y la alternancia sol/luna viven en core.css */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 18px; border-radius:var(--r-pill);
  font-size:13px; font-weight:500; white-space:nowrap;
  transition:transform .2s var(--ease), opacity .2s, background .2s;
}
.btn:active{ transform:scale(.96); }
.btn--fill{ background:var(--accent); color:var(--accent-ink); font-weight:600; }
.btn--fill:hover{ filter:brightness(1.05); }
.btn--soft{ background:var(--accent-soft); color:var(--accent); font-weight:600; }
.btn--soft:hover{ filter:brightness(.97); }
.btn--lg{ padding:13px 26px; font-size:15px; }

.menubtn{ display:none; }

/* ---------------- Menú a pantalla completa ----------------
   CERRADO tiene que quedar FUERA del hit-testing (`visibility:hidden` +
   `pointer-events:none`). Sin eso: el contenido del menú es más alto que el
   `translateY(-100%)`, así que el último enlace ("Eventos") ASOMABA por encima
   de la barra y, con `z-index:90` > la barra (`80`), interceptaba TODOS los
   clics del header en escritorio — por eso cualquier botón mandaba a #eventos.
   `overflow-y:auto` por si el menú llega a ser más alto que la pantalla. */
.sheet{
  position:fixed; inset:0; z-index:90;
  background:var(--paper);
  display:flex; flex-direction:column;
  padding:calc(var(--nav-h) + 20px) 24px 32px;
  overflow-y:auto;
  transform:translateY(-100%);
  visibility:hidden; pointer-events:none;
  transition:transform .5s var(--ease), visibility 0s linear .5s;
}
.sheet.is-open{
  transform:translateY(0);
  visibility:visible; pointer-events:auto;
  transition:transform .5s var(--ease), visibility 0s;
}
.sheet__x{ position:absolute; top:10px; right:14px; }
.sheet a{
  display:flex; align-items:center; gap:16px;
  font-size:30px; font-weight:600; letter-spacing:-.03em;
  padding:15px 0; border-bottom:.5px solid var(--hair);
  opacity:0; transform:translateY(14px);
}
.sheet a i{ width:26px; height:26px; flex:none; display:block; color:var(--accent); }
/* opacity/transform también en el estado abierto: si la animación no corre
   (algunos entornos no componen fotogramas) el enlace igual se ve. */
.sheet.is-open a{ opacity:1; transform:none; animation:sheetIn .5s var(--ease) forwards; }
.sheet.is-open a:nth-child(2){ animation-delay:.03s }
.sheet.is-open a:nth-child(3){ animation-delay:.06s }
.sheet.is-open a:nth-child(4){ animation-delay:.09s }
.sheet.is-open a:nth-child(5){ animation-delay:.12s }
.sheet.is-open a:nth-child(6){ animation-delay:.15s }
.sheet.is-open a:nth-child(7){ animation-delay:.18s }
.sheet.is-open a:nth-child(8){ animation-delay:.21s }
.sheet.is-open a:nth-child(9){ animation-delay:.24s }
.sheet.is-open a:nth-child(10){ animation-delay:.27s }
.sheet.is-open a:nth-child(11){ animation-delay:.30s }
.sheet.is-open a:nth-child(12){ animation-delay:.33s }
.sheet.is-open a:nth-child(13){ animation-delay:.36s }
.sheet.is-open a:nth-child(14){ animation-delay:.39s }
.sheet.is-open a:nth-child(15){ animation-delay:.42s }
.sheet.is-open a:nth-child(16){ animation-delay:.45s }
.sheet.is-open a:nth-child(17){ animation-delay:.48s }
@keyframes sheetIn{ to{ opacity:1; transform:none } }

/* ---------------- Estructura ---------------- */
.wrap{ max-width:1080px; margin:0 auto; padding:0 20px; }
.sec{ padding-top:56px; padding-bottom:8px; scroll-margin-top:var(--nav-h); }
/* Al saltar a #top (el <main>) el destino quedaba pegado bajo la barra fija y
   el logo se veía "cortado" por el header — sobre todo en móvil al volver al
   inicio. Con este margen el salto deja el hueco exacto de la barra. */
#top{ scroll-margin-top:calc(var(--nav-h) + 14px); }
.sec__k{
  font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:8px;
}
/* Título de sección ("la info"): tipografía SANS y más contenida, para que se
   distinga del título del panel (el H1 del hero, en monoespaciada y enorme). */
.sec__t{ font-family:var(--font); font-size:clamp(20px,3.3vw,26px); font-weight:700; letter-spacing:-.02em; line-height:1.16; }
.sec__s{ flex-basis:100%; font-size:13.5px; color:var(--ink-3); margin-top:4px; max-width:60ch; }

/* Contorno como recuadro por sección y header */
section.sec-box, header.sec-box{
  --px: clamp(20px, 4vw, 48px);
  background:var(--surface);
  border-radius:clamp(28px, 4vw, 42px);
  padding:clamp(24px, 4vw, 48px) var(--px) !important;
  margin-top:32px;
  margin-bottom:32px;
  overflow:hidden;
}
section.sec-box .sec__head { margin-bottom: 24px; }

/* Carruseles dentro de un sec-box:
   Abarcan el ancho completo del recuadro de la sección (de borde a borde).
   El padding-inline de las pistas alinea la primera tarjeta con los encabezados
   y permite que el scroll fluya hasta los extremos sin cortarse antes.
   El overflow:hidden del sec-box recorta limpia y elegantemente las tarjetas
   en las esquinas redondeadas sin que sobresalgan de la sección. */
section.sec-box .railwrap {
  margin-inline: calc(var(--px) * -1) !important;
  width: calc(100% + (var(--px) * 2)) !important;
  max-width: calc(100% + (var(--px) * 2)) !important;
  box-sizing: border-box !important;
  position: relative;
}

section.sec-box .railwrap .rail,
section.sec-box .railwrap .vidgrid,
section.sec-box > .blk > .rail,
section.sec-box > .blk > .vidgrid,
section.sec-box > .rail,
section.sec-box > .vidgrid {
  margin-inline: 0 !important;
  padding-left: var(--px) !important;
  padding-right: var(--px) !important;
  padding-inline: var(--px) !important;
  scroll-padding-left: var(--px) !important;
  scroll-padding-right: var(--px) !important;
  scroll-padding-inline: var(--px) !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding-top: 12px !important;
  /* El riel recorta lo que se salga (overflow-x:auto arrastra a overflow-y),
     y el destello de color de las tarjetas cae por debajo: en reposo llega a
     38 px (0 14px 32px -8px) y en hover a 54 px (sube 8 px y crece a
     0 24px 48px -10px). Con 36 px se cortaba en plano. El margen negativo
     compensa el padding, así que el hueco real que ocupa el riel no cambia. */
  padding-bottom: 60px !important;
  margin-bottom: -48px !important;
  scroll-snap-type: x mandatory !important;
}

/* Fallback antes de que JS envuelva en .railwrap */
section.sec-box > .blk > .rail:not(.railwrap .rail),
section.sec-box > .blk > .vidgrid:not(.railwrap .vidgrid),
section.sec-box > .rail:not(.railwrap .rail),
section.sec-box > .vidgrid:not(.railwrap .vidgrid) {
  margin-inline: calc(var(--px) * -1) !important;
  width: calc(100% + (var(--px) * 2)) !important;
  max-width: calc(100% + (var(--px) * 2)) !important;
}

/* Carrusel de chips dentro de un sec-box (abarca el ancho total de borde a borde) */
section.sec-box .chips--co {
  margin-inline: calc(var(--px) * -1) !important;
  width: calc(100% + (var(--px) * 2)) !important;
  max-width: calc(100% + (var(--px) * 2)) !important;
  box-sizing: border-box !important;
  padding-left: var(--px) !important;
  padding-right: var(--px) !important;
  padding-inline: var(--px) !important;
  scroll-padding-left: var(--px) !important;
  scroll-padding-right: var(--px) !important;
  scroll-padding-inline: var(--px) !important;
}

/* El título de la sección lleva la marca de la fuente al lado (Cine, Eventos) */
.sec__head{ display:flex; align-items:center; gap:10px 12px; flex-wrap:wrap; margin-bottom:18px; }
.sec__head .brandtag{ display:block; opacity:.85; }
.sec__head .brandtag--cine{ height:15px; width:68px; }
.sec__head .brandtag--tm{ height:14px; width:98px; }

/* Sub-bloque dentro de una sección que agrupa varias cosas (NASA, Nuevo León) */
.blk{ margin-top:38px; }
.blk__t{ font-size:15px; font-weight:640; letter-spacing:-.01em; color:var(--ink); margin-bottom:14px; }
.blk__t span{ font-weight:400; font-size:12px; color:var(--ink-3); }
.blk__t .brandtag{ vertical-align:-.16em; margin-left:6px; opacity:.82; color:var(--ink-2); font-size:0; }
.blk__t .brandtag--cine{ height:13px; width:58px; }
.blk__t .brandtag--tm{ height:12px; width:92px; }
/* etiqueta secundaria dentro de un .blk (más discreta que .blk__t) */
.blk__sub{ font-size:12px; font-weight:600; letter-spacing:.02em; color:var(--ink-3); margin:22px 0 12px; }
.blk__sub span{ font-weight:400; color:var(--ink-3); }
/* Logo de la marca fuente (Cinépolis / Ticketmaster) como silueta de un solo
   color: toma el color del texto, así se ve nítido en claro y en oscuro sin
   ninguna caja ni contorno. */
.brandtag{
  display:inline-block; vertical-align:-.24em; height:15px;
  background:currentColor; color:var(--ink-2); opacity:.9;
  -webkit-mask:var(--logo) left center/contain no-repeat;
          mask:var(--logo) left center/contain no-repeat;
}
.brandtag--cine{ width:67px; --logo:url(../img/cinepolis.svg); }
.brandtag--tm{ width:106px; --logo:url(../img/ticketmaster.svg); }

/* Marca de la fuente (Cinépolis / Ticketmaster) DEBAJO del título de la
   sección — Cartelera y Conciertos —, las dos al mismo tamaño y en el mismo
   sitio. */
.sec__brand{ display:flex; align-items:center; gap:8px; margin-top:14px; }
.sec__brand__l{ font-size:10px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3); line-height:1; }
/* la silueta se alinea por su centro con la etiqueta (nada de vertical-align) */
.sec__brand .brandtag{ opacity:.9; align-self:center; display:block; }
.sec__brand .brandtag--cine{ height:16px; width:72px; }
/* el wordmark de Ticketmaster trae aire abajo dentro del PNG: se sube un pelo
   para que quede a la altura de "EVENTOS DE" */
.sec__brand .brandtag--tm{ height:15px; width:106px; position:relative; top:-2px; }

/* Aparición al entrar en pantalla.
   El estado oculto SOLO se aplica si el guion arrancó (.has-anim en <html>).
   Así, si el JavaScript falla o la pestaña carga en segundo plano, el
   contenido se ve igual: la animación adorna, nunca esconde. */
.has-anim .rise{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.has-anim .rise.is-in{ opacity:1; transform:none; }

/* Los hijos directos de una sección entran escalonados detrás de ella:
   da sensación de que el bloque "se arma" en vez de aparecer de golpe. */
.has-anim .rise > *{
  opacity:0; transform:translateY(16px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.has-anim .rise.is-in > *{ opacity:1; transform:none; }
.has-anim .rise.is-in > *:nth-child(1){ transition-delay:.06s }
.has-anim .rise.is-in > *:nth-child(2){ transition-delay:.13s }
.has-anim .rise.is-in > *:nth-child(3){ transition-delay:.2s }
.has-anim .rise.is-in > *:nth-child(4){ transition-delay:.27s }
.has-anim .rise.is-in > *:nth-child(5){ transition-delay:.34s }
.has-anim .rise.is-in > *:nth-child(n+6){ transition-delay:.4s }

/* entrada del hero, sin depender del observador */
.hero__col > *{ animation:heroIn .8s var(--ease) both; }
.hero__col > *:nth-child(2){ animation-delay:.09s }
.hero__aside{ animation:heroIn .8s var(--ease) .16s both; }
@keyframes heroIn{ from{ opacity:0; transform:translateY(18px) } to{ opacity:1; transform:none } }

@media (prefers-reduced-motion:reduce){
  .has-anim .rise, .has-anim .rise > *{ opacity:1; transform:none; transition:none; }
  .hero__col > *, .hero__aside{ animation:none; }
  .pcloud, .aidot__pulse{ animation:none; }
  *{ scroll-behavior:auto !important; }
}

/* ---------------- Hero: texto a la izquierda, tarjeta de creador a la derecha ---------------- */
header.hero.sec-box{
  position:relative; isolation:isolate; overflow:hidden;
  margin-top:calc(var(--nav-h) * -1) !important;
  padding-top:calc(var(--nav-h) + clamp(110px, 15vw, 175px)) !important;
  padding-bottom:clamp(28px, 4vw, 44px) !important;
  margin-bottom:32px;
  border-top-left-radius:0 !important;
  border-top-right-radius:0 !important;
  border-bottom-left-radius:clamp(28px, 4vw, 42px) !important;
  border-bottom-right-radius:clamp(28px, 4vw, 42px) !important;
  border:1px solid var(--hair);
  border-top:none !important;
  display:flex; flex-direction:column; justify-content:center;
  /* El fondo lo anima <canvas.hero__bg-canvas> (hero-bg.js): un campo de
     puntos que ondula con una ola viajera y se ilumina en verde en la
     cresta. Esto de aquí es el degradado de respaldo si el lienzo falla
     (mismos tonos que usa el JS). */
  background:linear-gradient(115deg, var(--hero-bg1) 0%, var(--hero-bg0) 100%);
  box-shadow:
    0 12px 30px -10px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.04);

  --hero-bg0:#e1ede6;   /* esquina más verdosa   (claro) */
  --hero-bg1:#eef6f1;   /* esquina más clara */

  --mx: 50%;
  --my: 40%;
}

/* Lienzo del fondo animado (por debajo del texto) */
.hero__bg-canvas{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  border-radius:inherit;
  display:block; pointer-events:none;
}

:root[data-theme="dark"] header.hero.sec-box{
  border-color:var(--hair);
  --hero-bg0:#082a20;
  --hero-bg1:#04080b;
  box-shadow:none !important;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) header.hero.sec-box{
    --hero-bg0:#082a20;
    --hero-bg1:#04080b;
  }
}

/* Esfera digital oculta por el momento en el hero */
.hero__orb{
  display:none !important;
}

.hero__row{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:26px 48px; flex-wrap:wrap; position:relative; z-index:2;
}
.hero__col{ flex:1 1 440px; min-width:0; padding-top:0; }
.hero__aside{ flex:0 0 auto; }
.hero__h1{
  font-family:var(--font);
  font-size:clamp(24px,7.2vw,54px); font-weight:640;
  letter-spacing:-.028em; line-height:1.06;
  white-space:nowrap;
  color:var(--ink) !important;
  text-shadow:0 1px 2px rgba(246,250,247,.85) !important;
}
.hero__h1 span{ color:var(--ink-2) !important; }
.hero__p{
  font-size:clamp(15px,2vw,19px);
  color:var(--ink-2) !important;
  margin-top:12px; max-width:42ch;
  text-shadow:0 1px 2px rgba(246,250,247,.85) !important;
}
:root[data-theme="dark"] .hero__h1{
  color:#ffffff !important;
  text-shadow:0 2px 18px rgba(0,0,0,.45) !important;
}
:root[data-theme="dark"] .hero__h1 span{ color:rgba(255, 255, 255, 0.78) !important; }
:root[data-theme="dark"] .hero__p{
  color:rgba(255, 255, 255, 0.9) !important;
  text-shadow:0 1px 14px rgba(0,0,0,.45) !important;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hero__h1{
    color:#ffffff !important;
    text-shadow:0 2px 18px rgba(0,0,0,.45) !important;
  }
  :root:not([data-theme="light"]) .hero__h1 span{ color:rgba(255,255,255,0.78) !important; }
  :root:not([data-theme="light"]) .hero__p{
    color:rgba(255,255,255,0.9) !important;
    text-shadow:0 1px 14px rgba(0,0,0,.45) !important;
  }
}

/* #ia sigue justo al hero: menos aire entre el párrafo y los iconos de app */
#ia.sec{ padding-top:10px; }

/* autor — píldora adaptada a cada tema */
.by{
  display:flex; align-items:center; gap:10px;
  padding:7px 14px 7px 7px;
  background:rgba(255, 255, 255, 0.82) !important;
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius:var(--r-pill); width:fit-content;
  box-shadow:0 6px 20px -6px rgba(0, 25, 10, 0.10), 0 1px 4px rgba(0, 0, 0, 0.04);
}
:root[data-theme="dark"] .by{
  background:rgba(255, 255, 255, 0.08) !important;
  border:1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow:0 4px 16px rgba(0, 0, 0, 0.35);
}
@media (max-width:720px){
  .hero__aside{ padding-top:0; }
}
/* foto: MISMO encuadre que la del panel (.phero__img / .about__avatar) */
.by__pic{ width:34px; height:34px; border-radius:50%; flex:none;
  background:var(--surface-2) center 12% / cover no-repeat; }
.by__t{ text-align:left; display:flex; flex-direction:column; gap:1px; }
.by__eyebrow{ font-size:8.5px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3) !important; }
.by__name{ font-size:11.5px; font-weight:400; color:var(--ink) !important; }
.by__ig{ font-size:10px; color:var(--accent) !important; transition:opacity .2s; }
.by__ig:hover{ opacity:.85; }

:root[data-theme="dark"] .by__eyebrow{ color:rgba(255, 255, 255, 0.65) !important; }
:root[data-theme="dark"] .by__name{ color:#ffffff !important; }
:root[data-theme="dark"] .by__name b{ color:#ffffff !important; }
:root[data-theme="dark"] .by__ig{ color:var(--accent) !important; }
:root[data-theme="dark"] .by__ig:hover{ opacity:.85; }

/* ---------------- Tarjeta ----------------
   Capa "raised": sobresale del fondo con una línea de pelo y una sombra
   suave, igual que en el panel. `--line` es la variante plana para tablas
   y escalas largas, donde la sombra estorba. */
.card{
  background:var(--card); border:1px solid var(--hair); border-radius:26px; padding:24px;
  position:relative; z-index:1;
  box-shadow:0 8px 24px -12px rgba(0,0,0,0.08); /* Sombra elegante light mode */
  transition:box-shadow .3s var(--ease), border-color .3s;
}
:root[data-theme="dark"] .card {
  box-shadow:0 12px 32px -12px rgba(0,0,0, 0.5), inset 0 1px 1px rgba(255,255,255, 0.04);
}
@media (prefers-color-scheme:dark) { 
  :root:not([data-theme="light"]) .card {
    box-shadow:0 12px 32px -12px rgba(0,0,0, 0.5), inset 0 1px 1px rgba(255,255,255, 0.04);
  }
}
.card--line{ background:var(--card-2); box-shadow:none; }

.card__k{ font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.card__h{ font-size:19px; font-weight:620; letter-spacing:-.022em; margin-top:3px; }

.cols{ display:grid; gap:14px; }
.cols--2{ grid-template-columns:1fr 1fr; }
.cols--3{ grid-template-columns:repeat(3,1fr); }
.cols--21{ grid-template-columns:2fr 1fr; }
.cols--12{ grid-template-columns:1fr 2fr; }

/* ---------------- Carrusel horizontal ---------------- */
.rail{
  display:flex; gap:14px;
  overflow-x:auto; scroll-snap-type:x proximity;
  overscroll-behavior-x:contain;      /* no arrastra la página al llegar al final */
  padding:2px 20px 8px;
  margin:0 -20px;
  scroll-padding-left:20px;           /* el enganche respeta el margen del texto */
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
}
.rail::-webkit-scrollbar{ display:none !important; width:0 !important; height:0 !important; }
.rail > *{ scroll-snap-align:start; flex:none; }
.rail__nav{ display:flex; gap:7px; }

/* flechas del carrusel (las pone landing.js si el rail desborda) */
.railwrap{ position:relative; }
.railwrap .rail{
  margin:0;
  padding-top:14px !important;
  /* mismo criterio que arriba: hueco para el destello, compensado con margen */
  padding-bottom:60px !important;
  margin-bottom:-46px !important;
  scrollbar-width:none !important;
}
.railwrap .rail::-webkit-scrollbar{ display:none !important; }
section.sec-box .rail__arrow--prev{ left: clamp(10px, 1.5vw, 18px); }
section.sec-box .rail__arrow--next{ right: clamp(10px, 1.5vw, 18px); }
.rail__arrow{
  position:absolute; top:38%; transform:translateY(-50%);
  width:34px; height:34px; display:grid; place-items:center;
  border-radius:999px; border:1px solid var(--hair);
  background:var(--card); color:var(--ink);
  font-size:20px; line-height:1; cursor:pointer; z-index:3;
  box-shadow:var(--shadow); transition:opacity .15s, background .15s;
}
.rail__arrow:hover{ background:var(--card-2); }
.rail__arrow--prev{ left:8px; }
.rail__arrow--next{ right:8px; }
.rail__arrow.is-off{ opacity:0; pointer-events:none; }
@media (hover:none){ .rail__arrow{ display:none; } }
/* El riel se corta limpio contra el borde del recuadro de la sección: sin
   degradado, el corte marca el marco. (Se probó difuminar los costados y se
   descartó.) */
/* La fila de deportes: las 3 tarjetas a la MISMA altura y el contenido de
   cada una repartido en vertical para que no quede hueco (la WWE trae menos
   filas que Liga MX / NFL). */
#sports{ align-items:stretch; }
#sports .lg__body{ display:flex; flex-direction:column; }
#sports .lg__body > .lg__k{ flex:none; }
#sports .lg__body > .mt{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; }
#sports .lg__body > .mt.mt--show{ flex-direction:row; }

/* ---------------- Monterrey ahora: clima + aire (una tarjeta) ---------------- */
/* El clima y el aire viven en la MISMA tarjeta, separados por una línea. */
.wxaircard{ display:flex; flex-direction:column; }
.wxair__air{ margin-top:20px; padding-top:18px; border-top:.5px solid var(--hair); }
.wxair__air .fold{ margin-top:14px; }
.wxair__air .aircard__aqi{ margin-top:8px; }
/* "respira mejor" vive dentro del botón desplegable */
.airbest{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-2);
  margin:2px 0 14px; }
.airbest b{ color:var(--ink); font-weight:600; }

.wxcard{ display:flex; flex-direction:column; }
.wxcard__row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.wxcard__t{ font-size:clamp(40px,9vw,52px); font-weight:250; letter-spacing:-.04em; line-height:.95;
  font-variant-numeric:tabular-nums; }
.wxcard__g{ font-size:34px; line-height:1; }
.wxcard__d{ font-size:14px; color:var(--ink-2); margin-top:6px; text-transform:capitalize; }
.wxcard__hl{ font-size:12px; color:var(--ink-3); margin-top:2px; font-variant-numeric:tabular-nums; }
.wxcard__days{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:16px;
  background:var(--hair); border-radius:var(--r); overflow:hidden; }
.wxd{ background:var(--surface); padding:10px 4px; text-align:center; display:flex; flex-direction:column; gap:3px; }
.wxd b{ font-size:10px; font-weight:500; color:var(--ink-2); }
.wxd i{ font-style:normal; font-size:17px; }
.wxd em{ font-style:normal; font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; }
.wxd s{ text-decoration:none; font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums; }

.aircard{ display:flex; flex-direction:column; }
.aircard__city{ font-size:22px; font-weight:640; letter-spacing:-.022em; margin-top:3px; }
.aircard__aqi{ font-size:13px; color:var(--ink-2); margin-top:10px; }
.aircard__aqi b{ font-size:clamp(40px,9vw,52px); font-weight:600; letter-spacing:-.04em; line-height:.9;
  display:inline-block; margin-right:8px; font-variant-numeric:tabular-nums; }
.aircard__sub{ font-size:12.5px; color:var(--ink-3); margin-top:14px; line-height:1.4; }
.aircard__sub b{ color:var(--ink); font-weight:600; }

/* ---------------- Escala de dato (aire / seguridad) ---------------- */
.scale{ display:flex; flex-direction:column; }
.scale__lead{ font-size:13px; color:var(--ink-2); margin:2px 0 0; max-width:52ch; }
/* Columnas FIJAS a los lados: si la última fuera `auto`, su ancho cambiaba
   fila por fila (unos totales son más largos que otros) y con él se movía la
   columna 1fr — las barras quedaban desalineadas. */
.srow{ display:grid; grid-template-columns:22px 1fr 68px 36px; gap:11px; align-items:center; padding:11px 0; }
.srow + .srow{ border-top:.5px solid var(--hair); }
.srow__n{ font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums; text-align:center; }
.srow__c{ font-size:15px; font-weight:500; min-width:0; overflow:hidden;
  white-space:nowrap; text-overflow:ellipsis; }
.srow__c em, .srow__sub{ font-style:normal; }
.srow__sub{ display:block; font-size:11px; font-weight:400; color:var(--ink-3);
  font-variant-numeric:tabular-nums; margin-top:1px; }
.srow--sec .srow__c{ white-space:normal; }
.srow__bar{ height:6px; border-radius:var(--r-pill); background:var(--surface-2); overflow:hidden; }
.srow__fill{ display:block; height:100%; border-radius:var(--r-pill); width:0; transition:width 1s var(--ease); }
.srow__v{ font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.srow__v em{ font-style:normal; display:block; font-size:10px; font-weight:400; color:var(--ink-3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.scale__rest[hidden]{ display:none; }
.scale__rest > .srow:first-child{ border-top:.5px solid var(--hair); }
.scale__more{
  margin-top:12px; width:100%; padding:11px 16px;
  border:1px solid var(--hair); border-radius:var(--r-pill);
  background:var(--card); color:var(--accent); font:inherit; font-size:13px; font-weight:600;
  cursor:pointer; transition:background .15s, border-color .15s;
}
.scale__more:hover{ background:var(--accent-soft); border-color:var(--accent); }

/* punto de color: la ÚNICA licencia cromática, y significa algo */
.dot{ width:9px; height:9px; border-radius:50%; display:inline-block; flex:none; }

.big{ display:flex; align-items:baseline; gap:12px; }
.big__v{ font-size:clamp(52px,11vw,76px); font-weight:600; letter-spacing:-.045em; line-height:1;
  font-variant-numeric:tabular-nums; }
.big__u{ font-size:14px; color:var(--ink-2); }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:1px; margin-top:22px;
  background:var(--hair); border-radius:var(--r); overflow:hidden; }
.split > div{ background:var(--surface); padding:15px; }
.split b{ display:block; font-size:17px; font-weight:600; letter-spacing:-.02em; margin-top:3px; }
.split span{ font-size:11px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em; font-weight:600; }
.split em{ font-style:normal; font-size:12px; color:var(--ink-2); }

/* ---------------- Noticias ----------------
   UNA columna: la destacada arriba a lo ancho, y debajo lo reciente + las
   carpetas EN REJILLA. Antes era `cols--21` (2fr | 1fr) y la lista de carpetas
   —mucho más alta que la destacada— dejaba media pantalla en blanco al lado. */
.news, .feed{ display:flex; flex-direction:column; gap:16px; }
.lead{ display:block; border-radius:var(--r-lg); overflow:hidden; background:var(--card); border:1px solid var(--hair); box-shadow:var(--shadow); }
.lead__img{ display:block; height:190px; background:var(--surface-2) center/cover no-repeat; position:relative; }
/* los hijos son <span>: SIN display:block se pintan en línea y el kicker, el
   título y el sumario quedan pegados en un solo párrafo (bug que se veía). */
.lead__b{ display:block; padding:16px 18px 18px; }
.lead__k{ display:block; font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); }
.lead__t{ display:block; font-size:18px; font-weight:640; letter-spacing:-.022em; line-height:1.24; margin-top:6px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.lead__s{ display:block; font-size:13px; color:var(--ink-2); margin-top:6px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ---------------- Tarjeta compacta de noticia (carrusel) ---------------- */
.deck{ padding-top:2px; }
.ncard{
  display:flex; flex-direction:column; width:248px;
  border-radius:16px; overflow:hidden; background:var(--card);
  border:1px solid var(--hair); box-shadow:var(--shadow); color:inherit;
  transition:transform .12s var(--ease), border-color .15s;
}
.ncard:active{ transform:scale(.98); }
@media (hover:hover){ .ncard:hover{ border-color:var(--border-strong,var(--hair-2)); } }
.ncard__i{ display:block; height:132px; background:var(--surface-2) center/cover no-repeat; flex:none; }
.ncard__i--none{ background:linear-gradient(135deg,var(--surface),var(--surface-2)); }
.ncard__b{ display:flex; flex-direction:column; gap:5px; padding:12px 13px 13px; flex:1; }
.ncard__k{ font-size:10.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); }
.ncard__k--mark{ display:flex; align-items:center; gap:5px; text-transform:none; letter-spacing:0; font-size:11px; color:var(--ink-2); }
.ncard__k--mark .bmark{ width:13px; height:13px; color:var(--ink); }
.ncard__t{ font-size:13.5px; font-weight:560; line-height:1.32; letter-spacing:-.008em; flex:1;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.ncard__m{ font-size:10.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; }

/* tarjeta de EVENTO (calendario tech) dentro del feed por empresa */
.ncard--ev{ border-color:var(--accent-soft); }
.ncard__ev{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  background:var(--accent-soft); color:var(--accent); }
.ncard__ev b{ font-size:19px; font-weight:700; letter-spacing:-.03em; line-height:1; }
.ncard__ev span{ font-size:10px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; opacity:.85; }

/* ---------------- Carpeta plegable ---------------- */
.fold{ border:1px solid var(--hair); border-radius:14px; overflow:hidden; background:var(--card-2); }
.fold + .fold{ margin-top:10px; }
.fold__h{
  width:100%; display:flex; align-items:center; gap:10px;
  padding:13px 16px; background:none; border:0; cursor:pointer;
  font:inherit; color:var(--ink); text-align:left;
}
.fold__t{ font-size:13.5px; font-weight:600; letter-spacing:-.01em; }
.fold__c{ font-size:11px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink-2);
  background:var(--card); border:1px solid var(--hair); padding:2px 8px; border-radius:var(--r-pill); }
.fold__v{ margin-left:auto; width:7px; height:7px; flex:none;
  border-right:1.5px solid var(--ink-3); border-bottom:1.5px solid var(--ink-3);
  transform:rotate(-45deg); transition:transform .22s var(--ease); }
.fold__h.is-open .fold__v{ transform:rotate(45deg); }
.fold__b{ padding:2px 16px 14px; }
.fold__b[hidden]{ display:none; }
.fold__b .scale, .fold__b .picks, .fold__b .trend, .fold__b .aev{ margin-top:0; }

/* Secciones de noticias como catálogo (estilo Disney+): fila horizontal
   desplazable justo debajo del título, cada caja con foto de fondo. */
.nflix{
  display:flex; gap:10px; overflow-x:auto; padding:2px 0 4px; margin:0 0 20px;
  scroll-snap-type:x proximity; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.nflix::-webkit-scrollbar{ display:none; }
.nflix__b{
  position:relative; flex:0 0 auto; width:154px; height:88px; border-radius:14px;
  overflow:hidden; scroll-snap-align:start; cursor:pointer;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:10px 12px; background:#161619; border:1.5px solid transparent; text-align:left;
  transition:border-color .15s, transform .12s var(--ease);
}
.nflix__b:active{ transform:scale(.97); }
.nflix__img{ position:absolute; inset:0; background:#26262b center/cover no-repeat; transition:transform .35s var(--ease); }
.nflix__b::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,6,8,.05) 0%, rgba(6,6,8,.82) 100%); }
@media (hover:hover){ .nflix__b:hover .nflix__img{ transform:scale(1.06); } }
.nflix__n{ position:relative; z-index:1; font-size:12.5px; font-weight:680; color:#fff; letter-spacing:-.01em; line-height:1.15; }
.nflix__c{ position:relative; z-index:1; font-size:10.5px; color:rgba(255,255,255,.72); margin-top:2px; font-variant-numeric:tabular-nums; }
.nflix__b.is-on{ border-color:var(--accent); }
.nflix__b.is-on::after{ background:linear-gradient(180deg, rgba(6,6,8,.12), rgba(6,6,8,.7)); }

.nlist{ display:flex; flex-direction:column; }
.nrow{ display:flex; gap:14px; padding:15px 0; align-items:flex-start; }
.nrow + .nrow{ border-top:.5px solid var(--hair); }
.nrow__b{ flex:1; min-width:0; }
.nrow__k{ font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); }
.nrow__t{ font-size:15px; font-weight:550; line-height:1.32; margin-top:4px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.nrow__m{ font-size:11px; color:var(--ink-3); margin-top:5px; }
.nrow__i{ display:block; width:76px; height:76px; flex:none; border-radius:12px; background:var(--surface-2) center/cover no-repeat; }

/* Carpetas por sección.
   Fuera van solo las más recientes; el resto se pliega, que es lo que mantiene
   corto el bloque. El chevron se dibuja con un borde girado para no depender
   de ningún icono. */
.nfold__k{
  font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:2px;
}
/* rejilla de carpetas: se acomodan a lo ancho en vez de apilarse */
.nfolders{
  display:grid; gap:10px; margin-top:10px;
  grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
  align-content:start;
}
.nfd{ background:var(--surface); border-radius:14px; overflow:hidden; height:max-content; }
/* una carpeta abierta ocupa toda la fila para que su lista se lea a gusto */
.nfd[open]{ grid-column:1 / -1; }

/* "lo más reciente": dos columnas en escritorio, una en móvil */
.nlist--2{ display:grid; grid-template-columns:repeat(auto-fit, minmax(290px, 1fr)); column-gap:26px; }
.nfd__h{
  display:flex; align-items:center; gap:10px; padding:13px 16px;
  cursor:pointer; list-style:none; user-select:none;
}
.nfd__h::-webkit-details-marker{ display:none; }
.nfd__h::marker{ content:""; }
.nfd__n{ font-size:14px; font-weight:560; }
.nfd__c{
  margin-left:auto; font-size:11px; font-weight:600; font-variant-numeric:tabular-nums;
  color:var(--ink-2); background:var(--card); border:1px solid var(--hair); padding:3px 9px; border-radius:var(--r-pill);
}
.nfd__v{
  width:7px; height:7px; flex:none; border-right:1.5px solid var(--ink-3);
  border-bottom:1.5px solid var(--ink-3); transform:rotate(-45deg); margin-left:2px;
  transition:transform .22s var(--ease);
}
.nfd[open] .nfd__v{ transform:rotate(45deg); }
.nfd__b{ padding:0 16px 6px; }
.nfd__b .nrow:first-child{ border-top:0; }

/* ---------------- Pósters y eventos ----------------
   OJO: estos recuadros de imagen son <span> dentro de un <a>, y un elemento
   en línea IGNORA width y height. Sin `display:block` la caja medía 0x0 y la
   portada no se veía aunque la imagen sí se hubiera descargado. */
.poster{ width:150px; }
.poster__i{ display:block; width:150px; height:225px; border-radius:14px;
  background:var(--surface-2) center/cover no-repeat;
  transition:transform .35s var(--ease); }
.poster:hover .poster__i{ transform:scale(1.03); }
.poster__t{ font-size:13px; font-weight:500; margin-top:9px; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.poster__m{ font-size:11px; color:var(--ink-3); margin-top:2px; }

.ev{ width:230px; }
.ev__i{ position:relative; display:block; width:230px; height:150px; border-radius:14px;
  background:var(--surface-2) center/cover no-repeat; overflow:hidden; }
.ev__badge{ position:absolute; left:8px; top:8px; font-size:10px; font-weight:700;
  letter-spacing:.03em; text-transform:uppercase; padding:4px 8px; border-radius:8px;
  background:rgba(10,10,12,.72); color:#fff; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.ev__t{ font-size:14px; font-weight:580; letter-spacing:-.012em; margin-top:8px; line-height:1.28;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ev__v{ font-size:11.5px; color:var(--ink-2); margin-top:3px;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }

/* ---------------- Deportes ---------------- */
.lg{ width:308px; background:var(--card); border:1px solid var(--hair); box-shadow:var(--shadow);
  border-radius:var(--r-lg); padding:20px; display:flex; flex-direction:column; }
.lg__body{ flex:1 1 auto; }
.lg__rest[hidden]{ display:none; }
.lg__more{
  margin-top:12px; align-self:stretch; padding:10px 14px;
  border:1px solid var(--hair); border-radius:var(--r-pill);
  background:var(--card); color:var(--accent); font:inherit; font-size:12.5px; font-weight:600;
  cursor:pointer; transition:background .15s, border-color .15s;
}
.lg__more:hover{ background:var(--accent-soft); border-color:var(--accent); }
.lg__h{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
/* el escudo de la liga: era todo texto y no se distinguía una de otra */
.lg__b{ width:30px; height:30px; object-fit:contain; flex:none; }
.lg__n{ font-size:19px; font-weight:640; letter-spacing:-.022em; }
.lg__s{ font-size:11px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em;
  font-weight:600; margin-left:auto; }
.mt{ padding:12px 0; }
.mt + .mt{ border-top:.5px solid var(--hair); }
.mt__t{ font-size:14px; font-weight:500; line-height:1.3; }
.mt__m{ font-size:11px; color:var(--ink-3); margin-top:5px; }
/* shows de la WWE: miniatura a la izquierda + texto. Más grande (se veía
   diminuta) pero sin tocar el ancho de la tarjeta ni el layout de Liga MX/NFL. */
.mt--show{ display:flex; align-items:center; gap:13px; }
.mt--show .mt__b{ min-width:0; }
.mt__pic{ display:block; width:108px; height:68px; flex:none; border-radius:10px;
  background:var(--surface-2) center/cover no-repeat; }
.mt__pic--logo{ background-color:#0b0b0c; background-size:contain; }

/* el enfrentamiento se lee por los escudos, no por el texto */
.mt__vs{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; }
.mt__side{ display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; }
.mt__side em{
  font-style:normal; font-size:11.5px; color:var(--ink-2); text-align:center; line-height:1.2;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.mt__cr{
  position:relative; width:42px; height:42px; flex:none;
  display:grid; place-items:center;
}
.mt__cr img{ width:100%; height:100%; object-fit:contain; position:relative; z-index:1; }
/* las iniciales quedan detrás: si la imagen carga, la tapa; si no, se ven */
.mt__cr em{
  position:absolute; inset:0; display:grid; place-items:center;
  font-style:normal; font-size:13px; font-weight:600; color:var(--ink-3);
  background:var(--surface); border-radius:50%;
}
/* logo cargado: fuera el círculo gris, el escudo se ve limpio y sin marco */
.mt__cr.is-ok em{ display:none; }
.mt__s{ font-size:20px; font-weight:640; font-variant-numeric:tabular-nums; white-space:nowrap; }
.mt__s i{ font-style:normal; color:var(--ink-3); margin:0 2px; }
.mt__s--vs{ font-size:11px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3); }

/* explicación y leyenda del índice de aire: sin esto la lista es una fila de
   números sueltos y no se sabe si más es mejor */
.airnote{ font-size:12.5px; color:var(--ink-2); margin-top:8px; line-height:1.4; }
.airnote b{ font-weight:600; color:var(--ink); }
.airleg{ display:flex; flex-wrap:wrap; gap:9px 16px; margin-top:16px;
  padding-top:13px; border-top:.5px solid var(--hair); }
.airleg__i{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink-2); }
.airleg__i i{ width:9px; height:9px; border-radius:3px; flex:none; }
.airleg__i b{ font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.lg__k{ font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3);
  margin:14px 0 2px; }
.lg__k:first-child{ margin-top:0; }

/* ---------------- Chips de filtro (novedades IA, noticias tech) ---------------- */
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px; border-radius:var(--r-pill); border:1px solid var(--hair);
  background:var(--card); color:var(--ink-2); font:inherit; font-size:12.5px; font-weight:600;
  cursor:pointer; white-space:nowrap;
  transition:background .15s, border-color .15s, color .15s;
}
.chip:hover{ color:var(--ink); }
.chip.is-on{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.chip__c{ opacity:.55; font-weight:500; font-variant-numeric:tabular-nums; }

/* ---------------- Novedades: logos-tile con aire + chips de empresa ----------------
   Fila de "app icons"; al pasar el cursor, el de encima sobresale.
   OJO: overflow-x:auto fuerza overflow-y a "auto" (regla del spec, no hay forma
   de dejar la Y realmente visible) — por eso el aro/la sombra del hover se
   recortaban. Arreglo: padding grande arriba/abajo que absorbe el lift+sombra,
   compensado con margin negativo para que NO se note como hueco extra. */
/* Baldosas: mismo material claro para todas, la marca en su color.
   Se acomodan en onda (`--i` par arriba / impar abajo) y el contenedor lleva
   padding de sobra para que el lift y la sombra del hover NUNCA se recorten. */
/* Rediseño aistack: Fila sencilla de iconos pequeños tipo carrusel */
.aistack{
  display:flex; align-items:center; justify-content:flex-start; gap:16px;
  padding:0; margin:0 0 28px 0; width:100%;
}
.aistack__t{
  --tsz:48px; /* Tamaño pequeño */
  position:relative; flex:none; width:var(--tsz); height:var(--tsz);
  padding:0; border:0; cursor:pointer;
  border-radius:50%; background:var(--card);
  border:1.5px solid transparent;
  box-shadow:0 6px 16px -6px rgba(0,0,0,.15);
  display:grid; place-items:center;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.aistack__g{ display:grid; place-items:center; width:52%; height:52%; color:var(--bc); }
/* .bmark trae su propio color (var(--ink)); aquí manda el de la marca */
.aistack__g .bmark{ width:100%; height:100%; color:inherit; }
/* en oscuro las marcas casi negras se aclaran para que se vean */
:root[data-theme="dark"] .aistack__t{ --bc-dark:#f2f4f8; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .aistack__t{ --bc-dark:#f2f4f8; } }
.aistack__t[data-co="SpaceX AI"] .aistack__g,
.aistack__t[data-co="Grok"] .aistack__g,
.aistack__t[data-co="Apple"] .aistack__g{ color:var(--bc-dark, var(--bc)); }
:root[data-theme="dark"] .aistack__t[data-co="SpaceX AI"] img.bmark,
:root[data-theme="dark"] .aistack__t[data-co="Grok"] img.bmark { filter: none; }

@media (hover:hover){
  .aistack__t:hover{
    transform:translateY(-4px) scale(1.1);
    box-shadow:0 12px 24px -8px color-mix(in srgb, var(--bc) 55%, transparent);
  }
}
.aistack__t:active{ transform:scale(.95); }
.aistack__t.is-on{
  transform:scale(1.12);
  border-color:var(--ink);
  box-shadow:0 14px 28px -10px color-mix(in srgb, var(--bc) 65%, transparent);
}

/* chips de empresa: pastillas oscuras, solo el nombre */
.chips--co .chip{
  padding:8px 16px; font-size:12px; letter-spacing:.02em;
  background:var(--ink); color:var(--paper); border-color:var(--ink);
}
.chips--co .chip:hover{ filter:brightness(1.12); }
.chips--co .chip.is-on{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent);
  padding:8px 22px; font-weight:700; }
/* en móvil las chips van en carrusel horizontal (sin envolver) */
@media (max-width:860px){
  .chips--co{
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    margin-top:0; margin-bottom:20px;
    padding-top:4px; padding-bottom:8px;
    scroll-snap-type:x proximity;
  }
  .chips--co::-webkit-scrollbar{ display:none; }
  .chips--co .chip{ flex:none; scroll-snap-align:start; }
}

/* subtítulo debajo de las chips (+ badge de la empresa elegida) */
.ia-sub{ font-size:13.5px; color:var(--ink-3); display:flex; align-items:center; gap:10px;
  flex-wrap:wrap; margin-bottom:14px; }
.ia-sub__co{ font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:inherit; opacity:0.6; padding:0; background:transparent; }
.ia-sub__co[hidden]{ display:none; }

/* Las 3 filas de empresa al elegir una: directas, "Etiqueta: texto" en una
   sola línea, sin imagen ni fuente/fecha visible — el link (chevron) lleva a
   la nota completa. Ya NO son tarjetas anchas tipo noticia: es una lista de
   3 filas dentro de una sola tarjeta, cada una con su color/glifo. */
.ia-cards{
  display:flex; gap:16px; overflow-x:auto; overflow-y:visible; padding:12px 6px 24px;
  scroll-snap-type:x mandatory; scrollbar-width:none;
}
.ia-cards::-webkit-scrollbar{ display:none; }
.ia-cards:empty{ display:none; }

.iarow{
  display:flex; flex-direction:column; align-items:flex-start; gap:12px; min-width:240px; flex:none;
  padding:20px; background:var(--card); color:inherit;
  border-radius:24px; border:1px solid var(--hair);
  box-shadow:0 8px 24px -12px rgba(0,0,0,.08);
  scroll-snap-align:start;
  transition:transform .2s, box-shadow .2s;
}
a.iarow:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 32px -12px rgba(0,0,0,.15);
}
.iarow__ico{ width:36px; height:36px; flex:none; display:grid; place-items:center; border-radius:12px; }
.iarow__ico svg{ width:18px; height:18px; }
.iarow__lbl{ font-size:12.5px; font-weight:750; letter-spacing:-.005em; color:var(--ink-2); flex:none; margin-top:4px; }
.iarow__val{
  font-size:16px; font-weight:700; letter-spacing:-.015em; color:var(--ink); line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.iarow__val--none{ font-weight:400; color:var(--ink-3); }
.iarow__when{ flex:none; font-size:12px; color:var(--ink-3); font-weight:500; margin-top:auto; }
.iarow__go{ position:absolute; bottom:20px; right:20px; width:18px; height:18px; color:var(--ink-3); transition:transform .2s, color .2s; }
.iarow{ position:relative; } /* Para el icono __go absoluto */
@media (hover:hover){ a.iarow:hover .iarow__go{ color:var(--accent); transform:translateX(3px); } }

.iarow--tool .iarow__ico{ background:var(--accent); color:var(--accent-ink); }
.iarow--event .iarow__ico{ background:var(--card-2); color:var(--ink-2); }
.iarow--product .iarow__ico{ background:color-mix(in srgb, #3aa0b8 20%, var(--card)); color:#3aa0b8; }
.iarow--empty{ opacity:.6; }

/* logo de empresa dentro de un chip / de la tarjeta */
.bmark{ width:15px; height:15px; flex:none; display:block; color:var(--ink); }
.chip .bmark{ color:currentColor; }
/* el logo toma el color de la marca cuando NO está activo el chip */
.chip:not(.is-on) .bmark.bk-claude{ color:#c8623f; }
.chip:not(.is-on) .bmark.bk-openai{ color:#0a9d78; }
.chip:not(.is-on) .bmark.bk-gemini,
.chip:not(.is-on) .bmark.bk-google{ color:#4485f4; }
.chip:not(.is-on) .bmark.bk-microsoft{ color:#00a4ef; }
.chip:not(.is-on) .bmark.bk-meta{ color:#2f6fe0; }
.chip:not(.is-on) .bmark.bk-adobe{ color:#e5462c; }
.chip:not(.is-on) .bmark.bk-apple{ color:var(--ink); }
.chip:not(.is-on) .bmark.bk-nvidia{ color:#77b900; }
.chip--mark{ padding-left:11px; }
/* fila de chips solo-logo (Novedades): un pelín más compactos */
.chips--logo .chip--mark{ padding:7px 12px; }
.chips--logo .chip--mark .bmark{ width:17px; height:17px; }

/* Etiqueta de marca de IA: un punto de color + el nombre. El color es la única
   licencia cromática y aquí distingue de un vistazo de quién es la novedad. */
.brandk{ display:inline-flex; align-items:center; gap:6px; }
.brandk::before{ content:""; width:7px; height:7px; border-radius:50%;
  background:var(--bk,var(--ink-3)); flex:none; }
/* En títulos que pueden ir a dos renglones (recomendación de modelo, evento
   del calendario) el punto va como marca inline para que el texto envuelva. */
.pick__m.brandk, .tcrow__t.brandk{ display:block; }
.pick__m.brandk::before, .tcrow__t.brandk::before{
  display:inline-block; margin-right:7px; vertical-align:1px;
}
.bk-claude{ --bk:#d97757; }
.bk-openai{ --bk:#10a37f; }
.bk-gemini{ --bk:#4485f4; }
.bk-adobe{ --bk:#e5462c; }
.bk-apple{ --bk:#8e8e93; }
.bk-meta{ --bk:#2f6fe0; }
.bk-google{ --bk:#4485f4; }
.bk-microsoft{ --bk:#00a4ef; }
.bk-samsung{ --bk:#1428a0; }
.bk-gaming{ --bk:#a259ff; }
.bk-ces{ --bk:#0071c5; }
.bk-grok, .bk-spacexai{ --bk:#8a8a8f; }
.bk-deepseek{ --bk:#5566ff; }
.bk-moonshot{ --bk:#00b4d8; }
.bk-alibaba{ --bk:#ff6a00; }

/* ---------------- Modelos de AI: nuevo layout 2 columnas (MODELOS AI.jpg) ---------------- */
.modelos__layout{
  display:grid;
  grid-template-columns:minmax(0, 1.35fr) minmax(0, 1fr);
  gap:22px;
  align-items:stretch;
  margin-top:16px;
}
.modelos__col-left{
  display:flex;
  flex-direction:column;
  min-width:0;
  height:100%;
}
.modelos__col-right{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0;
  height:100%;
}

/* Tablero de la gráfica a la izquierda */
.modelos__board{
  padding:0; overflow:hidden; margin:0; width:100%; max-width:none;
  height:100%; display:flex; flex-direction:column; justify-content:space-between;
  border-radius:24px; border:1px solid var(--hair); background:var(--card);
  box-shadow:0 8px 30px -12px rgba(0,0,0,.08);
}
.modelos__head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px 18px;
  flex-wrap:wrap; padding:18px 20px 6px;
}
.modelos__t{ font-size:15px; font-weight:700; letter-spacing:-.015em; }
.modelos__s{ font-size:12px; color:var(--ink-3); margin-top:3px; }
.modelos__note{ display:flex; flex-direction:column; gap:2px; text-align:right;
  font-size:11px; color:var(--ink-2); max-width:32ch; margin:0; }
.modelos__note b{ color:var(--ink); font-weight:650; }
.modelos__note .src{ font-size:10px; color:var(--ink-3); }
.modelos__plot{ padding:6px 12px 2px; flex:1; display:flex; align-items:center; }
.aichart{ display:block; width:100%; max-width:100%; height:auto; margin:0 auto; overflow:visible; }

/* puntos */
.aidot{ cursor:pointer; outline:none; }
.aidot__halo{ opacity:0; transition:opacity .22s var(--ease); }
.aidot__c{ transition:transform .22s var(--ease); transform-box:fill-box; transform-origin:center; }
.aidot__l{ transition:opacity .22s; opacity:.72; }
.aidot__pulse{ opacity:.24; transform-box:fill-box; transform-origin:center;
  animation:aipulse 2.6s var(--ease) infinite; }
@keyframes aipulse{
  0%,100%{ transform:scale(1); opacity:.24 }
  50%{ transform:scale(1.5); opacity:0 }
}
.aidot:hover .aidot__halo, .aidot:focus-visible .aidot__halo, .aidot.is-on .aidot__halo{ opacity:.22; }
.aidot:hover .aidot__c, .aidot:focus-visible .aidot__c, .aidot.is-on .aidot__c{ transform:scale(1.28); }
.aidot:hover .aidot__l, .aidot:focus-visible .aidot__l, .aidot.is-on .aidot__l{ opacity:1; }
.aidot:focus-visible .aidot__halo{ opacity:.35; }

/* ficha del modelo elegido */
.aipick{
  display:flex; flex-direction:column; gap:6px;
  margin:6px 12px 12px; padding:12px 14px 13px;
  border-radius:18px;
  border:1px solid color-mix(in srgb, var(--accent) 26%, var(--hair));
  background:color-mix(in srgb, var(--accent) 8%, var(--card));
  box-shadow:0 10px 26px -10px color-mix(in srgb, var(--accent) 32%, transparent);
}
.aipick:empty{ display:none; }
.aipick__top{ display:flex; align-items:center; gap:12px; }
.aipick__rank{
  flex:none; display:grid; place-items:center; min-width:32px; height:32px; padding:0 6px;
  border-radius:10px; background:var(--c, var(--accent)); color:#fff;
  font-size:12.5px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.aipick__id{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.aipick__n{ font-size:15.5px; font-weight:700; letter-spacing:-.02em; }
.aipick__mk{ font-size:11px; color:var(--ink-3); }
.aipick__d{ font-size:12.5px; color:var(--ink-2); line-height:1.45; }

/* "Última herramienta anunciada" — compacto en la columna derecha superior */
.latesttool{
  margin-bottom:0; padding:0; overflow:hidden;
  border-radius:20px; border:1px solid color-mix(in srgb, var(--accent) 26%, var(--hair));
  box-shadow:0 10px 26px -10px color-mix(in srgb, var(--accent) 30%, transparent),
             0 3px 8px -3px rgba(0,0,0,.06);
}
a.latesttool__link{
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  padding:15px 18px; color:inherit; position:relative;
  background:color-mix(in srgb, var(--accent) 7%, var(--card));
  border-radius:20px;
  transition:background .2s, transform .2s var(--ease), box-shadow .2s;
}
@media (hover:hover){
  a.latesttool__link:hover{
    background:color-mix(in srgb, var(--accent) 14%, var(--card));
    transform:translateY(-2px);
    box-shadow:0 12px 26px -8px color-mix(in srgb, var(--accent) 24%, transparent);
  }
}
.latesttool__k{
  font-size:10px; font-weight:750; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent); display:inline-flex; align-items:center; gap:6px;
}
.latesttool__row{ display:flex; align-items:center; gap:8px; margin-top:2px; }
.latesttool__mk{ width:20px; height:20px; flex:none; color:var(--ink); }
.latesttool__name{ font-size:17.5px; font-weight:750; letter-spacing:-.02em; }
.latesttool__blurb{ font-size:12px; color:var(--ink-2); line-height:1.4; max-width:100%; }
a.latesttool__link .iarow__go{ position:absolute; top:16px; right:16px; color:var(--ink-3); }
@media (hover:hover){ a.latesttool__link:hover .iarow__go{ color:var(--accent); transform:translateX(3px); } }

/* Tarjeta de empresa en carrusel de novedades (Glow sutil y elegante con sombra multicapa) */
.cocard{
  width:min(85vw, 420px); flex:none; scroll-snap-align:start;
  border-radius:24px; padding:24px;
  background:var(--card);
  border:1px solid var(--hair);
  box-shadow:0 3px 8px -2px rgba(0,0,0,0.05),
             0 12px 28px -6px rgba(0,0,0,0.08),
             0 16px 34px -10px color-mix(in srgb, var(--bc) 32%, transparent);
  display:flex; flex-direction:column; gap:16px;
  position:relative; overflow:hidden;
  transition:transform .24s var(--ease), box-shadow .24s var(--ease);
}
@media (hover:hover){
  .cocard:hover{
    transform:translateY(-4px);
    box-shadow:0 4px 12px -2px rgba(0,0,0,0.08),
               0 18px 36px -6px rgba(0,0,0,0.12),
               0 24px 46px -8px color-mix(in srgb, var(--bc) 42%, transparent);
  }
}
:root[data-theme="dark"] .cocard{
  background:var(--card);
  border:1px solid var(--hair);
  box-shadow:0 4px 12px -2px rgba(0,0,0,0.35),
             0 14px 32px -8px rgba(0,0,0,0.45),
             0 16px 36px -10px color-mix(in srgb, var(--bc) 34%, transparent);
}
:root[data-theme="dark"] .cocard:hover{
  box-shadow:0 6px 16px -2px rgba(0,0,0,0.45),
             0 20px 42px -8px rgba(0,0,0,0.55),
             0 24px 48px -8px color-mix(in srgb, var(--bc) 46%, transparent);
}
.cocard__head{
  display:flex; align-items:center; gap:12px;
  font-size:18px; font-weight:700; color:var(--ink);
  margin-bottom:12px; position:relative; z-index:1;
}
.cocard__dot{
  width:8px; height:8px; border-radius:50%; flex:none;
  background:var(--bc);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--bc) 16%, transparent);
}
.cocard__logo{
  width:24px; height:24px; display:grid; place-items:center; color:var(--bc);
}
.cocard__logo svg, .cocard__logo img{ width:100%; height:100%; object-fit:contain; }

/* Convertir imágenes PNG (Gemini, Grok, SpaceX AI) a "una tinta" (monocromáticas del color de la empresa) */
.cocard[data-co="Gemini"] .cocard__logo {
  -webkit-mask-image: url('../img/gemini.png');
  -webkit-mask-size: contain; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat;
  mask-image: url('../img/gemini.png');
  mask-size: contain; mask-position: center; mask-repeat: no-repeat;
  background-color: currentColor;
}
.cocard[data-co="SpaceX AI"] .cocard__logo,
.cocard[data-co="Grok"] .cocard__logo {
  -webkit-mask-image: url('../img/spacexai.png');
  -webkit-mask-size: contain; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat;
  mask-image: url('../img/spacexai.png');
  mask-size: contain; mask-position: center; mask-repeat: no-repeat;
  background-color: currentColor;
}
.cocard[data-co="Gemini"] .cocard__logo img,
.cocard[data-co="SpaceX AI"] .cocard__logo img,
.cocard[data-co="Grok"] .cocard__logo img {
  opacity: 0;
}

/* En modo oscuro, Apple y SpaceX AI / Grok son negros, hay que volverlos blancos para que resalten */
:root[data-theme="dark"] .cocard[data-co="Apple"],
:root[data-theme="dark"] .cocard[data-co="SpaceX AI"],
:root[data-theme="dark"] .cocard[data-co="Grok"] {
  --bc: #ffffff !important;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .cocard[data-co="Apple"],
  :root:not([data-theme="light"]) .cocard[data-co="SpaceX AI"],
  :root:not([data-theme="light"]) .cocard[data-co="Grok"] {
    --bc: #ffffff !important;
  }
}

/* Logo SpaceX AI: en modo claro es negro/oscuro (#111111), en modo oscuro es blanco (#ffffff) */
img.bmark--spacexai {
  filter: invert(1);
  transition: filter .18s;
}
:root[data-theme="dark"] img.bmark--spacexai {
  filter: none !important;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) img.bmark--spacexai {
    filter: none !important;
  }
}

/* En modo oscuro, el logo de Gemini es blanco monocromático */
:root[data-theme="dark"] .cocard[data-co="Gemini"] .cocard__logo {
  background-color: #ffffff !important;
  color: #ffffff !important;
}
:root[data-theme="dark"] .chip:not(.is-on) .bmark.bk-gemini,
:root[data-theme="dark"] .bmark.bk-gemini,
:root[data-theme="dark"] img.bmark[src*="gemini"],
:root[data-theme="dark"] img[src*="gemini.png"] {
  filter: brightness(0) invert(1) !important;
  color: #ffffff !important;
}

/* Previsualización fotográfica de la novedad dentro de la tarjeta */
.cocard__preview{
  position:relative;
  width:100%;
  height:164px;
  border-radius:16px;
  overflow:hidden;
  text-decoration:none;
  display:block;
  background:var(--card-2);
  border:1px solid var(--hair);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06), 0 4px 14px rgba(0,0,0,0.08);
  flex:none;
  z-index:1;
}
.cocard__preview-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  transition:transform .35s var(--ease), filter .35s var(--ease);
}
@media (hover:hover){
  .cocard:hover .cocard__preview-img{
    transform:scale(1.04);
  }
}
.cocard__preview-scrim{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.76) 100%);
  pointer-events:none;
}
.cocard__preview-tag{
  position:absolute;
  bottom:10px;
  left:12px;
  right:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  color:#ffffff;
  font-size:12px;
  font-weight:600;
  letter-spacing:-.01em;
  text-shadow:0 1px 3px rgba(0,0,0,0.85);
  pointer-events:none;
}
.cocard__preview-tag span{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.cocard__preview-badge{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.05em;
  font-weight:700;
  padding:3px 7px;
  border-radius:6px;
  background:color-mix(in srgb, var(--bc) 65%, #000);
  color:#fff;
  flex:none;
  box-shadow:0 2px 6px rgba(0,0,0,0.3);
}

/* Recuadros internos para la info dentro de la tarjeta */
.cocard__data{ display:flex; flex-direction:column; gap:8px; position:relative; z-index:1; }
.cocard__item{
  background:var(--card-2);
  border:1px solid var(--hair);
  border-radius:14px; padding:12px 16px;
  display:flex; flex-direction:column; gap:6px;
  transition:border-color .2s;
}
.cocard__item-head{ display:flex; align-items:center; gap:6px; }
.cocard__item-head svg{ color:var(--ink-3); }
.cocard__item:hover{ border-color:var(--hair-2); }
.cocard__label{
  font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em; font-weight:700;
  color:var(--ink-3);
}
.cocard__val{
  font-size:15px; font-weight:600; color:var(--ink); text-decoration:none;
}
.cocard__val:hover{ text-decoration:underline; }

/* Rejilla de casos de uso (cuadrícula 2x3 perfectamente alineada como en MODELOS AI.jpg) */
.picks-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  grid-template-rows:repeat(3, 1fr);
  gap:12px;
  flex:1;
}
.pickcard{
  border-radius:18px; border:1px solid var(--hair);
  background:var(--card);
  box-shadow:0 4px 14px -6px rgba(0,0,0,.06), 0 12px 26px -14px rgba(0,0,0,.10);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s;
  display:flex; flex-direction:column;
  height:100%; box-sizing:border-box;
}
@media (hover:hover){
  .pickcard:hover{
    transform:translateY(-3px);
    border-color:var(--hair-2);
    box-shadow:0 14px 28px -10px rgba(0,0,0,.16);
  }
}
.pickcard__s{
  display:flex; flex-direction:column; justify-content:center; gap:4px; padding:14px 16px;
  cursor:pointer; outline:none; list-style:none; flex:1; box-sizing:border-box;
}
.pickcard__s::-webkit-details-marker{ display:none; }
.pickcard__u{
  font-size:9.5px; font-weight:750; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-3); line-height:1.2;
}
.pickcard__m{ font-size:13.5px; font-weight:700; letter-spacing:-.015em; line-height:1.24; color:var(--ink); }
.pickcard__m.brandk{ display:inline-flex; align-items:flex-start; gap:6px; }
.pickcard__m.brandk::before{ margin-top:4px; }
.pickcard__w{ font-size:11px; color:var(--ink-2); line-height:1.38; padding:0 16px 14px; }

/* Adaptación responsive para pantallas medianas y pequeñas */
@media (max-width:980px){
  .modelos__layout{
    grid-template-columns:1fr;
    gap:18px;
  }
  .modelos__col-right{
    height:auto;
  }
  .picks-grid{
    grid-template-rows:repeat(3, minmax(74px, auto));
    gap:10px;
    flex:none;
  }
}
@media (max-width:540px){
  .picks-grid{
    grid-template-columns:repeat(2, 1fr);
    grid-template-rows:repeat(3, minmax(68px, auto));
    gap:8px;
  }
  .pickcard__s{ padding:10px 12px; }
  .pickcard__u{ font-size:8.5px; }
  .pickcard__m{ font-size:12px; }
}

/* ---------------- Top artículos tecnológicos (Estilo Referencia Cards) ---------------- */
.prodtile{
  display:flex; flex-direction:column; justify-content:flex-end;
  width:236px; height:340px; flex:none; color:#ffffff; text-decoration:none;
  border-radius:28px; overflow:hidden;
  position:relative; isolation:isolate;
  background:radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--pt, #3b82f6) 30%, #15171d), #0d0f14);
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 14px 32px -8px color-mix(in srgb, var(--pt, #3b82f6) 35%, rgba(0,0,0,0.4)), 0 4px 12px rgba(0,0,0,0.2);
  transition:transform .28s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow .28s cubic-bezier(0.2, 0.8, 0.2, 1), border-color .25s ease;
  user-select:none;
}
@media (hover:hover){
  .prodtile:hover{
    transform:translateY(-8px);
    box-shadow:0 24px 48px -10px color-mix(in srgb, var(--pt, #3b82f6) 55%, rgba(0,0,0,0.5)), 0 8px 20px rgba(0,0,0,0.3);
    border-color:rgba(255,255,255,0.3);
  }
}
.prodtile__media{
  position:absolute; inset:0; z-index:0;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  background:transparent;
}
.prodtile__img{
  position:relative;
  max-width:82%; max-height:58%; width:auto; height:auto;
  object-fit:contain;
  margin-top:-38px;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,0.45));
  transition:transform .35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.prodtile__img--cover{
  max-width:none; max-height:none; width:100%; height:100%;
  margin-top:0;
  object-fit:cover;
  object-position:center;
  filter:brightness(0.92) contrast(1.04);
}
.prodtile:hover .prodtile__img{
  transform:scale(1.06);
}
.prodtile__scrim{
  position:relative; z-index:2;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:20px 18px 18px;
  background:linear-gradient(to bottom, transparent 0%, rgba(10, 12, 16, 0.3) 30%, rgba(10, 12, 16, 0.82) 65%, rgba(10, 12, 16, 0.96) 100%);
  width:100%; box-sizing:border-box;
}
.prodtile__info{
  display:flex; flex-direction:column; gap:3px;
}
.prodtile__m{
  font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,0.72);
}
.prodtile__n{
  font-size:17px; font-weight:700; letter-spacing:-.02em; line-height:1.24;
  color:#ffffff;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.prodtile__btn{
  display:inline-flex; align-items:center; justify-content:space-between;
  margin-top:14px; padding:9px 16px; border-radius:999px;
  font-size:12px; font-weight:600; letter-spacing:-.01em;
  background:rgba(255, 255, 255, 0.14);
  color:#ffffff;
  border:1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-sizing:border-box; width:100%;
  transition:all .2s ease;
}
.prodtile__btn svg{
  transition:transform .2s ease;
}
@media (hover:hover){
  .prodtile:hover .prodtile__btn{
    background:rgba(255, 255, 255, 0.26);
    border-color:rgba(255, 255, 255, 0.4);
  }
  .prodtile:hover .prodtile__btn svg{
    transform:translateX(3px);
  }
}
@media (max-width:540px){
  .prodtile{ width:210px; height:310px; border-radius:24px; }
  .prodtile__scrim{ padding:16px 14px 14px; }
  .prodtile__n{ font-size:15.5px; }
  .prodtile__btn{ padding:8px 14px; font-size:11.5px; margin-top:10px; }
}

/* ---------------- Nuevos videos (YouTube por empresa) ---------------- */
.vidgrid{ display:flex; gap:16px; overflow-x:auto; scrollbar-width:none;
  padding:6px 0 18px; margin:0; width:100%; max-width:100%; box-sizing:border-box; scroll-snap-type:x proximity; }
.vidgrid::-webkit-scrollbar{ display:none; }
.vidgrid > *{ scroll-snap-align:start; flex:none; }
.vidcard{ display:flex; flex-direction:column; gap:8px; width:min(340px,82vw); color:inherit; text-decoration:none; }
.vidcard__co{ font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); }
.vidcard__i{
  position:relative; display:block; width:100%; aspect-ratio:16/9; border-radius:18px;
  background:var(--surface-2); overflow:hidden;
  border:1px solid color-mix(in srgb, var(--hair) 80%, rgba(255,255,255,.08));
  box-shadow:0 6px 20px -6px rgba(0,0,0,.12);
}
.vidcard__i img{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
  transition:transform .28s var(--ease);
}
@media (hover:hover){
  .vidcard:hover .vidcard__i img{
    transform:scale(1.05);
  }
}
.vidcard__play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:44px; height:44px; display:grid; place-items:center; border-radius:50%;
  background:rgba(0,0,0,.65); color:#fff;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  box-shadow:0 4px 14px rgba(0,0,0,.35);
  opacity:.92; transition:transform .2s var(--ease), background .2s, opacity .2s;
  pointer-events:none; z-index:2;
}
.vidcard__play svg{ width:16px; height:16px; margin-left:2px; fill:currentColor; }
@media (hover:hover){
  .vidcard:hover .vidcard__play{
    transform:translate(-50%,-50%) scale(1.1);
    background:var(--accent);
    color:var(--accent-ink);
    opacity:1;
  }
}
.vidcard__b{
  position:absolute; bottom:10px; right:10px;
  padding:3px 8px; border-radius:6px;
  background:rgba(0,0,0,.75); color:#fff;
  font-size:10.5px; font-weight:600;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  letter-spacing:-.01em; z-index:2;
}
.vidcard__b--live{
  background:#ef4444; color:#fff; display:inline-flex; align-items:center; gap:5px;
}
.vidcard__dot{
  width:6px; height:6px; border-radius:50%; background:#fff;
  animation:vlivepulse 1.4s ease-in-out infinite;
}
@keyframes vlivepulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.4; transform:scale(.75); }
}
.vidcard__t{ font-size:13.5px; font-weight:620; line-height:1.3; letter-spacing:-.015em;
  color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  transition:color .18s; }
@media (hover:hover){ .vidcard:hover .vidcard__t{ color:var(--accent); } }
.vidcard__m{ font-size:11px; color:var(--ink-3); }

/* ---------------- Eventos de tecnología: tarjetas countdown ----------------
   Cada tarjeta abre con una franja de "preview": el logo de la empresa sobre
   un panel neutro, para que estas tarjetas tengan peso visual junto a las de
   noticias (que sí llevan foto). */
.lcard{
  display:flex; flex-direction:column; width:196px; padding:0; overflow:hidden;
  border-radius:16px; background:var(--card);
  border:1px solid var(--hair); box-shadow:var(--shadow);
}
.lcard--hot{ border-color:var(--accent); }
.lcard__logo{
  display:grid; place-items:center; height:84px;
  background:var(--surface-2); border-bottom:1px solid var(--hair);
}
.lcard__logo .bmark{ width:34px; height:34px; color:var(--ink); opacity:.92; }
.lcard__logo.bk-openai .bmark{ color:#10a37f; }
.lcard__logo.bk-google .bmark{ color:#4285f4; }
.lcard__logo.bk-microsoft .bmark{ color:#00a4ef; }
.lcard__logo.bk-meta .bmark{ color:#2f6fe0; }
.lcard__logo.bk-adobe .bmark{ color:#e5462c; }
.lcard__logo--txt{ font-size:12px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-3); }
.lcard__body{ display:flex; flex-direction:column; gap:5px; padding:13px 14px 15px; }
.lcard__n{ font-size:26px; font-weight:700; letter-spacing:-.04em; line-height:.95; font-variant-numeric:tabular-nums; }
.lcard__n em{ font-style:normal; font-size:11px; font-weight:600; color:var(--ink-3); margin-left:5px; letter-spacing:0; }
.lcard__t{ font-size:13px; font-weight:600; letter-spacing:-.01em; line-height:1.28;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.lcard__d{ font-size:10.5px; color:var(--ink-2); font-variant-numeric:tabular-nums; }

/* ---------------- Espacio: sol y luna ---------------- */
.astro{ display:flex; flex-direction:column; }
.astro__big{ display:flex; align-items:center; gap:15px; }
.astro__moon{ font-size:48px; line-height:1; flex:none; }
.astro__mn{ display:block; font-size:18px; font-weight:640; letter-spacing:-.02em; }
.astro__mi{ display:block; font-size:12px; color:var(--ink-2); margin-top:2px; }
/* rejilla de datos compacta (astro, y reutilizable) */
.mgrid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; margin-top:14px;
  background:var(--hair); border-radius:var(--r); overflow:hidden; }
.mtile{ background:var(--surface); padding:12px 14px; }
.mtile span{ display:block; font-size:10px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); }
.mtile b{ display:block; font-size:15px; font-weight:600; letter-spacing:-.02em; margin-top:4px; font-variant-numeric:tabular-nums; }

/* eventos del cielo: carrusel de tarjetas con "póster" (emoji sobre degradado) */
.aevcard{ display:flex; flex-direction:column; width:172px; border-radius:16px; overflow:hidden;
  background:var(--card); border:1px solid var(--hair); box-shadow:var(--shadow); }
.aevcard__p{ display:block; height:100px; background:var(--surface-2) center/cover no-repeat; }
.aevcard__b{ display:flex; flex-direction:column; gap:3px; padding:11px 13px 13px; }
.aevcard__n{ font-size:20px; font-weight:700; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; }
.aevcard__n em{ font-style:normal; font-size:11px; font-weight:600; color:var(--ink-3); margin-left:4px; }
.aevcard__t{ font-size:12.5px; font-weight:600; letter-spacing:-.01em; line-height:1.25; margin-top:3px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.aevcard__d{ font-size:10.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; }

/* ---------------- Imagen astronómica del día (NASA) ---------------- */
.apodc{ padding:0; }
.apodc__img{ display:block; width:100%; height:clamp(240px,54vw,440px);
  background:var(--surface-2) center/cover no-repeat; }
.apodc__b{ display:block; padding:14px 18px 16px; color:inherit; }
.apodc__t{ display:block; font-size:15px; font-weight:600; letter-spacing:-.012em; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.apodc__d{ display:block; font-size:11.5px; color:var(--ink-3); margin-top:5px; }
@media (hover:hover){ a.apodc__b:hover .apodc__t{ color:var(--accent); } }

.eyes{ display:block; color:inherit; transition:border-color .15s; }
.eyes:hover{ border-color:var(--accent); }
.eyes .card__h{ font-size:16px; }
.eyes__p{ font-size:12.5px; color:var(--ink-2); line-height:1.45; margin-top:7px; }
.eyes__go{ display:inline-block; margin-top:12px; font-size:13px; font-weight:600; color:var(--accent); }

/* ---------------- Planeta: Tierra ilustrada + widgets flotando ---------------- */
.planeta{ position:relative; isolation:isolate; overflow:hidden; }
#planeta.sec-box{
  position:relative; isolation:isolate; overflow:hidden;
  padding-bottom:clamp(230px, 32vw, 390px) !important;
  background:radial-gradient(ellipse 90% 45% at 50% 100%, rgba(59, 130, 246, 0.18), transparent 75%), var(--surface);
}
.planeta__earth-wrap{
  position:absolute; left:0; right:0; bottom:0;
  height:clamp(260px, 36vw, 480px);
  overflow:hidden;
  border-radius:0 0 clamp(28px, 4vw, 42px) clamp(28px, 4vw, 42px);
  pointer-events:none; z-index:0;
}
/* El planeta asomándose suavemente desde el horizonte inferior (aprox. 37% visible) */
.planeta__earth{
  position:absolute; left:50%; bottom:0;
  width:min(1200px, 140%); height:auto; aspect-ratio:1/1;
  max-width:none !important;
  transform:translate(-50%, 63%);
  z-index:0; pointer-events:none;
  filter:drop-shadow(0 -18px 45px rgba(59, 130, 246, 0.45));
}

.planeta__cards{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
  max-width:960px; margin-inline:auto;
  align-items:stretch;
  padding:14px 0 0;
}
#wxCard{
  grid-column:1; grid-row:1;
  display:flex; flex-direction:column; justify-content:space-between;
  height:100%; box-sizing:border-box;
}
#airCard{
  grid-column:2; grid-row:1;
  display:flex; flex-direction:column; justify-content:space-between;
  height:100%; box-sizing:border-box;
}
#wxCard .fold,
#airCard .fold{
  margin-top:auto;
}
#skyNext{
  grid-column:1; grid-row:2;
  display:flex; flex-direction:column; justify-content:center;
  height:100%; min-height:124px; box-sizing:border-box;
}
#apodCard{
  grid-column:2; grid-row:2;
  display:flex; align-items:center;
  height:100%; min-height:124px; box-sizing:border-box;
}
#eyesCard{
  grid-column:1; grid-row:3;
  width:fit-content; align-self:start;
}

/* Tarjetas flotantes con refinado glassmorphism */
.planeta .pcard{
  border-radius:24px;
  background:color-mix(in srgb, var(--card) 85%, transparent);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid color-mix(in srgb, var(--hair) 75%, rgba(255,255,255,.2));
  box-shadow:0 18px 38px -10px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.03);
  transition:transform .24s var(--ease), box-shadow .24s var(--ease);
}
@media (hover:hover){
  .planeta .pcard:hover{
    transform:translateY(-4px);
    box-shadow:0 26px 48px -14px rgba(0,0,0,.18), 0 4px 12px rgba(0,0,0,.05);
  }
}
.planeta .pcard--sky{ padding:0; overflow:hidden; }

.pcard--eyes{
  display:flex; align-items:center; gap:12px; padding:11px 22px; width:fit-content; color:inherit;
  border-radius:999px !important;
  background:color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid color-mix(in srgb, var(--hair) 75%, rgba(255,255,255,.2));
  box-shadow:0 12px 28px -10px rgba(0,0,0,.1);
}
@media (hover:hover){
  .pcard--eyes:hover{
    border-color:var(--accent);
    transform:translateY(-3px);
    box-shadow:0 16px 32px -8px color-mix(in srgb, var(--accent) 30%, transparent);
  }
}
.pcard--eyes__n{ display:block; width:32px; height:22px; flex:none; color:var(--ink); }
.pcard--eyes__n svg{ display:block; width:100%; height:100%; }
.pcard--eyes__t{ font-size:14.5px; font-weight:700; letter-spacing:-.018em; }
.pcard__k{ font-size:10px; font-weight:750; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-3); padding:0 0 6px; }

/* clima */
.wxcard__top{ display:flex; align-items:center; gap:14px; }
.wxcard__ico{ font-size:38px; line-height:1; display:inline-flex; align-items:center; justify-content:center; }
.wxcard__t{ font-size:clamp(38px,9vw,52px); font-weight:250; letter-spacing:-.04em; line-height:.95;
  font-variant-numeric:tabular-nums; }
.wxcard__loc{ font-size:15px; font-weight:640; letter-spacing:-.02em; margin-top:8px; }
.wxcard__days{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-top:16px;
  background:transparent; border-radius:0;
}
.wxcard__days .wxd{
  background:color-mix(in srgb, var(--surface-2) 65%, var(--card));
  border:1px solid color-mix(in srgb, var(--hair) 80%, transparent);
  border-radius:18px; padding:12px 6px;
  box-shadow:0 4px 10px -4px rgba(0,0,0,.05);
  transition:transform .2s var(--ease), background .2s;
}
@media (hover:hover){
  .wxcard__days .wxd:hover{ transform:scale(1.05); background:color-mix(in srgb, var(--surface-2) 80%, var(--card)); }
}
.wxd__t{ font-size:10px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-3); }
.wxd__i{ font-size:18px; margin:7px 0; }
.wxd__hl{ display:flex; gap:6px; font-size:10px; font-weight:600; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.wxd__hl b{ color:var(--ink); font-weight:700; }

/* ================= Planeta: Sol realista (Orbe incandescente con corona de calor) ================= */
.mini-sun {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  position:relative;
  flex:none;
  vertical-align:middle;
}
.mini-sun__svg {
  width:100%;
  height:100%;
  overflow:visible;
}
.mini-sun__bloom {
  transform-origin:24px 24px;
  animation:sunBloomBreath 3.2s ease-in-out infinite alternate;
}
@keyframes sunBloomBreath {
  0%   { transform:scale(0.88); opacity:0.6; }
  100% { transform:scale(1.15); opacity:0.95; }
}
.mini-sun__rays {
  transform-origin:24px 24px;
  animation:sunRaysGlide 40s linear infinite;
}
@keyframes sunRaysGlide {
  from { transform:rotate(0deg); }
  to   { transform:rotate(360deg); }
}
.mini-sun__core {
  transform-origin:24px 24px;
  animation:sunCorePulse 2.4s ease-in-out infinite alternate;
}
@keyframes sunCorePulse {
  0%   { transform:scale(0.96); filter:drop-shadow(0 0 6px rgba(255, 193, 7, 0.7)); }
  100% { transform:scale(1.04); filter:drop-shadow(0 0 14px rgba(255, 160, 0, 0.9)); }
}

/* ================= Planeta: Viento realista (Líneas de flujo aerodinámicas) ================= */
.aircard__wind {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:32px;
  position:relative;
  flex:none;
  color:var(--wind-color, #0284c7);
}
.aircard__wind-svg {
  width:100%;
  height:100%;
  overflow:visible;
}
.aircard__wind-ambient {
  opacity:0.2;
}
.aircard__wind-stream {
  fill:none;
  stroke:var(--wind-color, #0284c7);
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 1px 2px rgba(2, 132, 199, 0.25));
}
:root[data-theme="dark"] .aircard__wind-stream {
  filter:drop-shadow(0 1px 3px rgba(56, 189, 248, 0.35));
}

.aircard__wind-stream--1 {
  stroke-width:1.8;
  stroke-dasharray:22 18;
  animation:windGlide1 2.2s cubic-bezier(0.35, 0, 0.25, 1) infinite;
  animation-delay:0.12s;
}
.aircard__wind-stream--2 {
  stroke-width:1.3;
  stroke-dasharray:14 14;
  animation:windGlide2 1.8s cubic-bezier(0.35, 0, 0.25, 1) infinite;
  animation-delay:0.28s;
}
.aircard__wind-stream--3 {
  stroke-width:2.2;
  stroke-dasharray:28 18;
  animation:windGlide3 2.0s cubic-bezier(0.35, 0, 0.25, 1) infinite;
  animation-delay:0s;
}
.aircard__wind-stream--4 {
  stroke-width:1.2;
  stroke-dasharray:12 16;
  animation:windGlide4 1.9s cubic-bezier(0.35, 0, 0.25, 1) infinite;
  animation-delay:0.42s;
}
.aircard__wind-stream--5 {
  stroke-width:1.7;
  stroke-dasharray:20 18;
  animation:windGlide5 2.4s cubic-bezier(0.35, 0, 0.25, 1) infinite;
  animation-delay:0.25s;
}

@keyframes windGlide1 {
  0%   { stroke-dashoffset:40; transform:translateX(-4px); opacity:0; }
  20%  { opacity:0.9; }
  80%  { opacity:0.9; }
  100% { stroke-dashoffset:-40; transform:translateX(4px); opacity:0; }
}
@keyframes windGlide2 {
  0%   { stroke-dashoffset:28; transform:translateX(-3px); opacity:0; }
  25%  { opacity:0.7; }
  75%  { opacity:0.7; }
  100% { stroke-dashoffset:-28; transform:translateX(3px); opacity:0; }
}
@keyframes windGlide3 {
  0%   { stroke-dashoffset:46; transform:translateX(-5px); opacity:0; }
  20%  { opacity:1; }
  80%  { opacity:1; }
  100% { stroke-dashoffset:-46; transform:translateX(5px); opacity:0; }
}
@keyframes windGlide4 {
  0%   { stroke-dashoffset:28; transform:translateX(-3px); opacity:0; }
  25%  { opacity:0.65; }
  75%  { opacity:0.65; }
  100% { stroke-dashoffset:-28; transform:translateX(3px); opacity:0; }
}
@keyframes windGlide5 {
  0%   { stroke-dashoffset:38; transform:translateX(-4px); opacity:0; }
  20%  { opacity:0.85; }
  80%  { opacity:0.85; }
  100% { stroke-dashoffset:-38; transform:translateX(4px); opacity:0; }
}

/* aire */
.aircard__top{ display:flex; align-items:center; gap:14px; }
.aircard__wave{ display:flex; flex-direction:column; gap:4px; width:38px; flex:none; }
.aircard__wave i{ display:block; height:3px; border-radius:2px; background:var(--ink-3); }
.aircard__wave i:nth-child(2){ width:78%; margin-left:auto; }
.aircard__wave i:nth-child(3){ width:56%; }
.aircard__b{ font-size:12.5px; color:var(--ink-3); }
.aircard__b b{ font-size:clamp(32px,7vw,44px); font-weight:600; letter-spacing:-.04em; line-height:.9;
  display:inline-block; margin-right:6px; font-variant-numeric:tabular-nums; }
.aircard__lbl{ font-size:12.5px; color:var(--ink-2); margin-top:8px; text-transform:capitalize; }
.aircard .fold{ margin-top:14px; }

  /* Móvil: Planeta mantiene sus 2 columnas exactamente en grid alineado */
  @media (max-width:820px){
    .planeta__cards{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:12px;
      width:100%;
      padding:12px 0 0;
      box-sizing:border-box;
    }
  
    /* Planeta: asomándose sutilmente desde el horizonte inferior */
    .planeta__earth{ width:min(900px, 150%); bottom:0; left:50%; transform:translate(-50%, 63%); }
  
    /* Botones desplegables más pequeños */
    .planeta .fold__h { padding:9px 12px; }
    .planeta .fold__t { font-size:12.5px; }
    .planeta .fold__c { font-size:10px; padding:1px 6px; }

    .planeta .pcard--sky,
    .planeta .pcard--apod{
      min-height:110px;
      height:110px;
    }
    .planeta .pcard--apod{ padding:10px 12px; gap:10px; }
    .apodc__thumb{ width:58px; height:58px; border-radius:12px; }
    .apodc__t{ font-size:12px; line-height:1.22; }
    .apodc__d{ display:none; }
  }

  @media (max-width:560px){
    .planeta__cards{ gap:8px; padding:8px 0 0; }
    .planeta .pcard{ border-radius:18px; padding:14px 10px; }
    .planeta .pcard--sky{ padding:0; }
    .planeta .pcard--sky,
    .planeta .pcard--apod{
      min-height:104px;
      height:104px;
    }
    .wxcard__top{ gap:8px; }
    .wxcard__ico{ font-size:28px; }
    .mini-sun{ width:30px; height:30px; }
    .wxcard__t{ font-size:30px; }
    .wxcard__loc{ font-size:12px; margin-top:4px; }
    .wxcard__days{ gap:4px; margin-top:8px; }
    .wxcard__days .wxd{ padding:6px 2px; border-radius:12px; text-align:center; }
    .wxd__t{ font-size:8px; }
    .wxd__i{ font-size:13px; margin:2px 0; }
    .wxd__hl{ font-size:8px; gap:2px; justify-content:center; }
    .aircard__top{ gap:8px; }
    .aircard__wind{ width:32px; height:24px; }
    .aircard__b b{ font-size:28px; }
    .aircard__lbl{ font-size:11px; margin-top:4px; }
    .pcard--eyes{ padding:8px 14px; gap:8px; width:fit-content; }
    .pcard--eyes__n{ width:24px; height:16px; }
    .pcard--eyes__t{ font-size:12px; }
    .planeta .pcard--apod{ padding:10px 10px; gap:8px; }
    .apodc__thumb{ width:48px; height:48px; border-radius:10px; }
    .apodc__t{ font-size:11px; }
    .skynext{ padding:10px 12px; }
    .skynext__ttl{ font-size:12px; }
    .skynext__w{ font-size:10px; }
  }

/* En Planeta: foto del día y próximo evento con la MISMA altura (124px) */
.planeta .pcard--sky,
.planeta .pcard--apod{
  min-height:124px;
  height:124px;
  box-sizing:border-box;
}

/* Foto del día (NASA) - tarjeta interactiva de alta fidelidad */
.planeta .pcard--apod{
  padding:12px 16px;
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
  color:inherit;
  overflow:hidden;
}
.apodc__thumb{
  width:72px;
  height:72px;
  border-radius:14px;
  flex:none;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
  border:1px solid color-mix(in srgb, var(--hair) 80%, rgba(255,255,255,.1));
  display:block;
  position:relative;
  transition:transform .24s var(--ease);
}
@media (hover:hover){
  .planeta .pcard--apod:hover .apodc__thumb{
    transform:scale(1.05);
  }
}
.apodc__play{
  position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(0,0,0,.45); border-radius:14px; color:#fff;
}
.apodc__info{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:3px;
  flex:1;
  min-width:0;
}
.apodc__k{
  font-size:10px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--ink-3);
  line-height:1;
  margin-bottom:2px;
}
.apodc__t{
  font-size:13px;
  font-weight:650;
  letter-spacing:-.015em;
  line-height:1.24;
  color:var(--ink);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  transition:color .18s;
}
@media (hover:hover){
  .planeta .pcard--apod:hover .apodc__t{
    color:var(--accent);
  }
}
.apodc__d{
  font-size:10.5px;
  color:var(--ink-3);
  font-weight:500;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-top:2px;
}
.pcard--sky .skynext{ border-top:0; padding:12px 14px; height:100%; box-sizing:border-box; display:flex; flex-direction:column; justify-content:space-between; }
#apodMedia + .skynext, .apodc .skynext{ border-top:.5px solid var(--hair); }
.skynext__k{ font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-bottom:-4px; }
.skynext__body{ display:flex; flex-direction:column; gap:6px; }
.skynext__h{ display:flex; flex-direction:column; gap:2px; margin:0; }
.skynext__ttl{ font-size:13.5px; font-weight:640; letter-spacing:-.01em; line-height:1.2; }
.skynext__w{ font-size:11px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.skynext__m{ font-size:11px; color:var(--ink-3); margin:0; }

/* ---------------- Tendencias ---------------- */
.trcards{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:14px; }
.trcard{ display:flex; flex-direction:column; gap:5px; padding:15px 15px 16px; color:inherit;
  border-radius:15px; background:var(--card); border:1px solid var(--hair); box-shadow:var(--shadow); }
.trcard__n{ font-family:var(--font-display); font-size:13px; font-weight:700; color:var(--accent); letter-spacing:.02em; }
.trcard__t{ font-size:15px; font-weight:640; letter-spacing:-.015em; line-height:1.22; text-transform:capitalize;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.trcard__m{ font-size:11px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.trcard__c{ font-size:11.5px; color:var(--ink-2); line-height:1.35; margin-top:2px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
@media (hover:hover){ a.trcard:hover{ border-color:var(--accent); } }

.trend{ display:flex; flex-direction:column; }
/* lista visible arriba del panel de tendencias: un pelín más de aire */
.trend--top{ margin-top:10px; }
.trend--top .trr__t{ font-weight:560; font-size:14px; }
.trr{ display:grid; grid-template-columns:22px 1fr auto; gap:12px; align-items:center; padding:11px 0; color:inherit; }
.trr + .trr{ border-top:.5px solid var(--hair); }
.trr__n{ font-size:12px; font-weight:600; color:var(--ink-3); font-variant-numeric:tabular-nums; text-align:center; }
.trr__t{ font-size:13.5px; font-weight:530; letter-spacing:-.01em; text-transform:capitalize; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.trr__m{ font-size:10.5px; color:var(--ink-3); white-space:nowrap; font-variant-numeric:tabular-nums; }
a.trr:hover .trr__t{ color:var(--accent); }

/* ---------------- Tráfico ---------------- */
.trafcard{ padding:0; }
.trafmap{ display:block; width:100%; height:440px; border:0; }
.trafcard .src{ margin:0; padding:12px 18px; display:flex; align-items:center; gap:8px; }

/* ---------------- Finanzas & Mercados ---------------- */
.sec__head--split{
  display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap;
}
.sec__tag{
  display:inline-flex; align-items:center; gap:7px;
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent); margin-bottom:6px;
}
.live-dot{
  width:8px; height:8px; border-radius:50%; background:#009938;
  box-shadow:0 0 0 0 rgba(0, 153, 56, 0.7);
  animation:liveDotPulse 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
}
@keyframes liveDotPulse{
  0%{ box-shadow:0 0 0 0 rgba(0, 153, 56, 0.7); }
  70%{ box-shadow:0 0 0 7px rgba(0, 153, 56, 0); }
  100%{ box-shadow:0 0 0 0 rgba(0, 153, 56, 0); }
}
.fin-pulse-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px; border-radius:var(--r-pill);
  font-size:12px; font-weight:600; color:var(--ink-2);
  background:var(--card); border:1px solid var(--hair);
  box-shadow:0 2px 8px -2px rgba(0, 0, 0, 0.05);
}
.fin-pulse-chip i{ width:15px; height:15px; color:var(--accent); }

.fin__cols{ align-items:stretch; }
.fin-card{
  background:var(--card); border:1px solid var(--hair); border-radius:24px;
  padding:24px; box-shadow:0 10px 30px -15px rgba(0, 0, 0, 0.06);
  display:flex; flex-direction:column; justify-content:space-between; gap:20px;
}
:root[data-theme="dark"] .fin-card{
  box-shadow:0 12px 34px -16px rgba(0, 0, 0, 0.5);
}

.fin-card__header{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:8px; padding-bottom:12px; border-bottom:1px solid var(--hair);
}
.fin-card__title{
  font-size:12px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink);
  display:flex; align-items:center; gap:8px;
}
.fin-card__sub{ font-size:11.5px; color:var(--ink-3); font-weight:500; }

/* Rejilla moderna de divisas con banderas */
.fxgrid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:2px;
}
.fxtile{
  background:var(--surface); border:1px solid var(--hair); border-radius:16px;
  padding:14px 12px; text-align:left; position:relative; overflow:hidden;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  cursor:default;
}
.fxtile:hover{
  transform:translateY(-2px);
  border-color:rgba(0, 153, 56, 0.35);
  box-shadow:0 8px 22px -8px rgba(0, 153, 56, 0.16);
}
.fxtile__top{
  display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:8px;
}
.fxtile__badge{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:11.5px; font-weight:700; color:var(--ink);
}
.fxtile__flag{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:15px; border-radius:3px; overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,0.12); flex-shrink:0; vertical-align:middle; line-height:1;
}
.fxtile__flag .flag-svg{ width:100%; height:100%; object-fit:cover; display:block; }
.fxtile__flag-txt{ font-size:14px; line-height:1; }
.fxtile__n{
  font-size:10.5px; color:var(--ink-3); font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.fxtile__v{
  font-size:19px; font-weight:750; letter-spacing:-.025em; color:var(--ink);
  font-variant-numeric:tabular-nums; line-height:1.1; display:flex; align-items:baseline; gap:3px;
}
.fxtile__u{ font-size:10.5px; font-weight:600; color:var(--ink-3); }

/* Convertidor de Divisas Interactivo */
.conv{
  background:var(--surface); border:1px solid var(--hair); border-radius:18px;
  padding:18px; margin-top:4px;
}
.conv__head{
  display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;
}
.conv__t{
  font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-2);
}
.conv__presets{
  display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px;
}
.conv__preset-btn{
  border:1px solid var(--hair); background:var(--card); color:var(--ink-2);
  border-radius:20px; padding:4px 10px; font-size:11px; font-weight:600;
  cursor:pointer; transition:all .15s ease; font-variant-numeric:tabular-nums;
}
.conv__preset-btn:hover, .conv__preset-btn.is-active{
  background:var(--accent); color:#ffffff; border-color:var(--accent);
}
.conv__inputs{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.conv__field{ position:relative; flex:1 1 110px; min-width:100px; }
.conv__in{
  width:100%; font:inherit; font-size:14.5px; font-weight:650; color:var(--ink);
  background:var(--card); border:1px solid var(--hair); border-radius:12px;
  padding:9px 12px; outline:none; transition:border-color .15s, box-shadow .15s;
  font-variant-numeric:tabular-nums;
}
.conv__in:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(0, 153, 56, 0.12);
}
.conv__sel{
  width:100%; font:inherit; font-size:13px; font-weight:600; color:var(--ink);
  background:var(--card); border:1px solid var(--hair); border-radius:12px;
  padding:9px 10px; outline:none; cursor:pointer; transition:border-color .15s;
}
.conv__sel:focus{ border-color:var(--accent); }
.conv__swap{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%; border:1px solid var(--hair);
  background:var(--card); color:var(--ink-2); cursor:pointer; flex:none;
  transition:all .2s ease;
}
.conv__swap:hover{
  transform:rotate(180deg); color:var(--accent); border-color:var(--accent);
  box-shadow:0 4px 12px -2px rgba(0, 153, 56, 0.2);
}
.conv__res-box{
  margin-top:14px; padding:12px 16px; border-radius:14px;
  background:linear-gradient(135deg, rgba(0, 153, 56, 0.08) 0%, rgba(0, 153, 56, 0.02) 100%);
  border:1px solid rgba(0, 153, 56, 0.25);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;
}
.conv__res-val{
  font-size:22px; font-weight:750; letter-spacing:-.03em; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.conv__res-rate{ font-size:11.5px; color:var(--ink-3); font-weight:500; }

/* Tarjetas Cripto con Branding Oficial */
.crcards{ display:flex; flex-direction:column; gap:10px; margin-top:2px; }
.crcard{
  display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center;
  padding:14px 16px; border-radius:18px; background:var(--surface); border:1px solid var(--hair);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  cursor:default;
}
.crcard:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px -10px rgba(0,0,0,0.12);
}
.crcard--btc:hover{
  border-color:rgba(247, 147, 26, 0.45);
  box-shadow:0 8px 24px -8px rgba(247, 147, 26, 0.22);
}
.crcard--eth:hover{
  border-color:rgba(98, 126, 234, 0.45);
  box-shadow:0 8px 24px -8px rgba(98, 126, 234, 0.22);
}
.crcard--sol:hover{
  border-color:rgba(20, 241, 149, 0.45);
  box-shadow:0 8px 24px -8px rgba(20, 241, 149, 0.22);
}

.coin-svg{ width:38px; height:38px; border-radius:50%; flex:none; display:block; }
.crcard__info{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.crcard__name-row{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.crcard__name{ font-size:15px; font-weight:700; letter-spacing:-.015em; color:var(--ink); }
.crcard__sym{
  font-family:var(--mono); font-size:10.5px; font-weight:600; color:var(--ink-3);
  padding:1px 6px; border-radius:6px; background:var(--surface-2);
}
.crcard__prices{ text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.crcard__p{
  font-size:17px; font-weight:750; letter-spacing:-.025em; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.crcard__unit{ font-size:11px; font-weight:600; color:var(--ink-3); margin-left:3px; }
.crcard__x{ font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; font-weight:500; }
.crcard__ch{
  display:inline-flex; align-items:center; gap:3px;
  padding:3px 8px; border-radius:8px; font-size:11px; font-weight:700;
  font-variant-numeric:tabular-nums;
}
.crcard__ch.up{ color:#009938; background:rgba(0, 153, 56, 0.12); }
.crcard__ch.down{ color:#e02424; background:rgba(224, 36, 36, 0.12); }

/* Pestañas de Herramientas Cripto */
.fin-tabs{
  display:flex; background:var(--surface-2); border-radius:12px;
  padding:3px; gap:4px; margin-top:6px;
}
.fin-tab{
  flex:1; border:none; background:transparent; padding:7px 10px;
  border-radius:9px; font-size:12px; font-weight:600; color:var(--ink-2);
  cursor:pointer; transition:all .15s ease; text-align:center;
}
.fin-tab.is-active{
  background:var(--card); color:var(--ink); box-shadow:0 2px 6px rgba(0,0,0,0.06);
}
.fin-tab-panel{ margin-top:12px; }
.fin-tab-panel.is-hidden{ display:none; }

.convgrid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-top:10px;
}
.convgrid__c{
  background:var(--card); border:1px solid var(--hair); border-radius:14px;
  padding:12px 10px; text-align:center; transition:transform .15s ease;
}
.convgrid__c:hover{ transform:translateY(-1px); }
.convgrid__c .coin-svg{ width:22px; height:22px; margin:0 auto 4px; }
.convgrid__c span{ display:block; font-size:11px; font-weight:600; color:var(--ink-3); }
.convgrid__c b{
  display:block; font-size:13px; font-weight:750; color:var(--ink);
  font-variant-numeric:tabular-nums; margin-top:3px; word-break:break-all;
}

/* ---------------- Estados ---------------- */
.hint{ background:var(--surface); border-radius:var(--r); padding:20px; font-size:14px; color:var(--ink-2); }
.hint b{ display:block; color:var(--ink); font-size:15px; font-weight:600; margin-bottom:5px; }
.src{ font-size:11px; color:var(--ink-3); margin-top:14px; }
.skel{ color:var(--ink-3); font-size:14px; }

/* ---------------- Página de acceso (/entrar) ----------------
   Pantalla mínima y aislada: sin secciones detrás, entrar no puede "saltar". */
.enter{
  position:relative;
  min-height:100svh; min-height:100dvh;
  display:grid; place-items:center;          /* la tarjeta queda centrada de verdad */
  padding:70px 20px 40px;
}
.enter__home{
  position:absolute; top:18px; left:50%; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; color:var(--ink-3); transition:color .2s; white-space:nowrap;
}
.enter__home:hover{ color:var(--ink); }
.enter__home .mark{ width:16px; height:16px; }
.enter__card{
  width:min(380px,100%); text-align:center;
  background:var(--paper); border:.5px solid var(--hair);
  border-radius:var(--r-lg); box-shadow:var(--shadow); padding:34px 28px 26px;
}
.enter__logo{ margin:0 auto; color:var(--ink); }
.enter__t{ font-size:23px; font-weight:640; letter-spacing:-.026em; margin-top:14px; }
.enter__p{ font-size:14px; color:var(--ink-2); margin-top:5px; }
.enter__f{ display:flex; flex-direction:column; gap:10px; margin-top:22px; }
.enter__i{
  width:100%; padding:14px 16px; border-radius:13px; border:.5px solid var(--hair);
  background:var(--surface); color:var(--ink); font-size:17px; text-align:center;
  letter-spacing:.1em; outline:none; transition:border-color .2s;
}
.enter__i::placeholder{ color:var(--ink-3); letter-spacing:normal; }
.enter__i:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.enter__m{ min-height:18px; margin-top:12px; font-size:12px; color:var(--ink-2); }
.enter__m.bad{ color:var(--bad); }
.enter__m.ok{ color:var(--good); }

/* ---------------- Puerta ----------------
   Cerrada por defecto; se abre de DOS formas independientes:
     · `.gate:target`  — el ancla #gate en la URL, CSS puro, sin JavaScript.
     · `.gate.is-open` — la añade landing.js para el flujo sin recargar.
   Que haya una vía sin JS es a propósito: si landing.js llega viejo de la
   caché o falla, entrar al panel sigue funcionando. */
.gate{
  position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:20px;
  opacity:0; visibility:hidden; pointer-events:none;
  /* la visibilidad cambia de golpe (0s): al abrir, al instante; al cerrar,
     tras el fundido. NUNCA se interpola — así no puede quedarse "a medias"
     como le pasaba a la animación anterior. */
  transition:opacity .2s var(--ease), visibility 0s linear .2s;
}
.gate:target,
.gate.is-open{
  opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity .2s var(--ease), visibility 0s;
}

.gate__v{ position:absolute; inset:0; background:var(--veil);
  -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px); }
.gate__b{
  position:relative; width:min(380px,100%); text-align:center;
  background:var(--paper); border:.5px solid var(--hair);
  border-radius:var(--r-lg); box-shadow:var(--shadow); padding:34px 28px 26px;
}
/* La animación de entrada SOLO se declara con la puerta abierta, y el estado
   en reposo del cuadro ya es visible por sí mismo: si la animación no corre
   (iOS Safari la dejaba clavada en opacidad 0), el modal aparece de golpe
   pero se ve. */
.gate:target .gate__b,
.gate.is-open .gate__b{ animation:pop .4s var(--ease); }
@keyframes pop{ from{ opacity:0; transform:translateY(16px) scale(.97) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){
  .gate .gate__b{ animation:none !important; }
}
.gate__x{ position:absolute; top:12px; right:14px; }
.gate__t{ font-size:23px; font-weight:640; letter-spacing:-.026em; margin-top:14px; }
.gate__p{ font-size:14px; color:var(--ink-2); margin-top:5px; }
.gate__f{ display:flex; flex-direction:column; gap:10px; margin-top:22px; }
.gate__i{
  width:100%; padding:14px 16px; border-radius:13px; border:.5px solid var(--hair);
  background:var(--surface); color:var(--ink); font-size:17px; text-align:center;
  letter-spacing:.1em; outline:none; transition:border-color .2s;
}
.gate__i::placeholder{ color:var(--ink-3); letter-spacing:normal; }
.gate__i:focus{ border-color:var(--ink); }
.gate__m{ min-height:18px; margin-top:12px; font-size:12px; color:var(--ink-2); }
.gate__m.bad{ color:var(--bad); }
.gate__m.ok{ color:var(--good); }

/* ---------------- Pie ---------------- */
.foot{ margin-top:72px; border-top:.5px solid var(--hair); padding:26px 0 40px;
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-size:12px; color:var(--ink-3); }

/* ---------------- Móvil ---------------- */
@media (max-width:860px){
  .nav__links{ display:none; }
  .nav__tag{ display:none; }
  .nav__wordmark{ width:88px; height:20px; }
  .menubtn{ display:grid; }
  .wrap{ padding:0 18px; }
  .rail{ margin:0; }
  .cols--2, .cols--3, .cols--21, .cols--12{ grid-template-columns:1fr; }
  .sec{ padding-top:48px; padding-bottom:6px; }
  header.hero.sec-box{
    margin-top: calc(var(--nav-h) * -1) !important;
    padding-top: calc(var(--nav-h) + 85px) !important;
    padding-bottom: 28px !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: clamp(24px, 4vw, 36px) !important;
    border-bottom-right-radius: clamp(24px, 4vw, 36px) !important;
    border: 1px solid var(--hair);
    border-top: none !important;
    min-height: auto;
    box-shadow:
      0 10px 24px -8px rgba(0, 0, 0, 0.06),
      0 2px 6px rgba(0, 0, 0, 0.03) !important;
  }
  :root[data-theme="dark"] header.hero.sec-box{
    border-color: var(--hair);
    box-shadow: none !important;
  }
  .hero__col{ padding-top:0; }
  .hero__orb{ width:320px; height:320px; top:var(--nav-h); left:50%; transform:translate(-50%, -58%); opacity:0.38; }
  :root[data-theme="dark"] .hero__orb{ opacity:0.46; }
  .hero__row{ gap:22px; }
  .card{ padding:20px; border-radius:22px; }
  .by{ border-radius:14px; padding:4px 10px 4px 4px; gap:7px; }
  .by__pic{ width:24px; height:24px; }
  .by__eyebrow{ font-size:7.5px; letter-spacing:.08em; }
  .by__name{ font-size:10px; }
  .by__ig{ font-size:9px; }
  .aistack__t{ scroll-snap-align: center; margin-left:0 !important; transform:none !important; }
  .aistack{ flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; gap:12px; margin:0 0 24px; padding:0; }
  .aistack__t.is-on{ transform:scale(1.12) !important; }
  .vidgrid{ margin:0; padding:6px 0 16px; }
  .srow{ grid-template-columns:18px 1fr 44px; column-gap:10px; }
  .srow__bar{ display:none; }
  .lead__img{ height:170px; }
  .lg{ width:264px; }
  .poster{ width:132px; } .poster__i{ width:132px; height:198px; }
  .ncard{ width:212px; } .ncard__i{ height:118px; }
  .cocard{ width:min(86vw, 360px); padding:18px; }
  .cocard__preview{ height:138px; border-radius:14px; }
  .lcard{ width:176px; }
  .trcards{ grid-template-columns:1fr; }
  .sheet a{ font-size:24px; padding:13px 0; gap:14px; }
  .sheet a i{ width:22px; height:22px; }
  .trafmap{ height:320px; }
  .fxgrid{ grid-template-columns:repeat(2,1fr); }
  .mgrid{ grid-template-columns:1fr 1fr; }
  .foot{ flex-direction:column; gap:4px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .rise{ opacity:1; transform:none; }
}