
:root{--bg:#080808;--panel:#131313;--text:#f7f7f7;--muted:#b7b7b7;--red:#ef1d17;--orange:#ff8500;--gold:#ffca3a;--line:#2b2b2b;--max:1160px}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:radial-gradient(circle at 80% 0%,rgba(255,133,0,.12),transparent 30%),radial-gradient(circle at 5% 15%,rgba(239,29,23,.10),transparent 28%),var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none} img{max-width:100%;display:block}.wrap{width:min(var(--max),92%);margin:auto}
header{position:sticky;top:0;z-index:99;background:rgba(8,8,8,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:12px;font-weight:900}
.brand img{width:58px;height:44px;object-fit:contain;background:#fff;border-radius:7px;padding:3px}.menu{display:flex;align-items:center;gap:18px;font-size:.94rem}
.menu a{color:#ddd}.menu a:hover,.menu a.active{color:var(--gold)}.cta{padding:11px 15px;border-radius:10px;background:linear-gradient(90deg,var(--red),var(--orange));color:#fff!important;font-weight:900}
.mobile{display:none}.hero{min-height:74vh;display:grid;align-items:center;padding:54px 0 42px}.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:44px;align-items:center}
.eyebrow{display:flex;align-items:center;gap:10px;color:var(--gold);text-transform:uppercase;font-size:.79rem;font-weight:900;letter-spacing:1.8px}
.eyebrow:before{content:"";width:30px;height:3px;background:var(--red);border-radius:10px}
h1{font-size:clamp(3.1rem,7vw,6.8rem);line-height:.88;letter-spacing:-3px;margin:15px 0 18px}h1 span{display:block;color:var(--gold)}
.lead{font-size:clamp(1.06rem,2vw,1.25rem);line-height:1.62;color:#d8d8d8;max-width:720px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-flex;min-height:48px;align-items:center;justify-content:center;padding:0 20px;border-radius:11px;border:1px solid var(--line);font-weight:900}.btn-primary{background:linear-gradient(90deg,var(--red),var(--orange));border:none}.btn-dark{background:#141414}
.hero-card{border:1px solid var(--line);border-radius:26px;padding:24px;background:linear-gradient(145deg,#171717,#0e0e0e);box-shadow:0 30px 90px rgba(0,0,0,.45)}
.hero-card img{background:#fff;border-radius:17px}.quick{padding:16px 0 72px}.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.quick a{min-height:155px;padding:24px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,#181818,var(--panel));transition:.2s ease}
.quick a:hover{transform:translateY(-3px);border-color:#5b3b16}.quick small{color:var(--orange);font-weight:900;letter-spacing:1.3px}.quick h3{margin:10px 0 8px;font-size:1.42rem}.quick p{margin:0;color:var(--muted);line-height:1.5}
section.page{padding:66px 0 80px}.page-head{max-width:820px;margin-bottom:34px}.page-head h1{font-size:clamp(2.8rem,6vw,5rem);line-height:.95;margin:12px 0 16px}.page-head p{color:#c9c9c9;line-height:1.65;font-size:1.08rem}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.card{background:#131313;border:1px solid var(--line);border-radius:18px;padding:24px}.card h3{margin:7px 0 10px}.card p{color:#bdbdbd;line-height:1.55;margin:0}.card .tag{color:var(--orange);font-weight:900;font-size:.76rem;letter-spacing:1px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}.photo{min-height:390px;border:1px dashed #4d4d4d;border-radius:20px;background:#101010;display:grid;place-items:center;text-align:center;color:#8f8f8f;padding:30px}
.box{background:#131313;border:1px solid var(--line);border-radius:20px;padding:28px}.box h2{margin-top:0;font-size:2rem}.box p,.box li{color:#c6c6c6;line-height:1.65}
.status{display:inline-block;padding:7px 10px;border-radius:999px;background:#2d2209;color:#ffda72;font-weight:900;font-size:.76rem;letter-spacing:.7px}
.activity{background:linear-gradient(120deg,rgba(239,29,23,.16),rgba(255,133,0,.08)),#131313;border:1px solid #333;border-radius:22px;padding:28px}.activity h2{font-size:2.2rem;margin:13px 0 9px}.activity p{color:#c7c7c7;line-height:1.55}
.payment-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:24px}.step{border:1px solid var(--line);background:#131313;border-radius:16px;padding:20px}.step b{display:block;color:var(--gold);margin-bottom:8px}
.note{margin-top:22px;border-left:4px solid var(--orange);background:#151515;padding:17px 19px;border-radius:8px;color:#cfcfcf;line-height:1.55}
footer{border-top:1px solid var(--line);padding:34px 0 44px;color:#8e8e8e}.footer{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.footer strong{color:#fff}
@media(max-width:900px){.menu{display:none}.mobile{display:block;color:#bbb;font-size:.85rem}.hero{min-height:auto;padding-top:38px}.hero-grid,.two{grid-template-columns:1fr}.hero-card{order:-1}.quick-grid,.cards{grid-template-columns:1fr}.payment-flow{grid-template-columns:1fr 1fr}h1{letter-spacing:-2px}}
@media(max-width:520px){.payment-flow{grid-template-columns:1fr}.brand span{font-size:.9rem}.brand img{width:52px}}



/* ===== MENÚ RESPONSIVE V4 ===== */
.menu-toggle{
  display:none;
  width:50px;
  height:46px;
  padding:0;
  border:1px solid #3a3a3a;
  border-radius:12px;
  background:linear-gradient(180deg,#1b1b1b,#101010);
  box-shadow:0 7px 22px rgba(0,0,0,.35);
  cursor:pointer;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
}
.menu-toggle span{
  display:block;
  width:24px;
  height:3px;
  border-radius:99px;
  background:linear-gradient(90deg,var(--red),var(--orange));
  transition:.2s ease;
}
.menu-toggle.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.menu-toggle.open span:nth-child(2){opacity:0}
.menu-toggle.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

@media(min-width:901px){
  .menu-toggle{display:none!important}
  .menu{display:flex!important}
}

@media(max-width:900px){
  .mobile{display:none!important}
  header .nav{position:relative}
  .menu-toggle{display:flex!important}
  .menu{
    display:none!important;
    position:absolute;
    top:74px;
    left:-4%;
    right:-4%;
    width:auto;
    padding:12px 4% 18px;
    background:rgba(8,8,8,.99);
    border-top:1px solid #202020;
    border-bottom:1px solid var(--line);
    flex-direction:column;
    align-items:stretch;
    gap:0;
    box-shadow:0 24px 45px rgba(0,0,0,.55);
  }
  .menu.open{display:flex!important}
  .menu a{
    display:block;
    padding:15px 10px;
    border-bottom:1px solid #202020;
    font-size:1rem;
    font-weight:700;
  }
  .menu a.active{color:var(--gold)}
  .menu .cta{
    margin-top:12px;
    text-align:center;
    border-bottom:none;
    padding:14px 12px;
  }
}
