/* ==========================================================================
   CASA CONSUELO - INSTITUTIONAL DESIGN SYSTEM & STYLESHEET
   Location: Calvillito, Aguascalientes, México
   ========================================================================== */

/* --------------------------------------------------------------------------
   BREAKPOINT SCALE — use these five tiers for new work
   --------------------------------------------------------------------------
   The stylesheet grew to 13 distinct breakpoints, including off-by-one pairs
   (767/768/769, 1023/1024) whose rules silently did not apply at the exact
   boundary width. The 767 and 1023 blocks have been merged into 768 and 1024.

   Target scale for anything new:
       --bp-sm:   480px   small phone
       --bp-md:   640px   large phone / small tablet
       --bp-lg:   768px   tablet portrait
       --bp-xl:  1024px   tablet landscape
       --bp-2xl: 1280px   desktop

   Still present and tolerated (each used once or twice, with a real purpose):
       540px, 600px, 900px, 960px, 1080px, 1260px, and min-width: 769px.
   Please converge new rules onto the five tiers above rather than adding more.
   -------------------------------------------------------------------------- */

/* --- CSS Custom Properties (Design Tokens) --- */
:root {
  /* 60-30-10 Brand Palette */
  --bg-smoke: #F5F5F5;
  --bg-white: #FFFFFF;
  --bg-card: #FFFFFF;
  --bg-subtle: #EFEFEF;

  --primary-green: #4D8A56;
  --primary-green-dark: #3D6F44;
  --primary-green-light: #5FA569;
  --primary-green-surface: #EAF3EC;

  --accent-blue: #6A95C2;
  --accent-blue-hover: #547DA9;
  --accent-blue-light: #EBF2F8;
  --accent-blue-dark: #406894;

  --text-dark: #2B2B2B;
  --text-muted: #555555;
  --text-light: #777777;
  --text-inverse: #FFFFFF;

  --whatsapp-color: #25D366;
  --whatsapp-hover: #1EBE5D;

  --border-light: #E2E8F0;
  --border-focus: #6A95C2;

  /* Typography */
  --font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Elevations */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 20px 35px rgba(0, 0, 0, 0.15);

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 9999px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 600ms ease;

  /* Max Widths */
  --container-max-width: 1240px;
  --nav-height: 80px;
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--bg-smoke);
  color: var(--text-dark);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

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

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--text-dark);
  line-height: 1.25;
  font-weight: 700;
}

p {
  margin-bottom: 1rem;
}

p:last-child {
  margin-bottom: 0;
}

/* --- Layout Utility --- */
.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.section {
  padding: 5rem 0;
}

@media (max-width: 768px) {
  .section {
    padding: 3.5rem 0;
  }
}

.section-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 3.5rem auto;
}

.section-badge {
  display: inline-block;
  background-color: var(--primary-green-surface);
  color: var(--primary-green-dark);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.35rem 1rem;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.85rem;
}

.section-badge.blue {
  background-color: var(--accent-blue-light);
  color: var(--accent-blue-dark);
}

.section-title {
  font-size: 2.25rem;
  margin-bottom: 1rem;
  color: var(--text-dark);
}

@media (max-width: 768px) {
  .section-title {
    font-size: 1.75rem;
  }
}

.section-subtitle {
  font-size: 1.125rem;
  color: var(--text-muted);
  font-weight: 400;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--transition-normal);
  border: 2px solid transparent;
  text-align: center;
}

.btn-primary {
  background-color: var(--accent-blue);
  color: var(--text-inverse);
  box-shadow: 0 4px 14px rgba(106, 149, 194, 0.4);
}

.btn-primary:hover, .btn-primary:focus-visible {
  background-color: var(--accent-blue-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(106, 149, 194, 0.5);
}

.btn-secondary {
  background-color: var(--primary-green);
  color: var(--text-inverse);
}

.btn-secondary:hover, .btn-secondary:focus-visible {
  background-color: var(--primary-green-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(77, 138, 86, 0.35);
}

.btn-outline {
  background-color: rgba(0, 0, 0, 0.35);
  color: var(--text-inverse);
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.btn-outline:hover, .btn-outline:focus-visible {
  background-color: rgba(255, 255, 255, 0.25);
  border-color: #FFFFFF;
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.btn-whatsapp {
  background-color: var(--whatsapp-color);
  color: var(--text-inverse);
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
}

.btn-whatsapp:hover, .btn-whatsapp:focus-visible {
  background-color: var(--whatsapp-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
}

/* --- Header / Navigation --- */
.site-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: var(--bg-white);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-normal), background-color var(--transition-normal);
}

.site-header.scrolled {
  box-shadow: var(--shadow-md);
  background-color: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(8px);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
  max-width: 1360px;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: Georgia, 'Noto Serif', serif;
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--primary-green-dark);
  letter-spacing: 0.02em;
  line-height: 1;
  flex-shrink: 0;
  margin-right: clamp(1rem, 2vw, 2.5rem);
}

.brand-logo span {
  font-family: Georgia, 'Noto Serif', serif;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
  display: inline-block;
  white-space: nowrap;
}

.brand-logo .brand-small,
.brand-logo span .brand-small {
  font-size: 0.8em;
  letter-spacing: inherit;
}

.brand-logo-img {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border-radius: var(--radius-sm);
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 1.2vw, 1.6rem);
  flex-grow: 1;
  justify-content: flex-end;
}

.nav-links {
  display: flex;
  align-items: center;
  list-style: none;
  gap: clamp(0.4rem, 0.85vw, 1.25rem);
}

.nav-link {
  font-weight: 500;
  font-size: 0.88rem;
  color: var(--text-dark);
  position: relative;
  padding: 0.35rem 0.2rem;
  text-align: center;
  line-height: 1.22;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  white-space: normal;
}

.nav-br {
  display: inline;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--primary-green);
  transition: width var(--transition-fast);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

.nav-link.active {
  color: var(--primary-green-dark);
  font-weight: 600;
}

.nav-cta {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: clamp(0.4rem, 0.8vw, 1rem);
}

.nav-cta .btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.15rem;
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.6rem;
  color: var(--text-dark);
  cursor: pointer;
  padding: 0.5rem;
}

@media (max-width: 1080px) {
  .site-header,
  .site-header.scrolled {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .nav-toggle {
    display: block;
  }

  .nav-menu {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    width: 100%;
    height: calc(100vh - var(--nav-height));
    height: calc(100dvh - var(--nav-height));
    max-height: calc(100dvh - var(--nav-height));
    background-color: var(--bg-white);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: 1.25rem 1.5rem 3rem 1.5rem;
    box-sizing: border-box;
    transform: translateX(100%);
    transition: transform var(--transition-normal);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: var(--shadow-lg);
    gap: 1.25rem;
    z-index: 999;
  }

  .nav-menu.is-active {
    transform: translateX(0);
  }

  .nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .nav-links li {
    width: 100%;
    display: block;
    margin: 0;
    padding: 0;
  }

  .nav-br {
    display: none;
  }

  .nav-link {
    font-size: 1.05rem;
    width: 100%;
    box-sizing: border-box;
    padding: 0.8rem 0.5rem;
    border-bottom: 1px solid var(--border-light);
    text-align: left;
    display: block;
    line-height: 1.4;
  }

  .nav-cta {
    margin-top: 0.75rem;
    margin-left: 0;
    width: 100%;
    padding-bottom: 1.5rem;
    flex-shrink: 0;
  }

  .nav-cta .btn,
  .nav-cta .btn-whatsapp {
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
    padding: 0.75rem 1.25rem;
    font-size: 1rem;
  }
}

/* Global Section Anchor Scroll Offset for Sticky Header */
section[id],
div[id].section {
  scroll-margin-top: var(--nav-height, 80px);
}

/* --- Hero Section & 6-Slide High-Visibility Facility Carousel ---
   Estructura (23-24 sep 2026). El hero es UNA seccion de exactamente una
   pantalla util, con este reparto de capas:

     .hero-carousel        -> z:0  fotografias de fondo (absolute)
     .hero-overlay         -> z:1  velo radial (absolute)
     .hero-main-view       -> z:2  TODO el contenido en flujo: titular,
                                    antetitulo, parrafo, CTAs y los tres sellos
     .carousel-indicators  -> z:3  los cuatro puntos, en absoluto abajo a la
                                    derecha

   El carrusel y el velo son `position: absolute` respecto a la SECCION (no a
   una franja), asi que acompanan al hero en el scroll exactamente 1:1.
   ------------------------------------------------------------------------- */
.hero-section,
#inicio {
  position: relative;
  /* display:block y NO flex. Antes era `display:flex; align-items:flex-end`, que
     anclaba el bloque de texto al fondo de la seccion; como el fondo de la
     seccion ahora incluye tambien la franja inferior, ese anclaje desplazaba el
     texto "de mas" al cambiar la altura. En flujo normal cada franja se apila. */
  display: block;
  overflow: hidden;
  color: var(--text-inverse);
  background-color: #121A17;
  padding-bottom: 0;
  scroll-margin-top: var(--nav-height);
}

.hero-section .container {
  margin-left: 0;
  max-width: 100%;
  padding-left: clamp(1.75rem, 3.8vw, 3.75rem);
  padding-right: 1.25rem;
}

/* --- A. Primera pantalla ----------------------------------------------------
   `min-height` con `dvh`: la unidad dinamica sigue a la barra del navegador, de
   modo que la franja llena SIEMPRE el area visible (si la barra ya esta oculta
   al cargar, no queda hueco abajo). Se declara antes `svh` como respaldo estable
   para navegadores sin `dvh`.
   `justify-content: flex-end` apoya el bloque de texto en el pliegue, sobre la
   zona mas oscura del velo radial (nucleo en la esquina inferior izquierda).
   Desde el 23-24 sep 2026 esta franja contiene TODO el hero: titular,
   antetitulo, parrafo, CTAs y sellos. Los indicadores del carrusel quedan fuera,
   en absoluto, asi que `padding-bottom` es el unico aire inferior: en escritorio
   2.5rem basta porque el bloque de texto (520px) termina mucho antes del borde
   derecho, donde viven los puntos. En movil NO basta y se amplia: ver el
   override de `@media (max-width: 768px)`. */
.hero-main-view {
  position: relative;
  z-index: 2;              /* por encima del velo (z:1) */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: calc(100vh - var(--nav-height));
  min-height: calc(100svh - var(--nav-height));
  padding-bottom: 2.5rem;
  box-sizing: border-box;
}

/* --- B. Franja bajo el pliegue — ELIMINADA (23-24 sep 2026) ------------------
   `.hero-scroll-content` YA NO EXISTE. Los sellos de confianza subieron al
   bloque de texto (dentro de `.hero-content`, justo debajo de los CTAs) y los
   indicadores del carrusel pasaron a posicionarse en ABSOLUTO en la esquina
   inferior derecha. Al quedarse sin contenido, el envoltorio solo aportaba
   `padding-top` + `gap` + `padding-bottom` (~60px de alto muerto) y obligaba a
   que el hero midiera MAS de un pliegue, que es justo lo contrario de lo que se
   busca: mas fotografia visible en la primera pantalla.
   El hero vuelve a medir EXACTAMENTE una pantalla util.
   Si algun dia se recupera, recordar que tambien tenia override en
   `@media (max-width: 768px)`. */

.hero-carousel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;   /* capa base: por debajo del velo (z:1) */
}

.hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  /* Solo opacity/visibility: transicion estatica suave entre diapositivas */
  transition: opacity 1000ms ease-in-out, visibility 1000ms ease-in-out;
  background-size: cover;
  background-position: center;
  /* Sin transform ni animacion continua de zoom: comportamiento completamente estatico
     en scroll (scroll 1:1 natural con el resto de la pagina sin desfase ni parallax). */
  transform: none;
}

.hero-slide.active {
  opacity: 1;
  visibility: visible;
  transform: none;
  animation: none;
  will-change: auto;
}


/* --- Encuadre por diapositiva (escritorio) ---------------------------------
   Con `cover` en un marco apaisado el desbordamiento es siempre vertical, asi
   que background-position-x no tiene efecto y solo importa el eje Y: cuanto
   mayor el porcentaje, mas abajo se toma la ventana de la foto.
   - aerea   : 45% deja el complejo completo y algo de cielo arriba.
   - fachada : 55% sube el logotipo CASA CONSUELO por encima del bloque de texto
               (la foto es vertical y se recorta mucho mas que las otras).
   - alberca : centrada, ya encuadra bien.
   - patio   : 100% descarta el cielo, que era el 40% superior de la foto.
   ------------------------------------------------------------------------- */
.hero-slide--aerea   { background-position: center 45%; }
.hero-slide--fachada { background-position: center 55%; }
.hero-slide--alberca { background-position: center 50%; }
.hero-slide--patio   { background-position: center 100%; }

/* Velo del hero: RADIAL anclado en la esquina INFERIOR IZQUIERDA (`at 0% 100%`).
   ---------------------------------------------------------------------------
   ESTILO ORIGINAL RESTAURADO (23-24 sep 2026). Vuelve el radial con el que se
   publico el sitio, en lugar del `linear-gradient(to top right)` que lo habia
   sustituido. La diferencia no es cosmetica: un gradiente LINEAL reparte alfa
   por TODO el plano (cada pixel recibe algo de negro), asi que apaga la foto
   entera de borde a borde. Un radial tiene un nucleo localizado y llega a alfa
   0 REAL en el extremo opuesto, de modo que la imagen solo se oscurece alrededor
   del texto y se ve a plena luz en el resto.

   El nucleo cae justo donde vive el bloque de texto: abajo a la izquierda,
   porque `.hero-main-view` lo apoya en el pliegue con `justify-content: flex-end`.

   Los radios son los ORIGINALES y no son casuales:
   - horizontal `clamp(900px, 76vw, 1180px)`: en 1440px da 1094px, asi que el
     borde derecho del bloque de texto (520px) queda a t~0.48 (alfa ~0.85)
     mientras el ultimo ~24% del ancho ya esta practicamente limpio.
   - vertical `clamp(550px, 72vh, 760px)`: MAS CORTO que el horizontal, de modo
     que el desvanecido es mas rapido hacia arriba que hacia la derecha. Eso es
     justo lo que deja respirar la mitad superior de la fotografia.

   Capas: carrusel z:0  ->  velo z:1  ->  contenido z:2  ->  indicadores z:3.
   `pointer-events: none` para no robar los clics de los puntos del carrusel. */
.hero-overlay {
  display: block;
  position: absolute;
  inset: 0;                /* top / right / bottom / left = 0 */
  width: 100%;
  height: 100%;            /* 100% de la SECCION, no solo del pliegue */
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    ellipse clamp(900px, 76vw, 1180px) clamp(550px, 72vh, 760px) at 0% 100%,
    rgba(6, 14, 10, 0.92) 0%,
    rgba(6, 14, 10, 0.88) 38%,
    rgba(6, 14, 10, 0.80) 60%,
    rgba(6, 14, 10, 0.65) 75%,
    rgba(6, 14, 10, 0.38) 88%,
    rgba(6, 14, 10, 0.12) 96%,
    rgba(6, 14, 10, 0) 100%
  );
}

/* Sin recuadros ni tarjetas: el contenido flota de manera natural sobre el difuminado.
   ---------------------------------------------------------------------------
   IMPORTANTE (23 sep 2026). Aqui vivian `will-change: transform` y
   `transform: translateZ(0)`, que promocionaban este bloque a su PROPIA capa del
   compositor. Una capa promocionada la mueve el hilo del compositor mientras el
   resto de la pagina lo hace en el hilo principal, y ese desfase es justo el que
   se veia como "parallax"/lag del texto respecto al carrusel de fondo.
   En flujo normal el navegador mueve ambos juntos, 1:1 con el scroll.
   NO volver a anadir `transform` ni `will-change` a este elemento.
   --------------------------------------------------------------------------- */
.hero-content {
  position: relative;      /* flujo normal: sube con la pagina */
  z-index: 2;
  padding: 0;
  /* Tope de lectura fijo: 520px. Deja libre el resto del ancho para que la
     fotografia del carrusel se vea a la derecha del bloque de texto. */
  max-width: 520px;
  margin-left: 0;
  margin-right: auto;
  text-align: left;
  background: transparent;
  border-radius: 0;
  border: none;
  box-shadow: none;
  animation: heroTextFadeIn 650ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes heroTextFadeIn {
  /* Solo opacidad. La version anterior animaba `translateY(12px)`: ademas de ser
     un desplazamiento del envoltorio de texto, con `forwards` dejaba un
     `transform` PERMANENTE al terminar (bloque contenedor + capa propia). */
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-content {
    animation: none;
    opacity: 1;
  }
}

/* Nota: aqui vivia `.hero-body { display: contents }`. Ese envoltorio desaparecio
   al partir el hero en .hero-main-view + .hero-scroll-content (23 sep 2026). */

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background-color: rgba(77, 138, 86, 0.45);
  backdrop-filter: blur(8px);
  color: #A3E6B1;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.35rem 1rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(163, 230, 177, 0.35);
  margin-bottom: 0.75rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.hero-tag .tag-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #25D366;
  box-shadow: 0 0 10px #25D366;
  display: inline-block;
  animation: pulseLight 2s infinite;
}

@keyframes pulseLight {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

.hero-title {
  font-size: clamp(1.65rem, 2.5vw, 2.25rem);
  font-weight: 800;
  line-height: 1.18;
  color: #FFFFFF;
  margin-bottom: 0.25rem;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95), 0 1px 3px rgba(0, 0, 0, 0.9);
}

.hero-subtitle {
  font-size: clamp(0.98rem, 1.35vw, 1.15rem);
  font-weight: 700;
  color: #4aad52;
  margin-bottom: 0.45rem;
  line-height: 1.25;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}

.hero-description {
  margin-bottom: 0.75rem;
}

.hero-description p {
  font-size: 0.925rem;
  color: #F1F5F9;
  line-height: 1.48;
  margin-bottom: 0;
  font-weight: 400;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

.hero-description p:last-child {
  margin-bottom: 0;
}

.hero-text-mark {
  background-color: rgba(77, 138, 86, 0.4);
  color: #FFFFFF;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  font-weight: 600;
  border-bottom: 2px solid #4ADE80;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;      /* botones pegados al borde izquierdo del bloque */
  justify-content: flex-start;  /* CTAs alineados a la izquierda, como el texto */
  gap: 0.75rem;
  /* Desde el 23-24 sep 2026 los sellos van justo debajo, dentro de la misma
     columna, asi que la separacion la aporta el `margin-top` de
     `.hero-highlights` y aqui el margen inferior sigue siendo 0.
     En ESCRITORIO los CTAs siguen alineados a la izquierda; el centrado se pide
     solo en movil (ver `@media (max-width: 768px)`). */
  margin-bottom: 0;
}

/* Sellos de confianza — 23-24 sep 2026.
   Estan DEBAJO de los CTAs. En el HTML son HERMANOS de `.hero-content`, no hijos:
   en movil tienen que poder caer por debajo del pliegue, y dentro de la columna
   de texto (que es la que define el pliegue en movil) no podrian.
   ESCRITORIO: `max-width: 520px` + `margin-left: 0` reproduce EXACTAMENTE la caja
   que tenian cuando vivian dentro de `.hero-content` (520px alineados a la
   izquierda), asi que el escritorio no cambia. El `gap` de 0.85rem es el que
   necesita la columna: con tres columnas de ~165px un hueco mayor estrangulaba
   el texto.
   El `border-top` sigue separando los sellos de los botones. */
.hero-highlights {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 0.85rem;
  margin-top: 1rem;
  margin-bottom: 0;
  max-width: 520px;        /* misma caja que dentro de .hero-content */
  margin-left: 0;
  margin-right: auto;
}

.highlight-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  flex: 1 1 0;
  min-width: 0;
  color: #F1F5F9;
  font-size: 0.825rem;
  font-weight: 500;
  line-height: 1.35;
}

.highlight-item svg {
  flex-shrink: 0;
  color: #4ADE80;
  margin-top: 0.125rem;
}

/* --- Indicador del carrusel — ESQUINA INFERIOR DERECHA -----------------------
   23-24 sep 2026. Pasa de estar EN FLUJO en la franja inferior a posicionarse
   en ABSOLUTO respecto a `.hero-section` (que es `position: relative`). Motivo:
   liberar el centro del hero y reservar el pliegue para lo importante
   (fotografia + texto + CTAs). `right` reutiliza el mismo clamp que el padding
   izquierdo del contenedor para que el punto quede alineado con la caja de
   texto en el eje horizontal.

   HALO PROPIO (`::before`): imprescindible porque el velo radial tiene el
   nucleo abajo a la IZQUIERDA y en la esquina inferior derecha ya esta a alfa 0.
   Sobre las fotos claras (el cielo de la vista aerea) un punto blanco al 40%
   seria practicamente invisible. El halo es un radial difuso, NO una pildora:
   no tiene borde ni esquinas, asi que no se percibe como caja. Va con
   `z-index: -1` para quedar detras de los puntos pero dentro del contexto de
   apilado del contenedor (z:3), es decir por encima del velo.

   SIN pildora (23 sep 2026): nada de fondo, borde, padding ni `backdrop-filter`.
   Para que los puntos se lean sobre la foto se usa una sombra proyectada sobre
   el propio punto, mas el halo de arriba. */
.carousel-indicators {
  position: absolute;
  right: clamp(1.25rem, 3.8vw, 3.75rem);
  /* 1.25rem y NO 1rem (24 sep 2026). El halo del `::before` baja 20px por debajo
     de esta caja; con 16px el halo terminaba 4px POR DEBAJO del borde inferior de
     la seccion, y el `overflow: hidden` de `.hero-section` lo cortaba en seco
     dejando una linea recta horizontal. Con 20px el borde inferior del halo cae
     EXACTAMENTE sobre el borde de la seccion, que es donde el degradado ya vale
     alfa 0. Los puntos suben 4px, imperceptible, y asi movil y escritorio
     comparten la misma geometria. */
  bottom: 1.25rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;                      /* separacion exacta entre puntos visibles */
  background: none;
  padding: 0;
  border: none;
  border-radius: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.75));
}

.carousel-indicators::before {
  content: "";
  position: absolute;
  /* CAUSA DE LOS BORDES DUROS (24 sep 2026). Aqui ponia `ellipse at center` SIN
     tamano, y un radial sin tamano usa `farthest-corner`: la elipse se estira
     hasta la esquina mas lejana de la caja, de modo que la rampa de alfa termina
     ANTES de llegar al borde y luego el degradado se corta en seco. Medido en
     escritorio: caja 151x112 -> rx=106,8 / ry=79,2, y a la altura del centro el
     borde lateral de la caja esta en t=0,707, es decir alfa ~0,10. Ese escalon
     de 0,10 a 0 sobre una foto clara es la linea recta que se veia.
     Ahora `closest-side`: la elipse queda INSCRITA en la caja, toca los cuatro
     bordes y alli vale alfa 0. No hay escalon en ningun borde y el tamano se
     adapta solo, sin numeros que mantener.
     La caja tambien se ajusta para que quepa dentro de la seccion: 20px de
     inset inferior + los 20px de `bottom` = el halo termina justo en el borde
     de la seccion (antes -34px lo sacaba 14-18px fuera y `overflow: hidden` lo
     cortaba). Y 24px de inset lateral + rx=53,5 deja el halo por dentro del
     borde derecho. */
  inset: -20px -24px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse closest-side at center,
    rgba(6, 14, 10, 0.58) 0%,
    rgba(6, 14, 10, 0.52) 32%,
    rgba(6, 14, 10, 0.38) 60%,
    rgba(6, 14, 10, 0.18) 80%,
    rgba(6, 14, 10, 0.05) 92%,
    rgba(6, 14, 10, 0) 100%
  );
}

/* --- Punto del carrusel (unica definicion, 23 sep 2026) ---------------------
   El boton mide EXACTAMENTE el ancho del punto visible. Asi el `gap: 6px` del
   contenedor es la separacion real entre puntos (si el boton fuera mas ancho que
   el punto, el hueco visible se inflaba). La altura si se estira a 44px: es area
   tactil invisible, no engorda el punto porque el punto va en el ::before. */
.carousel-dot {
  width: 7px;
  height: 44px;
  border-radius: 0;
  background-color: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: width var(--transition-normal);
}

/* Punto inactivo: 7px */
.carousel-dot::before {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  transition: width var(--transition-normal),
              border-radius var(--transition-normal),
              background-color var(--transition-normal);
}

/* Punto activo: barra de 20x7 */
.carousel-dot.active {
  width: 20px;
}

.carousel-dot.active::before {
  width: 20px;
  height: 7px;
  border-radius: 9999px;
  background-color: #6ba2d7;
}

/* Con el punto a 7px el anillo de foco por defecto es ilegible: se refuerza. */
.carousel-dot:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 0;
  border-radius: 4px;
}

/* --- Refined Mobile Responsive Styles (Hero & Spacing) --- */
@media (max-width: 768px) {
  .hero-section {
    padding-top: 0;
    padding-bottom: 0;
    display: block;
    box-sizing: border-box;
  }

  /* Margenes LATERALES SIMETRICOS del bloque de texto.
     Antes el contenedor llevaba `padding-left: clamp(1.75rem, 3.8vw, 3.75rem)`
     (28px a 390px) y `padding-right: 1.25rem` (20px), y encima `.hero-content`
     se quedaba al 88% anclado a la izquierda: el texto arrancaba en x=28 y
     terminaba en x=329, es decir 28px a la izquierda y 61px a la derecha.
     Ahora los dos lados miden 1.25rem (20px) y `.hero-content` ocupa el 100%,
     asi que el bloque va de x=20 a x=370 con margenes IDENTICOS. */
  .hero-section .container {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  /* ------------------------------------------------------------------------
     EL HERO MOVIL ES MAS ALTO QUE UN PLIEGUE (23-24 sep 2026).
     El pliegue lo define `.hero-content` (ver mas abajo), NO `.hero-main-view`.
     La primera pantalla muestra SOLO el texto y los botones; los sellos y los
     puntos viven en la altura anadida, de modo que hay que desplazarse un poco
     para verlos.
     El carrusel y el velo son `position: absolute` con `height: 100%` respecto
     a la SECCION, asi que la fotografia sigue detras de TODA la altura nueva:
     no hay corte ni fondo plano al pasar de los botones.
     ------------------------------------------------------------------------ */
  .hero-main-view {
    min-height: auto;    /* anula el calc(100svh - nav) de la regla base */
    display: block;      /* anula flex + flex-end: el pliegue lo lleva .hero-content */
    padding-bottom: 0;
  }

  /* `.hero-scroll-content` ELIMINADO (23-24 sep 2026): ver la nota en la regla
     base. Sus sellos subieron al bloque de texto y sus indicadores pasaron a
     posicionarse en absoluto. */

  /* Indicadores en movil: misma esquina inferior derecha que en escritorio. El
     `bottom` (20px) coincide con el inset inferior del halo del `::before`, de
     modo que el halo termina EXACTAMENTE en el borde inferior de la seccion, que
     es donde su degradado ya vale alfa 0: asi el `overflow: hidden` de la
     seccion no corta nada. Banda ocupada: de 20px a 64px medidos desde el fondo. */
  .carousel-indicators {
    right: 1.25rem;
    bottom: 1.25rem;
  }

  /* VELO DE SOMBRA UNIFORME EN MOVIL (24 sep 2026).
     ------------------------------------------------------------------------
     Opacidad CONSISTENTE y UNIFORME (rgba(6, 14, 10, 0.78)) en toda el area
     cubierta: desde el borde inferior de la seccion (100%) subiendo por los
     indicadores, sellos de confianza, botones, parrafo, antetitulo y titular.
     Sin intensificacion ni manchones mas oscuros detras del texto (se elimina
     el radial a 0.92). El degradado solo cumple la funcion de desvanecerse
     hacia arriba (fade out) a transparente por encima del titular para dejar
     limpia la fotografia superior. */
  .hero-overlay {
    /* Respaldo para navegadores sin `svh` */
    background: linear-gradient(
      180deg,
      rgba(6, 14, 10, 0) 0%,
      rgba(6, 14, 10, 0) calc(100vh - var(--nav-height) - 540px),
      rgba(6, 14, 10, 0.25) calc(100vh - var(--nav-height) - 490px),
      rgba(6, 14, 10, 0.55) calc(100vh - var(--nav-height) - 450px),
      rgba(6, 14, 10, 0.78) calc(100vh - var(--nav-height) - 410px),
      rgba(6, 14, 10, 0.78) 100%
    );
    background: linear-gradient(
      180deg,
      rgba(6, 14, 10, 0) 0%,
      rgba(6, 14, 10, 0) calc(100svh - var(--nav-height) - 540px),
      rgba(6, 14, 10, 0.25) calc(100svh - var(--nav-height) - 490px),
      rgba(6, 14, 10, 0.55) calc(100svh - var(--nav-height) - 450px),
      rgba(6, 14, 10, 0.78) calc(100svh - var(--nav-height) - 410px),
      rgba(6, 14, 10, 0.78) 100%
    );
  }

  .hero-content {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 0 2rem !important;   /* aire inferior: los CTAs no tocan el corte */
    /* 100% del contenedor: los margenes laterales simetricos los da ahora el
       `padding` del contenedor (1.25rem por lado). Antes era `max-width: 88%`
       con `margin-left: 0`, que producia 28px a la izquierda y ~61px a la
       derecha: asimetrico. */
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    text-align: left;
    box-sizing: border-box;
    /* ESTE BLOQUE ES EL PLIEGUE EN MOVIL (23-24 sep 2026): mide exactamente una
       pantalla util y apoya su contenido en el borde inferior con `flex-end`.
       Asi la primera pantalla queda reservada al texto y a los botones; los
       sellos vienen despues, EN FLUJO, y por eso caen por debajo del pliegue.
       `box-sizing: border-box` es imprescindible: sin el, el `padding-bottom` se
       SUMARIA a los 100svh y el bloque desbordaria el pliegue. */
    min-height: calc(100vh - var(--nav-height));   /* respaldo sin svh */
    min-height: calc(100svh - var(--nav-height));
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Sin `will-change` ni `transform`: ver la nota en la regla base de
       .hero-content. Aqui estaban y eran la causa del desfase al hacer scroll. */
  }

  .hero-tag {
    font-size: 0.78rem;
    padding: 0.3rem 0.75rem;
    margin-bottom: 0.5rem;
  }

  /* Compresion vertical en movil (23-24 sep 2026). Objetivo: que el bloque de
     texto ocupe menos alto para que la fotografia del carrusel tenga mas sitio
     visible. SOLO se tocan margenes y huecos: ni una linea de copy ni un tamano
     de fuente cambian.
     Antes: titular 0.35rem / antetitulo 0.6rem / parrafo 0.9rem (suma ~30px).
     Ahora: 0.25 / 0.4 / 0.65rem (suma ~21px). */
  .hero-title {
    font-size: clamp(1.35rem, 5.2vw, 1.65rem);
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.22;
    margin-bottom: 0.25rem;   /* venia de 0.35rem */
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9), 0 1px 3px rgba(0, 0, 0, 0.9);
  }

  .hero-subtitle {
    font-size: clamp(1rem, 3.8vw, 1.15rem);
    font-weight: 700;
    color: #4aad52;
    margin-bottom: 0.4rem;    /* venia de 0.6rem */
    line-height: 1.3;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
  }

  .hero-description {
    margin-bottom: 0.65rem;   /* venia de 0.9rem */
  }

  .hero-description p {
    font-size: 0.9rem;
    color: #F8FAFC;
    line-height: 1.45;
    margin-bottom: 0.4rem;
    font-weight: 400;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.95);
  }

  .hero-description p:last-child {
    margin-bottom: 0;
  }

  /* CTAs CENTRADOS y AL ANCHO DE LA COLUMNA DE TEXTO (23 sep 2026).
     Antes llevaban `max-width: 320px`: a 390px de ancho la columna mide 350px,
     asi que los botones quedaban 15px mas estrechos por lado y no coincidian con
     los bordes del titular ni del parrafo. Ahora `max-width: 100%` los lleva
     justo a los bordes de la columna, que es el ancho al que rompe el texto.
     `align-items: center` sigue centrandolos, pero al ocupar el 100% el centrado
     ya no se aprecia: se alinean con el texto por ambos lados. */
  .hero-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 0.45rem;            /* venia de 0.55rem */
    margin-bottom: 0;
  }

  .hero-actions .btn {
    width: 100%;
    max-width: 100%;         /* venia de 320px: recortaba 30px de ancho */
    box-sizing: border-box;
    padding: 0.7rem 1rem;
    font-size: 0.95rem;
    justify-content: center;
  }

  /* SELLOS EN MOVIL — viven por DEBAJO DEL PLIEGUE (23-24 sep 2026).
     `margin-top: 2.5rem` (40px) es el aire que los separa de los botones: deja
     ver la fotografia entre ambos, que es el "respiro" que se pedia, y a la vez
     coloca el separador `border-top` 8px por debajo del pliegue, de modo que en
     la primera pantalla no se asoma nada de los sellos.
     `padding-bottom: 5.5rem` (88px) reserva la banda de los indicadores: 20px de
     separacion + 44px de area tactil + 24px de holgura. Sin esa reserva el ultimo
     sello caeria dentro del area tactil de los puntos y tocarlo cambiaria de
     diapositiva.
     `max-width: 100%` anula el tope de 520px que si vale en escritorio. */
  .hero-highlights {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 100%;
    margin-left: 0;
    margin-top: 2.5rem;
    padding-top: 0.75rem;
    padding-bottom: 5.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    background: transparent;
    box-sizing: border-box;
  }

  .highlight-item {
    font-size: 0.82rem;
    color: #E2E8F0;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
    flex: none;
    width: 100%;
    align-items: center;
  }

  .highlight-item svg {
    margin-top: 0;
  }

  /* El indicador ya NO vive en flujo: se posiciona en absoluto abajo a la
     derecha (ver la regla base y el override de `.carousel-indicators` mas
     arriba en este mismo bloque). Aqui no necesita compactarse. */
}

/* --- About Section (#sobre-nosotros) --- */
.about-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3.5rem;
  align-items: center;
}

@media (max-width: 900px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

.about-content h2 {
  font-size: 2.2rem;
  color: var(--text-dark);
  margin-bottom: 1.25rem;
}

.about-lead {
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--primary-green-dark);
  margin-bottom: 1.25rem;
}

.about-pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: 2rem;
}

@media (max-width: 540px) {
  .about-pillars {
    grid-template-columns: 1fr;
  }
}

.pillar-card {
  background: var(--bg-white);
  padding: 1.25rem;
  border-radius: var(--radius-md);
  border-left: 4px solid var(--primary-green);
  box-shadow: var(--shadow-sm);
}

.pillar-title {
  font-weight: 700;
  color: var(--primary-green-dark);
  margin-bottom: 0.25rem;
  font-size: 1rem;
}

.about-image-wrapper {
  position: relative;
}

.about-image {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  width: 100%;
  height: 480px;
  object-fit: cover;
}

.experience-badge {
  position: absolute;
  bottom: -1.5rem;
  right: -1.5rem;
  background: var(--primary-green);
  color: var(--text-inverse);
  padding: 1.5rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  text-align: center;
  max-width: 200px;
}

@media (max-width: 768px) {
  .experience-badge {
    position: static;
    margin-top: 1.5rem;
    max-width: 100%;
  }
}

.experience-badge .years {
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1;
  font-family: var(--font-heading);
}

.experience-badge .text {
  font-size: 0.85rem;
  font-weight: 500;
  margin-top: 0.25rem;
}

/* --- Service Program (#programa-integral - 8 Core Components) --- */
.service-program-intro {
  background-color: var(--primary-green-surface);
  border-radius: var(--radius-md);
  padding: 1.5rem 2rem;
  margin-bottom: 2.5rem;
  border-left: 4px solid var(--primary-green);
  color: var(--primary-green-dark);
  font-weight: 500;
  font-size: 1.05rem;
}

.program-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.5rem;
}

.program-card {
  background: var(--bg-white);
  padding: 2rem 1.5rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
  transition: all var(--transition-normal);
  display: flex;
  flex-direction: column;
}

.program-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary-green-light);
}

.program-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background-color: var(--primary-green-surface);
  color: var(--primary-green);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.program-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
  color: var(--text-dark);
}

.program-card p {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}


/* ==========================================================================
   FACILITIES 10 INDEPENDENT CAROUSELS (#instalaciones) & LIGHTBOX
   ========================================================================== */

/* Helper Tip Microcopy */
.facility-helper-tip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--primary-green-surface);
  border: 1px solid var(--primary-green-light);
  border-left: 4px solid var(--primary-green);
  border-radius: var(--radius-md);
  padding: 0.9rem 1.25rem;
  margin-bottom: 2.25rem;
  gap: 1rem;
  box-shadow: var(--shadow-sm);
  transition: opacity var(--transition-normal), transform var(--transition-normal);
}

.facility-helper-tip.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  display: none;
}

.helper-tip-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--primary-green-dark);
  font-size: 0.95rem;
  line-height: 1.45;
}

.helper-tip-content svg {
  color: var(--primary-green);
  flex-shrink: 0;
}

.helper-tip-close {
  background: none;
  border: none;
  font-size: 1.15rem;
  color: var(--primary-green-dark);
  cursor: pointer;
  padding: 0.35rem 0.5rem;
  border-radius: 4px;
  line-height: 1;
  transition: background-color var(--transition-fast);
}

.helper-tip-close:hover {
  background-color: rgba(77, 138, 86, 0.2);
}

/* Facilities Grid */
.facilities-carousels-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

@media (max-width: 900px) {
  .facilities-carousels-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
}

/* Featured Card: "Así es Casa Consuelo" spans full width */
.facility-carousel-card.featured {
  grid-column: 1 / -1;
}

.facility-carousel-card {
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.facility-carousel-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(77, 138, 86, 0.3);
}

/* Carousel Viewport */
.facility-carousel-viewport {
  position: relative;
  width: 100%;
  height: 280px;
  background-color: #1A2421;
  overflow: hidden;
  user-select: none;
  touch-action: pan-y pinch-zoom;
}

.facility-carousel-card.featured .facility-carousel-viewport {
  height: 400px;
}

@media (max-width: 768px) {
  .facility-carousel-viewport {
    height: 230px;
  }

  .facility-carousel-card.featured .facility-carousel-viewport {
    height: 260px;
  }
}

/* Slides Track */
.facility-slides-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.facility-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 600ms ease-in-out, visibility 600ms ease-in-out;
  cursor: pointer;
  pointer-events: none;
}

.facility-slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
  pointer-events: auto;
}

.facility-carousel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 6000ms ease-out;
}

.facility-slide.active .facility-carousel-img {
  transform: scale(1.04);
}

/* Enlarge / Zoom Button */
.facility-zoom-btn {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(15, 23, 20, 0.7);
  backdrop-filter: blur(6px);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  pointer-events: auto;
  transition: all var(--transition-fast);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.facility-zoom-btn:hover {
  background-color: var(--accent-blue);
  transform: scale(1.1);
  border-color: #FFFFFF;
}

/* Overlaid Navigation Arrows (44x44px min touch target, high contrast) */
.facility-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: rgba(15, 23, 20, 0.75);
  backdrop-filter: blur(6px);
  color: #FFFFFF;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  pointer-events: auto;
  transition: all var(--transition-fast);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.facility-nav-arrow svg {
  pointer-events: none;
  display: block;
}

.facility-nav-arrow.prev {
  left: 0.75rem;
}

.facility-nav-arrow.next {
  right: 0.75rem;
}

.facility-nav-arrow:hover,
.facility-nav-arrow:focus-visible {
  background-color: var(--primary-green);
  border-color: #FFFFFF;
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 6px 18px rgba(77, 138, 86, 0.6);
}

/* Photo Counter Badge */
.facility-carousel-counter {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  background-color: rgba(15, 23, 20, 0.75);
  backdrop-filter: blur(6px);
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.25);
  z-index: 20;
  pointer-events: auto;
}

/* Indicator Dots */
.facility-carousel-dots {
  position: absolute;
  bottom: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: rgba(15, 23, 20, 0.6);
  backdrop-filter: blur(8px);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.2);
  z-index: 20;
  pointer-events: auto;
}

.facility-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.45);
  border: none;
  cursor: pointer;
  transition: all var(--transition-normal);
  padding: 0;
}

.facility-dot.active {
  width: 22px;
  border-radius: var(--radius-pill);
  background-color: var(--accent-blue);
  box-shadow: 0 0 8px rgba(106, 149, 194, 0.8);
}

/* Facility Card Body */
.facility-card-body {
  padding: 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.facility-card-header {
  margin-bottom: 0.65rem;
}

.facility-card-badge {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary-green-dark);
  background-color: var(--primary-green-surface);
  padding: 0.2rem 0.65rem;
  border-radius: 4px;
  margin-bottom: 0.45rem;
}

.facility-card-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--primary-green-dark);
  line-height: 1.3;
}

.facility-card-desc {
  font-size: 0.96rem;
  color: var(--text-dark);
  line-height: 1.6;
  margin-bottom: 0;
}

/* ==========================================================================
   LIGHTBOX FULLSCREEN MODAL
   ========================================================================== */
.facility-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease, visibility 300ms ease;
}

.facility-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.lightbox-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(10, 15, 12, 0.94);
  backdrop-filter: blur(8px);
}

.lightbox-container {
  position: relative;
  width: 92%;
  max-width: 1080px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 3001;
}

.lightbox-content {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #121A17;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.lightbox-image-wrapper {
  width: 100%;
  max-height: 68vh;
  background-color: #080D0B;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.lightbox-image {
  max-width: 100%;
  max-height: 68vh;
  object-fit: contain;
  display: block;
  transition: opacity 250ms ease-in-out;
}

.lightbox-info-bar {
  width: 100%;
  padding: 1.15rem 1.5rem;
  background-color: #16221E;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.lightbox-title {
  color: #A3E6B1;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
}

.lightbox-caption {
  color: #E2E8F0;
  font-size: 0.9rem;
  margin-bottom: 0;
  line-height: 1.4;
}

.lightbox-counter {
  background-color: rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

/* Lightbox Controls */
.lightbox-close-btn {
  position: absolute;
  top: -3.25rem;
  right: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.lightbox-close-btn:hover {
  background-color: #E53E3E;
  border-color: #E53E3E;
  transform: scale(1.1);
}

.lightbox-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: rgba(15, 23, 20, 0.85);
  backdrop-filter: blur(6px);
  color: #FFFFFF;
  border: 2px solid rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3002;
  transition: all var(--transition-fast);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.lightbox-nav-btn.prev {
  left: -4rem;
}

.lightbox-nav-btn.next {
  right: -4rem;
}

.lightbox-nav-btn:hover,
.lightbox-nav-btn:focus-visible {
  background-color: var(--primary-green);
  border-color: #FFFFFF;
  transform: translateY(-50%) scale(1.1);
}

@media (max-width: 1024px) {
  .lightbox-nav-btn.prev {
    left: 0.5rem;
  }
  .lightbox-nav-btn.next {
    right: 0.5rem;
  }
}

@media (max-width: 768px) {
  .lightbox-container {
    width: 96%;
  }

  .lightbox-close-btn {
    top: -2.75rem;
    right: 0;
    width: 38px;
    height: 38px;
  }

  .lightbox-nav-btn {
    width: 44px;
    height: 44px;
  }

  .lightbox-info-bar {
    padding: 0.85rem 1rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }

  .lightbox-counter {
    align-self: flex-end;
  }
}

body.modal-open {
  overflow: hidden !important;
}

/* --- Multidisciplinary Team (#equipo) --- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.team-card {
  background: var(--bg-white);
  padding: 2rem 1.5rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  text-align: center;
  transition: transform var(--transition-normal);
}

.team-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.team-icon {
  width: 150px;
  height: 150px;
  margin: 0 auto 1.25rem auto;
  border-radius: 50%;
  background-color: var(--accent-blue-light);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(45, 106, 79, 0.12);
  border: 3px solid #ffffff;
}

.team-img {
  width: 100%;
  height: 100%;
  max-width: 150px;
  max-height: 150px;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  display: block;
}

.team-card h3 {
  font-size: 1.25rem;
  color: var(--text-dark);
  margin-bottom: 0.5rem;
}

.team-card p {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.55;
}

/* --- Admissions Process (#ingreso - 4 Steps) --- */
.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  position: relative;
  margin-bottom: 2.5rem;
}

.process-card {
  background: var(--bg-white);
  padding: 2rem 1.5rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  position: relative;
}

.process-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: var(--primary-green);
  color: var(--text-inverse);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 1.25rem;
}

.process-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.65rem;
}

.process-card p {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.55;
}

.admissions-note {
  background-color: var(--accent-blue-light);
  border-radius: var(--radius-md);
  padding: 1.5rem 2rem;
  border-left: 4px solid var(--accent-blue);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.admissions-note p {
  color: var(--accent-blue-dark);
  font-weight: 500;
  margin: 0;
  flex: 1;
}

/* --- Key Information Cards (#informacion-clave - 4 Cards) --- */
.key-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2.25rem 1.5rem;
  margin-top: 1.75rem;
}

.key-info-card {
  position: relative;
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(77, 138, 86, 0.04) 100%);
  padding: 2.25rem 1.5rem 1.75rem 1.5rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  border-top: 5px solid var(--primary-green);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (min-width: 769px) {
  .key-info-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(45, 106, 79, 0.12), 0 4px 8px rgba(0, 0, 0, 0.04);
  }
}

.key-info-icon {
  position: absolute;
  top: -20px;
  left: 1.5rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--primary-green);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #FFFFFF;
  box-shadow: 0 2px 6px rgba(45, 106, 79, 0.2);
}

.key-info-icon svg {
  display: block;
}

.key-info-label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-light);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.key-info-value {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  font-family: var(--font-heading);
  line-height: 1.2;
  margin-bottom: 0.5rem;
  color: var(--primary-green-dark);
}

.key-info-value.key-info-schedule {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
}

.key-info-num {
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary-green-dark);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.key-info-unit {
  font-size: 0.95rem;
  font-weight: 600;
  color: #718096;
}

.key-info-day {
  font-size: 0.85rem;
  font-weight: 600;
  color: #718096;
  letter-spacing: 0.04em;
}

.key-info-meridiem {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--primary-green-dark);
  vertical-align: 0.25em;
  margin-left: 1px;
}

.key-info-desc {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}

/* --- Family Empathy Section --- */
.empathy-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--text-inverse);
  padding: 3.5rem 2.5rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  text-align: center;
}

.empathy-card::before {
  content: "";
  position: absolute;
  inset: -10px;
  background: 
    linear-gradient(135deg, rgba(61, 111, 68, 0.85) 0%, rgba(42, 77, 49, 0.85) 100%),
    url('../images/areas-verdes-instalaciones-internamiento.webp') center center / cover no-repeat;
  filter: blur(2.5px);
  z-index: -1;
  pointer-events: none;
}

.empathy-card > * {
  position: relative;
  z-index: 1;
}

.empathy-card h2 {
  color: #FFFFFF;
  font-size: 2.2rem;
  margin-bottom: 1.25rem;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.empathy-card p {
  font-size: 1.15rem;
  color: #FFFFFF;
  max-width: 780px;
  margin: 0 auto 2rem auto;
  line-height: 1.7;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.empathy-card strong {
  color: #FFFFFF;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

@media (max-width: 768px) {
  .empathy-card {
    padding: 2.25rem 1.25rem;
    border-radius: var(--radius-md);
  }

  .empathy-card h2 {
    font-size: 1.45rem;
    line-height: 1.3;
    margin-bottom: 0.85rem;
  }

  .empathy-card p {
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0 auto 1.35rem auto;
  }

  .empathy-card .btn {
    font-size: 0.95rem;
    padding: 0.8rem 1.25rem;
    width: auto;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .empathy-card {
    padding: 1.85rem 1rem;
  }

  .empathy-card h2 {
    font-size: 1.35rem;
    line-height: 1.3;
  }

  .empathy-card p {
    font-size: 0.92rem;
    line-height: 1.5;
    margin-bottom: 1.25rem;
  }
}

/* --- Frequently Asked Questions (#faq - Accordion) --- */
.faq-accordion {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem 1.5rem;
  align-items: start;
}

@media (max-width: 768px) {
  .faq-accordion {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

.faq-item {
  background: var(--bg-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-fast);
}

.faq-item.is-open,
.faq-item:has(.faq-trigger[aria-expanded="true"]) {
  border-color: var(--primary-green);
}

.faq-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.35rem 1.75rem;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--text-dark);
  transition: color var(--transition-fast);
}

.faq-trigger:hover {
  color: var(--primary-green-dark);
}

.faq-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--primary-green);
  transition: transform var(--transition-normal);
}

.faq-item.is-open .faq-icon,
.faq-trigger[aria-expanded="true"] .faq-icon {
  transform: rotate(180deg);
}

.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-body {
  padding: 0 1.75rem 1.5rem 1.75rem;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.65;
  border-top: 1px solid var(--bg-smoke);
  padding-top: 1rem;
}

/* --- FAQ Ask WhatsApp Card --- */
.faq-ask-card {
  background-color: var(--bg-card, #FFFFFF);
  border-radius: 16px;
  padding: 32px 24px;
  max-width: 600px;
  margin: 40px auto 0 auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.faq-ask-title {
  font-family: var(--font-heading, 'Poppins', sans-serif);
  font-weight: 700;
  font-size: 20px;
  text-align: center;
  color: var(--text-dark, #2B2B2B);
  margin-bottom: 16px;
  line-height: 1.35;
}

.faq-ask-form {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.faq-ask-input {
  width: 100%;
  height: 48px;
  border-radius: 8px;
  border: 1px solid #CBD5E1;
  padding: 0 16px;
  font-size: 16px;
  font-family: var(--font-body, 'Inter', sans-serif);
  color: var(--text-dark, #2B2B2B);
  background-color: #FFFFFF;
  margin-bottom: 16px;
  outline: none;
  box-sizing: border-box;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.faq-ask-input:focus {
  border-color: var(--whatsapp-color, #25D366);
  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.2);
}

.faq-ask-input.has-error {
  border-color: #EF4444;
}

.faq-ask-error {
  display: none;
  color: #EF4444;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-body, 'Inter', sans-serif);
  margin-top: -8px;
  margin-bottom: 12px;
  text-align: left;
}

.faq-ask-btn {
  width: 100%;
  height: 48px;
  border-radius: 24px;
  background-color: var(--whatsapp-color, #25D366);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 16px;
  font-family: var(--font-body, 'Inter', sans-serif);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
  transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.faq-ask-btn:hover,
.faq-ask-btn:focus-visible {
  background-color: var(--whatsapp-hover, #1EBE5D);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45);
}

.faq-ask-btn:active {
  transform: translateY(0);
}

.faq-ask-btn svg {
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .faq-ask-card {
    padding: 24px 16px;
  }
  .faq-ask-title {
    font-size: 18px;
  }
}

/* --- Illustrative Testimonials --- */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.75rem;
  margin-bottom: 2rem;
}

.testimonial-card {
  background: var(--bg-white);
  padding: 2rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.testimonial-badge {
  display: inline-block;
  background-color: var(--accent-blue-light);
  color: var(--accent-blue-dark);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-pill);
  margin-bottom: 1rem;
  align-self: flex-start;
}

.testimonial-quote {
  font-style: italic;
  color: var(--text-dark);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-top: 1px solid var(--bg-smoke);
  padding-top: 1rem;
}

.author-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--primary-green-surface);
  color: var(--primary-green);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.author-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.author-info h4 {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.25;
}

.author-info span {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-light);
  line-height: 1.25;
}

.testimonial-disclaimer {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-light);
  font-style: italic;
  max-width: 800px;
  margin: 0 auto;
}

/* --- Contact & Location (#contacto) --- */
.contact-wrapper {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 3rem;
  align-items: flex-start;
}

@media (max-width: 960px) {
  .contact-wrapper {
    grid-template-columns: 1fr;
  }
}

.contact-card {
  background: var(--bg-white);
  padding: 2.5rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-md);
}

@media (max-width: 540px) {
  .contact-card {
    padding: 1.5rem;
  }
}

.form-group {
  margin-bottom: 1.25rem;
  scroll-margin-top: calc(var(--nav-height, 80px) + 24px);
}

.form-label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
  color: var(--text-dark);
  transition: color var(--transition-fast);
}

.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  background-color: var(--bg-smoke);
  font-size: 1rem;
  color: var(--text-dark);
  transition: all var(--transition-fast);
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--border-focus);
  background-color: var(--bg-white);
  box-shadow: 0 0 0 3px rgba(106, 149, 194, 0.25);
}

.form-error {
  color: #DC2626;
  font-size: 0.82rem;
  margin-top: 0.35rem;
  display: none;
  font-weight: 500;
}

.has-error .form-label {
  color: #DC2626 !important;
}

.has-error .form-input,
.has-error .form-select,
.has-error .form-textarea {
  border-color: #DC2626 !important;
  background-color: #FEF2F2 !important;
  box-shadow: 0 0 0 1px #DC2626;
  -webkit-appearance: none;
}

.has-error .form-input:focus,
.has-error .form-select:focus,
.has-error .form-textarea:focus {
  outline: none !important;
  border-color: #DC2626 !important;
  background-color: #FEF2F2 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25) !important;
}

.has-error .form-error {
  display: block !important;
}

.contact-info-card {
  background: var(--bg-white);
  padding: 2.5rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-md);
}

.contact-info-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.contact-info-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.contact-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--primary-green-surface);
  color: var(--primary-green-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-text h4 {
  font-size: 1rem;
  margin-bottom: 0.2rem;
}

.contact-text p {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 0;
}

.contact-text a {
  color: var(--primary-green-dark);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(61, 111, 68, 0.45);
  text-underline-offset: 3px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.contact-text a:hover,
.contact-text a:focus-visible {
  color: var(--primary-green);
  text-decoration: underline;
  text-decoration-color: var(--primary-green);
}

.map-container {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.5rem;
}

.map-container iframe {
  width: 100%;
  height: 220px;
  border: 0;
  display: block;
}

.social-links-row {
  display: flex;
  gap: 0.75rem;
}

.social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: var(--bg-smoke);
  color: var(--text-dark);
  border: 1px solid var(--border-light);
  transition: all var(--transition-fast);
}

.social-btn:hover {
  background-color: var(--primary-green);
  color: #FFFFFF;
  transform: translateY(-2px);
}

/* --- Floating WhatsApp Widget & Empathy Bubble --- */
.floating-whatsapp-container {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 450ms cubic-bezier(0.4, 0, 0.2, 1),
              visibility 450ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 450ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto;
}

.floating-whatsapp-container.hero-hidden,
.floating-whatsapp-container.form-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(16px);
}

@media (max-width: 600px) {
  .floating-whatsapp-container {
    bottom: 1.25rem;
    right: 1.25rem;
  }
}

.whatsapp-bubble {
  background-color: #FFFFFF;
  color: var(--text-dark);
  padding: 0.85rem 1.25rem;
  border-radius: 16px 16px 4px 16px;
  box-shadow: var(--shadow-xl);
  border: 1px solid rgba(0, 0, 0, 0.08);
  margin-bottom: 0.75rem;
  max-width: 280px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.95);
  transition: opacity 400ms ease, transform 400ms ease, visibility 400ms ease;
  position: relative;
}

.whatsapp-bubble.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.bubble-header {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--primary-green-dark);
  margin-bottom: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.online-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #25D366;
  box-shadow: 0 0 8px #25D366;
}

.bubble-text {
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--text-dark);
  margin: 0;
}

.floating-whatsapp-btn {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background-color: var(--whatsapp-color);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
  border: none;
  cursor: pointer;
  transition: transform var(--transition-fast), background-color var(--transition-fast);
  position: relative;
}

.floating-whatsapp-btn:hover {
  background-color: var(--whatsapp-hover);
  transform: scale(1.08);
}

.floating-whatsapp-btn svg {
  width: 34px;
  height: 34px;
}


/* Soft Attention Pulse Animation (Gentle & Institutional) */
.floating-whatsapp-btn.attention-shake {
  animation: whatsappAttentionSoftPulse 1800ms ease-in-out;
}

@keyframes whatsappAttentionSoftPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45);
  }
  25% {
    transform: scale(1.12);
    box-shadow: 0 10px 28px rgba(37, 211, 102, 0.65);
  }
  45% {
    transform: scale(1.06) rotate(3deg);
  }
  65% {
    transform: scale(1.1) rotate(-3deg);
  }
  85% {
    transform: scale(1.03);
  }
}

.whatsapp-bubble.is-visible,
.whatsapp-bubble.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.bubble-close-btn {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-light);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.25rem;
  border-radius: 4px;
  transition: color var(--transition-fast);
}

.bubble-close-btn:hover {
  color: var(--text-dark);
}

/* --- Footer --- */
.site-footer {
  background-color: var(--primary-green-dark);
  color: #FFFFFF;
  padding: 4.5rem 0 2rem 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 3rem;
  margin-bottom: 3.5rem;
}

@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* El nombre de la marca es un <p> y no un encabezado: es branding, no estructura
   del documento, y como <h3> provocaba un salto h1 -> h3 en la pagina 404. */
.footer-brand .footer-brand-name {
  color: #FFFFFF;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

.footer-brand p {
  color: #D1E7D5;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* h2 (no h4): los titulos de columna son secciones de nivel superior dentro
   del footer. Con h4 se saltaba de nivel en las paginas sin h2/h3 propios. */
.footer-col h2 {
  color: #FFFFFF;
  font-size: 1.1rem;
  margin-bottom: 1.25rem;
  position: relative;
  padding-bottom: 0.5rem;
}

.footer-col h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 32px;
  height: 2px;
  background-color: var(--accent-blue);
}

.footer-links {
  list-style: none;
}

.footer-links li {
  margin-bottom: 0.65rem;
}

.footer-links a {
  color: #D1E7D5;
  font-size: 0.92rem;
  transition: color var(--transition-fast);
}

.footer-links a:hover {
  color: #FFFFFF;
  padding-left: 4px;
}

.footer-contact-info {
  list-style: none;
}

.footer-contact-info li {
  color: #D1E7D5;
  font-size: 0.92rem;
  margin-bottom: 0.75rem;
  line-height: 1.5;
}

.footer-contact-info a {
  color: #D1E7D5;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}

.footer-contact-info a:hover {
  color: #FFFFFF;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding: 1.5rem 0;
  text-align: center;
  font-size: 0.85rem;
  color: #B5D8BC;
}

.footer-bottom p {
  margin: 0;
}

/* --- Location Embed Section (#ubicacion) --- */
.location-embed-wrapper {
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.location-map-container {
  width: 100%;
  height: 420px;
  background-color: var(--bg-smoke);
}

.location-map-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.location-info-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 2rem;
  background-color: var(--bg-white);
  border-top: 1px solid var(--border-light);
  flex-wrap: wrap;
  gap: 1.25rem;
}

.location-address-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1rem;
  color: var(--text-dark);
}

.location-address-info svg {
  color: var(--primary-green);
  flex-shrink: 0;
}

.location-action-buttons {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .location-map-container {
    height: 320px;
  }

  .location-info-bar {
    flex-direction: column;
    align-items: stretch;
    padding: 1.25rem;
  }

  .location-action-buttons {
    flex-direction: column;
    width: 100%;
  }

  .location-action-buttons .btn {
    width: 100%;
  }
}


/* --- Semantic classes for Programa Integral Callout --- */
.service-program-lead {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

.service-program-note {
  font-size: 0.875rem;
  color: #64748B;
  font-style: italic;
  margin-bottom: 0;
  line-height: 1.5;
}

/* ==========================================================================
   MULTI-PAGE ARCHITECTURE — Subpage & New Section Styles
   ========================================================================== */

/* --- Subpage Main Layout (Header is position: sticky, no extra padding needed) --- */
.subpage-main {
  padding-top: 0;
}

/* --- Subpage Compact Fixed "Volver" Button (16px from header and left edge) --- */
.subpage-back-btn {
  position: fixed;
  top: calc(var(--nav-height, 80px) + 16px);
  left: 16px;
  z-index: 990;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #F8FAFC;
  background-color: #1E293B; /* Neutral dark slate */
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 0.45rem 1rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: all var(--transition-fast);
  cursor: pointer;
}

.subpage-back-btn:hover {
  background-color: #0F172A;
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateX(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}

/* --- Location Page (Tier 1) --- */
.location-page .section-title {
  font-size: 2rem;
}

.location-intro {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.location-intro p {
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.7;
}

.location-detail {
  max-width: 720px;
  margin: 1.5rem auto;
  padding: 1.25rem 1.5rem;
  background-color: var(--bg-smoke);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--primary-green);
}

.location-detail h2 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--text-dark);
  margin-bottom: 0.5rem;
}

.location-detail p {
  font-family: var(--font-body);
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

.location-distance {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* --- Hub Page (Tier 2) --- */
.hub-page .section-title {
  font-size: 2rem;
}

.hub-localities {
  color: var(--primary-green-dark);
  font-weight: 500;
}

.hub-description {
  max-width: 720px;
  margin: 1.5rem auto;
  text-align: center;
}

.hub-description p {
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.7;
}

/* --- Hub Page Map & Directions Block --- */
.hub-location-block {
  max-width: 860px;
  margin: 2.5rem auto 0;
}

.hub-map-card {
  background-color: var(--bg-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  border: 1px solid var(--border-light);
  padding: 1.5rem;
}

.hub-map-embed-wrapper {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background-color: var(--bg-smoke);
  position: relative;
  width: 100%;
  min-height: 450px;
}

.hub-map-embed-wrapper iframe {
  display: block;
  width: 100%;
  height: 450px;
  border: 0;
}

.hub-map-actions {
  margin-top: 1.25rem;
  display: flex;
  justify-content: center;
}

.btn-directions {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background-color: var(--accent-blue);
  color: var(--text-inverse);
  padding: 0.85rem 1.8rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.btn-directions:hover {
  background-color: var(--accent-blue-hover);
  color: var(--text-inverse);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.hub-transfer-card {
  margin-top: 1.5rem;
  padding: 1.5rem;
  background-color: var(--primary-green-surface);
  border: 1px solid rgba(77, 138, 86, 0.25);
  border-left: 5px solid var(--primary-green);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.hub-transfer-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.hub-transfer-icon {
  flex-shrink: 0;
  color: var(--primary-green-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hub-transfer-text {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--primary-green-dark);
  margin: 0;
  line-height: 1.5;
}

.hub-transfer-form {
  width: 100%;
  margin: 0;
}

.hub-transfer-input-group {
  display: flex;
  gap: 0.75rem;
  width: 100%;
}

.hub-transfer-input {
  flex: 1;
  min-width: 0;
  height: 48px;
  border-radius: 8px;
  border: 1px solid #CBD5E1;
  padding: 0 16px;
  font-size: 16px;
  font-family: var(--font-body, 'Inter', sans-serif);
  color: var(--text-dark, #2B2B2B);
  background-color: #FFFFFF;
  outline: none;
  box-sizing: border-box;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.hub-transfer-input:focus {
  border-color: var(--whatsapp-color, #25D366);
  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.2);
}

.hub-transfer-input.has-error {
  border-color: #EF4444;
}

.hub-transfer-btn {
  height: 48px;
  padding: 0 1.75rem;
  border-radius: 24px;
  background-color: var(--whatsapp-color, #25D366);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 16px;
  font-family: var(--font-body, 'Inter', sans-serif);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
  transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  white-space: nowrap;
  flex-shrink: 0;
}

.hub-transfer-btn:hover,
.hub-transfer-btn:focus-visible {
  background-color: var(--whatsapp-hover, #1EBE5D);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45);
}

.hub-transfer-btn:active {
  transform: translateY(0);
}

.hub-transfer-btn svg {
  flex-shrink: 0;
}

.hub-transfer-error {
  color: #EF4444;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-body, 'Inter', sans-serif);
  margin-top: 8px;
  text-align: left;
}

/* --- Hub Help & Discovery CTA Section --- */
.hub-help-section {
  padding: 3.5rem 0;
  background: linear-gradient(135deg, #F8FAF8 0%, #EAF3EC 100%);
  border-top: 1px solid rgba(77, 138, 86, 0.15);
  border-bottom: 1px solid rgba(77, 138, 86, 0.15);
  text-align: center;
}

.hub-help-card {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
}

.hub-help-title {
  font-family: var(--font-heading);
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.35;
  margin: 0;
}

.hub-help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary-green);
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-size: 1.25rem; /* 20px */
  font-weight: 700;
  padding: 18px 40px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(77, 138, 86, 0.35);
  transition: all var(--transition-fast);
}

.hub-help-btn:hover,
.hub-help-btn:focus-visible {
  background-color: var(--primary-green-dark);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(77, 138, 86, 0.45);
}

/* --- Floating Sticky Button for Hub Pages --- */
.hub-floating-cta {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  background-color: var(--primary-green);
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  border-radius: var(--radius-pill);
  min-height: 48px;
  padding: 14px 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
  transition: opacity 0.3s ease, transform 0.3s ease, background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.hub-floating-cta:hover,
.hub-floating-cta:focus-visible {
  background-color: var(--primary-green-dark);
  color: #FFFFFF;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  transform: translateX(-50%) translateY(-2px);
}

.hub-floating-cta.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(20px);
}

/* --- Coverage Page (Tier 3) --- */
.coverage-states {
  max-width: 800px;
  margin: 0 auto;
}

.coverage-state-group {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-light);
}

.coverage-state-group:last-child {
  border-bottom: none;
}

.coverage-state-group h2 {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  color: var(--primary-green-dark);
  margin-bottom: 0.75rem;
}

.coverage-localities {
  font-family: var(--font-body);
  color: var(--text-muted);
  line-height: 1.8;
  font-size: 0.95rem;
}

.coverage-backlinks-section {
  max-width: 800px;
  margin: 3rem auto 0;
  padding-top: 2rem;
  border-top: 2px solid var(--primary-green-surface);
}

.coverage-backlinks-title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: var(--text-dark);
  text-align: center;
  margin-bottom: 1.5rem;
}

.coverage-backlinks-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.coverage-backlink {
  display: inline-block;
  padding: 0.5rem 1rem;
  background-color: var(--primary-green-surface);
  color: var(--primary-green-dark);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.coverage-backlink:hover {
  background-color: var(--primary-green);
  color: var(--text-inverse);
}

/* --- Breadcrumbs Navigation --- */
.breadcrumb-nav {
  margin-bottom: 1.5rem;
}

.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-muted);
}

.breadcrumb-item a {
  color: var(--primary-green);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.breadcrumb-item a:hover {
  color: var(--primary-green-dark);
  text-decoration: underline;
}

.breadcrumb-item.active {
  color: var(--text-muted);
  font-weight: 500;
  max-width: 480px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.breadcrumb-separator {
  color: var(--text-light);
  user-select: none;
}

/* --- Blog Grid (shared by listing page and home recent posts) --- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 2rem;
}

.blog-card-wrapper {
  display: flex;
}

.blog-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  position: relative;
  z-index: 2;
  pointer-events: auto;
  transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

@media (hover: hover) and (pointer: fine) {
  .blog-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
  }

  .blog-card:hover .blog-card__image {
    transform: scale(1.03);
  }
}

.blog-card:active {
  box-shadow: var(--shadow-sm);
  transform: scale(0.99);
}

.blog-card__image-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 aspect ratio */
  background-color: var(--bg-smoke);
  overflow: hidden;
}

.blog-card__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

.blog-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background-color: var(--primary-green-dark);
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  z-index: 2;
}

.blog-card__content {
  padding: 1.35rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.blog-card__title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 0.65rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card__excerpt {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.55;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 1rem;
}

.blog-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--border-light);
}

.blog-card__date {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--text-light);
}

.blog-card__read-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--primary-green);
  color: #FFFFFF;
  border: 1.5px solid var(--primary-green);
  padding: 0.55rem 1.25rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  position: relative;
  z-index: 3;
  pointer-events: auto;
  transition: all var(--transition-fast);
}

@media (hover: hover) and (pointer: fine) {
  .blog-card:hover .blog-card__read-link,
  .blog-card__read-link:hover {
    background-color: transparent;
    color: var(--primary-green);
    border-color: var(--primary-green);
    box-shadow: 0 4px 12px rgba(77, 138, 86, 0.25);
    transform: translateX(3px);
    outline: none;
  }
}

.blog-card:active .blog-card__read-link,
.blog-card__read-link:active {
  background-color: var(--primary-green-dark);
  color: #FFFFFF;
  border-color: var(--primary-green-dark);
  transform: scale(0.97);
}

.blog-card__read-link:focus-visible {
  background-color: transparent;
  color: var(--primary-green);
  border-color: var(--primary-green);
  box-shadow: 0 4px 12px rgba(77, 138, 86, 0.25);
  transform: translateX(3px);
  outline: none;
}

/* --- Blog Post (individual page) --- */
.blog-post {
  padding: 2.5rem 0 3.5rem;
}

.blog-badge {
  display: inline-block;
  margin-bottom: 0.85rem;
}

.blog-post__header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-light);
}

.blog-post__title {
  font-family: var(--font-heading);
  font-size: 2.3rem;
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1.28;
  margin-bottom: 0.85rem;
  letter-spacing: -0.01em;
}

.blog-post__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--text-muted);
}

.blog-post__date {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.blog-post__meta-sep {
  color: var(--text-light);
}

.blog-post__author {
  color: var(--primary-green-dark);
  font-weight: 600;
}

.blog-post__featured-figure {
  margin: 0 0 2.5rem 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.blog-post__featured-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  margin-bottom: 0;
}

.blog-post__body {
  font-family: var(--font-body);
  font-size: 1.08rem;
  color: var(--text-dark);
  line-height: 1.85;
}

.blog-post__body h2 {
  font-family: var(--font-heading);
  font-size: 1.55rem;
  font-weight: 700;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  color: var(--text-dark);
  line-height: 1.35;
}

.blog-post__body h3 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
  color: var(--text-dark);
}

.blog-post__body p {
  margin-bottom: 1.35rem;
}

.blog-post__body ul,
.blog-post__body ol {
  margin-bottom: 1.5rem;
  padding-left: 1.65rem;
}

.blog-post__body li {
  margin-bottom: 0.65rem;
  line-height: 1.7;
}

.blog-post__body a {
  color: var(--primary-green);
  text-decoration: underline;
}

.blog-post__body a:hover {
  color: var(--primary-green-dark);
}

/* Supporting Image Figures inside article body */
.blog-post__figure {
  margin: 2.25rem 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--bg-smoke);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
}

.blog-post__support-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

.blog-post__figure:hover .blog-post__support-image {
  transform: scale(1.01);
}

.blog-post__figcaption {
  padding: 0.75rem 1.15rem;
  font-size: 0.88rem;
  color: var(--text-muted);
  background-color: var(--bg-white);
  border-top: 1px solid var(--border-light);
  font-style: italic;
  line-height: 1.45;
}

/* Article Table Styling */
.blog-table-container {
  width: 100%;
  overflow-x: auto;
  margin: 2rem 0;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
}

.blog-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 0.98rem;
  text-align: left;
  background-color: var(--bg-white);
}

.blog-table thead tr {
  background-color: var(--primary-green-dark);
  color: #FFFFFF;
}

.blog-table th {
  padding: 1rem 1.25rem;
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.blog-table td {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--border-light);
  line-height: 1.55;
  color: var(--text-dark);
}

.blog-table tbody tr:nth-child(even) {
  background-color: var(--bg-smoke);
}

.blog-table tbody tr:hover {
  background-color: var(--primary-green-surface);
}

/* Direct WhatsApp Contact Button at the end of article */
.blog-post__footer {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 2px solid var(--border-light);
}

.blog-post__cta {
  background: linear-gradient(135deg, var(--primary-green-surface) 0%, #FFFFFF 100%);
  border: 2px solid var(--primary-green-light);
  border-radius: var(--radius-lg);
  padding: 2.25rem 2rem;
  text-align: center;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}

.blog-post__cta-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 1rem;
  background-color: #25D366;
  color: #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.35);
}

.blog-post__cta-title {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.blog-post__cta-text {
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--text-muted);
  max-width: 600px;
  margin: 0 auto 1.5rem;
  line-height: 1.6;
}

.blog-post__cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  font-size: 1.1rem;
  font-weight: 600;
  padding: 0.95rem 2.25rem;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.4);
  transition: all var(--transition-fast);
}

.blog-post__cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
}

/* Blog Empty State */
.blog-empty-message {
  text-align: center;
  font-family: var(--font-body);
  font-size: 1.1rem;
  color: var(--text-muted);
  padding: 3rem 1rem;
  font-style: italic;
}

/* --- Part D: Region Links Section (Home Page) --- */
.region-links-section {
  padding: 3.5rem 0;
}

.region-links-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
  max-width: 1060px;
  margin: 0 auto;
}

.region-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  background-color: var(--bg-white);
  color: var(--primary-green-dark);
  border: 2px solid var(--primary-green-light);
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
}

.region-link:hover {
  background-color: var(--primary-green);
  color: var(--text-inverse);
  border-color: var(--primary-green);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* --- Single Blog Post Back Button --- */
.blog-back-nav {
  margin-bottom: 1.5rem;
}

.btn-blog-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  color: var(--accent-blue); /* #6A95C2 */
  border: 1.5px solid var(--accent-blue);
  padding: 0.55rem 1.25rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.btn-blog-back:hover,
.btn-blog-back:focus-visible {
  background-color: var(--accent-blue);
  color: #FFFFFF;
  transform: translateX(-3px);
  box-shadow: 0 4px 12px rgba(106, 149, 194, 0.35);
  outline: none;
}

.btn-blog-back__arrow {
  font-size: 1.15rem;
  line-height: 1;
  transition: transform var(--transition-fast);
}

.btn-blog-back:hover .btn-blog-back__arrow {
  transform: translateX(-3px);
}

/* --- Blog Listing Category Filter Bar --- */
.blog-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: center;
  margin: 2rem 0 2.5rem;
}

.blog-filter-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1.25rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-color);
  background-color: var(--bg-white);
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  user-select: none;
  box-shadow: var(--shadow-sm);
}

.blog-filter-pill:hover {
  border-color: var(--primary-green-dark);
  color: var(--primary-green-dark);
  transform: translateY(-1px);
}

.blog-filter-pill.active {
  background-color: var(--primary-green-dark);
  color: #FFFFFF;
  border-color: var(--primary-green-dark);
  box-shadow: 0 3px 8px rgba(61, 111, 68, 0.3);
}

.blog-filter-pill:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}

.blog-card-wrapper.is-hidden {
  display: none !important;
}

/* --- Part C4: Recent Posts Section & Carousel (Home & Related) --- */
.recent-posts-section,
#articulos-recientes {
  background-color: var(--bg-smoke);
  scroll-margin-top: var(--nav-height);
}

.related-posts-section,
#articulos-relacionados {
  background-color: var(--bg-smoke);
  padding: 4rem 0;
  border-top: 1px solid var(--border-light);
  scroll-margin-top: var(--nav-height);
}

.blog-carousel {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.blog-carousel__viewport {
  width: 100%;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0.75rem 0.5rem 1.5rem;
}

.blog-carousel__viewport::-webkit-scrollbar {
  display: none;
}

.blog-carousel__track {
  display: flex;
  gap: 1.5rem;
  padding-right: 0.5rem;
}

.blog-carousel__track .blog-card-wrapper {
  flex: 0 0 calc(33.333% - 1rem);
  scroll-snap-align: start;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}

.blog-carousel__track .blog-card-wrapper:last-child {
  scroll-snap-align: end;
}

@media (max-width: 1024px) {
  .blog-carousel__track .blog-card-wrapper {
    flex: 0 0 calc(50% - 0.75rem);
  }
}

@media (max-width: 640px) {
  .blog-carousel__viewport {
    padding: 0.75rem 0.75rem 1.5rem;
  }
  .blog-carousel__track .blog-card-wrapper {
    flex: 0 0 88%;
    scroll-snap-align: center;
  }
  .blog-carousel__track .blog-card-wrapper:last-child {
    scroll-snap-align: center;
  }
}

.blog-carousel__arrow {
  position: absolute;
  top: clamp(95px, 11vw, 115px);
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--bg-white);
  border: 1.5px solid var(--border-color);
  color: var(--primary-green-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-fast);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-touch-callout: none;
}

@media (hover: hover) and (pointer: fine) {
  .blog-carousel__arrow:hover:not(:disabled) {
    background-color: var(--primary-green-dark);
    color: #FFFFFF;
    border-color: var(--primary-green-dark);
    transform: translateY(-50%) scale(1.08);
  }
}

.blog-carousel__arrow:active:not(:disabled) {
  background-color: var(--primary-green-dark);
  color: #FFFFFF;
  border-color: var(--primary-green-dark);
  transform: translateY(-50%) scale(0.95);
}

.blog-carousel__arrow:focus:not(:focus-visible) {
  outline: none;
}

.blog-carousel__arrow:disabled {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  cursor: default;
}

.blog-carousel__arrow--prev {
  left: -24px;
}

.blog-carousel__arrow--next {
  right: -24px;
}

@media (max-width: 1260px) {
  .blog-carousel__arrow--prev {
    left: 10px;
  }
  .blog-carousel__arrow--next {
    right: 10px;
  }
}

@media (max-width: 640px) {
  .blog-carousel__arrow--prev {
    left: 6px;
  }
  .blog-carousel__arrow--next {
    right: 6px;
  }
}

.blog-carousel__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.blog-carousel__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--border-color);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all var(--transition-fast);
}

.blog-carousel__dot:hover {
  background-color: var(--primary-green-light);
}

.blog-carousel__dot.active {
  background-color: var(--primary-green-dark);
  width: 28px;
  border-radius: 6px;
}

/* --- "Ver todos los artículos" Button --- */
.btn-blog-all {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background-color: var(--primary-green-dark); /* #3D6F44 */
  color: #FFFFFF !important;
  padding: 0.9rem 2rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(61, 111, 68, 0.28);
  transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.btn-blog-all:hover {
  background-color: #2A4D31;
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(42, 77, 49, 0.38);
}

/* --- WhatsApp CTA Block for Subpages --- */
.subpage-whatsapp-cta {
  background-color: var(--primary-green-surface);
  padding: 1rem 0;
}

/* --- Responsive: Tablet (768–1023px) --- */
@media (max-width: 1024px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .location-page .section-title,
  .hub-page .section-title {
    font-size: 1.7rem;
  }

  .blog-post__title {
    font-size: 1.8rem;
  }
}

/* --- Responsive: Mobile (<768px) --- */
@media (max-width: 768px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }

  .location-page .section-title,
  .hub-page .section-title {
    font-size: 1.4rem;
  }

  .blog-post__title {
    font-size: 1.5rem;
  }

  .blog-post__body {
    font-size: 1rem;
  }

  .coverage-state-group h2 {
    font-size: 1.15rem;
  }

  .region-link {
    font-size: 0.95rem;
    padding: 0.75rem 1.4rem;
  }

  .hub-transfer-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .hub-transfer-input-group {
    flex-direction: column;
    gap: 0.75rem;
  }

  .hub-transfer-input {
    width: 100%;
    height: 56px;
    min-height: 56px;
    flex: none;
    font-size: 16px;
    box-sizing: border-box;
  }

  .hub-transfer-btn {
    width: 100%;
    min-height: 48px;
  }

  .hub-help-section {
    padding: 2.75rem 0;
  }

  .hub-help-title {
    font-size: 1.35rem;
  }

  .hub-help-btn {
    font-size: 1.1rem;
    padding: 16px 30px;
    width: 100%;
    max-width: 320px;
  }

  .hub-floating-cta {
    font-size: 0.95rem;
    padding: 12px 20px;
    bottom: 16px;
    max-width: calc(100% - 110px);
  }
}

/* ==========================================================================
   P. LEGAL / AVISO DE PRIVACIDAD PAGE
   ========================================================================== */
.legal-page {
  background-color: var(--bg-white);
  padding: 3rem 0;
  min-height: 60vh;
}

.legal-container {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.legal-back-nav {
  margin-bottom: 2rem;
}

.legal-header {
  margin-bottom: 2.25rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-light);
}

.legal-title {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.25;
  margin: 0.75rem 0 0.5rem 0;
}

.legal-update-date {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin: 0;
}

.legal-content h2 {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--primary-green-dark);
  margin-top: 2.25rem;
  margin-bottom: 0.85rem;
  line-height: 1.35;
}

.legal-content p {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--text-dark);
  margin-bottom: 1.25rem;
}

.legal-content ul {
  margin: 0 0 1.25rem 1.25rem;
  padding-left: 0.75rem;
}

.legal-content li {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--text-dark);
  margin-bottom: 0.5rem;
}

.legal-contact-email {
  background: var(--bg-smoke);
  border-left: 4px solid var(--primary-green);
  padding: 1rem 1.25rem;
  border-radius: var(--radius-sm);
  display: inline-block;
  margin: 0.5rem 0 1.5rem 0;
  font-size: 1.05rem;
}

.legal-email-link {
  color: var(--primary-green-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}

.legal-email-link:hover {
  color: var(--primary-green);
}

@media (max-width: 768px) {
  .legal-page {
    padding: 2rem 0;
  }
  .legal-title {
    font-size: 1.6rem;
  }
  .legal-content h2 {
    font-size: 1.2rem;
    margin-top: 1.75rem;
  }
  .legal-content p,
  .legal-content li {
    font-size: 0.95rem;
    line-height: 1.65;
  }
  .legal-contact-email {
    display: block;
    font-size: 0.95rem;
    word-break: break-all;
  }
}

/* ==========================================================================
   404 ERROR PAGE STYLES
   ========================================================================== */
.error-page-main {
  min-height: calc(100vh - var(--nav-height) - 300px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 1rem;
  background-color: var(--bg-light);
}

.error-card {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
  background: var(--bg-white);
  padding: 3.5rem 2.5rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-color);
}

.error-title {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.3;
  margin: 1.25rem 0 1rem;
}

.error-description {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 2rem;
}

.error-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.error-meta-box {
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-color);
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.5;
}

@media (max-width: 640px) {
  .error-card {
    padding: 2.5rem 1.5rem;
  }
  .error-title {
    font-size: 1.5rem;
  }
  .error-actions {
    flex-direction: column;
    width: 100%;
  }
  .error-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   CORRECCIONES PRE-LANZAMIENTO (21 sep 2026)
   Accesibilidad, área táctil y cumplimiento LFPDPPP
   ========================================================================== */

/* --- Área táctil del carrusel del hero ---
   ATENCION: aqui vivia un SEGUNDO bloque `.carousel-dot` que sobreescribia al
   del hero (ganaba por orden de cascada) y forzaba el boton a 32x44 con
   `::before` de 10px y activo de 26px. Era la causa real de que el indicador se
   viera enorme en movil y escritorio. Se elimino (23 sep 2026) junto con el
   `@media (min-width: 769px) { .carousel-dot { width: 44px } }` que lo
   ensanchaba aun mas en escritorio.
   La unica definicion valida del punto esta ahora en la seccion del hero
   (buscar "Punto del carrusel (unica definicion)"). */

/* --- Casilla de consentimiento del aviso de privacidad (LFPDPPP) --- */
.form-consent {
  margin-top: 0.25rem;
  margin-bottom: 0.75rem;
}

.form-consent-label {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-muted);
  cursor: pointer;
  font-weight: 400;
}

.form-consent-label input[type="checkbox"] {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 0.15rem;
  accent-color: var(--primary-green);
  cursor: pointer;
}

.form-consent-label a {
  color: var(--accent-blue-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form-consent.has-error .form-consent-label {
  color: #B3261E;
}

.form-consent.has-error input[type="checkbox"] {
  outline: 2px solid #B3261E;
  outline-offset: 2px;
}

.form-consent .form-error {
  display: none;
}

.form-consent.has-error .form-error {
  display: block;
}

/* --- Enlace "saltar al contenido" para navegación por teclado --- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0.5rem;
  z-index: 9999;
  background: var(--primary-green-dark);
  color: #FFFFFF;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: 0;
  outline: 3px solid #FFFFFF;
  outline-offset: -3px;
}

/* --- Respeto a la preferencia de movimiento reducido --- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .hero-slide,
  .facility-slide {
    transition: none !important;
  }
}



/* ===========================================================================
   HERO — RESPONSIVE IMAGE VARIANTS  (pre-launch, 21 sep 2026)
   ---------------------------------------------------------------------------
   Hero slides carry their background as an inline style so that slide 1 can be
   preloaded as the LCP element and slides 2-4 can be deferred by js/main.js.
   Inline styles outrank stylesheet rules, hence the !important below.

   Two tiers, because one landscape crop cannot serve both shapes:

     * 601-900px (tablets verticales, marco ~0.73-0.81): the 1200px landscape
       variant is fine — it keeps ~55-60% of its width.

     * <=600px (telefonos, marco ~0.51): a landscape crop is the wrong shape.
       `cover` would be forced to show the FULL height of the photo and only
       ~38% of its width, so the sky and the foreground swallowed the frame and
       the actual subject (building, pool, sign) ended up hidden behind the text
       block. The -hero-portrait.webp files are pre-cut to 9:16 (720x1280) so
       that the phone shows ~91% of the crop, i.e. the framing is decided by the
       crop and not by the browser. See make_hero_portrait.py.

   Paths are relative to THIS file (css/), so they use ../images/.
   =========================================================================== */

/* --- Tablets verticales: variante apaisada de 1200px --------------------- */
@media (min-width: 601px) and (max-width: 900px) {
  .hero-slide--aerea {
    background-image: url('../images/vista-aerea-casa-consuelo-centro-rehabilitacion-aguascalientes-mobile.webp') !important;
  }
  .hero-slide--fachada {
    background-image: url('../images/fachada-casa-consuelo-recuperacion-adicciones-aguascalientes-mobile.webp') !important;
  }
  .hero-slide--alberca {
    background-image: url('../images/alberca-recreativa-casa-consuelo-aguascalientes-mobile.webp') !important;
  }
  .hero-slide--patio {
    background-image: url('../images/patio-central-casa-consuelo-internamiento-aguascalientes-mobile.webp') !important;
  }
}

/* --- Telefonos: variante vertical recortada a medida ---------------------- */
@media (max-width: 600px) {
  /* En un marco vertical el eje Y ya queda cubierto por `cover`, asi que el
     encuadre vertical lo decide el RECORTE DEL ARCHIVO, no `background-position`:
     con el hero a 390x981 (ratio 0.398) y la variante a 720x1600 (ratio 0.45),
     `cover` escala por altura y solo recorta el 12% del ancho. Es decir, cambiar
     `background-position-y` aqui NO tendria ningun efecto.
     Las variantes se regeneran con `make_hero_portrait.py` cuando cambia el alto
     del hero; ver la cabecera de ese script. */
  .hero-slide {
    background-position: center center !important;
  }
  .hero-slide--aerea {
    background-image: url('../images/vista-aerea-casa-consuelo-centro-rehabilitacion-aguascalientes-hero-portrait.webp') !important;
  }
  .hero-slide--fachada {
    background-image: url('../images/fachada-casa-consuelo-recuperacion-adicciones-aguascalientes-hero-portrait.webp') !important;
  }
  .hero-slide--alberca {
    background-image: url('../images/alberca-recreativa-casa-consuelo-aguascalientes-hero-portrait.webp') !important;
  }
  .hero-slide--patio {
    background-image: url('../images/patio-central-casa-consuelo-internamiento-aguascalientes-hero-portrait.webp') !important;
  }
}

/* ===========================================================================
   REGIONAL HUB PAGES — CONTENT BLOCKS  (pre-launch, 21 sep 2026)
   ---------------------------------------------------------------------------
   The four /zona-* pages were ~220-word doorway pages: an H1, a list of towns,
   a map and a button. They now carry real body content (intro, why-choose-us,
   a distance table and their own FAQ), so they need layout.
   =========================================================================== */

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

.hub-h2 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--text-dark);
  margin: 0 0 1rem;
}

/* --- Intro prose --------------------------------------------------------- */
.hub-intro {
  max-width: 76ch;
  margin: 2rem auto 0;
}
.hub-intro p {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--text-muted);
  margin: 0 0 1.15rem;
}
.hub-intro p:last-child { margin-bottom: 0; }

/* --- Why choose us ------------------------------------------------------ */
.hub-why {
  max-width: 76ch;
  margin: 3rem auto 0;
}
.hub-why-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1rem;
}
.hub-why-item {
  background: var(--bg-smoke);
  border-left: 3px solid var(--primary-green);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 1.15rem 1.35rem;
}
.hub-why-title {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0 0 0.4rem;
}
.hub-why-text {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0;
}

/* --- Distance table ----------------------------------------------------- */
.hub-travel {
  max-width: 76ch;
  margin: 3rem auto 0;
}
.hub-travel-note {
  font-size: 0.9rem;
  color: var(--text-light);
  margin: 0 0 1rem;
}
.hub-travel-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
}
.hub-travel-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  min-width: 340px;
}
.hub-travel-table thead th {
  background: var(--primary-green-surface);
  color: var(--text-dark);
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  padding: 0.75rem 1rem;
}
.hub-travel-table tbody tr + tr { border-top: 1px solid var(--border-light); }
.hub-travel-table tbody th {
  font-weight: 500;
  color: var(--text-dark);
  text-align: left;
  padding: 0.7rem 1rem;
}
.hub-travel-km,
.hub-travel-time {
  color: var(--text-muted);
  padding: 0.7rem 1rem;
  white-space: nowrap;
}
.hub-travel-km { font-variant-numeric: tabular-nums; }
.hub-travel-table thead th:nth-child(2),
.hub-travel-table thead th:nth-child(3) { width: 7.5rem; }

/* --- Zone FAQ ----------------------------------------------------------- */
.hub-faq {
  max-width: 76ch;
  margin: 3rem auto 0;
}
.hub-faq-item {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  margin-bottom: 0.65rem;
  background: var(--bg-white);
  overflow: hidden;
}
.hub-faq-q {
  cursor: pointer;
  list-style: none;
  padding: 1.05rem 3rem 1.05rem 1.2rem;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
  position: relative;
}
.hub-faq-q::-webkit-details-marker { display: none; }
.hub-faq-q::after {
  content: "+";
  position: absolute;
  right: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--primary-green);
  line-height: 1;
}
.hub-faq-item[open] .hub-faq-q::after { content: "\2212"; }
.hub-faq-q:focus-visible {
  outline: 3px solid var(--border-focus);
  outline-offset: -3px;
}
.hub-faq-a {
  padding: 0 1.2rem 1.15rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-muted);
}
.hub-faq-a p { margin: 0; }

/* --- Zone conversion block ---------------------------------------------- */
.hub-zone-cta {
  max-width: 76ch;
  margin: 3rem auto 0;
  background: var(--accent-blue-light);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
  text-align: center;
}
.hub-zone-cta-text {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0 auto 1.5rem;
  max-width: 58ch;
}
.hub-zone-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

@media (max-width: 600px) {
  .hub-h2 { font-size: 1.3rem; }
  .hub-intro p { font-size: 1rem; }
  .hub-zone-cta { padding: 1.6rem 1.15rem; }
  .hub-zone-cta-actions .btn { width: 100%; }
  .hub-travel-table { font-size: 0.9rem; }
  .hub-travel-table thead th,
  .hub-travel-table tbody th,
  .hub-travel-km,
  .hub-travel-time { padding: 0.6rem 0.7rem; }
}

/* Coverage page intro reuses the hub intro styles; just tighten the top margin
   so it sits under the page header without an awkward gap. */
.coverage-intro { margin-top: 0.5rem; }

/* ==========================================================================
   Q. AVISO DE COOKIES / CONSENTIMIENTO DE ANALÍTICA (LFPDPPP)
   Se muestra solo cuando analytics.js tiene un ID de GA4 configurado.
   ========================================================================== */
.cc-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  background-color: var(--bg-white);
  border-top: 1px solid var(--border-light);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.10);
  transform: translateY(110%);
  opacity: 0;
  transition: transform 0.32s ease, opacity 0.32s ease;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.cc-consent--visible {
  transform: translateY(0);
  opacity: 1;
}

.cc-consent__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

.cc-consent__text { flex: 1 1 auto; }

.cc-consent__title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 0.25rem;
}

.cc-consent__body {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
}

.cc-consent__body a {
  color: var(--accent-blue-dark);
  text-decoration: underline;
}

.cc-consent__actions {
  display: flex;
  gap: 0.6rem;
  flex: 0 0 auto;
}

.cc-consent__btn {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: var(--radius-pill);
  padding: 0.6rem 1.4rem;
  min-height: 44px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.cc-consent__btn--primary {
  background-color: var(--primary-green);
  color: var(--text-inverse);
}
.cc-consent__btn--primary:hover,
.cc-consent__btn--primary:focus-visible {
  background-color: var(--primary-green-dark);
}

.cc-consent__btn--ghost {
  background-color: transparent;
  color: var(--text-dark);
  border-color: var(--border-light);
}
.cc-consent__btn--ghost:hover,
.cc-consent__btn--ghost:focus-visible {
  background-color: var(--bg-subtle);
}

.cc-consent__btn:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* Mientras el aviso está abierto, subimos los botones flotantes para no
   tapar el CTA de WhatsApp (que es la conversión principal del sitio). */
body.cc-consent-open .floating-whatsapp-container {
  bottom: calc(var(--cc-consent-h, 0px) + 1.25rem);
  transition: bottom 0.32s ease;
}

body.cc-consent-open .hub-floating-cta {
  bottom: calc(var(--cc-consent-h, 0px) + 16px);
  transition: bottom 0.32s ease;
}

@media (max-width: 700px) {
  .cc-consent__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
  }
  .cc-consent__actions { width: 100%; }
  .cc-consent__btn { flex: 1 1 0; padding: 0.6rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cc-consent,
  body.cc-consent-open .floating-whatsapp-container,
  body.cc-consent-open .hub-floating-cta {
    transition: none;
  }
}