/* ===== Formulario de pedido NFD Web — estética premium/tech ===== */
html{overflow-x:clip}
body.ped{min-height:100vh;background:#07080f;overflow-x:hidden}
.ped [data-lucide],.ped svg.lucide{width:1.1em;height:1.1em;stroke-width:2;vertical-align:-.18em}

/* fondo aurora animado */
.aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.aurora i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;animation:float 18s ease-in-out infinite alternate}
.aurora i:nth-child(1){width:520px;height:520px;background:#5b3cff;top:-160px;left:-120px}
.aurora i:nth-child(2){width:460px;height:460px;background:#00c2ff;bottom:-180px;right:-120px;animation-delay:-6s;opacity:.35}
.aurora i:nth-child(3){width:340px;height:340px;background:#b6ff3b;top:40%;left:55%;animation-delay:-12s;opacity:.18}
@keyframes float{0%{transform:translate(0,0) scale(1)}50%{transform:translate(60px,40px) scale(1.15)}100%{transform:translate(-40px,80px) scale(.95)}}
.gridbg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse at 50% 20%,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at 50% 20%,#000 30%,transparent 75%)}

/* barra superior */
.ptop{display:flex;align-items:center;gap:20px;padding:16px 18px;max-width:1180px;margin:0 auto}
.prog{flex:1;display:flex;align-items:center;gap:12px}
.prog .bar{flex:1;height:6px;background:rgba(255,255,255,.08);border-radius:9px;overflow:hidden}
.prog .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#6c5cff,#00c2ff,#d4af5f);box-shadow:0 0 14px #6c5cff;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.prog span{font-size:.78rem;color:var(--muted);white-space:nowrap;font-weight:700;letter-spacing:.02em}

.pill{display:inline-flex;align-items:center;gap:7px;font-size:.75rem;font-weight:700;letter-spacing:.04em;color:#cfd3ff;background:rgba(108,92,255,.14);border:1px solid rgba(155,140,255,.3);padding:6px 12px;border-radius:999px;margin-bottom:14px}
.pill.ok{color:#d4af5f;background:rgba(212,175,95,.1);border-color:rgba(212,175,95,.35)}
.mut{display:block;color:var(--muted);font-size:.85rem;margin-top:12px}
.btn-glow{position:relative;box-shadow:0 0 0 0 rgba(212,175,95,.6);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(212,175,95,.45)}70%{box-shadow:0 0 0 16px rgba(212,175,95,0)}100%{box-shadow:0 0 0 0 rgba(212,175,95,0)}}

/* ===== intro ===== */
.intro{display:none;max-width:1180px;margin:0 auto;padding:30px 18px 60px;grid-template-columns:1fr 1.1fr;gap:40px;align-items:center}
.intro.on{display:grid}
.intro h1{font-size:clamp(2.3rem,6vw,3.8rem);font-weight:800;line-height:1.04;letter-spacing:-.03em;margin-bottom:16px}
.intro p{color:var(--muted);font-size:1.08rem;max-width:480px}
.shine{background:linear-gradient(90deg,#f5e1a5,#d4af5f,#fff3c4,#d4af5f,#f5e1a5);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s linear infinite}
@keyframes shine{to{background-position:300% 0}}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:26px 0}
.stats div{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:14px 10px;text-align:center;backdrop-filter:blur(10px)}
.stats b{display:block;font-size:1.6rem;font-weight:800;background:linear-gradient(90deg,#fff,#d4af5f);-webkit-background-clip:text;background-clip:text;color:transparent}
.stats small{color:var(--muted);font-size:.75rem}
.carousel{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);padding:30px 0}
.track{display:flex;gap:26px;width:max-content;animation:marquee 32s linear infinite}
.carousel:hover .track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.cphone{flex:0 0 220px;height:450px;border-radius:34px;background:#05060c;padding:8px;box-shadow:0 30px 60px -20px rgba(91,60,255,.55),0 0 0 1px rgba(255,255,255,.12);position:relative;transition:transform .4s}
.cphone:nth-child(even){transform:translateY(26px)}
.cphone .scr{width:100%;height:100%;border-radius:27px;overflow:hidden;position:relative;background:#fff}
.cphone .scr{display:block}
.cphone img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.cphone span{position:absolute;bottom:-34px;left:0;right:0;text-align:center;font-size:.78rem;color:var(--muted);font-weight:600}
@media(max-width:900px){
  .intro.on{grid-template-columns:1fr;padding-top:10px;gap:10px}
  .carousel{order:-1;padding:14px 0 40px}
  .cphone{flex-basis:170px;height:350px;border-radius:28px}
  .cphone .scr{border-radius:22px}
}

/* ===== layout pasos ===== */
.playout{max-width:1180px;margin:0 auto;padding:6px 18px 120px;display:grid;grid-template-columns:400px 1fr;gap:56px;align-items:start}
.playout[hidden]{display:none}
.steps{max-width:620px;width:100%}
.step{display:none}
.step.on{display:block;animation:slide .45s cubic-bezier(.2,.8,.2,1)}
.step.on.backwards{animation-name:slideb}
@keyframes slide{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes slideb{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
.q{font-size:clamp(1.7rem,4.6vw,2.4rem);font-weight:800;letter-spacing:-.025em;margin-bottom:8px}
.hint{color:var(--muted);margin:4px 0 18px;font-size:.95rem}
.h3s{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:22px 0 4px}
.lock{color:var(--muted);font-size:.8rem;text-align:center;margin-top:12px}

/* campos */
.fld{display:block;margin-bottom:14px}
.fld span{display:block;font-weight:700;margin-bottom:7px;font-size:.9rem}
.in{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.1);border-radius:16px;padding:0 16px;transition:border .2s,box-shadow .2s;backdrop-filter:blur(10px)}
.in:focus-within{border-color:#9b8cff;box-shadow:0 0 0 4px rgba(108,92,255,.2)}
.in>svg{color:var(--muted)}
.in em{font-style:normal;color:var(--muted);font-weight:700}
.in input{flex:1;background:none;border:0;outline:0;color:var(--text);font:600 1.1rem var(--font);padding:17px 0;min-width:0}
.err{color:#ff7a7a;font-size:.9rem;min-height:1.2em;margin-bottom:8px}

/* tarjetas vidrio */
.cards{display:grid;gap:10px;margin:12px 0 14px}
.c1{grid-template-columns:1fr}.c2{grid-template-columns:repeat(2,1fr)}.c3{grid-template-columns:repeat(3,1fr)}.c4{grid-template-columns:repeat(4,1fr)}
@media(max-width:560px){.c3,.c4{grid-template-columns:repeat(2,1fr)}}
.opt{position:relative;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:18px 10px;cursor:pointer;color:var(--text);font:600 .92rem var(--font);text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:104px;backdrop-filter:blur(12px);transition:transform .18s,border-color .2s,background .2s,box-shadow .2s;overflow:hidden;animation:pop .4s backwards}
.opt::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,0%),rgba(155,140,255,.25),transparent 60%);opacity:0;transition:opacity .25s}
.opt:hover{transform:translateY(-3px);border-color:rgba(155,140,255,.45)}
.opt:hover::before{opacity:1}
.opt:active{transform:scale(.96)}
.opt .ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(108,92,255,.35),rgba(0,194,255,.18));border:1px solid rgba(255,255,255,.12);color:#fff}
.opt .ic svg{width:22px;height:22px}
.opt small{color:var(--muted);font-weight:500;font-size:.8rem}
.opt.sel{border-color:transparent;background:linear-gradient(#141833,#141833) padding-box,linear-gradient(135deg,#6c5cff,#00c2ff,#d4af5f) border-box;border:1.5px solid transparent;box-shadow:0 10px 30px -10px rgba(108,92,255,.7)}
.opt.sel .ic{background:linear-gradient(135deg,#6c5cff,#00c2ff)}
.opt.sel::after{content:"";position:absolute;top:9px;right:9px;width:20px;height:20px;border-radius:50%;background:#d4af5f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310131f' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.97)}}
.opt.extra{display:none}.show-more .opt.extra{display:flex}
.c1 .opt{flex-direction:row;justify-content:flex-start;text-align:left;min-height:auto;padding:18px;gap:16px}
.c1 .opt div{display:flex;flex-direction:column}
.ico .opt{min-height:92px;font-size:.8rem;padding:12px 6px;gap:8px}
.ico .opt .ic{width:38px;height:38px;border-radius:12px}
.ico .opt .ic svg{width:18px;height:18px}
.pal .opt{min-height:auto;padding:12px;gap:8px}
.sw{display:flex;width:100%;height:46px;border-radius:12px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.sw i{flex:1;transition:flex .3s}.opt:hover .sw i:nth-child(2){flex:2}
.more{display:flex;align-items:center;gap:6px;margin:0 auto 18px;background:none;border:1px dashed rgba(255,255,255,.2);color:#cfd3ff;font:600 .85rem var(--font);padding:9px 16px;border-radius:999px;cursor:pointer}
.more:hover{border-color:#9b8cff}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px}
.chip{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:10px 16px;color:var(--text);font:600 .88rem var(--font);cursor:pointer;transition:all .18s}
.chip:hover{border-color:rgba(155,140,255,.5)}
.chip.sel{background:linear-gradient(135deg,#6c5cff,#4a8bff);border-color:transparent;box-shadow:0 6px 20px -6px rgba(108,92,255,.8)}
.chips.sm .chip{padding:6px 12px;font-size:.78rem}
.sub{margin:16px 0}
.sub h3{font-size:1rem;display:flex;align-items:center;gap:8px}
.sub h3 small{color:var(--muted);font-weight:500}

/* torneo */
.vs-wrap{position:relative}
.duel{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0}
.vs{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:#07080f;border:1.5px solid rgba(255,255,255,.2);display:grid;place-items:center;font-weight:800;font-size:.8rem;color:#d4af5f;box-shadow:0 0 24px rgba(108,92,255,.6);pointer-events:none}
.sty{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:10px;cursor:pointer;color:var(--text);font:700 .95rem var(--font);transition:transform .25s,border-color .2s,box-shadow .25s;animation:pop .35s backwards}
.sty:hover{transform:translateY(-6px) rotate(-.5deg);border-color:#d4af5f;box-shadow:0 20px 40px -18px rgba(212,175,95,.5)}
.sty .mk{height:210px;border-radius:14px;margin-bottom:10px;overflow:hidden;padding:14px;display:flex;flex-direction:column;gap:7px;text-align:left}
.sty .mk b{font-size:1.05rem;line-height:1.1}
.sty .mk i{display:block;height:7px;border-radius:4px;opacity:.5}
.sty .mk u{display:block;height:24px;width:60%;border-radius:6px;margin-top:auto}
.sty .mk .ph{height:70px;border-radius:10px;opacity:.85}
.mk.minimal{background:#fff;color:#111}.mk.minimal i{background:#999;width:80%}.mk.minimal u{background:#111;border-radius:0}.mk.minimal .ph{background:#eee;border-radius:0}
.mk.elegante{background:#f5efe6;color:#3b2f22;font-family:'Playfair Display',serif}.mk.elegante i{background:#b59a74;width:70%}.mk.elegante u{background:#3b2f22;border-radius:0}.mk.elegante .ph{background:linear-gradient(135deg,#e2d3bd,#b59a74);border-radius:0}
.mk.colorido{background:linear-gradient(135deg,#ff5fa2,#ffb443);color:#fff}.mk.colorido i{background:#fff;width:75%}.mk.colorido u{background:#2b1bff;border-radius:20px}.mk.colorido .ph{background:rgba(255,255,255,.35);border-radius:20px}
.mk.moderno{background:#0e1020;color:#fff;font-family:'Space Grotesk',sans-serif}.mk.moderno i{background:#6c5cff;width:85%}.mk.moderno u{background:#c6ff4d;border-radius:8px}.mk.moderno .ph{background:linear-gradient(135deg,#6c5cff,#00c2ff)}
.mk.calido{background:#fff4ea;color:#5a2d0c}.mk.calido i{background:#e8935a;width:70%}.mk.calido u{background:#e2683c;border-radius:14px}.mk.calido .ph{background:linear-gradient(135deg,#ffd2b0,#e2683c)}
.mk.natural{background:#eef3ea;color:#24412b}.mk.natural i{background:#8fb38a;width:65%}.mk.natural u{background:#3f6b47;border-radius:20px}.mk.natural .ph{background:linear-gradient(135deg,#cfe0c9,#3f6b47);border-radius:30px 30px 10px 10px}

/* final */
.resumen{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.resumen span{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:6px 12px;font-size:.8rem;color:#cfd3ff;animation:pop .3s backwards}
.launch{display:flex;align-items:center;gap:12px;background:linear-gradient(90deg,rgba(212,175,95,.12),rgba(0,194,255,.08));border:1px solid rgba(212,175,95,.35);border-radius:16px;padding:14px 16px;margin:16px 0 4px;font-size:.92rem}
.launch:empty{display:none}
.launch b{color:#d4af5f}
.slots{display:flex;gap:4px;margin-left:auto}
.slots i{width:10px;height:22px;border-radius:3px;background:#d4af5f}.slots i.off{background:rgba(255,255,255,.15)}
.fplans{display:grid;gap:10px}
.fp{display:flex;justify-content:space-between;align-items:center;gap:10px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:16px;cursor:pointer;text-align:left;color:var(--text);font-family:var(--font);transition:all .2s;backdrop-filter:blur(10px)}
.fp:hover{border-color:rgba(155,140,255,.5)}
.fp.sel{background:linear-gradient(#141833,#141833) padding-box,linear-gradient(135deg,#6c5cff,#00c2ff,#d4af5f) border-box;border:1.5px solid transparent;box-shadow:0 14px 40px -14px rgba(108,92,255,.8)}
.fp b{display:block;font-size:1rem}
.fp small{color:var(--muted);font-size:.78rem}
.fp .pr{text-align:right;font-weight:800;white-space:nowrap}
.fp .pr s{display:block;color:var(--muted);font-weight:500;font-size:.78rem}
.fp .pr small{display:block;font-weight:600}
.fp .rec{display:inline-block;background:#d4af5f;color:#10131f;font-size:.66rem;font-weight:800;padding:2px 8px;border-radius:999px;margin-left:6px;vertical-align:middle}
.gift{display:flex;gap:10px;align-items:center;font-size:.88rem;color:#cfd3ff;margin:14px 2px 0}
.gift:empty{display:none}
.fgar{display:flex;gap:12px;align-items:flex-start;background:rgba(108,92,255,.1);border:1px solid rgba(155,140,255,.3);border-radius:16px;padding:16px;margin:14px 0;font-size:.9rem;color:var(--muted)}
.fgar>svg{color:#d4af5f;flex:0 0 auto;width:22px;height:22px}
.fgar b{color:var(--text)}
.extra{margin:4px 0 6px;font-size:.92rem}
.extra summary{cursor:pointer;color:#cfd3ff;font-weight:600;display:flex;align-items:center;gap:8px;list-style:none;padding:8px 0}
.extra summary small{color:var(--muted);font-weight:500}
.extra textarea{width:100%;margin-top:8px;background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.1);border-radius:14px;color:var(--text);font:500 .95rem var(--font);padding:12px;resize:vertical;outline:0}
.extra textarea:focus{border-color:#9b8cff}
.tyc{display:flex;gap:10px;align-items:center;margin:10px 0 14px;font-size:.95rem;cursor:pointer}
.tyc input{width:22px;height:22px;accent-color:#d4af5f}
#pagar[disabled]{opacity:.4;cursor:not-allowed;animation:none;box-shadow:none}
.paynote{font-size:.83rem;color:var(--muted);text-align:center;margin:8px 0}
.link{background:none;border:0;color:#9b8cff;font:700 .95rem var(--font);cursor:pointer;padding:12px 0;display:block;margin:0 auto}
.link.sm{font-size:.85rem;margin:0}
.nav-b{display:flex;justify-content:space-between;align-items:center;margin-top:18px}
.back{background:none;border:0;color:var(--muted);font:600 .95rem var(--font);cursor:pointer;padding:10px 0;display:flex;align-items:center;gap:6px}

/* ===== vista previa ===== */
.pv-wrap{position:sticky;top:18px}
.pv-tools{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.live{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;color:#cfd3ff;letter-spacing:.03em}
.live i{width:8px;height:8px;border-radius:50%;background:#ff4d6d;box-shadow:0 0 0 0 rgba(255,77,109,.7);animation:rec 1.6s infinite}
@keyframes rec{70%{box-shadow:0 0 0 8px rgba(255,77,109,0)}100%{box-shadow:0 0 0 0 rgba(255,77,109,0)}}
.seg{display:flex;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:3px}
.seg button{background:none;border:0;color:var(--muted);padding:6px 10px;border-radius:7px;cursor:pointer}
.seg button.on{background:rgba(108,92,255,.4);color:#fff}
.device{background:#05060c;box-shadow:0 40px 90px -30px rgba(91,60,255,.7),0 0 0 1px rgba(255,255,255,.14);transition:all .5s cubic-bezier(.2,.8,.2,1);margin:0 auto;overflow:hidden;position:relative}
.device.m{width:300px;height:610px;border-radius:42px;padding:10px}
.device.d{width:100%;height:420px;border-radius:14px;padding:0}
.dbar{display:none;align-items:center;gap:6px;padding:9px 12px;background:#141726}
.device.d .dbar{display:flex}
.dbar i{width:9px;height:9px;border-radius:50%;background:#ff5f57}.dbar i:nth-child(2){background:#febc2e}.dbar i:nth-child(3){background:#28c840}
.dbar span{margin-left:10px;flex:1;background:#0b0d17;color:var(--muted);font-size:.7rem;padding:4px 10px;border-radius:6px}
.device .pv{height:100%;border-radius:32px;overflow:hidden}
.device.d .pv{height:calc(100% - 33px);border-radius:0}
.pv{--p1:#6c5cff;--p2:#ffffff;--p3:#14162b;--ff:'Plus Jakarta Sans',sans-serif;--rad:16px;background:var(--p2);color:var(--p3);transition:background .5s,color .5s;font-family:var(--ff);position:relative}
.pv-scroll{animation:autoscroll 22s ease-in-out infinite;animation-delay:2s}
.pv-wrap:hover .pv-scroll{animation-play-state:paused}
@keyframes autoscroll{0%,12%{transform:translateY(0)}50%,62%{transform:translateY(var(--sh,-40%))}100%{transform:translateY(0)}}
.pv h1,.pv h2,.pv h4{font-family:var(--ff)}
.x-nav{display:flex;justify-content:space-between;align-items:center;padding:20px 16px 10px;font-weight:800;font-size:.95rem}
.x-nav .lk{display:none;gap:12px;font-size:.62rem;font-weight:600;opacity:.7}
.x-nav .mb{font-size:.62rem;background:var(--p1);color:#fff;padding:5px 10px;border-radius:999px}
.x-hero{padding:6px 16px 18px}
.x-img{height:180px;border-radius:var(--rad);background:linear-gradient(135deg,var(--p1),color-mix(in srgb,var(--p1) 30%,var(--p2)));display:grid;place-items:center;margin-bottom:14px;position:relative;overflow:hidden;transition:background .5s}
.x-img::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-100%);animation:sheen 4s infinite}
@keyframes sheen{60%,100%{transform:translateX(100%)}}
.x-img svg{width:64px;height:64px;color:#fff;stroke-width:1.5;filter:drop-shadow(0 6px 14px rgba(0,0,0,.2))}
.x-hero h4{font-size:1.35rem;line-height:1.12;font-weight:800;margin-bottom:6px;min-height:1.2em}
.x-hero h4 .cur{display:inline-block;width:2px;height:1em;background:var(--p1);vertical-align:-.12em;margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.x-hero p{font-size:.78rem;opacity:.7;margin-bottom:12px}
.x-btn{display:inline-flex;align-items:center;gap:6px;background:var(--p1);color:#fff;font-weight:700;font-size:.78rem;padding:10px 15px;border-radius:999px;transition:background .5s}
.x-sec{padding:14px 16px}
.x-sec h5{font-size:.85rem;margin-bottom:8px;font-family:var(--ff)}
.x-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.x-cards div{border-radius:10px;padding:10px 6px;background:color-mix(in srgb,var(--p1) 10%,var(--p2));font-size:.6rem;text-align:center;font-weight:600}
.x-cards div svg{width:16px;height:16px;color:var(--p1);display:block;margin:0 auto 4px}
.x-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.x-gal i{aspect-ratio:1;border-radius:8px;background:linear-gradient(135deg,color-mix(in srgb,var(--p1) 55%,var(--p2)),color-mix(in srgb,var(--p1) 15%,var(--p2)))}
.x-quote{border-left:3px solid var(--p1);padding:8px 10px;font-size:.66rem;opacity:.8;background:color-mix(in srgb,var(--p1) 6%,var(--p2));border-radius:0 8px 8px 0}
.x-faq div{font-size:.66rem;padding:8px 0;border-bottom:1px solid color-mix(in srgb,var(--p3) 12%,transparent);display:flex;justify-content:space-between}
.x-cta{margin:10px 16px 16px;padding:18px;border-radius:var(--rad);background:var(--p1);color:#fff;text-align:center;font-size:.8rem;font-weight:700}
.x-foot{text-align:center;font-size:.58rem;opacity:.5;padding:10px 0 24px}
.x-wa{position:absolute;right:12px;bottom:14px;width:38px;height:38px;border-radius:50%;background:#25d366;display:grid;place-items:center;color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.25);z-index:2}
.x-wa svg{width:18px;height:18px}
.device.d .x-nav .lk{display:flex}
.device.d .x-hero{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:center;padding:10px 24px 20px}
.device.d .x-hero .x-img{order:2;height:170px;margin:0}
.device.d .x-cards{grid-template-columns:repeat(3,1fr)}
.device.d .x-gal{grid-template-columns:repeat(6,1fr)}
/* estilos sobre la vista previa */
.pv.st-elegante{--ff:'Playfair Display',serif;--rad:0px}.pv.st-elegante .x-btn{border-radius:0}
.pv.st-moderno{--ff:'Space Grotesk',sans-serif;--rad:12px}.pv.st-moderno .x-btn{border-radius:8px}
.pv.st-minimal{--rad:0px}.pv.st-minimal .x-btn{border-radius:0}
.pv.st-colorido{--rad:28px}
.pv.st-natural{--rad:36px}
.pv-open{display:none}

.modal{position:fixed;inset:0;z-index:100;background:rgba(5,6,12,.85);backdrop-filter:blur(10px);display:grid;place-items:center;padding:16px}
.modal[hidden]{display:none}
.modal-in{position:relative}
.modal .device.big{width:min(340px,88vw);height:min(690px,82vh)}
.modal .x{position:absolute;top:-14px;right:-14px;z-index:3;width:38px;height:38px;border-radius:50%;border:0;background:#fff;color:#111;cursor:pointer;display:grid;place-items:center}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:90;width:100%;height:100%}

@media(max-width:900px){
  .playout{grid-template-columns:1fr;gap:14px}
  .pv-wrap{position:sticky;top:0;z-index:20;margin:0 -18px;padding:8px 18px 10px;background:rgba(7,8,15,.82);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.06)}
  .pv-wrap.hide-m{display:none}
  .pv-tools{display:none}
  .pv-wrap .device{display:none}
  .pv-open{display:flex;width:100%;align-items:center;gap:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:8px;color:var(--text);font:700 .85rem var(--font);cursor:pointer;text-align:left}
  .pv-open .mini{width:54px;height:54px;border-radius:12px;flex:0 0 54px;display:grid;place-items:center;color:#fff;transition:background .5s}
  .pv-open .mini svg{width:26px;height:26px}
  .pv-open .t{flex:1;min-width:0}
  .pv-open .t b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pv-open .t small{color:var(--muted);font-weight:600;display:flex;align-items:center;gap:6px}
  .pv-open .t small i{width:7px;height:7px;border-radius:50%;background:#ff4d6d;animation:rec 1.6s infinite}
  .pv-open .go{font-size:.75rem;color:#d4af5f;white-space:nowrap}
  .sty .mk{height:160px}.sty .mk .ph{height:48px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.stats small{display:block;margin-top:4px;color:var(--text);font-size:.82rem;line-height:1.35;opacity:.85}