:root{
  --bg:#0f1221; --ink:#0b0e19; --fg:#0f1221; --text:#10131f; --white:#fff;
  --muted:#8c92a6; --brand:#356dff; --brand-2:#6f9bff; --accent:#00d1ff;
  --card:#ffffff; --shadow: 0 10px 30px rgba(5,15,60,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Inter',system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#111;background:#fff;line-height:1.5}

.container{max-width:1180px;margin:0 auto;padding:0 24px}
/* NAV */
.navbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid #f0f2f7}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#111;font-weight:800}
.brand-logo{height:115px}
.nav-links{display:flex;gap:20px}
.nav-links a{color:#111;text-decoration:none;font-weight:600;opacity:.8}
.nav-links a:hover{opacity:1}
.nav-toggle{display:none;background:none;border:0;cursor:pointer}
.nav-toggle span{display:block;width:22px;height:2px;background:#111;margin:4px 0;border-radius:2px}

.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:12px;padding:12px 18px;font-weight:700;text-decoration:none;border:1px solid transparent;box-shadow:var(--shadow)}
.btn.primary{background:linear-gradient(90deg,var(--brand),var(--accent));color:#fff}
.btn.ghost{background:#fff;border:1px solid #d8def1;color:#0f1221}
.btn.small{padding:8px 12px;font-size:14px}
.btn.full{width:100%}

/* HERO */
.hero{position:relative;min-height:72vh;background:url('{{ url_for("static", filename="hero.jpg") }}') center/cover no-repeat;display:flex;align-items:center;color:#fff}
.hero .overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,14,25,.6),rgba(11,14,25,.75))}
.hero-inner{position:relative;z-index:1;padding:80px 0}
.display{font-size:56px;line-height:1.05;margin:0 0 12px;font-weight:800}
.display .accent{display:block;font-size:.6em;font-weight:800;color:#a5c8ff}
.sub{max-width:760px;font-size:18px;opacity:.95;margin:0 0 12px}
.cta-row{display:flex;gap:12px;margin-top:10px}
.hero-badges{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:18px 0 0;padding:0}
.hero-badges li{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);padding:8px 12px;border-radius:999px;font-weight:600}


.hero{
  position:relative;
  min-height:72vh;
  background: url('/static/hero.jpg') center/cover no-repeat;
  display:flex;
  align-items:center;
  color:#fff;
}
.hero .overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,14,25,.55),rgba(11,14,25,.78))}

/* STATS */
.stats{padding:24px 0;background:#fff;border-bottom:1px solid #f0f2f7}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;text-align:center}
.kpi{display:block;font-size:36px;font-weight:800;color:#0f1221}
.kpi-sub{display:block;color:#6a6f86}

/* FEATURES */
.features{padding:64px 0;background:#fff}
.section-title{text-align:center;font-size:28px;margin:0 0 24px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{background:#fff;border:1px solid #eef1f7;border-radius:16px;padding:20px;box-shadow:var(--shadow)}
.card h3{margin:0 0 8px}
.card p{color:#454b63}

/* PROGRAM */
.program{padding:64px 0;background:#fbfcff}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.module{background:#fff;border:1px solid #eef1f7;border-radius:16px;padding:20px;box-shadow:var(--shadow)}
.module h3{margin-top:0}
.module ul{margin:0;padding-left:18px}

/* TESTIMONIALS */
.testimonials{padding:64px 0;background:#fff}
.quote{background:#fff;border:1px solid #eef1f7;border-radius:16px;padding:20px;box-shadow:var(--shadow)}
.quote p{margin:0 0 8px}

/* FORM */
.lead-form{padding:64px 0}
.form-card{background:#fff;border:1px solid #eef1f7;border-radius:16px;padding:24px;box-shadow:var(--shadow)}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.field{position:relative;display:flex;flex-direction:column-reverse}
.field label{color:#6a6f86;font-size:13px;margin-top:6px}
.input{padding:12px 14px;border-radius:10px;border:1px solid #dfe3ef;font-size:15px}
.full{grid-column:1/-1}
.legal{font-size:12px;color:#60657a;margin-top:10px}
.consent{display:flex;gap:8px;align-items:center}

/* FAQ */
.faq{padding:64px 0;background:#fff}
details{border:1px solid #eef1f7;border-radius:12px;padding:14px 18px;margin:10px 0;box-shadow:var(--shadow)}
summary{font-weight:700;cursor:pointer}

/* FOOTER */
.site-footer{border-top:1px solid #eef1f7;background:#fff}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:20px;padding:28px 0}
.logo.small{height:28px}
.copy{text-align:center;border-top:1px solid #eef1f7;padding:12px;color:#6a6f86;font-size:14px}

/* COOKIE */
.cookie{position:fixed;left:20px;right:20px;bottom:20px;background:#10131f;color:#fff;padding:12px 16px;border-radius:12px;display:flex;justify-content:space-between;align-items:center;gap:12px;box-shadow:var(--shadow)}

/* RESPONSIVE */
@media (max-width:1000px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .nav-links{display:none}
  .nav-toggle{display:block}
  .display{font-size:40px}
  .grid2{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
}


/* BUTTONS (pro) */
.btn{
  -webkit-appearance:none; appearance:none;
  display:inline-flex; align-items:center; justify-content:center;
  border:0; outline:0; border-radius:14px;
  padding:12px 18px; font-weight:700; text-decoration:none;
  box-shadow: 0 10px 24px rgba(53,109,255,.18);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
  cursor:pointer;
}
.btn:focus-visible{ outline:2px solid rgba(53,109,255,.45); outline-offset:2px; }
.btn.primary{
  color:#fff;
  background: linear-gradient(90deg, #356dff, #00c7ff);
}
.btn.primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(53,109,255,.25);
}
.btn.ghost{
  background:transparent;
  color:#0f1221;
  border:1px solid rgba(53,109,255,.25);
  box-shadow:none;
}
.btn.ghost:hover{
  background:rgba(53,109,255,.06);
}
.btn.small{ padding:8px 12px; font-size:14px; }
.btn.full{ width:100%; }


/* COOKIE */
.cookie{
  position:fixed; left:20px; right:20px; bottom:20px;
  background:#10131f; color:#fff; padding:12px 16px;
  border-radius:12px; display:flex; justify-content:space-between; align-items:center; gap:12px;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}
.cookie .btn.small{
  border:0; background:#2a7bff; color:#fff; box-shadow:none;
}
.cookie .btn.small:hover{ background:#1f6af0; }

/* MEDIA STRIP (galería editorial) */
.media-strip{ padding:40px 0; background:#fff; border-top:1px solid #f0f2f7; border-bottom:1px solid #f0f2f7 }
.media-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px }
.media-card{ margin:0; background:#fff; border:1px solid #eef1f7; border-radius:16px; overflow:hidden; box-shadow: var(--shadow) }
.media-card img{ display:block; width:100%; height:360px; object-fit:cover }
.media-card figcaption{ padding:12px 14px; font-weight:600; color:#0f1221 }
@media (max-width:900px){
  .media-grid{ grid-template-columns:1fr }
  .media-card img{ height:240px }
}


/* FOOTER — limpio, editorial */
.site-footer{border-top:1px solid #eef1f7;background:#fff}
.footer-flex{
  display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px 0;
}
.brand-mini{display:flex; align-items:center; gap:10px; text-decoration:none; color:#111; font-weight:800}
.brand-mini img{height:28px}
.brand-mini span{letter-spacing:.2px}

.footer-nav{display:flex; gap:18px}
.footer-nav a{
  position:relative; text-decoration:none; color:#111; font-weight:600; opacity:.85; padding:6px 2px;
}
.footer-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg,#356dff,#00c7ff); transform:scaleX(0); transform-origin:left; transition:transform .18s ease;
}
.footer-nav a:hover{opacity:1}
.footer-nav a:hover::after{transform:scaleX(1)}

.footer-cta .btn.small{padding:8px 12px; font-size:14px}

.foot-meta{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 0 24px; border-top:1px solid #eef1f7; color:#6a6f86; font-size:14px;
}
.foot-meta a{color:#3a86ff; text-decoration:none}
.foot-meta a:hover{text-decoration:underline}

@media (max-width:800px){
  .footer-flex{flex-direction:column; align-items:flex-start}
  .foot-meta{flex-direction:column; align-items:flex-start}

}

/* ABOUT (Academia) */
.about{padding:64px 0;background:#fff}
.about-grid{display:grid;grid-template-columns:1.2fr 1.8fr;gap:28px;align-items:center}
.about-media{position:relative;border-radius:18px;overflow:hidden;border:1px solid #eef1f7;box-shadow:var(--shadow)}
.about-media img{display:block;width:100%;height:100%;object-fit:cover}
.about-badge{
  position:absolute;left:16px;bottom:16px;background:rgba(16,19,31,.75);color:#fff;
  padding:8px 12px;border-radius:999px;font-weight:700;font-size:13px;border:1px solid rgba(255,255,255,.2)
}
.about-copy .lead{color:#2a2f45;max-width:720px}
.pill-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:18px 0}
.pill{background:#fff;border:1px solid #eef1f7;border-radius:14px;padding:14px;box-shadow:var(--shadow)}
.pill h3{margin:0 0 6px}
.about-cta{display:flex;gap:12px;margin-top:10px}
.about-meta{display:flex;flex-wrap:wrap;gap:18px;margin-top:14px;color:#6a6f86}
.about-meta .dot{display:inline-block;width:8px;height:8px;background:linear-gradient(90deg,#356dff,#00c7ff);border-radius:999px;margin-right:8px}

@media (max-width:1000px){.about-grid{grid-template-columns:1fr}}
@media (max-width:720px){.pill-grid{grid-template-columns:1fr}}

/* ROADMAP */
.roadmap{padding:64px 0;background:#fbfcff;border-top:1px solid #eef1f7}
.road-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.road-card{background:#fff;border:1px solid #eef1f7;border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.road-card h3{margin:0 0 8px}
.road-card p{margin:0;color:#454b63}
@media (max-width:1100px){.road-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){.road-grid{grid-template-columns:1fr}}



/* HERO refinado (dos columnas) */
.hero .hero-cols{display:grid;grid-template-columns:1.3fr 1fr;gap:28px}
.hero-right .hero-asir{
  background:rgba(255,255,255,.08); backdrop-filter: blur(6px);
  border:1px solid rgba(255,255,255,.25); border-radius:16px; padding:16px;
}
.hero-asir h3{margin:0 0 8px;color:#fff}
.hero-asir .mini{color:#e6ecff;margin:0 0 10px}
.hero-asir .mini-kpis{display:flex;gap:10px;color:#a5c8ff;font-weight:700;margin-bottom:8px}
.hero-asir .mini-cta{display:flex;gap:8px}
@media (max-width:980px){ .hero .hero-cols{grid-template-columns:1fr} }

/* QUÉ ES ASIR */
.what-asir{padding:64px 0;background:#fff}
.asir-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:28px;align-items:center}
.asir-media{margin:0;border-radius:18px;overflow:hidden;border:1px solid #eef1f7;box-shadow:var(--shadow)}
.asir-media img{display:block;width:100%;height:100%;object-fit:cover}
.ticks{list-style:none;padding:0;margin:12px 0}
.ticks li{position:relative;margin:8px 0 8px 24px;color:#2a2f45}
.ticks li::before{content:"✓";position:absolute;left:-24px;top:0;color:#2f77ff;font-weight:800}
@media (max-width:980px){ .asir-grid{grid-template-columns:1fr} }

/* CARRUSEL */
.carousel{position:relative;overflow:hidden;border:1px solid #eef1f7;border-radius:16px;box-shadow:var(--shadow);background:#fff}
.car-track{display:flex;transition:transform .35s ease}
.car-slide{min-width:100%;padding:20px}
.car-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  background:#fff;border:1px solid #dfe3ef;border-radius:999px;width:38px;height:38px;
  box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.car-prev{left:10px} .car-next{right:10px}
.car-dots{display:flex;gap:8px;justify-content:center;padding:10px}
.dot{width:10px;height:10px;border-radius:999px;border:1px solid #bfc6de;background:#fff;cursor:pointer}
.dot.is-active{background:linear-gradient(90deg,#356dff,#00c7ff);border-color:transparent}


/* FOOTER PRO */
.site-footer.pro{border-top:1px solid #eef1f7;background:#fff}
.foot-top{display:grid;grid-template-columns:1fr 2fr 1fr;gap:20px;align-items:center;padding:24px 0}
.brand-mini{display:flex;align-items:center;gap:10px;text-decoration:none;color:#111;font-weight:800}
.brand-mini img{height:28px}
.foot-claim{margin:0;text-align:center;color:#2a2f45;font-weight:600}
.foot-contact{display:flex;gap:14px;justify-content:flex-end;align-items:center}
.foot-mail{color:#3a86ff;text-decoration:none;font-weight:700}
.foot-mail:hover{text-decoration:underline}
.foot-social a{color:#6a6f86;margin-left:8px}
.foot-social a:hover{color:#3a86ff}
.copy{text-align:center;border-top:1px solid #eef1f7;padding:12px;color:#6a6f86;font-size:14px}
@media (max-width:900px){
  .foot-top{grid-template-columns:1fr;gap:8px;text-align:left}
  .foot-contact{justify-content:flex-start}
  .foot-claim{text-align:left}
}


/* NAV: logo más grande sin romper layout */
.brand-logo{height:115px}            /* antes 34px */
.nav-inner{height:80px}             /* subimos altura de barra */
@media (max-width:720px){
  .brand-logo{height:42px}
  .nav-inner{height:72px}
}


/* GHOST en fondos OSCUROS (hero) */
.btn.ghost--light {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  box-shadow: none;
  backdrop-filter: blur(6px);
}
.btn.ghost--light:hover {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.6);
}

/* GHOST en fondos CLAROS (tarjetas, secciones blancas) */
.btn.ghost--dark {
  background: transparent;
  border: 1px solid rgba(47,119,255,.28);
  color: #0f1221;
  box-shadow: none;
}
.btn.ghost--dark:hover {
  background: rgba(47,119,255,.08);
  border-color: rgba(47,119,255,.45);
}

/* Accesibilidad: foco visible */
.btn:focus-visible {
  outline: 2px solid rgba(53,109,255,.6);
  outline-offset: 2px;
}

.hero .overlay{
  /* antes .55/.78; ahora un poco más para mejorar contraste */
  background: linear-gradient(180deg, rgba(11,14,25,.62), rgba(11,14,25,.82));
}

/* Botón ghost dentro del HERO siempre claro */
.hero .btn.ghost { 
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  box-shadow: none;
  backdrop-filter: blur(6px);
}
.hero .btn.ghost:hover {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.6);
}

/* Botón ghost dentro de hero-asir (tarjeta clara) siempre oscuro */
.hero-asir .btn.ghost {
  background: transparent;
  border: 1px solid rgba(47,119,255,.28);
  color: #0f1221;
}
.hero-asir .btn.ghost:hover {
  background: rgba(47,119,255,.08);
  border-color: rgba(47,119,255,.45);
}