/* * * * * * * * * * * * * * * * * * * *
 *                                     *
 *               Summary               *
 *                                     *
 *    0. Header                        *
 *    1. Footer                        *
 *    2. 404                           *
 *                                     *
 * * * * * * * * * * * * * * * * * * * */

/***************************************/

/***************************************
 *                                     *
 *    -. Loading                       *
 *                                     *
 ***************************************/

.loading-overlay__wrapper:before,
.loading-overlay__wrapper:after{
  content: url('http://localhost/jaisal/wp-content/uploads/2023/08/arrows-rotated-1.png');
  width: auto;
  height: auto;
  object-fit: contain;
  position: absolute; 
  animation: fadeInY .8s forwards var(--t-default);
}

.loading-overlay__wrapper:before{
  --position-start: -100%;
  --position-end: -45%;
  --rotation: 180deg;
  top: 0;
  right: 0;
}

.loading-overlay__wrapper:after{
  --position-start: 100%;
  --position-end: 45%;
  --rotation: 0;
  bottom: 0;
  left: 0;
}

.loading-overlay__logo{
  margin: var(--s-xl);
  opacity: 0;
  animation: fade-in-opacity 1s forwards var(--t-default);
}

@keyframes fadeInY {
  0%{
    opacity: 0;
    transform: translateY(var(--position-start)) rotateZ(var(--rotation));
  }
  20%{
    opacity: 0;
  }
  100%{
    opacity: 1;
    transform: translateY(var(--position-end)) rotateZ(var(--rotation));
  }
}

/***************************************
 *                                     *
 *    -. Verificación de edad          *
 *                                     *
 ***************************************/

.age{
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  overflow: hidden;
  background-color: var(--c-black);
}

.age__wrapper{
  width: inherit;
  height: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.age__background{
  width: inherit;
  height: inherit;
  object-fit: cover;
  position: absolute;
  z-index: -1;
}

.age__container{
  width: auto;
  height: auto;
  border-radius: 25px;
  overflow: hidden;
  margin: var(--s-m);
}

.age__container__top{
  width: 100%;
  display: flex;
  justify-content: center;
  padding: var(--s-s) var(--s-xl);
  background: rgba( 255, 255, 255, 0.7 );
  backdrop-filter: blur( 20px );
  -webkit-backdrop-filter: blur( 20px );
}

.age__container__content{
  width: 100%;
  position: relative;
  padding: var(--s-xxl);
  background: rgb(164, 18, 63, 0.8);
  backdrop-filter: blur( 20px );
  -webkit-backdrop-filter: blur( 20px );
}

.age__title{
  color: var(--c-white);
  text-align: center;
  margin-bottom: var(--s-xl);
  font-size: var(--s-xl);
}

.age__subtitle{
  font-size: var(--s-l);
  color: var(--c-white);
  margin-bottom: var(--s-m);
  font-weight: 200;
  text-align: center;
}

.age__form{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--s-m);
}

.age__button{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--s-xs) var(--s-xl);
  border-radius: 20px;
  background-color: var(--c-white);
  cursor: pointer;
}

/***************************************
 *                                     *
 *    0. Header                        *
 *                                     *
 ***************************************/

body:has(#wpadminbar) #page-header {
  margin-top: 32px;
}

/***** Contenedor principal *****/

#page-header {
  width: 100%;
  height: auto;
  display: flex;
  margin: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
}

/***** Menú Desktop  *****/

.desktop-header {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
}

.desktop-header__wrapper {
  width: 100%;
  height: auto;
}

.desktop-header__wrapper--top {
  height: 100px;
  display: flex;
  background-color: var(--c-black);
  z-index: 2;
}

.desktop-header__wrapper--bottom {
  padding: var(--s-l) 0 var(--s-xs);
  background-color: var(--c-white);
  filter: drop-shadow(0px -10px 25px var(--c-black));
  z-index: 1;
}

.desktop-header__section {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--s-xs);
  position: relative;
  flex: 1 1;
}

.desktop-header__section--left {
  justify-content: space-between;
}

.desktop-header__section--center {
  width: min(35%, 330px);
  align-items: flex-start;
  flex: unset;
}

.desktop-header .site-logo {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  padding: var(--s-xs) 0;
  background-color: var(--c-secondary);
  border-radius: 0 0 25px 25px;
}

.desktop-header .site-logo a {
  display: flex;
}

.desktop-header .site-logo .site-logo__img {
  width: 75%;
  margin: auto;
}

.desktop-header__navigation,
.desktop-header__categories {
  width: 100%;
}

.desktop-header__navigation ul,
.desktop-header__categories ul {
  display: flex;
  justify-content: space-around;
}

.desktop-header__navigation a {
  color: var(--c-white);
}

.desktop-header__categories .menu-item {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.desktop-header__categories .menu-item:hover .sub-menu {
  display: flex;
  visibility: visible;
}

.desktop-header__categories .menu-item .sub-menu {
  width: auto;
  max-width: unset;
  display: none;
  flex-direction: column;
  gap: var(--s-s);
  padding: var(--s-l) var(--s-m) var(--s-xs);
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--c-white);
  visibility: collapse;
}

.desktop-header__categories .menu-item a {
  border-bottom: 2px solid;
  border-color: transparent;
  padding-bottom: var(--s-xxs);
}

.desktop-header__categories .menu-item a:hover {
  border-color: var(--c-primary);
}

.desktop-header__categories .menu-item .sub-menu .menu-item {
  justify-content: flex-start;
}

.desktop-header__categories a {
  color: var(--c-black);
}

.desktop-header__section .widget:has(.logo-52) {
  width: auto;
  height: 100%;
  aspect-ratio: 1;
}

.desktop-header__section .dgwt-wcas-sf-wrapp {
  padding-right: var(--s-m);
}

/***** Mobile Desktop  *****/

.mobile-header{
  width: 100%;
  height: auto;
  display: none;
  flex-wrap: nowrap;
  background-color: var(--c-black);
  justify-content: space-between;
  border-bottom: 7px solid var(--c-primary);
}

.mobile-header__wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.mobile-header__wrapper--left{
  padding: var(--s-xs) var(--s-m);
}

.mobile-header__wrapper--center{
  padding: var(--s-xs);
  flex-direction: row;
  gap: var(--s-xxs) var(--s-s);
  flex-wrap: wrap;
}

.mobile-header__wrapper-right{
  justify-content: flex-start;
}

.mobile-header__section{
  display: flex;
  position: relative;
}

.mobile-header__button{
  width: 30px;
  aspect-ratio: 1;
  display: flex;
  align-self: center;
  background-color: white;
  border-radius: 5px;
  cursor: pointer;
}

.mobile-header__menu{
  width: 80%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  background-color: var(--c-white);
  z-index: 10;
  transform: translateX(-100%);
  transition: .3s;
}

.mobile-header__menu--active{
  transform: translateX(0);
}

.mobile-header__menu__top{
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: var(--s-s) var(--s-m);
  background-color: var(--c-primary);
}

.mobile-header__categories{
  width: 100%;
  height: 100%;
}

.mobile-header__categories ul{
  width: inherit;
  height: inherit;
  display: flex;
  flex-direction: column;
  gap: var(--s-xs);
}

.mobile-header__categories li{
  width: 80%;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-direction: column;
  padding: var(--s-m);
  border-bottom: 1px solid var(--c-grey-2);
}

.mobile-header__categories a{
  color: var(--c-black);
}

.mobile-header__section .site-logo__img{
  width: 170px;
}

.mobile-header__section .widget{
  width: 45px;
}

.mobile-header__navigation{
  width: 100%;
}

.mobile-header__navigation ul{
  width: inherit;
  padding: var(--s-xs);
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background-color: var(--c-primary);
  border-radius: 0 0 0 15px;
  list-style: none !important;
}

.mobile-header__navigation a{
  color: var(--c-white);
  font-weight: 200;
  font-size: var(--s-s);
}

.mobile-header__searchbar{
  padding: var(--s-s);
}

.mobile-header__searchbar .dgwt-wcas-search-wrapp{
  min-width: 160px;
}

.mobile-header__searchbar .dgwt-wcas-sf-wrapp{
  height: 30px;
  border-radius: 25px;
  overflow: hidden;
}

.mobile-header__searchbar .dgwt-wcas-ico-magnifier{
  display: none;
}

.mobile-header__searchbar .dgwt-wcas-search-input{
  height: 100% !important;
  padding: var(--s-xs) !important;
}


/***************************************
 *                                     *
 *    1. Footer                        *
 *                                     *
 ***************************************/

.footer {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
}

.footer * {
  color: var(--c-white);
}

.footer__wrapper {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-xxl);
  padding: var(--s-l);
  margin: auto;
  background-image: url("http://localhost/jaisal/wp-content/themes/jaisal-theme/assets/img/background-texture.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.footer__wrapper--bottom {
  width: 100%;
  justify-content: center;
  align-items: center;
  padding: unset;
  background-color: var(--c-primary);
  background-image: unset;
}

.footer__wrapper .site-logo {
  margin-bottom: var(--s-l);
}

.footer__wrapper .site-logo img {
  width: 400px;
}

.widget--footer {
  width: 100%;
}

.widget--footer > .wp-block-columns {
  width: 100%;
  justify-content: center;
  gap: 60px; 
}

.widget--footer > .wp-block-columns > .wp-block-column {
  flex: unset;
}

.footer__group {
  margin-bottom: var(--s-xl);
}

.footer__title {
  width: fit-content;
  display: flex;
  flex-direction: column;
  margin-bottom: var(--s-l);
  font-size: var(--s-xl);
  font-weight: 600;
}

.footer__title::after {
  content: "";
  width: auto;
  height: 5px;
  display: flex;
  border-radius: 50px;
  background-color: var(--c-primary);
  margin-top: var(--s-xxs);
}

.footer__item p {
  font-size: var(--s-m);
}

.footer__icon {
  height: 45px;
  aspect-ratio: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--s-xxs);
}

.footer__icon img {
  width: 80%;
}

/***************************************
 *                                     *
 *    2. Main Container                *
 *                                     *
 ***************************************/

#primary {
  width: 100%;
  display: flex;
}

#main {
  width: 100%;
  margin-top: 150px;
}

/***************************************
 *                                     *
 *    -. Producto                      *
 *                                     *
 ***************************************/

.product {
  width: 280px !important;
  min-width: 280px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.product .woocommerce-LoopProduct-link {
  position: relative;
}

.product .woocommerce-LoopProduct-link::after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  background-color: var(--c-grey-1);
  border-radius: 120px 120px 0 0;
  z-index: -1;
}

.product .woocommerce-LoopProduct-link:hover .attachment-woocommerce_thumbnail {
  transform: scale(1.05);
}

.product .attachment-woocommerce_thumbnail {
  width: 85%;
  padding-top: var(--s-m);
  margin: 0 auto !important;
  transition: 0.3s;
}

.product .woocommerce-loop-product__title {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--s-l) var(--s-s) !important;
  background-color: var(--c-primary);
  color: var(--c-white);
  text-align: center;
  font-weight: 400;
}

.product .button {
  width: 100%;
  display: flex !important;
  justify-content: center;
  background-color: var(--c-black) !important;
  margin: unset !important;
  border-radius: unset !important;
  color: var(--c-white) !important;
  font-weight: 400 !important;
}

/***************************************
 *                                     *
 *    -. Filtros                       *
 *                                     *
 ***************************************/


.bapf_sfilter{
  margin-bottom: var(--s-xxs) !important;
}

.bapf_head{
  display: flex;
  border-radius: 25px;
  padding: var(--s-xs) var(--s-m);
  background-color: var(--c-secondary);
  cursor: pointer;
}

.bapf_hascolarr{
  width: 100%;
  justify-content: space-between;
  align-items: center;
  color: var(--c-white);
  font-weight: 200;
  padding: unset !important;
}

.bapf_colaps_smb{
  position: relative;
  right: unset;
}

.bapf_body ul{
  display: flex;
  flex-direction: column;
  gap: var(--s-xs);
  padding: var(--s-m);
}

.bapf_body li{
  display: flex;
  gap: var(--s-xs);
  justify-content: flex-start;
  align-items: flex-end;
  position: relative;
}

.bapf_body li.checked::before{
  background-color: var(--c-secondary);
}

.bapf_body li:before{
  content: '';
  width: 15px;
  aspect-ratio: 1;
  border: 1px solid var(--c-grey-2);
  background-color: var(--c-grey-1);
  border-radius: 5px;
  cursor: pointer;
}

.bapf_body li input{
  display: none;
}


/***************************************
 *                                     *
 *    -. Tienda                        *
 *                                     *
 ***************************************/

#main:has(> .products) {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.woocommerce-archive-banner {
  width: 100vw;
  height: auto;
}

.woocommerce-archive-banner img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.woocommerce-notices-wrapper {
  width: 100%;
  margin: var(--s-m) 0;
  padding: 0 var(--s-xxl);
}

.woocommerce-breadcrumb,
.woocommerce-result-count,
.woocommerce-ordering {
  width: 50%;
  display: flex;
  align-items: flex-end;
  margin: unset !important;
  float: unset !important;
}

.woocommerce-breadcrumb {
  justify-content: flex-start;
  gap: var(--s-xxs);
  padding-left: var(--s-xxl) !important;
}

.woocommerce-breadcrumb__icon {
  margin-right: var(--s-xxs);
}

.woocommerce-breadcrumb__item,
.woocommerce-breadcrumb__delimiter {
  font-weight: 600;
  font-size: var(--s-m);
}

.woocommerce-breadcrumb__item:not(:has(a)) {
  color: var(--c-primary);
}

.woocommerce-filter-button{
  width: 50%;
  display: none !important;
  gap: var(--s-xxs);
  align-items: center;
  padding-left: var(--s-l) !important;
}

.woocommerce-filter-text{
  color: var(--c-secondary);
}

.woocommerce-result-count {
  display: none !important;
}

.woocommerce-ordering {
  justify-content: flex-end;
  padding-right: var(--s-xxl) !important;
}

#main > #custom-woo-sidebar {
  width: 30%;
  margin-top: var(--s-xxl);
  padding: 0 var(--s-l);
}

#main > #custom-woo-sidebar .woocommerce-filter-button{
  padding-left: unset !important;
  margin-bottom: var(--s-s);
}

#main > #custom-woo-sidebar .woocommerce-filter-button h2{
  color: var(--c-secondary);
}

.products {
  width: 70%;
  margin-top: var(--s-xxl) !important;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.products::before,
.products::after {
  content: unset !important;
}

.products .product {
  margin: 0 0 var(--s-xxl) !important;
  float: unset !important;
}

.woocommerce-pagination {
  margin: 0 auto var(--s-xl);
}

.woocommerce-pagination .page-numbers {
  border: unset !important;
}

.woocommerce-pagination .page-numbers li {
  border: unset !important;
  float: unset !important;
}

.woocommerce-pagination .page-numbers li .page-numbers {
  width: 32px;
  aspect-ratio: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--c-black) !important;
  background-color: unset !important;
  border-radius: 100%;
  transition: 0.3s;
}

.woocommerce-pagination .page-numbers li .page-numbers:hover,
.woocommerce-pagination .page-numbers li .page-numbers.current {
  background-color: var(--c-secondary) !important;
  color: var(--c-white) !important;
}

/***************************************
 *                                     *
 *    -. Producto Individual           *
 *                                     *
 ***************************************/

.single-product .product:has(.summary) {
  width: 90% !important;
  align-items: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--s-xs) var(--s-xxl);
  margin: var(--s-xxl) auto 0 !important;
}

.single-product .product:has(.summary) .woocommerce-product-gallery {
  width: min(450px, 90%);
  position: relative;
}

.single-product .product:has(.summary) .woocommerce-product-gallery img {
  padding: var(--s-xl) 0;
}

.single-product .product:has(.summary) .woocommerce-product-gallery::after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  background-color: var(--c-grey-1);
  border-radius: 200px 200px 0 0;
  z-index: -1;
}

.single-product .product:has(.summary) .summary {
  padding-top: var(--s-xxl);
  margin: unset !important;
}

.single-product .product:has(.summary) .product_title {
  font-size: var(--s-xxl);
  font-family: var(--f-variation);
  border-bottom: 2px solid var(--c-black);
  margin-bottom: var(--s-s);
  padding-bottom: var(--s-xxs);
}

.single-product .product:has(.summary) .related {
  width: 80%;
  margin: auto;
  flex-direction: column;
}

.single-product .product:has(.summary) .related > h2 {
  font-size: var(--s-xl);
  font-weight: 400;
  font-family: var(--f-variation);
  margin-bottom: var(--s-xl);
}

.single-product .product:has(.summary) .related .products {
  width: 100% !important;
}

.single-product .product:has(.summary) .related .products::after,
.single-product .product:has(.summary) .related .products::before {
  content: unset !important;
}

/***************************************
 *                                     *
 *    -. Blog                          *
 *                                     *
 ***************************************/

.blog__intro {
  width: 90%;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: var(--s-xl);
}

.blog__icon {
  width: 110px;
  margin-bottom: var(--s-xs);
}

.blog__title {
  font-family: var(--f-variation);
  font-size: var(--s-xl);
  margin-bottom: var(--s-l);
}

.blog__description {
  max-width: 80ch;
  text-align: center;
  margin-bottom: var(--s-m);
}

.blog__content {
  width: 90%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-bottom: var(--s-xxl);
}

.blog__entry {
  width: 425px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-black);
}

.blog__entry__info {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  position: relative;
}

.blog__entry__info:after {
  content: "";
  width: 100%;
  height: 100px;
  display: block;
  position: absolute;
  bottom: 0;
  z-index: -1;
  background-color: var(--c-grey-1);
}

.blog__entry__thumbnail {
  padding: var(--s-l) var(--s-l) 0;
}

.blog__entry__thumbnail__link {
  display: flex;
  margin: auto;
  border-radius: 15px;
  overflow: hidden;
  transition: 0.2s;
}

.blog__entry:has(.blog__entry__link:hover) .blog__entry__thumbnail__link,
.blog__entry__thumbnail__link:hover {
  transform: translate3d(3px, -3px, 0) rotateZ(2.5deg);
}

.blog__entry__img {
  width: 100%;
  aspect-ratio: 1;
  object-position: center;
  object-fit: cover;
}

.blog__entry__meta {
  padding: var(--s-l);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--s-xs);
}

.blog__entry__date {
  font-weight: 600;
  line-height: normal;
}

.blog__entry__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-m) var(--s-m) var(--s-l);
}

.blog__entry__title {
  font-size: var(--s-l);
}

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

/***************************************
 *                                     *
 *    -. Entrada individual            *
 *                                     *
 ***************************************/

.entry {
  display: flex;
  flex-direction: column;
}

.entry__top {
  width: 100%;
  min-height: calc(100vh - 190px);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background-color: var(--c-black);
  background-image: url("http://localhost/jaisal/wp-content/themes/jaisal-theme/assets/img/background-entry.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.entry__top:after{
  content: '';
  width: 90%;
  height: 10px;
  background-color: var(--c-primary);
  margin: auto;
  position: absolute;
  bottom: -10px;
  z-index: -1;
}

.entry__info {
  width: 50%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-direction: column;
  padding: var(--s-xxl);
}

.entry__title {
  color: var(--c-black);
  text-shadow: -1px -1px 0 var(--c-white), 1px -1px 0 var(--c-white),
    -1px 1px 0 var(--c-white), 1px 1px 0 var(--c-white);
  font-size: 7rem;
  text-align: right;
}

.entry__meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-xs);
}

.entry__date {
  color: var(--c-white);
  line-height: normal;
  font-size: var(--s-l);
}

.entry__thumbnail {
  width: 50%;
  height: 100%;
}

.entry__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.entry__content {
  width: 100%;
  margin-bottom: var(--s-xxl);
}

.entry__wrapper {
  width: 100%;
  background-color: var(--c-primary);
  display: flex;
  justify-content: center;
}

.entry__wrapper > .wp-block-group {
  width: 80%;
  margin: auto;
  padding: var(--s-xl) 0;
}

.entry__wrapper > .wp-block-group *{
  color: var(--c-white);
}

.entry__wrapper > .wp-block-group ul{
  display: flex;
  flex-direction: column;
  gap: var(--s-xs);
  margin-bottom: var(--s-l);
  list-style: inside;
}

.entry__wrapper > .wp-block-group p{
  max-width: 80ch;
  margin-bottom: var(--s-m);
}

.entry__wrapper .wp-block-heading {
  font-size: var(--s-xl);
  font-family: var(--f-variation);
  font-weight: 200;
  margin-bottom: var(--s-xxl);
}

.entry__preparation {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--s-xxl) 0;
  position: relative;
}

.entry__preparation:before {
  content: "";
  width: 100%;
  height: 300px;
  display: block;
  position: absolute;
  top: 0;
  background-color: var(--c-primary);
  z-index: -1;
}

.entry__preparation__header {
  margin: var(--s-xxl) 0 var(--s-xl);
}

.entry__preparation__title {
  font-family: var(--f-variation);
  font-size: var(--s-xl);
  color: var(--c-white);
}

.entry__preparation__content {
  width: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  margin: auto;
}

.entry__preparation__video {
  width: 70%;
  margin: auto;
}

.entry__preparation__decoration {
  width: 85%;
  height: auto;
  display: flex;
  justify-content: space-between;
  position: absolute;
  bottom: -10%;
  z-index: -1;
}

.entry__preparation__item {
  width: 200px;
  aspect-ratio: 1;
  transform: rotateZ(-10deg);
}

.entry__preparation__item:last-child {
  transform: rotateZ(10deg);
}

.entry__rrss {
  width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: var(--s-xxl) auto 0;
}

.entry__rrss__title {
  margin-bottom: var(--s-m);
}

.entry__rrss__wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--s-m);
}

/***************************************
 *                                     *
 *    -. Inicio                        *
 *                                     *
 ***************************************/

.home__section{
  --anim-position: 100%;
  width: 100%;
  height: calc(100vh - 160px);
  background-color: var(--c-black);
  overflow: hidden;
}

.home__section:nth-child(even){
  --anim-position: -100%;
  background-color: var(--c-primary);
}

.home__banner figure{
  max-height: calc(100vh - 200px);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.home__banner img{
  width: 100%;
  object-fit: contain;
  object-position: center;
}

.home__section__arrow,
.home__section__arrow figure{
  height: 100%;
  overflow: hidden;
}

.home__section__arrow img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateX(20%);
  opacity: .6;
}

.home__section__arrow--left img{
  transform: translateX(-20%) rotateY( 180deg );
}

.home__section > .wp-block-column{
  opacity: 0;
}

.home__section:nth-child(even) > .wp-block-column:last-child,
.home__section > .wp-block-column:first-child{
  --anim-delay: .2s;
}

.home__section > .wp-block-column:nth-child(even){
  --anim-delay: .1s;
}

.home__section:nth-child(even) > .wp-block-column:first-child,
.home__section > .wp-block-column:last-child{
  --anim-delay: 0s;
}

.home__section--animated > .wp-block-column{
  animation: fadeInX .7s var(--anim-delay) forwards var(--t-default);
}

.home__section *{
  color: var(--c-white);
}

.home__section h1{
  font-size: var(--s-xxl);
  font-family: var(--f-variation);
  margin-bottom: var(--s-xxl);
}

.home__section p{
  max-width: 80ch;
  font-size: var(--s-m);
  margin-bottom: var(--s-xxl);
}

.home__section__button a{
  color: var(--c-black);
  background-color: var(--c-white);
  border-radius: 30px;
  padding: var(--s-xs) var(--s-xxl);
  text-decoration: none;
}

@keyframes fadeInX {
  0%{
    opacity: 0;
    transform: translateX(var(--anim-position));
  }
  60%{
    opacity: 1;
  }
  100%{
    opacity: 1;
    transform: translateX(0);
  }
}

.home__featured{
  padding: var(--s-xxl);
}

.home__featured h1{
  font-size: var(--s-xxl);
  font-family: var(--f-variation);
  margin-bottom: var(--s-xxl);
}

.home__featured .woocommerce{
  overflow: scroll;
  padding-bottom: var(--s-m);
}

.home__featured .products{
  width: 100%;
  margin: var(--s-xl) 0 0 !important;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: var(--s-xxl);
}

/***************************************
 *                                     *
 *    -. Contacto                      *
 *                                     *
 ***************************************/

.page-id-1056 #main{
  width: 80%;
  margin: 200px auto;
}

.page-id-1056 article > .wp-block-group{
  margin-bottom: var(--s-xl);
}

.page-id-1056 article > .wp-block-group h1{
  font-size: var(--s-xl);
  font-family: var(--f-variation);
  margin-bottom: var(--s-xxl);
}

.page-id-1056 .wp-block-columns{
  gap: 5rem;
}

.page-id-1056 .wp-block-column{
  display: flex;
  flex-direction: column ;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--s-xxl);
}

.page-id-1056 .wp-block-column:first-child{
  align-items: flex-end;
}

.page-id-1056 .contact__item{
  width: min(80%, 90ch);
}

.page-id-1056 .contact__item .wp-block-group{
  width: 100%;
  border-bottom: 1px solid var(--c-grey-2);
  padding-bottom: var(--s-s);
}

.page-id-1056 .contact__item h2{
  margin-bottom: var(--s-s);
}

.page-id-1056 .contact__item__icon{
  width: auto;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-right: var(--s-xs);
}

.page-id-1056 .contact__item__icon img{
  width: 90%;
}

.page-id-1056 .form{
  align-items: center !important;
}

.page-id-1056 .wpcf7{
  width: min(100%, 500px);
}

.page-id-1056 .wpcf7-form{
  display: flex;
  flex-direction: column;
  gap: var(--s-s);
}

.page-id-1056 .wpcf7-form p:has(.wpcf7-form-control){
  width: 100%;
}

.page-id-1056 .wpcf7-form p:has(.wpcf7-form-control.wpcf7-submit){
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--s-xs);
}

.page-id-1056 .wpcf7-form-control{
  width: 100%;
  border-radius: 15px;
  background-color: var(--c-grey-1);
  padding: var(--s-xxs) var(--s-s);
  margin-top: var(--s-xxs);
  outline: unset !important;
  border: 1px solid transparent;
  transition: .3s;
}

.page-id-1056 .wpcf7-form-control:focus{
  border-color: var(--c-grey-2);
}

.page-id-1056 .wpcf7-form-control.wpcf7-submit{
  width: auto;
  padding: var(--s-xs) var(--s-xl);
  cursor: pointer;
}

.page-id-1056 .wpcf7-response-output{
  margin: var(--s-s) 0 0 !important;
  padding: var(--s-xs) var(--s-xl) !important;
}

/***************************************
 *                                     *
 *    -. Nsootros                      *
 *                                     *
 ***************************************/

.page-id-1029 .about__section{
  width: 100vw;
  padding: var(--s-xxl) 0;
}

.page-id-1029 .wp-block-columns{
  width: 70%;
  margin: auto;
}

.page-id-1029 .about__section--top{
  min-height: 100vh;
  background-color: var(--c-primary);
}

.page-id-1029 .about__section--top h1{
  color: var(--c-white);
  font-size: var(--s-xxl);
  font-family: var(--f-variation);
  margin-bottom: var(--s-m);
}

.page-id-1029 .about__section--top img{
  width: 100%;
}

.page-id-1029 .about__section--middle .wp-block-group__inner-container{
  display: flex;
  flex-direction: column;
  gap: var(--s-xxl);
}

.page-id-1029 .about__section__info{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.page-id-1029 .about__section__info h2{
  font-size: var(--s-xl);
  font-family: var(--f-variation);
  margin-bottom: var(--s-m);
  border-bottom: 2px solid var(--c-primary);
}

.page-id-1029 .about__section__info p{
  max-width: 80ch;
}

.page-id-1029 .about__section__item {
  width: min(100%, 820px);
  margin: 0 auto var(--s-xxl);
}

.page-id-1029 .about__section__item figure{
  min-width: 80px;
}

.page-id-1029 .about__section__item .wp-block-group h2{
  font-family: var(--f-variation);
  margin-bottom: var(--s-xs);
}

.page-id-1029 .about__section__item .wp-block-group p{
  max-width: 80ch;
}


/***************************************
 *                                     *
 *    -. Responsive                    *
 *                                     *
 ***************************************/

@media (max-width: 768px){
  /* Header */
  .desktop-header{display: none;}
  .mobile-header{display: flex;}

  /* Producto */
  .product {
    width: 220px !important;
    min-width: 220px !important;
  }

  /* Main Container */
  #main{
    margin-top: 90px;
  }

  /* Tienda */
  .woocommerce-breadcrumb{
    width: 100%;
    margin-bottom: var(--s-s) !important;
    padding-left: var(--s-l) !important;
  }

  .woocommerce-filter-button{ display: flex !important; }

  #main > #custom-woo-sidebar {
    width: 80%;
    min-height: 100vh;
    position: fixed;
    top: 0;
    right: 0;
    margin-top: unset;
    padding: var(--s-m);
    z-index: 20;
    background-color: var(--c-white);
    transform: translateX(100%);
    transition: .3s;
  }

  .woocommerce-filters-active{
    transform: translateX(0) !important;
  }

  .products{
    width: 100%;
  }

  /* Entrada individual */
  .entry__top{
    flex-direction: column;
  }

  .entry__info,
  .entry__thumbnail{
    width: 100%;
  }

  .entry__info{
    padding: var(--s-l);
  }

  .entry__title{
    text-shadow: -0.5px 1.5px 0 var(--c-white), 0.5px -0.5px 0 var(--c-white), -0.5px 0.5px 0 var(--c-white), 0.5px 1.5px 0 var(--c-white);
    font-size: 5rem;
  }

  .entry__preparation__video{
    width: 100%;
  }

  .entry__preparation__decoration{
    display: none;
  }

  /* Inicio */
  .home__section{
    height: auto !important;
    height: calc(100vh - 160px);
    padding: var(--s-xl);
  }

  .home__section:nth-child(even){
    flex-direction: column-reverse;
  }

  .home__section__arrow{
    display: none;
  }

  .home__featured h1{
    font-size: var(--s-xl);
    margin-bottom: 0;
  }

  /* Contacto */

  .page-id-1056 #main{
    margin: 140px auto;
  }

  /* Nosotros */

  .page-id-1029 .about__section--top{
    min-height: unset;
  }

  .page-id-1029 .about__section--top h1{
    font-size: var(--s-l);
  }

  .page-id-1029 .wp-block-columns:first-child{
    flex-direction: column-reverse;
  }

  .page-id-1029 .about__section__info h2,
  .page-id-1029 .about__section__info p{
    text-align: start;
  }

  .page-id-1029 .wp-block-columns{
    width: 90%;
  }

  .page-id-1029 .about__section__item figure{
    min-width: 40px;
  }

}