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

* { margin: 0; padding: 0; }

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

body {
  font-family: var(--font-body);
  background: var(--black-deep);
  color: var(--white-warm);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');

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

a { color: inherit; text-decoration: none; }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

input, textarea, select { font-family: inherit; font-size: 1rem; }

h1, h2, h3 { line-height: 1.15; font-weight: 600; }

::selection { background: var(--brand-red); color: #fff; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--black-2); }
::-webkit-scrollbar-thumb { background: var(--gray-line); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #3a3a3a; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: var(--radius-pill);
  font-weight: 600; font-size: 0.95rem; letter-spacing: 0.01em;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  white-space: nowrap; user-select: none;
}
.btn:active { transform: scale(0.97); }

.btn-primary { background: var(--grad-red); color: #fff; box-shadow: var(--shadow-red); }
.btn-primary:hover { box-shadow: 0 10px 30px rgba(255, 31, 45, 0.45); transform: translateY(-1px); }

.btn-outline { border: 1px solid var(--border-strong); color: var(--white-warm); background: rgba(255,255,255,0.02); }
.btn-outline:hover { border-color: var(--gold); color: var(--gold); }

.btn-ghost { color: var(--white-dim); }
.btn-ghost:hover { color: var(--white-warm); background: rgba(255,255,255,0.04); }

.btn-hero {
  background: rgba(255,255,255,0.06); border: 1px solid var(--border-strong);
  color: var(--white-warm); backdrop-filter: blur(8px);
}
.btn-hero:hover { background: var(--grad-red); border-color: transparent; box-shadow: var(--shadow-red); }

.btn-block { width: 100%; }
.btn-sm { padding: 8px 14px; font-size: 0.85rem; }

.spinner {
  width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Toasts ---------- */
.toast-container {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 2000; display: flex; flex-direction: column; gap: 10px; align-items: center;
  pointer-events: none; width: min(92vw, 420px);
}
.toast {
  pointer-events: auto; width: 100%;
  background: var(--surface-glass); backdrop-filter: blur(14px);
  border: 1px solid var(--border-strong); border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm); padding: 14px 18px; color: var(--white-warm);
  box-shadow: var(--shadow-md); font-size: 0.92rem; font-weight: 500;
  display: flex; align-items: center; gap: 10px;
  animation: toastIn var(--t-mid) var(--ease-out);
}
.toast.toast-success { border-left-color: #3ecf8e; }
.toast.toast-error { border-left-color: var(--red-intense); }
.toast.toast-out { animation: toastOut var(--t-mid) var(--ease) forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(20px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(20px) scale(0.96); } }

/* ---------- Flash ---------- */
.flash {
  padding: 12px 18px; border-radius: var(--radius-sm); margin-bottom: 14px;
  font-size: 0.92rem; display: flex; justify-content: space-between; align-items: center;
  border: 1px solid var(--border-subtle);
}
.flash-success { background: rgba(62, 207, 142, 0.12); border-color: rgba(62,207,142,0.3); color: #7ee5b5; }
.flash-danger { background: rgba(255, 31, 45, 0.12); border-color: rgba(255,31,45,0.3); color: #ff8a91; }
.flash-warning { background: rgba(199, 169, 107, 0.12); border-color: rgba(199,169,107,0.3); color: var(--gold); }
.flash-close { font-size: 1.3rem; line-height: 1; color: inherit; opacity: 0.6; }
.flash-close:hover { opacity: 1; }

/* ---------- Error pages ---------- */
.error-page { display: grid; place-items: center; min-height: 100vh; padding: 20px; }
.error-box { text-align: center; max-width: 420px; }
.error-code { font-family: var(--font-display); font-size: 5rem; color: var(--brand-red); display: block; }
.error-box h1 { font-size: 1.6rem; margin: 8px 0 12px; }
.error-box p { color: var(--white-dim); margin-bottom: 24px; }

/* ---------- Utilidades ---------- */
.muted { color: var(--white-dim); }
.small { font-size: 0.8rem; }
.center { text-align: center; }
.block { display: block; }
.inline { display: inline; }
[hidden] { display: none !important; }

/* Animación de aparición */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }