estourar). As regras por
componente (.btn svg, .badge svg, .icon-circle svg…) são mais específicas e
continuam valendo. */
svg { width: 18px; height: 18px; flex-shrink: 0; }
/* Vídeo no lugar de foto (A8) — preenche o card como a imagem */
.media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.has-vid { position: relative; }
.vid-tag { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 4px; background: rgba(42,10,27,.6); color: #fff; font-size: .66rem; font-weight: 600; padding: 3px 8px; border-radius: 999px; backdrop-filter: blur(4px); }
.vid-tag svg { width: 11px; height: 11px; }
/* Badge "incluído no plano" (A2) */
.badge-incluso { background: var(--ok-bg); color: var(--ok); border-color: #bcd3ba; }
/* Botão "Continuar com Google" (A4 — mock) */
.btn-google { background: #fff; color: #3c4043; border-color: var(--border-strong); }
.btn-google:hover { background: #fff; border-color: var(--sage); box-shadow: var(--shadow-sm); }
.g-logo { width: 18px; height: 18px; }
.or-sep { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--ink-faint); font-size: .8rem; }
.or-sep::before, .or-sep::after { content: ""; flex: 1; height: 1px; background: var(--border); }
/* Segmented control (A6 — Semana ↔ 3 dias) */
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
.seg button { border: 0; background: transparent; padding: 8px 16px; border-radius: 999px; font-size: .85rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; font-family: inherit; transition: .15s; }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
/* Seletor de unidade (A6) */
.uni-pick { display: inline-flex; align-items: center; gap: 4px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 999px; padding: 3px 8px 3px 12px; color: var(--terra); }
.uni-pick select { color: var(--ink); cursor: pointer; max-width: 70vw; }
.uni-pick svg { width: 17px; height: 17px; }
/* Planos — 3º destacado (A5) */
.plan-card { transition: transform .2s ease, box-shadow .2s ease; }
.plan-hot { border-color: var(--terra); box-shadow: var(--shadow); background: linear-gradient(180deg, var(--terra-soft) 0%, var(--surface) 24%); }
.plan-hot:hover { transform: translateY(-3px); }
.plan-selo { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--terra); color: #fff; border-color: var(--terra); box-shadow: var(--shadow-sm); white-space: nowrap; }
/* Comanda do café por mesa (A9) */
.comanda-bar { border: 1px solid var(--terra); }
/* ============================================================================
v3 — polimento premium: reveal on scroll, micro-zoom, skeleton, tablet
========================================================================== */
/* Seções entram suaves ao rolar (o app.js adiciona .rv/.in só em troca de rota).
v4: percurso menor (12px) e tempo maior — o movimento tem que passar
despercebido; quem nota a animação já é animação demais. */
.rv { opacity: 0; transform: translateY(12px); transition: opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1); }
.rv.in { opacity: 1; transform: none; }
/* Hero respira: zoom lento de entrada na foto */
.hero-media img { animation: heroZoom 14s ease-out both; }
@keyframes heroZoom { from { transform: scale(1.06); } to { transform: scale(1); } }
/* Fotos ganham zoom sutil no hover do card */
.media img, .media video { transition: transform .9s cubic-bezier(.16,1,.3,1); }
.card-hover:hover .media img, .card-hover:hover .media video { transform: scale(1.045); }
/* Toques mais limpos + foco visível para teclado */
a, button { -webkit-tap-highlight-color: transparent; }
.chip:focus-visible, .icon-btn:focus-visible, .qty-btn:focus-visible, .seat:focus-visible,
.nav-links a:focus-visible, .seg button:focus-visible { outline: 2px solid var(--sage-deep); outline-offset: 2px; }
/* Skeleton shimmer (primeiro paint + listas assíncronas) */
.sk { position: relative; overflow: hidden; background: var(--surface-2); border-radius: var(--radius); }
.sk::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation: shimmer 1.3s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
/* grade dos esqueletos por rota (agenda / vitrine) */
.sk-grade { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
/* Badge de visita realizada (Conta) */
.badge-done { background: var(--ok-bg); color: var(--ok); border-color: #bcd3ba; }
/* Tablet (761–1020px): grids intermediários + agenda deslizável com snap */
@media (max-width: 1020px) and (min-width: 761px) {
.four-col { grid-template-columns: repeat(2,1fr) !important; }
.three-col { grid-template-columns: repeat(2,1fr) !important; }
.agenda-grid { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; -webkit-overflow-scrolling: touch; }
.agenda-grid > div { min-width: 225px; flex: 1 0 225px; scroll-snap-align: start; }
}
@media (max-width: 760px) {
.sk-grade { grid-template-columns: 1fr; }
.ff-label { min-width: 100%; padding-top: 0; }
}
/* ---- Responsivo ---- */
@media (max-width: 1180px) {
.nav-links { display: none; }
.nav-burger { display: inline-flex; }
}
@media (max-width: 900px) {
.seatmap { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 760px) {
.hero-grid, .aula-grid, .ck-grid, .cafe-grid, .foot-grid, .grid-cards,
.conta-grid, .fam-grid, .agenda-grid, .exp-row, .two-col, .three-col, .four-col {
grid-template-columns: 1fr !important;
}
.exp-row > .media { order: 0 !important; min-height: 240px; }
.wrap, .wrap-narrow { padding-left: 20px; padding-right: 20px; }
.hero { min-height: 78vh; }
h1 { font-size: clamp(2.4rem, 11vw, 3.2rem); }
}
@media (max-width: 560px) {
.nav-inner { gap: 8px; height: 64px; }
.logo { font-size: 1.12rem; white-space: nowrap; }
.logo .mark { width: 30px; height: 30px; }
.nav-right { gap: 6px; }
.credit-chip, .nav-user { display: none; } /* saldo/entrar ficam na gaveta e na Minha Conta */
.nav-right .btn-sm { padding: 8px 12px; font-size: .8rem; }
.protobar { font-size: .72rem; gap: 8px; padding: 7px 12px; }
.cart-fab { left: 16px; right: 16px; transform: none; }
.cart-fab .btn { width: 100%; }
}
/* ============================================================================
PWA — casca de app (Fase A): abas de baixo no modo instalado + Meu Passe
========================================================================== */
/* ---- abas de baixo: só aparecem quando aberto como app (tela de início) ---- */
.apptabs { display: none; }
html.is-app .apptabs {
display: flex;
position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
background: color-mix(in srgb, var(--surface) 92%, transparent);
-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
border-top: 1px solid var(--border);
padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
}
html.is-app body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
html.is-app .protobar { display: none; } /* no app instalado, some a régua de protótipo */
.apptab {
flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
padding: 6px 2px; border-radius: 10px; color: var(--ink-faint);
font-size: .66rem; font-weight: 600; letter-spacing: .02em; text-decoration: none;
}
.apptab svg { width: 22px; height: 22px; }
.apptab.on { color: var(--terra); }
.apptab-passe svg { width: 24px; height: 24px; }
/* ---- Meu Passe ---- */
.passe-card { padding: 22px 22px 20px; text-align: center; }
.passe-head { display: flex; gap: 10px; align-items: center; justify-content: center; }
.passe-head .mark {
display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px;
background: var(--sage-deep); color: var(--ct-offwhite); font-family: var(--font-serif);
font-style: italic; font-weight: 600; font-size: 1.05rem;
}
.passe-qr { display: grid; place-items: center; margin: 18px auto 6px; min-height: 224px; }
.passe-qr img, .passe-qr canvas { border-radius: 12px; border: 10px solid #fff; box-shadow: var(--shadow-sm); }
.passe-nome { font-family: var(--font-serif); font-size: 1.45rem; font-weight: 600; margin-top: 10px; }
.passe-foot { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 8px; flex-wrap: wrap; }
.passe-cta { display: flex; align-items: center; gap: 14px; cursor: pointer; }
.passe-cta:hover { box-shadow: var(--shadow); }
.passe-cta-ic {
display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
background: var(--sage-soft); color: var(--sage-deep); flex: none;
}
.passe-cta-ic svg { width: 24px; height: 24px; }
/* ---- página "instalar o app" ---- */
.app-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 720px) { .app-benefits { grid-template-columns: 1fr; } }
.app-b-ic {
display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
background: var(--sage-soft); color: var(--sage-deep); margin-bottom: 10px;
}
.app-b-ic svg { width: 22px; height: 22px; }
.app-steps { list-style: none; margin: 0; padding: 0; }
.app-steps li { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--border); }
.app-steps li:last-child { border-bottom: 0; }
.app-step-n {
display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
background: var(--terra); color: #fff; font-weight: 700; font-size: .85rem; flex: none;
}
.app-inline-ic { display: inline-grid; place-items: center; vertical-align: -4px; }
.app-inline-ic svg { width: 18px; height: 18px; }
/* ============================================================================
v4 — microinterações: revelação, cartões, formulários e entrada da home
Movimento lento, curto e com propósito. Nada aqui inventa cor nova: tudo sai
das variáveis do :root (a marca vive no :root — v5 Avo). Referências reimplementadas
em CSS puro: loader ring (uiverse.io) e Fade Content / Blur Text (reactbits).
========================================================================== */
/* ---- 1. Revelação: cascata curta dos cartões dentro da seção que entra ---- */
/* A seção inteira faz o fade; os cartões atrasam alguns quadros um a um, então
o título da seção chega primeiro e os cartões vêm atrás. Teto de 350ms para
a última peça — mais que isso vira espera, não elegância. */
.rv .rv-stagger {
opacity: 0; transform: translateY(10px);
transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.rv.in .rv-stagger {
opacity: 1; transform: none;
transition-delay: calc(min(var(--rv-i, 0) * 70, 350) * 1ms);
}
/* ---- 2. Cartões: hover lento + foco de teclado visível ------------------- */
/* :hover só onde existe cursor de verdade — no toque o estado ficava grudado. */
@media (hover: hover) and (pointer: fine) {
.card-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-strong); }
.card-hover:hover::after { width: 42px; }
.plan-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-strong); }
.plan-hot:hover { transform: translateY(-4px); border-color: var(--terra); }
}
/* Fio dourado que cresce na base do cartão — mesmo gesto do .rule-gold da marca */
.card-hover::after {
content: ""; position: absolute; left: 26px; bottom: 0;
height: 2px; width: 0; background: var(--gold); border-radius: 2px;
transition: width .55s cubic-bezier(.16,1,.3,1); pointer-events: none;
}
/* Teclado: quem navega com Tab vê exatamente o mesmo destaque de quem usa mouse */
.card-hover:focus-visible {
transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-strong);
outline: 2px solid var(--sage-deep); outline-offset: 3px;
}
.card-hover:focus-visible::after { width: 42px; }
.card-hover:focus-visible .media img, .card-hover:focus-visible .media video { transform: scale(1.045); }
/* O cartão de plano é uma
: quem recebe o foco é o botão "Assinar" dentro
dele. :has(:focus-visible) sobe esse foco para o cartão inteiro. */
.plan-card { transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s cubic-bezier(.16,1,.3,1), border-color .45s ease; }
.plan-card:has(:focus-visible) {
transform: translateY(-3px); box-shadow: var(--shadow);
outline: 2px solid var(--sage-deep); outline-offset: 4px;
}
/* ---- 3. Formulários: botão ocupado + mensagem que fica na tela ----------- */
/* Loader ring em CSS puro (idioma uiverse), na cor do próprio botão. */
.spin {
width: 15px; height: 15px; border-radius: 50%; flex: none;
border: 2px solid currentColor; border-top-color: transparent; opacity: .85;
animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn[aria-busy="true"] { cursor: progress; opacity: .8; }
/* O toast some em 3s e leva a informação junto. Erro e confirmação de reserva
ficam inline, ao lado do botão, até a pessoa resolver. */
.form-msg {
display: block; margin-top: 10px; padding: 10px 13px;
border-radius: var(--radius-sm); border: 1px solid transparent;
font-size: .86rem; line-height: 1.45; text-align: left;
animation: msgIn .4s cubic-bezier(.16,1,.3,1) both;
}
.form-msg[hidden] { display: none; }
.form-msg-erro { background: var(--burgundy-soft); border-color: var(--ct-lilas-700); color: var(--burgundy); }
.form-msg-ok { background: var(--ok-bg); border-color: #BCD3BA; color: var(--ok); }
@keyframes msgIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* ---- 4. Entrada da home: a foto respira, o texto não espera por ela ------ */
/* A foto tem timeline própria (fade + o zoom de 14s que já existia). O título
começa em 80ms e não depende do carregamento da imagem — se a foto demorar,
o conteúdo já está lá. */
.hero.is-enter .hero-media img { animation: heroFoto 1.5s cubic-bezier(.16,1,.3,1) both, heroZoom 14s ease-out both; }
.hero.is-enter .hero-scrim { animation: heroScrim 1.6s ease both; }
@keyframes heroFoto { from { opacity: 0; } to { opacity: 1; } }
@keyframes heroScrim { from { opacity: 0; } to { opacity: 1; } }
/* Título palavra a palavra, saindo de desfocado (ideia do Blur Text) */
.hero-w { display: inline-block; will-change: opacity, filter, transform; }
.hero.is-enter .hero-w {
animation: palavraIn .9s cubic-bezier(.16,1,.3,1) both;
animation-delay: calc(var(--i, 0) * 70ms + 80ms);
}
@keyframes palavraIn {
from { opacity: 0; filter: blur(8px); transform: translateY(.16em); }
to { opacity: 1; filter: blur(0); transform: none; }
}
/* Sobrancelha, linha de apoio e botões entram depois do título, sem blur */
.hero.is-enter .eyebrow { animation: heroSobe .7s cubic-bezier(.16,1,.3,1) both; }
.hero.is-enter .lead { animation: heroSobe .8s cubic-bezier(.16,1,.3,1) .34s both; }
.hero.is-enter .hero-content > div:last-child { animation: heroSobe .8s cubic-bezier(.16,1,.3,1) .46s both; }
@keyframes heroSobe { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* Terminada a entrada, solta o will-change (senão a camada fica presa na GPU) */
.hero:not(.is-enter) .hero-w { will-change: auto; }
/* ---- Menos movimento: nada disso roda, tudo já nasce no estado final ----- */
@media (prefers-reduced-motion: reduce) {
.rv, .rv .rv-stagger { opacity: 1 !important; transform: none !important; }
.card-hover::after { display: none; }
.hero-w { will-change: auto; }
}
/* ============================================================================
v5 — IDENTIDADE AVO: linguagem visual da marca aplicada aos componentes
Assinaturas: linha de 1px vinho (o "grid" da identidade) · blocos de cor
chapada (amarelo = energia, lilás = acolhimento, vinho = profundidade) ·
serif grande e apertada + grotesca em caixa-alta espaçada · sol de raios.
========================================================================== */
::selection { background: var(--ct-amarelo); color: var(--ct-vinho); }
body { font-weight: 400; }
b, strong { font-weight: 600; }
h2 { font-size: clamp(2rem, 4vw, 3.3rem); }
.lead { font-size: 1.15rem; line-height: 1.55; color: var(--ct-ink-soft); font-weight: 400; }
.display-sans { font-family: var(--font-sans); font-weight: 400; letter-spacing: -.035em; line-height: .96; }
.serif-em, em { font-family: var(--font-serif); font-style: italic; letter-spacing: 0; }
.faint { color: var(--ct-ink-soft); opacity: .8; }
/* ---- Marca: logo, monograma, sol (SVG via
![]()
ou máscara) -------------- */
.brand-logo { display: block; height: 22px; width: auto; }
.brand-logo-foot { height: 92px; width: auto; }
.sol { display: block; background: currentColor; -webkit-mask: url(brand/grafismo-sol-fino.svg) center / contain no-repeat; mask: url(brand/grafismo-sol-fino.svg) center / contain no-repeat; }
.sol-denso { -webkit-mask-image: url(brand/grafismo-sol-denso.svg); mask-image: url(brand/grafismo-sol-denso.svg); }
/* meio-sol na base de um bloco (cartão p32 / home p28 do deck) */
.meio-sol { position: absolute; left: 50%; bottom: -1px; width: min(420px, 70%); aspect-ratio: 2 / 1; transform: translateX(-50%); overflow: hidden; pointer-events: none; opacity: .9; }
.meio-sol .sol { width: 100%; aspect-ratio: 1; }
/* ---- Linha-guia da identidade ------------------------------------------- */
.ledger { border-top: 1px solid var(--ct-vinho); }
.ledger-soft { border-top: 1px solid var(--ct-offwhite-3); }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; flex-wrap: wrap; border-top: 1px solid var(--ct-vinho); padding-top: 16px; margin-bottom: 34px; }
.sec-head h2 { margin-top: 10px; max-width: 22ch; }
.sec-head .lead { max-width: 44ch; font-size: 1.02rem; }
.sec-head-center { text-align: center; }
.sec-head-center h2 { margin: 12px auto 0; }
/* ---- Navbar --------------------------------------------------------------- */
.nav { background: rgba(239,239,227,.9); border-bottom: 1px solid var(--ct-vinho); }
.nav-inner { height: 68px; gap: 18px; }
.logo { gap: 0; color: var(--ct-vinho); }
.logo .mark { display: none; }
.nav-links a { font-family: var(--font-sans); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; color: var(--ct-vinho); padding: 8px 9px; border-radius: 0; position: relative; }
.nav-links a::after { content: ""; position: absolute; left: 9px; right: 9px; bottom: 2px; height: 1px; background: var(--ct-vinho); transform: scaleX(0); transform-origin: left; transition: transform var(--t-slow) var(--ease); }
.nav-links a:hover { background: transparent; color: var(--ct-vinho); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-links a.active { color: var(--ct-vinho); font-weight: 600; }
.nav-sep { background: var(--ct-vinho); opacity: .35; }
.icon-btn { color: var(--ct-vinho); }
.icon-btn:hover { background: var(--ct-lilas); }
.cart-dot { background: var(--ct-vinho); color: var(--ct-amarelo); }
.nav-burger { border-color: var(--ct-vinho); color: var(--ct-vinho); border-radius: 999px; }
.drawer { background: var(--ct-offwhite); border-left: 1px solid var(--ct-vinho); }
.drawer a { color: var(--ct-vinho); border-radius: 0; border-bottom: 1px solid var(--ct-offwhite-3); font-family: var(--font-serif); font-size: 1.35rem; padding: 12px 4px; }
.drawer a:hover { background: transparent; padding-left: 10px; transition: padding var(--t-base) var(--ease); }
.drawer a.btn { border: 0; font-family: var(--font-sans); font-size: .94rem; padding: 14px 20px; }
/* ---- Hero da home: foto + bloco amarelo (mock p28 do deck) --------------- */
.hero-split { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 88vh; min-height: 88svh; align-items: stretch; background: var(--ct-amarelo); }
.hero-split .hero-media { position: relative; inset: auto; min-height: 420px; }
.hero-split .hero-media img { animation: heroZoom 14s ease-out both; }
.hero-block { position: relative; display: flex; flex-direction: column; justify-content: center; padding: clamp(40px, 6vw, 88px) clamp(28px, 5vw, 72px) clamp(120px, 14vw, 180px); color: var(--ct-vinho); overflow: hidden; }
.hero-block .eyebrow { color: var(--ct-vinho); }
.hero-block h1 { color: var(--ct-vinho); font-size: clamp(3rem, 6.4vw, 5.6rem); text-shadow: none; }
.hero-block .lead { color: var(--ct-vinho); opacity: .9; }
.hero-block .btn-primary { background: var(--ct-vinho); color: var(--ct-offwhite); }
.hero-block .btn-outline { border-color: var(--ct-vinho); color: var(--ct-vinho); }
.hero-block .btn-outline:hover { background: var(--ct-vinho); color: var(--ct-offwhite); }
.hero-block .meio-sol { opacity: 1; }
.hero-tags { display: flex; gap: 10px 22px; flex-wrap: wrap; margin-top: 30px; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; }
.hero-tags span::before { content: "·"; margin-right: 10px; opacity: .6; }
.hero-tags span:first-child::before { content: none; }
.hero.is-enter .hero-block { animation: none; }
/* Heros de página interna: foto inteira, véu vinho, tipo off-white */
.hero-page .hero-scrim { background: linear-gradient(180deg, rgba(93,0,47,.12) 0%, rgba(93,0,47,.18) 45%, rgba(93,0,47,.72) 100%); }
.hero-page .hero-content { color: var(--ct-offwhite); }
.hero-page .hero-content h1 { color: var(--ct-offwhite); text-shadow: none; }
.hero-page .eyebrow { color: var(--ct-amarelo); }
.hero-page .on-dark-muted { color: rgba(239,239,227,.88); }
/* ---- Faixas --------------------------------------------------------------- */
.band-sand { background: var(--ct-lilas-100); }
.band-sage { background: var(--ct-lilas); }
.band-yellow { background: var(--ct-amarelo); color: var(--ct-vinho); }
.band-dark { background: var(--ct-vinho); color: var(--ct-offwhite); }
.band-dark h1, .band-dark h2, .band-dark h3 { color: var(--ct-offwhite); }
.band-dark .eyebrow { color: var(--ct-amarelo); }
.band-dark .muted, .band-dark .on-dark-muted { color: rgba(239,239,227,.8); }
.band-dark .btn-primary { background: var(--ct-amarelo); color: var(--ct-vinho); }
.band-dark .btn-primary:hover { background: var(--ct-amarelo-100); }
.band-dark .input { background: rgba(239,239,227,.08); border-color: rgba(239,239,227,.35); color: var(--ct-offwhite); }
.band-dark .input::placeholder { color: rgba(239,239,227,.6); }
.band-dark .input:focus { border-color: var(--ct-amarelo); box-shadow: 0 0 0 3px rgba(255,255,89,.25); }
.band-dark .link-underline { color: rgba(239,239,227,.85); text-decoration-color: rgba(239,239,227,.4); }
.band-dark .link-underline:hover { color: var(--ct-amarelo); text-decoration-color: var(--ct-amarelo); }
.band-dark .ledger { border-top-color: rgba(239,239,227,.3); }
/* ---- Cartões -------------------------------------------------------------- */
.card { border-color: var(--ct-offwhite-3); box-shadow: none; }
.card-hover::after { background: var(--ct-vinho); height: 1px; left: 0; }
@media (hover: hover) and (pointer: fine) {
.card-hover:hover { border-color: var(--ct-vinho); box-shadow: var(--shadow); }
.card-hover:hover::after { width: 100%; }
}
.card-hover:focus-visible { border-color: var(--ct-vinho); outline-color: var(--ct-vinho); }
.card-hover:focus-visible::after { width: 100%; }
/* Cartão de pilar: faixa de cor com o nome em serif + foto + texto */
.pilar-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--ct-vinho); border-radius: var(--radius); background: var(--surface); text-decoration: none; }
.pilar-band { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; padding: 18px 22px 14px; border-bottom: 1px solid var(--ct-vinho); min-height: 96px; }
.pilar-band h3 { font-family: var(--font-serif); font-weight: 500; font-size: 2.1rem; letter-spacing: -.02em; line-height: .95; }
.pilar-band .eyebrow { font-size: .64rem; }
.pilar-card.p-corpo-card .pilar-band { background: var(--ct-amarelo); color: var(--ct-vinho); }
.pilar-card.p-mente-card .pilar-band { background: var(--ct-lilas); color: var(--ct-vinho); }
.pilar-card.p-conexoes-card .pilar-band { background: var(--ct-vinho); color: var(--ct-offwhite); }
.pilar-card.p-conexoes-card .pilar-band h3, .pilar-card.p-conexoes-card .pilar-band .eyebrow { color: var(--ct-offwhite); }
.pilar-card .media { aspect-ratio: 4 / 3; border-bottom: 1px solid var(--ct-offwhite-3); }
.pilar-card .card-pad { padding: 20px 22px 24px; }
.pilar-card .serif-em { font-size: 1.15rem; color: var(--ct-vinho); display: block; margin-bottom: 10px; line-height: 1.3; }
/* Bloco dividido foto + cor (Família, Café, Workshop) */
.split-block { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--ct-vinho); }
.split-block .media { min-height: 380px; }
.split-body { padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; justify-content: center; position: relative; }
.split-lilas { background: var(--ct-lilas); color: var(--ct-vinho); }
.split-yellow { background: var(--ct-amarelo); color: var(--ct-vinho); }
.split-vinho { background: var(--ct-vinho); color: var(--ct-offwhite); }
.split-vinho h2, .split-vinho h3, .split-vinho .eyebrow, .split-vinho .serif-em { color: var(--ct-offwhite); }
.split-vinho .eyebrow { color: var(--ct-amarelo); }
.split-vinho .muted { color: rgba(239,239,227,.82); }
.split-lilas .muted, .split-yellow .muted { color: var(--ct-vinho); opacity: .82; }
.split-lilas .serif-em, .split-yellow .serif-em { color: var(--ct-vinho); }
.split-block .icon-circle { background: var(--ct-offwhite); color: var(--ct-vinho); }
/* Passos com linhas (Como funciona) — o grid da identidade */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ct-vinho); border-left: 1px solid var(--ct-vinho); }
.step { padding: 26px 24px 30px; border-right: 1px solid var(--ct-vinho); border-bottom: 1px solid var(--ct-vinho); background: var(--surface); }
.step-n { font-family: var(--font-serif); font-size: 2.6rem; line-height: 1; color: var(--ct-vinho); letter-spacing: -.02em; }
.step h3 { margin: 14px 0 8px; font-size: 1.2rem; }
.step p { color: var(--ct-ink-soft); font-size: .94rem; }
/* CTA reserva em linha (ledger) */
.cta-line { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; border-top: 1px solid var(--ct-vinho); border-bottom: 1px solid var(--ct-vinho); padding: 26px 0; }
.cta-line h3 { font-family: var(--font-serif); font-weight: 500; font-size: 1.9rem; letter-spacing: -.02em; }
.cta-line p { color: var(--ct-ink-soft); }
.band-dark .cta-line { border-color: rgba(239,239,227,.35); }
.band-dark .cta-line p { color: rgba(239,239,227,.8); }
/* Galeria: tira com legenda em caixa-alta */
.galeria { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.galeria .media { aspect-ratio: 4 / 5; border-radius: var(--radius-sm); }
/* ---- Badges / chips / inputs --------------------------------------------- */
.badge { border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; padding: 5px 9px; background: var(--surface-2); color: var(--ct-vinho); border-color: var(--ct-offwhite-3); }
.badge-corpo { background: var(--ct-amarelo); color: var(--ct-vinho); border-color: var(--ct-amarelo); }
.badge-mente { background: var(--ct-lilas); color: var(--ct-vinho); border-color: var(--ct-lilas); }
.badge-conexoes { background: var(--ct-vinho); color: var(--ct-offwhite); border-color: var(--ct-vinho); }
.badge-familia { background: var(--ct-lilas); color: var(--ct-vinho); border-color: var(--ct-lilas); }
.badge-credit { background: var(--ct-amarelo); color: var(--ct-vinho); border-color: var(--ct-amarelo); }
.badge-pilar { background: var(--ct-offwhite); color: var(--ct-vinho); }
.badge-incluso, .badge-done { background: var(--ok-bg); color: var(--ok); border-color: #BFD6BA; }
.acc-corpo { border-left: 5px solid var(--ct-amarelo); }
.acc-mente { border-left: 5px solid var(--ct-lilas); }
.acc-conexoes { border-left: 5px solid var(--ct-vinho); }
.pilar-strip { border-radius: 0; height: 3px; }
.p-corpo { background: var(--ct-amarelo); } .p-mente { background: var(--ct-lilas); } .p-conexoes, .p-familia { background: var(--ct-vinho); }
.chip { border-color: var(--ct-offwhite-3); color: var(--ct-vinho); font-size: .82rem; }
.chip:hover { border-color: var(--ct-vinho); color: var(--ct-vinho); }
.chip.on { background: var(--ct-vinho); color: var(--ct-offwhite); border-color: var(--ct-vinho); }
.input, select.input { border-radius: var(--radius-sm); border-color: var(--ct-offwhite-3); background: var(--surface); }
.input:focus { border-color: var(--ct-vinho); box-shadow: 0 0 0 3px rgba(237,206,252,.7); }
.seg { border-radius: var(--radius-sm); background: var(--surface-2); border-color: var(--ct-offwhite-3); }
.seg button { border-radius: 3px; color: var(--ct-vinho); }
.seg button.on { background: var(--ct-vinho); color: var(--ct-offwhite); box-shadow: none; }
.uni-pick { color: var(--ct-vinho); border-color: var(--ct-offwhite-3); }
.seat { border-radius: var(--radius-sm); color: var(--ct-ink-soft); }
.seat:hover:not(.taken) { border-color: var(--ct-vinho); color: var(--ct-vinho); }
.seat.sel { background: var(--ct-vinho); color: var(--ct-amarelo); border-color: var(--ct-vinho); }
.icon-circle { background: var(--ct-lilas-100); color: var(--ct-vinho); }
.link-underline { text-decoration-color: var(--ct-lilas-700); }
.link-underline:hover { color: var(--ct-vinho); text-decoration-color: var(--ct-vinho); }
.toast { background: var(--ct-vinho); color: var(--ct-offwhite); border-radius: var(--radius-sm); }
.qty-btn { border-radius: var(--radius-sm); color: var(--ct-vinho); }
.qty-btn:hover { border-color: var(--ct-vinho); }
.modal { border-radius: var(--radius); border: 1px solid var(--ct-vinho); }
.plan-hot { border-color: var(--ct-vinho); background: var(--ct-lilas-100); box-shadow: none; }
.plan-selo { background: var(--ct-amarelo); color: var(--ct-vinho); border-color: var(--ct-amarelo); border-radius: var(--radius-sm); }
.plan-card { border-color: var(--ct-offwhite-3); }
.comanda-bar { border-color: var(--ct-vinho); }
.btn-dark { background: var(--ct-vinho); color: var(--ct-offwhite); }
.btn-dark:hover { background: var(--ct-vinho-900); }
.btn-light { background: var(--ct-offwhite); color: var(--ct-vinho); }
.btn-light:hover { background: #fff; }
.btn-ghost { color: var(--ct-vinho); }
.btn-ghost:hover { background: var(--ct-lilas-100); color: var(--ct-vinho); }
.btn:focus-visible, .chip:focus-visible, .icon-btn:focus-visible, .qty-btn:focus-visible, .seat:focus-visible, .nav-links a:focus-visible, .seg button:focus-visible { outline-color: var(--ct-vinho); }
.card-hover:focus-visible, .plan-card:has(:focus-visible) { outline-color: var(--ct-vinho); }
.btn-google { border-color: var(--ct-offwhite-3); }
.btn-google:hover { border-color: var(--ct-vinho); }
.form-msg-erro { background: var(--ct-vinho-100); border-color: var(--ct-lilas-700); color: var(--ct-vinho); }
.sk { background: var(--surface-2); }
.rv .rv-stagger, .rv { transition-duration: var(--t-enter); }
.apptab.on { color: var(--ct-vinho); }
html.is-app .apptabs { background: rgba(239,239,227,.94); border-top: 1px solid var(--ct-vinho); }
.passe-head .mark { background: var(--ct-vinho); color: var(--ct-amarelo); border-radius: 50%; }
.passe-cta-ic, .app-b-ic { background: var(--ct-lilas); color: var(--ct-vinho); }
.app-step-n { background: var(--ct-vinho); color: var(--ct-amarelo); }
.note::before { content: "✎ NOTA DE PROTÓTIPO"; }
/* ---- Rodapé --------------------------------------------------------------- */
.foot-sol { position: absolute; right: -60px; top: -40px; width: 360px; aspect-ratio: 1; color: var(--ct-offwhite); opacity: .12; pointer-events: none; }
.foot-grid { position: relative; }
.foot-meta { display: flex; gap: 10px 24px; flex-wrap: wrap; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(239,239,227,.7); }
/* ---- CTA fixo no celular (fora do modo app) ------------------------------ */
.cta-mobile { display: none; }
@media (max-width: 760px) {
html:not(.is-app) .cta-mobile { display: flex; position: fixed; left: 14px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 70; box-shadow: var(--shadow-lg); }
html:not(.is-app) body.has-cta-mobile { padding-bottom: 84px; }
.hero-split { grid-template-columns: 1fr; min-height: auto; }
.hero-split .hero-media { min-height: 52svh; order: 0; }
.hero-block { order: 1; padding: 34px 20px 120px; }
.hero-block h1 { font-size: clamp(2.5rem, 12vw, 3.4rem); }
.split-block { grid-template-columns: 1fr; }
.split-block .media { min-height: 240px; order: 0; }
.steps { grid-template-columns: 1fr; border-left: 0; }
.step { border-right: 0; }
.galeria { grid-template-columns: repeat(2, 1fr); }
.sec-head { margin-bottom: 24px; }
.cta-line h3 { font-size: 1.5rem; }
.brand-logo { height: 19px; }
.foot-sol { display: none; }
}
@media (max-width: 1020px) and (min-width: 761px) {
.hero-split { grid-template-columns: 1fr 1fr; }
.hero-block { padding: 40px 32px 130px; }
}
/* ---- Transição entre rotas (View Transitions, progressivo) --------------- */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; animation-timing-function: var(--ease); }
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
.nav-links a::after { transition: none; }
}
/* v5.1 — ajustes do QA mobile */
@media (max-width: 760px) {
.split-body .meio-sol { display: none; } /* o sol invadia os botões do bloco do café */
.hero-block .meio-sol { width: min(320px, 78%); }
.hero-eyebrow-long { display: none; }
.hero-eyebrow-short { display: inline; }
}
@media (min-width: 761px) { .hero-eyebrow-short { display: none; } }
/* Lista de modalidades no grid de linhas da identidade */
.mods { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ct-vinho); border-left: 1px solid var(--ct-vinho); background: var(--surface); }
.mod { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px 20px; border-right: 1px solid var(--ct-vinho); border-bottom: 1px solid var(--ct-vinho); min-height: 118px; transition: background var(--t-base); }
.mod-n { font-size: .66rem; letter-spacing: .12em; color: var(--ct-vinho); opacity: .7; }
.mod-nome { font-family: var(--font-serif); font-size: 1.35rem; line-height: 1.1; color: var(--ct-vinho); letter-spacing: -.01em; margin-top: auto; }
.mods-corpo .mod:hover { background: var(--ct-amarelo); }
.mods-mente .mod:hover { background: var(--ct-lilas); }
.mods-conexoes .mod:hover { background: var(--ct-vinho); }
.mods-conexoes .mod:hover .mod-nome, .mods-conexoes .mod:hover .mod-n { color: var(--ct-offwhite); }
@media (max-width: 1020px) { .mods { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .mods { grid-template-columns: 1fr 1fr; } .mod { min-height: 96px; padding: 14px 14px 16px; } .mod-nome { font-size: 1.15rem; } }
/* ============================================================================
v6 — pré-lançamento: lista de espera · Casa Aberta (23–25/out/2026)
========================================================================== */
/* ---- Formulário de captação (home, rodapé, #/lista, sessões do evento) ---- */
.form-lista { text-align: left; }
.fl-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.check-linha { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; cursor: pointer; font-size: .9rem; line-height: 1.4; }
.check-linha input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--ct-vinho); flex: none; cursor: pointer; }
.fl-nota { font-size: .74rem; color: var(--ct-ink-soft); margin-top: 10px; line-height: 1.5; }
.form-lista.dark .label { color: rgba(239,239,227,.8); }
.form-lista.dark .check-linha { color: rgba(239,239,227,.9); }
.form-lista.dark .check-linha input { accent-color: var(--ct-amarelo); }
.form-lista.dark .fl-nota { color: rgba(239,239,227,.6); }
.form-lista.dark .fl-nota a { color: rgba(239,239,227,.85); }
.form-lista.dark .btn-primary { background: var(--ct-amarelo); color: var(--ct-vinho); }
.form-lista.dark .btn-primary:hover { background: var(--ct-amarelo-100); }
.lista-ok { text-align: center; padding: 12px 0; animation: msgIn .5s var(--ease) both; }
.band-dark .lista-ok .icon-circle { background: var(--ct-amarelo); color: var(--ct-vinho); }
.band-dark .lista-ok h3 { color: var(--ct-offwhite); }
.band-dark .lista-ok .muted { color: rgba(239,239,227,.8); }
/* ---- Linha do tempo da página #/lista ---- */
.linha-tempo { display: flex; flex-direction: column; }
.lt-item { display: grid; grid-template-columns: 190px 1fr; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--ct-offwhite-3); }
.lt-item:last-child { border-bottom: 0; }
.lt-quando { font-family: var(--font-sans); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ct-vinho); font-weight: 500; padding-top: 4px; }
.lt-item h3 { font-family: var(--font-serif); font-weight: 500; font-size: 1.5rem; letter-spacing: -.01em; margin-bottom: 4px; }
/* ---- Casa Aberta: os 3 dias ---- */
.dias-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ct-vinho); border-left: 1px solid var(--ct-vinho); }
.dia-card { padding: 26px 24px 30px; border-right: 1px solid var(--ct-vinho); border-bottom: 1px solid var(--ct-vinho); background: var(--surface); }
.dia-card.is-fechado { background: var(--ct-lilas-100); }
.dia-num { font-family: var(--font-serif); font-size: 3.4rem; line-height: .9; color: var(--ct-vinho); letter-spacing: -.03em; }
.dia-sem { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ct-vinho); margin: 8px 0 14px; }
.dia-card h3 { font-family: var(--font-serif); font-weight: 500; font-size: 1.45rem; letter-spacing: -.01em; margin-bottom: 8px; }
.dia-card p { font-size: .93rem; }
/* ---- Casa Aberta: sessões ---- */
.sessoes { border-top: 1px solid var(--ct-vinho); }
.sessao { display: grid; grid-template-columns: 110px 1fr; gap: 24px; padding: 22px 0 26px; border-bottom: 1px solid var(--ct-offwhite-3); }
.sessao:last-child { border-bottom: 1px solid var(--ct-vinho); }
.sessao-hora { font-family: var(--font-serif); font-size: 1.9rem; line-height: 1; color: var(--ct-vinho); letter-spacing: -.02em; }
.sessao-topo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.sessao-corpo h3 { font-family: var(--font-serif); font-weight: 500; font-size: 1.6rem; letter-spacing: -.01em; margin-bottom: 6px; }
.sessao-corpo p { font-size: .95rem; max-width: 62ch; }
.sessao-vagas { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ct-ink-soft); font-weight: 500; }
.sessao-vagas.poucas { color: var(--ct-vinho); font-weight: 600; }
.sessao.is-lotada { opacity: .62; }
.sessao .form-lista.ins { margin-top: 14px; max-width: 560px; padding: 18px; border: 1px solid var(--ct-vinho); border-radius: var(--radius); background: var(--ct-lilas-100); animation: msgIn .35s var(--ease) both; }
.ins-ok { margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--ok-bg); color: var(--ok); font-size: .92rem; font-weight: 500; }
.ins-ok svg { width: 17px; height: 17px; }
@media (max-width: 900px) {
.dias-grid { grid-template-columns: 1fr; border-left: 0; }
.dia-card { border-right: 0; }
}
@media (max-width: 640px) {
.fl-linha { grid-template-columns: 1fr; }
.lt-item { grid-template-columns: 1fr; gap: 6px; }
.sessao { grid-template-columns: 1fr; gap: 6px; padding: 18px 0 22px; }
.sessao-hora { font-size: 1.4rem; }
.sessao-corpo h3 { font-size: 1.35rem; }
}
.aviso-fundadora { display: flex; justify-content: space-between; align-items: center; gap: 22px; flex-wrap: wrap; background: var(--ct-amarelo); color: var(--ct-vinho); padding: 26px 28px; border-radius: var(--radius); margin-top: 20px; }
.aviso-fundadora h3 { font-family: var(--font-serif); font-weight: 500; font-size: 1.8rem; letter-spacing: -.02em; margin: 8px 0 6px; }
.aviso-fundadora .muted { color: var(--ct-vinho); opacity: .82; max-width: 56ch; font-size: .95rem; }
.plan-preco-espera { font-family: var(--font-serif); font-style: italic; font-size: 1.15rem; color: var(--ct-ink-soft); margin-bottom: 10px; }
/* ══ Café · benchmark Foods App (set/2026) ═══════════════════════════════
Overlay leve (termos de ciência + identificação por WhatsApp), selo de
indisponível e etiqueta de preparo — estados do cardápio da Tinta la Vida */
.ct-overlay { position: fixed; inset: 0; background: rgba(24,16,20,.48); z-index: 300; display: grid; place-items: center; padding: 20px; animation: fadein .18s ease; }
@keyframes fadein { from { opacity: 0; } }
.ct-modal { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 26px 26px 22px; width: min(440px, 100%); max-height: 86vh; overflow-y: auto; }
.ciencia-row { display: flex; gap: 11px; align-items: flex-start; padding: 11px 0; border-top: 1px solid var(--border); font-size: .89rem; cursor: pointer; }
.ciencia-row:last-of-type { border-bottom: 1px solid var(--border); }
.ciencia-row input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--sage-deep); flex: none; cursor: pointer; }
.ciencia-row span { color: var(--ink-soft); }
.ciencia-row b { color: var(--ink); }
.preparo-tag { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; font-size: .76rem; font-weight: 600; color: var(--sage-deep); background: var(--surface-2); border-radius: 999px; padding: 3px 10px; }
.preparo-tag svg { width: 12px; height: 12px; }
.tag-indisp { display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); border: 1px solid var(--border-strong); border-radius: 999px; padding: 4px 10px; }
@media (prefers-reduced-motion: reduce) { .ct-overlay { animation: none; } }
/* ── Item do cardápio ────────────────────────────────────────────────────
Desktop: thumb à esquerda, info e ação lado a lado.
Mobile: a ação desce para a própria linha — antes o bloco preço+botão
tinha white-space:nowrap dentro de um card com overflow:hidden, e no
celular (o caso de uso do QR na mesa!) o "Adicionar" era CORTADO. */
.menu-item { display: flex; align-items: stretch; gap: 0; overflow: hidden; padding: 0; }
.menu-item.is-off { opacity: .62; }
.menu-item-thumb { width: 88px; flex: none; background: var(--surface-2); align-self: stretch; min-height: 88px; }
.menu-item-thumb > * { width: 100%; height: 100%; object-fit: cover; display: block; }
.menu-item-body { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex: 1; min-width: 0; padding: 14px 16px; }
.menu-item-info { min-width: 0; }
.menu-item-info h4 { font-size: 1.02rem; }
.menu-item-info p { font-size: .85rem; margin-top: 2px; }
.menu-item-acao { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; text-align: right; }
/* ── Linha da comanda ─────────────────────────────────────────────────── */
.comanda-item { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border); }
.comanda-item-nome { flex: 1; min-width: 0; }
.comanda-item-ctrl { display: flex; align-items: center; gap: 12px; flex: none; }
.comanda-item-total { min-width: 80px; text-align: right; font-weight: 600; }
@media (max-width: 560px) {
/* nome e descrição ganham a largura do card; preço e botão numa linha só */
.menu-item-body { flex-direction: column; align-items: stretch; gap: 10px; padding: 13px 14px; }
.menu-item-acao { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; text-align: left; }
.menu-item-acao .btn { flex: none; }
.menu-item-thumb { width: 76px; }
/* comanda: nome em cima, controles e total embaixo */
.comanda-item { flex-direction: column; align-items: stretch; gap: 8px; }
.comanda-item-ctrl { justify-content: flex-end; }
.comanda-item-total { flex: 1; }
}
/* ── Mesa: chamar recepção / pedir a conta (0015 · R4) ─────────────────── */
.mesa-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
/* ── Avaliação pós-venda (0015) ───────────────────────────────────────── */
.nota-linha { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.nota-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--ink-soft); font-size: .72rem; font-weight: 500; cursor: pointer; transition: .15s; }
.nota-btn:hover { border-color: var(--sage); color: var(--ink); }
.nota-btn .nota-num { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.nota-btn.on { background: var(--sage-deep); border-color: var(--sage-deep); color: var(--ct-offwhite); }
.nota-btn:focus-visible { outline: none; border-color: var(--sage); box-shadow: 0 0 0 3px rgba(94,106,78,.16); }