/* ============================================================
   BODEGAS PINTO CABALLERO — Sistema de Diseño Principal
   Paleta: tierra, atardecer y roble de La Serena (Esparragosa,
   Badajoz) — terracota + oliva + oro, distinta de otras bodegas
   de la comarca que ya trabajamos.
   ============================================================ */

/* ---- CUSTOM PROPERTIES ---- */
:root {
  /* Paleta cromática */
  --color-cream-50:  #FBF3E6;
  --color-cream-100: #F1E1C6;
  --color-ink-900:   #221912;
  --color-ink-700:   #4A392C;

  --color-clay-950:  #33130A;
  --color-clay-900:  #55200F;
  --color-clay-800:  #7A2E18;
  --color-clay-700:  #9C3D23;
  --color-clay-600:  #BE5230;

  --color-gold-600:  #8F6A24;
  --color-gold-500:  #C89B3C;
  --color-gold-400:  #DFBD70;

  --color-olive-800: #3E4227;
  --color-olive-700: #565A34;

  /* Ciclo del día — Amanecer/Atardecer son dos vinos reales del
     catálogo; todo el sitio narra un día en la bodega con esta
     misma progresión cromática (alba → mediodía → ocaso → noche). */
  --color-dawn-300: #F8D2AC;
  --color-dawn-400: #F0A876;
  --color-dawn-600: #C97A4A;
  --color-night-950: #170F0C;

  /* Tipografía */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Outfit', system-ui, -apple-system, sans-serif;
  --font-size-sm:   0.875rem;
  --font-size-base: 1rem;
  --font-size-lg:   1.125rem;
  --font-size-xl:   1.375rem;
  --font-size-2xl:  1.75rem;
  --font-size-3xl:  2.25rem;
  --font-size-hero: clamp(2.5rem, 6vw, 4rem);

  /* Espaciado */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-12: 6rem;
  --section-padding: clamp(3.5rem, 7vw, 6rem);

  /* Layout */
  --container-max: 1152px;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-full: 999px;

  /* Transiciones */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;

  /* Nav */
  --nav-height: 76px;
}

/* ---- RESET ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  color: var(--color-ink-900);
  background: var(--color-cream-50);
  line-height: 1.55;
  min-height: 100%;
}
img, picture, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.15; }

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

/* ---- LAYOUT ---- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

.section { padding-block: var(--section-padding); }
.section--tint { background: var(--color-cream-100); }
.section--dark { background: var(--color-ink-900); color: var(--color-cream-50); }
.section--dusk {
  background: linear-gradient(160deg, var(--color-clay-900) 0%, var(--color-clay-700) 100%);
  color: var(--color-cream-50);
}
.section--night {
  background: linear-gradient(180deg, var(--color-ink-900) 0%, var(--color-night-950) 100%);
  color: var(--color-cream-50);
}

.eyebrow {
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-clay-700);
  margin-bottom: var(--space-2);
}
.section--dark .eyebrow { color: var(--color-gold-400); }

.section-heading { max-width: 42rem; }
.section-heading--center { margin-inline: auto; text-align: center; }
.section-heading h1, .section-heading h2 { font-size: var(--font-size-3xl); }
.section-heading p {
  margin-top: var(--space-2);
  color: var(--color-ink-700);
  font-size: var(--font-size-lg);
}
.section--dark .section-heading p { color: rgba(251, 243, 230, 0.82); }

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-2);
  z-index: 200;
  background: var(--color-clay-700);
  color: var(--color-cream-50);
  padding: 0.75rem 1.25rem;
  border-radius: 0.5rem;
  font-weight: 600;
  transition: top var(--transition-base);
}
.skip-link:focus { top: var(--space-2); }

:focus-visible {
  outline: 2px solid var(--color-gold-500);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}