/* Menú flotante: el mismo en todas las páginas con header, también /universo y el blog.
   No depende de tienda.css ni de almanaque.css, que esas páginas no siempre cargan.
   Se activa con body.glass. */

/* Base sin peso (:where): solo cubre lo que la página no define. */
:where(.site-header) .alm-marca { transition: opacity .25s cubic-bezier(.23, 1, .32, 1), transform .25s cubic-bezier(.23, 1, .32, 1), filter .25s cubic-bezier(.23, 1, .32, 1); }
:where(.site-header) .menu-movil { position: relative; }
:where(.site-header) .menu-movil > summary { list-style: none; display: grid; place-items: center; cursor: pointer; }
:where(.site-header) .menu-movil > summary::-webkit-details-marker { display: none; }
:where(.site-header) .menu-movil__panel { position: absolute; z-index: 60; min-width: 220px; }
:where(.site-header) .menu-movil__panel a { display: block; min-height: 44px; padding: 12px 8px; color: var(--ink); font-size: .95rem; text-decoration: none; border-bottom: 1px solid var(--hairline); }
:where(.site-header) .menu-movil__panel a:last-child { border-bottom: 0; }
:where(.site-header) .alm-marca { color: var(--ink); text-decoration: none; }
:where(.site-header) .alm-marca__texto { display: grid; gap: 7px; font-family: var(--font-serif); font-size: 1.45rem; letter-spacing: .3em; }
:where(.site-header) .alm-marca__texto small { font: 500 .55rem/1.2 var(--font-sans); letter-spacing: .17em; text-transform: uppercase; color: var(--gold-deep); }
.site-header.logo-oculto .alm-marca { opacity: 0; transform: translateY(-14px); filter: blur(4px); pointer-events: none; }
body.glass.glass .site-header .site-nav { display: none; }
body.glass.glass .site-header .menu-movil { display: block; }
@media (min-width: 1200px) {
  body.glass.glass .site-header .site-nav { display: flex; }
  body.glass.glass .site-header .menu-movil { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header .alm-marca { transition: none; }
  body.glass .btn-metal::after { animation: none !important; }
}

/* ---------- Botones: tokens por versión ----------
   Principal = acciones del embudo (carta gratis, ver reportes, comprar la carta
   natal). Secundario = el resto («Comprar» de cada lectura, «Leer mi horóscopo»). */
@property --giro { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.glass--oro, .metal-oro {
  --pri-fondo: linear-gradient(180deg, #E8CC86 0%, #CFA758 46%, #B48C40 100%);
  --pri-fondo-hover: linear-gradient(180deg, #EFD798 0%, #D6B064 46%, #BC9446 100%);
  --pri-texto: #241904;
  --pri-borde: #8F6C2C;
  --pri-sombra: inset 0 1px 0 rgba(255, 247, 222, .72), inset 0 -1px 0 rgba(95, 66, 18, .28), 0 1px 2px rgba(60, 40, 10, .2), 0 10px 22px -12px rgba(140, 100, 30, .55);
  --pri-relieve: 0 1px 0 rgba(255, 242, 205, .45);
  --brillo: rgba(255, 251, 232, .95);
  --sec-texto: #6B4C17;
  --sec-borde: rgba(143, 108, 44, .55);
}
.glass--marmol, .metal-marmol {
  --pri-fondo: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .12)), url("/tienda-assets/img/marmol.svg") center / 240% auto, #F6F2EA;
  --pri-fondo-hover: linear-gradient(180deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, .3)), url("/tienda-assets/img/marmol.svg") 30% 50% / 240% auto, #F8F5EF;
  --pri-texto: #2B2620;
  --pri-borde: #B08A3E;
  --pri-sombra: inset 0 1px 0 #FFFFFF, inset 0 -1px 0 rgba(60, 50, 40, .08), 0 1px 2px rgba(43, 38, 32, .12), 0 10px 22px -12px rgba(43, 38, 32, .42);
  --pri-relieve: 0 1px 0 rgba(255, 255, 255, .8);
  --brillo: rgba(205, 162, 76, .95);
  --sec-texto: #3D352B;
  --sec-borde: rgba(176, 138, 62, .6);
}

/* ---------- Botón principal ---------- */
body.glass.glass.glass .btn.btn-metal {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 999px;
  background: var(--pri-fondo);
  border: 1px solid var(--pri-borde);
  color: var(--pri-texto);
  text-shadow: var(--pri-relieve);
  box-shadow: var(--pri-sombra);
  font-weight: 600; letter-spacing: .02em;
  /* Motion maneja la escala: sin transición de transform en CSS. */
  transition: box-shadow .2s cubic-bezier(.23, 1, .32, 1), color .2s, border-color .2s;
}
body.glass.glass.glass .btn.btn-metal:hover { background: var(--pri-fondo-hover); color: var(--pri-texto); }
body.glass.glass.glass .btn.btn-metal:active { transform: none; }
body.glass.glass.glass .btn.btn-metal .icon { stroke: currentColor; }
/* Una luz fina recorre el borde (solo en los principales). */
body.glass .btn-metal::after {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--giro), transparent 0deg 250deg, var(--brillo) 300deg, transparent 340deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: borde-luz 4.2s linear infinite;
  pointer-events: none;
}
@keyframes borde-luz { to { --giro: 360deg; } }

/* ---------- Header: tres islas de vidrio (como el Dock de macOS) ----------
   El header es solo el riel fijo e invisible; lo que flota es la isla del menú
   y la hamburguesa. Fuera de la portada llevan vidrio CSS; en la portada, con
   .lgl-listo, el vidrio lo pinta liquidGL. */
body.glass.glass .site-header.site-header {
  position: fixed; z-index: 50; top: 12px; left: 12px; right: 12px; width: auto; margin: 0;
  padding: 0; border: 0; border-radius: 0; box-shadow: none;
  background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  pointer-events: none;
}
body.glass.glass .site-header.site-header .site-header__inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  max-width: 1240px; min-height: 0; margin-inline: auto; padding: 0;
}
body.glass .site-header .isla-nav {
  position: relative; pointer-events: auto; justify-self: center;
  display: flex; align-items: center; gap: 6px; padding: 6px;
  min-height: 56px; border-radius: 999px;
  background: rgba(248, 246, 241, .5);
  -webkit-backdrop-filter: blur(26px) saturate(1.8); backdrop-filter: blur(26px) saturate(1.8);
  border: .5px solid rgba(0, 0, 0, .09);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .28);
}
/* El logo convive con el fondo: solo texto, con un halo para leerse sobre imágenes.
   Al bajar se esconde (nav-flotante.js); vuelve al llegar arriba. */
body.glass .site-header .alm-marca { justify-self: start; padding: 0 8px; pointer-events: auto; text-shadow: 0 0 14px rgba(250, 247, 240, .95), 0 0 2px rgba(250, 247, 240, .9); }
body.glass .site-header .alm-marca__texto { line-height: 1; }
body.glass.glass .site-header .site-nav { align-items: center; gap: 4px; }
body.glass.glass .site-header .site-nav a {
  min-height: 44px; padding: 0 14px; border-radius: 999px;
  transition: background-color .2s cubic-bezier(.23, 1, .32, 1), color .2s;
}
body.glass.glass .site-header .site-nav a:hover { background: rgba(255, 255, 255, .55); }
body.glass.glass .site-header .site-nav a[aria-current="page"] { background: rgba(255, 255, 255, .7); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
/* Acciones sin isla: el botón destacado va solo, a la altura de las islas. */
body.glass .site-header .header-acciones { justify-self: end; display: flex; align-items: center; gap: 8px; padding: 0; background: none; border: 0; }
body.glass.glass.glass .site-header .isla-nav .btn.btn-metal { min-height: 44px; padding-inline: 22px; margin-left: 4px; font-size: .8rem; }
/* Sin menú ni botón (celular) la isla no se muestra. */
@media (max-width: 599px) { body.glass .site-header .isla-nav { display: none; } }
/* Contenido por encima del velo y del brillo de cada isla. */
body.glass .site-header .alm-marca__texto,
body.glass .site-header .site-nav a,
body.glass .site-header .isla-nav > .btn,
body.glass .site-header .header-acciones > * { position: relative; z-index: 3; pointer-events: auto; }
/* Las islas no ocupan lugar en el flujo: el contenido empieza debajo. */
body.glass main { padding-top: 84px; }

@media (max-width: 1199px) {
  body.glass.glass .site-header.site-header .site-header__inner { display: flex; justify-content: space-between; }
  /* Sin el menú, «Ver reportes» queda solo (sin isla detrás), junto a la hamburguesa. */
  body.glass .site-header .isla-nav { margin-left: auto; padding: 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  body.glass.lgl-listo .site-header .isla-nav::before, body.glass.lgl-listo .site-header .isla-nav::after { content: none; }
  body.glass.glass.glass .site-header .isla-nav .btn.btn-metal { min-height: 56px; margin-left: 0; padding-inline: 26px; }
}
@media (max-width: 599px) {
  body.glass.glass .site-header.site-header { top: 10px; left: 10px; right: 10px; }
  body.glass .site-header .alm-marca { padding: 0 6px; }
  body.glass main { padding-top: 76px; }
}
/* La hamburguesa es una isla redonda de vidrio. */
body.glass.glass .menu-movil > summary {
  width: 56px; height: 56px; border-radius: 50%; pointer-events: auto;
  background: rgba(248, 246, 241, .62);
  -webkit-backdrop-filter: blur(26px) saturate(1.8); backdrop-filter: blur(26px) saturate(1.8);
  border: .5px solid rgba(0, 0, 0, .09);
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .7), inset 0 1px 0 rgba(255, 255, 255, .95), 0 10px 30px -12px rgba(0, 0, 0, .28);
}
/* Panel del menú: otra placa de vidrio que cae desde la isla. */
body.glass .menu-movil__panel {
  top: calc(100% + 12px); right: 0; border-radius: 28px; padding: 10px 16px;
  background: rgba(248, 246, 241, .82);
  -webkit-backdrop-filter: blur(26px) saturate(1.8); backdrop-filter: blur(26px) saturate(1.8);
  border: .5px solid rgba(0, 0, 0, .09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 24px 50px -24px rgba(0, 0, 0, .35);
  transform-origin: top right;
}
body.glass .menu-movil[open] .menu-movil__panel { animation: isla-panel .24s cubic-bezier(.23, 1, .32, 1); }
@keyframes isla-panel { from { opacity: 0; transform: translateY(-6px) scale(.96); } }