@font-face {font-family: Lady Display; src:url("assets/display.woff") format("woff"); font-display:swap; font-weight:800;}
@font-face {font-family: Lady Sans; src:url("assets/body.woff") format("woff"); font-display:swap; font-weight:400;}
@font-face {font-family: Lady Sans; src:url("assets/bold.woff") format("woff"); font-display:swap; font-weight:700;}

:root {
  --ink:#2b201e;
  --cream:#fff8eb;
  --paper:#fffdf6;
  --pink:#fa667d;
  --red:#be2444;
  --teal:#48c2c7;
  --yellow:#ffd15c;
  --muted:#584541;
  --display:"Lady Display","Arial Narrow",sans-serif;
  --body:"Lady Sans",Arial,sans-serif;
  --shell:1120px;
}
* {box-sizing:border-box;}
[hidden] {display:none !important;}
html {scroll-behavior:smooth; scroll-padding-top:80px;}
body {margin:0; color:var(--ink); background:var(--cream); font-family:var(--body); line-height:1.62;}
a {color:inherit;}
img {display:block; max-width:100%; height:auto;}
p, h1, h2, h3 {margin:0;}
svg {display:block; flex-shrink:0;}
.symbols {position:absolute; width:0; height:0; overflow:hidden; pointer-events:none;}
.shell {width:min(var(--shell),calc(100% - 96px)); margin-inline:auto;}
.skip-link {position:fixed; top:12px; left:12px; z-index:10; padding:10px 18px; border:2px solid; border-radius:8px; background:var(--yellow); transform:translateY(-160%);}
.skip-link:focus {transform:none;}
:focus-visible {outline:3px solid #07656c; outline-offset:4px;}
section[id], footer[id] {scroll-margin-top:24px;}

.site-header {background:var(--cream); border-bottom:2px solid var(--ink);}
.sticky-header {position:sticky; top:0; z-index:5;}
.sticky-header .header-inner {grid-template-columns:auto minmax(0,1fr) auto auto; gap:clamp(8px,1.5vw,18px); min-height:74px;}
.section-nav {justify-content:center; gap:clamp(10px,1.3vw,19px);}
.header-actions {display:flex; align-items:center; gap:8px;}
.header-actions .button {white-space:nowrap; gap:6px; padding-inline:9px;}
.header-actions .line-icon {width:16px; height:16px;}
.language-switch {display:inline-flex; align-items:center; justify-self:end; gap:3px; font-size:12px; font-weight:700; white-space:nowrap;}
.language-switch a {display:grid; place-items:center; min-width:33px; min-height:36px; padding:3px; border:1px solid transparent; border-radius:5px; text-decoration:none;}
.language-switch a[aria-current] {border-color:var(--ink); background:var(--yellow);}
.language-switch a:hover {text-decoration:underline;}
.header-inner.receipt-header {grid-template-columns:1fr auto;}
.header-inner {min-height:78px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:30px;}
.wordmark {display:inline-flex; align-items:center; gap:4px; width:fit-content; font:800 31px/.78 var(--display); text-decoration:none; letter-spacing:-.025em;}
.wordmark > svg {width:46px; height:46px;}
.wordmark small {display:block; margin:0 0 4px 1px; font:700 10px/1 var(--body); letter-spacing:.2em;}
.brand-dot {color:var(--red);}
nav {display:flex; gap:31px; align-items:center;}
nav a {font-weight:700; font-size:14px; text-decoration:none;}
nav a:hover {text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:5px;}
.button {display:inline-flex; justify-content:center; align-items:center; gap:13px; width:fit-content; min-height:52px; padding:10px 17px; border:2px solid var(--ink); border-radius:8px; background:var(--paper); box-shadow:3px 4px 0 var(--ink); color:var(--ink); font:700 14px/1.2 var(--body); text-decoration:none; cursor:pointer; transition:transform .16s ease,box-shadow .16s ease,background .16s ease;}
.button:hover {transform:translate(-1px,-2px); box-shadow:4px 6px 0 var(--ink);}
.button:active {transform:translate(2px,3px); box-shadow:1px 1px 0 var(--ink);}
.button svg, .text-link svg {width:19px; height:19px;}
.button-small {min-height:42px; padding:8px 13px; font-size:13px;}
.header-inner > .button {justify-self:end;}
.button-pink {background:var(--pink);}
.button-yellow {background:var(--yellow);}
.text-link {display:inline-flex; align-items:center; gap:5px; width:fit-content; font-size:14px; font-weight:700; text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:4px;}
.text-link:hover {text-decoration-thickness:3px;}

.hero {padding:42px 0 46px;}
.hero-grid {display:grid; grid-template-columns:1.3fr 1fr; gap:42px; align-items:center;}
.eyebrow, .section-kicker {display:flex; gap:9px; align-items:center; font-size:11px; font-weight:700; line-height:1.35; letter-spacing:.15em;}
.hero-eyebrow > span:first-child {width:9px; height:9px; flex-shrink:0; border:1.5px solid var(--ink); border-radius:50%; background:var(--pink);}
.divider {color:var(--red);}
h1, h2, h3 {font-family:var(--display); font-weight:800;}
.hero h1 {margin:17px 0 18px; font-size:clamp(43px,6.25vw,86px); line-height:.87; letter-spacing:-.05em; text-transform:uppercase;}
.hero h1 > * {display:block;}
h1 em {color:var(--red); font-style:normal;}
.hero-copy > p {max-width:410px; color:var(--muted); font-size:18px; line-height:1.55;}
.hero-actions {display:flex; align-items:center; gap:24px; margin-top:25px;}

.hero-art {min-width:0; padding:3px 15px 15px 0;}
.hero-photo {position:relative; border:2px solid var(--ink); border-radius:20px; background:var(--teal); box-shadow:5px 6px 0 var(--ink);}
.hero-photo > img {width:100%; border-radius:18px;}

.flavor-bar {border-block:2px solid var(--ink); background:var(--yellow);}
.flavor-inner {min-height:53px; display:flex; justify-content:space-evenly; align-items:center; gap:15px; font:800 19px/1.25 var(--display); letter-spacing:.11em; text-align:center;}
.flavor-inner b {color:var(--red); font:700 17px/1 var(--body);}

.section-pad {padding-block:71px 77px;}
.section-kicker {margin-bottom:13px;}
.section-kicker > span {display:inline-grid; place-items:center; width:28px; height:24px; border:1.5px solid var(--ink); border-radius:5px; background:var(--yellow); color:var(--ink); letter-spacing:0;}
h2, .confirmation-title {margin:0; font-size:clamp(56px,7.1vw,91px); line-height:.84; letter-spacing:-.039em;}
h2 > span, .confirmation-title > span {color:var(--red);}
.section-heading {display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:28px;}
.section-heading p {padding-bottom:3px; color:var(--muted); font-size:16px;}

.menu {background:var(--paper);}
.menu-cups {background:var(--cream); border-top:2px solid var(--ink);}
.menu-grid {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:23px;}
.menu-card {overflow:hidden; border:2px solid var(--ink); border-radius:14px; background:var(--paper); box-shadow:4px 5px 0 var(--ink);}
.menu-art {position:relative; aspect-ratio:3/2; border-bottom:2px solid var(--ink); overflow:hidden;}
.menu-art img {width:100%; height:100%; object-fit:cover;}
.food-tag {position:absolute; top:11px; left:11px; padding:5px 7px; border:1.5px solid var(--ink); border-radius:5px; background:var(--card-color); font-size:9px; line-height:1.25; font-weight:700; letter-spacing:.06em;}
.new-green {--card-color:#b4df80;}
.hot, .new-pink {--card-color:var(--pink);}
.original {--card-color:var(--teal);}
.simple, .new-yellow {--card-color:var(--yellow);}
.menu-copy {min-height:128px; padding:18px 17px 20px;}
.menu-copy h3 {margin-bottom:6px; font-size:clamp(25px,3.05vw,38px); line-height:1; letter-spacing:-.028em;}
.menu-copy p {color:var(--muted); font-size:14px; line-height:1.52;}
.menu-copy .alias {margin:0 0 7px; color:#78253a; font-size:12px; font-weight:700;}

.catering {border-block:2px solid var(--ink); background:#ffdbe0;}
.catering-grid {display:grid; grid-template-columns:1.2fr 1fr; align-items:center; gap:55px;}
.catering h2 + p, .booking h2 + p, .confirmation-title + p, .contact h2 + p {margin:21px 0 22px; max-width:430px; font-size:16px;}
.occasion-card {padding:20px; border:2px solid var(--ink); border-radius:15px; background:var(--pink); box-shadow:5px 6px 0 var(--ink);}
.occasion-header {display:flex; align-items:center; justify-content:space-between; gap:13px; margin:0 2px 16px; font:800 27px/1 var(--display);}
.occasion-header svg {width:28px; height:28px; color:var(--yellow);}
.occasion-card ul {display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:0; padding:0; list-style:none;}
.occasion-card li {display:flex; gap:9px; flex-direction:column; justify-content:center; min-height:91px; padding:11px; border:1.5px solid var(--ink); border-radius:8px; background:var(--cream); font-size:13px; font-weight:700; line-height:1.3;}
.line-icon {width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}

.booking {background:var(--cream);}
.booking-grid {display:grid; grid-template-columns:1fr 1.27fr; align-items:start; gap:50px;}
.booking-copy {padding-top:13px;}
.booking-direct {display:grid; gap:10px; justify-items:start;}
.booking-card {padding:23px; border:2px solid var(--ink); border-radius:14px; background:var(--paper); box-shadow:5px 6px 0 var(--ink);}
.form-grid {display:grid; grid-template-columns:1fr 1fr; gap:13px;}
.booking-card label {display:block; min-width:0; margin-bottom:12px; font-weight:700; font-size:13px;}
.optional {color:var(--muted); font-size:11px; font-weight:400;}
.booking-card input, .booking-card textarea {display:block; width:100%; min-width:0; min-height:43px; margin-top:4px; padding:9px; border:1.5px solid var(--ink); border-radius:6px; background:var(--cream); color:var(--ink); font:400 14px/1.4 var(--body);}
.booking-card textarea {resize:vertical;}
.form-footer {display:flex; align-items:center; flex-wrap:wrap; gap:13px;}
.form-footer p {max-width:270px; color:var(--muted); font-size:12px;}

.proof {border-top:2px solid var(--ink); background:var(--paper);}
.gallery-grid, .faq-grid {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:27px;}
.placeholder-card {display:grid; place-items:center; min-height:130px; padding:16px; border:1.5px dashed #aa8f79; border-radius:10px; background:var(--cream); color:var(--muted); text-align:center;}
.reviews {margin-top:26px;}
.reviews h3 {margin-bottom:10px; font-size:30px; line-height:1;}
.reviews .placeholder-card {min-height:64px;}
.faq {border-top:2px solid var(--ink); background:#ffdbe0;}
.faq-grid details {align-self:start; border:1.5px solid var(--ink); border-radius:8px; background:var(--paper);}
.faq-grid summary {padding:12px 15px; font-size:15px; font-weight:700; cursor:pointer;}
.faq-grid details[open] summary {border-bottom:1px solid #ddcfc1;}
.faq-grid details p {padding:10px 15px 12px; color:var(--muted); font-size:14px;}
.contact {padding-top:56px; border-top:2px solid var(--ink); background:var(--teal);}
.service-note {margin-top:12px; font-size:14px; font-weight:700;}
.contact-grid {display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:45px; padding-bottom:46px;}
.contact h2 > span {color:#9d1732;}
.contact h2 + p {margin-bottom:0;}
.contact-links {display:grid; gap:8px; font-style:normal;}
.contact-links a {display:grid; grid-template-columns:auto 1fr auto; gap:13px; align-items:center; padding:9px 12px; border:1.5px solid var(--ink); border-radius:8px; background:var(--paper); color:var(--ink); font-size:15px; font-weight:700; text-decoration:none;}
.contact-links a:hover {background:var(--yellow);}
.contact-links a small {display:block; font-size:9px; letter-spacing:.1em;}
.contact-links a > svg:last-child {width:18px; height:18px;}
.footer-bottom {min-height:69px; display:flex; justify-content:space-between; align-items:center; gap:12px; border-top:1.5px solid var(--ink); font-size:12px;}
.footer-brand {display:flex; align-items:center; gap:3px; font:800 22px/1 var(--display); text-decoration:none;}
.footer-brand svg {width:33px; height:33px;}

@media (max-width:1080px) {
  .shell {width:calc(100% - 64px);}
  .hero-grid {gap:34px;}
  html {scroll-padding-top:115px;}
  .sticky-header .header-inner {grid-template-columns:auto 1fr auto; grid-template-areas:"brand actions languages" "nav nav nav"; gap:4px 12px; padding-top:6px;}
  .sticky-header .wordmark {grid-area:brand;}
  .sticky-header .section-nav {grid-area:nav; gap:clamp(15px,3vw,30px); padding:4px 0 7px; border-top:1px solid #ddcfc1;}
  .sticky-header .header-actions {grid-area:actions; justify-content:flex-end;}
  .sticky-header .language-switch {grid-area:languages;}
  .hero-eyebrow {letter-spacing:.09em;}
  .hero-actions {gap:19px;}
}
@media (max-width:790px) {
  .shell {width:calc(100% - 48px);}
  .header-inner {gap:17px; min-height:68px;}
  nav {gap:15px;}
  .hero {padding-block:43px;}
  .hero-grid {gap:22px;}
  .hero-copy > p {font-size:16px;}
  .hero-actions {align-items:start; flex-direction:column; gap:13px; margin-top:19px;}
  .section-pad {padding-block:53px 59px;}
  .menu-grid {gap:13px;}
  .menu-copy {padding:12px 11px;}
  .menu-copy p {font-size:13px;}
  .food-tag {top:7px; left:7px; font-size:8px;}
  .catering-grid, .booking-grid {gap:24px;}
  .occasion-card, .booking-card {padding:15px;}
  .occasion-header {font-size:21px;}
  .contact-grid {gap:25px;}
}
@media (min-width:621px) {
  html[lang="es"] .hero h1 {font-size:clamp(36px,5.45vw,75px);}
}
@media (max-width:620px) {
  .shell {width:calc(100% - 38px);}
  .header-inner {grid-template-columns:1fr 1fr; gap:0 10px; padding-top:8px;}
  .wordmark {font-size:26px;}
  .wordmark > svg {width:38px; height:38px;}
  .wordmark small {font-size:8px;}
  .header-inner > .button {grid-column:2; grid-row:1; min-height:38px; padding:7px 9px; font-size:12px;}
  nav {grid-column:1 / -1; justify-content:center; gap:0; margin-top:6px; border-top:1px solid #d7c7b4;}
  nav a {flex:1; padding:9px 4px; text-align:center; font-size:13px;}
  .hero {padding:31px 0 36px;}
  html {scroll-padding-top:145px;}
  .sticky-header .header-inner {grid-template-columns:1fr auto; grid-template-areas:"brand languages" "actions actions" "nav nav"; gap:5px 7px; padding-top:5px;}
  .sticky-header .section-nav {gap:0; margin:0; padding:0;}
  .sticky-header .header-actions {justify-content:space-between; gap:6px;}
  .sticky-header .header-actions .button {width:100%; min-height:36px; padding:4px 5px; gap:4px; font-size:clamp(10px,2.8vw,13px);}
  .hero-grid {grid-template-columns:minmax(0,1fr); gap:21px;}
  .hero-eyebrow {font-size:10px; letter-spacing:.095em; gap:7px;}
  .hero h1 {margin:11px 0 12px; font-size:clamp(35px,10.5vw,65px);}
  .hero-actions {flex-direction:row; align-items:center; gap:15px; margin-top:8px; flex-wrap:wrap;}
  .hero-actions .button {min-height:44px; padding:9px 10px; font-size:12px;}
  .hero-actions .text-link {font-size:12px;}
  .hero-art {padding:0 11px 13px 0;}
  .flavor-inner {min-height:46px; gap:7px; font-size:13px; letter-spacing:.05em;}
  .flavor-inner b {font-size:11px;}
  .section-pad {padding-block:44px 49px;}
  .section-heading {display:block; margin-bottom:20px;}
  .section-heading p {margin-top:12px;}
  .menu-grid {grid-template-columns:1fr; gap:18px;}
  .menu-copy {min-height:0; padding:15px 14px 18px;}
  .menu-copy h3 {font-size:32px;}
  .menu-copy p {font-size:14px;}
  .food-tag {top:9px; left:9px; font-size:9px;}
  .catering-grid, .booking-grid, .contact-grid, .gallery-grid, .faq-grid {grid-template-columns:1fr;}
  .gallery-grid, .faq-grid {gap:10px; margin-top:21px;}
  .catering h2 + p, .booking h2 + p, .confirmation-title + p, .contact h2 + p {margin-top:15px;}
  .booking-copy {padding-top:0;}
  .contact {padding-top:43px;}
  .contact-grid {padding-bottom:32px;}
  .footer-bottom {flex-wrap:wrap; gap:8px 12px; padding-block:12px;}
  .footer-bottom .text-link {font-size:12px;}
}
@media (max-width:360px) {
  .shell {width:calc(100% - 30px);}
  .hero-eyebrow {letter-spacing:.05em;}
  .header-actions .line-icon {display:none;}
  .form-grid {grid-template-columns:1fr; gap:0;}
}
@media (prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto;}
  *, *::before, *::after {transition:none !important;}
}

.about-photo img {width:100%; aspect-ratio:1; object-fit:cover; object-position:center bottom;}
.about {background:var(--cream); border-top:2px solid var(--ink);}
.about-grid {display:grid; grid-template-columns:1fr minmax(0,420px); gap:38px; align-items:center;}
.about p {margin-top:16px; max-width:520px;}
.about-photo img {border:2px solid var(--ink); border-radius:16px; box-shadow:5px 6px 0 var(--ink);}
.sticky-header .section-nav {flex-wrap:wrap;}
@media (min-width:1081px) {
  .sticky-header .header-inner {grid-template-columns:auto 1fr auto; grid-template-areas:"brand actions languages" "nav nav nav"; padding-top:7px; gap:4px 14px;}
  .sticky-header .wordmark {grid-area:brand;}
  .sticky-header .section-nav {grid-area:nav; padding-bottom:8px;}
  .sticky-header .header-actions {grid-area:actions; justify-content:flex-end;}
  .sticky-header .language-switch {grid-area:languages;}
}
@media (max-width:620px) {
  html {scroll-padding-top:180px;}
  .about-grid {grid-template-columns:1fr; gap:20px;}
  .sticky-header .section-nav a {flex:0 0 auto; padding:6px 7px;}
}

.hero-illustration {width:min(100%,340px); margin-inline:auto;}