/* Páginas locales (SEO): mismo lenguaje visual que la portada, sin 3D. */
:root{
  color-scheme: dark;
  --indigo:#4B3FCF; --violet:#7C6CF2; --blue:#39A0FF; --cyan:#7FD8FF; --gold:#F0B94D; --sand:#EADFCB; --sun:#F2B45A;
  --grad: linear-gradient(110deg, var(--indigo), var(--violet) 50%, var(--blue));
  --bg:#07070B; --surface:rgba(17,17,25,.72); --line:rgba(190,185,255,.10); --line-2:rgba(190,185,255,.18);
  --text:#F2F1FA; --dim:#A9A6C2; --muted:#716E8C; --r:8px;
  --display:'Unbounded','Segoe UI',system-ui,sans-serif; --body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --gutter:clamp(16px,4vw,48px);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{background:var(--bg); scroll-behavior:smooth;}
body{font-family:var(--body); color:var(--text); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  background:radial-gradient(1200px 700px at 80% -10%, rgba(57,160,255,.10), transparent 60%), radial-gradient(900px 600px at -10% 40%, rgba(124,108,242,.08), transparent 60%), var(--bg);}
a{color:inherit;}
img{max-width:100%; display:block;}
:focus-visible{outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px;}
.wrap{max-width:1120px; margin:0 auto; padding-inline:var(--gutter);}
.label{font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:color-mix(in srgb, var(--sand) 75%, transparent);}
h1,h2,h3{font-family:var(--display); font-weight:500; letter-spacing:-.03em; text-wrap:balance;}
h1{font-size:clamp(32px,5.4vw,64px); line-height:1.04;}
h2{font-size:clamp(24px,3.2vw,40px); line-height:1.1;}
h3{font-size:17px; letter-spacing:-.01em;}
p{color:var(--dim);}
.grad-text{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.btn{display:inline-flex; align-items:center; gap:10px; padding:13px 20px; border-radius:var(--r); font-weight:600; font-size:14.5px; text-decoration:none; border:1px solid var(--line-2); transition:border-color .2s, background .2s, transform .2s;}
.btn:hover{border-color:var(--dim);}
.btn-solid{background:var(--sand); color:#17120A; border-color:var(--sand);}
.btn-solid:hover{background:#F4ECDD; transform:translateY(-1px);}

nav.top{position:sticky; top:0; z-index:10; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); background:rgba(7,7,11,.6); border-bottom:1px solid var(--line);}
nav.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:14px; height:64px;}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
.brand .word{height:13px; width:auto;}
.nav-r{display:flex; align-items:center; gap:10px;}
.nav-r .lang{font-family:var(--mono); font-size:12px; color:var(--dim); text-decoration:none; padding:8px 10px; border:1px solid var(--line); border-radius:var(--r);}
.nav-r .btn{padding:9px 14px; font-size:13.5px;}

.hero{position:relative; padding:clamp(56px,10vh,110px) 0 clamp(40px,7vh,80px); overflow:hidden;}
.hero-photo{position:absolute; inset:0; z-index:-1; background:center / cover no-repeat; opacity:.28;
  -webkit-mask-image:linear-gradient(180deg, #000 10%, transparent 95%); mask-image:linear-gradient(180deg, #000 10%, transparent 95%);}
.hero .label{display:block; margin-bottom:18px;}
.hero .lede{font-size:clamp(16px,1.5vw,19px); max-width:62ch; margin-top:20px; color:var(--dim);}
.hero .cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:28px;}
.where{display:flex; gap:8px; flex-wrap:wrap; margin-top:22px;}
.where span{font-family:var(--mono); font-size:11.5px; color:var(--dim); border:1px solid var(--line); border-radius:6px; padding:5px 9px;}
.where span b{color:var(--cyan); font-weight:500;}

section.block{padding:clamp(44px,7vh,80px) 0; border-top:1px solid var(--line);}
section.block > .wrap > .label{display:block; margin-bottom:14px;}
section.block h2{margin-bottom:12px;}
.intro{max-width:64ch; margin-bottom:26px;}
.grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px;}
.card{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:20px;}
.card h3{margin-bottom:8px;}
.card p{font-size:14.5px;}
.card .tag{display:inline-block; margin-top:12px; font-family:var(--mono); font-size:11.5px; color:var(--cyan);}
.packs{display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:12px;}
.pack{border:1px solid var(--line); border-left:3px solid var(--c, var(--violet)); border-radius:10px; padding:16px 18px; background:var(--surface);}
.pack b{font-family:var(--display); font-weight:500; font-size:15px; letter-spacing:-.01em;}
.pack .pr{display:block; font-family:var(--mono); font-size:13px; color:var(--sand); margin:6px 0 8px;}
.pack .pr small{font-size:11.5px; color:var(--muted);}
.pack p{font-size:13.5px;}
.fine{font-size:12.5px; color:var(--muted); margin-top:14px;}
ol.steps{list-style:none; counter-reset:s; display:grid; grid-template-columns:repeat(auto-fit, minmax(210px,1fr)); gap:12px;}
ol.steps li{counter-increment:s; border-top:1px solid var(--line-2); padding-top:14px;}
ol.steps li::before{content:"0" counter(s); display:block; font-family:var(--mono); font-size:12px; color:var(--cyan); margin-bottom:8px;}
ol.steps li b{display:block; font-family:var(--display); font-weight:500; font-size:15px; margin-bottom:4px;}
ol.steps li span{color:var(--dim); font-size:14px;}
details{border-bottom:1px solid var(--line); padding:16px 0;}
details summary{cursor:pointer; font-family:var(--display); font-weight:400; font-size:clamp(15px,1.5vw,18px); list-style:none; display:flex; justify-content:space-between; gap:14px;}
details summary::-webkit-details-marker{display:none;}
details summary::after{content:"+"; color:var(--muted); font-family:var(--mono);}
details[open] summary::after{content:"–";}
details p{margin-top:10px; max-width:70ch;}
.final{text-align:center; padding:clamp(56px,10vh,110px) 0;}
.final p{max-width:56ch; margin:14px auto 26px;}
.more{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:34px;}
.more a{font-size:13px; color:var(--dim); text-decoration:none; border:1px solid var(--line); border-radius:var(--r); padding:8px 12px;}
.more a:hover{border-color:var(--line-2); color:var(--text);}
footer{border-top:1px solid var(--line); padding:26px 0 36px; font-size:12.5px; color:var(--muted);}
footer .wrap{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;}
@media (max-width:620px){ .nav-r .btn{display:none;} }