/* ============================================================================
   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}