/* ===== Tokens ===== */
:root {
  --basalt: #101215;
  --shale: #1b1f24;
  --shale-2: #252a31;
  --line: #343a43;
  --red: #e3262d;
  --red-deep: #b81c22;
  --bone: #eeeae3;
  --mist: #9aa1a9;
  --line-strong: #4a525d;   /* bordes al pasar el ratón, aviso de cookies, banda */
  --field-border: #646c78;  /* borde de campos: 3,1:1 sobre shale */
  --placeholder: #8a919a;   /* texto de ejemplo en campos: 5,2:1 sobre shale */
  --on-red: #ffffff;        /* texto sobre rojo: 4,6:1 */
  --paper: #e9e7e3;         /* fondo claro para mapa y logos de clientes */
  --ink-deep: #0b0d10;      /* fondo bajo fotos que aún cargan */
  --danger: #ff8a8a;        /* mensajes de error */

  --font: "Archivo", system-ui, sans-serif;
  /* escala tipográfica: 7 tamaños, 2 anchos, 3 pesos, 2 colores de texto */
  --fs-xs: 13px;
  --fs-sm: 15px;
  --fs-md: 17px;
  --fs-lg: 20px;
  --fs-xl: clamp(24px, 2.4vw, 30px);
  --fs-2xl: clamp(32px, 4.4vw, 56px);
  --fs-3xl: clamp(40px, 6.4vw, 88px);
  --display: 125;   /* ancho expandido, eco del logotipo */

  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 32px; --s6: 48px; --s7: 64px; --s8: 96px; --s9: 128px;

  --m-100: 100ms; --m-150: 150ms; --m-200: 200ms; --m-300: 300ms;
  --m-160: 160ms;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);      /* entradas y respuestas de UI */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);  /* movimiento en pantalla */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);   /* cortinas y paneles */

  --vp-wide: 1280px;
  /* margen que alinea el texto del inicio y del recorrido con la columna de 1280 px en pantallas grandes */
  --gutter: max(var(--s5), calc((100% - var(--vp-wide)) / 2 + var(--s5)));
  --radius: 4px;

  /* vidrio: superficies translúcidas sobre la escena 3D y las fotos */
  --glass-bg: rgba(16, 18, 21, 0.42);
  --glass-bg-strong: rgba(16, 18, 21, 0.66);
  --glass-edge: rgba(238, 234, 227, 0.16);
  --glass-hi: inset 0 1px 0 rgba(238, 234, 227, 0.16);
  --glass-shadow: 0 18px 48px -24px rgba(0, 0, 0, 0.75);
  --glass-blur: blur(18px) saturate(1.4);
  --radius-glass: 14px;
  --radius-pill: 999px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--basalt);
  color: var(--bone);
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: 1.6;
  overflow-x: hidden; overflow-x: clip; /* clip recorta sin crear contenedor de scroll: no rompe el sticky */
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.skip {
  min-height: 44px; display: inline-flex; align-items: center;
  position: absolute; left: var(--s3); top: -60px; z-index: 100;
  background: var(--red); color: var(--on-red); padding: var(--s2) var(--s3); border-radius: var(--radius);
}
.skip:focus { top: var(--s3); }

.wrap { width: 100%; max-width: var(--vp-wide); margin-inline: auto; padding-inline: var(--s5); }

/* ===== Tipografía ===== */
.h2 {
  font-stretch: var(--wide);
  font-weight: 800;
  font-size: var(--fs-2xl);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s4);
  max-width: 18ch;
  text-wrap: balance;
}
.h3 { font-stretch: 100%; font-weight: 600; font-size: var(--fs-lg); line-height: 1.2; margin: 0 0 var(--s3); }
.lead { color: var(--mist); font-size: var(--fs-lg); max-width: 58ch; margin: 0; }

/* ===== Botones ===== */
.btn {
  background: transparent;
  position: relative;
  display: inline-flex; align-items: center; gap: var(--s3);
  min-height: 52px; padding: 0 var(--s5);
  border-radius: var(--radius);
  font-weight: 600; font-size: var(--fs-md); font-stretch: 100%;
  text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  overflow: hidden; isolation: isolate;
  transition: transform var(--m-160) var(--ease-out), translate var(--m-300) var(--ease-out), border-color var(--m-200) ease, color var(--m-200) ease;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none;
}
.btn--sm { min-height: 44px; padding: 0 var(--s4); font-size: var(--fs-sm); }
.btn--primary { background: var(--red); color: var(--on-red); }
.btn--ghost { border-color: var(--line); color: var(--bone); }

/* capa de relleno que barre desde abajo */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  transform: translateY(101%);
  transition: transform var(--m-200) var(--ease-out);
}
.btn--primary::before { background: var(--red-deep); }
.btn--ghost::before { background: var(--bone); }

/* texto que rueda: el original sube y el duplicado entra desde abajo */
.btn__roll { position: relative; display: inline-block; line-height: 1.3; }
.btn__roll::after {
  content: attr(data-text);
  position: absolute; left: 0; top: calc(100% + 22px); white-space: nowrap;
}
.btn__roll, .btn__roll::after { transition: transform var(--m-200) var(--ease-out); }

.btn__bit {
  width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round;
  transition: transform var(--m-300) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover::before { transform: translateY(0); }
  .btn:hover .btn__roll { transform: translateY(calc(-100% - 22px)); }
  .btn--ghost:hover { color: var(--basalt); border-color: var(--bone); }
  .btn:hover .btn__bit { transform: translateY(3px) rotate(180deg); }
}
.btn:focus-visible::before { transform: translateY(0); }
.btn--ghost:focus-visible { color: var(--basalt); }
.btn:active { transform: scale(0.97); }
.btn[aria-pressed="true"]:not(.btn--primary) { border-color: var(--red); }

/* ===== Navegación ===== */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; gap: var(--s5);
  height: 76px; padding-inline: var(--s5);
  transition: background-color var(--m-300) var(--ease-out), border-color var(--m-300);
  border-bottom: 1px solid transparent;
}
.nav.is-solid { background: rgba(16, 18, 21, 0.96); border-bottom-color: var(--line); }
.nav__brand img { height: 52px; width: auto; }
.nav__links { display: flex; gap: var(--s1); margin-left: auto; }
.nav__links a {
  position: relative; text-decoration: none; font-size: var(--fs-sm); font-weight: 400;
  padding: var(--s2) var(--s3); min-height: 44px; display: inline-flex; align-items: center;
  color: var(--mist); transition: color var(--m-200);
}
.nav__links a::after {
  content: ""; position: absolute; left: var(--s3); right: var(--s3); bottom: 6px; height: 2px;
  background: var(--red); transform: scaleX(0); transform-origin: left;
  transition: transform var(--m-300) var(--ease-out);
}
.nav__links a:hover, .nav__links a.is-active { color: var(--bone); }
.nav__links a:hover::after, .nav__links a.is-active::after { transform: scaleX(1); }
.nav__menu { display: none; }

.menu {
  position: fixed; inset: 76px 0 0 0; z-index: 49;
  background: var(--basalt); padding: var(--s5);
  animation: fade var(--m-200) var(--ease-out);
}
.menu nav { display: flex; flex-direction: column; }
.menu a {
  font-stretch: var(--wide); font-weight: 800; font-size: var(--fs-xl); text-decoration: none;
  padding: var(--s3) 0; border-bottom: 1px solid var(--line);
}
@keyframes fade { from { opacity: 0; } }


/* ===== Hero ===== */
/* escena 3D fija detrás del inicio y del recorrido */
.stage { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.stage canvas { display: block; width: 100%; height: 100%; }
.stage__fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.35; }
.stage.has-3d .stage__fallback { display: none; }
main, .footer { position: relative; z-index: 1; }

.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: grid; align-items: end;
  padding: 120px var(--gutter) var(--s8);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(90deg, rgba(16,18,21,0.92) 0%, rgba(16,18,21,0.55) 42%, rgba(16,18,21,0) 70%),
              linear-gradient(0deg, var(--basalt) 0%, rgba(16,18,21,0) 30%);
}
.hero__copy { position: relative; z-index: 2; max-width: 780px; }
.hero__kicker { color: var(--mist); font-weight: 600; font-size: var(--fs-sm); margin: 0 0 var(--s4); }
.hero__title {
  font-stretch: var(--wide); font-weight: 800;
  font-size: var(--fs-3xl); line-height: 0.98; letter-spacing: -0.03em;
  margin: 0 0 var(--s5);
}
.hero__title .line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.hero__title .line > span { display: inline-block; }
.hero__lead { color: var(--bone); font-size: var(--fs-lg); max-width: 52ch; margin: 0 0 var(--s6); }
/* módulo de acción en vidrio */
.hero__actions {
  display: inline-flex; flex-direction: column; gap: var(--s3); max-width: 100%;
  padding: var(--s4); border-radius: var(--radius-glass);
}
.hero__actions-label { margin: 0; color: var(--mist); font-size: var(--fs-sm); font-weight: 600; }
.hero__actions-row { display: flex; flex-wrap: wrap; gap: var(--s3); }
.hero__actions .btn--ghost { border-color: var(--glass-edge); }
.hero__actions-tel {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s2); min-height: 44px;
  padding-top: var(--s2); border-top: 1px solid var(--glass-edge);
  color: var(--mist); font-size: var(--fs-sm); text-decoration: none;
}
.hero__actions-tel b { color: var(--bone); font-weight: 600; font-variant-numeric: tabular-nums; }
.hero__actions-tel:hover b { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 4px; }

/* secuencia de entrada orquestada: único momento de movimiento automático */
.js .hero__title .line > span { transform: translateY(105%); }
.js .hero__kicker, .js .hero__lead, .js .hero__actions { opacity: 0; transform: translateY(8px); }
.is-loaded .hero__title .line > span { transform: none; transition: transform 900ms var(--ease-out); }
.is-loaded .hero__title .line:nth-child(2) > span { transition-delay: 90ms; }
.is-loaded .hero__title .line:nth-child(3) > span { transition-delay: 180ms; }
.is-loaded .hero__kicker, .is-loaded .hero__lead, .is-loaded .hero__actions {
  opacity: 1; transform: none; transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.is-loaded .hero__lead { transition-delay: 350ms; }
.is-loaded .hero__actions { transition-delay: 450ms; }

.tag3d {
  position: absolute; left: 0; top: 0; z-index: 3;
  max-width: 200px; padding: var(--s2) var(--s3);
  background: rgba(16, 18, 21, 0.9); border: 1px solid var(--line); border-left: 2px solid var(--red);
  font-size: var(--fs-xs); line-height: 1.35; color: var(--mist);
  pointer-events: none; opacity: 0; transition: opacity var(--m-300) var(--ease-out);
}
.tag3d b { display: block; color: var(--bone); font-weight: 600; font-size: var(--fs-sm); }
.tag3d.is-on { opacity: 1; }

.hero__scroll {
  position: absolute; z-index: 2; left: 50%; bottom: var(--s5); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: var(--s2);
  font-size: var(--fs-xs); color: var(--mist); text-decoration: none; min-width: 44px; min-height: 44px;
}
.hero__scroll i { width: 1px; height: 36px; background: linear-gradient(var(--red), transparent); }

/* ===== Secciones ===== */
.section { padding-block: var(--s9); position: relative; scroll-margin-top: 60px; background: var(--basalt); }
.section__head { margin-bottom: var(--s7); }
.section__head--row { display: flex; justify-content: space-between; align-items: end; gap: var(--s5); flex-wrap: wrap; }

/* tilt 3D reutilizable */
.tilt { transform-style: preserve-3d; }

/* Nosotros */
.about__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--s7); align-items: center; }
.about__media { margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; }
.about__media img { width: 100%; height: 100%; object-fit: cover; }
.figures {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin: var(--s6) 0 0;
  border-top: 1px solid var(--line);
}
.figures > div { padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.figures > div:nth-child(odd) { padding-right: var(--s4); border-right: 1px solid var(--line); }
.figures > div:nth-child(even) { padding-left: var(--s4); }
.figures dt { color: var(--mist); font-size: var(--fs-sm); }
.figures dd {
  margin: 0; font-stretch: var(--wide); font-weight: 800; font-size: var(--fs-2xl); line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.timeline__title { margin-top: var(--s9); }
.timeline {
  list-style: none; margin: var(--s4) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5);
  position: relative;
}
.timeline::before {
  content: ""; position: absolute; left: 0; right: 0; top: 34px; height: 2px;
  background: linear-gradient(90deg, var(--red) 0 66%, var(--line) 66%);
}
.timeline li { position: relative; padding-top: var(--s7); }
.timeline li::before {
  content: ""; position: absolute; left: 0; top: 28px; width: 14px; height: 14px;
  background: var(--red); transform: rotate(45deg);
}
.timeline li.is-future::before { background: var(--basalt); border: 2px solid var(--red); }
.timeline__year {
  position: absolute; top: 0; left: 0;
  font-weight: 600; font-size: var(--fs-md); color: var(--mist); font-variant-numeric: tabular-nums;
}
.timeline h4 { margin: 0 0 var(--s2); font-size: var(--fs-lg); font-stretch: 100%; }
.timeline p { margin: 0; color: var(--mist); font-size: var(--fs-md); }

.mv { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); margin-top: var(--s8); }
.mv__item { padding: var(--s5); background: var(--shale); border: 1px solid var(--line); border-radius: var(--radius); }
.mv__item p { margin: 0; color: var(--bone); }

/* Servicios */
.services { background: var(--shale); }
.svc { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: var(--s7); align-items: start; }
.svc__preview { position: sticky; top: 110px; }
.svc__frame {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden;
  background: var(--basalt);
}
.svc__frame img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--m-200) var(--ease-out), transform var(--m-300) var(--ease-out); }
.svc__frame img.is-swapping { opacity: 0; transform: scale(1.03); }
.svc__caption { margin: var(--s3) 0 0; color: var(--mist); font-size: var(--fs-sm); }
.svc__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); counter-reset: svc; }
.svc__list li { border-bottom: 1px solid var(--line); }
.svc__list button {
  width: 100%; display: flex; gap: var(--s4); align-items: baseline; text-align: left;
  background: none; border: 0; cursor: pointer; padding: var(--s4) 0; min-height: 44px;
  font-size: var(--fs-lg); font-weight: 400; color: var(--mist);
  transition: color var(--m-200), transform var(--m-300) var(--ease-out);
}
.svc__list button::before {
  content: ""; flex: none; width: 10px; height: 10px; transform: rotate(45deg) translateY(-2px);
  border: 1.5px solid var(--line); transition: background-color var(--m-200), border-color var(--m-200);
}
.svc__list button[aria-pressed="true"] { color: var(--bone); transform: translateX(6px); }
@media (hover: hover) and (pointer: fine) { .svc__list button:hover { color: var(--bone); transform: translateX(6px); } }
.svc__list button[aria-pressed="true"]::before { background: var(--red); border-color: var(--red); }

/* Proyectos */
.tabs { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s5); }
.tabs button {
  min-height: 44px; padding: 0 var(--s4); border-radius: var(--radius);
  background: transparent; border: 1px solid var(--line); color: var(--mist); cursor: pointer;
  font-size: var(--fs-sm); font-weight: 600;
  transition: color var(--m-200), border-color var(--m-200), background-color var(--m-200);
}
.tabs button:hover { color: var(--bone); border-color: var(--mist); }
.tabs button[aria-selected="true"] { background: var(--red); border-color: var(--red); color: var(--on-red); }

.panel {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  background: var(--shale); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  min-height: 420px;
}
.panel__media { position: relative; overflow: hidden; }
.panel__media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.panel__body { padding: var(--s6); }
.panel__body h3 { font-weight: 600; font-size: var(--fs-xl); line-height: 1.1; margin: 0 0 var(--s4); }
.panel__body ul { list-style: none; margin: 0; padding: 0; }
.panel__body li { padding: var(--s3) 0 var(--s3) var(--s5); border-top: 1px solid var(--line); position: relative; color: var(--bone); }
.panel__body li::before {
  content: ""; position: absolute; left: 0; top: 26px; width: 12px; height: 2px; background: var(--red);
}
.panel.is-entering .panel__media img { animation: wipe var(--m-300) var(--ease-out); }
.panel.is-entering .panel__body > * { animation: rise var(--m-300) var(--ease-out); }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

/* Cobertura */
.coverage__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7); align-items: center; }
.depts {
  list-style: none; padding: 0; margin: var(--s6) 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--s4);
}
.depts li { padding: var(--s2) 0 var(--s2) var(--s4); border-bottom: 1px solid var(--line); position: relative; font-weight: 400; }
.depts li::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 8px; margin-top: -4px;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--red);
}
.coverage__map { margin: 0; background: var(--paper); border-radius: var(--radius); padding: var(--s5); }
.coverage__map img { margin-inline: auto; max-height: 560px; width: auto; }

/* Maquinaria */
.machines { background: var(--shale); }
.filter { display: flex; flex-wrap: wrap; gap: var(--s2); }
.filter button {
  min-height: 44px; padding: 0 var(--s4); border-radius: var(--radius); cursor: pointer;
  background: transparent; border: 1px solid var(--line); color: var(--mist); font-weight: 600; font-size: var(--fs-sm);
  transition: color var(--m-200), border-color var(--m-200);
}
.filter button:hover { color: var(--bone); }
.filter button[aria-pressed="true"] { color: var(--bone); border-color: var(--red); }

.mgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); perspective: 1200px; }
.mcard {
  position: relative; display: flex; flex-direction: column;
  background: var(--basalt); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transform-style: preserve-3d;
  transition: border-color var(--m-200) ease, opacity var(--m-200) ease;
}
@media (hover: hover) and (pointer: fine) { .mcard:hover { border-color: var(--line-strong); } }
.mcard[hidden] { display: none; }
.mcard__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink-deep); }
.mcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--m-300) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .mcard:hover .mcard__media img { transform: scale(1.04); } }
.mcard__units {
  position: absolute; right: var(--s3); bottom: var(--s3);
  background: var(--red); color: var(--on-red); font-weight: 800; font-stretch: 100%;
  padding: var(--s1) var(--s3); border-radius: var(--radius); font-size: var(--fs-sm);
  transform: translateZ(30px);
}
.mcard__body { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); flex: 1; }
.mcard__body h3 { margin: 0; font-weight: 600; font-size: var(--fs-lg); line-height: 1.15; }
.specs { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin: 0; padding: 0; list-style: none; }
.specs li { font-size: var(--fs-sm); color: var(--mist); font-weight: 600; }
.mcard__more { color: var(--mist); font-size: var(--fs-sm); margin: 0; }
.mcard__toggle {
  margin-top: auto; align-self: flex-start;
  background: none; border: 0; padding: var(--s2) 0; min-height: 44px; cursor: pointer;
  color: var(--bone); font-weight: 600; font-size: var(--fs-sm);
  display: inline-flex; align-items: center; gap: var(--s2);
}
.mcard__toggle i {
  width: 10px; height: 10px; border-right: 2px solid var(--red); border-bottom: 2px solid var(--red);
  transform: rotate(45deg) translateY(-3px); transition: transform var(--m-200) var(--ease-out);
}
.mcard__toggle[aria-expanded="true"] i { transform: rotate(225deg) translateY(-3px); }
.mcard--wide { grid-column: span 2; }
.mcard--wide .mcard__media { aspect-ratio: 21 / 9; background: var(--paper); }
.mcard--wide .mcard__media img { object-fit: contain; }

.others__title { margin-top: var(--s8); }
.others {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(max(min(130px, 100%), calc((100% - 3px) / 4)), 1fr)) /* de 1 a 4 columnas según el ancho */; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.others li {
  background: var(--shale); padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3);
  font-weight: 600; font-size: var(--fs-sm);
}
.others img { height: 44px; width: auto; filter: invert(1); opacity: 0.85; align-self: flex-start; }

/* Ventajas */
.edge__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--s7); align-items: center; }
.edge__media { margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; }
.edge__media img { width: 100%; height: 100%; object-fit: cover; }
.edge__list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s5); margin-top: var(--s5); }
.edge__list article { border-top: 2px solid var(--red); padding-top: var(--s3); }
.edge__list h3 { margin: 0 0 var(--s2); font-size: var(--fs-md); font-stretch: 100%; }
.edge__list p { margin: 0; color: var(--mist); font-size: var(--fs-md); }

/* Clientes */
.clients { padding-bottom: var(--s8); }
.clients__note { margin-top: var(--s5); color: var(--mist); font-size: var(--fs-xs); line-height: 1.5; }
.clients__note a { color: var(--mist); }
.marquee { display: flex; flex-direction: column; gap: var(--s3); overflow: hidden; }
.marquee__row { display: flex; gap: var(--s3); width: max-content; animation: slide 60s linear infinite; }
.marquee__row:nth-child(2) { animation-direction: reverse; animation-duration: 70s; }
.marquee.is-paused .marquee__row, .marquee:hover .marquee__row { animation-play-state: paused; }
.logo {
  flex: none; width: 180px; height: 104px; display: grid; place-items: center;
  background: var(--on-red); border-radius: var(--radius); padding: var(--s3);
  transition: transform var(--m-200) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .logo:hover { transform: translateY(-4px); } }
.logo img { max-height: 72px; max-width: 100%; object-fit: contain; }
@keyframes slide { to { transform: translateX(-50%); } }

/* Contacto */
.contact { background: var(--shale); }
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7); align-items: start; }
.cinfo { list-style: none; padding: 0; margin: var(--s6) 0; }
.cinfo li { display: grid; gap: var(--s1); padding: var(--s3) 0; border-top: 1px solid var(--line); word-break: break-word; }
.cinfo span { color: var(--mist); font-size: var(--fs-sm); }
.cinfo a { font-weight: 600; text-decoration: none; justify-self: start; min-height: 44px; display: inline-flex; align-items: center; }
.cinfo li { row-gap: 0; }
.cinfo a:hover { color: var(--red); }
.contact__map { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16 / 9; }
.contact__map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1) invert(0.9) contrast(0.9); }

.form {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4);
  background: var(--basalt); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s6);
}
.field { display: grid; gap: var(--s2); align-content: start; }
.field--full { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: var(--fs-sm); }
.opt { color: var(--mist); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: var(--s3); border-radius: var(--radius);
  background: var(--shale); border: 1px solid var(--field-border); color: var(--bone); font: inherit; font-size: var(--fs-md);
  transition: border-color var(--m-200);
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--red); }
.field input::placeholder, .field textarea::placeholder { color: var(--placeholder); }
.field.has-error input, .field.has-error textarea { border-color: var(--danger); }
.field__err { margin: 0; min-height: 0; color: var(--danger); font-size: var(--fs-sm); }
.form__actions { display: flex; flex-wrap: wrap; gap: var(--s3); }
.form__note { grid-column: 1 / -1; margin: 0; color: var(--mist); font-size: var(--fs-sm); }

/* Footer */
.footer { border-top: 1px solid var(--line); padding-block: var(--s6); background: var(--basalt); }
.footer__grid { display: grid; grid-template-columns: auto 1fr 1fr auto; gap: var(--s5); align-items: center; color: var(--mist); font-size: var(--fs-sm); }
.footer__grid img { height: 64px; width: auto; }
.footer__grid p { margin: 0; }
.footer a { text-decoration: none; }
.footer__top { min-height: 44px; display: inline-flex; align-items: center; color: var(--bone); font-weight: 600; }
.footer__top:hover { color: var(--red); }

/* Mapa con consentimiento */
.map-gate {
  height: 100%; display: grid; align-content: center; gap: var(--s3); padding: var(--s5);
  background: repeating-linear-gradient(135deg, var(--shale) 0 14px, var(--shale-2) 14px 15px);
}
.map-gate p { margin: 0; color: var(--mist); font-size: var(--fs-sm); max-width: 46ch; }
.map-gate__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); }
.map-gate__link { color: var(--bone); font-weight: 600; font-size: var(--fs-sm); min-height: 44px; display: inline-flex; align-items: center; }
.map-gate__link:hover { color: var(--red); }

/* Autorización de datos */
.check__row { display: flex; gap: var(--s3); align-items: flex-start; }
.check input { flex: none; width: 22px; height: 22px; min-height: 0; margin: 2px 0 0; accent-color: var(--red); cursor: pointer; }
.check label { font-weight: 400; font-size: var(--fs-sm); color: var(--bone); }
.check a { color: var(--bone); }
.form__legal { margin: 0; color: var(--mist); font-size: var(--fs-xs); line-height: 1.5; }

/* Pie legal */
.footer__social { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin: var(--s5) auto 0; padding-top: 0; padding-bottom: 0; list-style: none; }
.footer__social a {
  min-height: 44px; display: inline-flex; align-items: center; gap: var(--s2);
  color: var(--mist); font-size: var(--fs-sm); font-weight: 600;
  transition: color var(--m-200) ease;
}
.footer__social svg { flex: none; }
.footer__social .ico--fill { fill: currentColor; }
.footer__social .ico--stroke { fill: none; stroke: currentColor; stroke-width: 2; }
@media (hover: hover) and (pointer: fine) { .footer__social a:hover { color: var(--bone); } }
.footer__legal {
  display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); align-items: center;
  margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line);
  color: var(--mist); font-size: var(--fs-sm);
}
.footer__legal a, .linklike { color: var(--mist); min-height: 44px; display: inline-flex; align-items: center; }
.footer__legal a:hover, .linklike:hover { color: var(--bone); }
.linklike { background: none; border: 0; padding: 0; font: inherit; font-size: var(--fs-sm); text-decoration: underline; cursor: pointer; }
.footer__legal > span { margin-right: auto; }

/* Aviso de cookies */
.consent {
  position: fixed; left: var(--s4); bottom: var(--s4); z-index: 60;
  width: min(460px, calc(100% - 2 * var(--s4)));
  padding: var(--s4); background: var(--shale-2); border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  animation: rise var(--m-300) var(--ease-out);
}
.consent p { margin: 0 0 var(--s4); font-size: var(--fs-sm); line-height: 1.5; color: var(--bone); }
.consent strong { color: var(--bone); }
.consent a { color: var(--bone); }
.consent__actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.consent__actions .btn { flex: 1 1 auto; justify-content: center; }

/* Páginas legales */
.legal { padding: 140px 0 var(--s8); }
.legal .wrap { max-width: 860px; }
.legal h1 { font-stretch: var(--wide); font-weight: 800; font-size: var(--fs-2xl); line-height: 1.08; margin: 0 0 var(--s3); }
.legal__meta { color: var(--mist); margin: 0 0 var(--s6); }
.legal h2 { font-stretch: 100%; font-size: var(--fs-lg); margin: var(--s6) 0 var(--s3); }
.legal p, .legal li { color: var(--bone); }
.legal ul, .legal ol { padding-left: 1.2em; }
.legal li { margin-bottom: var(--s2); }
.legal a { color: var(--bone); }
.legal table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin: var(--s3) 0; }
.legal th, .legal td { text-align: left; padding: var(--s3) var(--s2); border-bottom: 1px solid var(--line); vertical-align: top; }
.legal th { color: var(--mist); font-weight: 600; }
.legal .tbl { overflow-x: auto; }
.legal .box { background: var(--shale); border: 1px solid var(--line); border-left: 2px solid var(--red); padding: var(--s4); border-radius: var(--radius); }
.nav--plain { background: rgba(16, 18, 21, 0.96); border-bottom-color: var(--line); }

/* ===== Responsivo ===== */
@media (max-width: 1100px) {
  .mgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
  .nav__links, .nav__cta { display: none; }
  .nav__menu {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 7px;
    margin-left: auto; width: 48px; height: 48px; padding: 0 12px;
    background: none; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer;
  }
  .nav__menu span { display: block; height: 2px; background: var(--bone); transition: transform var(--m-200) var(--ease-out); }
  .nav__menu[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
  .nav__menu[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }

  .about__grid, .svc, .coverage__grid, .edge__grid, .contact__grid, .mv { grid-template-columns: 1fr; }
  .about__media, .edge__media { aspect-ratio: 16 / 10; }
  .svc__preview { top: 68px; z-index: 2; background: var(--shale); padding-bottom: var(--s2); }
  .svc__frame { aspect-ratio: 16 / 8; }
  .svc__caption { display: none; }
  .panel { grid-template-columns: 1fr; }
  .panel__media { aspect-ratio: 16 / 10; }
  .timeline { grid-template-columns: 1fr; gap: var(--s4); }
  .timeline::before { left: 6px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: linear-gradient(var(--red) 0 66%, var(--line) 66%); }
  .timeline li { padding: 0 0 0 var(--s6); }
  .timeline li::before { top: 6px; }
  .timeline__year { position: static; display: block; margin-bottom: var(--s1); }
  .footer__grid { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
  body { font-size: var(--fs-md); }
  .consent { left: var(--s3); bottom: var(--s3); width: calc(100% - 2 * var(--s3)); }
  .legal { padding-top: 110px; }
  .wrap { padding-inline: var(--s3); }
  .nav { padding-inline: var(--s3); height: 68px; }
  .menu { inset: 68px 0 0 0; }
  .nav__brand img { height: 44px; }
  .hero { padding: 48svh var(--s3) var(--s7); }
  .hero::after { background: linear-gradient(0deg, var(--basalt) 8%, rgba(16,18,21,0.85) 45%, rgba(16,18,21,0) 62%); }
  .hero__actions .btn { flex: 1 1 100%; justify-content: center; }
  .tag3d, .hero__scroll { display: none; }
  .section { padding-block: var(--s8); }
  .section__head { margin-bottom: var(--s6); }
  .lead { font-size: var(--fs-md); }
  .mgrid { grid-template-columns: 1fr; }
  .mcard--wide { grid-column: auto; }
  .mcard--wide .mcard__media { aspect-ratio: 16 / 10; }
  .depts { grid-template-columns: repeat(2, 1fr); }
  .edge__list { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; padding: var(--s4); }
  .form__actions .btn { flex: 1 1 100%; justify-content: center; }
  .panel__body { padding: var(--s4); }
  .figures dd { font-size: var(--fs-xl); }
  .logo { width: 140px; height: 84px; }
  .svc__list button { font-size: var(--fs-md); padding: var(--s3) 0; }
}

/* ===== Movimiento reducido ===== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .js .hero__title .line > span, .js .hero__kicker, .js .hero__lead, .js .hero__actions { transform: none; opacity: 1; }
  .marquee__row { animation: none !important; flex-wrap: wrap; width: auto; }
  .marquee { padding-inline: var(--s3); }
  .marquee__row[aria-hidden="true"] { display: none; }
  #marqueeBtn { display: none; }
}

/* utilidades de páginas legales (sin estilos en línea por la CSP) */
.push-right { margin-left: auto; }
.legal__foot { margin-top: var(--s6); }
.footer__legal--solo { margin-top: 0; border-top: 0; }
[data-pendiente] { background: var(--red); color: var(--on-red); padding: 0 var(--s1); }

/* =====================================================================
   Experiencia de scroll (estilo "scrollytelling")
   ===================================================================== */

/* Cargador */
.loader {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-content: center; justify-items: center; gap: var(--s4);
  background: var(--basalt); color: var(--bone);
  transition: clip-path 900ms var(--ease-in-out);
  clip-path: inset(0 0 0 0);
}
.loader img { width: 96px; height: auto; }
.loader__read {
  font-stretch: var(--wide); font-weight: 800; font-size: clamp(56px, 10vw, 140px); line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -0.04em;
}
.loader__read small { font-size: 0.3em; color: var(--red); margin-left: 0.1em; }
/* La barra es un barreno: la broca gira y avanza, y el tramo perforado queda en rojo */
.loader__bar { position: relative; width: min(320px, 70vw); height: 20px; margin-left: 46px; }
.loader__bar::before,
.loader__bar i { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 2px; }
.loader__bar::before { background: var(--line); }
.loader__bar i { background: var(--red); transform-origin: left; transform: scaleX(0); }
.loader__drill { position: absolute; inset: 0; transform: translateX(-100%); }
.loader__bit { position: absolute; right: -1px; top: 0; display: block; animation: bit-shake 90ms linear infinite; }
.loader__shank { fill: var(--mist); }
.loader__body { fill: var(--bone); }
.loader__flutes { fill: var(--basalt); animation: bit-spin 180ms linear infinite; }
.loader__chip {
  position: absolute; right: 0; top: 9px; width: 2px; height: 2px; background: var(--mist);
  opacity: 0; animation: bit-chip 420ms var(--ease-out) infinite;
}
.loader__chip:nth-of-type(2) { --cy: 7px; animation-delay: 140ms; }
.loader__chip:nth-of-type(3) { --cy: -7px; animation-delay: 280ms; }
.loader.is-done .loader__bit,
.loader.is-done .loader__flutes,
.loader.is-done .loader__chip { animation-play-state: paused; }
.loader.is-done .loader__chip { visibility: hidden; }
@keyframes bit-spin { to { transform: translateX(6px); } }
@keyframes bit-shake { 50% { transform: translateY(0.6px); } }
@keyframes bit-chip {
  0% { opacity: 1; transform: translate(0, 0); }
  100% { opacity: 0; transform: translate(-16px, var(--cy, -5px)); }
}
.loader p { margin: 0; color: var(--mist); font-size: var(--fs-sm); }
.is-revealed .loader { clip-path: inset(0 0 100% 0); }
.no-motion .loader { display: none; }

/* Nav que se esconde al bajar */
.nav { transition: transform var(--m-300) var(--ease-out), background-color var(--m-300) var(--ease-out), border-color var(--m-300); }
.nav.is-hidden { transform: translateY(-100%); }

/* Recorrido fijado */
.journey { position: relative; height: 460vh; }
.journey__sticky {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display: flex; align-items: center; padding: 96px var(--gutter) var(--s6);
}
.journey__sticky::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(16,18,21,0.9) 0%, rgba(16,18,21,0.5) 34%, rgba(16,18,21,0) 58%);
}
.journey__panel { position: relative; width: min(460px, 100%); }
.journey__title { font-size: var(--fs-sm); font-weight: 600; color: var(--mist); margin: 0 0 var(--s5); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; }
.step {
  grid-area: 1 / 1; /* todos los pasos ocupan la misma celda */
  opacity: 0; transform: translateY(16px); visibility: hidden;
  filter: blur(6px);
  transition: opacity var(--m-150) var(--ease-out), transform var(--m-150) var(--ease-out), filter var(--m-150) var(--ease-out), visibility 0s var(--m-150);
}
.step.is-active {
  opacity: 1; transform: none; visibility: visible; filter: none;
  transition: opacity 450ms var(--ease-out) 120ms, transform 450ms var(--ease-out) 120ms, filter 450ms var(--ease-out) 120ms;
}
.step__n { display: block; color: var(--mist); font-weight: 600; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; margin-bottom: var(--s3); }
.step h3 {
  font-stretch: var(--wide); font-weight: 800; font-size: var(--fs-2xl); line-height: 1; letter-spacing: -0.03em;
  margin: 0 0 var(--s4);
}
.step p { margin: 0; color: var(--bone); font-size: var(--fs-md); max-width: 40ch; }
.journey__meter { display: flex; align-items: center; gap: var(--s4); margin-top: var(--s6); color: var(--mist); font-size: var(--fs-sm); }
.journey__meter b { color: var(--bone); font-variant-numeric: tabular-nums; }
.journey__bar { flex: 1; max-width: 200px; height: 2px; background: var(--line); overflow: hidden; }
.journey__bar i { display: block; height: 100%; background: var(--red); transform-origin: left; transform: scaleX(0); }

/* Sin movimiento: el recorrido es una lista normal */
.no-motion .journey { height: auto; background: var(--basalt); }
.no-motion .journey__sticky { position: static; height: auto; padding-block: var(--s8); }
.no-motion .journey__sticky::before { display: none; }
.no-motion .steps { gap: var(--s6); }
.no-motion .step { grid-area: auto; opacity: 1; transform: none; visibility: visible; }
.no-motion .journey__meter { display: none; }

/* Titulares que suben palabra por palabra */
.h2 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.h2 .w > span { display: inline-block; }

/* Bandas de texto gigante */
.band {
  position: relative; z-index: 1; overflow: hidden; background: var(--basalt);
  padding-block: var(--s6); border-block: 1px solid var(--line);
}
.band__track {
  display: flex; align-items: center; gap: 0.35em; width: max-content; white-space: nowrap;
  font-stretch: var(--wide); font-weight: 800; font-size: clamp(56px, 10vw, 140px); line-height: 1; letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 1.5px var(--line-strong);
}
.band__track i { width: 0.28em; height: 0.28em; background: var(--red); transform: rotate(45deg); flex: none; }
.band--light { background: var(--bone); border-color: var(--bone); }
.band--light .band__track { color: var(--basalt); -webkit-text-stroke: 0; }

/* Maquinaria horizontal (escritorio con movimiento) */
.h-machines .machines { padding-top: 0; }
.h-machines .machines__pin { height: 100vh; height: 100svh; padding-top: 72px; display: flex; flex-direction: column; justify-content: center; background: var(--shale); overflow: hidden; }
.h-machines .machines__pin .section__head { margin-bottom: var(--s4); }
.h-machines .machines__pin .h2 { font-size: var(--fs-xl); margin-bottom: var(--s2); }
.h-machines .machines__pin .lead { font-size: var(--fs-md); }
.h-machines .mcard__body { padding: var(--s3) var(--s4); gap: var(--s2); }
.h-machines .mcard__toggle { min-height: 44px; }
.h-machines .hscroll { overflow: visible; padding-left: max(var(--s5), calc((100vw - var(--vp-wide)) / 2 + var(--s5))); }
.h-machines .mgrid { display: flex; gap: var(--s4); width: max-content; perspective: none; }
.h-machines .mcard { width: 340px; flex: none; }
.h-machines .mcard--wide { width: 560px; grid-column: auto; }
.h-machines .mcard__media { aspect-ratio: 3 / 2; max-height: 32vh; width: 100%; }
.h-machines .mcard--wide .mcard__media { aspect-ratio: auto; height: min(227px, 32vh); }
.h-machines .others__title { margin-top: var(--s7); }

/* Cursor que sigue al ratón (el cursor del sistema se mantiene) */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 95; pointer-events: none;
  width: 0; height: 0; opacity: 0;
  transition: opacity var(--m-200) ease;
}
.cursor::before {
  content: ""; position: absolute; left: -32px; top: -32px; width: 64px; height: 64px; border-radius: 50%;
  border: 1px solid var(--red); background: rgba(227, 38, 45, 0);
  transform: scale(0.53);
  transition: transform var(--m-300) var(--ease-out), background-color var(--m-200) ease;
}
.cursor.is-on { opacity: 0.9; }
.cursor.is-link::before { transform: scale(1); background: rgba(227, 38, 45, 0.12); }
.cursor.is-down::before { transform: scale(0.45); transition-duration: var(--m-100); }

@media (max-width: 767.98px) {
  .journey { height: 420vh; }
  .journey__sticky { align-items: flex-end; padding: 0 var(--s3) var(--s6); }
  .journey__sticky::before { background: linear-gradient(0deg, rgba(16,18,21,0.95) 0%, rgba(16,18,21,0.8) 40%, rgba(16,18,21,0) 62%); }
  .step h3 { font-size: var(--fs-xl); }
  .step p { font-size: var(--fs-md); }
  .band { padding-block: var(--s4); }
}

/* ===== Ajustes para que se sienta nativo en el teléfono (skill mobile-native) ===== */
:root { color-scheme: dark; }
a, button, label, select { -webkit-tap-highlight-color: transparent; }
button, .btn, .tabs button, .filter button { touch-action: manipulation; }
.nav { padding-top: env(safe-area-inset-top); height: calc(76px + env(safe-area-inset-top)); padding-inline: max(var(--s5), env(safe-area-inset-left)) max(var(--s5), env(safe-area-inset-right)); }
.consent { bottom: calc(var(--s4) + env(safe-area-inset-bottom)); }
.footer { padding-bottom: calc(var(--s6) + env(safe-area-inset-bottom)); }
@media (max-width: 767.98px) {
  .nav { height: calc(68px + env(safe-area-inset-top)); padding-inline: max(var(--s3), env(safe-area-inset-left)) max(var(--s3), env(safe-area-inset-right)); }
  .consent { bottom: calc(var(--s3) + env(safe-area-inset-bottom)); }
}
/* en la fila horizontal GSAP mueve las fotos: sin transición CSS que lo retrase */
.h-machines .mcard__media img { transition: none; }

/* ===== Tablets en vertical (768–1100 px): mismo esquema que el celular en el inicio y el recorrido =====
   El 3D va arriba y el texto abajo; en horizontal se mantiene el esquema de escritorio (texto a la izquierda).
   scene.js usa el mismo criterio para encuadrar el modelo. */
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1100px) {
  .hero { padding: 46svh var(--s5) var(--s8); }
  .hero::after { background: linear-gradient(0deg, var(--basalt) 8%, rgba(16,18,21,0.85) 42%, rgba(16,18,21,0) 60%); }
  .tag3d, .hero__scroll { display: none; }
  .journey__sticky { align-items: flex-end; padding: 0 var(--s5) var(--s7); }
  .journey__sticky::before { background: linear-gradient(0deg, rgba(16,18,21,0.95) 0%, rgba(16,18,21,0.8) 38%, rgba(16,18,21,0) 58%); }
  .journey__panel { width: min(560px, 100%); }
}
.others li { min-width: 0; overflow-wrap: anywhere; }

/* ===== Vidrio (nav en pastilla, módulo del inicio y tarjetas sobre foto) ===== */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow), var(--glass-hi);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

/* Nav: logo a la izquierda, enlaces en una pastilla centrada y botón rojo a la derecha */
@media (min-width: 960.02px) {
  .nav__links {
    margin-inline: auto; padding: var(--s1); gap: 2px;
    border-radius: var(--radius-pill);
    background: var(--glass-bg);
    border: 1px solid var(--glass-edge);
    box-shadow: var(--glass-shadow), var(--glass-hi);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
  }
  .nav__links a { min-height: 40px; padding: 0 var(--s3); border-radius: var(--radius-pill); transition: color var(--m-200), background-color var(--m-200); }
  .nav__links a::after { bottom: 5px; left: 50%; right: auto; width: 16px; margin-left: -8px; transform-origin: center; }
  .nav__links a:hover { background: rgba(238, 234, 227, 0.08); }
  .nav__links a.is-active { background: rgba(238, 234, 227, 0.1); }
  /* al bajar ya no hay barra sólida: solo una sombra que mantiene legible el logo */
  .nav.is-solid { background: linear-gradient(180deg, rgba(16, 18, 21, 0.8) 0%, rgba(16, 18, 21, 0) 100%); border-bottom-color: transparent; }
  .nav--plain .nav__links { margin-left: auto; }
}

/* Celular y tablet: barra y botón del menú en vidrio */
@media (max-width: 960px) {
  .nav.is-solid {
    background: var(--glass-bg-strong); border-bottom-color: var(--glass-edge);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  }
  .nav__menu {
    border-radius: 12px; border-color: var(--glass-edge); background: var(--glass-bg);
    box-shadow: var(--glass-hi);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  }
  .hero__actions { display: flex; padding: var(--s3); }
}

/* Tarjeta de vidrio sobre una foto */
.about__media, .edge__media { position: relative; }
.photo-card {
  position: absolute; left: var(--s4); right: var(--s4); bottom: var(--s4);
  display: flex; flex-direction: column; gap: var(--s1);
  padding: var(--s3) var(--s4); border-radius: var(--radius-glass);
  color: var(--bone); font-size: var(--fs-sm); line-height: 1.4;
}
.photo-card b { font-stretch: var(--wide); font-weight: 800; font-size: var(--fs-lg); line-height: 1.1; }
.photo-card span { color: var(--bone); }
@media (max-width: 767.98px) { .photo-card { left: var(--s3); right: var(--s3); bottom: var(--s3); padding: var(--s3); } }

/* Sin desenfoque disponible o si la persona pide menos transparencia: superficies opacas */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .nav__links, .nav__menu, .nav.is-solid { background: rgba(16, 18, 21, 0.92); }
}
@media (prefers-reduced-transparency: reduce) {
  .glass, .nav__links, .nav__menu { background: var(--shale); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav.is-solid { background: rgba(16, 18, 21, 0.96); -webkit-backdrop-filter: none; backdrop-filter: none; }
}