/* ============================================================
   Manoma · Flores de Bach — tokens de marca
   Paleta REAL extraída de manoma.com (ver marca.md). NO inventar.
   ============================================================ */
:root {
  /* Color — origen documentado en marca.md */
  --crema: #FCFAF7;        /* fondo dominante (manoma.com) */
  --blanco: #FFFFFF;       /* cards sobre crema */
  --ciruela: #2E2833;      /* texto / oscuro (manoma.com) */
  --ciruela-suave: #4A4352;
  --gris-texto: #6B6472;
  --lavanda: #9387BF;      /* LILA REAL — muestreado píxel a píxel del logo oficial (color plano en logo-manoma.png / manoma-icon.png / wordmark) */
  --violeta: #6B6194;      /* el mismo lila oscurecido para labels/links con contraste sobre crema (derivado de #9387BF) */
  --lavanda-claro: #CDC7E3;/* tinte del lila real */
  --lavanda-logo: #9387BF; /* = --lavanda (el logo ES el lila) */
  /* (v5: salvia/verde eliminado — la marca es solo lila + neutros crema) */
  --linea: #ECE6DF;        /* hairlines sobre crema */
  --linea-oscura: #DDD5CC;
  --ciruela-texto-footer: #CFC8D6;  /* texto sobre fondo ciruela (footer/bandas oscuras) */
  --ciruela-texto-footer-tenue: #9C93A6;
  --lavanda-wash: #D9D4E8;          /* wash muy suave sobre ciruela */
  --lavanda-wash-claro: #F1EFF7;    /* wash muy suave sobre crema */

  /* Tipografía */
  --serif-display: 'Libre Caslon Display', 'Iowan Old Style', Georgia, serif;
  --serif-text: 'Libre Caslon Text', Georgia, serif;
  --sans: 'Manrope', -apple-system, 'Helvetica Neue', sans-serif;

  /* Escala (grande y audaz, no tímido) */
  --wrap: 1680px;
  --pad-x: clamp(20px, 4vw, 72px);
  --sect-y: clamp(72px, 9vw, 140px);
  --h1: clamp(40px, 5.2vw, 76px);
  --h2: clamp(30px, 3.6vw, 52px);
  --h3: clamp(22px, 2.2vw, 30px);
  --lead: clamp(17px, 1.35vw, 21px);
  --body: 16px;

  --r-card: 0px;           /* rectangular; nada de pills */
  --transition: 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Reset mínimo */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--ciruela); /* = tono del footer para safe-areas iPhone */
  color: var(--ciruela);
  font-family: var(--sans);
  font-size: var(--body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
main { background: var(--crema); }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font-family: inherit; cursor: pointer; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }

/* Tipos */
.h-display { font-family: var(--serif-display); font-weight: 400; line-height: 1.06; letter-spacing: -0.005em; }
.h1 { font-size: var(--h1); }
.h2 { font-size: var(--h2); }
.h3 { font-family: var(--serif-display); font-weight: 400; font-size: var(--h3); line-height: 1.2; }
.lead { font-family: var(--serif-text); font-size: var(--lead); line-height: 1.55; color: var(--ciruela-suave); }
.eyebrow {
  font-family: var(--sans); font-weight: 600; font-size: 12px;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--violeta);
}
.num { font-family: var(--sans); font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }
.cita { font-family: var(--serif-text); font-style: italic; }

/* Botones — rectangulares, sin combo sólido+ghost */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--ciruela); color: var(--crema);
  font-family: var(--sans); font-weight: 600; font-size: 14px; letter-spacing: 0.05em;
  padding: 17px 34px; min-height: 48px; border: 0; border-radius: 0; text-decoration: none;
  transition: background var(--transition);
}
.btn:hover { background: var(--violeta); }
/* CTA secundario (WhatsApp): lila real de Manoma, sin verde */
.btn--lila { background: var(--violeta); }
.btn--lila:hover { background: var(--lavanda); }
.link-sub {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-weight: 600; font-size: 14px; letter-spacing: 0.04em; text-decoration: none;
  color: var(--ciruela); border-bottom: 1px solid var(--ciruela); padding-bottom: 2px;
  transition: color var(--transition), border-color var(--transition);
}
.link-sub:hover { color: var(--violeta); border-color: var(--violeta); }

/* Reveals — progressive enhancement: solo se ocultan si <html class="js"> */
html.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22,1,0.36,1); }
html.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
}