/* Turma da Resenha: the site is the boteco wall, each party a poster on it.
   Purple lives on surfaces only; text is ink. Sizes in rem. */
:root {
  --tile: #F7F7F2;
  --paper: #FFFFFF;
  --roxo: #2A0A52;
  --roxo-2: #3B1670;
  --ink: #1C0838;
  --muted: #5A4A72;
  --on-roxo: #EDE6F7;
  --on-roxo-muted: #D9CCEE;
  --amarelo: #F9E825;
  --rosa: #E8458F;
  --rosa-texto: #B81E66;
  --erro: #C8321E;
  --ok: #1F7A4D;
  --line: #D6D3DE;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --slab: 'Alfa Slab One', Georgia, serif;
  --sans: 'Schibsted Grotesk', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 4.5rem; } /* menu links land below the sticky header */
body {
  margin: 0;
  color: var(--ink);
  font: 400 1.0625rem/1.5 var(--sans);
  background: var(--tile) url(/img/azulejo.webp) repeat 0 0 / 6rem 6rem;
}
img { max-width: 100%; height: auto; }
a { color: var(--rosa-texto); }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--rosa); outline-offset: 3px; border-radius: 0.375rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: 77.5rem; margin: 0 auto; padding: 0 1.25rem; }
h1, h2, h3 { font-family: var(--slab); font-weight: 400; line-height: 1.05; margin: 0; letter-spacing: -0.01em; }
h2 { font-size: clamp(2rem, 4vw, 2.75rem); }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
[hidden] { display: none !important; } /* class rules like .btn must not resurrect hidden elements */

/* Buttons: feedback on press, hover only where there is a pointer. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3.25rem; padding: 0 1.625rem; border-radius: 999px; border: 0;
  font: 800 1.0625rem/1.3 var(--sans); text-align: center; text-decoration: none; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 160ms ease;
}
.btn:active { transform: scale(0.97); }
.btn[disabled] { cursor: progress; opacity: 0.7; }
.btn-amarelo { background: var(--amarelo); color: var(--ink); }
.btn-roxo { background: var(--roxo); color: var(--tile); }
.btn-linha { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.btn-ink-edge { box-shadow: inset 0 0 0 2px var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .btn-amarelo:hover { background: #FFF35A; color: var(--ink); }
  .btn-roxo:hover { background: var(--roxo-2); color: var(--tile); }
  .btn-linha:hover { background: rgba(127, 127, 127, 0.12); }
}

/* Nav: translucent material over the wall. */
.nav { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid rgba(28, 8, 56, 0.12);
  background: rgba(247, 247, 242, 0.86); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); }
@media (prefers-reduced-transparency: reduce) { .nav { background: var(--tile); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.nav .wrap { display: flex; align-items: center; gap: 1.75rem; padding-top: 0.75rem; padding-bottom: 0.75rem; }
.wordmark { font: 400 1.375rem/1 var(--slab); color: var(--roxo); text-decoration: none; white-space: nowrap; }
/* The logo is the wordmark with the flyer's pandeiro after it (rays in pink on light, yellow on purple). */
.wordmark::after { content: ""; display: inline-block; width: 1.4em; height: 1.5em; margin-left: 0.2em; vertical-align: -0.38em;
  background: url(/img/pandeiro.svg) center / contain no-repeat; }
.nav-links { display: flex; gap: 1.375rem; flex-grow: 1; font-weight: 500; }
.nav-links a { color: var(--ink); text-decoration: none; }
.nav .btn { margin-left: auto; min-height: 2.75rem; padding: 0 1.25rem; font-size: 1rem; }
@media (max-width: 52rem) { .nav-links { display: none; } }
@media (max-width: 30rem) {
  .nav .wrap { gap: 0.75rem; }
  .nav .wordmark, .app-head .wordmark { font-size: clamp(1rem, 4.6vw, 1.375rem); }
  .nav .btn { padding: 0 0.875rem; font-size: 0.9375rem; }
}

/* Hero: the wall photo with the party poster taped to the tiles. */
.hero { position: relative; height: min(56.25vw, 86vh); overflow: hidden; } /* 16:9, never taller than the screen; width stays 100% */
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.poster {
  /* Padding in % would follow the hero's width, not the poster's: keep it in rem. */
  --pad: clamp(0.75rem, 1.2vw, 1.125rem);
  position: absolute; left: 57%; top: 5%; width: clamp(8rem, 17%, 15.5rem);
  background: var(--roxo); padding: var(--pad) var(--pad) 0; text-decoration: none; display: block;
  box-shadow: 0 18px 30px -12px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.25);
  transform: translate(-50%, 0) rotate(-2.5deg); transform-origin: 50% 0;
  animation: pin 640ms var(--ease-out) 250ms both;
}
.poster img { display: block; width: 100%; height: auto; }
.poster-date { display: block; margin: calc(var(--pad) * 0.8) calc(var(--pad) * -1.1) 0; padding: calc(var(--pad) * 0.75) 0;
  background: var(--amarelo); color: var(--ink); white-space: nowrap;
  font: 400 clamp(0.8125rem, 1.1vw, 1.1875rem)/1 var(--slab); text-align: center; }
.tape { position: absolute; width: 4rem; height: 1.375rem; background: rgba(236, 229, 205, 0.8); }
.tape-l { top: -0.625rem; left: -0.875rem; transform: rotate(-32deg); }
.tape-r { top: -0.5rem; right: -1rem; transform: rotate(28deg); }
@keyframes pin { from { opacity: 0; transform: translate(-50%, -18px) rotate(-8deg) scale(1.05); } to { opacity: 1; transform: translate(-50%, 0) rotate(-2.5deg) scale(1); } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .poster { animation: fadein 200ms ease both; } }
@media (max-width: 42rem) {
  .hero { height: auto; aspect-ratio: 4 / 5; }
  .poster { left: 50%; width: 46%; top: 4%; }
  .poster-date { font-size: 0.9375rem; }
}

/* The hydraulic-tile band: where white tile meets purple paint. */
.band { height: 2.75rem; background: var(--roxo) url(/img/ladrilho.webp) repeat-x center / 2.75rem 2.75rem;
  border-block: 3px solid var(--ink); }
.band-thin { height: 1.75rem; background-size: 1.75rem 1.75rem; border-top: 0; }

.on-roxo { background: var(--roxo); color: var(--tile); }
.on-roxo a:not(.btn) { color: var(--amarelo); }

/* Party block */
.festa .wrap { display: flex; flex-wrap: wrap; gap: 2.5rem 3.5rem; align-items: center; padding-top: 3.5rem; padding-bottom: 3.5rem; }
.festa-text { flex: 999 1 33.75rem; min-width: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.festa-text h1 { font-size: clamp(2.875rem, 6vw, 4.75rem); line-height: 0.98; letter-spacing: -0.02em; }
.kicker { font-weight: 700; color: var(--on-roxo-muted); }
.lede { font-size: 1.3125rem; line-height: 1.5; max-width: 32em; color: var(--on-roxo); }
.tag { align-self: flex-start; background: var(--amarelo); color: var(--ink); font-weight: 800; font-size: 1.125rem;
  padding: 0.375rem 0.875rem; transform: rotate(-2deg); }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.facts { margin: 0.75rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); gap: 1.125rem 2rem;
  border-top: 3px solid var(--rosa); padding-top: 1.375rem; }
.facts dt { font-weight: 700; color: var(--on-roxo-muted); }
.facts dd { margin: 0.125rem 0 0; color: var(--on-roxo); }
.facts dd strong { font-size: 1.1875rem; color: var(--tile); }
.facts a.tel { color: var(--tile); font-size: 1.1875rem; font-weight: 700; }
.stage { position: relative; flex: 1 1 20rem; max-width: 27.5rem; width: 100%; margin: 0 auto; aspect-ratio: 440 / 580; }
.stage > * { position: absolute; }
.stage .ring { left: 3%; top: 8%; width: 94%; height: auto; }
.stage .artist { left: 12%; top: 0; width: 76%; }
.stage .date-cup { left: -2%; top: 2%; width: 30%; height: auto; transform: rotate(-8deg); overflow: visible; }
.stage .plate { left: 4%; top: 74%; width: 92%; transform: rotate(-2deg); margin: 0; }
.stage .plate img { display: block; width: 100%; }
.stage .plate .plate-name { position: absolute; left: 15%; top: 18%; width: 70%; }

section.sec { padding-top: 5rem; padding-bottom: 4.5rem; }
.sec-title { margin-bottom: 2rem; }

/* Price board: a painted sign. */
.split { display: flex; flex-wrap: wrap; gap: 1.75rem; align-items: stretch; }
.board { flex: 1 1 27.5rem; min-width: 0; background: var(--roxo); color: var(--tile); border-radius: 0.375rem; padding: 2rem;
  box-shadow: inset 0 0 0 6px var(--roxo-2), 0 14px 24px -16px rgba(28, 8, 56, 0.6); display: flex; flex-direction: column; gap: 1.125rem; }
.board h3 { font-size: 1.875rem; }
.prices { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1rem; font-size: 1.1875rem; }
.prices li { display: flex; align-items: baseline; gap: 0.625rem; }
.prices .lead { flex-grow: 1; border-bottom: 2px dotted #6E4FA0; transform: translateY(-5px); }
.prices .price, .prices .gl { white-space: nowrap; }
.prices .price { font: 400 1.5rem/1 var(--slab); color: var(--amarelo); font-variant-numeric: tabular-nums; }
.prices .gl { font: 400 1.375rem/1.3 var(--slab); color: var(--ink); background: var(--rosa); padding: 0.125rem 0.625rem; transform: rotate(-2deg); }
.board .note { color: var(--on-roxo-muted); font-size: 1rem; }
.board .actions { margin-top: auto; }

/* The bar tab (comanda): paper with a perforated top edge. */
.slip { background: var(--paper);
  -webkit-mask: radial-gradient(circle 6px at 12px 0, transparent 98%, #000) -12px 0 / 24px 100% repeat-x;
  mask: radial-gradient(circle 6px at 12px 0, transparent 98%, #000) -12px 0 / 24px 100% repeat-x;
  border-bottom: 6px solid var(--rosa); box-shadow: 0 1px 0 var(--line); }
.split .slip { flex: 1 1 23.75rem; min-width: 0; padding: 2.5rem 2rem 2rem; display: flex; flex-direction: column; gap: 1rem; transform: rotate(0.6deg); }
.slip h3 { font-size: 1.875rem; line-height: 1.1; }
.muted { color: var(--muted); }

/* Tables (mesas) */
.mesas .wrap { padding-top: 4.5rem; padding-bottom: 5rem; display: flex; flex-direction: column; gap: 1.75rem; }
.mesas-map { align-self: center; width: 100%; max-width: 61.25rem; }
.mesa-cards { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.mesa { flex: 1 1 22.5rem; min-width: 0; background: var(--tile); color: var(--ink); border-radius: 0.375rem; padding: 1.625rem;
  display: flex; flex-direction: column; gap: 0.625rem; }
.mesa h3 { font: 800 1.25rem/1.3 var(--sans); display: flex; align-items: center; gap: 0.75rem; letter-spacing: 0; }
.dot { width: 1.375rem; height: 1.375rem; border-radius: 999px; box-shadow: inset 0 0 0 4px var(--roxo); flex: none; }
.dot-amarela { background: var(--amarelo); }
.dot-rosa { background: var(--rosa); }
.mesa .big { font: 400 2.125rem/1.1 var(--slab); font-variant-numeric: tabular-nums; }
.mesa .btn { align-self: flex-start; margin-top: 0.375rem; min-height: 3rem; }
.mesa .left { font-weight: 700; color: var(--rosa-texto); }

/* Abadá */
.abada { display: flex; flex-wrap: wrap; gap: 2rem 3.5rem; align-items: center; }
.abada-pics { flex: 1 1 23.75rem; min-width: 0; max-width: 36rem; position: relative; aspect-ratio: 20 / 19; }
.abada-pics img { position: absolute; height: auto; max-width: none; }
/* Like the flyer: abadá in front, its back peeking behind, the tecido hanging on the right.
   Sized by width so the composition holds at any column width. */
.abada-pics .front { left: 0; top: 4%; width: 46%; z-index: 2; transform: rotate(-6deg); filter: drop-shadow(12px 16px 14px rgba(28, 8, 56, 0.4)); }
.abada-pics .back { left: 31%; top: 0; width: 33%; z-index: 1; transform: rotate(3deg); filter: drop-shadow(10px 14px 12px rgba(28, 8, 56, 0.35)); }
.abada-pics .tecido { right: 0; top: 8%; width: 45%; z-index: 3; transform: rotate(6deg); filter: drop-shadow(10px 14px 12px rgba(28, 8, 56, 0.35)); }

/* Phones: the three become a deck (site.js adds .deck). Front card centred, the others peeking. */
.deck-controls { display: none; }
.abada-pics.deck { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.abada-pics.deck img { left: 50%; right: auto; top: 3%; width: 50%; cursor: grab; -webkit-touch-callout: none;
  transition: transform 420ms var(--ease-out); }
.abada-pics.deck img[data-pos="0"] { z-index: 3; transform: translate(-50%, 0) rotate(0deg); }
.abada-pics.deck img[data-pos="1"] { z-index: 2; transform: translate(-20%, 3%) rotate(8deg) scale(0.9); }
.abada-pics.deck img[data-pos="2"] { z-index: 1; transform: translate(-80%, 4%) rotate(-8deg) scale(0.86); }
.abada-pics.deck img.dragging { transition: none; cursor: grabbing; }
.abada-pics.deck + .deck-controls { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex: 1 1 100%; margin-top: -0.5rem; }
.deck-caption { display: flex; flex-direction: column; align-items: center; text-align: center; }
.deck-btn { width: 2.75rem; height: 2.75rem; border-radius: 999px; border: 2px solid var(--ink); background: var(--paper); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 140ms var(--ease-out); }
.deck-btn:active { transform: scale(0.94); }
@media (prefers-reduced-motion: reduce) { .abada-pics.deck img { transition: none; } }

.panel { background: var(--tile); padding: 1.75rem; border-radius: 0.375rem; box-shadow: 0 0 0 1px #E3DEEA; }
.abada .panel { flex: 999 1 26.25rem; min-width: 0; max-width: 34em; display: flex; flex-direction: column; gap: 1rem; }
.merch { margin: 0; display: grid; }
.merch div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.625rem 0; border-bottom: 1px dashed #CFCBD8; }
.merch dt { font-weight: 700; }
.merch dd { margin: 0; font: 400 1.375rem/1.2 var(--slab); color: var(--rosa-texto); white-space: nowrap; }

/* Partners: each logo on its own tile, the grout is the gap. */
.parceiros { margin: 0; padding: 1px; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1px; max-width: 30rem; } /* capped: a couple of partners must not stretch across the page */
.parceiros li { background: var(--paper); outline: 1px solid #CFCBD8; aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center; padding: 1.125rem; }
.parceiros img { max-width: 100%; max-height: 100%; object-fit: contain; }

.turma { background: var(--paper); border-block: 1px solid #E3DEEA; }
.turma .wrap { display: flex; flex-wrap: wrap; gap: 2.5rem 3.5rem; align-items: center; padding-top: 4.5rem; padding-bottom: 4.5rem; }
.turma img { flex: 1 1 17.5rem; min-width: 0; max-width: 23.75rem; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; }
.turma .text { flex: 999 1 26.25rem; min-width: 0; display: flex; flex-direction: column; gap: 1.125rem; max-width: 38em; font-size: 1.1875rem; }

/* FAQ */
.faq { max-width: 51.25rem; margin: 0 auto; padding: 5.5rem 1.25rem 6rem; }
.faq .panel { padding: 2rem; }
.faq-list { border-top: 2px solid var(--roxo); margin-top: 1.25rem; }
.faq details { border-bottom: 1px solid var(--line); padding: 1.125rem 0; }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-weight: 700; font-size: 1.1875rem;
  min-height: 2rem; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq .plus { font: 400 1.625rem/1 var(--slab); color: var(--rosa-texto); transition: transform 200ms var(--ease-out); }
.faq details[open] .plus { transform: rotate(45deg); }
.faq details p { margin-top: 0.625rem; color: var(--muted); }

footer.site { position: relative; overflow: hidden; }
footer.site .caps { position: absolute; right: -4.375rem; bottom: -5.625rem; width: 18.75rem; height: 18.75rem;
  background: url(/img/tampinhas.svg) no-repeat center / contain; transform: rotate(-12deg); }
footer.site .wrap { position: relative; display: flex; flex-wrap: wrap; gap: 1.75rem 4rem; padding-top: 3rem; padding-bottom: 3.5rem; font-size: 0.9375rem; color: var(--on-roxo); }
footer.site .cols { flex: 999 1 18.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
footer.site nav { flex: 1 1 13.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
footer.site nav a { color: var(--tile); }
footer.site .wordmark { color: var(--tile); font-size: 1.625rem; }
footer.site .wordmark::after { background-image: url(/img/pandeiro-escuro.svg); }

/* Forms (guest list, orders) */
.app-head { background: var(--tile); border-bottom: 1px solid rgba(28, 8, 56, 0.12); }
.app-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; }
.app-head a.back { color: var(--ink); text-decoration: none; font-weight: 600; min-height: 2.75rem; display: inline-flex; align-items: center; gap: 0.25rem; }
.form-page { max-width: 32rem; margin: 0 auto; padding: 1.25rem 0.875rem 3rem; }
.form-page .slip { padding: 2rem 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.form-head { display: flex; gap: 0.875rem; align-items: center; }
.form-head .badge { width: 4rem; height: 4rem; flex: none; padding: 0.375rem; background: var(--roxo); transform: rotate(-3deg);
  box-shadow: 0 6px 12px -6px rgba(0, 0, 0, 0.5); display: flex; align-items: center; }
.form-head h1 { font-size: 1.625rem; }
.field { display: flex; flex-direction: column; gap: 0.375rem; }
.field label, .legend { font-weight: 700; font-size: 0.9375rem; }
.field input, .field select { height: 3.25rem; border-radius: 0.625rem; border: 2px solid var(--line); background: var(--paper);
  color: var(--ink); padding: 0 0.875rem; font: 400 1.0625rem/1.4 var(--sans); }
.field input[aria-invalid="true"] { border-color: var(--erro); }
.hint { font-size: 0.8125rem; color: var(--muted); }
.err { font-size: 0.875rem; font-weight: 700; color: var(--erro); }
.check { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.9375rem; }
.check input { width: 1.5rem; height: 1.5rem; margin: 0; accent-color: var(--roxo); flex: none; }
.choices { display: grid; gap: 0.5rem; border: 0; margin: 0; padding: 0; }
.choice { display: flex; align-items: center; gap: 0.75rem; border: 2px solid var(--line); border-radius: 0.625rem; padding: 0.75rem 0.875rem; cursor: pointer; min-height: 3.25rem; }
.choice:has(input:checked) { border-color: var(--roxo); background: #F4F0FA; }
.choice input { accent-color: var(--roxo); width: 1.25rem; height: 1.25rem; margin: 0; flex-shrink: 0; }
.choice .what { flex-grow: 1; font-weight: 700; }
.choice .how-much { font-variant-numeric: tabular-nums; white-space: nowrap; }
.choice .what .hint { display: block; font-weight: 500; }
.choice[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.alert { border-radius: 0.625rem; padding: 0.875rem 1rem; font-weight: 600; }
.alert-erro { background: #FBE9E6; color: #7A1D10; }
.alert-info { background: #F1EEF5; color: var(--ink); }
.small { font-size: 0.8125rem; color: var(--muted); }

/* QR and order status pages */
.ticket { position: relative; padding: 2.25rem 1.375rem 1.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.875rem; }
.ticket .qr { width: 13.5rem; height: 13.5rem; }
.ticket .qr svg { width: 100%; height: 100%; }
.ticket .who { font: 400 1.375rem/1.2 var(--slab); text-align: center; }
.ticket dl { margin: 0.375rem 0 0; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem;
  border-top: 2px dashed var(--line); padding-top: 0.875rem; }
.ticket dt { font-size: 0.8125rem; color: var(--muted); }
.ticket dd { margin: 0.125rem 0 0; font-weight: 700; }
/* The stamp sits above the QR, never on it: covering a corner of the code stops scanners reading it. */
.ticket:has(.stamp) { padding-top: 6.5rem; }
.stamp { position: absolute; top: 0.75rem; right: 0.875rem; width: 5.25rem; height: 5.25rem; border-radius: 999px; background: var(--amarelo);
  box-shadow: 0 0 0 4px var(--tile), 0 0 0 6px var(--ink); display: flex; align-items: center; justify-content: center;
  font: 400 0.9375rem/1.05 var(--slab); text-align: center; transform: rotate(-12deg); animation: stamp 420ms var(--ease-out) 300ms both; }
@keyframes stamp { from { opacity: 0; transform: rotate(-18deg) scale(1.25); } to { opacity: 1; transform: rotate(-12deg) scale(1); } }
@media (prefers-reduced-motion: reduce) { .stamp { animation: none; } }
.used { color: var(--erro); font-weight: 800; }
.stack { display: flex; flex-direction: column; gap: 0.625rem; }
.stack .btn { width: 100%; }
.lead-p { font-size: 1.125rem; line-height: 1.6; }
.small-p { font-size: 1.0625rem; }
.push { margin-top: auto; }
.parceiros-sec { padding-bottom: 5.5rem; }
.parceiros-sec h2 { font-size: 2.25rem; }

/* Phone: country code list beside the national number. */
.phone-row { display: grid; grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr); gap: 0.5rem; }
.pay { margin: 0.375rem 0 0.25rem; padding-left: 1.125rem; overflow-wrap: anywhere; } /* IBANs must wrap on phones */

/* Receipt for abadá and tecido */
.receipt { align-items: stretch; }
.receipt-logo { width: 9rem; height: auto; align-self: center; }
.receipt > .muted { text-align: center; }
.ticket .receipt-lines { margin: 0; display: grid; grid-template-columns: 1fr; width: 100%; } /* not the ticket's two-column facts */
.receipt-lines div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px dashed #CFCBD8; }
.receipt-lines dt { font-weight: 700; }
.receipt-lines dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.receipt-lines .total dd { font: 400 1.25rem/1.2 var(--slab); color: var(--rosa-texto); }
.receipt .alert { font-weight: 400; }