/* ═════════════════════════════════════════════════════════════════
   Think² — Landing (23-sep-2026).

   Reglas del director, todas del mismo día:
   · Página NEGRA, títulos y enfoques BLANCOS. NADA de morado en
     títulos, rótulos ni iconos.
   · El color vive en dos sitios: la línea de progreso de arriba
     (se queda) y las palabras grandes difuminadas, con TONOS DE
     AMANECER como los del logo — naranjas, ámbar, azules cielo.
   · Sin cursor propio (el círculo con punto se quitó).
   · Los mockups del producto son la app DE VERDAD: viven en
     iframes (/landing-app.html) que cargan el style.css real;
     aquí solo se les pone el marco.
   · Todo movimiento respeta prefers-reduced-motion, y nada pesado
     corre fuera de pantalla.
   ═════════════════════════════════════════════════════════════════ */

:root {
  --fondo: #000;
  --panel: #0d0d0d;
  --panel-2: #171717;
  --borde: rgba(255, 255, 255, .08);
  --texto: #f3f3f3;
  --tenue: #9d9d9d;
  --apagado: #6e6e6e;
  /* La paleta ORIGINAL de la plataforma (el director la quiere así): el gradiente de la
     marca azul→violeta→rosa→ámbar y el acento violeta, como en la app. */
  --acento: #7c5cff;
  --verde: #3dbd8a;
  --gradiente: linear-gradient(100deg, #5b8def, #7c5cff 38%, #ff5da2 72%, #ffb454);
  --ease: cubic-bezier(.22, .61, .21, 1);
  --contenedor: 1120px;
  --radio: 18px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--fondo);
  color: var(--texto);
  font: 400 16px/1.65 -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
[hidden] { display: none !important; }
::selection { background: rgba(124, 92, 255, .35); }
img { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.contenedor { max-width: var(--contenedor); margin: 0 auto; padding: 0 24px; }
section[id] { scroll-margin-top: 72px; }
/* “Ver cómo funciona” deja este título justo bajo la cabecera (captura del director, 24-sep-2026) */
#pelicula .titulo-seccion { scroll-margin-top: 124px; }

/* ─── La línea de progreso de arriba (el director la quiere, con sus colores) ─── */
.barra-scroll {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  background: var(--gradiente); transform-origin: 0 50%; transform: scaleX(0);
  z-index: 120; pointer-events: none;
}

/* ─── Aviso de idioma ─── */
.idioma-toast {
  position: fixed; z-index: 200; left: 50%; bottom: 28px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px;
  background: rgba(25, 25, 25, .92); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--borde); border-radius: 999px; padding: 10px 12px 10px 20px;
  font-size: 14px; animation: toast-entra .5s var(--ease) backwards;
  max-width: calc(100vw - 32px);
}
@keyframes toast-entra { from { opacity: 0; transform: translate(-50%, 16px); } }
.idioma-toast > button:last-child { color: var(--tenue); font-size: 20px; line-height: 1; padding: 0 6px; }

/* ─── Cabecera (con el logo real) ─── */
.cabecera {
  position: fixed; inset: 0 0 auto; z-index: 100;
  display: flex; align-items: center; gap: 26px;
  padding: 0 max(24px, calc((100vw - var(--contenedor)) / 2 - 40px));
  height: 68px;
}
/* El vidrio del menú no termina en una línea recta: el cristal se estira un poco más
   abajo del contenido y se desvanece con una máscara (regla del director, 23-sep-2026). */
.cabecera::before {
  content: ''; position: absolute; inset: 0 0 -26px; z-index: -1; pointer-events: none;
  background: rgba(0, 0, 0, .66);
  backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3);
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 30px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 30px), transparent);
  opacity: 0; transition: opacity .35s;
}
.cabecera.pegada::before { opacity: 1; }
.marca, .marca-pie {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 19px; letter-spacing: .02em; text-decoration: none;
}
.marca img, .marca-pie img { border-radius: 8px; }
/* “BETA”, BAJO EL LOGO DE LA CABECERA, EN SU ESQUINA INFERIOR DERECHA (regla del director, 8-oct-2026, con la palabra
   escrita en Snell Roundhand). Va como imagen (landing-beta.png, la misma letra) para que se vea igual en cualquier aparato,
   y como máscara: la pinta el color del texto, así es blanca en oscuro y negra en claro, como las dos que mandó. */
.cabecera .marca, .tut-cabecera .marca { position: relative; }
.cabecera .marca::after, .tut-cabecera .marca::after {
  content: ''; position: absolute; right: -8px; top: calc(100% - 3px); width: 40px; height: 16px;
  background: currentColor; pointer-events: none;
  -webkit-mask: url(landing-beta.png) right top / contain no-repeat; mask: url(landing-beta.png) right top / contain no-repeat;
}
.cabecera-nav { display: flex; gap: 4px; margin: 0 auto; }
.cabecera-nav a {
  text-decoration: none; color: var(--tenue); font-size: 14px;
  padding: 8px 13px; border-radius: 999px; transition: color .2s, background-color .2s;
}
.cabecera-nav a:hover { color: var(--texto); background: rgba(255, 255, 255, .07); }
.cabecera-nav a.destacado { color: var(--texto); font-weight: 600; }
.cabecera-acciones { display: flex; align-items: center; gap: 10px; }

/* ─── Recursos: las subpáginas que no van en la landing, en un desplegable ─── */
.recursos-menu { position: relative; }
.recursos-boton {
  font-size: 14px; color: var(--tenue); padding: 8px 13px; border-radius: 999px;
  transition: color .2s, background-color .2s;
}
.recursos-boton:hover, .recursos-menu.abierto .recursos-boton { color: var(--texto); background: rgba(255, 255, 255, .07); }
.recursos-lista {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 180px;
  background: rgba(25, 25, 25, .95); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--borde); border-radius: 14px; padding: 6px;
  display: none; flex-direction: column;
}
.recursos-menu.abierto .recursos-lista { display: flex; animation: menu-entra .18s var(--ease) backwards; }
.recursos-lista a { text-decoration: none; text-align: left; font-size: 14px; padding: 9px 12px; border-radius: 9px; color: var(--tenue); }
.recursos-lista a:hover { background: rgba(255, 255, 255, .08); color: var(--texto); }

/* ─── Selector de idioma ─── */
.idioma-menu { position: relative; }
.idioma-actual {
  font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--tenue);
  padding: 8px 12px; border-radius: 999px; transition: color .2s, background-color .2s;
}
.idioma-actual:hover, .idioma-menu.abierto .idioma-actual { color: var(--texto); background: rgba(255, 255, 255, .08); }
.idioma-lista {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 150px;
  background: rgba(25, 25, 25, .95); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--borde); border-radius: 14px; padding: 6px;
  display: none; flex-direction: column;
}
.idioma-menu.abierto .idioma-lista { display: flex; animation: menu-entra .18s var(--ease) backwards; }
@keyframes menu-entra { from { opacity: 0; transform: translateY(-6px); } }
.idioma-lista button {
  text-align: left; font-size: 14px; padding: 9px 12px; border-radius: 9px; color: var(--tenue);
}
.idioma-lista button:hover { background: rgba(255, 255, 255, .08); color: var(--texto); }
.idioma-lista button.elegido { color: var(--texto); font-weight: 600; }

/* ─── Botones ─── */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 999px; padding: 11px 22px; font-size: 15px; font-weight: 600;
  text-decoration: none; white-space: nowrap; transition: transform .25s var(--ease), background-color .2s, color .2s, border-color .2s;
}
.boton-primario { background: #fff; color: #000; }
.boton-primario:hover { background: #ebebeb; }
/* el borde sigue al tema: fijo en blanco era invisible sobre claro (24-sep-2026) */
.boton-borde { border: 1px solid color-mix(in srgb, var(--texto) 30%, transparent); color: var(--texto); }
.boton-borde:hover { border-color: color-mix(in srgb, var(--texto) 55%, transparent); }
.boton-fantasma { color: var(--tenue); }
.boton-fantasma:hover { color: var(--texto); }
.boton.mini { padding: 7px 14px; font-size: 13px; }
.boton.grande { padding: 15px 32px; font-size: 17px; }

/* ─── Tipos base ─── */
section { position: relative; }
/* ═══ LA PÁGINA EN 10 BLOQUES (regla del director, 24-sep-2026: “máximo 10, sin sacar
   contenido”) — títulos de sub-bloque y costuras de las fusiones. ═══ */
.titulo-sub { font-size: clamp(22px, 2.7vw, 31px); font-weight: 700; letter-spacing: -.02em; margin-bottom: 14px; }
.como-nota { margin-top: 14px; color: var(--tenue); font-size: 13.5px; line-height: 1.55; text-align: center; }
.como-cierre { margin-top: 60px; display: flex; justify-content: center; }
.funciones .grupo-rejilla, .funciones .canal-rejilla { margin-top: 120px; }
.funciones .con-fusion { margin-top: 130px; }
.porque .quien-rejilla { margin-top: 120px; }
.precio .faq-caja { margin-top: 130px; }
.precio .acceso-caja { margin-top: 140px; text-align: center; }
/* El párrafo se centra de verdad: `.parrafo` mide 660 como mucho, y sin margen automático ese
   bloque se quedaba pegado a la izquierda aunque su texto fuera centrado (la regla `.acceso
   .parrafo` no lo alcanza: ahí `acceso` es un id, no una clase). */
.precio .acceso-caja .parrafo { margin-inline: auto; margin-bottom: 40px; }   /* aire antes del botón (regla del director, 7-oct-2026) */

.eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--acento); margin-bottom: 18px;
}
.eyebrow .nombre-marca { text-transform: none; letter-spacing: .04em; }
.titulo-seccion {
  font-size: clamp(30px, 4.6vw, 52px); line-height: 1.12; font-weight: 700;
  letter-spacing: -.022em; text-wrap: balance; margin-bottom: 20px;
}
.parrafo { color: var(--tenue); font-size: clamp(16px, 1.5vw, 18px); max-width: 660px; }
.grad {
  background: var(--gradiente); -webkit-background-clip: text; background-clip: text;
  color: transparent;
  /* el degradado solo pinta dentro de la caja del span y con line-height 1.02 el
     descendente de la g queda FUERA (transparente = cortado): la caja se estira
     hacia abajo y se compensa con el margen para no mover el interlineado */
  padding-bottom: .24em; margin-bottom: -.24em;
}

/* ─── Revelados por scroll ─── */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease) var(--d, 0s), transform .8s var(--ease) var(--d, 0s); }
  .reveal.visto { opacity: 1; transform: none; }
  .reveal-linea { opacity: 0; transform: translateY(14px); animation: sube .9s var(--ease) var(--d, 0s) forwards; }
  @keyframes sube { to { opacity: 1; transform: none; } }
  .linea-mask { display: block; overflow: clip; padding-bottom: .26em; margin-bottom: -.26em; }
  .linea { display: block; transform: translateY(110%); animation: linea-sube 1s var(--ease) var(--d, 0s) forwards; }
  @keyframes linea-sube { to { transform: none; } }
}

/* ═══ 1. HERO ═══ */
.hero {
  min-height: 100svh; display: grid; place-items: center; text-align: center;
  padding: 130px 24px 90px; overflow: clip;
}
#multitud { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-contenido { position: relative; max-width: 900px; }
.hero-titulo {
  font-size: clamp(44px, 8.4vw, 104px); line-height: 1.02; font-weight: 700;
  letter-spacing: -.032em; margin: 8px 0 26px;
}
.hero-sub { color: var(--tenue); font-size: clamp(17px, 1.9vw, 21px); max-width: 640px; margin: 0 auto 36px; }
.hero-sub strong { color: var(--texto); font-weight: 600; }
.hero-acciones span { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }


/* ═══ 2. EL PROBLEMA ═══ */
.valor { padding: 130px 0 110px; }
.cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 64px; }
.cifra {
  border: 1px solid var(--borde); border-radius: var(--radio); padding: 26px 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 70%);
}
.cifra-num { font-size: clamp(34px, 4vw, 52px); font-weight: 700; letter-spacing: -.03em; line-height: 1; display: block; white-space: nowrap; }
.cifra-num > span:last-child:not(.contador) { font-size: .55em; color: var(--tenue); font-weight: 600; }
.cifra p { color: var(--tenue); font-size: 14px; margin-top: 12px; }

/* ═══ LAS MAQUETAS DE LA APP (iframes con el style.css real) ═══ */
.maqueta-marco { max-width: 1000px; margin: 46px auto 0; padding: 0 24px; }
.maqueta-marco.ancho { max-width: 1200px; }
.maqueta {
  position: relative; border: 1px solid var(--borde); border-radius: 20px; overflow: clip;
  background: #101010;
}
.maqueta iframe { display: block; width: 100%; height: var(--alto, 620px); border: 0; background: #101010; }
.maqueta-nota { text-align: center; color: var(--apagado); font-size: 13px; margin-top: 16px; }
.demo .maqueta { box-shadow: 0 40px 120px -40px rgba(124, 92, 255, .22); }

/* ═══ 4. CÓMO FUNCIONA ═══ */
.como { padding: 128px 0; }
.como-rejilla { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.pasos { list-style: none; margin-top: 42px; display: grid; gap: 8px; }
.paso { position: relative; padding: 20px 20px 20px 66px; border-radius: var(--radio); transition: background-color .3s; }
.paso:hover { background: rgba(255, 255, 255, .035); }
.paso-num { position: absolute; left: 16px; top: 22px; font-size: 14px; font-weight: 700; color: var(--acento); letter-spacing: .05em; }
.paso h3 { font-size: 18px; margin-bottom: 5px; }
.paso p { color: var(--tenue); font-size: 14.5px; }
.como-tarea .maqueta { max-width: 560px; margin: 0 auto; }

/* ═══ La marcha (scroll-driven) ═══ */
.marcha { height: 170vh; }
.marcha-pista { position: sticky; top: 0; height: 100svh; overflow: clip; }
.marcha-figura { position: absolute; top: 50%; will-change: transform; }
.marcha-figura svg { display: block; }
.marcha-figura.con-demo { cursor: pointer; }
.marcha-figura.con-demo:hover svg { scale: 1.07; }
.marcha-figura svg { transition: scale .25s var(--ease); }
.marcha-figura .marcha-area {
  position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%);
  font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tenue); white-space: nowrap;
}
.marcha-rotulo {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: clamp(26px, 4.4vw, 54px); font-weight: 700; letter-spacing: -.02em;
  text-align: center; max-width: 90vw; text-wrap: balance;
  opacity: 0; transition: opacity .5s var(--ease);
  pointer-events: none;
}
.marcha-rotulo.visto { opacity: 1; }
.marcha.quieta { height: auto; padding: 80px 0; }
.marcha.quieta .marcha-pista { position: static; height: auto; }
.marcha.quieta .marcha-rotulo { position: static; transform: none; opacity: 1; margin: 0 auto; }
.marcha-quieta-fila { display: flex; justify-content: center; gap: 16px; margin-top: 30px; }
.marcha-quieta-fila svg { height: 44px; }

/* ═══ El video: la interfaz real en marcha, antes de la demo ═══ */
.pelicula { padding: 118px 0 28px; }
/* El velo del modo cine: todo se difumina menos el video (24-sep-2026) */
#peli-velo {
  position: fixed; inset: 0; z-index: 940;
  background: rgba(5, 5, 8, .5);
  -webkit-backdrop-filter: blur(16px) saturate(120%); backdrop-filter: blur(16px) saturate(120%);
  opacity: 0; transition: opacity .35s;
}
#peli-velo.visto { opacity: 1; }
html.peli-foco .peli-marco { position: relative; z-index: 950; }
/* La lista de espera, siempre por encima del cine (el velo del video va en 940 y su marco en 950). */
#velo-espera { z-index: 1200; }
/* LA HOJA DE LA MAQUETA DE CONTRATACIÓN, SOBRE LA PÁGINA VELADA (regla del director, 8-oct-2026, ver maqueta-foco.js):
   el mismo mecanismo del cine —un velo de página y el marco de la maqueta por encima—, con su propio elemento para no
   mezclar estados con el del video. */
#maqueta-velo {
  position: fixed; inset: 0; z-index: 940; touch-action: none;
  background: rgba(5, 5, 8, .5);
  -webkit-backdrop-filter: blur(16px) saturate(120%); backdrop-filter: blur(16px) saturate(120%);
  opacity: 0; transition: opacity .35s;
}
#maqueta-velo.visto { opacity: 1; }
html.maqueta-foco .maqueta-marco.en-foco { position: relative; z-index: 950; pointer-events: none; }
/* Solo la maqueta recibe el toque: el marco (a todo el ancho en el celular, y tan alto como su mosaico) dejaría sin velo
   que tocar; su aire se lo pasa al velo, que cierra. */
html.maqueta-foco .maqueta-marco.en-foco .maqueta { pointer-events: auto; }
html[data-tema="claro"] #maqueta-velo { background: rgba(250, 250, 252, .55); }
/* La CAPA de la hoja (maqueta-foco.js): otro iframe de la maqueta, transparente y a pantalla completa por encima del velo,
   para que la hoja del candidato salga en primer plano y no recortada por el recuadro de la maqueta. Oculta y sin toque
   hasta que se abre; su esquema de color va con el de su documento (vista-hoja en landing-app.html). */
.maqueta-capa {
  position: fixed; inset: 0; width: 100%; height: 100%; border: 0; z-index: 960;
  background: transparent; color-scheme: dark; visibility: hidden; pointer-events: none;
}
html[data-tema="claro"] .maqueta-capa { color-scheme: light; }
.maqueta-capa.abierta { visibility: visible; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { #maqueta-velo { transition: none; } }
html[data-tema="claro"] #peli-velo { background: rgba(250, 250, 252, .55); }
.peli-marco { margin-top: 46px; border-radius: 24px; overflow: clip; background: #0e0e0e; aspect-ratio: 16 / 9; }
/* En el celular el marco es más alto (4:5): la cámara del video se acerca a lo que se lee y necesita alto para un
   mensaje entero o una tarjeta (regla del director, 7-oct-2026). */
@media (max-width: 640px) { .peli-marco { aspect-ratio: 4 / 5; margin-top: 34px; } }
.peli-marco iframe { width: 100%; height: 100%; border: 0; display: block; }
html[data-tema="claro"] .peli-marco { background: #f5f5f5; }
/* EL ORGANIGRAMA DE LA APP, TAL CUAL (7-oct-2026). Sin marco propio: como en Administración, el árbol flota sobre el
   fondo y se desvanece en sus bordes. El esquema de color del iframe va con el de su página, o Chrome le pinta un fondo
   opaco. “En grande” es toda la ventana; con el dedo, una tapa deja bajar la página hasta que se toca. */
.org-marco { position: relative; margin-top: 30px; height: 640px; }
.org-marco iframe { display: block; width: 100%; height: 100%; border: 0; background: transparent; color-scheme: dark; }
html[data-tema="claro"] .org-marco iframe { color-scheme: light; }
html.org-grande { overflow: hidden; }
html.org-grande .org-marco { position: fixed; inset: 0; z-index: 4000; height: auto; margin: 0; }
.org-tapa {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
  padding: 0 16px; border: 0; background: transparent; cursor: pointer; font: inherit;
}
.org-tapa[hidden] { display: none; }
.org-tapa span {
  padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--texto);
  background: color-mix(in srgb, var(--panel-2) 82%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
@media (max-width: 640px) { .org-marco { height: 540px; margin-top: 24px; } }
/* EL RÓTULO DEBAJO DEL VIDEO, SOLO CON EL MARCO ESTRECHO (regla del director, 7-oct-2026): fuera del video y legible.
   Reserva su alto para que cambiar de rótulo no mueva la página. */
.peli-rotulo { display: none; }
.pelicula.rotulo-fuera .peli-rotulo {
  display: block; min-height: 74px; margin-top: 18px; padding: 0 4px;
  opacity: 0; translate: 0 8px; transition: opacity .3s ease, translate .3s ease;
}
.pelicula.rotulo-fuera .peli-rotulo.visto { opacity: 1; translate: 0 0; }
.peli-rotulo b { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--tenue); }
.peli-rotulo b i { width: 7px; height: 7px; border-radius: 50%; background: #7c5cff; flex: none; }
.peli-rotulo-texto { display: block; margin-top: 6px; font-size: 21px; font-weight: 650; letter-spacing: -.015em; line-height: 1.2; color: var(--texto); }
html.peli-foco .peli-rotulo { position: relative; z-index: 950; }

/* ═══ Palabras gigantes: se encienden con tonos de AMANECER ═══ */
.gigantes { padding: 40px 0 70px; overflow: clip; }
.gigante {
  font-size: clamp(64px, 13vw, 190px); font-weight: 700; letter-spacing: -.045em; line-height: 1.04;
  text-align: center; color: rgba(255, 255, 255, .07);
  transition: color .5s var(--ease), transform .7s var(--ease);
  transform: translateY(30px);
}
.gigante.visto { transform: none; }
.gigante.encendida { color: var(--texto); }
.gigante:nth-child(2).encendida {
  background: var(--gradiente); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ═══ 5. FUNCIONES (bento) ═══ */
.funciones { padding: 122px 0 136px; }
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 52px; }
.bento-celda {
  position: relative; border: 1px solid var(--borde); border-radius: 20px; padding: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), transparent 60%);
  overflow: clip; display: flex; flex-direction: column;
  transition: border-color .3s, transform .4s var(--ease);
}
.bento-celda:hover { border-color: rgba(255, 255, 255, .18); transform: translateY(-3px); }
.bento-celda h3 { font-size: 17.5px; margin-top: auto; padding-top: 16px; }
.bento-celda > p { color: var(--tenue); font-size: 14px; margin-top: 6px; }

/* escena: sinapsis (canvas) */
.escena-sinapsis { width: 100%; height: 150px; border-radius: 12px; }
/* LA MEMORIA DE VERDAD, EN VIDEO (regla del director, 7-oct-2026: “en donde salen los mapas quiero que los reemplaces
   por estos videos respectivamente, videos sin audio”): dos grabaciones del mapa de Sinapsis del producto, una por
   tema —la oscura con el tema oscuro, la clara con el claro—, que viven en /medios (la publicación “medios”, no el
   repo). Sin video —en local, o si no carga— se queda el lienzo de antes. El video se FUNDE con la tarjeta por
   mezcla, no por máscara: en oscuro, “screen” vuelve transparente su negro y deja los puntos; en claro, “multiply”
   vuelve transparente su blanco. Así no hay rectángulo y el mapa llena la caja entera (regla del director,
   7-oct-2026: “que se vea más grande y centrado”; los videos van recortados al área que el mapa recorre, medida
   cuadro a cuadro, y centrados en ella). */
.escena-sinapsis-video { display: block; width: 100%; height: 150px; object-fit: cover; object-position: center; mix-blend-mode: screen; }
html[data-tema="claro"] .escena-sinapsis-video { mix-blend-mode: multiply; }
.bento-celda.con-video .escena-sinapsis-video { display: block; }
.bento-celda.con-video .escena-sinapsis { display: none; }

/* escena: la máquina (el escritorio del Mac de la app) */
.escena-maquina { min-height: 150px; display: grid; place-items: center; }
.em-escritorio {
  position: relative; width: 100%; min-height: 150px; border-radius: 12px; overflow: clip;
  display: grid; place-items: center; border: 1px solid var(--borde);
}
.em-escritorio > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 46%; transform: scale(1.18); }
.em-ventana {
  position: relative; width: min(230px, 88%); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px; padding: 10px 12px;
  background: rgba(14, 14, 14, .88);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .45);
}
.em-b { display: block; width: 8px; height: 8px; border-radius: 50%; background: #ff5f57; margin-bottom: 8px; }
.em-url {
  display: flex; align-items: center; gap: 7px; border-radius: 999px; background: rgba(255, 255, 255, .06);
  font-size: 11px; color: var(--tenue); padding: 5px 10px; margin-bottom: 10px;
}
.em-url i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #3dbd8a; }
.em-lineas s { display: block; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .08); margin: 7px 0; }
.em-lineas s:nth-child(2) { width: 82%; }
.em-lineas s:nth-child(3) { width: 58%; }
@media (prefers-reduced-motion: no-preference) {
  .em-lineas s { animation: em-carga 3.2s ease-in-out infinite; }
  .em-lineas s:nth-child(2) { animation-delay: .25s; }
  .em-lineas s:nth-child(3) { animation-delay: .5s; }
  @keyframes em-carga { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
  .em-url i { animation: parpadeo 1.6s steps(2) infinite; }
  @keyframes parpadeo { 50% { opacity: 0; } }
}

/* escena: canales */
.escena-canales { min-height: 150px; padding: 8px 4px; }
.ec-fila { display: flex; align-items: center; margin-bottom: 12px; }
.ec-fila img { border-radius: 50%; border: 2px solid var(--panel); margin-right: -7px; object-fit: cover; width: 22px; height: 22px; }
.ec-fila b { font-size: 13px; margin-left: 15px; }
.ec-burbuja {
  width: fit-content; max-width: 100%; font-size: 12.5px; color: var(--tenue);
  background: var(--panel-2); border-radius: 14px; border-bottom-left-radius: 5px;
  padding: 7px 12px; margin: 7px 0;
}
@media (prefers-reduced-motion: no-preference) {
  .ec-burbuja { opacity: 0; animation: ec-llega 6.4s var(--ease) infinite; }
  .ec-burbuja.dos { animation-delay: 1s; }
  @keyframes ec-llega {
    0% { opacity: 0; transform: translateY(8px); }
    10%, 88% { opacity: 1; transform: none; }
    95%, 100% { opacity: 0; }
  }
}

/* escena: llamada (bento chico; la grande vive en “Lo que viene”) */
.escena-llamada { min-height: 150px; display: grid; place-items: center; text-align: center; position: relative; }
.el-onda { position: absolute; width: 74px; height: 74px; border-radius: 50%; border: 1px solid rgba(124, 92, 255, .55); }
@media (prefers-reduced-motion: no-preference) {
  .el-onda { animation: onda 2.6s var(--ease) infinite; }
  .el-onda.dos { animation-delay: 1.3s; }
  @keyframes onda { from { transform: scale(.5); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
}
.escena-llamada p { position: relative; }
.escena-llamada b { display: block; font-size: 13.5px; }
.escena-llamada span { font-size: 12px; color: var(--tenue); }

/* ═══ 6. GRUPO POR PROYECTO ═══ */
.grupo { padding: 120px 0; }
.grupo-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
/* La tarjeta mide lo que mide la escena (430 px, `.mq-mensajes.solo-conv` en landing-app.html) y
   ni un píxel más: con 470 sobraban 40 a la derecha y se veía un corte vertical, el fondo de la
   tarjeta asomando al lado del chat (regla del director, 24-sep-2026: “en el lado derecho hay un
   corte raro”). La escena no se estira: se escala hasta 1 y ahí se queda. */
.grupo-maqueta .maqueta { max-width: 430px; margin: 0 auto; }

/* ═══ 7. CONTRATACIÓN ═══ */
.contrata { padding: 118px 0; }

/* ═══ POR QUÉ THINK² (comparación) ═══ */
.porque { padding: 122px 0 136px; }
/* La tabla volvió (regla del director, 7-oct-2026: “la tabla comparativa no era la que debía cambiar a checks, era la
   parte de seguridad”): la lista de chequeo y el óvalo de sellos viven en “Poder, con control”. */
.pq-tabla { margin-top: 50px; border: 1px solid var(--borde); border-radius: 20px; overflow: clip; }
.pq-cab, .pq-fila { display: grid; grid-template-columns: .8fr 1fr 1fr; }
.pq-cab { border-bottom: 1px solid var(--borde); background: rgba(255, 255, 255, .025); }
.pq-cab > span { padding: 16px 22px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.pq-cab .pq-chat { color: var(--apagado); }
/* El nombre se escribe como es, “Think²”: solo la T mayúscula (regla del director, 7-oct-2026). */
.pq-cab .pq-think { color: var(--texto); display: inline-flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font-size: 15px; }
.pq-cab .pq-think img { width: 18px; height: 18px; border-radius: 5px; }
.pq-fila { border-bottom: 1px solid var(--borde); }
.pq-fila:last-child { border-bottom: 0; }
.pq-fila > span { padding: 17px 22px; font-size: 14.5px; }
.pq-fila .pq-tema { font-weight: 600; }
.pq-fila .pq-chat { color: var(--apagado); }
.pq-fila .pq-think { color: var(--texto); position: relative; background: rgba(255, 255, 255, .03); }

/* ═══ LO QUE VIENE: la llamada (iPhone) y la oficina ═══ */
.proximo { padding: 120px 0; }
.prox-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 52px; }
.prox-carta {
  position: relative; border: 1px solid var(--borde); border-radius: 24px; overflow: clip;
  padding: 30px 28px 28px; min-height: 560px; display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), transparent 55%);
}
.prox-sello {
  position: absolute; top: 20px; right: 20px; z-index: 3;
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; padding: 6px 12px;
  background: rgba(0, 0, 0, .45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.prox-carta h3 { font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -.015em; }
.prox-carta > p { color: var(--tenue); font-size: 15px; margin-top: 8px; max-width: 420px; }
.prox-visual { flex: 1; display: grid; place-items: center; padding-top: 26px; }

/* El iPhone de la llamada: hiperrealista en CSS, y se ladea con el mouse */
.iphone {
  position: relative; width: 264px; height: 540px; border-radius: 46px;
  background: #0b0b0b;
  border: 2px solid #2e2e2e;
  box-shadow: 0 0 0 3px #111111, 0 34px 90px -20px rgba(0, 0, 0, .8), inset 0 0 14px rgba(255, 255, 255, .05);
  transform-style: preserve-3d; will-change: transform;
}
.iphone::before { /* filo metálico */
  content: ''; position: absolute; inset: -2px; border-radius: 46px; pointer-events: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, .35), transparent 18%, transparent 82%, rgba(255, 255, 255, .18));
  -webkit-mask: linear-gradient(#000, #000) content-box exclude, linear-gradient(#000, #000);
  mask: linear-gradient(#000, #000) content-box exclude, linear-gradient(#000, #000);
  padding: 2px;
}
.iphone-pantalla {
  position: absolute; inset: 8px; border-radius: 38px; overflow: clip;
  background:
    radial-gradient(120% 90% at 80% -10%, rgba(91, 141, 239, .34), transparent 55%),
    radial-gradient(130% 100% at 15% 110%, rgba(124, 92, 255, .32), transparent 60%),
    #101010;
  display: flex; flex-direction: column; align-items: center;
  color: #fff; text-align: center;
}
.iphone-isla {
  flex: none; width: 96px; height: 27px; border-radius: 999px; background: #000;
  margin-top: 10px; position: relative;
}
.iphone-isla::after { content: ''; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: #131313; }
.iphone-estado { font-size: 12.5px; color: rgba(255, 255, 255, .75); margin-top: 22px; letter-spacing: .02em; }
.iphone-nombre { font-size: 27px; font-weight: 600; letter-spacing: -.01em; margin-top: 3px; }
.iphone-timer { font-size: 13.5px; color: rgba(255, 255, 255, .7); margin-top: 4px; font-variant-numeric: tabular-nums; }
.iphone-cara { margin-top: 26px; position: relative; }
.iphone-cara img { width: 108px; height: 108px; border-radius: 50%; object-fit: cover; }
.iphone-cara::after {
  content: ''; position: absolute; inset: -8px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .28);
}
@media (prefers-reduced-motion: no-preference) {
  .iphone-cara::after { animation: aro-late 2.4s var(--ease) infinite; }
  @keyframes aro-late { 0% { transform: scale(.94); opacity: .9; } 70% { transform: scale(1.14); opacity: 0; } 100% { opacity: 0; } }
}
.iphone-onda { display: flex; align-items: flex-end; gap: 4px; height: 30px; margin-top: 24px; }
.iphone-onda i { width: 4px; border-radius: 3px; background: rgba(255, 255, 255, .85); height: 8px; }
@media (prefers-reduced-motion: no-preference) {
  .iphone-onda i { animation: voz 1.1s ease-in-out infinite; }
  .iphone-onda i:nth-child(2) { animation-delay: .1s; } .iphone-onda i:nth-child(3) { animation-delay: .22s; }
  .iphone-onda i:nth-child(4) { animation-delay: .34s; } .iphone-onda i:nth-child(5) { animation-delay: .46s; }
  .iphone-onda i:nth-child(6) { animation-delay: .58s; } .iphone-onda i:nth-child(7) { animation-delay: .7s; }
  @keyframes voz { 0%, 100% { height: 7px; opacity: .7; } 50% { height: 26px; opacity: 1; } }
}
.iphone-botones { display: flex; gap: 26px; margin-top: auto; margin-bottom: 18px; }
.iphone-botones .ib {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.iphone-botones .ib svg { width: 24px; height: 24px; }
.iphone-botones .ib span { display: none; }
.iphone-colgar {
  width: 62px; height: 62px; border-radius: 50%; background: #ff3b30; display: grid; place-items: center;
  margin: 0 auto 26px;
  box-shadow: 0 10px 30px rgba(255, 59, 48, .4);
}
.iphone-colgar svg { width: 28px; height: 28px; color: #fff; transform: rotate(135deg); }

/* La oficina */
.prox-oficina { position: relative; width: 100%; height: 100%; min-height: 330px; border-radius: 18px; overflow: clip; }
.prox-oficina img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.prox-oficina::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .55));
}
@media (prefers-reduced-motion: no-preference) {
  .prox-oficina img { animation: oficina-pasea 26s ease-in-out infinite alternate; transform-origin: center; }
  @keyframes oficina-pasea { from { transform: scale(1.04) translateX(-1.5%); } to { transform: scale(1.12) translateX(1.5%); } }
}

/* ═══ MISIÓN ═══ */
.mision { padding: 150px 0; }
.mision-caja { max-width: 820px; }
.mision p.mi-parrafo {
  color: var(--tenue); font-size: clamp(17px, 2vw, 21px); line-height: 1.7; margin-top: 26px;
}
.mision p.mi-parrafo strong { color: var(--texto); font-weight: 600; }
.mision-cita {
  margin: 90px auto 0; text-align: center; max-width: 900px;
  font-size: clamp(30px, 5vw, 58px); font-weight: 700; letter-spacing: -.025em; line-height: 1.15;
  text-wrap: balance;
}
.mision-cita em { font-style: normal; background: var(--gradiente); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ═══ CONFIANZA (logos monocromos, sin fondo) ═══ */
.confianza { padding: 100px 0; text-align: center; }
.conf-logos {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 18px 54px; margin: 50px auto 0; max-width: 980px;
}
.conf-logo {
  color: rgba(255, 255, 255, .42); white-space: nowrap; user-select: none;
  transition: color .3s;
}
.conf-logo:hover { color: rgba(255, 255, 255, .9); }
.conf-regiones { color: var(--apagado); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; margin-top: 44px; }

/* ═══ 9. SEGURIDAD + estándares ═══ */
.gobernanza { padding: 118px 0; }
/* “PODER, CON CONTROL” ES UNA LISTA DE CHEQUEO CON LOS SELLOS EN ÓVALO AL LADO (regla del director, 7-oct-2026: “la tabla
   comparativa no era la que debía cambiar a checks, era la parte de seguridad y al lado el círculo de las
   certificaciones”; el estilo, el de los pasos hechos de la app: un visto verde fino, el título claro, sin cuadros ni
   bordes). Cada fila es un <details>: tocar el título despliega lo que garantiza. */
.seg-rejilla { margin-top: 50px; }
.chk-lista { max-width: 640px; display: grid; gap: 2px; align-content: start; }
/* EN LA COMPUTADORA, AL LADO, LOS SELLOS EN ÓVALO (regla del director, 7-oct-2026: “en la web de compu, como quedará
   espacio, quiero esto al lado, donde las certificaciones hagan un óvalo como está la animación de las herramientas,
   pero sin moverse”). Los mismos sellos de “Construido según los estándares que importan”, puestos sobre un anillo
   visto de lado como el disco de las apps: el de delante más grande y nítido, los de atrás más pequeños y tenues, y
   quietos. Con el óvalo a la vista, el bloque de sellos de debajo no se repite; en el celular no hay sitio al lado
   y los sellos siguen donde estaban. */
.seg-sellos { display: none; }
@media (min-width: 1000px) {
  .seg-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; }
  .seg-sellos { display: block; position: relative; height: 460px; }
  .estandares { display: none; }
}
.seg-anillo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.seg-anillo ellipse { fill: none; stroke: var(--borde); stroke-width: 1; stroke-dasharray: 2 6; }
/* El rótulo del centro va entre los sellos de atrás y los de los lados: más abajo rozaba a los laterales. */
.seg-sellos-centro { position: absolute; left: 50%; top: 41%; translate: -50% -50%; width: 200px; text-align: center; }
.seg-sellos-centro b { display: block; font-size: 17px; font-weight: 650; line-height: 1.3; letter-spacing: -.01em; color: var(--texto); }
.seg-sellos-centro span { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.4; color: var(--apagado); }
.seg-sello {
  position: absolute; left: 50%; top: 50%; width: 184px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 12px 13px; border-radius: 16px; text-align: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025));
}
.seg-sello svg { width: 26px; height: 26px; color: var(--texto); opacity: .85; }
.seg-sello b { display: block; font-size: 14px; line-height: 1.25; }
.seg-sello span { display: block; font-size: 11.5px; line-height: 1.3; color: var(--tenue); margin-top: 2px; }
html[data-tema="claro"] .seg-sello { background: linear-gradient(180deg, rgba(16, 16, 16, .05), rgba(16, 16, 16, .02)); }
.chk-item summary {
  list-style: none; display: flex; align-items: center; gap: 14px; padding: 9px 0; cursor: pointer;
  font-size: 19px; font-weight: 500; color: var(--texto); -webkit-tap-highlight-color: transparent;
}
.chk-item summary::-webkit-details-marker { display: none; }
.chk-visto { flex: none; width: 20px; height: 20px; color: #30d158; }
.chk-visto path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.chk-tit { min-width: 0; }
.chk-flecha { flex: none; width: 14px; height: 14px; color: var(--apagado); transition: rotate .25s var(--ease), color .2s; }
.chk-flecha path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chk-item summary:hover .chk-flecha { color: var(--tenue); }
.chk-item[open] .chk-flecha { rotate: 90deg; }
.chk-desc { margin: 0 0 12px 34px; font-size: 16px; line-height: 1.5; color: var(--tenue); max-width: 520px; }
.chk-item[open] .chk-desc { animation: chk-abre .3s var(--ease); }
@keyframes chk-abre { from { opacity: 0; translate: 0 -4px; } }
.chk-item summary:focus-visible { outline: 2px solid var(--acento); outline-offset: 4px; border-radius: 8px; }
html[data-tema="claro"] .chk-visto { color: #1f9d45; }
.estandares { margin-top: 80px; text-align: center; }
.estandares h3 { font-size: clamp(20px, 2.4vw, 26px); letter-spacing: -.015em; }
.estandares > p { color: var(--tenue); font-size: 15px; margin-top: 8px; }
.est-fila { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 34px; }
/* Cinco sellos no caben en el contenedor: la fila sale por igual a los dos lados,
   hasta 1.260 px y sin pasar nunca del margen de la ventana (en un teléfono, 0). */
.estandares .est-fila { margin-inline: calc((min(100vw - 48px, 1260px) - 100%) / -2); }
.est-sello {
  display: flex; align-items: center; gap: 13px; text-align: left;
  border: 1px solid var(--borde); border-radius: 16px; padding: 15px 20px; min-width: 218px;
}
.est-sello svg { width: 30px; height: 30px; flex: none; color: var(--texto); opacity: .85; }
.est-sello b { display: block; font-size: 14.5px; }
.est-sello span { display: block; font-size: 12px; color: var(--tenue); }
.est-nota { color: var(--apagado); font-size: 12.5px; max-width: 640px; margin: 22px auto 0; }

/* ═══ PRECIO ═══ */
.precio { padding: 122px 0 150px; }
.precio-caja {
  max-width: 760px; margin: 50px auto 0; border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 26px; padding: 44px 42px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), transparent 70%);
  display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center;
}
.precio-cifra { text-align: center; }
.precio-cifra .p-num { font-size: 92px; font-weight: 700; letter-spacing: -.045em; line-height: 1; display: block; }
.precio-cifra .p-num small { font-size: 26px; font-weight: 600; color: var(--tenue); vertical-align: 26px; margin-right: 4px; letter-spacing: 0; }
.precio-cifra .p-unidad { display: block; color: var(--tenue); font-size: 14px; margin-top: 8px; }
.precio-cifra .p-antes { display: block; color: var(--tenue); font-size: 17px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; margin-bottom: 10px; }
.precio-cifra .p-antes s { text-decoration-thickness: 2px; text-decoration-color: currentColor; }
.precio-cifra .p-oferta {
  display: inline-block; margin-top: 14px; padding: 6px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  line-height: 1.35; max-width: 100%; text-wrap: balance; color: #30d158; background: rgba(48, 209, 88, .12);
}
html[data-tema="claro"] .precio-cifra .p-oferta { color: #1f8a3c; background: rgba(48, 209, 88, .14); }
@media (max-width: 480px) { .precio-cifra .p-oferta { font-size: 12.5px; padding: 6px 12px; border-radius: 14px; } }
.solo-lector { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.precio-lista { list-style: none; display: grid; gap: 12px; }
.precio-lista li { position: relative; padding-left: 28px; font-size: 15px; color: var(--texto); }
.precio-lista li::before {
  content: ''; position: absolute; left: 0; top: 7px; width: 13px; height: 8px;
  /* blancos en la tarjeta oscura (regla del director, 24-sep-2026); currentColor sigue al
     texto, así en tema claro no desaparecen */
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); border-radius: 1px;
}
/* EL ACUERDO (regla del director, 8-oct-2026: “que se sienta más específico, como un acuerdo de SLA”): renglones de
   término y compromiso, con sus cifras, en lugar de cuatro viñetas. */
.precio-caja:has(.precio-acuerdo) { max-width: 900px; align-items: start; }
.precio-acuerdo { min-width: 0; }
.acuerdo-titulo { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--apagado); }
.acuerdo-lista { margin: 0; display: grid; }
.acuerdo-lista > div { display: grid; grid-template-columns: minmax(150px, .8fr) 1.7fr; gap: 14px; padding: 9px 0; border-top: 1px solid var(--borde); align-items: baseline; }
.acuerdo-lista > div:first-child { border-top: 0; padding-top: 0; }
.acuerdo-lista dt { font-size: 13.5px; font-weight: 600; color: var(--tenue); }
.acuerdo-lista dd { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--texto); }
.acuerdo-nota { margin: 14px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--apagado); }
.precio-nota { max-width: 680px; margin: 22px auto 0; text-align: center; font-size: 13.5px; line-height: 1.55; color: var(--tenue); }
.precio-cta { text-align: center; margin-top: 30px; }

/* ═══ 8. PARA QUIÉN ═══ */
.quien { padding: 90px 0; }
.quien-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.quien-carta {
  border: 1px solid var(--borde); border-radius: 22px; padding: 34px 30px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 70%);
}
.quien-icono {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  margin-bottom: 16px; color: var(--tono);
  background: color-mix(in srgb, var(--tono) 12%, transparent);
}
.quien-icono svg { width: 24px; height: 24px; }
.quien-carta h3 { font-size: clamp(21px, 2.2vw, 26px); letter-spacing: -.015em; margin-bottom: 12px; }
.quien-carta > p:not(.eyebrow) { color: var(--tenue); font-size: 15px; margin-bottom: 20px; }
.quien-carta ul { list-style: none; display: grid; gap: 10px; }
.quien-carta li { position: relative; padding-left: 26px; font-size: 14.5px; }
.quien-carta li::before {
  content: ''; position: absolute; left: 0; top: 7px; width: 13px; height: 8px;
  border-left: 2px solid var(--verde); border-bottom: 2px solid var(--verde);
  transform: rotate(-45deg); border-radius: 1px;
}

/* ═══ 10. FAQ ═══ */
.faq { padding: 90px 0 110px; }
.faq-caja { max-width: 780px; }
.faq-lista { margin-top: 34px; border-top: 1px solid var(--borde); }
.faq-item { border-bottom: 1px solid var(--borde); }
.faq-preg {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  text-align: left; font-size: 16.5px; font-weight: 600; padding: 21px 4px;
  transition: color .2s;
}
.faq-preg:hover { color: var(--texto); }   /* era #fff: en tema claro la pregunta se volvía blanca sobre blanco (7-oct-2026) */
.faq-preg { color: var(--texto); }
.faq-preg .faq-mas { flex: none; width: 24px; height: 24px; position: relative; opacity: .6; transition: transform .35s var(--ease), opacity .2s; }
.faq-preg .faq-mas::before, .faq-preg .faq-mas::after {
  content: ''; position: absolute; background: currentColor; border-radius: 2px;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.faq-preg .faq-mas::before { width: 14px; height: 2px; }
.faq-preg .faq-mas::after { width: 2px; height: 14px; }
.faq-item.abierta .faq-mas { transform: rotate(45deg); opacity: 1; }
.faq-resp { overflow: clip; height: 0; transition: height .4s var(--ease); }
.faq-resp p { color: var(--tenue); font-size: 15px; padding: 0 40px 22px 4px; }

/* ═══ 11. CTA FINAL ═══ */
.acceso { padding: 140px 0 120px; text-align: center; overflow: clip; }
.acceso-titulo { font-size: clamp(38px, 6.4vw, 76px); line-height: 1.06; font-weight: 700; letter-spacing: -.03em; margin-bottom: 22px; }
.acceso .parrafo { margin: 0 auto 34px; }
.acceso-nota { color: var(--apagado); font-size: 13.5px; margin-top: 18px; }

/* ═══ EL CIERRE: el emblema en puro trazo, gigante, que sigue al mouse ═══ */
.pie { position: relative; padding: 0 0 72px; overflow: clip; }
/* La FRANJA del disco (regla del director, 24-sep-2026, con la referencia de x.ai y su “debe
   quedar al revés”): el emblema gira con el centro clavado en el borde BAJO de la franja — la
   línea lo corta a la mitad y solo asoma el arco de arriba. El recorte lo hace el overflow de
   la propia franja: sin máscaras ni z-index, no hay forma de que se entierre o se desborde. */
.pie-banda {
  position: relative; height: min(520px, 56vw); overflow: clip;
  border-bottom: 1px solid var(--borde); margin-bottom: 56px;
}
.pie-dibujo {
  position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%);
  width: min(1440px, 155vw); aspect-ratio: 1; pointer-events: none;
  color: rgba(255, 255, 255, .12);
  /* El trazo se DISUELVE muy sutil al acercarse a la línea (regla del director, 24-sep-2026,
     con la referencia): lleno arriba, apagándose en el último tramo del arco. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 26%, transparent 49%);
  mask-image: linear-gradient(180deg, #000 0%, #000 26%, transparent 49%);
}
.pie-dibujo svg { width: 100%; height: 100%; display: block; }
@media (prefers-reduced-motion: no-preference) {
  .pie-dibujo svg { animation: pie-gira 130s linear infinite; will-change: transform; }
  @keyframes pie-gira { to { rotate: 1turn; } }
}
.pie .contenedor { position: relative; }
/* La proporción del bloque es la del ejemplo: alto y con aire (min-height), y las dos
   líneas bajo el logo van juntas. */
.pie-rejilla { display: grid; grid-template-columns: 1.35fr repeat(5, 1fr); gap: 34px; min-height: 440px; }
.pie-marca p + p { margin-top: 4px; }
/* La marca como en la referencia: propiedad bajo el logo, el sello abajo y un divisor vertical */
.pie-marca { display: flex; flex-direction: column; border-right: 1px solid var(--borde); padding-right: 38px; margin-right: 6px; }
.pie-sello {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  border: 1px solid var(--borde); border-radius: 999px; padding: 7px 14px;
  font-size: 11.5px; color: var(--apagado); cursor: pointer;
  transition: color .2s, border-color .2s;
}
.pie-sello:hover { color: var(--texto); border-color: rgba(128, 128, 140, .5); }
.pie-sello svg { width: 12px; height: auto; fill: currentColor; flex: none; }
.pie-col p:not(:first-child) { margin-top: 26px; }
/* Letra pequeña y a lo largo (regla del director, 24-sep-2026): sin max-width no se apila */
.pie-marca p { color: var(--tenue); font-size: 12px; margin-top: 14px; white-space: nowrap; }
/* Aire mínimo entre la línea de la empresa y el sello (regla del director, 7-oct-2026): el margen automático del sello
   solo separa cuando sobra alto; en una columna justa quedaban pegados. */
.pie-marca > p:last-of-type { margin-bottom: 20px; }
.pie-col p { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--apagado); margin-bottom: 14px; }
.pie-col a { display: block; color: var(--tenue); text-decoration: none; font-size: 14px; padding: 5px 0; transition: color .2s; }
.pie-col a:hover { color: var(--texto); }
.pie-idiomas { display: grid; gap: 2px; justify-items: start; }
.pie-idiomas button { color: var(--tenue); font-size: 14px; padding: 5px 0; transition: color .2s; }
.pie-idiomas button:hover { color: var(--texto); }
.pie-idiomas button.elegido { color: var(--texto); font-weight: 600; }

/* ═══ POPUP de la lista de espera (como los de la app) ═══ */
.velo {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 24px;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  animation: velo-entra .3s var(--ease) backwards;
}
@keyframes velo-entra { from { opacity: 0; } }
.velo.saliendo { animation: velo-sale .25s var(--ease) forwards; }
@keyframes velo-sale { to { opacity: 0; } }
.popup {
  position: relative; width: min(430px, 100%); border-radius: 24px; padding: 34px 30px 28px;
  background: rgba(16, 16, 16, .92);
  overflow: clip; text-align: left;
  animation: pop-entra .4s var(--ease) backwards;
}
@keyframes pop-entra { from { opacity: 0; transform: translateY(22px) scale(.96); } }
.velo.saliendo .popup { animation: pop-sale .25s var(--ease) forwards; }
@keyframes pop-sale { to { opacity: 0; transform: translateY(14px) scale(.97); } }
.popup h3 { font-size: 23px; letter-spacing: -.015em; margin-bottom: 8px; position: relative; }
.popup > p { color: var(--tenue); font-size: 14.5px; margin-bottom: 22px; position: relative; max-width: 330px; }
.popup form { display: grid; gap: 10px; position: relative; }
/* La figura del logo asomada en la esquina del popup (al director le gusta) */
.popup-figura { position: absolute; right: -34px; top: -22px; height: 190px; width: auto; opacity: .1; pointer-events: none; }
.popup-figura use { fill: #fff; }
.popup input, .popup textarea {
  background: var(--panel-2); border: 1px solid transparent; border-radius: 12px;
  color: var(--texto); font: inherit; font-size: 15px; padding: 13px 16px; outline: none;
  transition: border-color .2s;
}
.popup input:focus, .popup textarea:focus { border-color: rgba(255, 255, 255, .3); }
html[data-tema="claro"] .popup input:focus, html[data-tema="claro"] .popup textarea:focus { border-color: rgba(16, 16, 16, .25); }
.popup textarea { resize: vertical; min-height: 84px; max-height: 220px; line-height: 1.45; }
.popup input[hidden] { display: none; }
/* EL CELULAR CON SU PAÍS (8-oct-2026): una sola caja con la bandera y el indicativo a la izquierda. El select va
   transparente encima de lo que se ve, así lo abre la lista nativa (la rueda en el iPhone); el borde de foco es de la
   caja entera. La bandera es el emoji del país: en un Apple, la de Apple. */
.popup .tel-campo {
  display: flex; align-items: stretch; background: var(--panel-2); border: 1px solid transparent; border-radius: 12px;
  transition: border-color .2s;
}
.popup .tel-campo:focus-within { border-color: rgba(255, 255, 255, .3); }
html[data-tema="claro"] .popup .tel-campo:focus-within { border-color: rgba(16, 16, 16, .25); }
.popup .tel-campo input { flex: 1; min-width: 0; background: transparent; border: 0; padding-left: 10px; }
.popup .tel-campo input:focus { border-color: transparent; }
.tel-pais { position: relative; display: flex; align-items: center; flex: none; padding: 0 0 0 14px; }
.tel-pais-ver { display: flex; align-items: center; gap: 6px; padding-right: 10px; border-right: 1px solid var(--borde); height: 24px; }
.tel-bandera { font-size: 20px; line-height: 1; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.tel-prefijo { font-size: 15px; color: var(--texto); font-variant-numeric: tabular-nums; }
.tel-pais-ver svg { width: 12px; height: 12px; color: var(--tenue); }
.tel-pais select {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;
  font-size: 16px; border: 0; appearance: none; -webkit-appearance: none;
}
/* LAS LISTAS DE LA ESPERA (14-oct-2026): tamaño y para qué. Misma caja que los campos de texto, con su flecha; mientras
   no se elige nada se ve tenue, como un texto de ayuda. */
.popup select.espera-lista {
  background: var(--panel-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%239d9d9d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center / 12px;
  border: 1px solid transparent; border-radius: 12px; color: var(--texto); font: inherit; font-size: 15px;
  padding: 13px 40px 13px 16px; outline: none; cursor: pointer; appearance: none; -webkit-appearance: none;
  width: 100%; min-width: 0; text-overflow: ellipsis;   /* una opción larga no ensancha el popup en un teléfono */
  transition: border-color .2s;
}
.popup select.espera-lista:invalid { color: var(--tenue); }
.popup select.espera-lista option { color: var(--texto); background: var(--panel-2); }
.popup select.espera-lista:focus { border-color: rgba(255, 255, 255, .3); }
html[data-tema="claro"] .popup select.espera-lista:focus { border-color: rgba(16, 16, 16, .25); }
/* Qué herramientas usa: pastillas como los chips de la demo; la elegida, rellena. */
.popup .espera-herr { display: flex; flex-wrap: wrap; gap: 6px; position: relative; }
.popup .espera-herr p { width: 100%; font-size: 13.5px; color: var(--tenue); margin: 4px 0 2px; }
.espera-chip { position: relative; cursor: pointer; }
.popup .espera-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; padding: 0; pointer-events: none; }
.espera-chip span {
  display: inline-block; border: 1px solid var(--borde); border-radius: 999px; padding: 7px 13px;
  font-size: 13.5px; font-weight: 600; color: var(--tenue); transition: color .2s, border-color .2s, background-color .2s;
}
.espera-chip:hover span { color: var(--texto); border-color: rgba(255, 255, 255, .3); }
html[data-tema="claro"] .espera-chip:hover span { border-color: rgba(16, 16, 16, .25); }
.espera-chip input:checked + span { color: #000; background: #fff; border-color: #fff; }
html[data-tema="claro"] .espera-chip input:checked + span { color: #fff; background: #101010; border-color: #101010; }
.espera-chip input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 2px; }
/* El cargo aparece al escribir la empresa: entra suave, sin empujar de golpe. */
@media (prefers-reduced-motion: no-preference) { .popup #espera-cargo-l:not([hidden]) { animation: pop-entra .3s var(--ease) backwards; } }
/* Con seis campos el popup puede no caber en un teléfono: se desplaza por dentro en vez de cortarse. */
.velo .popup { max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain; }
.popup form .boton { margin-top: 4px; }
/* EL GRACIAS DE LA LISTA (8-oct-2026): el cuadro se transforma, como el de los fallos en la app (style.css, #bicho-gracias):
   se va todo menos la ✕ y la figura, y entra el check verde que se dibuja solo con el agradecimiento. */
.popup.gracias > :not(.popup-cerrar):not(.popup-figura):not(.popup-gracias) { display: none; }
.popup-gracias { text-align: center; padding: 22px 6px 8px; position: relative; }
.popup-gracias[hidden] { display: none; }
.gracias-check { width: 56px; height: 56px; }
.gracias-aro { stroke: #30d158; stroke-width: 2.4; opacity: .45; }
.gracias-trazo { stroke: #30d158; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.gracias-titulo { font-size: 21px; font-weight: 700; letter-spacing: -.01em; margin: 16px 0 8px; }
.gracias-texto { color: var(--tenue); font-size: 14.5px; line-height: 1.55; max-width: 320px; margin: 0 auto; }
@media (prefers-reduced-motion: no-preference) {
  .popup.gracias .gracias-aro { stroke-dasharray: 145; stroke-dashoffset: 145; animation: gracias-aro .5s var(--ease) forwards; }
  .popup.gracias .gracias-trazo { stroke-dasharray: 36; stroke-dashoffset: 36; animation: gracias-trazo .32s var(--ease) .42s forwards; }
  .popup.gracias .gracias-titulo, .popup.gracias .gracias-texto { animation: pop-entra .4s var(--ease) .5s backwards; }
}
@keyframes gracias-aro { to { stroke-dashoffset: 0; } }
@keyframes gracias-trazo { to { stroke-dashoffset: 0; } }
.popup-cerrar {
  position: absolute; right: 14px; top: 12px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; font-size: 21px; color: var(--tenue);
  display: grid; place-items: center; transition: background-color .2s, color .2s;
}
.popup-cerrar:hover { background: rgba(255, 255, 255, .09); color: var(--texto); }
.popup-aviso { min-height: 20px; font-size: 13.5px; margin-top: 12px; position: relative; }
.popup-aviso.bien { color: #3dbd8a; }
.popup-aviso.mal { color: #ff7a7a; }
.popup-legal { font-size: 11.5px; line-height: 1.6; color: var(--texto-suave); margin-top: 10px; }
.popup-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.popup-nota { color: var(--apagado); font-size: 12.5px; margin-top: 6px; position: relative; }

/* ═══ Aviso de cookies ═══ */
.cookies {
  position: fixed; z-index: 250; left: 20px; bottom: 20px; width: min(400px, calc(100vw - 40px));
  display: flex; align-items: center; gap: 16px;
  background: rgba(16, 16, 16, .94); border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-radius: 18px; padding: 16px 18px;
  animation: cookies-entra .6s var(--ease) .8s backwards;
}
@keyframes cookies-entra { from { opacity: 0; transform: translateY(18px); } }
.cookies p { font-size: 13px; color: var(--tenue); line-height: 1.5; }
.cookies a { color: var(--texto); }
.cookies .boton { flex: none; }

/* ═══ ESCRÍBENOS: el mismo círculo de la app, abajo a la izquierda (14-oct-2026) ═══
   Con el aviso de cookies a la vista, sube por encima de él. */
.escribenos {
  position: fixed; z-index: 240; left: 20px; bottom: 20px;
  width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  background: var(--texto); color: var(--fondo); opacity: .62;
  transition: opacity .18s var(--ease), transform .18s var(--ease), bottom .3s var(--ease);
}
.escribenos:hover, .escribenos:focus-visible { opacity: 1; transform: scale(1.06); outline: none; }
.escribenos svg { width: 22px; height: 22px; }
body:has(.cookies:not([hidden])) .escribenos { bottom: 118px; }
body:has(.velo:not([hidden])) .escribenos { opacity: 0; pointer-events: none; }
#escribenos-texto { min-height: 120px; }

/* ═══ Adaptación: que en el celular se vea hermoso ═══ */
@media (max-width: 1000px) {
  .cabecera-nav { display: none; }
  /* Sin el menú, los botones van a la derecha y la cabecera queda pareja: la marca a un lado y las acciones al otro
     (regla del director, 7-oct-2026: “en celular quiero estos botones más centrados”; quedaban pegados a la marca con
     un hueco vacío a la derecha). */
  .cabecera { justify-content: space-between; }
  .cabecera-acciones { margin-left: auto; }
  .cifras { grid-template-columns: 1fr 1fr; }
  .como-rejilla, .grupo-rejilla { grid-template-columns: 1fr; gap: 46px; }
  .bento { grid-template-columns: 1fr 1fr; }
  .prox-rejilla { grid-template-columns: 1fr; }
  .quien-rejilla { grid-template-columns: 1fr; }
  .precio-caja { grid-template-columns: 1fr; gap: 26px; text-align: center; padding: 36px 26px; }
  .precio-lista { justify-items: start; max-width: 420px; margin: 0 auto; }
  .precio-acuerdo { text-align: left; }
  .acuerdo-lista > div { grid-template-columns: 1fr; gap: 2px; }
  .pie-rejilla { grid-template-columns: 1fr 1fr; }
  .pie-marca { grid-column: span 2; }
}
@media (max-width: 640px) {
  .cabecera { gap: 10px; height: 60px; padding: 0 14px; }
  .cabecera .boton-borde { display: none; }
  .cifras { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cifra { padding: 18px 14px; }
  .bento { grid-template-columns: 1fr; }
  .pq-cab, .pq-fila { grid-template-columns: 1fr; }
  .pq-cab { display: none; }
  .pq-fila { padding: 6px 0; }
  .pq-fila .pq-tema { padding-bottom: 2px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--apagado); }
  /* En el celular, sin la cabecera de las dos columnas, lo del chat de IA va TACHADO para que se lea cuál es cuál. El
     tachado era blanco al 25 % y en tema claro no se veía (8-oct-2026, “no están tachadas”): va con el color del texto. */
  .pq-fila .pq-chat { padding-top: 2px; padding-bottom: 2px; text-decoration: line-through; text-decoration-color: color-mix(in srgb, currentColor 70%, transparent); text-decoration-thickness: 1px; }
  .pq-fila .pq-think { background: none; padding-top: 2px; }
  .chk-item summary { font-size: 17.5px; }
  .chk-desc { font-size: 15px; }
  .prox-carta { min-height: 0; padding: 24px 20px; }
  .prox-visual { padding-top: 22px; }
  .iphone { width: 240px; height: 494px; }
  /* Dos columnas parejas: cada sello con el icono encima y el texto debajo, todos del mismo alto;
     el quinto ocupa la fila entera y vuelve a ir en línea. */
  .est-fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .est-sello { min-width: 0; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; }
  .est-sello svg { width: 26px; height: 26px; }
  .est-sello b { font-size: 14px; line-height: 1.25; }
  .est-sello span { margin-top: 3px; line-height: 1.3; }
  .est-sello:last-child { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 13px; }
  .conf-logos { gap: 14px 30px; }
  .pie-rejilla { grid-template-columns: 1fr; }
  .pie-marca { grid-column: auto; }
  .cookies { left: 12px; bottom: 12px; width: calc(100vw - 24px); flex-direction: column; align-items: flex-start; gap: 10px; }
  .maqueta-marco, .demo-eleccion { padding: 0 14px; }
}

/* Con reduced motion: nada se mueve, todo se ve */
@media (prefers-reduced-motion: reduce) {
  .em-lineas s, .em-url i, .ec-burbuja, .el-onda,
  .iphone-onda i, .iphone-cara::after, .prox-oficina img { animation: none; }
  .ec-burbuja { opacity: 1; }
  .gigante { transform: none; }
  .gigante, .gigante.encendida { background: none; color: var(--texto); -webkit-background-clip: initial; background-clip: initial; }
  .barra-scroll { display: none; }
  #multitud { display: none; }
}

/* ═══ La demo por áreas: los chips que eligen a quién le encargas ═══ */
/* Los chips van PEGADOS al caso de ejemplo: alineados con el marco de la maqueta (mismo ancho y relleno), en una
   sola fila que en el celular se desliza de lado, y sin texto entre ellos y la maqueta —la frase de valor de cada
   área se retiró y la pista de la barra pasó debajo— (regla del director, 7-oct-2026: “saca esto de en medio y
   organiza mejor las tarjetas, más pegado al caso de ejemplo”). */
.demo-eleccion { max-width: 1000px; margin: 30px auto 0; padding: 0 24px; }
.demo-chips {
  display: flex; flex-wrap: nowrap; gap: 8px; padding: 2px 0 4px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none;
}
.demo-chips::-webkit-scrollbar { display: none; }
/* EL CARRIL DE ÁREAS SE DESLIZA, Y SE NOTA (regla del director, 7-oct-2026: “deja una pequeña flecha ahí al final de
   las áreas disponibles para que se entienda que eso es un slide horizontal que se puede desplazar”). Como el carril de
   pestañas de la ficha en la app (.ficha-tabs): el borde del lado donde hay más se desvanece y encima va una flecha
   pequeña en su círculo, que desliza la fila al tocarla. Del lado donde no hay nada más, ni velo ni flecha. La primera
   vez que se ve, la flecha se asoma dos veces hacia su lado; después se queda quieta. */
.demo-carril { position: relative; }
.demo-carril.hay-der .demo-chips {
  -webkit-mask-image: linear-gradient(to left, transparent, #000 72px);
          mask-image: linear-gradient(to left, transparent, #000 72px);
}
.demo-carril.hay-izq .demo-chips {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 72px);
          mask-image: linear-gradient(to right, transparent, #000 72px);
}
.demo-carril.hay-izq.hay-der .demo-chips {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 72px, #000 calc(100% - 72px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 72px, #000 calc(100% - 72px), transparent);
}
.demo-flecha {
  position: absolute; top: 50%; z-index: 2; width: 30px; height: 30px; margin-top: -16px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .12); color: var(--texto); cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity .25s var(--ease), background-color .2s;
  -webkit-tap-highlight-color: transparent;
}
.demo-flecha svg { width: 14px; height: 14px; }
.demo-flecha:hover { background: rgba(255, 255, 255, .2); }
.demo-flecha.izq { left: 0; }
.demo-flecha.der { right: 0; }
.demo-carril.hay-izq .demo-flecha.izq, .demo-carril.hay-der .demo-flecha.der { opacity: 1; pointer-events: auto; }
html[data-tema="claro"] .demo-flecha { background: rgba(16, 16, 16, .08); }
html[data-tema="claro"] .demo-flecha:hover { background: rgba(16, 16, 16, .14); }
@media (prefers-reduced-motion: no-preference) {
  .demo-carril.hay-der.asoma .demo-flecha.der svg { animation: demo-asoma .9s var(--ease) .5s 2; }
  @keyframes demo-asoma { 0%, 100% { translate: 0; } 45% { translate: 4px; } }
}
.demo .maqueta-marco { margin-top: 12px; }
.demo-chip {
  flex: none; scroll-snap-align: start;
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--borde); border-radius: 999px; padding: 8px 16px 8px 9px;
  font-size: 14px; font-weight: 600; color: var(--tenue);
  transition: color .2s, border-color .2s, background-color .2s, transform .25s var(--ease);
}
.demo-chip img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.demo-chip:hover { color: var(--texto); border-color: rgba(255, 255, 255, .3); }
.demo-chip.activo { color: #000; background: #fff; border-color: #fff; }
.demo-prueba { margin-top: 14px; text-align: center; font-size: 13px; color: var(--apagado); }

/* ═══ La banda: la carta grande con la figura gigante asomándose ═══ */
.banda { padding: 40px 0 90px; }
.banda-carta {
  position: relative; border-radius: 28px; overflow: clip;
  background: #0d0d0d; border: 1px solid var(--borde);
  display: grid; grid-template-columns: 1.1fr .9fr; align-items: center;
  min-height: 380px;
}
.banda-texto { padding: 56px 20px 56px 56px; position: relative; z-index: 2; }
.banda-texto h2 { font-size: clamp(28px, 3.8vw, 44px); letter-spacing: -.02em; line-height: 1.1; }
.banda-texto p { color: var(--tenue); font-size: clamp(15px, 1.6vw, 17px); margin-top: 16px; max-width: 480px; }
.banda-figura {
  position: absolute; right: -40px; bottom: -140px; height: 150%; width: auto;
  fill: #fff; opacity: .97; transform: rotate(-6deg);
  filter: drop-shadow(-30px 20px 60px rgba(0, 0, 0, .5));
}

/* ═══ En tu bolsillo: WhatsApp / iMessage en un iPhone ═══ */
.canal { padding: 120px 0; }
.canal-rejilla { display: grid; grid-template-columns: 1fr auto; gap: 60px; align-items: center; }
.canal-tabs { display: flex; gap: 10px; margin-top: 28px; }
.canal-tab {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--borde); border-radius: 999px; padding: 8px 16px 8px 10px;
  font-size: 14px; font-weight: 600; color: var(--tenue);
  transition: color .2s, background-color .2s, border-color .2s;
}
.canal-logo { flex: none; width: 21px; height: 21px; border-radius: 6px; display: grid; place-items: center; color: #fff; }
.canal-logo svg { width: 13px; height: 13px; }
.canal-logo.lg-wa { background: linear-gradient(180deg, #5ffc7b, #28d146); }
.canal-logo.lg-im { background: linear-gradient(180deg, #6be066, #0fd440); }
.canal-tab:hover { color: var(--texto); }
.canal-tab.activo { color: #000; background: #fff; border-color: #fff; }
.canal-visual { justify-self: center; }
/* El teléfono del canal es PLANO, como el de la referencia (regla del director,
   23-sep-2026): cuerpo fino de un solo trazo, isla dinámica y botones laterales.
   No gira con el mouse. */
.fono-plano {
  --fono-borde: #393939;
  position: relative; width: 340px; aspect-ratio: 393 / 852;
  border-radius: 56px; background: #101010; border: 3px solid var(--fono-borde);
}
.fono-plano::before { /* silencio y volumen, a la izquierda */
  content: ''; position: absolute; left: -6px; top: 158px; width: 3px; height: 30px;
  border-radius: 2px; background: var(--fono-borde);
  box-shadow: 0 46px 0 0 var(--fono-borde), 0 90px 0 0 var(--fono-borde);
}
.fono-plano::after { /* encendido, a la derecha */
  content: ''; position: absolute; right: -6px; top: 208px; width: 3px; height: 62px;
  border-radius: 2px; background: var(--fono-borde);
}
.fono-plano .fono-isla {
  position: absolute; left: 50%; top: 21px; translate: -50% 0; z-index: 5;
  width: 100px; height: 29px; border-radius: 999px; background: #000;
}
.fono-plano .iphone-pantalla { position: absolute; inset: 9px; border-radius: 46px; overflow: clip; display: block; text-align: left; background: #101010; }
.fono-plano .wa-cabeza { padding-top: 50px; }
.fono-plano .im-cabeza { padding-top: 52px; }

/* WhatsApp, como se ve en sus últimas versiones de iOS (regla del director,
   23-sep-2026): fondo con el patrón de garabatos, burbujas más redondas, cabecera
   con videollamada y llamada, compositor nuevo y barra de estado del teléfono. */
.tel-status { position: absolute; top: 13px; left: 0; right: 0; z-index: 6; display: flex; justify-content: space-between; align-items: center; padding: 0 26px; pointer-events: none; color: #fff; }
.tel-status b { font-size: 12.5px; font-weight: 600; letter-spacing: .02em; }
.tel-status span { display: inline-flex; gap: 5px; align-items: center; }
.tel-status svg { width: 16px; height: 12px; display: block; }
.wa { position: absolute; inset: 0; display: flex; flex-direction: column; background: #0b1014; }
.wa::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='132'%3E%3Cg fill='none' stroke='rgba(255,255,255,.05)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='22' cy='24' r='7'/%3E%3Cpath d='M64 14h14M71 7v14'/%3E%3Crect x='98' y='16' width='13' height='13' rx='3'/%3E%3Cpath d='M14 76c6-8 12 8 18 0'/%3E%3Ccircle cx='68' cy='70' r='2.2'/%3E%3Cpath d='M100 64l5 9h-10z'/%3E%3Cpath d='M28 106a8 8 0 1 0 8 8'/%3E%3Cpath d='M72 106h16M72 112h10'/%3E%3Ccircle cx='114' cy='110' r='6'/%3E%3C/g%3E%3C/svg%3E") 0 0/132px auto; }
.wa-cabeza {
  flex: none; display: flex; align-items: center; gap: 9px;
  padding: 46px 12px 10px; position: relative; z-index: 2;
}
.wa-atras { display: inline-flex; align-items: center; gap: 4px; background: #1d262c; border-radius: 999px; padding: 5px 10px 5px 8px; color: #ececec; font-size: 17px; line-height: 1; }
.wa-atras i { font-style: normal; font-size: 11px; font-weight: 600; }
.wa-llamadas { margin-left: auto; display: inline-flex; align-items: center; gap: 18px; background: #1d262c; border-radius: 999px; padding: 8px 14px; color: #ececec; }
.wa-llamadas svg { width: 17px; height: 17px; display: block; }
.wa-cabeza img { width: 33px; height: 33px; border-radius: 50%; object-fit: cover; }
.wa-cabeza b { display: block; font-size: 13.5px; color: #ececec; line-height: 1.15; }
.wa-cabeza span { display: block; font-size: 11px; color: #8696a0; }
/* Los mensajes nacen ARRIBA, como en un chat corto de verdad, y cuando ya no caben el hilo se desplaza para que el
   último se vea (lo hace landing.js al añadir cada globo). Anclarlos abajo con justify-content dejaba el “Hoy” pegado
   a la barra de escribir con toda la pantalla vacía encima, y cada mensaje nuevo empujaba el hilo entero hacia arriba
   (regla del director, 7-oct-2026: “se dañó la parte donde llega el WhatsApp”). */
.wa-hilo { flex: 1; overflow: hidden; padding: 12px 10px; display: flex; flex-direction: column; gap: 5px; position: relative; z-index: 2; }
.wa-dia { align-self: center; font-size: 10.5px; color: #8696a0; background: #182229; border-radius: 8px; padding: 4px 10px; margin-bottom: 6px; }
.wa-globo {
  position: relative; max-width: 82%; font-size: 12.8px; line-height: 1.35; color: #ececec;
  border-radius: 16px; padding: 7px 10px 8px; width: fit-content;
  animation: burbuja-wa .3s var(--ease) backwards;
}
@keyframes burbuja-wa { from { opacity: 0; transform: translateY(8px); } }
.wa-globo.ella { background: #242e33; border-bottom-left-radius: 5px; align-self: flex-start; }
.wa-globo.tu { background: #1d6a4f; border-bottom-right-radius: 5px; align-self: flex-end; }
.wa-hora { display: inline-block; font-size: 9.5px; color: rgba(236, 236, 236, .55); margin: 0 0 -2px 8px; float: right; translate: 0 6px; }
.wa-globo.tu .wa-hora::after { content: ' ✓✓'; color: #53bdeb; letter-spacing: -2px; }
.wa-enlace { display: block; background: rgba(0, 0, 0, .22); border-radius: 7px; margin-bottom: 5px; overflow: clip; }
.wa-enlace .we-mini { height: 62px; background: url('landing-mini/banner-prici.jpg') center 30%/cover; filter: saturate(.85); }
.wa-enlace .we-cuerpo { padding: 6px 8px; }
.wa-enlace b { display: block; font-size: 11.5px; color: #ececec; }
.wa-enlace span { display: block; font-size: 10.5px; color: #8696a0; }
.wa-globo .wa-url { color: #53bdeb; text-decoration: none; }
.wa-pie { flex: none; display: flex; align-items: center; gap: 13px; padding: 8px 14px 26px; position: relative; z-index: 2; }
.wa-mas { color: #ececec; font-size: 24px; font-weight: 300; line-height: 1; }
.wa-caja { flex: 1; position: relative; background: #1f2a30; border-radius: 999px; color: #8696a0; font-size: 12.5px; padding: 8px 36px 8px 14px; }
.wa-caja svg { position: absolute; right: 12px; top: 50%; translate: 0 -50%; width: 17px; height: 17px; color: #8696a0; }
.wa-cam, .wa-mic { color: #ececec; display: grid; place-items: center; }
.wa-cam svg, .wa-mic svg { width: 20px; height: 20px; }
.wa-tecleando { font-size: 11px; color: #00a884 !important; }

/* iMessage, como se siente el de verdad (oscuro) */
.im { position: absolute; inset: 0; display: flex; flex-direction: column; background: #000; }
.im-cabeza {
  flex: none; text-align: center; padding: 44px 12px 8px;
  background: rgba(29, 29, 29, .9); border-bottom: .5px solid rgba(255, 255, 255, .12);
  position: relative; z-index: 2;
}
.im-cabeza img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; margin: 0 auto 3px; }
.im-cabeza b { display: block; font-size: 11.5px; font-weight: 500; color: #f4f4f4; }
.im-cabeza b::after { content: ' ›'; color: #909090; }
/* Como el de WhatsApp: los mensajes arrancan arriba y, si ya no caben, el hilo se desplaza al último (en el celular
   “Aprobado, dale” quedaba cortado detrás de la barra, 7-oct-2026). */
.im-hilo { flex: 1; overflow: hidden; padding: 12px 12px 6px; display: flex; flex-direction: column; gap: 4px; }
.im-dia { align-self: center; font-size: 10px; color: #909090; margin-bottom: 6px; }
/* Los globos son los del chat de Think² —radio 20, cola, hora dentro— con los
   colores de iMessage (regla del director, 23-sep-2026). */
.im-globo {
  position: relative; max-width: 80%; font-size: 13px; line-height: 1.35; border-radius: 20px; padding: 8px 13px 9px;
  width: fit-content; animation: burbuja-wa .3s var(--ease) backwards;
}
/* La cola es LA DE THINK² tal cual (style.css .burbuja::after, misma caja 22×25 y mismo
   trazo medido): el globo del mock ya tiene el mismo radio 20, así que encaja 1:1.
   El truco viejo del cuadrado con una esquina redonda dejaba un mazacote (regla del
   director, 24-sep-2026: “no es como se debe ver la burbuja; es como la que ya está en Think”). */
.im-globo::after { content: ''; position: absolute; bottom: -5px; width: 22px; height: 25px; background: inherit; pointer-events: none; }
.im-globo.ella { background: #272727; color: #f4f4f4; align-self: flex-start; }
.im-globo.ella::after { left: 0; clip-path: path('M0,0 C0,18.4 7.7,14.5 7.7,20 C7.7,23.2 5,23.5 6.7,25 C9.8,23.9 12.7,21.3 15.5,20 L22,20 Z'); }
.im-globo.tu { background: #0a84ff; color: #fff; align-self: flex-end; }
.im-globo.tu::after { right: 0; clip-path: path('M22,0 C22,18.4 14.3,14.5 14.3,20 C14.3,23.2 17,23.5 15.3,25 C12.2,23.9 9.3,21.3 6.5,20 L0,20 Z'); }
.im-globo.ella:has(+ .im-globo.ella)::after, .im-globo.tu:has(+ .im-globo.tu)::after { display: none; }
.im-hora { display: inline-block; font-size: 9.5px; opacity: .6; margin: 0 0 -2px 8px; float: right; translate: 0 6px; }
.im-entregado { align-self: flex-end; font-size: 9.5px; color: #909090; margin: 1px 4px 0 0; }
/* La tarjeta del enlace ocupa el globo entero y el globo que la lleva toma su ancho máximo: con 200 px fijos, en el
   celular la tarjeta se salía por la derecha del globo (regla del director, 7-oct-2026: “arregla eso, cómo se ve de salido”). */
.im-globo:has(.im-enlace) { width: 80%; }
.im-enlace { display: block; width: 100%; background: #1d1d1d; border-radius: 12px; overflow: clip; }
.im-enlace .we-mini { height: 92px; background: url('landing-mini/banner-prici.jpg') center 30%/cover; }
.im-enlace .we-cuerpo { padding: 7px 10px; }
.im-enlace b { display: block; font-size: 11.5px; color: #f4f4f4; font-weight: 500; }
.im-enlace span { display: block; font-size: 10.5px; color: #909090; }
.im-pie { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 12px 26px; }
.im-caja { flex: 1; position: relative; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; color: #909090; font-size: 13px; padding: 6px 32px 6px 13px; }
.im-caja svg { position: absolute; right: 11px; top: 50%; translate: 0 -50%; width: 14px; height: 14px; color: #909090; }
.im-mas { width: 30px; height: 30px; border-radius: 50%; background: #1d1d1d; color: #909090; display: grid; place-items: center; font-size: 18px; }
.im-tecleando { display: inline-flex; gap: 3px; background: #272727; border-radius: 20px; padding: 11px 13px; align-self: flex-start; }
.im-tecleando i { width: 6px; height: 6px; border-radius: 50%; background: #909090; animation: tecleo-im 1.2s ease-in-out infinite; }
.im-tecleando i:nth-child(2) { animation-delay: .15s; }
.im-tecleando i:nth-child(3) { animation-delay: .3s; }
@keyframes tecleo-im { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }

@media (max-width: 1000px) {
  .banda-carta { grid-template-columns: 1fr; min-height: 0; }
  .banda-texto { padding: 40px 28px 30px; }
  .banda-figura { position: static; height: 220px; margin: -10px auto -60px; transform: rotate(-4deg); }
  .canal-rejilla { grid-template-columns: 1fr; gap: 40px; }
  .canal-visual { justify-self: center; }
  .fono-plano { width: 280px; }
  /* En el teléfono pequeño la isla y la barra de estado van a su escala: con la isla de 100 px los iconos de señal y
     batería quedaban debajo de ella (regla del director, 7-oct-2026: “mira este error”). */
  .fono-plano .fono-isla { width: 78px; height: 23px; top: 19px; }
  .fono-plano .tel-status { top: 11px; padding: 0 20px; }
  .fono-plano .tel-status b { font-size: 11.5px; }
  .fono-plano .tel-status span { gap: 4px; }
  .fono-plano .tel-status svg { width: 14px; height: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-globo, .im-globo, .im-tecleando i { animation: none; }
}

/* ═══ CASOS DE USO (como la página de casos de x.ai, con la app auto-reproduciéndose) ═══ */
.casos { padding: 120px 0; }
.casos-rejilla { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 26px; margin-top: 46px; align-items: start; }
.casos-lista { display: grid; gap: 10px; }
.caso-item {
  text-align: left; border: 1px solid var(--borde); border-radius: 16px; padding: 15px 18px;
  transition: border-color .25s, background-color .25s, transform .3s var(--ease);
}
.caso-item:hover { border-color: rgba(124, 92, 255, .5); }
.caso-item.activo { background: rgba(124, 92, 255, .1); border-color: var(--acento); }
.caso-item b { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.caso-item b img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.caso-item span { display: block; color: var(--tenue); font-size: 13px; margin-top: 4px; }
.casos-visual .maqueta { max-width: 430px; margin: 0 auto; }   /* misma escena de 430: ver arriba */

/* ═══ SU COMPUTADOR: cuatro tarjetas que se mueven ═══ */
.compu { padding: 110px 0; }
.compu-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 50px; }
.compu-carta {
  border: 1px solid var(--borde); border-radius: 24px; padding: 28px 28px 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 60%);
  overflow: clip;
}
.compu-carta h3 { font-size: 19px; letter-spacing: -.01em; }
.compu-carta > p { color: var(--tenue); font-size: 14.5px; margin-top: 7px; max-width: 460px; }
.compu-visual { margin-top: 22px; min-height: 230px; display: grid; place-items: center; }
.cc-tarjeta {
  width: min(400px, 100%); border: 1px solid var(--borde); border-radius: 16px; padding: 14px 16px;
  background: var(--panel);
}
.cc-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cc-cab b { font-size: 14px; }
.cc-pill {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--alba, #ffb454); color: #e8a13d;
}
.cc-pill.mira { display: inline-flex; align-items: center; gap: 7px; color: var(--verde); text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.cc-pill.mira i { width: 7px; height: 7px; border-radius: 50%; background: var(--verde); }
@media (prefers-reduced-motion: no-preference) { .cc-pill.mira i { animation: parpadeo-cc 1.6s ease-in-out infinite; } @keyframes parpadeo-cc { 50% { opacity: .3; } } }
.cc-msg { font-size: 13px; color: var(--tenue); margin: 6px 0 12px; }
.cc-pantalla { position: relative; height: 150px; border-radius: 12px; overflow: clip; border: 1px solid var(--borde); }
.cc-pantalla.alta { height: 168px; margin-top: 12px; }
.cc-pantalla > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; transform: scale(1.15); }
.cc-ventana {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 70%; border-radius: 10px; background: #fff; padding: 14px 14px 10px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .35);
}
.cc-ventana s { display: block; height: 8px; border-radius: 4px; background: #eaeaea; margin: 8px 0; text-decoration: none; }
.cc-ventana s:first-child { width: 46%; height: 10px; background: #dddddd; }
.cc-barras { display: flex; align-items: flex-end; gap: 6px; height: 54px; margin-top: 10px; }
.cc-barras i { flex: 1; border-radius: 3px 3px 0 0; background: #c9d4f4; height: var(--h); }
@media (prefers-reduced-motion: no-preference) {
  .cc-barras i { transform-origin: bottom; animation: cc-barra 3.4s var(--ease) infinite; }
  .cc-barras i:nth-child(2n) { animation-delay: .25s; }
  .cc-barras i:nth-child(3n) { animation-delay: .5s; }
  @keyframes cc-barra { 0% { transform: scaleY(.2); } 30%, 80% { transform: scaleY(1); } 100% { transform: scaleY(.2); } }
}
.cc-cursor {
  position: absolute; left: 24%; top: 30%; z-index: 3; pointer-events: none;
}
.cc-cursor::before { content: ''; position: absolute; left: -3px; top: -3px; border: 7px solid transparent; border-top: 11px solid #111; border-left: 11px solid #111; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); border-radius: 2px; }
.cc-cursor i {
  position: absolute; left: 10px; top: 12px; font-style: normal; font-size: 10px; font-weight: 700;
  background: #111; color: #fff; border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
  .cc-cursor { animation: cc-pasea 6s var(--ease) infinite; }
  @keyframes cc-pasea { 0%, 100% { left: 24%; top: 30%; } 30% { left: 58%; top: 44%; } 60% { left: 40%; top: 66%; } 80% { left: 62%; top: 58%; } }
  .cc-cursor.dos { animation: cc-pasea2 5.4s var(--ease) infinite; }
  @keyframes cc-pasea2 { 0%, 100% { left: 30%; top: 62%; } 35% { left: 60%; top: 36%; } 70% { left: 46%; top: 56%; } }
}
.cc-rutina { font-size: 12.5px; color: var(--verde); margin-top: 12px; font-weight: 600; }
.compu-visual.charla { display: grid; gap: 10px; align-content: center; justify-items: start; }
.cc-globo {
  max-width: 92%; background: var(--panel-2); border-radius: 18px; border-bottom-left-radius: 6px;
  padding: 11px 15px; font-size: 13.5px; color: var(--texto); line-height: 1.45;
}
@media (prefers-reduced-motion: no-preference) {
  .cc-globo { opacity: 0; animation: cc-globo 8s var(--ease) infinite; }
  .cc-globo.dos { animation-delay: 1.2s; }
  @keyframes cc-globo { 0% { opacity: 0; transform: translateY(10px); } 10%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
}
.compu-visual.pase { display: grid; gap: 16px; place-items: center; }
.cc-pase { position: relative; display: flex; align-items: center; gap: 60px; }
.cc-pase img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.cc-pase img.tres { position: absolute; right: -66px; opacity: .45; }
.cc-viaja { position: absolute; left: 56px; top: 50%; width: 16px; height: 16px; border-radius: 6px; background: var(--acento); translate: 0 -50%; }
@media (prefers-reduced-motion: no-preference) {
  .cc-viaja { animation: cc-viaja 3.2s var(--ease) infinite; }
  @keyframes cc-viaja { 0% { left: 42px; opacity: 0; scale: .6; } 15% { opacity: 1; scale: 1; } 80% { left: 104px; opacity: 1; } 100% { left: 112px; opacity: 0; scale: .7; } }
}

/* ═══ El botón de tema: pequeño y minimalista, al final ═══ */
.tema-boton {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--borde); color: var(--tenue);
  transition: color .2s, border-color .2s;
}
.tema-boton:hover { color: var(--texto); border-color: rgba(128, 128, 140, .5); }
.tema-boton svg { width: 15px; height: 15px; }
.tema-boton .tema-luna { display: none; }
html[data-tema="claro"] .tema-boton .tema-sol { display: none; }
html[data-tema="claro"] .tema-boton .tema-luna { display: block; }

/* ═══ MODO CLARO: la página entera, y las plataformas como se ven de verdad en claro ═══ */
html[data-tema="claro"] {
  --fondo: #fff;
  --panel: #f5f5f5;
  --panel-2: #ebebeb;
  --borde: rgba(16, 16, 16, .1);
  --texto: #101010;
  --tenue: #55555e;
  --apagado: #8a8a94;
}
html[data-tema="claro"] ::selection { background: rgba(124, 92, 255, .25); }
html[data-tema="claro"] .cabecera::before { background: rgba(255, 255, 255, .72); }
html[data-tema="claro"] .boton-primario { background: #101010; color: #fff; }
html[data-tema="claro"] .boton-primario:hover { background: #262626; }
html[data-tema="claro"] .idioma-lista, html[data-tema="claro"] .recursos-lista, html[data-tema="claro"] .idioma-toast, html[data-tema="claro"] .cookies { background: rgba(255, 255, 255, .95); }
html[data-tema="claro"] .popup { background: rgba(255, 255, 255, .96); }
html[data-tema="claro"] .popup-figura use { fill: #101010; }
html[data-tema="claro"] .velo { background: rgba(255, 255, 255, .4); }
html[data-tema="claro"] .gigante { color: rgba(16, 16, 16, .07); }
html[data-tema="claro"] .gigante.encendida:not(:nth-child(2)) { color: #101010; }
html[data-tema="claro"] .pie-dibujo { color: rgba(16, 16, 16, .14); }
html[data-tema="claro"] .conf-logo { color: rgba(16, 16, 16, .5); }
html[data-tema="claro"] .conf-logo:hover { color: rgba(16, 16, 16, .9); }
html[data-tema="claro"] .banda-carta { background: #f5f5f5; }
html[data-tema="claro"] .banda-figura { fill: #101010; }
html[data-tema="claro"] .demo-chip.activo, html[data-tema="claro"] .canal-tab.activo { background: #101010; color: #fff; border-color: #101010; }
html[data-tema="claro"] .maqueta, html[data-tema="claro"] .maqueta iframe { background: #f8f8f8; }
html[data-tema="claro"] .cifra, html[data-tema="claro"] .quien-carta, html[data-tema="claro"] .bento-celda,
html[data-tema="claro"] .compu-carta { background: linear-gradient(180deg, rgba(16, 16, 16, .025), transparent 65%); }
html[data-tema="claro"] .cc-tarjeta { background: #fff; }
html[data-tema="claro"] .quien-carta li::before { border-color: var(--verde); }
html[data-tema="claro"] .terminal, html[data-tema="claro"] .em-ventana { background: rgba(255, 255, 255, .93); border-color: rgba(16, 16, 16, .12); }
html[data-tema="claro"] .em-ventana { color: #101010; }
html[data-tema="claro"] .em-url { background: rgba(16, 16, 16, .06); color: #55555e; }
html[data-tema="claro"] .em-lineas s { background: rgba(16, 16, 16, .1); }

/* WhatsApp e iMessage EN CLARO, como se ven de verdad */
html[data-tema="claro"] .wa { background: #f3ece3; }
html[data-tema="claro"] .wa::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='132'%3E%3Cg fill='none' stroke='rgba(17,27,33,.06)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='22' cy='24' r='7'/%3E%3Cpath d='M64 14h14M71 7v14'/%3E%3Crect x='98' y='16' width='13' height='13' rx='3'/%3E%3Cpath d='M14 76c6-8 12 8 18 0'/%3E%3Ccircle cx='68' cy='70' r='2.2'/%3E%3Cpath d='M100 64l5 9h-10z'/%3E%3Cpath d='M28 106a8 8 0 1 0 8 8'/%3E%3Cpath d='M72 106h16M72 112h10'/%3E%3Ccircle cx='114' cy='110' r='6'/%3E%3C/g%3E%3C/svg%3E"); }
html[data-tema="claro"] .tel-status { color: #0c0c0c; }
html[data-tema="claro"] .wa-atras, html[data-tema="claro"] .wa-llamadas { background: #fff; color: #0b141a; }
html[data-tema="claro"] .wa-mas, html[data-tema="claro"] .wa-cam, html[data-tema="claro"] .wa-mic { color: #54656f; }
html[data-tema="claro"] .fono-plano { background: #fff; --fono-borde: #242424; }
html[data-tema="claro"] .fono-plano .iphone-pantalla { background: #fff; }
html[data-tema="claro"] .wa-cabeza b { color: #111b21; }
html[data-tema="claro"] .wa-cabeza span { color: #667781; }
html[data-tema="claro"] .wa-dia { background: #fff; color: #667781; }
html[data-tema="claro"] .wa-globo { color: #111b21; }
html[data-tema="claro"] .wa-globo.ella { background: #fff; }
html[data-tema="claro"] .wa-globo.tu { background: #d9fdd3; color: #111b21; }
html[data-tema="claro"] .wa-hora { color: rgba(17, 27, 33, .45); }
html[data-tema="claro"] .wa-enlace { background: rgba(17, 27, 33, .06); }
html[data-tema="claro"] .wa-enlace b { color: #111b21; }
html[data-tema="claro"] .wa-caja { background: #fff; color: #667781; }
html[data-tema="claro"] .im { background: #fff; }
html[data-tema="claro"] .im-cabeza { background: rgba(249, 249, 249, .94); border-bottom-color: rgba(0, 0, 0, .12); }
html[data-tema="claro"] .im-cabeza b { color: #000; }
html[data-tema="claro"] .im-dia { color: #909090; }
html[data-tema="claro"] .im-globo.ella { background: #eaeaea; color: #000; }
html[data-tema="claro"] .im-globo.tu { background: #007aff; }
html[data-tema="claro"] .im-enlace { background: #f4f4f4; }
html[data-tema="claro"] .im-enlace b { color: #000; }
html[data-tema="claro"] .im-caja { border-color: rgba(0, 0, 0, .2); }
html[data-tema="claro"] .im-mas { background: #eaeaea; }
html[data-tema="claro"] .im-tecleando { background: #eaeaea; }

@media (max-width: 1000px) {
  .casos-rejilla { grid-template-columns: 1fr; }
  .casos-lista { grid-template-columns: 1fr 1fr; }
  .compu-rejilla { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .casos-lista { grid-template-columns: 1fr; }
}

/* ═══ SIN LÍNEAS DE BORDE EN LAS TARJETAS (regla del director, 23-sep-2026: “quita de
   todas las tarjetas en la web la línea de borde”) — una pieza se separa de lo de atrás
   por su RELLENO, como en la app. Los botones con borde, los campos y las superficies
   flotantes (popup, cookies, menús) conservan el suyo: no son tarjetas. ═══ */
.cifra, .bento-celda, .quien-carta, .est-sello, .prox-carta, .precio-caja,
.compu-carta, .caso-item, .banda-carta, .maqueta, .pq-tabla, .cc-tarjeta,
.em-escritorio, .cc-pantalla, .demo-chip, .canal-tab {
  border: 0;
}
/* Y las que solo tenían borde ganan su relleno */
.est-sello, .caso-item, .prox-carta, .pq-tabla {
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .018));
}
.demo-chip, .canal-tab { background: rgba(255, 255, 255, .06); }
.demo-chip.activo, .canal-tab.activo { background: #fff; }
.precio-caja { background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); }
.caso-item.activo { background: rgba(124, 92, 255, .14); }
.bento-celda:hover { border: 0; }
html[data-tema="claro"] .est-sello, html[data-tema="claro"] .caso-item,
html[data-tema="claro"] .prox-carta, html[data-tema="claro"] .pq-tabla {
  background: linear-gradient(180deg, rgba(16, 16, 16, .05), rgba(16, 16, 16, .02));
}
html[data-tema="claro"] .demo-chip, html[data-tema="claro"] .canal-tab { background: rgba(16, 16, 16, .06); }
html[data-tema="claro"] .demo-chip.activo, html[data-tema="claro"] .canal-tab.activo { background: #101010; }
html[data-tema="claro"] .precio-caja { background: linear-gradient(180deg, rgba(16, 16, 16, .06), rgba(16, 16, 16, .02)); }

/* ═══ El atajo a los tutoriales de Theo ═══ */
.tutoriales { padding: 60px 0 110px; }
.tut-teaser {
  display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center;
  border-radius: 28px; padding: 46px 48px;
  background: linear-gradient(135deg, rgba(201, 162, 39, .12), rgba(255, 255, 255, .03) 55%);
}
.tut-teaser-cara {
  width: 148px; height: 148px; border-radius: 50%; object-fit: cover;
  outline: 3px solid rgba(201, 162, 39, .55); outline-offset: 5px;
}
.tut-teaser-texto .titulo-seccion { margin-bottom: 12px; }
.tut-teaser-frase { color: var(--texto); font-size: 15px; margin: 18px 0 24px; font-style: italic; }
.tut-teaser-frase b { display: block; font-style: normal; font-weight: 600; color: var(--tenue); font-size: 13px; margin-top: 6px; }
html[data-tema="claro"] .tut-teaser { background: linear-gradient(135deg, rgba(201, 162, 39, .16), rgba(16, 16, 16, .03) 55%); }
@media (max-width: 700px) {
  .tut-teaser { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 34px 22px; }
}

/* ═══ El bento en DOS tarjetas grandes (regla del director, 24-sep-2026: fuera la de
   aprobación y la de WhatsApp —ya las cuenta el video—, “dale protagonismo a los otros
   dos”: la memoria y su computador) ═══ */
.bento { grid-template-columns: 1fr 1fr; gap: 20px; }
.bento-celda { padding: 36px 36px 32px; min-height: 520px; }
/* Los dos textos ARRANCAN A LA MISMA ALTURA (regla del director, 7-oct-2026: “esos dos textos deben estar alineados,
   mira ese espacio negro debajo de su propio computador”): las dos escenas miden 330 px y el título va justo debajo;
   con margin-top: auto el título de la tarjeta corta se iba al fondo y dejaba el hueco entre su escena y su texto. */
.bento-celda h3 { font-size: 22px; margin-top: 0; }
.bento-celda > p { font-size: 15.5px; max-width: 560px; }
.escena-maquina { min-height: 330px; }
.escena-sinapsis, .escena-sinapsis-video { height: 330px; }   /* las dos escenas, la misma altura que la máquina */
.em-escritorio { min-height: 330px; }
.em-ventana { width: min(300px, 84%); }
/* La enseñanza sobre el escritorio: la etiqueta y el cursor “Tú” paseando */
.em-mira { position: absolute; top: 12px; left: 14px; z-index: 3; background: rgba(0, 0, 0, .55); border-radius: 999px; padding: 5px 12px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
html[data-tema="claro"] .em-mira { background: rgba(255, 255, 255, .7); }
.em-escritorio .cc-cursor { left: 30%; top: 34%; }
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; }
  .bento-celda { min-height: 0; }
  /* En el celular el mapa va de lado a lado de la tarjeta (se funde con ella: no hay rectángulo que delate el sangrado). */
  .escena-sinapsis-video { height: 340px; width: calc(100% + 72px); margin: 0 -36px; }
}

/* ═══ CONEXIONES: las dos cartas y sus muros ═══ */
.conexiones { padding: 118px 0; }
.con-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 50px; }
.con-carta {
  text-align: left; border-radius: 24px; padding: 34px 32px 26px; overflow: clip;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
  display: flex; flex-direction: column; gap: 8px; min-height: 330px;
}
.con-n { font-size: clamp(34px, 4.4vw, 52px); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; color: var(--texto); }
.con-carta > p { color: var(--tenue); font-size: 15.5px; line-height: 1.55; max-width: 420px; margin-top: 4px; }
/* Las filas de iconos que derivan solas (y se pueden ver todas al tocar) */
/* La zona de herramientas SIN cuadro (regla del director, 24-sep-2026: “no quiero ese cuadro
   de sombra”): las apps giran en un disco 3D — la que pasa por el centro es la más grande y
   van menguando hacia atrás — y debajo un botón pequeño abre el muro con el buscador. */
.con-suelta { text-align: left; display: flex; flex-direction: column; gap: 8px; padding: 34px 0 10px; }
.con-disco { position: relative; height: 216px; margin-top: 8px; }
.disco-app { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; will-change: transform; }
.disco-app img { display: block; width: 100%; height: 100%; border-radius: 14px; object-fit: contain; background: rgba(255, 255, 255, .08); padding: 7px; }
.disco-buscar { align-self: center; padding: 8px 24px; font-size: 13.5px; }
.con-modelos { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: auto; padding-top: 26px; }
.con-marca { width: 29px; height: 29px; color: var(--texto); flex: none; }
.con-marca.pronto { opacity: .38; }     /* los que aún no piensan aquí: se ven, no se afirman */
/* El muro: el panel grande donde se scrollea entre los mil y pico iconos */
.muro {
  width: min(880px, 100%); height: min(80vh, 720px); border-radius: 24px;
  background: rgba(16, 16, 16, .96); display: flex; flex-direction: column; overflow: clip;
  animation: pop-entra .4s var(--ease) backwards;
}
.velo.saliendo .muro { animation: pop-sale .25s var(--ease) forwards; }
.muro-cabeza { display: flex; align-items: center; gap: 16px; padding: 20px 24px 14px; }
.muro-cabeza h3 { font-size: 20px; letter-spacing: -.01em; }
.muro-cabeza input {
  flex: 1; max-width: 320px; margin-left: auto; margin-right: 34px;
  background: var(--panel-2); border: 0; border-radius: 999px; color: var(--texto);
  font: inherit; font-size: 14px; padding: 9px 16px; outline: none;
}
.muro-pared {
  flex: 1; overflow-y: auto; padding: 10px 24px 30px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px;
  align-content: start;
  content-visibility: auto;
}
.muro-app { display: grid; justify-items: center; gap: 7px; padding: 12px 6px 10px; border-radius: 12px; }
.muro-app:hover { background: rgba(255, 255, 255, .06); }
.muro-app img { width: 38px; height: 38px; border-radius: 9px; object-fit: contain; background: rgba(255, 255, 255, .08); padding: 4px; }
.muro-app span { font-size: 11px; color: var(--tenue); text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-tema="claro"] .con-carta { background: linear-gradient(180deg, rgba(16, 16, 16, .05), rgba(16, 16, 16, .02)); }
html[data-tema="claro"] .disco-app img, html[data-tema="claro"] .muro-app img, html[data-tema="claro"] .con-modelos span { background: rgba(16, 16, 16, .06); }
html[data-tema="claro"] .muro { background: rgba(255, 255, 255, .97); }
/* La barra de desplazamiento del muro, fina y del color del panel (regla del director, 7-oct-2026: “no me gusta cómo
   se ve esa barra”): sin carril gris, solo un hilo translúcido que no toca las esquinas redondeadas. Chromium y
   Firefox leen scrollbar-color; Safari, los pseudo-elementos. */
.muro-pared { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.muro-pared::-webkit-scrollbar { width: 12px; }
.muro-pared::-webkit-scrollbar-track { background: transparent; margin: 14px 0; }
.muro-pared::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .2); border-radius: 999px; border: 4px solid transparent; background-clip: padding-box; }
.muro-pared::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, .32); }
html[data-tema="claro"] .muro-pared { scrollbar-color: rgba(16, 16, 16, .2) transparent; }
html[data-tema="claro"] .muro-pared::-webkit-scrollbar-thumb { background-color: rgba(16, 16, 16, .2); }
/* EN CELULAR (7-oct-2026): la ✕ va DENTRO del panel (antes se anclaba a la pantalla y salía fuera, arriba), el panel no
   se sale por la derecha (un título y un buscador lado a lado no cabían y ensanchaban la columna) y el buscador baja a
   su propia línea, a lo ancho. */
#velo-muro { grid-template-columns: minmax(0, 1fr); }
.muro { position: relative; }
.muro-cabeza input { min-width: 0; }
@media (max-width: 600px) {
  #velo-muro { padding: 12px; }
  .muro { height: min(86svh, 720px); border-radius: 20px; }
  .muro-cabeza { flex-wrap: wrap; gap: 12px; padding: 18px 16px 12px; }
  .muro-cabeza h3 { flex: 1 1 100%; padding-right: 44px; }
  .muro-cabeza input { flex: 1 1 100%; max-width: none; margin: 0; }
  .muro-pared { padding: 8px 10px 24px; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
}
@media (max-width: 900px) { .con-rejilla { grid-template-columns: 1fr; } .con-carta { min-height: 0; } }

/* ═══ EL SALTADOR: las rayitas del borde derecho para moverse entre secciones en el celular (landing.js) ═══ */
.saltador { display: none; }
@media (max-width: 900px) {
  /* Las rayas van sobre una cápsula de vidrio (7-oct-2026, “cómo se visualizan las secciones a veces se pierde”):
     sueltas, contra una foto o un video se perdían. Al tocarla, las rayas bajo el dedo se alargan y la cápsula crece con
     ellas; el rótulo se desliza de una raya a otra. La zona que se toca es más ancha que lo que se ve. */
  .saltador {
    display: block; position: fixed; right: 6px; top: 50%; translate: 0 -50%; z-index: 95;
    padding: 10px 4px 10px 10px; touch-action: none; user-select: none; -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    opacity: 0; pointer-events: none; transition: opacity .3s;
  }
  .saltador.visible, .saltador.tocando { opacity: 1; }
  /* Solo la cápsula recibe el toque: el margen que la rodea deja pasar el dedo a lo que haya debajo. */
  .saltador.visible .saltador-marcas, .saltador.tocando .saltador-marcas { pointer-events: auto; }
  .saltador-marcas {
    display: flex; flex-direction: column; align-items: flex-end; gap: 9px; touch-action: none;
    padding: 11px 7px; border-radius: 999px;
    background: rgba(24, 24, 26, .5); -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
    transition: background-color .25s;
  }
  /* Su zona de toque llega hasta el borde de la pantalla y un poco arriba y abajo, nunca hacia el contenido */
  .saltador-marcas { position: relative; }
  .saltador-marcas::after { content: ''; position: absolute; top: -10px; bottom: -10px; left: 0; right: -10px; }
  .saltador.tocando .saltador-marcas { background: rgba(24, 24, 26, .72); }
  html[data-tema="claro"] .saltador-marcas { background: rgba(255, 255, 255, .6); }
  html[data-tema="claro"] .saltador.tocando .saltador-marcas { background: rgba(255, 255, 255, .84); }
  .saltador-marcas i {
    display: block; width: 10px; height: 2px; border-radius: 2px; background: var(--texto); opacity: .4;
    transition: width .22s var(--ease), opacity .2s;
  }
  .saltador-marcas i.actual { width: 16px; opacity: .95; }
  .saltador.tocando .saltador-marcas i { opacity: .55; transition-duration: .12s; }
  .saltador.tocando .saltador-marcas i.actual { opacity: 1; }
  .saltador-rotulo {
    position: absolute; right: calc(100% - 6px); top: 0; translate: 0 -50%; white-space: nowrap;
    font-size: 13px; font-weight: 600; color: #fff; padding: 7px 13px; border-radius: 999px;
    background: rgba(30, 30, 32, .88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    opacity: 0; transition: opacity .15s, transform .2s cubic-bezier(.2, .8, .2, 1); pointer-events: none;
  }
  .saltador.tocando .saltador-rotulo:not(:empty) { opacity: 1; }
  html[data-tema="claro"] .saltador-rotulo { background: rgba(255, 255, 255, .92); color: #111; }
  /* La flecha del carril de áreas no puede quedar debajo de la barra (que va encima de todo y se quedaría con el toque):
     en el celular el carril termina antes del borde, donde empieza la cápsula. */
  .demo-carril { margin-right: 22px; }
  /* Mientras viaja, lo que se revela lo hace rápido y sin esperar su turno: la sección llega ya pintada. */
  html.saltando .reveal { transition-duration: .35s; transition-delay: 0s; }
}

/* ═══ El menú del celular (tarea #75, 14-oct-2026) ═══
   Por debajo de 1000 px las secciones de la cabecera se escondían sin reemplazo y “Entrar” desaparecía bajo 640 px: en el
   teléfono no había cómo llegar a Precios o a Recursos sin bajar hasta el pie. El botón de dos rayas abre esa misma barra
   como una hoja de vidrio, con el estilo de los desplegables de Recursos e Idioma. En las pantallas más angostas
   (≤ 380 px) el tema se muda a la hoja y “Apúntate” se compacta: antes se salía por la derecha bajo 350 px. */
.menu-boton, .solo-menu { display: none; }
/* Con el menú abierto, ni el botón flotante de “Escríbenos” ni el aviso de cookies se le montan encima: la cabecera sube
   por encima del aviso (250) mientras la hoja está abierta. */
body:has(.cabecera.menu-abierto) .escribenos { opacity: 0; pointer-events: none; }
.cabecera.menu-abierto { z-index: 300; }
@media (max-width: 1000px) {
  .menu-boton {
    width: 34px; height: 34px; border-radius: 50%; flex: none;
    display: grid; place-content: center; gap: 5px;
    border: 1px solid var(--borde); color: var(--texto);
  }
  .menu-boton span { display: block; width: 14px; height: 1.6px; border-radius: 2px; background: currentColor; transition: transform .25s var(--ease); }
  .cabecera.menu-abierto .menu-boton span:first-child { transform: translateY(3.3px) rotate(45deg); }
  .cabecera.menu-abierto .menu-boton span:last-child { transform: translateY(-3.3px) rotate(-45deg); }
  .cabecera.menu-abierto .cabecera-nav {
    display: flex; flex-direction: column; gap: 2px;
    position: absolute; top: calc(100% + 6px); left: 12px; right: 12px; margin: 0;
    max-height: calc(100dvh - 90px); overflow-y: auto;
    background: rgba(25, 25, 25, .95); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--borde); border-radius: 18px; padding: 8px;
    animation: menu-entra .18s var(--ease) backwards;
  }
  .cabecera-nav a, .cabecera-nav .solo-menu { font-size: 16px; padding: 11px 14px; border-radius: 12px; text-align: left; color: var(--texto); }
  .cabecera-nav .recursos-menu { display: contents; }
  .cabecera-nav .recursos-boton { display: none; }
  .cabecera-nav .recursos-lista { display: contents; }
  .cabecera-nav .recursos-lista a { font-size: 16px; padding: 11px 14px; color: var(--tenue); }
  .cabecera-nav a.solo-menu { display: block; border-top: 1px solid var(--borde); border-radius: 0 0 12px 12px; margin-top: 4px; padding-top: 14px; font-weight: 600; }
  html[data-tema="claro"] .cabecera.menu-abierto .cabecera-nav { background: rgba(255, 255, 255, .95); }
}
@media (min-width: 641px) and (max-width: 1000px) {
  .cabecera.menu-abierto .cabecera-nav { left: auto; right: 24px; width: 300px; }
}
@media (max-width: 400px) {
  .cabecera { gap: 8px; padding: 0 12px; }
  .cabecera-acciones { gap: 6px; }
  .cabecera .ir-lista { padding: 9px 14px; font-size: 14px; }
  .idioma-actual { padding: 8px 9px; }
}
@media (max-width: 380px) {
  .cabecera .tema-boton { display: none; }
  .cabecera-nav .menu-tema { display: block; }
}

/* ═══ Páginas de búsqueda (paginasSeo.js, 30-oct-2026): tres tarjetas en fila; por debajo de 1000 px, una debajo de
   otra, para que la tercera no quede sola en su fila. ═══ */
.bento.de-tres { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .bento.de-tres { grid-template-columns: 1fr; } }
/* Las páginas de búsqueda existen solo en español: sin selector de idioma (data-solo-es lo pone paginasSeo.js). */
html[data-solo-es] #idioma-menu, html[data-solo-es] .pie-idiomas, html[data-solo-es] [data-i18n="pie.idioma"] { display: none; }