/* ==========================================================================
   base.css — variables, reset y tipografía
   Reglas de color: ver CLAUDE.md, sección 5. Los colores solo se escriben
   aquí; el resto de archivos usa siempre las variables.
   ========================================================================== */

/* --- Variables ----------------------------------------------------------- */

:root {
  /* Paleta (cerrada: no añadir colores sin aprobación) */
  --fondo:        #F7F3EC;  /* crema cálido — fondo principal */
  --texto:        #2E3A52;  /* azul tinta — todo el texto (10.30:1 sobre --fondo) */
  --oro:          #B8933F;  /* bordes, filetes, adornos, fondo de botones. NUNCA texto sobre crema */
  --oro-oscuro:   #7A5E1E;  /* único dorado como texto sobre --fondo (5.51:1) */
  --lila:         #C9A8D4;  /* acento, solo detalles */
  --salmon:       #E8A48C;  /* acento, solo detalles */
  --oliva:        #7B9A6B;  /* acento, solo detalles */
  --fondo-oscuro: #1F2838;  /* degradado del Inicio y texto de botones dorados */
  --blanco:       #FFFFFF;  /* texto sobre --fondo-oscuro (14.80:1) */

  /* Tarjeta sobre las pinturas: crema al 92 % (texto ≥ 8.79:1 en la peor zona de cualquier fondo) */
  --tarjeta: color-mix(in srgb, var(--fondo) 92%, transparent);

  /* Tipografía */
  --fuente-titulos: "Cormorant Garamond", "Georgia", "Times New Roman", serif;
  --fuente-texto:   "Lato", "Helvetica Neue", "Arial", sans-serif;

  /* Tamaños fluidos: crecen con el ancho de pantalla entre un mínimo y un máximo */
  --tamano-texto:    1.0625rem;                          /* 17 px */
  --tamano-pequeno:  0.875rem;                           /* 14 px */
  --tamano-h3:       clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --tamano-h2:       clamp(2rem, 1.6rem + 2vw, 3rem);
  --tamano-h1:       clamp(3rem, 2rem + 6vw, 6rem);

  --interlineado:         1.65;
  --interlineado-titulos: 1.15;

  /* Espaciado */
  --espacio-xs: 0.5rem;
  --espacio-s:  1rem;
  --espacio-m:  2rem;
  --espacio-l:  4rem;
  --espacio-xl: 6rem;

  --ancho-lectura: 65ch;  /* ancho máximo cómodo para párrafos */
}

/* --- Reset --------------------------------------------------------------- */

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

* {
  margin: 0;
}

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

body {
  min-height: 100vh;
  background-color: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente-texto);
  font-size: var(--tamano-texto);
  line-height: var(--interlineado);
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
svg,
iframe {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

/* --- Tipografía ---------------------------------------------------------- */

h1,
h2,
h3 {
  font-family: var(--fuente-titulos);
  font-weight: 500;
  line-height: var(--interlineado-titulos);
  text-wrap: balance;
}

h1 {
  font-size: var(--tamano-h1);
}

h2 {
  font-size: var(--tamano-h2);
}

h3 {
  font-size: var(--tamano-h3);
  font-weight: 600;
}

p {
  max-width: var(--ancho-lectura);
  text-wrap: pretty;
}

small {
  font-size: var(--tamano-pequeno);
}

/* Enlaces sobre crema: --oro-oscuro (el --oro no llega al contraste mínimo) */
a {
  color: var(--oro-oscuro);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

/* Foco visible para quien navega con teclado */
:focus-visible {
  outline: 2px solid var(--oro-oscuro);
  outline-offset: 3px;
}

::selection {
  background-color: var(--fondo-oscuro);
  color: var(--blanco);
}

/* Oculto a la vista pero legible por lectores de pantalla */
.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Movimiento reducido ------------------------------------------------- */
/* Si la persona pidió menos animación en su dispositivo, se desactiva todo. */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}