*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;

  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans",
    "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.55;

  color: #1f2937;
  background: #fbf7f0;
}

body.dark {
  color: #f3f4f6;
  background: #1f2937;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

:focus-visible {
  outline: 0.2rem solid #2563eb;
  outline-offset: 0.2rem;
}

[id] {
  scroll-margin-top: 10rem;
}





































.a-Wa-S1#wa-floating {
  position: fixed;
  right: 1rem;
  bottom: 5rem;
  z-index: 60;


  justify-content: center;
  align-content: center;

  width: 4.5rem;
  height: 4.5rem;

  display: inline-flex;
  align-items: center;
  gap: 0.5rem;

  padding: 0.75rem 0.95rem;
  border-radius: 1.25rem;

  text-decoration: none;
  -webkit-tap-highlight-color: transparent;

  transition:
    transform 140ms ease,
    box-shadow 140ms ease,
    filter 140ms ease;

  background: linear-gradient(135deg, #59b279, #339457, #106632);
  color: #e1f6de;
  border: 0.1rem solid rgba(19, 140, 63, 0.42);
  box-shadow: 0 0.5rem 3.4rem rgba(0, 0, 0, 0.8);
}

body.dark .a-Wa-S1#wa-floating {
  background: linear-gradient(135deg, #106632 , #339457, #59b279);
  color: #062002;
  border-color: rgba(55, 219, 115, 0.5);
  box-shadow: 0 0.5rem 3.4rem rgba(0, 0, 0, 0.8);
}
  .a-Wa-S1#wa-floating:hover {
    text-decoration: none;
    transform: translateY(-0.1rem);
    filter: brightness(1.04);
  }

  .a-Wa-S1#wa-floating:active {
    transform: translateY(0);
    filter: brightness(0.98);
  }

  .a-Wa-S1#wa-floating:focus-visible {
    outline-color: #22c55e;
  }

    .a-Wa-S1#wa-floating > i {
      font-size: 2rem;
      line-height: 1;
    }

    .a-Wa-S1#wa-floating > span {
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: 0.01em;
      display: none;
    }

@media (min-width: 27rem) {
  .a-Wa-S1#wa-floating {
    right: 1.25rem;
    padding: 0.85rem 1.05rem;

    width: auto;
    height: 4rem;
  }

    .a-Wa-S1#wa-floating > i {
      font-size: 1.45rem;
    }

    .a-Wa-S1#wa-floating > span {
      display: inline;
      font-size: 1.05rem;
    }
}





































.header {
  position: sticky;
  top: 0;
  z-index: 80;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;

  padding: 0.85rem 4.5rem 0.2rem 1rem;

  background: linear-gradient(135deg, rgba(239, 246, 255, 0.96), rgba(219, 234, 254, 0.92));
  border-bottom: 0.1rem solid rgba(37, 99, 235, 0.16);
  box-shadow: 0 0.6rem 1.8rem rgba(2, 6, 23, 0.08);

  backdrop-filter: blur(0.75rem);
  -webkit-backdrop-filter: blur(0.75rem);
  padding-right: 4.5rem;
  min-height: 4.5rem;
}

body.dark .header {
  background: linear-gradient(135deg, rgba(3, 7, 18, 0.78), rgba(15, 23, 42, 0.88));
  border-bottom-color: rgba(96, 165, 250, 0.22);
  box-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.45);
}

.header > div {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 5rem;

  min-width: 0;
}

.hd-p-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 2.9rem;
  height: 2.9rem;

  border-radius: 1rem;
  border: 0.1rem solid rgba(37, 99, 235, 0.22);

  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.02em;

  background: radial-gradient(circle at 30% 30%, #93c5fd, #2563eb);
  color: #eff6ff;

  box-shadow: 0 0.5rem 1.2rem rgba(37, 99, 235, 0.25);
  user-select: none;
}

body.dark .hd-p-logo {
  border-color: rgba(147, 197, 253, 0.28);
  background: radial-gradient(circle at 30% 30%, #60a5fa, #1d4ed8);
  color: #e0f2fe;
}

#brand-name {
  display: inline-block;
  font-size: 1rem;
  line-height: 1.15;
  color: #0f172a;
  max-width: 12rem;
  overflow: hidden;
}

body.dark #brand-name {
  color: #e5e7eb;
}

#brand-tagline {
  display: inline-block;
  margin-top: 0.15rem;
  font-size: 0.85rem;
  color: rgba(15, 23, 42, 0.75);
}

body.dark #brand-tagline {
  color: rgba(226, 232, 240, 0.78);
}

.hd-bn-modos,
.hd-bn-hamburguesa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;

  border-radius: 1rem;
  border: 0.1rem solid rgba(37, 99, 235, 0.22);

  padding: 0.6rem 0.75rem;
  background: rgba(255, 255, 255, 0.55);
  color: #0f172a;

  -webkit-tap-highlight-color: transparent;

  transition:
    transform 140ms ease,
    box-shadow 140ms ease,
    background-color 140ms ease,
    border-color 140ms ease;

  position: absolute;
  right: 0.75rem;
}

body.dark .hd-bn-modos,
body.dark .hd-bn-hamburguesa {
  background: rgba(2, 6, 23, 0.42);
  color: #e5e7eb;
  border-color: rgba(96, 165, 250, 0.25);
}

.hd-bn-modos:hover,
.hd-bn-hamburguesa:hover {
  background: rgba(219, 234, 254, 0.75);
  box-shadow: 0 0.65rem 1.6rem rgba(2, 6, 23, 0.12);
}

body.dark .hd-bn-modos:hover,
body.dark .hd-bn-hamburguesa:hover {
  background: rgba(30, 41, 59, 0.6);
  box-shadow: 0 0.9rem 2rem rgba(0, 0, 0, 0.45);
}

.hd-bn-modos:active,
.hd-bn-hamburguesa:active {
  transform: translateY(0.05rem);
}

.hd-bn-modos {
  top: 0.75rem;
  width: 6.1rem;
}

.hd-bn-hamburguesa {
  bottom: 0.75rem;
}

.hd-bn-modos > i,
.hd-bn-hamburguesa > i {
  font-size: 1.35rem;
  line-height: 1;
}

.hd-bn-hamburguesa > span {
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}

.hd-bn-modos-sun,
.hd-bn-modos-moon {
  opacity: 0.9;
}

body.dark .hd-bn-modos-sun {
  display: none;
}
body:not(.dark) .hd-bn-modos-moon {
  display: none;
}

.hd-bn-hamburguesa > i.bi-x-lg {
  display: none;
}
.hd-bn-hamburguesa.activo > i.bi-list {
  display: none;
}
.hd-bn-hamburguesa.activo > i.bi-x-lg {
  display: inline-block;
}

.hd-nav {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;

  padding: 0.75rem 1rem 1rem;

  background: rgba(239, 246, 255, 0.98);
  border-bottom: 0.1rem solid rgba(37, 99, 235, 0.16);
  box-shadow: 0 1.2rem 2.6rem rgba(2, 6, 23, 0.18);

  transform: translateY(-0.5rem);
  opacity: 0;
  pointer-events: none;

  transition:
    transform 160ms ease,
    opacity 160ms ease;

  backdrop-filter: blur(0.75rem);
  -webkit-backdrop-filter: blur(0.75rem);
}

body.dark .hd-nav {
  background: rgba(2, 6, 23, 0.84);
  border-bottom-color: rgba(96, 165, 250, 0.2);
  box-shadow: 0 1.4rem 3.2rem rgba(0, 0, 0, 0.55);
}

.hd-nav.nav-abierto {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.hd-nav-ul {
  list-style: none;
  margin: 0;
  padding: 0;

  display: grid;
  gap: 0.5rem;
}

.hd-nav-ul-li {
  border-radius: 1rem;
  overflow: hidden;

  background: rgba(255, 255, 255, 0.55);
  border: 0.1rem solid rgba(37, 99, 235, 0.14);
}

body.dark .hd-nav-ul-li {
  background: rgba(15, 23, 42, 0.55);
  border-color: rgba(96, 165, 250, 0.16);
}

.hd-nav-ul-li-a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;

  padding: 0.8rem 0.9rem;

  font-weight: 750;
  letter-spacing: 0.01em;

  color: #0f172a;
  text-decoration: none;
}

body.dark .hd-nav-ul-li-a {
  color: #e5e7eb;
}

.hd-nav-ul-li-a:hover {
  text-decoration: none;
  background: rgba(219, 234, 254, 0.7);
}

body.dark .hd-nav-ul-li-a:hover {
  background: rgba(30, 41, 59, 0.55);
}

.hd-nav-ul-li:nth-child(2) > .hd-nav-ul-li-a::after {
  content: "▾";
  font-size: 0.95rem;
  opacity: 0.75;
  transform: translateY(-0.05rem);
}

.hd-nav-ul-li:nth-child(2) > .hd-nav-ul-li-a[aria-expanded="true"]::after {
  content: "▴";
}

.submenu {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0.65rem 0.75rem;
  display: none;
  gap: 0.35rem;
}

.submenu.submenu-abierto {
  display: grid;
}

.submenu > li > a {
  display: block;
  padding: 0.65rem 0.75rem;
  border-radius: 0.9rem;
  background: rgba(37, 99, 235, 0.08);
  border: 0.1rem solid rgba(37, 99, 235, 0.14);
  font-weight: 650;
  font-size: 0.95rem;
  color: #1e3a8a;
  text-decoration: none;
}

body.dark .submenu > li > a {
  background: rgba(96, 165, 250, 0.12);
  border-color: rgba(96, 165, 250, 0.2);
  color: #bfdbfe;
}

.submenu > li > a:hover {
  text-decoration: none;
  background: rgba(37, 99, 235, 0.13);
}

@media (min-width: 48rem) {
  .hd-nav-ul-li:nth-child(2) {
    position: relative;
  }

  .submenu {
    position: absolute;
    top: 100%;
    left: -30%;
    margin-top: 0.5rem;

    width: 16rem;
    padding: 0.6rem;

    display: grid;
    gap: 0.35rem;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(0.5rem);

    background: rgba(239, 246, 255, 0.98);
    border: 0.1rem solid rgba(37, 99, 235, 0.16);
    border-radius: 1.2rem;
    box-shadow: 0 1.4rem 2.6rem rgba(2, 6, 23, 0.16);

    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
  }

  body.dark .submenu {
    background: rgba(2, 6, 23, 0.86);
    border-color: rgba(96, 165, 250, 0.2);
    box-shadow: 0 1.6rem 3rem rgba(0, 0, 0, 0.55);
  }

  .submenu-abierto {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
}

@media (min-width: 48rem) {
  .header {
    padding: 0.5rem 1.5rem;
    gap: 1rem;
  }

  #brand-name {
    font-size: 1.05rem;
    max-width: 18rem;
  }

  .hd-bn-modos {
    left: 29%;
    top: 2rem;
    width: 3rem;
  }

  .hd-bn-hamburguesa {
    display: none;
  }

  .hd-nav {
    position: static;
    padding: 0.5rem;
    background: transparent;
    border-radius: 1rem;
    box-shadow: none;

    transform: none;
    opacity: 1;
    pointer-events: auto;

    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .hd-nav-ul {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .hd-nav-ul-li {
    background: transparent;
    border: 0;
    overflow: visible;
  }

  .hd-nav-ul-li-a {
    padding: 0.6rem 0.85rem;
    border-radius: 1rem;

    background: rgba(255, 255, 255, 0.35);
    border: 0.1rem solid rgba(37, 99, 235, 0.16);
  }

  body.dark .hd-nav-ul-li-a {
    background: rgba(2, 6, 23, 0.24);
    border-color: rgba(96, 165, 250, 0.18);
  }

  .hd-nav-ul-li:nth-child(2) {
    position: relative;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hd-bn-modos,
  .hd-bn-hamburguesa,
  .hd-nav {
    transition: none;
  }
}





































.main {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1rem;

  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;

  justify-items: center;
}

.main > section,
.main > aside {
  width: min(72rem, 100%);

  background: rgba(239, 246, 255, 0.9);
  border: 0.1rem solid rgba(37, 99, 235, 0.14);
  border-radius: 1.25rem;
  padding: 1rem;
  box-shadow: 0 0.9rem 2.2rem rgba(2, 6, 23, 0.08);
}

body.dark .main > section,
body.dark .main > aside {
  background: rgba(2, 6, 23, 0.55);
  border-color: rgba(96, 165, 250, 0.18);
  box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.5);
}

.main > section[id="Inicio"],
.main > section[id="Pedido"] {
  width: min(42rem, 100%);
}

.main hr {
  border: 0;
  height: 0.1rem;
  background: rgba(37, 99, 235, 0.16);
  margin: 1rem 0 0;
}

body.dark .main hr {
  background: rgba(96, 165, 250, 0.22);
}

.main h1,
.main h2 {
  margin: 0 0 0.6rem;
  line-height: 1.15;
  color: #0f172a;
}

body.dark .main h1,
body.dark .main h2 {
  color: #e5e7eb;
}

.main p {
  margin: 0.45rem 0;
  color: rgba(15, 23, 42, 0.78);
}

body.dark .main p {
  color: rgba(226, 232, 240, 0.78);
}

.main > section[id="Inicio"] {
  position: relative;
  overflow: hidden;

  padding: 1.25rem;
  border-radius: 1.4rem;

  background: linear-gradient(135deg, rgba(219, 234, 254, 0.95), rgba(239, 246, 255, 0.92));
}

body.dark .main > section[id="Inicio"] {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.85), rgba(2, 6, 23, 0.65));
}

.main > section[id="Inicio"] h1 {
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}

.main > section[id="Inicio"] p:last-child {
  margin-top: 0.9rem;

  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

.main > section[id="Inicio"] p:last-child > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0.65rem 0.85rem;
  border-radius: 1rem;

  text-decoration: none;
  font-weight: 750;

  border: 0.1rem solid rgba(37, 99, 235, 0.2);
  background: rgba(255, 255, 255, 0.65);
  color: #1e3a8a;

  transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

body.dark .main > section[id="Inicio"] p:last-child > a {
  background: rgba(2, 6, 23, 0.35);
  color: #bfdbfe;
  border-color: rgba(96, 165, 250, 0.22);
}

.main > section[id="Inicio"] p:last-child > a:hover {
  box-shadow: 0 0.8rem 1.8rem rgba(2, 6, 23, 0.12);
  transform: translateY(-0.05rem);
}

.main form {
  display: grid;
  gap: 0.9rem;
}

.main fieldset {
  border: 0.1rem solid rgba(37, 99, 235, 0.14);
  border-radius: 1.2rem;
  padding: 0.9rem;
  background: rgba(255, 255, 255, 0.55);
}

body.dark .main fieldset {
  background: rgba(15, 23, 42, 0.45);
  border-color: rgba(96, 165, 250, 0.18);
}

.main legend {
  padding: 0 0.35rem;
  font-weight: 800;
  color: #0f172a;
}

body.dark .main legend {
  color: #e5e7eb;
}

.main label {
  font-weight: 700;
  color: rgba(15, 23, 42, 0.82);
}

body.dark .main label {
  color: rgba(226, 232, 240, 0.82);
}

.main input,
.main select,
.main textarea {
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.7rem 0.8rem;

  border-radius: 1rem;
  border: 0.1rem solid rgba(37, 99, 235, 0.18);
  background: rgba(255, 255, 255, 0.75);
  color: #0f172a;

  outline: none;

  transition: box-shadow 140ms ease, border-color 140ms ease, background-color 140ms ease;
}

body.dark .main input,
body.dark .main select,
body.dark .main textarea {
  background: rgba(2, 6, 23, 0.35);
  color: #e5e7eb;
  border-color: rgba(96, 165, 250, 0.22);
}

.main textarea {
  resize: vertical;
  min-height: 6rem;
}

.main input:focus,
.main select:focus,
.main textarea:focus {
  border-color: rgba(37, 99, 235, 0.45);
  box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.18);
}

body.dark .main input:focus,
body.dark .main select:focus,
body.dark .main textarea:focus {
  border-color: rgba(96, 165, 250, 0.5);
  box-shadow: 0 0 0 0.25rem rgba(96, 165, 250, 0.18);
}

.main input[type="radio"] {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0;
  vertical-align: middle;
}

.main button {
  border: 0;
  border-radius: 1rem;
  padding: 0.75rem 0.5rem;

  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;

  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #eff6ff;

  box-shadow: 0 0.9rem 2rem rgba(37, 99, 235, 0.25);
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}

.main button:hover {
  filter: brightness(1.04);
  box-shadow: 0 1.1rem 2.6rem rgba(37, 99, 235, 0.32);
  transform: translateY(-0.05rem);
}

.main button:active {
  transform: translateY(0.05rem);
}

.main small[role="status"] {
  display: block;
  padding: 0.6rem 0.75rem;
  border-radius: 1rem;

  background: rgba(37, 99, 235, 0.08);
  border: 0.1rem dashed rgba(37, 99, 235, 0.22);

  color: rgba(15, 23, 42, 0.75);
}

body.dark .main small[role="status"] {
  background: rgba(96, 165, 250, 0.12);
  border-color: rgba(96, 165, 250, 0.22);
  color: rgba(226, 232, 240, 0.78);
}

.main > section[id="Categorias"] {
  overflow: hidden;
}

.main > section[id="Categorias"] > p {
  margin-bottom: 0.75rem;
}

.main > section[id="Categorias"] a,
.main > section[id="Categorias"] button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0.5rem 0.75rem;
  border-radius: 999rem;

  border: 0.1rem solid rgba(37, 99, 235, 0.18);
  background: rgba(255, 255, 255, 0.6);
  color: #1e3a8a;

  font-weight: 750;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
}

body.dark .main > section[id="Categorias"] a,
body.dark .main > section[id="Categorias"] button {
  background: rgba(2, 6, 23, 0.35);
  border-color: rgba(96, 165, 250, 0.22);
  color: #bfdbfe;
}

.main > section[id="Categorias"] > :not(h2):not(p):not(hr) {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.35rem;
  scroll-snap-type: x mandatory;
}

.main > section[id="Categorias"] a,
.main > section[id="Categorias"] button {
  scroll-snap-align: start;
}

.main > section[id="Menu"] > div {
  display: grid;
  gap: 0.35rem;
  margin: 0.7rem 0;
}

.main > section[id="Menu"] > div[id="menu-container"] {
  margin-top: 0.9rem;

  display: grid;
  gap: 1rem;

  padding: 0;
  border: 0;
  background: transparent;
  min-height: 6rem;
}

.main > section[id="Menu"] > div[id="menu-container"] > * {
  border-radius: 1.4rem;
  border: 0.1rem solid rgba(37, 99, 235, 0.14);
  background: rgba(239, 246, 255, 0.55);

  padding: 1rem;
  box-shadow: 0 1.1rem 2.6rem rgba(2, 6, 23, 0.06);

  display: grid;
  gap: 0.85rem;
}

body.dark .main > section[id="Menu"] > div[id="menu-container"] > * {
  background: rgba(2, 6, 23, 0.42);
  border-color: rgba(96, 165, 250, 0.18);
  box-shadow: 0 1.35rem 3.2rem rgba(0, 0, 0, 0.55);
}

.main > section[id="Menu"] > div[id="menu-container"] > * [data-category-title] {
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  padding-left: 0.1rem;
  justify-self: center;

  margin: 0;
}

.main > section[id="Menu"] > div[id="menu-container"] > * [data-category-products] {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .main > section[id="Menu"] > div[id="menu-container"] > * [data-category-products] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .main > section[id="Menu"] > div[id="menu-container"] > * [data-category-products] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.main > section[id="Menu"] > div[id="menu-container"] > * [data-category-products] > * {
  border-radius: 1.25rem;
  border: 0.1rem solid rgba(37, 99, 235, 0.12);
  background: rgba(255, 255, 255, 0.68);

  padding: 0.85rem;
  box-shadow: 0 0.9rem 2rem rgba(2, 6, 23, 0.06);

  display: grid;
  align-items: start;

  min-width: 0;
}

body.dark .main > section[id="Menu"] > div[id="menu-container"] > * [data-category-products] > * {
  background: rgba(2, 6, 23, 0.5);
  border-color: rgba(96, 165, 250, 0.18);
  box-shadow: 0 1.1rem 2.6rem rgba(0, 0, 0, 0.55);
}

.main > section[id="Menu"] > div[id="menu-container"] > * [data-category-products] > article.Producto > img[data-product-img],
.main > section[id="Menu"] > div[id="menu-container"] > * [data-category-products] > article.Producto > p:last-child {
  justify-self: center;
}

.main > section[id="Menu"] > div[id="menu-container"] > * [data-category-products] > * > [data-product-img] {
  width: 25vw;
  object-fit: cover;
  border-radius: 1.5rem;
}

.main > section[id="Menu"] > div[id="menu-container"] > * [data-category-products] > * > :not([data-product-img]) {
  min-width: 0;
  overflow-wrap: anywhere;

  margin: 0;
  padding: 0;

  margin-top: 0.5rem;
}

.main > section[id="Menu"] > div[id="menu-container"] > * [data-category-products] > * [data-product-name] {
  font-weight: 900;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.main > section[id="Menu"] > div[id="menu-container"] > * [data-category-products] > * [data-product-price] {
  font-weight: 900;
  color: #1e3a8a;
}

body.dark .main > section[id="Menu"] > div[id="menu-container"] > * [data-category-products] > * [data-product-price] {
  color: #bfdbfe;
}

.main > section[id="Menu"] > div[id="menu-container"] > * [data-category-products] > * button,
.main > section[id="Menu"] > div[id="menu-container"] > * [data-category-products] > * a {
  padding: 0.65rem 0.85rem;
}

.main > aside[id="cart"] {
  position: fixed;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 120;

  width: auto;
  max-width: 42rem;
  margin: 0 auto;

  max-height: 75vh;
  overflow: hidden;

  border-radius: 1.25rem;

  transform: translateY(calc(100% - 3.75rem));
  transition: transform 180ms ease;
}

.main > aside[id="cart"].cart-abierto {
  transform: translateY(0);
}

.main > aside[id="cart"] > h2 {
  position: sticky;
  top: 0;

  margin: 0;
  padding: 0.9rem 1rem;

  background: inherit;
  border-bottom: 0.1rem solid rgba(37, 99, 235, 0.14);

  cursor: pointer;
  user-select: none;
}

.main > aside[id="cart"] > h2::after {
  content: "▲";
  float: right;
  opacity: 0.7;
}

.main > aside[id="cart"].cart-abierto > h2::after {
  content: "▼";
}

.main > aside[id="cart"] p:first-of-type {
  margin-top: 0.2rem;
  padding: 0.7rem 0.8rem;
  border-radius: 1.1rem;
  background: rgba(37, 99, 235, 0.08);
  border: 0.1rem solid rgba(37, 99, 235, 0.14);
}

body.dark .main > aside[id="cart"] p:first-of-type {
  background: rgba(96, 165, 250, 0.08);
  border-color: rgba(96, 165, 250, 0.14);
}

.main > aside[id="cart"] > div[id="cart-items"] {
  margin-top: 0.8rem;
  padding: 0.75rem;
  border-radius: 1.2rem;

  border: 0.1rem solid rgba(37, 99, 235, 0.12);
  background: rgba(255, 255, 255, 0.45);
  min-height: 5rem;

  max-height: calc(75vh - 10rem);
  overflow: auto;
}

body.dark .main > aside[id="cart"] > div[id="cart-items"] {
  background: rgba(15, 23, 42, 0.35);
  border-color: rgba(96, 165, 250, 0.16);
}

.main > aside[id="cart"] button {
  background: rgba(255, 255, 255, 0.65);
  color: #1e3a8a;
  border: 0.1rem solid rgba(37, 99, 235, 0.2);
  box-shadow: none;
}

body.dark .main > aside[id="cart"] button {
  background: rgba(2, 6, 23, 0.35);
  color: #bfdbfe;
  border-color: rgba(96, 165, 250, 0.22);
}

.cart-backdrop {
  position: fixed;
  inset: 0;
  z-index: 110;

  background: rgba(2, 6, 23, 0);
  pointer-events: none;

  transition: background 180ms ease;
}

.cart-backdrop.activo {
  background: rgba(2, 6, 23, 0.35);
  pointer-events: auto;
}

@media (min-width: 40rem) {
  .main {
    padding: 1.25rem 1.5rem;
    gap: 1.25rem;
  }

  .main > section[id="Menu"] > div:first-of-type,
  .main > section[id="Menu"] > div:nth-of-type(2) {
    display: inline-grid;
    width: calc(50% - 0.5rem);
    vertical-align: top;
  }

  .main form fieldset {
    padding: 1rem;
  }

  .main form fieldset > p {
    margin: 0.6rem 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .main button,
  .main input,
  .main select,
  .main textarea,
  .main > section,
  .main > aside,
  .cart-backdrop,
  .main > aside[id="cart"] {
    transition: none;
  }
}





































.footer {
  width: min(72rem, 100%);
  margin: 0 auto;
  padding: 1.25rem;

  display: grid;
  gap: 1rem;

  border-radius: 1.5rem;
  border: 0.1rem solid rgba(37, 99, 235, 0.14);
  background: linear-gradient(135deg, rgba(219, 234, 254, 0.95), rgba(239, 246, 255, 0.92));
  box-shadow: 0 1.1rem 2.8rem rgba(2, 6, 23, 0.08);

  padding-bottom: calc(1.25rem + 5.25rem + env(safe-area-inset-bottom));
}

body.dark .footer {
  border-color: rgba(96, 165, 250, 0.18);
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.88), rgba(2, 6, 23, 0.62));
  box-shadow: 0 1.4rem 3.2rem rgba(0, 0, 0, 0.55);
}

.footer > h2 {
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-size: 1.35rem;
  color: #0f172a;
}

body.dark .footer > h2 {
  color: #e5e7eb;
}

.footer > section {
  border-radius: 1.25rem;
  border: 0.1rem solid rgba(37, 99, 235, 0.12);
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 0.85rem 2rem rgba(2, 6, 23, 0.06);
  padding: 1rem;

  display: grid;
  gap: 0.65rem;
}

body.dark .footer > section {
  border-color: rgba(96, 165, 250, 0.16);
  background: rgba(2, 6, 23, 0.42);
  box-shadow: 0 1.1rem 2.6rem rgba(0, 0, 0, 0.55);
}

.footer h3 {
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-size: 1.05rem;
  color: #0f172a;
}

body.dark .footer h3 {
  color: #e5e7eb;
}

.footer p {
  margin: 0;
  color: rgba(15, 23, 42, 0.78);
  line-height: 1.5;
}

body.dark .footer p {
  color: rgba(226, 232, 240, 0.8);
}

.footer a {
  color: #1e3a8a;
  text-decoration: none;
  font-weight: 800;
  border-radius: 0.75rem;
  outline: none;
}

body.dark .footer a {
  color: #bfdbfe;
}

.footer a:hover {
  text-decoration: underline;
  text-underline-offset: 0.18rem;
}

.footer a:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.18);
}

body.dark .footer a:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(96, 165, 250, 0.18);
}

.footer .footer-a-Direccion {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  background: rgba(37, 99, 235, 0.08);
  border: 0.1rem solid rgba(37, 99, 235, 0.14);
}

body.dark .footer .footer-a-Direccion {
  background: rgba(96, 165, 250, 0.12);
  border-color: rgba(96, 165, 250, 0.18);
}

.footer iframe {
  width: 100%;
  border: 0;
  border-radius: 1.1rem;
  aspect-ratio: 16 / 9;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0.9rem 2rem rgba(2, 6, 23, 0.08);
}

body.dark .footer iframe {
  background: rgba(2, 6, 23, 0.35);
  box-shadow: 0 1.2rem 2.8rem rgba(0, 0, 0, 0.55);
}

.footer > section:nth-of-type(2) p:last-of-type {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.footer > section:nth-of-type(2) p:last-of-type a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;

  padding: 0.5rem 0.7rem;
  border-radius: 999rem;

  background: rgba(255, 255, 255, 0.7);
  border: 0.1rem solid rgba(37, 99, 235, 0.16);

  text-decoration: none;
  font-weight: 850;
  line-height: 1;
}

body.dark .footer > section:nth-of-type(2) p:last-of-type a {
  background: rgba(2, 6, 23, 0.35);
  border-color: rgba(96, 165, 250, 0.2);
}

.footer > section:nth-of-type(2) p:last-of-type a:hover {
  box-shadow: 0 0.85rem 2rem rgba(2, 6, 23, 0.12);
  transform: translateY(-0.05rem);
}

.footer > section:nth-of-type(2) p:last-of-type a i {
  font-size: 1.05rem;
  line-height: 1;
}

.footer .footer-ul-horario {
  list-style: none;
  padding: 0;
  margin: 0.2rem 0 0;

  display: grid;
  gap: 0.55rem;
}

.footer .footer-ul-horario li {
  padding: 0.7rem 0.85rem;
  border-radius: 1.1rem;

  background: rgba(37, 99, 235, 0.06);
  border: 0.1rem solid rgba(37, 99, 235, 0.12);

  color: rgba(15, 23, 42, 0.78);
}

body.dark .footer .footer-ul-horario li {
  background: rgba(96, 165, 250, 0.1);
  border-color: rgba(96, 165, 250, 0.18);
  color: rgba(226, 232, 240, 0.82);
}

.footer > p:last-of-type {
  margin: 0.25rem 0 0;
  text-align: center;
  font-size: 0.95rem;
  color: rgba(15, 23, 42, 0.62);
}

body.dark .footer > p:last-of-type {
  color: rgba(226, 232, 240, 0.62);
}

@media (min-width: 48rem) {
  .footer {
    grid-template-columns: 1.35fr 1fr;
    gap: 1rem;
  }

  .footer > h2,
  .footer > p:last-of-type {
    grid-column: 1 / -1;
  }

  .footer > section:nth-of-type(1) {
    grid-column: 1 / 2;
  }

  .footer > section:nth-of-type(2) {
    grid-column: 2 / 3;
  }

  .footer > section:nth-of-type(3) {
    grid-column: 1 / -1;
  }

  .footer iframe {
    aspect-ratio: 18 / 9;
  }
}

@media (min-width: 64rem) {
  .footer {
    grid-template-columns: 1.25fr 1fr 0.9fr;
    gap: 1.1rem;
  }

  .footer > section:nth-of-type(1) {
    grid-column: 1 / 2;
  }

  .footer > section:nth-of-type(2) {
    grid-column: 2 / 3;
  }

  .footer > section:nth-of-type(3) {
    grid-column: 3 / 4;
  }

  .footer iframe {
    aspect-ratio: 16 / 10;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer,
  .footer > section,
  .footer > section:nth-of-type(2) p:last-of-type a {
    transition: none;
    transform: none;
  }
}





































#product-dialog {
  width: min(42rem, calc(100% - 2rem));
  padding: 0;

  border-radius: 1.4rem;
  border: 0.1rem solid rgba(37, 99, 235, 0.16);
  background: rgba(239, 246, 255, 0.96);
  box-shadow: 0 1.6rem 3.4rem rgba(2, 6, 23, 0.18);

  overflow: hidden;
}

body.dark #product-dialog {
  border-color: rgba(96, 165, 250, 0.2);
  background: rgba(2, 6, 23, 0.92);
  box-shadow: 0 1.9rem 4rem rgba(0, 0, 0, 0.65);
}

#product-dialog::backdrop {
  background: rgba(2, 6, 23, 0.45);
}

body.dark #product-dialog::backdrop {
  background: rgba(0, 0, 0, 0.62);
}

#dialog-form {
  margin: 0;
  padding: 1.1rem;
  padding-bottom: calc(1.1rem + env(safe-area-inset-bottom));

  display: grid;
  gap: 0.9rem;

  max-height: min(80vh, 44rem);
  overflow: auto;

  -webkit-overflow-scrolling: touch;
}

#dialog-title {
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-size: 1.25rem;
  color: #0f172a;
}

body.dark #dialog-title {
  color: #e5e7eb;
}

#dialog-desc {
  margin: 0;

  padding: 0.75rem 0.85rem;
  border-radius: 1.1rem;

  background: rgba(37, 99, 235, 0.07);
  border: 0.1rem solid rgba(37, 99, 235, 0.14);

  color: rgba(15, 23, 42, 0.78);
  line-height: 1.5;
}

body.dark #dialog-desc {
  background: rgba(96, 165, 250, 0.12);
  border-color: rgba(96, 165, 250, 0.18);
  color: rgba(226, 232, 240, 0.82);
}

#product-dialog fieldset {
  margin: 0;
  border: 0.1rem solid rgba(37, 99, 235, 0.14);
  border-radius: 1.25rem;
  padding: 0.9rem;
  background: rgba(255, 255, 255, 0.65);
}

body.dark #product-dialog fieldset {
  background: rgba(15, 23, 42, 0.42);
  border-color: rgba(96, 165, 250, 0.18);
}

#product-dialog legend {
  padding: 0 0.35rem;
  font-weight: 900;
  color: #0f172a;
}

body.dark #product-dialog legend {
  color: #e5e7eb;
}

#product-dialog p {
  margin: 0;
  color: rgba(15, 23, 42, 0.78);
}

body.dark #product-dialog p {
  color: rgba(226, 232, 240, 0.82);
}

#product-dialog label {
  font-weight: 850;
  color: rgba(15, 23, 42, 0.85);
}

body.dark #product-dialog label {
  color: rgba(226, 232, 240, 0.86);
}

#product-dialog input,
#product-dialog textarea {
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.7rem 0.85rem;

  border-radius: 1rem;
  border: 0.1rem solid rgba(37, 99, 235, 0.18);
  background: rgba(255, 255, 255, 0.78);
  color: #0f172a;

  outline: none;
  transition: box-shadow 140ms ease, border-color 140ms ease, background-color 140ms ease;
}

body.dark #product-dialog input,
body.dark #product-dialog textarea {
  background: rgba(2, 6, 23, 0.4);
  color: #e5e7eb;
  border-color: rgba(96, 165, 250, 0.22);
}

#product-dialog textarea {
  resize: vertical;
  min-height: 6.5rem;
}

#product-dialog input:focus,
#product-dialog textarea:focus {
  border-color: rgba(37, 99, 235, 0.5);
  box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.18);
}

body.dark #product-dialog input:focus,
body.dark #product-dialog textarea:focus {
  border-color: rgba(96, 165, 250, 0.55);
  box-shadow: 0 0 0 0.25rem rgba(96, 165, 250, 0.18);
}

#dialog-qty {
  max-width: 10rem;
}

#dialog-options {
  display: grid;
  gap: 0.6rem;
}

#dialog-options > p {
  margin: 0;

  display: flex;
  gap: 0.6rem;
  align-items: flex-start;

  padding: 0.65rem 0.75rem;
  border-radius: 1.05rem;

  background: rgba(37, 99, 235, 0.05);
  border: 0.1rem solid rgba(37, 99, 235, 0.12);
}

body.dark #dialog-options > p {
  background: rgba(96, 165, 250, 0.1);
  border-color: rgba(96, 165, 250, 0.18);
}

#dialog-options input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.1rem 0 0;
  flex: 0 0 auto;

  accent-color: #2563eb;
}

#dialog-options label {
  margin: 0;
  line-height: 1.35;
}

#dialog-form menu {
  margin: 0.25rem 0 0;
  padding: 0;

  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

#dialog-form menu > button {
  width: 100%;
  border-radius: 1rem;
  padding: 0.75rem 0.95rem;

  font-weight: 900;
  letter-spacing: 0.01em;
  cursor: pointer;

  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease, background-color 140ms ease, border-color 140ms ease;
}

#dialog-cancel {
  border: 0.1rem solid rgba(37, 99, 235, 0.2);
  background: rgba(255, 255, 255, 0.7);
  color: #1e3a8a;
  box-shadow: none;
}

body.dark #dialog-cancel {
  border-color: rgba(96, 165, 250, 0.22);
  background: rgba(2, 6, 23, 0.35);
  color: #bfdbfe;
}

#dialog-confirm {
  border: 0;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #eff6ff;
  box-shadow: 0 1rem 2.2rem rgba(37, 99, 235, 0.28);
}

#dialog-form menu > button:hover {
  filter: brightness(1.03);
  transform: translateY(-0.05rem);
}

#dialog-form menu > button:active {
  transform: translateY(0.05rem);
}

#dialog-form menu > button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.18);
}

body.dark #dialog-form menu > button:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(96, 165, 250, 0.18);
}

@media (min-width: 30rem) {
  #dialog-form menu {
    flex-direction: row;
  }

  #dialog-form menu > button {
    width: auto;
    flex: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  #product-dialog,
  #product-dialog input,
  #product-dialog textarea,
  #dialog-form menu > button {
    transition: none;
  }
}