:root{
  --black:#000; --surface:#0a0a0a; --surface2:#111214; --border:#1c1d20;
  --white:#fff; --muted:rgba(255,255,255,.5); --muted2:rgba(255,255,255,.7);
  --gold:#c9a961; --gold-soft:rgba(201,169,97,.14); --gold-line:rgba(201,169,97,.3);
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--black); color:var(--white);
  font-family:'Inter',-apple-system,system-ui,sans-serif; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,.display{font-family:'Outfit',sans-serif; line-height:1.05; letter-spacing:-.02em; font-weight:800}
a{color:inherit; text-decoration:none}
a:focus-visible,.btn:focus-visible,summary:focus-visible,button:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:2px}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px}
.gold{color:var(--gold)}
.muted{color:var(--muted)}
section{position:relative}
.eyebrow{font-family:'Outfit',sans-serif; font-size:12.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); font-weight:600; margin-bottom:18px}
.greek{height:3px; width:100%; background-image:repeating-linear-gradient(90deg,var(--gold) 0,var(--gold) 8px,transparent 8px,transparent 12px,var(--gold) 12px,var(--gold) 14px,transparent 14px,transparent 22px); opacity:.5}

/* NAV */
header.nav{position:fixed; top:0; left:0; right:0; z-index:50; backdrop-filter:blur(14px); background:rgba(0,0,0,.6); border-bottom:1px solid var(--border)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:68px}
.logo{font-family:'Outfit',sans-serif; font-weight:900; font-size:21px; letter-spacing:.02em}
.logo span{color:var(--gold)}
.nav-links{display:flex; gap:30px; align-items:center}
.nav-links a{font-size:14.5px; color:var(--muted2); transition:color .2s}
.nav-links a:hover{color:var(--white)}
.btn{display:inline-block; font-family:'Outfit',sans-serif; font-weight:600; font-size:15px; padding:13px 26px; border-radius:2px; cursor:pointer; transition:all .2s; border:1px solid transparent}
.btn-gold{background:var(--gold); color:#0a0a0a}
.btn-gold:hover{background:#d8b975; transform:translateY(-1px)}
.btn-ghost{border-color:var(--gold-line); color:var(--white)}
.btn-ghost:hover{background:var(--gold-soft); border-color:var(--gold)}
.nav-cta{padding:10px 20px; font-size:14px}
.nav-mobile{display:none; align-items:center; gap:12px}
.nav-cta-mobile{padding:9px 16px; font-size:13px}
.burger{display:none; flex-direction:column; justify-content:center; gap:5px; width:42px; height:42px; padding:0; background:transparent; border:1px solid var(--border); border-radius:3px; cursor:pointer}
.burger span{display:block; width:18px; height:2px; background:var(--gold); margin:0 auto; transition:transform .25s, opacity .25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{display:none; flex-direction:column; gap:4px; padding:14px 24px 24px; background:rgba(0,0,0,.96); backdrop-filter:blur(14px); border-bottom:1px solid var(--border)}
.mobile-menu a{font-family:'Outfit',sans-serif; font-weight:600; font-size:16px; color:var(--muted2); padding:13px 0; border-bottom:1px solid var(--border); transition:color .2s}
.mobile-menu a:hover{color:var(--white)}
.mobile-menu a.btn{color:#0a0a0a; text-align:center; margin-top:14px; border-bottom:none}
.mobile-menu.open{display:flex}

/* HERO */
.hero{padding:170px 0 90px; text-align:center; position:relative; overflow:hidden}
.hero::before{content:""; position:absolute; inset:0; background:radial-gradient(ellipse 60% 50% at 50% 0%, rgba(201,169,97,.10), transparent 70%); pointer-events:none}
.hero h1{font-size:clamp(42px,8vw,86px); font-weight:900}
.hero h1 .line2{color:var(--gold)}
.hero p.sub{max-width:680px; margin:26px auto 0; font-size:clamp(17px,2.2vw,20px); color:var(--muted2)}
.hero .cta-row{margin-top:38px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.hero .tagline{font-family:'Outfit'; letter-spacing:.18em; text-transform:uppercase; font-size:13px; color:var(--gold); margin-bottom:26px}
.trustbar{margin-top:60px; display:flex; gap:40px; justify-content:center; flex-wrap:wrap; padding-top:34px; border-top:1px solid var(--border)}
.trustbar .stat{text-align:center}
.trustbar .stat b{display:block; font-family:'Outfit'; font-size:30px; font-weight:800; color:var(--white)}
.trustbar .stat span{font-size:13px; color:var(--muted); letter-spacing:.04em}

/* PAGE HERO (paginas interiores) */
.page-hero{padding:140px 0 40px; text-align:center; position:relative; overflow:hidden}
.page-hero::before{content:""; position:absolute; inset:0; background:radial-gradient(ellipse 60% 60% at 50% 0%, rgba(201,169,97,.10), transparent 70%); pointer-events:none}
.page-hero h1{font-size:clamp(34px,6vw,60px)}
.page-hero p{max-width:640px; margin:20px auto 0; font-size:18px; color:var(--muted2)}

/* SECTION BASE */
.sec{padding:96px 0}
.sec-sm{padding:56px 0}
.sec-head{max-width:720px; margin-bottom:54px}
.sec-head.center{margin-left:auto; margin-right:auto; text-align:center}
.sec h2{font-size:clamp(30px,4.5vw,46px)}
.sec-head p{margin-top:18px; font-size:17.5px; color:var(--muted2)}

/* PROBLEM */
.problem{background:var(--surface)}
.problem-grid{display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center}
.problem ul{list-style:none; margin-top:10px}
.problem li{padding:14px 0 14px 34px; position:relative; border-bottom:1px solid var(--border); color:var(--muted2)}
.problem li::before{content:"✕"; position:absolute; left:0; top:13px; color:#c06a64; font-weight:700}
.problem .sol li::before{content:"✓"; color:var(--gold)}
.problem .sol li{color:var(--white)}

/* MODELOS */
.models-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.model-card{background:var(--surface2); border:1px solid var(--border); border-radius:4px; overflow:hidden; transition:all .25s; display:flex; flex-direction:column}
.model-card:hover{border-color:var(--gold-line); transform:translateY(-4px)}
.model-thumb{height:170px; position:relative; display:flex; align-items:flex-end; padding:18px; background-size:cover; background-position:center}
.model-thumb .tag{font-family:'Outfit'; font-size:11px; letter-spacing:.16em; text-transform:uppercase; background:rgba(0,0,0,.6); border:1px solid var(--gold-line); color:var(--gold); padding:4px 10px; border-radius:2px}
.model-body{padding:22px}
.model-body h3{font-size:21px; margin-bottom:6px}
.model-body p{font-size:14.5px; color:var(--muted); min-height:42px}
.model-body .for{margin-top:14px; font-size:12.5px; color:var(--gold); letter-spacing:.04em; font-family:'Outfit'; text-transform:uppercase}
.model-link{display:inline-block; margin-top:16px; font-family:'Outfit'; font-weight:600; font-size:14px; color:var(--white); border-bottom:1px solid var(--gold-line); padding-bottom:3px; transition:all .2s}
.model-link:hover{color:var(--gold); border-color:var(--gold)}

/* SHOWCASE (pagina modelos: fila grande por plantilla) */
.showcase{display:flex; flex-direction:column; gap:30px}
.showcase-row{display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:center; border:1px solid var(--border); border-radius:8px; overflow:hidden; background:var(--surface2)}
.showcase-row:nth-child(even){grid-template-columns:1fr 1.2fr}
.showcase-row:nth-child(even) .showcase-media{order:2}
.showcase-media{height:340px; background-size:cover; background-position:center; position:relative}
.showcase-media .tag{position:absolute; top:16px; left:16px; font-family:'Outfit'; font-size:11px; letter-spacing:.16em; text-transform:uppercase; background:rgba(0,0,0,.65); border:1px solid var(--gold-line); color:var(--gold); padding:5px 11px; border-radius:2px}
.showcase-text{padding:34px}
.showcase-text h3{font-size:26px; margin-bottom:10px}
.showcase-text .for{font-size:12.5px; color:var(--gold); letter-spacing:.04em; font-family:'Outfit'; text-transform:uppercase; margin-bottom:14px}
.showcase-text p{color:var(--muted2); margin-bottom:18px}

/* PROCESO */
.proceso{background:var(--surface)}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; counter-reset:step}
.step{padding:28px 22px; border:1px solid var(--border); border-radius:4px; background:var(--black); position:relative}
.step .num{font-family:'Outfit'; font-size:40px; font-weight:900; color:var(--gold-line); line-height:1}
.step h3{font-size:18px; margin:14px 0 8px}
.step p{font-size:14px; color:var(--muted)}

/* PRECIO */
.precio-card{max-width:640px; margin:0 auto; background:linear-gradient(180deg,var(--surface2),var(--surface)); border:1px solid var(--gold-line); border-radius:6px; padding:46px; text-align:center; position:relative}
.precio-card::before{content:""; position:absolute; inset:0; border-radius:6px; box-shadow:0 0 80px rgba(201,169,97,.08) inset; pointer-events:none}
.precio-card .price{font-family:'Outfit'; font-weight:900; font-size:64px; line-height:1}
.precio-card .price small{font-size:20px; color:var(--muted); font-weight:500}
.precio-card .price-sub{color:var(--gold); font-family:'Outfit'; letter-spacing:.04em; margin-top:6px}
.incluye{display:grid; grid-template-columns:1fr 1fr; gap:12px 26px; text-align:left; max-width:480px; margin:34px auto 0}
.incluye li{list-style:none; padding-left:28px; position:relative; font-size:15px; color:var(--muted2)}
.incluye li::before{content:"✓"; position:absolute; left:0; color:var(--gold); font-weight:700}
.precio-card .btn{margin-top:36px}
.precio-note{margin-top:18px; font-size:13.5px; color:var(--muted)}

/* SERVICIOS EXTRA */
.extras{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.extra{padding:24px; border:1px solid var(--border); border-radius:4px; background:var(--surface2)}
.extra h3{font-size:16px; margin-bottom:6px}
.extra p{font-size:13.5px; color:var(--muted)}

/* QUIENES */
.quienes{background:var(--surface)}
.quienes-grid{display:grid; grid-template-columns:1fr 1.3fr; gap:50px; align-items:center}
.quienes p{font-size:17px; color:var(--muted2); margin-bottom:16px}

/* FAQ */
details.faq{border-bottom:1px solid var(--border); padding:6px 0}
details.faq summary{cursor:pointer; list-style:none; padding:20px 0; font-family:'Outfit'; font-weight:600; font-size:18px; display:flex; justify-content:space-between; align-items:center; gap:20px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+"; color:var(--gold); font-size:24px; font-weight:300; flex-shrink:0}
details.faq[open] summary::after{content:"−"}
details.faq p{padding:0 0 22px; color:var(--muted2); font-size:15.5px; max-width:760px}

/* PROSE (legales) */
.prose{max-width:780px; margin:0 auto}
.prose h2{font-size:24px; margin:34px 0 12px}
.prose h3{font-size:18px; margin:24px 0 8px}
.prose p, .prose li{color:var(--muted2); font-size:15.5px; margin-bottom:12px}
.prose ul{margin:0 0 12px 22px}
.prose a{color:var(--gold); border-bottom:1px solid var(--gold-line)}
.prose .nota{background:var(--surface2); border:1px solid var(--gold-line); border-radius:6px; padding:16px 20px; font-size:14px; color:var(--muted2); margin:20px 0}

/* CONTACTO */
.contacto-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start}
.contact-card{border:1px solid var(--border); border-radius:8px; padding:30px; background:var(--surface2)}
.contact-card h3{font-size:20px; margin-bottom:10px}
.contact-card p{color:var(--muted2); margin-bottom:18px; font-size:15.5px}

/* CTA FINAL */
.cta-final{padding:110px 0; text-align:center; background:radial-gradient(ellipse 70% 80% at 50% 100%, rgba(201,169,97,.12), transparent 70%)}
.cta-final h2{font-size:clamp(32px,5vw,56px)}
.cta-final p{max-width:560px; margin:20px auto 0; color:var(--muted2); font-size:18px}

/* FOOTER */
footer{border-top:1px solid var(--border); padding:54px 0 36px; background:var(--surface)}
.foot-grid{display:flex; justify-content:space-between; flex-wrap:wrap; gap:30px}
.foot-grid .col h4{font-family:'Outfit'; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:14px}
.foot-grid .col a{display:block; color:var(--muted2); font-size:14px; padding:4px 0}
.foot-grid .col a:hover{color:var(--gold)}
.foot-bottom{margin-top:40px; padding-top:24px; border-top:1px solid var(--border); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; color:var(--muted); font-size:13px}
.foot-bottom a{color:var(--muted2)}
.foot-bottom a:hover{color:var(--gold)}

/* WHATSAPP FLOAT */
.wa{position:fixed; bottom:24px; right:24px; z-index:60; width:56px; height:56px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 30px rgba(0,0,0,.4); transition:transform .2s}
.wa:hover{transform:scale(1.08)}
.wa svg{width:30px; height:30px; fill:#fff}

@media(max-width:900px){
  .nav-links{display:none}
  .nav-mobile{display:flex}
  .burger{display:flex}
  .problem-grid,.quienes-grid,.contacto-grid{grid-template-columns:1fr; gap:30px}
  .models-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .extras{grid-template-columns:1fr 1fr}
  .incluye{grid-template-columns:1fr}
  .showcase-row,.showcase-row:nth-child(even){grid-template-columns:1fr}
  .showcase-row:nth-child(even) .showcase-media{order:0}
  .showcase-media{height:240px}
}
@media(max-width:560px){
  .models-grid,.steps,.extras{grid-template-columns:1fr}
  .trustbar{gap:24px}
}