/* ============================================================
   RESET.CSS — Variables globales + normalización
   ============================================================ */

:root {
  /* Colores */
  --color-bg:           #0d0c0a;
  --color-bg-secondary: #171411;
  --color-bg-card:      #1a1712;
  --color-text:         #f3eadc;
  --color-text-muted:   #d2c5b5;
  --color-text-faint:   #8a7d6e;
  --color-accent:       #b89b72;
  --color-accent-light: #d8b98d;
  --color-border:       rgba(255, 255, 255, 0.07);
  --color-border-hover: rgba(184, 155, 114, 0.3);
  --color-glass:        rgba(23, 20, 17, 0.72);

  /* Tipografía */
  --font-display: 'Cormorant Garamond', 'Palatino Linotype', Georgia, serif;
  --font-body:    -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'Fira Code', monospace;

  /* Escala tipográfica (fluid) */
  --text-xs:   clamp(0.65rem,  1vw,   0.75rem);
  --text-sm:   clamp(0.8rem,   1.2vw, 0.9rem);
  --text-base: clamp(0.95rem,  1.4vw, 1.05rem);
  --text-md:   clamp(1.05rem,  1.6vw, 1.2rem);
  --text-lg:   clamp(1.2rem,   2vw,   1.5rem);
  --text-xl:   clamp(1.6rem,   3vw,   2.2rem);
  --text-2xl:  clamp(2rem,     4vw,   3rem);
  --text-3xl:  clamp(2.8rem,   6vw,   4.5rem);
  --text-4xl:  clamp(3.5rem,   8vw,   6rem);

  /* Espaciado */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Radios */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 12px;

  /* Sombras */
  --shadow-sm:  0 1px 4px rgba(0, 0, 0, 0.35);
  --shadow-md:  0 4px 20px rgba(0, 0, 0, 0.45);
  --shadow-lg:  0 12px 48px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 40px rgba(184, 155, 114, 0.08);

  /* Transiciones */
  --ease-gentle: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:   180ms;
  --duration-normal: 320ms;
  --duration-slow:   560ms;

  /* Layout */
  --max-width:      1120px;
  --max-width-text: 680px;
  --nav-height:     72px;
}

/* Normalización */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.75;
  min-height: 100vh;
  overflow-x: hidden;
}

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

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

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

ul, ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

p {
  color: var(--color-text-muted);
}

strong {
  color: var(--color-text);
  font-weight: 500;
}

::selection {
  background: rgba(184, 155, 114, 0.22);
  color: var(--color-text);
}

:focus-visible {
  outline: 1px solid var(--color-accent);
  outline-offset: 3px;
}