/* Logiciel Construction — el sitio de presentación.
 *
 * Aparte de la aplicación y sin React a propósito. Esto lo abre alguien que
 * llegó de Google con el móvil en la furgoneta: HTML servido tal cual se lee
 * entero antes de que un paquete de JavaScript termine de bajar, y se indexa
 * sin que Google tenga que ejecutar nada.
 *
 * Fondo blanco. Las secciones se separan con un gris muy suave y con líneas,
 * no con bloques de color: en una pantalla al sol el contraste alto se lee y
 * los fondos medios se lavan.
 *
 * El acento es azul de Quebec, no el índigo de cualquier SaaS. El naranja es
 * el de la pintura de replanteo y sale **una sola vez por pantalla**: en el
 * botón que queremos que pulsen.
 */

/* ---------- Las letras, servidas desde aquí ----------
 *
 * No se piden a Google. Un `<link>` a fonts.googleapis.com es una descarga
 * que bloquea el pintado, en un dominio distinto, con su DNS y su saludo TLS
 * — y quien abre esto está en la furgoneta con media raya de cobertura, que
 * es justo cuando eso se nota. Servidas desde el mismo sitio llegan por la
 * conexión que ya estaba abierta.
 *
 * De paso, nadie manda la IP del visitante a un tercero por el hecho de
 * abrir la página, que es un problema menos que explicar en la política de
 * privacidad bajo la Ley 25.
 *
 * `swap` y no `block`: si la letra tarda, se lee con la de reserva y luego
 * cambia. Un texto invisible esperando una fuente es una página en blanco.
 *
 * Cada cara viene partida en `latin` y `latin-ext` con su `unicode-range`,
 * como las sirve Google: una página que no usa ninguna letra del segundo
 * archivo no lo descarga.
 */

@font-face {
  font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/sitio/fuentes/plus-jakarta-sans-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/sitio/fuentes/plus-jakarta-sans-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("/sitio/fuentes/plus-jakarta-sans-800-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("/sitio/fuentes/plus-jakarta-sans-800-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Public Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/sitio/fuentes/public-sans-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Public Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/sitio/fuentes/public-sans-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Public Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/sitio/fuentes/public-sans-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Public Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/sitio/fuentes/public-sans-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Public Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/sitio/fuentes/public-sans-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Public Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/sitio/fuentes/public-sans-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Public Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/sitio/fuentes/public-sans-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Public Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/sitio/fuentes/public-sans-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --fondo: #FFFFFF;
  --fondo-2: #F7F9FC;
  --superficie: #FFFFFF;
  --superficie-2: #F1F5FA;
  --linea: #E2E8F1;
  --linea-suave: #EDF1F7;
  --tinta: #0B1220;
  --tinta-2: #3B4859;
  --apagado: #667585;
  --azul: #1546A0;
  --azul-claro: #EAF0FB;
  --azul-oscuro: #0E3271;
  --senal: #D9541B;
  --senal-clara: #FDEFE6;
  --verde: #1C6B4A;

  --display: "Plus Jakarta Sans", -apple-system, "Segoe UI", sans-serif;
  --texto: "Public Sans", -apple-system, "Segoe UI", Roboto, sans-serif;

  --radio: 16px;
  --sombra-1: 0 1px 2px rgba(11, 18, 32, .05), 0 2px 8px -4px rgba(11, 18, 32, .08);
  --sombra-2: 0 2px 6px rgba(11, 18, 32, .06), 0 16px 32px -16px rgba(11, 18, 32, .18);
  --sombra-3: 0 4px 10px rgba(11, 18, 32, .07), 0 32px 64px -24px rgba(11, 18, 32, .28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }
a { color: inherit; }

.envoltura { width: 100%; max-width: 1160px; margin: 0 auto; padding-inline: 20px; }
.estrecho { max-width: 780px; }

/* ---------- Tipografía ----------
 *
 * Los títulos mandan y el texto que los acompaña se aparta. No es cuestión de
 * encoger la página entera —eso la escala y no cambia nada—, sino de separar
 * las dos cosas: los tamaños de `h1`, `h2` y `h3` son los que eran, y lo que
 * baja es la descripción.
 *
 * El texto corriente está a 16 px, que es el mínimo con el que se lee un móvil
 * a la luz del sol y en el que no vale la pena ahorrar. Lo que se recorta es
 * sólo lo que estaba de más: el cuerpo estaba a 17 y el `h4` también, de modo
 * que un encabezado medía exactamente lo mismo que su propio párrafo. Ahora el
 * `h4` queda por encima sin tocarlo.
 *
 * Los párrafos secundarios —lo que describe una tarjeta, un plan o una razón—
 * van a 15,5 px y en `--tinta-2`. Son apoyo del titular que tienen encima, no
 * compiten con él.
 */

h1, h2, h3, h4 { font-family: var(--display); margin: 0; text-wrap: balance; }
h1 { font-size: clamp(38px, 6.2vw, 68px); line-height: 1.02; font-weight: 800; letter-spacing: -0.035em; }
h2 { font-size: clamp(28px, 4vw, 44px); line-height: 1.08; font-weight: 800; letter-spacing: -0.03em; }
h3 { font-size: clamp(20px, 2.4vw, 25px); line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }
h4 { font-size: 17px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0; }

.sobretitulo {
  font-family: var(--texto);
  font-size: 12px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--azul); margin: 0;
}
.entradilla { font-size: clamp(16.5px, 1.6vw, 18.5px); line-height: 1.58; color: var(--tinta-2); max-width: 58ch; }
.pie-nota { font-size: 14px; color: var(--apagado); }

/* ---------- Botones ---------- */

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--texto); font-size: 16px; font-weight: 600;
  text-decoration: none; padding: 13px 22px;
  border-radius: 11px; border: 1px solid transparent;
  transition: transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .16s ease, background .16s ease;
  white-space: nowrap; cursor: pointer;
}
.boton:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; }
.boton-principal { background: var(--senal); color: #fff; box-shadow: 0 2px 6px rgba(217,84,27,.22), 0 12px 28px -12px rgba(217,84,27,.5); }
.boton-principal:hover { background: #C24A16; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(217,84,27,.26), 0 20px 40px -14px rgba(217,84,27,.55); }
.boton-secundario { background: var(--superficie); color: var(--tinta); border-color: var(--linea); box-shadow: var(--sombra-1); }
.boton-secundario:hover { background: var(--fondo-2); transform: translateY(-1px); box-shadow: var(--sombra-2); }
.boton-azul { background: var(--azul); color: #fff; }
.boton-azul:hover { background: var(--azul-oscuro); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .boton:hover { transform: none; } }

/* ---------- Cabecera ---------- */

.cabecera {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--linea-suave);
}
.cabecera .envoltura { display: flex; align-items: center; gap: 14px; height: 70px; min-width: 0; }

.marca { display: flex; align-items: center; gap: 11px; text-decoration: none; flex-shrink: 0; min-width: 0; }
.marca .mark { width: 36px; height: 36px; flex-shrink: 0; object-fit: contain; }
.marca .nombre {
  font-family: var(--display); font-weight: 800; font-size: 18px;
  letter-spacing: -0.03em; line-height: 1.05; white-space: nowrap;
}
.marca .nombre small { display: block; font-weight: 600; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--apagado); }

/* ---------- La cabecera en un teléfono ----------
 *
 * Aquí no cabe todo, y lo que no cabe no se encoge: se sale, y el navegador
 * deja la página arrastrable de lado. Así que se decide qué se va, por orden
 * de lo que menos falta hace.
 *
 * Primero el botón naranja. Es el único elemento de la cabecera que está
 * repetido: todas las páginas llevan la misma llamada abajo del todo, y la
 * portada la lleva además a dos dedos del titular. «Iniciar sesión» no está
 * repetido en ningún sitio, y es lo que busca quien ya es cliente, así que
 * ese se queda.
 *
 * Después el nombre escrito. El casco es el mismo icono que la aplicación
 * tiene en la pantalla de inicio del teléfono; a 36 px se reconoce, y el
 * nombre completo está en el título de la pestaña, en el pie y en el propio
 * titular de la portada.
 *
 * `scripts/comprobar-ancho.mjs` mide las 28 páginas a 320 y 390 px con las
 * letras de verdad y falla si algo se sale. Los cortes de abajo salieron de
 * esa medición, no de una estimación. */
@media (max-width: 760px) {
  .cabecera .envoltura { gap: 10px; height: 64px; }
  .menu .boton { font-size: 14.5px; padding: 9px 14px; }
  .menu > .solo-ancho { display: none; }
  .marca .nombre { font-size: 16px; }
  .marca .nombre small { font-size: 10px; }
}
@media (max-width: 430px) {
  /* Sin el nombre al lado, un casco de 36 px se queda flotando en un hueco
     vacío y parece que falta algo. A 44 es la marca, no un resto. */
  .marca .mark { width: 44px; height: 44px; }
  .marca .nombre { display: none; }
}

.menu { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.menu > a { text-decoration: none; font-size: 15.5px; font-weight: 500; color: var(--tinta-2); padding: 9px 13px; border-radius: 9px; transition: background .14s ease, color .14s ease; }
.menu > a:hover { background: var(--superficie-2); color: var(--tinta); }
.menu > a[aria-current="page"] { color: var(--azul); font-weight: 600; }
.menu .boton { font-size: 15px; padding: 10px 18px; }
@media (max-width: 1040px) { .menu > a:not(.boton) { display: none; } .menu { gap: 8px; } }

/* ---------- Selector de idioma ---------- */

.idiomas { position: relative; flex-shrink: 0; }
.idiomas > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 15px; font-weight: 600; color: var(--tinta-2);
  padding: 9px 12px; border-radius: 9px; border: 1px solid var(--linea);
  background: var(--superficie);
}
.idiomas > summary::-webkit-details-marker { display: none; }
.idiomas > summary:hover { background: var(--fondo-2); color: var(--tinta); }
.idiomas > summary:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.idiomas > summary svg { width: 16px; height: 16px; opacity: .65; }
.idiomas[open] > summary { background: var(--superficie-2); color: var(--tinta); }
.idiomas-lista {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 70;
  min-width: 190px; padding: 6px;
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: 13px; box-shadow: var(--sombra-3);
  display: grid; gap: 2px;
}
.idiomas-lista a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  text-decoration: none; font-size: 15px; color: var(--tinta-2);
  padding: 9px 11px; border-radius: 9px; white-space: nowrap;
}
.idiomas-lista a:hover { background: var(--superficie-2); color: var(--tinta); }
.idiomas-lista a[aria-current="true"] { color: var(--azul); font-weight: 600; background: var(--azul-claro); }
.idiomas-lista .codigo { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .55; }

/* ---------- Portada ---------- */

.portada { padding-block: clamp(44px, 7vw, 84px) clamp(32px, 5vw, 56px); position: relative; }
.portada h1 { max-width: 15ch; }
.portada .entradilla { margin-top: 20px; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
/* Cuántas plazas de fundador quedan: la pone el script, y sin él no se ve. */
.plazas { margin-top: 22px; font-weight: 600; color: #fff; font-size: 16px; }
.plazas span { display: inline-block; margin-right: 22px; }
.bajo-acciones { margin-top: 15px; font-size: 14px; color: var(--apagado); }

/* ---------- La escena con tarjetas flotantes ---------- */

.escena { position: relative; margin-top: clamp(40px, 6vw, 68px); display: grid; place-items: center; min-height: 470px; }

/* Un halo detrás del teléfono, para que las tarjetas tengan de dónde
   despegarse. Sobre blanco, sin esto todo queda plano. */
.escena::before {
  content: ""; position: absolute; z-index: 0;
  width: min(760px, 96%); aspect-ratio: 1.35;
  background: radial-gradient(ellipse at center, rgba(21,70,160,.10), rgba(21,70,160,.03) 42%, transparent 68%);
  pointer-events: none;
}

.escena-centro {
  position: relative; z-index: 3;
  width: min(282px, 72vw); aspect-ratio: 9 / 18.5;
  border-radius: 38px; background: #0B1220; padding: 9px;
  box-shadow: var(--sombra-3), 0 0 0 1px rgba(11,18,32,.6);
}
.pantalla { width: 100%; height: 100%; border-radius: 30px; background: var(--superficie); overflow: hidden; display: flex; flex-direction: column; }

.flotante {
  position: relative; z-index: 2;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra-3);
  padding: 15px 17px; width: 262px;
  transition: transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s ease;
}
.flotante:hover { transform: translateY(-4px); box-shadow: var(--sombra-3), 0 40px 70px -30px rgba(11,18,32,.34); }
@media (prefers-reduced-motion: reduce) { .flotante:hover { transform: none; } }
.flotante h4 { font-family: var(--texto); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--apagado); margin-bottom: 9px; }

@media (min-width: 1040px) {
  .escena { min-height: 640px; }
  .flotante { position: absolute; }
  .f-gps { top: 4%; left: 0; }
  .f-nomina { top: 40%; left: -1%; width: 284px; }
  .f-factura { top: 6%; right: 0; width: 292px; }
  .f-integra { bottom: 2%; right: 1%; width: 304px; }
}
@media (max-width: 1039px) {
  .escena { gap: 18px; }
  .escena::before { display: none; }
  .flotante { width: 100%; max-width: 430px; }
}

/* ---------- Secciones ---------- */

.seccion { padding-block: clamp(56px, 8vw, 100px); }
.seccion-clara { background: var(--fondo-2); border-block: 1px solid var(--linea-suave); }
.seccion-oscura { background: var(--tinta); color: #DDE5EF; }
.seccion-oscura h2, .seccion-oscura h3, .seccion-oscura h4 { color: #fff; }
.seccion-oscura .entradilla { color: #9FB0C4; }
.seccion-oscura .sobretitulo { color: #7FA5E8; }
.encabezado-seccion { max-width: 62ch; }
.encabezado-seccion h2 { margin-top: 11px; }
.encabezado-seccion .entradilla { margin-top: 15px; }

/* ---------- Rejillas y tarjetas ---------- */

.rejilla { display: grid; gap: 18px; margin-top: 42px; }
.rejilla-2 { grid-template-columns: repeat(2, 1fr); }
.rejilla-3 { grid-template-columns: repeat(3, 1fr); }
.rejilla-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 920px) { .rejilla-3, .rejilla-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .rejilla-2, .rejilla-3, .rejilla-4 { grid-template-columns: 1fr; } }

.tarjeta {
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 26px;
  box-shadow: var(--sombra-1);
  transition: transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease;
}
.tarjeta:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); }
@media (prefers-reduced-motion: reduce) { .tarjeta:hover { transform: none; } }
.tarjeta h3 { margin-bottom: 11px; }
.tarjeta p { color: var(--tinta-2); font-size: 15.5px; }
.seccion-oscura .tarjeta { background: #151E2C; border-color: #26313F; box-shadow: none; }
.seccion-oscura .tarjeta p { color: #9FB0C4; }

.icono {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--azul-claro); color: var(--azul);
  display: grid; place-items: center; margin-bottom: 17px;
}
.icono svg { width: 22px; height: 22px; }
.seccion-oscura .icono { background: #16294C; color: #7FA5E8; }

/* ---------- Las cuatro razones ---------- */

.razones { display: grid; gap: 1px; margin-top: 46px; background: var(--linea); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra-1); }
@media (min-width: 880px) { .razones { grid-template-columns: repeat(2, 1fr); } }
.razon { background: var(--superficie); padding: 30px; transition: background .18s ease; }
.razon:hover { background: var(--fondo-2); }
.razon .cifra { font-family: var(--display); font-size: 13px; font-weight: 800; letter-spacing: .1em; color: var(--senal); }
.razon h3 { margin: 11px 0; }
.razon p { color: var(--tinta-2); font-size: 15.5px; }

/* ---------- Cifras reales ---------- */

.cifras { display: grid; gap: 16px; margin-top: 42px; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 920px) { .cifras { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .cifras { grid-template-columns: 1fr; } }
.cifra-caja { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 24px; box-shadow: var(--sombra-1); }
.cifra-caja .valor { font-family: var(--display); font-size: clamp(32px, 4.2vw, 46px); font-weight: 800; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--azul); }
.cifra-caja .etiqueta { margin-top: 12px; font-size: 14.5px; color: var(--tinta-2); }
.seccion-oscura .cifra-caja { background: #151E2C; border-color: #26313F; box-shadow: none; }
.seccion-oscura .cifra-caja .valor { color: #7FA5E8; }
.seccion-oscura .cifra-caja .etiqueta { color: #9FB0C4; }

/* ---------- Precios ---------- */

.periodo-toggle { display: flex; justify-content: center; gap: 4px; margin: 0 auto 6px; background: var(--superficie); border: 1px solid var(--linea); border-radius: 12px; padding: 4px; width: fit-content; }
.periodo-toggle button { all: unset; cursor: pointer; font-family: var(--cuerpo); font-size: 15px; font-weight: 600; padding: 9px 22px; border-radius: 9px; color: var(--apagado); transition: background .18s, color .18s; display: inline-flex; align-items: center; gap: 8px; }
.periodo-toggle button.activo { background: var(--azul); color: #fff; }
.periodo-toggle button:not(.activo):hover { color: var(--tinta); }
.etiqueta-ahorro { font-size: 11px; font-weight: 700; background: #16a34a; color: #fff; padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.periodo-toggle button.activo .etiqueta-ahorro { background: rgba(255,255,255,.25); }
/* En un teléfono estrecho «Annuel · 2 mois gratuits» no cabe al lado de
   «Mensuel». La etiqueta se va del botón: ya sale junto al precio anual. */
.periodo-toggle { max-width: 100%; }
@media (max-width: 420px) {
  .periodo-toggle button { padding: 9px 16px; }
  .periodo-toggle .etiqueta-ahorro { display: none; }
}

.planes { display: grid; gap: 20px; margin-top: 28px; }
@media (min-width: 900px) { .planes { grid-template-columns: repeat(2, 1fr); align-items: start; } }
.plan { background: var(--superficie); border: 1px solid var(--linea); border-radius: 20px; padding: 32px; box-shadow: var(--sombra-1); }
.plan.destacado { border-color: var(--azul); box-shadow: 0 0 0 1px var(--azul), var(--sombra-3); }
.plan .insignia { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: var(--azul); color: #fff; padding: 5px 11px; border-radius: 7px; margin-bottom: 15px; }
.plan .precio { display: flex; align-items: baseline; gap: 7px; margin: 17px 0 7px; flex-wrap: wrap; font-family: var(--display); font-size: 58px; font-weight: 800; line-height: 1; letter-spacing: -0.045em; }
/* `display: flex` le ganaba al atributo `hidden`, y el precio anual salía
   siempre debajo del mensual: el selector no escondía nada. */
.plan .precio[hidden] { display: none; }
.plan .precio .u { font-size: 16px; color: var(--apagado); font-weight: 400; letter-spacing: 0; }
.plan .precio .ahorro { font-size: 13px; font-weight: 700; background: #16a34a; color: #fff; padding: 3px 10px; border-radius: 7px; letter-spacing: 0; align-self: center; }
.plan .para { color: var(--tinta-2); font-size: 15.5px; }
.plan ul { list-style: none; margin: 24px 0 28px; padding: 0; display: grid; gap: 12px; }
.plan li { display: flex; gap: 11px; align-items: flex-start; font-size: 15.5px; color: var(--tinta-2); }
.plan li svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 4px; color: var(--verde); }
.plan .boton { width: 100%; }

/* ---------- Preguntas ---------- */

.preguntas { margin-top: 42px; border-top: 1px solid var(--linea); }
.pregunta { border-bottom: 1px solid var(--linea); }
.pregunta summary {
  cursor: pointer; list-style: none; padding: 21px 44px 21px 0;
  font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: -0.02em;
  position: relative;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after {
  content: ""; position: absolute; right: 8px; top: 50%;
  width: 13px; height: 13px; margin-top: -7px;
  background: currentColor; opacity: .4;
  clip-path: polygon(46% 0, 54% 0, 54% 46%, 100% 46%, 100% 54%, 54% 54%, 54% 100%, 46% 100%, 46% 54%, 0 54%, 0 46%, 46% 46%);
  transition: transform .2s ease, opacity .2s ease;
}
.pregunta[open] summary::after { transform: rotate(45deg); opacity: .7; }
.pregunta summary:hover { color: var(--azul); }
.pregunta summary:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.pregunta .respuesta { padding: 0 44px 24px 0; color: var(--tinta-2); display: grid; gap: 13px; }

/* ---------- Llamada final ---------- */

.cierre {
  background: linear-gradient(145deg, var(--azul) 0%, var(--azul-oscuro) 100%);
  color: #fff; border-radius: 24px; padding: clamp(34px, 6vw, 64px); text-align: center;
  box-shadow: var(--sombra-3);
}
.cierre h2 { color: #fff; max-width: 20ch; margin-inline: auto; }
.cierre p { color: #C4D6F5; margin-top: 17px; max-width: 52ch; margin-inline: auto; }
.cierre .acciones { justify-content: center; }
.cierre .boton-secundario { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.28); box-shadow: none; }
.cierre .boton-secundario:hover { background: rgba(255,255,255,.2); }

/* ---------- Pie ---------- */

/* La franja del programa de afiliados, encima del pie de todas las páginas.
   Colores fijos y no los del tema: en oscuro --azul se aclara y el texto
   blanco encima dejaría de leerse. */
.franja-afiliados { background: #1546A0; color: #fff; padding-block: 22px; }
.franja-afiliados-dentro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.franja-afiliados p { margin: 0; max-width: 62ch; font-size: 16px; line-height: 1.45; color: #DCE6F7; }
.franja-afiliados strong { color: #fff; }
.boton-claro { background: #fff; color: #1546A0; }
.boton-claro:hover { background: #EAF0FB; transform: translateY(-1px); }
.pie { background: var(--tinta); color: #93A3B8; padding-block: 56px 36px; font-size: 15px; }
.pie a { color: #C0CDDC; text-decoration: none; }
.pie a:hover { color: #fff; text-decoration: underline; }
.pie .marca .nombre { color: #fff; }
.pie .marca .nombre small { color: #7E8FA5; }
.pie-rejilla { display: grid; gap: 32px; grid-template-columns: 1.5fr repeat(3, 1fr); }
@media (max-width: 820px) { .pie-rejilla { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .pie-rejilla { grid-template-columns: 1fr; } }
.pie .pie-canal { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; color: #fff; font-weight: 600; }
.pie .pie-canal svg { color: #FF3B30; flex-shrink: 0; }
.pie .pie-redes { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; }
.pie .pie-redes a { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 600; }
.pie .pie-redes svg { flex-shrink: 0; }
.pie h4 { color: #fff; font-family: var(--texto); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 15px; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pie .abajo { margin-top: 42px; padding-top: 26px; border-top: 1px solid #1E2836; display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; font-size: 14px; }

/* ---------- Trocitos de interfaz para las tarjetas flotantes ---------- */

.mini-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; padding: 6px 0; }
.mini-fila + .mini-fila { border-top: 1px solid var(--linea-suave); }
.mini-fila .val { font-variant-numeric: tabular-nums; font-weight: 600; }
.mini-total { display: flex; align-items: center; justify-content: space-between; margin-top: 11px; padding-top: 11px; border-top: 2px solid var(--tinta); font-size: 16px; font-weight: 700; }
.mini-total .val { font-variant-numeric: tabular-nums; }
.pastilla { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.pastilla-verde { background: #E3F1EA; color: var(--verde); }
.logos-integra { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.logo-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--superficie-2); border-radius: 10px; padding: 8px 12px; font-size: 13.5px; font-weight: 600; }
.logo-chip svg { width: 16px; height: 16px; }

/* ---------- Prosa (guía, legales) ---------- */

.prosa { max-width: 68ch; }
.prosa h2 { margin-top: 56px; font-size: clamp(25px, 3.2vw, 34px); }
.prosa h3 { margin-top: 34px; }
.prosa p { margin-top: 16px; color: var(--tinta-2); }
.prosa ul { margin-top: 16px; padding-left: 22px; color: var(--tinta-2); display: grid; gap: 9px; }
.prosa strong { color: var(--tinta); font-weight: 600; }
.prosa code { background: var(--superficie-2); border-radius: 5px; padding: 1px 6px; font-size: .9em; }
.aviso { background: var(--azul-claro); border-radius: var(--radio); padding: 21px 23px; margin-top: 28px; }
.aviso p { margin-top: 0; color: var(--tinta-2); }
.aviso p + p { margin-top: 12px; }

.tabla-scroll { overflow-x: auto; margin-top: 26px; }
table { border-collapse: collapse; width: 100%; min-width: 440px; font-size: 15.5px; }
th, td { text-align: left; padding: 13px 16px 13px 0; border-bottom: 1px solid var(--linea); vertical-align: top; }
th { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--apagado); font-weight: 700; }
td.n { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }

/* ---------- Formulario ---------- */

.campo { display: grid; gap: 7px; }
.campo label { font-size: 14px; font-weight: 600; }
.campo input, .campo textarea, .campo select {
  font-family: var(--texto); font-size: 16px; color: var(--tinta);
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: 11px; padding: 12px 14px; width: 100%;
}
.campo input:focus, .campo textarea:focus, .campo select:focus { outline: 3px solid var(--azul-claro); border-color: var(--azul); }
.campo textarea { min-height: 104px; resize: vertical; }
.dos-campos { display: grid; gap: 16px; }
@media (min-width: 560px) { .dos-campos { grid-template-columns: 1fr 1fr; } }
form { display: grid; gap: 16px; }
.resultado { border-radius: 11px; padding: 14px 16px; font-size: 15.5px; }
.resultado-ok { background: #E3F1EA; color: var(--verde); }
.resultado-mal { background: var(--senal-clara); color: var(--senal); }

/* ---------- Bloques de la página de funciones ---------- */

.bloque { padding-block: clamp(46px, 6vw, 78px); border-top: 1px solid var(--linea-suave); }
.bloque:first-of-type { border-top: 0; }
.bloque-rejilla { display: grid; gap: 34px; align-items: start; }
@media (min-width: 920px) { .bloque-rejilla { grid-template-columns: .85fr 1.15fr; gap: 58px; } }
.lista-limpia { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 15px; }
.lista-limpia li { display: flex; gap: 12px; align-items: flex-start; }
.lista-limpia > li > svg { width: 19px; height: 19px; flex-shrink: 0; margin-top: 4px; color: var(--azul); }
.lista-limpia strong { display: block; }
.lista-limpia span { color: var(--tinta-2); font-size: 15.5px; }

/* ---------- Oscuro ---------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #0A0F17;
    --fondo-2: #0F1622;
    --superficie: #131B27;
    --superficie-2: #1B2534;
    --linea: #253141;
    --linea-suave: #1C2634;
    --tinta: #E9EEF6;
    --tinta-2: #AFBECF;
    --apagado: #8090A3;
    --azul: #7BA6EE;
    --azul-claro: #15264A;
    --azul-oscuro: #A0C0F4;
    --senal: #EA7A50;
    --senal-clara: #2C1911;
    --verde: #5FBB92;
    --sombra-1: 0 1px 2px rgba(0,0,0,.4);
    --sombra-2: 0 2px 6px rgba(0,0,0,.45), 0 16px 32px -16px rgba(0,0,0,.7);
    --sombra-3: 0 4px 10px rgba(0,0,0,.5), 0 32px 64px -24px rgba(0,0,0,.85);
  }
  :root:not([data-theme="light"]) .cabecera { background: rgba(10,15,23,.86); }
  :root:not([data-theme="light"]) .escena::before { background: radial-gradient(ellipse at center, rgba(123,166,238,.15), rgba(123,166,238,.04) 42%, transparent 68%); }
  :root:not([data-theme="light"]) .escena-centro { background: #253141; }
  :root:not([data-theme="light"]) .seccion-oscura { background: #050810; }
  :root:not([data-theme="light"]) .seccion-oscura .tarjeta,
  :root:not([data-theme="light"]) .seccion-oscura .cifra-caja { background: #101823; border-color: #212C3B; }
  :root:not([data-theme="light"]) .boton-principal,
  :root:not([data-theme="light"]) .boton-azul,
  :root:not([data-theme="light"]) .plan .insignia { color: #0A0F17; }
  :root:not([data-theme="light"]) .cierre { background: linear-gradient(145deg, #15264A 0%, #0D1830 100%); }
  :root:not([data-theme="light"]) .cierre p { color: #A8BBDA; }
  :root:not([data-theme="light"]) .pastilla-verde { background: #10301F; }
  :root:not([data-theme="light"]) .resultado-ok { background: #10301F; }
  :root:not([data-theme="light"]) .pie { background: #050810; }
  :root:not([data-theme="light"]) .pie .abajo { border-top-color: #1A2432; }
}

/* La entrada al hacer scroll se activa desde `<html class="js">`, que pone el
 * propio script en cuanto corre. Escrito al revés —esconder por defecto y
 * enseñar con JavaScript— un bloqueador, un fallo de red o el rastreador de
 * Google dejarían la página en blanco con todo el texto dentro del HTML. */
@media (prefers-reduced-motion: no-preference) {
  .js .aparece { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.3,1); }
  .js .aparece.visible { opacity: 1; transform: none; }
}


/* ========================================================================== */
/* Capa visual premium — presentación de producto                             */
/* Mantiene el contenido y la estructura; eleva jerarquía, profundidad y     */
/* respuesta visual con una estética editorial inspirada en producto digital. */
/* ========================================================================== */

:root {
  --fondo: #fbfcfe;
  --fondo-2: #f3f6fb;
  --superficie: rgba(255, 255, 255, .86);
  --superficie-2: #eef3f9;
  --linea: rgba(16, 36, 66, .12);
  --linea-suave: rgba(16, 36, 66, .07);
  --tinta: #0a1628;
  --tinta-2: #43546a;
  --apagado: #718197;
  --azul: #1557d6;
  --azul-claro: #e9f0ff;
  --azul-oscuro: #0c358b;
  --senal: #e05a24;
  --sombra-1: 0 1px 2px rgba(10, 22, 40, .04), 0 10px 24px -18px rgba(10, 22, 40, .28);
  --sombra-2: 0 12px 30px -18px rgba(10, 22, 40, .32), 0 2px 8px rgba(10, 22, 40, .06);
  --sombra-3: 0 28px 70px -32px rgba(10, 22, 40, .42), 0 8px 22px rgba(10, 22, 40, .10);
}

body {
  background:
    radial-gradient(circle at 82% 0%, rgba(21, 87, 214, .055), transparent 31rem),
    var(--fondo);
}

.cabecera {
  background: rgba(251, 252, 254, .74);
  border-bottom-color: rgba(16, 36, 66, .09);
  box-shadow: 0 8px 28px -24px rgba(10, 22, 40, .45);
}

.cabecera .envoltura { height: 76px; }
.marca .mark { filter: drop-shadow(0 5px 8px rgba(21, 87, 214, .16)); }
.marca .nombre { letter-spacing: -.045em; }
.menu > a { transition: background .18s ease, color .18s ease, transform .18s ease; }
.menu > a:hover { transform: translateY(-1px); }

.portada {
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(70px, 10vw, 128px) clamp(42px, 6vw, 76px);
  background:
    radial-gradient(ellipse 50% 38% at 50% 0%, rgba(21, 87, 214, .12), transparent 74%),
    linear-gradient(180deg, rgba(255,255,255,.7), rgba(247,250,254,.14));
}

.portada::before,
.portada::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 28rem;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(1px);
  pointer-events: none;
  opacity: .7;
}
.portada::before { left: -22rem; top: 14rem; background: radial-gradient(circle, rgba(224,90,36,.12), transparent 68%); }
.portada::after { right: -20rem; top: 22rem; background: radial-gradient(circle, rgba(21,87,214,.14), transparent 68%); }
.portada > .envoltura { text-align: center; }
.portada h1 { max-width: 14ch; margin-inline: auto; letter-spacing: -.065em; text-shadow: 0 2px 24px rgba(21, 87, 214, .08); }
.portada .sobretitulo { display: inline-flex; align-items: center; gap: 10px; }
.portada .sobretitulo::before,
.portada .sobretitulo::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .45; }
.portada .entradilla { margin-inline: auto; max-width: 52ch; color: #52647b; }
.portada .acciones { justify-content: center; }
.portada .bajo-acciones { color: #7c8da3; }

.boton {
  min-height: 48px;
  border-radius: 13px;
  font-weight: 700;
  letter-spacing: -.01em;
  transition: transform .22s cubic-bezier(.23,1,.32,1), box-shadow .22s ease, background .22s ease, border-color .22s ease;
}
.boton-principal { box-shadow: 0 8px 18px -8px rgba(224, 90, 36, .55), 0 2px 5px rgba(224, 90, 36, .16); }
.boton-principal:hover { transform: translateY(-3px) scale(1.01); }
.boton-secundario { background: rgba(255,255,255,.72); border-color: rgba(16,36,66,.14); }
.boton-secundario:hover { transform: translateY(-2px); border-color: rgba(21,87,214,.3); }

.escena {
  min-height: 650px;
  margin-top: clamp(54px, 8vw, 96px);
  perspective: 1200px;
}
.escena::before {
  width: min(920px, 100%);
  aspect-ratio: 1.5;
  background:
    radial-gradient(ellipse at center, rgba(21,87,214,.18), rgba(21,87,214,.06) 37%, transparent 70%),
    radial-gradient(ellipse at center, rgba(224,90,36,.09), transparent 48%);
  filter: blur(2px);
}
.escena::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: min(540px, 70%);
  height: 34px;
  bottom: 3%;
  border-radius: 50%;
  background: rgba(11, 28, 54, .17);
  filter: blur(25px);
  pointer-events: none;
}
.escena-centro {
  border: 1px solid rgba(255,255,255,.35);
  transform: rotateX(1deg) rotateY(-3deg);
  box-shadow: 0 40px 80px -34px rgba(10,22,40,.62), 0 12px 24px rgba(10,22,40,.22), inset 0 0 0 1px rgba(255,255,255,.08);
  transition: transform .6s cubic-bezier(.23,1,.32,1), box-shadow .6s ease;
}
.escena:hover .escena-centro { transform: rotateX(0) rotateY(0) translateY(-5px); box-shadow: 0 48px 92px -34px rgba(10,22,40,.65), 0 16px 30px rgba(10,22,40,.22), inset 0 0 0 1px rgba(255,255,255,.1); }
.pantalla { box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.flotante {
  border-color: rgba(255,255,255,.72);
  background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(247,250,254,.78));
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 26px 56px -28px rgba(10,22,40,.44), 0 4px 12px rgba(10,22,40,.08);
}
.flotante:hover { transform: translateY(-7px) scale(1.015); box-shadow: 0 34px 70px -30px rgba(10,22,40,.5), 0 6px 14px rgba(10,22,40,.1); }
.aparece { opacity: 0; transform: translateY(18px); }
.js .aparece { transition: opacity .7s ease, transform .7s cubic-bezier(.23,1,.32,1); }
.js .aparece.visible { opacity: 1; transform: translateY(0); }
.js .f-gps { transition-delay: .08s; }
.js .f-nomina { transition-delay: .16s; }
.js .f-factura { transition-delay: .24s; }
.js .f-integra { transition-delay: .32s; }

.seccion { padding-block: clamp(72px, 10vw, 132px); }
.seccion-clara { background: linear-gradient(180deg, #f2f6fb, #f8fafd); border-block-color: rgba(16,36,66,.06); }
.seccion-oscura { background: linear-gradient(135deg, #091426, #0d2140 68%, #102c58); }
.encabezado-seccion { max-width: 66ch; }
.encabezado-seccion h2 { letter-spacing: -.055em; }

.tarjeta,
.cifra-caja,
.plan {
  border-color: rgba(16,36,66,.10);
  border-radius: 20px;
  box-shadow: var(--sombra-1);
  transition: transform .3s cubic-bezier(.23,1,.32,1), box-shadow .3s ease, border-color .3s ease;
}
.tarjeta:hover,
.cifra-caja:hover,
.plan:hover { transform: translateY(-6px); border-color: rgba(21,87,214,.22); box-shadow: var(--sombra-2); }
.icono { border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(21,87,214,.08); }

.razones { border-color: rgba(16,36,66,.1); border-radius: 20px; box-shadow: var(--sombra-1); }
.razon { padding: 34px; transition: background .25s ease, transform .25s ease; }
.razon:hover { background: #fff; }
.razon .cifra { letter-spacing: .16em; }

.plan { padding: clamp(28px, 4vw, 40px); }
.plan.destacado { box-shadow: 0 0 0 1px var(--azul), 0 30px 70px -34px rgba(21,87,214,.46); }
.plan .insignia { border-radius: 999px; padding-inline: 13px; }

.preguntas { border-top-color: rgba(16,36,66,.12); }
.pregunta { border-bottom-color: rgba(16,36,66,.12); }
.pregunta summary { padding-block: 25px; }

.cierre {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 80% 10%, rgba(119,170,255,.26), transparent 30%), linear-gradient(135deg, #1557d6, #0b3287);
  border-radius: 28px;
  box-shadow: 0 32px 76px -34px rgba(21,87,214,.6);
}
.cierre::after { content: ""; position: absolute; width: 22rem; height: 22rem; right: -12rem; bottom: -14rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 0 0 28px rgba(255,255,255,.035), 0 0 0 56px rgba(255,255,255,.025); pointer-events: none; }

@media (max-width: 1039px) {
  .escena { min-height: 0; }
  .escena::after { display: none; }
}
@media (max-width: 640px) {
  .portada { padding-top: 58px; }
  .portada h1 { max-width: 12ch; }
  .portada .sobretitulo::before, .portada .sobretitulo::after { width: 16px; }
  .escena { margin-top: 48px; }
  .flotante { border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .escena-centro, .escena:hover .escena-centro, .flotante:hover, .tarjeta:hover, .cifra-caja:hover, .plan:hover { transform: none; }
  .js .aparece { transition: none; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #080f1c;
    --fondo-2: #0d1726;
    --superficie: rgba(18, 30, 48, .88);
    --superficie-2: #17263b;
    --linea: rgba(190, 211, 240, .14);
    --linea-suave: rgba(190, 211, 240, .08);
    --tinta: #edf4ff;
    --tinta-2: #b5c4d8;
    --apagado: #8295ad;
  }
  :root:not([data-theme="light"]) body { background: radial-gradient(circle at 82% 0%, rgba(74,132,245,.12), transparent 31rem), var(--fondo); }
  :root:not([data-theme="light"]) .cabecera { background: rgba(8,15,28,.74); }
  :root:not([data-theme="light"]) .portada { background: radial-gradient(ellipse 50% 38% at 50% 0%, rgba(74,132,245,.16), transparent 74%), linear-gradient(180deg, rgba(8,15,28,.72), rgba(13,23,38,.14)); }
  :root:not([data-theme="light"]) .flotante { background: linear-gradient(145deg, rgba(24,39,61,.94), rgba(17,29,46,.86)); border-color: rgba(190,211,240,.16); }
  /* Estos dos fondos están escritos en claro más arriba, no con las variables:
     en un móvil en modo oscuro la letra se volvía clara y el fondo no, y las
     preguntas frecuentes salían blanco sobre blanco. */
  :root:not([data-theme="light"]) .seccion-clara { background: linear-gradient(180deg, #0d1726, #0a1322); border-block-color: var(--linea-suave); }
  :root:not([data-theme="light"]) .razon:hover { background: var(--superficie-2); }
  :root:not([data-theme="light"]) .preguntas,
  :root:not([data-theme="light"]) .pregunta { border-color: var(--linea); }
}


/* ---------- Mockup de teléfono premium ---------- */
.escena-centro {
  width: min(300px, 72vw);
  aspect-ratio: 9 / 19.2;
  border-radius: 46px;
  padding: 10px;
  background: linear-gradient(145deg, #69798d 0%, #263447 12%, #101827 48%, #3c4c60 100%);
  border: 1px solid rgba(255,255,255,.42);
  transform: none;
  box-shadow: 0 42px 86px -34px rgba(5, 16, 31, .72), 0 16px 28px rgba(5,16,31,.28), inset 0 0 0 2px rgba(4,13,25,.65), inset 0 0 0 3px rgba(255,255,255,.08);
}
.escena:hover .escena-centro { transform: translateY(-5px); box-shadow: 0 50px 100px -36px rgba(5, 16, 31, .78), 0 18px 34px rgba(5,16,31,.28), inset 0 0 0 2px rgba(4,13,25,.65), inset 0 0 0 3px rgba(255,255,255,.1); }
.telefono-marco { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.telefono-boton { position: absolute; left: -3px; width: 3px; border-radius: 3px 0 0 3px; background: linear-gradient(90deg, #111b2a, #718096, #1e2c40); box-shadow: -1px 0 1px rgba(255,255,255,.35); }
.telefono-boton-silencio { top: 19%; height: 7%; }
.telefono-boton-volumen { height: 10%; }
.telefono-boton-volumen-1 { top: 30%; }
.telefono-boton-volumen-2 { top: 42%; }
.telefono-boton-encendido { left: auto; right: -3px; top: 33%; height: 13%; border-radius: 0 3px 3px 0; }
.pantalla { position: relative; z-index: 2; border-radius: 37px; background: var(--superficie); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.telefono-isla { position: absolute; z-index: 8; top: 11px; left: 50%; width: 92px; height: 27px; transform: translateX(-50%); border-radius: 999px; background: #050a12; box-shadow: 0 1px 2px rgba(0,0,0,.4), inset 0 -1px 1px rgba(255,255,255,.06); }
.telefono-isla span { position: absolute; top: 8px; right: 15px; width: 8px; height: 8px; border-radius: 50%; background: #1e3041; box-shadow: inset 1px 1px 2px #476074; }
.telefono-isla + div { padding-top: 49px !important; }
.pantalla::after { content: ""; position: absolute; z-index: 7; left: 50%; bottom: 8px; width: 92px; height: 4px; transform: translateX(-50%); border-radius: 999px; background: rgba(10,18,31,.76); pointer-events: none; }
@media (max-width: 1039px) { .escena-centro { width: min(300px, 76vw); } }
@media (prefers-reduced-motion: reduce) { .escena:hover .escena-centro { transform: none; } }


/* Contraste explícito para botones sobre la landing oscura en dispositivos que
   siguen la preferencia del sistema. Evita texto claro sobre fondo gris claro.
   Para todos los secundarios y no sólo los de arriba: el fondo claro de
   `.boton-secundario` está escrito a mano, y en tarifas, soporte y la portada
   más abajo salían igual de ilegibles. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .boton-secundario {
    background: #17263b;
    color: #f4f8ff;
    border-color: rgba(190, 211, 240, .26);
    box-shadow: 0 5px 14px -8px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.06);
  }
  :root:not([data-theme="light"]) .boton-secundario:hover {
    background: #203552;
    color: #fff;
    border-color: rgba(145, 184, 255, .5);
  }
  /* El del cierre va translúcido sobre su azul, como en claro. */
  :root:not([data-theme="light"]) .cierre .boton-secundario { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.28); box-shadow: none; }
  :root:not([data-theme="light"]) .cierre .boton-secundario:hover { background: rgba(255,255,255,.2); }
  :root:not([data-theme="light"]) .idiomas > summary {
    background: #111f33;
    color: #e9f1ff;
    border-color: rgba(190, 211, 240, .22);
  }
}

/* ---------- Lo que resolvemos: antes y ahora ----------
 *
 * Cada caso en dos líneas, la de antes apagada y la de ahora en tinta: se
 * lee el cambio de un vistazo, que es lo que alguien hace con esta sección. */
.resuelve { display: grid; gap: 16px; margin-top: 42px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .resuelve { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .resuelve { grid-template-columns: 1fr; } }
.caso { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 22px; box-shadow: var(--sombra-1); display: grid; gap: 14px; align-content: start; }
.caso p { font-size: 15.5px; line-height: 1.5; }
.caso-antes { color: var(--apagado); }
.caso-ahora { color: var(--tinta); font-weight: 500; border-top: 1px solid var(--linea-suave); padding-top: 14px; }
.caso-etiqueta { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 5px; }
.caso-antes .caso-etiqueta { color: var(--apagado); }
.caso-ahora .caso-etiqueta { color: var(--verde); }

/* ---------- Pregúntalo hablando ---------- */
.voz-rejilla { margin-top: 0; align-items: center; gap: 44px; }
.conversacion { display: grid; gap: 10px; }
.burbuja { font-size: 15px; line-height: 1.45; padding: 11px 14px; border-radius: 16px; max-width: 92%; overflow-wrap: anywhere; }
.burbuja-tu { justify-self: end; background: var(--azul); color: #fff; border-bottom-right-radius: 5px; }
.burbuja-sistema { justify-self: start; background: var(--superficie-2); color: var(--tinta); border-bottom-left-radius: 5px; }
.seccion-oscura .burbuja-sistema { background: #1A2536; color: #DDE5EF; }
.flotante .burbuja { font-size: 14px; max-width: 100%; margin-top: 6px; }
.flotante .burbuja-tu { margin-left: 18px; }

/* ---------- Países ---------- */
.pais-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.pais-cabeza h3 { margin: 0; }
.pastilla-gris { background: var(--superficie-2); color: var(--tinta-2); }
.lista-corta { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.lista-corta li { display: flex; gap: 9px; font-size: 15px; color: var(--tinta-2); line-height: 1.45; }
.lista-corta svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 3px; color: var(--verde); }

/* ---------- Capturas reales ---------- */
.capturas { display: grid; gap: 22px; margin-top: 42px; grid-template-columns: repeat(3, 1fr); align-items: start; }
@media (max-width: 920px) { .capturas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .capturas { grid-template-columns: 1fr; } }
/* ---------- El vídeo que avanza con el scroll ----------
   Sin la clase `activo` (sin JS, con «reducir movimiento» o si el vídeo no
   carga) es una sección normal: el título y el reproductor con audio. Con
   ella, una pantalla fija dentro de un tramo alto; ver `seccionVideo()`. */
.capitulo-video { background: #0B1220; color: #fff; padding-bottom: 64px; }
.capitulo-video .sobretitulo { color: #7BA6EE; }
.capitulo-video h2 { color: #fff; }
.capitulo-video .entradilla { color: rgba(255,255,255,.72); }
.scrub-pantalla { padding-top: 72px; }
.scrub-lienzo, .scrub-pie, .ver-con-audio { display: none; }
.video-producto { margin-top: 32px; border-radius: 22px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); background: #0B1220; aspect-ratio: 16 / 9; }
.video-producto video { display: block; width: 100%; height: 100%; }

.scrub.activo { height: var(--alto); position: relative; }
.scrub.activo .scrub-pantalla {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: 18px;
  /* La cabecera es pegajosa y mide 70 px: el título empieza debajo. */
  padding: 86px 0 22px;
}
.scrub.activo .scrub-texto h2 { font-size: clamp(28px, 4vw, 46px); }
.scrub.activo .scrub-texto .entradilla { margin-top: 10px; font-size: 16px; max-width: 60ch; }
.scrub.activo .scrub-lienzo { display: block; flex: 1 1 auto; min-height: 0; }
/* `contain` y no `cover`: el vídeo lleva texto, y en un móvil en vertical
   `cover` le cortaría los dos lados. */
.scrub-lienzo video { display: block; width: 100%; height: 100%; object-fit: contain; }
.scrub.activo .scrub-pie { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.scrub-pista { display: flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.66); min-width: 0; }
.scrub-pista .pista { position: relative; width: 120px; height: 2px; background: rgba(255,255,255,.18); border-radius: 2px; flex-shrink: 1; min-width: 40px; }
.scrub-pista .relleno { position: absolute; inset: 0 auto 0 0; width: 0%; background: #7BA6EE; border-radius: 2px; }
.scrub-cue { margin: 0; font-size: 13px; color: rgba(255,255,255,.66); transition: opacity .3s; text-align: right; }
@media (max-width: 600px) {
  .scrub.activo .scrub-pie { flex-direction: column; align-items: flex-start; gap: 8px; }
  .scrub-cue { text-align: left; }
}
/* En un teléfono en vertical un vídeo horizontal no llena la pantalla sin
   cortarle el texto. En vez de dejarlo flotando en medio de un lienzo vacío,
   el lienzo mide lo que el vídeo y el conjunto se centra. */
@media (max-aspect-ratio: 1/1) {
  .scrub.activo .scrub-lienzo { flex: 0 0 auto; width: 100%; aspect-ratio: 16 / 9; }
  .scrub.activo .scrub-pantalla { gap: 22px; }
}

.scrub.activo + .video-completo { padding-top: 28px; }
.scrub.activo + .video-completo .ver-con-audio { display: inline-flex; }
.scrub.activo + .video-completo .video-producto { display: none; }
.scrub.activo + .video-completo.abierto .video-producto { display: block; }
.capitulo-video .boton-secundario { color: #fff; border-color: rgba(255,255,255,.28); background: transparent; }

.captura { margin: 0; }
.captura img { display: block; width: 100%; height: auto; border-radius: 22px; border: 1px solid var(--linea); box-shadow: var(--sombra-2); background: var(--superficie-2); }
.captura figcaption { margin-top: 14px; font-size: 15px; color: var(--tinta-2); line-height: 1.5; }
.captura figcaption strong { display: block; color: var(--tinta); font-size: 16px; margin-bottom: 3px; }

@media (prefers-color-scheme: dark) {
  .caso-ahora { color: var(--tinta); }
  .burbuja-sistema { background: #1A2536; color: #DDE5EF; }
}