:root{
    /* v82 — la casa se viste de GRIS Y NEGRO premium (grafito + plata) */
    --bg:#0A0A0D;
    --bg-2:#111116;
    --surface:#16161C;
    --surface-2:#1D1D25;
    --line: rgba(226,230,238,0.09);
    --line-strong: rgba(226,230,238,0.18);
    --purple: #A9B4C8;        /* el acento de interacción ahora es PLATA */
    --purple-soft: #C9CFDA;
    --purple-deep: #6E7787;
    --purple-glow: rgba(201,207,218,0.35);
    --plata: #C9CFDA;
    --pink: #FF4FA3;
    --cyan: #3DE7D6;
    --gold: #E8B94A;
    --gold-soft: #F5D488;
    --text: #F2F3F6;
    --text-dim: #ABB0BC;
    --text-faint: #6E7480;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  html.no-scroll{overflow:hidden;}
  /* =========================================================================
     v116 — LA TRANSICIÓN DEL MODO FLUIDO
     Se cruza de un modo al otro con la View Transition del navegador: el
     propio navegador toma una foto del "antes", pinta el "después" y
     funde las dos EN LA GPU. No hay re-render, no hay salto de layout, no
     hay trabajo de JavaScript por fotograma — solo opacidad, que es lo
     único que una pantalla puede animar sin despeinarse.
     Donde no exista (Safari viejo), abajo hay un fundido de respaldo que
     también es solo opacidad sobre un elemento fijo: mismo resultado.
     ========================================================================= */
  ::view-transition-group(root){animation-duration:.42s;}
  ::view-transition-old(root), ::view-transition-new(root){
    animation-duration:.42s; animation-timing-function:cubic-bezier(.22,.61,.36,1);
    mix-blend-mode:normal;   /* sin mezclas raras: nada de grises a medio camino */
  }
  ::view-transition-old(root){animation-name:fpTemaSale;}
  ::view-transition-new(root){animation-name:fpTemaEntra;}
  @keyframes fpTemaSale{to{opacity:0;}}
  @keyframes fpTemaEntra{from{opacity:0;}}
  /* respaldo: un velo del MISMO color del fondo que aparece y se va */
  .fp-velo-tema{
    position:fixed; inset:0; z-index:2000; pointer-events:none; opacity:0;
    background:var(--bg, #0E0A14);
    transition:opacity .2s linear;
    will-change:opacity; contain:strict;
  }
  .fp-velo-tema.on{opacity:1;}
  /* mientras cruza, nadie más anima: se le deja la pista libre a la GPU */
  html.fp-cambiando *, html.fp-cambiando *::before, html.fp-cambiando *::after{
    animation-play-state:paused !important;
    transition:none !important;
  }
  /* ---- sensación de app: toques limpios ---- */
  html{overflow-x:hidden; overflow-x:clip;}               /* nada ensancha la página en móvil (p. ej. la tabla comparativa) */
  html{-webkit-tap-highlight-color:transparent;}          /* sin destello gris al tocar */
  html, body{overscroll-behavior-y:none;}                 /* sin "jalar para recargar" accidental */
  a, button, .chip, .tab-item, .view-btn, .icon-toggle, .card, .carousel-arrow{touch-action:manipulation;} /* sin zoom por doble toque */
  nav#top, .mobile-tabbar, .chip, .view-btn, .icon-toggle, .carousel-arrow, .tab-item,
  .card-cta, .unlock-btn, .hero-actions, .filter-row{-webkit-user-select:none; user-select:none;} /* no se selecciona texto de la interfaz al mantener presionado */
  img{-webkit-touch-callout:none; -webkit-user-drag:none;} /* sin menú de "guardar imagen" al dejar presionado (iOS) */
  body{
    background:
      radial-gradient(ellipse 900px 500px at 15% -10%, rgba(201,207,218,0.13), transparent 60%),
      radial-gradient(ellipse 700px 500px at 100% 10%, rgba(232,185,74,0.07), transparent 55%),
      radial-gradient(ellipse 600px 400px at 50% 100%, rgba(120,128,142,0.08), transparent 60%),
      var(--bg);
    color:var(--text);
    font-family:'Inter', sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    text-transform:uppercase;
    letter-spacing:0.01em;
    transition:background 0.4s ease, color 0.4s ease;
  }
  a{color:inherit; text-decoration:none;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 28px;}
  ::selection{background:var(--purple); color:#fff;}
  body::before{
    content:''; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:0.035; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* TEMA CLARO */
  [data-theme="light"]{
    --bg:#FAF7F1; --bg-2:#F2ECDF; --surface:#FFFFFF; --surface-2:#F5F0E5;
    --line: rgba(28,21,38,0.08); --line-strong: rgba(28,21,38,0.15);
    --purple:#7C3AED; --purple-deep:#5B3AA8; --purple-glow: rgba(124,58,237,0.28);
    --gold:#A6752E; --gold-soft:#8A5F26;
    --text:#211830; --text-dim:#5B4E6C; --text-faint:#8A7C99;
  }
  [data-theme="light"] body{
    background:
      radial-gradient(ellipse 900px 500px at 15% -10%, rgba(124,58,237,0.08), transparent 60%),
      radial-gradient(ellipse 700px 500px at 100% 10%, rgba(166,117,46,0.06), transparent 55%),
      var(--bg);
  }
  [data-theme="light"] nav{background:rgba(250,247,241,0.78); border-bottom-color:var(--line);}
  [data-theme="light"] nav.scrolled{background:rgba(250,247,241,0.94); box-shadow:0 12px 30px -18px rgba(0,0,0,0.16);}
  [data-theme="light"] .mobile-tabbar{background:rgba(250,247,241,0.9); box-shadow:0 18px 40px -16px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.7);}

  /* scrollbar */
  ::-webkit-scrollbar{width:10px; height:8px;}
  ::-webkit-scrollbar-track{background:var(--bg);}
  ::-webkit-scrollbar-thumb{background:linear-gradient(180deg, var(--surface-2), var(--purple-deep)); border-radius:10px; border:2px solid var(--bg);}
  ::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg, var(--purple-deep), var(--purple));}

  /* reveal on scroll */
  .reveal{opacity:0; transform:translateY(18px); transition:opacity 0.55s var(--ease), transform 0.55s var(--ease);}
  .reveal.in-view{opacity:1; transform:translateY(0);}

  /* aparición escalonada de tarjetas dentro de secciones reveal */
  .steps-grid > .step, .stats-grid > .stat, .channels-grid > .channel-card, .faq-list > .faq-item{
    opacity:0; transform:translateY(16px) scale(0.98);
    transition:opacity 0.55s var(--ease), transform 0.55s var(--ease-bounce);
  }
  .reveal.in-view .step, .reveal.in-view .stat, .reveal.in-view .channel-card, .reveal.in-view .faq-item{
    opacity:1; transform:translateY(0) scale(1);
  }
  .step:nth-child(1), .stat:nth-child(1), .channel-card:nth-child(1), .faq-item:nth-child(1){transition-delay:0.05s;}
  .step:nth-child(2), .stat:nth-child(2), .channel-card:nth-child(2), .faq-item:nth-child(2){transition-delay:0.13s;}
  .step:nth-child(3), .stat:nth-child(3), .channel-card:nth-child(3), .faq-item:nth-child(3){transition-delay:0.21s;}
  .step:nth-child(4), .stat:nth-child(4), .faq-item:nth-child(4){transition-delay:0.29s;}
  .faq-item:nth-child(5){transition-delay:0.37s;}
  .faq-item:nth-child(6){transition-delay:0.45s;}
  .faq-item:nth-child(7){transition-delay:0.53s;}

  @keyframes floatOrb{
    0%, 100%{transform:translate(0,0) scale(1);}
    50%{transform:translate(-16px, 22px) scale(1.06);}
  }
  @keyframes fadeInUp{
    from{opacity:0; transform:translateY(18px);}
    to{opacity:1; transform:translateY(0);}
  }
  @keyframes cardIn{
    from{opacity:0; transform:translateY(16px) scale(0.98);}
    to{opacity:1; transform:translateY(0) scale(1);}
  }
  @keyframes shimmer{
    0%{background-position:-200% 0;}
    100%{background-position:200% 0;}
  }
  /* dentro de Telegram: respeta el área segura superior */
  html.in-telegram nav#top{ padding-top:calc(8px + var(--tg-top, env(safe-area-inset-top))); }
  /* dentro de Telegram NADA queda bajo los controles nativos (los 3 puntitos):
     todo lo fijo de arriba baja según el área segura real */
  html.in-telegram .star-profile-back{ top:calc(14px + var(--tg-top, 0px)); }
  html.in-telegram .star-profile-inner{ padding-top:calc(58px + var(--tg-top, 0px)) !important; }
  html.in-telegram .vip-zona{ padding-top:calc(12px + var(--tg-top, 0px)); }
  html.in-telegram .vip-visor .vip-cerrar{ top:calc(10px + var(--tg-top, 0px)); }
  /* el visor de historias también respeta los controles nativos de Telegram */
  html.in-telegram .story-barras{ top:calc(10px + var(--tg-top, 0px)); }
  html.in-telegram .story-x{ top:calc(24px + var(--tg-top, 0px)); }
  html.in-telegram .story-cabecera{ top:calc(24px + var(--tg-top, 0px)); }
  html.in-telegram .catalog-sticky, html.in-telegram .cat-filter-bar{ top:calc(var(--tg-top, 0px)); }
  /* el botón central del tabbar DENTRO de Telegram: sin desfase agresivo
     (algunos teléfonos lo recortaban) — siempre visible, pase lo que pase */
  html.in-telegram .mobile-tabbar{ overflow:visible !important; bottom:calc(10px + var(--tg-bottom, env(safe-area-inset-bottom))); }
  html.in-telegram .tab-center{ display:flex !important; }
  html.in-telegram .tab-center-btn{ margin-top:-14px; width:48px; height:48px; z-index:61; transform:translateZ(0); }
  /* botones cómodos para el dedo en pantallas chicas */
  @media (max-width:560px){
    .icon-toggle{min-width:42px; min-height:42px;}
    .fav-btn{min-width:42px; min-height:42px; display:inline-flex; align-items:center; justify-content:center;}
    .vip-cerrar{width:46px; height:46px; font-size:17px;}
    .vip-volver{min-height:42px;}
    .star-profile-back{min-height:42px;}
    .channels-sheet [data-sheet-close] i{font-size:20px;}
    .chip{min-height:38px;}
  }
  /* dentro de Telegram el nav es más bajo y compacto, como el header de una app */
  html.in-telegram nav .wrap{ height:56px; }
  html.in-telegram .brand{ font-size:17px; gap:9px; }
  html.in-telegram .brand .mark{ width:30px; height:30px; }
  html.in-telegram .brand-tag{ display:none; }
  /* instalada como app en el teléfono (PWA): mismo trato compacto que en Telegram */
  html.app-standalone nav#top{ padding-top:calc(8px + env(safe-area-inset-top)); }
  html.app-standalone nav .wrap{ height:56px; }
  html.app-standalone .brand{ font-size:17px; gap:9px; }
  html.app-standalone .brand .mark{ width:30px; height:30px; }
  html.app-standalone .brand-tag{ display:none; }
  /* el nav se oculta al bajar y reaparece al subir (comportamiento de app) */
  nav#top{ transition:transform 0.3s var(--ease), background 0.35s ease, border-color 0.35s ease; }
  nav#top.nav-hidden{ transform:translateY(-100%); }
  /* resaltado breve al llegar a una sección por la barra (feedback tipo app) */
  @keyframes sectionArrive{0%{background:rgba(139,92,246,0.07);} 100%{background:transparent;}}
  section.arriving{animation:sectionArrive 0.9s ease-out;}
  html[data-lite="1"] section.arriving{animation:none;}
  @keyframes pulseDot{
    0%, 100%{opacity:1; transform:scale(1);}
    50%{opacity:0.5; transform:scale(1.3);}
  }

  /* =========================================================
     SPLASH DE ARRANQUE — pantalla de marca al abrir (como app)
     ========================================================= */
  .app-splash{
    position:fixed; inset:0; z-index:400; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:18px;
    background:
      radial-gradient(ellipse 700px 420px at 50% 0%, rgba(157,92,255,0.2), transparent 60%),
      var(--bg);
    transition:opacity 0.45s ease, visibility 0.45s ease;
  }
  .app-splash.hide{opacity:0; visibility:hidden; pointer-events:none;}
  .app-splash .splash-mark{
    position:relative; width:88px; height:88px; filter:drop-shadow(0 10px 30px rgba(139,92,246,0.55));
    animation:splashPop 0.7s var(--ease-bounce) both;
  }
  .app-splash .splash-mark svg{width:100%; height:100%; display:block; position:relative; z-index:1;}
  /* v114 — el icono se LLENA DE LECHE mientras abre la web (lo pidió Luis) */
  .splash-vaso{
    position:absolute; inset:5px; z-index:2; pointer-events:none;
    border-radius:19px 19px 20px 20px; overflow:hidden;
  }
  .splash-leche{
    position:absolute; left:0; right:0; bottom:0; height:0;
    background:linear-gradient(180deg, rgba(255,252,242,0.88), rgba(246,236,214,0.8));
    animation:fpLlenaSplash 1.05s cubic-bezier(.35,.75,.35,1) forwards;
  }
  @keyframes fpLlenaSplash{from{height:0;} to{height:84%;}}
  .splash-leche::before{
    content:''; position:absolute; top:-4px; left:-50%; width:200%; height:9px; border-radius:50%;
    background:rgba(255,252,242,0.88); animation:fpOla 2.2s ease-in-out infinite;
  }
  html[data-lite="1"] .splash-leche{animation:none; height:52%;}
  html[data-lite="1"] .splash-leche::before{animation:none;}
  @keyframes splashPop{from{opacity:0; transform:scale(0.7);} to{opacity:1; transform:scale(1);}}
  .app-splash .splash-name{
    font-family:'Fraunces', serif; font-size:24px; font-weight:600; letter-spacing:0.08em; color:var(--text);
    animation:fadeInUp 0.6s 0.15s var(--ease) both;
  }
  .app-splash .splash-dots{display:flex; gap:7px; margin-top:4px;}
  .app-splash .splash-dots i{
    width:7px; height:7px; border-radius:50%; background:var(--purple);
    animation:splashDot 1s ease-in-out infinite; animation-delay:calc(var(--i) * 0.18s);
  }
  @keyframes splashDot{0%,100%{opacity:0.25; transform:scale(0.8);} 50%{opacity:1; transform:scale(1.15);}}

  /* =========================================================
     INSTALAR LA APP — banner discreto + hoja de pasos (iPhone)
     ========================================================= */
  .install-banner{
    position:fixed; left:12px; right:12px; z-index:55;
    bottom:calc(90px + env(safe-area-inset-bottom));
    display:none; align-items:center; gap:12px; padding:13px 14px;
    border-radius:16px; border:1px solid var(--line-strong);
    background:rgba(28,21,38,0.96); backdrop-filter:blur(14px) saturate(140%);
    box-shadow:0 18px 40px -14px rgba(0,0,0,0.7);
    transform:translateY(16px); opacity:0;
    transition:transform 0.35s var(--ease-bounce), opacity 0.3s ease;
  }
  [data-theme="light"] .install-banner{background:rgba(255,255,255,0.97);}
  .install-banner.show{transform:translateY(0); opacity:1;}
  @media (max-width:768px){ .install-banner:not([hidden]){display:flex;} }
  .install-banner .ib-icon{width:42px; height:42px; border-radius:12px; flex-shrink:0; overflow:hidden;}
  .install-banner .ib-icon svg{width:100%; height:100%; display:block;}
  .install-banner .ib-text{flex:1; min-width:0;}
  .install-banner .ib-title{font-size:12.5px; font-weight:700; color:var(--text); letter-spacing:0.03em;}
  .install-banner .ib-sub{font-size:10.5px; color:var(--text-dim); margin-top:2px; letter-spacing:0.02em;}
  .install-banner .ib-btn{
    flex-shrink:0; border:none; cursor:pointer; font-family:inherit;
    padding:10px 16px; border-radius:999px; font-size:11.5px; font-weight:800; letter-spacing:0.06em;
    background:linear-gradient(135deg, var(--purple), var(--pink)); color:#fff; text-transform:uppercase;
    box-shadow:0 6px 16px -6px var(--purple-glow);
  }
  .install-banner .ib-btn:active{transform:scale(0.95);}
  .install-banner .ib-close{
    flex-shrink:0; width:28px; height:28px; border-radius:50%; border:1px solid var(--line-strong);
    background:none; color:var(--text-faint); cursor:pointer; font-size:13px;
    display:flex; align-items:center; justify-content:center;
  }
  /* hoja con los pasos para instalar en iPhone (Safari no deja con un clic) */
  .ios-sheet{position:fixed; inset:0; z-index:320; visibility:hidden; pointer-events:none;}
  .ios-sheet.open{visibility:visible; pointer-events:auto;}
  .ios-sheet-backdrop{position:absolute; inset:0; background:rgba(6,4,10,0.82); backdrop-filter:blur(6px); opacity:0; transition:opacity 0.3s ease;}
  .ios-sheet.open .ios-sheet-backdrop{opacity:1;}
  .ios-sheet-panel{
    position:absolute; left:0; right:0; bottom:0;
    background:var(--bg); border-radius:24px 24px 0 0; border-top:1px solid var(--line-strong);
    padding:14px 22px calc(24px + env(safe-area-inset-bottom));
    transform:translateY(100%); transition:transform 0.36s var(--ease);
    box-shadow:0 -20px 50px -20px rgba(0,0,0,0.6);
  }
  .ios-sheet.open .ios-sheet-panel{transform:translateY(0);}
  .ios-sheet-handle{width:40px; height:4px; border-radius:4px; background:var(--line-strong); margin:0 auto 18px;}
  .ios-sheet-title{font-family:'Fraunces', serif; font-size:20px; font-weight:600; margin-bottom:4px;}
  .ios-sheet-sub{font-size:11.5px; color:var(--text-dim); margin-bottom:16px; letter-spacing:0.02em;}
  .ios-step{display:flex; align-items:center; gap:13px; padding:12px 0;}
  .ios-step + .ios-step{border-top:1px solid var(--line);}
  .ios-step-num{
    width:26px; height:26px; border-radius:50%; flex-shrink:0; font-size:12px; font-weight:800;
    background:rgba(139,92,246,0.14); border:1px solid rgba(139,92,246,0.35); color:var(--purple);
    display:flex; align-items:center; justify-content:center;
  }
  .ios-step-text{font-size:12.5px; color:var(--text-dim); line-height:1.5; letter-spacing:0.02em;}
  .ios-step-text b{color:var(--text);}
  .ios-step-text i{font-size:14px; color:var(--purple); vertical-align:-2px;}
  .ios-sheet-note{
    margin-top:16px; padding:11px 14px; border-radius:12px; border:1px dashed var(--line-strong);
    font-size:10.5px; color:var(--text-faint); display:flex; align-items:center; gap:8px; letter-spacing:0.03em;
  }
  .ios-sheet-note i{color:var(--gold); font-size:14px;}
  .ios-sheet-note[hidden]{display:none;} /* el display:flex de arriba no debe ganarle al atributo hidden */

  /* =========================================================
     NAVEGACIÓN POR PANTALLAS (móvil): cada tab de la barra abre
     su propia pantalla en vez de una página infinita
     ========================================================= */
  html.modo-vistas .vista-oculta{display:none !important;}
  @keyframes vistaEnter{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);}}
  html.modo-vistas .vista-enter{animation:vistaEnter 0.34s var(--ease) both;}
  html[data-lite="1"] .vista-enter{animation:none !important;}

  /* barra de progreso de lectura: filo inferior del nav con degradado */
  nav#top::after{
    content:''; position:absolute; left:0; bottom:-1px; height:2px; width:100%;
    transform:scaleX(var(--scroll-p, 0)); transform-origin:0 50%; pointer-events:none;
    background:linear-gradient(90deg, var(--purple), var(--pink) 55%, var(--gold-soft));
    border-radius:0 2px 2px 0; opacity:0.9;
  }

  /* toast pequeño tipo app (favoritos, instalación, avisos) */
  .fp-toast{
    /* por ENCIMA de la zona VIP (1200) y del visor (1300): los avisos
       del visor — como el consejito de deslizar — antes quedaban tapados */
    position:fixed; left:50%; bottom:calc(96px + env(safe-area-inset-bottom)); z-index:1400;
    transform:translateX(-50%) translateY(14px); opacity:0;
    display:flex; align-items:center; gap:8px; padding:11px 18px; border-radius:999px;
    background:rgba(28,21,38,0.96); border:1px solid var(--line-strong); color:var(--text);
    font-size:12px; font-weight:600; letter-spacing:0.03em; backdrop-filter:blur(10px);
    box-shadow:0 14px 34px -12px rgba(0,0,0,0.6); pointer-events:none; max-width:92vw;
    text-align:center; line-height:1.5; /* los mensajes largos se acomodan en varias líneas */
    transition:transform 0.3s var(--ease-bounce), opacity 0.25s ease;
  }
  .fp-toast{border-radius:16px;}
  .fp-toast.show{transform:translateX(-50%) translateY(0); opacity:1;}
  .fp-toast i{color:var(--gold-soft); font-size:15px;}
  [data-theme="light"] .fp-toast{background:rgba(255,255,255,0.97);}
  @media (min-width:769px){ .fp-toast{bottom:26px;} }

  /* =========================================================
     DETALLES PREMIUM: foco visible, presión en botones, chips
     ========================================================= */
  :focus-visible{outline:2px solid var(--purple); outline-offset:2px; border-radius:6px;}
  .nav-cta:active, .hero-btn:active, .sc-link:active, .ib-btn:active, .cta-btn:active,
  .carousel-arrow:active, .icon-toggle:active, .channel-card:active, .search-empty:active{transform:scale(0.96);}
  @media (hover:none){
    .card:active{transform:scale(0.975); transition-duration:0.12s;}
    .price-card:active, .testimonial:active, .discover-card:active{transform:scale(0.98);}
  }
  .chip .chip-count{
    font-size:10px; font-weight:800; font-style:normal; margin-left:3px; padding:2px 8px; border-radius:999px;
    background:rgba(255,255,255,0.07); border:1px solid currentColor; color:inherit; line-height:1.4;
  }
  [data-theme="light"] .chip .chip-count{background:rgba(28,21,38,0.04);}

  /* NAV */
  nav{
    position:sticky; top:0; z-index:50;
    /* vidrio tipo iOS: translúcido de verdad, con saturación para que los
       colores del contenido "respiren" a través del blur */
    background:rgba(14,10,20,0.58); backdrop-filter:blur(22px) saturate(185%); -webkit-backdrop-filter:blur(22px) saturate(185%);
    border-bottom:1px solid var(--line);
    transition:background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
  }
  nav.scrolled{
    background:rgba(14,10,20,0.8);
    border-color:var(--line-strong);
    box-shadow:0 12px 30px -14px rgba(0,0,0,0.55);
  }
  /* al bajar, la barra se COMPACTA suavecito, como una app nativa */
  nav .wrap{display:flex; align-items:center; justify-content:space-between; height:72px; gap:14px; transition:height 0.35s var(--ease);}
  nav.scrolled .wrap{height:58px;}
  nav.scrolled .brand{font-size:18px;}
  nav.scrolled .brand .mark{width:31px; height:31px;}
  .brand{display:flex; align-items:center; gap:11px; font-family:'Fraunces', serif; font-size:20px; font-weight:600; letter-spacing:0.06em;}
  .brand .wordmark i{
    background:linear-gradient(100deg, var(--text) 20%, var(--gold-soft) 40%, var(--text) 60%);
    background-size:220% auto;
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    animation:brandShine 6s linear infinite;
  }
  html[data-lite="1"] .brand .wordmark i{background:none; -webkit-text-fill-color:var(--text); animation:none;}
  @keyframes brandShine{0%{background-position:120% 0;} 100%{background-position:-120% 0;}}
  .brand .brand-tag{
    display:inline-flex; align-items:center; gap:4px; font-family:'Inter', sans-serif;
    font-size:8.5px; font-weight:700; letter-spacing:0.16em; padding:3px 8px; border-radius:999px;
    background:rgba(59,155,255,0.12); border:1px solid rgba(59,155,255,0.35); color:#5FA8FF;
    -webkit-text-fill-color:#5FA8FF;
  }
  [data-theme="light"] .brand .brand-tag{color:#2E6FE8; -webkit-text-fill-color:#2E6FE8; background:rgba(46,111,232,0.08);}
  /* en teléfonos el nav completo no cabía (el botón "suscribirse" salía
     cortado): versión compacta, como el header de una app */
  @media (max-width:560px){
    .brand .brand-tag{display:none;}
    nav .wrap{gap:10px;}
    .brand{font-size:16px; gap:8px;}
    .brand .mark{width:30px; height:30px;}
    .nav-toggles{gap:6px;}
    .icon-toggle{width:34px; height:34px; font-size:14px;}
    .icon-toggle.con-letra{width:auto; padding:0 10px 0 8px;}
    .icon-toggle-txt{font-size:9.5px;}
    /* el CTA de Telegram AHORA sí vive en el header del teléfono, compacto:
       puro icono con degradado, como el botón principal de una app */
    .nav-cta{padding:0; width:38px; height:38px; border-radius:50%; justify-content:center; flex-shrink:0;}
    .nav-cta i{font-size:17px; margin:0;}
    .nav-cta .nav-cta-txt{display:none;}
    #installBtn{display:none !important;} /* en móvil ya lo ofrece el banner */
  }
  .brand .mark{
    width:36px; height:36px; flex-shrink:0; position:relative;
    /* v136 — el halo del logo va DORADO, a juego con la marca nueva
       (antes era morado y peleaba con el oro) */
    filter:drop-shadow(0 4px 12px rgba(245,201,92,0.42));
    animation:markFloat 5s ease-in-out infinite;
    transition:width 0.35s var(--ease), height 0.35s var(--ease);
  }
  .brand .mark::before{
    content:''; position:absolute; inset:-6px; border-radius:50%; z-index:-1;
    background:conic-gradient(from 0deg, rgba(157,92,255,0.0), rgba(157,92,255,0.35), rgba(232,185,74,0.3), rgba(157,92,255,0.0));
    filter:blur(8px); animation:markHalo 7s linear infinite;
  }
  @keyframes markFloat{0%,100%{transform:translateY(0);} 50%{transform:translateY(-3px);}}
  @keyframes markHalo{to{transform:rotate(360deg);}}
  .brand .mark svg{width:100%; height:100%; display:block;}
  @media (prefers-reduced-motion: reduce){
    .brand .mark, .brand .mark::before, .brand .wordmark i{animation:none;}
  }

  /* ---- cielo estrellado de fondo (tema espacial en todo el sitio) ---- */
  .starfield{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
  .starfield i{
    position:absolute; display:block; border-radius:50%; background:#fff;
    width:var(--s, 2px); height:var(--s, 2px); left:var(--x); top:var(--y);
    opacity:0.5; animation:starTwinkle var(--t, 4s) ease-in-out infinite; animation-delay:var(--td, 0s);
    box-shadow:0 0 var(--s, 2px) rgba(255,255,255,0.6);
  }
  .starfield i.tint{background:#C4B0F0; box-shadow:0 0 4px rgba(183,156,240,0.8);}
  @keyframes starTwinkle{0%,100%{opacity:0.15; transform:scale(0.8);} 50%{opacity:0.85; transform:scale(1);}}
  [data-theme="light"] .starfield{display:none;}
  @media (prefers-reduced-motion: reduce){ .starfield i{animation:none; opacity:0.3;} }

  /* ---- AURORA BOREAL: bandas de color ondulando lento tras el contenido ----
     (tema espacial de verdad: se nota, pero nunca estorba la lectura) */
  .aurora{position:fixed; inset:-14% -24%; z-index:1; pointer-events:none; overflow:hidden; opacity:0.6;}
  .aurora i{position:absolute; display:block; mix-blend-mode:screen; will-change:transform;}
  /* los degradados ya traen el "desenfoque" incorporado: cero costo de GPU extra */
  .aurora i:nth-child(1){
    width:70vw; height:44vh; left:-10%; top:-8%;
    background:
      radial-gradient(ellipse 52% 46% at 34% 48%, rgba(61,231,214,0.4), transparent 70%),
      radial-gradient(ellipse 56% 50% at 68% 56%, rgba(157,92,255,0.38), transparent 72%);
    animation:auroraA 26s ease-in-out infinite alternate;
  }
  .aurora i:nth-child(2){
    width:60vw; height:40vh; right:-14%; top:2%;
    background:
      radial-gradient(ellipse 54% 48% at 62% 46%, rgba(255,79,163,0.32), transparent 70%),
      radial-gradient(ellipse 50% 46% at 30% 58%, rgba(157,92,255,0.3), transparent 72%);
    animation:auroraB 33s ease-in-out infinite alternate;
  }
  .aurora i:nth-child(3){
    width:52vw; height:34vh; left:26%; top:-14%;
    background:
      radial-gradient(ellipse 52% 48% at 45% 50%, rgba(95,168,255,0.32), transparent 70%),
      radial-gradient(ellipse 48% 44% at 72% 55%, rgba(61,231,214,0.2), transparent 72%);
    animation:auroraC 41s ease-in-out infinite alternate;
  }
  @keyframes auroraA{from{transform:translate3d(0,0,0) rotate(-9deg) scaleX(1);} to{transform:translate3d(9vw,7vh,0) rotate(7deg) scaleX(1.28);}}
  @keyframes auroraB{from{transform:translate3d(0,0,0) rotate(11deg);} to{transform:translate3d(-8vw,9vh,0) rotate(-7deg) scale(1.2);}}
  @keyframes auroraC{from{transform:translate3d(0,0,0) skewX(-7deg);} to{transform:translate3d(7vw,11vh,0) skewX(9deg) scale(1.32);}}
  [data-theme="light"] .aurora{display:none;}
  @media (prefers-reduced-motion: reduce){ .aurora i{animation:none;} .aurora{opacity:0.4;}}
  @media (max-width:768px){
    .aurora{opacity:0.5;}
    .aurora i:nth-child(3){display:none;} /* una banda menos en el teléfono */
  }
  header.hero, section, footer, .promo-banner{position:relative; z-index:2;}

  /* estrellas fugaces en el hero */
  .shooting-star{
    position:absolute; z-index:0; width:120px; height:1.5px; pointer-events:none;
    background:linear-gradient(90deg, rgba(255,255,255,0.9), transparent);
    border-radius:999px; opacity:0; transform:rotate(-32deg);
    animation:shoot 9s ease-in infinite; animation-delay:var(--sd, 0s);
    top:var(--sy, 15%); left:var(--sx, 60%);
  }
  @keyframes shoot{
    0%, 88%{opacity:0; translate:0 0;}
    90%{opacity:0.9;}
    96%{opacity:0; translate:-280px 175px;}
    100%{opacity:0;}
  }
  [data-theme="light"] .shooting-star{display:none;}
  @media (prefers-reduced-motion: reduce){ .shooting-star{display:none;} }
  .nav-links{display:flex; align-items:center; gap:30px;}
  .nav-links a, .nav-link-btn{
    font-size:13.5px; font-weight:500; color:var(--text-dim); position:relative; padding:4px 0;
    transition:color 0.2s ease; background:none; border:none; font-family:inherit; cursor:pointer;
  }
  .nav-links a::after, .nav-link-btn::after{
    content:''; position:absolute; left:0; bottom:-2px; width:0; height:1.5px; background:var(--gold-soft);
    transition:width 0.25s var(--ease);
  }
  .nav-links a:hover, .nav-link-btn:hover{color:var(--text);}
  .nav-links a:hover::after, .nav-link-btn:hover::after{width:100%;}
  /* el link del catálogo siempre destacado en el menú (es el corazón del sitio) */
  .nav-links a[href="#catalogo"]{color:var(--gold-soft); font-weight:700;}
  .nav-links a[href="#catalogo"]::after{width:100%; height:2px; background:linear-gradient(90deg, var(--purple), var(--pink)); opacity:0.55; transition:opacity 0.25s ease;}
  .nav-links a[href="#catalogo"]:hover{color:var(--gold);}
  .nav-links a[href="#catalogo"]:hover::after{opacity:1;}
  .nav-toggles{display:flex; align-items:center; gap:8px; margin-left:auto;}
  .icon-toggle{
    width:38px; height:38px; border-radius:50%; border:1px solid var(--line-strong); background:transparent;
    color:var(--text-dim); display:flex; align-items:center; justify-content:center; font-size:16px; cursor:pointer;
    transition:all 0.25s var(--ease-bounce); flex-shrink:0;
  }
  .icon-toggle:hover{border-color:var(--purple); color:var(--text); transform:scale(1.1) rotate(12deg); box-shadow:0 4px 14px -4px var(--purple-glow);}
  /* v107 — el botón de "que vaya más fluido" ya no es un rayito misterioso:
     lleva su palabra al lado para que se entienda de un vistazo */
  .icon-toggle.con-letra{width:auto; min-width:38px; border-radius:999px; padding:0 12px 0 10px; gap:5px;}
  .icon-toggle.con-letra:hover{transform:scale(1.05); }
  .icon-toggle-txt{font-size:10.5px; font-weight:800; letter-spacing:0.04em; text-transform:lowercase; white-space:nowrap;}
  .icon-toggle.con-letra.lite-on{background:rgba(61,231,214,0.10);}
  .nav-cta{
    font-size:13px; font-weight:700; padding:11px 22px; border-radius:999px;
    background:linear-gradient(135deg, var(--purple), var(--pink)); color:#fff; letter-spacing:0.01em; flex-shrink:0;
    transition:transform 0.25s var(--ease-bounce), box-shadow 0.25s ease, filter 0.25s ease, background-position 0.4s ease;
    box-shadow:0 6px 20px -6px var(--purple-glow);
    background-size:160% 160%; background-position:0% 50%;
  }
  .nav-cta:hover{transform:translateY(-2px) scale(1.04); box-shadow:0 12px 28px -6px var(--purple-glow); filter:brightness(1.1); background-position:100% 50%;}

  /* HERO */
  header.hero{padding:100px 0 68px; position:relative; overflow:hidden;}
  .orb{position:absolute; border-radius:50%; filter:blur(60px); pointer-events:none; z-index:0;}
  .orb-1{width:340px; height:340px; top:-120px; left:-80px; background:radial-gradient(circle, rgba(139,92,246,0.35), transparent 70%); animation:floatOrb 12s ease-in-out infinite;}
  .orb-2{width:280px; height:280px; top:20px; right:-100px; background:radial-gradient(circle, rgba(201,162,75,0.25), transparent 70%); animation:floatOrb 15s ease-in-out infinite reverse;}
  header.hero > .wrap{position:relative; z-index:1;}
  /* la píldora de la OFERTA: borde degradado con brillo que respira,
     destello que la recorre y flama animada (el saludo de Telegram ahora
     es un mensaje flotante, ya no ocupa este espacio) */
  .hero-topline{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:22px; animation:fadeInUp 0.7s var(--ease) both;}
  .eyebrow{
    position:relative; display:inline-flex; align-items:center; gap:9px;
    font-size:11.5px; letter-spacing:0.16em; font-weight:700; color:var(--gold-soft);
    padding:9px 18px; border-radius:999px; overflow:hidden;
    background:linear-gradient(rgba(20,14,28,0.75), rgba(20,14,28,0.75)) padding-box,
               linear-gradient(120deg, rgba(232,185,74,0.9), rgba(157,92,255,0.55), rgba(232,185,74,0.9)) border-box;
    border:1px solid transparent;
    animation:eyebrowGlow 2.8s ease-in-out infinite;
  }
  [data-theme="light"] .eyebrow{
    color:#8A5F26;
    background:linear-gradient(rgba(255,255,255,0.88), rgba(255,255,255,0.88)) padding-box,
               linear-gradient(120deg, rgba(166,117,46,0.8), rgba(124,58,237,0.5), rgba(166,117,46,0.8)) border-box;
  }
  .eyebrow::after{
    content:''; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(100deg, transparent 30%, rgba(255,226,138,0.22) 48%, transparent 62%);
    background-size:220% 100%; animation:shimmer 3.2s linear infinite;
  }
  @keyframes eyebrowGlow{
    0%,100%{box-shadow:0 0 16px -6px rgba(232,185,74,0.45);}
    50%{box-shadow:0 0 26px -4px rgba(232,185,74,0.8), 0 0 44px -10px rgba(157,92,255,0.5);}
  }
  .eyebrow > i{font-size:14px; color:var(--gold); animation:flamePulse 1.8s ease-in-out infinite;}
  .eyebrow .live-dot{width:6px; height:6px; border-radius:50%; background:var(--gold); animation:pulseDot 1.8s ease-in-out infinite;}
  .hero-topline .online-pill{margin-left:0;}
  @media (prefers-reduced-motion: reduce){ .eyebrow, .eyebrow::after, .eyebrow > i{animation:none;} }
  /* indicador de personas en línea (dato real vía contador.php) */
  .online-pill{
    display:inline-flex; align-items:center; gap:7px; margin-left:10px;
    padding:4px 11px; border-radius:999px; font-size:11px; font-weight:600;
    background:rgba(61,231,214,0.1); border:1px solid rgba(61,231,214,0.3); color:var(--cyan);
    vertical-align:middle; opacity:0; transition:opacity 0.4s ease;
  }
  .online-pill.show{opacity:1;}
  .online-pill .live-ring{
    position:relative; width:7px; height:7px; border-radius:50%; background:var(--cyan);
  }
  .online-pill .live-ring::after{
    content:''; position:absolute; inset:-3px; border-radius:50%;
    border:1px solid var(--cyan); animation:onlinePing 1.8s ease-out infinite;
  }
  @keyframes onlinePing{0%{transform:scale(0.6); opacity:0.8;} 100%{transform:scale(1.8); opacity:0;}}
  .online-pill b{color:var(--text); font-variant-numeric:tabular-nums;}
  [data-theme="light"] .online-pill{color:#0E8578;}
  h1.headline{
    font-family:'Fraunces', serif; font-weight:500; font-size:clamp(40px, 6vw, 68px);
    line-height:1.04; letter-spacing:-0.015em; max-width:820px; color:var(--text);
  }
  h1.headline em{font-style:italic; color:var(--purple); font-weight:500;
    display:inline-block; opacity:0;
    animation:emFadeIn 0.6s 0.35s var(--ease) forwards;
  }
  /* el degradado va en cada palabra rotativa, no en el em: los navegadores
     no propagan bien background-clip:text a hijos animados dentro de un grid */
  h1.headline em .rotator span{
    background:linear-gradient(90deg, var(--purple), #B794F6, var(--purple));
    background-size:200% auto;
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    animation:emShine 5s linear infinite;
  }
  @keyframes emShine{ 0%{background-position:0% 50%;} 100%{background-position:200% 50%;} }
  @keyframes emFadeIn{ to{opacity:1;} }
  h1.headline .letter{
    display:inline-block; opacity:0; transform:translateY(0.5em) rotate(4deg);
    animation:letterIn 0.6s var(--ease) forwards; animation-delay:var(--d, 0s);
  }
  @keyframes letterIn{ to{opacity:1; transform:translateY(0) rotate(0deg);} }
  @media (prefers-reduced-motion: reduce){
    h1.headline .letter{animation:none; opacity:1; transform:none;}
    h1.headline em{animation:none;}
  }
  .hero-sub{
    margin-top:26px; font-size:17px; line-height:1.65; color:var(--text-dim); max-width:520px;
    animation:fadeInUp 0.7s 0.16s var(--ease) both;
  }
  .hero-strip{
    margin-top:48px; display:flex; gap:0; border:1px solid var(--line-strong); border-radius:14px;
    overflow:hidden; background:var(--surface);
    animation:fadeInUp 0.7s 0.24s var(--ease) both;
    box-shadow:0 20px 40px -24px rgba(0,0,0,0.7);
  }
  .hero-strip .cell{
    flex:1; padding:20px 22px; border-right:1px solid var(--line); transition:background 0.25s ease;
  }
  .hero-strip .cell:hover{background:rgba(139,92,246,0.06);}
  .hero-strip .cell:last-child{border-right:none;}
  .cell .num{font-family:'Fraunces', serif; font-size:26px; font-weight:500; color:var(--text); display:flex; align-items:center; gap:8px;}
  .cell .num i{font-size:18px; color:var(--purple); opacity:0.9;}
  .cell .lab{font-size:12px; color:var(--text-faint); margin-top:4px; letter-spacing:0.02em;}

  /* palabra rotativa del titular */
  .rotator{
    display:inline-grid; overflow:hidden;
    height:1.3em; line-height:1.3; vertical-align:-0.32em;
  }
  .rotator span{
    grid-area:1/1; white-space:nowrap;
    opacity:0; transform:translateY(105%);
    transition:opacity 0.55s var(--ease), transform 0.55s var(--ease);
  }
  .rotator span.on{opacity:1; transform:translateY(0);}
  .rotator span.off{opacity:0; transform:translateY(-105%);}

  /* partículas flotantes del hero */
  .hero-particles{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
  .hero-particles i{
    position:absolute; display:block; border-radius:50%;
    background:radial-gradient(circle, rgba(232,185,74,0.9), rgba(157,92,255,0.0) 70%);
    animation:particleFloat var(--pt, 9s) ease-in-out infinite; animation-delay:var(--pd, 0s);
    opacity:0;
  }
  @keyframes particleFloat{
    0%{opacity:0; transform:translateY(20px) scale(0.6);}
    20%{opacity:0.85;}
    80%{opacity:0.3;}
    100%{opacity:0; transform:translateY(-110px) scale(1.1);}
  }
  @media (prefers-reduced-motion: reduce){ .hero-particles{display:none;} }

  /* PALOMITA DE VERIFICACIÓN */
  .verified-check{
    display:inline-flex; align-items:center; justify-content:center;
    width:16px; height:16px; border-radius:50%; flex-shrink:0;
    background:linear-gradient(135deg, #3B9BFF, #2E6FE8); color:#fff; font-size:10px;
    -webkit-text-fill-color:#fff;
    box-shadow:0 2px 8px -2px rgba(59,155,255,0.6);
    vertical-align:middle;
  }
  .verified-check i{line-height:1;}
  .verified-check.gold{background:linear-gradient(135deg, var(--gold-soft), #C98A2B); box-shadow:0 2px 8px -2px rgba(232,185,74,0.6);}

  /* ===== v138 — EL SELLO "REAL · SIN IA" =====
     Va en cada modelo (tarjeta y perfil). Se puede tocar y explica el
     compromiso: no se acepta contenido hecho por IA y cada archivo se
     revisa a mano antes de subirlo. */
  .sello-ia{
    display:inline-flex; align-items:center; gap:5px; padding:4px 9px 4px 7px; border-radius:99px;
    font-family:inherit; font-size:9.5px; font-weight:800; letter-spacing:.075em; text-transform:uppercase;
    line-height:1; cursor:pointer; white-space:nowrap; vertical-align:middle;
    color:#F5D488; -webkit-text-fill-color:#F5D488;
    background:rgba(232,185,74,0.10); border:1px solid rgba(232,185,74,0.34);
    transition:transform .12s var(--ease), background .2s, border-color .2s;
  }
  .sello-ia:hover{background:rgba(232,185,74,0.17); border-color:rgba(232,185,74,0.6);}
  .sello-ia:active{transform:scale(0.94);}
  .sello-ia i{font-size:11.5px; line-height:1;}
  /* va en la CABECERA de la tarjeta, debajo del nombre: esa parte se
     dibuja siempre, también en modo ligero y en las filas angostas.
     (Antes iba en el cuerpo, y el modo ligero no dibuja el cuerpo: por eso
     había gente que no lo veía.) */
  .card .card-head-txt .sello-ia{margin-top:6px; align-self:flex-start;
    width:-moz-fit-content; width:fit-content; max-width:100%;}
  .fila-compacta .sello-ia{font-size:8px; padding:3px 7px 3px 6px; margin-top:5px;}
  .fila-compacta .sello-ia i{font-size:9.5px;}
  #starSub .sello-ia{margin-left:2px;}

  /* ===== v138 — AVISO DE VERSIÓN BETA =====
     A diferencia de "SITIO OFICIAL", este chip NO se esconde en Telegram
     ni en el teléfono: justo ahí es donde la gente necesita saber que la
     app todavía está en pruebas. */
  .beta-chip{
    display:inline-flex; align-items:center; gap:4px; font-family:'Inter', sans-serif;
    font-size:8.5px; font-weight:800; letter-spacing:0.16em; padding:3px 8px; border-radius:999px;
    line-height:1; cursor:pointer; white-space:nowrap; flex:0 0 auto;
    color:#F5D488; -webkit-text-fill-color:#F5D488;
    background:rgba(232,185,74,0.11); border:1px solid rgba(232,185,74,0.42);
    transition:transform .12s var(--ease), background .2s;
  }
  .beta-chip:hover{background:rgba(232,185,74,0.2);}
  .beta-chip:active{transform:scale(0.93);}
  .beta-chip i{font-size:10px;}
  [data-theme="light"] .beta-chip{color:#8A6212; -webkit-text-fill-color:#8A6212; background:rgba(232,185,74,0.16);}
  @media (max-width:560px){ .beta-chip{font-size:8px; padding:3px 7px; letter-spacing:0.12em;} }
  /* en la Zona VIP la cabecera también es columna: mismo trato */
  .vcard-idn .sello-ia{margin-top:5px; align-self:flex-start;
    width:-moz-fit-content; width:fit-content; max-width:100%;}
  /* el modo ligero apaga los adornos de la Zona VIP, pero este no:
     es de las razones por las que la gente compra */
  html.fp-lite2 .vip-perfil.vcard .sello-ia{display:inline-flex !important;}

  .selloh{position:fixed; inset:0; z-index:520; visibility:hidden; pointer-events:none;}
  .selloh.open{visibility:visible; pointer-events:auto;}
  .selloh-back{position:absolute; inset:0; background:rgba(6,4,10,0.82); backdrop-filter:blur(6px); opacity:0; transition:opacity .3s;}
  .selloh.open .selloh-back{opacity:1;}
  .selloh-panel{
    position:absolute; left:0; right:0; bottom:0; max-width:520px; margin:0 auto;
    background:var(--surface, #141018); border-top:1px solid var(--line-strong);
    border-radius:22px 22px 0 0; padding:14px 22px calc(24px + env(safe-area-inset-bottom,0px));
    transform:translateY(100%); transition:transform .32s cubic-bezier(.2,.8,.2,1);
  }
  .selloh.open .selloh-panel{transform:translateY(0);}
  .selloh-tirador{width:40px; height:4px; border-radius:4px; background:var(--line-strong); margin:0 auto 14px;}
  .selloh-tit{display:flex; align-items:center; gap:9px; font-size:16px; font-weight:800; letter-spacing:.05em;
    color:var(--gold-soft, #E8B94A); margin-bottom:4px;}
  .selloh-sub{font-size:12px; color:var(--text-dim); margin-bottom:15px;}
  .selloh-pt{display:flex; gap:11px; padding:11px 0; border-top:1px solid var(--line2, rgba(255,255,255,0.08));}
  .selloh-pt i{font-size:17px; color:var(--gold-soft, #E8B94A); flex-shrink:0; margin-top:1px;}
  .selloh-pt b{display:block; font-size:13px; margin-bottom:3px;}
  .selloh-pt span{font-size:12.5px; color:var(--text-dim); line-height:1.5;}
  .selloh-pie{font-size:11.5px; color:var(--text-dim); line-height:1.5; margin-top:13px;
    padding:11px 13px; border-radius:12px; background:rgba(232,185,74,0.07); border:1px solid rgba(232,185,74,0.2);}
  .selloh-cerrar{width:100%; margin-top:15px; padding:13px; border-radius:13px; border:1px solid var(--line-strong);
    background:none; color:var(--text); font-family:inherit; font-size:13px; font-weight:700; cursor:pointer;}
  .verified-line{
    display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:700;
    letter-spacing:0.1em; color:#5FA8FF;
  }
  [data-theme="light"] .verified-line{color:#2E6FE8;}

  /* BARRA DE CONFIANZA */
  .trust-bar{
    margin-top:34px; display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:10px;
    animation:fadeInUp 0.7s 0.32s var(--ease) both;
  }
  .trust-item{
    display:flex; align-items:center; gap:10px; padding:13px 16px; border-radius:13px;
    background:var(--surface); border:1px solid var(--line);
    font-size:11.5px; font-weight:600; color:var(--text-dim); letter-spacing:0.03em;
    transition:border-color 0.25s ease, transform 0.25s var(--ease);
  }
  .trust-item:hover{border-color:var(--line-strong); transform:translateY(-2px);}
  .trust-item i{
    font-size:17px; flex-shrink:0; width:32px; height:32px; border-radius:9px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(139,92,246,0.12); color:var(--purple);
  }
  .trust-item.t-green i{background:rgba(61,231,214,0.1); color:var(--cyan);}
  .trust-item.t-gold i{background:rgba(232,185,74,0.12); color:var(--gold);}
  .trust-item.t-blue i{background:rgba(59,155,255,0.12); color:#5FA8FF;}
  .hero-trust-clients{
    display:inline-flex; align-items:center; gap:11px; margin-top:22px;
    padding:9px 16px 9px 12px; border-radius:999px;
    background:rgba(20,14,28,0.55); border:1px solid rgba(61,231,214,0.28);
    backdrop-filter:blur(8px); animation:fadeInUp 0.7s 0.4s var(--ease) both;
  }
  [data-theme="light"] .hero-trust-clients{background:rgba(255,255,255,0.65);}
  .htc-avatars{display:inline-flex;}
  .htc-avatars i{
    width:22px; height:22px; border-radius:50%; margin-left:-7px;
    border:2px solid var(--bg); background-size:cover;
    background-image:linear-gradient(135deg, var(--purple), var(--pink));
  }
  .htc-avatars i:first-child{margin-left:0;}
  .htc-avatars i:nth-child(2){background-image:linear-gradient(135deg, #3DA1E8, var(--cyan));}
  .htc-avatars i:nth-child(3){background-image:linear-gradient(135deg, var(--gold-soft), #E8783A);}
  .htc-avatars i:nth-child(4){background-image:linear-gradient(135deg, #B79CF0, #7FD8E8);}
  .htc-text{font-size:12.5px; color:var(--text-dim); font-weight:600; letter-spacing:0.01em;}
  .htc-text b{color:var(--cyan); font-variant-numeric:tabular-nums; font-weight:800;}
  .trust-bar.slim{margin-top:30px; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));}
  .trust-bar.slim .trust-item{justify-content:center; padding:11px 14px; background:rgba(20,14,28,0.5); backdrop-filter:blur(6px);}
  [data-theme="light"] .trust-bar.slim .trust-item{background:rgba(255,255,255,0.6);}
  .trust-item div{display:flex; flex-direction:column; gap:2px;}
  .trust-item small{font-size:10px; font-weight:500; color:var(--text-faint); letter-spacing:0.02em; text-transform:none;}

  /* sello de confianza bajo el titular */
  .assurance-line{
    margin-top:20px; display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap;
    padding:9px 16px; border-radius:999px; font-size:11.5px; font-weight:700; letter-spacing:0.08em;
    background:linear-gradient(135deg, rgba(61,231,214,0.1), rgba(59,155,255,0.1));
    border:1px solid rgba(61,231,214,0.3); color:var(--cyan);
    animation:fadeInUp 0.7s 0.2s var(--ease) both;
  }
  .assurance-line i{font-size:15px;}
  [data-theme="light"] .assurance-line{color:#0E8578; border-color:rgba(14,133,120,0.3);}

  /* (el banner superior de descuento se quitó: el hero anuncia la promo) */

  /* CATÁLOGO */
  .catalog{padding:60px 0 100px;}
  .catalog-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:10px;}
  .catalog-title{font-family:'Fraunces', serif; font-size:24px; font-weight:500;}
  .catalog-count{font-size:13px; color:var(--text-faint);}
  .catalog-count b{font-weight:800;}

  /* =========================================================
     CATEGORÍAS MERO ARRIBA — filtran todo el catálogo al tocarlas
     ========================================================= */
  .cat-filter{padding:28px 0 4px;}
  .cat-filter-head{
    display:flex; align-items:center; gap:8px; margin-bottom:12px;
    font-size:10.5px; font-weight:800; letter-spacing:0.18em; color:var(--text-faint);
  }
  .cat-filter-head i{color:var(--purple); font-size:15px;}
  .cat-filter-hint{font-weight:600; letter-spacing:0.04em; color:var(--text-faint); opacity:0.75; margin-left:2px;}
  .filter-row{display:flex; gap:10px; flex-wrap:wrap;}
  /* en el teléfono los chips se deslizan en una sola línea, como app */
  @media (max-width:640px){
    .filter-row{flex-wrap:nowrap; overflow-x:auto; padding-bottom:8px; margin-right:-18px; padding-right:18px; scrollbar-width:none; -webkit-overflow-scrolling:touch;}
    .filter-row::-webkit-scrollbar{display:none;}
    .filter-row .chip{flex-shrink:0;}
  }
  /* chip activo: se pinta con EL COLOR de su canal + brillo + pop */
  .chip{--chc:var(--purple);}
  .chip[data-channel]{color:var(--chc);} /* cada chip en reposo lleva su color */
  .chip.active{
    border-color:transparent; color:#171022;
    background:linear-gradient(160deg, rgba(255,255,255,0.35), transparent 32%), var(--chc);
    box-shadow:0 10px 26px -10px var(--chc), 0 0 0 1px var(--chc);
  }
  .chip.active i{color:#171022;}
  .chip.active i{transform:scale(1.15) rotate(-8deg);}
  .chip.active .chip-count{background:rgba(20,12,30,0.22); border-color:rgba(20,12,30,0.35); color:#171022;}
  .chip.chip-todos.active{
    background:linear-gradient(135deg, #E9EDF4, #9AA3B5); color:#14161d; text-shadow:none;
    box-shadow:0 10px 26px -10px rgba(201,207,218,0.5), 0 0 0 1px #C9CFDA;
  }
  .chip.chip-todos.active .chip-count{display:none;}
  @keyframes chipPop{0%{transform:scale(1);} 45%{transform:scale(1.14) rotate(-1.5deg);} 100%{transform:scale(1);}}
  .chip.chip-pop{animation:chipPop 0.42s var(--ease-bounce);}
  /* filtro activo: lo que no es del canal elegido se va; lo elegido entra con animación */
  .filtro-oculto{display:none !important;}
  .filtro-enter{animation:vistaEnter 0.45s var(--ease) both;}
  .view-toggle{display:flex; gap:8px; margin-bottom:18px;}
  .view-btn{
    display:flex; align-items:center; gap:6px; padding:8px 14px; border-radius:999px; border:1px solid var(--line);
    background:var(--surface); color:var(--text-dim); font-size:12.5px; font-weight:600; cursor:pointer;
    transition:all 0.2s ease;
  }
  .view-btn.active{background:var(--purple); border-color:var(--purple); color:#fff;}
  .view-btn:hover:not(.active){border-color:var(--purple); color:var(--text);}
  .catalog-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:16px;}
  @media (max-width:640px){ .catalog-grid{grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px;} }
  .chip{
    padding:10px 20px; border-radius:999px; border:1px solid var(--line-strong);
    font-size:13.5px; font-weight:600; color:var(--text-dim); cursor:pointer;
    display:flex; align-items:center; gap:8px; transition:all 0.25s var(--ease-bounce); background:var(--surface);
  }
  .chip i{font-size:14px; transition:transform 0.3s var(--ease-bounce);}
  .chip:hover{
    border-color:currentColor; color:var(--text); transform:translateY(-2px) scale(1.03);
    box-shadow:0 8px 20px -10px currentColor;
  }
  .chip:hover i{transform:scale(1.2) rotate(-8deg);}

  .catalog-row{margin-bottom:38px;}
  .catalog-row-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; gap:12px; padding:0 28px;}
  .catalog-row-title{display:flex; align-items:center; gap:8px; font-family:'Fraunces', serif; font-size:19px; font-weight:600;}
  .catalog-row-title i{font-size:17px;}
  .catalog-row-count{font-family:'Inter', sans-serif; font-size:11px; font-weight:600; color:var(--text-faint); letter-spacing:0.02em; margin-left:4px;}
  /* 🏷️ precio del canal, ahora en el ENCABEZADO de la categoría (v59) */
  .catalog-row-precio{
    display:inline-flex; align-items:center; gap:5px; font-family:'Inter', sans-serif;
    font-size:12px; font-weight:800; letter-spacing:0.01em; padding:4px 11px; border-radius:999px;
    border:1px solid; margin-left:6px;
  }
  .catalog-row-precio i{font-size:13px;}
  @media (max-width:640px){ .catalog-row-precio{font-size:11px; padding:3px 9px;} }
  /* v84 — el precio del encabezado, GRANDOTE y dorado (ya no escondido) */
  .catalog-row-precio.v84{
    font-size:13.5px; padding:6px 14px; color:#0F0E09; white-space:nowrap;
    background:linear-gradient(135deg, #F3DFA0, var(--gold-soft, #E8B94A));
    border-color:transparent; box-shadow:0 8px 22px -8px rgba(232,185,74,0.55);
  }
  .catalog-row-precio.v84 s{opacity:0.62; font-weight:600; margin-right:2px;}
  .catalog-row-precio.v84 b{font-weight:900;}
  @media (max-width:640px){ .catalog-row-precio.v84{font-size:12px; padding:5px 11px;} }
  /* v84 — nivel y precio A LA VISTA en cada tarjeta */
  .card-nivel{
    position:absolute; bottom:10px; left:10px; z-index:2;
    font-size:9.5px; font-weight:900; letter-spacing:0.08em; white-space:nowrap;
    padding:5px 11px; border-radius:999px; color:#101116;
    background:linear-gradient(135deg, rgba(255,255,255,0.5), transparent 45%), var(--chc, #C9CFDA);
    box-shadow:0 8px 20px -8px var(--chc, #C9CFDA);
  }
  .card-nivel.negra{
    color:#F0DCA0; background:linear-gradient(160deg, #191512, #0B0A08);
    border:1px solid rgba(212,175,55,0.55); box-shadow:0 8px 20px -8px rgba(212,175,55,0.4);
  }
  .card-precio-tag{
    position:absolute; bottom:10px; right:10px; z-index:2; font-size:11px; font-weight:800;
    padding:5px 10px; border-radius:999px; color:var(--gold-soft, #E8B94A);
    background:rgba(10,10,14,0.8); border:1px solid rgba(232,185,74,0.4); backdrop-filter:blur(6px);
    white-space:nowrap;
  }
  .card-precio-tag s{opacity:0.55; font-weight:600; margin-right:2px;}
  /* v86 — cada burbuja en su esquina, sin encimarse:
     ↖ NUEVO / exclusivo · ↗ TUYO / -X% · ↙ NIVEL · ↘ precio */
  .promo-discount-tag{
    position:absolute; top:10px; right:10px; z-index:3;
    display:inline-flex; align-items:center; gap:4px;
    font-size:10px; font-weight:800; letter-spacing:0.06em; padding:5px 10px; border-radius:999px;
    color:#2A1606; background:linear-gradient(135deg, #FFD9A8, #FF9E5E);
    box-shadow:0 6px 16px -6px rgba(255,158,94,0.6);
  }
  /* si la tarjeta ya es SUYA, el precio sobra */
  .card:has(.card-tuyo) .card-precio-tag{display:none;}
  /* v84 — tarjetas por marca: PLATINUM en grafito con su acento de nivel;
     BLACK en negro profundo con dorado (aplica en carrusel, cuadrícula y todo) */
  .card.card-plat{
    background:linear-gradient(168deg, #17181E, #0F0F13);
    border-color:color-mix(in srgb, var(--chc, #C9CFDA) 26%, transparent);
    border-top:2px solid color-mix(in srgb, var(--chc, #C9CFDA) 60%, transparent); /* v86: su tono arriba */
  }
  .card.card-black{
    background:linear-gradient(168deg, #16120C, #0B0A07);
    border-color:rgba(212,175,55,0.32);
    border-top:2px solid rgba(212,175,55,0.6); /* v86: dorado arriba */
  }
  .card.card-black .card-name{color:#F0DCA0;}
  .card.card-black::before{background:linear-gradient(135deg, #D4AF37, #8A6D1F, #D4AF37);}
  .card.card-plat::before{background:linear-gradient(135deg, var(--chc, #C9CFDA), #5A5F6B, var(--chc, #C9CFDA));}
  .catalog-row-nav{display:flex; gap:8px; flex-shrink:0;}
  .carousel-arrow{
    width:34px; height:34px; border-radius:50%; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--text-dim); display:flex; align-items:center; justify-content:center; cursor:pointer;
    transition:all 0.22s var(--ease);
  }
  .carousel-arrow:hover{border-color:var(--purple); color:var(--text); background:var(--surface-2);}
  .carousel-track{
    display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x proximity; scroll-behavior:smooth;
    padding:4px 28px 14px; -webkit-overflow-scrolling:touch;
  }
  .carousel-track .card{flex:0 0 230px; scroll-snap-align:start;}
  @media (max-width:640px){ .carousel-track .card{flex:0 0 198px;} .catalog-row-head{padding:0 18px;} .carousel-track{padding:4px 18px 14px;} }

  /* 📏 filas COMPACTAS (v59): más populares / recién agregados / favoritos.
     Tarjetas chicas que no roban espacio — foto + nombre, sin la descripción
     ni la línea de vistas ni el "ver perfil completo". */
  .fila-compacta{margin-bottom:24px;}
  .fila-compacta .carousel-track .card{flex:0 0 138px;}
  .fila-compacta .card-head{padding:8px 10px 6px; gap:7px;}
  .fila-compacta .card-ava{width:26px; height:26px;}
  .fila-compacta .card-name{font-size:11.5px;}
  .fila-compacta .card-name .verified-check{display:none;}
  .fila-compacta .card-chip{font-size:9px;}
  .fila-compacta .card-body{padding:8px 10px 10px;}
  .fila-compacta .card-desc, .fila-compacta .card-views, .fila-compacta .card-pie{display:none;}
  .fila-compacta .card-media{border-radius:0;}
  .fila-compacta .catalog-row-title{font-size:16px;}
  @media (max-width:640px){ .fila-compacta .carousel-track .card{flex:0 0 120px;} }

  .card{
    background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden;
    transition:transform 0.3s var(--ease-bounce), border-color 0.35s ease, box-shadow 0.35s ease;
    display:flex; flex-direction:column; cursor:pointer; will-change:transform; position:relative;
    animation:cardIn 0.5s var(--ease) both;
  }
  .card::before{
    content:''; position:absolute; inset:-1px; border-radius:17px; z-index:-1; opacity:0;
    background:linear-gradient(135deg, var(--purple), var(--pink), var(--cyan));
    transition:opacity 0.35s ease;
  }
  .card:hover{transform:translateY(-8px) scale(1.015); border-color:transparent; box-shadow:0 28px 48px -20px var(--purple-glow);}
  .card:hover::before{opacity:1;}
  /* cabecera tipo post de Instagram: avatar con aro + nombre + canal + guardar */
  .card-head{display:flex; align-items:center; gap:9px; padding:10px 11px 9px; position:relative; z-index:2;}
  .card-ava{
    width:34px; height:34px; border-radius:50%; flex-shrink:0; background-size:cover; background-position:center top;
    box-shadow:0 0 0 2px var(--surface), 0 0 0 3.5px var(--chc, var(--gold-soft));
    display:flex; align-items:center; justify-content:center;
  }
  .card-ava-ini{font-family:'Fraunces', serif; font-size:14px; color:var(--text); background:linear-gradient(135deg, rgba(157,92,255,0.3), rgba(255,79,163,0.2));}
  .card-head-txt{display:flex; flex-direction:column; gap:1px; min-width:0; flex:1;}
  .card-head-txt .card-name{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .card-chip{font-size:8.5px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; display:flex; align-items:center; gap:4px; white-space:nowrap; overflow:hidden;}
  .card-chip i{font-size:10px;}
  .card .fav-btn{position:static; padding:6px 8px; background:none; border:none; backdrop-filter:none; font-size:15px; flex-shrink:0;}
  .card .fav-btn.active{background:none; color:var(--gold-soft);}
  /* pie de la tarjeta: enlace al perfil + precio (sin botones de adorno) */
  .card-pie{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:4px;}
  .card-pie .price{font-size:13px; font-weight:800; color:var(--gold-soft); white-space:nowrap;}
  .card-media{
    /* v107 — antes era un cuadrado y a varios modelos les cortaba la cara.
       Ahora es un retrato (4:5) y el recorte sube hacia la cabeza en vez de
       quedarse a media altura del cuerpo. */
    aspect-ratio:4/5; position:relative; display:flex; align-items:center; justify-content:center;
    background:
      radial-gradient(circle at 30% 20%, rgba(139,92,246,0.28), transparent 55%),
      var(--surface-2);
    overflow:hidden;
  }
  .card-media img{
    width:100%; height:100%; object-fit:cover; object-position:center 22%; display:block;
    transition:transform 0.5s var(--ease);
  }
  .card:hover .card-media img{transform:scale(1.06);}
  .avatar-ph{
    width:66px; height:66px; border-radius:50%; background:linear-gradient(135deg, rgba(157,92,255,0.22), rgba(255,79,163,0.14));
    border:1.5px solid transparent; background-clip:padding-box; position:relative;
    display:flex; align-items:center; justify-content:center;
    font-family:'Fraunces', serif; font-size:23px; font-weight:600; color:var(--text); transition:transform 0.4s var(--ease-bounce);
  }
  .avatar-ph::before{
    content:''; position:absolute; inset:-1.5px; border-radius:50%; z-index:-1;
    background:linear-gradient(135deg, var(--purple), var(--pink), var(--cyan));
  }
  .card:hover .avatar-ph{transform:scale(1.1) rotate(-4deg);}
  .badge{
    position:absolute; top:12px; left:12px; font-size:10.5px; font-weight:600; letter-spacing:0.04em;
    padding:5px 10px; border-radius:999px; background:rgba(14,10,20,0.7);
    border:1px solid var(--line-strong); color:var(--gold); backdrop-filter:blur(6px); z-index:2;
    display:flex; align-items:center; gap:4px;
  }
  .badge i{font-size:11px;}
  /* (el contador de archivos "X arch." se quitó de las tarjetas) */
  .card-body{padding:4px 13px 13px; display:flex; flex-direction:column; gap:6px; flex:1;}
  .card-name{font-size:13.5px; font-weight:800; color:var(--text);}
  .card-desc{font-size:11.5px; font-weight:600; letter-spacing:0.02em; line-height:1.5; color:var(--text-dim);}
  .card-desc b{color:var(--text); font-weight:800;}
  .card-meta{display:flex; justify-content:space-between; align-items:center; font-size:12.5px; color:var(--text-faint);}
  .card-views{
    display:flex; align-items:center; gap:5px; font-size:10.5px; color:var(--text-faint);
    margin-top:7px; opacity:0; transition:opacity 0.4s ease;
  }
  .card-views.show{opacity:1;}
  .card-views i{font-size:12px; color:var(--cyan);}
  .card-views b{color:var(--text-dim); font-weight:600;}
  .price{font-weight:600; color:var(--text-dim); font-size:13px;}
  .card-cta{
    font-size:10px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--text-faint); transition:color 0.22s var(--ease);
    display:flex; align-items:center; gap:6px;
  }
  .card-cta i{font-size:12px; transition:transform 0.22s var(--ease);}
  .card:hover .card-cta{color:var(--chc, var(--purple));}
  .card:hover .card-cta i{transform:translateX(3px);}

  /* MODAL DE VISTA PREVIA */
  .gallery-track{
    display:flex; height:100%; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    /* touch-action:pan-y deja que el gesto vertical baje la página; el track
       solo se queda con el desplazamiento horizontal. Así la imagen del perfil
       no bloquea el scroll hacia abajo en el celular. */
    /* pan-x pan-y: el track SÍ se desliza a los lados y el gesto vertical
       sigue bajando la página (solo pan-y bloqueaba el swipe horizontal) */
    touch-action:pan-x pan-y;
    overscroll-behavior-x:contain;
  }
  .gallery-tile{
    flex:0 0 100%; scroll-snap-align:start; height:100%; position:relative;
    /* v107 — "top center": el recorte se queda con la cabeza, no con el ombligo */
    background-size:cover; background-position:top center; background-color:var(--surface-2);
    filter:blur(18px) saturate(120%); transform:scale(1.2);
    display:flex; align-items:center; justify-content:center;
    font-family:'Fraunces', serif; font-size:26px; color:rgba(139,92,246,0.5);
  }
  /* pointer-events:none: el video no tiene controles propios, así que no debe
     capturar toques — evita que "robe" el clic que iba dirigido a la X de cerrar */
  .gallery-tile video{width:100%; height:100%; object-fit:cover; display:block; pointer-events:none;}
  /* filter:none / transform:none: anula el blur+zoom que sí llevan las fotos —
     acá no hay contenido real que esconder, es solo un fondo de relleno, y así
     la etiqueta y (luego) el video quedan nítidos en vez de borroneados */
  .video-tile{
    background:linear-gradient(135deg, var(--surface-2), var(--surface));
    filter:none; transform:none; cursor:pointer;
  }
  .video-tag{
    position:absolute; bottom:16px; right:16px; z-index:4; width:46px; height:46px; border-radius:50%;
    background:var(--purple); color:#fff; display:flex; align-items:center; justify-content:center;
    font-size:18px; box-shadow:0 8px 22px -6px var(--purple-glow); transition:transform 0.2s var(--ease-bounce);
  }
  .video-tile:active .video-tag{transform:scale(0.92);}
  .gallery-dots{position:absolute; bottom:12px; left:0; right:0; z-index:3; display:flex; justify-content:center; gap:5px; pointer-events:none;}
  .gallery-dots span{width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,0.4); transition:background 0.2s ease;}
  .gallery-dots span.active{background:#fff;}
  .lock-overlay{
    position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; flex-direction:column;
    gap:10px; background:rgba(10,7,15,0.4); pointer-events:none;
  }
  /* ⭐ MUESTRAS de starsight: sin blur, con la marca de agua encima */
  .gallery-tile.preview-libre{filter:none; transform:none;}
  .star-thumb.preview-libre::after{display:none;}
  .marca-agua{
    position:absolute; inset:-35%; z-index:3; pointer-events:none;
    display:flex; flex-wrap:wrap; gap:20px 26px; align-content:space-around; justify-content:center;
    transform:rotate(-22deg); opacity:0.30;
  }
  .marca-agua span{ display:flex; flex-direction:column; align-items:center; white-space:nowrap; }
  .marca-agua .wm-a{
    font-family:'Inter', sans-serif; font-weight:800; font-size:11px; letter-spacing:0.05em;
    color:#fff; text-shadow:0 1px 5px rgba(0,0,0,0.6);
  }
  .preview-chip{
    position:absolute; top:12px; left:12px; z-index:4; display:inline-flex; align-items:center; gap:5px;
    font-size:9.5px; font-weight:800; letter-spacing:0.14em; padding:5px 10px; border-radius:999px;
    color:#F0A6C4; background:rgba(10,7,15,0.72); border:1px solid rgba(240,166,196,0.55); backdrop-filter:blur(4px);
  }
  .tile-candado{
    position:absolute; top:12px; right:12px; z-index:4; width:34px; height:34px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-size:15px;
    color:#fff; background:rgba(10,7,15,0.55); border:1px solid rgba(255,255,255,0.25);
  }
  .lock-overlay i{font-size:32px; color:#fff; filter:drop-shadow(0 4px 10px rgba(0,0,0,0.6));}
  .lock-overlay span{font-size:11px; letter-spacing:0.12em; color:rgba(255,255,255,0.85); font-weight:600;}
  @media (min-width:640px){
    .model-modal-content{flex-direction:row;}
    .model-modal-gallery{width:52%; flex-shrink:0;}
    .model-modal-body{flex:1; justify-content:center;}
  }
  .unlock-btn{
    margin-top:6px; display:flex; align-items:center; justify-content:center; gap:8px; padding:15px;
    border-radius:12px; background:linear-gradient(135deg, var(--purple), var(--pink)); color:#fff; font-weight:700; font-size:13.5px;
    transition:transform 0.25s var(--ease-bounce), box-shadow 0.25s ease, filter 0.25s ease;
    box-shadow:0 8px 20px -8px var(--purple-glow); position:relative; overflow:hidden;
  }
  .unlock-btn::after{
    content:''; position:absolute; inset:0; background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.35) 45%, transparent 60%);
    background-size:200% 100%; background-position:150% 0; transition:background-position 0.6s ease;
  }
  .unlock-btn:hover{transform:translateY(-2px) scale(1.02); box-shadow:0 14px 28px -8px var(--purple-glow); filter:brightness(1.08);}
  .unlock-btn:hover::after{background-position:-50% 0;}

  /* =========================================================
     STARSIGHT — CANAL EXCLUSIVO
     ========================================================= */
  /* fila del catálogo con banda especial */
  .catalog-row.starsight-row{
    /* v82 — la fila especial se viste de PLATA sobre grafito */
    position:relative; padding:30px 0 26px; border-radius:24px; overflow:hidden;
    background:
      radial-gradient(ellipse 600px 300px at 85% 0%, rgba(233,237,244,0.1), transparent 60%),
      radial-gradient(ellipse 500px 300px at 10% 100%, rgba(154,163,181,0.09), transparent 60%),
      linear-gradient(160deg, rgba(26,26,33,0.92), rgba(14,14,19,0.96));
    border:1px solid rgba(201,207,218,0.28);
  }
  [data-theme="light"] .catalog-row.starsight-row{
    background:
      radial-gradient(ellipse 600px 300px at 85% 0%, rgba(240,166,196,0.20), transparent 60%),
      linear-gradient(160deg, #FFF7FB, #FBF2F8);
    border-color:rgba(214,102,152,0.28);
  }
  .catalog-row.starsight-row::before{
    content:''; position:absolute; inset:0; pointer-events:none; opacity:0.6;
    background:linear-gradient(100deg, transparent 30%, rgba(240,166,196,0.07) 45%, transparent 60%);
    background-size:200% 100%; animation:shimmer 7s linear infinite;
  }
  .starsight-tagline{
    padding:0 28px; margin:-8px 0 16px; font-size:12px; color:var(--text-dim);
    display:flex; align-items:center; gap:7px; position:relative;
  }
  .starsight-tagline i{color:#F0A6C4;}
  .ss-exclusive-chip{
    display:inline-flex; align-items:center; gap:5px; font-size:9.5px; font-weight:700;
    letter-spacing:0.14em; padding:4px 9px; border-radius:999px;
    background:linear-gradient(135deg, rgba(240,166,196,0.18), rgba(157,92,255,0.18));
    border:1px solid rgba(240,166,196,0.45); color:#F0A6C4;
  }
  @media (max-width:640px){ .starsight-tagline{padding:0 18px;} }

  /* -------- ⭐ muestras reales de la Zona VIP (perfil starsight) -------- */
  .star-muestras{margin-top:22px;}
  .star-muestras[hidden]{display:none !important;}
  .muestra-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; margin-top:10px;}
  .muestra-grid:has(> :only-child){grid-template-columns:1fr;}
  .muestra-tile{
    position:relative; aspect-ratio:3/4; border-radius:16px; overflow:hidden;
    background:var(--surface-2); border:1px solid rgba(240,166,196,0.45);
    box-shadow:0 10px 26px rgba(0,0,0,0.3);
  }
  .muestra-tile img, .muestra-tile video{width:100%; height:100%; object-fit:cover; object-position:center 20%; display:block; pointer-events:none;}
  .muestra-nota{
    margin-top:10px; font-size:11.5px; line-height:1.5; color:var(--text-dim);
    display:flex; gap:6px; align-items:flex-start; padding:9px 12px; border-radius:12px;
    background:rgba(240,166,196,0.07); border:1px solid rgba(240,166,196,0.3);
  }
  .muestra-nota i{color:#F0A6C4; margin-top:1px;}
  html.modo-discreto .muestra-tile{filter:blur(22px) !important;} /* el modo discreto también las tapa */

  /* -------- ⭐ pago con estrellas (opción secundaria del perfil) -------- */
  .star-stars{margin-top:10px; display:flex; flex-direction:column; gap:8px;}
  .star-stars[hidden]{display:none !important;}
  .star-stars-btn{
    display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
    padding:12px 16px; border-radius:14px; cursor:pointer; font-weight:700; font-size:13px;
    color:var(--text); background:transparent; border:1px dashed rgba(217,178,74,0.55);
    transition:background .2s ease, transform .15s ease;
  }
  .star-stars-btn:active{transform:scale(0.98);}
  .star-stars-btn i{color:#E8C96A;}
  .star-stars-btn:disabled{opacity:0.6; cursor:wait;}
  .star-stars-nota{
    font-size:11.5px; line-height:1.5; color:var(--text-dim); display:flex; gap:6px; align-items:flex-start;
    padding:9px 12px; border-radius:12px; background:rgba(217,178,74,0.07); border:1px solid rgba(217,178,74,0.25);
  }
  .star-stars-nota i{color:#E8C96A; margin-top:1px;}
  .star-stars-nota b{color:var(--gold-soft, #E8C96A);}

  /* -------- 🌈💫 categorías nuevas: preventa y sello NUEVA (v57) -------- */
  .preventa-btn{
    display:inline-flex; align-items:center; gap:8px; margin-top:8px; padding:13px 24px;
    border-radius:999px; font-weight:800; font-size:13px; letter-spacing:0.06em;
    text-transform:uppercase; color:#141018; text-decoration:none; cursor:pointer;
    border:1px solid rgba(255,255,255,0.35);
    box-shadow:0 10px 26px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.4);
    transition:transform .15s ease;
  }
  .preventa-btn:active{transform:scale(0.97);}
  .cat-nueva-chip{
    display:inline-flex; align-items:center; gap:3px; font-size:9px; font-weight:800;
    letter-spacing:0.14em; padding:3px 9px; border-radius:999px; font-family:'Inter', sans-serif;
    background:rgba(61,231,214,0.14); border:1px solid rgba(61,231,214,0.55); color:#3DE7D6;
  }

  /* -------- ⭐ prueba social del catálogo (v52) -------- */
  .prueba-social{
    display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;
    margin:10px 0 14px; padding:10px 16px; border-radius:999px; text-align:center;
    font-size:12.5px; color:var(--text-dim);
    background:linear-gradient(135deg, rgba(217,178,74,0.1), rgba(157,92,255,0.07));
    border:1px solid rgba(217,178,74,0.35);
  }
  .prueba-social i{color:#E8C96A; font-size:15px;}
  .prueba-social b{font-family:'Fraunces', serif; font-size:16px; color:#E8C96A;}
  [data-theme="light"] .prueba-social b{color:#8a6a15;}

  /* -------- 👑 PASE TOTAL: combo de los 5 canales -------- */
  .combo-card{
    position:relative; overflow:hidden; margin:2px 0 18px; padding:20px 20px 18px;
    border-radius:20px; border:1px solid rgba(217,178,74,0.55);
    background:
      radial-gradient(ellipse 420px 220px at 85% -20%, rgba(217,178,74,0.16), transparent 70%),
      radial-gradient(ellipse 320px 200px at 0% 110%, rgba(157,92,255,0.12), transparent 70%),
      linear-gradient(160deg, rgba(30,22,12,0.92), rgba(16,11,22,0.94));
    box-shadow:0 14px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
  }
  [data-theme="light"] .combo-card{background:linear-gradient(160deg, #fdf6e6, #f6effb); box-shadow:0 10px 30px rgba(120,90,20,0.12);}
  .combo-eyebrow{
    display:inline-flex; align-items:center; gap:6px; font-size:10px; font-weight:800;
    letter-spacing:0.16em; padding:5px 11px; border-radius:999px; margin-bottom:10px;
    background:linear-gradient(135deg, rgba(217,178,74,0.25), rgba(217,178,74,0.1));
    border:1px solid rgba(217,178,74,0.6); color:#E8C96A;
  }
  .combo-titulo{font-family:'Fraunces', serif; font-size:22px; font-weight:700; color:var(--text); line-height:1.15; margin-bottom:4px;}
  .combo-sub{font-size:12.5px; color:var(--text-dim); margin-bottom:12px;}
  .combo-canales{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px;}
  .combo-ch{
    display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700;
    letter-spacing:0.08em; text-transform:uppercase; padding:5px 10px; border-radius:999px;
    border:1px solid; /* el color de cada canal llega en línea desde buildCombo */
  }
  .combo-precios{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:4px;}
  .combo-antes{font-size:14px; color:var(--text-faint); text-decoration:line-through;}
  .combo-ahora{font-family:'Fraunces', serif; font-size:30px; font-weight:800; color:#E8C96A; text-shadow:0 2px 14px rgba(217,178,74,0.35);}
  .combo-ahorro{
    display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800;
    padding:5px 10px; border-radius:999px; letter-spacing:0.06em;
    background:rgba(61,231,214,0.14); border:1px solid rgba(61,231,214,0.5); color:#3DE7D6;
  }
  .combo-nota{font-size:11.5px; color:var(--text-dim); display:flex; align-items:center; gap:6px; margin:8px 0 14px;}
  .combo-btn{
    display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
    padding:14px 18px; border-radius:14px; text-decoration:none; cursor:pointer;
    font-weight:800; font-size:14px; letter-spacing:0.06em; text-transform:uppercase;
    color:#1d1503; background:linear-gradient(135deg, #E8C96A, #D9B24A 55%, #c69c33);
    border:1px solid rgba(255,255,255,0.35);
    box-shadow:0 10px 26px rgba(217,178,74,0.35), inset 0 1px 0 rgba(255,255,255,0.5);
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .combo-btn:active{transform:scale(0.98);}
  .combo-brillo{position:absolute; top:-40%; right:-10%; width:220px; height:220px; border-radius:50%;
    background:radial-gradient(circle, rgba(232,201,106,0.18), transparent 65%); pointer-events:none;}
  @media (max-width:640px){ .combo-card{padding:18px 16px 16px;} .combo-ahora{font-size:26px;} }

  /* -------- estado "próximamente" del catálogo starsight -------- */
  .ss-maintenance{
    margin:6px 28px 10px; padding:34px 24px; border-radius:18px; text-align:center;
    position:relative; overflow:hidden;
    border:1px dashed rgba(240,166,196,0.45);
    background:
      radial-gradient(ellipse 400px 200px at 50% 0%, rgba(240,166,196,0.1), transparent 70%),
      rgba(14,10,20,0.35);
    display:flex; flex-direction:column; align-items:center; gap:12px;
  }
  [data-theme="light"] .ss-maintenance{background:rgba(255,255,255,0.55);}
  @media (max-width:640px){ .ss-maintenance{margin:6px 18px 10px;} }
  .ss-maint-icon{
    width:54px; height:54px; border-radius:16px; display:flex; align-items:center; justify-content:center;
    font-size:26px; color:#F0A6C4;
    background:linear-gradient(135deg, rgba(240,166,196,0.16), rgba(157,92,255,0.16));
    border:1px solid rgba(240,166,196,0.4);
    animation:maintSwing 3s ease-in-out infinite;
  }
  @keyframes maintSwing{0%,100%{transform:rotate(-8deg);} 50%{transform:rotate(8deg);}}
  .ss-maint-title{font-family:'Fraunces', serif; font-size:20px; font-weight:600; color:var(--text);}
  .ss-maint-sub{font-size:12.5px; color:var(--text-dim); max-width:420px; line-height:1.6;}
  .ss-count{display:flex; gap:10px; margin-top:6px;}
  .ss-count .seg{
    min-width:64px; padding:10px 12px 8px; border-radius:12px;
    background:rgba(240,166,196,0.08); border:1px solid rgba(240,166,196,0.35);
    display:flex; flex-direction:column; gap:2px;
  }
  .ss-count .seg b{
    font-family:'Fraunces', serif; font-size:24px; font-weight:600; color:#F0A6C4;
    font-variant-numeric:tabular-nums; line-height:1;
  }
  [data-theme="light"] .ss-count .seg b{color:#C2547F;}
  .ss-count .seg small{font-size:8.5px; font-weight:700; letter-spacing:0.16em; color:var(--text-faint);}
  .ss-maint-note{
    display:inline-flex; align-items:center; gap:6px; margin-top:4px;
    font-size:10.5px; font-weight:700; letter-spacing:0.1em; color:var(--text-faint);
  }
  .ss-maint-note i{color:#F0A6C4;}

  /* tarjetas de la sala starsight: borde degradado PLATA (v82) */
  .card[data-channel="starsight"]{
    border:1px solid transparent;
    background:
      linear-gradient(var(--surface), var(--surface)) padding-box,
      linear-gradient(140deg, rgba(233,237,244,0.8), rgba(154,163,181,0.5), rgba(233,237,244,0.25)) border-box;
    box-shadow:0 10px 30px -14px rgba(201,207,218,0.35);
  }
  .card[data-channel="starsight"]:hover{
    box-shadow:0 18px 44px -14px rgba(201,207,218,0.5);
  }
  .card[data-channel="starsight"] .card-cta{color:#E3E6EE;}
  .card[data-channel="starsight"]:hover .card-cta{color:#E3E6EE;}
  .card-media .ss-corner{
    /* v86 — arriba a la izquierda: abajo vive la burbuja del NIVEL (ya no se enciman) */
    position:absolute; top:10px; left:10px; bottom:auto; z-index:3;
    background:rgba(14,10,20,0.75); backdrop-filter:blur(6px);
  }

  /* -------- página de perfil de modelo (pantalla completa) --------
     se usa para TODOS los canales; el color de acento se ajusta solo
     al canal de la modelo mediante las variables --pp-* */
  .star-profile{
    --pp-accent:#F0A6C4;
    --pp-soft:rgba(240,166,196,0.14);
    --pp-border:rgba(240,166,196,0.35);
    --pp-glow:rgba(240,166,196,0.3);
    position:fixed; inset:0; z-index:1400; background:var(--bg); /* v103: por encima de la Zona VIP */
    opacity:0; pointer-events:none; transition:opacity 0.3s ease;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  .star-profile.open{opacity:1; pointer-events:auto;}
  .star-profile::before{
    content:''; position:fixed; inset:0; pointer-events:none;
    background:
      radial-gradient(ellipse 700px 400px at 80% -5%, var(--pp-soft), transparent 60%),
      radial-gradient(ellipse 600px 400px at 5% 30%, rgba(157,92,255,0.12), transparent 60%);
  }
  .star-profile-inner{
    position:relative; max-width:960px; margin:0 auto; padding:70px 24px 60px;
    transform:translateY(16px); transition:transform 0.4s var(--ease);
  }
  .star-profile.open .star-profile-inner{transform:translateY(0);}
  .star-profile-back{
    position:fixed; top:calc(14px + env(safe-area-inset-top, 0px)); left:16px; z-index:10; display:flex; align-items:center; gap:7px;
    padding:9px 16px 9px 12px; border-radius:999px; font-size:12px; font-weight:600;
    background:rgba(28,21,38,0.85); border:1px solid var(--line-strong); color:var(--text);
    cursor:pointer; backdrop-filter:blur(8px);
    transform:translateZ(0); -webkit-transform:translateZ(0); will-change:transform;
  }
  [data-theme="light"] .star-profile-back{background:rgba(255,255,255,0.9);}
  .star-profile-head{
    display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px;
  }
  .pp-chip{
    display:inline-flex; align-items:center; gap:5px; font-size:9.5px; font-weight:700;
    letter-spacing:0.14em; padding:4px 9px; border-radius:999px;
    background:var(--pp-soft); border:1px solid var(--pp-border); color:var(--pp-accent);
  }
  .star-profile-name{
    font-family:'Fraunces', serif; font-size:clamp(28px, 5vw, 40px); font-weight:600; line-height:1.05;
    background:linear-gradient(120deg, #fff, var(--pp-accent) 70%, var(--purple));
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  }
  [data-theme="light"] .star-profile-name{
    background:linear-gradient(120deg, #211830, var(--pp-accent) 70%, var(--purple));
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  }
  .star-profile-sub{margin-top:8px; font-size:13px; color:var(--text-dim); display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
  .pp-tags{display:flex; flex-wrap:wrap; gap:7px; margin-top:12px;}
  .pp-tag{
    font-size:10.5px; font-weight:600; letter-spacing:0.05em; padding:5px 12px; border-radius:999px;
    background:var(--surface); border:1px solid var(--line-strong); color:var(--text-dim);
    display:inline-flex; align-items:center; gap:4px;
    transition:border-color 0.2s ease, color 0.2s ease;
  }
  .pp-tag:hover{border-color:var(--pp-border); color:var(--pp-accent);}
  .pp-tag i{font-size:11px; color:var(--pp-accent);}
  /* galería principal (carrusel grande, mismo mecanismo de tiles borrosos) */
  .star-gallery{
    position:relative; border-radius:20px; overflow:hidden; background:var(--surface-2);
    aspect-ratio:16/10; border:1px solid var(--pp-border);
    box-shadow:0 30px 70px -30px var(--pp-glow);
  }
  @media (max-width:640px){ .star-gallery{aspect-ratio:4/5;} }
  /* mosaico de miniaturas debajo del carrusel */
  .star-thumbs{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(84px, 1fr)); gap:8px; margin-top:10px;
  }
  .star-thumb{
    position:relative; aspect-ratio:4/5; border-radius:12px; overflow:hidden; cursor:pointer;
    background-size:cover; background-position:top center; background-color:var(--surface-2);
    border:1px solid var(--line); transition:border-color 0.2s ease, transform 0.2s var(--ease-bounce);
  }
  .star-thumb::after{content:''; position:absolute; inset:0; backdrop-filter:blur(10px) saturate(120%); -webkit-backdrop-filter:blur(10px) saturate(120%);}
  .star-thumb.active{border-color:var(--pp-accent); transform:scale(1.04);}
  .star-thumb .thumb-video{
    position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:18px; background:rgba(10,7,15,0.35);
  }
  /* sección de detalles */
  .star-details{
    margin-top:28px; display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px;
  }
  .star-detail{
    padding:14px 16px; border-radius:14px; background:var(--surface);
    border:1px solid var(--line); display:flex; flex-direction:column; gap:4px;
    transition:border-color 0.25s ease, transform 0.25s var(--ease);
  }
  .star-detail:hover{border-color:var(--pp-border); transform:translateY(-2px);}
  .star-detail-label{font-size:9.5px; font-weight:700; letter-spacing:0.14em; color:var(--pp-accent); display:flex; align-items:center; gap:5px;}
  .star-detail-value{font-size:13.5px; font-weight:600; color:var(--text);}
  /* barra de precio + suscriptores dentro del perfil de cada modelo */
  .star-pricebar{
    margin-top:22px; display:grid; grid-template-columns:1fr 1fr; gap:0;
    border-radius:18px; overflow:hidden;
    background:linear-gradient(150deg, color-mix(in srgb, var(--pp-accent) 9%, transparent), transparent 70%), var(--surface);
    border:1px solid var(--pp-border);
  }
  .pricebar-cell{display:flex; align-items:center; gap:11px; padding:15px 16px; min-width:0;}
  .pricebar-cell:first-child{border-right:1px solid color-mix(in srgb, var(--pp-accent) 22%, transparent);}
  .pricebar-ico{
    width:38px; height:38px; border-radius:12px; flex-shrink:0; font-size:17px; color:var(--pp-accent);
    display:flex; align-items:center; justify-content:center;
    background:color-mix(in srgb, var(--pp-accent) 15%, transparent);
    border:1px solid color-mix(in srgb, var(--pp-accent) 35%, transparent);
  }
  .pricebar-txt{display:flex; flex-direction:column; gap:3px; min-width:0;}
  .pricebar-k{font-size:8.5px; font-weight:800; letter-spacing:0.11em; text-transform:uppercase; color:var(--text-faint); line-height:1.4;}
  .pricebar-v{font-size:17.5px; font-weight:900; color:var(--text); line-height:1.12;}
  /* el precio de ANTES va en su propia línea (tachado, discreto) y el de la
     promo abajo, grande y del color del canal: así nunca se pegan ni se
     cortan — ni con los números larguísimos de COP o ARS */
  .pricebar-v .price-old{display:block; font-size:11px; font-weight:700; color:var(--text-faint); text-decoration:line-through; text-decoration-color:rgba(255,79,163,0.75); text-decoration-thickness:1.5px; margin-bottom:2px;}
  .pricebar-v .price-new{display:block; color:var(--pp-accent);}
  .pricebar-v small{display:block; margin-top:2px; font-size:9px; font-weight:800; letter-spacing:0.08em; color:var(--text-dim); text-transform:uppercase;}
  .pricebar-perm{
    grid-column:1 / -1; padding:11px 14px; border-top:1px solid color-mix(in srgb, var(--pp-accent) 20%, transparent);
    font-size:10.5px; font-weight:800; letter-spacing:0.05em; color:var(--text-dim);
    display:flex; align-items:center; gap:7px; justify-content:center; text-align:center;
    background:color-mix(in srgb, var(--pp-accent) 5%, transparent);
  }
  .pricebar-perm i{color:var(--pp-accent); font-size:14px;}
  .star-about{
    margin-top:14px; padding:18px 20px; border-radius:16px; font-size:13.5px; line-height:1.65;
    color:var(--text-dim); background:var(--surface); border:1px solid var(--line);
  }
  .star-about strong{color:var(--pp-accent); font-weight:700; font-size:10px; letter-spacing:0.14em; display:block; margin-bottom:6px;}
  .star-profile-cta{
    margin-top:26px; display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  }
  .star-profile-cta .unlock-btn{margin-top:0; flex:1; min-width:240px;}
  .star-profile-cta .unlock-btn{background:linear-gradient(135deg, var(--pp-accent), var(--purple));}
  /* relacionados: más modelos del mismo canal */
  .pp-related{margin-top:40px;}
  .pp-related-title{
    font-family:'Fraunces', serif; font-size:18px; font-weight:600; color:var(--text);
    display:flex; align-items:center; gap:8px; margin-bottom:14px;
  }
  .pp-related-title i{color:var(--pp-accent);}
  .pp-related .carousel-track{padding:6px 2px 14px;}

  /* =========================================================
     ¿QUÉ ENCONTRARÁS? — cifras del catálogo
     ========================================================= */
  .discover-section{padding:56px 0 30px;}
  .discover-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:12px;}
  .discover-card{
    position:relative; overflow:hidden; padding:22px 20px; border-radius:16px;
    background:var(--surface); border:1px solid var(--line);
    display:flex; flex-direction:column; gap:8px;
    transition:transform 0.3s var(--ease), border-color 0.3s ease, box-shadow 0.3s ease;
  }
  .discover-card:hover{transform:translateY(-4px); border-color:var(--dc-border, var(--line-strong)); box-shadow:0 18px 38px -20px var(--dc-glow, rgba(0,0,0,0.4));}
  .discover-card::after{
    content:''; position:absolute; top:-40px; right:-40px; width:110px; height:110px; border-radius:50%;
    background:radial-gradient(circle, var(--dc-tint, transparent), transparent 70%); pointer-events:none;
  }
  .discover-icon{
    width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center;
    font-size:20px; background:var(--dc-tint, rgba(139,92,246,0.12)); color:var(--dc-color, var(--purple));
    transition:transform 0.3s var(--ease-bounce);
  }
  .discover-card:hover .discover-icon{transform:scale(1.12) rotate(-6deg);}
  .discover-num{font-family:'Fraunces', serif; font-size:30px; font-weight:600; color:var(--text); line-height:1;}
  .discover-label{font-size:12px; color:var(--text-dim); line-height:1.5;}

  /* =========================================================
     TABLA COMPARATIVA DE CANALES
     ========================================================= */
  .compare-wrap{margin-top:48px;}
  .compare-title{
    font-family:'Fraunces', serif; font-size:17px; font-weight:600; color:var(--text);
    display:flex; align-items:center; gap:8px; margin-bottom:14px;
  }
  .compare-title i{color:var(--purple);}
  .compare-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:16px; background:var(--surface);}
  .compare-table{width:100%; border-collapse:collapse; min-width:640px; font-size:12.5px;}
  .compare-table th, .compare-table td{padding:13px 14px; text-align:center; border-bottom:1px solid var(--line); white-space:nowrap;}
  .compare-table tbody th{white-space:normal; min-width:150px; line-height:1.4;}
  .compare-table tr:last-child th, .compare-table tr:last-child td{border-bottom:none;}
  .compare-table thead th{
    font-size:11px; font-weight:700; letter-spacing:0.06em; padding-top:16px;
  }
  .compare-table thead th .ch-head{display:flex; flex-direction:column; align-items:center; gap:5px;}
  .compare-table thead th .ch-head i{font-size:18px;}
  .compare-table tbody th{
    text-align:left; font-size:11.5px; font-weight:600; color:var(--text-dim); letter-spacing:0.03em;
    position:sticky; left:0; background:var(--surface); z-index:1;
  }
  .compare-table td .ti-check{color:var(--cyan); font-size:16px;}
  .compare-table td .ti-minus{color:var(--text-faint); font-size:14px; opacity:0.5;}
  .compare-table td.soon{font-size:10px; font-weight:700; letter-spacing:0.08em; color:#F0A6C4;}
  .compare-table .price-row td{font-family:'Fraunces', serif; font-size:15px; font-weight:600; color:var(--text);}

  /* =========================================================
     BUSCADOR DEL CATÁLOGO
     ========================================================= */
  .catalog-search{
    position:relative; display:flex; align-items:center; gap:10px; margin:14px 0 4px;
    padding:0 16px; height:46px; border-radius:13px;
    background:var(--surface); border:1px solid var(--line-strong);
    transition:border-color 0.25s ease, box-shadow 0.25s ease;
  }
  .catalog-search:focus-within{border-color:rgba(245,212,136,0.55); box-shadow:0 0 0 3px rgba(232,185,74,0.12);}
  .catalog-search:focus-within > i{color:var(--gold-soft);}
  /* v121 — el panel de resultados en vivo también vive en el catálogo clásico */
  .catalog-search{z-index:80;}
  .catalog-search .fp-busca-panel{top:calc(100% + 6px);}
  .catalog-search > i{color:var(--text-faint); font-size:16px; flex-shrink:0;}
  .catalog-search input{
    flex:1; height:100%; background:none; border:none; outline:none; color:var(--text);
    font-family:'Inter', sans-serif; font-size:13.5px; min-width:0;
  }
  .catalog-search input::placeholder{color:var(--text-faint);}
  .catalog-search input::-webkit-search-cancel-button{display:none;}
  .catalog-search button{
    width:26px; height:26px; border-radius:8px; border:1px solid var(--line-strong); background:var(--surface-2);
    color:var(--text-dim); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:13px;
    transition:color 0.2s ease, border-color 0.2s ease;
  }
  .catalog-search button:hover{color:var(--text); border-color:var(--purple);}
  .search-empty{
    text-align:center; padding:44px 20px; color:var(--text-dim);
    display:flex; flex-direction:column; align-items:center; gap:8px;
  }
  .search-empty i{font-size:34px; color:var(--text-faint);}
  .search-empty div{font-family:'Fraunces', serif; font-size:17px; color:var(--text);}
  .search-empty small{font-size:12px; color:var(--text-faint);}

  /* =========================================================
     FAVORITOS
     ========================================================= */
  .fav-btn{
    position:absolute; bottom:12px; right:12px; z-index:3;
    display:flex; align-items:center; gap:5px; padding:6px 10px; border-radius:999px;
    background:rgba(14,10,20,0.7); border:1px solid var(--line-strong); color:#B4A6C4;
    backdrop-filter:blur(6px); font-size:11.5px; font-weight:600; cursor:pointer;
    transition:all 0.22s var(--ease); font-family:'Inter', sans-serif;
  }
  .fav-btn:hover{color:var(--gold-soft); border-color:var(--gold-soft); transform:scale(1.06);}
  .fav-btn.active{color:#14100B; background:var(--gold-soft); border-color:var(--gold-soft);}
  /* dentro de las tarjetas (post IG) el guardado es solo el ícono en dorado */
  .card .fav-btn.active{background:none; border:none; color:var(--gold-soft);}
  .fav-btn-page{
    position:static; font-size:12px; padding:9px 16px;
    background:var(--surface); border-color:var(--line-strong);
  }
  @keyframes favPop{0%{transform:scale(1);} 45%{transform:scale(1.25);} 100%{transform:scale(1);}}
  .fav-btn.pop{animation:favPop 0.4s var(--ease-bounce);}

  /* =========================================================
     OPINIONES
     ========================================================= */
  .testimonials-section{padding:0 0 90px;}
  .testimonials-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:14px;}
  /* v120 — reseñas premium compactas: carrusel deslizable, tarjetas parejas,
     texto plegado a 4 líneas (toca para leer completo) */
  #testimonialsGrid{display:flex !important;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:4px 2px 14px;scrollbar-width:none;grid-template-columns:none !important}
  #testimonialsGrid::-webkit-scrollbar{display:none}
  #testimonialsGrid .testimonial{flex:0 0 272px;scroll-snap-align:start;margin:0}
  .t-text{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer;transition:max-height .25s}
  .t-text.abierta{display:block;-webkit-line-clamp:unset}
  .testimonial{
  .row-tipo{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:800;letter-spacing:.6px;color:var(--rt,#E4CD8B);background:color-mix(in srgb, var(--rt,#E4CD8B) 14%, transparent);border:1px solid color-mix(in srgb, var(--rt,#E4CD8B) 45%, transparent);border-radius:999px;padding:3px 10px;margin-bottom:6px}
  .chip-tipo{font-weight:800}
  /* v120 — velocidad: las tarjetas fuera de pantalla no se calculan hasta acercarse */
  .card, .testimonial{content-visibility:auto;contain-intrinsic-size:300px 400px}

    padding:22px; border-radius:16px; background:var(--surface); border:1px solid var(--line);
    display:flex; flex-direction:column; gap:12px; position:relative; overflow:hidden;
    transition:transform 0.3s var(--ease), border-color 0.3s ease;
  }
  .testimonial:hover{transform:translateY(-4px); border-color:var(--line-strong);}
  .testimonial::before{
    content:'\201C'; position:absolute; top:2px; right:16px; font-family:'Fraunces', serif;
    font-size:64px; line-height:1; color:var(--purple); opacity:0.14;
  }
  .t-head{display:flex; align-items:center; gap:12px;}
  .t-avatar{
    width:42px; height:42px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-family:'Fraunces', serif; font-size:16px; font-weight:600; color:#fff;
    background:var(--t-grad, linear-gradient(135deg, var(--purple), var(--pink)));
  }
  .t-name{font-size:13px; font-weight:700; color:var(--text); display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
  .t-user{font-size:10.5px; font-weight:700; color:var(--text-faint); letter-spacing:0.03em;}
  .t-sub{font-size:10.5px; color:var(--text-faint); margin-top:2px; display:flex; align-items:center; gap:4px;}
  .t-sub i{color:#5FA8FF; font-size:12px;}
  .t-stars{display:flex; align-items:center; gap:2px; color:var(--gold-soft); font-size:14px; letter-spacing:2.5px;}
  .t-est{color:var(--gold-soft);}
  .t-est.vacia{color:var(--text-faint); opacity:0.55;}
  .t-text{font-size:12.5px; line-height:1.65; color:var(--text-dim);}
  /* ---- reseñas VERIFICADAS del bot: tarjeta premium con aro del canal ---- */
  .testimonial.tv{
    border:1px solid transparent;
    background:linear-gradient(var(--surface), var(--surface)) padding-box,
      linear-gradient(155deg, color-mix(in srgb, var(--tc, #9D5CFF) 60%, transparent),
        rgba(230,220,245,0.09) 42%, color-mix(in srgb, var(--tc, #E8B94A) 45%, transparent)) border-box;
  }
  .testimonial.tv:hover{
    transform:translateY(-4px);
    box-shadow:0 22px 44px -22px color-mix(in srgb, var(--tc, #9D5CFF) 55%, transparent);
  }
  .testimonial.tv .t-avatar{
    box-shadow:0 0 0 2px var(--surface), 0 0 0 3.5px color-mix(in srgb, var(--tc, #9D5CFF) 75%, transparent);
  }
  .t-avatar{position:relative;}
  .t-avatar-check{
    position:absolute; right:-4px; bottom:-4px; width:17px; height:17px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-size:9px; color:#fff;
    background:linear-gradient(135deg, #5FA8FF, #3D7BE8); border:2px solid var(--surface);
  }
  .testimonial.tv .t-stars .t-est{filter:drop-shadow(0 0 6px rgba(232,185,74,0.55));}
  .t-fecha{margin-left:auto; font-size:10px; font-weight:700; color:var(--text-faint); letter-spacing:0.05em;}
  /* ===== v138 — APARTADO DE RESEÑAS ===== */
  .t-cifras{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px;}
  .t-cifra{flex:1 1 120px; min-width:110px; padding:13px 15px; border-radius:15px; text-align:center;
    background:rgba(232,185,74,0.06); border:1px solid rgba(232,185,74,0.24);}
  .t-cifra b{display:block; font-size:23px; font-weight:900; color:var(--gold-soft); line-height:1.15;}
  .t-cifra small{display:block; font-size:10px; font-weight:700; letter-spacing:0.08em; color:var(--text-dim); margin-top:5px; line-height:1.35;}
  .t-refrescar{margin-top:12px; display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:999px;
    font-family:inherit; font-size:11px; font-weight:800; letter-spacing:0.08em; cursor:pointer;
    color:var(--text-dim); background:none; border:1px solid var(--line-strong); transition:color .2s, border-color .2s, transform .12s;}
  .t-refrescar:hover{color:var(--gold-soft); border-color:rgba(232,185,74,0.5);}
  .t-refrescar:active{transform:scale(0.95);}
  .t-refrescar.girando i{animation:tGira .9s linear infinite;}
  @keyframes tGira{to{transform:rotate(360deg);}}
  .t-vacio{display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center;
    padding:38px 24px; border-radius:20px; border:1px dashed rgba(232,185,74,0.32); background:rgba(232,185,74,0.04);}
  /* ojo: "display:flex" le gana al atributo hidden del HTML. Sin esto, el
     estado vacío y los números seguían viéndose aunque estuvieran marcados
     como ocultos — salía "todavía no hay reseñas" DEBAJO de las reseñas. */
  .t-cifras[hidden], .t-vacio[hidden]{display:none !important;}
  .t-vacio i{font-size:30px; color:var(--gold-soft);}
  .t-vacio b{font-size:15px;}
  .t-vacio span{font-size:12.5px; color:var(--text-dim); max-width:420px; line-height:1.6;}
  .t-badges{display:flex; flex-wrap:wrap; gap:6px;}
  .t-badge{
    display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:999px;
    font-size:9.5px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; white-space:nowrap;
  }
  .t-badge.tg{color:#7FB8FF; background:rgba(95,168,255,0.1); border:1px solid rgba(95,168,255,0.35);}
  .t-badge.tg i{font-size:12px;}
  .t-badge.canal{
    color:var(--tb, var(--gold-soft));
    background:color-mix(in srgb, var(--tb, #E8B94A) 10%, transparent);
    border:1px solid color-mix(in srgb, var(--tb, #E8B94A) 45%, transparent);
  }
  /* cabecera de confianza: promedio + leyenda */
  .t-confianza{display:flex; align-items:center; gap:12px; margin:14px 0 2px; font-size:11.5px; color:var(--text-faint); flex-wrap:wrap; line-height:1.6;}
  .t-confianza b{color:var(--gold-soft); font-weight:800;}
  .t-confianza[hidden]{display:none !important;}
  .t-prom{
    display:inline-flex; align-items:center; gap:7px; padding:8px 15px; border-radius:999px; flex-shrink:0;
    font-size:11.5px; font-weight:800; letter-spacing:0.05em; color:var(--gold-soft);
    background:rgba(232,185,74,0.08); border:1px solid rgba(232,185,74,0.4);
    box-shadow:0 8px 22px -12px rgba(232,185,74,0.5);
  }
  .t-prom i{font-size:13px;}

  /* =========================================================
     CTA FLOTANTE (escritorio)
     ========================================================= */
  /* v130 — dorado premium, a juego con el resto de la casa */
  .floating-cta{
    position:fixed; right:26px; bottom:26px; z-index:120;
    display:flex; align-items:center; gap:8px; padding:14px 24px; border-radius:999px;
    background:linear-gradient(160deg, #FFE9A8, #F2B93E 55%, #D9910F);
    color:#231604; font-size:13px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase;
    box-shadow:0 16px 38px -12px rgba(242,185,62,0.7), inset 0 1px 0 rgba(255,255,255,0.55);
    opacity:0; pointer-events:none; transform:translateY(16px) scale(0.95);
    transition:opacity 0.35s ease, transform 0.35s var(--ease-bounce), box-shadow 0.25s ease;
  }
  .floating-cta.show{opacity:1; pointer-events:auto; transform:translateY(0) scale(1);}
  .floating-cta:hover{box-shadow:0 18px 44px -10px rgba(232,120,190,0.6); transform:translateY(-3px) scale(1.03);}
  .floating-cta i{font-size:16px;}
  @media (max-width:860px){ .floating-cta{display:none;} } /* en móvil ya está la tabbar con CTA */

  
  /* =========================================================
     MICROANIMACIONES Y RENDIMIENTO
     ========================================================= */
  .unlock-btn, .promo-cta, .floating-cta, .view-btn, .chip, .fav-btn, .tab-cta{will-change:transform;}
  .unlock-btn:active, .promo-cta:active, .floating-cta:active, .card-cta:active, .fav-btn:active{transform:scale(0.96);}
  .view-btn:active, .chip:active{transform:scale(0.94);}
  .unlock-btn{position:relative; overflow:hidden;}
  .unlock-btn::after{
    content:''; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(100deg, transparent 35%, rgba(255,255,255,0.22) 48%, transparent 62%);
    background-size:220% 100%; background-position:150% 0; transition:background-position 0.7s ease;
  }
  .unlock-btn:hover::after{background-position:-70% 0;}
  .card-cta i{transition:transform 0.25s var(--ease);}
  .card:hover .card-cta i{transform:translateX(4px);}
  /* las secciones bajo el pliegue solo se pintan cuando se acercan al viewport */
  .payment-section, .how-section, .stats-section, .testimonials-section,
  .channels-section, .support-section, .why-section{content-visibility:auto; contain-intrinsic-size:auto 620px;}

  /* =========================================================
     HERO A PANTALLA COMPLETA CON VIDEO DE FONDO
     ========================================================= */
  header.hero{
    min-height:100vh; min-height:100svh;
    display:flex; align-items:center;
    padding:110px 0 70px;
  }
  .hero-media{position:absolute; inset:0; z-index:0; overflow:hidden;}
  .hero-media video{
    width:100%; height:100%; object-fit:cover; object-position:center;
    filter:saturate(1.05);
  }
  /* FOTO del banner con movimiento cinematográfico (ken burns lento) */
  .hero-media .hero-foto{
    width:100%; height:100%; object-fit:cover; object-position:center 25%;
    filter:saturate(1.06);
    animation:heroKenBurns 22s ease-in-out infinite alternate;
    will-change:transform;
  }
  @keyframes heroKenBurns{
    0%{transform:scale(1) translate(0, 0);}
    100%{transform:scale(1.14) translate(-2.5%, -2%);}
  }
  /* con foto/video propio: se ve MÁS la imagen (overlay más suave) y filo dorado */
  .hero.con-media .hero-media::after{
    background:
      linear-gradient(180deg, rgba(10,7,15,0.35) 0%, rgba(10,7,15,0.35) 42%, rgba(10,7,15,0.82) 82%, var(--bg) 100%),
      linear-gradient(90deg, rgba(10,7,15,0.5), transparent 55%);
  }
  .hero.con-media{isolation:isolate;}
  .hero.con-media::after{
    content:''; position:absolute; left:0; right:0; bottom:0; height:2px; z-index:2; pointer-events:none;
    background:linear-gradient(90deg, transparent 3%, rgba(232,185,74,0.75), rgba(255,122,184,0.55), rgba(232,185,74,0.75), transparent 97%);
    background-size:220% auto; animation:emShine 6s linear infinite;
  }
  html[data-lite="1"] .hero-media .hero-foto{animation:none !important;}
  /* degradado oscuro encima del video para que el texto siempre se lea */
  .hero-media::after{
    content:''; position:absolute; inset:0;
    background:
      linear-gradient(180deg, rgba(10,7,15,0.72) 0%, rgba(10,7,15,0.55) 45%, var(--bg) 100%),
      radial-gradient(ellipse 900px 500px at 50% 30%, rgba(139,92,246,0.18), transparent 70%);
  }
  .hero > .wrap{position:relative; z-index:1;}
  .hero-promo-title{
    display:block; font-size:clamp(44px, 9vw, 92px); letter-spacing:0.01em;
    background:linear-gradient(120deg, #FFE28A, var(--gold-soft) 40%, #F0B23A 70%, #FFE28A);
    background-size:200% auto;
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    animation:emShine 5s linear infinite;
    filter:drop-shadow(0 6px 30px rgba(232,185,74,0.25));
  }
  /* contador de la promoción dentro del hero — versión premium:
     bordes degradados que respiran y dígitos que saltan al cambiar */
  .hero-count{display:flex; gap:10px; margin-top:26px; animation:fadeInUp 0.7s 0.25s var(--ease) both;}
  .hero-count .seg{
    position:relative; min-width:74px; padding:12px 14px 10px; border-radius:14px; text-align:center;
    background:linear-gradient(rgba(20,14,28,0.62), rgba(20,14,28,0.62)) padding-box,
               linear-gradient(150deg, rgba(232,185,74,0.85), rgba(157,92,255,0.35) 55%, rgba(232,185,74,0.5)) border-box;
    border:1px solid transparent;
    backdrop-filter:blur(8px);
    display:flex; flex-direction:column; gap:3px;
    animation:segGlow 2.8s ease-in-out infinite;
  }
  [data-theme="light"] .hero-count .seg{
    background:linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8)) padding-box,
               linear-gradient(150deg, rgba(166,117,46,0.8), rgba(124,58,237,0.35) 55%, rgba(166,117,46,0.5)) border-box;
  }
  @keyframes segGlow{
    0%,100%{box-shadow:0 6px 22px -12px rgba(232,185,74,0.5);}
    50%{box-shadow:0 8px 30px -10px rgba(232,185,74,0.85);}
  }
  /* los segundos laten un poco más: urgencia sutil */
  .hero-count .seg:last-child{animation-duration:1.4s;}
  .hero-count .seg b{
    font-family:'Fraunces', serif; font-size:28px; font-weight:600; color:var(--gold-soft);
    font-variant-numeric:tabular-nums; line-height:1;
  }
  .hero-count .seg b.seg-pop{animation:segPop 0.5s var(--ease-bounce);}
  @keyframes segPop{
    0%{transform:translateY(-9px) scale(0.92); opacity:0.25; filter:blur(1px);}
    100%{transform:translateY(0) scale(1); opacity:1; filter:blur(0);}
  }
  .hero-count .seg small{font-size:8.5px; font-weight:700; letter-spacing:0.18em; color:var(--text-faint);}
  .hero-count .sep{font-family:'Fraunces', serif; font-size:26px; color:var(--gold-soft); align-self:center; opacity:0.5; animation:sepBlink 1s steps(1) infinite;}
  @keyframes sepBlink{50%{opacity:0.15;}}
  @media (prefers-reduced-motion: reduce){ .hero-count .seg, .hero-count .sep, .hero-count .seg b{animation:none;} }
  /* botones del hero */
  .hero-actions{display:flex; gap:14px; margin-top:28px; flex-wrap:wrap; animation:fadeInUp 0.7s 0.35s var(--ease) both;}
  .hero-btn{
    display:inline-flex; align-items:center; gap:9px; padding:16px 30px; border-radius:999px;
    font-size:14px; font-weight:800; letter-spacing:0.05em; cursor:pointer;
    transition:transform 0.25s var(--ease-bounce), box-shadow 0.25s ease, border-color 0.25s ease;
    position:relative; overflow:hidden;
  }
  .hero-btn i{font-size:17px;}
  .hero-btn-primary{
    background:linear-gradient(135deg, var(--gold-soft), #E8783A);
    color:#1A0F08; box-shadow:0 14px 38px -10px rgba(232,185,74,0.5);
    animation:ctaGlow 2.6s ease-in-out infinite;
  }
  .hero-btn-primary:hover{transform:translateY(-3px) scale(1.03); box-shadow:0 20px 48px -10px rgba(232,185,74,0.65);}
  .hero-btn-ghost{
    background:rgba(20,14,28,0.5); color:var(--text);
    border:1px solid var(--line-strong); backdrop-filter:blur(8px);
  }
  .hero-btn-ghost:hover{transform:translateY(-3px); border-color:var(--purple); box-shadow:0 14px 34px -14px rgba(139,92,246,0.45);}
  /* botón estrella del hero: EXPLORAR EL CATÁLOGO (la web existe para esto) */
  .hero-btn-catalog{
    background:linear-gradient(135deg, var(--purple), var(--pink)); color:#fff;
    box-shadow:0 14px 38px -10px var(--purple-glow);
    animation:catalogGlow 2.6s ease-in-out infinite;
  }
  .hero-btn-catalog:hover{transform:translateY(-3px) scale(1.03); box-shadow:0 20px 48px -10px rgba(255,79,163,0.55); filter:brightness(1.07);}
  .hero-btn-catalog .hb-arrow{font-size:15px; transition:transform 0.25s var(--ease);}
  .hero-btn-catalog:hover .hb-arrow{transform:translateX(4px);}
  @keyframes catalogGlow{
    0%,100%{box-shadow:0 14px 38px -10px rgba(157,92,255,0.5);}
    50%{box-shadow:0 14px 48px -8px rgba(255,79,163,0.65);}
  }
  @media (prefers-reduced-motion: reduce){ .hero-btn-catalog{animation:none;} }
  .hero-btn::after{
    content:''; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(100deg, transparent 35%, rgba(255,255,255,0.28) 48%, transparent 62%);
    background-size:220% 100%; background-position:150% 0; transition:background-position 0.7s ease;
  }
  .hero-btn:hover::after{background-position:-70% 0;}
  /* brillo pulsante suave para los CTAs principales */
  @keyframes ctaGlow{
    0%,100%{box-shadow:0 14px 38px -10px rgba(232,185,74,0.45);}
    50%{box-shadow:0 14px 46px -8px rgba(232,185,74,0.7);}
  }
  .promo-cta, .tab-cta{animation:ctaGlow 2.6s ease-in-out infinite;}
  @media (prefers-reduced-motion: reduce){
    .hero-btn-primary, .promo-cta, .tab-cta{animation:none;}
  }
  @media (max-width:640px){
    header.hero{padding:96px 0 54px;}
    .hero-count .seg{min-width:62px; padding:10px 10px 8px;}
    .hero-count .seg b{font-size:22px;}
    .hero-actions{gap:10px;}
    .hero-btn{padding:14px 22px; font-size:12.5px; flex:1; justify-content:center;}
  }

  /* =========================================================
     TOP DE LA SEMANA — números gigantes estilo Netflix
     ========================================================= */
  .top-title{color:var(--gold-soft);}
  .top-title i{animation:flamePulse 2s ease-in-out infinite; color:var(--gold);}
  .top-item{display:flex; align-items:flex-end; flex:0 0 auto; scroll-snap-align:start;}
  .top-num{
    font-family:'Fraunces', serif; font-weight:700; font-size:118px; line-height:0.72;
    letter-spacing:-0.06em; margin-right:-20px; margin-bottom:4px; z-index:0; flex-shrink:0;
    color:transparent; -webkit-text-stroke:3px rgba(232,185,74,0.8);
    text-shadow:0 12px 44px rgba(232,185,74,0.22);
    -webkit-user-select:none; user-select:none;
  }
  @supports not (-webkit-text-stroke: 1px black){ .top-num{color:rgba(232,185,74,0.45);} }
  .top-item .card{position:relative; z-index:1; flex:0 0 185px;}
  /* el número 1 brilla más: es el rey de la semana */
  .top-item:first-child .top-num{
    -webkit-text-stroke-color:var(--gold-soft);
    text-shadow:0 12px 52px rgba(232,185,74,0.5);
  }
  @media (max-width:640px){
    .top-num{font-size:92px; margin-right:-15px; -webkit-text-stroke-width:2.5px;}
    .top-item .card{flex:0 0 168px;}
  }

  /* insignia "nuevo" en tarjetas */
  .new-flag{
    /* v86 — arriba a la izquierda: abajo vive la burbuja del NIVEL (ya no se enciman) */
    position:absolute; top:10px; left:10px; z-index:3;
    display:inline-flex; align-items:center; gap:4px;
    font-size:9px; font-weight:800; letter-spacing:0.14em; padding:4px 9px; border-radius:999px;
    background:linear-gradient(135deg, var(--cyan), #3DA1E8); color:#06251F;
    box-shadow:0 4px 14px -4px rgba(61,231,214,0.5);
  }
  /* filas especiales del catálogo: populares y recién agregados */
  .catalog-row.hotrow .catalog-row-title i{animation:flamePulse 1.8s ease-in-out infinite;}
  @keyframes flamePulse{0%,100%{transform:scale(1);} 50%{transform:scale(1.18);}}

  /* =========================================================
     GALERÍA DE CLIENTES (capturas reales que sube el dueño)
     ========================================================= */
  .clients-section{padding:0 0 100px;}
  /* 🏆 top fans */
  .topfans-section[hidden]{display:none !important;}
  .topfans-lista{display:flex; flex-direction:column; gap:9px; max-width:520px; margin:0 auto;}
  .topfan{display:flex; align-items:center; gap:13px; padding:13px 16px; border-radius:15px;
    background:var(--surface); border:1px solid var(--line); transition:transform .2s var(--ease);}
  .topfan.podio{background:linear-gradient(120deg, rgba(232,185,74,0.1), transparent 70%); border-color:rgba(232,185,74,0.4);}
  .topfan.yo{border-color:var(--cyan); background:linear-gradient(120deg, rgba(61,231,214,0.1), transparent 70%);}
  .topfan-pos{width:32px; text-align:center; font-size:19px; font-weight:900; color:var(--text-dim); flex-shrink:0;}
  .topfan.podio .topfan-pos{font-size:24px;}
  .topfan-alias{flex:1; font-size:14px; font-weight:700; color:var(--text); letter-spacing:0.02em;}
  .topfan-alias b{color:var(--cyan);}
  .topfan-n{flex-shrink:0; font-size:11.5px; font-weight:800; color:var(--gold-soft); display:flex; align-items:center; gap:5px;}
  .topfan-n i{font-size:13px;}
  .topfans-yo{max-width:520px; margin:10px auto 0;}
  .topfan-nota{text-align:center; font-size:11.5px; color:var(--text-faint); margin-top:7px; font-weight:600;}
  .clients-carousel{
    display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
    padding:6px 2px 16px; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .clients-carousel::-webkit-scrollbar{display:none;}
  .client-card{
    flex:0 0 250px; scroll-snap-align:start; border-radius:16px; overflow:hidden;
    background:var(--surface); border:1px solid var(--line);
    display:flex; flex-direction:column;
    transition:transform 0.3s var(--ease), border-color 0.3s ease;
  }
  .client-card:hover{transform:translateY(-4px); border-color:var(--line-strong);}
  .client-shot{
    aspect-ratio:4/5; background-size:cover; background-position:top center; background-color:var(--surface-2);
    display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px;
    color:var(--text-faint); font-size:11px; text-align:center; padding:14px;
  }
  .client-shot i{font-size:26px;}
  .client-body{padding:14px 16px 16px; display:flex; flex-direction:column; gap:8px;}
  .client-quote{font-size:12.5px; line-height:1.6; color:var(--text-dim); font-style:italic;}
  .client-meta{display:flex; align-items:center; justify-content:space-between; gap:8px;}
  .client-alias{font-size:11px; font-weight:700; color:var(--text);}
  .client-ch{
    font-size:9px; font-weight:800; letter-spacing:0.1em; padding:3px 9px; border-radius:999px;
    border:1px solid currentColor;
  }
  .clients-nav{display:flex; gap:8px; justify-content:center; margin-top:4px;}

  /* CÓMO FUNCIONAMOS */
  .how-section{padding:30px 0 100px;}
  .section-head{margin-bottom:36px;}
  /* eyebrow como pastilla con punto latiendo (consistente con la del hero) */
  .section-eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size:10.5px; letter-spacing:0.18em; color:var(--gold);
    font-weight:700; margin-bottom:16px; padding:7px 15px; border-radius:999px;
    background:rgba(232,185,74,0.07); border:1px solid rgba(232,185,74,0.3);
  }
  .section-eyebrow::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--gold); animation:pulseDot 2s ease-in-out infinite; flex-shrink:0;}
  /* títulos con un toque de degradado hacia dorado (remate premium) */
  .section-title{
    font-family:'Fraunces', serif; font-size:clamp(26px, 3.4vw, 36px); font-weight:500; max-width:560px; line-height:1.2;
    background:linear-gradient(115deg, var(--text) 55%, var(--gold-soft) 110%);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  }
  .steps-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden;}
  .step{background:var(--bg); padding:28px 24px; transition:background 0.3s ease;}
  .step:hover{background:var(--surface);}
  .step-num{font-family:'Fraunces', serif; font-size:15px; color:var(--gold); font-weight:600; margin-bottom:16px;}
  .step-title{font-size:16px; font-weight:600; margin-bottom:8px;}
  .step-body{font-size:13.5px; color:var(--text-dim); line-height:1.65;}

  /* =========================================================
     MI CUENTA — perfil, código de referido y guardados
     ========================================================= */
  .account-section{padding:0 0 90px;}
  .acc-card{border-radius:18px; background:var(--surface); border:1px solid var(--line); padding:22px;}
  .acc-login{display:flex; flex-direction:column; align-items:flex-start; gap:14px;}
  .acc-login-benefits{display:flex; flex-direction:column; gap:10px;}
  .acc-benefit{display:flex; gap:10px; align-items:flex-start; font-size:12.5px; color:var(--text-dim); letter-spacing:0.02em;}
  .acc-benefit > span{flex:1; line-height:1.55; padding-top:5px;}
  .acc-benefit b{color:var(--text);}
  .acc-benefit i{
    color:var(--gold-soft); font-size:15px; width:30px; height:30px; border-radius:9px; flex-shrink:0;
    background:rgba(232,185,74,0.1); border:1px solid rgba(232,185,74,0.25);
    display:flex; align-items:center; justify-content:center;
  }
  .acc-tg-btn{
    display:inline-flex; align-items:center; gap:9px; padding:13px 24px; border-radius:999px;
    border:none; cursor:pointer; font-family:inherit; font-size:13px; font-weight:800; letter-spacing:0.04em;
    background:linear-gradient(135deg, #2AABEE, #229ED9); color:#fff; text-transform:uppercase;
    box-shadow:0 10px 26px -10px rgba(42,171,238,0.6);
    transition:transform 0.25s var(--ease-bounce), box-shadow 0.25s ease;
  }
  .acc-tg-btn:hover{transform:translateY(-2px) scale(1.03); box-shadow:0 14px 32px -10px rgba(42,171,238,0.7);}
  .acc-tg-btn i{font-size:17px;}
  .acc-note{font-size:11px; color:var(--text-faint); letter-spacing:0.03em;}
  #cuentaBtn{overflow:hidden;}
  #cuentaBtn.con-sesion{border-color:var(--purple);}
  #cuentaBtn img{width:100%; height:100%; border-radius:50%; object-fit:cover; display:block;}
  #cuentaBtn .acc-nav-ini{font-size:14px; font-weight:800; color:var(--purple); font-family:'Fraunces', serif;}
  .acc-head{display:flex; align-items:center; gap:14px; margin-bottom:16px;}
  .acc-avatar{
    width:56px; height:56px; border-radius:50%; flex-shrink:0; overflow:hidden;
    background:linear-gradient(135deg, var(--purple), var(--pink));
    display:flex; align-items:center; justify-content:center;
    font-family:'Fraunces', serif; font-size:22px; color:#fff; border:2px solid var(--line-strong);
  }
  .acc-avatar img{width:100%; height:100%; object-fit:cover; display:block;}
  .acc-name{font-family:'Fraunces', serif; font-size:20px; font-weight:600; display:flex; align-items:center; gap:7px;}
  .acc-user{font-size:11.5px; color:var(--text-faint); margin-top:3px;}
  .acc-out{
    margin-left:auto; display:inline-flex; align-items:center; gap:5px; cursor:pointer;
    background:none; border:1px solid var(--line-strong); color:var(--text-faint);
    font-family:inherit; font-size:10.5px; font-weight:700; letter-spacing:0.08em;
    padding:7px 13px; border-radius:999px; text-transform:uppercase; transition:all 0.2s ease;
  }
  .acc-out:hover{color:var(--text); border-color:var(--pink);}
  /* tarjeta del código: borde dorado-púrpura con destello */
  .ref-card{
    position:relative; overflow:hidden; border:1px solid transparent;
    background:linear-gradient(var(--surface), var(--surface)) padding-box,
               linear-gradient(140deg, rgba(232,185,74,0.85), rgba(157,92,255,0.55), rgba(232,185,74,0.4)) border-box;
  }
  .ref-card::after{
    content:''; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(100deg, transparent 32%, rgba(255,226,138,0.1) 48%, transparent 62%);
    background-size:220% 100%; animation:shimmer 4s linear infinite;
  }
  .ref-lab{display:flex; align-items:center; gap:7px; font-size:10px; font-weight:800; letter-spacing:0.14em; color:var(--text-faint); margin-bottom:10px;}
  .ref-lab i{color:var(--gold); font-size:15px;}
  .ref-code{
    font-family:'Fraunces', serif; font-size:clamp(30px, 8vw, 40px); font-weight:700; letter-spacing:0.1em;
    background:linear-gradient(120deg, var(--gold-soft), #FFE9A8, var(--gold-soft));
    background-size:200% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    animation:emShine 5s linear infinite;
    -webkit-user-select:all; user-select:all;
  }
  .ref-actions{display:flex; gap:9px; margin-top:14px; flex-wrap:wrap; position:relative; z-index:1;}
  .ref-btn{
    display:inline-flex; align-items:center; gap:7px; padding:11px 18px; border-radius:999px; cursor:pointer;
    border:none; font-family:inherit; font-size:11.5px; font-weight:800; letter-spacing:0.05em; text-transform:uppercase;
    background:linear-gradient(135deg, var(--purple), var(--pink)); color:#fff;
    box-shadow:0 8px 20px -8px var(--purple-glow); transition:transform 0.22s var(--ease-bounce);
  }
  .ref-btn:active{transform:scale(0.95);}
  .ref-btn-alt{background:var(--surface-2); color:var(--text); border:1px solid var(--line-strong); box-shadow:none;}
  .acc-stats{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; margin-top:14px;}
  .acc-stat{padding:16px; border-radius:14px; background:var(--surface); border:1px solid var(--line);}
  .acc-stat b{
    display:block; font-family:'Fraunces', serif; font-size:24px; font-weight:600; margin-bottom:4px;
    background:linear-gradient(135deg, var(--text), var(--gold-soft));
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    font-variant-numeric:tabular-nums;
  }
  .acc-stat span{font-size:9.5px; font-weight:800; letter-spacing:0.14em; color:var(--text-faint);}
  .acc-progress{margin-top:16px;}
  .acc-bar{height:9px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line); overflow:hidden;}
  .acc-bar i{
    display:block; height:100%; border-radius:999px; width:0;
    background:linear-gradient(90deg, var(--purple), var(--pink), var(--gold-soft));
    transition:width 0.9s var(--ease);
  }
  .acc-progress-lab{display:flex; justify-content:space-between; align-items:center; font-size:10.5px; font-weight:700; letter-spacing:0.06em; color:var(--text-faint); margin-top:7px;}
  .acc-canjear{width:100%; margin-top:14px;}
  .acc-canjear[disabled]{opacity:0.45; pointer-events:none;}
  .acc-pendiente{
    margin-top:14px; padding:12px 16px; border-radius:12px; border:1px dashed rgba(232,185,74,0.45);
    font-size:11.5px; font-weight:700; color:var(--gold-soft); display:flex; align-items:center; gap:8px; letter-spacing:0.04em;
  }
  .acc-saved{margin-top:28px;}
  .acc-empty{
    padding:26px 20px; border-radius:14px; border:1px dashed var(--line-strong); text-align:center;
    font-size:12px; color:var(--text-faint); display:flex; flex-direction:column; align-items:center; gap:8px; letter-spacing:0.03em;
  }
  .acc-empty i{font-size:26px; color:var(--gold-soft);}
  @media (max-width:360px){ .brand{font-size:14.5px;} } /* espacio para el botón de cuenta en pantallas mini */
  /* ---- solicitud para unirse al programa ---- */
  .acc-req{display:flex; flex-direction:column; gap:10px;}
  .acc-form{display:flex; flex-direction:column; gap:14px; margin-top:14px;}
  .acc-form label{display:flex; flex-direction:column; gap:7px; font-size:11px; font-weight:800; letter-spacing:0.1em; color:var(--text-faint); text-transform:uppercase;}
  .acc-form label small{font-weight:600; letter-spacing:0.04em; opacity:0.8; text-transform:none; font-size:10.5px;}
  .acc-form input[type="text"], .acc-form textarea, .acc-pago select, .acc-pago input{
    background:var(--surface-2); border:1px solid var(--line-strong); border-radius:12px;
    color:var(--text); font-family:'Inter', sans-serif; font-size:13.5px; padding:13px 14px; outline:none;
    text-transform:none; letter-spacing:normal; width:100%;
  }
  .acc-form input:focus, .acc-form textarea:focus, .acc-pago select:focus, .acc-pago input:focus{
    border-color:var(--purple); box-shadow:0 0 0 3px rgba(139,92,246,0.15);
  }
  .acc-form textarea{resize:vertical; min-height:76px;}
  .acc-check{flex-direction:row !important; align-items:center; gap:10px !important; cursor:pointer;}
  .acc-check input{width:19px; height:19px; accent-color:var(--purple); flex-shrink:0;}
  .acc-form .ref-btn{align-self:flex-start;}
  /* ---- pantalla "en revisión" / "rechazado" ---- */
  .acc-espera{display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:30px 22px; margin-bottom:14px;}
  .acc-espera-icono{
    width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:27px;
    color:var(--gold-soft); background:rgba(232,185,74,0.1); border:1px solid rgba(232,185,74,0.35);
    animation:maintSwing 3s ease-in-out infinite;
  }
  .acc-espera-icono.roja{color:#FF8FC4; background:rgba(255,79,163,0.1); border-color:rgba(255,79,163,0.35); animation:none;}
  .acc-espera-titulo{font-family:'Fraunces', serif; font-size:19px; font-weight:600; color:var(--text);}
  .acc-espera-sub{font-size:12px; color:var(--text-dim); line-height:1.6; max-width:380px;}
  .acc-espera-sub b{color:var(--gold-soft);}
  .acc-paso2{font-size:12.5px; color:var(--text-dim); line-height:1.65; margin-bottom:14px; letter-spacing:0.02em;}
  .acc-paso2 b{color:var(--text);}
  .acc-equipo{color:var(--gold-soft); font-weight:800; letter-spacing:0.08em;}
  .acc-equipo i{font-size:12px;}
  /* ---- datos de cobro y retiro ---- */
  .acc-pago{margin-top:14px;}
  .acc-pago-fila{display:flex; gap:9px; flex-wrap:wrap;}
  .acc-pago select{flex:0 0 170px; cursor:pointer;}
  .acc-pago input{flex:1; min-width:180px;}
  .acc-retiro-botones{display:flex; flex-direction:column; gap:10px;}
  .acc-canjear-alt{background:linear-gradient(135deg, var(--gold-soft), #E8783A); color:#1A0F08;}
  /* ---- perfil profesional: nivel, escalera de bonos e insignias ---- */
  .acc-sec{margin-top:14px;}
  .acc-nivel-pill{
    display:inline-flex; align-items:center; gap:8px; margin:-6px 0 14px;
    padding:8px 16px; border-radius:999px; font-size:11px; font-weight:800; letter-spacing:0.1em;
    color:var(--nvc); background:color-mix(in srgb, var(--nvc) 12%, transparent);
    border:1px solid color-mix(in srgb, var(--nvc) 45%, transparent);
    text-transform:uppercase;
  }
  .acc-nivel-pill i{font-size:15px;}
  .acc-nivel-pill b{color:var(--text);}
  .nv-escalera{display:flex; align-items:stretch; gap:0; overflow-x:auto; padding:6px 0 10px; scrollbar-width:none;}
  .nv-escalera::-webkit-scrollbar{display:none;}
  .nv-paso{
    flex:1; min-width:86px; display:flex; flex-direction:column; align-items:center; gap:4px;
    text-align:center; position:relative; padding:4px 4px 0;
  }
  .nv-punto{
    width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:19px; margin-bottom:4px; position:relative; z-index:1;
    background:var(--surface-2); border:2px solid var(--line-strong); color:var(--text-faint);
    transition:transform 0.3s var(--ease-bounce);
  }
  .nv-paso.ganado .nv-punto{
    background:color-mix(in srgb, var(--nvc) 22%, var(--surface)); border-color:var(--nvc); color:var(--nvc);
    box-shadow:0 6px 18px -6px color-mix(in srgb, var(--nvc) 60%, transparent);
  }
  .nv-paso.actual .nv-punto{
    border-color:var(--nvc); color:var(--nvc);
    animation:nvPulso 2s ease-in-out infinite;
  }
  @keyframes nvPulso{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--nvc) 45%, transparent);} 50%{box-shadow:0 0 0 7px transparent;}}
  .nv-nombre{font-size:10px; font-weight:800; letter-spacing:0.08em; color:var(--text); text-transform:uppercase;}
  .nv-paso.bloqueado .nv-nombre{color:var(--text-faint);}
  .nv-req{font-size:9px; font-weight:700; letter-spacing:0.06em; color:var(--text-faint);}
  .nv-bono{
    font-size:10px; font-weight:800; margin-top:2px; padding:3px 9px; border-radius:999px;
    color:var(--nvc); background:color-mix(in srgb, var(--nvc) 12%, transparent);
    border:1px solid color-mix(in srgb, var(--nvc) 35%, transparent);
  }
  .nv-paso.bloqueado .nv-bono{color:var(--text-faint); background:none; border-color:var(--line-strong);}
  .nv-linea{flex:0 0 6px; margin-top:24px; height:2px; background:var(--line-strong); align-self:flex-start;}
  .nv-nota{margin-top:6px;}
  .nv-nota b{color:var(--gold-soft);}
  /* insignias desbloqueables */
  .insignias{display:grid; grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); gap:9px;}
  .insignia{
    display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
    padding:13px 8px; border-radius:13px; font-size:9.5px; font-weight:800; letter-spacing:0.08em;
    text-transform:uppercase; transition:transform 0.25s var(--ease-bounce);
  }
  .insignia.on{
    color:var(--inc); background:color-mix(in srgb, var(--inc) 10%, transparent);
    border:1px solid color-mix(in srgb, var(--inc) 40%, transparent);
  }
  .insignia.on:hover{transform:translateY(-3px) scale(1.04);}
  .insignia.on i{font-size:21px; filter:drop-shadow(0 4px 10px color-mix(in srgb, var(--inc) 50%, transparent));}
  .insignia.off{color:var(--text-faint); background:var(--surface-2); border:1px dashed var(--line-strong); opacity:0.65;}
  .insignia.off i{font-size:19px;}
  .insignia span{line-height:1.3;}
  /* método de cobro con campos de verdad */
  .acc-metodo{display:flex; gap:8px; margin-bottom:14px;}
  .acc-met{
    flex:1; display:flex; align-items:center; justify-content:center; gap:7px; cursor:pointer;
    padding:12px 10px; border-radius:12px; font-family:inherit; font-size:12px; font-weight:800;
    letter-spacing:0.05em; text-transform:uppercase;
    background:var(--surface-2); border:1px solid var(--line-strong); color:var(--text-dim);
    transition:all 0.2s ease;
  }
  .acc-met i{font-size:16px;}
  .acc-met.on{border-color:var(--purple); color:var(--text); background:rgba(139,92,246,0.12); box-shadow:0 0 0 1px var(--purple);}
  .acc-met:active{transform:scale(0.97);}
  .acc-campos{display:flex; flex-direction:column; gap:12px; margin-bottom:14px;}
  .acc-campos[hidden]{display:none;} /* el display:flex no debe ganarle al atributo hidden */
  .acc-campos label{display:flex; flex-direction:column; gap:6px; font-size:10.5px; font-weight:800; letter-spacing:0.1em; color:var(--text-faint); text-transform:uppercase;}
  .acc-campos input{
    background:var(--surface-2); border:1px solid var(--line-strong); border-radius:12px;
    color:var(--text); font-family:'Inter', sans-serif; font-size:14px; padding:13px 14px; outline:none;
    text-transform:none; letter-spacing:normal; width:100%;
  }
  .acc-campos input:focus{border-color:var(--purple); box-shadow:0 0 0 3px rgba(139,92,246,0.15);}
  #cobroResumen b{color:var(--cyan);}

  /* ---- referidos PAUSADOS: sus CTAs desaparecen del sitio ---- */
  html.sin-referidos .ref-cta-section,
  html.sin-referidos .ref-mini-cta,
  html.sin-referidos .sc-referidos{display:none !important;}

  /* ---- MODO DISCRETO: miniaturas difuminadas y pestaña disimulada ---- */
  html.modo-discreto .card-media img,
  html.modo-discreto .avatar-ph,
  html.modo-discreto .star-thumb,
  html.modo-discreto .client-shot{filter:blur(22px) !important;}
  html.modo-discreto .gallery-tile{filter:blur(34px) saturate(115%) !important;}
  html.modo-discreto .card:hover .card-media img{transform:none;}

  /* ---- cuenta de gestión: accesos, switches, cupón y sugerencias ---- */
  .acc-canales{display:flex; flex-direction:column; gap:9px;}
  .acc-canal{
    display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px;
    background:var(--surface-2); border:1px solid var(--line);
  }
  .acc-canal.on{
    border-color:color-mix(in srgb, var(--acc) 45%, transparent);
    background:color-mix(in srgb, var(--acc) 7%, var(--surface-2));
  }
  .acc-canal-icono{
    width:38px; height:38px; border-radius:11px; flex-shrink:0; font-size:17px;
    display:flex; align-items:center; justify-content:center;
    background:color-mix(in srgb, var(--acc) 15%, transparent); color:var(--acc);
  }
  .acc-canal.off .acc-canal-icono{background:var(--surface); color:var(--text-faint);}
  .acc-canal-info{flex:1; min-width:0;}
  .acc-canal-info b{display:block; font-family:'Fraunces', serif; font-size:15px; font-weight:600; color:var(--text); text-transform:capitalize;}
  .acc-canal-info small{font-size:10px; font-weight:700; letter-spacing:0.06em; color:var(--text-faint);}
  .acc-canal.on .acc-canal-info small{color:var(--acc);}
  .acc-canal-btn{
    flex-shrink:0; display:inline-flex; align-items:center; gap:6px;
    padding:9px 14px; border-radius:999px; font-size:10.5px; font-weight:800; letter-spacing:0.06em;
    background:color-mix(in srgb, var(--acc) 85%, #000); color:#14100B; text-transform:uppercase;
  }
  .acc-canal-btn.ghost{background:none; border:1px solid var(--line-strong); color:var(--text-faint);}
  .acc-canal-btn:active{transform:scale(0.95);}
  /* switch tipo app */
  .sw{
    width:46px; height:26px; border-radius:999px; flex-shrink:0; cursor:pointer; border:none;
    background:var(--surface); border:1px solid var(--line-strong); position:relative; transition:background 0.25s ease;
  }
  .sw i{
    position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
    background:var(--text-faint); transition:transform 0.25s var(--ease-bounce), background 0.25s ease;
  }
  .sw.on{background:linear-gradient(135deg, var(--purple), var(--pink)); border-color:transparent;}
  .sw.on i{transform:translateX(20px); background:#fff;}
  .aviso-fila{display:flex; align-items:center; gap:11px; padding:11px 0; border-bottom:1px solid var(--line);}
  .aviso-fila:last-of-type{border-bottom:none;}
  .aviso-fila > i{font-size:17px; color:var(--gold-soft); flex-shrink:0;}
  .aviso-fila > span{flex:1; font-size:12px; color:var(--text-dim); letter-spacing:0.03em; line-height:1.5;}
  .cupon-activo{
    display:flex; align-items:center; gap:10px; padding:13px 15px; border-radius:13px;
    border:1px dashed rgba(232,185,74,0.5); background:rgba(232,185,74,0.06);
    font-size:12px; color:var(--text-dim);
  }
  .cupon-activo i{color:var(--gold); font-size:17px;}
  .cupon-activo span{flex:1;}
  .cupon-activo b{color:var(--gold-soft); letter-spacing:0.06em;}
  .cupon-activo .acc-out{margin-left:0;}
  .sug-lista{margin-top:12px; display:flex; flex-direction:column; gap:8px;}
  .sug-item{
    padding:11px 14px; border-radius:12px; background:var(--surface-2); border:1px solid var(--line);
    display:flex; flex-direction:column; gap:4px;
  }
  .sug-texto{font-size:12.5px; color:var(--text); line-height:1.5; text-transform:none; letter-spacing:normal;}
  .sug-meta{font-size:10px; font-weight:700; letter-spacing:0.08em; color:var(--text-faint);}
  .sug-rev{color:var(--gold-soft);}
  .sug-ok{color:var(--cyan);}

  /* ---- CTAs del programa repartidos por el sitio ---- */
  .ref-cta-section{padding:0 0 60px;}
  .ref-cta-band{
    display:flex; align-items:center; gap:16px; flex-wrap:wrap; cursor:pointer;
    padding:20px 22px; border-radius:18px; position:relative; overflow:hidden;
    border:1px solid transparent;
    background:linear-gradient(var(--surface), var(--surface)) padding-box,
               linear-gradient(140deg, rgba(232,185,74,0.8), rgba(157,92,255,0.6), rgba(255,79,163,0.5)) border-box;
    transition:transform 0.25s var(--ease), box-shadow 0.25s ease;
  }
  .ref-cta-band:hover{transform:translateY(-3px); box-shadow:0 18px 40px -18px rgba(157,92,255,0.45);}
  .ref-cta-band:active{transform:scale(0.985);}
  .ref-cta-band::after{
    content:''; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(100deg, transparent 32%, rgba(255,226,138,0.08) 48%, transparent 62%);
    background-size:220% 100%; animation:shimmer 4.5s linear infinite;
  }
  .ref-cta-icono{
    width:50px; height:50px; border-radius:14px; flex-shrink:0; font-size:24px;
    display:flex; align-items:center; justify-content:center; color:#fff;
    background:linear-gradient(135deg, var(--purple), var(--pink));
    box-shadow:0 10px 24px -8px var(--purple-glow);
  }
  .ref-cta-texto{flex:1; min-width:220px;}
  .ref-cta-titulo{font-family:'Fraunces', serif; font-size:18px; font-weight:600; color:var(--text); text-transform:none; letter-spacing:0.01em;}
  .ref-cta-titulo b{color:var(--gold-soft);}
  .ref-cta-sub{font-size:11.5px; color:var(--text-dim); margin-top:4px; line-height:1.6; letter-spacing:0.02em;}
  .ref-cta-btn{
    flex-shrink:0; display:inline-flex; align-items:center; gap:7px;
    padding:12px 20px; border-radius:999px; font-size:11.5px; font-weight:800; letter-spacing:0.06em;
    background:linear-gradient(135deg, var(--gold-soft), #E8783A); color:#1A0F08; text-transform:uppercase;
    box-shadow:0 8px 20px -8px rgba(232,185,74,0.55);
  }
  .ref-mini-cta{
    display:flex; align-items:center; gap:10px; cursor:pointer; margin-top:18px;
    padding:14px 18px; border-radius:14px; font-size:12px; font-weight:600; color:var(--text-dim);
    background:rgba(232,185,74,0.06); border:1px dashed rgba(232,185,74,0.4);
    transition:border-color 0.2s ease, transform 0.2s var(--ease); letter-spacing:0.03em;
  }
  .ref-mini-cta b{color:var(--gold-soft);}
  .ref-mini-cta > i:first-child{color:var(--gold); font-size:17px;}
  .ref-mini-cta > i:last-child{margin-left:auto; color:var(--gold-soft);}
  .ref-mini-cta:hover{border-color:var(--gold-soft); transform:translateY(-2px);}
  .ref-mini-cta:active{transform:scale(0.98);}

  /* aviso "manda tu comprobante al bot" (solo aparece si configuraste el bot) */
  .pago-bot-nota{
    display:flex; align-items:center; gap:10px; cursor:pointer; margin-top:14px;
    padding:14px 18px; border-radius:14px; font-size:12px; font-weight:600; color:var(--text-dim);
    background:rgba(61,231,214,0.05); border:1px dashed rgba(61,231,214,0.4);
    transition:border-color 0.2s ease, transform 0.2s var(--ease); letter-spacing:0.03em; text-decoration:none;
  }
  .pago-bot-nota b{color:var(--cyan);}
  .pago-bot-nota > i:first-child{color:var(--cyan); font-size:17px;}
  .pago-bot-nota > i:last-child{margin-left:auto; color:var(--cyan);}
  .pago-bot-nota:hover{border-color:var(--cyan); transform:translateY(-2px);}
  .pago-bot-nota[hidden]{display:none !important;}
  /* ===== v107 — TARJETA DE SOCIO + MI COLECCIÓN (mi cuenta) ===== */
  .socio-card{
    position:relative; overflow:hidden; border-radius:20px; padding:18px 18px 15px; margin-bottom:14px;
    background:linear-gradient(145deg, #1A1626, #100C18 60%, #0C0913);
    border:1px solid rgba(245,212,136,0.28);
    box-shadow:0 20px 46px -28px rgba(245,212,136,0.5);
  }
  .socio-card.activa{border-color:rgba(245,212,136,0.55);}
  .socio-brillo{
    position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(105deg, transparent 36%, rgba(255,240,200,0.10) 50%, transparent 64%);
    transform:translateX(-120%); animation:fpBrilloPasa 6.5s ease-in-out 1s infinite;
  }
  html[data-lite="1"] .socio-brillo{display:none;}
  .socio-top{display:flex; align-items:center; justify-content:space-between; gap:10px; position:relative; z-index:2;}
  .socio-marca{
    font-size:10px; font-weight:900; letter-spacing:0.26em;
    background:linear-gradient(100deg, #FFF3D0, #F2B93E 55%, #FFF3D0);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .socio-tipo{
    font-size:9px; font-weight:900; letter-spacing:0.14em; padding:4px 10px; border-radius:999px;
    color:#F5D488; background:rgba(245,212,136,0.12); border:1px solid rgba(245,212,136,0.3);
  }
  .socio-nombre{
    position:relative; z-index:2; font-family:'Fraunces', serif; font-size:22px; font-weight:600;
    color:var(--text); margin-top:16px; letter-spacing:0.01em; text-transform:none;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .socio-usuario{position:relative; z-index:2; font-size:11.5px; color:var(--text-faint); text-transform:none;}
  .socio-pie{
    position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:10px;
    margin-top:16px; padding-top:12px; border-top:1px solid rgba(245,212,136,0.16);
    font-size:10.5px; color:var(--text-faint); text-transform:none; flex-wrap:wrap;
  }
  .socio-pie b{color:var(--gold-soft, #F5D488); letter-spacing:0.06em;}
  .col-resumen{font-size:12.5px; color:var(--text-dim); text-transform:none; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;}
  .col-resumen b{font-size:16px; color:var(--gold-soft, #F5D488); font-weight:900;}
  .col-resumen small{font-size:11px; color:var(--text-faint);}
  .col-barra{height:7px; border-radius:99px; background:rgba(255,255,255,0.07); overflow:hidden; margin:10px 0 12px;}
  .col-barra span{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg, #F2B93E, #FFE9A8); transition:width .6s var(--ease, ease);}
  .col-mias{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px;}
  .col-mia{
    font-size:10px; font-weight:800; letter-spacing:0.04em; padding:5px 10px; border-radius:999px;
    color:var(--cfc, #C9CFDA); background:color-mix(in srgb, var(--cfc, #C9CFDA) 12%, transparent);
    border:1px solid color-mix(in srgb, var(--cfc, #C9CFDA) 32%, transparent);
  }
  .col-faltan-tit{font-size:10px; font-weight:800; letter-spacing:0.1em; color:var(--text-faint); text-transform:uppercase; margin-bottom:8px;}
  .col-faltan{display:flex; flex-direction:column; gap:8px;}
  .col-falta{
    display:flex; align-items:center; gap:10px; width:100%; cursor:pointer; text-align:left; font-family:inherit;
    padding:11px 12px; border-radius:14px; color:var(--text);
    background:rgba(255,255,255,0.03); border:1px solid color-mix(in srgb, var(--cfc, #C9CFDA) 26%, transparent);
    transition:transform .18s var(--ease-bounce), border-color .2s ease;
  }
  .col-falta:active{transform:scale(0.985);}
  .col-falta-emo{font-size:17px; flex-shrink:0;}
  .col-falta-txt{display:flex; flex-direction:column; gap:1px; flex:1; min-width:0;}
  .col-falta-txt b{font-size:12px; font-weight:900; letter-spacing:0.05em; color:var(--cfc, #C9CFDA);}
  .col-falta-txt small{font-size:10.5px; color:var(--text-faint); text-transform:none;}
  .col-falta-precio{font-size:12px; font-weight:900; color:var(--gold-soft, #F5D488); white-space:nowrap; flex-shrink:0;}
  .col-falta > .ti{font-size:14px; color:var(--text-faint); flex-shrink:0;}

  /* ================= ZONA VIP ================= */
  .vip-cta-card{position:relative; overflow:hidden; border-color:rgba(232,185,74,0.45) !important;}
  .vip-cta-card .vip-cta-brillo{
    position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(ellipse 320px 150px at 85% -20%, rgba(232,185,74,0.16), transparent 65%),
               radial-gradient(ellipse 260px 130px at 8% 115%, rgba(157,92,255,0.14), transparent 65%);
  }
  .vip-cta-texto{font-size:12px; color:var(--text-dim); line-height:1.65; margin:6px 0 12px;}
  .vip-cta-texto b{color:var(--gold-soft);}
  .vip-cta-btn{
    display:inline-flex; align-items:center; gap:8px; border:none; cursor:pointer;
    padding:13px 22px; border-radius:999px; font-family:inherit; font-size:12px; font-weight:800; letter-spacing:0.08em;
    color:#1C1229; background:linear-gradient(135deg, #FFE9A8, #F2B93E 55%, #E8894A);
    box-shadow:0 12px 28px -10px rgba(232,185,74,0.55); transition:transform .15s ease;
  }
  .vip-cta-btn:active{transform:scale(0.96);}
  .vip-cta-card.off .ref-lab{color:var(--text-faint);}
  .vip-candado{font-size:13px;}
  .aj-sel-fila{
    display:flex; align-items:center; gap:11px; padding:12px 14px; border-radius:14px; margin-top:9px;
    background:var(--surface-2); border:1px solid var(--line); font-size:12.5px; color:var(--text-dim);
  }
  .aj-sel-fila i{color:var(--gold-soft); font-size:16px;}
  .aj-sel-fila span{flex:1;}
  .aj-select{
    background:var(--surface); border:1px solid var(--line-strong); border-radius:10px; color:var(--text);
    font-family:'Inter', sans-serif; font-size:12px; font-weight:600; padding:9px 10px; outline:none; max-width:180px;
  }
  .entregas-lista{display:flex; flex-direction:column; gap:8px;}
  .entrega-fila{
    display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:12px; text-decoration:none;
    background:var(--surface-2); border:1px solid var(--line); transition:border-color .2s ease;
  }
  .entrega-fila:hover{border-color:var(--gold-soft);}
  .entrega-folio{font-weight:800; font-size:12px; color:var(--gold-soft); letter-spacing:0.05em; white-space:nowrap;}
  .entrega-info{flex:1; font-size:10.5px; font-weight:700; color:var(--text-dim); letter-spacing:0.04em; min-width:0;}
  .entrega-info small{display:block; font-size:9.5px; color:var(--text-faint); font-weight:600; margin-top:2px;}
  .entrega-fila > i{color:var(--text-faint); font-size:14px;}
  /* detectar accesos: ahora es una caja destacada que se explica sola */
  .acc-detectar-caja{
    margin-top:12px; padding:14px; border-radius:14px; position:relative; overflow:hidden;
    background:
      radial-gradient(ellipse 300px 130px at 12% 0%, rgba(61,231,214,0.13), transparent 65%),
      radial-gradient(ellipse 280px 130px at 95% 100%, rgba(232,185,74,0.1), transparent 65%),
      rgba(255,255,255,0.02);
    border:1px solid rgba(61,231,214,0.45);
    box-shadow:0 0 0 4px rgba(61,231,214,0.05), 0 14px 30px -18px rgba(61,231,214,0.35);
  }
  .acc-detectar-txt{font-size:11px; line-height:1.65; color:var(--text-dim); margin-bottom:11px;}
  .acc-detectar-txt b{display:block; color:var(--cyan); font-size:11.5px; letter-spacing:0.1em; margin-bottom:4px;}
  .acc-detectar{
    display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
    padding:13px 16px; border-radius:999px; cursor:pointer; font-family:inherit;
    font-size:12px; font-weight:800; letter-spacing:0.09em; color:#08211D;
    background:linear-gradient(135deg, #7FF5E6, var(--cyan) 55%, #2BB8A8); border:none;
    box-shadow:0 10px 26px -10px rgba(61,231,214,0.55);
    transition:transform .15s ease, box-shadow .2s ease; animation:detectarLatido 2.6s ease-in-out infinite;
  }
  .acc-detectar:active{transform:scale(0.97);}
  @keyframes detectarLatido{ 0%,100%{box-shadow:0 10px 26px -10px rgba(61,231,214,0.55);} 50%{box-shadow:0 10px 34px -8px rgba(61,231,214,0.85);} }
  .acc-canal-btn.vip-directo{border:none; cursor:pointer; font-family:inherit;
    background:linear-gradient(135deg, #FFE9A8, #F2B93E 60%, #E8894A); color:#231303;}
  .acc-detectar b{color:var(--cyan); font-weight:800;}
  .acc-detectar i{color:var(--cyan); font-size:15px;}
  .acc-detectar:hover{border-color:var(--cyan);}
  .acc-detectar:active{transform:scale(0.98);}
  .acc-detectar[disabled]{opacity:0.6; cursor:wait;}

  /* 📲 invitación a instalar la app dentro de la zona VIP */
  .vip-instalar{
    display:flex; align-items:center; gap:10px; margin:10px 16px 0; padding:11px 12px;
    border-radius:14px; font-size:12px; line-height:1.45; color:var(--text-dim);
    background:linear-gradient(135deg, rgba(217,178,74,0.1), rgba(157,92,255,0.08));
    border:1px solid rgba(217,178,74,0.4);
  }
  .vip-instalar > i{font-size:20px; color:#E8C96A; flex-shrink:0;}
  .vip-instalar b{color:var(--text);}
  .vip-inst-btn{
    flex-shrink:0; padding:8px 14px; border-radius:999px; cursor:pointer;
    font-weight:800; font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
    color:#1d1503; background:linear-gradient(135deg, #E8C96A, #D9B24A);
    border:1px solid rgba(255,255,255,0.35);
  }
  .vip-inst-x{
    flex-shrink:0; width:26px; height:26px; border-radius:50%; cursor:pointer;
    display:flex; align-items:center; justify-content:center; font-size:13px;
    color:var(--text-faint); background:transparent; border:1px solid var(--line-strong);
  }
  /* 🚫 pantalla de CUENTA BLOQUEADA — por encima de todo */
  .fp-baneo{
    position:fixed; inset:0; z-index:2000; display:none; align-items:center; justify-content:center; padding:28px;
    background:radial-gradient(ellipse 600px 400px at 50% 30%, rgba(232,74,111,0.16), transparent 70%), rgba(6,4,10,0.985);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  }
  .fp-baneo.open{display:flex;}
  .fp-baneo-caja{max-width:440px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:13px;}
  .fp-baneo-icono{
    width:82px; height:82px; border-radius:24px; display:flex; align-items:center; justify-content:center;
    font-size:40px; color:#FF6B8A; margin-bottom:4px;
    background:linear-gradient(135deg, rgba(232,74,111,0.22), rgba(157,92,255,0.12));
    border:1px solid rgba(232,74,111,0.5);
  }
  .fp-baneo-titulo{font-family:'Inter', sans-serif; font-size:14px; font-weight:800; letter-spacing:0.2em; color:#FF6B8A;}
  .fp-baneo-texto{font-size:16px; line-height:1.6; color:#fff; font-weight:600; max-width:400px;}
  .fp-baneo-sub{font-size:13px; line-height:1.6; color:var(--text-dim); max-width:400px;}

  /* ⚠️ pantalla de advertencia previa a la Zona VIP */
  /* ===== v114 — EL AVISO DE CONTENIDO PROTEGIDO, en dorado y con el logo ===== */
  .vip-advertencia{
    position:fixed; inset:0; z-index:360; display:none; align-items:center; justify-content:center; padding:26px;
    background:
      radial-gradient(ellipse 620px 420px at 50% 26%, rgba(245,212,136,0.20), transparent 70%),
      linear-gradient(180deg, #14100A, #0A0710 60%, #07050C);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); cursor:pointer; overflow:hidden;
  }
  .vip-advertencia.open{display:flex; animation:vipAdvEntra .3s var(--ease, ease) both;}
  @keyframes vipAdvEntra{from{opacity:0;} to{opacity:1;}}
  .vip-adv-brillo{
    position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(104deg, transparent 36%, rgba(255,240,200,0.13) 50%, transparent 64%);
    transform:translateX(-120%); animation:fpBrilloPasa 3.6s ease-in-out .3s infinite;
  }
  html[data-lite="1"] .vip-adv-brillo{display:none;}
  .vip-adv-caja{
    position:relative; z-index:2; max-width:430px; text-align:center;
    display:flex; flex-direction:column; align-items:center; gap:10px;
  }
  .vip-adv-logo{width:62px; height:62px; filter:drop-shadow(0 10px 26px rgba(242,185,62,0.55));}
  .vip-adv-logo svg{width:100%; height:100%; display:block;}
  .vip-adv-marca{
    font-size:11px; font-weight:900; letter-spacing:0.36em; margin-top:-2px;
    background:linear-gradient(100deg, #FFF7DE, #F2B93E 50%, #FFF7DE);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .vip-adv-icono{
    width:66px; height:66px; border-radius:20px; display:flex; align-items:center; justify-content:center;
    font-size:33px; color:#F2B93E; margin-top:8px; padding:13px;
    background:linear-gradient(135deg, rgba(242,185,62,0.22), rgba(217,114,15,0.14));
    border:1px solid rgba(245,212,136,0.55);
    box-shadow:0 16px 40px -18px rgba(242,185,62,0.8);
    animation:vipAdvLatido 1.5s ease-in-out infinite;
  }
  @keyframes vipAdvLatido{0%,100%{transform:scale(1);} 50%{transform:scale(1.07);}}
  .vip-adv-icono svg{width:100%; height:100%; display:block; filter:drop-shadow(0 6px 16px rgba(242,185,62,0.6));}
  html[data-lite="1"] .vip-adv-icono{animation:none;}
  .vip-adv-titulo{
    font-family:'Inter', sans-serif; font-size:12px; font-weight:900; letter-spacing:0.2em; line-height:1.7;
    background:linear-gradient(100deg, #FFF7DE, #F2B93E 50%, #FFF7DE);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .vip-adv-quien{
    font-family:'Fraunces', serif; font-size:26px; font-weight:700; color:#FFF3D0; word-break:break-word;
    padding:7px 20px; border-radius:14px;
    background:rgba(245,212,136,0.1); border:1px solid rgba(245,212,136,0.5);
    box-shadow:0 0 34px -12px rgba(242,185,62,0.7) inset;
  }
  .vip-adv-texto{font-size:13.5px; line-height:1.65; color:var(--text-dim); max-width:380px;}
  .vip-adv-texto b{color:#F5D488;}
  .vip-adv-linea{
    width:120px; height:1px; margin-top:4px;
    background:linear-gradient(90deg, transparent, rgba(245,212,136,0.65), transparent);
  }
  .vip-adv-nota{margin-top:2px; font-size:11px; letter-spacing:0.1em; color:var(--text-faint); text-transform:uppercase;}

  .vip-zona{
    position:fixed; inset:0; z-index:1200; display:none; flex-direction:column;
    background:
      radial-gradient(ellipse 760px 420px at 50% -8%, rgba(232,185,74,0.14), transparent 62%),
      radial-gradient(ellipse 680px 460px at 6% 110%, rgba(157,92,255,0.16), transparent 62%),
      radial-gradient(ellipse 520px 340px at 96% 46%, rgba(61,231,214,0.06), transparent 60%),
      #0B0810;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding:calc(14px + env(safe-area-inset-top)) 16px calc(30px + env(safe-area-inset-bottom));
    user-select:none; -webkit-user-select:none;
  }
  .vip-zona::before{ /* cielo estrellado sutil, como el resto de la web */
    content:''; position:fixed; inset:0; pointer-events:none; opacity:0.55; z-index:0;
    background-image:
      radial-gradient(1.3px 1.3px at 11% 18%, rgba(255,255,255,0.5), transparent),
      radial-gradient(1px 1px at 76% 9%, rgba(255,255,255,0.4), transparent),
      radial-gradient(1.5px 1.5px at 52% 38%, rgba(181,132,255,0.5), transparent),
      radial-gradient(1px 1px at 28% 64%, rgba(255,255,255,0.32), transparent),
      radial-gradient(1.4px 1.4px at 90% 58%, rgba(245,212,136,0.5), transparent),
      radial-gradient(1px 1px at 8% 86%, rgba(127,216,232,0.4), transparent),
      radial-gradient(1.2px 1.2px at 64% 82%, rgba(255,255,255,0.35), transparent);
  }
  .vip-zona > *{position:relative; z-index:1;}
  .vip-zona.open{display:flex;}
  .vip-zona.vip-oculto, .vip-visor.vip-oculto{filter:blur(34px) brightness(0.6);}
  .vip-top{display:flex; align-items:center; gap:12px; max-width:960px; margin:0 auto 12px; width:100%;}
  .vip-volver{
    display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line-strong); background:rgba(255,255,255,0.04);
    color:var(--text-dim); font-family:inherit; font-size:11.5px; font-weight:800; letter-spacing:0.06em;
    padding:9px 15px; border-radius:999px; cursor:pointer;
  }
  .vip-titulo{
    font-family:'Fraunces', serif; font-size:18px; font-weight:600; letter-spacing:0.08em; display:flex; align-items:center; gap:8px;
    background:linear-gradient(120deg, #FFE9A8, #F2B93E 60%, #E8894A);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  }
  .vip-titulo i{-webkit-text-fill-color:#F2B93E;}
  .vip-cuenta{margin-left:auto; font-size:10.5px; font-weight:800; letter-spacing:0.06em; color:var(--text-faint); text-align:right;}
  .vip-aviso{
    display:flex; align-items:flex-start; gap:9px; max-width:960px; margin:0 auto 14px; width:100%;
    padding:11px 15px; border-radius:12px; font-size:11px; line-height:1.6; color:var(--text-dim);
    background:rgba(232,185,74,0.06); border:1px dashed rgba(232,185,74,0.4);
  }
  .vip-aviso i{color:var(--gold-soft); font-size:15px; margin-top:1px;}
  .vip-aviso b{color:var(--gold-soft);}
  .vip-aviso .vip-aviso-titulo{display:block; font-size:11px; font-weight:900; letter-spacing:0.14em; color:var(--gold-soft); margin-bottom:4px;}
  .vip-aviso a{color:var(--gold-soft); font-weight:800; text-decoration:underline; text-underline-offset:3px;}
  .vip-tabs{display:flex; gap:8px; flex-wrap:wrap; max-width:960px; margin:0 auto 16px; width:100%;}
  .vip-tab{
    display:inline-flex; align-items:center; gap:6px; cursor:pointer; border:1px solid var(--line-strong);
    background:rgba(255,255,255,0.03); color:var(--vtc, var(--text-dim));
    font-family:inherit; font-size:11px; font-weight:800; letter-spacing:0.07em; text-transform:uppercase;
    padding:9px 16px; border-radius:999px; transition:all .2s ease;
  }
  .vip-tab.activa{
    color:#171022; background:var(--vtc, var(--gold)); border-color:transparent;
    box-shadow:0 10px 24px -10px color-mix(in srgb, var(--vtc, #E8B94A) 70%, transparent);
  }
  /* v107 — las marcas que NO son la abierta ya no se ven apagadas: llevan su
     color, su borde y un latido suave para que se noten y las toquen */
  .vip-tab:not(.activa){
    border-color:color-mix(in srgb, var(--vtc, #E8B94A) 42%, transparent);
    background:color-mix(in srgb, var(--vtc, #E8B94A) 9%, transparent);
    color:var(--vtc, var(--text-dim));
  }
  .vip-tab.bloq:not(.activa){animation:fpTabLatido 4.2s ease-in-out infinite;}
  @keyframes fpTabLatido{
    0%,88%,100%{box-shadow:0 0 0 0 transparent;}
    94%{box-shadow:0 0 0 4px color-mix(in srgb, var(--vtc, #E8B94A) 16%, transparent);}
  }
  html[data-lite="1"] .vip-tab.bloq:not(.activa){animation:none;}
  .vip-cuerpo{max-width:960px; margin:0 auto; width:100%; padding-bottom:96px;} /* v80: nada queda bajo el globito del chat */
  .vip-cargando, .vip-vacio{color:var(--text-faint); font-size:12.5px; padding:26px 0; text-align:center; width:100%;}
  /* esqueleto de lujo mientras llega la lista: tarjetas fantasma que respiran */
  .vip-esqueleto{display:flex; flex-direction:column; gap:18px; width:100%;}
  .vip-esq-tarjeta{
    border-radius:20px; border:1px solid var(--line); padding:16px; position:relative; overflow:hidden;
    background:linear-gradient(180deg, rgba(32,23,46,0.55), rgba(18,13,27,0.6));
  }
  .vip-esq-tarjeta::after{
    content:''; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(100deg, transparent 32%, rgba(232,185,74,0.055) 50%, transparent 68%);
    background-size:220% 100%; animation:vipShimmer 1.5s ease-in-out infinite;
  }
  .vip-esq-fila{display:flex; align-items:center; gap:13px; margin-bottom:14px;}
  .vip-esq-circulo{width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,0.055); flex-shrink:0;}
  .vip-esq-linea{height:12px; border-radius:8px; background:rgba(255,255,255,0.055);}
  .vip-esq-linea.corta{width:38%; margin-bottom:8px;}
  .vip-esq-linea.larga{width:60%;}
  .vip-esq-bloque{height:46px; border-radius:13px; background:rgba(255,255,255,0.04);}
  /* v121 — el esqueleto ahora dibuja la zona completa (portada + salas):
     se siente que la app YA abrió y solo está llegando el contenido */
  .vip-esq-hero{
    height:148px; border-radius:20px; border:1px solid var(--line); position:relative; overflow:hidden;
    background:linear-gradient(180deg, rgba(32,23,46,0.6), rgba(18,13,27,0.65));
  }
  .vip-esq-hero::after{
    content:''; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(100deg, transparent 32%, rgba(232,185,74,0.06) 50%, transparent 68%);
    background-size:220% 100%; animation:vipShimmer 1.5s ease-in-out infinite;
  }
  .vip-esq-chips{display:flex; gap:9px;}
  .vip-esq-chips i{
    flex:1; height:34px; border-radius:999px; background:rgba(255,255,255,0.05);
    border:1px solid var(--line);
  }
  html[data-lite="1"] .vip-esq-tarjeta::after, html[data-lite="1"] .vip-esq-hero::after{animation:none;}
  /* cada modelo = tarjeta de perfil premium con el color de su canal */
  .vip-perfil{
    position:relative; border-radius:20px; padding:1.5px; margin-bottom:20px;
    background:linear-gradient(160deg,
      color-mix(in srgb, var(--vpc, #E8B94A) 55%, transparent),
      rgba(230,220,245,0.07) 38%,
      color-mix(in srgb, var(--vpc, #9D5CFF) 35%, transparent) 85%);
    animation:vipEntra .5s var(--ease, ease) both;
  }
  @keyframes vipEntra{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}
  /* v122 — repintado silencioso (datos frescos con la zona ya pintada):
     nada de tarjetas desvaneciéndose y volviendo a entrar en cascada;
     el contenido simplemente se actualiza quieto, sin robar el scroll */
  #vipCuerpo.sin-entrada .vip-perfil{animation:none !important;}
  #vipCuerpo.sin-entrada .vip-saludo{animation:none !important;}
  /* v122 — el dedo sobre una FOTO o un VIDEO del catálogo/zona SIEMPRE puede
     bajar la página: se le dice al navegador que ahí el gesto vertical es
     scroll y punto (nada de que la imagen "se quede" con el gesto) */
  .vcard-media, .vcard-media > img, .card-media, .card-media > img, .card-img,
  .vip-hero, .vip-hero > img, .ficha-tile, .ficha-tile img, .ficha-tile video,
  .vip-thumb, .vip-of-tile, .avatar-ph{touch-action:pan-y pinch-zoom;}
  /* las filas que SÍ se deslizan de lado conservan sus dos ejes */
  #testimonialsGrid, .vip-favs-fila, .carousel-track, .clients-carousel{touch-action:pan-x pan-y;}
  /* v152 — EL DESLIZAR DE LA FICHA, ARREGLADO: la regla de arriba le ponía
     "solo gesto vertical" a cada casilla (herencia de cuando eran rejilla),
     y como el dedo siempre arranca SOBRE una casilla, el navegador mataba
     el deslizar de lado de los sliders nuevos. Dentro del slider, las
     casillas permiten los dos ejes — deslizar de lado Y seguir bajando. */
  .ficha-slider, .ficha-slider .ficha-tile, .ficha-slider .ficha-tile img,
  .ficha-slider .ficha-tile video, .vip-pop-fila, .vip-pop-card{touch-action:pan-x pan-y;}
  /* y ninguna foto se deja "arrastrar" como objeto (otro ladrón de gestos) */
  .card-img, .card-media img, .vcard-media > img, .ficha-tile img, .vip-thumb img, .vip-hero > img{
    -webkit-user-drag:none; user-select:none; -webkit-user-select:none;
  }
  .vip-perfil-inner{
    background:linear-gradient(180deg, rgba(32,23,46,0.96), rgba(18,13,27,0.98));
    border-radius:19px; padding:16px 16px 14px; overflow:hidden; position:relative;
  }
  .vip-perfil-inner::before{
    content:''; position:absolute; inset:0 0 auto 0; height:120px; pointer-events:none;
    background:radial-gradient(ellipse 340px 110px at 18% -30%, color-mix(in srgb, var(--vpc, #E8B94A) 22%, transparent), transparent 70%);
  }
  .vip-ribbon{
    position:absolute; top:13px; right:-31px; transform:rotate(38deg); z-index:2;
    font-size:8.5px; font-weight:800; letter-spacing:0.22em; padding:5px 34px;
    color:#1C1229; background:linear-gradient(90deg, #FFE9A8, #F2B93E);
    box-shadow:0 6px 16px -6px rgba(232,185,74,0.6);
  }
  .vip-banner{ /* la primera foto como telón difuminado detrás del encabezado */
    position:absolute; inset:0 0 auto 0; height:118px; pointer-events:none;
    background-size:cover; background-position:center 30%;
    filter:blur(16px) saturate(1.2) brightness(0.55); opacity:0.55;
    -webkit-mask-image:linear-gradient(to bottom, #000 30%, transparent);
    mask-image:linear-gradient(to bottom, #000 30%, transparent);
  }
  .vip-abrir{
    display:flex; align-items:center; justify-content:center; gap:9px; width:100%; cursor:pointer;
    padding:13px 16px; border-radius:13px; font-family:inherit; position:relative;
    font-size:11px; font-weight:800; letter-spacing:0.09em; text-transform:uppercase;
    color:var(--vpc, var(--gold-soft));
    background:color-mix(in srgb, var(--vpc, #E8B94A) 8%, transparent);
    border:1px dashed color-mix(in srgb, var(--vpc, #E8B94A) 50%, transparent);
    transition:border-color .2s ease, transform .15s ease;
  }
  .vip-abrir:hover{border-color:var(--vpc, var(--gold-soft));}
  .vip-abrir:active{transform:scale(0.98);}
  .vip-abrir small{font-size:9px; font-weight:800; color:var(--text-faint); letter-spacing:0.08em;}
  .vip-abrir i{font-size:15px;}
  .vip-galeria{margin-top:11px;}
  .vip-galeria[hidden]{display:none !important;}
  .vip-galeria .vip-grid{animation:vipEntra .4s var(--ease, ease) both;}
  .vip-perfil-head{display:flex; align-items:center; gap:13px; margin-bottom:13px; position:relative;}
  .vip-avatar{
    width:52px; height:52px; border-radius:50%; flex-shrink:0; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    font-family:'Fraunces', serif; font-size:20px; font-weight:600; color:#fff;
    background:linear-gradient(135deg, color-mix(in srgb, var(--vpc, #9D5CFF) 80%, #000), color-mix(in srgb, var(--vpc, #E8B94A) 60%, #201530));
    box-shadow:0 0 0 2px #140F1E, 0 0 0 4px color-mix(in srgb, var(--vpc, #E8B94A) 70%, transparent), 0 10px 26px -10px color-mix(in srgb, var(--vpc, #E8B94A) 60%, transparent);
  }
  .vip-avatar img{width:100%; height:100%; object-fit:cover; pointer-events:none;}
  .vip-nombre{
    font-family:'Fraunces', serif; font-size:19px; font-weight:600; text-transform:capitalize; line-height:1.15;
    display:flex; align-items:center; gap:7px;
  }
  .vip-nombre i{color:#5FA8FF; font-size:15px;}
  .vip-meta{display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:5px;}
  .vip-meta .vm{
    display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px;
    font-size:9px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase;
  }
  .vip-meta .vm.canal{color:var(--vpc, var(--gold-soft)); border:1px solid color-mix(in srgb, var(--vpc, #E8B94A) 45%, transparent); background:color-mix(in srgb, var(--vpc, #E8B94A) 10%, transparent);}
  .vip-meta .vm.conteo{color:var(--text-faint); border:1px solid var(--line-strong); background:rgba(255,255,255,0.03);}
  .vip-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); gap:9px; position:relative;}
  .vip-thumb{
    position:relative; border-radius:14px; overflow:hidden; cursor:pointer; padding:1.5px; border:none;
    aspect-ratio:3/4; background:linear-gradient(160deg, color-mix(in srgb, var(--vpc, #E8B94A) 40%, transparent), rgba(230,220,245,0.06) 50%, color-mix(in srgb, var(--vpc, #9D5CFF) 26%, transparent));
    transition:transform .25s var(--ease, ease), box-shadow .25s ease;
  }
  .vip-thumb-inner{position:absolute; inset:1.5px; border-radius:12.5px; overflow:hidden; background:#120D1C;}
  /* brillo de carga: la miniatura "respira" mientras llega la foto */
  .vip-thumb-inner::before{
    content:''; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.07) 50%, transparent 70%);
    background-size:220% 100%; animation:vipShimmer 1.4s ease-in-out infinite;
  }
  @keyframes vipShimmer{from{background-position:130% 0;} to{background-position:-90% 0;}}
  .vip-thumb-inner.lista::before{display:none;}
  html[data-lite="1"] .vip-thumb-inner::before{animation:none; display:none;}
  .vip-thumb img{width:100%; height:100%; object-fit:cover; object-position:center 20%; display:block; pointer-events:none; transition:transform .4s var(--ease, ease), opacity .45s ease; position:relative;}
  .vip-thumb img:not(.lista){opacity:0;}
  .vip-thumb:hover{transform:translateY(-3px); box-shadow:0 16px 34px -14px color-mix(in srgb, var(--vpc, #E8B94A) 55%, transparent);}
  .vip-thumb:hover img{transform:scale(1.06);}
  .vip-thumb:active{transform:scale(0.96);}
  .vip-thumb::after{ /* velo inferior elegante */
    content:''; position:absolute; inset:auto 1.5px 1.5px; height:38%; border-radius:0 0 12.5px 12.5px; pointer-events:none;
    background:linear-gradient(to top, rgba(8,5,12,0.55), transparent);
  }
  .vip-thumb .vip-play{
    position:absolute; inset:1.5px; border-radius:12.5px; display:flex; flex-direction:column; gap:8px;
    align-items:center; justify-content:center; font-size:22px; color:#fff;
    background:
      radial-gradient(ellipse 90px 70px at 50% 42%, color-mix(in srgb, var(--vpc, #9D5CFF) 26%, transparent), transparent 75%),
      linear-gradient(170deg, #1B1428, #0F0A18);
    text-shadow:0 2px 14px rgba(0,0,0,0.6);
  }
  /* ============ v83: ELEGIDOR DE NIVEL (PLATINUM 1 al 5) ============ */
  .fp-nivel{
    position:relative; display:block; width:100%; text-align:left; cursor:pointer;
    border-radius:16px; padding:13px 15px 11px; margin-top:9px; font-family:inherit;
    background:linear-gradient(160deg, #191920, #101015);
    border:1px solid rgba(201,207,218,0.22); color:var(--text);
    transition:transform .15s ease, border-color .2s ease;
  }
  .fp-nivel:active{transform:scale(0.98);}
  /* cada nivel sube un poquito de brillo: el 5 (heteros) es el más intenso */
  .fp-nivel.n2{border-color:rgba(201,207,218,0.34);}
  .fp-nivel.n3{
    border-color:rgba(201,207,218,0.5);
    background:linear-gradient(160deg, #20202a, #14141b);
  }
  .fp-nivel.n4{
    border-color:rgba(232,185,74,0.4);
    background:linear-gradient(160deg, #1d1b16, #121110);
  }
  .fp-nivel.n5{
    border-color:rgba(255,122,89,0.45);
    background:linear-gradient(160deg, #201514, #120f0f);
    box-shadow:0 14px 34px -16px rgba(255,122,89,0.3);
  }
  .fp-nivel.mio{opacity:0.55; cursor:default;}
  .fp-nivel.mio:active{transform:none;}
  .fp-nivel-fav{
    position:absolute; top:-9px; left:14px; padding:3px 12px; border-radius:999px;
    font-size:9px; font-weight:800; letter-spacing:0.12em; color:#101116;
    background:linear-gradient(135deg, #FFD7C4, #FF9E80);
  }
  .fp-nivel-cab{display:flex; align-items:center; justify-content:space-between; gap:10px;}
  .fp-nivel-cab b{font-size:15px; font-weight:800; letter-spacing:0.04em;}
  .fp-nivel-precio{font-size:14.5px; font-weight:800; color:var(--gold-soft); white-space:nowrap;}
  .fp-nivel-antes{opacity:0.5; font-weight:600; font-size:12px;}
  .fp-nivel.mio .fp-nivel-precio{color:#7ED9A0;}
  .fp-nivel-meta{display:block; font-size:11px; color:var(--text-dim); margin-top:4px;}
  .fp-nivel-inc{display:block; font-size:10px; font-weight:800; letter-spacing:0.06em; color:#C9CFDA; margin-top:5px; text-transform:uppercase;}
  .fp-nivel.n5 .fp-nivel-inc{color:#FFB49E;}
  .fp-ck-op.negra{
    background:linear-gradient(160deg, #101014, #0a0a0e);
    border:1px solid #33333F; color:#EDEDF2;
  }

  /* ============ v80: las MARCAS (PLATINUM gris premium · BLACK) ============ */
  .chip.chip-plata{border-color:rgba(201,207,218,0.4);}
  .chip.chip-black{
    background:linear-gradient(135deg, #17171d, #0c0c11); border-color:#3A3A46; color:#EDEDF2;
  }
  .fam-apartado{
    display:inline-flex; align-items:center; gap:4px; margin-left:8px; padding:3px 10px; border-radius:999px;
    font-size:9.5px; font-weight:800; letter-spacing:0.12em; color:#0F1116;
    background:linear-gradient(135deg, #E9EDF4, #C9CFDA 60%, #9AA3B5);
    box-shadow:0 6px 16px -8px rgba(201,207,218,0.6);
  }
  .black-row .fam-apartado{background:linear-gradient(135deg, #2A2A34, #17171d); color:#EDEDF2; border:1px solid #3A3A46;}
  .fam-black-chip{
    display:inline-flex; align-items:center; margin-left:8px; padding:3px 10px; border-radius:999px;
    font-size:9px; font-weight:800; letter-spacing:0.14em; color:#EDEDF2;
    background:#101014; border:1px solid #3A3A46;
  }
  .catalog-row.fam-platinum .catalog-row-title{
    text-shadow:0 0 22px rgba(201,207,218,0.35);
  }
  .catalog-row.black-row{
    border-radius:20px; padding-top:10px; margin-top:8px;
    background:linear-gradient(180deg, rgba(10,10,14,0.9), rgba(14,14,20,0.6));
    border:1px solid #26262e;
  }
  .black-maint{background:linear-gradient(160deg, #101016, #0a0a0e) !important;}
  .preventa-btn.black-avisar{
    background:linear-gradient(135deg, #2E2E3A, #17171d) !important; color:#EDEDF2 !important;
    border:1px solid #4A4A58;
  }
  .fam-sala{font-size:0.72em; font-weight:700; color:var(--text-faint); letter-spacing:0.05em; text-transform:lowercase;}
  /* la fila de CONOCIDOS conserva su brillo especial, ahora en plata */
  .starsight-row{--ch-color:#E3E6EE;}

  /* ============ v78: tarjetas estilo OnlyFans ============ */
  .vip-perfil.of .vip-perfil-inner{padding:0 0 14px;}
  .vip-of-portada{
    position:relative; height:150px; overflow:hidden; border-radius:19px 19px 0 0; background:#120D1C;
  }
  .vip-of-portada img{width:100%; height:100%; object-fit:cover; object-position:center 25%; display:block; pointer-events:none;}
  .vip-of-velo{position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(to top, rgba(14,9,20,0.92) 4%, rgba(14,9,20,0.25) 45%, transparent 75%);}
  .vip-of-candado{
    position:absolute; top:11px; right:11px; padding:5px 12px; border-radius:999px;
    font-size:9px; font-weight:800; letter-spacing:0.14em;
    color:#FFE9A8; background:rgba(10,6,16,0.72); border:1px solid rgba(232,185,74,0.5);
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  }
  .vip-of-candado.abierto{color:#8FF0B9; border-color:rgba(79,208,138,0.5);}
  /* v84 — la estrellita de FAVORITO en cada perfil VIP */
  .vip-fav{
    position:absolute; top:8px; left:8px; z-index:3; width:34px; height:34px;
    border-radius:50%; border:1px solid rgba(255,255,255,0.18); cursor:pointer;
    background:rgba(10,8,14,0.66); color:#cfd3dd; font-size:16px;
    display:flex; align-items:center; justify-content:center;
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    transition:transform .15s ease, color .2s ease;
  }
  .vip-fav:active{transform:scale(0.9);}
  .vip-fav.on{color:#FFD76A; border-color:rgba(255,215,106,0.55);}
  /* v84 — la fila de MIS FAVORITOS: acceso rápido arriba de la marca */
  .vip-favs{margin:2px 0 10px;}
  .vip-favs-tit{
    font-size:11px; font-weight:800; letter-spacing:0.1em; color:#FFD76A;
    display:flex; align-items:baseline; gap:8px; margin:2px 2px 8px;
  }
  .vip-favs-tit small{font-size:9.5px; color:var(--text-faint); letter-spacing:0.05em; font-weight:600; text-transform:none;}
  .vip-favs-fila{display:flex; gap:8px; overflow-x:auto; padding:2px 2px 6px; scrollbar-width:none;}
  .vip-favs-fila::-webkit-scrollbar{display:none;}
  .vip-favchip{
    flex:0 0 auto; display:flex; align-items:center; gap:7px; cursor:pointer;
    padding:5px 12px 5px 5px; border-radius:999px; font-family:inherit;
    font-size:11.5px; font-weight:800; color:var(--text);
    background:linear-gradient(160deg, #1B1C22, #111117); border:1px solid rgba(255,215,106,0.3);
  }
  .vip-favchip:active{transform:scale(0.96);}
  .vip-favchip-ava{
    width:26px; height:26px; border-radius:50%; overflow:hidden; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:11px;
    background:#23242c; box-shadow:0 0 0 1.5px rgba(255,215,106,0.45);
  }
  .vip-favchip-ava img{width:100%; height:100%; object-fit:cover;}
  /* el perfil al que llegas brilla un momentito */
  .vip-perfil.vip-brillo .vip-perfil-inner{box-shadow:0 0 0 2.5px #FFD76A, 0 14px 40px -12px rgba(255,215,106,0.5); transition:box-shadow .3s ease;}
  .vip-of-top{display:flex; align-items:flex-end; gap:12px; padding:0 16px; margin-top:-30px; position:relative; z-index:2;}
  .vip-avatar.of-avatar{
    width:64px; height:64px; font-size:24px;
    box-shadow:0 0 0 3px #140F1E, 0 0 0 5px color-mix(in srgb, var(--vpc, #E8B94A) 75%, transparent), 0 12px 30px -10px rgba(0,0,0,0.7);
  }
  .vip-of-idn{padding-bottom:4px; min-width:0;}
  .vip-of-sub{font-size:10px; font-weight:800; letter-spacing:0.08em; color:var(--text-faint); text-transform:uppercase; margin-top:3px;}
  /* v86 — el perfil VIP con el TONO de su categoría (nivel o BLACK) */
  .vip-perfil.of .of-inner{
    border:1px solid color-mix(in srgb, var(--vpc, #C9CFDA) 30%, transparent);
    background:linear-gradient(172deg, color-mix(in srgb, var(--vpc, #C9CFDA) 7%, #131318), #0E0E12 55%);
    border-radius:20px; overflow:hidden;
  }
  .vip-perfil.of .vip-of-sub{color:color-mix(in srgb, var(--vpc, #C9CFDA) 80%, #fff);}
  .vip-perfil.of .vip-of-velo{
    background:linear-gradient(to top, rgba(12,10,14,0.94) 4%, color-mix(in srgb, var(--vpc, #14090E) 12%, rgba(14,9,20,0.25)) 45%, transparent 75%);
  }
  .vip-perfil.of .vip-of-candado{border-color:color-mix(in srgb, var(--vpc, #E8B94A) 55%, transparent);}
  .vip-perfil.of.black .of-inner, .vip-perfil.of.bloq.black .of-inner{
    border-color:rgba(212,175,55,0.4);
    background:linear-gradient(172deg, #16120C, #0B0A08 60%);
  }
  .vip-perfil.of.black .vip-nombre{color:#F0DCA0;}
  .vip-desbloq{border-color:color-mix(in srgb, var(--vpc, #E8B94A) 55%, transparent);}
  .vip-of-stats{
    display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin:12px 16px 12px;
    padding:10px 14px; border-radius:13px; font-size:11px; color:var(--text-dim);
    background:rgba(255,255,255,0.03); border:1px solid var(--line);
  }
  .vip-of-stats b{color:var(--text); font-size:13px; font-weight:800; margin-right:3px;}
  .vip-of-social{margin-left:auto; display:inline-flex; align-items:center;}
  .vip-perfil.of .vip-abrir{width:auto; margin:0 16px;}
  .vip-perfil.of .vip-galeria{margin:11px 16px 0;}
  /* el número junto al ❤️: se toca para ver QUIÉNES lo dieron */
  .vip-quien{
    border:none; cursor:pointer; padding:4px 9px; border-radius:999px; font-family:inherit;
    font-size:10.5px; font-weight:800; color:var(--gold-soft);
    background:rgba(232,185,74,0.1); border:1px solid rgba(232,185,74,0.35);
  }
  .vip-quien:active{transform:scale(0.94);}
  .vip-quien-caja{
    position:fixed; inset:0; z-index:60; display:none; align-items:flex-end; justify-content:center;
    background:rgba(6,4,10,0.65); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  }
  .vip-quien-caja.open{display:flex;}
  .vip-quien-panel{
    width:100%; max-width:430px; max-height:62%; display:flex; flex-direction:column;
    background:linear-gradient(180deg, #201730, #140E1F); border:1px solid var(--line-strong);
    border-radius:22px 22px 0 0; padding:18px 18px calc(16px + env(safe-area-inset-bottom, 0px));
    animation:vipEntra .3s var(--ease, ease) both;
  }
  .vip-quien-tit{font-family:'Fraunces', serif; font-size:16px; color:var(--gold-soft); margin-bottom:10px;}
  .vip-quien-lista{overflow-y:auto; flex:1; min-height:60px;}
  .vip-quien-fila{text-transform:none; display:flex; align-items:center; gap:10px; padding:8px 2px; font-size:13px;}
  .vip-quien-avatar{
    width:32px; height:32px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
    font-size:13px; font-weight:800; color:#fff;
    background:linear-gradient(135deg, #6D4AA8, #9D5CFF);
  }
  .vip-quien-nom small{color:var(--text-faint); font-weight:600;}
  .vip-quien-cerrar{
    margin-top:12px; padding:11px; border-radius:12px; border:1px solid var(--line-strong);
    background:var(--surface-2); color:var(--text-dim); font-family:inherit; font-weight:800; font-size:12px; cursor:pointer;
  }
  /* pestañas con candado */
  .vip-tab.bloq{opacity:0.75; filter:saturate(0.8);}
  .vip-bloq-aviso{
    margin-bottom:14px; padding:12px 14px; border-radius:13px; font-size:12px; line-height:1.6; color:var(--text-dim);
    background:rgba(232,185,74,0.07); border:1px dashed rgba(232,185,74,0.45);
  }
  .vip-bloq-aviso b{color:var(--gold-soft);}
  .vip-of-tiles{display:flex; gap:8px; margin:0 16px 12px;}
  .vip-of-tile{
    position:relative; flex:1; max-width:33%; aspect-ratio:3/4; border-radius:12px; overflow:hidden;
    display:flex; align-items:center; justify-content:center; background:#191227;
    border:1px solid var(--line);
  }
  .vip-of-tile img{width:100%; height:100%; object-fit:cover; filter:blur(7px) saturate(1.1); transform:scale(1.12); pointer-events:none;}
  .vip-of-tile i{position:absolute; font-size:18px; color:rgba(255,255,255,0.9); text-shadow:0 2px 10px rgba(0,0,0,0.8);}
  .vip-of-tile.deco i{color:var(--text-faint);}
  .vip-desbloq{
    display:flex; align-items:center; justify-content:center; gap:8px; margin:0 16px; padding:14px;
    border-radius:999px; border:none; cursor:pointer; text-decoration:none; font-family:inherit;
    font-size:12px; font-weight:800; letter-spacing:0.09em; text-transform:uppercase; color:#1C1229;
    background:linear-gradient(135deg, #FFE9A8, #F2B93E 55%, #E8894A);
    box-shadow:0 12px 28px -10px rgba(232,185,74,0.55);
  }
  .vip-desbloq:active{transform:scale(0.97);}
  /* v108 — la coletilla "· todos sus modelos" del botón, más chiquita */
  .vip-desbloq small{font-size:0.82em; font-weight:700; opacity:0.75; letter-spacing:0.04em; text-transform:none;}
  .vip-catinfo .vip-desbloq{margin:2px 0 0; flex-wrap:wrap;}
  .vip-of-trailer{
    display:flex; align-items:center; justify-content:center; gap:8px; margin:0 16px 10px; padding:11px;
    border-radius:999px; cursor:pointer; font-family:inherit; font-size:11px; font-weight:800; letter-spacing:0.07em;
    color:var(--text-dim); background:transparent; border:1px solid var(--line-strong);
  }
  /* ============ v78: chat privado ============ */
  .vip-chat-fab{
    position:fixed; right:16px; bottom:calc(18px + env(safe-area-inset-bottom, 0px)); z-index:55;
    width:54px; height:54px; border-radius:50%; border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center; font-size:23px; color:#1C1229;
    background:linear-gradient(135deg, #FFE9A8, #F2B93E 55%, #E8894A);
    box-shadow:0 14px 34px -10px rgba(232,185,74,0.65);
  }
  .vip-chat-fab:active{transform:scale(0.94);}
  .vip-chat-punto{
    position:absolute; top:3px; right:3px; width:13px; height:13px; border-radius:50%;
    background:#FF5A79; border:2px solid #140F1E; animation:detectarLatido 1.6s ease-in-out infinite;
  }
  .vip-chat-caja{
    position:fixed; inset:0; z-index:58; display:none; align-items:flex-end; justify-content:center;
    background:rgba(6,4,10,0.6); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  }
  .vip-chat-caja.open{display:flex;}
  .vip-chat-panel{
    width:100%; max-width:430px; height:72%; display:flex; flex-direction:column;
    background:linear-gradient(180deg, #201730, #120D1C); border:1px solid var(--line-strong);
    border-radius:22px 22px 0 0; overflow:hidden; animation:vipEntra .3s var(--ease, ease) both;
  }
  .vip-chat-cab{
    padding:15px 18px; font-family:'Fraunces', serif; font-size:16px; color:var(--gold-soft);
    display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line);
  }
  .vip-chat-cab small{font-family:'Inter', sans-serif; font-size:9.5px; font-weight:700; color:var(--text-faint); letter-spacing:0.04em; flex:1;}
  .vip-chat-x{
    width:30px; height:30px; border-radius:50%; border:1px solid var(--line-strong); cursor:pointer;
    background:transparent; color:var(--text-dim); font-size:13px;
  }
  .vip-chat-lista{flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:8px;}
  .vip-chat-msg{display:flex;}
  .vip-chat-msg.mio{justify-content:flex-end;}
  .vip-chat-burbuja{
    text-transform:none;
    max-width:82%; padding:9px 13px; border-radius:14px; font-size:13px; line-height:1.5; word-break:break-word;
    background:rgba(255,255,255,0.045); border:1px solid var(--line);
  }
  .vip-chat-msg.mio .vip-chat-burbuja{background:rgba(232,185,74,0.1); border-color:rgba(232,185,74,0.35); border-radius:14px 4px 14px 14px;}
  .vip-chat-msg.suyo .vip-chat-burbuja{border-radius:4px 14px 14px 14px;}
  .vip-chat-hora{font-size:9px; color:var(--text-faint); margin-top:4px;}
  .vip-chat-input{display:flex; gap:8px; padding:12px 14px calc(12px + env(safe-area-inset-bottom, 0px)); border-top:1px solid var(--line);}
  .vip-chat-input input{
    text-transform:none; flex:1; background:var(--surface); border:1px solid var(--line-strong); border-radius:999px;
    color:var(--text); font-family:inherit; font-size:13px; padding:11px 15px; outline:none; min-width:0;
  }
  .vip-chat-input input:focus{border-color:var(--gold-soft);}
  .vip-chat-input button{
    width:42px; height:42px; border-radius:50%; border:none; cursor:pointer; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:16px; color:#1C1229;
    background:linear-gradient(135deg, #FFE9A8, #F2B93E);
  }
  /* ============ v78: compartir y comunidad (pestaña 🎁) ============ */
  .vip-compartir{
    border-radius:18px; padding:16px; margin-bottom:16px;
    background:linear-gradient(135deg, rgba(157,92,255,0.09), rgba(232,185,74,0.07));
    border:1px dashed rgba(157,92,255,0.5);
  }
  .vip-compartir-tit{font-family:'Fraunces', serif; font-size:16px; color:#C9AEFF; margin-bottom:5px;}
  .vip-compartir p{font-size:11.5px; color:var(--text-dim); line-height:1.6; margin-bottom:11px;}
  .vip-compartir p b{color:var(--gold-soft);}
  .vip-compartir-fila{display:flex; align-items:center; gap:11px; margin-bottom:9px;}
  .vip-compartir-elegir{
    display:inline-flex; align-items:center; gap:7px; padding:10px 16px; border-radius:999px; cursor:pointer;
    font-family:inherit; font-size:11px; font-weight:800; letter-spacing:0.06em; color:#E4D6FF;
    background:rgba(157,92,255,0.14); border:1px solid rgba(157,92,255,0.5);
  }
  .vip-compartir-cuenta{font-size:10.5px; font-weight:700; color:var(--text-faint);}
  .vip-compartir input[type=text]{
    text-transform:none; width:100%; background:var(--surface); border:1px solid var(--line-strong); border-radius:12px;
    color:var(--text); font-family:inherit; font-size:13px; padding:11px 13px; outline:none; margin-bottom:10px;
  }
  .vip-compartir-enviar{
    display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:12px;
    border-radius:999px; border:none; cursor:pointer; font-family:inherit;
    font-size:11.5px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; color:#1C1229;
    background:linear-gradient(135deg, #D9B7FF, #9D5CFF);
  }
  .vip-compartir-enviar:disabled{opacity:0.6;}
  .vip-com-tit{
    font-family:'Fraunces', serif; font-size:16px; color:#C9AEFF; margin:20px 0 12px;
  }
  .vip-com-tit small{font-family:'Inter', sans-serif; font-size:9px; font-weight:800; letter-spacing:0.1em; color:var(--text-faint); text-transform:uppercase; margin-left:8px;}
  .vip-com{
    border-radius:16px; padding:14px; margin-bottom:13px;
    background:linear-gradient(180deg, rgba(32,23,46,0.85), rgba(18,13,27,0.92));
    border:1px solid rgba(157,92,255,0.28); animation:vipEntra .45s var(--ease, ease) both;
  }
  .vip-com-cab{display:flex; align-items:center; gap:10px; margin-bottom:8px; font-size:13px;}
  .vip-com-cab small{color:var(--text-faint);}
  .vip-com-fecha{font-size:9.5px; color:var(--text-faint); margin-top:1px;}
  .vip-com-mio{font-size:9px; font-weight:800; letter-spacing:0.08em; color:#8FF0B9; margin-left:5px;}
  .vip-com-nota{text-transform:none; font-size:12.5px; color:var(--text-dim); line-height:1.6; margin-bottom:9px;}
  .vip-com-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(108px, 1fr)); gap:8px;}
  .vip-com-thumb{
    position:relative; aspect-ratio:1/1; border-radius:12px; overflow:hidden; border:1px solid var(--line);
    cursor:pointer; padding:0; background:#120D1C;
  }
  .vip-com-thumb img{width:100%; height:100%; object-fit:cover; object-position:center 20%; display:block; pointer-events:none;}
  .vip-com-thumb .vip-play{position:absolute; inset:0; border-radius:11px;}
  .vip-ap-visor{
    position:fixed; inset:0; z-index:70; display:none; align-items:center; justify-content:center;
    background:rgba(4,2,8,0.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  }
  .vip-ap-visor.open{display:flex;}
  .vip-ap-visor-media{max-width:94%; max-height:86%;}
  .vip-ap-visor-media img, .vip-ap-visor-media video{max-width:100%; max-height:82vh; border-radius:14px; display:block;}
  .vip-ap-visor-x{
    position:absolute; top:calc(14px + env(safe-area-inset-top, 0px)); right:16px; width:40px; height:40px;
    border-radius:50%; border:1px solid var(--line-strong); cursor:pointer; z-index:2;
    background:rgba(20,15,30,0.8); color:var(--text); font-size:16px;
  }

  /* ============ v80: apartados, explicador, BLACK y video-previews ============ */
  .vip-apartado{
    display:flex; align-items:center; gap:12px; margin:22px 2px 14px;
    font-size:12px; font-weight:800; letter-spacing:0.16em; color:#DDE2EC; text-transform:uppercase;
  }
  .vip-apartado:first-child{margin-top:4px;}
  .vip-apartado i{flex:1; height:1px; background:linear-gradient(90deg, rgba(201,207,218,0.45), transparent);}
  .vip-apartado.black{color:#EDEDF2;}
  .vip-apartado.black i{background:linear-gradient(90deg, #3A3A46, transparent);}
  /* v88 — subcategorías por NIVEL: cada divisor con el color de su nivel */
  .vip-apartado[style*="--vap"]{color:var(--vap);}
  .vip-apartado[style*="--vap"] i{background:linear-gradient(90deg, color-mix(in srgb, var(--vap) 55%, transparent), transparent);}
  .vip-apartado{scroll-margin-top:86px;} /* v89: al brincar, no queda tapado por el encabezado */
  .vip-apartado.vip-apartado-brillo span{text-shadow:0 0 18px var(--vap, #E8B94A);}
  /* v89 — la BOTONERA de niveles (le picas y te lleva volando) */
  .vip-subnav{display:flex; gap:8px; margin:2px 0 12px; overflow-x:auto; padding:2px; scrollbar-width:none;}
  .vip-subnav::-webkit-scrollbar{display:none;}
  .vip-subnav-btn{
    flex:1 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:5px;
    min-width:56px; padding:9px 12px; border-radius:999px; cursor:pointer; font-family:inherit;
    font-size:13px; font-weight:800; color:var(--vap, #C9CFDA);
    background:linear-gradient(160deg, color-mix(in srgb, var(--vap, #C9CFDA) 12%, #15151B), #0F0F13);
    border:1px solid color-mix(in srgb, var(--vap, #C9CFDA) 45%, transparent);
    transition:transform .15s ease;
  }
  .vip-subnav-btn:active{transform:scale(0.92);}
  .vip-subnav-btn b{font-size:14px;}
  /* v89 — nivel sin contenido todavía: su tarjetita de "se está preparando" */
  .vip-nivel-vacio{
    border-radius:16px; padding:16px; margin:2px 0 8px; font-size:12.5px; line-height:1.7;
    color:var(--text-dim); text-align:center;
    background:linear-gradient(168deg, color-mix(in srgb, var(--vap, #C9CFDA) 7%, #14141A), #0E0E12);
    border:1px dashed color-mix(in srgb, var(--vap, #C9CFDA) 45%, transparent);
  }
  .vip-nivel-vacio b{color:var(--vap, #C9CFDA);}
  .vip-nivel-vacio small{display:block; margin-top:4px; color:var(--text-faint);}
  .vip-nivel-vacio .vip-desbloq{margin-top:10px;}
  /* ============ v94: la Zona VIP con el MISMO look del catálogo ============ */
  .vip-perfil.vcard{padding:1.5px;}
  .vcard-inner{
    display:flex; flex-direction:column; padding:0; border-radius:19px; overflow:hidden; position:relative;
    background:linear-gradient(168deg, color-mix(in srgb, var(--vpc, #C9CFDA) 8%, #17181E), #0F0F13);
    border:1px solid color-mix(in srgb, var(--vpc, #C9CFDA) 28%, transparent);
    border-top:2px solid color-mix(in srgb, var(--vpc, #C9CFDA) 60%, transparent);
  }
  .vip-perfil.vcard.black .vcard-inner{
    background:linear-gradient(168deg, #16120C, #0B0A07);
    border-color:rgba(212,175,55,0.32); border-top-color:rgba(212,175,55,0.6);
  }
  .vcard-head{display:flex; align-items:center; gap:9px; padding:10px 12px 9px; position:relative; z-index:2;}
  .vcard-ava{
    width:34px; height:34px; border-radius:50%; flex-shrink:0; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    font-family:'Fraunces', serif; font-size:14px; color:var(--text);
    background:linear-gradient(135deg, rgba(157,92,255,0.3), rgba(255,79,163,0.2));
    box-shadow:0 0 0 2px var(--surface), 0 0 0 3.5px color-mix(in srgb, var(--vpc, #E8B94A) 80%, transparent);
  }
  .vcard-ava img{width:100%; height:100%; object-fit:cover; pointer-events:none;}
  .vcard-idn{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px;}
  .vcard-nombre{
    font-size:13.5px; font-weight:800; color:var(--text); text-transform:capitalize;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:5px;
  }
  .vip-perfil.vcard.black .vcard-nombre{color:#F0DCA0;}
  .vcard-chip{font-size:8.5px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:color-mix(in srgb, var(--vpc, #E8B94A) 85%, #fff); white-space:nowrap; overflow:hidden;}
  .vcard .vip-fav{position:static; width:32px; height:32px; flex-shrink:0;}
  .vcard-media{
    aspect-ratio:4/5; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;
    background:radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--vpc, #9D5CFF) 22%, transparent), transparent 55%), var(--surface-2);
  }
  .vcard-media > img{width:100%; height:100%; object-fit:cover; object-position:center 22%; display:block;}
  .vcard-media .vip-of-candado{top:10px; right:10px;}
  .vcard-cont{
    position:absolute; bottom:10px; right:10px; z-index:2; font-size:10.5px; font-weight:800;
    padding:5px 10px; border-radius:999px; color:#fff; white-space:nowrap;
    background:rgba(10,10,14,0.78); border:1px solid rgba(255,255,255,0.22);
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  }
  .vcard-body{padding:10px 12px 12px; display:flex; flex-direction:column; gap:9px;}
  /* neutraliza las reglas viejas del look v78 (las tarjetas llevan clases de
     compatibilidad para que nada externo se rompa) */
  .vip-perfil.vcard .vip-perfil-inner{padding:0;}
  .vip-perfil.vcard .vip-abrir{width:100%; margin:0;}
  .vip-perfil.vcard .vip-galeria{margin:0;}
  .vcard-media.vip-of-portada{height:auto; border-radius:0;}
  .vcard-ava.vip-avatar.of-avatar{
    width:34px; height:34px; font-size:14px;
    box-shadow:0 0 0 2px var(--surface), 0 0 0 3.5px color-mix(in srgb, var(--vpc, #E8B94A) 80%, transparent);
  }
  .vcard-nombre.vip-nombre{font-family:'Inter', sans-serif; font-size:13.5px; font-weight:800;}
  .vcard-stats.vip-of-stats, .vcard-esperan.vip-of-stats{margin:0; padding:0; background:none; border:none;}
  .vcard-stats{display:flex; align-items:center; gap:10px; font-size:11px; color:var(--text-dim); min-height:20px; flex-wrap:wrap;}
  .vcard-stats b{color:var(--text); font-weight:800; margin-right:2px;}
  .vcard-hace{display:inline-flex; align-items:center; gap:5px; font-weight:600;}
  .vcard .vip-of-social{margin-left:auto;}
  .vcard .vip-abrir, .vcard .vip-desbloq, .vcard .vip-of-trailer{margin:0; width:100%;}
  .vcard .vip-galeria{margin:0;}
  .vcard-esperan{font-size:11.5px; line-height:1.5; color:var(--text-dim); display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
  .vcard-esperan b{color:var(--gold-soft);}
  /* la cuadrícula que ANTOJA (bloqueados): 3 o 6 casillas borrosas con candado */
  .vip-of-tiles.antojo{display:grid; grid-template-columns:repeat(3, 1fr); gap:7px; margin:0;}
  .vip-of-tiles.antojo .vip-of-tile{max-width:none; aspect-ratio:1/1;}
  /* v109 — cuando la misma foto se repite para llenar el mosaico, cada
     casilla la encuadra distinto: parecen adelantos diferentes, no un
     copy-paste (y siguen igual de borrosas — no se reconoce nada) */
  .vip-of-tile.css.z1 img{object-position:center 12%; transform:scale(1.14);}
  .vip-of-tile.css.z2 img{object-position:center 45%; transform:scale(1.28);}
  .vip-of-tile.css.z3 img{object-position:center 78%; transform:scale(1.20);}
  .vip-of-tile.css img{filter:blur(15px) saturate(1.05) brightness(0.85); transform:scale(1.25);}
  /* ============ v94: PESTAÑAS de nivel ============ */
  .vip-subnav, .vip-hero{scroll-margin-top:86px;} /* que no queden tapadas por el encabezado */
  .vip-bloque[hidden]{display:none !important;}
  .tab-fuera{display:none !important;}
  .vip-subnav-btn{opacity:0.6;}
  .vip-subnav-btn.on{
    opacity:1;
    box-shadow:0 0 0 1.5px var(--vap, #E8B94A), 0 8px 22px -10px var(--vap, #E8B94A);
    background:linear-gradient(160deg, color-mix(in srgb, var(--vap, #C9CFDA) 24%, #15151B), #0F0F13);
  }
  /* ============ v94: PORTADA tipo streaming de la Zona VIP ============ */
  .vip-hero{
    position:relative; height:216px; border-radius:20px; overflow:hidden; margin-bottom:14px;
    border:1px solid color-mix(in srgb, var(--vap, #E8B94A) 40%, transparent);
    animation:vipEntra .5s var(--ease, ease) both;
  }
  .vip-hero > img{width:100%; height:100%; object-fit:cover; object-position:center 22%; display:block;}
  .vip-hero-velo{position:absolute; inset:0; background:linear-gradient(to top, rgba(8,6,12,0.96) 8%, rgba(8,6,12,0.35) 55%, transparent 85%);}
  .vip-hero-txt{position:absolute; left:16px; right:16px; bottom:14px; z-index:2; display:flex; flex-direction:column; gap:6px; align-items:flex-start;}
  .vip-hero-tag{
    font-size:9px; font-weight:900; letter-spacing:0.16em; padding:5px 11px; border-radius:999px;
    color:#101116; background:var(--vap, #E8B94A); box-shadow:0 8px 20px -8px var(--vap, #E8B94A);
  }
  .vip-hero-nombre{font-family:'Fraunces', serif; font-size:30px; font-weight:600; color:#fff; text-transform:capitalize; line-height:1.05; text-shadow:0 4px 24px rgba(0,0,0,0.65);}
  .vip-hero-sub{font-size:10.5px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; color:color-mix(in srgb, var(--vap, #E8B94A) 75%, #fff);}
  .vip-hero-btn{
    margin-top:4px; display:inline-flex; align-items:center; gap:7px; cursor:pointer; font-family:inherit;
    font-size:11px; font-weight:800; letter-spacing:0.09em; text-transform:uppercase; color:#1C1229;
    padding:11px 18px; border-radius:999px; border:none;
    background:linear-gradient(135deg, #FFE9A8, #F2B93E 55%, #E8894A);
    box-shadow:0 12px 28px -10px rgba(232,185,74,0.55);
  }
  .vip-hero-btn:active{transform:scale(0.96);}
  .vip-hero .vip-desbloq.vip-hero-desb{margin:4px 0 0; width:auto; padding:11px 18px; font-size:11px;}
  /* la fila RECIÉN SUBIDO (reusa el look de los favoritos) */
  .vip-nuevo-fila{margin:2px 0 10px;}
  /* v124 — la fila CONTINÚA VIENDO (mismo look, en dorado) */
  .vip-continua{margin:2px 0 12px;}
  .vip-favs-tit.cv{color:var(--gold-soft, #F5D488);}
  .vip-favchip.cv{border-color:rgba(245,212,136,0.4);}
  .vip-favchip.cv small{color:var(--text-faint); font-weight:600; text-transform:none; margin-left:3px;}
  .vip-favs-tit.nf{color:#7FE3B0;}
  .vip-favchip.nf small{color:var(--text-faint); font-weight:600; text-transform:none; margin-left:3px;}
  .vip-favchip.nf{border-color:rgba(127,227,176,0.35);}
  /* lujo consistente: los divisores de sección con la letra elegante */
  .vip-apartado span{font-family:'Fraunces', serif; font-weight:600; letter-spacing:0.12em;}
  /* ============ v94: SKELETONS — brillo de carga mientras llegan las fotos
     (v95: el brillo ahora es un pulso de OPACIDAD — lo anima el compositor
     de la GPU y no estorba al scroll en teléfonos modestos) ============ */
  @keyframes fpShimmer{0%, 100%{opacity:0.55;} 50%{opacity:1;}}
  .card-media > img, .vcard-media > img, .vip-hero > img, .vcard-ava > img, .vip-of-tile img{
    background-image:linear-gradient(115deg, #191A21 45%, #23242E 55%, #191A21 65%);
    animation:fpShimmer 1.3s ease-in-out infinite;
  }
  .card-media > img.ok, .vcard-media > img.ok, .vip-hero > img.ok, .vcard-ava > img.ok, .vip-of-tile img.ok{animation:none; background-image:none; opacity:1;}
  html[data-lite="1"] .card-media > img, html[data-lite="1"] .vcard-media > img, html[data-lite="1"] .vip-hero > img{animation:none; opacity:1;}
  /* v95 — scroll más suave: sin "rebotes" que se encadenan raro dentro del
     webview de Telegram (algunos teléfonos sentían la página atorada) */
  /* v99 — RENDIMIENTO: las secciones de abajo no se dibujan hasta que te
     acercas a ellas (el navegador se ahorra un montón de trabajo al abrir
     y al hacer scroll). Al llegar, aparecen igualito que siempre. */
  @supports (content-visibility: auto){
    #opiniones, #clientes, #topfans, #en-numeros, #porque-elegirnos,
    #como-funciona, #pagos, #unete-equipo, #soporte{
      content-visibility:auto; contain-intrinsic-size: auto 640px;
    }
  }
  html, body{overscroll-behavior-y:none;}
  /* v101 — el botón para irse a explorar el catálogo desde la Zona VIP */
  .vip-explorar{
    display:inline-flex; align-items:center; gap:6px; cursor:pointer; font-family:inherit; flex-shrink:0;
    font-size:11px; font-weight:800; letter-spacing:0.06em; padding:8px 13px; border-radius:999px;
    color:var(--gold-soft, #F5D488); background:rgba(232,185,74,0.1);
    border:1px solid rgba(232,185,74,0.4);
  }
  .vip-explorar:active{transform:scale(0.95);}
  @media (max-width:400px){ .vip-explorar span, .vip-cuenta{display:none;} }
  /* v102 — el letrero de contenido protegido se puede ESCONDER de verdad
     (la clase lo pintaba en flex y le ganaba al hidden) */
  .vip-aviso[hidden]{display:none !important;}
  /* ============ v103: FUERA el catálogo viejo ============
     La Zona VIP ya hace todo (ver, buscar, comprar), así que las secciones
     del catálogo de antes se esconden. Los DATOS siguen cargando: de ahí
     salen las fotos, los nombres y la página de cada perfil. */
  /* las TRIPAS viejas del catálogo se van; la sección se queda como casa */
  /* v131: con la zona de catálogo, el "inicio de cliente" sobra (la zona ya
     es su mundo) — las historias, ruleta y dinámicas sí se quedan arriba */
  html.solo-zona #vipHome{display:none !important;}
  html.solo-zona #catFilter,
  html.solo-zona #catalogSections,
  html.solo-zona #catalogGrid,
  html.solo-zona #viewToggle,
  html.solo-zona .catalog-search,
  html.solo-zona #comboZona,
  html.solo-zona #searchEmpty,
  html.solo-zona #favSection,
  html.solo-zona #spotlight,
  html.solo-zona #zonavip-promo,
  html.solo-zona #que-encontraras{display:none !important;}
  html.solo-zona .vip-explorar,
  html.solo-zona #vipZona .vip-volver,
  /* v105 — fuera de aquí: eso vive ahora en CUENTA */
  html.solo-zona #vipZona .vip-instalar,
  html.solo-zona #vipZona #vipInstalar,
  html.solo-zona #catalogo .prueba-social,
  html.solo-zona #catalogo .catalog-head,
  html.solo-zona #vipZona .vip-aviso,
  html.solo-zona #vipZona .vip-tab[data-canal="_regalos"],
  html.solo-zona #vipZona .vip-tab[data-canal="_novedades"],
  html.solo-zona #tabMenu{display:none !important;}
  /* v105 — la prueba social, como una línea discreta bajo el título */
  html.solo-zona .catalog-head{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;}
  html.solo-zona .catalog-count{font-size:11.5px; color:var(--text-faint);}
  html.solo-zona .catalog-count b{color:var(--gold-soft, #F5D488); font-weight:800;}
  /* v105 — LAS CATEGORÍAS: pegadas arriba, siempre a la mano al hacer scroll */
  html.solo-zona #vipZona.dentro .vip-tabs{
    position:sticky; top:calc(var(--tg-top, 0px) + 6px); z-index:9;
    padding:8px 0; margin:0 0 10px;
    background:linear-gradient(180deg, var(--bg) 72%, transparent);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
  }
  html.solo-zona #vipZona.dentro .vip-tabs::-webkit-scrollbar{display:none;}
  html.solo-zona #vipZona.dentro .vip-tab{flex:0 0 auto;}
  /* ⬇️ LA ZONA VIVE DENTRO DEL CATÁLOGO: ya no es una ventana encima */
  html.solo-zona #vipZona.dentro{
    position:static !important; inset:auto !important; z-index:auto !important;
    display:flex !important; height:auto !important; min-height:0 !important;
    background:transparent !important; padding:0 !important; overflow:visible !important;
    opacity:1 !important; transform:none !important; visibility:visible !important;
  }
  /* la cabecera de la ventana sobra aquí: el apartado ya se llama catálogo */
  html.solo-zona #vipZona.dentro .vip-top{display:none !important;}
  html.solo-zona #vipZona.dentro .vip-cuerpo{overflow:visible; padding:0;}
  /* todo alineado con el resto de la página */
  html.solo-zona #vipZona.dentro{max-width:960px; margin:0 auto; padding:0 22px 10px !important; width:100%;}
  @media (max-width:640px){ html.solo-zona #vipZona.dentro{padding:0 18px 10px !important;} }
  html.solo-zona #vipZona.dentro .vip-buscar-fila{margin-top:2px;}
  /* el aviso de contenido protegido, más discreto viviendo aquí */
  html.solo-zona #vipZona.dentro .vip-aviso{font-size:10.5px; padding:9px 13px; opacity:0.9;}
  /* ============ v106: EXPERIENCIA PREMIUM — más luz, más oro, más vida ====== */
  /* el SALUDO con su nombre y su destello dorado */
  /* v107 — el SALUDO ya no es un cajón: una sola línea fina, pero VIVA
     (la manita saluda, el dorado se mueve y un brillo cruza de vez en cuando) */
  .vip-saludo{
    position:relative; overflow:hidden; border-radius:999px; padding:7px 14px 7px 11px; margin:2px 0 10px;
    display:flex; align-items:center; gap:8px; min-width:0;
    background:linear-gradient(100deg, rgba(245,212,136,0.10), rgba(245,212,136,0.03));
    border:1px solid rgba(245,212,136,0.26);
    animation:fpSaludoEntra .7s var(--ease, ease) both;
  }
  @keyframes fpSaludoEntra{from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:none;}}
  .vip-saludo-emo{
    font-size:15px; line-height:1; flex-shrink:0; position:relative; z-index:2;
    transform-origin:70% 80%; animation:fpSaludoMano 3.4s ease-in-out .6s infinite;
  }
  @keyframes fpSaludoMano{
    0%,72%,100%{transform:rotate(0deg);}
    76%{transform:rotate(16deg);} 80%{transform:rotate(-10deg);}
    84%{transform:rotate(14deg);} 88%{transform:rotate(-6deg);} 92%{transform:rotate(0deg);}
  }
  .vip-saludo-txt{
    position:relative; z-index:2; min-width:0; flex:1; display:flex; align-items:baseline; gap:6px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .vip-saludo-txt b{
    font-family:'Fraunces', serif; font-size:14.5px; font-weight:600; letter-spacing:0.01em; flex-shrink:0;
    background:linear-gradient(100deg, #FFF3D0, #F2B93E 30%, #FFF7DE 50%, #F2B93E 70%, #FFF3D0);
    background-size:280% 100%;
    -webkit-background-clip:text; background-clip:text; color:transparent;
    animation:fpOroVivo 6s linear infinite;
  }
  @keyframes fpOroVivo{0%{background-position:0% 50%;} 100%{background-position:280% 50%;}}
  .vip-saludo-txt small{font-size:11px; color:var(--text-dim); text-transform:none; overflow:hidden; text-overflow:ellipsis;}
  .vip-saludo-brillo{
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(105deg, transparent 35%, rgba(255,240,200,0.20) 50%, transparent 65%);
    transform:translateX(-120%); animation:fpBrilloPasa 5.5s ease-in-out 1.2s infinite;
  }
  @keyframes fpBrilloPasa{0%{transform:translateX(-120%);} 42%,100%{transform:translateX(120%);}}
  html[data-lite="1"] .vip-saludo-brillo,
  html[data-lite="1"] .vip-saludo-emo{animation:none;}
  html[data-lite="1"] .vip-saludo-txt b{animation:none;}
  html[data-lite="1"] .vip-saludo{animation:none;}
  /* la LÍNEA FINITA de quienes más coleccionan */
  .vip-toplinea{
    display:flex; align-items:center; gap:9px; margin:0 0 12px; padding:7px 12px; border-radius:999px;
    font-size:10.5px; overflow-x:auto; scrollbar-width:none; white-space:nowrap;
    background:rgba(245,212,136,0.06); border:1px solid rgba(245,212,136,0.22);
  }
  .vip-toplinea::-webkit-scrollbar{display:none;}
  .vip-toplinea[hidden]{display:none !important;}
  .vip-toplinea-tit{font-weight:900; letter-spacing:0.08em; color:var(--gold-soft, #F5D488); flex-shrink:0;}
  .vip-topfan{display:inline-flex; align-items:center; gap:4px; color:var(--text-dim); font-weight:700; flex-shrink:0;}
  .vip-topfan b{color:var(--gold-soft, #F5D488); font-size:9.5px; background:rgba(245,212,136,0.12); padding:1px 6px; border-radius:99px;}
  .vip-topfan.yo{color:#7EE2A0;}
  /* v107 — el COMBO ya no es un cartelón: una barrita dorada de una línea.
     Quien tenga curiosidad la toca y ahí sí se abre el detalle completo. */
  .vip-combo{
    position:relative; overflow:hidden; border-radius:14px; margin:0 0 12px;
    background:linear-gradient(100deg, rgba(245,212,136,0.13), rgba(245,212,136,0.04));
    border:1px solid rgba(245,212,136,0.34);
  }
  .vip-combo > summary{
    list-style:none; cursor:pointer; display:flex; align-items:center; gap:9px;
    padding:10px 12px; min-width:0;
  }
  .vip-combo > summary::-webkit-details-marker{display:none;}
  .vip-combo-ico{font-size:14px; flex-shrink:0;}
  .vip-combo-l1{
    font-size:12px; color:var(--text-dim); text-transform:none; flex:1; min-width:0;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .vip-combo-l1 b{color:var(--gold-soft, #F5D488); font-weight:900;}
  .vip-combo-pct{
    flex-shrink:0; font-size:9.5px; font-weight:900; letter-spacing:0.06em; padding:3px 8px; border-radius:99px;
    color:#1C1229; background:linear-gradient(90deg, #FFE9A8, #F2B93E);
  }
  .vip-combo-flecha{flex-shrink:0; font-size:11px; color:var(--gold-soft, #F5D488); transition:transform .25s ease;}
  .vip-combo[open] .vip-combo-flecha{transform:rotate(180deg);}
  .vip-combo-cuerpo{padding:2px 14px 14px;}
  .vip-combo-txt{font-size:12.5px; line-height:1.65; color:var(--text-dim); text-transform:none;}
  .vip-combo-txt b{color:var(--gold-soft, #F5D488);}
  .vip-combo-precios{display:flex; align-items:baseline; gap:12px; margin:11px 0 3px;}
  .vip-combo-antes{font-size:13px; color:var(--text-faint); text-decoration:line-through;}
  .vip-combo-ahora{
    font-family:'Fraunces', serif; font-size:27px; font-weight:600;
    background:linear-gradient(100deg, #FFF3D0, #F2B93E 55%, #E8894A);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .vip-combo-ahorro{font-size:11.5px; color:#8FF0B9; margin-bottom:12px; text-transform:none;}
  .vip-combo-ahorro b{font-weight:900;}
  .vip-combo-btn{
    display:flex; align-items:center; justify-content:center; gap:8px; padding:13px; border-radius:999px;
    text-decoration:none; font-size:12.5px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; color:#1C1229;
    background:linear-gradient(135deg, #FFE9A8, #F2B93E 55%, #E8894A);
    box-shadow:0 12px 28px -14px rgba(242,185,62,0.75);
  }
  .vip-combo-btn:active{transform:scale(0.97);}
  /* más LUZ en general: las tarjetas propias brillan un poco */
  .vip-perfil.vcard:not(.bloq) .vcard-inner{
    box-shadow:0 0 0 1px color-mix(in srgb, var(--vpc, #E8B94A) 22%, transparent), 0 16px 40px -26px color-mix(in srgb, var(--vpc, #E8B94A) 60%, transparent);
  }
  html.solo-zona #catalogo{
    background:radial-gradient(ellipse 700px 320px at 50% -6%, rgba(245,212,136,0.07), transparent 68%);
  }
  /* ============ v105: CUENTA — el centro de todo ============ */
  .cuenta-mas{margin-top:22px;}
  .cuenta-mas-tit{
    font-family:'Fraunces', serif; font-size:17px; font-weight:600; color:var(--gold-soft, #F5D488);
    margin-bottom:12px; display:flex; align-items:center; gap:8px;
  }
  .cuenta-mas-rejilla{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px;}
  .cuenta-op{
    display:flex; align-items:center; gap:11px; text-align:left; cursor:pointer; text-decoration:none;
    padding:14px 14px; border-radius:15px; font-family:inherit; width:100%; min-width:0;
    background:linear-gradient(160deg, #17181E, #101014); border:1px solid var(--line-strong);
    color:var(--text); transition:border-color .2s ease, transform .15s ease;
  }
  .cuenta-op:active{transform:scale(0.97);}
  .cuenta-op:hover{border-color:color-mix(in srgb, var(--gold-soft, #E8B94A) 55%, transparent);}
  .cuenta-op > i{font-size:19px; color:var(--gold-soft, #E8B94A); flex-shrink:0;}
  .cuenta-op-txt{display:flex; flex-direction:column; gap:2px; min-width:0;}
  .cuenta-op-n{font-size:13px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .cuenta-op-d{font-size:10.5px; color:var(--text-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .cuenta-op.on{border-color:rgba(127,226,160,0.5);}
  .cuenta-op.on > i{color:#7EE2A0;}
  .cuenta-op.roja > i{color:#FF8A8A;}
  .cuenta-op.roja:hover{border-color:rgba(255,138,138,0.5);}
  /* ============ v102: el buscador y el explicador dentro de la zona ====== */
  .vip-buscar-fila{
    display:flex; align-items:center; gap:9px; margin:0 auto 12px; max-width:960px; width:100%;
    padding:11px 15px; border-radius:999px; background:var(--surface, #16161C);
    border:1px solid var(--line-strong, rgba(226,230,238,0.18));
  }
  .vip-buscar-fila i{color:var(--text-faint); font-size:16px; flex-shrink:0;}
  .vip-buscar-fila input{
    flex:1; min-width:0; background:none; border:none; outline:none; font-family:inherit;
    font-size:14px; color:var(--text); text-transform:none;
  }
  .vip-buscar-fila input::placeholder{color:var(--text-faint); text-transform:none;}
  .vip-buscar-fila input::-webkit-search-cancel-button{display:none;} /* v121: la ✕ nativa sobra (ya hay una elegante) */
  .vip-buscar-x{
    border:none; background:rgba(255,255,255,0.08); color:var(--text-dim); cursor:pointer;
    width:24px; height:24px; border-radius:50%; font-size:12px; flex-shrink:0;
  }
  .vip-buscar-nada{
    max-width:960px; margin:0 auto 12px; padding:16px; border-radius:14px; text-align:center;
    font-size:13px; color:var(--text-dim); background:rgba(255,255,255,0.03); border:1px dashed var(--line-strong);
  }
  .vip-perfil.busca-fuera, .vip-bloque.busca-fuera{display:none !important;}
  /* =====================================================================
     v121 — BUSCADOR PRO: resultados en vivo bajo la barra (foto + sala +
     estado). Un buscador que se entiende: tocas y llegas.
     ===================================================================== */
  .vip-buscar-caja{position:relative; z-index:80; max-width:960px; margin:0 auto; width:100%;}
  .vip-buscar-caja .vip-buscar-fila{margin:0 0 12px; transition:border-color .22s ease, box-shadow .22s ease;}
  .vip-buscar-caja .vip-buscar-fila:focus-within{
    border-color:rgba(245,212,136,0.55);
    box-shadow:0 0 0 3px rgba(232,185,74,0.12), 0 14px 34px -18px rgba(0,0,0,0.8);
  }
  .vip-buscar-caja .vip-buscar-fila:focus-within > i{color:var(--gold-soft, #F5D488);}
  .vip-buscar-n{
    flex-shrink:0; font-size:10.5px; font-weight:800; letter-spacing:0.04em; color:var(--gold-soft, #F5D488);
    background:rgba(232,185,74,0.12); border:1px solid rgba(232,185,74,0.35);
    padding:3px 9px; border-radius:999px; white-space:nowrap;
  }
  .fp-busca-panel{
    position:absolute; top:calc(100% - 4px); left:0; right:0; z-index:60;
    border-radius:18px; overflow:hidden;
    /* fondo SÓLIDO: nada de lo de abajo se transluce (y va más fluido) */
    background:linear-gradient(180deg, #14111C, #0E0B14);
    border:1px solid rgba(232,185,74,0.22);
    box-shadow:0 30px 60px -18px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.03) inset;
    animation:fpBuscaEntra .18s var(--ease, ease) both;
    max-height:min(62vh, 480px); overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  @keyframes fpBuscaEntra{from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;}}
  html[data-lite="1"] .fp-busca-panel{animation:none;}
  .fpb-cab{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:11px 15px 9px; font-size:10px; font-weight:800; letter-spacing:0.12em;
    text-transform:uppercase; color:var(--text-faint);
  }
  .fpb-cab b{color:var(--gold-soft, #F5D488); letter-spacing:0.04em;}
  .fpb-fila{
    display:flex; align-items:center; gap:12px; width:100%; text-align:left;
    padding:10px 15px; border:none; background:none; cursor:pointer; font-family:inherit;
    transition:background .15s ease;
  }
  .fpb-fila + .fpb-fila{border-top:1px solid rgba(255,255,255,0.045);}
  .fpb-fila:hover, .fpb-fila:focus-visible{background:rgba(232,185,74,0.07); outline:none;}
  .fpb-fila:active{background:rgba(232,185,74,0.12);}
  .fpb-ava{
    width:44px; height:44px; border-radius:14px; flex-shrink:0; overflow:hidden; position:relative;
    background:linear-gradient(135deg, #241B36, #171122);
    border:1px solid color-mix(in srgb, var(--fbc, #E8B94A) 45%, transparent);
    display:flex; align-items:center; justify-content:center;
    font-family:'Fraunces', serif; font-size:17px; color:var(--gold-soft, #F5D488);
  }
  .fpb-ava img{width:100%; height:100%; object-fit:cover; object-position:center top; display:block;}
  .fpb-ava.sala{border-radius:50%; font-size:18px; background:color-mix(in srgb, var(--fbc, #E8B94A) 16%, #171122);}
  .fpb-datos{flex:1; min-width:0;}
  .fpb-nom{
    font-size:13.5px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden;
    text-overflow:ellipsis; display:flex; align-items:center; gap:7px;
  }
  .fpb-nom mark{background:none; color:var(--gold-soft, #F5D488);}
  .fpb-sub{
    display:flex; align-items:center; gap:7px; margin-top:3px; font-size:10.5px; color:var(--text-faint);
    white-space:nowrap; overflow:hidden;
  }
  .fpb-sub > span:last-child{overflow:hidden; text-overflow:ellipsis; min-width:0;}
  .fpb-sala{
    display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:999px;
    font-size:9px; font-weight:800; letter-spacing:0.07em; color:var(--fbc, #E8B94A);
    background:color-mix(in srgb, var(--fbc, #E8B94A) 13%, transparent);
    border:1px solid color-mix(in srgb, var(--fbc, #E8B94A) 40%, transparent);
    white-space:nowrap;
  }
  .fpb-est{flex-shrink:0; font-size:10px; font-weight:800; letter-spacing:0.05em; color:var(--text-faint); display:flex; align-items:center; gap:4px;}
  .fpb-est.mia{color:#7BE3A0;}
  .fpb-est.candado{color:var(--gold-soft, #F5D488);}
  .fpb-ir{flex-shrink:0; color:var(--text-faint); font-size:15px;}
  .fpb-vacio{padding:22px 16px 20px; text-align:center; color:var(--text-dim); font-size:12.5px;}
  .fpb-vacio b{display:block; font-family:'Fraunces', serif; font-size:15px; color:var(--text); margin-bottom:4px;}
  .fpb-chips{display:flex; flex-wrap:wrap; gap:8px; padding:4px 15px 15px;}
  .fpb-chip{
    display:inline-flex; align-items:center; gap:5px; padding:7px 13px; border-radius:999px; cursor:pointer;
    font-family:inherit; font-size:11px; font-weight:700; color:var(--text-dim);
    background:rgba(255,255,255,0.045); border:1px solid var(--line-strong);
    transition:color .18s ease, border-color .18s ease, background .18s ease;
  }
  .fpb-chip:hover{color:var(--gold-soft, #F5D488); border-color:rgba(232,185,74,0.5); background:rgba(232,185,74,0.08);}
  .fpb-pie{
    padding:10px 15px 12px; font-size:10.5px; color:var(--text-faint); text-align:center;
    border-top:1px solid rgba(255,255,255,0.05);
  }
  /* v121 — cuando una foto de plano no pudo cargar: cuadrito de reintento
     (nada de huecos vacíos misteriosos) */
  .fp-img-reintento{
    width:100%; height:100%; min-height:86px; border:1px dashed var(--line-strong);
    border-radius:12px; background:rgba(255,255,255,0.03); color:var(--text-faint);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
    cursor:pointer; font-family:inherit;
  }
  .fp-img-reintento i{font-size:17px;}
  .fp-img-reintento small{font-size:9.5px; font-weight:800; letter-spacing:0.06em;}
  .fp-img-reintento:hover{color:var(--gold-soft); border-color:rgba(232,185,74,0.45);}
  /* el explicador GRANDE: para quien llega de tus canales y no conoce nada */
  .vip-comofunciona{
    position:relative; border-radius:18px; padding:16px 16px 15px; margin:2px 0 16px;
    background:linear-gradient(160deg, color-mix(in srgb, var(--vap, #E8B94A) 10%, #15151B), #0D0D11);
    border:1px solid color-mix(in srgb, var(--vap, #E8B94A) 35%, transparent);
  }
  .vip-comofunciona{padding:0;}
  .vip-cf-tit{
    font-family:'Fraunces', serif; font-size:14.5px; font-weight:600; color:var(--gold-soft, #F5D488);
    display:flex; align-items:center; gap:8px; cursor:pointer; list-style:none;
    padding:13px 40px 13px 15px; margin:0;
  }
  .vip-cf-tit::-webkit-details-marker{display:none;}
  .vip-cf-tit small{font-size:10.5px; color:var(--text-faint); font-family:'Inter', sans-serif; font-weight:600; text-transform:none;}
  .vip-comofunciona[open] .vip-cf-tit{border-bottom:1px solid color-mix(in srgb, var(--vap, #E8B94A) 22%, transparent); margin-bottom:12px;}
  .vip-comofunciona > .vip-cf-txt, .vip-comofunciona > .vip-cf-pasos, .vip-comofunciona > .vip-cf-nota{margin-left:15px; margin-right:15px;}
  .vip-comofunciona > .vip-cf-nota:last-child{margin-bottom:14px;}
  .vip-cf-txt{font-size:12.5px; line-height:1.7; color:var(--text-dim); text-transform:none;}
  .vip-cf-txt b{color:var(--text);}
  .vip-cf-pasos{display:flex; flex-direction:column; gap:9px; margin-top:12px;}
  .vip-cf-paso{display:flex; align-items:flex-start; gap:10px; font-size:12.5px; line-height:1.55; color:var(--text-dim); text-transform:none;}
  .vip-cf-paso b.n{
    flex-shrink:0; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:11px; color:#1C1229; background:linear-gradient(135deg, #FFE9A8, #F2B93E);
  }
  .vip-cf-paso span b{color:var(--gold-soft, #F5D488);}
  .vip-cf-nota{
    margin-top:12px; padding:10px 12px; border-radius:11px; font-size:11.5px; line-height:1.6;
    color:var(--text-faint); background:rgba(255,255,255,0.03); border:1px solid var(--line); text-transform:none;
  }
  .vip-cf-nota.importante{
    color:#FFD9A8; background:rgba(255,158,94,0.09); border-color:rgba(255,158,94,0.4);
  }
  .vip-cf-nota.importante b{color:#FFC7A1;}
  .vip-cf-x{
    position:absolute; top:10px; right:10px; width:26px; height:26px; border-radius:50%;
    border:1px solid var(--line-strong); background:transparent; color:var(--text-faint); cursor:pointer; font-size:12px;
  }
  /* ============ v101: la Zona VIP como APARADOR ============ */
  /* el precio en la tarjeta bloqueada (igualito al del catálogo) */
  .vcard-precio{bottom:auto; top:52px; right:10px;}
  .vcard-media .vcard-precio{position:absolute; z-index:3;}
  .vcard-precio.invita{
    position:absolute; top:52px; right:10px; z-index:3; white-space:nowrap;
    font-size:10px; font-weight:800; letter-spacing:0.06em; padding:5px 10px; border-radius:999px;
    color:#F5D488; background:rgba(10,8,5,0.82); border:1px solid rgba(245,212,136,0.55);
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  }
  /* v108 — en la tarjeta del modelo ya no va el precio, va SU CATEGORÍA */
  .vcard-precio.dentro{
    position:absolute; top:52px; right:10px; z-index:3; white-space:nowrap;
    font-size:9.5px; font-weight:800; letter-spacing:0.05em; padding:5px 10px; border-radius:999px;
    text-transform:none;
    color:var(--vpc, #C9CFDA); background:rgba(10,8,15,0.8);
    border:1px solid color-mix(in srgb, var(--vpc, #C9CFDA) 45%, transparent);
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  }
  /* v109 — el hueco muerto de arriba: la sección del catálogo traía 60px de
     aire por dentro que en modo solo-zona no pintaban nada (el titulote que
     los llenaba se quitó en la v106). Se recorta y el catálogo sube. */
  html.solo-zona #catalogo{padding-top:10px;}
  html.solo-zona #vipZona.dentro .vip-buscar-fila{padding-top:4px;}
  html.solo-zona #vipZona.dentro .vip-tabs{padding-top:2px; margin-bottom:10px;}
  /* =====================================================================
     v110 — LA FICHA DEL MODELO: su propia página, en dorado
     ===================================================================== */
  .vip-ficha{
    position:fixed; inset:0; z-index:1450; display:none; flex-direction:column;
    background:
      radial-gradient(ellipse 620px 420px at 50% -8%, rgba(245,212,136,0.13), transparent 70%),
      linear-gradient(180deg, #12100C, #0A0810 55%, #08060C);
  }
  .vip-ficha.open{display:flex; animation:fichaEntra .28s var(--ease, ease) both;}
  @keyframes fichaEntra{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}
  html[data-lite="1"] .vip-ficha.open{animation:none;}
  .vip-ficha-x{
    position:absolute; top:calc(12px + env(safe-area-inset-top)); left:12px; z-index:6;
    width:40px; height:40px; border-radius:50%; cursor:pointer;
    display:flex; align-items:center; justify-content:center; font-size:19px;
    color:#F5D488; background:rgba(10,8,5,0.62); border:1px solid rgba(245,212,136,0.4);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  }
  html.in-telegram .vip-ficha-x{top:calc(10px + var(--tg-top, 0px));}
  .vip-ficha-x:active{transform:scale(0.92);}
  .vip-ficha-scroll{
    flex:1; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain; padding-bottom:60px;
  }
  /* --- la portada grande --- */
  .ficha-hero{
    position:relative; width:100%; aspect-ratio:4/5; max-height:54vh; overflow:hidden;
    display:flex; align-items:center; justify-content:center; background:#14101C;
  }
  .ficha-hero > img{width:100%; height:100%; object-fit:cover; object-position:center 18%; display:block;}
  .ficha-hero-ph{
    font-family:'Fraunces', serif; font-size:78px; font-weight:600; color:rgba(245,212,136,0.35);
  }
  .ficha-hero-velo{
    position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(180deg, rgba(8,6,12,0.42) 0%, transparent 26%, transparent 44%, rgba(8,6,12,0.86) 88%, #08060C 100%);
  }
  .ficha-hero-brillo{
    position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(104deg, transparent 38%, rgba(255,240,200,0.13) 50%, transparent 62%);
    transform:translateX(-120%); animation:fpBrilloPasa 7s ease-in-out 1.4s infinite;
  }
  html[data-lite="1"] .ficha-hero-brillo{display:none;}
  .ficha-hero-txt{position:absolute; left:18px; right:18px; bottom:16px; z-index:3;}
  .ficha-cat{
    display:inline-flex; align-items:center; gap:5px; margin-bottom:8px;
    font-size:9.5px; font-weight:900; letter-spacing:0.16em; padding:5px 11px; border-radius:999px;
    color:#1C1229; background:linear-gradient(135deg, #FFE9A8, #F2B93E 55%, #E8894A);
    box-shadow:0 8px 22px -10px rgba(242,185,62,0.8);
  }
  .ficha-nombre{
    font-family:'Fraunces', serif; font-size:clamp(26px, 8vw, 38px); font-weight:600; line-height:1.05;
    margin:0; letter-spacing:0.01em; text-transform:none;
    background:linear-gradient(100deg, #FFF7DE, #F2B93E 40%, #FFF7DE 60%, #E8C87A);
    background-size:220% 100%;
    -webkit-background-clip:text; background-clip:text; color:transparent;
    animation:fpOroVivo 7s linear infinite;
  }
  html[data-lite="1"] .ficha-nombre{animation:none;}
  .ficha-check{
    display:inline-flex; align-items:center; justify-content:center; vertical-align:middle;
    width:19px; height:19px; border-radius:50%; font-size:11px; color:#0B0A12;
    background:linear-gradient(135deg, #FFE9A8, #F2B93E); -webkit-text-fill-color:#0B0A12;
  }
  .ficha-meta{margin-top:7px; font-size:12px; color:rgba(255,255,255,0.72); text-transform:none;}
  .ficha-meta b{color:#F5D488;}
  .ficha-sello{
    position:absolute; top:calc(14px + env(safe-area-inset-top)); right:14px; z-index:4;
    font-size:9px; font-weight:900; letter-spacing:0.13em; padding:6px 11px; border-radius:999px;
    color:#F5D488; background:rgba(10,8,5,0.7); border:1px solid rgba(245,212,136,0.5);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  }
  html.in-telegram .ficha-sello{top:calc(12px + var(--tg-top, 0px));}
  /* --- el contenido --- */
  .ficha-cuerpo{padding:16px 14px 24px; max-width:760px; margin:0 auto; width:100%;}
  .ficha-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px;}
  .ficha-tile{
    position:relative; aspect-ratio:3/4; border-radius:12px; overflow:hidden; cursor:pointer;
    border:1px solid rgba(245,212,136,0.18); background:#141020; padding:0;
    display:flex; align-items:center; justify-content:center;
    content-visibility:auto; contain-intrinsic-size:160px 210px;
  }
  .ficha-tile img, .ficha-tile video{width:100%; height:100%; object-fit:cover; object-position:center 20%; display:block;}
  .ficha-tile:active{transform:scale(0.97);}
  .ficha-tile.bloq{cursor:default;}
  .ficha-tile.bloq img{filter:blur(8px) saturate(1.1); transform:scale(1.15);}
  .ficha-tile.bloq.z1 img{object-position:center 12%;}
  .ficha-tile.bloq.z2 img{object-position:center 46%; transform:scale(1.3);}
  .ficha-tile.bloq.z3 img{object-position:center 78%; transform:scale(1.22);}
  .ficha-tile.bloq > .ti{position:absolute; font-size:18px; color:rgba(255,255,255,0.9); text-shadow:0 2px 10px rgba(0,0,0,0.8);}
  .ficha-tile.deco > .ti{color:rgba(245,212,136,0.45);}
  /* v111 — la marca en la casilla del video: discreta, recta y arriba, para
     que no se encime con el botón de play ni con la duración */
  .ficha-tile .vip-vid-marca.ficha-marca{
    position:absolute; inset:auto 6px auto 6px; top:6px; bottom:auto; z-index:3; text-align:center;
    transform:none; font-size:7.5px; letter-spacing:0.1em; color:rgba(255,255,255,0.55);
    text-shadow:0 1px 5px rgba(0,0,0,0.9); pointer-events:none; overflow:hidden;
    white-space:nowrap; text-overflow:ellipsis;
  }
  .ficha-play{
    position:absolute; width:38px; height:38px; border-radius:50%; font-size:14px;
    display:flex; align-items:center; justify-content:center; color:#1C1229;
    background:linear-gradient(135deg, #FFE9A8, #F2B93E); box-shadow:0 8px 20px -8px rgba(0,0,0,0.8);
  }
  /* ===== v111 — pestañas de la ficha: todo / fotos / videos ===== */
  .ficha-tabs{display:flex; gap:7px; margin-bottom:11px; overflow-x:auto; scrollbar-width:none; padding:1px;}
  .ficha-tabs::-webkit-scrollbar{display:none;}
  .ficha-tab{
    flex-shrink:0; cursor:pointer; font-family:inherit; white-space:nowrap;
    font-size:11px; font-weight:800; letter-spacing:0.05em; padding:8px 14px; border-radius:999px;
    color:var(--text-dim); background:rgba(255,255,255,0.04);
    border:1px solid rgba(245,212,136,0.24); text-transform:none;
    transition:all .2s ease;
  }
  .ficha-tab b{font-weight:900; color:var(--gold-soft, #F5D488); margin-left:3px;}
  .ficha-tab.on{
    color:#1C1229; background:linear-gradient(135deg, #FFE9A8, #F2B93E); border-color:transparent;
    box-shadow:0 8px 20px -10px rgba(242,185,62,0.8);
  }
  .ficha-tab.on b{color:#1C1229;}
  .ficha-tab:active{transform:scale(0.94);}
  .ficha-tile[hidden]{display:none !important;}
  /* la duración del video, abajo a la derecha */
  .ficha-dur{
    position:absolute; right:6px; bottom:6px; z-index:4; font-size:9.5px; font-weight:800;
    padding:2px 6px; border-radius:6px; color:#fff; background:rgba(8,6,12,0.78); letter-spacing:0.03em;
  }
  .ficha-dur:empty{display:none;}
  /* ===== v114 — EL VASO DE LA COLECCIÓN ===== */
  .fp-vaso-caja{display:flex; align-items:center; gap:14px; margin:6px 0 2px;}
  .fp-vaso{
    position:relative; width:52px; height:70px; flex-shrink:0;
    border-radius:6px 6px 16px 16px; overflow:hidden;
    background:linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
    border:2px solid rgba(255,255,255,0.32); border-top-width:3px;
    box-shadow:0 10px 26px -14px rgba(0,0,0,0.9), 0 0 22px -12px rgba(255,255,255,0.5) inset;
  }
  .fp-vaso-leche{
    position:absolute; left:0; right:0; bottom:0; height:0;
    background:linear-gradient(180deg, #FFFDF6, #F4EBD6);
    transition:height 1.1s cubic-bezier(.3,.9,.3,1);
  }
  .fp-feliz.vaso .fp-vaso-leche, .fp-vaso.ya .fp-vaso-leche{height:var(--llenado, 20%);}
  .fp-vaso-ola{
    position:absolute; top:-7px; left:-50%; width:200%; height:14px; border-radius:50%;
    background:#FFFDF6; animation:fpOla 3.2s ease-in-out infinite;
  }
  .fp-vaso-ola.dos{animation-duration:2.3s; animation-direction:reverse; opacity:0.65;}
  @keyframes fpOla{0%,100%{transform:translateX(-6%);} 50%{transform:translateX(6%);}}
  html[data-lite="1"] .fp-vaso-ola{animation:none;}
  .fp-vaso-vidrio{
    position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.22) 42%, transparent 52%);
  }
  .fp-vaso-gota{
    position:absolute; top:-3px; left:8px; width:6px; height:9px; border-radius:0 0 50% 50%;
    background:#FFFDF6; animation:fpGota 2.4s ease-in infinite;
  }
  .fp-vaso-gota.b{left:auto; right:9px; animation-delay:1.1s;}
  @keyframes fpGota{0%{transform:translateY(0); opacity:0;} 20%{opacity:1;} 100%{transform:translateY(26px); opacity:0;}}
  .fp-vaso-txt{display:flex; flex-direction:column; gap:2px; text-align:left;}
  .fp-vaso-txt b{
    font-family:'Fraunces', serif; font-size:23px; font-weight:600;
    background:linear-gradient(100deg, #FFF7DE, #F2B93E 55%, #FFF7DE);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .fp-vaso-txt span{font-size:11px; color:var(--text-dim); text-transform:none; line-height:1.45;}

  /* ===== v114 — LA FELICITACIÓN ===== */
  .fp-feliz{
    position:fixed; inset:0; z-index:1700; display:flex; align-items:center; justify-content:center; padding:22px;
    background:radial-gradient(ellipse 620px 420px at 50% 40%, rgba(242,185,62,0.2), transparent 70%), rgba(7,5,12,0.94);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    opacity:0; transition:opacity .3s ease;
  }
  .fp-feliz.on{opacity:1;}
  /* el "video" de fondo: el material real bajando, difuminado */
  .fp-feliz-fondo{
    position:absolute; inset:-14px; display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; padding:0 8px;
    pointer-events:none;
  }
  .fp-feliz-fondo .fz-col{display:flex; flex-direction:column; gap:8px; will-change:transform;}
  .fp-feliz-fondo .fz-col.c0{animation:fpRio 24s linear infinite;}
  .fp-feliz-fondo .fz-col.c1{animation:fpRio 19s linear infinite reverse;}
  .fp-feliz-fondo .fz-col.c2{animation:fpRio 28s linear infinite;}
  .fp-feliz-fondo .fz-col.c3{animation:fpRio 21s linear infinite reverse;}
  html[data-lite="1"] .fp-feliz-fondo .fz-col{animation:none !important;}
  .fp-feliz-fondo .fz-tile{flex:0 0 auto; aspect-ratio:3/4; border-radius:10px; overflow:hidden; background:#161122;}
  .fp-feliz-fondo .fz-tile img{width:100%; height:100%; object-fit:cover; object-position:center 20%; filter:blur(10px) brightness(0.6); transform:scale(1.25);}
  .fp-feliz-velo{
    position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(ellipse 560px 420px at 50% 46%, rgba(242,185,62,0.26), transparent 68%),
               radial-gradient(ellipse at 50% 50%, rgba(7,5,12,0.9), rgba(7,5,12,0.72) 58%, rgba(7,5,12,0.95));
  }
  .fp-feliz-caja{
    position:relative; z-index:2;
    max-width:360px; width:100%; text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px;
    padding:26px 20px 18px; border-radius:26px;
    background:linear-gradient(160deg, rgba(32,25,15,0.93), rgba(12,9,16,0.95));
    border:1px solid rgba(245,212,136,0.44);
    box-shadow:0 34px 80px -34px rgba(0,0,0,0.95), 0 0 60px -26px rgba(242,185,62,0.6);
  }
  /* los rayos dorados que giran detrás de la caja */
  .fp-feliz-rayos{
    position:absolute; top:50%; left:50%; width:300px; height:300px; margin:-150px 0 0 -150px; pointer-events:none;
    background:conic-gradient(from 0deg, rgba(242,185,62,0.5) 0 5deg, transparent 5deg 30deg,
      rgba(242,185,62,0.32) 30deg 34deg, transparent 34deg 60deg);
    -webkit-mask-image:radial-gradient(circle at 50% 50%, rgba(0,0,0,0.95) 12%, transparent 62%);
    mask-image:radial-gradient(circle at 50% 50%, rgba(0,0,0,0.95) 12%, transparent 62%);
    animation:fpGiraRayos 26s linear infinite; opacity:0; transition:opacity .8s ease;
  }
  .fp-feliz.revienta .fp-feliz-rayos{opacity:1;}
  @keyframes fpGiraRayos{to{transform:rotate(360deg);}}
  html[data-lite="1"] .fp-feliz-rayos{animation:none;}
  /* las ondas que salen del candado al abrirse */
  .fp-feliz-onda{
    position:absolute; width:70px; height:70px; border-radius:50%; opacity:0;
    border:2px solid rgba(242,185,62,0.6);
  }
  .fp-feliz.revienta .fp-feliz-onda{animation:fpFelizOnda 1.6s ease-out forwards;}
  .fp-feliz.revienta .fp-feliz-onda.dos{animation-delay:.32s;}
  @keyframes fpFelizOnda{0%{opacity:.9; transform:scale(1);} 100%{opacity:0; transform:scale(3.1);}}
  .fp-feliz-marca{
    font-size:9.5px; font-weight:900; letter-spacing:0.42em; color:rgba(245,212,136,0.72);
    margin:-2px 0 2px 4px;
  }
  .fp-feliz-brillo{
    position:absolute; inset:0; pointer-events:none; z-index:3;
    background:linear-gradient(105deg, transparent 40%, rgba(255,240,200,0.1) 50%, transparent 60%);
    transform:translateX(-120%); animation:fpBrilloPasa 6s ease-in-out 1.6s infinite;
  }
  html[data-lite="1"] .fp-feliz-brillo{animation:none; display:none;}
  .fp-feliz-luego{
    background:none; border:none; cursor:pointer; font-family:inherit; padding:6px 4px 0;
    font-size:11.5px; font-weight:700; letter-spacing:0.05em; color:var(--text-dim); text-transform:none;
  }
  .fp-feliz-cta small{display:block; margin-top:5px; font-size:11px; opacity:0.85;}
  /* dentro de la felicitación el vaso va más grande: es el premio */
  .fp-feliz .fp-vaso-caja{gap:16px; margin:8px 0 4px;}
  .fp-feliz .fp-vaso{width:64px; height:86px;}
  .fp-feliz .fp-vaso-txt b{font-size:26px;}
  .fp-feliz-aro{position:relative; width:110px; height:110px; display:flex; align-items:center; justify-content:center;}
  .fp-feliz-candado{width:70px; height:70px; filter:drop-shadow(0 10px 30px rgba(242,185,62,0.75)); position:relative; z-index:2;}
  .fp-feliz-candado .arco{transform-origin:12px 11px; transition:transform 1s cubic-bezier(.22,.9,.24,1);}
  .fp-feliz.abierto .fp-feliz-candado .arco{transform:rotate(-44deg) translate(-1.5px,-1px);}
  .fp-feliz.revienta .fp-feliz-candado{animation:fpRevienta .9s cubic-bezier(.3,1.4,.4,1);}
  @keyframes fpRevienta{0%{transform:scale(1);} 35%{transform:scale(1.32);} 100%{transform:scale(1);}}
  .fp-feliz-chispa{
    position:absolute; width:8px; height:8px; border-radius:2px; opacity:0;
    background:linear-gradient(135deg, #FFE9A8, #F2B93E);
  }
  .fp-feliz.revienta .fp-feliz-chispa{animation:fpChispazo 1.1s ease-out var(--cd, 0s) forwards;}
  @keyframes fpChispazo{
    0%{opacity:1; transform:translate(0,0) rotate(0) scale(1);}
    100%{opacity:0; transform:translate(var(--cx), var(--cy)) rotate(var(--cr, 180deg)) scale(0.4);}
  }
  .fp-feliz-tit{
    font-family:'Fraunces', serif; font-size:clamp(30px, 9vw, 40px); font-weight:600; line-height:1; text-transform:none;
    background:linear-gradient(100deg, #FFF7DE, #F2B93E 45%, #FFF7DE);
    background-size:240% 100%;
    -webkit-background-clip:text; background-clip:text; color:transparent;
    animation:fpOroVivo 5s linear infinite;
  }
  html[data-lite="1"] .fp-feliz-tit{animation:none;}
  .fp-feliz-sub{font-size:13px; color:var(--text-dim); text-transform:none;}
  .fp-feliz-sub b{color:#F5D488;}
  .fp-feliz-cta{
    font-size:12.5px; line-height:1.6; color:var(--text-dim); text-transform:none; margin-top:4px;
  }
  .fp-feliz-cta b{color:#F5D488;}
  .fp-feliz-btn{
    width:100%; margin-top:8px; padding:14px; border-radius:999px; border:none; cursor:pointer; font-family:inherit;
    font-size:12.5px; font-weight:800; letter-spacing:0.07em; text-transform:uppercase; color:#1C1229;
    background:linear-gradient(135deg, #FFE9A8, #F2B93E 55%, #E8894A);
    box-shadow:0 14px 32px -12px rgba(242,185,62,0.8);
  }
  .fp-feliz-btn:active{transform:scale(0.97);}

  /* ===== v114 — PANTALLA DE CARGA: el logo se llena como un vaso ===== */
  .fp-carga{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
    padding:44px 20px; width:100%;
  }
  .fp-carga.tapa{position:fixed; inset:0; z-index:1750; background:linear-gradient(180deg, #0E0A14, #08060C);}
  .fp-carga-logo{position:relative; width:88px; height:88px;}
  .fp-carga-logo svg{width:100%; height:100%; display:block; position:relative; z-index:2;}
  .fp-carga-logo .fp-carga-relleno{
    position:absolute; left:6px; right:6px; bottom:6px; height:0; border-radius:0 0 18px 18px; overflow:hidden;
    background:linear-gradient(180deg, #FFFDF6, #F4EBD6); z-index:1;
    animation:fpLlena 2.2s ease-in-out infinite;
  }
  @keyframes fpLlena{0%{height:0;} 55%{height:76%;} 100%{height:0;}}
  .fp-carga-relleno::before{
    content:''; position:absolute; top:-6px; left:-50%; width:200%; height:12px; border-radius:50%;
    background:#FFFDF6; animation:fpOla 2.4s ease-in-out infinite;
  }
  .fp-carga-txt{
    font-size:10.5px; font-weight:800; letter-spacing:0.26em; text-transform:uppercase; color:var(--text-faint);
  }
  html[data-lite="1"] .fp-carga-relleno, html[data-lite="1"] .fp-carga-relleno::before{animation:none;}
  html[data-lite="1"] .fp-carga-relleno{height:50%;}

  /* ===== v113 — EL BANNER "TIPO VIDEO" de la portada (solo no clientes) ===== */
  .vip-tv{
    position:relative; height:158px; border-radius:18px; overflow:hidden; margin:0 0 11px;
    border:1px solid rgba(245,212,136,0.3); background:#0C0913;
    box-shadow:0 20px 46px -28px rgba(242,185,62,0.5);
  }
  .tv-fondo{position:absolute; inset:-10px; display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; padding:0 6px;}
  .tv-col{display:flex; flex-direction:column; gap:6px; will-change:transform;}
  .tv-col.c0{animation:fpRio 22s linear infinite;}
  .tv-col.c1{animation:fpRio 17s linear infinite reverse;}
  .tv-col.c2{animation:fpRio 26s linear infinite;}
  .tv-col.c3{animation:fpRio 20s linear infinite reverse;}
  html[data-lite="1"] .tv-col{animation:none !important;}
  .tv-tile{
    flex:0 0 auto; aspect-ratio:3/4; border-radius:9px; overflow:hidden; background:#161122;
  }
  .tv-tile img{width:100%; height:100%; object-fit:cover; object-position:center 20%; filter:blur(9px) brightness(0.75); transform:scale(1.2);}
  .tv-velo{
    position:absolute; inset:0;
    background:radial-gradient(ellipse at 50% 50%, rgba(8,6,12,0.86), rgba(8,6,12,0.6) 62%, rgba(8,6,12,0.9));
  }
  .tv-escenas{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center;}
  /* v130 — el banner quedó en DOS escenas (la cifra falsa de "suscriptores
     disfrutando" se retiró: nada de números inventados) y con diseño de
     verdad: marco de filigrana, tipografía editorial y botón dorado. */
  .tv-escena{
    position:absolute; display:flex; flex-direction:column; align-items:center; gap:4px;
    opacity:0; animation:tvEscena 9s ease-in-out infinite;
  }
  .tv-escena.sin-dato{display:none;}
  .tv-escena.uno{animation-delay:0s;}
  .tv-escena.tres{animation-delay:4.5s;}
  /* si no hay cifra de archivos, la escena del candado queda fija */
  .vip-tv.solo-cta .tv-escena.tres{animation:none; opacity:1;}
  @keyframes tvEscena{
    0%{opacity:0; transform:translateY(12px) scale(0.96);}
    6%{opacity:1; transform:none;}
    42%{opacity:1; transform:translateY(-4px);}
    50%{opacity:0; transform:translateY(-14px) scale(0.98);}
    100%{opacity:0;}
  }
  html[data-lite="1"] .tv-escena{animation:none; opacity:0;}
  html[data-lite="1"] .tv-escena.tres{opacity:1;}
  /* el marco de filigrana: doble línea dorada con esquinas abiertas */
  .tv-marco{
    position:absolute; inset:8px; pointer-events:none; border-radius:12px;
    border:1px solid rgba(245,212,136,0.28);
  }
  .tv-marco::before{
    content:''; position:absolute; inset:4px; border-radius:9px;
    border:1px solid rgba(245,212,136,0.12);
  }
  .tv-cta-pill{
    display:inline-flex; align-items:center; gap:8px; margin-top:4px;
    padding:9px 20px; border-radius:999px;
    font-size:clamp(13px, 4vw, 16px); font-weight:800; letter-spacing:0.12em; text-transform:uppercase;
    color:#231604; background:linear-gradient(160deg, #FFE9A8, #F2B93E 55%, #D9910F);
    box-shadow:0 14px 34px -14px rgba(242,185,62,0.75), inset 0 1px 0 rgba(255,255,255,0.55);
  }
  .tv-cta-pill i{font-size:15px;}
  .tv-escena b{
    font-family:'Fraunces', serif; font-size:clamp(30px, 10vw, 44px); font-weight:600; line-height:1;
    background:linear-gradient(100deg, #FFF7DE, #F2B93E 48%, #FFF7DE);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    text-transform:none;
  }
  .tv-escena span{
    font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
    color:rgba(255,255,255,0.72); line-height:1.5;
  }
  .tv-candado{width:42px; height:42px; filter:drop-shadow(0 8px 22px rgba(242,185,62,0.7));}
  .tv-escena.tres .tv-candado .arco{transform-origin:12px 11px; animation:tvAbre 9s ease-in-out 4.5s infinite;}
  @keyframes tvAbre{
    0%,8%{transform:rotate(0deg);}
    18%{transform:rotate(-42deg) translate(-1px,-1px);}
    42%{transform:rotate(-42deg) translate(-1px,-1px);}
    50%,100%{transform:rotate(0deg);}
  }
  .tv-escena.tres b.tv-cta{
    font-size:clamp(17px, 5.4vw, 23px); letter-spacing:0.02em; margin-top:2px;
  }
  .tv-marca{
    font-family:'Inter', sans-serif; font-size:12px !important; font-weight:900 !important;
    letter-spacing:0.34em !important; color:#F5D488 !important; margin-top:2px;
  }
  .tv-brillo{
    position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(105deg, transparent 38%, rgba(255,240,200,0.12) 50%, transparent 62%);
    transform:translateX(-120%); animation:fpBrilloPasa 6.5s ease-in-out 1s infinite;
  }
  html[data-lite="1"] .tv-brillo{display:none;}

  /* ===== v113 — LA PANTALLA DEL CANDADO: ríos de material en movimiento ===== */
  .ficha-cuerpo.lock{padding:0; max-width:none;}
  .ficha-lp-top{
    position:sticky; top:0; z-index:6; display:flex; align-items:center; gap:10px;
    padding:calc(12px + env(safe-area-inset-top)) 14px 12px 62px;
    background:linear-gradient(180deg, rgba(8,6,12,0.94), rgba(8,6,12,0.72) 70%, transparent);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  }
  html.in-telegram .ficha-lp-top{padding-top:calc(10px + var(--tg-top, 0px));}
  .ficha-lp-ava{
    width:38px; height:38px; border-radius:50%; overflow:hidden; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-family:'Fraunces', serif; font-size:16px; color:#F5D488;
    background:rgba(245,212,136,0.14); border:1px solid rgba(245,212,136,0.4);
  }
  .ficha-lp-ava img{width:100%; height:100%; object-fit:cover; object-position:center 20%; filter:blur(4px); transform:scale(1.2);}
  .ficha-lp-idn{display:flex; flex-direction:column; gap:1px; min-width:0;}
  .ficha-lp-idn b{
    font-family:'Fraunces', serif; font-size:17px; font-weight:600; text-transform:none;
    background:linear-gradient(100deg, #FFF7DE, #F2B93E 50%, #FFF7DE);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .ficha-lp-idn small{font-size:10.5px; color:var(--text-dim); text-transform:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  /* la pantalla: ocupa TODO desde el primer segundo, sin bajar nada */
  .ficha-lockpage{position:relative; min-height:calc(100vh - 62px); min-height:calc(100svh - 62px); overflow:hidden;}
  .ficha-rio{
    position:absolute; inset:-8px; display:grid; grid-template-columns:repeat(3, 1fr); gap:7px;
    overflow:hidden; padding:0 7px;
  }
  .ficha-rio-col{display:flex; flex-direction:column; gap:7px; will-change:transform;}
  .ficha-rio-col.c0{animation:fpRio 34s linear infinite;}
  .ficha-rio-col.c1{animation:fpRio 26s linear infinite reverse;}
  .ficha-rio-col.c2{animation:fpRio 40s linear infinite;}
  @keyframes fpRio{from{transform:translateY(0);} to{transform:translateY(-50%);}}
  html[data-lite="1"] .ficha-rio-col{animation:none !important;}
  .ficha-rio-tile{
    position:relative; flex:0 0 auto; aspect-ratio:3/4; border-radius:12px; overflow:hidden;
    display:flex; align-items:center; justify-content:center; background:#141020;
    border:1px solid rgba(245,212,136,0.1);
  }
  .ficha-rio-tile img{
    width:100%; height:100%; object-fit:cover; object-position:center 20%;
    filter:blur(10px) saturate(1.05) brightness(0.8); transform:scale(1.2);
    transition:filter .5s ease, transform .5s ease;
  }
  .ficha-rio-tile.z1 img{object-position:center 12%;}
  .ficha-rio-tile.z2 img{object-position:center 46%;}
  .ficha-rio-tile.z3 img{object-position:center 78%;}
  .ficha-rio-tile.deco{background:linear-gradient(150deg, #1A1426, #120E1C);}
  .ficha-rio-tile.video-ph{background:linear-gradient(150deg, #1D1730, #120E1C);}
  .ficha-ph-play{font-size:16px; color:rgba(245,212,136,0.5); filter:blur(2.5px);}
  .ficha-rio-velo{
    position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(ellipse at 50% 46%, rgba(8,6,12,0.86), rgba(8,6,12,0.5) 58%, rgba(8,6,12,0.82));
    transition:opacity .5s ease;
  }
  /* el candado, FIJO al centro desde que abre */
  .ficha-lock-fijo{
    position:absolute; inset:0; z-index:4; display:flex; align-items:center; justify-content:center; padding:16px;
    transition:opacity .45s ease, transform .45s ease;
  }
  .ficha-lock-caja{
    width:100%; max-width:340px; text-align:center;
    display:flex; flex-direction:column; align-items:center; gap:9px;
    padding:22px 18px 18px; border-radius:24px;
    background:rgba(10,8,14,0.74);
    backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%);
    border:1px solid rgba(245,212,136,0.34);
    box-shadow:0 30px 70px -30px rgba(0,0,0,0.95);
  }
  /* ---- PREVIEW ACTIVO: se despeja todo 15 segundos ---- */
  .ficha-lockpage.preview .ficha-rio-tile img{filter:blur(3px) saturate(1.1) brightness(1); transform:scale(1.06);}
  .ficha-lockpage.preview .ficha-rio-velo{opacity:0.25;}
  .ficha-lockpage.preview .ficha-lock-fijo{opacity:0; transform:scale(0.94); pointer-events:none;}
  .ficha-preview-btn{
    display:flex; flex-direction:column; align-items:center; gap:1px; width:100%; padding:11px;
    border-radius:999px; cursor:pointer; font-family:inherit; text-transform:none;
    font-size:12.5px; font-weight:800; color:#0E2A22;
    background:linear-gradient(135deg, #9BF3C7, #4FD79F);
    box-shadow:0 12px 28px -14px rgba(79,215,159,0.8);
  }
  .ficha-preview-btn small{font-size:9.5px; font-weight:700; opacity:0.75;}
  .ficha-preview-btn:active{transform:scale(0.97);}
  .ficha-preview-usado{font-size:10.5px; color:var(--text-faint); text-transform:none; line-height:1.5;}
  .ficha-preview-cuenta{
    position:absolute; top:14px; left:50%; transform:translateX(-50%); z-index:6;
    font-size:11px; font-weight:800; letter-spacing:0.08em; padding:7px 14px; border-radius:999px;
    color:#0E2A22; background:linear-gradient(135deg, #9BF3C7, #4FD79F);
    box-shadow:0 10px 26px -12px rgba(0,0,0,0.9);
  }
  .ficha-preview-cuenta[hidden]{display:none !important;}
  /* ---- el candado, con vida ---- */
  .ficha-lock-aro{
    position:relative; width:96px; height:96px; margin-bottom:2px;
    display:flex; align-items:center; justify-content:center;
  }
  .ficha-lock-onda{
    position:absolute; inset:8px; border-radius:50%;
    border:1.5px solid rgba(242,185,62,0.45);
    animation:fichaOnda 2.8s ease-out infinite;
  }
  .ficha-lock-onda.dos{animation-delay:1.4s;}
  @keyframes fichaOnda{0%{transform:scale(0.72); opacity:0.9;} 100%{transform:scale(1.35); opacity:0;}}
  .ficha-lock-svg{
    width:62px; height:62px; position:relative; z-index:2;
    filter:drop-shadow(0 10px 26px rgba(242,185,62,0.65));
    animation:fichaLock 4.2s ease-in-out infinite;
  }
  @keyframes fichaLock{
    0%,58%,100%{transform:rotate(0deg) scale(1);}
    62%{transform:rotate(-5deg) scale(1.04);}
    66%{transform:rotate(5deg) scale(1.04);}
    70%{transform:rotate(-3deg) scale(1.02);}
    74%{transform:rotate(0deg) scale(1);}
  }
  .ficha-lock-svg .arco{transform-origin:12px 11px; animation:fichaArco 4.2s ease-in-out infinite;}
  @keyframes fichaArco{
    0%,58%,100%{transform:rotate(0deg);}
    64%{transform:rotate(-13deg) translateY(-1px);}
    72%{transform:rotate(0deg);}
  }
  html[data-lite="1"] .ficha-lock-svg,
  html[data-lite="1"] .ficha-lock-svg .arco,
  html[data-lite="1"] .ficha-lock-onda{animation:none;}
  .ficha-lock-tit{
    font-family:'Fraunces', serif; font-size:clamp(20px, 6.4vw, 27px); font-weight:600; line-height:1.15;
    text-transform:none;
    background:linear-gradient(100deg, #FFF7DE, #F2B93E 45%, #FFF7DE);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .ficha-lock-tit b{font-weight:600;}
  .ficha-lock-sub{font-size:11.5px; color:var(--text-dim); text-transform:none; margin-top:-4px;}
  .ficha-lock-precio{display:flex; flex-direction:column; align-items:center; gap:2px; margin:8px 0 2px;}
  .ficha-lock-precio b{
    font-family:'Fraunces', serif; font-size:30px; font-weight:600;
    background:linear-gradient(100deg, #FFF3D0, #F2B93E 55%, #E8894A);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .ficha-lock-precio span{font-size:11px; color:var(--text-dim); text-transform:none; line-height:1.5;}
  .ficha-lock .ficha-btn, .ficha-lock-caja .ficha-btn{margin-top:6px;}
  .ficha-lock-mas{
    width:100%; padding:11px; border-radius:999px; cursor:pointer; font-family:inherit;
    font-size:11.5px; font-weight:700; color:var(--text-dim); text-transform:none;
    background:transparent; border:1px solid rgba(245,212,136,0.28);
  }
  .ficha-lock-mas:active{transform:scale(0.98);}
  .ficha-lock-pie{font-size:10px; line-height:1.6; color:var(--text-faint); text-transform:none; margin-top:3px;}
  .ficha-lock-pie b{color:#7EE2A0;}
  .ficha-vacia{
    text-align:center; padding:34px 18px; font-size:12.5px; color:var(--text-faint); text-transform:none;
    border:1px dashed rgba(245,212,136,0.3); border-radius:16px;
  }
  .ficha-precio{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:13px 0 12px;}
  .ficha-precio span{
    font-family:'Fraunces', serif; font-size:29px; font-weight:600;
    background:linear-gradient(100deg, #FFF3D0, #F2B93E 55%, #E8894A);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .ficha-precio small{font-size:11.5px; color:var(--text-dim); text-transform:none; flex:1; min-width:150px;}
  .ficha-precio small b{color:var(--text);}
  .ficha-btn{
    display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:15px;
    border-radius:999px; border:none; cursor:pointer; font-family:inherit;
    font-size:12.5px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; color:#1C1229;
    background:linear-gradient(135deg, #FFE9A8, #F2B93E 55%, #E8894A);
    box-shadow:0 14px 32px -12px rgba(242,185,62,0.75);
  }
  .ficha-btn:active{transform:scale(0.97);}
  .ficha-mas{margin-top:24px;}
  .ficha-mas-tit{
    font-size:10px; font-weight:800; letter-spacing:0.16em; text-transform:uppercase;
    color:var(--text-faint); margin-bottom:10px;
  }
  .ficha-mas-fila{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding-bottom:4px;}
  .ficha-mas-fila::-webkit-scrollbar{display:none;}
  .ficha-mas-chip{
    display:inline-flex; align-items:center; gap:7px; flex-shrink:0; cursor:pointer; font-family:inherit;
    padding:5px 13px 5px 5px; border-radius:999px; font-size:11.5px; font-weight:700; color:var(--text-dim);
    background:rgba(255,255,255,0.04); border:1px solid rgba(245,212,136,0.24); text-transform:none;
  }
  .ficha-mas-chip:active{transform:scale(0.95);}
  .ficha-mas-ava{
    width:28px; height:28px; border-radius:50%; overflow:hidden; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800;
    background:rgba(245,212,136,0.16); color:#F5D488;
  }
  .ficha-mas-ava img{width:100%; height:100%; object-fit:cover; object-position:center 20%;}
  .ficha-pie{
    margin-top:22px; text-align:center; font-size:11px; line-height:1.7;
    color:var(--text-faint); text-transform:none;
  }
  .ficha-pie b{color:var(--gold-soft, #F5D488);}
  @media (min-width:560px){ .ficha-grid{grid-template-columns:repeat(4, minmax(0,1fr));} }

  /* ===== v109 — TODO LO QUE YA NO VA ARRIBA vive aquí, después del catálogo ===== */
  .vip-extras{margin-top:30px; padding-top:6px; border-top:1px solid var(--line);}
  .vip-extras::before{
    content:'y además'; display:block; margin:14px 0 14px;
    font-size:10px; font-weight:800; letter-spacing:0.18em; text-transform:uppercase; color:var(--text-faint);
  }
  /* v109 — menos aire suelto entre las cosas de arriba: se veían despegadas */
  .vip-saludo{margin:2px 0 8px;}
  .vip-subnav{margin:2px 0 9px;}
  .vip-seguro{margin:0 0 9px;}
  .vip-aclara{margin:0 0 11px;}
  .vip-catinfo{margin:-2px 0 12px;}
  .vip-apartado{margin-top:16px;}
  .vip-bloque + .vip-bloque{margin-top:2px;}
  /* v110 — el teléfono solo dibuja las tarjetas que están a la vista.
     El tamaño reservado evita que el scroll "salte" al ir bajando. */
  .vip-perfil.vcard.bloq{content-visibility:auto; contain-intrinsic-size:auto 430px;}
  /* ===== v108 — la ACLARACIÓN de que el precio es por categoría ===== */
  .vip-aclara{
    display:flex; align-items:flex-start; gap:9px; margin:0 0 12px; padding:11px 13px; border-radius:14px;
    font-size:12px; line-height:1.6; color:var(--text-dim); text-transform:none;
    background:rgba(245,212,136,0.07); border:1px solid rgba(245,212,136,0.28);
  }
  .vip-aclara b{color:var(--gold-soft, #F5D488);}
  .vip-aclara-emo{font-size:14px; line-height:1.4; flex-shrink:0;}
  /* ===== v108 — la banda de CONFIANZA (chips finos) ===== */
  .vip-seguro{
    display:flex; gap:6px; margin:0 0 12px; overflow-x:auto; scrollbar-width:none; padding:1px;
  }
  .vip-seguro::-webkit-scrollbar{display:none;}
  .vip-seguro-chip{
    flex-shrink:0; white-space:nowrap; font-size:10px; font-weight:700; letter-spacing:0.02em;
    text-transform:none; padding:6px 11px; border-radius:999px; color:var(--text-dim);
    background:rgba(126,226,160,0.06); border:1px solid rgba(126,226,160,0.22);
  }
  /* ===== v108 — el bloque grande de "por qué puedes estar tranquilo" ===== */
  .vip-confia{
    margin:26px 0 6px; padding:16px 16px 14px; border-radius:18px;
    background:linear-gradient(160deg, rgba(126,226,160,0.05), rgba(255,255,255,0.015));
    border:1px solid rgba(126,226,160,0.22);
    display:flex; flex-direction:column; gap:11px;
  }
  .vip-confia-tit{
    font-family:'Fraunces', serif; font-size:16px; font-weight:600; color:var(--text);
    text-transform:none; letter-spacing:0.01em;
  }
  .vip-confia-item{
    font-size:12px; line-height:1.65; color:var(--text-dim); text-transform:none;
    padding-left:2px;
  }
  .vip-confia-item b{color:var(--text);}
  /* ===== v108 — LA CABECERA DE CADA CATEGORÍA: el precio vive AQUÍ, una vez ===== */
  .vip-catinfo{
    display:flex; flex-direction:column; gap:8px; margin:-2px 0 12px; padding:11px 14px; border-radius:15px;
    background:linear-gradient(140deg, color-mix(in srgb, var(--vap, #C9CFDA) 10%, transparent), rgba(255,255,255,0.02));
    border:1px solid color-mix(in srgb, var(--vap, #C9CFDA) 30%, transparent);
  }
  .vip-catinfo.mia{border-color:rgba(126,226,160,0.34); background:linear-gradient(140deg, rgba(126,226,160,0.09), rgba(255,255,255,0.02));}
  /* v109 — el segundo apartado de una misma categoría: solo una línea */
  .vip-catinfo.misma{padding:9px 13px; background:rgba(255,255,255,0.025); border-style:dashed;}
  .vip-catinfo-misma{font-size:11.5px; line-height:1.55; color:var(--text-dim); text-transform:none;}
  .vip-catinfo-misma b{color:var(--gold-soft, #F5D488);}
  .vip-catinfo-l1{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
  .vip-catinfo-precio{
    flex-shrink:0; font-family:'Fraunces', serif; font-size:22px; font-weight:600; letter-spacing:0.01em;
    background:linear-gradient(100deg, #FFF3D0, #F2B93E 55%, #E8894A);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    position:static; padding:0; border:none; background-color:transparent;
  }
  .vip-catinfo-precio s{font-family:'Inter', sans-serif; font-size:12px; color:var(--text-faint); -webkit-text-fill-color:var(--text-faint); margin-right:5px;}
  .vip-catinfo-precio.invita{
    font-family:'Inter', sans-serif; font-size:10px; font-weight:900; letter-spacing:0.14em;
    padding:5px 11px; border-radius:999px; color:#F5D488; -webkit-text-fill-color:#F5D488;
    background:rgba(245,212,136,0.12); border:1px solid rgba(245,212,136,0.36);
  }
  .vip-catinfo-ok{
    flex-shrink:0; font-size:10px; font-weight:900; letter-spacing:0.12em;
    padding:5px 11px; border-radius:999px; color:#7EE2A0;
    background:rgba(126,226,160,0.12); border:1px solid rgba(126,226,160,0.36);
  }
  .vip-catinfo-txt{font-size:12px; color:var(--text-dim); text-transform:none; line-height:1.55; flex:1; min-width:150px;}
  .vip-catinfo-txt b{color:var(--text);}
  .vip-catinfo-ojo{
    font-size:11.5px; color:var(--text-dim); text-transform:none; line-height:1.6;
    padding:9px 11px; border-radius:11px;
    background:rgba(255,255,255,0.035); border:1px dashed color-mix(in srgb, var(--vap, #C9CFDA) 34%, transparent);
  }
  .vip-catinfo-ojo b{color:var(--gold-soft, #F5D488);}
  .vip-catinfo-sem{
    font-size:11.5px; color:var(--text-dim); text-transform:none;
    display:flex; align-items:center; gap:6px;
  }
  .vip-catinfo-sem b{color:#7EE2A0; font-weight:800;}
  .vip-catinfo .vip-desbloq{margin-top:2px;}
  /* tu colección: cuántas salas llevas de la marca */
  .vip-progreso{
    display:flex; flex-direction:column; gap:8px; margin:2px 0 14px; padding:13px 15px; border-radius:15px;
    background:linear-gradient(160deg, color-mix(in srgb, var(--vap, #E8B94A) 9%, #15151B), #0E0E12);
    border:1px solid color-mix(in srgb, var(--vap, #E8B94A) 30%, transparent);
  }
  .vip-progreso.black{border-color:rgba(212,175,55,0.4);}
  .vip-progreso-txt{font-size:12.5px; color:var(--text-dim); display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;}
  .vip-progreso-txt b{font-size:15px; color:var(--gold-soft, #F5D488); font-weight:900;}
  .vip-progreso-txt small{font-size:11px; color:var(--text-faint);}
  .vip-progreso-barra{height:7px; border-radius:99px; background:rgba(255,255,255,0.07); overflow:hidden;}
  .vip-progreso-ultra{color:#F5D488 !important;}
  .vip-faltan{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:10px;}
  .vip-faltan-tit{font-size:10px; font-weight:800; letter-spacing:0.08em; color:var(--text-faint); text-transform:uppercase;}
  .vip-falta-chip{
    display:inline-flex; align-items:center; gap:4px; cursor:pointer; font-family:inherit;
    font-size:10px; font-weight:800; letter-spacing:0.04em; padding:5px 10px; border-radius:999px;
    color:var(--vfc, #C9CFDA); background:color-mix(in srgb, var(--vfc, #C9CFDA) 10%, transparent);
    border:1px solid color-mix(in srgb, var(--vfc, #C9CFDA) 34%, transparent);
    transition:transform .18s ease;
  }
  .vip-falta-chip:active{transform:scale(0.94);}
  /* v107 — "aquí no se acaba": BLACK y ULTRA en grande al final de PLATINUM */
  .vip-otras{margin:22px 0 6px; display:flex; flex-direction:column; gap:10px;}
  .vip-otras-tit{
    font-family:'Fraunces', serif; font-size:17px; font-weight:600; color:var(--text);
    display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:2px;
  }
  .vip-otras-tit small{font-family:'Inter', sans-serif; font-size:11px; font-weight:500; color:var(--text-faint);}
  .vip-otra{
    display:flex; align-items:center; gap:12px; width:100%; cursor:pointer; text-align:left;
    font-family:inherit; padding:14px 14px; border-radius:18px; position:relative; overflow:hidden;
    border:1px solid rgba(255,255,255,0.14); color:var(--text);
    background:linear-gradient(120deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
    transition:transform .2s var(--ease-bounce), border-color .2s ease;
  }
  .vip-otra:active{transform:scale(0.985);}
  .vip-otra.black{border-color:rgba(237,237,242,0.34); background:linear-gradient(120deg, #16161C, #0B0B0F);}
  .vip-otra.ultra{border-color:rgba(245,212,136,0.46); background:linear-gradient(120deg, #1D1810, #0D0B08);}
  .vip-otra-emo{font-size:24px; line-height:1; flex-shrink:0;}
  .vip-otra-txt{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1;}
  .vip-otra-txt b{font-size:13px; font-weight:900; letter-spacing:0.05em;}
  .vip-otra.ultra .vip-otra-txt b{color:#F5D488;}
  .vip-otra.black .vip-otra-txt b{color:#EDEDF2;}
  .vip-otra-txt small{font-size:11.5px; color:var(--text-dim); text-transform:none; line-height:1.45;}
  .vip-otra > .ti{font-size:16px; color:var(--text-faint); flex-shrink:0;}
  .vip-otra.mia{box-shadow:0 0 0 1px rgba(245,212,136,0.28) inset;}
  .vip-otra::after{
    content:''; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.09) 50%, transparent 62%);
    transform:translateX(-120%); animation:fpBrilloPasa 7s ease-in-out 2s infinite;
  }
  html[data-lite="1"] .vip-otra::after{display:none;}
  .vip-progreso-barra span{
    display:block; height:100%; border-radius:99px;
    background:linear-gradient(90deg, #FFE9A8, #F2B93E 55%, #E8894A);
    box-shadow:0 0 14px rgba(242,185,62,0.5); transition:width .6s var(--ease, ease);
  }
  /* APARADOR: las bloqueadas van de DOS en DOS (se ve más de un jalón);
     las abiertas (con su galería) siguen a lo ancho */
  @media (min-width:360px){
    /* v103 — min-width:0 y max-width:100%: SIN esto la rejilla se estiraba y
       la pantalla se iba de lado (los hijos de un grid no se dejan encoger
       por defecto y una palabra larga o una foto empujaba todo) */
    .vip-bloque{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; align-items:start; max-width:100%;}
    .vip-bloque > *{min-width:0; max-width:100%;}
    .vip-bloque > .vip-perfil.bloq .vcard-nombre.vip-nombre{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
    .vip-bloque > .vip-perfil.bloq .vip-desbloq{white-space:normal; overflow-wrap:anywhere;}
    .vip-bloque > .vip-apartado,
    .vip-bloque > .vip-catinfo,
    .vip-bloque > .vip-perfil:not(.bloq),
    .vip-bloque > .vip-nivel-vacio{grid-column:1 / -1;}
    .vip-bloque > .vip-perfil.bloq{margin-bottom:0;}
    .vip-bloque > .vip-perfil.bloq .vcard-head{padding:8px 9px 7px; gap:7px;}
    .vip-bloque > .vip-perfil.bloq .vcard-ava.vip-avatar.of-avatar{width:28px; height:28px; font-size:12px;}
    .vip-bloque > .vip-perfil.bloq .vcard-nombre.vip-nombre{font-size:12px;}
    .vip-bloque > .vip-perfil.bloq .vcard-chip{font-size:7.5px;}
    .vip-bloque > .vip-perfil.bloq .vcard-body{padding:9px 10px 10px; gap:8px;}
    .vip-bloque > .vip-perfil.bloq .vcard-esperan{font-size:10.5px;}
    .vip-bloque > .vip-perfil.bloq .card-nivel{font-size:8px; padding:4px 8px; bottom:8px; left:8px;}
    .vip-bloque > .vip-perfil.bloq .vcard-cont{font-size:9.5px; padding:4px 8px; bottom:8px; right:8px;}
    .vip-bloque > .vip-perfil.bloq .vcard-precio{font-size:10px; padding:4px 8px; top:46px; right:8px;}
    .vip-bloque > .vip-perfil.bloq .vip-of-candado{font-size:8px; padding:4px 9px; top:8px; right:8px;}
    .vip-bloque > .vip-perfil.bloq .vip-of-tiles.antojo{gap:5px;}
    .vip-bloque > .vip-perfil.bloq .vip-desbloq{padding:11px 10px; font-size:10.5px; letter-spacing:0.05em;}
    .vip-bloque > .vip-perfil.bloq .vip-desbloq small{display:none;} /* v108: ya lo dice la cabecera */
    .vip-bloque > .vip-perfil.bloq .vip-of-trailer{font-size:10px; padding:9px;}
  }
  /* ============ v100: 🜲 ULTRA — oro sobre negro profundo ============ */
  .vip-tab[data-canal="ultra"]{
    border-color:rgba(245,212,136,0.55);
    background:linear-gradient(160deg, #1A1508, #0A0805);
    color:#F5D488; text-shadow:0 0 14px rgba(245,212,136,0.35);
  }
  .vip-tab[data-canal="ultra"].activa{box-shadow:0 0 0 1.5px #F5D488, 0 10px 26px -12px rgba(245,212,136,0.6);}
  .vip-perfil.vcard.ultra .vcard-inner{
    background:linear-gradient(168deg, #1A1508, #0A0805);
    border-color:rgba(245,212,136,0.42); border-top-color:rgba(245,212,136,0.75);
  }
  .vip-perfil.vcard.ultra .vcard-nombre{color:#F5E9C9;}
  .vip-perfil.vcard.ultra .vcard-chip{color:#F5D488;}
  .card-nivel.ultra-chip{
    color:#F5D488; background:linear-gradient(160deg, #1A1508, #0A0805);
    border:1px solid rgba(245,212,136,0.65); box-shadow:0 8px 20px -8px rgba(245,212,136,0.45);
  }
  .vip-desbloq.ultra{
    background:linear-gradient(135deg, #F9E7B3, #E8C96A 55%, #B8860B);
    box-shadow:0 12px 28px -10px rgba(232,201,106,0.6); color:#1A1204;
  }
  .vip-explica.ultra{
    background:linear-gradient(135deg, rgba(245,212,136,0.12), rgba(184,134,11,0.05));
    border-color:rgba(245,212,136,0.5);
  }
  .vip-explica.ultra b{color:#F5D488;}
  .vip-nivel-vacio.ultra{
    background:
      radial-gradient(ellipse 300px 120px at 50% -20%, rgba(245,212,136,0.15), transparent 70%),
      linear-gradient(168deg, #14100A, #0A0805);
    border-color:rgba(245,212,136,0.5); font-family:'Fraunces', serif; font-size:14px;
  }
  /* v95 — la portada del perfil (la foto pública del catálogo) va NÍTIDA */
  .preview-chip.portada-chip{background:rgba(10,10,14,0.78); color:var(--gold-soft, #E8B94A); border:1px solid rgba(232,185,74,0.4);}
  /* ============ v94: VIDEO-portadas del catálogo ============ */
  .card-media video.card-video{width:100%; height:100%; object-fit:cover; display:block; background:#101116;}
  /* v94: la prueba social del perfil (ventas reales de la semana) */
  .pp-social7{
    display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700;
    padding:4px 11px; border-radius:999px; color:#FFC7A1;
    background:rgba(255,140,70,0.1); border:1px solid rgba(255,140,70,0.35);
  }
  .pp-social7 b{font-weight:900;}
  .vip-explica{
    position:relative; border-radius:16px; padding:14px 38px 13px 16px; margin-bottom:16px;
    background:linear-gradient(135deg, rgba(201,207,218,0.1), rgba(142,151,168,0.06));
    border:1px solid rgba(201,207,218,0.35); font-size:12px; line-height:1.65; color:var(--text-dim);
  }
  .vip-explica b{color:#E3E6EE;}
  .vip-explica p{margin-top:5px; text-transform:none;}
  .vip-explica.black{background:linear-gradient(135deg, #131318, #0b0b10); border-color:#33333F;}
  .vip-explica-x{
    position:absolute; top:9px; right:9px; width:26px; height:26px; border-radius:50%;
    border:1px solid var(--line-strong); background:transparent; color:var(--text-faint); cursor:pointer; font-size:12px;
  }
  .vip-perfil.of.black .vip-perfil-inner{background:linear-gradient(180deg, rgba(14,14,19,0.98), rgba(8,8,12,0.99));}
  .vip-desbloq.black{
    background:linear-gradient(135deg, #2E2E3A, #14141a); color:#EDEDF2;
    border:1px solid #4A4A58; box-shadow:0 12px 28px -10px rgba(0,0,0,0.8);
  }
  .vip-desbloq.suelto{margin:14px 16px;}
  .vip-bloq-aviso.black{background:rgba(20,20,26,0.75); border-color:#33333F; color:#C9C9D4;}
  /* miniaturas de VIDEO con su primer cuadro real + marca de agua */
  .vip-thumb-video video{
    width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; background:#0C0812;
  }
  .vip-vid-marca{
    position:absolute; inset:auto 0 30%; left:0; right:0; text-align:center; pointer-events:none;
    font-size:8.5px; font-weight:800; letter-spacing:0.03em; color:rgba(255,255,255,0.42);
    text-shadow:0 1px 5px rgba(0,0,0,0.8); transform:rotate(-12deg); text-transform:none;
    white-space:nowrap;
  }
  .vip-play-mini{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:13px; color:#fff; background:rgba(10,6,16,0.62); border:1px solid rgba(255,255,255,0.35);
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); pointer-events:none;
  }

  /* la cuadrícula dentro de un regalo: mismas miniaturas que las galerías */
  .vip-regalo .regalo-grid{margin:4px 0 10px; --vpc:#E8B94A;}
  .vip-regalo-conteo{font-size:9.5px; font-weight:800; letter-spacing:0.12em; color:var(--text-faint); font-family:'Inter', sans-serif; vertical-align:middle; margin-left:6px;}
  /* 🎡 ruleta de pases */
  .ruleta-section{padding-top:6px;}
  .ruleta-card{position:relative; overflow:hidden; border-radius:22px; padding:24px 20px; text-align:center;
    background:
      radial-gradient(ellipse 440px 240px at 50% 0%, rgba(232,185,74,0.16), transparent 62%),
      radial-gradient(ellipse 400px 240px at 10% 100%, rgba(157,92,255,0.14), transparent 62%),
      linear-gradient(165deg, #1D142B, #110B1B);
    border:1px solid rgba(232,185,74,0.45); animation:vipEntra .5s var(--ease, ease) both;
    box-shadow:0 26px 52px -24px rgba(232,185,74,0.4);}
  .ruleta-sub{font-size:12px; color:var(--text-dim); line-height:1.7; margin:2px 0 4px;}
  .ruleta-sub b{color:var(--gold-soft);}
  .ruleta-escena{position:relative; width:min(302px, 76vw); aspect-ratio:1; margin:22px auto 14px;}
  /* aro exterior estilo feria: anillo dorado con foquitos que parpadean */
  .ruleta-aro{position:absolute; inset:-13px; border-radius:50%; z-index:0;
    background:conic-gradient(from 0deg, #6A4E1E, #C89B3F, #F7DF9A, #C89B3F, #6A4E1E, #C89B3F, #F7DF9A, #C89B3F, #6A4E1E);
    box-shadow:0 26px 60px -20px rgba(0,0,0,0.75), inset 0 2px 5px rgba(255,255,255,0.35), inset 0 -3px 7px rgba(0,0,0,0.5);}
  .ruleta-foco{position:absolute; width:7px; height:7px; border-radius:50%; z-index:1; transform:translate(-50%,-50%);
    background:radial-gradient(circle at 38% 32%, #FFF7DD, #F2B93E 65%, #B57F1C);
    box-shadow:0 0 7px 1.5px rgba(255,225,150,0.85); animation:focoParpadeo 1.15s ease-in-out infinite;}
  .ruleta-foco:nth-child(odd){animation-delay:0.58s;}
  @keyframes focoParpadeo{0%,100%{opacity:1;} 50%{opacity:0.28; box-shadow:0 0 2px rgba(255,225,150,0.2);}}
  .ruleta-rueda{position:absolute; inset:0; border-radius:50%; z-index:1; border:6px solid #1B1226;
    box-shadow:inset 0 0 46px rgba(0,0,0,0.62), inset 0 0 4px rgba(255,255,255,0.14);
    transition:transform 5s cubic-bezier(0.09, 0.61, 0.05, 1.005); will-change:transform;}
  /* brillo superior + viñeta: le da volumen 3D a la rueda */
  .ruleta-rueda::after{content:''; position:absolute; inset:0; border-radius:50%; pointer-events:none;
    background:radial-gradient(circle at 50% 26%, rgba(255,255,255,0.17), transparent 46%),
               radial-gradient(circle at 50% 50%, transparent 58%, rgba(0,0,0,0.4) 96%);}
  .ruleta-etq{position:absolute; transform:translate(-50%, -50%); font-size:22px; pointer-events:none; z-index:1;
    text-shadow:0 2px 7px rgba(0,0,0,0.7);}
  .ruleta-etq.nada{font-size:15px; opacity:0.5; color:#fff; font-weight:900;}
  .ruleta-centro{position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:66px; height:66px;
    border-radius:50%; z-index:3; display:flex; align-items:center; justify-content:center; font-size:27px;
    background:radial-gradient(circle at 35% 28%, #40305E, #17102A 78%);
    border:3px solid transparent;
    background-clip:padding-box;
    box-shadow:0 0 0 3px #C89B3F, 0 0 0 5px #251A38, 0 10px 26px rgba(0,0,0,0.6), inset 0 2px 6px rgba(255,255,255,0.14);}
  .ruleta-flecha{position:absolute; top:-19px; left:50%; transform:translateX(-50%); z-index:4;
    width:30px; height:34px; font-size:0;
    background:linear-gradient(180deg, #FFE9A8, #E8B94A 60%, #B57F1C);
    clip-path:polygon(50% 100%, 0 16%, 16% 0, 84% 0, 100% 16%);
    filter:drop-shadow(0 5px 9px rgba(0,0,0,0.6)); animation:flechaLatido 1.6s ease-in-out infinite;}
  @keyframes flechaLatido{ 0%,100%{transform:translateX(-50%) translateY(0);} 50%{transform:translateX(-50%) translateY(4px);} }
  /* leyenda como fichas de color (una por canal) */
  .ruleta-chips{display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:2px 0 16px;}
  .ruleta-chip-c{display:inline-flex; align-items:center; gap:5px; font-size:9.5px; font-weight:800; letter-spacing:0.07em;
    text-transform:uppercase; color:var(--text-dim); background:rgba(255,255,255,0.045);
    border:1px solid color-mix(in srgb, var(--cc, #8a8a8a) 45%, transparent); border-radius:999px; padding:5px 10px;}
  .ruleta-chip-c i{width:7px; height:7px; border-radius:50%; background:var(--cc, #8a8a8a); box-shadow:0 0 6px var(--cc, transparent);}
  .ruleta-leyenda{font-size:9.5px; font-weight:800; letter-spacing:0.08em; color:var(--text-faint); margin-bottom:14px;}
  /* misiones para ganar giros (TikTok) */
  .ruleta-misiones{margin:2px 0 14px; display:flex; flex-direction:column; gap:8px; text-align:left;}
  .ruleta-mis-titulo{font-size:10px; font-weight:900; letter-spacing:0.16em; color:#FFD97A; text-align:center; margin-bottom:2px;}
  .ruleta-mision{display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:14px;
    background:rgba(255,255,255,0.045); border:1px solid var(--line-strong);}
  .ruleta-mision.hecha{opacity:0.62; border-color:rgba(61,231,214,0.4);}
  .ruleta-mis-emoji{font-size:19px; flex-shrink:0;}
  .ruleta-mis-txt{flex:1; font-size:12px; font-weight:600; color:var(--text-dim); line-height:1.4;}
  .ruleta-mis-txt b{color:#FFD97A; font-weight:800; white-space:nowrap;}
  .ruleta-mis-btn{flex-shrink:0; border:none; cursor:pointer; font-family:inherit; font-size:11px; font-weight:800;
    letter-spacing:0.04em; color:#231303; padding:9px 16px; border-radius:999px;
    background:linear-gradient(135deg, #FFE9A8, #F2B93E); transition:transform .15s;}
  .ruleta-mis-btn{text-decoration:none; display:inline-flex; align-items:center; justify-content:center;}
  .ruleta-mis-btn:active{transform:scale(0.94);}
  .ruleta-mis-btn:disabled, .ruleta-mis-btn.off{opacity:0.65; cursor:default; pointer-events:none;}
  .ruleta-mis-btn.lista{background:linear-gradient(135deg, #7CF5D0, #3DE7D6); animation:favPop 0.4s var(--ease-bounce);}
  .ruleta-mis-ok{flex-shrink:0; font-size:11px; font-weight:800; color:#3DE7D6;}
  .ruleta-accion .dinamica-btn{justify-content:center;}
  .ruleta-resultado{border-radius:18px; padding:18px 16px; font-size:12.5px; line-height:1.7; color:var(--text-dim); animation:vipEntra .45s var(--ease, ease) both;}
  .ruleta-resultado.gana{background:linear-gradient(160deg, rgba(232,185,74,0.14), rgba(232,185,74,0.04));
    border:1.5px solid rgba(232,185,74,0.6); box-shadow:0 18px 40px -18px rgba(232,185,74,0.5);}
  .ruleta-resultado.nada{background:rgba(255,255,255,0.03); border:1px solid var(--line-strong);}
  .ruleta-gano{font-size:15.5px; font-weight:800; color:var(--text); margin-bottom:8px;}
  .ruleta-codigo{font-size:12px; margin-bottom:12px;}
  .ruleta-codigo b{display:inline-block; margin-left:4px; color:#FFD97A; font-size:16px; letter-spacing:0.2em;
    background:rgba(232,185,74,0.1); border:1.5px dashed rgba(232,185,74,0.55); border-radius:10px; padding:6px 12px;}
  .ruleta-resultado.gana small{display:block; margin-top:10px; font-size:10px; color:var(--text-faint);}
  .ruleta-otravez{display:inline-block; margin-top:12px; cursor:pointer; border:1px solid var(--line-strong);
    background:rgba(255,255,255,0.05); color:var(--text); padding:9px 18px; border-radius:999px;
    font-family:inherit; font-size:11px; font-weight:800; letter-spacing:0.05em;}
  .ruleta-otravez:active{transform:scale(0.96);}
  .ruleta-confeti{position:absolute; top:-12px; width:9px; height:14px; border-radius:2px; z-index:5; opacity:0;
    animation:confetiCae 2.1s ease-in forwards;}
  @keyframes confetiCae{
    0%{opacity:1; transform:translateY(0) translateX(0) rotate(0);}
    100%{opacity:0; transform:translateY(420px) translateX(var(--cx, 0px)) rotate(540deg);}
  }
  /* 🎉 dinámicas y sorteos (tarjeta del inicio + aviso en la zona VIP) */
  .dinamicas-section{padding-top:6px;}
  .dinamica-card{position:relative; overflow:hidden; border-radius:20px; padding:22px 20px; margin-bottom:14px;
    background:
      radial-gradient(ellipse 420px 220px at 8% 0%, rgba(255,79,163,0.15), transparent 62%),
      radial-gradient(ellipse 420px 240px at 100% 100%, rgba(232,185,74,0.16), transparent 62%),
      linear-gradient(160deg, #1D142B, #120C1D);
    border:1px solid rgba(232,185,74,0.42); animation:vipEntra .5s var(--ease, ease) both;
    box-shadow:0 22px 44px -22px rgba(232,185,74,0.35);}
  .dinamica-chip{display:inline-flex; gap:6px; font-size:9.5px; font-weight:900; letter-spacing:0.18em; color:#FFD97A;
    background:rgba(232,185,74,0.12); border:1px dashed rgba(232,185,74,0.5); padding:5px 10px; border-radius:999px; margin-bottom:10px;}
  .dinamica-titulo{font-family:'Fraunces', serif; font-size:21px; font-weight:600; margin:4px 0 6px;
    background:linear-gradient(120deg, #FFE9A8, #F2B93E 55%, #FF7AB8); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
  .dinamica-texto{font-size:12.5px; color:var(--text-dim); line-height:1.7; margin-bottom:10px; white-space:pre-line;}
  .dinamica-datos{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px;}
  .dinamica-premio, .dinamica-fin{font-size:10.5px; font-weight:800; letter-spacing:0.06em; padding:5px 11px; border-radius:999px;}
  .dinamica-premio{color:#FFD97A; background:rgba(232,185,74,0.1); border:1px solid rgba(232,185,74,0.45);}
  .dinamica-fin{color:var(--text-faint); background:rgba(255,255,255,0.04); border:1px solid var(--line-strong);}
  .dinamica-btn{display:inline-flex; align-items:center; gap:8px; padding:13px 22px; border-radius:999px;
    font-size:12px; font-weight:800; letter-spacing:0.1em; text-decoration:none; color:#231303;
    background:linear-gradient(135deg, #FFE9A8, #F2B93E 55%, #E8894A); box-shadow:0 12px 28px -10px rgba(242,185,62,0.6);}
  .dinamica-btn:active{transform:scale(0.97);}
  .vip-dinamica{display:flex; align-items:center; gap:11px; padding:12px 14px; border-radius:14px; margin-bottom:12px;
    background:linear-gradient(140deg, rgba(232,185,74,0.12), rgba(255,79,163,0.08)); border:1px dashed rgba(232,185,74,0.55);}
  .vip-dinamica > span{font-size:22px;}
  .vip-dinamica-info{flex:1; min-width:0;}
  .vip-dinamica-info b{display:block; font-size:12.5px; color:var(--gold-soft);}
  .vip-dinamica-info small{font-size:10px; color:var(--text-faint); font-weight:700; letter-spacing:0.04em;}
  .vip-dinamica-btn{flex-shrink:0; padding:9px 14px; border-radius:999px; font-size:10px; font-weight:800; letter-spacing:0.08em;
    text-decoration:none; color:#231303; background:linear-gradient(135deg, #FFE9A8, #F2B93E);}
  /* 👁 vistas y ❤️ me encanta */
  .vip-social{display:inline-flex; align-items:center; gap:6px;}
  .vip-vistas{font-size:9.5px; font-weight:800; letter-spacing:0.08em; color:var(--text-faint);
    background:rgba(255,255,255,0.05); border:1px solid var(--line-strong); border-radius:999px;
    padding:3px 8px; white-space:nowrap;}
  /* v134 — el corazón, hecho joya: más grande, con cristal y borde de luz.
     Antes era un chip gris de 11px que se perdía entre lo demás. */
  .vip-amor{display:inline-flex; align-items:center; justify-content:center; gap:5px;
    width:38px; height:38px; padding:0; border-radius:50%; cursor:pointer;
    border:1px solid rgba(255,255,255,0.18); font-family:inherit; font-size:17px; line-height:1;
    color:#F3EEF9;
    background:linear-gradient(160deg,rgba(255,255,255,0.14),rgba(255,255,255,0.03) 60%),rgba(10,7,16,0.55);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    box-shadow:0 6px 18px -8px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.16);
    transition:transform .16s cubic-bezier(.3,1.4,.5,1), border-color .2s ease, background .2s ease, box-shadow .2s ease;}
  .vip-amor:hover{border-color:rgba(255,79,163,0.55); transform:translateY(-1px);}
  .vip-amor b{font-size:11px; font-weight:800; letter-spacing:0.06em;}
  .vip-amor:active{transform:scale(0.86);}
  .vip-amor.mio{
    color:#fff; border-color:transparent;
    background:linear-gradient(140deg,#FF7FB8,#FF4FA3 55%,#E8306F);
    box-shadow:0 8px 22px -8px rgba(255,79,163,0.85), inset 0 1px 0 rgba(255,255,255,0.35);
    animation:amorPop .42s cubic-bezier(.3,1.6,.5,1);}
  .vip-amor.mio::after{content:''; position:absolute; inset:-6px; border-radius:50%; pointer-events:none;
    border:1.5px solid rgba(255,79,163,0.5); animation:amorAro .55s ease-out forwards;}
  .vip-amor{position:relative;}
  @keyframes amorPop{ 0%{transform:scale(1);} 40%{transform:scale(1.32);} 70%{transform:scale(.94);} 100%{transform:scale(1);} }
  @keyframes amorAro{ 0%{opacity:.85; transform:scale(.7);} 100%{opacity:0; transform:scale(1.35);} }
  .vip-quien{font-size:11px; font-weight:800; letter-spacing:0.04em; color:#FF9ECB; cursor:pointer;
    background:rgba(255,79,163,0.12); border:1px solid rgba(255,79,163,0.32); border-radius:999px;
    padding:5px 11px; font-family:inherit; line-height:1;}
  html[data-lite="1"] .vip-amor{backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none; transition:none;}
  .vip-regalo-pie{display:flex; align-items:center; justify-content:space-between; gap:10px;}
  .vip-play small{font-size:8px; font-weight:800; letter-spacing:0.2em; color:var(--text-faint);}
  .vip-play .vip-play-aro{
    width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    border:1.5px solid color-mix(in srgb, var(--vpc, #E8B94A) 65%, transparent);
    background:rgba(255,255,255,0.05); backdrop-filter:blur(4px); font-size:16px; padding-left:3px;
  }
  .vip-visor{
    /* v111 — por encima de la ficha del modelo (1450). Antes estaba en 1300 y
       el visor abría DETRÁS de la ficha: parecía que las fotos y los videos
       no abrían, cuando sí abrían… debajo. */
    position:fixed; inset:0; z-index:1600; display:none; align-items:center; justify-content:center;
    background:rgba(6,4,10,0.97); user-select:none; -webkit-user-select:none;
  }
  .vip-visor.open{display:flex; animation:visorEntra .26s var(--ease, ease) both;}
  @keyframes visorEntra{from{opacity:0;} to{opacity:1;}}
  .vip-visor-media{max-width:100%; max-height:100%; display:flex; align-items:center; justify-content:center; touch-action:none;}
  .vip-visor-media img, .vip-visor-media video{max-width:100vw; max-height:100vh; object-fit:contain; display:block;}
  /* la foto/clip entra deslizándose según la dirección del cambio */
  .vip-visor-media.entra-der > *{animation:visorDesliza .3s var(--ease, ease) both;}
  .vip-visor-media.entra-izq > *{animation:visorDeslizaInv .3s var(--ease, ease) both;}
  @keyframes visorDesliza{from{opacity:0; transform:translateX(46px);} to{opacity:1; transform:none;}}
  @keyframes visorDeslizaInv{from{opacity:0; transform:translateX(-46px);} to{opacity:1; transform:none;}}
  html[data-lite="1"] .vip-visor-media.entra-der > *, html[data-lite="1"] .vip-visor-media.entra-izq > *{animation:none;}
  /* lienzo de foto: aquí viven el zoom, el arrastre y el spinner de carga */
  .vip-lienzo{position:relative; display:flex; align-items:center; justify-content:center; max-width:100vw; max-height:100vh;}
  .vip-lienzo img{will-change:transform; transition:opacity .3s ease;}
  .vip-lienzo img:not(.lista){opacity:0;}
  .vip-lienzo img.zoom{transition:transform .25s var(--ease, ease), opacity .3s ease;}
  .vip-lienzo img.zoom.arrastrando{transition:opacity .3s ease;}
  .vip-visor-carga{
    position:absolute; left:50%; top:50%; width:44px; height:44px; margin:-22px 0 0 -22px; z-index:1;
    border-radius:50%; border:3px solid rgba(232,185,74,0.18); border-top-color:#F2B93E;
    animation:vipGira 0.85s linear infinite; pointer-events:none;
  }
  @keyframes vipGira{to{transform:rotate(360deg);}}
  .vip-visor-error{
    display:flex; flex-direction:column; align-items:center; gap:14px; color:var(--text-dim);
    font-size:13px; padding:30px; text-align:center;
  }
  .vip-visor-error small{font-size:11px; color:var(--text-faint); margin-top:-6px; max-width:280px; line-height:1.5;}
  /* v121 — cuando el error sale DENTRO del reproductor, tapa el video con fondo propio */
  .vip-pl-marco .vip-visor-error{
    position:absolute; inset:0; z-index:5; justify-content:center;
    background:linear-gradient(180deg, rgba(10,8,14,0.94), rgba(8,6,12,0.97));
  }
  .vip-visor-error button{
    border:1px solid rgba(232,185,74,0.55); background:rgba(232,185,74,0.1); color:var(--gold-soft);
    font-family:inherit; font-size:12px; font-weight:800; letter-spacing:0.06em;
    padding:11px 22px; border-radius:999px; cursor:pointer;
  }
  /* flechas (se ven con mouse; en el teléfono se navega deslizando) */
  .vip-nav{
    position:absolute; top:50%; transform:translateY(-50%); z-index:2; cursor:pointer;
    width:46px; height:46px; border-radius:50%; border:1px solid var(--line-strong);
    background:rgba(20,14,28,0.75); color:var(--text); font-size:18px;
    display:none; align-items:center; justify-content:center; transition:background .2s ease, opacity .2s ease;
  }
  .vip-nav:hover{background:rgba(232,185,74,0.2);}
  .vip-nav.prev{left:14px;} .vip-nav.next{right:14px;}
  .vip-nav[disabled]{opacity:0.25; pointer-events:none;}
  @media (pointer:fine){ .vip-visor.con-lista .vip-nav{display:flex;} }
  /* pie del visor: nombre + contador, elegante y discreto */
  /* v116 — el nombre y el "3 / 12" se mudan ARRIBA: abajo ya vive el
     reproductor de dos renglones y se encimaban */
  .vip-visor-pie{
    position:absolute; left:50%; top:calc(16px + env(safe-area-inset-top, 0px)); transform:translateX(-50%);
    z-index:2; display:flex; align-items:center; gap:9px; max-width:64vw; pointer-events:none;
    padding:9px 16px; border-radius:999px; white-space:nowrap;
    background:rgba(18,12,26,0.82); border:1px solid rgba(232,185,74,0.35); backdrop-filter:blur(10px);
  }
  .vip-visor-pie b{
    font-family:'Fraunces', serif; font-size:13.5px; font-weight:600; color:var(--text);
    text-transform:capitalize; overflow:hidden; text-overflow:ellipsis; max-width:52vw;
  }
  .vip-visor-pie span{font-size:10.5px; font-weight:800; letter-spacing:0.14em; color:var(--gold-soft);}
  .vip-visor.cine .vip-visor-pie, .vip-visor.cine .vip-nav{opacity:0; pointer-events:none; transition:opacity .3s;}
  .vip-visor.cine.tocado .vip-visor-pie{opacity:1;}
  .vip-visor.cine.tocado .vip-nav{opacity:1; pointer-events:auto;}
  /* el visor entero se desliza al arrastrar hacia abajo para salir */
  .vip-visor.cerrando .vip-visor-media{transition:transform .24s ease-in, opacity .24s ease-in;}
  /* modo cine: fondo negro total, controles y X se ocultan (toca para verlos) */
  .vip-visor.cine{background:#000;}
  .vip-visor.cine .vip-cerrar{opacity:0; pointer-events:none; transition:opacity .3s;}
  .vip-visor.cine .vip-player-ctrl{opacity:0; transition:opacity .3s;}
  .vip-visor.cine.tocado .vip-cerrar, .vip-visor.cine.tocado .vip-player-ctrl{opacity:1; pointer-events:auto;}
  /* v147 — PANTALLA COMPLETA (el modo cine, ahora de verdad): el video se
     estira a TODO el teléfono y los controles flotan encima. La marca
     (@ + id) viaja encima de todo, como siempre. */
  .vip-visor.cine .vip-player video{
    width:100vw; height:100vh; height:100dvh; max-height:none; object-fit:contain; background:#000;
  }
  .vip-visor.cine .vip-player-ctrl{
    position:fixed; left:50%; transform:translateX(-50%); margin-top:0;
    bottom:calc(14px + env(safe-area-inset-bottom, 0px)); z-index:6;
  }
  /* menú "más opciones" (bottom sheet de la barra) */
  .menu-sheet{position:fixed; inset:0; z-index:340; visibility:hidden; pointer-events:none;}
  .menu-sheet.open{visibility:visible; pointer-events:auto;}
  .menu-back{position:absolute; inset:0; background:rgba(6,4,10,0.8); backdrop-filter:blur(6px); opacity:0; transition:opacity .3s;}
  .menu-sheet.open .menu-back{opacity:1;}
  .menu-panel{position:absolute; left:0; right:0; bottom:0; background:var(--surface, #141018); border-radius:22px 22px 0 0;
    padding:14px 20px calc(26px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--line-strong);
    transform:translateY(100%); transition:transform .32s cubic-bezier(.2,.8,.2,1); max-width:560px; margin:0 auto;}
  .menu-sheet.open .menu-panel{transform:translateY(0);}
  .menu-tirador{width:40px; height:4px; border-radius:4px; background:var(--line-strong); margin:0 auto 16px;}
  .menu-titulo{font-family:'Fraunces', serif; font-size:19px; font-weight:600; margin-bottom:16px; text-align:center;}
  .menu-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;}
  .menu-item{display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; border:none;
    background:none; border-radius:15px; padding:6px 2px 8px; font-family:inherit; font-size:10px; font-weight:700; color:var(--text-dim);
    transition:transform .12s;}
  .menu-item:active{transform:scale(0.92);}
  .menu-item:hover{color:var(--text);}
  .menu-item:hover .menu-emoji{border-color:var(--gold-soft); transform:translateY(-2px);}
  .menu-emoji{font-size:23px; width:52px; height:52px; border-radius:17px; display:flex; align-items:center; justify-content:center;
    background:var(--surface2, rgba(255,255,255,0.05)); border:1px solid var(--line2, rgba(255,255,255,0.08));
    box-shadow:0 8px 18px -10px rgba(0,0,0,0.5); transition:transform .2s var(--ease), border-color .2s;}
  .menu-cerrar{width:100%; margin-top:16px; padding:13px; border-radius:13px; border:1px solid var(--line-strong);
    background:none; color:var(--text-dim); font-family:inherit; font-size:12px; font-weight:700; cursor:pointer;}
  @media (min-width:769px){ .menu-sheet{display:none;} }
  /* historias tipo Instagram */
  .stories-section{padding-top:8px; padding-bottom:4px;}
  .stories-row{display:flex; gap:13px; overflow-x:auto; padding:4px 2px 8px; scrollbar-width:none;}
  .stories-row::-webkit-scrollbar{display:none;}
  .story-bubble{flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:6px; width:76px; border:none; background:none; cursor:pointer; transition:transform .15s var(--ease);}
  .story-bubble:active{transform:scale(0.92);}
  /* aro degradado clásico de Instagram (amarillo → naranja → rosa → morado) */
  .story-aro{
    width:70px; height:70px; border-radius:50%; padding:2.5px; display:flex;
    background:conic-gradient(from 210deg, #F9CE34, #F2703E, #EE2A7B, #B44BD6, #6228D7, #F9CE34);
  }
  /* historias del dueño (24 h): aro dorado con pulso, para que destaquen */
  .story-aro.propia{
    background:conic-gradient(from 210deg, #FFE9A8, #F2B93E, #FF7AB8, #F2B93E, #FFE9A8);
    box-shadow:0 0 0 0 rgba(242,185,62,0.5); animation:storyPulso 2.2s ease-in-out infinite;
  }
  @keyframes storyPulso{0%,100%{box-shadow:0 0 12px -2px rgba(242,185,62,0.55);} 50%{box-shadow:0 0 20px 1px rgba(255,122,184,0.6);}}
  html[data-lite="1"] .story-aro.propia{animation:none;}
  .story-foto{width:100%; height:100%; border-radius:50%; background-size:cover; background-position:center top; border:3px solid var(--bg);}
  .story-nombre{font-size:10.5px; color:var(--text); font-weight:700; max-width:76px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .story-viewer{position:fixed; inset:0; z-index:1350; display:none; flex-direction:column; background:#000; user-select:none;}
  .story-viewer.open{display:flex;}
  .story-media{flex:1; background-size:cover; background-position:center; background-repeat:no-repeat;}
  .story-barras{position:absolute; top:calc(10px + env(safe-area-inset-top,0px)); left:10px; right:10px; z-index:3; display:flex; gap:5px;}
  .story-barra{flex:1; height:3px; border-radius:3px; background:rgba(255,255,255,0.3); overflow:hidden;}
  .story-barra i{display:block; height:100%; width:0; background:#fff;}
  .story-x{position:absolute; top:calc(24px + env(safe-area-inset-top,0px)); right:16px; z-index:5; width:38px; height:38px; border-radius:50%; border:none; background:rgba(0,0,0,0.4); color:#fff; font-size:17px; cursor:pointer;}
  .story-cabecera{position:absolute; top:calc(24px + env(safe-area-inset-top,0px)); left:16px; z-index:4; display:flex; align-items:center; gap:10px;}
  .story-cab-foto{width:38px; height:38px; border-radius:50%; background-size:cover; background-position:center; border:2px solid rgba(255,255,255,0.8);}
  .story-cab-txt b{display:block; color:#fff; font-size:13px; text-shadow:0 1px 4px rgba(0,0,0,0.7);}
  .story-cab-txt small{color:rgba(255,255,255,0.85); font-size:10.5px; text-shadow:0 1px 4px rgba(0,0,0,0.7);}
  .story-cta{position:absolute; left:50%; bottom:calc(30px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:5;
    display:inline-flex; align-items:center; gap:8px; padding:13px 24px; border-radius:999px; text-decoration:none;
    background:linear-gradient(135deg, #FFE9A8, #F2B93E 60%, #E8894A); color:#231303; font-weight:800; font-size:12px; letter-spacing:0.06em;
    box-shadow:0 12px 30px -10px rgba(242,185,62,0.6);}
  .story-tap{position:absolute; top:0; bottom:0; width:38%; z-index:2; cursor:pointer;}
  .story-tap.izq{left:0;} .story-tap.der{right:0;}
  /* reproductor propio (sin pantalla completa: la marca nunca se pierde) */
  /* ===== v116 — EL REPRODUCTOR (como el de las apps grandes) ===== */
  .vip-player{position:relative; display:flex; flex-direction:column; align-items:center; max-width:100vw;}
  .vip-player video{max-height:78vh; display:block;}
  .vip-pl-marco{position:relative; display:flex; align-items:center; justify-content:center; max-width:100vw; overflow:hidden;}
  /* v123 — LA PASADA: la marca cruza el video despacito cada rato, cada vez
     a una altura distinta (estilo sitios grandes de video). Quien grabe la
     pantalla se lleva el @ paseándose — imposible de tapar o recortar.
     Es transform puro (GPU): no le cuesta nada ni a un teléfono sencillo. */
  /* =====================================================================
     v135 — LA MARCA QUE SE RELEVA (pedido de Luis)
     Antes una sola línea cruzaba la pantalla cada 8-12 segundos. Ahora hay
     VARIOS sellos que aparecen por toda la pantalla y se van relevando:
     cuando uno empieza a irse, el siguiente ya está entrando, así que
     SIEMPRE hay marca visible y nunca en el mismo lugar dos veces seguidas.
     Con eso, quien grabe la pantalla se lleva tu @ sí o sí, y recortarlo
     es imposible porque salta por todos lados.
     ===================================================================== */
  .vip-pl-sello{
    position:absolute; z-index:3; pointer-events:none; white-space:nowrap;
    max-width:94vw; overflow:hidden;
    text-align:center; opacity:0; transform:translate(-50%,-50%) scale(.94);
    transition:opacity var(--fade, .55s) ease, transform var(--fade, .55s) ease;
    will-change:opacity, transform;
  }
  .vip-pl-sello.on{opacity:var(--vis, .55); transform:translate(-50%,-50%) scale(1);}
  .vip-pl-sello b{
    display:block; font-size:var(--tam, 15px); font-weight:800; letter-spacing:0.1em;
    color:#fff; text-shadow:0 1px 6px rgba(0,0,0,0.85), 0 0 22px rgba(0,0,0,0.5);
  }
  .vip-pl-sello small{
    display:block; margin-top:2px; font-size:calc(var(--tam, 15px) * 0.66); font-weight:700;
    letter-spacing:0.07em; color:rgba(245,212,136,0.92);
    text-shadow:0 1px 5px rgba(0,0,0,0.85);
  }
  html[data-lite="1"] .vip-pl-sello{transition:none;}

  .vip-pl-pasada{
    position:absolute; left:100%; top:38%; z-index:2; pointer-events:none;
    white-space:nowrap; opacity:0; will-change:transform;
  }
  /* v124 — DOS líneas separadas (pedido de Luis): la de arriba con el @
     grande, la de abajo con el id + t.me, cada una a su altura y con su
     propia velocidad — cubren más pantalla y no se pueden tapar juntas */
  .vip-pl-pasada b{
    font-size:13.5px; font-weight:800; letter-spacing:0.09em;
    color:rgba(255,255,255,0.55); text-shadow:0 1px 5px rgba(0,0,0,0.65);
  }
  .vip-pl-pasada small{
    font-size:10px; font-weight:700; letter-spacing:0.06em;
    color:rgba(245,212,136,0.55); text-shadow:0 1px 4px rgba(0,0,0,0.6);
  }
  .vip-pl-pasada.corre{opacity:1; animation:fpPasadaMarca var(--dur, 9s) linear both;}
  @keyframes fpPasadaMarca{to{transform:translateX(calc(-100vw - 100%));}}
  /* el botón grande del centro */
  .vip-pl-central{
    position:absolute; left:50%; top:50%; width:76px; height:76px; margin:-38px 0 0 -38px;
    border:none; border-radius:50%; cursor:pointer; z-index:4; padding:0;
    display:flex; align-items:center; justify-content:center;
    background:rgba(12,9,18,0.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    box-shadow:0 10px 34px -12px rgba(0,0,0,0.9), 0 0 0 1px rgba(245,212,136,0.45) inset;
    opacity:0; transform:scale(0.82); pointer-events:none;
    transition:opacity .22s ease, transform .22s cubic-bezier(.2,1.3,.4,1);
    will-change:opacity, transform;
  }
  .vip-player.pausado .vip-pl-central, .vip-player.mostrando .vip-pl-central{opacity:1; transform:scale(1); pointer-events:auto;}
  .vip-pl-central svg{width:32px; height:32px;}
  .vip-player.pausado .vip-pl-central svg{margin-left:4px;}  /* el triangulito se centra a ojo */
  html[data-lite="1"] .vip-pl-central{transition:none; backdrop-filter:none; -webkit-backdrop-filter:none;}
  /* el ±10 s del doble toque */
  .vip-pl-salto{
    position:absolute; top:0; bottom:0; width:38%; z-index:3; pointer-events:none;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    opacity:0; color:#fff; font-size:11.5px; font-weight:800; letter-spacing:0.06em;
  }
  .vip-pl-salto.izq{left:0; border-radius:0 50% 50% 0; }
  .vip-pl-salto.der{right:0; border-radius:50% 0 0 50%;}
  .vip-pl-salto.on{animation:fpSalto .62s ease-out;}
  @keyframes fpSalto{
    0%{opacity:0; background:rgba(245,212,136,0);}
    22%{opacity:1; background:rgba(245,212,136,0.16);}
    100%{opacity:0; background:rgba(245,212,136,0);}
  }
  .vip-pl-salto svg{width:26px; height:26px;}
  html[data-lite="1"] .vip-pl-salto.on{animation-duration:.3s;}
  /* la ruedita de "cargando" del video */
  .vip-pl-spin{
    position:absolute; left:50%; top:50%; width:40px; height:40px; margin:-20px 0 0 -20px; z-index:5;
    border-radius:50%; border:3px solid rgba(245,212,136,0.22); border-top-color:#F2B93E;
    animation:fpGiroSpin .8s linear infinite;
  }
  .vip-pl-spin[hidden]{display:none;}
  @keyframes fpGiroSpin{to{transform:rotate(360deg);}}
  /* =====================================================================
     v125 — CONTROLES PREMIUM: panel de cristal fino, barra dorada con
     brillo, bolita elegante que crece al arrastrar, botones pulidos.
     ===================================================================== */
  .vip-player-ctrl{
    display:flex; flex-direction:column; gap:8px; width:min(94vw, 620px); margin-top:12px;
    padding:12px 18px 13px; border-radius:24px; position:relative; z-index:3;
    background:linear-gradient(180deg, rgba(30,21,42,0.9), rgba(15,10,23,0.95));
    border:1px solid rgba(245,212,136,0.16);
    box-shadow:0 20px 50px -22px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.05);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  }
  html[data-lite="1"] .vip-player-ctrl{backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(20,14,30,0.97);}
  .vip-pl-fila{display:flex; align-items:center; gap:10px;}
  /* v165d — con el botón ⤢ ya son 7: el espacio entre ellos se aprieta un
     poco para que quepan todos en un teléfono, y si el teléfono es MUY
     angosto se acomodan en dos renglones en vez de recortarse. */
  .vip-pl-fila.btns{justify-content:center; gap:8px; flex-wrap:wrap; row-gap:10px;}
  @media (min-width:430px){ .vip-pl-fila.btns{gap:12px;} }
  /* v165f — con el 📱 ya son 8 botones. En teléfonos angostos se achican un
     poquito para que quepan TODOS en un solo renglón (uno solito abajo se
     veía descolgado). El de play se queda grande, que es el importante. */
  @media (max-width:429px){
    .vip-pl-fila.btns{gap:5px;}
    .vip-pl-fila.btns .vpp.vel{width:auto; min-width:34px; padding:0 6px; font-size:12px;}
    .vip-pl-fila.btns .vpp{width:34px; height:34px;}
    .vip-pl-fila.btns .vpp svg{width:15px; height:15px;}
    .vip-pl-fila.btns .vpp:not(.gris){width:42px; height:42px;}
    .vip-pl-fila.btns .vpp:not(.gris) svg{width:18px; height:18px;}
  }
  .vpp{
    border:none; cursor:pointer; width:38px; height:38px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:14px; color:#1C1229;
    background:linear-gradient(135deg, #FFE9A8, #F2B93E 60%, #E8994A); font-family:inherit;
    transition:transform .12s ease, box-shadow .2s ease;
  }
  .vpp svg{width:17px; height:17px;}
  .vpp:not(.gris){width:44px; height:44px; box-shadow:0 8px 24px -8px rgba(242,185,62,0.65), inset 0 1px 0 rgba(255,255,255,0.5);}
  .vpp:not(.gris) svg{width:19px; height:19px;}
  .vpp.gris{
    background:rgba(255,255,255,0.06); color:var(--text); font-size:15px;
    border:1px solid rgba(255,255,255,0.08);
  }
  .vpp.gris svg{width:18px; height:18px;}
  .vpp.gris:hover{border-color:rgba(245,212,136,0.4); color:var(--gold-soft);}
  .vpp.vel{width:auto; min-width:46px; padding:0 12px; border-radius:999px; font-size:11.5px; font-weight:900; letter-spacing:0.04em;}
  .vpp:active{transform:scale(0.88);}
  html[data-lite="1"] .vpp{transition:none;}
  /* la barra que se arrastra */
  .vip-player-barra{
    flex:1; height:28px; display:flex; align-items:center; cursor:pointer; position:relative;
    touch-action:none;
  }
  .vip-player-barra::before{
    content:''; position:absolute; left:0; right:0; height:5px; border-radius:99px;
    background:rgba(255,255,255,0.12);
    box-shadow:inset 0 1px 2px rgba(0,0,0,0.4);
  }
  .vip-pl-buf{
    position:absolute; left:0; height:5px; width:0%; border-radius:99px;
    background:rgba(255,255,255,0.2);
  }
  .vip-player-prog{
    position:relative; height:5px; border-radius:99px; width:0%;
    background:linear-gradient(90deg, #FFE9A8, #F5D488 40%, #E8B94A); z-index:1;
    box-shadow:0 0 12px rgba(232,185,74,0.55);
  }
  .vip-pl-bolita{
    position:absolute; right:-8px; top:50%; width:16px; height:16px; margin-top:-8px; border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #FFFDF4, #FFE9A8 55%, #F2B93E);
    box-shadow:0 2px 10px rgba(0,0,0,0.65), 0 0 0 1.5px rgba(242,185,62,0.9), 0 0 14px rgba(232,185,74,0.45);
    transform:scale(0.68); transition:transform .16s cubic-bezier(.2,1.4,.4,1);
  }
  .vip-player-barra:active .vip-pl-bolita, .vip-player-barra.arrastrando .vip-pl-bolita{transform:scale(1.25);}
  .vip-player-barra.arrastrando .vip-player-prog{box-shadow:0 0 18px rgba(232,185,74,0.9);}
  html[data-lite="1"] .vip-pl-bolita{transition:none;}
  .vip-player-time{
    font-size:10.5px; font-weight:700; color:var(--text-faint); letter-spacing:0.05em;
    white-space:nowrap; font-variant-numeric:tabular-nums; min-width:34px; text-align:center;
  }
  .vip-player-time.ahora{color:var(--gold-soft);}
  /* ---- v125: GESTOS PRO — el HUD central (avanzar / volumen / brillo) ---- */
  .vip-pl-velo{position:absolute; inset:0; z-index:1; pointer-events:none; background:#000; opacity:0; transition:opacity .12s linear;}
  .vip-pl-hud{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:6; pointer-events:none;
    display:flex; align-items:center; gap:12px; padding:13px 17px; border-radius:16px;
    background:rgba(10,7,15,0.8); border:1px solid rgba(245,212,136,0.3); color:#fff;
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  }
  .vip-pl-hud[hidden]{display:none;}
  .vip-pl-hud > i{font-size:21px; color:var(--gold-soft);}
  .vip-pl-hud-barra{width:7px; height:86px; border-radius:99px; background:rgba(255,255,255,0.14); position:relative; overflow:hidden; display:block;}
  .vip-pl-hud-barra b{position:absolute; bottom:0; left:0; right:0; border-radius:99px; background:linear-gradient(180deg, #FFE9A8, #E8B94A);}
  .vip-pl-hud small{font-size:12px; font-weight:800; letter-spacing:0.04em; min-width:40px; text-align:center;}
  .vip-pl-hud-tiempo{display:flex; flex-direction:column; align-items:center; gap:2px;}
  .vip-pl-hud-tiempo b{font-size:27px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:0.03em;}
  .vip-pl-hud-tiempo small{font-size:12px; font-weight:700; color:var(--gold-soft); font-variant-numeric:tabular-nums;}
  html[data-lite="1"] .vip-pl-hud{backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(10,7,15,0.95);}
  /* ---- v125: "siguiente video" con estilo (cuenta regresiva elegante) ---- */
  .vip-pl-sig{
    position:absolute; right:14px; bottom:16px; z-index:6;
    display:flex; align-items:center; gap:11px; padding:11px 14px; border-radius:15px;
    background:rgba(10,7,15,0.86); border:1px solid rgba(245,212,136,0.35); color:#fff;
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    animation:fpSigEntra .25s var(--ease, ease) both;
  }
  @keyframes fpSigEntra{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
  .vip-pl-sig-aro{
    width:34px; height:34px; border-radius:50%; flex-shrink:0; position:relative;
    display:flex; align-items:center; justify-content:center; font-size:12px; color:#1C1229;
    background:conic-gradient(#F2B93E calc(var(--p, 0) * 1turn), rgba(255,255,255,0.15) 0);
  }
  .vip-pl-sig-aro::before{content:''; position:absolute; inset:3px; border-radius:50%; background:rgba(16,11,22,0.95);}
  .vip-pl-sig-aro b{position:relative; z-index:1; color:var(--gold-soft); font-size:12.5px; font-variant-numeric:tabular-nums;}
  .vip-pl-sig-txt{font-size:11.5px; font-weight:700; color:var(--text-dim); max-width:150px;}
  .vip-pl-sig-txt b{display:block; color:#fff; font-size:12px;}
  .vip-pl-sig button{
    border:1px solid rgba(255,255,255,0.2); background:none; color:var(--text-dim); cursor:pointer;
    font-family:inherit; font-size:10.5px; font-weight:800; padding:7px 11px; border-radius:999px;
  }
  html[data-lite="1"] .vip-pl-sig{animation:none; backdrop-filter:none; -webkit-backdrop-filter:none;}
  /* (las reglas viejas del reproductor vivían aquí — las sustituyó el bloque
     de la v116 de más arriba; dejarlas duplicadas rompía la barra) */
  .vip-cerrar{
    position:absolute; top:calc(14px + env(safe-area-inset-top, 0px)); right:16px; z-index:2; cursor:pointer;
    width:40px; height:40px; border-radius:50%; border:1px solid var(--line-strong);
    background:rgba(20,14,28,0.8); color:var(--text); font-size:16px;
  }
  /* v120 — marca de agua rediseñada: en vez de una frase larga que se
     cortaba, se repite el @ CORTO por muchos lados (legible) y el id va
     como línea fina debajo. Más chica, más densa, imposible de recortar. */
  .vip-marcas{
    position:absolute; inset:-25%; pointer-events:none; z-index:1; overflow:hidden;
    display:flex; flex-wrap:wrap; align-content:space-between; justify-content:space-between;
    gap:11vh 7vw; transform:rotate(-22deg);
  }
  .vip-marcas span{
    display:flex; flex-direction:column; align-items:center; line-height:1.15; white-space:nowrap;
  }
  .vip-marcas .wm-a{
    font-size:11px; font-weight:800; letter-spacing:0.04em; color:rgba(255,255,255,0.13);
    text-shadow:0 1px 3px rgba(0,0,0,0.6);
  }
  .vip-marcas .wm-b{
    font-size:8px; font-weight:600; letter-spacing:0.02em; color:rgba(255,255,255,0.09);
  }
  .vip-zona *, .vip-visor *{-webkit-touch-callout:none;}
  /* bloqueo con PIN (privacidad del cliente) */
  html.pin-bloqueado body{overflow:hidden;}
  .pin-lock{position:fixed; inset:0; z-index:100000; display:flex; align-items:center; justify-content:center;
    background:radial-gradient(ellipse 600px 500px at 50% 20%, rgba(124,58,237,0.3), transparent 60%), #08060D;}
  .pin-caja{text-align:center; padding:30px; width:min(340px,88vw);}
  .pin-caja.pin-error{animation:pinShake .4s;}
  @keyframes pinShake{0%,100%{transform:translateX(0);}25%{transform:translateX(-8px);}75%{transform:translateX(8px);}}
  .pin-corona{font-size:44px; margin-bottom:6px;}
  .pin-titulo{font-size:12px; font-weight:800; letter-spacing:0.3em; color:#B9AECF; margin-bottom:18px;}
  .pin-msg{font-size:13px; color:var(--text-dim); margin-bottom:18px;}
  .pin-puntos{display:flex; gap:14px; justify-content:center; margin-bottom:26px;}
  .pin-puntos span{width:15px; height:15px; border-radius:50%; border:2px solid var(--line-strong); transition:background .15s;}
  .pin-puntos span.on{background:var(--gold-soft); border-color:var(--gold-soft);}
  .pin-teclado{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
  .pin-teclado button{height:62px; border-radius:16px; border:1px solid var(--line-strong); cursor:pointer;
    background:rgba(255,255,255,0.04); color:var(--text); font-family:inherit; font-size:22px; font-weight:700;
    transition:background .12s, transform .1s;}
  .pin-teclado button:active{background:rgba(255,255,255,0.12); transform:scale(0.94);}
  .pin-huella{
    margin:14px auto 0; display:inline-flex; align-items:center; gap:8px; cursor:pointer;
    padding:12px 22px; border-radius:999px; border:1.5px solid rgba(232,185,74,0.55);
    background:rgba(232,185,74,0.1); color:#FFD97A; font-family:inherit; font-size:12.5px; font-weight:800; letter-spacing:0.05em;
  }
  .pin-huella:active{transform:scale(0.95);}

  /* 🎉 FIESTA DE DESBLOQUEO: se celebra cuando llega un acceso nuevo */
  .fiesta{position:fixed; inset:0; z-index:1420; display:flex; align-items:center; justify-content:center; padding:22px;
    background:rgba(8,5,14,0.88); backdrop-filter:blur(10px); opacity:0; pointer-events:none; transition:opacity .3s ease;}
  .fiesta.open{opacity:1; pointer-events:auto;}
  .fiesta-caja{position:relative; max-width:370px; width:100%; text-align:center; border-radius:26px; padding:36px 24px 26px; overflow:hidden;
    background:
      radial-gradient(ellipse 380px 220px at 50% 0%, rgba(232,185,74,0.2), transparent 62%),
      linear-gradient(165deg, #1D142B, #110B1B);
    border:1.5px solid rgba(232,185,74,0.65); box-shadow:0 30px 70px -22px rgba(232,185,74,0.5);
    transform:scale(0.92); transition:transform .35s var(--ease-bounce);}
  .fiesta.open .fiesta-caja{transform:scale(1);}
  .fiesta-corona{font-size:58px; line-height:1; animation:fiestaSalto 0.9s var(--ease-bounce) both 0.15s;}
  @keyframes fiestaSalto{0%{transform:scale(0) rotate(-18deg);} 62%{transform:scale(1.22) rotate(6deg);} 100%{transform:scale(1) rotate(0);}}
  .fiesta-titulo{font-family:'Fraunces', serif; font-size:25px; font-weight:600; margin:12px 0 8px;
    background:linear-gradient(120deg, #FFE9A8, #F2B93E 55%, #FF7AB8); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
  .fiesta-sub{font-size:13px; color:var(--text-dim); line-height:1.75; margin-bottom:20px;}
  .fiesta-sub b{color:#FFD97A;}
  .fiesta-btn{width:100%; padding:15px; border-radius:999px; border:none; cursor:pointer; font-family:inherit;
    font-size:13px; font-weight:800; letter-spacing:0.06em; color:#231303;
    background:linear-gradient(135deg, #FFE9A8, #F2B93E 60%, #E8894A);
    box-shadow:0 14px 32px -10px rgba(242,185,62,0.6);}
  .fiesta-btn:active{transform:scale(0.97);}
  .fiesta-luego{display:block; margin:13px auto 0; background:none; border:none; cursor:pointer;
    color:var(--text-faint); font-family:inherit; font-size:11.5px; font-weight:700;}

  /* marca FIJA del video (misma idea que la de las fotos): diagonal, tenue,
     completamente quieta — sin flash ni movimiento. Solo si está encendida
     en el panel; los controles quedan por encima (z-index 3). */
  .vip-video-sello{
    position:absolute; inset:-30%; z-index:2; pointer-events:none; overflow:hidden;
    display:flex; flex-wrap:wrap; align-content:space-around; justify-content:space-around;
    gap:9% 6%; transform:rotate(-22deg);
  }
  .vip-video-sello span{
    display:flex; flex-direction:column; align-items:center; line-height:1.2; white-space:nowrap;
  }
  .vip-video-sello .wm-a{
    font-size:11px; font-weight:800; letter-spacing:0.09em; color:rgba(255,255,255,0.15);
    text-shadow:0 1px 3px rgba(0,0,0,0.5);
  }
  .vip-video-sello .wm-b{
    font-size:8px; font-weight:600; letter-spacing:0.06em; color:rgba(255,255,255,0.1);
  }
  /* v125 — la marca del video MINIMAL ULTRA FINA (pedido de Luis): solo el
     @ en letra finísima y semitransparente en la esquina — sin caja, sin
     borde. Apenas se nota viendo… pero siempre está en cualquier grabación. */
  .vip-pl-pill{
    position:absolute; right:16px; bottom:18px; z-index:2; pointer-events:none;
  }
  .vip-pl-pill b{
    font-size:11px; font-weight:500; letter-spacing:0.24em;
    color:rgba(255,255,255,0.42);
    text-shadow:0 1px 3px rgba(0,0,0,0.4);
  }
  .vip-pl-pill small{display:none;}
  /* mantén presionado para ver: la foto va borrosa salvo con el dedo encima */
  .vip-hold{position:relative; display:flex; align-items:center; justify-content:center; cursor:pointer;}
  .vip-hold img{max-width:100vw; max-height:100vh; object-fit:contain; filter:blur(26px) brightness(0.7); transition:filter .18s ease; -webkit-user-select:none; user-select:none;}
  .vip-hold.viendo img{filter:none;}
  .vip-hold-tip{position:absolute; z-index:3; padding:9px 16px; border-radius:999px; font-size:12px; font-weight:800;
    letter-spacing:0.04em; color:#fff; background:rgba(20,14,28,0.85); border:1px solid var(--line-strong); backdrop-filter:blur(6px);}
  .vip-hold.viendo .vip-hold-tip{opacity:0;}

  /* ---- MODELO DE LA SEMANA (spotlight) ---- */
  .spotlight-section{padding:6px 0 34px;}
  .spotlight-section[hidden]{display:none !important;}
  .spotlight-card{
    position:relative; border-radius:22px; padding:1.5px; cursor:pointer; overflow:hidden;
    background:linear-gradient(150deg, color-mix(in srgb, var(--spc, #E8B94A) 70%, transparent), rgba(230,220,245,0.08) 45%, color-mix(in srgb, var(--spc, #9D5CFF) 45%, transparent));
    transition:transform .3s var(--ease), box-shadow .3s ease;
  }
  .spotlight-card:hover{transform:translateY(-3px); box-shadow:0 26px 54px -22px color-mix(in srgb, var(--spc, #E8B94A) 55%, transparent);}
  .spotlight-card:active{transform:scale(0.985);}
  /* estilo POST de Instagram: cabecera con avatar → foto grande → acciones → pie */
  .spotlight-inner{
    position:relative; border-radius:20.5px; overflow:hidden;
    background:linear-gradient(160deg, #1A1228, #130E1E);
  }
  .ig-head{display:flex; align-items:center; gap:11px; padding:13px 14px;}
  .ig-ava{
    width:44px; height:44px; border-radius:50%; background-size:cover; background-position:center top; flex-shrink:0;
    position:relative; z-index:0; border:3px solid #130E1E;
    display:flex; align-items:center; justify-content:center; font-family:'Fraunces', serif; font-size:18px; color:#fff;
    background-color:color-mix(in srgb, var(--spc, #9D5CFF) 55%, #000);
  }
  .ig-ava::before{
    content:''; position:absolute; inset:-5.5px; border-radius:50%; z-index:-1;
    background:conic-gradient(from 210deg, #F9CE34, #F2703E, #EE2A7B, #B44BD6, #6228D7, #F9CE34);
  }
  .ig-head-txt{display:flex; flex-direction:column; gap:2px; min-width:0;}
  .ig-user{font-size:14.5px; font-weight:800; color:var(--text); display:flex; align-items:center; gap:6px; text-transform:capitalize;}
  .ig-user i{color:#5FA8FF; font-size:14px;}
  .ig-sub{font-size:10px; font-weight:800; letter-spacing:0.1em; color:var(--spc, var(--gold-soft)); text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .ig-follow{
    margin-left:auto; flex-shrink:0; padding:8px 16px; border-radius:999px; font-size:11px; font-weight:800;
    letter-spacing:0.05em; text-transform:uppercase; color:#171022;
    background:color-mix(in srgb, var(--spc, #E8B94A) 90%, #fff);
    box-shadow:0 10px 22px -10px color-mix(in srgb, var(--spc, #E8B94A) 65%, transparent);
  }
  .ig-photo{position:relative; width:100%; aspect-ratio:1/1; max-height:380px; overflow:hidden; background:#0E0A16;}
  .ig-photo img{width:100%; height:100%; object-fit:cover; object-position:center 20%; display:block;}
  .ig-photo .ig-badge{
    position:absolute; top:12px; left:12px; font-size:9px; font-weight:800; letter-spacing:0.14em; text-transform:uppercase;
    color:#171022; background:color-mix(in srgb, var(--spc, #E8B94A) 92%, #fff); padding:6px 11px; border-radius:999px;
  }
  .ig-caption{padding:12px 15px 16px; font-size:13px; color:var(--text-dim); line-height:1.5;}
  .ig-caption b{color:var(--text); text-transform:capitalize; font-weight:800;}

  /* ---- brillo premium que recorre los botones dorados ---- */
  #heroBuyBtn, .vip-cta-btn, .ig-follow{position:relative; overflow:hidden;}
  #heroBuyBtn::after, .vip-cta-btn::after, .ig-follow::after{
    content:''; position:absolute; inset:0; transform:translateX(-130%); pointer-events:none;
    background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.35) 50%, transparent 62%);
    animation:vipShine 4.2s ease-in-out infinite;
  }
  html[data-lite="1"] #heroBuyBtn::after, html[data-lite="1"] .vip-cta-btn::after, html[data-lite="1"] .ig-follow::after{animation:none;}

  /* ---- esqueleto elegante mientras cargan las fotos del catálogo ---- */
  .card-media{
    background:linear-gradient(110deg, #1B1428 30%, #241A36 45%, #1B1428 60%);
    background-size:220% 100%; animation:fpSkeleton 1.6s ease-in-out infinite;
  }
  @keyframes fpSkeleton{ 0%{background-position:130% 0;} 100%{background-position:-90% 0;} }
  html[data-lite="1"] .card-media{animation:none;}

  /* ---- teaser VIP en la cuenta (candado que antoja) ---- */
  .vip-teaser{margin-top:12px;}
  .vip-teaser[hidden]{display:none !important;}
  .vip-teaser-tiles{display:grid; grid-template-columns:repeat(3, 1fr); gap:8px;}
  .vip-tile{
    position:relative; aspect-ratio:3/4; border-radius:12px; overflow:hidden;
    border:1px solid rgba(232,185,74,0.3); background:#141020;
  }
  .vip-tile img{width:100%; height:100%; object-fit:cover; object-position:center 20%; display:block; filter:blur(3px) saturate(1.15); pointer-events:none;}
  .vip-tile i{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-size:20px; color:var(--gold-soft); text-shadow:0 2px 12px rgba(0,0,0,0.8);
    background:radial-gradient(ellipse 70px 70px at 50% 50%, rgba(10,7,16,0.35), transparent);
  }
  .vip-teaser-txt{margin-top:9px; text-align:center; font-size:11px; color:var(--text-dim); letter-spacing:0.03em;}
  .vip-teaser-txt b{color:var(--gold-soft);}

  /* ---- promoción de la zona VIP en la página (para visitantes) ---- */
  .vip-promo-section{padding:0 0 90px;}
  .vip-promo-marco{
    border-radius:24px; padding:1.5px;
    background:linear-gradient(155deg, rgba(232,185,74,0.6), rgba(230,220,245,0.08) 40%, rgba(157,92,255,0.5));
  }
  .vip-promo-inner{
    border-radius:22.5px; padding:34px 26px; text-align:center; overflow:hidden; position:relative;
    background:
      radial-gradient(ellipse 420px 200px at 50% -20%, rgba(232,185,74,0.14), transparent 65%),
      radial-gradient(ellipse 360px 220px at 8% 110%, rgba(157,92,255,0.14), transparent 65%),
      linear-gradient(180deg, #201731, #130E1E);
  }
  .vip-promo-texto{font-size:13px; color:var(--text-dim); line-height:1.75; max-width:520px; margin:10px auto 20px;}
  .vip-promo-texto b, .vip-promo-texto span b{color:var(--gold-soft);}
  .vip-promo-tiles{display:flex; justify-content:center; gap:10px; margin-bottom:22px;}
  .vip-promo-tile{
    width:76px; aspect-ratio:3/4; border-radius:13px; position:relative; overflow:hidden;
    display:flex; align-items:center; justify-content:center; font-size:19px;
    color:color-mix(in srgb, var(--vt, #E8B94A) 85%, #fff);
    border:1px solid color-mix(in srgb, var(--vt, #E8B94A) 45%, transparent);
    background:
      radial-gradient(ellipse 60px 50px at 50% 35%, color-mix(in srgb, var(--vt, #E8B94A) 30%, transparent), transparent 75%),
      linear-gradient(170deg, #241A36, #120D1C);
  }
  .vip-promo-tile::after{
    content:''; position:absolute; inset:0; transform:translateX(-120%);
    background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.09) 50%, transparent 65%);
    animation:vipShine 3.6s ease-in-out infinite;
  }
  .vip-promo-tile:nth-child(2)::after{animation-delay:.5s;}
  .vip-promo-tile:nth-child(3)::after{animation-delay:1s;}
  .vip-promo-tile:nth-child(4)::after{animation-delay:1.5s;}
  @keyframes vipShine{ 0%{transform:translateX(-120%);} 55%, 100%{transform:translateX(120%);} }
  .vip-promo-nota{margin-top:12px; font-size:10.5px; color:var(--text-faint); letter-spacing:0.04em;}
  html[data-lite="1"] .vip-promo-tile::after{animation:none;}

  /* ---- vitrina VIP dentro del perfil de la modelo ---- */
  .star-vip{margin:18px 0 4px;}
  .star-vip[hidden]{display:none !important;}
  .star-vip-inner{
    position:relative; border-radius:18px; padding:18px; overflow:hidden;
    border:1px solid color-mix(in srgb, var(--svc, #E8B94A) 45%, transparent);
    background:
      radial-gradient(ellipse 320px 130px at 12% -20%, color-mix(in srgb, var(--svc, #E8B94A) 18%, transparent), transparent 70%),
      linear-gradient(180deg, rgba(30,21,44,0.92), rgba(18,13,27,0.96));
  }
  .star-vip-head{
    display:flex; align-items:center; gap:9px; flex-wrap:wrap;
    font-size:12px; font-weight:800; letter-spacing:0.12em; color:var(--svc, var(--gold-soft));
  }
  .star-vip-head i{font-size:16px;}
  .star-vip-conteo{
    margin-left:auto; font-size:9.5px; letter-spacing:0.1em; padding:5px 11px; border-radius:999px;
    color:var(--text-dim); border:1px solid var(--line-strong); background:rgba(255,255,255,0.04); white-space:nowrap;
  }
  .star-vip-txt{font-size:12px; color:var(--text-dim); line-height:1.65; margin:10px 0 12px;}
  .star-vip .vip-teaser-tiles{margin:12px 0 0;}
  .star-vip-btn{
    display:inline-flex; align-items:center; gap:8px; border:none; cursor:pointer; width:100%;
    justify-content:center; padding:13px 18px; border-radius:13px; font-family:inherit;
    font-size:11.5px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase;
    color:#1C1229; background:linear-gradient(135deg, color-mix(in srgb, var(--svc, #E8B94A) 70%, #FFE9A8), var(--svc, #E8B94A));
    box-shadow:0 12px 26px -10px color-mix(in srgb, var(--svc, #E8B94A) 60%, transparent);
    transition:transform .15s ease;
  }
  .star-vip-btn:active{transform:scale(0.97);}
  .star-vip-inner.sin .star-vip-btn{margin-top:12px;}
  /* botón de adelanto (trailer) en el perfil bloqueado */
  .star-trailer-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; cursor:pointer;
    margin-top:12px; border:1px solid var(--line-strong); background:rgba(255,255,255,0.05); color:var(--text);
    padding:11px 16px; border-radius:12px; font-family:inherit; font-size:11.5px; font-weight:800; letter-spacing:0.06em;
    transition:transform .15s ease, background .2s ease;}
  .star-trailer-btn:hover{background:rgba(255,255,255,0.1);}
  .star-trailer-btn:active{transform:scale(0.97);}
  /* tienda: comprar SOLO a este modelo */
  .star-tienda{margin-top:12px;}
  .star-tienda-o{text-align:center; font-size:10px; font-weight:800; letter-spacing:0.2em; color:var(--text-faint); margin:2px 0 10px;}
  .star-tienda-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; cursor:pointer;
    border:1px solid var(--gold-soft); background:rgba(232,185,74,0.08); color:var(--gold-soft);
    padding:12px 16px; border-radius:13px; font-family:inherit; font-size:11.5px; font-weight:800;
    letter-spacing:0.06em; transition:transform .15s ease, background .2s ease;}
  .star-tienda-btn:hover{background:rgba(232,185,74,0.14);}
  .star-tienda-btn:active{transform:scale(0.97);}
  .star-tienda-nota{text-align:center; font-size:10px; color:var(--text-faint); margin-top:7px;}
  .pp-box{margin-top:12px;}
  .pp-cargando{text-align:center; font-size:11px; color:var(--text-dim); padding:8px;}
  .vip-tile.deco{
    display:flex; align-items:center; justify-content:center; font-size:20px;
    color:color-mix(in srgb, var(--vt, #E8B94A) 85%, #fff);
    background:
      radial-gradient(ellipse 70px 60px at 50% 40%, color-mix(in srgb, var(--vt, #E8B94A) 25%, transparent), transparent 75%),
      linear-gradient(170deg, #241A36, #120D1C);
    border-color:color-mix(in srgb, var(--vt, #E8B94A) 40%, transparent);
  }
  .unlock-btn.pulso{animation:pulsoUnlock 0.55s ease-in-out 2;}
  @keyframes pulsoUnlock{ 50%{transform:scale(1.05); box-shadow:0 0 0 8px rgba(232,185,74,0.18);} }

  /* ---- pestaña 🎁 regalos de la zona VIP ---- */
  .vip-regalo{
    display:flex; flex-direction:column; border-radius:18px; overflow:hidden; margin-bottom:16px;
    border:1px solid rgba(232,185,74,0.35);
    background:linear-gradient(180deg, rgba(36,26,49,0.92), rgba(19,13,30,0.96));
    animation:vipEntra .5s var(--ease, ease) both;
  }
  .vip-regalo-img{border:none; padding:0; cursor:pointer; display:block; background:#120D1C; max-height:260px; overflow:hidden;}
  .vip-regalo-img img{width:100%; height:100%; object-fit:cover; display:block; pointer-events:none;}
  .vip-regalo-body{padding:16px 18px;}
  .vip-regalo-titulo{font-family:'Fraunces', serif; font-size:17px; font-weight:600; color:var(--gold-soft); margin-bottom:6px;}
  .vip-regalo-body p{font-size:12.5px; color:var(--text-dim); line-height:1.7; margin-bottom:8px; white-space:pre-line;}
  .vip-regalo-body small{font-size:9.5px; font-weight:800; letter-spacing:0.1em; color:var(--text-faint); text-transform:uppercase;}

  /* ---- pestaña ✨ novedades de la zona VIP ---- */
  .vip-novedades{display:flex; flex-direction:column; gap:10px;}
  .vip-nueva{
    display:flex; align-items:center; gap:13px; text-align:left; cursor:pointer;
    padding:12px 14px; border-radius:16px; font-family:inherit;
    border:1px solid color-mix(in srgb, var(--vnc, #E8B94A) 35%, transparent);
    background:linear-gradient(120deg, color-mix(in srgb, var(--vnc, #E8B94A) 7%, transparent), rgba(19,13,30,0.9));
    animation:vipEntra .5s var(--ease, ease) both; transition:transform .2s ease;
  }
  .vip-nueva:active{transform:scale(0.98);}
  .vip-nueva-foto{
    width:52px; height:52px; border-radius:14px; overflow:hidden; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-family:'Fraunces', serif; font-size:20px; color:#fff;
    background:linear-gradient(135deg, color-mix(in srgb, var(--vnc, #9D5CFF) 70%, #000), #1A1228);
    box-shadow:0 0 0 2px #130E1E, 0 0 0 3.5px color-mix(in srgb, var(--vnc, #E8B94A) 60%, transparent);
  }
  .vip-nueva-foto img{width:100%; height:100%; object-fit:cover; object-position:center 20%;}
  .vip-nueva-info{flex:1; min-width:0;}
  .vip-nueva-info b{display:block; font-family:'Fraunces', serif; font-size:16px; font-weight:600; color:var(--text); text-transform:capitalize;}
  .vip-nueva-info small{font-size:9.5px; font-weight:800; letter-spacing:0.1em; color:var(--vnc, var(--gold-soft)); text-transform:uppercase;}
  .vip-nueva > i{color:var(--text-faint);}

  /* ---- explosión aurora del tabbar ---- */
  .tab-burst{
    position:fixed; width:16px; height:16px; border-radius:50%; pointer-events:none; z-index:59;
    transform:translate(-50%, -50%); filter:blur(2px);
    background:radial-gradient(circle, color-mix(in srgb, var(--tb-c, #9D5CFF) 85%, #fff) 0%, color-mix(in srgb, var(--tb-c, #9D5CFF) 45%, transparent) 45%, transparent 72%);
    animation:tabBurst 0.75s var(--ease, ease-out) forwards;
  }
  @keyframes tabBurst{
    0%{transform:translate(-50%, -50%) scale(1); opacity:0.9;}
    100%{transform:translate(-50%, -50%) scale(26); opacity:0;}
  }

  /* ---- TEMA VIP DORADO: la interfaz del cliente se viste de gala ---- */
  html.tema-vip nav#top{border-bottom-color:rgba(232,185,74,0.4);}
  html.tema-vip .brand-tag{color:#F5D488; border-color:rgba(232,185,74,0.5); background:rgba(232,185,74,0.08);}
  html.tema-vip .mobile-tabbar{border-top-color:rgba(232,185,74,0.4);}
  html.tema-vip .mobile-tabbar::before{background:linear-gradient(90deg, transparent 4%, rgba(232,185,74,0.75), rgba(255,217,122,0.55), rgba(232,185,74,0.75), transparent 96%);}
  html.tema-vip .tab-item.active{color:#F5D488;}
  html.tema-vip .tab-center-btn{background:linear-gradient(135deg, #FFE9A8, #F2B93E 55%, #E8894A); box-shadow:0 10px 26px -8px rgba(232,185,74,0.65);}
  html.tema-vip .tab-center-btn::before{background:conic-gradient(from 0deg, rgba(232,185,74,0), rgba(232,185,74,0.6), rgba(255,217,122,0.5), rgba(232,185,74,0));}
  html.tema-vip .section-eyebrow{color:#F5D488;}
  html.tema-vip .aurora i{filter:hue-rotate(288deg) saturate(1.15) brightness(1.05);}
  html.tema-vip .acc-nav-btn.con-sesion{box-shadow:0 0 0 2px rgba(232,185,74,0.65);}
  html.tema-vip body{
    background:
      radial-gradient(ellipse 900px 480px at 85% -10%, rgba(232,185,74,0.07), transparent 60%),
      var(--bg);
  }

  /* nota de términos bajo los métodos de pago */
  .terminos-nota{
    display:flex; align-items:flex-start; gap:10px; margin-top:16px;
    padding:14px 18px; border-radius:14px; font-size:11.5px; line-height:1.7; color:var(--text-faint);
    background:rgba(157,92,255,0.05); border:1px dashed rgba(157,92,255,0.35); letter-spacing:0.02em;
  }
  .terminos-nota i{color:var(--purple-soft); font-size:17px; margin-top:2px;}
  .terminos-nota b{color:var(--gold-soft);}
  .terminos-nota a{color:var(--purple-soft); font-weight:700;}
  .support-card[hidden]{display:none !important;}
  .sc-comprobante .sc-icon{background:rgba(61,231,214,0.12); color:var(--cyan);}

  /* ¿POR QUÉ ELEGIRNOS? — tarjetas con número de agua y acento de color */
  .why-section{padding:0 0 90px;}
  .why-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px;}
  .why-card{
    position:relative; overflow:hidden; padding:24px 22px; border-radius:16px;
    background:var(--surface); border:1px solid var(--line);
    transition:transform 0.3s var(--ease), border-color 0.3s ease, box-shadow 0.3s ease;
  }
  .why-card:hover{transform:translateY(-4px); border-color:var(--line-strong); box-shadow:0 18px 38px -20px rgba(0,0,0,0.45);}
  .why-num{
    position:absolute; top:12px; right:16px; font-family:'Fraunces', serif; font-size:42px; font-weight:700;
    line-height:1; color:transparent; -webkit-text-stroke:1.5px var(--line-strong);
    -webkit-user-select:none; user-select:none; pointer-events:none;
  }
  @supports not (-webkit-text-stroke: 1px black){ .why-num{color:var(--line-strong);} }
  .why-icon{
    width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center;
    font-size:21px; margin-bottom:14px; color:var(--wc, var(--purple));
    background:rgba(139,92,246,0.1); border:1px solid var(--line-strong);
    background:color-mix(in srgb, var(--wc, #9D5CFF) 13%, transparent);
    border-color:color-mix(in srgb, var(--wc, #9D5CFF) 38%, transparent);
    transition:transform 0.3s var(--ease-bounce);
  }
  .why-card:hover .why-icon{transform:scale(1.12) rotate(-6deg);}
  .why-card h3{font-size:15px; font-weight:600; margin-bottom:7px; color:var(--text);}
  .why-card p{font-size:12.5px; color:var(--text-dim); line-height:1.65;}
  /* aparición escalonada al entrar en pantalla */
  .reveal .why-card{opacity:0; transform:translateY(16px) scale(0.98); transition:opacity 0.55s var(--ease), transform 0.55s var(--ease-bounce);}
  .reveal.in-view .why-card{opacity:1; transform:translateY(0) scale(1);}
  .why-card:nth-child(1){transition-delay:0.05s;} .why-card:nth-child(2){transition-delay:0.12s;}
  .why-card:nth-child(3){transition-delay:0.19s;} .why-card:nth-child(4){transition-delay:0.26s;}
  .why-card:nth-child(5){transition-delay:0.33s;} .why-card:nth-child(6){transition-delay:0.40s;}

  /* ESTADÍSTICAS */
  .stats-section{padding:0 0 90px;}
  .stats-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden;}
  .stat{background:var(--surface); padding:32px 26px; position:relative; transition:background 0.3s ease; overflow:hidden;}
  .stat:hover{background:var(--surface-2);}
  .stat-icon{
    width:40px; height:40px; border-radius:11px; background:linear-gradient(135deg, rgba(157,92,255,0.22), rgba(255,79,163,0.14));
    display:flex; align-items:center; justify-content:center; color:var(--purple); margin-bottom:20px; font-size:19px;
    transition:transform 0.4s var(--ease-bounce); animation:iconPulse 3.5s ease-in-out infinite; box-shadow:0 0 0 1px var(--line-strong);
  }
  @keyframes iconPulse{ 0%,100%{box-shadow:0 0 0 1px var(--line-strong);} 50%{box-shadow:0 0 0 4px var(--purple-glow);} }
  .stat:hover .stat-icon{transform:scale(1.15) rotate(-8deg);}
  .stat-num{
    font-family:'Fraunces', serif; font-size:clamp(30px, 3.6vw, 40px); font-weight:600; letter-spacing:-0.01em;
    background:linear-gradient(135deg, var(--text), var(--gold-soft)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  }
  .stat-label{font-size:13px; color:var(--text-faint); margin-top:8px; line-height:1.5; max-width:220px;}
  .stat-live{
    display:inline-flex; align-items:center; gap:5px; margin-top:8px;
    font-size:11.5px; font-weight:700; color:var(--cyan); letter-spacing:0.02em;
  }
  .stat-live i{font-size:13px;}
  .stat-live b{color:var(--text); font-variant-numeric:tabular-nums;}
  .stat-live::before{
    content:''; width:7px; height:7px; border-radius:50%; background:var(--cyan);
    box-shadow:0 0 0 0 var(--cyan); animation:livePulse 1.8s ease-out infinite;
  }
  @keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(61,231,214,0.5);} 100%{box-shadow:0 0 0 8px rgba(61,231,214,0);}}

  /* CANALES PÚBLICOS — banda compacta con pastillas (antes tarjetas grandes) */
  .channels-section{padding:0 0 70px;}
  .red-band{
    display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
    padding:18px 22px; border-radius:18px;
    background:var(--surface); border:1px solid var(--line);
    position:relative; overflow:hidden;
  }
  .red-band::before{
    content:''; position:absolute; top:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg, transparent, rgba(95,168,255,0.5), transparent);
  }
  .red-band-eyebrow{
    display:flex; align-items:center; gap:6px; font-size:9.5px; letter-spacing:0.18em;
    font-weight:800; color:var(--text-faint); margin-bottom:5px;
  }
  .red-band-eyebrow i{color:#5FA8FF; font-size:13px;}
  .red-band-title{font-family:'Fraunces', serif; font-size:15px; font-weight:600; color:var(--text); text-transform:none; letter-spacing:0.02em;}
  .red-pills{display:flex; gap:8px; flex-wrap:wrap;}
  .red-pill{
    display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:999px;
    font-size:10.5px; font-weight:800; letter-spacing:0.08em; color:var(--text-dim);
    background:rgba(95,168,255,0.07); border:1px solid rgba(95,168,255,0.28);
    transition:all 0.22s var(--ease);
  }
  .red-pill i{color:#5FA8FF; font-size:14px;}
  .red-pill:hover{border-color:#5FA8FF; color:var(--text); transform:translateY(-2px); box-shadow:0 8px 18px -10px rgba(95,168,255,0.5);}
  .red-pill:active{transform:scale(0.95);}
  /* miembros por canal público (dato real del bot) */
  .red-pill-count{
    font-size:10px; font-weight:800; padding:2px 8px; border-radius:999px; margin-left:2px;
    background:rgba(95,168,255,0.14); color:#5FA8FF; font-variant-numeric:tabular-nums;
  }
  /* total combinado: "nos respalda toda una comunidad" */
  .red-total{
    display:flex; align-items:center; gap:7px; margin-top:10px;
    font-size:11px; font-weight:700; letter-spacing:0.05em; color:var(--text-dim);
  }
  .red-total i{color:var(--cyan); font-size:16px;}
  .red-total b{
    font-family:'Fraunces', serif; font-size:22px; font-weight:600; line-height:1;
    background:linear-gradient(120deg, var(--cyan), #5FA8FF);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    font-variant-numeric:tabular-nums;
  }

  /* PRECIOS POR CANAL */
  .pricing-section{padding:50px 0 40px;}
  .pricing-note{font-size:14px; color:var(--text-dim); max-width:580px; margin-top:12px; line-height:1.65;}
  .pricing-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px; margin-top:8px;}
  .price-card{
    background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:22px 20px;
    display:flex; flex-direction:column; gap:14px;
    transition:transform 0.3s var(--ease), border-color 0.3s ease, box-shadow 0.3s ease;
  }
  .price-card:hover{transform:translateY(-4px); border-color:var(--purple); box-shadow:0 20px 36px -20px rgba(139,92,246,0.4);}
  .price-card-head{display:flex; align-items:center; gap:10px;}
  .price-card-icon{width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0;}
  .price-card-name{font-family:'Fraunces', serif; font-size:17px; font-weight:600; text-transform:capitalize;}
  .price-card-count{font-size:11.5px; color:var(--text-faint); margin-top:2px;}
  .price-card-amount{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;}
  .price-card-mxn{font-family:'Fraunces', serif; font-size:24px; font-weight:600; color:var(--text);}
  /* precio anterior tachado + precio de promo (estas clases se generaban
     desde JS pero nunca tuvieron estilo: se veían pegadas y sin tachar) */
  .price-card-mxn .price-old{
    font-family:'Inter', sans-serif; font-size:13px; font-weight:600; color:var(--text-faint);
    text-decoration:line-through; text-decoration-color:rgba(255,79,163,0.75); text-decoration-thickness:1.5px;
    margin-right:8px; vertical-align:2px;
  }
  .price-card-mxn .price-new{color:var(--gold-soft);}
  .price-card-usd{font-size:12px; color:var(--text-faint);}
  .price-card-perm{
    font-size:10.5px; letter-spacing:0.05em; font-weight:700; color:var(--gold);
    display:flex; align-items:center; gap:5px;
  }

  /* =========================================================
     TARJETAS DE CATEGORÍA PREMIUM — cada canal con su color
     ========================================================= */
  .price-card{position:relative; overflow:hidden;}
  .price-card::before{
    content:''; position:absolute; inset:0; pointer-events:none; opacity:0;
    background:linear-gradient(100deg, transparent 35%, rgba(255,255,255,0.09) 48%, transparent 62%);
    background-size:200% 100%; background-position:150% 0;
    transition:opacity 0.4s ease, background-position 0.9s ease;
  }
  .price-card:hover::before{opacity:1; background-position:-60% 0;}
  .price-card .price-card-name{display:flex; align-items:center; gap:6px;}

  /* ORO */
  .price-card[data-ch="oro"]{
    border:1px solid transparent;
    background:
      linear-gradient(160deg, rgba(217,178,74,0.10), var(--surface) 45%) padding-box,
      linear-gradient(140deg, rgba(217,178,74,0.8), rgba(217,178,74,0.15)) border-box;
  }
  .price-card[data-ch="oro"]:hover{box-shadow:0 20px 40px -18px rgba(217,178,74,0.4); border-color:transparent;}
  /* BRONCE */
  .price-card[data-ch="bronce"]{
    border:1px solid transparent;
    background:
      linear-gradient(160deg, rgba(192,133,82,0.10), var(--surface) 45%) padding-box,
      linear-gradient(140deg, rgba(192,133,82,0.8), rgba(192,133,82,0.15)) border-box;
  }
  .price-card[data-ch="bronce"]:hover{box-shadow:0 20px 40px -18px rgba(192,133,82,0.4); border-color:transparent;}
  /* DIAMANTE */
  .price-card[data-ch="diamond"]{
    border:1px solid transparent;
    background:
      linear-gradient(160deg, rgba(127,216,232,0.10), var(--surface) 45%) padding-box,
      linear-gradient(140deg, rgba(127,216,232,0.8), rgba(127,216,232,0.15)) border-box;
  }
  .price-card[data-ch="diamond"]:hover{box-shadow:0 20px 40px -18px rgba(127,216,232,0.4); border-color:transparent;}
  /* ESTELAR — tema espacial con estrellitas */
  .price-card[data-ch="estelar"]{
    border:1px solid transparent;
    background:
      radial-gradient(1.5px 1.5px at 18% 22%, rgba(255,255,255,0.9), transparent 55%),
      radial-gradient(1px 1px at 62% 14%, rgba(255,255,255,0.7), transparent 55%),
      radial-gradient(1.5px 1.5px at 82% 48%, rgba(183,156,240,0.95), transparent 55%),
      radial-gradient(1px 1px at 36% 70%, rgba(255,255,255,0.6), transparent 55%),
      radial-gradient(1.5px 1.5px at 74% 84%, rgba(127,216,232,0.8), transparent 55%),
      linear-gradient(160deg, #1B1440, #241A31 55%, #170F2E) padding-box,
      linear-gradient(140deg, rgba(183,156,240,0.85), rgba(94,68,180,0.3)) border-box;
  }
  .price-card[data-ch="estelar"]::after{
    content:''; position:absolute; inset:0; pointer-events:none;
    background:
      radial-gradient(1px 1px at 48% 34%, rgba(255,255,255,0.85), transparent 55%),
      radial-gradient(1.5px 1.5px at 12% 82%, rgba(183,156,240,0.8), transparent 55%),
      radial-gradient(1px 1px at 90% 20%, rgba(255,255,255,0.75), transparent 55%);
    animation:twinkle 3.2s ease-in-out infinite;
  }
  @keyframes twinkle{0%,100%{opacity:0.25;} 50%{opacity:1;}}
  .price-card[data-ch="estelar"] .price-card-name,
  .price-card[data-ch="estelar"] .price-card-mxn{color:#F3EEF9;}
  .price-card[data-ch="estelar"] .price-card-count{color:#B4A6C4;}
  .price-card[data-ch="estelar"]:hover{box-shadow:0 20px 44px -18px rgba(183,156,240,0.5); border-color:transparent;}
  /* STARSIGHT */
  .price-card[data-ch="starsight"]{
    border:1px solid transparent;
    background:
      linear-gradient(160deg, rgba(240,166,196,0.10), var(--surface) 45%) padding-box,
      linear-gradient(140deg, rgba(240,166,196,0.85), rgba(157,92,255,0.35)) border-box;
  }
  .price-card[data-ch="starsight"]:hover{box-shadow:0 20px 40px -18px rgba(240,166,196,0.45); border-color:transparent;}
  [data-theme="light"] .price-card[data-ch="estelar"]{
    background:
      radial-gradient(1.5px 1.5px at 18% 22%, rgba(255,255,255,0.95), transparent 55%),
      radial-gradient(1.5px 1.5px at 82% 48%, rgba(220,205,255,0.95), transparent 55%),
      radial-gradient(1px 1px at 36% 70%, rgba(255,255,255,0.8), transparent 55%),
      linear-gradient(160deg, #2A1F55, #372A5E 55%, #241A4A) padding-box,
      linear-gradient(140deg, rgba(140,110,220,0.9), rgba(94,68,180,0.4)) border-box;
  }

  /* filas del catálogo con acento sutil de su color */
  .catalog-row:not(.starsight-row){
    position:relative; padding:22px 0 18px; border-radius:20px;
    border:1px solid var(--line);
    background:linear-gradient(180deg, var(--ch-tint, transparent), transparent 55%), var(--surface);
  }
  .catalog-row:not(.starsight-row)::before{
    content:''; position:absolute; top:0; left:28px; right:28px; height:2px; border-radius:2px;
    background:linear-gradient(90deg, var(--ch-color, var(--purple)), transparent 70%);
    opacity:0.55;
  }

  /* MÉTODOS DE PAGO */
  .payment-section{padding:40px 0 60px;}
  .payment-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:14px; margin-top:8px;}
  .payment-card{
    background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px 16px;
    display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px;
    transition:transform 0.3s var(--ease), border-color 0.3s ease;
  }
  .payment-card:hover{transform:translateY(-3px); border-color:var(--purple);}
  .payment-icon{width:44px; height:44px; border-radius:12px; background:rgba(139,92,246,0.14); color:var(--purple); display:flex; align-items:center; justify-content:center; font-size:21px;}
  .payment-name{font-size:13.5px; font-weight:600; color:var(--text);}
  .payment-region{font-size:10px; letter-spacing:0.06em; color:var(--text-faint); text-transform:uppercase;}
  .trust-bar{
    display:flex; flex-wrap:wrap; gap:12px 28px; justify-content:center; margin-top:28px;
    padding-top:24px; border-top:1px solid var(--line);
  }
  .trust-item{
    display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--text-dim);
  }
  .trust-item i{color:var(--gold); font-size:16px;}

  /* SOPORTE */
  .support-section{padding:30px 0 110px;}
  .support-layout{display:grid; grid-template-columns:1.15fr 0.85fr; gap:48px; align-items:start;}
  .faq-list{display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden;}
  .faq-item{background:var(--bg);}
  .faq-question{
    width:100%; text-align:left; padding:20px 22px; display:flex; align-items:center; justify-content:space-between;
    gap:16px; cursor:pointer; background:none; border:none; color:var(--text); font-family:'Inter', sans-serif;
    text-transform:uppercase; font-size:14.5px; font-weight:600; transition:background 0.25s ease;
  }
  .faq-question:hover{background:var(--surface);}
  .faq-question .plus{
    flex-shrink:0; width:26px; height:26px; border-radius:50%; border:1px solid var(--line-strong);
    display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:14px;
    transition:transform 0.3s var(--ease), background 0.25s ease;
  }
  .faq-item.open .faq-question .plus{transform:rotate(135deg); background:var(--purple); border-color:var(--purple); color:#fff;}
  .faq-answer{
    max-height:0; overflow:hidden; transition:max-height 0.4s var(--ease);
  }
  .faq-answer-inner{padding:0 22px 20px; font-size:13.5px; line-height:1.7; color:var(--text-dim); max-width:560px;}
  .step-badge{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:26px; height:26px; border-radius:8px; margin-right:10px;
    font-family:'Fraunces', serif; font-size:12px; font-weight:600;
    background:rgba(139,92,246,0.14); color:var(--purple); flex-shrink:0;
  }

  .support-side{display:flex; flex-direction:column; gap:16px;}
  .support-card{
    background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:24px;
    transition:border-color 0.3s ease, transform 0.3s var(--ease), box-shadow 0.3s ease;
  }
  .support-card:hover{border-color:var(--purple); transform:translateY(-3px); box-shadow:0 20px 36px -20px rgba(139,92,246,0.4);}
  .support-card .sc-icon{
    width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center;
    background:rgba(139,92,246,0.14); color:var(--purple); font-size:19px; margin-bottom:16px;
  }
  .support-card.gold .sc-icon{background:rgba(201,162,75,0.16); color:var(--gold);}
  .support-card h3{font-size:15px; font-weight:600; margin-bottom:6px;}
  .support-card p{font-size:13px; color:var(--text-dim); line-height:1.6; margin-bottom:14px;}
  .support-card .sc-link{
    font-size:12.5px; font-weight:600; color:var(--text); display:inline-flex; align-items:center; gap:6px;
    padding:9px 16px; border-radius:999px; border:1px solid var(--line-strong); transition:all 0.22s var(--ease);
  }
  .support-card .sc-link:hover{background:var(--purple); border-color:var(--purple); color:#fff; transform:translateX(2px);}
  .support-note{font-size:11.5px; color:var(--text-faint); line-height:1.6; padding:14px 16px; border:1px dashed var(--line-strong); border-radius:12px; display:flex; align-items:flex-start; gap:8px;}

  footer{border-top:1px solid var(--line); padding:36px 0;}
  footer .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;}
  footer .fine{font-size:12px; color:var(--text-faint); max-width:520px; line-height:1.6;}

  /* BARRA MÓVIL INFERIOR */
  /* DOCK FLOTANTE premium: barra despegada del borde, redondeada, con
     vidrio esmerilado y filo degradado — se siente app cara, no web */
  .mobile-tabbar{
    display:none; position:fixed; top:auto; z-index:60;
    left:max(10px, env(safe-area-inset-left)); right:max(10px, env(safe-area-inset-right));
    bottom:calc(10px + env(safe-area-inset-bottom));
    background:rgba(17,12,26,0.86); backdrop-filter:blur(22px) saturate(150%); -webkit-backdrop-filter:blur(22px) saturate(150%);
    border-radius:26px; border:1px solid rgba(230,220,245,0.1);
    padding:8px 8px;
    justify-content:space-around; align-items:center;
    box-shadow:0 18px 44px -14px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,255,255,0.06);
    max-width:560px; margin:0 auto;
  }
  /* filo degradado de marca alrededor del dock */
  .mobile-tabbar::before{
    content:''; position:absolute; inset:-1px; border-radius:27px; pointer-events:none; z-index:-1;
    background:linear-gradient(120deg, rgba(157,92,255,0.5), rgba(230,220,245,0.06) 30%, rgba(255,79,163,0.35) 55%, rgba(230,220,245,0.06) 78%, rgba(232,185,74,0.45));
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude; padding:1px;
  }
  .tab-item{
    display:flex; flex-direction:column; align-items:center; gap:3px; padding:7px 8px 6px; border-radius:13px;
    color:var(--text-faint); font-size:9.5px; font-weight:600; letter-spacing:0.02em;
    transition:color 0.22s var(--ease), background 0.22s var(--ease); flex:1; position:relative;
  }
  .tab-item i{font-size:20px; transition:transform 0.3s var(--ease-bounce);}
  .tab-item.active{color:var(--purple);}
  .tab-item.active i{transform:translateY(-2px) scale(1.12); filter:drop-shadow(0 4px 10px var(--purple-glow));}
  .tab-item.active{background:linear-gradient(135deg, rgba(201,207,218,0.14), rgba(154,163,181,0.08));}
  /* puntito indicador bajo el ítem activo */
  .tab-item.active::after{
    content:''; position:absolute; bottom:1px; left:50%; transform:translateX(-50%);
    width:4px; height:4px; border-radius:50%; background:var(--purple);
  }
  .tab-item:active i{transform:scale(0.82);}
  .tab-item.tab-cta{color:var(--gold);}
  .tab-item.tab-cta.active{background:rgba(232,185,74,0.12);}
  .tab-item.tab-cta.active::after{background:var(--gold);}
  .tab-item-btn{background:none; border:none; font-family:inherit; cursor:pointer;}
  /* ---- botón CENTRAL del catálogo: elevado, con degradado y halo ---- */
  .tab-item.tab-center{overflow:visible; gap:4px;}
  .tab-center-btn{
    width:54px; height:54px; border-radius:50%; margin-top:-32px;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, #E9EDF4, #9AA3B5 60%, #6E7787);
    border:3px solid var(--bg); color:#14161d;
    box-shadow:0 10px 26px -8px rgba(201,207,218,0.55);
    transition:transform 0.3s var(--ease-bounce), box-shadow 0.3s ease;
    animation:centerGlow 2.8s ease-in-out infinite;
    position:relative;
  }
  .tab-center-btn::before{
    content:''; position:absolute; inset:-7px; border-radius:50%; z-index:-1;
    background:conic-gradient(from 0deg, rgba(157,92,255,0), rgba(157,92,255,0.5), rgba(255,79,163,0.45), rgba(157,92,255,0));
    filter:blur(6px); animation:markHalo 6s linear infinite;
  }
  .tab-center-btn i{font-size:23px; color:#fff;}
  @keyframes centerGlow{
    0%,100%{box-shadow:0 10px 26px -8px var(--purple-glow);}
    50%{box-shadow:0 12px 36px -6px rgba(255,79,163,0.6);}
  }
  .tab-item.tab-center.active{background:none;}
  .tab-item.tab-center.active .tab-center-btn{transform:translateY(-4px) scale(1.07);}
  .tab-item.tab-center.active i{transform:none; filter:none;}
  .tab-item.tab-center:active .tab-center-btn{transform:scale(0.9);}
  @media (prefers-reduced-motion: reduce){ .tab-center-btn, .tab-center-btn::before{animation:none;} }

  /* modo ligero activo: el ícono del rayo se pone turquesa */
  .icon-toggle.lite-on{color:var(--cyan); border-color:rgba(61,231,214,0.45);}
  .icon-toggle.lite-on:hover{color:var(--cyan);}

  /* =========================================================
     MODO LIGERO — para equipos lentos o con poca batería.
     Apaga animaciones, blur, partículas y efectos pesados.
     ========================================================= */
  html[data-lite="1"] *{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
  /* v130 — el ARRANQUE de la mini app: 2 segundos con las animaciones en
     pausa para que el primer pintado y el primer toque salgan al instante */
  html.fp-arranque *, html.fp-arranque *::before, html.fp-arranque *::after{
    animation-play-state:paused !important;
  }
  /* el GIRO de la ruleta es la experiencia completa: se conserva SIEMPRE,
     aunque el modo ligero apague el resto de animaciones */
  html[data-lite="1"] .ruleta-rueda{transition:transform 5s cubic-bezier(0.09, 0.61, 0.05, 1.005) !important;}
  /* v123 — la PASADA de la marca en los videos es PROTECCIÓN, no adorno:
     corre siempre, también en modo ligero (es transform puro, no cuesta) */
  html[data-lite="1"] .vip-pl-pasada.corre{animation:fpPasadaMarca var(--dur, 9s) linear both !important;}
  /* v165c — POR LO MISMO, el carrusel de letras: es la marca de agua, no un
     adorno. Si el modo ligero la congelara, el letrero se quedaría quieto
     justo en los teléfonos donde más se filtra el contenido. */
  html[data-lite="1"] .vip-pl-marq .tren{animation:fpMarquesina var(--dur, 20s) linear infinite !important;}
  html[data-lite="1"] .starfield,
  html[data-lite="1"] .aurora,
  html[data-lite="1"] .hero-particles,
  html[data-lite="1"] .shooting-star,
  html[data-lite="1"] .orb,
  html[data-lite="1"] .hero-media video,
  html[data-lite="1"] .hero::before,
  html[data-lite="1"] .promo-banner::before,
  html[data-lite="1"] .price-card::before,
  html[data-lite="1"] .catalog-row.starsight-row::before{
    display:none !important;
  }
  html[data-lite="1"] *,
  html[data-lite="1"] *::before,
  html[data-lite="1"] *::after{
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
    box-shadow:none !important; filter:none !important;
  }
  /* en modo ligero el blur (caro en GPU) se apaga — pero las fotos BLOQUEADAS
     no deben verse claras: se esconde su imagen y queda la tarjeta con candado.
     Las muestras libres de starsight sí se ven (esa es su gracia). */
  html[data-lite="1"] .gallery-tile{filter:none !important; transform:none !important;}
  html[data-lite="1"] .gallery-tile:not(.preview-libre):not(.video-tile){background-image:none !important;}
  html[data-lite="1"] .star-thumb:not(.preview-libre){background-image:none !important;}
  html[data-lite="1"] .reveal{opacity:1 !important; transform:none !important;}

  /* =========================================================
     v130 — MODO LITE (exclusivo CLIENTES): tipo Facebook Lite.
     La página entera se aplana y se tiñe de AZUL sereno: cero
     degradados, cero brillos, cero adornos. El catálogo queda en
     PURA LISTA DE NOMBRES — tocas el nombre y se abre su galería.
     (Se apila sobre las reglas de arriba: fp-lite2 siempre va
     acompañado de data-lite="1", que ya apagó las animaciones.)
     ========================================================= */
  html.fp-lite2{
    --bg:#0B141F; --bg-2:#0E1928; --surface:#121F30; --surface-2:#16273C;
    --line:rgba(126,166,214,0.16); --line-strong:rgba(126,166,214,0.3);
    --purple:#6FA7DC; --purple-soft:#9CC4E8; --purple-deep:#3D6D9E;
    --purple-glow:rgba(111,167,220,0.25); --plata:#9CC4E8;
    --gold:#7FB2DE; --gold-soft:#A9CDEA;
  }
  html.fp-lite2, html.fp-lite2 body{background:#0B141F !important;}
  /* superficies PLANAS: nada de vidrio ni degradados en las barras */
  html.fp-lite2 nav, html.fp-lite2 nav.scrolled{background:#0E1928 !important; border-bottom:1px solid rgba(126,166,214,0.2) !important;}
  html.fp-lite2 .vip-top{background:#0E1928 !important;}
  html.fp-lite2 .mobile-tabbar{background:#0E1928 !important; border-top:1px solid rgba(126,166,214,0.2) !important;}
  /* fuera TODO lo decorativo: banners animados, vitrina, historias, ambiente */
  html.fp-lite2 .vip-tv,
  html.fp-lite2 .fp-vitrina,
  html.fp-lite2 #storiesZona,
  html.fp-lite2 .stories-section,
  html.fp-lite2 .vip-saludo,
  html.fp-lite2 .vip-toplinea,
  html.fp-lite2 .vip-esq-tarjeta, html.fp-lite2 .vip-esq-hero,
  html.fp-lite2 .ficha-hero-brillo, html.fp-lite2 .ficha-rio,
  html.fp-lite2 .vip-cat-bienv span,
  html.fp-lite2 .vip-catinfo-sem{display:none !important;}
  /* LA LISTA DE NOMBRES: la tarjeta del modelo queda en una sola línea
     limpia — su nombre y una flecha. Tocarla abre su página (el nombre
     ya traía ese poder desde la v110). */
  html.fp-lite2 .vip-perfil.vcard{margin:0 0 7px; border-radius:9px; border:1px solid rgba(126,166,214,0.18); background:#121F30;}
  html.fp-lite2 .vip-perfil.vcard .vcard-media,
  html.fp-lite2 .vip-perfil.vcard .vcard-body,
  html.fp-lite2 .vip-perfil.vcard .vcard-ava,
  html.fp-lite2 .vip-perfil.vcard .vcard-chip,
  html.fp-lite2 .vip-perfil.vcard .verified-check{display:none !important;}
  html.fp-lite2 .vip-perfil.vcard .vcard-head{position:static; background:none; z-index:auto; display:flex; padding:13px 14px; gap:10px; align-items:center;}
  html.fp-lite2 .vip-perfil.vcard .vcard-head .vcard-nombre{display:block !important;}
  html.fp-lite2 .vip-perfil.vcard .vcard-idn{flex:1; cursor:pointer;}
  html.fp-lite2 .vip-perfil.vcard .vcard-nombre{font-size:14.5px; font-weight:700; letter-spacing:0.02em; color:#DCE9F7; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  html.fp-lite2 .vip-perfil.vcard .vcard-head::after{
    content:'›'; font-size:20px; line-height:1; color:#6FA7DC; flex-shrink:0;
  }
  html.fp-lite2 .vip-perfil.vcard .vip-fav{position:static; width:30px; height:30px; background:none; border:none;}
  /* la cuadrícula de tarjetas se vuelve UNA columna de lista */
  html.fp-lite2 .vip-bloque{display:block !important;}
  html.fp-lite2 .vip-bloque > .vip-perfil.bloq{margin-bottom:7px;}
  /* el catálogo público (por si se ve fuera de la zona): mismas reglas */
  html.fp-lite2 .card-media, html.fp-lite2 .card-body{display:none !important;}
  /* chips y filas auxiliares sin miniaturas (solo texto) */
  html.fp-lite2 .vip-favchip-ava{display:none !important;}
  /* las cabeceras de categoría quedan sobrias y planas */
  html.fp-lite2 .vip-catinfo{background:#121F30 !important; border:1px solid rgba(126,166,214,0.18) !important;}
  html.fp-lite2 .vip-cat-bienv b{background:none !important; -webkit-text-fill-color:#A9CDEA; color:#A9CDEA;}
  html.fp-lite2 .vip-subnav-btn{background:#121F30 !important;}
  /* la ficha y el visor también van planos */
  html.fp-lite2 .vip-ficha, html.fp-lite2 .vip-visor{background:#0B141F !important;}

  /* HOJA DE CANALES (bottom sheet nativo) */
  .channels-sheet{
    position:fixed; inset:0; z-index:300; visibility:hidden; pointer-events:none;
  }
  .channels-sheet.open{visibility:visible; pointer-events:auto;}
  .channels-sheet-backdrop{
    position:absolute; inset:0; background:rgba(6,4,10,0.82); backdrop-filter:blur(6px);
    opacity:0; transition:opacity 0.3s ease;
  }
  .channels-sheet.open .channels-sheet-backdrop{opacity:1;}
  .channels-sheet-panel{
    position:absolute; left:0; right:0; bottom:0; max-height:85vh; display:flex; flex-direction:column;
    background:var(--bg); border-radius:24px 24px 0 0; padding:14px 22px calc(16px + env(safe-area-inset-bottom));
    transform:translateY(100%); transition:transform 0.36s var(--ease);
    box-shadow:0 -20px 50px -20px rgba(0,0,0,0.6); border-top:1px solid var(--line-strong);
  }
  .channels-sheet.open .channels-sheet-panel{transform:translateY(0);}
  .channels-sheet-scroll{flex:1; min-height:0; overflow-y:auto;}
  .channels-sheet-handle{width:40px; height:4px; border-radius:4px; background:var(--line-strong); margin:0 auto 18px;}
  .channels-sheet-close{
    position:absolute; top:14px; right:18px; z-index:2; width:32px; height:32px; border-radius:50%;
    background:var(--surface); border:1px solid var(--line-strong); color:var(--text);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .channels-sheet-head{margin-bottom:18px;}
  .channels-sheet-title{font-family:'Fraunces', serif; font-size:21px; font-weight:500; max-width:400px; line-height:1.25;}
  .channels-sheet-list{display:flex; flex-direction:column; gap:10px;}
  .channel-row{
    display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:14px;
    border:1px solid var(--line); background:var(--surface); cursor:pointer;
    transition:border-color 0.2s ease, background 0.2s ease, transform 0.2s var(--ease-bounce);
  }
  .channel-row:active{transform:scale(0.98);}
  .channel-row.selected{border-color:var(--purple); background:rgba(139,92,246,0.1);}
  .channel-row-icon{width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0;}
  .channel-row-info{flex:1; min-width:0;}
  .channel-row-name{font-family:'Fraunces', serif; font-size:16px; font-weight:600; text-transform:capitalize;}
  .channel-row-meta{font-size:11.5px; color:var(--text-faint); margin-top:2px;}
  .channel-row-price{font-size:13px; font-weight:600; color:var(--text); text-align:right; flex-shrink:0;}
  .channel-row-check{
    width:22px; height:22px; border-radius:50%; border:2px solid var(--line-strong); flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:12px; color:transparent;
    transition:all 0.2s ease;
  }
  .channel-row.selected .channel-row-check{background:var(--purple); border-color:var(--purple); color:#fff;}
  .channels-sheet-footer{flex-shrink:0; padding-top:14px;}
  .channels-sheet-note{
    display:flex; align-items:center; justify-content:center; gap:6px; margin-top:14px; padding-top:14px;
    border-top:1px solid var(--line); font-size:11px; letter-spacing:0.04em; font-weight:700; color:var(--gold);
    text-align:center;
  }

  /* (botón volver arriba eliminado: la barra ya tiene "inicio") */

  @media (max-width:900px){
    .support-layout{grid-template-columns:1fr;}
    .nav-links{display:none;}
  }
  @media (max-width:768px){
    .mobile-tabbar{display:flex;}
    body{padding-bottom:78px;}
    .back-to-top{bottom:86px;}
    /* menos carga de GPU en móvil: orbes más chicos, sin parallax de blur animado */
    .orb{filter:blur(36px); animation:none;}
  }
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
  }
  @media (max-width:640px){
    .hero-strip{flex-direction:column;}
    .hero-strip .cell{border-right:none; border-bottom:1px solid var(--line);}
    .hero-strip .cell:last-child{border-bottom:none;}
    .cta-inner{flex-direction:column; align-items:flex-start;}
  }
  @media (max-width:480px){
    .wrap{padding:0 18px;}
    .support-card{padding:20px;}
  }

  /* =========================================================
     MODO APP PREMIUM (v47): pulido fino de tarjetas, skeleton,
     ripple, inicio de cliente y desbloqueo VIP
     ========================================================= */

  /* ---- tarjetas del catálogo: uniformes, con más aire y sombra suave ---- */
  .card{border-radius:19px; box-shadow:0 2px 6px rgba(0,0,0,0.18), 0 10px 28px -18px rgba(0,0,0,0.5);}
  .card::before{border-radius:20px;}
  .card:hover{box-shadow:0 6px 14px rgba(0,0,0,0.22), 0 30px 52px -22px var(--purple-glow);}
  .card-head{padding:11px 13px 10px;}
  .card-body{padding:5px 14px 14px;}

  /* skeleton: brillo de carga mientras llega la foto, y la foto entra en fade */
  .card-media{position:relative;}
  .card-media::before{
    content:''; position:absolute; inset:0; z-index:0; opacity:1; transition:opacity 0.4s ease;
    background:linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.055) 46%, rgba(255,255,255,0) 62%),
      linear-gradient(160deg, rgba(157,92,255,0.09), rgba(255,79,163,0.05) 60%, transparent);
    background-size:220% 100%, 100% 100%;
    animation:fpShimmer 1.4s ease-in-out infinite;
  }
  .card-media:has(img.ok)::before, .card-media:has(.avatar-ph)::before{animation:none; opacity:0;}
  @keyframes fpShimmer{0%{background-position:130% 0, 0 0;} 100%{background-position:-90% 0, 0 0;}}
  .card-img{opacity:0; transform:scale(1.02); transition:opacity 0.45s ease, transform 0.6s var(--ease);}
  .card-img.ok{opacity:1; transform:none;}
  .card:hover .card-media img.ok{transform:scale(1.06);}
  html[data-lite="1"] .card-media::before{animation:none; opacity:0;}
  html[data-lite="1"] .card-img{opacity:1; transform:none; transition:none;}

  /* chip "YA ES TUYO" en tarjetas de canales que el cliente ya compró */
  /* v86 — arriba a la DERECHA: a la izquierda vive NUEVO/exclusivo */
  .card-tuyo{
    position:absolute; top:10px; right:10px; z-index:3;
    display:inline-flex; align-items:center; gap:5px; padding:6px 11px; border-radius:999px;
    font-size:9px; font-weight:900; letter-spacing:0.12em; text-transform:uppercase; color:#231303;
    background:linear-gradient(135deg, #FFE9A8, #F2B93E 65%, #E8994A);
    box-shadow:0 6px 16px -6px rgba(242,185,62,0.65);
  }
  .card-tuyo i{font-size:11px;}

  /* ---- ripple táctil en botones (nada exagerado, tipo Material fino) ---- */
  .fp-rippled{position:relative; overflow:hidden;}
  .fp-ripple{
    position:absolute; border-radius:50%; pointer-events:none; z-index:4;
    background:radial-gradient(circle, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.16) 45%, transparent 70%);
    transform:translate(-50%,-50%) scale(0); opacity:0.9;
    animation:fpRipple 0.55s ease-out forwards;
  }
  @keyframes fpRipple{to{transform:translate(-50%,-50%) scale(1); opacity:0;}}

  /* ---- la barra de precio del perfil se apila en pantallas muy angostas ---- */
  @media (max-width:400px){
    .star-pricebar{grid-template-columns:1fr;}
    .pricebar-cell:first-child{border-right:none; border-bottom:1px solid color-mix(in srgb, var(--pp-accent) 22%, transparent);}
  }

  /* ---- botón del perfil cuando el cliente YA tiene ese canal: dorado VIP ---- */
  .unlock-btn.es-vip{
    background:linear-gradient(135deg, #FFE9A8, #F2B93E 55%, #E8894A);
    color:#231303; box-shadow:0 10px 26px -8px rgba(242,185,62,0.65);
  }
  .unlock-btn.es-vip:hover{box-shadow:0 16px 32px -8px rgba(242,185,62,0.7);}
  .unlock-btn.pulso{animation:unlockPulso 0.8s ease 2;}
  @keyframes unlockPulso{0%,100%{transform:scale(1);} 50%{transform:scale(1.045);}}

  /* =========================================================
     INICIO DE CLIENTE — su mundo VIP
     ========================================================= */
  html:not(.es-cliente) #vipHome{display:none !important;}
  html.es-cliente header.hero,
  html.es-cliente #que-encontraras,
  html.es-cliente #zonavip-promo{display:none !important;}
  .viphome-section{padding:16px 0 8px;}
  .viphome-card{
    position:relative; border-radius:24px; padding:1.5px; overflow:hidden;
    background:linear-gradient(150deg, rgba(255,233,168,0.75), rgba(242,185,62,0.35) 30%, rgba(157,92,255,0.3) 70%, rgba(232,185,74,0.55));
    box-shadow:0 26px 60px -26px rgba(232,185,74,0.4);
  }
  .viphome-inner{
    border-radius:22.5px; padding:22px 20px 20px; position:relative; overflow:hidden;
    background:
      radial-gradient(ellipse 520px 260px at 85% -10%, rgba(232,185,74,0.16), transparent 60%),
      radial-gradient(ellipse 480px 300px at 0% 110%, rgba(157,92,255,0.14), transparent 60%),
      linear-gradient(180deg, #221936, #150F20 70%);
  }
  .viphome-hola{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:4px;}
  .viphome-hola h2{font-family:'Fraunces', serif; font-size:clamp(21px, 5.6vw, 26px); font-weight:600; letter-spacing:0.02em;}
  .viphome-chip{
    display:inline-flex; align-items:center; gap:6px; padding:6px 13px; border-radius:999px;
    font-size:9.5px; font-weight:900; letter-spacing:0.14em; text-transform:uppercase; color:#231303;
    background:linear-gradient(135deg, #FFE9A8, #F2B93E); box-shadow:0 8px 20px -8px rgba(242,185,62,0.6);
  }
  .viphome-sub{font-size:12px; color:var(--text-dim); letter-spacing:0.02em; margin-bottom:16px; line-height:1.6;}
  .viphome-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:12px;}
  .viphome-acceso{
    position:relative; display:flex; align-items:center; gap:13px; padding:15px 16px; border-radius:18px;
    cursor:pointer; border:1px solid color-mix(in srgb, var(--vhc, #E8B94A) 40%, transparent);
    background:
      radial-gradient(ellipse 240px 120px at 100% 0%, color-mix(in srgb, var(--vhc, #E8B94A) 14%, transparent), transparent 70%),
      rgba(255,255,255,0.03);
    transition:transform 0.25s var(--ease-bounce), box-shadow 0.25s ease, border-color 0.25s ease;
    overflow:hidden; text-align:left; font-family:inherit; color:var(--text); width:100%;
  }
  .viphome-acceso:hover{transform:translateY(-3px); border-color:color-mix(in srgb, var(--vhc, #E8B94A) 70%, transparent); box-shadow:0 18px 36px -16px color-mix(in srgb, var(--vhc, #E8B94A) 55%, transparent);}
  .viphome-acceso:active{transform:scale(0.975);}
  .viphome-acceso-ico{
    width:44px; height:44px; border-radius:14px; flex-shrink:0; font-size:20px; color:var(--vhc, #E8B94A);
    display:flex; align-items:center; justify-content:center;
    background:color-mix(in srgb, var(--vhc, #E8B94A) 14%, transparent);
    border:1px solid color-mix(in srgb, var(--vhc, #E8B94A) 38%, transparent);
  }
  .viphome-acceso-txt{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1;}
  .viphome-acceso-nombre{font-size:13.5px; font-weight:800; letter-spacing:0.05em; text-transform:uppercase;}
  .viphome-acceso-meta{font-size:10.5px; color:var(--text-dim); font-weight:600; letter-spacing:0.03em;}
  .viphome-acceso-ir{
    margin-left:auto; flex-shrink:0; display:inline-flex; align-items:center; gap:5px;
    font-size:10px; font-weight:900; letter-spacing:0.1em; text-transform:uppercase; color:#231303;
    padding:8px 13px; border-radius:999px; background:linear-gradient(135deg, #FFE9A8, #F2B93E);
  }
  .viphome-titulo{
    display:flex; align-items:center; gap:8px; margin:20px 0 11px;
    font-size:10px; font-weight:900; letter-spacing:0.18em; text-transform:uppercase; color:var(--text-faint);
  }
  .viphome-titulo i{color:var(--gold-soft); font-size:14px;}
  .viphome-nuevos{display:flex; gap:11px; overflow-x:auto; padding:2px 2px 8px; scrollbar-width:none;}
  .viphome-nuevos::-webkit-scrollbar{display:none;}
  .viphome-nuevo{
    flex-shrink:0; width:86px; display:flex; flex-direction:column; align-items:center; gap:7px;
    background:none; border:none; cursor:pointer; font-family:inherit; color:var(--text);
  }
  .viphome-nuevo-foto{
    width:66px; height:66px; border-radius:50%; background-size:cover; background-position:center top; position:relative;
    box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--vhc, #E8B94A);
    display:flex; align-items:center; justify-content:center; font-family:'Fraunces', serif; font-size:20px;
    transition:transform 0.25s var(--ease-bounce);
  }
  .viphome-nuevo:hover .viphome-nuevo-foto{transform:scale(1.07);}
  .viphome-nuevo-foto::after{
    content:'NUEVO'; position:absolute; bottom:-5px; left:50%; transform:translateX(-50%);
    font-size:7px; font-weight:900; letter-spacing:0.1em; color:#04211C; padding:2.5px 7px; border-radius:999px;
    background:linear-gradient(135deg, #7CF2DE, #3DE7D6);
  }
  .viphome-nuevo-nombre{font-size:10.5px; font-weight:700; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .viphome-faltan{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px;}
  .viphome-falta{
    display:flex; align-items:center; gap:10px; padding:12px 13px; border-radius:15px; cursor:pointer;
    border:1px dashed color-mix(in srgb, var(--vhc, #9D5CFF) 45%, transparent);
    background:color-mix(in srgb, var(--vhc, #9D5CFF) 6%, transparent);
    transition:transform 0.22s var(--ease), border-color 0.22s ease; color:var(--text); font-family:inherit; text-align:left;
  }
  .viphome-falta:hover{transform:translateY(-2px); border-style:solid;}
  .viphome-falta:active{transform:scale(0.97);}
  .viphome-falta i{font-size:17px; color:var(--vhc, #9D5CFF); flex-shrink:0;}
  .viphome-falta-txt{display:flex; flex-direction:column; gap:1px; min-width:0;}
  .viphome-falta-nombre{font-size:11px; font-weight:800; letter-spacing:0.06em; text-transform:uppercase;}
  .viphome-falta-precio{font-size:10px; color:var(--text-dim); font-weight:700;}
  .viphome-falta-precio b{color:var(--gold-soft);}
  [data-theme="light"] .viphome-inner{background:linear-gradient(180deg, #FFFDF6, #FBF6EC 70%);}
  [data-theme="light"] .viphome-acceso{background:rgba(28,21,38,0.025);}

  /* =========================================================
     ANIMACIÓN DE DESBLOQUEO: candado que se abre + destello
     ========================================================= */
  .fp-unlock{
    position:fixed; inset:0; z-index:1400; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
    background:rgba(9,6,14,0.78); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    opacity:0; transition:opacity 0.25s ease; pointer-events:none;
  }
  .fp-unlock.on{opacity:1;}
  .fp-unlock-aro{
    position:relative; width:118px; height:118px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:radial-gradient(circle, rgba(242,185,62,0.16), transparent 70%);
  }
  .fp-unlock-aro::before, .fp-unlock-aro::after{
    content:''; position:absolute; inset:0; border-radius:50%;
    border:2px solid rgba(242,185,62,0.55);
    animation:unlockOnda 1s ease-out infinite;
  }
  .fp-unlock-aro::after{animation-delay:0.35s;}
  @keyframes unlockOnda{0%{transform:scale(0.7); opacity:1;} 100%{transform:scale(1.5); opacity:0;}}
  /* v107 — el candado se abre DESPACIO (1.1 s), como una cerradura de verdad */
  .fp-unlock-candado{width:72px; height:72px; position:relative; z-index:2; filter:drop-shadow(0 10px 30px rgba(242,185,62,0.6));}
  .fp-unlock-candado .arco{
    transform-origin:12px 11px;
    transition:transform 1.1s cubic-bezier(.22,.9,.24,1) .15s;
  }
  .fp-unlock.abierto .arco{transform:rotate(-42deg) translate(-1.2px,-1px);}
  .fp-unlock.abierto .fp-unlock-candado{animation:fpCandadoTiembla 1.25s ease-in-out;}
  @keyframes fpCandadoTiembla{
    0%,100%{transform:translateX(0);}
    12%{transform:translateX(-1.5px);} 24%{transform:translateX(1.5px);}
    36%{transform:translateX(-1px);}   48%{transform:translateX(1px);}
    60%{transform:translateX(0) scale(1.04);}
  }
  .fp-unlock-txt{
    font-size:11px; font-weight:900; letter-spacing:0.24em; text-transform:uppercase;
    background:linear-gradient(120deg, #FFE9A8, #F2B93E 60%, #E8894A);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  }
  /* ---- v107: el letrero FLOTANTE dorado ---- */
  .fp-unlock-marca{
    position:relative; z-index:3; display:flex; flex-direction:column; align-items:center; gap:10px;
    opacity:0; pointer-events:none;
  }
  .fp-unlock.marca .fp-unlock-marca{animation:fpMarcaFlota 2.2s cubic-bezier(.2,.75,.25,1) forwards;}
  @keyframes fpMarcaFlota{
    0%{opacity:0; transform:translateY(26px) scale(0.93);}
    22%{opacity:1; transform:translateY(0) scale(1);}
    78%{opacity:1; transform:translateY(-10px) scale(1.015);}
    100%{opacity:1; transform:translateY(-16px) scale(1.02);}
  }
  .fp-unlock-marca-n{
    position:relative; overflow:hidden;
    font-family:'Fraunces', serif; font-size:clamp(26px, 8.4vw, 42px); font-weight:600;
    letter-spacing:0.16em; text-align:center; line-height:1;
    background:linear-gradient(100deg, #FFF7DE, #F2B93E 32%, #FFF7DE 50%, #F2B93E 68%, #E8894A);
    background-size:260% 100%;
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
    animation:fpOroVivo 3.4s linear infinite;
    filter:drop-shadow(0 8px 30px rgba(242,185,62,0.5));
  }
  .fp-unlock-marca-sub{
    font-size:10px; font-weight:900; letter-spacing:0.3em; text-transform:uppercase; color:rgba(255,240,200,0.62);
  }
  .fp-unlock-cat{
    display:inline-flex; align-items:center; gap:8px; padding:9px 18px; border-radius:999px;
    font-size:12.5px; font-weight:900; letter-spacing:0.1em; text-transform:uppercase; color:#1C1229;
    background:linear-gradient(135deg, #FFE9A8, #F2B93E 55%, #E8894A);
    box-shadow:0 16px 38px -16px rgba(242,185,62,0.85);
    opacity:0;
  }
  .fp-unlock.marca .fp-unlock-cat{animation:fpCatEntra .75s var(--ease-bounce, cubic-bezier(.34,1.56,.64,1)) .55s forwards;}
  @keyframes fpCatEntra{
    0%{opacity:0; transform:translateY(14px) scale(0.86);}
    100%{opacity:1; transform:none;}
  }
  .fp-unlock-polvo{position:absolute; width:5px; height:5px; border-radius:50%; background:#FFE9A8; opacity:0; pointer-events:none;}
  .fp-unlock.marca .fp-unlock-polvo{animation:fpPolvoSube var(--pd, 2.4s) ease-out var(--pr, 0s) forwards;}
  @keyframes fpPolvoSube{
    0%{opacity:0; transform:translateY(0) scale(0.6);}
    18%{opacity:0.85;}
    100%{opacity:0; transform:translateY(-160px) scale(0.2);}
  }
  .fp-unlock-chispa{position:absolute; width:7px; height:7px; border-radius:50%; background:linear-gradient(135deg, #FFE9A8, #F2B93E); opacity:0;}
  .fp-unlock.abierto .fp-unlock-chispa{animation:unlockChispa 0.7s ease-out forwards;}
  @keyframes unlockChispa{
    0%{opacity:1; transform:translate(0,0) scale(1);}
    100%{opacity:0; transform:translate(var(--cx), var(--cy)) scale(0.4);}
  }

  /* =========================================================
     ZONA VIP: cabecera de vidrio pegajosa y acabado más fino
     ========================================================= */
  .vip-top{
    position:sticky; top:calc(-1 * (14px + env(safe-area-inset-top))); z-index:5;
    padding:12px 14px; margin-top:-6px; border-radius:16px;
    background:rgba(13,9,19,0.72); backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
    border:1px solid rgba(232,185,74,0.16);
  }
  html.in-telegram .vip-top{top:calc(-1 * (12px + var(--tg-top, 0px)));}
  .vip-tab{transition:all .22s var(--ease); }
  .vip-tab:hover{border-color:color-mix(in srgb, var(--vtc, #E8B94A) 55%, transparent); color:var(--vtc, var(--gold-soft));}
  .vip-tab:active{transform:scale(0.94);}
  .vip-perfil{transition:transform 0.28s var(--ease), box-shadow 0.28s ease;}
  .vip-perfil:hover{transform:translateY(-3px); box-shadow:0 24px 48px -22px color-mix(in srgb, var(--vpc, #E8B94A) 45%, transparent);}
  .vip-cargando{
    display:flex; flex-direction:column; gap:12px; padding:12px 0 !important;
  }
  .vip-cargando::before, .vip-cargando::after{
    content:''; display:block; height:118px; border-radius:20px;
    background:linear-gradient(100deg, rgba(255,255,255,0.03) 30%, rgba(255,255,255,0.075) 46%, rgba(255,255,255,0.03) 62%), rgba(255,255,255,0.025);
    background-size:220% 100%, 100% 100%;
    animation:fpShimmer 1.4s ease-in-out infinite;
  }
  .vip-cargando::after{opacity:0.6; animation-delay:0.18s;}

  /* ---- perfil: entrada con resorte y detalles más finos ---- */
  .star-profile-inner{transform:translateY(26px) scale(0.985); transition:transform 0.45s var(--ease-bounce);}
  .star-profile.open .star-profile-inner{transform:translateY(0) scale(1);}

  /* ---- más aire entre secciones en el teléfono (aditivo, no rompe nada) ---- */
  @media (max-width:768px){
    body > section.wrap{margin-bottom:16px;}
    section.wrap{scroll-margin-top:76px;}
  }

  /* ---- rendimiento: lo que está lejos de la pantalla no se calcula ---- */
  @media (min-width:769px){
    #opiniones, #clientes, #pagos, #como-funciona, #porque-elegirnos,
    #en-numeros, #canales-publicos, #unete-equipo, #topfans{content-visibility:auto; contain-intrinsic-size:auto 620px;}
  }

  /* ---- modo ligero: nada de lo nuevo pesa ---- */
  html[data-lite="1"] .fp-unlock, html[data-lite="1"] .fp-ripple{display:none !important;}
  html[data-lite="1"] .vip-top{backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(13,9,19,0.96);}
  html[data-lite="1"] nav{backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(14,10,20,0.97);}
  html[data-lite="1"] .vip-cargando::before, html[data-lite="1"] .vip-cargando::after{animation:none;}
  @media (prefers-reduced-motion: reduce){
    .fp-ripple{display:none;}
    .card-img{transition:opacity 0.3s ease;}
    .fp-unlock-aro::before, .fp-unlock-aro::after{animation:none;}
  }


  /* ============ 🌴 EVENTO SUMMER — la web se va DE VERDAD a la playa ======
     Solo aplica con html[data-evento="summer"]. Sin evento: cero cambios. */
  html[data-evento="summer"]{
    --bg:#06384d; --bg2:#0a5570;
    --surface:rgba(9,64,84,0.86); --surface2:rgba(12,80,100,0.82);
    --line:rgba(240,214,168,0.30); --line2:rgba(240,214,168,0.40); --line-strong:rgba(255,206,120,0.62);
    --gold:#F6D9A0; --gold2:#FFE9BE; --gold-soft:#FBE6C2;
    --purple:#25C3D6; --cyan:#7BF0DF; --pink:#FF9E7A;
    --text:#FFF6E6; --dim:#D9EEF2; --text-faint:#A7D2DC; --faint:#96C4D0;
  }
  /* cielo → mar → arena.
     OJO: nada de background-attachment:fixed — en celular eso traba el
     scroll. El mar va en su propia capa fija y liviana (.fp-mar). */
  html[data-evento="summer"] body{ background:#07506c; }
  .fp-mar{
    position:fixed; inset:0; z-index:0; pointer-events:none;
    background:linear-gradient(180deg,#053246 0%,#07506c 16%,#0d7f9d 36%,#1AA5B8 54%,#4EC6C2 70%,#9FD3B4 82%,#D9BC8A 92%,#F0DAB0 100%);
  }
  /* SOL: el resplandor queda quieto y SOLO giran los rayos (una sola
     transformación con la GPU = barato para el teléfono) */
  .fp-sol{
    position:fixed; top:-130px; right:-110px; width:360px; height:360px; border-radius:50%;
    pointer-events:none; z-index:0;
    background:radial-gradient(circle, rgba(255,240,200,0.95) 0 18%, rgba(255,212,120,0.72) 32%, rgba(255,180,90,0.24) 54%, transparent 72%);
  }
  .fp-sol i{
    position:absolute; inset:0; border-radius:50%; display:block;
    background:conic-gradient(from 0deg, rgba(255,226,150,0.30) 0 6deg, transparent 6deg 30deg);
    transform:translateZ(0); will-change:transform; animation:fpSol 34s linear infinite;
  }
  @keyframes fpSol{ to{ transform:rotate(360deg); } }
  /* ARENA con textura de granito + orilla ondulada y olas encima */
  html[data-evento="summer"] body::after{
    content:''; position:fixed; left:0; right:0; bottom:72px; height:190px; pointer-events:none; z-index:0;
    background:
      radial-gradient(circle at 12% 30%, rgba(255,255,255,0.16) 0 1px, transparent 2px),
      radial-gradient(circle at 47% 62%, rgba(120,80,30,0.18) 0 1px, transparent 2px),
      radial-gradient(circle at 78% 24%, rgba(255,255,255,0.13) 0 1px, transparent 2px),
      radial-gradient(circle at 28% 80%, rgba(140,95,40,0.16) 0 1px, transparent 2px),
      linear-gradient(180deg, transparent 0, rgba(226,196,146,0.55) 34%, rgba(238,214,170,0.92) 62%, rgba(246,228,190,1) 100%);
    background-size:26px 26px, 34px 34px, 22px 22px, 30px 30px, 100% 100%;
    -webkit-mask-image:radial-gradient(22px 14px at 22px 100%, transparent 96%, #000 100%), linear-gradient(#000,#000);
    -webkit-mask-size:44px 28px, 100% 100%;
    -webkit-mask-position:0 0, 0 26px;
    -webkit-mask-repeat:repeat-x, no-repeat;
    mask-image:radial-gradient(22px 14px at 22px 100%, transparent 96%, #000 100%), linear-gradient(#000,#000);
    mask-size:44px 28px, 100% 100%;
    mask-position:0 0, 0 26px;
    mask-repeat:repeat-x, no-repeat;
  }
  /* OLAS animadas justo arriba de la arena */
  /* la arena se siente en las SUPERFICIES (barato), no en una capa gigante
     encima de todo: eso era lo que trababa el scroll en el celular */
  .fp-olas{position:fixed; left:0; right:0; bottom:236px; height:96px; pointer-events:none; z-index:0; overflow:hidden;}
  .fp-olas i{
    position:absolute; left:-50%; width:200%; height:100%; display:block;
    background:repeating-radial-gradient(circle at 24px 100%, rgba(255,255,255,0.42) 0 24px, transparent 24px 48px);
    -webkit-mask-image:linear-gradient(180deg, transparent 30%, #000 100%);
    mask-image:linear-gradient(180deg, transparent 30%, #000 100%);
    transform:translateZ(0); will-change:transform;
    animation:fpOla 11s ease-in-out infinite;
  }
  .fp-olas i:nth-child(2){ opacity:.45; bottom:-16px; animation-duration:16s; animation-direction:reverse; }
  @keyframes fpOla{ 0%,100%{ transform:translate3d(0,0,0); } 50%{ transform:translate3d(46px,0,0); } }

  /* 🐠 animales marinos y pelotas que cruzan la pantalla */
  .fp-vida{position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden;}
  .fp-vida b{
    position:absolute; left:-14vw; font-size:var(--s,26px); font-style:normal; font-weight:400;
    opacity:.72; transform:translateZ(0); will-change:transform;
    animation:fpNada var(--d,26s) linear infinite; animation-delay:var(--r,0s);
    filter:drop-shadow(0 6px 10px rgba(0,40,60,.35));
  }
  @keyframes fpNada{
    0%   { transform:translate3d(0,0,0) scaleX(1); }
    50%  { transform:translate3d(60vw,-14px,0) scaleX(1); }
    100% { transform:translate3d(124vw,0,0) scaleX(1); }
  }
  /* la pelota rebota en vez de nadar */
  .fp-vida b.pelota{ animation-name:fpRebota; }
  @keyframes fpRebota{
    0%   { transform:translate3d(0,0,0) rotate(0deg); }
    25%  { transform:translate3d(32vw,-46px,0) rotate(180deg); }
    50%  { transform:translate3d(62vw,0,0) rotate(360deg); }
    75%  { transform:translate3d(94vw,-38px,0) rotate(540deg); }
    100% { transform:translate3d(124vw,0,0) rotate(720deg); }
  }
  /* modo ligero y "menos movimiento": todo quieto, cero trabas */
  html[data-lite="1"] .fp-olas i,
  html[data-lite="1"] .fp-vida b,
  html[data-lite="1"] .fp-sol i{ animation:none; }
  @media (prefers-reduced-motion: reduce){
    .fp-olas i, .fp-vida b, .fp-sol i, .fp-summer-deco span,
    .card-media .fp-ev-tag{ animation:none !important; }
  }

  /* decoración tropical flotando por las orillas */
  .fp-summer-deco{position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden;}
  .fp-summer-deco span{
    position:absolute; opacity:.62; will-change:transform;
    animation:fpFlota var(--d,13s) ease-in-out infinite; animation-delay:var(--r,0s);
    filter:drop-shadow(0 8px 16px rgba(0,40,60,0.45));
  }
  @keyframes fpFlota{ 0%,100%{transform:translateY(0) rotate(-6deg)} 50%{transform:translateY(-26px) rotate(7deg)} }
  html[data-lite="1"] .fp-summer-deco span{animation:none}

  /* ---- todo el chrome del sitio, vestido de playa ---- */
  html[data-evento="summer"] nav#top{
    background:linear-gradient(180deg, rgba(4,44,62,0.94), rgba(6,60,80,0.74));
    border-bottom:1px solid rgba(246,217,160,0.45);
    box-shadow:0 6px 26px -14px rgba(0,0,0,0.7);
  }
  html[data-evento="summer"] .brand-tag,
  html[data-evento="summer"] .card-chip,
  html[data-evento="summer"] .chip,
  html[data-evento="summer"] .preview-chip,
  html[data-evento="summer"] .dinamica-chip{
    color:#0a3b47 !important;
    background:linear-gradient(135deg,#FFE9BE,#7BF0DF) !important;
    border-color:rgba(255,255,255,0.5) !important;
  }
  html[data-evento="summer"] .chip.on,
  html[data-evento="summer"] .chip[aria-selected="true"]{
    background:linear-gradient(135deg,#FFC46E,#FF9E7A) !important; color:#3a1c06 !important;
  }
  html[data-evento="summer"] .mobile-tabbar{
    background:linear-gradient(180deg, rgba(6,58,76,0.95), rgba(4,42,58,0.99));
    border-top:1px solid rgba(246,217,160,0.45);
  }
  html[data-evento="summer"] .mobile-tabbar::before{
    background:linear-gradient(90deg, transparent 4%, #7BF0DF, #FFE9BE, #FFC46E, #7BF0DF, transparent 96%);
  }
  html[data-evento="summer"] .tab-item.active{ color:#FFE9BE; }
  html[data-evento="summer"] .tab-center-btn{
    background:linear-gradient(135deg,#FFF0CE,#7BF0DF 52%,#25C3D6);
    box-shadow:0 12px 30px -8px rgba(123,240,223,0.75);
  }
  html[data-evento="summer"] .tab-center-btn::before{
    background:conic-gradient(from 0deg, rgba(255,226,150,0), rgba(255,226,150,.75), rgba(123,240,223,.7), rgba(255,226,150,0));
  }
  /* superficies: cristal de mar con borde de arena */
  html[data-evento="summer"] .card,
  html[data-evento="summer"] .price-card,
  html[data-evento="summer"] .channel-row,
  html[data-evento="summer"] .acc-card,
  html[data-evento="summer"] .discover-card,
  html[data-evento="summer"] .client-card,
  html[data-evento="summer"] .payment-card,
  html[data-evento="summer"] .faq-item,
  html[data-evento="summer"] .dinamica-card,
  html[data-evento="summer"] .ruleta-card,
  html[data-evento="summer"] .catalog-search,
  html[data-evento="summer"] .menu-panel,
  html[data-evento="summer"] .channels-sheet-panel,
  html[data-evento="summer"] .acc-canal,
  html[data-evento="summer"] .compare-wrap{
    background:
      radial-gradient(circle at 18% 12%, rgba(255,240,205,0.10) 0 1px, transparent 2px),
      radial-gradient(circle at 68% 62%, rgba(255,228,180,0.08) 0 1px, transparent 2px),
      linear-gradient(158deg, rgba(28,86,96,0.93), rgba(16,58,70,0.95)) !important;
    background-size:34px 34px, 48px 48px, 100% 100% !important;
    border-color:rgba(246,217,160,0.42) !important;
    box-shadow:0 14px 34px -18px rgba(0,30,45,0.75), inset 0 1px 0 rgba(255,233,190,0.22) !important;
  }
  /* cada categoría, sobre su propia franja de arena mojada */
  html[data-evento="summer"] .catalog-row{
    padding:14px 0 18px; border-radius:22px; margin-bottom:20px;
    background:linear-gradient(180deg, rgba(255,233,190,0.10), rgba(123,240,223,0.05) 60%, transparent);
  }
  /* el inicio, con luz de atardecer */
  html[data-evento="summer"] .hero-strip,
  html[data-evento="summer"] .hero-media{
    background-image:radial-gradient(ellipse 520px 260px at 82% 4%, rgba(255,196,110,0.32), transparent 66%) !important;
  }
  html[data-evento="summer"] .section-head{
    padding:10px 14px; border-radius:16px;
    background:linear-gradient(120deg, rgba(255,233,190,0.12), transparent 72%);
  }
  html[data-evento="summer"] .card:hover,
  html[data-evento="summer"] .price-card:hover{ border-color:rgba(255,206,120,0.66) !important; }
  /* títulos y textos con color de arena / agua */
  html[data-evento="summer"] .section-eyebrow,
  html[data-evento="summer"] .eyebrow,
  html[data-evento="summer"] .combo-eyebrow,
  html[data-evento="summer"] .ref-lab,
  html[data-evento="summer"] .red-band-eyebrow{ color:#7BF0DF !important; }
  html[data-evento="summer"] .section-title,
  html[data-evento="summer"] .catalog-title,
  html[data-evento="summer"] .combo-titulo,
  html[data-evento="summer"] .compare-title,
  html[data-evento="summer"] .red-band-title{ color:#FFF3DC !important; }
  html[data-evento="summer"] .catalog-row-title{ color:#FFE9BE !important; }
  html[data-evento="summer"] .catalog-row-precio,
  html[data-evento="summer"] .price-card-mxn,
  html[data-evento="summer"] .combo-ahora,
  html[data-evento="summer"] .price{ color:#FFD98A !important; }
  /* botones: coral + turquesa */
  html[data-evento="summer"] .hero-btn-primary,
  html[data-evento="summer"] .cta-btn,
  html[data-evento="summer"] .combo-btn,
  html[data-evento="summer"] .card-cta,
  html[data-evento="summer"] .acc-canjear,
  html[data-evento="summer"] .ref-cta-btn,
  html[data-evento="summer"] .dinamica-btn,
  html[data-evento="summer"] .preventa-btn{
    background:linear-gradient(135deg,#FFCF87,#FF9E7A 55%,#FF8360) !important;
    color:#3a1806 !important; border:0 !important;
    box-shadow:0 12px 28px -12px rgba(255,140,100,0.75) !important;
  }
  html[data-evento="summer"] .hero-btn-catalog,
  html[data-evento="summer"] .hero-btn-ghost,
  html[data-evento="summer"] .acc-tg-btn{
    background:linear-gradient(135deg, rgba(123,240,223,0.22), rgba(37,195,214,0.18)) !important;
    border:1px solid rgba(123,240,223,0.55) !important; color:#DFFAF4 !important;
  }
  html[data-evento="summer"] .price-card-icon,
  html[data-evento="summer"] .channel-row-icon,
  html[data-evento="summer"] .discover-icon,
  html[data-evento="summer"] .payment-icon,
  html[data-evento="summer"] .acc-canal-icono{
    background:linear-gradient(135deg, rgba(255,233,190,0.30), rgba(123,240,223,0.26)) !important;
    color:#FFF3DC !important; border:1px solid rgba(255,233,190,0.34);
  }
  html[data-evento="summer"] .aurora i{ filter:hue-rotate(155deg) saturate(1.4) brightness(1.15); }
  html[data-evento="summer"] .orb-1{ background:radial-gradient(circle, rgba(255,206,120,.5), transparent 70%); }
  html[data-evento="summer"] .orb-2{ background:radial-gradient(circle, rgba(123,240,223,.45), transparent 70%); }
  html[data-evento="summer"] .online-pill,
  html[data-evento="summer"] .hero-trust-clients,
  html[data-evento="summer"] .prueba-social,
  html[data-evento="summer"] .assurance-line,
  html[data-evento="summer"] .pricing-note{
    background:rgba(9,64,84,0.72) !important; border-color:rgba(246,217,160,0.34) !important; color:#E7F7F5 !important;
  }
  html[data-evento="summer"] .combo-card{
    background:
      radial-gradient(ellipse 420px 200px at 88% -20%, rgba(255,214,130,0.34), transparent 65%),
      linear-gradient(158deg, rgba(12,84,106,0.95), rgba(7,52,70,0.97)) !important;
    border-color:rgba(255,206,120,0.55) !important;
  }
  /* cada CATEGORÍA con su propio adorno de playa */
  .fp-cat-deco{
    display:inline-flex; align-items:center; gap:5px; padding:3px 10px;
    border-radius:999px; font-size:10.5px; font-weight:900; letter-spacing:.02em; white-space:nowrap;
    color:#08333f; background:linear-gradient(135deg, rgba(255,233,190,0.97), rgba(123,240,223,0.94));
    box-shadow:0 4px 12px -4px rgba(0,0,0,0.4); text-transform:none;
  }
  .fp-cat-emo{
    position:absolute; right:14px; bottom:-14px;
    font-size:62px; opacity:.22; pointer-events:none; line-height:1;
    filter:drop-shadow(0 6px 10px rgba(0,0,0,.4));
  }
  /* con el evento, el encabezado de cada categoría respira y acomoda su adorno */
  html[data-evento="summer"] .catalog-row-head{
    position:relative; flex-wrap:wrap; align-items:flex-start; row-gap:8px;
    padding-top:10px; padding-bottom:10px; border-radius:16px;
    background:linear-gradient(120deg, rgba(255,233,190,0.12), rgba(123,240,223,0.08));
    border:1px solid rgba(246,217,160,0.26); margin-left:14px; margin-right:14px; overflow:hidden;
  }
  html[data-evento="summer"] .catalog-row-title{ flex-wrap:wrap; row-gap:6px; }
  html[data-evento="summer"] .catalog-row-nav{ margin-left:auto; }
  /* etiqueta de descuento (tarjetas, categorías, precios…) */
  .fp-ev-tag{
    display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px;
    font-size:11px; font-weight:900; letter-spacing:.03em; white-space:nowrap; vertical-align:middle;
    color:#3a1806; background:linear-gradient(135deg,#FFD98A,#FF9E7A);
    box-shadow:0 4px 12px rgba(0,0,0,0.32); text-shadow:0 1px 0 rgba(255,255,255,.28);
  }
  .card-media .fp-ev-tag{position:absolute; left:9px; top:9px; z-index:3; animation:fpTagLatir 3.4s ease-in-out infinite;}
  @keyframes fpTagLatir{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.07)} }
  html[data-lite="1"] .card-media .fp-ev-tag{animation:none}
  /* mensaje del evento dentro de las secciones */
  .fp-ev-msg{
    display:flex; align-items:center; gap:10px; margin:14px 0 0; padding:12px 14px; border-radius:14px;
    font-size:13px; line-height:1.5; font-weight:800; color:#08333f;
    background:linear-gradient(135deg, rgba(123,240,223,0.95), rgba(255,233,190,0.95));
    border:1px solid rgba(255,255,255,0.45); box-shadow:0 10px 26px -14px rgba(0,0,0,.5);
  }
  /* precio anterior tachado del evento */
  .fp-ev-antes{text-decoration:line-through; opacity:.55; font-weight:600; margin-right:6px;}

  /* 🏝️ el BANNER DEL INICIO, vestido de playa */
  html[data-evento="summer"] #heroBanner{
    background-image:
      radial-gradient(ellipse 560px 280px at 80% -6%, rgba(255,206,120,0.36), transparent 66%),
      linear-gradient(180deg, rgba(8,60,80,0.55), rgba(20,120,140,0.30) 62%, rgba(160,205,180,0.28)) !important;
    border-bottom:1px solid rgba(246,217,160,0.35);
  }
  .fp-hero-playa{position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:1;}
  .fp-hero-playa .hp{
    position:absolute; opacity:.55; transform:translateZ(0); will-change:transform;
    filter:drop-shadow(0 6px 12px rgba(0,40,60,.45));
    animation:fpHeroFlota 9s ease-in-out infinite;
  }
  .fp-hero-playa .p1{ left:-6px;  bottom:6px;  font-size:74px; opacity:.6; animation-duration:11s; }
  .fp-hero-playa .p2{ right:2px;  bottom:14px; font-size:56px; animation-duration:13s; animation-delay:1s; }
  .fp-hero-playa .p3{ right:16%;  top:12%;     font-size:34px; animation-duration:10s; animation-delay:2s; }
  .fp-hero-playa .p4{ left:14%;   top:9%;      font-size:28px; animation-duration:8s;  animation-delay:.6s; }
  .fp-hero-playa .p5{ left:26%;   bottom:8px;  font-size:26px; animation-duration:12s; animation-delay:3s; }
  .fp-hero-playa .p6{ right:32%;  bottom:4px;  font-size:24px; animation-duration:9s;  animation-delay:1.6s; }
  @keyframes fpHeroFlota{ 0%,100%{transform:translate3d(0,0,0) rotate(-5deg)} 50%{transform:translate3d(0,-16px,0) rotate(6deg)} }
  /* la palmerita del logo */
  .fp-logo-playa{ display:inline-block; margin-left:6px; font-size:15px; animation:fpLogoPalma 3.6s ease-in-out infinite; }
  @keyframes fpLogoPalma{ 0%,100%{transform:rotate(-9deg)} 50%{transform:rotate(12deg)} }
  html[data-lite="1"] .fp-hero-playa .hp,
  html[data-lite="1"] .fp-logo-playa{ animation:none; }

  /* 👑 atajo al PASE TOTAL dentro del perfil de cada modelo */
  .fp-pase-mini{
    display:flex; align-items:center; gap:10px; width:100%; margin-top:9px; cursor:pointer;
    padding:10px 12px; border-radius:14px; text-align:left;
    border:1px solid rgba(217,178,74,0.5); background:linear-gradient(135deg, rgba(217,178,74,0.14), rgba(157,92,255,0.10));
    color:var(--text); font-family:inherit;
  }
  .fp-pase-mini:active{ transform:scale(0.985); }
  .fp-pase-ico{ font-size:20px; line-height:1; flex-shrink:0; }
  .fp-pase-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
  .fp-pase-txt b{ font-size:12.5px; font-weight:800; letter-spacing:.01em; }
  .fp-pase-txt small{ font-size:11px; color:var(--text-faint); }
  .fp-pase-flecha{ font-size:19px; color:var(--gold2); flex-shrink:0; }
  html[data-evento="summer"] .fp-pase-mini{
    border-color:rgba(255,206,120,0.6);
    background:linear-gradient(135deg, rgba(255,233,190,0.20), rgba(123,240,223,0.14));
  }
  /* 👑 PASE TOTAL más compacto (ocupaba demasiado) */
  .combo-card.fp-compacto{ padding:14px 16px; border-radius:18px; }
  .combo-card.fp-compacto .combo-titulo{ font-size:17px; line-height:1.2; }
  .combo-card.fp-compacto .combo-sub{ font-size:11.5px; line-height:1.45; }
  .combo-card.fp-compacto .combo-canales{ gap:5px; }
  .combo-card.fp-compacto .combo-ch{ font-size:9.5px; padding:2px 7px; }
  .combo-card.fp-compacto .combo-ahora{ font-size:24px; }
  .combo-card.fp-compacto .combo-antes{ font-size:12px; }
  .combo-card.fp-compacto .combo-nota{ font-size:10.5px; }
  .combo-card.fp-compacto .combo-btn{ padding:11px; font-size:13.5px; }

  /* =====================================================================
     v127 — EL GRAN REDISEÑO
     1) Catálogo REVISTA · 2) Ambiente por sala · 3) Ambilight del video
     4) Tarjetas metálicas · 5) Ficha holográfica · 7) Vitrina · 8) Noche
     ===================================================================== */

  /* ---- 1) CATÁLOGO REVISTA: portadas editoriales ---- */
  .vcard-media{position:relative;}
  .vcard-media::after{
    content:''; position:absolute; inset:auto 0 0 0; height:48%; z-index:1; pointer-events:none;
    background:linear-gradient(180deg, transparent, rgba(8,5,12,0.78));
  }
  .vcard-titulo{
    position:absolute; left:14px; right:96px; bottom:9px; z-index:2; pointer-events:none;
    font-family:'Fraunces', serif; font-weight:600; font-size:clamp(23px, 7.6vw, 36px);
    line-height:1.02; color:#FFF8EC; letter-spacing:0.01em;
    text-shadow:0 2px 16px rgba(0,0,0,0.6);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .vip-perfil.bloq:not(.ancha) .vcard-titulo{font-size:clamp(15px, 4.8vw, 22px); left:10px; right:10px; bottom:7px;}
  .vip-bloque > .vip-perfil.bloq.ancha{grid-column:1 / -1;}
  /* la cabecera se vuelve tira de cristal SOBRE la portada (sin nombre chico:
     el nombre ya es el TITULAR de la portada) */
  .vip-perfil.vcard .vcard-head{
    position:absolute; top:0; left:0; right:0; z-index:3; margin:0; padding:9px 11px;
    background:linear-gradient(180deg, rgba(8,5,12,0.6), transparent);
  }
  .vip-perfil.vcard .vcard-head .vcard-nombre{display:none;}
  .vip-perfil.vcard .vcard-inner{position:relative;}
  /* los chips de la portada bajan para no chocar con la tira de arriba */
  .vcard-media .vip-of-candado{top:56px;}
  .vcard-media .new-flag{top:56px;}
  .vcard-media .vcard-precio.dentro, .vcard-media .vcard-precio.invita{top:98px;}
  /* las tarjetas CHICAS (2 por fila) respiran: solo portada + titular + candado */
  .vip-perfil.bloq:not(.ancha) .vcard-head{display:none;}
  .vip-perfil.bloq:not(.ancha) .vcard-media .vip-of-candado{top:8px; right:8px; font-size:8.5px; padding:4px 8px;}
  .vip-perfil.bloq:not(.ancha) .vcard-media .new-flag{top:8px;}
  .vip-perfil.bloq:not(.ancha) .vcard-media .vcard-precio.dentro,
  .vip-perfil.bloq:not(.ancha) .vcard-media .vcard-precio.invita{display:none;}
  /* buscando: la cuadrícula se vuelve pareja (el patrón asimétrico descansa) */
  #vipCuerpo.buscando .vip-bloque > .vip-perfil.bloq.ancha{grid-column:auto;}

  /* ---- 2) AMBIENTE POR SALA: la interfaz respira el color de la sala ---- */
  .fp-ambiente, .fp-ambiente-b{
    position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0;
    transition:opacity 1.1s ease;
  }
  .fp-ambiente.viva, .fp-ambiente-b.viva{opacity:0.6;}
  html[data-lite="1"] .fp-ambiente, html[data-lite="1"] .fp-ambiente-b{transition:none;}

  /* ---- 3) AMBILIGHT: el video proyecta su propia luz ---- */
  .vip-pl-aura{
    position:absolute; left:-8%; top:-8%; width:116%; height:116%; z-index:0;
    filter:blur(42px) saturate(1.7); opacity:0.5; pointer-events:none;
    border-radius:40px;
  }
  .vip-pl-marco{z-index:1;}
  html[data-lite="1"] .vip-pl-aura{display:none;}

  /* ---- 4) TARJETAS METÁLICAS: las cabeceras de categoría ---- */
  .vip-catinfo{
    position:relative; overflow:hidden; border-radius:18px;
    border:1px solid color-mix(in srgb, var(--vap, #C9CFDA) 38%, rgba(255,255,255,0.12));
    background:
      linear-gradient(120deg, color-mix(in srgb, var(--vap, #C9CFDA) 16%, transparent), transparent 45%),
      linear-gradient(135deg, #22232B, #101117 42%, #1C1D25 68%, #0D0E13);
    box-shadow:0 16px 36px -18px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.09);
  }
  .vip-catinfo::before{ /* metal cepillado */
    content:''; position:absolute; inset:0; pointer-events:none; opacity:0.55;
    background:repeating-linear-gradient(115deg, rgba(255,255,255,0.028) 0 1px, transparent 1px 3px);
  }
  .vip-catinfo::after{ /* el reflejo que cruza, como tarjeta de crédito */
    content:''; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(105deg, transparent 42%, color-mix(in srgb, var(--vap, #fff) 14%, rgba(255,255,255,0.09)) 50%, transparent 58%);
    transform:translateX(-130%); animation:fpMetalBrillo 6s ease-in-out infinite;
  }
  @keyframes fpMetalBrillo{0%, 62%{transform:translateX(-130%);} 82%, 100%{transform:translateX(130%);}}
  html[data-lite="1"] .vip-catinfo::after{animation:none; display:none;}
  .vip-catinfo > *{position:relative; z-index:1;}
  /* los sellos de nivel, como plaquitas de metal */
  .card-nivel{
    border:1px solid color-mix(in srgb, var(--chc, #C9CFDA) 55%, transparent);
    background:linear-gradient(135deg, rgba(40,41,50,0.92), rgba(14,15,20,0.94)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.14), 0 3px 10px -4px rgba(0,0,0,0.7);
    text-shadow:0 1px 2px rgba(0,0,0,0.6);
  }

  /* ---- 5) FICHA HOLOGRÁFICA: brillo foil que sigue al teléfono ---- */
  .ficha-holo{
    position:absolute; inset:0 0 auto 0; height:46%; z-index:2; pointer-events:none; mix-blend-mode:screen; opacity:0.5;
    background:
      radial-gradient(120% 90% at var(--hx, 70%) var(--hy, 20%),
        rgba(255,220,150,0.34), rgba(190,140,255,0.14) 38%, rgba(80,200,220,0.08) 60%, transparent 75%);
    transition:opacity .4s ease;
  }
  html[data-lite="1"] .ficha-holo{display:none;}

  /* ---- 7) LA VITRINA: el aparador que trabaja solo ---- */
  .fp-vitrina{
    position:fixed; inset:0; z-index:1980; background:#050308;
    display:flex; align-items:flex-end; overflow:hidden; cursor:pointer;
    animation:fpVitrinaEntra .8s ease both;
  }
  @keyframes fpVitrinaEntra{from{opacity:0;} to{opacity:1;}}
  .fp-vitrina img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 20%;
    animation:fpVitrinaKen 9s ease-in-out both; opacity:0; transition:opacity 1.1s ease;
  }
  .fp-vitrina img.viva{opacity:1;}
  @keyframes fpVitrinaKen{from{transform:scale(1.02);} to{transform:scale(1.12) translateY(-1.5%);}}
  .fp-vitrina::after{
    content:''; position:absolute; inset:auto 0 0 0; height:55%;
    background:linear-gradient(180deg, transparent, rgba(4,2,7,0.92));
  }
  .fp-vitrina-info{position:relative; z-index:2; padding:0 26px calc(46px + env(safe-area-inset-bottom)); width:100%;}
  .fp-vitrina-sala{
    display:inline-flex; align-items:center; gap:6px; margin-bottom:10px; padding:6px 13px; border-radius:999px;
    font-size:10px; font-weight:800; letter-spacing:0.14em; color:var(--vtc, #F5D488);
    border:1px solid color-mix(in srgb, var(--vtc, #F5D488) 55%, transparent);
    background:rgba(8,5,12,0.6);
  }
  .fp-vitrina-nombre{
    font-family:'Fraunces', serif; font-weight:600; font-size:clamp(38px, 12vw, 64px);
    line-height:1; color:#FFF8EC; text-shadow:0 3px 24px rgba(0,0,0,0.7);
  }
  .fp-vitrina-toca{
    margin-top:14px; font-size:11px; font-weight:700; letter-spacing:0.12em; color:var(--text-faint);
    animation:fpVitrinaLate 2.2s ease-in-out infinite;
  }
  @keyframes fpVitrinaLate{0%,100%{opacity:0.45;} 50%{opacity:1;}}

  /* ---- 8) DESPUÉS DE MEDIANOCHE: negro OLED y oro tibio ---- */
  html.fp-noche{
    --bg:#000000; --bg-2:#070709; --surface:#0C0C10; --surface-2:#131318;
    --gold:#EDB458; --gold-soft:#F3CD82;
  }
  html.fp-noche .aurora{opacity:0.5;}
  html.fp-noche nav#top{background:rgba(0,0,0,0.85);}

  /* =====================================================================
     v128 — PULIDO DEL REDISEÑO (lo que pidió Luis)
     ===================================================================== */
  /* nada tapa el TITULAR: fuera los chips que vivían sobre la foto */
  .vip-perfil.vcard .card-nivel{display:none;}
  .vip-perfil.vcard .vcard-cont{display:none;}
  .vip-perfil.vcard .vcard-precio{display:none !important;}
  .vcard-titulo{right:14px; font-size:var(--ts, clamp(23px, 7.6vw, 36px));}
  .vip-perfil.bloq:not(.ancha) .vcard-titulo{font-size:calc(var(--ts, 24px) * 0.62); left:10px; right:10px; bottom:7px;}
  /* todo más COMPACTO */
  .vip-perfil{margin-bottom:12px;}
  .vip-perfil.vcard .vcard-body{padding:8px 11px 10px; gap:7px;}
  .vip-bloque{gap:10px;}
  .vip-saludo{margin:2px 0 8px;}
  html.solo-zona #vipZona.dentro .vip-tabs{margin-bottom:6px; padding-top:2px;}
  .vip-subnav{margin:0 0 10px;}
  .vip-apartado{margin:8px 0 8px;}
  .vip-catinfo{margin-bottom:10px;}
  .vcard-stats{font-size:10.5px; gap:8px; min-height:16px;}
  /* la BIENVENIDA metálica de cada categoría */
  .vip-cat-bienv{display:flex; flex-direction:column; gap:1px; margin-bottom:10px;}
  .vip-cat-bienv small{font-size:9.5px; font-weight:800; letter-spacing:0.18em; text-transform:uppercase; color:var(--text-faint);}
  .vip-cat-bienv b{
    font-family:'Fraunces', serif; font-weight:600; font-size:clamp(21px, 6.4vw, 30px); line-height:1.08;
    background:linear-gradient(100deg, #FFFFFF, var(--vap, #C9CFDA) 38%, color-mix(in srgb, var(--vap, #C9CFDA) 55%, #6A6F7A) 62%, #FFFFFF 90%);
    background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
    animation:fpMetalTexto 5.5s ease-in-out infinite;
  }
  @keyframes fpMetalTexto{0%, 100%{background-position:0% 50%;} 50%{background-position:100% 50%;}}
  html[data-lite="1"] .vip-cat-bienv b{animation:none;}
  .vip-cat-bienv span{font-size:11px; color:var(--text-dim);}
  /* ULTRA con su color BUENARDO: iridiscente tornasol */
  .vip-catinfo[data-cat="ultra"]{
    border:1.5px solid transparent;
    background:
      linear-gradient(135deg, #17131F, #0D0A13 55%, #141019) padding-box,
      linear-gradient(110deg, #FFD97A, #FF7EB8, #9A6BFF, #4EE6D2, #FFD97A) border-box;
    background-size:100% 100%, 320% 100%;
    animation:fpIrisBorde 7s linear infinite;
  }
  @keyframes fpIrisBorde{to{background-position:0 0, 320% 0;}}
  .vip-catinfo[data-cat="ultra"] .vip-cat-bienv b{
    background:linear-gradient(100deg, #FFE9A8, #FF9ECF 30%, #B79CF0 55%, #7FE3D9 78%, #FFE9A8);
    background-size:300% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
    animation:fpMetalTexto 4.5s ease-in-out infinite;
  }
  html[data-lite="1"] .vip-catinfo[data-cat="ultra"]{animation:none;}
  .vip-tab[data-canal="ultra"]{
    border:1.5px solid transparent;
    background:linear-gradient(160deg, #171320, #0E0B14) padding-box,
      linear-gradient(110deg, #FFD97A, #FF7EB8, #9A6BFF, #4EE6D2, #FFD97A) border-box;
    background-size:100% 100%, 320% 100%; color:#F3CD82;
  }
  .vip-tab[data-canal="ultra"].activa{
    color:#141019;
    background:linear-gradient(110deg, #FFD97A, #FF9ECF, #B79CF0, #7FE3D9) padding-box,
      linear-gradient(110deg, #FFD97A, #FF7EB8, #9A6BFF, #4EE6D2) border-box;
  }
  /* la botonera P1…P5: plaquitas metálicas LEGIBLES siempre */
  .vip-subnav-btn{
    flex-direction:column; gap:0; min-width:64px; padding:7px 12px; border-radius:13px; opacity:1;
    background:linear-gradient(160deg, color-mix(in srgb, var(--vap, #C9CFDA) 16%, #17171D), #0E0E13);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.09);
  }
  .vip-subnav-btn b{font-size:14px; letter-spacing:0.04em;}
  .vip-subnav-btn small{font-size:8px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-faint); margin-top:1px;}
  .vip-subnav-btn.on{
    background:linear-gradient(160deg, rgba(255,255,255,0.5), transparent 40%), var(--vap, #E8B94A);
    box-shadow:0 10px 24px -10px var(--vap, #E8B94A), inset 0 1px 0 rgba(255,255,255,0.55);
  }
  .vip-subnav-btn.on b, .vip-subnav-btn.on small{color:#141019 !important;}
  /* CONTRASTE garantizado en todo lo "activo" de categorías: texto oscuro
     sobre el metal claro — se lee SIEMPRE */
  .chip.active, .chip.active b, .chip.active i,
  .vip-tab.activa, .vip-tab.activa i{color:#141019 !important; text-shadow:none;}
  /* la ficha se identifica con su categoría (mismo lenguaje metálico) */
  .ficha-cat{
    display:inline-flex; align-items:baseline; gap:6px; margin:4px 0 2px; padding:5px 12px; border-radius:999px;
    font-size:10.5px; font-weight:800; letter-spacing:0.09em;
    color:color-mix(in srgb, var(--vap, #E8B94A) 80%, #fff);
    background:linear-gradient(160deg, color-mix(in srgb, var(--vap, #E8B94A) 18%, #16131D), #0D0B12);
    border:1px solid color-mix(in srgb, var(--vap, #E8B94A) 45%, transparent);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.1);
  }
  .ficha-cat small{font-size:8.5px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-faint);}
  .ficha-cat.ultra{
    border:1.5px solid transparent;
    background:linear-gradient(160deg, #171320, #0E0B14) padding-box,
      linear-gradient(110deg, #FFD97A, #FF7EB8, #9A6BFF, #4EE6D2, #FFD97A) border-box;
    color:#F3CD82;
  }

  /* =========================================================================
     v130 — LA BOTONERA DE NIVELES HECHA JOYERÍA.
     Cada botón es un lingote: numeral en serif grande, cara metálica con su
     color de nivel, bisel de luz arriba y un destello que lo recorre cada
     tanto. El activo se enciende en metal pulido con texto oscuro.
     ========================================================================= */
  .vip-subnav{gap:9px; padding:3px 2px 5px;}
  .vip-subnav-btn{
    position:relative; overflow:hidden; flex-direction:row; align-items:center; gap:9px;
    min-width:auto; padding:9px 14px; border-radius:14px; opacity:1;
    border:1px solid color-mix(in srgb, var(--vap, #C9CFDA) 38%, transparent);
    background:
      linear-gradient(160deg, rgba(255,255,255,0.09), transparent 42%),
      linear-gradient(160deg, color-mix(in srgb, var(--vap, #C9CFDA) 20%, #15151B), #0C0C11);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.12), 0 8px 20px -14px rgba(0,0,0,0.9);
  }
  .vip-subnav-btn .sbn-num{
    font-family:'Fraunces', serif; font-size:23px; font-weight:600; line-height:1;
    background:linear-gradient(175deg, #FFFFFF, var(--vap, #C9CFDA) 55%, color-mix(in srgb, var(--vap, #C9CFDA) 55%, #000));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .vip-subnav-btn .sbn-cara{display:flex; flex-direction:column; align-items:flex-start; gap:1px;}
  .vip-subnav-btn .sbn-cara b{font-size:11px; letter-spacing:0.14em; color:color-mix(in srgb, var(--vap, #C9CFDA) 85%, #fff);}
  .vip-subnav-btn .sbn-cara small{font-size:8px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-faint); margin:0;}
  .vip-subnav-btn .sbn-luz{
    position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.14) 50%, transparent 60%);
    transform:translateX(-130%); animation:fpBrilloPasa 5.2s ease-in-out infinite;
  }
  .vip-subnav-btn:nth-child(2) .sbn-luz{animation-delay:0.7s;}
  .vip-subnav-btn:nth-child(3) .sbn-luz{animation-delay:1.4s;}
  .vip-subnav-btn:nth-child(4) .sbn-luz{animation-delay:2.1s;}
  .vip-subnav-btn:nth-child(5) .sbn-luz{animation-delay:2.8s;}
  .vip-subnav-btn:nth-child(6) .sbn-luz{animation-delay:3.5s;}
  html[data-lite="1"] .vip-subnav-btn .sbn-luz{display:none;}
  .vip-subnav-btn.on{
    border-color:transparent;
    background:linear-gradient(160deg, rgba(255,255,255,0.55), transparent 45%), var(--vap, #E8B94A);
    box-shadow:0 12px 28px -12px var(--vap, #E8B94A), inset 0 1px 0 rgba(255,255,255,0.6);
  }
  .vip-subnav-btn.on .sbn-num{background:none; -webkit-text-fill-color:#141019; color:#141019;}
  .vip-subnav-btn.on .sbn-cara b, .vip-subnav-btn.on .sbn-cara small{color:#141019 !important;}

  /* ---- v130: el aviso del PRECIO POR CATEGORÍA, con diseño de verdad ---- */
  .vip-aclara{
    display:flex; align-items:center; gap:12px; margin:0 0 11px; padding:12px 14px;
    border-radius:15px; border:1px solid rgba(232,185,74,0.32);
    background:
      linear-gradient(160deg, rgba(255,255,255,0.05), transparent 45%),
      linear-gradient(135deg, #191624, #100D17);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.07);
  }
  .vip-aclara-sello{
    flex-shrink:0; width:38px; height:38px; border-radius:12px;
    display:flex; align-items:center; justify-content:center; font-size:17px; color:#231604;
    background:linear-gradient(160deg, #FFE9A8, #F2B93E 55%, #D9910F);
    box-shadow:0 10px 22px -10px rgba(242,185,62,0.7), inset 0 1px 0 rgba(255,255,255,0.55);
  }
  .vip-aclara-cuerpo{display:flex; flex-direction:column; gap:2px; font-size:11.5px; line-height:1.55; color:var(--text-dim);}
  .vip-aclara-tit{
    font-size:10px; font-weight:800; letter-spacing:0.16em;
    background:linear-gradient(100deg, #FFF3CB, #E8B94A 55%, #FFF3CB);
    background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
    animation:fpMetalTexto 6s ease-in-out infinite;
  }
  html[data-lite="1"] .vip-aclara-tit{animation:none;}
  .vip-aclara-cuerpo b{color:var(--gold-soft);}
  .vip-aclara-emo{display:none;} /* el emoji viejo, retirado */

  /* ---- v130: la BIENVENIDA de categoría en clave editorial ---- */
  .vip-cat-bienv{align-items:center; text-align:center; gap:3px; padding:2px 0 6px;}
  .vip-cat-bienv .vcb-fila{display:flex; align-items:center; gap:10px; width:100%; justify-content:center;}
  .vip-cat-bienv .vcb-filete{
    flex:0 1 64px; height:1px;
    background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--vap, #E8B94A) 65%, transparent));
  }
  .vip-cat-bienv .vcb-fila .vcb-filete:last-child{transform:scaleX(-1);}
  .vip-cat-bienv small{font-size:9px; letter-spacing:0.24em;}
  .vip-cat-bienv b{font-size:clamp(19px, 5.6vw, 24px);}
  .vip-cat-bienv .vcb-gema{
    width:7px; height:7px; transform:rotate(45deg); margin-top:3px;
    background:linear-gradient(160deg, #FFF3CB, var(--vap, #E8B94A) 60%, color-mix(in srgb, var(--vap, #E8B94A) 50%, #000));
    box-shadow:0 0 12px color-mix(in srgb, var(--vap, #E8B94A) 55%, transparent);
  }
  .vip-catinfo-sem i{color:var(--vap, #E8B94A); font-size:12px;}
  .vip-catinfo-misma i, .vip-catinfo-ok i{font-size:12px;}
  .vip-seguro-chip i{font-size:11px; color:var(--gold-soft); margin-right:2px;}
  .vip-combo-ico i{font-size:15px;}
  .vip-toplinea-tit i{color:#F2B93E;}
  .topfan-num{
    display:inline-flex; align-items:center; justify-content:center;
    width:15px; height:15px; border-radius:50%; font-size:8.5px; font-weight:900;
    color:#141019; background:linear-gradient(160deg, #FFE9A8, #D9910F);
  }

  /* =========================================================================
     v130 — LA BARRA SUPERIOR, pulida: vidrio más fino, filete dorado abajo,
     botones redondos consistentes y sin el botón de Telegram (retirado).
     ========================================================================= */
  nav#top{
    border-bottom:1px solid transparent;
    border-image:linear-gradient(90deg, transparent 4%, rgba(232,185,74,0.4) 50%, transparent 96%) 1;
  }
  .nav-toggles{gap:7px;}
  .icon-toggle{
    border-radius:999px; border:1px solid var(--line-strong);
    background:linear-gradient(160deg, rgba(255,255,255,0.06), transparent 50%), rgba(22,22,28,0.72);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.08);
  }
  /* el botón LITE escondido de verdad para quien no es cliente (el
     display:flex de arriba le ganaba al atributo hidden) */
  .icon-toggle[hidden]{display:none !important;}
  .icon-toggle:active{transform:scale(0.92);}
  #cuentaBtn{
    color:#F2CE79; border-color:rgba(232,185,74,0.45);
    background:linear-gradient(160deg, rgba(232,185,74,0.16), transparent 55%), rgba(22,22,28,0.72);
  }
  .brand .wordmark{letter-spacing:0.08em;}
  /* compatibilidad: la barra respeta el notch y las pantallas mini */
  nav#top .wrap{padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right));}
  @media (max-width:340px){ .brand .wordmark{font-size:13px;} }

  /* =========================================================================
     v132 — LA TARJETA QUE PIDE LOS AVISOS y EL MURO DE LA APP.
     Las dos comparten look: fondo oscuro con vidrio, sello dorado arriba,
     tipografía editorial y un solo botón que se ve caro.
     ========================================================================= */
  .fp-pide, .fp-muro{
    position:fixed; inset:0; z-index:400; display:flex; align-items:center; justify-content:center;
    padding:24px calc(20px + env(safe-area-inset-left)) calc(24px + env(safe-area-inset-bottom));
    background:rgba(6,4,10,0.86); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    opacity:0; transition:opacity .26s ease;
  }
  .fp-pide.on, .fp-muro.on{opacity:1;}
  html[data-lite="1"] .fp-pide, html[data-lite="1"] .fp-muro{backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(6,4,10,0.96); transition:none;}
  .fp-pide-caja, .fp-muro-caja{
    width:100%; max-width:340px; text-align:center; padding:26px 22px 20px; border-radius:26px;
    display:flex; flex-direction:column; align-items:center; gap:11px;
    background:linear-gradient(165deg, #1B1726, #100D18 72%);
    border:1px solid rgba(232,185,74,0.34);
    box-shadow:0 34px 80px -32px rgba(0,0,0,0.95), inset 0 1px 0 rgba(255,255,255,0.06);
    transform:translateY(14px) scale(0.97); transition:transform .3s var(--ease-bounce, ease);
  }
  .fp-pide.on .fp-pide-caja, .fp-muro.on .fp-muro-caja{transform:none;}
  html[data-lite="1"] .fp-pide-caja, html[data-lite="1"] .fp-muro-caja{transform:none; transition:none;}
  .fp-pide-ico, .fp-muro-ico{
    width:62px; height:62px; border-radius:20px; display:flex; align-items:center; justify-content:center;
    font-size:28px; color:#231604;
    background:linear-gradient(160deg, #FFE9A8, #EFC55C 55%, #B87A1C);
    box-shadow:0 18px 40px -16px rgba(239,197,92,0.7), inset 0 1px 0 rgba(255,255,255,0.55);
  }
  .fp-pide-tit, .fp-muro-tit{
    font-family:'Fraunces', serif; font-size:23px; font-weight:600; line-height:1.2; color:#fff; text-transform:none;
  }
  .fp-pide-txt, .fp-muro-txt{font-size:12.5px; line-height:1.7; color:var(--text-dim); text-transform:none;}
  .fp-pide-txt b, .fp-muro-txt b{color:var(--gold-soft, #EFC55C);}
  .fp-pide-si, .fp-muro-btn{
    width:100%; margin-top:5px; padding:15px; border:0; border-radius:999px; cursor:pointer; font-family:inherit;
    font-size:12.5px; font-weight:900; letter-spacing:0.12em; text-transform:uppercase; color:#231604;
    display:flex; align-items:center; justify-content:center; gap:8px;
    background:linear-gradient(160deg, #FFE9A8, #EFC55C 55%, #B87A1C);
    box-shadow:0 18px 40px -16px rgba(239,197,92,0.8), inset 0 1px 0 rgba(255,255,255,0.55);
  }
  .fp-pide-si:active, .fp-muro-btn:active{transform:scale(0.97);}
  .fp-pide-no, .fp-muro-no{
    background:none; border:0; cursor:pointer; font-family:inherit; padding:6px;
    font-size:11.5px; color:var(--text-faint); text-transform:none;
  }
  .fp-muro-pasos{
    text-align:left; margin:4px 0 2px; padding-left:20px; display:flex; flex-direction:column; gap:8px;
    font-size:12px; line-height:1.55; color:var(--text-dim); text-transform:none;
  }
  .fp-muro-pasos b{color:#fff;}
  .fp-muro-pasos i{color:var(--gold-soft, #EFC55C);}
  .fp-muro-nota, .fp-muro-pie{font-size:11px; color:var(--text-faint); line-height:1.6; text-transform:none;}
  .fp-muro-pie{margin-top:4px; border-top:1px solid var(--line); padding-top:11px; width:100%;}

  /* ---- v130: en modo LITE todo lo de arriba queda PLANO y azul ---- */
  html.fp-lite2 .vip-subnav-btn{background:#121F30 !important; border:1px solid rgba(126,166,214,0.25) !important; box-shadow:none !important;}
  html.fp-lite2 .vip-subnav-btn .sbn-num{background:none; -webkit-text-fill-color:#7FB2DE; color:#7FB2DE;}
  html.fp-lite2 .vip-subnav-btn.on{background:#2F6AA6 !important;}
  html.fp-lite2 .vip-subnav-btn.on .sbn-cara b, html.fp-lite2 .vip-subnav-btn.on .sbn-cara small, html.fp-lite2 .vip-subnav-btn.on b{color:#F2F7FC !important;}
  html.fp-lite2 .vip-subnav-btn.on .sbn-num{background:none; -webkit-text-fill-color:#F2F7FC; color:#F2F7FC;}
  html.fp-lite2 .vip-tab{background:#121F30 !important; border:1px solid rgba(126,166,214,0.25) !important; color:#A9CDEA !important;}
  html.fp-lite2 .vip-tab.activa{background:#2F6AA6 !important; color:#F2F7FC !important;}
  html.fp-lite2 .vip-tab.activa i{color:#F2F7FC !important;}
  html.fp-lite2 .vip-desbloq, html.fp-lite2 .tv-cta-pill, html.fp-lite2 .floating-cta{background:#2F6AA6 !important; color:#F2F7FC !important; box-shadow:none !important; text-transform:none;}
  html.fp-lite2 .vip-aclara{background:#121F30 !important; border:1px solid rgba(126,166,214,0.25) !important;}
  html.fp-lite2 .vip-aclara-sello{background:#2F6AA6 !important; color:#F2F7FC !important; box-shadow:none !important;}
  html.fp-lite2 .vip-aclara-tit{background:none; -webkit-text-fill-color:#A9CDEA; color:#A9CDEA; animation:none;}


/* ===== v141 — aviso de carga y de error en el visor VIP ===== */
.vip-visor-carga{
  position:absolute; inset:0; z-index:4; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px; text-align:center;
  padding:26px; font-size:14px; color:#cfc4e2; background:rgba(8,6,12,.82);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.vip-visor-carga small{ display:block; margin-top:7px; font-size:12.5px; color:#9a8fae; }
.vip-visor-carga.malo{ color:#ffb4b4; }
.vip-visor-carga.malo .vip-visor-rueda{ display:none; }
.vip-visor-rueda{
  width:32px; height:32px; border-radius:50%;
  border:3px solid rgba(255,255,255,.16); border-top-color:#a855f7;
  animation:vip-visor-gira .8s linear infinite;
}
@keyframes vip-visor-gira{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion:reduce){ .vip-visor-rueda{ animation:none } }

/* =====================================================================
   v149 — TANDA 1 DEL CATÁLOGO PREMIUM
   ===================================================================== */
/* la página ya no se mueve de lado, y el buscador ya no hace zoom en iPhone */
html, body{overflow-x:clip;}
#catalogSearch{font-size:16px;}
input[type="search"], input[type="text"]{font-size:max(16px, 1em);}

/* splash de arranque: FP que se abre a FansPremium */
#fpSplash{position:fixed; inset:0; z-index:9999; background:#0B0712; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:18px; transition:opacity .5s ease, visibility .5s;}
#fpSplash.off{opacity:0; visibility:hidden; pointer-events:none;}
.fps-logo{font-family:'Fraunces', serif; font-weight:900; font-size:44px; letter-spacing:-0.01em;
  color:#fff; display:flex; align-items:baseline; white-space:nowrap;}
.fps-logo b{background:linear-gradient(135deg,#FFF1C8,#F5C95C 40%,#D89C25); -webkit-background-clip:text;
  background-clip:text; color:transparent; font-weight:900;}
.fps-logo span{display:inline-block; max-width:0; opacity:0; overflow:hidden; color:#E9E2F4;
  font-weight:600; animation:fpsAbre 1s cubic-bezier(.2,.8,.2,1) .55s forwards;}
@keyframes fpsAbre{to{max-width:200px; opacity:1;}}
.fps-linea{width:52px; height:3px; border-radius:99px; background:linear-gradient(90deg,#a855f7,#F5C95C);
  animation:fpsLinea 1.2s ease .4s both;}
@keyframes fpsLinea{from{width:0; opacity:0;} to{width:52px; opacity:1;}}

/* rejilla: DOS cuadros completos en el teléfono, bien respirados */
@media (max-width:640px){ .catalog-grid{grid-template-columns:repeat(2, 1fr); gap:12px;} }

/* tarjetas sin video: portada con brillo premium al pasar + sello adelanto */
.card-adelanto{position:absolute; left:10px; bottom:10px; z-index:2; display:inline-flex; align-items:center;
  gap:5px; padding:6px 11px; border-radius:999px; font-size:10px; font-weight:800; letter-spacing:0.08em;
  text-transform:uppercase; color:#1C1229; background:linear-gradient(135deg,#FFE9A8,#F2B93E);
  box-shadow:0 8px 18px -8px rgba(0,0,0,0.7);}
.card-adelanto i{font-size:11px;}

/* chips de categorías: pastillas REDONDAS, cada una con SU color premium */
.chip{border-radius:999px !important; border:1.5px solid color-mix(in srgb, var(--chc, #E4CD8B) 55%, transparent) !important;
  color:color-mix(in srgb, var(--chc, #E4CD8B) 85%, #fff) !important;
  background:color-mix(in srgb, var(--chc, #E4CD8B) 10%, rgba(20,14,28,0.85)) !important;}
.chip.active{background:color-mix(in srgb, var(--chc, #E4CD8B) 26%, rgba(20,14,28,0.9)) !important;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--chc, #E4CD8B) 60%, transparent),
             0 8px 22px -10px color-mix(in srgb, var(--chc, #E4CD8B) 70%, transparent) !important;}
/* ULTRA: la joya de la corona — degradado vivo que respira */
.chip[data-grupo*="ultra"]{border:1.5px solid transparent !important; color:#1C1229 !important; font-weight:900 !important;
  background:linear-gradient(120deg,#FFE9A8,#F2B93E,#a855f7,#FFE9A8) !important; background-size:280% 280% !important;
  animation:fpUltraVivo 5s ease infinite;}
@keyframes fpUltraVivo{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}
html[data-lite="1"] .chip[data-grupo*="ultra"]{animation:none;}

/* barra estilo Apple: translúcida con vidrio esmerilado */
.site-nav, .catalog-sticky, .cat-filter-bar{background:rgba(11,7,18,0.6) !important;
  backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3);}
html[data-lite="1"] .site-nav, html[data-lite="1"] .catalog-sticky, html[data-lite="1"] .cat-filter-bar{
  backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(11,7,18,0.96) !important;}

/* el buscador arranca escondido: la lupa lo abre y lo cierra */
.catalog-search{display:none;}
body.fp-buscando .catalog-search{display:flex;}
#lupaToggle.activo{color:#F5C95C;}
/* v151 — la lupa vive SIEMPRE en la barra: en modo zona te lleva al buscador
   PRO de la Zona VIP y lo enfoca (esto resuelve el pendiente de la v149,
   cuando en modo zona quedaba escondida y parecía rota) */

/* =========================================================================
   v151 — TANDA 2 DEL CATÁLOGO PREMIUM
   ========================================================================= */

/* ---- 1) EL SALUDO DE BIENVENIDA: una tira ligera (cero animaciones de
   arranque) cuyo filo dorado toma el color de la categoría donde andas ---- */
.vip-saludo{
  display:flex; align-items:center; gap:10px; margin:0 0 11px; padding:11px 13px;
  border-radius:15px; background:linear-gradient(120deg, rgba(20,14,30,0.92), rgba(14,10,22,0.94));
  border:1px solid color-mix(in srgb, var(--vsc, #F5D488) 42%, transparent);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.03), 0 12px 30px -22px color-mix(in srgb, var(--vsc, #F5D488) 60%, transparent);
  transition:border-color .5s ease, box-shadow .5s ease;
}
.vip-saludo-gema{
  flex:0 0 auto; width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  border-radius:10px; color:#181022; font-size:15px;
  background:linear-gradient(150deg, #FFF3CE, var(--vsc, #F5D488) 60%, color-mix(in srgb, var(--vsc, #F5D488) 55%, #6b4e12));
  box-shadow:0 6px 16px -8px color-mix(in srgb, var(--vsc, #F5D488) 80%, transparent);
  transition:background .5s ease;
}
.vip-saludo-txt{flex:1; min-width:0; font-size:13px; font-weight:600; color:rgba(255,255,255,0.88); line-height:1.35;
  white-space:normal; overflow:visible; text-transform:none; letter-spacing:normal;} /* blindado: una regla global de la zona heredaba nowrap+mayúsculas y cortaba la frase */
.vip-saludo-txt b{color:#FFE9A8; font-weight:800;}
.vip-saludo-cat{
  flex:0 0 auto; font-size:9px; font-weight:900; letter-spacing:0.14em; text-transform:uppercase;
  padding:5px 10px; border-radius:999px; color:var(--vsc, #F5D488);
  border:1px solid color-mix(in srgb, var(--vsc, #F5D488) 55%, transparent);
  background:color-mix(in srgb, var(--vsc, #F5D488) 10%, transparent);
  transition:color .5s ease, border-color .5s ease, background .5s ease;
}
.vip-saludo.tab-fuera{display:flex;} /* el saludo se queda aunque elijas nivel: solo cambia de color */

/* ---- 2) EL BANNER "DESBLOQUEA AHORA" SIN MOSAICO: fondo de lujo fijo ---- */
.vip-tv.sin-fondo{
  background:
    radial-gradient(120% 150% at 18% 0%, rgba(168,85,247,0.20), transparent 55%),
    radial-gradient(110% 140% at 85% 100%, rgba(242,185,62,0.16), transparent 52%),
    linear-gradient(150deg, #17101F, #0C0913 62%, #120C1B);
}
.tv-lujo{position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 90% at 50% 118%, rgba(242,185,62,0.14), transparent 60%),
    repeating-linear-gradient(115deg, transparent 0 26px, rgba(245,212,136,0.03) 26px 27px);
}

/* ---- 3) LOS MÁS POPULARES (vistas y ❤ reales) ---- */
.vip-populares{margin:2px 0 12px;}
.vip-favs-tit.pop i{color:#FF9E80;}
.vip-favs-tit.cc i{color:#F5C95C;}
.vip-pop-fila{
  display:flex; gap:9px; overflow-x:auto; padding:4px 2px 8px; scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.vip-pop-fila::-webkit-scrollbar{display:none;}
.vip-pop-card{
  position:relative; flex:0 0 auto; width:108px; scroll-snap-align:start;
  display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 8px 10px;
  border-radius:15px; cursor:pointer; text-align:center;
  background:linear-gradient(160deg, rgba(22,16,32,0.95), rgba(13,10,20,0.95));
  border:1px solid color-mix(in srgb, var(--vpc, #F5D488) 34%, transparent);
}
.vip-pop-card:active{transform:scale(0.96);}
.vip-pop-rank{
  position:absolute; top:6px; left:7px; font-size:13px; line-height:1;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,0.6));
}
.vip-pop-ava{
  width:52px; height:52px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:18px; color:#F5D488; background:#1B1428;
  border:2px solid color-mix(in srgb, var(--vpc, #F5D488) 70%, transparent);
  box-shadow:0 8px 18px -10px color-mix(in srgb, var(--vpc, #F5D488) 75%, transparent);
}
.vip-pop-ava img{width:100%; height:100%; object-fit:cover; object-position:center 18%;}
.vip-pop-nom{
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:11.5px; font-weight:800; color:rgba(255,255,255,0.92);
}
.vip-pop-dato{font-size:10px; font-weight:700; color:rgba(245,212,136,0.85); display:flex; align-items:center; gap:3px;}
.vip-pop-dato i{font-size:11px;}
.vip-pop-dato .ti-heart-filled{color:#FF7E9D;}

/* ---- 4) LAS MÁS COMPRADAS (desbloqueos reales de 7 días) ---- */
.vip-catcompras{margin:2px 0 12px;}
.vip-cc-fila{display:flex; flex-direction:column; gap:7px;}
.vip-cc-chip{
  display:flex; align-items:center; gap:11px; width:100%; padding:10px 13px;
  border-radius:13px; cursor:pointer; text-align:left;
  background:linear-gradient(120deg, rgba(22,16,32,0.95), rgba(13,10,20,0.95));
  border:1px solid color-mix(in srgb, var(--vcc, #F5D488) 36%, transparent);
}
.vip-cc-chip:active{transform:scale(0.985);}
.vip-cc-pos{
  flex:0 0 auto; width:24px; height:24px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces', serif; font-weight:700; font-size:13px; color:#181022;
  background:linear-gradient(150deg, #FFF3CE, var(--vcc, #F5D488) 65%);
}
.vip-cc-nom{flex:1; min-width:0; font-size:12.5px; font-weight:900; letter-spacing:0.05em; color:var(--vcc, #F5D488);}
.vip-cc-n{flex:0 0 auto; font-size:11px; font-weight:700; color:rgba(255,255,255,0.78);}
.vip-cc-n b{color:#FFE9A8;}
.vip-populares.tab-fuera, .vip-catcompras.tab-fuera{display:none;}

/* ---- 5) LA FICHA DEL MODELO: sliders de FOTOS y de VIDEOS ---- */
.ficha-bloque{margin:0 0 16px;}
.ficha-slider-tit{
  display:flex; align-items:center; gap:7px; margin:0 0 8px;
  font-size:11px; font-weight:900; letter-spacing:0.14em; text-transform:uppercase; color:#F5D488;
}
.ficha-slider-tit i{font-size:14px;}
.ficha-slider-tit b{
  font-size:10px; padding:2px 8px; border-radius:999px; letter-spacing:0.02em;
  color:#FFE9A8; background:rgba(245,212,136,0.12); border:1px solid rgba(245,212,136,0.3);
}
.ficha-slider-tit .ficha-slider-pista{
  margin-left:auto; display:inline-flex; align-items:center; gap:2px;
  font-size:9px; font-weight:800; letter-spacing:0.1em; color:rgba(255,255,255,0.45);
}
.ficha-slider{
  display:flex; gap:7px; overflow-x:auto; padding:2px 2px 10px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.ficha-slider::-webkit-scrollbar{display:none;}
.ficha-slider .ficha-tile{
  flex:0 0 auto; width:min(44vw, 200px); scroll-snap-align:start;
  contain-intrinsic-size:176px 234px;
}
@media (min-width:560px){ .ficha-slider .ficha-tile{width:200px;} }

/* ---- 6) LA INSIGNIA "MODELO DESBLOQUEADO" ---- */
.ficha-sello.desb{
  display:inline-flex; align-items:center; gap:5px;
  color:#231604; border:1px solid rgba(255,255,255,0.4);
  background:linear-gradient(160deg, #FFE9A8, #F2B93E 55%, #D9910F);
  box-shadow:0 10px 26px -12px rgba(242,185,62,0.85), inset 0 1px 0 rgba(255,255,255,0.55);
  overflow:hidden; position:absolute;
}
.ficha-sello.desb i{font-size:11px;}
.ficha-sello.desb::after{
  content:''; position:absolute; top:-40%; bottom:-40%; width:36%; left:-50%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,0.65), transparent);
  transform:skewX(-18deg); animation:fpSelloBrillo 4.2s ease-in-out infinite;
}
@keyframes fpSelloBrillo{0%, 62%{left:-50%;} 88%, 100%{left:130%;}}
html[data-lite="1"] .ficha-sello.desb::after{animation:none; display:none;}

/* ---- 7) LA MARCA EN RELEVOS SOBRE FOTOS: los sellos también viven en el
   lienzo y en el modo "mantén presionado" (mismas clases del reproductor) ---- */
.vip-lienzo .vip-pl-sello, .vip-hold .vip-pl-sello{z-index:4;}
.vip-hold:not(.viendo) .vip-pl-sello{opacity:0 !important;} /* con la foto borrosa no hace falta */

/* =========================================================================
   v160 — EL MURO DE RESEÑAS PRO
   ========================================================================= */
/* el resumen: promedio grandote + barras reales de 5★ a 1★ */
.t-resumen{
  display:flex; gap:18px; align-items:center; margin:0 0 14px; padding:16px 18px;
  border-radius:16px; background:linear-gradient(150deg, rgba(26,19,38,0.9), rgba(14,10,22,0.92));
  border:1px solid rgba(232,185,74,0.3);
}
.t-res-izq{flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:3px; min-width:112px;}
.t-res-izq b{font-family:'Fraunces', serif; font-size:44px; line-height:1; color:#FFE9A8;}
.t-res-est{font-size:15px; letter-spacing:2px; color:var(--gold-soft, #E8B94A);}
.t-res-est i{font-style:normal; opacity:0.25;}
.t-res-izq small{font-size:10px; color:var(--text-faint, #8A7FA0); text-align:center; line-height:1.4; max-width:120px;}
.t-res-barras{flex:1; min-width:0; display:flex; flex-direction:column; gap:6px;}
.tr-fila{display:flex; align-items:center; gap:8px;}
.tr-n{flex:0 0 30px; font-size:11px; font-weight:800; color:rgba(255,255,255,0.75); text-align:right;}
.tr-riel{flex:1; height:8px; border-radius:999px; background:rgba(255,255,255,0.07); overflow:hidden;}
.tr-riel i{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg, #E8B94A, #FFE9A8); min-width:0;}
.tr-c{flex:0 0 26px; font-size:10.5px; font-weight:700; color:var(--text-faint, #8A7FA0);}
/* los filtros por estrellas */
.t-filtros{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 14px;}
.t-fil{
  padding:9px 14px; border-radius:999px; font-size:11px; font-weight:800; letter-spacing:0.04em;
  color:var(--text-faint, #8A7FA0); cursor:pointer; font-family:inherit;
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12);
}
.t-fil.on{color:#231604; background:linear-gradient(160deg, #FFE9A8, #E8B94A 60%); border-color:rgba(255,255,255,0.4);}
/* el ver más */
.t-vermas{
  display:flex; align-items:center; justify-content:center; gap:7px; width:100%; margin-top:14px;
  padding:14px; border-radius:14px; font-size:13px; font-weight:900; letter-spacing:0.04em; cursor:pointer;
  color:#FFE9A8; font-family:inherit; background:rgba(232,185,74,0.1); border:1px solid rgba(232,185,74,0.42);
}
.t-vermas:active{transform:scale(0.985);}
/* la línea de antigüedad real del cliente */
.t-desde{
  display:flex; align-items:center; gap:6px; margin:8px 0 2px;
  font-size:10.5px; font-weight:700; color:var(--text-faint, #8A7FA0);
}
.t-desde i{color:var(--gold-soft, #E8B94A); font-size:12px;}
.t-desde b{color:rgba(255,255,255,0.85);}
html[data-lite="1"] .t-resumen{background:#171021;}

/* =====================================================================
   v165 — 🔒 LA MARCA FIJA TIPO XVIDEOS (video)
   Logo de la casa + @ + id, siempre visible en una esquina mientras
   corre el video. Va APARTE de los sellos que se pasean. Cambia de
   esquina cada ~40 s (anti-recorte) con una transición suave.
   ===================================================================== */
.vip-pl-pill.xv{
  position:absolute; z-index:4; pointer-events:none; user-select:none;
  display:flex; align-items:center; gap:7px;
  padding:5px 10px 5px 6px; border-radius:999px;
  background:rgba(8,5,14,.30);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  opacity:var(--xvis, .5);
  transition:top .8s ease, bottom .8s ease, left .8s ease, right .8s ease, opacity .4s ease;
}
.vip-pl-pill.xv img{
  width:calc(var(--xtam, 13px) * 1.55); height:calc(var(--xtam, 13px) * 1.55);
  border-radius:6px; flex:none; display:block;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.6));
}
.vip-pl-pill.xv b{
  font-size:var(--xtam, 13px); font-weight:800; letter-spacing:.1em;
  color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.9);
}
.vip-pl-pill.xv small{
  display:inline;   /* una regla vieja lo escondía: el id debe verse */
  font-size:calc(var(--xtam, 13px) * .78); font-weight:700; letter-spacing:.05em;
  color:rgba(245,212,136,.95); text-shadow:0 1px 4px rgba(0,0,0,.9);
  padding-left:6px; margin-left:1px; border-left:1px solid rgba(255,255,255,.22);
}
/* las cuatro esquinas por las que va rotando */
.vip-pl-pill.xv.abajo-der{  right:14px; bottom:16px; left:auto; top:auto; }
.vip-pl-pill.xv.arriba-der{ right:14px; top:14px;    left:auto; bottom:auto; }
.vip-pl-pill.xv.abajo-izq{  left:14px;  bottom:16px; right:auto; top:auto; }
.vip-pl-pill.xv.arriba-izq{ left:14px;  top:14px;    right:auto; bottom:auto; }
/* modo ligero: sin desenfoque ni transiciones, pero la marca SIGUE ahí */
html[data-lite="1"] .vip-pl-pill.xv{
  backdrop-filter:none; -webkit-backdrop-filter:none; transition:none;
  background:rgba(8,5,14,.42);
}

/* =====================================================================
   v165c — 🎞️ EL CARRUSEL DE LETRAS (video)
   El texto cruza la pantalla por el medio en bucle: dos copias pegadas
   y la tira se corre el ancho de una, así el enlace nunca se corta.
   ===================================================================== */
.vip-pl-marq{
  position:absolute; left:0; width:100%; z-index:3;
  overflow:hidden; pointer-events:none; user-select:none;
  opacity:var(--vis, .55);
  transform:translateY(-50%);
  transition:top .9s ease;
}
.vip-pl-marq .tren{
  display:flex; width:max-content;
  animation:fpMarquesina var(--dur, 20s) linear infinite;
  will-change:transform;
}
.vip-pl-marq .tren span{
  display:block; flex:none; white-space:nowrap;
  padding-right:14vw;               /* el respiro entre una vuelta y la otra */
  font-size:var(--tam, 15px); font-weight:800; letter-spacing:.14em;
  color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.85), 0 0 22px rgba(0,0,0,.5);
}
@keyframes fpMarquesina{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}
/* modo ligero: sombra más barata, pero el deslizado SIGUE IGUAL.
   (Antes aquí había un calc() sobre la duración: rompía la animación
   entera y el letrero se quedaba congelado en los teléfonos en modo
   ligero — que son la mayoría.) */
html[data-lite="1"] .vip-pl-marq .tren span{ text-shadow:0 1px 4px rgba(0,0,0,.9); }

/* =====================================================================
   v165d — ⤢ LLENAR LA PANTALLA (video)
   Un video horizontal se ve como tira chiquita en un teléfono parado:
   es su forma. Con esto el cliente lo agranda hasta cubrir todo — se
   recortan un poco las orillas, como el "zoom" de la tele.
   ===================================================================== */
.vip-visor.llenar .vip-visor-media video,
.vip-visor.llenar.cine .vip-player video{ object-fit:cover; }
/* llenando, el video toma todo el hueco disponible */
.vip-visor.llenar .vip-visor-media video{ width:100vw; height:100vh; height:100dvh; max-width:none; max-height:none; }
/* v165i — ...y como el video ocupa TODO, los controles tienen que FLOTAR
   encima; si no, el video los empujaba fuera de la pantalla y ya no había
   forma de apagar el "llenar". Igual que en pantalla completa. */
.vip-visor.llenar .vip-player-ctrl{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(14px + env(safe-area-inset-bottom, 0px));
  margin-top:0; width:min(94vw, 430px); z-index:6;
}
/* y la ✕ por encima del video, para poder salir */
.vip-visor.llenar .vip-cerrar{ z-index:7; }
/* el botón se enciende cuando está activo (deja de ser "gris") */
.vip-player-ctrl .vpp[data-acc="llenar"]{ font-size:17px; line-height:1; }

/* =====================================================================
   v165e — MIENTRAS CORRE UN VIDEO, LO DE ARRIBA SE APARTA
   La ✕, las flechas y el pie se desvanecen a los 2.8 s (la misma
   temporización de los controles) y vuelven con un toque. Antes esto
   solo pasaba en pantalla completa; en la vista normal los textos se
   quedaban encima del video, estorbando.
   ===================================================================== */
.vip-visor.con-video .vip-cerrar,
.vip-visor.con-video .vip-nav,
.vip-visor.con-video .vip-visor-pie{
  opacity:0; pointer-events:none;
  transition:opacity .35s ease;
}
.vip-visor.con-video.tocado .vip-cerrar,
.vip-visor.con-video.tocado .vip-nav,
.vip-visor.con-video.tocado .vip-visor-pie{
  opacity:1; pointer-events:auto;
}
/* con el video en pausa, lo de arriba se queda a la vista (para cerrar
   o pasar al siguiente sin andar picando la pantalla) */
.vip-visor.con-video.pausado .vip-cerrar,
.vip-visor.con-video.pausado .vip-nav,
.vip-visor.con-video.pausado .vip-visor-pie{
  opacity:1; pointer-events:auto;
}

/* =====================================================================
   v165f — 📱 "abrir en mi celular" (en el pie del visor, para fotos)
   ===================================================================== */
.vip-pie-cel{
  display:inline-flex; align-items:center; gap:6px; margin-left:10px;
  border:1px solid rgba(232,185,74,.45); background:rgba(232,185,74,.10);
  color:#F2CE7B; border-radius:999px; padding:6px 12px;
  font-size:12px; font-weight:700; font-family:inherit; cursor:pointer;
  transition:background .2s ease, transform .12s ease;
}
.vip-pie-cel:active{ transform:scale(.96); background:rgba(232,185,74,.20); }

/* =====================================================================
   v165h — CADA BOTÓN DEL VIDEO DICE PARA QUÉ ES
   Los dibujitos solos había que adivinarlos. Ahora cada uno lleva su
   nombre debajo, chiquito y discreto.
   ===================================================================== */
.vpp-caja{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  flex:none;
  justify-content:flex-end;   /* los nombres alineados parejo, aunque el
                                 botón de reproducir sea más grande */
}
.vip-pl-fila.btns{ align-items:flex-end; }
.vpp-caja small{
  font-size:9.5px; font-weight:700; letter-spacing:.04em;
  color:rgba(255,255,255,.62); white-space:nowrap; line-height:1;
  text-shadow:0 1px 3px rgba(0,0,0,.7);
}
/* el botón encendido (reproducir) también resalta su nombre */
.vpp-caja .vpp:not(.gris) + small{ color:rgba(255,233,168,.92); }

/* =====================================================================
   v167 — LA BARRA DE ABAJO CON LAS CATEGORÍAS
   PLATINUM · BLACK · ULTRA, cada una con su color propio. Cuando una
   está activa se enciende con su tono; apagadas van en gris discreto,
   para que la barra no parezca un arcoíris.
   ===================================================================== */
.mobile-tabbar.barra-cats .tab-cat{
  background:none; border:none; font-family:inherit; cursor:pointer;
  color:var(--dim, rgba(255,255,255,.55));
  transition:color .18s ease;
}
.mobile-tabbar.barra-cats .tab-cat i{ color:inherit; }
/* encendida: toma el color de su categoría */
.mobile-tabbar.barra-cats .tab-cat.active{ color:var(--tcc, #C9CFDA); }
.mobile-tabbar.barra-cats .tab-cat.active i{
  color:var(--tcc, #C9CFDA);
  filter:drop-shadow(0 0 10px color-mix(in srgb, var(--tcc, #C9CFDA) 55%, transparent));
}
.mobile-tabbar.barra-cats .tab-cat{ position:relative; }

/* v168 — EL COLOR MANDA, no el iconito.
   Antes se veían muy sosos: un dibujito gris y su nombre. Ahora cada
   categoría es una PASTILLA con su color — apagada, un aro tenue de su
   tono; encendida, el color lleno y su resplandor. Se distinguen de un
   vistazo aunque no leas. */
.mobile-tabbar.barra-cats .tab-cat i{ display:none; }   /* fuera el iconito */
.mobile-tabbar.barra-cats .tab-cat span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:74px; padding:9px 12px 8px; border-radius:999px;
  font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  border:1.5px solid color-mix(in srgb, var(--tcc, #C9CFDA) 42%, transparent);
  background:color-mix(in srgb, var(--tcc, #C9CFDA) 10%, transparent);
  color:color-mix(in srgb, var(--tcc, #C9CFDA) 80%, #fff);
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .12s ease;
}
.mobile-tabbar.barra-cats .tab-cat:active span{ transform:scale(.95); }
/* encendida: el color a tope */
.mobile-tabbar.barra-cats .tab-cat.active span{
  background:var(--tcc, #C9CFDA);
  border-color:var(--tcc, #C9CFDA);
  color:#0B0810;
  box-shadow:0 6px 20px -6px var(--tcc, #C9CFDA), 0 0 0 3px color-mix(in srgb, var(--tcc, #C9CFDA) 22%, transparent);
}
/* black va en dorado sobre negro: su letra encendida se lee mejor oscura */
.mobile-tabbar.barra-cats .tab-cat[data-familia="black"].active span{ color:#141018; }
/* CUENTA se queda sobria, para que no compita con las categorías */
.mobile-tabbar.barra-cats .tab-item:not(.tab-cat) span{ font-size:10.5px; letter-spacing:.08em; }

/* =====================================================================
   v169 — EL ANUNCIO DE CATEGORÍA, CHIQUITO Y PEGADO
   Antes ocupaba media pantalla antes de que se viera un modelo. Ahora
   es una tira apretada, pegada justo debajo del encabezado de la
   categoría: nombre, frase en chico, precio y botón — todo junto.
   ===================================================================== */
.vip-catinfo.compacta{
  margin-top:6px; padding:11px 14px 13px; border-radius:14px; gap:8px;
}
/* la línea del nombre: ya no es un bloque editorial */
.vip-cat-bienv.mini{
  display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
  margin:0 0 2px; padding:0; border:none; background:none; text-align:left;
}
.vip-cat-bienv.mini b{
  font-size:14.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--vap, #E8B94A); background:none; -webkit-text-fill-color:currentColor;
}
.vip-cat-bienv.mini small{
  font-size:11px; font-weight:600; letter-spacing:.02em;
  color:rgba(255,255,255,.5);
}
/* la línea de precio + explicación, más apretada */
.vip-catinfo.compacta .vip-catinfo-l1{ gap:8px; margin:0; }
.vip-catinfo.compacta .vip-catinfo-txt{ font-size:11.5px; line-height:1.35; }
.vip-catinfo.compacta .vip-catinfo-sem{ font-size:10.5px; margin:2px 0 0; }
/* el botón, más bajito para que la tira no crezca */
.vip-catinfo.compacta .vip-desbloq{ margin-top:6px; padding:11px 16px; font-size:12.5px; }

/* =====================================================================
   v170 — LA BARRA DE ARRIBA: 3 BARRITAS · TU LOGO AL CENTRO · LUPA Y CUENTA
   Como la referencia que mandó Luis: negra, plana, sin adornos. El logo
   manda al centro; a la izquierda el menú, a la derecha buscar y cuenta.
   Solo aplica en teléfono: en pantalla grande la barra sigue como estaba.
   ===================================================================== */
.nav-burger{
  display:none; background:none; border:none; cursor:pointer; padding:8px 6px;
  flex-direction:column; gap:4.5px; align-items:center; justify-content:center;
}
.nav-burger span{
  display:block; width:21px; height:2.5px; border-radius:2px;
  background:var(--gold2, #E8B94A);
  transition:transform .18s ease, opacity .18s ease;
}
.nav-burger:active span{ transform:scaleX(.86); }

@media (max-width:860px){
  /* la barra: negra y plana, sin degradados ni desenfoques */
  #top{
    background:#0A0A0C !important;
    border-bottom:1px solid rgba(255,255,255,.08);
    box-shadow:none !important;
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  }
  #top .wrap{
    position:relative; display:flex; align-items:center; justify-content:space-between;
    gap:8px; padding-top:8px; padding-bottom:8px; min-height:56px;
  }
  .nav-burger{ display:flex; flex:none; z-index:2; }
  /* los enlaces de escritorio no pintan nada aquí */
  #top .nav-links{ display:none !important; }
  /* EL LOGO, AL CENTRO — clavado al medio pase lo que pase a los lados */
  #top .brand{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    margin:0; z-index:1; pointer-events:none; white-space:nowrap;
  }
  #top .brand .brand-tag{ display:none; }   /* "SITIO OFICIAL" estorbaba al centrar */
  #top .brand .mark{ width:28px; height:28px; }
  #top .brand .wordmark{ font-size:17px; }
  /* a la derecha, solo lo justo: buscar y cuenta */
  #top .nav-toggles{ flex:none; gap:2px; z-index:2; margin-left:auto; }
  #top .nav-toggles .icon-toggle{ background:none; border:none; box-shadow:none; }
  #top .nav-toggles .icon-toggle i{ color:#fff; }
}


/* =====================================================================
   v171 — EL MENÚ DE LAS 3 BARRITAS, COMO LA REFERENCIA
   Panel que entra DE LADO (no desde abajo), negro, a pantalla completa,
   con renglones sencillos. Adentro: lo más comprado, las categorías y
   el modo LITE.
   ===================================================================== */
.menu-sheet .menu-panel{
  left:auto; right:0; top:0; bottom:0; width:min(84vw, 340px);
  border-radius:0; background:#0D0D10;
  border-left:1px solid rgba(255,255,255,.09);
  transform:translateX(100%); transition:transform .26s cubic-bezier(.22,.9,.3,1);
  display:flex; flex-direction:column; overflow-y:auto;
  padding:calc(14px + env(safe-area-inset-top,0px)) 0 calc(18px + env(safe-area-inset-bottom,0px));
}
.menu-sheet.open .menu-panel{ transform:translateX(0); }
.menu-sheet .menu-tirador{ display:none; }
.menu-sheet .menu-titulo{
  font-size:11px; letter-spacing:.34em; text-indent:.34em; text-transform:uppercase;
  color:rgba(255,255,255,.42); padding:4px 20px 14px; text-align:left; border:none;
}
.menu-sheet .menu-grid{ display:block; padding:0; }
.menu-sheet .menu-cerrar{
  margin:14px 20px 0; background:none; border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.62); border-radius:999px; padding:11px; font-size:12.5px;
}
/* cada renglón */
.menu-sheet .mfila{
  display:flex; align-items:center; gap:12px; width:100%;
  background:none; border:none; cursor:pointer; font-family:inherit;
  padding:13px 20px; text-align:left; color:#fff;
  border-bottom:1px solid rgba(255,255,255,.05);
  transition:background .15s ease;
}
.menu-sheet .mfila:active{ background:rgba(255,255,255,.05); }
.menu-sheet .mnom{ flex:1; font-size:13.5px; font-weight:700; letter-spacing:.03em; }
.menu-sheet .mnom small{ display:block; font-size:10.5px; font-weight:600; color:rgba(255,255,255,.4); margin-top:2px; letter-spacing:0; }
.menu-sheet .mpunto{
  width:10px; height:10px; border-radius:50%; flex:none;
  background:var(--mc, #E8B94A); box-shadow:0 0 10px var(--mc, #E8B94A);
}
.menu-sheet .mflecha{ color:rgba(255,255,255,.28); font-size:15px; }
/* los del podio de "lo más comprado" */
.menu-sheet .mfila.top{ border-bottom-color:rgba(255,255,255,.07); }
.menu-sheet .mpos{
  width:22px; height:22px; border-radius:7px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--mc, #E8B94A); color:#0B0810; font-size:11.5px; font-weight:900;
}
.menu-sheet .mn{ font-size:11px; font-weight:800; color:var(--mc, #E8B94A); white-space:nowrap; }
/* los títulos de cada sección */
.menu-sheet .msec{ margin-bottom:10px; }
.menu-sheet .msec-tit{
  display:flex; align-items:center; gap:7px;
  padding:12px 20px 7px; font-size:10.5px; font-weight:800;
  letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.38);
}
.menu-sheet .msec-tit small{ letter-spacing:.02em; text-transform:none; font-weight:600; opacity:.75; }
.menu-sheet .mlite-est{ font-size:11px; font-weight:800; color:var(--gold2, #E8B94A); }
.menu-sheet .mfila.lite .mpunto{ background:var(--gold2, #E8B94A); box-shadow:0 0 10px var(--gold2, #E8B94A); }
@media (min-width:769px){ .menu-sheet{ display:none; } }

/* v174 — los botones de subcategoría VUELVEN (Luis los quería): PLATINUM
   1-5 y, en BLACK, sus dos zonas. Siguen también en el menú de las 3
   barritas: ahí para navegar rápido, aquí para moverse dentro de la
   categoría en la que ya estás. */
/* y el modo LITE se fue de la barra de arriba al menú */
@media (max-width:860px){ #top #liteToggle{ display:none !important; } }

/* =====================================================================
   v172 — LA BARRA DE ABAJO, CON MÁS DISEÑO
   Ya son solo 3 categorías (cuenta se fue arriba), así que cada pastilla
   respira: más ancha, con degradado propio, brillo cuando está activa y
   un aro exterior que la separa del fondo. Ya no se ven planas.
   ===================================================================== */
.mobile-tabbar.barra-cats{
  background:#0A0A0C; border-top:1px solid rgba(255,255,255,.07);
  box-shadow:none; padding:9px 12px calc(9px + env(safe-area-inset-bottom, 0px));
  gap:9px;
}
.mobile-tabbar.barra-cats .tab-cat{ flex:1; }
.mobile-tabbar.barra-cats .tab-cat span{
  width:100%; min-width:0; padding:12px 8px 11px; border-radius:14px;
  font-size:12px; letter-spacing:.13em;
  border:1.5px solid color-mix(in srgb, var(--tcc, #C9CFDA) 34%, transparent);
  background:linear-gradient(180deg,
      color-mix(in srgb, var(--tcc, #C9CFDA) 14%, transparent),
      color-mix(in srgb, var(--tcc, #C9CFDA) 5%, transparent));
}
/* encendida: degradado lleno del color + doble resplandor */
.mobile-tabbar.barra-cats .tab-cat.active span{
  background:linear-gradient(180deg,
      color-mix(in srgb, var(--tcc, #C9CFDA) 100%, #fff 18%),
      var(--tcc, #C9CFDA) 55%,
      color-mix(in srgb, var(--tcc, #C9CFDA) 74%, #000));
  border-color:color-mix(in srgb, var(--tcc, #C9CFDA) 100%, #fff 30%);
  box-shadow:
     0 8px 26px -8px var(--tcc, #C9CFDA),
     0 0 0 3px color-mix(in srgb, var(--tcc, #C9CFDA) 18%, transparent),
     inset 0 1px 0 rgba(255,255,255,.45);
}
/* el filete de arriba se queda, pero más fino y del ancho de la pastilla */
.mobile-tabbar.barra-cats .tab-cat.active::before{ width:34px; height:3px; }

/* v172 — los botones de categoría que salían debajo del logo se retiran:
   navegar por categoría ya se hace desde la barra de abajo y el menú. */
.vip-tabs.oculto-v172{ display:none !important; }

/* =====================================================================
   v172 — EL MENSAJE DE LA CATEGORÍA, MÁS BONITO
   Ahora es lo primero que se ve debajo del logo, así que se le da
   presencia: un filete de color a la izquierda, el nombre con su tono,
   el precio en grande y el botón ancho. Sigue siendo compacto — se ve
   mejor sin ocupar más.
   ===================================================================== */
.vip-catinfo.compacta{
  position:relative; overflow:hidden;
  background:linear-gradient(140deg,
      color-mix(in srgb, var(--vap, #E8B94A) 11%, transparent),
      rgba(255,255,255,.02) 46%, transparent);
  border:1px solid color-mix(in srgb, var(--vap, #E8B94A) 26%, transparent);
  border-radius:16px; padding:13px 15px 14px 18px;
}
/* el filete de color, pegado a la izquierda */
.vip-catinfo.compacta::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg,
      color-mix(in srgb, var(--vap, #E8B94A) 100%, #fff 30%),
      var(--vap, #E8B94A));
  box-shadow:0 0 14px color-mix(in srgb, var(--vap, #E8B94A) 60%, transparent);
}
.vip-cat-bienv.mini b{
  font-size:15.5px; letter-spacing:.13em;
  text-shadow:0 0 18px color-mix(in srgb, var(--vap, #E8B94A) 45%, transparent);
}
/* el precio, protagonista */
.vip-catinfo.compacta .vip-catinfo-precio{
  font-size:19px; font-weight:900; letter-spacing:.02em;
  color:var(--vap, #E8B94A);
  background:none; border:none; padding:0;
}
.vip-catinfo.compacta .vip-catinfo-l1{ align-items:baseline; }
/* el botón, ancho y con el color de la categoría */
.vip-catinfo.compacta .vip-desbloq{
  display:flex; width:100%; justify-content:center; margin-top:10px;
  border-radius:12px; letter-spacing:.09em; font-weight:800;
}

/* =====================================================================
   v173 — MIS SUSCRIPCIONES: LAS PASTILLAS DE LO QUE YA ES TUYO
   Cada categoría desbloqueada con SU color y su nombre. Se veían solo
   como texto suelto; ahora son pastillas con degradado, brillo y borde
   metálico — que se sienta premium abrir tu cuenta.
   ===================================================================== */
.mis-pastillas{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:13px;
}
.mis-pastillas .col-mia{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 15px 9px 12px; border-radius:999px;
  font-size:12px; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
  color:#0B0810;
  background:linear-gradient(150deg,
      color-mix(in srgb, var(--cfc, #E8B94A) 100%, #fff 34%),
      var(--cfc, #E8B94A) 58%,
      color-mix(in srgb, var(--cfc, #E8B94A) 78%, #000));
  border:1px solid color-mix(in srgb, var(--cfc, #E8B94A) 100%, #fff 45%);
  box-shadow:
      0 6px 18px -7px var(--cfc, #E8B94A),
      inset 0 1px 0 rgba(255,255,255,.55);
}
/* el puntito de sello a la izquierda de cada pastilla */
.mis-pastillas .col-mia::before{
  content:''; width:7px; height:7px; border-radius:50%; flex:none;
  background:rgba(11,8,16,.42);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.3);
}
html[data-lite="1"] .mis-pastillas .col-mia{ box-shadow:none; }

/* =====================================================================
   v174 — LA BARRA DE CATEGORÍAS, GALÁCTICA
   Colores más vivos (azul estelar, oro nebulosa, violeta ultra), más
   brillo, y un rótulo que deja claro que son CATEGORÍAS. ULTRA es la
   que más destaca: es la categoría máxima de la casa.
   ===================================================================== */
.mobile-tabbar.barra-cats{
  flex-wrap:wrap; padding-top:5px;
  background:
     radial-gradient(120% 150% at 50% 120%, rgba(120,90,220,.14), transparent 62%),
     #08080C;
}
/* el rótulo que dice para qué es la barra */
.barra-cats-rotulo{
  flex-basis:100%; text-align:center;
  font-size:8.5px; font-weight:800; letter-spacing:.42em; text-indent:.42em;
  color:rgba(255,255,255,.34); margin-bottom:5px;
}
/* apagadas: se les nota el color, pero discretas */
.mobile-tabbar.barra-cats .tab-cat span{
  border-width:1.5px;
  background:linear-gradient(180deg,
      color-mix(in srgb, var(--tcc) 20%, transparent),
      color-mix(in srgb, var(--tcc) 7%, transparent));
  color:color-mix(in srgb, var(--tcc) 88%, #fff);
  text-shadow:0 0 12px color-mix(in srgb, var(--tcc) 45%, transparent);
}
/* encendidas: el color a tope, con halo */
.mobile-tabbar.barra-cats .tab-cat.active span{
  color:#08060E;
  text-shadow:none;
  box-shadow:
     0 10px 30px -8px var(--tcc),
     0 0 22px -4px var(--tcc),
     0 0 0 3px color-mix(in srgb, var(--tcc) 24%, transparent),
     inset 0 1px 0 rgba(255,255,255,.55);
}
/* ── ULTRA: la que más destaca ── */
.mobile-tabbar.barra-cats .tab-cat.ultra-max span{
  border-color:color-mix(in srgb, var(--tcc) 72%, transparent);
  background:linear-gradient(180deg,
      color-mix(in srgb, var(--tcc) 34%, transparent),
      color-mix(in srgb, var(--tcc) 14%, transparent));
  box-shadow:
     0 0 20px -6px var(--tcc),
     inset 0 1px 0 rgba(255,255,255,.22);
}
/* ULTRA encendida: el relleno lleno TAMBIÉN aquí. (Antes la regla de
   "ultra destacada" venía después y le ganaba a la de "encendida", así
   que ULTRA activa se veía más apagada que las otras — al revés de lo
   que Luis pidió.) */
.mobile-tabbar.barra-cats .tab-cat.ultra-max.active span{
  background:linear-gradient(180deg,
      color-mix(in srgb, var(--tcc) 100%, #fff 30%),
      var(--tcc) 52%,
      color-mix(in srgb, var(--tcc) 80%, #000));
  border-color:color-mix(in srgb, var(--tcc) 100%, #fff 45%);
  color:#0B0612;
  box-shadow:
     0 12px 38px -8px var(--tcc),
     0 0 38px -4px var(--tcc),
     0 0 0 4px color-mix(in srgb, var(--tcc) 32%, transparent),
     inset 0 1px 0 rgba(255,255,255,.7);
}
/* el latido finísimo de ULTRA, para que llame sin marear */
@keyframes ultraLatido{
  0%,100%{ box-shadow:0 0 20px -6px var(--tcc), inset 0 1px 0 rgba(255,255,255,.22); }
  50%    { box-shadow:0 0 32px -4px var(--tcc), inset 0 1px 0 rgba(255,255,255,.34); }
}
.mobile-tabbar.barra-cats .tab-cat.ultra-max:not(.active) span{
  animation:ultraLatido 2.8s ease-in-out infinite;
}
html[data-lite="1"] .mobile-tabbar.barra-cats .tab-cat.ultra-max:not(.active) span{ animation:none; }

/* =====================================================================
   v174 — EL MENSAJE DE LA CATEGORÍA, PEGADO BAJO EL LOGO
   Se queda clavado arriba mientras bajas, justo debajo de la barra del
   logo, como un mensajito fijo. Más chico y más apretado que antes.
   ===================================================================== */
@media (max-width:860px){
  .vip-catinfo.compacta{
    /* v185 — ya NO se queda pegado siguiéndote al bajar (pedido de Luis):
       se queda arriba, en su sitio, y desaparece al pasar de largo. */
    position:static;
    padding:10px 13px 11px 15px; border-radius:13px; margin-top:4px;
    backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
    background:linear-gradient(140deg,
        color-mix(in srgb, var(--vap, #E8B94A) 14%, rgba(8,8,12,.93)),
        rgba(8,8,12,.93));
  }
  .vip-cat-bienv.mini b{ font-size:13.5px; letter-spacing:.11em; }
  .vip-cat-bienv.mini small{ font-size:10px; }
  .vip-catinfo.compacta .vip-catinfo-precio{ font-size:16.5px; }
  .vip-catinfo.compacta .vip-catinfo-txt{ font-size:10.8px; }
  .vip-catinfo.compacta .vip-desbloq{ margin-top:8px; padding:10px 14px; font-size:12px; }
  html[data-lite="1"] .vip-catinfo.compacta{
    backdrop-filter:none; -webkit-backdrop-filter:none; background:#0B0B10;
  }
}

/* =====================================================================
   v175 — LAS TARJETAS, COMO LAS PIEZAS DEL ESTUDIO
   Luis: "que el nombre salga como en mi estudio, con el color de su
   categoría, y todas las fotos cuadradas del mismo tamaño".

   · FOTO CUADRADA (1:1) para todos — antes eran 4:5 y unas se veían
     más largas que otras.
   · El NOMBRE al centro, en la letra serif del estudio, teñido con el
     color de SU categoría y con brillo.
   · Debajo, el filete con su rombo — el mismo remate de tus piezas.
   · Un marco fino por dentro de la foto, como el de tus carteles.
   ===================================================================== */
.vip-perfil.vcard .vcard-media{
  aspect-ratio:1/1;                 /* todas iguales, cuadradas */
}
.vip-perfil.vcard .vcard-media > img{ object-position:center 26%; }

/* v176 — FUERA EL MARCO INTERIOR. Se veía como un "cuadro suelto" arriba
   de la tarjeta: su mitad de abajo quedaba tapada por el velo oscuro, así
   que solo se apreciaba la parte superior. Sin él la foto respira y la
   tarjeta se lee de un vistazo. */
/* el velo de abajo, para que el nombre siempre se lea */
.vip-perfil.vcard .vcard-media::before{
  content:''; position:absolute; left:0; right:0; bottom:0; height:56%; z-index:1;
  background:linear-gradient(180deg, transparent, rgba(6,4,10,.30) 42%, rgba(6,4,10,.86));
  pointer-events:none;
}
/* EL NOMBRE, como en el estudio */
.vip-perfil.vcard .vcard-titulo{
  left:12px; right:12px; bottom:26px; z-index:3;
  text-align:center; white-space:normal; overflow:visible;
  font-family:'Fraunces', serif; font-weight:800;
  font-size:clamp(17px, 5.6vw, 27px); line-height:1.05;
  letter-spacing:.02em; text-transform:uppercase;
  color:color-mix(in srgb, var(--vpc, #E8B94A) 62%, #FFF6DC);
  text-shadow:
     0 2px 14px rgba(0,0,0,.85),
     0 0 26px color-mix(in srgb, var(--vpc, #E8B94A) 55%, transparent);
}
/* el filete con su rombo, debajo del nombre */
.vip-perfil.vcard .vcard-titulo::after{
  content:''; position:absolute; left:50%; transform:translateX(-50%);
  bottom:-13px; width:56%; height:1px;
  background:linear-gradient(90deg,
      transparent,
      color-mix(in srgb, var(--vpc, #E8B94A) 75%, transparent) 22%,
      color-mix(in srgb, var(--vpc, #E8B94A) 75%, transparent) 78%,
      transparent);
}
.vip-perfil.vcard .vcard-titulo::before{
  content:''; position:absolute; left:50%; bottom:-16px;
  width:7px; height:7px; margin-left:-3.5px;
  background:var(--vpc, #E8B94A); transform:rotate(45deg);
  box-shadow:0 0 9px color-mix(in srgb, var(--vpc, #E8B94A) 80%, transparent);
  z-index:1;
}
/* en las tarjetas con candado el nombre iba chiquito: ahora manda igual */
.vip-perfil.bloq:not(.ancha) .vcard-titulo{
  font-size:clamp(15px, 5vw, 23px); left:10px; right:10px; bottom:26px;
}
html[data-lite="1"] .vip-perfil.vcard .vcard-titulo{ text-shadow:0 2px 10px rgba(0,0,0,.9); }

/* v175 — TODAS DEL MISMO TAMAÑO: había tarjetas "anchas" que ocupaban la
   fila entera y rompían la cuadrícula. Luis las quiere todas iguales. */
.vip-bloque > .vip-perfil.bloq.ancha{ grid-column:auto !important; }
.vip-perfil.vcard.ancha .vcard-titulo{ font-size:clamp(15px, 5vw, 23px); }

/* =====================================================================
   v176 — TARJETAS MÁS CLARAS: QUÉ HAY ADENTRO Y QUE ES 18+
   Luis: "que las fotos y videos sean claros de qué es lo que hay y que
   es contenido 18+".
   El conteo (📷 fotos · 🎬 videos) pasa a ser una pastilla legible sobre
   la foto, y cada tarjeta lleva su sello 18+ discreto pero visible.
   ===================================================================== */
.vip-perfil.vcard .vcard-cont{
  position:absolute; left:8px; bottom:8px; z-index:4;
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:999px;
  background:rgba(8,6,14,.72);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1px solid color-mix(in srgb, var(--vpc, #E8B94A) 34%, rgba(255,255,255,.16));
  font-size:10.5px; font-weight:800; letter-spacing:.04em;
  color:#FFF3DA; white-space:nowrap;
}
/* el sello 18+ */
.vip-perfil.vcard .vcard-media .sello18{
  position:absolute; right:8px; bottom:8px; z-index:4;
  padding:5px 9px; border-radius:8px;
  background:rgba(8,6,14,.72);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,120,120,.45);
  font-size:10px; font-weight:900; letter-spacing:.08em;
  color:#FF9A9A;
}
/* el nombre sube un poco para no chocar con las pastillas de abajo */
.vip-perfil.vcard .vcard-titulo{ bottom:46px; }
.vip-perfil.bloq:not(.ancha) .vcard-titulo{ bottom:46px; }
html[data-lite="1"] .vip-perfil.vcard .vcard-cont,
html[data-lite="1"] .vip-perfil.vcard .vcard-media .sello18{
  backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(8,6,14,.9);
}

/* v176b — la pastilla del conteo se estiraba a todo lo ancho (heredaba el
   ancho de su versión vieja). Se ajusta a su contenido y deja sitio al 18+. */
.vip-perfil.vcard .vcard-cont{
  right:auto; width:fit-content; max-width:calc(100% - 62px);
  overflow:hidden; text-overflow:ellipsis;
}


/* =====================================================================
   v181 — DE VUELTA AL VERTICAL, PERO CON TARJETAS MÁS GRANDES
   Luis probó el horizontal y prefirió como estaba. Se retiró toda esa
   etapa (el CSS se borró, no se parcheó encima) y quedan las tarjetas
   de siempre — dos por fila, el nombre sobre la foto con la letra del
   estudio — solo que MÁS GRANDES:
     · la foto pasa a 4:5 (vertical) en vez de cuadrada: crece de alto
       y de paso ya no corta a los modelos, que era el otro reclamo.
     · menos aire entre tarjetas y menos margen a los lados, para que
       cada una gane ancho.
   ===================================================================== */
@media (max-width:860px){
  .vip-bloque{ gap:9px !important; }
  .vip-perfil.vcard .vcard-media{ aspect-ratio:4/5; }
  .vip-perfil.vcard .vcard-media > img{ object-position:center 24%; }
  /* el nombre crece con la tarjeta */
  .vip-perfil.vcard .vcard-titulo{ font-size:clamp(18px, 5.9vw, 28px); }
  .vip-perfil.bloq:not(.ancha) .vcard-titulo{ font-size:clamp(16px, 5.3vw, 25px); }
}

/* =====================================================================
   v182 — LIMPIEZA A FONDO: SIN ADORNOS, MÁS RÁPIDA, CON ACENTO NARANJA
   Tres cosas que pidió Luis:
     1. Las etiquetas estorbaban encima de la foto → bajan al cuerpo de
        la tarjeta, donde no tapan al modelo.
     2. Fuera los efectos (desenfoques, sombras, animaciones) — TODOS
        menos los de ULTRA, que se queda destacada a propósito.
     3. Un acento NARANJA propio, más distintivo que el dorado.
   Quitar desenfoques y animaciones no es solo estética: es lo que más
   pesa en un teléfono. La web se siente notablemente más suelta.
   ===================================================================== */
:root{
  --fp-naranja:#FF7A18;
  --fp-naranja-claro:#FF9A45;
}

/* ── 1) LAS ETIQUETAS SALEN DE LA FOTO ───────────────────────────── */
@media (max-width:860px){
  /* el conteo y el 18+ bajan al cuerpo, en una sola fila ordenada */
  .vip-perfil.vcard .vcard-cont,
  .vip-perfil.vcard .vcard-media .sello18{
    position:static !important; display:inline-flex; vertical-align:middle;
    margin:8px 6px 0 0; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
    background:rgba(255,255,255,.05); box-shadow:none;
  }
  .vip-perfil.vcard .vcard-media .sello18{
    border-color:rgba(255,120,120,.4); color:#FF9A9A; margin-right:0;
  }
  /* sobre la foto queda SOLO lo imprescindible, y chiquito */
  .vip-perfil.vcard .vcard-media .new-flag,
  .vip-perfil.vcard .vcard-media .vip-of-candado{
    font-size:9px !important; padding:3px 7px !important;
    box-shadow:none !important; backdrop-filter:none !important;
  }
  .vip-perfil.vcard .vcard-media .card-nivel,
  .vip-perfil.vcard .vcard-media .vcard-chip{ display:none !important; }
}

/* ── 2) FUERA LOS EFECTOS (menos ULTRA) ──────────────────────────── */
.vip-perfil, .vip-perfil *,
.vcard, .vcard *,
.vip-catinfo, .vip-catinfo *,
.menu-sheet, .menu-sheet *,
.mobile-tabbar .tab-item:not(.ultra-max),
.mobile-tabbar .tab-item:not(.ultra-max) *{
  animation:none !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
.vip-perfil, .vcard, .vip-catinfo{ box-shadow:none !important; }
.vip-perfil.vcard .vcard-titulo{ text-shadow:0 2px 8px rgba(0,0,0,.9) !important; }
/* ULTRA conserva su brillo y su latido: es la categoría máxima */
.mobile-tabbar .tab-cat.ultra-max span{ animation:ultraLatido 2.8s ease-in-out infinite !important; }

/* ── 3) EL ACENTO NARANJA ────────────────────────────────────────── */
.vip-catinfo.compacta .vip-catinfo-precio{ color:var(--fp-naranja-claro) !important; }
.vip-perfil.vcard .vcard-cont{
  border-color:color-mix(in srgb, var(--fp-naranja) 45%, transparent) !important;
  color:var(--fp-naranja-claro) !important;
}
.vip-desbloq, .vip-abrir{
  background:linear-gradient(180deg, var(--fp-naranja-claro), var(--fp-naranja)) !important;
  border-color:var(--fp-naranja) !important; color:#160800 !important;
}
.menu-sheet .msec-tit i{ color:var(--fp-naranja) !important; }
.barra-cats-rotulo{ color:color-mix(in srgb, var(--fp-naranja) 60%, rgba(255,255,255,.4)) !important; }

/* v182b — la fila de etiquetas, ya fuera de la foto */
.vcard-etiq{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  margin:0 0 6px;
}
.vcard-etiq .vcard-cont,
.vcard-etiq .sello18{ margin:0 !important; position:static !important; }

/* v182c — NUEVO / EXCLUSIVO / TUYO también estorbaban sobre la foto: se
   bajan al cuerpo, junto al resto de etiquetas. Y el 18+ recupera su
   recuadro, que se había perdido al sacarlo de la foto. */
@media (max-width:860px){
  .vip-perfil.vcard .vcard-media .new-flag,
  .vip-perfil.vcard .vcard-media .vip-of-candado{
    position:absolute !important; top:auto !important; bottom:6px !important;
    left:6px !important; right:auto !important;
    font-size:8.5px !important; padding:3px 7px !important;
    opacity:.92;
  }
  .vip-perfil.vcard .vcard-media .vip-of-candado{ left:auto !important; right:6px !important; }
}
.vcard-etiq .sello18{
  border:1px solid rgba(255,120,120,.45) !important;
  border-radius:8px !important; padding:4px 9px !important;
  font-size:10px; font-weight:900; letter-spacing:.06em; color:#FF9A9A;
  background:rgba(255,255,255,.04);
}
.vcard-etiq .vcard-cont{ padding:4px 10px !important; border-radius:999px !important; }

/* =====================================================================
   v183 — ULTRA: LA CATEGORÍA MÁXIMA, CON SU PROPIO LUJO
   Luis: "que se vea super premium toda la categoría, colores vibrantes,
   naranja con rojo, combinaciones con dorado o morado, y las tarjetas
   más grandes y más específicas en lo que hay".
   ULTRA es la única que conserva efectos (el resto de la web quedó
   plana a propósito), así que aquí se le sube el volumen: degradado de
   fuego, borde vivo y tarjetas a pantalla completa.
   ===================================================================== */
:root{
  --ultra-1:#FF3D2E;   /* rojo brasa   */
  --ultra-2:#FF7A18;   /* naranja      */
  --ultra-3:#FFC336;   /* dorado       */
  --ultra-4:#B14BFF;   /* morado       */
}

/* ── LAS TARJETAS DE ULTRA: UNA POR FILA, GRANDES ── */
@media (max-width:860px){
  .vip-bloque:has(.vip-perfil.ultra),
  .vip-perfil.ultra{ --ultra-on:1; }
  /* v183b — la tarjeta de ULTRA ocupa la fila COMPLETA. Antes intentaba
     detectar el bloque por su nombre y no atinaba; así es directo y no
     depende de selectores modernos que los WebView viejos no entienden. */
  .vip-perfil.vcard.ultra{ grid-column:1 / -1 !important; }
  .vip-perfil.vcard.ultra .vcard-media{ aspect-ratio:3/4 !important; }
  .vip-perfil.vcard.ultra .vcard-titulo{ font-size:clamp(26px, 8.4vw, 40px) !important; }
}

/* ── EL LUJO: degradado de fuego en el borde y el fondo ── */
.vip-perfil.vcard.ultra{
  position:relative;
  border:none !important;
  background:
     linear-gradient(#0B0710, #0B0710) padding-box,
     linear-gradient(135deg, var(--ultra-1), var(--ultra-2) 34%, var(--ultra-3) 58%, var(--ultra-4)) border-box !important;
  border:2px solid transparent !important;
  box-shadow:0 10px 40px -14px var(--ultra-2) !important;
}
.vip-perfil.vcard.ultra .vcard-media{
  background:linear-gradient(150deg,
      color-mix(in srgb, var(--ultra-1) 24%, transparent),
      color-mix(in srgb, var(--ultra-4) 20%, transparent)) !important;
}
/* el nombre, con el fuego de ULTRA */
.vip-perfil.vcard.ultra .vcard-titulo{
  background:linear-gradient(100deg, var(--ultra-3), var(--ultra-2) 45%, var(--ultra-1));
  -webkit-background-clip:text; background-clip:text; color:transparent !important;
  text-shadow:none !important;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.9));
}
.vip-perfil.vcard.ultra .vcard-titulo::before{ background:var(--ultra-2) !important; }
.vip-perfil.vcard.ultra .vcard-titulo::after{
  background:linear-gradient(90deg, transparent, var(--ultra-2), transparent) !important;
}
/* la etiqueta que dice QUÉ hay */
.vip-perfil.vcard.ultra .vcard-precio.invita{
  background:linear-gradient(135deg, var(--ultra-1), var(--ultra-2)) !important;
  color:#1A0600 !important; font-weight:900; letter-spacing:.09em;
  border:none !important; padding:5px 11px; border-radius:999px;
}
/* el botón de desbloquear ULTRA: el más vistoso de la web */
.vip-desbloq.ultra{
  background:linear-gradient(120deg, var(--ultra-1), var(--ultra-2) 40%, var(--ultra-3) 70%, var(--ultra-4)) !important;
  background-size:200% 100% !important;
  color:#1A0600 !important; border:none !important;
  font-weight:900 !important; letter-spacing:.08em;
  box-shadow:0 10px 34px -10px var(--ultra-2) !important;
  animation:ultraFuego 4.5s ease-in-out infinite !important;
}
@keyframes ultraFuego{
  0%,100%{ background-position:0% 50%; }
  50%    { background-position:100% 50%; }
}
/* la cabecera de la sección ULTRA */
.vip-apartado[style*="FF5A1F"] span,
.vip-catinfo.ultra .vip-cat-bienv.mini b{
  background:linear-gradient(100deg, var(--ultra-3), var(--ultra-2) 50%, var(--ultra-1));
  -webkit-background-clip:text; background-clip:text; color:transparent !important;
}
/* v183b — ULTRA conserva su fuego INCLUSO en modo ligero: Luis pidió
   que fuera la única excepción de toda la web, y en modo ligero es
   justo cuando más falta hace que algo destaque. */

/* =====================================================================
   v184 — NARANJA VIBRANTE EN TODA LA IDENTIDAD
   Luis: la barra de categorías en naranja vivo, ULTRA en naranja
   rojizo, y el logotipo (más las 3 barritas) del mismo tono, con una
   pulsación de brillo.
   ===================================================================== */
:root{
  --fp-nar-vivo:#FF6A00;
  --fp-nar-rojo:#FF3B1F;
}

/* ── LA BARRA DE CATEGORÍAS, EN NARANJA ── */
.mobile-tabbar.barra-cats .tab-cat[data-familia="platinum"]{ --tcc:#FF8A1F !important; }
.mobile-tabbar.barra-cats .tab-cat[data-familia="black"]{    --tcc:#FFA83D !important; }
.mobile-tabbar.barra-cats .tab-cat.ultra-max{                --tcc:#FF3B1F !important; }
.barra-cats-rotulo{ color:color-mix(in srgb, var(--fp-nar-vivo) 66%, rgba(255,255,255,.42)) !important; }

/* ULTRA: el más vibrante de los tres, con su halo rojizo */
.mobile-tabbar.barra-cats .tab-cat.ultra-max span{
  box-shadow:0 0 24px -5px var(--fp-nar-rojo), inset 0 1px 0 rgba(255,255,255,.28) !important;
}
.mobile-tabbar.barra-cats .tab-cat.ultra-max.active span{
  box-shadow:0 12px 40px -8px var(--fp-nar-rojo),
             0 0 44px -4px var(--fp-nar-rojo),
             0 0 0 4px color-mix(in srgb, var(--fp-nar-rojo) 34%, transparent),
             inset 0 1px 0 rgba(255,255,255,.7) !important;
}

/* ── EL LOGOTIPO, EN NARANJA ROJIZO Y CON PULSO DE BRILLO ── */
.brand .mark svg{
  /* el logo viene en dorado: se lleva al naranja rojizo sin tocar el SVG */
  filter:hue-rotate(-26deg) saturate(1.85) brightness(1.06);
}
.brand .mark{
  animation:fpLatidoLogo 3.2s ease-in-out infinite;
  border-radius:24%;
}
@keyframes fpLatidoLogo{
  0%,100%{ filter:drop-shadow(0 0 6px color-mix(in srgb, var(--fp-nar-rojo) 45%, transparent)); }
  50%    { filter:drop-shadow(0 0 18px color-mix(in srgb, var(--fp-nar-vivo) 85%, transparent))
                  drop-shadow(0 0 34px color-mix(in srgb, var(--fp-nar-rojo) 55%, transparent)); }
}
/* v184c — "PREMIUM" tiene su propia CAJA de fondo (no es texto suelto),
   así que el degradado con recorte al texto la dejaba como un bloque
   amarillo sin letras. Aquí se le tiñe la CAJA, que es lo correcto. */
.brand .wordmark em{
  background:linear-gradient(100deg, var(--fp-nar-vivo), var(--fp-nar-rojo)) !important;
  color:#1A0600 !important; -webkit-text-fill-color:#1A0600 !important;
  background-clip:border-box !important; -webkit-background-clip:border-box !important;
}

/* ── LAS 3 BARRITAS, DEL MISMO NARANJA Y CON SU PULSO ── */
.nav-burger span{
  background:linear-gradient(90deg, var(--fp-nar-vivo), var(--fp-nar-rojo)) !important;
  box-shadow:0 0 8px -1px color-mix(in srgb, var(--fp-nar-vivo) 70%, transparent);
}
.nav-burger{ animation:fpLatidoBarritas 3.2s ease-in-out infinite; }
@keyframes fpLatidoBarritas{
  0%,100%{ opacity:.9; }
  50%    { opacity:1; filter:drop-shadow(0 0 7px color-mix(in srgb, var(--fp-nar-vivo) 75%, transparent)); }
}
/* el logo y las barritas conservan su pulso aunque el modo ligero esté
   encendido: son la identidad de la marca, no un adorno de relleno */
html[data-lite="1"] .brand .mark,
html[data-lite="1"] .nav-burger{ animation-duration:4.5s; }

/* v184b — el MODO LIGERO apaga todos los filtros y animaciones con
   prioridad máxima, así que se llevaba por delante el color y el pulso
   del logo. La identidad de tu marca es la excepción: se le devuelve
   con la misma prioridad (son dos elementos, no cuesta nada). */
html[data-lite="1"] .brand .mark svg,
.brand .mark svg{
  filter:hue-rotate(-26deg) saturate(1.85) brightness(1.06) !important;
}
html[data-lite="1"] .brand .mark,
.brand .mark{
  animation:fpLatidoLogo 3.2s ease-in-out infinite !important;
}
html[data-lite="1"] .nav-burger,
.nav-burger{
  animation:fpLatidoBarritas 3.2s ease-in-out infinite !important;
}

/* =====================================================================
   v185 — EL BLOQUE DE ARRIBA, FUSIONADO · FONDO NEGRO
   Luis lo quiere como una sola pieza: el nombre de la categoría en
   grande y vibrante, debajo sus subcategorías, y hasta abajo el botón
   de desbloquear. Y toda la web en negro.
   ===================================================================== */

/* ── FONDO NEGRO EN TODA LA WEB ── */
html, body,
#vipZona, #vipCuerpo,
.vip-zona, .catalog, .account-section{
  background:#000 !important;
}
.vip-perfil.vcard{ background:#0A0A0C !important; }

/* ── LA PASTA, FUSIONADA CON LAS SUBCATEGORÍAS ── */
@media (max-width:860px){
  /* v185b — la fusión visual con las subcategorías se revierte: viven en
     lugares distintos del código (las subcategorías arriba de todo, la
     pasta dentro de cada sección), así que pegarlas con estilo dejaba un
     borde cortado a media pantalla. Se queda como pieza completa. */
  .vip-catinfo.compacta{ border-radius:16px !important; }
  /* el nombre, en grande y con el naranja de la casa */
  .vip-cat-bienv.mini b{
    font-family:'Fraunces', serif; font-weight:800;
    font-size:clamp(21px, 6.6vw, 31px) !important;
    letter-spacing:.05em !important;
    background:linear-gradient(100deg, #FFB25A, var(--fp-nar-vivo, #FF6A00) 55%, var(--fp-nar-rojo, #FF3B1F));
    -webkit-background-clip:text; background-clip:text; color:transparent !important;
  }
  .vip-cat-bienv.mini{ flex-direction:column; align-items:flex-start; gap:1px; }

  /* las subcategorías se pegan justo debajo, como parte de la misma pieza */
  .vip-subnav{
    border-radius:16px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.07);
    border-top:none;
    padding:10px !important;
  }
  /* los botones de subcategoría, en negro con su filo naranja */
  .vip-subnav-btn{
    background:#0B0B0E !important;
    border:1px solid color-mix(in srgb, var(--fp-nar-vivo, #FF6A00) 30%, transparent) !important;
    box-shadow:none !important;
  }
  .vip-subnav-btn.on{
    background:linear-gradient(180deg, #FFB25A, var(--fp-nar-vivo, #FF6A00)) !important;
    border-color:var(--fp-nar-vivo, #FF6A00) !important;
    color:#180800 !important;
  }
  .vip-subnav-btn.on b, .vip-subnav-btn.on small{ color:#180800 !important; }
  .vip-subnav-btn .sbn-luz{ display:none; }
}

/* =====================================================================
   v186 — LA BARRA DE ABAJO, QUE ESTORBE MENOS
   Luis: "estorba un poco, hazla más transparentosa". Se le baja el
   fondo a semitransparente con un velo, se hace más delgada, y cuando
   estás bajando por el catálogo se difumina aún más — al tocar la
   pantalla o al parar de bajar, vuelve a su opacidad normal.
   ===================================================================== */
.mobile-tabbar.barra-cats{
  background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.88)) !important;
  border-top:1px solid rgba(255,255,255,.05) !important;
  padding:5px 12px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
  transition:opacity .25s ease;
}
.mobile-tabbar.barra-cats .tab-cat span{
  padding:9px 8px 8px !important; font-size:11px !important;
}
.barra-cats-rotulo{ font-size:7.5px !important; margin-bottom:3px !important; opacity:.75; }
/* bajando por el catálogo se aparta de la vista */
.mobile-tabbar.barra-cats.bajando{ opacity:.42; }

/* v186b — la barra quedó en 78px, casi lo mismo que antes. Se aprieta de
   verdad: pastillas más bajas y el rótulo más pegado. */
.mobile-tabbar.barra-cats .tab-cat span{ padding:7px 8px 6px !important; font-size:10.5px !important; }
.barra-cats-rotulo{ margin-bottom:2px !important; }
.mobile-tabbar.barra-cats{ padding-top:4px !important; }

/* =====================================================================
   v187 — LA PANTALLA DEL CANDADO, SIN MATERIAL DETRÁS
   Luis: "que ya no aparezcan videos detrás ni nada, solo algo que
   muestre archivos en borroso y diga contrata la categoría por
   Telegram".
   Los ríos dejan de moverse y las casillas quedan como bultos
   borrosos: se entiende que HAY material y cuánto, sin enseñar nada
   y sin descargar una sola imagen.
   ===================================================================== */
.ficha-rio-col{ animation:none !important; transform:none !important; }
.ficha-rio-tile{
  background:linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.02)) !important;
  border:1px solid rgba(255,255,255,.06);
  filter:blur(3px);
  opacity:.5;
}
.ficha-rio-tile img{ display:none !important; }   /* por si quedara alguna */
.ficha-rio-tile.archivo-ph::after{
  content:''; position:absolute; inset:24% 30%;
  background:rgba(255,255,255,.10); border-radius:4px;
}
.ficha-rio-tile.video-ph .ficha-ph-play{ opacity:.35; filter:blur(1px); }

/* v187b — la línea que deja claro CÓMO se contrata */
.ficha-lock-tg{
  display:flex; align-items:center; justify-content:center; gap:7px;
  margin:10px 0 2px; padding:9px 12px; border-radius:10px;
  background:rgba(42,171,238,.10); border:1px solid rgba(42,171,238,.32);
  color:#7CC9F0; font-size:11.5px; font-weight:700; letter-spacing:.02em;
  text-align:center; line-height:1.35;
}

/* v187c — el modo ligero apaga TODOS los filtros con prioridad máxima y
   se llevaba el desenfoque de las casillas. Aquí sí importa: sin blur
   las casillas se verían como cuadros nítidos vacíos, y la idea es que
   se intuya que hay material sin enseñarlo. */
html[data-lite="1"] .ficha-rio-tile,
.ficha-rio-tile{ filter:blur(3px) !important; }

/* =====================================================================
   v188 — LOS ARCHIVOS DEL CLIENTE, SIN DESLIZAR
   Tus FOTOS y VIDEOS ya salían en dos secciones separadas — eso ya
   estaba bien. Lo que estorbaba es que cada una era un CARRUSEL: había
   que deslizar de lado para ver el resto, y los de más allá ni se
   sospechaban.
   Ahora es una cuadrícula: todo a la vista, se baja y ya, como en las
   páginas grandes de video.
   ===================================================================== */
.ficha-slider{
  display:grid !important;
  grid-template-columns:repeat(2, 1fr) !important;
  gap:8px !important;
  overflow:visible !important;
  scroll-snap-type:none !important;
  padding-bottom:0 !important;
}
.ficha-slider .ficha-tile{
  width:auto !important; min-width:0 !important; flex:none !important;
  scroll-snap-align:none !important;
  aspect-ratio:4/5;
}
/* los VIDEOS un poco más anchos, que es como se ven mejor */
.ficha-bloque:has(.ficha-slider-tit .ti-movie) .ficha-slider .ficha-tile{ aspect-ratio:16/11; }
/* la flechita de "desliza" ya no aplica */
.ficha-slider-tit .ficha-slider-hint,
.ficha-slider-tit span[class*="desliza"]{ display:none !important; }
@media (min-width:520px){
  .ficha-slider{ grid-template-columns:repeat(3, 1fr) !important; }
}

/* v188b — el aviso de "desliza" se llama .ficha-slider-pista (mi regla
   anterior le apuntaba a un nombre que no existe). Como ya no hay nada
   que deslizar, se retira. */
.ficha-slider-pista{ display:none !important; }

/* =====================================================================
   v189 — FUERA LOS EFECTOS DEL FONDO DE LA PÁGINA
   Aquí estaba el flasheo que reportó Luis, y no era el de la barra:
     · .shooting-star — una raya blanca que CRUZA la pantalla en
       diagonal cada 9 segundos y se enciende de golpe. Esa es la
       "raya" que veía.
     · .aurora — manchas de luz que se mueven detrás de todo.
     · .starfield — el campo de estrellas parpadeando.
   Ninguna la puse yo: ya venían en la web. Pero cuando me pidió quitar
   los efectos, yo los quité de las TARJETAS, el menú y la barra — y me
   faltó el FONDO DE LA PÁGINA, que es justo donde vivían estos.
   Con todo lo demás plano, resaltaban muchísimo más que antes.
   ===================================================================== */
.shooting-star,
.aurora,
.starfield,
.orb,
.hero-particles,
.hero::before,
.promo-banner::before{
  display:none !important;
}
/* y por si alguno se dibuja de otra forma, se le corta la animación */
.shooting-star, .aurora i, .starfield i, .orb{ animation:none !important; }

/* =====================================================================
   v190 — LA CABECERA FUSIONADA
   Una sola pieza: el nombre de la categoría arriba, sus subcategorías
   debajo y el botón de desbloquear al pie. Antes eran tres cosas
   sueltas en sitios distintos de la página.
   ===================================================================== */
.fam-cabecera{
  margin:8px 0 14px;
  border:1px solid color-mix(in srgb, var(--vap, #FF6A00) 24%, rgba(255,255,255,.07));
  border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.2));
}
.fam-nombre{
  font-family:'Fraunces', serif; font-weight:800;
  font-size:clamp(23px, 7.2vw, 34px); letter-spacing:.06em; text-transform:uppercase;
  text-align:center; padding:14px 14px 10px;
  background:linear-gradient(100deg, #FFB25A, var(--fp-nar-vivo, #FF6A00) 55%, var(--fp-nar-rojo, #FF3B1F));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* las subcategorías, ya dentro de la pieza */
.fam-cabecera .vip-subnav{
  margin:0 !important; border:none !important; border-radius:0 !important;
  background:transparent !important; padding:0 10px 10px !important;
}
/* el botón, al pie y a todo lo ancho */
.fam-boton{ padding:0 10px 12px; }
.fam-boton .vip-desbloq{
  display:flex !important; width:100% !important; justify-content:center;
  margin:0 !important; border-radius:12px;
}
/* ULTRA conserva su fuego también aquí */
.fam-cabecera.ultra{ border-color:color-mix(in srgb, var(--ultra-2, #FF7A18) 55%, transparent); }
.fam-cabecera.ultra .fam-nombre{
  background:linear-gradient(100deg, var(--ultra-3, #FFC336), var(--ultra-2, #FF7A18) 50%, var(--ultra-1, #FF3D2E));
  -webkit-background-clip:text; background-clip:text;
}

/* v194 — las reglas de las marcas visibles del id (.vip-pl-regada) se
   borraron: el JS ya no las crea, así que eran estilo muerto cargando
   de gratis en cada visita. */


/* =====================================================================
   v192 — LA MARCA ESCONDIDA
   Seis copias del id, casi transparentes, regadas por todo el video y
   recolocadas cada 11 segundos. En pantalla apenas se intuyen; en el
   archivo filtrado, al subir contraste, se leen.
   No se puede tapar lo que no se ve.
   ===================================================================== */
.vip-pl-oculta{
  position:absolute; z-index:2; pointer-events:none; user-select:none;
  font-size:15px; font-weight:900; letter-spacing:.14em; white-space:nowrap;
  /* v195 — TRANSPARENTES, no invisibles (pedido de Luis): se ven, pero
     dejan ver la imagen a través. Antes iban tan tenues que solo
     aparecían al revelarlas. */
  color:rgba(255,255,255,.26);
  mix-blend-mode:overlay;                 /* se funde con la imagen */
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  will-change:transform;
}
/* v194 — cada una cruza su franja a su propio ritmo. Media vuelta de ida
   y media de vuelta, para que nunca vayan todas en bloque. */
.vip-pl-oculta.ida,
html[data-lite="1"] .vip-pl-oculta.ida{
  animation:fpOcultaIda var(--ritmo, 31s) linear infinite !important;
  animation-delay:var(--arranque, 0s) !important;
}
.vip-pl-oculta.vuelta,
html[data-lite="1"] .vip-pl-oculta.vuelta{
  animation:fpOcultaVuelta var(--ritmo, 37s) linear infinite !important;
  animation-delay:var(--arranque, 0s) !important;
}
@keyframes fpOcultaIda{
  0%   { transform:translateX(-14vw); }
  100% { transform:translateX(88vw); }
}
@keyframes fpOcultaVuelta{
  0%   { transform:translateX(88vw); }
  100% { transform:translateX(-14vw); }
}
/* también en modo ligero: es la prueba, no un adorno */
/* también en modo ligero: es la prueba, no un adorno (y es transform
   puro, de lo más barato que hay para el teléfono) */