/* ============================================================================
   Drapery Life — Base (reset + primitivas)
   Depende de tokens.css. Componentes ricos (cards, carrusel, stepper, sticky price)
   llegan en la Fase 1 de UX. Aquí solo lo mínimo accesible y consistente.
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: var(--leading-tight);
  color: var(--color-primary);
  margin: 0 0 var(--space-sm);
}
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }

p { margin: 0 0 var(--space-md); }

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--color-primary); }

img { max-width: 100%; height: auto; display: block; }

/* Foco visible para navegación por teclado (accesibilidad WCAG 2.2 AA). */
:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* --- Utilidades ----------------------------------------------------------- */
.dl-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.dl-muted { color: var(--color-muted); }
.dl-surface { background: var(--color-surface); }

/* --- Botones (UX/UI §8.1) -------------------------------------------------- */
.dl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: var(--tap-min);
  padding: 0 var(--space-lg);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font: inherit;
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.dl-btn--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.dl-btn--primary:hover { background: var(--color-primary-hover); color: var(--color-on-primary); }

.dl-btn--secondary {
  background: var(--color-secondary);
  color: var(--color-primary);
}
.dl-btn--ghost {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-primary);
}
.dl-btn[disabled],
.dl-btn[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
}

/* --- Crédito de autoría (jsadsAI) ------------------------------------------ */
.dl-credit {
  border-top: 1px solid var(--color-border);
  padding: var(--space-lg) var(--space-md);
  margin-top: var(--space-2xl);
}
.dl-credit-inner {
  max-width: var(--container-max); margin-inline: auto;
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-md); flex-wrap: wrap; text-align: center;
}
.dl-credit-logo img { height: 34px; width: auto; display: block; opacity: .9; transition: opacity var(--transition-fast); }
.dl-credit-logo:hover img { opacity: 1; }
.dl-credit-text { font-size: var(--text-xs); color: var(--color-muted); margin: 0; line-height: 1.5; }
.dl-credit-text a { color: var(--color-accent); }
@media (max-width: 640px) { .dl-credit-inner { flex-direction: column; gap: var(--space-sm); } }

/* ============================================================================
 * Liquid Glass · Sitio público (tokens compartidos con el admin)
 * El fondo con gradientes radiales cálidos le da al backdrop-filter algo
 * que difuminar; sin esto el glass se ve gris apagado.
 * ========================================================================== */
:root {
  --glass-bg-light:   rgba(255, 253, 250, .62);
  --glass-bg-lighter: rgba(255, 253, 250, .78);
  --glass-bg-dark:    rgba(58, 51, 45, .88);
  --glass-border:     rgba(216, 208, 197, .55);
  --glass-border-hi:  rgba(255, 255, 255, .70);
  --glass-blur:       blur(22px) saturate(180%);
  --glass-blur-strong:blur(28px) saturate(180%);
  --glass-shadow:     0 8px 32px rgba(58, 51, 45, .08), inset 0 1px 0 rgba(255, 255, 255, .5);
  --glass-shadow-lg:  0 20px 48px rgba(58, 51, 45, .10), inset 0 1px 0 rgba(255, 255, 255, .5);
}

/* Fondo del sitio: gradientes radiales cálidos (dorado + café + primary) */
body.site,
body.cat,
body.cov,
body.ck {
  background:
    radial-gradient(1200px 800px at 8% -10%,   rgba(184, 155, 125, .12), transparent 60%),
    radial-gradient(1000px 700px at 100% 12%,  rgba(138, 111, 85, .08),  transparent 55%),
    radial-gradient(900px 700px at 60% 110%,   rgba(58, 51, 45, .04),    transparent 55%),
    var(--color-bg);
  background-attachment: fixed;
}

/* Botones premium — dl-btn ya existe; añadimos toque glass */
.dl-btn {
  transition: background 220ms ease-out, box-shadow 220ms ease-out, transform 220ms ease-out, color 220ms ease-out, border-color 220ms ease-out;
}
.dl-btn--primary {
  background: linear-gradient(180deg, var(--color-primary) 0%, #2a2520 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 4px 14px rgba(58, 51, 45, .18);
}
.dl-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 8px 22px rgba(58, 51, 45, .28);
}
.dl-btn--ghost {
  background: var(--glass-bg-lighter);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid var(--glass-border);
  color: var(--color-primary);
}
.dl-btn--ghost:hover {
  background: rgba(255, 255, 255, .90);
  border-color: rgba(184, 155, 125, .55);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(58, 51, 45, .08);
}

/* ============================================================================
 * Accesibilidad · Skip link + focus universal
 * ========================================================================== */

/* Skip to main content — WCAG 2.4.1. Solo visible al focar con teclado. */
.dl-skip-to-main {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 9999;
  padding: 12px 20px;
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(58, 51, 45, .30);
  transition: top 200ms ease-out;
}
.dl-skip-to-main:focus,
.dl-skip-to-main:focus-visible {
  top: 12px;
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

/* Focus visible universal — cualquier <button>, <a>, <input>, <select>, <textarea>. */
:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Elementos que ya tienen su propio focus-ring — evitar duplicación */
.dl-btn:focus-visible,
.site-link:focus-visible,
.cat-tab:focus-visible {
  outline-offset: 4px;
}

/* main con tabindex="-1" no debería mostrar outline al focar programáticamente */
main:focus,
[id="main"]:focus,
[id="main"]:focus-visible {
  outline: none;
}

/* Respeta prefers-reduced-motion en botones/animaciones globales */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .dl-btn:hover, .dl-btn--ghost:hover, .dl-btn--primary:hover { transform: none; }
}

/* Imagen sin dimensiones explícitas — hint para reducir CLS */
img { aspect-ratio: attr(width) / attr(height); }