/* =============================================================
   SISTEMA CAPILAR — Diseño "Glass" (estilo iOS, vidrio esmerilado)
   Todo va dentro de html.glass: si el diseño está en "Clásico",
   este archivo no cambia nada. Se activa en el panel
   (Ajustes → General → Diseño) o se prueba con ?tema=glass
   ============================================================= */
html.glass{
  --g-bg:rgba(255,255,255,.56);
  --g-bg2:rgba(255,255,255,.78);
  --g-brd:rgba(255,255,255,.72);
  --g-line:rgba(60,30,80,.08);
  --g-hi:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.28);
  --g-sh:var(--g-hi),0 1px 2px rgba(60,30,80,.05),0 14px 40px -22px rgba(70,30,95,.38);
  --g-sh-lg:var(--g-hi),0 2px 6px rgba(60,30,80,.06),0 30px 70px -28px rgba(70,30,95,.5);
  --g-blur:blur(24px) saturate(185%);
  --line:rgba(60,30,80,.09);
  --soft:rgba(255,255,255,.6);
  --r:20px;
  --shadow:var(--g-sh-lg);
}
/* fondo: luz de color suave detrás del vidrio (morado y oro de la marca) */
html.glass body{background:#F4EFF6}
html.glass body::before{content:"";position:fixed;inset:-12%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 34% at 8% 6%,rgba(156,86,196,.30),transparent 70%),
    radial-gradient(34% 30% at 92% 8%,rgba(236,178,74,.30),transparent 70%),
    radial-gradient(42% 38% at 86% 82%,rgba(110,40,140,.20),transparent 72%),
    radial-gradient(40% 36% at 6% 92%,rgba(255,168,196,.28),transparent 72%),
    radial-gradient(30% 26% at 50% 48%,rgba(255,255,255,.7),transparent 70%),
    linear-gradient(180deg,#F8F4FA 0%,#F2ECF3 100%)}
html.glass ::selection{background:rgba(94,28,120,.85)}

/* ---------- vidrio reutilizable ---------- */
html.glass :is(.form-card,.icard,.brand-card,.channel,.summary,.assure,.event,.order-ok,.empty-state,.co-sec,.rv-sum,.wl-code,.wl-cards div,.trk-doc,.oacc,.bank,.pi-card,.trk-pay,.mega-prod .ph,.steps li,.perk,.fgroup,.ok-sum div,.co-pick div){
  background:var(--g-bg);border:1px solid var(--g-brd);box-shadow:var(--g-sh);border-radius:var(--r)}
html.glass .page-head:not(.img){background:var(--g-bg);border:1px solid var(--g-brd);box-shadow:var(--g-sh);border-radius:28px}

/* ---------- botones: cápsulas con brillo ---------- */
html.glass .btn{border-radius:999px;letter-spacing:.07em;transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease),box-shadow .25s}
html.glass .btn:active{transform:scale(.97)}
html.glass .btn-dark{background:linear-gradient(180deg,#43384A 0%,#221B25 100%);border-color:rgba(255,255,255,.1);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 12px 26px -14px rgba(31,26,32,.75)}
html.glass .btn-dark:hover{background:linear-gradient(180deg,#4F4256 0%,#2A222E 100%)}
html.glass .btn-line{background:rgba(255,255,255,.6);border-color:rgba(255,255,255,.9);color:var(--ink);box-shadow:var(--g-sh);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
html.glass .btn-line:hover{background:#fff;color:var(--ink)}
html.glass .btn-gold{background:linear-gradient(180deg,#F6CF78 0%,#E3A12D 60%,#CF8D19 100%);border-color:rgba(255,255,255,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 12px 26px -12px rgba(227,161,45,.85)}
html.glass .btn-gold:hover{filter:brightness(1.05)}
html.glass .btn-wa{background:linear-gradient(180deg,#34C66B,#1FAF55);border-color:rgba(255,255,255,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 12px 26px -12px rgba(31,175,85,.7)}
html.glass .btn-light{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.5);color:#fff;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
html.glass .btn-light:hover{background:rgba(255,255,255,.95);color:var(--ink)}
html.glass .link{border-bottom-color:rgba(31,26,32,.25)}

/* ---------- barra de anuncios y header ---------- */
html.glass .announce{background:linear-gradient(90deg,#2B1438,#1F1A20 50%,#2B1438)}
html.glass .site-header{background:rgba(255,255,255,.58);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
  border-bottom:1px solid rgba(255,255,255,.7);box-shadow:0 1px 0 rgba(60,30,80,.05)}
html.glass .site-header.scrolled{box-shadow:0 1px 0 rgba(60,30,80,.05),0 18px 40px -26px rgba(70,30,95,.45)}
html.glass .hdr-nav{border-top:1px solid rgba(60,30,80,.05)}
html.glass .hdr-search input{background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.9);box-shadow:inset 0 1px 3px rgba(60,30,80,.08)}
html.glass .hdr-search input:focus{background:#fff;border-color:rgba(94,28,120,.35);box-shadow:0 0 0 4px rgba(94,28,120,.10)}
html.glass .hdr-act{border-radius:999px}
html.glass .hdr-act:hover{background:rgba(255,255,255,.75);box-shadow:var(--g-sh)}
html.glass .nav{align-items:center;gap:2px}
html.glass .nav>li>a{height:36px;border-radius:999px;padding:0 15px;transition:background .25s,color .25s,box-shadow .25s}
html.glass .nav>li>a::after{display:none}
html.glass .nav>li:hover>a,html.glass .nav>li:focus-within>a{background:rgba(255,255,255,.7);box-shadow:var(--g-sh)}
html.glass .nav>li>a[aria-current="page"]{background:#fff;color:var(--plum);box-shadow:var(--g-sh)}
html.glass .nav .cta a{background:linear-gradient(180deg,#7B2F9C,#5E1C78);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 22px -12px rgba(94,28,120,.8)}
html.glass .mega{background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);border-top:1px solid rgba(255,255,255,.8);border-radius:0 0 28px 28px;box-shadow:0 40px 80px -40px rgba(70,30,95,.5)}
html.glass .mega-prod .ph{padding:0;overflow:hidden}
html.glass .mega-promo{border-radius:22px}
html.glass .suggest{background:rgba(255,255,255,.86);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border:1px solid var(--g-brd);border-radius:20px;box-shadow:var(--g-sh-lg)}
html.glass .suggest a{border-radius:14px}
html.glass .suggest a:hover,html.glass .suggest a.on{background:rgba(255,255,255,.9)}
html.glass .suggest img{border-radius:10px}

/* ---------- portada ---------- */
html.glass .hero{border-radius:0 0 36px 36px;margin:0 0 4px}
html.glass .hero-arrow{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
html.glass .hero-ctrl button{background:rgba(255,255,255,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
html.glass .perks{border:0}
html.glass .perks .wrap{gap:14px;padding-top:26px;padding-bottom:10px}
html.glass .perk{padding:14px 16px}
html.glass .perk svg{width:40px;height:40px;padding:9px;border-radius:13px;background:linear-gradient(180deg,#FFF6E3,#FBE7BD);color:var(--gold);box-shadow:inset 0 1px 0 #fff,0 6px 14px -8px rgba(198,138,22,.6)}
html.glass .cat .ring{background:rgba(255,255,255,.6);border:2px solid rgba(255,255,255,.85);box-shadow:var(--g-sh)}
html.glass .cat:hover .ring{border-color:var(--gold-l)}
html.glass .tab-btn{background:rgba(255,255,255,.55);border-color:rgba(255,255,255,.85);box-shadow:var(--g-sh)}
html.glass .tab-btn[aria-selected="true"]{background:linear-gradient(180deg,#43384A,#221B25);border-color:transparent;color:#fff}
html.glass .promo{border-radius:28px;box-shadow:var(--g-sh-lg)}
html.glass .promo::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),inset 0 1px 0 rgba(255,255,255,.4)}
html.glass .brand-card:hover,html.glass .channel:hover{border-color:#fff;box-shadow:var(--g-sh-lg);transform:translateY(-2px)}
html.glass .brand-card,html.glass .channel{transition:transform .3s var(--ease),box-shadow .3s}
html.glass .band{border-radius:30px;background:linear-gradient(120deg,rgba(123,47,156,.96),rgba(62,17,80,.96) 60%,rgba(42,12,54,.97));box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 30px 60px -30px rgba(94,28,120,.7)}
html.glass .band::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.18),transparent 35%)}
html.glass .icard .ic{background:linear-gradient(180deg,#FFF6E3,#FBE7BD);box-shadow:inset 0 1px 0 #fff}
html.glass .steps li{padding:20px;border-top:1px solid var(--g-brd)}
html.glass .vcard,html.glass .yt-play,html.glass .yt-frame{border-radius:24px;box-shadow:var(--g-sh-lg)}
html.glass .yt-btn{background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 #fff,0 10px 30px -10px rgba(0,0,0,.5)}
html.glass .tone-card{border-radius:22px;border:1px solid var(--g-brd);box-shadow:var(--g-sh)}
html.glass .ig-tile{border-radius:18px}
html.glass .ig-avatar img{border-color:rgba(255,255,255,.9)}

/* ---------- tarjeta de producto ---------- */
html.glass .grid{gap:22px 18px}
html.glass .pcard{background:var(--g-bg);border:1px solid var(--g-brd);border-radius:26px;padding:10px 10px 16px;box-shadow:var(--g-sh);transition:transform .45s var(--ease),box-shadow .45s}
html.glass .pcard:hover{transform:translateY(-4px);box-shadow:var(--g-sh-lg)}
html.glass .pcard .ph{border-radius:19px}
html.glass .pcard .info{padding:12px 6px 0}
html.glass .badge{border-radius:999px;background:rgba(255,255,255,.82);box-shadow:var(--g-hi),0 4px 10px -6px rgba(0,0,0,.3)}
html.glass .badge.best{background:linear-gradient(180deg,#F6CF78,#E3A12D)}
html.glass .badge.plum{background:linear-gradient(180deg,#7B2F9C,#5E1C78)}
html.glass .pcard .quick .btn{background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.9)}
html.glass .pcard .quick .btn:hover{background:#fff;color:var(--ink)}
html.glass .pcard .vlabel{border-radius:999px;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html.glass .vchip{box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 3px 8px -4px rgba(0,0,0,.25)}

/* ---------- colección y producto ---------- */
html.glass .filters .fgroup{margin-bottom:12px;padding:14px 16px}
html.glass .fgroup input{border-color:rgba(60,30,80,.25);background:rgba(255,255,255,.7);border-radius:6px}
html.glass .sort select,html.glass .order-row select{background:rgba(255,255,255,.65);border:1px solid rgba(255,255,255,.9);border-radius:999px;box-shadow:var(--g-sh)}
html.glass .gallery .main{border-radius:30px;box-shadow:var(--g-sh-lg);border:1px solid var(--g-brd)}
html.glass .thumbs button{border-radius:16px;border:2px solid rgba(255,255,255,.8);box-shadow:var(--g-sh)}
html.glass .thumbs button[aria-current="true"]{border-color:var(--plum)}
html.glass .opt{background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.9);border-radius:999px;box-shadow:var(--g-sh)}
html.glass .opt[aria-pressed="true"]{background:linear-gradient(180deg,#43384A,#221B25);border-color:transparent}
html.glass :is(.stepper,.qty){background:rgba(255,255,255,.65);border:1px solid rgba(255,255,255,.9);border-radius:999px;box-shadow:var(--g-sh)}
html.glass .acc details,html.glass .acc{border-color:var(--g-line)}
html.glass .sw i{box-shadow:inset 0 0 0 1px rgba(0,0,0,.1),inset 0 6px 10px rgba(255,255,255,.35),0 4px 10px -6px rgba(0,0,0,.4)}
html.glass .crumbs{padding:20px 0 14px}

/* ---------- formularios ---------- */
html.glass :is(.field input,.field select,.field textarea,.wl-in input,.acct-card .field input){background:rgba(118,110,128,.08);border:1px solid rgba(60,30,80,.13);border-radius:14px;box-shadow:inset 0 1px 2px rgba(60,30,80,.06)}
html.glass :is(.field input,.field select,.field textarea):focus{background:#fff;border-color:rgba(94,28,120,.35);box-shadow:0 0 0 4px rgba(94,28,120,.10)}
html.glass .co-sec h2 span{background:linear-gradient(180deg,#43384A,#221B25)}
html.glass .opt-card{background:rgba(255,255,255,.55);border:1.5px solid rgba(255,255,255,.9);border-radius:16px;box-shadow:var(--g-sh)}
html.glass .opt-card:has(input:checked){background:#fff;border-color:var(--plum)}
html.glass .co-note{background:rgba(255,255,255,.55);border:1px solid var(--g-brd);border-radius:14px}
html.glass .co-steps li{background:rgba(255,255,255,.55);border:1px solid var(--g-brd)}
html.glass .co-steps li.on::before{background:linear-gradient(180deg,#43384A,#221B25)}
html.glass .order-row{border-bottom-color:var(--g-line)}
html.glass .order-row img{border-radius:16px}
html.glass .summary .total{border-color:var(--g-line)}

/* ---------- seguimiento, reseñas y puntos ---------- */
html.glass .trk-badge{border-radius:999px;box-shadow:var(--g-hi)}
html.glass .trk-item{border-bottom-color:var(--g-line)}
html.glass .rv{border-bottom-color:var(--g-line)}
html.glass .wl-hero{border-radius:32px;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 30px 60px -30px rgba(31,26,32,.7)}
html.glass .wl-card{border-radius:28px;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 30px 60px -30px rgba(31,26,32,.7)}
html.glass .oacc{background:rgba(244,237,247,.7);border-color:rgba(94,28,120,.3)}

/* ---------- footer ---------- */
html.glass .site-footer{background:rgba(255,255,255,.42);border-top:1px solid rgba(255,255,255,.75);border-radius:36px 36px 0 0;box-shadow:var(--g-hi)}
html.glass .ft-news{background:linear-gradient(110deg,#2B1438,#1F1A20);border-radius:36px 36px 0 0}
html.glass .ft-social a{background:rgba(255,255,255,.65);border-color:rgba(255,255,255,.9);box-shadow:var(--g-sh)}
html.glass .ft-bottom{border-top-color:var(--g-line)}

/* ---------- ventanas y avisos ---------- */
html.glass :is(.ap-card,.acct-card){background:rgba(255,255,255,.78);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border:1px solid var(--g-brd);border-radius:28px;box-shadow:var(--g-sh-lg)}
html.glass .ap-item{background:rgba(255,255,255,.6);border:1px solid var(--g-brd);border-radius:18px}
html.glass .pp-card{background:rgba(255,255,255,.82);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border:1px solid var(--g-brd);border-radius:32px;box-shadow:var(--g-sh-lg)}
html.glass .pp-close{background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html.glass .pp-pres button{border-radius:999px;background:rgba(255,255,255,.6);border-color:rgba(255,255,255,.9)}
html.glass .pp-pres button[aria-checked="true"]{background:linear-gradient(180deg,#43384A,#221B25)}
html.glass .pp-offer{border-radius:14px}
html.glass .promo-pop.show{background:rgba(30,16,36,.35);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html.glass .acct-pop{background:rgba(30,16,36,.25);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
html.glass .toast{background:rgba(31,26,32,.72);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 18px 40px -16px rgba(0,0,0,.6)}
html.glass .wa-float{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 14px 30px -10px rgba(31,175,85,.7);background:linear-gradient(180deg,#36CC6E,#1FAF55)}

/* ---------- celular: menú, buscador y barra inferior ---------- */
html.glass .drawer .scrim{background:rgba(30,16,36,.3);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
html.glass .drawer .panel{background:rgba(255,255,255,.8);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border-right:1px solid var(--g-brd);border-radius:0 30px 30px 0;box-shadow:var(--g-sh-lg)}
html.glass .dr-head,html.glass .dr-body details,html.glass .dr-body>a{border-color:var(--g-line)}
html.glass .msearch{background:rgba(255,255,255,.82);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
html.glass .msearch input{background:rgba(255,255,255,.8);border-color:rgba(94,28,120,.3)}
@media (max-width:1024px){
  html.glass .filters{background:rgba(255,255,255,.85);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border-radius:0 28px 28px 0}
}
@media (max-width:960px){
  html.glass .site-header{background:rgba(255,255,255,.62)}
  html.glass .hero{border-radius:0 0 28px 28px}
  html.glass .tabbar{background:rgba(255,255,255,.62)!important;-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border:1px solid rgba(255,255,255,.8)!important;border-radius:28px;
    box-shadow:var(--g-hi),0 20px 40px -18px rgba(70,30,95,.55)!important}
  html.glass .tab-bubble{background:linear-gradient(180deg,#43384A,#221B25);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 10px 24px -8px rgba(31,26,32,.6),0 0 0 5px rgba(255,255,255,.85)}
  html.glass .tab[aria-current="page"]{color:var(--plum)}
  html.glass .pcard{border-radius:22px;padding:7px 7px 12px}
  html.glass .pcard .ph{border-radius:16px}
  html.glass .site-footer,html.glass .ft-news{border-radius:28px 28px 0 0}
}
@media (prefers-reduced-transparency:reduce){
  html.glass{--g-bg:rgba(255,255,255,.94);--g-bg2:#fff}
}