/* =========================================================
   CORPADEIN — UI Kit (verde + naranja, oscuro elegante)
   ========================================================= */

/* ===== Tokens base (modo oscuro por defecto) ===== */
:root{
  /* CORPADEIN (Manual Identidad Dic 2025)
     Primario: Azul Profundo #0033A0 (Pantone 286 C)
     Acento/CTA: Amarillo Acción #FFC72C (Pantone 123 C)
     Secundario: Verde Territorio #00843D (Pantone 348 C)
     Neutros: #F4F4F4 / #58595B
  */

  /* Escala Azul (se conserva el naming --brand-* para no tocar funcionalidad) */
  --brand-50:#eef3ff;
  --brand-100:#dbe6ff;
  --brand-200:#b7cdff;
  --brand-400:#4a78ff;
  --brand-500:#1f55d6;
  --brand-600:#0033A0;  /* Azul Profundo */
  --brand-700:#002a86;
  --brand-800:#001f63;

  /* Acento institucional */
  --accent:#FFC72C;     /* Amarillo Acción */
  --support-green:#00843D; /* Verde Territorio */

  /* Base dark (modo oscuro por defecto) */
  --bg:#020617;
  --bg-soft:#020617;
  --bg-softer:#020617;
  --surface:rgba(15,23,42,.96);
  --surface-subtle:rgba(15,23,42,.9);
  --text:#eef3ff;
  --text-weak:#a7b6d8;
  --line:rgba(0,51,160,.35);

  --radius-xl:1.5rem;
  --radius-lg:1rem;
  --radius-md:.9rem;
  --shadow-1:0 8px 30px rgba(0,0,0,.4);
  --shadow-2:0 20px 65px rgba(0,0,0,.5);
}

/* =========================================================
   Base
   ========================================================= */

*,
*::before,
*::after{
  box-sizing:border-box;
}

html,body{
  margin:0;
  padding:0;
  font-family:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Helvetica Neue",sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{
  max-width:100%;
  display:block;
  border-radius:calc(var(--radius-lg) - .25rem);
}

.wrap{
  width:min(1200px,92vw);
  margin-inline:auto;
}

/* =========================================================
   Topbar
   ========================================================= */

.topbar{
  position:sticky;
  top:0;
  z-index:100;
  backdrop-filter:saturate(1.2) blur(12px);
  background:linear-gradient(to bottom,rgba(3,7,18,.96),rgba(0,31,99,.88));
  border-bottom:1px solid rgba(0,51,160,.55);

}

.topbar .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.85rem 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:.7rem;
  font-weight:800;
  letter-spacing:.2px;
  color:#f9fafb;
  text-decoration:none;
}

.brand img{
  width:36px;
  height:36px;
  border-radius:.75rem;
  box-shadow:0 6px 14px rgba(0,132,61,.45);
}

.nav{
  display:flex;
  align-items:center;
  gap:1rem;
}

.nav a{
  color:var(--text-weak);
  text-decoration:none;
  font-weight:600;
  padding:.5rem .85rem;
  border-radius:.7rem;
  transition:all .18s ease;
}

.nav a:hover{
  color:#fefce8;
  background:rgba(0,132,61,.18);
}

.nav .btn-cta{
  background:linear-gradient(135deg,var(--brand-500),var(--accent));
  color:#111827;
  padding:.55rem 1.1rem;
  border-radius:.9rem;
  box-shadow:0 10px 28px rgba(255,199,44,.45);
  border:1px solid rgba(250,250,249,.4);
}

/* =========================================================
   Botón de tema
   ========================================================= */

.theme-toggle{
  display:flex;
  align-items:center;
  gap:.4rem;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.35);
  padding:.3rem .75rem;
  background:rgba(15,23,42,.75);
  color:var(--text-weak);
  font-size:.8rem;
  cursor:pointer;
}

.theme-toggle__icon{
  font-size:1rem;
}

.theme-toggle:hover{
  border-color:rgba(255,199,44,.75);
  color:#eef3ff;
}

/* =========================================================
   Hero
   ========================================================= */

.hero{
  position:relative;
  min-height:72vh;
  display:grid;
  place-items:center start;
  padding:6.5rem 2rem 4.8rem;
  color:#f9fafb;
  background:
    radial-gradient(1100px 600px at 18% 15%,rgba(0,51,160,.32),transparent 60%),
    radial-gradient(900px 500px at 95% 40%,rgba(255,199,44,.32),transparent 55%),
    linear-gradient(180deg,#020617 0%,#020617 100%);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}

.hero-bg-word{
  position:absolute;
  left:50%;
  top:52%;
  transform:translate(-50%,-50%);
  font-size:clamp(4.2rem,9vw,5.8rem);
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(0,51,160,.13);
  pointer-events:none;
  user-select:none;
}

.hero-content{
  position:relative;
  z-index:2;
  max-width:900px;
}

.kicker{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.18rem .7rem;
  border-radius:999px;
  background:rgba(0,31,99,.92);
  border:1px solid rgba(255,199,44,.55);
  color:#fff7d6;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.12em;
}

.hero h1{
  font-size:clamp(2.3rem,4.5vw,3.5rem);
  line-height:1.06;
  margin:1.1rem 0 .7rem;
}

.hero-sub{
  max-width:560px;
  font-size:.98rem;
  color:var(--text-weak);
  margin:.4rem 0 1.6rem;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.85rem;
  margin-bottom:1.7rem;
}

/* Botones generales — versión más sobria */

.btn-primary,
.btn-outline,
.btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  border-radius:999px;
  padding:.8rem 1.5rem;
  font-size:.94rem;
  font-weight:600;
  border:1px solid transparent;
  cursor:pointer;
  text-decoration:none;
  transition:all .18s ease;
}

/* Base (se matiza según tema) */

.btn-primary{
  background:var(--brand-600);
  color:#f9fafb;
  box-shadow:0 10px 24px rgba(0,51,160,.45);
}

.btn-primary:hover{
  background:var(--brand-700);
  box-shadow:0 14px 32px rgba(0,51,160,.55);
  transform:translateY(-1px);
}

.btn-outline{
  background:transparent;
  color:var(--text-weak);
  border-color:rgba(148,163,184,.55);
}

.btn-outline:hover{
  border-color:rgba(255,199,44,.85);
  background:rgba(15,23,42,.9);
  color:#eef3ff;
}

.btn-secondary{
  background:rgba(15,23,42,.85);
  color:#eef3ff;
  border-color:rgba(148,163,184,.55);
}

.btn-secondary:hover{
  border-color:rgba(255,199,44,.8);
  background:rgba(15,23,42,.98);
}

/* Ajustes específicos para modo CLARO */

[data-theme="light"] .btn-primary{
  background:var(--brand-600);
  color:#f9fafb;
  box-shadow:0 8px 20px rgba(0,51,160,.35);
}

[data-theme="light"] .btn-primary:hover{
  background:var(--brand-700);
}

[data-theme="light"] .btn-outline{
  background:#ffffff;
  color:var(--brand-700);
  border-color:rgba(0,51,160,.4);
}

[data-theme="light"] .btn-outline:hover{
  background:#eef3ff;
  border-color:rgba(0,51,160,.7);
}

[data-theme="light"] .btn-secondary{
  background:#0f172a;
  color:#f9fafb;
  border-color:rgba(30,64,175,.4);
}

[data-theme="light"] .btn-secondary:hover{
  background:#020617;
}

/* Métricas del hero */

.hero-metrics{
  display:flex;
  flex-wrap:wrap;
  gap:1.5rem;
}

.hero-metric{
  display:flex;
  flex-direction:column;
  gap:.1rem;
}

.hero-metric__number{
  font-weight:700;
  font-size:1.15rem;
}

.hero-metric__label{
  font-size:.85rem;
  color:var(--text-weak);
}

/* ============================
   Layout del hero con imagen lateral
============================ */

.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  align-items:center;
  gap:2.5rem;
}

.hero-figure{
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

.hero-image{
  max-width:480px;
  width:100%;
  height:auto;
  border-radius:1.6rem;
  box-shadow:0 24px 60px rgba(110, 125, 162, 0.45);
  background:#2e5e56;
  animation:heroFloat 7s ease-in-out infinite;
}

/* Halo suave detrás de la imagen */
.hero-figure::before{
  content:"";
  position:absolute;
  inset:15%;
  border-radius:2.2rem;
  background:radial-gradient(circle at 30% 20%,rgba(0,132,61,.3),transparent 60%),
             radial-gradient(circle at 80% 80%,rgba(255,199,44,.25),transparent 60%);
  filter:blur(8px);
  z-index:-1;
}

/* ============================
   Animaciones de texto
============================ */

@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(18px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

.hero-title-anim{
  animation:fadeUp .7s ease-out .05s both;
}

.hero-sub-anim{
  animation:fadeUp .7s ease-out .18s both;
}

.hero-actions-anim{
  animation:fadeUp .7s ease-out .3s both;
}

.hero-metrics-anim{
  animation:fadeUp .7s ease-out .42s both;
}

/* Animación de flotación para la imagen */
@keyframes heroFloat{
  0%{
    transform:translateY(0) scale(1);
  }
  50%{
    transform:translateY(-8px) scale(1.01);
  }
  100%{
    transform:translateY(0) scale(1);
  }
}

/* =========================================================
   Secciones y cards
   ========================================================= */

.section{
  padding:3.5rem 1.5rem;
}

.section.alt{
  background:linear-gradient(180deg,#001f63 0%,#020617 100%);
}

.section h2{
  font-size:1.7rem;
  margin:0 0 .6rem;
}

.section p{
  margin:0 0 1.5rem;
  color:var(--text-weak);
  max-width:650px;
}

.grid-cards{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1.35rem;
}

/* Cards base */

.card{
  position:relative;
  background:var(--surface);
  border-radius:var(--radius-lg);
  padding:1.25rem 1.3rem 1.3rem;
  border:1px solid rgba(0,51,160,.4);
  box-shadow:var(--shadow-1);
}

.card h3{
  margin:.1rem 0 .35rem;
  font-size:1.05rem;
}

.card p{
  margin:0;
  font-size:.9rem;
  color:var(--text-weak);
}

/* Tarjetas de tipo programa — sin degradados, solo franja superior */

.card-indigo,
.card-teal,
.card-rose,
.card-gold{
  position:relative;
  overflow:hidden;
}

/* Franja de color arriba */

.card-indigo::before,
.card-teal::before,
.card-rose::before,
.card-gold::before{
  content:"";
  position:absolute;
  inset:0;
  height:4px;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  background:var(--brand-600);
  pointer-events:none;
}

.card-teal::before{
  background:#00843D; /* verde más azulado (posgrados) */
}

.card-rose::before{
  background:var(--accent); /* cursos / técnicos acento naranja */
}

.card-gold::before{
  background:#0f172a; /* tono más sobrio para formación continua */
}

/* Ajuste de títulos según card */

.card-indigo h3,
.card-teal h3,
.card-gold h3{
  color:#f9fafb;
}

.card-rose h3{
  color:#3b2f00;
}

/* En modo oscuro, fondos ligeramente distintos por tipo para matiz muy sutil */

.card-indigo{
  background:linear-gradient(180deg,#020617 0%,#001f63 100%);
}

.card-teal{
  background:linear-gradient(180deg,#020617 0%,#001f63 100%);
}

.card-rose{
  background:linear-gradient(180deg,#111827 0%,#5c4a00 100%);
}

.card-gold{
  background:linear-gradient(180deg,#020617 0%,#020617 100%);
}

/* ============================
   Botones dentro de las cards
   ============================ */

/* Contenedor de acciones de cada tarjeta */
.card-actions{
  display:flex;
  flex-direction:row;      /* en fila, lado a lado */
  gap:.75rem;
  margin-top:1.4rem;
}

/* Ambos botones de las cards con el MISMO ancho y alto */
.card-actions .btn-primary,
.card-actions .btn-secondary{
  flex:1;                  /* ocupan el mismo espacio */
  justify-content:center;  /* centrar texto */
  text-align:center;
  padding:.9rem 1.2rem;
  border-radius:1rem;
  font-size:.95rem;
  white-space:nowrap;
}

/* En pantallas pequeñas, los ponemos uno debajo del otro */
@media (max-width:768px){
  .card-actions{
    flex-direction:column;
  }
}


/* En modo claro, todas las cards son blancas con franja de color y sombra suave */

[data-theme="light"] .card{
  background:#ffffff;
  border-color:rgba(148,163,184,.35);
  box-shadow:0 8px 20px rgba(15,23,42,.08);
}

[data-theme="light"] .card h3{
  color:#111827;
}

[data-theme="light"] .card p{
  color:#4b5563;
}

[data-theme="light"] .card-indigo,
[data-theme="light"] .card-teal,
[data-theme="light"] .card-rose,
[data-theme="light"] .card-gold{
  background:#ffffff;
}

[data-theme="light"] .card-indigo h3,
[data-theme="light"] .card-teal h3,
[data-theme="light"] .card-gold h3{
  color:#001f63;
}

[data-theme="light"] .card-rose h3{
  color:#5c4a00;
}


/* Franja stats / CTA final */


.stats-strip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding:1.5rem 1.6rem;
  border-radius:var(--radius-xl);
  border:1px solid rgba(0,51,160,.6);
  background:linear-gradient(135deg,#001f63,#020617);
  box-shadow:0 16px 40px rgba(0,0,0,.45);
}

.stats-text h2{
  margin:.1rem 0 .4rem;
}

.stats-text p{
  margin:0;
  color:var(--text-weak);
}

.stats-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
}

/* Versión clara de la franja CTA: tarjeta blanca sobria */

[data-theme="light"] .stats-strip{
  background:#ffffff;
  border:1px solid rgba(0,51,160,.35);
  box-shadow:0 10px 26px rgba(15,23,42,.08);
}

[data-theme="light"] .stats-text h2{
  color:#001f63;
}

[data-theme="light"] .stats-text p{
  color:#4b5563;
}

[data-theme="light"] .stats-actions .btn-primary{
  box-shadow:0 8px 20px rgba(0,51,160,.35);
}

[data-theme="light"] .stats-actions .btn-outline{
  background:#ffffff;
  border-color:rgba(0,51,160,.4);
  color:#003d6b;
}


/* =========================================================
   Carrusel Drive
   ========================================================= */

.carousel{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-xl);
  border:1px solid rgba(0,51,160,.4);
  box-shadow:var(--shadow-1);
  margin-top:1rem;
}

.carousel-track{
  display:flex;
  transition:transform .4s ease;
}

.slide{
  min-width:100%;
  padding:0;
  opacity:.15;
  transform:scale(.96);
  transition:opacity .4s ease,transform .4s ease;
}

.slide img{
  width:100%;
  height:500px;
  object-fit:cover;
  border-radius:0;
}

.slide.is-active{
  opacity:1;
  transform:scale(1);
}

.carousel-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.65);
  background:rgba(15,23,42,.85);
  color:#f9fafb;
  cursor:pointer;
  display:grid;
  place-items:center;
}

.carousel-btn:hover{
  border-color:rgba(255,199,44,.85);
}

.carousel-btn.prev{ left:14px; }
.carousel-btn.next{ right:14px; }

/* =========================================================
   Modal Lead
   ========================================================= */

.modal{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  background:rgba(15,23,42,.72);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  z-index:120;
}

.modal[hidden]{
  display:none;
}

.modal-card{
  width:min(560px,92vw);
  border-radius:1.9rem;
  border:1px solid rgba(148,163,184,.45);
  box-shadow:0 26px 70px rgba(15,23,42,.65);
  padding:1.6rem 1.7rem 1.3rem;
  position:relative;
  background:radial-gradient(circle at 0 0,rgba(0,132,61,.24),transparent 55%),
             radial-gradient(circle at 100% 100%,rgba(255,199,44,.16),transparent 55%),
             #020617;
}

/* Franja de color superior */
.modal-card::before{
  content:"";
  position:absolute;
  inset:0;
  height:4px;
  border-radius:1.9rem 1.9rem 0 0;
  background:linear-gradient(90deg,var(--support-green),var(--support-green));
  pointer-events:none;
}

/* Título del modal */

.modal-card h3{
  margin:0 0 1.1rem;
  font-size:1.25rem;
  text-align:left;
}

/* Botón de cierre */

.modal-close{
  position:absolute;
  top:.95rem;
  right:1rem;
  border:none;
  background:transparent;
  color:var(--text-weak);
  cursor:pointer;
  font-size:1.1rem;
}

.modal-close:hover{
  color:#eef3ff;
}

/* Formulario */

#lead-form{
  display:flex;
  flex-direction:column;
  gap:.85rem;
}

#lead-form label{
  font-size:.78rem;
  display:flex;
  flex-direction:column;
  gap:.25rem;
  text-transform:uppercase;
  letter-spacing:.11em;
  color:#9ca3af;
}

/* Inputs / selects */

#lead-form input,
#lead-form select{
  border-radius:1rem;
  border:1px solid rgba(148,163,184,.6);
  padding:.7rem .8rem;
  background:rgba(15,23,42,.96);
  color:#eef3ff;
  font-size:.88rem;
  outline:none;
  transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

#lead-form input::placeholder{
  color:#6b7280;
}

/* Estado focus */

#lead-form input:focus,
#lead-form select:focus{
  border-color:var(--support-green);
  box-shadow:0 0 0 1px rgba(0,132,61,.65);
  background:rgba(15,23,42,1);
}

/* Botón principal del modal */

.modal-card .btn-primary{
  margin-top:.4rem;
  width:100%;
  justify-content:center;
  border-radius:999px;
}

/* Texto pequeño */

.small{
  margin-top:.8rem;
  font-size:.74rem;
  color:var(--text-weak);
  text-align:left;
  line-height:1.4;
}


/* =========================================================
   Footer
   ========================================================= */

.footer{
  border-top:1px solid rgba(0,51,160,.5);
  padding:1.8rem 1.5rem 2rem;
  background:#020617;
}

.footer .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.footer p{
  margin:0;
  font-size:.82rem;
  color:var(--text-weak);
}

.footer .social{
  display:flex;
  gap:.75rem;
}

.footer .social a{
  font-size:.8rem;
  color:#dbe6ff;
  text-decoration:none;
}

.footer .social a:hover{
  text-decoration:underline;
}

/* =========================================================
   Debug Drive (opcional)
   ========================================================= */

#dbg{
  position:fixed;
  bottom:12px;
  right:12px;
  max-width:340px;
  padding:.55rem .7rem;
  border-radius:.9rem;
  background:#020617;
  border:1px solid rgba(148,163,184,.5);
  box-shadow:var(--shadow-1);
  font-size:.78rem;
  z-index:130;
}

#dbg b{
  display:block;
  margin-bottom:.25rem;
}

#dbg .ok{ color:#4ade80; }
#dbg .err{ color:#fca5a5; }
#dbg .muted{ color:#9fb0cc; }

/* =========================================================
   Tema claro (light) cuando data-theme="light"
   ========================================================= */

[data-theme="light"]{
  --bg:#F4F4F4;         /* Gris Neutro (fondo web) */
  --bg-soft:#ffffff;    /* superficies */
  --bg-softer:#eef3ff;  /* toque azul muy suave */
  --surface:#ffffff;
  --surface-subtle:#f1f5f9;
  --text:#0b1b33;       /* lectura: cercano a azul marino */
  --text-weak:#58595B;  /* Gris legal */
  --line:rgba(0,51,160,.22);
}

[data-theme="light"] body{
  background:var(--bg);
  color:var(--text);
}

/* Menú claro con barra verde oscura marcada */

[data-theme="light"] .topbar{
  background:#0033A0; /* verde oscuro */
  border-bottom:1px solid rgba(0,51,160,.6);
}

[data-theme="light"] .brand{
  color:#eef3ff;
}

[data-theme="light"] .nav a{
  color:#d1fae5;
}

[data-theme="light"] .nav a:hover{
  background:#001f63;
  color:#dbe6ff;
}

[data-theme="light"] .nav .btn-cta{
  background:var(--accent);
  color:#111827;
  box-shadow:0 10px 24px rgba(255,199,44,.35);
}

[data-theme="light"] .theme-toggle{
  background:#f9fafb;
  border-color:rgba(148,163,184,.5);
  color:#374151;
}

[data-theme="light"] .theme-toggle:hover{
  border-color:rgba(0,51,160,.7);
}

[data-theme="light"] .hero{
  color:#0b1b33;
  background:
    radial-gradient(1100px 600px at 18% 15%,rgba(0,51,160,.18),transparent 60%),
    radial-gradient(900px 500px at 95% 40%,rgba(255,199,44,.20),transparent 55%),
    radial-gradient(900px 520px at 55% 105%,rgba(0,132,61,.12),transparent 60%),
    linear-gradient(180deg,#eef3ff 0%,#ffffff 65%,#F4F4F4 100%);
}

[data-theme="light"] .hero-bg-word{
  color:rgba(0,51,160,.12);
}

[data-theme="light"] .section.alt{
  background:linear-gradient(180deg,#ffffff 0%,#eef3ff 40%,#ffffff 100%);
}


[data-theme="light"] .card{
  background:#ffffff;
  border-color:rgba(148,163,184,.35);
}

[data-theme="light"] .footer{
  background:#001f63;
  border-top-color:rgba(0,51,160,.5);
}

/* Modal en modo claro: tarjeta blanca elegante */

[data-theme="light"] .modal{
  background:rgba(15,23,42,.45);
}

[data-theme="light"] .modal-card{
  background:#ffffff;
  border-color:rgba(148,163,184,.45);
  box-shadow:0 26px 70px rgba(15,23,42,.25);
}

[data-theme="light"] #lead-form input,
[data-theme="light"] #lead-form select{
  background:#f9fafb;
  color:#111827;
  border-color:rgba(148,163,184,.7);
}

[data-theme="light"] #lead-form input::placeholder{
  color:#9ca3af;
}

[data-theme="light"] #lead-form input:focus,
[data-theme="light"] #lead-form select:focus{
  background:#ffffff;
  border-color:var(--support-green);
  box-shadow:0 0 0 1px rgba(0,51,160,.7);
}
/* =========================================================
   Mejoras visuales para cards de programas en modo CLARO
   ========================================================= */

[data-theme="light"] .program-card-h{
  background:linear-gradient(
      135deg,
      #ffffff 0%,
      #f4fdf7 40%,
      #ffffff 100%
  );
  border:1px solid rgba(0,51,160,.18); /* borde verde muy suave */
  box-shadow:
      0 18px 32px rgba(15,23,42,.08),
      0 4px 12px rgba(0,51,160,.06); /* doble sombra elegante */
}

/* Título en verde en modo claro */
[data-theme="light"] .program-nombre{
  color:#003d6b;
}

/* Chips con color suave */
[data-theme="light"] .program-tipo,
[data-theme="light"] .program-modalidad{
  background:#eefaf3;
  color:#003d6b;
  border:1px solid rgba(0,51,160,.15);
}

/* “SNIES” gris un poco más visible */
[data-theme="light"] .program-snies{
  color:#475569;
}

/* =========================================================
   Variantes de color por universidad (modo CLARO)
   ========================================================= */

/* ---------- Universidad de América (verde CORPADEIN) ---------- */

[data-theme="light"] .uni-header--ua .uni-logo{
  background:#eef3ff;
  border-color:rgba(0,51,160,.45);
  color:#003d6b;
}

[data-theme="light"] .uni-header--ua .uni-chip{
  background:#eef3ff;
  border-color:rgba(0,51,160,.45);
  color:#003d6b;
}

/* Cards de esta universidad */
[data-theme="light"] .program-card-h--ua{
  background:linear-gradient(135deg,#ffffff 0%,#f4fdf7 45%,#ffffff 100%);
  border-color:rgba(0,51,160,.28);
  box-shadow:
    0 18px 32px rgba(15,23,42,.08),
    0 4px 12px rgba(0,51,160,.08);
}

[data-theme="light"] .program-card-h--ua .program-nombre{
  color:#003d6b;
}

/* ---------- Universidad “azul” (ejemplo) ---------- */

[data-theme="light"] .uni-header--azul .uni-logo{
  background:#eff6ff;
  border-color:rgba(37,99,235,.45);
  color:#1d4ed8;
}

[data-theme="light"] .uni-header--azul .uni-chip{
  background:#eff6ff;
  border-color:rgba(37,99,235,.45);
  color:#1d4ed8;
}

[data-theme="light"] .program-card-h--azul{
  background:linear-gradient(135deg,#ffffff 0%,#eef2ff 45%,#ffffff 100%);
  border-color:rgba(37,99,235,.25);
  box-shadow:
    0 18px 32px rgba(15,23,42,.08),
    0 4px 12px rgba(37,99,235,.08);
}

[data-theme="light"] .program-card-h--azul .program-nombre{
  color:#1e40af;
}

/* ---------- Universidad “naranja” (ejemplo) ---------- */

[data-theme="light"] .uni-header--naranja .uni-logo{
  background:#fff7ed;
  border-color:rgba(234,88,12,.4);
  color:#c2410c;
}

[data-theme="light"] .uni-header--naranja .uni-chip{
  background:#fff7ed;
  border-color:rgba(234,88,12,.4);
  color:#c2410c;
}

[data-theme="light"] .program-card-h--naranja{
  background:linear-gradient(135deg,#ffffff 0%,#fff7ed 45%,#ffffff 100%);
  border-color:rgba(234,88,12,.25);
  box-shadow:
    0 18px 32px rgba(15,23,42,.08),
    0 4px 12px rgba(234,88,12,.08);
}

[data-theme="light"] .program-card-h--naranja .program-nombre{
  color:#b45309;
}


/* =========================================================
   Responsive
   ========================================================= */

@media (max-width:1024px){
  .grid-cards{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:768px){
  .topbar .wrap{
    flex-wrap:wrap;
    gap:.6rem;
  }

  .nav{
    display:none; /* Menú hamburguesa se puede agregar luego */
  }

  .hero{
    padding:5.5rem 1.5rem 3.5rem;
  }

  .hero-actions{
    flex-direction:column;
    align-items:flex-start;
  }
  .hero-grid{
   grid-template-columns:1fr;
  gap:2rem;
  }
  .hero-figure{
    order:-1; /* si quieres que la imagen quede arriba en móvil, pon -1; si no, elimina esta línea */
  }
  .grid-cards{
    grid-template-columns:1fr;
  }

  .stats-strip{
    flex-direction:column;
    align-items:flex-start;
  }

  .footer .wrap{
    flex-direction:column;
    align-items:flex-start;
  }

  .slide img{
    height:260px;
  }
}

/* ============================
   Botones dentro de las cards
   — columnas iguales y texto sin cortar
   ============================ */

.card-actions{
  display: grid;
  grid-template-columns: 1fr 1fr;  /* 2 columnas iguales */
  gap: .75rem;
  margin-top: 1.4rem;
}

/* Ambos botones de las cards: mismo ancho y alto */
.card-actions .btn-primary,
.card-actions .btn-secondary{
  width: 100%;
  justify-content: center;
  text-align: center;
  padding: .85rem 1rem;
  border-radius: 999px;
  font-size: .9rem;
  white-space: normal;          /* permite que el texto se parta en dos líneas */
}

/* En móvil, uno debajo del otro */
@media (max-width: 768px){
  .card-actions{
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   Ajustes pregrados.html
   Sub-hero de categorías (Pregrados, etc.)
============================ */

.sub-hero{
  padding:3.2rem 1.5rem 2.4rem;
  background:linear-gradient(180deg,#eef3ff 0%,#f9fafb 100%);
}

[data-theme="dark"] .sub-hero{
  background:linear-gradient(180deg,#001f63 0%,#020617 100%);
}

.sub-hero .wrap{
  max-width:900px;
}

.sub-hero-kicker{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--support-green);
  margin:0 0 .3rem;
}

.sub-hero-title{
  margin:.1rem 0 .4rem;
  font-size:1.9rem;
}

.sub-hero-sub{
  margin:0 0 1.2rem;
  color:var(--text-weak);
  max-width:620px;
}

.sub-hero-pills{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
}

.pill{
  border-radius:999px;
  border:1px solid rgba(148,163,184,.6);
  padding:.45rem 1rem;
  font-size:.85rem;
  background:#ffffff;
  color:#374151;
  text-decoration:none;
  cursor:pointer;
}

.pill--active{
  background:var(--support-green);
  border-color:var(--support-green);
  color:#f9fafb;
}

.pill--ghost{
  background:transparent;
}

/* ============================
   Sección de programas por universidad
============================ */

.section-programas{
  padding-top:2.5rem;
  padding-bottom:3.5rem;
  background:#f3f4f6;
}

[data-theme="dark"] .section-programas{
  background:#020617;
}

.uni-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1.5rem;
  margin-bottom:1.6rem;
}

.uni-header-left{
  display:flex;
  align-items:flex-start;
  gap:1rem;
}

.uni-logo{
  width:56px;
  height:56px;
  border-radius:1.25rem;
  background:#ffffff;
  border:1px solid rgba(148,163,184,.4);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  color:#003d6b;
  font-size:1.1rem;
  flex-shrink:0;
}

.uni-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:inherit;
}

.uni-title{
  margin:.1rem 0 .2rem;
  font-size:1.4rem;
}

.uni-subtitle{
  margin:0;
  font-size:.9rem;
  color:var(--text-weak);
  max-width:600px;
}

.uni-header-right{
  display:flex;
  align-items:flex-start;
}

.uni-chip{
  padding:.35rem .9rem;
  border-radius:999px;
  border:1px solid rgba(0,51,160,.35);
  background:#eef3ff;
  font-size:.8rem;
  color:#003d6b;
}

[data-theme="dark"] .uni-chip{
  background:rgba(15,23,42,.9);
  color:#dbe6ff;
}

/* ============================
   Cards horizontales de programa
============================ */

.program-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.4rem;
}

.program-card-h{
  background:#ffffff;
  border-radius:1.8rem;
  border:1px solid rgba(148,163,184,.35);
  box-shadow:0 20px 45px rgba(15,23,42,.12);
  padding:1.3rem 1.5rem 1.2rem;
  display:flex;
  flex-direction:column;
  gap:.9rem;
}

[data-theme="dark"] .program-card-h{
  background:var(--surface);
  border-color:rgba(0,51,160,.45);
}

.program-card-body{
  display:flex;
  flex-direction:column;
  gap:.45rem;
}

.program-header{
  display:flex;
  flex-direction:column;
  gap:.15rem;
}

.program-universidad{
  margin:0;
  font-size:.8rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(148,163,184,.9);
}

.program-nombre{
  margin:0;
  font-size:1.1rem;
}

.program-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem .9rem;
  font-size:.8rem;
  color:#6b7280;
}

.program-snies::before{
  content:"SNIES · ";
  font-weight:500;
}

.program-tipo,
.program-modalidad{
  padding:.15rem .6rem;
  border-radius:999px;
  background:#f3f4f6;
  color:#4b5563;
}

[data-theme="dark"] .program-tipo,
[data-theme="dark"] .program-modalidad{
  background:rgba(15,23,42,.9);
  color:#cbd5f5;
}

/* Botones de cada card (misma idea que en index) */

.program-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.75rem;
  margin-top:.4rem;
}

.program-actions .btn-primary,
.program-actions .btn-secondary{
  width:100%;
  justify-content:center;
  text-align:center;
  padding:.85rem 1rem;
  border-radius:999px;
  font-size:.9rem;
  white-space:normal;
}

/* Responsive para pregrados */

@media (max-width:1024px){
  .program-list{
    grid-template-columns:1fr;
  }
}

@media (max-width:768px){
  .sub-hero{
    padding:2.6rem 1.2rem 1.9rem;
  }

  .uni-header{
    flex-direction:column;
    align-items:flex-start;
  }

  .program-card-h{
    border-radius:1.4rem;
    padding:1.2rem 1.1rem 1.1rem;
  }

  .program-actions{
    grid-template-columns:1fr;
  }
}
/* =========================
   NAV MÓVIL (HAMBURGUESA)
   ========================= */
.nav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  cursor:pointer;
}

.nav-toggle__bars{
  width:18px;
  height:2px;
  background: currentColor;
  position:relative;
  display:block;
  border-radius:2px;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after{
  content:"";
  position:absolute;
  left:0;
  width:18px;
  height:2px;
  background: currentColor;
  border-radius:2px;
}
.nav-toggle__bars::before{ top:-6px; }
.nav-toggle__bars::after{ top:6px; }

/* Contenedor footer mejor alineado */
.footer-grid{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

/* Íconos redes */
.social{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.social-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  transition: transform .12s ease, opacity .12s ease;
}
.social-link:hover{ transform: translateY(-1px); opacity:.95; }
.social-link svg{ width:18px; height:18px; fill: currentColor; }

/* =========================
   TESTIMONIOS
   ========================= */
.testimonials{
  align-items:stretch;
}
.testimonial-card{
  position:relative;
}
.testimonial-stars{
  font-weight:800;
  letter-spacing:2px;
  margin-bottom:10px;
}
.testimonial-quote{
  margin:0 0 14px 0;
  line-height:1.6;
}
.testimonial-meta{
  display:flex;
  flex-direction:column;
  gap:2px;
  opacity:.9;
}
.testimonial-meta span{
  font-size:.92rem;
  opacity:.85;
}
.testimonials-cta{
  margin-top:18px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

/* =========================
   RESPONSIVE NAV
   ========================= */
@media (max-width: 900px){
  .nav-toggle{ display:inline-flex; }

  /* Evita romper tu layout: el nav pasa a panel */
  .topbar .wrap{
    position:relative;
    gap:10px;
  }

  /* Panel colapsable */
  .nav{
    position:absolute;
    top:64px;
    right:0;
    left:0;
    margin:0 12px;
    padding:12px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(15, 23, 42, .92);
    backdrop-filter: blur(14px);
    display:none;          /* cerrado por defecto */
    flex-direction:column; /* vertical */
    gap:10px;
    z-index:50;
  }

  /* Si tu theme claro usa fondos claros, esto mantiene contraste. Si ya tienes variables, puedes cambiarlas por var(...) */
  body:not(.dark) .nav{
    background:rgba(255,255,255,.92);
  }

  .nav a{
    padding:10px 12px;
    border-radius:12px;
    text-decoration:none;
  }

  /* Cuando está abierto */
  body.nav-open .nav{
    display:flex;
  }

  /* Animación de ícono hamburguesa a "X" */
  body.nav-open .nav-toggle__bars{
    background: transparent;
  }
  body.nav-open .nav-toggle__bars::before{
    top:0;
    transform: rotate(45deg);
  }
  body.nav-open .nav-toggle__bars::after{
    top:0;
    transform: rotate(-45deg);
  }
}
/* ============================
   Ajustes hero imagen en modo oscuro
============================ */
.hero-figure img{
  box-shadow:
    0 20px 40px rgba(0,0,0,.4),
    0 8px 16px rgba(0,0,0,.3);
}
/* Justificar texto en cards del bloque Nosotros */
#nosotros .card p{
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}
/* Testimonios: contenedor de video responsivo dentro de la card */
.testimonial-media{
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  margin: 10px 0 14px 0;
}

/* Mantiene relación 16:9 sin salirse */
.testimonial-media__ratio{
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
}

.testimonial-media__ratio iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* En tema claro conserva contraste */
body:not(.dark) .testimonial-media{
  border-color: rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
}

/* =========================
   TESTIMONIOS - ENCABEZADO
   ========================= */
.testimonials-header{
  max-width: 720px;
  margin: 0 auto 32px auto;
  text-align: center;
}

.testimonials-title{
  font-size: clamp(1.6rem, 2.5vw, 2.1rem);
  font-weight: 800;
  margin-bottom: 12px;
}

.testimonials-description{
  font-size: 1.02rem;
  line-height: 1.7;
  opacity: .9;
}
/* FIX DEFINITIVO MENÚ MÓVIL */
@media (max-width: 900px){

  body.nav-open .nav{
    display: flex !important;
    position: fixed;
    top: 72px; /* altura real de tu topbar */
    left: 12px;
    right: 12px;
    z-index: 9999; /* CLAVE */
  }

}
@media (max-width: 900px){
  .nav{
    background: #001f63; /* mismo verde institucional */
    box-shadow: 0 20px 40px rgba(0,0,0,.35);
  }

  .nav a{
    color: #f9fefc;
    font-weight: 600;
  }

  .nav .btn-cta{
    width: 100%;
    text-align: center;
  }
}

/* =========================================================
   MENÚ MÓVIL: PANEL PROFESIONAL Y LEGIBLE (FIX FINAL)
   ========================================================= */
@media (max-width: 900px){

  /* Cuando el menú está abierto, evita que el contenido compita visualmente */
  body.nav-open::before{
    content:"";
    position: fixed;
    inset: 0;
    background: rgba(0, 31, 99, 0.42);
    z-index: 9998;
  }

  /* Panel del menú */
  body.nav-open .nav{
    display: flex !important;
    position: fixed;
    top: 76px;            /* ajusta si tu topbar es más alto/bajo */
    left: 18px;
    right: 18px;
    padding: 10px;
    gap: 10px;
    border-radius: 18px;

    /* Fondo oscuro elegante + blur */
    background: #004f27;
    backdrop-filter: blur(14px);

    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 24px 60px rgba(0,0,0,.45);

    z-index: 9999;
  }

  /* Links legibles */
  body.nav-open .nav a{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 12px 14px;
    border-radius: 14px;

    color: #ffffff !important;
    font-weight: 700;
    text-decoration: none;

    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.10);
  }

  body.nav-open .nav a:hover{
    background: rgba(255,255,255,.12);
  }

  /* Botón CTA dentro del menú: ancho completo */
  body.nav-open .nav .btn-cta{
    width: 100%;
    justify-content: center;
    border-radius: 16px;
    padding: 14px 16px;
    font-weight: 800;
  }

  /* En tema claro: panel sigue siendo oscuro para contraste (recomendado) */
  body:not(.dark).nav-open .nav{
    background: #004f27;
  }

  /* Asegura que el topbar y el toggle de tema queden encima del overlay */
  .topbar{
    position: sticky; /* si ya lo tienes, no afecta */
    top: 0;
    z-index: 10000;
  }
}
/* =================================================
   LOGO CORPADEIN – MISMO TAMAÑO QUE TEXTO DEL HEADER
   ================================================= */

/* El contenedor del logo */
.brand-logo{
  display: flex;
  align-items: center;
  height: 64px;          /* MISMA altura visual del header */
  max-width: 420px;      /* Permite que el logo se vea GRANDE */
}

/* El logo */
.brand-img{
  height: 100%;          /* CLAVE: ocupa toda la altura del brand */
  width: auto;
  max-width: 100%;
  object-fit: contain;   /* nunca se recorta */
  display: block;
}

/* Tablet */
@media (max-width: 1200px){
  .brand-logo{
    height: 56px;
    max-width: 360px;
  }
}

/* Móvil */
@media (max-width: 900px){
  .brand-logo{
    height: 52px;
    max-width: 320px;
  }
}

/* Móvil pequeño */
@media (max-width: 480px){
  .brand-logo{
    height: 46px;
    max-width: 260px;
  }
}
/* =========================
   CHECKBOX LEGAL – ACCESIBLE
   ========================= */
.legal-check{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  font-size: 0.95rem;
  line-height: 1.4;
}

.legal-check input{
  margin-top: 4px;
  accent-color: var(--accent, #ff7a18);
}

.legal-check a{
  text-decoration: underline;
  font-weight: 600;
}
.legal-check a:hover{
  color: var(--accent, #ff7a18);
}