/* solo para ubicar border */
.border-rojo{
  border: 0px red solid;
}

.titulo2{
    padding-top: 100px;
    text-align: center;
    color: #16abe2;
    font-family: "Exo 2", sans-serif;
    font-size: 50px;
    font-weight: 900;
    font-style: normal;
}

/* Contenedor general */
.contenedor-principal {
  padding-top: 0px;
}

.cont-centrado{
  padding-left: 10px !important;  
}

.cerrar-popup img{
 width: 40px;
}

.cerrar-popup:hover img{
  content: url(../links/btn-cerrar-hover.png);
  width: 40px;
}

/* Botones que se despliegan abajo de BE */

.grupo-uno-botones{
  display: flex;
  justify-content: center;
  align-items: center;
}

.botones-BE-despliegan{
  background-color: #fff;
  border: 1px solid #16abe2;
  border-radius: 50px;
  font-family: "Exo 2", sans-serif;
  font-size: 20px;
  font-weight: 900;
  color: #16abe2;
  padding: 15px 15px;
  text-align: center;
  text-decoration: none !important;
  line-height: 1;
  white-space: nowrap;
}

.botones-BE-despliegan:hover{
  background-color: #16abe2;
  color: #fff;
}

/* AQUI TERMINA Botones que se despliegan abajo de BE */

/* Botones que se despliegan abajo de SE */

.grupo-dos-botones{
  display: flex;
  justify-content: center;
  align-items: center;
}

.botones-SE-despliegan{
  background-color: #fff;
  border: 1px solid #a2c617;
  border-radius: 50px;
  font-family: "Exo 2", sans-serif;
  font-size: 20px;
  font-weight: 900;
  color: #a2c617;
  padding: 15px 15px;
  text-align: center;
  text-decoration: none !important;
  line-height: 1;
}

.botones-SE-despliegan:hover{
  background-color: #a2c617;
  color: #fff;
}

/* AQUI TERMINA Botones que se despliegan abajo de SE */




.fondo-be-se {
 background-image: url("../links/BE-SE/bg-botones-se-be.jpg");
 background-color: #cccccc;
 width: 100%;
 height: auto;
}

@media (max-width: 1000px) {
  .fondo-be-se {
    background-repeat: no-repeat;
    background-size: cover;
  }
}

/* Contenedores independientes por grupo */
.contenedor-imagenes {
  position: relative;
  width: 400px;
  height: 400px;
  margin-bottom: 30px;
}

/* Imagen grande - GRUPO 1 */
.img-grande-container-1 {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

/* Imagen grande - GRUPO 2 */
.img-grande-container-2 {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

/* Hover general */
.img-hover-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.3s ease;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
}

.img-hover {
  opacity: 0;
  z-index: 1;
}

.img-hover-container:hover .img-hover {
  opacity: 1;
}

/* Imagen pequeña - GRUPO 1 */
.img-pequena-container-uno {
  width: 150px;
  height: 150px;
  position: absolute;
  top: 0px;
  left: -30px; /* Sale hacia la izquierda */
  border-radius: 50%;
  overflow: hidden;
  z-index: 2;
}

/* Imagen pequeña - GRUPO 2 */
.img-pequena-container-dos {
  width: 150px;
  height: 150px;
  position: absolute;
  top: 0px;
  right: -30px; /* Sale hacia la izquierda */
  border-radius: 50%;
  overflow: hidden;
  z-index: 2;
}




/* Botones secundarios */
.botones-secundarios {
  display: none;
  justify-content: center;
  gap: 20px;
  position: relative;
  z-index: 1;
  animation: aparecer 0.5s ease forwards;
}

.botones-secundarios button {
  padding: 12px 24px;
  font-size: 16px;
  border: none;
  background-color: #3498db;
  color: white;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.botones-secundarios button:hover {
  background-color: #2980b9;
}

/* Animación de entrada */
@keyframes aparecer {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}




.contenedor-imagenes {
  position: relative;
  width: 400px;
  height: 400px;
  margin: 50px auto;
}

/* IMÁGENES CIRCULARES */
.img-hover-container {
  display: block;
  border-radius: 50%;
  overflow: hidden;
  position: absolute;
  cursor: pointer;
}

.img-original,
.img-hover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.img-hover {
  display: none;
}

.img-hover-container:hover .img-original {
  display: none;
}

.img-hover-container:hover .img-hover {
  display: block;
}

/* GRUPO 1 */
.img-grande-container-1 {
  width: 400px;
  height: 400px;
  top: 0;
  left: 0;
  z-index: 1;
}

.img-pequena-container-1 {
  width: 150px;
  height: 150px;
  top: 0px;
  right: -30px;
  z-index: 2;
}

/* GRUPO 2 */
.img-grande-container-2 {
  width: 400px;
  height: 400px;
  top: 0;
  left: 0;
  z-index: 1;
}

.img-pequena-container-2 {
  width: 150px;
  height: 150px;
  top: 0px;
  left: -30px;
  z-index: 2;
}







/* !!!!!!!!!!!!!!!!!!Aqui empiezan los estilos para PopUP!!!!!!!!!!!!!!!!!! */

/* POP-UP GENERAL */
.popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.popup-contenido {
  width: 80%;
  height: 80%;
  background-color: white;
  padding: 30px;
  border-radius: 50px;
  position: relative;
  animation: aparecerPopup 0.4s ease;
  overflow-y: auto;
}

@media (max-width: 1000px) {
  .popup-contenido {
    height: 50%;
  }
}

/*  ESTILOS INDEPENDIENTES POR POP-UP */
.popup-a .popup-a-contenido {
  background-color: #ffffff;
  color: #006064;
  box-shadow: 0 0 50px 15px #48abe0;
}


/* INICIAN ESTILOS Para las imagenes del POP-UP */
.img-popup{
  display: flex;
  justify-content: center;
  align-items: center;
}

.img-popup img{
  max-width: 90%;
  max-height: 70%;
}
/* TERMINAN ESTILOS Para las imagenes del POP-UP */


/* INICIAN ESTILOS Para las textos del POP-UP */
.txt-popup{
  padding-top: 30px;
}

.txt-popup p{
  font-family: "Nunito", sans-serif;
  font-size: 20px;
  text-align: center;
}


.popup-b .popup-b-contenido {
  background-color: #fff;
  color: #64a80e;
  box-shadow: 0 0 50px 15px #a2c617;
}

/* BOTÓN CERRAR */
.cerrar {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 24px;
  cursor: pointer;
}

/* ANIMACIÓN */
@keyframes aparecerPopup {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* Estilos agregados para detalles del area visible a PopUps */


.popup-contenido {
  background-color: #fff;
  padding: 20px;
  border-radius: 12px;
  max-height: 80vh; /* Altura máxima visible */
  overflow-y: auto;  /* Habilita scroll interno si se necesita */
  box-sizing: border-box;
  position: relative;
  width: 90%;
  max-width: 70vw; /* nuevo ancho máximo */
}

.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.popup-a-contenido,
.popup-b-contenido {
  background-color: #fff;
  padding: 20px;
  border-radius: 12px;
  max-height: 80vh;
  overflow-y: auto;
  box-sizing: border-box;
  width: 90%;
  max-width: 70vw; /* nuevo ancho máximo */
  position: relative;
}



/* Pantallas grandes: desde 2000px hasta 1200px */
@media (max-width: 2000px) and (min-width: 1200px) {
  .botones-BE-despliegan,
  .botones-SE-despliegan {
    font-size: 20px;
  }
}

/* Pantallas medianas: desde 1199px hasta 1024px */
@media (max-width: 1199px) and (min-width: 1024px) {
  .botones-BE-despliegan,
  .botones-SE-despliegan {
    font-size: 15px;
  }
}

/* Pantallas pequeñas: 1023px hacia abajo */
@media (max-width: 980px) {
  .botones-BE-despliegan,
  .botones-SE-despliegan {
    font-size: 20px;
  }
}