/* ══════════════════════════════════════════════════════════════
   GRUPO ENERGÉTICO MERENDÓN — v3 corporativa
   Limpia, ordenada, poco movimiento. Azul corporativo (uniformes)
   + blanco + verde del logo como acento.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* Azul corporativo — el de las camisas de la empresa */
  --azul-900: #003A6B;
  --azul-800: #005497;
  --azul-700: #0066B3;
  --azul-600: #007AC0;
  --azul-100: #E4EEF7;
  --azul-50:  #F3F7FB;

  /* Verde del logo, solo como acento */
  --verde: #5FA028;
  --verde-hondo: #3E7A17;
  --ambar: #EBA023;
  --verde-claro: #7CB342;
  --amarillo: #F2B705;

  --blanco: #FFFFFF;
  /* Era #F2EFEC, un beige tibio: desentonaba en una paleta que es toda
     azul. Este gris tiene el mismo azul de fondo que el resto. */
  --gris-50: #EEF2F7;
  --gris-100: #EDF1F5;
  --gris-200: #DDE4EC;

  --tx: #14273F;
  --tx-suave: #56687F;
  --tx-claro: #FFFFFF;
  --tx-claro-suave: #C3D2E4;

  --linea: #E2E9F1;
  --linea-oscura: rgba(255, 255, 255, 0.16);

  --font: "Inter", system-ui, -apple-system, sans-serif;
  --font-t: "Archivo", system-ui, sans-serif;

  --r: 10px;
  --r-lg: 14px;
  --sombra: 0 2px 14px rgba(11, 37, 69, 0.07);
  --sombra-md: 0 10px 30px rgba(11, 37, 69, 0.10);

  --ez: cubic-bezier(0.4, 0, 0.2, 1);
  --nav-h: 76px;
  --barra-h: 40px;
  --pad: clamp(64px, 7vw, 104px);
}

/* ── Base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* El fondo del html es el color con que termina el pie. Safari lo usa
   para la franja de abajo, donde flota la barra de direcciones, y para
   el rebote al pasarse del final; con el blanco del body quedaba una
   franja blanca debajo del pie. Arriba casa con la barra superior. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: #00426F; }

body {
  background: var(--blanco);
  color: var(--tx);
  font-family: var(--font);
  font-size: 16.5px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }

::selection { background: var(--azul-100); color: var(--azul-900); }
:focus-visible { outline: 2.5px solid var(--verde); outline-offset: 3px; border-radius: 3px; }

.container { width: min(1240px, 90vw); margin-inline: auto; }
[id] { scroll-margin-top: calc(var(--nav-h) + 20px); }

.skip-link {
  position: fixed; top: -60px; left: 16px; z-index: 300;
  background: var(--azul-900); color: #fff;
  font-weight: 600; padding: 11px 20px; border-radius: 6px;
  transition: top 0.2s var(--ez);
}
.skip-link:focus { top: 12px; }

/* ── Tipografía ───────────────────────────────────────────── */
h1, h2, h3, h4 { font-family: var(--font-t); font-weight: 700; line-height: 1.14; letter-spacing: -0.015em; color: var(--azul-900); }

.eyebrow {
  display: inline-block;
  font-size: 0.76rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  /* El verde claro sobre fondo claro daba 2.8:1 a 12px, ilegible. El
     hondo llega a 4.7:1 y sigue siendo el verde de la marca.
     Sobre azul se usa .eyebrow--claro, que no cambia. */
  color: var(--verde-hondo);
  margin-bottom: 14px;
}
.eyebrow--claro { color: var(--verde-claro); }

.h-sec { font-size: clamp(1.75rem, 3.4vw, 2.65rem); margin-bottom: 16px; }
.h-sec--claro { color: #fff; }
.lead { color: var(--tx-suave); font-size: 1.06rem; max-width: 62ch; }
.lead--claro { color: var(--tx-claro-suave); }

.section { padding-block: var(--pad); }
.section--gris { background: var(--gris-50); }
.section--azul { background: var(--azul-900); color: #fff; }
.section--azul p { color: var(--tx-claro-suave); }

.sec-head { position: relative; margin-bottom: clamp(34px, 4vw, 54px); max-width: 72ch; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before {
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: currentColor; opacity: 0.9;
}

/* ── Botones ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 0.85em 1.7em;
  border-radius: 6px;
  font-weight: 600; font-size: 0.95rem;
  border: 1.5px solid transparent;
  transition: background 0.2s var(--ez), color 0.2s var(--ez), border-color 0.2s var(--ez);
}
.btn-primary {
  color: #fff;
  /* Sigue siendo gradiente verde, pero más hondo: con --verde-claro el
     texto blanco quedaba en 2.5:1, ilegible en el botón principal del
     sitio. Ahora el tono más claro del recorrido da 4.6:1. */
  background-image: linear-gradient(135deg, #4A8419 0%, #3E7A17 52%, #2F5F0E 100%);
  background-size: 200% 200%;
  background-position: 0% 0%;
  box-shadow: 0 4px 14px rgba(62, 122, 23, 0.26);
  transition: background-position 0.45s var(--ez), box-shadow 0.3s var(--ez), transform 0.25s var(--ez);
}
.btn-primary:hover {
  background-position: 100% 100%;
  box-shadow: 0 8px 22px rgba(62, 122, 23, 0.36);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); box-shadow: 0 3px 10px rgba(62, 122, 23, 0.3); }

.btn-azul {
  color: #fff;
  background-image: linear-gradient(135deg, var(--azul-700) 0%, var(--azul-900) 100%);
  background-size: 200% 200%;
  transition: background-position 0.45s var(--ez), transform 0.25s var(--ez);
}
.btn-azul:hover { background-position: 100% 100%; transform: translateY(-1px); }

.btn-linea { border-color: var(--azul-900); color: var(--azul-900); }
.btn-linea:hover { background: var(--azul-900); color: #fff; }

.btn-linea-claro { border-color: rgba(255, 255, 255, 0.5); color: #fff; }
.btn-linea-claro:hover { background: #fff; color: var(--azul-900); }

.btn-lg { padding: 1em 2em; font-size: 1rem; }

.link-flecha {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; color: var(--azul-700);
  transition: gap 0.2s var(--ez), color 0.2s;
}
.link-flecha:hover { gap: 13px; color: var(--verde); }
.link-flecha--claro { color: #fff; }
.link-flecha--claro:hover { color: var(--amarillo); }

/* ══════════════════ BARRA SUPERIOR ══════════════════ */
.barra-top {
  background: var(--azul-900);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.8rem;
}
.barra-top-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; min-height: var(--barra-h); flex-wrap: wrap;
}
.barra-lema { letter-spacing: 0.02em; }
.barra-datos { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); }
.barra-dato {
  display: inline-flex; align-items: center; gap: 8px;
  color: rgba(255, 255, 255, 0.86);
  font-weight: 500;
  transition: color 0.2s var(--ez);
}
.barra-dato svg {
  width: 14px; height: 14px; flex: none;
  fill: none; stroke: var(--ambar); stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.barra-dato--wa svg { fill: var(--ambar); stroke: none; }
.barra-dato:hover { color: #fff; }

/* ══════════════════ NAV ══════════════════ */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--linea);
  transition: box-shadow 0.3s var(--ez);
}
.nav.fijo { box-shadow: 0 4px 20px rgba(0, 58, 107, 0.10); }
.nav-in {
  width: min(1240px, 90vw); margin-inline: auto;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 22px;
}
.nav-logo { display: flex; align-items: center; }
.nav-logo img { height: 52px; width: auto; transition: transform 0.3s var(--ez); }
.nav-logo:hover img { transform: scale(1.03); }

.nav-links { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.nav-links a {
  position: relative;
  font-size: 0.95rem; font-weight: 500;
  color: var(--tx);
  padding: 6px 0;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--azul-700); }
.nav-links a.is-active { color: var(--azul-900); font-weight: 600; }
.nav-links a.is-active::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2.5px; background: var(--verde); border-radius: 2px;
}

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

.burger { display: none; width: 44px; height: 44px; position: relative; }
.burger span {
  position: absolute; left: 11px; right: 11px; height: 2px;
  background: var(--azul-900); border-radius: 2px;
  transition: transform 0.25s var(--ez), opacity 0.2s;
}
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 22px; }
.burger span:nth-child(3) { top: 28px; }
.burger.abierto span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.burger.abierto span:nth-child(2) { opacity: 0; }
.burger.abierto span:nth-child(3) { top: 22px; transform: rotate(-45deg); }

.menu-movil {
  position: fixed; inset: var(--nav-h) 0 0; z-index: 99;
  background: #fff;
  padding: 26px 5vw;
  display: none;
  overflow-y: auto;
}
.menu-movil.abierto { display: block; }
.menu-movil a:not(.btn) {
  display: block;
  font-family: var(--font-t); font-weight: 700;
  font-size: 1.32rem;
  color: var(--azul-900);
  padding: 15px 0;
  border-bottom: 1px solid var(--linea);
  transition: color 0.2s var(--ez), padding-left 0.25s var(--ez);
}
.menu-movil a:not(.btn):hover { color: var(--azul-700); padding-left: 6px; }
.menu-movil .btn { width: 100%; margin-top: 24px; color: #fff; }

/* ══════════════════ HERO — dos paneles ══════════════════ */
.hero {
  position: relative;
  /* 1px extra = el borde inferior del nav */
  min-height: calc(100svh - var(--nav-h) - var(--barra-h) - 1px);
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  grid-template-rows: 1fr auto;
  background: var(--azul-900);
  overflow: hidden;
}

/* Panel izquierdo: fotografía a color, encuadre cerrado */
.hero-a { position: relative; grid-row: 1; overflow: hidden; margin: 0; }

/* Etiqueta del proyecto sobre la fotografía */
.hero-pie {
  position: absolute; z-index: 2;
  left: clamp(20px, 2.6vw, 34px);
  bottom: clamp(20px, 2.6vw, 32px);
  padding-left: 16px;
  border-left: 3px solid var(--ambar);
  display: grid; gap: 3px;
}
.hero-pie-t {
  font-family: var(--font-t); font-weight: 700;
  font-size: 1rem; color: #fff;
  text-shadow: 0 2px 10px rgba(0, 26, 50, 0.6);
}
.hero-pie-s {
  font-size: 0.82rem; color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 8px rgba(0, 26, 50, 0.7);
}
.hero-a img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 78%;      /* encuadra los paneles, deja fuera el cielo */
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1.3s ease, transform 9s linear;
  image-rendering: -webkit-optimize-contrast;
}
.hero-a img.activa { opacity: 1; transform: scale(1); }
/* Viñeta que funde con el panel de texto */
.hero-a::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0, 30, 58, 0.34) 0%, transparent 26%, transparent 74%, rgba(0, 40, 74, 0.5) 100%);
}

/* Panel derecho: azul profundo + foto multiplicada + texto */
.hero-b {
  position: relative; grid-row: 1;
  background: var(--azul-800);
  display: flex; align-items: center;
  overflow: hidden;
}
.hero-b-fotos { position: absolute; inset: 0; }
.hero-b-fotos img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 72%;
  opacity: 0;
  mix-blend-mode: multiply;
  transition: opacity 1.3s ease;
}
.hero-b-fotos img.activa { opacity: 0.85; }
.hero-b::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 34, 64, 0.42) 0%, rgba(0, 34, 64, 0.16) 40%, rgba(0, 26, 50, 0.72) 100%);
  pointer-events: none;
}

.hero-in {
  position: relative; z-index: 3;
  padding: clamp(36px, 4.6vw, 70px) clamp(30px, 4.4vw, 68px);
  width: 100%;
}

/* Rejilla técnica sutil, como un plano eléctrico */
.hero-rejilla {
  position: absolute; inset: 0; z-index: 1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: radial-gradient(120% 90% at 20% 30%, #000 20%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 20% 30%, #000 20%, transparent 78%);
  pointer-events: none;
}

/* Marca de agua del logo */
.hero-marca {
  position: absolute; z-index: 1;
  right: -6%; bottom: -12%;
  width: min(62%, 460px); height: auto;
  color: rgba(255, 255, 255, 0.055);
  pointer-events: none;
}

/* Acento ámbar sobre el titular */
.hero-desde {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ambar);
  margin-bottom: 24px;
}
.hero-desde::before {
  content: ""; width: 36px; height: 3px;
  background: var(--ambar); border-radius: 2px;
}

/* Titular con jerarquía: rótulo fino arriba, nombre grande abajo */
.hero-titulo { margin-bottom: 24px; }
.hero-titulo-sup {
  display: block;
  font-family: var(--font);
  font-weight: 500;
  font-size: clamp(0.95rem, 1.24vw, 1.2rem);
  letter-spacing: 0.32em; text-indent: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 10px;
}
.hero-titulo-main {
  display: block;
  font-family: var(--font-t);
  font-weight: 800;
  font-size: clamp(3rem, 6.4vw, 5.6rem);
  line-height: 0.94;
  letter-spacing: -0.035em;
  color: #fff;
  text-shadow: 0 4px 40px rgba(0, 20, 40, 0.4);
}

.hero-sub {
  font-size: clamp(1rem, 1.16vw, 1.14rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  max-width: 34ch;
  margin-bottom: 34px;
  padding-left: 18px;
  border-left: 2px solid rgba(235, 160, 35, 0.55);
}

/* Flecha del botón principal */
.btn-flecha { width: 17px; height: 17px; transition: transform 0.25s var(--ez); }
.btn:hover .btn-flecha { transform: translateX(4px); }

.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* Entrada del bloque de texto */
@media (prefers-reduced-motion: no-preference) {
  html.js .hero-desde,
  html.js .hero-titulo-sup,
  html.js .hero-titulo-main,
  html.js .hero-sub,
  html.js .hero-btns {
    opacity: 0; transform: translateY(16px);
    animation: heroEntra 0.85s var(--ez) forwards;
  }
  html.js .hero-desde       { animation-delay: 0.12s; }
  html.js .hero-titulo-sup  { animation-delay: 0.20s; }
  html.js .hero-titulo-main { animation-delay: 0.28s; }
  html.js .hero-sub         { animation-delay: 0.40s; }
  html.js .hero-btns        { animation-delay: 0.50s; }
}
@keyframes heroEntra { to { opacity: 1; transform: none; } }
.hero-btns .btn { padding: 1em 2.1em; }

/* Indicadores dentro del panel de texto, alineados al contenido */
.hero-bullets {
  position: absolute; z-index: 6;
  left: clamp(30px, 4.4vw, 68px);
  bottom: clamp(30px, 3.6vw, 50px);
  display: flex; gap: 10px;
}
.hero-bullets button {
  width: 30px; height: 3px; border-radius: 2px;
  background: rgba(255, 255, 255, 0.32);
  transition: background 0.3s var(--ez), width 0.3s var(--ez);
}
.hero-bullets button:hover { background: rgba(255, 255, 255, 0.6); }
.hero-bullets button.activo { background: var(--ambar); width: 46px; }

/* Franja inferior del hero: los logos de los clientes, en movimiento */
.hero-tira {
  grid-column: 1 / -1; grid-row: 2;
  align-self: end;
  background: linear-gradient(100deg, #00284A 0%, var(--azul-900) 46%, #00558F 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex; align-items: stretch;
  overflow: hidden;
}
.tira-rotulo {
  flex: none;
  display: inline-flex; align-items: center;
  padding-inline: clamp(18px, 2.6vw, 38px);
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  white-space: nowrap;
}


/* Hero interior (páginas secundarias) */
/* Cabecera de página interior: cada una lleva una foto suya. Antes era
   azul plano con un resplandor en la esquina y la mitad derecha vacía. */
.hero-int {
  position: relative;
  isolation: isolate;
  color: #fff;
  padding-block: clamp(74px, 8vw, 122px);
  overflow: hidden;
  background: var(--azul-900);
}
.hero-int-foto {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 46%;
  animation: heroIntEntra 1.8s var(--ez) both;
}
@keyframes heroIntEntra { from { transform: scale(1.07); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero-int-foto { animation: none; } }

.hero-int-velo {
  position: absolute; inset: 0; z-index: -1;
  /* Las dos capas se multiplican: con 0.60 arriba y 0.72 abajo solo pasaba
     el 18% de la foto y la imagen no se veía. La vertical se afloja y deja
     que la horizontal haga el trabajo: oscuro donde va el texto, abierto
     del otro lado. */
  background:
    linear-gradient(90deg, rgba(0, 26, 50, 0.93) 0%, rgba(0, 32, 60, 0.84) 42%, rgba(0, 40, 74, 0.40) 100%),
    linear-gradient(180deg, rgba(0, 26, 50, 0.18), rgba(0, 20, 40, 0.42));
}
.hero-int .container { position: relative; z-index: 1; }
.hero-int h1 {
  color: #fff;
  font-size: clamp(2.2rem, 5.4vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}
.hero-int p { color: rgba(255, 255, 255, 0.88); max-width: 58ch; font-size: 1.06rem; }
.migas { font-size: 0.84rem; color: var(--tx-claro-suave); margin-bottom: 16px; }
.migas a { color: var(--verde-claro); }
.migas span { opacity: 0.6; margin-inline: 7px; }

/* ══════════════════ CIFRAS ══════════════════ */
/* Franja a todo el ancho sobre una aérea de la obra. Los números son lo
   único que se ve grande, así que aquí sí se puede poner texto encima de
   la foto: no hace falta el velo casi opaco que arruinaba las tarjetas. */
.cifras {
  position: relative;
  isolation: isolate;
  padding-block: clamp(66px, 7vw, 108px);
  color: #fff;
  overflow: hidden;
  background: var(--azul-900);
}
.cifras-fondo {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06);
  transition: transform 2s var(--ez);
}
.cifras.visto .cifras-fondo { transform: scale(1); }
.cifras-velo {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(0, 30, 56, 0.82) 0%, rgba(0, 40, 74, 0.7) 45%, rgba(0, 24, 46, 0.9) 100%),
    linear-gradient(90deg, rgba(0, 30, 56, 0.5), rgba(0, 30, 56, 0) 60%);
}

/* En px y no en ch: el ch de un div se calcula sobre SU tamaño de fuente
   (16px), no sobre el del titular, y el titular salía en cinco líneas. */
.cifras-head { max-width: 640px; margin-bottom: clamp(38px, 4.4vw, 62px); }
.cifras-head .h-sec { margin-bottom: 0; }

.cifras-fila {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 48px);
}
.cifra { position: relative; }
.cifra + .cifra { padding-left: clamp(20px, 3vw, 48px); }
.cifra + .cifra::before {
  content: "";
  position: absolute; left: 0; top: 2px; bottom: 6px;
  width: 1px; background: rgba(255, 255, 255, 0.2);
}
.cifra-n {
  font-family: var(--font-t); font-weight: 800;
  font-size: clamp(2.9rem, 6vw, 5.1rem);
  line-height: 0.94;
  letter-spacing: -0.045em;
  display: flex; align-items: baseline; gap: 7px;
  font-variant-numeric: tabular-nums;
}
.cifra-n em {
  font-style: normal;
  font-size: 0.34em; font-weight: 700;
  letter-spacing: -0.01em; color: var(--amarillo);
  transform: translateY(-0.14em);
}
.cifra-filo {
  display: block;
  height: 3px; border-radius: 2px;
  margin: 18px 0 14px;
  background: linear-gradient(90deg, var(--amarillo), rgba(242, 183, 5, 0.15));
}
.cifra-t {
  font-size: 0.95rem; line-height: 1.45;
  color: rgba(255, 255, 255, 0.82);
  max-width: 20ch;
}
.cifras .link-flecha { margin-top: clamp(34px, 4vw, 52px); }

/* ══════════════════ TARJETAS DE SERVICIO ══════════════════ */
/* La foto va arriba y el texto abajo, no encima. Antes el texto iba sobre
   la imagen y hacía falta un velo casi opaco para que se leyera, con lo
   cual la fotografía —que es lo que tienen para mostrar— no se veía. */
.serv-grid {
  /* Fijo en 3 y no auto-fit: con auto-fit una pantalla ancha daba cuatro
     tarjetas arriba y dos sueltas abajo. */
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 26px);
}
@media (max-width: 980px) { .serv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .serv-grid { grid-template-columns: 1fr; } }
.serv {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color 0.3s var(--ez), box-shadow 0.35s var(--ez), transform 0.35s var(--ez);
}
.serv:hover {
  border-color: var(--azul-100);
  box-shadow: var(--sombra-md);
  transform: translateY(-4px);
}

.serv-foto {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--azul-900);
}
.serv-foto img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s var(--ez);
}
.serv:hover .serv-foto img { transform: scale(1.05); }

/* Solo un velo arriba, donde va el número: el resto de la foto queda limpio */
.serv-foto::before {
  content: "";
  position: absolute; inset: 0 0 auto; height: 46%;
  background: linear-gradient(180deg, rgba(0, 30, 56, 0.5), rgba(0, 30, 56, 0));
  pointer-events: none;
}
.serv-num {
  position: absolute; top: 16px; left: 18px;
  font-family: var(--font-t); font-weight: 800;
  font-size: 1.5rem; line-height: 1;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.92);
}

.serv-cuerpo {
  display: flex; flex-direction: column;
  flex: 1;
  padding: clamp(22px, 2.4vw, 30px);
  color: inherit;
}
.serv h3 {
  font-size: clamp(1.14rem, 1.6vw, 1.34rem);
  line-height: 1.2;
  color: var(--azul-900);
  margin-bottom: 10px;
}
.serv p {
  color: var(--tx-suave);
  font-size: 0.94rem; line-height: 1.55;
}
.serv-lista { margin-top: 16px; display: grid; gap: 7px; }
.serv-lista li {
  position: relative; padding-left: 18px;
  font-size: 0.88rem; color: var(--tx-suave);
}
.serv-lista li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--verde-claro);
}

/* El pie se pega abajo para que todas las tarjetas cierren parejo */
.serv-ir {
  margin-top: auto; padding-top: 18px;
  font-size: 0.86rem; font-weight: 600;
  color: var(--azul-700);
  display: inline-flex; align-items: center; gap: 8px;
  transition: gap 0.25s var(--ez);
}
.serv-ir:empty { display: none; }
.serv:hover .serv-ir { gap: 13px; }

/* ══════════════════ OBRA EJECUTADA ══════════════════ */
/* La obra con fotografía propia va destacada; el resto en un índice sin
   imagen. Antes ocho de nueve proyectos mostraban la misma planta solar,
   con lo cual la foto contradecía el título en vez de respaldarlo. */
.obras { display: grid; gap: clamp(30px, 3.6vw, 52px); }

.obra-dest {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(26px, 3.4vw, 54px);
  align-items: center;
}
.obra-dest-fotos { display: grid; gap: 10px; }
/* Miniaturas de las otras fotos de la misma obra */
.obra-dest-mas {
  /* Una columna por foto: con auto-fit quedaban pistas vacías de sobra. */
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 10px;
}
.obra-dest-mas a {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--azul-900);
}
.obra-dest-mas img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s var(--ez), opacity 0.3s var(--ez);
  opacity: 0.86;
}
.obra-dest-mas a:hover img { transform: scale(1.06); opacity: 1; }

.obra-dest-foto {
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--azul-900);
}
.obra-dest-foto img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.8s var(--ez);
}
.obra-dest:hover .obra-dest-foto img { transform: scale(1.04); }
.obra-dest-txt h3 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.14;
  color: var(--azul-900);
  margin-bottom: 14px;
}
.obra-dest-txt p { color: var(--tx-suave); font-size: 1.02rem; max-width: 46ch; }

.obra-cat {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--verde-hondo);
  margin-bottom: 12px;
}
.obra-cat::before {
  content: ""; width: 20px; height: 2px; border-radius: 2px; background: var(--verde);
}
.obra-dato {
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--linea);
  display: flex; align-items: baseline; gap: 10px;
}
.obra-dato dt {
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--azul-700);
}
.obra-dato dd { color: var(--tx-suave); font-size: 0.98rem; }
.obra-dest-txt .link-flecha { margin-top: 20px; }

/* ── El resto de la obra: la encabeza el logo del cliente ── */
/* No hay fotografía de estos proyectos, pero sí el logo de la empresa
   para la que se hizo la obra. Eso sí corresponde, y respalda más que
   una foto genérica. */
/* Cada ficha lleva su propio borde en vez de dibujar las líneas con el
   hueco de la rejilla: así una fila incompleta deja espacio, no un
   recuadro gris vacío. */
.obra-rejilla {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
.obra {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  overflow: hidden;
  padding: clamp(22px, 2.4vw, 32px);
  transition: background 0.35s var(--ez), border-color 0.35s var(--ez),
              box-shadow 0.35s var(--ez), transform 0.35s var(--ez);
}
.obra:hover {
  border-color: var(--azul-100);
  box-shadow: var(--sombra-md);
  transform: translateY(-4px);
}

/* Cuando el proyecto ya tiene su fotografía, encabeza la tarjeta */
.obra--foto { padding: 0; overflow: hidden; }
.obra--foto .obra-cuerpo { padding: clamp(20px, 2.2vw, 28px); }
.obra-foto {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--azul-900);
}
/* Cuántas fotos tiene la obra, para que se sepa que hay más */
.obra-cuenta {
  position: absolute; right: 12px; bottom: 12px;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(0, 26, 50, 0.78);
  color: #fff; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.obra-foto img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s var(--ez);
}
.obra--foto:hover .obra-foto img { transform: scale(1.05); }



/* El logo va en un encabezado de la misma proporción que la foto: si no,
   una tarjeta con foto estiraba la fila y dejaba a las vecinas con 200px
   de hueco abajo. */
.obra-marca {
  aspect-ratio: 16 / 10;
  display: grid; place-items: center;
  padding: clamp(20px, 2.4vw, 34px);
  margin: calc(clamp(22px, 2.4vw, 32px) * -1) calc(clamp(22px, 2.4vw, 32px) * -1) 0;
  background: var(--azul-50);
  border-bottom: 1px solid var(--linea);
}
.obra-marca img {
  max-width: 78%;
  max-height: calc(var(--logo-h, 40) * 1.15px);
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.68;
  transition: filter 0.4s var(--ez), opacity 0.4s var(--ez), transform 0.4s var(--ez);
}
.obra:hover .obra-marca img { filter: grayscale(0); opacity: 1; transform: scale(1.04); }
/* Marca neutra para la obra sin logo de cliente */
.obra-simbolo {
  width: 40px; height: 40px;
  fill: none; stroke: var(--azul-700); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.45;
  transition: opacity 0.4s var(--ez), transform 0.4s var(--ez);
}
.obra:hover .obra-simbolo { opacity: 0.8; transform: scale(1.06); }

.obra-cuerpo { display: flex; flex-direction: column; flex: 1; padding-top: 20px; }
.obra--foto .obra-cuerpo { padding-top: 0; }
.obra h3 {
  font-size: clamp(1.02rem, 1.4vw, 1.16rem);
  line-height: 1.24;
  color: var(--azul-900);
  margin-bottom: 8px;
}
.obra p { color: var(--tx-suave); font-size: 0.9rem; line-height: 1.5; }
.obra-lugar {
  margin-top: auto; padding-top: 16px;
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--azul-700);
}

/* ══════════════════ MAPA DE PRESENCIA ══════════════════ */
/* Era el único fondo plano del sitio: el hero, la franja de cifras y el
   cierre ya llevan degradado. Se le pone uno, más la rejilla técnica que
   usa el hero y un resplandor detrás del mapa para que no flote. */
.mapa {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--azul-900);
}
.mapa-fondo {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 42%;
  transform: scale(1.05);
  transition: transform 2.4s var(--ez);
}
.mapa.visto .mapa-fondo { transform: scale(1); }
/* La foto ya es de noche; el velo solo la tiñe del azul de la marca y
   asienta el texto. Se deja translúcido para que las estrellas se vean. */
.mapa-velo {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(0, 28, 52, 0.74) 0%, rgba(0, 42, 78, 0.62) 46%, rgba(0, 20, 40, 0.88) 100%),
    linear-gradient(90deg, rgba(0, 26, 50, 0.5), rgba(0, 26, 50, 0) 62%);
}
/* Resplandor bajo el mapa: los departamentos en verde se ven encendidos */
.mapa::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(46% 58% at 27% 56%, rgba(124, 179, 66, 0.16), transparent 68%);
  pointer-events: none;
}

/* El mapa y la lista están enlazados: al señalar un departamento en
   cualquiera de los dos se resalta en el otro. Antes eran dos cosas
   sueltas al lado. */
.mapa-grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(30px, 4vw, 64px); align-items: center;
}
.mapa-caja { position: relative; }
.mapa-svg { width: 100%; height: auto; display: block; overflow: visible; }
.mapa-pie {
  display: block; margin-top: 14px;
  font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.64);
  transition: opacity 0.3s var(--ez);
}
.mapa:hover .mapa-pie { opacity: 0; }

.hn-dep {
  fill: rgba(255, 255, 255, 0.07);
  stroke: rgba(255, 255, 255, 0.22);
  stroke-width: 0.8;
  stroke-linejoin: round;
}
.hn-dep.activo {
  fill: rgba(124, 179, 66, 0.5);
  stroke: rgba(124, 179, 66, 0.85);
  stroke-width: 1;
  cursor: pointer;
  transition: fill 0.3s var(--ez), stroke 0.3s var(--ez);
}
/* Departamento señalado, venga del mapa o de la lista */
.hn-dep.activo:hover,
.hn-dep.activo.resaltado {
  fill: rgba(124, 179, 66, 0.92);
  stroke: #fff;
  stroke-width: 1.6;
}
.hn-pin {
  fill: #fff; stroke: var(--verde); stroke-width: 1.6;
  transform-box: fill-box; transform-origin: center;
  transition: r 0.3s var(--ez), stroke 0.3s var(--ez);
}
.hn-pin.resaltado { stroke: var(--amarillo); stroke-width: 2.6; }

/* ── Lista de departamentos ── */
.dep-total {
  display: flex; gap: clamp(20px, 3vw, 40px);
  padding-bottom: 20px; margin-bottom: 6px;
  border-bottom: 1px solid var(--linea-oscura);
  color: var(--tx-claro-suave); font-size: 0.92rem;
}
.dep-total b {
  font-family: var(--font-t); font-weight: 800;
  font-size: 1.9rem; color: #fff;
  margin-right: 8px;
  font-variant-numeric: tabular-nums;
}

.dep-lista { display: grid; gap: 0; }
.dep-fila { border-bottom: 1px solid var(--linea-oscura); }
.dep-item {
  display: flex; align-items: baseline; gap: 16px;
  width: 100%; text-align: left;
  padding: 14px 12px 14px 0;
  background: none; border: 0;
  font: inherit; cursor: pointer;
  border-radius: 6px;
  transition: background 0.3s var(--ez), padding-left 0.3s var(--ez);
}
.dep-ciu { flex: 1; }
/* Cuántas obras hay en ese departamento */
.dep-cuenta {
  flex: none;
  min-width: 26px; height: 26px; border-radius: 8px;
  display: inline-grid; place-items: center;
  font-size: 0.8rem; font-weight: 700;
  color: var(--verde-claro);
  background: rgba(124, 179, 66, 0.16);
  transition: background 0.3s var(--ez), color 0.3s var(--ez), transform 0.3s var(--ez);
}
.dep-item[aria-expanded="true"] .dep-cuenta,
.dep-item:hover .dep-cuenta { background: var(--verde-claro); color: var(--azul-900); }
.dep-item[aria-expanded="true"] .dep-cuenta { transform: rotate(-8deg); }

/* La obra de ese departamento, al abrirlo */
.dep-obras {
  display: grid; gap: 2px;
  padding: 2px 0 16px 14px;
}
.dep-obras[hidden] { display: none; }
.dep-obras a {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  border-left: 2px solid rgba(124, 179, 66, 0.4);
  color: #fff; font-size: 0.93rem; font-weight: 600;
  transition: background 0.25s var(--ez), border-color 0.25s var(--ez), padding-left 0.25s var(--ez);
}
.dep-obras a span {
  display: block;
  font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--tx-claro-suave);
  margin-top: 3px;
}
.dep-obras a:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--verde-claro);
  padding-left: 16px;
}
.dep-item {
  position: relative;
}
/* La señal de resaltado la da una barra verde a la izquierda, no el color
   del texto: el verde claro sobre la parte más clara del gradiente se
   quedaba en 3.5:1, y en blanco el nombre siempre se lee. */
.dep-item::before {
  content: "";
  position: absolute; left: 0; top: 10px; bottom: 10px;
  width: 3px; border-radius: 2px;
  background: var(--verde-claro);
  transform: scaleY(0); transform-origin: center;
  transition: transform 0.3s var(--ez);
}
.dep-item:hover,
.dep-item.resaltado {
  background: rgba(255, 255, 255, 0.08);
  padding-left: 14px;
}
.dep-item:hover::before,
.dep-item.resaltado::before { transform: scaleY(1); }
.dep-nom { font-weight: 600; color: #fff; font-size: 1rem; }
.dep-ciu { color: var(--tx-claro-suave); font-size: 0.88rem; text-align: right; }


/* ── Entrada: los departamentos y los pines aparecen uno tras otro ── */
@media (prefers-reduced-motion: no-preference) {
  html.js .mapa .hn-dep.activo { opacity: 0; }
  html.js .mapa.visto .hn-dep.activo {
    opacity: 1;
    transition: opacity 0.55s var(--ez) calc(var(--d, 0) * 110ms),
                fill 0.3s var(--ez), stroke 0.3s var(--ez);
  }
  html.js .mapa .hn-pin { opacity: 0; transform: scale(0.2); }
  html.js .mapa.visto .hn-pin {
    opacity: 1; transform: scale(1);
    transition: opacity 0.4s var(--ez) calc(var(--d, 0) * 110ms + 380ms),
                transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--d, 0) * 110ms + 380ms),
                stroke 0.3s var(--ez);
  }
}

/* ══════════════════ QUIÉNES SOMOS ══════════════════ */
/* Eran dos columnas de texto y nada más. La foto le da una cara y el
   año de fundación, encima de ella, ancla la antigüedad. */
.quienes-in {
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(32px, 4.4vw, 72px);
  align-items: center;
}
.quienes-foto {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--azul-900);
}
.quienes-foto img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.8s var(--ez);
}
.quienes-foto:hover img { transform: scale(1.04); }
.quienes-foto figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(20px, 2.4vw, 30px);
  display: flex; align-items: baseline; gap: 12px;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(0, 26, 50, 0.86));
}
.quienes-foto b {
  font-family: var(--font-t); font-weight: 800;
  font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.quienes-foto span {
  font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}
@media (max-width: 940px) {
  .quienes-in { grid-template-columns: 1fr; gap: 28px; }
  .quienes-foto { aspect-ratio: 16 / 10; }
}

/* ══════════════════ EQUIPO ══════════════════ */
/* Son cinco: en tres columnas bajan 3 y 2. Con auto-fit la pantalla
   ancha ponía cuatro arriba y dejaba una sola abajo. */
.equipo-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
@media (max-width: 940px) { .equipo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .equipo-grid { grid-template-columns: 1fr; } }
.persona {
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  padding: 28px;
  border-left: 3px solid var(--verde);
  transition: box-shadow 0.25s var(--ez), transform 0.25s var(--ez);
}
.persona:hover { box-shadow: var(--sombra-md); transform: translateY(-2px); }
.persona-rol {
  font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--verde); margin-bottom: 9px; display: block;
}
.persona h3 { font-size: 1.08rem; margin-bottom: 5px; }
.persona-tit { font-size: 0.9rem; color: var(--azul-700); font-weight: 600; margin-bottom: 10px; }
.persona p { font-size: 0.9rem; color: var(--tx-suave); }

/* ══════════════════ VALORES ══════════════════ */
/* Tres columnas fijas: son seis valores, así bajan 3 y 3. Con auto-fit
   una pantalla ancha metía cuatro arriba y dejaba dos sueltas abajo. */
.val-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
@media (max-width: 940px) { .val-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .val-grid { grid-template-columns: 1fr; } }
.val-item {
  display: flex; gap: 16px;
  padding: clamp(20px, 2.2vw, 28px);
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  transition: border-color 0.3s var(--ez), box-shadow 0.35s var(--ez), transform 0.35s var(--ez);
}
.val-item:hover {
  border-color: var(--azul-100);
  box-shadow: var(--sombra-md);
  transform: translateY(-3px);
}
.val-n {
  font-family: var(--font-t); font-weight: 800;
  font-size: 1rem; color: #fff;
  flex: none;
  width: 42px; height: 42px; border-radius: 12px;
  background: linear-gradient(135deg, var(--verde) 0%, var(--verde-hondo) 100%);
  display: grid; place-items: center;
  transition: transform 0.35s var(--ez);
}
.val-item:hover .val-n { transform: scale(1.08) rotate(-4deg); }
.val-item h3 { font-size: 1.05rem; margin-bottom: 6px; }
.val-item p { color: var(--tx-suave); font-size: 0.94rem; }

/* ══════════════════ PROCESO ══════════════════ */
/* ── El proceso, en franja oscura ── */
/* En gris claro quedaba entre dos secciones blancas y no pesaba nada.
   En oscuro le da un respiro a la página y los números pueden crecer. */
.proceso {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(158deg, #00223E 0%, var(--azul-900) 48%, #004777 100%);
  color: #fff;
}
.proceso::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(100% 80% at 12% 40%, #000 10%, transparent 74%);
  mask-image: radial-gradient(100% 80% at 12% 40%, #000 10%, transparent 74%);
  pointer-events: none;
}

/* Los cuatro pasos son un proceso, no cuatro columnas sueltas: un hilo
   los encadena y se dibuja de izquierda a derecha al entrar en pantalla. */
.pasos {
  position: relative;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 40px);
  padding-top: 34px;
}
.pasos-hilo {
  position: absolute; top: 7px; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--verde-claro) 0%, var(--amarillo) 58%, rgba(242, 183, 5, 0.2) 100%);
  transform: scaleX(0); transform-origin: left;
}
.paso { position: relative; }
.paso-nodo {
  position: absolute; top: -34px; left: 0;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--azul-900);
  border: 3px solid var(--verde-claro);
  transform: scale(0);
  z-index: 1;
}
.paso:hover .paso-nodo { background: var(--verde-claro); box-shadow: 0 0 0 6px rgba(124, 179, 66, 0.18); }
.paso-n {
  display: block;
  font-family: var(--font-t); font-weight: 800;
  font-size: 1.5rem; line-height: 1;
  font-size: 2.6rem;
  color: var(--verde-claro);
  letter-spacing: -0.03em;
  margin-bottom: 12px;
  transition: color 0.3s var(--ez);
}
.paso:hover .paso-n { color: var(--amarillo); }
.paso h3 { font-size: 1.16rem; margin-bottom: 8px; color: #fff; }
.paso p { color: rgba(255, 255, 255, 0.78); font-size: 0.93rem; line-height: 1.55; }

@media (prefers-reduced-motion: no-preference) {
  html.js .pasos.visto .pasos-hilo {
    transform: scaleX(1);
    transition: transform 1.3s var(--ez);
  }
  @media (max-width: 620px) {
    html.js .pasos.visto .pasos-hilo { transform: scaleY(1); }
  }
  html.js .pasos.visto .paso-nodo {
    transform: scale(1);
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--d, 0) * 260ms + 180ms),
                background 0.3s var(--ez);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pasos-hilo { transform: scaleX(1); }
  .paso-nodo { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) and (max-width: 620px) {
  .pasos-hilo { transform: scaleY(1); }
}

/* ══════════════════ CLIENTES — carrusel de logos ══════════════════ */
.marcas {
  position: relative;
  margin-top: 42px;
  overflow: hidden;
  border-block: 1px solid var(--linea);
  background: #fff;
  --marcas-vel: 54s;
}
/* Los logos se desvanecen en los bordes en vez de cortarse en seco */
.marcas::before,
.marcas::after {
  content: ""; position: absolute; top: 0; bottom: 0; z-index: 2;
  width: clamp(48px, 9vw, 130px); pointer-events: none;
}
.marcas::before { left: 0;  background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0)); }
.marcas::after  { right: 0; background: linear-gradient(270deg, #fff, rgba(255, 255, 255, 0)); }

.marcas-riel {
  display: flex; width: max-content;
  animation: marcasCorre var(--marcas-vel) linear infinite;
}
.marcas:hover .marcas-riel { animation-play-state: paused; }
@keyframes marcasCorre { to { transform: translateX(-33.3333%); } }

.marcas-set { display: flex; align-items: center; }

.marca {
  flex: none;
  width: clamp(158px, 17vw, 216px);
  height: 108px;
  display: grid; place-items: center;
  padding-inline: 20px;
  border-right: 1px solid var(--linea);
}
.marca img {
  max-width: 100%; max-height: calc(var(--logo-h, 40) * 1.32px);
  width: auto; height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter 0.35s var(--ez), opacity 0.35s var(--ez), transform 0.35s var(--ez);
}
.marca:hover img { filter: grayscale(0); opacity: 1; transform: scale(1.05); }

/* Un logo cuadrado topado a 54px se ve mucho más chico que uno alargado,
   así que a esos se les deja más alto para que el muro quede parejo. */
/* ── El mismo riel, como franja azul que cierra el hero ── */
/* Acá los logos entran ya convertidos a blanco desde build.py, no con un
   filtro: invertir por CSS aplasta a los que tienen contraste interno. */
.marcas.marcas--franja {
  flex: 1 1 auto; min-width: 0;
  margin-top: 0;
  background: transparent;
  border-block: 0;
  --marcas-vel: 44s;
}
.marcas--franja::before,
.marcas--franja::after { display: none; }
.marcas--franja {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.marcas--franja .marca {
  width: clamp(136px, 14vw, 182px);
  height: 84px;
  border-right: 1px solid rgba(255, 255, 255, 0.10);
}
.marcas--franja .marca {
  position: relative;
}
.marcas--franja .marca img {
  max-height: calc(var(--logo-h, 40) * 1px);
  filter: none;
  opacity: 0.78;
}

/* Al pasar el mouse (o al tocar) el logo aparece en sus colores.
   La imagen a color se pide recién cuando el puntero entra a la franja:
   así la portada no arrastra 150 KB que la mayoría no va a llegar a ver. */
.marcas--franja .marca::after {
  content: "";
  position: absolute; inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto calc(var(--logo-h, 40) * 1px);
  opacity: 0;
  transition: opacity 0.3s var(--ez), transform 0.35s var(--ez);
  pointer-events: none;
}
.marcas--franja:hover .marca::after,
.marcas--franja .marca:active::after,
.marcas--franja .marca.tocada::after { background-image: var(--logo-color); }

.marcas--franja .marca:hover::after,
.marcas--franja .marca:active::after,
.marcas--franja .marca.tocada::after { opacity: 1; transform: scale(1.06); }
.marcas--franja .marca:hover img,
.marcas--franja .marca:active img,
.marcas--franja .marca.tocada img { opacity: 0; }
.marcas--franja .marca--texto span { color: rgba(255, 255, 255, 0.62); font-size: 0.8rem; }
.marcas--franja .marca--texto:hover span { color: #fff; }

/* Mientras no llegue el logo, el nombre se muestra como marca denominativa */
.marca--texto span {
  font-family: var(--font-t); font-weight: 700;
  font-size: 0.92rem; line-height: 1.3;
  letter-spacing: 0.01em; text-align: center;
  color: #8496A8;
  transition: color 0.35s var(--ez);
}
.marca:hover .marca--texto span,
.marca--texto:hover span { color: var(--azul-800); }

@media (prefers-reduced-motion: reduce) {
  .marcas-riel { animation: none; }
  .marca img { filter: none; opacity: 1; }
}

/* ══════════════════ GALERÍA DEL PROYECTO DESTACADO ══════════════════ */
/* Mosaico: la primera ocupa cuatro celdas y las otras cuatro se acomodan
   al costado. Sin esto las fotos salían una debajo de otra a todo lo
   ancho de la columna. */
.gal {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: clamp(10px, 1.2vw, 16px);
}
.gal a {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--azul-900);
}
.gal a:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.gal img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s var(--ez);
}
.gal a:hover img { transform: scale(1.05); }
/* Señal de que la foto se abre en grande */
.gal a::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0, 26, 50, 0.5));
  opacity: 0;
  transition: opacity 0.35s var(--ez);
}
.gal a:hover::after { opacity: 1; }

/* ══════════════════ PÁGINA DE CONTACTO ══════════════════ */
/* Los datos usan las mismas tarjetas del cierre: cada uno es tocable y
   la columna deja de ser una lista plana al lado del formulario. */
.contacto-datos .h-sec { margin-bottom: 14px; }
.contacto-datos .lead { margin-bottom: clamp(26px, 3vw, 34px); }
.vias-col { display: grid; gap: clamp(10px, 1.2vw, 14px); }
.contacto-lugar {
  margin-top: 22px;
  font-size: 0.86rem; color: var(--tx-suave);
}
/* En una columna angosta el correo es largo: se deja partir */
.vias-col .via-val { font-size: 0.98rem; word-break: break-word; }

/* ── Señal al llegar a un proyecto desde el mapa o desde un logo ── */
/* Sin esto uno cae en la página y no sabe cuál de las fichas es la que
   venía a ver. El aviso se apaga solo a los 2.6s. */
.recien-llegado {
  animation: recienLlegado 2.6s var(--ez);
}
@keyframes recienLlegado {
  0%, 70% { box-shadow: 0 0 0 3px var(--verde-claro), var(--sombra-md); }
  100%    { box-shadow: 0 0 0 0 rgba(124, 179, 66, 0), 0 0 0 rgba(0,0,0,0); }
}
@media (prefers-reduced-motion: reduce) { .recien-llegado { animation: none; outline: 3px solid var(--verde); } }
/* Los anclajes no quedan bajo el nav */
.obra, .obra-dest, .serv { scroll-margin-top: calc(var(--nav-h) + var(--barra-h) + 24px); }

/* El logo que lleva a una obra se ve tocable */
.marca--liga { cursor: pointer; }

/* ══════════════════ VISOR DE FOTOS ══════════════════ */
/* Las fotos abrían en otra pestaña y sacaban a la gente del sitio. */
.visor {
  position: fixed; inset: 0; z-index: 200;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: clamp(6px, 2vw, 24px);
  padding: clamp(14px, 4vw, 48px);
  background: rgba(0, 18, 34, 0.94);
  backdrop-filter: blur(3px);
  animation: visorEntra 0.25s var(--ez);
}
.visor[hidden] { display: none; }
@keyframes visorEntra { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .visor { animation: none; } }

.visor-caja {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; min-width: 0; max-height: 100%;
}
.visor-caja img {
  max-width: 100%; max-height: calc(100vh - clamp(110px, 16vw, 190px));
  width: auto; height: auto;
  object-fit: contain;
  border-radius: var(--r);
  background: var(--azul-900);
}
.visor-caja figcaption {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem; text-align: center;
  max-width: 62ch;
}
.visor-caja figcaption[hidden] { display: none; }

.visor-cerrar, .visor-ir {
  flex: none;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  color: #fff; font-size: 1.6rem; line-height: 1;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background 0.25s var(--ez), border-color 0.25s var(--ez), transform 0.25s var(--ez);
}
.visor-cerrar:hover, .visor-ir:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.06);
}
.visor-cerrar {
  position: absolute; top: clamp(12px, 3vw, 26px); right: clamp(12px, 3vw, 26px);
  font-size: 1.9rem;
}
.visor-ir[hidden] { visibility: hidden; display: grid; }

/* En pantalla angosta las flechas a los lados dejaban la foto en 238px.
   Se bajan debajo y la imagen se queda con todo el ancho. */
@media (max-width: 620px) {
  .visor {
    display: flex; flex-direction: column; justify-content: center;
    gap: 18px;
  }
  .visor-caja { order: 1; }
  .visor-ir { order: 2; }
  .visor-ir--antes { align-self: center; }
  .visor-ir--luego { align-self: center; }
  .visor-caja img { max-height: calc(100vh - 210px); }
  /* Las dos flechas en una misma fila */
  .visor-ir { position: absolute; bottom: clamp(16px, 5vw, 30px); }
  .visor-ir--antes { left: 22%; }
  .visor-ir--luego { right: 22%; }
}

/* ══════════════════ CIERRE ══════════════════ */
/* Va en claro a propósito: queda entre el mapa y el pie, los dos oscuros,
   y en azul se perdía entre ellos. En blanco corta y el cierre se nota. */
.cierre {
  background: #fff;
  padding-block: clamp(58px, 6.6vw, 96px);
  border-top: 1px solid var(--linea);
  text-align: center;
}
.cierre-head { max-width: 640px; margin: 0 auto clamp(34px, 4vw, 50px); }
.cierre h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.7rem);
  line-height: 1.1;
  color: var(--azul-900);
  margin-bottom: 14px;
}
.cierre p { color: var(--tx-suave); font-size: 1.06rem; }

/* Tres vías en fila, del mismo peso: llamar, WhatsApp y cotización */
.cierre-vias {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
  max-width: 940px; margin-inline: auto;
}
.via {
  display: flex; align-items: center; gap: 16px;
  padding: 20px clamp(18px, 2vw, 26px);
  text-align: left;
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  background: #fff;
  transition: border-color 0.3s var(--ez), box-shadow 0.35s var(--ez),
              transform 0.35s var(--ez), background 0.3s var(--ez);
}
.via:hover {
  border-color: var(--azul-100);
  box-shadow: var(--sombra-md);
  transform: translateY(-3px);
}
.via-ico {
  flex: none;
  width: 44px; height: 44px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--azul-50);
  transition: background 0.3s var(--ez);
}
.via-ico svg {
  width: 21px; height: 21px;
  fill: none; stroke: var(--azul-700); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.via-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.via-rot {
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--tx-suave);
}
.via-val {
  font-family: var(--font-t); font-weight: 700;
  font-size: 1.02rem; color: var(--azul-900);
  overflow-wrap: anywhere;
}

/* La cotización es la acción principal */
.via--fuerte {
  background-image: linear-gradient(135deg, #4A8419 0%, #3E7A17 52%, #2F5F0E 100%);
  background-size: 200% 200%;
  background-position: 0% 0%;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(47, 95, 14, 0.28);
  transition: background-position 0.45s var(--ez), box-shadow 0.35s var(--ez), transform 0.35s var(--ez);
}
.via--fuerte:hover { background-position: 100% 100%; border-color: transparent; }
.via--fuerte .via-ico { background: rgba(255, 255, 255, 0.18); }
.via--fuerte .via-ico svg { stroke: #fff; }
/* Blanco pleno, no translúcido: a 12px sobre el verde, 0.78 daba 3.4:1.
   La jerarquía con el valor la marcan el tamaño y el espaciado. */
.via--fuerte .via-rot { color: #fff; }
.via--fuerte .via-val { color: #fff; }

/* ══════════════════ CONTACTO ══════════════════ */
.contacto-grid {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(30px, 4vw, 60px);
}
.dato-contacto { padding: 18px 0; border-bottom: 1px solid var(--linea); }
.dato-contacto:first-child { padding-top: 0; }
.dato-contacto dt {
  font-size: 0.76rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--verde); margin-bottom: 6px;
}
.dato-contacto dd { font-size: 1.02rem; font-weight: 500; }
.dato-contacto a:hover { color: var(--azul-700); }

.form {
  background: var(--gris-50);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 36px);
}
.form-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.campo { display: grid; gap: 7px; margin-bottom: 16px; }
.campo label { font-size: 0.86rem; font-weight: 600; color: var(--azul-900); }
.campo input, .campo select, .campo textarea {
  width: 100%;
  background: #fff;
  border: 1.5px solid var(--gris-200);
  border-radius: 7px;
  padding: 12px 14px;
  font: inherit; font-size: 0.96rem;
  color: var(--tx);
  transition: border-color 0.2s;
}
.campo textarea { min-height: 110px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--azul-600);
}
.campo select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8'%3E%3Cpath d='M1 1l5.5 5.5L12 1' fill='none' stroke='%2316406F' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.form-error { color: #C0392B; font-size: 0.88rem; margin-bottom: 12px; }
.form-nota { font-size: 0.84rem; color: var(--tx-suave); margin-top: 12px; }

/* Campo trampa contra robots: fuera de la vista y del foco, pero no con
   display:none, que algunos robots detectan y saltan. */
.campo-trampa {
  position: absolute !important;
  left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

/* Mientras se envía */
.form.enviando button[type="submit"] { opacity: 0.7; cursor: progress; }

/* Aviso cuando el correo no salió: ofrece WhatsApp para no perder la solicitud */
.form-error .btn-wa-plan {
  display: inline-flex; margin-top: 10px;
  padding: 9px 16px; border-radius: 8px;
  background: #25D366; color: #fff; font-weight: 600; font-size: 0.9rem;
}

/* Confirmación de envío */
.form-listo {
  background: var(--gris-50);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  padding: clamp(32px, 4vw, 52px);
  text-align: center;
}
.form-listo[hidden] { display: none; }
.form-listo-ico {
  display: inline-grid; place-items: center;
  width: 58px; height: 58px; border-radius: 50%;
  background: linear-gradient(135deg, #4A8419, #2F5F0E);
  color: #fff; font-size: 1.7rem; font-weight: 700;
  margin-bottom: 18px;
}
.form-listo h2 { font-size: 1.4rem; margin-bottom: 8px; }
.form-listo p { color: var(--tx-suave); }

/* ══════════════════ FOOTER ══════════════════ */
/* El pie era el último fondo liso del sitio. Lleva el mismo degradado y
   rejilla que el resto de las franjas oscuras, más un filo verde arriba
   para que no arranque de golpe después del cierre en blanco. */
.footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(168deg, #002744 0%, var(--azul-900) 52%, #00426F 100%);
  color: #fff;
  padding-top: clamp(48px, 5.4vw, 72px);
}
.footer::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(90% 80% at 78% 20%, #000 8%, transparent 72%);
  mask-image: radial-gradient(90% 80% at 78% 20%, #000 8%, transparent 72%);
  pointer-events: none;
}
.footer-filo {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--verde) 0%, var(--verde-claro) 34%, var(--amarillo) 70%, rgba(242, 183, 5, 0.15) 100%);
}
.footer-grid {
  display: grid;
  /* Contacto va más ancha: el correo son 33 caracteres y en la medida
     anterior partía dejando la última letra sola en su renglón. */
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 0.82fr) minmax(0, 1.02fr) minmax(0, 1.5fr);
  gap: 34px;
  padding-bottom: 38px;
}
.footer-col { min-width: 0; }
.footer-col a, .footer-col p, .footer-col span { overflow-wrap: anywhere; }
.footer-logo img { height: 62px; width: auto; margin-bottom: 16px; }
.footer-col h4 {
  color: var(--verde-claro);
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 14px;
}
.footer-col a, .footer-col p, .footer-col span {
  display: block;
  color: var(--tx-claro-suave);
  font-size: 0.93rem;
  margin-bottom: 9px;
}
.footer-col a {
  width: fit-content;
  transition: color 0.25s var(--ez), padding-left 0.25s var(--ez);
}
.footer-col a:hover { color: #fff; padding-left: 7px; }
/* Filo que aparece a la izquierda del enlace señalado */
.footer-col a { position: relative; }
.footer-col a::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 4px; height: 1px; margin-top: -0.5px;
  background: var(--verde-claro);
  opacity: 0;
  transition: opacity 0.25s var(--ez);
}
.footer-col a:hover::before { opacity: 1; }
.footer-abajo {
  border-top: 1px solid var(--linea-oscura);
  padding-block: 20px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap;
  font-size: 0.85rem; color: var(--tx-claro-suave);
}
.footer-by { display: inline-flex; align-items: center; gap: 7px; transition: color 0.2s; }
.footer-by img { width: 18px; height: 18px; flex: none; }
.footer-by strong { color: #fff; font-weight: 600; }
.footer-by:hover strong { color: var(--verde-claro); }
@media (prefers-reduced-motion: no-preference) {
  /* El símbolo tiene cuatro puntas: un cuarto de vuelta lo deja igual */
  .footer-by img { transition: transform 0.6s var(--ez); }
  .footer-by:hover img { transform: rotate(90deg); }
}

/* WhatsApp flotante */
.wa {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  width: 54px; height: 54px; border-radius: 50%;
  background: #25D366;
  display: grid; place-items: center;
  box-shadow: 0 6px 20px rgba(11, 37, 69, 0.25);
  transition: transform 0.2s var(--ez);
}
.wa:hover { transform: scale(1.06); }
.wa svg { width: 28px; height: 28px; fill: #fff; }

/* ══════════════════ APARICIÓN AL ENTRAR EN PANTALLA ══════════════════ */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-ap] { opacity: 0; transform: translateY(18px); }
  html.js [data-ap].visible {
    opacity: 1; transform: none;
    transition: opacity 0.6s var(--ez), transform 0.7s var(--ez);
  }
  /* Los elementos de una misma fila entran uno tras otro en vez de todos
     de golpe. El orden se pasa con --d desde el HTML. */
  html.js [data-ap][style*="--d"].visible { transition-delay: calc(var(--d) * 85ms); }

  /* Filo que se dibuja bajo cada cifra */
  html.js .cifra-filo { transform: scaleX(0); transform-origin: left; }
  html.js [data-ap].visible .cifra-filo {
    transform: scaleX(1);
    transition: transform 0.8s var(--ez) calc(var(--d, 0) * 85ms + 260ms);
  }
}

/* ══════════════════ RESPONSIVE ══════════════════ */
@media (max-width: 1000px) {
  .barra-dato--correo { display: none; }
  .nav-links { display: none; }
  .nav-cta .btn { display: none; }
  .burger { display: block; }
  .mapa-grid { grid-template-columns: 1fr; }
  .contacto-grid { grid-template-columns: 1fr; }
  .pasos { grid-template-columns: repeat(2, 1fr); }
  .gal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gal a:first-child { grid-row: auto; grid-column: span 2; aspect-ratio: 16 / 9; }
}

@media (max-width: 980px) {
  .cifras-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; }
  .cifra:nth-child(3) { padding-left: 0; }
  .cifra:nth-child(3)::before { display: none; }
  .obra-dest { grid-template-columns: 1fr; gap: 24px; }
  .obra-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cierre-vias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .via--fuerte { grid-column: 1 / -1; }
  .obra-dest-foto { aspect-ratio: 16 / 10; }
  .cifras-texto .lead { max-width: none; }
}

@media (max-width: 900px) {
  /* Una sola columna: los paneles se apilan en filas propias */
  .hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    min-height: auto;
  }
  .hero-a, .hero-b, .hero-tira { grid-column: 1; grid-row: auto; }
  .tira-rotulo { display: none; }
  .marcas.marcas--franja { --marcas-vel: 32s; }
  .marcas--franja .marca { width: 134px; height: 74px; }
  .marcas--franja .marca img { max-height: calc(var(--logo-h, 40) * 0.84px); }
  .marcas--franja .marca::after { background-size: auto calc(var(--logo-h, 40) * 0.84px); }
  .hero-a { min-height: clamp(220px, 36vh, 320px); }
  .hero-pie { left: 18px; bottom: 16px; }
  .hero-a::after { background: linear-gradient(180deg, transparent 60%, rgba(0, 40, 74, 0.5)); }
  .hero-bullets { left: auto; right: 18px; bottom: 14px; }
  .hero-in { padding-block: clamp(34px, 7vw, 54px); }
  .hero-marca { right: -14%; bottom: -8%; width: 74%; }
  .hero-titulo-sup { letter-spacing: 0.22em; text-indent: 0.22em; }
}

@media (max-width: 620px) {
  :root { --nav-h: 66px; --barra-h: 38px; }
  .marca { width: 148px; height: 92px; padding-inline: 16px; }
  .marca img { max-height: calc(var(--logo-h, 40) * 1.05px); }
  .marca--texto span { font-size: 0.82rem; }
  .marcas { --marcas-vel: 38s; margin-top: 30px; }
  .barra-lema { display: none; }
  .barra-top-in { justify-content: center; }
  .barra-datos { gap: 20px; }
  .nav-logo img { height: 44px; }
  .hero { min-height: auto; }
  .hero-btns .btn { width: 100%; }
  .obra-rejilla { grid-template-columns: 1fr; }
  .obra-marca { height: 64px; margin-bottom: 16px; padding-bottom: 14px; }
  .cifra-n { font-size: 2.55rem; }
  .cifra-t { font-size: 0.86rem; }
  .cifra-filo { margin: 12px 0 10px; }
  /* Apilados, el hilo corre en vertical por la izquierda y los nodos se
     recuestan sobre él; horizontal quedaría suelto arriba de todo. */
  .pasos {
    grid-template-columns: 1fr;
    row-gap: 26px;
    padding-top: 0; padding-left: 32px;
  }
  .pasos-hilo {
    top: 6px; bottom: 6px; left: 7px; right: auto;
    width: 2px; height: auto;
    background: linear-gradient(180deg, var(--verde-claro) 0%, var(--amarillo) 58%, rgba(242, 183, 5, 0.2) 100%);
    transform: scaleY(0); transform-origin: top;
  }
  .paso-nodo { top: 4px; left: -32px; }
  .form-fila { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-logo { grid-column: 1 / -1; }
  .cierre-vias { grid-template-columns: 1fr; }
  .gal { grid-template-columns: 1fr; }
  .gal a:first-child { grid-column: auto; aspect-ratio: 4 / 3; }
}