/* ==========================================================================
   New Food Global Trading — hoja de estilos única
   Paleta derivada del logo (verde #2B3B2F).
   Mobile-first: los @media suben de ancho.
   ========================================================================== */

:root {
  /* Marca */
  --verde:        #2b3b2f;
  --verde-medio:  #3d5442;
  --verde-claro:  #4a6b52;
  --verde-pale:   #e8ede8;
  --crema:        #f7f4ec;
  --crema-oscuro: #ebe5d6;
  --dorado:       #c9a227;
  --dorado-claro: #e0c05a;

  /* Neutros */
  --tinta:        #1c231e;
  --gris:         #5c6660;
  --gris-claro:   #d8ded9;
  --blanco:       #ffffff;

  /* Tipografía */
  --serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, sans-serif;

  /* Ritmo */
  --ancho-max: 1180px;
  --pad-lateral: 1.25rem;
  --seccion-y: 4rem;
  --radio: 4px;
  --sombra: 0 1px 3px rgba(28, 35, 30, .08), 0 8px 24px rgba(28, 35, 30, .06);
  --sombra-alta: 0 2px 6px rgba(28, 35, 30, .1), 0 16px 40px rgba(28, 35, 30, .12);
  --transicion: 220ms cubic-bezier(.4, 0, .2, 1);
}

@media (min-width: 768px) {
  :root { --pad-lateral: 2rem; --seccion-y: 6rem; }
}
@media (min-width: 1100px) {
  :root { --pad-lateral: 2.5rem; --seccion-y: 7.5rem; }
}

/* --------------------------------------------------------------- reset base */

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

html {
  scroll-behavior: smooth;
  /* compensa el header sticky al saltar a un anchor */
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--tinta);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 .6em;
  letter-spacing: -.01em;
}

/* Escala calibrada para Libre Baskerville (12/08/2026). Es bastante más grande
   por em que la Cormorant que había antes — misma cifra en px, ~20% más de
   mancha — así que los máximos bajaron. Si algún día se cambia la tipografía,
   estos tres clamps y el font-weight de arriba hay que recalibrarlos. */
h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.25rem); }
h3 { font-size: clamp(1.05rem, 1.7vw, 1.25rem); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--verde-claro); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--verde); }

:focus-visible {
  outline: 2px solid var(--dorado);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ------------------------------------------------------------- utilitarios */

.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--pad-lateral);
}

.seccion { padding-block: var(--seccion-y); }
.seccion--crema { background: var(--crema); }

.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Etiqueta chica sobre cada título de sección */
.antetitulo {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 1rem;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--verde-claro);
}
.antetitulo::before {
  content: "";
  width: 32px; height: 1px;
  background: var(--dorado);
  flex: none;
}

.cabecera-seccion { max-width: 46rem; margin-bottom: 3rem; }
.cabecera-seccion p { color: var(--gris); font-size: 1.05rem; }

/* Botones */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .85rem 1.75rem;
  border: 1px solid transparent;
  border-radius: var(--radio);
  font-family: var(--sans);
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion),
              border-color var(--transicion), transform var(--transicion);
}
.btn:hover { transform: translateY(-1px); }

.btn--primario { background: var(--dorado); color: var(--verde); }
.btn--primario:hover { background: var(--dorado-claro); color: var(--verde); }

.btn--fantasma { background: transparent; color: var(--blanco); border-color: rgba(255,255,255,.45); }
.btn--fantasma:hover { background: rgba(255,255,255,.1); color: var(--blanco); border-color: var(--blanco); }

.btn--verde { background: var(--verde); color: var(--blanco); }
.btn--verde:hover { background: var(--verde-claro); color: var(--blanco); }

.btn--linea { background: transparent; color: var(--verde); border-color: var(--gris-claro); }
.btn--linea:hover { background: var(--verde-pale); border-color: var(--verde-claro); }

/* ================================================================= topbar */

.topbar {
  background: var(--verde);
  color: rgba(255,255,255,.82);
  font-size: .8rem;
}
.topbar__interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .4rem 1.5rem;
  min-height: 40px;
  padding-block: .5rem;
}
.topbar a { color: inherit; text-decoration: none; }
.topbar a:hover { color: var(--dorado-claro); text-decoration: underline; }
.topbar__dato { display: inline-flex; align-items: center; gap: .45rem; }
.topbar__dato svg { width: 14px; height: 14px; flex: none; opacity: .8; }
.topbar__tag { display: none; margin-left: auto; letter-spacing: .1em; text-transform: uppercase; font-size: .7rem; }

@media (min-width: 860px) {
  .topbar__interior { justify-content: flex-start; }
  .topbar__tag { display: inline; }
}

/* ================================================================= header */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--gris-claro);
}
.header__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 72px;
  padding-block: .75rem;
}

/* flex:none — sin esto el nav le come ancho al logo y lo deforma. */
.marca { display: flex; flex: none; align-items: center; gap: .85rem; text-decoration: none; }
.marca__logo { width: auto; height: 40px; }
.marca__bajada {
  display: none;
  padding-left: .85rem;
  border-left: 1px solid var(--gris-claro);
  font-family: var(--serif);
  /* .85rem y no .95rem: Baskerville rinde más grande por em que la Cormorant
     que había antes, así que a .95rem se veía más grande Y le comía 12px de
     ancho al nav (ver la nota del breakpoint más abajo). */
  font-size: .85rem;
  font-style: italic;
  color: var(--verde-claro);
  white-space: nowrap;
}
@media (min-width: 620px) { .marca__logo { height: 46px; } .marca__bajada { display: block; } }

/* Navegación */
.nav__lista {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__enlace {
  position: relative;
  padding-block: .35rem;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--verde);
  text-decoration: none;
}
.nav__enlace::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--dorado);
  transition: width var(--transicion);
}
/* aria-current="true" lo pone main.js al hacer scroll por las secciones de la
   home; aria-current="page" está escrito en el HTML de las páginas interiores. */
.nav__enlace:hover::after,
.nav__enlace[aria-current="true"]::after,
.nav__enlace[aria-current="page"]::after { width: 100%; }

/* El CTA vive dentro del nav: en desktop es un botón de la barra, en mobile
   aparece al final del panel desplegable. Nunca se oculta. */
.nav__cta { display: inline-flex; }

/* Hamburguesa */
.hamburguesa {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0 10px;
  background: none;
  border: 1px solid var(--gris-claro);
  border-radius: var(--radio);
  cursor: pointer;
}
.hamburguesa span {
  display: block;
  height: 2px;
  background: var(--verde);
  transition: transform var(--transicion), opacity var(--transicion);
}
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Nav en mobile: panel desplegable.

   El corte está en 1200px y no en 1180px (= --ancho-max) a propósito. Justo en
   1180 el contenedor mide 1165 y no 1180, porque la barra de scroll se descuenta
   del viewport: el header arrancaba el modo desktop con 15px menos de los que
   tiene en cualquier ancho mayor, y ese era su peor caso. Con el corte en 1200
   el contenedor ya está topeado, así que el peor caso del nav es igual al de
   siempre. Los anchos 1180–1199 usan el panel desplegable, que ahí entra mejor. */
@media (max-width: 1199px) {
  .nav {
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: var(--blanco);
    border-bottom: 1px solid var(--gris-claro);
    box-shadow: var(--sombra);
    /* oculto por defecto, sin sacarlo del flujo de accesibilidad de golpe */
    display: none;
  }
  .nav[data-abierto="true"] { display: block; }
  .nav__lista {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem var(--pad-lateral) 1.25rem;
  }
  .nav__lista li + li { border-top: 1px solid var(--verde-pale); }
  .nav__enlace { display: block; padding-block: .9rem; }
  .nav__enlace::after { display: none; }

  /* el CTA no es un item más de la lista: sin borde y a todo el ancho */
  .nav__lista li:has(.nav__cta) { border-top: 0; padding-top: 1rem; }
  .nav__cta { width: 100%; }
}

@media (min-width: 1200px) {
  .hamburguesa { display: none; }
  .nav { display: block !important; }
  .nav__cta { padding: .7rem 1.35rem; }
  /* 1.25rem en vez de 1.5rem: son 5 huecos, o sea 20px de aire para el CTA */
  .nav__lista { gap: 1.25rem; }

  /* El header no crece con el viewport: .contenedor lo topea en --ancho-max,
     así que el nav tiene el mismo ancho a 1440px que a 1920px. Sin nowrap el
     CTA se partía en dos líneas y estiraba el header de 72px a 93px. Por eso
     "Alcance" no está en el header (sí en el footer): libera el ancho que hace
     falta para que el nowrap nunca desborde. Si algún día se agrega un link
     acá, verificar que el CTA siga en una línea. */
  .nav__enlace, .nav__cta { white-space: nowrap; }
}

/* =================================================================== hero */

.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 82% 18%, rgba(74,107,82,.55) 0%, rgba(43,59,47,0) 62%),
    linear-gradient(155deg, #22301f 0%, var(--verde) 45%, #1a241c 100%);
  color: var(--blanco);
  isolation: isolate;
}

/* Globo SVG de fondo, decorativo */
.hero__globo {
  position: absolute;
  z-index: -1;
  top: 50%; right: -22%;
  width: 620px;
  max-width: none;
  transform: translateY(-50%);
  opacity: .3;
  pointer-events: none;
}
@media (min-width: 900px) {
  .hero__globo { right: -6%; width: 660px; opacity: .42; }
}

.hero__interior {
  position: relative;
  padding-block: clamp(3.5rem, 10vw, 8rem);
  max-width: 40rem;
}

.hero__eyebrow {
  display: inline-block;
  margin-bottom: 1.4rem;
  padding: .45rem 1rem;
  border: 1px solid rgba(224,192,90,.45);
  border-radius: 100px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dorado-claro);
}

.hero h1 { margin-bottom: 1.2rem; color: var(--blanco); }
.hero h1 em { font-style: italic; color: var(--dorado-claro); }

.hero__texto {
  max-width: 34rem;
  margin-bottom: 2.25rem;
  font-size: clamp(1.02rem, 2vw, 1.18rem);
  color: rgba(255,255,255,.82);
}

.hero__acciones { display: flex; flex-wrap: wrap; gap: .85rem; }

/* Variante para páginas interiores: mismo fondo, menos aire y sin franja. */
.hero--interior .hero__interior { padding-block: clamp(2.75rem, 7vw, 5rem); }
.hero--interior .hero__texto { margin-bottom: 0; }

/* Franja de credenciales al pie del hero */
.franja {
  border-top: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
}
.franja__lista {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 1rem;
  margin: 0; padding: 2rem 0;
  list-style: none;
}
.franja__lista li { display: flex; align-items: flex-start; gap: .7rem; }
.franja__lista svg { width: 22px; height: 22px; flex: none; margin-top: 3px; color: var(--dorado-claro); }
.franja__lista strong { display: block; font-size: .95rem; color: var(--blanco); }
.franja__lista span { font-size: .84rem; color: rgba(255,255,255,.62); }

@media (min-width: 820px) { .franja__lista { grid-template-columns: repeat(4, 1fr); } }

/* =============================================================== nosotros */

.dos-columnas {
  display: grid;
  gap: 3rem;
  align-items: start;
}
@media (min-width: 900px) {
  .dos-columnas { grid-template-columns: 1.05fr .95fr; gap: 4.5rem; }
}

.nosotros__texto p { color: var(--gris); font-size: 1.05rem; }
/* Párrafo de entrada. Va por clase y no por :first-of-type: el .antetitulo
   también es un <p>, así que el selector posicional le pegaba a la etiqueta
   de sección en vez de al primer párrafo de texto. */
.nosotros__lead {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  line-height: 1.4;
  color: var(--verde);
}
.nosotros__lead strong { font-weight: 600; color: var(--verde); }

.valores { margin: 2rem 0 0; padding: 0; list-style: none; }
.valores li {
  position: relative;
  padding: 0 0 .9rem 1.9rem;
  color: var(--gris);
}
.valores li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 9px; height: 9px;
  border: 2px solid var(--dorado);
  border-radius: 50%;
}
.valores strong { color: var(--tinta); }

/* Los tres diferenciales, como tarjeta en la columna derecha de Nosotros.
   Ocupa el lugar que tenía la franja de métricas, que se eliminó. */
.valores--tarjeta {
  margin: 0;
  padding: 2rem 1.85rem;
  background: var(--crema);
  border: 1px solid var(--crema-oscuro);
  border-radius: var(--radio);
}
.valores--tarjeta li:last-child { padding-bottom: 0; }
@media (min-width: 900px) {
  .valores--tarjeta { position: sticky; top: 6rem; }
}

/* =============================================================== productos */

.grilla-productos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.25rem;
}
/* Seis tarjetas: con la grilla base caen 4+2 y quedan dos huecos.
   Con columnas más anchas quedan 3+3 en escritorio y 2+2+2 en tablet. */
.grilla-productos--seis { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }

.producto {
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  background: var(--blanco);
  border: 1px solid var(--gris-claro);
  border-radius: var(--radio);
  transition: border-color var(--transicion), box-shadow var(--transicion),
              transform var(--transicion);
}
.producto:hover {
  border-color: var(--verde-claro);
  box-shadow: var(--sombra-alta);
  transform: translateY(-3px);
}
.producto__icono {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  margin-bottom: 1.15rem;
  background: var(--verde-pale);
  border-radius: 50%;
  color: var(--verde);
}
.producto__icono svg { width: 26px; height: 26px; }
.producto h3 {
  margin-bottom: .5rem;
  font-size: 1.12rem;
  letter-spacing: 0;
}
.producto p {
  margin: 0;
  font-size: .92rem;
  color: var(--gris);
}
.producto__detalle {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--verde-pale);
  font-size: .82rem;
  color: var(--verde-claro);
}

.nota-productos {
  margin-top: 2.5rem;
  padding: 1.5rem 1.75rem;
  background: var(--verde-pale);
  border-left: 3px solid var(--dorado);
  border-radius: var(--radio);
  font-size: .95rem;
  color: var(--verde);
}
.nota-productos p { margin: 0; }

/* ------------------------------------------------ divisiones de producto */

/* Etiqueta con línea al costado que separa Alimentos de Neumáticos dentro
   de la misma sección. */
.division {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin: 0 0 1.75rem;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--verde);
}
.division::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--gris-claro);
}
.division--separada { margin-top: 4.5rem; }

.cabecera-division { max-width: 46rem; margin-bottom: 2.25rem; }
.cabecera-division h4 {
  margin: 0 0 .8rem;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--verde);
}
.cabecera-division p { margin: 0; color: var(--gris); font-size: 1.05rem; }

/* Condiciones de embarque de la división Neumáticos */
.embarque {
  margin-top: 2.5rem;
  padding: 2rem 1.85rem;
  background: var(--blanco);
  border: 1px solid var(--gris-claro);
  border-radius: var(--radio);
}
.embarque h4 {
  margin: 0 0 1.25rem;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--verde-claro);
}
.embarque ul {
  display: grid;
  gap: .8rem 2.5rem;
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
}
@media (min-width: 760px) {
  .embarque ul { grid-template-columns: 1fr 1fr; }
}
.embarque li {
  position: relative;
  padding-left: 1.6rem;
  font-size: .95rem;
  color: var(--gris);
}
.embarque li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 7px; height: 7px;
  border: 2px solid var(--dorado);
  border-radius: 50%;
}

/* =============================================================== servicios */

.grilla-servicios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2.5rem 2rem;
}
.servicio__numero {
  display: block;
  margin-bottom: .9rem;
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1;
  color: var(--dorado);
}
.servicio h3 { margin-bottom: .6rem; color: var(--verde); }
.servicio p { margin: 0; font-size: .95rem; color: var(--gris); }

/* ================================================================= alcance */

.alcance { background: var(--verde); color: var(--blanco); }
.alcance h2 { color: var(--blanco); }
.alcance .antetitulo { color: var(--dorado-claro); }
.alcance .cabecera-seccion p { color: rgba(255,255,255,.75); }

.regiones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radio);
  overflow: hidden;
}
.region { padding: 1.75rem; background: var(--verde); }
.region__tipo {
  display: inline-block;
  margin-bottom: .8rem;
  padding: .25rem .6rem;
  border-radius: 3px;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.region__tipo--origen { background: var(--dorado); color: var(--verde); }
.region__tipo--destino { background: rgba(255,255,255,.14); color: rgba(255,255,255,.85); }
.region h3 { margin-bottom: .7rem; color: var(--blanco); font-size: 1.15rem; }
.region ul { margin: 0; padding: 0; list-style: none; }
.region li {
  padding-block: .35rem;
  font-size: .9rem;
  color: rgba(255,255,255,.72);
  border-top: 1px solid rgba(255,255,255,.09);
}
.region li:first-child { border-top: 0; }

/* Origen y destino: dos columnas con un país cada una. Sin lista, así que las
   tarjetas se apoyan en el aire y en el tamaño del nombre, no en el largo. */
.regiones--par {
  grid-template-columns: 1fr;
  /* se continúa con .condiciones, así que abajo va recto */
  border-radius: var(--radio) var(--radio) 0 0;
}
@media (min-width: 640px) {
  .regiones--par { grid-template-columns: 1fr 1fr; }
}
.regiones--par .region { padding: 2.25rem 1.75rem 2.5rem; }
.regiones--par .region h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 4vw, 2.25rem);
  font-weight: 400;
  line-height: 1.1;
}

/* Condiciones comerciales, debajo de la ruta */
.condiciones {
  display: grid;
  gap: 1px;
  margin: 1px 0 0;
  padding: 0;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.14);
  border-top: 0;
  border-radius: 0 0 var(--radio) var(--radio);
  overflow: hidden;
}
@media (min-width: 640px)  { .condiciones { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .condiciones { grid-template-columns: repeat(4, 1fr); } }
.condiciones > div { padding: 1.5rem 1.75rem; background: var(--verde); }
.condiciones dt {
  margin-bottom: .5rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--dorado-claro);
}
.condiciones dd {
  margin: 0;
  font-size: .95rem;
  color: rgba(255,255,255,.85);
}

/* ================================================================ contacto */

.contacto__datos { margin: 0; padding: 0; }
.contacto__fila { display: flex; gap: 1rem; padding-block: 1.25rem; border-top: 1px solid var(--gris-claro); }
.contacto__fila:first-of-type { border-top: 0; padding-top: 0; }
.contacto__fila svg { width: 20px; height: 20px; flex: none; margin-top: 4px; color: var(--verde-claro); }
.contacto__fila dt {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gris);
}
.contacto__fila dd { margin: .25rem 0 0; font-size: 1.02rem; color: var(--tinta); }
.contacto__fila dd a { color: var(--verde); text-decoration: none; }
.contacto__fila dd a:hover { text-decoration: underline; }

/* Pasos "cómo seguimos", debajo de los datos de contacto */
.pasos {
  margin-top: 2rem;
  padding: 1.65rem 1.75rem;
  background: var(--verde-pale);
  border-radius: var(--radio);
}
.pasos h3 {
  margin-bottom: .9rem;
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--verde);
}
.pasos ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}
.pasos li {
  position: relative;
  padding: 0 0 .85rem 2.2rem;
  font-size: .92rem;
  color: var(--verde);
  counter-increment: paso;
}
.pasos li:last-child { padding-bottom: 0; }
.pasos li::before {
  content: counter(paso);
  position: absolute;
  left: 0; top: -1px;
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  background: var(--verde);
  border-radius: 50%;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 700;
  color: var(--crema);
}

/* Formulario */
.form {
  padding: 2rem;
  background: var(--blanco);
  border: 1px solid var(--gris-claro);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.form__grilla { display: grid; gap: 1.1rem; }
@media (min-width: 560px) { .form__grilla--doble { grid-template-columns: 1fr 1fr; } }

.campo { display: flex; flex-direction: column; gap: .4rem; }
.campo label {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gris);
}
.campo input, .campo textarea, .campo select {
  width: 100%;
  padding: .8rem .9rem;
  font-family: inherit;
  font-size: .98rem;
  color: var(--tinta);
  background: var(--blanco);
  border: 1px solid var(--gris-claro);
  border-radius: var(--radio);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.campo textarea { min-height: 130px; resize: vertical; }
.campo input:focus, .campo textarea:focus, .campo select:focus {
  outline: none;
  border-color: var(--verde-claro);
  box-shadow: 0 0 0 3px rgba(74,107,82,.14);
}
/* Marcar en rojo SOLO después de que la persona interactuó con el campo.
   `:invalid` a secas pinta todo de rojo al cargar la página, porque los campos
   requeridos arrancan vacíos. `:user-invalid` espera al blur o al submit. */
.campo input:user-invalid,
.campo textarea:user-invalid { border-color: #b3261e; }

/* Fallback para navegadores sin :user-invalid — main.js agrega .fue-validado
   al form recién cuando se intenta enviar. */
.form.fue-validado .campo input:invalid,
.form.fue-validado .campo textarea:invalid { border-color: #b3261e; }

.form__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}
.form__nota { flex: 1 1 12rem; margin: 0; font-size: .8rem; color: var(--gris); }

.form__estado {
  display: none;
  margin-top: 1.1rem;
  padding: .85rem 1rem;
  border-radius: var(--radio);
  font-size: .9rem;
}
.form__estado[data-tipo="ok"] { display: block; background: var(--verde-pale); color: var(--verde); }
.form__estado[data-tipo="error"] { display: block; background: #fdecea; color: #8c1d18; }

/* ================================================================== footer */

.footer {
  padding-block: 3.5rem 0;
  background: var(--tinta);
  color: rgba(255,255,255,.62);
  font-size: .9rem;
}
.footer__grilla {
  display: grid;
  gap: 2.5rem;
  padding-bottom: 3rem;
}
@media (min-width: 820px) { .footer__grilla { grid-template-columns: 1.4fr 1fr 1fr; gap: 4rem; } }

.footer__logo {
  width: auto; height: 46px;
  margin-bottom: 1.25rem;
  opacity: .9;
}
.footer h4 {
  margin-bottom: 1rem;
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blanco);
}
.footer ul { margin: 0; padding: 0; list-style: none; }
.footer li { padding-block: .3rem; }
.footer a { color: inherit; text-decoration: none; }
.footer a:hover { color: var(--dorado-claro); text-decoration: underline; }

.footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
  padding-block: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .8rem;
  color: rgba(255,255,255,.45);
}

/* ================================================================== marcas */

/* Sin logos de terceros: los nombres van en la tipografía del sitio. */
.marcas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
  gap: 1px;
  background: var(--gris-claro);
  border: 1px solid var(--gris-claro);
  border-radius: var(--radio);
  overflow: hidden;
}
.marca-ficha { padding: 2rem 1.85rem; background: var(--blanco); }
.marca-ficha h3 {
  margin: 0 0 .7rem;
  font-family: var(--serif);
  font-size: 1.65rem;
  font-weight: 400;
  line-height: 1.1;
  color: var(--verde);
}
.marca-ficha p { margin: 0; font-size: .95rem; color: var(--gris); }

/* Cierre con llamada a la acción al pie de una página interior */
.cierre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2rem;
  margin-top: 3.5rem;
  padding: 2rem 1.85rem;
  background: var(--verde-pale);
  border-left: 3px solid var(--dorado);
  border-radius: var(--radio);
}
.cierre p {
  flex: 1 1 18rem;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  line-height: 1.35;
  color: var(--verde);
}

/* ============================================= reveal on scroll (progresivo) */

/* Por defecto .revelar NO tiene estilo: el contenido siempre se ve.
   main.js agrega .js-reveal en <html> solo si IntersectionObserver existe y el
   usuario no pidió menos movimiento. Si el JS falla, se rompe o está bloqueado,
   el sitio queda perfectamente legible — nunca invisible. */
.js-reveal .revelar {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.js-reveal .revelar.es-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .js-reveal .revelar { opacity: 1; transform: none; }
}

/* ================================================================== imprimir */

@media print {
  .topbar, .header, .hero__globo, .form, .footer__grilla { display: none; }
  body { color: #000; }
  .hero, .alcance { background: none; color: #000; }
  .hero h1, .alcance h2 { color: #000; }
}