/* layout.css — SOLO estructura y ritmo vertical: contenedor, rejillas, orden y
   apilamiento. Cero decoración: colores de botón, bordes, sombras y tipografía
   de componente viven en componentes.css. Los únicos colores que aparecen aquí
   son los fondos de sección, porque la alternancia ES ritmo, no adorno.
   Mobile-first: el bloque base es 360px; se abre en 768px y 1024px al final. */

/* ---- Contenedor ---- */
.contenedor {
  width: min(100% - var(--canal), var(--contenedor));
  margin-inline: auto;
}

/* ---- Secciones: ritmo vertical y alternancia de fondo ----
   Orden real de la página: hero/líneas (hueso) · credenciales (hondo) ·
   capacidades (hueso) · proceso (hondo) · planta (acero, la pinta el componente) ·
   alcance (hueso) · cta (hondo) · faq (hueso) · contacto (hondo). */
.seccion {
  padding-block: var(--pad-seccion);
  background-color: var(--hueso);
}

.seccion--proceso,
.seccion--contacto,
.credenciales,
.cta-intermedio {
  background-color: var(--hueso-hondo);
}

/* Centrado, como en la referencia: el título de sección y su entradilla van
   al medio de la columna. Los bloques de dos columnas (reto, planta, foco)
   alinean a la izquierda con su propia regla. */
.seccion__encabezado {
  max-width: var(--medida);
  margin-inline: auto;
  margin-bottom: var(--e-12);
  text-align: center;
}

/* El ancla no puede quedar debajo del header sticky */
.hero,
.seccion,
.credenciales,
.planta,
.cta-intermedio {
  scroll-margin-top: calc(var(--e-16) + var(--e-2));
}

/* ---- Header sticky ---- */
.encabezado {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
}

.encabezado__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding-block: var(--e-3);
}

.encabezado__acciones {
  display: flex;
  align-items: center;
  gap: var(--e-3);
}

.navegacion__lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
}

/* ---- Hero ---- */
.hero {
  padding-block: var(--pad-seccion) var(--e-12);
  background-color: var(--hueso);
}

.hero__interior {
  display: grid;
  justify-items: start;
  gap: var(--e-6);
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
}

/* ---- Credenciales ---- */
.credenciales { padding-block: var(--e-12); }

.credenciales__lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-8) var(--e-4);
}

/* ---- Capacidades: 1 → 2 → 3 ---- */
.capacidades__rejilla {
  display: grid;
  gap: var(--e-6);
}

.tarjeta-capacidad {
  display: grid;
  grid-template-rows: auto 1fr;
}

/* ---- Proceso: 1 → 2 → 5 ---- */
.proceso__pasos {
  display: grid;
  gap: var(--e-8);
}

.paso {
  display: grid;
  gap: var(--e-2);
  align-content: start;
}

/* ---- Planta: imagen + texto ---- */
.planta { padding-block: var(--pad-seccion); }

.planta__interior {
  display: grid;
  align-items: center;
  gap: var(--e-8);
}

.planta__cuerpo {
  display: grid;
  gap: var(--e-4);
  max-width: var(--medida);
}

/* ---- Alcance ---- */
.alcance__datos {
  display: grid;
  gap: var(--e-6);
}

.dato-alcance {
  display: grid;
  gap: var(--e-1);
}

.alcance__listas {
  display: grid;
  gap: var(--e-8);
  margin-top: var(--e-12);
}

.lista-alcance__items {
  display: grid;
  gap: var(--e-3);
  margin-top: var(--e-4);
}

.lista-alcance__item {
  display: flex;
  align-items: center;
  gap: var(--e-3);
}

/* ---- CTA intermedio ---- */
.cta-intermedio { padding-block: var(--pad-seccion); }

.cta-intermedio__interior {
  display: grid;
  justify-items: center;
  gap: var(--e-6);
  max-width: var(--medida);
}

/* ---- FAQ ---- */
.faq__lista {
  display: grid;
  gap: var(--e-2);
}

.faq__pregunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
}

/* ---- Contacto: datos + formulario ---- */
.contacto__interior {
  display: grid;
  gap: var(--e-12);
}

.contacto__vias {
  display: grid;
  gap: var(--e-6);
}

.via-contacto {
  display: grid;
  justify-items: start;
  gap: var(--e-1);
}

.formulario {
  display: grid;
  gap: var(--e-4);
}

.campo {
  display: grid;
  gap: var(--e-2);
}

.formulario__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-4);
  margin-top: var(--e-2);
}

/* ---- Pie ----
   El relleno del pie NO vive aquí: lo calcula componentes.css a partir del
   ancho de la filigrana de marca, porque el superior tiene que dejar libre el
   lockup. Tener las dos reglas peleando por `padding-block` en dos archivos ya
   costó una tarde. */

.pie__interior {
  display: grid;
  gap: var(--e-8);
}

.pie__columna,
.pie__lista,
.pie__redes {
  display: grid;
  align-content: start;
  gap: var(--e-2);
}

.pie__cierre {
  display: grid;
  gap: var(--e-2);
  margin-top: var(--e-8);
  padding-top: var(--e-6);
}

/* ---- Barra flotante mobile ---- */
.barra-flotante {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-flotante);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.barra-flotante__accion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  padding-block: var(--e-3);
}

/* ================= 768px — tablet ================= */
@media (min-width: 768px) {

  .seccion__encabezado { margin-bottom: var(--e-12); }

  .credenciales__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .capacidades__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .proceso__pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .planta__interior { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .alcance__datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .alcance__listas { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .contacto__vias { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .formulario { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .campo--ancho,
  .formulario__acciones,
  .formulario__estado { grid-column: 1 / -1; }

  .pie__interior { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .pie__cierre {
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-6);
  }

  /* La barra flotante es solo de mobile: en tablet manda el CTA del header */
  .barra-flotante { display: none; }
}

/* ================ 1024px — desktop ================ */
@media (min-width: 1024px) {

  .hero,
  .seccion,
  .credenciales,
  .planta,
  .cta-intermedio { scroll-margin-top: calc(var(--e-16) + var(--e-6)); }

  .encabezado__interior { padding-block: var(--e-4); }

  .navegacion__lista { gap: var(--e-6); }

  .capacidades__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .proceso__pasos {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--e-6);
  }

  .planta__interior { gap: var(--e-16); }

  .alcance__datos { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .contacto__interior { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }

  .contacto__vias { grid-template-columns: minmax(0, 1fr); }

  .pie__interior { grid-template-columns: 1.4fr 1fr 1fr; }
}