/* ==========================================================================
   TU TRANSPORTATION — hoja de estilos única
   Paleta y lenguaje visual tomados del logo de la marca y de las pantallas
   reales de la subasta (azul marino del bloque, ámbar de la puja, luces).
   ========================================================================== */

:root{
  /* superficie */
  --ink:        #0B0E11;
  --ink-2:      #12181E;
  --ink-3:      #1B242D;
  --line:       #26323C;

  /* azul del bloque de subasta */
  --marine:     #072742;
  --marine-2:   #0D3B62;

  /* marca */
  --cyan:       #40AFE0;
  --cyan-hi:    #7ACDF0;
  --cyan-deep:  #06212E;

  /* texto */
  --bone:       #EEF3F6;
  --mute:       #93A0AB;

  /* señalética de subasta */
  --amber:      #F5B921;
  --green:      #35C05F;
  --red:        #E4483C;
  --blue:       #4A9BE8;

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

  /* medidas */
  /* en monitores grandes 1180px dejaba franjas vacías enormes a los lados */
  --wrap: 1440px;
  --pad: clamp(1.25rem, 5vw, 3rem);
  --gap: clamp(2rem, 5vw, 4rem);
  --sec-y: clamp(4.5rem, 11vw, 9rem);
  --r: 4px;
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--body);
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

::selection{ background:var(--cyan); color:var(--cyan-deep); }

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

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--cyan); color:var(--cyan-deep);
  padding:.75rem 1.25rem; font-weight:700; text-decoration:none;
}
.skip:focus{ left:1rem; top:1rem; }

/* ---------- tipografía base ---------- */

h1,h2,h3{
  font-family:var(--display);
  font-weight:800;
  font-stretch:80%;
  line-height:.94;
  letter-spacing:-.015em;
  text-transform:uppercase;
  margin:0;
  text-wrap:balance;
}

p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--cyan);
  margin:0 0 1.1rem;
}

.mono{ font-family:var(--mono); font-size:.92em; color:var(--cyan-hi); }

.fine{ font-size:.82rem; color:var(--mute); line-height:1.6; }

/* ---------- estructura ---------- */

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.wrap.narrow{ max-width:820px; }

.sec{ padding-block:var(--sec-y); position:relative; }

.sec-head{ max-width:56rem; margin-bottom:clamp(2.5rem,6vw,4.5rem); }
.sec-head h2{ font-size:clamp(2.1rem,5.5vw,3.9rem); margin-bottom:1.25rem; }
.h2-left{ font-size:clamp(2.1rem,5.5vw,3.9rem); margin-bottom:1.5rem; }

.sec-lede{ font-size:clamp(1.05rem,1rem + .35vw,1.22rem); color:var(--mute); max-width:48rem; }
.sec-lede.center{ margin-inline:auto; text-align:center; }

.big-text{ font-size:clamp(1.1rem,1rem + .5vw,1.35rem); line-height:1.6; color:#C6D1DA; }
.big-text b{ color:var(--bone); }

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

.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  background:var(--cyan); color:var(--cyan-deep);
  font-family:var(--body); font-weight:700; font-size:.95rem;
  letter-spacing:.005em; text-decoration:none;
  padding:.85rem 1.5rem; border-radius:999px; border:1px solid var(--cyan);
  transition:transform .2s cubic-bezier(.2,.8,.2,1), background .18s ease,
             box-shadow .2s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn:hover{ background:var(--cyan-hi); border-color:var(--cyan-hi); transform:translateY(-2px) scale(1.015); box-shadow:0 8px 26px -10px rgba(64,175,224,.75); }
.btn:active{ transform:translateY(0) scale(.97); transition-duration:.08s; }

/* el ícono se mueve un poco aparte del botón: refuerza que se puede tocar */
.btn .wa,.btn .cap{ transition:transform .28s cubic-bezier(.34,1.56,.64,1); }
.btn:hover .wa{ transform:scale(1.15) rotate(-6deg); }
.btn:hover .cap{ transform:scale(1.15) translateY(-1px); }

.btn-sm{ padding:.6rem 1.1rem; font-size:.86rem; }
.btn-lg{ padding:1.05rem 1.9rem; font-size:1.02rem; }

.btn-ghost{ background:transparent; color:var(--bone); border-color:var(--line); }
.btn-ghost:hover{ background:rgba(255,255,255,.06); border-color:var(--cyan); box-shadow:none; }

.btn-light{ background:var(--bone); border-color:var(--bone); color:var(--marine); }
.btn-light:hover{ background:#fff; border-color:#fff; box-shadow:0 8px 26px -10px rgba(0,0,0,.6); }

/* el botón que debe destacar: ámbar (el mismo color de las pujas) en vez
   del contorno neutro, con un pulso lento en reposo para que el ojo lo
   note sin tener que pasarle el cursor. Se detiene al interactuar. */
.btn-accent{
  background:var(--amber); color:var(--ink); border-color:var(--amber);
  animation:btn-accent-pulse 2.8s ease-in-out infinite;
}
.btn-accent:hover{
  background:#FFCB3D; border-color:#FFCB3D;
  box-shadow:0 10px 30px -8px rgba(245,185,33,.7);
  animation-play-state:paused;
}
.btn-accent:focus-visible{ animation-play-state:paused; }
@keyframes btn-accent-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(245,185,33,.5); }
  60%{ box-shadow:0 0 0 9px rgba(245,185,33,0); }
}

/* iconos dibujados en CSS (sin peticiones externas): WhatsApp y birrete */
.wa,.cap{
  width:1.15em; height:1.15em; flex:none;
  background-color:currentColor;
  -webkit-mask:var(--icon-svg) center/contain no-repeat;
          mask:var(--icon-svg) center/contain no-repeat;
}
.wa{ --icon-svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 004.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0012.04 2zm0 18.15a8.2 8.2 0 01-4.19-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.2 8.2 0 01-1.26-4.38c0-4.54 3.7-8.23 8.24-8.23a8.2 8.2 0 015.82 2.41 8.18 8.18 0 012.41 5.83c0 4.54-3.7 8.23-8.23 8.23zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.13-.16.24-.64.8-.78.97-.14.16-.29.18-.54.06-.25-.12-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.01-.38.11-.5.11-.11.25-.29.37-.43.12-.15.16-.25.25-.41.08-.17.04-.31-.02-.43-.06-.12-.56-1.34-.76-1.84-.2-.48-.4-.42-.56-.43h-.47c-.17 0-.43.06-.66.31-.23.25-.86.85-.86 2.06s.89 2.39 1.01 2.56c.12.16 1.75 2.67 4.23 3.74.59.26 1.05.41 1.41.52.59.19 1.13.16 1.56.1.48-.07 1.47-.6 1.68-1.18.21-.58.21-1.07.14-1.18-.06-.11-.22-.17-.47-.29z'/%3E%3C/svg%3E"); }
.cap{ --icon-svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 1 9l11 6 9-4.91V17h2V9L12 3Zm0 8.18L5.06 7.5 12 3.82l6.94 3.68L12 11.18ZM5 13.18v4.36L12 21l7-3.46v-4.36l-7 3.82-7-3.82Z'/%3E%3C/svg%3E"); }

/* ==========================================================================
   NAVBAR
   ========================================================================== */

.nav-wrap{
  position:fixed; inset:1rem 0 auto; z-index:100;
  padding-inline:var(--pad);
  transition:transform .35s ease;
}
.nav-wrap.hide{ transform:translateY(calc(-100% - 1.5rem)); }

.nav{
  max-width:var(--wrap); margin-inline:auto;
  display:flex; align-items:center; gap:1.5rem;
  padding:.55rem .65rem .55rem 1.35rem;
  background:rgba(11,14,17,.72);
  border:1px solid rgba(255,255,255,.09);
  border-radius:999px;
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
}

.nav-logo{ flex:none; line-height:0; }
.nav-logo img{ width:auto; height:22px; }

.nav-links{
  display:flex; gap:1.6rem; margin:0 auto 0 0; padding:0; list-style:none;
}
.nav-links a{
  font-size:.88rem; font-weight:500; color:#B9C5CE; text-decoration:none;
  transition:color .18s ease;
}
.nav-links a:hover{ color:var(--bone); }

.nav-toggle{
  display:none; flex:none;
  width:42px; height:42px; border-radius:50%;
  background:transparent; border:1px solid var(--line);
  cursor:pointer; padding:0;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav-toggle span{ display:block; width:16px; height:1.5px; background:var(--bone); transition:transform .25s ease, opacity .25s ease; }
.nav-toggle[aria-expanded="true"] span:first-child{ transform:translateY(3.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child{ transform:translateY(-3.25px) rotate(-45deg); }

.nav-mobile{
  max-width:var(--wrap); margin:.5rem auto 0; padding:1rem 1.5rem;
  list-style:none;
  background:rgba(11,14,17,.95);
  border:1px solid rgba(255,255,255,.09);
  border-radius:20px;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.nav-mobile li + li{ border-top:1px solid var(--line); }
.nav-mobile a{
  display:block; padding:.85rem 0; text-decoration:none;
  font-family:var(--display); font-weight:700; font-stretch:82%;
  text-transform:uppercase; letter-spacing:.01em; font-size:1.1rem;
}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-top:clamp(6rem,13vh,7.5rem);
  overflow:hidden;
}

/* el vídeo (16:9) ocupa todo el hero como fondo, en cualquier tamaño de pantalla */
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-video{ width:100%; height:100%; object-fit:cover; object-position:center 42%; }

/* doble velo: uno vertical que asienta el ticker y otro desde la izquierda,
   que es donde cae el titular; sin él el texto compite con la multitud del vídeo */
.hero-media::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(11,14,17,.94) 0%, rgba(11,14,17,.78) 38%, rgba(11,14,17,.35) 70%, rgba(11,14,17,.55) 100%),
    linear-gradient(180deg, rgba(11,14,17,.80) 0%, rgba(11,14,17,.30) 30%, rgba(11,14,17,.45) 65%, rgba(11,14,17,.95) 100%);
}

.hero-inner{
  position:relative; z-index:1;
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding-inline:var(--pad);
  display:grid; grid-template-columns:1fr;
  gap:clamp(2rem,5vw,4rem); align-items:center;
  padding-bottom:clamp(2.5rem,5vw,4rem);
  flex:1;
}

/* el bloque usa todo el ancho de la fila (el mismo que la barra de navegación,
   acotado por --wrap): antes se quedaba a 46rem y pegado a la izquierda,
   dejando un vacío enorme a la derecha en pantallas anchas */
.hero-copy{ align-self:center; width:100%; text-align:center; }

/* sobre el vídeo, el cyan normal se queda en 4.2:1 en los fotogramas más claros;
   el tono claro lo sube a 6:1 sin tener que oscurecer más la imagen */
.hero .eyebrow{ color:var(--cyan-hi); }

/* con solo 2 líneas cada una es más larga: el tamaño se calculó para que
   "A la subasta de dealers" (la más larga) quepa sin partirse dentro
   del ancho del bloque a cualquier ancho de pantalla */
.hero h1{
  font-size:clamp(3.2rem,8vw,6rem);
  font-weight:900;
  font-stretch:76%;
  letter-spacing:-.025em;
  line-height:.9;
  margin-bottom:1.4rem;
}
.hero h1 span{ display:block; }
.hero h1 .hi{ color:var(--cyan); }

.lede{
  font-size:clamp(1.1rem,1rem + .55vw,1.35rem);
  color:#C2CDD6; max-width:44rem; line-height:1.6;
  margin-inline:auto; margin-bottom:1.75rem;
}

.hero-cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:.85rem; margin-bottom:2.25rem; }
.hero-cta.center{ justify-content:center; }

.hero-facts{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:2.25rem;
  margin:0; padding:1.25rem 0 0; list-style:none;
  border-top:1px solid var(--line);
}
.hero-facts li{ display:flex; flex-direction:column; align-items:center; }
.hero-facts b{
  font-family:var(--display); font-weight:800; font-stretch:80%;
  font-size:1.7rem; line-height:1; color:var(--bone);
}
/* el gris tenue funciona sobre fondo sólido, pero sobre el vídeo se queda corto */
.hero-facts span{ font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:#AAB6C0; margin-top:.4rem; }

/* los dos bloques con iconos: el rótulo arriba, la fila de enlaces debajo */
.fact-lead{
  font-family:var(--mono) !important; font-weight:500 !important;
  font-size:.72rem !important; letter-spacing:.08em; text-transform:uppercase;
  color:#AAB6C0 !important;
}
.social-row,
.flag-row{ display:flex; align-items:center; gap:.7rem; margin-top:.55rem; }

.social-row a{
  display:inline-flex; color:var(--bone);
  transition:color .18s ease, transform .18s ease;
}
.social-row svg{ width:1.35rem; height:1.35rem; fill:currentColor; display:block; }
.social-row a:hover{ color:var(--cyan); transform:translateY(-2px); }

/* banderas: el nombre del país aparece al pasar el cursor.
   El redondeo va en el propio SVG y no en el contenedor: con overflow
   oculto en .flag, el rótulo quedaba recortado y no se veía. */
.flag{
  position:relative; display:inline-flex; width:1.85rem;
  transition:transform .18s ease;
}
.flag svg{
  width:100%; height:auto; display:block;
  border-radius:2px; border:1px solid rgba(255,255,255,.22);
  transition:border-color .18s ease;
}
.flag:hover{ transform:translateY(-2px); }
.flag:hover svg{ border-color:var(--cyan); }
.flag::after{
  content:attr(data-pais);
  position:absolute; bottom:calc(100% + .5rem); left:50%; translate:-50% 0;
  z-index:5;
  padding:.3rem .55rem; border-radius:3px;
  background:var(--ink-3); border:1px solid var(--line);
  font-family:var(--mono); font-size:.66rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--bone); white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .18s ease;
}
.flag:hover::after{ opacity:1; }

/* ---------- ticker de credenciales ---------- */

.ticker{
  position:relative; z-index:1;
  border-block:1px solid var(--line);
  background:var(--ink-2);
  overflow:hidden;
  padding-block:.85rem;
}
.ticker-track{
  display:flex; align-items:center; gap:2rem; width:max-content;
  animation:slide 46s linear infinite;
}
.ticker span{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.13em;
  color:#9FB0BC; white-space:nowrap;
}
.ticker i{ width:5px; height:5px; border-radius:50%; background:var(--cyan); flex:none; }
@keyframes slide{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
.ticker:hover .ticker-track{ animation-play-state:paused; }

/* ==========================================================================
   PRUEBA — las pantallas reales del bloque
   ========================================================================== */

.sec-prueba{ background:var(--ink); padding-top:0; }

/* ---------- imagen que se expande con el scroll (estilo Zoox) ----------
   .zoom-track mide más que la pantalla; mientras se recorre, .zoom-stage queda
   fija (sticky) y --zp avanza de 0 a 1: la foto pasa de media pantalla a casi
   todo el ancho, cubriendo el texto de la derecha. Sin JS queda el estado
   inicial (foto + texto), que funciona como maqueta estática. */

.zoom-track{ height:220vh; }

.zoom-stage{
  --zp:0;
  --m:clamp(1rem,3vw,2.5rem);
  position:sticky; top:0; height:100svh;
  overflow:hidden;
}

/* .zoom-visual agrupa la foto y su aviso: crecen y se centran como un solo
   bloque verticalmente en el carril, así el aviso queda pegado a las fotos
   sin importar cuánto haya crecido el collage en ese momento */
.zoom-visual{
  position:absolute; left:var(--m); top:50%;
  transform:translateY(-50%);
  width:calc(52% + (48% - 2 * var(--m)) * var(--zp));
  z-index:2;
}
.zoom-media{
  height:calc(76svh + 12svh * var(--zp));
  border-radius:var(--r); overflow:hidden;
  margin:0;
}
/* collage 2x2: las cuatro pantallas de puja, todas del mismo tamaño */
.zoom-collage{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:clamp(.3rem,.7vw,.55rem);
}
.zc-cell{ position:relative; overflow:hidden; border-radius:var(--r); }
.zc-cell img{ width:100%; height:100%; object-fit:cover; object-position:center 40%; }

/* la etiqueta se apoya sobre fotos de pantallas muy contrastadas: fondo casi
   opaco y borde propio para que no se funda con la imagen de abajo */
.zc-chip{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; flex-direction:column; gap:.25rem;
  padding:.85rem 1rem;
  background:linear-gradient(180deg, rgba(11,14,17,0) 0%, rgba(11,14,17,.92) 38%);
  font-family:var(--mono); letter-spacing:.04em;
  text-transform:uppercase; color:#fff; line-height:1.3;
}
.zc-run{
  color:var(--cyan-hi);
  font-size:clamp(.78rem,1vw,.95rem); font-weight:500; letter-spacing:.14em;
}
.zc-chip > span:last-child{
  font-size:clamp(.95rem,1.25vw,1.2rem); font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.zc-chip em{ font-style:normal; font-weight:600; color:var(--amber); }

/* antes topaba en 30rem: en un monitor ancho quedaba diminuto, perdido en
   el hueco a la derecha de la foto. Crece más y el texto pesa más. */
.zoom-copy{
  position:absolute; right:var(--m); top:50%;
  transform:translate(calc(var(--zp) * 2rem), -50%);
  width:min(44%, 36rem);
  z-index:1;
  opacity:calc(1 - var(--zp) * 1.5);
}
.zoom-copy .eyebrow{ font-size:.82rem; }
.zoom-copy h2{ font-size:clamp(2.1rem,3.8vw,3.4rem); margin-block:1.1rem 1.25rem; }
.zoom-copy .sec-lede{ font-size:clamp(1.05rem,1.3vw,1.25rem); }

/* el aviso de precios, pegado justo debajo del collage */
.zoom-caption{
  margin-top:1.15rem; font-size:clamp(.92rem,1vw,1.05rem); color:var(--mute);
  border-left:2px solid var(--line); padding-left:1rem;
}

/* ==========================================================================
   PROBLEMA
   ========================================================================== */

.sec-problema{
  position:relative; overflow:hidden;
  background:var(--ink);
}

/* foto real del lote (el mismo video del hero) de fondo, oscurecida del lado
   del texto y más visible del lado derecho, que es donde quedaba el vacío */
.problema-bg{ position:absolute; inset:0; z-index:0; }
.problema-bg img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; }
.problema-bg::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(90deg, var(--ink) 0%, rgba(11,14,17,.93) 32%, rgba(11,14,17,.68) 60%, rgba(11,14,17,.42) 100%),
    linear-gradient(180deg, var(--ink) 0%, transparent 16%, transparent 84%, var(--ink) 100%);
}

.problema-copy{ position:relative; z-index:1; max-width:52rem; }

/* dentro de esta sección el titular y el texto crecen un poco más que el
   resto de la página (la clase se comparte con otras secciones) */
.sec-problema .h2-left{ font-size:clamp(2.3rem,6vw,4.4rem); }
.sec-problema .big-text{ font-size:clamp(1.15rem,1.05rem + .55vw,1.5rem); }
.sec-problema .big-text + .big-text{ margin-top:1.4rem; }

/* ---------- comparador de precio ----------
   Va dentro de la sección, sin tocar su fondo: solo un recuadro propio para
   que se lea como un control con el que se puede jugar. */

.calc{
  margin-top:clamp(2rem,4vw,3rem);
  width:100%;                                  /* mismo ancho que el texto de arriba */
  padding:clamp(1.35rem,3vw,2rem);
  background:rgba(11,14,17,.72);
  border:1px solid var(--line);
  border-radius:var(--r);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.calc-lede{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--cyan-hi); margin-bottom:1.35rem;
}

/* las dos cifras reparten el ancho por igual y la flecha queda justo en medio;
   antes iban pegadas a la izquierda y el bloque se veía descuadrado */
.calc-row{
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:end; gap:clamp(.75rem,3vw,1.5rem);
}
.calc-side{ display:flex; flex-direction:column; gap:.35rem; min-width:0; }
.calc-side-hi{ text-align:right; }
.calc-label{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--mute);
}
.calc-out{
  font-family:var(--display); font-weight:800; font-stretch:80%;
  font-size:clamp(1.6rem,5vw,2.4rem); line-height:1;
  color:var(--bone); font-variant-numeric:tabular-nums;
}
.calc-side-hi .calc-label{ color:var(--cyan-hi); }
.calc-side-hi .calc-out{ color:var(--cyan); }

/* flecha dibujada en CSS: no depende de que la fuente traiga el glifo */
.calc-arrow{
  flex:none; align-self:center; position:relative;
  width:1.6rem; height:1px; background:var(--line); margin-bottom:.75rem;
}
.calc-arrow::after{
  content:''; position:absolute; right:0; top:50%;
  width:.42rem; height:.42rem; border-top:1px solid var(--line);
  border-right:1px solid var(--line); transform:translateY(-50%) rotate(45deg);
}

.calc-field{ display:block; margin-top:1.35rem; }

/* el control: pista fina y tirador redondo, en el cyan de la marca */
#calc-range{
  -webkit-appearance:none; appearance:none;
  width:100%; height:1.6rem; margin:0;
  background:transparent; cursor:grab;
}
#calc-range:active{ cursor:grabbing; }
#calc-range::-webkit-slider-runnable-track{
  height:3px; border-radius:2px;
  background:linear-gradient(90deg, var(--cyan) 0%, var(--cyan) var(--fill,30%),
                              var(--ink-3) var(--fill,30%), var(--ink-3) 100%);
}
#calc-range::-moz-range-track{ height:3px; border-radius:2px; background:var(--ink-3); }
#calc-range::-moz-range-progress{ height:3px; border-radius:2px; background:var(--cyan); }
#calc-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:1.15rem; height:1.15rem; margin-top:calc((1.15rem - 3px) / -2);
  border-radius:50%; background:var(--cyan); border:3px solid var(--ink);
  box-shadow:0 0 0 1px var(--cyan);
  transition:transform .15s ease;
}
#calc-range::-moz-range-thumb{
  width:1.15rem; height:1.15rem; border-radius:50%;
  background:var(--cyan); border:3px solid var(--ink); box-shadow:0 0 0 1px var(--cyan);
}
#calc-range:hover::-webkit-slider-thumb{ transform:scale(1.12); }
#calc-range:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 1px var(--cyan), 0 0 0 5px rgba(64,175,224,.35); }
#calc-range:focus-visible::-moz-range-thumb{ box-shadow:0 0 0 1px var(--cyan), 0 0 0 5px rgba(64,175,224,.35); }

.calc-diff{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  margin:1.15rem 0 0; padding-top:1rem;
  border-top:1px solid var(--line);
  font-family:var(--mono); font-size:.74rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--mute);
}
.calc-diff b{
  color:var(--amber); font-size:1.15rem; font-weight:600;
  font-variant-numeric:tabular-nums;
}

.calc-note{ margin-top:.9rem; }

/* etiqueta que solo leen los lectores de pantalla */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- palabras que aparecen al entrar en pantalla ---------- */
.word{
  display:inline-block;
  opacity:0; transform:translateY(.55em);
  transition:opacity .55s ease-out, transform .6s cubic-bezier(.16,1,.3,1);
}
.words-in .word{ opacity:1; transform:none; }

/* ==========================================================================
   PROCESO
   ========================================================================== */

.steps{
  list-style:none; margin:0; padding:0;
  border-top:1px solid var(--line);
}
/* Tres fases atadas a la posición del paso en pantalla, las escribe main.js:
   --reveal (0→1) descubre la franja mientras el paso sube desde abajo;
   luego una pausa en la que no cambia nada — el tiempo de leer;
   --out (0→1) se lleva el texto a la derecha y disuelve el velo, hasta
   dejar la foto sola. Sin JS ambas quedan en 0: franja oculta y texto
   en su sitio, que es el diseño de siempre. */
.step{
  --reveal:0;
  --out:0;
  --shift:clamp(1rem,4vw,3.5rem);        /* el corrimiento mientras se lee */
  --shift-out:clamp(8rem,26vw,24rem);    /* el de salida, ya fuera de cuadro */
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; align-items:center;
  min-height:clamp(16rem,30vw,25rem);
  padding-block:clamp(2rem,4vw,3rem);
  border-bottom:1px solid var(--line);
}

/* la franja se descubre de izquierda a derecha */
.step-media{
  position:absolute; inset:0; z-index:0;
  clip-path:inset(0 calc(100% - var(--reveal) * 100%) 0 0);
}
.step-media img{ width:100%; height:100%; object-fit:cover; object-position:center 42%; }
/* velo: sostiene el texto encima sin apagar la foto — más denso en la banda
   del texto, casi transparente en la derecha. Al irse el texto se disuelve
   casi del todo: queda un resto mínimo para que la franja no salte del tono
   oscuro del resto de la página. */
.step-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,
    rgba(11,14,17,.88) 0%, rgba(11,14,17,.72) 42%,
    rgba(11,14,17,.42) 72%, rgba(11,14,17,.22) 100%);
  opacity:calc(1 - var(--out) * .86);
}

/* el texto se corre despacio mientras se lee y se va del todo al final */
.step-body{
  position:relative; z-index:1; width:100%;
  display:grid; grid-template-columns:5.5rem 1fr;
  gap:.6rem clamp(1rem,3vw,3rem);
  align-items:start;
  transform:translateX(calc(var(--reveal) * var(--shift) + var(--out) * var(--shift-out)));
  opacity:calc(1 - var(--out));
}
/* base oscura solo bajo el texto: sin ella, sobre las zonas claras de la foto
   (camisas blancas, cielo) el contraste caía a 1.6:1 y no se leía nada.
   Se difumina antes de la mitad derecha, que es donde se luce la franja. */
.step-body::before{
  content:''; position:absolute; z-index:-1;
  top:calc(-1 * clamp(1rem,2.5vw,1.75rem));
  bottom:calc(-1 * clamp(1rem,2.5vw,1.75rem));
  left:calc(-1 * clamp(1rem,3vw,2.25rem));
  right:0;
  background:linear-gradient(90deg,
    rgba(11,14,17,.93) 0%, rgba(11,14,17,.9) 52%,
    rgba(11,14,17,.6) 76%, rgba(11,14,17,0) 92%);
  opacity:var(--reveal);
}
.step-n{
  grid-column:1; grid-row:1 / span 2;
  font-family:var(--mono); font-size:.95rem; font-weight:600;
  color:var(--cyan); padding-top:.35rem;
  letter-spacing:.05em;
}
.step h3{ grid-column:2; grid-row:1; font-size:clamp(1.3rem,2.6vw,1.9rem); margin-bottom:0; }
.step p{
  grid-column:2; grid-row:2; margin:0; max-width:50rem;
  color:#C6D1DA;                       /* sobre foto, el gris tenue se queda corto */
  text-shadow:0 1px 12px rgba(11,14,17,.9);
}
.step h3{ text-shadow:0 1px 14px rgba(11,14,17,.85); }

/* ==========================================================================
   TARIFAS
   ========================================================================== */

.tiers{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:clamp(.9rem,1.5vw,1.25rem);
  margin-bottom:clamp(2rem,4vw,3rem);
}
@media (min-width:1100px){
  .tiers{ grid-template-columns:repeat(5,1fr); }
  .tier-range{ min-height:3.4em; }
}
.tier{
  background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r);
  padding:1.6rem 1.35rem 1.8rem;
  transition:border-color .25s ease;
}
.tier:hover{ border-color:#37505F; }
.tier-mid{ border-color:var(--cyan); background:linear-gradient(180deg, rgba(64,175,224,.09), transparent 60%), var(--ink-2); }

.tier-range{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--mute); margin-bottom:.9rem;
}
.tier-price{
  font-family:var(--display); font-weight:900; font-stretch:78%;
  font-size:clamp(2.75rem,6vw,3.6rem); line-height:.85;
  letter-spacing:-.03em; color:var(--bone); margin-bottom:.9rem;
}
.tier-mid .tier-price{ color:var(--cyan); }
.tier-note{ font-size:.92rem; color:var(--mute); margin:0; }

.state-fees{
  background:var(--ink-2); border:1px solid var(--line);
  border-left:3px solid var(--amber);
  border-radius:var(--r); padding:1.75rem clamp(1.5rem,3vw,2.25rem);
}
.state-fees h3{ font-size:1.2rem; margin-bottom:.75rem; }
.state-fees > p{ color:var(--mute); font-size:.95rem; }
.state-fees ul{
  display:flex; flex-wrap:wrap; gap:.6rem 2.5rem;
  list-style:none; margin:1.15rem 0 1.15rem; padding:0;
}
.state-fees li{ font-size:.95rem; color:#C6D1DA; }
.state-fees li b{
  font-family:var(--mono); font-weight:600; color:var(--amber);
  font-size:1.05rem; margin-right:.3rem;
}

/* ==========================================================================
   EQUIPO
   ========================================================================== */

.sec-equipo{ background:var(--ink); }

/* el encabezado general (.sec-head) queda a la izquierda con un tope de
   56rem: en esta sección, con las tarjetas del equipo abajo ocupando todo
   el ancho, se veía pegado a una esquina con medio contenedor vacío al
   lado. Aquí se centra como bloque y crece un poco, ya que va solo. */
.sec-equipo .sec-head{
  max-width:64rem; margin-inline:auto;
  text-align:center;
}
.sec-equipo .sec-head .sec-lede{ margin-inline:auto; }

/* los dos socios van en tarjeta ancha, con la foto al lado del texto;
   el equipo de campo, en tres tarjetas verticales debajo */
.team-founders{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1rem,2.5vw,1.5rem);
  margin-bottom:clamp(1rem,2.5vw,1.5rem);
}
.team-crew{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,2.5vw,1.5rem);
}

.member{
  margin:0;
  background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden;
}
/* el equipo de campo lleva el retrato recortado a una altura fija: su
   tarjeta es más ancha que la de los socios, así que sin esto acababa
   ocupando más superficie que ellos y se perdía la jerarquía */
.member img{
  width:100%; height:clamp(11rem,15vw,15rem); aspect-ratio:auto;
  object-fit:cover; object-position:center 11%; display:block;
}
.member-body{ padding:clamp(1.1rem,2.5vw,1.5rem); }
.member h3{ font-size:clamp(1.15rem,2vw,1.45rem); margin-bottom:.35rem; }
.member-role{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--cyan); margin-bottom:.9rem;
}
.member-body p:last-child{ color:var(--mute); font-size:.95rem; margin:0; }

/* socios: foto a la izquierda, texto al lado. La altura mínima es lo que
   hace que su retrato pese más que el del equipo de campo, que va en
   tarjetas más anchas pero mucho más bajas. */
.member-lead{
  display:grid; grid-template-columns:minmax(0,46%) minmax(0,1fr);
  align-items:stretch; min-height:clamp(20rem,30vw,28rem);
}
.member-lead img{ height:100%; aspect-ratio:auto; object-position:center 16%; }
.member-lead .member-body{ align-self:center; }
.member-lead h3{ font-size:clamp(1.3rem,2.2vw,1.65rem); }

/* ==========================================================================
   EXPORTACIÓN
   ========================================================================== */

.sec-export{ background:var(--ink-2); border-block:1px solid var(--line); }

.export-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(.85rem,2vw,1.35rem);
  list-style:none; margin:0; padding:0;
}
.export-card{
  background:var(--ink); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(1.15rem,2.5vw,1.6rem);
}
.export-flag{
  display:block; width:2.6rem; margin-bottom:1rem;
  border-radius:2px; overflow:hidden; border:1px solid rgba(255,255,255,.22);
}
.export-flag svg{ width:100%; height:auto; display:block; }
.export-card h3{ font-size:clamp(1.1rem,1.8vw,1.35rem); margin-bottom:.5rem; }
.export-card p{ color:var(--mute); font-size:.92rem; margin:0; }

.export-note{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(1.25rem,3vw,2.5rem);
  margin-top:clamp(1.5rem,3vw,2.25rem);
  padding:clamp(1.25rem,3vw,1.85rem);
  background:var(--ink); border:1px solid var(--line); border-radius:var(--r);
}
.export-note .big-text{ margin:0; max-width:52rem; }
.export-note .btn{ flex:none; }

/* ==========================================================================
   TESTIMONIOS
   ========================================================================== */

.sec-testimonios{ background:var(--ink-2); border-block:1px solid var(--line); }

/* vídeos verticales tipo reel: la miniatura es lo único que carga con la
   página (unos 30-40 KB cada una); el clip solo se descarga si se le da play */
.testi-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:clamp(.6rem,1.5vw,1rem);
}
.testi-card{
  margin:0; position:relative; aspect-ratio:9/16;
  background:var(--ink); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden;
}
.testi-video{ width:100%; height:100%; object-fit:cover; background:var(--ink); }

/* ==========================================================================
   AGENTES
   ========================================================================== */

/* la sección se queda con su azul propio (así se distingue del resto),
   pero el borde con lo que viene antes y después se disuelve en vez de
   cortar de golpe: es el salto de color más fuerte de toda la página */
.sec-formacion{
  position:relative; overflow:hidden;
  background:linear-gradient(165deg, var(--marine-2) 0%, var(--marine) 55%, #05192B 100%);
}
.sec-formacion::before,
.sec-formacion::after{
  content:''; position:absolute; left:0; right:0; height:clamp(3rem,10vw,7rem); z-index:1;
  pointer-events:none;
}
.sec-formacion::before{ top:0;    background:linear-gradient(180deg, var(--ink-2) 0%, transparent 100%); }
.sec-formacion::after { bottom:0; background:linear-gradient(0deg, var(--ink) 0%, transparent 100%); }
.sec-formacion .eyebrow{ color:var(--cyan-hi); }
.sec-formacion .big-text{ color:#C3D6E5; }
.sec-formacion .sec-lede{ color:#B4C9DA; }
.sec-formacion > .wrap{ position:relative; z-index:2; }

/* la misma sala de subasta, en el azul propio de esta sección */
.formacion-bg{ position:absolute; inset:0; z-index:0; }
.formacion-bg img{ width:100%; height:100%; object-fit:cover; object-position:center 32%; }
.formacion-bg::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(100deg, var(--marine) 0%, rgba(7,39,66,.93) 34%, rgba(7,39,66,.82) 64%, rgba(7,39,66,.66) 100%),
    linear-gradient(165deg, var(--marine-2) 0%, transparent 35%, transparent 70%, #05192B 100%);
}

/* anuncio corto: tres promesas en fila y la llamada a la acción */
.formacion-copy{ max-width:60rem; }
.formacion-copy h2{
  font-size:clamp(2.1rem,5.5vw,3.9rem);
  margin-bottom:1.35rem;
}

.promesas{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.25rem,3vw,2.25rem);
  margin:clamp(2.25rem,5vw,3.25rem) 0 clamp(2rem,4vw,2.75rem);
  padding:0; list-style:none;
}
.promesas li{
  border-top:2px solid var(--cyan);
  padding-top:1.1rem;
  color:#B4C9DA; font-size:.98rem; line-height:1.55;
}
.promesas b{
  display:block; color:#fff; margin-bottom:.45rem;
  font-family:var(--display); font-weight:800; font-stretch:82%;
  font-size:clamp(1.15rem,2vw,1.45rem); text-transform:uppercase;
  letter-spacing:-.01em;
}

.formacion-cta{ display:flex; align-items:center; gap:1.35rem; flex-wrap:wrap; }
.formacion-cta .fine{ color:#8FAEC6; margin:0; }

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  cursor:pointer; list-style:none;
  padding:1.35rem 2.5rem 1.35rem 0; position:relative;
  font-family:var(--display); font-weight:700; font-stretch:84%;
  font-size:clamp(1.05rem,1rem + .35vw,1.3rem);
  text-transform:uppercase; letter-spacing:.005em; line-height:1.25;
  transition:color .18s ease;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--cyan); }
.faq summary::after{
  content:''; position:absolute; right:.35rem; top:50%;
  width:11px; height:11px; margin-top:-7px;
  border-right:1.5px solid var(--cyan); border-bottom:1.5px solid var(--cyan);
  transform:rotate(45deg); transition:transform .25s ease;
}
.faq details[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; }
.faq details p{ color:var(--mute); padding-bottom:1.5rem; max-width:52rem; margin:0; }

/* ==========================================================================
   CIERRE
   ========================================================================== */

.sec-cierre{
  background:
    radial-gradient(80% 90% at 50% 100%, rgba(64,175,224,.16), transparent 70%),
    var(--ink);
  text-align:center;
}
.cierre-h{
  font-size:clamp(2.2rem,6.5vw,4.4rem);
  margin-bottom:1.5rem;
}
.sec-cierre .hero-cta{ margin-top:2.25rem; margin-bottom:0; }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer{
  background:var(--ink-2); border-top:1px solid var(--line);
  padding-block:clamp(3rem,6vw,4.5rem) 2rem;
}
.foot-grid{
  display:grid; grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));
  gap:clamp(1.75rem,4vw,3rem);
  padding-bottom:2.5rem; border-bottom:1px solid var(--line);
}
.foot-brand img{ width:auto; height:26px; margin-bottom:1.1rem; }
.foot-brand p{ font-size:.9rem; color:var(--mute); max-width:26rem; }

.foot-col h3{ font-size:.82rem; letter-spacing:.1em; color:var(--cyan); margin-bottom:1rem; font-stretch:90%; }
.foot-col p{ font-size:.9rem; color:var(--mute); margin-bottom:.75rem; line-height:1.5; }
.foot-col a{ text-decoration:none; transition:color .18s ease; }
.foot-col a:hover{ color:var(--cyan); }

.foot-legal{ padding-top:2rem; }
.foot-legal p{ font-size:.82rem; color:var(--mute); margin-bottom:.6rem; }
.foot-legal .fine{ max-width:52rem; color:#6E7C87; }

/* ---------- botón flotante WhatsApp ---------- */

.wa-float{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:90;
  width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center;
  background:#25D366; color:#04361A;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.7);
  transition:transform .2s ease;
}
.wa-float:hover{ transform:scale(1.07); }
.wa-float .wa{ width:28px; height:28px; }

/* ==========================================================================
   ANIMACIÓN DE ENTRADA
   ========================================================================== */

.reveal{ opacity:0; transform:translateY(22px); }
.reveal.in{
  opacity:1; transform:none;
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width:1000px){
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
  .nav{ padding-right:.55rem; }
  .nav .btn-sm{ margin-left:auto; }

  /* formación: las tres promesas se apilan */
  .promesas{ grid-template-columns:1fr; gap:1.35rem; }
  .formacion-cta{ flex-direction:column; align-items:stretch; gap:1rem; }
  .formacion-cta .btn{ justify-content:center; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .foot-brand{ grid-column:1 / -1; }
}

@media (max-width:820px){
  /* en pantalla estrecha no hay lado derecho: la expansión se apaga
     y queda foto arriba + texto debajo */
  .zoom-track{ height:auto; }
  .zoom-stage{ position:static; height:auto; padding:clamp(3rem,10vw,4.5rem) var(--pad) 0; }
  .zoom-visual{ position:static; width:100%; transform:none; }
  .zoom-media{ height:auto; }
  .zoom-collage{ grid-template-columns:1fr; grid-template-rows:none; }
  .zc-cell img{ aspect-ratio:4/3; height:auto; }
  .zoom-copy{ position:static; width:100%; transform:none; opacity:1; margin-top:1.75rem; }

  .hero{ justify-content:center; padding-top:clamp(5.5rem,12vh,7rem); }
  .hero-media{ display:block; }
  .hero-inner{ grid-template-columns:1fr; align-items:center; }
  .hero h1{ font-size:clamp(1.6rem,7.8vw,4rem); margin-bottom:1.1rem; }
  .lede{ font-size:1rem; margin-bottom:1.5rem; }
  .hero-cta{ gap:.65rem; margin-bottom:1.75rem; }

  .hero-facts{
    display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem;
    padding-top:1.1rem;
  }
  .hero-facts b{ font-size:1.35rem; }
  .hero-facts span{ font-size:.68rem; letter-spacing:.04em; line-height:1.35; }

  /* en estrecho van de dos en dos, con la foto arriba del texto: a una por
     fila y a tamaño completo, recorrer las cinco era interminable */
  .team-founders,
  .team-crew{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }
  .member-lead{ grid-template-columns:1fr; }
  .member img,
  .member-lead img{ height:auto; aspect-ratio:3/4; object-position:center 18%; }
  .member-body{ padding:.9rem .85rem 1.1rem; }
  .member h3,
  .member-lead h3{ font-size:1.05rem; }
  .member-role{ font-size:.62rem; letter-spacing:.05em; margin-bottom:.6rem; }
  .member-body p:last-child{ font-size:.86rem; line-height:1.5; }

  /* el equipo de campo son tres: el último quedaría suelto en media fila,
     así que ocupa el ancho entero y cierra la sección */
  .team-crew .member:nth-child(3):last-child{ grid-column:1 / -1; }
  .team-crew .member:nth-child(3):last-child img{ aspect-ratio:4/3; }

  /* en pantalla estrecha la franja se sigue descubriendo y el texto también
     se va al final, pero mientras se lee casi no se mueve: no hay ancho que
     sobre para correrlo sin apretar las líneas */
  .step{ --shift:.35rem; --shift-out:45vw; min-height:clamp(14rem,58vw,20rem); }
  .step-body{ grid-template-columns:1fr; gap:.5rem; }
  .step-n,.step h3,.step p{ grid-column:1; grid-row:auto; }
  .step-n{ padding-top:0; }
  /* aquí el texto ocupa todo el ancho, así que su base no puede difuminarse
     a media franja: el final de cada línea se quedaba sobre la foto */
  .step-body::before{
    left:calc(-1 * var(--pad)); right:calc(-1 * var(--pad));
    background:linear-gradient(90deg, rgba(11,14,17,.9) 0%, rgba(11,14,17,.88) 100%);
  }
  .step-media::after{
    background:linear-gradient(90deg, rgba(11,14,17,.72) 0%, rgba(11,14,17,.62) 100%);
  }

  /* exportación: a cuatro columnas las tarjetas quedaban en 74 px de ancho */
  .export-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .export-note{ flex-direction:column; align-items:flex-start; }
  .export-note .btn{ align-self:stretch; justify-content:center; }

  /* más zona que agarrar con el dedo en el comparador */
  #calc-range{ height:2.75rem; }
  #calc-range::-webkit-slider-thumb{ width:1.4rem; height:1.4rem; margin-top:calc((1.4rem - 3px) / -2); }
  #calc-range::-moz-range-thumb{ width:1.4rem; height:1.4rem; }
}

@media (max-width:560px){
  .foot-grid{ grid-template-columns:1fr; }
  .hero-cta .btn{ width:100%; justify-content:center; }
  .btn-lg{ padding:.95rem 1.5rem; font-size:.98rem; }
  .wa-float{ width:50px; height:50px; }
  .wa-float .wa{ width:26px; height:26px; }

  /* en pantallas estrechas el botón del navbar se queda solo con el icono */
  .nav{ gap:.75rem; padding-left:1rem; }
  .nav-logo img{ height:19px; }
  .nav .btn-sm{ padding:.6rem; font-size:0; gap:0; }
  .nav .btn-sm .wa{ width:1.15rem; height:1.15rem; }
}

/* ==========================================================================
   ACCESIBILIDAD — movimiento reducido
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .ticker-track{ animation:none; }

  /* sin movimiento: la sección anclada se vuelve estática */
  .zoom-track{ height:auto; }
  .zoom-stage{ position:static; height:auto; padding:clamp(3rem,10vw,4.5rem) var(--pad) 0; }
  .zoom-visual{ position:static; width:100%; transform:none; }
  .zoom-media{ height:auto; }
  .zoom-collage{ grid-template-rows:none; }
  .zc-cell img{ aspect-ratio:4/3; height:auto; }
  .zoom-copy{ position:static; width:100%; transform:none; opacity:1; margin-top:1.75rem; }

  /* los pasos muestran su franja ya descubierta y el texto encima, quieto:
     sin movimiento no tiene sentido esconder lo que hay que leer */
  .step{ --reveal:1; --out:0; --shift:0rem; --shift-out:0rem; }
}

@media print{
  .nav-wrap,.wa-float,.hero-media{ display:none !important; }
  body{ background:#fff; color:#000; }
}