/* main.css — reset, variables de marca, tipografía y layout base */

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

:root {
  /* Paleta — inspirada en el paisaje real de la comarca (embalse, trigo, olivar) */
  --color-bg: #fbf7ef;
  --color-bg-muted: #f1ebdd;
  --color-card: #ffffff;
  --color-text: #1f2a3d;
  --color-text-muted: #5b6472;
  --color-border: #e4dcc8;

  --color-primary: #1e4e78;
  --color-primary-dark: #163a5c;
  --color-primary-contrast: #ffffff;

  --color-accent: #d9a441;
  --color-accent-contrast: #2b2005;

  --color-borde-hover-inicio: #1565c0;
  --color-borde-hover-fin: #cc0000;

  --font-heading: Georgia, "Times New Roman", serif;
  --font-body:
    system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius: 0.75rem;
  --shadow-card: 0 1px 2px rgba(31, 42, 61, 0.06), 0 1px 3px rgba(31, 42, 61, 0.08);
  --max-width: 72rem;
}

html {
  scroll-behavior: smooth;
}

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

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

h1,
h2,
h3 {
  font-family: var(--font-heading);
  line-height: 1.2;
  margin: 0 0 0.5rem;
}

h1 {
  font-size: clamp(2rem, 4vw, 2.75rem);
}

h2 {
  font-size: 1.5rem;
}

p {
  margin: 0 0 1rem;
}

a {
  color: var(--color-primary);
}

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

.contenedor {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 100;
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  padding: 0.6rem 1rem;
  border-radius: var(--radius);
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 1rem;
}

.seccion {
  padding-block: 3rem;
}

.seccion__intro {
  max-width: 40rem;
  color: var(--color-text-muted);
}

.pie-nota {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}