/* ========================================================================
   Total e Integral Salud — sistema de diseño
   Paleta extraída del CSS real del sitio anterior (nicepage.css),
   corrigiendo el contraste de texto (ver notas junto a cada variable).
   ======================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;0,800;1,700&display=swap");

:root {
  /* --- Paleta ---
     Nota: --teal y --gris-texto habían quedado con valores rotos (hex de
     8 dígitos con canal alfa colado, y --teal apuntando a un rojo oscuro
     en vez de teal). Se restauran a colores sólidos correctos: son la base
     de los cálculos de contraste de todo el sitio y no pueden depender de
     qué haya detrás. --celeste y --celeste-bg se pasan a sólido conservando
     el tono verde-azulado que ya tenían. */
  --rojo:         #de0324; /* marca, H1, CTA primario — 5:1 sobre blanco (AA) */
  --rojo-hover:   #c00c27;
  --celeste:      #9fddcf; /* SOLO fondo/decoración. Como texto no cumple contraste — prohibido */
  --celeste-bg:   #e3f5f1; /* fondo suave de sección alterna */
  --teal:         #41807c; /* títulos, links — 4.56:1 sobre blanco (AA) */
  --teal-fuerte:  #2f5c59; /* hover de links, más margen de contraste */
  --teal-oscuro:  #1f3d3a; /* fondo de la sección "Nosotros" y variantes oscuras */
  --turquesa:     #2cccc4; /* acento sobre fondo oscuro */
  --gris-texto:   #333333; /* cuerpo — 12.6:1 sobre blanco (AAA) */
  --gris-suave:   #666666;
  --gris-borde:   #e2e2e2;
  --blanco:       #ffffff;
  --footer-bg:    #333333;

  /* --- Tipografía ---
     Antes los títulos usaban Playfair Display (serif). Se pasan a la misma
     familia sans-serif que el resto del texto, para una lectura más
     minimalista y consistente en todo el sitio. */
  --f-titulo: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-texto:  "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --h1: clamp(2.1rem, 1.2rem + 3.6vw, 4rem);
  --h2: clamp(1.6rem, 1.15rem + 1.8vw, 2.75rem);
  --h3: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --texto-grande: clamp(1.05rem, 0.95rem + 0.4vw, 1.2rem);
  --texto: clamp(0.95rem, 0.9rem + 0.15vw, 1.05rem);

  /* --- Espaciado fluido --- */
  --espacio-seccion: clamp(2.5rem, 1.5rem + 4vw, 6rem);
  --espacio-bloque: clamp(1.25rem, 1rem + 1vw, 2.5rem);

  /* --- Layout --- */
  --ancho-maximo: 1200px;
  --radio: 12px;
  --header-h: 96px;
  --ola-alto: clamp(46px, 6vw, 90px); /* alto de la curva del hero — se usa acá y en .hero__ola, así nunca se desincronizan */
}

/* ========================================================================
   Reset
   ======================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* El panel de nav mobile es position:fixed y queda fuera de pantalla via
     transform cuando está cerrado. Algunos navegadores igual lo cuentan en
     el scrollWidth del documento (aunque no se vea), habilitando un scroll
     horizontal fantasma. overflow-x:hidden en body no alcanza porque un
     elemento fixed no queda contenido por su padre — hace falta acá. */
  overflow-x: hidden;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
body {
  margin: 0;
  font-family: var(--f-texto);
  font-size: var(--texto);
  color: var(--gris-texto);
  line-height: 1.6;
  background: var(--blanco);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--f-titulo); line-height: 1.2; margin: 0; }
p { margin: 0; }
button { font: inherit; cursor: pointer; }
input, textarea { font: inherit; }

.contenedor, section, header, footer, div { min-width: 0; }

/* ========================================================================
   Utilidades
   ======================================================================== */
.contenedor {
  width: min(100% - 2rem, var(--ancho-maximo));
  margin-inline: auto;
}
.seccion {
  padding-block: var(--espacio-seccion);
  scroll-margin-top: var(--header-h);
}
.seccion--alterna { background: var(--celeste-bg); }
.eyebrow {
  display: block;
  font-family: var(--f-titulo);
  font-weight: 700;
  font-style: italic;
  color: var(--teal);
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.3rem);
  margin-bottom: 0.5rem;
}
.titulo-seccion {
  color: var(--rojo);
  font-size: var(--h2);
  font-weight: 800;
  margin-bottom: var(--espacio-bloque);
  max-width: 42ch;
}
.titulo-seccion--centrado { margin-inline: auto; text-align: center; }
.lead {
  font-size: var(--texto-grande);
  color: var(--gris-suave);
  max-width: 60ch;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.75rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border: 2px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.btn:hover, .btn:focus-visible { transform: translateY(-2px); }
.btn:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.btn--primario {
  background: var(--rojo);
  color: var(--blanco);
  box-shadow: 0 8px 20px -8px rgba(234, 14, 47, 0.55);
}
.btn--primario:hover { background: var(--rojo-hover); }
.btn--outline {
  background: transparent;
  border-color: var(--gris-borde);
  color: var(--gris-texto);
}
.btn--outline:hover { border-color: var(--teal); color: var(--teal); }
.btn--whatsapp {
  background: #25d366;
  color: var(--blanco);
  box-shadow: 0 8px 20px -8px rgba(37, 211, 102, 0.55);
}
.btn--whatsapp:hover { background: #1fb855; }
.btn svg { width: 1.15em; height: 1.15em; flex-shrink: 0; }

/* Botón de WhatsApp flotante, siempre visible en la esquina inferior derecha */
.whatsapp-flotante {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 95;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25d366;
  color: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px -6px rgba(37, 211, 102, 0.65);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.whatsapp-flotante:hover, .whatsapp-flotante:focus-visible {
  transform: scale(1.08);
  box-shadow: 0 14px 32px -6px rgba(37, 211, 102, 0.75);
}
.whatsapp-flotante:focus-visible { outline: 3px solid var(--teal-fuerte); outline-offset: 3px; }
.whatsapp-flotante svg { width: 30px; height: 30px; }

/* ========================================================================
   Header
   ======================================================================== */
.header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--gris-borde);
  /* Sombra siempre presente para separar el header de la sección de abajo
     (antes solo aparecía tras hacer scroll, y con el hero blanco nuevo
     quedaban pegados sin ninguna diferencia visual). */
  box-shadow: 0 4px 16px -10px rgba(0, 0, 0, 0.18);
  transition: box-shadow 0.2s ease;
}
.header.con-scroll {
  box-shadow: 0 6px 22px -10px rgba(0, 0, 0, 0.22);
}
.header__interior {
  width: min(100% - 2rem, var(--ancho-maximo));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.logo { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.logo img { height: 96px; width: auto; }
.logo span {
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--rojo);
  white-space: nowrap;
}
@media (max-width: 420px) {
  /* En pantallas muy angostas el nombre al lado del isotipo choca con el
     botón de menú. El logo ya trae el nombre incorporado en la imagen,
     así que el texto duplicado se puede ocultar sin perder identidad. */
  .logo span { display: none; }
  
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 0.5rem;
  color: var(--gris-texto);
}
.nav-toggle svg { width: 50px; height: 50px; }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.5rem + 2vw, 2.25rem);
  flex-wrap: wrap;
}
.nav a {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--gris-texto);
  padding-block: 0.4rem;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.nav a:hover, .nav a:focus-visible { color: var(--teal); }
.nav a.activo { color: var(--teal); border-bottom-color: var(--teal); }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }

  /* Panel que desliza desde la derecha hacia la izquierda, como cajón
     lateral (off-canvas), en vez de desplegarse hacia abajo. */
  .nav {
    position: fixed;
    inset: var(--header-h) 0 0 auto;
    width: min(80vw, 320px);
    height: calc(100dvh - var(--header-h));
    background: var(--blanco);
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem;
    gap: 0.25rem;
    box-shadow: -12px 0 30px -18px rgba(0, 0, 0, 0.35);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
  }
  .nav.abierto { transform: translateX(0); }
  .nav a {
    width: 100%;
    padding: 0.85rem 0.5rem;
    border-bottom: 1px solid var(--gris-borde);
  }
}

/* ========================================================================
   Hero
   ======================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--header-h) + var(--espacio-seccion));
  padding-bottom: calc(var(--espacio-seccion) + var(--ola-alto));
  background-color: var(--celeste-bg);
  background-image:
    linear-gradient(115deg, rgb(255 255 255) 0%, rgb(255 255 255 / 80%) 44%, rgb(248 248 248 / 0%) 81%),
    url(../img/hero.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right center;
  scroll-margin-top: var(--header-h);
}
@media (max-width: 720px) {
  /* En mobile se saca la foto por completo: fondo blanco liso y, en su
     lugar, el logo grande centrado arriba del texto (ver .hero__logo-grande
     más abajo). Todo el bloque de texto y los botones se centran también. */
  .hero {
    background-image: none;
    background-color: var(--blanco);
  }
  .hero__texto {
    margin-inline: auto;
    text-align: center;
  }
  /* El título quedaba chico al lado del logo grande y los botones; se
     agranda un poco más de lo que da el clamp fluido normal, y los
     botones se achican para no dominar la pantalla. */
  .hero h1 { font-size: clamp(2.5rem, 2rem + 3.5vw, 3rem); }
  .hero__acciones {
    justify-content: center;
  }
  .hero__acciones .btn {
    padding: 0.65rem 1.3rem;
    font-size: 0.82rem;
  }
}
/* Curva blanca que cierra el hero contra la sección siguiente */
.hero__ola {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px; /* tapa la línea de 1px que deja el redondeo de subpíxeles */
  width: 100%;
  height: var(--ola-alto);
  display: block;
  pointer-events: none;
}
.hero__ola path { fill: var(--blanco); }

/* Flecha de "desplazate hacia abajo": burbuja blanca autocontenida para que
   se lea igual de bien sobre la foto (desktop) que sobre el fondo blanco
   liso (mobile). Rebote suave y minimalista, no una animación llamativa. */
.hero__scroll-cue {
  position: absolute;
  left: 50%;
  bottom: calc(var(--ola-alto) + -2rem);
  transform: translateX(-50%);
  z-index: 2;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal-fuerte);
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.35);
  animation: hero-rebote 2.2s ease-in-out infinite;
  transition: color 0.2s ease;
}
.hero__scroll-cue:hover, .hero__scroll-cue:focus-visible { color: var(--teal); }
.hero__scroll-cue svg { width: 20px; height: 20px; }
@keyframes hero-rebote {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--espacio-bloque);
}
@media (min-width: 860px) {

  .hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; }
}
.hero__texto { max-width: 46ch; }
.hero__logo-grande { display: none; }
@media (max-width: 720px) {
  .hero__logo-grande {
    display: block;
    width: min(58vw, 230px);
    height: auto;
    margin: 0 auto 1.75rem;
  }
}
.hero h1 {
  font-size: var(--h1);
  font-weight: 800;
  color: var(--rojo);
  margin-block: 0.5rem 1rem;
}
.hero p { font-size: var(--texto-grande); color: var(--gris-texto); }
.hero p b { color: rgba(20, 78, 54, 0.753) }
.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: var(--espacio-bloque);
}

/* ========================================================================
   Servicios (grilla que se reacomoda sola, sin media queries)
   ======================================================================== */
.servicios__grid {
  display: grid;
  grid-template-columns: 1fr; /* mobile: una tarjeta debajo de la otra */
  gap: clamp(1rem, 0.7rem + 1.5vw, 1.75rem);
}
@media (min-width: 700px) {
  /* 3 columnas × 2 filas fijas — nunca 2 ni 4, para que las 6 tarjetas
     queden simétricas. El padding de cada tarjeta se achica con el
     viewport (ver .tarjeta-servicio) en vez de romper la grilla. */
  .servicios__grid { grid-template-columns: repeat(3, 1fr); }
}
.tarjeta-servicio {
  position: relative;
  overflow: hidden;
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  padding: clamp(1rem, 0.5rem + 2.2vw, 2.25rem);
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.tarjeta-servicio:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px -20px rgba(65, 128, 124, 0.45);
  border-color: var(--teal-fuerte);
}
/* Círculo decorativo, sencillo, en la esquina — eco de la referencia visual */
.tarjeta-servicio::before {
  content: "";
  position: absolute;
  top: -42px;
  right: -42px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: var(--celeste);
  opacity: 0.18;
  pointer-events: none;
}
.tarjeta-servicio__icono {
  position: relative;
  width: 60px;
  height: 60px;
  margin-inline: auto;
  color: var(--teal);
  margin-bottom: 1rem;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tarjeta-servicio__icono svg { width: 100%; height: 100%; }
.tarjeta-servicio:hover .tarjeta-servicio__icono { transform: scale(1.12) rotate(-4deg); }
.tarjeta-servicio h3 {
  position: relative;
  font-size: var(--h3);
  font-weight: 700;
  color: var(--gris-texto);
  margin-bottom: 0.5rem;
}
.tarjeta-servicio p { position: relative; color: var(--gris-suave); font-size: 0.95rem; }

/* --- Variantes de color, reutilizando la misma paleta (rojo / teal / celeste) --- */
.tarjeta-servicio--rojo {
  background: linear-gradient(135deg, var(--rojo), var(--rojo-hover));
  border-color: transparent;
}
.tarjeta-servicio--rojo::before { background: var(--blanco); opacity: 0.12; }
.tarjeta-servicio--rojo h3, .tarjeta-servicio--rojo p, .tarjeta-servicio--rojo .tarjeta-servicio__icono { color: var(--blanco); }

.tarjeta-servicio--teal {
  background: linear-gradient(135deg, var(--teal-fuerte), var(--teal-oscuro));
  border-color: transparent;
}
.tarjeta-servicio--teal::before { background: var(--blanco); opacity: 0.1; }
.tarjeta-servicio--teal h3, .tarjeta-servicio--teal p, .tarjeta-servicio--teal .tarjeta-servicio__icono { color: var(--blanco); }

.tarjeta-servicio--celeste {
  background: linear-gradient(135deg, var(--celeste-bg), var(--celeste));
  border-color: transparent;
}
.tarjeta-servicio--celeste::before { background: var(--blanco); opacity: 0.45; }
.tarjeta-servicio--celeste h3, .tarjeta-servicio--celeste p { color: var(--gris-texto); }
.tarjeta-servicio--celeste .tarjeta-servicio__icono { color: var(--teal-fuerte); }

.tarjeta-servicio--rojo:hover, .tarjeta-servicio--teal:hover, .tarjeta-servicio--celeste:hover {
  border-color: transparent;
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.3);
}

/* ========================================================================
   Nosotros
   ======================================================================== */
.nosotros__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--espacio-bloque);
  align-items: center;
}
@media (min-width: 860px) {
  
  .nosotros__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 1rem + 4vw, 4rem); }
}
.nosotros__img {
  border-radius: var(--radio);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.5);
}
.nosotros__img img { width: 100%; height: 100%; object-fit: cover; }
.nosotros__texto p + p { margin-top: 1rem; }
.nosotros__texto p { color: rgba(255, 255, 255, 0.9); }
.nosotros__destaque {
  margin-top: var(--espacio-bloque);
  padding: 1.25rem 1.5rem;
  background: var(--blanco);
  border-radius: var(--radio);
  color: var(--gris-texto);
  font-weight: 600;
  box-shadow: 0 20px 45px -22px rgba(0, 0, 0, 0.45);
}

/* --- Sección oscura (usa la misma paleta, sobre fondo teal) ---
   El degradado se resuelve en un tramo fijo de alto, no un %, para que la
   transición se vea igual de suave sin importar cuánto crezca la sección
   con el contenido. */
.seccion--oscura {
  background: linear-gradient(
    to bottom,
    var(--teal-oscuro) 0%,
    var(--teal-oscuro) calc(100% - 12rem),
    var(--blanco) 100%
  );
  color: var(--blanco);
}
.seccion--oscura .eyebrow { color: var(--turquesa); }
.seccion--oscura .titulo-seccion { color: var(--blanco); }
.seccion--oscura .lead { color: rgba(255, 255, 255, 0.85); }

/* ========================================================================
   Cartillas
   ======================================================================== */
.cartillas__cabecera {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-bloque);
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--espacio-bloque);
}
.cartillas__cabecera .titulo-seccion { margin-bottom: 0.5rem; }
.buscador-cartillas {
  position: relative;
  width: min(100%, 320px);
  flex-shrink: 0;
}
.buscador-cartillas input {
  width: 100%;
  padding: 0.8rem 1rem 0.8rem 2.6rem;
  border: 1px solid var(--gris-borde);
  border-radius: 999px;
  font-size: 0.95rem;
  color: var(--gris-texto);
}
.buscador-cartillas input:focus-visible { outline: 2px solid var(--teal); border-color: var(--teal); }
.buscador-cartillas svg {
  position: absolute;
  left: 1rem;
  top: 50%;
  translate: 0 -50%;
  width: 18px;
  height: 18px;
  color: var(--gris-suave);
  pointer-events: none;
}

.cartillas__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem;
}
.tarjeta-cartilla {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  padding: 1.1rem 1.25rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.tarjeta-cartilla:hover, .tarjeta-cartilla:focus-visible {
  border-color: var(--teal-fuerte);
  box-shadow: 0 14px 28px -20px rgba(65, 128, 124, 0.5);
  transform: translateY(-2px);
}
.tarjeta-cartilla__icono {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--celeste-bg);
  color: var(--teal-fuerte);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease;
}
.tarjeta-cartilla__icono svg { width: 22px; height: 22px; }
.tarjeta-cartilla:hover .tarjeta-cartilla__icono { transform: scale(1.1); }
.tarjeta-cartilla__descargar svg { transition: transform 0.25s ease; }
.tarjeta-cartilla:hover .tarjeta-cartilla__descargar svg { transform: translateY(3px); }
.tarjeta-cartilla__info { min-width: 0; flex: 1; }
.tarjeta-cartilla__zona {
  font-weight: 700;
  color: var(--gris-texto);
  font-size: 1rem;
  overflow-wrap: anywhere;
}
.tarjeta-cartilla__meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--gris-suave);
  margin-top: 0.2rem;
  flex-wrap: wrap;
}
.badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
}
.badge--nueva { background: #e3f6ec; color: #1a7a45; }
.tarjeta-cartilla__descargar {
  flex-shrink: 0;
  color: var(--teal);
}
.tarjeta-cartilla__descargar svg { width: 22px; height: 22px; }

.cartillas__vacio {
  display: none;
  text-align: center;
  padding: 3rem 1rem;
  color: var(--gris-suave);
}
.cartillas__vacio.visible { display: block; }

/* El buscador oculta tarjetas con el atributo [hidden]. La regla de arriba
   (.tarjeta-cartilla { display:flex }) tiene la misma especificidad que el
   estilo nativo [hidden] y, por cargar después, ganaría — así que se refuerza
   explícitamente para que ocultar funcione de verdad. */
.tarjeta-cartilla[hidden] { display: none; }

/* ========================================================================
   Preguntas frecuentes
   ======================================================================== */
.faq__lista {
  display: grid;
  gap: 1rem;
  max-width: 760px;
  margin-inline: auto;
}
.faq__item {
  position: relative; /* para que la respuesta pueda flotar sin empujar el resto */
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.faq__item:hover { border-color: var(--teal-fuerte); }
.faq__pregunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  font-weight: 700;
  font-size: 1rem;
  color: var(--gris-texto);
  cursor: pointer;
  list-style: none;
}
.faq__pregunta::-webkit-details-marker { display: none; }
.faq__item[open] .faq__pregunta { color: var(--teal-fuerte); }
.faq__icono {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--teal);
  transition: transform 0.3s ease;
}
.faq__item[open] .faq__icono { transform: rotate(180deg); }

/* La respuesta se posiciona flotando sobre lo que sigue en vez de empujarlo:
   sale del flujo normal (position:absolute) y sube por encima con z-index,
   así abrir una pregunta no mueve ni agranda la sección ni las tarjetas
   de abajo. */
.faq__respuesta {
  position: absolute;
  top: 100%;
  left: -1px;
  right: -1px;
  z-index: 20;
  margin-top: -1px;
  padding: 1rem 1.4rem 1.25rem;
  background: var(--blanco);
  border: 1px solid var(--teal-fuerte);
  border-top: 1px solid var(--gris-borde);
  border-radius: 0 0 var(--radio) var(--radio);
  box-shadow: 0 22px 40px -16px rgba(0, 0, 0, 0.28);
  color: var(--gris-suave);
  font-size: 0.95rem;
  line-height: 1.65;
}
/* Cascada sencilla al aparecer, igual que en cartillas */
.faq__lista .reveal:nth-child(4n+1) { transition-delay: 0s; }
.faq__lista .reveal:nth-child(4n+2) { transition-delay: 0.06s; }
.faq__lista .reveal:nth-child(4n+3) { transition-delay: 0.12s; }
.faq__lista .reveal:nth-child(4n+4) { transition-delay: 0.18s; }

/* ========================================================================
   Contacto
   ======================================================================== */
.contacto__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--espacio-bloque);
}
@media (min-width: 860px) {
  
  .contacto__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 1rem + 3vw, 3.5rem); }
}
.contacto__imagen {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: var(--radio);
  overflow: hidden;
  min-height: 260px;
}
.contacto__imagen img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; filter: brightness(0.75); }
.contacto__imagen h2 {
  position: relative;
  z-index: 1;
  color: var(--blanco);
  font-size: var(--h2);
  padding: clamp(1.5rem, 1rem + 3vw, 3rem);
}

.contacto__vias {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.contacto__via {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--teal-fuerte);
  padding: 0.6rem 1rem;
  border: 1px solid var(--teal-fuerte);
  border-radius: 999px;
  transition: border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.contacto__via:hover {
  border-color: var(--teal);
  color: var(--teal-fuerte);
  transform: translateY(-3px);
  box-shadow: 0 12px 22px -14px rgba(47, 92, 89, 0.5);
}
.contacto__via svg { width: 18px; height: 18px; flex-shrink: 0; }
/* Entrada escalonada de los 3 botones de contacto */
.contacto__vias .reveal:nth-child(1) { transition-delay: 0s; }
.contacto__vias .reveal:nth-child(2) { transition-delay: 0.09s; }
.contacto__vias .reveal:nth-child(3) { transition-delay: 0.18s; }

.form { display: grid; gap: 1.1rem; }
.campo { display: grid; gap: 0.4rem; }
.campo label { font-weight: 700; font-size: 0.9rem; color: var(--gris-texto); }
.campo input, .campo textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--gris-borde);
  border-radius: 8px;
  color: var(--teal-fuerte);
  background: var(--blanco);
  resize: vertical;
}
.campo input:focus-visible, .campo textarea:focus-visible { outline: 2px solid var(--celeste); border-color: var(--celeste-bg); }
.form__estado {
  display: none;
  padding: 0.85rem 1rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
}
.form__estado.visible { display: block; }
.form__estado--ok { background: #e3f6ec; color: #1a7a45; }
.form__estado--error { background: #fbeced; color: #b3261e; }

/* ========================================================================
   Footer
   ======================================================================== */
.footer {
  background: var(--footer-bg);
  color: #d9d9d9;
  padding-block: var(--espacio-seccion);
}
.footer h2 {
  color: var(--turquesa);
  font-size: var(--h3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 1.5rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.25rem;
}
.footer__item {
  min-width: 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radio);
  padding: 1.25rem 1.4rem;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.footer__item:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); }
.footer__item p { color: #b7b7b7; margin-bottom: 0.7rem; font-size: 0.85rem; line-height: 1.5; }
.footer__item a {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  min-width: 0;
  color: var(--blanco);
  font-weight: 700;
  font-size: 1rem;
}
.footer__item a:hover .footer__texto { color: var(--turquesa); }
.footer__item__icono {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(44, 204, 196, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}
.footer__item a:hover .footer__item__icono { background: rgba(44, 204, 196, 0.28); }
.footer__item__icono svg { width: 17px; height: 17px; color: var(--turquesa); flex-shrink: 0; }
.footer__texto {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
  padding-top: 0.3rem;
  transition: color 0.2s ease;
}
.footer__bottom {
  margin-top: var(--espacio-bloque);
  padding-top: var(--espacio-bloque);
  border-top: 1px solid #4a4a4a;
  font-size: 0.8rem;
  color: #999;
  text-align: center;
}

/* ========================================================================
   Animaciones de aparición al hacer scroll
   Progressive enhancement: sin la clase .js (agregada por un script mínimo
   en <head>, antes de pintar) los elementos .reveal se ven normales desde
   el principio — así nunca queda contenido invisible si JS falla o está
   desactivado.
   ======================================================================== */
.js .reveal {
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.js .reveal--left  { transform: translateX(-32px); }
.js .reveal--right { transform: translateX(32px); }
.js .reveal--up     { transform: translateY(32px); }
.js .reveal--down   { transform: translateY(-24px); }
.js .reveal.en-vista {
  opacity: 1;
  transform: none;
}
/* Cascada sencilla para la grilla de cartillas (14 tarjetas, misma dirección) */
.cartillas__grid .reveal:nth-child(4n+1) { transition-delay: 0s; }
.cartillas__grid .reveal:nth-child(4n+2) { transition-delay: 0.06s; }
.cartillas__grid .reveal:nth-child(4n+3) { transition-delay: 0.12s; }
.cartillas__grid .reveal:nth-child(4n+4) { transition-delay: 0.18s; }

/* ========================================================================
   Accesibilidad
   ======================================================================== */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--rojo);
  color: var(--blanco);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 8px 0;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

@media (max-width: 860px) {
    .nosotros__img{
    display: none;
  }
}

/* ========================================================================
   Preloader
   Sin JS queda oculto (ver regla .preloader de más abajo, fuera de .js) —
   nunca debe poder tapar el sitio para siempre si algo falla.
   Simple: el logo aparece y desaparece suavemente en loop mientras carga.
   main.js la retiene un mínimo de 3s.
   ======================================================================== */
.preloader { display: none; }
.js .preloader {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blanco);
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.preloader--oculto {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader__logo {
  width: clamp(130px, 30vw, 220px);
  height: auto;
  animation: preloader-pulso 1.8s ease-in-out infinite;
}
@keyframes preloader-pulso {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}

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