/* ==========================================================================
   mvieiracunha.com.br — tema único (protótipo do redesenho, out/2026)
   Direção: "a rasura". O ato falho (a palavra riscada e reescrita) é o único
   gesto do site, e ele só acontece em palavras: no título do topo, nos passos,
   no convite final e no título dos posts. Embaixo de um link, o mesmo traço
   vira grifo. Fotos e botões são retângulos simples.
   Este arquivo é a única fonte de cor, tipo, espaço e movimento do site.
   ========================================================================== */

:root {
  /* cor: um fundo, uma tinta, um acento, campos */
  --fundo:   #F4F5F1;   /* branco frio, puxado para a sálvia */
  --tom:     #E8EAE4;   /* um degrau de tom, separa superfícies sem linha */
  --tinta:   #16212B;   /* o azul-marinho, como tinta de caneta */
  --suave:   #4A5158;   /* notas secundárias */
  --vinho:   #7B2D3B;   /* o acento: a rasura, o grifo e o botão */
  --sobre-vinho: #FFFFFF;
  --salvia:  #DFE3D8;   /* campo (mesmo do Instagram) */
  --argila:  #E9DCCF;   /* campo (mesmo do Instagram) */
  --noite:   #111A22;   /* painel e rodapé */
  --sobre-noite: #EEF0EC;

  /* tipo: o mesmo par dos carrosséis do Instagram, seis tamanhos */
  --f-titulo: "Libre Baskerville", Georgia, serif;
  --f-texto:  "Work Sans", "Helvetica Neue", Arial, sans-serif;
  --t-nota:   .875rem;
  --t-texto:  clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  --t-chamada: clamp(1.375rem, 1.15rem + .8vw, 1.75rem);
  --t-titulo: clamp(2.125rem, 1.4rem + 3vw, 3.875rem);
  --t-tese:   clamp(3.25rem, 1rem + 5.6vw, 6rem);

  /* espaço */
  --margem: clamp(16px, 2.4vw, 36px);
  --vao: clamp(16px, 2vw, 28px);
  --secao: clamp(104px, 8.5vw, 140px);

  /* o traço: levemente inclinado, como feito à mão */
  --traco-fino: polygon(0 22%, 100% 0, 100% 78%, 0 100%);

  /* movimento */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);

  color-scheme: light;
  scrollbar-color: var(--suave) var(--tom);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  caret-color: var(--vinho);
  font: 400 var(--t-texto)/1.55 var(--f-texto);
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 400; text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--vinho); outline-offset: 4px; }
.painel-quem :focus-visible, .rodape :focus-visible { outline-color: var(--argila); }
::selection { background: var(--argila); color: var(--tinta); }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.pular {
  position: absolute; left: var(--margem); top: -120px; z-index: 50;
  background: var(--tinta); color: var(--fundo); padding: 10px 16px; text-decoration: none;
}
.pular:focus { top: 12px; }

/* ---------- moldura: uma grade, uma margem ---------- */
.grade {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--vao);
  padding-left: max(var(--margem), env(safe-area-inset-left, 0px));
  padding-right: max(var(--margem), env(safe-area-inset-right, 0px));
}
.secao { padding-block: var(--secao) 0; }
.titulo { font: 400 var(--t-titulo)/1 var(--f-titulo); letter-spacing: -.02em; }
.nota { font-size: var(--t-nota); line-height: 1.5; color: var(--suave); }

/* ---------- a rasura: só em palavras ---------- */
del { position: relative; text-decoration: none; color: var(--suave); white-space: nowrap; }
del::after {
  content: ""; position: absolute; left: -.05em; right: -.08em; top: 50%; height: .09em; min-height: 3px;
  background: var(--vinho); clip-path: var(--traco-fino);
  transform: translateY(-50%) rotate(-4deg);
}
ins { text-decoration: none; font-style: italic; }

/* o traço como grifo (links de texto) */
.grifo { position: relative; text-decoration: none; display: inline-block; padding-bottom: .18em; }
.grifo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: .14em; min-height: 3px;
  background: var(--vinho); clip-path: var(--traco-fino);
  transform-origin: left; transition: transform 260ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .grifo:hover::after { transform: scaleX(1.06); } }
.painel-quem .grifo::after, .rodape .grifo::after { background: var(--argila); }

/* fotos: retângulos, todas com o mesmo tratamento do Instagram */
.foto { overflow: hidden; background: var(--tom); }
.foto img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.55) contrast(.98); }
.foto--fria img { filter: saturate(.3) contrast(.98); }

/* botão: um formato, um rótulo */
.botao {
  display: inline-flex; align-items: center; gap: .6em;
  min-height: 56px; padding: 0 1.6em;
  color: var(--sobre-vinho); background: var(--vinho); border: 0; cursor: pointer;
  font: 500 var(--t-texto)/1 var(--f-texto); letter-spacing: -.005em; text-decoration: none;
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.botao:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .botao:hover { background: var(--tinta); } }
.seta { display: inline-block; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { a:hover .seta { transform: translateX(4px); } }

/* ---------- barra de topo ---------- */
.topo { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--fundo); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 21; background: var(--fundo); }
.topo .grade { align-items: center; min-height: 76px; }
.escrever-fone { display: none; }
.marca { grid-column: 1 / 6; text-decoration: none; font: 400 var(--t-chamada)/1 var(--f-titulo); letter-spacing: -.01em; }
.nav { grid-column: 6 / 13; display: flex; justify-content: flex-end; align-items: center; gap: 28px; }
.nav ul { display: flex; gap: 24px; }
.nav ul a { text-decoration: none; padding-block: 12px; }
.nav ul a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--vinho); text-decoration-thickness: 2px; text-underline-offset: .35em; }
@media (hover: hover) and (pointer: fine) { .nav ul a:hover { text-decoration: underline; text-decoration-color: var(--vinho); text-decoration-thickness: 2px; text-underline-offset: .35em; } }
.nav .botao { min-height: 48px; }
.menu-botao { display: none; }
@media (max-width: 1180px) {
  .marca { grid-column: 1 / 8; font-size: 1.1875rem; line-height: 1.1; white-space: nowrap; }
}
@media (max-width: 520px) {
  .marca-resto { display: none; }
}
@media (max-width: 1180px) {
  .escrever-fone { display: inline-flex; grid-column: 8 / 11; justify-self: end; min-height: 44px; padding: 0 1em; }
  .menu-botao {
    grid-column: 11 / 13; justify-self: end; display: inline-flex; align-items: center;
    min-height: 48px; padding: 0 2px; background: none; border: 0; color: var(--tinta);
    font: 500 var(--t-texto)/1 var(--f-texto); cursor: pointer; min-width: 4.2em; justify-content: flex-end;
  }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
    flex-direction: column; align-items: stretch; gap: 20px;
    padding: 12px max(var(--margem), env(safe-area-inset-right, 0px)) 28px max(var(--margem), env(safe-area-inset-left, 0px));
    background: var(--tom);
    box-shadow: 0 18px 40px rgba(17, 26, 34, .14); /* taste-skill-ignore: o menu aberto flutua sobre a página */
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s linear 200ms;
  }
  .topo[data-menu="aberto"] .nav { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav ul a { display: block; padding-block: 12px; font: 400 var(--t-chamada)/1.2 var(--f-titulo); }
  .nav .botao { align-self: flex-start; }
}

/* ---------- topo: a tese ---------- */
/* o topo cabe na tela: altura da janela menos a barra; frase e espaços encolhem em telas baixas */
.hero .grade { min-height: min(calc(100svh - 76px), 860px); align-items: center; }
.hero-texto { grid-column: 1 / 7; display: flex; flex-direction: column; gap: clamp(12px, 2.6svh, 28px); padding-block: clamp(16px, 4svh, 40px) clamp(20px, 5svh, 56px); min-width: 0; }
.tese { font: 400 min(var(--t-tese), 12svh)/.95 var(--f-titulo); letter-spacing: -.03em; }
.hero h1 { font-size: var(--t-chamada); line-height: 1.3; font-weight: 500; letter-spacing: -.015em; max-width: 22em; }
.hero-foto { grid-column: 7 / 13; align-self: stretch; display: flex; flex-direction: column; gap: 10px; padding-block: 0 16px; margin-right: calc(-1 * max(var(--margem), env(safe-area-inset-right, 0px))); }
.hero-foto .foto { position: relative; flex: 1 1 0; min-height: 0; }
.hero-foto .foto img { position: absolute; inset: 0; }
.hero-foto figcaption { padding-right: max(var(--margem), env(safe-area-inset-right, 0px)); }

.tese-bloco { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.trocar { display: none; }
.js .trocar {
  display: inline-flex; align-items: center; gap: .45em; min-height: 44px; padding: 0 2px;
  background: none; border: 0; cursor: pointer; color: var(--vinho);
  font: 500 var(--t-nota)/1 var(--f-texto);
  transition: transform 160ms var(--ease-out);
}
.js .trocar::before { content: "↻" / ""; font-size: 1.1em; transition: transform 300ms var(--ease-out); }
.trocar:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .trocar:hover::before { transform: rotate(90deg); } }
.reescrever { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.para-ler { font-size: var(--t-nota); color: var(--suave); min-height: 3em; }
.para-ler .grifo { color: var(--tinta); }
.trocar-rotulo { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .35em; }
.trocar-conta { color: var(--suave); display: inline-block; margin-left: .3em; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) { .para-ler.troca { animation: reescrita 520ms var(--ease-out) both; } }
.crise { font-size: var(--t-nota); color: var(--suave); }
.crise a { color: var(--tinta); font-weight: 600; display: inline-block; padding: 12px 2px; margin-block: -12px; }

@media (max-width: 860px) {
  .hero .grade { min-height: 0; }
  .hero-texto { grid-column: 1 / -1; padding-block: 24px 40px; gap: 22px; }
  .hero-foto { grid-column: 1 / -1; margin-left: calc(-1 * max(var(--margem), env(safe-area-inset-left, 0px))); }
  .hero-foto .foto { flex: none; min-height: 0; aspect-ratio: 4 / 3.6; }
  .hero-foto figcaption { padding-inline: max(var(--margem), env(safe-area-inset-left, 0px)); }
}

/* ---------- por onde começar: três caminhos ---------- */
.caminhos-cabeca { grid-column: 1 / -1; margin-bottom: 56px; }
.caminhos { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--vao); }
.caminhos a { display: flex; flex-direction: column; gap: 8px; text-decoration: none; }
.caminhos .foto { aspect-ratio: 4 / 3; margin-bottom: 12px; }
.caminhos b { font: 400 var(--t-chamada)/1.15 var(--f-titulo); transition: color 200ms ease; }
.caminhos .onde { font-size: var(--t-nota); color: var(--suave); }
.caminhos p { max-width: 34ch; }
.caminhos .ir { color: var(--vinho); font-weight: 500; margin-top: 4px; }
.caminhos-extra { grid-column: 1 / -1; margin-top: 48px; }
@media (hover: hover) and (pointer: fine) { .caminhos a:hover b { color: var(--vinho); } }
@media (max-width: 860px) {
  .caminhos { grid-template-columns: 1fr; gap: 48px; }
  .caminhos .foto { aspect-ratio: 16 / 9; }
}

/* ---------- o primeiro contato: frases reescritas, uma por linha ---------- */
.contato-cabeca { grid-column: 1 / 6; display: flex; flex-direction: column; gap: 20px; }
.passos { grid-column: 7 / 13; display: flex; flex-direction: column; gap: 40px; }
.passos li { display: flex; flex-direction: column; gap: 12px; }
.passos h3 { font: 400 var(--t-chamada)/1.2 var(--f-titulo); letter-spacing: -.01em; }
.passos p { max-width: 40ch; }
@media (max-width: 860px) {
  .contato-cabeca, .passos { grid-column: 1 / -1; }
  .passos { margin-top: 48px; gap: 44px; }
}

/* ---------- do que se fala aqui: parede de palavras ---------- */
.parede-cabeca { grid-column: 1 / -1; margin-bottom: 48px; }
.parede { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding-inline: 8px; }
.parede > * { aspect-ratio: 4 / 3; position: relative; display: flex; align-items: center; justify-content: center; text-decoration: none; overflow: hidden; }
.parede .palavra { font: 400 var(--t-titulo)/1 var(--f-titulo); letter-spacing: -.02em; text-align: center; padding: 0 6%; transition: transform 300ms var(--ease-out); }
.parede small { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font-size: var(--t-nota); }
.parede .c1 { background: var(--salvia); }
.parede .c2 { background: var(--argila); }
.parede figure img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.55); }
.parede a small::after { content: "→" / ""; margin-left: .35em; color: var(--vinho); display: inline-block; transition: transform 200ms var(--ease-out); }
.parede .palavra { position: relative; }
.parede a .palavra::after {
  content: ""; position: absolute; left: 6%; right: 6%; bottom: -.12em; height: .08em; min-height: 3px;
  background: var(--vinho); clip-path: var(--traco-fino); transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .parede a:hover .palavra::after { transform: scaleX(1); }
  .parede a:hover small::after { transform: translateX(4px); }
}
.parede a:focus-visible { outline-offset: -6px; }
@media (max-width: 760px) {
  .parede { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding-inline: 6px; }
  .parede > * { aspect-ratio: 1; }
  .parede .palavra { font-size: clamp(2.125rem, 9vw, 2.75rem); }
}

/* ---------- quem vai te escutar: painel com retrato ---------- */
.painel-quem {
  margin-inline: 20px; background: var(--noite); color: var(--sobre-noite);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--vao);
  overflow: hidden;
}
.painel-quem .esq { grid-column: 1 / 7; padding: 56px; display: flex; flex-direction: column; gap: 40px; }
/* a foto fica emoldurada pelo painel, como um paspatur: a mesma margem dos quatro lados */
.painel-quem .esq .foto { width: min(40vw, 560px); aspect-ratio: 4 / 5; margin-top: auto; }
.painel-quem .dir { grid-column: 8 / 12; padding-block: 56px; display: flex; flex-direction: column; gap: 48px; }
.painel-quem .bloco { display: flex; flex-direction: column; gap: 14px; }
.painel-quem h3 { font: 400 var(--t-chamada)/1.2 var(--f-titulo); }
.painel-quem p { color: rgba(238, 240, 236, .86); }
.formacao { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; }
.formacao dt { font-variant-numeric: tabular-nums; color: var(--argila); }
@media (max-width: 860px) {
  .painel-quem { margin-inline: 10px; display: flex; flex-direction: column; }
  .painel-quem .esq { display: contents; }
  .painel-quem .esq .titulo { padding: 40px 24px 0; }
  .painel-quem .dir { padding: 32px 24px; gap: 32px; }
  .painel-quem .esq .foto { order: 3; width: 86%; margin: 0 auto 7%; }
}

/* ---------- o consultório: três fotos, sem casas vazias ---------- */
.escada-cabeca { grid-column: 1 / -1; margin-bottom: 16px; }
.sala { grid-column: 1 / -1; display: grid; grid-template-columns: 2fr 1fr; gap: var(--vao); align-items: end; }
.sala figure { display: flex; flex-direction: column; gap: 10px; }
.sala .foto { aspect-ratio: 4 / 5; }
.sala .larga .foto { aspect-ratio: 8 / 5; }
.sala figcaption { font-size: var(--t-nota); color: var(--suave); white-space: nowrap; }
.endereco { grid-column: 1 / -1; margin-bottom: 40px; }
@media (max-width: 760px) {
  .sala { grid-template-columns: 1fr 1fr; gap: 24px 10px; }
  .sala .larga { grid-column: 1 / -1; }
}

/* ---------- antes de começar: uma dúvida aberta por vez ---------- */
.fichas-cabeca { grid-column: 3 / 11; margin-bottom: 48px; }
.fichas { grid-column: 3 / 11; display: flex; flex-direction: column; }
.ficha { background: var(--c); }
.ficha + .ficha { margin-top: 6px; }
.ficha:nth-child(odd) { --c: var(--salvia); }
.ficha:nth-child(even) { --c: var(--argila); }
.ficha > button {
  position: relative; display: block; width: 100%; text-align: left; border: 0; cursor: pointer; color: var(--tinta);
  background: none; padding: 24px 64px 24px 28px; font: 500 var(--t-texto)/1.35 var(--f-texto); letter-spacing: -.01em;
}
.ficha > button::after {
  content: "+"; position: absolute; right: 28px; top: 50%; margin-top: -.5em; font: 400 1.5rem/1 var(--f-texto); color: var(--vinho);
  transition: transform 200ms var(--ease-out);
}
.ficha > button[aria-expanded="true"]::after { transform: rotate(45deg); }
.ficha .resposta { padding: 0 28px 28px; }
.ficha .resposta p { max-width: 52ch; }
.ficha .resposta[hidden] { display: none; }
@media (max-width: 860px) {
  .fichas-cabeca, .fichas { grid-column: 1 / -1; }
  .ficha > button { padding: 20px 56px 20px 20px; }
  .ficha > button::after { right: 20px; }
  .ficha .resposta { padding: 0 20px 26px; }
}

/* ---------- convite final ---------- */
.convite-final { background: var(--argila); padding-block: clamp(80px, 9vw, 140px); margin-top: var(--secao); }
.convite-final .grade { align-items: center; row-gap: 48px; }
.convite-texto { grid-column: 1 / 8; display: flex; flex-direction: column; gap: 24px; }
.convite-texto p { max-width: 40ch; }
.convite-acao { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; font-variant-numeric: tabular-nums; }
.garantias { display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: var(--t-nota); color: var(--suave); }
.convite-foto { grid-column: 9 / 13; }
.convite-foto .foto { aspect-ratio: 1; }
@media (max-width: 860px) {
  .convite-texto, .convite-foto { grid-column: 1 / -1; }
  .convite-foto { max-width: 320px; }
}

/* ---------- rodapé: o nome em grande ---------- */
.rodape { background: var(--noite); color: var(--sobre-noite); padding-block: 96px 36px; }
.rodape .nome { grid-column: 1 / -1; font: 400 var(--t-tese)/.92 var(--f-titulo); letter-spacing: -.03em; }
.rodape .nome span { display: block; }
.rodape .links { grid-column: 1 / 9; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; margin-top: 56px; font-size: var(--t-nota); }
.rodape .links a { text-decoration: none; padding-block: 10px; }
.rodape address { grid-column: 9 / 13; margin-top: 66px; font-style: normal; font-size: var(--t-nota); display: flex; flex-direction: column; gap: 4px; }
.rodape .fim { grid-column: 1 / -1; margin-top: 64px; display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; font-size: var(--t-nota); color: rgba(238, 240, 236, .78); }
@media (hover: hover) and (pointer: fine) { .rodape .links a:hover { color: var(--argila); } }
@media (max-width: 760px) {
  .rodape .nome { font-size: clamp(2.25rem, 10.6vw, 3.25rem); }
  .rodape .links { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .rodape address { grid-column: 1 / -1; margin-top: 32px; }
}

/* ---------- post ---------- */
.progresso { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 40; background: var(--vinho); transform-origin: left; transform: scaleX(0); }
.post-cabeca .grade { row-gap: 28px; padding-top: 32px; }
.post-cabeca .trilha { grid-column: 1 / -1; font-size: var(--t-nota); color: var(--suave); }
.post-cabeca .trilha a { color: inherit; }
.post-cabeca .titulos { grid-column: 1 / 8; display: flex; flex-direction: column; gap: 18px; align-self: center; padding-bottom: 8px; }
.post-cabeca h1 { font: 400 var(--t-tese)/.95 var(--f-titulo); letter-spacing: -.03em; }
.post-cabeca .sub { font: 400 var(--t-chamada)/1.25 var(--f-titulo); color: var(--suave); }
.post-cabeca .meta { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: var(--t-nota); color: var(--suave); margin-top: 10px; }
.post-cabeca .foto { grid-column: 8 / 13; aspect-ratio: 4 / 3; align-self: center; margin-right: calc(-1 * max(var(--margem), env(safe-area-inset-right, 0px))); }
@media (max-width: 860px) {
  .post-cabeca .titulos { grid-column: 1 / -1; }
  .post-cabeca .foto { grid-column: 1 / -1; aspect-ratio: 16 / 10; margin-left: calc(-1 * max(var(--margem), env(safe-area-inset-left, 0px))); }
}

.post-corpo .grade { align-items: start; padding-top: 96px; }
.sumario { grid-column: 1 / 4; position: sticky; top: 108px; display: flex; flex-direction: column; gap: 14px; }
.sumario h2 { font: 500 var(--t-texto)/1.3 var(--f-texto); }
.sumario ol { display: flex; flex-direction: column; gap: 2px; }
.sumario a { display: inline-block; padding-block: 5px; font-size: var(--t-nota); line-height: 1.4; color: var(--suave); text-decoration: none; position: relative; transition: color 180ms ease; }
.sumario a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 4px; background: var(--vinho); clip-path: var(--traco-fino); transform: scaleX(0); transform-origin: left; transition: transform 260ms var(--ease-out); }
.sumario a[aria-current="true"] { color: var(--tinta); }
.sumario a[aria-current="true"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .sumario a:hover { color: var(--tinta); } }
.sumario-fone { display: none; }

.leitura { grid-column: 4 / 10; min-width: 0; font-size: var(--t-texto); line-height: 1.65; }
.leitura > * + * { margin-top: 1.05em; }
.leitura .abertura { font-size: var(--t-chamada); line-height: 1.42; letter-spacing: -.012em; }
.leitura h2 { font: 400 var(--t-chamada)/1.2 var(--f-titulo); letter-spacing: -.015em; margin-top: 2.4em; scroll-margin-top: 100px; }
.leitura strong { font-weight: 600; }
.leitura a:not(.grifo):not(.botao) { color: var(--vinho); text-underline-offset: .2em; }
.destaque { margin: 2.2em 0 !important; padding: 36px 0; font: 400 var(--t-chamada)/1.3 var(--f-titulo); letter-spacing: -.01em; }
.destaque mark { background: none; color: inherit; position: relative; }
.destaque mark::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.06em; height: .12em; background: var(--vinho); clip-path: var(--traco-fino); }
.convite { background: var(--salvia); padding: 28px 30px; font-size: var(--t-texto); display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.leitura .fichas { margin-top: 28px; }
.assinatura { margin-top: 2.4em !important; font: italic 400 var(--t-chamada)/1.2 var(--f-titulo); }
.assinatura + .nota { margin-top: 8px !important; }
@media (max-width: 1100px) { .leitura { grid-column: 4 / 12; } }
@media (max-width: 860px) {
  .post-corpo .grade { padding-top: 48px; }
  .sumario { display: none; }
  .leitura { grid-column: 1 / -1; }
  .sumario-fone { display: block; background: var(--tom); padding: 4px 20px; margin-bottom: 1.6em; }
  .sumario-fone summary { cursor: pointer; padding-block: 14px; font-weight: 500; }
  .sumario-fone ol { padding-bottom: 14px; display: flex; flex-direction: column; }
  .sumario-fone a { display: block; padding-block: 8px; color: var(--suave); text-decoration: none; font-size: var(--t-nota); }
}

.leia-cabeca { grid-column: 1 / -1; margin-bottom: 48px; }
.leia-lista { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--vao); }
.leia-lista a { display: flex; flex-direction: column; gap: 12px; text-decoration: none; }
.leia-lista .foto { aspect-ratio: 4 / 3; margin-bottom: 6px; }
.leia-lista b { font: 400 var(--t-chamada)/1.15 var(--f-titulo); transition: color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .leia-lista a:hover b { color: var(--vinho); } }
@media (max-width: 760px) { .leia-lista { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- movimento: um gesto principal (a rasura), o resto discreto ---------- */
@media (prefers-reduced-motion: no-preference) {
  .tese del::after, .post-cabeca h1 del::after { animation: risco 640ms var(--ease-in-out) 500ms both; }
  @keyframes risco { from { clip-path: polygon(0 22%, 0 22%, 0 78%, 0 100%); } }
  .tese ins, .post-cabeca h1 ins { display: inline-block; animation: reescrita 640ms var(--ease-out) 1050ms both; }
  @keyframes reescrita { from { opacity: 0; transform: translateY(.1em); filter: blur(6px); } }
  .tese ins.troca { animation: reescrita 520ms var(--ease-out) both; }
  .hero-foto .foto { animation: obturador 1100ms var(--ease-in-out) 150ms both; }
  .hero-foto .foto img { animation: assenta 1600ms var(--ease-out) 150ms both; }
  @keyframes obturador { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
  @keyframes assenta { from { transform: scale(1.12); } }
  /* passos e convite: o traço risca quando a frase entra na tela */
  .anima [data-entra] del::after { clip-path: polygon(0 22%, 0 22%, 0 78%, 0 100%); transition: clip-path 560ms var(--ease-in-out) 350ms; }
  .anima [data-entra].dentro del::after { clip-path: var(--traco-fino); }
  .anima [data-entra] > * { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
  .anima [data-entra].dentro > * { opacity: 1; transform: none; }
  .anima [data-entra].dentro > *:nth-child(2) { transition-delay: 80ms; }
  .anima [data-entra].dentro > *:nth-child(3) { transition-delay: 160ms; }
  .anima [data-entra].dentro > *:nth-child(4) { transition-delay: 240ms; }
  .anima [data-entra].dentro > *:nth-child(n+5) { transition-delay: 320ms; }
  .lento img { animation: deriva 24s ease-in-out infinite alternate; }
  @keyframes deriva { to { transform: scale(1.06) translateX(-1.5%); } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
}

/* ---------- botão flutuante do WhatsApp (só no celular) ----------
   Aparece depois da primeira tela e some quando o convite final ou o rodapé estão visíveis. */
.flutuante { display: none; }
@media (max-width: 860px) {
  .flutuante {
    position: fixed; z-index: 15;
    right: calc(16px + env(safe-area-inset-right, 0px));
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    width: 56px; height: 56px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--vinho); color: var(--sobre-vinho);
    box-shadow: 0 8px 24px rgba(17, 26, 34, .22); /* taste-skill-ignore: botão fixo que flutua sobre o conteúdo */
    transition: opacity 200ms ease, transform 200ms var(--ease-out), visibility 0s linear 0s;
  }
  .flutuante svg { width: 26px; height: 26px; }
  .flutuante:active { transform: scale(.94); }
  .flutuante[data-escondido="sim"] {
    opacity: 0; visibility: hidden; transform: translateY(16px) scale(.96); pointer-events: none;
    transition: opacity 200ms ease, transform 200ms var(--ease-out), visibility 0s linear 200ms;
  }
}