/* ============================================================
   datiafy.cl — el sitio del producto (versión 2026-09).

   El sitio se ve como la aplicación. Desde el 16 de septiembre de 2026 la
   referencia es la pantalla de entrar —«la puerta», en `app/comun.css`—: franja
   de color inclinada con el lema en blanco, tarjeta montada sobre su borde,
   guías punteadas, y de ahí para abajo superficies claras, bordes de un pelo y
   un solo azul para lo que se aprieta.

   Antes era blanco, piedra y casi negro, con una cursiva serif de acento y
   botones negros en forma de pastilla. Se veía bien y se veía de OTRO producto:
   quien apretaba «Empieza tu prueba» aterrizaba en una pantalla azul que no se
   parecía en nada a la que acababa de dejar.

   Las fichas de color, radio y sombra son las mismas de la aplicación, con los
   mismos valores, para que las dos pantallas no se separen de a poco.
   ============================================================ */

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fuentes/roboto-800-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fuentes/inter-400-700-latin.woff2') format('woff2');
}

/* Los grises tienen una pizca de azul, como los de la aplicación: un gris
   perfectamente neutro se ve apagado al lado de un acento de color. Los valores
   son los mismos de `app/comun.css` —`--surface-1`, `--page`, `--text-*`,
   `--gridline`— para que las dos pantallas no se separen de a poco. */
:root {
  --blanco: #ffffff;
  --piedra: #f2f2f5;
  --arena: #f7f7f9;
  --papel-2: #fafafb;
  --tinta: #1a1a1c;
  --tinta-2: #16181f;
  --tinta-3: #101218;
  --borde-oscuro: rgba(255,255,255,.14);
  --texto: #1a1a1c;
  --texto-2: #56565c;
  --texto-3: #6e6e75;
  --borde: #e4e4e8;
  --borde-suave: #edeef1;
  --acento: #0a72e8;
  --acento-claro: #8cc2ff;
  --acento-suave: #eaf2fe;
  --violeta: #6f55c9;
  --verde: #1a9e4b;
  --verde-suave: #e8f6ee;
  --rojo: #d8342f;
  --rojo-suave: #fdecec;
  --ambar: #b7700a;

  --sans: 'Poppins', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Radios y sombras: las mismas fichas de la aplicación. Lo que hace que una
     pantalla se vea ordenada no es agregar, es que todo use los mismos cuatro
     o cinco valores. */
  --radio-chico: 8px;
  --radio: 11px;
  --radio-grande: 18px;
  --sombra-suave: 0 1px 2px rgba(0,0,0,.04), 0 6px 16px -10px rgba(16,24,40,.14);
  --sombra-montada: 0 15px 35px rgba(50,50,93,.12), 0 5px 15px rgba(0,0,0,.07);

  /* El degradado de la franja, escrito una sola vez. Es el mismo de la puerta
     de la aplicación: azul, celeste y violeta, los colores del logotipo. */
  --franja-color: linear-gradient(90deg, #0a72e8, #5b8cff 30%, #8b6bd6 60%, #35c2e8 90%, #0a72e8);
  --franja-oscura: linear-gradient(120deg, #0a3f8f, #0a72e8 42%, #6f55c9 100%);

  --ancho: 1200px;
  --paso: .2s cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after { 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;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--texto);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }
button { font: inherit; color: inherit; }
::selection { background: var(--acento-suave); color: var(--texto); }

.wrap { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }
@media (min-width: 900px) { .wrap { padding: 0 40px; } }

.solo-lectores {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.senuelo { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---------------- Logotipo (idéntico al de la aplicación) ---------------- */
.logotipo {
  font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--texto);
  font-size: 23px;
  line-height: 1;
  display: inline-block;
}
.logotipo .punto-i { position: relative; }
.logotipo .punto-i::before {
  content: '';
  position: absolute;
  left: .0425em; top: .166em;
  width: .175em; height: .175em;
  border-radius: 50%;
  background: var(--acento);
}

/* ---------------- Botones ---------------- */
/* Los botones son los de la aplicación: esquina redondeada de 11 px —no
   pastilla—, el azul del acento para lo que se aprieta y blanco con un borde de
   un pelo para lo secundario. Los dos últimos, `btn-blanco` y `btn-fantasma`,
   existen para cuando el botón cae SOBRE la franja de color, donde el azul se
   pierde contra el fondo. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 22px;
  border-radius: var(--radio); border: 1px solid transparent;
  font-family: var(--sans); font-size: 14.5px; font-weight: 500;
  letter-spacing: -.005em; white-space: nowrap;
  cursor: pointer; transition: transform var(--paso), box-shadow var(--paso), background var(--paso);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
.btn-primario {
  background: var(--acento); color: #fff;
  box-shadow: 0 1px 2px rgba(10,114,232,.24), 0 8px 18px -10px rgba(10,114,232,.55);
}
.btn-primario:hover { background: #0963cc; }
.btn-secundario {
  background: #fff; color: var(--texto); border-color: var(--borde);
  box-shadow: var(--sombra-suave);
}
.btn-secundario:hover { background: var(--arena); }
/* Sobre la franja. El blanco es el que manda ahí: el azul del acento contra el
   azul del fondo no se lee como botón. */
.btn-blanco { background: #fff; color: var(--acento); box-shadow: 0 8px 20px -10px rgba(10,36,80,.5); }
.btn-blanco:hover { background: #f4f8ff; }
.btn-fantasma {
  background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.4);
}
.btn-fantasma:hover { background: rgba(255,255,255,.24); }
.btn-fantasma:focus-visible { outline-color: #fff; }
.btn-chico { height: 36px; padding: 0 15px; font-size: 14px; border-radius: var(--radio-chico); }
.btn-grande { height: 50px; padding: 0 26px; font-size: 15px; }
.btn-ancho { width: 100%; }
.btn svg { flex: none; }
.grupo-botones { display: flex; flex-wrap: wrap; gap: 12px; }
.enlace { color: var(--acento); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.nota { font-size: 14px; color: var(--texto-2); }
.bajada { font-size: 16.5px; color: var(--texto-2); font-weight: 400; line-height: 1.6; }

/* ---------------- Barra de arriba ---------------- */
/* La barra empieza transparente sobre la franja —la marca y los enlaces en
   blanco, como arriba en la pantalla de entrar— y se vuelve blanca al
   desplazar, que es cuando debajo ya no hay color sino contenido. `.pegada` la
   pone el script del pie con el primer desplazamiento.

   Las páginas sin franja (gracias, confirmado, privacidad) no llevan
   `.sobre-franja`: ahí la barra es blanca desde el primer pixel. */
.barra {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background var(--paso), border-color var(--paso);
}
.barra.pegada { border-bottom-color: var(--borde-suave); }
.barra.sobre-franja:not(.pegada) {
  background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.barra.sobre-franja:not(.pegada) .logotipo { color: #fff; }
.barra.sobre-franja:not(.pegada) .logotipo .punto-i::before { background: #fff; }
.barra.sobre-franja:not(.pegada) .nav a { color: #fff; }
.barra.sobre-franja:not(.pegada) .btn-secundario {
  background: rgba(255,255,255,.14); color: #fff;
  border-color: rgba(255,255,255,.4); box-shadow: none;
}
.barra.sobre-franja:not(.pegada) .btn-secundario:hover { background: rgba(255,255,255,.24); }
.barra.sobre-franja:not(.pegada) .btn-primario {
  background: #fff; color: var(--acento); box-shadow: none;
}
.barra.sobre-franja:not(.pegada) .btn-primario:hover { background: #f4f8ff; }
.barra.sobre-franja:not(.pegada) .menu-boton {
  background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); color: #fff;
}
.barra .wrap { display: flex; align-items: center; height: 70px; gap: 36px; }
.nav { display: flex; gap: 30px; font-size: 14px; }
.nav a { color: var(--texto); opacity: .82; transition: opacity var(--paso); }
.nav a:hover { opacity: 1; }
.acciones-barra { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.menu-boton {
  display: none; width: 40px; height: 40px; border-radius: var(--radio);
  border: 1px solid var(--borde); background: #fff; cursor: pointer;
  align-items: center; justify-content: center;
}
.menu-movil { display: none; }
@media (max-width: 900px) {
  .nav { display: none; }
  .acciones-barra .btn-secundario { display: none; }
  .menu-boton { display: inline-flex; }
  .menu-movil.abierto {
    display: flex; flex-direction: column; gap: 4px;
    padding: 8px 24px 22px; border-bottom: 1px solid var(--borde-suave); background: #fff;
  }
  .barra.sobre-franja:has(.menu-movil.abierto) {
    background: rgba(255,255,255,.98);
    -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
  }
  .barra.sobre-franja:has(.menu-movil.abierto) .logotipo { color: var(--texto); }
  .barra.sobre-franja:has(.menu-movil.abierto) .logotipo .punto-i::before { background: var(--acento); }
  .barra.sobre-franja:has(.menu-movil.abierto) .menu-boton {
    background: #fff; border-color: var(--borde); color: var(--texto);
  }
  .barra.sobre-franja:has(.menu-movil.abierto) .btn-primario {
    background: var(--acento); color: #fff;
  }
  .menu-movil a:not(.btn) { padding: 12px 0; font-size: 16px; border-bottom: 1px solid var(--borde-suave); }
  .menu-movil .btn { margin-top: 12px; }
}
@media (max-width: 420px) {
  .acciones-barra .btn-primario { display: none; }
}

/* ---------------- Tipografía de secciones ---------------- */
.kicker {
  display: inline-block;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--texto-3);
}
.titulo {
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 600; letter-spacing: -.03em; line-height: 1.15;
}
/* La segunda mitad del título, en el azul del acento: es lo que antes hacía la
   cursiva serif, con la tipografía de la aplicación. */
.titulo b { font-weight: 600; color: var(--acento); }
.cabeza-seccion {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px; margin-bottom: 44px;
}
.cabeza-seccion .lado {
  max-width: 330px; font-size: 14px; color: var(--texto-2);
  text-align: right; line-height: 1.55;
}
@media (max-width: 760px) {
  .cabeza-seccion { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 32px; }
  .cabeza-seccion .lado { text-align: left; }
}
section { position: relative; }
.bloque { padding: 112px 0; }
@media (max-width: 760px) { .bloque { padding: 76px 0; } }
.fondo-piedra { background: var(--piedra); }
.fondo-arena { background: var(--arena); }

/* ---------------- Portada: la puerta ----------------

   Copia fiel de la pantalla de entrar de la aplicación (`app/comun.css`,
   sección «La puerta»), con los mismos números:

   - La franja arranca 250 px sobre el techo, mide 600 px + 21 vw y va
     inclinada `skewY(-12deg)` desde su borde izquierdo. Su borde de abajo sube
     hacia la derecha a razón de 0,21 px por px, así que el alto tiene que
     crecer con el ancho de la ventana: si la franja termina antes que el lema,
     las letras blancas siguen sobre el blanco de la página y desaparecen.
   - Los tres puntos van en posición absoluta y no a continuación del lema, por
     lo mismo: tienen que quedar DEBAJO de ese borde, que baja con el ancho.
     Acá la cuenta lleva 70 px menos que en la aplicación —lo que mide la barra
     del sitio, que sí ocupa lugar en el flujo—.

   Los colores de la franja son los del logotipo, escritos a mano: son dibujo,
   no fichas del tema. */
.portada {
  position: relative; overflow: hidden;
  margin-top: -70px;              /* lo que mide la barra */
  padding: 104px 0 44px;          /* 70 de la barra + 34 de aire */
  min-height: calc(612px + 18.9vw);
}

/* Las guías: líneas punteadas verticales, como las de Stripe. Le dan al blanco
   de abajo una estructura en vez de dejarlo vacío. */
.franja-guias {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  width: 100%; max-width: var(--ancho); left: 50%; transform: translateX(-50%);
}
.franja-guias i { border-right: 1px dashed var(--borde); }
.franja-guias i:last-child { border-right: none; }

.franja {
  position: absolute; left: -10%; right: -10%;
  top: -250px; height: calc(700px + 21vw);
  transform: skewY(-12deg); transform-origin: 0 0;
  background: var(--franja-color);
  background-size: 200% 100%;
  animation: franja-corre 18s linear infinite;
  overflow: hidden; pointer-events: none; z-index: 0;
}
/* Los cuatro bloques del borde de abajo, en tonos de la misma familia: son lo
   que hace que se lea como una franja dibujada y no como un degradado. */
.franja i { position: absolute; height: 48px; }
.franja i:nth-child(1) { left: 0;   bottom: 0;    width: 28%; background: #35c2e8; opacity: .9; }
.franja i:nth-child(2) { left: 28%; bottom: 0;    width: 18%; background: #0a4fb4; opacity: .8; }
.franja i:nth-child(3) { right: 12%; bottom: 48px; width: 22%; background: #b49cf2; opacity: .85; }
.franja i:nth-child(4) { right: 0;  bottom: 0;    width: 12%; background: #6f55c9; opacity: .9; }
@keyframes franja-corre {
  from { background-position: 0% 50%; }
  to   { background-position: 200% 50%; }
}
@media (prefers-reduced-motion: reduce) { .franja { animation: none; } }

.portada .wrap { position: relative; z-index: 1; }
.portada-rejilla {
  display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 56px; align-items: start;
}

/* El lema, en blanco sobre la franja. */
.portada-lema { color: #fff; padding-top: 18px; }
.sello {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 13px 6px 10px; border-radius: 999px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.34);
  font-size: 12.5px; color: #fff; margin-bottom: 24px;
}
.sello i {
  width: 7px; height: 7px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 4px rgba(255,255,255,.22);
}
.portada h1 {
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 600; letter-spacing: -.03em; line-height: 1.06;
  max-width: 540px; text-wrap: balance;
}
/* Lo que antes iba en cursiva serif. Acá la diferencia la hace la luz: el mismo
   blanco, más claro, sin cambiar de tipografía. */
.portada h1 b { font-weight: 600; color: #d6e6ff; }
.portada-texto {
  margin-top: 16px; font-size: 16px; line-height: 1.55;
  color: rgba(255,255,255,.88); max-width: 46ch;
}
.portada .grupo-botones { margin-top: 30px; }

/* La tarjeta, montada sobre el borde de la franja. Sombra más larga que la de
   las tarjetas de adentro: acá sí está encima de otra cosa. */
/* La tarjeta baja 40 px: tiene que CRUZAR el borde de la franja y no apoyarse
   encima. Cruzarlo es lo que la hace ver montada, como en la pantalla de
   entrar. */
.portada-tarjeta {
  margin-top: 56px;
  background: #fff; border-radius: 16px; padding: 30px 32px 28px;
  box-shadow: var(--sombra-montada);
}
.portada-tarjeta h2 {
  font-size: 20px; font-weight: 600; letter-spacing: -.02em; line-height: 1.3;
}
.portada-tarjeta ul {
  list-style: none; padding: 0; margin: 20px 0 24px;
  display: grid; gap: 11px; font-size: 14px; color: var(--texto-2);
}
.portada-tarjeta li { display: flex; gap: 10px; align-items: flex-start; }
.portada-tarjeta li svg { color: var(--acento); flex: none; margin-top: 2px; }
.tarjeta-letra { margin-top: 12px; font-size: 12.5px; color: var(--texto-3); line-height: 1.5; text-align: center; }

/* Los tres puntos, sobre el blanco y bajo el borde de la franja.

   La cuenta, para no volver a medirla a ojo. La franja va de x = -0,1W a
   x = 1,1W y está inclinada 12° desde su esquina de arriba a la izquierda, así
   que su borde de abajo, en una x cualquiera, está en:

       borde(x) = -250 + alto + 0,21W - 0,2126 x (x + 0,1W)

   Con alto = 700 px + 21 vw y x = 80 —donde empieza el texto en una ventana de
   1.280— eso da 700 - 267 + 0,1887W: 674 px en 1.280 y 795 px en 1.920. El lema
   termina cerca de 503, y en una ventana angosta, donde los dos botones se
   apilan, cerca de 535: los dos quedan tapados por el color con holgura.

   Los puntos van 40 px más abajo que ese borde, y por eso crecen con el mismo
   18,9 vw y no con la mitad: creciendo más lento, en un monitor ancho se
   subirían encima de la franja, que es donde el texto gris no se lee. */
.portada .wrap-puntos {
  position: absolute; left: 0; right: 0; top: calc(473px + 18.9vw); z-index: 1;
}
.portada-puntos {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 190px)); gap: 26px;
}
.portada-puntos li { display: grid; gap: 4px; font-size: 13.5px; color: var(--texto-2); line-height: 1.45; }
.portada-puntos svg {
  width: 22px; height: 22px; margin-bottom: 4px;
  fill: none; stroke: var(--acento); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.portada-puntos b { color: var(--texto); font-size: 15px; font-weight: 600; }

/* Entre tablet y notebook chico: la tarjeta se angosta. */
@media (max-width: 1100px) {
  .portada-rejilla { grid-template-columns: minmax(0, 1fr) 380px; gap: 36px; }
  .portada-puntos { grid-template-columns: repeat(3, minmax(0, 150px)); gap: 18px; }
}

/* El teléfono y la tablet de pie: todo apilado, la franja arriba con la marca y
   el lema, y la tarjeta debajo montada sobre su borde. Los tres puntos no van:
   empujarían la tarjeta fuera de la pantalla. Es la misma decisión de la
   aplicación, y allá costó. */
@media (max-width: 900px) {
  .portada { padding: 0 0 32px; min-height: 0; }
  .franja-guias, .franja, .wrap-puntos { display: none; }
  .portada-rejilla { grid-template-columns: 1fr; gap: 0; }
  .portada-lema {
    margin: 0 -24px; padding: 92px 24px 76px;
    background: var(--franja-color);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 54px), 0 100%);
  }
  .portada h1 { font-size: clamp(30px, 8vw, 40px); max-width: 16ch; }
  .sello { font-size: 12px; margin-bottom: 20px; }
  /* El precio se va del sello en el teléfono: con él adentro, el sello hacía
     dos líneas y empujaba el título. El precio está entero en «Planes». */
  .sello .solo-ancho { display: none; }
  .portada-texto { font-size: 15.5px; max-width: 40ch; }
  .portada .grupo-botones { margin-bottom: 8px; }
  .portada-tarjeta { margin-top: -34px; padding: 24px 22px 22px; }
}
@media (max-width: 480px) {
  .portada .grupo-botones .btn { width: 100%; }
}

/* ---------------- Cinta de oficios ---------------- */
.oficios { padding: 26px 0 72px; }
.oficios-rotulo { text-align: center; font-size: 13px; color: var(--texto-3); margin-bottom: 26px; }
.cinta {
  overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.cinta + .cinta { margin-top: 18px; }
.cinta-pista { display: flex; width: max-content; gap: 56px; animation: correr 60s linear infinite; }
.cinta.reversa .cinta-pista { animation-direction: reverse; animation-duration: 70s; }
.cinta-pista span {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 22px; font-weight: 500; letter-spacing: -.02em; color: #b9b9bd; white-space: nowrap;
}
.cinta-pista span::before {
  content: ''; width: 7px; height: 7px; border-radius: 2px; background: #d6d6da; transform: rotate(45deg);
}
@keyframes correr { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .cinta-pista { animation: none; } }

/* ---------------- Panel oscuro con pestañas ---------------- */
/* El panel de los oficios lleva el mismo azul de la franja, en su versión
   oscura: es la otra superficie de color de la página y tiene que ser la misma
   familia, no un gris casi negro de otro sistema. */
.panel-oscuro {
  background: var(--franja-oscura); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radio-grande);
  box-shadow: 0 18px 44px -12px rgba(10,36,80,.36);
  color: #fff; overflow: hidden;
}
.pestanas {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
  padding: 10px; border-bottom: 1px solid var(--borde-oscuro);
}
.pestana {
  height: 40px; border-radius: var(--radio-chico); border: 1px solid rgba(255,255,255,.18);
  background: transparent; color: rgba(255,255,255,.72);
  font-size: 13.5px; cursor: pointer; white-space: nowrap; padding: 0 10px;
  transition: background var(--paso), color var(--paso);
}
.pestana:hover { color: #fff; background: rgba(255,255,255,.04); }
.pestana[aria-selected="true"] { background: #fff; color: var(--acento); border-color: #fff; }
.pestana:focus-visible { outline: 2px solid var(--acento-claro); outline-offset: 2px; }
@media (max-width: 900px) {
  .pestanas { display: flex; overflow-x: auto; scrollbar-width: none; }
  .pestanas::-webkit-scrollbar { display: none; }
  .pestana { flex: none; padding: 0 16px; }
}
.hoja-pestana {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
  padding: 64px 48px; min-height: 420px;
}
.hoja-pestana[hidden] { display: none; }
.hoja-pestana .kicker { color: var(--acento-claro); }
.hoja-pestana h3 {
  margin-top: 14px; font-size: clamp(23px, 2.3vw, 29px); font-weight: 600;
  letter-spacing: -.025em; line-height: 1.22;
}
.hoja-pestana p { margin-top: 16px; font-size: 15.5px; color: rgba(255,255,255,.65); line-height: 1.6; max-width: 46ch; }
.mini-tarjetas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mini {
  background: rgba(8,20,48,.34); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radio); padding: 13px 14px 14px;
}
.mini .kicker { font-size: 9.5px; color: var(--acento-claro); letter-spacing: .12em; }
.mini p { margin: 7px 0 0; font-size: 13.5px; color: rgba(255,255,255,.88); line-height: 1.45; max-width: none; }
.hoja-pestana.entrando > * { animation: aparecer .35s ease both; }
@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } }
@media (max-width: 900px) {
  .hoja-pestana { grid-template-columns: 1fr; gap: 30px; padding: 40px 22px 26px; min-height: 0; }
}
@media (max-width: 480px) { .mini-tarjetas { grid-template-columns: 1fr; } }

/* ---------------- Tarjetas generales ---------------- */
.tarjeta {
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-grande);
  padding: 18px 18px 26px; box-shadow: var(--sombra-suave);
}
.tarjeta h3 { font-size: 18px; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
.tarjeta p { font-size: 14.5px; color: var(--texto-2); line-height: 1.6; }
.tarjeta .cuerpo { padding: 22px 6px 0; }
.tarjeta .cuerpo p { margin-top: 8px; }
.escena {
  background: var(--papel-2); border: 1px solid var(--borde); border-radius: var(--radio);
  min-height: 176px; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}

/* ---------------- ¿Qué es Datiafy? ---------------- */
.tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 960px) { .tres { grid-template-columns: 1fr; } }
.tarjeta-negra {
  background: var(--franja-oscura); color: #fff; border-radius: var(--radio-grande);
  padding: 30px 28px 32px; display: flex; flex-direction: column;
  box-shadow: 0 18px 44px -20px rgba(10,36,80,.5);
}
.tarjeta-negra .kicker { color: rgba(255,255,255,.62); }
.tarjeta-negra h3 { margin-top: auto; padding-top: 70px; font-size: 24px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.tarjeta-negra .sub { margin-top: 6px; font-size: 14px; color: rgba(255,255,255,.55); }
.lista-check { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.lista-check li { display: flex; gap: 11px; font-size: 14.5px; line-height: 1.45; }
.lista-check svg { flex: none; margin-top: 2px; }
.tarjeta-negra .lista-check svg { color: var(--acento-claro); }
.tarjeta-codigo { padding: 26px; display: flex; flex-direction: column; background: var(--papel-2); }
.tarjeta-codigo .kicker { margin-bottom: 18px; }
.consola {
  background: var(--tinta-2); border-radius: var(--radio); overflow: hidden;
  font-family: var(--mono); font-size: 12px; color: rgba(255,255,255,.82);
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.35);
}
.consola-cabeza {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.45); font-size: 11px;
}
.consola-cabeza i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.18); }
.consola-cuerpo { padding: 14px 16px 16px; display: grid; gap: 7px; }
.consola .fila { display: flex; justify-content: space-between; gap: 12px; }
.consola .clave { color: rgba(255,255,255,.5); }
.consola .ok { color: #6ee7a0; }
.consola .az { color: var(--acento-claro); }
.consola .rj { color: #ff9b95; }
.consola .sep { border-top: 1px dashed rgba(255,255,255,.14); margin: 3px 0; }
.tarjeta-codigo h3 { margin-top: 30px; font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.tarjeta-codigo .sub { margin-top: 4px; font-size: 14px; color: var(--texto-3); }
.tarjeta-codigo p { margin-top: 14px; font-size: 14.5px; color: var(--texto-2); line-height: 1.6; }
.barra-nota {
  margin-top: 20px; border: 1px solid var(--borde); background: var(--arena);
  border-radius: var(--radio); padding: 16px 20px; font-size: 14.5px; color: var(--texto-2);
}
.barra-nota b { color: var(--texto); font-weight: 500; }

/* ---------------- Antes y después ---------------- */
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 860px) { .dos { grid-template-columns: 1fr; } }
.tarjeta-flujo { padding: 20px 20px 30px; }
.tarjeta-flujo .escena { min-height: 230px; align-items: stretch; flex-direction: column; justify-content: center; gap: 8px; padding: 22px 26px; }
.escena-rotulo {
  font-family: var(--mono); font-size: 10.5px; color: var(--texto-3); letter-spacing: .06em;
  display: flex; align-items: center; gap: 7px; margin-bottom: 4px;
}
.escena-rotulo i { width: 6px; height: 6px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 3px rgba(26,158,75,.15); }
.renglon {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #fff; border: 1px solid var(--borde); border-radius: 10px;
  padding: 10px 13px; font-size: 13px;
}
.renglon .quien { display: flex; align-items: center; gap: 10px; min-width: 0; }
.renglon .quien span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icono-canal {
  width: 24px; height: 24px; border-radius: 7px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--piedra); color: var(--texto-2);
}
.chip {
  flex: none; font-size: 11.5px; padding: 3px 9px; border-radius: 999px;
  background: var(--piedra); color: var(--texto-2); white-space: nowrap;
}
.chip.verde { background: var(--verde-suave); color: #106a34; }
.chip.azul { background: var(--acento-suave); color: #0a5fc4; }
.chip.ambar { background: #fdf3e2; color: var(--ambar); }
.chip.rojo { background: var(--rojo-suave); color: #b8231f; }
.tarjeta-flujo .cuerpo { padding: 24px 8px 0; }
.tarjeta-flujo .kicker { display: flex; align-items: center; gap: 8px; color: var(--texto-2); }
.tarjeta-flujo .cuerpo p { margin-top: 10px; }
.dato-grande { display: flex; align-items: center; gap: 14px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--borde-suave); }
.dato-grande b { font-size: 44px; font-weight: 600; letter-spacing: -.04em; line-height: 1; color: var(--acento); }
.dato-grande span { font-size: 14px; color: var(--texto-2); max-width: 30ch; }

/* ---------------- Rejilla de funciones (bento) ---------------- */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.bento .tarjeta { grid-column: span 4; }
.bento .ancha { grid-column: span 8; }
.bento .media { grid-column: span 6; }
@media (max-width: 960px) {
  .bento .tarjeta, .bento .ancha, .bento .media { grid-column: span 12; }
}

/* escena: hoja del cliente */
.doc {
  width: 210px; background: #fff; border: 1px solid var(--borde); border-radius: 6px;
  box-shadow: 0 10px 24px -14px rgba(0,0,0,.25); padding: 12px; font-size: 7.5px; color: var(--texto-2);
  transform: rotate(-2deg);
}
.doc-cabeza { display: flex; justify-content: space-between; align-items: center; padding-bottom: 7px; border-bottom: 2px solid var(--color-doc, var(--acento)); }
.doc-logo { width: 34px; height: 12px; border-radius: 3px; background: var(--color-doc, var(--acento)); }
.doc .linea { height: 4px; border-radius: 2px; background: #ececef; margin-top: 6px; }
.doc .linea.c { width: 60%; }
.doc .total { display: flex; justify-content: space-between; margin-top: 9px; padding: 5px 6px; border-radius: 3px; background: var(--acento-suave); color: var(--texto); font-weight: 600; font-size: 8px; }
.estilos-hoja { display: flex; flex-direction: column; gap: 7px; margin-left: 34px; }
.estilo-chip {
  display: flex; align-items: center; gap: 9px; font-size: 12.5px;
  background: #fff; border: 1px solid var(--borde); border-radius: 9px; padding: 7px 12px 7px 9px;
  cursor: pointer; transition: border-color var(--paso), box-shadow var(--paso);
}
.estilo-chip i { width: 14px; height: 14px; border-radius: 4px; }
.estilo-chip[aria-pressed="true"] { border-color: var(--tinta); box-shadow: 0 0 0 1px var(--tinta); }
@media (max-width: 520px) {
  .escena-doc { flex-direction: column; gap: 18px; }
  .estilos-hoja { margin-left: 0; flex-direction: row; flex-wrap: wrap; justify-content: center; }
}

/* escena: hilo de terreno */
.hilo { width: 100%; max-width: 250px; display: flex; flex-direction: column; gap: 7px; }
.burbuja {
  align-self: flex-end; max-width: 88%; background: #fff; border: 1px solid var(--borde);
  border-radius: 12px 12px 4px 12px; padding: 7px 10px; font-size: 12px; line-height: 1.35;
}
.burbuja small { display: block; text-align: right; font-size: 9.5px; color: var(--texto-3); margin-top: 2px; }
.burbuja.foto { padding: 5px; width: 150px; }
.burbuja.foto .img {
  height: 58px; border-radius: 8px;
  background: linear-gradient(160deg, #cfd9c4 0%, #a9bb97 55%, #8c9f7a 100%);
  position: relative; overflow: hidden;
}
.burbuja.foto .img::after { content: ''; position: absolute; left: -10%; right: -10%; bottom: -14px; height: 34px; background: #7a8b69; border-radius: 50%; transform: rotate(-6deg); }
.burbuja.foto span { display: block; font-size: 11px; padding: 5px 4px 1px; }
.burbuja.audio { display: flex; align-items: center; gap: 8px; }
.onda { display: flex; align-items: center; gap: 2px; height: 16px; }
.onda i { width: 2px; border-radius: 2px; background: var(--texto-3); }
.billy-ordena {
  align-self: flex-start; background: var(--tinta); color: #fff; border-radius: 12px 12px 12px 4px;
  padding: 8px 11px; font-size: 11.5px; line-height: 1.4; max-width: 92%;
}
.billy-ordena b { color: var(--acento-claro); font-weight: 500; }

/* escena: revisiones */
.revisiones { width: 100%; max-width: 250px; display: grid; gap: 8px; }
.revisiones .renglon { font-family: var(--mono); font-size: 11px; padding: 9px 11px; }
.revisiones .renglon svg { color: var(--verde); flex: none; }
.revisiones .renglon.activa { box-shadow: 0 0 0 1px var(--tinta); border-color: var(--tinta); }

/* escena: precios */
.precios-escena { width: 100%; display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; align-items: center; }
.grafico-precio { width: 100%; height: auto; }
.lista-precios { display: grid; gap: 7px; }
.lista-precios .renglon { font-size: 12px; padding: 8px 11px; }
@media (max-width: 560px) { .precios-escena { grid-template-columns: 1fr; } }

/* escena: calendario */
.calendario { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; width: 100%; max-width: 300px; position: relative; }
.calendario span {
  height: 22px; border-radius: 5px; background: #fff; border: 1px solid var(--borde);
  font-size: 9.5px; color: var(--texto-3); display: flex; align-items: center; justify-content: center;
}
.calendario span.ocupado { background: repeating-linear-gradient(135deg, #f1f1f3 0 4px, #fff 4px 8px); color: #b5b5b9; }
.calendario span.ofrecida { border-color: var(--acento); color: var(--acento); background: var(--acento-suave); }
.calendario .elegida {
  grid-column: 1 / -1; justify-self: center; margin-top: 10px;
  background: var(--tinta); color: #fff; font-size: 11.5px; border-radius: 999px;
  padding: 5px 12px; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap;
  box-shadow: 0 8px 18px -8px rgba(0,0,0,.5);
}
.calendario .elegida svg { color: #6ee7a0; }

/* escena: costos */
.desvios { width: 100%; max-width: 330px; display: grid; gap: 9px; }
.desvio { display: grid; grid-template-columns: 110px 1fr 64px; gap: 10px; align-items: center; font-size: 12px; }
.desvio .eje { height: 8px; position: relative; background: #eeeef0; border-radius: 4px; }
.desvio .eje::before { content: ''; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: #c9c9ce; }
.desvio .eje i { position: absolute; top: 0; bottom: 0; border-radius: 4px; }
.desvio .mas i { left: 50%; background: var(--rojo); }
.desvio .menos i { right: 50%; background: var(--verde); }
.desvio .monto { text-align: right; font-family: var(--mono); font-size: 11px; }
.desvio .monto.mas { color: #b8231f; }
.desvio .monto.menos { color: #106a34; }

/* ---------------- Avisos y archivos ---------------- */
.diagrama { display: grid; grid-template-columns: 1fr auto 1.05fr; gap: 0; align-items: center; margin-top: 8px; }
.fuentes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fuente {
  display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--borde);
  border-radius: 10px; padding: 12px 13px; font-size: 13.5px;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
}
.nodo-centro { display: flex; align-items: center; padding: 0 12px; }
.nodo-centro .linea-h { width: 46px; height: 1px; background: repeating-linear-gradient(90deg, #bdbdc2 0 4px, transparent 4px 8px); }
.nodo {
  background: var(--tinta); color: #fff; border-radius: 12px; padding: 14px 18px;
  display: flex; align-items: center; gap: 12px; box-shadow: 0 14px 30px -14px rgba(0,0,0,.5);
}
.nodo .logotipo { color: #fff; font-size: 19px; }
.nodo small { display: block; font-family: var(--mono); font-size: 9.5px; color: rgba(255,255,255,.45); letter-spacing: .08em; margin-top: 4px; }
.en-vivo .consola-cuerpo { gap: 0; padding: 6px 0; }
.en-vivo .evento { display: grid; grid-template-columns: 1fr auto 16px; gap: 12px; padding: 9px 16px; align-items: center; border-bottom: 1px solid rgba(255,255,255,.05); }
.en-vivo .evento:last-child { border-bottom: 0; }
.en-vivo .evento .destino { color: rgba(255,255,255,.4); font-size: 11px; }
.en-vivo .evento.nuevo { animation: destello 1.2s ease; }
@keyframes destello { from { background: rgba(140,194,255,.14); } to { background: transparent; } }
@media (max-width: 960px) {
  .diagrama { grid-template-columns: 1fr; gap: 18px; }
  .nodo-centro { justify-content: center; flex-direction: column; }
  .nodo-centro .linea-h { width: 1px; height: 22px; background: repeating-linear-gradient(180deg, #bdbdc2 0 4px, transparent 4px 8px); }
}
.tres-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 64px; padding-top: 40px; border-top: 1px solid rgba(0,0,0,.07); }
.tres-cols .icono { width: 34px; height: 34px; border-radius: 9px; background: #fff; border: 1px solid var(--borde); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; color: var(--texto-2); }
.tres-cols h3 { font-size: 16px; font-weight: 500; letter-spacing: -.01em; }
.tres-cols p { margin-top: 8px; font-size: 14px; color: var(--texto-2); line-height: 1.6; }
@media (max-width: 860px) { .tres-cols { grid-template-columns: 1fr; gap: 28px; } }

/* ---------------- Billy ---------------- */
.billy-rejilla { display: grid; grid-template-columns: 2.1fr 1fr; gap: 20px; }
@media (max-width: 960px) { .billy-rejilla { grid-template-columns: 1fr; } }
.billy-grande { background: var(--franja-oscura); color: #fff; border-radius: var(--radio-grande); padding: 22px 22px 34px; box-shadow: 0 18px 44px -20px rgba(10,36,80,.5); }
.pestana-chica { display: inline-block; font-family: var(--mono); font-size: 11px; color: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.14); border-radius: 6px; padding: 3px 9px; }
.chat {
  margin-top: 16px; background: rgba(6,16,40,.42); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radio);
  padding: 18px; display: flex; flex-direction: column; gap: 12px; min-height: 250px;
}
.chat-cabeza { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: rgba(255,255,255,.55); padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.06); }
.cara-billy { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(160deg, #3d8ff0, #0a5fc4); display: flex; align-items: center; justify-content: center; gap: 4px; flex: none; }
.cara-billy i { width: 4px; height: 6px; border-radius: 2px; background: #fff; }
.chat-cabeza b { color: #fff; font-weight: 500; }
.msg { max-width: 82%; font-size: 13.5px; line-height: 1.55; border-radius: 12px; padding: 10px 13px; }
.msg.yo { align-self: flex-end; background: #fff; color: var(--texto); border-bottom-right-radius: 4px; }
.msg.billy { align-self: flex-start; background: rgba(255,255,255,.12); color: rgba(255,255,255,.92); border-bottom-left-radius: 4px; }
.msg.billy b { color: #fff; font-weight: 500; }
.escribiendo { display: inline-flex; gap: 4px; padding: 12px 14px; }
.escribiendo i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.5); animation: salto 1s infinite; }
.escribiendo i:nth-child(2) { animation-delay: .15s; }
.escribiendo i:nth-child(3) { animation-delay: .3s; }
@keyframes salto { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }
.preguntas-billy { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.preguntas-billy button {
  background: transparent; border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.8);
  border-radius: 999px; padding: 7px 13px; font-size: 12.5px; cursor: pointer;
  transition: background var(--paso), border-color var(--paso);
}
.preguntas-billy button:hover { background: rgba(255,255,255,.06); }
.preguntas-billy button[aria-pressed="true"] { background: #fff; color: var(--acento); border-color: #fff; }
.billy-grande h3 { margin-top: 30px; font-size: 24px; font-weight: 600; letter-spacing: -.02em; padding: 0 6px; }
.billy-grande > p { margin-top: 12px; font-size: 15px; color: rgba(255,255,255,.65); line-height: 1.6; max-width: 62ch; padding: 0 6px; }
.billy-grande .lista-check { padding: 0 6px; }
.billy-grande .lista-check svg { color: var(--acento-claro); }
.billy-grande .lista-check li { color: rgba(255,255,255,.85); font-size: 14px; }
.tarjeta-lado { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-grande); padding: 26px; display: flex; flex-direction: column; box-shadow: var(--sombra-suave); }
.tarjeta-lado h3 { margin-top: 18px; font-size: 21px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.tarjeta-lado > p { margin-top: 12px; font-size: 14.5px; color: var(--texto-2); line-height: 1.6; }
.tarjeta-lado .lista-check li { font-size: 13.5px; color: var(--texto-2); }
.tarjeta-lado .lista-check svg { color: var(--acento); }
.redaccion { margin-top: auto; padding-top: 24px; }
.redaccion .caja { border: 1px solid var(--borde); border-radius: var(--radio); padding: 11px 12px; font-size: 12.5px; line-height: 1.5; color: var(--texto-2); background: var(--papel-2); }
.redaccion .caja.nueva { background: #fff; color: var(--texto); border-color: var(--acento); box-shadow: 0 0 0 3px rgba(10,114,232,.1); margin-top: 8px; }
.redaccion .boton-mejorar { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--acento); margin-top: 8px; font-weight: 500; }

/* ---------------- Tus datos ---------------- */
.cuatro { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 960px) { .cuatro { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cuatro { grid-template-columns: 1fr; } }
.cuatro .tarjeta { padding: 24px 22px 26px; }
.cuatro .icono { width: 36px; height: 36px; border-radius: 10px; background: var(--piedra); display: flex; align-items: center; justify-content: center; color: var(--texto); margin-bottom: 40px; }
.cuatro h3 { font-size: 16.5px; }
.cuatro p { margin-top: 8px; font-size: 14px; }

/* ---------------- Preguntas ---------------- */
.faq { display: grid; grid-template-columns: 1fr 1.7fr; gap: 56px; }
@media (max-width: 900px) { .faq { grid-template-columns: 1fr; gap: 24px; } }
.faq-lista { border-top: 1px solid var(--borde); }
@media (min-width: 901px) { .faq > div:first-child { position: sticky; top: 110px; align-self: start; } }
.faq details { border-bottom: 1px solid var(--borde); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px;
  padding: 22px 0; font-size: 16.5px; font-weight: 400; letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .mas-menos { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--borde); position: relative; transition: transform var(--paso); }
.faq summary .mas-menos::before, .faq summary .mas-menos::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: var(--texto); transform: translate(-50%, -50%); }
.faq summary .mas-menos::after { transform: translate(-50%, -50%) rotate(90deg); transition: opacity var(--paso); }
.faq details[open] .mas-menos::after { opacity: 0; }
.faq details p { padding: 0 44px 22px 0; font-size: 15px; color: var(--texto-2); line-height: 1.65; }
.faq details p + p { margin-top: -8px; }
.faq summary:focus-visible { outline: 2px solid var(--acento); outline-offset: 4px; border-radius: 4px; }

/* ---------------- Cierre ---------------- */
.cierre { padding: 40px 0 112px; }
/* El cierre repite la franja de la portada: la página abre y cierra con el
   mismo color, y el último botón queda sobre él, como el primero. */
.cierre-caja {
  background: var(--franja-color); background-size: 200% 100%;
  border-radius: var(--radio-grande); padding: 72px 32px 60px; text-align: center;
  position: relative; overflow: hidden; color: #fff;
  box-shadow: 0 24px 60px -30px rgba(10,36,80,.6);
}
/* Los mismos cuatro bloques del borde de la franja, acá abajo a la izquierda. */
.cierre-caja::before {
  content: ''; position: absolute; left: 0; bottom: 0; width: 46%; height: 26px;
  background: #35c2e8; opacity: .55;
}
.cierre-caja::after {
  content: ''; position: absolute; right: 0; bottom: 0; width: 18%; height: 26px;
  background: #6f55c9; opacity: .6;
}
.cierre-caja > * { position: relative; }
.cierre-caja h2 { font-size: clamp(27px, 3.2vw, 38px); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; max-width: 22ch; margin: 0 auto; }
.cierre-caja h2 b { font-weight: 600; color: #d6e6ff; }
.cierre-caja .bajada { margin: 16px auto 0; max-width: 52ch; font-size: 16px; color: rgba(255,255,255,.9); }
.cierre-caja .grupo-botones { justify-content: center; margin-top: 28px; }
.cierre-caja .form-pie { color: rgba(255,255,255,.72); }
.cierre-caja .form-pie a { color: #fff; }
.form-espera {
  margin: 30px auto 0; max-width: 520px; display: grid; grid-template-columns: 1fr auto; gap: 10px;
}
.form-espera input[type="email"], .form-espera select {
  height: 50px; border-radius: 999px; border: 1px solid #dcdcd8; background: #fff;
  padding: 0 20px; font-family: var(--sans); font-size: 15px; color: var(--texto); width: 100%;
}
.form-espera input[type="email"]:focus, .form-espera select:focus { outline: 2px solid var(--acento); outline-offset: 1px; border-color: transparent; }
.oficio-pregunta { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; text-align: left; margin-top: 4px; }
.oficio-pregunta label { font-size: 13px; color: var(--texto-2); flex: none; }
.oficio-pregunta select { height: 42px; font-size: 14px; padding: 0 16px; -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235d5d63' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.form-pie { margin: 16px auto 0; max-width: 50ch; font-size: 12.5px; color: var(--texto-3); line-height: 1.55; }
.form-pie a { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 560px) {
  .form-espera { grid-template-columns: 1fr; }
  .oficio-pregunta { flex-direction: column; align-items: stretch; gap: 6px; }
  .cierre-caja { padding: 52px 20px 44px; }
}

/* ---------------- Pie ---------------- */
footer { background: var(--tinta-3); color: #fff; padding: 64px 0 36px; }
.pie-rejilla { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
footer .logotipo { color: #fff; }
footer .marca-pie p { margin-top: 14px; font-size: 14px; color: rgba(255,255,255,.55); max-width: 32ch; line-height: 1.6; }
footer h4 { font-size: 13px; font-weight: 500; color: rgba(255,255,255,.5); margin-bottom: 14px; }
footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: 14px; }
footer ul a { color: rgba(255,255,255,.85); }
footer ul a:hover { color: #fff; }
footer ul li.tenue { color: rgba(255,255,255,.4); }
.pie-legal {
  margin-top: 56px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 12.5px; color: rgba(255,255,255,.45);
}
.pie-legal .mono { font-family: var(--mono); letter-spacing: .12em; }
@media (max-width: 860px) { .pie-rejilla { grid-template-columns: 1fr 1fr; } .marca-pie { grid-column: 1 / -1; } }

/* ---------------- Aparición al desplazar ---------------- */
.revelar { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.revelar.visto { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .revelar { opacity: 1; transform: none; transition: none; } }

/* ---------------- Páginas chicas: legal ---------------- */
.legal { max-width: 760px; margin: 0 auto; padding: 64px 24px 96px; }
.legal h1 { font-size: clamp(30px, 4vw, 40px); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
.legal h2 { font-size: 21px; font-weight: 500; letter-spacing: -.015em; margin: 44px 0 12px; }
.legal h3 { font-size: 16.5px; font-weight: 500; margin: 28px 0 8px; }
.legal p, .legal li { font-size: 15.5px; color: var(--texto-2); line-height: 1.7; }
.legal p + p { margin-top: 12px; }
.legal ul { padding-left: 20px; }
.legal a { color: var(--acento); text-decoration: underline; text-underline-offset: 3px; }
.fecha-version { margin-top: 12px; font-size: 13.5px; color: var(--texto-3); }
.recuadro { background: var(--arena); border: 1px solid var(--borde); border-radius: var(--radio); padding: 20px 22px; }
.tabla-legal { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 14px; display: block; overflow-x: auto; }
.tabla-legal th, .tabla-legal td { text-align: left; vertical-align: top; padding: 11px 12px; border-bottom: 1px solid var(--borde); color: var(--texto-2); }
.tabla-legal th { color: var(--texto); font-weight: 500; background: var(--papel-2); }

/* Los hijos de las rejillas pueden encogerse: sin esto, un renglón con texto
   que no se corta ensancha la columna y la página entera en el teléfono. */
.portada-rejilla > *, .hoja-pestana > *, .tres > *, .dos > *, .bento > *,
.billy-rejilla > *, .cuatro > *, .diagrama > *, .faq > *, .pie-rejilla > * { min-width: 0; }
@media (max-width: 560px) {
  .renglon .chip { white-space: normal; text-align: right; max-width: 48%; }
  .tarjeta-flujo .escena { padding: 18px 14px; }
  .en-vivo .evento { grid-template-columns: 1fr 16px; }
  .en-vivo .evento .destino { display: none; }
  .desvio { grid-template-columns: 92px 1fr 60px; }
}

/* Páginas chicas: el pie es solo la línea legal. */
footer:not(:has(.pie-rejilla)) { padding: 26px 0; }
footer:not(:has(.pie-rejilla)) .pie-legal { margin-top: 0; }
footer .pie-legal a { color: rgba(255,255,255,.7); }

/* ---------------- Planes ----------------
   Un solo plan, dicho entero: el precio neto grande —es el número que se
   decidió— y el total con IVA al lado, para que nadie lo descubra al pagar. */
.planes-rejilla { display: grid; grid-template-columns: 1.25fr 1fr; gap: 20px; align-items: stretch; }
@media (max-width: 960px) { .planes-rejilla { grid-template-columns: 1fr; } }
.planes-rejilla > * { min-width: 0; }
.conmutador {
  display: inline-flex; padding: 4px; border-radius: 999px; background: var(--piedra);
  border: 1px solid var(--borde); gap: 4px;
}
.conmutador button {
  border: 0; background: transparent; border-radius: 999px; padding: 8px 16px;
  font-size: 13.5px; cursor: pointer; color: var(--texto-2); white-space: nowrap;
}
.conmutador button[aria-pressed="true"] { background: #fff; color: var(--texto); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.conmutador button:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.conmutador .ahorro { font-size: 11.5px; color: #106a34; margin-left: 4px; }
/* El plan que se contrata lleva el borde del acento, no uno negro: es el mismo
   azul del botón que hay que apretar. */
.plan-principal {
  background: #fff; border: 1px solid var(--acento); border-radius: var(--radio-grande);
  padding: 30px 30px 32px;
  box-shadow: 0 0 0 1px var(--acento), 0 18px 40px -22px rgba(10,114,232,.45);
  display: flex; flex-direction: column;
}
.plan-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.plan-principal h3 { font-size: 21px; font-weight: 600; letter-spacing: -.02em; margin-top: 10px; }
.plan-precio { margin-top: 26px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.plan-precio b { font-size: clamp(40px, 5vw, 52px); font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.plan-precio span { font-size: 15px; color: var(--texto-2); }
.plan-total { margin-top: 8px; font-size: 13.5px; color: var(--texto-3); min-height: 1.5em; }
.plan-principal .lista-check li { color: var(--texto-2); }
.plan-principal .lista-check svg { color: var(--acento); }
.plan-principal .grupo-botones { margin-top: 30px; }
.plan-letra { margin-top: 14px; font-size: 12.5px; color: var(--texto-3); line-height: 1.55; }
.plan-letra a { text-decoration: underline; text-underline-offset: 2px; }
.plan-lado { display: grid; gap: 20px; align-content: start; }
.plan-lado .tarjeta { padding: 26px; }
.plan-lado h3 { font-size: 17px; }
.pasos-prueba { list-style: none; counter-reset: paso; padding: 0; margin: 16px 0 0; display: grid; gap: 14px; }
.pasos-prueba li { counter-increment: paso; display: grid; grid-template-columns: 28px 1fr; gap: 12px; font-size: 14px; color: var(--texto-2); line-height: 1.5; }
.pasos-prueba li::before {
  content: counter(paso); width: 28px; height: 28px; border-radius: 50%; background: var(--piedra);
  display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 12px; color: var(--texto);
}
.pasos-prueba b { color: var(--texto); font-weight: 500; }
.adicionales { margin-top: 14px; display: grid; gap: 8px; }
.adicionales .renglon { font-size: 13.5px; }
.adicionales .renglon b { font-weight: 500; white-space: nowrap; }
.cierre-caja .grupo-botones { justify-content: center; margin-top: 30px; }

/* Los nombres de las fichas de la hoja anterior, que el aviso de privacidad
   todavía usa en sus propios estilos. */
:root {
  --acento-oscuro: #0a5fc4; --border: rgba(0,0,0,.09); --gridline: #e4e4e8; --radio: 12px;
  --surface-1: #f7f7f9; --surface-2: #f2f2f5;
  --text-primary: #202023; --text-secondary: #5d5d63; --text-muted: #6e6e75;
}