/* ==========================================================
   JHS Joyería — tokens, base tipográfica, botones y utilidades
   Paleta tomada del logo. Contraste verificado (WCAG AA):
   - crema/oro/oro-claro sobre vino: ≥ 7:1
   - tinta y vino sobre crema: ≥ 12:1
   - Nunca oro sobre crema para texto (no cumple AA): usar vino.
   ========================================================== */
:root {
  --vino-profundo: #2A0910;
  --vino: #4D101D;
  --vino-claro: #6B1A2B;
  --oro: #D9B15C;
  --oro-claro: #F1D9A0;
  --oro-oscuro: #A8823F;
  --crema: #F7F2E8;
  --tinta: #1A0B0E;
  --disponible: #3E8E5E;
  --agotado: #C7773A;
  --error: #E07A7A;
  --error-claro: #9E2A2A;

  --fondo-vino: radial-gradient(ellipse at 50% 42%, #521220 0%, #4D101D 38%, #2A0910 100%);
  --oro-metalico: linear-gradient(135deg, #F1D9A0, #D9B15C 45%, #A8823F);
  --linea-oro: 1px solid rgba(217, 177, 92, .35);

  --f-titulo: "Cormorant Garamond", Georgia, serif;
  --f-etiqueta: "Josefin Sans", "Segoe UI", sans-serif;
  --f-texto: "Montserrat", "Segoe UI", Arial, sans-serif;

  --radio: 14px;
  --radio-sm: 10px;
  --sombra: 0 24px 60px -20px rgba(10, 2, 4, .6);
  --sombra-suave: 0 10px 30px -12px rgba(42, 9, 16, .25);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --t: 320ms;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font: 400 1rem/1.65 var(--f-texto); color: var(--crema); background: var(--vino-profundo); -webkit-font-smoothing: antialiased; min-height: 100vh; }
img, svg { display: block; max-width: 100%; }
a { color: var(--oro-claro); text-underline-offset: 3px; }
a:hover { color: var(--oro); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--f-titulo); font-weight: 500; line-height: 1.15; }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--oro); color: var(--tinta); padding: .6rem 1rem; border-radius: var(--radio-sm); }
.skip-link:focus { top: 1rem; }

.etiqueta { font: 600 .72rem/1.2 var(--f-etiqueta); letter-spacing: .32em; text-transform: uppercase; color: var(--oro); }
.titulo-oro { background: var(--oro-metalico); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rombo::before { content: "◆"; color: var(--oro); font-size: .6em; margin-right: .6em; vertical-align: middle; }
.separador { display: flex; align-items: center; gap: .8rem; color: var(--oro); font-size: .55rem; }
.separador::before, .separador::after { content: ""; flex: 1; height: 1px; background: rgba(217, 177, 92, .45); }

/* ===== Botones ===== */
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 48px; padding: .9rem 1.8rem; border-radius: 2px; border: 1px solid transparent; font: 600 .78rem/1 var(--f-etiqueta); letter-spacing: .26em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), background-color var(--t), color var(--t), border-color var(--t); }
.btn-oro { background: var(--oro-metalico); color: var(--tinta); }
.btn-oro::after { content: ""; position: absolute; inset: 0 auto 0 -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent); transform: skewX(-20deg); transition: left 700ms var(--ease); }
.btn-oro:hover { color: var(--tinta); transform: translateY(-2px); box-shadow: 0 12px 28px -10px rgba(217, 177, 92, .7); }
.btn-oro:hover::after { left: 120%; }
.btn-borde { border-color: var(--oro); color: var(--oro-claro); background: transparent; }
.btn-borde:hover { background: rgba(217, 177, 92, .12); color: var(--oro-claro); }
.btn-vino { background: var(--vino); color: var(--oro-claro); }
.btn-vino:hover { background: var(--vino-claro); color: var(--oro-claro); }
.btn-texto { min-height: auto; padding: .3rem 0; border-radius: 0; background: none; color: var(--oro-claro); letter-spacing: .12em; }
.btn-bloque { width: 100%; }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: .55; pointer-events: none; }


/* ===== Utilidades ===== */
.centro { text-align: center; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.pila { display: grid; gap: 1rem; }


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

/* Lo oculto con el atributo hidden siempre queda oculto, aunque su clase defina otro display. */
[hidden] { display: none !important; }