/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  --bg:        #0B0C0F;   /* charcoal, not pure black */
  --bg-2:      #14161B;
  --bg-3:      #1B1E24;
  --cream:     #F5F4F2;   /* text, not pure white */
  --silver:    #A8ADB4;
  --dim:       #6B7078;
  --copper:    #C9702D;
  --copper-dark: #A85A20;
  --copper-soft: rgba(201,112,45,.16);
  --navy:      #2C4A5E;
  --navy-dark: #1F3547;
  --navy-soft: rgba(44,74,94,.28);
  --line:      rgba(245,244,242,0.1);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--cream);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3, h4 {
  font-family: "Manrope", "Inter", sans-serif;
  text-wrap: balance;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
p { text-wrap: pretty; }
::selection { background: var(--copper); color: var(--bg); }
:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 9999;
  padding: .6rem 1.1rem; background: var(--cream); color: var(--bg);
  border-radius: 8px; font-weight: 600; font-size: .875rem;
  transition: top .2s var(--ease-out);
}
.skip-link:focus { top: 1rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* =============================================================
   3. Header
   ============================================================= */
.site-header {
  position: fixed; inset-inline: 0; top: 0; z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .4s var(--ease-out), border-color .4s var(--ease-out), backdrop-filter .4s var(--ease-out);
}
.site-header.is-scrolled {
  background: rgba(11,12,15,0.82);
  border-bottom-color: var(--line);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
@supports not (backdrop-filter: blur(14px)) {
  .site-header.is-scrolled { background: rgba(11,12,15,0.97); }
}

/* =============================================================
   4. Buttons
   ============================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 600; font-size: .95rem; letter-spacing: -0.01em;
  padding: .85rem 1.6rem; border-radius: 999px;
  transition: transform .35s var(--ease-out), background .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s var(--ease-out);
  white-space: nowrap;
}
.btn-primary {
  background: var(--copper); color: #12100D;
}
.btn-primary:hover { background: #d67e3a; box-shadow: 0 8px 30px -8px var(--copper-soft); }
.btn-ghost {
  background: transparent; color: var(--cream); border: 1px solid var(--line);
}
.btn-ghost:hover { border-color: var(--copper); background: var(--copper-soft); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); }
}

/* =============================================================
   5. Reveal on scroll (functional micro-interaction — never gate)
   ============================================================= */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal[data-split] { opacity: 1; transform: none; }

/* stagger children of a group */
.reveal-group > * { transition-delay: calc(var(--i, 0) * 90ms); }

/* =============================================================
   6. Photo placeholders — labeled, intentional, not a broken-image look
   ============================================================= */
.photo-placeholder {
  position: relative;
  display: flex; align-items: flex-end;
  background:
    linear-gradient(160deg, var(--navy-soft), transparent 55%),
    linear-gradient(340deg, var(--copper-soft), transparent 60%),
    var(--bg-2);
  border: 1px dashed var(--line);
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
}
.photo-placeholder::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(45deg, rgba(245,244,242,0.035) 0 1px, transparent 1px 14px);
  pointer-events: none;
}
.photo-placeholder .ph-tag {
  position: relative; z-index: 1;
  margin: 1.1rem;
  padding: .55rem .9rem;
  background: rgba(11,12,15,0.72);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: .72rem;
  line-height: 1.45;
  color: var(--silver);
  letter-spacing: .01em;
  max-width: 30ch;
  backdrop-filter: blur(6px);
}
.photo-placeholder .ph-tag strong { color: var(--cream); font-weight: 600; }

/* =============================================================
   7. Section dividers / halos
   ============================================================= */
.section-halo {
  position: absolute;
  inset: -20% -10% -20% -10%;
  background: radial-gradient(45% 40% at 50% 30%, var(--copper-soft), transparent 72%);
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
  animation: haloDrift 18s ease-in-out infinite;
}
.section-halo--navy {
  background: radial-gradient(45% 40% at 50% 50%, var(--navy-soft), transparent 72%);
  animation-duration: 22s;
}
@keyframes haloDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(2%, -3%, 0) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .section-halo { animation: none; }
}

/* ---- Hero background: real photo, color-graded to brand duotone ---- */
.hero-bg { will-change: transform; }
.hero-bg-tint {
  background: linear-gradient(135deg, var(--navy) 0%, #0B0C0F 48%, var(--copper) 100%);
  mix-blend-mode: color;
  opacity: 0.7;
}

/* ---- Reusable duotone tint for atmospheric background photos ---- */
.bg-photo-tint {
  background: linear-gradient(160deg, var(--navy) 0%, #0B0C0F 55%, var(--copper) 100%);
  mix-blend-mode: color;
  opacity: 0.85;
}

/* ---- Smoke/fog drift (functional ambient — not gated) ---- */
.smoke-layer {
  position: absolute; inset: -15% -20%;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
  opacity: 0.22;
}
.smoke-wisp {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  background: radial-gradient(circle, rgba(201,112,45,0.55), transparent 70%);
  animation: smokeDrift 28s ease-in-out infinite;
}
.smoke-wisp:nth-child(2) {
  background: radial-gradient(circle, rgba(44,74,94,0.55), transparent 70%);
  animation-duration: 34s;
  animation-delay: -9s;
}
.smoke-wisp:nth-child(3) { animation-duration: 40s; animation-delay: -19s; }
@keyframes smokeDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  33%  { transform: translate3d(6%, -5%, 0) scale(1.15); }
  66%  { transform: translate3d(-5%, 4%, 0) scale(0.92); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .smoke-wisp { animation-duration: 60s; }
}

/* ---- Embers — true particle effect, gated under reduced-motion ---- */
.embers { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.ember {
  position: absolute;
  bottom: -5%;
  width: 4px; height: 4px;
  border-radius: 999px;
  background: var(--copper);
  box-shadow: 0 0 10px 2px rgba(201,112,45,0.75);
  opacity: 0;
  animation: emberRise linear infinite;
}
@keyframes emberRise {
  0%   { transform: translate3d(0, 0, 0) scale(0.6); opacity: 0; }
  12%  { opacity: .85; }
  88%  { opacity: .25; }
  100% { transform: translate3d(var(--drift, 15px), -115%, 0) scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .embers { display: none; }
}

/* ---- Floating glow orbs (ambient depth) ---- */
.glow-orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(60px);
  pointer-events: none;
  opacity: 0.5;
  animation: orbFloat 14s ease-in-out infinite;
}
.glow-orb--copper { background: var(--copper); }
.glow-orb--navy { background: var(--navy); animation-duration: 17s; animation-delay: -4s; }
@keyframes orbFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(3%, -6%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .glow-orb { animation: none; }
}

/* =============================================================
   8. Identificación rows
   ============================================================= */
.id-row {
  border-top: 1px solid var(--line);
  transition: background .3s var(--ease-out);
}
.id-row:last-child { border-bottom: 1px solid var(--line); }
.id-row:hover { background: rgba(245,244,242,0.02); }

/* =============================================================
   10. Steps (cómo funciona)
   ============================================================= */
.step-num {
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  color: var(--copper);
  font-variant-numeric: tabular-nums;
}
.step-line {
  background: linear-gradient(var(--line), var(--line));
  background-size: 1px 100%;
  background-repeat: no-repeat;
  background-position: left;
}

/* =============================================================
   11. Not/Is list
   ============================================================= */
.not-item { color: var(--dim); text-decoration: line-through; text-decoration-color: rgba(107,112,120,.5); }
.is-item::before {
  content: "";
  display: inline-block; width: 6px; height: 6px; border-radius: 999px;
  background: var(--copper); margin-right: .65rem; vertical-align: middle;
}

/* =============================================================
   12. Scroll cue
   ============================================================= */
.scroll-cue {
  display: inline-flex; flex-direction: column; align-items: center; gap: .5rem;
}
.scroll-cue .line {
  width: 1px; height: 40px;
  background: linear-gradient(var(--silver), transparent);
  animation: scrollCue 2.2s var(--ease-soft) infinite;
}
@keyframes scrollCue {
  0% { transform: scaleY(0); transform-origin: top; opacity: 0; }
  40% { transform: scaleY(1); transform-origin: top; opacity: 1; }
  60% { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue .line { animation: none; opacity: .5; }
}

/* =============================================================
   13. Responsive helpers
   ============================================================= */
@media (max-width: 539px) {
  .hero-title { font-size: clamp(2rem, 8vw, 2.6rem) !important; }
}