/**
 * Tipografía — Moni Sarai
 *
 * Base portada del `@layer base` de Lovable:
 *   body           → Montserrat, antialiased
 *   h1, h2, h3     → Cormorant Garamond, peso 400, letter-spacing 0.01em
 *   .font-display  → misma familia, disponible como clase suelta
 *   .eyebrow       → 0.6875rem (11px) / 0.22em / 500 / versalitas
 *
 * Lovable NO pone h4-h6 en display, así que aquí también se quedan en
 * Montserrat. Sobre esa base se añade la escala fluida (tamaños,
 * interlineados) que en Lovable vive en las utilidades de cada componente.
 *
 * ⚠ TODAS las medidas van en px, nunca en rem. OceanWP declara
 *   `html { font-size: 62.5% }`, así que 1rem = 10px, no 16px. Los `rem` de
 *   Tailwind sí valen 16px: al portar hay que convertir (valor_rem × 16 = px).
 *
 * Nota sobre especificidad: OceanWP imprime su tipografía del Personalizador
 * como CSS en línea dentro del <head>, que se evalúa DESPUÉS de este archivo.
 * Por eso los selectores llevan el prefijo `body` / `html body`: suben un
 * punto de especificidad y ganan sin necesidad de !important.
 *
 * Las familias y colores salen de tokens.css.
 */

:root {

	/* Escala fluida (mínimo móvil → máximo escritorio) --------------------- */
	--ms-fs-h1: clamp(36px, 24.8px + 3vw, 60px);
	--ms-fs-h2: clamp(28px, 21.6px + 1.75vw, 44px);
	--ms-fs-h3: clamp(22.4px, 19.2px + 0.9vw, 32px);
	--ms-fs-h4: clamp(16.8px, 16px + 0.25vw, 19.2px);
	--ms-fs-h5: 16px;
	--ms-fs-h6: 15px;
	--ms-fs-body: 16px;
	--ms-fs-small: 14px;
	--ms-fs-lead: clamp(16.8px, 16px + 0.35vw, 20px);

	/* Interlineado y tracking --------------------------------------------- */
	--ms-lh-display: 1.12;
	--ms-lh-heading: 1.25;
	--ms-lh-body: 1.75;
	--ms-tracking-display: 0.01em;   /* el de Lovable para h1-h3 */
	--ms-tracking-body: 0;
	--ms-tracking-eyebrow: 0.22em;   /* el de la utilidad .eyebrow */
	--ms-tracking-ui: 0.12em;        /* el del menú */

	/* Pesos ---------------------------------------------------------------- */
	--ms-fw-display: 400;
	--ms-fw-body: 400;
	--ms-fw-medium: 500;
	--ms-fw-semibold: 600;
	--ms-fw-light: 300;
}

/* -------------------------------------------------------------------------
 * Base
 * ---------------------------------------------------------------------- */

html body {
	font-family: var(--ms-font-sans);
	font-size: var(--ms-fs-body);
	font-weight: var(--ms-fw-body);
	line-height: var(--ms-lh-body);
	letter-spacing: var(--ms-tracking-body);
	color: var(--ms-foreground);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* -------------------------------------------------------------------------
 * Títulos display (h1-h3) — Cormorant Garamond
 * ---------------------------------------------------------------------- */

body h1,
body h2,
body h3,
body .font-display,
body .entry-title,
body .page-header-title,
body .single-post-title,
body .theme-heading,
body .elementor-heading-title {
	font-family: var(--ms-font-display);
	font-weight: var(--ms-fw-display);
	line-height: var(--ms-lh-heading);
	letter-spacing: var(--ms-tracking-display);
	font-optical-sizing: auto;
	text-wrap: balance;
}

body h1,
body .page-header-title,
body .single-post-title {
	font-size: var(--ms-fs-h1);
	line-height: var(--ms-lh-display);
}

body h2 {
	font-size: var(--ms-fs-h2);
	line-height: 1.18;
}

body h3 {
	font-size: var(--ms-fs-h3);
}

/* -------------------------------------------------------------------------
 * Títulos menores (h4-h6) — Montserrat, igual que en Lovable
 * ---------------------------------------------------------------------- */

body h4,
body h5,
body h6,
body .widget-title {
	font-family: var(--ms-font-sans);
	line-height: 1.4;
	text-wrap: balance;
}

body h4 {
	font-size: var(--ms-fs-h4);
	font-weight: var(--ms-fw-semibold);
	letter-spacing: 0.01em;
}

body h5,
body .widget-title {
	font-size: var(--ms-fs-h5);
	font-weight: var(--ms-fw-medium);
	letter-spacing: 0.02em;
}

/* h6 se comporta como antetítulo (la utilidad `eyebrow` de Lovable). */
body h6 {
	font-size: 11px;
	font-weight: var(--ms-fw-medium);
	letter-spacing: var(--ms-tracking-eyebrow);
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
 * Texto corrido
 * ---------------------------------------------------------------------- */

body p,
body li,
body dd,
body dt,
body figcaption,
body address {
	font-family: var(--ms-font-sans);
}

body p {
	line-height: var(--ms-lh-body);
}

body .ms-lead,
body .has-large-font-size {
	font-size: var(--ms-fs-lead);
	font-weight: var(--ms-fw-light);
	line-height: 1.65;
}

/* Citas en Cormorant itálica: es donde la serif luce de verdad. */
body blockquote,
body blockquote p,
body .wp-block-quote p {
	font-family: var(--ms-font-display);
	font-size: var(--ms-fs-lead);
	font-style: italic;
	font-weight: var(--ms-fw-display);
	line-height: 1.5;
	letter-spacing: var(--ms-tracking-display);
}

body blockquote cite,
body .wp-block-quote cite {
	font-family: var(--ms-font-sans);
	font-size: 11px;
	font-style: normal;
	font-weight: var(--ms-fw-medium);
	letter-spacing: var(--ms-tracking-eyebrow);
	text-transform: uppercase;
}

body small,
body .entry-meta,
body .meta,
body figcaption,
body .wp-block-image figcaption {
	font-family: var(--ms-font-sans);
	font-size: var(--ms-fs-small);
	font-weight: var(--ms-fw-light);
	line-height: 1.6;
	color: var(--ms-muted-foreground);
}

body strong,
body b {
	font-weight: var(--ms-fw-semibold);
}

/* -------------------------------------------------------------------------
 * Controles de interfaz
 * ---------------------------------------------------------------------- */

body button,
body input,
body select,
body optgroup,
body textarea,
body .button,
body .wp-block-button__link,
body .elementor-button {
	font-family: var(--ms-font-sans);
	font-weight: var(--ms-fw-medium);
}

body .button,
body .wp-block-button__link,
body .elementor-button,
body input[type="submit"],
body button[type="submit"] {
	font-size: var(--ms-fs-small);
	letter-spacing: var(--ms-tracking-ui);
	text-transform: uppercase;
	border-radius: var(--ms-radius);
}

body .widget,
body .sidebar-box,
body .footer-widget {
	font-family: var(--ms-font-sans);
}

/* -------------------------------------------------------------------------
 * Utilidades (mismos nombres que en Lovable, para pegar markup tal cual)
 * ---------------------------------------------------------------------- */

.eyebrow,
.ms-eyebrow {
	font-family: var(--ms-font-sans);
	font-size: 11px;
	font-weight: var(--ms-fw-medium);
	letter-spacing: var(--ms-tracking-eyebrow);
	text-transform: uppercase;
	line-height: 1.4;
}

.font-display,
.ms-serif {
	font-family: var(--ms-font-display);
}

.font-sans,
.ms-sans {
	font-family: var(--ms-font-sans);
}

/* Cormorant tiene números de estilo antiguo: útiles en texto, no en tablas. */
.ms-tabular-nums {
	font-variant-numeric: tabular-nums lining-nums;
}