/* ============================================================
   DYRECO · Dirección C — NAVE
   p-home.css — lo que es SOLO de la Home (index.html)
   ------------------------------------------------------------
   Se carga DESPUÉS de estilos.css. Aquí no vive ningún mecanismo:
   los mecanismos (persiana, fichas, galería horizontal, panel
   vertical, pestañas, transiciones, microinteracciones) son
   compartidos y están en css/estilos.css §06 y §21–26.
   Aquí solo va la COMPOSICIÓN de esta página.
   ============================================================ */

:root {
  /* Ancho del item destacado de la galería de trabajos. Es un token nuevo
     porque la Home abre la galería con una pieza a doble ancho y las páginas
     de división la abrirán con todos los items iguales: el valor tiene que
     poder cambiar sin tocar el mecanismo. */
  --galh-destacado: clamp(300px, 40vw, 620px);
}


/* --- 1 · HERO --------------------------------------------------
   La pausa automática cuando el carrusel sale de pantalla es una
   decisión de esta página (el hero es lo primero y lo más pesado del
   sitio: no tiene sentido que siga girando 4.000 px más abajo).
   Se hace con una clase propia y NO con .is-pausada, que es la parada
   del mecanismo (movimiento reducido) y no se quita al volver. */

.persiana.is-oculta .persiana__progreso span,
.persiana.is-oculta .persiana__punto.is-active .persiana__punto-barra,
/* Y EL KEN BURNS, que es lo pesado (estilos.css §6.2: `kenburns` infinite
   alternate sobre cuatro capas de foto a sangre). La regla decía que el hero
   «deja de girar» al salir de pantalla y solo paraba las dos barritas: medido a
   390×844 con la página al 80 % de su altura, `hero-stage` ya tenía `is-oculta`
   y las cuatro animaciones `kenburns` seguían en playState "running". En hilo
   principal no se nota (4,72 % de CPU con ellas corriendo contra 4,96 %
   pausándolas a mano: ruido); lo que se paga es compositor, memoria de GPU y
   batería, y se paga por nada 4.000 px más abajo. */
.persiana.is-oculta .persiana__kb {
  animation-play-state: paused;
}
/* Al salir de pantalla también se sueltan las capas promocionadas: el
   `will-change: transform` de la slide activa y la saliente (estilos.css §6.2)
   mantiene una capa de compositor por foto a sangre. Fuera de pantalla no hay
   nada que componer. */
.persiana.is-oculta .persiana__kb,
.persiana.is-oculta .persiana__lama,
.persiana.is-oculta .persiana__foto { will-change: auto; }

/* El <picture> de cada lama solo elige el recorte (3:2 o el `-alto` 3:4); no
   debe crear caja, o el `height:100%` del <img> perdería su referencia y se
   rompería el `cover`. Mismo motivo que `.media picture` en estilos.css §04,
   pero las lamas del hero no son `.media`. */
.persiana__foto picture { display: contents; }


/* --- 2 · TRABAJOS ----------------------------------------------
   La galería horizontal de la Home abre con una pieza destacada al
   doble de ancho: entra en pantalla ya empezada y pide seguir. */

.trabajos .galh__item:first-child { flex: 0 0 var(--galh-destacado); }
.trabajos .galh__carro { align-items: start; }
/* El carro arranca pegado al mismo borde izquierdo que los trece H2. */
.trabajos .galh__carro { padding-inline: var(--gutter) calc(var(--gutter) * 2); }

@media (max-width: 620px) {
  .trabajos .galh__item:first-child { flex: 0 0 86vw; }
}


/* --- 3 · EQUIPO ------------------------------------------------
   El carrusel de fichas es el aperitivo de la Home: 8 fichas y una franja
   compacta, con la intriga de que hay más detrás del arrastre.
   Y es SOLO de la Home. Empresa llevaba el mismo carril, más ancho y con
   diez fichas, y las dos secciones se leían iguales; ahora allí el equipo es
   una nómina de filas con todos los nombres a la vista (p-empresa.css §5). */

.equipo .fichas { margin-top: calc(var(--bloque) * -0.25); }


/* --- 4 · RESEÑAS — SECCIÓN RETIRADA (26-ago-2026) -------------
   El bloque de reseñas salió de la Home por decisión de Juan: iba con
   reseñas reales de Google y no las tenemos. Sus reglas de composición
   (`.resenas__cont`) se borran para que la hoja no mienta sobre lo que
   hay en la página; el mecanismo del panel vertical sigue entero en
   css/estilos.css §12, listo para cuando vuelva o para otra página. */

/* --- 5 · PERSONALIZACIÓN ---------------------------------------
   En la Home las pestañas conviven con una cabecera partida, así que
   la columna de pestañas se estrecha un punto para que el panel —que
   es el espectáculo— gane sitio. */

.perso .pest { grid-template-columns: minmax(0, 3.4fr) minmax(0, 8.6fr); }

@media (max-width: 900px) {
  .perso .pest { grid-template-columns: 1fr; }
}


/* --- 6 · PROVEEDOR INTEGRAL: CTAs Y TIRA DE TRES ----------------
   Ago-2026. La banda de la Home y el bloque destacado de /maquinaria
   eran el mismo componente con distinto reparto: misma foto de la
   nave, mismo parallax de dos capas y misma rejilla de 4 puntos. La
   de Maquinaria tenía dos piezas más —el par de CTAs y una tira de
   tres fotos cruzando las doce columnas— y la de la Home no. Se las
   traemos aquí en vez de repetir la banda entera más abajo, que es lo
   que pedía el encargo sin saber que la sección ya existía.

   Ojo al reparto de columnas: el destacado de Maquinaria pone el texto
   en 1/6 y los puntos en 8/5; aquí los puntos van en 7/6 (estilos.css
   §09) y esa diferencia se mantiene, porque es lo único que distingue
   la composición de las dos páginas. Lo que se copia es la tira, no la
   retícula. */

.integral__botones {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(26px, 3vw, 40px);
}

.integral__fotos {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  align-items: start;
}
.integral__fotos .media { aspect-ratio: 3 / 2; }

/* El halo radial que refuerza el scrim bajo los puntos (estilos.css §09,
   `.integral__puntos::before`) se derrama 72 px por abajo y, con la tira
   ya puesta, moría justo encima de la primera fila de fotos como una
   mancha. Se recorta por abajo: arriba y a los lados sigue igual, que es
   donde hace falta para el texto. */
.integral__puntos::before { inset: -72px -70px -20px; }

@media (max-width: 1024px) {
  /* Apilado, la sección deja de tener alto de sobra y el centrado vertical
     del contenedor pierde sentido: el contenido manda. */
  .integral { min-height: 0; align-items: start; }
  .integral__fotos { grid-column: 1 / -1; }
}
/* La tira se apila antes que el resto: a tres columnas en 720 px cada foto
   mediría 216 px y ya no contaría nada. Mismo umbral que en /maquinaria. */
@media (max-width: 720px) {
  .integral__fotos { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 560px) {
  .integral__botones .btn { flex: 1 1 100%; }
}

/* Con la tira puesta, la rejilla de puntos deja de tener que estirarse.
   `.integral__puntos` llevaba `align-self: stretch` + `align-content:
   space-between` (estilos.css §09) por una razón que ya no existe: la esquina
   inferior derecha se quedaba vacía y cantaba sobre la foto. Ahora la ocupan
   las tres fotos, y el estirado solo servía para separar las dos filas de
   puntos —más aún desde que la columna izquierda creció con los CTAs—, así
   que los puntos se leían como cuatro islas en vez de como una rejilla.
   Vuelven a ser compactos y arriba, en línea con el titular. */
.integral__puntos { align-self: start; align-content: start; }


/* --- 7 · HERO: UNA ENTRADA POR SLIDE ---------------------------
   27-ago-2026. El párrafo del hero era único: las cuatro slides
   enseñaban una foto distinta y contaban lo mismo. Ahora hay cuatro
   y rotan con el carrusel.

   Se hace AQUÍ y no en estilos.css porque `.hero__entrada` es una
   clase compartida: uniformidad.html y rotulacion.html la usan con un
   solo párrafo y no deben heredar el apilado. Todo va colgado de
   `.hero__entradas`, que solo existe en la Home.

   Las cuatro comparten celda (`grid-area: 1/1`), así que la fila mide
   lo que la más alta y los botones no se mueven al cambiar de slide.
   El `margin-bottom` se queda en el párrafo, NO en el contenedor: es
   idéntico en las cuatro y las tres media queries de presupuesto
   vertical de estilos.css (§6.7) lo ajustan por ancho y por alto de
   ventana; moverlo aquí las dejaría sin efecto. */

.hero__entradas {
  grid-area: entrada;
  display: grid;
}
.hero__entradas .hero__entrada {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}
.hero__entradas .hero__entrada.is-activo { opacity: 1; transform: none; }

/* Sin JS el carrusel no arranca: se ve la primera entera y quieta, la misma
   red de seguridad que tienen los rótulos en estilos.css §6.2. */
.persiana:not([data-dy-persiana]) .hero__entradas .hero__entrada:first-child {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .hero__entradas .hero__entrada { transition: none; }
}


/* --- 8 · HERO: UN TITULAR POR SLIDE ----------------------------
   27-ago-2026. El titular era lo único que ya no cambiaba, así que
   las cuatro slides seguían diciendo lo mismo debajo de cuatro fotos
   distintas. Ahora rota con el carrusel.

   `grid-area` es lo delicado: `.hero__h1` lleva `grid-area: h1` en
   estilos.css §6.1 para colocarse en la rejilla del hero. Ese nombre
   lo hereda ahora el contenedor, y los cuatro titulares pasan a
   compartir la celda 1/1 del contenedor — de ahí que la regla vaya
   con el descendiente, que gana en especificidad.

   El `margin-bottom` se queda en el titular, no en el contenedor: es
   el mismo en los cuatro y las media queries de presupuesto vertical
   de estilos.css (§6.7) lo ajustan por alto de ventana. */

.hero__titulares {
  grid-area: h1;
  display: grid;
}
.hero__titulares .hero__h1 {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}
.hero__titulares .hero__h1.is-activo { opacity: 1; transform: none; }

/* Los tres que no son <h1> son <p role="heading">: el navegador no les da
   los márgenes del encabezado, así que se igualan a mano para que los cuatro
   ocupen exactamente lo mismo y la caja no cambie de alto al rotar. */
.hero__titulares p.hero__h1 { margin-top: 0; }

.persiana:not([data-dy-persiana]) .hero__titulares .hero__h1:first-child {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .hero__titulares .hero__h1 { transition: none; }
}


/* --- 9 · HERO SIN JS: UNA SLIDE COHERENTE, NO CUATRO A TROZOS ---
   `estilos.css` §6.6 desapila los rótulos cuando no hay JS
   (`html:not(.js) .hero__div { grid-area: auto; opacity: 1 }`) para que las
   cuatro divisiones no queden invisibles. Con el hero de una sola pieza eso
   funcionaba: se leían cuatro rótulos bajo un titular común.

   Desde que el TITULAR y la ENTRADA también cambian por slide, deja de
   funcionar: el orden del DOM es titulares(4) → rótulos(4) → entradas(4), así
   que desapilarlo daría cuatro titulares gigantes seguidos, luego cuatro
   rótulos y luego cuatro párrafos, sin manera de saber qué va con qué. Y
   desapilar solo los rótulos —que es lo que pasaba antes de esta regla— dejaba
   cuatro etiquetas de división bajo el titular de Ferretería.

   Sin JS se enseña la PRIMERA slide entera y coherente. Las otras tres
   divisiones no se pierden: están en la navegación, en el índice bajo el hero
   y desarrolladas enteras en la sección de divisiones. El texto sigue en el
   HTML servido, así que para un rastreador no cambia nada. */

html:not(.js) .hero__divs .hero__div {
  grid-area: 1 / 1;
  opacity: 0;
}
html:not(.js) .hero__divs .hero__div:first-child { opacity: 1; }