:root{
  --ink:#0b0b0b; --ink-2:#fafafa;
  --accent:#6A1B9A; /* naranja */
  --topbar:#000; --topbar-line:#6A1B9A;
  --pill-bg:#1a1a1a; --pill-ink:#fff; --pill-sub:#996cb4;
}

/* Topbar */
.topbar{ background:var(--topbar); border-bottom:3px solid var(--topbar-line); }
.navbar .nav-link{ color:#ddd; }
.navbar .nav-link:hover{ color:#fff; }
.text-accent{ color:var(--accent)!important; }

/* Hero */
.hero-wrap{ min-height: 60vh; }
.hero-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:brightness(0.6);
}
.hero-overlay{ position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.7),rgba(0,0,0,.1)); }
.hero-content{ position:relative; padding: clamp(2rem,5vw,4rem) 0; }

/* Botón principal */
.btn-accent{
  background:var(--accent); border:none; color:#fff; padding:.8rem 1.25rem; border-radius:999px;
}
.btn-accent:hover{ filter:brightness(.95); color:#fff; }

/* Píldoras */
.pill-card{
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-decoration:none; background:var(--pill-bg); color:var(--pill-ink);
  border-radius:16px; padding:18px 22px; min-width:220px;
  box-shadow:0 2px 4px rgba(0,0,0,.25);
  transition:transform .15s ease, box-shadow .15s ease;
}
.pill-card:hover{ transform:translateY(-2px); box-shadow:0 6px 14px rgba(0,0,0,.3); color:#fff; }
.pill-title{ font-weight:700; text-align:center; }
.pill-sub{ font-size:.9rem; color:var(--pill-sub); margin-top:.25rem; }

/* FABs */
/* .fab{
  position:fixed; right:18px; width:48px; height:48px; border-radius:50%;
  box-shadow:0 8px 20px rgba(0,0,0,.25); z-index:1040;
  background:#25d366 center/60% no-repeat; bottom:22px;
}
.fab-mail{ bottom:82px; background:#6A1B9A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' fill='white' class='bi bi-envelope'%3E%3Cpath d='M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2z'/%3E%3Cpath d='M.05 4.555L8 9.414l7.95-4.86' fill='none' stroke='white'/%3E%3C/svg%3E") no-repeat center/60%; }
.fab-whatsapp{ background:#25d366 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M13.6 2.3A7.7 7.7 0 0 0 8.1.1 7.9 7.9 0 0 0 .2 8.4l-1 3.7 3.8-1A7.9 7.9 0 0 0 8 15.9h.3a7.8 7.8 0 0 0 5.3-13.6zM8 14.1A6.1 6.1 0 0 1 3.6 12l-.3-.2-2.3.6.6-2.2-.1-.3A6.1 6.1 0 1 1 8 14.1zm3.4-4.6c-.2-.1-1.3-.6-1.5-.7s-.4-.1-.6.1-.7.7-.8.8-.3.2-.6.1a5 5 0 0 1-1.5-1 5.4 5.4 0 0 1-1-1.5c-.1-.3 0-.4.2-.6l.5-.5.2-.3c.1-.2 0-.3 0-.4L5.5 4c-.2-.4-.4-.3-.5-.3h-.4l-.4.2a1.1 1.1 0 0 0-.5.9c0 .5.3 1 .4 1.2.2.4.5.8 1 1.3a9.9 9.9 0 0 0 1.9 1.9c.4.2.8.4 1.2.5.5.2 1 .1 1.4.1.5 0 1-.4 1.1-.8.2-.4.2-.7.1-.8 0-.1-.1-.1-.3-.2z'/%3E%3C/svg%3E"); }
 */

/* --- Mega submenu Oferta educativa --- */
.oferta-panel{
  position:absolute; left:0; right:0; top:100%;
  background:#0f0f0f; border-bottom:2px solid var(--topbar-line);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  display:none; z-index:1030;
}
.oferta-panel.show{ display:block; }

.submenu-bar .btn-submenu{
  background:#1b1b1b; color:#f4f4f4; border:1px solid #2a2a2a;
  border-radius:14px; padding:.6rem 1rem; font-weight:600;
}
.submenu-bar .btn-submenu:hover{
  color:#ffffff; border-color:#3a3a3a; transform:translateY(-1px);
}

/* Espaciado correcto cuando hay hero debajo */
.topbar{ position:relative; z-index:1040; }

/* En móvil, que ocupe toda la fila y sea clicable cómodamente */
@media (max-width: 991.98px){
  .submenu-bar .btn-submenu{ flex:1 1 100%; text-align:center; }
}

/* placeholder visible sobre fondo oscuro */
.navbar .input-group .form-control::placeholder{
  color: rgba(255,255,255,.7);  /* más claro */
  opacity: 1;                   /* Firefox */
}

/* opcional: mejora contraste del icono a la izquierda */
.navbar .input-group .input-group-text{
  color: rgba(255,255,255,.7);
}

/* opcional: ancho mínimo para que se lea cómodo */
.navbar form[role="search"] .form-control{
  min-width: 260px;
}


.brand-text {
  font-size: 1.7rem;    /* prueba con 1.4, 1.5, 1.6rem según se vea mejor */
  letter-spacing: 0.5px;
}


.topbar{
  border-bottom:4px solid #6A1B9A;  /* solo el header en blanco */
}




/* Botón destacado para Oferta educativa */
.btn-oferta{
  background: var(--accent);
  color: #fff !important;
  font-weight: 700;
  padding: .5rem .9rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 6px 16px rgba(255,106,0,.35);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn-oferta:hover{
  filter: brightness(.95);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(255,106,0,.45);
}
.btn-oferta:active{
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(255,106,0,.35);
}
.btn-oferta:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 3px rgba(255,255,255,.25), 0 0 0 6px rgba(255,106,0,.55);
}

/* Giro del caret cuando el panel está abierto */
.btn-oferta.is-open .caret{ transform: rotate(180deg); }
.caret{ transition: transform .12s ease; }

/* — Alternativa ligera (si prefieres borde en vez de fondo sólido) — */
.btn-oferta{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.25);
  color: #fff !important;
  backdrop-filter: blur(6px);
}
.btn-oferta:hover{ background: rgba(255,255,255,.12); }


/* Placeholders visibles en todo el sitio */
::placeholder { color: #bfc5cf !important; opacity: 1; }
::-webkit-input-placeholder { color: #bfc5cf !important; opacity: 1; }
::-moz-placeholder { color: #bfc5cf !important; opacity: 1; }
:-ms-input-placeholder { color: #bfc5cf !important; opacity: 1; }
:-moz-placeholder { color: #bfc5cf !important; opacity: 1; }

/* Afinar por zonas oscuras */
.topbar .form-control::placeholder,
.modal .form-control::placeholder {
  color: #c8cdd6 !important;  /* un poco más claro para fondos oscuros */
}

/* Evitar que Chrome ponga amarillo con autofill y tape el placeholder */
input:-webkit-autofill,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0px 1000px #212529 inset; /* mismo tono que bg-dark */
  transition: background-color 5000s ease-in-out 0s;
}

/* Botón principal (arregla hover que “borra” el fondo) */
.btn.btn-accent{
  background: var(--accent) !important;
  border: none;
  color: #fff;
  padding: .8rem 1.25rem;
  border-radius: 999px;
  transition: background-color .15s ease, filter .15s ease, box-shadow .15s ease, transform .12s ease;
}

.btn.btn-accent:hover,
.btn.btn-accent:focus{
  background: var(--accent) !important;   /* evita que Bootstrap lo cambie */
  color: #fff;
  filter: brightness(1.05);                /* pequeño realce, sin desaparecer */
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  text-decoration: none;
}

.btn.btn-accent:active{
  background: var(--accent) !important;
  filter: brightness(.95);
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  transform: translateY(0);               /* sensación de “click” sin hundirse demasiado */
}

.btn.btn-accent:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 3px rgba(255,255,255,.25), 0 0 0 6px rgba(106,27,154,.45);
}



/*  */
/* Tamaño del buscador */
.topbar .input-group.search-lg {
  min-width: 360px;             /* hazlo 400–460px si quieres más ancho */
}
.topbar .input-group.search-lg .input-group-text {
  height: 44px;                 /* alto del icono/lado izquierdo */
  min-width: 44px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
  border-radius: 999px 0 0 999px;
}
.topbar .input-group.search-lg .form-control {
  height: 44px;                 /* alto del input */
  font-size: 0.95rem;
  padding: .6rem .95rem;
  border-radius: 0 999px 999px 0;
}

/* Botones de icono a la derecha (usuario y menú) */
.icon-btn{
  background: #121212;
  color: #fff !important;
  width: 42px;                  /* 44–48px si los quieres más grandes */
  height: 42px;
  border-radius: 999px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.12);
  transition: filter .12s ease, box-shadow .12s ease, transform .12s ease;
}
.icon-btn i{ font-size: 1.15rem; }
.icon-btn:hover{ filter: brightness(1.1); box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.icon-btn:active{ transform: translateY(0); }

/* (opcional) coherencia con el placeholder e icono del buscador */
.topbar .input-group.search-lg .form-control::placeholder{ color: rgba(255,255,255,.75); }
.topbar .input-group.search-lg .input-group-text{ color: rgba(255,255,255,.75); }




/* Franja morada de hitos */
.iuaf-stripe{
  background:#6A1B9A; /* morado solicitado */
}
.text-white-75{ color:rgba(255,255,255,.75)!important; }

.timeline{
  gap: 24px;
  flex-wrap: wrap;
  position: relative;
}

/* Línea punteada entre hitos (desktop) */
.timeline .sep{
  height: 2px;
  flex: 1 1 auto;
  align-self: center;
  border-top: 2px dotted rgba(255,255,255,.8);
  margin: 0 8px;
}

/* Tarjetas de hito */
.kpi{
  min-width: 140px;
}
.kpi .icon{
  width: 52px; height: 52px;
  border: 2px solid rgba(255,255,255,.85);
  border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: .5rem;
  background: rgba(255,255,255,.08);
  box-shadow: 0 4px 14px rgba(0,0,0,.18) inset;
}
.kpi .year{
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1.1;
}
.kpi .label{
  margin-top: .15rem;
}

/* Un poco más de aire en pantallas grandes */
@media (min-width: 992px){
  .timeline{ gap: 36px; }
  .kpi{ min-width: 160px; }
}



/* Sección Programas populares */
.pp-wrap{
  background:#111;            /* bloque negro */
  padding: 56px 0 40px;
  position: relative;
  overflow: hidden;
}
.pp-heading .pp-underline{
  width: 80px; height: 4px;
  background: #6A1B9A;        /* tu color */
  border-radius: 999px;
  margin-bottom: 20px;
}

/* Tabs */
.pp-tabs .nav-link{
  color:#ddd;
  background: transparent;
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;
  padding:.6rem 1.2rem;
  margin-right:.5rem;
}
.pp-tabs .nav-link:hover{
  color:#fff; border-color: rgba(255,255,255,.4);
}
.pp-tabs .nav-link.active{
  color:#fff;
  background:#6A1B9A;
  border-color:#6A1B9A;
  box-shadow: 0 6px 18px rgba(106,27,154,.35);
}

/* Card */
.pp-card{
  position:relative;
  color:#111;
  background:#fff;
  border-radius: 14px;
  padding: 22px 22px 18px;
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
}

/* Imagen “flotando” arriba del negro */
.pp-card .pp-img{
  margin-top: -140px;         /* saca la imagen por encima del bloque oscuro */
  margin-bottom: 14px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 14px 32px rgba(0,0,0,.45);
}
.pp-card .pp-img img{
  display:block; width:100%; height:auto;
}

/* Chip morado arriba del título */
.pp-chip{
  display:inline-block;
  background:#6A1B9A;
  color:#fff;
  font-weight:700;
  font-size:.85rem;
  padding:.35rem .75rem;
  border-radius:999px;
  margin-bottom:.5rem;
}

.pp-title{
  font-size:1.4rem;
  font-weight:800;
  color:#111;
  margin:0 0 .25rem 0;
}
.pp-desc{
  color:#444;
  margin:0 0 .75rem 0;
}
.pp-meta{
  color:#6A1B9A;
  font-weight:700;
}

/* Ajuste responsivo */
@media (max-width: 991.98px){
  .pp-card .pp-img{ margin-top:-100px; }
}


/* --- Fix: que las imágenes no capturen los clics --- */
.pp-card .pp-img,
.pp-card .pp-img img{
  pointer-events: none;
}

/* (Opcional) Asegura que el encabezado y las tabs queden por encima en el stacking */
.pp-heading,
.pp-tabs{
  position: relative;
  z-index: 2;
}
.pp-card .pp-img{
  position: relative;
  z-index: 0;
}




/* ==========================
   Programas populares: banda oscura + cards superpuestas
   ========================== */

/* Alturas “tuneables” */
:root{
  --pp-band: 320px;        /* alto de la franja oscura arriba */
  --pp-pop-offset: 140px;  /* cuánto sube la imagen para invadir la franja */
}

/* La sección ahora tiene mitad negra (arriba) y blanco abajo */
.pp-wrap{
  /* banda oscura arriba y blanco abajo */
  background: linear-gradient(#111 0, #111 var(--pp-band), #fff var(--pp-band), #fff 100%);
  padding-top: calc(var(--pp-band) - var(--pp-pop-offset)); /* deja espacio para que las imágenes suban */
  padding-bottom: 56px;
  position: relative;
  overflow: visible; /* deja que las imágenes respiren */
}

/* Encabezado y tabs siempre por encima de las imágenes */
.pp-heading,
.pp-tabs{
  position: relative;
  z-index: 3;
}

/* Card y su imagen “flotando” */
.pp-card{
  position: relative;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
}

/* Sube la imagen para que invada la franja oscura */
.pp-card .pp-img{
  margin-top: calc(-1 * var(--pp-pop-offset));
  margin-bottom: 14px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 14px 32px rgba(0,0,0,.45);
  position: relative;
  z-index: 1; /* debajo de tabs/heading, encima del fondo */
}

/* Evita que la imagen “tape” los clics detrás (si no es clicable) */
.pp-card .pp-img,
.pp-card .pp-img img{ pointer-events: none; }

/* Texto/meta */
.pp-title{ color:#111; }
.pp-desc{ color:#444; }
.pp-meta{ color:#6A1B9A; font-weight:700; }

/* Responsive: baja un poco la banda y el offset en móvil */
@media (max-width: 991.98px){
  :root{
    --pp-band: 240px;
    --pp-pop-offset: 100px;
  }
  .pp-card .pp-img{ margin-top: calc(-1 * var(--pp-pop-offset)); }
}


/* 
 */
 /* ===============================
   PP header arriba en la franja negra
   (sin mover las cards ni las imágenes)
   =============================== */

/* Ajustes “tuneables” */
:root{
  --pp-band: 320px;        /* alto de la franja oscura (ya lo tenías)   */
  --pp-pop-offset: 140px;  /* cuánto sube la imagen (ya lo tenías)       */
  --pp-head-shift: 120px;  /* cuánto sube el título + tabs a lo negro    */
}

/* Banda negra + espacio para header y pop de imagen */
.pp-wrap{
  /* Negra arriba, blanco abajo */
  background: linear-gradient(#111 0, #111 var(--pp-band), #fff var(--pp-band), #fff 100%);
  /* Reservo espacio:
     (banda negra - pop de imagen) + el hueco que ocupa el header en flujo */
  padding-top: calc(var(--pp-band) - var(--pp-pop-offset) + var(--pp-head-shift));
  padding-bottom: 56px;
  position: relative;
  overflow: visible;
}

/* Muevo visualmente el heading y las tabs hacia arriba, a la franja negra */
.pp-heading,
.pp-tabs{
  position: relative;
  z-index: 4;
  transform: translateY(calc(-1 * var(--pp-head-shift)));
}

/* La imagen sigue invadiendo desde abajo como ya lo tienes */
.pp-card .pp-img{
  margin-top: calc(-1 * var(--pp-pop-offset));
  position: relative;
  z-index: 1;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 14px 32px rgba(0,0,0,.45);
}

/* Evita que la imagen tape clics si no es clicable */
.pp-card .pp-img,
.pp-card .pp-img img{ pointer-events: none; }

/* Responsive: sube/ajusta un poco menos en móvil */
@media (max-width: 991.98px){
  :root{
    --pp-band: 240px;
    --pp-pop-offset: 100px;
    --pp-head-shift: 90px;
  }
}


/* ==========================
   Programas populares: franja negra + imagen a caballo
   ========================== */
:root{
  --pp-band: 320px;        /* alto de la franja negra arriba */
  --pp-pop-offset: 140px;  /* cuánto sube la imagen para invadir la franja */
  --pp-head-shift: 120px;  /* cuánto suben TÍTULO + TABS hacia lo negro */
}

/* Franja negra arriba y blanco abajo */
.pp-wrap{
  background: linear-gradient(#111 0, #111 var(--pp-band), #fff var(--pp-band), #fff 100%);
  /* OJO: NO sumar --pp-head-shift aquí, así las imágenes NO se bajan */
  padding-top: calc(var(--pp-band) - var(--pp-pop-offset));
  padding-bottom: 56px;
  position: relative;
  overflow: visible;
}

/* Título + tabs suben visualmente a la franja negra */
.pp-heading,
.pp-tabs{
  position: relative;
  z-index: 4;
  transform: translateY(calc(-1 * var(--pp-head-shift)));
}

/* Si quieres reducir el hueco entre título y tabs al subirlos */
.pp-heading{ margin-bottom: .25rem; }
.pp-tabs{ margin-top: .25rem; }

/* Imagen “flotando” a caballo del negro y blanco */
.pp-card .pp-img{
  margin-top: calc(-1 * var(--pp-pop-offset));
  margin-bottom: 14px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 14px 32px rgba(0,0,0,.45);
  position: relative;
  z-index: 1;
}

/* Evita que la imagen bloquee clics detrás (si no es clicable) */
.pp-card .pp-img,
.pp-card .pp-img img{ pointer-events: none; }

/* Encabezado por encima de todo */
.pp-heading .pp-underline{ width: 80px; height: 4px; background:#6A1B9A; border-radius:999px; }

/* Responsive */
@media (max-width: 991.98px){
  :root{
    --pp-band: 240px;
    --pp-pop-offset: 100px;
    --pp-head-shift: 90px;
  }
}


/*  */
/* ====== Sección ¿Por qué elegir…? ====== */
.why-wrap{
  background:#3c3c3c;              /* fondo gris oscuro del ejemplo */
  position:relative;
}

.why-heading .why-underline{
  width:110px; height:6px;
  background: var(--accent);       /* morado 6A1B9A */
  border-radius:999px;
}

.hl{ color:#b861ee; font-weight:700; }  /* texto destacado morado */

/* Íconos estilo línea blanca con acento morado */
.why-icon svg{
  width:72px; height:72px;
}
.why-icon .st{
  fill:none; stroke:#fff; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round;
}
.why-icon .accent{
  fill: rgba(106,27,154,.18);       /* morado suave de relleno */
  stroke: var(--accent);
  stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round;
}

/* Tarjeta/ítem */
.why-item{
  padding: 12px 10px;
  border-radius: 16px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.why-item:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

/* Responsive: un poco más compacta en móvil */
@media (max-width: 991.98px){
  .why-icon svg{ width:64px; height:64px; }
}


/* ====== ¿Por qué elegir…? (versión 2) ====== */
.why2-wrap{ background:#3b3b3b; }                   /* gris del ejemplo */
.why2-head{ text-align:left; margin-bottom: 28px; }
.why2-underline{ width:110px; height:6px; background:#b861ee; border-radius:999px; }

.hl{ color:#b764eb; font-weight:700; }

/* Grid 4 columnas desktop / 2×2 móvil */
.why2-grid{
  display:grid;
  gap:28px;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 991.98px){
  .why2-grid{ grid-template-columns: repeat(2, 1fr); gap:22px; }
}
@media (max-width: 575.98px){
  .why2-grid{ grid-template-columns: 1fr; }
}

/* Card */
.why2-card{
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:22px 18px 20px;
  text-align:center;
  position:relative;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.why2-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(0,0,0,.26);
  border-color: rgba(255,255,255,.15);
}

/* Separadores verticales sutiles (solo >=lg) */
@media (min-width: 992px){
  .why2-card:not(:last-child)::after{
    content:"";
    position:absolute; top:18px; bottom:18px; right:-14px; width:1px;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,.12), transparent);
  }
}

/* Icono en círculo */
.why2-icon{
  width:76px; height:76px; margin: 4px auto 10px;
  border-radius:50%;
  display:grid; place-items:center;
  background: radial-gradient(closest-side, rgba(106,27,154,.15), rgba(106,27,154,.05));
  border: 2px solid rgba(255,255,255,.22);
}
.why2-icon svg{ width:44px; height:44px; }
.why2-icon .st{ fill:none; stroke:#fff; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.why2-icon .acc{ fill:rgba(96, 34, 134, 0.18); stroke:var(--accent); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }

/* Tipografías */
.why2-value{ color:#fff; font-weight:800; font-size: clamp(1.6rem, 2.2vw, 2.2rem); line-height:1; }
.why2-title{ color:#ddd; font-weight:700; margin-top:2px; letter-spacing:.2px; }
.why2-desc{ color:rgba(255,255,255,.8); margin:10px auto 0; max-width: 32ch; font-size:.98rem; }

/* Espaciado del bloque */
.py-6{ padding-top:3.5rem; padding-bottom:3.5rem; }





/* Paleta */
:root{
  --paper:#f8f4f4;           /* gris muy claro del fondo */
  --ink-900:#000000;         /* texto principal oscuro */
  --ink-600:#000000;         /* texto secundario */
  --accent:#6A1B9A;          /* tu morado */
}

/* Sección */
.flex-ed-wrap{
  background: var(--paper);
  color: var(--ink-900);
  padding: 56px 0 48px;
}

/* Encabezado */
.flex-ed-head{ max-width: 980px; margin: 0 auto 26px; }
.flex-ed-head h2{ color: var(--ink-900); }
.flex-ed-underline{
  width: 110px; height: 6px; border-radius: 999px;
  background: var(--accent);
  margin: 12px 0 18px;
}
.flex-ed-head .lead{ color: var(--ink-600); }

/* Grid de 4 → 2 → 1 */
.flex-ed-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 26px;
}
@media (max-width: 1199.98px){
  .flex-ed-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px){
  .flex-ed-grid{ grid-template-columns: 1fr; gap: 22px; }
}

/* Item con barra morada a la izquierda (antes era naranja) */
.flex-ed-item{
  padding-left: 18px;
  border-left: 6px solid var(--accent);
}
.flex-ed-title{
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0 0 .35rem 0;
}
.flex-ed-desc{
  color: var(--ink-600);
  margin: 0;
}

/* Nota al pie */
.flex-ed-footnote{ margin-top: 22px; }


/*  */


 /* Usa tu variable global; si no existe, la defino aquí */
:root{ --accent:#6A1B9A; --ink-900:#212121; }

/* Sección blanca */
.model-wrap{ background:#fff; padding:56px 0 64px; color:var(--ink-900); }

.model-head h2{ color:var(--ink-900); }
.model-underline{
  width:110px; height:6px; border-radius:999px;
  background:var(--accent); margin:12px auto 0;
}

/* Item */
.model-item{ max-width: 520px; margin-inline:auto; }
.model-title{
  font-size:1.05rem; font-weight:800; margin:.35rem 0 .25rem;
  color:var(--accent);
}
.model-text{ margin:0; }

/* Ícono circular con acento morado (reemplaza lo naranja) */
.model-ico{
  width:68px; height:68px; margin:8px auto 10px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--accent);
  position:relative;
}
.model-ico i{
  font-size:28px; line-height:1; color:var(--accent);
}

/* Pequeño adorno semicírculo (opcional, estilo Anáhuac) */
.model-ico::after{
  content:""; position:absolute; right:-6px; top:10px;
  width:14px; height:14px; border-radius:50%;
  border:3px solid var(--accent);
  border-left-color:transparent; border-bottom-color:transparent;
  transform:rotate(20deg);
  opacity:.9;
}

/* Responsive spacing */
@media (max-width: 575.98px){
  .model-wrap{ padding:44px 0 56px; }
}



/*  */

/* Paleta */
:root{
  --accent: #6A1B9A;      /* morado principal */
  --accent-700: #7B33B3;  /* +claro */
  --accent-600: #8C4BC0;  /* ++claro */
  --ink-2: #fff;
}

/* CTA con diagonales (betas) */
.cta-iuaf{
  position: relative;
  padding: clamp(56px, 10vw, 96px) 0;
  color: var(--ink-2);

  /* Capa base morada */
  background:
    /* brillo radial sutil al centro */
    radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.14), rgba(255,255,255,0) 55%),
    /* franjas diagonales claras */
    repeating-linear-gradient(
      135deg,
      var(--accent)         0px,
      var(--accent)        120px,
      var(--accent-700)    120px,
      var(--accent-700)    240px,
      var(--accent-600)    240px,
      var(--accent-600)    360px
    );
  /* opcional: textura muy leve para profundidad */
  background-blend-mode: screen, normal;
}

.cta-iuaf .container{ position: relative; z-index: 1; }

.cta-title{
  font-weight: 800;
  line-height: 1.15;
  font-size: clamp(1.4rem, 2.6vw, 2.4rem);
  margin: 0 0 .4rem;
}

.cta-sub{
  opacity: .95;
  font-size: clamp(.95rem, 1.6vw, 1.15rem);
  margin: 0;
}

/* Botón */
.btn-cta{
  display:inline-block;
  background:#0b0b0b;
  color:#fff !important;
  border:none;
  padding:.9rem 1.4rem;
  border-radius:999px;
  font-weight:700;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.btn-cta:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow:0 14px 30px rgba(0,0,0,.28);
}
.btn-cta:active{ transform: translateY(0); }


/*  */


/* Sección "validez oficial" */
.official-wrap{
  background:#f6f7f8; /* gris muy claro */
}

/* Subrayado morado del título */
.sec-underline{
  width: 120px;
  height: 6px;
  background:#6A1B9A;
  border-radius: 999px;
}

/* Carrusel */
.object-fit-cover{ object-fit: cover; }

/* Indicadores en morado */
.official-carousel .carousel-indicators [data-bs-target]{
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(106,27,154,.35);
}
.official-carousel .carousel-indicators .active{
  background: #6A1B9A;
}

/* Flechas más visibles sobre imágenes claras */
.official-carousel .carousel-control-prev-icon,
.official-carousel .carousel-control-next-icon{
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
}


/*  */


/* Budly section */
.budly-wrap{
  background:#f1f1f3;               /* gris claro del ejemplo */
  padding: 64px 0;                   /* py-6 aprox */
}

.budly-logo{
  height: 56px;                      /* ajusta según tu logotipo real */
  width: auto;
  filter: grayscale(100%) contrast(110%);
}

.budly-aside{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  padding:24px;
  box-shadow:0 10px 26px rgba(0,0,0,.08);
}

.qs-badge{
  height:56px; width:auto;
}

/* Botón morado consistente con el sitio */
.btn-budly{
  background:#6A1B9A;
  color:#fff;
  border:none;
  border-radius:999px;
  padding:.7rem 1.2rem;
  font-weight:700;
  box-shadow:0 8px 22px rgba(106,27,154,.25);
  transition:filter .15s ease, transform .12s ease, box-shadow .15s ease;
}
.btn-budly:hover{
  filter:brightness(1.05);
  transform:translateY(-1px);
  color:#fff;
}
.btn-budly:active{ transform:translateY(0); }

/* Responsive tweaks */
@media (max-width: 991.98px){
  .budly-aside{ padding:20px; }
  .budly-logo{ height:48px; }
}

/*  */

/* Spotlight universidad */
.uni-spotlight{
  background:#eaeaee;
  padding: clamp(48px, 6vw, 88px) 0;
}

/* wrapper gráfico */
.uni-mark-wrap{
  position: relative;
  aspect-ratio: 3 / 2.5;              /* mantiene proporción del bloque */
  max-width: 620px;
  margin-inline: auto;
}

/* patrón diagonal */
.uni-pattern{
  position:absolute; inset:0;
  width:100%; height:100%;
}

/* monograma “A” grande */
.uni-A{
  position:absolute; inset:0;
  width:78%; height:auto;
  margin:auto;
  filter: drop-shadow(0 18px 32px rgba(0,0,0,.12));
}

/* encabezado */
.uni-underline{
  width:92px; height:5px; border-radius:999px;
  background:#6A1B9A; margin:8px 0 18px 0;
}

/* enlace con flecha */
.uni-link{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:700; text-decoration:none;
  color:#6A1B9A;
}
.uni-link:hover{ color:#53167c; }
.uni-arrow{
  display:inline-block; transition: transform .15s ease;
}
.uni-link:hover .uni-arrow{ transform: translateX(4px); }

/* responsive */
@media (max-width: 991.98px){
  .uni-A{ width:68%; }
}


/* Contenedor gráfico */
.uni-mark-wrap{
  position: relative;
  isolation: isolate;         /* crea un stacking context propio */
  aspect-ratio: 3 / 2.5;
  max-width: 620px;
  margin-inline: auto;
}

/* Patrón diagonal: ABAJO */
.uni-pattern{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;                  /* debajo */
  pointer-events: none;
}

/* Monograma “A”: ARRIBA */
.uni-A{
  position: absolute;
  inset: 0;
  width: 78%;
  height: auto;
  margin: auto;
  z-index: 2;                  /* arriba del patrón */
  filter: drop-shadow(0 18px 32px rgba(0,0,0,.12));
  pointer-events: none;
}

/* (opcional) en móvil ajusta tamaño */
@media (max-width: 991.98px){
  .uni-A{ width: 68%; }
}


/*  */


/* Sección video + cita */
.video-quote-wrap{
  padding: 56px 0;
}

/* Marco del video */
.vq-frame{
  background:#0f0f0f;                 /* marco oscuro */
  border-radius:16px;
  padding:10px;                       /* borde/marco */
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}
.vq-frame .ratio{
  border-radius:12px;
  overflow:hidden;
}

/* Patrón detrás de la cita */
.vq-pattern{
  position:absolute;
  right: -10px;
  top: -20px;
  width: 75%;
  height: 85%;
  color:#000;                         /* base del patrón */
  z-index:0;
  pointer-events:none;
}

/* Cita */
.vq-quote{
  position:relative;
  z-index:1;
  font-size:1.1rem;
  line-height:1.65;
}
.vq-quote p{ margin:0; }

.vq-mark{
  color: var(--accent, #6A1B9A);       /* usa tu morado */
  font-weight: 900;
  font-size: 2.2rem;
  line-height: 1;
}
.vq-open{
  position:absolute;
  left:-.25rem;
  top:-.75rem;
}
.vq-close{
  position:absolute;
  right:-.25rem;
  bottom:-.75rem;
}

.vq-cite .fw-semibold{ letter-spacing:.2px; }

/* Responsivo */
@media (max-width: 991.98px){
  .vq-pattern{ width: 100%; height: 60%; right: 0; top: -10px; }
  .vq-open{ left:0; top:-.5rem; }
  .vq-close{ right:0; bottom:-.5rem; }
}



/*  */

/* ====== Banda de contacto ====== */
.leaders-wrap{
  background:#1f1f1f;                /* oscuro (la de arriba) */
  color:#e9e9e9;
  padding:48px 0 36px;
  border-top: 1px solid rgba(255,255,255,.04);
}

.leaders-brand .brand-title{
  font-weight:800;
  font-size:clamp(1.3rem, 2.8vw, 2rem);
  letter-spacing:.5px;
  line-height:1.02;
}
.leaders-underline{
  width:110px; height:4px;
  background: var(--accent, #6A1B9A);
  border-radius:999px;
  margin-top:14px;
}

.leaders-h{
  font-size:1.05rem;
  font-weight:700;
  color:#fff;
  margin-bottom:.6rem;
}

.leaders-list{
  list-style:none; padding:0; margin:0;
}
.leaders-list li{
  display:flex; align-items:flex-start;
  gap:.6rem; padding:.25rem 0;
}
.leaders-list i{
  color: var(--accent, #6A1B9A);
  margin-top:.25rem;
}
.leaders-list a{
  color:#e9e9e9; text-decoration:none;
}
.leaders-list a:hover{
  color:#fff; text-decoration:underline;
}

/* ====== Footer negro ====== */
.site-footer{
  background:#000000;                 /* negro */
  padding:16px 0;
  border-top:1px solid rgba(255,255,255,.06);
}
.footer-grid{
  display:flex; gap:16px; align-items:center;
  justify-content:space-between; flex-wrap:wrap;
}
.footer-link{
  color:#cfcfe6; text-decoration:none;
  border-bottom:1px dotted rgba(255,255,255,.35);
}
.footer-link:hover{
  color:#fff; border-bottom-color:transparent;
}

/* Responsivo */
@media (max-width: 991.98px){
  .leaders-wrap{ padding:40px 0 28px; }
  .leaders-h{ margin-top:.25rem; }
}



/* Botones flotantes (versión con <i> de Bootstrap Icons) */
.fab{
  position: fixed;
  right: 18px;
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  z-index: 1050;
  box-shadow: 0 10px 24px rgba(0,0,0,.25), inset 0 0 0 3px #fff;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
  background-image: none !important;          /* 🔒 evita que otra regla meta un BG */
}

.fab i{
  font-size: 26px; line-height: 1;
  color: #fff !important;                      /* 🔒 fuerza blanco */
}

.fab:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0,0,0,.35), inset 0 0 0 3px #fff;
}

.fab:active{ transform: translateY(0); }

.fab-whatsapp{ bottom: 18px; background: #25D366; }
.fab-mail    { bottom: 86px; background: #6A1B9A; }

@media (prefers-reduced-motion: reduce){ .fab{ transition: none; } }




/* En tu site.css */
#licenciatura-derecho,
#maestria-derecho,
#maestria-procesal,
#doctorado-derecho,
#doctorado-innovacion,
#jornadas-titulacion {
  scroll-margin-top: 90px; /* ajusta según la altura real del header */
}