.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; 
}



.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; 
}

.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; 
}

@media (max-width: 550px) {
   .imagen-con-borde::before {
      width: 160px; 
      height: 160px;
      border-radius: 80px; 
   }

   .imagen-con-borde img {
      width: 150px;
      height: 150px;
      border-radius: 75px;
      margin: 5px; 
   }

   .imagen-con-borde {
      position: relative;
      top: -185px;
      left: 15px;
      display: inline-block;
      border-radius: 150px; 
      width: 160px; 
      height: 160px; 
      z-index: 100;
      overflow: hidden; 
   }
}

.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;
}

@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-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%;  
    height: 500px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 10;
    top: -85px;
}

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

.info-mapa {
    display: flex; 
    justify-content: space-between;
    align-items: flex-start; 
    gap: 20px; 
    width: 100%;
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 20px; 
    box-sizing: border-box;
}

.info-mapa > div:first-child {
    width: 40%; 
    text-align: left;
}

.info-mapa > div:last-child {
    width: 60%; 
}

@media (max-width: 550px){
    .info-mapa {
        display: block;
    }  
    .info-mapa > div:first-child {
        width: 100%; 
        text-align: left; 
    }

    .info-mapa > div:last-child {
        width: 100%; 
    } 
}

#map {
    width: 100%;
    height: 400px; 
}

@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%; 
        margin: 1%; 
    }
}

.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*/