/* Direção B — Praça. Cartaz de gráfica popular, alto-falante de poste, terra roxa. */
@font-face { font-family: "Big Shoulders Display"; src: url(fonts/big-shoulders-display-latin-900-normal.woff2) format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Big Shoulders Display"; src: url(fonts/big-shoulders-display-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Bitter"; src: url(fonts/bitter-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Bitter"; src: url(fonts/bitter-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Bitter"; src: url(fonts/bitter-latin-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --papel: #f1e6cf;
  --papel-2: #e8d9bb;
  --terra: #a13b1a;
  --terra-2: #7f2c12;
  --mato: #1f3f2c;
  --mato-2: #2c5a3f;
  --milho: #e4a72a;
  --tinta: #24190f;
  --tinta-2: #5a4836;
  --linha: #c9b48f;
  --poster: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --texto: "Bitter", Georgia, serif;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 120px;
  --gutter: clamp(18px, 4vw, 56px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; color: var(--tinta); font: 400 17px/1.6 var(--texto);
  background-color: var(--papel);
  /* papel de gráfica: fibra bem leve */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .12 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ol, ul, dl, dd { margin: 0; }
ol, ul { list-style: none; padding: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--milho); outline-offset: 3px; }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* faixa de cima: pauta em letra de cartaz */
.faixa { background: var(--mato); color: var(--milho); overflow: hidden; white-space: nowrap; border-bottom: 3px solid var(--tinta); }
.faixa p { display: inline-flex; font: 700 16px/1 var(--poster); letter-spacing: .14em; text-transform: uppercase; padding: 9px 0 8px; animation: corre 110s linear infinite; }
.faixa:hover p { animation-play-state: paused; }
.faixa span { padding: 0 18px; }
.faixa span::after { content: "✦"; display: inline-block; margin-left: 36px; color: var(--papel); font-size: 10px; transform: translateY(-2px); }
@keyframes corre { to { transform: translateX(-33.333%); } }

.top { border-bottom: 3px solid var(--tinta); }
.top-in { display: flex; align-items: center; height: 72px; gap: var(--s6); }
.brand { display: inline-flex; align-items: center; gap: var(--s3); min-height: 48px; text-decoration: none; }
.brand-mark { width: 44px; height: 44px; flex: none; }
.horn { fill: var(--terra); }
.pole, .rim { fill: var(--tinta); }
.bell { fill: var(--milho); }
.brand-word { display: inline-grid; font: 900 22px/.92 var(--poster); text-transform: uppercase; letter-spacing: .02em; }
.brand-word span:last-child { color: var(--terra); }
.nav { margin-left: auto; display: flex; gap: var(--s5); font: 700 17px/1 var(--poster); text-transform: uppercase; letter-spacing: .08em; }
.nav a { text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; padding: var(--s2) 0; border-bottom: 3px solid transparent; }
.nav a:hover { border-color: var(--terra); }

/* ---------- cartaz ---------- */
.cartaz { border-bottom: 3px solid var(--tinta); }
.cartaz-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.poster { padding: var(--s6) 0 var(--s7); min-width: 0; }
.pre { font: italic 400 clamp(22px, 2.6vw, 34px)/1.1 var(--texto); color: var(--tinta-2); }
.city-wrap { display: block; margin: var(--s1) 0 0; line-height: 0; }
.city {
  display: inline-block; font: 900 120px/.82 var(--poster); text-transform: uppercase; color: var(--terra);
  letter-spacing: -.005em; padding-top: .06em; overflow-wrap: anywhere; line-height: .82;
}
.post { font: 900 clamp(34px, 4.6vw, 64px)/.9 var(--poster); text-transform: uppercase; color: var(--mato); margin-top: var(--s3); }
.post span:last-child { color: var(--tinta); }
.lead { font-size: 18px; line-height: 1.6; max-width: 31em; margin-top: var(--s5); color: var(--tinta-2); }
.lead::first-line { color: var(--tinta); }

.ask { margin-top: var(--s6); max-width: 640px; }
.ask label { display: block; font: 700 20px/1 var(--poster); text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--s3); }
.ask-row { display: grid; grid-template-columns: minmax(0, 1fr); border: 3px solid var(--tinta); background: #fbf5e8; }
.ask input {
  appearance: none; border: 0; background: transparent; min-width: 0;
  font: 900 30px/1 var(--poster); text-transform: uppercase; color: var(--terra); letter-spacing: .02em;
  padding: 16px 16px 14px;
}
.ask input::placeholder { color: #8a7556; }
.ask input:focus { outline: none; background: #fffaf0; }
.ask-row:focus-within { box-shadow: 6px 6px 0 var(--milho); }
.go {
  display: inline-grid; align-content: center; text-decoration: none; background: var(--mato); color: var(--papel);
  font: 900 24px/1 var(--poster); text-transform: uppercase; letter-spacing: .03em; padding: 16px 22px 14px;
  border-top: 3px solid var(--tinta); transition: background .15s;
}
.go:hover { background: var(--mato-2); }
.go:active { transform: translate(1px, 1px); }
.go-sub { font: italic 400 16px/1.3 var(--texto); text-transform: none; letter-spacing: 0; color: var(--milho); margin-top: 3px; }
.fine { font-size: 17px; color: var(--tinta-2); margin-top: var(--s3); }
.ouvir { display: none; margin-top: var(--s4); border: 0; background: none; padding: 12px 0 8px; min-height: 48px; cursor: pointer; color: var(--terra); font: 700 22px/1 var(--poster); text-transform: uppercase; letter-spacing: .06em; border-bottom: 3px solid var(--terra); }
.ouvir::before { content: ""; display: inline-block; width: 0; height: 0; border: 7px solid transparent; border-left: 11px solid currentColor; border-right: 0; margin-right: 10px; transform: translateY(1px); }
.ouvir span { font: italic 400 16px var(--texto); text-transform: none; letter-spacing: 0; color: var(--tinta-2); margin-left: 6px; }
.has-js .ouvir { display: inline-block; }

/* ---------- amostra ---------- */
.ouca { --p: 0; background: var(--tinta); color: var(--papel); padding: var(--s5) var(--s5) var(--s4); margin: 0 calc(-1 * var(--gutter)); min-width: 0; }
.ouca-kicker { font: 700 17px/1 var(--poster); text-transform: uppercase; letter-spacing: .14em; color: var(--milho); }
.ouca-title { font: 900 38px/.95 var(--poster); text-transform: uppercase; margin-top: var(--s3); }
.ouca-title span { display: block; font: italic 400 17px/1.4 var(--texto); text-transform: none; color: #cdbf9f; margin-top: var(--s2); }
.ouca audio { width: 100%; margin-top: var(--s4); }
.has-js-player audio { display: none; }
.play-row { display: none; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s4); margin-top: var(--s5); }
.has-js-player .play-row { display: grid; }
.play { width: 72px; height: 72px; border: 0; background: var(--milho); color: var(--tinta); cursor: pointer; display: grid; place-items: center; box-shadow: 4px 4px 0 var(--terra); transition: transform .08s, box-shadow .08s; }
.play:hover { background: #f0b843; }
.play:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--terra); }
.play svg { width: 26px; height: 26px; fill: currentColor; }
.play .i-pause, .is-playing .play .i-play { display: none; }
.is-playing .play .i-pause { display: block; }
.bar { position: relative; height: 44px; cursor: pointer; touch-action: none; }
.bar-track { position: absolute; left: 0; right: 0; top: 50%; height: 12px; margin-top: -6px; background: #4a3a29; }
.bar-fill { position: absolute; inset: 0; background: var(--milho); transform-origin: left; transform: scaleX(var(--p)); }
.bar-ticks i { position: absolute; top: 2px; height: 8px; left: calc(var(--x) * 100%); width: 2px; background: #8a7556; }
.time { font: 700 20px/1 var(--poster); letter-spacing: .06em; font-variant-numeric: tabular-nums; color: #cdbf9f; }
.time [data-now] { color: var(--papel); }
.is-loading .time { opacity: .5; }

.programa { margin-top: var(--s5); border-top: 2px solid #4a3a29; }
.row { display: grid; grid-template-columns: 56px 1fr; gap: var(--s3); padding: 10px var(--s2) 10px 0; border-bottom: 1px solid #3c2f22; text-decoration: none; font-size: 17px; line-height: 1.5; min-height: 48px; transition: background .15s, color .15s; }
.row:hover { background: #33271b; }
.row.is-current { background: var(--milho); color: var(--tinta); }
.row.is-current .tc, .row.is-current cite { color: var(--tinta); }
.tc { font: 700 17px/1.3 var(--poster); letter-spacing: .06em; color: var(--milho); padding-left: var(--s2); }
.what b { font: 900 18px/1 var(--poster); text-transform: uppercase; letter-spacing: .04em; }
.what cite { display: block; font-style: italic; font-size: 16px; color: #b9a988; margin-top: 2px; }
.ouca-note { font-size: 17px; color: #b9a988; margin-top: var(--s4); }

/* ---------- seções ---------- */
.sec { padding: var(--s8) 0; border-bottom: 3px solid var(--tinta); }
.sec-title { font: 900 clamp(44px, 6vw, 88px)/.86 var(--poster); text-transform: uppercase; margin-bottom: var(--s6); }
.passos { display: grid; gap: var(--s6); }
.passos li { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s5); align-items: start; }
.passos .n { grid-row: span 2; font: 900 120px/.78 var(--poster); color: var(--terra); }
.passos h3 { font: 900 32px/1 var(--poster); text-transform: uppercase; margin-bottom: var(--s2); }
.passos p { color: var(--tinta-2); max-width: 26em; }

.sec-pauta { background: var(--papel-2); }
.pauta { display: grid; gap: var(--s7); }
.entra li { font: 900 clamp(40px, 5vw, 64px)/1 var(--poster); text-transform: uppercase; color: var(--mato); border-bottom: 2px solid var(--linha); padding: var(--s2) 0 var(--s3); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s4); }
.entra small { font: italic 400 18px/1.3 var(--texto); text-transform: none; color: var(--tinta-2); }
.fora { align-self: start; }
.nao li { font: 900 clamp(40px, 5vw, 64px)/1 var(--poster); text-transform: uppercase; color: #7d6747; text-decoration: line-through; text-decoration-thickness: 6px; text-decoration-color: var(--terra); padding: var(--s2) 0; }
.fora p { color: var(--tinta-2); margin-top: var(--s4); max-width: 22em; }

.sec-preco { background: var(--terra); color: var(--papel); }
.sec-preco .sec-title { color: var(--milho); }
.preco-big { display: grid; gap: var(--s5); }
.gratis { font: 900 clamp(88px, 15vw, 220px)/.8 var(--poster); text-transform: uppercase; }
.gratis span { display: block; }
.gratis span:last-child { color: var(--milho); }
.depois { font-size: 20px; line-height: 1.5; max-width: 26em; }
.depois strong { white-space: nowrap; font-weight: 700; background: var(--tinta); color: var(--milho); padding: 0 6px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.ficha { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 2px solid var(--papel); margin-top: var(--s7); }
.ficha div { padding: var(--s4) var(--s3) var(--s4) 0; border-bottom: 1px solid rgba(241,230,207,.35); }
.ficha dt { font: 700 17px/1 var(--poster); text-transform: uppercase; letter-spacing: .12em; color: var(--milho); margin-bottom: 6px; }
.ficha dd { font-size: 17px; }
.legal { font-size: 17px; margin-top: var(--s5); max-width: 42em; color: #f3dcc6; }

.faq details { border-bottom: 2px solid var(--linha); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s4) 0; font: 900 28px/1.05 var(--poster); text-transform: uppercase; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 36px; line-height: .8; color: var(--terra); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { padding-bottom: var(--s5); max-width: 40em; color: var(--tinta-2); }

.fim { background: var(--mato); color: var(--papel); padding: var(--s8) 0; }
.fim-line { font: 900 clamp(56px, 9vw, 140px)/.85 var(--poster); text-transform: uppercase; overflow-wrap: anywhere; }
.fim-line span { color: var(--milho); }
.fim-sub { font: italic 400 20px/1.4 var(--texto); margin: var(--s4) 0 var(--s6); color: #d9cfb6; }
.go-light { background: var(--milho); color: var(--tinta); border: 3px solid var(--tinta); box-shadow: 6px 6px 0 var(--tinta); }
.go-light:hover { background: #f0b843; }
.go-light .go-sub { color: var(--terra-2); }

.pe { background: var(--tinta); color: #cdbf9f; font-size: 17px; }
.pe a { display: inline-flex; align-items: center; min-height: 44px; color: var(--papel); font-weight: 700; }
.pe-in { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--s3); padding-top: var(--s5); padding-bottom: var(--s5); }
.brand-word-sm { font-size: 18px; color: var(--papel); }
.brand-word-sm span:last-child { color: var(--milho); }

@media (min-width: 1100px) { .has-js .ouvir { display: none; } }
@media (max-width: 719px) {
  .nav { display: none; }
  .top-in { height: 60px; }
  .poster { padding-top: var(--s5); padding-bottom: var(--s6); }
  .lead { font-size: 18px; }
  .ask input { font-size: 26px; }
}
@media (min-width: 560px) {
  .ask-row { grid-template-columns: 1fr auto; }
  .go { border-top: 0; border-left: 3px solid var(--tinta); }
  .fim .go { border: 3px solid var(--tinta); }
}
@media (min-width: 900px) {
  .passos { grid-template-columns: repeat(3, 1fr); gap: var(--s6); }
  .pauta { grid-template-columns: 7fr 5fr; gap: var(--s8); }
  .preco { display: grid; grid-template-columns: 7fr 5fr; column-gap: var(--s8); align-items: end; }
  .preco .sec-title { grid-column: 1 / -1; }
  .ficha { margin-top: 0; }
  .legal { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .cartaz-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s7); }
  .poster { padding: var(--s7) 0 var(--s8); }
  .ouca { margin: 0 calc(-1 * var(--gutter)) 0 0; padding: var(--s6) var(--gutter) var(--s5) var(--s6); border-left: 3px solid var(--tinta); }
}
@media (max-width: 719px) { .faixa p { animation-duration: 140s; } }
@media (prefers-reduced-motion: reduce) { .faixa p { animation: none; } html { scroll-behavior: auto; } * { transition: none !important; } }

/* ---------- 404 ---------- */
.nf { padding: var(--s8) 0 var(--s9); border-bottom: 3px solid var(--tinta); }
.nf .nf-k { font: 700 18px/1 var(--poster); text-transform: uppercase; letter-spacing: .14em; color: var(--terra); }
.nf h1 { font: 900 clamp(64px, 12vw, 180px)/.84 var(--poster); text-transform: uppercase; color: var(--mato); margin: var(--s4) 0 var(--s5); }
.nf p { font-size: 19px; color: var(--tinta-2); max-width: 30em; }
.nf .go { margin-top: var(--s6); border: 3px solid var(--tinta); }