.navbar-nav .nav-item .nav-link {
    margin-bottom: 0; /* Elimina cualquier margen inferior */
    padding-bottom: 0; /* Reduce el espacio interno inferior */
    margin-top: 0;
    padding-top: 0;
}

.navbar {
    margin-bottom: 0; /* Elimina el margen inferior del contenedor del menú */
    padding-bottom: 0; /* Reduce el espacio interno inferior del contenedor */
    margin-top: 0;
    padding-top: 0;
    position: sticky; /* Fija el menú en la parte superior */
    top: 50px; /* Asegura que esté pegado al borde superior */
    z-index: 1030 !important;
    width: 100%; /* Asegura que ocupe todo el ancho de la página */
    
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 

}

.text-light{
padding-top: 9px;
position: sticky; /* Fija el menú en la parte superior */
    top: 0; /* Asegura que esté pegado al borde superior */
    width: 100%; /* Asegura que ocupe todo el ancho de la página */
    z-index: 1030; 

}
   
#templatemo_nav_top {
    display: flex !important; 
    position: sticky; /* Fija el menú superior */
    top: 0; /* Asegura que esté pegado al borde superior */
    z-index: 900; /* Menor prioridad que el menú principal */
    background-color:  #0d1b2a   !important; ; /* Asegura que tenga un fondo visible */
    width: 100%; /* Ocupa todo el ancho */
    padding: 5px 0; /* Reduce el espacio interno del menú */
    margin-bottom: 0px;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    justify-content: flex-end;
     
}

#templatemo_nav_top.hidden {
    opacity: 0;
    visibility: hidden;
}






.navbar-nav .nav-item .nav-link {
    margin-bottom: 0; /* Elimina cualquier margen inferior */
    padding-bottom: 0; /* Reduce el espacio interno inferior */
    margin-top: 0;
    padding-top: 0;
    color: #fff !important; 
}

.text-light{
    padding-top: 9px;
    position: sticky; /* Fija el menú en la parte superior */
    top: 0; /* Asegura que esté pegado al borde superior */
    width: 100%; /* Asegura que ocupe todo el ancho de la página */
    z-index: 1030;
}


#templatemo_nav_top a {
    font-size: 2.9rem; /* Aumenta el tamaño de los íconos */
    margin-right: 15px; /* Espaciado entre los íconos */
    line-height: 1; /* Ajusta la alineación vertical */
    color: #fff;
    
    /* Asegura que el color sea visible */
}

/* Efecto hover para el ícono de Facebook en el menú superior */
#templatemo_nav_top a:nth-child(1):hover {
    color: #1877F2 !important; /* Azul de Facebook */
    transition: color 0.3s ease-in-out;
}

#templatemo_nav_top a:nth-child(2) {
    font-size: 2.5rem !important; /* Cambia el tamaño del ícono */
    margin-right: 20px; /* Ajusta el espacio entre los íconos */
    line-height: 1; /* Centra el ícono verticalmente */
}


/* Efecto hover para el ícono de Instagram en el menú superior */
#templatemo_nav_top a:nth-child(2):hover {
    color: #C13584 !important; /* Morado de Instagram */
    transition: color 0.3s ease-in-out;
}


#templatemo_nav_top .w-100 {
    display: flex;
    align-items: center; /* Centra verticalmente los íconos */
    justify-content: flex-end; /* Alinea los íconos a la derecha */
    position: relative;
    top: -4px; /* Mueve los íconos hacia arriba */

    font-size: 2.7rem !important; /* Aumenta el tamaño de los íconos y usa !important si es necesario */
    margin-right: 15px; /* Espaciado entre los íconos */
    line-height: 1; /* Ajusta la alineación vertical */
    color: #fff; 


}


#tempaltemo_footer {
    position: relative; /* Asegura que el footer tenga un contexto de apilamiento */
    z-index: 2000; /* Asegura que el footer esté por encima del menú */
    background-color: #343a40; /* Fondo del footer */
}

/* Oculta el menú de los íconos en pantallas pequeñas */
#templatemo_nav_top {
    display: none;
}



/* Ajusta el menú principal en pantallas pequeñas */


/* Ajusta el menú principal en pantallas medianas y grandes */
@media (min-width: 577px) {
    .navbar {
        top: 50ppx; /* Ajusta este valor para que quede debajo del menú de los íconos */
    }
}

@media (max-width: 768px) {
    #templatemo_nav_top {
        display: flex !important; /* Asegura que el menú de íconos sea visible */
        position: sticky; /* Mantiene el menú fijo en la parte superior */
        top: 0;
        z-index: 1030;
        background-color: #343a40;
    } 

    .navbar {
        top: 50px; /* Mantén el menú principal debajo del menú de íconos */
    }
}

@media (max-width: 768px) {
    #templatemo_nav_top {
        display: none  !important; /* Oculta el menú de íconos en resoluciones pequeñas */
    }

    .navbar {
        top: 0 !important ; /* Sube el menú principal para ocupar el espacio */
    }
}

/* Estilo para el enlace activo del menú */
.navbar-nav .nav-item .nav-link.active {
    color: #fff !important; /* Cambia el color del texto a blanco */
    background-color: #062e10 !important; /* Color verde más intenso */
    border-radius: 5px; /* Opcional: redondea las esquinas */
    padding: 5px 10px; /* Opcional: agrega un poco de espacio interno */
}


/* ...existing code... */

/* Asegura que el enlace activo sea visible en todos los fondos */
.nav-link.active,
.navbar-nav .nav-item .nav-link.active {
     
    background-color: #e6e6e6 !important; /* Opcional: fondo claro para resaltar */
    border-radius: 5px;
}




/* Cuando el menú tiene la clase .scrolled, los enlaces son blancos */
.navanimation.scrolled .nav-link,
.navanimation.scrolled .navbar-nav .nav-item .nav-link {
    color: #fff !important;
    transition: color 0.3s;
}

/* El enlace activo también es blanco */
.navanimation.scrolled .nav-link.active,
.navanimation.scrolled .navbar-nav .nav-item .nav-link.active {
    color: #fff !important;
  /* O el color que prefieras para resaltar */
    border-radius: 5px;
}




/* Menú de redes sociales en shop-single.html */
.shop-single-page #templatemo_nav_top {
    position: sticky !important; /* Fija el menú al hacer scroll */
    top: 0px !important; /* Siempre en la parte superior */
    z-index: 1020 !important; /* Asegura que esté debajo del menú principal */
    background-color: #0d1b2a !important; /* Fondo oscuro */
    width: 100% !important;
    padding: 9.4px 0 !important;
     color: #fff !important; 
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; /* Línea opcional para consistencia */
}
/* Menú de navegación principal en shop-single.html */
.shop-single-page .navbar {
    position: sticky !important; /* Fija el menú al hacer scroll */
    top: 0px !important; /* Debajo del menú de redes sociales */
    z-index: 1040 !important; /* Asegura que esté encima del menú de redes sociales */
    background-color: #fff !important; /* Fondo blanco */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important; /* Sombra opcional */
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 768px) {
    .shop-single-page #templatemo_nav_top {
        display: none !important; /* Oculta el menú de redes sociales */
    }

    .shop-single-page .navbar {
        top: 0 !important; /* Asegura que el menú principal ocupe el espacio */
    }
}
.shop-single-page #templatemo_nav_top a {
   /* Ajusta el tamaño de los íconos */
     /* Ajusta el espaciado entre los íconos */
    line-height: 1; /* Asegura la alineación vertical */
}

footer .h2 {
    position: static !important; /* Asegura que el título no sea sticky ni fixed */
}
/* Estilo inicial del menú de navegación */
#templatemo_main_nav {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%; /* Asegura que el menú abarque todo el ancho */
    background-color: transparent; /* Fondo inicial transparente */
    transition: background-color 0.3s ease-in-out;
    padding: 0; /* Elimina cualquier padding que pueda limitar el tamaño */
    margin: 0; /* Elimina márgenes */
}

/* Clase que se aplica al hacer scroll */
#templatemo_main_nav.scrolled {
    background-color: #061568 !important; /* Mismo color que el menú de redes sociales */
    color: #fff; /* Cambia el color del texto si es necesario */
}

/* Asegúrate de que los elementos internos no sobrescriban el fondo */
#templatemo_main_nav .navbar {
    background-color: inherit; /* Hereda el color del contenedor principal */
    box-shadow: none; /* Elimina sombras si es necesario */
}

/* Estilo inicial del menú de navegación */
.navanimation {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%; /* Asegura que abarque todo el ancho */
    background-color: transparent; /* Fondo inicial transparente */
    transition: background-color 0.3s ease-in-out;
    padding: 0; /* Elimina cualquier padding que pueda limitar el tamaño */
    margin: 0; /* Elimina márgenes */
}

/* Clase que se aplica al hacer scroll */
.navanimation.scrolled {
    background-color: #212934; /* Mismo color que el menú de redes sociales */
    color: #fff; /* Cambia el color del texto si es necesario */
}

/* Asegúrate de que los elementos internos no sobrescriban el fondo */
.navanimation .navbar-brand,
.navanimation .nav-link {
    background-color: inherit; /* Hereda el color del contenedor principal */
}
    
/* ...existing code... */

/* ...existing code... */
/* Clase que se aplica al hacer scroll */
.navanimation.scrolled {
    background-color: #212934 !important; /* Fondo oscuro */
    color: #fff !important; /* Cambia el color del texto a blanco */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra opcional */
}

.navanimation.scrolled .nav-link {
   
    color: #ffffff !important; 
    transition: color 0.3s ease-in-out;               /* Cambia el color de los enlaces a blanco */
}


/* Estilo para los íconos de redes sociales en el footer */
/* Hover effect for Facebook */
#tempaltemo_footer ul.footer-icons li:nth-child(1):hover {
    background-color: #1877F2; /* Azul de Facebook */
    transition: .5s;
  }
  #tempaltemo_footer ul.footer-icons li:nth-child(1):hover i {
    color: #FFFFFF; /* Blanco */
    transition: .5s;
  }
  
  /* Hover effect for Instagram */
  #tempaltemo_footer ul.footer-icons li:nth-child(2):hover {
    background-color: #C13584; /* Morado de Instagram */
    transition: .5s;
  }
  #tempaltemo_footer ul.footer-icons li:nth-child(2):hover i {
    color: #FFFFFF; /* Blanco */
    transition: .5s;
  }

  #tempaltemo_footer ul.footer-icons li:nth-child(1) i {
    font-size: 2rem !important; /* Aumenta el tamaño del ícono y usa !important */
}
#tempaltemo_footer ul.footer-icons li:nth-child(2) i {
    font-size: 2.2rem !important; /* Aumenta el tamaño del ícono y usa !important */
}

  #tempaltemo_footer ul.footer-icons li:nth-child(1) {
    width: 60px; /* Aumenta el ancho del botón */
    height: 60px; /* Aumenta la altura del botón */
    line-height: 60px; /* Centra el ícono verticalmente */
     /* Aumenta el tamaño del ícono */
}

#tempaltemo_footer ul.footer-icons li:nth-child(2) {
    width: 60px; /* Aumenta el ancho del botón */
    height: 60px; /* Aumenta la altura del botón */
    line-height: 60px; /* Centra el ícono verticalmente */
     /* Aumenta el tamaño del ícono */
}


.nav-link.active {
   color: #000;  /* Cambia el color del texto a verde */
    background-color: transparent !important; /* Asegúrate de que no haya fondo */
    border: none !important; /* Elimina cualquier borde */
    box-shadow: none !important; /* Elimina cualquier sombra */
    font-weight: normal; /* Ajusta el peso del texto si es necesario */
    text-decoration: none;
}


.nav-link:hover,
.nav-link:focus,
.nav-link:active {
    background-color: transparent !important; /* Elimina cualquier fondo */
    border: none !important; /* Elimina cualquier borde */
    box-shadow: none !important; /* Elimina cualquier sombra */
    color: inherit !important; /* Mantén el color actual */
}


.navbar-nav .nav-item .nav-link.active {
     /* Asegúrate de que el color verde se aplique */
    background-color: transparent !important; /* Elimina cualquier fondo */
    border: none !important; /* Elimina cualquier borde */
}

.nav-link {
    color: #000;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
}
#templatemo_nav_top {
    height: 30px !important; /* Reduce la altura de la barra */
    padding: 5px 0 !important; /* Ajusta el espacio interno superior e inferior */
    line-height: 30px !important; /* Centra verticalmente los íconos */
}




/* Asegúrate de que hover funcione incluso si el enlace tiene la clase active */
.nav-link.active:hover {
    color: #11019c !important; /* Aplica el color de hover al enlace activo */
     /* Opcional: subrayado */
}

/* Ajusta los labels para alinearlos con los placeholders */
form label {
    display: block; /* Asegura que los labels estén en bloque */
    margin-bottom: 5px; /* Espaciado entre el label y el input */
    font-size: 1rem; /* Ajusta el tamaño del texto si es necesario */
    color: #333; /* Color del texto */
    padding-left: 12px; 
   /* Ajusta el padding para alinearlo con el input */
}
/* Ajusta los inputs para que coincidan con los labels */
form input,
form textarea {
    padding: 10px; /* Asegúrate de que el padding sea consistente */
    font-size: 1rem; /* Tamaño del texto */
}

/* Estilo específico para el formulario de login */
#login-form label {
    padding-left: 10px;
}

#login-form input,
#login-form textarea {
    padding: 10px;
}
/* Ajusta el tamaño y centra el input de Phone Number */
#login-form input#phone,
form input#phone {
    width: 50%; /* Ajusta el ancho al mismo tamaño que el input de Name */
    margin: 0 auto; /* Centra el input horizontalmente */
    display: block; /* Asegura que el input sea un bloque para que el margen funcione */
}

/* Estilo para centrar y dar fondo al formulario de login */

#login-form {
    background-color: #0d1b2a !important;
    width: 60% !important;
    margin: 50px auto !important;
    padding: 20px !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Cambia el color del borde de los inputs al hacer clic o enfocarlos */
/* Cambia el color del borde de los inputs al hacer clic o enfocarlos */

/* Ajusta el tamaño y alinea el input de Phone Number con los demás */
#login-form input#phone,
form input#phone {
    width: 100%; /* Ajusta el ancho al mismo tamaño que los demás inputs */
    margin: 0; /* Elimina el centrado automático */
    display: block; /* Asegura que el input sea un bloque */
    padding: 10px; /* Asegura un padding consistente */
    box-sizing: border-box; /* Asegura que el padding no afecte el ancho */
}

#tempaltemo_footer {
    padding: 5px 0; /* Reduce aún más el padding superior e inferior */
    background-color: #343a40; /* Fondo del footer */
    font-size: 0.8rem; /* Reduce el tamaño del texto */
}

#tempaltemo_footer .row {
    margin-bottom: 3px; /* Reduce el espacio entre filas */
}

#tempaltemo_footer ul.footer-link-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

#tempaltemo_footer ul.footer-link-list li {
    margin-bottom: 2px; /* Reduce el espacio entre los elementos de la lista */
}

#tempaltemo_footer .h2 {
    font-size: 1rem; /* Reduce aún más el tamaño del texto del título */
    margin-bottom: 3px; /* Reduce el espacio inferior del título */
}

#tempaltemo_footer ul.footer-icons li {
    width: 25px; /* Reduce el tamaño de los íconos */
    height: 25px;
    line-height: 25px;
    margin-right: 2px; /* Reduce el espacio entre los íconos */
}

#tempaltemo_footer ul.footer-icons li i {
    font-size: 1rem; /* Reduce el tamaño de los íconos */
}

#tempaltemo_footer .w-100.my-3 {
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Línea divisoria más delgada */
    margin: 3px 0; /* Reduce el espacio alrededor de la línea */
}

#tempaltemo_footer .py-3 {
    padding: 3px 0; /* Reduce aún más el padding del footer inferior */
}


/* Asegúrate de que los estilos sean consistentes para todos los botones */
/* Asegura que el tamaño sea igual al de los demás botones */
/* Asegura que el tamaño del botón de WhatsApp sea igual al de los demás */
#tempaltemo_footer ul.footer-icons li.whatsapp-icon {
    width: 3.3em; /* Igual que los demás botones */
    height: 3.3em; /* Igual que los demás botones */
    line-height: 3.5em; /* Centra el ícono verticalmente */
    border: 1px solid #dee8f8; /* Asegura que el contorno sea igual */
}

/* Ajusta el tamaño del ícono de WhatsApp */
#tempaltemo_footer ul.footer-icons li.whatsapp-icon i {
    font-size: 2.4rem; /* Igual que los demás íconos */
}

/* Cambia el color solo para el botón de WhatsApp al pasar el mouse */
#tempaltemo_footer ul.footer-icons li.whatsapp-icon:hover {
    background-color: #28a745; /* Verde para WhatsApp */
    transition: 0.5s;
}

#tempaltemo_footer ul.footer-icons li.whatsapp-icon:hover i {
    color: #fff; /* Ícono blanco al pasar el mouse */
    transition: 0.5s;
}


/* Efecto hover para el ícono de WhatsApp en el menú superior */
#templatemo_nav_top a.nav-whatsapp-icon:hover {
    color: #28a745 !important; /* Verde para WhatsApp */
    transition: color 0.3s ease-in-out; /* Transición suave */
}

#templatemo_nav_top a.nav-whatsapp-icon {
    font-size: 2.5rem !important;   ; /* Aumenta el tamaño del ícono */
    margin-right: 20px; /* Ajusta el espacio entre los íconos */
    line-height: 1; /* Centra el ícono verticalmente */
}
@media (max-width: 1000px) {
    #templatemo_nav_top {
        /* Asegura que los íconos estén alineados horizontalmente */
        align-items: center; /* Centra los íconos verticalmente */
        justify-content: center; /* Centra los íconos horizontalmente */
        height: 50px !important; /* Ajusta la altura del contenedor */
        padding: 0 !important; /* Elimina cualquier padding adicional */
        background-color: #0d1b2a; /* Fondo consistente */
    }

    #templatemo_nav_top a {
        margin: 0 !important; /* Elimina márgenes adicionales */
        padding: 0 !important; /* Elimina padding adicional */
        line-height: normal !important; /* Resetea el line-height */
        transform: none !important; /* Elimina cualquier desplazamiento vertical */
        font-size: 2.5rem; /* Mantén el tamaño de los íconos */
        align-items: center; /* Centra los íconos verticalmente */
    }
}

.titlered{
   position: relative !important;
    font-size: 1.4rem !important; 
   padding-bottom: 15px !important; 
   padding-left: 26px  !important;
   
     
}

.about-link{

    text-decoration: none;
    color: black;
}



#backToTop  {
    position: fixed; /* Fija el botón en la pantalla */
    bottom: 20px; /* Ajusta la distancia desde la parte inferior */
    right: 20px; /* Ajusta la distancia desde la parte derecha */
    width: 60px;
    height: 60px;
    border-radius: 50%; /* Hace el botón circular */
    background-color:  #0228a1;  /* Color verde */
    color: white; /* Color del ícono */
    font-size: 2.5rem; /* Tamaño del ícono */
    display: flex; /* Centra el contenido */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra */
    cursor: pointer; /* Cambia el cursor al pasar el mouse */
    z-index: 20000; /* Asegura que esté por encima de otros elementos */
    border: none; /* Elimina el borde */
   padding: 0;
   margin: 0;
   }

.backToTop i {
    position: relative; /* Asegura que el ícono pueda ser ajustado */
    top: -4px; /* Mueve el ícono ligeramente hacia arriba */
}


.backToTop:hover{
    background-color: #14035c; /* Color verde más oscuro al pasar el mouse */
}
.bg-success {
    padding-top: 20px; /* Reduce el espacio superior */
    padding-bottom: 20px; /* Reduce el espacio inferior */
}
@media (max-width: 1250px ) {
    #backToTop {
       display: none !important;
        /* Ajusta el tamaño del ícono */
    }
}

 
 .text-success{

    color: #FFFFFF !important; /* Asegura que el color del texto sea blanco */
 }

  

.templatemo-accordion a[data-categoria] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 6px;
    transition: background 0.2s, color 0.2s;
}






  
/* Cambia el color del título y precio al pasar el mouse por la tarjeta del producto */
.card:hover .h2.text-dark,
.card:hover .text-muted {
    color: #fff !important;
    transition: color 0.3s;
}


.presio-index{

    text-align: center !important; /* Centra el texto */
}


/* Hace que Valverde Rep.Dom. se muestre en una nueva línea en pantallas medianas o más grandes */
@media (min-width: 768px) {
  .valverde{
    display: block;
    margin-left: 25px; /* Ajusta el margen si quieres que quede alineado */
  }
}
/* Para celulares pequeños: Esperanza y Valverde debajo de la dirección y alineados a la izquierda */
/* Para celulares pequeños: Esperanza y Valverde debajo de la dirección y alineados a la izquierda */
@media (max-width: 450px) {
  .footer-direccion .esperanza,
  .footer-direccion .valverde {
    display: inline;
    margin-left: 25px !important;
    text-align: left;
  margin-right: 0px !important;



  }

  .valverde{

margin-left: 20px !important; /* Ajusta el margen si quieres que quede alineado */
  }
}





@media (max-width: 450px) {
  
  .valverde{

    position: relative !important;
    left: -19px !important; /* Ajusta el margen si quieres que quede alineado */

  }
}




@media (max-width: 600px) and (min-width: 500px) {
  .valverde {
    display: block !important;
    margin-left: 26px !important;
 
  }
  .repdom {
    display: inline !important;
    
  }
}


/* Para pantallas de 1024px de ancho: Esperanza y Valverde Rep.Dom. juntos debajo de la dirección */
@media (min-width: 1024px) and (max-width: 1100px) {
  .footer-direccion .esperanza,
  .footer-direccion .valverde {
    display: inline;
    margin-left: 27px !important;
    margin-right: 0 !important;
    position: static !important;
    left: 0 !important;
    top: 0 !important;
    vertical-align: baseline !important;
  }
  .footer-direccion .valverde {
    margin-left: 5px !important; /* Espacio pequeño entre Esperanza y Valverde */
  }
}


/* Para pantallas de 1024px de ancho: Esperanza y Valverde Rep.Dom. juntos debajo de la dirección */
/* Para pantallas de 1280px de ancho: Esperanza y Valverde Rep.Dom. juntos debajo de la dirección */
@media (min-width: 1280px) and (max-width: 1366px) {
  .footer-direccion .esperanza,
  .footer-direccion .valverde {
    display: inline !important;
    margin-left: 27px !important;
    margin-right: 0 !important;
    position: static !important;
    left: 0 !important;
    top: 0 !important;
    vertical-align: baseline !important;
  }
  .footer-direccion .valverde {
    margin-left: 5px !important; /* Espacio pequeño entre Esperanza y Valverde */
  }
}





@media (max-width: 600px) {
  .text-in {
    font-size: 1.05rem;      /* Un poco más grande para móviles */
    line-height: 1.7;        /* Más espacio entre líneas */
    text-align: left;        /* Mejor alineación para lectura */
    margin-bottom: 1.2em;    /* Espacio extra abajo */
    padding-left: 2px;
    padding-right: 2px;
    word-break: break-word;  /* Evita desbordes en palabras largas */
  }
}

@media (min-width: 1024px) and (max-width: 1400px) {
  .text-in {
    font-size: 1.2rem !important;
    line-height: 1.6 !important;
    text-align: justify !important;
    margin-bottom: 1em !important;
    padding-right: 0 !important;
  }
}

.sloganindex{

    font-size: 1.5rem !important;
}


.services-icon-wap:hover .bluehover {
    color: #fff !important;
}

/* Títulos azules para la sección de pan fresco diario */
.titleservice1,
.titlecervice2 {
color: #460202 !important;

    font-weight: bold;
}

/* Párrafos más grandes y legibles */
.pararafoservicio {
    font-size: 1.50rem !important; /* Aumenta el tamaño del texto */
    line-height: 1.7;
    color: #222;
    padding-left: 60px;
    padding-right: 60px;
    text-align: justify; /* Alinea el texto a ambos lados */
    
    
}
.titleservice1{

    margin-top: 80px;
    margin-left: 70px;
    font-size: 3.5rem !important; /* Aumenta el tamaño del texto */
}
.ultimop{
    margin-bottom: 90px;
}
.titlecervice2{

  margin-left: 70px;

}

@media (max-width: 600px) {
  .pararafoservicio {
    font-size: 1.1rem !important;
    padding-left: 18px;
    padding-right: 12px;
    text-align: left !important;

 word-break: break-word !important; /* Evita desbordes en palabras largas */
    overflow-wrap: break-word !important; /* Permite que las palabras largas se dividan */

  }
  .titleservice1,
  .titlecervice2 {
    margin-left: 0 !important;
    margin-top: 30px !important;
    font-size: 2rem !important;
    text-align: center !important;
     
      /* Permite que las palabras largas se dividan */
  }
} 


/* Agrega esta clase a las imágenes de "ir a tienda" */
.ir-a-tienda-img {
    transition: transform 0.3s cubic-bezier(.25,.8,.25,1), box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border-radius: 12px; /* Opcional, para bordes suaves */
}

.ir-a-tienda-img:hover {
    transform: scale(1.07);
    box-shadow: 0 8px 32px rgba(34, 60, 80, 0.25);
    z-index: 2;
}
/* Efecto sobresalir para las tarjetas de productos destacados */
.card-destacado {
    transition: transform 0.3s cubic-bezier(.25,.8,.25,1), box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border-radius: 18px;
}

.card-destacado:hover {
    transform: scale(1.07);
    box-shadow: 0 8px 32px rgba(34, 60, 80, 0.25);
    z-index: 2;
}






.producto-tienda{

transition: transform 0.3s cubic-bezier(.25,.8,.25,1), box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border-radius: 18px;


}


.producto-tienda:hover{

 transform: scale(1.07);
    box-shadow: 0 8px 32px rgba(34, 60, 80, 0.25);
    z-index: 2;

}


/* ...existing code... */

.card.rounded-0,
.producto-tienda,
.card-destacado {
    border-radius: 18px !important;
    overflow: hidden !important;
}

.card-img,
.card-img-top,
.card-img-bottom,
.card-img-overlay,
.product-overlay {
    border-radius: 18px !important;
}



#backToTop  {
    background-color: #2c038a !important; /* Solo amarillo */
    color: #ffffff !important; /* Ícono rojo vino */
}
#backToTop:hover {
    background-color: #031253 !important; /* Amarillo más claro al hacer hover */
    color: #e2d4d4 !important; /* Ícono rojo vino al hacer hover */
}
/*
#tempaltemo_footer a:hover,
#tempaltemo_footer a:focus {
    color:  #FFEB3B  !important;
   
    transition: color 0.3s;
}
*/

.titleindex{

    font-weight: bold !important;
}

.services-icon-wap:hover  {
transform: scale(1.07);
    box-shadow: 0 8px 32px rgba(34, 60, 80, 0.25);
    z-index: 2;


}

.empresa-img {
    width: 100%;
    max-width: 700px;
    min-width: 280px;
    height: auto;
    border-radius: 18px;
    box-shadow: 0 8px 32px rgba(34, 60, 80, 0.18);
    object-fit: cover;
    margin-top: 16px;
    margin-bottom: 16px;
    display: inline-block;
}
@media (max-width: 991px) {
    .empresa-img {
        max-width: 90vw;
        min-width: 0;
    }
}


@media (max-width: 767px) {
    .empresa-img {
        max-width: 90vw;
    }
}

@media (max-width: 950px) {
    .bloque-precios {
        margin-bottom: 32px !important;
        margin-top: 18px !important;
    }
}




.carousel-img {
    width: 100%  !important; 
    max-width: 500px !important; /* Ajusta el ancho máximo según tus necesidades */
    min-width: 280px !important; 
    object-fit: cover !important;
    display: block !important;
    margin-left: auto !important  ;
    margin-right: auto  !important ;

     height: 350px !important;   
}




@font-face {
    font-family: 'Trajanus Roma';
    src: url('../fonts/TrajanusRoma.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
.titulo-playfair {
    font-family: 'Trajanus Roma', serif !important;
    font-weight: bold !important;
    font-style: italic !important;
}




@media (max-width: 600px) {
  .titulo-navbar {
    font-size: 1.7rem !important;
    text-align: center !important;
    line-height: 1.2;
  }
}

@media (max-width: 600px) {
  .carousel-item .col-md-8,
  .carousel-item .col-lg-6,
  .carousel-item .mx-auto {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    float: none !important;
    padding: 0 !important;
  }
  .carousel-img {
    
display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 98vw !important;
    height: auto !important;


  }
}


@media (max-width: 600px) {
  .carousel-img {
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


@media (max-width: 600px) {
  .carousel-img {
    width: 98vw !important;
    max-width: 98vw !important;
    min-width: 280px !important;
    height: 260px !important;      /* Ajusta este valor si quieres más alto o más bajo */
    object-fit: cover !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 600px) {
  .carousel-item h1.titleindex {
    font-size: 2.6rem !important;
    text-align: center !important;
    line-height: 1.2 !important;
    margin-bottom: 0.7em !important;  
    margin-top: 1.2em !important;


  }
}

@media (max-width: 600px) {
  .carousel-item.bg-mision-panes h1.titleindex,
  .carousel-item.bg-vision-biscocho h1.titleindex {
    font-size: 2rem !important;
    text-align: center !important;
    line-height: 1.2 !important;
    margin-bottom: 0.7em !important;
    margin-top: 1.2em !important; /* Solo Misión y Visión */
  }

  .carousel-item:not(.bg-mision-panes):not(.bg-vision-biscocho) h1.titleindex {
    font-size: 2rem !important;
    text-align: center !important;
    line-height: 1.2 !important;
    margin-bottom: 0.7em !important;
    margin-top: 0 !important; /* Historia sin separación arriba */
  }
}


@media (max-width: 600px) {
  .carousel-item.bg-mision-panes .text-in,
  .carousel-item.bg-vision-biscocho .text-in {
    font-size: 1.05em !important;
    line-height: 1.7 !important;
    text-align: left !important;
    margin-bottom: 1em !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
     /* Alinea el texto a ambos lados */
  }
}


@media (max-width: 600px) {
  .titulo-responsive {
    font-size: 1.8rem !important;
    text-align: center !important;
    margin-bottom: 0.7em !important;
    margin-top: 0.7em !important;
  }
}



/* Estilo para listas de la política de privacidad */
.list-privacidad,
.list2-privacidad {

font-size: 1.05em !important; /* Igual que los párrafos */
  line-height: 1.7 !important;
  color: #222 !important;
  padding-left: 45px !important; /* Más espacio desde el borde izquierdo */
  margin-left: 60px !important;  /* Mueve la lista hacia la derecha */
  margin-bottom: 1em !important;
  margin-top: 0.5em !important;
  list-style-type: disc !important;

  
}

.list-privacidad li,
.list2-privacidad li {
    font-size: 1.2em !important;
  padding-left: 0 !important;
}



@media (max-width: 600px) {
  .list-privacidad,
  .list2-privacidad {
    padding-left: 45px !important; /* separa del borde izquierdo */
    margin-left: 0 !important;
  }
  .list-privacidad li,
  .list2-privacidad li {
    font-size: 0.98em !important; /* letras más pequeñas */
    margin-bottom: 0.5em !important;
    padding-left: 0 !important;
  }
}



/* Enlace al formulario de contacto en la política de privacidad */
a.contact-link {
  color: #222 !important;           /* Mismo color que los párrafos */
  font-size: 1.4rem !important;     /* Igual que los párrafos en móviles */
  ; /* Sin subrayado por defecto */
  
}



@media (max-width: 600px) {
  a.contact-link{
color: #222 !important;    
font-size: 1.1rem !important;

  }
}

@media (max-width: 800px) {
  a.contact-link{
color: #222 !important;    
text-align: start !important; 

  }
}
@media (max-width: 600px) {
  .h3privacidad{
 
font-size: 1.5rem !important;

  }
}

@media (max-width: 800px) {
  a.contact-link{
color: #222 !important;    
text-align: start !important; 

  }
}

@media (max-width: 600px) {
  #login-form {
    padding: 0 8px !important;

width: 98vw !important;
    max-width: 98vw !important;
    min-width: 0 !important;
    margin: 18px auto !important;
    padding: 10px !important;
    box-sizing: border-box !important;
  }

  }
  #login-form .form-group,
  #login-form .mb-3 {
    margin-bottom: 1.2em !important;
  }
  #login-form label {
    font-size: 1.05em !important;
    margin-bottom: 0.3em !important;
    display: block;
  }
  #login-form input,
  #login-form textarea {
    font-size: 1em !important;
    padding: 10px !important;
    border-radius: 8px !important;
  }
  #login-form button[type="submit"] {
    width: 100% !important;
    font-size: 1.1em !important;
    padding: 12px 0 !important;
  }




  
.contact-row {
    display: flex;
    align-items: stretch;
}
.contact-col {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.contact-box {
    height: 450px;
    width: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
@media (max-width: 768px) {
    .contact-row {
        flex-direction: column;
    }
    .contact-box {
        height: auto;

        
    }
}

/* ...existing code... */
.historia-img {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    /* NO uses object-fit aquí */
  }
    
@media (max-width: 600px) {
  .historia-img {
    width: auto !important;
    max-width: 90vw !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 100px !important; /* Puedes ajustar este valor */
    margin-left: auto !important;
    margin-right: auto !important;
    /* Asegura que la imagen se ajuste sin recortar */
  }
}

/* Imágenes de categorías con tamaño y borde uniforme */
.categoria-img {
    width: 270px;
    height: 270px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #eaeaea;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.titlepr{

    font-size: 1.8rem !important;
}


/* Tamaño base más grande para los párrafos de Historia, Misión y Visión */
.text-in {
    font-size: 1.5rem !important; /* Ajusta el valor a tu gusto */
    line-height: 1.7;
    text-align: justify;
    margin-bottom: 1.2em;
    color: #222 !important;
}

/* Para móviles, también más grande */
@media (max-width: 600px) {
  .text-in {
    font-size: 1.15rem !important;
    line-height: 1.7;
    text-align: left;
    margin-bottom: 1.2em;
    color: #222 !important;
  }
}


.bg-carrusel-azul {
    margin-top: -15px !important; /* Sube el bloque amarillo */
    padding-top: 16px !important;
   }
.bg-carrusel-azul h1 {
    margin-top: 0 !important; /* Elimina espacio extra arriba del título */
}





.logo-img {
    width: 124px;
    height: 124px;
    object-fit: contain;
    border-radius: 40% !important; /* Bordes redondeados */
    margin-right: 12px;
    vertical-align: middle;
}




/* cambios azul y blanco */
.bg-carrusel-azul {
 background: #0633c7f1 !important; 

   /* Azul */
    color: #fff !important;         /* Texto blanco */
    border-radius: 18px;
    padding: 32px 24px;
    opacity: 0.95;
}
.bg-carrusel-azul h1,
.bg-carrusel-azul h2,
.bg-carrusel-azul h3,
.bg-carrusel-azul p,
.bg-carrusel-azul a {
    color: #fff !important;         /* Texto blanco dentro del fondo azul */
}
    
 
.bg-carrusel-azul h1,
.bg-carrusel-azul h2,
.bg-carrusel-azul h3,
.bg-carrusel-azul p,
.bg-carrusel-azul a {
    color: #fff !important;         /* Texto blanco dentro del fondo azul */
}

.navbar {
    background-color:  #072792 !important; /* Azul */
    transition: background-color 0.4s;
    box-shadow: none !important;
}

.btn-azul {
    background-color: #0228a1 !important; /* Azul principal */
    border-color: #0228a1 !important;
    color: #fff !important;
    transition: background 0.3s, border 0.3s;
}

.btn-azul:hover,
.btn-azul:focus {
    background-color: #05207c !important; /* Azul más oscuro al hacer hover */
    border-color: #05207c !important;
    color: #fff !important;
}

.card-destacado:hover,
.producto-tienda:hover {
    transform: scale(1.07);
    background-color: #0228a1 !important; /* Azul */
    color: #fff !important;
    box-shadow: 0 8px 32px rgba(34, 60, 80, 0.25);
    z-index: 2;
}

/* Cambia el color del título y precio al pasar el mouse por la tarjeta */
.card:hover .h2.text-dark,
.card:hover .text-muted {
    color: #fff !important;
    transition: color 0.3s;
}

/* Hover azul para enlaces importantes en el footer */
#tempaltemo_footer a[href^="tel"]:hover,
#tempaltemo_footer a[href^="mailto"]:hover,
#tempaltemo_footer a.contact-link:hover {
    color: #133ece !important;
    text-decoration: underline;
    transition: color 0.3s;
}

.politica-privacidad:hover,
.bluehover:hover,
.bluehover:focus {
    color: #153ec4 !important;
    text-decoration: underline;
    transition: color 0.3s;
}
.bg-success {

 background: #0633c7f1 !important; 

     
  
    color: #fff !important;               /* Texto blanco */
    padding-top: 20px;
    padding-bottom: 20px;
}
.bg-success h1,
.bg-success h2,
.bg-success h3,
.bg-success h4,
.bg-success h5,
.bg-success h6,
.bg-success p,
.bg-success a,
.bg-success li,
.bg-success span {
    color: #fff !important; /* Texto blanco en títulos y párrafos */
}



.services-icon-wap {
    background-color: #fff !important; /* Fondo blanco */
    color: #0228a1 !important;       /* Letras azules */
    border-radius: 18px; 
    transition: background 0.3s, color 0.3s;
}

.services-icon-wap i {
    color:#0228a1  !important;         /* Íconos azules */
    transition: color 0.3s;
}

.services-icon-wap:hover {
    background-color: #0228a1 !important; /* Fondo azul al pasar el mouse */
    color: #fff !important;               /* Letras blancas */
}

.services-icon-wap:hover i {
    color: #fff !important;               /* Íconos blancos al pasar el mouse */
}


.titleservice1,
.titlecervice2 {

color: #0228a1 !important;  

}


/* Cuadro de productos: fondo azul, borde blanco, letras blancas */
.bloque-precios {
    background: #0228a1 !important;   /* Fondo azul */
    border: 2px solid #fff !important; /* Borde blanco */
    border-radius: 18px;
    box-shadow: 0 4px 24px rgba(34,60,80,0.10);
    padding: 45px 35px;
    margin: 32px auto 40px auto;
    text-align: center;
    color: #fff !important;           /* Letras blancas */
    max-width: 100%;
}

.bloque-precios h1,
.bloque-precios .sloganindex,
.bloque-precios p {
    color: #fff !important;           /* Letras blancas */
}

/* Hover azul más oscuro para tarjetas de productos */
.card-destacado:hover,
.producto-tienda:hover,
.bloque-precios:hover {
    background-color: #05207c !important; /* Azul más oscuro */
    color: #fff !important;
    box-shadow: 0 8px 32px rgba(34, 60, 80, 0.25);
    border-color: #fff !important;
    z-index: 2;
}


.titlegategory {
    color: #fff !important;               /* Texto blanco */
    background-color:  #0228a1 !important; /* Azul claro */
    color: #fff !important;               /* Texto blanco */
    border: 2px solid #dee0eb !important;    /* Borde blanco */
    border-radius: 12px;
    padding: 12px 32px;
    display: inline-block;
    box-shadow: 0 4px 16px rgba(25, 118, 210, 0.08); /* Sombra azul suave */
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 24px;
    transition: background 0.3s, color 0.3s, border 0.3s; border: 2px 

}.menu-categorias-tienda a:hover,
.menu-categorias-tienda a:focus {
    background-color: #0228a1 !important; /* Azul */
    color: #fff !important;               /* Texto blanco */
    border-radius: 8px;
    transition: background 0.3s, color 0.3s;
}
.menu-categorias-tienda {
    background: #020f8396 !important;
    border: 2px solid #1976d2 !important; /* Borde azul claro */
    border-radius: 18px;
    box-shadow: 0 4px 24px rgba(25, 118, 210, 0.08);
    padding: 28px 18px 18px 18px;
    margin-bottom: 32px;
}


.navbar-nav .nav-item .nav-link {
    font-size: 1.25rem !important; /* Un poco más grande */
    font-weight: 500;
    letter-spacing: 1px;
}


@media (max-width: 600px) {
  .logo-img {
    width: 62px !important;
    height: 62px !important;
    margin-right: 8px !important;
  }
}

.img-panaderia-central {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 37px;
    max-width: 540px;
    width: 96vw;
    height: auto;



}

.img-panaderia-central {
    opacity: 0;
    transform: translateY(60px);
    animation: subirArriba 1.2s ease-out forwards;
}

@keyframes subirArriba {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



.ir-a-tienda-img {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.8s, transform 0.8s;
}

.ir-a-tienda-img.visible {
    opacity: 1;
    transform: translateY(0);
}





/* Efecto sobresalir al pasar el mouse */
.ir-a-tienda-img:hover,
.ir-a-tienda-img:focus {
    box-shadow: 0 8px 32px rgba(25, 118, 210, 0.18);
    z-index: 2;
    transform: scale(1.07) translateY(-4px);
    transition: box-shadow 0.3s, transform 0.3s;
}


@media (max-width: 600px) {
  .row {
    flex-direction: column !important;
  }
}


@media (max-width: 600px) {
  .titulo-historia {
    padding-top: 35px !important;
   
  }
}

@media (max-width: 600px) {
  .carousel-control-prev,
  .carousel-control-next {
    display: none !important;
  }
}


@media (max-width: 600px) {
  .container,
  .row {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }
}


@media (max-width: 600px) {
  .carousel-item p,
  .text-in,
  .pararafoservicio {
    width: 100vw !important;
    max-width: 100vw !important;
    padding-left: 0 !important;@media (max-width: 600px) {
  .row.text-center.pt-3,
  .row.text-center.pt-3 .col-lg-6.m-auto {
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .img-panaderia-central {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
  }
  .titulo-responsive,
  .sloganindex {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    display: block !important;
  }
}
    


  }
}
@media (max-width: 450px) {
  .img-panaderia-central,.sloganindex {
   margin-right: 20px !important;
    }
}




@media (max-width: 450px) {
  .img-panaderia-central {
   margin-right:50px !important;
   margin-left: -11px !important;
    }
}
@media (max-width: 600px) {
  .carousel-img {
   margin-right: 20px !important;
   margin-left: -28px !important;
    }
}



/* Ajusta el padding de las filas del carrusel en móviles */



@media (max-width: 600px) {
 
    .parafoindex{

        margin-left: -50px !important;
        text-align: justify !important;
    }

    .titleindex{

        margin-left: -33px !important;
        margin-right: 10px !important;
    }
   }

/* FORZAR VISIBILIDAD INDICADORES CARRUSEL BOOTSTRAP 5 */



/* Cambia color de los labels y el botón de enviar en el formulario de contacto */
#login-form label,
#login-form .form-label {
    color: #0228a1 !important; /* Azul */
    font-weight: 600;
}

#login-form button[type="submit"] {
    background-color: #0228a1 !important; /* Azul */
    border-color: #0228a1 !important;
    color: #fff !important;
}

#login-form button[type="submit"]:hover,
#login-form button[type="submit"]:focus {
    background-color: #011a6b !important; /* Azul más oscuro al pasar el mouse */
    border-color: #011a6b !important;
}


/* Igualar tamaño del mapa al formulario de contacto en PC y laptops */
@media (min-width: 992px) {
    #mapid {
        max-width: 900px;   /* Igual que el formulario (col-md-9) */
        height: 560px !important;
        margin: 40px auto 0 auto;
        border-radius: 12px;
        box-shadow: 0 4px 16px rgba(0,0,0,0.08);
        display: block;
    }
}


/* ...existing code... */

/* Formulario de contacto más pequeño en desktop/laptop */
@media (min-width: 992px) {
    #login-form {
        width: 910px !important;   /* Más pequeño */
        max-width: 100% !important;
        margin: 40px auto !important; /* Centrado horizontal */
        padding: 20px !important;
    }
}

@media (min-width: 992px) {
  .contact-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 32px;
    margin-bottom: 40px;
     /* Altura fija para el bloque */
  }
  .contact-col {
    flex: 1 1 0;
    min-width: 350px;
    max-width: 820px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
     
  }
  #login-form, #mapid {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    display: block !important;
  }
}
@media (max-width: 991px) {
  .contact-row {
    display: block;
  }
  .contact-col {
    width: 100%;
    max-width: 100%;
  }
  #mapid {
    margin-top: 32px;
    height: 350px !important;
  }
}


@media (min-width: 992px) {
  .contact-row {
    /* Espacio arriba del bloque */
    margin-bottom: 120px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;                      /* Más espacio entre formulario y mapa */
    width: 100%;
    max-width: 1900px;
    margin-left: auto;
    margin-right: auto;

    margin-top: 80px !important; /* Espacio entre el bloque y el footer */
  }
}
@media (min-width: 992px) {
  #login-form label,
  #login-form .form-label {
    font-size: 1.2rem !important;
    padding-left: 6px !important;
    margin-bottom: 2px !important;
  }
  #login-form input,
  #login-form textarea {
    font-size: 0.99rem !important;
    padding: 6px 8px !important;
    border-radius: 6px !important;
    height: 32px !important;
  }
  #login-form textarea {
    min-height: 210px !important;
    height: 67px !important;
    max-height: 176px !important;
  }
  #login-form .mb-3,
  #login-form .form-group {
    margin-bottom: 10px !important;
  }
  #login-form button[type="submit"] {
    font-size: 1rem !important;
    padding: 8px 18px !important;
  }
}


.politica-privacidad:hover{

  text-decoration: none !important;
  color: #ffffff !important;
}

#pan, #bizcocho, #galleta, #dulce, #jugo, #otrosp {
  scroll-margin-top: 100px; /* Ajusta según el alto de tu header */
}

/* Espaciado inferior en móviles para el bloque de contacto */
@media (max-width: 767.98px) {
  .contact-row {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
  }
}

/* Separar el formulario del mapa en móviles */
@media (max-width: 767.98px) {
  .contact-col:first-child {
    margin-bottom: 2rem;
  }
}

/* Mueve la imagen central de la panadería un poco a la derecha en desktop/tablet */
@media (max-width: 767.98px) {
  .img-panaderia-central {
    margin-left: auto !important;
    margin-right: auto !important;
    margin-left: -3.7px !important; /* Ajusta este valor según sea necesario */
  }
}

/* Espaciado lateral para párrafos de servicios en móviles */
@media (max-width: 600px) {
  .pararafoservicio {
    padding-left: 18px !important;
    padding-right: 12px !important;
  }
}

/* Borde azul sutil para el mapa de Google en la sección de contacto */
.contact-col iframe {
  border: 3px solid #007bff;   /* Azul Bootstrap */
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.titulo-playfair.titulo-responsive {
  font-weight: bold !important;
  color: #000000 !important;
}

/* Título principal en el navbar */
.titulo-navbar,
.logo
 {
  font-weight: bold !important;
  color: #fff !important;
}

/* Títulos de las secciones del menú */
.nav-link
 {
  font-weight: bold !important;
  color: #fff !important;
}



.btn-azul{

font-weight: bold !important;
  color: #fff !important;

}

.titlepr{

   font-weight: bold !important;
  color: #000000 !important;
}

/* Nombres de productos en tarjetas de tienda y destacados */
.producto-nombre,
.card-destacado .producto-nombre,
.producto-tienda .producto-nombre,
.card .producto-nombre,
.card .h2,
.card .h3,
.card .h4,
.card .titlepr {
  font-weight: bold !important;
  color: #000000 !important;
}
.myname {
  color: #FFD700 !important; /* Dorado brillante */
  font-weight: bold !important;
  letter-spacing: 1px;
}
.titulo-horario,
.titulo-privacidad {
  font-weight: bold !important;
  color: #fff !important;
}

.titulo-responsive2{

font-weight: bold !important;
  color: #fff !important;
}




.menu-categorias-tienda a[data-categoria] {
  font-weight: bold !important;
  color: #ffffff !important;
}

/* Cuadro de precios más ancho en desktop/tablet */
@media (min-width: 768px) {
  .bloque-precios {
    max-width: 900px !important;
    width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

.card-destacado:hover .producto-nombre,
.producto-tienda:hover .producto-nombre,
.card:hover .producto-nombre,
.card:hover .h2,
.card:hover .h3,
.card:hover .h4,
.card:hover .titlepr {
  font-weight: bold !important;
  color: #fff !important;
}

@media (min-width: 992px) {
  .titulo-playfair.titulo-responsive {
    white-space: nowrap !important;
    text-align: center !important;
    display: block !important;
    margin-left: -50px !important;
  }
}

/* Animación de aparición para productos destacados */
.anim-aparece {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.8s, transform 0.8s;
}

.anim-aparece.visible {
    opacity: 1;
    transform: translateY(0);
}

.logo-img {
  width: 140px !important;         /* Logo más grande */
  height: 140px !important;
  background: #fff !important;
  border-radius:50% !important;   /* Círculo menos redondo, más pequeño */
  padding: 2px !important;         /* Menos espacio alrededor del logo */
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  border: 2px solid #eee !important;
  object-fit: contain !important;
}

@media (max-width: 600px) {
  .logo-img {
    width: 62px !important;
    height: 62px !important;
    background: #fff !important;
    border-radius: 50% !important;
    padding: 2px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 2px solid #eee !important;
    object-fit: contain !important;
    margin-right: 8px !important;
  }
}

@media (min-width: 1024px) and (max-width: 1336px) {
  .titulo-playfair.titulo-responsive {
white-space: nowrap !important;
    text-align: center !important;
    display: block !important;
    margin-left: -140px !important;
    
  }
}

@media (min-width: 1024px) and (max-width: 1336px) {
  .shop-categorias-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 32px !important;
  }
  .menu-categorias-tienda {
    flex: 0 0 340px !important;
    max-width: 340px !important;
    margin-bottom: 0 !important;
  }
  .bloque-precios {
    flex: 1 1 0 !important;
    max-width: 900px !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
  }
}
@media (min-width: 1024px) and (max-width: 1336px) {
  .bloque-precios {
   max-height: 300px !important; /* Ajusta la altura máxima */
     /* Agrega scroll si el contenido es más alto */
  }
}
@media (max-width: 600px) {
  .titulo-productos-destacados,
  .titulo-servicios {
    font-size: 1.8rem !important;
    margin-top: 18px !important;
    margin-bottom: 12px !important;
    text-align: center !important;
  }
}




/* Solo afecta el párrafo de "Quiénes somos" en la sección de nosotros */
@media (max-width: 600px) {
  .parrafo-nosotros {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }
}



@media (max-width: 600px) {
  .parrafoinfo {

   
white-space: pre;
  
  }
}

.tituloredes{

  color: #FFFFFF !important;
  font-weight: bold !important;
}

.reservados{


   color: #FFFFFF !important;
  font-weight: bold !important;
}


.footer-phone-numbers {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin-left: 8px;      /* Menos espacio, más cerca del ícono */
    margin-top: 22px;      /* Sube los números para alinearlos con el ícono */
}
.footer-phone-inline {
    display: inline-block;
    margin-bottom: 0;
}
.footer-phone-li {
    display: flex;
    align-items: center;
}



.footer-phone-li {
    display: flex;
    align-items: flex-start;
    margin-top: -10px; /* Sube el bloque hacia arriba */
    margin-bottom: 0;  /* Elimina espacio extra debajo */
}
.footer-phone-li i {
    margin-top: 2px;   /* Ajusta el ícono verticalmente */
}
.footer-phone-numbers {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin-left: 8px;
    margin-top: -2px;  /* Sube los números un poco más */
}