* {
    text-align: center;
    line-height: 1.2;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    margin: 0;
    /* Asegurar que no haya márgenes predeterminados en el body */
}

.Header {
    width: 100%;
    /* El header ocupa todo el ancho */
    height: auto;
    /* La altura se ajusta al contenido */
}

.seccionPrincipal {
    width: 100%;
    min-height: 80vh;
    /* Altura mínima para asegurar que se vea la imagen en pantallas pequeñas */
    background-image: url('Contenido/Perfumes/CategoriasFondos/FondoProductos.jpg');
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    /* Centrar el contenido horizontalmente */
    align-items: center;
    flex-direction: column;
    position: relative;
    padding: 40px 20px;
    /* Añadir padding general */
}

.seccionPrincipal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1;
    /* Fondo oscuro semi-transparente */
}

.Titulo_1 {
    text-shadow: 4px 3px 2px black;
    padding: 0 20px;
    width: 100%;
    margin-top: 90px;
    color: white;
    font-size: 2em;
    /* Ajustar tamaño de fuente */
    position: relative;
    z-index: 2;
    /* Coloca el texto sobre el fondo oscuro */
}

.texto_1 {
    text-shadow: 4px 3px 2px black;
    margin: 30px 20px;
    color: white;
    font-size: 1em;
    line-height: 1.6;
    position: relative;
    z-index: 2;
    max-width: 800px;
    /* Coloca el texto sobre el fondo oscuro */
}

.Botones {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
    position: relative;
    z-index: 2;
    /* Coloca el texto sobre el fondo oscuro */
    flex-wrap: wrap;
    /* Permitir que los botones se envuelvan en pantallas pequeñas */
    padding: 0 20px;
    /* Añadir padding horizontal */
}

.btn {
    margin-top: 0;
    display: inline-block;
    padding: 10px 25px;
    font-size: 1em;
    font-weight: bold;
    text-decoration: none;
    border-radius: 25px;
    cursor: pointer;
    color: white;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-primero {
    background: linear-gradient(45deg, #424242, #181818);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.9);
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-primero:hover {
    background: linear-gradient(45deg, #4f400c, #81641b);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 2);
    transform: scale(1.08);
}

.btn-segundo {
    background: linear-gradient(45deg, #ffffff, #898888);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.9);
    color: #000000;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-segundo:hover {
    background: linear-gradient(45deg, #5e4d0e, #c19629);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.6);
    transform: scale(1.08);
}

/* Media Query para pantallas más pequeñas (móviles) */
@media (max-width: 768px) {
    .navbar {
        flex-direction: row;
        /* Cambiar a disposición horizontal */
        align-items: center;
        width: 95%;
        padding: 10px;
        border-radius: 20px;
        top: 10px;
        overflow-x: auto;
        /* Permitir el desplazamiento horizontal */
        -webkit-overflow-scrolling: touch;
        /* Para un desplazamiento suave en iOS */
        justify-content: flex-start;
        /* Alinear los elementos al inicio */
    }

    .Logo {
        margin-right: 20px;
        /* Espacio entre el logo y el menú */
    }

    .navbar>div>ul {
        display: flex;
        flex-direction: row;
        /* Los elementos de la lista en fila */
        margin: 0;
        padding: 0;
    }

    .navbar>div>ul>li {
        margin: 0 15px;
        /* Espacio entre los elementos del menú */
    }

    .Titulo_1 {
        font-size: 2em;
        margin-top: 40px;
    }

    .texto_1 {
        font-size: 0.9em;
        margin: 20px;
    }

    .Botones {
        flex-direction: column;
        gap: 10px;
        margin-top: 30px;
    }

    .btn {
        font-size: 0.9em;
        padding: 10px 20px;
    }

    .Logo img {
        width: 50px;
    }

 
}

/* Media Query para tablets */
@media (min-width: 769px) and (max-width: 1024px) {
    .Titulo_1 {
        font-size: 2.2em;
    }

    .texto_1 {
        font-size: 1em;
        margin: 30px;
    }

    .navbar>div>ul>li {
        margin: 0 15px;
    }

    .Logo img {
        width: 80px;
    }

}


/* Seccion de Presentaciones, */
#Envases {
    padding: 20px;
    /* Añadir padding general a la sección */
}

.Envases {
    margin: 0 9vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 95%;
    margin-bottom: 40px;
    flex-wrap: wrap;
    /* Permitir el envoltorio para la disposición en pantallas pequeñas */
    justify-content: center;
    /* Centrar los elementos hijos horizontalmente */

}

/*Presentacioness*/
.EnvasesTexto {
    width: 40%;
    margin-left: 0vh;
    margin-top: 10vh;
    padding-right: 20px;
    text-align: left;
    /* Alinear el texto a la izquierda */

}

.EnvasesTexto p {
    font-size: 1em;
    line-height: 1.6;
}

.EnvasesTexto h1 {
    padding-bottom: 0.5em;
    border-bottom: solid #c19629 2px;
    text-shadow: 0px 1px 1px black;
    font-size: 2em;
    margin-bottom: 1em;
}

/*Precioss*/
.EnvasesTexto2 {
    margin: 5% 20% -5%;
    text-align: left;
    /* Alinear el texto a la izquierda */
}

.EnvasesTexto2 b {
    text-shadow: 1px 0px #c19629;
    font-weight: bold;
}

.EnvasesTexto2 p {
    font-size: 1em;
    line-height: 1.6;
}

.EnvasesTexto2 h1 {
    margin-bottom: 5vh;
    border-bottom: solid#c19629 2px;
    padding: 0.5pc;
    font-size: xx-large;
}

/*Video*/
.EnvasesVideo {
    width: 20%;
    margin-top: 10vh;
    margin-right: 20vh;
    margin-left: 20vh;

    box-shadow: 0px 1px 10px 6px rgba(0, 0, 0, 0.9);
    border-radius: 6%;

}

.EnvasesVideo video {
    display: block;
    /* Evitar espacio extra debajo del video */
    width: 100%;
    /* El video ocupa todo el ancho de su contenedor */
    height: auto;
    /* La altura se ajusta proporcionalmente */
    border-radius: 5%;
    object-fit: cover;
    /* Cubrir el contenedor sin distorsionar la proporción */
}

.Colores {
    margin-top: 1.5em;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    position: relative;
    /* Añadir para posicionar el contenedor relativo del "new" */
}

.Colores img.Color {
    /* Especificar que solo afecte a las imágenes con la clase "Color" dentro de .Colores */
    padding: 10px;
    margin-top: 0;
    width: 60px;
    height: 60px;
}

.Color {
    border-radius: 50%;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.Color:hover {
    transform: scale(1.3);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}
.Color-nombre {
    margin-top: 5px; /* Espacio entre la imagen y el nombre */
    font-size: 0.9em; /* Ajusta el tamaño del nombre */
    text-align: center; /* Asegurar que el texto esté centrado */
}


/* Contenedor especial para el color verde y la imagen "new" */
.Color-container-verde {
    position: relative;
    /* Para posicionar la imagen "new" dentro */
    display: inline-block;
    /* Para que ocupe solo el espacio necesario */
    width: 60px;
    /* Asegurar que el contenedor tenga el mismo ancho que el color */
    height: 60px;
    /* Asegurar que el contenedor tenga la misma altura que el color */

}

.color-verde {
    width: 100%;
    /* El color verde ocupa todo el contenedor */
    height: 100%;
    border-radius: 50%;
    /* Mantener la forma circular */
}

.new-on-verde {
    position: absolute;
    top: -5px;
    /* Ajusta la posición vertical según sea necesario */
    left: -10px;
    /* Ajusta la posición horizontal según sea necesario */
    width: 30px;
    /* Ajusta el tamaño de la imagen "new" */
    transform: rotate(-15deg);
    z-index: 1;
    /* Asegura que esté encima del color verde */
}

.new {
    display: none;
    /* Ocultar la imagen "new" en su posición anterior */
}

.NuestrasPresentaciones {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Centra los elementos horizontalmente */
    height: 60vh;
    width: 95%;
    max-width: 1200px;
    /* Mantener un ancho máximo en pantallas grandes */

    gap: 20px;
    padding: 20px;
    margin: 20px auto;
    /* Centrar horizontalmente y añadir margen vertical */
}

.Presentaciones {
    width: calc(33% - 20px);
    width: 100%;
    object-fit: cover;
    height: 35vh;
    filter: drop-shadow(1px 1px 5px black);
    min-width: 150px;

}



/* Media Queries para Responsividad */
@media (max-width: 768px) {
    .Envases {
        flex-direction: column;
        /* Apilar el texto y el video */
        align-items: flex-start;
        /* Alinear a la izquierda en pantallas pequeñas */
        margin: 0 2vh;
        /* Reducir los márgenes laterales */
        align-items: center;
        /* Centrar los elementos horizontalmente en pantallas pequeñas */

    }

    .EnvasesTexto {
        width: auto;
        /* Añadir espacio superior al texto */
        padding-right: 0;
        /* Añadir espacio inferior al texto antes del video */
        text-align: center;
        /* Centrar el texto en pantallas pequeñas */
        margin: 5% 20% -5%;
    text-align: left;
    }

    .EnvasesVideo {
        width: 40%;
        margin-top: 5vh;
        margin-right: 20vh;
        margin-left: 20vh;
        margin-bottom: 5vh;
    
        box-shadow: 0px 1px 10px 6px rgba(0, 0, 0, 0.9);
        border-radius: 6%;
    
    }

    .EnvasesVideo video {
        width: 100%;
        /* El video ocupa todo el ancho en pantallas pequeñas */
        height: auto;
    }

    .Colores {
        justify-content: center;
    }

    .new {
        right: 1em;
        bottom: -1em;
        width: 25px;
    }

    .NuestrasPresentaciones {
        flex-direction: column;
        align-items: center;
        width: 95%;
        /* Ocupar más ancho en pantallas pequeñas */
        margin-top: 60vh;
        margin-bottom: 40vh;
    }

    .Presentaciones {
        width: 80%;
        height: auto;
        margin-bottom: 15px;
        min-width: auto;
    }

    .Asesoria {
        padding: 8px 12px;
        /* Reducir el padding en móviles */
        border-radius: 30px;
        /* Hacerlo menos ovalado en móviles */
    }

    .whatsapp-icon img {
        width: 25px;
        height: 25px;
        margin-right: 5px;
    }

    .pppWhatsapp p {
        font-size: 0.8em;
    }

    .pppWhatsapp h4 {
        font-size: 0.9em;
    }

    .pppWhatsapp h6 {
        font-size: 0.7em;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {

    .Envases {
        justify-content: space-around;
    }

    .EnvasesTexto {
        width: 50%;
        margin-left: 5vh;
        margin-top: 10vh;
    }

    .EnvasesVideo {
        width: 30%;
        margin-top: 5vh;
        margin-right: 20vh;
        margin-left: 20vh;
        margin-bottom: 5vh;
    
        box-shadow: 0px 1px 10px 6px rgba(0, 0, 0, 0.9);
        border-radius: 6%;
    
    }
}

/*Seccion Notas que definen una esencia*/
.perfume-section {
    
    text-align: center;
    padding: 40px 20px;
    border-radius: 15px;
    /* Bordes redondeados */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    /* Sombra para profundidad */
    transition: background-color 0.3s ease;
    /* Transición suave para el fondo */
    margin-bottom: 5%;

}

.perfume-section::after {
    content: '';
    display: block;
    width: 60%;
    /* Ajusta el ancho según lo necesites */
    height: 1px;
    /* Grosor de la línea */
    background-color: #0b0b0b;
    /* Color de la línea */
    margin: 90px auto;
    /* Centra la línea debajo del texto */
    position: absolute;
    /* Posiciona la línea */
    left: 50%;
    /* Posiciona a la mitad */
    transform: translateX(-50%);
    /* Centra la línea horizontalmente */
}

/* Estilo del título */
h2 {
    text-align: center;
    font-size: 2.3rem;
    color: #000000;
    margin: 40px;
    position: relative;
    /* Para posicionar el pseudo-elemento */
    display: inline-block;
    /* Para que el ancho del h2 se ajuste al contenido */
    padding-bottom: 10px;
    /* Espacio entre el texto y la línea */
}

h2::after {
    content: '';
    display: block;
    width: 100%;
    /* Ajusta el ancho según lo necesites */
    height: 2px;
    /* Grosor de la línea */
    background-color: #c19629;
    /* Color de la línea */
    margin: 10px auto;
    /* Centra la línea debajo del texto */
    position: absolute;
    /* Posiciona la línea */
    left: 50%;
    /* Posiciona a la mitad */
    transform: translateX(-50%);
    /* Centra la línea horizontalmente */
}

.carousel {
    position: relative;
    max-width: 700px;
    margin: auto;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    filter: brightness(80%);
    /* Reduce el brillo de las imágenes */
    transition: filter 0.3s ease;
    /* Transición suave para el brillo */
}

/* Efecto al pasar el cursor sobre las imágenes */
.carousel:hover {
    filter: brightness(100%);
    /* Aumenta el brillo al pasar el cursor */
}

.carousel-item {
    display: none;
    width: 100%;
    transition: opacity 0.5s ease;
    /* Transición suave para la opacidad */
}

/* Muestra el elemento activo */
.carousel-item.active {
    display: block;
    /* Muestra el elemento activo */
    opacity: 1;
    /* Opacidad completa */
}

.carousel img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-10%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 12px;
    cursor: pointer;
    border-radius: 50%;
    transition: background-color 0.3s ease, transform 0.3s ease;
    /* Transiciones suaves */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    /* Sombra para los botones */
}

/* Efecto al pasar el cursor sobre los botones de control */
.carousel-control:hover {
    background-color: #c19629;
    /* Cambia el fondo al pasar el cursor */
    transform: scale(1.05);
    /* Aumenta el tamaño del botón */
}

.carousel-control.prev {
    left: 15px;
}

.carousel-control.next {
    right: 15px;
}

/* Estilos responsivos */
@media (max-width: 768px) {
    h2 {
        font-size: 1.5rem;
        /* Tamaño de fuente más pequeño en dispositivos móviles */
    }

    .carousel-control {
        padding: 8px;
        /* Reduce el espaciado interno de los botones en móviles */
    }
}

/* Estilo para la sección del logo */
.logo-section {
    background-color: #000;
    /* Fondo negro */
    padding: 10px 0;
    /* Espaciado interno */
    border-radius: 100%;
    border-top-left-radius: 10px;
    /* Curva suave arriba a la izquierda */
    border-top-right-radius: 10px;
    /* Curva suave arriba a la derecha */
    border-bottom-left-radius: 0px;
    /* Curva suave abajo a la izquierda */
    border-bottom-right-radius: 0px;
    /* Curva suave abajo a la derecha */

}

.logo-section img {
    width: 15%;
    /* Ancho del logo */
    height: auto;
    /* Mantiene la relación de aspecto */
}

/* Seccion Emprende */
#Emprende {
    padding: 20px;
    /* Reducir el padding general para pantallas más pequeñas */
    box-sizing: border-box;
}

.Emprende {
    display: flex;
    justify-content: space-around;
    /* Espacio alrededor para centrar en pantallas pequeñas */
    align-items: center;
    background-color: #ebc8b52a;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 2px rgb(0, 0, 0);
    margin: 5vh 5vw;
    /* Márgenes más relativos y pequeños */
    padding: 30px;
    /* Reducir el padding interno */
    flex-wrap: wrap;
    /* Permitir que los elementos se apilen en pantallas pequeñas */
}

.EmprendeTexto {
    margin-right: 80px;
    /* Reducir el margen derecho */
    flex: 1;
    /* Permite que el texto crezca y ocupe espacio */
    min-width: 300px;
    /* Ancho mínimo para evitar que se comprima demasiado */
}

.EmprendeTexto h1 {
    font-size: 1.8em;
    /* Reducir el tamaño del título */
    color: #333;
    margin-bottom: 10px;
    text-align: left;
    /* Alinear el texto a la izquierda */
}

.EmprendeTexto p {
    font-size: 1em;
    /* Reducir el tamaño del párrafo */
    color: #666;
    margin-bottom: 20px;
    text-align: left;
    /* Alinear el texto a la izquierda */
}

.EmprendePrivilegios {
    list-style-type: none;
    padding: 0;
    text-align: left;
    /* Alinear la lista a la izquierda */
}

.EmprendePrivilegios img {
    box-shadow: 0 0 4px 2px rgba(0, 255, 13, 0.9);
    width: 16px;
    /* Reducir el tamaño del icono */
    border-radius: 100%;
    margin-right: 10px;
    vertical-align: middle;
    /* Alinear verticalmente con el texto */
}

.EmprendePrivilegios li {
    font-size: 1em;
    /* Reducir el tamaño de la lista */
    color: #444;
    margin-bottom: 10px;
    /* Reducir el margen inferior */
    padding: 0;
    /* Reducir el padding */
}

.UneteBoton {
    padding: 8px 16px;
    /* Reducir el padding del botón */
    font-size: 1em;
    /* Reducir el tamaño del botón */
    color: #fff;
    text-decoration: none;
    border-radius: 15px;
    transition: 0.3s ease background-color, 0.3s ease color, 0.3s ease transform;
    background: linear-gradient(45deg, #424242, #181818);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
    /* Reducir la sombra */
    display: inline-block;
    margin-top: 20px;
    /* Añadir un poco de margen superior */
}

.UneteBoton:hover {
    transform: scale(1.05);
    /* Reducir el efecto hover */
    background: linear-gradient(45deg, #5e4d0e, #c19629);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.6);
    /* Reducir la sombra hover */
}

#Local {
    border-radius: 10px;
    /* Reducir el radio del borde */
    box-shadow: 0px 0px 5px 1px rgb(0, 0, 0);
    /* Reducir la sombra */
    width: 100%;
    /* Hacer la imagen responsive dentro de su contenedor */
    max-width: 500px;
    /* Mantener el ancho máximo original */
    height: auto;
    /* La altura se ajusta proporcionalmente */
    margin-top: 20px;
    /* Añadir margen superior en pantallas pequeñas */
    flex: 1;
    /* Permite que la imagen crezca y ocupe espacio */
    min-width: 200px;
    /* Ancho mínimo para la imagen */
}

/* Media Query para pantallas más pequeñas (móviles) */
@media (max-width: 768px) {
    .Emprende {
        flex-direction: column;
        /* Apilar texto e imagen */
        align-items: center;
        /* Centrar los elementos */
        margin: 2vh 2vw;
        /* Márgenes más pequeños */
        padding: 20px;
    }

    .EmprendeTexto {
        margin-right: 0;
        /* Eliminar margen derecho */
        margin-bottom: 20px;
        /* Añadir espacio debajo del texto */
        text-align: center;
        /* Centrar el texto */
        min-width: auto;
        /* Permitir que el ancho se ajuste */
    }

    .EmprendeTexto h1 {
        font-size: 1.5em;
        /* Reducir aún más el título */
    }

    .EmprendeTexto p {
        font-size: 0.9em;
        /* Reducir aún más el párrafo */
    }

    .EmprendePrivilegios {
        text-align: center;
        /* Centrar la lista */
    }

    .EmprendePrivilegios li {
        font-size: 0.9em;
        /* Reducir el tamaño de la lista */
    }

    .UneteBoton {
        font-size: 0.9em;
        /* Reducir el tamaño del botón */
        margin-top: 15px;
    }

    #Local {
        margin-top: 0;
        /* Eliminar margen superior en móviles */
        max-width: 80%;
        /* Ocupar más ancho en móviles */
    }
}

/* Media Query para tablets (opcional) */
@media (min-width: 769px) and (max-width: 1024px) {
    .Emprende {
        padding: 40px;
        margin: 8vh 10vw;
    }

    .EmprendeTexto {
        margin-right: 40px;
    }

    .EmprendeTexto h1 {
        font-size: 2em;
    }

    .EmprendeTexto p {
        font-size: 1.05em;
    }

    #Local {
        max-width: 350px;
    }
}

.tiktok-container {
    display: flex;
    /* Coloca los videos en una fila horizontal */
    gap: 10px;
    /* Espacio entre los videos */
    overflow-x: auto;
    /* Permite el desplazamiento horizontal si hay muchos videos */
    padding: 10px;
    /* Espacio interno */
    margin: 0 14%;
}

/* Estilos para el título */

.TikTok h2 {
    text-align: center;
    font-size: 2.3rem;
    color: #333;
    margin: 40px;
}

.TikTok::after {
    content: '';
    display: block;
    width: 60%;
    /* Ajusta el ancho según lo necesites */
    height: 1px;
    /* Grosor de la línea */
    background-color: #0b0b0b;
    /* Color de la línea */
    margin: 0px auto;
    /* Centra la línea debajo del texto */
    position: absolute;
    /* Posiciona la línea */
    left: 50%;
    /* Posiciona a la mitad */
    transform: translateX(-50%);
    /* Centra la línea horizontalmente */
}

.tiktok-embed {
    width: 300px;
    /* Ancho de cada video */
    height: 500px;
    /* Altura de cada video */
}

/* Estilos para el botón "Ver en TikTok" */
.boton-tiktok {
    display: block;
    margin: 10px auto;
    padding: 10px 20px;
    background-color: #c19629;
    /* Color de TikTok */
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    font-size: 16px;
    width: fit-content;
    transition: 0.3s ease background-color, 0.3s ease color, 0.3s ease transform;
}

.boton-tiktok:hover {
    scale: 0.98;
    box-shadow: 0 0 20px rgba(28, 28, 28, 0.496);
    /* Box-shadow más claro y con menor opacidad */
}

.icons {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    max-width: 1200px;
    margin: 0 0 2% 18%;
}

.icons img {
    width: 35px;
    height: 35px;
    margin: 20px 5px 20px 5px;
    transition: 0.3s ease background-color, 0.3s ease color, 0.3s ease transform;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 4%;
    z-index: 100;
}

.icons img:hover {
    transform: scale(1.1);
}

/* Punto Fisico */
#Contacto {
    padding: 20px;
    box-sizing: border-box;
}

.Contacto {
    display: flex;
    flex-direction: column;
    /* Apilar elementos en pantallas pequeñas */
    align-items: center;
    border-radius: 10px;
    width: 95%;
    /* Ocupar más ancho en pantallas pequeñas */
    max-width: 1000px;
    /* Ancho máximo en pantallas grandes */
    margin: 20px auto;
    margin-bottom: 5vh;
    /* Reducir el margen inferior */
    background-image: linear-gradient(rgba(0, 0, 0, 0.781), rgba(246, 237, 237, 0.321)), url(Contenido/Presentaciones/Neivaciudad.jpg);
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    border: #000000 solid 2px;
    padding: 20px;
    /* Añadir padding interno */
}

.ContactoTexto {
    text-align: center;
    /* Centrar el título */
    margin-bottom: 20px;
    /* Espacio debajo del título */
}

.ContactoTexto h1 {
    font-size: 2em;
    /* Reducir el tamaño del título */
    color: #ffffff;
    margin-bottom: 10px;
    text-shadow: 2px 3px 2px rgb(0, 0, 0);
}

#Utiles {
    width: 95%;
    /* Hacer el iframe responsive */
    max-width: 600px;
    /* Ancho máximo del mapa */
    height: auto;
    /* Ajustar la altura automáticamente */
    border-radius: 15px;
    transition: transform 0.3s ease;
    box-shadow: 0px 0px 5px 2px rgb(0, 0, 0);
}

#Utiles:hover {
    transform: scale(1.05);
    /* Reducir el efecto hover */
    cursor: pointer;
    box-shadow: 0px 0px 8px 3px rgb(0, 0, 0);
    /* Aumentar la sombra al hover */
}

.ContactoDiv {
    font-size: 1em;
    /* Reducir el tamaño del texto */
    color: #2d2c2c;
    font-weight: bold;
    padding: 20px;
    background-color: rgb(223, 223, 223);
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.759);
    /* Reducir la sombra */
    margin: 20px auto;
    /* Centrar y añadir margen */
    width: 80%;
    /* Ocupar más ancho */
    max-width: 400px;
    /* Ancho máximo del contenedor de texto */
    text-align: center;
    /* Centrar el texto interno */
}

.ContactoDiv p {
    font-size: 1em;
    font-weight: bolder;
    margin-bottom: 5px;
    /* Espacio inferior para el título */
}

/* Media Query para pantallas más pequeñas (móviles) */
@media (max-width: 768px) {
    .Contacto {
        padding: 15px;
    }

    .ContactoTexto h1 {
        font-size: 1.6em;
    }

    #Utiles {
        max-width: 100%;
        /* Ocupar todo el ancho */
        height: 300px;
        /* Reducir la altura del mapa */
    }

    .ContactoDiv {
        font-size: 0.9em;
        padding: 15px;
        margin: 15px auto;
        width: 90%;
    }

    .ContactoDiv p {
        font-size: 0.9em;
    }
}

/* Media Query para tablets (opcional) */
@media (min-width: 769px) and (max-width: 1024px) {
    .Contacto {
        padding: 30px;
    }

    .ContactoTexto h1 {
        font-size: 2.2em;
    }

    #Utiles {
        max-width: 700px;
        height: 350px;
    }

    .ContactoDiv {
        font-size: 1.1em;
        margin: 25px auto;
        width: 70%;
    }

    .ContactoDiv p {
        font-size: 1em;
    }
}