/* ─────────────────────────────────────────────────────────────────
Cuerda y Compás · In Memoriam — Tokens de la sub-marca
Música sacra y clásica en directo para ceremonias fúnebres · Madrid
El opuesto deliberado de la marca de bodas: sereno, no oscuro.
───────────────────────────────────────────────────────────────── */
/* Las tipografías (Playfair Display + Source Serif 4) se cargan con
+ en el de
cada página, no con @import, para no bloquear el renderizado. */
:root {
/* ── Paleta In Memoriam (sobria, serena) ─────────────────────── */
--im-base: #F8F7F4; /* blanco roto cálido apagado · fondo / base */
--im-ink: #2C2C35; /* gris pizarra · texto principal (continuidad con la casa) */
--im-navy: #28384D; /* azul marino sereno · acento principal */
--im-gray: #6B6B72; /* gris medio · apoyo / secundario */
--im-rule: #D8D5CE; /* gris cálido muy claro · filetes / detalle */
--im-stone: #EFEDE8; /* piedra cálida muy suave · fondo de sección alterno */
--im-taupe: #8E867B; /* gris topo apagado · único toque cálido, muy puntual */
--im-gold: #C4956A; /* dorado discreto · solo detalles (estrellas, filetes) */
/* hairlines y veladuras derivadas */
--im-rule-soft: rgba(44, 44, 53, 0.10);
--im-navy-mist: rgba(40, 56, 77, 0.10);
--im-shadow: 0 1px 2px rgba(44,44,53,.05), 0 14px 38px rgba(44,44,53,.07);
/* ── Tipografía (continuidad con la casa) ────────────────────── */
--im-display: "Playfair Display", "Times New Roman", serif;
--im-body: "Source Serif 4", Georgia, serif;
/* Escala — más aire, pesos más ligeros que en bodas */
--im-fs-hero: 66px; --im-lh-hero: 1.12;
--im-fs-h1: 46px; --im-lh-h1: 1.16;
--im-fs-h2: 32px; --im-lh-h2: 1.24;
--im-fs-h3: 23px; --im-lh-h3: 1.34;
--im-fs-lead: 21px; --im-lh-lead: 1.62;
--im-fs-body: 18px; --im-lh-body: 1.72;
--im-fs-small: 15px; --im-lh-small:1.6;
--im-fs-eyebrow: 13px; --im-ls-eyebrow: 0.26em; /* versalitas muy espaciadas */
/* Ritmo de 8 pt, márgenes generosos (el aire es respeto) */
--im-sp-1: 4px; --im-sp-2: 8px; --im-sp-3: 12px; --im-sp-4: 16px;
--im-sp-5: 24px; --im-sp-6: 32px; --im-sp-7: 48px; --im-sp-8: 64px;
--im-sp-9: 96px; --im-sp-10: 128px;
--im-r: 3px; /* radio mínimo · es papel y tinta, no soft-tech */
--im-ease: cubic-bezier(.32, .72, 0, 1);
}
/* ── Defaults ────────────────────────────────────────────────── */
html, body {
background: var(--im-base);
color: var(--im-ink);
font-family: var(--im-body);
font-size: var(--im-fs-body);
line-height: var(--im-lh-body);
font-weight: 400;
font-feature-settings: "kern", "liga", "onum";
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.im-display, h1, h2, h3 {
font-family: var(--im-display);
font-weight: 500; /* regular/medium · nunca bold agresivo */
color: var(--im-ink);
text-wrap: balance;
letter-spacing: 0;
}
.im-hero { font-family: var(--im-display); font-weight: 400; font-size: var(--im-fs-hero); line-height: var(--im-lh-hero); text-wrap: balance; }
h1, .im-h1 { font-size: var(--im-fs-h1); line-height: var(--im-lh-h1); font-weight: 500; }
h2, .im-h2 { font-size: var(--im-fs-h2); line-height: var(--im-lh-h2); font-weight: 500; }
h3, .im-h3 { font-size: var(--im-fs-h3); line-height: var(--im-lh-h3); font-weight: 500; }
p { text-wrap: pretty; }
.im-lead { font-size: var(--im-fs-lead); line-height: var(--im-lh-lead); color: var(--im-gray); font-weight: 400; }
.im-small { font-size: var(--im-fs-small); line-height: var(--im-lh-small); }
.im-eyebrow {
font-family: var(--im-body);
font-size: var(--im-fs-eyebrow);
letter-spacing: var(--im-ls-eyebrow);
text-transform: uppercase;
font-weight: 600;
color: var(--im-gray);
}
/* Filete fino — el único ornamento estructural */
.im-rule {
border: none; height: 1px; background: var(--im-rule);
}
/* Separador editorial puntual */
.im-dot::before { content: "·"; color: var(--im-gray); }
/* Enlaces sobrios */
a.im-link {
color: var(--im-navy);
text-decoration: none;
border-bottom: 1px solid var(--im-rule);
transition: border-color var(--im-ease) .25s;
}
a.im-link:hover { border-color: var(--im-navy); }
/* ── Botones ─────────────────────────────────────────────────── */
.im-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
font-family: var(--im-body); font-size: 16px; font-weight: 500;
letter-spacing: 0.04em;
padding: 15px 26px;
border: 1px solid var(--im-navy);
background: var(--im-navy);
color: var(--im-base);
border-radius: var(--im-r);
cursor: pointer; text-decoration: none; white-space: nowrap;
transition: background .25s var(--im-ease), color .25s var(--im-ease);
}
.im-btn:hover { background: #1f2c3d; }
.im-btn--ghost { background: transparent; color: var(--im-navy); }
.im-btn--ghost:hover { background: var(--im-navy); color: var(--im-base); }
/* ── Card ────────────────────────────────────────────────────── */
.im-card {
background: var(--im-base);
border: 1px solid var(--im-rule);
border-radius: var(--im-r);
padding: var(--im-sp-7);
}