/**
 * ESCALARTE — CSS Principal (Bundle)
 *
 * Este archivo importa todos los CSS en el orden correcto.
 * PostCSS los combina en un solo archivo para producción.
 */

/* 1. Tokens (variables CSS de la marca) */
/* ESCALARTE — Web Tokens
   Importa los tokens de marca y extiende con variables específicas para la web */

/* ESCALARTE — tokens de marca v7
   Contrastes verificados por cálculo, no por estimación.
   Espaciado: vertical en múltiplos de 8, detalles internos en múltiplos de 4. */

:root {
  /* ---- Rampa azul: los tres peldaños del logo son tres paradas de esta rampa ---- */
  --azul-50:  #EAF2FE;
  --azul-100: #C9DFFB;
  --azul-200: #9CC5F7;  /* peldaño medio sobre oscuro · texto sobre oscuro (10.14:1) */
  --azul-300: #4A90E8;  /* peldaño superior sobre claro · enlaces sobre oscuro (5.56:1) */
  --azul-400: #2E77DD;  /* peldaño superior sobre oscuro · solo gráfico (4.14:1) */
  --azul-500: #1B55B8;  /* peldaño medio sobre claro · botones y enlaces (6.43:1) */
  --azul-600: #143E8C;  /* hover de botón (9.31:1) */
  --azul-700: #0E2A61;  /* superficies azules profundas */
  --tinta:    #0A1628;  /* peldaño base sobre claro · fondo oscuro · texto (16.86:1) */

  /* ---- Neutros ---- */
  --blanco:        #FFFFFF;  /* peldaño base sobre oscuro · superficies */
  --nieve:         #F4F7FA;  /* fondo claro por defecto */
  --niebla:        #DBE2E8;  /* filete decorativo. No delimita nada funcional */
  --niebla-fuerte: #B5C3D0;  /* divisor con énfasis */
  --acero:         #5A6B7D;  /* texto secundario (5.09:1) · bordes de campos */

  /* ---- Semánticos: dos valores, igual que los azules ---- */
  --exito:       #0E7A57;  /* sobre claro  (4.96:1) */
  --exito-alto:  #45C79A;  /* sobre oscuro (8.54:1) */
  --alerta:      #C0392B;  /* sobre claro  (5.06:1) */
  --alerta-alto: #FF8A7A;  /* sobre oscuro (7.92:1) */

  /* ---- Tipografía ---- */
  --display: "Archivo", Helvetica, Arial, sans-serif;
  --texto:   "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --dato:    "JetBrains Mono", ui-monospace, Menlo, monospace;

  --t-xs:  0.75rem;   /* 12 */
  --t-sm:  0.875rem;  /* 14 */
  --t-md:  1rem;      /* 16 */
  --t-lg:  1.25rem;   /* 20 */
  --t-xl:  1.563rem;  /* 25 */
  --t-2xl: 1.953rem;  /* 31 */
  --t-3xl: 2.441rem;  /* 39 */
  --t-4xl: 3.052rem;  /* 49 */

  --u: 8px; --radio: 4px; --medida: 66ch;
}

/* Prohibiciones que salen de la medición, no del gusto:
   --azul-200 sobre nieve = 1.66:1  → jamás texto ni ícono sobre claro
   --azul-300 sobre nieve = 3.03:1  → solo barras, bloques y texto de 24px o más
   --azul-400 sobre tinta = 4.14:1  → solo gráfico. Para enlaces en oscuro usar --azul-300
   --niebla  sobre nieve = 1.22:1   → filete decorativo. Un borde que comunica algo va en --acero */

body{font-family:var(--texto);font-size:var(--t-md);line-height:1.65;color:var(--tinta);background:var(--nieve)}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.12;letter-spacing:-0.015em}
.cifra{font-family:var(--dato);font-variant-numeric:tabular-nums}
.sube{color:var(--exito)} .baja{color:var(--alerta)}

.boton{
  font-family:var(--display);font-weight:600;
  background:var(--azul-500);color:var(--blanco);
  border:0;border-radius:var(--radio);
  padding:calc(var(--u)*1.5) calc(var(--u)*3);cursor:pointer;
}
.boton:hover{background:var(--azul-600)}
.boton:focus-visible{outline:3px solid var(--azul-300);outline-offset:2px}

/* Modo oscuro: se reasignan siete variables y el sistema entero se invierte */
.oscuro{
  --nieve:#0A1628; --tinta:#F4F7FA;
  --niebla:#22334A; --niebla-fuerte:#3B506B; --acero:#9AAABB;
  --azul-500:#4A90E8; --azul-600:#9CC5F7;
  --exito:#45C79A; --alerta:#FF8A7A;
}

:root {
  /* ---- Timing para animaciones ---- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 200ms;
  --duration-normal: 400ms;
  --duration-slow: 600ms;

  /* ---- Colores con opacidad (para superficies sobre fondo oscuro) ---- */
  --azul-300-15: rgba(74, 144, 232, 0.15);
  --azul-300-40: rgba(74, 144, 232, 0.4);

  /* ---- Sombras ---- */
  --sombra-sutil: 0 1px 3px rgba(10, 22, 40, 0.08);
  --sombra-media: 0 4px 12px rgba(10, 22, 40, 0.12);
  --sombra-elevada: 0 8px 24px rgba(10, 22, 40, 0.16);
  --sombra-fuerte: 0 24px 48px rgba(10, 22, 40, 0.3);
  --sombra-azul: 0 4px 16px rgba(27, 85, 184, 0.24);

  /* ---- Breakpoints (solo como referencia, usar en media queries) ---- */
  /* 480px, 768px, 1024px, 1280px */

  /* ---- Escala de radios ----
     La marca fija 4px como radio base. Las superficies grandes usan múltiplos
     para no verse duras y --radio-pill es la píldora. Declarados acá para que no
     queden valores sueltos (100px, 999px) repartidos por las hojas. */
  --radio-sm: var(--radio);            /* 4px  · tarjetas, campos */
  --radio-md: calc(var(--radio) * 2);  /* 8px  · paquetes, formulario */
  --radio-lg: calc(var(--radio) * 3);  /* 12px · maquetas de chat y panel */
  --radio-xl: calc(var(--radio) * 4);  /* 16px · caja del teaser */
  --radio-pill: 999px;                 /* etiquetas y chips */

  /* ---- Contenedor ---- */
  --contenedor-max: 1200px;
  --contenedor-padding: calc(var(--u) * 2.5);

  /* ---- Fondos de Cloudinary (vacíos por defecto, agregar URLs cuando estén disponibles) ---- */
  --fondo-hero: none;
  --fondo-cierre: none;
}

@media (min-width: 768px) {
  :root {
    --contenedor-padding: calc(var(--u) * 4);
  }
}

@media (min-width: 1024px) {
  :root {
    --contenedor-padding: calc(var(--u) * 6);
  }
}

/* 2. Base (reset, tipografía, elementos HTML) */
/* ESCALARTE — Base
   Reset, tipografía y utilidades globales */

/* ---- Reset moderno ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Sin `scroll-behavior: smooth` en html a propósito: rompía el salto inicial
   a un ancla de la URL (por ejemplo /#cierre, el CTA del header desde otra
   página), que terminaba en scrollY = 0. El suavizado de los enlaces internos
   lo hace main.js con scrollIntoView({ behavior: 'smooth' }). */

/* Al saltar a un ancla de sección, compensar el header fijo para que el
   encabezado no quede tapado (aplica a todo el sitio: #diagnostico, #cierre,
   #asis-beneficios, etc.). */
section[id] {
  scroll-margin-top: calc(var(--u) * 14);
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; /* Evitar scroll horizontal en móvil */
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

/* ---- Tipografía ---- */
body {
  font-family: var(--texto);
  font-size: var(--t-md);
  line-height: 1.65;
  color: var(--tinta);
  background: var(--nieve);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--tinta);
}

h1 {
  font-size: clamp(var(--t-3xl), 5vw + 1rem, var(--t-4xl));
}

h2 {
  font-size: clamp(var(--t-2xl), 4vw + 0.5rem, var(--t-3xl));
}

h3 {
  font-size: var(--t-xl);
}

h4 {
  font-size: var(--t-lg);
}

p {
  max-width: var(--medida);
}

p + p {
  margin-top: calc(var(--u) * 2);
}

strong {
  font-weight: 600;
}

/* ---- Enlaces ---- */
.enlace {
  color: var(--azul-500);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--duration-fast) ease-out,
              -webkit-text-decoration-color var(--duration-fast) ease-out;
  transition: color var(--duration-fast) ease-out,
              text-decoration-color var(--duration-fast) ease-out;
  transition: color var(--duration-fast) ease-out,
              text-decoration-color var(--duration-fast) ease-out,
              -webkit-text-decoration-color var(--duration-fast) ease-out;
}

.enlace:hover {
  color: var(--azul-600);
}

.enlace:focus-visible {
  outline: 3px solid var(--azul-300);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Enlace con subrayado animado */
.enlace-animado {
  position: relative;
  text-decoration: none;
}

.enlace-animado::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width var(--duration-normal) var(--ease-out-expo);
}

.enlace-animado:hover::after {
  width: 100%;
}

/* ---- Visibilidad ---- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Contenedor ---- */
.contenedor {
  width: 100%;
  max-width: var(--contenedor-max);
  margin-inline: auto;
  padding-inline: var(--contenedor-padding);
  /* iOS safe area */
  padding-left: max(var(--contenedor-padding), env(safe-area-inset-left));
  padding-right: max(var(--contenedor-padding), env(safe-area-inset-right));
}

/* 3. Componentes (botones, campos, tarjetas) */
/* ESCALARTE — Componentes
   Botones, tarjetas, campos de formulario */

/* ---- Botones ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 1);
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-md);
  line-height: 1;
  background: var(--azul-500);
  color: var(--blanco);
  border: 0;
  border-radius: var(--radio);
  padding: calc(var(--u) * 2) calc(var(--u) * 4);
  min-height: calc(var(--u) * 6);
  cursor: pointer;
  transition: background var(--duration-fast) ease-out,
              transform var(--duration-fast) ease-out,
              box-shadow var(--duration-fast) ease-out;
}

.btn:hover {
  background: var(--azul-600);
  transform: scale(1.02);
  box-shadow: var(--sombra-azul);
}

.btn:focus-visible {
  outline: 3px solid var(--azul-300);
  outline-offset: 2px;
}

.btn:active {
  transform: scale(0.98);
}

/* El trazo va como box-shadow interior, no como border: así el botón outline
   mide exactamente lo mismo que el relleno (el border sumaba 4px de alto y los
   dejaba desnivelados cuando van uno al lado del otro). */
.btn--outline {
  background: transparent;
  color: var(--azul-500);
  box-shadow: inset 0 0 0 2px var(--azul-500);
}

.btn--outline:hover {
  background: var(--azul-50);
  color: var(--azul-600);
  box-shadow: inset 0 0 0 2px var(--azul-600);
}

/* Variante outline para fondos oscuros (tinta). Modificador del componente, no
   un override desde la hoja de la página. Se usa en el hero de las dos páginas
   y en el CTA del header. */
.btn--outline-claro {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--azul-300);
  color: var(--azul-200);
}

.btn--outline-claro:hover {
  background: var(--azul-300-15);
  box-shadow: inset 0 0 0 2px var(--azul-200);
  color: var(--blanco);
}

.btn--grande {
  font-size: var(--t-lg);
  padding: calc(var(--u) * 2.5) calc(var(--u) * 5);
  min-height: calc(var(--u) * 7);
}

.btn--bloque {
  width: 100%;
}

/* Botón primario mejorado */
.btn--primario {
  background: linear-gradient(135deg, var(--azul-500) 0%, var(--azul-600) 100%);
  box-shadow: 0 4px 14px rgba(27, 85, 184, 0.35);
  position: relative;
  overflow: hidden;
}

.btn--primario::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s ease;
}

.btn--primario:hover {
  background: linear-gradient(135deg, var(--azul-400) 0%, var(--azul-500) 100%);
  box-shadow: 0 6px 20px rgba(27, 85, 184, 0.45);
  transform: translateY(-2px);
}

.btn--primario:hover::before {
  left: 100%;
}

.btn--primario:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(27, 85, 184, 0.3);
}

/* Botón con icono */
.btn--enviar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 1.5);
}

.btn__icono {
  width: calc(var(--u) * 2.5);
  height: calc(var(--u) * 2.5);
  transition: transform var(--duration-fast) ease-out;
}

.btn--enviar:hover .btn__icono {
  transform: translateX(calc(var(--u) * 0.5));
}

/* Estado de carga */
.btn--cargando {
  pointer-events: none;
}

.btn--cargando .btn__icono {
  display: none;
}

.btn--cargando::after {
  content: '';
  width: calc(var(--u) * 2.5);
  height: calc(var(--u) * 2.5);
  border: 2px solid var(--blanco);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ---- Tarjetas ---- */
.card {
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra-sutil);
  padding: calc(var(--u) * 3);
  transition: transform var(--duration-normal) var(--ease-out-expo),
              box-shadow var(--duration-normal) var(--ease-out-expo);
}

/* Tarjeta de síntoma */
.card--sintoma {
  display: flex;
  gap: calc(var(--u) * 2);
  align-items: flex-start;
  padding: calc(var(--u) * 3);
}

.card--sintoma .card__icono {
  flex-shrink: 0;
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 6);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--azul-50);
  border-radius: var(--radio);
  color: var(--azul-500);
}

.card--sintoma .card__icono svg {
  width: calc(var(--u) * 3);
  height: calc(var(--u) * 3);
}

.card--sintoma .card__contenido {
  flex: 1;
}

.card--sintoma .card__titulo {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-md);
  margin-bottom: calc(var(--u) * 0.5);
  color: var(--tinta);
}

.card--sintoma .card__texto {
  font-size: var(--t-sm);
  color: var(--acero);
  line-height: 1.5;
}

/* ---- Campos de formulario ---- */
.field {
  position: relative;
  margin-bottom: calc(var(--u) * 3);
}

.field__label {
  display: block;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--tinta);
  margin-bottom: calc(var(--u) * 1);
}

.field__input {
  width: 100%;
  padding: calc(var(--u) * 1.5) calc(var(--u) * 2);
  font-size: var(--t-md);
  color: var(--tinta);
  background: var(--blanco);
  border: 1px solid var(--acero);
  border-radius: var(--radio);
  transition: border-color var(--duration-fast) ease-out,
              box-shadow var(--duration-fast) ease-out;
}

/* --niebla-fuerte sobre blanco da 1.80:1 y era ilegible al sol. --acero da
   5.09:1 y se sigue distinguiendo del valor escrito, que va en --tinta. */
.field__input::-moz-placeholder {
  color: var(--acero);
}
.field__input::placeholder {
  color: var(--acero);
}

.field__input:hover {
  border-color: var(--azul-400);
}

.field__input:focus {
  outline: none;
  border-color: var(--azul-500);
  box-shadow: 0 0 0 3px var(--azul-100);
}

.field__input:invalid:not(:-moz-placeholder) {
  border-color: var(--alerta);
}

.field__input:invalid:not(:placeholder-shown) {
  border-color: var(--alerta);
}

.field__error {
  font-size: var(--t-xs);
  color: var(--alerta);
  margin-top: calc(var(--u) * 0.5);
  display: none;
}

.field--error .field__input {
  border-color: var(--alerta);
}

.field--error .field__error {
  display: block;
}

/* Select estilizado */
.field--select .field__input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235A6B7D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right calc(var(--u) * 2) center;
  padding-right: calc(var(--u) * 5);
  cursor: pointer;
}

/* ---- Grupo de checkboxes ---- */
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1.5);
}

.checkbox-group__label {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--tinta);
  margin-bottom: calc(var(--u) * 1);
}

.checkbox {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1);
  /* 44px de alto sin mover el dibujo del cuadro: agranda el objetivo táctil */
  min-height: calc(var(--u) * 5.5);
  cursor: pointer;
}

.checkbox__input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: calc(var(--u) * 2.5);
  height: calc(var(--u) * 2.5);
  border: 2px solid var(--acero);
  border-radius: var(--radio);
  cursor: pointer;
  transition: background var(--duration-fast) ease-out,
              border-color var(--duration-fast) ease-out;
  position: relative;
  flex-shrink: 0;
  /* Evita auto-zoom en iOS */
  font-size: 16px;
}

.checkbox__input:hover {
  border-color: var(--azul-400);
}

.checkbox__input:checked {
  background: var(--azul-500);
  border-color: var(--azul-500);
}

.checkbox__input:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 6px;
  height: 10px;
  border: solid var(--blanco);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.checkbox__input:focus-visible {
  outline: 3px solid var(--azul-300);
  outline-offset: 2px;
}

.checkbox__texto {
  font-size: var(--t-sm);
  color: var(--tinta);
}

/* ---- Checkbox expandible ---- */
.checkbox-expandible {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1);
}

.checkbox-expandible__campo {
  display: none;
  padding-left: calc(var(--u) * 3.5);
  animation: slideDown var(--duration-fast) ease-out;
}

.checkbox-expandible__campo.is-visible {
  display: block;
}

.field__input--sm {
  padding: calc(var(--u) * 1) calc(var(--u) * 1.5);
  /* Mínimo 16px para evitar auto-zoom en iOS */
  font-size: 16px;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(calc(var(--u) * -1));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Enlace WhatsApp ---- */
.enlace-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 1);
  min-height: calc(var(--u) * 5.5); /* 44px de área táctil */
  padding-inline: calc(var(--u) * 1);
  color: var(--acero);
  font-size: var(--t-sm);
  transition: color var(--duration-fast) ease-out;
}

.enlace-wa:hover {
  color: var(--tinta);
}

.enlace-wa svg {
  width: calc(var(--u) * 2.5);
  height: calc(var(--u) * 2.5);
}

/* ---- Mensaje de éxito del formulario ---- */
.cierre__formulario--saliendo {
  animation: fadeOutUp 0.3s ease-out forwards;
}

@keyframes fadeOutUp {
  to {
    opacity: 0;
    transform: translateY(calc(var(--u) * -2));
  }
}

.exito-mensaje {
  background: var(--blanco);
  border-radius: var(--radio-md);
  padding: calc(var(--u) * 6) calc(var(--u) * 4);
  text-align: center;
  box-shadow: var(--sombra-fuerte);
  position: relative;
  overflow: hidden;
  animation: fadeInUp 0.5s ease-out;
  min-height: calc(var(--u) * 40);
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(calc(var(--u) * 2));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.exito-mensaje__confetti {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
}

.confetti__particula {
  position: absolute;
  width: calc(var(--u) * 1);
  height: calc(var(--u) * 1);
  top: -10px;
  border-radius: 2px;
  animation: confettiFall 2.5s ease-out forwards;
}

.confetti__particula:nth-child(odd) {
  width: calc(var(--u) * 0.75);
  height: calc(var(--u) * 1.5);
  border-radius: 1px;
}

.confetti__particula:nth-child(3n) {
  width: calc(var(--u) * 1.25);
  height: calc(var(--u) * 0.5);
}

@keyframes confettiFall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(400px) rotate(720deg);
    opacity: 0;
  }
}

.exito-mensaje__contenido {
  position: relative;
  z-index: 1;
}

.exito-mensaje__icono {
  width: calc(var(--u) * 10);
  height: calc(var(--u) * 10);
  margin: 0 auto calc(var(--u) * 3);
  background: linear-gradient(135deg, var(--azul-400) 0%, var(--azul-500) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blanco);
  box-shadow: 0 8px 24px rgba(27, 85, 184, 0.35);
  animation: checkBounce 0.6s ease-out 0.2s both;
}

.exito-mensaje__icono svg {
  width: calc(var(--u) * 5);
  height: calc(var(--u) * 5);
  animation: checkDraw 0.4s ease-out 0.5s both;
}

@keyframes checkBounce {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes checkDraw {
  0% {
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
  }
  100% {
    stroke-dasharray: 50;
    stroke-dashoffset: 0;
  }
}

.exito-mensaje__titulo {
  font-family: var(--display);
  font-size: var(--t-xl);
  font-weight: 600;
  color: var(--tinta);
  margin-bottom: calc(var(--u) * 2);
}

.exito-mensaje__texto {
  font-size: var(--t-md);
  color: var(--acero);
  line-height: 1.6;
  max-width: 320px;
  margin: 0 auto;
}

/* 4. Layout (header, footer, contenedores) */
/* ESCALARTE — Layout
   Header, footer, estructura general */

/* ---- Layout principal ---- */
.pagina {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.pagina__contenido {
  flex: 1;
}

/* Enlace de salto al contenido: invisible hasta que recibe el foco. Con header
   fijo y 5-7 secciones, un usuario de teclado tenía que recorrer el header en
   cada página (WCAG 2.4.1). */
.salto-contenido {
  position: absolute;
  top: calc(var(--u) * 1);
  left: calc(var(--u) * 1);
  z-index: 200;
  padding: calc(var(--u) * 1.5) calc(var(--u) * 2);
  background: var(--blanco);
  color: var(--azul-600);
  font-size: var(--t-sm);
  font-weight: 600;
  border-radius: var(--radio-sm);
  box-shadow: var(--sombra-media);
  transform: translateY(calc(-100% - var(--u) * 2));
  transition: transform var(--duration-fast) ease-out;
}

.salto-contenido:focus-visible {
  transform: translateY(0);
  outline: 3px solid var(--azul-300);
  outline-offset: 2px;
}

/* ---- Header ---- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--tinta);
  border-bottom: 1px solid transparent;
  padding: calc(var(--u) * 2) 0;
  transition: background var(--duration-normal) ease,
              border-color var(--duration-normal) ease,
              -webkit-backdrop-filter var(--duration-normal) ease;
  transition: background var(--duration-normal) ease,
              border-color var(--duration-normal) ease,
              backdrop-filter var(--duration-normal) ease;
  transition: background var(--duration-normal) ease,
              border-color var(--duration-normal) ease,
              backdrop-filter var(--duration-normal) ease,
              -webkit-backdrop-filter var(--duration-normal) ease;
}

/* Header al hacer scroll */
.header.is-scrolled {
  background: rgba(10, 22, 40, 0.95);
  border-bottom-color: var(--azul-700);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.header__contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 2);
}

/* Logo del header. Dos versiones de la marca en el mismo componente:
   isotipo (compacto) en pantallas chicas e imagotipo completo desde tablet.
   `flex-shrink: 0` evita que el flex lo aplaste a un tamaño arbitrario.
   El símbolo mide 40px a los dos lados del punto de quiebre: al pasar a tablet
   no crece, solo aparece el logotipo a su lado. */
.header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-height: calc(var(--u) * 5.5); /* 44px de área táctil */
}

.header__logo svg {
  height: calc(var(--u) * 5);
  width: auto;
  max-width: none;
}

.header__logo:focus-visible {
  outline: 3px solid var(--azul-300);
  outline-offset: 2px;
  border-radius: 2px;
}

.header__logo-completo {
  display: none;
}

@media (min-width: 768px) {
  .header__logo-compacto {
    display: none;
  }

  .header__logo-completo {
    display: block;
  }
}

/* Navegación del header (links de texto + CTA agrupados a la derecha) */
.header__nav {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1);
}

.header__nav-link {
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--u) * 5.5); /* 44px — área táctil mínima */
  color: var(--blanco);
  font-size: var(--t-sm);
  font-weight: 500;
  padding: calc(var(--u) * 1) calc(var(--u) * 1.5);
  transition: color var(--duration-fast) ease-out;
}

.header__nav-link:hover {
  color: var(--azul-200);
}

.header__nav-link:focus-visible {
  outline: 3px solid var(--azul-300);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (min-width: 480px) {
  .header__nav {
    gap: calc(var(--u) * 2.5);
  }
}

@media (min-width: 768px) {
  .header__nav {
    gap: calc(var(--u) * 3.5);
  }
}

/* Botón del header. El aspecto lo da el modificador .btn--outline-claro del
   componente (antes esta hoja repintaba el .btn desde fuera, con dos colores
   rgba que no estaban en los tokens). Acá solo lo propio del header: la etiqueta
   se acorta en celulares chicos para que el CTA no desaparezca. */
.header__cta {
  padding: calc(var(--u) * 1) calc(var(--u) * 2);
  font-size: var(--t-sm);
}

.header__cta-largo {
  display: none;
}

@media (min-width: 480px) {
  .header__cta {
    padding: calc(var(--u) * 2) calc(var(--u) * 4);
    font-size: var(--t-md);
  }

  .header__cta-largo {
    display: inline;
  }

  .header__cta-corto {
    display: none;
  }
}

@media (min-width: 768px) {
  .header {
    padding: calc(var(--u) * 2.5) 0;
  }
}

/* ---- Footer ---- */
.footer {
  background: var(--tinta);
  color: var(--blanco);
  padding: calc(var(--u) * 6) 0;
  padding-bottom: max(calc(var(--u) * 6), env(safe-area-inset-bottom));
  border-top: 1px solid var(--azul-700);
}

.footer__contenedor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 3);
  text-align: center;
}

.footer__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 44x44 de área táctil, aunque el dibujo sea más chico */
  min-height: calc(var(--u) * 5.5);
  min-width: calc(var(--u) * 5.5);
}

.footer__logo svg {
  height: calc(var(--u) * 4);
  width: auto;
}

.footer__logo:focus-visible {
  outline: 3px solid var(--azul-300);
  outline-offset: 2px;
  border-radius: 2px;
}

.footer__texto {
  font-size: var(--t-sm);
  color: var(--azul-200);
  max-width: 40ch;
}

.footer__legal {
  font-size: var(--t-xs);
  /* --acero sobre tinta da 3.31:1 y no llega al mínimo AA de 4.5:1 para texto
     pequeño. --niebla-fuerte da 10.09:1 y se mantiene neutro, así que sigue
     leyéndose como secundario frente al azul de .footer__texto. */
  color: var(--niebla-fuerte);
}

.footer__nav {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 3);
}

.footer__enlace {
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--u) * 5.5); /* 44px de área táctil */
  color: var(--azul-300);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--duration-fast) ease-out;
}

.footer__enlace:hover {
  color: var(--azul-200);
}

@media (min-width: 768px) {
  .footer {
    padding: calc(var(--u) * 8) 0;
  }

  .footer__contenedor {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }

  .footer__logo svg {
    height: calc(var(--u) * 5);
  }
}

/* ---- Secciones ---- */
.seccion__titulo {
  margin-bottom: calc(var(--u) * 2);
}

.seccion__subtitulo {
  color: var(--acero);
  font-size: var(--t-lg);
  max-width: 50ch;
  margin-bottom: calc(var(--u) * 5);
}

/* Cabecera de sección centrada. Existe UNA sola vez y la usan las siete
   secciones de las dos páginas (antes estaba repetida cuatro veces). */
.seccion__encab {
  text-align: center;
  max-width: 600px;
  margin: 0 auto calc(var(--u) * 8);
}

.seccion__encab .seccion__titulo {
  margin-bottom: calc(var(--u) * 2);
}

.seccion__encab .seccion__subtitulo {
  color: var(--acero);
  font-size: var(--t-lg);
  /* El aire hasta el contenido lo pone el margen del propio .seccion__encab:
     si además se deja el del subtítulo, se suman dos márgenes. */
  margin-bottom: 0;
}

/* 5. Secciones de la landing */
/* ESCALARTE — Secciones
   Hero, diagnóstico, proceso, paquetes, cierre */

/* ---- Hero ----
   Base compartida por los dos hero del sitio (.hero del home y .asis-hero de la
   landing) para que no puedan desincronizarse: el alto, el relleno y la retícula
   de tres filas —contenido centrado, indicador al pie— viven acá una sola vez. */
.hero,
.asis-hero {
  min-height: 100vh;
  min-height: 100dvh; /* Dynamic viewport height para iOS */
  display: grid;
  grid-template-rows: 1fr auto auto;
  align-items: center;
  padding: calc(var(--u) * 12) 0 calc(var(--u) * 3);
  background: var(--tinta);
  background-image: var(--fondo-hero);
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}

.hero {
  text-align: center;
}

.hero__contenido {
  position: relative;
  z-index: 1;
  grid-row: 2;
  /* Layout lo maneja .contenedor - solo max-width específico para hero */
  max-width: 900px;
  justify-self: center;
}

/* Badge/Etiqueta encima del título */
.hero__badge {
  display: inline-block;
  background: var(--azul-300-15);
  border: 1px solid var(--azul-300-40);
  color: var(--azul-200);
  font-size: var(--t-sm);
  font-weight: 500;
  padding: calc(var(--u) * 1) calc(var(--u) * 3);
  border-radius: var(--radio-pill);
  margin-bottom: calc(var(--u) * 4);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

.hero__titulo {
  font-size: clamp(var(--t-2xl), 5vw + 1rem, var(--t-4xl));
  color: var(--blanco);
  margin-bottom: calc(var(--u) * 4);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.hero__subtitulo,
.asis-hero__subtitulo {
  font-size: clamp(var(--t-md), 1.5vw + 0.5rem, var(--t-lg));
  color: var(--azul-200);
  margin: 0 auto calc(var(--u) * 5);
  line-height: 1.6;
  /* Medida de texto en ch, no un px suelto: antes eran 550 en una página y 540
     en la otra, dos valores casi iguales para el mismo elemento. */
  max-width: 52ch;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 2);
  justify-content: center;
  align-items: center;
}

/* En móvil los dos CTA van a ancho completo: apilados con anchos distintos
   (315 contra 202 medidos) se leían como un error de maquetado. */
.hero__cta .btn,
.asis-hero__acciones .btn {
  width: 100%;
}

@media (min-width: 768px) {
  .hero__cta .btn,
  .asis-hero__acciones .btn {
    width: auto;
    min-width: 200px;
  }
}

/* El botón outline sobre el hero oscuro usa el modificador .btn--outline-claro
   (definido en components.css), no un override desde esta hoja. */

/* Scroll indicator */
.hero__scroll {
  grid-row: 3;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 1);
  /* Con opacidad 0.7 sobre tinta, --azul-300 daba 3.35:1 (falla AA).
     --azul-200 al 70% da 5.51:1 y sigue siendo un azul discreto. */
  color: var(--azul-200);
  font-size: var(--t-xs);
  opacity: 0.7;
  z-index: 10;
  /* Espacio superior para separar del contenido */
  margin-top: calc(var(--u) * 6);
  /* Espacio inferior seguro para iOS */
  padding-bottom: max(calc(var(--u) * 2), env(safe-area-inset-bottom));
}

/* En pantallas muy cortas, ocultar el scroll indicator */
@media (max-height: 500px) {
  .hero__scroll {
    display: none;
  }
}

.hero__scroll-icon {
  width: 24px;
  height: 24px;
}

@keyframes bounce-scroll-only {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

@media (min-width: 768px) {
  .hero,
  .asis-hero {
    padding-top: calc(var(--u) * 16);
  }

  .hero__badge {
    margin-bottom: calc(var(--u) * 5);
  }

  .hero__titulo {
    margin-bottom: calc(var(--u) * 5);
  }
}

/* ---- Diagnóstico (síntomas) ---- */
.diagnostico {
  background: var(--blanco);
  position: relative;
  padding: calc(var(--u) * 10) 0;
}

.diagnostico__grid {
  display: grid;
  gap: calc(var(--u) * 3);
}

@media (min-width: 768px) {
  .diagnostico {
    padding: calc(var(--u) * 14) 0;
  }

  .diagnostico__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--u) * 4);
  }
}

@media (min-width: 1024px) {
  .diagnostico__grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    gap: calc(var(--u) * 8) calc(var(--u) * 6);
    position: relative;
    padding: calc(var(--u) * 4) 0;
  }

  /* Líneas de conexión tipo red neuronal */
  .diagnostico__grid::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(90deg,
      transparent 0%,
      var(--azul-200) 20%,
      var(--azul-200) 80%,
      transparent 100%
    );
    opacity: 0.4;
    z-index: 0;
  }

  .diagnostico__grid::after {
    content: '';
    position: absolute;
    top: 20%;
    bottom: 20%;
    left: 50%;
    width: 2px;
    background: linear-gradient(180deg,
      transparent 0%,
      var(--azul-200) 30%,
      var(--azul-200) 70%,
      transparent 100%
    );
    opacity: 0.4;
    z-index: 0;
  }

  /* Las tarjetas van sobre las líneas de conexión.
     Nota: acá había además rotaciones y desplazamientos por nth-child que NUNCA
     se aplicaban —los ganaba `.card--sintoma[data-animate].is-visible`, de mayor
     especificidad y declarada después— así que se quitaron. Si alguna vez se
     quiere ese efecto orgánico, hay que declararlo como estado de revelado
     (`...is-visible`) para que gane la cascada. */
  .diagnostico__grid > * {
    z-index: 1;
  }

  .diagnostico__grid > :nth-child(4) {
    grid-column: 1 / 2;
  }

  .diagnostico__grid > :nth-child(5) {
    grid-column: 3 / 4;
  }
}

/* ---- Proceso (timeline) ---- */
.proceso {
  background: var(--nieve);
  padding: calc(var(--u) * 10) 0;
  position: relative;
  overflow: hidden;
}

.proceso__timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 5);
  max-width: 800px;
  margin: 0 auto;
}

.proceso__linea {
  position: absolute;
  left: calc(var(--u) * 3 - 1px);
  /* Conecta centro del número 1 al centro del número 3 */
  top: calc(var(--u) * 3);
  bottom: calc(var(--u) * 6);
  width: 3px;
  background: linear-gradient(
    to bottom,
    var(--azul-300) 0%,
    var(--azul-500) 50%,
    var(--tinta) 100%
  );
  border-radius: 2px;
  transform-origin: top;
}

.proceso__paso {
  display: grid;
  grid-template-columns: calc(var(--u) * 6) 1fr;
  gap: calc(var(--u) * 3);
  align-items: start;
}

.proceso__paso-numero {
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-lg);
  color: var(--blanco);
  position: relative;
  z-index: 1;
  box-shadow: var(--sombra-media);
}

.proceso__paso:nth-child(2) .proceso__paso-numero {
  background: linear-gradient(135deg, var(--azul-200) 0%, var(--azul-300) 100%);
}

.proceso__paso:nth-child(3) .proceso__paso-numero {
  background: linear-gradient(135deg, var(--azul-400) 0%, var(--azul-500) 100%);
}

.proceso__paso:nth-child(4) .proceso__paso-numero {
  background: linear-gradient(135deg, var(--azul-600) 0%, var(--tinta) 100%);
}

.proceso__paso-contenido {
  padding-top: calc(var(--u) * 1);
}

.proceso__paso-titulo {
  font-size: var(--t-xl);
  margin-bottom: calc(var(--u) * 1);
  color: var(--tinta);
}

.proceso__paso-texto {
  color: var(--acero);
  font-size: var(--t-md);
  line-height: 1.6;
}

@media (min-width: 768px) {
  .proceso {
    padding: calc(var(--u) * 14) 0;
  }

  .proceso__timeline {
    flex-direction: row;
    justify-content: space-between;
    gap: calc(var(--u) * 4);
    max-width: none;
  }

  .proceso__linea {
    left: 0;
    right: 0;
    top: calc(var(--u) * 3);
    bottom: auto;
    width: auto;
    height: 3px;
    background: linear-gradient(
      to right,
      var(--azul-300) 0%,
      var(--azul-500) 50%,
      var(--tinta) 100%
    );
    transform-origin: left;
  }

  .proceso__paso {
    flex: 1;
    grid-template-columns: 1fr;
    gap: calc(var(--u) * 2);
    text-align: center;
  }

  .proceso__paso-numero {
    margin: 0 auto;
  }

  .proceso__paso-contenido {
    padding-top: 0;
  }
}

/* ---- Paquetes ---- */
.paquetes {
  background: var(--blanco);
  padding: calc(var(--u) * 10) 0;
  position: relative;
}

.paquetes__grid {
  display: grid;
  gap: calc(var(--u) * 4);
  max-width: 1000px;
  margin: 0 auto;
}

.paquete {
  background: var(--nieve);
  border-radius: var(--radio-md);
  padding: calc(var(--u) * 4);
  position: relative;
  overflow: hidden;
  transition: transform var(--duration-normal) var(--ease-out-expo),
              box-shadow var(--duration-normal) var(--ease-out-expo);
}

.paquete::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--azul-400), var(--azul-500));
}

.paquete:hover {
  transform: var(--tilt, ) translateY(-8px);
  box-shadow: var(--sombra-elevada);
}

.paquete--destacado {
  background: linear-gradient(135deg, var(--azul-700) 0%, var(--tinta) 100%);
  color: var(--blanco);
  padding-top: calc(var(--u) * 6);
}

.paquete--destacado::before {
  background: linear-gradient(90deg, var(--azul-200), var(--azul-300));
}

.paquete__etiqueta {
  position: absolute;
  top: calc(var(--u) * 2);
  right: calc(var(--u) * 2);
  background: var(--exito-alto);
  color: var(--tinta);
  font-size: var(--t-xs);
  font-weight: 600;
  padding: calc(var(--u) * 0.5) calc(var(--u) * 1.5);
  border-radius: var(--radio);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.paquete__nombre {
  font-family: var(--display);
  font-size: var(--t-2xl);
  font-weight: 600;
  margin-bottom: calc(var(--u) * 2);
  color: var(--azul-500);
}

.paquete--destacado .paquete__nombre {
  color: var(--blanco);
}

.paquete__descripcion {
  font-size: var(--t-md);
  line-height: 1.6;
  margin-bottom: calc(var(--u) * 3);
  color: var(--acero);
}

.paquete--destacado .paquete__descripcion {
  color: var(--azul-200);
}

.paquete__lista {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1.5);
}

.paquete__item {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--u) * 1);
  font-size: var(--t-sm);
}

.paquete__item::before {
  content: '';
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B55B8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: contain;
}

.paquete--destacado .paquete__item::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2345C79A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

.paquetes__enlace {
  text-align: center;
  margin-top: calc(var(--u) * 6);
}

/* El enlace de la sección de paquetes es un objetivo táctil real */
.paquetes__enlace .enlace {
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--u) * 5.5);
}

@media (min-width: 768px) {
  .paquetes {
    padding: calc(var(--u) * 14) 0;
  }

  .paquetes__grid {
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
  }

  .paquete--destacado {
    transform: scale(1.05);
    z-index: 1;
  }

  .paquete--destacado:hover {
    /* Conserva su 5% de tamaño: antes el tilt en línea lo borraba y la tarjeta
       destacada se encogía justo al pasarle el mouse. */
    transform: var(--tilt, ) scale(1.05) translateY(-8px);
  }
}

/* ---- Cierre (CTA final) ---- */
.cierre {
  background: var(--tinta);
  background-image: var(--fondo-cierre);
  background-size: cover;
  background-position: center;
  color: var(--blanco);
  padding: calc(var(--u) * 10) 0;
  position: relative;
  overflow: hidden;
}

.cierre__contenedor {
  position: relative;
  z-index: 1;
}

.cierre__contenido {
  display: grid;
  gap: calc(var(--u) * 6);
  align-items: center;
}

.cierre__texto {
  text-align: center;
}

.cierre__texto .seccion__titulo {
  color: var(--blanco);
  font-size: clamp(var(--t-xl), 4vw + 0.5rem, var(--t-3xl));
  margin-bottom: calc(var(--u) * 3);
}

.cierre__texto .seccion__subtitulo {
  color: var(--azul-200);
  font-size: var(--t-lg);
  line-height: 1.6;
  max-width: 52ch;
  margin: 0 auto;
}

.cierre__formulario {
  background: var(--blanco);
  border-radius: var(--radio-md);
  padding: calc(var(--u) * 4);
  color: var(--tinta);
  box-shadow: var(--sombra-fuerte);
  max-width: 52ch;
  margin: 0 auto;
}

.cierre__formulario-titulo {
  font-size: var(--t-lg);
  margin-bottom: calc(var(--u) * 3);
  text-align: center;
}

.cierre__form-grid {
  display: grid;
  gap: 0;
}

/* Botón del formulario con separación */
.cierre__btn-submit {
  margin-top: calc(var(--u) * 3);
}

.cierre__alternativa {
  text-align: center;
  padding-top: calc(var(--u) * 3);
  border-top: 1px solid var(--niebla);
  margin-top: calc(var(--u) * 3);
}

.cierre__alternativa-texto {
  font-size: var(--t-sm);
  color: var(--acero);
  margin-bottom: calc(var(--u) * 1);
}

@media (min-width: 768px) {
  .cierre {
    padding: calc(var(--u) * 14) 0;
  }

  .cierre__contenido {
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--u) * 8);
  }

  .cierre__texto {
    text-align: left;
  }

  .cierre__texto .seccion__subtitulo {
    margin: 0;
  }

  .cierre__formulario {
    padding: calc(var(--u) * 5);
    max-width: none;
  }

  .cierre__form-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0 calc(var(--u) * 3);
  }

  .cierre__form-grid .field:nth-child(3),
  .cierre__form-grid .checkbox-group {
    grid-column: span 2;
  }
}

/* 6. Animaciones con Intersection Observer */
/* ESCALARTE — Sistema de Animaciones
   Profesionales y visibles, respetando prefers-reduced-motion */

/* ---- Redes de seguridad: mostrar todo el contenido de una vez ----
   Dos escenarios de falla de carga en los que el contenido NUNCA debe quedar
   invisible:
   1. `.no-js`  — el JS está deshabilitado o no cargó; la clase queda en <html>
      (ver js/deteccion.js) y el contenido se muestra completo.
   2. `.sin-animaciones` — el JS cargó (clase `js`) pero `animations.js` falló y
      nunca reveló el contenido; deteccion.js agrega esta clase pasado un tiempo
      prudente como respaldo. En el flujo normal nunca se activa. */
.no-js [data-animate],
.no-js .proceso__linea,
.sin-animaciones [data-animate],
.sin-animaciones .proceso__linea {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ---- Estado inicial para elementos animados ---- */
[data-animate] {
  opacity: 0;
}

[data-animate="up"] {
  transform: translateY(40px);
}

[data-animate="down"] {
  transform: translateY(-40px);
}

[data-animate="left"] {
  transform: translateX(-40px);
}

[data-animate="right"] {
  transform: translateX(40px);
}

[data-animate="scale"] {
  transform: scale(0.9);
}

[data-animate="fade"] {
  transform: none;
}

/* ---- Estado visible ---- */
[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
  transition:
    opacity var(--duration-slow) var(--ease-out-expo),
    transform var(--duration-slow) var(--ease-out-expo);
}

/* ---- Delays para stagger ---- */
[data-delay="1"] { transition-delay: 100ms; }
[data-delay="2"] { transition-delay: 200ms; }
[data-delay="3"] { transition-delay: 300ms; }
[data-delay="4"] { transition-delay: 400ms; }
[data-delay="5"] { transition-delay: 500ms; }
[data-delay="6"] { transition-delay: 600ms; }

/* ---- Hero especial (home y landing del asistente) ---- */
.hero [data-animate],
.asis-hero [data-animate] {
  transition-duration: 800ms;
}

.hero__badge[data-animate] {
  transform: translateY(20px) scale(0.9);
  transition-delay: 100ms;
}

.hero__badge[data-animate].is-visible {
  transform: translateY(0) scale(1);
}

.hero__titulo[data-animate],
.asis-hero__titulo[data-animate] {
  transform: translateY(40px);
  transition-delay: 250ms;
}

/* Regla espejo obligatoria: sin esto la de arriba (misma especificidad y
   posterior a [data-animate].is-visible) gana siempre y el título queda
   40px abajo para siempre, comiéndose el aire hasta el subtítulo. */
.hero__titulo[data-animate].is-visible,
.asis-hero__titulo[data-animate].is-visible {
  transform: translateY(0);
}

.hero__subtitulo[data-animate],
.asis-hero__subtitulo[data-animate] {
  transition-delay: 450ms;
}

.hero__cta[data-animate],
.asis-hero__acciones[data-animate] {
  transition-delay: 650ms;
}

/* El indicador aparece al final; la declaración de `animation` completa (con el
   rebote) está más abajo, en el bloque de micro-interacciones. */
.hero__scroll {
  opacity: 0;
  transform: translateY(-10px);
}

@keyframes fadeInScroll {
  to {
    opacity: 0.7;
    transform: translateY(0);
  }
}

/* ---- Línea del proceso animada ---- */
.proceso__linea {
  transform: scaleY(0);
  transition: transform 1000ms var(--ease-out-expo);
}

.proceso__linea.is-visible {
  transform: scaleY(1);
}

@media (min-width: 768px) {
  .proceso__linea {
    transform: scaleX(0);
    transform-origin: left;
  }

  .proceso__linea.is-visible {
    transform: scaleX(1);
  }
}

/* ---- Pasos del proceso ---- */
.proceso__paso[data-animate] {
  transform: translateY(30px);
}

.proceso__paso[data-animate].is-visible {
  transform: translateY(0);
}

/* ---- Tarjetas de síntomas ---- */
.card--sintoma[data-animate] {
  transform: translateY(30px) scale(0.95);
}

.card--sintoma[data-animate].is-visible {
  transform: translateY(0) scale(1);
  transition:
    opacity var(--duration-normal) var(--ease-out-expo),
    transform var(--duration-normal) var(--ease-out-back);
}

/* ---- Paquetes ---- */
.paquete[data-animate] {
  transform: translateY(40px) scale(0.95);
}

.paquete[data-animate].is-visible {
  transform: translateY(0) scale(1);
  transition:
    opacity var(--duration-slow) var(--ease-out-expo),
    transform var(--duration-slow) var(--ease-out-back);
}

.paquete--destacado[data-animate].is-visible {
  transform: scale(1.05);
}

/* ---- Formulario ---- */
.cierre__formulario[data-animate] {
  transform: translateY(50px) scale(0.95);
}

.cierre__formulario[data-animate].is-visible {
  transform: translateY(0) scale(1);
  transition-duration: 700ms;
}

/* ---- Micro-interacciones ---- */

/* Botón con efecto de onda */
.btn {
  position: relative;
  overflow: hidden;
}

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,0.3) 0%, transparent 70%);
  transform: scale(0);
  opacity: 0;
  transition: transform 500ms var(--ease-out-expo), opacity 300ms ease;
}

.btn:active::after {
  transform: scale(2);
  opacity: 1;
  transition: transform 0ms, opacity 0ms;
}

/* Tarjetas con efecto de elevación */
.card--sintoma,
.paquete {
  transition:
    transform var(--duration-normal) var(--ease-out-expo),
    box-shadow var(--duration-normal) var(--ease-out-expo);
}

/* El giro llega como --tilt desde main.js y se compone con la elevación, en vez
   de que el JS escriba el transform completo y borre la posición del CSS. */
.card--sintoma:hover {
  transform: var(--tilt, ) translateY(-6px);
  box-shadow: var(--sombra-media);
}

/* Iconos con rotación suave */
.card--sintoma .card__icono {
  transition: transform var(--duration-normal) var(--ease-out-back);
}

.card--sintoma:hover .card__icono {
  transform: scale(1.1) rotate(5deg);
}

/* Números del proceso con pulso */
.proceso__paso-numero {
  transition: transform var(--duration-normal) var(--ease-out-back),
              box-shadow var(--duration-normal) var(--ease-out-expo);
}

.proceso__paso:hover .proceso__paso-numero {
  transform: scale(1.1);
  box-shadow: var(--sombra-elevada);
}

/* ---- Efecto 3D sutil en tarjetas (tilt) ---- */
.card--sintoma,
.paquete {
  transform-style: preserve-3d;
  transition: transform var(--duration-normal) var(--ease-out-expo),
              box-shadow var(--duration-normal) var(--ease-out-expo);
}

.card--sintoma:hover {
  box-shadow:
    var(--sombra-media),
    0 15px 40px rgba(27, 85, 184, 0.15);
}

/* ---- Efecto de brillo en paquetes ---- */
.paquete {
  position: relative;
  overflow: hidden;
}

.paquete::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 40%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 60%
  );
  transform: translateX(-100%);
  transition: transform 600ms ease;
  pointer-events: none;
}

.paquete:hover::after {
  transform: translateX(100%);
}

.paquete:hover {
  box-shadow:
    var(--sombra-elevada),
    0 20px 50px rgba(27, 85, 184, 0.2);
}

.paquete--destacado:hover {
  box-shadow:
    var(--sombra-elevada),
    0 25px 60px rgba(27, 85, 184, 0.25);
}

/* ---- Animación de la línea del proceso ---- */
@keyframes crecer-linea {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* ---- Efecto hover en pasos del proceso ---- */
.proceso__paso {
  transition: transform var(--duration-normal) var(--ease-out-expo);
}

.proceso__paso:hover {
  transform: translateY(-4px);
}

.proceso__paso:hover .proceso__paso-numero {
  transform: scale(1.15) rotate(-5deg);
}

/* ---- Animación del scroll indicator ---- */
@keyframes bounce-scroll {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}

.hero__scroll {
  animation: fadeInScroll 600ms var(--ease-out-expo) 1.5s forwards,
             bounce-scroll 2s ease-in-out 2.5s infinite;
}

/* ---- Botón CTA con glow ---- */
.btn--grande {
  box-shadow: 0 4px 15px rgba(27, 85, 184, 0.3);
  transition:
    background var(--duration-fast) ease,
    transform var(--duration-fast) ease,
    box-shadow var(--duration-normal) ease;
}

.btn--grande:hover {
  box-shadow: 0 6px 25px rgba(27, 85, 184, 0.5);
}

/* ---- Respeto a preferencias del usuario ---- */
@media (prefers-reduced-motion: reduce) {
  [data-animate],
  [data-animate].is-visible,
  .hero__badge[data-animate],
  .hero__badge[data-animate].is-visible,
  .hero__titulo[data-animate],
  .hero__titulo[data-animate].is-visible,
  .hero__subtitulo[data-animate],
  .hero__subtitulo[data-animate].is-visible,
  .hero__cta[data-animate],
  .hero__cta[data-animate].is-visible,
  .proceso__paso[data-animate],
  .proceso__paso[data-animate].is-visible,
  .card--sintoma[data-animate],
  .card--sintoma[data-animate].is-visible,
  .paquete[data-animate],
  .paquete[data-animate].is-visible,
  .cierre__formulario[data-animate],
  .cierre__formulario[data-animate].is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .paquete--destacado[data-animate].is-visible {
    transform: scale(1.05);
  }

  .proceso__linea,
  .proceso__linea.is-visible {
    transform: none;
    transition: none;
  }

  .btn::after,
  .paquete::after {
    display: none;
  }

  .card--sintoma:hover,
  .paquete:hover,
  .paquete--destacado:hover,
  .proceso__paso:hover {
    transform: none;
  }

  .card--sintoma:hover .card__icono,
  .proceso__paso:hover .proceso__paso-numero {
    transform: none;
  }

  .hero__scroll {
    animation: none;
    opacity: 0.7;
    transform: none;
  }

  [data-parallax] {
    transform: none !important;
  }
}

/* 7. Animación de intro/splash */
/* ESCALARTE — Animación de Intro
   Overlay con isotipo que se recoge para revelar la página */

/* ---- Overlay de intro ---- */
.intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--tinta);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
}

.intro.is-done {
  pointer-events: none;
}

/* ---- Isotipo animado ---- */
.intro__isotipo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--u) * 2);
  transform: scale(1.5);
}

@media (min-width: 768px) {
  .intro__isotipo {
    transform: scale(2);
  }
}

@media (min-width: 1024px) {
  .intro__isotipo {
    transform: scale(2.5);
  }
}

/* Barras del isotipo */
.intro__barra {
  height: calc(var(--u) * 2);
  transform-origin: top center;
  will-change: transform, opacity;
}

/* Variante del isotipo para fondo oscuro, la misma del header y del pie: antes
   mezclaba dos variantes y el peldaño medio (azul-500 sobre tinta) quedaba en
   2.62:1, casi invisible durante los 3 segundos del splash. */
.intro__barra--1 {
  width: calc(var(--u) * 6);
  background: var(--azul-400);
}

.intro__barra--2 {
  width: calc(var(--u) * 9);
  background: var(--azul-200);
}

.intro__barra--3 {
  width: calc(var(--u) * 12);
  background: var(--blanco);
}

/* ---- Estados de animación ---- */

/* Fase 1: Entrada de las barras (escalonado de abajo hacia arriba) */
.intro__barra {
  opacity: 0;
  transform: translateX(calc(var(--u) * -4));
  transition: opacity 400ms var(--ease-out-expo),
              transform 400ms var(--ease-out-expo);
}

.intro.is-animating .intro__barra--3 {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 200ms;
}

.intro.is-animating .intro__barra--2 {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 350ms;
}

.intro.is-animating .intro__barra--1 {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 500ms;
}

/* Fase 2: Las barras se recogen (colapsan hacia arriba) */
.intro.is-collapsing .intro__barra {
  transition: height 500ms var(--ease-out-expo),
              opacity 300ms ease-out;
}

.intro.is-collapsing .intro__barra--3 {
  height: 0;
  opacity: 0;
  transition-delay: 0ms;
}

.intro.is-collapsing .intro__barra--2 {
  height: 0;
  opacity: 0;
  transition-delay: 150ms;
}

.intro.is-collapsing .intro__barra--1 {
  height: 0;
  opacity: 0;
  transition-delay: 300ms;
}

/* Fase 3: El overlay sube para revelar la página */
.intro.is-revealing {
  transform: translateY(-100%);
  transition: transform 800ms cubic-bezier(0.76, 0, 0.24, 1);
}

/* Fase 4: Ocultar completamente */
.intro.is-done {
  visibility: hidden;
}

/* ---- Respeto a preferencias del usuario ---- */
@media (prefers-reduced-motion: reduce) {
  .intro {
    display: none;
  }
}

/* ---- Skip intro para visitantes recurrentes ---- */
.intro.is-skipped {
  display: none;
}

/* ---- Sin JavaScript: no mostrar el overlay ----
   El overlay se retira con JS. Si el JS no está disponible, la clase `no-js`
   permanece en <html> (ver js/deteccion.js) y el overlay se oculta para que
   nunca tape la página. */
.no-js .intro {
  display: none;
}

/* ---- Red de seguridad ----
   Si el JS de la intro no completa su secuencia (p. ej. intro.js no cargó pero
   sí el resto), el overlay se retira solo pasado un tiempo prudente para no
   dejar la página tapada. Con la intro normal (≈3 s) este respaldo nunca se ve,
   porque para entonces el overlay ya se ocultó. */
@keyframes intro-seguridad {
  to {
    transform: translateY(-100%);
    visibility: hidden;
  }
}

.js .intro {
  animation: intro-seguridad 700ms cubic-bezier(0.76, 0, 0.24, 1) 4s forwards;
}

@media (prefers-reduced-motion: reduce) {
  .js .intro {
    animation: none;
  }
}

/* 8. Gráficos animados con scroll */
/* ESCALARTE — Fondos Animados
   3 componentes centralizados para usar en cualquier sección:
   1. neural: Red neuronal (fondo azul/oscuro)
   2. line: Línea alcista (fondo blanco)
   3. metrics: Barras + círculos (fondo blanco)

   Responsive: móvil primero, breakpoints 480/768/1024/1280 */

/* ---- Base: Secciones con fondo animado ---- */
.has-animated-bg {
  position: relative;
  overflow: hidden;
}

/* Contenido siempre sobre los fondos animados */
.has-animated-bg > *:not(.neural-bg__canvas):not(.line-bg__svg):not(.metrics-bg) {
  position: relative;
  z-index: 1;
}

/* ============================================================
   1. RED NEURONAL
   ============================================================ */

.neural-bg__canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ============================================================
   2. LÍNEA ALCISTA ANIMADA
   ============================================================ */

.line-bg__svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.line-bg__line {
  fill: none;
  stroke: var(--azul-200);
  /* Fluido: 6px en móvil → 12px en desktop */
  stroke-width: clamp(6px, 1vw + 4px, 12px);
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.25;
}

/* ============================================================
   3. MÉTRICAS (barras + círculos)
   ============================================================ */

.metrics-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Barras de volumen (abajo) */
.metrics-bg__bars {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: clamp(100px, 20vw, 180px);
  opacity: 0.12;
}

.metrics-bg__bar {
  fill: var(--azul-400);
}

/* Círculos esparcidos (arriba) */
.metrics-bg__circles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  opacity: 0.15;
}

.metrics-bg__circle-item {
  position: absolute;
}

.metrics-bg__circle-svg {
  width: 100%;
  height: 100%;
}

.metrics-bg__circle-track {
  fill: none;
  stroke: var(--niebla);
  stroke-width: 14;
}

.metrics-bg__circle-progress {
  fill: none;
  stroke: var(--azul-300);
  stroke-width: 14;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: center;
}

/* ============================================================
   ACCESIBILIDAD — prefers-reduced-motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  /* No se baja la opacidad del contenedor: los hijos ya traen la suya y al
     multiplicarse (0.08 × 0.25 = 0.02) los fondos desaparecían. Se atenúa cada
     hijo por separado para que se vean tenues y quietos. */
  .neural-bg__canvas {
    opacity: 0.08;
  }

  .line-bg__line {
    opacity: 0.12;
  }

  .metrics-bg__bars {
    opacity: 0.06;
  }

  .metrics-bg__circles {
    opacity: 0.07;
  }
}

/* 9. Landing del asistente con IA + teaser en el home */
/* ESCALARTE — Landing del Asistente con IA
   Estilos propios de la página /asistente y del teaser en el home.
   Reusa componentes existentes (.btn, .card--sintoma, .proceso, .hero__badge,
   .seccion__titulo). Todo el color y el espaciado sale de los tokens de marca. */

/* ==========================================================================
   Helpers
   ========================================================================== */

/* Botón outline sobre fondo oscuro: se usa el modificador .btn--outline-claro
   definido en components.css (no se sobrescribe el componente desde aquí). */

/* Ícono de WhatsApp dentro de un botón */
.asis-wa-icono {
  width: calc(var(--u) * 2.5);
  height: calc(var(--u) * 2.5);
  flex-shrink: 0;
}

/* Cabecera de sección reutilizable dentro de la landing */
/* ==========================================================================
   Hero de la landing
   ========================================================================== */

/* El alto, el relleno y la retícula los hereda de la base compartida
   `.hero, .asis-hero` (sections.css). Acá solo lo propio de este hero, que
   además del texto lleva la maqueta de conversación: por debajo de 1280px los
   dos se apilan y la sección pasa de una pantalla (medido: 1280px en 375x812),
   así que el indicador de scroll se oculta porque quedaría fuera de vista.
   Desde 1280px entra en dos columnas, cierra en una pantalla y el indicador
   aparece al pie, igual que en el home. */
.asis-hero {
  color: var(--blanco);
}

.asis-hero .hero__scroll {
  display: none;
}

.asis-hero__grid {
  grid-row: 2;
  position: relative;
  z-index: 1;
  display: grid;
  gap: calc(var(--u) * 6);
  align-items: center;
}

.asis-hero .hero__scroll {
  grid-row: 3;
  justify-self: center;
}

.asis-hero__copy {
  text-align: center;
}

.asis-hero__titulo {
  font-size: clamp(var(--t-2xl), 5vw + 1rem, var(--t-4xl));
  color: var(--blanco);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: calc(var(--u) * 4);
  text-wrap: balance;
}

.asis-hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 2);
  justify-content: center;
}

@media (min-width: 768px) {
  .asis-hero__titulo {
    margin-bottom: calc(var(--u) * 5);
  }
}

@media (min-width: 1280px) {
  .asis-hero .hero__scroll {
    display: flex;
  }

  .asis-hero__grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: calc(var(--u) * 8);
  }

  .asis-hero__copy {
    text-align: left;
  }

  .asis-hero__subtitulo {
    margin-left: 0;
    margin-right: 0;
  }

  .asis-hero__acciones {
    justify-content: flex-start;
  }
}

/* ==========================================================================
   Maqueta de conversación (chat)
   ========================================================================== */

.chat-mock {
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  background: var(--blanco);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-fuerte);
  overflow: hidden;
}

.chat-mock__barra {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.5);
  padding: calc(var(--u) * 2);
  background: linear-gradient(135deg, var(--azul-600) 0%, var(--tinta) 100%);
  color: var(--blanco);
}

.chat-mock__avatar {
  width: calc(var(--u) * 5);
  height: calc(var(--u) * 5);
  border-radius: 50%;
  background: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chat-mock__avatar svg {
  width: calc(var(--u) * 3);
  height: calc(var(--u) * 3);
}

.chat-mock__id {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.chat-mock__nombre {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-sm);
}

.chat-mock__estado {
  font-size: var(--t-xs);
  color: var(--azul-200);
}

.chat-mock__cuerpo {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1.5);
  padding: calc(var(--u) * 3) calc(var(--u) * 2.5);
  background: var(--nieve);
}

.chat-burbuja {
  max-width: 82%;
  padding: calc(var(--u) * 1.5) calc(var(--u) * 2);
  font-size: var(--t-sm);
  line-height: 1.5;
  border-radius: var(--radio-lg);
}

.chat-burbuja--cliente {
  align-self: flex-end;
  background: var(--blanco);
  color: var(--tinta);
  border: 1px solid var(--niebla);
  border-bottom-right-radius: var(--radio);
}

.chat-burbuja--asistente {
  align-self: flex-start;
  background: linear-gradient(135deg, var(--azul-500) 0%, var(--azul-600) 100%);
  color: var(--blanco);
  border-bottom-left-radius: var(--radio);
}

/* ==========================================================================
   Problema — tarjetas de síntomas (reusa .card--sintoma)
   ========================================================================== */

.asis-problema {
  background: var(--blanco);
  padding: calc(var(--u) * 10) 0;
}

.asis-cards {
  display: grid;
  gap: calc(var(--u) * 3);
}

@media (min-width: 768px) {
  .asis-problema {
    padding: calc(var(--u) * 14) 0;
  }

  /* Ancho acotado para que una .card--sintoma mida aquí lo mismo que en el
     home (319px) y en la sección de beneficios (329px): sin el tope, dos
     columnas a 1280px daban tarjetas de 509px. */
  .asis-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--u) * 4);
    max-width: calc(var(--u) * 86);
    margin-inline: auto;
  }
}

/* ==========================================================================
   Beneficios — qué hace por el negocio
   ========================================================================== */

.asis-beneficios {
  background: var(--nieve);
  padding: calc(var(--u) * 10) 0;
}

.asis-beneficios__grid {
  display: grid;
  gap: calc(var(--u) * 3);
}

@media (min-width: 768px) {
  .asis-beneficios {
    padding: calc(var(--u) * 14) 0;
  }

  .asis-beneficios__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--u) * 4);
  }
}

@media (min-width: 1024px) {
  .asis-beneficios__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Las tarjetas de beneficio reusan .card--sintoma tal cual (ya son blancas y
   el grid las estira a la misma altura con align-items: stretch por defecto). */

/* ==========================================================================
   Control — panel del dueño (texto + maqueta de panel)
   ========================================================================== */

.asis-control {
  background: var(--blanco);
  padding: calc(var(--u) * 10) 0;
}

.asis-control__grid {
  display: grid;
  gap: calc(var(--u) * 6);
  align-items: center;
}

/* Solo lo propio: el tamaño lo da .seccion__titulo */
.asis-control__titulo {
  margin-bottom: calc(var(--u) * 2);
  color: var(--tinta);
}

.asis-control__intro {
  color: var(--acero);
  font-size: var(--t-lg);
  margin-bottom: calc(var(--u) * 4);
}

.asis-control__lista {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 3);
}

.asis-punto {
  display: grid;
  grid-template-columns: calc(var(--u) * 5) 1fr;
  gap: calc(var(--u) * 2);
  align-items: start;
}

.asis-punto__icono {
  width: calc(var(--u) * 5);
  height: calc(var(--u) * 5);
  border-radius: var(--radio);
  background: var(--azul-50);
  color: var(--azul-500);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.asis-punto__icono svg {
  width: calc(var(--u) * 2.75);
  height: calc(var(--u) * 2.75);
}

.asis-punto__titulo {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-md);
  color: var(--tinta);
  margin-bottom: calc(var(--u) * 0.5);
}

.asis-punto__texto {
  font-size: var(--t-sm);
  color: var(--acero);
  line-height: 1.55;
}

@media (min-width: 768px) {
  .asis-control {
    padding: calc(var(--u) * 14) 0;
  }
}

@media (min-width: 1024px) {
  .asis-control__grid {
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--u) * 8);
  }

  /* La maqueta va primero visualmente en desktop */
  .asis-control__visual {
    order: -1;
  }
}

/* --- Maqueta de panel --- */
.panel-mock {
  background: var(--nieve);
  border: 1px solid var(--niebla);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-elevada);
  overflow: hidden;
}

.panel-mock__barra {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1);
  padding: calc(var(--u) * 1.5) calc(var(--u) * 2);
  background: var(--tinta);
}

.panel-mock__punto {
  width: calc(var(--u) * 1.25);
  height: calc(var(--u) * 1.25);
  border-radius: 50%;
  background: var(--acero);
  opacity: 0.6;
}

.panel-mock__titulo {
  margin-left: calc(var(--u) * 1);
  font-size: var(--t-xs);
  color: var(--azul-200);
  font-family: var(--dato);
}

.panel-mock__cuerpo {
  display: grid;
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 2.5);
}

.panel-mock__tarjeta {
  background: var(--blanco);
  border-radius: var(--radio-md);
  padding: calc(var(--u) * 2);
  box-shadow: var(--sombra-sutil);
}

.panel-mock__etiqueta {
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--acero);
  margin-bottom: calc(var(--u) * 1.5);
}

/* Calendario mini */
.cal-mini {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: calc(var(--u) * 0.75);
}

.cal-mini__dia {
  aspect-ratio: 1;
  border-radius: var(--radio);
  background: var(--nieve);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--dato);
  font-size: var(--t-xs);
  color: var(--acero);
}

.cal-mini__dia--activo {
  background: linear-gradient(135deg, var(--azul-500) 0%, var(--azul-600) 100%);
  color: var(--blanco);
  font-weight: 600;
}

.cal-mini__dia--hoy {
  border: 2px solid var(--azul-300);
  color: var(--azul-500);
  font-weight: 600;
}

/* Lista de conversaciones mini */
.chat-fila {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.5);
  padding: calc(var(--u) * 1) 0;
}

.chat-fila + .chat-fila {
  border-top: 1px solid var(--nieve);
}

.chat-fila__avatar {
  width: calc(var(--u) * 4);
  height: calc(var(--u) * 4);
  border-radius: 50%;
  background: var(--azul-100);
  color: var(--azul-600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--dato);
  font-size: var(--t-xs);
  font-weight: 600;
  flex-shrink: 0;
}

.chat-fila__lineas {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.75);
  min-width: 0;
}

.chat-fila__linea {
  height: calc(var(--u) * 1);
  border-radius: var(--radio-pill);
  background: var(--niebla);
}

.chat-fila__linea--corta {
  width: 45%;
  background: var(--nieve);
  border: 1px solid var(--niebla);
}

.chat-fila__flag {
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--azul-500);
  flex-shrink: 0;
}

/* ==========================================================================
   Proceso — se reusa el componente .proceso (fondo nieve).
   En esta landing lo colocamos sobre blanco: se ajusta el fondo.
   ========================================================================== */

.asis-proceso {
  background: var(--nieve);
}

.asis-proceso__remate {
  text-align: center;
  color: var(--acero);
  font-size: var(--t-md);
  margin: calc(var(--u) * 8) auto 0;
  max-width: 50ch;
}

/* ==========================================================================
   Rubros — para qué negocios sirve
   ========================================================================== */

.asis-rubros {
  background: var(--blanco);
  padding: calc(var(--u) * 10) 0;
}

.asis-rubros__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(var(--u) * 1.5);
  max-width: 760px;
  margin: 0 auto;
}

.rubro-chip {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 1);
  padding: calc(var(--u) * 1.25) calc(var(--u) * 2.5);
  background: var(--nieve);
  border: 1px solid var(--niebla);
  border-radius: var(--radio-pill);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--tinta);
  transition: border-color var(--duration-fast) ease-out,
              color var(--duration-fast) ease-out;
}

/* Misma capa de micro-interacción que el resto del sitio */
.rubro-chip:hover {
  border-color: var(--azul-300);
  color: var(--azul-600);
}

@media (min-width: 768px) {
  .asis-rubros {
    padding: calc(var(--u) * 14) 0;
  }
}

/* ==========================================================================
   CTA final
   ========================================================================== */

.asis-cta {
  background: var(--tinta);
  background-image: var(--fondo-cierre);
  background-size: cover;
  background-position: center;
  color: var(--blanco);
  padding: calc(var(--u) * 10) 0;
  text-align: center;
}

.asis-cta__titulo {
  font-size: clamp(var(--t-xl), 4vw + 0.5rem, var(--t-3xl));
  color: var(--blanco);
  margin-bottom: calc(var(--u) * 3);
  text-wrap: balance;
}

.asis-cta__subtitulo {
  font-size: var(--t-lg);
  color: var(--azul-200);
  line-height: 1.6;
  max-width: 52ch;
  margin: 0 auto calc(var(--u) * 6);
}

.asis-cta__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 2);
  justify-content: center;
}

.asis-cta__acciones .btn {
  min-width: 224px;
}

@media (min-width: 768px) {
  .asis-cta {
    padding: calc(var(--u) * 14) 0;
  }
}

/* ==========================================================================
   Teaser del asistente en el home (index.html)
   ========================================================================== */

.asis-teaser {
  background: var(--nieve);
  padding: calc(var(--u) * 10) 0;
}

.asis-teaser__caja {
  background: linear-gradient(135deg, var(--azul-700) 0%, var(--tinta) 100%);
  color: var(--blanco);
  border-radius: var(--radio-xl);
  padding: calc(var(--u) * 5) calc(var(--u) * 4);
  overflow: hidden;
}

.asis-teaser__grid {
  display: grid;
  gap: calc(var(--u) * 5);
  align-items: center;
}

/* Mismo tratamiento que .hero__badge (mismos colores, tipografía y radio):
   antes eran dos etiquetas con los mismos colores y tipografías distintas. */
.asis-teaser__badge {
  display: inline-block;
  background: var(--azul-300-15);
  border: 1px solid var(--azul-300-40);
  color: var(--azul-200);
  font-size: var(--t-sm);
  font-weight: 500;
  padding: calc(var(--u) * 1) calc(var(--u) * 3);
  border-radius: var(--radio-pill);
  margin-bottom: calc(var(--u) * 2.5);
}

.asis-teaser__titulo {
  font-size: clamp(var(--t-xl), 3vw + 0.5rem, var(--t-2xl));
  color: var(--blanco);
  line-height: 1.2;
  margin-bottom: calc(var(--u) * 2);
  text-wrap: balance;
}

.asis-teaser__texto {
  color: var(--azul-200);
  font-size: var(--t-md);
  line-height: 1.6;
  margin-bottom: calc(var(--u) * 3);
  max-width: 48ch;
}

.asis-teaser__lista {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1.5);
  margin-bottom: calc(var(--u) * 4);
}

.asis-teaser__item {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.5);
  font-size: var(--t-sm);
  color: var(--blanco);
}

.asis-teaser__item svg {
  width: calc(var(--u) * 2.5);
  height: calc(var(--u) * 2.5);
  color: var(--azul-200);
  flex-shrink: 0;
}

/* La maqueta de chat se muestra en todos los tamaños y debe verse EXACTAMENTE
   igual que en la landing. El tope lo pone el propio componente (.chat-mock,
   380px): no se le impone otro desde acá. En móvil el visual se extiende hasta
   el borde de la caja (cancela su relleno lateral) para que el ancho disponible
   sea el mismo que en el hero de /asistente y las burbujas corten igual. */
.asis-teaser__visual {
  margin-inline: calc(var(--u) * -4);
}

@media (min-width: 768px) {
  .asis-teaser {
    padding: calc(var(--u) * 14) 0;
  }

  .asis-teaser__caja {
    padding: calc(var(--u) * 8) calc(var(--u) * 8);
  }

  .asis-teaser__visual {
    margin-inline: 0;
  }
}

@media (min-width: 1280px) {
  .asis-teaser__grid {
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--u) * 8);
  }
}