/* Fuente base */
:root {
  --bg: #0b1020;
  --bg-alt: #0e1530;
  --card: #0f1736;
  --muted: #94a3b8;
  --text: #e2e8f0;
  --primary: #5b8cff;
  --primary-600: #4978ff;
  --accent: #22d3ee;
  --accent-600: #06b6d4;
  --border: #1f2a44;
  --success: #22c55e;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 600px at 10% -10%, #162045 0%, transparent 60%),
              radial-gradient(1200px 600px at 90% -20%, #12224a 0%, transparent 60%),
              var(--bg);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:100%;max-width:1100px;margin:0 auto;padding:0 20px}
.small{font-size:.9rem}
.muted{color:var(--muted)}
.centered{text-align:center}
.w-100{width:100%}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(11,16,32,.6);backdrop-filter: blur(10px);border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;gap:10px;align-items:center;font-weight:700;margin-left:-204px}
.brand-logo{height:65px;width:auto}
.site-header .brand-logo{height:78px}
.brand-logo-sm{height:60px;width:auto}
.brand-text{letter-spacing:.3px}

.nav{display:flex;gap:18px;align-items:center}
.nav-link{padding:8px 10px;border-radius:10px;color:var(--muted)}
.nav-link:hover{color:var(--text);background:rgba(255,255,255,.04)}
.nav-toggle{display:none;background:none;border:0;color:var(--text);font-size:24px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:12px;border:1px solid transparent;font-weight:600;transition:.2s ease;box-shadow:var(--shadow)}
.btn-sm{padding:8px 12px;border-radius:10px}
.btn-lg{padding:14px 20px;border-radius:14px;font-size:1.05rem}
.btn-primary{background:linear-gradient(180deg, var(--primary), var(--primary-600));border-color:#3a60d4}
.btn-primary:hover{filter:brightness(1.05)}
.btn-outline{background:transparent;border-color:var(--border);color:var(--text)}
.btn-outline:hover{border-color:#2b3a66;background:rgba(255,255,255,.04)}
.btn-accent{background:linear-gradient(180deg, var(--accent), var(--accent-600));color:#03121a;border-color:#0aa7be}
.btn-accent:hover{filter:brightness(1.06)}
.btn-danger{background:linear-gradient(180deg, #ef4444, #dc2626);border-color:#b91c1c;color:#fff}
.btn-danger:hover{filter:brightness(1.05)}

/* Hero */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--border)}
.hero-inner{padding:64px 0 40px;text-align:center}
.hero-title{font-size: clamp(28px, 4.5vw, 48px);margin:0 0 10px;letter-spacing:-.02em}
.hero-subtitle{margin:0 auto 20px;max-width:700px;color:var(--muted)}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero-bg{position:absolute;inset:0;background:
  radial-gradient(800px 300px at 50% -10%, rgba(91,140,255,.25), transparent 60%),
  radial-gradient(800px 300px at 80% -20%, rgba(34,211,238,.2), transparent 60%);
  pointer-events:none;}

/* Hero Live */
.hero-live{position:relative;background:
  radial-gradient(900px 420px at 50% 30%, rgba(0,190,255,.28), transparent 60%),
  radial-gradient(800px 360px at 15% 40%, rgba(255,60,60,.16), transparent 62%),
  radial-gradient(700px 340px at 85% 45%, rgba(0,120,255,.18), transparent 62%),
  linear-gradient(180deg, rgba(5,10,30,.88), rgba(5,10,30,.92));
}
.hero-live::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;background:
  repeating-linear-gradient(135deg, rgba(0,220,255,.16), rgba(0,220,255,0) 90px, rgba(0,220,255,0) 170px),
  repeating-linear-gradient(45deg, rgba(0,160,255,.10), rgba(0,160,255,0) 120px, rgba(0,160,255,0) 220px);
  filter:blur(.2px);
}
.hero-live .hero-inner{padding:92px 0 56px;text-align:center;position:relative;z-index:2}
.hero-live .hero-title{font-weight:800;text-transform:uppercase;letter-spacing:.02em}
.hero-live .hero-cta{margin-top:14px}
.hero-social{display:flex;justify-content:center;gap:22px;margin-top:18px}
.social-icon{width:44px;height:44px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);box-shadow:0 10px 24px rgba(0,0,0,.25);transition:transform .18s ease, background .18s ease, border-color .18s ease}
.social-icon:hover{transform:translateY(-2px);background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28)}
.social-icon i{color:#fff;font-size:18px;line-height:1}
.hero-graphic{display:block;margin:18px auto 0;max-width:720px;width:min(90%, 720px);transition:transform .25s ease;cursor:pointer;will-change: transform;}
.hero-graphic:hover{transform:translateY(-6px) scale(1.03);}
/* .hero-live .hero-graphic{display:none} */

/* HERO LIVE unified composition (keep original container) */
.hero-composed{position:relative;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:24px;min-height:380px;padding:56px 0;z-index:2}
.hero-subject{position:relative}
.subject-img{max-width:640px;width:100%;height:auto;display:block;opacity:.96;filter:drop-shadow(0 10px 24px rgba(0,200,255,.18));transform:translateX(-24px);animation:enterLeft .8s cubic-bezier(.2,.7,.2,1) .1s both}
.speed-lines{position:absolute;inset:0;left:-35%;right:15%;z-index:-1;background:repeating-linear-gradient(90deg, rgba(50,180,255,.6), rgba(120,220,255,0) 120px, transparent 140px, transparent 200px);transform:translateX(-10%);filter:blur(1px) brightness(1.1);opacity:.35;animation:linesMove 2.2s linear infinite}
.hero-textimg{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:12px;transform:translateX(12px);animation:enterRight .7s ease .2s both;z-index:3}
.text-img{width:min(520px, 90%);height:auto;display:block}
.btn-hero{display:inline-flex;align-items:center;justify-content:center;padding:12px 22px;border-radius:12px;background:linear-gradient(180deg,#ff3b3b,#e02424);color:#fff;border:1px solid #b11010;font-weight:900;box-shadow:0 0 0 rgba(255,60,60,.6),0 10px 24px rgba(255,60,60,.25);text-shadow:0 1px 0 rgba(0,0,0,.25);transition:transform .18s ease, filter .18s ease, box-shadow .18s ease}
.btn-hero:hover{transform:translateY(-2px) scale(1.03);filter:brightness(1.08);box-shadow:0 0 18px rgba(255,70,70,.55),0 12px 26px rgba(255,60,60,.3)}
.hero-live .hero-bg{z-index:1}

@media (max-width: 900px){
  .hero-composed{grid-template-columns:1fr;gap:16px;padding:42px 0}
  .hero-textimg{align-items:center;text-align:center;transform:none}
  .text-img{width:min(600px, 92%)}
  .subject-img{transform:none}
}

/* HERO PRO (clon 1:1) */
.hero-pro{position:relative;background:linear-gradient(180deg, #0a0b12, #110c12 35%, #0b0a10);}
.hero-pro .hero-bg{background:
  radial-gradient(900px 300px at -10% 20%, rgba(60,120,255,.18), transparent 60%),
  radial-gradient(800px 260px at 110% 10%, rgba(0,180,255,.14), transparent 60%),
  radial-gradient(700px 260px at 50% -20%, rgba(255,0,80,.08), transparent 60%);
  animation:bgPan 18s linear infinite alternate;filter:saturate(1.05)}
.hero-grid{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:24px;min-height:360px;padding:36px 0}
.hero-left{position:relative}
.runner-wrap{position:relative;max-width:560px}
.runner{width:100%;height:auto;opacity:.95;filter:drop-shadow(0 10px 24px rgba(0,200,255,.15));transform:translateX(-24px);animation:enterLeft .8s cubic-bezier(.2,.7,.2,1) .15s both}
.speed-lines{position:absolute;inset:0;left:-30%;right:20%;z-index:-1;background:
  repeating-linear-gradient(90deg, rgba(50,180,255,.6), rgba(120,220,255,.0) 120px, transparent 140px, transparent 200px);
  transform:translateX(-10%);filter:blur(1px) brightness(1.1);opacity:.35;animation:linesMove 2.2s linear infinite}
.hero-right{display:flex;flex-direction:column;align-items:flex-start;gap:10px;transform:translateX(16px);}
.hero-headline{margin:0;font-size:clamp(22px,3.2vw,34px);font-weight:900;color:#ef4444;letter-spacing:.02em;text-transform:uppercase;line-height:1.15;animation:enterRight .7s ease .15s both}
.hero-sub{margin:0;color:#eaeff7;font-weight:800;letter-spacing:.02em;animation:fadeUp .7s ease .3s both}
.btn-hero{display:inline-flex;align-items:center;justify-content:center;padding:12px 22px;border-radius:12px;background:linear-gradient(180deg,#ff3b3b,#e02424);color:#fff;border:1px solid #b11010;font-weight:900;box-shadow:0 0 0 rgba(255,60,60,.6),0 10px 24px rgba(255,60,60,.25);text-shadow:0 1px 0 rgba(0,0,0,.25);transition:transform .18s ease, filter .18s ease, box-shadow .18s ease;animation:fadeUp .7s ease .45s both}
.btn-hero:hover{transform:translateY(-2px) scale(1.03);filter:brightness(1.08);box-shadow:0 0 18px rgba(255,70,70,.55),0 12px 26px rgba(255,60,60,.3)}
.gold-arc{position:relative;height:36px;display:flex;align-items:center;gap:12px;margin-bottom:6px;opacity:.95;animation:fadeUp .7s ease .25s both}
.gold-arc .line{flex:1;height:3px;background:linear-gradient(90deg,#CBA135,#E5C66A)}
.gold-arc .arc{width:140px;height:24px;border:3px solid #E5C66A;border-bottom:none;border-radius:999px/100%;position:relative}
.gold-arc .arc::after{content:"";position:absolute;left:50%;top:-8px;transform:translateX(-50%);width:90px;height:6px;border-top:3px dotted #E5C66A;opacity:.9}
.stars{margin-top:10px;color:#E5C66A;letter-spacing:8px;opacity:.9;animation:fadeUp .7s ease .6s both}
.hero-net{position:absolute;inset:0;pointer-events:none;opacity:.6}
.hero-net svg{width:100%;height:100%;filter:blur(.2px)}
.dash{stroke-dasharray:6 10;animation:dashShift 8s linear infinite}

@keyframes enterLeft{from{opacity:0;transform:translateX(-60px)}to{opacity:1;transform:translateX(-24px)}}
@keyframes enterRight{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes linesMove{0%{transform:translateX(-10%)}100%{transform:translateX(10%)}}
@keyframes dashShift{0%{stroke-dashoffset:0}100%{stroke-dashoffset:-200}}
@keyframes bgPan{0%{transform:translate3d(-2%,0,0)}100%{transform:translate3d(2%,1%,0)}}

/* Responsive layout for HERO PRO */
@media (max-width: 900px){
  .hero-grid{grid-template-columns:1fr;gap:10px;padding:28px 0}
  .hero-right{align-items:center;text-align:center;transform:none}
  .hero-left .runner{transform:none}
}

/* Sections */
.section{padding:56px 0}
.section.alt{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.section-head{margin:0 0 28px;text-align:center}
.section-title{font-size: clamp(24px, 4vw, 36px);margin:0 0 8px}
.section-desc{color:var(--muted);margin:0}

/* Pricing Section */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.card{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);position:relative}
.pricing-card .badge{position:absolute;top:-10px;right:16px;background:linear-gradient(180deg, #22c55e, #16a34a);color:#04120a;border:1px solid #0f7a34;padding:6px 10px;border-radius:999px;font-size:.8rem;font-weight:700}
.card-head{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.plan-name{margin:0;font-size:1.25rem}
.plan-tag{margin:0;color:var(--muted)}
.price{display:flex;align-items:flex-end;gap:4px;margin-top:6px}
.price-currency{opacity:.8}
.price-value{font-size:2rem;font-weight:800;letter-spacing:-.02em}
.price-period{color:var(--muted)}
.features{list-style:none;margin:12px 0 16px;padding:0;display:flex;flex-direction:column;gap:8px}
.features li{display:flex;gap:8px}
.features li::before{content:"✓";color:var(--success)}
.pricing-card.featured{border-color:#3a60d4;background:linear-gradient(180deg, rgba(91,140,255,.15), rgba(255,255,255,.02))}

/* Benefits */
.benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.benefit{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));border:1px solid var(--border);border-radius:14px;padding:16px;text-align:center}
.benefit .icon{font-size:28px;margin-bottom:8px}

/* Accordion */
.accordion details{border:1px solid var(--border);border-radius:12px;padding:12px 14px;background:rgba(255,255,255,.02)}
.accordion details+details{margin-top:10px}
.accordion summary{cursor:pointer;font-weight:600}
.accordion p{color:var(--muted);margin:10px 0 0}

/* CTA */
.cta-inner{text-align:center}

/* Footer */
.site-footer {
  background: #1a1a2e;
  color: #fff;
  padding: 60px 0 20px;
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.footer-column {
  padding: 0 15px;
}

.footer-logo {
  margin-bottom: 20px;
}

.footer-logo img {
  max-height: 60px;
  width: auto;
}

.footer-about {
  color: #a0a0a0;
  font-size: 0.95rem;
  margin: 15px 0 0;
  line-height: 1.6;
}

.footer-column h4 {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 20px;
  position: relative;
  padding-bottom: 10px;
}

.footer-column h4::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 2px;
  background: #f8b84e;
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-links a {
  color: #a0a0a0;
  text-decoration: none;
  transition: color 0.3s ease;
  display: block;
  font-size: 0.95rem;
}

.footer-links a:hover {
  color: #f8b84e;
  padding-left: 5px;
}

.footer-links i {
  color: #f8b84e;
  margin-right: 10px;
  width: 16px;
  text-align: center;
}

.footer-bottom {
  text-align: center;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #a0a0a0;
  font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 992px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 20px;
  }
  
  .footer-column {
    margin-bottom: 20px;
  }
}

@media (max-width: 576px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  
  .footer-column {
    padding: 0 10px;
  }
  
  .footer-column h4 {
    margin-bottom: 15px;
  }
  
  .footer-links a {
    font-size: 0.9rem;
  }
}

/* Speedtest Banner */
.speedtest-banner{padding:0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.speedtest-link{position:relative;display:block;isolation:isolate;min-height:350px;transform-origin:left center;transition:filter .25s ease, opacity .25s ease;overflow-y:hidden;overflow-x:visible}
.banner-img{position:absolute;top:0;left:50%;transform:translateX(-50%);width:100%;height:auto;display:block;pointer-events:none}
.speedtest-title{position:absolute;right:16%;top:29%;z-index:3;display:flex;flex-direction:column;align-items:flex-end;pointer-events:none}
.speedtest-title span{display:block;font-family:'Inter', system-ui, -apple-system, sans-serif;font-weight:900;line-height:1;color:white;text-shadow:0 2px 4px rgba(0,0,0,0.5);}
.speedtest-title span:first-child{font-size:4.5rem;letter-spacing:-1px;color:#f8b84e;margin-bottom:-10px}
.speedtest-title span:last-child{font-size:5rem;letter-spacing:-1px;color:#f8b84e;margin-top:-15px}
.text-overlay{position:absolute;right:8%;top:80%;transform:translateY(-50%);height:40%;width:auto;object-fit:contain;pointer-events:none;z-index:2}
.speedtest-link::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.0);transition:background .25s ease;z-index:1}
.speedtest-link:hover{filter:saturate(1.02)}
.speedtest-link:hover::after{background:rgba(0,0,0,.25)}
@media (max-width: 900px){
  .speedtest-link{min-height:300px}
  .speedtest-title span:first-child{font-size:4rem}
  .speedtest-title span:last-child{font-size:4.5rem}
  .text-overlay{height:40%}
}
@media (max-width: 640px){
  .speedtest-link{min-height:250px}
  .speedtest-title{top:12%}
  .speedtest-title span:first-child{font-size:3rem}
  .speedtest-title span:last-child{font-size:3.5rem;margin-top:-10px}
  .text-overlay{height:38%}
}

/* Responsive */
@media (max-width: 1000px){
  .pricing-grid{grid-template-columns:repeat(2,1fr)}
  .benefits{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 992px) {
  .brand-logo {
    height: 55px;
  }
  .site-header .brand-logo {
    height: 68px;
  }
  .footer-logo img {
    max-height: 50px;
  }
}

@media (max-width: 768px) {
  .brand-logo {
    height: 50px;
  }
  .site-header .brand-logo {
    height: 64px;
  }
  .brand-logo-sm {
    height: 45px;
  }
  .footer-logo img {
    max-height: 45px;
  }
}

@media (max-width: 640px) {
  .header-inner {
    height: 66px;
  }
  .brand-logo {
    height: 45px;
  }
  .site-header .brand-logo {
    height: 56px;
  }
  .brand-logo-sm {
    height: 40px;
  }
  .nav {
    display: none;
    position: absolute;
    top: 58px;
    right: 12px;
    background: rgba(11,16,32,.95);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 8px;
    flex-direction: column;
    gap: 6px;
    width: calc(100% - 24px);
  }
  .nav.open {
    display: flex;
  }
  .nav-toggle {
    display: block;
  }
  .pricing-grid {
    grid-template-columns: 1fr;
  }
  .benefits {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .footer-logo img {
    max-height: 40px;
  }
}