/*Theme Name: Sellotek
Theme URI: somosjam.cl
Description: Template hecho para tomarlo como base inicial de cualquier proyecto wordpress
Version: 1.0
Author: SOMOS JAM
Author URI: https://somosjam.cl/
*/

:root{
   --azul:#000A43;
   --amarillo:#F59700;
}

*{
   box-sizing: border-box;
   font-family: 'Poppins', sans-serif;
   padding: 0;
   margin: 0;
}

body{
   padding: 0;
   margin: 0;
   position: relative;

}

.button-float{
   position: fixed;
   top: 50%;
   right: 20px;
   transform: translateY(-50%);
   z-index: 90;
}

.button-float>div{
   margin: 10px 0;
   padding: 10px;
}

.button-float>div img{
   display: flex;
   width: 30px;
}

.button-float-carrito{
   background-color: var(--amarillo);
}

.button-float-telefono{
   background-color: var(--azul);
}

.button-float-telefono a{
   color: #fff;
   text-decoration:none;
   font-size: 28px;
   display: block;
   line-height: 1;
}

.button-float-telefono a i{
   display: inline-block;
}

header{
   background-color: #fff;
   box-shadow: 0px 3px 6px #00000029;
   opacity: 1;
   position: sticky;
   top: 0;
   z-index: 100;
}

.container{
   margin: 0 auto;
}

.header__content{
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.header__logo img{
   width: 300px;
   display: flex;
   align-items: center;
}

.header__menu{
   display: flex;
   align-items: center;
}

.header__menu> ul{
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   align-items: center;
   gap: 25px;

}

.header__items{
   color:var(--azul);
   font-weight: 600;
	position:relative;
}

.header__menu> ul li >ul{
	display:none;
	list-style: none;
    position: absolute;
    top: 100%;
    width: 161px;
    background-color: #fff;
    right: -10px;
    border-radius: 6px;
    box-shadow: 0px 3px 6px #00000029;
}
.header__menu> ul li >ul li{
	padding: 9px;
}

.header__menu> ul li >ul li a{
	font-size: 15px;
    color: #6C6C6C;
    font-weight: 100;
}
.header__menu.pc .header__items:hover > ul{
	display:block;
	overflow: hidden;
}

.header__items > ul li:hover{
	background-color:var(--amarillo);
}

.header__items > ul li:hover a{
	color:#fff;
	font-weight:bold;
}

.header__items a{
   text-decoration: none;
   color:var(--azul);
   transition: .3s all linear;
}

.header__items a:hover{
   color: var(--amarillo);
}

.header__other-items{
   margin-left: 25px;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 15px;
}

.header__button-contacto{
   border: none;
   background-color: var(--amarillo);
   color: #fff;
   padding: 5px 15px;
   border-radius: 5px;
   font-weight: 600;
   cursor: pointer;
   text-decoration: none;
}

.header__barra{
   height: 50px;
   width: 1px;
   background-color: var(--azul);
}

.header__icon-cart img{
   width: 30px;
   display: flex;
   align-items: center;
}

.button-menu-responsive{
   display: none;
   padding-right: 16px;
}

.button-menu-responsive span{
   width: 43px;
   height: 43px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 27px;
   font-weight: 800;
   background-color: #fff;
   border-radius: 50%;
   box-shadow: 0px 0px 6px #00000029;
}

/* header movil */
.header-movil{
   position: fixed;
   top: 75px;
   background-color: #fff;
   width: 300px;
   left: -100%;
   height: 100%;
   z-index: 10;
   transition: .3s all ease-in-out;
}

.header-movil.active{
   left: 0;
}

.header-movil__close{
   display: flex;
   padding: 7px 10px;
   justify-content: flex-end;
   align-items: center;
}

.header-movil__close span{
   width: 30px;
   height: 30px;
   border-radius: 50%;
   font-size: 20px;
   color: var(--azul);
   font-size: 30px;
}

.header-movil__menu ul li{
   padding: 10px 15px;
}


.header-movil__menu ul li.menu-movil {
    display: block;
    position: relative;
    cursor: pointer;
}

.header-movil__menu ul li.menu-movil::after {
    content: '';
    width: 10px;
    height: 10px;
    position: absolute;
    top: 18px;
    right: 20px;
    background-color: var(--amarillo);
    clip-path: polygon(100% 0, 0 0, 50% 100%);
}

ul.menu-movil-ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

ul.menu-movil-ul.active{
	display:block
}

/* ESTYLOS GENERALES */
.seccion_titulo{
   font-size: 28px;
   font-weight: 800;
   line-height: 20px;
   color: var(--azul);
   text-align: center;
}

.parrafo-azul{
   color: var(--azul);
   text-align: center;
}

.input__control{
   border-radius: 5px;
   margin: 0 7px;
   outline: none;
   letter-spacing: 0px;
   padding: 5px 10px;
}

.button__theme{
   color: #fff;
   background-color: var(--amarillo);
   border-radius: 7px;
   letter-spacing: 1.2px;
   font-weight: 600;
   padding: 8px 40px;
   border: none;
   margin: 0 auto;
   display: block;
   margin-top: 20px;
   cursor: pointer;
}

.woocommerce-message {
    border-top-color: var(--amarillo) !important;
}

.woocommerce-message a:hover{
	background-color: var(--amarillo) !important;  
    color: #fff;
}

/* carts de productos */

.tienda__contenido{
   display: flex;
   justify-content: center;
   padding: 0 5vw;
   align-items: flex-start;
   margin-bottom: 50px;

}

.tienda__productos{
   flex-grow: 1;
   display: flex;
   justify-content: start;
   align-items: center;
   gap: 20px;
   row-gap: 30px;
   flex-wrap: wrap;
   padding-left: 30px;
}

.tienda__card-product-items {
   width: 220px;
   background: #FCFCFC 0% 0% no-repeat padding-box;
   box-shadow: 0px 3px 6px #00000029;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
   height: 419px;
}

.tienda__card-product-imagen {
   text-align: center;
}

.tienda__card-product-imagen img {
   width: 100%;
   height: 200px;
   object-fit: contain;
}

.tienda__card-product-linea {
   background-color: #C3C3C3;
   height: 1px;
   width: 200px;
   margin: 0 auto;
}

.tienda__card-product-info {
   padding: 15px 0;
   text-align: center;
}

.tienda__card-product-info h3 {
   font-weight: 800;
   color: var(--azul);
   font-size: 20px;
   line-height: 25px;
   margin-bottom: 10px;
}

.tienda__card-product-info h3 a{
	color: inherit;
    text-decoration: none;
	padding: 0 5px;
}

.tienda__card-product-info p {
   color: var(--azul);
   font-size: 14px;
	padding: 0 10px;
}

.tienda__card-product-link {
   width: 100%;
   text-align: center;
   box-shadow: 0px -2px 2px #00000026;
}

.tienda__card-product-link a {
   text-decoration: none;
   color: var(--amarillo);
   letter-spacing: 1px;
   font-weight: 700;
   padding: 7px 0;
   display: block;
   transition: .3s all linear;
}

.tienda__card-product-link a:hover {
   color: #fff;
   background-color: var(--amarillo);
}


/* ESTYLOS GENERALES PARA EL CARRUSEL */
.quienes-somos{
   margin-bottom: 50px;
   position: relative;
}

.quienes-somos__titulos{
   margin-bottom: 30px;
}

.quienes-somos__carrusel{
   max-width: 900px;
   margin: 0 auto;
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
}

.quienes-somos__laterales{
   display: flex;
   position: relative;
   position: relative;
   z-index: 5;
}

.quienes-somos__carrusel> .quienes-somos__laterales.left{
   right: -14%;
}

.quienes-somos__carrusel> .quienes-somos__laterales.right{
   left: -17%;
}

.quienes-somos__title-active-inicio{
   background-color: var(--amarillo);
   position: relative;
   width: 40px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   cursor: pointer;
}

.quienes-somos__title-active-inicio p{
   transform: rotate(
      -90deg) translateX(calc(-100% - 12px));
   display: block;
   white-space: nowrap;
   font-weight: 600;
   color: #fff;
   text-align: center;  
}

.quienes-somos__title-active-final{
   background-color: var(--amarillo);
   position: relative;
   width: 40px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   cursor: pointer;
}

.quienes-somos__title-active-final p{
   transform: rotate(
      -90deg) translateX(calc(-100% - 12px));
   display: block;
   white-space: nowrap;
   font-weight: 600;
   color: #fff;
   text-align: center;  
}

.quienes-somos__imagen{
   
	background-color: rgb(0, 10, 67, .6);
}

.quienes-somos__imagen img{
   width: 300px;
   display: flex;
   width: 300px;
   height: 250px;
   display: flex;
   object-fit: cover;
   mix-blend-mode: overlay;
}

.quienes-somos__mostrar{
   display: flex;
   align-items: center;
   padding: 30px 0;
   position: relative;
   z-index: 9;
}

.quienes-somos-mostrar-imagen{
   position: relative;
   z-index: 6;
}

.quienes-somos-mostrar-imagen img{
   width: 400px;
   height: 320px;
   object-fit: cover;
   box-shadow: 6px 6px 12px #00000045;
}

.quienes-somos-mostrar-texto{

   background-color: var(--amarillo);
   width: 320px;
   padding: 60px 40px;
   line-height: 20px;
   font-size: 15px;
   box-shadow: 6px 6px 12px #00000095;
   position: relative;
   z-index: 7;
   left: -6%;

}

.quienes-somos-mostrar-texto h3{
   color: #fff;
   font-weight: bold;
   font-size: 35px;
   letter-spacing: 1.47px;
}

.quienes-somos__linea{
   width: 70%;
   height: 2px;
   background-color: #fff;
   margin-bottom: 30px;;
   margin-top: 20px;
   
}

.quienes-somos-mostrar-texto p{
   color: #fff;
   font-size: 13px;
   line-height: 19px;
}

.quienes-somos-mostrar-texto a{
   text-decoration: none;
   border: 2px solid #fff;
   letter-spacing: 2px;
   padding: 6px 15px;
   border-radius: 7px;
   display: inline-block;
   margin-top: 13px;
   font-weight: 600;
   color: #fff;
}

.quienes-somos__left-animate-title{
   
   position: absolute;
   top: 260px;
   left: 137.5px;
   width: 40px;
   height: 250px;
   /* background-color: var(--amarillo); */
   background-color: red;
   z-index: 10;
   opacity: 1;
   transform: rotate( 0deg);
   transition: all .4s ease-in;

}

.quienes-somos__left-animate-title.animated{
   /* animation: titleLeft 1 .4s ease-in forwards ; */
   width: 320px;
   height:520px;
   top: 131px;
   left: 708px;
   transform: rotate( 360deg);

}

.quienes-somos__animate-title-principal{
   position: absolute;
   background-color: red;
   width: 320px;
   height: 507px;
   top: 131px;
   left: 708px;
   z-index: 10;
   transition: all .4s ease-in;
   transform: rotate( 0deg);
}

.quienes-somos__animate-title-principal.animated-right{
   width: 40px;
   height: 250px;
   left: 1219px;
   top: 260px;
   transform: rotate( 360deg);

}

.quienes-somos__animate-title-principal.animated-left{
   width: 40px;
   height: 250px;
   top: 260px;
   left: 137.5px;
   transform: rotate( 360deg);

}

.quienes-somos__right-animate-title{
   position: absolute;
   width: 40px;
   height: 250px;
   left: 1219px;
   top: 260px;
   background-color: red;
   z-index: 10;
   opacity: 1;
   transform: rotate( 0deg);
   transition: all .4s ease-in;
}

.quienes-somos__right-animate-title.animated{
   top: 131px;
   left: 708px;
   width: 320px;
   height: 507px;
   transform: rotate( 360deg);
}

.clientes-partners{
	margin-bottom:50px;
}

.clientes__titulo.seccion_titulo.partners{
	font-size: 35px;
}

.rpfarma__alianzas-imagenes-contenedor {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}

.rpfarma__alianzas-imagen img {
    width: 130px;
}


@keyframes titleLeft{
   
   0{
      width: 40px;
      height:250px;
      top: 260px;
      left: 137.5px;
      opacity: 0;
      transform: rotate( 0deg);
   }
   100%{
      width: 320px;
      height:520px;
      top: 131px;
      left: 708px;
      opacity: 1;
      transform: rotate( 360deg);
   }
}

footer{
   background-color: var(--azul);
   padding: 50px 0;
}

.footer__content{
   display: flex;
   margin: 0 auto;
   align-items: center;
   justify-content: space-between;
   max-width: 1200px;
}

.footer__items img{
   width: 300px;
}

.footer__items b{
   color: #fff;
}

.footer__items ul{
   list-style: none;
   font-size: 15px;
}

.footer__items ul li a{
   color: #fff;
   text-decoration: none;
}

.footer__items p{
   color: #fff;
}
.footer__items p a{
	color:#fff;
	text-decoration:none;
}

.footer__items--direccion p{
   font-size: 15px;
}

.footer__items--direccion strong{
   font-size: 16px;
}

.footer__items--redes{
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
	display:none
}

.footer__redes{
   width: 45px;
   height: 45px;
   background-color: var(--amarillo);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 30px;
   border-radius: 5px;
}

.footer__redes a{
   text-decoration: none;
   color: #fff;
   display: flex;
}

/* BANNER PAGE */
.banner-page{
   height: 45vh;
   background-image: url(./assets/fondo-header-nosotros.png);
   background-repeat: no-repeat;
   background-size: cover;
   display: flex;
   justify-content: center;
   align-items: center;
}

.banner-page__info{
   width: 600px;
   text-align: center;
}

.banner-page__titulo{
   color: #fff;
   font-weight: 800;
   font-size: 40px;
}

.banner-page__texto{
   color: #fff;
   margin-bottom: 20px;
}

.banner-page__button{
   color: #fff;
   background-color: var(--amarillo);
   letter-spacing: 4px;
   border-radius: 7px;
   font-size: 17px;
   padding: 10px 30px;
   font-weight: 600;
   cursor: pointer;
	text-decoration:none;
}


@media (min-width:1200px){
   .footer__content{
      justify-content: space-evenly;
   }
}


@media (min-width:1000px){
   .container{
      max-width: 1140px;
   }
}

@media (max-width:1140px){
   .header__menu{
      padding-right: 15px;
   }
   
   .header__menu >ul{
      gap: 15px;
   }
}
@media (max-width:960px){
   .header__menu{
      display: none;
   }

   .button-menu-responsive{
      display: block;
   }

   .footer__content{
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      padding: 0 20px;
      gap: 15px;
   }

   .footer__content .footer__items:nth-child(1){
      align-self: center;
   }
}

@media (max-width:500px){

   .banner-page__titulo{
      font-size: 8.5vw;
      line-height: 44px;
   }

   .banner-page__texto{
      padding: 0 10px
   }

   .banner-page__texto br{
      display: none;
   }

   .banner-page__button{
      padding: 0.4em 24px;
   }

   .footer__redes{
      width: 35px;
      height: 35px;
      font-size: 24px;
   }
}

@media (max-width:377px){

   .header__logo img{
      width: 220px;
   }
   .header-movil{
      top: 55px;
   }
}