/* ─── VARIABLES ─── */
:root {
  --gold:        #c9a84c;
  --green:       #3aaa35;
  --green-dark:  #2d8a29;
  --green-light: #52c44d;
  --green-pale:  #eaf5ea;
  --green-mid:   #c8eac6;
  --blue:        #1a75c4;
  --blue-dark:   #0f5a9e;
  --blue-light:  #3b99e8;
  --blue-pale:   #e4f0fb;
  --white:       #ffffff;
  --off-white:   #f8f8f6;
  --light-gray:  #f0efec;
  --mid-gray:    #e0deda;
  --text-main:   #191916;
  --text-sub:    #474740;
  --text-muted:  #6b6b63; /* Updated for WCAG AA Contrast (5.5:1) */
  --border:      #dddbd4;
}

/* ─── RESET & BASE ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'Source Sans 3', 'Inter', sans-serif;
  background: var(--white);
  color: var(--text-main);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.modal-open {
  overflow: hidden;
  padding-right: 17px; /* Prevent scrollbar jitter/CLS */
}

/* ─── ACCESIBILIDAD ─── */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--green);
  color: white;
  padding: 8px 16px;
  z-index: 1000;
  border-radius: 0 0 4px 0;
  font-family: 'Inter', sans-serif;
  font-weight: bold;
  text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus { top: 0; }

:focus-visible {
  outline: 3px solid var(--green-dark);
  outline-offset: 2px;
}

/* ─── ANIMATE ─── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(0.25, 1, 0.5, 1), transform 0.7s cubic-bezier(0.25, 1, 0.5, 1); }
.reveal.visible { opacity: 1; transform: none; }
.d1 { transition-delay: 0.1s; } .d2 { transition-delay: 0.2s; } .d3 { transition-delay: 0.3s; }
.paused * { animation-play-state: paused !important; }

/* ─── NAV ─── */
nav {
  position: sticky; top: 0; z-index: 200;
  height: 60px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(221, 219, 212, 0.5);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2.5rem;
  transition: box-shadow 0.3s ease, background 0.3s ease;
}
nav.scrolled { 
  box-shadow: 0 4px 24px rgba(0,0,0,0.06); 
  background: rgba(255, 255, 255, 0.95);
}
.nav-logo { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; }
.nav-logo svg, .nav-logo img { height: 36px; width: auto; }
.nav-links { display: flex; gap: 1.8rem; list-style: none; align-items: center; }
.nav-links a {
  font-family: 'Inter', sans-serif;
  color: var(--text-sub); text-decoration: none;
  font-size: 0.83rem; font-weight: 500; letter-spacing: 0.01em;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--green-dark); }
.nav-links a:visited { color: var(--text-sub); }

.nav-cta {
  background: var(--green) !important; color: #fff !important;
  padding: 0.5rem 1.3rem; border-radius: 4px;
  font-weight: 600 !important; font-size: 0.82rem !important;
  transition: background 0.2s, transform 0.15s !important;
}
.nav-cta:hover { background: var(--green-dark) !important; transform: translateY(-1px); }

/* ─── HERO ─── */
#hero {
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - 60px);
  overflow: hidden;
}
.hero-left {
  display: flex; flex-direction: column; justify-content: center;
  padding: 5rem 4rem 5rem 2.5rem;
  background: var(--white);
}
.hero-left h1 { margin-bottom: 1.4rem; }
.hero-left h1 span { color: var(--green-dark); }
.hero-left .lead { max-width: 480px; margin-bottom: 2.2rem; }
.hero-ctas { display: flex; gap: 0.85rem; flex-wrap: wrap; margin-bottom: 2.8rem; }
.hero-meta {
  display: flex; align-items: center; gap: 1rem;
  padding-top: 2rem; border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.meta-chip {
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  padding: 0.3rem 0.75rem; border-radius: 100px;
  border: 1px solid var(--border); color: var(--text-muted); background: var(--off-white);
}

.hero-right { position: relative; overflow: hidden; }
.hero-bg-img {
  position: absolute; top: -5%; left: -5%; width: 110%; height: 110%;
  object-fit: cover;
  transition: transform 0.1s ease-out;
  will-change: transform;
  transform: translate3d(0, 0, 0); /* GPU acceleration */
  backface-visibility: hidden;
  perspective: 1000px;
}
.scene-bg {
  position: absolute; inset: 0;
  /* Updated gradient for better contrast & visibility */
  background: linear-gradient(135deg, rgba(12,31,16,0.6) 0%, rgba(12,31,16,0.2) 50%, rgba(12,31,16,0.5) 100%);
  backdrop-filter: brightness(0.8) contrast(1.1);
}
.scene-hud {
  position: absolute; inset: 0; padding: 1.5rem;
  display: flex; flex-direction: column; justify-content: space-between;
  pointer-events: none;
}
.hud-top { display: flex; justify-content: space-between; align-items: flex-start; }
.hud-bottom { display: flex; justify-content: space-between; align-items: flex-end; }
.hud-tag {
  font-family: 'Space Mono', monospace; font-size: 0.65rem;
  color: rgba(255,255,255,0.85); letter-spacing: 0.07em;
  background: rgba(0,0,0,0.5); padding: 0.35rem 0.65rem;
  border-radius: 4px; line-height: 1.8;
  backdrop-filter: blur(4px);
}
.hud-tag.live { color: #ff4444; font-weight: bold; }
.hud-live-dot { display: inline-block; width: 8px; height: 8px; background: #ff4444; border-radius: 50%; margin-right: 6px; animation: blink 1.2s infinite; box-shadow: 0 0 6px #ff4444;}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.2} }

.scene-reticle { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 80px; height: 80px; pointer-events: none; }
.ret-h { position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: rgba(255,255,255,0.4); }
.ret-v { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,0.4); }
.ret-c { position: absolute; inset: 12px; border: 1px solid rgba(255,255,255,0.3); border-radius: 50%; animation: retPulse 2.8s ease-in-out infinite; }
@keyframes retPulse { 0%,100%{transform:scale(1);opacity:0.6} 50%{transform:scale(1.15);opacity:0.2} }

.scene-scan {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent 0%, rgba(58,170,53,0.8) 50%, transparent 100%);
  box-shadow: 0 0 10px rgba(58,170,53,0.5);
  animation: scanBar 5s linear infinite; pointer-events: none;
}
@keyframes scanBar { 0%{top:0%;opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{top:100%;opacity:0} }

/* ─── HERO FADE-IN ─── */
.hero-fade {
  opacity: 0;
  animation: heroFadeIn 1.1s cubic-bezier(0.25, 1, 0.5, 1) 0.2s forwards;
}
@keyframes heroFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── TYPEWRITER ─── */
h2[data-typewriter] {
  visibility: hidden;
}
h2[data-typewriter].tw-ready {
  visibility: visible;
}
h2[data-typewriter].tw-ready::after {
  content: '|';
  color: var(--green);
  animation: twCursor 0.6s step-end infinite;
  font-weight: 300;
  margin-left: 2px;
}
h2[data-typewriter].tw-done {
  visibility: visible;
}
@keyframes twCursor { 0%,100%{opacity:1} 50%{opacity:0} }