/* Contenedor general */
.wp-caption {
  position: relative;
  display: inline-block;
  overflow: hidden;
  cursor: pointer;
	/* Reserva espacio para el figcaption inicial */
  padding-bottom: 58px;
  box-sizing: border-box;
}

/* Imagen */
.wp-caption img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.5s ease;
}


/* Aseguramos que el texto esté por encima del link */
.wp-caption figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px; /* altura inicial */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  z-index: 4; /* texto siempre encima */
  transition: height 0.5s ease-in-out, font-size 0.5s ease-in-out;
  background-color: var(--caption-bg, inherit);
  overflow: hidden;
}

/* Cursor manito */
.wp-caption figcaption:hover {
  cursor: pointer;
}

/* El enlace cubre todo el área visible del figcaption */
.wp-caption figcaption .caption-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* siempre el alto dinámico del figcaption */
  z-index: 3; /* por debajo del texto */
  text-indent: -9999px; /* ocultamos texto del enlace */
  background: transparent; 
}

/* Triángulo decorativo arriba del caption */
.wp-caption figcaption::after {
  content: "";
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 15px 15px 0 15px;
  border-style: solid;
  border-color: var(--caption-bg, inherit) transparent transparent transparent;
  transition: opacity 0.5s ease-in-out;
}

/* Hover: crece hacia arriba */
.wp-caption:hover figcaption {
  height: 100%; /* se expande desde abajo hacia arriba */
  font-size: 1.4rem;
}

/* El triángulo desaparece cuando el overlay cubre */
.wp-caption:hover figcaption::after {
  opacity: 0;
}

/* Imagen con zoom suave */
.wp-caption:hover img {
  transform: scale(1.1);
}

#donacion {
  /*display: flex;
  flex-direction: row;
  gap: 30px;*/
  width: 100%;
  padding: 10% 5% 5% 5%;
  margin:0 auto;
}

#donacion .contenedor-donacion {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 7%;
  align-items: flex-start;
}
#donacion .formulario {
  flex: 1 1 33%;
  /*min-width: 300px;*/
}
#donacion .formulario .two-cols {
  display: flex;
  flex-direction: row;
  gap: 10px;
}
#donacion .formulario hr {
  border: 2px solid #233E93;
  margin: 30px 0;
  display: block;
}

#donacion .imagenes {
  flex: 1 1 60%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(40%, 1fr));
  gap: 30px;
  align-items: start;
}
#donacion .imagenes .programa {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

#donacion .imagenes img {
  max-width: 100%;
  height: auto;
}

#donacion .formulario h3,
#donacion .formulario h4 {
  margin-bottom: 5px;
  margin-top: 20px;
  font-family: "Gilroy", Sans-serif;
  font-size: 1.2vw;
  font-weight: 600;
  color: #233E93;
}
#donacion .formulario h3 {
  margin-top: 0;
}

#donacion .formulario select,
#donacion .formulario input[type="text"],
#donacion .formulario input[type="number"],
#donacion .formulario input[type="tel"],
#donacion .formulario input[type="email"] {
  width: 100%;
  padding: 10px;
  margin: 6px 0;
  border: 1px solid #233E93;
  border-radius: 14px;
  font-size: 14px;
  font-family: "Gilroy", Sans-serif;
}

#donacion .formulario .terminos {
  display: flex;
  align-items: center;
  margin: 12px 0;
  font-size: 1.0vw;
  color: #233E93;
}

#donacion .formulario .terminos a {
  font-size: 1.0vw;
  color: #233E93;
  text-decoration: underline;
}

#donacion .formulario .terminos input {
  margin-right: 8px;
}

#donacion .formulario .btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0;
}

#donacion .formulario .btn-group button {
  flex: 1;
  padding: 12px;
  border: 1px solid #233E93;
  border-radius: 14px;
  background: white;
  font-family: "Gilroy", Sans-serif;
  cursor: pointer;
  font-weight: bold;
  color: #233E93;
  transition: background-color 0.3s ease;
}

#donacion .formulario .btn-group button:hover,
#donacion .formulario .btn-group button.active {
  background: #233E93;
  color: white;
}

#donacion .formulario input {
  color: #233E93;
  font-weight: bold;
}

#donacion .formulario input[type="text"],
#donacion .formulario input[type="tel"],
#donacion .formulario input[type="email"] {
  padding: 12px 20px;
}




#donacion .formulario .btn-group input[type="number"] {
  padding: 12px 20px;
  border: 1px solid #233E93;
  border-radius: 14px;
  font-weight: bold;
  grid-column: span 2;
  font-family: "Gilroy", Sans-serif;
  font-size: 16px;
  width: 100%;
  margin: 0;
}

#donacion .formulario input::placeholder {
  color: #233E93;
  font-weight: bold;
}


#donacion .formulario .btn-submit {
  width: 100%;
  padding: 12px;
  background: #233E93;
  border: none;
  font-family: "Gilroy", Sans-serif;
  border-radius: 14px;
  color: white;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  margin-top: 30px;
}

#donacion .formulario .btn-submit:hover {
  background: #1630a0;
}

.monto-selector button:hover,
.monto-selector button.active {
  background-color: #142d80;
}


#donacion .formulario .monto-selector-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 20px 0;
}

    .monto-selector-grid button {
      background-color: #0a1c59;
      color: #fff;
      border: none;
      padding: 12px 20px;
      border-radius: 6px;
      font-size: 16px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .monto-selector-grid button:hover,
    .monto-selector-grid button.active {
      background-color: #142d80;
    }

    .monto-selector-grid input::placeholder {
      color: #999;
    }

/*************/
/* PROGRAMAS */
/*************/

section.eje {
  display: flex;
  flex-direction: column;
  gap: 25px;
  padding: 30px;
  border: none !important;
}

section.eje .item {
  display: flex;
  flex-direction: row;
  gap: 25px;
  align-items: start;
}
section.eje .item .contenido {
  align-items: center;
}

section.eje .item h3 {
  font-family: "Gilroy";
  font-weight: bold;
  font-size: 2.2vw;
  color:#1630a0;
  margin: 0 0 15px 0;
}
section.eje .item p {
  font-family: "Gilroy";
  font-size: 1.4vw;
  color:#1630a0;
}


section.eje .item img {
  width: 40%;
}


/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
   
	
}


@media only screen and (max-width: 600px) {
    
    section.eje {
        gap: 20px;
        padding: 20px 20px 0 20px;
    }

    section.eje .item {
      flex-direction: column;
      gap: 10px;
    }

    section.eje .item img {
        width: 100%;
    }

    section.eje .item p {
        font-size: 3.5vw;
    }

    #donacion {
        padding: 30% 5% 15% 5%;
    }

    #donacion .formulario h3, #donacion .formulario h4 {
        font-size: 4.5vw;
    }

    #donacion .formulario .terminos {
      font-size: 3.8vw;
    }

    #donacion .formulario .terminos a{
      font-size: 3.8vw;
    }

    #donacion .formulario .btn-submit {
      margin-top: 10px;
    }

    #donacion .contenedor-donacion {
      flex-direction: column;
      gap: 30px;
    }

    #donacion .imagenes {
      grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
    }

}