/* ============================================================
   Patronaje Simple — system.css
   Fuente única de marca para todas las páginas de patronajesimple.com
   Espejo CSS de system.html (catálogo visual).
   Importar con: <link rel="stylesheet" href="system.css">
   Carga de fuentes Google: ver header de cada HTML.
   ============================================================ */

/* ─── TOKENS ────────────────────────────────────────────── */
:root {
  --rojo:#C0392B;
  --rojo-oscuro:#962d22;
  --crema:#FAF8F5;
  --crema-oscura:#F0EDE8;
  --negro:#111010;
  --gris:#6B6B6B;
  --gris-claro:#B8B5B0;

  --display:'Cormorant Garamond', Georgia, serif;
  --script:'Parisienne', cursive;
  --ui:'DM Sans', system-ui, sans-serif;
}

/* ─── RESET ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--crema);
  color: var(--negro);
  font-family: var(--ui);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ─── UTILIDADES TIPOGRÁFICAS ──────────────────────────── */
.eyebrow {
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gris);
  font-weight: 400;
}

/* ─── WORDMARK · PATRONAJE Simple ──────────────────────── */
.wordmark {
  font-family: var(--display);
  display: inline-flex;
  flex-direction: column;
  line-height: 1.2;
  color: var(--negro);
}
.wordmark .l1 {
  font-weight: 400;
  font-size: 18px;
  letter-spacing: .36em;
  text-transform: uppercase;
  padding-left: .36em;
}
.wordmark .l2 {
  font-weight: 300;
  font-style: italic;
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--gris);
  margin-top: 2px;
}
.wordmark.invert { color: var(--crema); }
.wordmark.invert .l2 { color: rgba(250, 248, 245, .6); }
.wordmark.tiny .l1 { font-size: 11px; letter-spacing: .32em; padding-left: .32em; }
.wordmark.tiny .l2 { font-size: 9px; }

/* ─── MONOGRAMA · PS ───────────────────────────────────── */
.mono-mark {
  font-family: var(--display);
  font-weight: 400;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: .85;
  color: var(--negro);
}
.mono-mark .ps { font-style: italic; letter-spacing: -.04em; }
.mono-mark .underline {
  display: block;
  width: .42em;
  height: 1px;
  background: currentColor;
  margin: .18em auto 0;
}
.mono-mark.invert { color: var(--crema); }

/* ─── LOCKUP HORIZONTAL · monograma + barra + wordmark ── */
.lockup {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  text-decoration: none;
  color: var(--negro);
}
.lockup .vbar {
  width: 1px;
  height: 36px;
  background: currentColor;
  opacity: .4;
}
.lockup.invert { color: var(--crema); }

/* ─── FIRMA · Carmen (Parisienne) ──────────────────────── */
.firma {
  font-family: var(--script);
  font-size: 64px;
  line-height: 1;
  color: var(--negro);
}
.firma.rojo { color: var(--rojo); }
.firma.invert { color: var(--crema); }
.firma.small { font-size: 32px; }

/* ─── NOTCH · único ornamento del sistema ─────────────── */
/* Como bullet de lista: el ::before añade el notch ANTES del texto */
.notch-bullet::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='15 8 30 26'%3E%3Cpath d='M 15 10 L 30 32 L 45 10' stroke='%23C0392B' stroke-width='3' fill='none' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  margin-right: 6px;
  vertical-align: middle;
}
/* Como separador inline entre palabras */
.notch-inline {
  display: inline-block;
  width: 12px;
  height: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='15 8 30 26'%3E%3Cpath d='M 15 10 L 30 32 L 45 10' stroke='%23C0392B' stroke-width='3' fill='none' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}