/* =====================================================================
   v15 · Tarjetas con cabecera de mini-componente, seleccionadas en violeta
   profundo · Portada como estudio de desarrollo en vivo
   ===================================================================== */
:root{--deep:#1e1035;--lime-2:#a3e635;--html:#e34f26;--css:#1572b6;--wa:#25d366;--ok:#16a34a}

/* ---------- 1 · Estado seleccionado: violeta profundo, borde lima, botón lima ---------- */
#deal .svc14.is-picked,#deal .svc14.is-picked .svc-bg{background:var(--deep)}
#deal .svc14.is-picked{color:#fff;border:2px solid var(--lime-2);box-shadow:0 2px 4px #1e103526,0 18px 40px #1e103540}
#deal .svc14.is-picked h3,#deal .svc14.is-picked .service-label{color:#fff}
#deal .svc14.is-picked p{color:#d9cff0}
#deal .svc14.is-picked .svc-note{color:#bfb3d9}
#deal .svc14.is-picked .svc-add,#deal .svc14 .svc-add[aria-pressed=true]{background:var(--lime-2);border-color:var(--lime-2);color:var(--ink)}
#deal .svc14.is-picked .svc-ui{background:#2a1a4a;border-color:#ffffff1f}

/* ---------- Cabecera tipo mini-componente ---------- */
.svc-ui{position:relative;height:118px;margin:0 0 22px;border-radius:16px;background:#f7f3fd;border:1px solid #e7ddf6;overflow:visible}
.svc-ui .ui{position:absolute;inset:12px 12px 22px;border-radius:10px;overflow:hidden}
.badges{position:absolute;right:10px;bottom:-12px;display:flex;gap:6px;z-index:2}
.bdg{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:8px;font:700 12px/1.1 var(--mono);color:#fff;box-shadow:0 4px 10px #1a0b4526;white-space:nowrap}
.bdg svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.b-html{background:var(--html)}.b-css{background:var(--css)}
.b-wa{background:var(--wa);color:#073b1d}.b-wa svg{fill:#fff;stroke:#073b1d}
.b-ssl{background:var(--ok)}.b-cl{background:#fff;color:var(--ink);border:1.5px solid #12101f26}
.b-search{background:#fff;color:#1a56db;border:1.5px solid #1a56db40}.b-maps{background:#ea4335}
.b-ai{background:linear-gradient(135deg,#8a52ff,#5a1fe0)}
.b-pdf{background:#d93025}

/* Página web: código | diseño */
.ui-web{display:grid;grid-template-columns:1fr 1fr;background:#fff;border:1px solid #e7ddf6}
.uw-code{background:#1a1230;padding:10px;display:grid;gap:6px;align-content:start}
.uw-code i{display:block;height:5px;border-radius:3px}
.uw-code .c1{width:60%;background:#ff8a65}.uw-code .c2{width:82%;margin-left:10%;background:#7dd3fc}.uw-code .c3{width:48%;margin-left:10%;background:#c6ff3d}
.uw-code .c4{width:70%;margin-left:20%;background:#f0abfc}.uw-code .c5{width:40%;background:#ff8a65}
.uw-design{padding:10px;display:grid;gap:6px;align-content:start}
.uw-design i{display:block;border-radius:3px;background:#e7ddf6}
.uw-design .d-nav{height:5px;width:40%}.uw-design .d-h{height:9px;width:85%;background:#12101f}
.uw-design .d-btn{height:9px;width:38%;border-radius:99px;background:var(--violeta)}
.uw-design span{display:grid;grid-template-columns:1fr 1fr;gap:5px}.uw-design span i{height:14px}

/* Catálogo: tarjeta de producto */
.ui-shop{display:flex;align-items:center;gap:12px;padding:10px;background:#fff;border:1px solid #e7ddf6}
.us-thumb{width:62px;height:62px;flex-shrink:0;border-radius:10px;background:linear-gradient(135deg,#f6c9a9,#e3896c)}
.us-info{flex:1;display:grid;gap:6px}.us-info i{display:block;height:6px;border-radius:3px;background:#12101f;width:80%}.us-info i.short{width:55%;background:#d9cfee}
.us-price{justify-self:start;padding:3px 7px;border-radius:6px;background:#fff3c4;color:#7a4b00;font:700 12px var(--mono)}
.us-btn{display:inline-flex;align-items:center;gap:4px;padding:6px 9px;border-radius:99px;background:var(--wa);color:#073b1d;font:700 11px Outfit,sans-serif}
.us-btn svg{width:12px;height:12px;fill:#fff;stroke:#073b1d;stroke-width:2}

/* Dominio: barra segura + correo */
.ui-dom{display:grid;align-content:center;gap:8px;padding:10px;background:#fff;border:1px solid #e7ddf6}
.ud-bar{display:flex;align-items:center;gap:6px;padding:7px 10px;border-radius:99px;background:#f1f5f2;border:1px solid #cfe7d6;font:600 12px var(--mono);color:#1f2a24;white-space:nowrap;overflow:hidden}
.ud-bar b{color:var(--violeta)}
.ud-lock{width:14px;height:14px;fill:none;stroke:var(--ok);stroke-width:2.2;stroke-linecap:round;flex-shrink:0}
.ud-mail{display:flex;align-items:center;gap:6px;font:500 12px var(--mono);color:#5d5670;white-space:nowrap;overflow:hidden}
.ud-mail svg{width:14px;height:14px;fill:none;stroke:var(--violeta);stroke-width:2;flex-shrink:0}

/* SEO: resultado destacado */
.ui-seo{display:grid;align-content:center;gap:4px;padding:10px 12px;background:#fff;border:1px solid #e7ddf6}
.useo-url{font:500 11px var(--mono);color:#3c6e47}
.useo-t{font:600 15px/1.2 Arial,sans-serif;color:#1a0dab}
.useo-stars{font-size:12px;color:#f4b400;letter-spacing:1px}
.ui-seo i{display:block;height:5px;border-radius:3px;background:#e2dcea;width:92%}.ui-seo i.short{width:60%}

/* Redacción: audio → texto */
.ui-copy{display:flex;align-items:center;gap:8px;padding:10px;background:#fff;border:1px solid #e7ddf6}
.uc-audio{display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:14px 14px 14px 4px;background:#dcf8c6}
.uc-audio svg{width:14px;height:14px;fill:#128c4a}
.uc-wave{display:flex;align-items:center;gap:2px}.uc-wave i{display:block;width:3px;border-radius:2px;background:#128c4a}
.uc-wave i:nth-child(odd){height:14px}.uc-wave i:nth-child(even){height:8px}.uc-wave i:nth-child(3n){height:18px}
.uc-arrow{font:700 16px var(--mono);color:var(--violeta)}
.uc-text{flex:1;display:grid;gap:5px;padding:8px;border-radius:8px;background:#f7f3fd}
.uc-text i{display:block;height:5px;border-radius:3px;background:#cdbff0}.uc-text i.h{height:8px;width:70%;background:#12101f}.uc-text i.short{width:55%}

/* PDF: catálogo editorial */
.ui-pdf{display:flex;justify-content:center;align-items:center;gap:4px;padding:8px;background:linear-gradient(135deg,#efe9fb,#fff)}
.up-page{width:78px;height:76px;padding:7px;border-radius:4px;background:#fff;box-shadow:0 4px 10px #1a0b451f;display:grid;gap:5px;align-content:start}
.up-page:first-child{transform:rotate(-3deg)}.up-page:last-child{transform:rotate(3deg)}
.up-page i{display:block;height:4px;border-radius:2px;background:#d9cfee}.up-page i.short{width:60%}
.up-page i.img{height:28px;background:linear-gradient(135deg,#8a52ff,#c6ff3d)}.up-page i.img.small{height:18px}

/* ---------- 2 · Portada: estudio de desarrollo en vivo ---------- */
.lp-url{display:inline-flex;align-items:center;gap:4px}
.lp-url svg{width:10px;height:10px;fill:none;stroke:#3ddc84;stroke-width:2.4}
.studio14{display:grid;grid-template-columns:46% 54%;background:#120c22}
.st-code{position:relative;padding:2.6cqw 2.4cqw;background:#120c22;border-right:1px solid #2a2140;overflow:hidden}
.st-tabs{display:flex;gap:1.2cqw;margin-bottom:2cqw}
.st-tabs span{font:500 1.7cqw var(--mono);color:#8f84ab;padding:.6cqw 1.2cqw;border-radius:.8cqw}
.st-tabs span.on{background:#241a3d;color:#fff}
.st-lines{list-style:none;margin:0;padding:0;display:grid;gap:1.25cqw}
.cl{display:flex;gap:1.6cqw;font:500 1.7cqw/1.35 var(--mono);color:#e9e4f7;white-space:nowrap}
.cl .ln{color:#5d5379;flex-shrink:0}
.cl code{font:inherit;overflow:hidden;text-overflow:clip}
.t-tag{color:#ff8a65}.t-at{color:#c6ff3d}.t-st{color:#7dd3fc}.t-sel{color:#f0abfc}.t-cm{color:#7f7699}
.cl.is-on{background:linear-gradient(90deg,#6c2bff33,transparent);border-radius:.6cqw}
.st-caret{position:absolute;left:0;top:0;width:.4cqw;height:2.2cqw;background:#c6ff3d;opacity:0}
.st-prev{position:relative;display:flex;flex-direction:column;gap:1.8cqw;padding:2.6cqw 2.8cqw;background:#fbfaff;color:#12101f;overflow:hidden}
.st-live{display:inline-flex;align-items:center;gap:.8cqw;align-self:flex-start;padding:.5cqw 1.2cqw;border-radius:99px;background:#efe8ff;color:#4a17c9;font:600 1.5cqw var(--mono)}
.st-live i,.chip14 i{display:block;width:1cqw;height:1cqw;border-radius:50%;background:#16a34a;box-shadow:0 0 0 .4cqw #16a34a33}
.sp-nav{display:flex;justify-content:space-between;align-items:center}
.sp-nav b{font:800 2.4cqw Outfit,sans-serif}.sp-nav b span{color:var(--violeta)}
.sp-links{display:flex;gap:1cqw}.sp-links i{display:block;width:3.6cqw;height:.7cqw;border-radius:1cqw;background:#d9cfee}
.sp-hero{display:grid;gap:1cqw}
.sp-hero small{font:600 1.3cqw var(--mono);letter-spacing:.06em;color:var(--violeta)}
.sp-hero b{font:800 4.4cqw/1.02 Outfit,sans-serif;letter-spacing:-.03em}
.sp-line{display:block;height:.8cqw;border-radius:1cqw;background:#ddd4ee;width:90%}.sp-line.short{width:62%}
.sp-wa{display:inline-flex;align-items:center;gap:.8cqw;align-self:flex-start;padding:1.1cqw 2cqw;border-radius:99px;background:var(--wa);color:#073b1d;font:700 1.8cqw Outfit,sans-serif}
.sp-wa svg{width:2cqw;height:2cqw;fill:#fff;stroke:#073b1d;stroke-width:2}
.sp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2cqw}.sp-cards i{display:block;height:6cqw;border-radius:1.2cqw;background:#efe8ff;border:1px solid #e1d6f6}
.sp-chips{display:flex;flex-wrap:wrap;gap:.9cqw;margin-top:auto}
.chip14{display:inline-flex;align-items:center;gap:.7cqw;padding:.7cqw 1.2cqw;border-radius:1.2cqw;background:#fff;border:1px solid #e1d6f6;font:600 1.4cqw var(--mono);color:#12101f;transition:background .4s,border-color .4s,color .4s}
.chip14 i{background:#b9b2c7;box-shadow:none;transition:background .4s,box-shadow .4s}
.chip14.is-on{border-color:#a7e3bd;background:#effbf3;color:#0f5132}
.chip14.is-on i{background:#16a34a;box-shadow:0 0 0 .4cqw #16a34a33}
.chip-speed em{display:inline-flex;gap:.3cqw;align-items:flex-end;font-style:normal}
.chip-speed em b{display:block;width:.5cqw;border-radius:.2cqw;background:#cfc8dc}
.chip-speed em b:nth-child(1){height:.8cqw}.chip-speed em b:nth-child(2){height:1.2cqw}.chip-speed em b:nth-child(3){height:1.6cqw}.chip-speed em b:nth-child(4){height:2cqw}
.chip-speed.is-on em b{background:#16a34a}
/* Celular: la misma página, adaptada */
.studio14-ph{background:#fbfaff}
.php{height:100%;box-sizing:border-box;display:flex;flex-direction:column;gap:5cqw;padding:12cqw 7cqw 7cqw;color:#12101f}
.php .sp-nav b{font-size:8cqw}.php .sp-links i{width:9cqw;height:2cqw}.php .sp-links i:nth-child(n+2){display:none}
.php .sp-hero small{font-size:4.6cqw}.php .sp-hero b{font-size:12cqw}.php .sp-line{height:2.4cqw}
.php .sp-wa{font-size:6cqw;padding:3.4cqw 6cqw;gap:2cqw}.php .sp-wa svg{width:6cqw;height:6cqw}
.php .sp-cards{grid-template-columns:1fr 1fr;gap:3cqw}.php .sp-cards i{height:16cqw;border-radius:3cqw}.php .sp-cards i:nth-child(3){display:none}
.php-chips{display:flex;gap:2.4cqw;margin-top:auto}.php .chip14{font-size:4.8cqw;padding:2cqw 3cqw;border-radius:3cqw;gap:2cqw}.php .chip14 i{width:3cqw;height:3cqw}
.hero12 .rubro-tabs{display:none}