/* ══════════════════════════════════════════
   BAQUEANO · landing
   Mundo único y deliberado: luz de expedición que cambia con el scroll.
   ══════════════════════════════════════════ */
:root{
  --noche:#070808; --carbon:#101211; --niebla:#ECEDE8; --tinta:#0B0C0B;
  --hueso:#EDEEEA; --ceniza:#8B8F8A; --naranja:#E2552B; --ocaso:#1A110C;
  --bg:#070808; --fg:#EDEEEA; --dim:rgba(237,238,234,.58); --linea:rgba(237,238,234,.16); --acento:#E2552B;
  /* naranja para fondos con letra blanca encima: el de la marca da 3,8:1 con blanco; este, 4,8:1 */
  --naranja-boton:#C4441D;
  --d:"Archivo","Arial Narrow",Impact,sans-serif;
  --b:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --m:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --mx:clamp(20px,5vw,88px);
  --ease:cubic-bezier(.19,1,.22,1);
}
*{box-sizing:border-box}
html{background:var(--noche)}
body{
  margin:0; background:var(--bg); color:var(--fg); font-family:var(--b);
  font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased;
  overflow-x:hidden; cursor:default;
}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
img{max-width:100%; display:block}
::selection{background:var(--naranja); color:#fff}

.d{
  font-family:var(--d); font-weight:800; font-stretch:125%;
  font-variation-settings:"wdth" 125; text-transform:uppercase;
  letter-spacing:-.005em; word-spacing:.16em; line-height:.9; margin:0;
}
.m{font-family:var(--m); font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:400}
.cap{display:flex; align-items:center; gap:14px; color:var(--dim); font-size:14.5px; letter-spacing:.17em}
.cap i{display:block; width:11px; height:11px; border-radius:50%; background:var(--naranja); flex-shrink:0}
/* accesibilidad: saltar la portada e ir directo al contenido con el teclado */
.saltar{
  position:fixed; top:-100px; left:var(--mx); z-index:110; padding:14px 20px; border-radius:0 0 10px 10px;
  background:var(--hueso); color:var(--tinta); font-family:var(--m); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; transition:top .3s var(--ease);
}
.saltar:focus{top:0}
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible{outline:2px solid var(--naranja); outline-offset:3px; border-radius:2px}
.ejemplo{margin:0 0 12px; color:var(--dim); font-size:12px; letter-spacing:.16em}

/* ───── capas fijas ───── */
.grano{
  position:fixed; inset:-50%; width:200%; height:200%; z-index:90; pointer-events:none;
  opacity:.075; mix-blend-mode:overlay;
}
/* Sobre la portada el menú va transparente. Al bajar (clase "fija", la pone menu.js) toma el fondo
   y el color de la luz de cada sección, así los títulos no pasan por debajo mezclados con los links. */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:70; padding:22px var(--mx);
  display:flex; align-items:center; gap:28px; color:var(--fg);
  border-bottom:1px solid transparent;
  transition:padding .4s var(--ease), background-color .4s var(--ease), border-color .4s var(--ease);
}
.nav.fija{
  padding-top:14px; padding-bottom:14px; background:var(--bg);
  background:color-mix(in srgb, var(--bg) 90%, transparent); border-bottom-color:var(--linea);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
@media (hover:none), (max-width:860px){ .nav.fija{background:var(--bg); -webkit-backdrop-filter:none; backdrop-filter:none} }
@media (prefers-reduced-motion:reduce){ .nav{transition:none} }
.nav-marca{display:flex; align-items:center; gap:10px; font-family:var(--d); font-weight:800; font-stretch:125%; font-variation-settings:"wdth" 125; font-size:17px; letter-spacing:.06em}
/* el símbolo de la marca: el perfil del Aconcagua */
.simbolo{width:auto; height:1.15em; overflow:visible; flex-shrink:0}
.pie-marca{display:inline-flex; align-items:center; gap:9px}
.pie-marca .simbolo{height:1.5em}
.nav-links{display:flex; gap:26px; margin:0 auto}
.nav-links a{position:relative; padding:4px 0}
.nav-links a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .6s var(--ease)}
.nav-links a:hover::after{transform:scaleX(1); transform-origin:left}
.nav-cta{border:1px solid currentColor; border-radius:99px; padding:10px 18px; transition:background-color .4s var(--ease), color .4s var(--ease)}
.nav-cta:hover{background:var(--fg); color:var(--bg)}
.nav-acciones{display:flex; align-items:center; gap:18px}
.nav-entrar{padding:4px 0; text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px}
.nav-cta, .nav-entrar{white-space:nowrap}
@media (max-width:1200px){ .nav-links{display:none} .nav-acciones{gap:14px} }
/* en celulares grandes (iPhone Plus y Pro Max, 430 px) no entraba todo y "Probar gratis" quedaba cortado.
   "Entrar" sigue a mano dentro del menú desplegable. */
@media (max-width:700px){ .nav-entrar{display:none} .nav-cta-extra{display:none} }
@media (max-width:560px){ .nav{gap:14px} .nav-marca span{display:none} .nav-cta{padding:9px 14px} .nav-cta-extra{display:none} }

/* ───── menú del celular ─────
   El botón aparece hasta 1200 px: más ancho entran los links (con menos, "Cómo funciona" se partía y el botón se salía). El panel se abre y se cierra con menu.js, sin GSAP. */
.nav-menu{display:none; align-items:center; gap:10px; min-height:44px; padding:0 4px; margin-left:auto;
  font-family:var(--m); font-size:12px; letter-spacing:.14em; text-transform:uppercase}
.nav-menu i{position:relative; display:block; width:18px; height:8px; border-top:1px solid currentColor; border-bottom:1px solid currentColor}
@media (max-width:1200px){ .nav-menu{display:inline-flex} }

.menu{
  position:fixed; inset:0; z-index:105; display:flex; flex-direction:column;
  padding:max(18px, env(safe-area-inset-top)) var(--mx) max(26px, env(safe-area-inset-bottom));
  background:var(--noche); color:var(--hueso); overflow-y:auto; overscroll-behavior:contain;
}
.menu[hidden]{display:none}
.menu.abierto{animation:menuEntra .35s var(--ease)}
@keyframes menuEntra{from{opacity:0}to{opacity:1}}
.menu-top{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:48px}
.menu-marca{display:inline-flex; align-items:center; gap:9px; font-size:12px}
.menu-marca .simbolo{height:1.5em}
.menu-cerrar{display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0 4px;
  font-family:var(--m); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--hueso)}
.menu-cerrar span{font-size:22px; line-height:1; letter-spacing:0}
.menu-links{list-style:none; margin:clamp(28px,6vh,56px) 0 0; padding:0; border-top:1px solid rgba(237,238,234,.16)}
.menu-links li{border-bottom:1px solid rgba(237,238,234,.16)}
.menu-links a{display:flex; align-items:baseline; gap:16px; padding:clamp(16px,2.6vh,22px) 0;
  font-size:clamp(17px,4.6vw,22px); letter-spacing:.12em; overflow-wrap:anywhere}
.menu-links b{font-weight:400; font-size:12px; color:var(--naranja); letter-spacing:.14em}
.menu-links a:hover, .menu-links a:focus-visible{color:var(--naranja)}
.menu-acciones{display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; margin-top:auto; padding-top:32px}
.menu-entrar{min-height:44px; display:inline-flex; align-items:center; font-size:12px;
  text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px}
.menu-cta{display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:48px; padding:0 24px;
  border-radius:99px; background:var(--naranja-boton); color:#fff; font-size:12px}
.menu a:focus-visible, .menu button:focus-visible{outline:2px solid var(--naranja); outline-offset:4px}
/* mientras el menú está abierto, la página de atrás no scrollea */
html.menu-abierto, html.menu-abierto body{overflow:hidden}
@media (min-width:1201px){ .menu{display:none !important} }
@media (prefers-reduced-motion:reduce){ .menu.abierto{animation:none} }
/* si la librería de animación no cargó: la portada se acomoda sola, sin JavaScript */
.sin-anim .hero-nombre{top:34%}
.sin-anim #heroMarca{font-size:13vw}

.altimetro{
  position:fixed; right:calc(var(--mx) * .42); top:50%; transform:translateY(-50%); z-index:65;
  color:#fff; mix-blend-mode:difference; display:flex; flex-direction:column; align-items:flex-end; gap:12px;
}
.alt-riel{position:relative; width:1px; height:190px; background:rgba(255,255,255,.28); margin-right:3px}
.alt-riel i{position:absolute; right:0; width:7px; height:1px; background:rgba(255,255,255,.5)}
.alt-marca{position:absolute; right:-3px; top:0; width:7px; height:7px; border-radius:50%; background:#fff; transform:translateY(-3px)}
.alt-v{font-family:var(--m); font-size:12px; letter-spacing:.06em; font-variant-numeric:tabular-nums; text-align:right}
.alt-l{font-family:var(--m); font-size:9.5px; letter-spacing:.2em; opacity:.6; text-align:right}
@media (max-width:860px){ .altimetro{display:none} }

/* ───── fotos y espacios de foto ───── */
.foto{position:absolute; inset:0; overflow:hidden; background:var(--escena, #111)}
.foto img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.foto .ph{position:absolute; inset:0; display:none}
.foto.sin img{display:none}
.foto.sin .ph{display:block}
.ph::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 120%, rgba(0,0,0,.55), transparent 60%),
             linear-gradient(to bottom, transparent 55%, rgba(0,0,0,.35));
}
.ph-marco{position:absolute; inset:clamp(14px,2.2vw,30px); pointer-events:none}
.ph-marco i{position:absolute; width:18px; height:18px; border-color:rgba(255,255,255,.55); border-style:solid; border-width:0}
.ph-marco i:nth-child(1){top:0; left:0; border-top-width:1px; border-left-width:1px}
.ph-marco i:nth-child(2){top:0; right:0; border-top-width:1px; border-right-width:1px}
.ph-marco i:nth-child(3){bottom:0; left:0; border-bottom-width:1px; border-left-width:1px}
.ph-marco i:nth-child(4){bottom:0; right:0; border-bottom-width:1px; border-right-width:1px}
[data-escena="amanecer"]{--escena:radial-gradient(90% 60% at 72% 64%, #F6BC73 0%, #D2743F 16%, #5B3029 38%, #1A1A20 66%, #0B0E14 100%)}
[data-escena="nieve"]{--escena:radial-gradient(80% 70% at 50% 38%, #E4ECF2 0%, #9FB2C2 22%, #3C5064 52%, #0D131B 86%)}
[data-escena="barro"]{--escena:radial-gradient(80% 60% at 38% 72%, #7A5638 0%, #43301F 32%, #17120D 72%, #080706 100%)}
[data-escena="bosque"]{--escena:radial-gradient(70% 70% at 62% 26%, #B7C7AE 0%, #577055 22%, #1E2B20 56%, #070A08 92%)}
[data-escena="desierto"]{--escena:radial-gradient(90% 55% at 50% 78%, #F6C47E 0%, #D5883F 20%, #733D22 48%, #1C100B 86%)}
[data-escena="montana"]{--escena:radial-gradient(90% 60% at 30% 30%, #C8D3DA 0%, #6E8190 26%, #2A3743 56%, #0A0E12 92%)}
[data-escena="atardecer"]{--escena:radial-gradient(90% 55% at 50% 80%, #FFA25E 0%, #B9492B 22%, #3F1B1F 52%, #0B0809 90%)}

/* ───── hero ───── */
.hero{position:relative; height:100svh; min-height:640px; overflow:hidden; color:#fff}
.hero-velo{position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,.42) 0%, rgba(0,0,0,.10) 20%, rgba(0,0,0,.34) 44%, rgba(0,0,0,.30) 62%, rgba(0,0,0,.76) 100%)}
.hero-in{position:absolute; inset:auto 0 0 0; padding:0 var(--mx) clamp(26px,4vh,48px)}
/* la sombra va en el contenedor y no en las letras: la animación mete cada letra en una "máscara"
   que recorta lo que sobresale, y la sombra recortada se veía como un recuadro detrás de cada letra */
.hero-nombre{position:absolute; left:0; right:0; top:63%; transform:translateY(-50%); padding:0 var(--mx); z-index:2;
  filter:drop-shadow(0 8px 32px rgba(0,0,0,.5))}
.hero-marca{white-space:nowrap; font-size:15vw; display:block}
.hero-fila{display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:end; margin-top:clamp(18px,3vh,34px); padding-top:clamp(16px,2.4vh,26px); border-top:1px solid rgba(255,255,255,.22)}
/* la propuesta de valor es lo más grande del bloque; el lema queda como firma chica arriba */
.hero-lema{margin:0; color:rgba(255,255,255,.75); font-size:12px}
.hero-texto{display:flex; flex-direction:column; align-items:flex-start; gap:clamp(10px,1.6vh,16px)}
.hero-que{font-family:var(--b); font-size:clamp(25px,2.6vw,44px); font-weight:400; line-height:1.1; letter-spacing:-.025em; margin:0; max-width:22ch; text-wrap:balance}
.hero-bajada{margin:0; max-width:46ch; font-size:clamp(15px,1.1vw,18px); line-height:1.45; color:rgba(255,255,255,.82)}
.hero-precio{margin:2px 0 0; color:rgba(255,255,255,.88); font-size:12px; letter-spacing:.12em}
.hero-beta{display:flex; align-items:flex-start; gap:10px; margin:0; max-width:52ch; font-size:13px; line-height:1.45; color:rgba(255,255,255,.75)}
.hero-beta i{width:7px; height:7px; margin-top:6px; border-radius:50%; background:var(--naranja); flex-shrink:0; box-shadow:0 0 0 4px rgba(226,85,43,.22)}
.hud{position:absolute; inset:clamp(80px,11vh,110px) var(--mx) auto var(--mx); display:flex; justify-content:space-between; color:rgba(255,255,255,.75); pointer-events:none}
.scroll-cue{position:absolute; right:var(--mx); bottom:calc(clamp(26px,4vh,48px) + 150px); display:flex; flex-direction:column; align-items:center; gap:12px; color:rgba(255,255,255,.7)}
.scroll-cue i{position:relative; width:1px; height:64px; background:rgba(255,255,255,.25); overflow:hidden}
.scroll-cue i::after{content:""; position:absolute; left:0; top:0; width:1px; height:22px; background:#fff; transform:translateY(var(--cue,-22px))}
@media (max-height:820px){ .scroll-cue{display:none} }
@media (max-width:760px){
  .hero-fila{grid-template-columns:1fr}
  .scroll-cue{display:none}
}

/* ───── manifiesto ───── */
.mani{position:relative; min-height:100vh; padding:22vh var(--mx) 6vh; overflow:hidden}
.mani-t{font-size:clamp(32px,5.2vw,96px); font-weight:300; line-height:1.04; letter-spacing:-.04em; margin:34px 0 0; max-width:17ch; position:relative; z-index:2}
.mani-t .w{display:inline-block; opacity:.13}
.mani-t em{font-style:normal; font-family:var(--d); font-weight:800; font-stretch:125%; font-variation-settings:"wdth" 125; letter-spacing:-.03em; text-transform:uppercase; font-size:.86em}
.fuentes{position:absolute; inset:0; pointer-events:none; z-index:1}
.fuente{
  position:absolute; left:0; top:0; white-space:nowrap; padding:10px 16px; border-radius:99px;
  border:1px solid rgba(11,12,11,.2); background:rgba(255,255,255,.55); backdrop-filter:blur(6px);
  font-family:var(--m); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--tinta);
}
.mani-punto{position:absolute; left:50%; top:50%; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; background:var(--naranja); z-index:3; transform:scale(0)}
/* sin la librería de animación, las fichas quedaban apiladas arriba a la izquierda */
.sin-anim .fuentes, .sin-anim .mani-punto{display:none}
/* celular y pantallas táctiles: sección quieta (ver armarManifiesto). Las fichas van debajo de la frase. */
@media (hover:none), (max-width:860px){
  .mani{min-height:0; display:flex; flex-direction:column; padding:12vh var(--mx) 8vh}
  .mani-t em{color:var(--naranja)}
  .fuentes{position:static; order:3; display:flex; flex-wrap:wrap; gap:8px; margin-top:30px}
  .fuente{position:static; padding:8px 13px; font-size:12px}
  .mani-punto{display:none}
}

/* ───── cómo funciona ───── */
.funciona{position:relative; padding:10vh var(--mx) 6vh}
.funciona-cab{display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:4vh}
.funciona-cab .d{font-size:clamp(32px,4.2vw,72px); margin-top:18px}
.funciona-cab p{max-width:30ch; margin:0; color:var(--dim); font-size:19px}
.funciona-grid{display:grid; grid-template-columns:1fr 1fr; gap:6vw; position:relative}
.tel-col{position:relative; height:100vh; display:grid; place-items:center}
.tel{
  position:relative; width:min(330px,76vw); aspect-ratio:330/680; border-radius:52px; background:#0B0C0B;
  padding:12px; box-shadow:0 60px 120px -40px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.2);
}
.tel::before{content:""; position:absolute; top:22px; left:50%; width:96px; height:28px; margin-left:-48px; border-radius:20px; background:#0B0C0B; z-index:5}
.tel-pant{position:relative; width:100%; height:100%; border-radius:41px; overflow:hidden; background:#EEF2F0}
.pant{position:absolute; inset:0; padding:58px 18px 20px; opacity:0; font-family:var(--b); color:#1E2D33}
.pant:first-child{opacity:1}
/* capturas reales de la app: arriba queda una franja oscura como la barra de estado, así la isla del teléfono no tapa nada */
.tel-real{background:#151c21}
.tel-real .pant{padding:0}
.tel-real .pant img{position:absolute; left:0; right:0; top:34px; width:100%; height:calc(100% - 34px); object-fit:cover; object-position:top}
/* el rótulo "Destino" va sobre la foto del final: blanco suave, sin depender de la luz de la sección */
.cap-destino{color:rgba(255,255,255,.75)}

.pasos-col{list-style:none; margin:0; padding:0}
.paso{min-height:50vh; display:flex; flex-direction:column; justify-content:center; max-width:520px}
.paso-n{display:block; font-family:var(--m); font-size:12px; letter-spacing:.16em; color:var(--acento)}
.paso h3{font-family:var(--d); font-weight:800; font-stretch:125%; font-variation-settings:"wdth" 125; text-transform:uppercase; font-size:clamp(28px,3.4vw,58px); line-height:.95; letter-spacing:-.03em; margin:14px 0 0}
/* copia de la pantalla de cada paso (la arma landing.js): solo en celular */
.paso-tel{display:none}
@media (max-width:860px){
  .funciona-grid{grid-template-columns:1fr}
  .tel-col{height:auto; padding:6vh 0}
  .paso{min-height:0; padding:3.5vh 0}
  .funciona-cab{flex-direction:column; align-items:flex-start}
  /* con las copias puestas, el teléfono grande sobra */
  .funciona-grid.con-pasos-tel .tel-col{display:none}
  /* el teléfono al 70 % y recortado abajo: se ve la parte de arriba de la pantalla, que es donde está todo */
  .paso-tel{display:block; position:relative; width:231px; height:330px; margin-top:24px; overflow:hidden;
    -webkit-mask-image:linear-gradient(to bottom, #000 72%, transparent); mask-image:linear-gradient(to bottom, #000 72%, transparent)}
  .paso-tel .tel{width:330px; transform:scale(.7); transform-origin:0 0; box-shadow:0 0 0 1px rgba(0,0,0,.2)}
}

/* ───── voz del baqueano ───── */
.voz{position:relative; min-height:100vh; padding:15vh var(--mx); overflow:hidden}
.voz-grid{display:grid; grid-template-columns:1.25fr 1fr; gap:6vw; align-items:center; min-height:60vh}
.voz-q{font-size:clamp(32px,4.4vw,88px); line-height:.9}
.voz-q .linea{display:block; overflow:hidden; padding:.2em 0 .04em; margin-top:-.2em}
.voz-q .linea span{display:block}
.voz-q .tenue{color:var(--naranja)}
.voz-chat{display:flex; flex-direction:column; gap:14px}
.burbuja{max-width:92%; padding:18px 20px; border-radius:22px; font-size:clamp(15px,1.15vw,18px); line-height:1.5}
.burbuja.yo{align-self:flex-end; background:rgba(237,238,234,.1); border:1px solid var(--linea); border-bottom-right-radius:6px}
.burbuja.baq{align-self:flex-start; background:var(--hueso); color:var(--tinta); border-bottom-left-radius:6px}
.burbuja.baq b{color:#B0421A; font-weight:600}
.burbuja small{display:block; margin-top:12px; padding-top:10px; border-top:1px solid rgba(11,12,11,.12); font-family:var(--m); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#5A5F59}
@media (max-width:860px){ .voz{min-height:0; padding:11vh var(--mx)} .voz-grid{grid-template-columns:1fr; min-height:0} }

/* ───── ruta de ejemplo ───── */
.ruta{position:relative; padding:14vh var(--mx) 13vh}
.ruta-sub{margin:20px 0 0; max-width:60ch; color:var(--dim); font-size:clamp(16px,1.25vw,19px)}
.ruta-tarjeta{margin-top:clamp(36px,6vh,64px); border:1px solid var(--linea); border-radius:20px; overflow:hidden; background:rgba(255,255,255,.04)}
.ruta-top{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap;
  padding:clamp(22px,3vw,34px); border-bottom:1px solid var(--linea)}
.ruta-veh{font-family:var(--d); font-weight:800; font-stretch:125%; font-variation-settings:"wdth" 125; text-transform:uppercase;
  font-size:clamp(22px,2.4vw,34px); letter-spacing:.01em}
.ruta-uso{margin-top:8px; color:var(--dim)}
.ruta-total{text-align:right}
.ruta-total b{display:block; font-size:clamp(26px,3vw,40px); font-weight:500; letter-spacing:-.03em; color:var(--naranja)}
.ruta-total span{display:block; margin-top:4px; color:var(--dim)}
.ruta-total span:first-child{margin:0 0 4px}
.tramos{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr}
.tramo{padding:clamp(22px,3vw,34px); border-bottom:1px solid var(--linea)}
.tramo:nth-child(odd){border-right:1px solid var(--linea)}
.tramo-n{color:var(--naranja)}
.tramo h3{font-family:var(--d); font-weight:800; font-stretch:125%; font-variation-settings:"wdth" 125; text-transform:uppercase;
  font-size:clamp(20px,1.9vw,27px); letter-spacing:.01em; margin:12px 0 0}
.piezas{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.piezas li{display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding-bottom:9px; border-bottom:1px dashed var(--linea); font-size:15.5px}
.piezas li:last-child{border-bottom:0; padding-bottom:0}
.piezas em{font-style:normal; font-family:var(--m); font-size:13px; color:var(--dim); white-space:nowrap}
.ruta-pie{display:flex; justify-content:space-between; align-items:center; gap:22px; flex-wrap:wrap; padding:clamp(20px,2.6vw,30px)}
.ruta-pie p{margin:0; color:var(--dim); max-width:56ch; line-height:1.7}
/* cada tramo en una línea: número, nombre y total. Las piezas se ven con "Ver el detalle" */
.tramo-cab{display:grid; grid-template-columns:auto 1fr; align-items:baseline; gap:6px 16px}
.tramo-cab h3{margin:0}
.tramo-total{grid-column:2; font-family:var(--m); font-size:14px; font-weight:400; letter-spacing:.04em; color:var(--fg)}
.tramo .piezas{margin-top:18px}
.ruta-tarjeta.plegada .piezas{display:none}
.ruta-detalle{display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0 20px; border:1px solid var(--linea);
  border-radius:99px; font-size:12px; color:var(--fg); transition:border-color .3s var(--ease)}
.ruta-detalle::after{content:"+"; font-size:16px; line-height:1}
.ruta-detalle[aria-expanded="true"]::after{content:"−"}
.ruta-detalle:hover{border-color:var(--naranja)}
.ruta-detalle:focus-visible{outline:2px solid var(--naranja); outline-offset:3px}

/* ───── terrenos: cinco tarjetas en fila; en celular, carrusel de costado ───── */
.terrenos{position:relative; padding:12vh var(--mx) 12vh}
.terrenos-t{font-family:var(--d); font-weight:800; font-stretch:125%; font-variation-settings:"wdth" 125; text-transform:uppercase;
  font-size:clamp(30px,4.4vw,70px); line-height:.96; letter-spacing:-.02em; word-spacing:.12em; margin:22px 0 0}
.terrenos-fila{list-style:none; margin:clamp(32px,5vh,56px) 0 0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(10px,1.2vw,18px)}
.terreno-c{min-width:0}
.terreno-c .foto{position:relative; inset:auto; aspect-ratio:3/4; border-radius:14px}
.terreno-c h3{font-family:var(--d); font-weight:800; font-stretch:125%; font-variation-settings:"wdth" 125; text-transform:uppercase;
  font-size:clamp(18px,1.6vw,24px); letter-spacing:.01em; margin:16px 0 0}
.terreno-c p{margin:8px 0 0; color:var(--dim); font-size:15px; line-height:1.45}
.terrenos-fila:focus-visible{outline:2px solid var(--naranja); outline-offset:6px}
@media (max-width:860px){
  .terrenos{padding:9vh 0}
  .terrenos-cab{padding:0 var(--mx)}
  /* carrusel: cada tarjeta ocupa casi toda la pantalla y se asoma la siguiente */
  .terrenos-fila{display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0 var(--mx);
    padding:0 var(--mx) 6px; overscroll-behavior-x:contain; scrollbar-width:none}
  .terrenos-fila::-webkit-scrollbar{display:none}
  .terreno-c{flex:0 0 72%; scroll-snap-align:start}
}
/* en tablet, cada tarjeta ocupaba casi 550 × 735 px: entran dos y se asoma la tercera */
@media (min-width:600px) and (max-width:860px){ .terreno-c{flex-basis:42%} }
/* aviso de que el carrusel se desliza: solo donde hay carrusel */
.terrenos-pista{display:none; margin:14px 0 0; padding:0 var(--mx); color:var(--dim); font-size:12px}
@media (max-width:860px){ .terrenos-pista{display:block} }

/* ───── huella gancho: el Abra del Acay ───── */
.huellas{position:relative; padding:12vh var(--mx)}
.huellas-t{font-family:var(--d); font-weight:800; font-stretch:125%; font-variation-settings:"wdth" 125; text-transform:uppercase;
  font-size:clamp(30px,4.4vw,70px); line-height:.96; letter-spacing:-.02em; word-spacing:.12em; margin:22px 0 0; max-width:20ch}
.huella-dato{margin:24px 0 0}
.huellas-sub{margin:16px 0 26px; max-width:52ch; color:var(--dim); font-size:clamp(16px,1.25vw,19px)}
.grado{display:inline-flex; align-items:center; gap:10px; font-size:12px; color:var(--fg); line-height:1.5}
.grado::before{content:""; width:10px; height:10px; border-radius:50%; flex-shrink:0; background:var(--g, #888)}
.grado[data-grado="negro"]{--g:#0B0B0B}
.grado[data-grado="negro"]::before{box-shadow:0 0 0 1px rgba(255,255,255,.7)}
@media (max-width:860px){ .huellas{padding:10vh var(--mx)} }
@media (max-width:860px){
  .tramos{grid-template-columns:1fr}
  .tramo:nth-child(odd){border-right:0}
  .ruta-total{text-align:left}
}

/* ───── quién está detrás ───── */
.quien{position:relative; padding:14vh var(--mx) 12vh; display:grid; grid-template-columns:1fr 1.25fr; gap:5vw; align-items:start}
.quien-t{font-family:var(--d); font-weight:800; font-stretch:125%; font-variation-settings:"wdth" 125; text-transform:uppercase;
  font-size:clamp(30px,4.4vw,70px); line-height:.96; letter-spacing:-.02em; word-spacing:.12em; margin:22px 0 0}
.quien-cuerpo{border-top:1px solid var(--linea); padding-top:26px; display:flex; flex-direction:column; gap:18px}
/* color de la luz activa: con un crema fijo, al llegar a Precios (de día) el texto quedaba crema sobre claro */
.quien-cuerpo p{margin:0; max-width:62ch; font-size:clamp(17px,1.4vw,21px); font-weight:300; line-height:1.55; color:var(--fg)}
.quien-cuerpo .quien-firma{color:var(--naranja); font-size:12px; font-weight:400; margin-top:6px}
@media (max-width:860px){ .quien{grid-template-columns:1fr; gap:28px; padding:11vh var(--mx) 9vh} }

/* ───── opiniones: reales, tal cual llegaron ───── */
.opiniones{position:relative; padding:4vh var(--mx) 13vh}
.opiniones-t{font-family:var(--d); font-weight:800; font-stretch:125%; font-variation-settings:"wdth" 125; text-transform:uppercase;
  font-size:clamp(28px,3.6vw,56px); line-height:.98; letter-spacing:-.02em; word-spacing:.12em; margin:22px 0 0; max-width:22ch}
.opiniones-lista{list-style:none; margin:clamp(32px,5vh,52px) 0 0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(12px,1.4vw,20px)}
.opinion{display:flex; flex-direction:column; justify-content:space-between; gap:22px; padding:clamp(22px,2.4vw,32px);
  border:1px solid var(--linea); border-radius:18px; background:rgba(255,255,255,.04)}
.opinion blockquote{margin:0}
.opinion p{margin:0; font-size:clamp(18px,1.5vw,23px); font-weight:300; line-height:1.4; letter-spacing:-.01em}
.opinion p::before{content:"“"; color:var(--naranja)}
.opinion p::after{content:"”"; color:var(--naranja)}
.opinion .m{color:var(--naranja)}
.opiniones-pie{margin:26px 0 0; color:var(--dim); font-size:15px; line-height:1.6}
.opiniones-pie a{color:var(--fg); text-decoration:underline; text-underline-offset:4px}
@media (max-width:860px){ .opiniones{padding:2vh var(--mx) 9vh} .opiniones-lista{grid-template-columns:1fr} }

/* ───── precios ───── */
.precios{position:relative; padding:15vh var(--mx) 13vh}
.precios-t{font-family:var(--d); font-weight:800; font-stretch:125%; font-variation-settings:"wdth" 125; text-transform:uppercase;
  font-size:clamp(30px,4.4vw,70px); line-height:.96; letter-spacing:-.02em; word-spacing:.12em; margin:22px 0 0; max-width:22ch}
.planes{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,22px); margin-top:clamp(40px,7vh,72px); align-items:start}
.plan{position:relative; border:1px solid var(--linea); border-radius:18px; padding:30px 26px 26px; display:flex; flex-direction:column; gap:18px;
  /* un tono apenas distinto del fondo, sea de día o de noche (antes era blanco al 35 %: de noche quedaba gris sobre gris) */
  background:rgba(255,255,255,.35); background:color-mix(in srgb, var(--fg) 4%, transparent)}
.plan h3{font-family:var(--d); font-weight:800; font-stretch:125%; font-variation-settings:"wdth" 125; text-transform:uppercase;
  font-size:23px; letter-spacing:.02em; margin:0}
.plan-p b{display:block; font-size:clamp(30px,3vw,42px); font-weight:500; letter-spacing:-.03em; line-height:1.05}
.plan-p span{display:block; margin-top:6px; color:var(--dim); font-size:14px}
.plan ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; flex:1}
.plan li{position:relative; padding-left:22px; font-size:15.5px; line-height:1.45; color:var(--dim)}
.plan li::before{content:""; position:absolute; left:0; top:.62em; width:12px; height:1px; background:var(--naranja)}
.plan-cta{display:inline-flex; justify-content:center; padding:15px 20px; border-radius:99px; border:1px solid currentColor;
  font-family:var(--m); font-size:12px; letter-spacing:.14em; text-transform:uppercase; transition:background-color .4s var(--ease), color .4s var(--ease)}
.plan-cta:hover{background:var(--fg); color:var(--bg)}
.plan-etq{position:absolute; top:-11px; left:26px; background:var(--naranja-boton); color:#fff; padding:4px 12px; border-radius:99px; font-size:12px}
/* Gratis grande y Pro chica, que todavía no se puede contratar */
.planes{grid-template-columns:1.5fr 1fr; max-width:980px}
.plan-pro{background:transparent; border-style:dashed}
.plan-pro .plan-p b{font-size:clamp(22px,2vw,28px)}
.plan-pro .plan-etq{background:var(--fg); color:var(--bg)}
.plan .plan-cta{align-self:flex-start; background:var(--naranja-boton); border-color:var(--naranja-boton); color:#fff}
.plan .plan-cta:hover{background:#A53816; color:#fff}
.aviso-pro{display:grid; grid-template-columns:1fr 1fr; gap:6vw; align-items:start; margin-top:clamp(56px,10vh,110px);
  padding-top:clamp(32px,5vh,52px); border-top:1px solid var(--linea)}
.aviso-pro .lista-t{margin:0}
/* el botón toma los colores de la luz activa (de día, oscuro; de noche, claro): cuando la sección de
   preguntas pone la página de noche, el formulario todavía está en pantalla y un botón fijo oscuro desaparecía */
.aviso-pro .boton{background:var(--fg); color:var(--bg)}
.aviso-pro .boton i{background:var(--naranja)}
@media (max-width:860px){ .precios{padding:11vh var(--mx) 8vh} .planes{grid-template-columns:1fr} .aviso-pro{grid-template-columns:1fr; gap:28px} }

/* ───── avisame cuando esté lista ───── */
.lista-t{font-family:var(--d); font-weight:800; font-stretch:125%; font-variation-settings:"wdth" 125; text-transform:uppercase;
  font-size:clamp(30px,4.2vw,64px); line-height:.96; letter-spacing:-.02em; word-spacing:.12em; margin:22px 0 0}
.form{display:flex; flex-direction:column; gap:18px; max-width:520px}
.oculto{position:absolute; left:-9999px}
.campo{display:flex; flex-direction:column; gap:8px}
.campo label{font-family:var(--m); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim)}
.campo .opcional{text-transform:none; letter-spacing:.02em}
.campo input[type=text], .campo input[type=email]{
  font:inherit; font-size:17px; color:var(--fg); background:transparent; border:0; border-bottom:1px solid var(--linea);
  padding:12px 2px; border-radius:0; transition:border-color .3s var(--ease);
}
.campo input::placeholder{color:currentColor; opacity:.38}
.campo input:focus{outline:none; border-bottom-color:var(--naranja)}
.campo-ok{flex-direction:row; align-items:flex-start; gap:12px}
.campo-ok input{width:20px; height:20px; margin-top:2px; accent-color:var(--naranja); flex-shrink:0}
.campo-ok label{font-family:var(--b); font-size:14px; letter-spacing:0; text-transform:none; line-height:1.5}
.campo-ok a{text-decoration:underline; text-underline-offset:3px}
.form .boton{align-self:flex-start; border:0; cursor:pointer}
.form-estado{margin:0; min-height:1.2em; font-family:var(--m); font-size:12.5px; letter-spacing:.1em; color:var(--acento)}
/* enviado: solo queda el mensaje de que llegó */
.form.enviado > *:not(.form-estado){display:none}
.form.enviado .form-estado{font-family:var(--b); font-size:clamp(20px,1.8vw,26px); letter-spacing:-.01em; line-height:1.3; color:var(--fg);
  padding-left:20px; border-left:3px solid var(--naranja)}

/* ───── preguntas ───── */
.faq{position:relative; padding:13vh var(--mx) 12vh; display:grid; grid-template-columns:1fr 1.25fr; gap:6vw; align-items:start}
.faq-cab .d{font-size:clamp(44px,6.4vw,124px); margin-top:26px}
.faq-lista{display:flex; flex-direction:column; border-top:1px solid var(--linea)}
.faq-item{border-bottom:1px solid var(--linea)}
.faq-item summary{
  display:flex; align-items:center; justify-content:space-between; gap:20px; cursor:pointer;
  padding:22px 0; font-size:clamp(17px,1.5vw,22px); font-weight:400; letter-spacing:-.01em; list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--naranja)}
.faq-item summary:focus-visible{outline:2px solid var(--naranja); outline-offset:4px}
.faq-item summary i{position:relative; width:15px; height:15px; flex-shrink:0}
.faq-item summary i::before, .faq-item summary i::after{
  content:""; position:absolute; left:0; top:7px; width:15px; height:1px; background:currentColor; transition:transform .45s var(--ease);
}
.faq-item summary i::after{transform:rotate(90deg)}
.faq-item[open] summary{color:var(--naranja)}
.faq-item[open] summary i::after{transform:rotate(0)}
.faq-item p{margin:0 0 26px; max-width:58ch; color:var(--dim); font-size:clamp(15px,1.15vw,17.5px); line-height:1.6}
.faq-item em{font-style:normal; color:var(--fg)}
@media (max-width:860px){
  .faq{grid-template-columns:1fr; gap:34px; padding:9vh var(--mx) 9vh}
  .faq-cab .d{margin-top:18px; font-size:clamp(34px,10vw,56px)}
}

/* ───── final ───── */
.final{position:relative; height:120vh; overflow:hidden; color:#fff}
.final .foto{inset:-8% 0}
.final-velo{position:absolute; inset:0; background:radial-gradient(ellipse at 50% 60%, rgba(0,0,0,.1), rgba(0,0,0,.7))}
.final-in{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 var(--mx)}
.final-t{font-size:clamp(60px,13vw,250px); white-space:nowrap}
.final-in p{font-size:clamp(18px,1.6vw,24px); font-weight:300; max-width:34ch; margin:30px 0 44px; color:rgba(255,255,255,.86)}
.boton{
  position:relative; display:inline-flex; align-items:center; gap:16px; padding:22px 34px 22px 38px; border-radius:99px;
  background:var(--hueso); color:var(--tinta); font-family:var(--m); font-size:12px; letter-spacing:.16em; text-transform:uppercase; overflow:hidden;
}
.boton-fondo{position:absolute; inset:0; background:var(--naranja-boton); border-radius:99px; transform:scale(0); transform-origin:50% 100%}
.boton span, .boton i{position:relative; z-index:2}
.boton i{width:34px; height:34px; border-radius:50%; background:var(--tinta); color:#fff; display:grid; place-items:center; font-style:normal; font-size:15px}
.boton:hover{color:#fff}
.boton:focus-visible, .nav-cta:focus-visible{outline:2px solid var(--naranja); outline-offset:4px}
.boton-chico{gap:12px; padding:9px 9px 9px 22px; font-size:12px; margin-top:4px}
.boton-chico i{width:30px; height:30px; font-size:13px; background:var(--naranja); transition:background-color .4s var(--ease)}
.boton-chico:hover i{background:var(--tinta)}

.pie{position:relative; background:var(--noche); color:var(--hueso); padding:14vh 0 32px; overflow:hidden}
.pie-marquee{display:flex; white-space:nowrap; will-change:transform}
.pie-marquee .d{font-size:clamp(90px,19vw,360px); padding-right:.25em; color:transparent; -webkit-text-stroke:1px rgba(237,238,234,.35)}
.pie-marquee .d.lleno{color:var(--hueso); -webkit-text-stroke:0}
.pie-fila{display:flex; justify-content:space-between; align-items:center; gap:18px 30px; flex-wrap:wrap; padding:10vh var(--mx) 0; color:var(--dim)}
.pie-contacto{display:flex; gap:0 22px; flex-wrap:wrap; color:var(--fg)}
.pie-contacto a{text-decoration:underline; text-underline-offset:4px}
.pie-links{display:flex; gap:0 22px; flex-wrap:wrap}
/* 44 px de alto para tocar con el dedo (antes 26 px; "Volver arriba" tenía 17) */
.pie-links a, .pie-contacto a, .pie-fila > a{display:inline-flex; align-items:center; min-height:44px}
.pie-links a{position:relative}
.pie-links a::after{content:""; position:absolute; left:0; right:0; bottom:10px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .5s var(--ease)}
.pie-links a:hover::after{transform:scaleX(1); transform-origin:left}
.pie-fila a:hover{color:var(--fg)}

/* celulares: menos trabajo para la GPU */
@media (hover:none), (max-width:860px){
  .grano{display:none}
  .fuente{backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(255,255,255,.88)}
  .hero-nombre{filter:drop-shadow(0 4px 14px rgba(0,0,0,.45))}
}

@media (prefers-reduced-motion:reduce){
  .grano{display:none}
  .mani-t .w{opacity:1}
  .pant{opacity:1; display:none}
  .pant:first-child{display:block}
}