/* ===================== MATERIAL ÚNICO DEL SITIO =====================
 * Un solo vidrio para todas las superficies: paneles de sección, tarjetas de
 * producto, modales, el cajón del carrito, el menú del teléfono y el pie.
 * Los valores salieron del prototipo que el cliente ajustó (2026-09-23).
 *
 * Va en un archivo aparte, cargado DESPUÉS del <style> de cada página, para
 * ganarle a las reglas viejas sin tener que reescribirlas una por una, y para
 * que el material viva en un solo sitio: cambiarlo aquí lo cambia en todo.
 *
 * La barra superior NO entra: lleva su propio vidrio, más transparente, que el
 * cliente eligió aparte. Es cromo, no una superficie de lectura.
 */
:root{
  --vidrio-relleno:linear-gradient(180deg,rgba(255,255,255,.46),rgba(255,255,255,.36));
  --vidrio-filtro:blur(24px) saturate(150%) brightness(1.06);
  --vidrio-radio:22px;
  /* Anillo de lente: el mismo filo discreto de la barra. Con 14px y brillo
     1.14 —los valores del prototipo, pensados para una barra de 67px— sobre un
     cajón grande se leía como un marco blanco grueso (cliente, 2026-09-23). */
  --vidrio-filo:6px;
  --vidrio-filo-filtro:blur(4px);
  --vidrio-sombra:0 18px 44px -24px rgba(21,65,130,.40);
  /* Filo especular: la luz que agarra el canto del vidrio. Va como sombra
     interior para no gastar un pseudo-elemento en cada pieza. */
  --vidrio-canto:inset 0 0 0 1px rgba(255,255,255,.42),inset 0 1px 0 rgba(255,255,255,.75);
}

.panel,
.ui-modal,
.cart-drawer,
.sitelaw,
.lineup-card{
  background:var(--vidrio-relleno);
  -webkit-backdrop-filter:var(--vidrio-filtro);
  backdrop-filter:var(--vidrio-filtro);
  border:0;
  box-shadow:var(--vidrio-canto),var(--vidrio-sombra);
}

.panel,
.ui-modal,
.cart-drawer,
.sitelaw{
  position:relative;
  border-radius:var(--vidrio-radio);
}

/* El anillo de lente: sólo el filo lleva un segundo filtro, que es lo que
   imita el borde refractado. Se limita a las superficies grandes y únicas:
   repetirlo en cada tarjeta multiplica por veinte el costo de cada fotograma
   y el scroll se entrecorta en teléfono. */
.ui-modal::before,
.cart-drawer::before,
.panel::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  padding:var(--vidrio-filo);
  -webkit-backdrop-filter:var(--vidrio-filo-filtro);
  backdrop-filter:var(--vidrio-filo-filtro);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
}

/* La tarjeta de producto conserva su redondeo propio: 22px en una fila de
   164px de alto se come la foto. */
.lineup-card{border-radius:18px}

/* El cajón del carrito entra por el costado: redondeo sólo del lado visible. */
.cart-drawer{border-radius:var(--vidrio-radio) 0 0 var(--vidrio-radio)}

@media (max-width:560px){
  .lineup-card{border-radius:16px}
  .panel{border-radius:18px}
}

/* Menos transparencia donde hay que leer, sin cambiar de material: el menú y
   los modales llevan texto corrido encima del catálogo. */
.ui-modal{
  background:linear-gradient(180deg,rgba(255,255,255,.80),rgba(255,255,255,.72));
}

/* El menú desplegable sólo existe en teléfono: ahí sí es un cajón de vidrio.
   En escritorio es una fila de enlaces dentro de la barra, y aplicarle el
   material le pintaba el anillo encima y desenfocaba el texto. */
@media (max-width:840px){
  .nav-menu{
    /* Material que fijó el cliente en el prototipo (2026-09-23): con velo, sin
       anillo de lente. Sin el velo, el catálogo de atrás se leía entre los
       enlaces. */
    background:linear-gradient(180deg,rgba(255,255,255,.53),rgba(255,255,255,.43));
    /* Velo, saturación, brillo y radio son los que fijó el cliente; el
       desenfoque sube de 4 a 22 px porque con 4 el catálogo de atrás seguía
       legible entre los enlaces y el menú "no se veía". */
    -webkit-backdrop-filter:blur(22px) saturate(165%) brightness(1.07);
    backdrop-filter:blur(22px) saturate(165%) brightness(1.07);
    border:0;border-radius:var(--vidrio-radio);
    box-shadow:var(--vidrio-canto),var(--vidrio-sombra);
  }
}
.cart-drawer{
  background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.70));
}

@media (prefers-reduced-transparency: reduce){
  .panel,.ui-modal,.cart-drawer,.nav-menu,.sitelaw,.lineup-card{
    background:rgba(255,255,255,.96);
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
  .ui-modal::before,.cart-drawer::before,.nav-menu::before,.panel::after{display:none}
}