/* ============================================================
   Secciones, contenedores y rejillas base
   ============================================================ */

.section{ position:relative; padding:var(--section-y) 0; }
.section-tight{ padding:var(--section-y-tight) 0; }
/* El relleno de sección en móvil lo ajustan los tokens (--section-y). */
@media (max-width:720px){
  .chapter-head{ margin-bottom:var(--sp-10); gap:var(--sp-5); }
}
.section.on-dark{ background:var(--navy-deep); color:var(--white); }
.section.on-blue{ background:var(--blue-900); color:var(--white); }
.section.on-paper{ background:var(--paper); }
.section.on-white{ background:var(--white); }
.blueprint-grid{
  background-image:
    linear-gradient(rgba(255,196,0,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,196,0,.055) 1px, transparent 1px);
  background-size:64px 64px;
}
/* Sección con fotografía de fondo: la imagen queda bajo un doble degradado
   (lateral + vertical) calculado para que el texto blanco mantenga contraste
   suficiente sobre cualquier zona clara de la foto. */
.section.photo-bg{ position:relative; background-size:cover; background-position:center; background-repeat:no-repeat; }
.section.photo-bg::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(0,23,43,.97) 0%, rgba(0,30,56,.92) 44%, rgba(0,43,79,.6) 100%),
    linear-gradient(180deg, rgba(0,23,43,.8) 0%, rgba(0,23,43,.42) 42%, rgba(0,23,43,.9) 100%);
}
.section.photo-bg::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,196,0,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,196,0,.05) 1px, transparent 1px);
  background-size:64px 64px;
}
.section.photo-bg > .container{ position:relative; z-index:1; }

.chapter-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-8); margin-bottom:var(--sp-16); flex-wrap:wrap; }
.chapter-head .heading-block{ max-width:740px; }
.chapter-head .title{ margin-top:var(--sp-4); }

/* El rótulo del capítulo de la extrusora —y sólo el de ese capítulo— sale de
   la versalita fina y se pone en placa amarilla: ahí "Única en Chile" no
   ordena el capítulo, es lo que el capítulo viene a decir. La misma placa que
   lleva la insignia sobre la fotografía, para que se lean como una. */
.section.is-unica .chapter-head .eyebrow{
  display:inline-flex; padding:var(--sp-2) var(--sp-4); border-radius:var(--radius-sm);
  background:var(--yellow); color:var(--navy);
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.12em;
}

.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(var(--sp-8),5vw,var(--sp-24)); align-items:center; }
.split.reverse{ direction:rtl; }
.split.reverse > *{ direction:ltr; }
/* 'compact' es para bloques de texto breve: la foto se estrecha y se aplana
   para no pesar más que las tres o cuatro líneas que acompaña. */
.split.compact{ grid-template-columns:.82fr 1fr; }
.split.compact .split-media{ aspect-ratio:16/10; }
/* Estira los hijos a la misma altura en vez de centrarlos: la usa el
   collage de tres fotos, para que llene el alto exacto del texto en vez de
   quedar con aire de sobra arriba y abajo de una imagen de proporción fija. */
.split.split-stretch{ align-items:stretch; }
.split-media{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.split-media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.split-media:hover img{ transform:scale(1.04); }
.split-media .frame-tag{
  position:absolute; left:16px; bottom:16px; background:rgba(0,30,56,.86); color:var(--white);
  font-family:var(--font-mono); font-size:var(--fs-lbl); font-weight:500; letter-spacing:.08em; padding:var(--sp-2) var(--sp-3); text-transform:uppercase;
}
/* Collage de tres fotos: una grande a la izquierda y dos apiladas a la
   derecha, todas con object-fit:cover, así que juntas llenan exactamente el
   alto que le da el grid (el de la columna de texto) sin dejar huecos. */
.foto-trio{ display:grid; grid-template-columns:1.3fr 1fr; gap:var(--sp-4); min-height:420px; }
.foto-trio-principal{ overflow:hidden; border-radius:var(--radius-sm); }
.foto-trio-principal img{ width:100%; height:100%; object-fit:cover; display:block; }
.foto-trio-par{ display:grid; grid-template-rows:1fr 1fr; gap:var(--sp-4); }
.foto-trio-par > div{ overflow:hidden; border-radius:var(--radius-sm); }
.foto-trio-par img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:860px){
  .split, .split.reverse, .split.compact{ grid-template-columns:1fr; direction:ltr; }
  .foto-trio{ min-height:320px; }
}
@media (max-width:640px){
  .foto-trio{ grid-template-columns:1fr; }
  .foto-trio-principal{ aspect-ratio:16/10; }
  .foto-trio-par{ grid-template-columns:1fr 1fr; grid-template-rows:none; }
  .foto-trio-par > div{ aspect-ratio:1/1; }
}

/* ------------------------------------------------------------
   Variantes de maquetación que antes iban como estilo en línea en los .js
   ------------------------------------------------------------ */
/* Sección de entrada con foto de fondo (Trabaja con nosotros, Contacto). */
.section.intro-foto{ padding:var(--section-y-tight) 0; }
/* Sección con filete superior a la que se llega por ancla (Certificaciones). */
.section.con-filete{ scroll-margin-top:var(--header-h); border-top:1px solid var(--line); }
/* Foto que acompaña al texto a toda su altura (Minería). */
.split-media.is-estirada{ aspect-ratio:auto; align-self:stretch; }
.split-media.ar-16-10{ aspect-ratio:16/10; }
/* Retrato vertical del fundador: se ve completo, sin marco fijo que lo
   recorte, y con el alto limitado a la ventana. */
.split-media.is-retrato{ aspect-ratio:auto; width:fit-content; max-width:100%; margin:0 auto; }
.split-media.is-retrato img{ width:auto; max-width:100%; height:auto; max-height:80vh; display:block; }
/* Columna de bloques apilados con aire amplio (Contacto). */
.stack-40{ display:flex; flex-direction:column; gap:var(--sp-10); }
/* Foto y mapa lado a lado, a la misma altura (Contacto). */
/* minmax(0,1fr): con 1fr a secas el mapa (aspect-ratio) reclamaba más ancho
   del disponible, la columna de la foto quedaba en 0 px —la foto no se veía— y
   el mapa se salía por la derecha. En teléfono van una bajo la otra. */
.foto-mapa{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--sp-3); }
@media (max-width:560px){ .foto-mapa{ grid-template-columns:minmax(0,1fr); } }
/* Misma proporción que el mapa (16:9): así miden lo mismo de alto. */
.foto-mapa > img{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; display:block; }
/* Línea de llamado con filete superior: texto + botón (Empresa). */
.cta-inline{ display:flex; align-items:center; gap:var(--sp-5); flex-wrap:wrap; border-top:1px solid var(--line); padding-top:var(--sp-6); }