/* ==========================================================================
   Express Rentals — sistema de diseño
   Concepto: la página es un instrumento de medición.
   El soporte es papel: las fichas técnicas, los diagramas de carga y los
   planos de ingeniería viven en blanco, y este sitio presenta justo eso.
   ========================================================================== */

:root {
  /* --- Marca (tomada del logo) --- */
  --marca: #233268;          /* marino oficial */
  --marca-cian: #2A5A9A;     /* medio del degradado de la X */
  --marca-cian-claro: #B9DDF5;

  /* --- Tokens semánticos: tema claro (por defecto) --- */
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-alt: #F3F6FB;
  --text: #101A2E;
  --text-dim: #5D6E8A;
  --text-soft: #64738D;      /* 4.5:1 sobre blanco — se usa en texto de 10–11 px */
  --heading: #233268;        /* titulares y cifras: marino de marca sobre claro */
  --line: #DDE4EF;
  --line-strong: #B9C5D8;    /* la regla necesita más peso que un borde cualquiera */
  --line-soft: #EAEFF6;
  --accent: #2A7FD4;         /* cian legible sobre blanco */
  --accent-bright: #4FA3E3;  /* para superficies grandes y gráficos */
  --on-accent: #FFFFFF;

  /* Tipografía */
  --display: 'Archivo', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  --t-xs: 0.75rem;  --t-sm: 0.8125rem;  --t-base: 0.9375rem;
  --t-md: 1.0625rem;  --t-lg: 1.375rem;   --t-xl: 2rem;
  --t-2xl: 3rem;
  --t-3xl: clamp(2rem, 4.4vw, 3.5rem);
  --t-mega: clamp(3.25rem, 9vw, 6.5rem);

  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem;
  --s-5:1.5rem; --s-6:2rem;  --s-8:3rem;   --s-10:4rem;
  --s-12:6rem;  --s-16:8rem;

  --rail-w: 78px;
  --max: 1320px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* Bloques oscuros de puntuación dentro de la página clara.
   Al redefinir los tokens, todo lo que vive dentro se adapta solo.
   El hero y el header que se sienta encima son oscuros siempre —
   la entrada dramática de la Opción B. De "resultados" hacia abajo
   todo queda en el papel blanco de la Opción A.
   Tono: marino profundo (#080D1E) — Opción 2 del comparador, elegida
   sobre el cálido (#16224A) para que el cian salte con más fuerza.
   Se aplica parejo a hero/header/cobertura/footer para no dejar dos
   marinos oscuros distintos conviviendo en el mismo sitio. */
.sec--dark, .ftr, .hero, .hdr, .fhero {
  --bg: #080D1E;
  --surface: #0D1530;
  --surface-alt: #101A3A;
  --text: #FBFCFE;
  --text-dim: #AFBDD1;
  --text-soft: #97A8C2;
  --line: rgba(175,189,209,.18);
  --line-strong: rgba(175,189,209,.38);
  --line-soft: rgba(175,189,209,.1);
  --accent: #4FA3E3;
  --on-accent: #08122B;
}

/* Tono de referencia: el marino cálido que se descartó (Opción 1 del
   comparador). Se activa con ?hero=calido — queda como archivo de la
   decisión, no se usa en el sitio por defecto. */
[data-hero="calido"] .hero, [data-hero="calido"] .hdr,
[data-hero="calido"] .sec--dark, [data-hero="calido"] .ftr, [data-hero="calido"] .fhero {
  --bg: #16224A;
  --surface: #1C2B58;
  --surface-alt: #16224A;
  --text: #FFFFFF;
  --text-dim: #A8B7D0;
  --text-soft: #9AABC6;
  --line: rgba(255,255,255,.16);
  --line-strong: rgba(255,255,255,.34);
  --line-soft: rgba(255,255,255,.09);
  --accent: #4FA3E3;
  --on-accent: #0B1330;
}

/* Tema oscuro completo — sólo para comparar direcciones (?tema=oscuro) */
[data-tema="oscuro"] {
  --bg: #080D1E;
  --surface: #0D1530;
  --surface-alt: #101A3A;
  --text: #FBFCFE;
  --text-dim: #AFBDD1;
  --text-soft: #97A8C2;
  --line: rgba(175,189,209,.18);
  --line-strong: rgba(175,189,209,.38);
  --line-soft: rgba(175,189,209,.1);
  --accent: #4FA3E3;
  --on-accent: #08122B;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--display);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

h1,h2,h3,h4 { margin:0; font-weight:700; line-height:1.05; letter-spacing:-.02em; }
p { margin:0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
img, svg { max-width: 100%; display: block; }

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

/* ==========================================================================
   Preloader — pantalla completa mientras carga la página. Siempre marino
   oscuro con el logo completo, sin importar el tema de la sección de abajo
   (es un momento de marca, no parte del contenido). Se oculta con JS al
   terminar de cargar (evento load); si JS fallara por lo que sea, la
   animación CSS de respaldo la oculta sola a los 6s para nunca dejar la
   página bloqueada.
   ========================================================================== */
.preloader {
  position: fixed; inset: 0; z-index: 300;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-6);
  background: #080D1E;
  opacity: 1; visibility: visible;
  transition: opacity .4s var(--ease), visibility .4s var(--ease);
  animation: preloaderForceHide 0s 6s forwards;
}
.preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader__logo { width: min(220px, 55vw); height: auto; animation: preloaderPulse 1.8s ease-in-out infinite; }
.preloader__bar { width: 140px; height: 2px; background: rgba(175,189,209,.18); overflow: hidden; position: relative; border-radius: 2px; }
.preloader__bar i { position: absolute; inset: 0; width: 40%; background: #4FA3E3; animation: preloaderSlide 1.1s ease-in-out infinite; }
@keyframes preloaderSlide { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }
@keyframes preloaderPulse { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }
@keyframes preloaderForceHide { to { opacity: 0; visibility: hidden; pointer-events: none; } }
@media (prefers-reduced-motion: reduce) {
  .preloader__logo { animation: none; }
  .preloader__bar i { animation: none; left: 0; width: 100%; }
}

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--s-5); }

/* 0.875rem (14px): a propósito no es var(--t-xs) — ese token lo comparten
   decenas de micro-etiquetas (specs de tarjeta, tags, números de paso...)
   que no hace falta tocar. .eyebrow y .q__lbl sí son el mismo tipo de
   texto ("rótulo de sección" / "pregunta del selector") y deben leerse
   como una sola familia — incluida la altura, aquí y en .q__lbl más
   abajo. Igual en escritorio y en móvil: no hay motivo para que un
   rótulo cambie de tamaño según el ancho de pantalla. */
.eyebrow {
  font-family: var(--mono); font-size: 0.875rem;
  letter-spacing:.16em; text-transform: uppercase;
  color: var(--accent); font-weight: 500;
}

/* ==========================================================================
   Header
   ========================================================================== */
.hdr {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  /* Sticky sobre secciones claras: sombra propia, no sólo el filete de --line */
  box-shadow: 0 1px 0 rgba(8,13,30,.25);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .hdr { background: var(--bg); }
}
.hdr__in {
  display:flex; align-items:center; gap:var(--s-5);
  height:72px; max-width:var(--max); margin-inline:auto; padding-inline:var(--s-5);
}

/* En el header va sólo el wordmark: a 36 px la banda del lockup es ilegible.
   El header es oscuro siempre, así que siempre es el wordmark blanco. */
.logo { display:block; flex-shrink:0; }
.logo img { height:44px; width:auto; }
.logo--ftr img { height:62px; margin-bottom:var(--s-4); }

/* .hdr__menu agrupa nav + buscador — en desktop es sólo un contenedor de
   paso (mismo resultado visual que antes); en móvil se convierte en el
   panel que abre la hamburguesa. Va todo junto porque el buscador no se
   puede duplicar (su JS lo toma por id, una sola vez por página). */
.hdr__menu { display:flex; align-items:center; gap:var(--s-5); margin-left:auto; }
.nav { display:flex; gap:var(--s-5); align-items:center; }
.nav a {
  font-family:var(--mono); font-size:var(--t-sm);
  text-transform:uppercase; letter-spacing:.1em; color:var(--text-dim);
  padding:var(--s-2) 0; border-bottom:2px solid transparent;
  transition:color .18s var(--ease), border-color .18s var(--ease);
}
.nav a:hover { color:var(--text); border-bottom-color:var(--accent); }

/* 48px: por encima del mínimo de 44px que pide Apple para un objetivo
   táctil cómodo en iPhone. El -webkit-tap-highlight-color deja el
   destello nativo del toque, que en iOS es la única señal de que el
   botón sí registró — sin él se siente muerto aunque haya respondido. */
.nav-toggle {
  display:none; align-items:center; justify-content:center;
  width:48px; height:48px; margin-left:auto; flex-shrink:0;
  padding:0; -webkit-appearance:none; appearance:none;
  background:none; border:none; color:var(--text); cursor:pointer;
  touch-action:manipulation;
}

/* Buscador por modelo — la puerta de las rentadoras */
.search { position:relative; flex-shrink:0; }
.search input {
  font-family:var(--mono); font-size:var(--t-xs);
  width:190px; padding:var(--s-2) var(--s-3) var(--s-2) 30px;
  background:var(--surface-alt); border:1px solid var(--line);
  color:var(--text); letter-spacing:.04em;
  transition:border-color .18s var(--ease);
}
.search input::placeholder { color:var(--text-soft); }
.search input:focus { outline:none; border-color:var(--accent); }
.search__icon { position:absolute; left:9px; top:50%; transform:translateY(-50%); color:var(--text-soft); pointer-events:none; }
.search__out {
  position:absolute; top:calc(100% + 6px); right:0; width:320px;
  background:var(--surface); border:1px solid var(--line);
  max-height:340px; overflow-y:auto; display:none; z-index:70;
  box-shadow:0 12px 32px rgba(16,26,46,.12);
}
.search__out.on { display:block; }
.search__row {
  display:flex; justify-content:space-between; gap:var(--s-3);
  padding:var(--s-3) var(--s-4); border-bottom:1px solid var(--line-soft);
  font-size:var(--t-sm);
}
.search__row:hover { background:var(--surface-alt); }
.search__row b { font-weight:700; }
.search__row span { font-family:var(--mono); font-size:var(--t-xs); color:var(--accent); }

/* ==========================================================================
   Hero — la regla de altura sobre papel de ingeniería
   ========================================================================== */
.hero { position:relative; background:var(--bg); overflow:hidden; }
/* Retícula tenue: soporte de plano técnico, no decoración */
.hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, var(--line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image: radial-gradient(circle at 62% 40%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 62% 40%, #000 0%, transparent 72%);
}
.hero__grid {
  position:relative; z-index:2;
  display:grid; grid-template-columns:var(--rail-w) 1fr;
  max-width:var(--max); margin-inline:auto;
  min-height:calc(100svh - 72px);
}

/* --- La regla --- */
.rail { position:relative; border-right:1px solid var(--line-strong); padding-block:var(--s-6); }
.rail__inner { position:sticky; top:104px; height:62vh; min-height:400px; }
.rail__track { position:absolute; inset:0; }
.tick {
  position:absolute; right:0; width:100%;
  display:flex; align-items:center; justify-content:flex-end; gap:var(--s-2);
  transform:translateY(50%);
}
.tick__line { height:1px; background:var(--line-strong); width:12px; }
.tick--major .tick__line { width:26px; background:var(--text-soft); }
.tick__num { font-family:var(--mono); font-size:var(--t-xs); color:var(--text-soft); min-width:22px; text-align:right; }
.tick--major .tick__num { color:var(--text-dim); font-weight:500; }

.rail__cursor {
  position:absolute; right:0; width:100%; height:2px;
  background:var(--accent); transform:translateY(50%);
  transition:bottom .25s var(--ease);
}
.rail__cursor::after {
  content:''; position:absolute; right:-5px; top:-4px;
  width:10px; height:10px; background:var(--accent);
  clip-path:polygon(100% 0, 100% 100%, 0 50%);
}
.rail__fill {
  position:absolute; right:0; width:3px; bottom:0;
  background:linear-gradient(to top, color-mix(in srgb, var(--accent) 12%, transparent), var(--accent));
  transition:height .25s var(--ease);
}
.rail__human { position:absolute; right:34px; bottom:0; color:var(--text-soft); }
.rail__humanLbl {
  position:absolute; right:34px; bottom:-18px;
  font-family:var(--mono); font-size:9px; color:var(--text-soft);
  letter-spacing:.06em; white-space:nowrap;
}

/* --- Contenido del hero --- */
.hero__body {
  padding:var(--s-8) var(--s-5) var(--s-10) var(--s-8);
  display:flex; flex-direction:column; justify-content:center;
}
/* El instrumento (altura + regla) a la izquierda, los filtros secundarios
   a la derecha — así los 4 filtros no apilan la página hacia abajo. */
.hero__cols { display:grid; grid-template-columns:minmax(320px,1fr) minmax(360px,1.05fr); gap:var(--s-10); align-items:start; }
.hero__filtros { display:flex; flex-direction:column; gap:var(--s-5); padding-top:var(--s-3); }
/* #h2sel: antes era el h1 de toda la página. Ahora ese lugar lo ocupa el
   titular de la landing (#lpH1) y este pasó a ser el título de la segunda
   pantalla — mismo estilo, jerarquía correcta. */
.hero h2 {
  font-size:var(--t-3xl); text-transform:uppercase;
  font-stretch:105%; max-width:15ch;
  margin-block:var(--s-3) var(--s-5);
  color:var(--text);
}
.hero h2 em { font-style:normal; color:var(--accent); }

/* El número es el héroe */
.readout { display:flex; align-items:baseline; gap:var(--s-3); margin-bottom:var(--s-2); }
.readout__n {
  font-weight:800; font-size:var(--t-mega); line-height:.82;
  letter-spacing:-.055em; font-variant-numeric:tabular-nums;
  color:var(--text);
}
.readout__u { font-family:var(--display); font-weight:800; font-size:var(--t-lg); color:var(--accent); }
.readout__lbl {
  font-family:var(--mono); font-size:var(--t-xs); color:var(--text-dim);
  text-transform:uppercase; letter-spacing:.16em; margin-bottom:var(--s-4);
}

/* Slider */
.slider { width:min(560px,100%); margin-bottom:var(--s-5); }
.slider input[type=range] {
  -webkit-appearance:none; appearance:none;
  width:100%; height:34px; background:transparent; cursor:grab;
}
.slider input[type=range]:active { cursor:grabbing; }
.slider input[type=range]::-webkit-slider-runnable-track { height:3px; background:var(--line); }
.slider input[type=range]::-moz-range-track { height:3px; background:var(--line); }
.slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:22px; height:22px; margin-top:-10px;
  background:var(--accent); border:3px solid var(--bg);
  box-shadow:0 0 0 1px var(--accent);
}
.slider input[type=range]::-moz-range-thumb {
  width:22px; height:22px; border:3px solid var(--bg);
  background:var(--accent); box-shadow:0 0 0 1px var(--accent);
}
.slider__ends {
  display:flex; justify-content:space-between;
  font-family:var(--mono); font-size:var(--t-xs); color:var(--text-soft); margin-top:-4px;
}

/* Preguntas — mismo tamaño, tracking y peso que .eyebrow (ver arriba);
   sólo el color cambia a propósito, para distinguir un rótulo de sección
   (azul) de la etiqueta de un campo del formulario (gris). */
.q__lbl {
  font-family:var(--mono); font-size:0.875rem; font-weight:500; color:var(--text-dim);
  text-transform:uppercase; letter-spacing:.16em; margin-bottom:var(--s-3);
}
.q__val {
  font-weight:800; font-size:var(--t-xl); letter-spacing:-.03em; line-height:1;
  color:var(--accent); font-variant-numeric:tabular-nums; margin-bottom:var(--s-3);
}
.q .slider { margin-bottom:var(--s-3); margin-top:0; }
.chips { display:flex; flex-wrap:wrap; gap:var(--s-2); }
.chip {
  font-size:var(--t-sm); padding:var(--s-2) var(--s-4);
  border:1px solid var(--line); color:var(--text-dim);
  background:var(--surface); white-space:nowrap;
  transition:all .16s var(--ease);
}
.chip:hover { border-color:var(--text-dim); color:var(--text); }
.chip[aria-pressed="true"] {
  background:var(--accent); border-color:var(--accent);
  color:var(--on-accent); font-weight:700;
}
/* Antes llevaba opacity:.75 — bajaba el contraste del texto por debajo
   del mínimo legible cuando el chip estaba seleccionado (fondo de acento).
   El tono ya viene más suave que el título del chip por el color solo,
   no hace falta restarle opacidad encima. */
.chip small { display:block; font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.04em; }

.hero__cta { display:flex; align-items:center; gap:var(--s-5); flex-wrap:wrap; }
.count { font-family:var(--mono); font-size:var(--t-sm); color:var(--text-dim); }
.count b { color:var(--accent); font-size:var(--t-md); font-weight:600; }

.note {
  border-left:2px solid var(--accent);
  padding:var(--s-3) var(--s-4);
  background:var(--surface-alt);
  font-size:var(--t-sm); color:var(--text-dim);
  max-width:60ch; margin-top:var(--s-5);
}
.note b { color:var(--text); font-weight:600; }

/* ==========================================================================
   Botones
   ========================================================================== */
.btn {
  display:inline-flex; align-items:center; gap:var(--s-2);
  font-family:var(--mono); font-size:var(--t-xs);
  text-transform:uppercase; letter-spacing:.12em; font-weight:500;
  padding:var(--s-3) var(--s-5); border:1px solid transparent;
  transition:all .18s var(--ease);
}
/* El botón principal repite el paralelogramo de la banda del logo */
.btn--amber {
  background:var(--accent); color:var(--on-accent); font-weight:700;
  padding-inline:calc(var(--s-5) + 10px);
  clip-path:polygon(11px 0, 100% 0, calc(100% - 11px) 100%, 0 100%);
}
.btn--amber:hover { background:var(--marca); color:#fff; }
.btn--ghost { border-color:var(--line); color:var(--text-dim); }
.btn--ghost:hover { border-color:var(--text); color:var(--text); }
.btn--wa { background:#25D366; color:#06331A; font-weight:700; }
.btn--wa:hover { filter:brightness(1.1); }
.btn__icon { flex:none; }

/* Botón-link — mismo trazo que .btn--ghost pero más chico, para acciones
   secundarias que no deben competir con el CTA principal (ver .card__acts /
   .fhero__cta--compra). Lleva borde a propósito: sin él, en móvil (sin
   :hover) se lee como texto suelto, no como algo clicable. */
.btn-link {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  font-family:var(--mono); font-size:var(--t-xs);
  text-transform:uppercase; letter-spacing:.1em; font-weight:500;
  color:var(--text-dim); background:none; border:1px solid var(--line); padding:var(--s-2);
  transition:color .18s var(--ease), border-color .18s var(--ease);
}
.btn-link:hover { color:var(--text); border-color:var(--text-dim); }
.btn-link.is-activo { color:var(--accent); border-color:var(--accent); font-weight:700; }
.sec--dark .btn-link.is-activo, .fhero .btn-link.is-activo { color:var(--accent-bright); border-color:var(--accent-bright); }

/* ==========================================================================
   Secciones
   ========================================================================== */
.sec { padding-block:var(--s-12); background:var(--bg); color:var(--text); }
.sec--alt { background:var(--surface-alt); }
.sec--dark { background:var(--bg); color:var(--text); }
.sec__head { margin-bottom:var(--s-8); }
.sec__head h2 { font-size:var(--t-3xl); text-transform:uppercase; margin-top:var(--s-3); max-width:26ch; color:var(--marca); }
.sec--dark .sec__head h2 { color:var(--text); }
.sec__lead { color:var(--text-dim); margin-top:var(--s-4); max-width:56ch; }

/* Cuando el encabezado trae texto de apoyo (sec__lead), el título y el
   párrafo se ponían uno encima del otro en una sola columna angosta,
   dejando todo el resto de la fila en blanco en pantallas anchas. Si hay
   lead, se ponen lado a lado; si no lo hay (sólo título), el h2 más
   grande de arriba ya ocupa más por su cuenta. */
@media (min-width:900px) {
  .sec__head:has(> .sec__lead) {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(240px,380px);
    column-gap:var(--s-8);
  }
  .sec__head:has(> .sec__lead) .eyebrow { grid-column:1; grid-row:1; }
  .sec__head:has(> .sec__lead) h2 { grid-column:1; grid-row:2; max-width:none; }
  /* El lead arranca en la misma línea que el título (no el eyebrow) y
     lleva su propia línea divisoria — así lee como un panel al lado
     del título, no como un párrafo suelto flotando en el aire. */
  .sec__head:has(> .sec__lead) .sec__lead {
    grid-column:2; grid-row:2; align-self:start;
    margin-top:0; max-width:none;
    border-left:1px solid var(--line-strong);
    padding-left:var(--s-6);
  }
  .sec__head .note { grid-column:1/-1; margin-top:var(--s-6); }
}

/* Resultados */
/* El header es sticky y mide 72 px: sin este margen, al saltar a un ancla
   desde el nav el título de la sección queda escondido detrás de él. */
#resultados, #buscador, #familias, #cobertura, #proceso, #contacto, #venta {
  scroll-margin-top:84px;
}
.grid-eq {
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fill, minmax(272px,1fr));
  background:var(--line); border:1px solid var(--line);
}
.card {
  background:var(--surface); padding:var(--s-5);
  display:flex; flex-direction:column; gap:var(--s-4);
  transition:background .18s var(--ease); position:relative;
  overflow:hidden; /* recorta el zoom de .card__photo en el borde de la tarjeta */
}
.card:hover { background:var(--surface-alt); }
/* Sólo los equipos con foto real la muestran — el resto se queda en el
   tratamiento tipográfico, que es la base de diseño del sitio.

   El sangrado (que la foto llegue al borde de la tarjeta, cancelando el
   padding) vive en .card__photoWrap, NO en el <img>: un <img> con
   width:calc(100% + Npx) + margen negativo calcula mal el ancho (falta
   exactamente ese Npx extra — probado comparándolo contra un <div>
   idéntico, que sí lo calcula bien). Por eso quedaba un hueco de 48px a
   la derecha donde se asomaba el fondo de la tarjeta. El <div> hace el
   sangrado, la <img> adentro sólo llena su 100%/100% con object-fit. */
.card__photoWrap {
  aspect-ratio:4/3; background:var(--surface); overflow:hidden;
  width:calc(100% + var(--s-5) * 2); margin:calc(var(--s-5) * -1) calc(var(--s-5) * -1) 0;
}
/* Blanco puro, no --surface-alt: las 64 fotos vienen en aspectos muy
   distintos (camiones panorámicos ~2:1, plumas angostas ~0.6:1) forzados
   a esta caja fija de 4:3 — donde el aspecto no calza, object-fit:contain
   deja franjas vacías arriba/abajo o a los lados. Con --surface-alt esas
   franjas se veían como un fondo gris-azulado asomando detrás de la foto,
   que además hacía parecer descentrado el equipo (aunque object-position
   ya lo centraba bien). En blanco, la franja se funde con el blanco de
   la foto misma y desaparece. */
.card__photo {
  display:block; width:100%; height:100%; object-fit:contain;
  transition:transform .35s var(--ease);
}
.card:hover .card__photo { transform:scale(1.06); }
.card__top { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--s-3); }
.card__topRight { display:flex; flex-direction:column; align-items:flex-end; gap:var(--s-2); }
.card__cmp {
  display:flex; align-items:center; gap:6px; cursor:pointer;
  font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-dim); white-space:nowrap;
}
.card__cmp:hover { color:var(--text-dim); }
.card__cmp input { width:13px; height:13px; accent-color:var(--accent); cursor:pointer; }
.card--cmp .card__cmp { color:var(--accent); font-weight:700; }
.card--cmp { outline:2px solid var(--accent); outline-offset:-1px; }
.card__marca { font-family:var(--mono); font-size:var(--t-xs); color:var(--text-dim); text-transform:uppercase; letter-spacing:.1em; }
.card__modelo { font-size:var(--t-lg); font-weight:700; letter-spacing:-.02em; margin-top:2px; color:var(--marca); }
.card__modelo a:hover { text-decoration:underline; text-underline-offset:3px; }
.sec--dark .card__modelo { color:var(--text); }

.tag {
  font-family:var(--mono); font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; padding:3px 7px; white-space:nowrap;
  border:1px solid currentColor;
}
.tag--elec { color:#0C7A52; }
.tag--diesel { color:var(--text-dim); }
.tag--hibrida { color:var(--accent); }
/* El verde claro sólo es legible sobre fondo oscuro — .fhero (fichas) se
   había quedado fuera de esta lista y heredaba el verde de tema claro
   sobre fondo marino: 4.2:1, por debajo del mínimo. */
[data-tema="oscuro"] .tag--elec, .sec--dark .tag--elec, .hero .tag--elec, .fhero .tag--elec { color:#5FD6A6; }

.card__h { display:flex; align-items:baseline; gap:var(--s-2); }
.card__h b { font-size:2.75rem; font-weight:800; letter-spacing:-.05em; line-height:1; color:var(--marca); }
.sec--dark .card__h b { color:var(--text); }
.card__h span { font-family:var(--mono); font-size:var(--t-sm); color:var(--accent); }
.card__hlbl { font-family:var(--mono); font-size:var(--t-xs); color:var(--text-dim); text-transform:uppercase; letter-spacing:.12em; margin-top:2px; }

/* Barra de altura mini — misma escala que la regla */
.hbar { height:3px; background:var(--line); position:relative; }
.hbar i { position:absolute; inset:0 auto 0 0; background:var(--accent); }

.specs { display:grid; grid-template-columns:1fr 1fr; gap:var(--s-2) var(--s-4); }
.spec { display:flex; justify-content:space-between; gap:var(--s-2); font-family:var(--mono); font-size:var(--t-xs); }
.spec dt { color:var(--text-dim); }
.spec dd { margin:0; color:var(--text); font-weight:600; }

/* WhatsApp manda (es la conversión real); "Añadir a cotización" es un paso
   secundario de comparación, así que baja a link discreto debajo — no
   compite en peso visual con la acción principal. */
.card__acts { display:flex; flex-direction:column; gap:var(--s-1); margin-top:auto; padding-top:var(--s-2); }
.card__acts .btn--wa { justify-content:center; padding:var(--s-3) var(--s-2); gap:var(--s-2); }
.card__acts .btn__icon { flex:none; }
.card__verficha {
  display:block; text-align:center; margin-top:calc(var(--s-2) * -1);
  font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-dim);
}
.card__verficha:hover { color:var(--accent); }

.empty { padding:var(--s-10); text-align:center; color:var(--text-dim); border:1px dashed var(--line); }
.empty b { display:block; color:var(--text); font-size:var(--t-lg); margin-bottom:var(--s-3); }

/* Placeholder mientras carga data/equipos.json — sin esto, estos bloques se
   quedan completamente en blanco (parecen rotos) hasta que resuelve el fetch.
   El propio render() los reemplaza por completo, así que desaparece solo. */
.loading-placeholder {
  grid-column:1/-1; padding:var(--s-8); text-align:center;
  font-family:var(--mono); font-size:var(--t-xs); text-transform:uppercase;
  letter-spacing:.1em; color:var(--text-soft);
}

/* Familias */
.fams { display:grid; gap:1px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); background:var(--line); border:1px solid var(--line); }
.fam { background:var(--surface); transition:background .18s var(--ease); }
.fam:hover { background:var(--accent); }
/* La foto vive en su propio recuadro blanco fijo — el fondo de la tarjeta
   cambia a acento en hover, pero el recuadro se queda blanco siempre para
   que la foto (fondo blanco de estudio) no truene contra el color. */
.fam__foto {
  height:132px; background:#fff; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  border-bottom:1px solid var(--line);
}
.fam__foto img {
  max-width:88%; max-height:82%; object-fit:contain;
  transition:transform .35s var(--ease);
}
.fam:hover .fam__foto img { transform:scale(1.06); }
.fam__texto { padding:var(--s-5); }
.fam__n { font-family:var(--mono); font-size:var(--t-xs); color:var(--text-dim); }
.fam h3 { font-size:var(--t-md); margin-block:var(--s-2) var(--s-3); text-transform:uppercase; color:var(--marca); }
.fam p { font-family:var(--mono); font-size:var(--t-xs); color:var(--text-dim); }
.fam:hover .fam__n, .fam:hover p, .fam:hover h3 { color:var(--on-accent); }

/* Plazas */
.plazas { display:grid; gap:1px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); background:var(--line); border:1px solid var(--line); }
.plaza { background:var(--surface); padding:var(--s-5); display:flex; flex-direction:column; align-items:flex-start; }
.plaza h3 { font-size:var(--t-md); text-transform:uppercase; }
.plaza .eyebrow { margin-bottom:var(--s-2); }
.plaza p { font-size:var(--t-sm); color:var(--text-dim); margin-top:var(--s-3); }
/* Empuja el botón al fondo de la tarjeta SIN comerse el espacio mínimo
   que ya se veía bien en Guadalajara. margin-top:auto solo (intento
   anterior) resolvía a 0 en la tarjeta más alta — Guadalajara, al no
   tener espacio extra que repartir, quedaba con el botón pegado al
   texto: se corrigió el desnivel pero se rompió el aire que sí tenía.
   Este spacer siempre mide al menos var(--s-5) (el mismo gap que
   Guadalajara ya tenía) y con flex:1 crece para absorber el sobrante
   en las tarjetas más cortas — así todas terminan con el botón a la
   misma altura Y con el mismo aire mínimo arriba. */
.plaza__spacer { flex:1 0 auto; min-height:var(--s-5); }
.plaza__link {
  padding:var(--s-2) var(--s-3);
  border:1px solid var(--line-strong);
  font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-dim); white-space:nowrap; transition:all .16s var(--ease);
}
.plaza__link:hover { border-color:var(--accent); color:var(--accent); }

/* Proceso */
.pasos { display:grid; gap:var(--s-6); grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.paso { border-top:2px solid var(--accent); padding-top:var(--s-4); }
.paso__n { font-family:var(--mono); font-size:var(--t-xs); color:var(--accent); letter-spacing:.14em; }
.paso h3 { font-size:var(--t-md); text-transform:uppercase; margin-block:var(--s-3) var(--s-3); color:var(--marca); }
.sec--dark .paso h3 { color:var(--text); }
.paso p { color:var(--text-dim); font-size:var(--t-sm); }

/* Incluye */
/* Mismo lenguaje de tarjeta con borde que .plazas y .fams — antes era una
   fila de etiquetas de puro texto, la única sección que no calzaba con
   el resto del sitio. */
.incluye {
  display:grid; gap:1px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  background:var(--line); border:1px solid var(--line);
  margin-top:var(--s-6); padding:0;
}
.incluye li {
  list-style:none; background:var(--surface);
  padding:var(--s-5); display:flex; align-items:flex-start; gap:var(--s-4);
}
.incluye svg { flex-shrink:0; color:var(--accent); margin-top:1px; }
.incluye span { font-size:var(--t-sm); font-weight:600; color:var(--text); line-height:1.4; }

/* Venta — secundario a propósito: la renta es el negocio principal, esto
   es una salida discreta para quien SÍ quiere comprar, no una segunda
   vitrina compitiendo por atención con el catálogo de renta. */
.venta { padding-block:var(--s-8); border-top:1px solid var(--line); }
.venta__in { display:flex; align-items:center; justify-content:space-between; gap:var(--s-6); flex-wrap:wrap; }
.venta__in > div { max-width:56ch; }
.venta__in h2 { font-size:var(--t-lg); text-transform:none; color:var(--marca); margin-top:var(--s-2); }
.venta__in .sec__lead { margin-top:var(--s-2); font-size:var(--t-sm); }
.venta__in .btn { flex-shrink:0; }

/* Footer */
.ftr { background:var(--bg); color:var(--text); padding-block:var(--s-10) var(--s-6); }
.ftr__grid { display:grid; gap:var(--s-8); grid-template-columns:1.15fr .75fr 1.2fr .85fr; }
.ftr h4 { font-family:var(--mono); font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.14em; color:var(--accent); margin-bottom:var(--s-4); font-weight:500; }
.ftr a, .ftr p { display:block; color:var(--text-dim); font-size:var(--t-sm); margin-bottom:var(--s-2); }
.ftr a:hover { color:var(--text); }
.ftr__social { display:flex; gap:var(--s-2); margin-top:var(--s-4); }
.ftr__social a {
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; margin-bottom:0; flex-shrink:0;
  border-radius:50%; border:1px solid var(--line); color:var(--text-dim);
  transition:border-color .18s var(--ease), color .18s var(--ease), background .18s var(--ease);
}
.ftr__social a svg { width:18px; height:18px; }
.ftr__social a:hover { color:var(--accent); border-color:var(--accent); background:var(--surface-alt); }
.ftr__contact a { display:flex; align-items:center; gap:var(--s-2); }
.ftr__contact svg { flex-shrink:0; color:var(--accent); }
.ftr__hora b { color:var(--text); font-weight:700; }

/* El mapa flota como tarjeta clara sobre el footer oscuro — mismo
   tratamiento que la foto de producto en cada ficha de equipo. */
.ftr__mapa iframe {
  width:100%; height:130px; border:1px solid var(--line);
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  margin-block:var(--s-3) var(--s-2);
}
.ftr__vermapa { font-family:var(--mono); font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.08em; }
.ftr__vermapa:hover { color:var(--accent); }
.ftr__legal {
  margin-top:var(--s-8); padding-top:var(--s-5); border-top:1px solid var(--line);
  font-family:var(--mono); font-size:var(--t-xs); color:var(--text-soft);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--s-3);
}

/* ==========================================================================
   Ficha de equipo — la especificación técnica es el contenido principal
   ========================================================================== */
.fhero { padding-block: var(--s-10) var(--s-8); background:var(--bg); color:var(--text); }
.fhero__layout { display:block; }
/* Sólo los equipos con foto real llevan esta columna — el resto no cambia de layout */
.fhero__layout--conFoto { display:grid; grid-template-columns:1fr 340px; gap:var(--s-8); align-items:center; }
.fhero__photo {
  border:1px solid var(--line-strong);
  box-shadow:0 24px 60px rgba(0,0,0,.4);
}
.fhero__photo img { width:100%; height:auto; display:block; }
@media (max-width:900px) {
  .fhero__layout--conFoto { grid-template-columns:1fr; }
  .fhero__photo { max-width:280px; }
}
.fhero__crumb {
  font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.06em; color:var(--text-dim);
  display:flex; flex-wrap:wrap; gap:.5em; align-items:center; margin-bottom:var(--s-8);
}
.fhero__crumb a:hover { color:var(--text); }
.fhero__crumb i { font-style:normal; color:var(--line-strong); }

.fhero__top { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--s-6); flex-wrap:wrap; margin-bottom:var(--s-8); }
.fhero__id h1 { font-size:var(--t-2xl); text-transform:uppercase; color:var(--text); max-width:18ch; margin-top:var(--s-2); }
.fhero__tags { display:flex; gap:var(--s-2); flex-wrap:wrap; }

.fhero__bottom { display:flex; justify-content:space-between; align-items:flex-end; gap:var(--s-8); flex-wrap:wrap; }
.fhero__cta { display:flex; gap:var(--s-3); flex-wrap:wrap; }

/* Variante de .fhero__cta para el par WhatsApp + Añadir a cotización de la
   ficha de producto: WhatsApp manda (columna, ancho fijo, botón grande),
   "Añadir" baja a link secundario debajo — misma jerarquía que .card__acts. */
.fhero__cta--compra { flex-direction:column; align-items:stretch; width:100%; max-width:320px; gap:var(--s-1); }
.fhero__cta--compra .btn--wa { justify-content:center; padding:var(--s-4) var(--s-5); font-size:var(--t-sm); gap:var(--s-2); }

/* Tabla de especificaciones completa — el héroe de la página */
.specfull {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(210px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); margin-top:var(--s-6);
}
.specfull__item { background:var(--surface); padding:var(--s-5); }
.specfull__item dt {
  font-family:var(--mono); font-size:var(--t-xs); color:var(--text-soft);
  text-transform:uppercase; letter-spacing:.1em; margin-bottom:var(--s-2);
}
.specfull__item dd {
  margin:0; font-size:var(--t-lg); font-weight:700; color:var(--marca);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}

.backlink {
  display:inline-flex; align-items:center; gap:var(--s-2);
  font-family:var(--mono); font-size:var(--t-xs); text-transform:uppercase;
  letter-spacing:.1em; color:var(--accent); margin-top:var(--s-8);
}
.backlink:hover { color:var(--marca); }

@media (max-width:640px) {
  .fhero__top, .fhero__bottom { flex-direction:column; align-items:flex-start; }
  .specfull { grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); }
}

/* ==========================================================================
   Cotización — carrito multi-equipo
   ========================================================================== */
.cotiz-lista {
  list-style:none; margin:0 0 var(--s-8); padding:0;
  border:1px solid var(--line); background:var(--line);
  display:flex; flex-direction:column; gap:1px;
}
.cotiz-item {
  display:flex; align-items:center; gap:var(--s-4);
  background:var(--surface); padding:var(--s-4) var(--s-5);
}
.cotiz-item__foto {
  width:56px; height:44px; object-fit:contain; background:var(--surface-alt); flex-shrink:0;
}
.cotiz-item__ph { width:56px; height:44px; background:var(--surface-alt); flex-shrink:0; }
.cotiz-item__info { flex:1; min-width:0; }
.cotiz-item__marca { font-family:var(--mono); font-size:var(--t-xs); color:var(--text-dim); text-transform:uppercase; }
.cotiz-item__modelo { font-weight:700; color:var(--marca); }
.cotiz-item__val { font-family:var(--mono); font-size:var(--t-xs); color:var(--accent); }
.cotiz-item__qty {
  width:56px; padding:var(--s-2); text-align:center;
  border:1px solid var(--line); background:var(--surface-alt); color:var(--text);
  font-family:var(--mono); font-size:var(--t-sm); flex-shrink:0;
}
.cotiz-item__quitar {
  flex-shrink:0; width:44px; height:44px; display:grid; place-items:center;
  border:1px solid var(--line); color:var(--text-soft); font-size:1.1rem; line-height:1;
}
.cotiz-item__quitar:hover { border-color:#C0392B; color:#C0392B; }

.cotiz-form__grupo { margin-bottom:var(--s-8); }
.cotiz-form__grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:var(--s-4); margin-top:var(--s-4); }
.campo { display:flex; flex-direction:column; gap:var(--s-2); }
.campo--ancho { grid-column:1 / -1; }
.campo span {
  font-family:var(--mono); font-size:var(--t-xs); color:var(--text-dim);
  text-transform:uppercase; letter-spacing:.08em;
}
.campo input, .campo select {
  font-family:var(--display); font-size:var(--t-base); color:var(--text);
  background:var(--surface-alt); border:1px solid var(--line);
  padding:var(--s-3) var(--s-4);
}
.campo input:focus, .campo select:focus { outline:none; border-color:var(--accent); }
.campo__combo { display:flex; gap:var(--s-2); }
.campo__combo input { width:70px; flex-shrink:0; }
.campo__combo select { flex:1; }

.cotiz-form__acts { display:flex; gap:var(--s-3); flex-wrap:wrap; margin-top:var(--s-6); }

/* ==========================================================================
   Comparador — 2-3 equipos lado a lado
   ========================================================================== */
.comparador { margin-top:var(--s-10); padding-top:var(--s-8); border-top:1px solid var(--line); }
.comparador__head { margin-bottom:var(--s-6); }

.cmp-wrap { overflow-x:auto; border:1px solid var(--line); margin-bottom:var(--s-5); }
.cmp-tabla { width:100%; min-width:480px; border-collapse:collapse; }
.cmp-tabla th, .cmp-tabla td {
  border-bottom:1px solid var(--line); padding:var(--s-3) var(--s-4);
  font-family:var(--mono); font-size:var(--t-sm);
}
.cmp-tabla thead th {
  background:var(--surface-alt); vertical-align:top; text-align:center;
  border-bottom:2px solid var(--line); min-width:150px;
}
.cmp-tabla thead th img { width:100%; max-width:120px; height:64px; object-fit:contain; margin:0 auto var(--s-2); background:var(--surface); }
.cmp-marca { color:var(--text-dim); text-transform:uppercase; font-size:var(--t-xs); letter-spacing:.08em; }
.cmp-modelo { color:var(--marca); font-weight:700; font-family:var(--display); font-size:var(--t-md); margin-block:2px var(--s-2); }
.cmp-quitar {
  font-family:var(--mono); font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.06em;
  color:var(--text-dim); border:1px solid var(--line); padding:4px 8px; background:none;
}
.cmp-quitar:hover { color:#C0392B; border-color:#C0392B; }

.cmp-tabla tbody th {
  text-align:left; color:var(--text-dim); text-transform:uppercase; letter-spacing:.06em;
  font-size:var(--t-xs); background:var(--surface-alt); white-space:nowrap;
}
.cmp-tabla tbody td { text-align:center; color:var(--text); font-variant-numeric:tabular-nums; }
.cmp-tabla tbody tr:last-child th, .cmp-tabla tbody tr:last-child td { border-bottom:none; }

/* WhatsApp flotante — círculo fijo, sólo ícono, en todos los tamaños */
.wa-float {
  position:fixed; right:20px; bottom:20px; z-index:80;
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.3);
  transition:transform .18s var(--ease);
}
.wa-float svg { width:28px; height:28px; }
.wa-float span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.wa-float:hover { transform:translateY(-2px) scale(1.05); }

/* Carrito de cotización flotante — círculo fijo, esquina opuesta a
   WhatsApp para que no compitan, mismo tratamiento (sólo ícono, en todos
   los tamaños). El conteo va en una insignia, no en texto. */
.cotiz-float {
  position:fixed; left:20px; bottom:20px; z-index:80;
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:50%;
  background:var(--marca); color:#fff; border:1px solid rgba(255,255,255,.25);
  box-shadow:0 8px 28px rgba(16,26,46,.28);
  transition:transform .18s var(--ease), background .18s var(--ease);
}
.cotiz-float svg { width:24px; height:24px; }
.cotiz-float__label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.cotiz-float__badge {
  position:absolute; top:-3px; right:-3px;
  min-width:20px; height:20px; padding:0 4px; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent); color:var(--on-accent); border:2px solid var(--bg);
  border-radius:999px; font-family:var(--mono); font-size:11px; font-weight:700;
}
.cotiz-float:hover { transform:translateY(-2px) scale(1.05); }

/* Botón "volver arriba" — mismo lado que WhatsApp, apilado justo encima.
   Oculto hasta que hay algo de página que subir. */
.top-float {
  position:fixed; right:20px; bottom:88px; z-index:79;
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  background:#fff; color:var(--marca);
  box-shadow:0 6px 18px rgba(0,0,0,.28);
  opacity:0; pointer-events:none; transform:translateY(8px);
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.top-float.visible { opacity:1; pointer-events:auto; transform:translateY(0); }
.top-float:hover { transform:translateY(-2px); }

/* Barra de comparación flotante — avisa que hay una comparación activa y
   ofrece saltar directo a la tabla, en vez de dejar que el usuario la
   pierda al fondo de la página. Vive por encima de wa-float/cotiz-float
   (mismo bottom:88px que top-float) para no encimarse con esos círculos. */
.cmp-bar {
  position:fixed; left:50%; bottom:88px; z-index:78;
  transform:translateX(-50%) translateY(8px);
  display:flex; align-items:center; gap:14px;
  max-width:calc(100% - 40px);
  background:var(--marca); color:#fff;
  padding:10px 10px 10px 18px; border-radius:999px;
  box-shadow:0 8px 28px rgba(16,26,46,.28);
  font-size:var(--t-sm);
  opacity:0; pointer-events:none;
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.cmp-bar.visible { opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.cmp-bar__txt { white-space:nowrap; font-weight:600; }
.cmp-bar__link { color:#fff; text-decoration:underline; white-space:nowrap; }
.cmp-bar__link:hover { opacity:.85; }
.cmp-bar__cerrar {
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%; flex:none;
  background:rgba(255,255,255,.15); color:#fff; border:none;
  font-size:18px; line-height:1; cursor:pointer;
}
.cmp-bar__cerrar:hover { background:rgba(255,255,255,.28); }
@media (max-width:480px) {
  /* bottom:140px — libra toda la columna de flotantes (wa-float/cotiz-float
     en 20-76px y "volver arriba" en 88-128px), que en pantallas chicas la
     barra centrada sí alcanza a tocar. */
  .cmp-bar { gap:10px; padding:8px 8px 8px 14px; font-size:var(--t-xs); bottom:140px; max-width:calc(100% - 24px); }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1000px) {
  body.nav-open { overflow:hidden; }
  /* backdrop-filter en .hdr crea un "contaiing block" para sus hijos
     position:fixed — el cajón (hijo de .hdr__in, hijo de .hdr) se
     posicionaría relativo a los 72px del header en vez de a toda la
     pantalla, y se vería comprimido en una franja arriba. Se cambia el
     desenfoque por un fondo casi opaco (efecto visual parecido) sólo en
     móvil, donde vive el cajón. */
  /* z-index 70: el backdrop se cuelga de <body>, así que su z-index (64)
     compite en el contexto raíz — mientras que el del cajón (65) sólo
     compite DENTRO del header, porque .hdr es sticky con z-index y crea
     su propio contexto de apilamiento. Con .hdr en 60, el backdrop (64)
     quedaba encima de todo el header: los links del cajón no recibían el
     toque, lo recibía el backdrop, que sólo cierra — se tocaba una
     sección y no navegaba a ningún lado. Subiendo el header por encima
     de 64 el orden vuelve a ser el correcto. Sigue debajo de los
     flotantes de WhatsApp/cotización (80) y de "volver arriba" (79). */
  .hdr { backdrop-filter:none; background:var(--bg); z-index:70; }
  .hdr__in { position:relative; }
  /* Centrado de verdad, no "a la izquierda porque ya no hay nav a la
     derecha": se saca del flujo flex para que no dependa de cuánto
     espacio deje la hamburguesa. Ojo: .hdr__in acota esto al logo del
     header — .logo también vive en el footer (.logo--ftr) y ese NO se
     debe sacar de su lugar. */
  .hdr__in .logo { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
  .nav-toggle { display:flex; z-index:66; position:relative; }

  /* Cajón que entra desde la derecha, no dropdown que cae desde arriba.
     Se queda siempre en flex (nunca display:none) para que el transform
     pueda animar — "cerrado" es sacarlo de la pantalla con translateX,
     no quitarlo del documento. visibility evita que se pueda tabular
     hacia los links mientras está fuera de vista. */
  .hdr__menu {
    display:flex; flex-direction:column; align-items:stretch; gap:var(--s-5);
    position:fixed; top:72px; right:0; bottom:0;
    width:min(82%, 340px); margin-left:0;
    padding:var(--s-6) var(--s-5);
    background:var(--bg); border-left:1px solid var(--line);
    box-shadow:-16px 0 32px rgba(8,13,30,.22);
    overflow-y:auto; z-index:65;
    transform:translateX(100%); visibility:hidden;
    transition:transform .32s var(--ease), visibility .32s var(--ease);
  }
  .hdr__menu.is-open { transform:translateX(0); visibility:visible; }

  .hdr__backdrop {
    position:fixed; inset:72px 0 0 0; z-index:64;
    background:rgba(8,13,30,.45);
    opacity:0; pointer-events:none;
    transition:opacity .32s var(--ease);
  }
  .hdr__backdrop.is-open { opacity:1; pointer-events:auto; }

  .nav { flex-direction:column; align-items:flex-start; gap:var(--s-1); }
  .nav a { padding:var(--s-3) 0; width:100%; }
  .search { width:100%; }
  .search input { width:100%; box-sizing:border-box; }
  .search__out { width:100%; }

  .ftr__grid { grid-template-columns:1fr 1fr; }
  .hero__cols { grid-template-columns:1fr; gap:var(--s-8); }
  .hero__filtros { padding-top:0; gap:var(--s-6); }
  /* En escritorio las 4 preguntas ya van en su propia columna angosta,
     separadas del instrumento de altura por el grid de dos columnas — no
     hace falta más. En móvil todo cae en una sola columna larga y las 4
     preguntas se sentían como un bloque corrido; una línea + más aire
     arriba de cada una (menos la primera) las separa en grupos que se
     escanean de un vistazo, sin meter tarjetas ni fondos que no van con
     el resto del sitio. */
  .q { padding-top:var(--s-6); border-top:1px solid var(--line); }
  .q:first-child { padding-top:0; border-top:none; }
}
@media (max-width:760px) {
  :root { --rail-w:30px; }
  .hero__grid { min-height:auto; }
  .hero__body { padding:var(--s-6) var(--s-4) var(--s-8) var(--s-5); }
  .rail__inner { height:46vh; min-height:300px; }
  .rail__human, .rail__humanLbl { display:none; }
  /* Sin números en móvil: es puramente decorativa (aria-hidden), así
     que solo dejamos las marcas — libera ancho para el contenido real. */
  .tick__num { display:none; }
  .tick__line { width:10px; }
  .tick--major .tick__line { width:18px; }
  .sec { padding-block:var(--s-10); }
  .sec__head h2 { font-size:var(--t-xl); }
  .ftr__grid { grid-template-columns:1fr; }
}

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