/* ════════════════════════════════════════════════════════════════════
   VIDRIO «RUIDO» — capa final del sitio (22-Oct-2026)
   ════════════════════════════════════════════════════════════════════
   Pedido del dueño: el vidrio líquido que eligió en la entrada (el
   LiquidButton de 21st.dev, versión «ruido») en todos los botones y en lo
   que flota sobre la página. Lo que decidió (22-Oct):
     · los botones, en píldora;
     · lo que flota (barra, cajón, franja de oferta, ventanas, avisos, la
       ficha y la barra de filtros del catálogo), en vidrio con las
       esquinas de 2 px del ADN;
     · el negro del fondo más claro cerca de los botones, para que el
       vidrio tenga casquillos que deformar (sobre negro liso no se ve).

   Cómo funciona: el filtro SVG #vidrio-ruido va una vez en cada página,
   justo después de <body>. Mete ruido fractal que deforma y desenfoca lo
   que pasa detrás del botón; el canto lo dibujan las sombras blancas del
   ::before. Solo Chromium (Chrome, Edge, Opera, el navegador de Android)
   aplica filtros SVG como backdrop-filter. Safari, todo el iPhone y Firefox
   reciben html.vidrio-simple (lo pone el script corto del <head>) y quedan
   con un esmerilado común. Con "reducir transparencia" en el sistema el
   fondo queda casi sólido.

   Los colores van en --tinte: rojo de marca en los botones de venta, verde
   en los de WhatsApp, transparente en los demás, y un negro a medias en lo
   que flota, para que se siga leyendo.

   Carga DESPUÉS de styles.css y de mobile.css. mobile.css usa !important
   en algunos fondos y bordes; por eso aquí también lo llevan esos.
   Deshacerla: quitar el <link> a vidrio.css, el <svg> y el <script> del
   vidrio de cada página. */

:root{
  --vidrio-canto:0 0 8px rgba(0,0,0,.03),0 2px 6px rgba(0,0,0,.08),
    inset 3px 3px .5px -3.5px rgba(255,255,255,.09),inset -3px -3px .5px -3.5px rgba(255,255,255,.85),
    inset 1px 1px 1px -.5px rgba(255,255,255,.6),inset -1px -1px 1px -.5px rgba(255,255,255,.6),
    inset 0 0 6px 6px rgba(255,255,255,.12),inset 0 0 2px 2px rgba(255,255,255,.06),
    0 0 12px rgba(0,0,0,.15);
  /* Tintes bajos a pedido del dueño (22-Oct): con 0,42 de rojo el botón se
     veía lleno y no se notaba el vidrio. */
  --vidrio-rojo:rgba(160,3,2,.22);
  --vidrio-verde:rgba(37,211,102,.14)}

/* ---------- los botones: píldora de vidrio ---------- */
.vidrio,
.btn-primary,.btn-secondary,.btn-urgency,.btn-defensa-primary,.btn-defensa-secondary,
.nav-cta,.product-card .card-cta,.modal-color-btn,.filter-btn,.quiz-opt,.archetype-card,
.hamb,.cajon .cerrar,
.esfera-grupo button,.esfera-zoom,
.nav-mobile-toggle,.sim-option{position:relative}

.vidrio,
.btn-primary,.btn-secondary,.btn-urgency,.btn-defensa-primary,.btn-defensa-secondary,
.nav-cta,.product-card .card-cta,.modal-color-btn,.filter-btn,.quiz-opt,.archetype-card,
.hamb,.cajon .cerrar,
.esfera-grupo button,.esfera-zoom,
.nav-mobile-toggle,.sim-option,
.wa-float,.modal-close,.zoom-close,.promo-close,.modal-cta,.esfera-cerrar{
  isolation:isolate;border:0 !important;border-radius:999px;
  background:var(--tinte,transparent) !important;color:#fafafa;
  text-shadow:0 1px 3px rgba(0,0,0,.55);
  -webkit-backdrop-filter:url(#vidrio-ruido);backdrop-filter:url(#vidrio-ruido);
  box-shadow:none;animation:none;filter:none;
  transition:transform .3s,background-color .3s,color .3s}

.vidrio::before,
.btn-primary::before,.btn-secondary::before,.btn-urgency::before,.btn-defensa-primary::before,
.btn-defensa-secondary::before,.nav-cta::before,.product-card .card-cta::before,
.modal-color-btn::before,.filter-btn::before,.quiz-opt::before,.archetype-card::before,
.hamb::before,.cajon .cerrar::before,
.esfera-grupo button::before,.esfera-zoom::before,
.nav-mobile-toggle::before,.sim-option::before,
.wa-float::before,.modal-close::before,.zoom-close::before,.promo-close::before,
.modal-cta::before,.esfera-cerrar::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  pointer-events:none;box-shadow:var(--vidrio-canto)}

.vidrio:hover,
.btn-primary:hover,.btn-secondary:hover,.btn-urgency:hover,.btn-defensa-primary:hover,
.btn-defensa-secondary:hover,.nav-cta:hover,.product-card .card-cta:hover,
.modal-color-btn:hover,.filter-btn:hover,.quiz-opt:hover,.archetype-card:hover,
.hamb:hover,.cajon .cerrar:hover,
.esfera-grupo button:hover,.esfera-zoom:hover,
.nav-mobile-toggle:hover,.sim-option:hover,
.wa-float:hover,.modal-close:hover,.zoom-close:hover,.modal-cta:hover,.esfera-cerrar:hover{
  transform:scale(1.05);color:#fff;box-shadow:none;filter:none}
.vidrio:active,
.btn-primary:active,.btn-secondary:active,.btn-urgency:active,.btn-defensa-primary:active,
.btn-defensa-secondary:active,.nav-cta:active,.product-card .card-cta:active,
.modal-color-btn:active,.filter-btn:active,.quiz-opt:active,.archetype-card:active,
.hamb:active,.cajon .cerrar:active,
.esfera-grupo button:active,.esfera-zoom:active,
.nav-mobile-toggle:active,.sim-option:active,
.wa-float:active,.modal-close:active,.zoom-close:active,.modal-cta:active,.esfera-cerrar:active{
  transform:scale(.96)}
/* La X de la franja de oferta se centra con translateY: la escala va encima. */
.promo-close:hover{transform:translateY(-50%) scale(1.05);color:#fff}
.promo-close:active{transform:translateY(-50%) scale(.96)}

/* Tintes. Venta = rojo de marca; lo que dice "WhatsApp" = verde, como en la
   entrada (la barra, la burbuja, "Pedir por WhatsApp" de tarjetas y fichas). */
.btn-primary,.btn-urgency,.btn-defensa-primary,
.filter-btn.active,.quiz-opt.selected,.archetype-card.active,.modal-color-btn.active,
.esfera-grupo button.activo,.esfera-zoom[aria-pressed="true"],
.vidrio.rojo{--tinte:var(--vidrio-rojo);--tinte-opaco:#a00302}
.nav-cta,.wa-float,.modal-cta,.product-card .card-cta,.esfera-ficha-cta,.cajon .pie .btn-primary,
.vidrio.whats{--tinte:var(--vidrio-verde);--tinte-opaco:#1f7a3f}
.modal-cta.sold-out-cta,.product-card.sold-out .card-cta{--tinte:transparent;--tinte-opaco:rgba(23,23,23,.94)}
/* Simulador de la biblioteca: la respuesta buena en verde y la mala en rojo. */
.sim-option.correct{--tinte:rgba(34,197,94,.16);--tinte-opaco:#166534}
.sim-option.wrong{--tinte:var(--vidrio-rojo);--tinte-opaco:#a00302}

/* Formas: los botones de texto largo (opciones del quiz y del simulador)
   y las fichas de perfil son píldoras más bajas; los de solo icono, círculos. */
.quiz-opt,.sim-option{border-radius:28px;padding-left:22px;padding-right:22px}
.archetype-card{border-radius:26px}
.archetype-card::after{border-radius:inherit}
.hamb,.cajon .cerrar,.esfera-zoom,.esfera-cerrar,.nav-mobile-toggle{border-radius:50%}
/* La hamburguesa es un ícono de tres rayas: el círculo pide un poco más de aire. */
.hamb{width:38px;height:38px;padding:9px 9px}

/* ---------- lo que flota: vidrio con esquinas de 2 px ---------- */
/* Aquí el canto va en la sombra del propio elemento y no en un ::before:
   el cajón, la ventana del producto y la barra de filtros tienen scroll, y
   un ::before se iría con el contenido. --raya suma la raya roja del ADN
   donde la había. */
.nav,.nav-bar,.cajon,.promo-bar,.product-modal-box,.live-notification,
.esfera-ficha,.esfera-filtros,.esfera-mapa{
  border-radius:2px;
  background:var(--tinte) !important;
  -webkit-backdrop-filter:url(#vidrio-ruido) !important;backdrop-filter:url(#vidrio-ruido) !important;
  box-shadow:var(--raya,0 0 0 transparent),var(--vidrio-canto) !important;animation:none}
/* Negro a medias: lo justo para que el texto se lea encima. */
.nav,.nav-bar{--tinte:rgba(10,10,10,.42);--tinte-opaco:rgba(10,10,10,.96);border-radius:0}
.nav{--raya:inset 0 3px 0 #a00302}
.nav.scrolled{--tinte:rgba(10,10,10,.6)}
.cajon{--tinte:rgba(13,13,13,.58);--tinte-opaco:#0d0d0d;border-radius:0 2px 2px 0}
.promo-bar{--tinte:rgba(160,3,2,.4);--tinte-opaco:#a00302;border-radius:0}
.product-modal-box{--tinte:rgba(17,17,17,.8);--tinte-opaco:rgba(17,17,17,.97)}
.live-notification{--tinte:rgba(17,17,17,.62);--tinte-opaco:rgba(17,17,17,.97)}
.esfera-ficha{--tinte:rgba(17,17,17,.55);--tinte-opaco:rgba(17,17,17,.95)}
.esfera-filtros{--tinte:rgba(17,17,17,.45);--tinte-opaco:rgba(17,17,17,.95)}
.esfera-mapa{--tinte:rgba(17,17,17,.45);--tinte-opaco:rgba(17,17,17,.95)}
/* Los bordes grises se van (el canto los reemplaza); las rayas rojas del
   ADN se quedan, ahora como sombra interior para no tocar el tamaño. */
.esfera-ficha,.esfera-filtros,.esfera-mapa{border:0}
.esfera-ficha{--raya:inset 0 3px 0 #a00302}
.cajon{border-right:0}

/* ---------- el fondo se asoma cerca de los botones (solo en el inicio) ----------
   El velo general baja de 0,93 a 0,80 y cada sección vuelve a oscurecerse
   por su cuenta. Las que no tienen botones quedan con el mismo negro de
   antes; las que sí, con un foco más claro donde están los botones que se
   apaga hacia los bordes, así no se nota la costura entre secciones.
   Cuentas: 0,80 de velo + 0,65 de sección = 0,93; con las bandas grafito,
   0,84 en vez de 0,55 da el mismo tono que tenían. */
body:has(#hero)::before{
  background:linear-gradient(rgba(10,10,10,.8),rgba(10,10,10,.8)),
    url('marca/fondo-1.webp') center center / cover no-repeat;background-color:#0a0a0a}
@media (max-width:700px){
  body:has(#hero)::before{background:linear-gradient(rgba(10,10,10,.8),rgba(10,10,10,.8)),
    url('marca/fondo-1-960.webp') center center / cover no-repeat;background-color:#0a0a0a}
}
body:has(#hero) .fondo-anim::after{background:rgba(10,10,10,.8)}
body:has(#hero) :is(.steps-section,.faq-section,.seo-content){background:rgba(10,10,10,.65)}
body:has(#hero) :is(.trust-bar,.why-section,.testimonials-section,.footer){background:rgba(17,17,17,.84)}
body:has(#hero) :is(.hero,.plan-section,.quiz-section,.products-section,.urgency-cta,.defensa-section){
  background:radial-gradient(var(--foco-forma,ellipse 70% 75%) at var(--foco,50% 50%),
    rgba(10,10,10,0),rgba(10,10,10,.22) 45%,rgba(10,10,10,.65) 100%) !important}
/* Dónde caen los botones en cada sección. */
body:has(#hero) .hero{--foco:28% 72%;--foco-forma:ellipse 60% 70%}
body:has(#hero) .products-section{--foco:50% 0;--foco-forma:ellipse 60% 360px}
body:has(#hero) .plan-section{--foco:50% 100%;--foco-forma:ellipse 60% 70%}
@media (max-width:768px){
  body:has(#hero) .hero{--foco:50% 82%;--foco-forma:ellipse 95% 55%}
}

/* La biblioteca no tenía casquillos detrás: el inicio de la página los
   pone con el velo de 0,80, para que los dos botones de entrada luzcan. */
body:has(#startSimBtn) .hero{
  background:linear-gradient(rgba(10,10,10,.8),rgba(10,10,10,.93) 92%),
    url('marca/fondo-1.webp') center center / cover no-repeat}

/* ---------- respaldos ---------- */
/* Safari, iPhone y Firefox: esmerilado común (el filtro SVG no les llega). */
html.vidrio-simple :is(.vidrio,
.btn-primary,.btn-secondary,.btn-urgency,.btn-defensa-primary,.btn-defensa-secondary,
.nav-cta,.product-card .card-cta,.modal-color-btn,.filter-btn,.quiz-opt,.archetype-card,
.hamb,.cajon .cerrar,.esfera-grupo button,.esfera-zoom,.nav-mobile-toggle,.sim-option,
.wa-float,.modal-close,.zoom-close,.promo-close,.modal-cta,.esfera-cerrar){
  -webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4);
  background:var(--tinte,rgba(30,30,30,.4)) !important}
html.vidrio-simple :is(.nav,.nav-bar,.cajon,.promo-bar,.product-modal-box,.live-notification,
.esfera-ficha,.esfera-filtros,.esfera-mapa){
  -webkit-backdrop-filter:blur(12px) saturate(1.4) !important;backdrop-filter:blur(12px) saturate(1.4) !important}
/* "Reducir transparencia" en el sistema: casi sólido. */
@media (prefers-reduced-transparency:reduce){
  :is(.vidrio,
  .btn-primary,.btn-secondary,.btn-urgency,.btn-defensa-primary,.btn-defensa-secondary,
  .nav-cta,.product-card .card-cta,.modal-color-btn,.filter-btn,.quiz-opt,.archetype-card,
  .hamb,.cajon .cerrar,.esfera-grupo button,.esfera-zoom,.nav-mobile-toggle,.sim-option,
  .wa-float,.modal-close,.zoom-close,.promo-close,.modal-cta,.esfera-cerrar,
  .nav,.nav-bar,.cajon,.promo-bar,.product-modal-box,.live-notification,
  .esfera-ficha,.esfera-filtros,.esfera-mapa){
    -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
    background:var(--tinte-opaco,rgba(23,23,23,.94)) !important}
}
@media (prefers-reduced-motion:reduce){
  .vidrio:hover,.vidrio:active{transform:none}
}