/* ============================================================
   NUBERONA — Landing Diseño Web (Meta Ads, conversión)
   Reutiliza tokens de styles.css. Mobile-first.
   ============================================================ */

.lp { overflow-x: hidden; }

/* ---- top bar (minimal, sin nav) ---- */
.lp-bar { position: sticky; top: 0; z-index: 90; background: rgba(246,248,252,.9); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.lp-bar-in { max-width: 1080px; margin-inline: auto; padding: 14px var(--gut); display: flex; align-items: center; gap: 16px; }
.lp-bar img { height: 26px; }
.lp-bar .bar-right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.lp-bar .bar-guar { font-family: var(--f-mono); font-size: .76rem; color: var(--brand-700); display: flex; align-items: center; gap: 7px; }
.lp-bar .bar-guar::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--cloud-grad); }
.lp-bar .btn { padding: 10px 20px; font-size: .9rem; }
@media (max-width: 600px) { .lp-bar .bar-guar { display: none; } }

.lp-wrap { max-width: 1080px; margin-inline: auto; padding-inline: var(--gut); }
.lp-narrow { max-width: 780px; margin-inline: auto; padding-inline: var(--gut); }
.lp section { position: relative; }

/* ---- hero ---- */
.lp-hero { padding: clamp(44px,7vw,86px) 0 clamp(40px,6vw,70px); position: relative; overflow: hidden; }
.lp-hero .orb1 { width: 560px; height: 560px; background: #7DAEEC; top: -240px; right: -160px; opacity: .32; }
.lp-hero .orb2 { width: 420px; height: 420px; background: #B6D2F5; bottom: -200px; left: -160px; opacity: .45; }
.lp-hero-in { position: relative; z-index: 1; text-align: center; max-width: 860px; margin-inline: auto; }
.offer-pill { display: inline-flex; align-items: center; gap: 9px; font-family: var(--f-mono); font-size: .8rem; font-weight: 500; letter-spacing: .04em; padding: 9px 18px; border-radius: var(--r-pill); background: var(--surface); color: var(--brand-700); border: 1px solid var(--brand-200); box-shadow: var(--sh-sm); margin-bottom: 26px; }
.offer-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 0 4px rgba(46,204,113,.18); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 3px rgba(46,204,113,.18); } 50% { box-shadow: 0 0 0 7px rgba(46,204,113,.05); } }
.lp-hero h1 { font-size: clamp(2.3rem,6vw,4rem); line-height: 1.04; margin-bottom: 22px; }
.lp-hero h1 .text-grad { display: inline; }
.lp-hero .sub { font-size: clamp(1.1rem,2.2vw,1.45rem); color: var(--ink-600); max-width: 660px; margin: 0 auto 16px; line-height: 1.5; }
.lp-hero .sub b { color: var(--ink-900); font-weight: 700; }
.hero-cta-row { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 34px; }
.hero-cta-row .btn { box-shadow: var(--sh-glow); }
.hero-cta-row .micro { font-family: var(--f-mono); font-size: .8rem; color: var(--ink-500); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; }
.hero-cta-row .micro span { display: inline-flex; align-items: center; gap: 6px; }
.hero-cta-row .micro svg { width: 15px; height: 15px; color: var(--brand-600); }

/* trust avatars row */
.proof-row { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.avatars { display: flex; }
.avatars span { width: 38px; height: 38px; border-radius: 50%; border: 2.5px solid var(--bg); margin-left: -10px; background: var(--cloud-grad); display: grid; place-items: center; color: #fff; font-family: var(--f-display); font-weight: 700; font-size: .85rem; }
.avatars span:first-child { margin-left: 0; }
.proof-row .stars { color: #f5a623; letter-spacing: 2px; font-size: 1rem; }
.proof-row .ptxt { font-size: .88rem; color: var(--ink-600); text-align: left; }
.proof-row .ptxt b { color: var(--ink-900); }

/* hero device preview */
.hero-shot { margin: 40px auto 0; max-width: 760px; position: relative; z-index: 1; }
.hero-shot .brow { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); box-shadow: var(--sh-lg); }
.hero-shot .brow-bar { background: var(--bg); border-bottom: 1px solid var(--line); padding: 12px 16px; display: flex; align-items: center; gap: 7px; }
.hero-shot .brow-bar .d { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.hero-shot .brow-bar .url { margin-left: 12px; font-family: var(--f-mono); font-size: .72rem; color: var(--ink-400); background: var(--surface); padding: 5px 16px; border-radius: var(--r-pill); border: 1px solid var(--line); }
.hero-shot .shot-body { aspect-ratio: 16/9; background: var(--navy-800); position: relative; display: grid; place-items: center; overflow: hidden; }
.hero-shot .shot-body .ph-stripe { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 18px, transparent 18px 36px); }
.hero-shot .shot-body .ph-tag { position: relative; font-family: var(--f-mono); font-size: .82rem; color: #7d93b5; border: 1px solid rgba(255,255,255,.16); padding: 9px 18px; border-radius: var(--r-pill); }
.hero-shot .float-rate { position: absolute; right: -14px; bottom: -18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-lg); padding: 14px 18px; z-index: 3; }
.hero-shot .float-rate b { font-family: var(--f-display); font-size: 1.5rem; color: var(--brand-700); display: block; line-height: 1; letter-spacing: -.02em; }
.hero-shot .float-rate span { font-family: var(--f-mono); font-size: .72rem; color: var(--ink-500); }
@media (max-width: 540px) { .hero-shot .float-rate { right: 8px; bottom: -14px; padding: 11px 14px; } }

/* ---- generic section heads ---- */
.lp-head { text-align: center; max-width: 680px; margin: 0 auto clamp(36px,5vw,52px); }
.lp-head .eyebrow { justify-content: center; margin-bottom: 18px; }
.lp-head h2 { font-size: clamp(1.9rem,4vw,2.9rem); }
.lp-head p { margin-top: 16px; font-size: 1.1rem; color: var(--ink-600); }

/* ---- pain / problem ---- */
.pain-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; max-width: 860px; margin-inline: auto; }
@media (max-width: 640px) { .pain-grid { grid-template-columns: 1fr; } }
.pain { display: flex; gap: 14px; align-items: flex-start; padding: 20px 22px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.pain .px { width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center; background: #fdeceb; color: #d9534f; }
.pain .px svg { width: 17px; height: 17px; }
.pain p { font-size: .98rem; color: var(--ink-700); }
.pain p b { color: var(--ink-900); }

/* ---- how it works (3 steps) ---- */
.steps3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
@media (max-width: 800px) { .steps3 { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }
.s3 { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px 28px; box-shadow: var(--sh-sm); position: relative; }
.s3 .s3n { width: 50px; height: 50px; border-radius: var(--r-sm); background: var(--cloud-grad); color: #fff; display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; font-size: 1.3rem; margin-bottom: 20px; box-shadow: var(--sh); }
.s3 h3 { font-size: 1.25rem; margin-bottom: 8px; }
.s3 p { color: var(--ink-600); font-size: .98rem; }
.s3 .tag { margin-top: 14px; display: inline-flex; font-family: var(--f-mono); font-size: .74rem; color: var(--brand-700); background: var(--brand-50); border: 1px solid var(--brand-100); padding: 5px 12px; border-radius: var(--r-pill); }

/* ---- guarantee (big) ---- */
.guar { background: var(--navy-900); color: #cdd9ec; border-radius: var(--r-xl); padding: clamp(40px,6vw,72px); text-align: center; position: relative; overflow: hidden; }
.guar .orb { width: 420px; height: 420px; background: #1E5FBF; opacity: .3; top: -180px; left: 50%; transform: translateX(-50%); }
.guar-seal { width: 96px; height: 96px; margin: 0 auto 24px; border-radius: 50%; background: var(--cloud-grad); display: grid; place-items: center; color: #fff; box-shadow: var(--sh-glow); position: relative; z-index: 1; }
.guar-seal svg { width: 48px; height: 48px; }
.guar h2 { color: #fff; position: relative; z-index: 1; font-size: clamp(1.9rem,4vw,3rem); }
.guar p { color: #aebfd6; max-width: 600px; margin: 18px auto 0; position: relative; z-index: 1; font-size: 1.15rem; }
.guar .guar-points { display: flex; justify-content: center; gap: 14px 32px; flex-wrap: wrap; margin-top: 30px; position: relative; z-index: 1; }
.guar .gp { display: inline-flex; align-items: center; gap: 9px; font-family: var(--f-display); font-weight: 600; color: #fff; font-size: .98rem; }
.guar .gp svg { width: 20px; height: 20px; color: #6fd99a; }

/* ---- value stack / what you get ---- */
.value-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(30px,4vw,52px); box-shadow: var(--sh); max-width: 880px; margin-inline: auto; }
.value-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 30px; }
@media (max-width: 620px) { .value-list { grid-template-columns: 1fr; } }
.value-list li { display: flex; gap: 13px; align-items: flex-start; padding: 6px 0; }
.value-list li svg { width: 22px; height: 22px; flex: none; color: var(--brand-600); margin-top: 1px; }
.value-list li b { color: var(--ink-900); font-family: var(--f-display); font-weight: 600; }
.value-list li span { color: var(--ink-600); font-size: .92rem; display: block; }

/* ---- price ---- */
.price-box { max-width: 560px; margin: 0 auto; background: var(--surface); border: 1.5px solid var(--brand-200); border-radius: var(--r-xl); padding: clamp(32px,4vw,48px); text-align: center; box-shadow: var(--sh-lg); position: relative; overflow: hidden; }
.price-box::before { content: ""; position: absolute; inset: 0; border-radius: var(--r-xl); padding: 1.5px; background: var(--cloud-grad); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.price-anchor { font-family: var(--f-body); color: var(--ink-400); font-size: 1.05rem; }
.price-anchor s { text-decoration: line-through; }
.price-main { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 8px 0 6px; }
.price-main .amt { font-family: var(--f-display); font-weight: 800; font-size: clamp(3.4rem,9vw,5rem); color: var(--ink-900); letter-spacing: -.04em; line-height: 1; }
.price-main .cur { font-family: var(--f-display); font-weight: 700; font-size: 2rem; color: var(--ink-900); }
.price-vat { font-family: var(--f-mono); font-size: .9rem; color: var(--brand-700); margin-bottom: 6px; min-height: 22px; }
.price-when { color: var(--ink-600); font-size: 1.02rem; margin-bottom: 26px; }
.price-when b { color: var(--ink-900); }
.price-box .btn { width: 100%; }
.price-foot { font-family: var(--f-mono); font-size: .76rem; color: var(--ink-400); margin-top: 16px; display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }

/* ---- testimonials ---- */
.tst-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
@media (max-width: 860px) { .tst-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }
.tst { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--sh-sm); display: flex; flex-direction: column; }
.tst .stars { color: #f5a623; letter-spacing: 2px; margin-bottom: 14px; }
.tst p { color: var(--ink-700); font-size: 1rem; line-height: 1.6; flex: 1; }
.tst .who { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.tst .who .av { width: 44px; height: 44px; border-radius: 50%; background: var(--cloud-grad); display: grid; place-items: center; color: #fff; font-family: var(--f-display); font-weight: 700; }
.tst .who b { font-family: var(--f-display); color: var(--ink-900); font-size: .95rem; display: block; }
.tst .who span { font-family: var(--f-mono); font-size: .76rem; color: var(--ink-500); }

/* ---- urgency banner ---- */
.urg { background: var(--cloud-grad); color: #fff; border-radius: var(--r-lg); padding: 24px 30px; display: flex; align-items: center; gap: 18px; justify-content: center; flex-wrap: wrap; text-align: center; box-shadow: var(--sh-glow); }
.urg svg { width: 26px; height: 26px; flex: none; }
.urg b { font-family: var(--f-display); font-size: 1.15rem; }
.urg .spots { font-family: var(--f-mono); background: rgba(255,255,255,.18); padding: 6px 14px; border-radius: var(--r-pill); font-size: .9rem; border: 1px solid rgba(255,255,255,.28); }

/* ---- FAQ ---- */
.lp-faq { max-width: 760px; margin-inline: auto; }
.lp-faq .faq-item { border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 12px; background: var(--surface); overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.lp-faq .faq-item.open { border-color: var(--brand-200); box-shadow: var(--sh-sm); }
.lp-faq .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; text-align: left; font-family: var(--f-display); font-weight: 600; font-size: 1.05rem; color: var(--ink-900); }
.lp-faq .faq-q .pm { width: 22px; height: 22px; flex: none; position: relative; }
.lp-faq .faq-q .pm::before, .lp-faq .faq-q .pm::after { content: ""; position: absolute; background: var(--brand-600); border-radius: 2px; transition: transform .28s, opacity .28s; }
.lp-faq .faq-q .pm::before { top: 10px; left: 2px; width: 18px; height: 2px; }
.lp-faq .faq-q .pm::after { top: 2px; left: 10px; width: 2px; height: 18px; }
.lp-faq .faq-item.open .pm::after { transform: rotate(90deg); opacity: 0; }
.lp-faq .faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.lp-faq .faq-a p { padding: 0 24px 22px; color: var(--ink-600); }

/* ============================================================
   MULTI-STEP FORM
   ============================================================ */
.form-section { background: var(--navy-900); position: relative; overflow: hidden; }
.form-section .orb1 { width: 520px; height: 520px; background: #1E5FBF; opacity: .26; top: -200px; right: -140px; }
.form-section .lp-head h2 { color: #fff; }
.form-section .lp-head p { color: #aebfd6; }
.form-shell { max-width: 680px; margin-inline: auto; background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--sh-lg); overflow: hidden; position: relative; z-index: 1; }
.form-top { padding: 26px clamp(24px,4vw,40px) 0; }
.form-progress { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.form-progress .pstep { flex: 1; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.form-progress .pstep i { display: block; height: 100%; width: 0; background: var(--cloud-grad); transition: width .4s ease; }
.form-progress .pstep.done i, .form-progress .pstep.active i { width: 100%; }
.form-progress .pstep.active i { width: 50%; }
.form-step-label { font-family: var(--f-mono); font-size: .78rem; color: var(--ink-500); letter-spacing: .04em; }
.form-step-label b { color: var(--brand-700); }
.form-body { padding: 18px clamp(24px,4vw,40px) clamp(28px,4vw,40px); }
.fstep { display: none; animation: fadein .35s ease; }
.fstep.active { display: block; }
@keyframes fadein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.fstep h3 { font-size: 1.4rem; margin-bottom: 4px; }
.fstep .fsub { color: var(--ink-500); font-size: .95rem; margin-bottom: 22px; }
.lp .field { margin-bottom: 16px; }
.lp .field label { display: block; font-family: var(--f-display); font-weight: 600; font-size: .9rem; color: var(--ink-800); margin-bottom: 7px; }
.lp .field label .req { color: var(--brand-600); }
.lp .field input, .lp .field select, .lp .field textarea { width: 100%; font-family: var(--f-body); font-size: 1rem; color: var(--ink-900); padding: 14px 16px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--bg); transition: border-color .18s, box-shadow .18s, background .18s; }
.lp .field textarea { resize: vertical; min-height: 96px; }
.lp .field input:focus, .lp .field select:focus, .lp .field textarea:focus { outline: none; border-color: var(--brand-400); background: var(--surface); box-shadow: 0 0 0 3px rgba(46,114,210,.12); }
.lp .field.err input, .lp .field.err select, .lp .field.err textarea { border-color: #d9534f; box-shadow: 0 0 0 3px rgba(217,83,79,.1); }
.lp .field .msg { display: none; font-size: .8rem; color: #d9534f; margin-top: 6px; font-family: var(--f-mono); }
.lp .field.err .msg { display: block; }
.lp .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .lp .frow { grid-template-columns: 1fr; } }

/* color chips */
.color-pick { display: flex; flex-wrap: wrap; gap: 10px; }
.color-pick label { cursor: pointer; }
.color-pick input { position: absolute; opacity: 0; }
.color-pick .sw { width: 42px; height: 42px; border-radius: 11px; border: 2px solid var(--line-2); display: block; transition: transform .15s, border-color .15s; position: relative; }
.color-pick input:checked + .sw { border-color: var(--ink-900); transform: scale(1.08); }
.color-pick input:checked + .sw::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.4); }

/* file upload */
.file-drop { border: 2px dashed var(--line-2); border-radius: var(--r); padding: 26px; text-align: center; cursor: pointer; transition: border-color .2s, background .2s; background: var(--bg); }
.file-drop:hover { border-color: var(--brand-400); background: var(--brand-50); }
.file-drop input { display: none; }
.file-drop .fd-ic { width: 44px; height: 44px; margin: 0 auto 10px; border-radius: 11px; background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--brand-700); display: grid; place-items: center; }
.file-drop .fd-ic svg { width: 22px; height: 22px; }
.file-drop p { color: var(--ink-600); font-size: .92rem; }
.file-drop .fd-name { font-family: var(--f-mono); font-size: .82rem; color: var(--brand-700); margin-top: 8px; font-weight: 600; }

/* chips multi-select */
.chip-pick { display: flex; flex-wrap: wrap; gap: 10px; }
.chip-pick label { cursor: pointer; }
.chip-pick input { position: absolute; opacity: 0; }
.chip-pick .cp { display: inline-flex; align-items: center; gap: 7px; font-family: var(--f-display); font-weight: 500; font-size: .9rem; padding: 10px 16px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-700); transition: all .15s; }
.chip-pick input:checked + .cp { background: var(--brand-50); border-color: var(--brand-400); color: var(--brand-700); }
.chip-pick .cp::before { content: "+"; font-weight: 700; color: var(--ink-400); }
.chip-pick input:checked + .cp::before { content: "✓"; color: var(--brand-600); }

.consent { display: flex; gap: 12px; align-items: flex-start; margin: 8px 0 6px; }
.consent input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--brand-600); }
.consent label { font-size: .85rem; color: var(--ink-600); line-height: 1.5; }
.consent label a { color: var(--brand-700); text-decoration: underline; }
.consent.err label { color: #d9534f; }

.form-nav { display: flex; gap: 12px; margin-top: 24px; }
.form-nav .btn { flex: 1; }
.form-nav .btn-back { flex: 0 0 auto; }

/* vat live note in form */
.vat-live { font-family: var(--f-mono); font-size: .82rem; color: var(--brand-700); background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: var(--r-sm); padding: 12px 16px; margin-top: 4px; display: flex; align-items: center; gap: 10px; }
.vat-live svg { width: 18px; height: 18px; flex: none; }

/* success */
.form-success { display: none; text-align: center; padding: clamp(36px,6vw,60px) 30px; }
.form-success.show { display: block; }
.form-success .fs-ic { width: 84px; height: 84px; border-radius: 50%; background: var(--cloud-grad); color: #fff; display: grid; place-items: center; margin: 0 auto 22px; box-shadow: var(--sh-glow); }
.form-success .fs-ic svg { width: 42px; height: 42px; }
.form-success h3 { font-size: 1.8rem; margin-bottom: 10px; }
.form-success p { color: var(--ink-600); max-width: 440px; margin: 0 auto; font-size: 1.05rem; }
.form-success .next { margin-top: 24px; font-family: var(--f-mono); font-size: .85rem; color: var(--brand-700); background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: var(--r); padding: 16px 20px; display: inline-block; }

/* ---- sticky mobile CTA ---- */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -6px 24px rgba(11,42,91,.1); padding: 12px var(--gut); display: none; align-items: center; gap: 14px; }
.sticky-cta .sc-price { flex: none; }
.sticky-cta .sc-price b { font-family: var(--f-display); font-weight: 800; color: var(--ink-900); font-size: 1.2rem; display: block; line-height: 1; }
.sticky-cta .sc-price span { font-family: var(--f-mono); font-size: .68rem; color: var(--ink-500); }
.sticky-cta .btn { flex: 1; }
@media (max-width: 760px) { .sticky-cta { display: flex; } body.lp { padding-bottom: 78px; } }

/* ---- footer ---- */
.lp-foot { background: var(--navy-900); color: #7d90af; padding: 40px 0 30px; text-align: center; }
.lp-foot img { height: 26px; margin: 0 auto 16px; opacity: .9; }
.lp-foot p { font-size: .84rem; color: #6f83a3; margin-bottom: 6px; }
.lp-foot .ff-legal { display: flex; gap: 6px 18px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.lp-foot .ff-legal a { font-size: .82rem; color: #8497b6; }
.lp-foot .ff-legal a:hover { color: var(--accent-soft); }
.lp-foot .ff-fiscal { font-family: var(--f-mono); font-size: .76rem; color: #5f7398; margin-top: 12px; }