/* ── COMPONENT VARIABLES (from cursos.php) ── */
:root {
  --navy:       #1E3A5F;
  --navy-deep:  #152B47;
  --sky:        #4A8EC4;
  --sky-light:  #7FB3D9;
  --sky-pale:   #C8DFF0;
  --sky-ultra:  #EAF3FB;
  --white:      #FFFFFF;
  --ink:        #0D1E30;
  --ink-soft:   #2A4060;
  --muted:      #6A88A8;
  --border:     rgba(74,142,196,0.14);
  --shadow:     0 4px 32px rgba(30,58,95,0.10);
}

/* ── HERO COMPONENT STYLES ── */
.page-hero {
  background: var(--ink);
  padding: 72px 28px 0;
  position: relative; overflow: hidden;
}
.page-hero-inner {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: flex-end; gap: 40px;
}
.page-hero-text { padding-bottom: 64px; }
.hero-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.73rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--sky-light); background: rgba(74,142,196,0.18);
  padding: 5px 14px; border-radius: 100px; margin-bottom: 22px;
}
.hero-pill::before { content:''; width:6px; height:6px; background:var(--sky-light); border-radius:50%; }
.page-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.2rem, 3.8vw, 3.2rem);
  line-height: 1.1; letter-spacing: -0.03em; color: white; margin-bottom: 18px;
}
.page-hero h1 em { font-style: italic; color: var(--sky-light); }
.page-hero-desc {
  font-size: 1rem; font-weight: 300;
  color: rgba(214,230,244,0.62); line-height: 1.85; max-width: 460px;
}

/* Geo visual */
.hero-geo { align-self: flex-end; display: flex; justify-content: flex-end; }
.hero-geo svg { width: 360px; height: 240px; opacity: 0.32; }

/* Animations */
@keyframes spinSlow  { from{transform-origin:center;transform:rotate(0deg)}   to{transform-origin:center;transform:rotate(360deg)} }
@keyframes spinRev   { from{transform-origin:center;transform:rotate(0deg)}   to{transform-origin:center;transform:rotate(-360deg)} }
@keyframes floatUp   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }

/* Responsive */
@media (max-width: 768px) {
  .page-hero-inner {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .hero-geo {
    justify-content: center;
    margin-top: 20px;
  }
}