/* ===========================================================================
   Bandas de sección — 29-ago-2026
   El problema: toda la portada iba sobre el mismo fondo y no se sabía dónde
   empezaba ni de qué iba cada parte. Aquí se le da a cada sección un fondo,
   un número y una etiqueta, para que el ojo sepa por dónde va.
   Se carga después de styles.css.
   =========================================================================== */

/* ------------------------------------------------------------ las bandas */
.banda{position:relative; padding-block:clamp(52px,7vw,86px)}

/* Alternancia de fondo. Tres tonos de la misma paleta, nada estridente. */
.banda--base{background:var(--ground,#04141a)}
.banda--alt{background:var(--ground-2,#071e24)}
.banda--panel{
  background:linear-gradient(180deg,
    var(--panel,#0a2429) 0%,
    var(--ground-2,#071e24) 100%);
}
.banda--acento{
  background:
    radial-gradient(900px 420px at 78% 0%, rgba(245,179,1,.10), transparent 62%),
    radial-gradient(700px 380px at 6% 100%, rgba(87,182,232,.09), transparent 60%),
    var(--ground-2,#071e24);
}

/* Un filo de luz arriba: separa dos bandas del mismo tono sin línea dura. */
.banda + .banda::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg,
    transparent, var(--line-2,#20525c) 22%, var(--line-2,#20525c) 78%, transparent);
  opacity:.6;
}

/* --------------------------------------------------- cabecera de sección */
.banda-cab{
  display:flex; align-items:flex-start; gap:clamp(14px,2.4vw,26px);
  margin-bottom:clamp(26px,3.6vw,42px);
}
.banda-num{
  font-family:var(--mono,"IBM Plex Mono",monospace);
  font-size:.82rem; font-weight:600; letter-spacing:.06em;
  color:var(--signal,#f5b301); flex-shrink:0;
  padding-top:.42em; position:relative;
}
.banda-num::after{
  content:""; position:absolute; left:50%; top:2.6em; bottom:-.4em;
  width:1px; background:linear-gradient(180deg,var(--signal,#f5b301),transparent);
  opacity:.35;
}
.banda-cab-texto{min-width:0; flex:1}
.banda-etiqueta{
  display:inline-block; font-family:var(--body,"Sora",sans-serif);
  font-size:.68rem; font-weight:700; letter-spacing:.19em; text-transform:uppercase;
  color:var(--ink-3,#7c9a9f); margin:0 0 .55rem;
}
.banda-cab h2{
  margin:0 0 .5rem; line-height:1.08;
  font-size:clamp(1.65rem,1.1rem + 2.1vw,2.55rem);
}
.banda-cab .banda-lead{
  margin:0; color:var(--ink-2,#9ab5b7); max-width:62ch;
  font-size:clamp(.96rem,.92rem + .2vw,1.06rem); line-height:1.62;
}

/* variante centrada, para las bandas que lo pidan */
.banda--centrada .banda-cab{flex-direction:column; align-items:center; text-align:center}
.banda--centrada .banda-num::after{display:none}
.banda--centrada .banda-lead{margin-inline:auto}

/* ---------------------------------------- que las secciones ya existentes
   hereden el ritmo sin tener que reescribir su marcado */
.banda > .container,
.banda.container{padding-block:0}
.banda .benefits,
.banda .process,
.banda .aura-entry{padding-block:0; background:transparent}

/* ------------------------------------------------------------- el índice */
/* 18-sept (dueño): la barra se queda pegada bajo la cabecera al seguir los pasos 01→07 */
.mapa{
  position:sticky; top:var(--header-h,64px); z-index:39;
  background:color-mix(in srgb, var(--ground,#04141a) 90%, transparent);
  backdrop-filter:saturate(170%) blur(12px);
  -webkit-backdrop-filter:saturate(170%) blur(12px);
  border-bottom:1px solid var(--line,#173f47);
  overflow-x:auto; scrollbar-width:none;
}
.mapa::-webkit-scrollbar{display:none}
.mapa ol{
  display:flex; gap:2px; list-style:none; margin:0 auto; padding:0;
  max-width:1180px; padding-inline:clamp(16px,4vw,28px);
}
.mapa a{
  display:flex; align-items:center; gap:7px; padding:11px 13px;
  font-size:.78rem; font-weight:600; color:var(--ink-2,#9ab5b7);
  text-decoration:none; white-space:nowrap; border-bottom:2px solid transparent;
  transition:color .16s, border-color .16s;
}
.mapa a:hover{color:var(--ink,#eaf5f4)}
.mapa a b{
  font-family:var(--mono,"IBM Plex Mono",monospace); font-weight:600;
  font-size:.7rem; color:var(--ink-3,#7c9a9f);
}
.mapa li.activo a{color:var(--signal,#f5b301); border-bottom-color:var(--signal,#f5b301)}
.mapa li.activo a b{color:var(--signal,#f5b301)}
/* 12-sept-2026 (dueño): en móvil se veían solo los números «01 02 03…» sin saber qué
   eran. Ahora los nombres se quedan y la barra se desplaza de lado, igual que la banda de
   noticias, dejando asomar el siguiente como pista. El activo se coloca a la vista. */
@media (max-width:700px){
  .mapa{scrollbar-width:none; scroll-behavior:smooth; -webkit-overflow-scrolling:touch}
  .mapa ol{padding-inline:12px; gap:0}
  .mapa a{padding:10px 10px; font-size:.72rem; gap:5px}
  .mapa a b{font-size:.7rem}
  .mapa a span{display:inline}
}

/* ------------------------------------------------------------- responsive */
@media (max-width:640px){
  .banda-cab{flex-direction:column; gap:8px}
  .banda-num::after{display:none}
}
@media print{.mapa{display:none}}

/* =====================  piezas de la portada nueva  ===================== */

/* La banda ámbar: fondo de acento con texto oscuro. Se usa dos veces y por eso
   hay que tener cuidado con el contraste: sobre #f5b301 el texto va en #04141a,
   nunca en blanco. */
.banda--signal{background:var(--signal,#f5b301); color:var(--ground,#04141a)}
.banda--signal h2,
.banda--signal h3,
.banda--signal .banda-cab h2{color:var(--ground,#04141a)}
.banda--signal .banda-etiqueta{color:rgba(4,20,26,.62)}
.banda--signal .banda-num{color:rgba(4,20,26,.72)}
.banda--signal .banda-num::after{background:linear-gradient(180deg,rgba(4,20,26,.5),transparent)}
.banda--signal .banda-lead,
.banda--signal p{color:rgba(4,20,26,.82)}
.banda--signal a{color:var(--ground,#04141a)}
.banda--panel2{background:var(--panel-2,#0e3038)}

/* -------------------------------------------------- 01 · la primera pantalla */
.portada-hero{
  display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  column-gap:clamp(24px,4vw,54px); row-gap:10px; align-items:start;
}
/* 17-sept (dueño): que se lea todo nada más entrar; la cabecera arranca pegada a las noticias */
#que-es.banda{padding-top:0}
@media(max-width:900px){.portada-hero{grid-template-columns:1fr}}
/* 17-sept (dueño): el nombre descriptivo a lo ancho de toda la pantalla, en una banda de azules
   claros que no se confunde con el amarillo de la marca. Entra con un desenfoque que se aclara y
   una luz que recorre las letras una sola vez, y debajo se dibuja una línea de izquierda a
   derecha, como las líneas del logo en la pantalla de entrada. Con «menos movimiento», quieto. */
.titulo-sitio-banda{
  position:relative; overflow:hidden;
  background:
    linear-gradient(90deg,
      rgba(186,230,253,.40) 0%, rgba(125,211,252,.24) 18%, rgba(56,189,248,.10) 36%,
      rgba(7,30,36,0) 50%,
      rgba(56,189,248,.10) 64%, rgba(125,211,252,.24) 82%, rgba(186,230,253,.40) 100%);
  border-top:1px solid rgba(186,230,253,.42);
  border-bottom:1px solid rgba(186,230,253,.28);
  padding:18px 0 16px; margin:0 0 22px;
}
.titulo-sitio-banda::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:0; height:2px; width:0;
  background:linear-gradient(90deg, transparent, #bae6fd 25%, #7dd3fc 50%, #bae6fd 75%, transparent);
  animation:titulo-linea 1.1s cubic-bezier(.2,.7,.2,1) .55s forwards;
}
.titulo-sitio-banda .container{container-type:inline-size}
.titulo-sitio-banda .portada-titulo-sitio{
  margin:0; font-family:var(--display); font-weight:400; letter-spacing:.02em;
  white-space:nowrap; hyphens:manual; -webkit-hyphens:manual; text-align:center; text-wrap:nowrap;
  font-size:min(3.4rem, 4.1vw);        /* navegadores sin unidades de contenedor */
  font-size:min(3.4rem, 4.35cqw);      /* el titular mide unos 20 em: cabe siempre con margen */
  line-height:1.04;
  background:linear-gradient(90deg, #f4fbff 0%, #bfe9ff 30%, #ffffff 50%, #a6dcf7 72%, #eaf7ff 100%);
  background-size:220% 100%; background-position:100% 0;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 10px rgba(87,182,232,.22));
  animation:titulo-entrada .8s cubic-bezier(.2,.7,.2,1) both, titulo-luz 2.4s ease-out .45s 1 forwards;
}
@keyframes titulo-entrada{from{opacity:0; transform:translateY(8px); filter:blur(7px)} to{opacity:1; transform:none; filter:blur(0) drop-shadow(0 2px 10px rgba(87,182,232,.22))}}
@keyframes titulo-luz{from{background-position:100% 0} to{background-position:0% 0}}
@keyframes titulo-linea{from{width:0} to{width:100%}}
@media(prefers-reduced-motion:reduce){
  .titulo-sitio-banda .portada-titulo-sitio{animation:none; background-position:0 0}
  .titulo-sitio-banda::after{animation:none; width:100%}
}
.portada-hero h1{
  font-size:clamp(1.95rem,1.2rem + 3.1vw,3.35rem); line-height:1.08;
  margin:.35rem 0 1rem; max-width:19ch;
}
.portada-hero .hero-brand-name{
  display:block; font-size:clamp(1rem,.9rem + .5vw,1.24rem);
  color:var(--signal,#f5b301); letter-spacing:.02em; margin-bottom:.3rem;
}
.portada-lead{
  font-size:clamp(1rem,.95rem + .32vw,1.14rem); line-height:1.62;
  color:var(--ink-2,#9ab5b7); max-width:56ch; margin:0 0 1.5rem;
}
.portada-acciones{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.portada-microcopy{
  font-size:.82rem; color:var(--ink-3,#7c9a9f); margin:.75rem 0 0; max-width:52ch;
}

/* las tres puertas: quién eres, sin precios y sin botones */
.puertas{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px; background:var(--line,#173f47);
  border:1px solid var(--line,#173f47); border-radius:12px; overflow:hidden;
  margin-top:clamp(24px,3vw,34px);
}
@media(max-width:760px){.puertas{grid-template-columns:1fr}}
.puertas a{
  background:var(--ground,#04141a); padding:15px 16px; text-decoration:none;
  display:block; transition:background .18s;
}
.puertas a:hover{background:var(--panel,#0a2429)}
.puertas strong{
  display:block; font-family:var(--mono,"IBM Plex Mono",monospace);
  font-size:.79rem; font-weight:600; color:var(--signal,#f5b301);
  letter-spacing:.02em; margin-bottom:.4rem;
}
.puertas span{
  display:block; font-size:.83rem; color:var(--ink-2,#9ab5b7); line-height:1.5;
}

/* --------------------------------------------- 02 · cuatro puntos de partida */
.situaciones{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  gap:clamp(12px,1.8vw,20px);
}
.situacion{
  background:var(--panel,#0a2429); border:1px solid var(--line,#173f47);
  border-radius:14px; padding:20px 21px; position:relative;
}
.situacion b{
  font-family:var(--mono,"IBM Plex Mono",monospace); font-size:.74rem;
  color:var(--signal,#f5b301); display:block; margin-bottom:.65rem;
}
.situacion p{margin:0 0 .7rem; font-size:.97rem; line-height:1.5;
  color:var(--ink,#eaf5f4); font-weight:600}
.situacion p + p{
  margin:0; font-weight:400; font-size:.9rem; color:var(--ink-2,#9ab5b7);
  padding-top:.7rem; border-top:1px solid var(--line,#173f47);
}
.remate{
  margin:clamp(20px,2.6vw,30px) 0 0; font-size:1.02rem; color:var(--ink,#eaf5f4);
  font-weight:600; padding-left:14px; border-left:3px solid var(--signal,#f5b301);
}

/* ------------------------------------------------------------ 03 · la prueba */
.puente{
  max-width:62ch; color:var(--ink-2,#9ab5b7); font-size:.98rem; line-height:1.62;
  margin:0 0 clamp(22px,3vw,32px);
}
.reposo{
  background:var(--ground-2,#071e24); border:1px dashed var(--line-2,#20525c);
  border-radius:12px; padding:18px 20px; color:var(--ink-2,#9ab5b7);
  font-size:.92rem; line-height:1.6;
}
.reposo strong{color:var(--ink,#eaf5f4); display:block; margin-bottom:.35rem}
.legal-linea{
  margin:clamp(18px,2.4vw,26px) 0 0; font-size:.78rem; color:var(--ink-3,#7c9a9f);
  line-height:1.55; padding-top:14px; border-top:1px solid var(--line,#173f47);
}
.legal-linea a{color:var(--ink-2,#9ab5b7)}

/* ------------------------------------------------- 04 · cómo lo enseñamos */
.piezas{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(216px,1fr));
  gap:clamp(14px,2vw,22px); margin:clamp(24px,3vw,34px) 0 0;
}
.pieza{border-top:2px solid rgba(4,20,26,.28); padding-top:14px}
.pieza b{
  display:block; font-family:var(--mono,"IBM Plex Mono",monospace);
  font-size:.74rem; letter-spacing:.13em; color:rgba(4,20,26,.62);
  margin-bottom:.5rem;
}
.pieza span{display:block; font-size:.92rem; line-height:1.55; color:var(--ground,#04141a)}
.banda--signal .remate{
  border-left-color:rgba(4,20,26,.4); color:var(--ground,#04141a);
}

/* ----------------------------------------------------------- 05 · entrar */
.entradas{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(275px,1fr));
  gap:clamp(14px,2vw,20px);
}
.entrada{
  background:var(--ground-2,#071e24); border:1px solid var(--line,#173f47);
  border-radius:16px; padding:22px 22px 20px; display:flex; flex-direction:column;
}
.entrada--destacada{border-color:var(--signal,#f5b301)}
.entrada-modo{
  font-family:var(--mono,"IBM Plex Mono",monospace); font-size:.72rem;
  letter-spacing:.14em; color:var(--ink-3,#7c9a9f); margin:0 0 .55rem;
}
.entrada-distintivo{
  display:inline-block; font-family:var(--mono,"IBM Plex Mono",monospace);
  font-size:.63rem; letter-spacing:.13em; color:var(--signal,#f5b301);
  border:1px solid rgba(245,179,1,.42); border-radius:999px;
  padding:3px 9px; margin:0 0 .6rem;
}
.entrada h3{margin:0 0 .6rem; font-size:1.14rem; line-height:1.25}
.entrada > p{
  margin:0 0 1rem; font-size:.9rem; line-height:1.58; color:var(--ink-2,#9ab5b7);
}
.entrada-precio{
  font-family:var(--display,"Bebas Neue",sans-serif);
  font-size:1.72rem; letter-spacing:.02em; color:var(--ink,#eaf5f4);
  margin:auto 0 .9rem; line-height:1.1;
}
.entrada .btn{width:100%; justify-content:center}
.entrada-nota{
  margin:.75rem 0 0; font-size:.72rem; color:var(--ink-3,#7c9a9f); line-height:1.5;
}
.pasos-fila{
  margin-top:clamp(28px,3.6vw,40px); padding-top:clamp(22px,2.8vw,30px);
  border-top:1px solid var(--line,#173f47);
}
.pasos-fila > p{
  font-family:var(--mono,"IBM Plex Mono",monospace); font-size:.7rem;
  letter-spacing:.15em; color:var(--ink-3,#7c9a9f); margin:0 0 18px;
}
.pasos-lista{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(16px,2.4vw,28px); list-style:none; margin:0; padding:0;
}
.pasos-lista li{margin:0}
.pasos-lista b{
  font-family:var(--mono,"IBM Plex Mono",monospace); color:var(--signal,#f5b301);
  font-size:.76rem; display:block; margin-bottom:.4rem;
}
.pasos-lista strong{display:block; margin-bottom:.3rem; font-size:.97rem}
.pasos-lista span{font-size:.88rem; color:var(--ink-2,#9ab5b7); line-height:1.55}

/* ---------------------------------------------------- 06 · en desarrollo */
.dev-lineas{list-style:none; margin:0; padding:0; border-top:1px solid var(--line,#173f47)}
.dev-lineas li{
  border-bottom:1px solid var(--line,#173f47); padding:13px 0;
  font-family:var(--mono,"IBM Plex Mono",monospace); font-size:.85rem;
  color:var(--ink-2,#9ab5b7); line-height:1.55;
}
.dev-lineas b{color:var(--ink,#eaf5f4); font-weight:600}

/* ---------------------------------------------------------- 07 · cierre */
.banda--cierre{padding-block:clamp(42px,5vw,64px)}
.banda--cierre h2{
  font-size:clamp(1.6rem,1.1rem + 2vw,2.4rem); margin:0 0 .6rem;
}
.banda--cierre p{max-width:52ch; margin:0 auto 1.5rem; font-size:1.02rem}
.banda--cierre .btn{
  background:var(--ground,#04141a); color:var(--signal,#f5b301);
  border-color:var(--ground,#04141a);
}
.banda--cierre .btn:hover{background:#0a2429; color:var(--signal-hi,#ffd85e)}

/* la franja de partidos, ahora dentro de la banda 03 */
#live-strip{
  background:var(--ground-2,#071e24); border:1px solid var(--line,#173f47);
  border-radius:14px; padding:16px 18px; margin:0;
}
#live-strip[hidden]{display:none}
#live-strip .strip-head{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:12px; flex-wrap:wrap; margin-bottom:12px;
}
#live-strip .strip-scroll{overflow-x:auto}
.reposo a{
  display:inline-block; margin-top:.5rem; color:var(--signal,#f5b301);
  font-weight:600; text-decoration:none;
}
.reposo a:hover{text-decoration:underline}

/* ---- banda de últimas noticias de IA (11-sept-2026). De izquierda a derecha bajo el
   índice, con fondo más claro que el resto. Los titulares se mueven solos hacia la
   izquierda (portada.js); con el ratón encima se paran; flechas en los extremos y
   barra fina para recorrerlos a mano. La banda entera se oculta si no hay noticias. */
.noticias-banda{
  background:linear-gradient(180deg, rgba(245,179,1,.16), rgba(245,179,1,.09));
  border-top:1px solid rgba(245,179,1,.45);
  border-bottom:1px solid rgba(245,179,1,.45);
}
.noticias-banda[hidden]{display:none}
.noticias-banda-inner{
  max-width:var(--container,1180px); margin:0 auto; padding:8px 12px;
  display:grid; grid-template-columns:auto auto minmax(0,1fr) auto;
  align-items:center; gap:10px;
}
.noticias-banda-rotulo{
  margin:0; white-space:nowrap; font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--signal,#f5b301); line-height:1.2;
  padding-right:12px; border-right:1px solid rgba(245,179,1,.45);
}
.noticias-banda-rotulo span{display:block; font-size:.62rem; color:var(--ink-2,#9ab5b7)}
.noticias-banda-flecha{
  width:30px; height:30px; padding:0; border-radius:50%; cursor:pointer;
  border:1px solid rgba(245,179,1,.55); background:rgba(4,20,26,.6);
  color:var(--signal,#f5b301); font-size:20px; line-height:1;
  display:grid; place-items:center;
}
.noticias-banda-flecha:hover{background:var(--signal,#f5b301); color:#04141a}
.noticias-banda-flecha:focus-visible{outline:2px solid var(--signal,#f5b301); outline-offset:2px}
.noticias-banda-vista{
  overflow-x:auto; overflow-y:hidden; min-width:0;
  scrollbar-width:thin; scrollbar-color:rgba(245,179,1,.55) transparent;
  padding-bottom:4px;
}
.noticias-banda-vista::-webkit-scrollbar{height:5px}
.noticias-banda-vista::-webkit-scrollbar-thumb{background:rgba(245,179,1,.55); border-radius:3px}
.noticias-banda-vista:focus-visible{outline:2px solid var(--signal,#f5b301); outline-offset:-2px}
.noticias-banda-pista{
  list-style:none; margin:0; padding:0; display:flex; gap:0; width:max-content;
}
.noticias-banda-pista li{
  flex:0 0 auto; width:min(340px, 78vw); padding:0 18px;
  border-right:1px solid rgba(245,179,1,.3);
}
.noticias-banda-pista a{
  display:block; color:var(--ink,#eaf5f4); text-decoration:none;
  font-size:.88rem; line-height:1.3;
}
.noticias-banda-pista a:hover{color:var(--signal,#f5b301)}
.noticias-banda-pista .titular{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.noticias-banda-pista small{
  display:block; margin-top:2px; font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.68rem; letter-spacing:.02em; color:var(--ink-2,#9ab5b7);
}
@media(max-width:700px){
  .noticias-banda-inner{grid-template-columns:auto minmax(0,1fr) auto; gap:8px; padding:8px 8px}
  .noticias-banda-rotulo{display:none}
}

/* 18-sept: al pulsar un paso, la sección aterriza justo debajo de la cabecera y de la barra */
.banda[id], #inicio{scroll-margin-top:calc(var(--header-h,64px) + var(--mapa-h,46px) + 6px)}


/* ===== 4-oct-2026: bloque «Empieza aquí» con Gui-IA y la serie de 5 vídeos ===== */
.banda--guiia{background:linear-gradient(180deg,#0a2429 0%,#04141a 100%);border-bottom:1px solid rgba(245,179,1,.35);padding:22px 0 26px}
.guiia-bloque{display:grid;grid-template-columns:240px 1fr;gap:28px;align-items:center}
.guiia-avatar{position:relative;width:240px;height:240px;justify-self:center;border:0;padding:0;background:transparent;cursor:pointer;border-radius:50%}
.guiia-avatar img{width:240px;height:240px;border-radius:50%;object-fit:cover;border:4px solid #f5b301;box-shadow:0 0 0 10px rgba(245,179,1,.12),0 18px 40px rgba(0,0,0,.45);display:block}
.guiia-play{position:absolute;left:50%;top:76%;width:110px;height:110px;transform:translate(-50%,-50%);filter:drop-shadow(0 4px 14px rgba(0,0,0,.5));transition:transform .18s ease,opacity .18s ease;opacity:.95}
.guiia-avatar:hover .guiia-play{transform:translate(-50%,-50%) scale(1.08);opacity:1}
.guiia-avatar:hover img{filter:brightness(1.06)}
.guiia-texto h2{font-family:"Bebas Neue",sans-serif;font-size:clamp(2rem,4.2vw,3.2rem);line-height:1;margin:6px 0 10px;color:#eaf5f4}
.guiia-lead{margin:0 0 16px;color:#b9c9c8;font-size:1.15rem;line-height:1.4;max-width:60ch}
.guiia-ver small{font-weight:500;opacity:.8;margin-left:8px}
.guiia-lista{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0}
.guiia-lista button{background:transparent;border:1px solid rgba(234,245,244,.25);color:#eaf5f4;border-radius:999px;padding:7px 12px 7px 8px;font:inherit;font-size:.82rem;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.guiia-lista button b{display:inline-flex;width:22px;height:22px;border-radius:50%;background:#f5b301;color:#04141a;align-items:center;justify-content:center;font-size:.75rem}
.guiia-lista button:hover{border-color:#f5b301}
@media(max-width:900px){.guiia-bloque{grid-template-columns:1fr;gap:14px;text-align:center}.guiia-avatar{width:190px;height:190px}.guiia-avatar img{width:190px;height:190px}.guiia-play{width:90px;height:90px}.guiia-lead{margin-left:auto;margin-right:auto}.guiia-lista{justify-content:center}.guiia-ver{width:100%}}

/* reproductor de la serie de Gui-IA */
.guiia-player{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100dvh;margin:0}
.guiia-player::backdrop{background:rgba(2,10,13,.92)}
.guiia-player-box{position:relative;height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;justify-items:center;align-items:center;gap:10px;padding:12px 12px 16px;box-sizing:border-box;color:#eaf5f4}
.guiia-player-close{position:absolute;right:10px;top:6px;z-index:2;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(4,20,26,.7);color:#fff;font-size:28px;line-height:1;cursor:pointer}
.guiia-player-title{margin:4px 48px 0;font-family:"Bebas Neue",sans-serif;font-size:1.3rem;letter-spacing:.04em;text-align:center}
.guiia-player-title [data-guiia-num]{color:#f5b301;margin-right:6px}
#guiia-video{height:100%;min-height:0;max-height:calc(100dvh - 150px);width:auto;max-width:100%;aspect-ratio:9/16;background:#04141a;border-radius:18px;border:1px solid rgba(245,179,1,.35);object-fit:contain}
.guiia-player-next{width:min(100%,520px);background:#0a2429;border:1px solid #f5b301;border-radius:14px;padding:12px 14px;text-align:center}
.guiia-player-next p{margin:0 0 8px;font-size:.95rem}
.guiia-player-next-actions{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap}
.guiia-player-next-actions .link-ghost{background:transparent;border:0;color:#b9c9c8;text-decoration:underline;cursor:pointer;font:inherit}
.guiia-player-list{list-style:none;display:flex;gap:6px;margin:0;padding:0;flex-wrap:wrap;justify-content:center}
.guiia-player-list button{background:transparent;border:1px solid rgba(234,245,244,.25);color:#eaf5f4;border-radius:999px;padding:5px 10px;font:inherit;font-size:.78rem;cursor:pointer}
.guiia-player-list button.activo{border-color:#f5b301;color:#f5b301}
@media(min-width:901px){.guiia-player-box{grid-template-rows:auto 1fr auto auto}#guiia-video{max-height:calc(100dvh - 170px)}}