:root {
   --verde-principal: #2E6069;
   --verde-principal-op: #2e6069d0;
   --verde-secundario: #79D799;
   --verde-uru: #00A555;
   --celeste-cuadros: #86C1C4;
   --arena: #ECE2C6;
   --azul-uru: #006BA0;
   --newsletter: 150px;
}

/* ACTIVIDADES */
.modal-princ {
   width: 100%;
   height: 100%;
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   padding: 2rem;
   border: none;
   border-radius: 10px;
   z-index: 1000000;

   & .modal-princ-content {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px;

      & .item {
         cursor: pointer;
         background: #f0f0f0;
         margin: 10px 0;
         border-radius: 6px;
         transition: background 0.3s;
         width: 300px;
         height: 300px;
         overflow: hidden;
         position: relative;

         & p {
            width: 80%;
            position: absolute;
            padding: 10px;
            margin: 10px;
            color: var(--verde-principal);
            font-weight: bolder;
            background-color: #fffa;
            border-radius: 6px;
         }

         & img {
            height: 100%;
         }

         & .fecha-it-p {
            width: fit-content;
            position: absolute;
            padding: 10px;
            margin: 10px;
            color: var(--verde-principal);
            font-weight: bolder;
            background-color: #fffa;
            bottom: 0;
            right: 0;
            border-radius: 6px;
         }
      }

      & .item:hover {
         background: #ddd;
      }
   }

   & .cerrarMainModal {
      width: 35px;
      height: 35px;
      background-color: var(--verde-secundario);
      border: none;
      position: absolute;
      right: 10px;
      top: 10px;
      font-size: 25px;
      cursor: pointer;
   }
}

& .modal-princ::backdrop {
   background: rgba(0, 0, 0, 0.6);
}


.modal-detail {
   width: 900px;
   height: 800px;
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   padding: 2rem;
   border: none;
   border-radius: 10px;
   z-index: 1000001;

   & #modalContent {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
      /* o center si querés centrar las filas */

      & h2 {
         width: 80%;
         text-align: center;
      }

      & p {
         width: 80%;
         padding-bottom: 20px;
      }

      & img {
         height: 200px;
         /* alto fijo */
         width: auto;
         /* ancho variable según proporción */
         border-radius: 5px;
         object-fit: contain;
         /* mantiene proporción sin recorte */
         flex-shrink: 0;
         /* evita que la imagen se achique más allá de su tamaño natural */
      }

      /* Videos locales */
      /* & video {
         max-width: 80%;
         max-height: 300px;
         border-radius: 5px;
         object-fit: contain;
         flex-shrink: 0;
      } */

      /* Videos de YouTube (iframe) */
      & iframe {
         width: 80%;
         aspect-ratio: 16 / 9;
         /* mantiene proporción */
         border-radius: 5px;
         display: block;
      }
   }



   & .cerrarDetailModal {
      width: 35px;
      height: 35px;
      background-color: var(--verde-secundario);
      border: none;
      position: absolute;
      right: 10px;
      top: 10px;
      font-size: 25px;
      cursor: pointer;
   }
}

& .modal-detail::backdrop {
   background: rgba(0, 0, 0, 0.6);
}


/* EDUCACION*/
.modal-princ-edu {
   width: 100%;
   height: 100%;
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   padding: 2rem;
   border: none;
   border-radius: 10px;
   z-index: 1000000;

   & .modal-princ-content-edu {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px;

      & .item-edu {
         cursor: pointer;
         background: #f0f0f0;
         /* padding: 10px; */
         margin: 10px 0;
         border-radius: 6px;
         transition: background 0.3s;
         width: 300px;
         height: 300px;
         overflow: hidden;
         position: relative;

         & p {
            width: 80%;
            position: absolute;
            padding: 10px;
            margin: 10px;
            color: var(--verde-principal);
            font-weight: bolder;
            background-color: #fffa;
         }

         & img {
            width: 100%;
            height: 100%;
            object-fit: cover;

         }

         & .fecha-it-p {
            width: fit-content;
            position: absolute;
            padding: 10px;
            margin: 10px;
            color: var(--verde-principal);
            font-weight: bolder;
            background-color: #fffa;
            bottom: 0;
            right: 0;
            border-radius: 6px;
         }
      }

      & .item:hover {
         background: #ddd;
      }
   }

   & .cerrarMainModal {
      width: 35px;
      height: 35px;
      background-color: var(--verde-secundario);
      border: none;
      position: absolute;
      right: 10px;
      top: 10px;
      font-size: 25px;
      cursor: pointer;
   }
}

& .modal-princ::backdrop {
   background: rgba(0, 0, 0, 0.6);
}

.modal-detail-edu {
   width: 900px;
   height: 800px;
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   padding: 2rem;
   border: none;
   border-radius: 10px;
   z-index: 1000001;

   & #modalContent {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
      /* o center si querés centrar las filas */

      & h2 {
         width: 80%;
         text-align: center;
      }

      & p {
         width: 80%;
         padding-bottom: 20px;
      }

      & img {
         height: 200px;
         /* alto fijo */
         width: auto;
         /* ancho variable según proporción */
         border-radius: 5px;
         object-fit: contain;
         /* mantiene proporción sin recorte */
         flex-shrink: 0;
         /* evita que la imagen se achique más allá de su tamaño natural */
      }
   }



   & .cerrarDetailModal {
      width: 35px;
      height: 35px;
      background-color: var(--verde-secundario);
      border: none;
      position: absolute;
      right: 10px;
      top: 10px;
      font-size: 25px;
      cursor: pointer;
   }
}

& .modal-detail::backdrop {
   background: rgba(0, 0, 0, 0.6);
}




/* EVENTOS */
.modal-princ-eve {
   width: 100%;
   height: 100%;
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   padding: 2rem;
   border: none;
   border-radius: 10px;
   z-index: 1000000;

   & .modal-princ-content-eve {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px;

      & .item-eve {
         cursor: pointer;
         background: #f0f0f0;
         /* padding: 10px; */
         margin: 10px 0;
         border-radius: 6px;
         transition: background 0.3s;
         width: 300px;
         height: 300px;
         overflow: hidden;
         position: relative;

         & p {
            width: 80%;
            position: absolute;
            padding: 10px;
            margin: 10px;
            color: var(--verde-principal);
            font-weight: bolder;
            background-color: #fffa;
         }

         & img {
            width: 100%;
            height: 100%;
            object-fit: cover;
         }

         & .fecha-it-p {
            width: fit-content;
            position: absolute;
            padding: 10px;
            margin: 10px;
            color: var(--verde-principal);
            font-weight: bolder;
            background-color: #fffa;
            bottom: 0;
            right: 0;
            border-radius: 6px;
         }
      }

      & .item:hover {
         background: #ddd;
      }
   }

   & .cerrarMainModal {
      width: 35px;
      height: 35px;
      background-color: var(--verde-secundario);
      border: none;
      position: absolute;
      right: 10px;
      top: 10px;
      font-size: 25px;
      cursor: pointer;
   }
}

& .modal-princ::backdrop {
   background: rgba(0, 0, 0, 0.6);
}

.modal-detail-eve {
   width: 900px;
   height: 800px;
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   padding: 2rem;
   border: none;
   border-radius: 10px;
   z-index: 1000001;

   & #modalContent {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
      /* o center si querés centrar las filas */

      & h2 {
         width: 80%;
         text-align: center;
      }

      & p {
         width: 80%;
         padding-bottom: 20px;
      }

      & img {
         height: 200px;
         /* alto fijo */
         width: auto;
         /* ancho variable según proporción */
         border-radius: 5px;
         object-fit: contain;
         /* mantiene proporción sin recorte */
         flex-shrink: 0;
         /* evita que la imagen se achique más allá de su tamaño natural */
      }
   }

   & .cerrarDetailModal {
      width: 35px;
      height: 35px;
      background-color: var(--verde-secundario);
      border: none;
      position: absolute;
      right: 10px;
      top: 10px;
      font-size: 25px;
      cursor: pointer;
   }
}

& .modal-detail::backdrop {
   background: rgba(0, 0, 0, 0.6);
}