:root {
  /* Colores de marca */
  --color-berenjena: #552858;
  --color-lavanda: #845D8F;
  --color-oliva: #7C7238;
  --color-pistacho: #CCBC6C;
  --color-melocoton: #F3995D;
  --color-niebla: #EAE3DD;
  /* Blanco puro — a petición expresa, solo para el texto de los
     botones con fondo berenjena (ver .btn--cita/--primary/--secondary
     hover, .condition-button hover, .contact-form .wpcf7-submit en
     style.css): en el resto de la web el texto claro sobre fondo
     oscuro usa --color-niebla/--color-niebla-clara (un blanco roto,
     más cálido, a juego con la marca), pero aquí se pidió blanco de
     verdad. Pasa WCAG AA de sobra sobre berenjena (más margen aún que
     niebla, que ya pasaba). */
  --color-blanco: #FFFFFF;

  /* Tintes al ~80% de los colores de marca, pensados como FONDO con
     texto berenjena encima (8.7–10.2:1, muy por encima del AA). Dan
     variedad de color por la web sin arriesgar contraste — nunca usar
     como color de TEXTO, solo de fondo. */
  --color-lavanda-tint: #E6DFE9;
  --color-pistacho-tint: #F5F2E2;
  --color-melocoton-tint: #FDEBDF;
  /* Mismo cálculo (~20% del color de marca mezclado con blanco) que
     los tres tintes de arriba, pero sin su propia variable hasta
     ahora — hace falta para el aviso de "enviado con éxito" del
     formulario de Contacto (ver .wpcf7-response-output en style.css):
     berenjena encima pasa AA de sobra (mismo criterio que los otros
     tintes, oliva es uno de los dos colores oscuros de la marca así
     que el margen es aún mayor). */
  --color-oliva-tint: #E5E3D7;

  /* Aclarado ~45% del melocotón (a medio camino entre el color de marca
     y --color-melocoton-tint): solo para el estampado de hojas de
     Conócenos, que se pinta sobre el melocotón SIN diluir (ver
     body.bg-tint-melocoton-fuerte en style.css) y con el tint al 80%
     de arriba quedaba casi blanco, demasiado apagado sobre ese fondo
     tan saturado. No pensado como fondo de texto, solo decorativo. */
  --color-melocoton-medio: #F8C7A6;

  /* Aclarado ~25% del pistacho hacia blanco (bastante menos que el
     tint al ~80% de arriba, pensado solo para fondo) — para las hojas
     decorativas de .hero-outro-hoja en Inicio (ver .hoja2-animada__path
     en style.css): "un poco aclarado", no lavado del todo, tiene que
     seguir leyéndose con cuerpo sobre el fondo pistacho claro de esa
     sección. También usado en .contacto-grupo-fondo (Contacto) para
     distinguir el SVG decorativo del fondo pistacho sin diluir de esa
     página. No pensado como fondo de texto, solo decorativo. */
  --color-pistacho-medio: #D9CD91;

  /* Aclarado ~25% del melocotón hacia blanco (mismo cálculo que
     --color-pistacho-medio de arriba) — para bailando.svg en el hero
     de Inicio, ver front-page.php. */
  --color-melocoton-clara: #F6B386;

  /* Niebla aclarado ~80% hacia blanco: para texto sobre las zonas
     oscuras de Inicio (oliva/lavanda) en vez de blanco puro. El
     niebla base falla ahí para texto normal (3.83:1 / 4.19:1, por
     debajo del 4.5:1 mínimo); este tono si pasa (4.59:1 / 5.03:1). */
  --color-niebla-clara: #FAF8F6;

  /* Tipografías */
  --font-titulos: 'EB Garamond', serif;
  --font-texto: 'Work Sans', sans-serif;

  /* Layout */
  --header-height: 4.5rem;
  --content-max-width: 72rem;
  --section-padding-block: clamp(3.5rem, 8vw, 7rem);
  --section-padding-inline: clamp(1.25rem, 5vw, 3rem);
}

/* Más aire entre secciones en móvil — a petición expresa ("agrega más
   espaciado entre las diferentes secciones"). El "8vw" del clamp de
   arriba ya no aporta nada por debajo de ~44rem de ancho (8vw cae por
   debajo del mínimo de 3.5rem y el clamp se queda fijo ahí), así que
   TODA la web se quedaba con el mismo espaciado mínimo, sin margen de
   sobra, en cualquier móvil por ancho que fuera de sobra en alto —
   redefinir la propia variable aquí (no cada ".section" suelto) para
   que todo lo que ya la usa (todas las secciones del sitio, no solo
   Inicio) reciba el aumento sin tocar cada sitio uno a uno. */
@media (max-width: 40rem) {
  :root {
    --section-padding-block: clamp(5rem, 10vw, 7rem);
  }
}