/* ==========================================================================
   Geopilote — v4 "Sondeo"
   La página se recorre como un sondeo: cada sección es un tramo de pilote de
   4.5 m con su cota, el fondo se oscurece conforme se baja y el contacto es el
   estrato firme. Tipografía: Archivo (ancho variable) + Martian Mono para cotas.
   ========================================================================== */

:root {
  --green-deep: #1E4D34;
  --green-deeper: #163b28;
  --green: #2C6E49;
  --green-light: #3E9366;
  --green-bright: #5DBE8A;
  --bone: #F8F8F6;
  --bone-dim: #ECEAE3;
  --sage: #7D8782;
  --ink: #1F2320;
  --rig: #C8201E;            /* rojo real de la hincadora */
  --steel: #54595C;

  /* estratos (mismos colores que el modelo 3D) */
  --st-relleno: #D8CFBA;
  --st-arcilla: #B9AD95;
  --st-arena: #A7AB9C;
  --st-firme: #2C6E49;

  --f-display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --f-body: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'Martian Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --nav-h: 72px;
  --rail: 0px;
  --pad: clamp(20px, 4.2vw, 64px);
  --sy: clamp(88px, 10vw, 160px);
  --gap: clamp(28px, 4vw, 72px);
  --maxw: 1320px;

  --z-rail: 90;
  --z-nav: 100;
  --z-float: 150;
  --z-drawer: 190;
  --z-toggle: 200;
}
@media (min-width: 1180px) { :root { --rail: 76px; } }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--f-body);
  font-stretch: 100%;
  font-size: 17px;
  line-height: 1.62;
  color: var(--ink);
  background: #F1EEE6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body.menu-open { overflow: hidden; }
img, video, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
strong { font-weight: 650; }
::selection { background: var(--green); color: var(--bone); }
:focus-visible { outline: 2px solid var(--green-bright); outline-offset: 3px; }

.mono {
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 11px;
  font-weight: 450;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 999;
  background: var(--ink); color: var(--bone); padding: 10px 14px;
  font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- Botones: rectos, sin píldoras ---------- */
.btn {
  --bg: var(--green);
  --fg: var(--bone);
  position: relative;
  display: inline-flex; align-items: center; gap: 14px;
  padding: 17px 26px 16px;
  background: var(--bg); color: var(--fg);
  font-family: var(--f-body); font-stretch: 108%;
  font-size: 15px; font-weight: 650; letter-spacing: 0.01em;
  text-decoration: none; border: 0; border-radius: 3px; cursor: pointer;
  overflow: hidden; isolation: isolate;
  transition: color .35s var(--ease-out);
}
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--ink);
  transform: scaleY(0); transform-origin: 50% 100%;
  transition: transform .45s var(--ease-out);
}
.btn:hover::before { transform: scaleY(1); }
.btn .arr { display: inline-block; transition: transform .45s var(--ease-out); }
.btn:hover .arr { transform: translateY(3px); }
.btn:hover .arr-r { transform: translateX(4px); }
.btn-bone { --bg: var(--bone); --fg: var(--green-deep); }
.btn-bone::before { background: var(--ink); }
.btn-bone:hover { color: var(--bone); }
.link-arrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-stretch: 105%; font-size: 15px; text-decoration: none;
  padding: 16px 2px; border-bottom: 1.5px solid currentColor;
}
.link-arrow span { transition: transform .4s var(--ease-out); }
.link-arrow:hover span { transform: translateX(5px); }

/* ==========================================================================
   NAV
   ========================================================================== */
#nav {
  position: fixed; inset: 0 0 auto 0; height: var(--nav-h); z-index: var(--z-nav);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 var(--pad);
  color: var(--ink);
  transition: background-color .4s, color .4s, border-color .4s, transform .5s var(--ease-out);
  border-bottom: 1px solid transparent;
}
/* Fondo casi sólido en vez de desenfoque: el blur sobre el 3D obligaba a
   recomponer la barra en cada cuadro del scroll. */
#nav.scrolled {
  background: rgba(241, 238, 230, 0.97);
  border-bottom-color: rgba(31, 35, 32, 0.1);
}
html[data-theme="dark"] #nav { color: var(--bone); }
html[data-theme="dark"] #nav.scrolled {
  background: rgba(10, 28, 18, 0.96);
  border-bottom-color: rgba(248, 248, 246, 0.1);
}
#nav.hide { transform: translateY(-100%); }
.logo { display: flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; color: inherit; }
.logo .iso { width: 36px; height: 36px; object-fit: contain; }
.logo .iso-w { display: none; }
html[data-theme="dark"] .logo .iso-g, body.menu-open .logo .iso-g { display: none; }
html[data-theme="dark"] .logo .iso-w, body.menu-open .logo .iso-w { display: block; }
.logo-word {
  font-family: 'Bebas Neue', var(--f-display); font-size: 27px; letter-spacing: 0.1em;
  line-height: 1; padding-top: 3px;
}
.nav-links { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 28px); list-style: none; }
.nav-links a {
  position: relative; text-decoration: none; font-size: 14px; font-weight: 520;
  font-stretch: 102%; padding: 6px 0; opacity: .82; transition: opacity .25s;
}
.nav-links a:hover, .nav-links a.active { opacity: 1; }
.nav-links a:not(.nav-cta)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease-out);
}
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-cta {
  opacity: 1 !important; padding: 11px 18px !important; border-radius: 3px;
  background: var(--green); color: var(--bone); font-weight: 620 !important;
  transition: background-color .3s !important;
}
.nav-cta:hover { background: var(--ink); }
html[data-theme="dark"] .nav-cta:hover { background: var(--green-light); }
.nav-progress {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  background: var(--green-bright); transform: scaleX(0); transform-origin: left;
}
.nav-toggle {
  display: none; position: relative; z-index: var(--z-toggle);
  width: 46px; height: 46px; border: 0; background: none; cursor: pointer; color: inherit;
}
.nav-toggle span {
  position: absolute; left: 11px; right: 11px; height: 2px; background: currentColor;
  transition: transform .45s var(--ease-out), opacity .3s, top .45s var(--ease-out);
}
.nav-toggle span:nth-child(1) { top: 16px; }
.nav-toggle span:nth-child(2) { top: 22px; right: 18px; }
.nav-toggle span:nth-child(3) { top: 28px; }
.nav-toggle.open span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { top: 22px; transform: rotate(-45deg); }
.nav-toggle.open { color: var(--bone); }

.mobile-menu {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  background: #0C2317; color: var(--bone);
  padding: calc(var(--nav-h) + 24px) var(--pad) 32px;
  display: flex; flex-direction: column; justify-content: space-between;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .7s var(--ease-out), visibility 0s linear .7s;
  visibility: hidden;
}
.mobile-menu.open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .7s var(--ease-out), visibility 0s; }
body.menu-open #nav { z-index: calc(var(--z-drawer) + 5); background: transparent; border-bottom-color: transparent; color: var(--bone); transform: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.menu-open .nav-progress { opacity: 0; }
.mobile-menu ul { list-style: none; }
.mobile-menu li { border-top: 1px solid rgba(248, 248, 246, .12); overflow: hidden; }
.mobile-menu li a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 13px 0; text-decoration: none;
  font-family: var(--f-display); font-stretch: 118%; font-weight: 760;
  font-size: clamp(22px, 6.4vw, 34px); text-transform: uppercase; letter-spacing: -0.01em;
  transform: translateY(100%); transition: transform .7s var(--ease-out);
}
.mobile-menu.open li a { transform: none; }
.mobile-menu li:nth-child(2) a { transition-delay: .04s; }
.mobile-menu li:nth-child(3) a { transition-delay: .08s; }
.mobile-menu li:nth-child(4) a { transition-delay: .12s; }
.mobile-menu li:nth-child(5) a { transition-delay: .16s; }
.mobile-menu li:nth-child(6) a { transition-delay: .2s; }
.mobile-menu li:nth-child(7) a { transition-delay: .24s; }
.mobile-menu li:nth-child(8) a { transition-delay: .28s; }
.mobile-menu li a .mono { color: var(--green-bright); font-size: 10.5px; }
.mobile-menu .btn { width: 100%; justify-content: center; margin-top: 24px; }
.nav-backdrop { display: none; }

/* ==========================================================================
   RIEL DE SONDEO — columna fija: el scroll se lee como metros hincados
   ========================================================================== */
.sondeo { display: none; }
@media (min-width: 1180px) {
  .sondeo {
    display: block; position: fixed; z-index: var(--z-rail);
    left: 0; top: calc(var(--nav-h) + 28px); bottom: 28px; width: var(--rail);
    pointer-events: none; color: var(--ink);
    transition: color .4s;
  }
  html[data-theme="dark"] .sondeo { color: var(--bone); }
  .sd-col {
    position: absolute; left: calc(var(--pad) - 6px); top: 0; bottom: 0; width: 9px;
    display: flex; flex-direction: column;
    outline: 1px solid currentColor; outline-offset: 2px;
    opacity: .9;
  }
  .sd-band { flex: var(--h) 1 0; background: var(--c); }
  .sd-band + .sd-band { border-top: 1px solid rgba(31, 35, 32, .35); }
  .sd-pile {
    position: absolute; left: 2px; top: -14px; width: 5px; height: calc(100% + 14px);
    background: linear-gradient(90deg, #3a3e40, #7a8084 50%, #3a3e40);
    transform-origin: 50% 0; transform: scaleY(0.012);
  }
  .sd-tip {
    position: absolute; left: calc(var(--pad) + 14px); top: 0;
    display: flex; flex-direction: column; gap: 2px; white-space: nowrap;
    font-family: var(--f-mono); font-stretch: 87.5%; font-size: 10.5px; letter-spacing: .05em;
    will-change: transform;
  }
  .sd-tip b { font-weight: 600; font-size: 11.5px; }
  .sd-tip span { display: none; }
  .sd-tip::before {
    content: ''; position: absolute; left: -12px; top: 7px; width: 8px; height: 1px; background: currentColor;
  }
  .sd-ticks {
    position: absolute; left: calc(var(--pad) - 14px); top: 0; bottom: 0; width: 5px;
    background: repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px 15%);
    opacity: .35;
  }
}

/* ==========================================================================
   HERO — modelo 3D de estratos + copy
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  grid-template-rows: 1fr auto;
  padding-top: var(--nav-h);
  background:
    linear-gradient(rgba(31, 35, 32, .045) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(31, 35, 32, .045) 1px, transparent 1px) 0 0 / 56px 56px,
    #F1EEE6;
  overflow: hidden;
}
.hero-copy {
  position: relative; z-index: 3;
  align-self: center;
  padding: clamp(28px, 5vh, 64px) 0 clamp(28px, 5vh, 56px) calc(var(--rail) + var(--pad));
}
.hero-kicker {
  display: flex; align-items: center; gap: 10px; margin-bottom: 26px; color: #4B524D;
  text-wrap: balance;
}
.hero-kicker::before {
  content: ''; flex: none; width: 9px; height: 9px; background: var(--rig);
}
.hero h1 {
  font-family: var(--f-display);
  font-stretch: 112%;
  font-weight: 820;
  font-size: clamp(40px, 4.75vw, 84px);
  line-height: .9;
  letter-spacing: -0.028em;
  text-transform: uppercase;
  margin-bottom: 28px;
}
.hero h1 .line { display: block; overflow: hidden; padding-bottom: .04em; margin-bottom: -.04em; }
.hero h1 .li { display: block; white-space: nowrap; }
.hero h1 .accent { color: var(--green); }
.hero-sub {
  max-width: 34em; font-size: clamp(16px, 1.25vw, 18.5px); color: #3C433E; margin-bottom: 34px;
  text-wrap: pretty;
}
.hero-sub strong { color: var(--ink); }
.hero-ctas { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 30px; }
.hero-proof {
  display: inline-flex; align-items: center; gap: 16px; margin-top: 40px;
  text-decoration: none; color: inherit; max-width: 360px;
}
.hero-proof .thumb {
  position: relative; flex: none; width: 64px; aspect-ratio: 9 / 16; overflow: hidden;
  background: #cfc9bb; outline: 1px solid rgba(31, 35, 32, .25); outline-offset: 3px;
}
.hero-proof video { width: 100%; height: 100%; object-fit: cover; }
.hero-proof .t { display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.4; color: #3C433E; }
.hero-proof .t .mono { color: var(--ink); display: flex; align-items: center; gap: 8px; }
.hero-proof .t .mono::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--rig);
  animation: rec 1.6s steps(2, jump-none) infinite;
}
@keyframes rec { 50% { opacity: .2; } }
.hero-proof:hover .t span:last-child { text-decoration: underline; text-underline-offset: 3px; }

.hero-scene {
  position: relative; z-index: 1;
  grid-column: 2; grid-row: 1;
  margin-left: -2vw;
  min-height: 460px;
}
.hero-scene canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.scene-fallback {
  position: absolute; inset: 14% 10% 12% 16%; display: none;
  background: linear-gradient(180deg, var(--st-relleno) 0 15%, var(--st-arcilla) 15% 45%, var(--st-arena) 45% 80%, var(--st-firme) 80%);
  outline: 1px solid rgba(31, 35, 32, .3);
}
.hero-scene.no-webgl .scene-fallback { display: block; }
.hero-scene.no-webgl .scene-ui { display: none; }
.scene-ui { position: absolute; inset: 0; pointer-events: none; }
.s-label {
  position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 4px 6px 3px; background: rgba(248, 248, 246, .9); color: var(--ink);
  font-family: var(--f-mono); font-stretch: 87.5%; font-size: 9px; line-height: 1.25; letter-spacing: .04em;
  text-transform: uppercase; white-space: nowrap; border-radius: 2px;
  opacity: 0; transition: opacity .6s;
  will-change: transform;
}
.s-label b { font-weight: 600; font-size: 10px; }
.s-label.firme { background: var(--ink); color: var(--bone); }
.scene-ready .s-label { opacity: 1; }
.hud-wrap {
  position: absolute; right: var(--pad); top: clamp(16px, 4vh, 40px);
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  opacity: 0; transition: opacity .6s .2s;
}
.scene-ready .hud-wrap { opacity: 1; }
.hud {
  min-width: 206px; padding: 14px 16px 12px;
  background: rgba(31, 35, 32, .9); color: var(--bone);
  font-family: var(--f-mono); font-stretch: 87.5%; font-size: 10.5px; letter-spacing: .05em;
  text-transform: uppercase; border-radius: 2px;
}
/* Pausa del modelo y de la cinta: el movimiento que arranca solo debe poder detenerse. */
.hud-pause {
  pointer-events: auto; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 12px 8px; border: 1px solid rgba(31, 35, 32, .28); border-radius: 2px;
  background: rgba(248, 248, 246, .92); color: var(--ink);
  transition: background-color .25s, color .25s;
}
.hud-pause::before { content: ''; width: 8px; height: 9px; border: solid currentColor; border-width: 0 3px; }
.hud-pause[aria-pressed="true"]::before { width: 0; height: 0; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor; }
.hud-pause:hover { background: var(--ink); color: var(--bone); }
.hero.is-paused .ticker-track { animation-play-state: paused; }
.hud-h { display: flex; align-items: center; gap: 8px; color: var(--green-bright); margin-bottom: 8px; }
.hud-h::before { content: ''; width: 6px; height: 6px; background: var(--rig); }
.hud dl { display: grid; grid-template-columns: auto auto; gap: 3px 18px; }
.hud dt { opacity: .6; }
.hud dd { text-align: right; font-variant-numeric: tabular-nums; }
.hud-bar { margin-top: 10px; height: 3px; background: rgba(248, 248, 246, .15); }
.hud-bar i { display: block; height: 100%; width: 0; background: var(--green-bright); }
.scene-note {
  position: absolute; left: 4%; bottom: 16px; color: #5E655F;
}

.hero-ticker {
  grid-column: 1 / -1; grid-row: 2;
  position: relative; z-index: 3;
  background: var(--ink); color: var(--bone);
  overflow: hidden; white-space: nowrap;
  padding: 13px 0 12px;
}
.ticker-track { display: inline-flex; animation: ticker 48s linear infinite; }
.ticker-group { display: inline-flex; align-items: center; gap: 22px; padding-right: 22px; }
.ticker-group span { font-family: var(--f-mono); font-stretch: 87.5%; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; }
.ticker-group i { width: 6px; height: 6px; background: var(--green-bright); transform: rotate(45deg); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ==========================================================================
   TRAMOS (secciones)
   ========================================================================== */
.tramo {
  position: relative;
  padding: var(--sy) var(--pad) var(--sy) calc(var(--rail) + var(--pad));
  background: var(--bg, #F6F4EE);
  color: var(--fg, var(--ink));
  --muted: #535A55;
  --line: rgba(31, 35, 32, .16);
  scroll-margin-top: 0;
}
.tramo.dark { --fg: var(--bone); --muted: rgba(248, 248, 246, .68); --line: rgba(248, 248, 246, .16); }
.tramo > .in { max-width: var(--maxw); margin: 0 auto; position: relative; z-index: 2; }

.cota {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: clamp(44px, 6vw, 88px);
  color: var(--muted);
}
.cota .rule { flex: 1; height: 1px; background: currentColor; opacity: .5; transform-origin: 0 50%; }
.cota b { color: var(--fg, var(--ink)); font-weight: 600; }
.cota .z { font-variant-numeric: tabular-nums; }

.head {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--gap); align-items: end; margin-bottom: clamp(52px, 7vw, 108px);
}
.h2, .tramo h2 {
  font-family: var(--f-display); font-stretch: 116%; font-weight: 800;
  font-size: clamp(34px, 4.4vw, 70px); line-height: .93; letter-spacing: -0.03em;
  text-transform: uppercase; text-wrap: balance;
}
[data-split] { perspective: 900px; }
[data-split] .w { display: inline-block; white-space: nowrap; transform-origin: 50% 0% -0.2em; }
.deck { font-size: clamp(16.5px, 1.3vw, 19px); color: var(--muted); max-width: 30em; text-wrap: pretty; }
.deck a { color: var(--fg, var(--ink)); font-weight: 600; }

/* ---------- 01 Servicios ---------- */
.servicios { --bg: #F6F4EE; }
.serv-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap); align-items: start; }
.serv-text p { font-size: 18px; color: #3C433E; margin-bottom: 22px; max-width: 34em; }
.serv-text strong { color: var(--ink); }
.serv-text .btn { margin-top: 14px; }
.pila { position: relative; padding-left: 64px; }
.pila-list { list-style: none; perspective: 1000px; }
.pila .bar {
  position: absolute; left: 18px; top: -24px; bottom: -8px; width: 14px;
  background: linear-gradient(90deg, #3d4244, #858b8f 45%, #4a5053);
  transform-origin: 50% 0;
}
.pila .bar::after { /* punta del pilote */
  content: ''; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px;
  background: #3d4244; clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.pila li {
  position: relative;
  display: grid; grid-template-columns: 68px 1fr; align-items: center; gap: 10px;
  min-height: 84px; padding: 18px 0;
  border-bottom: 1px solid var(--line);
  transform-origin: 50% 0;
}
.pila li:first-of-type { border-top: 1px solid var(--line); }
.pila li::before { /* empalme soldado entre secciones */
  content: ''; position: absolute; left: -50px; bottom: -2px; width: 22px; height: 3px;
  background: var(--rig);
}
.pila li:last-of-type::before { display: none; }
.pila .n { color: var(--sage); }
.pila .t {
  font-family: var(--f-display); font-stretch: 108%; font-weight: 650;
  font-size: clamp(18px, 1.7vw, 24px); line-height: 1.2; letter-spacing: -0.01em;
}
.pila-note { margin-top: 18px; color: var(--muted); }

/* ---------- 02 Proceso ---------- */
.proceso { --bg: #E9E5DA; }
.proc-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--gap); }
/* El marco toma exactamente la proporción del dibujo (560×640): sin franjas vacías. */
.proc-visual {
  --proc-w: min(100%, calc((100vh - var(--nav-h) - 116px) * 0.875));
  position: sticky; top: calc(var(--nav-h) + 24px);
  align-self: start;
}
.proc-visual .frame {
  position: relative; width: var(--proc-w); aspect-ratio: 560 / 640; margin-inline: auto;
  background: #F4F1EA; border: 1px solid var(--line);
}
.proc-visual .frame::before, .proc-visual .frame::after {
  content: ''; position: absolute; width: 14px; height: 14px; border: 0 solid var(--ink);
}
.proc-visual .frame::before { left: -1px; top: -1px; border-width: 2px 0 0 2px; }
.proc-visual .frame::after { right: -1px; bottom: -1px; border-width: 0 2px 2px 0; }
.proc-bg, .proc-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* capa propia: el martillo y las transiciones no redibujan los estratos */
.proc-svg { will-change: transform; }
.proc-cap { display: flex; justify-content: space-between; gap: 12px; width: var(--proc-w); margin: 12px auto 0; color: var(--muted); }
.proc-steps { list-style: none; }
.step {
  min-height: 62vh; display: flex; flex-direction: column; justify-content: center;
  padding: 32px 0; border-top: 1px solid var(--line);
  opacity: .32; transition: opacity .6s var(--ease-out);
}
.step:first-child { border-top: 0; min-height: 50vh; justify-content: flex-start; padding-top: 0; }
.step.on { opacity: 1; }
.no-steps .step { opacity: 1; }
.step .mono { color: var(--green); margin-bottom: 14px; }
.step h3 {
  font-family: var(--f-display); font-stretch: 112%; font-weight: 760;
  font-size: clamp(26px, 2.6vw, 38px); line-height: 1; letter-spacing: -0.02em;
  text-transform: uppercase; margin-bottom: 16px;
}
.step p { font-size: 17.5px; color: #3C433E; max-width: 30em; }

/* Estados del diagrama. site.js pone clases acumuladas s1…s4 en el <svg>;
   sin JS (o con movimiento reducido en teléfono) no hay data-stage y se ve
   el dibujo completo. */
.proc-visual text { font-family: var(--f-mono); font-stretch: 87.5%; letter-spacing: .04em; text-transform: uppercase; }
.proc-svg .g { opacity: 0; transition: opacity .8s var(--ease-out); }
.proc-svg:not([data-stage]) .g, .proc-svg.s1 .g1, .proc-svg.s2 .g2, .proc-svg.s3 .g3, .proc-svg.s4 .g4 { opacity: 1; }
.proc-svg.s3 .g1 { opacity: .4; }
.proc-svg .ghost { transition: opacity .6s; }
.proc-svg.s3 .ghost { opacity: 0; }
/* indicador de etapa */
.proc-svg .stp rect { fill: rgba(31, 35, 32, .16); transition: fill .5s; }
.proc-svg .stp text { fill: #8A918C; transition: fill .5s; }
.proc-svg:not([data-stage]) .stp rect, .proc-svg.s1 .st1 rect, .proc-svg.s2 .st2 rect, .proc-svg.s3 .st3 rect, .proc-svg.s4 .st4 rect { fill: #2C6E49; }
.proc-svg:not([data-stage]) .stp text, .proc-svg.s1 .st1 text, .proc-svg.s2 .st2 text, .proc-svg.s3 .st3 text, .proc-svg.s4 .st4 text { fill: #1F2320; }
/* trazos que se dibujan */
.proc-svg .draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--ease-out); }
.proc-svg:not([data-stage]) .draw, .proc-svg.s1 .g1 .draw, .proc-svg.s2 .g2 .draw { stroke-dashoffset: 0; }
/* 1 · muestras del sondeo */
.proc-svg .core { transform: scale(0); transform-box: fill-box; transform-origin: center; transition: transform .7s var(--ease-out); }
.proc-svg:not([data-stage]) .core, .proc-svg.s1 .core { transform: none; }
/* 3 · pilotes que bajan, equipo que entra y martillo que golpea */
.proc-svg .pile { transform: scaleY(0); transform-box: fill-box; transform-origin: 50% 0; transition: transform 1.6s var(--ease-out); }
.proc-svg:not([data-stage]) .pile, .proc-svg.s3 .pile { transform: none; }
.proc-svg .rig { transform: translateX(46px); opacity: 0; transition: transform 1.1s var(--ease-out), opacity .6s; }
.proc-svg:not([data-stage]) .rig, .proc-svg.s3 .rig { transform: none; opacity: 1; }
.proc-svg.s3:not(.s4) .hammer { animation: gp-blow 1s cubic-bezier(.6, 0, .4, 1) infinite; }
@keyframes gp-blow { 0%, 62%, 100% { transform: translateY(0); } 40% { transform: translateY(-15px); } }
.proc-svg .joint { fill: #B9542A; }
.proc-svg.s3:not(.s4) .joint { animation: gp-weld 1.8s ease-out 1.2s both; }
@keyframes gp-weld { 0% { fill: #FFE2A8; } 100% { fill: #B9542A; } }
/* 4 · precarga y apoyo verificado */
.proc-svg .arrow { transform: translateY(-16px); opacity: 0; transition: transform .8s var(--ease-out), opacity .5s; }
.proc-svg:not([data-stage]) .arrow, .proc-svg.s4 .arrow { transform: none; opacity: 1; }
.proc-svg .bulb { transform-box: fill-box; transform-origin: center; }
.proc-svg.s4 .bulb { animation: gp-bulb 2.6s ease-in-out infinite; }
@keyframes gp-bulb { 0%, 100% { opacity: .55; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.15); } }
.proc-svg.off .hammer, .proc-svg.off .bulb, .proc-svg.off .joint { animation-play-state: paused; }
.proc-svg .check { transform: scale(0); transform-box: fill-box; transform-origin: center; transition: transform .6s var(--ease-out) .5s; }
.proc-svg:not([data-stage]) .check, .proc-svg.s4 .check { transform: none; }

/* ---------- 03 Equipo ---------- */
.equipo { --bg: var(--green-deep); overflow: hidden; }
.equipo-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap); align-items: start; }
.monitor { position: relative; padding-left: clamp(0px, 9vw, 150px); perspective: 1000px; }
.monitor .screen {
  position: relative; aspect-ratio: 9 / 16; width: min(100%, calc(78vh * 9 / 16));
  background: #0f2a1c; outline: 1px solid rgba(248, 248, 246, .28); outline-offset: 8px;
  transform-style: preserve-3d;
}
.monitor .clip { position: absolute; inset: 0; overflow: hidden; }
.monitor video { width: 100%; height: 100%; object-fit: cover; }
.monitor .rec {
  position: absolute; left: 12px; top: 12px; display: flex; align-items: center; gap: 8px;
  padding: 5px 8px 4px; background: rgba(15, 20, 17, .7); color: var(--bone);
}
.monitor .rec::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--rig); animation: rec 1.6s steps(2, jump-none) infinite; }
.callout { position: absolute; left: 0; display: flex; align-items: center; gap: 0; width: calc(clamp(0px, 9vw, 150px) + 70px); }
.callout .txt { display: flex; flex-direction: column; flex: none; width: clamp(96px, 7.6vw, 128px); line-height: 1.35; font-size: 12.5px; color: var(--muted); }
.callout b { font-family: var(--f-display); font-stretch: 112%; font-weight: 780; font-size: 26px; line-height: 1; color: var(--bone); letter-spacing: -0.01em; margin-bottom: 4px; }
.callout .leader { flex: 1; height: 1px; background: var(--green-bright); transform-origin: 0 50%; position: relative; }
.callout .leader::after { content: ''; position: absolute; right: -4px; top: -4px; width: 9px; height: 9px; border: 1.5px solid var(--green-bright); border-radius: 50%; }
.callout.c1 { top: 14%; }
.callout.c2 { top: 46%; }
.callout.c3 { top: 76%; }
.equipo-content h2 { margin-bottom: 24px; }
.equipo-content .deck { margin-bottom: 48px; }
.equipo-content h3 {
  font-family: var(--f-display); font-stretch: 110%; font-weight: 720; font-size: 26px;
  letter-spacing: -0.015em; text-transform: uppercase; margin-bottom: 12px;
}
.equipo-content p { color: var(--muted); font-size: 17px; max-width: 36em; margin-bottom: 18px; }
.equipo-content p strong { color: var(--bone); }
.placa {
  position: relative; margin: 34px 0 34px; padding: 22px 26px 18px;
  background: rgba(8, 26, 16, .38); border: 1px solid rgba(248, 248, 246, .22);
}
.placa::before, .placa::after, .placa .rv::before, .placa .rv::after {
  content: ''; position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: rgba(248, 248, 246, .35);
}
.placa::before { left: 9px; top: 9px; }
.placa::after { right: 9px; top: 9px; }
.placa .rv::before { left: 9px; bottom: 9px; }
.placa .rv::after { right: 9px; bottom: 9px; }
.placa-h { display: flex; justify-content: space-between; gap: 12px; color: var(--green-bright); padding-bottom: 12px; border-bottom: 1px solid rgba(248, 248, 246, .2); margin-bottom: 6px; }
.placa dl { display: grid; grid-template-columns: 1fr; }
.placa .row { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; }
.placa dt { flex: 1; display: flex; align-items: baseline; gap: 10px; font-family: var(--f-mono); font-stretch: 87.5%; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.placa dt::after { content: ''; flex: 1; min-width: 16px; border-bottom: 1px dotted rgba(248, 248, 246, .3); transform: translateY(-3px); }
.placa dd { font-family: var(--f-display); font-stretch: 108%; font-weight: 700; font-size: 19px; white-space: nowrap; }

.unfold { margin-top: clamp(80px, 10vw, 150px); perspective: 1400px; }
.unfold figure { position: relative; transform-origin: 50% 100%; }
.unfold img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
.unfold figcaption { display: flex; justify-content: space-between; gap: 16px; margin-top: 14px; color: var(--muted); }

/* ---------- 04 En obra ---------- */
.obra { --bg: #173D29; }
.aerial { perspective: 1600px; margin-bottom: clamp(56px, 7vw, 104px); }
.aerial figure { position: relative; transform-origin: 50% 100%; overflow: hidden; }
.aerial img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.aerial .corner { position: absolute; width: 26px; height: 26px; border: 0 solid var(--bone); }
.aerial .corner.tl { left: 16px; top: 16px; border-width: 2px 0 0 2px; }
.aerial .corner.tr { right: 16px; top: 16px; border-width: 2px 2px 0 0; }
.aerial .corner.bl { left: 16px; bottom: 16px; border-width: 0 0 2px 2px; }
.aerial .corner.br { right: 16px; bottom: 16px; border-width: 0 2px 2px 0; }
.aerial .tag { position: absolute; left: 24px; bottom: 26px; padding: 6px 9px 5px; background: rgba(15, 20, 17, .72); color: var(--bone); }
.obra-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); margin-bottom: clamp(64px, 8vw, 120px); }
.obra-stats .stat { padding: 28px 24px 0 0; }
.obra-stats .stat + .stat { padding-left: 24px; border-left: 1px solid var(--line); }
.obra-stats .number {
  font-family: var(--f-display); font-stretch: 125%; font-weight: 820;
  font-size: clamp(52px, 7.4vw, 124px); line-height: .9; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.obra-stats .label { margin-top: 14px; color: var(--muted); }
.tiles { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); align-items: start; perspective: 1200px; }
.tile { position: relative; transform-style: preserve-3d; }
.tile .media { overflow: hidden; background: #0f2a1c; }
.tile img, .tile video { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.tile:hover img, .tile:hover video { transform: scale(1.035); }
.tile figcaption { margin-top: 12px; color: var(--muted); display: flex; gap: 10px; }
.tile figcaption .mono { color: var(--green-bright); flex: none; }
.tile.t1 { grid-column: 1 / span 6; }
.tile.t1 .media { aspect-ratio: 4 / 5; }
.tile.t2 { grid-column: 7 / span 3; margin-top: 18%; }
.tile.t3 { grid-column: 10 / span 3; margin-top: 4%; }
.tile.t2 .media, .tile.t3 .media { aspect-ratio: 9 / 16; }
.obra-more { margin-top: clamp(48px, 6vw, 80px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid var(--line); padding-top: 28px; }
.obra-more p { color: var(--muted); max-width: 34em; }

/* ---------- 05 Nosotros (se conserva el diseño que le gustó al cliente) ---------- */
/* Las líneas topográficas van en el fondo mismo de la sección, con su 12 % de
   opacidad ya dentro de la imagen: sin capa semitransparente aparte. */
.nosotros {
  --bg: linear-gradient(165deg, var(--green-deep) 0%, var(--green-deeper) 100%);
  background: url('texture-lines-12.webp') center / cover no-repeat, var(--bg);
  overflow: hidden;
}
.nosotros-lead { max-width: 820px; font-size: 19px; color: rgba(248, 248, 246, .86); margin-bottom: 20px; }
.nosotros-lead strong { color: var(--bone); }
.nosotros-sub { max-width: 780px; font-size: 16px; color: rgba(248, 248, 246, .68); margin-bottom: 64px; }
.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; max-width: 1100px; margin-bottom: 80px; align-items: center; }
.mv-card { border-radius: 18px; padding: 52px 44px; overflow: hidden; }
.mv-card.light { background: var(--bone); color: var(--ink); }
.mv-card.solid { background: linear-gradient(135deg, var(--green) 0%, var(--green-light) 100%); color: var(--bone); }
.mv-card h3 {
  font-family: var(--f-display); font-stretch: 118%; font-weight: 800; font-size: 38px;
  letter-spacing: -0.02em; line-height: 1; margin-bottom: 18px; text-transform: uppercase;
}
.mv-card.light h3 { color: var(--green-deep); }
.mv-card p { font-size: 16.5px; line-height: 1.72; }
.mv-card.light p { color: #333; }
.mv-card.solid p { color: rgba(248, 248, 246, .95); }
.why-choose-us {
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin-bottom: 80px;
  background: rgba(11, 31, 21, .42); border: 1px solid rgba(248, 248, 246, .14);
  border-radius: 20px; padding: clamp(28px, 4vw, 52px);
}
.why-content h3 {
  font-family: var(--f-display); font-stretch: 116%; font-weight: 800; font-size: 34px;
  line-height: 1; letter-spacing: -0.02em; margin-bottom: 14px; text-transform: uppercase;
}
.why-content > p { color: rgba(248, 248, 246, .9); font-size: 16.5px; margin-bottom: 30px; }
.why-values { display: flex; flex-direction: column; gap: 18px; }
.value-item { display: flex; gap: 16px; align-items: flex-start; }
.value-icon {
  width: 32px; height: 32px; background: var(--green-light); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: var(--bone);
  font-weight: 700; font-size: 17px; flex-shrink: 0;
}
.value-text { display: flex; flex-direction: column; gap: 3px; }
.value-text strong { font-weight: 650; font-size: 16px; }
.value-text span { color: rgba(248, 248, 246, .7); font-size: 14.5px; }
/* Sin sombra difuminada: sobre el verde oscuro casi no se veía y era lo que
   más frenaba el scroll de esta sección en iPhone. Un filete fino la define. */
.why-image { border-radius: 16px; overflow: hidden; outline: 1px solid rgba(248, 248, 246, .14); outline-offset: -1px; }
.why-image img { width: 100%; height: 100%; object-fit: cover; }
.nosotros-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.strip-item {
  background: rgba(248, 248, 246, .05); border: 1px solid rgba(248, 248, 246, .12);
  border-radius: 14px; padding: 28px 26px; transition: transform .25s ease, background .25s ease;
}
.strip-item:hover { transform: translateY(-4px); background: rgba(248, 248, 246, .09); }
.strip-item .display {
  font-family: var(--f-display); font-stretch: 118%; font-weight: 800; font-size: 44px;
  line-height: 1; letter-spacing: -0.03em; color: var(--green-bright); font-variant-numeric: tabular-nums;
}
.strip-item span { display: block; font-size: 13.5px; color: rgba(248, 248, 246, .62); margin-top: 10px; }

/* ---------- 06 Zonas ---------- */
.zonas { --bg: #11301F; overflow: hidden; }
.zonas-list { list-style: none; border-bottom: 1px solid var(--line); perspective: 1200px; }
.zonas-list li { border-top: 1px solid var(--line); transform-origin: 50% 0; }
.zona-row {
  position: relative; display: grid; align-items: center;
  grid-template-columns: 90px minmax(0, 1fr) auto auto; gap: 24px;
  padding: clamp(14px, 1.8vw, 22px) 0; text-decoration: none; color: var(--bone);
  isolation: isolate;
}
.zona-row::before {
  content: ''; position: absolute; inset: 0 calc(-1 * var(--pad)); z-index: -1;
  background: var(--green); transform: scaleY(0); transform-origin: 50% 100%;
  transition: transform .6s var(--ease-out);
}
.zona-row:hover::before, .zona-row:focus-visible::before { transform: scaleY(1); }
.zona-row .idx { color: var(--green-bright); transition: color .4s; }
.zona-row .name {
  font-family: var(--f-display); font-stretch: 125%; font-weight: 820;
  font-size: clamp(38px, 7.2vw, 118px); line-height: .95; letter-spacing: -0.045em;
  text-transform: uppercase; transition: transform .6s var(--ease-out);
}
.zona-row:hover .name { transform: translateX(14px); }
.zona-row .geo { color: var(--muted); text-align: right; }
.zona-row .zona-cta {
  display: inline-flex; align-items: center; gap: 10px; font-weight: 620; font-size: 15px; white-space: nowrap;
  padding: 12px 16px; border: 1px solid rgba(248, 248, 246, .35); border-radius: 3px;
  transition: background-color .4s, color .4s, border-color .4s;
}
.zona-row:hover .zona-cta { background: var(--bone); color: var(--green-deep); border-color: var(--bone); }
.zona-row:hover .idx { color: var(--bone); }
.zona-pages { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--muted); align-items: baseline; }
.zona-pages a { color: var(--bone); font-weight: 560; text-underline-offset: 4px; }

/* ---------- 07 FAQ ---------- */
.faq { --bg: #0E2619; }
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--gap); align-items: start; }
.faq-head { position: sticky; top: calc(var(--nav-h) + 40px); }
.faq-head h2 { margin-bottom: 24px; font-size: clamp(32px, 3.5vw, 54px); }
.faq-list { border-bottom: 1px solid var(--line); counter-reset: faq; }
.faq-item { border-top: 1px solid var(--line); counter-increment: faq; }
.faq-q {
  width: 100%; display: grid; grid-template-columns: 54px 1fr 28px; align-items: start; gap: 12px;
  padding: 24px 0; background: none; border: 0; cursor: pointer; text-align: left; color: var(--bone);
  font-family: var(--f-body); font-stretch: 104%; font-weight: 600; font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1.3; letter-spacing: -0.005em;
}
.faq-q::before {
  content: 'P.' counter(faq, decimal-leading-zero);
  font-family: var(--f-mono); font-stretch: 87.5%; font-size: 11px; font-weight: 450;
  letter-spacing: .06em; color: var(--green-bright); padding-top: .45em;
}
.faq-q:hover span:first-child { color: var(--green-bright); }
.faq-icon { position: relative; width: 20px; height: 20px; margin-top: 3px; justify-self: end; }
.faq-icon::before, .faq-icon::after {
  content: ''; position: absolute; left: 0; top: 9px; width: 20px; height: 2px; background: currentColor;
  transition: transform .5s var(--ease-out);
}
.faq-icon::after { transform: rotate(90deg); }
.faq-item.open .faq-icon::after { transform: rotate(0deg); }
.faq-item.open .faq-icon::before { transform: rotate(180deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease-out); }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a-inner { overflow: hidden; }
.faq-a p { padding: 0 40px 28px 66px; color: var(--muted); font-size: 16.5px; max-width: 46em; }
.faq-a a { color: var(--bone); font-weight: 600; }

/* ---------- Contacto: estrato firme ---------- */
.contacto {
  --bg: var(--green);
  overflow: hidden;
}
.contacto .hatch {
  /* Sin máscara ni opacidad (caras de dibujar en iPhone): el color de la
     junta ya viene mezclado y el desvanecido es un degradado del mismo verde. */
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, var(--green) 0%, rgba(44, 110, 73, 0) 30%, rgba(44, 110, 73, 0) 80%, var(--green) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='56'%3E%3Cpath d='M0 1H112M0 29H112M28 1V29M84 29V56' stroke='%23235C3D' stroke-width='2.2' fill='none'/%3E%3C/svg%3E") 0 0 / 112px 56px;
}
.contacto .cota { color: rgba(248, 248, 246, .8); }
.contacto-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--gap); align-items: start; }
.contacto h2 { margin-bottom: 26px; font-size: clamp(32px, 3.9vw, 60px); }
.contacto .lead { font-size: clamp(17px, 1.4vw, 20px); color: rgba(248, 248, 246, .88); max-width: 30em; margin-bottom: 40px; }
.direct { list-style: none; border-top: 1px solid rgba(248, 248, 246, .25); }
.direct li { border-bottom: 1px solid rgba(248, 248, 246, .25); }
.direct a, .direct span.v {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 0;
  text-decoration: none; font-weight: 600; font-size: 18px;
}
.direct .mono { color: rgba(248, 248, 246, .7); font-weight: 450; }
.direct a:hover .val { text-decoration: underline; text-underline-offset: 4px; }
.contact-form {
  background: var(--bone); color: var(--ink); padding: clamp(24px, 3vw, 40px);
  border-radius: 3px; position: relative;
}
.form-h { display: flex; justify-content: space-between; gap: 12px; color: var(--sage); padding-bottom: 16px; border-bottom: 1px solid rgba(31, 35, 32, .14); margin-bottom: 8px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
.field { display: flex; flex-direction: column; padding-top: 16px; }
.field label { color: #5E655F; margin-bottom: 4px; }
.field input, .field textarea {
  width: 100%; border: 0; border-bottom: 1.5px solid rgba(31, 35, 32, .28); background: transparent;
  font: inherit; font-size: 17px; color: var(--ink); padding: 8px 0 10px; border-radius: 0;
  transition: border-color .3s;
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--green); }
.field input::placeholder, .field textarea::placeholder { color: #9AA09B; }
.contact-form .btn { width: 100%; justify-content: center; margin-top: 28px; }
.form-note { margin-top: 16px; font-size: 14px; color: #5E655F; }
.form-note a { color: var(--green); font-weight: 600; }

/* ---------- Footer ---------- */
footer { background: #0A1C12; color: var(--bone); padding: 72px var(--pad) 32px calc(var(--rail) + var(--pad)); }
.footer-inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.footer-col img { width: 120px; height: auto; margin-bottom: 18px; }
.footer-col p { color: rgba(248, 248, 246, .6); font-size: 15px; margin-bottom: 8px; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 8px; }
.footer-col a { color: rgba(248, 248, 246, .82); text-decoration: none; font-size: 15px; }
.footer-col a:hover { color: var(--bone); text-decoration: underline; text-underline-offset: 3px; }
.footer-label { color: var(--green-bright); margin-bottom: 16px; }
.footer-bottom {
  max-width: var(--maxw); margin: 56px auto 0; padding-top: 24px; border-top: 1px solid rgba(248, 248, 246, .12);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: rgba(248, 248, 246, .5);
}

.whatsapp-float {
  position: fixed; right: 22px; bottom: 22px; z-index: var(--z-float);
  width: 58px; height: 58px; border-radius: 50%; background: #1FA855;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .24);
  transition: transform .4s var(--ease-out);
}
.whatsapp-float:hover { transform: translateY(-3px) scale(1.04); }

/* ==========================================================================
   Estados iniciales de animación — sólo con JS y movimiento permitido.
   Si algo falla, el script de la cabecera quita .js-motion y todo se ve.
   ========================================================================== */
.js-motion .hero h1 .li { transform: translateY(-104%); }
/* html.rm = "Reducir movimiento": el titular no cae a golpes, sólo aparece */
.js-motion.rm .hero h1 .li { transform: none; }
.js-motion.rm .hero h1 { opacity: 0; }
.js-motion [data-reveal], .js-motion [data-intro] { opacity: 0; }
.js-motion [data-split] .w { opacity: 0; }
.js-motion .cota .rule { transform: scaleX(0); }
.js-motion .pila li { opacity: 0; }
.js-motion .pila .bar { transform: scaleY(0); }
.js-motion .zonas-list li { opacity: 0; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1179px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
}
@media (max-width: 1100px) {
  .monitor { padding-left: 0; }
  .callout { position: static; width: auto; }
  .callout .leader { display: none; }
  .callouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; }
  .callout .txt { width: auto; }
  .monitor .screen { margin: 0 auto; width: min(100%, calc(70vh * 9 / 16)); }
}
@media (min-width: 1101px) { .callouts { display: contents; } }
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .hero-copy { padding: 36px var(--pad) 8px; }
  .hero-scene { grid-column: 1; grid-row: 2; margin: 0; height: min(92vw, 560px); min-height: 0; }
  .hero-ticker { grid-row: 3; }
  .hud-wrap { right: var(--pad); top: 6px; }
  .hud { min-width: 0; padding: 10px 12px 9px; font-size: 9.5px; }
  .hud-pause { min-height: 44px; min-width: 44px; justify-content: center; }
  .head, .serv-grid, .equipo-grid, .faq-grid, .contacto-grid { grid-template-columns: minmax(0, 1fr); }
  .head { gap: 20px; }
  .proc-grid { grid-template-columns: 1fr; gap: 0; }
  /* En teléfono/tableta el diagrama ya no se queda pegado: pasa con el scroll
     y recorre sus etapas solo (site.js). */
  .proc-visual { --proc-w: min(100%, calc(66vh * 0.875)); position: relative; top: auto; margin-bottom: 8px; }
  .proc-cap { margin-top: 8px; }
  .step, .step:first-child { min-height: 0; padding: 36px 0; justify-content: flex-start; }
  .step:first-child { padding-top: 32px; }
  .step { opacity: 1; }
  .faq-head { position: static; }
  .mv-grid, .why-choose-us { grid-template-columns: 1fr; gap: 30px; }
  .nosotros-strip { grid-template-columns: 1fr 1fr; }
  .tile.t1 { grid-column: 1 / -1; }
  .tile.t1 .media { aspect-ratio: 4 / 3; }
  .tile.t2 { grid-column: 1 / span 6; margin-top: 0; }
  .tile.t3 { grid-column: 7 / span 6; margin-top: 0; }
  .zona-row { grid-template-columns: 1fr auto; gap: 4px 16px; }
  .zona-row .idx { grid-column: 1; grid-row: 1; align-self: center; }
  .zona-row .zona-cta { grid-column: 2; grid-row: 1; }
  .zona-row .name { grid-column: 1 / -1; grid-row: 2; }
  .zona-row .geo { display: none; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .s-label { display: none; }
  .scene-note { bottom: 8px; }
}
@media (max-width: 600px) {
  body { font-size: 16.5px; }
  /* Teléfono: titular → modelo 3D → texto y botón, para que el 3D quede en la
     primera pantalla (en iPhone el 3D empezaba a 603 px de 660 visibles). */
  .hero { grid-template-rows: none; grid-auto-rows: auto; }
  .hero-copy { display: contents; }
  .hero-kicker, .hero h1, .hero-sub, .hero-ctas { margin-left: var(--pad); margin-right: var(--pad); }
  .hero-kicker { order: 1; margin-top: 24px; margin-bottom: 14px; }
  .hero h1 { order: 2; margin-bottom: 0; font-size: clamp(34px, 11vw, 58px); }
  .hero-scene { order: 3; grid-row: auto; height: min(84vw, 380px); }
  .hero-sub { order: 4; margin-top: 2px; margin-bottom: 22px; }
  .hero-ctas { order: 5; margin-bottom: 34px; }
  .hero-ticker { order: 6; grid-row: auto; }
  .hero-proof { display: none; }
  .hud-wrap { top: auto; bottom: 10px; left: var(--pad); right: auto; flex-direction: row; align-items: stretch; }
  .hud-pause { padding: 0; gap: 0; }
  .hud-pause .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hud { min-width: 0; padding: 7px 10px 6px; display: flex; flex-direction: column; justify-content: center; }
  .hud-h, .hud dt { display: none; }
  .hud dt:last-of-type { display: block; margin-left: 4px; }
  .hud dl { display: flex; gap: 12px; }
  .hud-bar { margin-top: 6px; }
  .scene-note { top: 4px; bottom: auto; left: var(--pad); }
  .tramo h2 { font-size: clamp(26px, 8.6vw, 34px); }
  .hud dl { gap: 2px 12px; }
  .pila { padding-left: 46px; }
  .pila .bar { left: 10px; width: 11px; }
  .pila li { grid-template-columns: 1fr; gap: 4px; min-height: 0; }
  .pila li::before { left: -38px; }
  .callouts { grid-template-columns: 1fr; }
  .obra-stats { grid-template-columns: 1fr; }
  .obra-stats .stat, .obra-stats .stat + .stat { padding: 22px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .form-row { grid-template-columns: 1fr; }
  .mv-card { padding: 36px 28px; }
  .zona-row .zona-cta { padding: 10px 12px; font-size: 14px; }
  .faq-q { grid-template-columns: 1fr 24px; }
  .faq-q::before { grid-column: 1 / -1; padding: 0; }
  .faq-a p { padding: 0 0 24px 0; }
  .footer-inner { grid-template-columns: 1fr; }
  .whatsapp-float { right: 16px; bottom: 16px; width: 54px; height: 54px; }
}
/* iPhone de 320 px: la lectura del modelo en un solo renglón junto al botón de pausa */
@media (max-width: 360px) {
  .hud-wrap { max-width: calc(100% - 2 * var(--pad)); }
  .hud { font-size: 9px; padding: 7px 8px 6px; }
  .hud dl { gap: 9px; }
  .hud dd { white-space: nowrap; }
  .hud dt:last-of-type { display: none; }
}
@media (min-width: 961px) and (max-height: 780px) {
  .hero h1 { font-size: clamp(40px, 4.6vw, 76px); margin-bottom: 20px; }
  .hero-kicker { margin-bottom: 18px; }
  .hero-sub { margin-bottom: 24px; }
  .hero-proof { margin-top: 26px; }
}

/* "Reducir movimiento": modo suave, no apagado. Se detiene lo que cruza la
   pantalla (la cinta) y el scroll deja de ser animado; los cambios en su lugar
   (desvanecidos, el diagrama, el acordeón) siguen. El resto lo decide site.js. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker-track { animation: none; }
}