/* JOLIE · Beauty by Marcela — punto de entrada del sistema visual
   Móvil primero: la base es el teléfono. Las media queries amplían.

   Orden: tokens → componentes → movimiento. Aquí abajo queda lo genérico
   (reset, tipografía base, iconos, foco y utilidades). Las hojas de cada
   página (css/landing.css, css/marcela.css…) se enlazan después y mandan. */
@import url("css/tokens.css");
@import url("css/components.css");
@import url("css/motion.css");

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
[hidden] { display: none !important; }
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
  color-scheme: light;
  overflow-x: clip;
}
html.locked, html.locked body,
html.is-locked, html.is-locked body { overflow: hidden; }
body {
  font-family: var(--f-ui);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.45;
  color: var(--ink);
  background: var(--bg);
  min-width: 0;
  overflow-x: clip;
}
h1, h2, h3, p, li, small, span, b, strong, a, button, label, td, dd, dt { overflow-wrap: break-word; }
small { font-size: var(--fs-min); }
img, svg, video, canvas { max-width: 100%; }
img { display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
button:disabled { cursor: not-allowed; }

/* ---------- Iconos (assets/sprite.svg) ----------
   Línea fina y SIEMPRE currentColor: el color lo hereda del contenedor.
   Nada de fills fijos aquí; al cambiar el sprite por iconos de línea encaja solo.
   .fill  → icono macizo (p. ej. el logotipo de WhatsApp) en currentColor.
   .ill   → antes ilustración a color sin trazo; ahora los iconos de categoría
            (c-*) son también de línea, así que .ill se comporta como .ico. */
.ico {
  width: 22px;
  height: 22px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}
.ico.fill { fill: currentColor; stroke: none; }
.ico.ill { fill: none; stroke: currentColor; }
.ico-sm { width: 18px; height: 18px; }
.ico-lg { width: 26px; height: 26px; }

/* ---------- Accesibilidad ---------- */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
:focus-visible {
  outline: 2px solid var(--plum);
  outline-offset: 3px;
}
/* Dentro de superficies oscuras (toasts, bloques ciruela) el anillo pasa a claro.
   Los botones ciruela sobre fondo claro conservan el anillo ciruela (offset 3px). */
.on-dark :focus-visible,
.toast :focus-visible { outline-color: var(--gold-300); }
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus { outline: none; }

/* ---------- Tipografía de marca ----------
   Cormorant Garamond 500 SOLO en titulares grandes (h1, h2) y la marca.
   h3 y todo lo demás es interfaz → Manrope. */
h1, h2 {
  font-family: var(--f-display);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0;
  line-height: 1.08;
}
h1 em, h2 em, .h-em {
  font-style: italic;
  font-weight: 500;
  color: var(--plum);
}
h3 {
  font-family: var(--f-ui);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0;
  line-height: 1.25;
}
/* Antes letra manuscrita. Ahora: Cormorant en cursiva, discreta. */
.script {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  color: var(--ink-2);
}
/* Antetítulo: Manrope, sin mayúsculas gritonas ni filete dorado */
.eyebrow {
  font-family: var(--f-ui);
  font-size: var(--fs-min);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 100%;
  min-width: 0;
  line-height: 1.35;
}
.eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--line-2); flex: none; }
.eyebrow .ico { width: 18px; height: 18px; color: var(--plum); }
.eyebrow:has(.ico)::before { display: none; }

/* Titular de sección con hueco de icono:
   <div class="sec-head"><h2><svg class="ico">…</svg>Los favoritos</h2><span>…</span></div> */
.sec-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 34px 0 14px;
}
.sec-head h2 { font-size: 28px; line-height: 1.05; display: flex; align-items: center; gap: 10px; min-width: 0; }
.sec-head h2 .ico { width: 22px; height: 22px; color: var(--plum); transform: translateY(1px); }
.sec-head > span, .sec-head > p { color: var(--ink-2); font-size: var(--fs-min); }

/* Logo redondo: solo favicon/apple-touch-icon. Si aparece en alguna página,
   sin anillos dorados ni sombras. */
.logo-round {
  border-radius: 50%;
  object-fit: cover;
  aspect-ratio: 1;
  box-shadow: none;
}

/* Marca: "JOLIE" Cormorant espaciado + "Beauty by Marcela" en Manrope
   <span class="wordmark"><b>JOLIE</b><i>Beauty by Marcela</i></span> */
.wordmark { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.wordmark b {
  font-family: var(--f-display);
  font-weight: 500;
  letter-spacing: .28em;
  margin-right: -.28em; /* el tracking final no descentra la marca */
  color: var(--ink);
  font-size: 28px;
  line-height: 1;
}
.wordmark i {
  font-family: var(--f-ui);
  font-style: normal;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--ink-2);
  font-size: var(--fs-min);
  line-height: 1;
  margin-top: 6px;
  white-space: nowrap;
}

/* ---------- Fondos ---------- */
.pearl { background: var(--bg); }

/* ---------- Utilidades ---------- */
.row { display: flex; align-items: center; }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--ink-3); }
.wrap { max-width: var(--wrap); margin: 0 auto; }
/* Cifras: Manrope con números alineados y de ancho fijo (KPIs, precios, gráficas) */
.num {
  font-family: var(--f-num);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

@media (max-width: 359px) {
  .wordmark b { font-size: 24px; letter-spacing: .22em; margin-right: -.22em; }
}