/* =====================================================================
   XCALIBER PROTECTION AND SECURITY SERVICES
   Design System — "Range Card" identity
   Tokens derived directly from the brand seal (logo).
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Source+Sans+3:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  /* --- Brand palette (extracted from the seal) --- */
  --navy:        #203864;
  --navy-deep:   #0c1424;
  --navy-mid:    #142544;
  --gold:        #bf9100;
  --gold-bright: #e2b530;
  --blue-light:  #90adf1;
  --silver:      #d8d8d8;
  --off-white:   #f3f4f2;
  --ink:         #10131c;

  /* --- Semantic tokens --- */
  --bg-light:      var(--off-white);
  --bg-dark:       var(--navy-deep);
  --bg-navy:       var(--navy);
  --text-body:     #2a2f3a;
  --text-onlight-muted: #5b6270;
  --text-ondark:   #eef0f4;
  --text-ondark-muted: rgba(238,240,244,0.68);
  --line-onlight:  rgba(16,19,28,0.12);
  --line-ondark:   rgba(255,255,255,0.14);

  /* --- Type --- */
  --font-display: 'Oswald', sans-serif;
  --font-body:    'Source Sans 3', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* --- Radii / shadow --- */
  --radius-s: 3px;
  --radius-m: 6px;
  --shadow-card: 0 18px 40px -20px rgba(12,20,36,0.45);

  --container: 1180px;
}

/* ---------------------------------------------------------------------
   RESET / BASE
--------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--text-body);
  background: var(--bg-light);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-family: var(--font-display); font-weight:600; letter-spacing:.01em; }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

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

.container{
  width:100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.section{ padding: 96px 0; }
.section--tight{ padding: 64px 0; }
@media (max-width: 720px){
  .section{ padding: 64px 0; }
  .section--tight{ padding: 48px 0; }
}

.bg-dark{ background: var(--bg-dark); color: var(--text-ondark); }
.bg-navy{ background: var(--bg-navy); color: var(--text-ondark); }
.bg-light{ background: var(--bg-light); color: var(--text-body); }
.bg-white{ background:#fff; color: var(--text-body); }

/* ---------------------------------------------------------------------
   SIGNATURE MOTIF: target rings (concentric circles), used as faint
   backdrops behind section headers — echoes the paper targets used
   throughout the actual training photography.
--------------------------------------------------------------------- */
.target-rings{
  position:absolute;
  top:0; right:0; bottom:0; left:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}
.target-rings::before,
.target-rings::after{
  content:"";
  position:absolute;
  border-radius:50%;
  border:1px solid currentColor;
}
.target-rings--tl::before{ width:520px; height:520px; top:-260px; left:-180px; opacity:.08; }
.target-rings--tl::after{ width:320px; height:320px; top:-140px; left:-60px; opacity:.12; }
.target-rings--br::before{ width:620px; height:620px; bottom:-320px; right:-220px; opacity:.07; }
.target-rings--br::after{ width:360px; height:360px; bottom:-160px; right:-60px; opacity:.11; }

/* crosshair bullet, used instead of generic dots/checks */
.crosshair{
  --size: 18px;
  width: var(--size); height: var(--size);
  min-width: var(--size);
  border-radius:50%;
  border: 1.5px solid currentColor;
  position:relative;
  display:inline-block;
}
.crosshair::before,
.crosshair::after{
  content:"";
  position:absolute;
  background:currentColor;
}
.crosshair::before{ width:1.5px; height:8px; left:50%; top:-3px; transform:translateX(-50%); }
.crosshair::after{ width:8px; height:1.5px; top:50%; left:-3px; transform:translateY(-50%); }

/* ---------------------------------------------------------------------
   EYEBROW / LABEL
--------------------------------------------------------------------- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.eyebrow::before{
  content:"";
  width: 28px; height:1px;
  background: var(--gold);
}
.bg-light .eyebrow, .bg-white .eyebrow{ color:#8a6c00; }

.section-head{ max-width: 640px; margin-bottom: 48px; position:relative; z-index:1; }
.section-head h2{ font-size: clamp(28px, 4vw, 42px); line-height:1.12; }
.section-head p{ margin-top:16px; font-size:17px; color: var(--text-onlight-muted); }
.bg-dark .section-head p, .bg-navy .section-head p{ color: var(--text-ondark-muted); }
.section-head--center{ margin-left:auto; margin-right:auto; text-align:center; }

/* ---------------------------------------------------------------------
   BUTTONS
--------------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 15px 28px;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: var(--radius-s);
  border: 1.5px solid transparent;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn-gold{ background: var(--gold); color: var(--ink); }
.btn-gold:hover{ background: var(--gold-bright); }
.btn-outline-light{ border-color: rgba(255,255,255,0.55); color:#fff; }
.btn-outline-light:hover{ border-color:#fff; background: rgba(255,255,255,0.08); }
.btn-outline-dark{ border-color: var(--navy); color: var(--navy); }
.btn-outline-dark:hover{ background: var(--navy); color:#fff; }
.btn-navy{ background: var(--navy); color:#fff; }
.btn-navy:hover{ background:#2c4a80; }
.btn-block{ width:100%; }

/* ---------------------------------------------------------------------
   HEADER / NAV
--------------------------------------------------------------------- */
.site-header{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 100;
  background: rgba(12,20,36,0.0);
  transition: background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}
.site-header.is-scrolled{
  background: rgba(12,20,36,0.92);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px -12px rgba(0,0,0,.5);
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height: 84px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:52px; width:auto; }
.brand-word{
  font-family: var(--font-display);
  color:#fff;
  font-size: 16px;
  letter-spacing:.06em;
  line-height:1.1;
  text-transform:uppercase;
}
.brand-word span{ display:block; font-size:10px; color: var(--silver); letter-spacing:.22em; font-family:var(--font-mono); margin-top:3px; }

.main-nav{ display:flex; align-items:center; gap:36px; }
.main-nav ul{ display:flex; gap:32px; }
.main-nav a{
  color:#fff;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  position:relative;
  padding-bottom:4px;
}
.main-nav a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:2px; background: var(--gold);
  transform: scaleX(0);
  transform-origin:left;
  transition: transform .2s ease;
}
.main-nav a:hover::after,
.main-nav a.is-active::after{ transform: scaleX(1); }

.header-actions{ display:flex; align-items:center; gap:18px; }

.lang-switch{
  display:flex;
  border:1px solid rgba(255,255,255,.35);
  border-radius: 20px;
  overflow:hidden;
  font-family: var(--font-mono);
  font-size: 12px;
}
.lang-switch a{
  padding:6px 12px;
  color: rgba(255,255,255,.65);
  letter-spacing:.05em;
}
.lang-switch a.is-active{ background: var(--gold); color: var(--ink); font-weight:700; }

.nav-toggle{
  display:none;
  width:40px; height:40px;
  border:1px solid rgba(255,255,255,.4);
  border-radius:4px;
  background:transparent;
  position:relative;
}
.nav-toggle span{
  content:"";
  position:absolute; left:9px; right:9px; height:2px; background:#fff;
  top:19px;
}
.nav-toggle span::before, .nav-toggle span::after{
  content:"";
  position:absolute; left:0; right:0; height:2px; background:#fff;
}
.nav-toggle span::before{ top:-6px; }
.nav-toggle span::after{ top:6px; }

@media (max-width: 960px){
  .main-nav{ display:none; }
  .nav-toggle{ display:block; }
  .header-actions{ gap:12px; }
}

/* Mobile drawer */
.mobile-nav{
  position:fixed; top:0; right:0; bottom:0; left:0;
  background: var(--navy-deep);
  z-index: 99;
  display:flex; flex-direction:column;
  padding: 110px 32px 40px;
  transform: translateX(100%);
  transition: transform .3s ease;
}
.mobile-nav.is-open{ transform: translateX(0); }
.mobile-nav ul{ display:flex; flex-direction:column; gap:26px; }
.mobile-nav a{
  font-family: var(--font-display);
  font-size: 26px;
  color:#fff;
  text-transform: uppercase;
  letter-spacing:.03em;
}
.mobile-nav .lang-switch{ margin-top:40px; align-self:flex-start; }

/* ---------------------------------------------------------------------
   HERO
--------------------------------------------------------------------- */
.hero{
  position: relative;
  min-height: 100vh;
  display:flex;
  align-items:center;
  color:#fff;
  background: var(--navy-deep) url('../img/hero-desktop.jpg') center 20% / cover no-repeat;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; top:0; right:0; bottom:0; left:0;
  background: linear-gradient(100deg, rgba(9,14,24,.90) 0%, rgba(9,14,24,.72) 32%, rgba(9,14,24,.38) 55%, rgba(9,14,24,.08) 75%, rgba(9,14,24,.28) 100%);
}
.hero-content{
  position:relative;
  z-index:2;
  max-width: 640px;
  padding-top: 84px;
}
.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family: var(--font-mono);
  font-size:12px;
  letter-spacing:.2em;
  color: var(--gold-bright);
  border:1px solid rgba(226,181,48,.45);
  padding:6px 14px;
  border-radius: 20px;
  margin-bottom: 28px;
}
.hero-badge::before{ content:"●"; font-size:8px; color: var(--gold-bright); }

.hero h1{
  font-size: clamp(48px, 8vw, 92px);
  line-height: .96;
  text-transform: uppercase;
  letter-spacing: .01em;
}
.hero h1 .line-2{ color: var(--gold); }

.hero p.hero-sub{
  margin-top: 26px;
  font-size: 19px;
  color: rgba(255,255,255,.82);
  max-width: 480px;
}
.hero-ctas{
  margin-top: 40px;
  display:flex;
  flex-wrap:wrap;
  gap: 16px;
}
.hero-scroll{
  position:absolute;
  bottom: 34px; left:24px;
  z-index:2;
  display:flex; align-items:center; gap:10px;
  font-family: var(--font-mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: rgba(255,255,255,.55);
}
.hero-scroll .line{ width:1px; height:36px; background: rgba(255,255,255,.35); position:relative; overflow:hidden; }
.hero-scroll .line::after{ content:""; position:absolute; top:-100%; left:0; width:100%; height:100%; background: var(--gold); animation: scrollLine 2.2s ease-in-out infinite; }
@keyframes scrollLine{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }

.hero-seal{
  position:absolute;
  z-index:2;
  top: 50%;
  right: 6%;
  width: 300px;
  height:auto;
  transform: translateY(-50%);
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.5));
}

@media (max-width: 1024px) and (min-width: 721px){
  .hero{ background-image: url('../img/hero-tablet.jpg'); background-position: center 12%; }
  .hero-seal{ width:170px; top:110px; right:5%; transform:none; }
}

@media (max-width: 720px){
  .hero{ background-image: url('../img/hero-mobile.jpg'); background-position: center top; min-height: 92vh; }
  .hero::before{ background: linear-gradient(180deg, rgba(9,14,24,.25) 0%, rgba(9,14,24,.55) 45%, rgba(9,14,24,.94) 82%, rgba(9,14,24,.98) 100%); }
  .hero-content{ max-width:100%; }
  .hero-scroll{ display:none; }
  .hero-seal{ width:96px; top:98px; right:20px; transform:none; }
}

/* ---------------------------------------------------------------------
   RANGE CARD component — signature card used for the intro offer and
   course packages. Corner-notch echoes a paper target tag.
--------------------------------------------------------------------- */
.range-card{
  position:relative;
  background: var(--navy);
  color:#fff;
  border-radius: var(--radius-m);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px));
  padding: 2px;
}
.range-card-inner{
  background: var(--navy);
  clip-path: inherit;
  padding: 40px;
  position:relative;
}
.range-card::after{
  content:"";
  position:absolute; top:0; right:0; bottom:0; left:0;
  clip-path: inherit;
  padding:1px;
  background: linear-gradient(135deg, var(--gold) 0%, rgba(191,145,0,0) 40%, rgba(191,145,0,0) 60%, var(--gold) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
}
.range-card--light{ background: #fff; color: var(--ink); }
.range-card--light .range-card-inner{ background:#fff; }

/* ---------------------------------------------------------------------
   OFFER BANNER
--------------------------------------------------------------------- */
.offer{
  position:relative;
  padding: 80px 0;
  background: var(--bg-dark);
  overflow:hidden;
}
.offer-card{ display:grid; grid-template-columns: 1.3fr 1fr; gap:0; align-items:stretch; }
.offer-info{ padding-right: 40px; }
.offer-badge{
  display:inline-block;
  font-family: var(--font-mono);
  font-size:12px;
  letter-spacing:.16em;
  color: var(--ink);
  background: var(--gold);
  padding: 6px 14px;
  border-radius: 3px;
  margin-bottom: 22px;
}
.offer-info h3{
  font-size: clamp(26px, 3.4vw, 36px);
  color:#fff;
  line-height:1.15;
  margin-bottom: 16px;
}
.offer-info p{ color: rgba(255,255,255,.75); font-size:16px; max-width:460px; }
.offer-list{ margin-top: 28px; display:flex; flex-direction:column; gap:14px; }
.offer-list li{ display:flex; align-items:center; gap:14px; font-family: var(--font-display); font-size:16px; letter-spacing:.02em; color:#fff; }
.offer-list li .crosshair{ color: var(--gold-bright); }

.offer-price-block{
  border-left: 1px solid rgba(255,255,255,.18);
  padding-left: 40px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  gap:18px;
}
.offer-price-label{ font-family: var(--font-mono); font-size:12px; letter-spacing:.16em; color: rgba(255,255,255,.55); text-transform:uppercase; }
.offer-price-row{ display:flex; align-items:baseline; gap:14px; }
.offer-price-strike{ font-family: var(--font-display); font-size: 30px; color: rgba(255,255,255,.4); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: rgba(226,60,60,.85); }
.offer-price{ font-family: var(--font-display); font-size: 72px; color: var(--gold-bright); line-height:1; }
.offer-price-unit{ font-family: var(--font-mono); font-size:13px; color: rgba(255,255,255,.6); margin-top:-8px; }
.offer-promo-note{ font-family: var(--font-mono); font-size:12.5px; color: var(--gold-bright); background: rgba(191,145,0,0.15); border:1px solid rgba(191,145,0,0.4); padding:6px 12px; border-radius:20px; margin-top:6px; }

@media (max-width: 860px){
  .offer-card{ grid-template-columns: 1fr; }
  .offer-info{ padding-right:0; }
  .offer-price-block{ border-left:none; border-top:1px solid rgba(255,255,255,.18); padding-left:0; padding-top:30px; margin-top:30px; }
}

/* ---------------------------------------------------------------------
   PILLARS (split panels)
--------------------------------------------------------------------- */
.pillars{ background: var(--bg-light); }
.pillars-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.pillar{
  position:relative;
  min-height: 460px;
  border-radius: var(--radius-m);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding: 40px;
  color:#fff;
  background-size:cover;
  background-position:center;
}
.pillar::before{
  content:"";
  position:absolute; top:0; right:0; bottom:0; left:0;
  background: linear-gradient(0deg, rgba(9,14,24,.94) 8%, rgba(9,14,24,.55) 55%, rgba(9,14,24,.25) 100%);
}
.pillar > *{ position:relative; z-index:1; }
.pillar-label{
  font-family: var(--font-mono);
  font-size:12px;
  letter-spacing:.18em;
  color: var(--gold-bright);
  margin-bottom:14px;
}
.pillar h3{ font-size: clamp(24px, 2.6vw, 32px); margin-bottom:14px; }
.pillar p{ color: rgba(255,255,255,.8); max-width: 380px; margin-bottom: 24px; }
.pillar-link{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--font-display);
  font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  color:#fff;
  border-bottom: 1.5px solid var(--gold);
  padding-bottom:4px;
  width:fit-content;
}
.pillar-link .arrow{ transition: transform .2s ease; }
.pillar:hover .pillar-link .arrow{ transform: translateX(5px); }

@media (max-width:820px){ .pillars-grid{ grid-template-columns:1fr; } .pillar{ min-height:380px; } }

/* ---------------------------------------------------------------------
   STATS STRIP
--------------------------------------------------------------------- */
.stats-strip{
  position:relative;
  background: var(--navy);
  color:#fff;
  overflow:hidden;
}
.stats-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  position:relative; z-index:1;
}
.stat{
  padding: 56px 40px;
  border-left: 1px solid rgba(255,255,255,.14);
}
.stat:first-child{ border-left:none; }
.stat-label{ font-family: var(--font-mono); font-size:11px; letter-spacing:.16em; color: var(--gold-bright); text-transform:uppercase; margin-bottom:14px; }
.stat-value{ font-family: var(--font-display); font-size: 34px; margin-bottom:8px; }
.stat-sub{ font-size:14px; color: rgba(255,255,255,.65); }
@media (max-width: 780px){
  .stats-grid{ grid-template-columns:1fr; }
  .stat{ border-left:none; border-top:1px solid rgba(255,255,255,.14); }
  .stat:first-child{ border-top:none; }
}

/* ---------------------------------------------------------------------
   INSTRUCTOR TEASER / SECTION
--------------------------------------------------------------------- */
.instructor{ background:#fff; }
.instructor-grid{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items:center; }
.instructor-photo{ position:relative; }
.instructor-photo img{ border-radius: var(--radius-m); width:100%; }
.instructor-photo .badge-cert{
  position:absolute;
  bottom:-24px; left:-24px;
  background: var(--gold);
  color: var(--ink);
  padding: 16px 20px;
  border-radius: var(--radius-s);
  font-family: var(--font-mono);
  font-size:12px;
  letter-spacing:.04em;
  max-width: 210px;
  box-shadow: var(--shadow-card);
}
.instructor-photo .badge-cert strong{ display:block; font-family:var(--font-display); font-size:16px; letter-spacing:.02em; margin-bottom:3px; }
.instructor-name{ font-size: clamp(30px,3.4vw,42px); margin-bottom:6px; }
.instructor-role{ font-family: var(--font-mono); font-size:13px; letter-spacing:.1em; color: var(--gold); text-transform:uppercase; margin-bottom:20px; display:block; }
.instructor-body p{ color: var(--text-onlight-muted); font-size:16px; margin-bottom:14px; }

@media (max-width:860px){
  .instructor-grid{ grid-template-columns:1fr; gap:70px 0; }
  .instructor-photo{ max-width:340px; margin: 0 auto 20px; }
}

/* ---------------------------------------------------------------------
   GALLERY (masonry-ish grid)
--------------------------------------------------------------------- */
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 190px;
  gap: 14px;
}
.gallery-grid img{ width:100%; height:100%; object-fit:cover; border-radius: var(--radius-s); transition: transform .4s ease; }
.gallery-item{ overflow:hidden; border-radius:var(--radius-s); }
.gallery-item:hover img{ transform: scale(1.06); }
.gallery-item.tall{ grid-row: span 2; }
@media (max-width: 900px){
  .gallery-grid{ grid-template-columns: repeat(2,1fr); grid-auto-rows:160px; }
}

/* ---------------------------------------------------------------------
   CTA FINAL BAND
--------------------------------------------------------------------- */
.cta-final{
  background: var(--gold);
  color: var(--ink);
  position:relative;
  overflow:hidden;
}
.cta-final-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 40px;
  flex-wrap:wrap;
  padding: 64px 0;
}
.cta-final h2{ font-size: clamp(26px,3.2vw,38px); max-width:560px; }
.cta-final p{ margin-top:10px; font-size:16px; color:rgba(16,19,28,.75); }
.cta-final-actions{ display:flex; gap:16px; flex-wrap:wrap; }

/* ---------------------------------------------------------------------
   FOOTER
--------------------------------------------------------------------- */
.site-footer{ background: var(--navy-deep); color: rgba(255,255,255,.65); padding: 72px 0 28px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; margin-bottom: 56px; }
.footer-brand{ display:flex; gap:14px; align-items:flex-start; margin-bottom:18px; }
.footer-brand img{ height:48px; }
.footer-brand-word{ font-family: var(--font-display); color:#fff; font-size:15px; letter-spacing:.05em; text-transform:uppercase; line-height:1.3; }
.footer p{ font-size:14px; line-height:1.7; max-width:320px; }
.footer h4{ color:#fff; font-size:13px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:20px; font-family:var(--font-mono); }
.footer ul{ display:flex; flex-direction:column; gap:12px; }
.footer a:hover{ color:#fff; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding-top:26px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; font-size:13px; }
.footer-disclaimer{ font-size:12px; color: rgba(255,255,255,.4); max-width:700px; margin-top:10px; }
.footer-langs{ display:flex; gap:10px; }
.footer-langs a{ font-family:var(--font-mono); font-size:12px; }

@media (max-width: 860px){
  .footer-grid{ grid-template-columns:1fr; gap:36px; }
}

/* ---------------------------------------------------------------------
   GENERIC PAGE HERO (interior pages)
--------------------------------------------------------------------- */
.page-hero{
  position:relative;
  background: var(--navy-deep);
  color:#fff;
  padding: 168px 0 88px;
  overflow:hidden;
}
.page-hero .container{ position:relative; z-index:1; }
.page-hero h1{ font-size: clamp(34px, 5vw, 56px); max-width: 760px; line-height:1.08; margin-top:4px; }
.page-hero p{ margin-top:20px; font-size:17px; color: rgba(255,255,255,.75); max-width: 600px; }
.page-hero-bg{ position:absolute; top:0; right:0; bottom:0; left:0; background-size:cover; background-position:center; opacity:.22; }
.page-hero-fade{ position:absolute; top:0; right:0; bottom:0; left:0; background: linear-gradient(180deg, rgba(9,14,24,.4), var(--navy-deep) 92%); }

/* ---------------------------------------------------------------------
   WHY-CARDS (4-up icon cards)
--------------------------------------------------------------------- */
.why-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:24px; }
.why-card{ background:#fff; border:1px solid var(--line-onlight); border-radius: var(--radius-m); padding: 32px 26px; }
.why-card .crosshair{ color: var(--gold); margin-bottom:20px; --size:30px; }
.why-card .crosshair::before{ height:14px; top:-5px; }
.why-card .crosshair::after{ width:14px; left:-5px; }
.why-card h4{ font-size:17px; margin-bottom:10px; }
.why-card p{ font-size:14.5px; color: var(--text-onlight-muted); }
@media (max-width:900px){ .why-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .why-grid{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------------------
   PACKAGE CARDS (course packages, "range card" light variant)
--------------------------------------------------------------------- */
.packages-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:22px; }
.pkg-card{
  background:#fff;
  border: 1px solid var(--line-onlight);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius-m);
  padding: 30px 26px;
  display:flex;
  flex-direction:column;
  height:100%;
}
.pkg-index{ font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; color: var(--gold); margin-bottom:14px; }
.pkg-card h4{ font-size:19px; margin-bottom:10px; }
.pkg-card > p.pkg-desc{ font-size:14.5px; color: var(--text-onlight-muted); margin-bottom:22px; flex-grow:1; }
.pkg-data{ border-top:1px dashed var(--line-onlight); padding-top:18px; display:flex; flex-direction:column; gap:8px; margin-bottom:22px; }
.pkg-data-row{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:12.5px; }
.pkg-data-row span:first-child{ color: var(--text-onlight-muted); letter-spacing:.05em; text-transform:uppercase; }
.pkg-data-row span:last-child{ color: var(--navy); font-weight:700; }
.pkg-card--featured{
  border-color: var(--gold);
  border-top-width: 3px;
  box-shadow: 0 20px 40px -24px rgba(191,145,0,0.45);
  position:relative;
}
.pkg-card--featured .pkg-index{ color: var(--gold); }
@media (max-width:980px){ .packages-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .packages-grid{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------------------
   VIDEO SHOWCASE (Cursos page)
--------------------------------------------------------------------- */
.video-showcase{ display:grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; align-items:center; }
.video-frame{
  position:relative;
  border-radius: var(--radius-m);
  overflow:hidden;
  border: 2px solid var(--gold);
  box-shadow: var(--shadow-card);
  aspect-ratio: 9/16;
  max-width: 340px;
  margin: 0 auto;
  background: #000;
}
.video-frame video{ width:100%; height:100%; object-fit:cover; display:block; }

.video-points{ display:flex; flex-direction:column; gap:26px; }
.video-point{ display:flex; gap:18px; align-items:flex-start; }
.video-point .crosshair{ margin-top:4px; color: var(--gold); flex-shrink:0; }
.video-point h4{ font-size:17px; color:#fff; margin-bottom:4px; }
.video-point p{ font-size:14.5px; color: rgba(255,255,255,.68); }

.video-badge-row{
  margin-top:8px;
  display:flex;
  align-items:center;
  gap:16px;
  background: rgba(191,145,0,0.12);
  border: 1px solid rgba(191,145,0,0.4);
  border-radius: var(--radius-s);
  padding: 16px 20px;
}
.video-badge-row strong{ display:block; color: var(--gold-bright); font-family:var(--font-display); font-size:15px; letter-spacing:.02em; }
.video-badge-row span{ font-size:13.5px; color: rgba(255,255,255,.65); }

.video-bottom-line{
  margin-top:8px;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing:.03em;
  color: var(--gold-bright);
  text-transform:uppercase;
}

@media (max-width: 860px){
  .video-showcase{ grid-template-columns:1fr; gap:36px; }
}
.services-list{ display:flex; flex-direction:column; }
.service-row{
  display:grid;
  grid-template-columns: 100px 1fr 1fr;
  gap: 40px;
  align-items:center;
  padding: 44px 0;
  border-top: 1px solid var(--line-onlight);
}
.service-row:last-child{ border-bottom: 1px solid var(--line-onlight); }
.service-num{ font-family: var(--font-display); font-size:48px; color: rgba(32,56,100,.15); }
.service-copy h3{ font-size: 24px; margin-bottom:12px; }
.service-copy p{ color: var(--text-onlight-muted); font-size:15.5px; }
.service-img{ border-radius: var(--radius-m); overflow:hidden; aspect-ratio: 4/3; }
.service-img img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:900px){
  .service-row{ grid-template-columns: 1fr; gap:20px; }
  .service-num{ font-size:32px; }
  .service-img{ order:-1; }
}

/* ---------------------------------------------------------------------
   VALUES GRID (nosotros page)
--------------------------------------------------------------------- */
.values-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; }
.value-card{ padding: 30px 0; border-top:2px solid var(--gold); }
.value-card h4{ font-size:18px; margin-bottom:10px; }
.value-card p{ font-size:14.5px; color: var(--text-onlight-muted); }
@media (max-width:780px){ .values-grid{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------------------
   CERTIFICATE BLOCK (nosotros page)
--------------------------------------------------------------------- */
.cert-block{ display:grid; grid-template-columns: 1fr 1fr; gap:56px; align-items:center; }
.cert-block img{ border-radius: var(--radius-m); box-shadow: var(--shadow-card); }
.cert-copy .eyebrow{ color: var(--gold-bright); }
.cert-copy h3{ font-size: clamp(22px,2.6vw,30px); color:#fff; margin-bottom: 10px; }
.cert-copy .cert-role{ font-family: var(--font-mono); color: var(--silver); font-size:14px; margin-bottom:6px; }
.cert-copy .cert-date{ font-family: var(--font-mono); color: rgba(255,255,255,.5); font-size:13px; }
@media (max-width:860px){ .cert-block{ grid-template-columns:1fr; gap:36px; } }

/* ---------------------------------------------------------------------
   CONTACT PAGE
--------------------------------------------------------------------- */
.contact-grid{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; }
.contact-info-card{ background: var(--navy); color:#fff; border-radius: var(--radius-m); padding: 40px; height:fit-content; }
.contact-info-row{ display:flex; gap:16px; padding: 20px 0; border-top:1px solid rgba(255,255,255,.14); }
.contact-info-row:first-child{ border-top:none; padding-top:0; }
.contact-info-row .ci-icon{ color: var(--gold-bright); flex-shrink:0; margin-top:3px; }
.contact-info-row .ci-label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color: rgba(255,255,255,.5); margin-bottom:4px; }
.contact-info-row .ci-value{ font-size:15.5px; }
.contact-info-row a:hover{ color: var(--gold-bright); }

.form-group{ margin-bottom: 20px; }
.form-group label{ display:block; font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color: var(--text-onlight-muted); margin-bottom:8px; }
.form-group input, .form-group select, .form-group textarea{
  width:100%;
  padding: 13px 16px;
  border: 1.5px solid var(--line-onlight);
  border-radius: var(--radius-s);
  font-family: var(--font-body);
  font-size:15px;
  background:#fff;
  color: var(--ink);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{
  outline:none;
  border-color: var(--navy);
}
.form-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-alert{ padding:16px 18px; border-radius: var(--radius-s); font-size:14.5px; margin-bottom:24px; }
.form-alert--success{ background:#e7f4ea; color:#1f6b34; border:1px solid #bfe3c8; }
.form-alert--error{ background:#fbeaea; color:#a3312e; border:1px solid #f2c6c5; }

.map-embed{ border-radius: var(--radius-m); overflow:hidden; margin-top:32px; border:1px solid var(--line-onlight); }
.map-embed iframe{ width:100%; height:340px; border:0; display:block; }

@media (max-width:900px){
  .contact-grid{ grid-template-columns:1fr; }
  .form-row-2{ grid-template-columns:1fr; }
}

/* ---------------------------------------------------------------------
   UTILITIES
--------------------------------------------------------------------- */
.mt-0{ margin-top:0 !important; }
.text-center{ text-align:center; }
.visually-hidden{
  position:absolute !important;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
}