/* ==========================================================================
   CODEIUM SRL — Hoja de estilos única
   Apps móviles a medida para condominios · Santa Cruz de la Sierra, Bolivia

   Prioridad de diseño nº1: LEGIBILIDAD.
   El público principal son administradores y propietarios de edad avanzada.
   Ningún efecto visual puede comprometer la lectura del texto.

   Índice
   1.  Tokens
   2.  Reset y base
   3.  Utilidades
   4.  Fondo aurora (movimiento sutil)
   5.  Tipografía
   6.  Botones
   7.  Encabezado y navegación
   8.  Tarjetas y bloques
   9.  Portada (hero)
   10. Secciones de contenido
   11. Maqueta de celular
   12. Preguntas frecuentes
   13. Formulario
   14. Presentación (descarga del PDF)
   15. Pie de página
   16. Botón flotante de WhatsApp
   16b. Asistente automático
   17. Revelado al hacer scroll
   18. Responsive
   19. Movimiento reducido
   20. Impresión
   ========================================================================== */

/* =============================================================
   1. TOKENS
   ============================================================= */
:root {
  /* --- Marca: morados --- */
  --brand-950: #1E0A45;
  --brand-900: #2E1065;
  --brand-800: #3F148A;
  --brand-700: #4C1D95;
  --brand-600: #5B21B6;   /* fondo de botón primario — blanco encima = 8.96:1 */
  --brand-500: #6D28D9;
  --brand-400: #8B5CF6;
  --brand-300: #A78BFA;
  --brand-200: #C4B5FD;
  --brand-100: #E9E3FE;
  --brand-050: #F5F2FF;

  /* --- Acento cálido (dorado) --- */
  --gold-500: #FFB020;
  --gold-300: #FFD166;
  --gold-ink: #6B3D00;    /* dorado legible sobre fondo claro */

  /* --- WhatsApp --- */
  --wa: #075E54;          /* blanco encima = 7.67:1 (AAA) */
  --wa-dark: #04443D;
  --wa-glow: rgba(37, 211, 102, .45);

  /* --- Neutros (base lila, no blanco) --- */
  --ink: #16081F;         /* texto principal — 16.8:1 sobre --paper */
  --ink-2: #3D2B54;       /* texto secundario — 10.8:1 sobre --paper */
  --ink-3: #55416F;       /* texto terciario —  7.6:1 sobre --paper */
  --paper: #F1EBFB;       /* fondo general del sitio */
  --paper-2: #E6DCF7;     /* banda de tinte más marcada */
  --paper-3: #FBF8FF;     /* superficie de tarjeta */
  --white: #FFFFFF;
  --line: #DACEF3;
  --line-strong: #C3B2E8;

  /* --- Semánticos (modo claro por defecto) --- */
  --bg: var(--paper);
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --surface: var(--paper-3);
  --border: var(--line);
  --accent: var(--brand-600);
  --focus: #4C1D95;

  /* Superficie de tarjeta: nunca blanco plano */
  --sup-tarjeta: linear-gradient(158deg, #FFFFFF 0%, #FBF7FF 46%, #F4EDFE 100%);

  /* --- Tipografía --- */
  --display: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --sans: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;

  --fs-micro: 1rem;         /* 16px — sólo créditos y notas legales */
  --fs-small: 1.0625rem;    /* 17px */
  --fs-body: 1.1875rem;     /* 19px — cuerpo principal (mínimo pedido: 18px) */
  --fs-card: 1.125rem;      /* 18px — texto dentro de tarjetas */
  --fs-lead: clamp(1.25rem, 1rem + 1.1vw, 1.55rem);
  --fs-h4: clamp(1.15rem, 1.05rem + .45vw, 1.35rem);
  --fs-h3: clamp(1.35rem, 1.15rem + .9vw, 1.7rem);
  --fs-h2: clamp(1.95rem, 1.4rem + 2.3vw, 3rem);
  --fs-h1: clamp(2.35rem, 1.55rem + 3.5vw, 4.15rem);

  /* --- Espaciado --- */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --band-y: clamp(4rem, 8vw, 7.5rem);
  --wrap: 1200px;
  --wrap-narrow: 780px;

  /* --- Formas --- */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-pill: 999px;

  /* --- Sombras (teñidas de morado, no grises) --- */
  --sh-sm: 0 2px 10px rgba(46, 16, 101, .09), 0 1px 3px rgba(46, 16, 101, .07);
  --sh-md: 0 12px 34px -10px rgba(46, 16, 101, .22), 0 3px 10px rgba(46, 16, 101, .10);
  --sh-lg: 0 30px 66px -20px rgba(46, 16, 101, .34), 0 8px 22px rgba(46, 16, 101, .14);
  --sh-btn: 0 8px 22px -6px rgba(76, 29, 149, .48);
  --sh-btn-hover: 0 16px 38px -8px rgba(76, 29, 149, .62), 0 0 0 6px rgba(139, 92, 246, .20);

  /* --- Curvas --- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.25, .46, .45, .94);

  /* --- Alturas fijas --- */
  --nav-h: 78px;
}

/* Contexto oscuro: se aplica a hero, pie y bandas moradas */
.oscuro {
  --bg: var(--brand-900);
  --fg: #FFFFFF;
  --fg-2: #E4DAFB;         /* 11.4:1 sobre --brand-900 */
  --surface: rgba(255, 255, 255, .07);
  --border: rgba(255, 255, 255, .20);
  --accent: var(--gold-300);
  --focus: var(--gold-300);
  color: var(--fg);
}

/* =============================================================
   2. RESET Y BASE
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  overflow-x: clip;
}

body {
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.72;
  font-weight: 400;
  color: var(--fg);
  background: var(--bg);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
}

img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; }
ul, ol { list-style: none; padding: 0; }
p { text-wrap: pretty; }
::selection { background: var(--brand-200); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}
:focus:not(:focus-visible) { outline: none; }

/* =============================================================
   3. UTILIDADES
   ============================================================= */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--angosto { max-width: var(--wrap-narrow); }
.wrap--medio { max-width: 980px; }

.solo-lectores {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.saltar {
  position: fixed;
  top: -120px; left: 1rem;
  z-index: 999;
  padding: 1rem 1.5rem;
  background: var(--brand-700);
  color: #fff;
  font-weight: 700;
  border-radius: var(--r-sm);
  box-shadow: var(--sh-lg);
  transition: top .2s var(--ease-out);
}
.saltar:focus { top: 1rem; }

.centro { text-align: center; }
.centro .lead, .centro p { margin-inline: auto; }

/* Iconos del sprite: trazo por defecto, currentColor siempre */
.ico {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.ico--grueso { stroke-width: 2.6; }

/* =============================================================
   4. FONDO AURORA — degradados que se desplazan muy lentamente
   Sin filter:blur() (costoso en GPU débiles): los propios
   radial-gradient ya son suaves. Sólo se anima transform.
   ============================================================= */
.aurora {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}
.aurora span {
  position: absolute;
  inset: -25%;
  display: block;
  will-change: transform;
}
.aurora .a1 {
  background: radial-gradient(32% 30% at 22% 20%, rgba(139, 92, 246, .42), transparent 70%);
  animation: deriva1 52s var(--ease-soft) infinite alternate;
}
.aurora .a2 {
  background: radial-gradient(34% 32% at 82% 26%, rgba(217, 70, 239, .30), transparent 70%);
  animation: deriva2 64s var(--ease-soft) infinite alternate;
}
.aurora .a3 {
  background: radial-gradient(40% 34% at 50% 92%, rgba(99, 102, 241, .32), transparent 72%);
  animation: deriva3 58s var(--ease-soft) infinite alternate;
}

/* Grano finísimo: le quita el aspecto plano y digital a las superficies claras.
   Se dibuja una sola vez y el navegador lo guarda en memoria. */
.grano {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

@keyframes deriva1 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(6%, 4%, 0) scale(1.14); }
}
@keyframes deriva2 {
  from { transform: translate3d(0, 0, 0) scale(1.08); }
  to   { transform: translate3d(-7%, 6%, 0) scale(1); }
}
@keyframes deriva3 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(5%, -5%, 0) scale(1.16); }
}

/* Aurora local dentro de bandas oscuras */
.aurora-local {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}
.aurora-local span { position: absolute; inset: -35%; display: block; will-change: transform; }
.aurora-local .b1 {
  background: radial-gradient(30% 42% at 16% 18%, rgba(167, 139, 250, .50), transparent 68%);
  animation: deriva1 44s var(--ease-soft) infinite alternate;
}
.aurora-local .b2 {
  background: radial-gradient(32% 40% at 86% 34%, rgba(232, 121, 249, .34), transparent 68%);
  animation: deriva2 56s var(--ease-soft) infinite alternate;
}
.aurora-local .b3 {
  background: radial-gradient(36% 40% at 62% 100%, rgba(56, 189, 248, .22), transparent 70%);
  animation: deriva3 50s var(--ease-soft) infinite alternate;
}

/* Retícula tenue, sólo decorativa */
.reticula {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .14;
  background-image:
    linear-gradient(rgba(255, 255, 255, .55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .55) 1px, transparent 1px);
  background-size: 62px 62px;
  -webkit-mask-image: radial-gradient(72% 70% at 30% 30%, #000, transparent 74%);
          mask-image: radial-gradient(72% 70% at 30% 30%, #000, transparent 74%);
}

/* =============================================================
   5. TIPOGRAFÍA
   ============================================================= */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.025em;
  text-wrap: balance;
  color: var(--fg);
}
h1 { font-size: var(--fs-h1); line-height: 1.06; max-width: 17ch; }
h2 { font-size: var(--fs-h2); line-height: 1.1; max-width: 20ch; }
h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -.02em; }
h4 { font-size: var(--fs-h4); line-height: 1.3; font-weight: 700; letter-spacing: -.015em; }

.h-ancho { max-width: none; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--fg-2);
  max-width: 46ch;
  font-weight: 400;
}
.parrafo { max-width: 62ch; color: var(--fg-2); }
.parrafo + .parrafo { margin-top: 1.1em; }

.destacado { color: var(--brand-600); font-weight: 700; }
.oscuro .destacado { color: var(--gold-300); }

.rotulo {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--display);
  font-size: var(--fs-small);
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--brand-800);
  margin-bottom: 1rem;
}
.rotulo::before {
  content: "";
  width: 30px; height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--brand-500), var(--brand-300));
}
.oscuro .rotulo { color: var(--gold-300); }
.oscuro .rotulo::before { background: linear-gradient(90deg, var(--gold-500), var(--gold-300)); }

/* Enlaces dentro de texto corrido */
.parrafo a, .prosa a, .lead a {
  color: var(--brand-600);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  font-weight: 600;
  border-radius: 3px;
}
.parrafo a:hover, .prosa a:hover, .lead a:hover { color: var(--brand-800); background: var(--brand-050); }
.oscuro .parrafo a, .oscuro .lead a { color: var(--gold-300); }

.prosa > * + * { margin-top: 1.1em; }
.prosa h3 { margin-top: 1.8em; }
.prosa ul { display: grid; gap: .7rem; }
.prosa li { position: relative; padding-left: 1.9rem; color: var(--fg-2); }
.prosa li::before {
  content: "";
  position: absolute; left: 0; top: .62em;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--brand-400);
}

/* =============================================================
   6. BOTONES — el elemento más visible de cada sección
   ============================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7em;
  min-height: 62px;
  min-width: 48px;
  padding: .85em 1.9em;
  font-family: var(--display);
  font-size: 1.1875rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.012em;
  text-align: center;
  text-decoration: none;
  border-radius: var(--r-pill);
  border: 2.5px solid transparent;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  transition:
    transform .28s var(--ease-out),
    box-shadow .28s var(--ease-out),
    background-color .22s var(--ease-out),
    border-color .22s var(--ease-out),
    color .22s var(--ease-out);
}
.btn .ico { width: 26px; height: 26px; flex: 0 0 auto; }
.btn:active { transform: translateY(1px) scale(.995); }

/* Primario: morado */
.btn--principal {
  background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-700) 55%, var(--brand-800) 100%);
  color: #fff;
  box-shadow: var(--sh-btn);
}
.btn--principal:hover,
.btn--principal:focus-visible {
  background: linear-gradient(135deg, var(--brand-700) 0%, var(--brand-800) 55%, var(--brand-900) 100%);
  transform: translateY(-3px);
  box-shadow: var(--sh-btn-hover);
}

/* WhatsApp: verde oscuro de marca, contraste AAA con texto blanco */
.btn--wa {
  background: var(--wa);
  color: #fff;
  box-shadow: 0 8px 22px -6px rgba(7, 94, 84, .55);
}
.btn--wa:hover,
.btn--wa:focus-visible {
  background: var(--wa-dark);
  transform: translateY(-3px);
  box-shadow: 0 16px 38px -8px rgba(7, 94, 84, .62), 0 0 0 6px var(--wa-glow);
}

/* Secundario: contorno */
.btn--linea {
  background: linear-gradient(160deg, #FFFFFF, #F4EDFE);
  color: var(--brand-700);
  border-color: var(--brand-300);
  box-shadow: var(--sh-sm);
}
.btn--linea:hover,
.btn--linea:focus-visible {
  background: linear-gradient(160deg, #F6F1FE, #E9E0FB);
  border-color: var(--brand-600);
  color: var(--brand-800);
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
}
.oscuro .btn--linea {
  background: rgba(255, 255, 255, .10);
  color: #fff;
  border-color: rgba(255, 255, 255, .55);
  box-shadow: none;
}
.oscuro .btn--linea:hover,
.oscuro .btn--linea:focus-visible {
  background: #fff;
  color: var(--brand-800);
  border-color: #fff;
  box-shadow: 0 16px 38px -10px rgba(0, 0, 0, .5);
}

/* Dorado: para llamadas dentro de bandas oscuras */
.btn--oro {
  background: linear-gradient(135deg, var(--gold-300), var(--gold-500));
  color: #3A2200;
  box-shadow: 0 8px 22px -6px rgba(255, 176, 32, .55);
}
.btn--oro:hover,
.btn--oro:focus-visible {
  background: linear-gradient(135deg, #FFDE8A, var(--gold-500));
  transform: translateY(-3px);
  box-shadow: 0 16px 38px -8px rgba(255, 176, 32, .55), 0 0 0 6px rgba(255, 209, 102, .28);
}

.btn--grande { min-height: 70px; font-size: 1.3rem; padding: .9em 2.2em; }
.btn--bloque { width: 100%; }

/* Grupo de botones */
.botones {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.1rem;
  align-items: center;
}
.botones--centro { justify-content: center; }

.nota-boton {
  font-size: var(--fs-small);
  color: var(--fg-2);
  margin-top: 1rem;
}

/* Enlace con flecha */
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  min-height: 48px;
  font-weight: 700;
  font-size: 1.1875rem;
  color: var(--brand-600);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  transition: color .2s var(--ease-out), gap .2s var(--ease-out);
}
.enlace-flecha:hover { color: var(--brand-800); gap: .85em; }
.enlace-flecha .ico { width: 22px; height: 22px; }
.oscuro .enlace-flecha { color: var(--gold-300); }
.oscuro .enlace-flecha:hover { color: #fff; }

/* =============================================================
   7. ENCABEZADO Y NAVEGACIÓN
   ============================================================= */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(244, 239, 253, .92);
  border-bottom: 1.5px solid var(--line);
  transition: box-shadow .3s var(--ease-out), background-color .3s var(--ease-out);
}
@supports (backdrop-filter: blur(14px)) {
  .cabecera { background: rgba(244, 239, 253, .80); backdrop-filter: blur(16px) saturate(170%); -webkit-backdrop-filter: blur(16px) saturate(170%); }
}
.cabecera.esta-fija { box-shadow: 0 8px 30px -14px rgba(46, 16, 101, .38); }

.cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--nav-h);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -.03em;
  color: var(--ink);
  padding: .35rem;
  margin: -.35rem;
  border-radius: var(--r-sm);
  flex: 0 0 auto;
}
.marca__mark { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 11px; box-shadow: 0 4px 14px -4px rgba(76, 29, 149, .5); }
.marca__txt { line-height: 1; }
.marca__txt small { display: block; font-size: .6em; font-weight: 700; letter-spacing: .05em; color: var(--brand-600); margin-top: 2px; }
.marca:hover .marca__mark { transform: scale(1.05) rotate(-2deg); }
.marca__mark { transition: transform .3s var(--ease-out); }

/* Menú */
.nav { display: none; }
.nav__lista { display: flex; align-items: center; gap: .15rem; }
.nav__enlace {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: .55rem .68rem;
  font-size: 1.0625rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--ink-2);
  text-decoration: none;
  border-radius: var(--r-sm);
  position: relative;
  transition: color .2s var(--ease-out), background-color .2s var(--ease-out);
}
.nav__enlace:hover { color: var(--brand-700); background: var(--brand-050); }
.nav__enlace[aria-current="page"] { color: var(--brand-800); background: var(--brand-100); }
.nav__enlace[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: .68rem; right: .68rem; bottom: 6px;
  height: 3px; border-radius: 2px;
  background: var(--brand-600);
}

/* Botón "Menú" (móvil) — con texto visible, nunca sólo un icono */
.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 54px;
  padding: .5rem 1.15rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.0625rem;
  color: var(--brand-800);
  background: var(--brand-100);
  border: 2px solid var(--brand-200);
  border-radius: var(--r-pill);
  transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.menu-btn:hover { background: var(--brand-200); border-color: var(--brand-400); }
.menu-btn__barras { width: 22px; height: 16px; position: relative; flex: 0 0 auto; }
.menu-btn__barras i {
  position: absolute; left: 0; width: 100%; height: 3px;
  background: currentColor; border-radius: 2px;
  transition: transform .3s var(--ease-out), opacity .2s var(--ease-out);
}
.menu-btn__barras i:nth-child(1) { top: 0; }
.menu-btn__barras i:nth-child(2) { top: 6.5px; }
.menu-btn__barras i:nth-child(3) { top: 13px; }
.menu-btn[aria-expanded="true"] .menu-btn__barras i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__barras i:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] .menu-btn__barras i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Panel del menú en móvil */
.nav-movil {
  display: none;
  border-top: 1.5px solid var(--line);
  background: var(--sup-tarjeta);
  box-shadow: 0 22px 40px -20px rgba(46, 16, 101, .35);
}
.nav-movil.esta-abierto { display: block; }
.nav-movil__lista { padding: .75rem 0 1.25rem; display: grid; gap: 2px; }
.nav-movil__enlace {
  display: flex;
  align-items: center;
  min-height: 60px;
  padding: .75rem 1rem;
  font-family: var(--display);
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--r-sm);
  border-left: 5px solid transparent;
}
.nav-movil__enlace:hover { background: var(--brand-050); }
.nav-movil__enlace[aria-current="page"] { background: var(--brand-100); color: var(--brand-800); border-left-color: var(--brand-600); }
.nav-movil__pie { padding: .5rem 1rem 1.5rem; display: grid; gap: .75rem; }

/* =============================================================
   8. TARJETAS Y BLOQUES
   ============================================================= */
.rejilla { display: grid; gap: 1.4rem; }
.rejilla--2 { grid-template-columns: 1fr; }
.rejilla--3 { grid-template-columns: 1fr; }
.rejilla--4 { grid-template-columns: 1fr; }

/* Sin esto, un elemento con una palabra larga estira toda la columna
   y el contenido se sale de la pantalla en el celular. */
.rejilla > *, .pasos > *, .duo > *, .antes-despues > *,
.pantallas > *, .cifras > *, .pie__rejilla > *, .hero__rejilla > * { min-width: 0; }

.tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  padding: clamp(1.5rem, 3vw, 2.1rem);
  background: var(--sup-tarjeta);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  transition: transform .32s var(--ease-out), box-shadow .32s var(--ease-out), border-color .32s var(--ease-out);
}
/* Filo de color que se enciende al pasar el cursor */
.tarjeta::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--brand-500), var(--brand-300) 45%, var(--gold-300));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .42s var(--ease-out);
}
.tarjeta p { font-size: var(--fs-card); color: var(--fg-2); margin: 0; }
.tarjeta h3, .tarjeta h4 { margin: 0; }
.tarjeta > .pildora { align-self: flex-start; margin-top: auto; }

@media (hover: hover) and (pointer: fine) {
  .tarjeta:hover {
    transform: translateY(-6px);
    border-color: var(--brand-400);
    box-shadow: var(--sh-lg);
  }
  .tarjeta:hover::before { transform: scaleX(1); }
  .tarjeta:hover .tarjeta__ico {
    transform: scale(1.08) rotate(-4deg);
    background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
    border-color: var(--brand-700);
    color: #fff;
    box-shadow: 0 10px 24px -10px rgba(76, 29, 149, .7);
  }
}
.tarjeta:focus-within { border-color: var(--brand-400); box-shadow: var(--sh-md); }
.tarjeta:focus-within::before { transform: scaleX(1); }

.tarjeta__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px; height: 62px;
  flex: 0 0 auto;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--brand-100), var(--brand-050));
  border: 1.5px solid var(--brand-200);
  color: var(--brand-700);
  transition: transform .32s var(--ease-out), background .32s var(--ease-out), color .32s var(--ease-out);
}
.tarjeta__ico .ico { width: 34px; height: 34px; }

.tarjeta--oscura {
  background:
    radial-gradient(70% 60% at 12% 8%, rgba(167, 139, 250, .30), transparent 68%),
    linear-gradient(150deg, var(--brand-800), var(--brand-950));
  border-color: rgba(255, 255, 255, .20);
  color: #fff;
}
.tarjeta--oscura::before { background: linear-gradient(90deg, var(--gold-300), var(--brand-300)); }
.tarjeta--oscura p { color: #E4DAFB; }
.tarjeta--oscura h3, .tarjeta--oscura h4 { color: #fff; }
.tarjeta--oscura .tarjeta__ico {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .28);
  color: var(--gold-300);
}

/* Tarjeta con enlace: toda la superficie es clicable */
.tarjeta--enlace .tapa {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.tarjeta--enlace .tapa:focus-visible { outline-offset: -4px; }

/* Etiqueta / píldora */
.pildora {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .45em 1em;
  font-family: var(--display);
  font-size: var(--fs-small);
  font-weight: 800;
  letter-spacing: .01em;
  border-radius: var(--r-pill);
  background: var(--brand-100);
  color: var(--brand-800);
  border: 1.5px solid var(--brand-200);
}
.oscuro .pildora {
  background: rgba(255, 255, 255, .13);
  color: #fff;
  border-color: rgba(255, 255, 255, .30);
}
.pildora--oro { background: rgba(255, 176, 32, .18); color: var(--gold-ink); border-color: rgba(255, 176, 32, .5); }
.oscuro .pildora--oro { background: rgba(255, 176, 32, .22); color: var(--gold-300); border-color: rgba(255, 209, 102, .55); }

.pildora .punto {
  width: 10px; height: 10px; border-radius: 50%;
  background: #16A34A;
  box-shadow: 0 0 0 4px rgba(22, 163, 74, .22);
  animation: latido 2.6s var(--ease-soft) infinite;
}
.oscuro .pildora .punto { background: #4ADE80; box-shadow: 0 0 0 4px rgba(74, 222, 128, .25); }
@keyframes latido {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.22); opacity: .72; }
}

/* Lista de beneficios con palomita */
.lista-check { display: grid; gap: .9rem; }
.lista-check li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: .85rem;
  align-items: start;
  font-size: var(--fs-card);
  color: var(--fg-2);
}
.lista-check .ico {
  width: 30px; height: 30px;
  color: var(--brand-600);
  margin-top: 1px;
}
.oscuro .lista-check .ico { color: var(--gold-300); }
.lista-check strong { color: var(--fg); font-weight: 700; }

/* Cifras destacadas */
.cifras {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  padding: 0;
}
.cifra {
  padding: 1.25rem 1.35rem;
  background: var(--sup-tarjeta);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
}
.cifra dt { font-size: var(--fs-small); color: var(--fg-2); font-weight: 600; order: 2; margin-top: .2rem; }
.cifra dd {
  order: 1;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--brand-700);
}
.cifra { display: flex; flex-direction: column; }
.oscuro .cifra { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .22); }
.oscuro .cifra dd { color: var(--gold-300); }
.oscuro .cifra dt { color: #E4DAFB; }

/* =============================================================
   9. PORTADA (HERO)
   ============================================================= */
.hero {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(165deg, var(--brand-900) 0%, var(--brand-950) 58%, #170738 100%);
  color: #fff;
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(4rem, 8vw, 7rem);
  overflow: hidden;
}
.hero::after {
  /* Velo que garantiza contraste del texto sobre el mesh en movimiento */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, rgba(20, 6, 48, .70) 0%, rgba(20, 6, 48, .42) 48%, rgba(20, 6, 48, .18) 100%);
  pointer-events: none;
}
.hero__interior { position: relative; z-index: 2; }

.hero__rejilla {
  display: grid;
  gap: clamp(2.5rem, 5vw, 3.5rem);
  align-items: center;
}

.hero h1 {
  color: #fff;
  max-width: none;
  font-size: clamp(2.2rem, 1.35rem + 3.05vw, 3.65rem);
}
.hero h1 .resalte {
  color: var(--gold-300);
  position: relative;
  white-space: nowrap;
}
.hero .lead { color: #E4DAFB; max-width: 50ch; margin-top: 1.35rem; font-size: clamp(1.25rem, 1rem + 1.05vw, 1.5rem); }

.hero__botones { margin-top: 2rem; }
.hero__pie {
  margin-top: 1.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}

/* Franja de confianza bajo el hero */
.franja {
  position: relative;
  z-index: 2;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(1.75rem, 3vw, 2.25rem);
  border-top: 1.5px solid rgba(255, 255, 255, .18);
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
.franja__item { display: flex; gap: .9rem; align-items: flex-start; }
.franja__item .ico { width: 34px; height: 34px; color: var(--gold-300); flex: 0 0 auto; margin-top: 2px; }
.franja__item b { display: block; font-family: var(--display); font-size: 1.1875rem; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.franja__item span { font-size: var(--fs-card); color: #DCD1F7; line-height: 1.55; }

/* =============================================================
   10. SECCIONES DE CONTENIDO
   ============================================================= */
.banda {
  position: relative;
  padding-block: var(--band-y);
  isolation: isolate;
}
.banda > .wrap { position: relative; z-index: 2; }

/* Bandas claras: lila en distintas intensidades, nunca blanco plano */
.banda--blanca {
  background:
    radial-gradient(58% 44% at 78% 6%, rgba(167, 139, 250, .24), transparent 66%),
    linear-gradient(180deg, #F5F0FD 0%, #EDE4FB 58%, #E5DAF7 100%);
}
.banda--tinte {
  background:
    radial-gradient(52% 40% at 12% 4%, rgba(139, 92, 246, .26), transparent 68%),
    radial-gradient(46% 38% at 92% 88%, rgba(217, 70, 239, .18), transparent 68%),
    linear-gradient(180deg, #E9DFF9 0%, #F2EBFC 52%, #E4D9F7 100%);
}
.banda--tinte2 {
  background:
    radial-gradient(60% 48% at 50% 0%, rgba(124, 58, 237, .20), transparent 70%),
    linear-gradient(180deg, #E0D3F5, #EBE2FA);
}

/* Transición suave: la banda clara recibe un poco de la luz de la de arriba,
   en vez de cortar con un borde duro. */
.banda--blanca::before, .banda--tinte::before, .banda--tinte2::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 160px;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(139, 92, 246, .40), transparent) top / 100% 1px no-repeat,
    radial-gradient(72% 100% at 50% 0%, rgba(76, 29, 149, .13), transparent 74%);
}

/* Bandas oscuras */
.banda--oscura,
.banda--profunda {
  color: #fff;
  overflow: hidden;
}
.banda--oscura { background: linear-gradient(155deg, var(--brand-900), var(--brand-950)); }
.banda--profunda { background: linear-gradient(160deg, var(--brand-800) 0%, var(--brand-900) 55%, var(--brand-950) 100%); }
.banda--oscura::after,
.banda--profunda::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(20, 6, 48, .55), rgba(20, 6, 48, .28));
  pointer-events: none;
}

.banda__cabeza { max-width: 62ch; margin-bottom: clamp(2.25rem, 4vw, 3.25rem); position: relative; }
.banda__cabeza.centro { margin-inline: auto; }
.banda__cabeza .lead { margin-top: 1rem; }
/* Halo suave detrás del título de sección */
.banda__cabeza::before {
  content: "";
  position: absolute;
  left: -8%; right: -8%; top: -60%; bottom: -30%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(46% 52% at 34% 46%, rgba(139, 92, 246, .17), transparent 72%);
}
.banda__cabeza.centro::before { background: radial-gradient(44% 54% at 50% 46%, rgba(139, 92, 246, .17), transparent 72%); }
.oscuro .banda__cabeza::before, .banda--oscura .banda__cabeza::before, .banda--profunda .banda__cabeza::before { display: none; }

/* Pasos numerados */
.pasos { counter-reset: paso; display: grid; gap: 1.4rem; }
/* Con la placa del número ocupando 68 px, dos columnas quedan apretadas
   por debajo de 960 px: hasta ahí van en una sola. */
.pasos.rejilla--2 { grid-template-columns: 1fr; }
.paso {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--sup-tarjeta);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .paso:hover { transform: translateY(-5px); border-color: var(--brand-300); box-shadow: var(--sh-lg); }
}
.paso__num {
  counter-increment: paso;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px; height: 68px;
  border-radius: var(--r-md);
  background: linear-gradient(140deg, var(--brand-600), var(--brand-800));
  color: #fff;
  font-family: var(--display);
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -.03em;
  box-shadow: 0 8px 20px -8px rgba(76, 29, 149, .6);
}
.paso__num::before { content: counter(paso); }
.paso h3 { margin-bottom: .4rem; }
.paso p { font-size: var(--fs-card); color: var(--fg-2); }
.paso__dato {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  max-width: 100%;
  gap: .45em;
  margin-top: .9rem;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--brand-700);
  background: var(--brand-050);
  border: 1.5px solid var(--brand-100);
  padding: .35em .9em;
  border-radius: var(--r-pill);
}
.oscuro .paso, .banda--oscura .paso {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .18);
}
.banda--oscura .paso h3 { color: #fff; }
.banda--oscura .paso p { color: #E4DAFB; }
.banda--oscura .paso__num { background: linear-gradient(140deg, var(--gold-300), var(--gold-500)); color: #3A2200; }
.banda--oscura .paso__dato { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .25); color: #fff; }

/* Bloque a dos columnas: texto + figura */
.duo {
  display: grid;
  gap: clamp(2.25rem, 5vw, 4rem);
  align-items: center;
}
.duo--invertido .duo__figura { order: -1; }
.duo__texto > * + * { margin-top: 1.1rem; }
.duo__texto .botones { margin-top: 1.9rem; }

/* Panel por actor */
.actor {
  position: relative;
  scroll-margin-top: calc(var(--nav-h) + 24px);
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
  background: var(--sup-tarjeta);
  border: 1.5px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
  overflow: hidden;
}
.actor::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 7px;
  background: linear-gradient(90deg, var(--brand-500), var(--brand-300), var(--gold-300));
}
.actor__cabeza { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1.35rem; flex-wrap: wrap; }
.actor__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 74px; height: 74px; flex: 0 0 auto;
  border-radius: var(--r-md);
  background: linear-gradient(140deg, var(--brand-600), var(--brand-800));
  color: #fff;
  box-shadow: 0 10px 24px -10px rgba(76, 29, 149, .65);
}
.actor__ico .ico { width: 40px; height: 40px; }
.actor h2 { font-size: var(--fs-h3); max-width: none; margin: 0; }
.actor__que { font-size: var(--fs-small); color: var(--ink-3); font-weight: 600; margin-top: .15rem; }
.actor__cita {
  margin-top: 1.4rem;
  padding: 1.1rem 1.35rem;
  background: var(--brand-050);
  border-left: 5px solid var(--brand-400);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--fs-card);
  color: var(--ink-2);
}
.actor__cita b { display: block; font-size: var(--fs-small); color: var(--brand-700); margin-bottom: .3rem; text-transform: uppercase; letter-spacing: .06em; font-family: var(--display); }

/* Bloque de cita/definición para GEO */
.definicion {
  padding: clamp(1.5rem, 3vw, 2.2rem);
  background: linear-gradient(140deg, #F7F2FE 0%, #EFE7FC 100%);
  border: 2px solid var(--brand-200);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.definicion h3 { margin-bottom: .6rem; }
.definicion p { color: var(--ink-2); font-size: var(--fs-card); }
.definicion p + p { margin-top: .8rem; }

/* Llamada final de página */
.cierre {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(150deg, var(--brand-800) 0%, var(--brand-950) 100%);
  color: #fff;
  border-radius: var(--r-xl);
  padding: clamp(2.25rem, 5vw, 4rem);
  text-align: center;
  box-shadow: var(--sh-lg);
}
.cierre > * { position: relative; z-index: 2; }
.cierre::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(20, 6, 48, .48), rgba(20, 6, 48, .22));
}
.cierre h2 { color: #fff; margin-inline: auto; }
.cierre .lead { color: #E4DAFB; margin-inline: auto; margin-top: 1rem; }
.cierre .botones { margin-top: 2rem; }

/* Tabla comparativa simple (antes / después) */
.antes-despues { display: grid; gap: 1.25rem; }
.ad {
  padding: clamp(1.4rem, 3vw, 2rem);
  border-radius: var(--r-lg);
  border: 1.5px solid var(--line);
  background: var(--sup-tarjeta);
}
.ad--antes {
  background: linear-gradient(152deg, #FBF0E9 0%, #F5E3D6 100%);
  border-color: #E3C4AF;
}
.ad--despues {
  background: linear-gradient(152deg, #FFFFFF 0%, #F1E8FE 100%);
  border-color: var(--brand-400);
  box-shadow: var(--sh-md);
}
.ad h3 { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; font-size: var(--fs-h4); }
.ad h3 .ico { width: 30px; height: 30px; }
.ad--antes h3 { color: #8A3D22; }
.ad--antes h3 .ico { color: #B4521F; }
.ad--despues h3 { color: var(--brand-800); }
.ad--despues h3 .ico { color: var(--brand-600); }
.ad li { position: relative; padding-left: 1.7rem; font-size: var(--fs-card); color: var(--fg-2); }
.ad li + li { margin-top: .7rem; }
.ad li::before { content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 10px; border-radius: 50%; }
.ad--antes li { color: #4A3524; }
.ad--antes li::before { background: #A34E1B; }
.ad--despues li::before { background: var(--brand-600); }

/* =============================================================
   11. MAQUETA DE CELULAR
   ============================================================= */
.duo__figura { display: flex; justify-content: center; }

.celular {
  position: relative;
  width: min(300px, 78vw);
  aspect-ratio: 300 / 610;
  background: linear-gradient(160deg, #241040, #120727);
  border-radius: 42px;
  padding: 11px;
  box-shadow:
    0 40px 80px -30px rgba(46, 16, 101, .55),
    0 0 0 2.5px rgba(255, 255, 255, .10) inset,
    0 8px 24px rgba(46, 16, 101, .22);
  flex: 0 0 auto;
}
.celular::before {
  /* muesca superior */
  content: "";
  position: absolute;
  top: 20px; left: 50%;
  transform: translateX(-50%);
  width: 96px; height: 22px;
  background: #0C0418;
  border-radius: 999px;
  z-index: 3;
}
.celular__pantalla {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 32px;
  overflow: hidden;
  background: #FBF9FF;
  display: flex;
  flex-direction: column;
}
.celular img, .celular svg { width: 100%; height: 100%; object-fit: cover; }

.celular--flota { animation: flotar 9s var(--ease-soft) infinite alternate; }
@keyframes flotar {
  from { transform: translateY(-8px) rotate(-1.1deg); }
  to   { transform: translateY(8px) rotate(1.1deg); }
}

/* Halo detrás del celular */
.figura-halo { position: relative; display: flex; justify-content: center; }
.figura-halo::before {
  content: "";
  position: absolute;
  width: 118%; height: 74%;
  top: 13%; left: -9%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(139, 92, 246, .40), transparent 70%);
  pointer-events: none;
}

/* Trío de pantallas */
.pantallas {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  justify-items: center;
}
.pantalla-item { text-align: center; max-width: 320px; }
.pantalla-item figcaption { margin-top: 1.1rem; }
.pantalla-item figcaption b { display: block; font-family: var(--display); font-size: var(--fs-h4); font-weight: 800; color: var(--fg); letter-spacing: -.02em; }
.pantalla-item figcaption span { display: block; margin-top: .35rem; font-size: var(--fs-card); color: var(--fg-2); }

/* =============================================================
   12. PREGUNTAS FRECUENTES
   ============================================================= */
.faq { display: grid; gap: 1rem; }
.faq__item {
  background: var(--sup-tarjeta);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  transition: border-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
  scroll-margin-top: calc(var(--nav-h) + 20px);
}
.faq__item[open] { border-color: var(--brand-300); box-shadow: var(--sh-md); }
.faq__item:hover { border-color: var(--brand-300); }

.faq__pregunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: 68px;
  padding: 1.15rem clamp(1.1rem, 2.5vw, 1.6rem);
  font-family: var(--display);
  font-size: var(--fs-h4);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -.018em;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  text-align: left;
}
.faq__pregunta::-webkit-details-marker { display: none; }
.faq__pregunta:hover { background: var(--brand-050); }
.faq__pregunta:focus-visible { outline-offset: -3px; }

.faq__mas {
  position: relative;
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--brand-100);
  border: 1.5px solid var(--brand-200);
  transition: transform .3s var(--ease-out), background-color .25s var(--ease-out);
}
.faq__mas::before, .faq__mas::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  background: var(--brand-700);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: opacity .25s var(--ease-out);
}
.faq__mas::before { width: 17px; height: 3.5px; }
.faq__mas::after { width: 3.5px; height: 17px; }
.faq__item[open] .faq__mas { background: var(--brand-600); border-color: var(--brand-600); transform: rotate(180deg); }
.faq__item[open] .faq__mas::before { background: #fff; }
.faq__item[open] .faq__mas::after { opacity: 0; }

.faq__respuesta {
  padding: 0 clamp(1.1rem, 2.5vw, 1.6rem) 1.5rem;
  border-top: 1.5px solid var(--line);
  padding-top: 1.25rem;
  margin-top: -1px;
}
.faq__respuesta p { font-size: var(--fs-card); color: var(--fg-2); max-width: 68ch; }
.faq__respuesta p + p { margin-top: .85rem; }
.faq__respuesta ul { margin-top: .85rem; display: grid; gap: .55rem; }
.faq__respuesta li { position: relative; padding-left: 1.6rem; font-size: var(--fs-card); color: var(--fg-2); }
.faq__respuesta li::before { content: ""; position: absolute; left: 0; top: .6em; width: 9px; height: 9px; border-radius: 50%; background: var(--brand-400); }

/* Índice de preguntas */
.faq-indice { display: grid; gap: .5rem; }
.faq-indice a {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: 52px;
  padding: .6rem .95rem;
  font-size: var(--fs-card);
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
  border-radius: var(--r-sm);
  border: 1.5px solid transparent;
}
.faq-indice a:hover { background: var(--sup-tarjeta); border-color: var(--brand-300); color: var(--brand-800); }
.faq-indice a::before { content: "›"; font-size: 1.4em; color: var(--brand-500); line-height: 1; }

/* =============================================================
   13. FORMULARIO
   ============================================================= */
.formulario {
  display: grid;
  gap: 1.5rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--sup-tarjeta);
  border: 1.5px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
}
.campo { display: grid; gap: .55rem; }
.campo label {
  font-family: var(--display);
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.015em;
}
.campo label .opc { font-weight: 500; color: var(--ink-3); font-size: var(--fs-small); letter-spacing: 0; }
.campo .ayuda { font-size: var(--fs-small); color: var(--ink-3); }

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: 62px;
  padding: .9rem 1.1rem;
  font-family: var(--sans);
  font-size: 1.1875rem;   /* ≥16px evita el zoom automático en iPhone */
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  border: 2.5px solid var(--line-strong);
  border-radius: var(--r-md);
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out), background-color .2s var(--ease-out);
}
.campo textarea { min-height: 150px; resize: vertical; }
.campo select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234C1D95' stroke-width='3' 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 1.05rem center;
  background-size: 24px;
  padding-right: 3.2rem;
}
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--brand-400); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  background: var(--sup-tarjeta);
  border-color: var(--brand-600);
  box-shadow: 0 0 0 5px rgba(139, 92, 246, .26);
}
.campo input::placeholder, .campo textarea::placeholder { color: #8A79A8; opacity: 1; }

.campo--error input, .campo--error select, .campo--error textarea { border-color: #B4231C; background: #FFF6F5; }
.campo__error {
  display: none;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-small);
  font-weight: 700;
  color: #93150F;
}
.campo--error .campo__error { display: flex; }
.campo__error .ico { width: 20px; height: 20px; flex: 0 0 auto; }

.trampa { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }

.form-aviso {
  display: none;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.25rem 1.4rem;
  border-radius: var(--r-md);
  font-size: var(--fs-card);
  line-height: 1.6;
}
.form-aviso.esta-visible { display: flex; }
.form-aviso .ico { width: 30px; height: 30px; flex: 0 0 auto; margin-top: 1px; }
.form-aviso--ok { background: #EAF8EF; border: 2px solid #A5D9B8; color: #14532D; }
.form-aviso--ok .ico { color: #15803D; }
.form-aviso--error { background: #FFF3F2; border: 2px solid #F0BDB8; color: #7F1D1D; }
.form-aviso--error .ico { color: #B4231C; }
.form-aviso b { display: block; font-family: var(--display); font-size: var(--fs-h4); margin-bottom: .25rem; }

.btn[aria-busy="true"] { opacity: .8; pointer-events: none; }

/* Bloque de datos de contacto */
.contacto-datos { display: grid; gap: 1rem; }
.dato {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 1.1rem;
  align-items: center;
  padding: 1.15rem 1.35rem;
  background: var(--sup-tarjeta);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  text-decoration: none;
  transition: transform .28s var(--ease-out), border-color .28s var(--ease-out), box-shadow .28s var(--ease-out);
}
a.dato:hover { transform: translateY(-4px); border-color: var(--brand-300); box-shadow: var(--sh-md); }
.dato .dato__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 62px; height: 62px;
  border-radius: var(--r-md);
  background: linear-gradient(140deg, var(--brand-100), var(--brand-050));
  border: 1.5px solid var(--brand-200);
  color: var(--brand-700);
}
.dato .dato__ico .ico { width: 30px; height: 30px; }
.dato .dato__ico--wa { background: var(--wa); border-color: var(--wa); color: #fff; }
.dato b { display: block; font-family: var(--display); font-size: var(--fs-small); font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--brand-700); }
.dato span { display: block; font-size: var(--fs-card); font-weight: 600; color: var(--ink); line-height: 1.45; word-break: break-word; }

.mapa {
  border: 0;
  width: 100%;
  aspect-ratio: 16 / 11;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  background: var(--brand-050);
}

/* =============================================================
   14. PRESENTACIÓN — página de descarga del PDF
   ============================================================= */
.portada-pdf {
  position: relative;
  width: 100%;
  max-width: 620px;
  margin: 0;
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .06));
  border: 1.5px solid rgba(255, 255, 255, .28);
  padding: 12px 12px 0;
  box-shadow: 0 34px 74px -26px rgba(10, 3, 28, .78), 0 8px 22px rgba(10, 3, 28, .34);
  transform: rotate(-1.3deg);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .portada-pdf:hover {
    transform: rotate(0deg) translateY(-6px);
    box-shadow: 0 44px 88px -28px rgba(10, 3, 28, .82), 0 10px 26px rgba(10, 3, 28, .38);
  }
}
.portada-pdf img {
  width: 100%;
  height: auto;
  border-radius: calc(var(--r-lg) - 8px);
  display: block;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .30);
}
.portada-pdf figcaption {
  padding: .85rem .4rem 1rem;
  text-align: center;
  font-size: var(--fs-small);
  font-weight: 600;
  color: #DCD1F7;
  letter-spacing: .02em;
}

/* Índice de láminas del PDF */
.indice-pdf {
  display: grid;
  gap: .85rem;
  grid-template-columns: 1fr;
}
.indice-pdf__item {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  min-width: 0;
  padding: 1rem 1.2rem;
  background: var(--sup-tarjeta);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  transition: transform .28s var(--ease-out), border-color .28s var(--ease-out), box-shadow .28s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .indice-pdf__item:hover {
    transform: translateX(5px);
    border-color: var(--brand-400);
    box-shadow: var(--sh-md);
  }
}
.indice-pdf__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: linear-gradient(140deg, var(--brand-600), var(--brand-800));
  color: #fff;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -.02em;
  box-shadow: 0 6px 16px -6px rgba(76, 29, 149, .6);
}
.indice-pdf__item > div > b {
  display: block;
  font-family: var(--display);
  font-size: var(--fs-h4);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--fg);
  line-height: 1.25;
}
.indice-pdf__item > div > span {
  display: block;
  font-size: var(--fs-card);
  color: var(--fg-2);
  line-height: 1.45;
  margin-top: .15rem;
}

/* =============================================================
   15. PIE DE PÁGINA
   ============================================================= */
.pie {
  position: relative;
  background: linear-gradient(180deg, var(--brand-950), #120630);
  color: #fff;
  padding-block: clamp(3rem, 6vw, 4.5rem) 0;
  overflow: hidden;
  isolation: isolate;
}
.pie > .wrap { position: relative; z-index: 2; }
.pie__rejilla { display: grid; gap: 2.5rem; }
.pie h3 {
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-300);
  margin-bottom: 1.1rem;
}
.pie p, .pie address { color: #D9CDF6; font-style: normal; font-size: var(--fs-card); line-height: 1.65; }
.pie__enlaces { display: grid; gap: 2px; }
.pie__enlaces a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: .3rem .6rem;
  margin-left: -.6rem;
  font-size: var(--fs-card);
  font-weight: 600;
  color: #E4DAFB;
  text-decoration: none;
  border-radius: var(--r-sm);
  transition: color .2s var(--ease-out), background-color .2s var(--ease-out);
}
.pie__enlaces a:hover { color: #fff; background: rgba(255, 255, 255, .10); }
.pie .marca { color: #fff; }
.pie .marca__txt small { color: var(--brand-200); }

.pie__contacto { display: grid; gap: .55rem; }
.pie__contacto a {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  min-height: 52px;
  padding: .35rem .6rem;
  margin-left: -.6rem;
  font-size: var(--fs-card);
  font-weight: 600;
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .38);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  border-radius: var(--r-sm);
  word-break: break-word;
  transition: color .2s var(--ease-out), background-color .2s var(--ease-out);
}
.pie__contacto a:hover { color: var(--gold-300); background: rgba(255, 255, 255, .10); text-decoration-color: var(--gold-300); }
.pie__contacto .ico { width: 24px; height: 24px; flex: 0 0 auto; color: var(--gold-300); }

/* Espacio para que el botón flotante de WhatsApp nunca tape el pie */
.pie__base {
  margin-top: clamp(2.25rem, 4vw, 3rem);
  padding-block: 1.5rem 6.5rem;
  border-top: 1.5px solid rgba(255, 255, 255, .16);
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-micro);
  color: #BEAEE4;
}
.pie__base a { color: #DCD1F7; text-decoration: underline; text-underline-offset: 3px; }
.pie__base a:hover { color: #fff; }

/* =============================================================
   16. BOTÓN FLOTANTE DE WHATSAPP
   ============================================================= */
.wa-flota {
  position: fixed;
  right: clamp(.85rem, 3vw, 1.75rem);
  bottom: clamp(.85rem, 3vw, 1.75rem);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  min-height: 64px;
  padding: .75rem 1.4rem .75rem .95rem;
  background: var(--wa);
  color: #fff;
  font-family: var(--display);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -.012em;
  text-decoration: none;
  border-radius: var(--r-pill);
  border: 2.5px solid rgba(255, 255, 255, .30);
  box-shadow: 0 14px 34px -10px rgba(7, 94, 84, .70), 0 3px 10px rgba(0, 0, 0, .22);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), background-color .25s var(--ease-out);
}
.wa-flota .ico { width: 34px; height: 34px; flex: 0 0 auto; }
.wa-flota:hover, .wa-flota:focus-visible {
  background: var(--wa-dark);
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 22px 46px -12px rgba(7, 94, 84, .78), 0 0 0 8px var(--wa-glow);
}
.wa-flota__txt { white-space: nowrap; }

/* Anillo pulsante — se detiene con movimiento reducido */
.wa-flota::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: var(--r-pill);
  border: 3px solid rgba(37, 211, 102, .55);
  opacity: 0;
  animation: anillo 3.4s var(--ease-soft) infinite;
  pointer-events: none;
}
@keyframes anillo {
  0%   { transform: scale(.94); opacity: .0; }
  35%  { opacity: .75; }
  100% { transform: scale(1.14); opacity: 0; }
}

/* =============================================================
   16b. ASISTENTE AUTOMÁTICO DE PREGUNTAS FRECUENTES
   Se muestra sólo cuando el script arrancó: si falla, no queda
   un botón muerto en pantalla.
   ============================================================= */
.asistente { display: none; }
.asistente-listo .asistente { display: block; }

/* --- Botón que abre el asistente: va encima del de WhatsApp --- */
.asistente__abrir {
  position: fixed;
  right: clamp(.85rem, 3vw, 1.75rem);
  bottom: calc(clamp(.85rem, 3vw, 1.75rem) + 76px);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 58px;
  padding: .6rem 1.3rem .6rem .75rem;
  background: linear-gradient(135deg, var(--brand-600), var(--brand-800));
  color: #fff;
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -.012em;
  border-radius: var(--r-pill);
  border: 2.5px solid rgba(255, 255, 255, .28);
  box-shadow: 0 14px 34px -12px rgba(46, 16, 101, .78), 0 3px 10px rgba(0, 0, 0, .20);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), background-color .25s var(--ease-out);
}
.asistente__abrir:hover,
.asistente__abrir:focus-visible {
  background: linear-gradient(135deg, var(--brand-700), var(--brand-950));
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 22px 46px -14px rgba(46, 16, 101, .85), 0 0 0 8px rgba(139, 92, 246, .26);
}
.asistente__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
}
.asistente__icono .ico { width: 24px; height: 24px; }
.asistente__abrir[aria-expanded="true"] { opacity: 0; pointer-events: none; }

/* --- Panel --- */
.asistente__panel {
  position: fixed;
  right: clamp(.85rem, 3vw, 1.75rem);
  bottom: clamp(.85rem, 3vw, 1.75rem);
  z-index: 95;
  width: min(400px, calc(100vw - 2 * clamp(.85rem, 3vw, 1.75rem)));
  max-height: min(660px, calc(100svh - 4rem));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(178deg, #F2EBFC 0%, #E6DBF8 100%);
  border: 1.5px solid var(--brand-300);
  border-radius: var(--r-lg);
  box-shadow: 0 36px 80px -24px rgba(23, 7, 56, .55), 0 10px 26px rgba(23, 7, 56, .22);
  animation: asisEntra .32s var(--ease-out);
}
.asistente__panel[hidden] { display: none; }
/* La animación mueve sólo la posición, nunca la opacidad: si por lo que sea
   no llegara a ejecutarse, el panel se ve igual. */
@keyframes asisEntra {
  from { transform: translateY(16px) scale(.985); }
  to { transform: none; }
}

.asistente__cabeza {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  background:
    radial-gradient(90% 140% at 8% 0%, rgba(167, 139, 250, .55), transparent 62%),
    linear-gradient(140deg, var(--brand-700), var(--brand-950));
  color: #fff;
}
.asistente__titulo {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  font-family: var(--display);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
}
.asistente__badge {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .12em .6em;
  font-size: .82em;
  font-weight: 800;
  letter-spacing: .04em;
  color: #3A2200;
  background: linear-gradient(135deg, var(--gold-300), var(--gold-500));
  border-radius: var(--r-pill);
  box-shadow: 0 2px 8px -2px rgba(255, 176, 32, .7);
}
.asistente__badge::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: #1E7A3D;
  box-shadow: 0 0 0 2.5px rgba(30, 122, 61, .28);
}
.asistente__sub {
  font-size: 1rem;
  color: #DCD1F7;
  margin-top: .1rem;
  line-height: 1.35;
}
.asistente__cerrar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  flex: 0 0 auto;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, .14);
  transition: background-color .2s var(--ease-out);
}
.asistente__cerrar:hover { background: rgba(255, 255, 255, .30); }
.asistente__cerrar .ico { width: 26px; height: 26px; }

/* --- Conversación --- */
.asistente__log {
  position: relative;
  flex: 1 1 auto;
  min-height: 110px;   /* min-height chico = el registro puede encogerse y desplazarse */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.asis-msg { max-width: 100%; }
.asis-msg__quien {
  display: block;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brand-800);
  margin-bottom: .3rem;
}
.asis-msg--yo { align-self: flex-end; max-width: 88%; }
.asis-msg--yo .asis-msg__quien { text-align: right; color: var(--ink-3); }
.asis-msg__txt {
  padding: .8rem 1rem;
  border-radius: 16px;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink-2);
  background: linear-gradient(158deg, #FFFFFF 0%, #FAF6FF 60%, #F3ECFE 100%);
  border: 1.5px solid var(--brand-200);
  box-shadow: 0 3px 10px -4px rgba(46, 16, 101, .22);
}
.asis-msg--yo .asis-msg__txt {
  background: linear-gradient(140deg, var(--brand-600), var(--brand-800));
  color: #fff;
  border-color: transparent;
  border-bottom-right-radius: 5px;
}
.asis-msg--bot .asis-msg__txt { border-bottom-left-radius: 5px; }
.asis-msg__txt p + p { margin-top: .6rem; }
.asis-msg__txt strong { color: var(--ink); font-weight: 700; }
.asis-msg__txt a {
  color: var(--brand-700);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
.asis-msg__txt a:hover { color: var(--brand-950); }
/* Preguntas relacionadas, dentro del propio mensaje */
.asis-relacionadas {
  margin-top: .8rem;
  padding-top: .8rem;
  border-top: 1.5px solid var(--brand-200);
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.asis-relacionadas__t {
  width: 100%;
  margin: 0 0 .1rem;
  font-family: var(--display);
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--brand-800);
}
.asis-relacionadas__t:empty { display: none; }
.asis-chip--linea {
  font-size: .9375rem;
  min-height: 44px;
  padding: .55rem .85rem;
  background: linear-gradient(150deg, var(--brand-100), var(--brand-050));
}

.asis-mas, .asis-salida {
  margin-top: .7rem;
  padding-top: .7rem;
  border-top: 1.5px solid var(--line);
  font-size: 1rem;
  color: var(--ink-3);
}

/* Indicador de "buscando" */
.asis-puntos { display: inline-flex; gap: 5px; align-items: center; height: 1.5em; }
.asis-puntos i {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--brand-400);
  animation: asisPunto 1.1s ease-in-out infinite;
}
.asis-puntos i:nth-child(2) { animation-delay: .16s; }
.asis-puntos i:nth-child(3) { animation-delay: .32s; }
@keyframes asisPunto {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30% { transform: translateY(-5px); opacity: 1; }
}

/* --- Sugerencias --- */
.asistente__sugerencias {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  padding: 0 1.1rem .9rem;
  max-height: 30%;
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 0 0 auto;
}
.asistente__sugerencias[hidden] { display: none; }
.asis-chip {
  min-height: 46px;
  padding: .65rem .95rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  color: var(--brand-800);
  background: var(--brand-050);
  border: 1.5px solid var(--brand-200);
  border-radius: var(--r-pill);
  transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out), transform .2s var(--ease-out);
}
.asis-chip:hover {
  background: var(--brand-100);
  border-color: var(--brand-400);
  transform: translateY(-2px);
}

/* --- Campo de escritura --- */
.asistente__form {
  flex: 0 0 auto;
  display: flex;
  gap: .5rem;
  padding: .85rem 1.1rem;
  border-top: 1.5px solid var(--brand-200);
  background: linear-gradient(180deg, #EDE4FB, #E4D9F7);
}
.asistente__entrada {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 52px;
  padding: .6rem .95rem;
  font-family: var(--sans);
  font-size: 1.0625rem;
  color: var(--ink);
  background: #FFFFFF;
  border: 2.5px solid var(--brand-300);
  border-radius: var(--r-pill);
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.asistente__entrada::placeholder { color: #8A79A8; opacity: 1; }
.asistente__entrada:focus {
  outline: none;
  border-color: var(--brand-600);
  box-shadow: 0 0 0 4px rgba(139, 92, 246, .26);
}
.asistente__enviar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  flex: 0 0 auto;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(140deg, var(--brand-600), var(--brand-800));
  box-shadow: 0 6px 16px -6px rgba(76, 29, 149, .6);
  transition: transform .2s var(--ease-out), background .2s var(--ease-out);
}
.asistente__enviar:hover { transform: scale(1.06); background: linear-gradient(140deg, var(--brand-700), var(--brand-950)); }
.asistente__enviar .ico { width: 24px; height: 24px; }

.asistente__aviso {
  flex: 0 0 auto;
  padding: .7rem 1.1rem .9rem;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--brand-900);
  background: linear-gradient(180deg, #E1D6F6, #D6C8F1);
  border-top: 1.5px solid var(--brand-300);
}
.asistente__aviso a { color: var(--brand-700); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Con el asistente abierto, el botón de WhatsApp queda tapado por el panel:
   mejor esconderlo. El panel ya ofrece WhatsApp en cada respuesta. */
.asistente-abierto .wa-flota { display: none; }
@media (max-width: 719px) {
  /* En pantallas chicas el panel puede crecer más, pero nunca sin tope */
  .asistente__panel { max-height: min(700px, calc(100svh - 3.5rem)); }
}

@media (prefers-reduced-motion: reduce) {
  .asis-puntos i { animation: none; }
  .asistente__panel { animation: none; }
}


/* =============================================================
   17. REVELADO AL HACER SCROLL
   La clase .js la añade un script mínimo en el <head>.
   Sin JS, el contenido se ve siempre.
   ============================================================= */
.js .revelar {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .75s var(--ease-out), transform .75s var(--ease-out);
}
.js .revelar.esta-dentro { opacity: 1; transform: none; }
.js .revelar[style*="--retraso"] { transition-delay: var(--retraso, 0s); }

/* Defensa: si un elemento fuese a la vez .revelar y otra cosa que lo oculte */
.js .revelar.sin-animacion { opacity: 1; transform: none; }

/* =============================================================
   18. RESPONSIVE
   ============================================================= */
@media (min-width: 540px) {
  .rejilla--2 { grid-template-columns: repeat(2, 1fr); }
  .rejilla--4 { grid-template-columns: repeat(2, 1fr); }
  .antes-despues { grid-template-columns: repeat(2, 1fr); }
  .franja { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 2rem; }
}

@media (min-width: 720px) {
  .rejilla--3 { grid-template-columns: repeat(2, 1fr); }
  .cifras { grid-template-columns: repeat(4, 1fr); }
  .pantallas { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
  .pie__rejilla { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 3rem; }
  .formulario { grid-template-columns: repeat(2, 1fr); }
  .campo--ancho, .formulario > .form-aviso, .formulario > .botones, .formulario > .nota-boton { grid-column: 1 / -1; }
}

@media (min-width: 960px) {
  :root { --nav-h: 88px; }
  .rejilla--3 { grid-template-columns: repeat(3, 1fr); }
  .pasos.rejilla--2 { grid-template-columns: repeat(2, 1fr); }
  .rejilla--4 { grid-template-columns: repeat(4, 1fr); }
  .franja { grid-template-columns: repeat(4, 1fr); }
  .hero__rejilla { grid-template-columns: 1.08fr .92fr; }
  .duo { grid-template-columns: 1.05fr .95fr; }
  .duo--ancho-texto { grid-template-columns: 1.25fr .75fr; }
  .pie__rejilla { grid-template-columns: 1.35fr .8fr .85fr 1.1fr; }
  .marca { font-size: 1.45rem; }
  .marca__mark { width: 52px; height: 52px; }
  .pie__base { padding-block: 1.5rem 2rem; }
}

/* El menú horizontal aparece sólo cuando entra completo en una sola línea.
   Por debajo se usa el botón "Menú", que lleva la palabra escrita. */
@media (min-width: 1080px) {
  .nav { display: block; }
  .menu-btn { display: none; }
  .nav-movil { display: none !important; }
}
@media (min-width: 1080px) and (max-width: 1219px) {
  .nav__enlace { padding: .55rem .55rem; font-size: 1rem; }
}

@media (min-width: 1280px) {
  .pasos--duo { grid-template-columns: repeat(2, 1fr); }
}

/* Pantallas muy angostas: el botón de WhatsApp reduce el texto */
@media (max-width: 400px) {
  .wa-flota { padding: .7rem 1.1rem .7rem .8rem; font-size: 1.0625rem; min-height: 60px; }
  .wa-flota .ico { width: 30px; height: 30px; }
}

/* =============================================================
   19. MOVIMIENTO REDUCIDO
   Sólo se desactivan los efectos intrusivos (bucles llamativos).
   Los micro-efectos (hover, revelado, elevación) se conservan:
   son señales de que algo es clicable, no decoración.
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wa-flota::before { animation: none; }
  .pildora .punto { animation: none; }
  .celular--flota { animation: none; }
  .aurora span, .aurora-local span { animation-duration: 180s; }
  .js .revelar { transition-duration: .28s; }
}

/* =============================================================
   20. IMPRESIÓN
   ============================================================= */
@media print {
  .aurora, .grano, .wa-flota, .cabecera, .saltar, .mapa { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .banda, .hero { padding-block: 1.2rem; background: none !important; color: #000 !important; }
  .hero h1, .hero .lead, .banda--oscura *, .cierre * { color: #000 !important; }
  .tarjeta, .paso, .actor, .faq__item { box-shadow: none; border: 1px solid #999; break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
}