/* Malú Molina · colores de su marca: nude, rosa suave y dorado (tomados de sus sellos y su logo) */
:root {
  --bg: #f7f0ea;
  --surface: #efe2d6;
  --rosa: #f3d6dc;
  --ink: #3b2a22;
  --muted: #6b564b;
  --oro: #b08a4e;
  --accent: #7d5d2b;
  --apagado: #a0907f; /* números de días y horas sin cupo; la etiqueta de al lado lleva el texto legible */
  --ok: #3f6b4a;
  --error: #9a2f2f;

  /* Inter + Tempting. Tempting es de RGB Studio y su demo es solo para uso personal: con la licencia comercial,
     poner el archivo en /fonts/tempting.woff2 y activar el @font-face de abajo. Mientras tanto, Pinyon Script (libre). */
  --sans: "Inter", system-ui, sans-serif;
  --serif: "Cormorant Garamond", Georgia, serif; /* títulos: la misma familia clásica del logo */
  --script: "Tempting", "Pinyon Script", cursive;
  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2.25rem, 1.4rem + 3.4vw, 4.25rem);
  --m: clamp(20px, 6vw, 96px);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-color: var(--oro) var(--surface); accent-color: var(--accent); }
input, textarea { caret-color: var(--accent); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--step-body)/1.5 var(--sans); font-variant-numeric: lining-nums; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.2em; }
/* @font-face { font-family: "Tempting"; src: url("/fonts/tempting.woff2") format("woff2"); font-display: swap; } */
@font-face { font-family: "Jost"; src: url("/fonts/jost-300.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Marcellus"; src: url("/fonts/marcellus-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

/* Marca: MALÚ MOLINA en romana dorada, TECNIQUE NAILS espaciado debajo y el trazo corazón → pincel */
/* Fondo de toda la página: monogramas gigantes grabados en el papel, con luz y sombra */
.fondo-marca { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: url(/img/fondo-marca.svg) center / cover no-repeat; }
.logo-mini { display: block; height: 44px; width: auto; filter: drop-shadow(0 1px 1px rgb(59 42 34 / 0.35)); }
/* sobre foto oscura: dorado con brillo; sobre crema: dorado más hondo para que se lea */
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em; text-wrap: balance; }
:is(h1, h2, h3) em { font-family: var(--script); font-style: normal; font-weight: 400; letter-spacing: 0; font-size: 1.3em; line-height: 0.8; margin-left: 0.12em; } /* el trazo de entrada de la script se come el espacio */
:is(h2, h3):has(em) { line-height: 1.25; padding-bottom: 0.2em; } /* que los trazos altos de la script no toquen la línea de arriba */
h2 { font-size: calc(var(--step-head) * 1.15); line-height: 1; } /* la serif tiene ojo más pequeño que Inter */
h3 { font-size: calc(var(--step-lead) * 1.15); line-height: 1.1; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--rosa); }
.muted { color: var(--muted); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border: 0; border-radius: 999px;
  background: var(--accent); color: #fff; font: 600 var(--step-body)/1 var(--sans);
  text-decoration: none; cursor: pointer;
  transition: transform 160ms var(--ease), background-color 160ms var(--ease);
}
.btn:hover { background: #6b4f24; transform: translateY(-2px); }
.btn:active { transform: scale(0.98); }
.btn:disabled { background: var(--apagado); cursor: not-allowed; transform: none; }
.btn--claro { background: var(--bg); color: var(--ink); }
.btn--claro:hover { background: #fff; }
.btn--suave { background: var(--surface); color: var(--ink); }
.btn--suave:hover { background: var(--rosa); }


@media (prefers-reduced-motion: reduce) {
  html:not(.animar) *, html:not(.animar) *::before, html:not(.animar) *::after { animation: none !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}