* {
  box-sizing: border-box;
}

:root {
  --tp-text-body: "Outfit", sans-serif;
  --tp-text-title: "Antonio", sans-serif;
  --tp-specially: "Oswald", sans-serif;
  --nv-color-fond: #000000;
  --clr-fond-home: #101010;
  --clr-text-white: #FFFFFF;
  --clr-text-combinado: #FA7272;
  --clr-boton-principal: #F44B4B;
  --clr-boton-principal-hover: #C73131;
  --clr-boton-producto: #D6252B;
  --clr-boton-producto-hover: #a51c21;
  --clr-boton-banner:#F34B4B;
  --clr-boton-banner-hover:#d03232;
  --clr-borde-productos: #FFCCB5;
  --clr-puntos-productos: #BE86FF;
  --clr-puntos-productos-active: #8d5cc5;
  --clr-combo-power: #F8D84C;
  --cls-text-large: #f2f2f2;
}

body {
  margin: 0;
}

.pbody{
  font-family: var(--tp-text-body);
  color: var(--clr-text-white);
  font-weight: 300;
  font-size: 1.2em;
  line-height: 180%;
}

/*------------------------------------------------------------------*/
/*----------H E A D E R---------------------------------------*/
/*------------------------------------------------------------------*/

.header {
  width: 100%;
  display: flex;
  align-items: center;
  background: var(--nv-color-fond);
  color: var(--clr-text-white);
  padding: .5em 4em 1em 0em;
  position: sticky;/*necesario para la linea*/
  z-index: 9000;
  top: 0;
}
.header::after{
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: #000000;
  background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(183, 55, 60, 1) 53%, rgba(0, 0, 0, 1) 100%);
}

.logo-alfa img{
  position: absolute;
  z-index: 9000;
  top: 10px;
  width: 5em;
  margin: 0em 0em 0em 2em;
}

/****** MENU DESKTOP *******/

.nav {
  margin-left: auto;
  margin-top: .4em;
}

.menu {
  display: flex;
  list-style: none;
  gap: 1.5rem;
}

.menu a {
  color: var(--clr-text-white);
  text-decoration: none;
  font-family: var(--tp-text-body);
  font-size: .9em;
  margin: 0em 0em 0em 1em;
  font-weight: 300;
}
.menu a:hover{
  color: var(--clr-text-combinado);
}

/******** BOTONES *******/

.menu-toggle, .menu-close{
  display: none;   /* oculto en desktop */
}

.menu-toggle span{
  display: block;
  width: 30px;
  height: 2px;
  background: var(--clr-text-white); /* 👈 esto es la línea */
  margin: 4px 0;
}
/*------------------------------------------------------------------*/
/*----------BOTON ESTILOS---------------------------------------*/
/*------------------------------------------------------------------*/

a.s-a-g-color, .color-cont-but{
  background-color: var(--clr-boton-principal);
  color: var(--clr-text-white);
}

a.s-a-g-color:hover, .color-cont-but:hover{
  background-color: var(--clr-boton-principal-hover);
  color: var(--clr-text-white);
}

a.s-a-s-color{
  background-color: var(--clr-boton-producto);
}

a.s-a-s-color:hover{
  background-color: var(--clr-boton-producto-hover);
  color: var(--clr-text-white);
}
a.style-a-general, a.style-boton-secundary, .btn-contacto{
  font-family: var(--tp-text-title);
  text-decoration: none;
  color: var(--clr-text-white);
  
  align-items: center;
  font-size: 1.2em;
  padding: .4em 2em .4em 2em;
  border-radius: 100px;
  transition: .3s ease;
  cursor: pointer;
  border: none;
}



/*------------------------------------------------------------------*/
/*----------SLIDER---------------------------------------*/
/*------------------------------------------------------------------*/

.slider-area {
  width: 100%;
  background: var(--clr-fond-home);
}

.custom-slider {
  width: 100%;
  height: auto;
}

.custom-slider img {
  width: 100%;
  display: block;
}

/* Flechas */
.custom-slider-arrows {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  padding: 0 1rem;
  z-index: 10;
}

.custom-slider-btn {
  background: var(--clr-boton-banner);
  color: var(--clr-text-white);
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 100px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s ease;
}
.custom-slider-btn:hover{
  background: var(--clr-boton-banner-hover);
  transition: .3s ;

}
/*------------------------------------------------------------------*/
/*----------DESTACADOS---------------------------------------*/
/*------------------------------------------------------------------*/

img.shape-purple-one{
  position: absolute;
  width: 60%;
  top: 0;
  right: 0;
  z-index: -1;
}

img.shape-purple-two{
  position: absolute;
  width: 50%;
  bottom: 0;
  left: 0;
  z-index: -1;
}

img.shape-tinto-one{
  position: absolute;
  right: 0;
  width: 50%;
  z-index: 1;

}

img.shape-pink-one{
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  z-index: 1;

}
img.shape-purple-prod{
  position: absolute;
  width: 40%;
  top: 0;
  right: 0;
}

img.shape-pink-prod{
  position: absolute;
  width: 40%;
  bottom: 0;
  left: 0;
}

img.shape-tinto-listpro{
  position: absolute;
  width: 40%;
  top: 0;
  right: 0;

}

img.shape-morad-listpro{
  position: absolute;
  width: 40%;
  top: -15em;
  left: 0;

}

img.shape-pink-listpro{
  position: absolute;
  width: 40%;
  bottom: 0;
  right: 5em;

}

img.shape-pink-listpro{
  position: absolute;
  width: 40%;
  bottom: 0;
  right: 5em;

}

img.shape-not-purp{
  position: absolute;
  width: 40%;
  right: 0;
  top: 0;
}

img.shape-not-pink{
  position: absolute;
  width: 60%;
  right: 1em;
  bottom: 0;

}

img.shape-faq-pink{
  position: absolute;
  width: 40%;
  top: 0;
  left: 0;
}

img.shape-faq-vinotinto{
  position: absolute;
  width: 30%;
  top: 0;
  right: 0;

}

section.destacados{
  background-color: var( --clr-fond-home);
  padding: 4em 0em 2em 0em;
  position: relative;
  z-index: 1;
}

.flex-icones{
  display: flex;
  align-items: center;
}
.destacados-img img{width: 4em;}

h1.h1-dest{
  font-family: var(--tp-text-title) ;
  color: var(--clr-text-white);
  font-size: 3em;
  
}
.pbody{
  font-family: var(--tp-text-body);
  color: var(--clr-text-white);
  font-weight: 300;
  font-size: 1.2em;
  line-height: 180%;
  text-align: right;
}
.position-a-explora{
  text-align: right;
  padding-top: 1em;
}

/**carrusel de productos*/
.products-swiper{
  width: 100%;
  margin: 4em 0em 4em 0em;
  
}

.product-card {
  border: .8px solid var( --clr-borde-productos);
  color: var(--clr-text-white);
  padding: 1rem;
  border-radius: 5px;
  height: 35em;

  display: flex;
  flex-direction: column;
}
.ico-ctg{
  display: flex;
  justify-content: space-between;
}
.ico-ofr img{
  width: 5em;
}
.ico-cat img{
  width: 3em;
}
.product-img{
  text-align: center;
}
.product-img img {
  width: 70%;
  height: auto;
  margin-bottom: .5rem;
  text-align: center;
}
.text-card{
  padding: 0em 1em 0em 1em ;
}
.text-card h3{
  font-size: 1.2em;
  font-family: var(--tp-text-title);
  line-height: 160%;
}
.text-card p{
  text-align: left;
  font-family: var(--tp-text-body);
  color: var(--clr-text-white);
  font-weight: 300;
  font-size: 1em;
  line-height: 160%;
}
.product-card a, .cartera-productos a{
  display: block;
  text-align: center;
  text-decoration: none;
  font-family: var(--tp-text-title);
  margin-top: auto;
  margin-bottom: 1.2em;
  cursor: pointer;
  
  
}
.product-card a span, .cartera-productos a span{
  background-color: var(--clr-boton-producto);
  color: var(--clr-text-white);
  padding: .5em 2em .5em 2em;
  text-align: center;
  border-radius: 100px;
  text-decoration: none;
  transition: .3s ease;
}

.product-card a span:hover, .cartera-productos a span:hover{
  background-color: var(--clr-boton-producto-hover);

}
.products-pagination{
  text-align: center;
}
.products-pagination .swiper-pagination-bullet {
  background-color: var(--clr-puntos-productos-active);
}
.products-pagination .swiper-pagination-bullet-active{
  background-color: var(--clr-puntos-productos);
}

/*------------------------------------------------------------------*/
/*----------ELEGIR ALFA-----------------------------------------------*/
/*------------------------------------------------------------------*/
.section-alfa{
  position: relative;
}
.elegiralfa{
  background-image: url(../images/fondo-pareja-manos.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
.elegir-alfa-text{
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.elegir-alfa-text h4{
  font-family: var(--tp-text-title);
  color: var(--clr-text-white);
  font-size: 3em;
}
.elegir-alfa-text h4 strong{
  color: var(--clr-text-combinado);
}
.elegir-alfa-text img{
  width: 5em;
}
.iconos-sup, .iconos-infsub, .iconos-inf{
  display: flex;
  justify-content: flex-end;
  position: relative;
  z-index: 100;
}
.borde-ico-alfa{
  border: .8px solid var( --clr-borde-productos);
  color: var(--clr-text-white);
  padding: 1rem;
  border-radius: 5px;
  min-height: 15em;
  width: 16em;
  margin: 0em 0em 1em 1em;

}
.img-ico-alfa, .text-ico-alfa{text-align: center;}
.img-ico-alfa img{width: 70%;}
.text-ico-alfa p{
  font-family: var(--tp-text-body);
  font-weight: 300;
}

.position-a-descubre{
  text-align: center;
  display: grid;
  grid-template-columns: 5fr auto 2fr;
  padding: 1em 0 3em;
  position: relative;
  z-index: 100;
}
.btn-descubre{grid-column: 2;}


/*------------------------------------------------------------------*/
/*----------BLOG-----------------------------------------------*/
/*------------------------------------------------------------------*/

.alf-marc-text{
  text-align: center;
  padding: 0em 2em 0em 2em;
  position: relative;
  margin-top: -3px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.alf-marc-text img{
  width: 5em;
}
.alf-marc-text h5{
  font-family: var(--tp-text-title);
  color: var(--clr-text-white);
  font-size: 2em;
  line-height: 170%;
}
.alf-marc-text h5 strong{
  color: var(--clr-text-combinado);
}
.alf-marc-text p{
  font-family: var(--tp-text-body);
  color: var(--clr-text-white);
  font-size: 1.1em;
  font-weight: 300;
  line-height: 180%;
}


.alfa-marca{
  background-color: var(--clr-fond-home);
  padding: 3em 0em 3em 0em;

}
.blog-cards{
  display: flex;
  position: relative;
  z-index: 100;
  
  
}
.bord-card{
  border: .8px solid var(--clr-borde-productos);
  margin: 2em 1em 2em 0em;
  border-radius: 5px;

}
.bord-card img{
  width: 100%;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.bord-card p{
  font-family: var(--tp-text-body);
  text-align: center;
  color: var(--clr-text-white);
  font-weight: 400;
  padding: 1em 0em 1em 0em;
  font-size: 1.1em;
}

.position-a-nota{
  text-align: center;
  padding-bottom: 2em;
}

/*------------------------------------------------------------------*/
/*----------QUIZES-----------------------------------------------*/
/*------------------------------------------------------------------*/

section.quizzes{
  padding: 4em 0em 4em 0em;
}
.quizzes h6{
  font-family: var(--tp-text-title);
  color: var(--nv-color-fond);
  font-size: 3.5em;
  text-align: center;

}
.quiz-content{
  display: flex;
  justify-content: center;
  align-items: center;

}
.quiz-card{
  text-align: center;
}
.quiz-card img{
  width: 40%;
  margin-bottom: 1em;

}
.quiz-card a{
  font-family: var(--tp-text-body);
  color: var(--clr-fond-home);
  font-weight: 400;
  margin-top: 2em;
  cursor: pointer;
}

/*------------------------------------------------------------------*/
/*----------FOOOOOOOOOOOOOOOTER-----------------------------------------------*/
/*------------------------------------------------------------------*/
footer{
  background-color: var(--nv-color-fond);
  padding: 3em 0em 0em 0em;
}

footer a{
  text-decoration: none;
  color: var(--clr-text-white);
}

footer a:hover{
  color: var(--clr-text-combinado);
}
.redes-content{
  display: flex;
}

.foot-img{
  padding-bottom: 2em;
}
.redes-icon a, .foot-aviso a{
  cursor: pointer;
}
.redes-icon a img{
  width: 4em;
  margin: 0em .5em 0em .5em;
}

.foot-aviso{
  color: var(--clr-text-white);
  font-family: var(--tp-text-body);
  font-weight: 300;
  line-height: 200%;
}


.pie{
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 1em .5em 0em .5em;
  margin-bottom: 0;
}

.pie::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(183, 55, 60, 1) 53%,
    rgba(0, 0, 0, 1) 100%
  );
}
.pie p{
  font-family: var(--tp-text-body);
  color: var(--clr-text-white);
  font-weight: 300;
}

/*------------------------------------------------------------------*/
/*----------PRODUCTOS-----------------------------------------------*/
/*------------------------------------------------------------------*/

.filtro-box{
  width: 90%;
  position: relative;
}
.filtro-header {
  cursor: pointer;
  position: relative;
  color: var(--clr-text-white);
}

.filtro-header h3 {
  font-family: var(--tp-text-title);
  margin: 0;
}

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

.filtro-header span {
  font-family: var(--tp-text-body);
  font-size: 1.5em;
  font-weight: 300;
}

.icono-toggle {
  width: 25px;
  height: 25px;
  background: #ff6b6b;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2em;
  margin-left: 10px;
  font-family: var(--tp-specially);
}

/* Categorías */
.filtro-categorias {
  margin-top: 10px;
  display: none;
  flex-direction: column;
  gap: 5px;
}

.cat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-size: 22px;
}

.cat-item input {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid var(--clr-boton-principal);
  border-radius: 50%;
}

.cat-item input:checked {
  background: var(--clr-boton-principal);
}
.cat-item span{
  color: var(--clr-text-white);
  font-family: var(--tp-specially);
  font-weight: 300;
  font-size: .8em;
}

/*----*/
section.productos{
  background-color: var(--clr-fond-home);
  padding: 3em 0em 3em 0em;
  position: relative;
}
.cartera-productos{
  border: .8px solid var( --clr-borde-productos);
  color: var(--clr-text-white);
  padding: 1rem;
  border-radius: 5px;
  height: 32em;
  margin-bottom: 1em;
  flex-direction: column;
  display: flex;
  position: relative;
}
.cartera-ico{
  display: flex;
  justify-content: space-between;
}
.car-ico-cat img{
  width: 3em;

}
.car-ico-ofe img{
  width: 4em;
}

.cartera-img{
  text-align: center;
}
.cartera-img img{
  width: 80%;
  height: auto;
  margin-bottom: .5rem;
  text-align: center;

}
.cartera-text{
  padding: 0em .5em 0em .5em ;

}
.cartera-text h3{
  font-size: 1em;
  font-family: var(--tp-text-title);
  line-height: 160%;
}
.cartera-text p{
  text-align: left;
  font-family: var(--tp-text-body);
  color: var(--clr-text-white);
  font-weight: 300;
  font-size: .8em;
  line-height: 160%;
}

/*------------------------------------------------------------------*/
/*----------PRODUCTO UNICO-----------------------------------------------*/
/*------------------------------------------------------------------*/
.mainproduct{
  background-color: var(--clr-fond-home);
  padding: 3em 0em 0em 0em;
}
section.product{
  position: relative;
}
.product-gallery {
  display: flex;
  gap: 15px;
  align-items: flex-start;
}

.product-main{
  width: 85%;
  border: .8px solid var(--clr-borde-productos);
  border-radius: 5px;

}

.ico-produc-ofr{
  text-align: right;
  padding: 1em .5em 0em 0em;

}
.ico-produc-ofr img{
  width: 7em;
}


.sw-img-pr img {
  width: 100%;
  border-radius: 12px;
}

.product-thumbs {
  width: 15%;
  height: 20em; 
  
}

.product-thumbs img {
  width: 100%;
  height: auto;
  display: block;
}

.thumbs-border{
  border: .8px solid var(--clr-borde-productos);
  border-radius: 2px;
}

.product-thumbs .swiper-slide {
  opacity: .4;
  cursor: pointer;
}

.product-thumbs .swiper-slide-thumb-active {
  opacity: 1;
}

.product-thumbs img {
  width: 100%;
  border-radius: 10px;
}

/* Imagen interna */
.swiper-button-next img,
.swiper-button-prev img {
  width: 40px;
  height: 40px;
  
}

.swiper-button-next,
.swiper-button-prev {
  width: 50px !important;
  height: 50px !important;
  background-color: var(--clr-boton-banner);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.swiper-button-next::after,
.swiper-button-prev::after {
  display: none;
}
/**texto producto unico*/
.info-product{
  position: relative;
}
.ctg-product{
  display: flex;
  align-items: center;
  padding-top: 4em;
}
.ctg-product img{width: 2.5em; margin-right: 10px;}
.ctg-product p{
  font-family: var(--tp-specially);
  color: var(--clr-boton-banner);
  font-weight: 300;
  margin: 0;
  font-size: 1.4em;
}

.info-product h2{
  color: var(--clr-text-white);
  font-family: var(--tp-text-title);
  font-size: 2.5em;
  line-height: 170%;
  font-weight: 300;
}

.info-product p.desc{
  font-family: var(--tp-text-body);
  color: var(--clr-text-white);
  font-weight: 300;
  font-size: 1.1em;
  line-height: 180%;

}

/**TABS*/
section.especif{
  padding-top: 5em;
}

.tabs-producto {
  display: grid;
  justify-content: center;
  text-align: left;
  color: var(--clr-text-white);
  font-family: var(--tp-text-body);
  font-weight: 300;
  position: relative;
}

/* BOTONES */
.tabs-botones {
  display: flex;
  justify-content: center;
  gap: 7em;
  margin: 1em 0em 1em 0em;
  position: relative;
  z-index: 100;

}

.tabs-contenido{
  position: relative;
  z-index: 100;
}

.tab-btn {
  background: transparent;
  border: .8px solid var(--clr-boton-banner);
  color: white;
  padding: .5em 3em;
  cursor: pointer;
  border-radius: 2px;
  font-size: 1.2em;
  transition: .3s ease;
  font-weight: 300;
}

.tab-btn.active {
  background: var(--clr-boton-banner);
}

/* CONTENIDO */

hr.tabs-linea {
  border: none;                           
  background-color: var(--clr-boton-banner);          
}

.tab-panel {
  display: none;
  font-size: 1.1em;
  line-height: 160%;
  max-width: 80%;
  margin: 0 auto;
}

.tab-panel.active {
  display: block;
}

/************------------------ COMBOS ----------------***************/
section.combos{
  padding: 3em 0em 6em 0em;
  position: relative;
}

.comb-boton-space{
  justify-content: center;
  text-align: center;
  margin-top: 2em;
  position: relative;
  z-index: 100;
}
.title-combo{
  display: flex;
  align-items: center;

}

.title-combo img{
  width: 7em;
}

.title-combo p{
  font-family: var(--tp-text-title);
  color: var(--clr-text-white);
  font-size: 2.5em;
  margin: 0;
}

.title-combo p strong{
  color: var(--clr-text-combinado);
}

.content-combo{
  display: grid;
  justify-content: center;
  font-family: var(--tp-text-body);
  color: var(--clr-text-white);
}
.title-tipos-combo{
  display: flex;
  align-items: center;
  
}

.title-tipos-combo h3{
  font-size: 3.5em;
}

.title-tipos-combo h3 strong{
  color: var(--clr-combo-power);

}

.title-tipos-combo img{
  width: 5em;
}
.content-combo p{
  text-align: center;
  font-size: 1.4em;
  font-weight: 300;
  margin-top: -10px;
}
.products-combo{
  display: flex;
  width: 70%;
  margin: 0 auto;
}

.card-combo{
  width: 100%;
  /*background:
    url(../images/fondo-combo-power.png) center/cover no-repeat,
    linear-gradient(180deg, rgba(249,225,118,1) 0%, rgba(248,223,117,1) 43%, rgba(207,162,58,1) 100%);*/
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0em .5em 0em .5em;
  padding-top: 2em;
  border-radius: 3px;
}

.card-combo img{
  width: 100%;
}

.text-combo{
  display: flex;
  align-items: center;
  padding: 0em .5em 1em .5em;
}
.text-combo img{
  width: 3em;
  margin-right: 10px;
}
.text-combo p{
  font-family: var(--tp-text-title);
  font-size: .8em;
  color: var(--clr-text-white);
  font-weight: 300;
  margin: 0;
}

/*------------------------------------------------------------------*/
/*----------NOTAAAAAA-----------------------------------------------*/
/*------------------------------------------------------------------*/
.main-nota{
  background-color: var(--clr-fond-home);
  padding-bottom: 6em;
}
.img-2{
  text-align: center;
}
.img-2 img{
  width: 30%;
  border-radius: 100%;
  margin-top: -7em;
}
.bannernot img{
  width: 100%;
}
.content-art{
  background-color: var(--clr-text-white);
  margin-top: -3em;
  padding: 0em 2em 2em 2em;
  border-radius: 4px;
}
.content-art article{
  padding-top: 2em;
}
.content-art article h2{
  color: var(--clr-boton-principal);
  font-family: var(--tp-text-title);
  text-align: center;
}

.content-art article h3{
  color: var(--clr-fond-home);
  font-family: var(--tp-text-title);
}
.content-art article p{
  font-family: var(--tp-text-body);
  font-weight: 300;

}

.content-art article ol, .content-art article ul{
  font-family: var(--tp-text-body);
}

/*------------------------------------------------------------------*/
/*----------INFORMATE-----------------------------------------------*/
/*------------------------------------------------------------------*/

.main-notas, .main-avisos, .main-faqs, .main-contacto{
  background-color: var(--clr-fond-home);
  padding: 3em 0em 3em 0em;
  position: relative;
}

section.content-notas{
  position: relative;
}
.notas-p-img{
  text-align: right;
}
.notas-p-img img{
  width: 100%;
  height: 90%;
  object-fit: cover;
}
.notas-p-text{
  align-items: center;
  display: flex;
  flex-direction: column; 
  justify-content: center;
  text-align: center;
  height: 100%;
  font-size: 1.3em;
  font-weight: 500;
  position: relative;
  z-index: 100;
}
.notas-p-text p{
  font-family: var(--tp-text-body);
  color: var(--clr-text-white);
  font-size: 1.5em;
  margin-bottom: 1em;
}

section.cont-not-sec{
  position: relative;
  z-index: 100;
}
.caj-not-sec{
  display: flex;
  border: .8px solid var(--clr-borde-productos);
  border-radius: 5px;
  position: relative;
}
.caj-img-sec img{
  width: 15em;
  height: 10em;
  object-fit: cover;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.caj-text-sec{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}
.caj-text-sec p{
  text-align: center;
  font-family: var(--tp-text-body);
  color: var(--clr-text-white);
  margin-bottom: 1em;
  
}

.cont-not-sec p.mas-notas{
  font-family: var(--tp-text-title);
  color: var(--clr-text-white);
  font-size: 3em;
  padding-top: 1em;

}

img.mas-notas-img{
  width: 2em;
}

/*------------------------------------------------------------------*/
/*----------AVISO-----------------------------------------------*/
/*------------------------------------------------------------------*/

.main-avisos{
  color: #d7d7d7;
  font-family: var(--tp-text-body);
  font-weight: 300;
}
.main-avisos h3{
  text-align: center;
  padding: 1em 0em 2em 0em;
  color: var(--clr-text-combinado);
}

.main-avisos h4, .main-avisos h3{
  font-family: var(--tp-text-title);
}

/*------------------------------------------------------------------*/
/*----------FAQS-----------------------------------------------*/
/*------------------------------------------------------------------*/


.faq {
  max-width: 900px;
  margin: auto;
  background: var(--clr-fond-home);
  padding: 2rem;
  color: var(--cls-text-large);
  font-family: var(--tp-text-body);
  font-weight: 300;
}

h2.faq-title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 2rem;
  font-family: var(--tp-specially);
  font-weight: 500;
  position: relative;
}
h2.faq-title img{
  width: 2em;
}

.faq-item {
  border-bottom: 1px solid var(--cls-text-large);
  position: relative;

}


.faq-question {
  width: 100%;
  background: none;
  border: none;
  padding: 1.2rem 0;
  font-size: 1.1rem;
  font-weight: bold;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--clr-text-white);
  font-family: var(--tp-text-body);
  font-weight: 300;
  text-transform: uppercase;
  position: relative;

}
.faq-question:hover{
  font-weight: 500;
}

/* Botón circular */
.icon {
  width: 32px;
  height: 32px;
  border: 1px solid var(--clr-text-combinado);
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}

/* Línea horizontal */
.icon::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 1px;
  background: var(--clr-text-combinado);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Línea vertical (para +) */
.icon::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 14px;
  background: var(--clr-text-combinado);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Cuando está abierto se convierte en - */
.faq-item.active .icon::after {
  display: none;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  position: relative;
}

.faq-item.active .faq-answer {
  max-height: 300px;
  margin-bottom: 1rem;
}

/*------------------------------------------------------------------*/
/*----------CONTACTO-----------------------------------------------*/
/*------------------------------------------------------------------*/
h2.h2-contacto{
  text-align: center;
  font-family: var(--tp-text-title);
  color: var(--clr-text-white);
}

h2.h2-contacto img{
  width: 4em;
}

form{
  font-family: var(--tp-text-body);
  color: var(--clr-text-white);
  font-weight: 300;
  border: .8px solid var(--clr-borde-productos);
  padding: 3em;
  border-radius: 3px;
  position: relative;
}
form label{
  margin-top: 1em;
}
form input{
  border: none;
  border-radius: 2px;
}

.boton-contacto{
  text-align: center;
  margin-top: 1em;
}

/*------------------------------------------------------------------*/
/*----------MOBILE-----------------------------------------------*/
/*------------------------------------------------------------------*/

@media (max-width: 768px) {
  .header{
    justify-content: space-between;
  }
  .menu-toggle{
    display: flex;/* aparece solo aquí */
    order: 1;
    margin-left: 1em;

    width: 60px;
    height: 60px;

    border: 2px solid var(--clr-text-white);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    flex-direction: column;

    align-items: center;/* centra vertical */
    justify-content: center;/* centra horizontal */
  }

  .logo-alfa{
    order: 2;
    margin-left: auto;
  }

  .logo-alfa img{
    width: 5em;
    right: 1em
  }

  .menu {
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5em;
    font-size: 1.1em;
  }

  .menu-close {
    position: absolute;   /* 🔥 lo sacamos del flujo */
    top: 12px;
    right: 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    color: white;
    font-size: 1.4rem;
    background-color: var(--clr-boton-principal);
    border: none;
    border-radius: 100px;
    cursor: pointer;
  }

  .nav {
    position: fixed;
    top: 0;
    left: -260px;
    width: 260px;
    height: 100vh;
    background: var(--nv-color-fond);
    padding: 1rem;
    transition: left 0.3s ease;
    z-index: 1000;
  }

  .nav.active {
    left: 0;
  }

  /*destacados*/
  .flex-icones{
    display: block;
    margin-top: 1em;
  }
  h1.h1-dest{ 
    text-align: center;
  }
  .destacados-img {
    text-align: center;
    margin-top: -7em;
  }
  .pbody{
    text-align: center;
    margin-top: 3em;
  }
  .position-a-explora{
    text-align: center;
  }

  /*carrusel de productos*/
  .products-swiper{
    margin: 5em 0em 1em 0em;    
  }

  .product-card{
    height: 32em;
  }
  
  /**elegir alfa*/
  .elegiralfa{
  background-image: none;
  background-color: var(--clr-fond-home);
  background-repeat: no-repeat;
  background-size: cover;
  }
  .elegir-alfa-text{
    background-image: url(../images/fondo-pareja-manos.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 15em;
    display: block;

  }
  .elegir-alfa-text{
    text-align: center;
  }
  .elegir-alfa-text h4{
    text-align: right;
    padding: 1em .5em 0em 0em;
  }

  .elegir-alfa-text img{
    transform: rotate(-90deg);
    margin: -15px 0px 0px 0px;
  }

  /**iconos info compra*/
  .iconos-sup{
  justify-content: center;
  padding-top: 3em;
  }
  .iconos-inf{
  display: grid;
  justify-content: center;
  }
  .iconos-end{
    display: inline-flex;
    justify-content: center;
  }
  .borde-ico-alfa{
    width: 50%;
    min-height: 10em;
  }
  .text-ico-alfa p{
  font-size: .8em;}

  .position-a-descubre{
  text-align: center;
  display: grid;
  grid-template-columns: none;
  padding: 1em 3em 0em 3em;
  }

  .btn-descubre{grid-column: 1;}

  /**alfa marca**/
  .alf-marc-text h5{
    line-height: 150%;
  } 

  /*cards blog*/
  .blog-cards{
  display: block;  
  }

  .bord-card p{
    margin-top: 1em;
  }

  /***quizzes***/
  section.quizzes{
    padding: 2em 0em 2em 0em;
  }

  .quiz-content{
  display: block;
  margin-top: 2em;
  }

  .quiz-card{
    margin-bottom: 3em;
  }

  .quiz-card a{
  margin-top: 0em;
  }


  /** footer */
  .foot-img{
    text-align: center;
    padding-bottom: 1em;
  }
  .foot-aviso{
  text-align: center;
  font-size: 1.2em;
  }

  .redes-content{
    text-align: center;
    justify-content: center;
  }

  .redes-icon a img{
    width: 70%;
    margin: 1em 0em 1em 0em;
  }
  .pie{
    display: block;
    justify-content: center;
    text-align: center;
  }
  .pie p{
    font-size: .8em;
  }

  /**productos*/
  .content-not-new{
    padding-top: 2em;
  }
  .cartera-productos{
  height: auto;
  }

  .cartera-ico{
  display: flex;
  justify-content: space-between;
  width: 3em;
  width: 100%;
  }

  /**producto**/
  .product-gallery {
    flex-direction: column;
  }
  .product-main{
    width: 100%;
  }

  .product-thumbs {
    width: 100%;
    height: auto;
    order: -1;  
  }

  .product-thumbs .swiper-slide{
      width: auto;             
  }

  .ctg-product{
    margin-top: 2em;
    padding-top: 0;
  }

  .info-product h2{
    font-size: 2em;
  }
  .alin-c-product{
    text-align: center;
  }

  .ico-produc-ofr img{
  width: 3em;
  }
  /**TABS*/
  section.especif{
    padding-top: 2em;
  }
  .tabs-botones {
    flex-direction: column;
    text-align: center;
    display: block;

    gap: 0em;
    margin: 0em;
  }

  .tab-btn{
    margin-bottom: .5em;
    width: 80%;
  }

  .tab-panel {
    max-width: 100%;
  }

/***COMBOS***/
.title-combo{
  display: block;
  text-align: center;
}

.title-combo img{
  transform: rotate(90deg);
}

.title-tipos-combo h3{
  font-size: 2em;
}

.products-combo{
  display: block;
  width: 70%;
  margin: 0 auto;
}

.card-combo{
  margin-bottom: 1em;
}

/******notas********/
.img-2 img{
  width: 30%;
  margin-top: 1em;
}

.content-art{
  margin-top: -2em;
  padding: 0em 1em 2em 1em;
}

.cont-not-sec p.mas-notas{
  font-size: 2em;
  text-align: center;
}

.notas-p-text p{
  font-size: 1em;
  margin-top: 1em;
  margin-bottom: .5em;
  line-height: 180%;
}

img.shape-not-purp{
  width: 100%;

}


.caj-img-sec img{
  width: 100%;
  height: 10em;
  object-position: left; 

}

.caj-text-sec p{
  margin-bottom: .8em; 
}

/****FAQSS***/
.main-notas, .main-avisos, .main-faqs{
  padding: 1em 0em 3em 0em;
}
.faq-item.active .faq-answer {
  max-height: 600px;
}
/**shapes*/
img.shape-purple-one,img.shape-purple-two, img.shape-purple-prod,
img.shape-pink-prod, img.shape-tinto-listpro,img.shape-faq-pink
{
  width: 100%;
}
img.shape-tinto-one{
  width: 70%;
  bottom: 0;
}
img.shape-pink-one{
  width: 100%;
  bottom: 0;
}

img.shape-morad-listpro{
  width: 80%;
  top: -5em;
}
img.shape-pink-listpro{
  width: 100%;
  right: 0em;

}










}