/* WebMediaTreaming.com — la web como app de compras en el celular (solo se carga en pantallas de hasta 760 px).
   Marca: tinta #150A2E · rojo #FF2D6F · azul #00A6D6 · papel #F8F6FC · sol #FFD23F. Sombras duras cortas como en el resto de la marca. */
:root{--m-bar:58px;--m-tabs:64px;--m-safe:env(safe-area-inset-bottom,0px);--m-top:env(safe-area-inset-top,0px)}
html{scroll-padding-top:calc(var(--m-bar) + 60px)}
html,body{overflow-x:clip;max-width:100%}
body{padding-bottom:calc(var(--m-tabs) + var(--m-safe));-webkit-tap-highlight-color:transparent}
body.m-has-dock{padding-bottom:calc(var(--m-tabs) + 64px + var(--m-safe))}

/* ---------- barra superior ---------- */
.promo-bar{font-size:14px;padding:8px 14px;gap:4px 10px}.promo-bar .dim{display:none}.promo-bar a{line-height:30px;font-size:12px}
body>.wrap:first-of-type,.wrap:has(>header.top){position:sticky;top:0;z-index:60;background:rgba(248,246,252,.94);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:2px solid #150A2E;padding-top:var(--m-top)}
header.top{padding:8px 0;min-height:var(--m-bar);flex-wrap:nowrap}
header.top .brand svg,header.top .brand .logo-mark{width:34px;height:auto}header.top .brand span{font-size:24px}
.burger{display:none!important}
nav.main{display:none}
nav.main.open{display:flex;position:fixed;left:12px;right:12px;bottom:calc(var(--m-tabs) + var(--m-safe) + 10px);top:auto;max-height:70vh;overflow:auto;z-index:95;box-shadow:6px 6px 0 #00A6D6;border-radius:6px}
.m-hcart{position:relative;display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;background:#fff;border:2.5px solid #150A2E;border-radius:14px;box-shadow:3px 3px 0 #00A6D6;color:#150A2E;cursor:pointer}
.m-hcart svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.m-hcart b{position:absolute;top:-8px;right:-8px;min-width:22px;height:22px;border-radius:11px;background:#FF2D6F;color:#fff;font:700 12px/22px Barlow,sans-serif;text-align:center;border:2px solid #fff}
.m-hcart b[hidden]{display:none}
.m-bump{animation:mbump .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes mbump{0%{transform:scale(1)}40%{transform:scale(1.28)}100%{transform:scale(1)}}

/* ---------- portada compacta ---------- */
.hero{padding-top:18px;gap:22px}.hero-text{gap:16px}.hero h1{font-size:clamp(44px,14vw,66px)}.hero p{font-size:18px}
.hero-art{display:none}.band{font-size:22px}
.stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}.stat{min-width:0;padding:14px!important}.stat b{font-size:clamp(30px,10vw,44px)!important}.stat span{font-size:14px!important}
.fab{display:none!important}
section{padding-top:44px!important;padding-bottom:6px}
.sec-head h2{font-size:clamp(34px,10vw,46px)}.sec-head .lead{font-size:17px}

/* ---------- categorías: carrusel horizontal ---------- */
#servicios .grid{display:grid;grid-auto-flow:column;grid-auto-columns:78%;grid-template-columns:none;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 4px 18px;margin:0 -4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
#servicios .grid::-webkit-scrollbar{display:none}
#servicios .card{scroll-snap-align:start;padding:16px;border-radius:18px;box-shadow:5px 5px 0 #150A2E}
#servicios .card .svc-img{border-radius:12px;aspect-ratio:16/10;object-fit:cover;width:100%}
#servicios .card h3{font-size:24px;margin:10px 0 4px}#servicios .card p{font-size:15px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#servicios .card .btn{width:100%;justify-content:center}

/* ---------- tienda ---------- */
#precios .sec-head .eyebrow{display:none}
#precios .tabs{position:sticky;top:calc(var(--m-bar) + 2px + var(--m-top));z-index:40;flex-wrap:nowrap;overflow-x:auto;gap:8px;margin:0 -16px 18px;padding:10px 16px;background:rgba(248,246,252,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);scrollbar-width:none}
#precios .tabs::-webkit-scrollbar{display:none}
#precios .tab{transform:none;flex:none;border-radius:999px;min-height:40px;padding:0 16px;font-size:14px;letter-spacing:.3px;text-transform:none;border-width:2px;box-shadow:none;white-space:nowrap}
#precios .tab.on{background:#150A2E;color:#fff;box-shadow:3px 3px 0 #FF2D6F}
.plans-grid{grid-template-columns:1fr!important;gap:16px!important}
.plan{padding:18px 16px 16px!important;border-radius:20px!important;box-shadow:5px 5px 0 #150A2E!important;position:relative;display:grid!important;grid-template-columns:1fr auto;grid-template-areas:"name name" "price add" "ref ref" "feat feat" "more more";column-gap:12px;align-items:end}
.plan .badge{position:absolute;top:-12px;left:16px;right:auto;transform:none;border-radius:999px;font-size:12px;padding:3px 12px}
.plan h3{grid-area:name;font-size:26px;margin:0 0 4px}
.plan .price{grid-area:price;font-size:46px!important;margin:0}
.plan .price small{font-size:15px}
.plan .usdref{grid-area:ref;margin-top:2px}
.plan ul{grid-area:feat;margin:12px 0 4px!important;font-size:15px!important;gap:6px!important;padding-left:0!important;list-style:none}
.plan ul li{padding-left:24px;position:relative}.plan ul li::before{content:"";position:absolute;left:2px;top:6px;width:12px;height:7px;border-left:2.5px solid #0B7A3B;border-bottom:2.5px solid #0B7A3B;transform:rotate(-45deg)}
.plan ul li:nth-child(n+4){display:none}
.plan.m-open ul li{display:list-item}
.plan [data-plan]{grid-area:more;margin-top:8px!important;width:100%;justify-content:center;background:#fff!important;color:#150A2E!important}
.m-add{grid-area:add;width:52px;height:52px;border-radius:16px;border:2.5px solid #150A2E;background:#FF2D6F;color:#fff;box-shadow:3px 3px 0 #150A2E;font:800 30px/1 Barlow,sans-serif;cursor:pointer;display:grid;place-items:center;align-self:center}
.m-add:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #150A2E}
.m-add.m-ok{background:#0B7A3B}
.m-more{grid-area:more;background:none;border:0;color:#00A6D6;font:600 14px Barlow,sans-serif;text-align:left;padding:4px 0 0;cursor:pointer}
.plan .m-more+[data-plan]{margin-top:10px!important}

/* ---------- barra de pestañas inferior ---------- */
.m-tabs{position:fixed;left:0;right:0;bottom:0;z-index:80;display:flex;background:#150A2E;padding:6px 6px calc(6px + var(--m-safe));border-top:3px solid #FF2D6F}
.m-tabs a,.m-tabs button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;background:none;border:0;color:#B2A3D6;font:600 11.5px Barlow,sans-serif;text-decoration:none;border-radius:12px;position:relative;cursor:pointer}
.m-tabs svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.m-tabs .on{color:#fff;background:rgba(255,255,255,.08)}.m-tabs .on svg{stroke:#FFD23F}
.m-tabs b{position:absolute;top:3px;left:calc(50% + 5px);background:#FF2D6F;color:#fff;border-radius:10px;font-size:11px;padding:0 6px;line-height:18px;border:2px solid #150A2E}
.m-tabs b[hidden]{display:none}
.m-tabs a:focus-visible,.m-tabs button:focus-visible{outline:3px solid #FFD23F;outline-offset:-3px}

/* ---------- resumen del carrito (el «recibo» flotante) ---------- */
.m-dock{position:fixed;left:10px;right:10px;bottom:calc(var(--m-tabs) + var(--m-safe) + 8px);z-index:79}
.m-dock button{width:100%;display:flex;align-items:center;gap:10px;background:#FF2D6F;color:#fff;border:2.5px solid #150A2E;border-radius:16px;box-shadow:4px 4px 0 #150A2E;padding:10px 12px 10px 14px;font:600 15px Barlow,sans-serif;cursor:pointer;text-align:left}
.m-dock-n{background:#150A2E;border-radius:10px;padding:4px 9px;font-weight:700;white-space:nowrap}
.m-dock-t{flex:1;font:800 italic 22px 'Barlow Condensed',sans-serif;letter-spacing:.3px}
.m-dock-go{background:#fff;color:#150A2E;border-radius:10px;padding:7px 12px;font-weight:700;white-space:nowrap}
.m-dock.m-in{animation:min .35s cubic-bezier(.2,1.3,.4,1)}
@keyframes min{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
body.noscroll .m-dock,body.noscroll .m-tabs,body.noscroll .m-snack{display:none!important}

/* el aviso de cookies queda por encima de las pestañas */
.ckbar{left:10px;right:10px;bottom:calc(var(--m-tabs) + var(--m-safe) + 10px);padding:12px 14px;gap:10px}.ckbar p{flex-basis:100%;font-size:14px}.ckbtns{width:100%}.ckbar button{flex:1}

/* ---------- aviso «agregado» ---------- */
.m-snack{position:fixed;left:10px;right:10px;top:calc(var(--m-bar) + var(--m-top) + 10px);z-index:96;display:flex;align-items:center;gap:10px;background:#150A2E;color:#fff;border-radius:14px;padding:12px 12px 12px 16px;box-shadow:4px 4px 0 #FF2D6F;font:500 15px Barlow,sans-serif;animation:msn .3s ease-out}
.m-snack span{flex:1}.m-snack span::before{content:"✓";display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#0B7A3B;margin-right:8px;font-weight:800}
.m-snack button{background:#FFD23F;color:#150A2E;border:0;border-radius:10px;padding:8px 12px;font:700 14px Barlow,sans-serif;cursor:pointer}
@keyframes msn{from{transform:translateY(-16px);opacity:0}to{transform:none;opacity:1}}

/* ---------- ficha de producto: hoja que sube desde abajo ---------- */
#pmodal{align-items:flex-end;padding:0}
#pmodal .modal{width:100%;max-height:92vh;border-radius:24px 24px 0 0;border:0;border-top:4px solid #150A2E;box-shadow:0 -10px 30px rgba(21,10,46,.35);padding:10px 18px 0;animation:mup .32s cubic-bezier(.2,.9,.3,1);overflow-y:auto;overscroll-behavior:contain}
@keyframes mup{from{transform:translateY(100%)}to{transform:none}}
.m-handle{display:block;width:46px;height:5px;border-radius:3px;background:#D5CBEA;margin:4px auto 10px;border:0;padding:0}
#pmodal .x{top:12px;right:12px;width:40px;height:40px;border-radius:50%}
#pmodal .pm-grid{display:block}
#pmodal .pm-img img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:16px;border:2px solid #150A2E}
#pmodal .pm-body h3{font-size:30px;margin:8px 0 4px}
#pmodal #pm-price{font-size:44px}
#pmodal #pm-feats{padding-left:0;list-style:none;font-size:16px}
#pmodal #pm-feats li{padding:6px 0 6px 26px;position:relative;border-bottom:1px solid #F1EDF8}
#pmodal #pm-feats li::before{content:"";position:absolute;left:4px;top:13px;width:12px;height:7px;border-left:2.5px solid #0B7A3B;border-bottom:2.5px solid #0B7A3B;transform:rotate(-45deg)}
#pmodal .pm-actions{position:sticky;bottom:0;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:10px;background:#fff;margin:14px -18px 0;padding:12px 18px calc(12px + var(--m-safe));border-top:2px solid #F1EDF8}
#pmodal .pm-actions .btn{width:100%;justify-content:center;transform:none;min-height:52px;border-radius:14px}
#pmodal .pm-actions #pm-wa{grid-column:1/-1;min-height:44px}
#pmodal .pm-pay,#pmodal .paystrip{font-size:13px}

/* ---------- carrito y pago: pantalla completa ---------- */
#cart{padding:0;align-items:stretch;justify-content:stretch}
#cart .drawer{width:100%;height:100%;border:0;animation:mright .3s cubic-bezier(.2,.9,.3,1)}
@keyframes mright{from{transform:translateX(100%)}to{transform:none}}
#cart .dh{position:sticky;top:0;z-index:3;background:#150A2E;color:#fff;padding:calc(12px + var(--m-top)) 16px 12px;border:0}
#cart .dh h3{color:#fff;font-size:26px}
#cart .dh .x{background:#fff;color:#150A2E;border-radius:50%;width:40px;height:40px}
#cart .db{padding:0 16px 0;display:flex;flex-direction:column}
.m-steps{display:flex;gap:6px;margin:14px 0 6px;padding:0;list-style:none;counter-reset:ms}
.m-steps li{flex:1;counter-increment:ms;font:600 12px Barlow,sans-serif;color:#877AA6;text-align:center;position:relative;padding-top:30px}
.m-steps li::before{content:counter(ms);position:absolute;top:0;left:50%;transform:translateX(-50%);width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#F1EDF8;border:2px solid #D5CBEA;color:#877AA6;font-weight:800}
.m-steps li::after{content:"";position:absolute;top:13px;left:calc(50% + 16px);right:calc(-50% + 16px);height:2px;background:#D5CBEA}
.m-steps li:last-child::after{display:none}
.m-steps li.done::before{content:"✓";background:#0B7A3B;border-color:#0B7A3B;color:#fff}.m-steps li.done::after{background:#0B7A3B}
.m-steps li.on{color:#150A2E}.m-steps li.on::before{background:#FF2D6F;border-color:#150A2E;color:#fff}
#cart .citems li{border-radius:16px;padding:12px;background:#fff;border:2px solid #150A2E;box-shadow:3px 3px 0 #150A2E;margin-bottom:10px}
#cart .qty button{width:38px;height:38px;border-radius:12px}
.m-foot{position:sticky;bottom:0;z-index:3;margin:14px -16px 0;padding:12px 16px calc(14px + var(--m-safe));background:#fff;border-top:2px solid #150A2E;box-shadow:0 -8px 20px rgba(21,10,46,.08)}
.m-foot .ctotal{margin:0 0 10px;border:0;padding:0}
.m-foot .btn{width:100%;justify-content:center;min-height:54px;border-radius:14px;transform:none}
#cart .fld input,#cart .fld select{min-height:50px;border-radius:12px;font-size:16px}
#cart .methods{gap:10px}
#cart .pay{border-radius:16px;min-height:64px;box-shadow:3px 3px 0 #150A2E}
#cart .pay:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #150A2E}
#cart .back{font-size:15px;margin-top:6px}

@media (prefers-reduced-motion:reduce){.m-bump,.m-dock.m-in,.m-snack,#pmodal .modal,#cart .drawer{animation:none!important}}
/* ajustes finos: botones sin cortes y productos del carrito ordenados */
#pmodal .pm-actions .btn span,.m-foot .btn span,#cart .db>.btn span{letter-spacing:.4px;white-space:nowrap;font-size:17px}
#pmodal .pm-actions .btn{padding:0 10px}
#pmodal .pm-img img{aspect-ratio:2/1}
#pmodal #pm-desc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:16px}
#cart .db>.btn.white{min-height:46px;border-radius:12px;transform:none;margin-top:6px}
#cart .citems li{display:grid;grid-template-columns:1fr auto auto;grid-template-areas:"t t rm" "q p p";align-items:center;gap:8px 10px}
#cart .citems li .ci-t{grid-area:t;min-width:0}#cart .citems li .ci-t b{font-size:17px}
#cart .citems li .qty,#cart .citems li>span{grid-area:q;justify-self:start}
#cart .citems li .ci-p{grid-area:p;justify-self:end;font-size:22px}
#cart .citems li .rm{grid-area:rm;align-self:start;width:34px;height:34px;border-radius:50%;background:#F8F6FC;border:2px solid #D5CBEA;color:#B42318;font-size:20px;line-height:1}
#servicios .card .from{font-size:15px}#servicios .card .from b{font-size:26px}
#pmodal .pm-actions{grid-template-columns:1fr 1fr;gap:8px 10px}
#pmodal .pm-actions .btn{min-width:0}
#pmodal .pm-actions #pm-add{grid-column:1/-1;order:-1;background:#FF2D6F;min-height:54px}
#pmodal .pm-actions #pm-buy{background:#150A2E;color:#fff;min-height:46px}
#pmodal .pm-actions #pm-wa{grid-column:auto;min-height:46px}
#pmodal .pm-actions #pm-buy span,#pmodal .pm-actions #pm-wa span{font-size:14px;white-space:normal;line-height:1.1}
/* ---------- menú «Más» (hoja propia, fuera de la barra superior) ---------- */
.m-menu{position:fixed;inset:0;z-index:120;background:rgba(21,10,46,.62);display:flex;align-items:flex-end}
.m-menu[hidden]{display:none}
.m-menu-sheet{width:100%;max-height:90vh;overflow-y:auto;overscroll-behavior:contain;background:#F8F6FC;border-radius:24px 24px 0 0;border-top:4px solid #150A2E;animation:mup .3s cubic-bezier(.2,.9,.3,1);padding-bottom:calc(18px + var(--m-safe))}
.m-menu-h{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;background:#150A2E;color:#fff;padding:14px 18px;border-radius:20px 20px 0 0}
.m-menu-h h2{margin:0;font:800 italic 28px 'Barlow Condensed',sans-serif;text-transform:uppercase;color:#fff}
.m-menu-x{width:40px;height:40px;border-radius:50%;border:0;background:#fff;color:#150A2E;font-size:24px;line-height:1;cursor:pointer}
.m-menu-b{padding:6px 16px}
.m-menu-b h3{font:600 15px Barlow,sans-serif;color:#52476B;margin:18px 2px 10px}
.m-accs{display:grid;gap:10px}
.m-acc{display:grid;grid-template-columns:44px 1fr;grid-template-areas:"i b" "i s";align-items:center;column-gap:12px;background:#fff;border:2.5px solid #150A2E;border-radius:16px;box-shadow:3px 3px 0 #00A6D6;padding:12px 14px;text-decoration:none;color:#150A2E}
.m-acc i{grid-area:i;font-style:normal;font-size:26px;width:44px;height:44px;display:grid;place-items:center;background:#F1EDF8;border-radius:12px}
.m-acc b{grid-area:b;font-size:18px}.m-acc span{grid-area:s;font-size:14px;color:#52476B}
.m-acc:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #00A6D6}
.m-acc.me{grid-template-columns:1fr;grid-template-areas:"b" "s";background:#150A2E;color:#fff;box-shadow:3px 3px 0 #FF2D6F}.m-acc.me span{color:#FFD23F;font-weight:600}
.m-join{display:block;margin:12px 2px 0;color:#FF2D6F;font-weight:700;text-decoration:none}
.m-secs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.m-secs a{display:flex;align-items:center;min-height:50px;padding:0 14px;background:#fff;border:2px solid #D5CBEA;border-radius:14px;color:#150A2E;font-weight:600;text-decoration:none}
.m-secs a:active{border-color:#150A2E}
.m-prefs{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.m-prefs .langs{display:flex;gap:8px}.m-prefs .langs a{min-width:48px;min-height:44px;display:grid;place-items:center;background:#fff;border:2px solid #D5CBEA;border-radius:12px}
.m-prefs .langs a.on{border-color:#150A2E;box-shadow:2px 2px 0 #150A2E}
.m-prefs .cursel select{min-height:46px;border-radius:12px;border:2px solid #150A2E;padding:0 12px;font:600 16px Barlow,sans-serif;background:#fff}
.m-menu a:focus-visible,.m-menu button:focus-visible{outline:3px solid #00A6D6;outline-offset:2px}
.m-menu-b h3{text-transform:none;letter-spacing:0;font-style:normal}
.m-prefs .langs{border:0!important;padding:0!important;box-shadow:none!important;background:none!important}
.m-out{display:inline-block;margin:10px 2px 0;color:#52476B;font-weight:600}

/* marca: nombre largo */
header.top .brand span{font-size:17px!important;letter-spacing:-.4px}header.top .brand svg,header.top .brand .logo-mark{width:28px!important}