@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');


*{
  font-family: 'Poppins', sans-serif;
} 



/* HEADER */


/* BARRA DE NAVEGACION */


#logo{
  color: #fff;
  font-weight: 700;
  margin-left: 10px;
}

.bg-purple{
  background-color: transparent;
}

.navbar-nav .nav-item {
  margin-right: 40px;
  font-weight: 550;
}


.nav{
  display: flex;
  justify-content: flex-end;
  margin-right: 10px;
  margin-left: 40px;
}


.navbar-scrolled {
  background-color: rgba(45, 6, 45, 0.8); /* Cambia el color de fondo según necesites */
  transition: background-color 0.3s ease; /* Agrega una transición suave */
}

.navbar-scrolled .navbar-nav .nav-link { /* Selector anidado dentro de .navbar-scrolled */
  color: white !important; /* Cambia a blanco cuando .navbar-scrolled está activo */
}

.navbar-scrolled .navbar-brand { /* Selector anidado dentro de .navbar-scrolled */
  color: white !important; /* Cambia a blanco cuando .navbar-scrolled está activo */
}


.navbar-toggler-icon {
  filter: invert(100%); /* Invierte los colores del icono */
}





/* INICIO */


.hero {
  /* en vez del video */
  background-image: url(Imagenes/estantes.png);
  background-size: cover;
  background-position: center;
  height: 100vh;
}



/* CONTENEDOR HERO */

.hero {
  position: relative;
  height: 100vh;              
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
} 

/* VIDEO DE FONDO */
.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* CAPA VIOLETA POR ENCIMA DEL VIDEO */
/* .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(68, 11, 52, 0.90) 0%,
    rgba(68, 11, 52, 0.80) 40%,
    rgba(68, 11, 52, 0.65) 100%
  );
  z-index: 1;
} */

/* CONTENIDO */
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  padding: 0 16px;
}

/* TAGLINE ARRIBA */
.hero-tagline {
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
  opacity: 0.9;
}


/* .div-textos-inicio{
  justify-content: center;
  text-align: center;
} */

/* .div-seccion{
  justify-content: center;
  vertical-align: center;
} */


/* TÍTULO PRINCIPAL */
.titulo-liverval{
  font-weight: 800; 
  font-size: 5rem;
  margin-bottom: 10px;
}

/* SUBTÍTULOS */
.logistica{
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.mismo-dia{
  font-size: 1.3rem;
  font-weight: 500;
  margin-bottom: 30px;
}

/* BOTONES */
.hero-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* .botonInfo{
  background-color: #440b34;
  color: #fff;
  border-radius: 999px;
  padding: 12px 26px;
  border: 2px solid #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
} */

/* .botonInfo:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3);
  background-color: #fff;
  color: #440b34;
} */

.botonSecundario{
  background-color: #440b34;
  color: #fff;
  border-radius: 999px;
  padding: 12px 24px;
  border: 2px solid #fff;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.botonSecundario:hover{
  background-color: #fff;
  color: #440b34;
  transform: translateY(-2px);
}


/* RESPONSIVE */
@media (max-width: 768px) {
  .titulo-liverval {
    font-size: 3rem;
  }
  .logistica {
    font-size: 1.1rem;
  }
  .mismo-dia {
    font-size: 1rem;
  }

  .header {
    height: auto;
    width: auto;
  }
}




/* 
.titulo-liverval{
  font-weight: 650; 
  font-size: 6em;
  color: #fff;
}


.logistica{
  color:  #fff;
  font-weight: 550;
}

.mismo-dia{
  color:  #fff;
  font-weight: 550;
}


.botonInfo{
  margin-top: 50px;
  background-color: #fff;
  color: rgb(45, 6, 45);
  border-radius: 15px;
  transition: background-color 0.3s, color 0.3s;
  padding: 10px;
  border: 2px solid white;
  font-size: 1.0em;
  font-weight: 550;
}



header{
  background-image: url(Imagenes/estantes.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 550px;
  width: auto;
  padding-top: 100px;
  z-index: 1;
  position: relative;
} */


/*header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);  Capa oscura 
  z-index: 1;
}*/

/* header > * {
  position: relative;
  z-index: 3;
}






@media only screen and (max-width: 767px) {
  .div-textos-inicio{
    padding-bottom: 100px;
    padding-top: 0px;
    padding-right: 50px;
  }
}


@media only screen and (max-width: 767px) {
  .titulo-liverval{
    font-size: 5em;
    padding-left: 40px;
  }
}


@media only screen and (max-width: 767px) {
  .logistica{
    font-size: 2em;
    padding-left: 30px;
    width: 100%;
  }
}


@media only screen and (max-width: 767px) {
  .mismo-dia{
    font-size: 1.5em;
    padding-left: 30px;
    width: 100%;
  }
}



@media only screen and (max-width: 767px) {
  .botonInfo{
    margin-left: 30px;
    margin-bottom: 20px;
  }
} */





/* ¿POR QUÉ ELEGIRNOS? */


.fondo-section{
  background: linear-gradient(0deg, #440b34 -10% , #ffd2b5 50%, #ffe9d2 100%);
  padding-top: 1px;
  padding-bottom: 60px;
}

.titulo-porque-elegirnos{
  font-size: 3em;
  font-weight: 650;
  color: rgb(45, 6, 45);
}


.bloque-acordeon{
  display: flex;
  justify-content: center;
}

.beneficio-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 28px 22px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.beneficio-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.12);
}

.beneficio-icono {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background-color: rgba(255, 255, 255, 0.9);
  background: #ffe9f4;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

/* .beneficio-icono i {
  font-size: 28px;
  color: #440b34; 
} */


/* EN EL CASO DE REEMPLAZAR ICONO POR IMAGEN */

/* .beneficio-icono img {
  max-width: 60%;
  max-height: 60%;
} */


.beneficio-titulo {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.beneficio-texto {
  font-size: 0.95rem;
  margin-bottom: 20px;
}

.btn-beneficio {
  display: inline-block;
  align-self: flex-start;
  margin-top: auto;
  padding: 10px 22px;
  border-radius: 999px;
  border: none;
  background-color: #440b34;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.btn-beneficio:hover {
  background-color: #5c1246;
  color: #ffffff;
  transform: translateY(-1px);
}

/* Responsive: que no se peguen tanto en mobile */
@media (max-width: 767.98px) {
  .beneficio-card {
    padding: 24px 18px;
  }
}




/* .div-icono{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50px;
  color: black;
}




.color-red{
  background-color: red;
}

.acordeon{
  width: 100%; 
  margin-bottom:60px;
  color: rgb(95, 15, 95);
}


.accordion-body{
  font-size: 1.1em;
  font-weight: 650;
  color: rgb(76, 12, 76);
}


.accordion-header button {
  padding-left: 70px;
  font-size: 21px;
  font-weight: bold;
  color: rgb(76, 12, 76);
}


.accordion-button:hover {
  color: rgb(18, 139, 148);
} */
 



/* El div-icono se aplica en Por que elegirnos y en Beneficios. Esto es una forma de optimizar el codigo */



/* Media query de "Por qué elegirnos" */


@media only screen and (max-width: 767px) {
  .titulo-porque-elegirnos{
    font-size: 2.5em;
    padding-left: 20px;
  }
} 


@media only screen and (max-width: 767px) {
  .padding-izquierda{
    padding-left: 30px;
  }
}

/* clase .padding-izquierda fue aplicada en los h2 de los botones de BENEFICIOS*/





/* BENEFICIOS */


.beneficios-section {
  position: relative;
  padding: 40px 0 40px;
  overflow: hidden;
  background: #fff;
}


.div-titulos{
  display: flex;
  justify-content: center;
  padding: 50px;
  padding-top: 100px;
}


/* Título al centro y en blanco para contraste */
.beneficios-section .titulo-beneficios {
  text-align: center;
  color: #440b34;
  font-weight: 650;
  font-size: 3.6rem;
  margin-bottom: 40px;
}


/* .titulo-beneficios{
  font-size: 3.4em;
  font-weight: 650;
  color: rgb(45, 6, 45);
}  */



/* Texto grande de fondo tipo “TENDENCIAS” 
.beneficios-section::before {
  content: "LIVERVAL · BENEFICIOS · ECOMMERCE · ";
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 5rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  white-space: nowrap;
  opacity: 0.06;
  color: #000000;
  pointer-events: none;
  text-transform: uppercase;
} */


/* Animación suave para que el texto de fondo se mueva 
@keyframes scroll-bg-text {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(-55%);
  }
}*/


/* .beneficios-section::before {
  animation: scroll-bg-text 30s linear infinite alternate;
} */


/* TARJETAS */

.bloque-acordeon {
  justify-content: center;
}


.container-beneficio{
  max-width: 1100px;
  margin: 0 auto;
  padding-bottom: 70px;
}


/* .subtitulo-beneficio{
  font-weight: 650;
  color: #fff;
} */



/* .texto-beneficio{
  color: #fff;
} */



/* Tarjetas */
.beneficio {
  background: linear-gradient(0deg, #440b34 -10% , #ffd2b5 50%, #ffe9d2 100%);
  border-radius: 24px;
  padding: 24px 22px;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.beneficio:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.18);
}

/* Icono dentro de pastilla rosada */
.beneficio-icono {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: #fde6f3; /* violeta súper suave */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.beneficio-icono i {
  font-size: 26px;
  color: #1b256e;
}

/* Título del beneficio */
.subtitulo-beneficio {
  color:black;
  font-weight: 700;
  font-size: 1.5rem;
  margin-bottom: 10px;
}

/* Texto del beneficio */
.texto-beneficio {
  color: black;
  font-size: 0.95rem;
  line-height: 1.5;
}




/* Media query de para "BENEFICIOS" */


@media only screen and (max-width: 767px) {
  .container-beneficio{
    margin-left: 50px;
    margin-right: 50px;
  }
}







/* BLOQUE VIOLETA */

.bloque-violeta{
  background-color: rgb(45, 6, 45);
  padding-top: 100px;
  padding-bottom: 100px;
}

.ingenieria-logistica{
  color: #fff;
  display: flex;
  justify-content: center;
  font-size: 3.5em;
}



@media only screen and (max-width: 767px) {
  .ingenieria-logistica{
    font-size: 1.6em ;
  }
} 







/* Acerca de nosotros (ésta es la parte de la sección)*/



#acerca{
  position: relative;
  padding-top: 110px;
  padding-bottom: 110px;
  padding-left: 60px;
  padding-right: 60px;
  z-index: 10;
  background-color: rgb(45, 6, 45);
}

.container-dos{
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
}


.col-sm-6{
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}

.negrita{
  color: white;
}


.icon-box {
  margin-top: 50px;
  margin-bottom: 50px;
  /* padding: 0 10px; */
  position: relative;
}




/* Titulo Acerca */

.titulo-blanco{
  color: white;
  font-size: 3.4em;
  letter-spacing: 0;
  text-align: left;
  font-weight: 650;
  margin-bottom: 10px;
} 
 

.mb-35{
  margin-bottom: 35px;
}


.parra-acerca{
  color: white;
  font-weight: 650;
  line-height: 1.7;
}



/* Media query para "Acerca" */

@media (max-width: 767px) {
  .imagen img{
    height: auto;
    width: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
    padding: 30px;
    
  }
}  



@media (max-width: 767px) {
  .titulo-blanco{
    font-size: 3em;
    font-weight: 500;
  }
} 




@media (max-width: 767px) {
  .parra-acerca{
    font-size: .9em;
    font-weight: 500;
  }
} 






/* Seccion imagen maquina deposito */

#seccion-imagen-maquina-deposito{
  background: linear-gradient(rgba(0, 0, 0, 0.5),  rgba(0, 0, 0, 0.5)), url(./Imagenes/Deposito-tecnologico.png) fixed center center;
  background-size: cover;
  background-position: center;
  padding: 200px 0
}




/* SECCION IMAGEN DEPOSITO */

#seccion-imagen-deposito{
  background: linear-gradient(rgba(0, 0, 0, 0.5),  rgba(0, 0, 0, 0.5)), url(./Imagenes/camioneta-cargando.png) fixed center center;
  background-size: cover;
  background-position: center;
  padding: 200px 0
}







/* Media Query para dispositivos con un ancho máximo de 768px */

@media (max-width: 768px) {
  .container-imagen img {
    max-width: 100%;
    height: auto; 
  }
}



/* PLAFORMAS */


.contenedor-principal-platadormas{
  display: flex;
  padding-top: 50px;
  margin-bottom: 50px;
}

.nombres-plataformas{
  color: rgb(76, 12, 76);
}

.div-contenedor-logo{
  display: flex;
}


.div-imagen-engranaje{
  text-align: center;
}

.div-tildes-con-platadormas{
  padding-left: 170px;
}

#ingresa{
  font-weight: 650;
}


.imagen-engranaje{
  width: 150px;
  height: auto;
}


.div-ingresa{
  text-align: center;
  color: rgb(45, 6, 45);
}

.icono-plataforma{
  display: flex;
}


.imagen-plataformas{
  width: 600px;
  height: auto;
}




/* Media query de PLATAFORMAS */






@media (max-width: 767px) {
  .div-tildes-con-platadormas{
   padding-left: 120px;
  }
}  







/* SERVICIOS */


.servicios{
  position: relative;
  padding: 80px;
  z-index: 10;
  background-color: rgb(45, 6, 45);
}


.tituservi{
  color: white;
  font-size: 3.4em;
  font-weight: 650;
  margin-bottom: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}



/* CAJAS FLEX BOX */


/* Estilos para el contenedor de las cajas */
.row-uno {
  display: flex;
  justify-content: space-around; /* Distribuye el espacio entre las cajas */
}

/* Estilos para cada caja de servicio */
.servicio-box {
  width: 30%; /* Ajusta el ancho según el número de cajas y el espacio deseado */
  height: 400px; /* Ajusta la altura según tus necesidades */
  margin: 10px; /* Espacio entre las cajas */
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid #ccc; /* Borde opcional para visualizar mejor las cajas */
}




/* Estilos específicos para el contenido frontal */
.front-content {
  background-repeat: no-repeat;
  background-position: center; 
  background-size: cover; /* Cubre todo el fondo, manteniendo la relación de aspecto */
  z-index: 2; /* Asegura que el contenido frontal esté por encima */
  color: #fff;
  text-shadow: -0.25px -0.25px 0 black, 0.25px -0.25px 0   black, -0.25px 0.15px 0   black, 0.25px 0.25px 0   black;
  -webkit-text-stroke: 0.25px   black;
}

.front-content .fondo-imagen-chica-ap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Asegura que la imagen cubra todo el fondo */
  z-index: -1;
}



/* Estilos para el contenido frontal y trasero de cada caja */
.front-content, .back-content {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.5s ease, opacity 0.5s ease; /* Transición suave para el deslizamiento y la opacidad */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.brillo{
  filter: brightness(3.5);
  text-align: center;
  font-size: 2.5em;
}

.textos-cajas-servicios{
  padding-left: 25px;
  padding-right: 25px;
  padding-bottom: 20px;
}



/* Estilos específicos para el contenido trasero */
.back-content {
  color: rgb(45, 6, 45);
  background-color: #fff; 
  transform: translateX(100%); /* Inicialmente, el contenido trasero está fuera de la vista */
  opacity: 0; /* Contenido transparente inicialmente */
}

/* Estilos al pasar el mouse sobre la caja */
.servicio-box:hover .front-content {
  transform: translateX(-100%); /* Desliza el contenido frontal hacia la izquierda */
}

.servicio-box:hover .back-content {
  transform: translateX(0); /* Desliza el contenido trasero a la vista */
  opacity: 1; /* Hace que el contenido trasero sea opaco */
}




/* Media query de SERVICIOS */


@media only screen and (max-width: 767px) {
  .row-uno{
    display: flex;
   flex-direction:column;
   align-content: center; 
   align-items: center; 
  }
}


@media only screen and (max-width: 767px) {
  .servicio-box{
    width: 90%;
    height: 400px;
  }
}



@media only screen and (max-width: 767px) {
  .textos-cajas-servicios{
    font-size: 0.9em;
    padding-bottom: 50px;
  }
}


@media only screen and (max-width: 767px) {
  .brillo{
    font-size: 1.5em;
  }
}









/* FORMULARIO */


.titulo-contacto{
  display: flex;
  justify-content: center;
  color: rgb(45, 6, 45);
  padding-top: 40px;
  padding-bottom: 30px;
  font-weight: 300;
  font-size: 3.4em;
}



.div-formulario{
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  max-width: 600px;
}



.form-control.floatingInput{
  border: 2px solid rgb(18, 139, 148);
  margin-bottom: 25px;
}

.form-floating {
  margin-right: 0;
}


.container-mensaje{
  margin: 0 auto;
  max-width: 600px;
}

#mensaje{
  border: 2px solid rgb(18, 139, 148);
  height: 110px;
}


.contenedor-boton{
  margin-top: 10px;
  margin-bottom: 50px;
  text-align: center;
}


.enviar{
  width: 44.3%; 
  padding: 10px; 
  font-weight: bold;
  border-radius: 4px;
  border-width: 0;
  background-color: rgb(45, 6, 45);
  color: white;
  font-weight: 600;
  transition: all .3s ease;
  font-family: 'Poppins', sans-serif;
  font-size: 25px;
  letter-spacing: -0.04em;
}


.enviar:hover {
  background-color: rgb(18, 139, 148)
}



.invalid{
  border: 2px solid red;
}



/* Media query de FORMULARIO */


@media only screen and (max-width: 767px) {
  .titulo-contacto{
      font-size: 2.5em;
  }
} 


@media only screen and (max-width: 767px) {
  .form-row{
    flex-direction: column;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
}  


@media only screen and (max-width: 767px) {
  .container-mensaje{
    max-width: 80%; 
  }
}  


@media only screen and (max-width: 767px) {
  .enviar{
    max-width: 30%; 
  }
}  






/* FOOTER */



.fotter{
  position: relative;
  padding-top: 25px;
  padding-bottom: 70px;
  background-color: rgb(45, 6, 45);
  color: #fff;

}


.fotter .div-uno{
  padding-left: 70px;
  margin-right: 150px;
}



.fotter .parra-fotter{
  display: flex;
  justify-content: center;
}


.fotter .col-3 a {
  color: white;
}



.fotter .col-3 i {
  margin-right: 5px;
  font-size: 20px;
}





/* Media query de FOOTER */


@media (max-width: 767px){
  .div-primera-columna{
    flex-direction: column;
  }
}   


@media (max-width: 767px){
  .footer .div-uno{
    width: 100%;
  }
}  


@media (max-width: 767px){
  .fotter .columna-enlaces{
    width: 100%;
    margin-left: 40px;
    padding-top: 50px;
  }
}  




@media (max-width: 767px){
  .div-redes{
    padding-top: 30px;
    margin-left: 30px;
  }
}  



@media (max-width: 767px){
  .parra-fotter{
    padding-top: 30px;
    padding-left: 15px;
    font-size: 0.7em;
  }
} 






/* CSS DE GRACIAS */


.body-gracias{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  background-color: white;
  color: white;
}


#mensaje-agradecimiento {
  text-align: center;
  padding: 20px;
  border-radius: 10px;
  background-color: purple;
}