/* Eventos SpineNet · versión interactiva de la portada.
   Colores de la empresa: SpineNet (verde azulado #1a8788 y su profundo #00404c) y los
   cuatro cuadros de SpineUp (amarillo, azul, naranja y verde). Tema oscuro y claro. */
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url(../fonts/archivo.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 100 700; font-display: swap;
  src: url(../fonts/ibm-plex-sans.woff2) format('woff2');
}
@property --giro { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

:root {
  --sn: #1a8788;
  --sn-luz: #2fb4b4;
  --sn-profundo: #00404c;
  --su-amarillo: #f2c500;
  --su-azul: #0078c0;
  --su-naranja: #f87800;
  --su-verde: #58b000;
  --rojo: #e0243a;
  --wa: #128c4a;
  --ancho: 1180px;
  --lado: 20px;
  --radio: 20px;
  --alto-fijo: 0px;   /* lo que ocupa el botón fijo «Inscribirme» del teléfono (sin la zona segura) */
}
@media (max-width: 899px) { :root.con-fijo { --alto-fijo: 64px; } }
:root, :root[data-tema='oscuro'] {
  color-scheme: dark;
  --fondo: #04161b;
  --fondo-2: #072129;
  --superficie: rgba(255, 255, 255, .045);
  --superficie-2: rgba(255, 255, 255, .08);
  --vidrio: rgba(5, 27, 34, .66);
  --borde: rgba(150, 214, 214, .16);
  --texto: #e5f2f2;
  --texto-2: #9fc0c3;
  --tenue: #6d9397;
  --titulo: #ffffff;
  --acento: #2fb4b4;
  --sombra: 0 24px 70px rgba(0, 0, 0, .45);
  --escenario: radial-gradient(60% 55% at 72% 42%, rgba(26, 135, 136, .38), transparent 70%),
               radial-gradient(40% 40% at 20% 85%, rgba(0, 120, 192, .16), transparent 70%),
               linear-gradient(180deg, #03121a 0%, #04161b 60%, #04161b 100%);
  --estrellas: rgba(210, 240, 240, .5);
}
:root[data-tema='claro'] {
  color-scheme: light;
  --fondo: #f4f8f8;
  --fondo-2: #e7f1f1;
  --superficie: #ffffff;
  --superficie-2: #f0f6f6;
  --vidrio: rgba(255, 255, 255, .8);
  --borde: #d0e2e3;
  --texto: #0d2f37;
  --texto-2: #47676d;
  --tenue: #527075;
  --titulo: #00404c;
  --acento: #167677;
  --sombra: 0 22px 55px rgba(0, 64, 76, .13);
  --escenario: radial-gradient(60% 55% at 72% 42%, rgba(47, 180, 180, .22), transparent 70%),
               radial-gradient(40% 40% at 20% 85%, rgba(0, 120, 192, .08), transparent 70%),
               linear-gradient(180deg, #eef6f6 0%, #f4f8f8 100%);
  --estrellas: rgba(0, 64, 76, .14);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* Las pestañas del programa y la cuenta regresiva se esconden con hidden; sin esto, su display: grid/flex le ganaba. */
[hidden] { display: none !important; }
html {
  scroll-behavior: smooth; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent;
  scroll-padding-top: calc(70px + env(safe-area-inset-top, 0px));
  scroll-padding-bottom: calc(var(--alto-fijo) + 16px + env(safe-area-inset-bottom, 0px));
}
body {
  font: 400 16px/1.6 'IBM Plex Sans', system-ui, sans-serif;
  color: var(--texto); background: var(--fondo);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
  transition: background .4s, color .4s;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--acento); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.envoltura { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 max(var(--lado), env(safe-area-inset-right)) 0 max(var(--lado), env(safe-area-inset-left)); }
:focus-visible { outline: 3px solid var(--sn-luz); outline-offset: 3px; border-radius: 6px; }
:root[data-tema='claro'] :focus-visible { outline-color: var(--acento); }
:root[data-tema='claro'] .pie :focus-visible { outline-color: var(--sn-luz); }
/* Secciones a las que salta el menú: reciben el foco, pero sin recuadro. */
section[tabindex='-1']:focus, article[tabindex='-1']:focus { outline: none; }
::selection { background: rgba(47, 180, 180, .32); color: var(--titulo); }
:root[data-tema='oscuro'] .solo-claro, :root[data-tema='claro'] .solo-oscuro { display: none !important; }

.titular { font-family: 'Archivo', sans-serif; font-stretch: 72%; font-weight: 800; text-transform: uppercase; line-height: .95; letter-spacing: -.005em; color: var(--titulo); }
h2.titular { font-size: 40px; font-size: clamp(38px, 6vw, 64px); margin: 10px 0 18px; }
.etiqueta { display: flex; align-items: center; gap: 10px; font: 600 12px/1.2 'Archivo', sans-serif; letter-spacing: .22em; text-transform: uppercase; color: var(--acento); }

/* Botones en píldora */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: 999px;
  font: 600 16px/1 'IBM Plex Sans', sans-serif; text-decoration: none; cursor: pointer;
  color: #fff; background: var(--sn); transition: transform .2s, box-shadow .2s, background .2s;
}
/* El brillo claro va solo en la esquina; donde está el texto el turquesa ya da 4,5:1 con el blanco. */
.boton.brillo { background: radial-gradient(40% 90% at 0% 0%, rgba(47, 180, 180, .55), transparent 60%), linear-gradient(135deg, var(--sn), #167677 45%, var(--sn-profundo)); box-shadow: 0 10px 30px rgba(26, 135, 136, .38), inset 0 1px 0 rgba(255, 255, 255, .25); }
.boton.vidrio { background: var(--superficie); color: var(--texto); box-shadow: inset 0 0 0 1.5px var(--borde); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
/* Secundario con borde (el correo de «Preguntas»): sitio.css no se carga en esta página. */
.boton.borde { background: var(--superficie); color: var(--texto); box-shadow: inset 0 0 0 1.5px var(--borde); }
.boton.chico { min-height: 44px; padding: 0 16px; font-size: 14px; background: var(--sn); }
.boton.verde { background: var(--wa); }
.boton .precio { padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, .45); opacity: .9; }
.boton[aria-disabled='true'] { opacity: .5; pointer-events: none; }
.ico { flex: none; }

/* Barra de arriba */
.barra {
  position: fixed; z-index: 30; top: 0; left: 0; right: 0; height: calc(64px + env(safe-area-inset-top, 0px));
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: env(safe-area-inset-top, 0px) max(var(--lado), env(safe-area-inset-right)) 0 max(var(--lado), env(safe-area-inset-left));
  transition: background .3s, box-shadow .3s;
}
.barra.solida { background: var(--vidrio); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); box-shadow: 0 1px 0 var(--borde); }
.barra .logo { display: flex; align-items: center; min-height: 44px; }
.barra .logo img { height: 28px; width: auto; }
.pildora { display: none; gap: 4px; padding: 5px; border-radius: 999px; background: var(--superficie); box-shadow: inset 0 0 0 1px var(--borde); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.pildora a { padding: 7px 14px; border-radius: 999px; color: var(--texto-2); font-size: 14px; text-decoration: none; transition: background .2s, color .2s; }
.pildora a.activa { color: var(--titulo); background: var(--superficie-2); }
.barra-derecha { display: flex; align-items: center; gap: 8px; }
.tema { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--texto); background: var(--superficie); box-shadow: inset 0 0 0 1px var(--borde); }
:root[data-tema='oscuro'] .tema .luna, :root[data-tema='claro'] .tema .sol { display: none; }
.menu { height: 44px; min-width: 84px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--texto); background: var(--superficie); box-shadow: inset 0 0 0 1px var(--borde); }
.hoja-menu {
  position: fixed; z-index: 29; top: calc(64px + env(safe-area-inset-top, 0px)); left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right));
  max-height: calc(100vh - 76px - env(safe-area-inset-top, 0px)); max-height: calc(100dvh - 76px - env(safe-area-inset-top, 0px)); overflow-y: auto; overscroll-behavior: contain;
  padding: 10px; border-radius: 18px; background: var(--vidrio); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: var(--sombra), inset 0 0 0 1px var(--borde);
  transform-origin: top right; transition: opacity .18s ease-out, transform .18s ease-out;
}
/* Entra con un fundido corto (la salida es instantánea). */
@starting-style { .hoja-menu { opacity: 0; transform: translateY(-6px) scale(.98); } }
.hoja-menu nav { display: grid; }
.hoja-menu a { padding: 14px 12px; border-radius: 12px; color: var(--texto); text-decoration: none; font-weight: 600; }
.hoja-menu a + a { border-top: 1px solid var(--borde); }
@media (max-width: 420px) { .barra .boton.chico { display: none; } }
@media (min-width: 980px) {
  .pildora { display: flex; }
  .menu, .hoja-menu { display: none !important; }
}

/* Índice vertical a la izquierda (como la lista de planetas del sitio de referencia) */
.indice { display: none; }
@media (min-width: 1500px) {
  .indice { position: fixed; z-index: 20; left: 26px; top: 50%; transform: translateY(-50%); display: grid; gap: 4px; }
  .indice a { display: flex; align-items: center; gap: 10px; padding: 4px 0; font: 600 11px/1 'Archivo', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--tenue); text-decoration: none; transition: color .25s; }
  .indice i { width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; transition: background .25s, transform .25s; }
  .indice a.activa { color: var(--titulo); }
  .indice a.activa i { background: var(--acento); box-shadow: 0 0 0 4px rgba(47, 180, 180, .18); transform: scale(1.15); }
}

/* ---------- Recorrido: escenario fijo con la columna 3D y escenas encima ---------- */
.recorrido { position: relative; transition: background-color .6s; }
.recorrido.rayos { background-color: #02070b; }   /* lo que asoma debajo del escenario cuando el navegador esconde su barra */
.escenario { position: -webkit-sticky; position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--escenario); transition: background .6s; }
/* Fondo de rayos X: una capa encima que aparece con un fundido (pagina.js pone --rayos según el avance). */
.escenario::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; background: radial-gradient(55% 60% at 60% 45%, #10283a, #02070b 75%); opacity: var(--rayos, 0); transition: opacity .35s ease-out; }
.cielo { position: absolute; top: -10%; right: -10%; bottom: -10%; left: -10%; opacity: .7; pointer-events: none;
  background-image: radial-gradient(1px 1px at 12% 22%, var(--estrellas), transparent 60%), radial-gradient(1px 1px at 38% 74%, var(--estrellas), transparent 60%),
    radial-gradient(1.5px 1.5px at 66% 18%, var(--estrellas), transparent 60%), radial-gradient(1px 1px at 84% 62%, var(--estrellas), transparent 60%),
    radial-gradient(1px 1px at 52% 46%, var(--estrellas), transparent 60%), radial-gradient(1.5px 1.5px at 24% 54%, var(--estrellas), transparent 60%),
    radial-gradient(1px 1px at 92% 30%, var(--estrellas), transparent 60%), radial-gradient(1px 1px at 6% 88%, var(--estrellas), transparent 60%);
  background-size: 420px 420px; animation: flotar 60s linear infinite; }
@keyframes flotar { to { transform: translate3d(0, -420px, 0); } }
#lienzo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; touch-action: pan-y; opacity: 0; transition: opacity .8s; }
.escenario.con-3d #lienzo { opacity: 1; cursor: grab; }
.escenario.con-3d #lienzo:active { cursor: grabbing; }
/* La foto solo aparece si el teléfono no puede con el 3D: la columna y, en las partes de la caja, la caja. */
.respaldo { position: absolute; right: 6%; top: 50%; height: 78%; width: auto; transform: translateY(-50%); display: none; }
.respaldo.caja { height: auto; width: min(44vw, 520px); }
.escenario.sin-3d .respaldo:not(.caja), .escenario.sin-3d.parte-caja .respaldo.caja { display: block; }
.escenario.sin-3d.parte-caja .respaldo:not(.caja) { display: none; }
/* Sin 3D no hay nada que girar ni etiquetas que señalar. */
.escenario.sin-3d .pista, .escenario.sin-3d .etiquetas-3d { display: none; }
.escenario.sin-3d #lienzo { visibility: hidden; pointer-events: none; }
@media (max-width: 819px) and (orientation: portrait) {
  .respaldo { right: 50%; top: 8%; height: 46%; transform: translateX(50%); }
  .respaldo.caja { width: min(70vw, 340px); height: auto; top: 11%; }
}
/* En tabletas verticales y teléfonos acostados la foto no se mete debajo del texto de la izquierda. */
@media (min-width: 820px) {
  .respaldo { max-width: 36%; object-fit: contain; }
  .respaldo.caja { max-width: calc(94% - 480px); }
}
/* Mientras carga el 3D: un aro fino con los colores de SpineUp donde va a estar la columna. */
.escenario.cargando::after {
  content: ''; position: absolute; left: 68%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 8%, var(--su-amarillo), var(--su-azul), var(--su-naranja), var(--su-verde) 92%, transparent);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  opacity: 0; animation: cargar 1s linear infinite, asomar .4s ease-out .5s forwards;
}
@keyframes cargar { to { transform: rotate(1turn); } }
@keyframes asomar { to { opacity: .9; } }
@media (max-width: 819px) and (orientation: portrait) { .escenario.cargando::after { left: 50%; top: 27%; } }

.etiquetas-3d { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; overflow: hidden; }
/* escena.js lee este margen para no meter las etiquetas bajo la muesca del teléfono acostado (no mueve nada). */
.etiquetas-3d { padding-right: env(safe-area-inset-right, 0px); }
.etiquetas-3d span { --punto: var(--su-amarillo); --halo: rgba(242, 197, 0, .25); position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .35s; }
.etiquetas-3d span:nth-child(2) { --punto: var(--su-azul); --halo: rgba(0, 120, 192, .25); }
.etiquetas-3d span:nth-child(3) { --punto: var(--su-naranja); --halo: rgba(248, 120, 0, .25); }
.etiquetas-3d span:nth-child(4) { --punto: var(--su-verde); --halo: rgba(88, 176, 0, .25); }
.etiquetas-3d span:nth-child(5) { --punto: var(--sn-luz); --halo: rgba(47, 180, 180, .25); }
.etiquetas-3d span.visible { opacity: 1; }
.etiquetas-3d span::before { content: ''; position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--punto); box-shadow: 0 0 0 4px var(--halo), 0 0 0 5px rgba(255, 255, 255, .5); }
.etiquetas-3d i { position: absolute; left: 0; top: 0; height: 1px; transform-origin: 0 50%; background: var(--punto); opacity: .75; }
.etiquetas-3d em {
  position: absolute; left: 0; top: 0; padding: 6px 12px; border-radius: 999px; white-space: nowrap;
  font: 400 13px/1.2 'IBM Plex Sans', system-ui, sans-serif; font-style: normal; color: var(--texto-2);
  background: var(--vidrio); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px var(--borde), 0 6px 18px rgba(0, 0, 0, .18);
}
.etiquetas-3d b { font-weight: 600; color: var(--titulo); }
.etiquetas-3d data { font-weight: 600; color: var(--acento); font-variant-numeric: tabular-nums; }
@media (max-width: 819px) { .etiquetas-3d small { display: none; } .etiquetas-3d em { padding: 5px 10px; font-size: 12px; } }

.pista { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); padding: 7px 14px; border-radius: 999px; font-size: 13px; color: var(--texto-2); background: var(--superficie); box-shadow: inset 0 0 0 1px var(--borde); transition: opacity .5s; pointer-events: none; }
.pista.fuera { opacity: 0; }
.avance { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: transparent; }
.avance i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--su-amarillo), var(--su-azul), var(--su-naranja), var(--su-verde)); }

.escenas { position: relative; z-index: 2; margin-top: -100vh; margin-top: -100svh; pointer-events: none; }
.escena { display: flex; align-items: center; min-height: 100vh; min-height: 100svh; max-width: var(--ancho); margin: 0 auto; padding: 90px max(var(--lado), env(safe-area-inset-right)) 50px max(var(--lado), env(safe-area-inset-left)); }
.tarjeta-escena {
  pointer-events: auto; width: 100%; max-width: 440px; padding: 26px 26px 24px; border-radius: var(--radio);
  background: var(--vidrio); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  box-shadow: var(--sombra), inset 0 0 0 1px var(--borde);
  transition: opacity .6s cubic-bezier(.23, 1, .32, 1), transform .6s cubic-bezier(.23, 1, .32, 1);
}
/* Solo con JavaScript (pagina.js pone html.js) las tarjetas que no están en el medio se apagan;
   entran despacio y salen rápido. */
:root.js .escena:not(.activa) .tarjeta-escena { opacity: .18; transform: translateY(28px); transition-duration: .3s; }
.tarjeta-escena h2.titular { font-size: 32px; font-size: clamp(32px, 4.4vw, 46px); margin: 12px 0 12px; }
.tarjeta-escena p { color: var(--texto-2); }
.tarjeta-escena .etiqueta { color: var(--texto-2); }
.tarjeta-escena p strong { color: var(--titulo); }
.tarjeta-escena p + p, .tarjeta-escena .lista + p { margin-top: 10px; }
.tarjeta-escena .nota { font-size: 14px; color: var(--tenue); }
.tarjeta-escena .acciones { margin-top: 18px; }
.num { display: inline-grid; place-items: center; min-width: 30px; height: 22px; padding: 0 6px; border-radius: 6px; font-size: 11px; letter-spacing: .06em; color: #04161b; }
.num.c1 { background: var(--su-amarillo); } .num.c2 { background: var(--su-azul); color: #fff; }
.num.c3 { background: var(--su-naranja); } .num.c4 { background: var(--su-verde); }   /* letra oscura: el blanco no llega a 3:1 */
.num.c5 { background: var(--sn-luz); }
/* En las escenas de una pieza, el número lleva el color del punto de esa pieza en el 3D. */
.lista { list-style: none; display: grid; gap: 8px; }
.lista li { position: relative; padding-left: 22px; color: var(--texto-2); }
.lista li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 9px; height: 9px; border-radius: 2px; background: var(--acento); }
.vivo-punto, .vivo b i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--rojo); box-shadow: 0 0 0 0 rgba(224, 36, 58, .6); animation: latido 1.8s infinite; }
@keyframes latido { 70% { box-shadow: 0 0 0 10px rgba(224, 36, 58, 0); } 100% { box-shadow: 0 0 0 0 rgba(224, 36, 58, 0); } }

/* Configurador de la caja */
.configurador { display: grid; gap: 10px; margin-top: 16px; }
.configurador .fila { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 10px; }
.configurador .fila > span { font-size: 13px; color: var(--tenue); }
.configurador [data-elige] { display: flex; flex-wrap: wrap; gap: 6px; }
.configurador button { min-width: 44px; height: 38px; padding: 0 10px; border-radius: 10px; font-weight: 600; font-size: 15px; color: var(--texto); background: var(--superficie); box-shadow: inset 0 0 0 1.5px var(--borde); transition: background .2s, color .2s, box-shadow .2s, opacity .2s, transform .12s cubic-bezier(.23, 1, .32, 1); }
.configurador button:active:not(:disabled) { transform: scale(.95); }
.configurador button[aria-pressed='true'] { color: #fff; background: var(--sn); box-shadow: 0 6px 18px rgba(26, 135, 136, .35); }
.configurador button:disabled { opacity: .3; cursor: default; box-shadow: inset 0 0 0 1.5px var(--borde); }

/* Portada (la primera escena) */
.escena.portada { align-items: center; }
.texto-portada { pointer-events: auto; max-width: 600px; }
.texto-portada .lugar { color: var(--su-amarillo); }
:root[data-tema='claro'] .texto-portada .lugar { color: #86670a; }   /* el mismo dorado, más hondo: 4,9:1 */
.titular .t1, .titular .t2 { display: block; }
h1.titular { margin: 16px 0 14px; }
h1 .t1 { font-size: 30px; font-size: clamp(30px, 5vw, 56px); letter-spacing: .02em; }
h1 .t2 { font-size: 110px; font-size: clamp(110px, 17vw, 210px); font-stretch: 68%; line-height: .82;
  background: linear-gradient(100deg, var(--titulo) 10%, var(--sn-luz) 55%, var(--su-amarillo) 110%); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-tema='claro'] h1 .t2 { background-image: linear-gradient(100deg, var(--sn-profundo) 10%, var(--sn) 60%, #0078c0 110%); }
.que { font: 600 15px/1.4 'Archivo', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); }
.vivo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.vivo b { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px; border-radius: 999px; font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(224, 36, 58, .92); }
.vivo b i { background: #fff; }
:root[data-tema='claro'] .vivo b { background: rgba(200, 30, 50, .94); }
.vivo span { color: var(--texto-2); }
.gancho { margin-top: 14px; font-size: 18px; color: var(--texto); }
.gancho b { color: var(--titulo); }
.fecha-portada { display: grid; gap: 2px; margin-top: 14px; }
.fecha-portada strong { font-size: 19px; color: var(--titulo); }
.fecha-portada span { font-size: 14px; color: var(--texto-2); }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.cuenta { display: flex; gap: 8px; margin-top: 22px; }
.cuenta div { display: grid; justify-items: center; min-width: 64px; padding: 10px 6px 8px; border-radius: 14px; background: var(--superficie); box-shadow: inset 0 0 0 1px var(--borde); }
.cuenta b { font: 700 26px/1 'Archivo', sans-serif; font-stretch: 80%; color: var(--titulo); font-variant-numeric: tabular-nums; }
.cuenta small { margin-top: 4px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); }
.cupos { max-width: 360px; margin-top: 18px; }
.cupos p { display: flex; justify-content: space-between; font-size: 14px; color: var(--texto-2); }
.cupos b { color: var(--titulo); }
.barrita { height: 6px; margin-top: 8px; border-radius: 99px; background: var(--superficie-2); overflow: hidden; }
.barrita i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--su-verde), var(--su-amarillo), var(--su-naranja)); transition: width 1.4s cubic-bezier(.2, .8, .2, 1); }
.bajar { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 16px; font-size: 14px; color: var(--texto-2); text-decoration: none; }
.bajar span { animation: rebote 1.8s infinite; }
@keyframes rebote { 50% { transform: translateY(4px); } }

/* Teléfono vertical (acostado usa la composición de la computadora, más abajo). */
@media (max-width: 819px) and (orientation: portrait) {
  /* La tarjeta se apoya encima del botón fijo «Inscribirme», no debajo. */
  .escena { align-items: flex-end; padding: 0 max(14px, env(safe-area-inset-right)) calc(var(--alto-fijo) + 14px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left)); }
  .escena.final { padding-bottom: 28px; }   /* aquí el fijo se esconde: la tarjeta trae su propio botón */
  .tarjeta-escena { max-width: none; padding: 20px 18px; }
  :root[data-tema='oscuro'] .tarjeta-escena { background: rgba(5, 27, 34, .85); }   /* que el hueso de detrás no manche el texto */
  /* Portada: el texto sube como una hoja de borde a borde, con fondo propio, y la columna se funde arriba. */
  .escena.portada { padding: calc(46vh - 56px) 0 40px; padding-top: calc(46svh - 56px); min-height: 0; }
  .texto-portada { padding: 74px max(18px, env(safe-area-inset-right)) 0 max(18px, env(safe-area-inset-left)); background: linear-gradient(180deg, transparent 0, var(--fondo) 64px); border-radius: 0; max-width: none; }
  .cuenta div { min-width: 0; flex: 1; }
  .acciones .boton { flex: 1 1 auto; }
  .pista { bottom: auto; top: 26%; left: auto; right: 12px; transform: none; max-width: 104px; padding: 8px 12px; border-radius: 14px; font-size: 12px; line-height: 1.3; text-align: center; }
  /* El configurador en una sola línea por fila, todas del mismo ancho (como un control segmentado). */
  .configurador { gap: 8px; margin-top: 12px; }
  .configurador .fila { grid-template-columns: 46px 1fr; gap: 6px; }
  .configurador [data-elige] { flex-wrap: nowrap; gap: 4px; }
  .configurador button { flex: 1 1 0; min-width: 0; max-width: none; height: 44px; padding: 0; font-size: 15px; }
}
/* Teléfonos bajos (Android con la barra de Chrome): tarjetas más compactas para que se vea el 3D. */
@media (max-width: 819px) and (orientation: portrait) and (max-height: 760px) {
  .tarjeta-escena { padding: 16px 16px 14px; }
  .tarjeta-escena h2.titular { font-size: 28px; margin: 8px 0; }
  .tarjeta-escena p, .tarjeta-escena .lista li { font-size: 15px; line-height: 1.5; }
  .tarjeta-escena .nota { font-size: 13px; }
  .tarjeta-escena .lista { gap: 4px; }
  .configurador { gap: 6px; margin-top: 10px; }
  .escena.portada { padding-top: calc(40vh - 56px); padding-top: calc(40svh - 56px); }
}

/* ---------- Secciones normales ---------- */
.avales { position: relative; z-index: 3; border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); background: var(--fondo-2); }
.avales .envoltura { display: flex; flex-wrap: wrap; gap: 18px 40px; padding-top: 22px; padding-bottom: 22px; }
.aval { display: flex; align-items: center; gap: 14px; }
.aval img { width: 52px; height: 52px; object-fit: contain; }
.aval p { display: grid; gap: 3px; font-weight: 600; color: var(--titulo); }

.seccion { position: relative; z-index: 3; padding: 96px 0; background: var(--fondo); }
.seccion:nth-of-type(even) { background: var(--fondo-2); }
.seccion h2.titular { margin-bottom: 28px; margin-bottom: clamp(24px, 3.2vw, 36px); }   /* el mismo aire bajo todos los titulares */
@media (max-width: 819px) { .seccion { padding: 72px 0; } }

[data-aparece] { transition: opacity .8s, transform .8s cubic-bezier(.2, .8, .2, 1); }
[data-aparece].espera { opacity: 0; transform: translateY(30px); }

.galeria { display: grid; gap: 20px; }
@media (min-width: 860px) {
  .galeria { grid-template-columns: 1.4fr 1fr; align-items: stretch; }
  /* La foto se apoya abajo: el corte de la caja coincide con el borde y el blanco sobrante queda arriba. */
  .galeria > .foto:first-child { display: flex; align-items: flex-end; }
  .galeria > .foto:first-child figcaption { top: 14px; bottom: auto; }   /* en el blanco de arriba, sin tapar la caja */
}
.foto { position: relative; overflow: hidden; border-radius: var(--radio); background: #fff; box-shadow: var(--sombra), inset 0 0 0 1px var(--borde); }
/* El filo va encima de la foto: si no, la imagen lo tapa y se ve una costura donde empieza. */
.foto::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--borde); pointer-events: none; }
.foto img { width: 100%; transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.foto figcaption { position: absolute; left: 14px; right: 14px; bottom: 14px; padding: 10px 14px; border-radius: 12px; font-size: 14px; color: #0d2f37; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
/* En el teléfono el pie va debajo de la foto, para no tapar el «H11» que pide leer. */
@media (max-width: 559px) { .foto figcaption { position: static; padding: 12px 16px 14px; border-radius: 0; background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; } }
.columna-real { display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at 50% 40%, #ffffff, #e9f1f1); }
/* Las señales van en % de la propia imagen, así apuntan al mismo sitio en cualquier pantalla. */
.marcada { position: relative; }
.columna-real img { width: auto; height: 560px; }   /* alto fijo: no salta al cargar */
.senal { position: absolute; display: flex; align-items: center; transform: translateY(-50%); font-size: 13px; color: #0d2f37; }
.senal::before { content: ''; order: 2; width: 34px; height: 1.5px; background: var(--sn-profundo); }
.senal::after { content: ''; order: 3; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--sn-profundo); background: var(--su-amarillo); }
.senal span { order: 1; white-space: nowrap; padding: 5px 9px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px #d0e2e3, 0 6px 16px rgba(0, 64, 76, .12); }
.senal.n1 { right: 27%; top: 38%; } .senal.n2 { right: 35%; top: 54.5%; } .senal.n3 { right: 37%; top: 61%; }

.ponentes { display: grid; gap: 20px; }
@media (min-width: 640px) { .ponentes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .ponentes { grid-template-columns: repeat(4, 1fr); } }
.ponente { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radio); background: var(--superficie); box-shadow: inset 0 0 0 1px var(--borde); transition: transform .4s, box-shadow .4s; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.retrato { position: relative; aspect-ratio: 4 / 4.2; overflow: hidden; }
.retrato img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transition: transform 1s cubic-bezier(.2, .8, .2, 1); }
.retrato::after { content: ''; position: absolute; right: 0; bottom: 0; left: 0; height: 40%; background: linear-gradient(transparent, rgba(4, 22, 27, .55)); }
.datos { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 20px 22px 24px; }
.datos h3 { display: flex; align-items: center; gap: 10px; font: 700 24px/1.15 'Archivo', sans-serif; font-stretch: 85%; color: var(--titulo); }
.cargo { color: var(--texto-2); }
.bandera { display: inline-block; flex: none; width: 24px; height: 16px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
@media (min-width: 640px) {
  /* Si el nombre se parte en dos líneas, la bandera sigue a la última palabra. */
  .datos h3 { display: block; }
  .datos h3 .bandera { margin-left: 8px; vertical-align: middle; position: relative; top: -2px; }
}
/* En 4 columnas, el rol ocupa siempre dos líneas para que los nombres queden alineados. */
@media (min-width: 1100px) { .ponente .rol { min-height: 2.4em; align-items: flex-end; } }
.bandera.fr { background: linear-gradient(90deg, #002395 33.3%, #fff 0 66.6%, #ed2939 0); }
.bandera.ve { background: linear-gradient(#ffcc00 33.3%, #00247d 0 66.6%, #cf142b 0); }
.distincion { margin-top: 4px; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #3d2f00; background: var(--su-amarillo); }
.ver-mas { display: inline-flex; align-items: center; min-height: 44px; margin-top: 1px; padding: 0; font-weight: 600; color: var(--acento); text-underline-offset: 4px; }
.ver-mas::after { content: ' +'; content: ' +' / ''; white-space: pre; }
.ver-mas[aria-expanded='true']::after { content: ' –'; content: ' –' / ''; }
/* Plegada no se lee (visibility), y al abrir se despliega igual que antes. */
.logros { display: grid; gap: 8px; max-height: 0; overflow: hidden; visibility: hidden; list-style: none; transition: max-height .6s cubic-bezier(.2, .8, .2, 1), margin .4s, visibility 0s linear .6s; }
.logros.abierto { max-height: 900px; margin-top: 6px; visibility: visible; transition: max-height .6s cubic-bezier(.2, .8, .2, 1), margin .4s, visibility 0s; }
.logros li { position: relative; padding-left: 18px; font-size: 15px; color: var(--texto-2); }
.logros li::before { content: ''; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 2px; background: var(--acento); }
/* Los enlaces miden 44 px para el dedo, con márgenes negativos para que el texto quede donde estaba. */
.leer-cv { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin-top: -1px; transition: margin .4s; color: var(--acento); text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgba(47, 180, 180, .4); text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
.leer-cv span { color: var(--tenue); }
.logros + .leer-cv { margin-top: -10px; }
.logros.abierto + .leer-cv { margin-top: 0; }

.pestanas { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 5px; margin: 0 0 26px; border-radius: 18px; background: var(--superficie); box-shadow: inset 0 0 0 1px var(--borde); max-width: 100%; }
.pestanas .indicador { position: absolute; top: 5px; bottom: 5px; left: 0; width: var(--w, 0); transform: translateX(var(--x, 0)); border-radius: 14px; background: var(--sn); box-shadow: 0 8px 22px rgba(26, 135, 136, .35); transition: transform .45s cubic-bezier(.2, .8, .2, 1), width .45s; }
.pestanas button { position: relative; z-index: 1; display: grid; align-content: start; padding: 10px 18px; border-radius: 14px; text-align: left; font-weight: 700; font-size: 16px; color: var(--texto); transition: color .3s; }
.pestanas button small { font-weight: 400; font-size: 13px; color: var(--tenue); transition: color .3s; }
.pestanas button[aria-selected='true'], .pestanas button[aria-selected='true'] small { color: #fff; }
.linea-tiempo { position: relative; list-style: none; display: grid; gap: 4px; padding-left: 26px; --avance: 0; }
.linea-tiempo::before, .linea-tiempo::after { content: ''; position: absolute; left: 6px; top: 12px; bottom: 12px; width: 2px; border-radius: 2px; background: var(--borde); }
.linea-tiempo::after { bottom: auto; height: calc((100% - 24px) * var(--avance)); background: linear-gradient(var(--su-amarillo), var(--sn-luz), var(--su-azul)); }
.linea-tiempo li { position: relative; display: grid; grid-template-columns: 62px 1fr; gap: 14px; padding: 12px 14px; border-radius: 14px; transition: background .3s; }
.linea-tiempo li::before { content: ''; position: absolute; left: -25px; top: 19px; width: 10px; height: 10px; border-radius: 50%; background: var(--fondo); box-shadow: inset 0 0 0 2px var(--tenue); transition: box-shadow .3s, background .3s; }
.linea-tiempo li.pasado::before { background: var(--sn-luz); box-shadow: 0 0 0 4px rgba(47, 180, 180, .18); }
.linea-tiempo time { font: 700 17px/1.4 'Archivo', sans-serif; font-stretch: 85%; color: var(--acento); font-variant-numeric: tabular-nums; }
.linea-tiempo strong { display: block; font-weight: 600; color: var(--titulo); }
.linea-tiempo span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--texto-2); }
.linea-tiempo li.pausa strong { font-weight: 400; color: var(--tenue); }
.linea-tiempo li.vivo-item { background: linear-gradient(90deg, rgba(224, 36, 58, .16), transparent); box-shadow: inset 0 0 0 1px rgba(224, 36, 58, .35); }
.linea-tiempo li.vivo-item time, .linea-tiempo li.vivo-item strong { color: #b81a2d; }
:root[data-tema='oscuro'] .linea-tiempo li.vivo-item time, :root[data-tema='oscuro'] .linea-tiempo li.vivo-item strong { color: #ff8090; }
.linea-tiempo li.vivo-item::before { background: var(--rojo); box-shadow: 0 0 0 0 rgba(224, 36, 58, .6); animation: latido 1.8s infinite; }
.preliminar { margin-top: 18px; font-size: 14px; color: var(--tenue); }
@media (max-width: 480px) { .linea-tiempo li { grid-template-columns: 48px 1fr; gap: 10px; padding: 12px 10px; } }
.descargar-programa { margin-top: 20px; }

.precio-caja { display: grid; gap: 28px; padding: 30px; border-radius: 26px; border: 1.5px solid transparent;
  background: linear-gradient(var(--fondo), var(--fondo)) padding-box, conic-gradient(from var(--giro, 0deg), var(--su-amarillo), var(--su-azul), var(--su-naranja), var(--su-verde), var(--su-amarillo)) border-box;
  animation: girar 8s linear infinite paused; box-shadow: var(--sombra); }
.precio-caja.en-vista { animation-play-state: running; }   /* solo gira mientras se ve */
@keyframes girar { to { --giro: 360deg; } }
@media (min-width: 860px) { .precio-caja { grid-template-columns: 1fr 1.3fr; padding: 40px; } }
.precio-grande { font: 800 64px/1 'Archivo', sans-serif; font: 800 clamp(64px, 10vw, 96px)/1 'Archivo', sans-serif; font-stretch: 72%; color: var(--titulo); }
.precio-sub { color: var(--texto-2); }
.incluye { list-style: none; display: grid; gap: 8px; margin-top: 18px; }
.incluye li { position: relative; padding-left: 26px; }
.incluye li::before { content: ''; position: absolute; left: 0; top: .35em; width: 16px; height: 16px; border-radius: 50%; background: var(--sn) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.5 2.4L12 5.4' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center / 12px no-repeat; }
.pasos { list-style: none; counter-reset: paso; display: grid; gap: 16px; }
.pasos li { counter-increment: paso; display: grid; grid-template-columns: 38px 1fr; gap: 12px; }
.pasos li::before { content: counter(paso); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-weight: 700; color: #04161b; background: var(--su-amarillo); }
.pasos li:nth-child(2)::before { background: var(--su-azul); color: #fff; } .pasos li:nth-child(3)::before { background: var(--su-verde); }
.pasos strong { display: block; color: var(--titulo); }
.pasos span { display: block; margin-top: 2px; font-size: 15px; line-height: 1.5; color: var(--texto-2); }
.metodos-lista { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.metodos-lista span { padding: 6px 12px; border-radius: 999px; font-size: 14px; background: var(--superficie); box-shadow: inset 0 0 0 1px var(--borde); }

.sede { display: grid; gap: 20px; align-items: center; padding: 28px; border-radius: var(--radio); background: var(--superficie); box-shadow: inset 0 0 0 1px var(--borde); }
@media (min-width: 860px) { .sede { grid-template-columns: auto 1fr auto; } }
.sede p { color: var(--texto-2); }
.sede .nombre-sede { font: 700 24px/1.2 'Archivo', sans-serif; font-stretch: 85%; color: var(--titulo); }

.preguntas { display: grid; gap: 10px; }
.preguntas details { border-radius: 16px; background: var(--superficie); box-shadow: inset 0 0 0 1px var(--borde); }
.preguntas summary { display: flex; justify-content: space-between; gap: 12px; padding: 18px 20px; font-weight: 600; color: var(--titulo); cursor: pointer; list-style: none; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: '+'; content: '+' / ''; font-size: 22px; line-height: 1; color: var(--acento); transition: transform .3s; }
.preguntas details[open] summary::after { transform: rotate(45deg); }
.preguntas details p { padding: 0 20px 18px; color: var(--texto-2); }
.otra-duda { margin-top: 26px; color: var(--texto-2); }
.contacto { margin-top: 12px; }
@media (max-width: 480px) { .contacto .boton { flex: 1 1 100%; } }

.marcas { position: relative; z-index: 3; padding: 50px 0; background: var(--fondo); border-top: 1px solid var(--borde); }
.marcas ul { list-style: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 30px 52px; }
.marcas img { width: auto; opacity: .92; }
.m-spinenet { height: 34px; } .m-spineup-ve { height: 62px; } .m-spineup { height: 30px; } .m-safe { height: 24px; }
:root[data-tema='oscuro'] .m-safe { filter: brightness(0) invert(1); }

.pie { position: relative; z-index: 3; background: #021014; color: #a9c6c9; font-size: 15px; }
:root[data-tema='claro'] .pie { background: var(--sn-profundo); color: #d6ecec; }
.pie .envoltura { display: grid; gap: 16px; padding-top: 34px; padding-bottom: calc(34px + var(--alto-fijo) + env(safe-area-inset-bottom, 0px)); }
.pie a { display: inline-block; padding: 10px 0; margin: -10px 0; color: #fff; }   /* más área para el dedo sin mover las líneas */
@media (min-width: 760px) { .pie .envoltura { grid-template-columns: 1fr auto; } }
/* Crédito de quien hizo la página: discreto, en su propia línea bajo los datos del evento. */
.pie .credito { grid-column: 1 / -1; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 13px; }
.pie .credito a { display: inline-flex; align-items: center; color: inherit; text-decoration: none; transition: color .2s; }
.pie .credito a:hover, .pie .credito a:focus-visible { color: #fff; }
/* Firma de MonTech: el isotipo y el texto. Sin gap en el flex (los iPhone viejos no lo tienen); en inline-flex
   se pierde el espacio antes de <b>, por eso el margen. */
.pie .credito img { display: block; width: 22px; height: 22px; margin-right: 10px; }
.pie .credito b { margin-left: .25em; }

/* Botón fijo del teléfono: 8 + 48 + 8 = 64 px (--alto-fijo) más la zona segura de abajo.
   Escondido no se puede enfocar ni lo lee el lector de pantalla (visibility). */
.fijo {
  position: fixed; z-index: 25; left: 0; right: 0; bottom: 0;
  padding: 8px max(14px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left));
  background: var(--vidrio); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 -1px 0 var(--borde);
  transform: translateY(110%); visibility: hidden; transition: transform .35s, visibility 0s linear .35s;
}
.fijo.visible { transform: none; visibility: visible; transition: transform .35s, visibility 0s; }
.fijo .boton { width: 100%; min-height: 48px; }
@media (min-width: 900px) { .fijo { display: none; } }

/* ---------- Cortes de línea: titulares parejos y párrafos sin palabras sueltas ---------- */
.titular, .fecha-portada strong, .nombre-sede, .datos h3, .preguntas summary { text-wrap: balance; }
.tarjeta-escena p, .lista li, .gancho, .fecha-portada span, .linea-tiempo span, .pasos span, .preguntas details p, .sede p, .cargo, .precio-sub { text-wrap: pretty; }

/* ---------- Al tocar: sin destello gris, sin zoom por doble toque y con respuesta al apoyar el dedo ---------- */
.boton, .tema, .menu, .configurador button, .pestanas button, .ver-mas, .hoja-menu a, .preguntas summary, .bajar { touch-action: manipulation; }
.boton, .tema, .menu, .configurador button, .pestanas button, .ver-mas { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.boton:active { transform: scale(.97); transition-duration: .1s; }
.tema, .menu { transition: transform .12s ease-out; }
.tema:active, .menu:active { transform: scale(.94); }
.preguntas summary:active { background: var(--superficie-2); border-radius: 16px; }

/* El hover solo donde hay ratón: en el teléfono no se queda pegado después de tocar. */
@media (hover: hover) and (pointer: fine) {
  .boton:hover { transform: translateY(-1px); }
  .boton:active { transform: scale(.97); }
  .boton.brillo:hover { box-shadow: 0 14px 40px rgba(47, 180, 180, .5), inset 0 1px 0 rgba(255, 255, 255, .3); }
  .boton.vidrio:hover, .boton.borde:hover { box-shadow: inset 0 0 0 1.5px var(--acento); }
  .pildora a:hover { color: var(--titulo); background: var(--superficie-2); }
  .indice a:hover { color: var(--texto); }
  .configurador button:hover:not(:disabled):not([aria-pressed='true']) { box-shadow: inset 0 0 0 1.5px var(--acento); }
  .foto:hover img { transform: scale(1.04); }
  .ponente:hover { box-shadow: var(--sombra), inset 0 0 0 1px var(--acento); }
  .ponente:hover .retrato img { transform: scale(1.05); }
  .linea-tiempo li:not(.vivo-item):hover { background: var(--superficie); }
  .leer-cv:hover, .ver-mas:hover { text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 1px; text-underline-offset: 4px; }
}

/* Reducir movimiento: se quedan los fundidos cortos de opacidad; se van los desplazamientos,
   los rebotes y lo que gira o late sin parar. */
/* En pantallas táctiles: sin desenfoque sobre el 3D (se recalcula en cada cuadro) y cielo quieto. */
@media (pointer: coarse) {
  .etiquetas-3d em { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(5, 27, 34, .9); }
  :root[data-tema='claro'] .etiquetas-3d em { background: rgba(255, 255, 255, .94); }
  .cielo { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cielo, .bajar span, .vivo-punto, .vivo b i, .linea-tiempo li.vivo-item::before, .precio-caja { animation: none; }
  .escenario.cargando::after { animation: asomar .4s ease-out .5s forwards; }   /* el aro, quieto */
  :root.js .escena:not(.activa) .tarjeta-escena, [data-aparece].espera { transform: none; }
  .tarjeta-escena, [data-aparece] { transition: opacity .25s ease; }
  .ponente { transform: none; transition: box-shadow .2s; }
  .fijo { transform: none; opacity: 0; transition: opacity .2s, visibility 0s linear .2s; }
  .fijo.visible { opacity: 1; transition: opacity .2s, visibility 0s; }
  .hoja-menu { transition: opacity .15s; }
  @starting-style { .hoja-menu { transform: none; } }
  .pestanas .indicador { transition: none; }
  .foto img, .retrato img { transition: none; }
  .boton:hover, .foto:hover img, .ponente:hover .retrato img { transform: none; }
}

/* ---------- Cualquier teléfono y computadora ---------- */
/* Con el dedo, todo lo que se toca mide al menos 44 px (el iPad y el teléfono acostado usan el diseño de computadora). */
@media (pointer: coarse) {
  .configurador button { height: 44px; }
  .pildora a { padding-top: 11px; padding-bottom: 11px; }
}
/* Teléfonos angostos: la fila de las seis alturas gana ancho con la etiqueta justa ("Ángulo" mide 41 px)
   y separaciones más finas; en un iPhone de 390 px cada botón llega a 44 px. */
@media (max-width: 400px) {
  .configurador .fila { grid-template-columns: 42px 1fr; gap: 5px; }
  .configurador [data-elige] { gap: 3px; }
}
/* iPad acostado (1024 px) y pantallas parecidas: la columna queda más a la izquierda y tapaba el final
   de «Venezuela 2026»; esa línea baja a dos renglones. */
@media (min-width: 820px) and (max-width: 1099px) {
  .texto-portada { max-width: min(600px, 52vw); }
}
/* Teléfono acostado: arriba ya está «Inscribirme», así que el botón fijo se va y la tarjeta se compacta para que se vea el 3D. */
@media (orientation: landscape) and (max-height: 500px) {
  :root.con-fijo { --alto-fijo: 0px; }
  .fijo { display: none; }
  .tarjeta-escena { padding: 16px 18px 14px; }
  .tarjeta-escena h2.titular { font-size: 28px; margin: 8px 0; }
  .tarjeta-escena p, .tarjeta-escena .lista li { font-size: 15px; line-height: 1.5; }
  .tarjeta-escena .lista { gap: 4px; }
  .configurador { gap: 6px; margin-top: 10px; }
  .respaldo, .respaldo.caja { top: 68px; }   /* debajo de la barra */
}
/* Teléfono acostado más angosto (Android de 640-800 × 360, iPhone 7 de 667 × 375) y sin 3D: la foto a
   la derecha y el texto a la izquierda, como en los acostados más anchos; con la tarjeta de borde a
   borde la foto quedaba tapada. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 819px) {
  .escenario.sin-3d .respaldo { right: 6%; top: calc(50% + 32px); height: calc(100% - 92px); max-width: 38%; object-fit: contain; transform: translateY(-50%); }
  .escenario.sin-3d .respaldo.caja { right: 4%; width: 36%; height: auto; }
  .escenario.sin-3d ~ .escenas .escena { align-items: center; padding-top: 76px; padding-bottom: 16px; }
  .escenario.sin-3d ~ .escenas .escena.portada { min-height: 100vh; min-height: 100svh; padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
  .escenario.sin-3d ~ .escenas .tarjeta-escena, .escenario.sin-3d ~ .escenas .texto-portada { max-width: 56%; }
  .escenario.sin-3d ~ .escenas .texto-portada { padding: 0; background: none; }
}
/* Teléfono acostado, de cualquier ancho: la composición de la computadora (tarjeta a la izquierda y la pieza
   a la derecha), entre la barra y el borde de abajo, sin meterse en la muesca ni en la raya de inicio. */
@media (orientation: landscape) and (max-height: 500px) {
  .escena { padding-top: 76px; padding-bottom: 16px; padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)); }
  .texto-portada { max-width: min(600px, 58vw); }   /* que el titular no se monte sobre la columna */
  .pista { left: auto; right: 16px; right: max(16px, env(safe-area-inset-right, 0px)); bottom: 16px; bottom: max(16px, env(safe-area-inset-bottom, 0px)); transform: none; }   /* en la esquina, sin tapar el texto de la portada */
  .respaldo, .respaldo.caja { top: calc(50% + 32px); }   /* entre la barra y el borde de abajo */
  .respaldo { height: calc(100% - 92px); }
}
/* Teléfono acostado de menos de 820 px (Android de 640-800 × 360, iPhone 7 de 667 × 375, iPhone mini de
   812 × 375): la tarjeta llega hasta la mitad de la pantalla y la pieza va en la otra mitad, como en los
   más anchos; antes la tarjeta iba de borde a borde y tapaba la caja. */
@media (max-width: 819px) and (orientation: landscape) {
  .tarjeta-escena { max-width: calc(50vw - 20px); max-width: calc(50vw - max(var(--lado), env(safe-area-inset-left, 0px))); }
  .texto-portada { max-width: 52vw; }
  /* En la tarjeta angosta, el configurador como en el teléfono vertical: cada fila en una línea, botones del mismo ancho. */
  .configurador .fila { grid-template-columns: 46px 1fr; gap: 6px; }
  .configurador [data-elige] { flex-wrap: nowrap; gap: 4px; }
  .configurador button { flex: 1 1 0; min-width: 0; max-width: none; padding: 0; }
}
/* Más angosto (iPhone 8 o SE acostados, Android de 640 px): el nombre de la fila va encima y cada botón sigue cómodo de tocar. */
@media (max-width: 739px) and (orientation: landscape) {
  .configurador .fila { grid-template-columns: 1fr; gap: 4px; }
}
/* Y si el texto de la tarjeta no cabe en el alto, se desplaza por dentro (al llegar al final sigue la página). */
@media (max-width: 819px) and (orientation: landscape) and (max-height: 500px) {
  .tarjeta-escena { max-height: calc(100vh - 92px); max-height: calc(100svh - 76px - max(16px, env(safe-area-inset-bottom, 0px))); overflow-y: auto; scrollbar-width: thin; }
}
/* Teléfono vertical muy bajo (iPhone SE de 1.ª gen., 320 × 568): la tarjeta de las medidas tapaba casi toda la
   caja; va algo más compacta (los botones siguen de 44 px) y escena.js dibuja ahí la caja más chica. */
@media (max-width: 819px) and (orientation: portrait) and (max-height: 599px) {
  .escena[data-escena='tallas'] .tarjeta-escena { padding: 12px 14px 10px; }
  .escena[data-escena='tallas'] .tarjeta-escena h2.titular { font-size: 24px; margin: 6px 0; }
  .escena[data-escena='tallas'] .tarjeta-escena p { font-size: 14px; line-height: 1.4; }
  .escena[data-escena='tallas'] .configurador { gap: 4px; margin-top: 8px; }
}

/* Sin JavaScript (apagado, o un navegador tan viejo que no corre pagina.js, que es quien pone html.js)
   no hay 3D: sale la foto de la columna; se van la pista de girar, la barra de cupos vacía y los botones
   que no harían nada; la trayectoria de los ponentes y los dos días del programa quedan abiertos.
   Lo que cambia la primera pantalla o mueve lo de abajo espera 3 s: mientras pagina.js llega no
   parpadea nada ni se baja la foto (lejos, fuera del escenario, el navegador no la pide). */
.dia-sin-js { display: none; }
:root:not(.js) .pestanas { display: none; }
:root:not(.js) .dia-sin-js { display: grid; gap: 2px; margin: 0 0 12px; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--titulo); }
:root:not(.js) .dia-sin-js small { font-weight: 400; font-size: 13px; color: var(--tenue); }
:root:not(.js) .linea-tiempo + .dia-sin-js { margin-top: 32px; }
:root:not(.js) .escenario .respaldo:not(.caja) { display: block; animation: sin-js-entra 0s 3s backwards; }
:root:not(.js) .pista, :root:not(.js) .barrita { animation: sin-js-sale 0s 3s forwards; }
:root:not(.js) .tema, :root:not(.js) .menu, :root:not(.js) .ver-mas { animation: sin-js-quita 0s 3s forwards; }
:root:not(.js) .logros { animation: sin-js-abre 0s 3s forwards; }
:root:not(.js) .logros + .leer-cv { animation: sin-js-cv 0s 3s forwards; }
:root:not(.js) .barra { animation: sin-js-barra 0s 3s forwards; }   /* nadie la oscurece al bajar: queda de vidrio */
@keyframes sin-js-entra { from { visibility: hidden; transform: translateX(-10000px); } }
@keyframes sin-js-sale { to { visibility: hidden; } }
@keyframes sin-js-quita { to { visibility: hidden; width: 0; min-width: 0; min-height: 0; padding: 0; margin: 0; font-size: 0; } }
@keyframes sin-js-abre { to { max-height: 900px; margin-top: 6px; visibility: visible; } }
@keyframes sin-js-cv { to { margin-top: 0; } }
@keyframes sin-js-barra { to { background: var(--vidrio); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); box-shadow: 0 1px 0 var(--borde); } }
/* Con JavaScript apagado el navegador lo avisa: todo eso de una vez. */
@media (scripting: none) {
  :root:not(.js) .escenario .respaldo:not(.caja), :root:not(.js) .logros, :root:not(.js) .logros + .leer-cv, :root:not(.js) .barra { animation: none; }
  :root:not(.js) .barra { background: var(--vidrio); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); box-shadow: 0 1px 0 var(--borde); }
  :root:not(.js) .pista, :root:not(.js) .barrita, :root:not(.js) .tema, :root:not(.js) .menu, :root:not(.js) .ver-mas { display: none; }
  :root:not(.js) .logros { max-height: none; margin-top: 6px; visibility: visible; }
  :root:not(.js) .logros + .leer-cv { margin-top: 0; }
}

/* Navegadores viejos (Safari de iOS 14.0 o anterior, Chrome 87 o anterior). */
/* Sin aspect-ratio: la misma caja del retrato con el truco del padding. */
@supports not (aspect-ratio: 1) {
  .retrato { height: 0; padding-top: 105%; }
  .retrato img { position: absolute; top: 0; left: 0; }
}
/* Sin «gap» en las cajas flex (pagina.js pone html.sin-gap): los mismos espacios con márgenes. */
:root.sin-gap .etiqueta > span, :root.sin-gap .boton > .ico, :root.sin-gap .vivo b i { margin-right: 9px; }
:root.sin-gap .boton > .precio, :root.sin-gap .bajar span, :root.sin-gap .datos h3 .bandera { margin-left: 10px; }
:root.sin-gap .barra-derecha > * + *, :root.sin-gap .cuenta > * + * { margin-left: 8px; }
:root.sin-gap .pildora a + a { margin-left: 4px; }
:root.sin-gap .indice i { margin-right: 10px; }
:root.sin-gap .configurador [data-elige] > * + * { margin-left: 5px; }
:root.sin-gap .leer-cv span { margin-left: 4px; }
:root.sin-gap .preguntas summary::after { margin-left: 12px; }
:root.sin-gap .acciones > *, :root.sin-gap .vivo > b { margin: 0 10px 10px 0; }
:root.sin-gap .acciones { margin-bottom: -10px; }
:root.sin-gap .metodos-lista span { margin: 0 6px 6px 0; }
:root.sin-gap .datos > * { margin-bottom: 6px; }
:root.sin-gap .aval { margin: 0 40px 18px 0; }
:root.sin-gap .aval img { margin-right: 14px; }
:root.sin-gap .marcas li { margin: 15px 26px; }