/* ============================================================
   ROLUM · css/secciones.css — composición por sección
   Las piezas viven en componentes.css; aquí solo se colocan.
   ============================================================ */

section{ padding-block:var(--s9) }

/* ---- Hero · secuencia de obras ----------------------------
   Tres mundos, una foto a la vez: altura, planta, comercio.
   Las fotos rotan solas con crossfade (sitio.js, cada 6 s);
   la tríada vive sobre el velo Forja y cada frase es una sola
   línea a cualquier ancho — el clamp está calculado para que
   "Menos proveedores." quepa desde 320px sin quebrarse. */
.hero-obras{
  position:relative; overflow:hidden;
  display:flex; align-items:flex-end;
  /* pantalla completa: la segunda sección no se asoma al cargar */
  min-height:100vh;
  min-height:100svh;
  background:var(--rol-forja);
}
.hero-obras .fotos{ position:absolute; inset:0 }
.hero-obras .fotos img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.88);
  opacity:0;
  transition:opacity 1200ms var(--ease-out);
}
.hero-obras .fotos img.activa{ opacity:1 }
/* Encuadre por foto: la secuencia son las cuatro de PRIORIDAD y
   cada una tiene su propio centro de interés. */
.hero-obras .fotos img:nth-child(1){ object-position:50% 46% }
.hero-obras .fotos img:nth-child(2){ object-position:56% 46% }
.hero-obras .fotos img:nth-child(3){ object-position:50% 58% }
.hero-obras .fotos img:nth-child(4){ object-position:50% 56% }
.hero-obras .velo{
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(20,16,13,.50) 0%,
    rgba(20,16,13,.24) 38%,
    rgba(20,16,13,.62) 72%,
    rgba(20,16,13,.90) 100%);
}
.hero-obras .contenido{
  position:relative; width:100%;
  padding-block:var(--s9) var(--s8);
}
.hero-obras h1{
  /* piso en 2rem: con nowrap y overflow:hidden, un piso más alto
     recorta el punto final de "Menos proveedores." bajo 360px */
  font-size:clamp(2rem, 7.8vw, 5.5rem);
  color:var(--rol-cal);
  text-shadow:0 2px 28px rgba(20,16,13,.55);
}
.hero-obras h1 span{ display:block; white-space:nowrap }
.hero-obras h1 em{ font-style:normal; color:var(--rol-chispa) }

/* ---- Presentación · el oficio en grande, la promesa debajo - */
.presentacion{ padding-block:var(--s8) }
.presentacion h2{ font-size:var(--t-h1); max-width:none; margin-bottom:var(--s5) }
/* la soldadura: el cordón Fragua bajo el oficio */
.presentacion h2::after{
  content:""; display:block;
  width:200px; height:4px;
  margin-top:var(--s4);
  background:var(--senal);
  clip-path:polygon(0 0, 100% 0, calc(100% - 4px) 100%, 4px 100%);
}
.js .presentacion h2.anima::after{
  transform:scaleX(0); transform-origin:left center;
  transition:transform .7s var(--ease-out) .35s;
}
.js .presentacion h2.anima.in::after{ transform:scaleX(1) }
.presentacion .decl{
  font-size:clamp(1.1875rem, 1.8vw, 1.375rem); line-height:1.6;
  color:var(--tenue); max-width:56ch;
}
.presentacion .decl strong{ color:var(--tinta) }
.presentacion .cta-fila{ margin-top:var(--s6) }

/* ---- Puertas · tres situaciones ---------------------------- */
/* en el home siguen a la presentación y comparten su aire */
.presentacion + .puertas{ padding-top:0 }
.puertas .grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4);
}

/* ---- Objeción · el bloque grande es Forja ------------------ */
.objecion{ padding-block:var(--s9) }
.objecion .enc h2{ max-width:26ch }
.objecion .enc .nota{ color:var(--rol-zinc) }
.libro{ list-style:none; border-top:2px solid var(--rol-fragua) }
.libro li{
  display:grid; grid-template-columns:64px 250px 1fr;
  gap:var(--s5); align-items:baseline;
  padding-block:var(--s5);
  border-bottom:1px solid var(--rol-hierro);
}
.libro .num{
  font-family:var(--f-mono); font-weight:500; font-size:var(--t-dato);
  font-variant-numeric:tabular-nums; color:var(--rol-chispa);
}
.libro h3{ font-size:1.375rem }
.libro p{ color:var(--rol-zinc); max-width:58ch; font-size:1rem }
.libro strong{ color:var(--rol-cal) }

/* ---- Obra documentada -------------------------------------- */
.obras .grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4);
}
.obras .figura img{ aspect-ratio:3/2 }

/* ---- Catálogo · puente a los tres grupos ------------------- */
.familias .grid{
  display:grid; gap:var(--s4);
  /* min(300px,100%): que la minmax no desborde en pantallas de 320 */
  grid-template-columns:repeat(auto-fit, minmax(min(300px,100%),1fr));
}
.familias .puerta h3{ font-size:1.5rem }

/* ---- Suministros · placa ----------------------------------- */
.suministros{ padding-top:0 }
.suministros .placa{
  background:var(--superficie);
  border:1px solid var(--regla);
  border-top:2px solid var(--rol-forja);
  padding:var(--s7) var(--s6);
  display:grid; grid-template-columns:1.4fr 1fr; gap:var(--s7);
  align-items:center;
}
.suministros h2{ font-size:var(--t-h2) }
.suministros p{ color:var(--tenue); margin-top:var(--s4) }

/* ---- Grupo · franja VMAC ----------------------------------- */
.grupo{
  border-block:1px solid var(--regla);
  padding-block:var(--s6);
}
.grupo .wrap{ display:flex; gap:var(--s5); align-items:baseline; flex-wrap:wrap }
.grupo b{
  font-family:var(--f-display); font-weight:700; font-size:1.25rem;
  text-transform:uppercase; letter-spacing:.05em;
}
.grupo span{ color:var(--tenue) }

/* ---- Cierre ------------------------------------------------ */
.cierre h2{ font-size:var(--t-h1); max-width:22ch }
.cierre .cta-fila{ margin-top:var(--s6) }

/* ---- Sub-hero · páginas interiores -------------------------
   Cabecera de hoja de especificación: el titular manda la
   columna izquierda con su cordón al pie, la bajada ocupa la
   derecha alineada por abajo. Sin miga ni antetítulo — el
   titular dice dónde está uno y el nav lo confirma. */
.sub-hero{
  padding-block:var(--s8) var(--s7);
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:var(--s6) var(--s8); align-items:end;
}
.sub-hero h1{ font-size:clamp(2.4rem, 5.6vw, 4.25rem); max-width:14ch }
.sub-hero .franja{ width:260px; margin-top:var(--s5) }
.sub-hero .baja{
  color:var(--tenue); max-width:46ch;
  font-size:1.125rem; padding-bottom:.4em;
}

/* ---- Catálogo · rejilla de fichas --------------------------
   Las líneas son placas troqueladas en dos columnas: el mismo
   componente que las puertas del home, a la medida del párrafo
   que manda el cliente. */
.catalogo{ padding-block:var(--s7) var(--s9) }
.ficha-grid{
  display:grid; gap:var(--s4);
  grid-template-columns:repeat(2,1fr);
}

/* ---- Galería ----------------------------------------------- */
.galeria{ padding-top:0 }
.galeria .enc{ margin-bottom:var(--s6) }
/* La proporción vive en la REJILLA, no en la foto ni en la celda:
   4 columnas × 2 filas iguales (8/3 ≈ celdas de 4:3). Con filas
   1fr todas las celdas estiran y el mosaico no puede abrir huecos
   por la relación intrínseca de ninguna imagen. */
.galeria .grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4);
  aspect-ratio:8/3; grid-auto-rows:1fr;
}
.galeria .figura{ overflow:hidden; min-height:0 }
.galeria .figura:first-child{ grid-column:span 2; grid-row:span 2 }
.galeria .figura img{ width:100%; height:100%; object-fit:cover }

/* ---- Galería larga · el muro de registro -------------------
   Cuando la sección no muestra una selección sino TODO lo
   fotografiado, la rejilla deja de ser mosaico cerrado y pasa a
   contacto: celdas 4:3 en cuatro columnas, con una placa doble
   cada ocho para que el muro respire. `dense` rellena el hueco
   que deja la placa doble, y cada foto lleva su línea al pie —
   el muro es índice, no decoración. */
.galeria--larga .grid{
  aspect-ratio:auto;
  grid-auto-rows:auto;
  grid-auto-flow:dense;
}
.galeria--larga .figura{ aspect-ratio:4/3 }
.galeria--larga .figura:first-child{ grid-column:auto; grid-row:auto }
.galeria--larga .figura:nth-child(8n+1){ grid-column:span 2; grid-row:span 2 }


/* ---- Página de línea · alcance y registro ------------------
   Una línea del catálogo abierta: qué abarca (lista numerada a
   varias columnas, misma voz que la guía de contacto) y su
   registro fotográfico — una foto de encabezado a 16/9 y el resto
   en tira. La tira usa auto-fit: con 1, 2, 3 o 4 fotos siempre
   llena el ancho y nunca deja el hueco de una rejilla fija. */
.alcance{ padding-block:var(--s7) var(--s8) }
.alcance .enc{ margin-bottom:var(--s5) }
/* Lo que abarca la línea se enumera AQUÍ, en texto, nunca encima de una
   foto: la foto es apoyo y no afirma qué maniobra muestra. Cada término
   es una placa chica con su folio mono en Óxido. */
.capacidades{
  list-style:none; display:grid; gap:var(--s3);
  grid-template-columns:repeat(auto-fit, minmax(min(220px,100%),1fr));
}
.capacidades li{
  clip-path:var(--chaflan-sm);
  background:var(--superficie);
  padding:var(--s4) var(--s5);
  display:flex; align-items:baseline; gap:var(--s3);
}
.capacidades .folio{
  font-family:var(--f-mono); font-weight:500; font-size:var(--t-chico);
  font-variant-numeric:tabular-nums; letter-spacing:.08em;
  color:var(--acento); flex:none;
}
.capacidades b{
  font-family:var(--f-display); font-weight:600; font-size:1.0625rem;
  text-transform:uppercase; letter-spacing:.01em; line-height:1.15;
  color:var(--tinta);
}
.galeria--linea .figura--lead{ aspect-ratio:16/9; margin-bottom:var(--s4) }
/* La tira lleva tantas columnas como fotos (2 a 5): una sola fila
   que siempre llena el ancho. Con auto-fit, cinco fotos en cuatro
   columnas dejaban una huérfana colgando; con una foto sola, la
   página la asciende a segundo encabezado y no hay tira. */
.galeria--linea .tira{ display:grid; gap:var(--s4) }
/* la tira no hereda la placa doble del mosaico base */
.galeria--linea .tira .figura:first-child{ grid-column:auto; grid-row:auto }
.galeria--linea .tira--2{ grid-template-columns:repeat(2,1fr) }
.galeria--linea .tira--3{ grid-template-columns:repeat(3,1fr) }
.galeria--linea .tira--4{ grid-template-columns:repeat(4,1fr) }
.galeria--linea .tira--5{ grid-template-columns:repeat(5,1fr) }
.galeria--linea .tira .figura{ aspect-ratio:4/3 }
.galeria--linea .figura img{ width:100%; height:100%; object-fit:cover }
.volver{ margin-bottom:var(--s5) }

/* ---- Contacto ----------------------------------------------
   El canal real es uno solo, así que la página lo trata como
   pieza: placa Forja con el número a tamaño de dato duro a la
   izquierda, y a la derecha lo que hace falta para contestar
   rápido. Abajo, las mismas tres puertas del home. */
.contacto{ padding-block:var(--s7) var(--s8) }
.contacto .dos{
  display:grid; grid-template-columns:1.05fr .95fr; gap:var(--s7);
  align-items:start;
}
.guia h2{ font-size:1.25rem; margin-bottom:var(--s4) }
.guia ul{ list-style:none }
.guia li{
  display:grid; grid-template-columns:32px 1fr; gap:var(--s3);
  padding-block:var(--s3);
  border-bottom:1px solid var(--regla);
  color:var(--tenue); font-size:1rem;
  align-items:baseline;
}
.guia .num{
  font-family:var(--f-mono); font-weight:500; font-size:var(--t-chico);
  color:var(--acento);
}

/* ---- Responsivo de secciones -------------------------------- */
@media (min-width:721px) and (max-width:1100px){
  .wrap{ padding-inline:var(--s6) }
}
@media (max-width:1000px){
  .hero-obras .contenido{ padding-block:var(--s8) }
}
@media (max-width:900px){
  section{ padding-block:var(--s8) }
  .sub-hero{ grid-template-columns:1fr; align-items:start }
  .sub-hero h1{ max-width:18ch }
  .puertas .grid, .obras .grid, .ficha-grid{ grid-template-columns:1fr }
  /* a dos columnas la rejilla vuelve a fluir: la proporción baja
     a la celda porque ya no hay mosaico que cuadrar */
  .galeria .grid{ grid-template-columns:repeat(2,1fr); aspect-ratio:auto; grid-auto-rows:auto }
  .galeria .figura{ aspect-ratio:4/3 }
  .galeria .figura:first-child{ grid-row:auto; aspect-ratio:16/9 }
  /* a dos columnas la placa doble ocuparía el ancho entero: se retira */
  .galeria--larga .figura:nth-child(8n+1){ grid-column:auto; grid-row:auto }
  .galeria--linea .tira--4, .galeria--linea .tira--5{ grid-template-columns:repeat(3,1fr) }
  .galeria--larga .figura:first-child{ aspect-ratio:4/3 }
  .suministros .placa, .contacto .dos{ grid-template-columns:1fr }
  .libro li{ grid-template-columns:48px 1fr }
  .libro p{ grid-column:2 }
}
@media (max-width:720px){
  .hero-obras .contenido{ padding-block:var(--s8) var(--s7) }
  .presentacion{ padding-block:var(--s7) }
  .sub-hero{ padding-block:var(--s6) var(--s6) }
  .catalogo{ padding-block:var(--s6) var(--s8) }
  .enc{ margin-bottom:var(--s6) }
  .grupo{ padding-block:var(--s5) }
  .suministros .placa{ padding:var(--s6) var(--s5); gap:var(--s5) }
  .canal__marco{ padding:var(--s6) var(--s5) }
  .ficha__marco{ padding:var(--s5) }
}
@media (max-width:560px){
  .libro li{ grid-template-columns:1fr; gap:var(--s2) }
  .libro p{ grid-column:1 }
  .galeria .grid{ grid-template-columns:1fr; gap:var(--s3) }
  .galeria .figura:first-child{ grid-column:auto; aspect-ratio:4/3 }
  .galeria--larga .grid{ grid-template-columns:repeat(2,1fr) }
  .galeria--linea .tira{ grid-template-columns:repeat(2,1fr) !important }
  .grupo .wrap{ gap:var(--s3) }
}