/* ============================================================
   VARIABLES / PALETA (del logo)
   Todo lo que empieza con -- es una "custom property" de CSS:
   una variable. Se define una vez acá y se usa en todo el
   archivo con var(--nombre). Si más adelante cambian el color
   exacto del logo, se edita en UN solo lugar y se actualiza
   toda la web automáticamente.
   ============================================================ */
:root {
  --navy: #1b3a6b;
  --navy-dark: #12294d;
  --teal: #4fc7dd;
  --teal-light: #eaf9fb;
  --white: #ffffff;
  --gray-50: #f7f8fa;
  --gray-200: #e4e7ec;
  --gray-500: #6b7280;
  --gray-700: #374151;
  --whatsapp: #25d366;
  --whatsapp-dark: #1ea952;

  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;

  --radius: 14px;
  --shadow: 0 10px 30px rgba(27, 58, 107, 0.08);
  --shadow-lg: 0 20px 45px rgba(27, 58, 107, 0.16);

  /* Duración/curva usadas en varias transiciones, así quedan consistentes */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   RESET
   Los navegadores traen márgenes/paddings por defecto distintos
   entre sí. Este bloque los pone todos en cero para arrancar
   parejo y evitar sorpresas de espaciado.
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

/*
  DESAJUSTE POR EL HEADER STICKY
  Cuando tocás un link del menú, el navegador scrollea hasta pegar el
  borde superior de la sección con el borde superior de la pantalla.
  El problema: el header queda "flotando" fijo arriba (position: sticky)
  tapando esos primeros ~70-90px. scroll-margin-top le dice al navegador
  "dejá este espacio de margen antes de la sección al hacer scroll hasta
  acá", así el título no queda escondido detrás del header.
*/
#servicios, #tipos-limpieza, #faq, #cotizar, #proceso, #nosotros, #zona, #contacto {
  scroll-margin-top: 90px;
}

body {
  font-family: var(--font-body);
  color: var(--gray-700);
  line-height: 1.6;
  background: var(--white);
  overflow-x: hidden; /* evita scroll horizontal por los blobs decorativos */
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
h1, h2, h3 { font-family: var(--font-heading); color: var(--navy); line-height: 1.2; }

.container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative; /* para poder ubicar los blobs del hero encima */
}

/* ============================================================
   ANIMACIÓN "REVEAL" AL HACER SCROLL
   Por defecto todo elemento con clase .reveal está invisible
   (opacity 0) y desplazado 24px hacia abajo. script.js usa un
   IntersectionObserver para detectar cuándo un .reveal entra en
   pantalla y le agrega la clase .reveal--visible, que lo hace
   aparecer con una transición suave. Así las secciones "aparecen"
   a medida que el usuario baja, en vez de estar todas visibles
   de golpe -- es el mismo efecto que usan sitios hechos en Framer.
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   BOTONES
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
  white-space: nowrap;
}

.btn:hover { transform: translateY(-3px); }

.btn--whatsapp {
  background: var(--whatsapp);
  color: var(--white);
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35);
}
.btn--whatsapp:hover {
  background: var(--whatsapp-dark);
  box-shadow: 0 14px 28px rgba(37, 211, 102, 0.45);
}

.btn--outline {
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--navy);
}
.btn--outline:hover { background: var(--navy); color: var(--white); }

.btn--lg { padding: 16px 32px; font-size: 1rem; }
.btn--header { display: none; }

/* Botón de "mensaje de texto" (SMS) y el botón "Enviar mensaje" del
   hero comparten este mismo estilo navy -- así ninguno de los dos
   compite visualmente con el verde de WhatsApp, que ahora queda
   como una opción más dentro del menú, no como el canal "por defecto". */
.btn--sms,
.btn--message {
  background: var(--navy);
  color: var(--white);
  box-shadow: 0 8px 20px rgba(27, 58, 107, 0.3);
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
}
.btn--sms:hover,
.btn--message:hover {
  background: var(--navy-dark);
  box-shadow: 0 14px 28px rgba(27, 58, 107, 0.4);
}

/* ============================================================
   MENÚ "ENVIAR MENSAJE" (hero)
   .msg-menu es el contenedor relativo que ancla el menú
   desplegable (position: absolute) justo debajo del botón.
   ============================================================ */
.msg-menu { position: relative; }

.msg-menu__chevron {
  width: 16px;
  height: 16px;
  transition: transform 0.2s var(--ease);
}
/* Cuando script.js marca el botón como abierto, la flechita se da vuelta */
.btn--message.is-open .msg-menu__chevron { transform: rotate(180deg); }

.msg-menu__list {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 230px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 10;
  /* Arranca invisible y un poco más arriba; script.js le agrega
     .msg-menu__list--open para mostrarlo con una transición suave
     en vez de aparecer/desaparecer de golpe. */
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.msg-menu__list--open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.msg-menu__option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 8px;
  color: var(--gray-700);
  font-weight: 600;
  font-size: 0.9rem;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.msg-menu__option:hover { background: var(--teal-light); color: var(--navy); }
.msg-menu__option svg { width: 18px; height: 18px; flex-shrink: 0; }

/* En Contacto el fondo ya es navy oscuro -- si el botón "Enviar
   mensaje" fuera navy también, se perdería contra el fondo. Ahí lo
   pintamos celeste (el otro color de la marca) para que resalte. */
#contacto .btn--message {
  background: var(--teal);
  color: var(--navy-dark);
  box-shadow: 0 8px 20px rgba(79, 199, 221, 0.35);
}
#contacto .btn--message:hover {
  background: #3fb4cc;
  box-shadow: 0 14px 28px rgba(79, 199, 221, 0.45);
}

/* ============================================================
   HEADER
   position: sticky lo mantiene pegado arriba mientras scrolleás.
   La clase .header--scrolled la agrega script.js cuando bajás
   más de 10px, para que aparezca una sombra sutil (antes de
   scrollear, el header queda "flotando" sin borde).
   ============================================================ */
.header {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  z-index: 100;
  transition: box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}

.header--scrolled {
  box-shadow: 0 6px 24px rgba(27, 58, 107, 0.08);
  border-bottom-color: var(--gray-200);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  padding-bottom: 12px;
}

.header__brand { display: flex; align-items: center; gap: 10px; }
.header__logo { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }

.header__name {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--navy);
  font-size: 1.05rem;
}

.nav { display: none; gap: 28px; }

.nav__link {
  font-weight: 500;
  color: var(--gray-700);
  font-size: 0.95rem;
  position: relative;
}
.nav__link:hover { color: var(--navy); }

/* Link de cambio de idioma: un "pill" chico para distinguirlo
   visualmente de los links de navegación normales. */
.nav__lang {
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--navy);
  border: 1.5px solid var(--gray-200);
  border-radius: 999px;
  padding: 4px 12px;
}
.nav__lang:hover { border-color: var(--teal); color: var(--teal); }

.nav__toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav__toggle span { width: 24px; height: 2px; background: var(--navy); border-radius: 2px; }

.nav--open {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--white);
  padding: 16px 20px 20px;
  border-bottom: 1px solid var(--gray-200);
  gap: 16px;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  padding: 56px 0 48px;
  overflow: hidden; /* recorta los blobs y la foto que se salen del borde */
}

/*
  FOTO DE FONDO DEL HERO
  Usamos ::before en vez de una etiqueta <img> para poder apilar
  la foto, el degradado de legibilidad y los blobs en capas
  separadas con z-index, sin que ninguna interfiera con el texto.
  "inset: 0" es un atajo de "top/right/bottom/left: 0" -- hace que
  este elemento invisible cubra exactamente el mismo espacio que
  .hero. background-size: cover asegura que la foto llene todo el
  espacio sin deformarse, recortando lo que sobre.
*/
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../images/hero-sur-florida.jpg');
  background-size: cover;
  background-position: center 65%; /* prioriza que se vea el sofá/pared, no el techo */
  z-index: 0;
}

/*
  DEGRADADO DE LEGIBILIDAD
  Va encima de la foto (::after) para aclararla donde va el texto.
  En mobile es un velo blanco parejo (el texto ocupa todo el ancho).
  En desktop, la media query de más abajo lo cambia por un degradado
  de izquierda a derecha, porque ahí el texto solo ocupa la mitad
  izquierda y conviene que la foto se vea con más fuerza a la derecha.
*/
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.88);
  z-index: 1;
}

/*
  BLOBS DECORATIVOS
  Son <span> vacíos posicionados de forma absoluta, con un
  gradiente circular de color y mucho "filter: blur()" para que
  se vean como manchas de luz suaves de fondo. Es 100% CSS, cero
  peso extra de imágenes. La animación "float" los mueve muy
  lento en un loop infinito para dar sensación de vida sin
  distraer.
*/
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
  pointer-events: none; /* que no interfieran con los clics */
  z-index: 2; /* por encima de la foto (::before, z-index 0) y el velo (::after, z-index 1) */
}
.blob--1 {
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, var(--teal) 0%, transparent 70%);
  top: -60px;
  right: -60px;
  animation: float 9s ease-in-out infinite;
}
.blob--2 {
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, var(--navy) 0%, transparent 70%);
  bottom: -60px;
  left: -40px;
  opacity: 0.25;
  animation: float 11s ease-in-out infinite reverse;
}

@keyframes float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(20px, 24px); }
}

.hero__inner {
  position: relative;
  z-index: 3; /* por encima de la foto, el velo y los blobs */
  display: flex;
  align-items: center;
  gap: 32px;
  text-align: center;
}

.hero__eyebrow {
  color: var(--teal);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.8rem;
  margin-bottom: 10px;
}

.hero__title { font-size: 2rem; font-weight: 700; margin-bottom: 16px; }

.hero__subtitle {
  color: var(--gray-500);
  font-size: 1.05rem;
  max-width: 480px;
  margin: 0 auto 14px;
}

.hero__tagline {
  color: var(--teal);
  font-weight: 600;
  font-style: italic;
  font-size: 1rem;
  max-width: 480px;
  margin: 0 auto 26px;
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 28px;
}

/* Fila de mini-etiquetas de confianza debajo de los botones */
.hero__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.hero__badges span {
  background: var(--white);
  border: 1px solid var(--gray-200);
  color: var(--navy);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  box-shadow: var(--shadow);
}

/* ============================================================
   SECCIONES GENERALES
   ============================================================ */
.section { padding: 64px 0; }
.section--alt { background: var(--gray-50); }

.section--dark {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-dark) 100%);
  color: var(--white);
}
.section--dark .section__title,
.section--dark .contacto__text { color: var(--white); }

/*
  FOTO DE FONDO EN CONTACTO
  Mismo truco de capas que en el hero (::before para la foto,
  ::after para el degradado), pero acá el degradado navy queda
  bastante más opaco -- el texto es blanco sobre la foto, así que
  necesita mucho más contraste que en el hero (que era navy sobre
  blanco). Lo escribimos sobre #contacto en vez de .section--dark
  para que quede específico a esta sección, no a cualquier futura
  sección oscura que se agregue.
*/
#contacto {
  position: relative;
  overflow: hidden;
}
#contacto::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../images/contacto-cocina.jpg');
  background-size: cover;
  background-position: center;
  z-index: 0;
}
#contacto::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Bajamos la opacidad para que la foto se note más (antes 0.92/0.95).
     Como la foto es de tonos claros, compensamos el contraste del texto
     con un poco de text-shadow en vez de subir la opacidad de nuevo
     -- ver más abajo. */
  background: linear-gradient(160deg, rgba(27, 58, 107, 0.78) 0%, rgba(18, 41, 77, 0.85) 100%);
  z-index: 1;
}

/* Sombra sutil detrás del texto para que se siga leyendo bien ahora
   que se ve más la foto (clara) por debajo del degradado. */
#contacto .section__title,
#contacto .contacto__text,
#contacto .contacto__list li {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
/* El contenido tiene que quedar arriba de las dos capas anteriores */
#contacto .container { position: relative; z-index: 2; }

.section__eyebrow {
  color: var(--teal);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.8rem;
  margin-bottom: 8px;
  text-align: center;
}

.section__title {
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 40px;
}

/* ============================================================
   TARJETAS DE SERVICIOS
   Usamos flexbox con "flex-wrap" en vez de un grid de columnas
   fijas. La razón: con un grid de, por ejemplo, 3 columnas, si hay
   5 tarjetas la última fila queda con 2 tarjetas pegadas a la
   izquierda y un hueco vacío a la derecha, medio feo. Con flex-wrap
   + justify-content: center, cualquier cantidad de tarjetas (3, 5,
   8...) se acomoda sola y la última fila queda centrada. Así no
   hay que tocar el CSS cada vez que se agregue un servicio nuevo.
   ============================================================ */
.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

.card {
  /* flex-basis 260px = ancho "ideal"; crece o se achica según el
     espacio disponible, pero nunca pasa de 340px para que no quede
     gigante cuando hay pocas tarjetas en una fila. */
  flex: 1 1 260px;
  max-width: 340px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 32px 26px;
  box-shadow: var(--shadow);
  text-align: center;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
/* Al pasar el mouse, la tarjeta "flota" un poco -- da sensación premium */
.card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }

.card__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  background: var(--teal-light);
  color: var(--navy);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.card:hover .card__icon { background: var(--navy); color: var(--white); }
.card__icon svg { width: 26px; height: 26px; }

.card__title { font-size: 1.15rem; margin-bottom: 10px; }
.card__text { color: var(--gray-500); font-size: 0.95rem; }

/* Link opcional al final de una tarjeta (por ahora solo en Residencial),
   que ancla a la sección Tipos de limpieza. La flechita se corre un
   poco a la derecha en hover como pequeña señal de interactividad. */
.card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  color: var(--teal);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
}
.card__link svg { width: 14px; height: 14px; transition: transform 0.2s var(--ease); }
.card__link:hover svg { transform: translateX(3px); }

/* ============================================================
   TIPOS DE LIMPIEZA (Profunda vs Regular)
   Dos columnas simples, sin ícono -- el contraste está en el
   texto, no hace falta más adorno visual acá.
   ============================================================ */
/* Comparación de 2 columnas (Profunda vs Regular), cada una con 4
   categorías (áreas comunes, cocina, baños, habitaciones) y su lista
   de ítems -- reemplaza las tarjetas simples de antes por algo más
   parecido a los folletos de la clienta. */
.cleaning-compare {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  margin-bottom: 28px;
  align-items: stretch;
}
.cleaning-col {
  flex: 1 1 320px;
  max-width: 460px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 30px 28px;
  box-shadow: var(--shadow);
}
.cleaning-col__title {
  font-size: 1.2rem;
  margin-bottom: 4px;
}
.cleaning-col__subtitle {
  color: var(--gray-500);
  font-size: 0.9rem;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--teal-light);
}

/*
  .cleaning-group ahora es un <details> nativo de HTML: el navegador
  ya sabe abrirlo/cerrarlo solo con el atributo [open], sin JS. Solo
  le damos estilo al triángulo que indica abierto/cerrado y ocultamos
  el marcador por defecto que el navegador le pone al <summary>.
*/
.cleaning-group {
  margin-bottom: 4px;
  border-bottom: 1px solid var(--gray-200);
}
.cleaning-group:last-child { border-bottom: none; margin-bottom: 0; }

.cleaning-group__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  cursor: pointer;
  list-style: none; /* Firefox: quita el triangulito nativo del <summary> */
}
/* Chrome/Safari usan un pseudo-elemento en vez de list-style para el marcador */
.cleaning-group__header::-webkit-details-marker { display: none; }

.cleaning-group__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--teal-light);
  color: var(--teal);
}
.cleaning-group__icon svg { width: 16px; height: 16px; }
.cleaning-group__title {
  font-size: 0.95rem;
  color: var(--navy);
}

.cleaning-group__list {
  list-style: none;
  padding-left: 40px;
  padding-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cleaning-group__list li {
  position: relative;
  color: var(--gray-500);
  font-size: 0.88rem;
  line-height: 1.4;
}
.cleaning-group__list li::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal);
}

/* Aclaración de qué no incluye -- fondo distinto para que se lea
   como una nota aparte, no como parte de las dos tarjetas de arriba. */
.cleaning-note {
  max-width: 680px;
  margin: 0 auto;
  background: var(--teal-light);
  border-radius: var(--radius);
  padding: 22px 26px;
  text-align: center;
}
.cleaning-note__title {
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
}
.cleaning-note__text { color: var(--navy); font-size: 0.9rem; opacity: 0.85; }

/* ============================================================
   PREGUNTAS FRECUENTES (FAQ)
   Mismo mecanismo que .cleaning-group (details/summary nativos),
   pero sin ícono circular -- acá el foco es la pregunta, no una
   categoría. Lista angosta y centrada porque se lee mejor en una
   sola columna que en dos, a diferencia de Tipos de limpieza.
   ============================================================ */
.faq-list {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.faq-item { border-bottom: 1px solid var(--gray-200); }
.faq-item:last-child { border-bottom: none; }

.faq-item__question {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 4px;
  cursor: pointer;
  font-weight: 600;
  color: var(--navy);
  list-style: none;
}
.faq-item__question::-webkit-details-marker { display: none; }

.faq-item__answer {
  padding: 0 4px 18px;
  color: var(--gray-500);
  font-size: 0.95rem;
  line-height: 1.5;
}

/*
  Ícono de "+" que se transforma en "−" -- lo usan tanto las categorías
  de Tipos de limpieza (.cleaning-group) como las preguntas del FAQ
  (.faq-item), así que en vez de duplicar el CSS para cada una, el
  selector de abajo apunta a "cualquier <details> abierto que tenga
  adentro un .accordion-icon", sin importar de qué sección sea.
  Son 2 barras (una horizontal, una vertical) superpuestas con
  posicionamiento absoluto formando el "+"; al abrirse, la barra
  vertical rota 90° y queda acostada sobre la horizontal, formando "−".
*/
.accordion-icon {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-left: auto;
}
.accordion-icon::before,
.accordion-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--teal);
  transition: transform 0.2s ease;
}
.accordion-icon::before {
  width: 14px;
  height: 2px;
  transform: translate(-50%, -50%);
}
.accordion-icon::after {
  width: 2px;
  height: 14px;
  transform: translate(-50%, -50%);
}
details[open] > summary .accordion-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* ============================================================
   PASOS ("Cómo funciona")
   .step__number es el círculo con 01/02/03. En desktop, el
   selector ".step:not(:last-child)::after" dibuja una línea
   horizontal que conecta cada paso con el siguiente (ver media
   query al final del archivo).
   ============================================================ */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

.step { text-align: center; }

.step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 14px;
}

.step__title { font-size: 1.1rem; margin-bottom: 8px; }
.step__text { color: var(--gray-500); font-size: 0.95rem; max-width: 260px; margin: 0 auto; }

/* ============================================================
   INTRO + VALORES (Por qué elegirnos)
   ============================================================ */
.nosotros__intro-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 560px;
  margin: 0 auto 40px;
  text-align: center;
}
.nosotros__photo {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover; /* recorta la foto para llenar el círculo sin deformarse */
  border: 4px solid var(--white);
  box-shadow: var(--shadow-lg);
  flex-shrink: 0;
}
.nosotros__intro {
  color: var(--gray-500);
  margin: 0;
}

/* Checklist de beneficios (menos estrés, más tiempo libre, etc.),
   reforzando el mensaje del hero con íconos de check en vez de texto
   corrido -- pensado para escanearse rápido de un vistazo. */
.benefits-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
  max-width: 640px;
  margin: 0 auto 40px;
  padding: 0;
}
.benefits-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--navy);
  font-weight: 600;
  font-size: 0.95rem;
}
.benefits-list svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--teal);
}

/* Mismo patrón visual que .card__icon: círculo con el ícono adentro,
   así "Honestidad/Excelencia/Compromiso" se sienten parte de la misma
   familia visual que las tarjetas de servicios, no un componente aparte. */
.values {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  margin-bottom: 48px;
}
.value { flex: 1 1 200px; max-width: 240px; text-align: center; }
.value__icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  background: var(--teal-light);
  color: var(--navy);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.value__icon svg { width: 24px; height: 24px; }
.value__title { font-size: 1.05rem; margin-bottom: 6px; }
.value__text { color: var(--gray-500); font-size: 0.9rem; }

/* ============================================================
   STATS (Por qué elegirnos)
   ============================================================ */
.stats { display: grid; grid-template-columns: 1fr; gap: 28px; text-align: center; }

.stat__number {
  display: block;
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--teal);
}
.stat__label { display: block; margin-top: 6px; color: var(--gray-500); font-weight: 500; font-size: 0.95rem; }

/* ============================================================
   COTIZACIÓN RÁPIDA (calendario + formulario)
   .quote es la tarjeta contenedora; en celular el calendario y
   el formulario se apilan uno debajo del otro (grid-template-
   columns: 1fr), y en desktop pasan a estar lado a lado (ver la
   media query al final del archivo).
   ============================================================ */
.quote {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 22px;
  max-width: 640px;
  margin: 0 auto;
}

.calendar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.calendar__label {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--navy);
  text-transform: capitalize; /* "agosto 2026" -> se ve prolijo igual */
}
.calendar__nav {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--gray-200);
  background: var(--white);
  color: var(--navy);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.calendar__nav:hover:not(:disabled) { background: var(--navy); color: var(--white); }
.calendar__nav:disabled { opacity: 0.3; cursor: not-allowed; }

/* Grilla de 7 columnas: una por cada día de la semana */
.calendar__weekdays,
.calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.calendar__weekdays span {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
}

.calendar__day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: none;
  background: var(--gray-50);
  color: var(--gray-700);
  font-weight: 500;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.15s var(--ease);
}
.calendar__day:hover:not(:disabled) { background: var(--teal-light); transform: translateY(-2px); }
.calendar__day:disabled { background: transparent; color: var(--gray-200); cursor: not-allowed; }
.calendar__day--empty { background: transparent; cursor: default; pointer-events: none; } /* relleno antes del día 1 */
.calendar__day--today { box-shadow: inset 0 0 0 2px var(--teal); } /* marca el día de hoy */
.calendar__day--selected { background: var(--navy); color: var(--white); } /* el día que eligió el cliente */

.quote__label {
  display: block;
  font-weight: 600;
  color: var(--navy);
  font-size: 0.9rem;
  margin-bottom: 8px;
}
.quote__select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--gray-200);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--gray-700);
  background: var(--white);
  margin-bottom: 20px;
}

.quote__toggle { display: flex; gap: 10px; margin-bottom: 18px; }
.quote__toggle-btn {
  flex: 1;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--gray-200);
  background: var(--white);
  color: var(--gray-700);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.quote__toggle-btn:hover { border-color: var(--teal); }
/* Se activa con JS cuando el cliente elige Mañana o Tarde */
.quote__toggle-btn--active { background: var(--navy); color: var(--white); border-color: var(--navy); }

.quote__hint { font-size: 0.85rem; color: var(--gray-500); margin-bottom: 16px; }
.quote__hint--ready { color: var(--whatsapp-dark); font-weight: 600; }

/* Los dos botones de envío, uno debajo del otro con espacio entre ellos */
.quote__buttons { display: flex; flex-direction: column; gap: 12px; }

/* Cada botón arranca "apagado" hasta que se completa día + horario */
.quote__submit { width: 100%; opacity: 0.45; pointer-events: none; }
.quote__submit--enabled { opacity: 1; pointer-events: auto; }

/* ============================================================
   ZONA
   ============================================================ */
.zona__inner { text-align: center; }
.zona__text { color: var(--gray-500); max-width: 520px; margin: 0 auto 26px; }
.zona__inner .btn { margin: 0 auto; }

/* ============================================================
   CONTACTO
   ============================================================ */
.contacto__inner { text-align: center; }
.contacto__text { color: rgba(255,255,255,0.75); max-width: 440px; margin: 0 auto 30px; }

.contacto__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  margin-bottom: 34px;
}
.contacto__list li { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.contacto__list svg { width: 20px; height: 20px; color: var(--teal); flex-shrink: 0; }
.contacto__inner .btn { margin: 0 auto; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--navy-dark); color: rgba(255,255,255,0.7); padding: 28px 0; }
.footer__inner { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.footer__brand { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--white); }
.footer__logo { width: 30px; height: 30px; border-radius: 50%; }
.footer__copy { font-size: 0.85rem; }

/* ============================================================
   WHATSAPP FLOTANTE
   .whatsapp-float__ring es un círculo extra detrás del botón
   que se expande y desvanece en loop (@keyframes pulse), como
   una onda de radar -- llama la atención sin ser invasivo.
   ============================================================ */
.whatsapp-float {
  position: fixed;
  bottom: 22px;
  right: 22px;
  width: 58px;
  height: 58px;
  background: var(--whatsapp);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px rgba(37, 211, 102, 0.45);
  z-index: 90;
  transition: transform 0.2s var(--ease);
}
.whatsapp-float:hover { transform: scale(1.08); }
.whatsapp-float svg { width: 30px; height: 30px; color: var(--white); position: relative; z-index: 1; }

.whatsapp-float__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--whatsapp);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0% { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* ============================================================
   RESPONSIVE: TABLET / DESKTOP
   Todo lo de arriba está pensado para celular primero (mobile-
   first). Acá, a partir de 720px de ancho, se reordenan los
   elementos a un layout horizontal más propio de escritorio.
   ============================================================ */
@media (min-width: 720px) {
  .btn--header { display: inline-flex; }
  .nav { display: flex; }
  .nav__toggle { display: none; }

  .hero__inner { text-align: left; padding: 64px 0; }
  /* max-width en vez de flex:1 -- así el texto no se estira todo el
     ancho del contenedor y queda del lado izquierdo, dejando ver la
     sala y las palmeras de la foto del lado derecho. */
  .hero__text { max-width: 540px; }
  .hero__subtitle { margin: 0 0 14px; }
  .hero__tagline { margin: 0 0 26px; }
  .hero__actions { flex-direction: row; margin-bottom: 22px; }
  .hero__badges { justify-content: flex-start; }

  /* Foto al lado del texto, en vez de arriba -- se ve más "presentación
     personal" y menos "foto de perfil sola arriba de un párrafo". */
  .nosotros__intro-wrap {
    flex-direction: row;
    text-align: left;
    max-width: 780px;
    gap: 32px;
  }
  .nosotros__photo {
    width: 240px;
    height: 240px;
  }

  /* En desktop, el velo pasa de blanco parejo a un degradado que se
     desvanece de izquierda a derecha: bien opaco donde está el texto
     (para que se siga leyendo), casi transparente hacia la derecha
     (para que se vea la foto con más fuerza). */
  .hero::after {
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0.9) 40%,
      rgba(255, 255, 255, 0.35) 75%,
      rgba(255, 255, 255, 0.05) 100%
    );
  }

  .section__title { font-size: 2rem; }

  .stats { grid-template-columns: repeat(3, 1fr); }

  /* 3 pasos en fila, con una línea que los conecta */
  .steps { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .step { position: relative; }
  .step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 24px;
    left: calc(50% + 44px);
    width: calc(100% - 68px);
    height: 2px;
    background: var(--gray-200);
  }

  /* En columna (mobile), .contacto__list ya queda centrado gracias a
     align-items: center de la regla base. Pero al pasar a fila acá,
     "align-items" solo centra en el eje vertical -- para centrar en
     el eje horizontal (que es el que ahora importa) hace falta
     justify-content, si no, los elementos se van al inicio (izquierda). */
  .contacto__list { flex-direction: row; justify-content: center; gap: 40px; }

  /* Calendario y formulario lado a lado en pantallas grandes */
  .quote { grid-template-columns: 1fr 1fr; padding: 34px; }
}

@media (min-width: 960px) {
  .hero__title { font-size: 2.6rem; }
}

/* Respeta a quienes desactivan animaciones en su sistema operativo */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .blob, .whatsapp-float__ring { animation: none; }
}