/*
Theme Name: bootScore Child
Theme URI: https://bootscore.me/
Template: bootscore-main
Author: bootScore
Author URI: https://bootscore.me
Description: A powerful Bootstrap 5 WordPress Starter Theme with WooCommerce Support. Documentation. This theme gives you full control whatever you do and the full freedom to design whatever you want. It comes with a wide selection of category, page, post, author and archive templates as well as sidebar, header, footer and 404 widgets. There are no customizer settings in the backend. All settings can only be made by touching the code. Some CSS, HTML, PHP and JS Skills are required to customize it.
Tags: featured-images,threaded-comments,translation-ready
Version: 5.3.4.1712561603
Updated: 2024-04-08 09:33:23

*/

@font-face {
  font-family: "Nunito Sans";
  src: url("assets/fonts/NunitoSans7pt-Regular.woff2") format("woff2"), url("assets/fonts/NunitoSans7pt-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lexend Exa";
  src: url("assets/fonts/LexendExa-ExtraLight.woff2") format("woff2"), url("assets/fonts/LexendExa-ExtraLight.woff") format("woff");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lexend Exa";
  src: url("assets/fonts/LexendExa-Regular.woff2") format("woff2"), url("assets/fonts/LexendExa-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lexend Exa";
  src: url("assets/fonts/LexendExa-Medium.woff2") format("woff2"), url("assets/fonts/LexendExa-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* variables */

:root {
  --sk-primary: #cd1e45;
  --sk-light-primary: #f5d2da;
  --sk-dark-primary: #800721;
  --sk-secondary: #d8b491;
  --sk-light-secondary: #f5e9d9;
  --sk-dark-secondary: #8b6d50;
  --sk-dark-gray: #211102;
  --sk-light-gray: #f8f8f8;
}

::-moz-selection {
  /* Code for Firefox */
  color: var(--sk-light-gray);
  background: var(--sk-primary);
}

::selection {
  color: var(--sk-light-gray);
  background: var(--sk-primary);
}

/* ***  generales *** */

/* textos */
body {
  font-family: "Nunito Sans";
}

.h1,
.h2,
.h3,
.h4,
button {
  font-family: "Lexend Exa";
  color: var(--sk-primary);
}

.h1 {
  font-weight: 500;
  font-size: clamp(3rem, 4vw, 3.5rem);
}

.h1,
.h2,
.h3 {
  text-transform: uppercase;
}

.lead {
  font-family: "Lexend Exa";
  font-weight: 200;
  font-size: 2rem;
  color: var(--sk-dark-primary);
}

a {
  text-decoration: none;
}

/* botones */
.btn {
  font-weight: 200;
  border-radius: 0;
  text-transform: uppercase;
  padding: 0.75rem 1.5rem;
}

.btn-primary,
.btn-cta:hover {
  border: 1px solid var(--sk-primary);
  color: var(--sk-primary);
  background-color: transparent;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus-visible {
  background-color: var(--sk-light-primary) !important;
  color: var(--sk-dark-primary);
  border: 1px solid var(--sk-dark-primary) !important;
}

.btn-cta {
  background-color: var(--sk-primary);
  color: var(--sk-light-gray);
  border: 1px solid var(--sk-primary);
}

.btn-white {
  color: var(--sk-light-gray);
  border: 1px solid var(--sk-light-gray);
}

.btn-beige {
  color: var(--sk-secondary);
  border: 1px solid var(--sk-secondary);
}
.btn-beige:hover {
  background-color: var(--sk-secondary);
  color: #fff;
}

/* alergenos */
.alergenos {
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--sk-primary);
  position: sticky;
  z-index: 999;
  padding: 0.5rem;
  transition: transform 0.2s;
}

.alergenos:hover {
  background-color: var(--sk-dark-primary);
}

#offcanvasAlergenos {
  background-color: var(--sk-light-secondary);
}

/* --- boucing flecha --- */
.flecha {
  display: inline-block;
  width: 30px;
  height: 50px;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}

/* ==== Header ====  */
#masthead {
  position: absolute;
  width: 100%;
  z-index: 99;
}

#masthead .nav-link {
  text-transform: uppercase;
  font-weight: 200;
  font-family: "Lexend Exa";
  color: var(--sk-dark-gray);
  font-size: 1.25;
  transition: all 0.2s;
}

#masthead .nav-link.active {
  font-weight: 400;
  border-bottom: 2px solid var(--sk-primary);
}

#masthead .nav-link:hover {
  border-bottom: 1px solid var(--sk-primary);
  /* font-weight: 400; */
  transition: all 0.1s;
}

/* offcanvas */
#masthead .offcanvas.show,
#masthead .offcanvas.showing {
  height: fit-content;
  padding-bottom: 4rem;
  background-color: #f5e9d9e8;
}

#masthead .offcanvas.show .offcanvas-header,
#masthead .offcanvas.showing .offcanvas-header {
  margin-bottom: 1rem;
}

#masthead .offcanvas.show .offcanvas-body,
#masthead .offcanvas.showing .offcanvas-body {
  padding: 0;
  overflow: clip;
}

#masthead .offcanvas.show li:not(:last-child),
#masthead .offcanvas.showing li:not(:last-child) {
  border-bottom: 1px solid var(--sk-dark-primary);
}

#masthead .offcanvas.show li a,
#masthead .offcanvas.showing li a {
  color: var(--sk-dark-primary);
  font-size: 1.25rem;
  transition: 0.3s all;
}

#masthead .offcanvas.show li a:hover,
#masthead .offcanvas.showing li a:hover {
  opacity: 0.7;
  transform: scale(1.05);
}

/* ==== Home ==== */
/* --- hero --- */
.home {
  overflow-x: clip;
}

.home .hero {
  padding-top: 13rem;
  padding-bottom: 7rem;
  position: relative;
}

.home .hero .lead {
  margin-bottom: 9rem;
}

.home .hero .video {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.home .hero .video > * {
  width: 100%;
  object-fit: cover;
  height: 100%;
}

.home .hero:after {
  position: absolute;
  inset: 0;
  content: "";
  background-color: var(--sk-light-secondary);
  z-index: -1;
  mix-blend-mode: screen;
}

/* --- bienvenida --- */
.home .bienvenida .container-bienvenida {
  position: relative;
}
.home .bienvenida img {
  width: 100%;
}
.home .bienvenida .container-bienvenida > div:nth-child(2) {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.home .bienvenida .bg-after {
  position: relative;
}
.home .bienvenida .bg-after:after {
  position: absolute;
  content: "";
  inset: 0;
  background-color: var(--sk-primary);
  mix-blend-mode: screen;
}

/* --- disfruta --- */
.home .disfruta {
  background-color: var(--sk-light-secondary);
  position: relative;
}

.home .disfruta .cerezo-img {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 20vw;
}

.home .disfruta .h2 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  margin-top: 5rem !important;
}

.home .disfruta .h3 {
  color: var(--sk-light-secondary);
  transition: all 0.3s;
}

.home .disfruta .arrow .cards-text p {
  opacity: 0;
  color: #fff;
  height: 0;
  font-family: "Lexend Exa";
  font-weight: 200;
  transition: all 0.3s;
}

.home .disfruta .arrow:hover .cards-text p {
  opacity: 1;
  height: 100%;
  transition: all 0.3s;
}

.home .disfruta .arrow:hover .cards-text .h3 {
  transform: translateY(-25%);
  color: var(--sk-primary);
  transition: all 0.3s;
}
.home .disfruta .col-cerezo {
  margin-bottom: 4rem;
}
.home .disfruta .arrow {
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: end;
  inset: 0;
  padding: 2rem;
}

.home .disfruta .arrow-img {
  position: relative;
}

.home .disfruta .arrow-img .cola-flecha,
.home .disfruta .arrow-img .punta-1,
.home .disfruta .arrow-img .punta-2 {
  position: absolute;
  background-color: var(--sk-primary);
}

.home .disfruta .arrow:hover .arrow-img .cola-flecha,
.home .disfruta .arrow:hover .arrow-img .punta-1,
.home .disfruta .arrow:hover .arrow-img .punta-2 {
  background-color: var(--sk-dark-primary);
}

.home .disfruta .arrow-img .cola-flecha {
  height: 4px;
  width: 60%;
  transition: width 0.2s;
}

.home .disfruta .arrow:hover .arrow-img .cola-flecha {
  width: 100%;
}

.home .disfruta .arrow-img .punta-1 {
  position: absolute;
  height: 4px;
  width: 1.5rem;
  transform-origin: right center;
  rotate: 45deg;
  right: -1px;
  top: 1px;
  border-radius: 1rem;
}

.home .disfruta .arrow-img .punta-2 {
  position: absolute;
  height: 4px;
  width: 1.5rem;
  transform-origin: right center;
  rotate: -45deg;
  right: -1px;
  bottom: 1px;
  border-radius: 1rem;
}

.home .disfruta .arrow .h3 {
  text-transform: uppercase;
  font-weight: 200;
}

.home .disfruta figure {
  position: relative;
  /* height: 75vh; */
  height: 100%;
}
.home .disfruta figure img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.home .disfruta figure:before {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
  transition: all 0.3s;
}

.home .disfruta figure:hover:before {
  opacity: 0;
  transition: all 0.3s;
}

/* .home .disfruta .stretched-link::before {
  z-index: 2;
} */

/* --- nuestra carta --- */
.home .nuestra-carta {
  padding-top: 5rem;
  padding-bottom: 5rem;
  position: relative;
}

.home .nuestra-carta > * {
  z-index: 2;
  position: relative;
}

.home .nuestra-carta:before {
  position: absolute;
  inset: 0;
  content: "";

  background-image: url("assets/img/inicio-nuestra-carta.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: -2;
  opacity: 0.3;
}
.home .nuestra-carta:after {
  position: absolute;
  inset: 0;
  content: "";

  background-color: var(--sk-dark-primary);
  mix-blend-mode: multiply;
  z-index: -1;
}

.home .nuestra-carta .h2 {
  color: var(--sk-secondary);
}

.home .nuestra-carta .grid {
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  grid-template-columns: repeat(5, 1fr);
}

.home .nuestra-carta .grid figure {
  aspect-ratio: 5/4;
  margin: 0;
  position: relative;
}

.home .nuestra-carta .grid figure:nth-child(1) {
  grid-row: 1/4;
  grid-column: 1/4;
}

.home .nuestra-carta .grid figure:nth-child(2) {
  grid-row: 2/5;
  grid-column: 2/5;
  position: relative;
}

.home .nuestra-carta .grid figure:nth-child(2):before {
  position: absolute;
  inset: 0;
  content: "";
  background-color: var(--sk-primary);
  mix-blend-mode: screen;
}

.home .nuestra-carta .grid figure:nth-child(3) {
  grid-row: 3/6;
  grid-column: 3/6;
}

.home .nuestra-carta .grid figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- contacto --- */
.home .contacto {
  padding-top: 5rem;
  padding-bottom: 5rem;

  position: relative;
}

.home .contacto a {
  color: var(--sk-dark-gray);
  font-size: 1.5rem;
}

.home .contacto label a {
  color: var(--sk-dark-gray);
  font-size: 1.125rem;
}

.home .contacto::before {
  inset: 0;
  content: "";
  position: absolute;
  z-index: -1;
  opacity: 0.1;

  background-color: silver;
  background-image: radial-gradient(
      circle at 100% 150%,
      silver 24%,
      white 24%,
      white 28%,
      silver 28%,
      silver 36%,
      white 36%,
      white 40%,
      transparent 40%,
      transparent
    ),
    radial-gradient(circle at 0 150%, silver 24%, white 24%, white 28%, silver 28%, silver 36%, white 36%, white 40%, transparent 40%, transparent),
    radial-gradient(
      circle at 50% 100%,
      white 10%,
      silver 10%,
      silver 23%,
      white 23%,
      white 30%,
      silver 30%,
      silver 43%,
      white 43%,
      white 50%,
      silver 50%,
      silver 63%,
      white 63%,
      white 71%,
      transparent 71%,
      transparent
    ),
    radial-gradient(
      circle at 100% 50%,
      white 5%,
      silver 5%,
      silver 15%,
      white 15%,
      white 20%,
      silver 20%,
      silver 29%,
      white 29%,
      white 34%,
      silver 34%,
      silver 44%,
      white 44%,
      white 49%,
      transparent 49%,
      transparent
    ),
    radial-gradient(
      circle at 0 50%,
      white 5%,
      silver 5%,
      silver 15%,
      white 15%,
      white 20%,
      silver 20%,
      silver 29%,
      white 29%,
      white 34%,
      silver 34%,
      silver 44%,
      white 44%,
      white 49%,
      transparent 49%,
      transparent
    );
  background-size: 150px 75px;
}

.home .contacto #nf-form-1-cont {
  padding: 1rem;
  background-color: var(--sk-light-secondary);
}

.home .contacto #nf-form-1-cont label {
  color: var(--sk-primary);
}

.home .contacto #nf-form-1-cont input:not([type="submit"]),
/* .home .contacto #nf-form-1-cont select, */
.home .contacto #nf-form-1-cont textarea {
  background-color: #fff;
}

.home .contacto #nf-form-1-cont input[type="submit"] {
  background-color: var(--sk-primary);
  color: var(--sk-light-gray);
  border: 1px solid var(--sk-primary);
  text-transform: uppercase;
  font-family: "Lexend Exa";
  font-weight: 200;
  font-size: 1rem;
  padding: 0.5rem 2rem;
}

.home .contacto #nf-form-1-cont input[type="submit"]:hover {
  background-color: var(--sk-dark-primary);
  color: var(--sk-light-gray);
  border: 1px solid var(--sk-primary);
}

/* ==== Sobre Sakura  ==== */
/* --- Hero --- */
/* --- ===> Carta --- hero --- */
.sobre-sakura .hero,
.carta .hero {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.sobre-sakura .hero .h1,
.carta .hero .h1 {
  max-width: 8ch;
}

.sobre-sakura .hero .grid,
.carta .hero .grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
}

.sobre-sakura .hero .grid figure,
.carta .hero .grid figure {
  aspect-ratio: 5/4;
  margin: 0;
  position: relative;
}

.sobre-sakura .hero .grid figure:nth-child(1),
.carta .hero .grid figure:nth-child(1) {
  grid-row: 4/6;
  grid-column: 4/6;
  position: relative;
}

.sobre-sakura .hero .grid figure:nth-child(1):after,
.carta .hero .grid figure:nth-child(1):after {
  position: absolute;
  inset: 0;
  content: "";
  background-color: var(--sk-light-secondary);
  mix-blend-mode: hard-light;
}

.sobre-sakura .hero .grid figure:nth-child(2),
.carta .hero .grid figure:nth-child(2) {
  grid-row: 2/5;
  grid-column: 2/5;
}

.sobre-sakura .hero .grid figure:nth-child(3),
.carta .hero .grid figure:nth-child(3) {
  grid-row: 1/3;
  grid-column: 1/3;
  position: relative;
  z-index: 2;
}

.sobre-sakura .hero .grid figure:nth-child(3):after,
.carta .hero .grid figure:nth-child(3):after {
  position: absolute;
  inset: 0;
  content: "";
  background-color: var(--sk-primary);
  mix-blend-mode: lighten;
}

.sobre-sakura .hero .grid figure img,
.carta .hero .grid figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- nuestra historia --- */
.sobre-sakura .nuestra-historia {
  position: relative;
}

.sobre-sakura .nuestra-historia .h2 {
  max-width: 10ch;
}

.sobre-sakura .nuestra-historia .fst-row img {
  position: absolute;
  transform: scaleX(-1);
  right: 0;
  width: clamp(8rem, 28vw, 18rem);
  opacity: 0.3;
}

.sobre-sakura .nuestra-historia .hitos {
  position: relative;
}
.sobre-sakura .nuestra-historia .hitos:after {
  content: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: 2px;
  top: 0;
  background-color: var(--sk-dark-primary);
}

.sobre-sakura .nuestra-historia .hito {
  background-color: var(--sk-light-secondary);
}

.sobre-sakura .nuestra-historia .hito .h3 {
  text-transform: uppercase;
}

.sobre-sakura .nuestra-historia .hito img {
  border-radius: 100%;
  aspect-ratio: 1;
}

.sobre-sakura .nuestra-historia .hito .fecha {
  color: var(--sk-dark-primary);
  font-size: 1.25rem;
  font-weight: 200;
}

.sobre-sakura .nuestra-historia .hito-left,
.sobre-sakura .nuestra-historia .hito-right {
  position: relative;
}

.sobre-sakura .nuestra-historia .hito-left:after,
.sobre-sakura .nuestra-historia .hito-right:after {
  position: absolute;
  content: none;
  height: 0.1rem;
  background-color: var(--sk-dark-primary);
  width: 2.3rem;
  top: 50%;
  transform: translateY(-50%);
}

.sobre-sakura .nuestra-historia .hito-right:after {
  left: 0;
}
.sobre-sakura .nuestra-historia .hito-left:after {
  right: 0;
}

.sobre-sakura .nuestra-historia .fila-hito:first-child > div:before {
  content: none;
  position: absolute;
  right: -1rem;
  width: 2rem;
  top: 0%;
  bottom: calc(50% + 1px);
  background-color: #fff;
  z-index: 1;
}
.sobre-sakura .nuestra-historia .fila-hito:last-child > div:before {
  content: none;
  position: absolute;
  left: -1rem;
  width: 2rem;
  bottom: 0%;
  top: calc(50% + 1px);
  background-color: #fff;
  z-index: 1;
}

/* --- valores --- */
.sobre-sakura .valores {
  margin-top: 5rem;
  padding-top: 5rem;
  padding-bottom: 5rem;

  position: relative;
  background-color: var(--sk-light-secondary);
}

.sobre-sakura .valores > div {
  position: relative;
}
.sobre-sakura .valores img.textura {
  position: absolute;
  top: 7rem;
  left: 0;
  width: clamp(8rem, 28vw, 18rem);
}

.sobre-sakura .valores .h3 {
  text-transform: uppercase;
}

.sobre-sakura .valores .valor > div {
  border: 1px solid var(--sk-primary);
}

.sobre-sakura .valores .valor img {
  aspect-ratio: 3/2;
  object-fit: cover;
  height: 100%;
}

.sobre-sakura .valores .valor:nth-child(3n + 1) > div {
  background-color: var(--sk-light-gray);
}
.sobre-sakura .valores .valor:nth-child(3n + 2) > div {
  background-color: var(--sk-light-secondary);
}
.sobre-sakura .valores .valor:nth-child(3n) > div {
  background-color: var(--sk-secondary);
}

/* --- restaurantes --- */
.sobre-sakura .restaurantes .textura-jap.beige {
  position: relative;
  background-color: var(--sk-light-secondary);
}
.sobre-sakura .restaurantes .textura-jap.granate {
  position: relative;
  background-color: var(--sk-dark-primary);
}

.sobre-sakura .restaurantes .textura-jap > * {
  position: relative;
  z-index: 2;
}

.sobre-sakura .restaurantes .textura-jap::before {
  inset: 0;
  content: "";
  position: absolute;
  z-index: 1;
  opacity: 0.8;

  background-color: silver;
  background-image: radial-gradient(
      circle at 100% 150%,
      silver 24%,
      white 24%,
      white 28%,
      silver 28%,
      silver 36%,
      white 36%,
      white 40%,
      transparent 40%,
      transparent
    ),
    radial-gradient(circle at 0 150%, silver 24%, white 24%, white 28%, silver 28%, silver 36%, white 36%, white 40%, transparent 40%, transparent),
    radial-gradient(
      circle at 50% 100%,
      white 10%,
      silver 10%,
      silver 23%,
      white 23%,
      white 30%,
      silver 30%,
      silver 43%,
      white 43%,
      white 50%,
      silver 50%,
      silver 63%,
      white 63%,
      white 71%,
      transparent 71%,
      transparent
    ),
    radial-gradient(
      circle at 100% 50%,
      white 5%,
      silver 5%,
      silver 15%,
      white 15%,
      white 20%,
      silver 20%,
      silver 29%,
      white 29%,
      white 34%,
      silver 34%,
      silver 44%,
      white 44%,
      white 49%,
      transparent 49%,
      transparent
    ),
    radial-gradient(
      circle at 0 50%,
      white 5%,
      silver 5%,
      silver 15%,
      white 15%,
      white 20%,
      silver 20%,
      silver 29%,
      white 29%,
      white 34%,
      silver 34%,
      silver 44%,
      white 44%,
      white 49%,
      transparent 49%,
      transparent
    );
  background-size: 200px 100px;
}

.sobre-sakura .restaurantes .textura-jap.beige::before {
  mix-blend-mode: hard-light;
}
.sobre-sakura .restaurantes .textura-jap.granate::before {
  mix-blend-mode: multiply;
}

.sobre-sakura .restaurantes .carousel-item img {
  aspect-ratio: 1;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.sobre-sakura .restaurantes .contenido {
  max-width: 40rem;
}

.sobre-sakura .restaurantes p {
  margin: 0;
}

.sobre-sakura .restaurantes .icono {
  max-width: 2.5rem;
  height: 2.5rem;
}

.sobre-sakura .restaurantes .par .h2 {
  color: var(--sk-secondary);
}
.sobre-sakura .restaurantes .par p,
.sobre-sakura .restaurantes .par p a {
  color: var(--sk-light-gray);
}

.sobre-sakura .restaurantes .par .info-restaurante p {
  color: var(--sk-light-secondary);
}

.sobre-sakura .restaurantes .impar .info-restaurante p,
.sobre-sakura .restaurantes .impar .info-restaurante p a {
  color: var(--sk-dark-primary);
}

.sobre-sakura .restaurantes .carousel-indicators {
  position: static;
}

.sobre-sakura .restaurantes .carousel-indicators [data-bs-target] {
  text-indent: 0;
  background-color: transparent;
  flex-grow: 1;
  aspect-ratio: 1;
  height: auto;
}

.sobre-sakura .restaurantes .carousel-indicators [data-bs-target] img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/*  ==== Carta ==== */
/* --- hero --- */
.carta {
  position: relative;
}

/* --- menú  --- */
.carta .columna-menu {
  z-index: 10;
}

.carta .tipo-de-plato {
  border-radius: 0;
  border: 1px solid var(--sk-primary);
  text-align: center;
  padding: 0.2rem 0.6rem;
  width: fit-content !important;
  flex: 0 0 auto;
}

.carta .tipo-de-plato.active {
  background-color: var(--sk-primary);
  color: #fff;
  font-weight: 200;
}

.carta #list-platos .btn-primary {
  font-size: 1.25rem;
}

.carta #list-platos {
  position: sticky;
  top: 10rem;
  background-color: #fff;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 0.5rem;
  z-index: 2;
  overflow-x: scroll;
}

.carta div:has(#list-platos) {
  top: 2rem;
}

.carta .tipos-de-platos {
  margin-bottom: 10rem;
}

.carta .tipo-de-plato.centrar {
  scroll-snap-align: center;
}

.carta .plato {
  background-color: var(--sk-light-secondary);
  height: 100%;
}

.carta .plato .h3 {
  font-size: 1.5rem;
}

.carta .plato .overlay-container {
  position: relative;
  /* padding: 1rem; */
}

.carta .plato .overlay-container .overlay {
  background-color: var(--sk-dark-primary);
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s;
  font-size: 1.25rem;
}
.carta .plato .overlay-container .overlay p {
  color: var(--sk-light-gray);
  line-height: 1.5rem;
}

.carta .plato .overlay-container .overlay:hover {
  opacity: 0.9;
  transition: opacity 0.4s;
}

.carta .plato img.imagen-plato {
  aspect-ratio: 6 / 5;
  object-fit: contain;
}

.carta .plato .alergenos-icons {
  width: 1.5rem;
  max-height: 1.5rem;
}

/* ==== reservas ==== */
.reservas .form-container {
  margin-top: 10rem;
  margin-bottom: 5rem;
}

.reservas .grid-reservas {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
}

.reservas .grid-reservas figure {
  aspect-ratio: 1;
  margin: 0;
  position: relative;
}

.reservas .grid-reservas figure:nth-child(1) {
  grid-row: 3/6;
  grid-column: 3/6;
  position: relative;
}

.reservas .grid-reservas figure:nth-child(2) {
  grid-row: 1/4;
  grid-column: 1/4;
  position: relative;
}

.reservas .grid-reservas figure:nth-child(1):after {
  position: absolute;
  inset: 0;
  content: "";
  background-color: var(--sk-light-secondary);
  mix-blend-mode: hard-light;
}
.reservas .grid-reservas figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reservas .formulario {
  background-color: var(--sk-light-secondary);
}

.reservas .formulario legend {
  display: none;
}

.reservas .formulario label {
  color: var(--sk-primary);
  font-family: "Lexend Exa";
  margin-bottom: 0.5rem;
}

.reservas .formulario select,
.reservas .formulario textarea,
.reservas .formulario input {
  color: var(--sk-dark-secondary);
  border: 1px solid var(--sk-dark-secondary);
  border-radius: 0;
}

.reservas .formulario input {
  max-width: none;
  display: block;
  width: 100%;
  padding: 6px 36px 6px 12px;
}

.reservas .formulario .add-message a {
  color: var(--sk-dark-primary);
}

.reservas .formulario button {
  border-radius: 0;
  border: 1px solid var(--sk-primary);
  text-align: center;
  padding: 1rem 1.5rem;
  background-color: var(--sk-primary);
  color: #fff;
  font-weight: 200;
  text-transform: uppercase;
}

.reservas .formulario button:hover {
  background-color: var(--sk-dark-primary);
}

/* --- te ayudamos  --- */
.reservas .te-ayudamos {
  padding-top: 5rem;
  padding-bottom: 5rem;
  background-color: var(--sk-dark-primary);

  position: relative;
  mix-blend-mode: multiply;
}

.reservas .te-ayudamos:after {
  position: absolute;
  content: "";
  inset: 0;
  z-index: -1;
  opacity: 0.3;
  background-image: url(assets/img/te-ayudamos-bg.jpg);
  background-attachment: fixed;
  background-size: cover;
}

.reservas .te-ayudamos .h2 {
  color: var(--sk-secondary);
  font-size: clamp(1.7rem, 5vw, 2.2rem);
}

.reservas .te-ayudamos p {
  color: var(--sk-light-gray);
  font-size: clamp(1.5rem, 4.8vw, 2rem);
}

.reservas .rtb-error {
  background-color: var(--sk-dark-primary) !important;
}

/* ==== tienda ==== */
.tienda {
  margin-top: 9rem;
  margin-bottom: 5rem;
}

.tienda .h1 {
  letter-spacing: 0.5rem;
}

/* sidebar */
#woocommerce_price_filter-2 {
  border: 0 !important;
}

#yith-woocommerce-ajax-navigation-filters-2 {
  border: 0 !important;
}

.widget-title.h5,
.filter-title {
  background-color: transparent !important;
  color: var(--sk-primary) !important;
  font-weight: 500;
  font-family: "Lexend Exa";
  text-transform: uppercase;
  border: 0;
}

.ui-slider-range {
  background-color: var(--sk-primary) !important;
}

.ui-slider-handle {
  background-color: #800721 !important;
}

.price_slider_amount button {
  border: 1px solid var(--sk-primary) !important;
  color: var(--sk-primary) !important;
  border-radius: 0 !important;
}

.price_slider_amount button:hover {
  background-color: #f5d2da !important;
}

.woocommerce a.term-label {
  position: relative;
}

.woocommerce a.term-label::after {
  content: "";
  position: absolute;
  inset: 0 0 0 -1.5rem;
  z-index: 1;
  /* pointer-events: auto; */
}

.woocommerce #secondary button {
  border: 1px solid var(--sk-primary) !important;
  color: var(--sk-primary);
}

.woocommerce #secondary button:hover {
  background-color: var(--sk-light-primary);
}

.woocommerce span.onsale {
  top: 1.5rem;
  right: 0;
  width: fit-content !important;
  left: unset !important;
  text-transform: uppercase;
  border-radius: 0;
  background-color: var(--sk-primary) !important;
  font-weight: 200;
  padding: 0.5rem 0.3rem;
  font-size: 1.2rem;
}

.woocommerce div.product {
  border-radius: 0;
  border: 0;
  background-color: var(--sk-light-secondary);
}

.woocommerce div.product > div {
  padding: 0.7rem;
  justify-content: space-between;
}

.product.card img {
  border-radius: 0;
  aspect-ratio: 6 / 5;
  object-fit: cover;
}

.woocommerce .card .woocommerce-loop-product__title {
  color: var(--sk-primary);
  text-transform: uppercase;
  text-align: start;
  font-family: "Lexend Exa";
  font-weight: 400;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.woocommerce div.product span.price,
.card .price {
  font-weight: 500;
  font-family: "Lexend Exa";
  display: flex;
  justify-content: space-between;
}

.woocommerce div.product span.price del {
  color: var(--sk-dark-primary);
  opacity: 1 !important;
  font-weight: 200;
}

.woocommerce div.product span.price del span {
  opacity: 1 !important;
  font-weight: 200;
}

.woocommerce div.product span.price ins {
  color: var(--sk-primary);
  font-weight: 600;
  font-family: Nunito Sans;
}

/* breadcrumbs */
.woocommerce .wc-breadcrumb {
  margin: 0 !important;
  background-color: transparent !important;
}

.woocommerce .wc-breadcrumb ol {
  color: var(--sk-primary);
}

.wc-breadcrumb .breadcrumb-item:first-child a::before {
  background-color: var(--sk-primary);
}

/*  selector order */
.woocommerce .woocommerce-ordering select {
  color: var(--sk-dark-secondary);
  border-radius: 0;
  border: 1px solid var(--sk-secondary);
}

.product .card-body a.button {
  font-family: "Lexend Exa";
  font-weight: 200;
  background-color: transparent;
  color: var(--sk-primary);
  text-transform: uppercase;
  border: 1px solid var(--sk-primary);
  border-radius: 0;
  font-size: 1rem;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

.product .card-body a.button:hover {
  background-color: var(--sk-primary);
  color: var(--sk-light-secondary);
  border: 0;
}

form .quantity {
  border: 1px solid var(--sk-dark-secondary);
  margin-right: 0 !important;
}

form .quantity input,
form .quantity button {
  border-radius: 0;
  background-color: var(--sk-light-secondary) !important;
  border: 0 !important;
  color: var(--sk-dark-secondary) !important;
}

.alergenos-shop {
  flex-wrap: wrap;
}

.alergenos-shop img {
  max-width: 1.5rem;
  height: 1.5rem;
}

/* - offcancas carrito - */
.woocommerce .offcanvas-header {
  color: var(--sk-primary);
  text-transform: uppercase;
  font-family: "Lexend Exa";
  font-weight: 600;
}

.woocommerce #masthead .offcanvas.show,
.woocommerce #masthead .offcanvas.showing {
  height: 100%;
  /* background-color: #fff; */
}

.woocommerce .woocommerce-mini-cart-item {
  background-color: transparent !important;
}

.woocommerce .item-name a {
  color: var(--sk-primary);
  font-family: "Lexend Exa";
}

.woocommerce .cart-footer {
  background-color: transparent !important;
}

.woocommerce .list-group-item {
  border-bottom: 1px solid var(--sk-dark-primary);
}

/* ==== carrito ==== */
.carrito .h1 {
  color: var(--sk-primary);
}

.carrito h2 {
  color: var(--sk-primary);
}

.wc-block-components-radio-control__option {
  background-color: var(--sk-light-gray);
  margin-bottom: 1rem !important;
}

.wc-block-components-radio-control__option-checked {
  background-color: var(--sk-light-secondary);
}

.wc-block-components-radio-control .wc-block-components-radio-control__input:checked:before {
  background-color: var(--sk-primary) !important;
}

.wc-block-components-sidebar-layout {
  flex-direction: column-reverse;
}

.wc-block-components-sidebar-layout .wc-block-components-main,
.wc-block-components-sidebar {
  width: 100% !important;
}

.wc-block-components-radio-control__option {
  padding-right: 1.5rem !important;
}

.wc-block-components-order-summary__button-text {
  color: var(--sk-primary);
  font-weight: 600;
}

.wc-block-components-product-name {
  font-weight: 600;
}

.wc-block-components-totals-wrapper {
  border-top: 1px solid var(--sk-primary) !important;
}

.wc-block-components-radio-control__label-group > span {
  color: var(--sk-dark-primary);
}

.wc-block-components-button:not(.is-link) {
  background-color: #fff;
  color: var(--sk-primary);
  border: 1px solid var(--sk-primary);
}

.wc-block-components-button:not(.is-link):hover {
  background-color: var(--sk-light-primary);
}

.wc-block-components-radio-control__option {
  margin-bottom: 1rem;
}

.wc-block-components-sidebar.wc-block-checkout__sidebar.wp-block-woocommerce-checkout-totals-block.is-sticky{
  position: unset !important;
}

/* footer */
.kit-digital {
  background-color: var(--sk-light-gray);
}

.footer {
  background-color: #fff !important;
}

.footer p a {
  font-size: 0.75rem;
  color: var(--sk-primary);
}

.footer ul li:hover {
  background-color: var(--sk-light-gray);
  transition: background-color 0.2s;
}

.footer ul li a {
  padding-top: 1rem;
  padding-bottom: 1rem;
  display: block;
}

.footer ul li:not(:last-child) {
  border-bottom: 1px dotted var(--sk-primary);
}

.footer a {
  color: var(--sk-dark-gray);
}

.footer #colophon {
  background: var(--sk-light-secondary);
  color: var(--sk-primary);
  display: flex;
  justify-content: center;
}

.footer #caronte-svg {
  max-height: 1.5rem;
  fill: var(--sk-primary);
}

.footer #colophon a {
  color: var(--sk-primary);
}

.top-button {
  z-index: 9 !important;
}

/* ==== 404 ==== */
.error-404 {
  margin-top: 5rem;
}

.error-404 .lead {
  font-size: calc(1rem + 0.9vw);
  line-height: calc(1.25rem + 0.9vw);
}

.error404 figure {
  width: 33%;
  height: 100%;
  position: relative;
}

.error404 figure:after {
  position: absolute;
  inset: -5rem -8rem;
  content: "";
  z-index: 1;

  background-color: var(--sk-primary);
  mix-blend-mode: hue;
}
.error404 figure img {
  width: 100%;
  transform: scale(1.4);
}

.cuatro404 {
  position: relative;
}

.cuatro404 span {
  font-weight: 800;
  font-family: "Lexend Exa";
  display: block;

  font-size: clamp(72px, 26vw, 400px);
}

.imgY404 {
  position: relative;
  bottom: 2rem;
}

a {
  color: #000;
  text-decoration: none;
}

/* media queries */

@media (min-width: 576px) {
}

@media (min-width: 768px) {
  .home .disfruta .col-cerezo {
    z-index: 1;
    margin-bottom: 12rem;
  }
}

@media (min-width: 992px) {
  .sobre-sakura .nuestra-historia .hitos:after,
  .sobre-sakura .nuestra-historia .hito-left:after,
  .sobre-sakura .nuestra-historia .hito-right:after,
  .sobre-sakura .nuestra-historia .fila-hito:first-child > div:before,
  .sobre-sakura .nuestra-historia .fila-hito:last-child > div:before {
    content: "";
  }

  .carta .tipo-de-plato {
    width: 100%;
  }

  .carta #list-platos .btn-primary {
    font-size: 1rem;
  }

  .carta #list-platos {
    overflow-x: auto;
  }
}

@media (min-width: 1200px) {
}