/* -------------------------------------------
GENERALES 
---------------------------------------------- */
:root {
  --default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Raleway", sans-serif;
  --nav-font: "Poppins", sans-serif;
  /* Global Colors - Definición de los colores globales utilizados en el sitio web. Cambiarlos aquí afecta todo el sitio. */
  --background-color: #ffffff;
  /* Color de fondo del sitio */
  --default-color: #444444;
  /* Color por defecto para la mayoría del texto */
  --heading-color: #222222;
  /* Color para los encabezado 2 colores diferentes */
  --accent-color: #6e8b2b;
  --accent-color2: #42580d;
  /* Color de acento utilizado para destacar elementos */
  --surface-color: #ffffff;
  /* Color de fondo para elementos específicos */
  --contrast-color: #ffffff;
  /* Color de contraste para asegurar legibilidad */
  --transition-value: 0.3s;

}

/* -------------------------------------------
ESTILOS DE SECCIONES GENERALES
---------------------------------------------- */
.section {
  padding-top: 4rem;
  /* Espaciado superior para secciones */
  scroll-margin-top: 25px;
  /* Ajuste del margen al hacer scroll */
}
@media (max-width: 640px) {
  .section {
    padding-top: 1rem;
   
  }
}
.section-title h2 {
  font-size: 32px;
  /* Tamaño de fuente de los títulos de sección */
  font-weight: 700;
  /* Grosor de la fuente */
  position: relative;
  /* Posicionamiento relativo para efectos adicionales */
}

.section-title h2:before,
.section-title h2:after {
  content: "";
  /* Línea decorativa antes y después del título */
  width: 50px;
  height: 2px;
  background: var(--accent-color2);
  display: inline-block;
}

.section-title h2:before {
  margin: 0 15px 10px 0;
  /* Espaciado izquierdo y derecho */
}

.section-title h2:after {
  margin: 0 0 10px 15px;
  /* Espaciado izquierdo y derecho */
}

.section-title,
.section-subtitle {
  text-align: center;
  /* Centra el texto del título y subtítulo */
  position: relative;
  /* Posicionamiento relativo para efectos adicionales */
}

h1,
h2,
h3,
h4,
h5,
p,ol,li {
  color: var(--heading-color);
  /* Define el color de los encabezados y párrafos */
  font-family: var(--heading-font);
  /* Define la fuente para encabezados y párrafos */
}

/* -------------------------------------------
MENU
---------------------------------------------- */
body .bg-body-tertiary {
  position: -webkit-sticky;
  /* Hace que el menú sea "pegajoso" para navegadores Webkit */
  position: sticky;
  /* Hace que el menú sea "pegajoso" al hacer scroll */
  top: 0;
  /* Se fija al inicio de la ventana */
  z-index: 1020;
  /* Asegura que el menú quede por encima de otros elementos */
  color: var(--default-color);
  /* Color del texto del menú */
  background-color: var(--background-color) !important;
  /* Color de fondo del menú */
  transition: background-color 0.3s ease;
  /* Transición suave del color de fondo */
}

.scrolled {
  box-shadow: 0px 0 18px rgba(0, 0, 0, 0.1);
  /* Sombra al hacer scroll para dar énfasis */
}

.navbar-collapse .nav-link {
  color: var(--nav-color);
  /* Color de los enlaces del menú */
  font-size: 16px;
  /* Tamaño de fuente de los enlaces */
  font-family: var(--nav-font);
  /* Fuente para los enlaces de navegación */
  font-weight: 400;
  /* Peso de la fuente */
  transition: var(--transition-value);
  /* Transición suave para cambios de estado */
}

.navbar-collapse .navbar-nav .nav-link:hover {
  color: var(--accent-color);
  /* Cambia el color de los enlaces al pasar el cursor */
}

.navbar-nav .nav-link.active {
  color: var(--accent-color2) !important;
  /* Color para el enlace activo */
  font-weight: 500;
  /* Peso de fuente para resaltar el enlace activo */
}
.offcanvas-header {
  display: flex;
  align-items: flex-start !important;}
/* -------------------------------------------
INICIO LANDING
---------------------------------------------- */
.btn-proyectos {
  color: var(--contrast-color);
  /* Color del texto del botón */
  background: var(--accent-color2);
  /* Color de fondo del botón */
  font-size: 14px;
  /* Tamaño de la fuente del botón */
  padding: 8px 20px;
  /* Relleno del botón */
  margin: 0 0 0 30px;
  /* Margen izquierdo del botón */
  border-radius: 50px;
  /* Bordes redondeados */
  transition: var(--transition-value);
  /* Transición suave */
  text-decoration: none;
  /* Quita el subrayado del enlace */
}

.btn-proyectos i{
  padding: 0 10px 0px 0px;
}
.nombre-proyecto {
  margin: 0;
  font-size: 48px;
  /* Tamaño del texto del nombre del proyecto */
  font-weight: 700;
  /* Grosor del texto */
  line-height: 56px;
  /* Altura de línea */
}

.hero-img {
  display: flex;
  justify-content: center;
  /* Centrar horizontalmente */
  align-items: center;
  /* Centrar verticalmente */
}

.animacion-logo {
  animation: moveUpDown 2s ease-in-out infinite;
  /* Animación para mover el logo hacia arriba y abajo */
}

@keyframes moveUpDown {

  0%,
  100% {
    transform: translateY(0);
    /* Posición inicial y final */
  }

  50% {
    transform: translateY(-20px);
    /* Mueve la imagen 20px hacia arriba */
  }
}

.ver-mas {
  font-family: var(--heading-font);
  /* Fuente del botón "ver más" */
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 10px 36px;
  border-radius: 50px;
  /* Bordes redondeados */
  transition: var(--transition-value);
  border: 2px solid var(--accent-color2);
  text-decoration: none;
  color: var(--accent-color);
  /* Color del texto */
}

.ver-mas:hover,
.ver-mas:focus:hover {
  color: var(--contrast-color);
  /* Color del texto al pasar el cursor */
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
  /* Fondo al pasar el cursor */
}

/* -------------------------------------------
DONANTES
---------------------------------------------- */
.donantes {
  padding: 10px 0;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  /* Centra verticalmente */
}

.url-donante,
.url-donante img {
  display: flex;
  justify-content: center;
  /* Centra horizontalmente */
  align-content: center;
  align-items: center;
  /* Centra verticalmente */
}

.donantes-logo {
  opacity: 0.5;
  /* Reduce opacidad de los logos de donantes */
  padding: 5px 5px;
  max-width: 80%;  /* Define el tamaño máximo del logo */
  filter: grayscale(100);
  /* Convierte a escala de grises */
  transition: filter var(--transition-value);
  /* Transición para quitar escala de grises */
}

.donantes-logo:hover {
  filter: none;
  /* Quita la escala de grises al pasar el cursor */
  opacity: 1;
  /* Restaura la opacidad al pasar el cursor */
}

/* -------------------------------------------
ACERCA DE
---------------------------------------------- */
.general-icon {
  max-width: 15%;
  /* Tamaño máximo del icono general */
}

.acercade .content h3 {
  font-weight: 700;
  font-size: 34px;
  /* Tamaño de la fuente para títulos en "acerca de" */
  margin-bottom: 30px;
}

.item-link {
  color: var(--heading-color);
  transition: var(--transition-value);
  text-decoration: none;
  /* Sin subrayado */
}

.item-link:hover {
  color: color-mix(in srgb, var(--accent-color2), transparent 25%);
  /* Color al pasar el cursor */
  text-decoration: none;
}

.item-proyecto {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.contador {
  color: var(--heading-color);
  font-size: 40px;
  /* Tamaño de la fuente del contador */
  font-weight: 700;
  line-height: 40px;
  animation: fadeIn 1s ease-in forwards;
  /* Animación de entrada */
  margin: 10px;
  /* Espaciado entre contadores */
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.poblacion-item {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
  /* Centra los elementos */
}

.poblacion-item div {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

/* -------------------------------------------
RESULTADOS
---------------------------------------------- */
.resultados-item {
  background-color: var(--surface-color);
  box-shadow: 0px 0 30px 0 rgba(0, 0, 0, 0.1);
  /* Sombra alrededor del elemento */
  padding: 50px 30px;
  transition: all ease-in-out 0.4s;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.resultados-item:before {
  content: "";
  position: absolute;
  background: color-mix(in srgb, var(--accent-color2), transparent 96%);
  /* Fondo decorativo */
  right: -80px;
  top: -80px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  transition: all var(--transition-value);
  z-index: -1;
}

.resultados-item:after {
  content: "";
  position: absolute;
  background: color-mix(in srgb, var(--accent-color2), transparent 97%);
  right: -140px;
  top: -140px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  transition: all var(--transition-value);
  z-index: -1;
}

.icon-resultados {
  background: var(--accent-color);
  color: var(--contrast-color);
  font-size: 24px;
  transition: var(--transition-value);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: 5px;
}

.resultados .resultados-item h4 {
  font-weight: 600;
  margin: 15px 0 0 0;
  transition: var(--transition-value);
  font-size: 20px;
}

.resultados-item h4 a {
  color: var(--heading-color);
}

.resultados-item p {
  line-height: 24px;
  font-size: 14px;
  margin: 10px 0 0 0;
}

.resultados-item:hover:before,
.resultados-item:hover:after {
  background: var(--accent-color);
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 0px;
}

.resultados-item:hover h4 a,
.resultados-item:hover p {
  color: var(--contrast-color);
}

/* -------------------------------------------
IMPACTO
---------------------------------------------- */

.cardcontribucion {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
  background-color: var(--surface-color);
  border-radius: 0px !important;
  border: 1px solid  color-mix(in srgb, var(--default-color), transparent 90%) !important ;
  padding: 10px;
  margin-bottom: 10px;
  flex: 1;
  /* Expande la tarjeta para igualar alturas */
  min-height: 175px;
  /* Fuerza a que las tarjetas sean de igual altura */
  display: flex;
  justify-content: center;
    align-items: center;
}

.cardcontribucion:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.cardcontribucion p {
  margin: 0;
  color: #333;
}

.container .col-lg-6 .cardcontribucion ol {
  list-style-type: none;
  /* Quita el estilo de lista predeterminado */
  padding-left: 10px;
  counter-reset: item;
  /* Resetea el contador para numeración */
}

.container .col-lg-6 .cardcontribucion ol li {
  counter-increment: item;
  /* Incrementa el contador */
  padding-left: 15px;
  border-left: 2px solid var(--accent-color);
  /* Línea decorativa en el borde izquierdo */
  position: relative;
}



.container .col-lg-6 .cardcontribucion ol li:hover {
  color: var(--accent-color2);
  /* Cambia el color del texto al pasar el cursor */
  transition: color 0.3s;
}



.equal-height-cards {
  display: flex;
}

.equal-height-cards .col-lg-6 {
  display: flex;
  flex-direction: column;
}
.equal-height-cards h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--accent-color2);
  text-align: center;
  padding: 10px 0;
  border-bottom: 2px solid #ddd;
  margin-bottom: 20px;
  letter-spacing: 1px;
}
/* -------------------------------------------
DESCARGA DOCUMENTOS
---------------------------------------------- */
.documento-item {
  background-color: var(--surface-color);
  display: flex;
  align-items: center;
  padding: 20px;
  transition: var(--transition-value);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  position: relative;
}

.documento-item h3 a {
  font-weight: 700;
  margin: 0;
  padding: 5px;
  line-height: 1;
  font-size: 16px;
  text-decoration: none;
  color: var(--heading-color);
}

.documento-item h3 a:hover {
  color: color-mix(in srgb, var(--accent-color2), transparent 25%);
  text-decoration: none;
}

.documento-item:hover {
  border-color: var(--accent-color2);
}

.documento-item .icon-documento {
  font-size: 2rem;
  /* Tamaño del ícono del documento */
  color: var(--accent-color2);
  transition: color var(--transition-value) ease;
  /* Transición suave para el color */
}

/* -------------------------------------------
GALERIA
---------------------------------------------- */
/* Estilos para la galería de imágenes, asegurando tamaño uniforme */

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}
li .galerias{
  text-align: center;
  color: var(--accent-color);
  display: flex;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 500;
  font-family: var(--heading-font);
  transition: var(--transition-value);
  border: 1px solid var(--accent-color);
  width: 210px;
  height: 75px;
  margin: 2px;
  align-items: center;
  justify-content: center;
}

.galerias:hover,
.galerias.active {
  background: var(--accent-color);
  color: var(--contrast-color) !important;
}

.item img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 18px;
  padding-bottom: 10px;
  object-position: top;
}

/* -------------------------------------------
VIDEOS
---------------------------------------------- */

.video-item iframe {
  width: 100%;
  height: 250px;
  border-radius: 0px;
}
/*
      VIDEOS NO DISPONIBLES==================================
*/

.cardvideo {
  color: var(  --surface-color) !important;
  transition: color var(--transition-value) ease;
  text-decoration: none;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size: 21px;
  font-weight: 300;
  position: relative;
  z-index: 2;
  border-radius: 0px;
}

.iconovideo {
  font-size: 4rem;
  color: #ff0000;
  transition: color var(--transition-value) ease;
  display: block;
  margin-bottom: 10px;
  text-align: center;
  z-index: 2;
}

.cardvideo span {
  z-index: 2;
}

.cardvideo:hover .iconovideo {
  color: #b71c1c;
  /* Color de hover para ícono */
}

.cardvideo:hover span {
  color: #b71c1c;
  /* Color de hover para texto */
}

.video-item- {
  position: relative;
  overflow: hidden;
  border-radius: 0px;
}

.video-item- img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  filter: brightness(70%);
}

.card-body {
  position: relative;
  z-index: 2;
}
/* -------------------------------------------
FOOTER
---------------------------------------------- */
.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* Hace que el contenedor principal ocupe toda la altura de la ventana */
}

.wrapper-in {
  flex: 1;
  /* Permite que el contenido tome el espacio restante */
}

.footer {
  color: var(--default-color);
  background-color: var(--background-color);
  font-size: 14px;
  padding: 40px 0;
  position: relative;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1);
}

.footer .copyright p {
  margin-bottom: 0;
}

.footer .social-links {
  margin-top: 20px;
}

.footer .credits {
  margin-top: 10px;
  font-size: 13px;
  text-align: center;
}