/* SP/ACE · páginas de conversión (Brand System V3.5) */
:root{
  --ink:#1C1612; --fire:#EB4B0A; --blue:#0A66FF; --blue-d:#0856D6; --cyan:#00A9C7; --green:#1DA850;
  --cream:#F4EDDE; --warm:#9A8D7C; --border:#EAE4D8; --dark:#101218; --night:#0B0D12;
  --muted:#4A423A; --soft:#D8D2C7; --line:#DDD5C8; --err:#B53A06;
  --display:'Cabinet Grotesk', system-ui, sans-serif;
  --body:'General Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --pad:clamp(20px,5vw,56px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:16px}
html,body{margin:0}
body{font-family:var(--body); color:var(--ink); background:#fff; line-height:1.5; -webkit-font-smoothing:antialiased}
a{color:inherit; text-decoration:none}
img,video,iframe{max-width:100%; display:block}
::selection{background:var(--blue); color:#fff}
:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
[hidden]{display:none !important}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none !important} }

.wrap{max-width:1440px; margin:0 auto; padding-left:var(--pad); padding-right:var(--pad)}
.mono{font-family:var(--mono)}

/* wordmark */
.wm{display:inline-flex; align-items:baseline; font-family:var(--display); font-weight:800; letter-spacing:-.02em; line-height:1; white-space:nowrap}
.wm i{display:inline-block; width:.15em; height:.84em; background:var(--blue); transform:skewX(-18deg); margin:0 .09em -.06em .12em}
.wm svg{width:.66em; height:.7em; overflow:visible}
.wm .d{margin-left:.24em}

/* nav */
.nav{background:var(--night); color:#fff; position:relative; z-index:5}
.nav .wrap{display:flex; align-items:center; gap:clamp(16px,3vw,40px); padding-top:20px; padding-bottom:20px}
.nav .links{display:flex; gap:clamp(18px,2.6vw,36px); font-weight:500; font-size:15px; letter-spacing:.06em}
.nav .links a{opacity:.86} .nav .links a:hover{opacity:1}
.nav .links a[aria-current="page"]{opacity:1; box-shadow:inset 0 -2px 0 var(--cyan); padding-bottom:4px}
.nav .sp{flex:1}
@media (max-width:760px){ .nav .links{display:none} }

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; font:600 16px/1.1 var(--body); padding:15px 24px; border-radius:8px; border:1px solid transparent; cursor:pointer; white-space:nowrap; transition:background .15s, border-color .15s; text-align:center}
.btn-p{background:var(--blue); color:#fff} .btn-p:hover{background:var(--blue-d)}
.btn-o{border-color:rgba(255,255,255,.35); color:#fff; font-weight:500; background:transparent} .btn-o:hover{border-color:#fff}
.btn-ol{border-color:var(--blue); color:var(--ink); font-weight:500; background:transparent} .btn-ol:hover{background:rgba(10,102,255,.07)}
.btn-sm{font-size:15px; padding:12px 18px}
.btn-block{width:100%}
.btn:disabled{opacity:.5; cursor:wait}
.btn-link{background:none; border:0; padding:0; font:500 15px var(--body); color:var(--muted); text-decoration:underline; text-underline-offset:3px; cursor:pointer}

/* type */
.kicker{font-family:var(--mono); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan); margin:0 0 18px}
.h1{font-family:var(--display); font-weight:800; font-size:clamp(44px,6.2vw,96px); letter-spacing:-.035em; line-height:.95; margin:0 0 24px; text-wrap:balance}
.h2{font-family:var(--display); font-weight:800; font-size:clamp(34px,4.2vw,62px); letter-spacing:-.03em; line-height:1; margin:0 0 20px; text-wrap:balance}
.h3{font-family:var(--display); font-weight:800; font-size:clamp(26px,2.4vw,34px); letter-spacing:-.02em; line-height:1.05; margin:0 0 10px}
.lede{font-size:clamp(17px,1.4vw,20px); line-height:1.5; max-width:34em; margin:0 0 32px; text-wrap:pretty}
.on-dark .lede, .on-dark p{color:var(--soft)}
p{margin:0 0 16px; text-wrap:pretty}

/* sections */
.sec{padding:clamp(64px,8vw,128px) 0}
.sec-cream{background:var(--cream)}
.sec-dark, .on-dark{background:var(--dark); color:#fff}
.sec-night{background:var(--night); color:#fff}
.sec-head{max-width:820px; margin-bottom:clamp(36px,4vw,56px)}
.sec-head p{font-size:18px; color:var(--muted); max-width:38em}
.on-dark .sec-head p{color:var(--soft)}

/* hero */
.hero{background:var(--night); color:#fff; padding:clamp(32px,5vw,72px) 0 clamp(56px,7vw,104px); overflow:hidden}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(32px,5vw,72px); align-items:center}
.hero .lede{color:var(--soft)}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.offer-line{margin-top:28px; font-family:var(--mono); font-size:13px; letter-spacing:.06em; color:var(--warm)}
.offer-line b{color:#fff; font-weight:500}
.hero-media{position:relative}
.hero-media img{width:100%; border-radius:6px}
.chip{position:absolute; left:16px; bottom:16px; font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--cyan); background:rgba(11,13,18,.82); border:1px solid var(--cyan); padding:7px 11px; border-radius:4px; backdrop-filter:blur(4px)}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr} .hero-media{max-width:560px} }

/* video */
.video{position:relative; aspect-ratio:16/9; background:#000 url('site-avenida.jpg') center/cover; border-radius:6px; overflow:hidden}
.video::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,13,18,.25), rgba(11,13,18,.82))}
.video .video-note{position:absolute; left:clamp(18px,3vw,36px); bottom:clamp(18px,3vw,32px); right:18px; margin:0; color:#fff; font-size:clamp(17px,1.6vw,22px); font-weight:500; display:flex; align-items:center; gap:14px}
.video .play{flex:none; width:56px; height:56px; border-radius:50%; border:1.5px solid rgba(255,255,255,.7); display:grid; place-items:center}
.video-el{position:absolute; inset:0; width:100%; height:100%; border:0; z-index:1; background:#000}

/* steps (secuencia real) */
.steps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,28px); counter-reset:s}
.step{border-top:4px solid var(--c, var(--blue)); padding-top:22px}
.step .n{font-family:var(--mono); font-size:12.5px; letter-spacing:.12em; color:var(--c); margin-bottom:14px}
.step p{color:var(--muted); margin:0}
@media (max-width:860px){ .steps{grid-template-columns:1fr} }

/* evidence case */
.case{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(20px,3vw,40px); align-items:stretch}
.case-photo{position:relative; border-radius:6px; overflow:hidden; min-height:320px}
.case-photo img{width:100%; height:100%; object-fit:cover}
.frame{position:absolute; inset:14% 18% 26% 30%; pointer-events:none}
.frame::before,.frame::after{content:""; position:absolute; width:26px; height:26px; border:2px solid var(--green)}
.frame::before{left:0; top:0; border-right:0; border-bottom:0}
.frame::after{right:0; bottom:0; border-left:0; border-top:0}
.evidence{background:var(--dark); color:#fff; border-radius:6px; padding:clamp(22px,2.4vw,32px); display:flex; flex-direction:column; gap:18px; border-top:4px solid var(--green)}
.evidence dl{margin:0; display:grid; gap:14px}
.evidence dt{font-size:12.5px; color:var(--warm)}
.evidence dd{margin:2px 0 0; font-family:var(--mono); font-size:14px}
.verified{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12.5px; letter-spacing:.08em; color:var(--green)}
.verified::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--green)}
.changes{list-style:none; padding:0; margin:28px 0 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.changes li{font-family:var(--display); font-weight:700; font-size:clamp(19px,1.6vw,23px); line-height:1.15; letter-spacing:-.01em; padding-left:16px; border-left:2px solid var(--line)}
@media (max-width:900px){ .case{grid-template-columns:1fr} .changes{grid-template-columns:1fr} }

/* hardware */
.hw{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(16px,2vw,28px)}
.hw-item img{height:96px; width:auto; object-fit:contain; margin-bottom:18px}
.hw-item h3{font:600 17px/1.3 var(--body); margin:0 0 6px}
.hw-item p{color:var(--muted); font-size:15px; margin:0}
@media (max-width:900px){ .hw{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* offer */
.offer{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,80px); align-items:end}
.offer-big{font-family:var(--display); font-weight:800; font-size:clamp(64px,10vw,168px); letter-spacing:-.045em; line-height:.86; margin:0}
.offer-big span{display:block; font-size:.32em; letter-spacing:-.02em; line-height:1.05; color:var(--soft); margin-top:14px}
.ticks{list-style:none; padding:0; margin:0 0 28px; display:grid; gap:12px}
.ticks li{display:flex; gap:12px; font-size:17px; color:#fff}
.ticks li::before{content:""; flex:none; width:16px; height:2px; background:var(--cyan); margin-top:.7em}
.price-line{font-family:var(--mono); font-size:14px; color:#fff; margin:0 0 24px}
.cupo{margin:0 0 28px}
.cupo-track{height:6px; background:rgba(255,255,255,.12); border-radius:3px; overflow:hidden}
.cupo-bar{height:100%; background:var(--cyan); width:0}
.cupo-text{font-family:var(--mono); font-size:12.5px; color:var(--warm); margin-top:8px}
@media (max-width:860px){ .offer{grid-template-columns:1fr; align-items:start} }

/* faq */
.faq{max-width:900px; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; padding:22px 44px 22px 0; position:relative; font:600 clamp(17px,1.4vw,19px)/1.35 var(--body)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:8px; top:50%; width:12px; height:12px; border-right:2px solid var(--blue); border-bottom:2px solid var(--blue); transform:translateY(-70%) rotate(45deg); transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{margin:0 0 22px; color:var(--muted); max-width:44em}

/* split: copy + form */
.split{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(32px,5vw,80px); align-items:start}
.split-copy{position:sticky; top:32px}
.split-copy p{color:var(--muted); font-size:18px}
.on-dark .split-copy p{color:var(--soft)}
.plain-list{list-style:none; padding:0; margin:24px 0 0; display:grid; gap:18px}
.plain-list li{padding-left:18px; border-left:2px solid var(--c, var(--blue))}
.plain-list b{display:block; font-weight:600; margin-bottom:2px}
.plain-list span{color:var(--muted); font-size:15.5px}
.seq{list-style:none; padding:0; margin:28px 0 0; display:grid; gap:0; counter-reset:q}
.seq li{counter-increment:q; display:grid; grid-template-columns:40px 1fr; gap:8px 14px; padding:16px 0; border-top:1px solid var(--line)}
.seq li::before{content:counter(q); grid-row:span 2; width:30px; height:30px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; font:600 14px var(--body)}
.seq b{font-weight:600}
.seq span{color:var(--muted); font-size:15.5px}
@media (max-width:960px){ .split{grid-template-columns:1fr} .split-copy{position:static} }

/* form card */
.lead{background:#fff; color:var(--ink); border:1px solid var(--border); border-radius:12px; padding:clamp(22px,3vw,40px); box-shadow:0 1px 0 rgba(28,22,18,.04), 0 24px 48px -32px rgba(28,22,18,.28)}
.lead .h3{margin-bottom:6px}
.lead .sub{color:var(--muted); margin:0 0 26px; font-size:15.5px}
.lead fieldset{border:0; padding:0; margin:0; min-width:0}
.group-title{font:600 13px var(--body); letter-spacing:.04em; color:var(--warm); text-transform:none; margin:28px 0 14px; padding-top:22px; border-top:1px solid var(--border)}
.grid2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.grid2 .full{grid-column:1/-1}
@media (max-width:560px){ .grid2{grid-template-columns:1fr} }
.f{display:flex; flex-direction:column; gap:6px}
.f label, .chips-f legend{font:600 14px/1.3 var(--body); color:var(--ink); padding:0}
.f .opt{font-weight:400; color:var(--warm)}
.f input, .f select, .f textarea{font:400 16px var(--body); color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:8px; padding:12px 14px; min-height:48px; width:100%; transition:border-color .15s, box-shadow .15s}
.f select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size:5px 5px; background-repeat:no-repeat; padding-right:40px}
.f input:focus, .f select:focus, .f textarea:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(10,102,255,.18)}
.f input::placeholder{color:#B3A99B}
.hint{font-size:13px; color:var(--warm); margin:0}
.lead .chips-f{margin-top:22px}
.chips-f legend{margin-bottom:10px}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chips label{position:relative; cursor:pointer}
.chips input{position:absolute; opacity:0; width:1px; height:1px}
.chips span{display:inline-flex; align-items:center; min-height:42px; padding:9px 16px; border:1px solid var(--line); border-radius:999px; font:500 15px var(--body); color:var(--ink); background:#fff; transition:background .12s, border-color .12s}
.chips label:hover span{border-color:var(--warm)}
.chips input:checked + span{background:rgba(10,102,255,.08); border-color:var(--blue); color:var(--blue-d)}
.chips input:focus-visible + span{outline:2px solid var(--blue); outline-offset:2px}
.qty{display:flex; align-items:stretch; max-width:220px}
.qty button{width:48px; border:1px solid var(--line); background:#fff; font:500 22px var(--body); color:var(--ink); cursor:pointer}
.qty button:first-child{border-radius:8px 0 0 8px; border-right:0}
.qty button:last-child{border-radius:0 8px 8px 0; border-left:0}
.qty input{border-radius:0 !important; text-align:center; font:600 18px var(--body) !important; -moz-appearance:textfield}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.check-f{margin-top:14px}
.check-f label{display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:var(--muted); cursor:pointer}
.check-f input{flex:none; width:20px; height:20px; margin:1px 0 0; accent-color:var(--blue)}
.check-f a{color:var(--blue-d); text-decoration:underline; text-underline-offset:2px}
.is-invalid input:not([type=radio]):not([type=checkbox]), .is-invalid select{border-color:var(--err)}
.is-invalid .chips span{border-color:var(--err)}
.err{color:var(--err); font-size:13.5px; margin:6px 0 0}
.err:empty{display:none}
.submit-row{margin-top:28px; display:flex; flex-direction:column; gap:12px}
.fine{font-size:13px; color:var(--warm); margin:0}
.status{margin:0; padding:12px 14px; border-radius:8px; background:#FFF4EE; color:var(--err); font-size:14.5px}
.status a{text-decoration:underline}
.hp{position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden}

/* post-submit steps */
.done-mark{width:56px; height:56px; border-radius:50%; border:2px solid var(--blue); display:grid; place-items:center; margin-bottom:20px; color:var(--blue)}
.cal-frame{width:100%; height:700px; border:1px solid var(--border); border-radius:8px; margin-top:18px; background:#fff}
.cal-open{display:inline-block; margin-top:10px; font-size:14px; color:var(--muted); text-decoration:underline}
.cal-fallback{font-size:17px; color:var(--muted)}
.summary{margin:22px 0; border:1px solid var(--border); border-radius:8px; overflow:hidden}
.summary div{display:grid; grid-template-columns:150px 1fr; gap:12px; padding:13px 16px; border-bottom:1px solid var(--border); font-size:15px}
.summary div:last-child{border-bottom:0}
.summary dt{color:var(--warm)}
.summary dd{margin:0; font-weight:500}
.summary .mono{font-weight:500}
@media (max-width:520px){ .summary div{grid-template-columns:1fr; gap:2px} }
.resume{background:#EEF4FF; border:1px solid #CFE0FF; border-radius:8px; padding:14px 16px; margin-bottom:22px; display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; font-size:15px}

/* legal pages */
.legal{max-width:760px}
.legal h2{font:800 26px/1.15 var(--display); letter-spacing:-.015em; margin:44px 0 12px}
.legal p, .legal li{color:var(--muted); font-size:16.5px}
.legal ul{padding-left:20px}
.draft{background:#FFF7E6; border:1px solid #F5D9A6; color:#7A4B00; border-radius:8px; padding:14px 18px; font-size:15px; margin-bottom:32px}
.todo{background:#FFF1C2; padding:0 4px; border-radius:3px; color:#6B4500}

/* footer */
.foot{background:var(--dark); color:#fff}
.foot .top{display:flex; flex-wrap:wrap; gap:24px 44px; align-items:center; padding-top:52px; padding-bottom:24px}
.foot .links{display:flex; flex-wrap:wrap; gap:24px; font-size:14px; font-weight:500; letter-spacing:.04em}
.foot .dom{font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--warm)}
.foot .bottom{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); gap:20px 48px; padding-top:22px; padding-bottom:44px; border-top:1px solid rgba(255,255,255,.08); font-size:12.5px; line-height:1.6; color:var(--warm)}
.foot .bottom a{text-decoration:underline; text-underline-offset:2px}
.foot address{font-style:normal; font-family:var(--mono); font-size:11.5px}

/* floating + test bar */
.wa-float{position:fixed; right:20px; bottom:20px; z-index:50; width:56px; height:56px; border-radius:50%; background:#1C1612; color:#fff; display:grid; place-items:center; box-shadow:0 10px 30px -10px rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.15)}
.wa-float:hover{background:var(--blue)}
.test-bar{position:sticky; top:0; z-index:60; background:#F59E0B; color:#1C1612; font:600 13.5px var(--body); padding:9px var(--pad); text-align:center}

/* logo oficial (assets/brand) + ® */
.logo{display:inline-flex; align-items:flex-start; line-height:1}
.logo img{display:block; width:auto; max-width:100%}
.reg{font-family:var(--body); font-weight:500; font-size:max(9px, .3em); line-height:1; margin-left:3px; vertical-align:top}
.logo .reg{font-size:11px}
.hero-logo{margin-bottom:22px}
.hero-logo .reg{font-size:clamp(11px,1vw,14px); margin-left:5px}
.foot .dom{display:flex; flex-wrap:wrap; gap:6px 18px}
.foot .dom a{color:#fff}

/* PRE-VENTA: botón llamativo (color EYE) */
.pv-dot{flex:none; width:10px; height:10px; border-radius:50%; background:currentColor; box-shadow:0 0 0 0 currentColor; animation:pvPulse 2.2s ease-out infinite}
@keyframes pvPulse{0%{box-shadow:0 0 0 0 rgba(11,13,18,.45)}70%{box-shadow:0 0 0 9px rgba(11,13,18,0)}100%{box-shadow:0 0 0 0 rgba(11,13,18,0)}}
.btn-presale{display:inline-flex; align-items:center; gap:14px; background:var(--cyan); color:var(--night); border-radius:10px; padding:14px 20px 14px 18px; box-shadow:0 0 0 4px rgba(0,169,199,.22), 0 18px 40px -18px rgba(0,169,199,.8); transition:background .15s, transform .15s; text-decoration:none}
.btn-presale:hover{background:#19C2DF; transform:translateY(-1px)}
.btn-presale .pv-txt{display:flex; flex-direction:column; line-height:1.05}
.btn-presale b{font-family:var(--display); font-weight:800; font-size:21px; letter-spacing:.05em}
.btn-presale small{font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; margin-top:5px; text-transform:uppercase}
.btn-presale-lg{padding:18px 24px 18px 20px}
.btn-presale-lg b{font-size:26px}
.btn-presale-lg small{font-size:12.5px}
.nav-presale{display:inline-flex; align-items:center; gap:9px; color:var(--night); background:var(--cyan); border-radius:999px; padding:10px 16px; font:700 13px/1 var(--body); letter-spacing:.1em; white-space:nowrap; box-shadow:0 0 0 3px rgba(0,169,199,.25)}
.nav-presale .pv-dot{width:7px; height:7px; animation:none}
.nav-presale:hover{background:#19C2DF}
.presale-tag{display:inline-flex; align-items:center; gap:10px; color:var(--cyan); font:600 14px var(--body); letter-spacing:.08em; margin:0 0 18px}
.presale-tag .pv-dot{width:8px; height:8px; animation:none}
.lang{font:600 13px var(--body); letter-spacing:.1em; color:#fff; opacity:.8; padding:8px 6px}
.lang:hover{opacity:1}
@media (max-width:760px){ .nav-presale{padding:7px 10px; font-size:12px} .nav .btn-sm{padding:10px 12px; font-size:14px} }
@media (max-width:420px){ .nav-presale{display:none} }
@media (prefers-reduced-motion:reduce){ .pv-dot{animation:none} }