/* Mia — base compartida (landing, dashboard, páginas legales y 404).
   Tokens del sistema de diseño: ver README del paquete de lanzamiento. */

@font-face {
  font-family: "Young Serif";
  src: url("/static/young-serif-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/static/hanken-grotesk-var.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --ciruela: #3B1540;
  --ciruela-hover: #2A0D2E;
  --ciruela-card: #4D2153;
  --ciruela-borde: #6A3A70;
  --crema: #FFF7EC;
  --crema-2: #F6EDDF;
  --borde: #EADFCB;
  --borde-suave: #F1E8DA;
  --rosa: #FF5C8A;
  --rosa-hover: #FF7BA0;
  --rosa-claro: #FFC3D5;
  --rosa-texto: #B8144F;
  --amarillo: #FFD84D;
  --amarillo-claro: #FFF3C4;
  --lila: #F3E4EF;
  --texto-2: #5E4561;
  --texto-2-oscuro: #E4D3E6;
  --verde: #1F7A45;
  --verde-online: #25A45B;
  --sombra: 0 20px 40px -20px rgba(59, 21, 64, .35);
  --serif: "Young Serif", Georgia, serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--crema); color: var(--ciruela);
  font-family: var(--sans); -webkit-font-smoothing: antialiased;
}
a { color: var(--ciruela); }
a:hover { color: var(--rosa-texto); }
img, svg { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--rosa); outline-offset: 2px; }

.serif { font-family: var(--serif); font-weight: 400; }
.wrap { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.eyebrow { font-size: 14px; font-weight: 700; color: var(--rosa-texto); }
.h2 {
  margin: 0; font-family: var(--serif); font-weight: 400;
  font-size: clamp(36px, 4.6vw, 58px); line-height: 1.06; letter-spacing: -.025em;
  text-wrap: balance;
}
.logo { display: inline-flex; text-decoration: none; }
.logo img { height: 30px; width: auto; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  border: 0; cursor: pointer; text-decoration: none; font-weight: 700;
  border-radius: 999px; transition: background-color .15s ease, color .15s ease;
}
.btn-dark { background: var(--ciruela); color: var(--crema); }
.btn-dark:hover { background: var(--ciruela-hover); color: var(--crema); }
.btn-pink { background: var(--rosa); color: var(--ciruela); }
.btn-pink:hover { background: var(--rosa-hover); color: var(--ciruela); }
.btn-line { background: transparent; color: var(--ciruela); border: 1.5px solid var(--ciruela); }
.btn-line:hover { background: var(--ciruela); color: var(--crema); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

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