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

.foto-portada {
   margin-top: 60px;
   width: 100%;
   max-height: 550px;
   object-fit: cover;
   object-position: center;
   overflow: hidden;
   box-shadow: 0 0 0 10px #bbb;
}

@media (max-width: 550px) {
   .foto-portada {
      height: 250px;
   }
}

.imagen-con-borde {
   position: relative;
   top: -235px;
   left: 125px;
   display: inline-block;
   border-radius: 150px; /* 140px (radio de la imagen) + 10px (borde) */
   width: 300px; /* 280px (ancho de la imagen) + 20px (borde de 10px en cada lado) */
   height: 300px; /* Igual que el width */
   z-index: 100;
   overflow: hidden; /* Asegura que el pseudo-elemento siga la forma redonda */
}



.imagen-con-borde::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 300px; /* 280px (ancho de la imagen) + 20px (borde de 10px en cada lado) */
   height: 300px; /* Igual que el width */
   border-radius: 150px; /* 140px (radio de la imagen) + 10px (borde) */
   background: linear-gradient(to bottom, #fff 50%, #ccc 50%);
   z-index: 110; /* Asegura que el borde quede detrás de la imagen */
}

.imagen-con-borde img {
   position: relative;
   object-fit: cover;
   object-position: center;
   overflow: hidden;
   z-index: 130;
   display: block;
   border-radius: 140px;
   width: 280px;
   height: 280px;
   margin: 10px; /* Ajuste para centrar la imagen dentro del borde de 10px */
}

@media (max-width: 550px) {
   .imagen-con-borde::before {
      width: 160px; /* 150px imagen + 10px borde */
      height: 160px;
      border-radius: 80px; /* 75px imagen + 5px borde */
   }

   .imagen-con-borde img {
      width: 150px;
      height: 150px;
      border-radius: 75px;
      margin: 5px; /* Ajuste para mantener el borde proporcional */
   }

   .imagen-con-borde {
      position: relative;
      top: -185px;
      left: 15px;
      display: inline-block;
      border-radius: 150px; /* 140px (radio de la imagen) + 10px (borde) */
      width: 160px; /* 280px (ancho de la imagen) + 20px (borde de 10px en cada lado) */
      height: 160px; /* Igual que el width */
      z-index: 100;
      overflow: hidden; /* Asegura que el pseudo-elemento siga la forma redonda */
   }
}

.hr-perfil {
   width: 80%;
   height: 10px;
   color: #ccc;
   background-color: #ccc;
   margin: auto;
   border-radius: 4px;
}

.hr-portada {
   position: relative;
   top: -85px;
   z-index: 50;
   width: 80%;
   height: 10px;
   color: #eee;
   background-color: #eee;
   margin: auto;
   border-radius: 4px;
}

@media (max-width: 550px){
   .hr-portada {
      top: -105px;
      height: 6px;
   }
}

.div-perfil {
   position: relative;
   /*top: -225px;*/
}

@media (max-width: 1400px) and (max-height: 1200px){
   .div-perfil{
      top: -120px;
   }      
} 

/* ESTILOS QUE ESTABAN EN EL ARCHIVO DEL CLIENTE */

.tit-prin{
   width: 60%;
   margin: auto; 
   font-family: Lora, serif;
   color: #eee;
   font-size: 280%;
   /*text-shadow: 0px 0px 10px #7ad3ff;*/
   text-align: center;
   tex
}

@media (max-width: 992px){
   .tit-prin{
      font-size: 250%;
   }
}

@media (max-width: 600px){
   .tit-prin{
      width: 90%;
      font-size: 180%;
   }
}

.imagen-portada {
    background-image: url("galeria/foto1.png");
    width: 100%;  /* Se expande al ancho disponible */
    height: 500px;
    background-size: cover; /* Cubre todo el div sin perder proporción */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    position: relative;
    z-index: 10;
    top: -85px;
}

@media (max-width: 600px){
   .imagen-portada {
      height: 300px;
      top: -100px;
   }
}

.info-mapa {
    display: flex; /* Activa flexbox */
    justify-content: space-between; /* Separa los elementos */
    align-items: flex-start; /* Alinea los elementos arriba */
    gap: 20px; /* Espacio entre elementos */
    width: 100%; /* Ocupa el ancho completo */
    max-width: 1200px; /* Evita que se estire demasiado en pantallas grandes */
    margin: 0 auto; /* Centra el contenedor si la pantalla es muy grande */
    padding: 20px; /* Agrega un poco de espacio interno */
    box-sizing: border-box; /* Asegura que el padding no afecte el ancho total */
}

.info-mapa > div:first-child {
    width: 40%; /* Ajusta el tamaño de la información */
    text-align: left; /* Asegura que el texto esté alineado a la izquierda */
}

.info-mapa > div:last-child {
    width: 60%; /* Ajusta el tamaño del mapa */
}

@media (max-width: 550px){
    .info-mapa {
        display: block;
    }  
    .info-mapa > div:first-child {
        width: 100%; /* Ajusta el tamaño de la información */
        text-align: left; /* Asegura que el texto esté alineado a la izquierda */
    }

    .info-mapa > div:last-child {
        width: 100%; /* Ajusta el tamaño del mapa */
    } 
}

#map {
    width: 100%; /* Asegura que el mapa ocupe todo el contenedor */
    height: 400px; /* Ajusta la altura */
}

@media (max-width: 550px){
    .div-info-dir-tel {
        display: block;
        width: 100%;
    }   
}
@media (max-width: 550px){
    .div-mapa-info {
        display: block;
        width: 100%;
    }
}

.gallery-container {
    position: relative;
    width: 100%;
    margin: auto;
    max-width: 1200px;
    overflow: hidden;
}

.gallery {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.gallery img {
    width: 24%;
    margin: .5%;
    height: auto;
    flex-shrink: 0;
}

@media (max-width: 550px) {
    .gallery img {
        width: 48%; /* 2 imágenes por fila (100% / 2 = 50%, menos un pequeño margen) */
        margin: 1%; /* Ajusta el margen para que quepan 2 imágenes */
    }
}

.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    font-size: 24px;
    z-index: 1;
}

.left-arrow {
    left: 0;
}

.right-arrow {
    right: 0;
}

@media (max-width: 550px){
    .contenido-general{
        position: relative;
        top: 100px;
    }
}

.popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.popup-img {
    max-width: 700px;
    max-height: 700px;
    border-radius: 10px;
}

.close-btn {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 40px;
    color: white;
    cursor: pointer;
    z-index: 1001;
}

.close-btn:hover {
    color: #ccc;
}

/* FIN DE ARCHIVO DEL CLIENTE*/