/* ================================================================
   HYGIA360 · styles.css
   Organización del archivo:
   1. Variables de color y ajustes globales
   2. Reset básico y utilidades
   3. Header y navegación
   4. Hero
   5. Secciones y tarjetas de categorías
   6. Servicios (tabs)
   7. Por qué elegirnos
   8. Contacto (formulario)
   9. Footer
   10. Responsive (media queries para móvil)
   ================================================================ */

/* ---------- 1. VARIABLES DE COLOR ----------
   Definimos la paleta como variables CSS (custom properties).
   Se usan con var(--nombre) en todo el archivo. */
:root {
  --azul: #047bcc;
  --verde: #5cb42e;
  --amarillo: #efb02e;
  --rojo: #e6483c;
  --gris-oscuro: #1b2a3a;   /* color de texto principal */
  --fondo-claro: #f7f9fb;   /* fondo de la página */
  --blanco: #ffffff;

  /* Colores derivados para bordes, sombras, etc. */
  --borde: #e2e8f0;
  --sombra: 0 6px 20px rgba(27, 42, 58, 0.08);
  --radio: 14px;            /* radio de borde estándar */
  --ancho-max: 1140px;      /* ancho máximo del contenido */

  /* ---- Escala de espaciado (múltiplos de 8px) ----
     Usar siempre estas variables en lugar de valores sueltos,
     para que los márgenes y paddings sean consistentes. */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;

  /* ---- Escala tipográfica ----
     Tamaños FLUIDOS con clamp(min, preferido, max): escalan solos entre
     móvil y escritorio, sin saltos bruscos entre breakpoints. */
  --fs-h1: clamp(1.75rem, 1rem + 3.2vw, 2.6rem);  /* título del hero */
  --fs-h2: clamp(1.5rem, 1.15rem + 1.6vw, 2rem);  /* títulos de sección */
  --fs-h3: 1.25rem;  /* títulos de tarjetas/ítems */
  --lh-heading: 1.25;/* interlineado ajustado para títulos */
  --lh-body: 1.6;    /* interlineado cómodo para párrafos */
}

/* ---------- 2. RESET BÁSICO Y GLOBALES ---------- */
* {
  box-sizing: border-box; /* el padding no aumenta el ancho total */
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;      /* scroll suave al hacer clic en el menú */
  scroll-padding-top: 80px;     /* deja espacio bajo el header fijo */
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--gris-oscuro);
  background: var(--fondo-claro);
  line-height: var(--lh-body);
}

/* Interlineado ajustado para todos los títulos (jerarquía consistente) */
h1, h2, h3 { line-height: var(--lh-heading); }

img { max-width: 100%; display: block; }

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

/* ---------- ACCESIBILIDAD ----------
   Foco visible y consistente para navegación por teclado. Usamos
   :focus-visible para NO mostrar el anillo en clics de mouse, pero sí al
   navegar con Tab. Aplica a todos los controles interactivos. */
a:focus-visible,
button:focus-visible,
.tab:focus-visible,
.nav__link:focus-visible,
.faq-item__question:focus-visible,
.whatsapp-fab:focus-visible,
.form__input:focus-visible,
.form__check input:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Enlace "Saltar al contenido": oculto fuera de pantalla hasta recibir foco. */
.skip-link {
  position: absolute;
  left: 8px;
  top: -48px; /* fuera de vista */
  z-index: 100;
  background: var(--azul);
  color: var(--blanco);
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
  transition: top 0.2s ease;
}
.skip-link:focus-visible {
  top: 8px; /* baja a la vista al tabular */
  outline: 3px solid var(--gris-oscuro);
  outline-offset: 2px;
}

/* Contenedor centrado reutilizable */
.container {
  width: 100%;
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0 20px;
}

/* Espaciado vertical estándar para secciones (escala de 8px) */
.section {
  padding: var(--space-10) 0;
}

.section__title {
  font-size: var(--fs-h2);
  text-align: center;
  color: var(--gris-oscuro);
}

.section__lead {
  text-align: center;
  max-width: 620px;
  margin: var(--space-2) auto var(--space-5);
  color: #52606d;
}

/* ---------- Botones ---------- */
.btn {
  display: inline-block;
  border: 2px solid transparent;
  border-radius: 50px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  font-size: 1rem;
  text-align: center;
}

.btn--lg {
  padding: 14px 28px;
}

.btn--primary {
  background: var(--azul);
  color: var(--blanco);
}
.btn--primary:hover {
  background: #0369ad;
  transform: translateY(-2px);
  box-shadow: var(--sombra);
}

.btn--ghost {
  background: transparent;
  color: var(--azul);
  border-color: var(--azul);
}
.btn--ghost:hover {
  background: var(--azul);
  color: var(--blanco);
}

/* ---------- 3. HEADER Y NAVEGACIÓN ---------- */
.header {
  position: sticky;   /* el header se queda arriba al hacer scroll */
  top: 0;
  z-index: 50;
  background: var(--blanco);
  border-bottom: 1px solid var(--borde);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--gris-oscuro);
}
.logo__icon { color: var(--azul); display: flex; }
/* Logo real: altura fija de 28px (igual que el ícono SVG anterior) para
   que el header conserve exactamente la misma altura. El ancho se ajusta
   solo manteniendo la proporción. */
.logo__img { height: 28px; width: auto; display: block; }
/* "HYGIA" en azul de marca, consistente con el logo (header y footer) */
.logo__brand { color: var(--azul); }
.logo__360 { color: var(--verde); }

/* Lista del menú */
.nav__list {
  display: flex;
  gap: 26px;
  list-style: none;
}
.nav__link {
  font-weight: 500;
  color: var(--gris-oscuro);
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.nav__link:hover {
  color: var(--azul);
  border-color: var(--azul);
}

/* Botón hamburguesa: oculto en escritorio, visible en móvil */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle__bar {
  width: 24px;
  height: 3px;
  background: var(--gris-oscuro);
  border-radius: 2px;
  transition: transform 0.2s;
}

/* ---------- 4. HERO ---------- */
.hero {
  background: linear-gradient(135deg, #eaf4fc 0%, var(--fondo-claro) 60%);
  padding: var(--space-10) 0;
}
/* Desktop: 2 columnas (texto + imagen). En móvil se apila (media query). */
.hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-8);
  align-items: center;
}
.hero__content { text-align: left; }
/* Antetítulo (eyebrow): slogan en mayúsculas, pequeño y con color de marca */
.hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--azul);
  margin: 0 0 var(--space-2);
}
.hero__title {
  font-size: var(--fs-h1);
  margin: 0 0 var(--space-3);
}
.hero__highlight {
  color: var(--azul);
  display: inline-block;
}
.hero__subtitle {
  font-size: 1.15rem;
  line-height: var(--lh-body);
  max-width: 560px;
  margin: 0 0 var(--space-4);
  color: #445;
}
.hero__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;   /* en móvil los botones se apilan si no caben */
}
/* Imagen del hero: llena su columna con proporción constante (evita CLS). */
.hero__media { display: flex; }
.hero__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

/* ---------- FRANJA DE CONFIANZA ---------- */
.trust {
  background: var(--blanco);
  border-bottom: 1px solid var(--borde);
  padding: var(--space-4) 0;
}
.trust__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}
.trust__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.trust__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eaf4fc;
  color: var(--azul);
}
.trust__text {
  font-size: 0.92rem;
  line-height: 1.4;
  color: #52606d;
}
.trust__text strong { color: var(--gris-oscuro); }

/* ---------- 5. TARJETAS DE CATEGORÍAS ---------- */
.cards {
  display: grid;
  /* auto-fit crea columnas según el ancho disponible.
     minmax(230px, 1fr) = cada tarjeta mínimo 230px. */
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-3);
}
.card {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: var(--space-4) var(--space-3);
  text-align: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra);
  border-color: var(--azul);
}
.card__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: var(--blanco);
}
/* Cada categoría usa un color distinto de la paleta */
.card__icon--blue   { background: var(--azul); }
.card__icon--green  { background: var(--verde); }
.card__icon--yellow { background: var(--amarillo); }
.card__icon--red    { background: var(--rojo); }

.card__title { font-size: var(--fs-h3); margin-bottom: var(--space-1); }
.card__text  { color: #52606d; font-size: 0.95rem; line-height: var(--lh-body); }

/* ---------- 6. SERVICIOS (TABS) ---------- */
.services { background: var(--blanco); }

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: var(--space-4);
}
.tab {
  background: var(--fondo-claro);
  border: 2px solid var(--borde);
  border-radius: 50px;
  padding: 12px 22px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--gris-oscuro);
  cursor: pointer;
  transition: all 0.15s ease;
  /* min-height ayuda a que sea fácil de tocar en móvil */
  min-height: 48px;
}
.tab:hover { border-color: var(--azul); color: var(--azul); }

/* Pestaña activa: destaca con el azul primario */
.tab.is-active {
  background: var(--azul);
  border-color: var(--azul);
  color: var(--blanco);
}

/* Paneles: ocultos por defecto, visibles con .is-active */
.tab-panel { display: none; }
.tab-panel.is-active {
  display: block;
  animation: fadeIn 0.25s ease; /* pequeña animación al cambiar de tab */
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Lista de servicios: 2 columnas en pantallas amplias */
.service-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-2);
  max-width: 900px;
  margin: 0 auto;
}
.service-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--fondo-claro);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: var(--space-2);
  font-weight: 500;
  /* Transición suave para el hover */
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.service-item:hover {
  transform: translateY(-2px);
  border-color: var(--azul);
  box-shadow: var(--sombra);
}
/* Check circular. El color base es verde, pero abajo lo rotamos
   entre los 4 colores de la paleta según la posición del servicio. */
.service-item__check {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--verde);
  color: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
}

/* Paleta sobria (B2B técnico): los checks alternan solo entre verde (base)
   y azul, sin amarillo ni rojo. El rojo se reserva para errores del
   formulario, así que se evita aquí para no dar señales cruzadas. El check
   destacado (--star) conserva su azul de diferenciador. */
.service-item:nth-child(even) .service-item__check:not(.service-item__check--star) {
  background: var(--azul);
}

/* Servicio destacado (Desratización): borde y fondo especiales */
.service-item--featured {
  border-color: var(--azul);
  background: #eaf4fc;
  align-items: flex-start;
}
.service-item__check--star {
  background: var(--azul);
}
.service-item__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Badge de formalidad / regulación (SEREMI) */
.badge {
  display: inline-block;
  background: var(--amarillo);
  color: var(--gris-oscuro);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 50px;
  width: fit-content;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* ---------- GALERÍA "NUESTRO EQUIPO EN ACCIÓN" ----------
   Grid responsive: 3 columnas en desktop. En tablet y móvil se reduce
   dentro del media query. Cada imagen tiene bordes redondeados, sombra
   suave y un ligero zoom al pasar el mouse. */
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columnas en desktop */
  gap: var(--space-3);
}
.gallery__item {
  margin: 0; /* reset del <figure> */
  border-radius: var(--radio);
  overflow: hidden;              /* recorta el zoom de la imagen */
  box-shadow: var(--sombra);
  border: 1px solid var(--borde);
}
/* El wrapper <picture> es inline por defecto; block evita un hueco fantasma. */
.gallery__item picture { display: block; }
.gallery__img {
  width: 100%;
  /* NO usar height: 100% aquí: combinado con el <figure> sin altura y el
     estiramiento del grid, rompe el aspect-ratio y la imagen crece a su
     tamaño real (desborda). La proporción debe mandarla aspect-ratio. */
  aspect-ratio: 3 / 2;          /* proporción uniforme para toda la galería */
  object-fit: cover;            /* llena el marco sin deformar */
  display: block;
  transition: transform 0.35s ease;
}
.gallery__item:hover .gallery__img {
  transform: scale(1.06);       /* ligero zoom al pasar el mouse */
}
/* Tablet: 2 columnas (el paso a 1 columna en móvil está en el media
   query general de 768px, que al ser más específico manda por debajo). */
@media (max-width: 992px) {
  .gallery__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- TESTIMONIOS (estructura lista; la sección está oculta en el
   HTML hasta contar con testimonios reales autorizados) ---------- */
.testimonials { background: var(--fondo-claro); }
.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-3);
  max-width: 1000px;
  margin: 0 auto;
}
.testimonial {
  margin: 0;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-top: 4px solid var(--azul);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.testimonial__quote {
  margin: 0;
  font-size: 1.02rem;
  line-height: var(--lh-body);
  color: var(--gris-oscuro);
}
.testimonial__author {
  display: flex;
  flex-direction: column;
  font-size: 0.9rem;
  color: #52606d;
}
.testimonial__author strong { color: var(--gris-oscuro); }

/* ---------- 7. POR QUÉ ELEGIRNOS ----------
   Fondo con degradado MUY suave (azul y verde a baja opacidad) para
   diferenciar esta sección de las vecinas blancas. Las opacidades son
   bajas (0.06–0.08) para que el texto oscuro siga siendo legible. */
.why {
  background:
    linear-gradient(135deg,
      rgba(4, 123, 204, 0.07) 0%,
      rgba(92, 180, 46, 0.07) 100%),
    var(--fondo-claro);
}

.why-list {
  list-style: none;
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  gap: var(--space-2);
}
/* Cada punto es una tarjeta blanca con una barra de color a la izquierda.
   El fondo blanco garantiza el contraste del texto oscuro. */
.why-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-left: 5px solid var(--verde); /* acento; se rota abajo */
  border-radius: 12px;
  padding: var(--space-3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.why-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra);
}
.why-item__check {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--verde);   /* color base; se rota abajo */
  color: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

/* Paleta sobria: borde de acento azul en todas las tarjetas y check verde
   (el check verde ya viene del estilo base). Antes rotaba entre 4 colores. */
.why-item { border-left-color: var(--azul); }

/* ---------- 8. CONTACTO (FORMULARIO) ---------- */
.contact { background: var(--blanco); }

.form {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;  /* 2 columnas en escritorio */
  gap: 18px;
}
/* Grupos que deben ocupar todo el ancho */
.form__group--full { grid-column: 1 / -1; }

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

.form__label {
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 0.95rem;
}
.req { color: var(--rojo); }
/* Gris con contraste AA sobre blanco (antes #94a3b8, ~2.7:1, insuficiente). */
.opt { color: #64748b; font-weight: 400; font-size: 0.85rem; }

.form__input {
  font-family: inherit;
  font-size: 1rem;
  padding: 12px 14px;
  border: 2px solid var(--borde);
  border-radius: 10px;
  background: var(--fondo-claro);
  color: var(--gris-oscuro);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form__input:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(4, 123, 204, 0.15);
}

/* Estado de error: el JS agrega la clase .has-error al grupo */
.form__group.has-error .form__input {
  border-color: var(--rojo);
  background: #fdf0ef;
}
.form__error {
  color: var(--rojo);
  font-size: 0.82rem;
  margin-top: 5px;
  min-height: 1em; /* reserva espacio para que no “salte” el layout */
}

.form__success {
  color: var(--verde);
  font-weight: 600;
  margin-top: 12px;
}
/* Mismo elemento, pero en rojo cuando el envío falla (clase la pone el JS) */
.form__success.is-error {
  color: var(--rojo);
}

/* Honeypot anti-spam: fuera de pantalla, invisible para usuarios reales
   pero presente en el DOM para que los bots lo rellenen. No usamos
   display:none porque algunos bots ignoran los campos ocultos así. */
.form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Consentimiento de datos: checkbox + texto legal en una fila cómoda. */
.form__check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #52606d;
  cursor: pointer;
}
.form__check input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--azul); /* checkbox en azul de marca al marcarlo */
  cursor: pointer;
}
/* En error, el texto del consentimiento se tiñe de rojo (el JS pone
   .has-error en el grupo). */
.form__group--consent.has-error .form__check {
  color: var(--rojo);
}

/* ---------- 9. FOOTER ---------- */
.footer {
  background: var(--gris-oscuro);
  color: #cbd5e1;
  padding-top: var(--space-6);
}
.footer__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  padding-bottom: var(--space-4);
}
.logo--footer { color: var(--blanco); font-size: 1.4rem; }
/* Slogan sutil bajo el logo: itálica, pequeño y en verde de marca */
.footer__slogan {
  margin-top: var(--space-1);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--verde);
}
.footer__tagline { margin-top: var(--space-1); font-size: 0.9rem; }
.footer__title {
  color: var(--blanco);
  font-size: 1.05rem;
  margin-bottom: var(--space-2);
}
.footer__list { list-style: none; display: grid; gap: 8px; font-size: 0.92rem; }
.footer__list a:hover { color: var(--verde); }

/* Líneas de contacto con ícono: ícono a la izquierda + texto, alineados
   arriba para que las líneas largas (cobertura) envuelvan de forma limpia. */
.footer__contact {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.footer__icon {
  flex-shrink: 0;
  display: flex;
  margin-top: 1px;      /* alinea el ícono con la 1.ª línea de texto */
  color: var(--verde);  /* acento de marca, coherente con el hover */
}

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  text-align: center;
  padding: 18px 0;
  font-size: 0.85rem;
}

/* ---------- FAQ (ACORDEÓN) ----------
   Cada pregunta es una tarjeta (como en el resto del sitio): fondo blanco,
   bordes redondeados, sombra suave y separación entre ellas. La respuesta
   se expande con el truco grid-template-rows 0fr → 1fr (altura animable). */
.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  gap: var(--space-3);   /* separación clara entre tarjetas */
}
.faq-item {
  background: var(--blanco);
  /* Borde de 2px (transparente-neutro) para poder colorearlo al abrir
     sin que la tarjeta "salte" de tamaño. */
  border: 2px solid var(--borde);
  border-radius: var(--radio);   /* mismo radio que las tarjetas de Servicios */
  box-shadow: var(--sombra);     /* sombra suave de marca */
  overflow: hidden;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.faq-item:hover {
  transform: translateY(-2px);
}

/* Botón de la pregunta (ocupa toda la tarjeta y es clickeable) */
.faq-item__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  padding: var(--space-3);
  font-family: inherit;
  font-size: var(--fs-h3);   /* tipografía grande, como los títulos de ítems */
  font-weight: 700;
  color: var(--gris-oscuro);
  transition: color 0.15s ease;
}
.faq-item__question:hover { color: var(--azul); }

/* Ícono circular con "+" (SVG) que rota a "×" al abrir */
.faq-item__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--azul);
  color: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, background 0.2s ease;
}
.faq-item.is-open .faq-item__icon { transform: rotate(45deg); }

/* Paleta sobria: todos los íconos en azul de marca (ya viene del estilo
   base .faq-item__icon) y borde de apertura azul. Antes rotaba 4 colores. */
.faq-item.is-open { border-color: var(--azul); }

/* Contenedor animable de la respuesta */
.faq-item__answer {
  display: grid;
  grid-template-rows: 0fr; /* colapsado */
  transition: grid-template-rows 0.3s ease;
}
.faq-item.is-open .faq-item__answer {
  grid-template-rows: 1fr; /* expandido */
}
/* El wrapper interno necesita overflow hidden para el truco de grid */
.faq-item__answer-inner { overflow: hidden; }
.faq-item__answer p {
  /* Padding propio; texto un poco más suave que el título */
  padding: 0 var(--space-3) var(--space-3);
  color: #52606d;
  line-height: var(--lh-body);
}

/* ---------- ANIMACIONES DE APARICIÓN AL SCROLL ----------
   Los elementos con .reveal empiezan invisibles y ligeramente abajo;
   el JavaScript (IntersectionObserver) les agrega .is-visible cuando
   entran en pantalla, disparando un fade-in + desplazamiento suave. */
/* El estado inicial oculto SOLO se aplica si JS está activo (clase .js en
   <html>, puesta por un script inline en el <head>). Así, sin JS los
   elementos se ven normalmente y se evita cualquier parpadeo inicial. */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Accesibilidad: sin animación si el usuario prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- BOTÓN FLOTANTE DE WHATSAPP ----------
   position: fixed lo mantiene visible al hacer scroll.
   z-index alto para quedar sobre el contenido; como está abajo-derecha
   no choca con el header (arriba) ni con el formulario. */
.whatsapp-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 60; /* por encima del header (z-index: 50) */
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25d366;        /* verde oficial de WhatsApp */
  color: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.45);
  /* Animación de pulso suave para llamar la atención sin molestar */
  animation: whatsappPulse 2.2s ease-in-out infinite;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.whatsapp-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 22px rgba(37, 211, 102, 0.6);
}
.whatsapp-fab__icon { display: block; }

/* Pulso: escala muy leve + halo con box-shadow que se expande y desvanece */
@keyframes whatsappPulse {
  0%   { transform: scale(1);    box-shadow: 0 6px 18px rgba(37, 211, 102, 0.45), 0 0 0 0 rgba(37, 211, 102, 0.5); }
  70%  { transform: scale(1.05); box-shadow: 0 6px 18px rgba(37, 211, 102, 0.45), 0 0 0 14px rgba(37, 211, 102, 0); }
  100% { transform: scale(1);    box-shadow: 0 6px 18px rgba(37, 211, 102, 0.45), 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* Tooltip: aparece a la izquierda del botón al pasar el mouse (desktop).
   Oculto por defecto y no capturable por el mouse. */
.whatsapp-fab__tooltip {
  position: absolute;
  right: 72px;            /* a la izquierda del botón */
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: var(--gris-oscuro);
  color: var(--blanco);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  padding: 8px 12px;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
/* Pequeña flecha del tooltip apuntando al botón */
.whatsapp-fab__tooltip::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-left-color: var(--gris-oscuro);
}
.whatsapp-fab:hover .whatsapp-fab__tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Accesibilidad: si el usuario prefiere menos movimiento, sin pulso */
@media (prefers-reduced-motion: reduce) {
  .whatsapp-fab { animation: none; }
}

/* ---------- 10a. RESPONSIVE (TABLET) ----------
   En tablets el hero a 2 columnas queda apretado, así que a partir de 992px
   hacia abajo se apila (texto arriba, imagen abajo) y se centra. La franja
   de confianza pasa de 4 a 2 columnas. El hero a 2 columnas queda solo en
   escritorio (>992px). */
@media (max-width: 992px) {
  .hero__inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .hero__content { text-align: center; }
  .hero__subtitle { margin-left: auto; margin-right: auto; }
  .hero__actions { justify-content: center; }
  .hero__media { justify-content: center; }
  .hero__img { aspect-ratio: 16 / 10; max-height: 420px; }

  .trust__inner { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 10b. RESPONSIVE (MÓVIL) ----------
   Todo lo anterior es "mobile-first friendly", pero aquí ajustamos
   lo que cambia en pantallas pequeñas (hasta 768px de ancho). */
@media (max-width: 768px) {
  /* Mostrar el botón hamburguesa */
  .nav-toggle { display: flex; }

  /* Menú: se oculta y se despliega verticalmente al abrirlo */
  .nav {
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    background: var(--blanco);
    border-bottom: 1px solid var(--borde);
    /* Oculto por defecto: max-height 0 + overflow hidden */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .nav.is-open { max-height: 320px; } /* abierto: se muestra */

  .nav__list {
    flex-direction: column;
    gap: 0;
    padding: 8px 20px;
  }
  .nav__link {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--borde);
  }

  /* --- Hero en móvil: solo ajustes propios de móvil (el apilado y el
     centrado ya vienen del bloque de tablet ≤992px). --- */
  /* Menos padding arriba y algo más abajo, para dar espacio al FAB */
  .hero { padding: var(--space-8) 0 var(--space-10); }

  /* Slogan/eyebrow: más pequeño (es secundario) y más separado del título */
  .hero__eyebrow {
    font-size: 0.72rem;
    letter-spacing: 1.5px;
    margin-bottom: var(--space-3); /* slogan → título */
  }

  /* Título: el tamaño lo maneja clamp() en --fs-h1; aquí solo el margen. */
  .hero__title {
    margin-bottom: var(--space-3); /* título → párrafo */
  }

  /* Descripción: más separación respecto a los botones */
  .hero__subtitle {
    font-size: 1.05rem;
    margin-bottom: var(--space-5); /* párrafo → botones */
  }

  /* --- Galería en móvil --- */
  /* 1 columna con separación cómoda entre tarjetas */
  .gallery__grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  /* Proporción 4/3 para controlar la altura en pantallas angostas */
  .gallery__img { aspect-ratio: 4 / 3; }
  /* Reafirmamos la tarjeta (radius + sombra) por si algo la sobreescribe */
  .gallery__item {
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    overflow: hidden;
  }

  /* Formulario en una sola columna */
  .form { grid-template-columns: 1fr; }

  /* Botones del hero a ancho completo, con espacio vertical cómodo */
  .hero__actions {
    gap: var(--space-3); /* separación entre los 2 botones apilados */
  }
  .hero__actions .btn { width: 100%; }
  /* Espacio extra bajo el último botón para que el botón flotante de
     WhatsApp no quede pegado ni se superponga con "Ver servicios". */
  .hero__actions .btn--ghost { margin-bottom: var(--space-4); }

  /* FAQ: pregunta un poco más pequeña y padding algo menor para que las
     tarjetas se vean cómodas y no se aprieten en pantallas chicas. */
  .faq-item__question {
    font-size: 1.1rem;
    padding: var(--space-2);
  }
  .faq-item__answer p {
    padding: 0 var(--space-2) var(--space-2);
  }
  .faq-item__icon { width: 34px; height: 34px; }

  /* Botón de WhatsApp: un poco más pequeño y separado del borde
     para que se vea bien y no tape contenido en pantallas chicas. */
  .whatsapp-fab {
    width: 52px;
    height: 52px;
    bottom: 16px;
    right: 16px;
  }
  .whatsapp-fab__icon { width: 28px; height: 28px; }
  /* Sin hover real en táctil: ocultamos el tooltip en móvil. */
  .whatsapp-fab__tooltip { display: none; }
}