/* Dom Canecas: folha de estilo única (HTML e CSS puros, sem build).
   Organizada por componente: cada bloco traz as suas regras de celular logo abaixo.
     1. Fontes e tokens     2. Base     3. Estrutura (cabeçalho, migalhas, seções, texto, rodapé, legais)
     4. Componentes         5. Páginas (topo das internas, home)     6. Movimento     7. Impressão
   Cortes de tela usados: 900 (2 colunas viram 1), 860/861 (menu do celular), 780 (celular),
   700 (cartões e passos em 1 coluna), 600, 520 e 480 (telas estreitas).
   Cuidado ao mover regras: com a mesma força de seletor, vale a que vem depois. */

/* ============================================================ 1. Fontes e tokens */
@font-face { font-family: 'DM Serif Display'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/dm-serif-display-400-latin.woff2') format('woff2'); }
/* Manuscrita do balão da home: recorte da Kaushan Script (OFL) só com as letras de "feita pra você" (4,7 KB).
   A licença reserva o nome "Kaushan Script", por isso o recorte se chama "Dom Manuscrita".
   Se o texto do balão mudar, gerar o recorte de novo (como em DECISOES.md, etapa 6 da auditoria). */
@font-face { font-family: 'Dom Manuscrita'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/dom-manuscrita-recorte.woff2') format('woff2'); }
:root {
  color-scheme: light;
  /* Paleta Dom Canecas (16/10/2026): branco com marrom chocolate, laranja só em detalhes (marcas\domcanecas\marca.json).
     Contraste conferido: texto pequeno só em --ink, --muted e --accent-text; laranja puro só em fundo, com texto --ink. */
  --paper: #fff;
  --ink: #3A1F12;
  --ink-rodape: #24130B;
  --muted: #45291B;
  --accent: #E8731A;
  --accent-text: #9F4309;
  --caramel: #F2A65A;
  --soft: #FAF6F1;
  --sand: #F3ECE3;
  --line: #E8D9C6;
  /* Rodapé (fundo --ink-rodape): linhas, texto e texto miúdo */
  --rodape-linha: #38241A;
  --rodape-texto: #E9D9C4;
  --rodape-texto-suave: #D9C7B3;
  /* Sombras: sempre o chocolate (--ink) com transparência: rgba(var(--sombra-rgb), .12) */
  --sombra-rgb: 58, 31, 18;
  --paper-rgb: 255, 255, 255;   /* branco com transparência (véu da Hero, pílula do menu sobre a foto) */
  /* Letras */
  --sans: 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --display: 'DM Serif Display', Georgia, 'Times New Roman', serif; /* títulos da home */
  --script: 'Dom Manuscrita', 'Segoe Script', cursive;              /* enfeite manuscrito da home */
  --fs-xs: .75rem;
  --fs-sm: .875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lead: clamp(1rem, 1.4vw, 1.15rem);
  --fs-h3: clamp(1.2rem, 1.6vw, 1.35rem);
  --fs-h2: clamp(1.75rem, 2.9vw, 2.4rem);
  --fs-h1: clamp(2rem, 3.6vw, 3rem);       /* páginas internas; a home tem o seu em .home-hero h1 */
  --fs-mark: 1.6rem;
  /* Espaço (passo de 4 px) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 48px;
  --s-9: 64px;
  --section-y: 48px;
  --section-y-sm: 40px;
  /* Raios */
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-g: 28px;
  /* Cabeçalho: folga entre o topo da tela e a pílula, altura da pílula e espaço total que ele ocupa no topo.
     No celular os dois primeiros encolhem (fim do bloco :root); --cabecalho-h se ajusta sozinho. */
  --menu-folga: var(--s-4);
  --menu-h: 60px;
  --cabecalho-h: calc(var(--menu-folga) + var(--menu-h));
  /* Margem lateral do .container (cresce com a tela), recuo da logo dentro da pílula
     (o texto da Hero começa na mesma linha) e altura da logo do cabeçalho */
  --margem: clamp(16px, 4vw, 48px);
  --recuo: var(--s-8);
  --logo-h: 24px;
  /* Movimento (equivalente à mola suave dos vídeos, damping 14). --cascata também é lida pelo site.js */
  --curva: cubic-bezier(.22, 1, .36, 1);
  --entrada: .9s;
  --deslize: 20px;
  --cascata: 110ms;
}
@media (max-width: 860px) {
  :root { --menu-folga: var(--s-3); --menu-h: 56px; --recuo: var(--s-5); --logo-h: 22px; }
}

/* ============================================================ 2. Base */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--cabecalho-h) + var(--menu-folga));-webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); line-height: 1.6; font-size: var(--fs-base); }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 3px; border-radius: var(--radius-s); }
h1, h2, h3, p, ul, ol { margin-top: 0; }
/* Títulos em DM Serif Display (peso único, 400), na escala da home: ~1,25 entre níveis */
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.12; letter-spacing: -.01em; }
h1, h2 { text-wrap: balance; }
h1 { margin-bottom: var(--s-6); font-size: var(--fs-h1); line-height: 1.08; letter-spacing: -.015em; }
h2 { margin-bottom: var(--s-4); font-size: var(--fs-h2); }
h3 { margin-bottom: var(--s-2); font-size: var(--fs-h3); line-height: 1.2; letter-spacing: 0; }

.container { width: min(1120px, 100% - 2 * var(--margem)); margin-inline: auto; }
/* Texto e topo sem imagem começam na mesma borda esquerda da grade de 1120 px. */
.container.prose, .page-hero .container { margin-left: calc((100% - min(1120px, 100% - 2 * var(--margem))) / 2); margin-right: auto; }

.skip-link { position: absolute; left: 16px; top: -64px; z-index: 30; padding: var(--s-3) var(--s-4); background: var(--ink); color: var(--paper); border-radius: var(--radius-s); }
.skip-link:focus { top: 12px; }
.skip-link:focus-visible { outline-color: var(--caramel); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.mt-section { margin-top: var(--s-6); }
.mt-0 { margin-top: 0; }
.eyebrow { margin: 0 0 var(--s-4); color: var(--accent-text); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.lead { max-width: 560px; margin-bottom: var(--s-6); color: var(--muted); font-size: var(--fs-lead); }
.muted { color: var(--muted); }

/* ============================================================ 3. Estrutura */

/* Cabeçalho: pílula flutuante em todas as larguras (folga do topo e largura do .container nas laterais),
   presa no topo ao rolar (sticky); a folga transparente em volta da pílula não bloqueia toques no conteúdo de trás.
   Só o tamanho muda no celular, pelos tokens --menu-folga, --menu-h, --recuo e --logo-h. */
.site-header { position: sticky; top: 0; z-index: 20; padding-top: var(--menu-folga); color: var(--ink); pointer-events: none; }
.header-inner { position: relative; pointer-events: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); min-height: var(--menu-h); padding: 0 var(--s-6) 0 var(--recuo); border: 1px solid var(--line); border-radius: 999px; background: rgba(var(--paper-rgb), .88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 6px 24px rgba(var(--sombra-rgb), .05); }
.brand { display: inline-flex; align-items: center; gap: var(--s-3); font-size: var(--fs-md); font-weight: 800; letter-spacing: -.04em; text-decoration: none; }
.brand img { height: var(--logo-h); width: auto; }
.site-header nav { font-size: var(--fs-sm); font-weight: 650; }
.site-header nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-6); margin: 0; padding: 0; list-style: none; }
.site-header nav a { padding: var(--s-2) var(--s-1); text-decoration: none; }
.site-header nav a:hover { color: var(--accent-text); }
.site-header nav a[aria-current="page"] { color: var(--accent-text); text-decoration: underline; text-underline-offset: 6px; }
.site-header nav .button { padding: var(--s-2) var(--s-5); min-height: 44px; color: var(--paper); }
.site-header nav .button:hover { color: var(--paper); }
/* Botão da barra: a mesma onda do botão da Hero, só 3 vezes ao abrir a página e só no computador. Na home não pulsa
   (competiria com a Hero); no celular fica dentro do ☰. */
.site-header nav .button[data-wa="cabecalho"] { position: relative; }
.site-header nav .button[data-wa="cabecalho"]::after { content: ''; position: absolute; inset: -5px; border: 2px solid rgba(var(--sombra-rgb), .75); border-radius: inherit; opacity: 0; pointer-events: none; }
@media (min-width: 861px) {
  .js body:not(.home) .site-header nav .button[data-wa="cabecalho"]::after { animation: pulso-cta 5.6s var(--curva) 1.5s 3 both; }
}
.site-header nav .button[data-wa="cabecalho"]:is(:hover, :focus-visible)::after { animation: none; opacity: 0; }
/* Menu do celular (hambúrguer): só vira painel quando há JavaScript (html.js); sem JS a lista fica visível */
.menu-toggle { display: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-m); background: transparent; color: var(--ink); cursor: pointer; place-items: center; }
.menu-toggle:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 2px; }
.menu-toggle-bar, .menu-toggle-bar::before, .menu-toggle-bar::after { display: block; width: 22px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s ease, background .2s ease; }
.menu-toggle-bar { position: relative; }
.menu-toggle-bar::before, .menu-toggle-bar::after { content: ''; position: absolute; left: 0; }
.menu-toggle-bar::before { top: -7px; }
.menu-toggle-bar::after { top: 7px; }
.menu-aberto .menu-toggle-bar { background: transparent; }
.menu-aberto .menu-toggle-bar::before { transform: translateY(7px) rotate(45deg); }
.menu-aberto .menu-toggle-bar::after { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 860px) {
  .header-inner { gap: var(--s-3); padding-right: var(--s-2); }
  .site-header nav ul { gap: var(--s-1) var(--s-5); }
  .site-header nav a:not(.button) { padding: var(--s-3) var(--s-1); }
  .js .menu-toggle { display: grid; }
  /* Menu aberto: cartão arredondado logo abaixo da pílula, com a mesma largura. Abre e fecha com esmaecimento e um
     deslize curto; fechado fica com visibility: hidden (fora do toque, do Tab e do leitor de tela), que só vale
     depois que o esmaecimento termina. */
  .js .site-header nav { visibility: hidden; opacity: 0; transform: translateY(-8px); pointer-events: none;
    transition: opacity .22s var(--curva), transform .22s var(--curva), visibility 0s linear .22s; position: absolute; top: calc(100% + var(--s-2)); left: 0; right: 0; max-height: calc(100dvh - var(--cabecalho-h) - 2 * var(--menu-folga)); overflow-y: auto; padding: var(--s-2) var(--s-5) var(--s-5); border: 1px solid var(--line); border-radius: var(--radius-g); background: var(--paper); box-shadow: 0 18px 40px rgba(var(--sombra-rgb), .12); font-size: var(--fs-md); }
  .js .menu-aberto nav { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s; }
  .js .site-header nav ul { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 0; }
  .js .site-header nav a:not(.button) { display: flex; align-items: center; min-height: 48px; padding: 0 var(--s-1); border-bottom: 1px solid var(--line); }
  .js .site-header nav .button { display: flex; justify-content: center; margin-top: var(--s-4); min-height: 52px; }
}

/* Migalhas */
.breadcrumb { padding: var(--s-5) 0 0; font-size: var(--fs-sm); color: var(--muted); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); margin: 0; padding: 0; list-style: none; }
.breadcrumb li + li::before { content: '/'; margin-right: var(--s-2); color: var(--muted); }
.breadcrumb a { text-underline-offset: 3px; }
@media (max-width: 780px) {
  .breadcrumb ol { row-gap: 0; }
  .breadcrumb li { display: flex; align-items: center; }
  .breadcrumb a { display: inline-block; padding: var(--s-3) 0; }
}

/* Seções e tons: branco e suave alternados, escolhidos por compor() em gerar_paginas.py. O único bloco chocolate é o rodapé.
   Muito respiro; as seções suaves viram painéis arredondados sobre o branco. */
main { overflow-x: clip; }
.section { padding: clamp(72px, 10vw, 128px) 0; }
.section-heading { max-width: 620px; margin-bottom: var(--s-8); }
.section-heading p:last-child { margin-bottom: 0; color: var(--muted); }
.section-heading p, .muted { font-size: var(--fs-base); line-height: 1.7; }
.tone-light { background: var(--paper); color: var(--ink); }
.tone-soft { margin-inline: clamp(8px, 2vw, 24px); border-radius: var(--radius-g); background: var(--soft); color: var(--ink); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: start; }
.two-col p, .video-copy .muted { max-width: 34em; }
@media (max-width: 900px) {
  .two-col { grid-template-columns: 1fr; gap: var(--s-7); }
}
@media (max-width: 780px) {
  .section { padding: 64px 0; }
  .section-heading { margin-bottom: var(--s-7); }
}

/* Texto corrido (.prose) e texto em linhas (.prose-grid: título à esquerda, cerca de 1/3; conteúdo à direita) */
.prose { max-width: 740px; }
.prose-wide { max-width: 1120px; }
.prose p, .prose li { color: var(--muted); }
.prose h2 { margin-top: var(--s-7); }
.prose h2:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li { margin-bottom: var(--s-2); }
.prose .social-list { columns: 2; column-gap: var(--s-7); }
.prose .social-list li { break-inside: avoid; }
.prose-grid > div { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); column-gap: var(--s-8); padding: var(--s-7) 0; border-top: 1px solid var(--line); }
.prose-grid > div:first-child { padding-top: 0; border-top: 0; }
.prose-grid > div:last-child { padding-bottom: 0; }
.prose-grid > div > h2 { grid-column: 1; grid-row: 1 / span 12; margin: 0; font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
.prose-grid > div > :not(h2) { grid-column: 2; }
.prose-grid > div > p, .prose-grid > div > ul:not(.quote-list), .prose-grid > div > ol { max-width: 68ch; }
@media (max-width: 900px) {
  .prose-grid > div { grid-template-columns: 1fr; }
  .prose-grid > div > h2 { grid-row: auto; margin-bottom: var(--s-3); }
  .prose-grid > div > :not(h2) { grid-column: 1; }
}
@media (max-width: 780px) {
  .prose .social-list li { margin-bottom: 0; }
  .prose .social-list a { display: inline-block; padding: var(--s-3) 0; }
}

/* Rodapé */
.site-footer { padding: var(--s-8) 0 var(--s-7); border-top: 1px solid var(--rodape-linha); background: var(--ink-rodape); color: var(--paper); font-size: var(--fs-sm); line-height: 1.5; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--s-7); }
.footer-brand { display: inline-block; }
.footer-brand img { height: 72px; width: auto; }
.site-footer p { margin: var(--s-2) 0 var(--s-3); color: var(--rodape-texto); }
.site-footer h2 { margin: 0 0 var(--s-3); font-family: var(--sans); font-weight: 700; font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--caramel); }
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer li { margin-bottom: var(--s-2); }
.site-footer a { text-decoration: none; color: var(--rodape-texto); }
.site-footer a:hover { color: var(--caramel); }
.site-footer a:focus-visible { outline-color: var(--caramel); text-decoration: underline; text-underline-offset: 4px; }
.site-footer a.link-google { text-decoration: underline; text-underline-offset: 4px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3) var(--s-6); margin-top: var(--s-7); padding-top: var(--s-6); border-top: 1px solid var(--rodape-linha); color: var(--rodape-texto-suave); font-size: var(--fs-xs); }
.legal-links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 780px) {
  .footer-grid > :first-child, .footer-grid > :last-child { grid-column: 1 / -1; }
  .site-footer li { margin-bottom: 0; }
  /* Alvos de toque de 44 px (ícones das redes e links de baixo ajustam logo abaixo, com a mesma força de seletor) */
  .site-footer a:not(.footer-brand) { display: inline-block; padding: var(--s-3) 0; }
  .footer-bottom { flex-direction: column; align-items: stretch; gap: var(--s-1); }
  .legal-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-7); }
}
/* Ícones das redes: só o desenho; o nome fica para leitor de tela. Precisa vir depois das regras de link do rodapé. */
.site-footer .footer-social { display: grid; grid-template-columns: repeat(4, 36px); gap: var(--s-1) var(--s-1); margin-left: -9px; }
.footer-social li { margin: 0; }
.site-footer .footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; text-decoration: none; transition: background .15s, color .15s; }
.site-footer .footer-social a:hover, .site-footer .footer-social a:focus-visible { background: var(--rodape-linha); color: var(--caramel); }
.footer-social svg { flex: none; width: 18px; height: 18px; }
.footer-social span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 780px) {
  .site-footer .footer-social { grid-template-columns: repeat(4, 44px); margin-left: -13px; }
  .site-footer .footer-social a { width: 44px; height: 44px; }
  .site-footer .legal-links a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }
}

/* Páginas legais das ferramentas Google (layout_legal: cabeçalho e rodapé simples) */
.legal-footer { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.legal-footer nav { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.legal-page { max-width: 820px; min-height: 50vh; margin-left: calc((100% - min(1120px, 100% - 2 * var(--margem))) / 2); margin-right: auto; }
.legal-page h1 { font-size: var(--fs-h1); }
.legal-page h2 { margin-top: 2rem; font-size: var(--fs-h3); }
.legal-page p { max-width: 72ch; }
.legal-page a { color: var(--accent-text); }
.legal-page .eyebrow { margin-top: 0; }

/* Barra do WhatsApp fixa no pé da tela (só no celular).
   Com JS, ela sai de cena enquanto outro botão de WhatsApp está na tela (.wa-bar-oculta, em site.js), para não repetir o botão. */
.wa-bar { display: none; }
@media (max-width: 780px) {
  body { padding-bottom: var(--s-9); }
  .wa-bar { position: fixed; inset: auto 0 0 0; z-index: 25; display: block; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(var(--sombra-rgb), .12); transition: transform .5s var(--curva), visibility 0s; }
  .wa-bar .button { width: 100%; }
  .wa-bar.wa-bar-oculta { transform: translateY(100%); visibility: hidden; transition: transform .5s var(--curva), visibility 0s .5s; }
}

/* ============================================================ 4. Componentes */

/* Botões (em pílula, com leve subida no mouse) e links de texto (sublinhado fino que corre no mouse) */
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3); min-height: 52px; padding: var(--s-3) var(--s-6); border-radius: 999px; border: 2px solid transparent; font-weight: 750; font-size: var(--fs-base); text-decoration: none; cursor: pointer; transition: transform .5s var(--curva), box-shadow .5s var(--curva), background .3s ease; }
.wa-icon { flex: none; width: 18px; height: 18px; }
.button-primary { padding-inline: var(--s-7); background: var(--ink); color: var(--paper); box-shadow: 0 4px 14px rgba(var(--sombra-rgb), .12); }
.button-primary:hover { background: var(--muted); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(var(--sombra-rgb), .16); }
.button-ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.button-ghost:hover { background: var(--ink); color: var(--paper); }
.text-link { font-weight: 700; text-underline-offset: 5px; }
.text-link:hover { color: var(--accent-text); }
main .text-link { text-decoration: none; background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat; padding-bottom: 2px; transition: background-size .6s var(--curva), color .3s ease; }
main .text-link:hover { background-size: 0 1px; background-position: right bottom; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-4) var(--s-6); }
.hero-actions-stack { flex-direction: column; align-items: stretch; max-width: 420px; margin: 0 auto; padding: 0; list-style: none; }
.hero-actions-stack li { display: flex; }
.hero-actions-stack .button { flex: 1; }
@media (max-width: 780px) {
  .text-link { display: inline-block; padding: var(--s-3) 0; }
  main .text-link { padding-block: 10px; background-position: left calc(100% - 8px); }
  main .text-link:hover { background-position: right calc(100% - 8px); }
}

/* Cartões (cartao() no gerador) */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 32px); }
.card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-g); background: var(--paper); overflow: hidden; transition: transform .7s var(--curva), box-shadow .7s var(--curva); }
.card-art { display: grid; place-items: center; padding: var(--s-6) var(--s-5) var(--s-2); background: var(--soft); overflow: hidden; }
.card-art:has(img) { padding: 0; }
.card-art img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; transition: transform 1.2s var(--curva); }
.card-body { display: flex; flex-direction: column; flex: 1; padding: var(--s-6); }
.card-body p { margin-bottom: var(--s-4); color: var(--muted); font-size: var(--fs-base); line-height: 1.7; }
.card-body > .text-link { margin-top: auto; align-self: flex-start; }
.card-body .card-actions { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
.card-body .button { min-height: 46px; padding: var(--s-2) var(--s-5); font-size: var(--fs-sm); }
.card-link { display: block; text-decoration: none; }
.card-link .card { height: 100%; }
.card-link:hover .card, .card:has(.card-actions):hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(var(--sombra-rgb), .08); }
.card-link:hover .card-art img, .card:hover .card-art img { transform: scale(1.03); }
@media (max-width: 780px) {
  .card-art img { aspect-ratio: 4 / 3; }
}
@media (max-width: 700px) {
  .card-grid { grid-template-columns: 1fr; }
}

/* Passos numerados (passos() no gerador) */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 32px); margin: 0; padding: 0; list-style: none; counter-reset: passo; }
.steps li { position: relative; padding: var(--s-7) var(--s-6); border: 1px solid var(--line); border-radius: var(--radius-g); background: var(--paper); counter-increment: passo; }
.steps li::before { content: counter(passo); display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: var(--s-5); border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--accent-text); font-family: var(--display); font-size: 1.15rem; font-weight: 400; }
.steps h3 { margin-bottom: var(--s-2); }
.steps p { margin: 0; color: var(--muted); font-size: var(--fs-base); line-height: 1.7; }
.steps-block { margin-top: var(--s-8); }
.steps-block > p { margin-top: var(--s-6); color: var(--muted); }
@media (min-width: 701px) {
  .steps li:nth-child(5):last-child { grid-column: span 2; }
}
@media (max-width: 700px) {
  .steps { grid-template-columns: 1fr; }
}

/* O que combinamos na conversa (preço, prazo, pagamento, entrega). O selo só aparece no rascunho. */
.fact-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); margin: var(--s-6) 0 0; }
.fact-list > div { padding: var(--s-6); border: 1px solid var(--line); border-radius: var(--radius-g); background: var(--paper); }
.fact-list dt { margin-bottom: var(--s-2); font-family: var(--display); font-size: 1.25rem; font-weight: 400; line-height: 1.2; }
.fact-list dd { margin: 0; color: var(--muted); }
.fact-example { display: inline-block; margin-top: var(--s-2); padding: var(--s-1) var(--s-2); border: 2px dashed var(--accent-text); border-radius: var(--radius-s); color: var(--accent-text); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .04em; }
@media (max-width: 900px) {
  .fact-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .fact-list { grid-template-columns: 1fr; }
}

/* Frases de exemplo (lista_frases() no gerador) e lista com visto */
.quote-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
.quote-list li { padding: var(--s-5) var(--s-6); border: 1px solid var(--line); border-radius: var(--radius-g); background: var(--paper); color: var(--ink); font-family: var(--display); font-size: 1.15rem; line-height: 1.35; }
.checklist { padding-left: 0; list-style: none; }
.checklist li { position: relative; padding-left: var(--s-7); }
.checklist li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--accent-text); font-weight: 800; }
@media (max-width: 600px) {
  .quote-list { grid-template-columns: 1fr; }
}

/* Perguntas (abre e fecha) */
.faq { max-width: 800px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); padding: var(--s-5) 0; font-weight: 700; font-size: var(--fs-md); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; font-family: var(--display); font-size: var(--fs-mark); line-height: 1; color: var(--accent-text); }
.faq details[open] summary::after { content: '–'; }
.faq details p { margin: 0 0 var(--s-6); color: var(--muted); }

/* Ocasiões como pílulas */
.link-list { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.link-list a { display: inline-flex; align-items: center; min-height: 44px; padding: var(--s-2) var(--s-5); border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font-size: var(--fs-sm); font-weight: 650; text-decoration: none; transition: background .5s var(--curva), color .5s var(--curva), border-color .5s var(--curva); }
.link-list a:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }

/* Faixa da frase, antes da faixa final: frase grande sobre creme, com um traço laranja fino embaixo */
.band-quote { margin: var(--s-6) clamp(8px, 2vw, 24px) 0; padding: clamp(56px, 8vw, 96px) 0; border-radius: var(--radius-g); background: var(--sand); color: var(--ink); }
.band-quote p { max-width: 24em; margin: 0; font-family: var(--display); font-size: var(--fs-h2); font-weight: 400; line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; }
.band-quote p::after { content: ''; display: block; width: 64px; height: 2px; margin-top: var(--s-5); border-radius: 2px; background: var(--accent); }

/* Faixa final (sempre clara; "areia" quando a seção de cima também é clara) */
.cta-band { padding: var(--section-y) 0; }
.cta-band.cta-areia { background: var(--sand); border-top: 1px solid var(--line); }
.cta-band .container { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s-8); align-items: center; }
.cta-band p { margin-bottom: var(--s-5); color: var(--muted); }
@media (max-width: 900px) {
  .cta-band .container { grid-template-columns: 1fr; gap: var(--s-7); }
}
@media (max-width: 780px) {
  .cta-band { padding: var(--section-y-sm) 0; }
}

/* Vídeo do YouTube */
.video-block { display: grid; grid-template-columns: 1fr minmax(320px, 560px); gap: var(--s-8); align-items: center; }
.video-copy .button { margin-top: var(--s-5); }
.video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: var(--radius-g); background: var(--soft); overflow: hidden; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Vídeo da home em cores invertidas (teste 19/10/2026, pedido do Jordan): fundo chocolate, texto branco e botão branco
   com o texto na cor do fundo. A margem de cima afasta a seção da faixa "Sua foto · Seu nome · Sua frase". */
.home-video { margin-top: clamp(16px, 3vw, 32px); }
.home-video.tone-soft { background: var(--ink-rodape); color: #fff; }   /* o chocolate escuro do rodapé */
.home-video .video-copy .muted { color: rgba(255, 255, 255, .85); }
.home-video .button-primary { background: #fff; color: var(--ink-rodape); box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.home-video .button-primary:hover { background: var(--sand); color: var(--ink-rodape); }
.home-video a:focus-visible { outline-color: var(--caramel); }
.home-video .video-frame { border-color: rgba(255, 255, 255, .12); }
/* Vídeo com clique: capa com botão de play; o site.js troca pelo player no clique */
.video-play { position: absolute; inset: 0; display: block; }
.video-play img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--curva); }
.video-play:hover img { transform: scale(1.03); }
.video-play:focus-visible { outline-offset: -6px; border-radius: var(--radius-g); }
.video-play-icone { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: var(--paper); box-shadow: 0 10px 24px rgba(var(--sombra-rgb), .2); transition: transform .5s var(--curva); }
.video-play-icone::after { content: ''; position: absolute; left: 29px; top: 23px; border-style: solid; border-width: 13px 0 13px 21px; border-color: transparent transparent transparent var(--ink); }
.video-play:hover .video-play-icone { transform: scale(1.06); }
@media (max-width: 900px) {
  .video-block { grid-template-columns: 1fr; gap: var(--s-7); }
}

/* Galeria do Instagram: grade de 3 colunas (2 no celular, com o último post sozinho no meio) */
.ig-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.ig-item { aspect-ratio: 1; border: 1px solid var(--line); border-radius: var(--radius-g); overflow: hidden; background: var(--soft); }
.ig-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--curva); }
.ig-item:hover img { transform: scale(1.03); }
@media (max-width: 600px) {
  .ig-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ig-item:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - var(--s-2)); }
}

/* ============================================================ 5. Páginas */

/* Rótulo pequeno acima do título (home e internas) */
.home-rotulo, .page-rotulo { margin: 0 0 var(--s-6); color: var(--accent-text); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.home-hero .lead, .page-hero .lead { max-width: 30em; margin-bottom: var(--s-7); font-size: 1.05rem; line-height: 1.7; }

/* Topo das páginas internas (topo() no gerador): branco e limpo como o da home */
.page-hero { position: relative; padding: var(--s-9) 0 clamp(56px, 7vw, 96px); }
.page-hero .container { max-width: 880px; margin-inline: auto; }
.page-hero h1 { max-width: 16em; }
/* Foto, nome e frase: a ilustração vira o fundo do topo, como na Hero da home (19/10/2026). A pílula do menu e as
   migalhas flutuam por cima; a foto ocupa a metade direita e a borda esquerda se dissolve no branco. */
@media (min-width: 781px) {
  body:has(.page-hero.com-fundo) .site-header { margin-bottom: calc(-1 * var(--cabecalho-h)); }
  body:has(.page-hero.com-fundo) .breadcrumb { position: absolute; top: calc(var(--cabecalho-h) + var(--s-2)); left: 0; right: 0; z-index: 1; }
}
.page-hero.com-fundo { isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: min(640px, 82vh);
  padding: calc(var(--cabecalho-h) + 72px) 0 clamp(56px, 7vw, 96px); background: var(--paper); }
.page-hero.com-fundo .container { width: min(1120px, 100% - 2 * var(--margem)); }
.page-hero.com-fundo .page-hero-texto { max-width: 520px; }
.page-hero-fundo { position: absolute; top: 0; right: 0; bottom: 0; width: 54%; z-index: -1;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 38%); mask-image: linear-gradient(90deg, transparent 0, #000 38%); }
.page-hero-fundo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.js .page-hero-fundo img { animation: foto-assenta 1.6s var(--curva) .2s both; }
@media (max-width: 780px) {
  .page-hero { padding: var(--s-7) 0 var(--s-8); }
  /* Celular: a foto vem numa faixa logo abaixo das migalhas (no fluxo, porque as migalhas quebram em 2 linhas)
     e o texto depois, como na home */
  .page-hero.com-fundo { display: block; min-height: 0; padding-top: var(--s-5); }
  .page-hero-fundo { position: relative; z-index: 0; width: auto; height: min(calc(88vw / 1.5), 300px); margin: 0 var(--margem) var(--s-6);
    overflow: hidden; border-radius: var(--radius-g); -webkit-mask-image: none; mask-image: none; }
  .page-hero-fundo img { object-position: center 55%; }
  /* Fotos de estúdio 4:3 (19/10/2026): aproxima a caneca com "scale" (a animação usa transform, por isso não conflita) */
  .page-hero-fundo img[src*="caneca-na-caixa"] { object-position: 60% 56%; scale: 1.3; transform-origin: 60% 56%; }
}
/* Fotos de estúdio (19/10/2026): na caneca-de-perto a tampa e o papel vermelho vão até a borda de cima, então ancora no alto */
.page-hero-fundo img[src*="caneca-de-perto"] { object-position: center 12%; }
/* Celular estreito ou tela baixa: faixa da foto mais baixa e menos espaço embaixo, para o botão do WhatsApp ficar acima da dobra */
@media (max-width: 780px) and (max-width: 380px), (max-width: 780px) and (max-height: 760px) {
  .page-hero-fundo { height: min(calc(88vw / 1.9), 190px); margin-bottom: var(--s-5); }
}

/* Home: só o que é exclusivo dela (Hero com foto de fundo, faixa corrida, balão, rabisco e o quadro reservado dos cartões).
   O resto do estilo da home virou o estilo de todas as páginas (etapa 5 da auditoria, 16/10/2026). */
/* Hero: fundo creme (provisório, até chegar a foto nova) que passa por baixo do menu em pílula.
   O cabeçalho "devolve" a altura dele com margem negativa, e a Hero reserva esse espaço (--cabecalho-h) no padding.
   A altura vem só do conteúdo, e os respiros acompanham a ALTURA da tela (vh/svh): em tela baixa encolhem,
   para a faixa logo abaixo aparecer no pé da tela. */
.home .site-header { margin-bottom: calc(-1 * var(--cabecalho-h)); }
.home-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--sand);
  padding: calc(var(--cabecalho-h) + clamp(24px, 6vh, 72px)) 0 clamp(40px, 9vh, 104px);
  padding: calc(var(--cabecalho-h) + clamp(24px, 6svh, 72px)) 0 clamp(40px, 9svh, 104px); }
/* Foto de fundo (só quando FOTO_HERO_HOME, no gerador, tem imagem: a Hero ganha .com-foto e o bloco .home-hero-fundo) */
.home-hero.com-foto { background: var(--paper); }
.home-hero-fundo { position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 1.2s var(--curva); }
.home-hero-fundo.ativo { opacity: 1; }   /* slides: o site.js passa a .ativo adiante; sem JS fica a primeira */
/* Controle dos slides: a mesma pílula da capa da /links/ (.l2-controles), embaixo e no centro da Hero */
.home-hero .home-hero-controles { top: auto; right: auto; bottom: clamp(16px, 3vh, 28px); left: 50%; transform: translateX(-50%);
  border: 1px solid var(--line); border-color: color-mix(in srgb, var(--line) 60%, transparent); box-shadow: none; }
  /* só a borda, um pouco mais clara que a --line: contorno leve sobre o fundo branco, sem sombra */
.home-hero-fundo img { width: 100%; height: 100%; object-fit: cover; object-position: 75% center; }
/* Véu branco discreto: forte do lado do texto, some antes do meio; um toque no topo, atrás do menu */
.home-hero-fundo::after { content: ''; position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(var(--paper-rgb), .94) 0, rgba(var(--paper-rgb), .86) 32%, rgba(var(--paper-rgb), 0) 64%),
  linear-gradient(180deg, rgba(var(--paper-rgb), .55) 0, rgba(var(--paper-rgb), 0) calc(var(--cabecalho-h) + 40px)); }
/* Texto na metade esquerda; título editorial em 3 a 4 linhas no computador (largura em em, quebras equilibradas) */
.home-hero .container { padding-inline: var(--recuo); }   /* texto entre a linha da logo e a linha do ☰ da pílula */
.home-hero-copy { max-width: 560px; }
/* Uma onda curta a cada 5,6 s; o restante do ciclo é uma pausa. O botão não muda de tamanho. */
.home-hero .button[data-wa="home-topo"] { position: relative; padding-inline: clamp(var(--s-6), 8vw, var(--s-7)); }
.home-hero .button[data-wa="home-topo"]::after { content: ''; position: absolute; inset: -5px; border: 2px solid rgba(var(--sombra-rgb), .75); border-radius: inherit; opacity: 0; pointer-events: none; }
.animacoes-prontas .home-hero .button[data-wa="home-topo"]::after { animation: pulso-cta 5.6s var(--curva) infinite; }
.animacoes-paradas .home-hero .button[data-wa="home-topo"]::after,
.home-hero .button[data-wa="home-topo"]:is(:hover, :focus-visible)::after { animation: none; opacity: 0; }
.home-hero-selos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin-bottom: var(--s-6); }
.home-hero-selos .home-rotulo { margin: 0; }
.home-hero h1 { max-width: 11.5em; margin-bottom: var(--s-6); font-size: clamp(1.95rem, 2.6vw, 2.5rem); line-height: 1.1; letter-spacing: -.012em; }
.home-frase { display: block; }
.home-p { display: inline-block; }
.home-marca { position: relative; }
.home-rabisco { position: absolute; left: 0; right: 0; bottom: -.08em; width: 100%; height: .22em; overflow: visible; }
.home-rabisco path { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.home-balao { display: inline-block; padding: var(--s-1) var(--s-4); border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); font-family: var(--script); font-size: 1rem; line-height: 1.4; transform: rotate(-4deg); }

/* Faixa: fina, reta e lenta */
.home-faixa { position: relative; overflow: hidden; padding: var(--s-3) 0; border-block: 1px solid var(--line); background: var(--paper); color: var(--muted); }
.home-faixa-trilho { display: flex; align-items: center; gap: var(--s-7); width: max-content; font-family: var(--display); font-size: 1.15rem; white-space: nowrap; animation: faixa-corre 80s linear infinite; }
.home-faixa-trilho span { flex: none; }
.home-faixa-trilho i { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.animacoes-paradas .home-faixa-trilho, .home-faixa:hover .home-faixa-trilho { animation-play-state: paused; }
/* Botão de pausa (só com JS): 32 px visíveis, 44 px de área de toque. Ícone: duas barras; parada, um triângulo. */
.faixa-pausa { display: none; }
.js .faixa-pausa { position: absolute; right: var(--s-4); top: 50%; display: grid; place-items: center; width: 32px; height: 32px; margin-top: -16px; padding: 0; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); box-shadow: 0 0 0 12px var(--paper); color: var(--ink); cursor: pointer; }
.js .faixa-pausa::before { content: ''; position: absolute; inset: -6px; }
.faixa-pausa-icone { width: 10px; height: 10px; border-inline: 3px solid currentColor; }
.animacoes-paradas .faixa-pausa-icone { width: 0; height: 0; margin-left: 2px; border-style: solid; border-width: 5px 0 5px 9px; border-color: transparent transparent transparent currentColor; }

/* Cartões das 3 canecas: sem foto até chegarem as novas (quadro reservado em 4:3) */
.home .card-art-reservado { aspect-ratio: 4 / 3; padding: 0; background: var(--sand); border-bottom: 1px solid var(--line); }
.home .card-art img { aspect-ratio: 4 / 3; }

/* Celular: blocos mais próximos (o texto "pendura" no título) e respiros menores, que ainda seguem a altura da tela */
@media (max-width: 780px) {
  .home-hero {
    padding: calc(var(--cabecalho-h) + clamp(var(--s-5), 4vh, var(--s-7))) 0 clamp(var(--s-7), 7vh, var(--s-9));
    padding: calc(var(--cabecalho-h) + clamp(var(--s-5), 4svh, var(--s-7))) 0 clamp(var(--s-7), 7svh, var(--s-9)); }
  /* Com foto: o recorte dos produtos fica logo abaixo da pílula do menu (--foto-topo dá a folga), o controle embaixo
     dele e o texto depois. --foto-h: 88% da largura (recorte 3:2; no máximo 300 px, para não esticar no tablet) em todas as telas, por escolha do Jordan: em tela
     baixa (360x740) o botão do WhatsApp fica um pouco abaixo da dobra. */
  .home-hero.com-foto { --foto-topo: calc(var(--cabecalho-h) + 24px); --foto-h: min(calc(88vw / 1.5), 300px);
    --foto-fim: calc(var(--foto-topo) + var(--foto-h) + 36px); padding-top: calc(var(--foto-fim) + var(--s-3)); background: var(--paper); }
  .home-hero-fundo { inset: var(--foto-topo) 0 auto 0; height: var(--foto-h); }
  .home-hero-fundo img { object-fit: contain; object-position: center bottom; }
  .home-hero-fundo::after { display: none; }   /* sem véu: o texto não fica sobre a foto */
  .js .home-hero .home-hero-controles { top: calc(var(--foto-topo) + var(--foto-h) + 6px); bottom: auto; }   /* vence o .js .l2-controles, que vem depois */
  .home-hero.com-foto { touch-action: pan-y; }   /* arrastar para o lado troca a foto (site.js); para cima e para baixo rola */
  .home-hero-selos { margin-bottom: var(--s-5); }
  .home-balao { display: none; }   /* provisório (18/10/2026, pedido do Jordan): sobe a headline; volta quando houver espaço */
  .home-hero h1 { margin-bottom: var(--s-4); font-size: clamp(1.85rem, 8vw, 2.3rem); }
  .home-hero .lead { margin-bottom: var(--s-6); font-size: var(--fs-base); line-height: 1.6; }
  .home-hero .hero-actions .text-link { display: none; }
}

/* ---- Página do link da bio (/links/): coluna única, sem menu nem rodapé. Entrada animada na parte 6. ---- */
body.links { background: #fff; }
/* Cores invertidas: botões cheios em chocolate, no hover viram brancos */
body.links .links-botao { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: 0 2px 8px rgba(var(--sombra-rgb), .12); }
body.links .links-botao:hover, body.links .links-botao:focus-visible { background: #fff; color: var(--ink); }
.links-pagina { min-height: 100vh; min-height: 100svh; padding: var(--s-7) 0 var(--s-8); }
.links-coluna { width: min(440px, 100% - 2 * var(--margem)); margin-inline: auto; display: flex; flex-direction: column; align-items: stretch; text-align: center; }
.links-logo { align-self: center; display: inline-flex; margin-bottom: var(--s-5); }
.links-logo img { display: block; height: 28px; width: auto; }
.links-balao { margin: 0 0 var(--s-4); }
.links-coluna h1 { margin: 0 0 var(--s-4); font-size: clamp(2rem, 8.5vw, 2.5rem); line-height: 1.1; letter-spacing: -.012em; text-wrap: balance; }
.links-lead { margin: 0 auto var(--s-6); max-width: 22em; color: var(--muted); }
.links-wa { position: relative; width: 100%; min-height: 58px; }
.links-wa::after { content: ''; position: absolute; inset: -4px; border: 1px solid rgba(var(--sombra-rgb), .35); border-radius: inherit; opacity: 0; pointer-events: none; }
.links-lista { display: flex; flex-direction: column; gap: var(--s-3); margin: var(--s-5) 0 var(--s-6); padding: 0; list-style: none; }
.links-botao { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 56px; padding: var(--s-3) var(--s-5) var(--s-3) var(--s-6); border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); font-weight: 750; text-decoration: none; text-align: left; box-shadow: 0 2px 8px rgba(var(--sombra-rgb), .05); transition: transform .5s var(--curva), box-shadow .5s var(--curva), background .3s ease, color .3s ease, border-color .3s ease; }
.links-botao:hover, .links-botao:focus-visible { transform: translateY(-2px); background: var(--ink); border-color: var(--ink); color: var(--paper); box-shadow: 0 10px 24px rgba(var(--sombra-rgb), .16); }
.links-botao:active { transform: translateY(0) scale(.99); }
.links-card { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3); min-height: 132px; padding: var(--s-4) var(--s-5); border-radius: 22px; overflow: hidden; isolation: isolate; color: #fff; text-decoration: none; text-align: left; background: radial-gradient(120% 140% at 85% 20%, rgba(232, 115, 26, .38) 0%, rgba(232, 115, 26, 0) 60%), var(--ink); box-shadow: 0 6px 18px rgba(var(--sombra-rgb), .14); transition: transform .5s var(--curva), box-shadow .5s var(--curva); } /* placeholder no lugar da foto */
.links-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; transition: transform .9s var(--curva); }
.links-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(var(--sombra-rgb), .9) 0%, rgba(var(--sombra-rgb), .62) 50%, rgba(var(--sombra-rgb), 0) 92%); }
.links-card-texto { display: flex; flex-direction: column; gap: 2px; }
.links-card-texto strong { font-family: var(--display); font-weight: 400; font-size: 1.5rem; line-height: 1.15; }
.links-card-texto small { font-size: var(--fs-sm); opacity: .92; }
.links-card .links-seta { align-self: center; box-sizing: content-box; padding: 8px; border-radius: 50%; background: rgba(var(--sombra-rgb), .72); }
.links-card:hover, .links-card:focus-visible { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(var(--sombra-rgb), .22); }
.links-card:hover img, .links-card:focus-visible img { transform: scale(1.05); }
.links-card:hover .links-seta, .links-card:focus-visible .links-seta { transform: translateX(4px); }
.links-seta { flex: none; transition: transform .5s var(--curva); }
.links-botao:hover .links-seta, .links-botao:focus-visible .links-seta { transform: translateX(4px); }
.links-instagram { display: flex; flex-direction: column; gap: var(--s-4); margin-bottom: var(--s-7); }
.links-ig { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.links-ig .ig-item:last-child:nth-child(odd) { grid-column: auto; width: auto; justify-self: stretch; }
.links-rodape { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.links-rodape a { color: inherit; }

/* ---- Página do link da bio (/links/), versão "perfil": claro e editorial. Capa, foto, bio, cards com ícone, redes ---- */
.l2 { min-height: 100vh; min-height: 100svh; padding: var(--s-4) 0 var(--s-8); }
.l2-coluna { width: min(440px, 100% - 2 * var(--margem)); margin-inline: auto; display: flex; flex-direction: column; align-items: stretch; text-align: center; }
.l2-capa { position: relative; height: 148px; border-radius: 20px; overflow: hidden; background: radial-gradient(80% 120% at 85% 0%, rgba(232, 115, 26, .08) 0%, rgba(232, 115, 26, 0) 70%), var(--sand); }
.l2-capa-arte { position: absolute; inset: 0; width: 100%; height: 100%; }
.l2-slides { position: absolute; inset: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.l2-slides::-webkit-scrollbar { display: none; }
.l2-slides > * { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; scroll-snap-align: start; scroll-snap-stop: always; }
.l2-slide-vazio { display: grid; place-items: center; background: radial-gradient(70% 120% at calc(var(--n) * 18%) 0%, rgba(232, 115, 26, .10) 0%, rgba(232, 115, 26, 0) 70%), linear-gradient(135deg, var(--sand), #EADCCB); }
.l2-capa:has(.l2-slides)::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(var(--sombra-rgb), 0) 55%, rgba(var(--sombra-rgb), .14) 100%); }
.l2-controles { position: absolute; top: 10px; right: 10px; z-index: 1; display: none; align-items: center; gap: 2px; padding: 0 4px; height: 28px; border-radius: 999px; background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 1px 2px rgba(var(--sombra-rgb), .08); }
.js .l2-controles { display: flex; }
.l2-pontos { display: flex; align-items: center; }
.l2-ponto, .l2-pausa { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
.l2-ponto::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: rgba(var(--sombra-rgb), .3); transition: width .35s var(--curva), background .3s ease; }
.l2-ponto[aria-current="true"] { width: 30px; }
.l2-ponto[aria-current="true"]::before { width: 18px; background: var(--ink); }
.l2-ponto:focus-visible, .l2-pausa:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; border-radius: 999px; }
.l2-ic-tocar, .l2-pausa[aria-pressed="true"] .l2-ic-pausa { display: none; }
.l2-pausa[aria-pressed="true"] .l2-ic-tocar { display: inline; }
.l2-perfil { display: flex; flex-direction: column; align-items: center; margin-top: -44px; padding-inline: var(--s-3); }
.l2-foto { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; background: var(--ink); border: 4px solid #fff; box-shadow: 0 0 0 1px var(--line), 0 2px 8px rgba(var(--sombra-rgb), .06); overflow: hidden; }
.l2-foto img { width: 64%; height: auto; display: block; }
.l2-perfil h1 { margin: var(--s-4) 0 var(--s-1); font-size: clamp(1.75rem, 7vw, 2rem); line-height: 1.1; letter-spacing: -.01em; }
.l2-usuario { margin: 0 0 var(--s-3); font-size: .8125rem; font-weight: 600; letter-spacing: .04em; }
.l2-usuario a { color: var(--accent-text, var(--ink)); text-decoration: none; }
.l2-usuario a:hover { text-decoration: underline; text-underline-offset: 4px; }
.l2-bio { margin: 0 0 var(--s-4); max-width: 26em; color: var(--muted); font-size: .9375rem; line-height: 1.6; }
.l2-fatos { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 0 var(--s-6); padding: 0; list-style: none; }
.l2-fatos li { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--muted); font-size: .75rem; line-height: 1; }
.l2-fatos svg { flex: none; color: var(--accent); }
.l2-fatos a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(var(--sombra-rgb), .3); text-underline-offset: 3px; }
.l2-fatos a:hover { text-decoration-color: currentColor; }
.l2-fatos a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.l2-ocasioes { margin-bottom: var(--s-3); }
.l2-ocasioes-titulo { margin: 0 0 var(--s-2); font-size: .8125rem; font-weight: 600; color: var(--muted); }
.l2-chips { display: flex; gap: 8px; margin-inline: calc(-1 * var(--margem)); padding: 2px var(--margem); overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--margem); scrollbar-width: none; }
.l2-chips::-webkit-scrollbar { display: none; }
.l2-chip { flex: none; display: inline-flex; align-items: center; height: 40px; margin-block: 2px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; scroll-snap-align: start; transition: background .25s ease, color .25s ease, border-color .25s ease, transform .2s var(--curva); }
.l2-chip:hover { border-color: rgba(var(--sombra-rgb), .3); }
.l2-chip:active { transform: scale(.97); }
.l2-chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.l2-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.l2-chip-ok { width: 0; margin-right: 0; opacity: 0; transition: width .2s var(--curva), margin .2s var(--curva), opacity .15s ease; }
.l2-chip-ok path { stroke-dasharray: 12; stroke-dashoffset: 12; transition: stroke-dashoffset .2s ease .05s; }
.l2-chip[aria-pressed="true"] .l2-chip-ok { width: 12px; margin-right: 6px; opacity: 1; }
.l2-chip[aria-pressed="true"] .l2-chip-ok path { stroke-dashoffset: 0; }
@media (min-width: 480px) {
  .l2-chips { flex-wrap: wrap; justify-content: center; gap: 6px; margin-inline: 0; padding-inline: 0; overflow: visible; }
  .l2-chip { padding: 0 13px; }
}
.l2-wa { position: relative; width: 100%; min-height: 56px; border-radius: 16px; box-shadow: none; }
.l2-wa-texto { transition: opacity .15s ease; }
.l2-wa[data-trocando] .l2-wa-texto { opacity: 0; }
.l2-wa[data-abrindo] .wa-icon { animation: l2-gira .6s var(--curva) 1; }
.l2-apoio { margin: var(--s-2) auto 0; max-width: 30em; color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; }
.l2-rotulo { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-6) 0 var(--s-3); font-size: .6875rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.l2-rotulo::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.l2-lista, .l2-redes { margin: 0; padding: 0; list-style: none; }
.l2-lista { display: flex; flex-direction: column; gap: 10px; }
.l2-card { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 14px 18px 14px 14px; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: var(--ink); text-decoration: none; text-align: left; box-shadow: 0 1px 2px rgba(var(--sombra-rgb), .04); transition: transform .45s var(--curva), box-shadow .45s var(--curva), border-color .3s ease; }
.l2-tile { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--sand); transition: background .3s ease; }
.l2-icone { width: 26px; height: 26px; stroke: var(--ink); stroke-width: 1.6; overflow: visible; }
.l2-icone .a { stroke: var(--accent); }
.l2-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.l2-texto strong { font-family: var(--display); font-weight: 400; font-size: 1.15rem; line-height: 1.2; }
.l2-texto small { font-size: .875rem; color: var(--muted); }
.l2-seta { flex: none; color: var(--muted); transition: transform .45s var(--curva), color .3s ease; }
.l2-card:hover, .l2-card:focus-visible { transform: translateY(-1px); border-color: rgba(var(--sombra-rgb), .22); box-shadow: 0 6px 16px rgba(var(--sombra-rgb), .07); }
.l2-card:hover .l2-tile, .l2-card:focus-visible .l2-tile { background: #EFE2D3; }
.l2-card:hover .l2-seta, .l2-card:focus-visible .l2-seta { transform: translateX(3px); color: var(--ink); }
.l2-card:active, .l2-rede:active { transform: scale(.99); }
.l2-card:focus-visible, .l2-rede:focus-visible, .l2-foto:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.l2-redes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: var(--s-7); }
.l2-rede { display: grid; place-items: center; height: 48px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: rgba(var(--sombra-rgb), .75); transition: transform .4s var(--curva), background .3s ease, color .3s ease, border-color .3s ease; }
.l2-rede:hover, .l2-rede:focus-visible { transform: translateY(-1px); background: var(--sand); border-color: rgba(var(--sombra-rgb), .22); color: var(--ink); }
.l2-rodape { margin: 0; font-size: .8125rem; color: var(--muted); }
.l2-rodape a { color: inherit; }
@keyframes l2-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes l2-foto { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes l2-sobe-vapor { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes l2-gira { to { transform: rotate(360deg); } }
.js .l2-capa { animation: aparece .8s var(--curva) both; }
.js .l2-foto { animation: l2-foto .7s var(--curva) .2s both; }
.js .l2-perfil h1 { animation: l2-entra .7s var(--curva) .35s both; }
.js .l2-usuario { animation: l2-entra .7s var(--curva) .42s both; }
.js .l2-bio { animation: l2-entra .7s var(--curva) .5s both; }
.js .l2-fatos { animation: l2-entra .7s var(--curva) .55s both; }
.js .l2-ocasioes { animation: l2-entra .7s var(--curva) .6s both; }
.js .l2-wa { animation: l2-entra .7s var(--curva) .66s both; }
.js .l2-apoio { animation: aparece .8s var(--curva) .7s both; }
.js .l2-rotulo { animation: aparece .8s var(--curva) .8s both; }
.js .l2-lista li { animation: l2-entra .7s var(--curva) both; animation-delay: calc(.8s + var(--i) * 60ms); }
.js .l2-redes li { animation: aparece .7s var(--curva) both; animation-delay: calc(1.2s + var(--i) * 40ms); }
.js .l2-rodape { animation: aparece .8s var(--curva) 1.6s both; }
.js .l2-vapor { animation: l2-sobe-vapor 3.6s ease-in-out .8s 1; }
@media (prefers-reduced-motion: reduce) {
  .js .l2-capa, .js .l2-foto, .js .l2-perfil h1, .js .l2-usuario, .js .l2-bio, .js .l2-fatos, .js .l2-ocasioes, .js .l2-wa, .js .l2-apoio, .js .l2-rotulo, .js .l2-lista li, .js .l2-redes li, .js .l2-rodape, .js .l2-vapor, .l2-wa[data-abrindo] .wa-icon { animation: none; }
  .l2-card, .l2-tile, .l2-seta, .l2-rede, .l2-ponto::before, .l2-chip, .l2-chip-ok, .l2-chip-ok path, .l2-wa-texto { transition: none; }
  .l2-chip:active { transform: none; }
  .l2-card:hover, .l2-card:focus-visible, .l2-card:hover .l2-seta, .l2-card:focus-visible .l2-seta, .l2-rede:hover, .l2-rede:focus-visible, .l2-card:active, .l2-rede:active { transform: none; }
}

/* ============================================================ 6. Movimento
   No ritmo dos vídeos Remotion (design/tokens.ts > movimento): fade + deslize curto, curva suave, um bloco por vez.
   Só com JavaScript (classe .js), para nada ficar escondido sem ele; tudo para com "reduzir movimento". */
@keyframes faixa-corre { to { transform: translateX(-50%); } }
@keyframes pulso-cta { 0%, 3%, 100% { transform: scale(1); opacity: 0; } 5% { opacity: .6; } 22% { transform: scale(1.07); opacity: 0; } }
@keyframes sobe-suave { from { opacity: 0; transform: translateY(var(--deslize)); } to { opacity: 1; transform: none; } }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes foto-assenta { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
@keyframes risca { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
/* Entrada do herói ao carregar: rótulo, título palavra a palavra, texto, botões e, por fim, a imagem. */
.js .home-rotulo { animation: aparece .8s var(--curva) both; }
.js .home-p { animation: sobe-suave var(--entrada) var(--curva) both; animation-delay: calc(120ms + var(--i) * 55ms); }
.js .home-rabisco path { animation: risca .7s var(--curva) 1.1s both; }
.js .home-hero .lead { animation: sobe-suave var(--entrada) var(--curva) .75s both; }
.js .home-hero .hero-actions { animation: sobe-suave var(--entrada) var(--curva) .9s both; }
.js .home-hero-fundo img { animation: foto-assenta 1.6s var(--curva) both; }
.js .home-balao { animation: aparece .8s var(--curva) 1.4s both; }
/* Topo das internas: o mesmo ritmo, mais curto (rótulo, título, texto, botões e a ilustração ao lado) */
.js .page-rotulo { animation: aparece .8s var(--curva) both; }
.js .page-hero h1 { animation: sobe-suave var(--entrada) var(--curva) .1s both; }
.js .page-hero .lead { animation: sobe-suave var(--entrada) var(--curva) .25s both; }
.js .page-hero .hero-actions { animation: sobe-suave var(--entrada) var(--curva) .4s both; }
/* Página de links: logo, balão, título (palavra a palavra), texto, WhatsApp, botões em cascata, Instagram. */
.js .links-logo { animation: aparece .8s var(--curva) both; }
.js .links-balao { animation: aparece .8s var(--curva) .9s both; }
.js .links-lead { animation: sobe-suave var(--entrada) var(--curva) .6s both; }
.js .links-wa { animation: sobe-suave var(--entrada) var(--curva) .75s both; }
.js .links-wa::after { animation: pulso-cta 5.6s var(--curva) 2.2s 2 both; }
.js .links-lista li { animation: sobe-suave var(--entrada) var(--curva) both; animation-delay: calc(.9s + var(--i) * 90ms); }
.js .links-instagram { animation: sobe-suave var(--entrada) var(--curva) 1.5s both; }
.js .links-rodape { animation: aparece .8s var(--curva) 1.8s both; }
/* Entrada ao rolar (site.js põe .revelar e, quando o bloco aparece na tela, .revelado) */
.js .revelar { opacity: 0; transform: translateY(var(--deslize)); transition: opacity var(--entrada) var(--curva), transform var(--entrada) var(--curva); transition-delay: var(--atraso, 0ms); }
.js .revelar.revelado { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .site-header nav { transition: none; }   /* menu do celular abre e fecha na hora */
  .home-faixa-trilho { animation: none; }
  .animacoes-prontas .home-hero .button[data-wa="home-topo"]::after { animation: none; opacity: 0; }
  .js body:not(.home) .site-header nav .button[data-wa="cabecalho"]::after { animation: none; opacity: 0; }
  .js .faixa-pausa { display: none; }
  .home-hero-fundo { transition: none; }
  .video-play img, .video-play-icone { transition: none; }
  .video-play:hover img, .video-play:hover .video-play-icone { transform: none; }
  .js .home-rotulo, .js .home-p, .js .home-rabisco path, .js .home-hero .lead, .js .home-hero .hero-actions, .js .home-hero-fundo img, .js .home-balao { animation: none; }
  .js .page-rotulo, .js .page-hero h1, .js .page-hero .lead, .js .page-hero .hero-actions, .js .page-hero-fundo img { animation: none; }
  .js .links-logo, .js .links-balao, .js .links-lead, .js .links-wa, .js .links-wa::after, .js .links-lista li, .js .links-instagram, .js .links-rodape { animation: none; }
  .links-botao, .links-seta, .links-card, .links-card img { transition: none; }
  .links-botao:hover, .links-botao:focus-visible, .links-botao:hover .links-seta, .links-botao:focus-visible .links-seta, .links-card:hover, .links-card:focus-visible, .links-card:hover img, .links-card:focus-visible img, .links-card:hover .links-seta, .links-card:focus-visible .links-seta { transform: none; }
  .js .revelar { opacity: 1; transform: none; transition: none; }
  .wa-bar, .wa-bar.wa-bar-oculta { transition: none; }
  .card, .card-art img, .ig-item img, .button, .link-list a { transition: none; }
  .card-link:hover .card, .card:has(.card-actions):hover, .button-primary:hover { transform: none; }
  .card-link:hover .card-art img, .card:hover .card-art img, .ig-item:hover img { transform: none; }
}

/* ============================================================ 7. Impressão */
@media print { .wa-bar, .site-header nav, .cta-band { display: none; } body { padding: 0; } }