.menu-page { background: var(--paper); }
.menu-top { min-height: 124px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; position: relative; z-index: 30; padding: .7rem clamp(1rem, 4vw, 4rem); color: var(--white); background: var(--black); border-bottom: 4px solid var(--paper); }
.menu-logo { display: flex; align-items: center; gap: .55rem; flex: none; }
.menu-logo-mark { width: 76px; height: 76px; object-fit: contain; }
.menu-logo-lettering { width: 124px; height: auto; display: block; }
.menu-call { min-width: min(560px, 60vw); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem; padding: 1rem 1.2rem; color: var(--black); background: var(--yellow); border: 4px solid var(--paper); box-shadow: 7px 7px 0 var(--red); }
.menu-call span { font-size: .68rem; font-weight: 700; letter-spacing: .13em; }
.menu-call strong { font: 400 clamp(1.6rem, 3vw, 2.8rem)/1 var(--display); text-align: right; }
.menu-call b { font-size: 1.8rem; }

.menu-hero-v2 { min-height: 750px; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 2rem; position: relative; isolation: isolate; padding: clamp(4rem, 8vw, 8rem) clamp(1rem, 4vw, 4rem); color: var(--white); background: linear-gradient(110deg, rgba(4, 5, 5, .72), rgba(4, 5, 5, .91)), url('../assets/images/brick-wall.webp') center top / 1448px 483px repeat; overflow: hidden; }
.menu-hero-v2 > .wall-word { right: -4vw; bottom: -4rem; z-index: -1; color: rgba(242,234,219,.07); font: 400 clamp(14rem, 31vw, 35rem)/.7 var(--display); letter-spacing: -.06em; transform: rotate(-3deg); }
.menu-hero-v2 h1 { margin: 0; font: 400 clamp(5.5rem, 10vw, 10.5rem)/.8 var(--display); -webkit-text-stroke: clamp(3px, .3vw, 5px) var(--black); paint-order: stroke fill; }
.menu-hero-v2 h1 span { color: var(--red); -webkit-text-stroke: 2px var(--paper); }
.menu-hero-v2 > div > p:last-child { margin: 2rem 0 0; color: var(--yellow); font: 400 clamp(1.5rem, 3vw, 2.7rem) var(--marker); transform: rotate(-2deg); }
.menu-hero-v2 figure { margin: 0; position: relative; padding: 2rem; background: var(--red); border: 5px solid var(--paper); box-shadow: 14px 14px 0 var(--yellow); transform: rotate(3deg); }
.menu-hero-v2 figure::before, .menu-hero-v2 figure::after { content: ''; position: absolute; z-index: 3; width: 112px; height: 44px; background: url('assets/tape-natural-v2.png') center / 100% 100% no-repeat; pointer-events: none; }
.menu-hero-v2 figure::before { top: -22px; left: 13%; transform: rotate(-7deg); }
.menu-hero-v2 figure::after { right: 8%; bottom: -22px; transform: rotate(8deg); }
.menu-hero-v2 figure span { position: absolute; z-index: 1; top: -2.5rem; right: -1rem; padding: .8rem 1rem; color: var(--black); background: var(--yellow); border: 3px solid var(--black); font: 400 1.2rem/1 var(--display); transform: rotate(8deg); }
.menu-hero-v2 figure video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--black); }
.menu-hero-v2 .video-toggle { right: 2.6rem; bottom: 2.6rem; }

.menu-tabs { position: sticky; z-index: 20; top: 0; display: grid; grid-template-columns: repeat(4, 1fr); color: var(--white); background: var(--red); border-block: 4px solid var(--black); }
.menu-tabs a { min-height: 70px; display: grid; place-items: center; border-right: 3px solid var(--black); font: 400 clamp(1.1rem, 2vw, 2rem) var(--display); letter-spacing: .04em; text-transform: uppercase; }
.menu-tabs a:last-child { border-right: 0; }
.menu-tabs a:hover { color: var(--black); background: var(--yellow); }

.pizza-list, .side-orders { position: relative; isolation: isolate; padding: clamp(5rem, 9vw, 9rem) clamp(1rem, 4vw, 4rem); background-color: var(--paper); background-image: var(--paper-scuff); background-size: 17px 19px, 29px 25px; overflow: hidden; }
.pizza-list > .wall-word { left: -3vw; top: 3rem; z-index: -1; color: rgba(239,64,38,.075); font: 400 clamp(13rem, 31vw, 34rem)/.7 var(--display); letter-spacing: -.06em; transform: rotate(-4deg); }
.menu-section-title { display: grid; grid-template-columns: .35fr 1fr; align-items: start; margin-bottom: 4rem; }
.menu-section-title h2, .sizes h2, .side-orders h2, .extra h2, .menu-reviews h2, .menu-close h2 { margin: 0; font: 400 clamp(5rem, 10vw, 10rem)/.8 var(--display); text-transform: uppercase; }
#sizes-title { isolation: isolate; }
#sizes-title .sizes-leading-q { position: relative; z-index: 1; }
#entradas-title { font-size: clamp(4rem, 8.7vw, 9rem); width: fit-content; max-width: 100%; }
#entradas-title .entradas-line { display: block; white-space: nowrap; }
#entradas-title .entradas-line-bottom { display: flex; gap: .45em; padding-left: .69em; }
@media (max-width: 640px) {
  .side-orders #entradas-title { font-size: clamp(2.8rem, 17vw, 5rem); }
}
.pizza-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.pizza-cards article { min-height: 330px; display: grid; grid-template-columns: minmax(180px, 42%) 1fr; align-items: center; gap: 1rem; position: relative; padding: 1.5rem; background-color: var(--white); background-image: var(--paper-scuff); background-size: 19px 17px, 23px 29px; border: 4px solid var(--black); box-shadow: 8px 8px 0 var(--black); overflow: hidden; transition: transform .16s ease, box-shadow .16s ease; }
.pizza-cards article:hover { z-index: 2; transform: translate(-3px, -3px) rotate(-.35deg); box-shadow: 13px 13px 0 var(--black); }
.pizza-cards article:nth-child(4n+2), .pizza-cards article:nth-child(4n+3) { background: #e9d4bb; }
.pizza-cards article > span { position: absolute; top: .8rem; right: .8rem; width: 46px; aspect-ratio: 1; display: grid; place-items: center; color: var(--white); background: var(--red); border: 3px solid var(--black); border-radius: 50%; font: 400 1rem var(--display); }
.pizza-cards img { width: 100%; height: 220px; object-fit: contain; }
.pizza-visual { position: relative; min-width: 0; height: 220px; isolation: isolate; --steam-gain: 1.25; }
.pizza-steam { position: absolute; z-index: 1; width: var(--steam-width, 130px); height: calc(var(--steam-width, 130px) * .625 + var(--steam-tail, 0px)); left: calc(var(--steam-x, 40%) - var(--steam-width, 130px) / 2); top: calc(var(--steam-y, 43%) - var(--steam-width, 130px) * .54375 - var(--steam-tail, 0px)); pointer-events: none; overflow: visible; opacity: 0; transition: opacity .6s ease; }
.is-steaming .pizza-steam { opacity: 1; }
.steam-origin { position: absolute; left: var(--steam-x, 40%); top: var(--steam-y, 43%); width: 1px; height: 1px; pointer-events: none; }
.steam-wisp { transform-box: view-box; transform-origin: 50% var(--steam-origin-percent, 87%); opacity: 0; animation: steam-rise var(--duration) var(--delay) ease-in-out infinite; animation-play-state: paused; }
.is-steam-running .steam-wisp { animation-play-state: running; will-change: transform, opacity; }
.pizza-cards article > div:not(.pizza-visual), .pizza-cards article > span { position: relative; z-index: 2; }
.pizza-cards article > span { position: absolute; }
@keyframes steam-rise {
  0%, 100% { opacity: 0; transform: translate(0, 3px) scale(.92, .95); }
  18% { opacity: calc(var(--strength) * var(--steam-gain, 1)); }
  48% { opacity: calc(var(--strength) * var(--steam-gain, 1)); transform: translate(calc(var(--drift) * .3), -22px) scale(1.02, 1.04); }
  82% { opacity: 0; transform: translate(var(--drift), -42px) scale(1.12, 1.09); }
  99% { opacity: 0; transform: translate(var(--drift), -46px) scale(1.14, 1.1); }
}
.pizza-cards h3 { margin: 0 0 .8rem; font: 400 clamp(2.1rem, 4vw, 4rem)/.9 var(--display); text-transform: uppercase; }
.pizza-cards p { margin: 0; font-size: .82rem; }

.sizes { display: grid; grid-template-columns: .9fr 1.1fr; gap: 4rem; align-items: center; position: relative; isolation: isolate; padding: clamp(5rem, 9vw, 9rem) clamp(1rem, 4vw, 4rem); color: var(--black); background-color: var(--yellow); background-image: var(--paper-scuff); background-size: 18px 20px, 31px 27px; border-block: 4px solid var(--black); overflow: hidden; }
.sizes > .wall-word { left: -2vw; bottom: -3rem; z-index: -1; color: rgba(11,11,10,.07); font: 400 clamp(13rem, 30vw, 32rem)/.7 var(--display); letter-spacing: -.06em; transform: rotate(3deg); }
.size-posters { display: grid; grid-template-columns: 1fr 1fr; }
.size-posters article { min-height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 1.5rem; background: var(--paper); border: 4px solid var(--black); }
.size-posters article:last-of-type { color: var(--white); background: var(--red); transform: rotate(2deg); }
.size-posters article span { font-size: .72rem; font-weight: 700; letter-spacing: .13em; }
.size-posters article strong { font: 400 7rem/.8 var(--display); }
.size-posters article small { font-size: 1.3rem; }
.size-posters article b { font: 400 4rem var(--display); }
.size-posters > p { grid-column: 1/-1; margin: 0; padding: 1rem; color: var(--white); background: var(--black); font-weight: 700; letter-spacing: .13em; text-align: center; }
.size-posters > p strong { color: var(--yellow); }

.side-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.side-grid article { min-height: 390px; display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; position: relative; padding: 2rem; border: 4px solid var(--black); box-shadow: 9px 9px 0 var(--black); transition: transform .16s ease, box-shadow .16s ease; }
.side-grid article::before { content: ''; position: absolute; z-index: 3; top: -22px; left: 12%; width: 110px; height: 44px; background: url('assets/tape-natural-v2.png') center / 100% 100% no-repeat; transform: rotate(-6deg); pointer-events: none; }
.side-grid article:last-child::before { right: 12%; left: auto; transform: rotate(7deg); }
.side-grid article:hover { transform: translate(-3px, -3px) rotate(.35deg); box-shadow: 14px 14px 0 var(--black); }
.side-grid article:first-child { background: var(--red); }
.side-grid article:last-child { background: var(--yellow); }
.side-grid img { width: 100%; height: 280px; object-fit: contain; }
.side-grid p { font-size: .65rem; font-weight: 700; letter-spacing: .13em; }
.side-grid h3 { margin: .5rem 0 1.5rem; font: 400 clamp(2.6rem, 5vw, 5rem)/.85 var(--display); text-transform: uppercase; }
.side-grid strong { font: 400 3rem var(--display); }

.extra { min-height: 650px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 3rem; padding: clamp(5rem, 9vw, 9rem) clamp(1rem, 4vw, 4rem); color: var(--white); background: linear-gradient(rgba(4, 5, 5, .8), rgba(4, 5, 5, .9)), url('../assets/images/brick-wall.webp') center / 1448px 483px repeat; }
.extra h2 { color: var(--red); }
.extra > div > strong { display: inline-block; margin-top: 2rem; padding: .3rem 1.2rem; color: var(--black); background: var(--yellow); border: 3px solid var(--paper); font: 400 4rem var(--display); transform: rotate(-4deg); }
.extra img { width: 100%; max-height: 520px; object-fit: contain; }

.menu-reviews { display: grid; grid-template-columns: .75fr 1.25fr; gap: 4rem; padding: clamp(5rem, 9vw, 9rem) clamp(1rem, 4vw, 4rem); background: var(--red); }
.menu-reviews > div:last-child { display: grid; gap: 1rem; }
.menu-reviews blockquote { margin: 0; position: relative; padding: 1.5rem; background-color: var(--paper); background-image: var(--paper-scuff); background-size: 19px 17px, 23px 29px; border: 4px solid var(--black); box-shadow: 8px 8px 0 var(--black); transition: transform .16s ease, box-shadow .16s ease; }
.menu-reviews blockquote::after { content: ''; position: absolute; top: -18px; right: 1rem; width: 76px; height: 36px; background: url('assets/tape-natural-v2.png') center / 100% 100% no-repeat; transform: rotate(2deg); pointer-events: none; }
.menu-reviews blockquote:hover { transform: translate(-3px, -3px) rotate(-.35deg); box-shadow: 12px 12px 0 var(--black); }
.menu-reviews blockquote:nth-child(2) { background: var(--yellow); transform: rotate(1deg); }
.menu-reviews blockquote span { letter-spacing: .15em; }
.menu-reviews blockquote p { margin: .8rem 0 1.5rem; font: 400 clamp(2rem, 3.5vw, 3.7rem)/1 var(--display); text-transform: uppercase; }
.menu-reviews blockquote footer { font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

.menu-close { min-height: 700px; display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 4rem; padding: clamp(5rem, 9vw, 9rem) clamp(1rem, 4vw, 4rem); color: var(--white); background: linear-gradient(rgba(4, 5, 5, .8), rgba(4, 5, 5, .92)), url('../assets/images/brick-wall.webp') center / 1448px 483px repeat; }
.menu-close > img { max-height: 580px; object-fit: contain; }
.menu-close h2 { margin-bottom: 2.5rem; }
.menu-footer { display: flex; justify-content: space-between; gap: 1rem; padding: 2rem clamp(1rem, 4vw, 4rem); background: var(--yellow); border-top: 4px solid var(--black); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

@media (max-width: 940px) {
  .menu-hero-v2, .sizes, .extra, .menu-reviews, .menu-close { grid-template-columns: 1fr; }
  .pizza-cards { grid-template-columns: 1fr; }
  .side-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .menu-top { min-height: 96px; gap: .5rem; padding: .5rem .75rem; }
  .menu-logo { gap: .2rem; }
  .menu-logo-mark { width: 44px; height: 52px; }
  .menu-logo-lettering { width: 78px; }
  .menu-call { min-width: 0; grid-template-columns: 1fr auto; gap: .7rem; padding: .65rem .7rem; box-shadow: 4px 4px 0 var(--red); }
  .menu-call span { display: none; }
  .menu-call strong { font-size: 1.15rem; text-align: left; }
  .menu-call b { font-size: 1.2rem; }
  .menu-hero-v2 { min-height: auto; padding: 4rem 1rem; }
  .menu-hero-v2 h1 { font-size: clamp(3.5rem, 18vw, 5.5rem); }
  .menu-hero-v2 figure { margin: 2rem .5rem 0 0; padding: 1rem; box-shadow: 8px 8px 0 var(--yellow); }
  .menu-hero-v2 .video-toggle { right: 1.6rem; bottom: 1.6rem; }
  .menu-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .menu-tabs a { min-width: 0; min-height: 58px; padding-inline: .2rem; font-size: clamp(.9rem, 3.8vw, 1.35rem); letter-spacing: .02em; }
  .pizza-list, .side-orders, .sizes, .extra, .menu-reviews, .menu-close { padding: 5rem 1rem; }
  .menu-section-title { grid-template-columns: 1fr; }
  .menu-section-title h2, .sizes h2, .side-orders h2, .extra h2, .menu-reviews h2, .menu-close h2 { font-size: clamp(4.2rem, 21vw, 6.5rem); }
  .pizza-cards article { min-height: auto; grid-template-columns: 1fr; padding: 1rem; }
  .pizza-cards img { height: 210px; }
  .pizza-visual { height: 210px; }
  .pizza-cards h3 { font-size: 2.8rem; }
  .size-posters article { min-height: 240px; padding: 1rem; }
  .size-posters article strong { font-size: 4.6rem; }
  .size-posters article b { font-size: 3rem; }
  .side-grid article { grid-template-columns: 1fr; padding: 1.2rem; }
  .side-grid img { height: 230px; }
  .menu-close { min-height: auto; }
  .menu-reviews blockquote:nth-child(2) { transform: none; }
  .menu-footer { flex-direction: column; }
  .menu-hero-v2 > .wall-word, .pizza-list > .wall-word, .sizes > .wall-word { font-size: 13rem; }
}

@media (max-width: 360px) {
  .menu-top { gap: .3rem; }
  .menu-logo { gap: .15rem; }
  .menu-logo-mark { width: 36px; height: 46px; }
  .menu-logo-lettering { width: 68px; }
  .menu-call strong { font-size: 1rem; white-space: nowrap; }
}

@media (max-width: 940px), (hover: none), (pointer: coarse) {
  .pizza-visual { --steam-gain: 1.8; }
  .pizza-steam path { stroke-width: 2.1; }
  .pizza-steam { transition-duration: .4s; }
  .is-steaming .pizza-steam { transition-duration: .12s; }
}

@media (prefers-reduced-motion: reduce) {
  .pizza-cards article, .side-grid article, .menu-reviews blockquote { transition: none; }
  .pizza-steam { display: none; transition: none; }
  .steam-wisp { animation: none; }
}