/* ============================================================
   VARIABLES
============================================================ */
:root{
  --olive: #3f4a2b;
  --olive-dark: #262e19;
  --olive-light: #5c6b3d;
  --khaki: #b5a97a;
  --sand: #d8cba3;
  --gold: #c9a24b;
  --blaze: #d24a2a;
  --ink: #10120c;
  --ink-2: #171a10;
  --paper: #eee7d3;
  --text-dim: #9aa085;
  --font-display: 'Oswald', sans-serif;
  --font-body: 'Rajdhani', sans-serif;
  --font-mono: 'Share Tech Mono', monospace;
}

*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  background:var(--ink);
  color:var(--sand);
  font-family:var(--font-body);
  font-weight:500;
  overflow-x:hidden;
  letter-spacing:.02em;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  text-transform:uppercase;
  color:var(--paper);
  letter-spacing:.04em;
}

p{ line-height:1.7; color:var(--text-dim); text-transform:uppercase; font-size:.95rem;}

a{ color:inherit; text-decoration:none; }

img{max-width:100%;display:block;}

::selection{ background:var(--gold); color:var(--ink); }

/* ============================================================
   PRELOADER
============================================================ */
#preloader{
  position:fixed; inset:0; z-index:9999;
  background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .6s ease, visibility .6s ease;
}
#preloader.done{ opacity:0; visibility:hidden; pointer-events:none; }

.preloader-inner{ text-align:center; }

.radar-loader{
  position:relative; width:140px; height:140px; margin:0 auto 24px;
  border-radius:50%;
  border:2px solid rgba(197,178,122,.25);
  background:radial-gradient(circle, rgba(63,74,43,.35) 0%, transparent 70%);
}
.radar-ring{
  position:absolute; inset:20px; border-radius:50%;
  border:1px solid rgba(197,178,122,.35);
}
.radar-ring.ring2{ inset:45px; }
.radar-sweep{
  position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 0deg, rgba(201,162,75,.9), transparent 35%);
  animation:spin 1.4s linear infinite;
  -webkit-mask-image:radial-gradient(circle, transparent 0, black 2px);
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.boot-line{
  font-family:var(--font-mono); color:var(--khaki);
  font-size:.85rem; letter-spacing:.15em; text-transform:uppercase;
}
.boot-progress{
  width:220px; height:4px; margin:14px auto 0;
  background:rgba(197,178,122,.15); overflow:hidden;
}
.boot-progress span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--gold),var(--blaze));
}

/* ============================================================
   ATMOSPHERE OVERLAYS
============================================================ */
.scanline-overlay{
  position:fixed; inset:0; pointer-events:none; z-index:9000;
  background:repeating-linear-gradient(
    to bottom, rgba(255,255,255,.025) 0px, rgba(255,255,255,.025) 1px,
    transparent 1px, transparent 3px
  );
  mix-blend-mode:overlay;
}
.vignette-overlay{
  position:fixed; inset:0; pointer-events:none; z-index:8999;
  box-shadow: inset 0 0 220px rgba(0,0,0,.75);
}

/* ============================================================
   NAVBAR
============================================================ */
#navbar{
  position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 5%;
  background:linear-gradient(to bottom, rgba(16,18,12,.95), rgba(16,18,12,0));
  transition:background .3s, padding .3s, border-color .3s;
  border-bottom:1px solid transparent;
}
#navbar.scrolled{
  background:rgba(16,18,12,.92);
  backdrop-filter:blur(6px);
  padding:10px 5%;
  border-color: rgba(197,178,122,.2);
}
.nav-brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); letter-spacing:.1em; color:var(--paper); font-weight:600; }
.nav-shield{ width:34px; height:34px; border-radius:50%; object-fit:cover; border:1px solid var(--gold); }
.nav-links{ display:flex; gap:28px; list-style:none; }
.nav-links a{
  font-family:var(--font-display); font-size:.82rem; letter-spacing:.12em;
  color:var(--khaki); position:relative; padding-bottom:4px;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0%; height:2px;
  background:var(--gold); transition:width .3s ease;
}
.nav-links a:hover{ color:var(--paper); }
.nav-links a:hover::after{ width:100%; }

.nav-toggle{ display:none; flex-direction:column; gap:5px; cursor:pointer; }
.nav-toggle span{ width:26px; height:2px; background:var(--gold); }

/* ============================================================
   HERO
============================================================ */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center;
  padding:120px 5% 80px; overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(circle at 20% 20%, rgba(92,107,61,.35), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(201,162,75,.12), transparent 50%),
    linear-gradient(160deg, var(--ink-2) 0%, var(--olive-dark) 55%, var(--ink) 100%);
}
.camo-layer{
  position:absolute; inset:0; z-index:0; opacity:.35; mix-blend-mode:multiply;
  background-image:
    radial-gradient(ellipse 180px 120px at 10% 20%, var(--olive-light) 40%, transparent 41%),
    radial-gradient(ellipse 220px 140px at 40% 70%, var(--olive) 40%, transparent 41%),
    radial-gradient(ellipse 160px 110px at 75% 15%, var(--khaki) 35%, transparent 41%),
    radial-gradient(ellipse 200px 130px at 90% 60%, var(--olive-dark) 40%, transparent 41%),
    radial-gradient(ellipse 150px 100px at 55% 30%, var(--olive-light) 35%, transparent 41%);
  background-repeat:no-repeat;
  animation:camoDrift 30s ease-in-out infinite alternate;
}
@keyframes camoDrift{
  0%{ transform:scale(1) translate(0,0); }
  100%{ transform:scale(1.08) translate(-2%,2%); }
}
#particles{ position:absolute; inset:0; z-index:1; }

.hud-corners{ position:absolute; inset:18px; z-index:2; pointer-events:none; }
.corner{ position:absolute; width:38px; height:38px; border-color:var(--gold); opacity:.8; }
.corner.tl{ top:0; left:0; border-top:2px solid; border-left:2px solid; }
.corner.tr{ top:0; right:0; border-top:2px solid; border-right:2px solid; }
.corner.bl{ bottom:0; left:0; border-bottom:2px solid; border-left:2px solid; }
.corner.br{ bottom:0; right:0; border-bottom:2px solid; border-right:2px solid; }

.hero-content{
  position:relative; z-index:3; display:flex; align-items:center; gap:60px;
  max-width:1200px; margin:0 auto; flex-wrap:wrap; justify-content:center;
}

.hero-photo-wrap{ position:relative; flex-shrink:0; animation:fadeUp 1s ease .1s both; }
.hex-frame{
  position:relative; width:260px; height:300px;
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  padding:6px;
  background:linear-gradient(145deg,var(--gold),var(--olive-light),var(--gold));
  background-size:200% 200%;
  animation:borderShift 4s ease infinite;
  box-shadow:0 0 40px rgba(201,162,75,.35);
}
.hex-frame::before{
  content:''; position:absolute; inset:0;
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background:var(--ink); z-index:0; margin:0;
}
.hero-photo{
  position:relative; z-index:1; width:100%; height:100%; object-fit:cover;
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  filter:grayscale(.15) contrast(1.08) saturate(1.05);
}
@keyframes borderShift{
  0%,100%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
}
.rank-badge{
  position:absolute; bottom:-10px; right:-10px;
  background:var(--blaze); color:var(--paper); font-family:var(--font-display);
  font-size:.75rem; text-align:center; line-height:1.2; padding:10px 12px;
  border:2px solid var(--paper); box-shadow:0 6px 18px rgba(0,0,0,.4);
  transform:rotate(3deg);
}

.hero-text{ max-width:640px; }
.eyebrow{
  font-family:var(--font-mono); color:var(--gold); font-size:.82rem;
  letter-spacing:.2em; margin-bottom:14px; display:inline-block;
  border-left:3px solid var(--gold); padding-left:10px;
}
.hero-title{
  font-size:clamp(2.2rem, 5vw, 3.6rem); line-height:1.05; margin-bottom:14px;
  color:var(--paper);
}
.type-target{ border-right:none; }
.cursor-blink{ animation:blink 1s step-end infinite; color:var(--gold); }
@keyframes blink{ 50%{ opacity:0; } }

.hero-role{
  font-family:var(--font-display); color:var(--khaki); font-size:1.05rem;
  letter-spacing:.08em; margin-bottom:20px;
}
.hero-divider{ display:flex; align-items:center; gap:12px; margin-bottom:20px; color:var(--gold); }
.hero-divider span{ flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--gold), transparent); }

.hero-intro{ margin-bottom:30px; font-size:.85rem; }

.hero-buttons{ display:flex; gap:18px; flex-wrap:wrap; }
.btn{
  display:inline-block; padding:14px 28px; font-family:var(--font-display);
  letter-spacing:.12em; font-size:.85rem; border-radius:2px; cursor:pointer;
  transition:transform .25s, box-shadow .25s, background .25s, color .25s;
  position:relative; overflow:hidden;
}
.btn-primary{
  background:linear-gradient(120deg,var(--gold),#e0b969,var(--gold));
  background-size:220% 100%;
  color:var(--ink); font-weight:700;
  box-shadow:0 8px 22px rgba(201,162,75,.25);
  animation:sheen 5s linear infinite;
}
@keyframes sheen{
  0%{ background-position:0% 0%; }
  100%{ background-position:220% 0%; }
}
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(201,162,75,.4); }
.btn-ghost{
  border:1px solid var(--khaki); color:var(--sand);
}
.btn-ghost:hover{ background:rgba(197,178,122,.12); transform:translateY(-3px); }

.scroll-cue{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  z-index:3; display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.2em; color:var(--khaki);
}
.scroll-cue span{
  width:1px; height:34px; background:var(--gold);
  position:relative; overflow:hidden;
}
.scroll-cue span::after{
  content:''; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background:var(--paper); animation:scrollDown 1.8s ease infinite;
}
@keyframes scrollDown{
  0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; }
}

@keyframes fadeUp{
  from{ opacity:0; transform:translateY(30px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ============================================================
   SECTIONS GENERAL
============================================================ */
.section{
  padding:110px 8%;
  position:relative;
}
.dark-section{
  background:var(--ink-2);
  border-top:1px solid rgba(197,178,122,.12);
  border-bottom:1px solid rgba(197,178,122,.12);
}

.section-heading{ text-align:center; margin-bottom:60px; }
.tag-line{
  font-family:var(--font-mono); color:var(--gold); font-size:.78rem;
  letter-spacing:.25em; display:block; margin-bottom:10px;
}
.section-heading h2{
  font-size:clamp(1.8rem, 4vw, 2.6rem);
  position:relative; display:inline-block;
}
.section-heading h2::after{
  content:''; display:block; width:70px; height:3px; margin:14px auto 0;
  background:linear-gradient(90deg,var(--olive-light),var(--gold));
}

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(40px); transition:opacity .8s ease, transform .8s ease; }
.reveal.visible{ opacity:1; transform:translateY(0); }

/* ============================================================
   PROFILE GRID (HUD Cards w/ dynamic border)
============================================================ */
.profile-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:26px; max-width:1200px; margin:0 auto;
}
.profile-card{
  position:relative; padding:30px 24px; background:var(--ink);
  border:1px solid rgba(197,178,122,.18);
  transition:transform .3s ease;
}
.profile-card::before{
  content:''; position:absolute; inset:-1px; padding:1px; z-index:0;
  background:conic-gradient(from var(--angle,0deg), transparent 0%, var(--gold) 8%, transparent 20%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:rotateBorder 4s linear infinite;
  opacity:0; transition:opacity .3s;
}
.profile-card:hover::before{ opacity:1; }
.profile-card:hover{ transform:translateY(-6px); }
@property --angle{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes rotateBorder{ to{ --angle:360deg; } }

.card-icon{ font-size:1.8rem; display:block; margin-bottom:14px; }
.profile-card h3{ font-size:1rem; margin-bottom:10px; color:var(--gold); letter-spacing:.08em; }
.profile-card p{ font-size:.82rem; }

/* ============================================================
   RANK TRACK
============================================================ */
.rank-track{
  display:flex; justify-content:space-between; max-width:1000px; margin:0 auto;
  position:relative; flex-wrap:wrap; gap:40px;
}
.rank-track::before{
  content:''; position:absolute; top:8px; left:0; right:0; height:2px;
  background:repeating-linear-gradient(90deg, var(--khaki) 0 10px, transparent 10px 18px);
  z-index:0;
}
.rank-step{ position:relative; z-index:1; flex:1; min-width:220px; text-align:center; }
.rank-dot{
  width:18px; height:18px; border-radius:50%; margin:0 auto 18px;
  background:var(--ink); border:2px solid var(--gold);
  box-shadow:0 0 0 4px rgba(201,162,75,.12);
}
.rank-step.active .rank-dot{
  background:var(--gold); animation:pulseDot 1.8s ease infinite;
}
@keyframes pulseDot{
  0%{ box-shadow:0 0 0 0 rgba(201,162,75,.55); }
  100%{ box-shadow:0 0 0 16px rgba(201,162,75,0); }
}
.rank-step h4{ color:var(--paper); font-size:.95rem; margin-bottom:8px; }
.rank-step p{ font-size:.78rem; }

/* ============================================================
   EDUCATION GRID
============================================================ */
.edu-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:24px; max-width:1200px; margin:0 auto;
}
.edu-card{
  background:linear-gradient(160deg, rgba(92,107,61,.12), rgba(16,18,12,.4));
  border-left:3px solid var(--gold);
  padding:28px 26px; position:relative;
  transition:transform .3s, border-color .3s;
}
.edu-card:hover{ transform:translateX(6px); border-color:var(--blaze); }
.edu-year{
  font-family:var(--font-mono); color:var(--gold); font-size:.78rem;
  letter-spacing:.15em; margin-bottom:10px;
}
.edu-card h3{ font-size:1rem; margin-bottom:12px; line-height:1.4; }
.edu-card p{ font-size:.8rem; }

/* ============================================================
   SKILLS
============================================================ */
.skills-wrap{ max-width:800px; margin:0 auto 60px; }
.skill-row{ margin-bottom:26px; }
.skill-name{
  font-family:var(--font-display); font-size:.82rem; letter-spacing:.08em;
  color:var(--sand); display:block; margin-bottom:8px;
}
.skill-bar{
  height:10px; background:rgba(197,178,122,.12); position:relative; overflow:hidden;
  clip-path:polygon(0 0, 100% 0, 97% 100%, 0% 100%);
}
.skill-fill{
  height:100%; width:0%;
  background:linear-gradient(90deg,var(--olive-light),var(--gold));
  position:relative;
  transition:width 1.6s cubic-bezier(.2,.8,.2,1);
}
.skill-fill::after{
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(45deg, rgba(255,255,255,.15) 0 6px, transparent 6px 12px);
}

.stat-strip{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:20px; max-width:1100px; margin:0 auto; text-align:center;
}
.stat-box{
  padding:26px 10px; border:1px solid rgba(197,178,122,.2);
  background:rgba(255,255,255,.02);
}
.stat-num{
  display:block; font-family:var(--font-display); font-size:2.2rem;
  color:var(--gold); font-weight:600;
}
.stat-label{
  font-size:.72rem; letter-spacing:.1em; color:var(--text-dim);
}

/* ============================================================
   TIMELINE
============================================================ */
.timeline{
  max-width:800px; margin:0 auto; position:relative;
  border-left:2px solid rgba(197,178,122,.3); padding-left:40px;
}
.timeline-item{ position:relative; margin-bottom:50px; }
.timeline-item:last-child{ margin-bottom:0; }
.timeline-marker{
  position:absolute; left:-51px; top:2px; width:16px; height:16px;
  background:var(--ink); border:2px solid var(--gold); transform:rotate(45deg);
}
.timeline-item:hover .timeline-marker{ background:var(--gold); }
.timeline-date{
  font-family:var(--font-mono); color:var(--gold); font-size:.75rem; letter-spacing:.12em;
}
.timeline-content h3{ font-size:1.1rem; margin:8px 0 10px; }
.timeline-content p{ font-size:.82rem; }

/* ============================================================
   ORDERS TABLE (PASES Y ASIGNACIONES)
============================================================ */
.orders-table-wrap{
  max-width:1200px; margin:0 auto 40px; overflow-x:auto;
  border:1px solid rgba(197,178,122,.2);
}
.orders-table{
  width:100%; border-collapse:collapse; min-width:760px;
  font-family:var(--font-body);
}
.orders-table thead th{
  background:linear-gradient(160deg, rgba(92,107,61,.35), rgba(16,18,12,.6));
  color:var(--gold); font-family:var(--font-display); font-size:.75rem;
  letter-spacing:.1em; text-transform:uppercase; text-align:left;
  padding:16px 18px; border-bottom:2px solid var(--gold);
  white-space:nowrap;
}
.orders-table tbody td{
  padding:16px 18px; font-size:.8rem; text-transform:uppercase;
  color:var(--sand); border-bottom:1px solid rgba(197,178,122,.12);
}
.orders-table tbody tr{ transition:background .25s; }
.orders-table tbody tr:hover{ background:rgba(201,162,75,.06); }
.orders-table tbody tr:last-child td{ border-bottom:none; }

.region-chip{
  display:inline-block; padding:5px 12px; font-family:var(--font-mono);
  font-size:.68rem; letter-spacing:.1em; border-radius:2px;
  border:1px solid currentColor;
}
.region-chip.frontera{ color:var(--blaze); }
.region-chip.quito{ color:var(--gold); }

.region-time-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:20px; max-width:1000px; margin:0 auto; text-align:center;
}
.region-box{
  padding:22px 10px; border:1px solid rgba(197,178,122,.2);
  background:rgba(255,255,255,.02); transition:transform .3s, border-color .3s;
}
.region-box:hover{ transform:translateY(-5px); }
.region-box.highlight{ border-color:var(--blaze); background:rgba(210,74,42,.08); }
.region-box-label{
  display:block; font-family:var(--font-display); font-size:.78rem;
  letter-spacing:.12em; color:var(--khaki); margin-bottom:10px;
}
.region-box-time{
  display:block; font-family:var(--font-mono); font-size:1.1rem; color:var(--paper);
}

/* ============================================================
   MEDALS
============================================================ */
.medals-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:26px; max-width:1200px; margin:0 auto;
}
.medal-card{
  padding:34px 28px; text-align:center;
  background:radial-gradient(circle at 50% 0%, rgba(201,162,75,.08), transparent 60%), var(--ink-2);
  border:1px solid rgba(197,178,122,.18);
  transition:transform .3s, box-shadow .3s;
}
.medal-card:hover{ transform:translateY(-8px); box-shadow:0 20px 40px rgba(0,0,0,.4); }
.medal-icon{ font-size:2.4rem; margin-bottom:16px; }
.medal-card h3{ font-size:.95rem; margin-bottom:12px; color:var(--gold); }
.medal-card p{ font-size:.78rem; margin-bottom:14px; }
.medal-date{ font-family:var(--font-mono); font-size:.72rem; color:var(--khaki); letter-spacing:.1em; }

/* ============================================================
   CONTACT
============================================================ */
.contact-section{ text-align:center; }
.contact-wrap{ max-width:640px; margin:0 auto; }
.contact-text{ margin-bottom:30px; font-size:.85rem; }
.contact-btn{ font-family:var(--font-mono); text-transform:none; letter-spacing:.02em; }

/* ============================================================
   FOOTER
============================================================ */
.footer{
  text-align:center; padding:60px 5% 40px; background:var(--ink);
  position:relative;
}
.footer-flag-bar{
  height:4px; width:100%;
  background:linear-gradient(90deg, var(--olive-dark), var(--gold), var(--olive-dark));
  margin-bottom:40px;
}
.military-quote{
  font-family:var(--font-display); font-size:clamp(1.1rem,2.5vw,1.6rem);
  color:var(--paper); max-width:800px; margin:0 auto 16px; letter-spacing:.03em;
}
.footer-sub{
  font-family:var(--font-mono); color:var(--gold); font-size:.78rem;
  letter-spacing:.2em; margin-bottom:30px;
}
.footer-copy{ font-size:.7rem; color:var(--text-dim); }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width:900px){
  .nav-links{
    position:fixed; top:0; right:0; height:100vh; width:min(70vw,320px);
    background:var(--ink-2); flex-direction:column; justify-content:center;
    align-items:flex-start; padding:0 40px; gap:26px;
    transform:translateX(100%); transition:transform .35s ease;
    border-left:1px solid rgba(197,178,122,.2);
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-toggle{ display:flex; }
}

@media (max-width:600px){
  .hero{ padding-top:140px; }
  .hero-content{ flex-direction:column; text-align:center; }
  .hero-divider, .hero-buttons{ justify-content:center; }
  .eyebrow{ margin-left:auto; margin-right:auto; }
  .timeline{ padding-left:30px; }
  .timeline-marker{ left:-39px; }
  .orders-table{ min-width:680px; }
}