/* Gym Titanes - base: tokens, nav, botones, hero, barra de confianza, marquesina */
:root{
  --k:#0a0a0b; --k2:#121214; --k3:#1b1b1f; --line:#2a2a2f;
  --hot:#ff4a1c; --hot2:#ff7a2f; --bone:#f4f1ea; --mut:#a3a3a8; --ok:#25d366;
  --disp:"Bebas Neue","Oswald",Impact,sans-serif;
  --body:"Barlow","Segoe UI",system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{font-family:var(--body);background:var(--k);color:var(--bone);line-height:1.55;font-size:17px;overflow-x:hidden;padding-bottom:0}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
:focus-visible{outline:3px solid var(--hot2);outline-offset:3px}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.disp{font-family:var(--disp);font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:.92}
.skip{position:absolute;left:-999px}
.skip:focus{left:12px;top:12px;background:#fff;color:#000;padding:10px 14px;z-index:999}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;font:700 15px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;border:2px solid transparent;cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
.btn svg{width:18px;height:18px;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn-hot{background:var(--hot);color:#0a0a0b}
.btn-hot:hover{background:var(--bone)}
.btn-line{border-color:var(--bone);color:var(--bone)}
.btn-line:hover{background:var(--bone);color:var(--k)}
.btn-wa{border-color:var(--ok);color:var(--ok)}
.btn-wa:hover{background:var(--ok);color:#04210f}
.btn-sm{min-height:44px;padding:0 20px;font-size:13px}

/* nav */
.nav{position:sticky;top:0;z-index:80;background:rgba(10,10,11,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:20px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-size:30px;letter-spacing:.03em;line-height:1}
.logo i{display:grid;place-items:center;width:34px;height:34px;background:var(--hot);color:#0a0a0b;font-style:normal;font-size:24px;transform:skewX(-8deg)}
.nav-links{display:flex;gap:30px;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.nav-links a{padding:12px 0;position:relative;color:#d6d3cc}
.nav-links a::after{content:"";position:absolute;left:0;bottom:6px;height:2px;width:0;background:var(--hot);transition:width .3s var(--ease)}
.nav-links a:hover{color:#fff}
.nav-links a:hover::after{width:100%}
.nav-right{display:flex;align-items:center;gap:12px}
.burger{display:none;width:44px;height:44px;background:none;border:1px solid var(--line);color:var(--bone);cursor:pointer;place-items:center}
.burger svg{width:22px;height:22px}
@media(max-width:900px){
  .nav-links{position:fixed;inset:68px 0 auto 0;flex-direction:column;gap:0;background:var(--k);border-bottom:1px solid var(--line);padding:8px 24px 20px;transform:translateY(-130%);transition:transform .35s var(--ease);z-index:-1}
  .nav-links.open{transform:none}
  .nav-links a{font-size:18px;padding:16px 0;border-bottom:1px solid var(--line)}
  .burger{display:grid}
  .nav-right .btn{display:none}
}

/* hero */
.hero{position:relative;min-height:calc(100svh - 68px);display:flex;align-items:flex-end;overflow:hidden;background:linear-gradient(135deg,#1a0a05,#0a0a0b 60%)}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:grayscale(.35) contrast(1.1)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,11,.55) 0%,rgba(10,10,11,.25) 35%,rgba(10,10,11,.92) 100%),linear-gradient(90deg,rgba(10,10,11,.8),transparent 70%)}
.hero .wrap{position:relative;z-index:2;width:100%;padding-top:80px;padding-bottom:64px}
.hero h1{font-size:clamp(76px,16vw,248px);max-width:11ch}
.hero h1 em{font-style:normal;color:var(--hot);display:block}
.hero-row{display:flex;flex-wrap:wrap;gap:28px 48px;align-items:flex-end;justify-content:space-between;margin-top:28px}
.hero-row p{max-width:480px;font-size:clamp(17px,2vw,21px);color:#e4e1da}
.hero-btns{display:flex;flex-wrap:wrap;gap:12px}
.hero-tag{position:absolute;z-index:2;right:24px;top:28px;font:700 12px var(--body);letter-spacing:.22em;text-transform:uppercase;color:#fff;border:1px solid rgba(255,255,255,.4);padding:8px 14px;background:rgba(10,10,11,.4)}

/* barra de confianza */
.trust{background:var(--hot);color:#0a0a0b}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.trust div{padding:22px 20px;border-left:1px solid rgba(10,10,11,.25)}
.trust div:first-child{border-left:0;padding-left:0}
.trust b{display:block;font-family:var(--disp);font-weight:400;font-size:clamp(36px,5vw,58px);line-height:1}
.trust span{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
@media(max-width:700px){.trust .wrap{grid-template-columns:1fr 1fr}.trust div{border-top:1px solid rgba(10,10,11,.25)}.trust div:nth-child(odd){border-left:0;padding-left:0}.trust div:nth-child(-n+2){border-top:0}}

/* marquesina */
.marq{overflow:hidden;border-block:1px solid var(--line);background:var(--k);padding:18px 0}
.marq-track{display:flex;gap:48px;width:max-content;animation:marq 38s linear infinite}
.marq-track span{font-family:var(--disp);font-size:clamp(34px,5vw,64px);text-transform:uppercase;white-space:nowrap;display:flex;align-items:center;gap:48px;color:transparent;-webkit-text-stroke:1.5px var(--bone)}
.marq-track span::after{content:"";width:16px;height:16px;background:var(--hot);transform:rotate(45deg)}
.marq:hover .marq-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}

/* revelados */
.rv{opacity:0;transform:translateY(34px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .marq-track{animation:none}
  *{transition-duration:.01ms!important}
}