/*
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: "Zen Maru Gothic";
  src: url("assets/fonts/ZenMaruGothic-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Zen Maru Gothic";
  src: url("assets/fonts/ZenMaruGothic-Black.woff2") format("woff2");

  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* variables */

:root {
  --hnmi-primary: #993f32;
  --hnmi-light-primary: #aa5500;
  --hnmi-dark-primary: #6c3f26;
  --hnmi-secondary: #fbc107;
  --hnmi-light-secondary: #ffeebe;
  --hnmi-dark-secondary: #ebb912;
  --hnmi-dark-gray: #3e0902;
  --hnmi-light-gray: #ffffff;
}

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

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

/* ***  generales *** */

/* accesibilidad */
.skip-link {
  position: absolute;
  top: -1000px;
  left: -1000px;
  height: 1px;
  width: 1px;
  text-align: left;
  overflow: hidden;
}

a.skip-link:focus,
a.skip-link:active {
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  z-index: 99999;
  background-color: var(--hnmi-primary);
  color: var(--hnmi-light-gray);
  padding: 1rem;
  font-weight: 900;
  text-decoration: none;
  outline: 2px solid var(--hnmi-secondary);
}

/* textos */
body {
  font-family: "Zen Maru Gothic";
}

.h1,
.h2,
.h3,
.h4,
button {
  color: var(--hnmi-primary);
}

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

.h2 {
  font-weight: 900;
  font-size: clamp(2rem, 3vw, 3.125rem);
  color: var(--hnmi-primary);
}

.h3 {
  text-transform: uppercase;
}

.lead {
  font-weight: 200;
  font-size: 2rem;
  color: var(--hnmi-dark-primary);
}

p {
  color: var(--hnmi-primary);
}

a {
  text-decoration: none;
}

hr {
  border: 1px solid var(--hnmi-primary);
  opacity: 1;
}

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

.btn-primary,
.btn-cta:hover {
  border: 1px solid var(--hnmi-primary);
  color: var(--hnmi-primary);
  border-radius: 10px;
  background-color: transparent;
  letter-spacing: 1.1px;
  font-weight: 900;
}

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

.btn-cta {
  background-color: var(--hnmi-secondary);
  color: var(--hnmi-dark-gray);
  border: 1px solid var(--hnmi-secondary);
  font-weight: 900;
  letter-spacing: 1.1px;
  border-radius: 10px;
}

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

.btn-beige {
  color: var(--hnmi-secondary);
  border: 1px solid var(--hnmi-secondary);
}

.btn-beige:hover {
  background-color: var(--hnmi-secondary);
  color: #fff;
}

button.cky-btn.cky-btn-reject {
  color: #ffffff !important;
  background-color: #cd1e45 !important;
}

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

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

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

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

.flecha a {
  border-radius: 50%;
  border: 3px solid var(--hnmi-primary);
  aspect-ratio: 1;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

@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;
  color: var(--hnmi-dark-gray);
  font-size: 1.25;
  transition: all 0.2s;
}

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

#masthead .nav-link:hover {
  border-bottom: 1px solid var(--hnmi-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(--hnmi-dark-primary);
}

#masthead .offcanvas.show li a,
#masthead .offcanvas.showing li a {
  color: var(--hnmi-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: 10rem;
  padding-bottom: 5rem;
  position: relative;
  clip-path: ellipse(150% 100% at 50% 0%);
  z-index: 10;
}

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

.home .hero .video {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.5;
  mix-blend-mode: screen;
}

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

.home .hero:after {
  position: absolute;
  inset: 0;
  content: "";
  background-color: #ffdf73;
  z-index: -1;
  mix-blend-mode: screen;
}

/* --- disfruta --- */
.home .disfruta {
  background-color: var(--hnmi-dark-gray);
  position: relative;
  margin-top: -10rem;
  padding-top: 16rem;
  padding-bottom: 5rem;
}

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

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

.home .disfruta p {
  color: var(--hnmi-light-secondary);
}

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

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

.home .disfruta .arrow:hover .cards-text .h3,
.restaurante .disfruta .arrow:hover .cards-text .h3 {
  transform: translateY(-25%);
  color: var(--hnmi-light-secondary);
  transition: all 0.3s;
}

.home .disfruta .col-cerezo,
.restaurante .disfruta .col-cerezo {
  margin-bottom: 4rem;
}

.home .disfruta .arrow,
.restaurante .disfruta .arrow {
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: end;
  inset: 0;
  padding: 2rem;
}

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

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

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

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

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

.home .disfruta .arrow-img .punta-1,
.restaurante .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,
.restaurante .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,
.restaurante .disfruta .arrow .h3 {
  text-transform: uppercase;
  font-weight: 200;
}

.home .disfruta figure,
.restaurante .disfruta figure {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 1.25rem;
  background-color: var(--hnmi-dark-gray);
}

.home .disfruta figure img,
.restaurante .disfruta figure img {
  height: 100%;
  object-fit: cover;
  width: 100%;
  border-radius: 1.25rem;
  aspect-ratio: 1;
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 55%,
    rgba(0, 0, 0, 0.75) 72%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 55%,
    rgba(0, 0, 0, 0.75) 72%,
    transparent 100%
  );
}

.home .disfruta figure:before,
.restaurante .disfruta figure:before {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(62, 9, 2, 0.25) 52%,
    rgba(62, 9, 2, 0.95) 100%
  );
  pointer-events: none;
  transition: all 0.3s;
  border-radius: 1.25rem;
}

.home .disfruta figure:hover:before,
.restaurante .disfruta figure:hover:before {
  opacity: 0.45;
  transition: all 0.3s;
}

.home .disfruta .restaurantes,
.restaurante .disfruta .restaurantes {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.home .disfruta .restaurantes::-webkit-scrollbar,
.restaurante .disfruta .restaurantes::-webkit-scrollbar {
  display: none;
}

.home .disfruta .slide-item,
.restaurante .disfruta .slide-item {
  scroll-snap-align: start;
  flex: 0 0 80%;
}

.home .disfruta .carousel-nav,
.restaurante .disfruta .carousel-nav {
  position: absolute;
  z-index: 9999;
  top: -90px;
  bottom: unset;
  left: unset;
}

@media (min-width: 768px) {
  .home .disfruta .slide-item,
  .restaurante .disfruta .slide-item {
    flex: 0 0 45%;
  }
}

@media (min-width: 992px) {
  .home .disfruta .carousel-nav,
  .restaurante .disfruta .carousel-nav {
    top: unset;
    bottom: 25px;
    left: -150px;
  }
}

.home .disfruta .nav-btn,
.restaurante .disfruta .nav-btn {
  background: transparent;
  border: 1px solid var(--hnmi-secondary);
  color: var(--hnmi-secondary);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  cursor: pointer;
  padding: 0;
}

.home .disfruta .nav-btn:hover,
.restaurante .disfruta .nav-btn:hover {
  background: var(--hnmi-primary);
  border-color: var(--hnmi-primary);
  color: #fff;
}

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

  position: relative;
}

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

.home .contacto label a {
  color: var(--hnmi-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(--hnmi-light-secondary);
}

.home .contacto #nf-form-1-cont label {
  color: var(--hnmi-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(--hnmi-primary);
  color: var(--hnmi-light-gray);
  border: 1px solid var(--hnmi-primary);
  text-transform: uppercase;
  font-weight: 200;
  font-size: 1rem;
  padding: 0.5rem 2rem;
}

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

/* ==== Restaurante ==== */

/* stciky menu */
.breadcrumbs-sticky a,
.breadcrumbs-sticky span {
  font-size: 1.125rem;
  color: var(--hnmi-primary);
  text-decoration: none;
  padding-top: 1rem;
}

.breadcrumbs-sticky svg {
  margin-right: 2px;
}

.links-sticky .btn-primary {
  background-color: var(--hnmi-secondary);
  border-radius: 10px;
  border: none;
  font-weight: 900;
  color: #000;
}

.links-sticky .btn-primary:hover {
  border: 0 !important;
}

/* --- hero --- */
.restaurante {
  overflow-x: clip;
}

.restaurante .submenu-restaurante.scrolled {
  background-color: white !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* opcional: sombra suave */
}

.restaurante .submenu-restaurante img {
  max-width: 180px;
}

.restaurante .submenu-restaurante .nav-link {
  font-weight: 900;
}

.restaurante > .container {
  position: relative;
  z-index: 10;
}

.restaurante .hero {
  margin-top: -9rem;
  margin-bottom: 10rem;
  padding-top: 10rem;
  padding-bottom: 5rem;
  position: relative;
  clip-path: ellipse(150% 100% at 50% 0%);
  z-index: 10;
}

.restaurante .hero .lead {
  margin-bottom: 4.5rem;
}

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

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

.restaurante .hero:after {
  position: absolute;
  inset: 0;
  content: "";
  background-color: #ffdf73;
  z-index: -1;
  mix-blend-mode: screen;
}

/* --- bienvenida --- */
.restaurante .bienvenida {
  padding-top: 10rem;
}

.restaurante .bienvenida .container-bienvenida {
  position: relative;
  margin-bottom: 10rem;
}

.restaurante .bienvenida img {
  width: 100%;
  border-radius: 20px;
  aspect-ratio: 4/3;
  object-fit: cover;
  object-position: center;
}

/* --- nuestra carta --- */
.restaurante .cartas {
  min-height: 550px;
  padding-top: 7.75rem;
  padding-bottom: 7.75rem;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(
      118deg,
      transparent 0 49.5%,
      rgba(153, 63, 50, 0.2) 49.7% 50.8%,
      transparent 51%
    ),
    var(--hnmi-primary);
}

.restaurante .cartas > * {
  z-index: 2;
  position: relative;
}

.restaurante .cartas:before {
  position: absolute;
  inset: 0;
  content: "";
  background-image:
    linear-gradient(rgba(123, 39, 28, 0.86), rgba(153, 63, 50, 0.86)),
    url("assets/img/inicio-nuestra-carta.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.restaurante .cartas:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 47%;
  content: "";
  background-color: #4a0801;
  border-top-left-radius: 4.5rem;
  z-index: 1;
}

.restaurante .cartas .cartas-row {
  row-gap: 3rem;
  position: relative;
}

.restaurante .cartas .cartas-row:before {
  position: absolute;
  left: calc((100vw - 100%) / -2 + 53vw - 110px);
  bottom: -7.75rem;
  width: 110px;
  height: 110px;
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110' viewBox='0 0 110 110' fill='none'%3E%3Cpath d='M110 110H0C60.7513 110 110 60.7513 110 0V110Z' fill='%233E0902'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  z-index: -1;
}

.restaurante .cartas .cartas-card {
  min-height: 290px;
  padding: 2rem;
  background-color: #fff;
  border: 1px solid var(--hnmi-light-primary);
  border-radius: 1.25rem;
}

.restaurante .cartas .h2 {
  color: var(--hnmi-primary);
  font-size: clamp(2rem, 3vw, 3.125rem);
}

.restaurante .cartas .cartas-figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 1.25rem;
  display: block;
}

/* --- reservas  --- */
.restaurante .reservas {
  padding-top: 5rem;
  padding-bottom: 5rem;
  background-color: var(--hnmi-light-secondary);

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

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

.restaurante .reservas .h2 {
  color: var(--hnmi-dark-primary);
  font-size: clamp(1.7rem, 5vw, 3.125rem);
}

.restaurante .reservas p {
  color: var(--hnmi-dark-gray);
  font-size: clamp(1.5rem, 4.8vw, 2rem);
}

/* --- galería --- */
/* --- restaurantes --- */

.restaurante .galeria .textura-jap > * {
  position: relative;
  z-index: 2;
}

.restaurante .galeria .textura-jap::before {
  inset: 0;
  content: "";
  position: absolute;
  z-index: 1;
  opacity: 1;

  background-position:
    0 0,
    0 0,
    70px 121px,
    70px 121px,
    0 0,
    70px 121px;
  background-size: 140px 242px;
}

.restaurante .galeria .textura-jap.beige {
  position: relative;
  background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='69.283' height='40' patternTransform='scale(6) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='%23ffeebeff'/><path d='M46.189-20L57.736 0M46.189 20l11.547 20m-46.189 0l11.547 20M11.547 0l11.547 20m40.415 30H40.415M28.868 30H5.774m23.094-40H5.774m57.735 20H40.415m0 20L28.868 50m11.547-60L28.868 10m46.188 0L63.509 30M5.774 10L-5.773 30m75.056 10H46.189L34.64 20 46.19 0h23.094C73.13 6.667 76.98 13.333 80.83 20zM57.736 60H34.64L23.094 40l11.547-20h23.095c3.848 6.667 7.698 13.333 11.547 20L57.736 60zm0-40H34.64L23.094 0l11.547-20h23.095L69.283 0c-3.87 6.7-8.118 14.06-11.547 20zM34.64 60H11.547L0 40l11.547-20h23.094L46.19 40 34.64 60zm0-40H11.547L0 0l11.547-20h23.094L46.19 0 34.64 20zM23.094 40H0l-5.773-10-5.774-10L0 0h23.094l11.547 20-11.547 20z'  stroke-width='0.5' stroke='%23ffffffff' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(-372,-294)' fill='url(%23a)'/></svg>");
}

.restaurante .galeria .textura-jap.granate {
  position: relative;
  background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='69.283' height='40' patternTransform='scale(6) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='%236c3f26ff'/><path d='M46.189-20L57.736 0M46.189 20l11.547 20m-46.189 0l11.547 20M11.547 0l11.547 20m40.415 30H40.415M28.868 30H5.774m23.094-40H5.774m57.735 20H40.415m0 20L28.868 50m11.547-60L28.868 10m46.188 0L63.509 30M5.774 10L-5.773 30m75.056 10H46.189L34.64 20 46.19 0h23.094C73.13 6.667 76.98 13.333 80.83 20zM57.736 60H34.64L23.094 40l11.547-20h23.095c3.848 6.667 7.698 13.333 11.547 20L57.736 60zm0-40H34.64L23.094 0l11.547-20h23.095L69.283 0c-3.87 6.7-8.118 14.06-11.547 20zM34.64 60H11.547L0 40l11.547-20h23.094L46.19 40 34.64 60zm0-40H11.547L0 0l11.547-20h23.094L46.19 0 34.64 20zM23.094 40H0l-5.773-10-5.774-10L0 0h23.094l11.547 20-11.547 20z'  stroke-width='0.5' stroke='%233e0902ff' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(-372,-294)' fill='url(%23a)'/></svg>");
}

.restaurante .galeria .carousel-item img {
  aspect-ratio: 4/3;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.restaurante .galeria .contenido {
  max-width: 40rem;
}

.restaurante .galeria p {
  margin: 0;
}

.restaurante .galeria .icono {
  max-width: 2.5rem;
  height: 2.5rem;
}

.restaurante .galeria .par .h2 {
  color: var(--hnmi-secondary);
}

.restaurante .galeria .par p,
.restaurante .galeria .par p a {
  color: var(--hnmi-light-gray);
}

.restaurante .galeria .par .info-restaurante p {
  color: var(--hnmi-light-secondary);
}

.restaurante .galeria .impar .info-restaurante p,
.restaurante .galeria .impar .info-restaurante p a {
  color: var(--hnmi-dark-primary);
}

.restaurante .galeria .carousel-indicators {
  position: static;
}

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

.restaurante .galeria .carousel-indicators [data-bs-target] img {
  object-fit: cover;
  width: 100%;
  border-radius: 0.65rem;
  aspect-ratio: 4/3;
}

/* --- horario y ubicación --- */
.restaurante .horario-ubicacion {
  position: relative;

  padding-top: 5rem;
  padding-bottom: 5rem;
}

.restaurante .horario-ubicacion .textura-jap::before {
  mix-blend-mode: hard-light;
}

.restaurante .horario-ubicacion .textura-jap > * {
  position: relative;
  z-index: 2;
}

.restaurante .horario-ubicacion .textura-jap::before {
  inset: 0;
  content: "";
  position: absolute;
  z-index: 1;
  background-image: url("./assets/img/logo_textura.svg");
  background-repeat: no-repeat;
  background-position: 112% 150%;
}

/* --- disfruta --- */
.restaurante .disfruta {
  background-color: var(--hnmi-dark-gray);
  position: relative;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.restaurante .disfruta .h2 {
  color: var(--hnmi-secondary);
}

.restaurante .disfruta p {
  color: var(--hnmi-secondary);
}

/* ==== 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(--hnmi-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(--hnmi-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(--hnmi-dark-primary);
}

.sobre-sakura .nuestra-historia .hito {
  background-color: var(--hnmi-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(--hnmi-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(--hnmi-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(--hnmi-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(--hnmi-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(--hnmi-light-gray);
}

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

.sobre-sakura .valores .valor:nth-child(3n) > div {
  background-color: var(--hnmi-secondary);
}

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

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

.carta .tipo-de-plato {
  border-radius: 0;
  border: 1px solid var(--hnmi-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(--hnmi-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(--hnmi-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(--hnmi-dark-primary);
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s;
  font-size: 1.25rem;
}

.carta .plato .overlay-container .overlay p {
  color: var(--hnmi-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(--hnmi-light-secondary);
  mix-blend-mode: hard-light;
}

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

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

.reservas .formulario legend {
  display: none;
}

.reservas .formulario label {
  color: var(--hnmi-primary);
  margin-bottom: 0.5rem;
}

.reservas .formulario select,
.reservas .formulario textarea,
.reservas .formulario input {
  color: var(--hnmi-dark-secondary);
  border: 1px solid var(--hnmi-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(--hnmi-dark-primary);
}

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

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

/* ==== 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(--hnmi-primary) !important;
  font-weight: 900;
  border: 0;
}

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

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

.price_slider_amount button {
  border: 1px solid var(--hnmi-primary) !important;
  color: var(--hnmi-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(--hnmi-primary) !important;
  color: var(--hnmi-primary);
}

.woocommerce #secondary button:hover {
  background-color: var(--hnmi-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(--hnmi-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(--hnmi-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(--hnmi-primary);
  text-transform: uppercase;
  text-align: start;
  font-weight: 400;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

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

.woocommerce div.product span.price del {
  color: var(--hnmi-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(--hnmi-primary);
  font-weight: 600;
}

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

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

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

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

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

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

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

form .quantity input,
form .quantity button {
  border-radius: 0;
  background-color: var(--hnmi-light-secondary) !important;
  border: 0 !important;
  color: var(--hnmi-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(--hnmi-primary);
  text-transform: uppercase;
  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(--hnmi-primary);
}

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

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

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

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

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

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

.wc-block-components-radio-control
  .wc-block-components-radio-control__input:checked:before {
  background-color: var(--hnmi-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(--hnmi-primary);
  font-weight: 600;
}

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

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

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

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

.wc-block-components-button:not(.is-link):hover {
  background-color: var(--hnmi-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(--hnmi-light-gray);
}

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

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

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

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

.footer #colophon {
  background: var(--hnmi-dark-gray);
  display: flex;
  justify-content: center;
}

.footer #colophon a {
  color: var(--hnmi-light-gray);
}
.footer #colophon svg {
  filter: invert(1);
}

.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(--hnmi-primary);
  mix-blend-mode: hue;
}

.error404 figure img {
  width: 100%;
  transform: scale(1.4);
}

.cuatro404 {
  position: relative;
}

.cuatro404 span {
  font-weight: 800;
  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) {
  .restaurante .disfruta .col-cerezo,
  .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;
  }

  .home .disfruta figure img,
  .restaurante .disfruta figure img {
    aspect-ratio: 3/4;
  }

  .restaurante .galeria .carousel-item img {
    aspect-ratio: 1;
  }
}

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