:root {
  --verde: #215C40;
  --rosa: #EAA6CA;
  --rosa-claro: #F1BCD5;
  --amarillo: #F2E6B2;
  --gutter: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
}
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/nunito-latin.woff2) format('woff2'); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 17px; line-height: 1.55;
  color: var(--verde); background: var(--amarillo); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
.wrap { max-width: 1080px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter-r); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; background: var(--verde); color: var(--amarillo); padding: 8px 14px; border-radius: 8px; z-index: 50; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; border-radius: 4px; }

/* cabecera */
.top { position: sticky; top: 0; z-index: 20; background: var(--amarillo); border-bottom: 2px solid var(--verde); padding-top: env(safe-area-inset-top, 0px); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.top .marca img { width: 132px; }
.top nav { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.top nav a { text-decoration: none; font-weight: 800; font-size: 15px; padding: 8px 10px; border-radius: 999px; }
.top nav a:hover { background: var(--verde); color: var(--amarillo); }
@media (max-width: 520px) { .top nav a.opc { display: none; } .top .marca img { width: 112px; } }

/* secciones monocromaticas: una tinta sobre un fondo */
.s { padding: 72px 0; }
.s-amarillo { background: var(--amarillo); color: var(--verde); }
.s-rosa { background: var(--rosa-claro); color: var(--verde); }
.s-verde { background: var(--verde); color: var(--rosa-claro); }
.s-verde h2, .s-verde .grande { color: var(--rosa); }
h1, h2, h3 { line-height: 1.12; margin: 0; font-weight: 800; letter-spacing: -.01em; }
h2 { font-size: clamp(30px, 5vw, 46px); }
h3 { font-size: 21px; }
.ante { font-size: 13px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 12px; }
.lead { font-size: clamp(18px, 2.4vw, 21px); max-width: 38em; }

/* hero */
.hero { padding: 56px 0 64px; }
.hero .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.h1-logo { margin: 0 0 18px; }
.hero .logo { width: min(460px, 100%); }
.tagline { font-size: clamp(28px, 4.4vw, 44px); font-weight: 800; line-height: 1.1; letter-spacing: -.01em; margin: 0 0 16px; }
.dato { margin: 22px 0 0; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.hero .ilus { width: min(440px, 100%); justify-self: center; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.btn { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 800; font-size: 16px; text-decoration: none;
  padding: 13px 22px; border-radius: 999px; border: 2px solid currentColor; }
.btn.lleno { background: var(--verde); color: var(--amarillo); border-color: var(--verde); }
.btn:hover { transform: translateY(-1px); }
.s-verde .btn.lleno { background: var(--rosa); color: var(--verde); border-color: var(--rosa); }
@media (max-width: 800px) { .hero .wrap { grid-template-columns: 1fr; } .hero .ilus { width: min(320px, 80%); grid-row: 1; } }

/* proteina medida */
.cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 40px; }
.cifra { border-top: 2px solid var(--rosa); padding-top: 16px; }
.cifra .grande { font-size: clamp(40px, 6vw, 60px); font-weight: 800; line-height: 1; }
.cifra p { margin: 8px 0 0; }
@media (max-width: 760px) { .cifras { grid-template-columns: 1fr; } }
.medida { display: grid; grid-template-columns: 1fr 260px; gap: 40px; align-items: center; }
.medida .ilus { width: 240px; justify-self: center; }
@media (max-width: 760px) { .medida { grid-template-columns: 1fr; } .medida .ilus { width: 170px; grid-row: 1; } }

/* menu */
.menu-intro { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 18px; }
.cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 8px; }
.cats a { text-decoration: none; font-weight: 800; font-size: 15px; padding: 7px 14px; border: 2px solid var(--verde); border-radius: 999px; }
.cats a:hover { background: var(--verde); color: var(--rosa-claro); }
.cat { margin-top: 52px; scroll-margin-top: 84px; }
.cat-h { display: flex; align-items: center; gap: 18px; border-bottom: 2px solid var(--verde); padding-bottom: 12px; }
.cat-h img { width: 92px; height: 84px; object-fit: contain; flex: none; }
.cat-h p { margin: 4px 0 0; font-size: 15px; }
.cat-t { font-size: clamp(24px, 3.4vw, 30px); }
.precios { margin: 0; font-size: 15px; font-weight: 700; }
.byo { list-style: none; margin: 14px 0 0; padding: 16px 18px; border: 2px solid var(--verde); border-radius: 14px; display: grid; gap: 6px; font-size: 15.5px; }
.byo b { font-weight: 800; }
.items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
@media (max-width: 760px) { .items { grid-template-columns: 1fr; } .cat-h img { width: 70px; height: 64px; } }
.it { padding: 18px 0; border-bottom: 1px dashed rgba(33, 92, 64, .45); }
.it-h { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.it-h h3 { font-size: 19px; }
.precio { font-weight: 800; font-size: 19px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.it p { margin: 6px 0 0; font-size: 15.5px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tag { font-size: 12.5px; font-weight: 800; border: 1.5px solid var(--verde); border-radius: 999px; padding: 1px 9px; }
.tag.prot { background: var(--verde); color: var(--rosa-claro); }
.nota-menu { margin-top: 36px; font-size: 14.5px; max-width: 46em; }

/* salsas */
.salsas { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px 28px; margin: 34px 0 0; padding: 0; list-style: none; }
.salsas li { border-top: 2px solid var(--verde); padding-top: 10px; }
.salsas b { display: block; font-size: 18px; }
.salsas span { font-size: 15px; }
@media (max-width: 760px) { .salsas { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .salsas { grid-template-columns: 1fr; } }
.salsas-h { display: grid; grid-template-columns: 1fr 200px; gap: 30px; align-items: center; }
.salsas-h .ilus { width: 170px; justify-self: center; }
@media (max-width: 640px) { .salsas-h { grid-template-columns: 1fr; } .salsas-h .ilus { display: none; } }

/* visitanos */
.visita { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.visita dl { margin: 26px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 12px 22px; }
.visita dt { font-weight: 800; color: var(--rosa); }
.visita dd { margin: 0; }
.visita .ilus { width: min(300px, 100%); justify-self: center; align-self: center; }
@media (max-width: 760px) { .visita { grid-template-columns: 1fr; } .visita .ilus { width: 190px; } }

/* pie */
.pie { padding: 36px 0 calc(36px + env(safe-area-inset-bottom, 0px)); font-size: 14px; }
.pie .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: center; }
.pie img { width: 120px; }
.pie p { margin: 0; }

/* patron de ingredientes */
.franja { display: flex; justify-content: center; gap: clamp(18px, 5vw, 64px); padding: 30px 0; overflow: hidden; }
.franja img { height: 74px; width: auto; }
@media (max-width: 520px) { .franja img { height: 52px; } .franja img:nth-child(n+5) { display: none; } }