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

/* Fondo oscuro */
.modal-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.6);
   display: none;
   /* Oculto por defecto */
   justify-content: center;
   align-items: center;
   z-index: 9999;

   /* Contenido del modal */
   & .modal-content {
      background: #fff;
      border-radius: 10px;
      max-width: 400px;
      width: 90%;
      text-align: center;
      box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.3);
      position: relative;
      overflow: hidden;

      & .img-modal {
         width: 100%;
         height: 100%;
         position: relative;

         & img {
            width: 100%;
         }

         /* Botón cerrar */
         & .close-btn {
            position: absolute;
            bottom: 2px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 15px;
            font-weight: bold;
            color: var(--azul-uru);
            cursor: pointer;
            transition: color 0.2s;
         }
      }
   }
}

@media screen and (min-width: 1360px) {
   .modal-overlay {


      /* Contenido del modal */
      & .modal-content {
         zoom: 1.4;

         & .img-modal {

            & img {}

            /* Botón cerrar */
            & .close-btn {
               bottom:3px;
               font-size: 15px;
            }
         }
      }
   }
}