/* ─────────────────────────────────────────────────────────────────────────────
   dyrweb.cl — hoja de estilos del sitio público.
   Escrita a mano sobre los tokens de tokens.css. No hay Tailwind ni bundler: el
   navegador pide dos archivos CSS y nada más.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Base ──────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* El atributo `hidden` oculta con un display:none del navegador, y cualquier
   regla con display (.boton, .campo, .grupo) le gana. Así el formulario legal
   mostraba desde el paso 1 los botones «Atrás» y «Enviar» y las 9 preguntas
   condicionales aunque el JS las ocultara (medido el 28/09/2026). */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  font-size: var(--t-base);
  line-height: var(--alto-texto);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--fuente-titulo);
  font-weight: var(--peso-fuerte);
  line-height: var(--alto-titulo);
  letter-spacing: var(--track-titulo);
  margin: 0 0 var(--e-4);
  text-wrap: balance;
}

h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); font-weight: var(--peso-fuerte); }

p { margin: 0 0 var(--e-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--acento); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--acento-fuerte); }

img, svg { max-width: 100%; }
ul, ol { margin: 0 0 var(--e-4); padding-left: 1.25em; }
li + li { margin-top: var(--e-2); }
strong { font-weight: var(--peso-fuerte); }
hr { border: 0; border-top: 1px solid var(--linea); margin: var(--e-7) 0; }

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Salto al contenido, para teclado y lectores de pantalla */
.salto {
  position: absolute; left: var(--e-4); top: -3rem; z-index: 100;
  background: var(--tinta); color: var(--papel);
  padding: var(--e-2) var(--e-4); border-radius: var(--r-md);
  transition: top var(--trans);
}
.salto:focus { top: var(--e-3); color: var(--papel); }

.solo-lectores {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Marca de dato que falta. Se ve, es el punto. */
mark.todo {
  background: var(--alerta-tenue);
  color: var(--alerta);
  border: 1px dashed color-mix(in srgb, var(--alerta) 40%, transparent);
  border-radius: var(--r-sm);
  padding: 0.05em 0.4em;
  font-size: 0.92em;
  font-weight: var(--peso-medio);
}

/* ── Estructura ────────────────────────────────────────────────────────────── */
.envoltorio {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 4vw, 2.5rem);
}

.seccion { padding-block: var(--seccion-y); }
.seccion--alt { background: var(--papel-2); }
.seccion--tenue { background: var(--acento-tenue); }
.seccion--ajustada { padding-block: calc(var(--seccion-y) * 0.6); }

.ancho-texto { max-width: var(--ancho-texto); }
.centrado { text-align: center; margin-inline: auto; }

.sobretitulo {
  display: block;
  font-size: var(--t-xs);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: var(--e-3);
}

.bajada {
  font-size: var(--t-md);
  color: var(--tinta-media);
  max-width: 62ch;
}
.centrado .bajada { margin-inline: auto; }

.encabezado-seccion { margin-bottom: var(--e-7); }

/* ── Botones ───────────────────────────────────────────────────────────────── */
.boton {
  display: inline-flex; align-items: center; gap: var(--e-2);
  font: inherit; font-weight: var(--peso-fuerte); font-size: var(--t-sm);
  padding: 0.7rem 1.35rem;
  border-radius: var(--r-full);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--trans), color var(--trans), border-color var(--trans), transform var(--trans), box-shadow var(--trans);
  white-space: nowrap;
}
.boton:hover { transform: translateY(-1px); }
.boton:active { transform: translateY(0); }
.boton .ico { width: 1.15em; height: 1.15em; }

.boton--primario { background: var(--acento); color: var(--sobre-acento); box-shadow: var(--s-2); }
.boton--primario:hover { background: var(--acento-fuerte); color: var(--sobre-acento); box-shadow: var(--s-3); }

.boton--secundario { background: var(--superficie); color: var(--tinta); border-color: var(--linea-fuerte); }
.boton--secundario:hover { border-color: var(--acento); color: var(--acento); }

.boton--fantasma { background: transparent; color: var(--acento); padding-inline: 0.35rem; }
.boton--fantasma:hover { color: var(--acento-fuerte); text-decoration: underline; }

.boton--grande { padding: 0.95rem 1.75rem; font-size: var(--t-base); }
.boton--bloque { width: 100%; justify-content: center; }
.boton[disabled], .boton[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }

.acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; }
.centrado .acciones { justify-content: center; }

/* ── Cabecera ──────────────────────────────────────────────────────────────── */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--papel) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--linea);
}
/* Filo de color arriba de todo: dice en qué rama está parado antes de leer
   nada. En la home no aparece — la portada es neutra a propósito.
   Va como sombra interior y no como borde para no mover el layout. */
[data-vertical] .cabecera { box-shadow: inset 0 4px 0 0 var(--acento); }
.cabecera__fila {
  display: flex; align-items: center; gap: var(--e-4);
  min-height: 4.15rem;
}
.marca {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--fuente-titulo);
  font-size: 1.3rem; font-weight: var(--peso-negro);
  letter-spacing: -0.03em;
  color: var(--tinta); text-decoration: none;
  margin-right: auto;
}
.marca:hover { color: var(--tinta); }
.logo-marca { width: 2rem; height: 2rem; flex: none; }
.marca__sufijo { color: var(--acento); }

/* Interruptor entre las dos unidades: dos pastillas, no un menú de 12 ítems */
.interruptor {
  display: flex; gap: 2px;
  background: var(--papel-3);
  padding: 3px; border-radius: var(--r-full);
}
.interruptor a {
  font-size: var(--t-xs); font-weight: var(--peso-fuerte);
  padding: 0.42rem 0.95rem; border-radius: var(--r-full);
  color: var(--tinta-media); text-decoration: none;
  transition: background var(--trans), color var(--trans);
  white-space: nowrap;
}
.interruptor a:hover { color: var(--tinta); }
.interruptor a[aria-current="true"] {
  background: var(--superficie); color: var(--acento);
  box-shadow: var(--s-1);
}

.nav-secundaria { display: none; }
.nav-secundaria ul {
  display: flex; gap: var(--e-5); list-style: none; margin: 0; padding: 0;
}
.nav-secundaria li { margin: 0; }
.nav-secundaria a {
  font-size: var(--t-sm); color: var(--tinta-media); text-decoration: none;
  padding-block: 0.3rem;
  border-bottom: 2px solid transparent;
  white-space: nowrap;   /* que un ítem no se parta en dos líneas */
}
.nav-secundaria a:hover { color: var(--tinta); }
.nav-secundaria a[aria-current="page"] { color: var(--acento); border-bottom-color: var(--acento); }

.cabecera__cta { display: none; }

/* Menú de celular: <details> puro, funciona sin JavaScript */
.menu-cel { position: relative; }
.menu-cel > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--e-2);
  font-size: var(--t-sm); font-weight: var(--peso-fuerte);
  padding: 0.5rem 0.85rem;
  border: 1.5px solid var(--linea-fuerte); border-radius: var(--r-full);
}
.menu-cel > summary::-webkit-details-marker { display: none; }
.menu-cel[open] > summary { border-color: var(--acento); color: var(--acento); }
.menu-cel__panel {
  position: absolute; right: 0; top: calc(100% + 0.6rem);
  min-width: 15rem;
  background: var(--superficie);
  border: 1px solid var(--linea); border-radius: var(--r-lg);
  box-shadow: var(--s-3);
  padding: var(--e-3);
}
.menu-cel__panel ul { list-style: none; margin: 0; padding: 0; }
.menu-cel__panel li { margin: 0; }
.menu-cel__panel a {
  display: block; padding: 0.55rem 0.7rem; border-radius: var(--r-md);
  color: var(--tinta); text-decoration: none; font-size: var(--t-sm);
}
.menu-cel__panel a:hover { background: var(--acento-tenue); color: var(--acento); }
.menu-cel__panel a[aria-current="page"] { color: var(--acento); font-weight: var(--peso-fuerte); }
.menu-cel__titulo {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track-eyebrow);
  color: var(--tinta-suave); padding: var(--e-3) 0.7rem var(--e-1);
}

@media (min-width: 62rem) {
  .menu-cel { display: none; }
  .nav-secundaria { display: block; }
  .cabecera__cta { display: inline-flex; }
}

/* ── Hero ──────────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding-block: clamp(2.25rem, 1.5rem + 4vw, 5rem) var(--seccion-y);
  background:
    radial-gradient(120% 90% at 88% -10%, var(--acento-tenue) 0%, transparent 60%);
}
.hero__rejilla {
  display: grid; gap: var(--e-7);
  align-items: center;
}
.hero__ilus { order: -1; }
.hero__ilus .ilus { width: 100%; height: auto; display: block; }
.hero h1 { margin-bottom: var(--e-4); }
.hero .bajada { margin-bottom: var(--e-6); }
.hero__nota {
  margin-top: var(--e-5);
  font-size: var(--t-sm); color: var(--tinta-suave);
  display: flex; align-items: center; gap: var(--e-2);
}
.hero__nota .ico { color: var(--acento); flex: none; }

@media (min-width: 55rem) {
  .hero__rejilla { grid-template-columns: 1.05fr 0.95fr; gap: var(--e-9); }
  .hero__ilus { order: 0; }
  .hero--compacto .hero__rejilla { grid-template-columns: 1fr; }
  /* …salvo que el hero compacto traiga ilustración: en una sola columna la
     ilustración se estira a todo el ancho y queda enorme. */
  .hero--compacto:has(.hero__ilus) .hero__rejilla { grid-template-columns: 1.05fr 0.95fr; }
}
/* Tope de tamaño por si el navegador no entiende :has() */
.hero--compacto .hero__ilus { max-width: 30rem; margin-inline: auto; width: 100%; }

/* ── El HUD de la rama de IA ───────────────────────────────────────────────────
   Va FIJO al centro de la ventana y detrás de todo el contenido, no dentro del
   hero: así acompaña durante todo el scroll y nunca deja de girar.

   Para que se vea a través de la página, el color de fondo se pinta en <html> y
   el <body> queda transparente; el HUD es `fixed` con z-index -1, o sea encima
   del fondo de <html> y debajo del contenido. */
html[data-vertical] { background: var(--papel); }
html[data-vertical] body { background: transparent; }

.hud-fondo {
  position: fixed; inset: 0; z-index: -1;
  display: grid; place-items: center;
  pointer-events: none;
  opacity: 0.34;
}
.hud-fondo .hud__svg {
  width: min(1100px, 150vmin); height: auto; display: block;
}
@media (min-width: 55rem) { .hud-fondo { opacity: 0.55; } }

/* La balanza es de trazo mucho más macizo que el HUD de IA, así que con la
   misma opacidad se comía el texto del hero. Va más apagada. */
[data-vertical="legal"] .hud-fondo { opacity: 0.2; }
@media (min-width: 55rem) { [data-vertical="legal"] .hud-fondo { opacity: 0.3; } }

/* El HUD se ve a plena luz en el hero y atenuado bajo el resto de la página:
   las secciones le ponen un velo del propio color de fondo. Sin esto el texto
   largo compite con las líneas del dibujo y cuesta leer. */
[data-vertical] .seccion { background: color-mix(in srgb, var(--papel) 62%, transparent); }
[data-vertical] .seccion--alt { background: color-mix(in srgb, var(--papel-2) 80%, transparent); }
[data-vertical] .seccion--tenue { background: color-mix(in srgb, var(--acento-tenue) 60%, transparent); }
[data-vertical] .tarjeta,
[data-vertical] .plan,
[data-vertical] .formulario { background: color-mix(in srgb, var(--superficie) 92%, transparent); }

.hero--tec {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(90% 70% at 78% 10%, color-mix(in srgb, var(--acento) 12%, transparent) 0%, transparent 62%),
    radial-gradient(70% 60% at 8% 100%, color-mix(in srgb, var(--acento-claro) 8%, transparent) 0%, transparent 60%);
}
/* Retícula finísima, como un panel de instrumentos */
.hero--tec::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(color-mix(in srgb, var(--acento) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--acento) 7%, transparent) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(70% 80% at 60% 30%, #000 0%, transparent 75%);
}

.hud-gira-lento, .hud-gira-inverso, .hud-barrido, .hud-pulso {
  transform-box: fill-box; transform-origin: center;
}
.hud-gira-lento   { animation: hud-girar 90s linear infinite; }
.hud-gira-inverso { animation: hud-girar 54s linear infinite reverse; }
.hud-barrido      { transform-origin: 300px 300px; transform-box: view-box; animation: hud-girar 7s linear infinite; }
.hud-pulso        { animation: hud-latir 4.5s ease-in-out infinite; }

/* La balanza: el fiel se inclina y los platillos se contra-inclinan la misma
   cantidad, así quedan siempre horizontales. Misma duración en las dos, o se
   desincronizan. */
.hud-balanza, .hud-balanza-inv { transform-box: view-box; }
.hud-balanza     { animation: hud-inclinar 11s ease-in-out infinite; }
.hud-balanza-inv { animation: hud-inclinar-inv 11s ease-in-out infinite; }

@keyframes hud-girar { to { transform: rotate(360deg); } }
@keyframes hud-latir { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }
@keyframes hud-inclinar { 0%, 100% { transform: rotate(3.4deg); } 50% { transform: rotate(-3.4deg); } }
@keyframes hud-inclinar-inv { 0%, 100% { transform: rotate(-3.4deg); } 50% { transform: rotate(3.4deg); } }

/* El texto del hero tiene que ganarle al HUD: se le pone una base propia */
.hero--tec .hero__texto { position: relative; }
.hero--tec .sobretitulo {
  font-family: var(--fuente-mono);
  letter-spacing: 0.16em;
}

/* Hero de la home: tiene que caber en el primer pantallazo del celular */
.hero--puerta { padding-block: clamp(1.5rem, 1rem + 3vw, 3.5rem) var(--e-6); }
.hero--puerta h1 { font-size: var(--t-xl); margin-bottom: var(--e-3); }
.hero--puerta .bajada { font-size: var(--t-base); margin-bottom: 0; }

/* En celular las dos puertas tienen que caber juntas en el primer pantallazo:
   es el único trabajo de la home. Se recorta el aire y se deja una sola línea
   de respaldo por puerta; el resto está a un toque de distancia. */
@media (max-width: 47.99rem) {
  .hero--puerta { padding-block: var(--e-4) var(--e-4); }
  .hero--puerta h1 { font-size: var(--t-lg); }
  .hero--puerta .bajada { font-size: var(--t-sm); }
  .puerta { padding: var(--e-4); border-radius: var(--r-lg); }
  .puerta__bajada {
    margin-bottom: var(--e-3);
    /* Tres líneas y punto: el texto completo está en la página de la unidad. */
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  }
  .puerta__lista { margin-bottom: var(--e-3); }
  .puerta__lista li:nth-child(n + 2) { display: none; }
}

/* ── Portada: el fondo partido en dos ──────────────────────────────────────────
   En pantalla ancha el corte es vertical y cae justo entre las dos tarjetas; en
   celular, donde las tarjetas se apilan, el corte pasa a ser horizontal.
   Encima van dos halos —verde a la izquierda, azul a la derecha— para que cada
   mitad se sienta de su rama y el corte no quede como una línea dura. */
/* El degradado va en <html> y el <body> queda transparente, para que las dos
   animaciones de fondo (ver .hud-dual) queden encima del color y debajo del
   contenido. */
[data-tema="dual"] {
  background:
    radial-gradient(60% 55% at 18% 22%, color-mix(in srgb, var(--pymes-claro) 13%, transparent) 0%, transparent 70%),
    radial-gradient(60% 55% at 84% 30%, color-mix(in srgb, var(--legal-claro) 15%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, var(--ia-fondo) 0%, var(--ia-fondo) 46%, var(--legal-fondo) 54%, var(--legal-fondo) 100%);
  background-attachment: fixed;
}
[data-tema="dual"] body { background: transparent; }
@media (min-width: 48rem) {
  [data-tema="dual"] {
    background:
      radial-gradient(48% 60% at 22% 30%, color-mix(in srgb, var(--pymes-claro) 14%, transparent) 0%, transparent 70%),
      radial-gradient(48% 60% at 78% 34%, color-mix(in srgb, var(--legal-claro) 16%, transparent) 0%, transparent 70%),
      linear-gradient(100deg, var(--ia-fondo) 0%, var(--ia-fondo) 47%, var(--legal-fondo) 53%, var(--legal-fondo) 100%);
    background-attachment: fixed;
  }
}

/* ── Las dos animaciones de la portada ─────────────────────────────────────────
   Una por mitad y fijas: el HUD de Jarvis en el lado de IA y la balanza de la
   justicia en el lado legal, girando y oscilando igual que la otra. Cada mitad
   lleva su `data-vertical`, así cada dibujo toma los colores de su rama sin
   duplicar código. En celular se apilan, como las tarjetas. */
.hud-dual {
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  display: grid; grid-template-rows: 1fr 1fr;
  opacity: 0.3;
}
@media (min-width: 48rem) {
  .hud-dual { grid-template-rows: none; grid-template-columns: 1fr 1fr; opacity: 0.42; }
}
.hud-dual .hud-dual__mitad {
  background: transparent;   /* gana al fondo que [data-vertical] pinta en <html> */
  display: grid; place-items: center;
  overflow: hidden;
}
.hud-dual .hud__svg { width: min(560px, 88%); height: auto; }
/* Las secciones dejan ver el fondo dual; solo la franja alterna pone un velo,
   para separar visualmente sin tapar el degradado. El hero también: su fondo
   normal es opaco y tapaba el degradado justo arriba, que es donde más se nota. */
[data-tema="dual"] .seccion { background: transparent; }
[data-tema="dual"] .hero { background: transparent; }
[data-tema="dual"] .seccion--alt { background: color-mix(in srgb, var(--papel-2) 55%, transparent); }
[data-tema="dual"] .cabecera { background: color-mix(in srgb, var(--ia-fondo) 70%, transparent); }

/* Los textos largos (privacidad, términos) van sobre un panel propio: leer
   varias pantallas de texto directamente sobre el degradado cansa. */
[data-tema="dual"] .prosa {
  background: color-mix(in srgb, var(--superficie) 78%, transparent);
  border: 1px solid var(--linea);
  border-radius: var(--r-xl);
  padding: clamp(1.25rem, 3vw, 2.5rem);
  max-width: calc(var(--ancho-texto) + 5rem);
  margin-inline: auto;   /* el panel centrado, que la página es solo texto */
}

/* ── Bifurcación de la home ────────────────────────────────────────────────── */
.bifurca {
  display: grid; gap: var(--e-4);
  padding-bottom: var(--seccion-y);
}
@media (min-width: 48rem) { .bifurca { grid-template-columns: 1fr 1fr; gap: var(--e-5); } }

.puerta {
  display: flex; flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--r-xl);
  padding: var(--e-5);
  box-shadow: var(--s-1);
  text-decoration: none; color: var(--tinta);
  transition: border-color var(--trans), box-shadow var(--trans), transform var(--trans);
  position: relative; overflow: hidden;
}
.puerta::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 4px;
  background: linear-gradient(90deg, var(--acento), var(--acento-claro));
}
.puerta:hover {
  border-color: color-mix(in srgb, var(--acento) 45%, transparent);
  box-shadow: var(--s-3); transform: translateY(-2px); color: var(--tinta);
}
.puerta__eti {
  align-self: flex-start;
  font-size: var(--t-xs); font-weight: var(--peso-fuerte);
  letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: var(--sobre-acento); background: var(--acento);
  padding: 0.2rem 0.7rem; border-radius: var(--r-full);
  margin-bottom: var(--e-3);
}
.puerta h2 { font-size: var(--t-lg); margin-bottom: var(--e-2); }
.puerta__bajada { color: var(--tinta-media); font-size: var(--t-sm); margin-bottom: var(--e-4); }
.puerta__lista { list-style: none; padding: 0; margin: 0 0 var(--e-5); }
.puerta__lista li {
  display: flex; gap: var(--e-2); align-items: flex-start;
  font-size: var(--t-sm); color: var(--tinta-media);
  margin-top: var(--e-2);
}
.puerta__lista .ico { color: var(--acento); flex: none; margin-top: 0.2em; width: 1.05em; height: 1.05em; }
.puerta__pie {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: var(--e-2);
  font-weight: var(--peso-fuerte); font-size: var(--t-sm); color: var(--acento);
}
.puerta:hover .puerta__pie .ico { transform: translateX(3px); }
.puerta__pie .ico { transition: transform var(--trans); }
/* Las dos puertas de la portada heredan el tema completo de su rama desde
   tokens.css (`[data-vertical="…"]`), porque el atributo está en la propia
   tarjeta: la de IA se ve oscura con neón y la legal clara con azul, dentro de
   una portada neutra. Acá NO se redefine el acento — hacerlo pisaba el tema
   oscuro por especificidad y dejaba el verde claro sobre fondo negro. */
.puerta[data-vertical] { color: var(--tinta); }
.puerta[data-vertical]:hover { color: var(--tinta); }
/* Sobre el fondo dual las tarjetas quedarían casi del mismo tono que su mitad:
   se les da un punto de su propio acento para que se despeguen. */
[data-tema="dual"] .puerta { background: color-mix(in srgb, var(--superficie) 92%, var(--acento)); }

/* ── Rejillas de tarjetas ──────────────────────────────────────────────────── */
.rejilla { display: grid; gap: var(--e-4); }
@media (min-width: 40rem) { .rejilla--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 40rem) { .rejilla--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .rejilla--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 40rem) { .rejilla--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 66rem) { .rejilla--4 { grid-template-columns: repeat(4, 1fr); } }

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  padding: var(--e-5);
}
.tarjeta--plana { background: transparent; border: 0; padding: 0; }
.tarjeta h3 { font-size: var(--t-md); margin-bottom: var(--e-2); }
.tarjeta p { font-size: var(--t-sm); color: var(--tinta-media); }
.tarjeta__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; margin-bottom: var(--e-4);
  border-radius: var(--r-md);
  background: var(--acento-tenue); color: var(--acento);
}
.tarjeta__ico .ico { width: 1.35rem; height: 1.35rem; }
.ico { width: 1.25em; height: 1.25em; vertical-align: middle; }

/* ── Pasos numerados ───────────────────────────────────────────────────────── */
.pasos { list-style: none; padding: 0; margin: 0; counter-reset: paso; display: grid; gap: var(--e-5); }
@media (min-width: 58rem) { .pasos--3 { grid-template-columns: repeat(3, 1fr); } }
.pasos li { margin: 0; position: relative; padding-top: var(--e-5); }
.pasos li::before {
  counter-increment: paso; content: counter(paso);
  position: absolute; top: 0; left: 0;
  display: grid; place-items: center;
  width: 2.1rem; height: 2.1rem;
  border-radius: var(--r-full);
  background: var(--acento); color: var(--sobre-acento);
  font-family: var(--fuente-titulo); font-size: var(--t-sm); font-weight: var(--peso-negro);
}
.pasos li h3 { font-size: var(--t-md); margin: var(--e-3) 0 var(--e-2); }
.pasos li p { font-size: var(--t-sm); color: var(--tinta-media); }
.pasos li .detalle {
  margin-top: var(--e-3); padding-top: var(--e-3);
  border-top: 1px solid var(--linea);
  font-size: var(--t-xs); color: var(--tinta-suave);
}

/* ── Dos columnas texto + ilustración ──────────────────────────────────────── */
.dupla { display: grid; gap: var(--e-7); align-items: center; }
/* Junto a un formulario, el texto se alinea arriba: centrado deja un hueco
   grande entre el título de la sección y el formulario, que es alto. */
.dupla--arriba { align-items: start; }
@media (min-width: 55rem) {
  .dupla { grid-template-columns: 1fr 1fr; gap: var(--e-9); }
  .dupla--invertida .dupla__ilus { order: -1; }
}
.dupla__ilus .ilus { width: 100%; height: auto; display: block; }
.lista-marcas { list-style: none; padding: 0; margin: var(--e-5) 0 0; }
.lista-marcas li {
  display: flex; gap: var(--e-3); align-items: flex-start;
  margin-top: var(--e-3); color: var(--tinta-media); font-size: var(--t-sm);
}
.lista-marcas .ico { color: var(--acento); flex: none; margin-top: 0.18em; }

/* ── Cifras ────────────────────────────────────────────────────────────────── */
.cifras { display: grid; gap: var(--e-5); text-align: center; }
@media (min-width: 40rem) { .cifras { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); } }
.cifra__valor {
  font-family: var(--fuente-titulo); font-size: var(--t-xl);
  font-weight: var(--peso-negro); color: var(--acento); line-height: 1;
}
.cifra__texto { font-size: var(--t-sm); color: var(--tinta-media); margin-top: var(--e-2); }

/* ── Precios ───────────────────────────────────────────────────────────────── */
.planes { display: grid; gap: var(--e-4); align-items: start; }
@media (min-width: 52rem) { .planes { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } }
.plan {
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--r-xl); padding: var(--e-5);
  display: flex; flex-direction: column; height: 100%;
}
.plan--destacado {
  border-color: var(--acento); box-shadow: var(--s-2);
  position: relative;
}
.plan--destacado::after {
  content: attr(data-eti);
  position: absolute; top: -0.75rem; left: var(--e-5);
  background: var(--acento); color: var(--sobre-acento);
  font-size: var(--t-xs); font-weight: var(--peso-fuerte);
  padding: 0.15rem 0.7rem; border-radius: var(--r-full);
}
.plan h3 { font-size: var(--t-md); margin-bottom: var(--e-1); }
.plan__precio {
  font-family: var(--fuente-titulo); font-size: var(--t-lg);
  font-weight: var(--peso-negro); color: var(--tinta);
  margin: var(--e-3) 0 var(--e-1);
}
.plan__detalle { font-size: var(--t-sm); color: var(--tinta-media); margin-bottom: var(--e-4); }
.plan ul { list-style: none; padding: 0; margin: 0 0 var(--e-5); }
.plan li { display: flex; gap: var(--e-2); font-size: var(--t-sm); color: var(--tinta-media); margin-top: var(--e-2); }
.plan li .ico { color: var(--acento); flex: none; margin-top: 0.18em; width: 1.05em; height: 1.05em; }
.plan .boton { margin-top: auto; }

/* ── Preguntas frecuentes ──────────────────────────────────────────────────── */
.faq { max-width: 52rem; }
.faq details {
  border-bottom: 1px solid var(--linea);
  padding: var(--e-4) 0;
}
.faq details:first-of-type { border-top: 1px solid var(--linea); }
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; gap: var(--e-4);
  font-weight: var(--peso-fuerte); font-size: var(--t-base);
  font-family: var(--fuente-titulo);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none;
  width: 0.7rem; height: 0.7rem; margin-top: 0.4rem;
  border-right: 2px solid var(--acento); border-bottom: 2px solid var(--acento);
  transform: rotate(45deg); transition: transform var(--trans);
}
.faq details[open] summary::after { transform: rotate(225deg); }
.faq details > div { padding-top: var(--e-3); color: var(--tinta-media); font-size: var(--t-sm); max-width: 62ch; }

/* ── Franja de llamado a la acción ─────────────────────────────────────────── */
.franja {
  background: var(--acento-fuerte); color: var(--papel);
  border-radius: var(--r-xl);
  padding: clamp(1.75rem, 1rem + 3vw, 3rem);
  display: grid; gap: var(--e-5);
}
@media (min-width: 52rem) { .franja { grid-template-columns: 1.4fr auto; align-items: center; } }
.franja h2 { color: var(--papel); margin-bottom: var(--e-2); }
.franja p { color: color-mix(in srgb, var(--papel) 78%, transparent); font-size: var(--t-sm); }
.franja .boton--primario { background: var(--papel); color: var(--acento-fuerte); }
.franja .boton--primario:hover { background: var(--papel); color: var(--acento-fuerte); }
.franja .boton--secundario { background: transparent; color: var(--papel); border-color: color-mix(in srgb, var(--papel) 40%, transparent); }
.franja .boton--secundario:hover { color: var(--papel); border-color: var(--papel); }

/* ── Avisos ────────────────────────────────────────────────────────────────── */
.aviso {
  display: flex; gap: var(--e-3);
  background: var(--papel-2);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--tinta-suave);
  border-radius: var(--r-md);
  padding: var(--e-4);
  font-size: var(--t-sm); color: var(--tinta-media);
}
.aviso .ico { flex: none; margin-top: 0.15em; color: var(--tinta-suave); }
/* El aviso legal sigue el acento de la pagina, no un azul fijo: en la rama
   oscura un recuadro claro seria un parche encima del fondo. */
.aviso--legal { border-left-color: var(--acento); background: var(--acento-tenue); }
.aviso--legal .ico { color: var(--acento); }
.aviso--ojo { border-left-color: var(--alerta); background: var(--alerta-tenue); color: var(--alerta); }
.aviso--ojo .ico { color: var(--alerta); }
.aviso p:last-child { margin-bottom: 0; }

/* ── Texto largo (privacidad, términos) ────────────────────────────────────── */
.prosa { max-width: var(--ancho-texto); }
.prosa h2 { font-size: var(--t-lg); margin-top: var(--e-8); }
.prosa h2:first-child { margin-top: 0; }
.prosa h3 { font-size: var(--t-md); margin-top: var(--e-6); }
.prosa ul { color: var(--tinta-media); }
.prosa li { font-size: var(--t-sm); }
.prosa p { color: var(--tinta-media); }
.prosa .fecha { font-size: var(--t-sm); color: var(--tinta-suave); }

/* ── Formularios ───────────────────────────────────────────────────────────── */
.formulario {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--r-xl);
  padding: clamp(1.25rem, 0.9rem + 2vw, 2.25rem);
  box-shadow: var(--s-1);
}
.campos { display: grid; gap: var(--e-4); }
@media (min-width: 44rem) {
  .campos--2 { grid-template-columns: 1fr 1fr; }
  .campo--ancho { grid-column: 1 / -1; }
}
.campo { display: flex; flex-direction: column; gap: var(--e-2); }
.campo > label, .grupo > legend {
  font-size: var(--t-sm); font-weight: var(--peso-fuerte); color: var(--tinta);
}
.campo__ayuda { font-size: var(--t-xs); color: var(--tinta-suave); font-weight: var(--peso-normal); }
.campo .opcional { color: var(--tinta-suave); font-weight: var(--peso-normal); }

input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="date"], select, textarea {
  font: inherit; font-size: var(--t-sm);
  width: 100%;
  padding: 0.7rem 0.85rem;
  color: var(--tinta);
  background: var(--papel);
  border: 1.5px solid var(--linea-fuerte);
  border-radius: var(--r-md);
  transition: border-color var(--trans), box-shadow var(--trans);
}
textarea { min-height: 7rem; resize: vertical; line-height: 1.55; }
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 49%, var(--tinta-media) 50%), linear-gradient(-45deg, transparent 49%, var(--tinta-media) 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - 0.75rem) 55%;
  background-size: 0.42rem 0.42rem; background-repeat: no-repeat;
  padding-right: 2.25rem;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--acento); box-shadow: var(--anillo);
}
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--error); background: var(--error-tenue);
}
.campo__error { font-size: var(--t-xs); color: var(--error); font-weight: var(--peso-medio); min-height: 0; }
.campo__error:empty { display: none; }

.grupo { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-3); }
.grupo legend { padding: 0; margin-bottom: var(--e-1); }
.opciones { display: grid; gap: var(--e-2); }
@media (min-width: 40rem) { .opciones--fila { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); } }
.opcion {
  display: flex; gap: var(--e-3); align-items: flex-start;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--linea-fuerte); border-radius: var(--r-md);
  background: var(--papel);
  cursor: pointer; font-size: var(--t-sm);
  transition: border-color var(--trans), background var(--trans);
}
.opcion:hover { border-color: var(--acento-claro); }
.opcion input { margin: 0.25em 0 0; accent-color: var(--acento); flex: none; width: 1.05rem; height: 1.05rem; }
.opcion:has(input:checked) { border-color: var(--acento); background: var(--acento-tenue); }
.opcion__texto { display: flex; flex-direction: column; gap: 0.15rem; }
.opcion__nota { font-size: var(--t-xs); color: var(--tinta-suave); }

.casilla {
  display: flex; gap: var(--e-3); align-items: flex-start;
  font-size: var(--t-sm); color: var(--tinta-media);
  padding: var(--e-4);
  background: var(--papel-2); border: 1px solid var(--linea); border-radius: var(--r-md);
  cursor: pointer;
}
.casilla input { margin: 0.22em 0 0; accent-color: var(--acento); flex: none; width: 1.05rem; height: 1.05rem; }
.casilla[data-invalido="true"] { border-color: var(--error); background: var(--error-tenue); }

.form__pie { margin-top: var(--e-6); display: flex; flex-direction: column; gap: var(--e-4); }
.form__mensaje { font-size: var(--t-sm); border-radius: var(--r-md); padding: var(--e-4); display: none; }
.form__mensaje[data-tipo="error"] { display: block; background: var(--error-tenue); color: var(--error); border: 1px solid color-mix(in srgb, var(--error) 30%, transparent); }
.form__mensaje[data-tipo="ok"] { display: block; background: var(--acento-tenue); color: var(--acento-fuerte); border: 1px solid color-mix(in srgb, var(--acento) 30%, transparent); }

/* Formulario multi-paso */
.multipaso__barra {
  display: flex; gap: var(--e-2); align-items: center;
  margin-bottom: var(--e-5); flex-wrap: wrap;
}
.multipaso__pildora {
  font-size: var(--t-xs); font-weight: var(--peso-medio);
  color: var(--tinta-suave);
  padding: 0.25rem 0.7rem; border-radius: var(--r-full);
  background: var(--papel-2); border: 1px solid var(--linea);
  white-space: nowrap;
}
.multipaso__pildora[data-estado="actual"] { background: var(--acento); color: var(--sobre-acento); border-color: var(--acento); }
.multipaso__pildora[data-estado="listo"] { color: var(--acento); border-color: color-mix(in srgb, var(--acento) 40%, transparent); background: var(--acento-tenue); }
.multipaso__progreso { height: 5px; background: var(--papel-3); border-radius: var(--r-full); overflow: hidden; margin-bottom: var(--e-5); }
.multipaso__progreso > div { height: 100%; background: var(--acento); border-radius: var(--r-full); transition: width 240ms ease; }
.paso[hidden] { display: none; }
.paso h2 { font-size: var(--t-lg); margin-bottom: var(--e-2); }
.paso__intro { font-size: var(--t-sm); color: var(--tinta-media); margin-bottom: var(--e-5); }
.navegacion-paso {
  display: flex; justify-content: space-between; gap: var(--e-3);
  margin-top: var(--e-6); padding-top: var(--e-5); border-top: 1px solid var(--linea);
}
.guardado {
  font-size: var(--t-xs); color: var(--tinta-suave);
  display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap;
}
.guardado button {
  font: inherit; font-size: var(--t-xs); background: none; border: 0;
  color: var(--error); text-decoration: underline; cursor: pointer; padding: 0;
}
.resumen { display: grid; gap: var(--e-3); }
.resumen__bloque { border: 1px solid var(--linea); border-radius: var(--r-md); padding: var(--e-4); background: var(--papel); }
.resumen__bloque h3 { font-size: var(--t-sm); text-transform: uppercase; letter-spacing: 0.06em; color: var(--tinta-suave); margin-bottom: var(--e-2); font-family: var(--fuente-texto); }
.resumen dl { margin: 0; display: grid; gap: var(--e-2); }
.resumen dt { font-size: var(--t-xs); color: var(--tinta-suave); }
.resumen dd { margin: 0 0 var(--e-2); font-size: var(--t-sm); }

/* Pantalla de gracias */
.gracias { text-align: center; max-width: 40rem; margin-inline: auto; }
.gracias .ilus { width: min(15rem, 60%); margin: 0 auto var(--e-5); }
.gracias__folio {
  display: inline-block; font-family: var(--fuente-mono); font-size: var(--t-md);
  background: var(--acento-tenue); color: var(--acento-fuerte);
  padding: 0.35rem 0.9rem; border-radius: var(--r-md); margin-bottom: var(--e-5);
}

/* ── Pie ───────────────────────────────────────────────────────────────────── */
/* El pie es oscuro en las tres ramas, así que usa sus propios tokens y no
   --tinta/--papel: en la rama de IA esos dos están dados vuelta. */
.pie {
  background: var(--pie-fondo); color: var(--pie-texto);
  border-top: 5px solid var(--acento);   /* cierra la página con el color de la rama */
  padding-block: var(--e-8) var(--e-6);
  font-size: var(--t-sm);
  margin-top: auto;
}
.pie a { color: var(--pie-texto); text-decoration: none; }
.pie a:hover { color: var(--pie-titulo); text-decoration: underline; }
.pie__rejilla { display: grid; gap: var(--e-6); }
@media (min-width: 48rem) {
  .pie__rejilla { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--e-7); }
  /* Dentro de una rama el pie trae una columna menos (ver plantilla.js: no se
     muestra la rama que no corresponde). */
  [data-vertical] .pie__rejilla { grid-template-columns: 1.6fr 1fr 1fr; }
}
.pie h3 {
  font-family: var(--fuente-texto); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: var(--track-eyebrow);
  color: var(--pie-titulo); margin-bottom: var(--e-3);
}
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin-top: var(--e-2); }
.pie__marca { display: flex; align-items: center; gap: 0.6rem; color: var(--pie-titulo); font-family: var(--fuente-titulo); font-size: 1.25rem; font-weight: var(--peso-negro); margin-bottom: var(--e-3); }
.pie__marca .logo-marca rect { fill: color-mix(in srgb, var(--acento) 30%, transparent); }
.pie__marca .logo-marca path { stroke: var(--pie-titulo); }
.pie__nota { font-size: var(--t-xs); color: color-mix(in srgb, var(--pie-texto) 78%, transparent); max-width: 46ch; }
.pie__legal {
  margin-top: var(--e-7); padding-top: var(--e-5);
  border-top: 1px solid color-mix(in srgb, var(--pie-texto) 22%, transparent);
  display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-5);
  align-items: center; justify-content: space-between;
  font-size: var(--t-xs); color: color-mix(in srgb, var(--pie-texto) 78%, transparent);
}
.pie__legal ul { display: flex; flex-wrap: wrap; gap: var(--e-4); }
.pie__legal li { margin: 0; }

/* ── Cinta de contexto legal (visible en todo el vertical) ─────────────────── */
.cinta {
  background: color-mix(in srgb, var(--acento) 13%, var(--papel-2));
  color: var(--tinta-media);
  border-bottom: 1px solid var(--linea);
  font-size: var(--t-xs); text-align: center;
  padding: var(--e-2) var(--e-4);
}
.cinta strong { color: var(--tinta); }

/* ── Migas ─────────────────────────────────────────────────────────────────── */
.migas { font-size: var(--t-xs); color: var(--tinta-suave); padding-top: var(--e-4); }
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--e-2); padding: 0; margin: 0; }
.migas li { margin: 0; display: flex; gap: var(--e-2); align-items: center; }
.migas li + li::before { content: "/"; color: var(--linea-fuerte); }

body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }