/* Fuente de marca oficial (Estudio de Imagen). font-display: optional evita el
   salto visual de FOUT: si no llega a tiempo para el primer paint, la página
   se queda con el fallback en vez de reemplazarlo después. ascent/descent/
   line-gap-override fijan la caja de línea propia de la tipografía para que
   no varíe entre carga con o sin el archivo. */
@font-face {
  font-family: 'PR Viking';
  src: url('../uploads/fonts/PRViking.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: optional;
  ascent-override: 84%;
  descent-override: 20%;
  line-gap-override: 11%;
}

/* Paleta oficial (Estudio de Imagen y Colores Raiquén):
   Verde Pistacho #86895d · Verde Musgo #656149 · Morado #4e0041
   --accent-2 y --accent-2-deep son variantes aclaradas del morado de marca,
   necesarias para cumplir contraste AA sobre fondo casi negro. */
:root {
  --bg: #0b090e;
  --bg-alt: #060508;
  --bg-glow: #1a1610;
  --line: #2e2a1e;
  --text: #eceee6;
  --text-dim: #a3a0ad;
  --accent: #86895d;
  --accent-deep: #656149;
  --accent-2: #9e7396;
  --accent-2-deep: #8c5984;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Manrope', sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: #b0b296; }

::selection { background: var(--accent); color: var(--bg); }

img { max-width: 100%; }

@keyframes rq-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes rq-drift { 0% { transform: translateX(-12%); opacity: 0; } 12% { opacity: .5; } 88% { opacity: .5; } 100% { transform: translateX(12%); opacity: 0; } }
@keyframes rq-twinkle { 0%, 100% { opacity: .15; } 50% { opacity: .8; } }
@keyframes rq-fadeup { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes rq-glow { 0%, 100% { opacity: .35; } 50% { opacity: .6; } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
  html { scroll-behavior: auto; }
}

.label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

.diamond { transform: rotate(45deg); }

/* ===== Botones ===== */
.btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

.btn-solid {
  background: var(--accent);
  color: var(--bg) !important;
  padding: 15px 34px;
}
.btn-solid:hover { background: var(--text); }

.btn-line {
  color: var(--text) !important;
  border-bottom: 1px solid var(--accent-2-deep);
  padding-bottom: 4px;
}
.btn-line:hover { color: var(--accent) !important; border-bottom-color: var(--accent); }

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--accent) !important;
  border: 1px solid var(--accent-2-deep);
  padding: 14px 28px;
}
.btn-outline:hover { background: var(--accent); color: var(--bg) !important; border-color: var(--accent); }

/* ===== Section shells (compartidos entre páginas) ===== */
.section { }
.section--alt { background: var(--bg-alt); }
.section--line-top { border-top: 1px solid var(--line); }
.section--line-y { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-inner { max-width: 1280px; margin: 0 auto; padding: 88px 24px; }
.section-inner--lg { padding: 110px 24px; }
.section-eyebrow { margin: 0 0 14px; color: var(--accent-2); }
.section-title { margin: 0 0 56px; font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: clamp(26px, 3vw, 38px); color: var(--text); max-width: 560px; }