/* Gravite — base: tipografías, reset, tipografía, componentes y layout común. Requiere tokens.css. */

/* ---------- Tipografías autoalojadas (OFL, ver /assets/fonts/LICENSES.txt) ---------- */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300; font-display: swap;
  src: url(/assets/fonts/montserrat-latin-300-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300; font-display: swap;
  src: url(/assets/fonts/montserrat-latin-ext-300-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/montserrat-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/montserrat-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/assets/fonts/montserrat-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/assets/fonts/montserrat-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/assets/fonts/montserrat-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/assets/fonts/montserrat-latin-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-latin-500-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-latin-ext-500-italic.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; color-scheme: dark; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  background: var(--bg); color: var(--ivory);
  font-family: var(--font-sans); font-size: var(--fs-base); font-weight: 400; line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg, video, canvas, picture { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl { margin: 0; }
ul[class], ol[class], nav ul { list-style: none; padding: 0; }
a { color: var(--gold-200); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--gold-100); }
::selection { background: var(--gold-300); color: var(--on-gold); }
[hidden] { display: none !important; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--gold-100); outline-offset: 3px; border-radius: var(--radius-sm); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--sp-4); top: -100px; z-index: calc(var(--z-intro) + 1);
  padding: var(--sp-2) var(--sp-4); background: var(--gold-100); color: var(--on-gold); border-radius: var(--radius);
}
.skip-link:focus { top: var(--sp-3); }

/* ---------- Tipografía ---------- */
h1, .h1 { font-size: var(--fs-3xl); font-weight: 300; line-height: var(--lh-tight); letter-spacing: 0.01em; }
h2, .h2 { font-size: var(--fs-2xl); font-weight: 300; line-height: 1.18; letter-spacing: 0.01em; }
h3, .h3 { font-size: var(--fs-xl); font-weight: 400; line-height: 1.25; }
h4, .h4 { font-size: var(--fs-lg); font-weight: 500; line-height: 1.3; }
.lead { font-size: var(--fs-lg); color: var(--muted); max-width: 38rem; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
.text-gold {
  color: var(--gold-200);
  background: var(--gold-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.quote {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: var(--fs-2xl); line-height: var(--lh-serif); color: var(--gold-100); max-width: 34rem;
}
.quote footer, .quote cite { display: block; margin-top: var(--sp-3); font-family: var(--font-sans); font-style: normal; font-size: var(--fs-sm); color: var(--muted); }
.wordmark { font-weight: 400; letter-spacing: var(--tracking-logo); text-transform: uppercase; }
.prose > * + * { margin-top: var(--sp-4); }
.prose { max-width: var(--container-narrow); }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }
.container--narrow { max-width: calc(var(--container-narrow) + 2 * var(--gutter)); }
.section { padding-block: var(--section-y); }
.section--teal { background: linear-gradient(160deg, var(--teal-dark), var(--teal) 70%, var(--teal-light)); }
.section--elev { background: var(--bg-elev); }
.stack > * + * { margin-top: var(--stack, var(--sp-4)); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--cluster, var(--sp-3)); align-items: center; }
.grid { display: grid; gap: var(--grid-gap, var(--sp-5)); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--grid-min, 15rem)), 1fr)); }
.grid > * { min-width: 0; }
.grid--2 { --grid-min: 20rem; }
.grid--3 { --grid-min: 15rem; }
.grid--4 { --grid-min: 11rem; }
.divider { height: 1px; border: 0; margin: 0; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); }

/* ---------- Botones ---------- */
.btn {
  --btn-bg: transparent; --btn-fg: var(--ivory); --btn-bd: var(--line-strong);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 48px; padding: 0.75rem 1.6rem; max-width: 100%; overflow: hidden;
  border: 1px solid var(--btn-bd); border-radius: var(--radius); background: var(--btn-bg); color: var(--btn-fg);
  font-size: var(--fs-sm); font-weight: 500; letter-spacing: 0.06em; line-height: 1.2; text-align: center; text-decoration: none;
  transition: background-color var(--dur-quick) var(--ease), border-color var(--dur-quick) var(--ease),
    color var(--dur-quick) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur-quick) var(--ease), background-position var(--dur-slow) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
/* Brillo según la inclinación del móvil (core.js, función tilt()): un reflejo que se mueve con el giroscopio,
   como si el sol lo iluminara según el ángulo. html.tilt-on lo activa el propio JS solo cuando hay sensor de
   verdad con permiso concedido; si no, cada elemento se queda con su aspecto fijo de siempre (::before nunca
   se ve). TODO lo dorado del sitio lo lleva: botones (dorados, teal y los de borde), el logo, las insignias
   de categoría, «Giro 360°»/«Volver a las fotos», el flotante de WhatsApp y los marcos de las fotos
   (.galeria__visor, .giro__visor) — una sola regla para que no se quede ninguno atrás. */
.btn, .brand, .wa-float, .badge, .galeria__giro, .giro__cerrar, .galeria__visor, .giro__visor { position: relative; overflow: hidden; }
.btn::before, .brand::before, .wa-float::before, .badge::before, .galeria__giro::before, .giro__cerrar::before,
.galeria__visor::before, .giro__visor::before {
  /* z-index negativo A PROPÓSITO: pinta encima del fondo pero DEBAJO del texto/icono/foto (el texto suelto no
     tiene elemento propio que subir con z-index; así nunca se lava el contraste ni se tapa el frasco).
     screen (no overlay): siempre aclara, se nota igual sobre un fondo oscuro que sobre el dorado. */
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; opacity: 0;
  background-image: radial-gradient(circle, rgba(255, 252, 238, 0.65), rgba(245, 224, 170, 0.22) 42%, transparent 70%);
  /* Ni muy ancho ni muy alto: así se ve que se mueve también de arriba a abajo, no solo de lado a lado. */
  background-size: 55% 75%; background-repeat: no-repeat;
  background-position: var(--glint-x, 50%) var(--glint-y, 50%);
  transition: opacity var(--dur) var(--ease);
  mix-blend-mode: screen;
}
html.tilt-on .btn::before, html.tilt-on .brand::before, html.tilt-on .wa-float::before, html.tilt-on .badge::before,
html.tilt-on .galeria__giro::before, html.tilt-on .giro__cerrar::before,
html.tilt-on .galeria__visor::before, html.tilt-on .giro__visor::before { opacity: 0.9; }
@media (prefers-reduced-motion: reduce) {
  .btn::before, .brand::before, .wa-float::before, .badge::before, .galeria__giro::before, .giro__cerrar::before,
  .galeria__visor::before, .giro__visor::before { display: none; }
}
.btn:hover { color: var(--btn-fg); }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn--gold {
  --btn-fg: var(--on-gold); --btn-bd: transparent;
  background: var(--gold-gradient-btn); background-size: 220% 100%; background-position: 0% 50%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), var(--shadow-sm);
}
.btn--gold:hover { background-position: 100% 50%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), var(--glow-gold); }
.btn--ghost { --btn-fg: var(--gold-100); --btn-bd: var(--gold-500); }
.btn--ghost:hover { --btn-bd: var(--gold-200); background: rgba(213, 187, 121, 0.08); }
.btn--teal { --btn-bg: var(--teal); --btn-fg: var(--ivory); --btn-bd: var(--teal-light); }
.btn--teal:hover { --btn-bg: var(--teal-light); }
.btn--block { width: 100%; }
.btn--sm { min-height: 40px; padding: 0.5rem 1rem; }

/* ---------- Formularios ---------- */
.field { display: grid; gap: var(--sp-2); min-width: 0; }
.field > label, .label { font-size: var(--fs-sm); font-weight: 500; color: var(--ivory); }
.field__hint { font-size: var(--fs-xs); color: var(--muted); }
.field__error { font-size: var(--fs-sm); color: var(--granate-text); }
.input, .select, .textarea {
  width: 100%; min-height: 48px; padding: 0.75rem 0.9rem;
  background: var(--bg-elev); color: var(--ivory);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  transition: border-color var(--dur-quick) var(--ease), box-shadow var(--dur-quick) var(--ease);
}
.textarea { min-height: 7.5rem; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: #8f887c; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--gold-500); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: none; border-color: var(--gold-200); box-shadow: var(--focus-ring); }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--granate-text); }
.select { appearance: none; padding-right: 2.5rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold-300) 50%), linear-gradient(135deg, var(--gold-300) 50%, transparent 50%);
  background-position: calc(100% - 1.2rem) 55%, calc(100% - 0.85rem) 55%; background-size: 0.35rem 0.35rem; background-repeat: no-repeat; }
.select option, .select optgroup { background: var(--bg-elev); color: var(--ivory); }
.check { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-sm); }
.check input { width: 1.25rem; height: 1.25rem; margin: 0.15rem 0 0; accent-color: var(--gold-300); flex: none; }

/* ---------- Tarjetas e insignias ---------- */
.card {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: linear-gradient(180deg, var(--bg-elev), var(--bg) 140%);
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease);
}
.card__media { aspect-ratio: 4 / 5; background: radial-gradient(120% 80% at 50% 100%, rgba(213, 187, 121, 0.16), transparent 60%), var(--bg-elev-2); display: grid; place-items: center; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { display: grid; gap: var(--sp-2); padding: var(--sp-4) var(--sp-4) var(--sp-5); }
.card__title { font-size: var(--fs-lg); font-weight: 400; line-height: 1.3; }
.card__title a { color: var(--ivory); text-decoration: none; }
.card__title a::after { content: ''; position: absolute; inset: 0; }
.card__meta { font-size: var(--fs-sm); color: var(--muted); }
.card__price { font-size: var(--fs-lg); font-weight: 500; color: var(--gold-200); font-variant-numeric: tabular-nums; }
.card__badges { position: absolute; top: var(--sp-3); left: var(--sp-3); display: flex; gap: var(--sp-2); flex-wrap: wrap; z-index: 1; }
.card:hover, .card:focus-within { border-color: var(--line-strong); box-shadow: var(--shadow); }
@media (hover: hover) { .card:hover { transform: translateY(-3px); } }
.card--agotado .card__media { filter: grayscale(0.6) brightness(0.7); }
.card--agotado .card__price { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(185, 177, 163, 0.6); }

.badge {
  display: inline-flex; align-items: center; gap: 0.35em; min-height: 1.6rem; padding: 0.15rem 0.6rem;
  border: 1px solid var(--gold-500); border-radius: var(--radius-pill);
  background: rgba(11, 11, 12, 0.72); color: var(--gold-100);
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.04em; line-height: 1.2; white-space: nowrap;
}
.badge--teal { border-color: var(--teal-light); background: var(--teal); color: var(--ivory); }
.badge--agotado { border-color: var(--granate); background: var(--granate); color: var(--ivory); }
/* Tarjeta de producto (templates/partials/product-card.php): portada, catálogo, ficha y «Encuentra». */
.product-card__media { overflow: hidden; }
.product-card__media picture { display: block; width: 100%; height: 100%; }
.product-card__media img { transition: transform 900ms var(--ease-out); }
.product-card:hover .product-card__media img, .product-card:active .product-card__media img, .product-card:focus-within .product-card__media img { transform: scale(1.06); }
.product-card__body { padding: var(--sp-3) var(--sp-3) var(--sp-4); gap: var(--sp-1); }
.product-card__title { font-size: var(--fs-sm); font-weight: 500; letter-spacing: 0.06em; line-height: 1.35; }
.product-card__title a:focus-visible { outline: none; }
.product-card:focus-within { box-shadow: var(--focus-ring); }
.product-card__price { font-size: var(--fs-base); }
.card--agotado .product-card__price { text-decoration: none; }
.card--agotado .product-card__amount { text-decoration: line-through; text-decoration-color: rgba(185, 177, 163, 0.6); }
.product-card__from { font-size: var(--fs-xs); font-weight: 400; color: var(--muted); letter-spacing: 0.02em; }
@media (min-width: 48rem) {
  .product-card__body { padding: var(--sp-4) var(--sp-4) var(--sp-5); gap: var(--sp-2); }
  .product-card__title { font-size: var(--fs-base); }
  .product-card__price { font-size: var(--fs-lg); }
}
.product-card__nofoto { display: grid; place-items: center; width: 100%; height: 100%; }
.product-card__nofoto-sol { width: 46%; height: auto; opacity: 0.55; }
.alert { padding: var(--sp-4); border-radius: var(--radius); border: 1px solid var(--line-strong); background: var(--bg-elev); }
.alert--error { border-color: var(--granate); background: rgba(122, 31, 43, 0.22); color: var(--ivory); }

/* ---------- Logo y rayos ---------- */
.logo { overflow: visible; }
.logo-sol > .rayo:nth-child(1) { --i: 0; --o: 11; } .logo-sol > .rayo:nth-child(2) { --i: 1; --o: 10; }
.logo-sol > .rayo:nth-child(3) { --i: 2; --o: 9; } .logo-sol > .rayo:nth-child(4) { --i: 3; --o: 8; }
.logo-sol > .rayo:nth-child(5) { --i: 4; --o: 7; } .logo-sol > .rayo:nth-child(6) { --i: 5; --o: 6; }
.logo-sol > .rayo:nth-child(7) { --i: 6; --o: 5; } .logo-sol > .rayo:nth-child(8) { --i: 7; --o: 4; }
.logo-sol > .rayo:nth-child(9) { --i: 8; --o: 3; } .logo-sol > .rayo:nth-child(10) { --i: 9; --o: 2; }
.logo-sol > .rayo:nth-child(11) { --i: 10; --o: 1; } .logo-sol > .rayo:nth-child(12) { --i: 11; --o: 0; }
.logo-sol > .rayo:nth-child(13) { --i: 12; --o: 1; } .logo-sol > .rayo:nth-child(14) { --i: 13; --o: 2; }
.logo-sol > .rayo:nth-child(15) { --i: 14; --o: 3; } .logo-sol > .rayo:nth-child(16) { --i: 15; --o: 4; }
.logo-sol > .rayo:nth-child(17) { --i: 16; --o: 5; } .logo-sol > .rayo:nth-child(18) { --i: 17; --o: 6; }
.logo-sol > .rayo:nth-child(19) { --i: 18; --o: 7; } .logo-sol > .rayo:nth-child(20) { --i: 19; --o: 8; }
.logo-sol > .rayo:nth-child(21) { --i: 20; --o: 9; } .logo-sol > .rayo:nth-child(22) { --i: 21; --o: 10; }
.logo-sol > .rayo:nth-child(23) { --i: 22; --o: 11; }

/* Respiración: brillo suave que recorre los rayos de izquierda a derecha (solo opacidad, barato). */
.js .logo--respira .rayo { animation: rayo-respira 6.5s var(--ease) infinite; animation-delay: calc(var(--i) * -0.28s); }
@keyframes rayo-respira { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }

/* ---------- Intro: el sol sale (una vez por sesión, ≤ 1,2 s, nunca bloquea: pointer-events none) ---------- */
.intro { display: none; }
.intro-on .intro {
  position: fixed; inset: 0; z-index: var(--z-intro); display: grid; place-items: center;
  background: var(--bg); pointer-events: none;
  animation: intro-salida 300ms var(--ease-in) 900ms forwards;
}
.intro__sol { width: min(62vw, 22rem); height: auto; }
.intro-on .intro .rayo { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: rayo-dibujo 420ms var(--ease-out) forwards; animation-delay: calc(80ms + var(--o) * 36ms); }
.intro-on .intro .horizonte { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: rayo-dibujo 520ms var(--ease-out) forwards; }
.intro-on .intro .sol-disco { transform-box: fill-box; transform-origin: 50% 100%; animation: disco-sube 520ms var(--ease-out) both; }
@keyframes rayo-dibujo { to { stroke-dashoffset: 0; } }
@keyframes disco-sube { from { transform: translateY(40%) scaleY(0.2); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes intro-salida { to { opacity: 0; visibility: hidden; } }

/* ---------- Cabecera ---------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(11, 11, 12, 0.82); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top);
}
.site-header__inner { display: flex; align-items: center; gap: var(--sp-4); min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 0.7rem; min-width: 0; text-decoration: none; color: var(--gold-200); margin-right: auto; padding-block: var(--sp-2); }
.brand__sol { width: 3.1rem; height: auto; flex: none; }
.brand__word {
  font-size: 0.95rem; font-weight: 400; letter-spacing: var(--tracking-logo); margin-right: calc(-1 * var(--tracking-logo));
  background: var(--gold-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--gold-200);
  white-space: nowrap;
}
.nav-main { display: none; }
.nav-main ul { display: flex; gap: clamp(1rem, 2vw, 2rem); }
.nav-main a, .drawer__nav a, .site-footer a { color: var(--ivory); text-decoration: none; }
.nav-main a { position: relative; display: inline-block; padding: 0.6rem 0.1rem; font-size: var(--fs-sm); font-weight: 400; letter-spacing: 0.06em; }
.nav-main a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0.35rem; height: 1px; background: var(--gold-gradient);
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease-out);
}
.nav-main a:hover, .nav-main a[aria-current="page"] { color: var(--gold-100); }
.nav-main a:hover::after, .nav-main a[aria-current="page"]::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
.cart-link, .menu-toggle, .drawer__close {
  position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  color: var(--ivory); background: transparent; border: 1px solid transparent; border-radius: var(--radius-pill);
  transition: color var(--dur-quick) var(--ease), border-color var(--dur-quick) var(--ease);
}
.cart-link:hover, .menu-toggle:hover, .drawer__close:hover { color: var(--gold-100); border-color: var(--line-strong); }
.icon { width: 24px; height: 24px; }
.cart-count {
  position: absolute; top: 2px; right: 0; min-width: 1.15rem; height: 1.15rem; padding: 0 0.3rem;
  display: grid; place-items: center; border-radius: var(--radius-pill);
  background: var(--gold-200); color: var(--on-gold); font-size: 0.6875rem; font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cart-count[data-empty] { display: none; }
/* Microefecto al añadir a la cesta (product.js añade .is-bump; sin movimiento reducido) */
@media (prefers-reduced-motion: no-preference) {
  .cart-count.is-bump { animation: cesta-late 620ms var(--ease-out); }
  .cart-link.is-bump .icon { animation: cesta-icono 620ms var(--ease-out); }
}
@keyframes cesta-late { 0% { transform: scale(1); } 30% { transform: scale(1.45); background: var(--gold-100); } 100% { transform: scale(1); } }
@keyframes cesta-icono { 0%, 100% { transform: none; } 30% { transform: translateY(-2px) rotate(-6deg); } 60% { transform: translateY(0) rotate(4deg); } }
.menu-toggle { display: none; gap: 6px; align-content: center; }
.menu-toggle__bar { display: block; width: 20px; height: 1.5px; background: currentColor; border-radius: 2px; }
.menu-toggle__bar:last-child { width: 14px; justify-self: end; margin-right: 12px; }
.menu-fallback { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.4rem; color: var(--ivory); font-size: var(--fs-sm); }
.js .menu-toggle { display: inline-grid; }
.js .menu-fallback, .no-dialog .menu-toggle { display: none; }
.no-dialog .menu-fallback { display: inline-flex; }
@media (min-width: 60rem) {
  .nav-main { display: block; }
  .js .menu-toggle, .menu-fallback, .no-dialog .menu-fallback { display: none; }
  .brand { margin-right: 0; }
  .nav-main { margin-inline: auto; }
}

/* ---------- Cajón del menú móvil (dialog modal: foco atrapado y Esc nativos) ---------- */
.drawer {
  position: fixed; inset: 0 0 0 auto; margin: 0; width: min(22rem, 100vw); max-width: 100vw;
  height: 100vh; height: 100dvh; max-height: 100dvh; padding: 0; overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg-elev); color: var(--ivory); border: 0; border-left: 1px solid var(--line-strong);
  padding: calc(env(safe-area-inset-top) + var(--sp-3)) max(var(--sp-5), env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + var(--sp-5)) var(--sp-5);
}
.drawer[open] { display: flex; flex-direction: column; gap: var(--sp-5); animation: drawer-entra var(--dur) var(--ease-out); }
.drawer::backdrop { background: rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.drawer__sol { width: 3.4rem; height: auto; }
.drawer__nav { display: grid; gap: 0; }
.drawer__nav a {
  display: flex; align-items: center; min-height: 3.25rem; border-bottom: 1px solid var(--line);
  font-size: var(--fs-xl); font-weight: 300; letter-spacing: 0.02em;
}
.drawer__nav a:hover, .drawer__nav a[aria-current="page"] { color: var(--gold-100); }
.drawer__foot { margin-top: auto; font-size: var(--fs-sm); }
@media (max-height: 420px) {
  /* Apaisado: todo el menú cabe sin desplazar (740×360). */
  .drawer__nav a { min-height: 2.35rem; font-size: var(--fs-base); }
  .drawer[open] { gap: var(--sp-2); }
  .drawer__sol { width: 2.6rem; }
}
@keyframes drawer-entra { from { transform: translateX(100%); } to { transform: none; } }

/* ---------- Botón flotante de WhatsApp ---------- */
.wa-float {
  position: fixed; z-index: var(--z-float);
  right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom));
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #3bda70, #25d366 55%, #128c7e);
  color: var(--ivory); box-shadow: 0 0 0 1px var(--gold-500), var(--shadow);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease);
}
.wa-float svg { width: 28px; height: 28px; }
.wa-float:hover { color: var(--ivory); transform: translateY(-2px); box-shadow: 0 0 0 1px var(--gold-200), var(--glow-gold); }
.wa-float:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------- Carrito flotante (cart-float.js): se puede arrastrar por la pantalla o cerrar sin perder la cesta. */
.cart-float { position: fixed; z-index: var(--z-float); left: max(1rem, env(safe-area-inset-left)); bottom: max(5.5rem, env(safe-area-inset-bottom)); }
.cart-float[hidden] { display: none; }
.cart-float__bubble {
  position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--gold-gradient-btn); color: var(--on-gold); border: 0; cursor: grab;
  box-shadow: 0 0 0 1px var(--gold-500), var(--shadow); touch-action: none;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease);
}
.cart-float__bubble:active { cursor: grabbing; }
.cart-float__bubble:hover { box-shadow: 0 0 0 1px var(--gold-200), var(--glow-gold); }
.cart-float__bubble:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.cart-float__bubble .icon { width: 26px; height: 26px; }
.cart-float__count {
  position: absolute; top: -2px; right: -2px; min-width: 1.25rem; height: 1.25rem; padding: 0 0.3rem;
  display: grid; place-items: center; border-radius: var(--radius-pill);
  background: var(--granate, #7a2b2b); color: var(--ivory); font-size: 0.7rem; font-weight: 700; line-height: 1;
  box-shadow: 0 0 0 2px var(--bg); font-variant-numeric: tabular-nums;
}
.cart-float__panel {
  position: absolute; bottom: calc(100% + 0.75rem); left: 0; width: min(20rem, calc(100vw - 2rem));
  max-height: min(26rem, 70vh); display: flex; flex-direction: column;
  background: var(--bg-elev); border: 1px solid var(--gold-500); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.cart-float__panel[hidden] { display: none; }
.cart-float__panel--below { bottom: auto; top: calc(100% + 0.75rem); }
.cart-float__panel--right { left: auto; right: 0; }
.cart-float__head { display: flex; align-items: center; justify-content: space-between; padding: 0.8rem 0.9rem; border-bottom: 1px solid var(--line); flex: none; }
.cart-float__head strong { color: var(--gold-100); }
.cart-float__close { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--muted); border: 0; background: transparent; }
.cart-float__close:hover { color: var(--gold-100); background: rgba(213, 187, 121, 0.12); }
.cart-float__close .icon { width: 18px; height: 18px; }
.cart-float__lines { list-style: none; margin: 0; padding: 0.4rem 0.9rem; overflow-y: auto; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.cart-float__line { display: flex; gap: 0.6rem; align-items: center; min-width: 0; }
.cart-float__line img { width: 2.6rem; height: 2.6rem; border-radius: 8px; object-fit: cover; flex: none; background: var(--bg-elev-2); }
.cart-float__line-info { min-width: 0; flex: 1 1 auto; }
.cart-float__line-name { display: block; font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-float__line-meta { display: block; font-size: 0.75rem; color: var(--muted); }
.cart-float__line-price { font-size: 0.85rem; font-variant-numeric: tabular-nums; flex: none; }
.cart-float__empty { padding: 1rem 0.9rem; text-align: center; }
.cart-float__foot { flex: none; padding: 0.8rem 0.9rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 0.6rem; }
.cart-float__total { display: flex; justify-content: space-between; align-items: baseline; margin: 0; }
.cart-float__total strong { color: var(--gold-100); font-size: 1.05rem; }
@media (prefers-reduced-motion: no-preference) { .cart-float__panel { animation: cart-float-pop 180ms var(--ease-out); } }
@keyframes cart-float-pop { from { opacity: 0; transform: translateY(0.4rem); } to { opacity: 1; transform: none; } }

/* ---------- Pie ---------- */
.site-footer { margin-top: var(--section-y); border-top: 1px solid var(--line); background: var(--bg); padding-block: var(--sp-7) calc(var(--sp-8) + env(safe-area-inset-bottom)); }
.site-footer__inner { display: grid; gap: var(--sp-6); }
.site-footer__logo { width: min(11rem, 60%); height: auto; }
.site-footer__address { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--muted); }
.site-footer__nav { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
.site-footer__nav ul { display: grid; gap: var(--sp-1); }
.site-footer__nav a { display: inline-flex; align-items: center; min-height: 2.25rem; font-size: var(--fs-sm); color: var(--muted); }
.site-footer__nav a:hover { color: var(--gold-100); }
@media (min-width: 48rem) { .site-footer__inner { grid-template-columns: 1fr 1.4fr; align-items: start; } }

main:focus { outline: none; }

/* ---------- Entrada al hacer scroll (solo con JS y sin movimiento reducido) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
  .js [data-reveal]:not(.is-revealed) { opacity: 0; transform: translateY(1.25rem); }
}

/* ---------- Movimiento reducido: nada se anima ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important; transition: none !important; scroll-behavior: auto !important;
  }
  .intro { display: none !important; }
}