@import url('https://fonts.googleapis.com/css2?family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');

body, p, ul, li, .texto-descripcion {
    font-weight: 100;
    scroll-behavior: smooth;
    font-family: "Lora", serif;
    font-optical-sizing: auto;
}

h1, h2, h3, h4, h5, h6  {
    font-family: "Playfair", serif !important;
    font-weight: 400;
    font-style: normal !important;
}

/* Fuente para el resto del footer */
.footer-container p,
.footer-location p,
.footer-links a,
.footer-reserved {
    font-family: 'Lora', serif;
}


/* Estilos personalizados */

.container-menu {
    display: flex;
    justify-content: center; /* Centra el contenido horizontalmente */
    position: relative ;  /*Para que  sea estático, usar "position: sticky"*/
    top: 0;
    background-color: #a4a4a4; /* Fondo para visibilidad */
    z-index: 1000; /* Asegura que el nav esté sobre otros elementos */
    width: 100%; /* Asegura que el contenedor ocupe todo el ancho disponible */
}

.navbar {
    width: 100%; /* Asegura que la navbar ocupe el ancho completo del contenedor */
    display: flex;
    justify-content: center; /* Centra el contenido dentro de la navbar */
    font-family: 'Bebas Neue', sans-serif;
}

.container-fluid {
    display: flex;
    max-width: 1200px; /* Limita el ancho máximo del nav */
    width: 100%; /* Asegura que el contenedor fluid ocupe el 100% del ancho disponible */
    justify-content: center; /* Centra el contenido dentro del contenedor fluid */
    align-items: center;
}

/* Estilos para el logo y los links */
.navbar-brand {
    font-weight: bold;
    font-size: 2.5rem !important;
    margin-right: 20px;
}

.navbar-nav {
    display: flex;
    justify-content: center; /* Centra los elementos de navegación horizontalmente */
}

.bg-navy {
    background-color: #171e26 !important; /* Azul marino */
}

.navbar-nav a {
    color: white; /* Asegura que el texto sea legible sobre el fondo oscuro */
}

.navbar-nav a:hover {
    color: #f5e1ce; /* Mantén el color hover definido */
    transition: all 0.2s;
}

.logo-navbar {
    height: 70px; /* Ajusta la altura del logo */
    width: auto;  /* Mantén la proporción de la imagen */
    max-height: 100%; /* Evita que se desborde */
}

.navbar-nav .nav-link {
    font-weight: bold;
    margin: 0 10px;
    position: relative;
    font-size: 1.6rem; /* Aumenta el tamaño de la fuente */
}

.navbar-nav .nav-link:before {
    content: "|";
    position: absolute;
    left: -15px;
    top: 0;
    bottom: 0;
    margin: auto;
}

.navbar-nav .nav-link:first-child:before {
    content: "";
}

/* Estilos para móviles */
@media (max-width: 768px) {

    .ul, li{
        font-family: "Playfair", serif !important;
        font-weight: 100 !important;
        font-style: normal !important;
    }

    .navbar-nav {
        flex-direction: column;
        text-align: left;
    }

    .navbar-nav a {
        border-left: 2px solid#a4a4a4;
        padding-left: 30px;
    }

    .navbar-nav .nav-link {
        display: block;
        margin: 5px 0;
    }

    .navbar-nav .nav-link:before {
        content: "";
    }

    .container-fluid {
        max-width: 100%; /* Ocupa el 100% en dispositivos móviles */
    }
}

/* Estilos para móviles */
@media (max-width: 768px) {
    .logo-navbar {
        height: 60px;
    }

    .navbar-nav {
        flex-direction: column;
        text-align: left;
    }

    .navbar-nav a {
        border-left: 2px solid#a4a4a4;
        padding-left: 30px;
    }

    .navbar-nav .nav-link {
        display: block;
        margin: 5px 0;
    }

    .navbar-nav .nav-link:before {
        content: "";
    }

    .container-fluid {
        max-width: 100%; /* Ocupa el 100% en dispositivos móviles */
    }
}

.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba%28255, 255, 255, 1%29' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}


/* Estilo general para los íconos flotantes */
.instagram-float,
.whatsapp-float {
    position: fixed;
    z-index: 9999; /* Asegura que estén por encima de otros elementos */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

/* Efecto hover */
.instagram-float:hover,
.whatsapp-float:hover {
    transform: scale(1.1);
}

/* Ícono de Instagram */
.instagram-float {
    bottom: 80px; /* Ajusta la distancia desde el borde inferior */
    right: 20px; /* Ajusta la distancia desde el borde derecho */
    background-color: #E4405F;
    z-index: 10; /* Asegura que esté encima del ícono de WhatsApp */
}

/* Ícono de WhatsApp */
.whatsapp-float {
    bottom: 20px; /* Ajusta la distancia desde el borde inferior */
    right: 20px; /* Ajusta la distancia desde el borde derecho */
    background-color: #25D366;
    z-index: 9; /* Asegura que esté debajo del ícono de Instagram */
}

/* Estilo de los íconos */
.instagram-icon,
.whatsapp-icon {
    width: 35px;
    height: 35px;
}

/* Responsividad */
@media (max-width: 768px) {
    .instagram-float,
    .whatsapp-float {
        width: 50px;
        height: 50px;
    }

    .instagram-icon,
    .whatsapp-icon {
        width: 30px;
        height: 30px;
    }

    .instagram-float {
        bottom: 70px; /* Ajusta la separación para pantallas pequeñas */
    }

    .whatsapp-float {
        bottom: 10px;
    }
}

/* Ajustes para pantallas grandes */
@media (min-width: 769px) {
    .instagram-float {
        bottom: 140px; /* Mayor separación entre los íconos */
    }

    .whatsapp-float {
        bottom: 60px; /* Mantén un margen razonable entre ambos */
    }
}



/* Imagenes INICIO */

/* COLOR FONDO*/
.carousel slide,
.carousel-indicators,
.carousel-inner,
.carousel-item active{
    background-color: #faeeed !important;

}
.carousel-inner{    
    padding-bottom: 20px;
}

/*Sombreado*/
#carouselInicio {
    position: relative;
}

#carouselInicio::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px; /* Ajusta la altura del sombreado */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); /* Sombreado negro que se desvanece */
    z-index: 1; /* Asegúrate de que quede por encima del carrusel */
    pointer-events: none; /* Evita que interfiera con la interacción del carrusel */
}

.carousel-inner {
    position: relative;
    z-index: 0; /* Asegura que las imágenes queden debajo del sombreado */
}

/*Resto*/
.container-inicio-imgs {
    display: flex;
    justify-content: center;
    align-items: center;
    object-fit: cover;
    padding: 100px 60px;
    margin-bottom: 68px;
    box-shadow: #161616 0 0 140px;
}

/* Estilos generales para imágenes en pantallas grandes */
.container-inicio-imgs img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    transition: transform 0.3s ease-in-out;
}

/* En pantallas grandes (PC) */
@media (min-width: 768px) {
    .container-inicio-imgs {
        display: flex;
        flex-wrap: nowrap; /* Las imágenes se muestran una al lado de la otra */
        justify-content: space-between;
        gap: 30px; /* Ajustar el espacio entre las imágenes */
    }

    .container-inicio-imgs img {
        width: calc(33.33% - 20px); /* Tres imágenes por fila con espacio entre ellas */
    }
}

/* En pantallas móviles */
@media (max-width: 767px) {
    .container-inicio-imgs {
        flex-wrap: nowrap;
        overflow-x: auto; /* Activar scroll horizontal */
        scroll-snap-type: x mandatory; /* Forzar el scroll suave entre imágenes */
        justify-content: flex-start; /* Alinear las imágenes hacia el inicio */
    }
    .container-inicio-imgs img {
        width: 100vw; /* Mostrar una imagen completa a la vez */
        scroll-snap-align: center; /* Cada imagen se centra en el viewport */
        flex-shrink: 0; /* Evitar que las imágenes se reduzcan de tamaño */
    }

    /* Ocultar scrollbar en dispositivos móviles */
    .container-inicio-imgs::-webkit-scrollbar {
        display: none;
    }
    #carouselInicio::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 40px; /* Ajusta la altura del sombreado */
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)); /* Sombreado negro que se desvanece */
        z-index: 1; /* Asegúrate de que quede por encima del carrusel */
        pointer-events: none; /* Evita que interfiera con la interacción del carrusel */
    }
}


.carousel-caption {
    background-color: rgba(0, 0, 0, 0.5); /* Fondo oscuro con opacidad */
    padding: 15px;
    border-radius: 15px; /* Bordes más redondeados */
    font-size: 1.2rem;
    transition: opacity 0.5s ease-in-out; /* Suaviza la aparición del texto */
    bottom: 50%; /* Lo sube un poco */
    margin-bottom: 30px;
}


/* En pantallas grandes (PC) */
@media (min-width: 768px) {
    .carousel-inner {
        max-height: 100%; /* Limita la altura máxima del carrusel */
    }

    .carousel-item img {
        height: auto;
    }

    .carousel-caption {
        font-size: 1rem; /* Reduce el tamaño del texto */
        padding: 10px;
        bottom: 25%;
    }
}


/* En pantallas móviles */
@media (max-width: 767px) {
    .carousel-inner {
        max-height: 400px; /* Ajusta la altura del carrusel en dispositivos móviles */
    }

    .carousel-item img {
        object-fit: contain; /* Ajusta las imágenes para que se vean bien en móviles */
    }

    /* Reducir el tamaño del texto en móviles */
    .carousel-caption {
        font-size: 0.8rem; /* Reduce el tamaño del texto */
        padding: 10px;
        bottom: 10% !important;
        transform: translateY(30px); /* Lo baja aún más */
    }
}

/* ======== SOBRE NOSOTROS ======== */

.custom-container {
    margin-top: -24px; /* Ajusta según sea necesario */
}

/* COLOR FONDO*/
.acerca,
.custom-container,
.container my-4,
.row align-items-center{
    background-color: #faeeed !important;

}

/*Sobras para imagenes*/
.custom-container img, 
.custom-container2 img, 
.additional-photos img {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 50);
}

.custom-container, .custom-container2, .additional-photos {
    background-color: #ffffff; /* Fondo marron claro: background-color: #8d5f3498;*/
    /* padding: 10px;  Espaciado interno */
}

/* Títulos dentro de los contenedores */
.custom-container h2, .custom-container2 h2 {
    font-size: 2.5rem; /* Tamaño grande */
    font-family: 'Bebas Neue', sans-serif; /* Fuente personalizada */
    color: #000000 !important; /* Para poner texto blanco: color: #ffffff !important; */
}


/* Descripción de texto principal */
.custom-container .texto-descripcion, .custom-container2 .texto-descripcion {
    font-size: 1.3rem; /* Tamaño del texto */
    line-height: 1.5; /* Espaciado entre líneas */
    text-align: justify; /* Alinea el texto justificado */
    color: #000000; /* Para poner texto blanco: color: #ffffff !important; */
    max-width: 570px; /* Ancho máximo */
    margin: 0 auto; /* Centra el texto */
    padding: 0 15px; /* Relleno lateral */
    font-family: "Playfair", serif !important;
}

/* Imágenes dentro de los contenedores */
.custom-container img, .custom-container2 img {
    width: 100%; /* Ocupa el ancho completo */
    height: auto; /* Mantiene proporción */
    border-radius: 10px; /* Bordes redondeados */
    object-fit: cover; /* Ajusta la imagen al contenedor */
    border: 4px solid #ffffff; /* Borde blanco */
}

/* Galería de fotos adicionales */
.additional-photos {
    margin-top: 20px; /* Espaciado superior */
}

/* Estilo para la primera imagen grande */
#banner-img > img:first-child {
    margin-bottom: 20px; /* Espaciado inferior */
}

/* Estilo para fotos pequeñas (en fila) */
.additional-photos .photo-small {
    width: 100%; /* Ocupa todo el contenedor */
    height: auto; /* Mantiene proporción */
    border-radius: 10px; /* Bordes redondeados */
    object-fit: cover; /* Ajusta la imagen */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra ligera */
    margin: 0 auto; /* Centra en su columna */
    margin-bottom: 15px; /* Espaciado inferior */
    border: 4px solid #ffffff; /* Borde blanco */
}

/* Espaciado entre fotos pequeñas */
.additional-photos .row .col-6 {
    padding: 0 10px; /* Espaciado horizontal */
}

/* Estilo para la segunda imagen grande */
.additional-photos .photo-large {
    width: 100%; /* Ocupa todo el contenedor */
    height: auto; /* Mantiene proporción */
    border-radius: 10px; /* Bordes redondeados */
    object-fit: cover; /* Ajusta la imagen */
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.35) !important; /* Sombra ligera */
    margin-top: 20px; /* Espaciado superior */
    margin-bottom: 20px; /* Espaciado inferior */
    border: 4px solid #ffffff; /* Borde blanco */
}


@media (min-width: 769px) {
    .custom-container h2 {
        margin-top: 0; /* Elimina espacio superior */
        margin-bottom: 0; /* Reduce espacio inferior */
    }

    #banner-img > img:first-child {
        margin-top: -50px; /* Acerca la primera imagen al título */
        margin-bottom: 10px; /* Reduce separación con imágenes pequeñas */
    }
}

/* Espaciado entre fotos en pantallas pequeñas */
@media (max-width: 768px) {
    .photo-small, .photo-large {
        margin-bottom: 15px; /* Espaciado inferior */
    }

    /* Espaciado entre imágenes y texto */
    .custom-container .texto-descripcion {
        margin-top: 40px; /* Asegura que haya espacio suficiente */
    }
}


 /*CARDS*/

 .eventos-container{
    margin-top: -24px;
 } 
 
 .prod,
 .wrapper,
 .container{
     background-color: #faeeed !important;
 }
 

 .eventos-container {
    background-color: #e8c39e; /* Color verde */
    padding: 20px; /* Espaciado interno */
    border-radius: 10px; /* Bordes redondeados */
    color: white; /* Texto en blanco para contraste */
    margin-bottom: 20px; /* Espaciado con la siguiente sección */
    text-align: center; /* Centrar el texto */
}

/*Distancia entre la seccion anterior*/
 .wrapper{margin:0vh}
    
    
 .card{
   border: none;
   transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
   overflow:hidden;
   border-radius:20px;
   min-height:450px;
   box-shadow: 0 0 12px 0 rgba(0,0,0,0.2);
   min-width: 300px; /* Ancho mínimo */
   width: 100%; /* Asegura que la card ocupe el 100% del ancho disponible */
 
  &.card-has-bg{
  transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
   background-size:120%;
   background-repeat:no-repeat;
   background-position: center center;
   &:before {
     content: '';
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     background: inherit;
     -webkit-filter: grayscale(1);
   -moz-filter: grayscale(100%);
   -ms-filter: grayscale(100%);
   -o-filter: grayscale(100%);
   filter: grayscale(100%);
 
}
 
   &:hover {
     transform: scale(0.98);
      box-shadow: 0 0 5px -2px rgba(0,0,0,0.3);
     background-size:130%;
      transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
 
     .card-img-overlay {
       transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
       background: rgb(0, 0, 0);
      }
   }
 }
  .card-footer{
   background: none;
    border-top: none;
     .media{
      img{
        border:solid 3px rgb(187, 125, 0);
      }
    }
  }
   .card-title{font-weight:800;
     font-family: 'Bebas Neue', sans-serif;
    }
     
  .card-meta{color:rgba(255, 255, 255, 0.3);
   text-transform:uppercase;
    font-weight:500;
    letter-spacing:2px;}
  .card-body{ 
    transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
  
 
   }
   .text-d{
     text-decoration: none;
     color: #e6e6e6;

   }

   &:hover {
    .card-body{
      margin-top:30px;
      transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
    

    }
  cursor: pointer;
  transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);


  border: 4px solid rgba(180, 154, 68, 0.871); /* Borde visible: Cambia el grosor aquí */
 }
  .card-img-overlay {
   transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
  background: rgb(0, 0, 0);
 }
 }

 #carta1 {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
              url('../imagenes/card1.jpeg') no-repeat center center;
    object-fit: cover !important;
 }

 #carta2 {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
              url('../imagenes/card2.jpeg') no-repeat center center;
    object-fit: cover !important;
 }

 #carta3 {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
              url('../imagenes/card3.jpeg') no-repeat center center;
    object-fit: cover !important;
 }

/* Estilo general para títulos */
.titulo-princi-productos {
    font-size: 40px;
    font-family: 'Bebas Neue', sans-serif;
}

/* Descripción de productos */
.describirpRoductos {
    font-size: 120px; /* Tamaño grande para pantallas grandes */
    line-height: 1.5; /* Espaciado entre líneas */
    text-align: justify; /* Justifica el texto */
    font-family: 'Bebas Neue', sans-serif;
    color: #fffdfd !important;
}

/* Ajustes para pantallas pequeñas (tablets y móviles) */
@media (max-width: 768px) {
    .wrapper {
        background-color: #faeeed !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .wrapper{margin:5vh}
    .titulo-princi-productos {
        font-size: 30px; /* Reduce el tamaño del título */
    }
    .describirpRoductos {
        font-size: 60px; /* Texto más pequeño en móviles */
    }
}

@media (max-width: 420px) {
    .wrapper{margin:5vh}
    .titulo-princi-productos {
        font-size: 30px; /* Tamaño aún más pequeño para pantallas muy pequeñas */
    }
    .describirpRoductos {
        font-size: 40px; /* Ajusta aún más para móviles pequeños */
    }
}



/* Carrusel Reseña */

.carrusel__contenedor{
    margin-top: -24px;
}
.carrusel,
.carrusel__contenedor,
.carrusel__lista scrollbar-hidden{
    background-color: #faeeed !important;
}

.carrusel__contenedor {
    position: relative;
    margin-top: 0px; /*Separacion entre el carrusel y las cards de arriba-Valor anterior: 100*/
}

.carrusel__anterior, .carrusel__siguiente {
    position: absolute;
    display: block;
    width: 60px;
    height: 60px;
    border: none;
    top: calc(50%);
    cursor: pointer;
    line-height: 30px;
    text-align: center;
    background: none;
    color: #161616;
    opacity: 100%;
    transition: all .5s ease;
}

.carrusel__anterior:hover, .carrusel__siguiente:hover {
    color: #161616;
}

.carrusel__anterior {
    left: 30px;
}

.carrusel__siguiente {
    right: 20px;
}

.carrusel__lista {
    overflow: hidden;
}

.carrusel__indicadores .glider-dot {
    display: block;
    width: 30px;
    height: 4px;
    background: #fff;
    opacity: .2;
    border-radius: 0;
}

.carrusel__indicadores .glider-dot:hover {
    opacity: .5;
}

.carrusel__indicadores .glider-dot.active {
    opacity: 1;
}

.carrusel__lista {
    display: flex;
}

.carrusel__elemento {
    flex: 0 0 auto; /* Asegura que cada imagen ocupe solo su propio ancho */
    margin: 0; /* Elimina cualquier margen */
    padding: 0; /* Elimina cualquier relleno */
}

.carrusel__elemento img {
    display: block; /* Elimina el espacio que los elementos en línea pueden agregar */
    width: 100%; /* Asegura que las imágenes ocupen todo el contenedor */
}

/* Contenedor del botón dentro del carrusel */
.carrusel__boton {
    margin-top: 30px;
    display: flex;
    justify-content: center; /* Centra los botones */
    gap: 15px; /* Espacio entre botones (si hay varios) */
    background-color: #faeeed !important; /* Aplica el color de fondo */
    padding-bottom: 25px !important; 
}

/* Estilos del botón */
.carrusel__boton button {
    background-color: #fcfcfc; /* Color del botón: f8f8f8 */
    color: white;
    border: 2px solid #e8c39e; /* Borde del botón */
    padding: 12px 25px; /* Botones más grandes */
    margin: 10px;
    font-size: 1.1rem; /* Texto más grande en los botones */
    border-radius: 20px; /* Botones más redondeados */
    cursor: pointer;
    transition: 0.3s ease; /* Suaviza el hover */
    display: flex;
    align-items: center; /* Centra el contenido verticalmente */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Sombra del botón */

}

/* Efecto hover */
.carrusel__boton button:hover {
    background-color: #fffefebb; /* Cambia el color al pasar el cursor */
    transform: scale(1.05); /* Efecto de zoom */
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.20); /* Sombra más intensa al pasar el cursor */
}

/* Ajuste del icono dentro del botón */
.cotización-icon {
    width: 200px; /* Tamaño del icono */
    height: auto;
}



/* CONTACTO*/

/* Sección de contacto */
.contacto {
    background-color: #e8c39e;
    color: #161616;
    padding: 60px 20px; /* Más espacio alrededor */
    width: 100%;
    font-family: 'Bebas Neue', sans-serif;
    /*margin-top: 10px; /*Separacion con la seccion de arriba*/
    margin-bottom: -20px;
}

/* Contenedor principal */
.container-formulario1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centra los elementos */
    gap: 40px; /* Más espacio entre secciones */
    align-items: center;
}

/* Secciones de contacto */
.contacto-section {
    flex: 1 1 45%; /* Distribución equilibrada */
    margin: 10px;
    text-align: center;
}

/* Títulos de las secciones */
.contacto-section h3 {
    padding-bottom: 15px;
    font-size: 2.4rem;
    color: #fff;
}

/* Texto de contacto */
.contacto-section p {
    color: #fff;
    font-size: 1.2rem;
    line-height: 1.8;
    margin: 15px 0; /* Espaciado entre párrafos */
}

/* Destacar texto (correo, teléfono, redes) */
.destaque {
    font-weight: bold;
    color: #3e3e72;
    transition: all 0.3s ease-in-out;
}

/* Efecto hover 
.destaque:hover {
    color: #ff4500;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); 
    cursor: pointer;
} */

/* Contenedor del mapa */
.map-container {
    margin: 0 auto; /* Centra el mapa */
    max-width: 900px;
}

.map-container iframe {
    border: none;
    width: 100%;
    height: 500px; /* Ajuste de altura */
    max-width: 100%;
    border-radius: 10px;
}



/*.instagram-icon1 {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}*/

/* Estilos específicos para pantallas grandes (>= 768px) */
@media (min-width: 768px) {
    .footer-container {
        flex-direction: row; /* Disposición horizontal en pantallas grandes */
    }

    .footer-section {
        text-align: center; /* Alinea el texto a la izquierda */
    }

    .map-container iframe {
        height: 200px; /* Altura fija del iframe en pantallas grandes */
    }

    .social-links {
        flex-direction: row; /* Disposición horizontal de los íconos de redes sociales */
    }

    .social-icon img {
        width: 60px; /* Tamaño de los íconos en pantallas grandes */
    }
}

/* Estilos específicos para pantallas pequeñas (< 768px) */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        align-items: center;
    }

    .footer-section {
        text-align: center; /* Centra el texto en pantallas pequeñas */
    }

    .map-container iframe {
        height: 150px; /* Ajusta la altura del iframe en pantallas pequeñas */
    }

    .social-links {
        flex-direction: column;
        align-items: center;
    }

    .social-icon img {
        width: 40px; /* Tamaño de los íconos en pantallas pequeñas */
    }
}



/* 1ER FOOTER*/

.footer {
    /* background: linear-gradient(180deg, rgba(88, 63, 42, 0.7), rgba(80, 50, 25, 0.7)); */
    background-color: #171e26; /* # */
    color: #f8f8f8;
    padding: 30px 20px;
    font-family: 'Bebas Neue', sans-serif;
    width: 100%;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-title {
    flex: 1;
    font-size: 2.4rem;
    color: #f8f8f8;
    text-align: left; /* Alinea el H3 a la izquierda */
    margin-bottom: 10px;
}

.footer-location {
    flex: 1;
    font-size: 1.2rem;
    color: #e6e6e6;
    text-align: left; /* Alinea la ubicación a la izquierda */
}

.footer-bottom {
    text-align: center;
    margin-top: 20px;
    padding-top: 20px;
}

.footer-divider {
    border: none;
    height: 2px;
    background-color: #CBBAA9; /* Color de la línea central */
    margin: 20px auto;
    width: 80%;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 10px;
    font-size: 1.1rem;
    margin-top: 10px;
}

.footer-links a {
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
}

.footer-links a:hover {
    color: #f5e1ce;
}

.footer-reserved {
    margin-top: 15px;
    font-size: 1rem;
    color: #CBBAA9;
}

/* Adaptaciones para pantallas grandes */
@media (min-width: 768px) {
    .footer-container {
        flex-direction: row;
    }

    .footer-title {
        font-size: 2.6rem;
    }

    .footer-location {
        font-size: 1.3rem;
    }
}

/* Adaptaciones para pantallas pequeñas */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-title, .footer-location {
        text-align: left;
    }

    .footer-links {
        flex-wrap: wrap;
    }
}






/* Eliminar spinners */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Estilos específicos para pantallas grandes (>= 768px) */
@media (min-width: 768px) {
    .container-formulario1 {
        max-width: 85vw;
    }

    .container-formulario1 .container-datos {
        width: 85vw;
    }

    .container-formulario1 .container-datos input {
        width: 50%;
    }
    
    .container-formulario1 .container-colores {
        width: 85vw;
    }

    .container-formulario1 .container-colores select {
        width: 50%;
    }

    .container-formulario1 .container-prendas {
        width: 85vw;
    }
    
    .container-formulario1 .container-prendas .opcion {
        width: 15%; /* Ajusta este ancho según sea necesario */
    }

    .container-formulario1 .container-tamanio {
        width: 85vw;
    }
    
    .container-formulario1 .container-tamanio .opcion {
        width: 8%; /* Ajusta este ancho según sea necesario */
    }
    
    .container-formulario1 .container-comentarios {
        width: 85vw;
    }

    .container-formulario1 .container-comentarios textarea {
        width: 50%;
    }

    .container-formulario1 .container-enviar {
        width: 85vw;
    }
    
    .container-formulario1 .container-enviar input[type="submit"] {
        width: 50%;
    }
}

/* Estilos específicos para pantallas pequeñas (< 768px) */
@media (max-width: 768px) {
    .container-formulario1 {
        max-width: 85vw !important;
        min-height: 75vh;
    }

    .container-formulario1 .container-datos {
        width: 85vw;
    }

    .container-formulario1 .container-datos input {
        width: 50%;
    }
    
    .container-formulario1 .container-colores {
        width: 85vw;
    }

    .container-formulario1 .container-colores select {
        width: 50%;
    }

    .container-formulario1 .container-prendas {
        width: 85vw;
        margin-top: 20px;
    }
    
    .container-formulario1 .container-prendas .opcion {
        width: 30%; /* Ajusta este ancho según sea necesario */
    }

    .container-formulario1 .container-tamanio {
        width: 85vw;
    }
    
    .container-formulario1 .container-tamanio .opcion {
        width: 20%; /* Ajusta este ancho según sea necesario */
    }
    
    .container-formulario1 .container-comentarios {
        width: 85vw;
    }

    .container-formulario1 .container-comentarios textarea {
        width: 50%;
    }

    .container-formulario1 .container-enviar {
        width: 85vw;
    }
    
    .container-formulario1 .container-enviar input[type="submit"] {
        width: 50%;
    }
}