/* ==========================================================================
   Directa a Casa — Hoja de estilos principal
   Identidad basada en el Manual de Identidad Gráfica (ENE 2020)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens de diseño
   -------------------------------------------------------------------------- */
:root {
  /* Colores corporativos oficiales (Manual de identidad, pág. 9-10) */
  --naranja: #ff8300;          /* Pantone 151 C — color principal */
  --naranja-claro: #ff9015;    /* Pantone 1495 C */
  --naranja-suave: #ffab48;
  --cafe: #a4541c;             /* Pantone 160 C */
  --azul: #0083ad;             /* Pantone 7704 C */
  --azul-claro: #54c0e8;       /* Pantone 2985 C */

  /* Neutros derivados (cálidos, afines al naranja de marca) */
  --tinta: #241a10;
  --tinta-suave: #6b5c48;
  --tinta-tenue: #9a8b7a;
  --papel: #ffffff;
  --crema: #fbf6ee;
  --crema-calida: #fff1e2;
  --azul-fondo: #e4f2f6;
  --linea: #f0e6d8;
  --linea-fuerte: #eee1d1;

  /* Tipografía
     El manual especifica Carpe Diem (títulos) y Coves (texto).
     Como no son fuentes web con licencia libre, usamos equivalentes de
     Google Fonts con el mismo carácter: geométricas, redondeadas y amables.
     Si se adquiere la licencia de las originales, se sustituyen aquí. */
  --fuente-titulo: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
  --fuente-texto: 'Nunito Sans', 'Segoe UI', system-ui, sans-serif;

  /* Escala tipográfica */
  --txt-xs: 0.6875rem;   /* 11px  */
  --txt-sm: 0.8125rem;   /* 13px  */
  --txt-base: 0.9375rem; /* 15px  */
  --txt-md: 1.0625rem;   /* 17px  */
  --txt-lg: 1.25rem;     /* 20px  */
  --txt-xl: 1.5rem;      /* 24px  */
  --txt-2xl: 2rem;       /* 32px  */
  --txt-3xl: 2.75rem;    /* 44px  */

  /* Espaciado */
  --esp-1: 0.5rem;
  --esp-2: 1rem;
  --esp-3: 1.5rem;
  --esp-4: 2rem;
  --esp-6: 3rem;
  --esp-8: 4rem;
  --esp-12: 6rem;

  /* Otros */
  --radio: 12px;
  --radio-lg: 20px;
  --ancho-max: 1200px;
  --sombra: 0 20px 40px -24px rgba(60, 30, 0, 0.35);
  --sombra-fuerte: 0 30px 60px -20px rgba(60, 30, 0, 0.5);
  --transicion: 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* --------------------------------------------------------------------------
   2. Reset y base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Compensa el header fijo al saltar a un ancla */
  scroll-padding-top: 90px;
}

body {
  margin: 0;
  font-family: var(--fuente-texto);
  font-size: var(--txt-base);
  line-height: 1.6;
  color: var(--tinta);
  background: var(--papel);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--fuente-titulo);
  font-weight: 800;
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p { margin: 0; }

/* Las listas de definición, las figuras y las citas traen márgenes propios
   del navegador — `dd` arrastra 40 px a la izquierda y `figure` otros 40 px
   a cada lado — que descentran cualquier bloque centrado. Se anulan aquí;
   cada componente pone después los suyos. */
dl, dd, figure, blockquote { margin: 0; }

/* `height: auto` es deliberado. Los atributos width/height del HTML entran
   como estilo del propio navegador: si no se anula la altura, cada foto
   conserva la suya original y una rejilla de retratos queda dispareja.
   Con height auto manda el aspect-ratio definido en el CSS. */
img { max-width: 100%; display: block; height: auto; }

a {
  color: var(--azul);
  text-decoration: none;
  transition: color var(--transicion);
}
a:hover { color: var(--cafe); }

/* Foco visible para navegación con teclado (accesibilidad).
   Se excluyen los elementos SVG: en ellos `outline` dibuja un rectángulo
   alrededor de la forma, no sobre su silueta, y se ve como un cuadro suelto.
   El mapa define su propio estilo de foco más abajo. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible:not(svg *) {
  outline: 3px solid var(--azul);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Salta al contenido — visible sólo al tabular */
.saltar-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--tinta);
  color: #fff;
  padding: var(--esp-2) var(--esp-3);
  z-index: 200;
  font-weight: 700;
}
.saltar-contenido:focus {
  left: 0;
  color: #fff;
}

/* Sólo para lectores de pantalla */
.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.contenedor {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0 var(--esp-4);
}

section { padding: var(--esp-12) 0; }

/* --------------------------------------------------------------------------
   3. Sistema de movimiento
   -------------------------------------------------------------------------- */
/* Las casas cruzan el hero en diagonal, siempre en la misma dirección,
   apareciendo y desvaneciéndose en los extremos. Al reiniciar el ciclo
   están invisibles, así que el salto no se ve: la sensación es de flujo
   continuo, no de ir y volver.

   Los porcentajes de `translate` se miden contra el tamaño del elemento que
   se mueve, no contra su contenedor. Por eso cae una capa del tamaño del
   hero y no el dibujo suelto: así el 118 % equivale al alto real del hero. */
@keyframes caerCasa {
  0%   { transform: translate3d(0, -30%, 0);    opacity: 0; }
  10%  { opacity: var(--opacidad-casa, .28); }
  86%  { opacity: var(--opacidad-casa, .28); }
  100% { transform: translate3d(-38%, 118%, 0); opacity: 0; }
}
/* El giro va aparte, sobre el dibujo: sumarlo al transform que cae haría que
   la casa girara alrededor del centro del hero en vez de sobre sí misma.
   Misma duración y mismo retraso, así los dos movimientos van sincronizados. */
@keyframes girarCasa {
  from { transform: rotate(0deg); }
  to   { transform: rotate(var(--giro, 24deg)); }
}
@keyframes marquesina {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes latido {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); }
  50%      { box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); }
}
@keyframes destello {
  0%   { transform: translateX(-120%) skewX(-15deg); }
  16%  { transform: translateX(220%) skewX(-15deg); }
  100% { transform: translateX(220%) skewX(-15deg); }
}
/* La camioneta avanza y se detiene en cada parada de la ruta */
@keyframes recorrerRuta {
  0%   { left: 5%;     opacity: 0; }
  4%   { left: 5%;     opacity: 1; }
  18%  { left: 16.5%;  opacity: 1; }
  30%  { left: 16.5%;  opacity: 1; }
  46%  { left: 50%;    opacity: 1; }
  58%  { left: 50%;    opacity: 1; }
  74%  { left: 83.5%;  opacity: 1; }
  86%  { left: 83.5%;  opacity: 1; }
  96%  { left: 92%;    opacity: 1; }
  100% { left: 92%;    opacity: 0; }
}
@keyframes recorrerRutaVertical {
  0%   { top: 2%;   opacity: 0; }
  4%   { top: 2%;   opacity: 1; }
  18%  { top: 25%;  opacity: 1; }
  30%  { top: 25%;  opacity: 1; }
  46%  { top: 55%;  opacity: 1; }
  58%  { top: 55%;  opacity: 1; }
  74%  { top: 85%;  opacity: 1; }
  86%  { top: 85%;  opacity: 1; }
  96%  { top: 90%;  opacity: 1; }
  100% { top: 90%;  opacity: 0; }
}

/* Aparición al hacer scroll — activada por JS (IntersectionObserver) */
.aparece {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
              transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.aparece.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Respeta la preferencia del sistema de reducir movimiento */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .aparece { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   4. Botones
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-1);
  font-family: var(--fuente-texto);
  font-weight: 800;
  font-size: var(--txt-base);
  padding: 0.8125rem 1.375rem;
  border-radius: var(--radio);
  border: 2px solid transparent;
  cursor: pointer;
  text-align: center;
  min-height: 48px; /* objetivo táctil cómodo */
  transition: transform var(--transicion), box-shadow var(--transicion),
              background var(--transicion), border-color var(--transicion);
}
.btn:hover { transform: translateY(-2px); }

.btn--oscuro { background: var(--tinta); color: #fff; }
.btn--oscuro:hover { color: #fff; box-shadow: 0 10px 22px -8px rgba(36, 26, 16, 0.55); }

.btn--naranja { background: var(--naranja); color: #fff; }
.btn--naranja:hover { color: #fff; box-shadow: 0 10px 24px -8px rgba(255, 131, 0, 0.6); }

.btn--blanco { background: #fff; color: var(--naranja); animation: latido 2.6s ease-in-out infinite; }
.btn--blanco:hover { color: var(--cafe); }

.btn--fantasma { background: transparent; border-color: rgba(255, 255, 255, 0.55); color: #fff; }
.btn--fantasma:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, 0.12); }


/* --------------------------------------------------------------------------
   5. Encabezado y navegación
   -------------------------------------------------------------------------- */
.cabecera {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: var(--esp-3) 0 0;
}
/* Al hacer scroll, el header se fija y toma fondo sólido (clase vía JS) */
.cabecera.fija {
  position: fixed;
  padding: 0.75rem 0;
  background: rgba(36, 26, 16, 0.96);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px -8px rgba(0, 0, 0, 0.4);
  animation: bajaHeader 0.35s ease;
}
@keyframes bajaHeader {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

.cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
}

.marca {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: #fff;
  flex-shrink: 0;
}
.marca:hover { color: #fff; }
/* Logotipo oficial. El archivo es naranja sobre fondo transparente y aquí
   siempre va sobre naranja o sobre el café oscuro de marca, así que se
   reproduce en blanco — la "versión negativo" que contempla el manual
   (pág. 5) para cuando el fondo no permite el color oficial. */
.marca__logo {
  height: 44px;
  width: auto;
  filter: brightness(0) invert(1);
}
.cabecera.fija .marca__logo { height: 38px; }
@media (max-width: 640px) { .marca__logo { height: 36px; } }

.nav { display: flex; align-items: center; gap: 1.875rem; }
.nav a {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.90625rem;
  font-weight: 700;
  position: relative;
  padding-bottom: 3px;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 2px;
  background: #fff;
  transition: right var(--transicion);
}
.nav a:hover { color: #fff; }
.nav a:hover::after { right: 0; }

.nav-movil-btn {
  display: none;
  width: 48px; height: 48px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.16);
  border: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: #fff;
}

/* --------------------------------------------------------------------------
   6. Hero (primera vista)
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  /* Degradado de marca: naranja → café oscuro. Sin mezclas con azul,
     que al superponerse producen un gris sucio. */
  background: linear-gradient(150deg,
    var(--naranja-suave) 0%,
    var(--naranja) 42%,
    #e8720a 78%,
    var(--tinta) 130%);
  padding-top: 5.5rem;
}

/* Casas del símbolo de marca flotando de fondo */
/* Capa de lluvia de casas. Se usa en el hero y en la sección de NSE; por eso
   el nombre es genérico y no `hero__…`: se monta sobre cualquier bloque que
   sea `position: relative`. */
.lluvia {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  /* Recorta las casas que salen por abajo, para que la caída termine
     dentro de la sección y no invada la siguiente. */
  overflow: hidden;
}
/* Cada casa viaja dentro de una capa que ocupa el hero completo (`inset: 0`).
   `linear` y no `ease`: una caída constante, sin acelerones. Los retrasos
   negativos arrancan cada casa a media caída, para que al cargar la página
   ya haya varias en el aire en vez de empezar todas desde arriba. */
.casa {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: caerCasa var(--duracion) linear var(--retraso) infinite;
}
.casa svg {
  position: absolute;
  top: 0;
  stroke: #fff;
  animation: girarCasa var(--duracion) linear var(--retraso) infinite;
}
/* Nueve casas repartidas de izquierda a derecha, con duraciones y retrasos
   primos entre sí para que el patrón no se repita a simple vista. Como todas
   derivan hacia la izquierda, las últimas arrancan fuera del borde derecho y
   van entrando en cuadro. */
.casa-1 { --duracion: 26s; --retraso: -4s;  --opacidad-casa: .28; --giro:  24deg; }
.casa-2 { --duracion: 33s; --retraso: -21s; --opacidad-casa: .20; --giro: -18deg; }
.casa-3 { --duracion: 29s; --retraso: -12s; --opacidad-casa: .24; --giro:  30deg; }
.casa-4 { --duracion: 22s; --retraso: -17s; --opacidad-casa: .17; --giro: -26deg; }
.casa-5 { --duracion: 31s; --retraso: -27s; --opacidad-casa: .26; --giro:  20deg; }
.casa-6 { --duracion: 27s; --retraso:  -8s; --opacidad-casa: .22; --giro: -22deg; }
.casa-7 { --duracion: 24s; --retraso: -19s; --opacidad-casa: .18; --giro:  28deg; }
.casa-8 { --duracion: 35s; --retraso: -30s; --opacidad-casa: .25; --giro: -16deg; }
.casa-9 { --duracion: 28s; --retraso:  -2s; --opacidad-casa: .21; --giro:  26deg; }
.casa-1 svg { left: 10%;  width: 190px; height: 190px; }
.casa-2 svg { left: 23%;  width: 95px;  height: 95px;  }
.casa-3 svg { left: 34%;  width: 140px; height: 140px; }
.casa-4 svg { left: 46%;  width: 70px;  height: 70px;  }
.casa-5 svg { left: 57%;  width: 165px; height: 165px; }
.casa-6 svg { left: 69%;  width: 110px; height: 110px; }
.casa-7 svg { left: 80%;  width: 80px;  height: 80px;  }
.casa-8 svg { left: 91%;  width: 150px; height: 150px; }
.casa-9 svg { left: 101%; width: 100px; height: 100px; }

.hero__rejilla {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3.5rem;
  align-items: center;
  padding: var(--esp-6) 0 4.5rem;
}

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  background: rgba(36, 26, 16, 0.2);
  color: #fff;
  font-weight: 800;
  font-size: 0.78125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.5rem 0.875rem;
  border-radius: 100px;
}

.hero h1 {
  color: #fff;
  font-size: clamp(2rem, 4vw, 3.0625rem);
  line-height: 1.05;
  margin-top: var(--esp-3);
  max-width: 12ch;
}
.hero__subtitulo {
  color: rgba(255, 255, 255, 0.95);
  font-size: var(--txt-md);
  line-height: 1.55;
  max-width: 44ch;
  margin-top: var(--esp-3);
  font-weight: 600;
}
.hero__acciones { display: flex; gap: 0.875rem; margin-top: 1.75rem; flex-wrap: wrap; }
.hero__nota {
  margin-top: 1.125rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--txt-sm);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: var(--esp-1);
}

/* --------------------------------------------------------------------------
   7. Diagnóstico NSE (herramienta principal)
   -------------------------------------------------------------------------- */
.diagnostico-envoltura { position: relative; }
/* Marco de casa del manual de identidad, como recurso gráfico de fondo */
.diagnostico__marco {
  position: absolute;
  inset: -26px -22px auto auto;
  width: 120%;
  height: 112%;
  opacity: 0.35;
  z-index: 0;
  pointer-events: none;
}

.diagnostico {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: var(--radio-lg);
  padding: 1.5rem;
  box-shadow: var(--sombra-fuerte);
}
.diagnostico__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-2);
}
.diagnostico__titulo {
  font-family: var(--fuente-titulo);
  font-weight: 800;
  font-size: var(--txt-md);
  color: var(--tinta);
}
.diagnostico__insignia {
  background: var(--crema-calida);
  color: #c85a00;
  font-weight: 800;
  font-size: var(--txt-xs);
  padding: 0.3125rem 0.625rem;
  border-radius: 100px;
  white-space: nowrap;
}

.campo { margin-top: 0.9375rem; }
.campo__etiqueta {
  display: block;
  font-size: 0.71875rem;
  font-weight: 800;
  color: var(--tinta-tenue);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.campo select,
.campo input,
.campo textarea {
  width: 100%;
  margin-top: var(--esp-1);
  border: 2px solid var(--linea-fuerte);
  border-radius: var(--radio);
  padding: 0.8125rem 1rem;
  font-family: var(--fuente-texto);
  font-weight: 700;
  font-size: 0.90625rem;
  color: var(--tinta);
  background: #fff;
  min-height: 48px;
  transition: border-color var(--transicion);
}
/* La flecha propia es sólo del select. En un campo de texto se vería como un
   adorno suelto y el hueco reservado le quitaría espacio a lo que se escribe. */
.campo select {
  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'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23c85a00' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.75rem;
}
.campo textarea { min-height: 64px; resize: vertical; line-height: 1.5; }
.campo input::placeholder,
.campo textarea::placeholder { color: var(--tinta-tenue); font-weight: 600; }
.campo select:hover,
.campo input:hover,
.campo textarea:hover { border-color: var(--naranja); }
.campo input[aria-invalid="true"],
.campo select[aria-invalid="true"],
.campo textarea[aria-invalid="true"] { border-color: #c0392b; }
.campo select:disabled { background-color: var(--crema); color: var(--tinta-tenue); cursor: not-allowed; }

.opciones { display: flex; gap: var(--esp-1); margin-top: var(--esp-1); flex-wrap: wrap; }
.opcion {
  border: 2px solid var(--linea-fuerte);
  border-radius: 100px;
  padding: 0.6875rem 1rem;
  font-family: var(--fuente-texto);
  font-size: var(--txt-sm);
  font-weight: 700;
  color: var(--tinta-suave);
  background: #fff;
  cursor: pointer;
  min-height: 44px;
  transition: all var(--transicion);
}
.opcion:hover { border-color: var(--naranja); color: var(--cafe); }
.opcion[aria-pressed="true"] {
  background: var(--tinta);
  border-color: var(--tinta);
  color: #fff;
}

/* --------------------------------------------------------------------------
   7b. Campos de contacto del formulario
   Son los mismos que pide el formulario actual del sitio: nombre, teléfono,
   correo, estado, servicio de interés, mensaje y las dos casillas.
   -------------------------------------------------------------------------- */
/* Dos campos cortos comparten renglón para que la tarjeta no se alargue de más */
.campo__par { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
/* El fieldset trae borde, relleno y márgenes laterales propios del navegador */
.campo--grupo { border: 0; padding: 0; margin-inline: 0; min-inline-size: 0; }

.opcion-check {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 2px solid var(--linea-fuerte);
  border-radius: 100px;
  padding: 0.5rem 1rem;
  min-height: 44px;
  font-size: var(--txt-sm);
  font-weight: 700;
  color: var(--tinta-suave);
  background: #fff;
  cursor: pointer;
  transition: all var(--transicion);
}
.opcion-check:hover { border-color: var(--naranja); color: var(--cafe); }
.opcion-check input { width: 16px; height: 16px; accent-color: var(--naranja); cursor: pointer; }
/* Si el navegador no soporta :has, la casilla marcada se sigue viendo */
.opcion-check:has(input:checked) {
  background: var(--tinta);
  border-color: var(--tinta);
  color: #fff;
}
.opcion-check:has(input:focus-visible) { outline: 3px solid var(--azul); outline-offset: 2px; }

/* Consentimiento en letra al pie en lugar de casilla: un clic menos y sigue
   quedando por escrito, con el enlace al aviso, antes de enviar. */
.diagnostico__legal {
  margin-top: 0.75rem;
  font-size: var(--txt-xs);
  font-weight: 600;
  color: var(--tinta-tenue);
  text-align: center;
  line-height: 1.45;
}
.diagnostico__legal a { color: var(--azul); text-decoration: underline; }

.diagnostico__estado {
  margin-top: 0.75rem;
  font-size: var(--txt-sm);
  font-weight: 700;
  line-height: 1.45;
}
/* Sin mensaje no ocupa lugar: si no, deja un hueco bajo el botón */
.diagnostico__estado:empty { display: none; }
.diagnostico__estado[data-estado="error"] { color: #c0392b; }
.diagnostico__estado[data-estado="listo"] { color: #1f7a3d; }

/* --------------------------------------------------------------------------
   7c. Calculadora de NSE
   La herramienta salió de la tarjeta del hero y tiene su propia sección. Al
   ancho completo los tres selects caben en un renglón, así que se llena de
   corrido y no como una columna larga.
   -------------------------------------------------------------------------- */
.calculadora { background: var(--crema); }
.calculadora__caja {
  margin-top: var(--esp-4);
  background: #fff;
  border-radius: var(--radio-lg);
  padding: var(--esp-4);
  box-shadow: var(--sombra);
}
.calculadora__campos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.875rem;
}
.calculadora__campos .campo { margin-top: 0; }
.calculadora__pie {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--esp-3);
  flex-wrap: wrap;
  margin-top: var(--esp-3);
}
.calculadora__enviar { min-width: 240px; }
.calculadora .diagnostico__resultado { margin-top: var(--esp-3); }

.diagnostico__enviar {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-top: 1.375rem;
  background: var(--naranja);
  color: #fff;
  font-family: var(--fuente-texto);
  font-weight: 800;
  font-size: 0.9375rem;
  padding: 0.9375rem;
  border: none;
  border-radius: var(--radio);
  cursor: pointer;
  min-height: 48px;
}
.diagnostico__enviar::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 38%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  animation: destello 6s ease-in-out infinite;
}
.diagnostico__enviar:hover { background: #e8720a; }

.diagnostico__resultado {
  margin-top: var(--esp-2);
  background: var(--crema);
  border-radius: var(--radio);
  padding: 0.875rem 1rem;
  font-size: 0.78125rem;
  color: var(--tinta-suave);
  font-weight: 700;
  line-height: 1.5;
}
.diagnostico__resultado strong { color: var(--tinta); }
.diagnostico__resultado[data-estado="listo"] {
  background: var(--azul-fondo);
  color: var(--tinta);
}
.resultado__fila {
  display: flex;
  justify-content: space-between;
  gap: var(--esp-2);
  padding: 0.375rem 0;
  border-bottom: 1px solid rgba(0, 131, 173, 0.15);
}
.resultado__fila:last-of-type { border-bottom: none; }
.resultado__valor { color: var(--azul); font-weight: 800; text-align: right; }
/* Dato reservado: una barra difuminada, no un número tapado. No hay nada que
   descubrir con el inspector porque el número todavía no existe — lo calcula
   una persona. */
.resultado__fila--reservada span:first-child { opacity: .68; }
.resultado__reservado {
  display: inline-block;
  width: 78px;
  height: 13px;
  border-radius: 4px;
  background: linear-gradient(90deg,
    var(--azul) 0 46%,
    rgba(0, 131, 173, .45) 46% 72%,
    var(--azul) 72% 100%);
  filter: blur(3.5px);
  opacity: .7;
}
.resultado__aviso {
  margin-top: var(--esp-1);
  font-size: var(--txt-xs);
  color: var(--tinta-suave);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   8. Franja de datos en movimiento + cifras
   -------------------------------------------------------------------------- */
.franja {
  background: var(--tinta);
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.franja__pista {
  display: flex;
  width: max-content;
  animation: marquesina 26s linear infinite;
  padding: 0.8125rem 0;
}
.franja__item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 800;
  font-size: var(--txt-sm);
  letter-spacing: 0.02em;
  white-space: nowrap;
  padding: 0 1.625rem;
}
.franja__item svg { width: 14px; height: 14px; opacity: 0.7; flex-shrink: 0; }

.cifras { background: var(--tinta); padding: 2.125rem 0; }
.cifras__rejilla { display: grid; grid-template-columns: repeat(3, 1fr); }
.cifras__rejilla--cuatro { grid-template-columns: repeat(4, 1fr); }
/* Columna flex y no sólo `text-align`: así el número y su etiqueta comparten
   el mismo eje aunque tengan anchos muy distintos ("32" contra "1,430,000"). */
.cifra {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: 0 var(--esp-3);
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.cifra:first-child { border-left: none; }
.cifra__numero {
  font-family: var(--fuente-titulo);
  font-weight: 800;
  font-size: 1.875rem;
  color: #ffb45c;
  font-variant-numeric: tabular-nums;
}
.cifra__texto {
  font-size: 0.78125rem;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 700;
  margin-top: 4px;
}

/* --------------------------------------------------------------------------
   9. Encabezados de sección
   -------------------------------------------------------------------------- */
.kicker {
  font-size: 0.78125rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #c85a00;
}
h2 {
  font-size: clamp(1.625rem, 3vw, 2.125rem);
  margin-top: 0.75rem;
  max-width: 22ch;
}
.seccion__intro {
  font-size: var(--txt-base);
  color: var(--tinta-suave);
  font-weight: 600;
  max-width: 58ch;
  margin-top: 0.875rem;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   10. Cómo funciona (ruta con camioneta)
   -------------------------------------------------------------------------- */
.pasos {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  margin-top: var(--esp-8);
}
.ruta__linea {
  position: absolute;
  top: -32px; left: 6%; right: 6%;
  height: 2px;
  background: repeating-linear-gradient(90deg, #f0c896 0 10px, transparent 10px 18px);
}
.ruta__parada {
  position: absolute;
  top: -37px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--naranja);
  transform: translateX(-50%);
}
/* Posición de cada parada sobre la línea. Van en la hoja de estilos —no como
   estilo en línea en el HTML— para que el modo vertical de móvil pueda
   reubicarlas; un estilo en línea le gana siempre a la media query. */
.ruta__parada--1 { left: 16.5%; }
.ruta__parada--2 { left: 50%; }
.ruta__parada--3 { left: 83.5%; }
.ruta__camioneta {
  position: absolute;
  top: -45px;
  color: var(--naranja);
  animation: recorrerRuta 9s ease-in-out infinite;
}

.paso {
  border: 1.5px solid var(--linea);
  border-radius: 16px;
  padding: 1.75rem;
  transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}
.paso:hover {
  transform: translateY(-6px);
  box-shadow: var(--sombra);
  border-color: #ffd9ad;
}
.paso__numero {
  font-family: var(--fuente-titulo);
  font-weight: 800;
  font-size: var(--txt-sm);
  color: var(--naranja);
  background: var(--crema-calida);
  width: 32px; height: 32px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.paso h3 { font-size: 1.125rem; margin-top: 1.125rem; }
.paso p { font-size: 0.875rem; color: var(--tinta-suave); margin-top: var(--esp-1); line-height: 1.55; font-weight: 600; }

/* --------------------------------------------------------------------------
   11. Explicador NSE
   Sección en AZUL corporativo: el manual asigna al azul el 25% del uso de
   color y lo describe como el color de la "profesionalidad y experiencia" —
   exactamente el argumento de esta sección (datos, método, NSE oficial).
   -------------------------------------------------------------------------- */
/* Naranja de marca de fondo, en degradado y no plano, y el azul reservado
   para lo que hay que resaltar: es la inversión de la versión anterior. */
.nse {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg,
    var(--naranja-claro) 0%,
    var(--naranja) 45%,
    #e8720a 100%);
  color: #fff;
}
/* El contenido va por encima de la lluvia de casas */
.nse > .contenedor { position: relative; z-index: 2; }
.nse .kicker { color: var(--tinta); }
.nse h2 { color: #fff; }
.nse .seccion__intro { color: #fff; }
.nse__escala {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  margin-top: var(--esp-4);
  border-radius: var(--radio);
  overflow: hidden;
}
.nse__nivel {
  background: rgba(255, 255, 255, 0.26);
  padding: var(--esp-2) 0.25rem;
  text-align: center;
}
/* Los niveles recomendados se resaltan en azul: sobre el naranja de marca es
   el color que más separa la respuesta del fondo, y el manual le asigna
   justamente el papel de «profesionalidad y experiencia». */
.nse__nivel--activo { background: var(--azul); }
.nse__nivel dt {
  font-family: var(--fuente-titulo);
  font-weight: 800;
  font-size: 0.875rem;
  color: rgba(36, 26, 16, 0.78);
}
.nse__nivel--activo dt { color: #fff; }
.nse__nivel dd {
  margin: 3px 0 0;
  font-size: 0.59375rem;
  color: rgba(36, 26, 16, 0.62);
  font-weight: 700;
}
.nse__nivel--activo dd { color: rgba(255, 255, 255, 0.92); }

.nse__ejemplo {
  margin-top: var(--esp-4);
  background: #fff;
  border-radius: 16px;
  padding: var(--esp-3) 1.75rem;
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  box-shadow: 0 18px 40px -22px rgba(70, 30, 0, 0.55);
}
.nse__ejemplo blockquote { color: var(--tinta); }
/* Foto recortada con la silueta de casa del manual de identidad */
.nse__foto {
  width: 64px; height: 64px;
  flex-shrink: 0;
  clip-path: polygon(50% 0%, 100% 36%, 100% 100%, 0% 100%, 0% 36%);
}
.nse__foto img { width: 100%; height: 100%; object-fit: cover; }
.nse__ejemplo cite {
  display: block;
  font-style: normal;
  font-size: 0.71875rem;
  font-weight: 800;
  color: var(--azul);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.nse__ejemplo blockquote {
  margin: var(--esp-1) 0 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--tinta);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   12. Prueba: video de inteligencia de mercado
   -------------------------------------------------------------------------- */
.prueba__rejilla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--esp-6);
  align-items: center;
  margin-top: var(--esp-6);
}
.prueba__video {
  position: relative;
  border-radius: var(--radio-lg);
  overflow: hidden;
  box-shadow: 0 24px 55px -26px rgba(60, 30, 0, 0.4);
  background: #000;
}
.prueba__video video {
  width: 100%;
  display: block;
  max-height: 440px;
  object-fit: cover;
}
.prueba__lista { display: flex; flex-direction: column; gap: 1.125rem; }
.prueba__item { display: flex; gap: 0.8125rem; }
.prueba__icono {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--azul-fondo);
  color: var(--azul);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.prueba__item h3 { font-size: 0.96875rem; }
.prueba__item p { font-size: 0.84375rem; color: var(--tinta-suave); margin-top: 4px; font-weight: 600; line-height: 1.5; }

/* --------------------------------------------------------------------------
   12b. Ilustraciones de marca
   Vienen sobre un fondo #f5f5f5 propio. Para que no se vean como una estampa
   pegada, se usa `mix-blend-mode: multiply`: el blanco del archivo desaparece
   y la ilustración se funde con el color de la sección que la contiene.
   -------------------------------------------------------------------------- */
.ilustracion {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}
/* Sobre fondos de color, `multiply` oscurecería el dibujo. Ahí se enmarca
   en una tarjeta clara que sí comparte el tono del archivo original. */
.ilustracion-marco {
  background: #f5f5f5;
  border-radius: var(--radio-lg);
  overflow: hidden;
  padding: var(--esp-2);
}
.ilustracion-marco .ilustracion { mix-blend-mode: normal; }

/* --------------------------------------------------------------------------
   12c. Sectores — fotos reales de campaña por giro de negocio
   -------------------------------------------------------------------------- */
.sectores { background: var(--crema); }
.sectores__rejilla {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--esp-3);
  margin-top: var(--esp-6);
}
.sector {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  display: block;
  box-shadow: 0 14px 30px -20px rgba(60, 30, 0, 0.4);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.sector:hover { transform: translateY(-6px); box-shadow: var(--sombra); }
.sector img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.sector:hover img { transform: scale(1.06); }
/* Velo con el café corporativo (12.5% del uso de color según el manual):
   asienta el texto sobre la foto sin apagar el naranja de los uniformes. */
.sector::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(58, 28, 8, 0.82) 0%, rgba(58, 28, 8, 0.15) 55%, transparent 100%);
}
.sector__nombre {
  position: absolute;
  left: var(--esp-2); right: var(--esp-2); bottom: 0.875rem;
  z-index: 2;
  color: #fff;
  font-family: var(--fuente-titulo);
  font-weight: 800;
  font-size: 1.0625rem;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

/* --------------------------------------------------------------------------
   13. Servicios
   -------------------------------------------------------------------------- */
.servicios__rejilla {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--esp-3);
  margin-top: var(--esp-6);
}
.servicio {
  position: relative;
  border: 1.5px solid var(--linea);
  border-radius: 16px;
  padding: 1.625rem 1.375rem;
  transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}
.servicio:hover {
  transform: translateY(-6px);
  box-shadow: var(--sombra);
  border-color: #ffd9ad;
}
/* "Pleca" del manual de identidad (pág. 17) */
.pleca {
  position: absolute;
  top: 16px; right: 0;
  background: var(--tinta);
  color: #fff;
  font-weight: 800;
  font-size: 0.625rem;
  padding: 0.375rem 0.75rem 0.375rem 0.625rem;
  clip-path: polygon(0 0, 86% 0, 100% 50%, 86% 100%, 0 100%);
}
.servicio__icono {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--crema-calida);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--naranja);
}
.servicio h3 { font-size: 1.03125rem; margin-top: var(--esp-2); }
.servicio p { font-size: 0.84375rem; color: var(--tinta-suave); margin-top: var(--esp-1); line-height: 1.5; font-weight: 600; }
.servicio__enlace {
  margin-top: 0.875rem;
  font-size: var(--txt-sm);
  font-weight: 800;
  color: var(--naranja);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.servicio__enlace:hover { color: var(--cafe); }

/* --------------------------------------------------------------------------
   13b. Perifoneo — banda con la camioneta de "Sembrando marca"
   Fondo azul claro (Pantone 2985 C, el 12.5% restante de la paleta).
   -------------------------------------------------------------------------- */
.perifoneo {
  background: linear-gradient(180deg, var(--azul-fondo) 0%, #d3ebf3 100%);
  overflow: hidden;
}
.perifoneo__rejilla {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--esp-6);
  align-items: center;
}
.perifoneo .kicker { color: var(--azul); }
.perifoneo__lista { list-style: none; margin: var(--esp-3) 0 0; padding: 0; }
.perifoneo__lista li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-top: 0.75rem;
  font-size: 0.90625rem;
  font-weight: 600;
  color: var(--tinta-suave);
}
.perifoneo__lista svg { flex-shrink: 0; margin-top: 3px; color: var(--azul); }
/* La camioneta va sin marco: `multiply` funde su fondo con el azul claro. */
.perifoneo__vehiculo { position: relative; }
.perifoneo__vehiculo .ilustracion { transform: scale(1.06); }

/* --------------------------------------------------------------------------
   14. Clientes (marquesina de logos)
   -------------------------------------------------------------------------- */
.clientes { padding-top: 0; }
.clientes__titulo {
  font-size: var(--txt-sm);
  font-weight: 800;
  color: var(--tinta-tenue);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
}
.clientes__marquesina {
  margin-top: var(--esp-4);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.clientes__pista {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquesina 30s linear infinite;
}
.clientes__pista:hover { animation-play-state: paused; }
.clientes__pista img {
  height: 30px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.6;
  transition: opacity var(--transicion), filter var(--transicion);
  /* Separación con padding y no con `gap`: al desplazar la pista un -50%,
     el hueco entre las dos copias no cuenta dentro de ese 50% y el bucle
     daría un brinco visible en cada vuelta. */
  padding: 0 var(--esp-4);
  box-sizing: content-box;
}
.clientes__pista img:hover { opacity: 1; filter: grayscale(0); }

/* --------------------------------------------------------------------------
   15. Equipo
   -------------------------------------------------------------------------- */
.equipo { background: var(--azul-fondo); }
.equipo .kicker { color: var(--cafe); }
.equipo__rejilla {
  list-style: none;
  margin: var(--esp-6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--esp-2);
}
.persona { text-align: center; }
/* Tiras verticales altas: es el formato que da el efecto de banda al bajar.
   La altura va fija y no como `aspect-ratio` a propósito: el ancho de columna
   cambia en cada punto de quiebre y con una proporción las tiras se dispararían
   de alto al pasar de seis columnas a tres. Fija, las seis miden siempre igual. */
.persona img {
  width: 100%;
  height: 1024px;
  object-fit: cover;
  object-position: center 18%;
  border-radius: 14px;
  background: #fff;
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.persona:hover img {
  transform: translateY(-5px);
  box-shadow: 0 16px 30px -18px rgba(0, 60, 80, 0.55);
}
.persona h3 { font-size: 0.90625rem; margin-top: 0.75rem; }
.persona p {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--cafe);
  margin-top: 2px;
  line-height: 1.35;
}


/* --------------------------------------------------------------------------
   16. Llamado final
   -------------------------------------------------------------------------- */
.cierre { padding-bottom: 0; }
.cierre__caja {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, var(--naranja-suave) 0%, var(--naranja) 55%, var(--tinta) 145%);
  border-radius: 28px;
  padding: var(--esp-8);
  text-align: center;
}
.cierre__caja h2 { color: #fff; max-width: 22ch; margin: 0 auto; position: relative; z-index: 1; }
.cierre__caja p {
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--txt-base);
  font-weight: 700;
  margin-top: 0.875rem;
  position: relative;
  z-index: 1;
}
.cierre__acciones {
  display: flex;
  gap: 0.875rem;
  justify-content: center;
  margin-top: 1.75rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

/* La camioneta no cruza la pantalla: rueda sin moverse de la esquina. Lo que
   avanza es el asfalto bajo las llantas — el mismo recurso de las caminadoras
   y de los planos de coche en el cine. Dice «seguimos en la calle» sin
   arrastrar la mirada fuera de los botones. */
.cierre__camioneta {
  position: absolute;
  right: 1.75rem;
  bottom: 1.25rem;
  width: 224px;
  color: #fff;
  opacity: 0.34;
  pointer-events: none;
  z-index: 0;
}
.cierre__camioneta svg { width: 100%; height: auto; }
/* Un ciclo = 24 unidades de asfalto = 90° de llanta. La cruz de rayos se
   repite cada 90°, así que el bucle cierra sin salto visible. */
.cta-asfalto    { animation: asfaltoCorre 0.6s linear infinite; }
.cta-rueda      {
  transform-box: fill-box;   /* el origen del giro es el centro de la llanta */
  transform-origin: center;
  animation: girarRueda 0.6s linear infinite;
}
.cta-carroceria { animation: cabeceo 1.2s ease-in-out infinite; }
/* Folletos saliendo por la parte trasera: uno cada 0.6 s. Los retrasos son
   negativos para que al cargar la página ya haya folletos en el aire y no se
   vea el arranque en seco. */
.cta-folleto {
  transform-box: fill-box;
  transform-origin: center;
  animation: repartirFolleto 1.8s ease-out infinite;
}
.cta-folleto--1 { animation-delay:  0s;   --dx: -34px; --dy: 26px; --rot: -54deg; }
.cta-folleto--2 { animation-delay: -0.6s; --dx: -30px; --dy: 34px; --rot:  42deg; }
.cta-folleto--3 { animation-delay: -1.2s; --dx: -38px; --dy: 18px; --rot: -28deg; }
@keyframes repartirFolleto {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  12%  { opacity: 0.95; }
  62%  { opacity: 0.95; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; }
}
@keyframes asfaltoCorre { from { transform: translateX(0);    } to { transform: translateX(-24px); } }
@keyframes girarRueda   { from { transform: rotate(0deg);     } to { transform: rotate(90deg);     } }
@keyframes cabeceo      { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }

/* --------------------------------------------------------------------------
   17. Pie de página
   -------------------------------------------------------------------------- */
.pie {
  background: var(--tinta);
  color: #fff;
  padding: var(--esp-8) 0 2.25rem;
  margin-top: var(--esp-12);
}
.pie__rejilla {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--esp-6);
}
.pie h2 {
  font-family: var(--fuente-titulo);
  font-size: var(--txt-sm);
  color: #ffb45c;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
  max-width: none;
}
.pie__descripcion {
  margin-top: 1.125rem;
  max-width: 32ch;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 600;
}
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-top: 0.75rem; }
.pie li a {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 600;
}
.pie li a:hover { color: #ffb45c; }
.pie__base {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  margin-top: var(--esp-6);
  padding-top: var(--esp-3);
  display: flex;
  justify-content: space-between;
  gap: var(--esp-2);
  flex-wrap: wrap;
  font-size: 0.78125rem;
  color: rgba(255, 255, 255, 0.55);
}
.pie__base a { color: rgba(255, 255, 255, 0.55); }
.pie__base a:hover { color: #ffb45c; }

/* Botón flotante de WhatsApp */
.whatsapp-flotante {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.4);
  z-index: 90;
  color: #fff;
  transition: transform var(--transicion);
}
.whatsapp-flotante:hover { transform: scale(1.08); color: #fff; }

/* --------------------------------------------------------------------------
   18. Responsivo
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero__rejilla { grid-template-columns: 1fr; gap: var(--esp-4); }
  .hero h1 { max-width: 18ch; }
  .hero__subtitulo { max-width: none; }
  .diagnostico__marco { display: none; }
  .servicios__rejilla,
  .sectores__rejilla { grid-template-columns: repeat(2, 1fr); }
  .prueba__rejilla,
  .perifoneo__rejilla { grid-template-columns: 1fr; gap: var(--esp-4); }
  /* Tres columnas: cada tira es casi el doble de ancha, así que no necesita
     tanto alto para verse igual de esbelta. */
  .equipo__rejilla { grid-template-columns: repeat(3, 1fr); }
  .persona img { height: 620px; }
  .pie__rejilla { grid-template-columns: 1fr 1fr; gap: var(--esp-4); }
}

@media (max-width: 860px) {
  .nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--tinta);
    padding: var(--esp-2);
    border-radius: 0 0 var(--radio) var(--radio);
    box-shadow: var(--sombra);
  }
  .nav.abierto { display: flex; }
  .nav a { padding: 0.875rem var(--esp-2); min-height: 48px; display: flex; align-items: center; }
  .nav a::after { display: none; }
  .nav-movil-btn { display: flex; }
  .cabecera__fila { position: relative; }
  .cabecera .btn { display: none; }

  /* La ruta se vuelve vertical junto a los pasos apilados */
  .pasos { grid-template-columns: 1fr; gap: var(--esp-2); padding-left: 1.375rem; }
  .ruta__linea {
    top: 6px; bottom: 20px; left: 5px; right: auto;
    width: 2px; height: auto;
    background: repeating-linear-gradient(180deg, #f0c896 0 10px, transparent 10px 18px);
  }
  .ruta__parada { top: auto; transform: translateY(-50%); }
  .ruta__parada--1 { left: -1px; top: 25%; }
  .ruta__parada--2 { left: -1px; top: 55%; }
  .ruta__parada--3 { left: -1px; top: 85%; }
  .ruta__camioneta {
    left: -6px; top: 2%;
    transform: rotate(90deg);
    animation: recorrerRutaVertical 9.5s ease-in-out infinite;
  }
}

@media (max-width: 640px) {
  :root { --esp-12: 3.5rem; --esp-8: 2.5rem; }
  .contenedor { padding: 0 var(--esp-3); }
  .hero { padding-top: 4.5rem; }
  .hero__acciones .btn { width: 100%; }
  /* En móvil se deja la mitad de la lluvia, para no competir con el texto */
  .casa-2, .casa-4, .casa-6, .casa-9 { display: none; }
  /* La sección de NSE es baja: en móvil se queda con tres casas */
  .nse .casa-5, .nse .casa-8 { display: none; }
  .casa-1 svg { width: 120px; height: 120px; }
  .casa-3 svg { width: 95px;  height: 95px;  }
  .casa-5 svg { width: 105px; height: 105px; }
  .casa-7 svg { width: 60px;  height: 60px;  }
  .casa-8 svg { width: 90px;  height: 90px;  }

  .cifras__rejilla { gap: var(--esp-1); }
  .cifra { padding: 0 var(--esp-1); border-left: none; }
  .cifra__numero { font-size: 1.25rem; }
  .cifra__texto { font-size: 0.65625rem; }

  /* La escala NSE se desplaza en horizontal en pantallas chicas */
  .nse__escala {
    display: flex;
    overflow-x: auto;
    gap: 3px;
    padding-bottom: 4px;
  }
  .nse__nivel { min-width: 76px; flex-shrink: 0; }

  .cifras__rejilla--cuatro { grid-template-columns: 1fr 1fr; row-gap: var(--esp-2); }
  .cedis__rejilla { grid-template-columns: 1fr; }
  .cedis__lista { grid-template-columns: 1fr 1fr; }

  .nse__ejemplo { flex-direction: column; align-items: flex-start; }
  .nse__foto { width: 100%; height: 150px; clip-path: polygon(50% 0%, 100% 22%, 100% 100%, 0% 100%, 0% 22%); }

  .campo__par { grid-template-columns: 1fr; gap: 0; }
  .calculadora__campos { grid-template-columns: 1fr; gap: 0; }
  .calculadora__campos .campo { margin-top: 0.9375rem; }
  .calculadora__pie { flex-direction: column; align-items: stretch; }
  .calculadora__enviar { width: 100%; }

  .servicios__rejilla { grid-template-columns: 1fr; }
  .equipo__rejilla { grid-template-columns: repeat(2, 1fr); gap: var(--esp-2); }
  .persona img { height: 420px; }
  .sectores__rejilla { grid-template-columns: 1fr 1fr; gap: var(--esp-2); }
  .sector__nombre { font-size: 0.875rem; }
  .pie__rejilla { grid-template-columns: 1fr; }
  /* La camioneta baja de tamaño y el recuadro le reserva sitio abajo, para
     que nunca quede debajo de los botones. */
  .cierre__caja { padding: 2.5rem 1.5rem 6.5rem; border-radius: 20px; }
  .cierre__camioneta { width: 148px; right: 1rem; bottom: 1rem; opacity: 0.26; }
}

/* ==========================================================================
   19. Páginas interiores (cobertura, servicios…)
   ========================================================================== */

/* En páginas interiores el header no flota sobre un hero: va sólido desde
   el inicio, con el color de marca. */
.cabecera--solida {
  position: sticky;
  background: var(--tinta);
  padding: 0.75rem 0;
}

.pagina-interior {
  background: linear-gradient(150deg, var(--naranja-suave) 0%, var(--naranja) 55%, #e8720a 120%);
  padding: var(--esp-6) 0 var(--esp-8);
  color: #fff;
}
.pagina-interior h1 {
  color: #fff;
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  margin-top: var(--esp-2);
  max-width: 18ch;
}
.pagina-interior__intro {
  color: rgba(255, 255, 255, 0.95);
  font-size: var(--txt-md);
  font-weight: 600;
  max-width: 52ch;
  margin-top: var(--esp-2);
  line-height: 1.55;
}

/* Migas de pan */
.migas ol {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: var(--txt-sm);
  font-weight: 700;
}
.migas li { color: rgba(255, 255, 255, 0.75); }
.migas li + li::before { content: "/"; margin-right: 0.5rem; opacity: 0.6; }
.migas a { color: rgba(255, 255, 255, 0.9); }
.migas a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   Cobertura: mapa + panel
   -------------------------------------------------------------------------- */
.cobertura__rejilla {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: var(--esp-4);
  align-items: start;
  margin-top: var(--esp-4);
}

.mapa {
  background: var(--crema);
  border-radius: var(--radio-lg);
  padding: var(--esp-3);
}
#mapa-mexico { width: 100%; height: auto; display: block; }

/* Naranja corporativo, como en el mapa original del sitio. */
.mapa__estado {
  fill: var(--naranja);
  stroke: #fff;
  stroke-width: 1.2;
  stroke-linejoin: round;
  cursor: pointer;
  /* Sólo se anima el relleno. Animar `all` sobre 32 polígonos con cientos
     de vértices cada uno es lo que hacía que el mapa se sintiera trabado. */
  transition: fill 0.15s linear;
}
.mapa__estado:hover { fill: var(--cafe); }
.mapa__estado--activo { fill: var(--tinta); }
/* Estados con servicio declarado pero sin ciudades confirmadas */
.mapa__estado--parcial { fill: #ffc584; }
.mapa__estado--parcial:hover { fill: var(--cafe); }

/* El foco del navegador dibuja un rectángulo alrededor del polígono —
   se ve como un cuadro suelto encima del mapa. Se sustituye por un
   contorno que sigue la silueta real del estado. */
.mapa__estado:focus { outline: none; }
.mapa__estado:focus-visible {
  outline: none;
  stroke: var(--tinta);
  stroke-width: 3;
}

.mapa__leyenda {
  list-style: none;
  margin: var(--esp-2) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
  font-size: var(--txt-sm);
  font-weight: 700;
  color: var(--tinta-suave);
}
.mapa__leyenda li { display: flex; align-items: center; gap: 0.5rem; }
.punto { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.punto--activo { background: var(--naranja); }
.punto--parcial { background: #ffc584; }

.panel {
  background: #fff;
  border: 1.5px solid var(--linea);
  border-radius: var(--radio-lg);
  padding: var(--esp-3);
  position: sticky;
  top: 90px;
}
/* Sin estado elegido el panel es un renglón, no un bloque vacío: antes
   reservaba 280 px de alto para un icono y una línea de texto. */
.panel__vacio {
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  color: var(--tinta-tenue);
}
.panel__vacio svg { width: 21px; height: 21px; flex-shrink: 0; }
.panel__vacio p { font-size: 0.84375rem; font-weight: 600; line-height: 1.4; }
.panel__titulo { font-size: 1.375rem; }
.panel__resumen {
  font-size: var(--txt-sm);
  font-weight: 800;
  color: var(--azul);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 0.25rem;
}
.panel__nota { font-size: 0.875rem; color: var(--tinta-suave); font-weight: 600; margin-top: var(--esp-2); }
.panel__servicio { margin-top: var(--esp-3); }
.panel__servicio h3 {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cafe);
}
.panel__ciudades { list-style: none; margin: 0.625rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.panel__ciudades li {
  background: var(--crema-calida);
  color: var(--tinta);
  font-size: var(--txt-sm);
  font-weight: 700;
  padding: 0.375rem 0.75rem;
  border-radius: 100px;
}
.panel__ciudades li.es-resaltada { background: var(--naranja); color: #fff; }
.panel__cta { width: 100%; margin-top: var(--esp-3); }

/* Buscador */
.buscador { max-width: 34rem; }
.buscador__etiqueta {
  display: block;
  font-size: 0.71875rem;
  font-weight: 800;
  color: var(--tinta-tenue);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.buscador__campo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: var(--esp-1);
  border: 2px solid var(--linea-fuerte);
  border-radius: var(--radio);
  padding: 0 1rem;
  background: #fff;
  color: var(--tinta-tenue);
  transition: border-color var(--transicion);
}
.buscador__campo:focus-within { border-color: var(--naranja); }
.buscador__campo input {
  flex: 1;
  border: none;
  outline: none;
  padding: 0.875rem 0;
  font-family: var(--fuente-texto);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--tinta);
  background: transparent;
  min-height: 48px;
}
.buscador__ayuda { margin-top: var(--esp-1); font-size: var(--txt-sm); font-weight: 700; min-height: 1.25rem; }

/* Otras coincidencias: «juárez» y «mérida» aparecen en más de un lugar */
.buscador__sugerencias {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.5rem;
}
.buscador__sugerencias[hidden] { display: none; }
.buscador__otros {
  font-size: var(--txt-xs);
  font-weight: 800;
  color: var(--tinta-tenue);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 0.125rem;
}
.buscador__sugerencia {
  font-family: var(--fuente-texto);
  font-size: var(--txt-xs);
  font-weight: 700;
  color: var(--cafe);
  background: var(--crema-calida);
  border: 1.5px solid var(--linea-fuerte);
  border-radius: 100px;
  padding: 0.3125rem 0.6875rem;
  cursor: pointer;
  transition: all var(--transicion);
}
.buscador__sugerencia:hover {
  border-color: var(--naranja);
  background: #fff;
  color: var(--tinta);
}
.buscador__ayuda--si { color: var(--good, #2f6b3a); }
.buscador__ayuda--no { color: var(--cafe); }

/* --------------------------------------------------------------------------
   Centros de distribución
   Reemplaza el mapa incrustado de Google del sitio actual: mismos datos —los
   26 CEDIS con sus coordenadas reales— pero dibujados sobre nuestra propia
   silueta. Sin iframe, sin cookies de terceros y con la lista en texto, que
   es lo que un buscador puede leer.
   -------------------------------------------------------------------------- */
.cedis { background: var(--crema); }
.cedis__rejilla {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--esp-4);
  /* Arriba y no centrado: la lista es mucho más alta que el mapa y, centrado,
     dejaba un hueco enorme sobre el mapa. */
  align-items: start;
  margin-top: var(--esp-4);
}
.cedis__mapa {
  background: #fff;
  border: 1.5px solid var(--linea);
  border-radius: var(--radio-lg);
  padding: var(--esp-2);
}
.cedis__mapa svg { width: 100%; height: auto; display: block; }

/* La silueta va apagada pero no invisible: tiene que leerse la forma del país
   sin competir con los puntos, que son el dato de esta sección. */
.cedis__silueta polygon {
  fill: #f6e3cd;
  stroke: #fff;
  stroke-width: 1.2;
  pointer-events: none;
}

.cedis__marca { cursor: default; }
.cedis__halo {
  fill: var(--naranja);
  opacity: 0.16;
  transition: opacity var(--transicion), r var(--transicion);
}
.cedis__punto {
  fill: var(--naranja);
  stroke: #fff;
  stroke-width: 1.5;
  transition: fill var(--transicion);
}
/* El corporativo se distingue por color, no sólo por tamaño */
.cedis__marca--sede .cedis__punto { fill: var(--tinta); }
.cedis__marca--sede .cedis__halo { fill: var(--tinta); opacity: 0.2; }

.cedis__marca:hover .cedis__halo,
.cedis__marca.esta-activo .cedis__halo { opacity: 0.42; }
.cedis__marca:hover .cedis__punto,
.cedis__marca.esta-activo .cedis__punto { fill: var(--cafe); }

.cedis__conteo {
  font-size: var(--txt-sm);
  font-weight: 800;
  color: var(--cafe);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.4;
}
.cedis__lista {
  list-style: none;
  margin: var(--esp-2) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.cedis__item {
  display: flex;
  flex-direction: column;
  padding: 0.4375rem 0.625rem;
  border-radius: 8px;
  transition: background var(--transicion);
}
.cedis__item.esta-activo { background: var(--crema-calida); }
.cedis__nombre { font-size: 0.84375rem; font-weight: 800; color: var(--tinta); line-height: 1.3; }
.cedis__estado { font-size: 0.6875rem; font-weight: 700; color: var(--tinta-tenue); }
/* El corporativo lleva un punto oscuro delante, igual que en el mapa */
.cedis__item--sede .cedis__nombre::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--tinta);
  margin-right: 6px;
  vertical-align: middle;
}

/* Listado completo */
.listado { background: var(--crema); }
.listado__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--esp-3);
  margin-top: var(--esp-4);
}
.listado__estado {
  background: #fff;
  border-radius: var(--radio);
  padding: var(--esp-2) 1.125rem var(--esp-2);
}
.listado__estado h3 { font-size: 0.9375rem; color: var(--azul); }
.listado__estado ul { list-style: none; margin: 0.625rem 0 0; padding: 0; }
.listado__estado li {
  font-size: var(--txt-sm);
  font-weight: 600;
  color: var(--tinta);
  padding: 0.3125rem 0;
  border-bottom: 1px solid var(--linea);
}
.listado__estado li:last-child { border-bottom: none; }
.listado__svc { display: block; font-size: 0.6875rem; color: var(--tinta-tenue); font-weight: 700; }
.listado__cargando { color: var(--tinta-tenue); font-weight: 600; }

@media (max-width: 900px) {
  .cobertura__rejilla { grid-template-columns: 1fr; }
  .panel { position: static; min-height: 0; }
  .panel__vacio { min-height: 160px; }
}
.listado__consultar {
  font-size: var(--txt-sm);
  font-weight: 600;
  color: var(--tinta-suave);
  margin-top: 0.625rem;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   20. Enlace destacado del menú (Cobertura)
   Es la página que responde «¿llegan a mi ciudad?», la duda que más frena
   una cotización — por eso se distingue del resto del menú.
   -------------------------------------------------------------------------- */
.nav__destacado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  padding: 7px 14px;
  border-radius: 100px;
  transition: background var(--transicion), border-color var(--transicion);
}
.nav__destacado::after { display: none; }  /* sin el subrayado del resto del menú */
.nav__destacado:hover { background: rgba(255, 255, 255, 0.28); border-color: #fff; color: #fff; }
.nav__destacado[aria-current="page"] { background: #fff; color: var(--naranja); border-color: #fff; }
.nav__destacado svg { flex-shrink: 0; }

@media (max-width: 860px) {
  .nav__destacado {
    justify-content: flex-start;
    border-radius: var(--radio);
    margin: 6px 0;
  }
}

/* Enlace a la página de cobertura, bajo las cifras del hero */
.cifras__enlace { text-align: center; margin-top: var(--esp-3); }
.cifras__enlace a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #ffb45c;
  font-weight: 800;
  font-size: 0.90625rem;
  border-bottom: 2px solid rgba(255, 180, 92, 0.4);
  padding-bottom: 3px;
  transition: color var(--transicion), border-color var(--transicion);
}
.cifras__enlace a:hover { color: #fff; border-color: #fff; }