/* ============================================================
   AVI — Audio Visual Innovations
   brand.css — design tokens, reset, typography
   Palette & type distilled from AVI's own material (warm-dark,
   editorial, luxury). Tokens are swappable in one place.
   ============================================================ */

:root {
  /* — Surface (casi negro, cálido pero neutro; menos chocolate que antes) — */
  --ink:        #121010;
  --ink-2:      #191616;
  --ink-3:      #221E1D;
  --panel:      rgba(25, 22, 22, 0.72);

  /* — Acento —
     REGLA DE PALETA: la única calidez saturada de la página es la LUZ DE LAS
     FOTOS. La interfaz es champán casi neutro. El dorado anterior (#C79A66)
     competía con las fotos y le quitaba sofisticación a la marca. */
  --accent:      #CCC4B8;
  --accent-soft: #E6E1D8;
  --accent-deep: #8B837A;

  /* — Text — */
  --cream:      #F3F0EA;
  --cream-dim:  rgba(243, 240, 234, 0.58);
  --cream-mute: rgba(243, 240, 234, 0.36);
  --white:      #FFFFFF;

  /* — Lines / hairlines — */
  --line:       rgba(243, 240, 234, 0.12);
  --line-soft:  rgba(243, 240, 234, 0.06);

  /* — Type — */
  --serif: 'Jost', system-ui, sans-serif;         /* display */
  --sans:  'Jost', system-ui, sans-serif;          /* body */

  /* — Rhythm — */
  --pad:   clamp(1.25rem, 5vw, 5rem);
  --maxw:  1320px;
  --ease:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.6, 0.01, 0.05, 0.95);

  --nav-h: 74px;
}

/* — Logo (mask → hereda currentColor; la ruta es relativa a /css/) — */
.avi-logo {
  display: block;
  aspect-ratio: 448 / 282;
  background: currentColor;
  -webkit-mask: url("../assets/logo/avi-logo.svg") no-repeat center / contain;
          mask: url("../assets/logo/avi-logo.svg") no-repeat center / contain;
}

/* — reset — */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(1rem, 0.55rem + 0.6vw, 1.12rem);
  line-height: 1.7;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; }
::selection { background: var(--accent); color: var(--ink); }

/* — Lenis — */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* — Typography scale — */
.display {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 300; line-height: 1.08; }

.h-xl { font-size: clamp(2.1rem, 1rem + 4vw, 4.2rem); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 200; }
.h-lg { font-size: clamp(2rem, 1rem + 3.4vw, 3.9rem);  letter-spacing: 0.04em; text-transform: uppercase; font-weight: 200; }
.h-md { font-size: clamp(1.5rem, 1rem + 1.8vw, 2.4rem); letter-spacing: 0.05em; text-transform: uppercase; }
.h-sm { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem); letter-spacing: 0.06em; }

.eyebrow {           /* used sparingly; NOT a titulito over headings */
  font-size: 0.66rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--cream-mute);
  font-weight: 400;
}
.lede {
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.18rem);
  color: var(--cream-dim);
  font-weight: 300;
  line-height: 1.7;
  max-width: 42ch;
}
.muted { color: var(--cream-dim); }
.accent { color: var(--accent); }

/* — Layout helpers — */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
/* Aire: las secciones respiran mucho más que antes (pedido del cliente). */
.section { padding-block: clamp(6rem, 13vw, 12rem); position: relative; }
.section--tight { padding-block: clamp(3.5rem, 7vw, 6rem); }
.section--air  { padding-block: clamp(8rem, 18vw, 16rem); }

/* — Buttons —
   Nada de píldoras doradas con glow: eso era lo menos lujoso de la página.
   Primario = claro y sólido sobre el fondo oscuro. Radio casi recto. */
.btn {
  display: inline-flex; align-items: center; gap: 0.7em;
  padding: 1.05em 2.1em;
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 400;
  border-radius: 2px;
  background: var(--cream); color: var(--ink);
  border: 1px solid var(--cream);
  transition: background 0.45s var(--ease), color 0.45s var(--ease), border-color 0.45s var(--ease);
}
.btn:hover { background: transparent; color: var(--cream); }
.btn--ghost {
  background: transparent; color: var(--cream);
  border-color: rgba(243,240,234,0.28);
}
.btn--ghost:hover { background: transparent; border-color: var(--cream); }

/* — Reveal-on-scroll base (keyframes animation — robust, runs to completion) — */
[data-reveal] { opacity: 0; }
[data-reveal].in { animation: reveal 1s var(--ease) both; }
[data-reveal-delay="1"].in { animation-delay: 0.09s; }
[data-reveal-delay="2"].in { animation-delay: 0.18s; }
[data-reveal-delay="3"].in { animation-delay: 0.27s; }
[data-reveal-delay="4"].in { animation-delay: 0.36s; }
@keyframes reveal {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; animation: none !important; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}