/* ═══════════════════════════════════════════════════════════════════════
   BLUESPOT — Hoja de estilos
   Limpieza de exteriores en altura con drones · Guadalajara, Jalisco

   LENGUAJE VISUAL
   Bluespot es la rama en altura de Greenspot, así que hereda su misma
   identidad: editorial, sobria, con mucho aire.
     · Tipografía: Archivo (títulos y etiquetas) + Hanken Grotesk (texto)
     · Títulos grandes pero DELGADOS (peso 400-500), nunca en negritas
     · Etiquetas en MAYÚSCULAS muy espaciadas, precedidas de una rayita
     · Botones de contorno delgado, en píldora, en mayúsculas espaciadas
     · Fondo crema (#f1ede2), no blanco. Tinta navy (#26334a), no negro
     · Donde Greenspot pone verde y terracota, Bluespot pone azul agua

   ORDEN DEL ARCHIVO
   1.  Variables de marca (tokens)
   2.  Base y utilidades
   3.  Botones
   4.  Logo
   5.  Header y navegación
   6.  Hero (portada)
   7.  Secciones, etiquetas y títulos
   8.  Tarjetas de servicio
   9.  Comparación (dron vs. tradicional)
   10. Banda de números
   11. Pasos (cómo funciona)
   12. Sellos de confianza
   13. Galería
   14. Formulario de cotización
   15. Footer
   16. Botón flotante de WhatsApp
   17. Animaciones al hacer scroll
   18. Breakpoints (tablet y escritorio)

   Está escrito MOBILE-FIRST: todo lo de arriba es para celular y al final
   están los @media que lo agrandan para tablet y computadora.
   ═══════════════════════════════════════════════════════════════════════ */


/* ════ 1. VARIABLES DE MARCA ════════════════════════════════════════════ */
:root {
  /* Colores — los tres primeros son EXACTAMENTE los de Greenspot */
  --tinta: #26334a;          /* navy pizarra: texto y secciones oscuras */
  --tinta-hondo: #1B2537;    /* footer, aún más oscuro */
  --crema: #F1EDE2;          /* fondo principal (no blanco) */
  --crema-2: #EAE5D6;        /* fondo alterno, un tono más cálido */
  --blanco: #FFFFFF;

  /* Azul agua: donde Greenspot usa verde y terracota, Bluespot usa esto.
     Profundo, no pastel: en texto e insignias el azul claro se veía débil. */
  --agua: #2A6B87;           /* acento principal */
  --agua-claro: #6FB4CE;     /* acento sobre fondo oscuro */
  --agua-vivo: #22B0F0;      /* la gota del logo, para que brille */
  --agua-hondo: #1E4F66;     /* estados hover */

  --verde-wa: #25D366;       /* verde oficial de WhatsApp */
  --rojo: #B65138;           /* errores — es la terracota de Greenspot */

  /* Texto */
  --texto-suave: rgba(38, 51, 74, .62);
  --texto-tenue: rgba(38, 51, 74, .42);
  --texto-claro: rgba(241, 237, 226, .72);
  --texto-claro-tenue: rgba(241, 237, 226, .48);

  /* Líneas — casi todo el diseño se arma con rayitas finas */
  --linea: rgba(38, 51, 74, .16);
  --linea-fuerte: rgba(38, 51, 74, .3);
  --linea-clara: rgba(241, 237, 226, .2);
  --linea-clara-fuerte: rgba(241, 237, 226, .38);

  /* Tipografía */
  --fuente-titulo: 'Archivo', system-ui, sans-serif;
  --fuente-texto: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  /* Espaciado entre letras de las etiquetas y botones */
  --track-etiqueta: .32em;
  --track-boton: .24em;
  --track-logo: .19em;

  /* Aire a los lados de cada línea divisoria vertical.
     La 1a columna va pegada a la izquierda y la última pegada a la derecha,
     para que todo cuadre con el título de la sección. */
  --gutter: 30px;

  /* Esquinas: casi rectas. Greenspot usa .625rem */
  --radio: 10px;
  --radio-sm: 4px;
  --radio-pill: 999px;

  /* Sombras: mínimas, casi imperceptibles */
  --sombra-sm: 0 1px 3px rgba(38, 51, 74, .05);
  --sombra: 0 10px 34px rgba(38, 51, 74, .09);

  /* Medidas */
  --ancho-max: 1240px;
  --alto-header: 68px;
  --transicion: .45s cubic-bezier(.22, .61, .36, 1);
}


/* ════ 2. BASE Y UTILIDADES ═════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Deja aire para que el header fijo no tape los títulos al navegar */
  scroll-padding-top: calc(var(--alto-header) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--fuente-texto);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--tinta);
  background: var(--crema);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Bloquea el scroll cuando el menú de celular está abierto */
body.menu-abierto { overflow: hidden; }

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }

h1, h2, h3 {
  font-family: var(--fuente-titulo);
  font-weight: 500;          /* nunca negritas: así es Greenspot */
  line-height: 1.06;
  letter-spacing: -.015em;
  margin: 0;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin: 0 auto;
  /* Solo los lados, nunca en atajo: hay elementos que son .contenedor Y
     además tienen su propio padding vertical (por ejemplo el footer).
     Con el atajo "padding: 0 20px" se los borraría. */
  padding-left: 22px;
  padding-right: 22px;
}

.centro { text-align: center; }
.texto-cian { color: var(--agua); }
.seccion--oscura .texto-cian { color: var(--agua-claro); }

/* Contorno de foco visible para quien navega con teclado */
:focus-visible {
  outline: 2px solid var(--agua);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Enlace "saltar al contenido": oculto hasta recibir foco */
.salto-contenido {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 999;
  padding: 14px 22px;
  font-family: var(--fuente-titulo);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--track-boton);
  text-transform: uppercase;
  background: var(--tinta);
  color: var(--crema);
  transition: top var(--transicion);
}
.salto-contenido:focus { top: 0; }

/* Visible para lectores de pantalla, invisible en pantalla */
.oculto-visual {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Íconos SVG: heredan el color del texto con currentColor.
   Trazo fino (1.3) para que combinen con la tipografía delgada. */
.ico {
  width: 24px; height: 24px;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  flex-shrink: 0;
}
.ico--xs { width: 14px; height: 14px; stroke-width: 1.8; }
.ico--sm { width: 18px; height: 18px; stroke-width: 1.5; }
.ico--xl { width: 40px; height: 40px; }
/* Los íconos de WhatsApp son de relleno, no de trazo */
.ico[fill="currentColor"] { stroke: none; fill: currentColor; }


/* ════ 3. BOTONES ═══════════════════════════════════════════════════════ */
/* Todos comparten el mismo tratamiento: píldora, contorno de 1 px,
   texto en mayúsculas muy espaciadas. Igual que Greenspot. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  font-family: var(--fuente-titulo);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: var(--track-boton);
  text-transform: uppercase;
  line-height: 1;
  background: transparent;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-pill);
  color: var(--tinta);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transicion), color var(--transicion),
              border-color var(--transicion), transform var(--transicion);
}
.btn:hover { background: var(--tinta); color: var(--crema); border-color: var(--tinta); }

.btn--sm { padding: 11px 20px; font-size: 10px; }
.btn--lg { padding: 17px 34px; font-size: 11px; }
.btn--bloque { display: flex; width: 100%; }

/* Relleno azul agua: la acción principal, para que destaque */
.btn--cian {
  background: var(--agua);
  border-color: var(--agua);
  color: var(--crema);
}
.btn--cian:hover {
  background: var(--agua-hondo);
  border-color: var(--agua-hondo);
  color: var(--crema);
}

/* Relleno tinta: acción secundaria sobre fondo claro */
.btn--azul {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--crema);
}
.btn--azul:hover { background: transparent; color: var(--tinta); }

/* Fantasma: contorno claro sobre imagen o fondo oscuro */
.btn--fantasma {
  border-color: var(--linea-clara-fuerte);
  color: var(--crema);
}
.btn--fantasma:hover { background: var(--crema); color: var(--tinta); border-color: var(--crema); }

/* Verde oficial de WhatsApp: se conserva por reconocimiento */
.btn--whatsapp {
  background: var(--verde-wa);
  border-color: var(--verde-wa);
  color: #04301A;
}
.btn--whatsapp:hover { background: #1FBF5B; border-color: #1FBF5B; color: #04301A; }

/* Estado de "enviando…" del formulario */
.btn[disabled] { opacity: .55; cursor: progress; }


/* ════ 4. LOGO ══════════════════════════════════════════════════════════ */
/* Anillos concéntricos (onda de agua = giro de hélice) + wordmark en
   mayúsculas espaciadas. Misma construcción que el helecho de Greenspot. */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--tinta);
}

.logo__simbolo {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  transition: transform 1.1s cubic-bezier(.22, .61, .36, 1);
}
/* Al pasar el cursor, los anillos giran: el agua se mueve */
.logo:hover .logo__simbolo { transform: rotate(120deg); }

.logo__gota { fill: var(--agua); }

.logo__texto {
  font-family: var(--fuente-titulo);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: var(--track-logo);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

.logo--footer { color: var(--crema); }
.logo--footer .logo__simbolo { width: 36px; height: 36px; }
.logo--footer .logo__texto { font-size: 18px; }
.logo--footer .logo__gota { fill: var(--agua-vivo); }

/* Sobre el hero (header transparente) el logo va en crema */
.header--transparente .logo { color: var(--crema); }
.header--transparente .logo__gota { fill: var(--agua-vivo); }


/* ════ 5. HEADER Y NAVEGACIÓN ═══════════════════════════════════════════ */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--alto-header);
  background: rgba(241, 237, 226, .9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linea);
  transition: background var(--transicion), border-color var(--transicion);
}

/* Estado inicial: sobre el hero, transparente.
   Lleva un degradado oscuro muy sutil de arriba hacia abajo. No se nota,
   pero garantiza que el logo y el menú se lean aunque la foto de portada
   tenga el cielo claro justo en esa zona. */
.header--transparente {
  /* Más firme que antes: el cielo del video es brillante y el texto crema
     necesita fondo oscuro garantizado en toda la franja del header */
  background: linear-gradient(180deg, rgba(27, 37, 55, .88) 0%, rgba(27, 37, 55, .62) 68%, rgba(27, 37, 55, 0) 100%);
  border-color: transparent;
  backdrop-filter: none;
}

.header__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

/* ── Menú en celular: panel deslizante desde arriba ── */
.nav {
  position: fixed;
  inset: var(--alto-header) 0 auto 0;
  display: flex;
  flex-direction: column;
  padding: 10px 22px 30px;
  background: var(--crema);
  border-bottom: 1px solid var(--linea);
  transform: translateY(-120%);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--transicion), opacity var(--transicion),
              visibility var(--transicion);
}
.nav.abierto { transform: translateY(0); opacity: 1; visibility: visible; }

.nav__lista { display: flex; flex-direction: column; }

.nav__enlace {
  display: block;
  padding: 17px 2px;
  font-family: var(--fuente-titulo);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  color: var(--tinta);
  border-bottom: 1px solid var(--linea);
  transition: color var(--transicion);
}
.nav__enlace:hover { color: var(--agua); }

.nav__wa { margin-top: 24px; align-self: stretch; }

/* ── Botón hamburguesa ── */
.hamburguesa {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px; height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.hamburguesa span {
  display: block;
  height: 1.5px;
  width: 22px;
  margin: 0 auto;
  background: var(--tinta);
  transition: transform var(--transicion), opacity var(--transicion),
              background var(--transicion);
}
.header--transparente .hamburguesa span { background: var(--crema); }

/* Convierte la hamburguesa en una "X" cuando el menú está abierto */
.hamburguesa.activa span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.hamburguesa.activa span:nth-child(2) { opacity: 0; }
.hamburguesa.activa span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }


/* ════ 6. PORTADA ═══════════════════════════════════════════════════════
   La portada es el vuelo continuo en video (toma-ia/scrub-engine.js);
   el motor inyecta sus propios estilos — aquí solo va el tema de marca.
   (La portada CSS anterior sigue en toma/, conservada en git.)
   ═══════════════════════════════════════════════════════════════════════ */
/* El motor pone sus valores por defecto EN .sw-root, así que hay que
   sobreescribir ahí mismo (en el contenedor padre no aplican). La tinta
   es el color del texto Y el fondo del botón primario: va oscura. */
.toma-ia { background: #E9F1F7; }
.toma-ia .sw-root {
  --sw-bg: #E9F1F7;                      /* cielo brumoso: sin destello oscuro al cargar */
  --sw-ink: var(--tinta);
  --sw-ink-soft: rgba(38, 51, 74, .72);
  --sw-accent: var(--agua-vivo);
  --sw-font-display: 'Archivo', sans-serif;
  --sw-font-body: 'Hanken Grotesk', sans-serif;
}
/* El motor vive en @layer sw y nuestras reglas globales de <a> (sin capa)
   le ganan al color de sus botones — se restaura aquí explícitamente. */
.toma-ia .sw-btn--primary { color: #fff; }
.toma-ia .sw-btn--primary:hover { color: #fff; }
/* El sitio ya tiene su propia barra de progreso arriba: fuera la del motor */
.toma-ia .sw-scrollbar { display: none; }

/* Velo lateral de escritorio más firme que el del motor: el copy siempre
   sobre fondo lavado, sin importar qué tan oscuro venga el video detrás. */
.toma-ia .sw-copylayer::before {
  width: min(62vw, 840px);
  background: linear-gradient(90deg, var(--sw-bg, #E9F1F7) 0%,
    rgba(233, 241, 247, .92) 30%, rgba(233, 241, 247, .55) 62%, transparent 100%);
}

/* ── El copy de las escenas habla el mismo idioma que el resto del sitio ──
   El motor trae su propio diseño (bold, otra retícula); aquí se alinea al
   sistema Bluespot: eyebrows en mono, títulos Archivo 400 (nunca bold),
   chips de borde fino y el texto anclado a la retícula de 1240px. */
.toma-ia .sw-copy {
  left: calc(max((100vw - var(--ancho-max)) / 2, 0px) + 22px);
}
.toma-ia .sw-copy__num {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400; font-size: 10.5px; letter-spacing: .18em;
  color: #4A5D74;   /* sólido: la versión translúcida fallaba AA sobre la toma */
}
/* Eyebrow como las etiquetas del sitio: tinta oscura con su rayita delante.
   Nada de azul claro ni halos — limpio y con autoridad. */
.toma-ia .sw-copy__eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--fuente-titulo);
  font-weight: 500; font-size: 10px; letter-spacing: var(--track-etiqueta);
  color: var(--tinta);
  margin-top: 16px;
}
.toma-ia .sw-copy__eyebrow::before {
  content: ''; width: 26px; height: 1px; flex-shrink: 0;
  background: rgba(38, 51, 74, .45);
}
.toma-ia .sw-copy__title {
  font-weight: 400; letter-spacing: -.025em;
  max-width: 16ch;
}
.toma-ia .sw-copy__body { font-weight: 300; }
/* Las escenas no llevan etiquetas de datos: el copy queda en eyebrow,
   título y una línea — los datos viven en la banda de números del sitio */

/* La escena de cierre va centrada: título, texto y el único botón
   (Cotizar mi edificio), como final de página. Sin transform horizontal:
   el motor escribe transform inline cada cuadro y lo pisaría. */
.toma-ia .sw-copy:last-child {
  left: 0; right: 0;
  margin-left: auto; margin-right: auto;
  width: min(92vw, 600px);
  text-align: center;
}
/* El velo del motor vive a la izquierda; el cierre centrado necesita el
   suyo: una bruma radial suave detrás del texto */
.toma-ia .sw-copy:last-child::before {
  content: ''; position: absolute; z-index: -1;
  inset: -95% -75%;
  background: radial-gradient(ellipse 52% 52% at 50% 50%,
    rgba(233, 241, 247, .92), rgba(233, 241, 247, .6) 38%,
    rgba(233, 241, 247, .25) 62%, transparent 82%);
}
.toma-ia .sw-copy:last-child .sw-copy__eyebrow { justify-content: center; }
.toma-ia .sw-copy:last-child .sw-copy__title {
  max-width: none;
  margin-left: auto; margin-right: auto;
}
.toma-ia .sw-copy:last-child .sw-copy__body {
  margin-left: auto; margin-right: auto;
}
.toma-ia .sw-copy:last-child .sw-copy__cta { justify-content: center; }
@media (max-width: 699px) {
  /* Los puntos de ruta se enciman con la escena en pantallas chicas,
     y el contador 02/04 es ruido en una pantalla tan compacta */
  .toma-ia .sw-route { display: none; }
  .toma-ia .sw-copy__num { display: none; }
  /* El aviso "haz scroll" vive abajo, justo donde en celular va el copy:
     se encimaban. El gesto de scroll en celular es obvio; fuera el aviso */
  .toma-ia .sw-hint { display: none; }
  .toma-ia .sw-copy { left: 22px; right: 22px; }
  /* El velo del motor es lateral (para escritorio); en celular el copy
     vive abajo — velo inferior para que el texto lea sobre cualquier toma */
  .toma-ia .sw-copylayer::before {
    width: 100%;
    background: linear-gradient(180deg, transparent 20%,
      rgba(233, 241, 247, .75) 38%, rgba(233, 241, 247, .96) 52%,
      rgba(233, 241, 247, .98));
  }
}

/* ════ 7. SECCIONES, ETIQUETAS Y TÍTULOS ═══════════════════════════════ */
.seccion { padding: 72px 0; background: var(--crema); }
.seccion--gris   { background: var(--crema-2); }
.seccion--oscura { background: var(--tinta); color: var(--crema); }

.seccion__encabezado {
  max-width: 740px;
  margin: 0 0 46px;
}

/* Etiqueta pequeña arriba del título, con rayita delante */
.etiqueta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
  font-family: var(--fuente-titulo);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  color: var(--texto-suave);
}
.etiqueta::before {
  content: '';
  width: 40px;
  height: 1px;
  background: var(--linea-fuerte);
  flex-shrink: 0;
}
.etiqueta--clara { color: rgba(241, 237, 226, .85); }
.etiqueta--clara::before { background: var(--linea-clara-fuerte); }

.titulo-2 {
  font-size: clamp(1.85rem, 8vw, 2.9rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.025em;
  margin-bottom: 20px;
  max-width: 16ch;
}

.seccion__intro {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--texto-suave);
  max-width: 46ch;
}
.seccion__intro--clara { color: var(--texto-claro); }


/* ════ 8. TARJETAS DE SERVICIO ══════════════════════════════════════════ */
/* Sin caja ni sombra: solo una rayita arriba, como en una revista */
.grid-servicios {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--linea);
}

.tarjeta {
  padding: 30px 0;
  border-bottom: 1px solid var(--linea);
  /* El hover mueve con transform, no con padding: si moviera el padding
     desalinearía la columna respecto al título de la sección. */
  transition: transform var(--transicion);
}
.tarjeta:hover { transform: translateX(8px); }

.tarjeta__ico {
  display: block;
  margin-bottom: 20px;
  color: var(--agua);
}
.tarjeta__ico .ico { width: 30px; height: 30px; }

.tarjeta__titulo {
  font-size: 1.28rem;
  font-weight: 400;
  margin-bottom: 10px;
}
.tarjeta__texto {
  color: var(--texto-suave);
  font-size: .96rem;
  font-weight: 300;
  max-width: 34ch;
}


/* ════ 9. COMPARACIÓN (dron vs. tradicional) ════════════════════════════ */
.comparacion {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: start;
}

.comparacion__col {
  position: relative;
  padding: 34px 0;
  border-top: 1px solid var(--linea-clara);
}
/* En celular la insignia sí va en el flujo: no hay espacio a la derecha */
/* La columna de Bluespot resalta con una línea azul y fondo apenas visible */
.comparacion__col--destacada {
  border-top: 1px solid var(--agua-claro);
}

.comparacion__cabeza {
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--linea-clara);
}
.comparacion__titulo {
  font-size: 1.75rem;
  font-weight: 400;
  margin-bottom: 8px;
}
.comparacion__sub {
  font-family: var(--fuente-titulo);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  color: var(--texto-claro-tenue);
}
.comparacion__col--destacada .comparacion__sub { color: var(--agua-claro); }

/* Listas con palomita o tache */
.lista-check { display: flex; flex-direction: column; gap: 18px; }
.lista-check li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: .96rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--texto-claro);
}
.lista-check li strong {
  font-family: var(--fuente-titulo);
  font-weight: 500;
  color: var(--crema);
}
.lista-check .ico { margin-top: 3px; color: var(--agua-claro); }
.lista-check--no .ico { color: rgba(241, 237, 226, .32); }
.lista-check--no li { color: var(--texto-claro-tenue); }
.lista-check--no li strong { color: rgba(241, 237, 226, .62); }


/* ════ 10. BANDA DE NÚMEROS ═════════════════════════════════════════════ */
.numeros {
  padding: 62px 0;
  background: var(--crema-2);
  color: var(--tinta);
}

.grid-numeros {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--linea);
}

.numero {
  padding: 26px 0;
  border-bottom: 1px solid var(--linea);
}

.numero__valor {
  font-family: var(--fuente-titulo);
  font-size: clamp(2.1rem, 9vw, 2.9rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.03em;
  margin-bottom: 10px;
  color: var(--agua);
}
.numero__etiqueta {
  font-family: var(--fuente-titulo);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--texto-suave);
}


/* ════ 11. PASOS (CÓMO FUNCIONA) ════════════════════════════════════════ */
.grid-pasos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-bottom: 46px;
  border-top: 1px solid var(--linea);
}

.paso {
  position: relative;
  padding: 32px 0;
  border-bottom: 1px solid var(--linea);
}

/* Número grande y delgado, como en una revista */
.paso__numero {
  display: block;
  margin-bottom: 18px;
  font-family: var(--fuente-titulo);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--track-etiqueta);
  color: var(--texto-tenue);
}
.paso__numero::before { content: '0'; }

.paso__ico {
  display: block;
  margin-bottom: 18px;
  color: var(--agua);
}
.paso__ico .ico { width: 30px; height: 30px; }

.paso__titulo { font-size: 1.35rem; font-weight: 400; margin-bottom: 10px; }
.paso__texto {
  color: var(--texto-suave);
  font-size: .96rem;
  font-weight: 300;
  max-width: 36ch;
}


/* ════ 12. SELLOS DE CONFIANZA ══════════════════════════════════════════ */
.grid-sellos {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid var(--linea);
}

.sello {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 26px 0;
  border-bottom: 1px solid var(--linea);
}

.sello__ico {
  display: block;
  margin-bottom: 16px;
  color: var(--agua);
}
.sello__ico .ico { width: 26px; height: 26px; }

.sello__titulo {
  font-size: 1.02rem;
  font-weight: 500;
  margin-bottom: 8px;
  max-width: 20ch;
}
.sello__texto {
  color: var(--texto-suave);
  font-size: .9rem;
  font-weight: 300;
  max-width: 28ch;
}


/* ════ 13. GALERÍA ══════════════════════════════════════════════════════ */
/* En celular: cuadrícula simple de 2 columnas, todas cuadradas.
   En pantallas grandes se convierte en mosaico (ver breakpoint de 640px). */
.grid-galeria {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.galeria__item {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radio-sm);
  /* Respaldo de marca visible si la foto todavía no existe */
  background: linear-gradient(150deg, var(--tinta) 0%, #33566B 100%);
  transition: transform var(--transicion);
}
.galeria__item:hover { transform: translateY(-4px); }

/* Respaldo cuando la foto todavía no existe en img/:
   script.js le pone esta clase y se ve un patrón de marca en lugar de una
   imagen rota. En cuanto pongas la foto real, esto desaparece solo. */
.galeria__item--sin-foto {
  background:
    repeating-linear-gradient(45deg,
      rgba(241, 237, 226, .045) 0 14px,
      transparent 14px 28px),
    linear-gradient(150deg, var(--tinta) 0%, #33566B 100%);
}
.galeria__item--sin-foto::after {
  content: 'Foto pendiente';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fuente-titulo);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  color: rgba(241, 237, 226, .42);
}

.galeria__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(.22, .61, .36, 1);
}
.galeria__item:hover img { transform: scale(1.05); }

/* Pie de foto que aparece sobre un degradado en la parte baja */
.galeria__pie {
  position: absolute;
  inset: auto 0 0 0;
  padding: 34px 16px 14px;
  font-family: var(--fuente-titulo);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  color: var(--crema);
  background: linear-gradient(180deg, transparent, rgba(27, 37, 55, .8));
}

/* Etiquetas "Antes" / "Después" */
.galeria__marca {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 1;
  padding: 6px 13px;
  font-family: var(--fuente-titulo);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  border-radius: var(--radio-pill);
}
.galeria__marca--antes   { background: rgba(27, 37, 55, .78); color: var(--crema); }
.galeria__marca--despues { background: var(--agua-claro); color: var(--tinta); }


/* ════ 14. FORMULARIO DE COTIZACIÓN ═════════════════════════════════════ */
.cotizar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}

.formulario {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  padding-top: 34px;
  border-top: 1px solid var(--linea-clara);
}

.campo { display: flex; flex-direction: column; gap: 9px; }

.campo label {
  font-family: var(--fuente-titulo);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  color: rgba(241, 237, 226, .78);
}
.campo .req { color: var(--agua-claro); }
.campo .opc { color: var(--texto-claro-tenue); }

/* Campos sin caja: solo una línea abajo, como una ficha impresa */
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 11px 0;
  font-family: var(--fuente-texto);
  font-size: 16px; /* 16px evita que iOS haga zoom al enfocar */
  font-weight: 300;
  color: var(--crema);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--linea-clara-fuerte);
  border-radius: 0;
  transition: border-color var(--transicion);
}
.campo textarea { resize: vertical; min-height: 90px; }

.campo input::placeholder,
.campo textarea::placeholder { color: rgba(241, 237, 226, .35); }

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-bottom-color: var(--agua-claro);
}

/* El menú desplegable necesita colores propios para verse bien en Windows */
.campo select {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f1ede2' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 18px;
  padding-right: 30px;
}
.campo select option { color: var(--tinta); background: var(--crema); }

/* Estado de error */
.campo--error input,
.campo--error select,
.campo--error textarea { border-bottom-color: #E08A72; }

.campo__error {
  min-height: 0;
  font-size: .82rem;
  font-weight: 300;
  color: #E5A491;
}
.campo--error .campo__error { min-height: 18px; }

.formulario__aviso {
  display: none;
  padding: 15px 18px;
  font-size: .92rem;
  font-weight: 300;
  line-height: 1.6;
  border-radius: var(--radio-sm);
}
.formulario__aviso.visible { display: block; }
.formulario__aviso--ok {
  color: #D9F2E2;
  background: rgba(37, 211, 102, .12);
  border-left: 2px solid var(--verde-wa);
}
.formulario__aviso--error {
  color: #F2D8CF;
  background: rgba(182, 81, 56, .16);
  border-left: 2px solid #B65138;
}

.formulario__nota {
  font-size: .82rem;
  font-weight: 300;
  color: var(--texto-claro-tenue);
}

/* ── Bloque lateral de contacto directo ── */
.contacto-directo { display: flex; flex-direction: column; gap: 34px; }

.contacto-directo__wa {
  padding-top: 34px;
  border-top: 1px solid var(--linea-clara);
}
.contacto-directo__wa .ico--xl { margin-bottom: 20px; color: var(--agua-claro); }
.contacto-directo__titulo {
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: 12px;
  max-width: 18ch;
}
.contacto-directo__texto {
  margin-bottom: 26px;
  font-size: .96rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--texto-claro);
  max-width: 34ch;
}

.datos-contacto {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--linea-clara);
}
.datos-contacto li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--linea-clara);
}
.datos-contacto .ico { margin-top: 4px; color: var(--agua-claro); }
.datos-contacto__etiqueta {
  display: block;
  margin-bottom: 4px;
  font-family: var(--fuente-titulo);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  color: var(--texto-claro-tenue);
}
.datos-contacto a, .datos-contacto span:not(.datos-contacto__etiqueta) {
  font-size: 1rem;
  font-weight: 300;
  color: var(--crema);
  transition: color var(--transicion);
}
.datos-contacto a:hover { color: var(--agua-claro); }


/* ════ 15. FOOTER ═══════════════════════════════════════════════════════ */
.footer {
  padding: 62px 0 0;
  background: var(--tinta-hondo);
  color: var(--texto-claro);
}

.footer__interior {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding-bottom: 52px;
  align-items: start;
}

.footer__marca .logo { margin-bottom: 22px; }
.footer__texto {
  font-size: .94rem;
  font-weight: 300;
  line-height: 1.75;
  margin-bottom: 22px;
  max-width: 34ch;
}

.footer__familia {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--linea-clara);
  font-family: var(--fuente-titulo);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--crema);
}

.footer__titulo {
  margin-bottom: 20px;
  font-family: var(--fuente-titulo);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  color: var(--texto-claro-tenue);
}
.footer__col ul { display: flex; flex-direction: column; gap: 13px; }
.footer__col a, .footer__col span {
  font-size: .95rem;
  font-weight: 300;
  transition: color var(--transicion);
}
.footer__col a:hover { color: var(--agua-claro); }

.footer__base {
  padding-top: 24px;
  padding-bottom: 24px;
  font-family: var(--fuente-titulo);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  color: var(--texto-claro-tenue);
  border-top: 1px solid var(--linea-clara);
}


/* ════ 16. BOTÓN FLOTANTE DE WHATSAPP ═══════════════════════════════════ */
.wa-flotante {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  color: var(--blanco);
  background: var(--verde-wa);
  border-radius: var(--radio-pill);
  box-shadow: 0 8px 26px rgba(37, 211, 102, .3);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.wa-flotante:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(37, 211, 102, .42);
}
.wa-flotante svg { width: 26px; height: 26px; }
/* El texto solo se muestra en pantallas grandes */
.wa-flotante__texto {
  display: none;
  font-family: var(--fuente-titulo);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: var(--track-boton);
  text-transform: uppercase;
}


/* ════ 16b. BARRA DE PROGRESO DE LECTURA ════════════════════════════════ */
/* Línea finísima arriba del todo que avanza conforme bajas. */
.progreso {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  height: 2px;
  pointer-events: none;
}
.progreso span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--agua);
  transition: width .12s linear;
}


/* ════ 16c. SECTORES (a quién servimos) ═════════════════════════════════ */
.sectores {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--linea);
}

.sector {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 20px 0;
  font-family: var(--fuente-titulo);
  font-size: 1.08rem;
  font-weight: 400;
  border-bottom: 1px solid var(--linea);
  transition: transform var(--transicion), color var(--transicion);
}
.sector:hover { transform: translateX(8px); color: var(--agua); }

.sector__num {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--track-etiqueta);
  color: var(--texto-tenue);
  flex-shrink: 0;
}


/* ════ 16d. FRANJA DE IMAGEN A SANGRE ═══════════════════════════════════ */
.franja {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 380px;
  padding: 80px 0;
  overflow: hidden;
  background: var(--tinta);
}

.franja__fondo {
  position: absolute;
  inset: 0;
  background-image:
    url('img/franja.jpg'),
    linear-gradient(150deg, var(--tinta-hondo) 0%, #2F5C74 100%);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

.franja__capa {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(27, 37, 55, .9) 0%, rgba(27, 37, 55, .68) 55%, rgba(27, 37, 55, .4) 100%);
}

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

.franja__frase {
  max-width: 20ch;
  font-family: var(--fuente-titulo);
  font-size: clamp(1.6rem, 6.5vw, 2.6rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--crema);
}
.franja__frase span {
  display: block;
  margin-top: 14px;
  color: rgba(241, 237, 226, .62);
}


/* ════ 16e. PLANES DE MANTENIMIENTO ═════════════════════════════════════ */
.planes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--linea);
}

.plan {
  position: relative;
  padding: 32px 0;
  border-bottom: 1px solid var(--linea);
}

/* El plan recomendado se marca con una línea azul arriba, nada más */
.plan--destacado { border-top: 2px solid var(--agua); margin-top: -1px; }

.plan__insignia {
  display: inline-block;
  margin-bottom: 16px;
  padding: 6px 14px;
  font-family: var(--fuente-titulo);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  color: var(--crema);
  background: var(--agua);
  border-radius: var(--radio-pill);
}

.plan__cabeza { margin-bottom: 16px; }

.plan__nombre {
  font-family: var(--fuente-titulo);
  font-size: 1.45rem;
  font-weight: 400;
  letter-spacing: -.02em;
  margin-bottom: 6px;
}
.plan__frecuencia {
  font-family: var(--fuente-titulo);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  color: var(--agua);
}

.plan__texto {
  margin-bottom: 20px;
  padding-bottom: 20px;
  font-size: .96rem;
  font-weight: 300;
  color: var(--texto-suave);
  border-bottom: 1px solid var(--linea);
}

.plan__lista { display: flex; flex-direction: column; gap: 11px; }
.plan__lista li {
  position: relative;
  padding-left: 22px;
  font-size: .93rem;
  font-weight: 300;
  color: var(--texto-suave);
}
.plan__lista li::before {
  content: '';
  position: absolute;
  left: 0; top: .62em;
  width: 9px; height: 1px;
  background: var(--agua);
}

.planes__nota {
  margin-top: 34px;
  font-size: .92rem;
  font-weight: 300;
  color: var(--texto-suave);
  max-width: 60ch;
}


/* ════ 16f. PREGUNTAS FRECUENTES (acordeón) ═════════════════════════════ */
.faq { border-top: 1px solid var(--linea); }

.faq__item { border-bottom: 1px solid var(--linea); }

.faq__pregunta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  font-family: var(--fuente-titulo);
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -.01em;
  cursor: pointer;
  list-style: none;
  transition: color var(--transicion);
}
/* Quita el triangulito por defecto del navegador */
.faq__pregunta::-webkit-details-marker { display: none; }
.faq__pregunta:hover { color: var(--agua); }

/* Signo de "+" que gira a "×" al abrir, hecho con dos rayitas */
.faq__pregunta::after {
  content: '';
  flex-shrink: 0;
  width: 14px; height: 14px;
  margin-top: 5px;
  background:
    linear-gradient(var(--agua), var(--agua)) center / 14px 1px no-repeat,
    linear-gradient(var(--agua), var(--agua)) center / 1px 14px no-repeat;
  transition: transform var(--transicion);
}
.faq__item[open] .faq__pregunta::after { transform: rotate(135deg); }

.faq__respuesta {
  overflow: hidden;
  padding-bottom: 26px;
  max-width: 68ch;
}
.faq__respuesta p {
  font-size: .98rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--texto-suave);
}
/* La apertura se anima desde script.js */
.faq__item[open] .faq__respuesta { animation: abrirFaq .45s cubic-bezier(.22, .61, .36, 1); }
@keyframes abrirFaq {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}


/* ════ 16g. COBERTURA ═══════════════════════════════════════════════════ */
.cobertura {
  padding: 72px 0;
  background: var(--tinta);
  color: var(--crema);
}
.cobertura__interior {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  align-items: start;
}
.cobertura__titulo { color: var(--crema); margin-bottom: 0; max-width: 14ch; }

.cobertura__lista {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--linea-clara);
}
.cobertura__lista li {
  padding: 14px 0;
  font-size: .96rem;
  font-weight: 300;
  color: var(--texto-claro);
  border-bottom: 1px solid var(--linea-clara);
}
.cobertura__extra {
  grid-column: 1 / -1;
  color: var(--agua-claro) !important;
  font-weight: 400 !important;
}


/* ════ 16h. BANDA GREENSPOT (empresa hermana) ═══════════════════════════ */
.greenspot {
  padding: 72px 0;
  background: var(--crema-2);
  border-top: 1px solid var(--linea);
}
.greenspot__interior {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  align-items: center;
}
.greenspot__titulo { margin-bottom: 16px; max-width: 18ch; }
.greenspot__texto strong { font-weight: 500; color: var(--tinta); }
.greenspot__btn { justify-self: start; }


/* ════ 17. ANIMACIONES AL HACER SCROLL ══════════════════════════════════ */
/* script.js le pone la clase .visible a cada elemento .animar cuando entra
   en pantalla. Movimiento corto y lento: la marca es sobria. */
.animar {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .9s cubic-bezier(.22, .61, .36, 1),
              transform .9s cubic-bezier(.22, .61, .36, 1);
}
.animar.visible { opacity: 1; transform: none; }

/* Respeta a quien pidió menos movimiento en su sistema operativo */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .animar { opacity: 1; transform: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   18. BREAKPOINTS — de celular hacia arriba
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Celular grande (≥ 480px) ───────────────────────────────────────── */
@media (min-width: 480px) {
  .toma-bloque__botones .btn { flex: 0 1 auto; }
}

/* ── Tablet (≥ 640px) ───────────────────────────────────────────────── */
@media (min-width: 640px) {
  .seccion { padding: 92px 0; }
  .seccion__encabezado { margin-bottom: 56px; }

  /* Las tarjetas y pasos se vuelven columnas separadas por líneas verticales.
     Regla de oro: la 1a columna pegada a la izquierda, la última pegada a la
     derecha, y las de en medio con --gutter a cada lado de la línea. */

  /* ── Servicios: 2 columnas ── */
  .grid-servicios { grid-template-columns: repeat(2, 1fr); }
  .tarjeta { padding: 32px var(--gutter); }
  .tarjeta:nth-child(odd)  { padding-left: 0;  border-right: 1px solid var(--linea); }
  .tarjeta:nth-child(even) { padding-right: 0; }

  /* ── Sellos: 2 columnas ── */
  .sello { flex: 1 1 50%; padding: 30px var(--gutter); }
  .sello:nth-child(odd)  { padding-left: 0;  border-right: 1px solid var(--linea); }
  .sello:nth-child(even) { padding-right: 0; }

  /* ── Pasos: 3 columnas ── */
  .grid-pasos { grid-template-columns: repeat(3, 1fr); }
  .paso { padding: 36px var(--gutter); border-right: 1px solid var(--linea); }
  .paso:first-child { padding-left: 0; }
  .paso:last-child  { padding-right: 0; border-right: 0; }

  /* ── Números: 2 columnas ── */
  .grid-numeros { grid-template-columns: repeat(2, 1fr); }
  .numero { padding: 30px var(--gutter); }
  .numero:nth-child(odd)  { padding-left: 0;  border-right: 1px solid var(--linea); }
  .numero:nth-child(even) { padding-right: 0; }

  /* Mosaico: la primera foto ocupa 2 columnas × 2 filas y manda visualmente,
     las otras cinco la rodean. Con 6 fotos encaja exacto, sin huecos. */
  .grid-galeria { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .galeria__item--ancho {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: auto;
  }

  /* Dos columnas dentro del formulario */
  .formulario { grid-template-columns: 1fr 1fr; gap: 22px 34px; }
  .campo--ancho,
  .formulario > .btn,
  .formulario__aviso,
  .formulario__nota { grid-column: 1 / -1; }

  .footer__interior { grid-template-columns: 1.7fr 1fr 1fr; gap: 44px; }

  /* ── Secciones nuevas ── */
  .sectores { grid-template-columns: 1fr 1fr; }
  .sector { padding: 22px var(--gutter); }
  .sector:nth-child(odd)  { padding-left: 0;  border-right: 1px solid var(--linea); }
  .sector:nth-child(even) { padding-right: 0; }

  .planes { grid-template-columns: 1fr 1fr; }
  .plan { padding: 36px var(--gutter); }
  .plan:nth-child(odd)  { padding-left: 0;  border-right: 1px solid var(--linea); }
  .plan:nth-child(even) { padding-right: 0; }

  .franja { min-height: 440px; }
  .cobertura__lista { grid-template-columns: repeat(3, 1fr); }
  .greenspot__interior { grid-template-columns: 1.6fr auto; gap: 48px; }
  .greenspot__btn { justify-self: end; }
}

/* ── Tablet horizontal / laptop chica (≥ 900px) ─────────────────────── */
@media (min-width: 900px) {
  :root { --alto-header: 80px; }

  .contenedor { padding-left: 40px; padding-right: 40px; }
  .seccion { padding: 118px 0; }
  .seccion__encabezado { margin-bottom: 68px; }

  /* El menú vuelve a ser una barra horizontal normal */
  .hamburguesa { display: none; }
  .nav {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 40px;
    padding: 0;
    background: none;
    border: 0;
    transform: none;
    opacity: 1;
    visibility: visible;
  }
  .nav__lista { flex-direction: row; gap: 40px; }
  .nav__enlace {
    padding: 6px 0;
    font-size: 10.5px;
    border-bottom: 0;
    position: relative;
  }
  /* Rayita que crece al pasar el cursor */
  .nav__enlace::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 0; height: 1px;
    background: currentColor;
    transition: width var(--transicion);
  }
  .nav__enlace:hover::after { width: 100%; }
  .header--transparente .nav__enlace { color: var(--crema); }
  .nav__wa { margin-top: 0; }

  .logo__simbolo { width: 34px; height: 34px; }
  .logo__texto { font-size: 17px; }


  /* Todas las rejillas pasan a una sola fila. Se repite la regla de oro:
     primera pegada a la izquierda, última pegada a la derecha, el resto
     con --gutter a cada lado de su línea divisoria. */

  /* ── Servicios: 4 columnas ── */
  .grid-servicios { grid-template-columns: repeat(4, 1fr); }
  .tarjeta,
  .tarjeta:nth-child(odd),
  .tarjeta:nth-child(even) {
    padding: 38px var(--gutter);
    border-right: 1px solid var(--linea);
  }
  .tarjeta:first-child { padding-left: 0; }
  .tarjeta:last-child  { padding-right: 0; border-right: 0; }

  /* ── Números: 4 columnas ── */
  .grid-numeros { grid-template-columns: repeat(4, 1fr); }
  .numero,
  .numero:nth-child(odd),
  .numero:nth-child(even) {
    padding: 34px var(--gutter);
    border-right: 1px solid var(--linea);
  }
  .numero:first-child { padding-left: 0; }
  .numero:last-child  { padding-right: 0; border-right: 0; }

  /* ── Sellos: 5 columnas ── */
  .sello,
  .sello:nth-child(odd),
  .sello:nth-child(even) {
    flex: 1 1 0;
    padding: 34px var(--gutter);
    border-right: 1px solid var(--linea);
  }
  .sello:first-child { padding-left: 0; }
  .sello:last-child  { padding-right: 0; border-right: 0; }
  /* Reserva dos renglones para el título: así las descripciones de las
     cinco columnas arrancan a la misma altura aunque un título sea más largo. */
  .sello__titulo { min-height: 2.2em; }
  .numero__etiqueta { min-height: 3em; }

  /* ── Pasos: 3 columnas ── */
  .paso { padding: 44px var(--gutter); }
  .paso:first-child { padding-left: 0; }
  .paso:last-child  { padding-right: 0; }

  .comparacion { grid-template-columns: 1fr 1fr; gap: 56px; }
  .comparacion__col { padding: 40px 0; }

  /* Formulario a la izquierda, WhatsApp a la derecha */
  .cotizar { grid-template-columns: 1.3fr 1fr; gap: 68px; }

  .wa-flotante { right: 30px; bottom: 30px; padding: 15px 24px; }
  .wa-flotante__texto { display: inline; }

  .footer { padding-top: 84px; }
  .footer__interior { grid-template-columns: 2fr 1fr 1fr; gap: 64px; padding-bottom: 64px; }

  /* ── Secciones nuevas ── */
  /* Sectores: 4 columnas, misma regla de oro que las demás rejillas */
  .sectores { grid-template-columns: repeat(4, 1fr); }
  .sector,
  .sector:nth-child(odd),
  .sector:nth-child(even) {
    padding: 24px var(--gutter);
    border-right: 1px solid var(--linea);
  }
  .sector:nth-child(4n + 1) { padding-left: 0; }
  .sector:nth-child(4n)     { padding-right: 0; border-right: 0; }

  /* Planes: 3 columnas */
  .planes { grid-template-columns: repeat(3, 1fr); }
  .plan,
  .plan:nth-child(odd),
  .plan:nth-child(even) {
    padding: 40px var(--gutter);
    border-right: 1px solid var(--linea);
  }
  .plan:first-child { padding-left: 0; }
  .plan:last-child  { padding-right: 0; border-right: 0; }

  .franja { min-height: 520px; padding: 110px 0; }
  .franja__frase { max-width: 22ch; }

  .faq__pregunta { font-size: 1.18rem; padding: 28px 0; }

  .cobertura { padding: 96px 0; }
  .cobertura__interior { grid-template-columns: 1fr 1.1fr; gap: 68px; }
  .cobertura__lista { grid-template-columns: 1fr 1fr; }

  .greenspot { padding: 96px 0; }
}

/* ── Escritorio (≥ 1200px) ──────────────────────────────────────────── */
@media (min-width: 1200px) {
  .seccion { padding: 140px 0; }
  .numeros { padding: 84px 0; }
}