/* ===== Paleta Altitud 100K (azul/amarillo) ===== */
:root{
  --navy:#02183D;
  --ink:#FFFFFF;
  --muted:#B8C6E3;
  --yellow:#FFD66B;
  --yellow-2:#F9C94A;
  --blue:#58C6FF;
  --surface:#0B1430;
  --outline:#ffffff22;
  --radius:16px;
  --shadow: 0 18px 40px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--navy);
  color:var(--ink);
  font-family: system-ui, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  line-height:1.55;
}

/* Tipos */
h1,h2,h3{ margin:0 0 10px; font-weight:900; letter-spacing:.3px }
h1{ font-size:clamp(36px,6vw,64px); line-height:1.1 }
h2{ font-size:clamp(24px,3.6vw,36px) }
h3{ font-size:clamp(18px,2.3vw,22px) }
p{ margin:0 0 10px }
.center{ text-align:center }
.muted{ color:var(--muted) }
.bump{ margin-top:18px }

.wrap{ max-width:1100px; margin:0 auto; padding:0 20px }

/* ===== Topbar ===== */
.topbar{
  position:sticky; top:0; z-index:30;
  background:linear-gradient(180deg,#020a1dcc,#020a1d99 70%,transparent);
  border-bottom:1px solid var(--outline);
  backdrop-filter: blur(6px);
}
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; height:68px }
.brand{ display:flex; gap:10px; align-items:center; text-decoration:none; color:var(--ink) }
.brand-logo{ width:36px; height:36px; object-fit:contain }
.brand-text{ font-weight:900; letter-spacing:1px }
.brand-text span{ color:var(--yellow) }

.mainnav{ display:flex; gap:18px; align-items:center }
.mainnav a{ color:var(--ink); text-decoration:none; opacity:.92; text-transform:uppercase; letter-spacing:.06em; font-weight:800 }
.mainnav a:hover{ opacity:1; color:var(--yellow) }

/* ===== Botones ===== */
.btn{
  display:inline-block;
  background:linear-gradient(180deg,var(--yellow),var(--yellow-2));
  color:#1a1600;
  padding:12px 16px;
  border-radius:12px;
  text-decoration:none;
  font-weight:900;
  border:1px solid transparent;
  box-shadow: 0 10px 24px rgba(255,214,107,.2);
  transition: transform .15s ease, filter .15s ease;
}
.btn:hover{ transform:translateY(-1px); filter:brightness(1.02) }
.btn.small{ padding:8px 12px }
.btn.ghost{
  background:transparent; color:var(--ink);
  border-color:#ffffff44; box-shadow:none;
}

/* ===== Hero ===== */
.hero-bootcamp{
  position:relative; overflow:hidden;
  border-bottom:1px solid var(--outline);
  /* fondo sutil para contraste del canvas */
  background:
    radial-gradient(1200px 500px at 70% -10%, #ffffff0a, transparent 60%),
    linear-gradient(180deg,#00000020,transparent 40%),
    var(--navy);
}
.hero-grid{
  position:relative; z-index:2;
  display:grid; gap:28px; align-items:center;
  grid-template-columns: 1.15fr .85fr;
  padding:72px 0 88px;
}
.hero-copy .subtitle{ color:var(--yellow); font-weight:800; margin-top:-6px; margin-bottom:6px }
.hero-copy .lead{ color:#c9d4ee; max-width:720px }
.cta-row{ display:flex; gap:12px; margin-top:10px; flex-wrap:wrap }

.hero-media{ display:flex; justify-content:flex-end }
.hero-media img{
  max-width:360px; width:100%;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.35));
}

/* Canvas detrás del contenido */
#fx{
  position:absolute; inset:0; z-index:1;
  pointer-events:none; mix-blend-mode:screen; opacity:.9;
}

/* Separador ondulado */
.divider{ position:absolute; left:0; right:0; color:var(--navy); }
.divider-bottom{ bottom:-1px; transform:translateY(1px); }
.divider svg{ width:100%; height:80px; display:block }

/* ===== Secciones ===== */
.section{ padding:64px 0; position:relative; }
.section.alt{
  background:#ffffff07;
  border-top:1px solid var(--outline);
  border-bottom:1px solid var(--outline);
}

/* Tarjetas */
.cards{
  display:grid; gap:18px;
  grid-template-columns: repeat(3, 1fr);
  margin-top:14px;
}
.cards.cards-4{ grid-template-columns: repeat(4, 1fr) }
.card{
  background:var(--surface);
  border:1px solid var(--outline);
  border-radius: var(--radius);
  padding:18px;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover{ transform:translateY(-2px); box-shadow: var(--shadow); }
.card h3{ margin-bottom:6px }

.split{ display:grid; gap:24px; grid-template-columns: 1.2fr .8fr; align-items:center }
.pill-list{ list-style:none; padding:0; margin:10px 0 0; display:grid; gap:10px }
.pill-list li{
  border:1px solid var(--outline);
  border-radius:999px;
  padding:10px 12px;
  background:#0f1a3b;
}
.checklist ul{ margin:8px 0 0 18px; padding:0 }
.checklist li{ margin:6px 0 }

/* Footer */
.foot{ border-top:1px solid var(--outline); padding:20px 0; color:#c2cee8; background:#061232 }
.foot-flex{ display:flex; align-items:center; justify-content:space-between; gap:16px }
.foot-nav{ display:flex; gap:14px }
.foot-nav a{ color:#c2cee8; text-decoration:none; font-weight:700 }
.foot-nav a:hover{ color:#fff }

/* ===== Responsive ===== */
@media (max-width: 1024px){
  .cards{ grid-template-columns: 1fr 1fr }
  .cards.cards-4{ grid-template-columns: 1fr 1fr }
}
@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; padding:56px 0 72px }
  .hero-media{ justify-content:center }
  .hero-media img{ max-width:280px }
  .split{ grid-template-columns: 1fr }
}
@media (max-width: 560px){
  .cards{ grid-template-columns: 1fr }
  .cards.cards-4{ grid-template-columns: 1fr }
}


/* ===== Firma inline en el footer ===== */
.foot-flex{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;                 /* permite que salte a dos líneas en móvil */
}

/* Texto del copy + firma en la misma línea */
.foot-copy{
  display:flex;
  align-items:center;
  gap:0;
  color: var(--muted, #9FB3D1);
  opacity:.92;
}

/* Separador sutil entre copy y firma */
.foot-copy .sig{
  margin-left:12px;
  padding-left:12px;
  border-left:1px dashed var(--outline, #ffffff22);
  opacity:.85;
  white-space:nowrap;
}

.foot-copy .sig a{
  color:inherit;
  text-decoration:none;
  border-bottom:1px dotted currentColor;
}

.foot-copy .sig a:hover{
  color: var(--ink, #ffffff);
  border-bottom-color: transparent;
}

/* En pantallas pequeñas, deja que todo respire */
@media (max-width:640px){
  .foot-flex{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:10px;
  }

  .foot-copy .sig{
    margin-left:10px;
    padding-left:10px;
    border-left-color: transparent;   /* sin barra en móvil */
    border-top:1px dashed var(--outline, #ffffff22);
    margin-top:6px;
    padding-top:6px;
  }
}