/* Add your own custom css to this file. You may wish to use css !important calls to override css from the template css files.
----------------------------------------------------------- */
/* Forzar que el componente respete siempre el esquema de color claro/estándar */


a:link {
    color: #967c2e;
}

a:visited {
    color: #967c2e;
}

a:hover {
    color: #967c2e;
}

#s5_accordion_menu ul li span {
    color: #967c2e;
}

#s5_accordion_menu a a:hover a:visited a:link {
    color: #967c2e;
}

#s5_logo_wrap {
    padding-left: 30px;
}

.module_round_box ul.menu li span, .module_round_box ul.menu li a, #s5_nav li, .S5_subtext, .S5_parent_subtext, .S5_submenu_item, .S5_submenu_item a, .S5_submenu_item span, #s5_nav li a, .S5_submenu_item{
    text-transform: none;
}


.padtop {
margin-top: 35px;
}

#s5_menu_wrap.s5_wrap_fmfullwidth #s5_logo_wrap {
    margin-top: -5px;
}
/* GRID */
.ejes-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
}

/* neutraliza Bootstrap */
.ejes-grid > .span4,
.ejes-grid > .span6 {
  float: none !important;
  margin-left: 0 !important;
}

/* 3 arriba */
.ejes-grid > .span4 {
  flex: 0 0 calc(33.333% - 40px);
}

.ejes-grid > .span4 .eje-box {
  min-height: 190px;
}

/* 2 abajo */
.ejes-grid > .span6 {
  flex: 0 0 calc(50% - 40px);
}

.ejes-grid > .span6 .eje-box {
  min-height: 150px;
}

/* tarjeta */
.eje-box {
  background: rgba(255, 255, 255, 0.95);
  padding: 30px;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 8px 22px rgba(0,0,0,0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.eje-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 30px rgba(0,0,0,0.25);
}

.eje-box h4 {
  margin: 0 0 12px;
  font-weight: 600;
  color: #1f2d3d;
}

.eje-box p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: #444;
}

/* móvil */
@media (max-width: 768px) {
  .ejes-grid > .span4,
  .ejes-grid > .span6 {
    flex: 0 0 100%;
  }

  .ejes-grid > .span4 .eje-box,
  .ejes-grid > .span6 .eje-box {
    min-height: auto;
  }
}
.ejes-lista {
  max-width: 1100px;
  margin: 0 auto 60px;
}

.eje-horizontal {
  display: flex;
  align-items: center;
  gap: 25px;
  background: rgba(255,255,255,0.95);
  padding: 28px 32px;
  margin-bottom: 28px;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

.eje-horizontal img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  flex-shrink: 0;
}

.eje-horizontal h4 {
  margin: 0 0 10px;
  color: #0b5d7a;
  font-weight: 600;
}

.eje-horizontal p {
  margin: 0;
  color: #444;
  line-height: 1.6;
  font-size: 15px;
}

/* Responsive */
@media (max-width: 768px) {
  .eje-horizontal {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .eje-horizontal img {
    margin-bottom: 15px;
  }
}
.eje-horizontal {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.eje-horizontal:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.22);
}
/* ===== GRID ===== */

.people-wrapper {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.people-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px 40px;
}

.people-top {
  margin-bottom: 40px;
}
/* ===== SOLO FILA SUPERIOR: 2 PERSONAS ===== */
.people-wrapper.people-top {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px 40px;
  justify-items: center;
}

/* ===== PERSON CARD (NO fondo — se mantiene limpio) ===== */

.person-card {
  cursor: pointer;
}

.person-photo {
  width: 190px;
  height: 190px;
  margin: 0 auto 15px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(0,0,0,.15);
  transition: transform .35s ease, box-shadow .35s ease;
}

.person-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.person-card:hover .person-photo {
  transform: scale(1.08);
  box-shadow: 0 16px 34px rgba(0,0,0,.25);
}

.person-name {
  font-weight: 600;
  color: #1f2d3d;
}

.person-role {
  font-size: 14px;
  color: #0b5d7a;
  font-weight: 600;
}

.person-affil {
  font-size: 14px;
  color: #7a3ea1;
}


/* ===== MODAL FLOAT CARD ===== */

.person-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.person-modal.active {
  display: flex;
}

.person-modal-card {
  background: #e9eef3; /* ✅ SOLO aquí va tu color */
  width: 92%;
  max-width: 520px;
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 25px 60px rgba(0,0,0,.35);
  animation: modalPop .25s ease;
  text-align: center;
  position: relative;
}

@keyframes modalPop {
  from { transform: scale(.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}


/* ===== MODAL PHOTO ===== */

.modal-photo {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 15px;
}

.modal-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ocultar si no hay imagen */
.modal-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.person-modal-card img {
  max-width: 100%;
}



/* ===== CLOSE BUTTON ===== */

.modal-close {
  position: absolute;
  right: 14px;
  top: 10px;
  font-size: 22px;
  cursor: pointer;
  color: #666;
}


/* ===== TITLES ===== */

.people-title {
  text-align:center;
  margin: 50px 0 20px;
  color: #1957d1;
}
.people-title2 {
  text-align:center;
  margin: 50px 0 20px;
  color: #00a3df;
}


/* ===== MODAL TEXT FIX ===== */

.person-modal-card h3 {
  margin-top: 0;
  color: #1f2d3d;
}


/* ===== RESPONSIVE ===== */

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

@media (max-width: 600px) {
  .people-grid {
    grid-template-columns: 1fr;
  }
}
/* ===== BIOSaG clean header ===== */

.biosag-header-clean {
  background: #f4f7fa;
  padding: 70px 20px 40px;
  text-align: center;
  position: relative;
}

/* barra superior de color */
.biosag-header-clean::top-line {
  content: "";
}

.biosag-header-clean::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 6px;
  width: 100%;
  background: linear-gradient(90deg, #1f3c88, #1aa6c9);
}

.biosag-header-clean h1 {
  font-size: 38px;
  font-weight: 800;
  color: #1f3c88;
  margin-bottom: 10px;
}

.biosag-header-clean .biosag-sub {
  font-size: 18px;
  color: #4a5568;
}

.biosag-header-clean .biosag-divider {
  width: 80px;
  height: 4px;
  background: #1aa6c9;
  margin: 18px auto 0;
  border-radius: 3px;
}
/* =========================
   RESPONSIVE ADD-ON
   ========================= */

@media (max-width: 900px) {
  .people-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }

  .person-photo {
    width: 150px;
    height: 150px;
  }
}

@media (max-width: 600px) {

  .people-wrapper {
    padding: 0 14px;
  }

  .people-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .person-card {
    padding: 18px 14px 22px;
  }

  .person-photo {
    width: 130px;
    height: 130px;
  }

  .person-modal-card {
    width: 95%;
    padding: 20px 16px 22px;
    border-radius: 14px;
    max-height: 90vh;
    overflow-y: auto;
  }

  .modal-photo {
    width: 110px;
    height: 110px;
  }

  .person-name {
    font-size: 18px;
  }

  .person-role,
  .person-affil {
    font-size: 14px;
  }

}
/* ===== BANDERA PROPORCIONAL ===== */

.person-flag {
  margin-top: 8px;
  text-align: center;

  opacity: 0;
  transform: translateY(10px);
  transition: all .5s ease;
}

.person-flag img {
  height: 30px !important;
  width: auto !important;
  display: inline-block;
  vertical-align: middle;

  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
@media (max-width: 600px) {
  .person-flag img {
    height: 22px !important;
  }
}

/* aparece al hacer scroll */
.person-flag.visible {
  opacity: 1;
  transform: translateY(0);
  }
/* =========================
   VISFORMS — FORMULARIO CONGRESO (SAFE)
   ========================= */

/* inputs y textarea */
.campo-congreso,
.resumen-congreso {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;

    padding: 12px !important;
    border: 1px solid #bfc6ce !important;
    border-radius: 8px !important;

    font-size: 15px !important;
    line-height: 1.4 !important;

    background: #ffffff !important;
    color: #222 !important;

    box-sizing: border-box !important;
}

/* textarea */
.resumen-congreso {
    min-height: 180px !important;
    resize: vertical !important;
}

/* focus */
.campo-congreso:focus,
.resumen-congreso:focus {
    border-color: #1976d2 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(25,118,210,0.15) !important;
}

/* placeholder */
.campo-congreso::placeholder,
.resumen-congreso::placeholder {
    color: #8a8a8a !important;
}


/* =========================
   BOTÓN — SOLO FORM DEL CONGRESO
   ========================= */

/* solo si el botón está dentro del mismo form que resumen-congreso */
form:has(.resumen-congreso) input[type="submit"],
form:has(.resumen-congreso) button[type="submit"] {

    background: #1976d2 !important;
    color: #ffffff !important;

    border: none !important;
    border-radius: 8px !important;

    padding: 14px 22px !important;
    font-size: 16px !important;
    font-weight: 600 !important;

    width: 100% !important;
    max-width: 260px !important;

    display: inline-block !important;
}

/* hover */
form:has(.resumen-congreso) input[type="submit"]:hover,
form:has(.resumen-congreso) button[type="submit"]:hover {
    background: #155fa8 !important;
}


/* botón deshabilitado por JS */
.btn-disabled-visforms {
    background: #9aa0a6 !important;
    color: #ffffff !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}


/* =========================
   RESPONSIVE — FORMULARIO
   ========================= */

@media (max-width: 600px) {

    .campo-congreso,
    .resumen-congreso {
        font-size: 16px !important; /* evita zoom iOS */
        padding: 14px !important;
    }

    form:has(.resumen-congreso) input[type="submit"],
    form:has(.resumen-congreso) button[type="submit"] {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 17px !important;
        padding: 16px !important;
    }

}
/* =========================
   BOTÓN CONGRESO — VISFORMS
   ========================= */

.btn-congreso {
    background: #1976d2 !important;
    color: #ffffff !important;
    border: none !important;

    border-radius: 8px !important;
    padding: 14px 22px !important;

    font-size: 16px !important;
    font-weight: 600 !important;

    display: inline-block !important;
    width: 100% !important;
    max-width: 260px !important;
}

.btn-congreso:hover {
    background: #155fa8 !important;
}

/* deshabilitado por JS */
.btn-congreso.btn-disabled-visforms {
    background: #9aa0a6 !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}
/* =========================
   VISFORMS — BOTÓN ENVIAR FIX
   ========================= */

.visforms input[type="submit"],
.visforms button[type="submit"],
.btn-congreso {
    background-color: #1976d2 !important;
    background-image: none !important;
    color: #ffffff !important;
    border: none !important;

    border-radius: 8px !important;
    padding: 14px 22px !important;

    font-size: 16px !important;
    font-weight: 600 !important;

    display: inline-block !important;
    width: auto !important;
}

.visforms input[type="submit"]:hover,
.visforms button[type="submit"]:hover,
.btn-congreso:hover {
    background-color: #155fa8 !important;
}
.check-congreso label {
  display: inline-block !important;
  font-weight: normal !important;
  margin-left: 6px !important;
}
/* ===== CONTENEDOR ===== */
.tarifas-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); /* Optimizado para que quepan las 5 tarjetas */
  gap: 15px; /* Espaciado reducido para ganar espacio horizontal */
  padding: 20px 10px;
}

/* ===== TARJETA ===== */
.flip-card{
  background: none;
  perspective: 1000px;
  height: 230px; /* Altura ajustada para dar espacio al texto de la beca */
}

/* ===== INTERIOR ===== */
.flip-inner{
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform .7s;
  transform-style: preserve-3d;
  cursor: pointer;
}

/* ===== CARAS ===== */
.flip-front,
.flip-back{
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  backface-visibility: hidden;
  padding: 14px; /* Padding optimizado para aprovechar el espacio interno */
  box-sizing: border-box;
  border: 2px solid #cfcfcf; /* gris */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* ===== FRENTE AZUL (Color institucional original) ===== */
.flip-front{
  background: #1e4395;
  color: #ffffff;
}

/* ===== REVERSO ===== */
.flip-back{
  background: #737373;
  color: #ffffff;
  transform: rotateY(180deg);
}

/* ===== TEXTO ===== */
.tarifa-titulo{
  font-size: 13px; /* Tamaño adaptado para que los textos largos no colapsen */
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: .3px;
  line-height: 1.2;
}

.tarifa-valor{
  font-size: 24px;
  font-weight: 900;
  margin-bottom: 6px;
}

/* ===== MOBILE Y TABLETS ===== */
@media(max-width: 992px){
  .tarifas-grid{
    grid-template-columns: repeat(2, 1fr); /* En tablets se acomodan de 2 en 2 */
  }
}

@media(max-width: 576px){
  .tarifas-grid{
    grid-template-columns: 1fr; /* En celulares una debajo de otra */
    gap: 18px;
  }

  .flip-card{
    height: 190px;
  }

  .tarifa-titulo{
    font-size: 14px;
  }

  .tarifa-valor{
    font-size: 26px;
  }
}
/* ===== COUNTDOWN CONGRESO — estilo calendario ===== */

.countdown-wrapper {
  text-align: center;
  padding: 30px 15px;
  background: #ffffff;
}

.countdown-title {
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 24px;
  color: #0b3d91;
}

.countdown-grid {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* TARJETA */

.time-card {
  background: #ffffff;
  width: 110px;
  height: 150px;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* FRANJA NARANJA SUPERIOR */

.time-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 36px;
  background: linear-gradient(180deg, #ff9f2f, #f07c00);
}

/* pequeños “ganchos” tipo calendario */

.time-card::after {
  content: "";
  position: absolute;
  top: 10px;
  width: 70%;
  height: 6px;
  border-radius: 4px;
  background: rgba(255,255,255,0.6);
}

/* HOVER PC */

.time-card:hover {
  transform: translateY(-8px) scale(1.05);
  box-shadow: 0 18px 34px rgba(0,0,0,0.18);
}

/* NÚMEROS */

.time-number {
  font-size: 40px;
  font-weight: 900;
  color: #0b3d91;
  margin-top: 18px;
  line-height: 1;
}

/* LABEL */

.time-label {
  font-size: 17px;
  font-weight: 700;
  color: #333;
  margin-top: 8px;
  letter-spacing: .3px;
}

/* 📱 MÓVIL */

@media (max-width: 600px) {

  .countdown-grid {
    gap: 12px;
  }

  .time-card {
    width: 84px;
    height: 120px;
    border-radius: 12px;
  }

  .time-card::before {
    height: 28px;
  }

  .time-number {
    font-size: 28px;
    margin-top: 12px;
  }

  .time-label {
    font-size: 13px;
  }

  .countdown-title {
    font-size: 20px;
  }

}
/* ===== CONTACTO + MAPA ===== */

.contacto-mapa-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  padding: 40px 20px;
  background: #ffffff;
}

/* COLUMNA CONTACTO */

.contacto-col {
  padding: 30px;
  border-radius: 16px;
  background: #f7f9fc;
  box-shadow: 0 8px 22px rgba(0,0,0,0.08);
}

.contacto-col h2 {
  margin-top: 0;
  margin-bottom: 22px;
  font-size: 26px;
  font-weight: 800;
  color: #0b3d91;
}

.contacto-item {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #dfe5ee;
}

.c-label {
  font-weight: 700;
  font-size: 15px;
  color: #4da3ff;
  margin-bottom: 4px;
}

.c-value {
  font-size: 17px;
  font-weight: 600;
  color: #1a1a1a;
}

/* COLUMNA MAPA */

.mapa-col {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,0.10);
  min-height: 420px;
}

.mapa-col iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* HOVER suave */

.contacto-col:hover,
.mapa-col:hover {
  transform: translateY(-4px);
  transition: 0.25s;
}

/* 📱 RESPONSIVE */

@media (max-width: 900px) {

  .contacto-mapa-section {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .mapa-col {
    min-height: 320px;
  }

}
/* ===== TIMELINE GRID + ANIMACIÓN ===== */

.timeline {
  max-width: 1100px;
  margin: 40px auto;
  padding: 40px 20px;
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  row-gap: 70px;
  position: relative;
}

/* línea central */

.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 4px;
  background: linear-gradient(#0b3d91, #4da3ff);
  transform: translateX(-50%);
  border-radius: 4px;
  z-index: 1;
}

/* item ocupa toda la fila */

.timeline-item {
  grid-column: 1 / span 3;
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  align-items: start; /* Alinea todo al techo del contenedor */
  position: relative;
}

/* contenido */

.timeline-content {
  display: flex;
  flex-direction: column;
}

/* lados */

.timeline-item.left .timeline-content {
  grid-column: 1;
  grid-row: 1; /* Obliga a estar en la fila 1 */
  text-align: right;
  padding-right: 20px;
}

.timeline-item.right .timeline-content {
  grid-column: 3;
  grid-row: 1; /* Obliga a estar en la fila 1 */
  text-align: left;
  padding-left: 20px;
}

/* icono calendario */

.timeline-icon {
grid-column: 2;
  grid-row: 1;       /* Se mantiene en la misma fila que el texto */
  justify-self: center;
  align-self: start;  /* No se baja aunque el texto sea largo */
  margin-top: -4px;   /* Ajuste fino para nivelar con el texto de la fecha */
  font-size: 26px;
  background: white;
  border-radius: 50%;
  padding: 6px;
  box-shadow: 0 0 0 4px #e6eefc;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* fecha */

.timeline-date {
  font-weight: 800;
  font-size: 18px;
  color: #0b3d91;
  margin-bottom: 10px;
  margin-top: 0;
}

/* tarjeta */

.timeline-card {
  background: white;
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.10);
  border-top: 4px solid #4da3ff;
  position: relative;

  /* animación */
  opacity: 0;
  transform: translateY(40px);
  transition: all .6s ease;
}

.timeline-card.show {
  opacity: 1;
  transform: translateY(0);
}

.timeline-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 34px rgba(0,0,0,0.18);
}
/* ===================== */
/* ===== RESPONSIVE ===== */
/* ===================== */

@media (max-width: 800px) {
  /* 1. Redefinimos el grid general de la timeline */
  .timeline {
    grid-template-columns: 60px 1fr !important; /* Espacio para icono | Espacio para texto */
    padding: 20px 10px;
  }

  /* 2. Movemos la línea azul a la izquierda, alineada con los iconos */
  .timeline::before {
    left: 30px !important; 
    transform: translateX(-50%);
  }

  /* 3. El item ahora solo ocupa 2 columnas y reseteamos su alineación */
  .timeline-item {
    grid-template-columns: 60px 1fr !important;
    grid-column: 1 / span 2 !important;
    align-items: start !important;
    gap: 0;
  }

  /* 4. IMPORTANTE: Forzamos a que LEFT y RIGHT se vean IGUAL */
  .timeline-item.left .timeline-content,
  .timeline-item.right .timeline-content {
    grid-column: 2 !important; /* Ambos a la derecha */
    grid-row: 1 !important;
    text-align: left !important; /* Texto siempre a la izquierda */
    padding-left: 15px !important;
    padding-right: 0 !important; /* Quitamos el padding que apretaba al 23 y 25 */
  }

  .timeline-item.left .timeline-icon,
  .timeline-item.right .timeline-icon {
    grid-column: 1 !important; /* Ambos iconos a la izquierda */
    grid-row: 1 !important;
    margin-top: 0 !important;
    justify-self: center;
  }

  /* 5. Evitamos que el texto de la tarjeta se rompa en letras */
  .timeline-card {
    width: 100% !important;
    word-wrap: break-word;
  }

  .timeline-date {
    margin-top: 5px !important; /* Alinea la fecha con el icono */
    font-size: 17px;
  }
}
/* ===== VISFORMS SEPARADOR VISTOSO ===== */

.separador-vistoso {
    position: relative !important;
    text-align: center !important;
    margin: 50px 0 !important;
}

.separador-vistoso:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(to right, #cccccc, #1f3c88, #cccccc);
    transform: translateY(-50%);
    z-index: 1;
}

.separador-vistoso label,
.separador-vistoso span {
    position: relative;
    background: #ffffff;
    padding: 0 25px;
    font-size: 20px;
    font-weight: 700;
    color: #1f3c88;
    z-index: 1;
}
/* ===== VISFORMS SEPARADOR MEJORADO ===== */

.visforms .visforms_separator,
.visforms .visfieldseparator,
.visforms hr {
    position: relative;
    margin: 60px 0 !important;
    border: none !important;
    height: 3px !important;
    background: linear-gradient(to right, #d0d0d0, #1f3c88, #d0d0d0) !important;
}

/* texto centrado encima */
.visforms .visforms_separator span,
.visforms .visforms_separator label,
.visforms .visfieldseparator span,
.visforms .visfieldseparator label {
    position: relative;
    display: inline-block;
    background: #ffffff;
    padding: 0 25px;
    font-size: 20px;
    font-weight: 700;
    color: #1f3c88;
    top: -14px;
}

/* Estilo solo para el label */
.label-congreso {
    font-weight: 600;
    font-size: 15px;
    color: #1e3a5f;
    margin-bottom: 5px;
    display: inline-block;
}

/* Asterisco de requerido más visible */
.label-congreso .required,
.label-congreso span {
    color: #c62828;
    font-weight: 700;
}
/* Recuadro informativo resumen */
.info-resumen {
    background: #f4f7fb;
    border-left: 4px solid #1e3a5f;
    padding: 18px 20px;
    margin-top: 20px;
    margin-bottom: 25px;
    border-radius: 6px;
    font-size: 14px;
}

/* Lista */
.info-resumen ul {
    margin: 0;
    padding-left: 18px;
}

.info-resumen li {
    margin-bottom: 8px;
    line-height: 1.5;
}

/* Responsive */
@media (max-width: 768px) {
    .info-resumen {
        padding: 15px;
        font-size: 13px;
    }
}
/* Imagen ejemplo nombre publicación */
.ejemplo-publicacion {
    margin-top: 8px;
    margin-bottom: 20px;
    text-align: left;
}

.ejemplo-publicacion img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
}

/* Centrado en móvil */
@media (max-width: 768px) {
    .ejemplo-publicacion {
        text-align: center;
    }

    .ejemplo-publicacion img {
        max-width: 90%;
    }
}
/* Hace clickeables los ejes */
.eje-horizontal {
  cursor: pointer;
  transition: 0.3s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; /* Optimiza el scroll y gestos */
}

.eje-horizontal:hover {
  background: #f4f7fb;
  border-radius: 8px;
}

/* Overlay */
.overlay-card {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 9998;
}

/* Card popup */
.card-eje {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 520px;
  background: #fff;
  padding: 25px;
  border-radius: 10px;
  z-index: 9999;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
  max-height: 80vh;
  overflow-y: auto;
}

.card-eje h3 {
  margin-top: 0;
}

.card-eje ul {
  padding-left: 20px;
}

.card-eje li {
  margin-bottom: 6px;
}

.cerrar {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 22px;
  cursor: pointer;
}
.eje-horizontal {
  position: relative;
  z-index: 2;
}
/* Estado activo */
.overlay-card.activo {
  display: block;
}

.card-eje.activa {
  display: block;
}
/* Bloquea el gesto de deslizamiento lateral en móviles */
html, body {
    touch-action: pan-y !important; /* Fuerza solo scroll vertical */
    overscroll-behavior-x: none !important; 
    overflow-x: hidden !important;
}

/* Bloqueo específico para contenedores de menú comunes */
#rt-offcanvas, 
.offcanvas-menu, 
.mean-container, 
#gkOffcanvas {
    touch-action: none !important;
}
/* 1. Títulos con el azul corporativo */
.card-eje h3, 
.card-eje h4 {
    color: #0b3d91 !important;
    font-weight: 700;
    margin-top: 0;
    border-bottom: 2px solid #0b3d91;
    padding-bottom: 10px;
    margin-bottom: 15px;
}
.label-subindice {
    font-weight: 600;
    font-size: 15px;
    color: #555555;
    display: inline-block;
    transition: color 0.2s ease;
}

.label-subindice:hover {
    color: #1e3a5f; /* mismo azul institucional al pasar el mouse */
}
/* Contenedor principal para 3 columnas */
.grid-patrocinadores {
    display: flex;
    flex-wrap: wrap;
    gap: 2%; /* Espacio entre tarjetas */
    justify-content: flex-start;
    padding: 20px 0;
}

/* Tarjeta individual */
.card-auspiciante {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    width: 31.5%; /* Forzar 3 por fila */
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.3s ease;
    box-sizing: border-box;
}

/* Efecto Sombreado al pasar el mouse */
.card-auspiciante:hover {
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

/* Espacio superior del Logo */
.card-logo {
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.card-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Separador y sección inferior */
.card-info {
    border-top: 1px solid #eeeeee; /* Línea divisoria */
    padding: 15px;
    min-height: 70px;
}

.card-nombre {
    display: block;
    font-weight: bold;
    font-family: sans-serif;
    font-size: 14px;
    color: #222;
    margin-bottom: 5px;
}

.card-link {
    display: block;
    font-size: 12px;
    color: #ff6b6b; /* Color coral/naranja de la imagen */
    text-decoration: none;
    overflow-wrap: break-word;
}

/* Ajuste para móviles (1 por fila) */
@media (max-width: 768px) {
    .card-auspiciante {
        width: 100%;
    }
}
/* Contenedor principal de la sección de apoyo institucional */
.apoyo-institucional-container {
    padding: 40px 20px;
    background-color: #f7f7f7;
    text-align: center;
    font-family: Arial, sans-serif;
}

.apoyo-institucional-container h2 {
    font-size: 36px;
    color: #333;
    margin-bottom: 50px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* --- CAMBIO CLAVE: Configuración de 3 columnas --- */
.grid-rombos {
    display: grid;
    /* Definimos 3 columnas iguales */
    grid-template-columns: repeat(3, 1fr); 
    gap: 80px 40px; /* Aumentamos gap vertical para dejar espacio al texto */
    max-width: 1000px; 
    margin: 0 auto;
    justify-items: center; /* Centra las tarjetas en su celda */
}

/* Tarjeta individual de rombo */
.tarjeta-rombo {
    width: 100%; /* Ocupa el ancho de la columna del grid */
    max-width: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    /* Eliminamos altura fija para que el texto fluya naturalmente */
}

/* El elemento que crea la forma de rombo */
.rombo-shape {
    width: 150px; 
    height: 150px;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    /* Mantenemos tu rotación original */
    transform: rotate(45deg); 
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    /* Quitamos el absolute para que no pise el texto */
    margin-bottom: 40px; 
}

/* Efecto hover en el rombo */
.tarjeta-rombo:hover .rombo-shape {
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
    border-color: #cccccc;
    transform: rotate(45deg) scale(1.05); /* Un pequeño zoom */
}

/* Imagen del logo dentro del rombo */
.rombo-shape img {
    max-width: 70%; 
    max-height: 70%;
    object-fit: contain;
    /* Contra-rotación para que el logo se vea recto */
    transform: rotate(-45deg); 
}

/* Información de texto debajo del rombo */
.info-rombo {
    /* Al quitar el absolute del rombo, ya no necesitamos un margin-top gigante */
    width: 100%;
    text-align: center;
}

.info-rombo .nombre-institucion {
    display: block;
    font-weight: bold;
    font-size: 14px;
    color: #333;
    margin-bottom: 8px;
    line-height: 1.3;
}

.info-rombo .link-institucion {
    font-size: 12px;
    color: #007bff;
    text-decoration: none;
    word-break: break-all;
}

.info-rombo .link-institucion:hover {
    text-decoration: underline;
}

/* --- Ajustes Responsivos --- */
@media (max-width: 900px) {
    .grid-rombos {
        grid-template-columns: repeat(2, 1fr); /* 2 por fila en tablets */
    }
}

@media (max-width: 600px) {
    .grid-rombos {
        grid-template-columns: 1fr; /* 1 por fila en móviles */
        gap: 50px;
    }
    
    .apoyo-institucional-container h2 {
        font-size: 28px;
    }
}
/* ==========================================
   CISEAL RESEARCHERS
========================================== */

.ciseal-r-card{
  	width:100%;
    max-width:340px;
    background:#fafafa;
    border: 2px solid #e5e7eb;
    border-radius:18px;
    overflow:hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
    text-align:center;
    margin:20px;
    display:inline-block;
    vertical-align:top;
}
.ciseal-r-card:hover {
    box-shadow: 0 15px 35px rgba(0,0,0,0.18);
    transform: translateY(-5px);
}
.ciseal-r-card img{
	width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
    margin-top: 20px;
    border: 6px solid #d1d5db;
    box-sizing: border-box;
}

.ciseal-r-card h3{
    margin:15px 15px 5px;
    font-size:22px;
    line-height:1.2;
    text-align:center;
    word-break:normal;
    overflow-wrap:break-word;
}

.ciseal-r-card p{
    color:#666;
    padding:0 20px;
}

.ciseal-r-btn{
    display:inline-block;
    margin:20px;
    padding:10px 20px;
    background:#333333;
    color:#fff !important;
    text-decoration:none;
    border-radius:8px;
    cursor:pointer;
    transition:.3s;
}

.ciseal-r-btn:hover{
    background:#1a1a1a;
}

/* ==========================================
   MODAL
========================================== */

.ciseal-r-modal{
    display:none;

    position:fixed !important;

    top:0;
    left:0;

    width:100vw;
    height:100vh;

    background:rgba(0,0,0,.80);

    z-index:999999;
}
.ciseal-r-header-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -15px; /* Ajuste para subir el correo hacia el subtítulo */
    margin-bottom: 30px;
}
.ciseal-r-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 1000px;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;

    /* Degradados actualizados a tonos grises suaves */
    background:
        radial-gradient(
            circle at top right,
            rgba(200, 200, 200, 0.2) 0 140px, /* Gris claro en lugar de azul */
            transparent 140px
        ),
        radial-gradient(
            circle at bottom left,
            rgba(180, 180, 180, 0.2) 0 180px, /* Gris claro en lugar de verde */
            transparent 180px
        ),
        #ffffff;

    border-radius: 20px;
    padding: 35px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.30);
    isolation: isolate;
}

/* Círculo superior derecho - Gris claro */
.ciseal-r-modal-content::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    top: -110px;
    right: -110px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(200, 200, 200, 0.3) 0 60%, /* Gris claro con transparencia */
        transparent 60%
    );
    pointer-events: none;
    z-index: 0;
}

/* Círculo inferior izquierdo - Gris claro */
.ciseal-r-modal-content::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    bottom: -130px;
    left: -130px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(180, 180, 180, 0.25) 0 60%, /* Gris un poco más suave */
        transparent 60%
    );
    pointer-events: none;
    z-index: 0;
}

/* Mantener el contenido sobre las decoraciones */

.ciseal-r-modal-content > *{

    position:relative;

    z-index:1;
}

.ciseal-r-close{

    position:absolute;

    right:20px;
    top:15px;

    font-size:36px;

    cursor:pointer;

    color:#666;
}

.ciseal-r-close:hover{
    color:#000;
}

/* ==========================================
   PERFIL
========================================== */

.ciseal-r-modal-photo{
	width: 250px !important;  /* Forzamos el tamaño grande */
    height: 250px !important;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin: 0 auto 15px !important; /* Espacio reducido debajo de la foto */
    border: 8px solid #f0f0f0; 
    box-sizing: border-box;
}
.ciseal-r-email {
    color: #856404; /* Un amarillo/dorado más intenso y profesional */
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
  	display: inline-block; /* Necesario para el centrado */
    padding: 8px 15px;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 8px;
}
.ciseal-r-email:hover {
    text-decoration: underline;
    color: #856404;
	background: #fff9e6;
}
.ciseal-r-email-box {
	background: #fafafa;
    padding: 8px 16px;
    border-radius: 20px; /* Más redondeado para verse moderno */
    border: 1px solid #e5e7eb;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.ciseal-r-modal-name{
	text-align: center;
    margin-bottom: 0px !important; /* Eliminamos margen inferior */
    padding-bottom: 0px !important;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1; /* Controlamos el salto de línea */
}

.ciseal-r-modal-subtitle{
    text-align: center;
    color: #4a4a4a;
    margin-top: 0px !important;    /* Forzamos pegarlo al nombre */
    margin-bottom: 25px !important; 
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
}

.ciseal-r-section{

    margin-top:25px;
}

.ciseal-r-section h3{

    color:#333333;

    border-bottom:1px solid #ddd;

    padding-bottom:8px;
  	text-transform: none;      
    font-weight: 600;          
    font-size: 18px;           
}

.ciseal-r-tags{
	margin-top: 15px;
	margin-bottom: 25px;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.ciseal-r-tag{

    background:#f9fafb;

    color:#856404;

  	border: 1px solid #e5e7eb; /* Gris suave */
  	border-left: 4px solid #fcd34d;
  
    border-radius:4px;

    padding:6px 14px;
	margin-bottom: 8px;
    font-size:13px;
}
.ciseal-r-tag:hover {
    background: #ffeeba; /* Un poco más oscuro al pasar el mouse */
}
/* ==========================================
   ACORDEONES DEL PERFIL
========================================== */

.ciseal-r-details{

    margin-top:15px;

    border:1px solid #e5e7eb;

    border-radius:10px;

    overflow:hidden;
}

.ciseal-r-summary{

    padding:15px 18px;

    background:#f8fafc;

    cursor:pointer;

    font-weight:600;

    color:#000;

    transition:.2s;
}

.ciseal-r-summary:hover{

    background-color: #fff9e6;
	border-color: #fce473;
}

.ciseal-r-details-content{

    padding:18px;
}

.ciseal-r-details[open] .ciseal-r-summary{
	background-color: #fffde7;
    border-bottom: 1px solid #e5e7eb;
}
.ciseal-r-publications{
    margin:0;
    padding-left:20px;
}

.ciseal-r-publications li{
    margin-bottom:15px;
    line-height:1.6;
}

.ciseal-r-publications strong{
  color: #1a1a1a !important;
  
}
/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 768px){

    .ciseal-r-card{

        max-width:100%;
        width:100%;

        margin:15px 0;
    }

    .ciseal-r-card img{

        width:120px;
        height:120px;
    }

    .ciseal-r-modal-content{

        width:95%;
        max-height:95vh;

        padding:20px;
    }

    .ciseal-r-modal-photo{

        width:120px;
        height:120px;
    }

    .ciseal-r-modal-name{

        font-size:24px;
    }

    .ciseal-r-modal-subtitle{

        font-size:16px;
    }

    .ciseal-r-section h3{

        font-size:18px;
    }

    .ciseal-r-details-content{

        padding:15px;
    }

    .ciseal-r-tags{

        justify-content:center;
    }

}

@media (max-width: 480px){

    .ciseal-r-modal-content{

        width:98%;
        padding:15px;
    }

    .ciseal-r-modal-name{

        font-size:20px;
    }

    .ciseal-r-modal-subtitle{

        font-size:14px;
    }

    .ciseal-r-btn{

        width:auto;

        display:inline-block;

        padding:10px 18px;

        margin:15px auto;

        font-size:14px;
    }

    .ciseal-r-tag{

        font-size:12px;

        padding:5px 10px;
    }

}
/* ==========================================
   CISEAL COURSES STYLES
========================================== */

.ciseal-c-card {
    width: 100%;
    max-width: 340px;
    background: #fafafa;
    border: 2px solid #e5e7eb;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
    text-align: center;
    margin: 20px;
    display: inline-block;
    vertical-align: top;
    transition: transform 0.3s, box-shadow 0.3s;
}

.ciseal-c-card:hover {
    box-shadow: 0 15px 35px rgba(0,0,0,0.18);
    transform: translateY(-5px);
}

/* Contenedor de la imagen en Cuadrado con Marca de Agua */
.ciseal-c-img-container {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* Forzamos formato cuadrado perfecto */
    overflow: hidden;
    background: #e5e7eb;
}

.ciseal-c-card img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Mantiene la proporción cubriendo el cuadrado */
    display: block;
}

/* Marca de agua flotante "Gratis" */
.ciseal-c-watermark {
    position: absolute;
    top: 38px;
    right: 8px;

    background: rgba(16, 185, 129, 0.90);
    color: #fff;

    padding: 7px 16px;
    border-radius: 18px;

    font-weight: 700;
    font-size: 13px;
    line-height: 1.15;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .6px;

    box-shadow: 0 4px 10px rgba(0,0,0,.18);

    white-space: normal;
    width: 140px;      /* ancho fijo */
    z-index: 2;
    pointer-events: none;
}
.ciseal-c-card-body {
    padding: 20px;
}

.ciseal-c-card h3 {
    margin: 0 0 10px;
    font-size: 20px;
    color: #1f2937;
}

.ciseal-c-card p {
    color: #666;
    font-size: 14px;
    margin-bottom: 20px;
    padding: 0 10px;
}

.ciseal-c-btn {
    display: inline-block;
    padding: 10px 20px;
    background: #333333;
    color: #fff !important;
    text-decoration: none;
    border-radius: 8px;
    cursor: pointer;
    transition: .3s;
    font-size: 14px;
    font-weight: 600;
}

.ciseal-c-btn:hover {
    background: #1a1a1a;
}

/* Foto cuadrada dentro del Modal */
.ciseal-c-modal-photo {
    width: 180px !important;
    height: 180px !important;
    border-radius: 15px !important;
    object-fit: cover;
    display: inline-block;
    margin: 0 auto 15px !important;
    border: 6px solid #f0f0f0;
    box-sizing: border-box;
}

/* Elementos internos del Modal para Cursos */
.ciseal-c-header-box {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.ciseal-c-badge {
    background: #e0f2fe;
    color: #0369a1;
    padding: 6px 14px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    border: 1px solid #bae6fd;
}

.ciseal-c-section {
    margin-top: 20px;
}

.ciseal-c-section h3 {
    color: #333;
    border-bottom: 1px solid #ddd;
    padding-bottom: 8px;
    font-size: 18px;
    font-weight: 600;
}

.ciseal-c-details {
    margin-top: 15px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
}

.ciseal-c-summary {
    padding: 15px 18px;
    background: #f8fafc;
    cursor: pointer;
    font-weight: 600;
    color: #000;
    transition: .2s;
}

.ciseal-c-summary:hover {
    background-color: #f1f5f9;
}

.ciseal-c-details-content {
    padding: 18px;
    font-size: 14px;
    line-height: 1.6;
}
/* ==========================================
   ESTILOS PARA EL ENCABEZADO DEL FORMULARIO
========================================== */

.ciseal-form-header {
    text-align: center;
    margin-bottom: 30px;
    padding: 0 15px;
}

/* Contenedor de la figura/icono estilizado */
.ciseal-form-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 15px auto;
    background: #f0fdf4; /* Tono verde suave institucional */
    color: #10b981;      /* Color verde principal */
    border: 2px solid #bbf7d0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.1);
}

.ciseal-form-header h2 {
    font-size: 26px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 8px 0;
}

.ciseal-form-header p {
    font-size: 15px;
    color: #6b7280;
    margin: 0 0 20px 0;
}

/* Divisor decorativo elegante */
.ciseal-form-divider {
    position: relative;
    width: 100px;
    height: 3px;
    background: #e5e7eb;
    margin: 0 auto;
    border-radius: 2px;
}

/* Puntito central del divisor */
.ciseal-form-divider::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
}
/* ==========================================
   SOLUCIÓN LIMPIA: CONTENEDOR FLEX DE ANCHO UNIFORME
========================================== */

/* 1. Limpiamos las filas de Joomla y las convertimos en un contenedor flexible que envuelve */
.com-content-category.blog .blog-items,
.com-content-category.blog .items-row,
.com-content-category.blog .items-leading,
.blog-items, 
.category-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 30px !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. Hacemos que cada fila o artículo interno de Joomla ocupe exactamente el 48% (2 columnas perfectas) */
.com-content-category.blog .row,
.com-content-category.blog .item,
.blog-item {
    display: flex !important;
    flex-direction: column !important;
    width: calc(50% - 15px) !important; /* Dos columnas restando la mitad del gap */
    max-width: calc(50% - 15px) !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    height: 100% !important;
}

/* 3. Forzamos a que tu tarjeta abarque todo el espacio disponible de su columna de forma uniforme */
.ciseal-r-card {
    min-height: 390px !important; /* Puedes subir o bajar este valor según lo que mida la más alta */
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
    margin: 0 !important;
    text-align: center !important; /* Asegura que los textos y títulos vuelvan al centro */
    box-sizing: border-box;
}
.ciseal-r-card p {
    color: #666;
    padding: 0 20px;
    flex-grow: 1; /* Permite que el párrafo ocupe el espacio intermedio de forma equitativa */
}

/* 4. CORRECCIÓN DE LA FOTO: Forzamos centrado absoluto de la imagen */
.ciseal-r-card img {
    display: block !important;
    margin: 20px auto 0 auto !important; /* 'auto' a los lados centra la imagen perfectamente */
}

/* 5. Adaptación automática a una sola columna en celulares */
@media (max-width: 768px) {
    .com-content-category.blog .row,
    .com-content-category.blog .item,
    .blog-item {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ==========================================
   CORRECCIÓN DEFINITIVA DE TEXTOS BLANCOS EN MODALES
========================================== */
.ciseal-r-modal-content,
.ciseal-r-details-content,
.ciseal-r-details-content p,
.ciseal-r-details-content li,
.ciseal-r-details-content span,
.ciseal-c-details-content,
.ciseal-c-details-content p,
.ciseal-c-details-content li {
    color: #4a4a4a !important;
}
/* =========================================================
   BIOSaG 2026
   FORMATOS PARA PRESENTACIÓN DE TRABAJOS
   ========================================================= */

.biosag-formatos {
  max-width: 1050px;
  margin: 0 auto;
  padding: 10px 15px 40px;
  font-family: inherit;
  color: #24343a;
}


/* =========================================================
   HERO
   ========================================================= */

.biosag-hero {
  text-align: center;
  padding: 45px 30px;
  margin-bottom: 35px;

  background: linear-gradient(
    135deg,
    #f1f7f6 0%,
    #eef5f8 100%
  );

  border: 1px solid #dfe9e8;
  border-radius: 18px;
}

.biosag-hero h2 {
  margin: 0 0 12px;

  color: #173f4a;
  font-size: 32px;
  line-height: 1.2;
  font-weight: 700;
}

.biosag-hero p {
  max-width: 720px;
  margin: 0 auto;

  color: #637177;
  font-size: 17px;
  line-height: 1.6;
}


/* =========================================================
   SECCIONES
   ========================================================= */

.biosag-format-section {
  margin-bottom: 32px;
  padding: 30px;

  background: #ffffff;

  border: 1px solid #e3e9eb;
  border-radius: 18px;

  box-shadow: 0 6px 22px rgba(20, 50, 60, 0.06);
}


/* =========================================================
   ENCABEZADO DE SECCIÓN
   ========================================================= */

.biosag-section-header {
  display: flex;
  align-items: center;
  gap: 18px;

  margin-bottom: 25px;
}

.biosag-icon {
  width: 58px;
  height: 58px;

  flex: 0 0 58px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #edf6f4;

  border-radius: 14px;

  font-size: 27px;
}

.biosag-section-header h3 {
  margin: 0 0 5px;

  color: #173f4a;

  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
}

.biosag-section-header p {
  margin: 0;

  color: #6b777d;

  font-size: 15px;
  line-height: 1.5;
}


/* =========================================================
   GRID DE FORMATOS
   ========================================================= */

.biosag-format-grid {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 18px;
}


/* =========================================================
   TARJETAS
   ========================================================= */

.biosag-format-card {
  padding: 25px;

  background: #fafcfc;

  border: 1px solid #e3e9eb;
  border-radius: 14px;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.biosag-format-card:hover {
  transform: translateY(-3px);

  border-color: #c8dad8;

  box-shadow: 0 10px 25px rgba(20, 50, 60, 0.08);
}

.biosag-card-icon {
  width: 44px;
  height: 44px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 15px;

  background: #edf6f4;

  border-radius: 10px;

  font-size: 20px;
}

.biosag-format-card h4 {
  margin: 0 0 9px;

  color: #214d58;

  font-size: 19px;
  line-height: 1.3;
  font-weight: 700;
}

.biosag-format-card p {
  min-height: 65px;

  margin: 0 0 20px;

  color: #69777d;

  font-size: 14px;
  line-height: 1.6;
}


/* =========================================================
   BOTONES
   ========================================================= */

.biosag-btn {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 8px;

  padding: 11px 17px;

  border-radius: 9px;

  font-size: 14px;
  font-weight: 600;

  text-decoration: none !important;

  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.biosag-btn span {
  font-size: 16px;
  line-height: 1;
}


/* Canva */

.biosag-btn-primary {
  background: #173f4a;
  color: #ffffff !important;
}

.biosag-btn-primary:hover {
  background: #0f3039;
  color: #ffffff !important;

  transform: translateY(-1px);
}


/* PowerPoint */

.biosag-btn-secondary {
  background: #ffffff;

  color: #173f4a !important;

  border: 1px solid #ccd8db;
}

.biosag-btn-secondary:hover {
  background: #f1f5f6;

  color: #173f4a !important;

  transform: translateY(-1px);
}


/* =========================================================
   NOTA IMPORTANTE
   ========================================================= */

.biosag-note {
  margin-top: 22px;
  padding: 16px 18px;

  background: #f7f9fa;

  border-left: 4px solid #7a9da4;
  border-radius: 0 10px 10px 0;

  color: #5f6d72;

  font-size: 14px;
  line-height: 1.6;
}

.biosag-note strong {
  color: #3d555c;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 700px) {

  .biosag-formatos {
    padding-left: 10px;
    padding-right: 10px;
  }

  .biosag-hero {
    padding: 32px 20px;
  }

  .biosag-hero h2 {
    font-size: 26px;
  }

  .biosag-hero p {
    font-size: 15px;
  }

  .biosag-format-section {
    padding: 22px 18px;
  }

  .biosag-format-grid {
    grid-template-columns: 1fr;
  }

  .biosag-section-header {
    align-items: flex-start;
  }

  .biosag-section-header h3 {
    font-size: 21px;
  }

  .biosag-format-card p {
    min-height: auto;
  }

  .biosag-btn {
    width: 100%;
    box-sizing: border-box;
  }
}
/* ==========================================
   BIOSaG 2026 - Formatos para trabajos
   ========================================== */

._do_biosag-formatos {
    width: 100%;
    max-width: 1050px;
    margin: 40px auto;
    padding: 0 15px;
    box-sizing: border-box;
    color: #24343a;
}


/* ==========================================
   HERO
   ========================================== */

._do_biosag-formatos-hero {
    text-align: center;
    padding: 45px 30px;
    margin-bottom: 35px;

    background: linear-gradient(
        135deg,
        #f0f4f7 0%,
        #e6f0f3 100%
    );

    border: 1px solid #d5e3e8;
    border-radius: 18px;
}

._do_biosag-formatos-hero h2 {
    margin: 0 0 12px;

    color: #0b5d7a;

    font-size: 32px;
    line-height: 1.2;
    font-weight: 700;
}

._do_biosag-formatos-hero p {
    max-width: 720px;
    margin: 0 auto;

    color: #637177;

    font-size: 17px;
    line-height: 1.6;
}


/* ==========================================
   SECCIONES
   ========================================== */

._do_biosag-formatos-section {
    margin-bottom: 32px;
    padding: 30px;

    background: #ffffff;

    border: 1px solid #e3e9eb;
    border-radius: 18px;

    box-shadow: 0 6px 22px rgba(20, 50, 60, 0.06);
}


/* ==========================================
   ENCABEZADO DE SECCIÓN
   ========================================== */

._do_biosag-formatos-section-header {
    display: flex;
    align-items: center;
    gap: 18px;

    margin-bottom: 25px;
}

._do_biosag-formatos-icon {
    width: 58px;
    height: 58px;

    flex: 0 0 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #edf6f4;

    border-radius: 14px;

    font-size: 27px;
}

._do_biosag-formatos-section-header h3 {
    margin: 0 0 5px;

    color: #0b5d7a;

    font-size: 24px;
    line-height: 1.25;
    font-weight: 700;
}

._do_biosag-formatos-section-header p {
    margin: 0;

    color: #6b777d;

    font-size: 15px;
    line-height: 1.5;
}


/* ==========================================
   GRID
   ========================================== */

._do_biosag-formatos-grid {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;
}


/* ==========================================
   TARJETAS
   ========================================== */

._do_biosag-formatos-card {
    display: flex;
    flex-direction: column;

    padding: 25px;

    background: #fafcfc;

    border: 1px solid #e3e9eb;
    border-radius: 14px;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

._do_biosag-formatos-card:hover {
    transform: translateY(-3px);

    border-color: #c8dad8;

    box-shadow: 0 10px 25px rgba(20, 50, 60, 0.08);
}


/* ==========================================
   ICONO DE TARJETA
   ========================================== */

._do_biosag-formatos-card-icon {
    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 15px;

    background: #edf6f4;

    border-radius: 10px;

    font-size: 20px;
}


/* ==========================================
   TEXTO DE TARJETA
   ========================================== */

._do_biosag-formatos-card h4 {
    margin: 0 0 9px;

    color: #0b5d7a;

    font-size: 19px;
    line-height: 1.3;
    font-weight: 700;
}

._do_biosag-formatos-card p {
    min-height: 65px;

    margin: 0 0 20px;

    color: #69777d;

    font-size: 14px;
    line-height: 1.6;
}


/* ==========================================
   ACCIONES
   ========================================== */

._do_biosag-formatos-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: auto;
}


/* ==========================================
   BOTONES
   ========================================== */

._do_biosag-formatos-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 11px 17px;

    border-radius: 9px;

    font-size: 14px;
    font-weight: 600;

    line-height: 1.2;

    text-decoration: none !important;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

._do_biosag-formatos-btn span {
    font-size: 16px;
    line-height: 1;
}


/* ==========================================
   BOTÓN CANVA
   ========================================== */

._do_biosag-formatos-btn-primary {
    background: #0b5d7a;
    color: #ffffff !important;

    border: 1px solid #0b5d7a;
}

._do_biosag-formatos-btn-primary:hover {
    background: #084a61;
    color: #ffffff !important;

    border-color: #084a61;

    transform: translateY(-1px);
}


/* ==========================================
   BOTÓN PPTX
   ========================================== */

._do_biosag-formatos-btn-secondary {
    background: #ffffff;
    color: #0b5d7a !important;

    border: 1px solid #ccd8db;
}

._do_biosag-formatos-btn-secondary:hover {
    background: #f0f4f7;
    color: #0b5d7a !important;

    transform: translateY(-1px);
}


/* ==========================================
   BOTÓN EJEMPLO
   ========================================== */

._do_biosag-formatos-btn-example {
    background: #f0f4f7;
    color: #0b5d7a !important;

    border: 1px solid #ccd8db;
}

._do_biosag-formatos-btn-example:hover {
    background: #e6f0f3;
    color: #0b5d7a !important;

    transform: translateY(-1px);
}


/* ==========================================
   NOTA
   ========================================== */

._do_biosag-formatos-note {
    margin-top: 22px;
    padding: 16px 18px;

    background: #f7f9fa;

    border-left: 4px solid #0b5d7a;
    border-radius: 0 10px 10px 0;

    color: #5f6d72;

    font-size: 14px;
    line-height: 1.6;
}

._do_biosag-formatos-note strong {
    color: #3d555c;
}


/* ==========================================
   RESPONSIVE
   ========================================== */

@media (max-width: 700px) {

    ._do_biosag-formatos {
        margin: 25px auto;
        padding: 0 10px;
    }

    ._do_biosag-formatos-hero {
        padding: 32px 20px;
    }

    ._do_biosag-formatos-hero h2 {
        font-size: 26px;
    }

    ._do_biosag-formatos-hero p {
        font-size: 15px;
    }

    ._do_biosag-formatos-section {
        padding: 22px 18px;
    }

    ._do_biosag-formatos-grid {
        grid-template-columns: 1fr;
    }

    ._do_biosag-formatos-section-header {
        align-items: flex-start;
    }

    ._do_biosag-formatos-section-header h3 {
        font-size: 21px;
    }

    ._do_biosag-formatos-card p {
        min-height: auto;
    }

    ._do_biosag-formatos-actions {
        flex-direction: column;
    }

    ._do_biosag-formatos-btn {
        width: 100%;
        box-sizing: border-box;
    }
}
/* ======================================================== */
/* ESTILOS PARA EL BOTÓN DE DETALLES                        */
/* ======================================================== */
.bio_btn-detalles {
  margin-top: 15px;
  background-color: #0c5460 !important; /* Color petróleo institucional */
  cursor: pointer;
  display: inline-block;
}
.bio_btn-detalles:hover {
  background-color: #083842 !important; 
}


/* ======================================================== */
/* ESTILOS DE LA VENTANA MODAL (ADAPTATIVA Y SIN ZOOM)      */
/* ======================================================== */
.bio_modal-overlay {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75);
  justify-content: center;
  align-items: center;
  overflow-y: auto; /* Permite scroll general si la pantalla es muy baja */
  padding: 15px;
  box-sizing: border-box;
}

.bio_modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  max-width: 800px;
  width: 90%;
  max-height: 90vh; /* Altura máxima respecto a la pantalla */
  position: relative;
  text-align: center;
  box-shadow: 0 5px 25px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  overflow-y: auto; /* <--- AQUÍ ESTÁ EL CAMBIO CLAVE: Muestra el scroll en todo el contenido del modal */
  margin: auto;
}

.bio_modal-content h3 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #333;
  flex-shrink: 0;
}

/* Contenedor interno con scroll para la imagen alta */
.bio_modal-body {
  overflow-y: auto; /* Habilita barra de desplazamiento interna si la imagen excede el espacio */
  max-height: calc(85vh - 70px); 
  padding-right: 5px;
}

.bio_modal-content img {
  width: 100%;
  height: auto;
  border-radius: 5px;
  display: block;
  /* Quitamos restricciones internas para que fluya con el scroll del modal */
}
.bio_modal-close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 28px;
  font-weight: bold;
  color: #aaa;
  cursor: pointer;
  z-index: 10;
}

.bio_modal-close:hover {
  color: #000;
}


/* ======================================================== */
/* CONTENEDOR PRINCIPAL Y BOTÓN DE DESCARGA                 */
/* ======================================================== */
.bio_download-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 45px 0 25px 0; 
  text-align: center;
}

.bio_download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 34px;
  background: linear-gradient(135deg, #0c5460 0%, #083842 100%);
  color: #ffffff !important;
  font-size: 1.1rem;
  font-weight: 600;
  text-decoration: none !important;
  border-radius: 50px; 
  box-shadow: 0 4px 15px rgba(12, 84, 96, 0.35);
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
}

.bio_download-btn:hover {
  background: linear-gradient(135deg, #083842 0%, #052329 100%);
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(12, 84, 96, 0.45);
  color: #ffffff !important;
}

.bio_download-btn:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(12, 84, 96, 0.3);
}

.bio_download-icon {
  font-size: 1.25rem;
  transition: transform 0.3s ease;
}

.bio_download-btn:hover .bio_download-icon {
  transform: translateY(3px); 
}
/* ==========================================================================
   BIOSaG 2026 - App Landing Styles (custom.css)
   ========================================================================== */

:root {
  --app-biosag-blue: #1E65FF;
  --app-biosag-cyan: #00D0FF;
  --app-biosag-dark: #1F2937;
  --app-biosag-gray-bg: #F8FAFC;
  --app-biosag-border: #E2E8F0;
}

.app-biosag-wrapper {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--app-biosag-dark);
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px 10px;
}

/* Hero Section */
.app-biosag-hero {
  background: linear-gradient(135deg, #FFFFFF 0%, #F0F7FF 100%);
  border: 1px solid var(--app-biosag-border);
  border-radius: 16px;
  padding: 40px 30px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 30px;
  box-shadow: 0 10px 25px -5px rgba(30, 101, 255, 0.08);
}

.app-biosag-hero-content {
  flex: 1;
}

.app-biosag-badge {
  display: inline-block;
  background: rgba(0, 208, 255, 0.15);
  color: #0088B2;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.app-biosag-hero h1 {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--app-biosag-dark);
  margin: 0 0 12px 0;
}

.app-biosag-subtitle {
  font-size: 15px;
  color: #4B5563;
  line-height: 1.6;
  margin-bottom: 24px;
}

/* Botón y Descarga */
.app-biosag-action-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.app-biosag-btn-download {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(90deg, var(--app-biosag-blue), var(--app-biosag-cyan));
  color: #FFFFFF !important;
  font-weight: 700;
  font-size: 16px;
  padding: 14px 28px;
  border-radius: 12px;
  text-decoration: none !important;
  box-shadow: 0 4px 15px rgba(30, 101, 255, 0.3);
  transition: all 0.25s ease;
}

.app-biosag-btn-download:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(30, 101, 255, 0.4);
  color: #FFFFFF !important;
}

.app-biosag-icon {
  width: 22px;
  height: 22px;
}

.app-biosag-file-info {
  font-size: 12px;
  color: #6B7280;
}

/* Tarjeta QR */
.app-biosag-qr-card {
  background: #FFFFFF;
  border: 1px solid var(--app-biosag-border);
  padding: 18px;
  border-radius: 14px;
  text-align: center;
  width: 210px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.app-biosag-qr-frame img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.app-biosag-qr-text {
  font-size: 12px;
  color: #6B7280;
  margin-top: 10px;
  line-height: 1.3;
}

/* Features Grid */
.app-biosag-features {
  margin-top: 40px;
}

.app-biosag-features h2, .app-biosag-instructions h2 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--app-biosag-dark);
}

.app-biosag-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.app-biosag-card {
  background: var(--app-biosag-gray-bg);
  border: 1px solid var(--app-biosag-border);
  padding: 20px;
  border-radius: 12px;
}

.app-biosag-card-icon {
  font-size: 28px;
  margin-bottom: 10px;
}

.app-biosag-card h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px 0;
}

.app-biosag-card p {
  font-size: 14px;
  color: #4B5563;
  margin: 0;
  line-height: 1.5;
}

/* Pasos de Instalación */
.app-biosag-instructions {
  margin-top: 40px;
  background: #FFFFFF;
  border: 1px solid var(--app-biosag-border);
  padding: 30px;
  border-radius: 16px;
}

.app-biosag-guide-intro {
  font-size: 14px;
  color: #6B7280;
  margin-bottom: 20px;
}

.app-biosag-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.app-biosag-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.app-biosag-step-num {
  background: var(--app-biosag-blue);
  color: #FFFFFF;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}

.app-biosag-step-body h4 {
  margin: 0 0 4px 0;
  font-size: 15px;
  font-weight: 700;
}

.app-biosag-step-body p {
  margin: 0;
  font-size: 14px;
  color: #4B5563;
  line-height: 1.5;
}

/* Responsive */
@media (max-width: 768px) {
  .app-biosag-hero {
    flex-direction: column;
    padding: 24px 20px;
    text-align: center;
  }

  .app-biosag-action-box {
    align-items: center;
    width: 100%;
  }

  .app-biosag-btn-download {
    width: 100%;
    justify-content: center;
  }

  .app-biosag-qr-card {
    display: none;
  }

  .app-biosag-grid {
    grid-template-columns: 1fr;
  }
}
/* ==========================================
   BIOSaG 2026 - Navegación
   ========================================== */

.biosag-nav {
  background-color: #ffffff !important;
  border-radius: 18px 18px 0 0 !important;
  border-bottom: 2px solid #0b5d7a !important;
  padding: 15px 10px !important;
  font-family: 'Segoe UI', Arial, sans-serif !important;
  display: block !important;
}

.biosag-menu {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;

  gap: 8px !important;
}

.biosag-menu li {
  background: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.biosag-menu li a {
  text-decoration: none !important;
  color: #0b5d7a !important;

  font-size: 13px !important;
  font-weight: 600 !important;

  padding: 10px 15px !important;

  transition: all 0.3s ease !important;

  text-transform: uppercase !important;
  border-radius: 8px !important;

  display: inline-block !important;
}

.biosag-menu li a:hover {
  background-color: #f0f4f7 !important;
  color: #0b5d7a !important;
}

.biosag-menu li a.active {
  color: #0b5d7a !important;
  background-color: #e6f0f3 !important;
  box-shadow: inset 0 -3px 0 #0b5d7a !important;
}

.biosag-menu li a.btn-highlight {
  background-color: #0b5d7a !important;
  color: #ffffff !important;
}

.biosag-menu li a.btn-highlight:hover {
  background-color: #084a61 !important;
}

.biosag-menu li a.btn-highlight.active {
  box-shadow: 0 0 10px rgba(11, 93, 122, 0.5) !important;
  outline: 2px solid #0b5d7a !important;
  outline-offset: 2px !important;
}

.biosag-home-icon {
  font-size: 1.2rem !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}
@media (max-width: 600px) {

  .biosag-nav {
    padding: 10px 5px !important;
    border-radius: 10px 10px 0 0 !important;
  }

  .biosag-menu {
    gap: 4px !important;
  }

  .biosag-menu li a {
    font-size: 10px !important;
    padding: 6px 8px !important;
    flex: 1 1 auto !important;
    text-align: center !important;
  }

}
/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* =========================================================
   MENÚ LATERAL MODERNO Y ELEGANTE
   ========================================================= */

/* Tarjeta contenedora con bordes redondeados y sombra */
#sp-right .mod-menu,
.sidebar .mod-menu,
#sp-right ul.menu,
.sidebar ul.menu {
    list-style: none !important;
    padding: 10px !important;
    margin: 0 !important;
    background: #1a1a1a !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
    overflow: hidden !important;
}

/* Ítems principales (Nivel 1) */
#sp-right ul.menu > li,
.sidebar ul.menu > li {
    margin-bottom: 4px !important;
    border: none !important;
}

#sp-right ul.menu > li > a,
#sp-right ul.menu > li > span.nav-header,
.sidebar ul.menu > li > a,
.sidebar ul.menu > li > span.nav-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 16px !important;
    color: #cccccc !important;
    background-color: transparent !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    border-left: 3px solid transparent !important;
    transition: all 0.25s ease-in-out !important;
}

/* Hover en ítems del Nivel 1 */
#sp-right ul.menu > li > a:hover,
.sidebar ul.menu > li > a:hover {
    color: #ffffff !important;
    background-color: #282828 !important;
    padding-left: 20px !important; /* Ligero movimiento a la derecha */
}

/* ÍTEM ACTIVO (Moderno: fondo oscuro con borde amarillo y texto destacado) */
#sp-right ul.menu > li.active > a,
#sp-right ul.menu > li.current-item-ancestor > a,
.sidebar ul.menu > li.active > a,
.sidebar ul.menu > li.current-item-ancestor > a {
    color: #ffffff !important;
    background-color: #282828 !important;
    border-left: 4px solid #f4b400 !important; /* Indicador lateral amarillo */
    font-weight: 700 !important;
}

/* --- SUBMENÚS (NIVEL 2) --- */
#sp-right ul.menu > li > ul,
.sidebar ul.menu > li > ul {
    display: none !important;
    list-style: none !important;
    padding: 6px 0 6px 10px !important;
    margin: 4px 0 !important;
    background: #222222 !important;
    border-radius: 8px !important;
}

#sp-right ul.menu > li.active > ul,
#sp-right ul.menu > li.current-item-ancestor > ul,
.sidebar ul.menu > li.active > ul,
.sidebar ul.menu > li.current-item-ancestor > ul {
    display: block !important;
}

#sp-right ul.menu > li > ul > li > a,
.sidebar ul.menu > li > ul > li > a {
    display: block !important;
    padding: 8px 14px !important;
    color: #aaaaaa !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

#sp-right ul.menu > li > ul > li.active > a,
#sp-right ul.menu > li > ul > li > a:hover {
    color: #f4b400 !important;
    background-color: rgba(244, 180, 0, 0.1) !important; /* Resaltado sutil */
    padding-left: 18px !important;
}

/* --- SUBMENÚS (NIVEL 3) --- */
#sp-right ul.menu > li > ul > li > ul,
.sidebar ul.menu > li > ul > li > ul {
    display: block !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 4px 0 4px 12px !important;
    border-left: 2px solid #333333 !important;
}

#sp-right ul.menu > li > ul > li > ul > li > a,
.sidebar ul.menu > li > ul > li > ul > li > a {
    display: block !important;
    padding: 6px 12px !important;
    color: #888888 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

#sp-right ul.menu > li > ul > li > ul > li.active > a,
.sidebar ul.menu > li > ul > li > ul > li > a:hover {
    color: #ffffff !important;
    font-weight: 600 !important;
    padding-left: 16px !important;
}
/* =========================================================
   1. SECCIÓN INICIATIVA VIVIR SALUDABLE (FONDO ÚNICO PAGE BUILDER)
   ========================================================= */

/* Eliminar fondo blanco por defecto y espacios sobrantes que generan franjas */
#sp-main-body,
#sp-main-body .builder-content,
.sp-page-builder .page-content {
    background-color: transparent !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Sombras y legibilidad del texto sobre el fondo */
.title-shadow {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8) !important;
}

/* Ajuste de espaciado para las tarjetas */
.vivir-saludable-top {
    padding-top: 30px !important;
    padding-bottom: 60px !important;
}

/* Tarjetas con estilo y sombra sobre la imagen de fondo */
.tarjetas-flotantes-container {
    margin-top: 0 !important;
    margin-bottom: 40px !important;
    position: relative !important;
    z-index: 10 !important;
}

.tarjetas-flotantes-container .card {
    min-height: 380px !important;
    background-color: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18) !important;
}

.hover-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.hover-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.22) !important;
}

/* Desactivar bloque de la segunda imagen */
.vivir-saludable-bottom {
    display: none !important;
}


/* =========================================================
   2. PIE DE PÁGINA (FOOTER INSTITUCIONAL)
   ========================================================= */

/* Fondo oscuro del footer pegado directamente al contenido */
#sp-bottom,
#sp-footer {
    background-color: #121417 !important;
    padding: 40px 0 20px 0 !important;
    margin-top: 0 !important;
}

/* Tipografía de auxilio */
.fs-7 {
    font-size: 0.85rem !important;
}

.tracking-wider {
    letter-spacing: 1px !important;
}

/* Efecto hover en enlaces */
.hover-light:hover {
    color: #ffffff !important;
    text-decoration: underline !important;
}

/* Botones de redes sociales */
.ciseal-footer-content .btn-dark {
    background-color: #1d2126 !important;
    transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

.ciseal-footer-content .btn-dark:hover {
    background-color: #f4b400 !important;
    border-color: #f4b400 !important;
    color: #000000 !important;
}

/* Logo PUCE | CISEAL centrado y con buen tamaño */
.ciseal-footer-content img[alt*="CISEAL"],
.ciseal-footer-content .col-12 img {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-height: 110px !important;
    width: auto !important;
}
/* =========================================================
   REGLAS DE SEGURIDAD PARA EL DIRECTORIO (S5_OPTION)
   ========================================================= */

.s5_options {
    clear: both !important;
    display: block !important;
    width: 100% !important;
    margin-bottom: 15px !important;
}

.s5_option {
    clear: both !important;
    display: block !important;
    width: 100% !important;
    min-height: 210px !important;
    margin-bottom: 20px !important;
    padding: 15px !important;
    background-color: #ffffff !important;
    border: 1px solid #e9ecef !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
}

.s5_option img {
    float: left !important;
    margin: 0 20px 10px 0 !important;
    border-radius: 6px !important;
    object-fit: cover !important;
}

.s5_price_wrap {
    clear: both !important;
    display: block !important;
    width: 100% !important;
    padding: 8px 12px !important;
    background-color: #f8f9fa !important;
    border-left: 4px solid #f4b400 !important;
    margin: 25px 0 15px 0 !important;
}