html {
  scroll-behavior: smooth;
}
         
         body{
             background-image: url(../images/back-leafs.png);
             font-family: 'Lato', sans-serif;
         }
         
         /* Títulos grandes */
h1, h2, h3 {
  font-family: 'Dancing Script', cursive;
  font-weight: 700;
 
}
         
         h3{
             font-size: 3rem!important;
         }
         
         a { text-decoration: none; }
         
         .toast {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background-color: #9d6a61;
  color: white;
  padding: 16px 24px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  z-index: 9999;
  font-size: 16px;
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
  transform: translateY(20px);
}
.toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* Formularios, botones y navegación */
input, textarea, button, select, label, nav, .btn {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
}

/* Opcional: resaltar botones */
.btn {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
    header {

    }
         
         #carouselHeader{
             position: relative;
             
         }
         
         .carousel-inner {
  filter: brightness(0.7); /* oscurece todo el fondo del carrusel */
}

    .carousel-item img {
     width: 100dvw;
        aspect-ratio: 16 / 9;
      object-fit: cover;
        max-height: 100dvh;
         
    }
    /* Indicadores (dots) personalizados si quieres estilo extra */
    .carousel-indicators [data-bs-target] {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background-color: #6F7868;
    }
         
         .carousel-indicators {
    bottom: 6rem; /* Ajusta este valor según cuánto quieras subirlos */
}

         
         .logo_carrusel{
             position: absolute;
             z-index: 10000;
             max-width: 20rem;
             height: auto;
             top: 50%;
            left: 50%;
             transform: translate(-50%, -70%); 
         }
/* 2. La nueva clase que controla la animación */
.logo-animado {
  /* ESTADO INICIAL: Mantenemos tu centrado y añadimos el 'scale' */
  transform: translate(-50%, -70%) scale(1.5);
  
  /* Definimos la animación (mismos tiempos que el preloader) */
  transition: transform 2s ease-in-out 1s;
}

/* 3. El estado final de la animación */
body.preloader-done .logo-animado {
  /* ESTADO FINAL: Mantenemos tu centrado y volvemos al tamaño normal */
  transform: translate(-50%, -70%) scale(1);
}
    
    
         
         .expertos #productosMobil{
    display: none;
}
         
             .expertos #productos{
        display: block;
                   margin: 0;
            padding: 0;
             padding-top: 3rem;
             padding-bottom: 1rem;
            position: relative;
     top: -15vh;
    }


.about-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    max-width: 90vw;
    margin: 0 auto;
    position: relative;

}

.about-text {
    background-color: #9d6a61; /* Color del cuadro de texto */
    color: white;
    padding: 30px;
    max-width: 40vw;
    text-align: left;
    position: relative;
    z-index: 2;
    box-shadow: 15px 15px 10px rgba(0, 0, 0, .4);
    
}

.about-text p{
    font-size: 1rem;
    line-height: 1.4rem;
   text-align: left;
   
}

    .about-text-dos {
    background-color: #9d6a61; /* Color del cuadro de texto */
    color: white;
    padding: 30px;
    max-width: 40vw;
    text-align: left;
    position: relative;
    z-index: 2;
    box-shadow: -15px 15px 10px rgba(0, 0, 0, .4);
    
}

.about-text-dos p{
   font-size: 1rem;
    line-height: 1.4rem;
    text-align: left;
}

.about-image {
    position: relative;
    z-index: 1;
    margin-left: -80px; /* Superposición */
}

.about-image img {
    width: 40vw; /* Ajusta el tamaño */
    height: auto;
    display: block;
}

.about-image-dos {
    position: relative;
    z-index: 1;
    margin-right: -80px; /* Superposición */
}

.about-image-dos img {
    width: 40vw; /* Ajusta el tamaño */
    height: auto;
    display: block;
}


.cta-button {
    background-color: white;
    color: #60644d;
    padding: 12px 28px;
    border: none;
    border-radius: 50px; /* Bordes más redondeados */
    font-weight: 600;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Espacio entre el texto y la flecha */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
     cursor: pointer;
}

.cta-button:hover {
    background-color: #f4f4eb;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.cta-button .arrow {
    transition: transform 0.3s ease-in-out;
}

.cta-button:hover .arrow {
    transform: translateX(5px); /* Movimiento sutil de la flecha */
}
         
/* Reutilizar estilos de intro-text, si ya están definidos en otros lugares, asegúrate de que sean consistentes */
#masinfo .intro-text {
  margin-bottom: 2rem; /* Espacio debajo del título y subtítulo antes de las tarjetas */
}

#masinfo .intro-text h2 {
 
  color: #9d6a61; /* Color similar al de la imagen */
  font-size: 4rem; /* Tamaño de fuente grande */
  margin-bottom: 0.5rem;
}

#masinfo .intro-text p {
  font-size: 1.7rem;
    font-weight: bolder;
 color: #9d6a61;
  line-height: 1.3;
  max-width: 600px; /* Limitar el ancho del párrafo */
  margin-left: auto;
  margin-right: auto;
    
}
         
.card-wrapper {
  position: relative;
  border-radius: 20px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 350px;
  margin: 20px auto;
  overflow: hidden;
}

.card-wrapper::before {
  content: "";
  position: absolute;
  top: 100px; /* Ajusta este valor para definir desde dónde inicia el fondo */
  left: 0;
  right: 0;
  bottom: 0;
   background: linear-gradient(to bottom, #f3d9d5 0px, transparent 750px);
  border-radius: 20px; /* mismo redondeo para integrarse */
  z-index: 0;
}

.card {
  position: relative;
  background: #fff; /* fondo blanco sólo para la card */
  border-radius: 15px;
  overflow: hidden;
  width: 100%;
}

.card-image {
  position: relative;
  width: 350px;
  height: 450px;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-content {
  padding: 15px;
  text-align: center;
}

.card-content h3 {
  margin-top: 10px;
  
  color: #9d6a61;
}

.card-content p {
  font-size: 14px;
  color: #555;
}

.card-btn {
  margin-top: 15px;
  background-color: #9d6a61;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  cursor: pointer;
    z-index: 9999;
}
         
         #mision{
             margin: 14rem 0 10rem 0;
             position: relative;
             background-image: url(../images/Trazado-427-recto.png);
             background-repeat: no-repeat;
             background-position: top center;
             background-size: cover;
            
         }
         
                #mision .col-12{
             padding-left: 20vw;
             z-index: 3;
                     max-width: 900px; 
                    margin-left: 15vw;
         }
         
         #mision p{
             width: 65%;
            margin: 0 auto;
             text-align: center;
             margin-top: 2rem;
             margin-bottom: 2rem;
             text-align: justify;
                 color: #9d6a61;
         }
         
  
         
         #mision #flores_top{
             position: absolute;
             top: -5rem;
            left: 15vw;
             z-index: 3;
              box-shadow: -15px 15px 10px rgba(0, 0, 0, .4);
             max-width: 283px;
              border-radius: 5px;
         }
         
             #mision #flores_top_dos{
             position: absolute;
             top: 8rem;
             left: 25vw;
             z-index: -2;
                  box-shadow: -15px 15px 10px rgba(0, 0, 0, .4);
                 max-width: 283px;
                 border-radius: 5px;
         }

         #grids{
               background-image: url(../images/Trazado-427.png);
             background-repeat: no-repeat;
             background-position: bottom center;
             background-size: cover;
             padding-bottom: 15rem;
         }
         
#grids .parent {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(6, 1fr);
    row-gap: 0px; /* Por ejemplo, 15px de espacio entre las filas */
  column-gap: 8px; /* Por ejemplo, 8px de espacio entre las columnas */
 
}
    
#grids .div1 {
    grid-column: span 4 / span 4;
    grid-row: span 6 / span 6;
    display: flex;
    flex-direction: column; /* Generalmente querrás que los elementos dentro de div1 estén apilados, no en fila */
  justify-content: center; /* Centra el contenido a lo largo del eje principal (vertical en este caso) */
  align-items: center;   /* Centra el contenido a lo largo del eje transversal (horizontal en este caso) */
     overflow: hidden; 
}
         .parent img{
  max-width: 100%; /* La imagen no será más ancha que su contenedor padre (div1) */
  max-height: 100%; /* La imagen no será más alta que su contenedor padre (div1) */
  object-fit: contain; /* Opcional: Asegura que la imagen sea completamente visible, manteniendo su proporción. */
 border-radius: 10px;                 /* Si prefieres que llene el espacio y se recorte si es necesario, usa 'cover'. */
  display: block; /* Elimina cualquier espacio adicional debajo de la imagen (común con imágenes in-line) */
}

#grids .div2 {
    grid-column: span 8 / span 8;
    grid-row: span 2 / span 2;
    grid-column-start: 5;
    display: flex;
    flex-direction: row; 
  justify-content: space-around;
 
}
         

#grids .div2 .item-top-center {
  /* Como es un item de Grid, no necesita span ni start. Ocupará la primera celda. */
  border-radius: 15px; /* Para que la imagen tenga los bordes redondeados */
  overflow: hidden;    /* Asegura que los bordes redondeados se apliquen a la imagen */
  /* Asegurar que la imagen dentro del div-item ocupe todo el espacio */
}
#grids .div2 .item-top-center img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Para que la imagen cubra completamente su contenedor */
  display: block;
}

#grids .div2 .item-text-button {
  /* Como es un item de Grid, ocupará la segunda celda. */
  /* Mantener los estilos para el texto y botón */
  display: flex; /* Sigue siendo flex para centrar su propio contenido */
  flex-direction: column;
  justify-content: center;
  align-items: right;
  text-align: center;
  padding: 0; /* Ya tenemos padding en div2, o puedes ajustarlo aquí */
  background-color: transparent; /* No tiene fondo visible en la imagen original */
  border-radius: 0; /* No tiene bordes redondeados en sí mismo, la sección sí */
    padding-left: 12%;
}

/* Y los estilos para h2, p y a.btn-primary dentro de item-text-button deben ser los mismos: */
#grids .div2 .item-text-button h3 {
 
  color: #9d6a61;
  font-size: 3rem;
  margin-bottom: 0.5rem;
}
#grids .div2 .item-text-button p {
  font-size: 1.1rem;
  color: #333;
  margin-bottom: 1.5rem;
}
#grids .div2 .item-text-button .btn {
 
    background-color: #9d6a61;
  border-color: #9d6a61;
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 5px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}
#grids .div2 .item-text-button .btn:hover {
  background-color: #A3858A;
  border-color: #A3858A;
}

    

#grids .div3 {
    grid-column: span 8 / span 8;
    grid-row: span 2 / span 2;
    grid-column-start: 5;
    grid-row-start: 3;
    display: flex;
    flex-direction: row; 
  justify-content: flex-start;
    align-content: center;
    justify-items: center;
    align-items: center;
    
}
         

#grids .div4 {
    grid-column: span 8 / span 8;
    grid-row: span 2 / span 2;
    grid-column-start: 5;
    grid-row-start: 5;
    display: flex;
    flex-direction: row; 
  justify-content: flex-start;
  
}
         
         #testimonios {
  padding: 0; /* Espaciado superior e inferior para la sección */
             padding-bottom: 4rem;
             
  
}

#testimonios .intro-text {
  margin-bottom: 4rem; /* Espacio debajo del texto introductorio */
}

#testimonios .intro-text h2 {
 
  color: #9d6a61; /* Color similar al de la imagen */
  font-size: 4rem; /* Tamaño de fuente grande */
  margin-bottom: 0.5rem;
}

#testimonios .intro-text p {
  font-size: 1.4rem;
    font-weight: bolder;
  color: #9d6a61;
  line-height: 1.3;
  max-width: 600px; /* Limitar el ancho del párrafo para que no sea muy largo */
  margin-left: auto;
  margin-right: auto;
}

/* --- Estilos para la Tarjeta de Testimonio --- */
.testimonial-card {
  display: flex; /* Contenedor flex para imagen y contenido lado a lado */
  background-color: #fff; /* Fondo blanco de la tarjeta */
  border-radius: 15px; /* Bordes redondeados */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Sombra sutil */
  overflow: hidden; /* Asegura que la imagen no se desborde si tiene bordes redondeados */
  max-width: 900px; /* Ancho máximo de la tarjeta */
  margin: 0 auto 3rem auto; /* Centrar y añadir espacio abajo */
  padding: 0; /* Importante: no padding aquí, lo manejamos internamente */
  flex-direction: row; /* Por defecto ya es row, pero lo explico */
    color: #9d6a61;
}

.testimonial-image {
  flex: 0 0 45%; /* La imagen ocupa el 45% del ancho, no crece ni encoge */
  max-width: 900px; /* Opcional: si quieres que la imagen intente ocupar toda la altura del contenedor flex */
    height: auto;
  overflow: hidden; /* Asegura que la imagen con object-fit no se desborde */
}

.testimonial-image img {
  width: 100%;
  height: 100%; /* Hace que la imagen ocupe toda la altura del contenedor de imagen */
  object-fit: cover; /* Para que la imagen cubra el espacio sin distorsionarse, recortando si es necesario */
  display: block; /* Elimina espacio extra debajo de la imagen */
}

.testimonial-content {
  flex: 1; /* El contenido de texto ocupa el resto del espacio disponible */
  padding: 2.5rem 3.5rem; /* Espaciado interno generoso */
  display: flex; /* Para centrar y alinear el texto internamente */
  flex-direction: column;
  justify-content: center; /* Centra verticalmente el texto */
  align-items: flex-start; /* Alinea el texto a la izquierda */
  text-align: left; /* Asegura que el texto en sí esté alineado a la izquierda */
}

.testimonial-content h3 {
 
color: #9d6a61;

  margin-bottom: 0.25rem;
}

.testimonial-content .role {
  font-size: 0.9rem;
  color: #777;
  margin-bottom: 1.5rem;
}

.testimonial-content .quote {
  font-size: 1.15rem;
 color: #9d6a61;
  line-height: 1.7;
  font-style: italic; /* La cita es cursiva */
  margin-bottom: 1.5rem;
}

.testimonial-content .signature {
  font-size: 0.9rem;
  color: #777;
  align-self: flex-end; /* Alinea la firma a la derecha si es un flex-item de columna */
  margin-top: 1rem; /* Espacio desde la cita */
}

/* --- Estilos para los botones de Navegación --- */
.testimonial-navigation {
  display: flex; /* Contenedor flex para los botones */
  justify-content: center; /* Centrar los botones horizontalmente */
  gap: 1.5rem; /* Espacio entre los botones */
  margin-top: 2rem;
}

.btn-testimonial-nav {
  background-color: #9d6a61; /* Color del botón */
  border: none;
  color: white;
  width: 50px; /* Ancho fijo para botones redondos */
  height: 50px; /* Altura fija */
  border-radius: 50%; /* Hacerlos redondos */
  font-size: 1.5rem; /* Tamaño del icono */
  display: flex; /* Para centrar el icono dentro del botón */
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.btn-testimonial-nav:hover {
  background-color: #9d6a61; /* Color más oscuro al pasar el mouse */
  transform: translateY(-2px); /* Pequeño efecto de elevación */
}
         
         #contacto {
  padding: 8rem 0; /* Espaciado superior e inferior, ajustable */
  background-color: white; /* Fondo similar a la sección de testimonios */
    background-image: url(../images/back-form-1.png);
             background-repeat: no-repeat;
             background-position: top center;
             background-size: cover;
}

/* Reutilizar estilos de intro-text si ya están definidos para #testimonios .intro-text */
/* Si no, copia los estilos del título y párrafo aquí */
#contacto .intro-text {
    margin-bottom: 3rem; /* Ajuste de margen para esta sección */
}

#contacto .intro-text h2 {
  
    color: #9d6a61;
    font-size: 4rem;
    margin-bottom: 0.5rem;
}

#contacto .intro-text p {
    font-size: 1.4rem;
    font-weight: bolder;
   color: #9d6a61;
    line-height: 1.3;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* --- Estilos para el Formulario de Contacto --- */
.contact-form {
  max-width: 600px; /* Ancho máximo del formulario para que no se extienda demasiado */
  margin: 0 auto; /* Centrar el formulario */
  padding: 1rem; /* Espaciado interno si se desea */
  /* background-color: rgba(255, 255, 255, 0.8); Si quieres un fondo para el formulario */
  border-radius: 15px; /* Bordes redondeados para el área del formulario si tuviera fondo */
}

.form-group {
  display: flex; /* Para poner el icono y el input/textarea en línea */
  align-items: center; /* Centrar verticalmente el icono con el campo */
  background-color: #f8f0ef; /* Color de fondo de cada campo */
  border-radius: 10px; /* Bordes redondeados para cada campo */
  padding: 0.8rem 1.2rem; /* Espaciado interno de cada campo */
  margin-bottom: 1.5rem; /* Espacio entre campos */
  border: 1px solid rgba(0, 0, 0, 0.05); /* Borde muy sutil */
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05); /* Sombra interna sutil */
}

.form-group i {
  color: #A3858A; /* Color del icono */
  font-size: 1.3rem; /* Tamaño del icono */
  margin-right: 1rem; /* Espacio entre el icono y el texto del input */
}

.form-group input,
.form-group textarea {
  flex: 1; /* Hace que el input/textarea ocupe el resto del espacio disponible */
  border: none; /* Eliminar borde nativo */
  background-color: transparent; /* Fondo transparente para que el color del form-group se vea */
  padding: 0.5rem 0; /* Pequeño padding interno para el texto dentro del input */
  font-size: 1.1rem;
  color: #555;
  outline: none; /* Eliminar el contorno al enfocar */
  width: 100%; /* Para asegurarse de que ocupe el espacio */
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #999; /* Color del texto del placeholder */
  opacity: 1; /* Asegura que el placeholder sea visible en todos los navegadores */
}

.form-group input:focus,
.form-group textarea:focus {
  /* Opcional: Estilo al enfocar (puede ser un borde diferente o sombra) */
  /* box-shadow: 0 0 0 0.25rem rgba(163, 133, 138, 0.25); */
}

.textarea-group {
    /* Puedes ajustar la altura inicial si es necesario, o dejar que rows en HTML lo maneje */
}

/* Estilos para el botón de envío */
.btn-submit {
  display: block; /* Para que ocupe todo el ancho si queremos centrarlo con margin auto */
  width: 100%; /* Ocupa el 100% del ancho del formulario */
  max-width: 300px; /* Limitar el ancho si no quieres que sea tan grande como el formulario */
  margin: 2rem auto 0 auto; /* Centrar y darle margen superior */
   /* Mismo color que los botones de navegación */
    background-color: #9d6a61;
  border: none;
  color: white;
  padding: 1rem 2rem;
  border-radius: 5px;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.btn-submit:hover {
 background-color: #A3858A;
  transform: translateY(-2px);
}
         
         /* --- Estilos Generales del Footer --- */
#main-footer {
  background-color: #9d6a61; /* Color de fondo general del footer */
  color: white; /* Color de texto por defecto para el footer */
  font-family: sans-serif; /* Fuente general para el footer, ajusta si es necesario */
}

/* --- Parte Superior del Footer --- */
.footer-top {
  padding: 4rem 0; /* Espaciado interno superior e inferior */
  border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Línea divisoria sutil */
}

.footer-top .container {
  /* Si necesitas que el contenedor del footer sea más ancho o diferente al container general de Bootstrap */
  /* max-width: 1200px; */
}

.footer-content {
  display: flex; /* Para organizar logo, navegación y redes sociales en fila */
  flex-wrap: wrap; /* Permite que los elementos se envuelvan en pantallas pequeñas */
  justify-content: space-between; /* Distribuye el espacio entre los elementos */
  align-items: flex-start; /* Alinea los elementos al inicio (arriba) */
  gap: 2rem; /* Espacio entre las secciones del footer */
}

.footer-logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Alinea el logo y el tagline a la izquierda */
  flex-shrink: 0; /* No encoge el logo */
  margin-right: 2rem; /* Espacio a la derecha del logo */
}

.footer-logo img {
  max-width: 180px; /* Ancho máximo para tu imagen de logo */
  height: auto;
  margin-bottom: 0.5rem;
  filter: brightness(0) invert(1); /* Para hacer el logo blanco si es necesario */
}

.footer-logo .tagline {
  font-size: 0.9rem;
  opacity: 0.8;
  margin: 0;
}

.footer-nav {
  display: flex; /* Para organizar las columnas de navegación en fila */
  flex-grow: 1; /* Permite que la navegación ocupe espacio extra */
  flex-wrap: wrap; /* Permite que las columnas de navegación se envuelvan */
  justify-content: center; /* Centra las columnas de navegación horizontalmente */
  gap: 2rem; /* Espacio entre las columnas de navegación */
}

.footer-nav .nav-column {
  list-style: none; /* Eliminar los puntos de lista */
  padding: 0;
  margin: 0;
  text-align: left; /* Alinea los ítems dentro de cada columna a la izquierda */
}

.footer-nav .nav-column li {
  margin-bottom: 0.5rem; /* Espacio entre los elementos de la lista */
}

.footer-nav .nav-column li:last-child {
  margin-bottom: 0;
}

.footer-nav .nav-column a {
  color: white;
  text-decoration: none;
  font-size: 1rem;
  transition: opacity 0.3s ease;
}

.footer-nav .nav-column a:hover {
  opacity: 0.7; /* Efecto hover */
}

.footer-social {
  display: flex; /* Para los iconos de redes sociales en fila */
  align-items: center; /* Centra verticalmente los iconos */
  gap: 1rem; /* Espacio entre iconos */
  flex-shrink: 0; /* No encoge los iconos */
  margin-left: 2rem; /* Espacio a la izquierda de los iconos */
}

.footer-social a {
  color: white;
  font-size: 1.8rem; /* Tamaño de los iconos */
  transition: transform 0.3s ease, color 0.3s ease;
}

.footer-social a:hover {
  transform: translateY(-3px); /* Efecto de elevación */
  color: #f0e6e6; /* Ligero cambio de color al pasar el mouse */
}

/* --- Parte Inferior del Footer --- */
.footer-bottom {
  padding: 1.5rem 0;
  background-color: white; /* Color ligeramente más oscuro para la parte inferior */
  text-align: center;
  font-size: 0.9rem;
  opacity: 0.9;
    color: black;
}

.footer-bottom .copyright {
  margin: 0; /* Eliminar margen por defecto del párrafo */
  line-height: 1.5;
}

.footer-bottom .heart-icon {
  color: #f7a072; /* Color para el corazón */
  margin: 0 5px;
}


   #preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #D5B8BC; /* Un tono de azul, cámbialo por el que quieras */
  z-index: 10000;

  /* Centra el logo del preloader */
  display: flex;
  justify-content: center;
  align-items: flex-start; /* Alinea el logo en la parte superior */
}    
         
         @keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.testimonial-fade-in {
  animation: fadeIn 0.6s ease-in-out;
}
         
           #whatsapp-flotante {
    position: fixed;      /* Se queda fijo en la pantalla */
    bottom: 25px;         /* Distancia desde abajo */
    right: 25px;          /* Distancia desde la derecha */
    z-index: 1000;        /* Se asegura que esté por encima de otros elementos */
    transition: transform 0.3s ease; /* Para una animación suave */
  }

  #whatsapp-flotante:hover {
    transform: scale(1.1); /* Agranda un poco el ícono al pasar el mouse */
  }

  #whatsapp-flotante img {
    width: 10rem;          /* Ancho del ícono */
    height: auto;
  }
         
         /* --- Estilo del Menú Glassmorphism --- */

.glass-nav {
  /* Posicionamiento */
  position: fixed;
  Top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;

  /* Estilo de Cristal */
  background-color: rgba(157, 106, 97, 0.5); /* Fondo oscuro semitransparente */
  backdrop-filter: blur(15px); /* El efecto de desenfoque */
   border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50px; /* Esquinas muy redondeadas para forma de píldora */
  padding: 10px 20px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    
  
}
         
         /* 1. El estado inicial del elemento: invisible */
.elemento-oculto {
  opacity: 0;
  transition: opacity 2s ease-in-out; /* La animación durará 2 segundos */
}

/* 2. La clase que lo hace visible */
.elemento-oculto.aparecer {
  opacity: 1;
}

         #nav-menu-main {
  /* Define que la animación de opacidad durará 0.4 segundos */
  transition: opacity 1s ease-in-out;
}
         
.nav-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 15px; /* Espacio entre cada ítem del menú */
}

.nav-item a {
  display: flex;
  flex-direction: column; /* Pone el ícono arriba y el texto abajo */
  align-items: center;
  text-decoration: none;
  color: #f0f0f0; /* Color del texto e ícono */
  padding: 5px 5px;
  transition: all 0.3s ease; /* Transición suave para el hover */
}

.nav-item {
  font-size: 15px; /* Tamaño del ícono */
  margin-bottom: 4px; /* Espacio entre el ícono y el texto */
}
         

.nav-item a span {
  font-size: 0.7rem; /* Tamaño del texto */
  font-weight: 500;
}

/* Efecto al pasar el mouse */
.nav-item a:hover {
  color: #ffffff;
  transform: translateY(-5px); /* El ítem se eleva un poco */
}
         
         .hamburger-btn {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1001; /* Debe estar por encima del menú cuando está cerrado */
  background-color: rgba(157, 106, 97, 0.7); /* Tu color con transparencia */
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-size: 1.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
         
          /* Ocultamos el botón de hamburguesa */
  .hamburger-btn {
    display: none;
  }
         
         .glass-nav{
             display: block;
         }
         
/* --- Estilos para un Modal de Galería Minimalista (Versión Corregida) --- */

/* 1. Anulamos el fondo y borde de TODAS las secciones internas del modal */
.modal-galeria .modal-content,
.modal-galeria .modal-header,
.modal-galeria .modal-footer {
  background-color: transparent;
  border: none;
  box-shadow: none;
}

/* 2. Eliminamos cualquier padding alrededor del carrusel */
.modal-galeria .modal-body {
  padding: 0;
}

/* 3. Estilos para el nuevo botón de cerrar (se queda igual) */
.modal-galeria .btn-close-custom {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  padding: 0.5em;
}
         
/* --- Media Queries para Responsividad --- */
@media (max-width: 992px) {
  #testimonios .intro-text h2 {
    font-size: 3rem;
  }
  .testimonial-card {
    flex-direction: column; /* Apila imagen y contenido en pantallas más pequeñas */
    max-width: 600px; /* Ajusta el ancho de la tarjeta */
  }
  .testimonial-image {
    flex: 0 0 auto; /* Permite que la imagen se ajuste automáticamente */
    width: 100%;
    height: 300px; /* Altura fija para la imagen en móvil */
  }
  .testimonial-image img {
    height: 100%;
    object-fit: contain;
  }
  .testimonial-content {
    padding: 2rem;
    align-items: center; /* Centrar el texto en móviles si es preferible */
    text-align: center;
  }
  .testimonial-content .signature {
    align-self: center; /* Centrar la firma también */
  }
    
     .footer-content {
    flex-direction: column; /* Apila logo, nav, social en columna */
    align-items: center; /* Centra los elementos apilados */
    text-align: center;
  }
  .footer-logo {
    margin-right: 0;
    margin-bottom: 2rem;
    align-items: center; /* Centra el logo y tagline */
  }
  .footer-nav {
    margin-bottom: 2rem;
    flex-direction: row; /* Mantén las columnas de navegación en fila */
    justify-content: center; /* Centra las columnas de navegación */
  }
  .footer-nav .nav-column {
    text-align: center; /* Centra el texto dentro de cada columna */
  }
  .footer-social {
    margin-left: 0;
    margin-bottom: 2rem;
  }
}

  
         
         /* Responsive */
         
         @media (max-width: 1118px) {
             
                #mision #flores_top,  #mision #flores_top_dos{
        display: none;
    }
             
                     #mision .col-12{
             padding-left: 0px;
                    margin-left: 0px;
                         
         }
             
             
         }
         
@media (max-width: 768px) {
    
              /* Ocultamos el botón de hamburguesa */
  .hamburger-btn {
    display: block;
  }
    
       .glass-nav{
             display: none;
         }
             .carousel-indicators {
    bottom: 1rem; /* Ajusta este valor según cuánto quieras subirlos */
}
    
       .carousel-item img {
     width: 100dvw;
        aspect-ratio: 4 / 4;
    }
    
      .logo_carrusel{
             
             max-width: 14rem;
         }
    
         .expertos{
            margin-top: -3rem;
             padding-bottom: 3rem;
         }
    
    #masinfo .intro-text {
  margin-bottom: 2rem; /* Espacio debajo del título y subtítulo antes de las tarjetas */
}
    
    #mision{
             margin: 7rem 0 9rem 0;
          
            
         }
    
    .about-container {
      flex-direction: column; /* esta línea es la clave */
         max-width: 80vw;
}
    
.about-text {
    max-width: 80vw; 
}

.about-text p{
    font-size: .9rem;
    line-height: 1.2rem;
}

    .about-image {
    margin-left: 0px; /* Superposición */
}

.about-image img {
    width: 70vw; /* Ajusta el tamaño */
}
    
     #grids .parent {
    display: block; /* Oculta el Grid principal en móvil, los elementos se apilarán normalmente */
    /* Alternativamente, puedes usar display: none; en div1, div3, div4 si solo quieres mostrar div2 */
  }

  #grids .div1,
  #grids .div3,
  #grids .div4 {
    display: none; /* Oculta div1, div3, y div4 completamente en móvil */
    /* Esto es lo que haría que solo div2 se vea. */
  }

  #grids .div2 {
    /* Desactivar el posicionamiento Grid del padre si queremos que div2 ocupe todo el ancho */
    grid-column: auto; /* Restablecer la columna para que no esté fija en el grid padre */
    grid-row: auto;    /* Restablecer la fila */
    grid-column-start: auto; /* Restablecer el inicio de columna */

    /* Centrar el div2 dentro de su nuevo flujo normal (col-12) */
    margin-left: auto;
    margin-right: auto;
    width: 100%; /* Asegúrate de que ocupe todo el ancho disponible */
    max-width: 500px; /* Un max-width para que no sea demasiado ancho en pantallas grandes móviles */

    /* Ajustes para el contenido interno de div2 en móvil */
    display: flex; /* Sigue siendo flex, pero cambiaremos la dirección */
    flex-direction: column; /* Apila la imagen y el texto */
    align-items: center; /* Centra horizontalmente los elementos apilados */
    justify-content: center; /* Centra verticalmente los elementos apilados */
    text-align: center; /* Centra el texto */
    padding: 20px; /* Ajusta el padding interno */
    gap: 20px; /* Espacio entre la imagen y el texto cuando están apilados */

    /* Eliminar el grid interno de div2 si queremos que se apilen fácilmente */
    /* Opcional: Si quieres que el item-top-center y item-text-button se comporten como bloques normales en móvil,
       puedes cambiar display:grid a display:flex o display:block para div2 en la media query y ajustar sus hijos.
       Pero para apilar, display:flex con flex-direction:column es lo más sencillo. */
    grid-template-columns: none; /* Desactiva las columnas de grid internas */
    grid-template-rows: auto; /* Permite que las filas se ajusten automáticamente */
  }

  #grids .div2 .item-top-center {
    width: 100%; /* La imagen ocupa el 100% del ancho disponible */
    height: 250px; /* Altura fija para la imagen en móvil, ajusta según necesidad */
    /* flex: none; o flex: 0 0 auto; para que no tenga una base de porcentaje */
  }

  #grids .div2 .item-text-button {
    width: 100%; /* El texto ocupa el 100% del ancho */
    padding-left: 0; /* Elimina el padding-left si ahora está centrado */
    align-items: center; /* Centra el contenido internamente */
    text-align: center;
    /* flex: none; o flex: 0 0 auto; */
  }

  #grids .div2 .item-text-button h2 {
    font-size: 2rem; /* Ajusta el tamaño del título */
  }
  #grids .div2 .item-text-button p {
    font-size: 1rem; /* Ajusta el tamaño del párrafo */
  }
  #grids .div2 .item-text-button .btn {
    padding: 0.6rem 1.2rem; /* Ajusta el padding del botón */
    font-size: 1rem;
  } 
    

            .expertos #productosMobil{
    display: block;
                
                padding-top: 5rem;
}
    .expertos #productos{
        display: none;
    }
    
      #contacto {
  padding: 2rem 0; 
}

    
        #contacto .intro-text h2 {
        font-size: 4rem;
    }
    #contacto .intro-text p {
        font-size: 1.1rem;
    }
    .contact-form {
        padding: 1rem;
        max-width: 90%; /* Ajustar el ancho en móviles */
    }
    .form-group {
        padding: 0.6rem 1rem;
        margin-bottom: 1rem;
    }
    .form-group i {
        font-size: 1.1rem;
        margin-right: 0.8rem;
    }
    .form-group input,
    .form-group textarea {
        font-size: 1rem;
    }
    .btn-submit {
        padding: 0.8rem 1.5rem;
        font-size: 1.1rem;
        max-width: 250px;
    }
    
     .footer-nav {
        flex-direction: column; /* Apila las columnas de navegación */
    }
    .footer-nav .nav-column {
        margin-bottom: 1rem;
    }
    
         }
         
         @media (max-width: 576px) {
  #testimonios {
    padding: 4rem 0;
  }
  #testimonios .intro-text h2 {
    font-size: 2.5rem;
  }
  #testimonios .intro-text p {
    font-size: 1rem;
    padding: 0 1rem; /* Pequeño padding lateral */
  }
  .testimonial-content {
    padding: 1.5rem;
  }
             
  .testimonial-content h3 {
    font-size: 1.8rem;
  }
  .testimonial-content .quote {
    font-size: 1rem;
  }
  .btn-testimonial-nav {
    width: 45px;
    height: 45px;
    font-size: 1.3rem;
  }
               .footer-top {
    padding: 3rem 0;
  }
             
  .footer-logo img {
    max-width: 150px;
  }
  .footer-nav .nav-column li {
    font-size: 0.9rem;
  }
  .footer-social a {
    font-size: 1.5rem;
  }
  .footer-bottom {
    padding: 1rem 0;
    font-size: 0.8rem;
  }
}
    
    

/* --- NUEVO CSS para Responsividad (para menos de 768px) --- */
@media (max-width: 767.98px) {
  #grids .parent {
    display: block; /* Oculta el Grid principal en móvil, los elementos se apilarán normalmente */
    /* Alternativamente, puedes usar display: none; en div1, div3, div4 si solo quieres mostrar div2 */
  }

  #grids .div1,
  #grids .div3,
  #grids .div4 {
    display: none; /* Oculta div1, div3, y div4 completamente en móvil */
    /* Esto es lo que haría que solo div2 se vea. */
  }

  #grids .div2 {
    /* Desactivar el posicionamiento Grid del padre si queremos que div2 ocupe todo el ancho */
    grid-column: auto; /* Restablecer la columna para que no esté fija en el grid padre */
    grid-row: auto;    /* Restablecer la fila */
    grid-column-start: auto; /* Restablecer el inicio de columna */

    /* Centrar el div2 dentro de su nuevo flujo normal (col-12) */
    margin-left: auto;
    margin-right: auto;
    width: 100%; /* Asegúrate de que ocupe todo el ancho disponible */
    max-width: 500px; /* Un max-width para que no sea demasiado ancho en pantallas grandes móviles */

    /* Ajustes para el contenido interno de div2 en móvil */
    display: flex; /* Sigue siendo flex, pero cambiaremos la dirección */
    flex-direction: column; /* Apila la imagen y el texto */
    align-items: center; /* Centra horizontalmente los elementos apilados */
    justify-content: center; /* Centra verticalmente los elementos apilados */
    text-align: center; /* Centra el texto */
    padding: 20px; /* Ajusta el padding interno */
    gap: 20px; /* Espacio entre la imagen y el texto cuando están apilados */

    /* Eliminar el grid interno de div2 si queremos que se apilen fácilmente */
    /* Opcional: Si quieres que el item-top-center y item-text-button se comporten como bloques normales en móvil,
       puedes cambiar display:grid a display:flex o display:block para div2 en la media query y ajustar sus hijos.
       Pero para apilar, display:flex con flex-direction:column es lo más sencillo. */
    grid-template-columns: none; /* Desactiva las columnas de grid internas */
    grid-template-rows: auto; /* Permite que las filas se ajusten automáticamente */
  }

  #grids .div2 .item-top-center {
    width: 100%; /* La imagen ocupa el 100% del ancho disponible */
    height: 250px; /* Altura fija para la imagen en móvil, ajusta según necesidad */
    /* flex: none; o flex: 0 0 auto; para que no tenga una base de porcentaje */
  }

  #grids .div2 .item-text-button {
    width: 100%; /* El texto ocupa el 100% del ancho */
    padding-left: 0; /* Elimina el padding-left si ahora está centrado */
    align-items: center; /* Centra el contenido internamente */
    text-align: center;
    /* flex: none; o flex: 0 0 auto; */
  }

  #grids .div2 .item-text-button h2 {
    font-size: 2rem; /* Ajusta el tamaño del título */
  }
  #grids .div2 .item-text-button p {
    font-size: 1rem; /* Ajusta el tamaño del párrafo */
  }
  #grids .div2 .item-text-button .btn {
    padding: 0.6rem 1.2rem; /* Ajusta el padding del botón */
    font-size: 1rem;
  }
    

  #whatsapp-flotante img {
    width: 7rem;          /* Ancho del ícono */
    height: auto;
      
  }
            #whatsapp-flotante {
    position: fixed;      /* Se queda fijo en la pantalla */
    bottom: 45px;         /* Distancia desde abajo */
    right: 5px;          /* Distancia desde la derecha */
    z-index: 1000;        /* Se asegura que esté por encima de otros elementos */
    transition: transform 0.3s ease; /* Para una animación suave */
  }
}