:root{
  --black:#0d0d0d; --black2:#161616; --red:#D40000; --red2:#ff1f1f;
  --white:#ffffff; --gray:#b3b3b3; --line:rgba(255,255,255,.10);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--black);color:var(--white);font-family:'DM Sans',system-ui,sans-serif;line-height:1.6;overflow-x:hidden}
h1,h2,h3,.display{font-family:'Bebas Neue',sans-serif;font-weight:400;letter-spacing:.5px;line-height:.98}
.kicker{font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:3px;font-size:13px;color:var(--red2)}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;font-size:15px;padding:15px 28px;border-radius:6px;transition:.2s;cursor:pointer;border:none}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red2);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.35)}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.btn-white{background:#fff;color:var(--red)}
.btn-white:hover{transform:translateY(-2px);background:#f0f0f0}
.section{padding:96px 0}
.section-tight{padding:64px 0}

/* HEADER */
header{position:fixed;top:0;left:0;right:0;z-index:50;transition:.3s;background:rgba(13,13,13,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.top{background:rgba(13,13,13,0);backdrop-filter:blur(0);border-color:transparent}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.nav .logo img{height:54px;width:auto;display:block}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{font-family:'Oswald',sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:1px;font-size:14px;color:var(--gray);transition:.2s}
.nav-links a:hover,.nav-links a.active{color:#fff}
.nav-cta{padding:11px 20px;font-size:13px;color:#fff}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none}
.burger span{width:26px;height:2px;background:#fff;display:block}

/* HERO */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;padding-top:74px;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:url('img/hero.jpg') center/cover;z-index:0}
.hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,rgba(13,13,13,.96) 0%,rgba(13,13,13,.82) 42%,rgba(13,13,13,.45) 100%)}
.hero-inner{position:relative;z-index:2;max-width:920px}
.hero h1{font-size:clamp(52px,8.5vw,108px);line-height:1.06;margin:22px 0 20px}
.hero h1 .red{color:var(--red2)}
.hero-sub{font-size:clamp(19px,2.4vw,25px);line-height:1.6;color:#e6e6e6;max-width:680px;margin-bottom:40px;font-weight:400}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}

/* PAGE HERO (subpaginas) */
.phero{position:relative;padding:150px 0 72px;overflow:hidden}
.phero-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.phero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,rgba(13,13,13,.97) 0%,rgba(13,13,13,.8) 52%,rgba(13,13,13,.5) 100%)}
.phero-inner{position:relative;z-index:2;max-width:940px}
.phero h1{font-size:clamp(46px,7.2vw,90px);line-height:1.06;margin:18px 0 20px}
.phero p.lead{font-size:clamp(19px,2.4vw,25px);color:#e6e6e6;max-width:780px;margin-bottom:28px;line-height:1.5}
.phero-ctas{display:flex;gap:14px;flex-wrap:wrap}

/* MARCAS STRIP */
.marcas{background:var(--black2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.marcas .wrap{padding-top:44px;padding-bottom:44px}
.marcas p.kicker{text-align:center;margin-bottom:26px}
.logo-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 38px}
.logo-grid span{font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:1px;font-size:clamp(16px,2vw,22px);color:#777;transition:.2s}
.logo-grid span:hover{color:#fff}

/* CARRUSEL DE LOGOS */
.logos-marquee{overflow:hidden;position:relative;-webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.logos-track{display:flex;gap:22px;width:max-content;animation:scroll-logos 45s linear infinite}
.logos-marquee:hover .logos-track{animation-play-state:paused}
@keyframes scroll-logos{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.logo-chip{flex:none;width:152px;height:92px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;padding:18px}
.logo-chip img{max-width:100%;max-height:100%;object-fit:contain}

/* VALUE */
.val-head{text-align:center;max-width:900px;margin:0 auto 56px}
.val-head h2{font-size:clamp(42px,5.8vw,68px);margin:12px 0}
.val-head p{color:var(--gray);font-size:20px}
.val-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.val-card{background:var(--black2);border:1px solid var(--line);border-radius:12px;padding:32px 26px;transition:.25s}
.val-card:hover{border-color:rgba(212,0,0,.5);transform:translateY(-4px)}
.val-card .num{font-family:'Bebas Neue';font-size:48px;color:var(--red2);line-height:1}
.val-card h3{font-size:28px;margin:14px 0 8px}
.val-card p{color:var(--gray);font-size:16px}

/* VIDEO */
.video-frame{position:relative;width:100%;max-width:960px;margin:42px auto 0;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:0 24px 70px rgba(0,0,0,.55)}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* PRODUCTOS */
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.prod-grid.two{grid-template-columns:repeat(2,1fr);max-width:860px;margin:0 auto}
.prod{background:var(--black2);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:.25s}
.prod:hover{transform:translateY(-6px);border-color:rgba(212,0,0,.5)}
.prod-img{height:210px;background-size:cover;background-position:center}
.prod-body{padding:24px 24px 28px}
.prod-body .tag{font-family:'Oswald';text-transform:uppercase;letter-spacing:2px;font-size:12px;color:var(--red2);font-weight:600}
.prod-body h3{font-size:33px;margin:8px 0 10px}
.prod-body p{color:var(--gray);font-size:17px}

/* USOS (venta) */
.use-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.use-card{background:linear-gradient(160deg,#1c1c1c,#121212);border:1px solid var(--line);border-radius:14px;padding:36px 32px}
.use-card .tag{font-family:'Oswald';text-transform:uppercase;letter-spacing:2px;font-size:12px;color:var(--red2);font-weight:600}
.use-card h3{font-size:32px;margin:8px 0 12px}
.use-card p{color:var(--gray);font-size:16px;margin-bottom:14px}
.use-card li{font-size:15px}
.use-card ul{list-style:none}
.use-card li{padding:7px 0;border-bottom:1px solid var(--line);font-size:14px;color:#ddd;display:flex;gap:10px;align-items:center}
.use-card li::before{content:'';width:7px;height:7px;background:var(--red);border-radius:2px;flex:none}

/* COMO FUNCIONA */
.como{background:var(--black2)}
.como-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:46px}
.step{display:flex;gap:16px;align-items:flex-start;padding:20px;border-left:2px solid var(--red)}
.step .n{font-family:'Bebas Neue';font-size:38px;color:var(--red2);line-height:1}
.step h3{font-size:22px;margin-bottom:4px;font-family:'Oswald';font-weight:600;letter-spacing:0}
.step p{color:var(--gray);font-size:14px}

/* CASOS */
.casos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.caso{background:linear-gradient(160deg,#1c1c1c,#121212);border:1px solid var(--line);border-radius:14px;padding:30px 26px}
.caso .marca{font-family:'Bebas Neue';font-size:34px;letter-spacing:1px}
.caso .ctx{color:var(--gray);font-size:14px;margin:2px 0 18px}
.caso .metric{display:flex;align-items:baseline;gap:10px;margin-top:10px}
.caso .metric b{font-family:'Bebas Neue';font-size:30px;color:var(--red2);min-width:max-content}
.caso .metric span{color:#ddd;font-size:14px}

/* REELS */
.reels{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px}
.reel{position:relative;aspect-ratio:9/16;border-radius:14px;overflow:hidden;cursor:pointer;background:#000;border:1px solid var(--line)}
.reel img,.reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:3;transition:.2s}
.reel .play svg{width:58px;height:58px;fill:#fff;filter:drop-shadow(0 4px 14px rgba(0,0,0,.7));opacity:.96}
.reel:hover .play svg{transform:scale(1.12)}
.reel .label{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px 14px;background:linear-gradient(transparent,rgba(0,0,0,.88));font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:1px;font-size:14px}

/* NOSOTROS */
.nos-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:54px;align-items:center}
.nos-txt h2{font-size:clamp(40px,5.5vw,62px);margin:12px 0 18px}
.nos-txt p{color:var(--gray);font-size:17px;margin-bottom:16px}
.nos-txt .quote{color:#fff;font-family:'Oswald',sans-serif;font-weight:500;font-size:19px;border-left:3px solid var(--red);padding-left:16px;margin:24px 0}
.nos-stats{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}
.nos-stats div{background:#111;border:1px solid var(--line);border-radius:12px;padding:20px 22px;flex:1;min-width:130px}
.nos-stats b{font-family:'Bebas Neue';font-size:40px;color:var(--red2);line-height:1;display:block}
.nos-stats span{color:var(--gray);font-size:13px;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:1px}
.deck-card{background:linear-gradient(160deg,#1c1c1c,#111);border:1px solid var(--line);border-radius:16px;padding:34px;text-align:center}
.deck-card svg{width:52px;height:52px;fill:var(--red2);margin-bottom:14px}
.deck-card h3{font-size:30px;margin-bottom:6px}
.deck-card p{color:var(--gray);font-size:15px;margin-bottom:22px}
.respaldo{margin-top:64px}
.respaldo h3{font-size:30px;text-align:center;margin-bottom:8px}
.respaldo .sub{text-align:center;color:var(--gray);font-size:14px;margin-bottom:24px;font-family:'Oswald';text-transform:uppercase;letter-spacing:2px}

/* BADGES DE CONFIANZA */
.badges{display:flex;justify-content:center;gap:44px;flex-wrap:wrap;text-align:center}
.badge{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:210px}
.badge svg{width:34px;height:34px;fill:var(--red2)}
.badge b{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:1px;font-size:15px}
.badge span{color:var(--gray);font-size:13px}

/* VIDEO SHOWCASE (clic para reproducir) */
.showcase{position:relative;max-width:960px;margin:42px auto 0;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:0 24px 70px rgba(0,0,0,.55);cursor:pointer;background:#000}
.showcase img,.showcase video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.showcase .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:3;transition:.2s}
.showcase .play svg{width:74px;height:74px;fill:#fff;filter:drop-shadow(0 4px 16px rgba(0,0,0,.7))}
.showcase:hover .play svg{transform:scale(1.1)}

/* CARRUSEL DE CLUBES (video clic) */
.clubreels{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:42px}
.clubreel{position:relative;aspect-ratio:9/16;border-radius:14px;overflow:hidden;cursor:pointer;border:1px solid var(--line);background:#000;transition:.2s}
.clubreel:hover{border-color:rgba(212,0,0,.5);transform:translateY(-4px)}
.clubreel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.clubreel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:5}
.clubreel .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:3;transition:.2s}
.clubreel .play svg{width:56px;height:56px;fill:#fff;filter:drop-shadow(0 4px 14px rgba(0,0,0,.75))}
.clubreel:hover .play svg{transform:scale(1.12)}
.clubreel .label{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:18px 16px;background:linear-gradient(transparent,rgba(0,0,0,.92));font-family:'Bebas Neue',sans-serif;font-size:27px;letter-spacing:1px}

/* CITAS JUGADORES */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.qcard{background:var(--black2);border:1px solid var(--line);border-radius:14px;padding:28px}
.qcard p{font-size:17px;color:#fff;font-style:italic;margin-bottom:16px;line-height:1.5}
.qcard .who{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:1px;font-size:13px;color:var(--red2)}
.qcard .who span{display:block;color:var(--gray);letter-spacing:.5px}

/* BANDA ESTADISTICA */
.stat-band{background:linear-gradient(160deg,#1c1c1c,#0d0d0d);text-align:center}
.stat-band .big{font-family:'Bebas Neue',sans-serif;font-size:clamp(38px,6vw,68px);color:#fff;line-height:1.02;max-width:900px;margin:0 auto}
.stat-band .big b{color:var(--red2)}
.stat-band small{display:block;color:#777;margin-top:16px;font-size:12px}

/* GALERIA */
.galeria{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.galeria div{aspect-ratio:1;background-size:cover;background-position:center;border-radius:10px}

/* CTA FINAL */
.cta{background:linear-gradient(120deg,var(--red) 0%,#8a0000 100%);text-align:center}
.cta h2{font-size:clamp(42px,6vw,72px);margin-bottom:14px}
.cta p{font-size:19px;max-width:560px;margin:0 auto 32px;color:rgba(255,255,255,.92)}

/* FOOTER */
footer{background:#080808;padding:54px 0 34px;border-top:1px solid var(--line)}
.foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px}
.foot .logo img{height:60px}
.foot .meta{color:var(--gray);font-size:14px;text-align:right}
.foot .meta a{color:var(--red2)}
.foot-bottom{text-align:center;color:#555;font-size:13px;margin-top:34px;border-top:1px solid var(--line);padding-top:24px}

/* FORMULARIO DE CONTACTO */
.contact-form{max-width:580px;margin:0 auto;text-align:left;display:grid;gap:14px}
.contact-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:10px;padding:14px 15px;color:#fff;font-family:'DM Sans',sans-serif;font-size:15px;transition:.15s}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:none;border-color:var(--red);background:rgba(255,255,255,.08)}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:#888}
.contact-form textarea{min-height:130px;resize:vertical}
.contact-form select{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23999'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:40px}
.contact-form select option{color:#111}
.contact-form button{margin-top:4px;justify-content:center}
@media(max-width:600px){.contact-form .row2{grid-template-columns:1fr}}

/* WHATSAPP FLOAT + MENU */
.wa-wrap{position:fixed;bottom:24px;right:24px;z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.wa-float{width:60px;height:60px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.4);transition:.2s;border:none;cursor:pointer;align-self:flex-end}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:32px;height:32px;fill:#fff}
.wa-menu{display:none;flex-direction:column;gap:8px;background:#fff;border-radius:14px;padding:12px;box-shadow:0 14px 38px rgba(0,0,0,.4);width:248px}
.wa-menu.open{display:flex}
.wa-menu .tt{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:1px;font-size:12px;color:#888;padding:2px 6px 4px}
.wa-menu a{font-family:'DM Sans',sans-serif;font-weight:500;font-size:14px;color:#111;padding:11px 12px;border-radius:9px;background:#f2f2f2;transition:.15s;display:flex;align-items:center;gap:9px}
.wa-menu a:hover{background:#25D366;color:#fff}
.wa-menu a svg{width:17px;height:17px;fill:currentColor;flex:none}

@media(max-width:900px){
  .val-grid{grid-template-columns:repeat(2,1fr)}
  .prod-grid,.prod-grid.two,.casos-grid,.como-grid,.use-grid,.nos-grid,.quotes{grid-template-columns:1fr}
  .reels,.clubreels{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:14px;padding:4px 2px 14px;scrollbar-width:none}
  .reels::-webkit-scrollbar,.clubreels::-webkit-scrollbar{display:none}
  .reels .reel,.clubreels .clubreel{flex:0 0 74%;scroll-snap-align:center}
  .badges{gap:28px}
  .galeria{grid-template-columns:repeat(2,1fr)}
  .nav-links{position:fixed;top:74px;left:0;right:0;background:rgba(13,13,13,.98);flex-direction:column;padding:24px;gap:18px;transform:translateY(-130%);transition:.3s;border-bottom:1px solid var(--line)}
  .nav-links.open{transform:translateY(0)}
  .burger{display:flex}
  .section{padding:68px 0}
  .foot,.foot .meta{justify-content:center;text-align:center}
}
