/* Alcaro Supply — sitio publico.
 *
 * Pagina oscura de punta a punta. Toda la paleta sale del logotipo: el verde
 * de marca #183928 y el gris del engrane #727070; los demas tonos son
 * derivados de ese verde, no colores nuevos. La fotografia se tinta con el
 * mismo verde para que nada se sienta de archivo de stock.
 */

:root {
  --verde-950: #071510;   /* fondo base */
  --verde-900: #0a1c14;
  --verde-850: #0d2318;
  --verde-800: #122b1d;
  --verde-700: #183928;   /* verde de marca */
  --verde-600: #1f4a33;
  --verde-500: #2a6042;
  --verde-400: #4e8163;
  --verde-300: #7aa88d;
  --verde-200: #b3ccbd;

  --gris: #727070;        /* gris del engrane */

  --papel: #f1f5f1;
  --tenue: rgba(233, 241, 234, 0.64);
  --tenue-2: rgba(233, 241, 234, 0.42);

  --linea: rgba(255, 255, 255, 0.10);
  --linea-fuerte: rgba(255, 255, 255, 0.20);
  --superficie: rgba(255, 255, 255, 0.035);

  /* Una sola familia en toda la pagina. Archivo es variable: tiene eje de peso
     y eje de ancho, y de ahi sale todo el contraste. Los titulos van
     expandidos (112%), el texto en ancho normal y las etiquetas en versalitas
     con mucho espaciado. No hace falta una segunda tipografia. */
  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ancho: 1240px;
  --gutter: 28px;
  --radio: 0px;
  --transicion: 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
  background: var(--verde-950);
}

body {
  margin: 0;
  background: var(--verde-950);
  color: var(--papel);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

/* Archivo es una fuente variable: ademas del peso tiene eje de ancho. Los
   titulos van ligeramente expandidos (112%), que es lo que les da ese aire
   monumental de rotulo arquitectonico en vez de titular de plantilla. */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  font-stretch: 112%;
  font-variation-settings: "wdth" 112;
  letter-spacing: -0.03em;
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
}

h3, h4 {
  font-stretch: 105%;
  font-variation-settings: "wdth" 105;
  letter-spacing: -0.015em;
}

p { margin: 0; text-wrap: pretty; }

::selection { background: var(--verde-400); color: #fff; }

:focus-visible {
  outline: 2px solid var(--verde-300);
  outline-offset: 3px;
}

/* Grano de pelicula sobre toda la pagina: es lo que evita que el fondo
   oscuro se vea plano y digital. Muy sutil a proposito. */
.grano {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- layout */

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

.seccion {
  padding: clamp(84px, 10vw, 150px) 0;
  position: relative;
}

.seccion--ajustada { padding: clamp(64px, 7vw, 104px) 0; }
.seccion--alterna { background: var(--verde-900); }

.encabezado-seccion {
  max-width: 820px;
  margin-bottom: clamp(46px, 5.5vw, 76px);
}

.rotulo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--verde-300);
  margin: 0 0 24px;
}

.rotulo::before {
  content: "";
  width: 38px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

.titulo-seccion { font-size: clamp(31px, 4.2vw, 52px); }

.entrada-seccion {
  margin-top: 24px;
  font-size: clamp(16px, 1.5vw, 19px);
  color: var(--tenue);
  max-width: 64ch;
}

/* ---------------------------------------------------------------- botones */

/* Boton: esquina viva, etiqueta en versalitas muy espaciada y un barrido de
   color que entra desde la izquierda al pasar el cursor. Nada de esquinas
   redondeadas ni de relleno plano. */
.boton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 18px 30px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--transicion), border-color var(--transicion);
}

.boton > * { position: relative; z-index: 1; }

.boton::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.boton:hover::before { transform: scaleX(1); }

.boton--primario { background: var(--papel); color: var(--verde-950); }
.boton--primario::before { background: var(--verde-700); }
.boton--primario:hover { color: #fff; }

.boton--verde { background: var(--verde-700); color: #fff; }
.boton--verde::before { background: var(--papel); }
.boton--verde:hover { color: var(--verde-950); }

.boton--linea { background: transparent; color: var(--papel); border-color: var(--linea-fuerte); }
.boton--linea::before { background: var(--papel); }
.boton--linea:hover { color: var(--verde-950); border-color: var(--papel); }

/* La flecha vive en su propia caja, separada por un filete: detalle de
   instrumento, no de plantilla. */
.boton .flecha {
  transition: transform var(--transicion);
  margin-right: -6px;
}
.boton:hover .flecha { transform: translateX(5px); }

/* ---------------------------------------------------------------- fotografia */

/* Toda foto pasa por el mismo tratamiento: se desatura, se oscurece y se
   tinta con el verde de marca. Asi cuatro fotos de origenes distintos se
   ven como una sola sesion. */
.media {
  position: relative;
  overflow: hidden;
  background: var(--verde-900);
}

.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.4) contrast(1.06) brightness(0.74);
  transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1), filter var(--transicion);
}

.media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--verde-700);
  mix-blend-mode: color;
  opacity: 0.55;
  pointer-events: none;
}

/* ---------------------------------------------------------------- barra superior */

.barra-aviso {
  position: relative;
  z-index: 70;
  background: var(--verde-950);
  color: var(--tenue);
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--linea);
}

.barra-aviso__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  flex-wrap: wrap;
}

.barra-aviso__datos {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.barra-aviso a {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: color var(--transicion);
}
.barra-aviso a:hover { color: var(--papel); }

.idioma {
  display: inline-flex;
  border: 1px solid var(--linea);
  overflow: hidden;
}

.idioma button {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--tenue-2);
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  padding: 6px 13px;
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion);
}

.idioma button[aria-pressed="true"] { background: var(--verde-700); color: #fff; }

/* ---------------------------------------------------------------- cabecera */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 60;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--transicion), border-color var(--transicion),
              backdrop-filter var(--transicion);
}

.cabecera.esta-fija {
  background: rgba(7, 21, 16, 0.86);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--linea);
}

.cabecera__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  min-height: 84px;
}

.marca { display: flex; align-items: center; }
.marca img { height: 32px; width: auto; }

.nav { display: flex; align-items: center; gap: 32px; }

.nav a {
  text-decoration: none;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tenue);
  position: relative;
  padding: 6px 0;
  transition: color var(--transicion);
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--verde-300);
  transition: width var(--transicion);
}

.nav a:hover { color: var(--papel); }
.nav a:hover::after { width: 100%; }

/* En versalitas los rotulos son mas anchos: sin esto, entre 900 y 1080 px el
   menu y el boton se parten en dos lineas. */
.nav a,
.cabecera__acciones .boton { white-space: nowrap; }

.cabecera__acciones { display: flex; align-items: center; gap: 14px; }
.cabecera .boton { padding: 12px 22px; font-size: 14px; }

.menu-boton {
  display: none;
  appearance: none;
  font: inherit;
  background: transparent;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  width: 46px;
  height: 46px;
  cursor: pointer;
  position: relative;
}

.menu-boton span,
.menu-boton span::before,
.menu-boton span::after {
  position: absolute;
  left: 50%;
  width: 18px;
  height: 1.5px;
  background: var(--papel);
  transform: translateX(-50%);
  transition: transform var(--transicion), opacity 200ms ease;
}
.menu-boton span { top: 50%; margin-top: -0.75px; }
.menu-boton span::before { content: ""; left: 0; transform: none; top: -6px; }
.menu-boton span::after { content: ""; left: 0; transform: none; top: 6px; }

.menu-boton[aria-expanded="true"] span { background: transparent; }
.menu-boton[aria-expanded="true"] span::before { transform: rotate(45deg) translate(4px, 4px); }
.menu-boton[aria-expanded="true"] span::after { transform: rotate(-45deg) translate(4px, -4px); }

/* ---------------------------------------------------------------- hero */

.hero {
  position: relative;
  min-height: min(92vh, 900px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(90px, 14vw, 190px) 0 0;
  margin-top: -84px;   /* la cabecera flota sobre la imagen */
  overflow: hidden;
}

.hero__fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__fondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  filter: grayscale(0.2) brightness(0.78) contrast(1.12);
  animation: acercar 26s ease-out forwards;
}

@keyframes acercar {
  from { transform: scale(1.09); }
  to { transform: scale(1); }
}

.hero__fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(7, 21, 16, 0.94) 0%, rgba(7, 21, 16, 0.74) 40%, rgba(7, 21, 16, 0.24) 100%),
    linear-gradient(to top, var(--verde-950) 1%, rgba(7, 21, 16, 0) 44%);
}

.hero__fondo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--verde-700);
  mix-blend-mode: color;
  opacity: 0.5;
}

.hero__interior { position: relative; z-index: 2; }

.hero__contenido { max-width: 940px; padding-bottom: clamp(48px, 6vw, 86px); }

.hero h1 {
  font-size: clamp(40px, 6.6vw, 82px);
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin-bottom: 32px;
}

.hero h1 .destaca { color: var(--verde-300); }

.hero__texto {
  font-size: clamp(17px, 1.8vw, 20.5px);
  color: rgba(241, 245, 241, 0.78);
  max-width: 62ch;
  line-height: 1.62;
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 44px;
}

.hero__cifras {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--linea);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  counter-reset: cifras;
  /* Velo propio bajo la banda: le da suelo al texto sin tapar la fotografia
     que queda arriba. Sin el, los renglones compiten con la planta. */
  background: linear-gradient(to bottom, rgba(7, 21, 16, 0.5), rgba(7, 21, 16, 0.94));
}

/* El filete va a la izquierda y no a la derecha: asi la primera columna queda
   a ras del margen, alineada con el titular, y ninguna se pega al divisor. */
.cifra {
  counter-increment: cifras;
  padding: 34px 30px 38px 0;
  display: flex;
  flex-direction: column;
}

.cifra + .cifra {
  padding-left: 30px;
  border-left: 1px solid var(--linea);
}

/* Cada cifra lleva su indice numerado, como renglon de ficha tecnica. */
.cifra::before {
  content: "0" counter(cifras);
  display: block;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--verde-300);
  margin-bottom: 16px;
}

/* La altura minima de dos renglones es lo que alinea todas las notas entre si:
   sin ella, las que llevan titulo de una sola linea arrancan mas arriba y la
   banda se ve despareja. */
.cifra__dato {
  font-family: var(--display);
  font-size: clamp(19px, 1.85vw, 23px);
  font-weight: 600;
  font-stretch: 105%;
  font-variation-settings: "wdth" 105;
  letter-spacing: -0.02em;
  line-height: 1.16;
  min-height: 2.32em;
  color: var(--papel);
  display: block;
}

.cifra__nota {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--linea);
  font-size: 13.5px;
  color: var(--tenue);
  line-height: 1.55;
}

/* ---------------------------------------------------------------- sectores */

/* Antes era un bloque de verde plano con los nombres flotando y una segunda
   linea huerfana. Ahora repite el recurso de la pagina: columnas separadas por
   filete, como las cifras del hero y las etapas del proceso. */
.sectores {
  background: var(--verde-900);
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  padding: clamp(38px, 4.5vw, 56px) 0;
}

/* El rotulo va centrado con filete a ambos lados: esta franja es simetrica,
   a diferencia de los encabezados de seccion, que se alinean a la izquierda. */
.sectores .rotulo {
  display: flex;
  justify-content: center;
  margin: 0 auto 28px;
}

.sectores .rotulo::after {
  content: "";
  width: 38px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

.sectores__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border: 1px solid var(--linea);
}

/* Centrado en los dos ejes: asi el renglon de dos lineas queda a la misma
   altura optica que los de una, y la etiqueta no se pega al filete. */
.sectores__lista li {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 92px;
  padding: 18px 14px;
  border-right: 1px solid var(--linea);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.55;
  text-transform: uppercase;
  color: rgba(241, 245, 241, 0.86);
  transition: background var(--transicion), color var(--transicion);
}

.sectores__lista li:last-child { border-right: 0; }

.sectores__lista li:hover {
  background: rgba(255, 255, 255, 0.03);
  color: var(--papel);
}

/* ---------------------------------------------------------------- empresa */

.bloque-empresa {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

.bloque-empresa .media {
  aspect-ratio: 4 / 5;
  border-radius: var(--radio);
}

.bloque-empresa .media:hover img { transform: scale(1.04); }

.rejilla-pilares {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 1px;
  background: var(--linea);
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  margin-top: clamp(56px, 7vw, 96px);
}

.pilar {
  background: var(--verde-950);
  padding: 40px 34px 46px;
  transition: background var(--transicion);
}

.pilar:hover { background: var(--verde-850); }

.pilar {
  position: relative;
}

/* Filete superior que se enciende al pasar el cursor: la tarjeta deja de ser
   una caja y se comporta como una ficha. */
.pilar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--verde-300);
  transition: width 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pilar:hover::before { width: 100%; }

.pilar__indice {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--verde-400);
  display: block;
  margin-bottom: 30px;
}

.pilar h3 { font-size: 20px; margin-bottom: 14px; }

.pilar p { font-size: 15.5px; color: var(--tenue); line-height: 1.62; }

.seccion--alterna .pilar { background: var(--verde-900); }
.seccion--alterna .pilar:hover { background: var(--verde-850); }

/* ---------------------------------------------------------------- lineas de suministro */

.seccion--textura { background: var(--verde-900); }

.seccion--textura .fondo-textura {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0.16;
}

.seccion--textura .fondo-textura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(0.5);
}

.seccion--textura .fondo-textura::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--verde-900) 0%, rgba(10, 28, 20, 0.45) 40%, var(--verde-900) 100%);
}

.seccion--textura .envoltura { position: relative; z-index: 2; }

.rejilla-lineas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(302px, 1fr));
  gap: 18px;
}

.linea-tarjeta {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 36px 32px 38px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  backdrop-filter: blur(2px);
  transition: transform var(--transicion), border-color var(--transicion), background var(--transicion);
}

.linea-tarjeta:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.06);
}

/* El icono va enmarcado en su propia caja: asi se lee como pieza de un
   sistema y no como un adorno suelto encima del titulo. */
.linea-tarjeta__icono {
  width: 52px;
  height: 52px;
  padding: 12px;
  border: 1px solid var(--linea);
  color: var(--verde-300);
  transition: color var(--transicion), border-color var(--transicion), background var(--transicion);
}

.linea-tarjeta:hover .linea-tarjeta__icono {
  color: var(--papel);
  border-color: var(--linea-fuerte);
  background: rgba(255, 255, 255, 0.04);
}

.linea-tarjeta h3 { font-size: 19px; }

.linea-tarjeta p { font-size: 15px; color: var(--tenue); }

/* Las etiquetas van ancladas al pie de la tarjeta. Como las tarjetas de una
   misma hilera tienen la misma altura, asi quedan alineadas entre si aunque
   una descripcion ocupe dos lineas y la de al lado tres. El filete superior
   las separa del texto y remata la tarjeta. */
.linea-tarjeta ul {
  --alto-etiqueta: 32px;   /* alto de una etiqueta: 12px de texto + relleno + filete */
  --hueco-etiquetas: 7px;
  --respiro-etiquetas: 18px;

  margin: auto 0 0;
  padding: var(--respiro-etiquetas) 0 0;
  /* Dos hileras de etiquetas siempre, aunque una tarjeta llene solo una: si no,
     el filete superior queda a distinta altura que el de la tarjeta de al lado. */
  min-height: calc(var(--respiro-etiquetas) + var(--alto-etiqueta) * 2 + var(--hueco-etiquetas));
  border-top: 1px solid var(--linea);
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: var(--hueco-etiquetas);
}

.linea-tarjeta li {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--tenue-2);
  border: 1px solid var(--linea);
  padding: 5px 10px;
}

.aviso-lineas {
  margin-top: 32px;
  font-size: 15.5px;
  color: var(--tenue);
}

.aviso-lineas a { color: var(--verde-300); font-weight: 600; text-underline-offset: 4px; }

/* ---------------------------------------------------------------- marcas */

.marcas {
  background: var(--verde-900);
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  padding: clamp(56px, 6.5vw, 88px) 0;
}

.marcas__encabezado { margin-bottom: 34px; }

.marcas__nota {
  font-size: 15.5px;
  color: var(--tenue);
  max-width: 58ch;
}

.marcas__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--linea);
}

.marcas__lista li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 116px;
  padding: 24px 28px;
  border-right: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  transition: background var(--transicion);
}

/* Con 8 marcas en 4 columnas: sin filete a la derecha en la ultima columna ni
   abajo en la ultima hilera. Si cambia el numero de marcas, aqui se ajusta. */
.marcas__lista li:nth-child(4n) { border-right: 0; }
.marcas__lista li:nth-last-child(-n+4) { border-bottom: 0; }

.marcas__lista li:hover { background: rgba(255, 255, 255, 0.03); }

/* Normaliza cualquier logotipo a blanco, venga a color o no. Asi las marcas
   conviven sin competir entre ellas ni con la identidad de Alcaro. */
.marcas__lista img {
  max-width: 100%;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.65;
  transition: opacity var(--transicion);
}

/* Igualar la altura de todos los logotipos los desequilibra: uno muy alargado
   pesa el doble que uno cuadrado. La altura se asigna segun la proporcion de
   cada marca para que ocupen un area parecida. */
/* Van calificadas con .marcas__lista porque la regla de arriba tambien lleva
   dos niveles: sin eso, su max-width del 100 % le gana a estos topes.
   El tope de ancho es para las marcas muy alargadas (Urrea pasa de 5:1): solo
   con altura crecerian a lo largo y pesarian mas que las demas. */
.marcas__lista .marca--ancha { max-height: 32px; max-width: 132px; }   /* mayor a 3:1     */
.marcas__lista .marca--media { max-height: 38px; }                     /* entre 2:1 y 3:1 */
.marcas__lista .marca--compacta { max-height: 46px; }                  /* menor a 2:1     */

.marcas__lista li:hover img { opacity: 1; }

.marcas__legal {
  margin-top: 26px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--tenue-2);
  max-width: 76ch;
}

/* ---------------------------------------------------------------- proceso */

.proceso {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--linea);
}

/* El filete va a la izquierda, igual que en la banda del hero: asi cada
   etapa tiene su divisor y su punto en el mismo borde, y la primera queda
   a ras del margen. Antes el punto iba a la izquierda y el filete a la
   derecha, y no se correspondian. */
.paso {
  padding: 38px 20px 34px 0;
  position: relative;
}

.paso + .paso {
  padding-left: 28px;
  border-left: 1px solid var(--linea);
}

.paso::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 7px;
  height: 7px;
  background: var(--verde-300);
  border-radius: 50%;
}

.paso__num {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--verde-400);
  font-weight: 600;
}

/* Dos renglones de altura minima: es lo que alinea las descripciones entre si
   cuando un titulo ocupa dos lineas y los demas una. */
.paso h3 {
  font-size: 19px;
  line-height: 1.2;
  min-height: 2.4em;
  margin: 16px 0 12px;
}

.paso p { font-size: 14.5px; color: var(--tenue); line-height: 1.58; }

/* ---------------------------------------------------------------- declaracion */

.declaracion {
  position: relative;
  padding: clamp(96px, 12vw, 172px) 0;
  overflow: hidden;
}

.declaracion .media {
  position: absolute;
  inset: 0;
}

.declaracion .media img { object-position: center 30%; filter: grayscale(0.55) brightness(0.62) contrast(1.18); }

.declaracion .media::after { opacity: 0.45; }

.declaracion::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--verde-950) 0%, rgba(7, 21, 16, 0.55) 30%, rgba(7, 21, 16, 0.75) 100%);
}

.declaracion__interior { position: relative; z-index: 3; }

.declaracion__texto {
  max-width: 900px;
  font-family: var(--display);
  font-size: clamp(25px, 3.6vw, 44px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.declaracion__texto em {
  font-style: normal;
  color: var(--verde-300);
}

.compromisos {
  list-style: none;
  margin: clamp(44px, 5vw, 68px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--linea-fuerte);
  border-top: 1px solid var(--linea-fuerte);
  border-bottom: 1px solid var(--linea-fuerte);
}

.compromisos { counter-reset: compromiso; }

.compromisos li {
  background: rgba(7, 21, 16, 0.55);
  backdrop-filter: blur(3px);
  padding: 28px 26px 32px;
  counter-increment: compromiso;
}

.compromisos li::before {
  content: "0" counter(compromiso);
  display: block;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--verde-300);
  margin-bottom: 18px;
}

.compromisos strong {
  display: block;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 9px;
}

.compromisos span { font-size: 14.5px; color: var(--tenue); line-height: 1.55; }

/* ---------------------------------------------------------------- cotizacion */

.bloque-cotizacion {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(42px, 6vw, 92px);
  align-items: start;
}

.canales { list-style: none; margin: 36px 0 0; padding: 0; }

.canal {
  display: flex;
  gap: 17px;
  align-items: flex-start;
  padding: 20px 0;
  border-top: 1px solid var(--linea);
}
.canales .canal:last-child { border-bottom: 1px solid var(--linea); }

.canal svg { width: 19px; height: 19px; color: var(--verde-300); flex: none; margin-top: 4px; }
.canal__etiqueta { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tenue-2); }
.canal__valor { font-size: 16.5px; font-weight: 500; text-decoration: none; transition: color var(--transicion); }
a.canal__valor:hover { color: var(--verde-300); }

.formulario {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: clamp(28px, 4vw, 46px);
}

.campos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 21px;
}

.campo { display: flex; flex-direction: column; gap: 9px; }
.campo--ancho { grid-column: 1 / -1; }

.campo label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tenue-2);
}

.campo input,
.campo select,
.campo textarea {
  font-family: var(--sans);
  font-size: 15.5px;
  color: var(--papel);
  background: rgba(7, 21, 16, 0.45);
  border: 1px solid var(--linea);
  border-radius: 0;
  padding: 14px 15px;
  width: 100%;
  transition: border-color var(--transicion), background var(--transicion);
}

.campo textarea { resize: vertical; min-height: 122px; }

.campo input::placeholder,
.campo textarea::placeholder { color: rgba(233, 241, 234, 0.3); }

.campo select option { background: var(--verde-900); color: var(--papel); }

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--verde-400);
  background: rgba(7, 21, 16, 0.85);
}

.formulario__pie {
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.formulario__nota { font-size: 13px; color: var(--tenue-2); max-width: 34ch; }

.formulario__acciones { display: flex; gap: 12px; flex-wrap: wrap; }

.formulario__aviso {
  margin-top: 18px;
  font-size: 14.5px;
  padding: 15px 17px;
  border-radius: var(--radio);
  background: rgba(42, 96, 66, 0.35);
  border: 1px solid var(--verde-500);
  color: var(--papel);
  display: none;
}
.formulario__aviso.visible { display: block; }

.formulario__aviso--error {
  background: rgba(114, 112, 112, 0.18);
  border-color: var(--gris);
}

/* ---------------------------------------------------------------- preguntas */

.preguntas { border-top: 1px solid var(--linea); counter-reset: faq; }

.pregunta { border-bottom: 1px solid var(--linea); counter-increment: faq; }

.pregunta summary::before {
  content: "0" counter(faq);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--verde-400);
  margin-right: 22px;
  vertical-align: 2px;
}

.pregunta summary {
  cursor: pointer;
  list-style: none;
  padding: 26px 46px 26px 0;
  font-family: var(--display);
  font-size: 18.5px;
  font-weight: 600;
  letter-spacing: -0.015em;
  position: relative;
  transition: color var(--transicion);
}

.pregunta summary:hover { color: var(--verde-200); }
.pregunta summary::-webkit-details-marker { display: none; }

.pregunta summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 33px;
  width: 11px;
  height: 11px;
  border-right: 1.5px solid var(--verde-300);
  border-bottom: 1.5px solid var(--verde-300);
  transform: rotate(45deg);
  transition: transform var(--transicion);
}

.pregunta[open] summary::after { transform: rotate(-135deg); top: 37px; }

.pregunta p { padding: 0 44px 28px 56px; color: var(--tenue); font-size: 15.5px; }

/* ---------------------------------------------------------------- cierre + pie */

.cierre {
  background: var(--verde-700);
  padding: clamp(64px, 7vw, 96px) 0;
}

.cierre__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  flex-wrap: wrap;
}

.cierre h2 { font-size: clamp(27px, 3.4vw, 40px); max-width: 20ch; }
.cierre p { margin-top: 15px; color: rgba(255, 255, 255, 0.75); max-width: 48ch; }

.pie {
  background: var(--verde-950);
  color: var(--tenue-2);
  padding: clamp(60px, 6vw, 84px) 0 34px;
  font-size: 14.5px;
}

.pie__rejilla {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 44px;
  padding-bottom: 50px;
  border-bottom: 1px solid var(--linea);
}

.pie img { height: 38px; width: auto; margin-bottom: 22px; }

.pie h4 {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tenue-2);
  margin-bottom: 22px;
  font-weight: 600;
  font-stretch: normal;
  font-variation-settings: normal;
}

.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pie a { text-decoration: none; transition: color var(--transicion); }
.pie a:hover { color: var(--papel); }

.pie__legal {
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: rgba(233, 241, 234, 0.32);
}

/* Datos que faltan por capturar. El subrayado punteado existe para que
   ninguno se publique por olvido; al poner el dato real, quita la clase. */
.pendiente {
  text-decoration: underline dotted currentColor;
  text-underline-offset: 4px;
}

/* ---------------------------------------------------------------- animacion */

/* El estado oculto cuelga de la clase "js" que sitio.js le pone al <html>.
   Sin JavaScript esa clase nunca aparece, el bloque de abajo no aplica y todo
   el contenido queda visible. Antes, si el script no corria, medio sitio se
   quedaba en opacity 0 para siempre. */
.js .aparece {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.js .aparece.visible { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- responsive */

@media (max-width: 1080px) {
  .hero__cifras { grid-template-columns: repeat(2, 1fr); }
  .cifra:nth-child(odd) { padding-left: 0; border-left: 0; }
  .cifra:nth-child(-n+2) { border-bottom: 1px solid var(--linea); }
  .proceso { grid-template-columns: repeat(2, 1fr); }
  .paso { border-bottom: 1px solid var(--linea); }
  .paso:nth-child(odd) { padding-left: 0; border-left: 0; }
  .paso:last-child { border-bottom: 0; }
  .sectores__lista { grid-template-columns: repeat(3, 1fr); }
  .sectores__lista li:nth-child(3n) { border-right: 0; }
  .sectores__lista li:nth-child(-n+3) { border-bottom: 1px solid var(--linea); }
  /* Las marcas se quedan en 4 columnas: son 8, y con 3 la ultima hilera
     quedaria coja y el marco abierto. Solo se aprieta el interior. */
  .marcas__lista li { min-height: 100px; padding: 18px 14px; }
  .bloque-empresa,
  .bloque-cotizacion { grid-template-columns: 1fr; }
  .bloque-empresa .media { aspect-ratio: 16 / 10; }
  .compromisos { grid-template-columns: 1fr; }
  .pie__rejilla { grid-template-columns: 1fr 1fr; gap: 36px; }
}

/* El menu completo necesita ~1000 px para caber en un renglon junto al
   logotipo y al boton. Por debajo de eso se pasa al menu desplegable. */
@media (max-width: 1080px) {
  .nav {
    position: fixed;
    inset: 128px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(7, 21, 16, 0.98);
    backdrop-filter: blur(16px);
    border-top: 1px solid var(--linea);
    border-bottom: 1px solid var(--linea);
    padding: 8px var(--gutter) 24px;
    transform: translateY(-14px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 280ms ease, transform 280ms ease, visibility 280ms;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
  }
  .nav.abierto { opacity: 1; transform: none; visibility: visible; }
  .nav a { padding: 16px 0; border-bottom: 1px solid var(--linea); font-size: 16px; }
  .nav a:last-child { border-bottom: 0; }
  .menu-boton { display: block; }
  .cabecera__acciones .boton { display: none; }
  .barra-aviso__datos .oculta-movil { display: none; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  :root { --gutter: 18px; }
  .hero { min-height: auto; padding-top: 120px; }
  .hero__cifras { grid-template-columns: 1fr; }
  .cifra,
  .cifra + .cifra { border-left: 0; padding: 24px 0 26px; border-bottom: 1px solid var(--linea); }
  .cifra:last-child { border-bottom: 0; }
  .cifra__dato { min-height: 0; }   /* en una columna nada que alinear */
  .proceso { grid-template-columns: 1fr; }
  .paso,
  .paso + .paso { border-left: 0; padding: 30px 0 30px; }
  .paso h3 { min-height: 0; }   /* en una columna nada que alinear */
  .sectores__lista { grid-template-columns: repeat(2, 1fr); }
  .sectores__lista li { min-height: 80px; padding: 16px 12px; }
  .sectores__lista li:nth-child(2n) { border-right: 0; }
  .marcas__lista { grid-template-columns: repeat(2, 1fr); }
  .marcas__lista li { min-height: 100px; padding: 20px 18px; border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
  .marcas__lista li:nth-child(2n) { border-right: 0; }
  .marcas__lista li:nth-last-child(-n+2) { border-bottom: 0; }
  .marcas__lista .marca--ancha { max-height: 26px; max-width: 108px; }
  .marcas__lista .marca--media { max-height: 31px; }
  .marcas__lista .marca--compacta { max-height: 38px; }
  .sectores__lista li:nth-child(-n+4) { border-bottom: 1px solid var(--linea); }
  .campos { grid-template-columns: 1fr; }
  .pie__rejilla { grid-template-columns: 1fr; }
  .hero__acciones .boton { width: 100%; }
  .formulario__acciones,
  .cierre__interior > div { width: 100%; }
  .formulario__acciones .boton,
  .cierre__interior .boton { width: 100%; }
  .declaracion__texto { font-size: clamp(23px, 6.6vw, 30px); }
}

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

@media print {
  .cabecera, .barra-aviso, .menu-boton, .formulario, .grano { display: none; }
}