/* ==========================================================================
   Recuerdi — Dirección A · "Editorial Luz"
   Lujo silencioso: papel marfil, tinta profunda, un solo acento de marca
   (intercambiable: cambia SOLO --brand-accent; todo lo demás se deriva),
   serif de alto contraste + grotesca limpia, filetes finos, movimiento lento.
   ========================================================================== */

:root {
  /* ---------- Acento de marca: la ÚNICA variable que hay que cambiar ----------
     Tendencia 2026: Black Cherry. Para probar otro tono sin editar:
     (en el sitio de producto el cambio por URL está desactivado). */
  --brand-accent:   #561623;   /* Burgundy profundo */

  /* ---------- Color · Light (primario) ---------- */
  --paper:          #F5F0E6;   /* fondo papel cálido */
  --paper-2:        #EDE6D8;   /* papel en sombra, bandas */
  --paper-3:        #E3DACA;   /* hundidos, pistas de barra */
  --ivory:          #FBF8F2;   /* tarjetas */
  --ink:            #1C1A16;   /* texto principal  (15.6:1 sobre paper) */
  --ink-2:          #48433A;   /* texto secundario ( 9.0:1) */
  --ink-3:          #6B6458;   /* notas, pies de foto ( 5.3:1) */
  --rule:           rgba(28, 26, 22, .16);
  --rule-strong:    rgba(28, 26, 22, .42);

  --accent:         var(--brand-accent);                                   /* botones, superficies de acción */
  --accent-text:    oklch(from var(--brand-accent) clamp(.32, calc(l + .06), .42) calc(c * 1.1 + .01) h); /* acento legible en textos/cursivas */
  --accent-hover:   oklch(from var(--brand-accent) calc(l + .08) c h);
  --accent-ink:     #FBF8F2;                                               /* texto sobre acento */
  --accent-soft:    color-mix(in oklab, var(--accent-text) 8%, var(--paper)); /* fondo muy claro, rosado */
  --champagne:      #C8B48A;   /* decorativo: filetes, sellos, ondas */
  --champagne-soft: #EBE1CB;

  --success:        #4F6B3F;
  --danger:         #8A3B2E;

  --overlay:        rgba(20, 18, 14, .52);
  --on-photo:       #FBF8F2;

  /* ---------- Tipografía ---------- */
  --font-display: "Fraunces", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-ui:      "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Escala fluida (360 → 1440) */
  --step--2: clamp(.69rem, .67rem + .08vw, .75rem);    /* small caps labels */
  --step--1: clamp(.81rem, .79rem + .1vw, .875rem);
  --step-0:  clamp(.94rem, .91rem + .15vw, 1.0625rem); /* cuerpo */
  --step-1:  clamp(1.13rem, 1.06rem + .3vw, 1.3125rem);
  --step-2:  clamp(1.35rem, 1.2rem + .65vw, 1.75rem);
  --step-3:  clamp(1.7rem, 1.4rem + 1.3vw, 2.6rem);
  --step-4:  clamp(2.2rem, 1.6rem + 2.6vw, 4rem);
  --step-5:  clamp(2.9rem, 1.9rem + 4.6vw, 6.6rem);    /* display hero */
  --step-6:  clamp(3.6rem, 1.8rem + 8vw, 10.5rem);     /* wordmark footer */

  --leading-tight: 1.02;
  --leading-snug:  1.18;
  --leading-body:  1.6;
  --tracking-caps: .16em;
  --tracking-display: -.022em;

  /* ---------- Espaciado (base 4) ---------- */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: clamp(5rem, 3rem + 8vw, 10rem);  /* ritmo entre secciones */
  --gutter:  clamp(1.25rem, .6rem + 2.6vw, 3rem);
  --max-w:   1360px;

  /* ---------- Radio (contenido: casi recto, editorial) ---------- */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 6px;
  --radius-3: 14px;
  --radius-pill: 999px;

  /* ---------- Sombras (papel sobre papel, muy suaves) ---------- */
  --shadow-1: 0 1px 0 rgba(28,26,22,.04), 0 1px 2px rgba(28,26,22,.06);
  --shadow-2: 0 2px 4px rgba(28,26,22,.04), 0 12px 28px -8px rgba(28,26,22,.14);
  --shadow-3: 0 4px 10px rgba(28,26,22,.05), 0 40px 80px -24px rgba(28,26,22,.28);
  --ring: 0 0 0 3px color-mix(in oklab, var(--accent-text) 30%, transparent);

  /* ---------- Movimiento (lento, elegante) ---------- */
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.45, 0, .2, 1);
  --dur-1: 160ms;
  --dur-2: 320ms;
  --dur-3: 700ms;
  --dur-4: 1200ms;
}

/* ---------- Color · Dark (secundario: "Luz de noche") ---------- */
[data-theme="dark"] {
  --paper:          #14130F;
  --paper-2:        #1C1A15;
  --paper-3:        #2A2720;
  --ivory:          #1F1D18;
  --ink:            #F0E9DC;
  --ink-2:          #CFC6B5;
  --ink-3:          #A39A89;
  --rule:           rgba(240, 233, 220, .14);
  --rule-strong:    rgba(240, 233, 220, .38);
  --accent:         oklch(from var(--brand-accent) .70 calc(c * .85 + .02) h);
  --accent-text:    oklch(from var(--brand-accent) .76 calc(c * .85 + .02) h);
  --accent-hover:   oklch(from var(--brand-accent) .80 calc(c * .85 + .02) h);
  --accent-ink:     #14130F;
  --accent-soft:    color-mix(in oklab, var(--brand-accent) 35%, var(--paper));
  --champagne:      #B9A57C;
  --champagne-soft: #2E2920;
  --success:        #9DB884;
  --danger:         #E08F7E;
  --shadow-1: 0 1px 0 rgba(0,0,0,.3);
  --shadow-2: 0 12px 28px -8px rgba(0,0,0,.6);
  --shadow-3: 0 40px 80px -24px rgba(0,0,0,.7);
  --ring: 0 0 0 3px color-mix(in oklab, var(--accent) 40%, transparent);
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 1ms; --dur-2: 1ms; --dur-3: 1ms; --dur-4: 1ms; }
}

/* ---------- Base compartida mínima ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color var(--dur-3) var(--ease-soft), color var(--dur-3) var(--ease-soft);
}
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--champagne-soft); color: var(--ink); }

.caps {
  font-family: var(--font-ui);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.serif { font-family: var(--font-display); font-optical-sizing: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}