/* =========================================================
   Erick André L. — Montañista
   Hoja de estilos única (versión limpia, nov 2026)
   Orden: base · barra índice · hero · secciones · fichas ·
   ventana de ficha · ranking · marcas · FAQ · cómo califico ·
   sobre mí · CTA · footer · visor de fotos · celular
   ========================================================= */

/* ---------- Base ---------- */
:root{
  color-scheme:dark;
  --bg:#111A22; --surface:#1B2631; --card:#17222D; --line:#2C3A47;
  --text:#F1EEE6; --muted:#9AA6B2; --light:#F6F4EF;
  --amber:#E3A24A; --ice:#74B4CC; --sage:#8FB89E; --pine:#3C5245;
  --display:"Newsreader",Georgia,serif;
  --data:"Work Sans",Arial,sans-serif;
  --nav:56px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html{scroll-padding-top:calc(var(--nav) + var(--safe-t) + 12px); -webkit-text-size-adjust:100%; text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0; background-color:var(--bg); color:var(--text); font-family:var(--data); line-height:1.6;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520' fill='none' stroke='%23ffffff' stroke-opacity='.045'%3E%3Cg transform='translate(160 180) rotate(-20)'%3E%3Cellipse rx='30' ry='20'/%3E%3Cellipse rx='60' ry='42'/%3E%3Cellipse rx='90' ry='66'/%3E%3Cellipse rx='120' ry='92'/%3E%3C/g%3E%3Cg transform='translate(390 380) rotate(15)'%3E%3Cellipse rx='25' ry='16'/%3E%3Cellipse rx='50' ry='34'/%3E%3Cellipse rx='75' ry='54'/%3E%3Cellipse rx='100' ry='74'/%3E%3C/g%3E%3C/svg%3E")}
body.lock{overflow:hidden}
a,summary,button{-webkit-tap-highlight-color:transparent}
img{display:block; max-width:100%}
h1,h2,h3{margin:0; font-family:var(--display); font-weight:500; line-height:1.15; letter-spacing:-.02em}
:focus-visible{outline:2px solid var(--amber); outline-offset:2px}

.wrap{max-width:780px; margin:0 auto; padding:0 28px}
section.wrap{padding-top:64px; padding-bottom:64px}
.divider{height:1px; margin:0; border:0; background:var(--line)}
.h-xl{font-size:clamp(40px,8vw,60px); line-height:1.1}
.h-lg{font-size:clamp(30px,6vw,38px); line-height:1.12}
.kicker{margin-bottom:8px; color:var(--amber); font-size:13px; font-weight:600; letter-spacing:.04em}
.body-text{max-width:62ch; margin:12px 0 0; color:var(--muted); font-size:17px}
.body-text + .body-text{margin-top:18px}
.hint{color:var(--sage)}

.btn{display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:12px 24px; border:1.5px solid var(--amber); border-radius:2px; background:var(--amber); color:#111A22; font-size:15px; font-weight:600; letter-spacing:.01em; text-decoration:none; cursor:pointer}
.btn.alt{background:transparent; border-color:var(--light); color:var(--light)}
.btn:hover{filter:brightness(1.08)}

/* ---------- Barra índice (fija, visible desde el hero) ---------- */
.topnav{position:fixed; top:0; left:0; right:0; z-index:50; padding-top:var(--safe-t); background:linear-gradient(180deg,rgba(8,12,16,.7) 0%,rgba(8,12,16,0) 100%); transition:background-color .25s,box-shadow .25s}
.topnav.solid{background:rgba(17,26,34,.93); box-shadow:0 1px 0 var(--line); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.topnav-in{display:flex; align-items:center; gap:8px; max-width:1100px; height:var(--nav); margin:0 auto; padding:0 10px 0 16px}
.nav-brand{display:none; flex:none; color:var(--light); font-family:var(--display); font-size:19px; font-weight:600; text-decoration:none; transition:opacity .25s}
.topnav:not(.solid) .nav-brand{opacity:0; pointer-events:none}
.nav-links{position:relative; flex:1; min-width:0; display:flex; align-items:center; gap:6px; margin:0; padding:0 28px 0 0; list-style:none; overflow-x:auto; scrollbar-width:none; overscroll-behavior-x:contain;
  -webkit-mask-image:linear-gradient(90deg,#000 82%,transparent); mask-image:linear-gradient(90deg,#000 82%,transparent)}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a{flex:none; display:inline-flex; align-items:center; height:36px; padding:0 14px; border:1px solid transparent; border-radius:18px; color:#D5D9DE; font-size:14px; font-weight:600; white-space:nowrap; text-decoration:none; transition:background-color .2s,color .2s,border-color .2s}
.nav-links a:hover{color:var(--light); border-color:rgba(246,244,239,.3)}
.nav-links a.key{color:var(--amber); border-color:rgba(227,162,74,.6)}
.nav-links a.is-active{background:var(--light); border-color:var(--light); color:#111A22}
.nav-links a.key.is-active{background:var(--amber); border-color:var(--amber); color:#111A22}
.nav-ig{flex:none; display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 8px; border-radius:20px; color:var(--light); font-size:14px; font-weight:600; text-decoration:none}
.nav-ig svg{width:22px; height:22px}
.nav-ig span{display:none}
.nav-ig:hover{color:var(--amber)}

/* ---------- Hero ---------- */
.hero{position:relative; background:var(--surface); color:var(--light)}
.hero-stage{position:relative; display:flex; align-items:flex-end; height:100vh; height:100svh; min-height:540px; overflow:hidden}
.hero-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 25%}
@media (min-width:700px) and (min-aspect-ratio:1/1){.hero-img{object-position:center 40%}}
.hero-img.soft{opacity:0; filter:blur(14px) brightness(.75); transform:scale(1.08)}
.hero-shade{position:absolute; inset:0; background:linear-gradient(180deg,rgba(17,26,34,.2) 0%,rgba(17,26,34,.3) 45%,rgba(17,26,34,.88) 86%,#111A22 100%)}
.hero-dim{position:absolute; inset:0; opacity:0; background:rgba(17,26,34,.5)}
.hero .hero-inner{position:relative; z-index:2; width:100%; padding-bottom:calc(96px + var(--safe-b))}
.hero h1{font-size:clamp(44px,8vw,72px); font-weight:600; line-height:1.02; letter-spacing:-.015em}
.hook{max-width:22ch; margin:12px 0 0; color:var(--amber); font-family:var(--display); font-size:clamp(23px,3.4vw,30px); line-height:1.2; letter-spacing:-.01em}
.hero-more{padding-top:18px}
.tag{max-width:46ch; margin:0; color:var(--sage); font-size:18px; font-weight:600}
.hero-ctas{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.scroll-hint{display:none}

/* Efecto al deslizar (solo con JS y sin "reducir movimiento") */
.fx .hero{height:165vh; height:165svh}
.fx .hero-stage{position:sticky; top:0}
.fx .hero-img.soft{opacity:var(--p,0)}
.fx .hero-dim{opacity:var(--p,0)}
.fx .hero-inner{transform:translate3d(0,calc((1 - var(--q,0)) * var(--more-h,0px)),0); will-change:transform}
.fx .hero-more{opacity:var(--q,0)}
.fx .hero:not(.revealed) .hero-more{visibility:hidden}
.fx .scroll-hint{position:absolute; z-index:3; left:50%; bottom:calc(20px + var(--safe-b)); display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 12px; border:0; background:none; color:var(--light); font:600 13px var(--data); cursor:pointer; opacity:calc(1 - var(--p,0) * 4); transform:translateX(-50%)}
.fx .scroll-hint svg{width:22px; height:22px; animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)}}

/* ---------- Fichas de montaña ---------- */
#montanas{max-width:1100px}
.tracker{display:grid; grid-template-columns:1fr; gap:14px; margin-top:28px}
.card{border:1.5px solid var(--line); border-radius:2px; overflow:hidden; background:var(--card); transition:border-color .2s}
.card[open]{border-color:var(--amber)}
.card>summary{list-style:none; cursor:pointer}
.card>summary::-webkit-details-marker{display:none}
.card-photo{width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; background:var(--surface); transition:opacity .2s}
.card-face{display:grid; grid-template-columns:1fr auto; align-items:center; gap:6px 12px; padding:14px 16px 16px}
.badge{grid-column:1/-1; justify-self:start; padding:3px 10px; border-radius:20px; background:rgba(143,184,158,.14); color:var(--sage); font-size:12px; font-weight:600; letter-spacing:.03em}
.badge.pending{background:rgba(154,166,178,.14); color:var(--muted)}
.card-name{font-family:var(--display); font-size:21px; line-height:1.15; letter-spacing:-.02em}
.card-route{display:block; margin-top:2px; color:var(--muted); font-family:var(--data); font-size:12.5px; letter-spacing:0}
.card-diff{font-size:24px; font-weight:600; color:var(--amber); letter-spacing:-.01em}
.card-diff small{color:var(--muted); font-size:13px; font-weight:400}
.card-more{grid-column:1/-1; margin-top:4px; color:var(--amber); font-size:13.5px; font-weight:600}

.card-stats{display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; padding:4px 16px 20px; border-top:1px solid var(--line)}
.stat{padding-top:14px; font-size:14px}
.stat span{display:block; margin-bottom:3px; color:var(--muted); font-size:12px}
.stat b{font-weight:600}
.stat .real{margin:3px 0 0; color:var(--ice); font-size:12.5px; font-weight:600}
.final-score{grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; margin-top:2px; padding:10px 14px; border-radius:2px; background:rgba(227,162,74,.12); font-size:14px; font-weight:600}
.final-score b{color:var(--amber); font-size:18px}
.reel-btns{grid-column:1/-1; display:flex; flex-wrap:wrap; gap:10px; margin-top:4px}
.reel-btn{display:inline-flex; align-items:center; min-height:44px; padding:10px 18px; border-radius:2px; background:var(--light); color:#111A22; font-size:13.5px; font-weight:600; text-decoration:none}

.route-info{padding:4px 16px 20px; border-top:1px solid var(--line)}
.route-info h3{margin:18px 0 8px; font-size:20px}
.route-info ul{display:grid; gap:12px; margin:0; padding:0; list-style:none}
.route-info>ul>li>span{display:block; margin-bottom:4px; color:var(--sage); font-size:14px; font-weight:600; letter-spacing:.02em}
.route-info li p{margin:0; font-size:14px}
.route-info li.full{grid-column:1/-1}
.route-info ul.gear{display:block; margin:6px 0 0}
.route-info ul.gear li{margin-top:5px; color:var(--muted); font-size:14px; line-height:1.5}
.route-info ul.gear b{color:var(--text); font-weight:600}
.route-link{display:inline-flex; align-items:center; min-height:32px; color:var(--amber); font-weight:600; text-decoration:none}
.route-link:hover{text-decoration:underline; text-underline-offset:3px}

.card.locked .locked-photo,.card.locked .card-face{opacity:.6}
.locked-photo{position:relative; aspect-ratio:3/2; overflow:hidden; background:linear-gradient(180deg,#33424F 0%,#1C2530 100%)}
.locked-photo svg{position:absolute; bottom:0; left:0; width:100%; height:75%}
.locked-photo span{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:rgba(246,244,239,.22); font-size:52px; font-weight:600}
.locked-cta{display:flex; align-items:center; min-height:44px; margin:0 16px 14px; color:var(--amber); font-size:13.5px; font-weight:600; text-decoration:none}
.locked-cta:hover{text-decoration:underline; text-underline-offset:3px}

/* ---------- Ventana de ficha (computadora: ventana; celular: pantalla completa) ---------- */
.mdl{width:min(820px,calc(100vw - 32px)); max-width:none; max-height:calc(100vh - 48px); max-height:calc(100dvh - 48px); padding:0; border:1px solid var(--line); border-radius:4px; background:var(--card); color:var(--text); overflow:auto; overscroll-behavior:contain}
.mdl::backdrop{background:rgba(6,10,14,.84)}
.mdl[open]{animation:mdlIn .22s ease-out}
@keyframes mdlIn{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.mdl-bar{position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--line); background:var(--card)}
.mdl-pos{flex:1; color:var(--muted); font-size:13px; text-align:center}
.mdl-nav,.mdl-close{display:flex; align-items:center; justify-content:center; width:44px; height:44px; border:1px solid var(--line); border-radius:50%; background:transparent; color:var(--text); font-size:22px; line-height:1; cursor:pointer}
.mdl-close{font-size:16px}
.mdl-nav:disabled{opacity:.3; cursor:default}
.mdl-nav:not(:disabled):hover,.mdl-close:hover{border-color:var(--amber); color:var(--amber)}
.mdl-body.in{animation:mdlFade .25s ease-out}
@keyframes mdlFade{from{opacity:0} to{opacity:1}}
.mdl-hero{position:relative; z-index:0; overflow:hidden; background:var(--surface)}
.mdl-photo{display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover}
.mdl-photo.soft{position:absolute; inset:0; height:100%; opacity:0; filter:blur(14px) brightness(.75); transform:scale(1.08)}
.mdl-shade{position:absolute; inset:0; background:linear-gradient(180deg,rgba(23,34,45,0) 30%,rgba(23,34,45,.7) 70%,#17222D 100%)}
.mdl-dim{position:absolute; inset:0; opacity:0; background:rgba(17,26,34,.5)}
.mdl-content{position:relative; z-index:1}
.mdl-top{color:var(--light)}
.mdl-top .card-face{padding:18px 22px 6px}
.mdl-top .card-name{text-shadow:0 2px 12px rgba(0,0,0,.55)}
.mdl-top .card-route{color:#C9CDD3}
.mdl-hint{display:none}
.mdl-rest{background:var(--card)}
.fx .mdl-hero{position:sticky; top:var(--bar-h,65px)}
.fx .mdl-photo.soft,.fx .mdl-dim{opacity:var(--mp,0)}
.fx .mdl-hint{display:flex; align-items:center; gap:6px; margin:0 auto 10px; padding:9px 18px; border:1.5px solid var(--amber); border-radius:22px; background:rgba(17,26,34,.72); color:var(--amber); font:600 15px var(--data); letter-spacing:.02em; cursor:pointer; box-shadow:0 4px 18px rgba(0,0,0,.35); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); opacity:calc(1 - var(--mp,0) * 4)}
.fx .mdl-hint svg{width:20px; height:20px; animation:nudge 1.6s ease-in-out infinite}
.mdl .card-name{font-size:28px}
.mdl .card-diff{font-size:30px}
.mdl .card-stats{grid-template-columns:repeat(3,minmax(0,1fr)); padding:4px 22px 22px}
.mdl .route-info{padding:4px 22px 26px}
.mdl .route-info>ul{grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 20px}
.mdl-foot{display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:16px 22px calc(20px + var(--safe-b)); border-top:1px solid var(--line)}
.mdl-step{display:flex; flex-direction:column; gap:2px; min-height:60px; padding:10px 14px; border:1.5px solid var(--line); border-radius:2px; background:transparent; color:var(--text); font:inherit; text-align:left; cursor:pointer}
.mdl-step.next{grid-column:2; align-items:flex-end; text-align:right}
.mdl-step span{color:var(--amber); font-size:12.5px; font-weight:600}
.mdl-step b{font-family:var(--display); font-size:17px; font-weight:500; line-height:1.2}
.mdl-step:hover{border-color:var(--amber)}
.mdl-step[hidden]{display:none}
.mdl-swipe{display:none}

/* ---------- Ranking ---------- */
.rank{display:flex; flex-direction:column; margin-top:28px; border-top:1px solid var(--line)}
.rank-row{position:relative; display:grid; grid-template-columns:34px 1fr 64px; align-items:center; gap:4px 14px; padding:16px 4px; border-bottom:1px solid var(--line)}
.rank-n{color:var(--sage); font-size:24px; font-weight:600}
.rank-name{color:inherit; font-family:var(--display); font-size:21px; letter-spacing:-.02em; text-decoration:none}
.rank-name::after{content:""; position:absolute; inset:0}
.rank-meta{grid-column:2; display:flex; flex-wrap:wrap; align-items:center; gap:2px 12px; color:var(--ice); font-size:14px; font-weight:600}
.rank-gpx{position:relative; z-index:1; display:inline-flex; align-items:center; gap:4px; min-height:32px; padding:0 10px; border:1px solid rgba(227,162,74,.55); border-radius:16px; color:var(--amber); font-size:12.5px; font-weight:600; text-decoration:none; white-space:nowrap}
.rank-gpx:hover{background:var(--amber); color:#111A22}
.rank-score{grid-row:1/3; grid-column:3; color:var(--amber); font-size:24px; font-weight:600; text-align:right}
.bar{grid-column:2; height:6px; border-radius:3px; background:var(--line); overflow:hidden}
.bar i{display:block; height:100%; background:var(--amber)}
.follow{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:28px; padding:18px 20px; border:1.5px solid var(--line); border-radius:2px; background:var(--card)}
.follow p{margin:0; color:var(--muted); font-size:15px}
.follow b{color:var(--text); font-weight:600}
.follow .btn{flex:none}

/* ---------- Marcas (sobre foto) ---------- */
.brands-band{position:relative; overflow:hidden; padding:96px 0; background:var(--surface)}
.band-bg{position:absolute; inset:0}
.band-bg img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 38%}
.brands-band::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,#111A22 0%,rgba(17,26,34,.35) 30%,rgba(17,26,34,.35) 70%,#111A22 100%)}
.band-inner{position:relative; z-index:2}
.brands-band h2{color:var(--light); text-shadow:0 2px 14px rgba(0,0,0,.45)}
.brand{display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-width:240px; margin-top:26px; padding:26px 32px; border:1.5px solid rgba(246,244,239,.3); border-radius:2px; background:rgba(17,26,34,.62); color:var(--text); text-align:center; text-decoration:none; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:border-color .2s}
.brand:hover{border-color:var(--amber)}
.brand b{font-size:22px; font-weight:600; letter-spacing:.14em}
.brand span{color:var(--sage); font-size:12.5px}

/* ---------- Preguntas frecuentes ---------- */
.faq{margin-top:26px; border-top:1px solid var(--line)}
.faq details{padding:16px 0; border-bottom:1px solid var(--line)}
.faq summary{font-family:var(--display); font-size:20px; letter-spacing:-.02em; cursor:pointer}
.faq p{margin:10px 0 0; color:var(--muted); font-size:15.5px}
.faq ul,.faq ol{margin:10px 0 0; padding-left:20px; color:var(--muted); font-size:15.5px}
.faq li{margin-top:6px}
.faq li b{color:var(--text); font-weight:600}
.faq a{color:var(--amber)}

/* ---------- ¿Cómo califico? ---------- */
.factors{margin:26px 0 0; padding:0; list-style:none; border-top:1px solid var(--line)}
.factors>li{display:grid; grid-template-columns:200px 1fr; align-items:baseline; gap:4px 20px; padding:14px 2px; border-bottom:1px solid var(--line)}
.factors>li>b{font-family:var(--display); font-size:20px; font-weight:500; letter-spacing:-.02em}
.factors>li>span{color:var(--ice); font-size:14.5px; line-height:1.5}
.scale{grid-column:2; display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 2px; padding:0; list-style:none}
.scale li{display:flex; align-items:baseline; gap:6px; padding:5px 10px; border:1px solid var(--line); border-radius:20px; background:var(--card); font-size:13px}
.scale b{color:var(--amber); font-size:14px; font-weight:600}
.example{margin-top:26px; padding:18px 20px; border-left:3px solid var(--amber); background:var(--card)}
.example span{color:var(--amber); font-size:15px; font-weight:600; letter-spacing:.03em}
.example p{margin:6px 0 0; font-size:26px; font-weight:600; letter-spacing:-.01em}
.example b{color:var(--amber); font-weight:600}

/* ---------- Sobre mí ---------- */
.about .body-text{max-width:62ch; color:#C9CDD3}
.gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:36px; padding-top:28px; border-top:1px solid var(--line)}
.g-item{display:block; padding:0; border:0; border-radius:2px; background:none; cursor:zoom-in}
.g-item:hover{outline:1.5px solid var(--amber); outline-offset:2px}
.gallery img{width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; border:1.5px solid var(--line); border-radius:2px}

/* ---------- Súmate al reto ---------- */
.cta{padding:44px 36px; border:1px solid rgba(227,162,74,.35); border-radius:2px; background:linear-gradient(135deg,#3C5245 0%,#1F2F27 100%); color:var(--light); text-align:center}
.cta h2{font-size:30px}
.cta p{margin:10px 0 0; color:#DDE5DF; font-size:16px}
.cta-row{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:22px}
.cta-mail{font-size:14px}
.cta-mail b{color:var(--light); font-weight:600; word-break:break-all; user-select:all}
#contacto{padding-top:0}

/* ---------- Footer y botón de regreso ---------- */
footer{padding:28px 0 calc(60px + var(--safe-b)); text-align:center}
footer p{margin:0; color:var(--muted); font-size:13px}
footer a{color:var(--muted)}
.to-top{position:fixed; right:16px; bottom:calc(16px + var(--safe-b)); z-index:40; display:flex; align-items:center; justify-content:center; width:46px; height:46px; border:1px solid var(--line); border-radius:50%; background:rgba(27,38,49,.94); color:var(--light); cursor:pointer; opacity:0; transform:translateY(10px); pointer-events:none; transition:opacity .2s,transform .2s}
.to-top svg{width:20px; height:20px}
.to-top.show{opacity:1; transform:none; pointer-events:auto}
.to-top:hover{border-color:var(--amber); color:var(--amber)}

/* ---------- Visor de fotos ---------- */
.lightbox{position:fixed; inset:0; z-index:100; background:#080C10}
.lightbox[hidden]{display:none}
.lb-track{display:flex; height:100%; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior:contain; scrollbar-width:none}
.lb-track::-webkit-scrollbar{display:none}
.lb-slide{flex:0 0 100%; display:flex; align-items:center; justify-content:center; height:100%; padding:calc(64px + var(--safe-t)) 16px calc(64px + var(--safe-b)); scroll-snap-align:center; scroll-snap-stop:always}
.lb-slide img{width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; border-radius:2px}
.lb-btn{position:absolute; display:flex; align-items:center; justify-content:center; width:46px; height:46px; border:1px solid rgba(246,244,239,.25); border-radius:50%; background:rgba(17,26,34,.7); color:var(--light); font-size:24px; line-height:1; cursor:pointer}
.lb-close{top:calc(12px + var(--safe-t)); right:12px; font-size:18px}
.lb-prev{left:16px; top:50%; transform:translateY(-50%)}
.lb-next{right:16px; top:50%; transform:translateY(-50%)}
.lb-count{position:absolute; left:0; right:0; bottom:calc(18px + var(--safe-b)); margin:0; color:var(--muted); font-size:13px; text-align:center}

/* ---------- Efectos hover solo con mouse ---------- */
@media (hover:hover){
  .card:not(.locked):hover{border-color:rgba(227,162,74,.7)}
  .card>summary:hover .card-photo{opacity:.92}
  .rank-row:hover{background:rgba(255,255,255,.03)}
  .rank-row:hover .rank-name{color:var(--amber)}
}

/* ---------- Tablet y computadora ---------- */
@media (min-width:561px){
  .tracker{grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start}
}
@media (min-width:901px){
  .tracker{grid-template-columns:repeat(3,minmax(0,1fr))}
  .topnav-in{padding:0 20px}
  .nav-brand{display:block}
  .nav-links{justify-content:center; padding:0; -webkit-mask-image:none; mask-image:none}
  .nav-ig span{display:inline}
}

/* ---------- Celular ---------- */
@media (max-width:560px){
  .wrap{padding:0 20px}
  section.wrap{padding-top:48px; padding-bottom:48px}
  .hero h1{font-size:44px}
  .tag{font-size:17px}
  .hero-ctas .btn{flex:1 1 auto}
  .h-xl{font-size:40px}
  .h-lg{font-size:32px}
  .body-text{font-size:16.5px}

  .mdl{width:100vw; height:100vh; height:100dvh; max-height:none; margin:0; border:0; border-radius:0}
  .mdl-bar{padding:calc(8px + var(--safe-t)) 10px 8px}
  .mdl-photo{aspect-ratio:1/1}
  .mdl-top .card-face{padding:16px 18px 6px}
  .mdl .card-name{font-size:24px}
  .mdl .card-diff{font-size:26px}
  .mdl .card-stats{grid-template-columns:1fr 1fr; padding:4px 18px 20px}
  .mdl .route-info{padding:4px 18px 22px}
  .mdl .route-info>ul{grid-template-columns:1fr}
  .mdl-foot{padding:14px 18px calc(18px + var(--safe-b))}
  .mdl-swipe{display:block; margin:0; padding:0 18px 14px; color:var(--muted); font-size:12px; text-align:center}

  .rank-row{grid-template-columns:28px 1fr 52px; gap:4px 10px}
  .rank-meta{flex-direction:column; align-items:flex-start; gap:6px}
  .rank-gpx{margin-bottom:4px}
  .rank-name{font-size:20px}
  .follow{flex-direction:column; align-items:stretch; text-align:left}
  .brands-band{padding:72px 0}
  .brand{display:flex; min-width:0}
  .factors>li{grid-template-columns:1fr}
  .scale{grid-column:1}
  .example p{font-size:22px}
  .gallery{grid-template-columns:repeat(2,1fr); gap:8px}
  .cta{padding:34px 20px}
  .cta-row .btn{flex:1 1 100%}
  .lb-prev,.lb-next{display:none}
}

@media (prefers-reduced-motion:reduce){
  .mdl[open],.mdl-body.in{animation:none}
  .to-top,.nav-links a{transition:none}
}