@font-face {
    font-family: 'Impact';
    src: url('/fonts/impact.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }
  
  /* Cargar la fuente Devin Bold */
  @font-face {
    font-family: 'Devin Bold';
    src: url('/fonts/devinbold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
  }

  h1, h2, h3 {
    font-family: 'Devin Bold', sans-serif;
    letter-spacing: 2px;
  }

  h3, h4, h5 {
    font-family: 'Impact', sans-serif;
    letter-spacing: 2px;
  }

  p {
    text-align: justify;
}


/* Definición de variables globales en :root */
:root {
    --color-verde: #83ae3e;
    --color-azul: #0c2587;
    --color-azul-secundario: #314b95;
    --color-verde-claro: #28a745;
    --color-blanco: #ffffff;
    --color-verde-suave: #eafccd;
    --color-azul-suave: #d9ecfa;
    --color-rojo: #f02222; /* Este color podrías cambiarlo si lo deseas */
    --tblr-blue: #066fd1;
    --tblr-indigo: #4263eb;
    --tblr-purple: #ae3ec9;
    --tblr-pink: #d6336c;
    --tblr-red: #d63939;
    --tblr-orange: #f76707;
    --tblr-yellow: #f59f00;
    --tblr-green: #2fb344;
    --tblr-teal: #0ca678;
    --tblr-cyan: #17a2b8;
    --tblr-black: #000000;
    --tblr-white: #ffffff;
    --tblr-gray: #4b5563;
    --tblr-gray-dark: #1f2937;
    --tblr-gray-100: #f3f4f6;
    --tblr-gray-200: #e5e7eb;
    --tblr-gray-300: #d1d5db;
    --tblr-gray-400: #9ca3af;
    --tblr-gray-500: #6b7280;
    --tblr-gray-600: #4b5563;
    --tblr-gray-700: #374151;
    --tblr-gray-800: #1f2937;
    --tblr-gray-900: #111827;
    --tblr-primary: #066fd1;
    --tblr-secondary: #6b7280;
    --tblr-success: #2fb344;
    --tblr-info: #4299e1;
    --tblr-warning: #f59f00;
    --tblr-danger: #d63939;
    --tblr-light: #f9fafb;
    --tblr-dark: #1f2937;
    --tblr-muted: #6b7280;
    --tblr-blue: #066fd1;
    --tblr-azure: #4299e1;
    --tblr-indigo: #4263eb;
    --tblr-purple: #ae3ec9;
    --tblr-pink: #d6336c;
    --tblr-red: #d63939;
    --tblr-orange: #f76707;
    --tblr-yellow: #f59f00;
    --tblr-lime: #74b816;
    --tblr-green: #2fb344;
    --tblr-teal: #0ca678;
    --tblr-cyan: #17a2b8;
    --tblr-primary-rgb: 6, 111, 209;
    --tblr-secondary-rgb: 107, 114, 128;
    --tblr-success-rgb: 47, 179, 68;
    --tblr-info-rgb: 66, 153, 225;
    --tblr-warning-rgb: 245, 159, 0;
    --tblr-danger-rgb: 214, 57, 57;
    --tblr-light-rgb: 249, 250, 251;
    --tblr-dark-rgb: 31, 41, 55;
    --tblr-muted-rgb: 107, 114, 128;
    --tblr-blue-rgb: 6, 111, 209;
    --tblr-azure-rgb: 66, 153, 225;
    --tblr-indigo-rgb: 66, 99, 235;
    --tblr-purple-rgb: 174, 62, 201;
    --tblr-pink-rgb: 214, 51, 108;
    --tblr-red-rgb: 214, 57, 57;
    --tblr-orange-rgb: 247, 103, 7;
    --tblr-yellow-rgb: 245, 159, 0;
    --tblr-lime-rgb: 116, 184, 22;
    --tblr-green-rgb: 47, 179, 68;
    --tblr-teal-rgb: 12, 166, 120;
    --tblr-cyan-rgb: 23, 162, 184;
    --tblr-primary-text-emphasis: rgb(2.4, 44.4, 83.6);
    --tblr-secondary-text-emphasis: rgb(42.8, 45.6, 51.2);
    --tblr-success-text-emphasis: rgb(18.8, 71.6, 27.2);
    --tblr-info-text-emphasis: rgb(26.4, 61.2, 90);
    --tblr-warning-text-emphasis: rgb(98, 63.6, 0);
    --tblr-danger-text-emphasis: rgb(85.6, 22.8, 22.8);
    --tblr-light-text-emphasis: #374151;
    --tblr-dark-text-emphasis: #374151;
    --tblr-primary-bg-subtle: rgb(205.2, 226.2, 245.8);
    --tblr-secondary-bg-subtle: rgb(225.4, 226.8, 229.6);
    --tblr-success-bg-subtle: rgb(213.4, 239.8, 217.6);
    --tblr-info-bg-subtle: rgb(217.2, 234.6, 249);
    --tblr-warning-bg-subtle: rgb(253, 235.8, 204);
    --tblr-danger-bg-subtle: rgb(246.8, 215.4, 215.4);
    --tblr-light-bg-subtle: rgb(249, 249.5, 250.5);
    --tblr-dark-bg-subtle: #9ca3af;
    --tblr-primary-border-subtle: rgb(155.4, 197.4, 236.6);
    --tblr-secondary-border-subtle: rgb(195.8, 198.6, 204.2);
    --tblr-success-border-subtle: rgb(171.8, 224.6, 180.2);
    --tblr-info-border-subtle: rgb(179.4, 214.2, 243);
    --tblr-warning-border-subtle: rgb(251, 216.6, 153);
    --tblr-danger-border-subtle: rgb(238.6, 175.8, 175.8);
    --tblr-light-border-subtle: #e5e7eb;
    --tblr-dark-border-subtle: #6b7280;
    --tblr-white-rgb: 255, 255, 255;
    --tblr-black-rgb: 0, 0, 0;
    --tblr-font-sans-serif:    "Inter Var", Inter, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
    --tblr-font-monospace:  Monaco, Consolas, Liberation Mono, Courier New, monospace;
    --tblr-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --tblr-body-font-family: var(--tblr-font-sans-serif);
    --tblr-body-font-size: 0.875rem;
    --tblr-body-font-weight: 400;
    --tblr-body-line-height: 1.4285714286;
    --tblr-body-color: #1f2937;
    --tblr-body-color-rgb: 31, 41, 55;
    --tblr-body-bg: #f9fafb;
    --tblr-body-bg-rgb: 249, 250, 251;
    --tblr-emphasis-color: #374151;
    --tblr-emphasis-color-rgb: 55, 65, 81;
    --tblr-secondary-color: rgba(31, 41, 55, 0.75);
    --tblr-secondary-color-rgb: 31, 41, 55;
    --tblr-secondary-bg: #e5e7eb;
    --tblr-secondary-bg-rgb: 229, 231, 235;
    --tblr-tertiary-color: rgba(31, 41, 55, 0.5);
    --tblr-tertiary-color-rgb: 31, 41, 55;
    --tblr-tertiary-bg: #f3f4f6;
    --tblr-tertiary-bg-rgb: 243, 244, 246;
    --tblr-heading-color: inherit;
    --tblr-link-color: #066fd1;
    --tblr-link-color-rgb: 6, 111, 209;
    --tblr-link-decoration: none;
    --tblr-link-hover-color: rgb(4.8, 88.8, 167.2);
    --tblr-link-hover-color-rgb: 5, 89, 167;
    --tblr-link-hover-decoration: underline;
    --tblr-code-color: light-dark(var(--tblr-gray-600), var(--tblr-gray-400));
    --tblr-highlight-color: #1f2937;
    --tblr-highlight-bg: rgb(253, 235.8, 204);
    --tblr-border-width: 1px;
    --tblr-border-style: solid;
    --tblr-border-color: #e5e7eb;
    --tblr-border-color-translucent: rgba(4, 32, 69, 0.1);
    --tblr-border-radius: 6px;
    --tblr-border-radius-sm: 4px;
    --tblr-border-radius-lg: 8px;
    --tblr-border-radius-xl: 1rem;
    --tblr-border-radius-xxl: 2rem;
    --tblr-border-radius-2xl: var(--tblr-border-radius-xxl);
    --tblr-border-radius-pill: 100rem;
    --tblr-box-shadow: rgba(var(--tblr-body-color-rgb), 0.04) 0 2px 4px 0;
    --tblr-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --tblr-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    --tblr-box-shadow-inset: 0 0 transparent;
    --tblr-focus-ring-width: 0.25rem;
    --tblr-focus-ring-opacity: 0.25;
    --tblr-focus-ring-color: rgba(var(--tblr-primary-rgb), 0.25);
    --tblr-form-valid-color: #2fb344;
    --tblr-form-valid-border-color: #2fb344;
    --tblr-form-invalid-color: #d63939;
    --tblr-form-invalid-border-color: #d63939;
}

/* Usar las variables definidas */

.mybg-primary {
    background-color: var(--color-azul-secundario);
}

.mybg-secundary {
    background-color: var(--color-azul-secundario);
}

.mybg-blue {
    background-color: var(--color-azul);
}

.mybg-white {
    background-color: var(--color-blanco);
}

.mybg-green {
    background-color: var(--color-verde);
}

.mybg-red {
    background-color: var(--color-rojo);
}

.btn.mybtn-primary {
    --bs-btn-color: var(--color-blanco);
    --bs-btn-bg: var(--color-azul-secundario);
    --bs-btn-border-color: var(--color-azul-secundario);
    --bs-btn-hover-color: var(--color-blanco);
    --bs-btn-hover-bg: var(--color-verde);
    --bs-btn-hover-border-color: var(--color-verde);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: var(--color-blanco);
    --bs-btn-active-bg: var(--color-verde);
    --bs-btn-active-border-color: var(--color-verde);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--color-blanco);
    --bs-btn-disabled-bg: var(--color-azul-secundario);
    --bs-btn-disabled-border-color: var(--color-azul-secundario);
}

.btn.mybtn-secondary {
    --bs-btn-color: var(--color-blanco);
    --bs-btn-bg: var(--color-verde);
    --bs-btn-border-color: var(--color-verde);
    --bs-btn-hover-color: var(--color-blanco);
    --bs-btn-hover-bg: var(--color-azul-secundario);
    --bs-btn-hover-border-color: var(--color-azul-secundario);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: var(--color-blanco);
    --bs-btn-active-bg: var(--color-azul-secundario);
    --bs-btn-active-border-color: var(--color-azul-secundario);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--color-blanco);
    --bs-btn-disabled-bg: var(--color-verde);
    --bs-btn-disabled-border-color: var(--color-verde);
}

.whatsapp-icon {
    position: fixed;
    bottom: 40px; /* Ajusta según sea necesario */
    right: 20px;  /* Ajusta según sea necesario */
    font-size: 40px; /* Tamaño del icono */
    background-color: var(--color-verde); /* Color de fondo de WhatsApp */
    color: var(--color-blanco);
    width: 60px; /* Ancho del contenedor (ajustado según tamaño del icono) */
    height: 60px; /* Alto del contenedor (ajustado para asegurar que sea circular) */
    border-radius: 50%; /* Para asegurar que sea un círculo perfecto */
    display: flex;
    justify-content: center;
    align-items: center; /* Asegura que el icono esté centrado dentro del círculo */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s;
    text-decoration: none;
    border: none;
    z-index: 9999;
}

.whatsapp-icon:hover {
    background-color: var(--color-azul-secundario); /* Color de fondo al pasar el ratón */
}

.text-green {
    color: var(--color-verde); /* Verde */
}

.text-blue {
    color: var(--color-azul); /* Azul */
}



#nuestra-institucion-section h2.main-heading {
    background: linear-gradient(to right, var(--color-verde-claro), var(--color-azul)); /* Degradado de verde a azul */
    color: var(--color-blanco);            /* Texto blanco */
    padding: 5px 15px;       /* Padding 5px arriba y abajo, 15px a la izquierda y derecha */
    text-align: center;      /* Centrado del texto */
    border-radius: 5px;      /* Bordes redondeados */
    display: inline-block;
       /* Evita que el fondo ocupe todo el ancho, el fondo será solo el ancho del texto */
}

.mycontainer {
    
    padding-top: 2%;
    padding-left: 8%;
    padding-right: 8%;
}




/* Modal estilos */
.modal1 {
    display: none; /* Oculto por defecto */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-content1 {
    background-color: var(--color-blanco);
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    position: relative;
    width: 50%; /* Ocupar el 50% del ancho de la pantalla */
    max-width: 600px; /* Opcional: evitar que sea demasiado grande en pantallas grandes */
}

.close {
    position: absolute;
    top: 0px;
    right: 5px;
    font-size: 30px;
    cursor: pointer;
    background-color: var(--color-blanco);
    border-radius: 1px;
}

.modal1 img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}

/* Borde redondeado con degradado */
.custom-border {
    border-radius: 50%; /* Borde redondeado */
    padding: 50px; /* Espaciado interno */
    text-align: center;
    position: relative; /* Necesario para el borde de fondo */
    z-index: 1;
    background: linear-gradient(45deg, #00b140, #007bff); /* Degradado diagonal */
    -webkit-mask: inset(0px 0px 0px 0px round 50%); /* Asegura que la máscara sea redondeada */
    mask: inset(0px 0px 0px 0px round 50%); /* Para aplicar el borde redondeado */
}

.custom-border::before {
    content: '';
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border-radius: 50%; /* Asegura el borde redondeado */
    background: inherit; /* Usa el mismo degradado de fondo */
    z-index: -1; /* Pone el borde detrás del contenido */
}


.about-img img {
    max-width: 100%; /* Limita el ancho de la imagen al tamaño del contenedor */
    height: auto;    /* Mantiene la proporción original de la imagen */
    object-fit: cover; /* Si es necesario, asegura que la imagen cubra el área sin distorsionarse */
}

#valores-institucionales-section h2.main-heading {
    background: linear-gradient(to right, var(--color-verde-claro), var(--color-azul)); /* Degradado de verde a azul */
    color: var(--color-blanco);            /* Texto blanco */
    padding: 5px 15px;       /* Padding 5px arriba y abajo, 15px a la izquierda y derecha */
    text-align: center;      /* Centrado del texto */
    border-radius: 5px;      /* Bordes redondeados */
    display: inline-block;
       /* Evita que el fondo ocupe todo el ancho, el fondo será solo el ancho del texto */
}

#nuestra-autoridad-section h2.main-heading {
    background: linear-gradient(to right, var(--color-verde-claro), var(--color-azul)); /* Degradado de verde a azul */
    color: var(--color-blanco);            /* Texto blanco */
    padding: 5px 15px;       /* Padding 5px arriba y abajo, 15px a la izquierda y derecha */
    text-align: center;      /* Centrado del texto */
    border-radius: 5px;      /* Bordes redondeados */
    display: inline-block;
       /* Evita que el fondo ocupe todo el ancho, el fondo será solo el ancho del texto */
}

.service-item {
    background-color: var(--color-blanco);
    box-shadow: 0px 5px 90px 0px rgba(0, 0, 0, 0.1);
    height: 100%;
    padding: 60px 30px;
    text-align: center;
    transition: 0.3s;
    border-radius: 5px;
  }

  .section-gradient {
    background: linear-gradient(to bottom,  #ffffff, var(--color-verde-suave), var(--color-azul-suave),#ffffff); /* Degradado de blanco a azul suave */
    padding: 30px 0;  /* Espaciado superior e inferior */
  }
  
  .client_container {
    width: 80%;
    margin: 0 auto;
    padding: 35px;
    background-color: #fefeff;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(163, 158, 163, 1);
    -moz-box-shadow: 0px 0px 5px 0px rgba(163, 158, 163, 1);
    box-shadow: 0px 0px 5px 0px rgba(163, 158, 163, 1);
    border-radius: 20px;
  }

  .client_detail-box h4 {
    color: var(--color-azul);
  }
  
  .client_detail-box span {
    text-transform: uppercase;
    color: #48494a;
  }
  
  .client_detail .client_img-box {
    width: 100px;
    margin-right: 15px;
  }
  
  .client_detail .client_img-box img {
    width: 100%;
  }

  #historia-section h2.main-heading {
    background: linear-gradient(to right, var(--color-verde-claro), var(--color-azul)); /* Degradado de verde a azul */
    color: var(--color-blanco);            /* Texto blanco */
    padding: 5px 15px;       /* Padding 5px arriba y abajo, 15px a la izquierda y derecha */
    text-align: center;      /* Centrado del texto */
    border-radius: 5px;      /* Bordes redondeados */
    display: inline-block;
       /* Evita que el fondo ocupe todo el ancho, el fondo será solo el ancho del texto */
}




/*oferta academica*/

#iniciales-section h2.main-heading {
    background: linear-gradient(to right, var(--color-verde-claro), var(--color-azul)); /* Degradado de verde a azul */
    color: var(--color-blanco);            /* Texto blanco */
    padding: 5px 15px;       /* Padding 5px arriba y abajo, 15px a la izquierda y derecha */
    text-align: center;      /* Centrado del texto */
    border-radius: 5px;      /* Bordes redondeados */
    display: inline-block;
       /* Evita que el fondo ocupe todo el ancho, el fondo será solo el ancho del texto */
}

.section-title {
    font-size: 2.5rem;
    color: #0a9396;
    margin-bottom: 2rem;
}

.cardv2 {
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.cardv2:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.cardv2-header {
    background-color: var(--color-azul-secundario);
    color: white;
    font-size: 1.5rem;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.cardv2-body {
    padding: 2rem;
    text-align: center;
}

.cardv2-footer {
    background-color: #e9f5f5;
    text-align: center;
}

.btn-custom {
    background-color: #0a9396;
    color: white;
    border-radius: 25px;
    padding: 10px 30px;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.btn-custom:hover {
    background-color: #94d2bd;
    color: #333;
}

.offer-icon {
    font-size: 3rem;
    color: #0a9396;
}

.section1 {
    background: linear-gradient(to bottom,  #ffffff, var(--color-verde-suave), var(--color-azul-suave),#ffffff); /* Degradado de blanco a azul suave */
    padding: 4rem 0;
}


/*termina oferta academica*/

.mi-spinner {
    width: 18px;
    height: 18px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: girar 1s linear infinite;
    display: inline-block;
    margin-left: 10px;
}

@keyframes girar {
    to {
        transform: rotate(360deg);
    }
}

.info-item+.info-item {
  margin-top: 40px; 
}

.info-item i {
  color: white;
  background: var(--color-azul);
  font-size: 20px;
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  transition: all 0.3s ease-in-out;
  margin-right: 15px;
}

/* Eliminar líneas/bordes del estilo flush */
.accordion-custom .accordion-item {
  border: none;
}
.accordion-custom .accordion-button {
  border: none;
  box-shadow: none;
  padding-right: 3rem; /* espacio para el icono */
  position: relative;
}

/* Ocultar el ícono predeterminado */
.accordion-button::after {
  display: none;
}

/* Icono personalizado (+ / -) */
.icon-circle {
  width: 32px;
  height: 32px;
  background-color: var(--color-azul);; /* Azul Bootstrap */
  color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  font-size: 18px;
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  
}

/* Cambiar de + a - cuando esté abierto */
.accordion-button[aria-expanded="true"] .icon-circle::before {
  content: "-";
}

.accordion-button[aria-expanded="false"] .icon-circle::before {
  content: "+";
}


.accordion-header .accordion-button {
  font-weight: 400 !important;
}

.a-personal {
	width: 100%;
	display: block;
	border: none;
	outline: 0;
	position: relative;
	cursor: pointer;
	text-decoration: none;
	font-weight: 600;
	line-height: 1;
	font-size: 18px;
	user-select: none;
	color: #062e5f;
	font-family: "Roboto", sans-serif;
	z-index: 1;
}

.borde-redondeado {
  border: 1px solid #ccc;       /* línea gris clara */
  border-radius: 10px;          /* redondeo */

  background-color: #fff;       /* opcional, para que el fondo sea blanco */
  box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.1); /* sombra hacia derecha y abajo */
  padding: 1rem; /* si no usas clases de Bootstrap */
}

ul.sublista {
  margin-left: 1.5rem; /* Ajusta según tu diseño */
  margin-top: 0.3rem;
  list-style: none;
  padding-left: 0;
}

ul.sublista li {
  display: flex;
  align-items: center;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.fondo-pantalla {
  background-image: url('/img/fondo.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh; /* ocupa toda la pantalla */
}

/*----------------------------------*/



#floating-buttons {
    position: fixed;
    bottom: 70px;
    right: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 20px;
    z-index: 9999;
}

.boton-postulacion-contenedor {
    display: flex;
    align-items: center;
    gap: 10px;
}

.texto-postulacion {
    font-size: 14px;
    font-weight: 600;
    color: #007BFF;
    background-color: white;
    padding: 6px 10px;
    border-radius: 8px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.floating-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background-color: #007BFF;
    color: white;
    text-decoration: none;
    position: relative;
    transition: background-color 0.3s;
}

.floating-button:hover {
    background-color: #0056b3;
}

.floating-button-w {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background-color: var(--color-verde);
    color: white;
    text-decoration: none;
    position: relative;
    transition: background-color 0.3s;
}

.floating-button-w:hover {
    background-color: #0056b3;
}

.icono-boton {
    font-size: 28px;
    color: white;
    
}

.icono-boton-w {
    font-size: 38px;
    color: white;
}

.postulacion-notification {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 13px;
    height: 13px;
    background-color: red;
    border-radius: 50%;
    animation: parpadeo 1s infinite;
}

@keyframes parpadeo {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

#img-vision {
    transition: height 0.4s ease;
}



/* Estilo general para el navbar cuando no hay scroll */
.navbar {
    background-color: #fff;  /* Fondo blanco por defecto */
    transition: background-color 0.3s ease, color 0.3s ease; /* Transición suave */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.404);
}

/* Estilo cuando se hace scroll */
.navbar.scrolled {
    background-color: var(--color-azul) !important; /* Fondo oscuro cuando se hace scroll */
    color: white; /* Color blanco para el texto */
}

/* Cambiar color de los enlaces cuando se hace scroll */
.navbar.scrolled .nav-link {
    color: white !important; /* Color blanco para los enlaces */
}

/* Cambiar color del logo cuando se hace scroll */
.navbar.scrolled .navbar-brand {
    color: white !important; /* Color blanco para el texto del logo */
}

/* Cambiar color de los iconos dentro del navbar */
.navbar.scrolled .navbar-toggler-icon {
    background-color: white; /* Cambiar el color de la hamburguesa */
}

/* Cambiar color de los iconos sociales dentro del navbar (si tienes alguno) */
.navbar.scrolled .navbar-icon {
    color: white !important; /* Color blanco para los iconos */
}

#navbar-logo {
    width: auto;  /* Ajusta el tamaño según tus necesidades */
    height: 50px;    
    transition: none;
    z-index: 1010;
}


.dropdown-menu .dropdown-item:hover {
    background-color: var(--color-verde); /* azul claro */
    color: #fff; /* texto azul Bootstrap */
}

.navbar-nav .nav-link:hover {
    background-color: var(--color-verde);; /* azul claro */
    color: #fff; /* azul institucional */
    border-radius: 5px; /* opcional: esquinas redondeadas */
}

.navbar-nav .nav-link.active {
    background-color: var(--color-azul); /* azul Bootstrap */
    color: #fff !important;   /* texto blanco */
    border-radius: 5px;       /* opcional */
}

.custom-hover-card {
    background-color: #fff;
    border: 1px solid #e5e7eb; /* gris claro */
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    cursor: pointer;
}

.custom-hover-card:hover {
    background-color: #f3f4f6; /* gris más claro al hover */
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}


.nav-item.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;   /* evita que suba */
    top: 100%;  /* opcional, evita que se mueva */
}

.navbar-nav .nav-link {
    min-width: 100px;   /* ancho mínimo igual para todos */
    text-align: center; /* centra el texto */
    padding: 10px 0;    /* misma altura */
}



@media (min-width: 992px) {
  .navbar .nav-item.dropdown:hover > .dropdown-menu {
    display: block;
  }
  .navbar .dropdown-menu {
    margin-top: 0; /* evita salto hacia arriba */
  }
}

/* En móvil: submenú fluye debajo, ancho completo */
@media (max-width: 991.98px) {
  .navbar .dropdown-menu {
    position: static;
    float: none;
    width: 100%;
  }
}


/* Estilo para la lista sin puntos */
/*
ul {
    list-style-type: none;  
    padding-left: 0;        
}

ul li {
    display: flex;         
    align-items: center;   
}

ul li i {
    margin-right: 10px;    
    color: var(--color-azul);
}

ul li i:hover {
    margin-right: 10px;    
    color: var(--color-verde-claro);
}
*/

 .dropdown-item.active {
    background-color: var(--color-azul); /* azul Bootstrap */
    color: #fff !important;   /* texto blanco */
    border-radius: 5px;       /* opcional */
}

 .dropdown-item.active {
    background-color: var(--color-azul); /* azul Bootstrap */
    color: #fff !important;   /* texto blanco */
    border-radius: 5px;       /* opcional */
}

body {
   
    background: url('../img/fondo.jpg') no-repeat center center fixed;
    background-size: cover;
}

.list-group-item:hover {
    background-color: var(--color-azul); /* azul bootstrap */
}

.list-group-item:hover a {
    color: white !important;
}

.steps {
  --tblr-steps-color: var(--tblr-primary);
  --tblr-steps-inactive-color: var(--tblr-border-color);
  --tblr-steps-dot-size: .5rem;
  --tblr-steps-border-width: 2px;
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
}

.steps-green {
  --tblr-steps-color: var(--tblr-green);
}
.steps-green-lt {
  --tblr-steps-color: var(--tblr-green-lt);
}

.step-item {
  position: relative;
  flex: 1 1 0;
  min-height: 1rem;
  margin-top: 0;
  color: inherit;
  text-align: center;
  cursor: default;
  padding-top: calc(var(--tblr-steps-dot-size));
}
a.step-item {
  cursor: pointer;
}
a.step-item:hover {
  color: inherit;
}

.step-item:after, .step-item:before {
  background: var(--tblr-steps-color);
}
.step-item:not(:last-child):after {
  position: absolute;
  left: 50%;
  width: 100%;
  content: "";
  transform: translateY(-50%);
}
.step-item:after {
  top: calc(var(--tblr-steps-dot-size) * 0.5);
  height: var(--tblr-steps-border-width);
}
.step-item:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  box-sizing: content-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100rem;
  transform: translateX(-50%);
  color: var(--tblr-white);
  width: var(--tblr-steps-dot-size);
  height: var(--tblr-steps-dot-size);
}
.step-item.active {
  font-weight: var(--tblr-font-weight-bold);
}
.step-item.active:after {
  background: var(--tblr-steps-inactive-color);
}
.step-item.active ~ .step-item {
  color: var(--tblr-disabled-color);
}
.step-item.active ~ .step-item:after, .step-item.active ~ .step-item:before {
  background: var(--tblr-steps-inactive-color);
}

.steps-counter {
  --tblr-steps-dot-size: 1.5rem;
  counter-reset: steps;
}
.steps-counter .step-item {
  counter-increment: steps;
}
.steps-counter .step-item:before {
  content: counter(steps);
}

.steps-vertical {
  --tblr-steps-dot-offset: 6px;
  flex-direction: column;
}
.steps-vertical.steps-counter {
  --tblr-steps-dot-offset: -2px;
}
.steps-vertical .step-item {
  text-align: left;
  padding-top: 0;
  padding-left: calc(var(--tblr-steps-dot-size) + 1rem);
  min-height: auto;
}
.steps-vertical .step-item:not(:first-child) {
  margin-top: 1rem;
}
.steps-vertical .step-item:before {
  top: var(--tblr-steps-dot-offset);
  left: 0;
  transform: translate(0, 0);
}
.steps-vertical .step-item:not(:last-child):after {
  position: absolute;
  content: "";
  transform: translateX(-50%);
  top: var(--tblr-steps-dot-offset);
  left: calc(var(--tblr-steps-dot-size) * 0.5);
  width: var(--tblr-steps-border-width);
  height: calc(100% + 1rem);
}

.mi-lista {
    list-style: none;
    padding-left: 0;
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* suaviza el scroll en iOS */
}