* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

@font-face {
    font-family: 'Made Infinity Light';
    src: url('../fonts/MADEINFINITYPersonalUse-Light.otf') format('opentype');     
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Made Infinity Regular';
    src: url('../fonts/MADEINFINITYPersonalUse-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Lemon Mocktail";
    src: url('../fonts/Lemon\ Mocktail\ .ttf') format('opentype');
    font-weight: normal;
    font-size: normal;
}

body {
    font-family: 'Made Infinity Light', sans-serif;
    background-color: #f5efc4;
    background-repeat: repeat; 
    background-size: auto; 
    background-position: center; 
    background-image: url("../img/fondo\ de\ la\ pagina.jpg");
    background-blend-mode: luminosity; 
}

:root {
    scroll-behavior: smooth;
}

/* linear-gradient(to top, rgba(161, 140, 209, 0.404) 0%, rgba(251, 193, 234, 0.404) 100%), */

header {
    height: 100vh;
    background-image: url("../img/deer\ fondo\ 2.JPG");
    background-repeat: no-repeat;
    background-attachment: fixed; /* prueba scroll antes fixed */
    background-position: center;
    background-size: cover;
}

.menu-navegacion {
    position: fixed;   /* Cambiar de fixed a sticky */
    top: 0;     /* Fijar la barra de navegación en la parte superior */
    width: 100%;
    height: 13%;
    display: flex;
    justify-content: space-evenly; /*pone between antes evenly*/
    align-items: center;
    /*border: solid thin;*/       /*lo saca esto y el de abajo tmb*/
    /*border-bottom: solid thin;*/
    background-color: #f5efc4;
    background-repeat: repeat; 
    background-size: auto; 
    background-position: center; 
    background-image: url("../img/fondo\ de\ la\ pagina.jpg");
    background-blend-mode: luminosity;
    font-family: 'Made Infinity Light', sans-serif;
    z-index: 999; /* Asegurar que la barra esté por encima de otros elementos */
}

/*.logo {
    width: 5%;
    margin-left: 10px;
}*/

.logo-link {
    display: flex;
    align-items: center;
}
  
.logo {
    width: 70px; /* ajustá según necesites */
    height: auto;
}

.menu-navegacion a {
    color: #111;
    text-decoration: none;
    letter-spacing: 5px;
    font-family: 'Made Infinity Light', sans-serif;
}

.hamburger {
    display: none;
    cursor: pointer;
    position: absolute;
    top: 10px;  /*cambia de 20 a 10*/
    right: 10px; /*cambia de 20 a 10*/
}

.hamburger img {
    width: 30px;
    height: auto;
}

/*agrega esto*/
.menu-navegacion.show {
    flex-direction: column;
    align-items: flex-end;
    height: 100vh;
    background-color: white;
    position: fixed;
    top: 0;
    right: 0;
    width: 60%;
    padding: 20px;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
}

.menu-navegacion.show a {
    display: block;
    width: 100%;       /*agrega esto*/
    padding: 15px;     /*agrega esto*/
    text-align: right; /*agrega esto*/
}

/*agrega esto*/
.menu-navegacion.show .logo {
    display: block;
    width: 70px; /* Ajusta el tamaño del logo */
    height: auto;
    margin: 15px 0;
    padding: 0 10px;
}

/*agrega esto*/
/*.menu-navegacion.show .menu-links {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distribuir espacio entre elementos */
    /*height: 100%; /* Usar todo el espacio disponible */
/*}*/


.contenedor {
    width: 90%;
    max-width: 1200px;
    margin: auto;
    padding: 60px 0;
}

.head {
    padding: 0;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: rgb(255, 255, 255);
    text-align: center;
}

.copy {
    font-weight: 300;
    font-size: 25px;
}

.subtitulo {
    text-align: center;
    font-weight: normal;
    /*background-color: #f5efc4;*/
    margin-bottom: 40px;
    font-size: 50px;
    font-family: 'Lemon Mocktail', sans-serif;
}

.subrayado {
    position: relative;
    display: inline-block;
    font-weight: bold;
    font-size: 60px;
    text-decoration: none; /* sacamos el subrayado original */
}
  
  .subrayado::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -2px; /* distancia entre texto y línea */
    transform: translateX(-50%);
    width: 120%; /* más largo que el texto */
    height: 3px;
    background-color: #000; /* podés cambiar el color */
    border-radius: 2px;
}

/* 📌 Contenedor general */
.perfil-artista {
    max-width: 1100px; /*antes 1000px ahora 1100*/
    margin: auto;
    padding: 20px;
}

/* 📌 Agrupar Instagram y descripción en una fila */
.contenedor-artista {
    display: flex;
    justify-content: space-between;
    align-items: stretch; /* Antes center ahora stretch Hace que ambos elementos tengan la misma altura*/
    gap: 40px; /*antes 20px ahora 40px*/
}

/* 📌 Post de Instagram */
.foto-artista {
    width: 55%; /*antes 50% ahora 55%*/
}

.foto-artista img {
    width: 100%;
    height: 100%; /*nuevo agregado*/
    border-radius: 10px;
    /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);*/
    object-fit: cover;
}

/* 📌 Descripción */
.descripcion-artista {
    width: 50%; /*antes 50% ahora 45%*/
    text-align: left;
    font-size: 18px;
    display: flex; /*agregado nuevo*/
    flex-direction: column; /*agregado nuevo*/
    justify-content: center; /*agreagado nuevo*/
}

.descripcion-artista h3 {
    font-size: 32px; /*antes 28px ahora 32px*/
    font-weight: bold;
    color: black;
    /*color: #333;*/
    margin-bottom: 20px; /*antes 10px ahora 20px*/
}



/*.descripcion-artista p {
    font-size: 18px;
    line-height: 1.5;
    color: #555;
}*/

/* 📌 Social links */
.social-links {
    margin-top: 15px; /*antes 15px ahora 20px*/
    display: flex;
    gap: 20px;
}

/* 📌 Iconos */
.social-links a {
    display: flex;
    align-items: center;
    text-decoration: none;
    font-size: 18px;  /*antes 20px ahora 18px*/
    font-weight: bold;
    gap: 8px;
}

/* 📌 Icono Instagram */
.social-links .instagram {
    color: #E4405F;
}

/* 📌 Icono WhatsApp */
.social-links .whatsapp {
    color: #25D366;
}

/* 📌 Cambios de color al pasar el mouse */
.social-links a:hover {
    opacity: 0.7;
}

.gallery {
    background-color: #f5efc4;
    background-repeat: repeat; 
    background-size: auto; 
    background-position: center; 
    background-image: url("../img/fondo\ de\ la\ pagina.jpg");
    background-blend-mode: luminosity; 
}

.contenedor-galeria {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.img-galeria {
    width: 30%;
    display: block;
    margin-top: 25px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    object-fit: cover;
    border-radius: 10px;
}

.image-light {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.6);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity .2s ease-in-out;
    opacity: 0;
    pointer-events: none; /* Evita que bloquee la interacción */
    z-index: 1000; /* Debe estar debajo de la X y el menú */
}

.image-light.show {
    opacity: 1;
    pointer-events: auto; /* Permite clics solo cuando está visible */
}

.agregar-imagen {
    object-fit: cover;
    width: 45%;
    border-radius: 10px;
    transform: scale(0);
    transition: transform .3s .2s;
}

.close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    cursor: pointer;
    z-index: 1002 !important; /* Más alto que .image-light */
    background-color: transparent;
    pointer-events: auto !important; /* Activa los clics */
}

.showImage {
    transform: scale(1);
}

.show {
    transform: translate(0);
}

/*tienda*/
.coming-soon {
    text-align: center;
    padding: 100px 20px;
    color: #333;
  }
  
.coming-soon h2 {
    font-size: 36px;
    margin-bottom: 20px;
}
  
.coming-soon p {
    font-size: 20px;
    margin-bottom: 10px;
}
  
.coming-soon .small-text {
    font-size: 16px;
    color: #777;
}


/*UBICACION*/
/*seccion ubi*/
.ubicacion {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 50px;
    padding: 0 20px;
}

/*contenedor princi*/
.contenedor-ubicacion {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    max-width: 1250px;
    margin: auto;
    gap: 30px;
}

/*info*/
.info-ubicacion {
    width: 40%;
    text-align: left;
    background: #f8f8f8;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.horario {
    list-style: none;
    padding: 0;
}

.horario li {
    margin: 3px 0;
    font-size: 14px;
}

.info-ubicacion h3 {
    margin-bottom: 10px;
    color: #333;
}

.mapa {
    max-width: 800px;
    /*margin: auto;*/
    width: 48%;
}

.mapa iframe {
    height: 343px; /*por ahora*/
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

/* FOOTER */

footer {
    background-color: white;
    background-repeat: repeat;
    background-size: auto; 
    background-position: center;
    background-image: url("../img/fondo\ de\ la\ pagina.jpg");
    background-blend-mode: luminosity;
    padding: 60px 0 30px 0;
    margin: auto;
    overflow: hidden;
    border: solid thin rgba(108, 134, 60, 0.404);
}

.datos-footer {
    display: flex;
    width: 90%;
    justify-content: space-evenly;
    align-items: center;
    margin: auto;
    padding-bottom: 50px;
    border-bottom: 1px solid #271b1be5;
    flex-wrap: wrap;
}

.datos-footer i{
    color: black;
    transition: color 0.3s ease-in-out;
}

.item-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 20px;
}

.texto-footer {
    margin-top: 10px;
    font-size: 17px;
    color: #271b1be5;
}

.border-icon {
    height: 70px; /*aumenta a 50 no se si va igual antes 24px*/
    width: 70px; /*aumenta a 50 no se si va igual antes 24px*/
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem; /*pone 1.5 rem antes 2.5*/
    border: solid thin white;
    border-radius: 50%;
    font-size: 2.0rem; /*pone 1.5 rem antes 1.75*/
    transition: all .3s ease-in;
}

.border-icon:hover {
    background-color: black;
    cursor: pointer;
}

.border-icon:hover i {
    color: white;
}

.titulo-final {
    text-align: center;
    font-size: 14px; /*baja a 20px antes 24px*/
    margin: 20px 0 0 0;
    color: #271b1be5;
}

.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    background-color: #25d366;
    color: white;
    width: 70px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 40px; /* tamaño del icono */
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    transition: transform 0.3s ease, background-color 0.3s ease;
}
  
.whatsapp-float:hover {
    transform: scale(1.1);
    background-color: #1ebe5d;
}

.whatsapp-float {
    text-decoration: none;
}
  
.whatsapp-float i {
    text-decoration: none;
}

/*MEDIA PANTALLA*/
@media screen and (max-width:800px) {
    /*linear-gradient(to top, rgba(161, 140, 209, 0.404) 0%, rgba(251, 193, 234, 0.404) 100%), */
    header {
        height: 70vh;
        background-image: url("../img/deer\ fondo\ 2.JPG");
        background-size: cover;
        background-attachment: scroll;
    }

    .menu-navegacion {
        /*width: 50vw;
        flex-direction: column;
        height: auto;*/
        background-image: none;
        background-color: transparent;
        /*padding-top: 60px; /* Añade un relleno superior */
    }

    .hamburger {
        display: block;
        position: absolute;
        top: 10px;
        right: 10px;
        /* Mostrar en pantallas pequeñas */
        /*order: -1;*/
        /* Mover al comienzo del contenedor */
    }

    .menu-navegacion a,
    .menu-navegacion .logo-link {
        /*width: 100%;
         Ocupar todo el ancho del contenedor 
        text-align: center;
        /* Centrar texto */
        /*padding: 10px 0;*/
        /* Añadir espacio entre enlaces */
        display: none;
    }

    .menu-navegacion.show a,
    .menu-navegacion.show .logo-link {
        display: block;
        text-align: right;
        /*margin-top: 20px; /*añade un margen superior*/
    }

    .menu-navegacion.show {
        width: 40%;
        background-color: #f5efc4;
        background-repeat: repeat;
        background-size: auto; 
        background-position: center; 
        background-image: url("../img/fondo\ de\ la\ pagina.jpg");
        background-blend-mode: luminosity;
        flex-direction: column;
        align-items: flex-end;
        height: 100vh;
        padding: 20px;
    }

    .menu-navegacion.show .logo-link {
        display: flex;
        justify-content: flex-end;
        margin-bottom: -20px;
    }

    .menu-navegacion.show .logo {
        width: 100px;
        margin: 10px 0;
        height: auto;
    }

    .subrayado {
        font-size: 40px;
    }
    
    .subrayado::after {
        width: 130%;
        bottom: -5px;
    }

    .contenedor-artista {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .foto-artista,
    .descripcion-artista {
        width: 100%;
    }

    .descripcion-artista h3 {
        text-align: center;
    }

    .foto-artista img {
        width: 100%;
        height: auto;
    }
  
    .social-links {
        justify-content: center;
    }

    .agregar-imagen {
        width: 80%;
    }

    .img-galeria {
        width: 45%;
    }

    /*Ubicacion*/

    .contenedor-ubicacion {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .info-ubicacion, .mapa {
        width: 100%;
    }

    .datos-footer {
        /*justify-content: center;*/
        flex-wrap: wrap; /*cambia a flex wrap: wrap antes flex direction*/
        gap: 20px;     /*agrega esto*/
    }

    .whatsapp-float {
        width: 60px;
        height: 60px;
        font-size: 32px;
        bottom: 15px;
        right: 15px;
    }

}



@media screen and (max-width:500px) {
    /*linear-gradient(to top, rgba(161, 140, 209, 0.404) 0%, rgba(251, 193, 234, 0.404) 100%), */
    header {
        height: 50vh;
        background-image: url("../img/deer\ fondo\ 2.JPG");
        background-size: cover;
        background-attachment: scroll;
    }

    .menu-navegacion {
        width: 100%; /*pone 100% antes 65vw*/
    }

    .agregar-imagen {
        width: 95%;
    }

    .subtitulo {
        font-size: 30px;
    }

    .subrayado {
        font-size: 30px;
    }
    
    .subrayado::after {
        width: 120%;
        bottom: -4px;
    }

    .img-galeria {
        width: 95%;
    }

    /*agrega esto*/
    .menu-navegacion.show {
        position: fixed;
        top: 0;
        right: 0;
        height: 100%;
        width: 50%; /* Reduce the width of the menu */
        background-color: #f5efc4;
        box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
    }

    /*ubicacion*/
    /*.mapa {
        max-width: 95%;
    }*/

    .mapa iframe {
        height: 350px;
    }

    .datos-footer {
        flex-wrap: wrap; /* Permite que se reacomoden en filas */
        justify-content: center;
        gap: 15px;
    }

    .item-footer {
        flex: 1 1 40%; /* Ocupa ~40% del contenedor, permite quepan 2 por fila */
        min-width: 100px; /* Mínimo para que no colapsen */
        max-width: 45%; /* Evita que se estiren demasiado */
    }

    .border-icon {
        height: 50px;
        width: 50px;
        font-size: 1.5rem;
        padding: 1rem;
    }

    .texto-footer {
        font-size: 14px;
    }

    .titulo-final {
        font-size: 13px;
        padding: 0 10px;
    }

    .whatsapp-float {
        width: 50px;
        height: 50px;
        font-size: 26px;
        bottom: 12px;
        right: 12px;
    }
}