/* ==========================================================================
   Layout — estructura de página, header y grid del hero
   ========================================================================== */

/* ---------- Contenedor ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Header ----------
   Transparente sobre el hero para que la viñeta llegue hasta arriba.
   Absoluto, fuera de <main>: en el inicio con pantallas completas la
   página no hace scroll (se desliza <main>), así que se queda arriba en
   todas las secciones. Con scroll normal (cotizar, 404, movimiento
   reducido) se va con la página. Nunca lleva fondo propio
   (la pastilla del menú ya es su marco). El overlay del menú móvil sí
   es fijo (responsive.css). */
.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: var(--z-header);
  height: var(--header-h);
}

/* Columnas laterales simétricas para que la pastilla quede centrada
   en la pantalla; si falta espacio, ceden sin encimarse. */
.site-header__inner {
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  align-items: center;
  gap: var(--space-5);
  height: 100%;
}

/* Logo + hamburguesa. Queda por encima del overlay del menú
   para que la X y el logo sigan visibles con el menú abierto. */
.site-header__brand {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

/* En desktop el panel no genera caja: nav y redes son celdas
   directas del grid. En móvil es el overlay (responsive.css). */
.site-header__panel {
  display: contents;
}

.site-header__nav {
  justify-self: center;
}

.site-header__aside {
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
}

/* ---------- Hero ----------
   Ocupa la pantalla completa. La capa base es --klein-700; encima van
   la luz, el brillo, la viñeta y el grano (ver "Hero: fondo y atmósfera"
   en components.css). El punto de luz se define aquí y se ajusta por
   breakpoint para que siempre quede detrás de la van. */
.hero {
  --light-x: 55%;
  --light-y: 48%;
  --light-w: 32%;
  --light-h: 60%;
  --glow-x: 60%;
  --glow-y: 38%;
  --glow-w: 34%;
  --glow-h: 44%;
  --vignette-w: 58%;
  --vignette-h: 92%;

  position: relative;
  isolation: isolate;
  min-height: 100svh;
  padding-top: var(--header-h);
  overflow: hidden;
  background-color: var(--klein-700);
}

/* Grid de 3 zonas: texto (~35%) · escena (~50%) · badges (~15%) */
.hero__inner {
  position: relative;
  z-index: var(--z-base);
  display: grid;
  grid-template-columns: minmax(0, 35fr) minmax(0, 50fr) minmax(0, 15fr);
  grid-template-areas: "content scene badges";
  align-items: center;
  min-height: calc(100svh - var(--header-h));
}

.hero__content {
  grid-area: content;
  position: relative;
  z-index: var(--z-overlay);
}

/* La escena puede desbordarse a la derecha: la van invade
   ligeramente la columna de los badges y se superpone. */
.hero__scene {
  grid-area: scene;
  position: relative;
  z-index: var(--z-scene);
  align-self: stretch;
  display: grid;
  place-items: center;
}

/* El escenario mide lo mismo que la van: ocupa casi la mitad del
   ancho del hero (~43%, como en la referencia), centrado en su columna.
   --floor-y: altura de la unión pared/piso (ver "Escena: van y piso de
   estudio" en components.css). Debe quedar arriba de la base de todas
   las cajas visibles; responsive.css la ajusta cuando se mueven. */
.scene__stage {
  --floor-y: 54%;
  position: relative;
  width: 94%;
  translate: -2% 0;
}

/* El marco (<picture>) lleva la capa y las animaciones; la imagen,
   solo su tamaño y sus sombras (components.css) */
.hero__van-frame {
  position: relative;
  z-index: var(--z-van);
}

.hero__van {
  width: 100%;
  height: auto;
}

.hero__badges {
  grid-area: badges;
  position: relative;
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-6);
}

/* ---------- Nosotros ----------
   Dos columnas: quiénes somos (~45 %) y la cuadrícula de valores
   (~55 %). En < 1024px se apilan (responsive.css). Con pantallas
   completas mide la pantalla exacta (ver abajo). Servicios comparte
   la caja de la sección. */
.about,
.services {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(5rem, 3rem + 6vw, 9rem);
}

.about__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(2.5rem, 1rem + 5vw, 6rem);
}

/* ---------- Servicios ----------
   Arriba el título (izquierda) y el texto con el botón (derecha); abajo
   la galería a todo el ancho, con alto fijo. En < 1024px el encabezado
   se apila (responsive.css). Con pantallas completas la galería toma el
   alto que sobra (ver abajo). */
.services__inner {
  display: grid;
  gap: clamp(var(--space-6), 1rem + 3vw, var(--space-8));
}

.services__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
  align-items: end;
  gap: var(--space-5) var(--space-9);
}

.service-gallery {
  height: clamp(24rem, 62vh, 40rem);
}

/* ---------- Preguntas frecuentes y footer ----------
   Última sección del inicio: una sola columna centrada (encabezado,
   pestañas, lista y cierre) y debajo el footer, que lleva su propio
   relleno. Con pantallas completas hace scroll por dentro (ver abajo). */
.faq {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.faq__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: clamp(4.5rem, 2.5rem + 6vw, 8rem);
}

.faq__panels,
.faq__actions {
  width: 100%;
  max-width: 50rem;
}

/* ---------- Página 404 (404.html) ----------
   Una pantalla: deja el alto del header fijo arriba y centra el
   contenido en el resto. */
.not-found {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: 100svh;
  padding-top: calc(var(--header-h) + var(--space-5));
  padding-bottom: clamp(var(--space-8), 2rem + 3vw, var(--space-10));
}

.not-found__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ---------- Escritorio: altura mínima (solo con scroll normal) ---------- */
@media (min-width: 64em) {
  .hero {
    min-height: max(100svh, var(--hero-min-h));
  }

  .hero__inner {
    min-height: max(calc(100svh - var(--header-h)), calc(var(--hero-min-h) - var(--header-h)));
  }
}

/* ==========================================================================
   Inicio: pantallas completas
   main.js pone .has-paging en el <html> cuando hay JS, movimiento normal
   y alto suficiente (no en un celular acostado). Entonces la página no
   hace scroll: cada .page-section mide la pantalla exacta (--page-h) y
   <main> sube o baja completo con transform (--page = sección activa).
   El header y los puntos quedan fuera de <main>, fijos. Sin la clase,
   las secciones son altas normales y se recorren con scroll.
   ========================================================================== */
.has-paging,
.has-paging body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none; /* sin rebote ni "jalar para recargar" */
  scroll-behavior: auto;
}

.has-paging main {
  transform: translate3d(0, calc(var(--page, 0) * var(--page-h) * -1), 0);
  transition: transform var(--page-duration) var(--ease-page);
  /* Capa propia desde el inicio: sin esto el navegador la crea al
     arrancar cada cambio y la dibuja completa en ese primer cuadro */
  will-change: transform;
  touch-action: pinch-zoom; /* el dedo cambia de sección (main.js); el zoom sigue */
}

/* Al cargar con #nosotros o al cambiar de tamaño: sin deslizamiento */
.has-paging main.is-instant {
  transition: none;
}

.has-paging .page-section {
  height: var(--page-h);
  min-height: 0;
}

/* Las secciones reciben el foco al llegar desde el menú (tabindex -1):
   el marco de foco lo llevan los links, no la pantalla completa */
.page-section:focus {
  outline: none;
}

.has-paging .hero__inner {
  height: 100%;
  min-height: 0;
}

/* Nosotros: el contenido centrado en lo que deja el header */
.has-paging .about {
  display: grid;
  align-content: center;
  padding-top: var(--header-h);
  padding-bottom: clamp(var(--space-5), 5dvh, var(--space-9));
}

/* Servicios: el encabezado arriba y la galería con el alto que sobra
   (fila 1fr); la galería es un contenedor de tamaño y se ajusta sola */
.has-paging .services {
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--header-h) + clamp(var(--space-2), 2dvh, var(--space-5)));
  padding-bottom: clamp(var(--space-5), 5dvh, var(--space-8));
}

.has-paging .services__inner {
  flex: 1;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(var(--space-5), 4dvh, var(--space-8));
}

.has-paging .service-gallery {
  height: auto;
}

/* Sección con scroll por dentro (preguntas frecuentes y footer): la
   sección mide la pantalla y su fondo se queda quieto; la capa
   __scroll la cubre completa y es la que se recorre. Arriba, bajo el
   header, el contenido se desvanece con una máscara (no hay fondo
   detrás del header). main.js reparte la rueda, el dedo y el teclado
   entre este scroll y el cambio de sección. */
.has-paging .page-section__scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain; /* el scroll no se pasa a la página */
  scroll-padding-top: calc(var(--header-h) + var(--space-2)); /* el foco con Tab no queda bajo el header */
  touch-action: pan-y pinch-zoom; /* aquí el dedo sí hace scroll */
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--chalk) 28%, transparent) transparent;
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--header-h) * 0.5),
    #000 calc(var(--header-h) + var(--space-2))
  );
}

/* Las preguntas ocupan la primera pantalla, centradas en lo que deja
   el header; el footer queda justo debajo */
.has-paging .faq__inner {
  justify-content: center;
  min-height: var(--page-h);
  padding-top: calc(var(--header-h) + clamp(var(--space-2), 2dvh, var(--space-5)));
  padding-bottom: clamp(var(--space-6), 6dvh, var(--space-9));
}