/*Seccion intro*/
  .intro {
    position: relative;
  }
  
  .contenedor-imagen {
    position: relative;
    display: block; /* Cambiado a bloque para ocupar el ancho completo del contenedor */
  }
  
  .imgTazaCafe {
    display: block;
    width: 100%;
    height: auto;
  }
  
  .containerTxtIntro {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
    background-color: rgba(128, 0, 0, 0.7); /* Maroon con opacidad del 70% */
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
    color: white;
    padding: 20px;
    max-width: 40%;
  }
  
  .containerTxtIntro h2 {
    margin: 0;
  }
  
  @media (max-width: 768px) {
    .containerTxtIntro {
      position: relative;
      max-width: 100%; /* Ajusta el ancho máximo para que ocupe todo el ancho disponible */
      padding: 10px; /* Ajusta el padding para pantallas más pequeñas */
      text-align: center; /* Centra el texto en pantallas más pequeñas */
    }
    
    .contenedor-imagen {
      display: flex;
      flex-direction: column; /* Cambia la dirección del flexbox para apilar los elementos */
      align-items: center; /* Centra los elementos dentro del contenedor */
    }
    
    .imgTazaCafe {
      width: 100%; /* Ajusta el ancho de la imagen para ocupar todo el ancho disponible */
    }
  }




/*secccion tituloRecom */
.tituloRecom {
    background-color: maroon;
    color: white;
    padding:2%;
    text-align: center;
    margin:0;
}
  


/*Seccion ANTES Y DESPUES*/
.titular {
  font-size: 2.5rem;
  background-color: orangered;
}
.antesDespues {
    background-color: maroon;
    padding: 2% 0; /* Ajuste del padding para espaciamiento interno */
    color: white;
    width: 80%;
    margin: auto;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transform: translateX(-100%);
    transition: opacity 1s ease, transform 1s ease;
}

.antesDespues.visible {
    opacity: 1;
    transform: translateX(0);
}








.antesDespues h2, h3, h4{
    text-align: center;
}
.textoH2Abajo h2{
  padding: 0 2% 2% 2%;
}
.cadena, .publicidad {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin: 10px 0;
}

.cadena li, .publicidad li {
    list-style: none;
    padding: 10px;
    background: rgb(202, 3, 3);
    color: yellow;
    border: 1px solid #ccc;
    margin: 5px;
    border-radius: 5px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 1.9);
}

.cadena h1, .publicidad h1 {
    margin: 0 10px;
    color: #990000;
    font-size: 24px;
}

ul {
    padding: 0;
}

@media (max-width: 768px) {
    .cadena li, .publicidad li {
        flex: 1 0 100%;
        text-align: center;
    }
    
    .cadena h2, .publicidad h2 {
        display: none;
    }
}





/*sección ANTES Y DESPÚES*/
.cuadro2Lados {
    background-color: maroon;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    width: 80%;
    margin: auto;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.5); /* Sombra para dar profundidad */
    opacity: 0; /* Inicialmente invisible */
    transform: translateX(-100%); /* Inicialmente fuera de la pantalla */
    transition: opacity 1s ease, transform 1s ease; /* Suavizado de la transición */
}

.cuadro2Lados.visible {
    opacity: 1;
    transform: translateX(0);
}

.textoLateral {
    padding: 2%;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1.5);
}
.textoLateral li {
    list-style-type: none; /* Quita los estilos de viñeta */
    font-size: 18px; /* Tamaño de fuente */
    margin: 10px 0; /* Margen superior e inferior */
    text-align: center; /* Alineación centrada del texto */
}




/* Media query para pantallas medianas */
@media (max-width: 992px) {
    .cuadro2Lados {
        flex-direction: column;
        width: 90%; /* Ajustar el ancho si es necesario */
        transform: none; /* Restablecer la transformación */
    }
}

/* Media query para pantallas pequeñas */
@media (max-width: 576px) {
    .cuadro2Lados {
        flex-direction: column;
        width: 100%; /* Ajustar el ancho si es necesario */
        transform: none; /* Restablecer la transformación */
    }
}