/* =========================================================
   ETERNUM CLASSICS — Lujo silencioso minimalista
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@300;400&display=swap');

:root {
  /* ---------- Light (blanco perla) — default ---------- */
  --ec-bg:           #f3ede2;   /* blanco perla cálido */
  --ec-bg-alt:       #ebe4d6;   /* marfil más cálido para alternar secciones */
  --ec-bg-deep:      #0c0c0e;   /* negro profundo (cuando el tema oscuro está apagado, se usa para CTAs) */
  --ec-ink:          #18181a;   /* tinta principal */
  --ec-ink-soft:     #4a4842;   /* texto secundario */
  --ec-ink-muted:    #807c70;   /* metadata, captions */
  --ec-line:         #c4bcab;   /* hairlines */
  --ec-line-soft:    #d8d0bf;   /* divisores muy finos */
  --ec-accent:       #b08a4a;   /* dorado antiguo apagado */
  --ec-accent-soft:  #8a6e3a;   /* dorado más profundo (hover) */

  /* Type families */
  --ec-serif:        'Cormorant Garamond', 'Times New Roman', serif;
  --ec-sans:         'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ec-mono:         'JetBrains Mono', ui-monospace, 'Menlo', monospace;

  /* Tracking */
  --ec-tracking-display: 0.005em;
  --ec-tracking-wordmark: 0.42em;
  --ec-tracking-eyebrow:  0.32em;
  --ec-tracking-meta:     0.18em;

  /* Layout */
  --ec-page-x: clamp(20px, 5vw, 80px);
  --ec-max:    1440px;
}

[data-theme="dark"] {
  --ec-bg:           #0b0b0d;
  --ec-bg-alt:       #131316;
  --ec-bg-deep:      #f3ede2;
  --ec-ink:          #f3ede2;
  --ec-ink-soft:     #b8b1a0;
  --ec-ink-muted:    #807c70;
  --ec-line:         #2a2925;
  --ec-line-soft:    #1c1c1e;
  --ec-accent:       #c89c5a;
  --ec-accent-soft:  #b08a4a;
}

/* =========================================================
   Type pair variants (Tweak)
   ========================================================= */

[data-typepair="cormorant"] {
  --ec-serif: 'Cormorant Garamond', serif;
  --ec-sans:  'Inter', system-ui, sans-serif;
}
[data-typepair="playfair"] {
  --ec-serif: 'Playfair Display', serif;
  --ec-sans:  'Inter', system-ui, sans-serif;
}
[data-typepair="ebgaramond"] {
  --ec-serif: 'EB Garamond', serif;
  --ec-sans:  'Inter', system-ui, sans-serif;
}

/* =========================================================
   Reset
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--ec-bg);
  color: var(--ec-ink);
  font-family: var(--ec-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background-color 0.5s ease, color 0.5s ease;
}
img, video { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font-family: inherit; }

/* =========================================================
   Type system
   ========================================================= */

.ec-display {
  font-family: var(--ec-serif);
  font-weight: 400;
  font-size: clamp(44px, 7.6vw, 116px);
  line-height: 0.98;
  letter-spacing: var(--ec-tracking-display);
  color: var(--ec-ink);
}
.ec-display em {
  font-style: italic;
  font-weight: 400;
  color: var(--ec-ink);
}

.ec-h1 {
  font-family: var(--ec-serif);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 72px);
  line-height: 1.04;
  letter-spacing: var(--ec-tracking-display);
}
.ec-h2 {
  font-family: var(--ec-serif);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 52px);
  line-height: 1.08;
  letter-spacing: var(--ec-tracking-display);
}
.ec-h3 {
  font-family: var(--ec-serif);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.15;
  letter-spacing: 0.005em;
}

.ec-eyebrow {
  font-family: var(--ec-sans);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--ec-tracking-eyebrow);
  color: var(--ec-accent);
}
.ec-eyebrow-ink {
  font-family: var(--ec-sans);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--ec-tracking-eyebrow);
  color: var(--ec-ink-soft);
}

.ec-meta {
  font-family: var(--ec-mono);
  font-weight: 400;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--ec-tracking-meta);
  color: var(--ec-ink-muted);
}

.ec-lede {
  font-family: var(--ec-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 1.9vw, 28px);
  line-height: 1.5;
  color: var(--ec-ink-soft);
}

.ec-body {
  font-family: var(--ec-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ec-ink-soft);
}
.ec-body-lg {
  font-family: var(--ec-sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ec-ink-soft);
}

.ec-wordmark {
  font-family: var(--ec-serif);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--ec-tracking-wordmark);
}

/* =========================================================
   Atoms
   ========================================================= */

.ec-rule {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--ec-line);
  border: none;
  margin: 0;
}
.ec-rule-soft { background: var(--ec-line-soft); }

.ec-rule-short {
  display: block;
  width: 48px;
  height: 1px;
  background: var(--ec-accent);
  border: none;
  margin: 0;
}

/* Buttons */
.ec-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 56px;
  padding: 0 32px;
  font-family: var(--ec-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: var(--ec-tracking-eyebrow);
  text-transform: uppercase;
  border: 1px solid var(--ec-ink);
  background: var(--ec-ink);
  color: var(--ec-bg);
  border-radius: 0;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}
.ec-btn:hover {
  background: transparent;
  color: var(--ec-ink);
}
.ec-btn:active { transform: scale(0.98); }

.ec-btn-ghost {
  background: transparent;
  color: var(--ec-ink);
  border: 1px solid var(--ec-ink);
}
.ec-btn-ghost:hover {
  background: var(--ec-ink);
  color: var(--ec-bg);
}

.ec-btn-sm {
  height: 44px;
  padding: 0 22px;
  font-size: 11px;
}

.ec-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ec-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: var(--ec-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ec-ink);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  position: relative;
}
.ec-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 1px;
  background: var(--ec-ink);
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(.2,.7,.2,1);
}
.ec-link:hover::after { transform: scaleX(0); transform-origin: right; }
.ec-link svg { transition: transform 0.4s cubic-bezier(.2,.7,.2,1); }
.ec-link:hover svg { transform: translateX(4px); }

/* Hairline frame for cards/sections */
.ec-frame {
  border: 1px solid var(--ec-line);
  background: transparent;
}

/* Section spacing */
.ec-section {
  padding-left: var(--ec-page-x);
  padding-right: var(--ec-page-x);
  padding-top: clamp(80px, 10vw, 160px);
  padding-bottom: clamp(80px, 10vw, 160px);
}
.ec-section-tight {
  padding-top: clamp(60px, 7vw, 100px);
  padding-bottom: clamp(60px, 7vw, 100px);
}

.ec-container {
  max-width: var(--ec-max);
  margin: 0 auto;
  width: 100%;
}

/* Section number eyebrow */
.ec-section-number {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--ec-mono);
  font-size: 11px;
  letter-spacing: var(--ec-tracking-meta);
  color: var(--ec-ink-muted);
  text-transform: uppercase;
}
.ec-section-number::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--ec-accent);
  transform: translateY(-3px);
}

/* Image placeholder utilities */
.ec-img-mono {
  filter: saturate(0.92) contrast(1.02);
}

/* Reveal on scroll */
.ec-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
}
.ec-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Focus */
:focus-visible {
  outline: 1px solid var(--ec-accent);
  outline-offset: 3px;
}

/* Selection */
::selection {
  background: var(--ec-ink);
  color: var(--ec-bg);
}