/* Cabeçalho parametrizável: mesma estrutura visual das páginas internas do pré-visualizador. */
.section-page-header { --page-accent: var(--cyan); position:relative; display:grid; grid-template-columns:76px minmax(0,1fr) 275px; min-height:520px; border-bottom:1px solid var(--divider); background:radial-gradient(circle at 82% 22%,color-mix(in srgb,var(--page-accent) 14%,transparent),transparent 26%),linear-gradient(110deg,#0b0f14,#0e151d 70%,#101922); }
.tone-artists { --page-accent:var(--red); }.tone-styles,.tone-top { --page-accent:var(--gold); }.tone-cities,.tone-playlists { --page-accent:var(--cyan); }.tone-venues { --page-accent:var(--venue); }.tone-search { --page-accent:var(--cyan); }.tone-account { --page-accent:var(--cyan); }
.section-page-header::after { position:absolute; inset:0; pointer-events:none; opacity:.3; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:52px 52px; content:""; }
.page-header-rail { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:12px; padding-top:70px; border-right:1px solid var(--divider); color:var(--muted); font-family:var(--font-mono); font-size:.7rem; }.page-header-rail i { width:2px; height:108px; background:var(--page-accent); box-shadow:0 0 14px color-mix(in srgb,var(--page-accent) 65%,transparent); }
.page-header-main { position:relative; z-index:1; padding:42px clamp(30px,6vw,94px) 42px; }.page-eyebrow { display:flex; align-items:center; gap:8px; margin:0 0 16px; color:var(--medium); font-family:var(--font-mono); font-size:.8rem; letter-spacing:.13em; }.page-eyebrow::before { width:16px; height:3px; background:var(--page-accent); content:""; }.page-header-main h1 { margin:0; font-family:var(--font-display); font-size:clamp(4.4rem,8vw,8.2rem); font-weight:400; line-height:.76; letter-spacing:.012em; }.page-header-main h1 em { color:var(--page-accent); font-style:normal; }.page-description { max-width:510px; margin:20px 0 0; color:var(--medium); font-size:.9rem; line-height:1.55; }
.page-filter-stage { max-width:940px; margin-top:28px; padding-top:21px; border-top:1px solid color-mix(in srgb,var(--page-accent) 30%,var(--divider)); }.section-search { display:flex; align-items:center; gap:12px; min-height:55px; border:1px solid var(--border); padding:0 14px; background:rgba(15,23,32,.86); }.section-search i { color:var(--page-accent); font-style:normal; font-size:1.2rem; }.section-search input { flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--high); font-size:.88rem; }.section-search input::placeholder { color:var(--muted); }.section-search span { padding:4px 6px; border:1px solid var(--border); color:var(--muted); font-family:var(--font-mono); font-size:.7rem; }.filter-group { display:grid; grid-template-columns:96px minmax(0,1fr); gap:13px; align-items:start; margin-top:14px; }.filter-group>p,.top-period-bar>p { margin:8px 0 0; color:var(--muted); font-family:var(--font-mono); font-size:.7rem; letter-spacing:.09em; }.filter-chip-row { display:flex; flex-wrap:wrap; gap:6px; }.filter-chip,.top-period { border:1px solid var(--border); padding:7px 9px; background:transparent; color:var(--medium); font-family:var(--font-mono); font-size:.7rem; letter-spacing:.035em; }.filter-chip.is-active,.top-period.is-active,.filter-chip:hover,.top-period:hover { border-color:var(--page-accent); background:color-mix(in srgb,var(--page-accent) 14%,transparent); color:var(--page-accent); }.section-filter-note { display:flex; gap:8px; margin:16px 0 0 109px; color:var(--muted); font-size:.8rem; }.section-filter-note i { width:5px; height:5px; margin-top:5px; background:var(--page-accent); }
.page-header-aside { position:relative; z-index:1; display:flex; flex-direction:column; justify-content:flex-end; gap:12px; padding:42px 29px; border-left:1px solid var(--divider); background:linear-gradient(to top,color-mix(in srgb,var(--page-accent) 10%,transparent),transparent); }.page-header-aside p { margin:0; color:var(--muted); font-family:var(--font-mono); font-size:.7rem; letter-spacing:.09em; }.page-header-aside strong { max-width:190px; color:var(--high); font-family:var(--font-display); font-size:3rem; font-weight:400; line-height:.78; }.page-header-aside span { color:var(--page-accent); font-size:1.4rem; }
@media(max-width:767px) { .section-page-header { display:block; min-height:auto; }.page-header-rail,.page-header-aside { display:none; }.page-header-main { padding:62px 20px 48px; }.page-eyebrow { font-size:.7rem; }.page-header-main h1 { font-size:clamp(3.6rem,15vw,5.45rem); overflow-wrap:anywhere; }.page-description { font-size:.8rem; }.page-filter-stage { margin-top:25px; padding-top:17px; }.section-search { min-height:51px; }.filter-group { grid-template-columns:1fr; gap:6px; }.filter-group>p { margin:8px 0 0; }.section-filter-note { margin-left:0; } }

/* === Teste: cabeçalho de seção sem rail/aside, centralizado na largura do .section-pad (validação em cities-v2.html) === */
.page-header-centered { --page-accent: var(--cyan); position:relative; border-bottom:1px solid var(--divider); background:radial-gradient(circle at 82% 22%,color-mix(in srgb,var(--page-accent) 14%,transparent),transparent 26%),linear-gradient(110deg,#0b0f14,#0e151d 70%,#101922); }
.page-header-centered::after { position:absolute; inset:0; pointer-events:none; opacity:.3; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:52px 52px; content:""; }
.page-header-centered .page-header-main { position:relative; z-index:1; max-width:1440px; margin:0 auto; padding:42px 42px; }
@media(max-width:767px) { .page-header-centered .page-header-main { padding:32px 20px; } }

/* === Padrão validado em cities-v2.html, agora aplicado nas páginas internas === */
.section-heading.split-heading{margin-bottom:15px}
.page-header-main .eyebrow .live-dot{background:var(--page-accent)}
/* Escala tipográfica das páginas internas: o H1 do cabeçalho é a referência
   (--h1-display) e os títulos de seção derivam dele — H2 = 80%, H3 = 70%.
   Títulos de card (.show-card h3) e rótulos mono do rodapé ficam fora da escala. */
.compact-headings{--h1-display:calc(clamp(4.4rem,8vw,8.2rem) / 2)}
.compact-headings .page-header-main h1{font-size:var(--h1-display)}
.compact-headings .section-heading h2,
.compact-headings .newsletter-section h2,
.compact-headings .pulse-title h2{font-size:calc(var(--h1-display) * .8)}
.compact-headings .detail-box>h3{font-size:calc(var(--h1-display) * .7)}
.compact-headings .section-heading h2 span{color:#999}
@media(max-width:767px) {
  .compact-headings{--h1-display:calc(clamp(3.6rem,15vw,5.45rem) / 2)}
}

/* === Cabeçalho de busca em duas colunas (validado em artists.html) ===
   Coluna 1: eyebrow + h1 + descrição. Coluna 2: .page-filter-stage.
   Só a partir de 1024px; abaixo disso o stage volta a ser uma linha e
   recupera a borda no topo (comportamento base, definido acima). */
@media (min-width:1024px) {
  .page-header-centered .page-header-main.page-header-split { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); grid-template-rows:auto 1fr; column-gap:clamp(32px,4vw,60px); align-items:start; }
  .page-header-split > .page-eyebrow { grid-column:1; grid-row:1; }
  .page-header-split > h1 { grid-column:1; grid-row:2; }
  .page-header-split > .page-filter-stage { grid-column:2; grid-row:1 / -1; align-self:stretch; max-width:none; margin-top:0; padding:0 0 0 clamp(24px,2.6vw,38px); border-top:0; border-left:1px solid color-mix(in srgb,var(--page-accent) 30%,var(--divider)); }
}

/* ==========================================================================
   PÁGINAS DE ARTISTA E LOCAL — docs/pagina_artista_e_local.md (2026-09-05)
   Vive em internal-headers.css porque depende de --page-accent (o acento de
   cor por tone-* já usado no .page-header-centered).
   ========================================================================== */

/* --- A.3 Hero do artista: avatar, badges, redes sociais, estatísticas --- */
.entity-hero{display:grid;gap:26px}
.entity-avatar{position:relative;display:grid;place-items:center;width:104px;height:104px;margin-bottom:20px;border-radius:50%;background:var(--page-accent);overflow:hidden;color:#fff;font-family:var(--font-display);font-size:2.1rem;box-shadow:0 0 0 2px var(--page-accent),0 0 26px color-mix(in srgb,var(--page-accent) 55%,transparent);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.entity-avatar img{width:100%;height:100%;object-fit:cover}
.entity-avatar:hover{transform:scale(1.05);box-shadow:0 0 0 2px var(--page-accent),0 0 40px color-mix(in srgb,var(--page-accent) 80%,transparent)}
.entity-badges{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.entity-badge{padding:5px 9px;border:1px solid color-mix(in srgb,var(--page-accent) 45%,var(--border));color:var(--medium);font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em}
.entity-badge-country{display:flex;align-items:center;gap:5px;border-color:var(--border);color:var(--muted)}
.entity-social{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.entity-social a{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--border);color:var(--muted);transition:color .16s var(--ease),border-color .16s var(--ease),background .16s var(--ease)}
.entity-social a svg{width:15px;height:15px}
.entity-social a:hover{border-color:var(--page-accent);color:var(--high);background:color-mix(in srgb,var(--page-accent) 14%,transparent)}
.entity-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;align-self:end;background:var(--divider);border:1px solid var(--divider)}
.entity-stats div{display:grid;gap:5px;padding:15px 10px;background:rgba(11,15,20,.55);text-align:center}
.entity-stats b{font-family:var(--font-display);font-size:2.3rem;line-height:.82;font-weight:400;color:var(--high)}
.entity-stats small{color:var(--muted);font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em}
.entity-stats .is-total b{color:var(--red)}
.entity-stats .is-cities b{color:var(--cyan)}
@media(min-width:1024px){
  .entity-hero{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:48px}
  .entity-stats{grid-template-columns:1fr;min-width:180px}
  .entity-stats div{text-align:right;justify-items:end}
}

/* --- A.4 Agenda com abas (próximos / anteriores) --- */
.agenda-tabs{display:flex;gap:8px;margin:28px 0 24px;border-bottom:1px solid var(--divider)}
.agenda-tab{border:0;border-bottom:2px solid transparent;padding:11px 4px;margin-bottom:-1px;background:transparent;color:var(--muted);font-family:var(--font-mono);font-size:.8rem;font-weight:600;letter-spacing:.06em}
.agenda-tab.is-active{border-bottom-color:var(--red);color:var(--high)}
.agenda-panel[hidden]{display:none}
.agenda-list{display:grid;gap:1px;background:var(--border);border:1px solid var(--border)}
.agenda-panel.is-past .agenda-card{opacity:.75}
.agenda-card{position:relative;display:grid;grid-template-columns:90px minmax(0,1fr) auto;align-items:center;gap:16px;padding:16px;background:rgba(18,26,35,.4);color:inherit;transition:background .16s var(--ease),transform .16s var(--ease)}
.agenda-card:hover{background:#17222c;transform:translateY(-2px);outline:1px solid rgba(225,29,72,.35)}
.agenda-card.is-sold-out,.agenda-card.is-cancelled{opacity:.8}
.agenda-card-date{display:grid;place-content:center;gap:4px;min-height:70px;border:1px solid rgba(225,29,72,.5);background:rgba(225,29,72,.08);text-align:center;padding:6px}
.agenda-card-date b{color:var(--gold);font-family:var(--font-display);font-size:2.1rem;line-height:.8;font-weight:400}
.agenda-card-date span{color:var(--medium);font-family:var(--font-mono);font-size:.7rem;letter-spacing:.05em}
.agenda-card-flags{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px;justify-content:center}
.agenda-flag{padding:2px 5px;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.05em}
.agenda-flag-today{background:var(--red);color:#fff;animation:badge-pulse 1.7s var(--ease) infinite}
.agenda-flag-sold-out{background:#3a4048;color:var(--high)}
.agenda-flag-cancelled{background:#5a1220;color:#fff}
.agenda-card-body h3{margin:0;font-family:var(--font-display);font-size:1.7rem;font-weight:400;line-height:.9}
.agenda-card-meta{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px}
.agenda-card-meta span{color:var(--cyan);font-family:var(--font-mono);font-size:.7rem;letter-spacing:.05em}
.agenda-card-body p{margin:6px 0 0;color:var(--medium);font-size:.8rem}
.agenda-card-body p i{color:var(--cyan);font-style:normal}
.agenda-card-actions{display:flex;align-items:center;gap:8px}
.agenda-tickets{border:1px solid var(--border);padding:8px 12px;background:transparent;color:var(--medium);font-family:var(--font-mono);font-size:.7rem;font-weight:600;letter-spacing:.05em}
.agenda-tickets:hover{border-color:var(--red);color:var(--red)}
.agenda-tickets:disabled{border-color:var(--border);color:var(--muted);cursor:not-allowed}
.agenda-empty{display:none;padding:40px 20px;text-align:center;color:var(--muted);font-size:.8rem}
.agenda-empty[data-agenda-empty-active]{display:block}
.agenda-empty .primary-cta{display:inline-flex;width:auto;margin-top:16px}
@media(max-width:640px){
  .agenda-card{grid-template-columns:64px minmax(0,1fr);grid-template-areas:"date body" "actions actions"}
  .agenda-card-date{grid-area:date}
  .agenda-card-body{grid-area:body}
  .agenda-card-actions{grid-area:actions;justify-content:flex-end;margin-top:10px}
}

/* --- A.5 Bandas relacionadas --- */
.related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:640px){.related-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.related-grid{grid-template-columns:repeat(6,1fr)}}
.related-card{display:block;color:inherit;transition:transform .16s var(--ease)}
.related-card:hover{transform:translateY(-4px)}
.related-avatar{display:grid;place-items:center;aspect-ratio:1/1;margin-bottom:10px;background:#161d26;border:1px solid var(--border);color:var(--cyan);font-family:var(--font-display);font-size:1.8rem;overflow:hidden;transition:border-color .16s var(--ease)}
.related-avatar img{width:100%;height:100%;object-fit:cover}
.related-card:hover .related-avatar{border-color:var(--cyan)}
.related-card h3{margin:0;color:var(--high);font-family:var(--font-display);font-size:1.15rem;font-weight:400}
.related-card small{color:var(--muted);font-family:var(--font-mono);font-size:.7rem}

/* --- A.6 Alerta de shows específico do artista --- */
.entity-alert-stage{display:grid;grid-template-columns:56px minmax(0,1fr) minmax(260px,.6fr);align-items:center;gap:28px;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);border-block:1px solid var(--divider);padding:44px max(42px,calc((100vw - 1356px)/2));background:linear-gradient(100deg,rgba(225,29,72,.12),transparent 60%)}
.entity-alert-icon{display:grid;place-items:center;width:56px;height:56px;font-size:1.6rem}
.entity-alert-stage h2{margin:8px 0 0;font:clamp(2.6rem,4vw,3.6rem)/.8 var(--font-display);font-weight:400}
.entity-alert-stage h2 span{color:var(--red)}
.entity-alert-stage p{margin:0;max-width:480px;color:var(--medium);font-size:.82rem;line-height:1.6}
.entity-alert-form{display:flex;flex-wrap:wrap;gap:10px}
.entity-alert-form input{flex:1;min-width:160px;min-height:48px;border:1px solid var(--border);padding:0 16px;background:rgba(9,13,18,.5);color:var(--high);font-size:.8rem}
@media(max-width:900px){.entity-alert-stage{grid-template-columns:1fr;text-align:left;gap:20px;padding:38px 20px}.entity-alert-icon{display:none}}

/* --- B.4 Cabeçalho do local: badge de tipo, endereço, capacidade --- */
.venue-header-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.venue-type-badge{display:inline-block;flex-shrink:0;padding:6px 11px;border:1px solid var(--page-accent);color:var(--page-accent);font-family:var(--font-mono);font-size:.7rem;letter-spacing:.07em}
.venue-meta-line{display:flex;align-items:flex-start;gap:8px;margin-top:14px;color:var(--medium);font-size:.8rem;line-height:1.5}
.venue-meta-line i{flex-shrink:0;color:var(--page-accent);font-style:normal}

/* --- B.5 Galeria --- */
.venue-section-title{margin:0 0 20px;color:var(--muted);font-family:var(--font-mono);font-size:.7rem;font-weight:600;letter-spacing:.14em}
.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--border);border-left:1px solid var(--border)}
@media(min-width:640px){.gallery-grid{grid-template-columns:repeat(3,1fr)}}
.gallery-item{position:relative;display:block;width:100%;border:0;border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:10px;background:rgba(18,26,35,.33);cursor:zoom-in;transition:background .17s var(--ease),transform .17s var(--ease)}
.gallery-item:hover{z-index:1;background:#17222c;transform:translateY(-3px);outline:1px solid rgba(34,211,238,.34)}
.gallery-item img,.gallery-item video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}

/* Lightbox de ampliação (galeria do local) */
.lightbox{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:44px;background:rgba(4,7,9,.92)}
.lightbox:not([hidden]){display:flex}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain}
.lightbox-close{position:absolute;top:20px;right:20px;display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--border);background:rgba(11,15,20,.85);color:var(--high);font-size:1.4rem;line-height:1}
.lightbox-close:hover{border-color:var(--cyan);color:var(--cyan)}
@media(max-width:640px){.lightbox{padding:20px}.lightbox-close{top:12px;right:12px}}

/* --- B.6 Avaliações --- */
.reviews-count{margin-left:8px;color:var(--page-accent)}
.review-composer{margin-bottom:28px}
[data-auth="guest"] .review-form-block,[data-auth="user"] .review-login-cta{display:none}
/* Padrao generico de bloqueio por login (usado em suggest-artist.html/suggest-venue.html). */
[data-auth="guest"] [data-auth-user-only]{display:none}
[data-auth="user"] [data-auth-guest-only]{display:none}
.auth-gate-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:28px 0;padding:20px;border:1px solid var(--border);background:rgba(18,26,35,.4)}
.auth-gate-cta p{margin:0;color:var(--medium);font-size:.82rem}
.review-login-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:20px;border:1px solid var(--border);background:rgba(18,26,35,.4)}
.review-login-cta p{margin:0;color:var(--medium);font-size:.82rem}
.review-form[hidden]{display:none}
.review-form{display:grid;gap:14px;margin-top:16px;padding:22px;border:1px solid var(--border);background:rgba(18,26,35,.4)}
.review-form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.review-form-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.review-form label{display:grid;gap:6px;color:var(--muted);font-family:var(--font-mono);font-size:.7rem;letter-spacing:.05em}
.review-form input,.review-form select,.review-form textarea{border:1px solid var(--border);padding:10px 12px;background:rgba(9,13,18,.5);color:var(--high);font-size:.8rem;font-family:var(--font-body)}
.review-form textarea{min-height:100px;resize:vertical}
.review-form-actions{display:flex;justify-content:flex-end;gap:10px}
.review-form-actions .outline-cta{margin:0}
.review-form-actions .primary-cta{width:auto;margin:0;padding:0 22px}
.review-list{display:grid;gap:14px}
.review-card{border:1px solid var(--border);padding:20px;background:rgba(18,26,35,.32)}
.review-card-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.review-avatar{display:grid;place-items:center;flex-shrink:0;width:38px;height:38px;border-radius:50%;background:color-mix(in srgb,var(--cyan) 20%,transparent);color:var(--cyan);font-family:var(--font-mono);font-size:.8rem;font-weight:700}
.review-card-head b{display:block;color:var(--high);font-size:.8rem}
.review-card-head small{color:var(--muted);font-family:var(--font-mono);font-size:.7rem}
.review-card-head .star-rating{margin-left:auto}
.review-card p{margin:0 0 14px;color:var(--medium);font-size:.82rem;line-height:1.6}
.review-details{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:0;padding-top:12px;border-top:1px solid var(--divider)}
.review-details div{display:grid;gap:3px;text-align:center}
.review-details dt{color:var(--muted);font-family:var(--font-mono);font-size:.7rem;letter-spacing:.04em}
.review-details dd{margin:0;color:var(--high);font-size:.8rem}
.review-empty{padding:30px;text-align:center;color:var(--muted);font-size:.8rem}
.star-rating{display:inline-flex;align-items:center;gap:5px;color:var(--gold);font-size:.8rem;letter-spacing:1px}
.star-rating em{color:var(--muted);font-family:var(--font-mono);font-size:.7rem;font-style:normal}

/* Notas da secao de avaliacoes 15% maiores que o padrao de .star-rating/.review-details (pedido explicito) -- a nota do sidebar (.venue-rating-row) fica de fora, e outro contexto */
.venue-reviews .star-rating{font-size:.9rem}
.venue-reviews .star-rating em{font-size:.7rem}
.venue-reviews .review-details dd{font-size:.87rem}
@media(max-width:640px){.review-form-row,.review-form-grid{grid-template-columns:1fr 1fr}.review-details{grid-template-columns:repeat(3,1fr)}}

/* --- B.2/B.7 Layout de 2 colunas com sidebar fixa (reaproveita .show-layout/
     .show-sidebar/.sidebar-card/.venue-map, ja definidos para show.html) --- */
.venue-main{display:grid;gap:56px}
.venue-rating-row{display:flex;align-items:center;gap:10px}
.venue-rating-row b{color:var(--high);font-family:var(--font-mono);font-size:.9rem}
@media(max-width:1023px){.entity-hero,.venue-header-top{display:block}.entity-stats{margin-top:22px}}

/* ==========================================================================
   NOSSAS PLAYLISTS — playlists.html / playlist.html (docs/pagina_playlists.md)
   ========================================================================== */

/* --- Grid de playlists (listagem): ver css/showsderock.css -- precisa estar
     la porque index.html (teaser da home) nao carrega este arquivo --- */

/* --- Botão de plataforma (Spotify/YouTube/etc.), reaproveitado na listagem
     e no detalhe -- mesmo espirito de .microsite-link (icone de marca +
     texto), mas em CSS proprio: microsite.css e exclusivo de artist-bio.html */
.platform-links{display:grid;gap:8px}
.platform-link{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;border:1px solid var(--border);background:rgba(18,26,35,.42);color:var(--high);font-family:var(--font-mono);font-size:.8rem;font-weight:600;letter-spacing:.02em;transition:border-color .16s var(--ease),background .16s var(--ease),transform .16s var(--ease)}
.platform-link:hover{border-color:var(--cyan);background:color-mix(in srgb,var(--cyan) 10%,transparent);transform:translateY(-2px)}
.platform-link svg{width:19px;height:19px;flex-shrink:0}

/* --- Cabecalho do detalhe: badges, responsavel/colaboradores --- */
.playlist-people{display:flex;flex-wrap:wrap;gap:18px;margin-top:18px}
.playlist-people-group p{margin:0 0 8px;color:var(--muted);font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em}
.playlist-avatars{display:flex;flex-wrap:wrap;gap:8px}
.playlist-avatar{display:flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;border:1px solid var(--border);background:rgba(18,26,35,.4)}
.playlist-avatar b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:color-mix(in srgb,var(--cyan) 22%,transparent);color:var(--cyan);font-family:var(--font-mono);font-size:.7rem;font-weight:700}
.playlist-avatar span{color:var(--medium);font-size:.8rem}

/* --- Tracklist --- */
.tracklist{display:grid;gap:1px;background:var(--border);border:1px solid var(--border);margin:0;padding:0;list-style:none}
.tracklist li{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px 16px;background:rgba(18,26,35,.35)}
.tracklist b{color:var(--muted);font-family:var(--font-mono);font-size:.8rem}
.tracklist h3{margin:0;color:var(--high);font-family:var(--font-display);font-size:1.3rem;font-weight:400;line-height:1}
.tracklist p{margin:3px 0 0;color:var(--medium);font-size:.8rem}
.tracklist p a{color:var(--cyan)}
.tracklist small{color:var(--muted);font-family:var(--font-mono);font-size:.7rem;text-align:right}
@media(max-width:640px){
  .tracklist li{grid-template-columns:28px minmax(0,1fr);grid-template-areas:"num body" ". meta"}
  .tracklist b{grid-area:num}
  .tracklist h3,.tracklist p{grid-area:body}
  .tracklist small{grid-area:meta;text-align:left;margin-top:6px}
}

/* Tipografia do cabeçalho de seção nas páginas internas (2026-09-10, validado em
   docs/templates/teste-h2-condiment.html antes de aplicar).
   Escopo em .compact-headings de propósito: é a classe que o layout põe no <body>
   de toda página que não é a home, então a home segue com a Bebas em tudo. */
.compact-headings .section-number{letter-spacing:.3rem;line-height:1}
.compact-headings .section-heading h2{font-family:'Condiment',cursive;line-height:.6;letter-spacing:0;text-transform:lowercase}
/* O span cancela o lowercase herdado; a Special Gothic tem caixa baixa de verdade,
   ao contrário da Bebas, que só tem maiúsculas. */
.compact-headings .section-heading h2 span{font-family:'Special Gothic Condensed One',var(--font-display);display:inline-block;line-height:.8;letter-spacing:.012em;text-transform:uppercase}
.compact-headings .show-card h3{font-family:'Special Gothic Condensed One',var(--font-display)}

/* No mobile a escala do site leva o H2 de ~2.88rem para ~1.46rem (--h1-display cai
   pela metade e o H2 é 80% dele). A proporção é a mesma, mas a Condiment é script e
   ocupa menos altura por "em" que a Bebas: nesse tamanho fica pequena demais para
   ler. Daí a escala própria (×1.10, escolhida na validação) e o line-height maior.
   O letter-spacing de .3rem também cai: em 320px, 24 caracteres estouram a linha. */
@media(max-width:767px){
  .compact-headings .section-heading h2{line-height:.75}
  .compact-headings .section-number{letter-spacing:.16rem}
}

/* Tamanho fixo do H2 do cabeçalho de seção, em dois degraus (2026-09-10).
   Antes escalava com a largura: derivava de --h1-display, que é um clamp em vw, e
   ia de ~1.76rem (a 768px) a ~3.28rem no desktop, e de ~1.68rem a ~2.55rem abaixo
   de 768px. O valor de desktop (2.88rem) é o que a página já rendia a 1440px; o de
   mobile é ele menos 15%, como pedido — 2.88 x 0.85 = 2.45rem.
   Vale só para .section-heading: o H2 da newsletter e o do .pulse-title continuam
   derivando de --h1-display, por serem outros componentes. */
.compact-headings .section-heading h2{font-size:2.88rem}
@media(max-width:767px){
  .compact-headings .section-heading h2{font-size:2.45rem}
}

/* Cabeçalho do local abaixo de 1024px: o badge fica ao lado do eyebrow, à direita dele e
   separado por margem — não desce para a linha de baixo nem encosta no h1.
   A regra de `.entity-hero,.venue-header-top{display:block}` mais acima (bloco de 1023px)
   tirava o flex daqui: sem ele o <span> do badge virava inline, caía para baixo do eyebrow e a
   caixa ainda vazava sobre o título. Por isso este bloco devolve o `display:flex` só para o
   `.venue-header-top` — `.entity-hero` continua em block, que é o certo para ele. */
@media(max-width:1023px){
  .venue-header-top{display:flex;flex-wrap:nowrap;align-items:flex-start;justify-content:flex-start;gap:0}
  .venue-header-top>.eyebrow{flex-shrink:1;min-width:0}
  .venue-type-badge{margin:0 0 0 14px}
}

/* "Meu perfil" (/perfil). Lista de dados em <dl> e a coluna de atalhos — as duas vivem dentro
   de .detail-box, que já dá borda, fundo e padding; aqui só a tipografia interna. O .ghost-btn
   de SAIR ganha largura total para não ficar solto no fim da coluna. */
.profile-data{margin:0 0 18px;display:grid;gap:1px;background:var(--divider);border:1px solid var(--divider)}
.profile-data>div{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 14px;padding:11px 14px;background:var(--bg)}
.profile-data dt{color:var(--muted);font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase}
.profile-data dd{margin:0;color:var(--high);font-size:.88rem;text-align:right;overflow-wrap:anywhere}
.profile-links{display:grid;gap:1px;background:var(--divider);border:1px solid var(--divider)}
.profile-links a{padding:12px 14px;background:var(--bg);color:var(--cyan);font-family:var(--font-mono);font-size:.76rem;letter-spacing:.04em}
.profile-links a:hover{background:rgba(34,211,238,.08)}
.profile-exit{margin-top:22px}
.profile-exit .ghost-btn{display:flex;align-items:center;justify-content:center;width:100%}

/* Formulário de identidade do perfil. Usa o padrão dos outros formulários do site
   (.flow-body > .form-panel > .field-group), então aqui só entra o que é realmente novo: a
   caixa do prefixo "@" e as cores da checagem ao vivo do ID. Tentei um grid próprio antes e
   ficou errado -- em .section-pad o auto-fit cabia 4 colunas e o 5º campo sobrava sozinho. */
.profile-handle{margin:6px 0 0;color:var(--cyan);font-family:var(--font-mono);font-size:.9rem;letter-spacing:.04em}
.profile-status{margin:0;border-left:3px solid var(--cyan);padding:10px 14px;background:rgba(34,211,238,.08);color:var(--high);font-size:.86rem}
.profile-handle-input{display:flex;align-items:stretch;border:1px solid var(--border);background:var(--input)}
.profile-handle-input:focus-within{border-color:var(--cyan)}
.profile-handle-input i{display:grid;place-items:center;flex-shrink:0;width:34px;border-right:1px solid var(--border);color:var(--muted);font-family:var(--font-mono);font-size:.9rem;font-style:normal}
.profile-handle-input input{flex:1;min-width:0;border:0;background:transparent}
.profile-handle-input input:focus{border:0;outline:0}
/* Estados da checagem ao vivo, sobre o <small> que o .field-group já estiliza. */
.field-group small.is-ok{color:var(--cyan)}
.field-group small.is-erro{color:var(--red)}
.field-group small.is-checando{opacity:.65}
.field-group small.profile-error{color:var(--red)}

/* Duas colunas dentro do .form-panel: dados à esquerda, preferências à direita. O painel
   ocupa a largura inteira da seção (o .section-pad já limita em 1440px e dá o padding lateral),
   diferente do .flow-body de 640px usado nos formulários de coluna única. Abaixo de 768px
   empilha e a borda divisória vai do lado para o topo, porque uma borda vertical entre blocos
   empilhados não separa nada. */
.profile-body{margin-top:26px}
.profile-columns{display:grid;grid-template-columns:1fr 1fr;gap:38px}
.profile-col h3{margin:0 0 16px;color:var(--muted);font-family:var(--font-mono);font-size:.8rem;font-weight:500;letter-spacing:.11em}
.profile-col+.profile-col{border-left:1px solid var(--divider);padding-left:38px}
.profile-col .field-group:last-child{margin-bottom:0}
.profile-columns+.primary-cta{margin-top:28px}
@media(max-width:767px){
  .profile-columns{grid-template-columns:1fr;gap:26px}
  .profile-col+.profile-col{border-left:0;border-top:1px solid var(--divider);padding-top:26px;padding-left:0}
  .profile-body .primary-cta{width:100%}
}

/* ==========================================================================
   PÁGINA DO LOCAL — avaliação em 10 aspectos, curtida e modais (2026-09-15)
   ========================================================================== */

/* --- Cabeçalho em duas colunas: identidade à esquerda, números à direita ---
   Empilhadas embaixo, as estatísticas empurravam a página inteira para baixo
   sem ganhar nada em leitura. Abaixo de 900px voltam a empilhar, que é o
   único jeito de caber. */
@media (min-width:900px){
  .page-header-main.page-header-split-stats{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(28px,4vw,64px);align-items:end}
}
.venue-header-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:20px}
.venue-header-actions .entity-social{margin-top:0}

/* --- Curtir a casa ---------------------------------------------------------
   Estrela, e não coração: o coração já é o favoritar de SHOW, e usar o mesmo
   glifo para as duas coisas faria a pessoa achar que marcou o show ao curtir
   a casa. Dourado quando ativa (a cor de destaque/ranking do sistema). */
.venue-like{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);padding:8px 12px;background:transparent;color:var(--medium);font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;cursor:pointer;transition:border-color .16s var(--ease),color .16s var(--ease)}
.venue-like:hover{border-color:var(--gold);color:var(--gold)}
.venue-like.is-active{border-color:var(--gold);color:var(--gold)}
.venue-like-icon{font-size:1.05rem;line-height:1}
.venue-like[disabled]{opacity:.55;cursor:default}
/* No card da listagem o botão é só a estrela, sem caixa — o card inteiro já é
   um link e uma segunda borda ali competiria com ele. */
.venue-like-card{border:0;padding:2px;color:var(--muted);font-size:1.15rem}
.venue-like-card:hover,.venue-like-card.is-active{border:0;color:var(--gold)}

/* --- Card de resumo da avaliação (primeiro da sidebar) --------------------- */
.venue-rating-card .primary-cta{width:100%;margin-top:16px}
.venue-rating-headline{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.venue-rating-headline .star-rating{color:var(--gold);font-size:.95rem;letter-spacing:.08em}
.venue-rating-headline b{color:var(--high);font-family:var(--font-display);font-size:2.4rem;font-weight:400;line-height:.8}
.venue-rating-headline small{color:var(--muted);font-family:var(--font-mono);font-size:.68rem}
.venue-rating-groups{display:grid;gap:9px;margin:0}
.venue-rating-groups div{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px}
.venue-rating-groups dt{color:var(--medium);font-size:.78rem}
.venue-rating-groups dd{display:flex;align-items:center;gap:9px;margin:0}
/* A barra dá a leitura relativa que o número sozinho não dá: "3,2" só vira
   "baixo" quando está ao lado de um "4,5". */
.venue-rating-bar{position:relative;display:block;width:64px;height:4px;background:var(--divider)}
.venue-rating-bar::before{position:absolute;inset:0 auto 0 0;width:var(--nota,0);background:var(--gold);content:""}
.venue-rating-groups b{min-width:26px;color:var(--high);font-family:var(--font-mono);font-size:.74rem;text-align:right}
.venue-recommend{margin:15px 0 0;padding-top:13px;border-top:1px solid var(--divider);color:var(--medium);font-size:.8rem}
.venue-recommend b{color:var(--gold);font-family:var(--font-display);font-size:1.6rem;font-weight:400}
.venue-rating-empty{margin:0;color:var(--muted);font-size:.8rem;line-height:1.55}

/* --- Modais (avaliar / entrar) ---------------------------------------------
   Um modal por estado, os dois no HTML desde o início: montar o formulário por
   JS duplicaria em JavaScript a lista de aspectos que já mora no model. */
.venue-modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:24px;background:rgba(4,7,9,.82);overflow-y:auto}
.venue-modal[hidden]{display:none}
.venue-modal-box{position:relative;width:100%;max-width:430px;border:1px solid var(--border);padding:30px;background:#0b1017;box-shadow:0 24px 60px rgba(0,0,0,.6)}
.venue-modal-wide{max-width:620px;max-height:86vh;overflow-y:auto}
.venue-modal-close{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--border);background:transparent;color:var(--medium);font-size:1.3rem;line-height:1;cursor:pointer}
.venue-modal-close:hover{border-color:var(--cyan);color:var(--cyan)}
.venue-modal-eyebrow{margin:0 0 8px;color:var(--muted);font-family:var(--font-mono);font-size:.66rem;letter-spacing:.11em}
.venue-modal-box h2{margin:0 0 14px;font-family:var(--font-display);font-size:2.4rem;font-weight:400;line-height:.84}
.venue-modal-box h2 span{color:var(--page-accent,var(--venue))}
.venue-modal-box>p{margin:0 0 20px;color:var(--medium);font-size:.84rem;line-height:1.55}
.venue-modal-intro{margin-bottom:20px}
.venue-modal .review-form{margin-top:0;padding:0;border:0;background:transparent}
.review-field{display:grid;gap:5px;color:var(--muted);font-family:var(--font-mono);font-size:.7rem;letter-spacing:.05em}
.review-field>span{color:var(--high);font-size:.76rem;letter-spacing:.03em}
.review-field>small{color:var(--muted);font-family:var(--font-body);font-size:.74rem;letter-spacing:0;line-height:1.4}
.review-aspects{display:grid;gap:15px}
@media (min-width:560px){.review-aspects{grid-template-columns:1fr 1fr;gap:15px 18px}}

/* Lista de notas dentro do card de avaliação publicada: com 10 aspectos, duas
   colunas no lugar dos cinco blocos lado a lado de antes. */
.review-details{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:768px){.review-details{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* Respiro abaixo do cabeçalho de seção, agora PADRÃO (2026-09-16).
   Era exclusivo do `.split-heading`; o `.section-heading` puro ficava colado no que vinha
   depois sempre que o próximo elemento não tinha margem própria — o que só não aparecia nas
   páginas em que ele é seguido de `.section-intro`. Mesmo valor dos 15px que o split já usava,
   para não existirem dois espaçamentos de cabeçalho no site. */
.section-heading{margin-bottom:15px}

/* Consentimento de newsletter (2026-09-16). O checkbox é confirmação visual: o botão nasce
   desabilitado e só habilita com ele marcado — dois passos tanto para autorizar quanto para
   cancelar, porque as duas decisões têm efeito legal. */
.consent-check{display:flex;align-items:flex-start;gap:11px;margin:18px 0;color:var(--medium);font-size:.84rem;line-height:1.55;cursor:pointer}
.consent-check input{flex-shrink:0;width:18px;height:18px;margin-top:2px;accent-color:var(--cyan)}
.consent-box h3{margin:0 0 12px}
/* Segundo título dentro do mesmo box: separa "o que está autorizado" de "como cancelar".
   Vermelho porque é a ação destrutiva do bloco — mesma semântica de cor do resto do site. */
.consent-box-danger{margin:26px 0 0!important;padding-top:20px;border-top:1px solid var(--divider);color:var(--red)}
.consent-box>p{margin:0 0 4px;color:var(--medium);font-size:.86rem;line-height:1.6}
.consent-box small{display:block;margin-top:14px;color:var(--muted);font-size:.78rem;line-height:1.5}
/* Estado desabilitado SEM `opacity`: o texto do .ghost-btn já é var(--muted), e 45% de
   opacidade levava o contraste a ~1.8:1 — ilegível, e ainda por cima é o estado em que o botão
   nasce. O desabilitado passa a ser sinalizado pela borda tracejada e pelo cursor, mantendo o
   texto legível nos dois estados. */
/* Habilitado: botão vermelho cheio com texto branco — é a ação destrutiva do bloco, e o
   contorno vazado não dizia isso. Desabilitado continua vazado, com borda tracejada: assim os
   dois estados se distinguem pela FORMA, não só pela intensidade da cor. */
.consent-box .ghost-btn:not([disabled]){border-color:var(--red);background:var(--red);color:#fff}
.consent-box .ghost-btn:not([disabled]):hover{border-color:var(--red-hover);background:var(--red-hover);color:#fff}
.consent-box .ghost-btn[disabled]{border-style:dashed;border-color:var(--border);background:transparent;color:var(--medium);cursor:not-allowed}
.venue-modal .primary-cta[disabled]{border-color:color-mix(in srgb,var(--red) 55%,var(--border));background:color-mix(in srgb,var(--red) 45%,#0b1017);cursor:not-allowed}

/* ==========================================================================
   PÁGINA SOBRE (/sobre) — apresentação do produto (2026-09-22)

   A página deixou de ser texto institucional e virou o pitch da plataforma:
   história, números do banco em gráficos, recursos e manifesto. Todo gráfico é
   CSS puro alimentado por variável inline vinda do Blade — a CSP do site é
   `script-src 'self'` e biblioteca de gráfico por CDN não carregaria (e falharia
   em silêncio, sem erro na página). Os números chegam aqui já calculados em
   `--h`/`--w`.
   ========================================================================== */

/* --- Cabeçalho de seção simplificado ---------------------------------------
   Mesma tipografia do resto das páginas internas (Condiment no H2 + eyebrow
   .section-number), sem o trilho tricolor (::before) nem o traço (::after) do
   .section-heading padrão: numa página de apresentação a moldura competia com
   o conteúdo. Só a decoração sai — escala e ordem H2/eyebrow continuam as
   mesmas de toda página interna. */
.plain-heading{padding-left:0}
.plain-heading::before,.plain-heading::after{content:none}

/* --- Texto de apresentação -------------------------------------------------
   Coluna de leitura mais larga que a do .legal-content (820px) porque aqui o
   texto divide a seção com um gráfico, e não ocupa a página inteira. */
.pitch-lede{max-width:760px;margin:0;color:var(--medium);font-size:.95rem;line-height:1.7}
.pitch-lede strong{color:var(--high)}
.pitch-lede+.pitch-lede{margin-top:14px}
.pitch-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4vw,56px);align-items:start;margin-top:26px}
.pitch-split-text p{margin:0 0 14px;color:var(--medium);font-size:.88rem;line-height:1.7}
.pitch-split-text p:last-child{margin-bottom:0}
.pitch-split-text strong{color:var(--high)}
@media(max-width:1023px){.pitch-split{grid-template-columns:1fr;gap:32px}}

/* --- Funil "muitas fontes -> uma agenda" -----------------------------------
   O produto em uma imagem: o que entra, o que filtra, o que sai. Cada degrau é
   mais estreito que o anterior (--w) e usa o acento do papel que exerce —
   ciano descobre, dourado organiza a agenda, vermelho é o resultado. */
.funnel{display:grid;justify-items:center;gap:0;border:1px solid var(--border);padding:28px 22px;background:rgba(18,26,35,.38)}
.funnel-step{width:var(--w,100%);border:1px solid color-mix(in srgb,var(--step-accent) 45%,var(--border));border-left:3px solid var(--step-accent);padding:13px 16px;background:color-mix(in srgb,var(--step-accent) 8%,transparent);text-align:left}
.funnel-step b{display:block;color:var(--high);font-family:var(--font-display);font-size:1.7rem;font-weight:400;line-height:.9}
.funnel-step span{display:block;margin-top:5px;color:var(--muted);font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em}
.funnel-link{width:1px;height:20px;background:linear-gradient(to bottom,var(--divider),var(--border))}
.funnel-in{--step-accent:var(--cyan)}
.funnel-mid{--step-accent:var(--gold)}
.funnel-out{--step-accent:var(--red)}
.funnel-note{margin:18px 0 0;color:var(--muted);font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;line-height:1.5;text-align:center}

/* --- Números da plataforma (KPI) -------------------------------------------
   Uma figura de destaque (a agenda viva) e os demais contadores em ladrilhos.
   Mesma família dos outros números do site (.entity-stats, .about-numbers):
   Bebas nos valores, mono nos rótulos. */
.kpi-stage{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:clamp(24px,3vw,44px);align-items:center;margin-top:8px;border:1px solid var(--border);padding:clamp(22px,3vw,34px);background:linear-gradient(120deg,rgba(251,191,36,.07),transparent 58%),rgba(18,26,35,.38)}
.kpi-hero{display:grid;gap:6px;min-width:180px}
.kpi-hero b{color:var(--gold);font-family:var(--font-display);font-size:clamp(4.2rem,7vw,6.4rem);font-weight:400;line-height:.78}
.kpi-hero span{color:var(--high);font-family:var(--font-mono);font-size:.74rem;letter-spacing:.09em}
.kpi-hero small{color:var(--muted);font-size:.78rem;line-height:1.5}
.kpi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--divider);border:1px solid var(--divider)}
.kpi-tile{display:grid;gap:3px;padding:16px 14px;background:var(--bg)}
.kpi-tile b{color:var(--high);font-family:var(--font-display);font-size:2.2rem;font-weight:400;line-height:.85}
.kpi-tile span{color:var(--muted);font-family:var(--font-mono);font-size:.68rem;letter-spacing:.07em}
@media(max-width:1023px){.kpi-stage{grid-template-columns:1fr}.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* --- Gráficos ---------------------------------------------------------------
   Um dado por gráfico, uma cor por gráfico — e a cor é a do assunto no sistema
   visual (dourado para datas, ciano para cidades), nunca uma escala por posição
   no ranking: pintar a barra maior mais forte repetiria em cor o que o
   comprimento já diz. Rótulo e valor ficam em cor de texto; a identidade vem da
   barra ao lado, não da tipografia. Sem linhas de grade: todo valor está
   rotulado, e grade em cima disso é ruído. */
.chart-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px}
@media(max-width:900px){.chart-row{grid-template-columns:1fr}}
.chart-card{--page-accent:var(--cyan);margin:18px 0 0;border:1px solid var(--border);padding:22px 24px 20px;background:rgba(18,26,35,.38)}
.chart-row .chart-card{margin:0}
.chart-card figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:20px}
.chart-card figcaption b{color:var(--high);font-family:var(--font-mono);font-size:.76rem;font-weight:600;letter-spacing:.1em}
.chart-card figcaption span{color:var(--muted);font-family:var(--font-mono);font-size:.66rem;letter-spacing:.06em;text-align:right}
/* Dourado é o acento de data/ranking do sistema; é o único gráfico cujo assunto
   não tem uma classe tone-* própria para reaproveitar. */
.tone-agenda{--page-accent:var(--gold)}

/* Colunas (agenda por mês): barra de 20px (teto de 24px), topo arredondado em
   4px, base reta sobre a linha de base, valor na tampa da coluna. */
/* O padding-top é o espaço do rótulo da coluna mais alta: ele fica ACIMA da tampa
   (bottom:calc(100% + 7px)) e, sem essa folga, encostaria na legenda do gráfico. */
.chart-columns{display:flex;align-items:flex-end;gap:clamp(6px,1.4vw,18px);padding-top:24px;border-bottom:1px solid var(--divider)}
.chart-col{display:flex;flex:1;flex-direction:column;align-items:center;min-width:0}
.chart-col-track{display:flex;align-items:flex-end;justify-content:center;width:100%;height:150px}
.chart-col-track i{position:relative;width:20px;height:var(--h,0%);min-height:2px;border-radius:4px 4px 0 0;background:var(--page-accent)}
.chart-col-track i b{position:absolute;bottom:calc(100% + 7px);left:50%;color:var(--high);font-family:var(--font-mono);font-size:.72rem;font-weight:600;font-variant-numeric:tabular-nums;transform:translateX(-50%)}
.chart-col small{margin-top:9px;color:var(--muted);font-family:var(--font-mono);font-size:.66rem;letter-spacing:.06em}
.chart-col-empty i{background:var(--divider)}
.chart-col-empty i b{color:var(--muted)}

/* Barras horizontais (cidades, estilos): trilho em um passo mais claro da
   própria cor, barra de 10px com a ponta de dado arredondada e a base reta. */
.chart-bars{display:grid;gap:11px;margin:0;padding:0;list-style:none}
.chart-bars li{min-width:0}
.chart-bars a{display:grid;grid-template-columns:minmax(0,1fr) 34px;gap:4px 12px;color:inherit}
.chart-bars a:hover .chart-bar-label{color:var(--high)}
.chart-bars a:hover .chart-bar-track i{filter:brightness(1.15)}
.chart-bar-label{min-width:0;overflow:hidden;color:var(--medium);font-size:.8rem;line-height:1.3;text-overflow:ellipsis;white-space:nowrap;transition:color .16s var(--ease)}
.chart-bar-value{color:var(--high);font-family:var(--font-mono);font-size:.74rem;font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.chart-bar-track{grid-column:1 / -1;display:block;width:100%;height:10px;background:color-mix(in srgb,var(--page-accent) 12%,transparent)}
.chart-bar-track i{display:block;width:var(--w,0%);min-width:3px;height:100%;border-radius:0 4px 4px 0;background:var(--page-accent);transition:filter .16s var(--ease)}
.chart-empty{margin:0;padding:26px 0;color:var(--muted);font-size:.8rem;text-align:center}

/* --- Cartões de recurso ("o que você pode fazer") ---------------------------
   Ícone em caixa com o acento do destino, número marca-dagua e realce em
   gradiente no canto — o acento segue o papel de sempre: ciano descobre,
   vermelho age, dourado é agenda/alerta, roxo é casa de show. */
.pitch-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px}
@media(max-width:1023px){.pitch-features{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.pitch-features{grid-template-columns:1fr}}
.feature-card{--card-accent:var(--cyan);position:relative;display:flex;flex-direction:column;gap:12px;overflow:hidden;border:1px solid var(--border);padding:24px 22px 22px;background:rgba(18,26,35,.38);color:inherit;transition:border-color .17s var(--ease),transform .17s var(--ease),background .17s var(--ease)}
.feature-card::before{position:absolute;top:-40px;right:-40px;width:150px;height:150px;border-radius:50%;opacity:.6;background:radial-gradient(circle,color-mix(in srgb,var(--card-accent) 22%,transparent),transparent 70%);pointer-events:none;content:""}
.feature-card:hover{border-color:color-mix(in srgb,var(--card-accent) 60%,var(--border));background:#17222c;transform:translateY(-4px)}
.feature-card>*{position:relative}
.feature-card-num{position:absolute;top:14px;right:16px;color:rgba(234,240,246,.14);font-family:var(--font-display);font-size:2.6rem;font-weight:400;line-height:.8}
.feature-icon{display:grid;place-items:center;width:44px;height:44px;border:1px solid color-mix(in srgb,var(--card-accent) 50%,var(--border));background:color-mix(in srgb,var(--card-accent) 12%,transparent);color:var(--card-accent)}
.feature-icon svg{width:20px;height:20px}
.feature-card h3{margin:0;color:var(--high);font-family:'Special Gothic Condensed One',var(--font-display);font-size:1.5rem;font-weight:400;line-height:1}
.feature-card p{margin:0;color:var(--medium);font-size:.82rem;line-height:1.6}
.feature-card small{margin-top:auto;padding-top:6px;color:var(--card-accent);font-family:var(--font-mono);font-size:.66rem;font-weight:600;letter-spacing:.08em}
.feature-red{--card-accent:var(--red)}
.feature-gold{--card-accent:var(--gold)}
.feature-venue{--card-accent:var(--venue)}

/* --- Etapas do pipeline ----------------------------------------------------
   Quatro passos ligados pela mesma linha: a sequência é a informação, então o
   fio que liga faz parte do desenho e não é enfeite. */
.pitch-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:22px;border-top:1px solid var(--divider)}
.pitch-step{position:relative;padding:26px 22px 4px 0}
.pitch-step::before{position:absolute;top:-4px;left:0;width:7px;height:7px;background:var(--page-accent,var(--cyan));content:""}
.pitch-step b{display:block;color:var(--muted);font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em}
.pitch-step h3{margin:8px 0;color:var(--high);font-family:'Special Gothic Condensed One',var(--font-display);font-size:1.45rem;font-weight:400;line-height:1}
.pitch-step p{margin:0;color:var(--medium);font-size:.82rem;line-height:1.6}
@media(max-width:900px){.pitch-steps{grid-template-columns:1fr;border-top:0}.pitch-step{border-top:1px solid var(--divider);padding:22px 0 6px}}

/* --- Faixa do manifesto ----------------------------------------------------
   Sangria total até a borda da viewport, mesma técnica das faixas da página do
   show (100vw + margem negativa + padding centralizando o miolo de 1356px):
   `margin:0 -42px` pararia no limite do pai, não da tela. */
.manifesto-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);align-items:center;gap:clamp(24px,4vw,56px);width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);border-block:1px solid var(--divider);padding:clamp(38px,5vw,58px) max(42px,calc((100vw - 1356px)/2));background:linear-gradient(100deg,rgba(225,29,72,.14),transparent 62%)}
.manifesto-stage blockquote{max-width:760px;margin:0}
.manifesto-stage blockquote p{margin:0 0 16px;color:var(--high);font-family:'Condiment',cursive;font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.15;text-transform:lowercase}
.manifesto-stage blockquote p em{color:var(--red);font-style:normal}
.manifesto-stage blockquote footer{color:var(--medium);font-size:.86rem;line-height:1.65}
.manifesto-stage blockquote footer strong{color:var(--high)}
.manifesto-cta{display:inline-flex;flex-shrink:0;align-items:center;gap:9px;border:1px solid var(--red);padding:14px 20px;color:var(--high);font-family:var(--font-mono);font-size:.74rem;font-weight:600;letter-spacing:.08em;transition:background .16s var(--ease),transform .16s var(--ease)}
.manifesto-cta:hover{background:var(--red);color:#fff;transform:translateX(3px)}
@media(max-width:900px){.manifesto-stage{grid-template-columns:1fr;padding-right:20px;padding-left:20px}}

/* --- Quem faz (grupo de empresas) ------------------------------------------ */
.org-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px}
@media(max-width:900px){.org-grid{grid-template-columns:1fr}}
.org-card{border:1px solid var(--border);border-top:2px solid var(--page-accent,var(--cyan));padding:22px 20px;background:rgba(18,26,35,.38)}
.org-card b{display:block;color:var(--high);font-family:'Special Gothic Condensed One',var(--font-display);font-size:1.45rem;font-weight:400;line-height:1.05}
.org-card small{display:block;margin:7px 0 12px;color:var(--muted);font-family:var(--font-mono);font-size:.68rem;letter-spacing:.05em}
.org-card p{margin:0;color:var(--medium);font-size:.82rem;line-height:1.6}
.org-note{max-width:820px;margin:20px 0 0;color:var(--medium);font-size:.84rem;line-height:1.7}
.org-note a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px}
.org-note strong{color:var(--high)}