/* ICG · Insumos Comerciales del Golfo
   Paleta tomada del CV actualizado: marino, marfil y rojo ladrillo del monograma. */

/* Tipografías alojadas en el sitio (licencia SIL Open Font License, de Google Fonts).
   Archivos variables: uno por familia cubre todos los grosores. Solo el alfabeto
   latino, suficiente para español. */
@font-face {
  font-family: "Big Shoulders Display";
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url("../fonts/big-shoulders-display-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/public-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --marino: #0A0836;
  --marino-2: #1C1A55;
  --marino-3: #07062A;
  --marfil: #EEEAE0;
  --papel: #FBFAF6;
  --blanco: #FFFFFF;
  --ladrillo: #A8343A;
  --ladrillo-oscuro: #7E2328;
  --acero: #555A72;
  --linea: #CFCAD9;

  --f-display: "Big Shoulders Display", "Bahnschrift", "Arial Narrow", sans-serif;
  --f-texto: "Public Sans", "Segoe UI", system-ui, sans-serif;

  --t-cuerpo: 1.0625rem;
  --t-chico: 0.9375rem;
  --t-grande: clamp(1.1875rem, 0.6vw + 1rem, 1.375rem);
  --t-h3: 1.25rem;
  --t-h2: clamp(2.25rem, 3.2vw + 1.2rem, 3.625rem);
  --t-h1: clamp(2.5rem, 3.6vw + 1.25rem, 4.5rem);

  --gutter: 1rem;
  --ancho: 76rem;
  --seccion-y: clamp(4rem, 8vw, 7.5rem);
  --sesgo: -22deg;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--blanco);
  color: var(--marino);
  font-family: var(--f-texto);
  font-size: var(--t-cuerpo);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

img,
svg { display: block; max-width: 100%; }

h1, h2, h3, p, ul, dl, dd, figure, address { margin: 0; }
ul { padding: 0; list-style: none; }
address { font-style: normal; }

a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

.saltar {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  z-index: 10;
  padding: 0.75rem 1rem;
  background: var(--marfil);
  color: var(--marino);
  font-weight: 700;
}
.saltar:focus { top: 1rem; }

.envoltura {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Encabezado ---------- */

/* Menú fijo: se queda visible al desplazarse por la página */
.encabezado {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--marino);
  color: var(--marfil);
  border-bottom: 1px solid var(--marino-2);
  box-shadow: 0 0.5rem 1.5rem -0.75rem rgba(0, 0, 0, 0.6);
}

.encabezado__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  max-width: var(--ancho);
  margin-inline: auto;
  padding: 0.875rem var(--gutter);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}
.marca__logo { width: 55px; height: auto; }
.marca__nombre {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.05;
  letter-spacing: 0.02em;
}

.menu-boton {
  display: none;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.5rem 0.875rem;
  background: transparent;
  color: var(--marfil);
  border: 1.5px solid var(--marfil);
  border-radius: 2px;
  font: 600 var(--t-chico) var(--f-texto);
  cursor: pointer;
}
.menu-boton__icono,
.menu-boton__icono::before,
.menu-boton__icono::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  transition: transform 0.2s ease;
}
.menu-boton__icono { position: relative; }
.menu-boton__icono::before,
.menu-boton__icono::after { content: ""; position: absolute; left: 0; }
.menu-boton__icono::before { top: -6px; }
.menu-boton__icono::after { top: 6px; }
.menu-boton[aria-expanded="true"] .menu-boton__icono { background: transparent; }
.menu-boton[aria-expanded="true"] .menu-boton__icono::before { transform: translateY(6px) rotate(45deg); }
.menu-boton[aria-expanded="true"] .menu-boton__icono::after { transform: translateY(-6px) rotate(-45deg); }

.menu {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.menu__lista a {
  display: block;
  padding: 0.625rem 0;
  font-weight: 600;
  text-decoration: none;
}
.menu__lista a:hover { text-decoration: underline; }

.js .menu-boton { display: inline-flex; }
.js .menu { display: none; padding-bottom: 0.75rem; }
.js .menu.is-abierto { display: flex; }

@media (min-width: 60em) {
  .js .menu-boton { display: none; }
  .menu,
  .js .menu {
    display: flex;
    flex-basis: auto;
    flex-direction: row;
    align-items: center;
    gap: 2rem;
    padding: 0;
  }
  .menu__lista { display: flex; gap: 1.75rem; }
}

/* ---------- Hero ---------- */

.hero {
  background: var(--marino);
  color: var(--marfil);
  overflow: hidden;
}

.hero__interior {
  display: grid;
  gap: 3rem;
  max-width: var(--ancho);
  margin-inline: auto;
  padding: clamp(1.5rem, 3vw, 2.5rem) var(--gutter) clamp(3rem, 6vw, 5rem);
}

.hero__titulo {
  max-width: 18ch;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--t-h1);
  line-height: 0.94;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.hero__entrada {
  max-width: 36rem;
  margin-top: 1.75rem;
  font-size: var(--t-grande);
  line-height: 1.55;
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-top: 2.25rem;
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  border: 2px solid transparent;
  border-radius: 2px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.2;
}
.boton:hover { text-decoration: none; }
.boton--principal {
  background: var(--marfil);
  color: var(--marino);
}
.boton--principal:hover { background: var(--blanco); }
.boton--secundario {
  border-color: var(--marfil);
  color: var(--marfil);
}
.boton--secundario:hover { background: var(--marino-2); }

/* ---------- Secciones ---------- */

.seccion { padding-block: var(--seccion-y); }
.seccion--blanca { background: var(--blanco); }
.seccion--marfil { background: var(--marfil); }
.seccion--marino { background: var(--marino); color: var(--marfil); }

.titulo-seccion {
  max-width: 18ch;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--t-h2);
  line-height: 0.98;
  text-wrap: balance;
}

.encabezado-seccion {
  display: grid;
  gap: 1.25rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.encabezado-seccion > p {
  max-width: 34rem;
  font-size: var(--t-grande);
  color: var(--acero);
}
.seccion--marino .encabezado-seccion > p { color: #D4D0E0; }

@media (min-width: 64em) {
  .encabezado-seccion {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: end;
    gap: 4rem;
  }
}


.parrafo-grande {
  font-size: var(--t-grande);
  line-height: 1.5;
}

/* ---------- Nosotros ---------- */

.nosotros {
  display: grid;
  gap: 3.5rem;
}
.nosotros__intro > * + * { margin-top: 1.25rem; }
.nosotros__intro .titulo-seccion { margin-bottom: 0.5rem; }
.nosotros__intro p { max-width: 36rem; }

.sellos {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 1.5rem;
  padding-top: 1rem;
}
/* Certificaciones como insignias rectas: marco azul y filo rojo a la izquierda */
.sello {
  display: grid;
  padding: 0.875rem 1.25rem 0.875rem 1.125rem;
  border: 1.5px solid var(--marino);
  border-left: 5px solid var(--ladrillo);
  color: var(--marino);
}
.sello__norma {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.625rem;
  line-height: 1;
}
.sello__tema {
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--acero);
}

.nosotros__principios {
  display: grid;
  gap: 2rem;
}
.principio {
  padding-top: 1.25rem;
  border-top: 2px solid var(--marino);
}
.principio h3 {
  margin-bottom: 0.625rem;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.1;
}
.principio p { max-width: 38rem; }

.lista-simple { margin-top: 0.75rem; }
.lista-simple li {
  position: relative;
  padding-left: 1.5rem;
}
.lista-simple li + li { margin-top: 0.375rem; }
.lista-simple li::before {
  content: "";
  position: absolute;
  left: 0.125rem;
  top: 0.7em;
  width: 0.75rem;
  height: 0.25rem;
  background: var(--ladrillo);
  transform: skewX(var(--sesgo));
}

@media (min-width: 64em) {
  .nosotros {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 5rem;
  }
}

/* ---------- Productos ---------- */

/* Muro de cajas: cada línea de producto es el frente de una caja rotulada
   con plantilla, con su asa calada. */
.catalogo {
  display: grid;
  gap: 4px;
  padding: 4px;
  background: var(--marino);
}
.catalogo__linea {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 7.5rem;
  padding: 1.25rem;
  background: var(--papel);
}
.catalogo__familia {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.4vw + 1.25rem, 2.5rem);
  line-height: 1.02;
  text-wrap: balance;
}

@media (min-width: 48em) {
  .catalogo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalogo__linea { min-height: 12rem; }
}
@media (min-width: 75em) {
  .catalogo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .catalogo__linea { min-height: 14rem; padding-inline: 1.75rem; }
}

/* ---------- Por qué elegirnos ---------- */

.ventajas {
  display: grid;
  gap: 3rem;
}
.ventaja__icono {
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  fill: none;
  stroke: var(--marfil);
  stroke-width: 2.25;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.ventaja h3 {
  margin-bottom: 0.5rem;
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.3;
}
.ventaja p {
  max-width: 30rem;
  color: #D4D0E0;
}
.ventaja--camion h3 {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 2.25rem;
  line-height: 1;
}

/* Camiones con la rotulación de la flotilla ICG */
.camion {
  width: 100%;
  max-width: 26rem;
  height: auto;
  margin-bottom: 1.5rem;
  fill: none;
  stroke: var(--marfil);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.camion__caja { fill: var(--marino); }
.camion__logo { stroke: var(--marfil); }
.camion__rojo { stroke: var(--ladrillo); }
.camion__rojo-relleno { fill: var(--ladrillo); stroke: none; }
.camion__rueda { fill: var(--marino); }

@media (min-width: 48em) {
  .ventajas { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3.5rem 3rem; }
  .ventaja { grid-column: span 3; }
  .ventaja--camion { padding-bottom: 2.5rem; border-bottom: 2px solid var(--marfil); }
}
@media (min-width: 75em) {
  .ventaja:not(.ventaja--camion) { grid-column: span 2; }
}

/* ---------- Clientes ---------- */

.sectores { display: grid; }
.sector {
  display: grid;
  gap: 0.5rem;
  padding: 1.25rem 0 1.5rem;
  border-top: 2px solid var(--marino);
}
.sector:last-child { border-bottom: 2px solid var(--marino); }
.sector__titulo {
  padding-top: 0.375rem;
  font-size: var(--t-chico);
  font-weight: 700;
  color: var(--ladrillo);
}
/* Nombres separados con el trazo diagonal de la marca */
.sector__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0;
}
.sector__lista li {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.2vw + 1.15rem, 2.125rem);
  line-height: 1.15;
}
.sector__lista li:not(:last-child)::after {
  content: "/";
  content: "/" / "";
  margin-inline: 0.45em;
  color: var(--ladrillo);
  font-weight: 800;
}

@media (min-width: 64em) {
  .sector { grid-template-columns: 15rem minmax(0, 1fr); gap: 2rem; }
}

/* ---------- Pie ---------- */

.pie {
  padding-block: 2.5rem;
  background: var(--marino-3);
  color: #D4D0E0;
  font-size: var(--t-chico);
}
.pie__interior {
  display: grid;
  gap: 1.5rem;
  align-items: center;
}
.pie__logo { width: 83px; height: auto; }
.pie__datos > * + * { margin-top: 0.375rem; }
.pie__razon {
  color: var(--marfil);
  font-weight: 700;
}

@media (min-width: 48em) {
  .pie__interior { grid-template-columns: auto 1fr; gap: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Fotografías (transporte y catálogo) ----------
   Cada foto se muestra solo si el archivo existe; si no, queda la ilustración
   o la caja rotulada. main.js marca el contenedor con .con-foto al cargar. */

.foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.js .foto:not(.is-cargada) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* Transporte: la foto va en el marco del logotipo y sustituye al dibujo */
.foto--transporte {
  aspect-ratio: 16 / 10;
  margin-bottom: 1.5rem;
  border: 5px solid var(--marfil);
  background: #fff;
}
/* Las fotos de transporte llevan la unidad completa: no se recortan */
.foto--transporte img { object-fit: contain; }
.ventaja--camion.con-foto .camion { display: none; }

/* Catálogo: la foto ocupa el frente de la caja y el asa queda calada encima */
.foto--producto {
  aspect-ratio: 4 / 3;
  background: var(--marfil);
}
.catalogo__linea.con-foto {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  min-height: 0;
  padding: 0;
}
.catalogo__linea.con-foto .foto--producto { border-bottom: 4px solid var(--marino); }
.catalogo__linea.con-foto .catalogo__familia { padding: 1rem 1.25rem 1.25rem; }
@media (min-width: 75em) {
  .catalogo__linea.con-foto .catalogo__familia { padding-inline: 1.75rem; }
}


/* ==========================================================================
   Hero: escena de la caja del camión
   Todo se dibuja con CSS (sin imágenes) y se dimensiona en cqw, así la escena
   escala con su contenedor. Los estilos base son el estado final (puertas
   abiertas, producto fuera); las animaciones solo existen si el sistema no
   pide reducir movimiento.
   ========================================================================== */

.hero__visual {
  position: relative;
  display: grid;
  justify-items: center;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  padding-top: clamp(0.5rem, 3vw, 2.5rem);
}

/* Marca de la flotilla sobre la unidad abierta */
.hero__marca {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.6vw, 1.125rem);
  color: var(--marfil);
}
.hero__marca img { width: clamp(3.75rem, 7vw, 5.5rem); height: auto; }
.hero__marca span {
  max-width: 13ch;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.25rem, 1.6vw + 0.75rem, 1.875rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.escena {
  position: relative;
  width: 100%;
  margin-top: 6cqw;
  aspect-ratio: 100 / 71;
  container-type: inline-size;
  isolation: isolate;
}

/* Piso del andén con la sombra del camión */
.escena__piso {
  position: absolute;
  inset: auto 0 0;
  height: 30cqw;
  background:
    radial-gradient(ellipse 46cqw 5cqw at 50% 3.5cqw, rgba(0, 0, 0, 0.6), transparent 70%),
    linear-gradient(180deg, #24225a 0%, #17154a 40%, #0d0b3a 100%);
  border-top: 0.3cqw solid rgba(238, 234, 224, 0.12);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

/* Unidad: la foto abierta sin puertas (marco) y, sobre su boca, las dos puertas
   recortadas de la foto cerrada, que giran en 3D sobre sus bisagras y se quedan abiertas.
   Escala: la foto abierta mide 443 px y se muestra a 69.1cqw (0.156cqw por px);
   la boca de la caja ocupa x 110–342 y y 27–268 de esa foto. */
/* Unidad 35% más grande, escalada desde el centro de la defensa para que siga
   apoyada en el mismo punto del piso; la escena baja para dejarle espacio arriba */
.vehiculo {
  position: absolute;
  inset: 0;
  transform: scale(1.35);
  transform-origin: 49.35cqw 59.4cqw;
}
.vehiculo__foto {
  position: absolute;
  left: 14.8cqw;
  top: 7.6cqw;
  width: 69.1cqw;
  height: auto;
  filter: drop-shadow(0 1.5cqw 2cqw rgba(0, 0, 0, 0.55));
}
.vehiculo__hueco {
  position: absolute;
  left: 31.96cqw;
  top: 11.81cqw;
  width: 36.19cqw;
  height: 37.6cqw;
  perspective: 80cqw;
  perspective-origin: 50% 45%;
}
.vehiculo__puerta {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  transform-style: preserve-3d;
}
/* Carga dentro de la caja: ocupa la misma boca que las puertas y queda detrás de ellas.
   Las cajas del fondo son más chicas y oscuras para dar profundidad al túnel. */
.vehiculo__carga {
  position: absolute;
  left: 31.96cqw;
  top: 11.81cqw;
  width: 36.19cqw;
  height: 37.6cqw;
  overflow: hidden;
}
.carga {
  position: absolute;
  aspect-ratio: 4 / 3;
  border-radius: 0.2cqw;
  background:
    linear-gradient(90deg, transparent 44%, rgba(222, 196, 150, 0.95) 44% 56%, transparent 56%),
    linear-gradient(180deg, #c08a4f, #a87440 70%, #8f6034);
  box-shadow: inset -0.8cqw 0 1cqw rgba(0, 0, 0, 0.3), 0 0.6cqw 0.8cqw rgba(0, 0, 0, 0.35);
}
.carga::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 22%;
  clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, #d8a466, #c4904f);
}
.carga--fondo { width: 11%; filter: brightness(0.45); }
.carga--medio { width: 17%; filter: brightness(0.7); }
.carga--frente { width: 26%; filter: brightness(0.95); }
/* Fondo: dos estibas junto a la pared del fondo */
.carga--f1 { left: 33%; bottom: 31%; }
.carga--f2 { left: 44.5%; bottom: 31%; }
.carga--f3 { left: 56%; bottom: 31%; }
.carga--f4 { left: 39%; bottom: 40.5%; }
/* Medio */
.carga--m1 { left: 20%; bottom: 17%; }
.carga--m2 { left: 63%; bottom: 17%; }
.carga--m3 { left: 20%; bottom: 31.5%; width: 15%; }
/* Frente, a los costados para dejar el pasillo */
.carga--p1 { left: 1%; bottom: 1%; }
.carga--p2 { right: 1%; bottom: 1%; }
.carga--p3 { left: 3%; bottom: 23%; width: 22%; }

/* Estado final (y con "reducir movimiento"): puertas abiertas */
.vehiculo__puerta--izq { left: 0; transform-origin: left center; transform: rotateY(-150deg); }
.vehiculo__puerta--der { right: 0; transform-origin: right center; transform: rotateY(150deg); }
.vehiculo__cara {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
/* Cara interior de la puerta: lámina blanca como en la foto abierta */
.vehiculo__cara--dorso {
  transform: rotateY(180deg);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.18), transparent 25%, transparent 80%, rgba(0, 0, 0, 0.12)),
    linear-gradient(180deg, #f4f4f2, #dcdcd8);
}
.vehiculo__puerta--der .vehiculo__cara--dorso {
  background:
    linear-gradient(270deg, rgba(0, 0, 0, 0.18), transparent 25%, transparent 80%, rgba(0, 0, 0, 0.12)),
    linear-gradient(180deg, #f4f4f2, #dcdcd8);
}
/* Producto en el andén */
/* El producto sube para empalmarse con la defensa de la unidad y que toda la
   escena quepa en la primera pantalla */
.productos { position: absolute; inset: 0; z-index: 2; transform: translateY(-5cqw); }
.producto {
  position: absolute;
  filter: drop-shadow(0 1.2cqw 1cqw rgba(0, 0, 0, 0.5));
}

/* Caja de cartón con cara superior, cinta y etiqueta */
.producto--caja {
  background:
    linear-gradient(90deg, transparent 44%, rgba(222, 196, 150, 0.95) 44% 56%, transparent 56%),
    linear-gradient(180deg, #c08a4f, #a87440 70%, #946538);
  border-radius: 0.3cqw;
  box-shadow: inset -1.2cqw 0 1.4cqw rgba(0, 0, 0, 0.28), inset 0 -0.6cqw 0.8cqw rgba(0, 0, 0, 0.2);
}
.producto--caja::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 3.2cqw;
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
  background:
    linear-gradient(90deg, transparent 47%, rgba(222, 196, 150, 0.95) 47% 59%, transparent 59%),
    linear-gradient(180deg, #d8a466, #c4904f);
}
.producto--caja::after {
  content: "";
  position: absolute;
  left: 12%;
  top: 22%;
  width: 24%;
  height: 26%;
  border-radius: 0.2cqw;
  background:
    linear-gradient(180deg, transparent 30%, rgba(10, 8, 54, 0.75) 30% 38%, transparent 38% 54%, rgba(10, 8, 54, 0.55) 54% 60%, transparent 60%),
    #f4f1e8;
}
.producto--caja-a { left: 27cqw; bottom: 6cqw; width: 18cqw; height: 12cqw; }
.producto--caja-c { left: 64cqw; bottom: 5cqw; width: 13cqw; height: 9cqw; }
.producto--caja-d { left: 88cqw; bottom: 3cqw; width: 10cqw; height: 7cqw; }

/* Huacal de madera: tablillas con separación, postes en las esquinas y boca abierta */
.producto--huacal {
  border-radius: 0.2cqw;
  background:
    linear-gradient(90deg, #7a5530 0 7%, transparent 7% 93%, #7a5530 93%),
    repeating-linear-gradient(180deg, #d4a86c 0 1.5cqw, #b98b52 1.5cqw 1.7cqw, #24170c 1.7cqw 2.3cqw);
  box-shadow: inset -1cqw 0 1.2cqw rgba(0, 0, 0, 0.3), inset 0 -0.4cqw 0.5cqw rgba(0, 0, 0, 0.25);
}
.producto--huacal::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 2.2cqw;
  clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(180deg, #2a1b0e, #3d2914),
    #2a1b0e;
  box-shadow: inset 0 0 0 0.35cqw #c99d63;
}
.producto--huacal-b { left: 47cqw; bottom: 3cqw; width: 16cqw; height: 7.5cqw; }
.producto--huacal-e { left: 36cqw; bottom: 0; width: 12cqw; height: 5cqw; }

/* Fotografías recortadas (fondo transparente), a la escala de la escena */
img.producto { height: auto; }
.producto--arroz { left: 1cqw; bottom: 2.5cqw; width: 17cqw; }
.producto--garrafon { left: 18.5cqw; bottom: 3.5cqw; width: 8.2cqw; }
/* Manzana y pera sobre la caja grande; huevos sobre el huacal; carne sobre la caja chica */
.producto--manzana { left: 27.5cqw; bottom: 19.6cqw; width: 8cqw; }
.producto--pera { left: 35cqw; bottom: 19.6cqw; width: 10.5cqw; }
.producto--huevos { left: 48cqw; bottom: 10.2cqw; width: 14cqw; }
.producto--carne { left: 65cqw; bottom: 14.2cqw; width: 11cqw; }
.producto--leche { left: 79cqw; bottom: 3.5cqw; width: 8cqw; }

@media (min-width: 64em) {
  .hero__interior { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; gap: 6rem; }
}

/* Secuencia de entrada: la unidad se abre y el producto sale uno a uno.
   --dx/--dy llevan cada pieza a la boca de la caja como punto de partida. */
@media (prefers-reduced-motion: no-preference) {
  .vehiculo__puerta--izq { animation: abre-izq 1.1s 0.5s cubic-bezier(0.5, 0, 0.3, 1) both; }
  .vehiculo__puerta--der { animation: abre-der 1.1s 0.62s cubic-bezier(0.5, 0, 0.3, 1) both; }
  .producto { animation: sale 0.9s cubic-bezier(0.2, 0.75, 0.3, 1) both; }
  .producto--caja-a { --dx: 14cqw; --dy: -38cqw; animation-delay: 1.7s; }
  .producto--manzana { --dx: 18.5cqw; --dy: -26cqw; animation-delay: 1.95s; }
  .producto--pera { --dx: 9.75cqw; --dy: -25.7cqw; animation-delay: 2.05s; }
  .producto--arroz { --dx: 40.5cqw; --dy: -38.7cqw; animation-delay: 2.15s; }
  .producto--garrafon { --dx: 27.4cqw; --dy: -38.6cqw; animation-delay: 2.3s; }
  .producto--huacal-b { --dx: -5cqw; --dy: -43.25cqw; animation-delay: 2.45s; }
  .producto--huevos { --dx: -5cqw; --dy: -32.4cqw; animation-delay: 2.6s; }
  .producto--caja-c { --dx: -20.5cqw; --dy: -40.5cqw; animation-delay: 2.75s; }
  .producto--carne { --dx: -20.5cqw; --dy: -30.2cqw; animation-delay: 2.9s; }
  .producto--leche { --dx: -33cqw; --dy: -38cqw; animation-delay: 3.05s; }
  .producto--caja-d { --dx: -43cqw; --dy: -43.5cqw; animation-delay: 3.2s; }
  .producto--huacal-e { --dx: 8cqw; --dy: -47.5cqw; animation-delay: 3.35s; }
}
/* Las puertas giran hacia afuera desde cerradas hasta su posición final */
@keyframes abre-izq { from { transform: rotateY(0deg); } }
@keyframes abre-der { from { transform: rotateY(0deg); } }
@keyframes sale {
  from { transform: translate(var(--dx, 0), calc(var(--dy, 0cqw) + 10cqw)) scale(0.35); opacity: 0; }
  25% { opacity: 1; }
}

/* ---------- Ajustes para celular (menos de 768 px) ----------
   Va al final para ganar sobre las reglas de cada sección con la misma
   especificidad. */
@media (max-width: 47.99em) {
  /* Catálogo: dos cajas por fila y fotos más chicas */
  .catalogo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
    padding: 3px;
  }
  .catalogo__linea {
    min-height: 6.5rem;
    padding: 0.75rem;
  }
  .catalogo__familia {
    font-size: clamp(1.0625rem, 4.4vw, 1.375rem);
    line-height: 1.02;
  }
  .catalogo__linea.con-foto .catalogo__familia { padding: 0.625rem 0.75rem 0.75rem; }
  .catalogo__linea.con-foto .foto--producto { border-bottom-width: 3px; }


  /* Clientes */
  .sector__lista li { font-size: 1.25rem; }

  /* Sellos ISO lado a lado */
  .sellos { gap: 0.875rem; }
  .sello { flex: 1 1 0; min-width: 0; padding: 0.625rem 0.75rem; }
  .sello__norma { font-size: 1.375rem; }
  .sello__tema { font-size: 0.75rem; }
}

/* Celular y tableta: el logo y la animación van antes del texto del hero */
@media (max-width: 63.99em) {
  .hero__visual { order: -1; padding-top: 0; }
}

/* ==========================================================================
   Ajustes de estilo: menú claro y pie en columnas
   ========================================================================== */

/* Menú claro translúcido sobre el contenido */
.encabezado {
  background: rgba(251, 250, 246, 0.92);
  color: var(--marino);
  border-bottom: 1px solid var(--linea);
  box-shadow: 0 0.5rem 1.5rem -1rem rgba(10, 8, 54, 0.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.menu-boton { color: var(--marino); border-color: var(--marino); }

/* Fondos papel alternados */
.seccion--blanca { background: var(--papel); }


/* Botón principal del hero */
.boton--acento {
  background: var(--ladrillo);
  border-color: var(--ladrillo);
  color: var(--blanco);
}
.boton--acento:hover { background: var(--ladrillo-oscuro); border-color: var(--ladrillo-oscuro); }

/* Pie en columnas */
.pie { padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.pie__interior {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 2.5rem;
}
.pie__marca > * + * { margin-top: 0.75rem; }
.pie__marca p:last-child { max-width: 24rem; }
.pie__titulo {
  margin-bottom: 0.875rem;
  font-family: var(--f-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--marfil);
}
.pie__columna li + li,
.pie__columna p + p { margin-top: 0.5rem; }
.pie__columna a { text-decoration: none; }
.pie__columna a:hover { color: var(--marfil); text-decoration: underline; }
.pie__base {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(238, 234, 224, 0.15);
}
@media (min-width: 48em) {
  .pie__interior { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; }
}

/* ---------- Cómo trabajamos: pasos en secuencia ---------- */
.pasos {
  display: grid;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}
.paso {
  position: relative;
  padding-top: 1.25rem;
  border-top: 3px solid var(--marino);
  counter-increment: paso;
}
.paso::before {
  content: counter(paso, decimal-leading-zero);
  display: block;
  margin-bottom: 0.75rem;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 2.75rem;
  line-height: 1;
  color: var(--ladrillo);
}
.paso__titulo {
  margin-bottom: 0.5rem;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.625rem;
  line-height: 1.1;
}
.paso p { max-width: 24rem; color: var(--acero); }
@media (min-width: 48em) {
  .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
}
@media (min-width: 64em) {
  .pasos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Flecha de avance entre pasos */
  .paso:not(:last-child)::after {
    content: "";
    position: absolute;
    top: -0.55rem;
    right: -1.25rem;
    width: 0.9rem;
    height: 0.9rem;
    border-top: 3px solid var(--marino);
    border-right: 3px solid var(--marino);
    transform: rotate(45deg);
  }
}

/* ---------- Preguntas frecuentes: acordeón nativo ---------- */
.faq {
  border-top: 2px solid var(--marino);
}
.faq__item { border-bottom: 2px solid var(--marino); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 44px;
  padding: 1.25rem 0;
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "";
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  background:
    linear-gradient(var(--ladrillo), var(--ladrillo)) center / 100% 3px no-repeat,
    linear-gradient(var(--ladrillo), var(--ladrillo)) center / 3px 100% no-repeat;
  transition: transform 0.2s ease;
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item summary:hover { color: var(--ladrillo); }
.faq__item p {
  max-width: 44rem;
  padding: 0 2.5rem 1.5rem 0;
  color: var(--acero);
}
@media (min-width: 64em) {
  .preguntas { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 4rem; align-items: start; }
  .preguntas .encabezado-seccion { display: block; margin-bottom: 0; }
}

/* ---------- Cobertura: base en Oaxaca y distribución nacional ---------- */
.cobertura {
  display: grid;
  gap: 2.5rem;
}
.cobertura__texto > * + * { margin-top: 1.25rem; }
.cobertura__texto .parrafo-grande { max-width: 32rem; color: var(--acero); }

.cobertura__datos {
  display: grid;
  border-top: 2px solid var(--marino);
}
.cobertura__datos > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--linea);
}
.cobertura__datos dt { color: var(--acero); font-size: var(--t-chico); }
.cobertura__datos dd {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.2;
  text-align: right;
}

.leyenda {
  display: grid;
  gap: 0.625rem;
  font-size: var(--t-chico);
}
.leyenda li { display: flex; align-items: center; gap: 0.75rem; }
.leyenda__muestra { flex: none; width: 1.75rem; height: 1.125rem; }
.leyenda__muestra--base { background: var(--ladrillo); }
.leyenda__muestra--pais { background: #C9CBDD; }
.leyenda__muestra--ruta {
  height: 0;
  border-top: 2.5px dashed var(--marino);
}

.mapa { margin-inline: calc(var(--gutter) * -1); }
.mapa__svg { width: 100%; height: auto; overflow: visible; }

.estado {
  fill: #C9CBDD;
  stroke: var(--marfil);
  stroke-width: 1;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: fill 0.15s ease;
}
.estado:hover { fill: #AFB2CB; }
.estado--base,
.estado--base:hover { fill: var(--ladrillo); }

.ruta {
  fill: none;
  stroke: var(--marino);
  stroke-width: 2.25;
  stroke-dasharray: 7 6;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: 0.85;
}
.ruta__destino { fill: var(--marino); stroke: var(--marfil); stroke-width: 2; }

.mapa__punto { fill: var(--marino); stroke: var(--marfil); stroke-width: 3; }
.mapa__pulso { fill: var(--ladrillo); opacity: 0.35; }
.mapa__etiqueta {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 30px;
  fill: var(--marino);
  paint-order: stroke;
  stroke: var(--marfil);
  stroke-width: 6px;
  stroke-linejoin: round;
}

/* Las rutas avanzan despacio desde Oaxaca (movimiento continuo y discreto) */
@media (prefers-reduced-motion: no-preference) {
  .ruta { animation: ruta-avanza 1.6s linear infinite; }
  .mapa__pulso { animation: pulso 2.4s ease-out infinite; transform-origin: center; transform-box: fill-box; }
}
@keyframes ruta-avanza { to { stroke-dashoffset: -13; } }
@keyframes pulso {
  0% { transform: scale(0.6); opacity: 0.5; }
  100% { transform: scale(2.4); opacity: 0; }
}

@media (min-width: 64em) {
  .cobertura {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    align-items: center;
    gap: 3rem;
  }
  .mapa { margin-inline: 0; }
}
@media (max-width: 47.99em) {
  .mapa__etiqueta { font-size: 52px; stroke-width: 9px; }
  .mapa__punto { r: 13; }
}

/* ---------- Flotilla: ficha de cada unidad ----------
   El camión, recortado sin fondo, se apoya sobre una franja de color (fría o seca)
   y sobresale hacia arriba, sobre el azul de la sección. */
.flotilla {
  display: grid;
  gap: clamp(3rem, 6vw, 4.5rem);
  margin-bottom: clamp(3.5rem, 7vw, 5rem);
}
.unidad {
  display: grid;
  gap: 1.5rem;
  align-items: center;
}
.unidad__escena {
  position: relative;
  display: grid;
  place-items: end center;
  padding: 0 10% 7%;
  isolation: isolate;
}
/* Franja: ocupa la mitad inferior, el camión sale por arriba */
.unidad__escena::before {
  content: "";
  position: absolute;
  inset: 34% 0 0;
  z-index: -2;
  background: var(--tono);
  border-top: 6px solid var(--filo);
}
/* Sombra del camión sobre el piso */
.unidad__escena::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 5%;
  height: 9%;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgba(10, 8, 54, 0.45), transparent 70%);
}
.unidad__foto {
  width: 100%;
  max-width: 25rem;
  height: auto;
  filter: drop-shadow(0 0.75rem 1rem rgba(0, 0, 0, 0.25));
}
.unidad--seca { --tono: var(--marfil); --filo: var(--ladrillo); }
.unidad--fria {
  --tono: linear-gradient(180deg, #E4ECF2, #CFDCE6);
  --filo: #7FA3BE;
}

.unidad__titulo {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 1.2vw + 1.3rem, 2.375rem);
  line-height: 1.05;
}
.unidad__texto > p:first-of-type {
  max-width: 30rem;
  margin-top: 0.875rem;
  font-size: var(--t-grande);
  color: #D4D0E0;
}
.unidad__lleva {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(238, 234, 224, 0.25);
  font-size: var(--t-chico);
  font-weight: 600;
  color: var(--marfil);
}
.unidad__carga { margin-top: 0.625rem; }
.unidad__carga li { font-weight: 600; }

/* Fichas escalonadas: la segunda invierte el orden (texto a la izquierda) */
@media (min-width: 64em) {
  .unidad { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 4rem; }
  .unidad + .unidad { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .unidad + .unidad .unidad__escena { order: 2; }
}
@media (max-width: 47.99em) {
  .unidad__foto { max-width: 15rem; }
}

/* Título que ocupa todo el ancho de la sección, en una línea en escritorio */
.titulo-seccion--ancho {
  max-width: none;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* Logística: el punto de bodega cierra la sección como franja a todo lo ancho */
.ventajas--banda { display: block; }
.ventajas--banda .ventaja {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.25rem 1.5rem;
  align-items: center;
  padding: 1.75rem 0;
  border-top: 1px solid rgba(238, 234, 224, 0.25);
  border-bottom: 1px solid rgba(238, 234, 224, 0.25);
}
.ventajas--banda .ventaja__icono { grid-row: span 2; margin: 0; }
.ventajas--banda .ventaja h3 { margin: 0; }
.ventajas--banda .ventaja p { max-width: none; }

/* ---------- Páginas legales ---------- */
.legal__cuerpo { max-width: 46rem; }
.legal__cuerpo .titulo-seccion { max-width: none; }
.legal__fecha { margin-top: 1rem; color: var(--acero); font-size: var(--t-chico); }
.legal__cuerpo h2 {
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.625rem;
  line-height: 1.15;
}
.legal__cuerpo p + p,
.legal__cuerpo ul + p,
.legal__cuerpo p + ul { margin-top: 0.875rem; }
.legal__cuerpo .lista-simple li { line-height: 1.55; }
.legal__cuerpo a { color: var(--ladrillo); font-weight: 600; }
.pendiente {
  padding: 0 0.25rem;
  background: #FFE9A8;
  color: var(--marino);
  font-weight: 600;
}

/* Pie con columna de información legal */
@media (min-width: 48em) {
  .pie__interior { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); }
}

/* Catálogo: color atenuado para unificar el tono de las fotos y darles un aire más sobrio */
.foto--producto img { filter: saturate(0.72) contrast(1.04) sepia(0.08); }

/* Bases de operación contiguas (Oaxaca y Veracruz): borde marcado para distinguirlas */
.estado--base { stroke: var(--marfil); stroke-width: 2.5; }

/* Mapa con enfoque en las bases: país más claro, rutas finas por base y halo en cada base */
.estado { fill: #D6D8E6; }
.estado:hover { fill: #C3C6DA; }
.ruta { stroke-width: 2; opacity: 1; }
.ruta--oax { stroke: var(--marino); }
.ruta--ver { stroke: var(--ladrillo-oscuro); }
.ruta__destino { fill: var(--papel); stroke: var(--marino); stroke-width: 2.5; }
.mapa__halo { fill: var(--ladrillo); opacity: 0.12; }
.mapa__etiqueta { font-size: 32px; }
.leyenda__muestra--pais { background: #D6D8E6; }
.leyenda__muestra--ruta-oax { border-top-color: var(--marino); }
.leyenda__muestra--ruta-ver { border-top-color: var(--ladrillo-oscuro); }
.estado--base,
.estado--base:hover { fill: var(--ladrillo); }
@media (max-width: 47.99em) {
  .mapa__etiqueta { font-size: 52px; stroke-width: 9px; }
}

/* ==========================================================================
   Menos plantilla: Nosotros a dos columnas, catálogo como manifiesto de
   carga y proceso como ruta de entrega
   ========================================================================== */

/* Nosotros: texto y certificaciones, sin bloque de misión y visión */
.nosotros { align-items: end; }
.nosotros__certificados .sellos {
  flex-direction: column;
  gap: 1rem;
  padding-top: 0;
}
.nosotros__certificados .sello { width: 100%; padding: 1.25rem 1.5rem; }
.nosotros__certificados .sello__norma { font-size: clamp(1.75rem, 1.4vw + 1.2rem, 2.375rem); }
.nosotros__certificados .sello__tema { font-size: var(--t-chico); }

/* Catálogo: manifiesto de carga, una fila por línea de producto */
.manifiesto__cabecera { margin-bottom: clamp(2rem, 4vw, 3rem); }
.manifiesto__cabecera .titulo-seccion { max-width: none; }
.manifiesto__cabecera p {
  max-width: 40rem;
  margin-top: 0.875rem;
  font-size: var(--t-grande);
  color: var(--acero);
}
.manifiesto {
  border-top: 3px solid var(--marino);
  border-bottom: 3px solid var(--marino);
}
.manifiesto__fila {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  grid-template-areas: "foto linea" "foto detalle" "foto tipo";
  column-gap: 1rem;
  align-items: center;
  padding: 1rem 0;
}
.manifiesto__fila + .manifiesto__fila { border-top: 1px solid var(--linea); }
.manifiesto__foto {
  grid-area: foto;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: saturate(0.72) contrast(1.04) sepia(0.08);
}
.manifiesto__linea {
  grid-area: linea;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.375rem, 1vw + 1.1rem, 1.875rem);
  line-height: 1.05;
}
.manifiesto__detalle { grid-area: detalle; color: var(--acero); font-size: var(--t-chico); }
.manifiesto__tipo {
  grid-area: tipo;
  justify-self: start;
  margin-top: 0.25rem;
  padding: 0.125rem 0.625rem;
  border: 1.5px solid currentColor;
  font-size: 0.8125rem;
  font-weight: 700;
}
.manifiesto__tipo--perecedero { color: #2F5E7A; }
.manifiesto__tipo--seco { color: var(--ladrillo); }

@media (min-width: 64em) {
  .manifiesto__fila {
    grid-template-columns: 9rem minmax(0, 1.1fr) minmax(0, 1.4fr) 9rem;
    grid-template-areas: "foto linea detalle tipo";
    column-gap: 2rem;
    padding: 1.125rem 0;
  }
  .manifiesto__detalle { font-size: var(--t-cuerpo); }
  .manifiesto__tipo { justify-self: end; margin-top: 0; }
}

/* Proceso: paradas sobre una ruta punteada, como en el mapa */
.ruta-pedido__cabecera { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.ruta-pedido__cabecera p {
  max-width: 40rem;
  margin-top: 0.875rem;
  font-size: var(--t-grande);
  color: var(--acero);
}
.pasos--ruta { position: relative; gap: 2rem; }
.pasos--ruta .paso {
  border-top: 0;
  padding: 0 0 0 4.25rem;
}
.pasos--ruta .paso::before {
  position: absolute;
  left: 0;
  top: -0.375rem;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin: 0;
  border: 3px solid var(--marino);
  border-radius: 50%;
  background: var(--papel);
  font-size: 1.375rem;
  z-index: 1;
}
.pasos--ruta .paso:last-child::before { background: var(--marino); color: var(--marfil); }
.pasos--ruta .paso:not(:last-child)::after { display: none; }
/* Línea punteada vertical en celular */
.pasos--ruta::before {
  content: "";
  position: absolute;
  left: 1.5rem;
  top: 1rem;
  bottom: 2rem;
  border-left: 2.5px dashed var(--marino);
}

@media (min-width: 64em) {
  .pasos--ruta { gap: 2.5rem; }
  .pasos--ruta .paso { padding: 4.5rem 0 0; }
  .pasos--ruta .paso::before { top: 0; }
  .pasos--ruta::before {
    left: 1.5rem;
    right: 1.5rem;
    top: 1.5rem;
    bottom: auto;
    border-left: 0;
    border-top: 2.5px dashed var(--marino);
  }
}
@media (max-width: 63.99em) {
  .pasos--ruta::before { bottom: auto; height: calc(100% - 7.5rem); }
}