:root{
    --navy:#0D1230;
    --navy-2:#161C40;
    --red:#C22A31;
    --red-2:#9E2229;
    --bone:#F5F3EF;
    --ink:#3A3E4C;
    --line:rgba(255,255,255,.13);
    --pitch:#1E4D33;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Inter',sans-serif;
    background:var(--bone);
    color:var(--ink);
    margin:0;
    overflow-x:hidden;
  }
  h1,h2,.display-font{ font-family:'Anton',sans-serif; text-transform:uppercase; letter-spacing:.01em; }
  h3{ font-family:'Oswald',sans-serif; }
  .eyebrow{
    font-family:'Oswald',sans-serif;
    font-size:.72rem;
    letter-spacing:.22em;
    text-transform:uppercase;
    font-weight:500;
  }

  /* ===== NAV ===== */
  .navbar-gsmt{
    position:fixed; top:0; left:0; right:0; z-index:60;
    padding:16px 0;
    background:rgba(13,18,48,0);
    transition:background .3s ease, padding .3s ease, box-shadow .3s ease;
  }
  .navbar-gsmt.scrolled{
    background:rgba(13,18,48,.94);
    backdrop-filter:blur(8px);
    padding:10px 0;
    box-shadow:0 6px 24px rgba(0,0,0,.3);
  }
  .brand-mark{ font-family:'Anton',sans-serif; letter-spacing:.02em; font-size:1.3rem; color:#fff; }
  .brand-mark span{ color:var(--red); }
  .by-badge{
    display:flex; align-items:center; gap:8px;
    border-left:1px solid var(--line);
    padding-left:12px; margin-left:12px;
  }
  .by-badge img.by-logo{ height:26px; width:auto; filter:brightness(0) invert(1); opacity:.9; }
  .navbar-gsmt .nav-link{
    color:rgba(255,255,255,.78);
    font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; font-weight:500;
    margin:0 12px;
  }
  .navbar-gsmt .nav-link:hover{ color:#fff; }
  .btn-red{
    background:var(--red); color:#fff; font-weight:600; border:none;
    padding:10px 22px; font-size:.8rem; letter-spacing:.04em; text-transform:uppercase;
    border-radius:2px; transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  }
  .btn-red:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(194,42,49,.4); background:var(--red-2); color:#fff; }
  .btn-outline-light-custom{
    border:1px solid rgba(255,255,255,.4); color:#fff; padding:10px 22px;
    font-size:.8rem; letter-spacing:.04em; text-transform:uppercase; font-weight:600;
    border-radius:2px; background:transparent; transition:.2s ease;
  }
  .btn-outline-light-custom:hover{ background:rgba(255,255,255,.08); color:#fff; border-color:#fff; }

  /* ===== HERO ===== */
  .hero{
    position:relative;
    min-height:100vh;
    display:flex; align-items:center;
    background:
      linear-gradient(100deg, rgba(9,13,34,.95) 0%, rgba(9,13,34,.82) 40%, rgba(30,10,20,.72) 100%),
      url('../img/hero.webp') center 38%/cover;
    color:#fff;
    padding:120px 0 60px;
    overflow:hidden;
  }
  .pitch-lines{ display:none; }
  .partner-tag{
    display:inline-flex; align-items:center; gap:8px;
    border:1px solid var(--line);
    padding:7px 16px; border-radius:2px;
    font-family:'Oswald',sans-serif; font-size:.7rem;
    letter-spacing:.16em; text-transform:uppercase; color:var(--red);
    background:rgba(194,42,49,.08);
  }
  .hero h1{
    font-size:clamp(2.5rem, 5.6vw, 4.9rem);
    line-height:.96; margin:22px 0 20px;
  }
  .hero h1 .accent{ color:var(--red); }
  .hero p.lead-copy{
    font-size:1.06rem; color:rgba(255,255,255,.68); max-width:520px; line-height:1.65;
  }
  .kickoff-stats{ display:flex; gap:34px; margin-top:38px; flex-wrap:wrap; }
  .kickoff-stats .k-num{ font-family:'Anton',sans-serif; font-size:1.8rem; color:#fff; }
  .kickoff-stats .k-num span{ color:var(--red); }
  .kickoff-stats .k-label{ font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.5); }

  /* Phone mockup */
  .phone-wrap{ position:relative; display:flex; justify-content:center; }
  .phone{
    width:260px; height:530px;
    background:#0A0E24;
    border-radius:34px;
    padding:12px;
    box-shadow:0 40px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);
    transform:rotate(4deg);
    position:relative;
  }
  .phone::before{
    content:''; position:absolute; top:26px; left:50%; transform:translateX(-50%);
    width:60px; height:6px; background:#1c2350; border-radius:4px;
  }
  .phone-screen{
    background:linear-gradient(165deg, #131A3E, #0B0F26);
    width:100%; height:100%; border-radius:24px; padding:34px 14px 14px;
    overflow:hidden; position:relative;
  }
  .phone-screen .ps-eyebrow{ font-size:.55rem; letter-spacing:.16em; color:var(--red); font-family:'Oswald',sans-serif; text-transform:uppercase;}
  .phone-screen .ps-title{ font-family:'Anton',sans-serif; color:#fff; font-size:1.05rem; margin:4px 0 14px; }
  .ps-card{
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    border-radius:8px; padding:10px 12px; margin-bottom:9px;
  }
  .ps-card .ps-tag{ display:inline-block; font-size:.5rem; background:var(--red); color:#fff; padding:2px 7px; border-radius:2px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:5px;}
  .ps-card .ps-name{ color:#fff; font-size:.72rem; font-weight:600; font-family:'Oswald',sans-serif; }
  .ps-card .ps-sub{ color:rgba(255,255,255,.45); font-size:.62rem; margin-top:2px; }
  .ps-navbar{
    position:absolute; bottom:12px; left:14px; right:14px;
    display:flex; justify-content:space-around;
    background:rgba(255,255,255,.05); border-radius:10px; padding:8px 0;
  }
  .ps-navbar span{ width:16px; height:16px; border-radius:4px; background:rgba(255,255,255,.18); }
  .ps-navbar span:first-child{ background:var(--red); }
  .float-badge{
    position:absolute; background:#fff; border-radius:8px; padding:10px 14px;
    box-shadow:0 14px 30px rgba(0,0,0,.25);
    font-family:'Oswald',sans-serif;
  }
  .float-badge.b1{ top:8%; left:-6%; }
  .float-badge.b1 .fb-num{ color:var(--red); font-family:'Anton',sans-serif; font-size:1.2rem; }
  .float-badge.b1 .fb-label{ font-size:.6rem; color:#888; text-transform:uppercase; letter-spacing:.05em;}
  .float-badge.b2{ bottom:10%; right:-8%; display:flex; align-items:center; gap:8px; }
  .float-badge.b2 .dot{ width:9px; height:9px; border-radius:50%; background:#2fbf5c; }
  .float-badge.b2 span.txt{ font-size:.68rem; font-weight:600; color:var(--navy);}

  /* ===== SCOREBOARD ===== */
  .scoreboard{ background:var(--navy-2); border-top:1px solid var(--line); border-bottom:3px solid var(--red); }
  .score-item{ text-align:center; padding:32px 10px; border-right:1px solid var(--line); }
  .score-item:last-child{ border-right:none; }
  .score-num{ font-family:'Anton',sans-serif; font-size:clamp(1.7rem,3vw,2.5rem); color:#fff; }
  .score-num .r{ color:var(--red); }
  .score-label{ font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-top:4px; }

  /* ===== DISCIPLINAS ===== */
  .disciplinas{ padding:100px 0 60px; }
  .section-head{ max-width:640px; margin:0 auto 56px; text-align:center; }
  .section-head .eyebrow{ color:var(--red-2); }
  .section-head h2{ font-size:clamp(1.9rem,3.4vw,2.6rem); color:var(--navy); margin:10px 0 14px; }
  .section-head p{ color:#6b7080; font-size:1.02rem; }

  .disc-card{
    border-radius:6px; overflow:hidden; position:relative; height:340px;
    display:flex; flex-direction:column; justify-content:flex-end; padding:26px;
    color:#fff; isolation:isolate;
  }
  .disc-card::before{ content:''; position:absolute; inset:0; z-index:-1; }
  .disc-futbol::before{ background:linear-gradient(155deg, #163A24 0%, var(--navy) 75%); }
  .disc-basket::before{ background:linear-gradient(155deg, #7A3A12 0%, #121735 76%); }
  .disc-flag::before{ background:linear-gradient(155deg, #2A1420 0%, var(--navy) 75%); }
  .disc-padel::before{ background:linear-gradient(155deg, #1B1F3C 0%, var(--navy) 75%); }
  .disc-performance::before{ background:linear-gradient(155deg, #1B1F3C 0%, var(--navy) 75%); }
  .disc-icon{ position:absolute; top:22px; right:22px; opacity:.9; }

  .disc-card .fa-solid{
    position:absolute; top:22px; right:22px;
    font-size:2.6rem; color:#fff; opacity:.92;
  }
  .disc-status{
    align-self:flex-start; font-family:'Oswald',sans-serif; font-size:.62rem; letter-spacing:.12em;
    text-transform:uppercase; padding:5px 12px; border-radius:2px; margin-bottom:14px; font-weight:600;
  }
  .status-live{ background:var(--red); color:#fff; }
  .status-soon{ background:rgba(255,255,255,.14); color:#fff; }
  .disc-card h3{ font-family:'Anton',sans-serif; text-transform:uppercase; font-size:1.6rem; margin-bottom:8px; }
  .disc-card p{ color:rgba(255,255,255,.62); font-size:.9rem; margin:0; max-width:280px; }

  /* ===== SERVICES ===== */
  .services-section{ padding:40px 0 100px; }
  .cat-group{ margin-bottom:52px; }
  .cat-title{
    display:flex; align-items:center; gap:16px; font-family:'Oswald',sans-serif;
    font-size:.95rem; letter-spacing:.09em; text-transform:uppercase; color:var(--navy);
    font-weight:600; margin-bottom:24px;
  }
  .cat-title::after{ content:''; flex:1; height:1px; background:linear-gradient(90deg, rgba(194,42,49,.35), transparent); }
  .minute-tag{
    font-family:'Anton',sans-serif; color:#fff; background:var(--navy);
    font-size:.78rem; padding:4px 11px; border-radius:2px;
  }
  .minute-tag .apo{ color:var(--red); }

  .service-card{
    background:#fff; border:1px solid #eae8e2; border-radius:4px; padding:24px;
    height:100%; position:relative; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    opacity:0; transform:translateY(16px);
  }
  .service-card.revealed{ opacity:1; transform:translateY(0); }
  .service-card:hover{ transform:translateY(-5px); box-shadow:0 16px 30px rgba(13,18,48,.1); border-color:var(--red); }

  .service-icon{
    width:42px; height:42px; border-radius:10px;
    display:inline-flex; align-items:center; justify-content:center;
    background:rgba(194,42,49,.08); color:var(--red);
    margin-bottom:16px; font-size:1.12rem;
  }
  .service-card:hover .service-icon{
    background:var(--red); color:#fff;
  }
  .service-min{
    font-family:'Anton',sans-serif; font-size:.85rem; color:var(--red);
    position:absolute; top:20px; right:20px;
  }
  .service-card h4{
    font-family:'Oswald',sans-serif; font-size:1.05rem; font-weight:600; color:var(--navy);
    margin:2px 30px 8px 0;
  }
  .service-card p{ font-size:.9rem; color:#6b7080; margin:0; }

  /* ===== EVENTS ===== */
  .events-section{
    background:linear-gradient(135deg, var(--navy) 0%, #14183A 55%, #250E14 130%);
    padding:100px 0; color:#fff;
  }
  .events-section .section-head p{ color:rgba(255,255,255,.62); }
  .events-section .section-head .eyebrow{ color:var(--red); }
  .events-section .section-head h2{ color:#fff; }
  .event-card{ background:rgba(255,255,255,.06); border:1px solid var(--line); border-radius:4px; padding:26px; height:100%; transition:.25s ease; }
  .event-card:hover{ background:rgba(255,255,255,.1); border-color:var(--red); transform:translateY(-4px); }
  .event-tag{
    display:inline-block; font-family:'Oswald',sans-serif; font-size:.64rem; letter-spacing:.13em;
    text-transform:uppercase; padding:5px 12px; border-radius:2px; margin-bottom:14px; font-weight:600;
  }
  .tag-torneo{ background:var(--red); color:#fff; }
  .tag-programa{ background:rgba(255,255,255,.14); color:#fff; }
  .tag-campamento{ background:#2fbf5c; color:#0D1230; }
  .event-card h3{ font-family:'Oswald',sans-serif; font-size:1.15rem; font-weight:600; margin-bottom:8px; color:#fff;}
  .event-card p{ color:rgba(255,255,255,.6); font-size:.9rem; margin:0; }
  .levante-strip{
    margin-top:50px; padding-top:34px; border-top:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
    color:rgba(255,255,255,.55); font-size:.82rem; text-align:center;
  }
  .levante-strip strong{ color:#fff; }

  /* ===== APP DOWNLOAD ===== */
  .app-section{ padding:100px 0; background:var(--bone); }
  .app-section h2{ color:var(--navy); font-size:clamp(1.9rem,3.2vw,2.5rem); }
  .app-section p.lead-copy2{ color:#6b7080; max-width:480px; }
  .store-pill{ display:flex; align-items:center; gap:12px; border:1px solid #ddd9d0; border-radius:3px; padding:12px 20px; background:#fff; }
  .store-pill.disabled{ opacity:.55; }
  .store-pill.active{ background:linear-gradient(120deg, var(--navy), var(--red-2)); border:none; color:#fff; }
  .store-pill .pill-top{ font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; opacity:.7; }
  .store-pill .pill-bottom{ font-family:'Oswald',sans-serif; font-weight:600; font-size:.95rem; }

  /* ===== FOOTER ===== */
  footer{ background:var(--navy); color:rgba(255,255,255,.5); padding:50px 0 26px; text-align:center; }
  footer img.footer-logo{ height:34px; filter:brightness(0) invert(1); margin-bottom:14px; opacity:.9; }
  footer .fine{ font-size:.78rem; }
  footer hr{ border-color:var(--line); margin:26px 0 20px; }



  /* ===== AJUSTES DEPORTIVOS SOLICITADOS ===== */
  a,
  a:hover,
  a:focus,
  .btn-red,
  .btn-red:hover,
  .btn-red:focus,
  .btn-outline-light-custom,
  .btn-outline-light-custom:hover,
  .btn-outline-light-custom:focus,
  .store-pill,
  .navbar-gsmt .nav-link{
    text-decoration:none !important;
  }

  .hero .container,
  .app-section .container{
    position:relative;
    z-index:2;
  }

  .sports-float{
    position:absolute;
    z-index:1;
    width:72px;
    height:72px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.06);
    box-shadow:0 18px 45px rgba(0,0,0,.32), inset 0 0 18px rgba(255,255,255,.08);
    backdrop-filter:blur(4px);
    pointer-events:none;
    animation:sportsFloat 6s ease-in-out infinite;
  }
  .hero-scrim{
    position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(ellipse 900px 600px at 20% 55%, rgba(9,13,34,.55), transparent 70%);
  }

  .disc-card{
    box-shadow:0 18px 40px rgba(13,18,48,.12);
  }
  .disc-card::after{
    content:'';
    position:absolute;
    inset:0;
    background:
      linear-gradient(120deg, transparent 0 58%, rgba(255,255,255,.08) 58% 59%, transparent 59% 100%),
      radial-gradient(circle at 84% 18%, rgba(255,255,255,.12), transparent 26%);
    pointer-events:none;
  }

  .app-section{
    position:relative;
    overflow:hidden;
    color:#fff;
    background:
      radial-gradient(circle at 78% 42%, rgba(194,42,49,.32), transparent 34%),
      linear-gradient(rgba(7,12,33,.92), rgba(7,12,33,.96)),
      repeating-linear-gradient(90deg, rgba(31,88,50,.5) 0 90px, rgba(18,66,39,.5) 90px 180px),
      #081126;
    border-top:1px solid rgba(255,255,255,.08);
  }
  .app-section::before{
    content:'';
    position:absolute;
    inset:0;
    background:
      radial-gradient(circle at 72% 54%, transparent 0 150px, rgba(255,255,255,.14) 151px 153px, transparent 154px),
      linear-gradient(90deg, transparent calc(50% - 1px), rgba(255,255,255,.13) calc(50% - 1px), rgba(255,255,255,.13) calc(50% + 1px), transparent calc(50% + 1px));
    opacity:.45;
    pointer-events:none;
  }
  .app-section h2{color:#fff;}
  .app-section p.lead-copy2,
  .app-section p{color:rgba(255,255,255,.72) !important;}
  .app-section .store-pill{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16); color:#fff;}
  .app-section .store-pill.disabled{opacity:.62;}
  .app-section .store-pill.active{background:linear-gradient(120deg, #1f5a36, var(--red)); box-shadow:0 16px 35px rgba(194,42,49,.26);}
  .store-icon{font-size:1.55rem; line-height:1;}
  .store-icon.android{color:#A4C639;}
  .store-icon.apple{color:#fff; opacity:.9;}

  .app-sports-float{
    position:absolute;
    z-index:1;
    opacity:.16;
    color:#fff;
    pointer-events:none;
    animation:sportsFloat 7s ease-in-out infinite;
  }
  .app-sports-float.soccer{right:7%; bottom:9%; font-size:6.8rem; color:#fff; opacity:.22;}
  .app-sports-float.basket{right:36%; top:18%; font-size:4.5rem; color:#ff8b42; opacity:.18; animation-delay:1s;}
  .app-sports-float.padel{right:14%; top:20%; font-size:5.5rem; color:#fff; opacity:.12; animation-delay:1.8s;}
  .app-sports-float.football{left:5%; bottom:8%; font-size:5rem; color:#d17b4a; opacity:.14; animation-delay:2.4s;}

  @media (max-width:767px){
    .score-item{ border-right:none; border-bottom:1px solid var(--line); }
    .score-item:last-child{ border-bottom:none; }
    .phone{ transform:rotate(0); width:220px; height:450px; }
    .float-badge.b1, .float-badge.b2{ display:none; }
  }


  /* ===== LOADING DEPORTIVO GSMTSPORTS ===== */
  body.is-loading{
    overflow:hidden;
  }

  .gsmt-loader{
    position:fixed;
    inset:0;
    z-index:99999;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    background:
      radial-gradient(circle at 78% 22%, rgba(194,42,49,.30), transparent 30%),
      linear-gradient(rgba(7,12,33,.92), rgba(7,12,33,.96)),
      repeating-linear-gradient(90deg, rgba(31,88,50,.72) 0 92px, rgba(18,66,39,.72) 92px 184px),
      #071026;
    transition:opacity .58s ease, visibility .58s ease, transform .58s ease;
  }
  .gsmt-loader.is-hidden{
    opacity:0;
    visibility:hidden;
    transform:scale(1.02);
    pointer-events:none;
  }
  .gsmt-loader::before{
    content:'';
    position:absolute;
    inset:0;
    background:
      linear-gradient(90deg, transparent calc(50% - 1px), rgba(255,255,255,.20) calc(50% - 1px), rgba(255,255,255,.20) calc(50% + 1px), transparent calc(50% + 1px)),
      radial-gradient(circle at 50% 50%, transparent 0 118px, rgba(255,255,255,.20) 119px 121px, transparent 122px),
      linear-gradient(0deg, transparent calc(50% - 1px), rgba(255,255,255,.12) calc(50% - 1px), rgba(255,255,255,.12) calc(50% + 1px), transparent calc(50% + 1px));
    opacity:.42;
    pointer-events:none;
  }
  .gsmt-loader::after{
    content:'';
    position:absolute;
    inset:-35%;
    background:conic-gradient(from 0deg, transparent, rgba(255,255,255,.08), transparent, rgba(194,42,49,.18), transparent);
    animation:loaderSweep 5.8s linear infinite;
    pointer-events:none;
  }
  .loader-card{
    position:relative;
    z-index:2;
    width:min(92vw, 520px);
    padding:34px 34px 30px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(13,18,48,.72);
    border-radius:18px;
    box-shadow:0 28px 90px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter:blur(12px);
    overflow:hidden;
  }
  .loader-card::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.08) 45%, transparent 70%);
    transform:translateX(-100%);
    animation:loaderShine 2.8s ease-in-out infinite;
    pointer-events:none;
  }
  .loader-brand{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:26px;
  }
  .loader-brand .brand-mark{
    font-size:1.5rem;
  }
  .loader-status{
    font-family:'Oswald',sans-serif;
    font-size:.7rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:rgba(255,255,255,.64);
  }
  .loader-pitch{
    position:relative;
    height:150px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:14px;
    overflow:hidden;
    background:
      radial-gradient(circle at 50% 50%, transparent 0 42px, rgba(255,255,255,.17) 43px 45px, transparent 46px),
      linear-gradient(90deg, transparent calc(50% - 1px), rgba(255,255,255,.20) calc(50% - 1px), rgba(255,255,255,.20) calc(50% + 1px), transparent calc(50% + 1px)),
      repeating-linear-gradient(90deg, rgba(35,118,68,.75) 0 60px, rgba(23,94,55,.75) 60px 120px);
    box-shadow:inset 0 0 28px rgba(0,0,0,.28);
  }
  .loader-pitch .goal{
    position:absolute;
    top:50%;
    width:34px;
    height:72px;
    transform:translateY(-50%);
    border:1px solid rgba(255,255,255,.18);
  }
  .loader-pitch .goal.left{left:-1px; border-left:none; border-radius:0 12px 12px 0;}
  .loader-pitch .goal.right{right:-1px; border-right:none; border-radius:12px 0 0 12px;}
  .loader-ball{
    position:absolute;
    left:18px;
    top:50%;
    width:32px;
    height:32px;
    transform:translateY(-50%);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    color:#101630;
    box-shadow:0 12px 24px rgba(0,0,0,.35);
    animation:ballRun 2.8s ease-in-out infinite;
  }
  .loader-ball i{
    font-size:1.15rem;
    animation:ballSpin 1.15s linear infinite;
  }
  .loader-copy{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:18px;
    margin:22px 0 12px;
  }
  .loader-copy h2{
    margin:0;
    font-size:clamp(1.8rem, 5vw, 2.75rem);
    line-height:.92;
    color:#fff;
  }
  .loader-copy h2 span{color:var(--red);}
  .loader-percent{
    font-family:'Anton',sans-serif;
    font-size:2.35rem;
    line-height:1;
    color:#fff;
    min-width:86px;
    text-align:right;
  }
  .loader-progress{
    width:100%;
    height:10px;
    border-radius:99px;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.10);
    overflow:hidden;
  }
  .loader-progress-bar{
    width:0%;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg, var(--red), #fff, #2fbf5c);
    box-shadow:0 0 18px rgba(194,42,49,.5);
    transition:width .18s ease;
  }
  .loader-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:16px;
  }
  .loader-tags span{
    font-family:'Oswald',sans-serif;
    font-size:.66rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:rgba(255,255,255,.72);
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.06);
    border-radius:99px;
    padding:7px 10px;
  }
  .loader-floating-icon{
    position:absolute;
    z-index:1;
    color:#fff;
    opacity:.16;
    pointer-events:none;
    animation:sportsFloat 6.2s ease-in-out infinite;
  }
  .loader-floating-icon.basket{right:9%; top:16%; font-size:5rem; color:#ff8b42;}
  .loader-floating-icon.football{left:8%; bottom:12%; font-size:4.4rem; color:#d17b4a; animation-delay:1.2s;}
  .loader-floating-icon.trophy{right:13%; bottom:10%; font-size:4.8rem; color:#ffd15a; animation-delay:2s;}

  .page-progress{
    position:fixed;
    top:0;
    left:0;
    z-index:100000;
    height:3px;
    width:0%;
    background:linear-gradient(90deg, var(--red), #fff, #2fbf5c);
    box-shadow:0 0 16px rgba(194,42,49,.6);
    transition:width .2s ease, opacity .4s ease;
  }

  @keyframes ballRun{
    0%,100%{left:18px; transform:translateY(-50%) scale(1);}
    45%{left:calc(100% - 52px); transform:translateY(-50%) scale(1.08);}
    60%{left:calc(100% - 88px); transform:translateY(-50%) scale(.96);}
  }
  @keyframes ballSpin{
    to{transform:rotate(360deg);}
  }
  @keyframes loaderSweep{
    to{transform:rotate(360deg);}
  }
  @keyframes loaderShine{
    0%{transform:translateX(-120%);}
    45%,100%{transform:translateX(120%);}
  }
  @keyframes sportsFloat{
    0%,100%{transform:translate3d(0,0,0) rotate(0deg);}
    50%{transform:translate3d(0,-18px,0) rotate(9deg);}
  }

  @media (max-width:575px){
    .loader-card{padding:26px 20px 24px;}
    .loader-copy{align-items:flex-start; flex-direction:column;}
    .loader-percent{text-align:left;}
    .loader-pitch{height:128px;}
  }


  /* ===== SCROLL + SEO UX ===== */
  html{
    scrollbar-width:thin;
    scrollbar-color:var(--red) #071028;
    scrollbar-gutter:stable;
  }
  *::-webkit-scrollbar{
    width:12px;
    height:12px;
  }
  *::-webkit-scrollbar-track{
    background:
      linear-gradient(180deg, #071028 0%, #0d1230 50%, #071028 100%);
    border-left:1px solid rgba(255,255,255,.08);
  }
  *::-webkit-scrollbar-thumb{
    background:
      linear-gradient(180deg, var(--red) 0%, #8b1821 45%, var(--pitch) 100%);
    border:3px solid #071028;
    border-radius:999px;
  }
  *::-webkit-scrollbar-thumb:hover{
    background:
      linear-gradient(180deg, #e13b43 0%, var(--red) 48%, #2c7a4c 100%);
  }

  .field-scroll-indicator{
    position:fixed;
    right:12px;
    top:92px;
    bottom:34px;
    width:5px;
    z-index:55;
    border-radius:999px;
    background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(194,42,49,.52), rgba(255,255,255,.14));
    box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 12px 28px rgba(0,0,0,.2);
    pointer-events:none;
  }
  .field-scroll-indicator::before{
    content:'';
    position:absolute;
    left:50%;
    top:50%;
    width:36px;
    height:36px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:50%;
    transform:translate(-50%, -50%);
    opacity:.72;
  }
  .field-scroll-ball{
    position:absolute;
    left:50%;
    top:0;
    width:25px;
    height:25px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:#fff;
    background:linear-gradient(135deg, var(--red), #071028);
    box-shadow:0 8px 20px rgba(0,0,0,.35), 0 0 0 3px rgba(255,255,255,.1);
    transform:translate(-50%, 0) rotate(0deg);
    will-change:transform;
  }
  .field-scroll-ball i{font-size:.9rem;}
  @media (max-width:991px){
    .field-scroll-indicator{display:none;}
  }

  body{
    overscroll-behavior-y:contain;
  }
  ::selection{
    background:rgba(194,42,49,.92);
    color:#fff;
  }
  .seo-footprint{
    position:relative;
    overflow:hidden;
    padding:82px 0;
    background:
      radial-gradient(circle at 82% 20%, rgba(194,42,49,.16), transparent 34%),
      linear-gradient(135deg, #f5f3ef 0%, #ffffff 54%, #efece6 100%);
    border-top:1px solid rgba(13,18,48,.08);
  }
  .seo-footprint::before{
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.34;
    background:
      linear-gradient(90deg, transparent calc(50% - 1px), rgba(13,18,48,.16) calc(50% - 1px), rgba(13,18,48,.16) calc(50% + 1px), transparent calc(50% + 1px)),
      radial-gradient(circle at 50% 50%, transparent 0 118px, rgba(13,18,48,.12) 119px 121px, transparent 122px);
  }
  .seo-footprint .container{position:relative; z-index:2;}
  .seo-footprint h2{
    color:var(--navy);
    font-size:clamp(1.75rem, 3vw, 2.45rem);
    margin-bottom:14px;
  }
  .seo-footprint p{
    color:#666c7d;
    line-height:1.7;
    max-width:820px;
  }
  .seo-chip-wrap{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:24px;
  }
  .seo-chip{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:9px 13px;
    border-radius:999px;
    border:1px solid rgba(13,18,48,.12);
    background:#fff;
    color:var(--navy);
    font-family:'Oswald',sans-serif;
    font-size:.78rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.04em;
    box-shadow:0 8px 20px rgba(13,18,48,.05);
  }
  .seo-chip i{color:var(--red);}
  .seo-local-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:14px;
    margin-top:30px;
  }
  .seo-local-card{
    background:#fff;
    border:1px solid rgba(13,18,48,.09);
    border-radius:8px;
    padding:18px;
    box-shadow:0 12px 26px rgba(13,18,48,.06);
  }
  .seo-local-card strong{
    display:block;
    color:var(--navy);
    font-family:'Oswald',sans-serif;
    font-size:1rem;
    margin-bottom:5px;
  }
  .seo-local-card span{
    display:block;
    color:#737888;
    font-size:.86rem;
    line-height:1.45;
  }
  @media (max-width:991px){
    .seo-local-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
  }
  @media (max-width:575px){
    *::-webkit-scrollbar{width:8px;height:8px;}
    .seo-footprint{padding:58px 0;}
    .seo-local-grid{grid-template-columns:1fr;}
  }


/* ===== FIX DEFINITIVO HERO + MOCKUP PRINCIPAL ===== */

/*
  Solución:
  1. El mockup ya no se controla por WIDTH, se controla por HEIGHT.
     Esto evita que un screenshot vertical se haga gigante.
  2. Se eliminaron las clases anteriores del mockup del hero.
  3. Las tarjetas flotantes quedan dentro del área del celular y no bajan al fondo.
*/

.hero{
  min-height:100svh;
  padding:116px 0 72px;
}

.hero .container{
  position:relative;
  z-index:2;
}

.hero .row{
  min-height:calc(100svh - 188px);
  align-items:center !important;
}

.hero .col-lg-7{
  position:relative;
  z-index:5;
}

.hero-visual-col{
  position:relative;
  z-index:4;
  display:flex !important;
  justify-content:center;
  align-items:center;
}

/* Ocultamos cualquier versión anterior del mockup viejo en el HERO */
.hero-mockup-wrap,
.hero-mockup-card,
.hero-mockup-img,
.mockup-float-card,
.mockup-ball{
  display:none !important;
}

/* Nuevo contenedor controlado */
.hero-app-preview{
  position:relative;
  width:100%;
  height:clamp(500px, 72vh, 650px);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
  isolation:isolate;
}

/* Luz detrás del celular */
.hero-app-glow{
  position:absolute;
  z-index:0;
  width:430px;
  height:430px;
  border-radius:50%;
  background:
    radial-gradient(circle, rgba(194,42,49,.36), transparent 63%),
    radial-gradient(circle, rgba(47,191,92,.16), transparent 72%);
  filter:blur(18px);
  opacity:.9;
  animation:heroAppGlow 5s ease-in-out infinite;
}

/* Línea decorativa tipo cancha */
.hero-app-lines{
  position:absolute;
  z-index:0;
  width:420px;
  height:420px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:50%;
  opacity:.55;
}

.hero-app-lines::before{
  content:'';
  position:absolute;
  left:50%;
  top:-40px;
  bottom:-40px;
  width:1px;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.16), transparent);
  transform:translateX(-50%);
}

.hero-app-lines::after{
  content:'';
  position:absolute;
  inset:82px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:50%;
}

/* El mockup se controla por altura, no por ancho */
.hero-app-image{
  position:relative;
  z-index:2;
  display:block;
  height:clamp(460px, 66vh, 610px);
  width:auto;
  max-width:100%;
  object-fit:contain;
  object-position:center;
  filter:drop-shadow(0 38px 54px rgba(0,0,0,.55));
  transform:translateY(8px) rotate(1.2deg);
  animation:heroAppFloat 5.2s ease-in-out infinite;
}

/* Tarjetas flotantes dentro del mismo eje visual */
.hero-app-mini-card{
  position:absolute;
  z-index:3;
  display:flex;
  align-items:center;
  gap:10px;
  min-width:170px;
  padding:11px 13px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(9,13,34,.86);
  box-shadow:0 18px 38px rgba(0,0,0,.34);
  backdrop-filter:blur(10px);
  font-family:'Oswald', sans-serif;
  color:#fff;
}

.hero-app-mini-card i{
  width:32px;
  height:32px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--red);
  color:#fff;
  font-size:.9rem;
  flex:0 0 auto;
}

.hero-app-mini-card strong{
  display:block;
  color:#fff;
  font-size:.9rem;
  line-height:1.05;
}

.hero-app-mini-card span{
  display:block;
  color:rgba(255,255,255,.68);
  font-size:.7rem;
  margin-top:3px;
}

.hero-app-mini-top{
  top:88px;
  left:14px;
  animation:sportsFloat 6s ease-in-out infinite;
}

.hero-app-mini-bottom{
  right:12px;
  bottom:88px;
  animation:sportsFloat 6s ease-in-out infinite;
  animation-delay:1.1s;
}

.hero-app-mini-bottom i{
  background:#2fbf5c;
}

@keyframes heroAppFloat{
  0%,100%{
    transform:translateY(8px) rotate(1.2deg);
  }
  50%{
    transform:translateY(-8px) rotate(.4deg);
  }
}

@keyframes heroAppGlow{
  0%,100%{
    transform:scale(1);
    opacity:.75;
  }
  50%{
    transform:scale(1.06);
    opacity:1;
  }
}

/* Ajuste especial en laptops medianas */
@media (min-width:992px) and (max-width:1199px){
  .hero-app-preview{
    height:clamp(470px, 68vh, 590px);
  }

  .hero-app-image{
    height:clamp(430px, 62vh, 560px);
  }

  .hero-app-mini-top{
    left:-4px;
  }

  .hero-app-mini-bottom{
    right:-6px;
  }
}

/* En tablet y móvil se oculta el mockup para no romper el hero */
@media (max-width:991px){
  .hero{
    min-height:auto;
    padding:118px 0 80px;
  }

  .hero .row{
    min-height:auto;
  }

  .hero-visual-col,
  .hero-app-preview{
    display:none !important;
  }
}

/* En pantallas muy bajas se reduce más */
@media (min-width:992px) and (max-height:760px){
  .hero{
    padding:100px 0 54px;
  }

  .hero .row{
    min-height:calc(100svh - 154px);
  }

  .hero-app-preview{
    height:520px;
  }

  .hero-app-image{
    height:500px;
  }

  .hero-app-mini-top{
    top:56px;
  }

  .hero-app-mini-bottom{
    bottom:54px;
  }
}

.brand-logo {
  height: 34px;
  width: auto;
  display: block;
  object-fit: contain;
}

.navbar-gsmt.scrolled .brand-logo {
  height: 30px;
}

@media (max-width: 575px) {
  .brand-logo {
    height: 28px;
  }
}

/* ===== LOGOS EN BLANCO ===== */
/* Convierte el logo de GSMTSPORTS a blanco para que contraste en fondos oscuros. */
.brand-logo,
.loader-brand-logo,
.footer-brand-logo{
  display:block;
  width:auto;
  object-fit:contain;
  filter:brightness(0) invert(1) contrast(1.12);
  opacity:.96;
}

.brand-logo{
  height:34px;
}

.navbar-gsmt.scrolled .brand-logo{
  height:30px;
}

.loader-brand-logo{
  height:38px;
  max-width:170px;
}

.footer-brand-logo{
  height:38px;
  margin:0 auto 12px;
}

.by-badge img.by-logo,
footer img.footer-logo{
  filter:brightness(0) invert(1) contrast(1.08);
  opacity:.95;
}

.navbar-gsmt .d-flex.align-items-center{
  min-width:0;
}

@media (max-width:575px){
  .brand-logo{
    height:28px;
  }

  .loader-brand-logo{
    height:32px;
    max-width:145px;
  }

  .footer-brand-logo{
    height:32px;
  }
}