body {
    margin: 0;
    padding: 0;
  }
  
  body,
  html {
    overflow-x: hidden;
  }
  
  /*Pagina Principal*/
  .navbar{
    z-index: 50 !important;
  }
  .nav-separator {
    position: relative;
  }
  
  .barra_media{
    color: white;
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
  }
  
  .navbar-nav .nav-item:last-child::after {
    content: ""; /* Quitar la línea del último elemento */
  }
  
  
  
  .navbar-nav .nav-link {
    color: white; /* Color del texto para las otras pestañas */
  }
  
  .bg-sangabriel {
    background-color: #d91f29;
  }
  .menuNavbar {
    
    width: 100%;
  
  }
  
  .menuNavbar a {
    text-decoration: none;
    font-weight: bold;
  }
  
  .menuNavbar a:hover {
    color: #ffe500;
  }
  
  .activar {
    color: #ffe500 !important;
  }
  
  .pestana-contactos {
    background-color: #b0050e;
    height: 100%;
  
    border-radius: 10px;
  }
  
  .arriba-img{
    background-color: #0084a0;
    width: 100%;
    height: 25vh;
  }
  .logo-soalpro{
    width: 20%;
  }
  .carousel-indicators [data-bs-target] {
    background-color: rgb(177, 177, 177) !important;
    /* Cambiar color de fondo */
    width: 12px !important;
    /* Cambiar tamaño */
    height: 12px !important;
    border-radius: 50% !important;
    /* Forma circular */
  }
  
  .carousel-indicators .active {
    background-color: #ff6600;
    /* Cambiar color del indicador activo */
  }
  
  .marcas_principal {
    background-image: url(imagenes/FONDO\ MARCAS_Mesa\ de\ trabajo\ 1.webp);
    background-size: contain;
    
  }
  .marcas_principal img:hover {
    transform: scale(1.2); /* Aplica el efecto de zoom */
  }
  .marcas_principal img{
    transition: transform 0.3s ease;
    width: 72%;
  }
  
  .marcas_principal_titulo {
    padding-top: 2rem;
    margin-bottom: -30px;
    font-weight: bold;
    font-size: 1.8rem;
    color: #0a4f97;
  }
  .radio{
    position: relative;
  }
  .radio-play{
    position: absolute;
    bottom: 1rem;
    left: 40%;
  }
  
  
  .primera-principal {
    position: relative;
    overflow: hidden; /* Asegura que la imagen no se salga del contenedor */
  }
  
  .primera-principal img {
    transition: transform 0.9s ease; /* Suaviza el efecto de zoom */
  }
  
  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(88, 137, 181, 0.5); /* Capa azul con transparencia */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0; /* Oculta el overlay inicialmente */
    transition: opacity 0.9s ease; /* Suaviza la transición */
  }
  
  .primera-principal:hover .overlay {
    opacity: 1; /* Muestra el overlay al pasar el mouse */
  }
  
  .primera-principal:hover img {
    transform: scale(1.1); /* Escala la imagen al pasar el mouse */
  }
  
  .overlay h1 {
    color: white;
    font-weight: bold;
    font-size: 2rem;
    text-align: center;
  }
  
  
  
  
  .pie-pagina {
    background-color: #d91f29;
  }
  
  .pie-pagina h3 {
    color: white;
    font-weight: bold;
    font-size: 1.3rem;
  }
  
  .pie-pagina h4 {
    color: white;
    font-weight: bold;
    font-size: 1rem;
  }
  
  .pie-pagina h5 {
    color: white;
    font-size: 0.8rem;
  }
  
  .pie-pagina .iconos img{
    width: 70%;
  }
  
  /*Fin Pagina Principal*/
  
  
  /* Inicio Quienes Somos */
  .nacimiento {
    position: relative;
  }
  
  .nacimiento-texto {
    position: absolute;
    top: 0;
    right: 0;
    width: 55%;
    background-color: rgba(27, 125, 211, 0.2);
    height: 100%;
  
    display: flex; 
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
  
    /* Inicialmente oculto y desplazado hacia la derecha */
    opacity: 0;
    transform: translateX(100%);
    transition: opacity 0.5s ease, transform 0.5s ease; /* Transición para la animación */
  }
  
  /* Cuando se hace visible, animación para el contenedor */
  .nacimiento-texto.visible {
    opacity: 1;
    transform: translateX(0);
  }
  
  /* Estilos para el título y párrafo dentro del contenedor */
  .nacimiento-texto .nacimiento-texto-titulo,
  .nacimiento-texto p {
    /* Estilos base aplicados desde el principio */
    color: white; /* Color aplicado por defecto */
    font-size: 2rem;
    padding: 0 10% 0 10%;
    
    opacity: 0;
    transform: translateX(50%);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  .nacimiento-texto-titulo label{
    opacity: 0.5;
  }
  
  /* Animación en cadena para los elementos internos */
  .nacimiento-texto.visible .nacimiento-texto-titulo {
    opacity: 1;
    font-size: 3.5rem;
    transform: translateX(0);
    transition-delay: 0.3s; /* Retraso para el título */
  }
  .nacimiento-texto.visible .nacimiento-texto-titulo-nacimiento{
    font-size: 2.5rem;
  }
  
  .nacimiento-texto.visible p {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.6s; /* Retraso para el párrafo */
  }
  
  /* Estilos adicionales si es necesario */
  .nacimiento-texto-panaderia {
    font-weight: bold;
    display: inline;
  }
  
  .nacimiento-texto-titulo {
    font-weight: bold;
    margin-bottom: 40px;
    opacity: 0.9;
  }
  
  .nacimiento-texto-titulo-nacimiento {
    color: #0f0e2c;
    opacity: 0.8;
  }
  
  
  
  
  /*Inicio Principio*/
  
  .primero{
    background-image: url(imagenes/quienes_somos/principios/FONDO\ VALORES_1.webp);
    background-size: cover; /* La imagen cubrirá todo el contenedor */
    background-position: center; /* La imagen estará centrada */
    background-repeat: no-repeat;
  }
  
  
  /*Fin Principios*/
  /*Inicio Premios*/
  .premios{
   text-align: center;
  }
  
  .premios label{
    font-size: 220%;
    padding: 0 5rem;
    color: #696973;
    text-align: center;
    font-weight: bold;
  }
  .carousel-premios img{
    width: 50%;
  }
  /*Fin Premios*/
  
  /*Inicio Marcas*/
  .titulo-marcas{
    margin: 2rem 0;
  }
  .marcas-panaderia img{
    transition: transform 0.5s ease;
    width: 70%;
  }
  .marcas-panaderia img:hover{
    transform: scale(1.1);
  }
  
  /*Fin Marcas*/
  
  /* Fin Quienes Somos */
  /* Inicio Nuestras Marcas */
  .san-gabriel{
    background-color: #d91f29;
  }
  .kream{
    background-color: #0b3778;
  }
  .vida-sana{
    background-color: #f95722;
  }
  
  /* Fin Nuestras Marcas */
  
  
  /*Inicio Facil y rico*/
  
  .facil-rico img{
    width: 80%;
    transition: transform 0.5s ease;
  }
  .facil-rico img:hover{
    transform: scale(1.1);
  }
  
  .facil-rico-final img{
    transition: transform 0.5s ease;
  }
  
  .facil-rico-final img:hover{
    transform: scale(1.1);
  }
  
  /*Fin Facil y rico*/
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  /* animacion */
  .animacion{
    width: 100%;
  
    background-image: url(../../imagenes/animacion/fondo-solidos.jpg);
    background-size: cover; /* La imagen cubrirá todo el contenedor */
    background-position: center; /* La imagen estará centrada */
    background-repeat: no-repeat;
    position: relative;
  }
  .animacion2{
    width: 100%;
  
    background-image: url(../../imagenes/animacion/fondo-liquidos.jpg);
    background-size: cover; /* La imagen cubrirá todo el contenedor */
    background-position: center; /* La imagen estará centrada */
    background-repeat: no-repeat;
    position: relative;
  }
  .animacion-grande{
   
    position: relative;
    z-index: 2;
  }
  .animacion-grande img{
    /* width: 100%; */
  }
  .circulo{
    width: 190% !important;
    position: absolute;
    /* top: -110%; */
    bottom: 20%;
    left: -95%;
    height: auto;
    z-index: -2;
  
  }
  .producto-grande img{
    
  
  }
  
  
  .animacion-productos{
  
  
  
    z-index: 50;
  }
  .animacion-productos img{
    
    rotate: -40deg;
    width: 100%;
  }
  .animacion-productos a label{
    margin-top: -5rem !important;
    color: white;
    font-size: 1.5rem;
    font-family:'Times New Roman', Times, serif;
  }
  .animacion-productos-tradicionales{
  
  
  text-align: center;
    z-index: 50;
  }
  .animacion-productos-tradicionales img{
    max-width: 100%;
    width: auto;
  
  
    max-height: 33vh;
  }
  .animacion-productos-tradicionales label{
  
    color: white;
    font-family:'Times New Roman', Times, serif;
  }
  .animacion-productos-crick{
  
  
  
    z-index: 50;
  }
  .animacion-productos-crick img{
    
  
    width: 100%;
  }
  .animacion-productos-crick a label{
    margin-top: -5rem !important;
    color: white;
    font-size: 1.5rem;
    font-family:'Times New Roman', Times, serif;
  }
  
  .capa{
    width: 13%;
    height: 60%;
    background-color: #9d9d9d;
    opacity: 0.3;
    position: absolute;
    bottom: 3.5rem;
    left: 7rem;
    border-radius: 20%;
  }
  .texto-animacion{
    min-height: 70vh;
  }
  .texto{
    color: white;
  }
  .texto label{
    font-size: 7vh;
    line-height: 1;
    font-family: serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  }
  .texto p{
    margin-top: -1rem;
    font-size: 1.5rem;
    font-weight: bold;
    font-family: cursive;
  }
  .texto img{
    margin-top: -5rem;
    width: 70%;
  }
  .galletita1{
    width: 25% !important;
    position: absolute;
    top: 0;
    right: 0;
    animation: float 3s ease-in-out infinite;
  }
  .galletita2{
    width: 18% !important;
    position: absolute;
    bottom: 15%;
    left: 20%;
    rotate: -50deg;
    animation: float 3s ease-in-out infinite;
  }
  .galletitas-crick .galletita1{
    width: 25% !important;
    position: absolute;
    top: 0;
    left: 15%;
    animation: float 3s ease-in-out infinite;
  }
  .galletitas-crick .galletita2{
    width: 18% !important;
    position: absolute; 
    bottom: 20%;
    left: 65%;
    rotate: -50deg;
    animation: float 3s ease-in-out infinite;
  }
  
  
  /* Animación de rebote */
  @keyframes bounceIn {
    0% {
      transform: translateY(1000px);
      opacity: 0;
    }
    60% {
      transform: translateY(-30px);
      opacity: 1;
    }
    80% {
      transform: translateY(10px);
    }
    100% {
      transform: translateY(0);
    }
  }
  
  /* Animación para entrar desde la derecha */
  @keyframes slideInRight {
    from {
      transform: translateX(100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  /* Animación para entrar desde la izquierda */
  @keyframes slideInLeft {
    from {
      transform: translateX(-100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  @keyframes float {
    0% {
      transform: translatey(0);
    }
    50% {
      transform: translatey(-20px); /* Ajusta la altura de la flotación */
    }
    100% {
      transform: translatey(0);
    }
  }
  /* Estilos para las imágenes */
  
  /*Medias */
  @media (max-width: 576px) { 
    .logo-soalpro{
      width: 40%;
    }
    
    .icono-historia img{
      width: 10%;
    }
    .carousel-premios img{
      width: 100%;
    }
    .premios label{
      font-size: 150%;
      padding: 0 0;
     
    }
  }
  
  @media (max-width: 992px) { 
    .navbar-collapse{
      background-color: #d43258;
      border-radius: 15px;
      padding: 10px;
    }
    .arriba-img{
      height: 4.5rem;
    }
    .barra_media{
      display: none;
    }
   }
  
  
  
  
  * {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
  }
  
  
  
  

  
  h1 {
    font-size:20px;
    margin:0;
    font-weight:400;
  }
  a {
    color:#404040;
    text-decoration:none;
  }
  a:hover { color:#101010; }

  .pad2 {
    padding:20px;
  }
  .quiet {
    color:#888;
  }
      .boxtop {
    padding-left:10px;
    padding-top:10px;
    white-space: pre-wrap;
    display:inline-block;
  }
  .box {
    padding-left:10px;
    padding-top:5px;
  /*    padding-bottom: 10px;*/
    white-space: pre-wrap;
    display:inline-block;
    font-weight: normal;
  }
      .url {
    padding-left:10px;
  /*    padding-top:5px;*/
    padding-bottom: 10px;
    white-space: pre-wrap;
    display:inline-block;
    font-weight: normal;
  }
  
  .map-top100 {
    position: relative;
    width: 100%;
    height: 65vh;
    z-index: 0;
  }
  
  .heading {
    background:#fff;
    border-bottom:1px solid #eee;
    height:60px;
    line-height:60px;
    padding:0 10px;
  }
  .listings1 {
    height:100%;
    overflow:auto;
    padding-bottom:100px;
  }
  .listings1 .item {
    display:block;
    border-bottom:1px solid #eee;
    padding:10px;
    text-decoration:none;
  }
  .item a{
    text-decoration: none;
    font:400 15px/22px 'Roboto Slab', 'Georgia', Sans-serif;
  }
  .listings1 .item:last-child { border-bottom:none; }
  .listings1 .item .title {
    display:block;
    color:#da0606;
    font-weight:700;
  }
  .listings1 .item .title small { font-weight:400; }
  .listings1 .item.active .title,
  .listings1 .item .title:hover { color:#0491c6; }
  .listings1 .item.active {
    background-color:#f8f8f8;
  }
  
  ::-webkit-scrollbar {
    width:8px;
    height:3px;
    border-left:0;
    background:rgba(0,0,0,0.1);
  }
  ::-webkit-scrollbar-track {
    background:none;
  }
  ::-webkit-scrollbar-thumb {
    background:#00aced;
    border-radius:0;
  }
  
  .clearfix { display:block; }
  .clearfix:after {
    content:'.';
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
  }
      
    .leaflet-popup-content-wrapper img {
    max-width:150px;
    height:auto;
    border-radius:3px 3px 0px 0px;
    }
  
  /* Marker tweaks */
  .leaflet-popup-close-button {
    display:none;
  }
  .leaflet-popup-content {
    text-align: center;
    font:400 15px/22px 'Roboto Slab', 'Georgia', Sans-serif;
    padding:0;
    width:200px;
  }
  .leaflet-popup-content-wrapper {
    padding:0;
  }
      
      .leaflet-popup-close-button+.leaflet-popup-content-wrapper .leaflet-popup-content{
          
       padding-top: 0px !important;   
      }
      
  .leaflet-popup-content h5 {
    background:#00aced;
    color:#fff;
    margin:0;
    display:block;
    padding:10px 10px 10px 10px;
     border-radius:10px;
    font-weight:500;
    margin-top:-15px;
  }
  .leaflet-popup-content div {
    padding:10px 10px 10px 10px;
  }
  .leaflet-container .leaflet-marker-icon { cursor:pointer; }