/* ==========================================================================
   Lausof SRL — "Logística minera"
   Complemento de styles.css. No repite nada que ya esté en la hoja principal:
   acá viven sólo las piezas que esta página agrega (encabezado de sección,
   grilla de cuatro servicios, bloque de la ruta y preguntas frecuentes).
   Los colores, la tipografía, los bordes y las tarjetas se heredan tal cual.
   ========================================================================== */

/* ---- encabezado de página ----
   Mismo lenguaje que el hero de la home pero más bajo: esta no es la portada,
   es una sección interna y no debe competir con ella. */
.page-head{position:relative;color:var(--on-navy);overflow:hidden;background:var(--navy-deep)}
.page-head-photo{
  position:absolute;inset:0;
  background:#151e36 url('../assets/mineria-tractor.webp') center 60%/cover no-repeat;
}
.page-head-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,23,42,.82),rgba(16,23,42,.68));
}
.page-head-inner{position:relative;padding:56px 24px 60px;max-width:1120px}
.page-head h1{font-size:clamp(1.9rem,4.4vw,2.9rem);letter-spacing:-.015em;max-width:20ch}
.page-head .lead{max-width:54ch;font-size:1.08rem;color:var(--on-navy-soft);margin:16px 0 26px}
.page-head .ctas{display:flex;flex-wrap:wrap;gap:12px}

/* ---- introducción ---- */
.intro p{max-width:62ch;color:var(--ink-mid);margin:18px 0 0}

/* ---- grilla de servicios ----
   Son cuatro: en la grilla de tres columnas de la home quedaría una tarjeta
   huérfana, así que van en dos columnas (2+2). Sin carrusel en mobile, a
   diferencia de la home: acá son cuatro tarjetas cortas, se apilan y listo. */
.cards.mineria{grid-template-columns:repeat(2,1fr)}
@media(max-width:640px){.cards.mineria{grid-template-columns:1fr}}

/* ---- la ruta: texto + foto ---- */
.ruta-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;margin-top:36px}
@media(max-width:880px){.ruta-grid{grid-template-columns:1fr;gap:26px}}
.ruta-texto p{max-width:62ch;color:var(--ink-mid);margin:0 0 18px}
.ruta-texto p:last-child{margin-bottom:0}
.ruta-grid figure{margin:0}
.ruta-grid img{
  display:block;width:100%;height:auto;
  border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);
}
.ruta-grid figcaption{font-size:.85rem;color:var(--ink-soft);margin-top:10px}

/* ---- preguntas frecuentes ----
   Fichas apiladas, sin acordeón: son cuatro respuestas cortas y esconderlas
   detrás de un clic sólo agrega fricción. El ancho se limita para que los
   renglones no se estiren de borde a borde. */
.faq{margin-top:36px;display:grid;gap:14px;max-width:820px}
.faq-item{
  background:var(--card);border:1px solid var(--border);border-left:3px solid var(--gold);
  border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow);
}
.faq-item h3{font-size:1.02rem;margin:0 0 8px}
.faq-item p{margin:0;color:var(--ink-mid);font-size:.94rem}

/* ---- cta final: dos botones centrados (la home tiene uno solo) ---- */
.cta-final .ctas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}