/* ============================================================
   Escudería GP — sitio web oficial
   Estética: F1, oscuro, dorado + rojo. HTML/CSS puro.
   ============================================================ */

:root{
  --bg:#07090e;
  --bg-soft:#0d1018;
  --surface:#141824;
  --surface-2:#1a1f2d;
  --border:rgba(255,255,255,.08);
  --border-strong:rgba(255,255,255,.16);
  --red:#e10600;
  --red-bright:#ff2d2d;
  --gold:#f3c14b;
  --gold-2:#ffd877;
  --text:#f4f6fb;
  --muted:#99a1b2;
  --radius:18px;
  --maxw:1140px;
  --shadow:0 24px 70px rgba(0,0,0,.5);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Titillium Web',system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{list-style:none}

h1,h2,h3,h4,.display{
  font-family:'Rajdhani',sans-serif;
  font-weight:700;line-height:1.06;letter-spacing:.5px;
}

.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 22px}
.eyebrow{
  font-family:'Rajdhani';font-weight:600;letter-spacing:3px;
  text-transform:uppercase;font-size:14px;color:var(--gold);
}
.muted{color:var(--muted)}

/* barra de velocidad superior */
body::before{
  content:"";position:fixed;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--red),var(--gold));z-index:200;
}

/* ---------- NAV ---------- */
.nav{
  position:sticky;top:0;z-index:60;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:rgba(7,9,14,.74);border-bottom:1px solid var(--border);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:40px;height:40px}
.brand b{
  font-family:'Rajdhani';font-weight:700;font-size:21px;
  letter-spacing:1.5px;text-transform:uppercase;
}
.brand b i{color:var(--gold);font-style:normal}
.nav-links{display:flex;gap:30px;align-items:center}
.nav-links a{color:var(--muted);font-weight:600;font-size:15px;transition:color .2s}
.nav-links a:hover{color:var(--text)}
.nav-toggle{display:none}

/* ---------- BOTONES ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Rajdhani';font-weight:700;font-size:17px;letter-spacing:1px;
  text-transform:uppercase;padding:13px 26px;border-radius:12px;
  cursor:pointer;border:1px solid transparent;transition:transform .15s,box-shadow .2s,background .2s;
}
.btn-primary{
  background:linear-gradient(135deg,var(--red-bright),var(--red));
  color:#fff;box-shadow:0 10px 30px rgba(225,6,0,.35);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(225,6,0,.5)}
.btn-ghost{background:transparent;border-color:var(--border-strong);color:var(--text)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}

/* ---------- HERO ---------- */
.hero{position:relative;padding:84px 0 70px;text-align:center;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(900px 460px at 50% -8%,rgba(225,6,0,.28),transparent 60%),
    radial-gradient(700px 400px at 50% 4%,rgba(243,193,75,.10),transparent 55%);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:repeating-linear-gradient(115deg,transparent 0 38px,rgba(255,255,255,.018) 38px 40px);
}
.hero-logo{width:188px;height:188px;margin:0 auto 22px;filter:drop-shadow(0 14px 34px rgba(0,0,0,.55))}
.hero h1{font-size:clamp(42px,7vw,82px);text-transform:uppercase}
.hero h1 .grad{
  background:linear-gradient(180deg,var(--gold-2),var(--gold) 55%,#c9912d);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero .lead{
  max-width:620px;margin:18px auto 0;font-size:19px;color:var(--muted);
}
.hero-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:34px}

.stores{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.store-badge{
  display:flex;align-items:center;gap:11px;padding:10px 20px;border-radius:13px;
  background:var(--surface);border:1px solid var(--border);min-width:200px;
}
.store-badge svg{width:26px;height:26px;flex:0 0 auto;fill:var(--text)}
.store-badge .t{text-align:left;line-height:1.15}
.store-badge .t small{display:block;font-size:11px;color:var(--muted);letter-spacing:.5px}
.store-badge .t strong{font-family:'Rajdhani';font-size:18px;letter-spacing:.5px}
.store-badge .soon{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:1px;
  color:var(--gold);border:1px solid rgba(243,193,75,.4);border-radius:20px;padding:3px 9px;text-transform:uppercase}

/* ---------- SECCIONES ---------- */
section{padding:74px 0}
.section-head{text-align:center;max-width:640px;margin:0 auto 50px}
.section-head h2{font-size:clamp(30px,4.5vw,46px);text-transform:uppercase;margin-top:10px}
.section-head p{color:var(--muted);margin-top:12px;font-size:17px}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--border-strong),transparent)}

/* sobres */
.sobres{display:flex;justify-content:center;gap:26px;flex-wrap:wrap}
.sobre{text-align:center;transition:transform .3s}
.sobre img{height:230px;width:auto;margin:0 auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.5))}
.sobre:hover{transform:translateY(-12px)}
.sobre b{display:block;font-family:'Rajdhani';font-size:19px;margin-top:12px;letter-spacing:.5px}
.sobre small{color:var(--muted);font-size:13px}

/* features */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.feature{
  background:linear-gradient(180deg,var(--surface),var(--bg-soft));
  border:1px solid var(--border);border-radius:var(--radius);padding:28px 24px;
  transition:transform .2s,border-color .2s;
}
.feature:hover{transform:translateY(-5px);border-color:var(--border-strong)}
.feature .ic{
  width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:16px;
  background:rgba(225,6,0,.12);border:1px solid rgba(225,6,0,.25);
}
.feature .ic svg{width:26px;height:26px;stroke:var(--gold);fill:none;stroke-width:1.9}
.feature h3{font-size:22px;text-transform:uppercase;margin-bottom:8px}
.feature p{color:var(--muted);font-size:15px}

/* showcase cartas */
.cards-show{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;perspective:1200px}
.gcard{width:230px;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);
  border:1px solid var(--border-strong);transition:transform .35s}
.gcard img{width:100%;height:auto}
.gcard:nth-child(1){transform:rotate(-5deg)}
.gcard:nth-child(3){transform:rotate(5deg)}
.cards-show:hover .gcard{transform:rotate(0) translateY(-6px)}

/* stats */
.stats{display:flex;justify-content:center;gap:50px;flex-wrap:wrap;text-align:center}
.stat .n{font-family:'Rajdhani';font-weight:700;font-size:54px;
  background:linear-gradient(180deg,var(--gold-2),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .l{color:var(--muted);text-transform:uppercase;letter-spacing:2px;font-size:13px;font-weight:600}

/* CTA band */
.cta{
  text-align:center;border-radius:26px;padding:60px 30px;margin:0 22px;
  background:
    radial-gradient(600px 300px at 50% 0%,rgba(225,6,0,.3),transparent 60%),
    linear-gradient(180deg,var(--surface),var(--bg-soft));
  border:1px solid var(--border);
}
.cta h2{font-size:clamp(30px,4.5vw,48px);text-transform:uppercase}
.cta p{color:var(--muted);max-width:520px;margin:14px auto 28px;font-size:17px}

/* ---------- FOOTER ---------- */
.footer{border-top:1px solid var(--border);padding:50px 0 40px;background:var(--bg-soft)}
.footer-grid{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
.footer .brand{margin-bottom:14px}
.footer p{color:var(--muted);font-size:14px;max-width:330px}
.footer-links{display:flex;gap:40px;flex-wrap:wrap}
.footer-links h4{font-family:'Rajdhani';text-transform:uppercase;letter-spacing:1px;font-size:15px;color:var(--gold);margin-bottom:12px}
.footer-links a{display:block;color:var(--muted);font-size:14px;padding:4px 0;transition:color .2s}
.footer-links a:hover{color:var(--text)}
.footer-bottom{margin-top:38px;padding-top:22px;border-top:1px solid var(--border);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:13px}

/* ---------- PÁGINAS LEGALES ---------- */
.legal{padding:60px 0 40px}
.legal-wrap{max-width:820px;margin:0 auto}
.legal h1{font-size:clamp(34px,5vw,52px);text-transform:uppercase;margin-bottom:6px}
.legal .updated{color:var(--muted);font-size:14px;margin-bottom:34px}
.legal h2{font-size:25px;text-transform:uppercase;color:var(--gold);margin:34px 0 10px}
.legal h3{font-size:19px;margin:22px 0 8px}
.legal p,.legal li{color:#cfd4df;font-size:16px;margin-bottom:12px}
.legal ul{margin:0 0 14px 0}
.legal li{position:relative;padding-left:22px}
.legal li::before{content:"";position:absolute;left:2px;top:11px;width:7px;height:7px;border-radius:2px;
  background:linear-gradient(135deg,var(--red),var(--gold))}
.legal a{color:var(--gold);border-bottom:1px solid rgba(243,193,75,.35)}
.legal .box{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px 22px;margin:20px 0}
.back{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-weight:600;margin-bottom:30px;font-size:15px}
.back:hover{color:var(--gold)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:860px){
  .features{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
  .footer-grid{flex-direction:column}
}
@media(max-width:560px){
  .features{grid-template-columns:1fr}
  .stats{gap:30px}
  .sobre img{height:180px}
  .hero{padding:60px 0 50px}
  section{padding:56px 0}
  .store-badge{flex:1 1 100%}
}