/* ===========================
   Altitud 100K — Bootcamp + Insight AI
   =========================== */

/* ====== Paleta y base ====== */
:root{
  --bg:#02183D;
  --ink:#FFFFFF;
  --muted:#9FB3D1;
  --brand:#F21651;
  --brand-2:#F9921C;
  --brand-4:#913793;
  --surface:#0B1430;
  --outline:#ffffff22;
  --radius:14px;

  --hero-left:#06223e;
  --hero-right:#ffa17f;

  --tb-glow-size: 520px;
  --tb-glow-color: rgba(242,22,81,.55);
  --topbar-h: 64px;

  --hero-logo-top: 50%;
  --hero-logo-right: clamp(12px, 3vw, 28px);
  --hero-logo-w: clamp(300px, 14vw, 400px);
  --hero-logo-tx: 0;
  --hero-logo-ty: -50%;
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family: system-ui, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  line-height:1.5;
}
h1,h2,h3{ font-weight:800; margin:0 0 10px; letter-spacing:.2px }
h1{ font-size:clamp(38px,6vw,72px); line-height:1.1 }
h2{ font-size:clamp(22px,3.5vw,38px) }
h3{ font-size:clamp(18px,2.2vw,22px) }
p{ margin:0 0 10px }
.muted{ color:var(--muted) }
.small-muted{ color:var(--muted); font-size:14px; margin-top:4px }
.wrap{ max-width:1100px; margin:0 auto; padding:0 20px }

/* ====== Botones ====== */
.btn{
  display:inline-block;
  background:var(--brand);
  color:#fff;
  padding:12px 16px;
  border-radius:12px;
  text-decoration:none;
  font-weight:800;
  border:1px solid transparent;
  transition: transform .15s ease, filter .15s ease;
}
.btn:hover{ transform:translateY(-1px); filter:brightness(1.05) }
.btn.small{ padding:8px 12px }
.btn.ghost{ background:transparent; color:#fff; border-color:#ffffff55 }

/* ====== Topbar ====== */
.topbar{
  position:sticky; top:0; z-index:20;
  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:64px }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff }
.brand-logo{ width:36px; height:36px; object-fit:contain }
.brand-text{ font-weight:900; letter-spacing:1px }
.brand-text span{ color:var(--brand) }
.mainnav{ display:flex; gap:18px; align-items:center }
.mainnav a{ color:#fff; opacity:.9; text-decoration:none; text-transform:uppercase; letter-spacing:.06em }
.mainnav a:hover{ opacity:1; color:var(--brand) }

/* ====== HERO ====== */
.hero-bootcamp{
  position:relative;
  min-height: calc(100svh - var(--topbar-h));
  min-height: calc(100vh - var(--topbar-h));
  display:flex; align-items:center;
  border-bottom:1px solid var(--outline);
  overflow:hidden;
  background: linear-gradient(90deg, var(--hero-left) 0%, var(--hero-right) 100%);
  isolation:isolate;
}
.hero-bootcamp::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 600px at 15% 40%, rgba(2,24,61,.75), rgba(2,24,61,.35) 60%, rgba(2,24,61,.25) 75%, rgba(2,24,61,.15) 100%),
    linear-gradient(90deg, rgba(2,24,61,.85) 0%, rgba(2,24,61,.55) 40%, rgba(2,24,61,.35) 100%);
  z-index:0;
}

/* Campo estelar */
#universe{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  mix-blend-mode:screen;
}
.star0,.star1,.star2,.star3{
  position:absolute;
  background:#fff;
  border-radius:50%;
  opacity:.9;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.35));
}
.star0{ width:1px; height:1px; opacity:.8 }
.star1{ width:2px; height:2px }
.star2{ width:3px; height:3px }
.star3{ width:4px; height:4px }

/* Contenido hero */
.hero-grid{
  position:relative; z-index:3;
  display:grid; gap:28px;
  grid-template-columns: 1.2fr .8fr;
  padding:64px 0;
}
.hero-content{
  max-width:800px;
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}
.subtitle{ color:var(--brand-2); margin-top:6px }
.lead{ color:var(--muted); margin-top:10px; max-width:760px }
.cta-row{ display:flex; gap:12px; margin-top:16px }

/* Logo flotante */
.hero-bootcamp .hero-art{
  position:absolute;
  right: var(--hero-logo-right);
  top: var(--hero-logo-top);
  transform: translate(var(--hero-logo-tx), var(--hero-logo-ty));
  z-index:2;
  pointer-events:none;
}
#heroLogo{
  width: var(--hero-logo-w);
  height: auto;
  max-width: none;
  object-fit: contain;
  display:block;
  filter:
    drop-shadow(0 20px 48px rgba(242,22,81,.30))
    drop-shadow(0 0 64px   rgba(242,22,81,.35))
    drop-shadow(0 0 12px   rgba(255,255,255,.40));
}
.hero-bootcamp .hero-art::after{
  content:"";
  position:absolute; inset:0; margin:auto;
  width: var(--tb-glow-size); height: var(--tb-glow-size);
  border-radius:50%;
  background: radial-gradient(
    circle,
    var(--tb-glow-color) 0%,
    rgba(242,22,81,.28) 30%,
    rgba(242,22,81,.12) 55%,
    rgba(242,22,81,0) 70%
  );
  filter: blur(24px);
  z-index:-1;
  transform: translate(18%, -6%);
  animation: tbGlowPulse 6s ease-in-out infinite alternate;
}
@keyframes tbGlowPulse{
  from{ opacity:.85; transform: translate(18%,-6%) scale(0.94); }
  to  { opacity:1;   transform: translate(18%,-6%) scale(1.04); }
}

/* ====== Secciones / cards ====== */
.section{ padding:64px 0 }
.section.alt{ background:#ffffff08; border-top:1px solid var(--outline); border-bottom:1px solid var(--outline) }
.cards{ display:grid; gap:18px; grid-template-columns:repeat(3,1fr); margin-top:14px }

.card{
  display:block;
  background:var(--surface);
  border:1px solid var(--outline);
  border-radius:var(--radius);
  padding:18px;
  color:var(--ink);
  text-decoration:none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 26px #00000040;
  border-color:#ffffff33;
}
.card h3{ margin-bottom:6px; color:var(--ink) }
.card p{ color:var(--muted) }
.linkish{
  display:inline-block; margin-top:8px;
  color:var(--muted); text-decoration:none;
}
.card:hover .linkish{ color:#fff }

.split{ display:grid; gap:24px; grid-template-columns:1.2fr .8fr; align-items:center }
.center{ text-align:center }

/* ====== Footer ====== */
.foot{ border-top:1px solid var(--outline); padding:20px 0; color:var(--muted) }
.foot-flex{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap }
.foot-nav{ display:flex; gap:14px }
.foot-nav a{ color:var(--muted); text-decoration:none }
.foot-nav a:hover{ color:#fff }
.foot-copy{ display:flex; align-items:center; gap:0; color: var(--muted); opacity:.92 }
.foot-copy .sig{
  margin-left:12px; padding-left:12px; border-left:1px dashed var(--outline); 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); border-bottom-color: transparent }

/* Utils */
.mt-1{ margin-top:8px }
.mt-2{ margin-top:16px }
.mt-3{ margin-top:24px }

/* Grids */
.grid-2{ display:grid; gap:24px; grid-template-columns:1.1fr .9fr }
.grid-3{ display:grid; gap:18px; grid-template-columns:repeat(3,1fr) }
.grid-4{ display:grid; gap:18px; grid-template-columns:repeat(4,1fr) }

/* Feature cards */
.feature{ position:relative; padding-top:26px }
.badge{
  position:absolute; top:12px; right:12px;
  font-size:12px; letter-spacing:.04em;
  padding:6px 10px; border-radius:999px;
  background:#0f1a3b; border:1px solid var(--outline); color:#fff;
}

/* Steps */
.steps .step{
  background:var(--surface); border:1px solid var(--outline);
  border-radius:var(--radius); padding:18px;
}
.step-num{
  width:36px; height:36px; border-radius:50%;
  display:inline-grid; place-items:center; font-weight:900;
  background:linear-gradient(135deg,var(--brand),#ff4d7e); color:#fff; margin-bottom:10px;
}

/* Timeline */
.timeline{ list-style:none; padding:0; margin:12px 0 0; border-left:2px dashed var(--outline) }
.t-item{ display:grid; grid-template-columns:90px 1fr; gap:14px; padding:14px 0 14px 14px; position:relative }
.t-item::before{
  content:""; position:absolute; left:-7px; top:24px; width:12px; height:12px; border-radius:50%;
  background:var(--brand); box-shadow:0 0 0 6px rgba(242,22,81,.18);
}
.t-time{ font-weight:800; color:var(--muted) }
.t-body h3{ margin-bottom:6px }
.chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px }
.chip{
  font-size:12px; padding:6px 10px; border-radius:999px;
  background:#0f1a3b; border:1px solid var(--outline); color:#fff;
}

/* Panels */
.panel{
  background:var(--surface); border:1px solid var(--outline);
  border-radius:var(--radius); padding:18px;
}
.panel.right{ align-self:start }
.check{ margin:10px 0 0; padding-left:18px }
.check li{ margin:6px 0 }

/* Stat box */
.statbox{
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px;
  background:#0f1a3b; border:1px solid var(--outline); border-radius:12px; padding:10px;
}
.statbox div{ text-align:center }
.statbox strong{ font-size:22px; display:block }
.statbox span{ font-size:12px; color:var(--muted) }

/* Pricing */
.price-cards .price-card{
  background:var(--surface); border:1px solid var(--outline);
  border-radius:var(--radius);
  padding:18px; display:flex; flex-direction:column; gap:12px
}
.pc-pop{ box-shadow:0 10px 26px #00000040; transform: translateY(-2px) }
.pc-head{ font-weight:900; letter-spacing:.04em }
.pc-price{ font-size:22px; font-weight:900; color:#fff }
.pc-list{ margin:0; padding-left:18px }

/* Quotes */
.quote{
  background:var(--surface); border:1px solid var(--outline); border-radius:var(--radius);
  padding:18px; font-style:italic; position:relative
}
.quote cite{ display:block; margin-top:8px; color:var(--muted); font-style:normal }

/* FAQ */
.faq details{
  background:var(--surface); border:1px solid var(--outline); border-radius:12px;
  padding:12px 14px; margin:10px 0
}
.faq summary{ cursor:pointer; font-weight:700 }
.faq p{ margin-top:8px }

/* Sticky CTA (mobile) */
.cta-sticky{
  position:fixed; left:0; right:0; bottom:10px; z-index:30;
  display:none; gap:10px; justify-content:center;
}
@media (max-width:720px){
  .cta-sticky{ display:flex }
  .cta-sticky .btn{ padding:12px 16px }
}

/* ====== Responsive ====== */
@media (max-width:1080px){
  .hero-grid{ grid-template-columns:1fr; padding:48px 0 56px }
}
@media (max-width:980px){
  .grid-4{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:880px){
  :root{ --tb-glow-size: 420px; }
}
@media (max-width:720px){
  .cards{ grid-template-columns:1fr }
  .cta-row{ flex-direction:column; align-items:flex-start }
  .hero-bootcamp{ padding:72px 0 140px; }
  .hero-bootcamp .hero-art{
    left:50%; right:auto; top:auto; bottom:1px; transform: translateX(-50%);
  }
  #heroLogo{ width: clamp(150px, 58vw, 260px); }
  .grid-3, .grid-4, .grid-2{ grid-template-columns:1fr }
  .hero-bootcamp::before{
    background:
      radial-gradient(900px 500px at 25% 35%, rgba(2,24,61,.9), rgba(2,24,61,.55) 60%, rgba(2,24,61,.35) 80%, rgba(2,24,61,.25) 100%),
      linear-gradient(180deg, rgba(2,24,61,.75) 0%, rgba(2,24,61,.45) 60%, rgba(2,24,61,.25) 100%);
  }
}
@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;
    border-top:1px dashed var(--outline); margin-top:6px; padding-top:6px;
  }
}
@media (max-width:380px){
  #heroLogo{ width: clamp(130px, 62vw, 220px); }
}

/* Accesibilidad */
a.card:focus-visible{
  outline:3px solid var(--brand);
  outline-offset:4px;
  border-color:transparent;
}

/* Micro interacciones */
.benefits .cards .card:hover{ box-shadow:0 10px 26px #00000040 }
.howitworks .steps .step{ transition:.15s }
.howitworks .steps .step:hover{ transform: translateY(-2px); box-shadow: 0 10px 26px #00000040 }

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

/* ==== Plans – estilo mejorado ==== */
.plans{
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(255,255,255,.04), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}
.price-cards{ align-items:stretch }
.price-card{
  position:relative;
  background: linear-gradient(180deg, rgba(11,20,48,.9), rgba(11,20,48,.86));
  border:1px solid #ffffff1f;
  border-radius:20px;
  padding:22px 20px;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.price-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
  border-color:#ffffff33;
}
.pc-ribbon{
  position:absolute; top:12px; left:12px;
  font-size:12px; letter-spacing:.04em;
  padding:6px 10px; border-radius:999px;
  background:#0f1a3b; border:1px solid #ffffff2c; color:#fff;
}
.pc-ribbon.hit{
  background: linear-gradient(135deg, #F21651, #ff4d7e);
  border-color: transparent;
  box-shadow: 0 8px 18px rgba(242,22,81,.35);
}
.pc-head{
  font-weight:900; letter-spacing:.04em; margin-bottom:6px;
  background: linear-gradient(135deg, #fff, #cfe1ff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pc-price{
  margin:8px 0 10px;
  display:flex; align-items:end; gap:8px; flex-wrap:wrap;
}
.pc-price span{ color:var(--muted); font-weight:700; letter-spacing:.02em }
.pc-price strong{ font-size:28px; line-height:1; color:#fff }
.pc-price small{ color:var(--muted) }
.pc-list{ margin:0 0 14px; padding-left:18px }
.pc-lite { background: linear-gradient(180deg, rgba(11,20,48,.92), rgba(11,20,48,.86)); }
.pc-full { background: linear-gradient(180deg, rgba(20,25,60,.96), rgba(20,25,60,.88)); }
.pc-elite{ background: linear-gradient(180deg, rgba(14,18,46,.96), rgba(14,18,46,.88)); }
.pc-pop{
  outline: 2px solid transparent;
  box-shadow:
    0 10px 28px rgba(0,0,0,.4),
    0 0 0 1px rgba(255,255,255,.06),
    0 0 0 6px rgba(242,22,81,.08);
  transform: translateY(-3px);
}
.price-card .btn{ width:max-content }
.small{ font-size:12px }

/* Cards impacto */
.cards-impact .card.feature{
  display:flex; flex-direction:column; justify-content:space-between;
  min-height:260px;
  background:var(--surface);
  border:1px solid var(--outline);
  border-radius:14px;
  padding:20px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.cards-impact .card.feature:hover{
  transform: translateY(-4px);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  border-color:#ffffff30;
}
.cards-impact .card h3{
  margin-bottom:8px;
}
.cards-impact .card p{
  color:var(--muted);
  flex-grow:1;
}
.cards-impact .card .card-cta{
  display:inline-block;
  margin-top:auto;
  font-weight:700;
  text-decoration:none;
  color:#fff;
  padding:10px 14px;
  border-radius:10px;
  background: var(--brand);
  transition: background .15s ease, transform .15s ease;
}
.cards-impact .card .card-cta:hover{
  background:#ff2f6b;
  transform:translateY(-2px);
}
.cards-impact .card .card-cta i{
  margin-left:6px;
}
.cards-impact .card .badge{
  position:absolute;
  top:10px;
  left:10px;
  right:auto;
  transform:none;
  font-size:12px;
  letter-spacing:.04em;
  padding:5px 10px;
  border-radius:999px;
  background:#0f1a3b;
  border:1px solid var(--outline);
  color:#fff;
  white-space:nowrap;
  z-index:5;
}
.cards-impact .card.feature{
  position:relative;
  padding-top:45px;
}

/* Insight AI ™ */
.insight-ai{
  position: relative;
  display: inline-block;
  padding-right: 0.15em;
}
.insight-ai::after{
  content: "™";
  position: absolute;
  top: 0.2em;
  right: -0.6em;
  font-size: 0.6em;
  font-weight: 800;
  line-height: 1;
  color: currentColor;
  opacity: .95;
}
@media (max-width: 720px){
  .insight-ai::after{
    font-size: 0.4em;
    top: -0.55em;
    right: -0.06em;
  }
}

/* Insight AI – bloque */
.insight-what .badge-line{
  display:inline-block;
  padding:8px 12px;
  border:1px solid var(--outline);
  border-radius:999px;
  background:#0f1a3b;
  color:#fff;
  font-weight:700;
}

/* Tarjetas KPI */
.kpi-cards .kpi{
  position: relative;
  padding-top: 18px;
  min-height: 160px;
}
.kpi-cards .kpi h3{ margin-bottom:6px }
.kpi-tag{
  display:inline-block;
  font-size:12px;
  letter-spacing:.04em;
  padding:6px 10px;
  border-radius:999px;
  background:#0f1a3b;
  border:1px solid var(--outline);
  color:#fff;
  margin-bottom:10px;
  white-space:nowrap;
}
[data-reveal]{ opacity:0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease }
[data-reveal].revealed{ opacity:1; transform: translateY(0) }

/* Lista pills */
.pill-list{ list-style:none; padding:0; margin:10px 0 0; display:flex; flex-wrap:wrap; gap:8px }
.pill-list li{
  font-size:12px; padding:6px 10px; border-radius:999px;
  background:#0f1a3b; border:1px solid var(--outline); color:#fff;
}

/* Panel métricas */
.panel.metrics{
  position: relative;
  overflow: hidden;
  border: 1px solid #ffffff2a;
  background:
    linear-gradient(135deg, rgba(2,24,61,.86), rgba(2,24,61,.70));
  background-size: cover;
  background-position: center;
}
.panel.metrics > *{ position: relative; z-index: 1; }
.panel.metrics::after{
  content:"";
  position:absolute; inset:0;
  box-shadow: inset 0 0 140px rgba(0,0,0,.25);
  z-index: 0;
}
.panel.metrics h3{ color:#fff; }
.panel.metrics .check li strong{ color:#fff; }
.panel.metrics p.muted{ color:#cfe1ff; }

/* Insight IA intro */
.lead-ia{
  max-width: 900px;
  margin: 0 auto 14px;
  font-size: 18px;
}
.value-grid{
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, 1fr);
  margin: 16px auto 8px;
}
.value-card{
  position: relative;
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: 12px;
  padding: 14px 16px;
}
.value-card::before{
  content:"";
  position:absolute; left:-1px; right:-1px; top:-1px; height:3px;
  border-radius:12px 12px 0 0;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
}
.value-card h4{ margin: 0 0 6px; font-size: 16px; }
.value-card p{ margin: 0; color: var(--muted); }

@media (max-width: 980px){
  .value-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .value-grid{ grid-template-columns: 1fr; }
}

/* Responsive Insight AI */
@media (max-width:720px){
  .insight-what .badge-line{ display:block; text-align:center }
  .kpi-cards .kpi{ min-height: auto }
}

/* CTA final */
.cta-final .cta-row{ justify-content:center }

/* ====== Mobile-first overrides ====== */
@media (max-width: 720px){

  .wrap{ padding:0 16px }
  h1{ font-size: clamp(28px, 8vw, 38px); line-height:1.12 }
  h2{ font-size: clamp(20px, 5.2vw, 26px) }
  h3{ font-size: clamp(18px, 4.6vw, 22px) }
  p, .muted{ font-size: 15px }

  .topbar .wrap{ height:56px }
  .brand-logo{ width:30px; height:30px }
  .mainnav a{ display:none }
  .mainnav .btn.small{ display:inline-block }

  .hero-bootcamp{ padding:72px 0 140px }
  .hero-grid{ grid-template-columns:1fr; gap:18px; padding:36px 0 12px }
  .hero-content .cta-row{ flex-direction:column; align-items:stretch }
  .hero-content .btn, .hero-content .btn.ghost{ width:100%; text-align:center }

  #universe{ mix-blend-mode:normal; opacity:.7 }

  .grid-4{ grid-template-columns:1fr }
  .cards-impact .card.feature{
    min-height: auto; padding:18px 16px; border-radius:14px;
  }
  .cards-impact .card .badge{ top:8px; left:8px; font-size:11px; padding:4px 8px }
  .cards-impact .card.feature{ padding-top:44px }
  .cards-impact .card .card-cta{
    width:100%; text-align:center; padding:12px 16px; border-radius:12px;
  }

  .steps{ grid-template-columns:1fr !important }
  .steps .step{ padding:16px }

  .split{ grid-template-columns:1fr; gap:18px }

  .timeline{ border-left:none; margin-top:8px }
  .t-item{ grid-template-columns:70px 1fr; padding-left:0 }
  .t-time{ font-size:14px }

  .statbox{ grid-template-columns:1fr; gap:10px; text-align:center }
  .statbox strong{ font-size:24px }

  .grid-3{ grid-template-columns:1fr }
  .cards .card, .price-cards .price-card{ border-radius:16px }

  .panel{ padding:16px }
  .check li{ margin:8px 0 }

  .price-cards{ grid-template-columns:1fr !important; gap:16px }
  .price-card .btn{ width:100%; text-align:center }
  .pc-price strong{ font-size:26px }

  .cta-sticky{ bottom:12px; gap:12px; padding:0 12px }
  .cta-sticky .btn{ flex:1 }

  .foot-flex{ flex-direction:column; gap:10px; text-align:center }
}
@media (max-width: 480px){

  .hero-bootcamp{ padding:64px 0 128px }
  .lead{ font-size:14.5px }

  .chip, .pill-list li{
    font-size:12px; padding:7px 10px;
  }

  .t-item{ grid-template-columns:1fr; gap:6px }
  .t-item::before{ left:0; top:18px }
  .t-time{ order:-1; color:var(--muted) }

  .quote{ font-size:14.5px; padding:14px }

  .faq details{ padding:10px 12px }
  .faq summary{ font-size:15px }
}
@media (max-width:720px){
  .btn{ filter: none; }
  .btn.ghost{ border-color:#ffffff66 }
}
@media (max-width:720px){
  a, button, .btn, summary{ min-height:44px }
  .card-cta i{ margin-left:8px }
}






/* ============================
   FIXES MOBILE (<= 720 px)
   ============================ */
@media (max-width: 720px){

  /* 1) Botones de la barra superior más pequeños */
  .topbar .btn.small{
    padding: 6px 10px;
    font-size: 13px;
    border-radius: 999px;
  }

  /* 2) Hero: logo sobre los botones y con más espacio abajo */
  .hero-bootcamp{
    /* más espacio abajo para que el logo no quede tapado */
    padding: 72px 0 210px;
  }

  .hero-bootcamp .hero-art{
    left: 50%;
    right: auto;
    top: auto;
    bottom: -50px;             /* baja un poco el logo */
    transform: translateX(-50%);
    z-index: 4;                /* por encima de los botones */
  }

  .hero-content .cta-row .btn{
    padding: 10px 14px;
    font-size: 14px;
  }

  /* 3) Línea de tiempo visible también en celular */
  .timeline{
    border-left: 2px dashed rgba(255,255,255,.4); /* más contraste */
    margin-top: 12px;
    padding-left: 0;
  }

  .t-item{
    grid-template-columns: 90px 1fr;  /* mantenemos dos columnas como en PC */
    gap: 12px;
    padding: 16px 0 16px 16px;        /* dejamos espacio para que no tape la línea */
  }

  .t-time{
    font-size: 14px;
  }
}

/* Ajuste fino para pantallas muy angostas */
@media (max-width: 480px){
  .t-item{
    grid-template-columns: 80px 1fr;
    gap: 10px;
    padding: 14px 0 14px 14px;
  }
}























/* ============================
   FIXES EXTRA MOBILE (<= 720px)
   ============================ */
@media (max-width: 720px){

  /* 1) Topbar más compacta y botones más pequeños */
  .topbar .wrap{
    height: 52px;
  }

  .topbar .btn.small{
    padding: 4px 8px;
    font-size: 11px;
    border-radius: 999px;
  }

  /* 2) Hero: espacio suficiente para ver completo el logo */
  .hero-bootcamp{
    /* más padding inferior para que el logo no se corte */
    padding-bottom: 260px;
  }

  /* Logo centrado y ligeramente más pequeño en móvil */
  .hero-bootcamp .hero-art{
    position: absolute;
    left: 50%;
    right: auto;
    top: auto;
    bottom: 8px;                 /* lo subimos un poco para que no se corte */
    transform: translateX(-50%);
    z-index: 1;
  }

  #heroLogo{
    width: clamp(180px, 54vw, 230px);
    height: auto;
  }

  /* Aseguramos que los 3 botones no se peguen demasiado al logo */
  .hero-content .cta-row{
    margin-top: 18px;
    margin-bottom: 24px;
  }
}