/* ============================================================================
   tienda-skin.css — XpGo "Dark Cinema" (referencia cuentas.com.co)
   Cargar DESPUÉS de index-nova.css. Igualamos especificidad de los selectores
   originales (misma cascada, carga posterior => gana la piel).
   Paleta: fondo #121212 · texto #FAF9F6 · gris #9E9E9E · rojo #C11119
           granate #700005 · superficies #FAF9F610 · bordes #FAF9F60A-14
   ¡NO reintroducir backdrop-filter (bug 'XpGo e33')!
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@400;500;700&family=Manrope:wght@400;500;600;700;800&display=swap');

/* ---------- CAPA 1 · VARIABLES SEMÁNTICAS (invierten ~45 utilidades) ------ */
:root{
  --background:0 0% 7%;            /* #121212 */
  --foreground:45 29% 97%;         /* #FAF9F6 */
  --card:0 0% 10%;
  --card-foreground:45 29% 97%;
  --popover:0 0% 9%;
  --popover-foreground:45 29% 97%;
  --primary:357 84% 41%;           /* #C11119 */
  --primary-foreground:45 29% 97%;
  --secondary:0 0% 13%;
  --secondary-foreground:45 29% 97%;
  --muted:0 0% 15%;
  --muted-foreground:0 0% 62%;     /* #9E9E9E */
  --accent:357 100% 22%;           /* #700005 */
  --accent-foreground:45 29% 97%;
  --destructive:0 72% 51%;
  --destructive-foreground:0 0% 98%;
  --border:0 0% 16%;
  --input:0 0% 18%;
  --ring:357 84% 47%;
  --radius:.75rem;
}
html{background:#121212}
body{background-color:hsl(var(--background));color:hsl(var(--foreground));font-family:Manrope,Quicksand,system-ui,-apple-system,sans-serif}

/* ---------- Preflight / base ---------------------------------------------- */
*,:before,:after{--tw-ring-offset-color:#121212;--tw-ring-color:rgb(193 17 25/.5)}
::backdrop{--tw-ring-offset-color:#121212;--tw-ring-color:rgb(193 17 25/.5)}
input::placeholder,textarea::placeholder{color:#8a8a8a;opacity:1}
::selection{background:#C11119;color:#FAF9F6}
::-webkit-scrollbar-thumb{background:#3a3a3a}
::-webkit-scrollbar-thumb:hover{background:#4d4d4d}
::-webkit-scrollbar-track{background:#161616}

/* ---------- Identidad tipográfica: titulares condensados gigantes --------- */
.font-display{font-family:"Bebas Neue",Oswald,"Arial Narrow",Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.03em}
h1.font-display,h2.font-display{line-height:1.08}
h2.font-display.text-2xl,h2.font-display.text-3xl,h2.font-display.text-4xl,h2.font-display.md\:text-3xl{font-size:clamp(2.1rem,4.2vw,3.4rem)}

/* ---------- Utilidades white/* re-pisadas por el tema claro --------------- */
.border-white\/5{border-color:rgba(255,255,255,.06)}
.border-white\/10{border-color:rgba(255,255,255,.1)}
.border-white\/30{border-color:rgba(255,255,255,.3)}
.hover\:border-white\/25:hover{border-color:rgba(255,255,255,.25)}
.divide-white\/5>:not([hidden])~:not([hidden]){border-color:rgba(255,255,255,.06)}
.divide-white\/10>:not([hidden])~:not([hidden]){border-color:rgba(255,255,255,.1)}
.bg-white\/10{background-color:rgba(255,255,255,.1)}
.hover\:bg-white\/5:hover{background-color:rgba(255,255,255,.05)}
.hover\:bg-white\/\[0\.03\]:hover{background-color:rgba(255,255,255,.03)}

/* ---------- Colores de estado re-aclarados (emerald=éxito, no marca) ------ */
.text-emerald-400{color:#34d399}
.hover\:text-emerald-400:hover{color:#34d399}
.hover\:text-emerald-300:hover{color:#6ee7b7}
.text-amber-400{color:#fbbf24}
.hover\:text-amber-400:hover{color:#fbbf24}
.text-rose-400{color:#fb7185}
.text-rose-300{color:#fda4af}
.hover\:text-rose-400:hover{color:#fb7185}
.hover\:text-rose-300:hover{color:#fda4af}
.text-sky-400{color:#38bdf8}

/* ---------- Overrides scoped (misma especificidad que el tema claro) ------ */
.mp-ficha .divide-white\/5>:not([hidden])~:not([hidden]){border-color:rgba(255,255,255,.06)}
.mp-ficha .border-white\/10{border-color:rgba(255,255,255,.1)}
.mp-ficha .border-white\/30{border-color:rgba(255,255,255,.3)}
.mp-ficha .text-emerald-400{color:#34d399}
.mp-ficha .text-rose-400{color:#fb7185}
.mp-ficha .text-amber-400{color:#fbbf24}
.mp-ficha .bg-amber-500\/10{background-color:rgba(245,158,11,.12)}

.mp-panel .border-white\/10,.mp-panel .border-white\/5{border-color:rgba(255,255,255,.08)}
.mp-panel .divide-white\/5>:not([hidden])~:not([hidden]){border-color:rgba(255,255,255,.06)}
.mp-panel .hover\:bg-white\/5:hover{background-color:rgba(255,255,255,.05)}
.mp-panel .hover\:bg-white\/\[0\.03\]:hover{background-color:rgba(255,255,255,.03)}
.mp-panel .bg-white\/10{background-color:rgba(255,255,255,.1)}
.mp-panel .text-emerald-400{color:#34d399}
.mp-panel .text-amber-400{color:#fbbf24}
.mp-panel .text-rose-400{color:#fb7185}
.mp-panel .text-rose-300{color:#fda4af}
.mp-panel .text-sky-400{color:#38bdf8}
.mp-panel .bg-emerald-500\/20{background-color:rgba(16,185,129,.2)}
.mp-panel .bg-amber-500\/20{background-color:rgba(245,158,11,.2)}
.mp-panel .bg-rose-500\/20,.mp-panel .bg-rose-500\/15{background-color:rgba(244,63,94,.18)}
.mp-panel .bg-sky-500\/20{background-color:rgba(14,165,233,.2)}

.mp-compra .border-white\/10{border-color:rgba(255,255,255,.1)}
.mp-compra .hover\:bg-white\/5:hover{background-color:rgba(255,255,255,.05)}
.mp-compra .hover\:text-rose-400:hover{color:#fb7185}

/* ---------- Sombras / brillos --------------------------------------------- */
.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0/.45),0 4px 6px -4px rgb(0 0 0/.45);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}
.hover\:shadow-\[0_20px_60px_-20px_rgba\(59\,130\,246\,0\.35\)\]:hover{--tw-shadow:0 20px 60px -20px rgba(193,17,25,.45);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}
.glow-blue{box-shadow:0 0 60px -12px rgba(193,17,25,.55)}
.bg-black\/60{background-color:rgba(0,0,0,.7)}

/* ---------- Gradientes de marca -> rojo cinematográfico ------------------- */
.bg-gradient-to-br.from-primary.to-accent,.bg-gradient-to-r.from-primary.to-accent{background:linear-gradient(105deg,#C11119,#700005)}
.text-gradient{background:linear-gradient(to right,#FAF9F6,#ff5a60);-webkit-background-clip:text;background-clip:text;color:transparent}
/* (.mp-bc-band .text-gradient blanco: especificidad 0,2,0 del original, no lo pisa) */

/* ---------- Glass (sin blur: bug 'XpGo e33') ------------------------------ */
.glass{background:rgba(250,249,246,.05);border:1px solid rgba(250,249,246,.08);box-shadow:0 2px 10px rgba(0,0,0,.35);backdrop-filter:none}
.glass-strong{background:rgba(250,249,246,.08);border:1px solid rgba(250,249,246,.1);box-shadow:0 4px 22px rgba(0,0,0,.45);backdrop-filter:none}
.mp-footer .glass{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);box-shadow:none;color:#b5b1a9}

/* ============================ HERO (tz-*) ================================= */
.tz-hero{position:relative;overflow:hidden;background:#0c0c0c;color:#FAF9F6}
/* collage sustituido por degradado negro->granate + retícula CSS de "pósters" */
.tz-hero::before{content:"";position:absolute;inset:0;width:auto;height:auto;border:0;border-radius:0;pointer-events:none;z-index:1;background-position:center top;background-size:cover;background-repeat:no-repeat;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="140" viewBox="0 0 200 140"><g fill="none" stroke="%23FAF9F6" stroke-opacity=".14" stroke-width="11" stroke-linecap="round"><path d="M30 78 A100 100 0 0 1 170 78"/><path d="M58 100 A62 62 0 0 1 142 100"/><path d="M86 121 A26 26 0 0 1 114 121"/></g><circle cx="100" cy="134" r="7" fill="%23FAF9F6" fill-opacity=".16"/></svg>') no-repeat top 26px center/150px auto,repeating-linear-gradient(90deg,rgba(250,249,246,.04) 0 1px,transparent 1px 96px),repeating-linear-gradient(0deg,rgba(250,249,246,.035) 0 1px,transparent 1px 140px),radial-gradient(closest-side at 18% 28%,rgba(193,17,25,.16),transparent),radial-gradient(closest-side at 82% 65%,rgba(112,0,5,.4),transparent)}
.tz-hero::after{content:"";position:absolute;inset:0;z-index:1;width:auto;height:auto;border:0;border-radius:0;transform:none;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.35) 42%,rgba(112,0,5,.62) 100%)}
.tz-hero-int{position:relative;z-index:2}
.tz-hero-h1{font-family:"Bebas Neue",Oswald,"Arial Narrow",Impact,sans-serif;font-weight:400;text-transform:uppercase;color:#FAF9F6}
.xg-hero-h1{text-transform:uppercase;line-height:1}
.xg-kicker{font-size:clamp(1.35rem,2.6vw,2.25rem);letter-spacing:.08em;color:#FAF9F6}
.xg-mega{font-size:clamp(4rem,10.5vw,7.5rem);line-height:.95;letter-spacing:.015em;color:#FAF9F6}
.xg-sub{font-size:clamp(1.1rem,2vw,1.6rem);letter-spacing:.16em;color:#FAF9F6;opacity:.92}
.tz-hero-p{color:#b9b6b0}
.tz-verde{color:#ff5a60}
.xg-btn-hero{display:inline-block;margin-top:26px;background:#C11119;color:#FAF9F6;font-family:"DM Sans",Manrope,sans-serif;font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:.05em;padding:18px 28px;border-radius:10px;border:1px solid #C11119;transition:all .5s;box-shadow:0 12px 34px rgba(193,17,25,.35)}
.xg-btn-hero:hover{background:#FAF9F6;border-color:#FAF9F6;color:#C11119}
/* tarjetas flotantes del hero */
.tz-carta{background:#1c1c1c;border:1px solid rgba(250,249,246,.08);box-shadow:0 18px 50px rgba(0,0,0,.6)}
.tz-carta-txt b{color:#FAF9F6}
.tz-carta-txt i{color:#9E9E9E}
.tz-btn-verde{background:#C11119;color:#FAF9F6;box-shadow:0 12px 30px rgba(193,17,25,.35)}
.tz-btn-verde:hover{background:#FAF9F6;color:#C11119}

/* ============================ BANDAS / SECCIONES ========================== */
.mp-hero{background:linear-gradient(105deg,#1a0203,#700005);color:#fff}
.mp-hero-search{background:#1a1a1a;box-shadow:0 18px 44px rgba(0,0,0,.55)}
.mp-hero-search-ico{color:#8a8a8a}
.mp-hero-input{color:#f1efe9}
.mp-hero-input::placeholder{color:#8a8a8a}
.mp-hero-btn{background:#C11119;color:#FAF9F6}
.mp-hero-btn:hover{background:#FAF9F6;color:#C11119}
.mp-hero-out:hover{background:#FAF9F6;color:#C11119}
.mp-cta{background:linear-gradient(105deg,#000000,#5c0004);box-shadow:0 24px 60px rgba(0,0,0,.5)}
.mp-cta a.bg-primary{background:#FAF9F6;color:#C11119}
.mp-cta a.bg-primary:hover{background:#ffffff;color:#C11119}
.mp-banda-grad,.mp-banda-marcas,.mp-cat-band{background:linear-gradient(105deg,#0d0d0d 0%,#45000699 60%,#700005 100%),#121212}
.mp-banda-gris{background:#171717}
.mp-prop-a{background:linear-gradient(135deg,#2a0002,#700005)}
.mp-prop-b{background:linear-gradient(135deg,#700005,#C11119)}
.mp-prop-btn:hover{background:#FAF9F6;color:#C11119}

/* ============================ BUSCADORES / FILTROS ======================== */
.mp-busca-caja{background:#1a1a1a;border:1px solid rgba(250,249,246,.08);box-shadow:0 30px 60px rgba(0,0,0,.55)}
.mp-busca-caja::before{background:rgba(255,255,255,.06)}
.mp-busca-caja::after{background:rgba(255,255,255,.04)}
.mp-busca-form{border-color:rgba(255,255,255,.1)}
.mp-busca-in{background:#1a1a1a;color:#f1efe9}
.mp-busca-in::placeholder{color:#8a8a8a}
.mp-busca-sel{background:#232323;color:#c9c5be}
.mp-busca-sel:focus{background:#C11119;color:#fff}
.mp-busca-btn{background:#C11119;color:#FAF9F6;transition:all .5s}
.mp-busca-btn:hover{background:#FAF9F6;color:#C11119}
.mp-cat-search{background:#1a1a1a;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.mp-cat-search-ico{color:#8a8a8a}
.mp-cat-search input{color:#f1efe9;background:transparent}
.mp-cat-search input::placeholder{color:#8a8a8a}
.mp-cat-filter{background:#1a1a1a;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.mp-cat-select{background:#1a1a1a;border-color:rgba(255,255,255,.12);color:#c9c5be}
.mp-cat-chip{color:#9E9E9E}
.mp-cat-chip:hover{color:#ff5a60}
.mp-cat-chip-on{background:#C11119;color:#FAF9F6}
.mp-filtro-grupo{border-color:rgba(255,255,255,.08)}
.mp-filtro-grupo h4{color:#8a8a8a}
.mp-filtro-fila input{accent-color:#C11119}
.mp-filtro-eti{color:#c9c5be}
.mp-filtro-fila:hover .mp-filtro-eti{color:#ff5a60}
.mp-filtro-n{color:#9E9E9E;background:#232323}

/* ============================ TARJETAS DE PRODUCTO ======================== */
.mp-card{background:rgba(250,249,246,.06);border:1px solid rgba(250,249,246,.05);border-radius:10px;box-shadow:0 0 4px -2px rgba(172,172,172,.5)}
.mp-card:hover{box-shadow:0 14px 40px rgba(0,0,0,.55),0 0 0 1px rgba(193,17,25,.35)}
.mp-card-thumb{border-color:rgba(255,255,255,.07)}
.mp-card-foot{border-color:rgba(255,255,255,.07)}
.mp-card-title{color:#FAF9F6;font-family:"DM Sans",Manrope,sans-serif;font-weight:700}
.mp-card-title:hover{color:#ff5a60}
.mp-card-meta{color:#ff6a70}
.mp-card-seller,.mp-card-ship{color:#9E9E9E}
.mp-card-desc{color:#9E9E9E}
.mp-card-old{color:#7f7f7f}
.mp-rating-count{color:#9E9E9E}
.mp-card-off{background:#C11119;color:#FAF9F6}
.mp-card-tag{background:#1f1f1f;color:#d6d3cd}
.mp-card-price,.mp-precio{background:rgba(193,17,25,.14);color:#FAF9F6}
.mp-btn-round{background:#C11119;color:#FAF9F6}
.mp-btn-round:hover{background:#700005}
.mp-dest-card{background:#1a1a1a;border:1px solid rgba(250,249,246,.07);box-shadow:0 14px 40px rgba(0,0,0,.5)}
.mp-dest-card:hover{box-shadow:0 22px 55px rgba(0,0,0,.65)}
.mp-dest-precio{background:rgba(193,17,25,.16);color:#ff8a8f}
.mp-dest-desc{background:#700005;color:#FAF9F6}
.mp-dest-flecha{background:#232323;border-color:rgba(255,255,255,.1);color:#c9c5be}
.mp-dest-flecha:hover{background:#C11119;border-color:#C11119;color:#fff}
.mp-feature .w-10{background:rgba(193,17,25,.15)}

/* ============================ FICHA / PRECIOS / PILLS ===================== */
.mp-price-box{background:#1a1a1a;border:1px solid rgba(250,249,246,.07);box-shadow:0 12px 34px rgba(0,0,0,.5)}
.mp-price-val{color:#FAF9F6}
.mp-price-old{color:#7f7f7f}
.mp-pricing-options li{color:#c9c5be;border-color:rgba(255,255,255,.1)}
.mp-pricing-opt{color:#f1efe9}
.mp-radio-circle{border-color:#C11119;background:#181818}
.mp-btn-pill{box-shadow:0 8px 20px rgba(0,0,0,.45)}
.mp-btn-pill-o{color:#FAF9F6;border-color:#FAF9F6}
.mp-btn-pill-o:hover{background:#C11119;border-color:#C11119;color:#FAF9F6}
.mp-btn-lleno{background:#C11119;color:#FAF9F6;transition:all .5s}
.mp-btn-lleno:hover{background:#FAF9F6;color:#C11119}
.mp-solo-md{background:#C11119!important}

/* ============================ PANEL DE USUARIO ============================ */
.mp-stat{border:1px solid rgba(255,255,255,.08)}
.mp-stat-sky{background:rgba(14,165,233,.12);border-color:rgba(14,165,233,.28);color:#38bdf8}
.mp-stat-green{background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.28);color:#34d399}
.mp-stat-amber{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.28);color:#fbbf24}
.mp-stat-red{background:rgba(244,63,94,.12);border-color:rgba(244,63,94,.28);color:#fb7185}
.mp-stat-slate{background:rgba(148,163,184,.1);border-color:rgba(148,163,184,.25);color:#cbd5e1}
.mp-stat-label{color:#9E9E9E}
.mp-stat-on{border-color:#C11119;box-shadow:0 0 0 3px rgba(193,17,25,.2)}
.mp-panel .mp-sumcard{color:inherit;border:1px solid rgba(255,255,255,.08);box-shadow:none}
.mp-panel .mp-sumcard.mp-stat-sky{border-color:rgba(14,165,233,.3)}
.mp-panel .mp-sumcard.mp-stat-green{border-color:rgba(16,185,129,.3)}
.mp-panel .mp-sumcard.mp-stat-amber{border-color:rgba(245,158,11,.3)}
.mp-panel .mp-sumcard.mp-stat-red{border-color:rgba(244,63,94,.3)}
.mp-panel .mp-sumcard .mp-sumcard-ico{background:rgba(255,255,255,.08);color:inherit;box-shadow:none}
.mp-panel .mp-sumcard .text-muted-foreground{color:#a3a3a3}
.mp-panel .mp-sumcard .text-emerald-400{color:#34d399}
.mp-side-item{color:#a8a8a8}
.mp-side-item:hover{color:#ff5a60;background:rgba(193,17,25,.08)}
.mp-side-on{background:rgba(193,17,25,.14);color:#ff6a70}
.mp-thead,.mp-movs-head{background:#1b1b1b;color:#9E9E9E;border-bottom-color:rgba(255,255,255,.08)}

/* ============================ AUTH / FORMULARIOS ========================== */
.mp-auth-card{background:#181818;border-color:rgba(255,255,255,.08);box-shadow:0 20px 50px rgba(0,0,0,.5)}
.mp-auth-head{border-color:rgba(255,255,255,.08)}
.mp-auth-head h1,.mp-auth-head h2{color:#FAF9F6}
.mp-auth-head p{color:#9E9E9E}
.mp-field{background:#101010;border-color:rgba(255,255,255,.12)}
.mp-field:focus-within{border-color:#C11119;box-shadow:0 0 0 3px rgba(193,17,25,.18)}
.mp-input{background:#101010;border-color:rgba(255,255,255,.12);color:#f1efe9}
.mp-input:focus{border-color:#C11119;box-shadow:0 0 0 3px rgba(193,17,25,.18)}
.mp-sum-title{border-color:rgba(255,255,255,.08)}
.mp-sum-total{color:#FAF9F6}

/* ============================ CABECERA / MENÚS ============================ */
.mp-h-ico{color:#c9c5be}
.mp-h-ico:hover{color:#ff5a60}
.mp-h-num{box-shadow:0 0 0 2px #121212}
.mp-h-dot{box-shadow:0 0 0 2px #121212}
.mp-menu-item{color:#c9c5be}
.mp-menu-item:hover{color:#ff5a60;background:rgba(193,17,25,.1)}
.mp-panelito{background:#181818;border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 60px rgba(0,0,0,.6)}
.mp-panelito-cab{border-color:rgba(255,255,255,.08)}
.mp-panelito-cab b{color:#FAF9F6}
.mp-panelito-cab a{color:#ff5a60}
.mp-panelito-vacio{color:#9E9E9E}
.mp-panelito-fila{border-color:rgba(255,255,255,.06)}
.mp-panelito-fila:hover{background:rgba(255,255,255,.04)}
.mp-panelito-ava{background:#242424}
.mp-panelito-txt b{color:#FAF9F6}
.mp-panelito-txt span{color:#9E9E9E}
.mp-panelito-txt i{color:#7f7f7f}
.mp-tabschips{background:#181818;border-color:rgba(255,255,255,.08);box-shadow:0 2px 10px rgba(0,0,0,.4)}
.mp-tabs-bar{border-color:rgba(255,255,255,.08)}
.mp-tab2{color:#a8a8a8}
.mp-tab2:hover{color:#ff5a60;border-color:#C11119}
.mp-tab2-on{background:#C11119;border-color:#C11119;color:#fff}
.mp-tab2-on:hover{background:#a90e15;border-color:#a90e15;color:#fff}
.mp-chip{border-color:rgba(255,255,255,.12);color:#a8a8a8}
.mp-chip:hover{color:#ff5a60;border-color:#C11119}

/* ============================ BURBUJAS / CHAT SOPORTE ===================== */
.mp-burbuja-in{background:rgba(250,249,246,.08);border-color:rgba(250,249,246,.14);color:#efece5}
.mp-burbuja-in .text-muted-foreground,.mp-burbuja-in .opacity-60{color:#b5b1a9}
.am-fondo{background:radial-gradient(60% 50% at 20% 10%,rgba(193,17,25,.14),transparent 70%),radial-gradient(50% 40% at 85% 80%,rgba(112,0,5,.28),transparent 70%)}
.am-marco{background:linear-gradient(180deg,#251518 0%,#1c1214 100%);border:1px solid rgba(193,17,25,.45);box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(193,17,25,.12),0 18px 55px rgba(193,17,25,.22)}
.am-cab{background:linear-gradient(105deg,#1a0203,#700005)}
.am-tab-on{background:#FAF9F6;color:#C11119}
.am-burbuja{background:rgba(250,249,246,.07);border-color:rgba(250,249,246,.12);color:#f1efe9}
.am-burbuja-mia{background:#C11119;border-color:#C11119;color:#fff}
.am-input{background:#101010;color:#f1efe9}
.am-input:focus{border-color:#C11119;background:rgba(193,17,25,.08)}
.am-enviar{background:linear-gradient(145deg,#C11119,#700005);box-shadow:0 10px 25px rgba(193,17,25,.35)}
.am-nota{color:#8a8a8a}
.am-sug{border-color:rgba(255,255,255,.08)}
.am-sug:hover{background:rgba(193,17,25,.1)}
.am-sug-ico{color:#ff5a60}
.am-chip{background:#232323;color:#c9c5be;border-color:rgba(255,255,255,.12)}
.am-chip-on{background:rgba(193,17,25,.18);color:#ff6a70;border-color:rgba(193,17,25,.45)}
.am-resp-chip{background:#1d1d1d;border-color:rgba(193,17,25,.35);color:#ff6a70}
.am-resp-chip:hover{background:rgba(193,17,25,.15)}
.am-tarjeta{background:#1c1c1c;border-color:rgba(255,255,255,.08);box-shadow:0 14px 34px rgba(0,0,0,.5)}
.am-tarjeta:hover{border-color:rgba(193,17,25,.4)}
.am-tarjeta-tit{color:#FAF9F6}
.am-tarjeta-txt{color:#9E9E9E}

/* ============================ MODAL DE PAGO (nsft) ======================== */
.nsft-capa{background:rgba(5,5,5,.72)}
.nsft-caja{background:#181818;color:#f1efe9;border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 80px rgba(0,0,0,.7)}
.nsft-tit{color:#FAF9F6}
.nsft-sub,.nsft-lbl,.nsft-cancel{color:#a8a8a8}
.nsft-in{background:#101010;border-color:rgba(255,255,255,.12);color:#f1efe9}
.nsft-in:focus{border-color:#C11119}
.nsft-err{background:rgba(244,63,94,.15);color:#fda4af}
.nsft-pagar{background:#C11119;color:#FAF9F6;transition:all .5s}
.nsft-pagar:hover{background:#FAF9F6;color:#C11119}
.nsft-nota{color:#8a8a8a}

/* ============================ FOOTER ====================================== */
.mp-footer{background:#000;color:#b5b1a9}

/* ============================ ANIMACIÓN DE APARICIÓN (.apar) =============== */
/* Solo se ocultan si el JS marcó html.xg-anim (así nada queda invisible si
   el observer no corre). El JS añade .apar y luego .apar-on al entrar en vista. */
html.xg-anim .apar{opacity:0;transform:translateY(28px)}
html.xg-anim .apar.apar-on{animation:xgApar .8s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes xgApar{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){
  html.xg-anim .apar{opacity:1;transform:none}
  html.xg-anim .apar.apar-on{animation:none}
}

/* ============================ BOTÓN FLOTANTE DE CHAT ====================== */
.xg-fab{position:fixed;right:20px;bottom:20px;z-index:90;width:56px;height:56px;border-radius:999px;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0 10px 4px rgba(0,0,0,.5);transition:transform .3s ease;animation:xgPulso 2.6s ease-in-out infinite}
.xg-fab:hover{transform:scale(1.08)}
.xg-fab svg{width:30px;height:30px;fill:currentColor;display:block}
@keyframes xgPulso{
  0%,100%{box-shadow:0 0 10px 4px rgba(0,0,0,.5),0 0 0 0 rgba(37,211,102,.45)}
  50%{box-shadow:0 0 10px 4px rgba(0,0,0,.5),0 0 0 12px rgba(37,211,102,0)}
}
@media (prefers-reduced-motion:reduce){.xg-fab{animation:none}}

/* ── Bandas y degradados heredados: paleta negro→granate ─────────────── */
.mp-banda-grad,.mp-cat-band,.mp-bc-band,.mp-hero,.am-cab{background:linear-gradient(105deg,#1a1a1a 0%,#3a0206 55%,#700005 100%)!important}
.mp-banda-marcas{background:linear-gradient(90deg,#161616,#2a0104)!important}
.mp-cta{background:linear-gradient(105deg,#26060a,#700005)!important}
.mp-prop-a{background:linear-gradient(135deg,#1c1c1c,#3a0206)!important}
.mp-prop-b{background:linear-gradient(135deg,#700005,#C11119)!important}
.am-enviar{background:linear-gradient(105deg,#C11119,#8e0d13)!important}
.text-gradient{background-image:linear-gradient(105deg,#ff5a60,#C11119)!important}
.bg-gradient-to-br.from-primary.to-accent,.bg-gradient-to-r.from-primary.to-accent{background-image:linear-gradient(105deg,#C11119,#700005)!important}

/* ── Secciones estilo referencia: COMBOS / INDIVIDUALES / OPINIONES ────── */
.xg-tit-grande{font-size:clamp(2.4rem,5vw,3.8rem);text-align:center;color:#FAF9F6;line-height:1.08}
.xg-sec-tit{font-size:clamp(1.9rem,3.6vw,2.9rem);text-align:center;color:#FAF9F6;line-height:1.1}
.xg-sec-intro{text-align:center;color:#9E9E9E;font-size:15px;max-width:640px;margin:10px auto 26px}
.xg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:18px}
.xg-carta{background:rgba(250,249,246,.063);border-radius:10px;box-shadow:0 0 4px -2px rgba(172,172,172,.5);overflow:hidden;display:flex;flex-direction:column}
.xg-carta-img{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;overflow:hidden;border-radius:10px 10px 0 0}
.xg-carta-img img{width:100%;height:100%;object-fit:cover;display:block}
.xg-carta-cuerpo{padding:20px;display:flex;flex-direction:column;gap:13px;flex:1}
.xg-carta-nombre{font-family:"DM Sans",Manrope,sans-serif;font-size:18px;font-weight:700;color:#FAF9F6;line-height:1.2}
.xg-carta-precio{font-family:Manrope,sans-serif;font-size:16px;color:#FAF9F6;margin-top:auto}
.xg-btn-borde{display:block;text-align:center;border:1px solid #FAF9F6;border-radius:10px;padding:12px 10px;color:#FAF9F6;font-family:Manrope,sans-serif;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:.4px;transition:.5s}
.xg-btn-borde:hover{background:#C11119;border-color:#C11119;color:#FAF9F6}
.xg-opinion{background:rgba(122,122,122,.11);border-radius:10px;padding:20px;transition:.4s}
.xg-opinion:hover{background:rgba(112,0,5,.45)}
.xg-op-cab{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.xg-op-nombre{font-family:"DM Sans",Manrope,sans-serif;font-weight:700;color:#FAF9F6;font-size:15px}
.xg-op-nota{color:#FAF9F6;font-size:14px}
.xg-op-texto{color:#c9c9c9;font-size:14px;line-height:1.55}

/* ── Banner final "Tu centro integral" ─────────────────────────────────── */
.xg-cta{border-radius:14px;overflow:hidden;position:relative;padding:64px 48px;background:linear-gradient(115deg,#0c0c0c 30%,#2a0104 70%,#700005 100%);box-shadow:0 0 4px -2px rgba(172,172,172,.5)}
.xg-cta::before{content:"";position:absolute;inset:-4%;background:url("/plantilla/cta.jpg") center/cover no-repeat;animation:xg-zoom 16s ease-in-out infinite alternate;z-index:0}
.xg-cta::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 30%, rgba(193,17,25,.45), transparent 55%),linear-gradient(115deg,rgba(12,12,12,.88) 25%,rgba(42,1,4,.66) 65%,rgba(112,0,5,.72) 100%);z-index:1}
.xg-cta-texto{position:relative;z-index:2}
.xg-cta-texto{max-width:620px;margin-left:auto;text-align:left}
.xg-cta-tit{font-size:clamp(2rem,4.4vw,3.4rem);color:#FAF9F6;line-height:1.08}
.xg-cta-sub{color:#e6dede;font-size:16px;margin:14px 0 26px}
.xg-btn-claro{display:inline-block;background:#FAF9F6;color:#C11119;font-family:"DM Sans",Manrope,sans-serif;font-weight:700;text-transform:uppercase;font-size:15px;letter-spacing:.5px;border-radius:10px;padding:16px 26px;transition:.5s;border:1px solid #FAF9F6}
.xg-btn-claro:hover{background:transparent;color:#FAF9F6}
@media (max-width:640px){.xg-cta{padding:44px 22px}.xg-cta-texto{margin-left:0}}

/* ── Fila de características (estilo plantilla NetBand) ─────────────────── */
.xg-rasgos{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.xg-rasgo{display:flex;align-items:center;justify-content:space-between;gap:14px;background:#f7f2ea;border-radius:10px;padding:22px 24px;position:relative;overflow:hidden}
.xg-rasgo-rojo::after{content:"";position:absolute;right:0;top:0;bottom:0;width:74px;background:#C11119}
.xg-rasgo-kicker{color:#C11119;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:4px}
.xg-rasgo-tit{font-family:"DM Sans",Manrope,sans-serif;font-weight:700;font-size:19px;color:#131022}
.xg-rasgo-sub{color:#5a5650;font-size:12.5px;margin-top:4px;max-width:230px}
.xg-rasgo-icono{width:64px;height:64px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;box-shadow:0 6px 18px rgba(0,0,0,.14);flex-shrink:0;position:relative;z-index:1}

/* ── Tarjetas de plan para COMBOS (estilo pricing de la plantilla) ──────── */
.xg-grid-planes{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.xg-plan{background:#fff;border-radius:10px;overflow:hidden;position:relative;display:flex;flex-direction:column;box-shadow:0 0 4px -2px rgba(172,172,172,.5)}
.xg-plan-cinta{position:absolute;top:16px;right:-26px;transform:rotate(45deg);background:#C11119;color:#fff;font-size:11px;font-weight:700;text-transform:lowercase;padding:4px 32px;z-index:2}
.xg-plan-cab{background:#f7f2ea;padding:22px 20px 18px;text-align:center}
.xg-plan-kicker{color:#C11119;font-weight:700;font-size:12.5px;margin-bottom:2px}
.xg-plan-nombre{font-family:"DM Sans",Manrope,sans-serif;font-weight:700;font-size:19px;color:#131022;line-height:1.25}
.xg-plan-logos{display:flex;justify-content:center;gap:10px;margin-top:14px}
.xg-plan-logo{width:52px;height:52px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.12);font-size:22px}
.xg-plan-cuerpo{padding:20px;display:flex;flex-direction:column;gap:14px;flex:1}
.xg-plan-lista{display:flex;flex-direction:column;gap:9px}
.xg-plan-lista li{color:#3c3a36;font-size:14px;list-style:none}
.xg-check{color:#C11119;font-weight:700}
.xg-plan-precio{color:#3c3a36;font-size:14px;margin-top:auto}
.xg-plan-precio b{color:#C11119;font-size:19px;font-weight:800}
.xg-btn-plan{display:block;text-align:center;background:#C11119;color:#FAF9F6;border-radius:8px;padding:13px 10px;font-family:"DM Sans",Manrope,sans-serif;font-weight:700;font-size:14px;transition:.5s;border:1px solid #C11119}
.xg-btn-plan:hover{background:#131022;border-color:#131022;color:#FAF9F6}

/* ── Hero estilo demo NetBand ──────────────────────────────────────────── */
.xg-h-kicker{color:#ff4d55;font-size:16px;font-weight:600;margin-bottom:10px}
.xg-h-tit{font-family:"DM Sans",Manrope,sans-serif;font-weight:700;color:#FAF9F6;font-size:clamp(1.9rem,3.9vw,3.1rem);line-height:1.14;letter-spacing:-.012em;text-transform:none;max-width:620px}
.xg-h-precio{color:#FAF9F6;font-size:18px;margin-top:18px}
.xg-h-precio b{font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:800}
.xg-h-precio span{color:#cfcac2;font-size:15px;font-weight:600}
.xg-h-rojo{color:#ff4d55;font-size:14px;font-weight:600;margin-top:6px;letter-spacing:.02em}
.xg-h-botones{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.xg-chev{font-size:20px;line-height:0;margin-left:6px}
.xg-btn-video{display:inline-flex;align-items:center;gap:14px;color:#FAF9F6;font-weight:600;font-size:14.5px;margin-top:26px}
.xg-play{width:48px;height:48px;border-radius:50%;background:#C11119;color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;position:relative;box-shadow:0 0 0 0 rgba(193,17,25,.55);animation:xg-ripple 2s infinite}
@keyframes xg-ripple{0%{box-shadow:0 0 0 0 rgba(193,17,25,.55)}70%{box-shadow:0 0 0 18px rgba(193,17,25,0)}100%{box-shadow:0 0 0 0 rgba(193,17,25,0)}}
.xg-blob-wrap{display:flex;align-items:center;justify-content:center}
.xg-blob{width:min(340px,34vw);filter:drop-shadow(0 18px 44px rgba(193,17,25,.35));animation:xg-gira 6s linear infinite;transform-origin:50% 50%}
@keyframes xg-flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@media (max-width:900px){.xg-blob{display:none}}
@media (prefers-reduced-motion:reduce){.xg-play,.xg-blob{animation:none}}


/* ── Zoom lento tipo demo (Ken Burns) ──────────────────────────────────── */
@keyframes xg-zoom{from{transform:scale(1)}to{transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){.tz-hero::before,.xg-cta::before{animation:none}}


/* ── Rotador de fotos del hero (hero.jpg, hero2.jpg, ...) ──────────────── */
.xg-hero-fotos{position:absolute;inset:-4%;z-index:0;pointer-events:none}
.xg-hero-fotos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.8s ease}
.xg-hero-fotos img.xg-viva{opacity:1;animation:xg-zoom 18s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){.xg-hero-fotos img.xg-viva{animation:none}}

/* balanceo identico a la plantilla (rounded 6s linear infinite) */
@keyframes xg-gira{50%{transform:rotate(15deg)}}

/* ── Carrusel de productos (mismo ritmo que el movie-slider de la plantilla:
     avanza 1 tarjeta por segundo con deslizamiento de 2s, en bucle) ─────── */
.xg-carrusel{overflow:hidden}
.xg-pista{display:flex;gap:20px;will-change:transform}
.xg-vagon{flex:0 0 calc(25% - 15px);min-width:0}
@media (max-width:1199px){.xg-vagon{flex-basis:calc(33.333% - 14px)}}
@media (max-width:991px){.xg-vagon{flex-basis:calc(50% - 10px)}}
@media (max-width:640px){.xg-vagon{flex-basis:100%}}
@media (prefers-reduced-motion:reduce){.xg-pista{transition:none!important;transform:none!important}}

/* ── Placa blanca del logo en las tarjetas (contraste con cualquier marca) ─ */
.xg-carta-tile{width:112px;height:112px;border-radius:24px;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(0,0,0,.35);font-family:"DM Sans",Manrope,sans-serif;font-weight:800;color:#131022}
.xg-carta-tile img{width:62%;height:62%;object-fit:contain;display:block}

/* ── t23: combos con ahorro calculado ─────────────────────────── */
.xg-plan-ahorro{display:flex;align-items:center;justify-content:center;gap:10px;margin:2px 0 12px}
.xg-plan-ahorro s{color:#8a877f;font-size:15px}
.xg-plan-desc{background:#C11119;color:#fff;font-weight:700;font-size:12px;padding:3px 11px;border-radius:999px;letter-spacing:.4px;white-space:nowrap}
.xg-plan .xg-plan-logos{flex-wrap:wrap}
.xg-plan-mas{font-weight:800;font-size:16px;color:#C11119;font-family:'Bebas Neue',sans-serif;letter-spacing:.5px}

/* ── t34: chat de soporte en CRISTAL (glass) ─────────────────────── */
.am-marco{background:rgba(255,255,255,.06);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border:1px solid rgba(255,255,255,.16);box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 60px rgba(193,17,25,.16),inset 0 1px 0 rgba(255,255,255,.10)}
.am-cab{background:linear-gradient(105deg,rgba(58,2,6,.82),rgba(112,0,5,.82))!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.10)}
.am-sug{border-top:1px solid rgba(255,255,255,.09);color:#f1efe9}
.am-sug:hover{background:rgba(255,255,255,.08)}
.am-sug-ico{color:#ff4d55}
.am-chip{background:rgba(255,255,255,.08);color:#cfcbc2;border:1px solid rgba(255,255,255,.15)}
.am-chip-on{background:rgba(193,17,25,.92);color:#fff;border-color:rgba(193,17,25,.92);font-weight:600}
.am-input{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13);color:#f1efe9}
.am-input::placeholder{color:#9a968e}
.am-input:focus{border-color:rgba(193,17,25,.75);background:rgba(255,255,255,.12)}
.am-burbuja{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);color:#f1efe9;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.am-burbuja-mia{background:rgba(193,17,25,.92);border-color:rgba(193,17,25,.92);color:#fff}
.am-resp-chip{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#f1efe9}
.am-resp-chip:hover{background:rgba(193,17,25,.28)}
.am-escribiendo{color:#9a968e}
.am-ola{background:#c9c4ba}
.am-hora{color:#8a8a8a}
.am-tarjeta{background:rgba(255,255,255,.06);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.14);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.am-tarjeta:hover{background:rgba(255,255,255,.10);box-shadow:0 14px 38px rgba(0,0,0,.45)}
.am-tarjeta-tit{color:#f1efe9}
.am-tarjeta-txt{color:#9a968e}

/* ── t36: chat CLARO (blanco crema, como las tarjetas de la web) ───── */
.am-marco{background:#FAF9F6;border:1px solid #e9e4da;box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 60px rgba(193,17,25,.20);color:#1d2736;backdrop-filter:none;-webkit-backdrop-filter:none}
.am-marco .text-muted-foreground{color:#6b7280}
.am-sug{border-top:1px solid #eee9df;color:#1d2736}
.am-sug:hover{background:#f3eee4}
.am-sug-ico{color:#C11119}
.am-chip{background:#efeae0;color:#4a5568;border:1px solid #e2dcd0}
.am-chip-on{background:#C11119;color:#fff;border-color:#C11119;font-weight:600}
.am-input{background:#efeae0;border:1px solid #e2dcd0;color:#1d2736}
.am-input::placeholder{color:#8a94a6}
.am-input:focus{border-color:#C11119;background:#fff}
.am-burbuja{background:#efeae0;border:1px solid #e2dcd0;color:#1d2736;backdrop-filter:none;-webkit-backdrop-filter:none}
.am-burbuja-mia{background:#C11119;border-color:#C11119;color:#fff}
.am-resp-chip{background:#fff;border:1px solid #e0d9cc;color:#C11119}
.am-resp-chip:hover{background:#fbe9ea}
.am-hora{color:#98a1b0}
.am-escribiendo{color:#8a94a6}
.am-ola{background:#a9b2c0}
.am-nota{color:#8a94a6}
.am-tarjeta{background:#FAF9F6;border:1px solid #e9e4da;box-shadow:0 10px 30px rgba(0,0,0,.35);backdrop-filter:none;-webkit-backdrop-filter:none}
.am-tarjeta:hover{background:#ffffff;box-shadow:0 14px 38px rgba(0,0,0,.45)}
.am-tarjeta-tit{color:#1d2736}
.am-tarjeta-txt{color:#6b7280}

/* ── t38: PANELES CLAROS (/vendedor, /billetera, /mensajes) ─────────── */
.mp-panel{color:#1d2736}
.mp-panel .glass,.mp-panel .glass-strong{background:#FAF9F6;border:1px solid #e9e4da;box-shadow:0 6px 20px rgba(0,0,0,.30);color:#1d2736;backdrop-filter:none;-webkit-backdrop-filter:none}
.mp-panel .text-muted-foreground{color:#6b7280}
.mp-panel .text-foreground{color:#1d2736}
.mp-panel input,.mp-panel select,.mp-panel textarea{background:#fff;border:1px solid #dcdfe6;color:#1d2736}
.mp-panel input::placeholder,.mp-panel textarea::placeholder{color:#98a1b0}
.mp-panel option{color:#1d2736;background:#fff}
.mp-panel .border-white\/10,.mp-panel .border-white\/5{border-color:#e9e4da}
.mp-panel .divide-white\/5>:not([hidden])~:not([hidden]){border-color:#e9e4da}
.mp-panel .hover\:bg-white\/5:hover{background-color:#f3eee4}
.mp-panel .hover\:bg-white\/\[0\.03\]:hover{background-color:#f6f2e9}
.mp-panel .bg-white\/10{background-color:#eee9df}
.mp-panel .text-emerald-400{color:#0a9e6e}
.mp-panel .text-amber-400{color:#b45309}
.mp-panel .text-rose-400,.mp-panel .text-rose-300{color:#e11d48}
.mp-panel .text-sky-400{color:#0369a1}
.mp-panel .bg-emerald-500\/20{background-color:#e2f6ec}
.mp-panel .bg-amber-500\/20{background-color:#fdf1d7}
.mp-panel .bg-rose-500\/20,.mp-panel .bg-rose-500\/15{background-color:#fde4e8}
.mp-panel .bg-sky-500\/20{background-color:#e0f2fb}
/* tarjetas de resumen: color pleno y texto blanco, como la plantilla original */
.mp-panel .mp-stat{border:0;color:#fff;box-shadow:0 2px 6px rgba(20,30,60,.18)}
.mp-panel .mp-stat-sky{background:#58c9e9;color:#fff}
.mp-panel .mp-stat-green{background:#77de51;color:#fff}
.mp-panel .mp-stat-amber{background:#feb71d;color:#fff}
.mp-panel .mp-stat-red{background:#ff6a6d;color:#fff}
.mp-panel .mp-stat-slate{background:#8494a8;color:#fff}
.mp-panel .mp-stat .mp-stat-label,.mp-panel .mp-stat-label{color:rgba(255,255,255,.95)}
.mp-panel .mp-stat .text-sky-400,.mp-panel .mp-stat .text-emerald-400,.mp-panel .mp-stat .text-amber-400,.mp-panel .mp-stat .text-rose-400,.mp-panel .mp-stat .text-rose-300{color:#fff}
.mp-panel .mp-stat-on{outline:2px solid #C11119;outline-offset:2px;box-shadow:none}
.mp-panel .mp-sumcard{color:#fff;border:0;box-shadow:0 2px 6px rgba(20,30,60,.18)}
.mp-panel .mp-sumcard .text-muted-foreground{color:rgba(255,255,255,.92)}
.mp-panel .mp-sumcard .mp-sumcard-ico{background:rgba(255,255,255,.28);color:#fff}
.mp-panel .mp-sumcard .text-emerald-400,.mp-panel .mp-sumcard .text-sky-400,.mp-panel .mp-sumcard .text-amber-400,.mp-panel .mp-sumcard .text-rose-400{color:#fff}
/* titulos que estan directamente sobre el fondo oscuro de la pagina */
.mp-panel>h1{color:#FAF9F6}
.mp-panel>p.text-sm{color:#b5b1a9}

/* ── t39: contadores del panel en blanco y rojo (fuera el arcoiris) ── */
.mp-panel .mp-stat,.mp-panel .mp-stat-sky,.mp-panel .mp-stat-green,.mp-panel .mp-stat-amber,.mp-panel .mp-stat-red,.mp-panel .mp-stat-slate{background:#FAF9F6;border:1px solid #e9e4da;color:#C11119;box-shadow:0 2px 8px rgba(20,30,60,.10)}
.mp-panel .mp-stat:hover{filter:none;background:#fff;border-color:rgba(193,17,25,.55)}
.mp-panel .mp-stat .mp-stat-label,.mp-panel .mp-stat-label{color:#6b7280;text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.mp-panel .mp-stat .text-sky-400,.mp-panel .mp-stat .text-emerald-400,.mp-panel .mp-stat .text-amber-400,.mp-panel .mp-stat .text-rose-400,.mp-panel .mp-stat .text-rose-300{color:#C11119}
.mp-panel .mp-stat-on{background:#C11119;border-color:#C11119;color:#fff;outline:0;box-shadow:0 8px 22px rgba(193,17,25,.35)}
.mp-panel .mp-stat-on .mp-stat-label{color:rgba(255,255,255,.92)}
.mp-panel .mp-stat-on .text-sky-400,.mp-panel .mp-stat-on .text-emerald-400,.mp-panel .mp-stat-on .text-amber-400,.mp-panel .mp-stat-on .text-rose-400{color:#fff}
/* tarjetas de saldo: blanco con cifra roja e icono con placa roja suave */
.mp-panel .mp-sumcard,.mp-panel .mp-sumcard.mp-stat-sky,.mp-panel .mp-sumcard.mp-stat-green,.mp-panel .mp-sumcard.mp-stat-amber,.mp-panel .mp-sumcard.mp-stat-red{background:#FAF9F6;border:1px solid #e9e4da;color:#1d2736;box-shadow:0 2px 8px rgba(20,30,60,.10)}
.mp-panel .mp-sumcard .text-muted-foreground{color:#6b7280}
.mp-panel .mp-sumcard .mp-sumcard-ico{background:rgba(193,17,25,.10);color:#C11119}
.mp-panel .mp-sumcard .text-emerald-400,.mp-panel .mp-sumcard .text-sky-400,.mp-panel .mp-sumcard .text-amber-400,.mp-panel .mp-sumcard .text-rose-400,.mp-panel .mp-sumcard .font-display{color:#C11119}

/* ── t40: menus desplegables OPACOS (ya no se transparenta lo de atras) ── */
.absolute.glass-strong{background:#181414;border:1px solid rgba(255,255,255,.14);box-shadow:0 24px 60px rgba(0,0,0,.65);color:#f1efe9;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.absolute.glass-strong .text-muted-foreground{color:#9a968e}
.mp-panel .absolute.glass-strong{background:#ffffff;border:1px solid #e5e0d6;color:#1d2736;box-shadow:0 24px 60px rgba(20,30,60,.25)}
.mp-panel .absolute.glass-strong .text-muted-foreground{color:#6b7280}

/* ── t41: BLANCO limpio y con profundidad (chat + paneles), a juego con la web ── */
.am-marco{background:#ffffff;border:1px solid #eceff4;box-shadow:0 34px 90px rgba(0,0,0,.6),0 0 70px rgba(193,17,25,.16)}
.am-burbuja{background:#f4f6f9;border:1px solid #e7ebf1}
.am-input{background:#f4f6f9;border:1px solid #e2e7ee}
.am-chip{background:#f4f6f9;border:1px solid #e2e7ee}
.am-sug{border-top:1px solid #eef1f5}
.am-sug:hover{background:#f6f8fb}
.am-tarjeta{background:#ffffff;border:1px solid #eceff4;box-shadow:0 14px 40px rgba(0,0,0,.45)}
.am-tarjeta:hover{background:#ffffff;box-shadow:0 18px 48px rgba(0,0,0,.55)}
.mp-panel .glass,.mp-panel .glass-strong{background:#ffffff;border:1px solid #eceff4;box-shadow:0 14px 44px rgba(0,0,0,.45)}
.mp-panel .mp-stat,.mp-panel .mp-stat-sky,.mp-panel .mp-stat-green,.mp-panel .mp-stat-amber,.mp-panel .mp-stat-red,.mp-panel .mp-stat-slate{background:#ffffff;border:1px solid #eceff4;box-shadow:0 8px 24px rgba(0,0,0,.30)}
.mp-panel .mp-stat:hover{border-color:rgba(193,17,25,.55);box-shadow:0 12px 30px rgba(0,0,0,.38)}
.mp-panel .mp-stat-on{background:#C11119;border-color:#C11119;box-shadow:0 10px 26px rgba(193,17,25,.4)}
.mp-panel .mp-sumcard,.mp-panel .mp-sumcard.mp-stat-sky,.mp-panel .mp-sumcard.mp-stat-green,.mp-panel .mp-sumcard.mp-stat-amber,.mp-panel .mp-sumcard.mp-stat-red{background:#ffffff;border:1px solid #eceff4;box-shadow:0 8px 24px rgba(0,0,0,.30)}
.mp-panel input,.mp-panel select,.mp-panel textarea{background:#f4f6f9;border:1px solid #e2e7ee}
.mp-panel input:focus,.mp-panel select:focus,.mp-panel textarea:focus{border-color:#C11119;background:#ffffff}
.mp-panel .border-white\/10,.mp-panel .border-white\/5{border-color:#eef1f5}
.mp-panel .divide-white\/5>:not([hidden])~:not([hidden]){border-color:#eef1f5}
.mp-panel .hover\:bg-white\/5:hover{background-color:#f6f8fb}
.mp-panel .bg-white\/10{background-color:#eef1f5}
.am-chip-on{background:#C11119;border-color:#C11119;color:#fff}


/* ── t43: fondo oscuro de antes, LETRAS mas blancas (menu y navegacion) ── */
.absolute.glass-strong{background:#181414;border:1px solid rgba(255,255,255,.14);color:#ffffff;box-shadow:0 24px 60px rgba(0,0,0,.65)}
.absolute.glass-strong .text-muted-foreground{color:#c9c5be}
.mp-menu-item{color:#f5f3ee}
.mp-menu-item:hover{color:#ff5a60;background:rgba(255,255,255,.08)}
.mp-panel .absolute.glass-strong{background:#181414;color:#ffffff}
#ns-nav a{color:#e9e6df}
#ns-nav a:hover{color:#ffffff}
#ns-nav a[aria-current="page"]{color:#ffffff}

/* ── t45: Mensajes con letras mas blancas sobre el fondo oscuro ── */
.nv-claro{color:#ffffff}
.nv-claro .text-muted-foreground{color:#efede7}
.nv-claro .glass,.nv-claro .glass-strong{color:#f5f3ee}

/* ── t46: modales OPACOS (pago y demas): nada se transparenta detras ── */
.fixed.inset-0{background-color:rgba(0,0,0,.82)}
.fixed.inset-0>.glass-strong{background:#151111;border:1px solid rgba(255,255,255,.16);color:#ffffff;box-shadow:0 40px 100px rgba(0,0,0,.7)}
.fixed.inset-0>.glass-strong .text-muted-foreground{color:#e6e3dc}
.fixed.inset-0>.glass-strong .glass{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:#f5f3ee}
.mp-panel .fixed.inset-0>.glass-strong{background:#ffffff;border:1px solid #e8e5de;color:#1d2736}
.mp-panel .fixed.inset-0>.glass-strong .text-muted-foreground{color:#6b7280}
.mp-panel .fixed.inset-0>.glass-strong .glass{background:#f4f6f9;border:1px solid #e2e7ee;color:#1d2736}

/* ── t48: chat de soporte integrado: fondo grafito suave y letras casi blancas ── */
.am-marco{background:#211d1d;border:1px solid rgba(255,255,255,.14);color:#f5f3ee;box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 60px rgba(193,17,25,.14)}
.am-marco .text-muted-foreground{color:#d9d6cf}
.am-sug{border-top:1px solid rgba(255,255,255,.09);color:#f5f3ee}
.am-sug:hover{background:rgba(255,255,255,.07)}
.am-sug-ico{color:#ff4d55}
.am-chip{background:#2e2a2a;color:#e8e5de;border:1px solid rgba(255,255,255,.14)}
.am-chip-on{background:#C11119;border-color:#C11119;color:#fff}
.am-input{background:#2e2a2a;border:1px solid rgba(255,255,255,.14);color:#f7f5f0}
.am-input::placeholder{color:#b3afa7}
.am-input:focus{border-color:rgba(193,17,25,.8);background:#332e2e}
.am-burbuja{background:#2e2a2a;border:1px solid rgba(255,255,255,.14);color:#f7f5f0}
.am-burbuja-mia{background:#C11119;border-color:#C11119;color:#fff}
.am-resp-chip{background:#2e2a2a;border:1px solid rgba(255,255,255,.16);color:#f5f3ee}
.am-resp-chip:hover{background:rgba(193,17,25,.3)}
.am-hora{color:#b3afa7}
.am-escribiendo{color:#c9c5be}
.am-ola{background:#c9c5be}
.am-nota{color:#b3afa7}
.am-tarjeta{background:#211d1d;border:1px solid rgba(255,255,255,.14);box-shadow:0 10px 30px rgba(0,0,0,.4)}
.am-tarjeta:hover{background:#2a2525;box-shadow:0 14px 36px rgba(0,0,0,.5)}
.am-tarjeta-tit{color:#f7f5f0}
.am-tarjeta-txt{color:#c9c5be}

/* ── t49: chat un punto mas claro, letras blanco pleno ── */
.am-marco{background:#2b2727;border:1px solid rgba(255,255,255,.18);color:#ffffff}
.am-marco .text-muted-foreground{color:#eceae4}
.am-sug{color:#ffffff;border-top:1px solid rgba(255,255,255,.12)}
.am-sug:hover{background:rgba(255,255,255,.10)}
.am-chip{background:#3a3535;color:#f7f5f0;border:1px solid rgba(255,255,255,.18)}
.am-input{background:#3a3535;border:1px solid rgba(255,255,255,.18);color:#ffffff}
.am-input::placeholder{color:#c9c5be}
.am-input:focus{background:#413b3b;border-color:rgba(193,17,25,.85)}
.am-burbuja{background:#3a3535;border:1px solid rgba(255,255,255,.16);color:#ffffff}
.am-resp-chip{background:#3a3535;border:1px solid rgba(255,255,255,.2);color:#ffffff}
.am-hora{color:#c9c5be}
.am-nota{color:#c9c5be}
.am-tarjeta{background:#2b2727;border:1px solid rgba(255,255,255,.16)}
.am-tarjeta:hover{background:#332e2e}
.am-tarjeta-tit{color:#ffffff}
.am-tarjeta-txt{color:#dedbd3}
.am-marco{background:#332e2e}
.am-tarjeta{background:#332e2e}
.am-tarjeta:hover{background:#3c3636}
.am-chip{background:#453f3f}
.am-input{background:#453f3f}
.am-burbuja{background:#453f3f}
.am-resp-chip{background:#453f3f}
.am-chip-on{background:#C11119;border-color:#C11119;color:#fff}

/* ── t50: menu con los tonos del chat + tarjetas de oferta vivas ── */
.absolute.glass-strong{background:#332e2e;border:1px solid rgba(255,255,255,.18);color:#ffffff}
.absolute.glass-strong .text-muted-foreground{color:#dedbd3}
.mp-menu-item{color:#ffffff}
.mp-menu-item:hover{color:#ff5a60;background:rgba(255,255,255,.10)}
.mp-panel .absolute.glass-strong{background:#332e2e;color:#ffffff}
/* tarjetas de oferta: fondo con vida y respuesta al pasar el raton */
.xg-carta{transition:transform .25s ease,box-shadow .25s ease;position:relative}
.xg-carta:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(0,0,0,.55),0 0 34px rgba(193,17,25,.28)}
.xg-carta-img{position:relative}
.xg-carta-img::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 72% 82%,rgba(193,17,25,.30),transparent 58%);pointer-events:none}
.xg-carta-img::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.14) 50%,transparent 68%);transform:translateX(-130%);transition:transform .65s ease;pointer-events:none}
.xg-carta:hover .xg-carta-img::after{transform:translateX(130%)}
.xg-carta-img .xg-carta-tile,.xg-carta-img img{position:relative;z-index:1;transition:transform .3s ease}
.xg-carta:hover .xg-carta-img .xg-carta-tile,.xg-carta:hover .xg-carta-img img{transform:scale(1.07)}
.xg-carta-precio{color:#ffffff;font-weight:800;font-size:17px}
@media (prefers-reduced-motion: reduce){.xg-carta,.xg-carta-img::after,.xg-carta-img .xg-carta-tile,.xg-carta-img img{transition:none}}

/* ============ t57: banner de notificaciones push ============ */
.ns-push{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#332e2e;border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:12px 16px;margin-bottom:16px;color:#f4f2ee;text-align:left}
.ns-push-ico{font-size:22px;flex:none}
.ns-push-txt{flex:1 1 240px;min-width:0}
.ns-push-tit{display:block;font-weight:700;font-size:14px;color:#faf9f6}
.ns-push-det{display:block;font-size:12px;color:#d9d5cf;margin-top:2px}
.ns-push-btn{background:#C11119;color:#fff;border:0;border-radius:12px;padding:10px 18px;font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer;transition:background .15s}
.ns-push-btn:hover{background:#a50e15}
.ns-push-btn:disabled{opacity:.6;cursor:default}
.ns-push-ok{background:#1e2a20;border-color:rgba(52,199,89,.35)}
.ns-push-ok .ns-push-tit{color:#b8e6c2}

/* ============ t58: puerta de bienvenida para activar avisos ============ */
.ns-puerta{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-end;justify-content:center;background:rgba(8,6,6,.72);backdrop-filter:blur(3px);padding:20px}
.ns-puerta-carta{width:100%;max-width:420px;background:#332e2e;border:1px solid rgba(255,255,255,.16);border-radius:22px;padding:26px 22px;text-align:center;color:#f4f2ee;box-shadow:0 18px 50px rgba(0,0,0,.55);margin-bottom:14px}
.ns-puerta-ico{font-size:40px;display:block;margin-bottom:10px}
.ns-puerta-tit{font-weight:800;font-size:20px;color:#faf9f6;margin-bottom:8px}
.ns-puerta-txt{font-size:14px;color:#d9d5cf;line-height:1.5;margin-bottom:18px}
.ns-puerta-botones{display:flex;flex-direction:column;gap:10px}
.ns-puerta-botones .ns-push-btn{width:100%;padding:13px 18px;font-size:15px}
.ns-puerta-luego{background:transparent;border:0;color:#b5b0a9;font-size:13px;padding:8px;cursor:pointer}
.ns-puerta-luego:hover{color:#f4f2ee}
@media (min-width:640px){.ns-puerta{align-items:center}}

/* t62: nota bajo los botones de la puerta */
.ns-puerta-nota{font-size:11px;color:#a8a39c;margin-top:12px}

/* t65 · Gestionar el stock: fila «cupos + observación + cargar» */
.ns-lote-fila{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:12px;align-items:end}
@media (max-width:640px){
  .ns-lote-fila{grid-template-columns:1fr 1fr}
  .ns-lote-fila .ns-lote-obs,.ns-lote-fila .ns-lote-btn{grid-column:1 / -1}
  .ns-lote-oferta{grid-column:1 / -1}
  .ns-lote-fila input{font-size:16px}
}
.ns-fila-cta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 36px;gap:8px;align-items:center}
@media (max-width:640px){ .ns-fila-cta{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 32px;gap:6px} .ns-fila-cta input{font-size:16px;padding-left:8px;padding-right:8px} }

/* t66 · ficha de la oferta: letra blanca en la tarjeta de compra y en la descripcion */
.mp-buycard .text-muted-foreground,.mp-buycard dt,.mp-buycard dd,.mp-buycard .mp-pricing-label,.mp-pricing-options li{color:#fff}
.mp-buycard button.text-muted-foreground:hover{color:#fff;opacity:.85}
.mp-desc-blanca{color:#fff}

/* t68 · Combos a medida: bloque «Combo» del formulario de la oferta */
.xg-cb-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.xg-cb-fila{display:flex;align-items:center;gap:12px;padding:10px 12px;cursor:pointer}
.xg-cb-fila+.xg-cb-fila{border-top:1px solid rgba(255,255,255,.06)}
.xg-cb-fila:hover{background:rgba(255,255,255,.05)}
.xg-cb-on{background:hsl(var(--primary) / .10)}
.xg-cb-check{width:16px;height:16px;flex:0 0 auto;margin:0;accent-color:hsl(var(--primary));cursor:pointer}
.xg-cb-fija{display:inline-block;border-radius:4px;background:hsl(var(--primary));opacity:.6}
.xg-cb-precio{font-weight:700;font-size:13px;white-space:nowrap;text-align:right;flex:0 0 auto}
@media (max-width:640px){ .xg-cb-cab{flex-direction:column} }
/* t68 · ficha de la oferta: «Este combo incluye» */
.xg-cb-chips{display:flex;flex-wrap:wrap;gap:8px}
.xg-cb-chip{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);font-size:12.5px;font-weight:600;color:#fff}

/* ── t74 · Tarjeta de COMBO: escenario oscuro con luces de neón y una tarjeta
      regalo blanca por plataforma (logo + nombre), y debajo nombre, precio y
      botones. --xg-rgb: tono de la tarjeta (r,g,b) · --xg-acento: color de la marca. */
.xg-grid-planes{grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px}
.xg-combo{--xg-rgb:229,9,20;background:#14161c;border:1px solid rgba(255,255,255,.07);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;position:relative;box-shadow:0 10px 30px rgba(0,0,0,.45);transition:transform .25s ease,box-shadow .25s ease}
.xg-combo:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(0,0,0,.6),0 0 40px rgba(var(--xg-rgb),.35)}
.xg-combo-hero{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;color:#fff;text-decoration:none;background:radial-gradient(ellipse 80% 50% at 50% 104%,rgba(var(--xg-rgb),.6),transparent 66%),radial-gradient(circle at 50% -10%,#242a3a,#07080c 72%)}
.xg-combo-luces{position:absolute;inset:0;pointer-events:none;z-index:0;background:
  linear-gradient(to bottom,transparent 10%,rgba(var(--xg-rgb),.95) 55%,transparent 92%) 6% 0/2px 100% no-repeat,
  linear-gradient(to bottom,transparent 26%,rgba(var(--xg-rgb),.7) 62%,transparent 96%) 13% 0/1px 100% no-repeat,
  linear-gradient(to bottom,transparent 18%,rgba(255,255,255,.6) 58%,transparent 94%) 20% 0/1px 100% no-repeat,
  linear-gradient(to bottom,transparent 34%,rgba(var(--xg-rgb),.55) 66%,transparent 98%) 27% 0/1px 100% no-repeat,
  linear-gradient(to bottom,transparent 34%,rgba(var(--xg-rgb),.55) 66%,transparent 98%) 73% 0/1px 100% no-repeat,
  linear-gradient(to bottom,transparent 18%,rgba(255,255,255,.6) 58%,transparent 94%) 80% 0/1px 100% no-repeat,
  linear-gradient(to bottom,transparent 26%,rgba(var(--xg-rgb),.7) 62%,transparent 96%) 87% 0/1px 100% no-repeat,
  linear-gradient(to bottom,transparent 10%,rgba(var(--xg-rgb),.95) 55%,transparent 92%) 94% 0/2px 100% no-repeat;
  filter:drop-shadow(0 0 6px rgba(var(--xg-rgb),.9))}
.xg-combo-oferta{position:absolute;top:12px;right:12px;z-index:3;background:#fff;color:#C11119;font:800 10.5px/1 "DM Sans",Manrope,sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,.45)}
.xg-combo-pop{position:absolute;top:12px;left:12px;z-index:3;background:#C11119;color:#fff;font:700 10.5px/1 "DM Sans",Manrope,sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border-radius:999px;box-shadow:0 4px 14px rgba(193,17,25,.5)}
.xg-combo-titulo{position:absolute;left:0;right:0;top:11.5%;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 14px}
.xg-combo-kicker{font:600 10px/1.2 "DM Sans",Manrope,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.xg-combo-nombre{font-family:"Bebas Neue",Oswald,"Arial Narrow",Impact,sans-serif;font-weight:400;font-size:34px;line-height:1;letter-spacing:.06em;text-transform:uppercase;color:#fff;margin-top:5px;text-shadow:0 0 18px rgba(var(--xg-rgb),.8),0 2px 6px rgba(0,0,0,.6)}
.xg-combo-tarjetas{position:absolute;left:50%;bottom:16%;transform:translateX(-50%);z-index:2;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:8px 7px;width:92%}
.xg-combo-f1{max-width:266px}.xg-combo-f2{max-width:152px}.xg-combo-f3{max-width:216px}.xg-combo-f4{max-width:100%}
.xg-combo-f1 .xg-combo-tarjeta{width:calc((100% - 14px)/3);max-width:86px}
.xg-combo-f2 .xg-combo-tarjeta{width:calc((100% - 7px)/2);max-width:72px}
.xg-combo-f3 .xg-combo-tarjeta{width:calc((100% - 14px)/3);max-width:68px}
.xg-combo-f4 .xg-combo-tarjeta{width:calc((100% - 21px)/4);max-width:70px}
.xg-combo-tarjeta{--xg-t:64px;width:var(--xg-t);aspect-ratio:1/1.15;container-type:inline-size;background:#fff;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;box-shadow:0 12px 22px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.35);position:relative;transition:transform .3s ease}
.xg-combo-tarjeta::after{content:"";position:absolute;left:10%;right:10%;bottom:4px;height:3px;border-radius:3px;background:var(--xg-acento,#C11119);opacity:.9}
.xg-combo-tarjeta:nth-child(odd){transform:rotate(-4deg)}
.xg-combo-tarjeta:nth-child(even){transform:rotate(3deg) translateY(-3px)}
.xg-combo:hover .xg-combo-tarjeta{transform:rotate(0) translateY(-4px)}
.xg-combo-logo{width:64%;height:44%;display:flex;align-items:center;justify-content:center;font-family:"DM Sans",Manrope,sans-serif;font-weight:800;font-size:18px;font-size:30cqw;color:#131022}
.xg-combo-logo img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.xg-combo-marca{font:800 9px/1.05 "DM Sans",Manrope,sans-serif;font-size:clamp(7.5px,14.5cqw,11px);color:#131022;text-align:center;padding:0 3px 6px;letter-spacing:0;max-width:100%;max-height:2.3em;overflow:hidden}
.xg-combo-base{position:absolute;left:50%;bottom:6%;transform:translateX(-50%);width:72%;height:13%;border-radius:50%;background:radial-gradient(ellipse at 50% 35%,#2d3140,#111319 72%);box-shadow:0 0 0 2px rgba(255,255,255,.06),0 0 30px rgba(var(--xg-rgb),.55),0 14px 20px rgba(0,0,0,.6);z-index:1}
.xg-combo-base::after{content:"";position:absolute;left:4%;right:4%;top:-5px;height:6px;border-radius:50%;background:rgba(var(--xg-rgb),.85);filter:blur(3px)}
.xg-combo-cuerpo{padding:14px 16px 16px;display:flex;flex-direction:column;gap:9px;flex:1}
.xg-combo-h3{font:700 17px/1.2 "DM Sans",Manrope,sans-serif;color:#FAF9F6}
.xg-combo-precio{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 8px;margin:0 0 4px}
.xg-combo-precio b{font:800 22px/1 Manrope,sans-serif;color:#fff}
.xg-combo-periodo{font:600 12.5px/1 Manrope,sans-serif;color:#9E9E9E}
.xg-combo-precio s{color:#8a877f;font-size:12.5px;margin-left:auto}
.xg-combo-btn{display:block;text-align:center;border-radius:8px;padding:12px 10px;font:700 13px/1 "DM Sans",Manrope,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#fff!important;transition:filter .2s ease,transform .2s ease}
.xg-combo-btn:hover{filter:brightness(1.12);transform:translateY(-1px)}
.xg-combo-rojo{background:#C11119;box-shadow:0 8px 18px rgba(193,17,25,.35);margin-top:auto}
.xg-combo-verde{background:#1fb955;box-shadow:0 8px 18px rgba(31,185,85,.3)}
@media (prefers-reduced-motion:reduce){.xg-combo,.xg-combo-tarjeta,.xg-combo-btn{transition:none}}

/* ── t76 · Carrusel de «Individuales»: flechas para avanzar y retroceder, y
      tarjetas parejas (misma altura tenga el título una o dos líneas). ── */
.xg-carrusel{position:relative}
.xg-flecha{position:absolute;top:33%;transform:translateY(-50%);z-index:5;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(10,10,12,.74);color:#fff;font:400 36px/1 "DM Sans",Manrope,sans-serif;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.5);padding:0 0 5px;transition:background .2s ease,border-color .2s ease,transform .2s ease}
.xg-flecha:hover{background:#C11119;border-color:#C11119;transform:translateY(-50%) scale(1.06)}
.xg-flecha:focus-visible{outline:2px solid #fff;outline-offset:2px}
.xg-flecha-izq{left:10px}.xg-flecha-der{right:10px}
@media (max-width:640px){.xg-flecha{width:38px;height:38px;font-size:30px;top:30%}}
.xg-vagon{display:flex}
.xg-vagon>div{flex:1 1 auto;display:flex;flex-direction:column;width:100%;min-width:0}
.xg-grid>div{display:flex;flex-direction:column}
.xg-vagon .xg-carta,.xg-grid .xg-carta{flex:1}
.xg-carta-nombre{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.4em}
.xg-carta-cuerpo{gap:12px}
.xg-carta-precio{margin-top:auto}
@media (prefers-reduced-motion:reduce){.xg-flecha{transition:none}}

/* ── t78 · El bloque «Tu centro integral para suscripciones digitales» va
      CENTRADO: título, frase y botón en el centro, y la luz roja también. ── */
.xg-cta{text-align:center}
.xg-cta-texto{max-width:780px;margin:0 auto;text-align:center}
.xg-cta::after{background:radial-gradient(ellipse 55% 70% at 50% 50%,rgba(193,17,25,.42),transparent 70%),linear-gradient(90deg,rgba(12,12,12,.88) 0%,rgba(42,1,4,.62) 50%,rgba(12,12,12,.88) 100%)}
@media (max-width:640px){.xg-cta-texto{margin:0 auto}}

/* ── t79 · Precio anterior tachado y «Ahorras X%» en toda la tienda ── */
.xg-carta-old{margin-left:8px;font-size:12.5px;color:#8a877f;font-weight:600}
.xg-carta-desc{position:absolute;top:10px;right:10px;z-index:2;background:#C11119;color:#fff;font:800 11px/1 "DM Sans",Manrope,sans-serif;padding:6px 9px;border-radius:999px;letter-spacing:.04em;box-shadow:0 4px 12px rgba(193,17,25,.45)}
.xg-ahorro-pill{display:inline-block;margin-left:10px;background:#C11119;color:#fff;font:700 11px/1 "DM Sans",Manrope,sans-serif;padding:5px 9px;border-radius:999px;vertical-align:middle;letter-spacing:.03em;white-space:nowrap}
.xg-ahorro-mini{margin-left:6px;background:#C11119;color:#fff;font:700 10px/1 "DM Sans",Manrope,sans-serif;padding:3px 6px;border-radius:999px;vertical-align:middle}
.mp-price-box{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 10px}

/* ── t83 · Chat legible: lo que escribe la OTRA parte va en burbuja clara con
      letra oscura. Antes .mp-burbuja-in tenía letra casi blanca (pensada
      para el tema oscuro) y sobre los paneles blancos no se leía nada: ni
      el vendedor leía al comprador ni el comprador al vendedor. Vale para
      el chat del pedido (vendedor y comprador) y para el de posventa. ── */
.mp-burbuja-in{background:#eef1f6;border:1px solid #dfe4ec;color:#1d2736;box-shadow:0 1px 2px rgba(20,30,60,.06)}
.mp-burbuja-in p,.mp-burbuja-in span{color:#1d2736}
.mp-burbuja-in .text-muted-foreground,.mp-burbuja-in .opacity-60{color:#6b7280;opacity:1}
.mp-burbuja-in .text-accent{color:#b45309}
.mp-burbuja-mia,.mp-burbuja-mia p{color:#fff}
.mp-burbuja-mia .text-muted-foreground{color:rgba(255,255,255,.85)}