/* landing.css — Maquetación de las secciones de la landing y de las páginas internas.
   Solo variables de tokens.css; los componentes viven en components.css. */

/* ---- Secciones de la portada (rediseño) ----
   Fondos alternados (blanco, gris suave y negro) y un ritmo vertical corto: cada sección tiene la misma separación
   (--section-gap, 33 px en celular y tablet y 45 px en escritorio) y comparte el contenedor de 1280 px. */
.sec {
  padding-block: var(--section-gap);
}

.sec--blanca {
  background: var(--color-surface);
}

.sec--gris {
  background: var(--color-canvas);
}

.sec--oscura {
  background: var(--color-ground-dark);
  color: var(--color-on-dark);
}

.sec--oscura h1,
.sec--oscura h2,
.sec--oscura h3 {
  color: var(--color-on-dark);
}

.sec--oscura :focus-visible {
  outline-color: var(--color-focus-on-dark);
}

/* Cabecera de sección: título a la izquierda y, si hay, un enlace a la derecha */
.sec__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  margin-bottom: var(--space-5);
}

/* Las anclas del encabezado no quedan tapadas al saltar a una sección */
[id] {
  scroll-margin-top: var(--space-6);
}

/* ---- Sucursales: dos tarjetas del mismo tamaño ---- */
.branch-grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 48rem) {
  .branch-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Foto de la sucursal: 16:7. Sin foto subida, en los sitios que no son producción se reserva el espacio, rotulado PRUEBA
   (en producción la tarjeta no lleva ninguna imagen ni espacio reservado). */
.branch-card .foto {
  aspect-ratio: 16 / 7;
  border-radius: var(--radius-field);
}

.branch-card__photo--prueba {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-2);
  aspect-ratio: 16 / 7;
  padding: var(--space-3);
  border: var(--border-field) dashed var(--color-field-border);
  text-align: center;
  color: var(--color-ink-2);
  font-size: var(--text-caption);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-caption);
}

.rotulo-prueba {
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-on-dark);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}

/* ---- Laboratorio (negro) y banda de beneficios (blanca, pegada debajo) ---- */
.lab {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

.lab__texto {
  display: grid;
  gap: var(--space-3);
  align-content: center;
}

.lab__etiqueta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-on-dark-2);
  font-size: var(--text-caption);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Línea corta amarilla (detalle de la marca) */
.lab__etiqueta::after {
  content: "";
  width: var(--space-7);
  height: 2px;
  background: var(--croma-yellow);
}

.lab__parrafo {
  max-width: 34rem;
  color: var(--color-on-dark);
  font-size: var(--text-lead);
  line-height: var(--lh-body);
}

.lab__media {
  position: relative;
}

.lab__foto {
  border-radius: var(--radius-card);
  box-shadow: none;
}

/* Insignia circular sobre el borde de la foto: fondo blanco y aro amarillo (acento de la marca). Es el único texto sobre la foto. */
.lab__insignia {
  position: absolute;
  bottom: calc(-1 * var(--space-5));
  left: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(var(--space-9) + var(--space-5));
  aspect-ratio: 1;
  padding: var(--space-3);
  border: 3px solid var(--croma-yellow);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  color: var(--color-ink);
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  text-align: center;
  text-transform: uppercase;
}

.lab__insignia strong {
  font-weight: var(--fw-bold);
}

.lab__insignia span {
  color: var(--color-ink-2);
  font-weight: var(--fw-semibold);
}

/* Banda de beneficios: lista vertical en celular; tres columnas con separadores desde 768 px */
.sec--banda {
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-line);
}

.lab__barra {
  display: grid;
  color: var(--color-ink);
  font-size: var(--text-small);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-small);
}

.lab__barra li {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  max-width: none;
  padding-block: var(--space-3);
}

.lab__barra li + li {
  border-top: 1px solid var(--color-line);
}

.lab__icono {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: var(--radius-pill);
  background: var(--color-canvas);
  color: var(--color-ink-2);
}

@media (min-width: 48rem) {
  .lab__barra {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-block: var(--space-3);
  }

  .lab__barra li + li {
    padding-left: var(--space-5);
    border-top: 0;
    border-left: 1px solid var(--color-line);
  }
}

@media (min-width: 64rem) {
  .lab--con-foto {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-8);
  }

  .lab__insignia {
    left: calc(-1 * var(--space-7));
    bottom: var(--space-6);
  }
}

/* ---- Entrada suave, una sola vez (revelar.js; excepción autorizada en docs/DESIGN.md, "Movimiento"): fade + 16 px,
   600 ms, en los bloques [data-revelar]. Solo opacity y transform, así que no hay salto de diseño. El estado oculto
   existe únicamente si el script marcó <html> con js-revelar (sin JS o con movimiento reducido el contenido se ve
   directo). La transición vive en el estado visible: se oculta al instante y solo la entrada anima. ---- */
@media (prefers-reduced-motion: no-preference) {
  .js-revelar [data-revelar]:not(.is-visible) {
    opacity: 0;
    transform: translateY(16px);
  }

  .js-revelar [data-revelar].is-visible {
    transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
  }
}

/* ---- Redes + contacto: Instagram y WhatsApp en un solo bloque gris, dos tarjetas blancas de la misma altura ----
   Escritorio (desde 1024 px): 62 / 38. Debajo de 1024 px: Instagram arriba y WhatsApp abajo, a todo el ancho. Con una sola
   tarjeta (la otra no existe) ocupa el ancho completo. */
.redes__grid {
  display: grid;
  gap: var(--space-5);
  align-items: stretch;
}

@media (min-width: 64rem) {
  .redes__grid--doble {
    grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
  }
}

/* ---- Contacto: tarjeta vertical y compacta (texto arriba; foto abajo con el botón encima). Franja de espectro arriba. ---- */
.contacto {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.contacto__linea {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 2;
  height: var(--spectrum-height);
  background: var(--spectrum-bar);
}

.contacto__texto {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
  align-content: start;
  padding: var(--space-6) var(--space-5) var(--space-4);
}

.contacto__etiqueta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-ink-3);
  font-size: var(--text-caption);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.contacto__etiqueta::after {
  content: "";
  width: var(--space-7);
  height: 2px;
  background: var(--croma-yellow);
}

.contacto h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 1.875rem);
}

.contacto__titulo-1,
.contacto__titulo-2 {
  display: block;
}

.contacto__titulo-1 {
  color: var(--color-ink-2);
  font-weight: var(--fw-bold);
}

.contacto__titulo-2 {
  color: var(--color-ink);
  font-weight: var(--fw-extrabold);
}

/* Foto que llena lo que sobra de la tarjeta; el botón se apoya abajo, sobre la foto */
.contacto__media {
  position: relative;
  flex: 1 1 auto;
  min-height: 15rem;
}

.contacto__foto {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-radius: 0;
}

.contacto__foto .foto__img {
  width: 100%;
  height: 100%;
  /* La foto de archivo es cuadrada: se ancla abajo para que queden las personas, no el fondo vacío de arriba */
  object-position: 50% 85%;
}

.contacto__accion {
  position: absolute;
  inset: auto var(--space-4) var(--space-4);
  z-index: 1;
  margin: 0;
}

.contacto__boton {
  width: 100%;
  max-width: 24rem;
  gap: var(--space-2);
  min-height: calc(var(--tap-min) + var(--space-2));
  padding-inline: var(--space-4);
  font-size: var(--text-body);
  box-shadow: var(--shadow-card);
}

/* Sin foto: el botón queda debajo del texto */
.contacto__media--sola {
  min-height: 0;
}

.contacto__media--sola .contacto__accion {
  position: static;
  padding: 0 var(--space-5) var(--space-5);
}

/* Tablet, y escritorio con la tarjeta sola: texto a la izquierda y foto con el botón a la derecha */
@media (min-width: 48rem) {
  .contacto {
    flex-direction: row;
  }

  .contacto__texto {
    flex: 1 1 52%;
    align-content: center;
    padding: var(--space-6);
  }

  .contacto__media {
    flex: 1 1 48%;
    min-height: 16rem;
  }

  .contacto__media--sola {
    align-self: center;
  }
}

@media (min-width: 64rem) {
  .contacto__texto {
    padding: var(--space-7);
  }

  /* Junto a Instagram: tarjeta angosta y vertical */
  .redes__grid--doble .contacto {
    flex-direction: column;
  }

  .redes__grid--doble .contacto__texto {
    flex: 0 0 auto;
    align-content: start;
    padding: var(--space-6) var(--space-5) var(--space-4);
  }

  .redes__grid--doble .contacto__media {
    flex: 1 1 auto;
    min-height: 15rem;
  }
}

/* ---- Fotos (una sola imagen o carrusel): caja 4:3 que recorta con object-fit, así nada salta al cargar ---- */
.foto {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--color-sunken);
}

.foto__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Carrusel (solo con 2 o más fotos; public/assets/js/carrusel.js suma flechas y puntos).
   Sin JavaScript sigue siendo un desplazador horizontal con scroll-snap, enfocable con el teclado. ---- */
.carrusel {
  position: relative;
}

.carrusel__pistas {
  position: relative;
  display: flex;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.carrusel__pistas::-webkit-scrollbar {
  display: none;
}

.carrusel__diapositiva {
  flex: 0 0 100%;
  max-width: none;
  scroll-snap-align: start;
}

.carrusel__flecha,
.carrusel__puntos {
  position: absolute;
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.carrusel__flecha {
  top: 50%;
  display: grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--color-ink);
  cursor: pointer;
  transform: translateY(-50%);
}

.carrusel__flecha--anterior {
  left: var(--space-3);
}

.carrusel__flecha--siguiente {
  right: var(--space-3);
}

.carrusel__flecha:disabled {
  opacity: 0.4;
  cursor: default;
}

.carrusel__puntos {
  bottom: var(--space-3);
  left: 50%;
  display: flex;
  border-radius: var(--radius-pill);
  transform: translateX(-50%);
}

/* Área táctil de 48 px; el punto visible es más chico */
.carrusel__punto {
  display: grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.carrusel__punto::before {
  content: "";
  width: var(--space-3);
  height: var(--space-3);
  border: var(--border-field) solid var(--color-ink);
  border-radius: var(--radius-pill);
}

.carrusel__punto[aria-current="true"]::before {
  background: var(--color-ink);
}

/* ---- Páginas internas (privacidad, créditos) ---- */
.pagina {
  padding-block: var(--space-7) var(--section-gap);
}

.pagina > .container > * + * {
  margin-top: var(--space-5);
}

.pagina h2 {
  margin-top: var(--space-7);
}

.pagina h2 + * {
  margin-top: var(--space-3);
}

.pagina ul {
  display: grid;
  gap: var(--space-2);
  padding-left: var(--space-5);
  list-style: disc;
}

.pagina li {
  max-width: var(--measure);
}