/* =====================================================================
   El Rinconcito San Nicolás — estilos
   ===================================================================== */
:root {
  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ink: #3E2A20;
  --ink-2: #5E4D43;
  --muted: #9A8C81;
  --line: #EDE5DA;
  --pill: #F4EEE6;
  --white: #FFFFFF;
  --yellow: #FFF3A0;
  --sand: #EFE2CF;
  --mint: #A8E3D2;
  --sun: #FBE36A;
  --orange: #FFA36C;
  --red: #F2553C;
  --blue: #2F86E8;
  --green: #3FB37F;
  /* Paleta (cambiar acá) */
  --bg-mid: #F6EFE4; --bg-end: #E9DAC3;
  --c1: #DCCB9E; --c2: #EFE3CF; --c3: #C98F6E;
  --open: #DCE5CC; --closed: #EBD2C2;
  --t1: #E8DDCD; --t2: #F2ECE2; --t3: #E7D2C2; --t4: #D9DFC9; --t5: #EEE1BE; --t6: #DED5C9; --t7: #E9CDB6;
  --radius: 24px;
  --shadow: 0 1px 2px rgba(20, 20, 40, .04), 0 6px 18px rgba(20, 20, 40, .05);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --pad: 20px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -.01em;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  overflow-x: hidden;
}
.bg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, var(--bg-end) 0%, var(--bg-mid) 18%, #FFFFFF 38%, #FFFFFF 58%, var(--bg-mid) 80%, var(--bg-end) 100%);
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 12px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Layout ---------- */
.app {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 0 0 calc(120px + var(--safe-b));
  min-height: 100dvh;
}
.view { animation: viewIn .38s var(--ease) both; }
.view.back { animation-name: viewInBack; }
@keyframes viewIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes viewInBack { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .view, .view.back { animation: none; }
  * { scroll-behavior: auto !important; }
}

.pad { padding-left: var(--pad); padding-right: var(--pad); }

/* ---------- Header ---------- */
.header {
  display: grid; grid-template-columns: 52px 1fr 52px; align-items: center;
  gap: 8px; padding: calc(14px + env(safe-area-inset-top, 0px)) var(--pad) 12px;
  position: sticky; top: 0; z-index: 20;
}
.header.scrolled { background: rgba(255, 255, 255, .85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.header h1 {
  margin: 0; text-align: center; font-family: var(--serif); font-weight: 400;
  font-size: 30px; letter-spacing: -.01em; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand { display: flex; align-items: center; gap: 10px; grid-column: 1 / 3; }
:root { --logo-brown: #4A2B20; --logo-gold: #A8994F; }
.brand-lockup { display: inline-flex; flex-direction: column; align-items: flex-start; padding-left: 2px; }
.brand-name { font-family: "Cinzel", "Trajan Pro", Georgia, serif; font-weight: 500; font-size: 21px; letter-spacing: .05em; text-transform: uppercase; color: var(--logo-brown); line-height: 1; }
.brand-script { font-family: "Allura", "Snell Roundhand", cursive; font-size: 25px; color: var(--logo-gold); line-height: .8; margin: -1px 0 0 58px; letter-spacing: 0; }
.sello-wrap { display: flex; justify-content: center; margin: 4px 0 14px; }
.sello-arc { font-family: "Cinzel", Georgia, serif; font-size: 11px; letter-spacing: .32em; fill: var(--logo-gold); }
.sello-name { font-family: "Cinzel", Georgia, serif; font-weight: 500; font-size: 19.5px; letter-spacing: .04em; fill: var(--logo-brown); }
.sello-script { font-family: "Allura", cursive; font-size: 30px; fill: var(--logo-gold); }

.icon-btn {
  width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.92);
  display: grid; place-items: center; position: relative; flex: none; color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(62,42,32,.08), 0 1px 2px rgba(62,42,32,.06), 0 6px 16px rgba(62,42,32,.07);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: transform .2s var(--ease), background .2s, box-shadow .2s;
}
@media (hover: hover) { .icon-btn:hover { box-shadow: inset 0 0 0 1px rgba(62,42,32,.14), 0 2px 4px rgba(62,42,32,.08), 0 10px 22px rgba(62,42,32,.10); } }
.icon-btn:active { transform: scale(.92); }
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn.sm { width: 40px; height: 40px; }
.icon-btn.sm svg { width: 18px; height: 18px; }
.icon-btn.dark { background: var(--ink); color: #fff; }
.icon-btn[disabled] { opacity: .35; pointer-events: none; }
.badge {
  position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 700;
  display: grid; place-items: center; border: 2px solid #fff;
}
.badge.pop { animation: pop .4s var(--ease); }
@keyframes pop { 40% { transform: scale(1.35); } }

svg.i { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Search ---------- */
.search { display: flex; gap: 8px; margin: 8px var(--pad) 22px; }
.search label { flex: 1; position: relative; }
.search input {
  width: 100%; height: 52px; border: 0; border-radius: 26px; background: var(--pill);
  padding: 0 44px 0 22px; font-size: 15px; outline: none; transition: background .2s, box-shadow .2s;
}
.search input::placeholder { color: var(--muted); }
.search input:focus { background: #fff; box-shadow: 0 0 0 1.5px var(--ink) inset; }
.search .clear { position: absolute; right: 8px; top: 8px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); }
.search .clear svg { width: 18px; height: 18px; }

/* ---------- Tabs ---------- */
.tabs {
  display: flex; gap: 18px; overflow-x: auto; scrollbar-width: none;
  padding: 0 var(--pad) 4px; scroll-snap-type: x proximity; scroll-padding-inline: var(--pad); -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  font-family: var(--serif); font-size: 30px; line-height: 1.1; color: #BBAEA3; white-space: nowrap;
  scroll-snap-align: start; transition: color .2s; padding: 2px 0;
}
.tab sup { font-family: var(--serif); font-size: 15px; margin-left: 2px; vertical-align: 13px; letter-spacing: 0; }
.tab.active { color: var(--ink); }

.section-head { display: flex; align-items: baseline; justify-content: space-between; margin: 34px var(--pad) 14px; gap: 12px; }
.section-head h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1; letter-spacing: -.01em; }
.link { font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.link svg { width: 16px; height: 16px; }

/* ---------- Carousel ---------- */
.carousel-wrap { margin: 14px 10px 0; background: rgba(242, 242, 244, .65); border-radius: 28px; padding: 8px 0 14px; }
.carousel {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 0 10px; scroll-padding: 10px;
}
.carousel::-webkit-scrollbar { display: none; }
.card { flex: 0 0 62%; max-width: 230px; scroll-snap-align: start; position: relative; display: block; }
.card .photo { aspect-ratio: 7 / 10; }
.card h3 { margin: 10px 2px 2px; font-size: 16px; font-weight: 500; letter-spacing: -.02em; }
.card .card-price { display: block; margin: 3px 2px 4px; font-size: 21px; }
.card p { margin: 0 2px; font-size: 12px; line-height: 1.35; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .add { position: absolute; top: 10px; left: 10px; z-index: 2; }

.photo {
  position: relative; display: block; border-radius: var(--radius); overflow: hidden; background: #EEE;
  isolation: isolate;
}
.photo img, .photo svg.ilu { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo img { position: absolute; inset: 0; }

.round-add {
  width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.94); color: var(--ink);
  display: grid; place-items: center; box-shadow: 0 2px 8px rgba(30,20,10,.18);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: transform .2s var(--ease), background .2s, color .2s;
}
.round-add svg { width: 18px; height: 18px; }
.round-add:active { transform: scale(.88); background: var(--ink); color: #fff; }

.agotado .photo > :not(.flag) { filter: grayscale(.8); opacity: .55; }
.agotado h3, .agotado p, .agotado .price { opacity: .5; }
.flag {
  position: absolute; z-index: 3; top: 12px; right: 12px; background: var(--ink); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 6px 10px; border-radius: 20px;
}

/* ---------- Recomienda la casa (stack) ---------- */
.stack {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 26px var(--pad) 40px; margin-top: -6px;
}
.stack::-webkit-scrollbar { display: none; }
.deal {
  flex: 0 0 196px; height: 260px; border-radius: 26px; position: relative; overflow: hidden;
  scroll-snap-align: center; padding: 18px 16px; margin-right: -18px; transform-origin: 50% 100%;
  box-shadow: -6px 0 22px rgba(30, 20, 40, .12); transition: transform .35s var(--ease);
  display: block;
}
.deal:nth-child(3n+1) { background: var(--c1); transform: rotate(-7deg) translateY(10px); }
.deal:nth-child(3n+2) { background: var(--c2); transform: rotate(-1deg); }
.deal:nth-child(3n+3) { background: var(--c3); transform: rotate(6deg) translateY(8px); }
.deal:last-child { margin-right: 0; }
.deal:hover, .deal:focus-visible { transform: rotate(0) translateY(-6px); z-index: 5; }
.deal h3 {
  margin: 0; font-family: var(--sans); font-weight: 700; font-size: 52px; line-height: .86;
  letter-spacing: -.05em; position: relative; z-index: 2; word-break: normal; overflow-wrap: normal; hyphens: none;
}
.deal p { margin: 10px 0 0; font-size: 11.5px; line-height: 1.25; font-weight: 500; max-width: 92%; position: relative; z-index: 2; }
.deal .deal-price { position: absolute; z-index: 3; left: 16px; bottom: 16px; font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1; background: #fff; padding: 4px 10px; border-radius: 14px; }
.deal .cut {
  position: absolute; right: -40px; bottom: -40px; width: 170px; height: 170px; border-radius: 50%; overflow: hidden;
}
.deal .cut svg, .deal .cut img { width: 100%; height: 100%; object-fit: cover; }
.deal .deal-img { position: absolute; z-index: 1; right: -14px; bottom: -14px; width: 84%; max-height: 62%; object-fit: contain; object-position: right bottom;
  filter: drop-shadow(0 14px 18px rgba(40,25,15,.28)); transition: transform .4s var(--ease); }
.deal:hover .deal-img { transform: scale(1.04) rotate(-2deg); }

/* ---------- Tab bar ---------- */
.tabbar {
  position: fixed; left: 50%; bottom: calc(14px + var(--safe-b)); transform: translateX(-50%);
  width: min(460px, calc(100% - 24px)); display: flex; justify-content: space-between; align-items: center;
  z-index: 40; pointer-events: none;
}
.tabbar .grp { display: contents; }
.tabbar { justify-content: center; }
.tabbar-inner { pointer-events: auto; display: flex; gap: 4px; padding: 6px; border-radius: 34px;
  background: rgba(255,255,255,.88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px rgba(62,42,32,.08), 0 10px 30px rgba(62,42,32,.16); }
.tabbar .icon-btn { width: auto; min-width: 52px; height: 52px; border-radius: 26px; padding: 0 15px; background: transparent; box-shadow: none; backdrop-filter: none; display: flex; gap: 8px; align-items: center; justify-content: center; }
.tabbar .icon-btn .tlabel { display: none; font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.tabbar .icon-btn.active .tlabel { display: inline; }
.tabbar .icon-btn .badge { top: 4px; right: 6px; }
.tabbar .icon-btn.active { background: var(--ink); color: #fff; padding: 0 20px 0 16px; }
.tabbar .icon-btn.active svg.i .f { fill: currentColor; }
.tabbar.hidden { display: none; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(86px + var(--safe-b)); transform: translate(-50%, 20px);
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 30px; font-size: 14px; font-weight: 500;
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .3s var(--ease); z-index: 70; white-space: nowrap;
  display: flex; gap: 10px; align-items: center; max-width: calc(100% - 40px);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast a { text-decoration: none; font-weight: 700; color: var(--gold-soft); }
body.has-cta .toast { bottom: calc(96px + var(--safe-b)); }

/* ---------- Category list ---------- */
.cat-intro { margin: 2px var(--pad) 14px; color: var(--muted); font-size: 14px; }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px var(--pad) 6px; scroll-padding-inline: var(--pad); }
.chips::-webkit-scrollbar { display: none; }
.chips.wrap { flex-wrap: wrap; overflow: visible; }
.chip {
  flex: none; height: 38px; padding: 0 16px; border-radius: 19px; background: var(--white);
  font-size: 13.5px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px;
  box-shadow: inset 0 0 0 1px var(--line); transition: background .2s, color .2s, box-shadow .2s, transform .15s;
  white-space: nowrap;
}
.chip:active { transform: scale(.96); }
.chip.on { background: var(--ink); color: #fff; box-shadow: none; }
.chip svg { width: 16px; height: 16px; }
.chip .extra { font-size: 12px; color: var(--muted); font-weight: 600; }
.chip.on .extra { color: #D8C9BC; }
.chip.static { height: 30px; font-size: 12px; padding: 0 12px; background: var(--pill); box-shadow: none; cursor: default; }
.chip.static.adult { background: var(--ink); color: #fff; }

.list { display: grid; gap: 10px; padding: 16px 10px 0; }
.row {
  display: grid; grid-template-columns: 104px 1fr; gap: 14px; padding: 10px; border-radius: 28px;
  background: rgba(255, 255, 255, .85); box-shadow: var(--shadow); position: relative; align-items: stretch;
}
.row .photo { aspect-ratio: 4 / 5; border-radius: 20px; }
.row .flag { top: 8px; right: auto; left: 8px; font-size: 9.5px; padding: 4px 8px; }
.row-body { display: flex; flex-direction: column; min-width: 0; padding: 4px 4px 2px 0; }
.row h3 { margin: 0; font-size: 16px; font-weight: 500; letter-spacing: -.02em; line-height: 1.2; }
.row p { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.row .mini-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.row .mini-tags span { font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 10px; background: var(--pill); }
.row .mini-tags span.adult { background: var(--ink); color: #fff; }
.row-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 10px; gap: 8px; }
.price { font-family: var(--serif); font-weight: 400; font-style: normal; letter-spacing: 0; line-height: 1; }
.row .price { font-size: 24px; }
.row-link { position: absolute; inset: 0; border-radius: 28px; z-index: 0; }
.row .photo, .row-body { pointer-events: none; }
.row .stepper, .row .opts-hint { position: relative; z-index: 1; pointer-events: auto; }
.opts-hint { font-size: 11px; color: var(--muted); }

.stepper { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 22px; background: var(--pill); }
.stepper .icon-btn { width: 32px; height: 32px; background: #fff; box-shadow: 0 1px 3px rgba(62,42,32,.12); backdrop-filter: none; }
.stepper .icon-btn[disabled] { opacity: 1; background: transparent; box-shadow: none; color: #C9BBAE; }
.stepper .icon-btn svg { width: 16px; height: 16px; }
.stepper .n { min-width: 24px; text-align: center; font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }
.stepper .n.zero { color: var(--muted); }

/* ---------- Empty states ---------- */
.empty { text-align: center; padding: 48px 28px 24px; }
.empty .art { width: 132px; height: 132px; margin: 0 auto 18px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: var(--shadow); }
.empty .art svg { width: 56px; height: 56px; }
.empty h2 { margin: 0 0 8px; font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1; }
.empty p { margin: 0 auto 22px; color: var(--muted); max-width: 300px; font-size: 14px; line-height: 1.45; }
.empty.big h2 { font-size: 56px; }

/* ---------- Detail ---------- */
.detail-photo { margin: 6px 10px 0; position: relative; }
.detail-photo .photo { aspect-ratio: 1 / 1.03; border-radius: 30px; }
.fav-btn { position: absolute; z-index: 4; top: 14px; right: 14px; }
.fav-btn.on { color: #E5484D; }
.fav-btn.on svg { fill: currentColor; }
.fav-btn.beat { animation: pop .45s var(--ease); }
.detail { padding: 22px var(--pad) 0; }
.detail h2 { margin: 0; font-size: 32px; line-height: 1.05; font-weight: 500; letter-spacing: -.03em; }
.detail .desc { margin: 10px 0 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.45; }
.detail .big-price { font-size: 54px; margin: 18px 0 4px; display: flex; align-items: baseline; gap: 10px; }
.detail .big-price small { font-size: 13px; font-style: normal; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.detail .chips { padding: 0; margin-top: 10px; flex-wrap: wrap; }
.field-label { margin: 24px 0 10px; font-size: 14.5px; font-weight: 500; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.req { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 10px; background: var(--pill); color: var(--ink-2); }
.req.ok { background: #DDF3E7; color: #1D7A4A; }
.req.missing { background: #FFE6DC; color: #B4401F; }

.qty { display: inline-flex; align-items: center; gap: 4px; padding: 5px; border-radius: 32px; background: var(--pill); }
.qty .icon-btn { width: 46px; height: 46px; background: #fff; box-shadow: 0 1px 3px rgba(62,42,32,.12); backdrop-filter: none; }
.qty .n { min-width: 44px; height: 46px; display: grid; place-items: center; font-family: var(--serif); font-size: 26px; font-variant-numeric: tabular-nums; }

.accordion { margin-top: 24px; border-radius: 22px; background: rgba(255, 255, 255, .9); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.accordion summary { list-style: none; padding: 16px 18px; display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 14.5px; cursor: pointer; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary svg { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.accordion[open] summary svg { transform: rotate(180deg); }
.accordion .acc-body { padding: 0 18px 18px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.accordion h4 { margin: 12px 0 6px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.accordion .pills { display: flex; flex-wrap: wrap; gap: 6px; }
.accordion .pills span { padding: 5px 10px; border-radius: 12px; background: var(--pill); font-size: 12.5px; font-weight: 500; }
.accordion .pills.warn span { background: #FFF0D9; color: #8A4B00; }
.accordion .pills.free span { background: #E3F5EA; color: #1D7A4A; }

.textarea {
  width: 100%; min-height: 92px; resize: vertical; border: 0; border-radius: 20px; background: var(--pill);
  padding: 14px 18px; font-size: 14.5px; line-height: 1.4; outline: none; transition: background .2s, box-shadow .2s;
}
.textarea:focus, .input:focus { background: #fff; box-shadow: 0 0 0 1.5px var(--ink) inset; }
.input {
  width: 100%; height: 52px; border: 0; border-radius: 26px; background: var(--pill);
  padding: 0 20px; font-size: 15px; outline: none; transition: background .2s, box-shadow .2s;
}
.input.invalid, .textarea.invalid { box-shadow: 0 0 0 1.5px #D9482B inset; background: #FFF6F3; }
.hint { font-size: 12.5px; color: var(--muted); margin: 8px 4px 0; line-height: 1.4; }
.hint.err { color: #C0391B; }

/* ---------- CTA fija ---------- */
.cta-bar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(14px + var(--safe-b)); z-index: 45;
  width: min(460px, calc(100% - 24px));
}
.cta {
  width: 100%; height: 60px; border-radius: 30px; background: var(--ink); color: #fff;
  display: flex; align-items: center; justify-content: space-between; padding: 0 22px 0 8px;
  font-size: 15px; font-weight: 500; transition: transform .2s var(--ease), opacity .2s, background .2s;
  box-shadow: 0 10px 30px rgba(14, 14, 16, .25);
}
.cta .arrow { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.14); flex: none; }
.cta .arrow svg { width: 22px; height: 22px; }
.cta:active { transform: scale(.98); }
.cta[disabled], .cta.disabled { background: #6E5C51; color: #CDBFB4; box-shadow: none; cursor: not-allowed; }
.cta .lbl { display: flex; gap: 10px; align-items: center; flex: 1; padding-left: 12px; text-align: left; }
.cta .amt { font-family: var(--serif); font-size: 24px; line-height: 1; padding-left: 14px; border-left: 1px solid rgba(255,255,255,.22); }
.cta.disabled .arrow, .cta[disabled] .arrow { background: rgba(255,255,255,.08); }
.cta .lbl b { font-family: var(--serif); font-weight: 400; font-size: 22px; letter-spacing: 0; }
.cta.wa { background: var(--ink); }
.cta.ghost { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-pill {
  display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 24px 0 10px; border-radius: 26px;
  background: var(--ink); color: #fff; font-weight: 500; font-size: 15px;
}
.btn-pill .arrow { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.14); }
.btn-pill svg { width: 20px; height: 20px; }
.btn-pill.light { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }

/* ---------- Pedido ---------- */
.cart-list { display: grid; gap: 10px; padding: 6px 10px 0; }
.cart-item { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 10px; border-radius: 24px; background: rgba(255, 255, 255, .9); box-shadow: var(--shadow); }
.cart-item .photo { aspect-ratio: 1; border-radius: 18px; }
.cart-item h3 { margin: 2px 0 2px; font-size: 16px; font-weight: 500; letter-spacing: -.02em; }
.cart-item .opts { font-size: 12px; color: var(--ink-2); line-height: 1.4; }
.cart-item .note { font-size: 12px; color: var(--muted); font-style: italic; margin-top: 2px; }
.cart-item .foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; gap: 8px; }
.cart-item .price { font-size: 22px; }
.cart-item .unit { font-size: 11px; color: var(--muted); }
.cart-item .head { display: flex; justify-content: space-between; gap: 8px; align-items: start; }
.cart-item .rm { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); flex: none; }
.cart-item .rm svg { width: 16px; height: 16px; }

.block { margin: 30px var(--pad) 0; }
.block > h3 { margin: 0 0 12px; font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.seg button {
  border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); padding: 14px 8px 12px;
  display: grid; justify-items: center; gap: 6px; font-size: 13px; font-weight: 600; transition: background .2s, color .2s, transform .15s;
}
.seg button svg { width: 24px; height: 24px; }
.seg button span { font-size: 11px; font-weight: 500; color: var(--muted); }
.seg button.on { background: var(--ink); color: #fff; box-shadow: none; }
.seg button.on span { color: #D8C9BC; }
.seg button[disabled] { opacity: .4; cursor: not-allowed; }
.seg button:active { transform: scale(.97); }
.stack-fields { display: grid; gap: 10px; margin-top: 12px; }

.totals { margin: 26px var(--pad) 0; padding: 18px; border-radius: 24px; background: rgba(255, 255, 255, .9); box-shadow: inset 0 0 0 1px var(--line); }
.totals .line { display: flex; justify-content: space-between; font-size: 14px; color: var(--ink-2); padding: 4px 0; }
.totals .line.total { color: var(--ink); font-size: 16px; font-weight: 600; padding-top: 12px; margin-top: 8px; border-top: 1px dashed #DEDEE3; align-items: baseline; }
.totals .line.total .price { font-size: 40px; }
.mesa-banner { margin: 0 var(--pad) 14px; padding: 12px 16px; border-radius: 20px; background: var(--ink); color: #fff; display: flex; gap: 10px; align-items: center; font-size: 14px; }
.mesa-banner svg { width: 20px; height: 20px; flex: none; }

/* ---------- El local ---------- */
.status-card { margin: 4px var(--pad) 0; border-radius: 28px; padding: 22px; position: relative; overflow: hidden; }
.status-card.open { background: var(--open); }
.status-card.closed { background: var(--closed); }
.status-card .dot { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.status-card .dot::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; animation: pulse 1.8s infinite; }
.status-card.open .dot { color: #13774A; }
.status-card.closed .dot { color: #B4401F; }
@keyframes pulse { 50% { opacity: .35; } }
.status-card h2 { margin: 12px 0 10px; font-family: var(--sans); font-weight: 700; font-size: 44px; line-height: .9; letter-spacing: -.05em; }
.status-card p { margin: 0; font-size: 14px; color: var(--ink-2); }
.hours { margin-top: 18px; display: grid; gap: 2px; }
.hours div { display: flex; justify-content: space-between; font-size: 14px; padding: 8px 0; border-bottom: 1px solid rgba(0, 0, 0, .07); }
.hours div:last-child { border-bottom: 0; }
.hours .today { font-weight: 700; }
.info-grid { display: grid; gap: 10px; margin: 12px var(--pad) 0; }
.info-card { display: flex; gap: 14px; align-items: center; padding: 14px 16px 14px 14px; border-radius: 24px; background: rgba(255, 255, 255, .92); box-shadow: var(--shadow); }
.info-card .ic { width: 48px; height: 48px; border-radius: 50%; background: var(--pill); display: grid; place-items: center; flex: none; }
.info-card .ic svg { width: 22px; height: 22px; }
.info-card b { display: block; font-size: 15px; font-weight: 600; }
.info-card span { font-size: 13px; color: var(--muted); }
.info-card .go { margin-left: auto; width: 20px; height: 20px; color: var(--muted); flex: none; }
.how { display: grid; gap: 10px; margin: 12px var(--pad) 0; }
.how-item { padding: 16px 18px; border-radius: 24px; }
.how-item:nth-child(1) { background: var(--c1); }
.how-item:nth-child(2) { background: var(--c2); }
.how-item:nth-child(3) { background: var(--c3); }
.how-item h4 { margin: 0 0 4px; font-size: 22px; font-weight: 700; letter-spacing: -.04em; }
.how-item p { margin: 0; font-size: 13.5px; line-height: 1.4; }
.pay-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Galería del local ---------- */
.gallery { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; padding: 14px var(--pad) 0; scroll-padding-inline: var(--pad); }
.gallery::-webkit-scrollbar { display: none; }
.gallery figure { margin: 0; flex: 0 0 78%; max-width: 420px; aspect-ratio: 4 / 3; scroll-snap-align: start; }
.gallery figcaption { position: absolute; left: 12px; bottom: 12px; background: #fff; padding: 6px 12px; border-radius: 14px; font-size: 12.5px; font-weight: 600; }

/* ---------- Favoritos grid ---------- */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 10px; padding: 6px 10px 0; }
.grid .card { flex: none; max-width: none; }

/* ---------- Skeleton ---------- */
.sk { background: linear-gradient(90deg, #EFE8DF 0%, #F8F4EE 40%, #EFE8DF 80%); background-size: 200% 100%; animation: shimmer 1.2s infinite linear; border-radius: 14px; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.sk-line { height: 12px; margin-top: 8px; }
.sk-card { flex: 0 0 62%; max-width: 230px; }
.sk-card .sk-photo { aspect-ratio: 7/10; border-radius: var(--radius); }
.photo.loading::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #EFEFF2 0%, #F8F8FA 40%, #EFEFF2 80%); background-size: 200% 100%; animation: shimmer 1.2s infinite linear; }

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 90; background: rgba(14, 14, 16, .42); display: grid; place-items: end center;
  animation: fade .2s both; padding: 12px;
}
.modal {
  width: min(460px, 100%); background: #fff; border-radius: 32px; padding: 26px 22px 18px; text-align: center;
  animation: up .35s var(--ease) both; margin-bottom: var(--safe-b);
  background: linear-gradient(180deg, var(--bg-mid) 0%, #FFFFFF 45%);
}
.modal .seal { width: 76px; height: 76px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; margin: 0 auto 14px; font-weight: 700; font-size: 24px; letter-spacing: -.04em; }
.modal h2 { margin: 0 0 8px; font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1; }
.modal p { margin: 0 0 20px; color: var(--ink-2); font-size: 14px; line-height: 1.45; }
.modal .actions { display: grid; gap: 8px; }
.modal .actions .cta { justify-content: center; }
@keyframes fade { from { opacity: 0; } }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }

.foot-note { text-align: center; color: var(--muted); font-size: 12px; margin: 34px var(--pad) 0; line-height: 1.5; }
.foot-note a { text-decoration: none; font-weight: 600; color: var(--ink-2); }

/* ---------- Responsive: tablet / desktop ---------- */
@media (min-width: 720px) {
  :root { --pad: 32px; }
  .app { max-width: 1120px; }
  .card { flex-basis: 240px; max-width: 240px; }
  .sk-card { flex-basis: 240px; }
  .carousel-wrap { margin: 14px var(--pad) 0; }
  .list { grid-template-columns: 1fr 1fr; padding: 18px var(--pad) 0; gap: 14px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); padding: 6px var(--pad) 0; gap: 22px 16px; }
  .cart-list { padding: 6px var(--pad) 0; }
  .deal { flex-basis: 250px; height: 320px; margin-right: -6px; }
  .deal h3 { font-size: 64px; }
  .tab { font-size: 36px; }
  .info-grid, .how { grid-template-columns: repeat(3, 1fr); }
  .detail-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; padding: 0 var(--pad); align-items: start; }
  .detail-wrap .detail-photo { margin: 6px 0 0; position: sticky; top: 96px; }
  .detail-wrap .detail { padding: 10px 0 0; }
  .pedido-wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 16px; align-items: start; }
  .pedido-wrap .cart-list { padding-right: 0; }
  .pedido-wrap .side .block:first-child { margin-top: 6px; }
}
@media (min-width: 1024px) {
  .list { grid-template-columns: 1fr 1fr 1fr; }
  .header h1 { font-size: 36px; }
}

/* =====================================================================
   Botones v3 — acabado premium con el dorado del logo
   ===================================================================== */
:root {
  --btn-grad: linear-gradient(180deg, #54392C 0%, #3A271D 100%);
  --btn-grad-press: linear-gradient(180deg, #46301F 0%, #2E1F17 100%);
  --btn-hi: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.18);
  --gold-soft: #D9C38A;
}
:focus-visible { outline: 2px solid var(--logo-gold); outline-offset: 3px; }
button, .icon-btn, .chip, .cta, .btn-pill, .round-add { -webkit-user-select: none; user-select: none; }

/* Botón principal */
.cta { height: 62px; padding: 0 8px 0 8px; background: var(--btn-grad); box-shadow: var(--btn-hi), 0 12px 28px rgba(62,42,32,.32), 0 2px 6px rgba(62,42,32,.18); }
.cta:active { transform: scale(.985); background: var(--btn-grad-press); }
.cta .arrow { width: 46px; height: 46px; background: var(--gold-soft); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); transition: transform .3s var(--ease); }
.cta:not(.disabled):active .arrow, .cta:hover .arrow { transform: translateX(3px); }
.cta .lbl { font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; padding-left: 14px; }
.cta .amt { border-left: 0; padding: 9px 16px; border-radius: 22px; background: rgba(255,255,255,.12); font-size: 23px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.cta.disabled, .cta[disabled] { background: linear-gradient(180deg, #8C7A6D 0%, #786659 100%); color: #EFE6DD; box-shadow: none; }
.cta.disabled .arrow, .cta[disabled] .arrow { background: rgba(255,255,255,.18); color: #F2EAE2; }
.cta.wa .arrow { background: #25D366; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }

/* Botón secundario en píldora */
.btn-pill { height: 54px; background: var(--btn-grad); box-shadow: var(--btn-hi), 0 8px 20px rgba(62,42,32,.22); font-weight: 600; transition: transform .2s var(--ease); }
.btn-pill:active { transform: scale(.97); }
.btn-pill .arrow { background: var(--gold-soft); color: var(--ink); }
.btn-pill.light { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-pill.light .arrow { background: var(--pill); }

/* "+" de las tarjetas: relleno marrón */
.round-add { width: 40px; height: 40px; background: var(--btn-grad); color: #fff; box-shadow: var(--btn-hi), 0 4px 12px rgba(30,20,10,.35); }
.round-add svg { stroke-width: 2; }
.round-add:active { transform: scale(.88); background: var(--btn-grad-press); }

/* Contadores: "+" protagonista */
.stepper .icon-btn[data-act="quick"], .qty .icon-btn[data-d="1"] { background: var(--btn-grad); color: #fff; box-shadow: var(--btn-hi), 0 2px 6px rgba(62,42,32,.25); }
.stepper .icon-btn svg, .qty .icon-btn svg { stroke-width: 2; }
.stepper .icon-btn:active, .qty .icon-btn:active { transform: scale(.88); }

/* Chips: el elegido lleva tilde dorada */
.chip { height: 40px; padding: 0 16px; font-weight: 600; letter-spacing: -.01em; }
.chip:not(.static):hover { box-shadow: inset 0 0 0 1px #D9CCBE; }
.chip.on { background: var(--btn-grad); box-shadow: var(--btn-hi), 0 4px 10px rgba(62,42,32,.2); padding-left: 12px; }
.chip.on::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--gold-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233E2A20' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat; flex: none; }
.chip.static.adult { background: var(--btn-grad); }

/* Selectores de modalidad y pago */
.seg button { position: relative; padding: 16px 8px 13px; font-weight: 600; transition: background .2s, color .2s, transform .15s, box-shadow .2s; }
.seg button:not(.on):not([disabled]):hover { box-shadow: inset 0 0 0 1px #D9CCBE; }
.seg button.on { background: var(--btn-grad); box-shadow: var(--btn-hi), 0 8px 18px rgba(62,42,32,.22); }
.seg button.on::after { content: ""; position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border-radius: 50%; background: var(--gold-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233E2A20' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }

/* Barra inferior */
.tabbar .icon-btn.active { background: var(--btn-grad); box-shadow: var(--btn-hi), 0 4px 12px rgba(62,42,32,.3); }
.tabbar .icon-btn:not(.active):active { background: var(--pill); }
.tabbar .icon-btn .badge { background: var(--logo-gold); color: #fff; }

/* Botones redondos del encabezado y favorito */
.icon-btn:active { transform: scale(.9); }
.header .icon-btn .badge { background: var(--ink); }
.fav-btn.on { background: #fff; color: #D64545; }

/* =====================================================================
   Botón fijo de abajo (v4)
   ===================================================================== */
.cta-bar { bottom: 0; padding: 18px 12px calc(12px + var(--safe-b)); width: min(484px, 100%);
  background: linear-gradient(180deg, rgba(246,239,228,0) 0%, rgba(246,239,228,.92) 42%); }
.cta { position: relative; overflow: hidden; height: 68px; border-radius: 34px; padding: 0 9px 0 24px; gap: 12px; justify-content: flex-start;
  box-shadow: var(--btn-hi), 0 14px 30px rgba(62,42,32,.30), 0 2px 6px rgba(62,42,32,.18); }
.cta::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent); transform: skewX(-18deg); }
.cta:not(.disabled)::after { animation: sheen 3.6s ease-in-out 1s infinite; }
@keyframes sheen { 0%, 70% { left: -60%; } 100% { left: 130%; } }
.cta .cta-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }
.cta .lbl { padding: 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em; flex: none; }
.cta .sub { font-size: 12px; font-weight: 500; color: rgba(255,255,255,.66); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cta .amt { flex: none; padding: 0; background: none; box-shadow: none; font-size: 28px; color: var(--gold-soft); }
.cta .arrow { order: 3; width: 50px; height: 50px; }
.cta:not(.disabled):active .arrow, .cta:hover .arrow { transform: translateX(2px); }
.cta.disabled .sub { color: rgba(255,255,255,.8); }
.cta.wa .arrow { background: #25D366; }
@media (prefers-reduced-motion: reduce) { .cta::after { animation: none; } }

/* Botones del panel de sugerencias */
.btn-glass { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 22px; border-radius: 26px;
  font-weight: 600; font-size: 15px; color: var(--ink); background: #fff; box-shadow: inset 0 0 0 1px var(--line); transition: transform .16s; }
.btn-glass:active { transform: scale(.97); }
.btn-glass.dark { background: var(--btn-grad); color: #fff; box-shadow: var(--btn-hi), 0 8px 18px rgba(62,42,32,.22); }

/* =====================================================================
   Ventas cruzadas
   ===================================================================== */
.upsell { margin-top: 28px; }
.upsell h3 { margin: 0 0 12px; font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1; }
.upsell.in-cart { margin: 24px 10px 0; padding: 18px 0 4px; }
.upsell.in-cart h3 { padding: 0 10px; }
.mini-row { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; padding: 2px 2px 8px; }
.mini-row::-webkit-scrollbar { display: none; }
.mini { position: relative; flex: 0 0 142px; scroll-snap-align: start; border-radius: 22px; padding: 8px; background: rgba(255,255,255,.88); box-shadow: inset 0 0 0 1px var(--line), 0 4px 12px rgba(62,42,32,.06); }
.mini-link { display: block; }
.mini .photo { display: block; aspect-ratio: 1; border-radius: 16px; }
.mini-txt { display: flex; flex-direction: column; gap: 2px; padding: 8px 4px 2px; }
.mini-txt b { font-size: 13px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em; }
.mini-txt .price { font-size: 19px; }
.mini .round-add { position: absolute; right: 12px; top: 12px; width: 34px; height: 34px; }
.round-add.done { background: var(--gold-soft); color: var(--ink); }
/* panel después de agregar */
.sheet-backdrop { background: rgba(40,26,19,.28); place-items: end center; padding: 10px; animation: fade .2s both; }
.sheet-backdrop.out { animation: fadeOut .2s both; }
.sheet { width: min(470px, 100%); border-radius: 34px; padding: 10px 16px 16px; margin-bottom: var(--safe-b);
  background: #FBF7F1; box-shadow: 0 -2px 30px rgba(46,31,23,.14), 0 30px 60px rgba(46,31,23,.2); animation: up .38s cubic-bezier(.2,1.2,.3,1) both; }
.sheet.out { animation: down .22s ease-in both; }
@keyframes fadeOut { to { opacity: 0; } }
@keyframes down { to { transform: translateY(60px); opacity: 0; } }
.grabber { display: block; width: 40px; height: 5px; border-radius: 3px; background: rgba(62,42,32,.18); margin: 0 auto 12px; }
.sheet-ok { display: flex; align-items: center; gap: 8px; margin: 0 4px 6px; font-size: 13px; font-weight: 600; color: #1D7A4A; }
.sheet-ok svg { width: 18px; height: 18px; }
.sheet h2 { margin: 0 4px 12px; font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1; }
.mini-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mini-list .mini { flex: none; }
.sheet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.header .icon-btn, .fav-btn { overflow: visible; }

/* =====================================================================
   Liquid Glass (estilo iOS 26)
   Vidrio transparente: desenfoca y satura lo de atrás, borde de luz fino,
   sin relieve de plástico. La selección es una gota de vidrio que se desliza.
   ===================================================================== */
:root {
  --lg-fill: rgba(255, 255, 255, .16);
  --lg-blur: blur(14px) saturate(185%) brightness(1.06);
  --lg-shadow: 0 10px 30px -6px rgba(40, 26, 19, .22), 0 2px 8px -2px rgba(40, 26, 19, .12);
  --lg-inner: inset 0 0 0 .5px rgba(255, 255, 255, .55), inset 0 1px 1.5px rgba(255, 255, 255, .7), inset 0 -1px 1.5px rgba(255, 255, 255, .25), inset 0 0 18px rgba(255, 255, 255, .18);
  --lg-spring: cubic-bezier(.34, 1.4, .64, 1);
}
.lg, .tabbar-inner, .header .icon-btn, .fav-btn, .btn-glass:not(.dark) {
  position: relative; isolation: isolate;
  background: var(--lg-fill);
  -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
  box-shadow: var(--lg-inner), var(--lg-shadow);
}
/* borde especular: luz arriba-izquierda y rebote abajo-derecha */
.tabbar-inner::after, .header .icon-btn::after, .fav-btn::after, .btn-glass::after, .cta::after, .tab-lens::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1px; z-index: 2;
  background: linear-gradient(140deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.18) 28%, rgba(255,255,255,0) 50%, rgba(255,255,255,.12) 72%, rgba(255,255,255,.7) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: none; left: 0; width: auto; transform: none;
}

/* ---------- Barra inferior ---------- */
.tabbar-inner { border-radius: 34px; padding: 6px; gap: 2px; overflow: visible; }
.tabbar .icon-btn { position: relative; z-index: 3; background: transparent !important; box-shadow: none !important; color: var(--ink);
  transition: color .3s, transform .35s var(--lg-spring), padding .35s var(--lg-spring); }
.tabbar .icon-btn.active { color: var(--ink); transform: none; padding: 0 18px 0 15px; }
.tabbar .icon-btn.active svg.i .f { fill: currentColor; }
.tabbar .icon-btn:active { transform: scale(.9); }
/* gota de vidrio que marca la pestaña activa */
.tab-lens { position: absolute; z-index: 1; top: 6px; bottom: 6px; left: 0; width: 52px; border-radius: 26px; pointer-events: none;
  background: rgba(255, 255, 255, .62);
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.9), inset 0 1px 2px rgba(255,255,255,1), inset 0 -2px 6px rgba(62,42,32,.06), 0 4px 14px -2px rgba(40,26,19,.18);
  transition: transform .5s var(--lg-spring), width .5s var(--lg-spring); }
.tab-lens.stretch { transition: transform .5s var(--lg-spring), width .5s var(--lg-spring); }
.tabbar .icon-btn .badge { background: var(--ink); color: #fff; border-color: rgba(255,255,255,.9); }

/* ---------- Botones redondos del encabezado / favorito ---------- */
.header .icon-btn, .fav-btn { overflow: visible; color: var(--ink); transition: transform .35s var(--lg-spring), background .2s; }
.header .icon-btn:active, .fav-btn:active { transform: scale(.88); background: rgba(255,255,255,.35); }
.header .icon-btn svg, .fav-btn svg { position: relative; z-index: 3; }
.fav-btn.on { color: #D64545; background: rgba(255,255,255,.35); }

/* ---------- Botón principal: vidrio tintado café ---------- */
.cta-bar { background: none; padding-top: 10px; }
.cta { height: 66px; isolation: isolate; overflow: hidden;
  background: linear-gradient(180deg, rgba(92, 64, 49, .78) 0%, rgba(54, 36, 27, .84) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.28), inset 0 1px 1px rgba(255,255,255,.35), inset 0 0 20px rgba(255,255,255,.06), 0 14px 32px -8px rgba(40,26,19,.45), 0 3px 10px -2px rgba(40,26,19,.25);
  transform: none; transition: transform .35s var(--lg-spring), box-shadow .2s; }
.cta::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: radial-gradient(120% 90% at 20% -30%, rgba(255,255,255,.28), rgba(255,255,255,0) 55%); }
.cta::after { opacity: .55; }
.cta > * { position: relative; z-index: 1; }
.cta:not(.disabled):active { transform: scale(.975); background: linear-gradient(180deg, rgba(92,64,49,.82), rgba(54,36,27,.88)); }
.cta .arrow { background: rgba(255, 255, 255, .16); color: #F3E2B3;
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.45), inset 0 1px 1px rgba(255,255,255,.5); }
.cta.wa .arrow { background: rgba(37, 211, 102, .9); color: #fff; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.5), inset 0 1px 1px rgba(255,255,255,.55); }
.cta .amt { color: #F0DDAA; }
.cta.disabled, .cta[disabled] { background: linear-gradient(180deg, rgba(140,120,106,.7), rgba(110,92,80,.78)); }

/* ---------- Botones del panel ---------- */
.btn-glass:not(.dark) { color: var(--ink); background: rgba(255,255,255,.5); }
.btn-glass.dark { position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(92,64,49,.92), rgba(54,36,27,.95));
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.28), inset 0 1px 1px rgba(255,255,255,.35), 0 10px 22px -8px rgba(40,26,19,.45); }
.btn-glass:active { transform: scale(.96); }

/* Sin soporte de desenfoque: vidrio sólido legible */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tabbar-inner, .header .icon-btn, .fav-btn, .btn-glass:not(.dark) { background: rgba(255,255,255,.92); }
  .cta { background: linear-gradient(180deg, #5C4031, #36241B); }
}
@media (prefers-reduced-transparency: reduce) {
  .tabbar-inner, .header .icon-btn, .fav-btn { background: rgba(255,255,255,.94); }
}
@media (prefers-reduced-motion: reduce) { .tab-lens { transition: none; } }
.cta:not(.disabled)::after { animation: none; }
.tab-lens.hide { opacity: 0; transform: scale(.6); }
.detail-photo .fav-btn { position: absolute; top: 14px; right: 14px; }
/* Encabezado que se esconde al deslizar hacia abajo */
.header { transition: transform .32s cubic-bezier(.2,.8,.2,1), background .2s; will-change: transform; }
.header.hidden-up { transform: translateY(calc(-100% - 6px)); }
@media (prefers-reduced-motion: reduce) { .header { transition: none; } }

/* =====================================================================
   Liquid Glass en todos los botones
   Claro: botones normales · Tintado café: elegidos y principales
   ===================================================================== */
:root {
  --lg-clear-bg: linear-gradient(180deg, rgba(255,255,255,.74) 0%, rgba(255,255,255,.44) 100%);
  --lg-clear-shadow: inset 0 0 0 .5px rgba(255,255,255,.7), inset 0 1px 1px rgba(255,255,255,.9), inset 0 -1px 1px rgba(255,255,255,.3),
    0 6px 16px -6px rgba(40,26,19,.18), 0 1px 3px rgba(40,26,19,.07);
  --lg-tint-bg: linear-gradient(180deg, rgba(96,67,51,.82) 0%, rgba(54,36,27,.88) 100%);
  --lg-tint-shadow: inset 0 0 0 .5px rgba(255,255,255,.3), inset 0 1px 1px rgba(255,255,255,.38), inset 0 0 14px rgba(255,255,255,.05),
    0 8px 20px -6px rgba(40,26,19,.42), 0 2px 6px -2px rgba(40,26,19,.2);
}

/* --- vidrio claro --- */
.chip:not(.static):not(.on), .seg button:not(.on), .stepper .icon-btn:not([data-act="quick"]), .qty .icon-btn:not([data-d="1"]),
.btn-pill.light, .search .icon-btn, .cart-item .rm, .cta.ghost, .accordion, .info-card .ic {
  position: relative; isolation: isolate;
  background: var(--lg-clear-bg) !important;
  -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
  box-shadow: var(--lg-clear-shadow) !important;
  color: var(--ink);
}
/* --- vidrio tintado café --- */
.chip.on, .chip.static.adult, .seg button.on, .stepper .icon-btn[data-act="quick"], .qty .icon-btn[data-d="1"],
.round-add:not(.done), .btn-pill:not(.light), .btn-glass.dark {
  position: relative; isolation: isolate;
  background: var(--lg-tint-bg) !important;
  -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%);
  box-shadow: var(--lg-tint-shadow) !important;
  color: #fff;
}
.round-add:not(.done) { color: #fff; }
.round-add.done { position: relative; isolation: isolate; background: rgba(217,195,138,.88) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.6), inset 0 1px 1px rgba(255,255,255,.7), 0 6px 14px -6px rgba(40,26,19,.35) !important; }

/* --- borde especular fino en todos --- */
.chip:not(.static)::after, .chip.static.adult::after, .seg button::after, .seg button.on::after, .stepper .icon-btn::after, .qty .icon-btn::after,
.round-add::after, .btn-pill::after, .search .icon-btn::after, .cart-item .rm::after, .cta.ghost::after, .info-card .ic::after {
  content: ""; position: absolute; inset: 0; top: 0; right: 0; width: auto; height: auto; border-radius: inherit; pointer-events: none; z-index: 2;
  padding: 1px; background: linear-gradient(140deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.15) 30%, rgba(255,255,255,0) 52%, rgba(255,255,255,.1) 74%, rgba(255,255,255,.6) 100%) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.chip.on::after, .seg button.on::after, .stepper .icon-btn[data-act="quick"]::after, .qty .icon-btn[data-d="1"]::after,
.round-add:not(.done)::after, .btn-pill:not(.light)::after { opacity: .5; }

/* la tilde de la modalidad/pago elegida pasa a ::before */
.seg button.on::before { content: ""; position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border-radius: 50%; z-index: 3;
  background: rgba(217,195,138,.95) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233E2A20' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.7); }
.seg button.on span { color: rgba(255,255,255,.72); }
.chip.on .extra { color: rgba(255,255,255,.7); }
.chip.on::before { background-color: rgba(217,195,138,.95); position: relative; z-index: 3; }

/* contenido por encima del borde */
.chip > *, .seg button > *, .btn-pill > *, .stepper .icon-btn svg, .qty .icon-btn svg, .round-add svg, .search .icon-btn svg, .cart-item .rm svg, .info-card .ic svg { position: relative; z-index: 3; }

/* rieles de vidrio de los contadores */
.stepper, .qty { background: rgba(255,255,255,.32); -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%);
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.65), inset 0 1px 2px rgba(62,42,32,.08); }
.stepper .icon-btn[disabled] { background: rgba(255,255,255,.25) !important; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.5) !important; color: #C9BBAE; }
.stepper .icon-btn[disabled]::after { opacity: .4; }

/* buscador como campo de vidrio */
.search input { background: var(--lg-clear-bg); -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.8), inset 0 1px 1px rgba(255,255,255,.9), 0 6px 16px -8px rgba(40,26,19,.18); }
.search input:focus { background: rgba(255,255,255,.9); box-shadow: inset 0 0 0 1.5px var(--ink); }

/* toque: se achica con rebote */
.chip:not(.static), .seg button, .stepper .icon-btn, .qty .icon-btn, .round-add, .btn-pill, .btn-glass, .search .icon-btn, .cart-item .rm, .cta.ghost {
  transition: transform .35s var(--lg-spring), background .2s, color .2s;
}
.chip:not(.static):active, .seg button:active, .btn-pill:active, .btn-glass:active, .cta.ghost:active { transform: scale(.95); }
.stepper .icon-btn:active, .qty .icon-btn:active, .round-add:active, .search .icon-btn:active, .cart-item .rm:active { transform: scale(.86); }
.seg button[disabled] { opacity: .45; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .chip:not(.static):not(.on), .seg button:not(.on), .stepper .icon-btn, .qty .icon-btn, .btn-pill.light, .search .icon-btn, .cart-item .rm { background: #fff !important; }
}
.card .add { position: absolute; top: 10px; left: 10px; }
.mini .round-add { position: absolute; }

/* Botón principal: vidrio tintado más transparente (se ve lo de atrás) */
.cta {
  background: linear-gradient(180deg, rgba(110, 78, 60, .52) 0%, rgba(62, 42, 32, .66) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(190%) brightness(.92); backdrop-filter: blur(20px) saturate(190%) brightness(.92);
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.45), inset 0 1.5px 1px rgba(255,255,255,.55), inset 0 -1px 1px rgba(255,255,255,.18),
    inset 0 0 24px rgba(255,255,255,.08), 0 14px 32px -10px rgba(40,26,19,.45), 0 3px 10px -3px rgba(40,26,19,.22);
}
.cta::before { background: linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.06) 42%, rgba(255,255,255,0) 60%); }
.cta::after { opacity: .9; }
.cta:not(.disabled):active { background: linear-gradient(180deg, rgba(110,78,60,.6), rgba(62,42,32,.74)); }
.cta .lbl, .cta .sub, .cta .amt { text-shadow: 0 1px 2px rgba(30,20,14,.35); }
.cta .arrow { background: rgba(255,255,255,.18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.6), inset 0 1.5px 1px rgba(255,255,255,.6), inset 0 -1px 1px rgba(255,255,255,.2); }
.cta.wa .arrow { background: linear-gradient(180deg, rgba(64,226,128,.82), rgba(28,180,86,.86));
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.65), inset 0 1.5px 1px rgba(255,255,255,.7), inset 0 -1px 1px rgba(255,255,255,.2), 0 4px 10px -2px rgba(20,120,60,.4); }
.cta.disabled, .cta[disabled] { background: linear-gradient(180deg, rgba(150,130,116,.5), rgba(120,100,88,.6)); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .cta { background: linear-gradient(180deg, #6E4E3C, #3E2A20); } }
.cta.wa { background: linear-gradient(180deg, rgba(110, 78, 60, .52) 0%, rgba(62, 42, 32, .66) 100%); }
.cta.wa:active { background: linear-gradient(180deg, rgba(110,78,60,.6), rgba(62,42,32,.74)); }
/* Encabezado: se va más despacio y con un leve fundido; vuelve un poco más rápido */
.header { transition: transform .45s cubic-bezier(.22,.9,.3,1), opacity .35s ease, background .2s; }
.header.hidden-up { transform: translateY(calc(-100% - 6px)); opacity: 0;
  transition: transform .75s cubic-bezier(.45,.05,.25,1), opacity .6s ease .1s, background .2s; }
/* vista previa borrosa: el fondo diminuto se estira y se ve suave hasta que llega la foto */
.photo[style*="background-image"] { background-size: cover; background-position: center; }
.photo[style*="background-image"].loading::after { display: none; }
.photo img { transition: opacity .35s ease; }
.photo.loading img { opacity: 0; }

/* =====================================================================
   Aviso del día (portada)
   ===================================================================== */
.aviso { display: flex; gap: 10px; align-items: center; margin: -8px var(--pad) 18px; padding: 12px 16px; border-radius: 18px;
  background: rgba(217,195,138,.28); color: var(--ink); font-size: 14px; font-weight: 500; line-height: 1.35;
  box-shadow: inset 0 0 0 .5px rgba(168,153,79,.45); }
.aviso svg { width: 20px; height: 20px; flex: none; color: var(--logo-gold); }

/* =====================================================================
   Panel de administración
   ===================================================================== */
.adm-dot { width: 12px; height: 12px; border-radius: 50%; justify-self: center; box-shadow: 0 0 0 4px rgba(255,255,255,.8); }
.adm-dot.ok { background: #2FA563; } .adm-dot.test { background: #E0A63A; } .adm-dot.err { background: #D9482B; }
.adm-status { margin: 0 var(--pad) 12px; padding: 10px 14px; border-radius: 14px; font-size: 13px; line-height: 1.4; }
.adm-status.ok { background: #E3F5EA; color: #1D6B42; } .adm-status.test { background: #FFF1D6; color: #8A5A00; } .adm-status.err { background: #FFE6DC; color: #B4401F; }
.adm-tabs { display: flex; gap: 8px; padding: 0 var(--pad); overflow-x: auto; scrollbar-width: none; }
.adm-tabs::-webkit-scrollbar { display: none; }
.adm-body { padding: 14px 0 20px; }
.adm-sum { display: flex; gap: 16px; padding: 0 var(--pad) 10px; font-size: 13px; color: var(--muted); }
.adm-sum b { color: var(--ink); font-size: 15px; }
.adm-search { margin: 0 var(--pad) 10px; }
.adm-cats { padding-bottom: 12px; }
.adm-list { display: grid; gap: 10px; padding: 0 10px; }
.adm-row { border-radius: 22px; padding: 10px; background: rgba(255,255,255,.9); box-shadow: inset 0 0 0 1px var(--line), 0 4px 12px rgba(62,42,32,.05); }
.adm-row.oculto { opacity: .55; }
.adm-row.agotado-adm .adm-thumb { filter: grayscale(.8); }
.adm-main { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; }
.adm-thumb { width: 52px; height: 52px; border-radius: 14px; display: block; }
.adm-thumb svg.ilu { width: 52px; height: 52px; }
.adm-info { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.adm-info b { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-tags { display: flex; flex-wrap: wrap; gap: 4px; min-height: 18px; }
.adm-tags i { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 8px; background: var(--pill); }
.adm-tags .t-new { background: #E3F5EA; color: #1D6B42; } .adm-tags .t-mod { background: #FFF1D6; color: #8A5A00; }
.adm-tags .t-off { background: #FFE6DC; color: #B4401F; } .adm-tags .t-star { background: rgba(217,195,138,.4); color: #6B5320; }
.adm-price { display: flex; align-items: center; gap: 2px; height: 44px; padding: 0 12px; border-radius: 14px; background: var(--pill); font-family: var(--serif); font-size: 20px; }
.adm-price input { width: 64px; border: 0; background: none; font: inherit; text-align: right; outline: none; }
.adm-price:focus-within { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
.adm-sws { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 10px; padding-left: 2px; }
.adm-sw { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; cursor: pointer; }
.adm-sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.adm-sw .tr { width: 42px; height: 26px; border-radius: 13px; background: #DDD3C8; position: relative; transition: background .2s; flex: none; }
.adm-sw .tr::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .25s var(--lg-spring); }
.adm-sw input:checked + .tr { background: #2FA563; }
.adm-sw input:checked + .tr::after { transform: translateX(16px); }
.adm-sw input:focus-visible + .tr { outline: 2px solid var(--logo-gold); outline-offset: 2px; }
.adm-more { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--ink-2); padding: 6px 4px; }
.adm-more svg { width: 16px; height: 16px; transition: transform .2s; }
.adm-row.open .adm-more svg { transform: rotate(180deg); }
.adm-edit { margin-top: 12px; padding-top: 12px; border-top: 1px dashed #E2D8CC; display: grid; gap: 10px; }
.adm-field { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.adm-field .input, .adm-field .textarea { font-weight: 400; color: var(--ink); }
.adm-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.adm-actions .btn-pill { height: 44px; font-size: 13.5px; padding-right: 16px; }
.adm-actions .btn-pill .arrow { width: 28px; height: 28px; }
.adm-form, .adm-block { margin: 0 var(--pad); display: grid; gap: 14px; }
.adm-block { margin-bottom: 26px; }
.adm-block h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1; }
.adm-block .hint { margin: 0; }
.adm-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
select.input { appearance: none; -webkit-appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233E2A20' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; }
.adm-chk { cursor: pointer; }
.adm-chk input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.adm-chk:has(input:checked) { background: var(--lg-tint-bg) !important; color: #fff; box-shadow: var(--lg-tint-shadow) !important; }
.adm-hours { display: grid; gap: 8px; }
.adm-day { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 12px; border-radius: 16px; background: rgba(255,255,255,.85); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; }
.adm-day b { width: 82px; font-size: 14px; }
.adm-day .input.sm { width: auto; height: 40px; padding: 0 10px; border-radius: 12px; font-size: 14px; }
.adm-block.danger .btn-pill { justify-self: start; }
.cta .sub u { text-decoration: none; font-weight: 700; color: #F0DDAA; cursor: pointer; }
@media (min-width: 720px) { .adm-list { grid-template-columns: 1fr 1fr; padding: 0 var(--pad); } }
.section-head .momento { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--ink-2); white-space: nowrap;
  padding: 6px 10px; border-radius: 14px; background: rgba(217,195,138,.3); }
.section-head .momento svg { width: 14px; height: 14px; }
.section-head:has(.momento) { flex-wrap: wrap; row-gap: 8px; }

/* ---------- Pedidos (cliente y panel) ---------- */
.estado { font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 12px; white-space: nowrap; background: var(--pill); }
.estado.est-recibido { background: #E7EEF9; color: #2B5BA8; }
.estado.est-preparando { background: #FFF1D6; color: #8A5A00; }
.estado.est-listo { background: #E3F5EA; color: #1D6B42; }
.estado.est-entregado { background: var(--pill); color: var(--ink-2); }
.estado.est-cancelado { background: #FFE6DC; color: #B4401F; }
.mis-pedidos { margin: 6px 10px 0; display: grid; gap: 10px; }
.mis-pedidos h3 { margin: 0 10px 2px; font-family: var(--serif); font-weight: 400; font-size: 28px; }
.pedido-card { padding: 16px; border-radius: 22px; background: rgba(255,255,255,.9); box-shadow: inset 0 0 0 1px var(--line), 0 4px 12px rgba(62,42,32,.05); }
.pc-head, .ped-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14.5px; }
.pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin: 12px 0 8px; }
.pasos i { height: 5px; border-radius: 3px; background: #E8DFD4; }
.pasos i.on { background: linear-gradient(90deg, #B9974A, #D9C38A); }
.pc-msg { margin: 0; font-size: 13.5px; font-weight: 600; }
.pc-items { margin: 6px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.pc-foot, .ped-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.pc-foot .price, .ped-foot .price { font-size: 24px; }
.pc-foot .link svg { width: 15px; height: 15px; }
.adm-row.ped { padding: 14px; }
.adm-row.ped.est-entregado, .adm-row.ped.est-cancelado { opacity: .62; }
.adm-row.ped.est-recibido { box-shadow: inset 0 0 0 1.5px #9BB8E6, 0 6px 16px rgba(43,91,168,.1); }
.ped-who { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 13.5px; font-weight: 600; }
.ped-who svg { width: 16px; height: 16px; }
.ped-items { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 14px; }
.ped-items span { color: var(--muted); font-size: 12.5px; }
.ped-items em { display: block; color: #8A5A00; font-size: 12.5px; }
.ped-pago { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.ped-acc { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-top: 12px; padding-bottom: 2px; }
.ped-acc::-webkit-scrollbar { display: none; }
.ped-acc .chip { height: 34px; font-size: 12.5px; padding: 0 12px; }
.adm-foto { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: start; }
.adm-big { width: 110px; height: 110px; border-radius: 18px; display: grid; place-items: center; background: var(--pill); }
.adm-big .sin-foto { font-style: normal; font-size: 12px; color: var(--muted); }
.adm-foto-acc { display: grid; gap: 8px; }
.adm-foto-acc .btn-pill { height: 44px; font-size: 13.5px; cursor: pointer; justify-content: flex-start; }
.adm-foto-acc .btn-pill .arrow { width: 28px; height: 28px; }
.adm-foto-acc .input { height: 44px; font-size: 13.5px; }
.adm-foto-acc .link { justify-self: start; }
/* Encabezado del panel: fijo, opaco y con separación clara */
.header.adm-header { background: #FBF8F4; -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 1px 0 rgba(62,42,32,.08), 0 8px 18px -12px rgba(62,42,32,.25); padding-bottom: 10px; margin-bottom: 12px; }
.header.adm-header .adm-dot { box-shadow: 0 0 0 4px #fff, 0 0 0 5px rgba(62,42,32,.08); }

/* sin guiones ni subrayados en ningún texto */
* { hyphens: manual; }
a, u { text-decoration: none; }
a.cta { text-decoration: none; color: #fff; }
.pc-wa { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: #E3F5EA; color: #1D6B42; font-size: 13px; font-weight: 600; }
.pc-wa svg { width: 18px; height: 18px; flex: none; }
/* el encabezado al bajar toma el tono arena de arriba */
.header.scrolled:not(.adm-header) { background: rgba(239, 226, 207, .86); }
.pc-wa { display: grid; gap: 8px; margin-top: 12px; padding: 12px; border-radius: 16px; background: #E3F5EA; color: #1D6B42; }
.pc-wa p { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; font-weight: 700; }
.pc-wa .btn-pill { height: 46px; font-size: 14px; justify-content: flex-start; }
.pc-wa .btn-pill .arrow { width: 30px; height: 30px; }
.pc-wa small { font-size: 12.5px; font-weight: 600; }

/* =====================================================================
   Liquid Glass v3 — más visible: borde de luz, brillo superior y
   refracción en el borde inferior, en TODOS los botones
   ===================================================================== */
:root {
  --lg-clear-bg: linear-gradient(180deg, rgba(255,255,255,.66) 0%, rgba(255,255,255,.26) 52%, rgba(255,255,255,.40) 100%);
  --lg-clear-shadow:
    inset 0 1.5px 0 rgba(255,255,255,1), inset 0 -1.5px 0 rgba(255,255,255,.6),
    inset 1px 0 0 rgba(255,255,255,.55), inset -1px 0 0 rgba(255,255,255,.55),
    inset 0 0 0 .5px rgba(62,42,32,.12),
    inset 0 14px 16px -12px rgba(255,255,255,1), inset 0 -12px 14px -12px rgba(62,42,32,.16),
    0 10px 24px -10px rgba(40,26,19,.28), 0 1px 3px rgba(40,26,19,.08);
  --lg-tint-bg: linear-gradient(180deg, rgba(128,92,70,.66) 0%, rgba(72,48,36,.76) 58%, rgba(92,64,48,.74) 100%);
  --lg-tint-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.6), inset 0 -1.5px 0 rgba(255,255,255,.22),
    inset 0 0 0 .5px rgba(255,255,255,.28),
    inset 0 14px 18px -12px rgba(255,255,255,.42), inset 0 -12px 14px -12px rgba(0,0,0,.3),
    0 10px 24px -10px rgba(40,26,19,.48), 0 2px 5px -2px rgba(40,26,19,.25);
  --lg-fill: var(--lg-clear-bg);
  --lg-inner: inset 0 1.5px 0 rgba(255,255,255,1), inset 0 -1.5px 0 rgba(255,255,255,.6), inset 0 0 0 .5px rgba(62,42,32,.12),
    inset 0 14px 16px -12px rgba(255,255,255,1), inset 0 -12px 14px -12px rgba(62,42,32,.16);
}
/* claros que usaban otras recetas */
.header .icon-btn, .fav-btn, .tabbar-inner, .btn-glass:not(.dark), .accordion, .icon-btn:not(.dark):not(.active) {
  background: var(--lg-clear-bg) !important;
  -webkit-backdrop-filter: blur(14px) saturate(190%) brightness(1.04); backdrop-filter: blur(14px) saturate(190%) brightness(1.04);
  box-shadow: var(--lg-clear-shadow) !important;
}
.tabbar .icon-btn { background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
.tab-lens { background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.6)) !important;
  box-shadow: inset 0 1.5px 0 #fff, inset 0 0 0 .5px rgba(62,42,32,.1), inset 0 -8px 12px -10px rgba(62,42,32,.18), 0 4px 12px -4px rgba(40,26,19,.25) !important; }
/* tintados café */
.cta, .btn-glass.dark, .chip.on, .seg button.on, .stepper .icon-btn[data-act="quick"], .qty .icon-btn[data-d="1"], .round-add:not(.done), .btn-pill:not(.light), .adm-chk:has(input:checked) {
  background: var(--lg-tint-bg) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
  box-shadow: var(--lg-tint-shadow) !important;
}
.cta.disabled, .cta[disabled] { background: linear-gradient(180deg, rgba(160,140,126,.62), rgba(122,102,90,.72)) !important; }
.cta .arrow, .btn-pill .arrow { background: rgba(255,255,255,.18) !important; color: #F3E2B3;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.65), inset 0 0 0 .5px rgba(255,255,255,.45), inset 0 8px 10px -8px rgba(255,255,255,.6) !important; }
.btn-pill.light .arrow { background: rgba(255,255,255,.5) !important; color: var(--ink); }
/* campos de texto: vidrio hundido */
.input, .textarea, .search input {
  background: rgba(255,255,255,.38) !important; -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%);
  box-shadow: inset 0 1.5px 3px rgba(62,42,32,.10), inset 0 0 0 .5px rgba(62,42,32,.12), inset 0 -1px 0 rgba(255,255,255,.8) !important;
}
.input:focus, .textarea:focus, .search input:focus { background: rgba(255,255,255,.75) !important; box-shadow: inset 0 0 0 1.5px var(--ink) !important; }
.tabbar .tabbar-inner .icon-btn { background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* =====================================================================
   Liquid Glass v4 — más limpio
   Marrón cálido y saturado (sin grisado), un solo filo de luz arriba,
   sombra suave. Vidrio claro con menos brillos.
   ===================================================================== */
:root {
  --lg-tint-bg: linear-gradient(180deg, rgba(128, 78, 48, .80) 0%, rgba(84, 47, 28, .88) 100%);
  --lg-tint-shadow:
    inset 0 1px 0 rgba(255, 228, 200, .45),
    inset 0 0 0 .5px rgba(255, 220, 190, .22),
    0 8px 20px -8px rgba(84, 47, 28, .55), 0 1px 3px rgba(84, 47, 28, .2);
  --lg-clear-bg: linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.48) 100%);
  --lg-clear-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 .5px rgba(62,42,32,.10),
    0 6px 18px -8px rgba(40,26,19,.22), 0 1px 2px rgba(40,26,19,.06);
  --lg-inner: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 .5px rgba(62,42,32,.10);
}
.cta, .btn-glass.dark, .chip.on, .seg button.on, .stepper .icon-btn[data-act="quick"], .qty .icon-btn[data-d="1"], .round-add:not(.done), .btn-pill:not(.light), .adm-chk:has(input:checked) {
  -webkit-backdrop-filter: blur(18px) saturate(200%); backdrop-filter: blur(18px) saturate(200%);
  color: #FFF8EE;
}
/* sin brillos extra en el botón principal */
.cta::before { background: none !important; }
.cta::after { opacity: .35 !important; }
.cta .lbl, .cta .sub, .cta .amt { text-shadow: none !important; }
.cta .sub { color: rgba(255, 244, 228, .72) !important; }
.cta .amt { color: #F3DDB0 !important; }
.cta .arrow, .btn-pill:not(.light) .arrow { background: rgba(255, 240, 220, .16) !important; color: #F3DDB0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 236, 210, .4), inset 0 0 0 .5px rgba(255, 236, 210, .25) !important; }
.cta.disabled, .cta[disabled] { background: linear-gradient(180deg, rgba(150, 118, 96, .72), rgba(124, 94, 74, .8)) !important; }
/* el filo especular de los chips/botones tintados, más sutil */
.chip.on::after, .seg button.on::after, .stepper .icon-btn[data-act="quick"]::after, .qty .icon-btn[data-d="1"]::after,
.round-add:not(.done)::after, .btn-pill:not(.light)::after { opacity: .2 !important; }
.chip:not(.on)::after, .seg button:not(.on)::after, .stepper .icon-btn:not([data-act="quick"])::after, .qty .icon-btn:not([data-d="1"])::after { opacity: .5 !important; }
/* panel: nada más ancho que la pantalla */
html, body { overflow-x: clip; max-width: 100%; }
.adm-list > *, .adm-body, #admin-root { min-width: 0; max-width: 100%; }
.ped-acc { flex-wrap: wrap; overflow: visible; }
.ped-acc .chip { flex: 0 0 auto; }
.ped-acc .ped-x { margin-left: auto; color: #B4401F; }
.ped-cancel { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: #FFE6DC; color: #B4401F; font-size: 13px; font-weight: 600; }
.estado.est-enviado { background: #E3F5EA; color: #1D6B42; }
.pasos { grid-template-columns: repeat(3, 1fr); }
.pc-cancel { color: #B4401F; }
.pc-cancel svg { width: 15px; height: 15px; }

/* Marrón v5 — más transparente: se ve lo de atrás, cálido y sin grisado */
:root {
  --lg-tint-bg: linear-gradient(180deg, rgba(150, 90, 52, .52) 0%, rgba(104, 58, 32, .62) 100%);
  --lg-tint-shadow:
    inset 0 1px 0 rgba(255, 236, 214, .55),
    inset 0 0 0 .5px rgba(255, 226, 196, .35),
    0 8px 20px -8px rgba(104, 58, 32, .45), 0 1px 3px rgba(104, 58, 32, .15);
}
.cta, .btn-glass.dark, .chip.on, .seg button.on, .stepper .icon-btn[data-act="quick"], .qty .icon-btn[data-d="1"], .round-add:not(.done), .btn-pill:not(.light), .adm-chk:has(input:checked) {
  -webkit-backdrop-filter: blur(22px) saturate(220%) brightness(.96); backdrop-filter: blur(22px) saturate(220%) brightness(.96);
}
.cta .lbl, .chip.on, .seg button.on, .btn-pill:not(.light) { text-shadow: 0 1px 1px rgba(70, 36, 18, .35); }
.cta .lbl { text-shadow: 0 1px 1px rgba(70, 36, 18, .35) !important; }
.cta .amt { text-shadow: 0 1px 1px rgba(70, 36, 18, .3) !important; color: #FFE7B8 !important; }
.cta .sub { color: rgba(255, 246, 234, .82) !important; }
.cta.disabled, .cta[disabled] { background: linear-gradient(180deg, rgba(160, 128, 104, .5), rgba(130, 100, 80, .58)) !important; }
/* recomendados en el panel */
.rec-row { display: grid; grid-template-columns: 22px 52px 1fr auto; gap: 10px; align-items: center; }
.rec-n { font-family: var(--serif); font-size: 22px; color: var(--muted); text-align: center; }
.rec-acc { display: flex; gap: 6px; }
.rec-acc .icon-btn.sm { width: 36px; height: 36px; }
.rec-acc .icon-btn:first-child svg { transform: rotate(180deg); }
.rec-acc .icon-btn[disabled] { opacity: .3; }

/* Botones marrones chicos: más cuerpo para que se lean bien (el de abajo sigue transparente) */
.chip.on, .seg button.on, .stepper .icon-btn[data-act="quick"], .qty .icon-btn[data-d="1"], .round-add:not(.done), .adm-chk:has(input:checked), .btn-glass.dark {
  background: linear-gradient(180deg, rgba(140, 84, 50, .86) 0%, rgba(96, 54, 30, .92) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 236, 214, .5), inset 0 0 0 .5px rgba(255, 226, 196, .3), 0 6px 16px -7px rgba(96, 54, 30, .55) !important;
  color: #fff !important; text-shadow: none !important;
}
.chip.on .extra, .seg button.on span { color: rgba(255, 240, 222, .85) !important; opacity: 1 !important; }
.btn-pill:not(.light) { background: linear-gradient(180deg, rgba(140, 84, 50, .8) 0%, rgba(96, 54, 30, .88) 100%) !important; text-shadow: none !important; }
/* Links de consulta por WhatsApp */
.wa-link { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-size: 13.5px; font-weight: 600; color: #1D6B42;
  padding: 9px 14px 9px 10px; border-radius: 20px; background: rgba(227, 245, 234, .85); box-shadow: inset 0 0 0 .5px rgba(29,107,66,.18); }
.wa-link svg { width: 18px; height: 18px; flex: none; }
.det-wa { margin-top: 12px; }
.pc-wa-link { margin-top: 12px; }
/* Transición entre pantallas: fundido suave, casi sin desplazamiento */
.view { animation: viewFade .22s ease-out both; }
.view.back { animation-name: viewFade; }
@keyframes viewFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* =====================================================================
   3 · Menos ruido visual
   Una sola escala de redondeos y tamaños, tarjetas sin sombra ni borde
   duro, etiquetas discretas, más aire.
   ===================================================================== */
:root { --r-lg: 26px; --r-md: 20px; --r-sm: 14px; --card-bg: rgba(255, 252, 247, .72); }
.photo { border-radius: var(--r-lg); background: #EFE6DA; }
.carousel-wrap { background: transparent; margin-top: 18px; padding: 0 0 6px; }
.row, .cart-item, .info-card, .mini, .adm-row, .pedido-card, .totals {
  background: var(--card-bg) !important; box-shadow: none !important; border-radius: var(--r-lg) !important;
}
.row { padding: 10px 12px 10px 10px; gap: 16px; }
.row .photo, .cart-item .photo, .mini .photo { border-radius: var(--r-md); }
.list { gap: 12px; }
.row h3, .card h3, .cart-item h3 { font-size: 16px; font-weight: 600; letter-spacing: -.015em; }
.row p, .card p { color: #7A6B60; font-size: 12.5px; }
.row .price, .cart-item .price { font-size: 22px; }
.card .card-price { font-size: 22px; margin: 2px 2px 3px; }
/* etiquetas discretas: texto chico con un punto, sin pastilla */
.row .mini-tags span, .chip.static:not(.adult) { background: transparent !important; padding: 0 !important; height: auto; font-size: 11.5px; font-weight: 600; color: #9A8778; }
.row .mini-tags { gap: 10px; }
.row .mini-tags span:not(.adult)::before, .chip.static:not(.adult)::before { content: "•"; margin-right: 4px; color: #C9B49A; }
.row .mini-tags span.adult, .chip.static.adult { padding: 2px 8px !important; border-radius: 8px; font-size: 10.5px; }
.accordion { box-shadow: none !important; background: var(--card-bg) !important; border-radius: var(--r-md); }
.section-head { margin-top: 40px; }
.section-head h2 { font-size: 34px; }
.totals .line.total { border-top-style: solid; border-color: rgba(62,42,32,.08); }

/* =====================================================================
   4 · Detalles premium
   ===================================================================== */
/* textura de papel muy sutil sobre el fondo */
.bg::after { content: ""; position: absolute; inset: 0; opacity: .5; mix-blend-mode: multiply; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55  0 0 0 0 .45  0 0 0 0 .35  0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* el producto vuela al carrito */
.vuela { position: fixed; z-index: 95; width: 56px; height: 56px; border-radius: 50%; background-size: cover; background-position: center; pointer-events: none;
  box-shadow: 0 8px 20px rgba(62,42,32,.3); transition: transform .62s cubic-bezier(.5,-.2,.6,1), opacity .62s ease-in; }
.badge.pop { animation: rebote .5s cubic-bezier(.3,1.8,.5,1); }
@keyframes rebote { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
.tabbar .icon-btn.salta { animation: rebote .45s cubic-bezier(.3,1.8,.5,1); }
/* sello del logo como marca de agua */
.marca-agua { display: block; margin: 34px auto 0; width: 150px; height: 150px; opacity: .18; }
.mis-pedidos .marca-agua { margin-top: 24px; }
@media (prefers-reduced-motion: reduce) { .vuela { display: none; } }


/* Login del panel (Firebase) */
.adm-login { max-width: 360px; margin: 24px auto 0; display: grid; gap: 14px; text-align: center; }
.adm-login .art { margin: 0 auto; }
.adm-login h2 { margin: 0; font: 400 34px/1 var(--serif); }
.adm-login p { margin: 0; color: var(--muted); }
.adm-login .adm-field { text-align: left; }
.adm-login .btn-pill { justify-self: center; }
.adm-err { color: #B5402C; font-size: 14px; }
.header.adm-header { grid-template-columns: 52px 1fr 52px; }
.adm-hd-r { justify-self: end; display: flex; align-items: center; gap: 12px; }
.header.adm-header:has(.adm-salir) { grid-template-columns: 74px 1fr 74px; }
.adm-salir { font-size: 14px; }

/* ===== Arreglo parte de abajo del inicio ===== */
/* el fondo arena llega hasta el borde inferior (sin franja blanca bajo la barra de Safari) */
html { background: var(--bg-end); }
body { background: transparent; }
/* recomendados: menos inclinación y margen para que la primera tarjeta no quede cortada */
.stack { padding: 22px calc(var(--pad) + 10px) 26px; scroll-padding-inline: calc(var(--pad) + 10px); }
.deal { scroll-snap-align: start; }
.deal:nth-child(3n+1) { transform: rotate(-3deg) translateY(6px); }
.deal:nth-child(3n+2) { transform: rotate(-.5deg); }
.deal:nth-child(3n+3) { transform: rotate(2.5deg) translateY(5px); }
.foot-note { margin-top: 18px; }

/* ===== Safari iPhone (iOS 26): barra de arriba y de abajo ===== */
/* Safari toma el color de la barra de estado del encabezado: que sea arena sólido, no transparente */
.header:not(.adm-header) { background: var(--bg-end); }
.header.scrolled:not(.adm-header) { background: rgba(233, 218, 195, .94); }
/* el fondo sigue por debajo de la barra de Safari (sin corte recto) */
.bg { inset: auto 0 auto 0; top: 0; height: calc(100lvh + 240px); }
/* el contenido se desvanece en arena debajo de la barra de abajo, en vez de verse cortado */
.tabbar::before {
  /* la barra tiene transform: este fondo se ubica respecto de ella y ocupa todo el ancho de la pantalla */
  content: ""; position: absolute; left: calc(50% - 50vw); width: 100vw;
  bottom: calc(-14px - var(--safe-b) - 240px); height: calc(140px + 240px + var(--safe-b));
  background: linear-gradient(180deg, rgba(233,218,195,0) 0%, rgba(233,218,195,.9) 40%, var(--bg-end) 58%);
  pointer-events: none; z-index: -1;
}
.app { padding-bottom: calc(150px + var(--safe-b)); }

/* ===== Banner "Estamos cerrados" ===== */
.cerrado-banner { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 8px;
  padding: calc(9px + env(safe-area-inset-top, 0px)) var(--pad) 9px; background: #B83A2B; color: #fff;
  font-size: 13.5px; line-height: 1.3; text-align: center; }
.cerrado-banner b { font-weight: 700; letter-spacing: .01em; }
.cerrado-banner span { opacity: .92; }
.cerrado-banner + .header { padding-top: 14px; }

/* ===== Promo Itaú ===== */
.promo-itau { display: inline-flex; align-items: center; gap: 5px; margin: 6px 0 2px; padding: 3px 8px 3px 3px; border-radius: 999px;
  background: #FFF1E3; color: #8A4A12; font-size: 11px; font-weight: 600; line-height: 1; white-space: nowrap; }
.promo-itau .itau-logo { width: 16px; height: 16px; flex: none; border-radius: 5px; }
.card .promo-itau { display: flex; width: fit-content; }
.row-body .promo-itau { margin: 4px 0 0; width: fit-content; align-self: flex-start; justify-self: start; }
.promo-itau.grande { margin: 10px 0 4px; padding: 6px 12px 6px 6px; font-size: 13px; white-space: normal; line-height: 1.3; }
.promo-itau.grande .itau-logo { width: 22px; height: 22px; border-radius: 6px; }
.promo-hint { display: flex; gap: 8px; align-items: flex-start; }
.promo-hint .itau-logo { width: 18px; height: 18px; flex: none; border-radius: 5px; margin-top: 1px; }