/* ==========================================================================
   ÓSCAR GAMARRA — sistema de diseño base
   Dirección: Editorial Luxury oscuro. Carbón cálido tinteado + un dorado
   editorial restringido + Fraunces (display serif variable) / Plus Jakarta
   Sans (cuerpo) + grano de película. Mobile-first.
   ========================================================================== */

/* ---- Tokens ---------------------------------------------------------- */
:root {
  /* Negros cálidos tinteados (nunca #000 muerto) */
  --ink-900: #0b0906;   /* fondo base, cálido */
  --ink-850: #100d09;
  --ink-800: #14110c;   /* superficies / cards */
  --ink-750: #1b1710;
  --ink-700: #241f16;   /* bordes cálidos, hairlines elevadas */

  /* Un solo dorado, editorial (latón envejecido, no casino) */
  --gold-500: #c9a24b;
  --gold-400: #d9b869;
  --gold-300: #e7cf95;
  --gold-glow: rgba(201, 162, 75, .16);

  /* Texto */
  --paper:    #f4efe6;  /* titulares / énfasis, blanco cálido */
  --paper-dim:#cbc2b2;  /* cuerpo */
  --paper-mut:#8f877a;  /* secundario / metadatos */

  /* Estado (verde WhatsApp, uso muy restringido) */
  --live-500: #37b26b;
  --live-400: #4fce85;

  /* Hairlines */
  --line: rgba(244, 239, 230, .08);
  --line-strong: rgba(244, 239, 230, .14);

  /* Tipografía */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;

  /* Ritmo espacial */
  --pad-x: clamp(1.25rem, 5vw, 2rem);
  --section-y: clamp(4.5rem, 12vw, 9rem);
  --maxw: 1200px;

  /* Movimiento */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --dur: 0.7s;

  /* Radios squircle */
  --r-lg: 1.5rem;
  --r-md: 1rem;
  --r-sm: 0.625rem;
}

/* ---- Reset acotado ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  font-family: var(--font-body);
  background: var(--ink-900);
  color: var(--paper-dim);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.02; color: var(--paper); letter-spacing: -0.015em; }

/* ---- Grano de película (overlay fijo, no scrollea) -------------------- */
.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Utilidades ------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x); }
.section { padding-block: var(--section-y); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .55em;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .28em;
  color: var(--gold-400); font-weight: 600;
}
.eyebrow::before {
  content: ""; width: 1.6rem; height: 1px; background: var(--gold-500); opacity: .7;
}

/* Filete dorado fino como acento (no relleno) */
.rule-gold { height: 1px; background: linear-gradient(90deg, var(--gold-500), transparent); border: 0; }

/* ---- Botones ---------------------------------------------------------- */
.btn {
  --bg: var(--paper); --fg: var(--ink-900);
  display: inline-flex; align-items: center; gap: .75rem;
  padding: .9rem 1.35rem .9rem 1.5rem;
  background: var(--bg); color: var(--fg);
  border-radius: 999px; border: 0; cursor: pointer;
  font-weight: 600; font-size: .95rem; letter-spacing: -0.01em;
  transition: transform var(--dur) var(--ease-spring), background-color .4s var(--ease-out);
  will-change: transform;
}
.btn:active { transform: scale(.97); }
.btn .btn-ico {
  display: grid; place-items: center; width: 1.9rem; height: 1.9rem;
  border-radius: 999px; background: rgba(11, 9, 6, .12);
  transition: transform .5s var(--ease-spring);
}
.btn:hover .btn-ico { transform: translate(3px, -1px); }

.btn--gold { --bg: var(--gold-500); --fg: var(--ink-900); box-shadow: 0 0 0 1px rgba(201,162,75,.4), 0 18px 40px -20px var(--gold-glow); }
.btn--gold .btn-ico { background: rgba(11, 9, 6, .18); }
.btn--ghost {
  --bg: transparent; --fg: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.btn--ghost:hover { background: rgba(244,239,230,.05); }
.btn--live { --bg: var(--live-500); --fg: #05170d; }

/* ---- Reveal de scroll (IntersectionObserver) -------------------------- */
[data-reveal] {
  opacity: 0; transform: translateY(2rem);
  filter: blur(6px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out);
}
[data-reveal].is-in { opacity: 1; transform: none; filter: none; }
[data-reveal-delay="1"] { transition-delay: .08s; }
[data-reveal-delay="2"] { transition-delay: .16s; }
[data-reveal-delay="3"] { transition-delay: .24s; }
[data-reveal-delay="4"] { transition-delay: .32s; }