/* =========================================================
   Roberta Vasconcelos, psicóloga clínica
   styles.css

   Ordem: tokens, base, layout, componentes, seções,
   utilitários e, por último, movimento.
   A paleta é a da seção 5.1 do briefing (provisória até o
   logo chegar; ver PENDENCIAS.md). Os contrastes estão
   no README.md e podem ser recalculados com
   scripts/contraste.py.
   ========================================================= */


/* ---------- 1. Tokens ---------- */

:root {
  /* Fundos */
  --c-papel: #F8F3EC;        /* fundo principal, creme de papel de livro */
  --c-areia: #EFE4D6;        /* fundo de seções alternadas */
  --c-trigo: #E4D3BD;        /* placeholders de foto, painel presencial */
  --c-vinho-noite: #3E1820;  /* seção de agendamento e rodapé */

  /* Texto */
  --c-tinta: #33191C;        /* texto principal e títulos */
  --c-texto-suave: #6A4F4F;  /* texto secundário */
  --c-nevoa: #E8D8CB;        /* texto corrido sobre vinho-noite */

  /* Acentos */
  --c-vinho: #7A2B38;        /* acento principal: botões, fita 1, links, margem do caderno */
  --c-mostarda: #D4A03A;     /* acento secundário: fita 2, traços, pontilhados. Nunca texto sobre fundo claro */
  --c-mostarda-texto: #8A6114; /* mostarda escuro, para texto pequeno dourado sobre papel */

  /* Linhas e sombras (sempre tingidas, nunca cinza) */
  --c-linha: rgba(51, 25, 28, 0.14);
  --c-linha-noite: rgba(232, 216, 203, 0.18);
  --c-campo: rgba(51, 25, 28, 0.5);   /* borda de campo de formulário, 3:1 sobre papel */
  --sombra-suave: 0 1px 2px rgba(51, 25, 28, 0.06), 0 14px 34px -14px rgba(51, 25, 28, 0.22);
  --sombra-flutuante: 0 2px 4px rgba(51, 25, 28, 0.08), 0 26px 50px -18px rgba(51, 25, 28, 0.34);
  --sombra-noite: 0 2px 6px rgba(20, 6, 9, 0.28), 0 34px 70px -24px rgba(20, 6, 9, 0.7);

  /* Tipografia */
  --f-serifa: "Literata", Georgia, "Times New Roman", serif;
  --f-sans: "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-assinatura: "Mrs Saint Delafield", "Segoe Script", cursive;

  --t-h1: clamp(2.9rem, 1.4rem + 4.8vw, 5.5rem);
  --t-h2: clamp(2rem, 1.3rem + 2.4vw, 3.4rem);
  --t-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --t-pensamento: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem);
  --t-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --t-corpo: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --t-pequeno: 0.875rem;

  /* Espaçamento */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* Forma */
  --r-pill: 999px;
  --r-papel: 6px;
  --r-md: 14px;
  --r-lg: 22px;

  /* Layout */
  --container: 1200px;
  --gutter: clamp(20px, 5vw, 48px);
  --header-h: 64px;
  --secao-y: clamp(80px, 10vw, 144px);

  /* Movimento */
  --ease-saida: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-pagina: cubic-bezier(0.65, 0, 0.35, 1);
  --t-resposta: 300ms;

  /* Grão de papel (feTurbulence em data URI) */
  --grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

@media (min-width: 1024px) {
  :root { --header-h: 76px; }
}


/* ---------- 2. Base ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  background: var(--c-papel);
  color: var(--c-tinta);
  font-family: var(--f-sans);
  font-size: var(--t-corpo);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--f-serifa);
  font-optical-sizing: auto;
  font-weight: 400;
  text-wrap: balance;
}

h2 {
  font-size: var(--t-h2);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

h3 {
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.005em;
}

p {
  margin: 0;
  max-width: 62ch;
  text-wrap: pretty;
}

ul, ol { margin: 0; padding: 0; }

img, svg { display: block; }
img { max-width: 100%; height: auto; }

a { color: inherit; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; }

::selection {
  background: rgba(212, 160, 58, 0.34);
  color: var(--c-tinta);
}

:focus-visible {
  outline: 2px solid var(--c-vinho);
  outline-offset: 3px;
}

.secao--noite :focus-visible { outline-color: var(--c-mostarda); }
.secao--noite .cartao-form :focus-visible { outline-color: var(--c-vinho); }


/* ---------- 3. Layout ---------- */

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.secao { padding-block: var(--secao-y); }
.secao--papel { background-color: var(--c-papel); }
.secao--areia { background-color: var(--c-areia); }
.secao--noite { background-color: var(--c-vinho-noite); color: var(--c-nevoa); }

/* Grade de 12 colunas a partir de 900px */
@media (min-width: 900px) {
  .grade {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
  }
}

/* Grão de papel: só sobre papel e areia */
.grao {
  position: relative;
  isolation: isolate;
}

.grao::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--grao);
  background-size: 220px 220px;
  opacity: 0.035;
  mix-blend-mode: multiply;
}


/* ---------- 4. Componentes ---------- */

/* 4.1 Ícones (SVG em traço, 24px) */
.icone {
  flex: none;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icone--cheio {
  fill: currentColor;
  stroke: none;
}

/* 4.2 Botões */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border: 0;
  border-radius: var(--r-pill);
  font-family: var(--f-sans);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 200ms ease, color 200ms ease;
}

.botao .icone { width: 20px; height: 20px; }

.botao--primario {
  background-color: var(--c-vinho);
  color: var(--c-papel);
}

.botao--primario:hover { background-color: var(--c-tinta); }

.botao--claro {
  background-color: var(--c-mostarda);
  color: var(--c-tinta);
}

.botao--claro:hover { background-color: var(--c-papel); }

.botao--compacto {
  min-height: 44px;
  padding: 0 20px;
  font-size: 0.9375rem;
}

.botao--largo {
  width: 100%;
  white-space: normal;
  text-align: center;
  line-height: 1.25;
  padding-block: 12px;
}

/* 4.3 Link de texto: sublinhado fino que cresce da esquerda */
.link-texto {
  color: var(--c-tinta);
  font-weight: 500;
  text-decoration: none;
  padding-bottom: 3px;
  background-image:
    linear-gradient(var(--c-vinho), var(--c-vinho)),
    linear-gradient(var(--c-linha), var(--c-linha));
  background-position: 0 100%, 0 100%;
  background-size: 0% 1px, 100% 1px;
  background-repeat: no-repeat;
  transition: background-size 320ms var(--ease-saida), color 200ms ease;
}

.link-texto:hover {
  color: var(--c-vinho);
  background-size: 100% 1px, 100% 1px;
}

.secao--noite .link-texto {
  color: var(--c-mostarda);
  background-image:
    linear-gradient(var(--c-mostarda), var(--c-mostarda)),
    linear-gradient(var(--c-linha-noite), var(--c-linha-noite));
}

.secao--noite .link-texto:hover { color: var(--c-papel); }

/* 4.4 A fita (marcador de página)
   Controle por variáveis:
   --fita-x            posição horizontal (porcentagem da foto ou do cartão)
   --fita-comprimento  comprimento da fita 1 (a fita 2 tem cerca de 75%)
   --fita-largura      largura da fita 1 (a fita 2 usa --fita-largura-2) */
.fitas {
  --fita-largura: 14px;
  --fita-largura-2: 10px;
  --fita-comprimento: 160px;
  --fita-comprimento-2: calc(var(--fita-comprimento) * 0.75);
  position: absolute;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  pointer-events: none;
}

@media (min-width: 900px) {
  .fitas {
    --fita-largura: 18px;
    --fita-largura-2: 12px;
  }
}

.fita {
  position: relative;
  display: block;
  flex: none;
  width: var(--fita-largura);
  height: var(--fita-comprimento);
  transform-origin: top center;
  filter: drop-shadow(0 3px 4px rgba(51, 25, 28, 0.28));
  --fita-cor: var(--c-vinho);
  --fita-v: 12px;
}

.fita--2 {
  width: var(--fita-largura-2);
  height: var(--fita-comprimento-2);
  --fita-cor: var(--c-mostarda);
  --fita-v: 9px;
}

.fita__tecido {
  position: absolute;
  inset: 0;
  transform-origin: top center;
  background:
    linear-gradient(90deg,
      rgba(51, 25, 28, 0.22) 0%,
      transparent 20%,
      rgba(255, 248, 236, 0.16) 44%,
      transparent 62%,
      rgba(51, 25, 28, 0.16) 100%),
    var(--fita-cor);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - var(--fita-v)), 0 100%);
}

/* 4.5 Foto com placeholder que se substitui sozinho */
.foto {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background-color: var(--c-trigo);
  --foto-raio: var(--r-papel);
  border-radius: var(--foto-raio);
}

.foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.foto__placeholder {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 32px;
  text-align: center;
  font-family: var(--f-sans);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--c-texto-suave);
}

.foto__placeholder::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1.5px dashed rgba(122, 43, 56, 0.4);
  border-radius: var(--foto-raio);
}

.foto__placeholder .icone {
  width: 32px;
  height: 32px;
  margin-bottom: 10px;
  color: var(--c-vinho);
}

.foto__placeholder-titulo { font-weight: 600; }

.foto--vazia img { opacity: 0; }
.foto--vazia .foto__placeholder { display: flex; }

/* 4.6 Acesso direto ao conteúdo */
.pular {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: var(--r-pill);
  background: var(--c-tinta);
  color: var(--c-papel);
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 200ms ease;
}

.pular:focus { transform: none; }

/* 4.7 Ícones delicados (traço mais fino, mesma família) */
.icone--fino { stroke-width: 1.25; }

.pesa__nome .icone,
.principios dt .icone,
.caderno__titulo .icone {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  vertical-align: -4px;
  color: var(--c-vinho);
}

.caderno__titulo .icone {
  width: 24px;
  height: 24px;
  vertical-align: -5px;
}

.fase__icone {
  position: absolute;
  top: 24px;
  right: 0;
  width: 28px;
  height: 28px;
  color: var(--c-vinho);
}

/* 4.8 Preloader: uma abertura de livro de 3 segundos.
   Só existe com JS e sem movimento reduzido (classe preloader-ativo,
   colocada pelo script do head). A saída é marcada no próprio CSS,
   então ele some mesmo se algum script falhar. */
.preloader { display: none; }

html.preloader-ativo { overflow: hidden; }

.preloader-ativo .preloader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
  background-color: var(--c-papel);
  background-image: radial-gradient(55% 60% at 84% 16%, rgba(212, 160, 58, 0.14), transparent 70%);
  cursor: pointer;
  animation: preloader-sai 450ms var(--ease-pagina) 2550ms forwards;
}

.preloader-saindo .preloader { animation: preloader-sai-agora 420ms var(--ease-pagina) forwards; }

.preloader__fitas {
  top: 0;
  right: 16vw;
  --fita-comprimento: 34vh;
}

.preloader__centro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.preloader__marca {
  width: 60px;
  height: 66px;
  overflow: visible;
}

/* O Ψ se desenha em dois traços: arco e haste */
.preloader__traco {
  fill: none;
  stroke: var(--c-vinho);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: grifar 900ms var(--ease-saida) 200ms forwards;
}

.preloader__traco--haste { animation-delay: 600ms; }

.preloader__nome {
  max-width: none;
  margin-top: 26px;
  font-family: var(--f-serifa);
  font-optical-sizing: auto;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  font-weight: 450;
  line-height: 1.2;
  letter-spacing: -0.01em;
  animation: hero-sobe-curto 700ms var(--ease-saida) 1000ms both;
}

.preloader__frase {
  margin-top: 6px;
  font-family: var(--f-serifa);
  font-optical-sizing: auto;
  font-size: 1.0625rem;
  font-style: italic;
  color: var(--c-texto-suave);
  animation: hero-sobe-curto 700ms var(--ease-saida) 1300ms both;
}

.preloader__progresso {
  position: relative;
  display: block;
  width: 160px;
  height: 1px;
  margin-top: 32px;
  overflow: hidden;
  background: var(--c-linha);
  animation: aparece 400ms ease 300ms both;
}

.preloader__progresso span {
  position: absolute;
  inset: 0;
  background: var(--c-vinho);
  transform: scaleX(0);
  transform-origin: left center;
  animation: progresso 2300ms cubic-bezier(0.45, 0.05, 0.3, 1) 250ms forwards;
}

.preloader__fitas .fita {
  animation:
    fita-desce 1000ms var(--ease-saida) 250ms backwards,
    fita-assenta 900ms ease-in-out 1150ms;
}

.preloader__fitas .fita--2 { animation-delay: 370ms, 1270ms; }

/* 4.9 Abas do caderno: a pílula escura desliza até a aba escolhida */
.abas { position: relative; }

.abas__indicador {
  position: absolute;
  top: 4px;
  left: 0;
  display: none;
  width: 0;
  height: calc(100% - 8px);
  border-radius: var(--r-pill);
  background: var(--c-tinta);
  transition: transform 380ms var(--ease-saida), width 380ms var(--ease-saida);
}

.abas.tem-indicador .abas__indicador { display: block; }
.abas.tem-indicador .aba { position: relative; z-index: 1; }
.abas.tem-indicador .aba[aria-selected="true"] { background-color: transparent; }

/* 4.10 Títulos revelados palavra por palavra (o JS divide as palavras) */
.palavra {
  display: inline-block;
  clip-path: inset(-0.3em -0.15em -0.24em -0.15em);
}

.palavra > span { display: inline-block; }


/* ---------- 5. Seções ---------- */

/* 9.0 Header */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  margin-bottom: calc(-1 * var(--header-h));
  border-bottom: 1px solid transparent;
  transition: background-color 250ms ease, border-color 250ms ease, backdrop-filter 250ms ease;
}

.cabecalho.is-rolado {
  background-color: rgba(248, 243, 236, 0.86);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
  border-bottom-color: var(--c-linha);
}

.menu-aberto .cabecalho {
  background-color: var(--c-papel);
  border-bottom-color: var(--c-linha);
}

/* Progresso de leitura: um fio vinho na base do header */
.leitura {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--c-vinho);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

.cabecalho__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 100%;
}

/* Marca provisória: símbolo (o Ψ com a haste em fita de marcador) + nome.
   Sai quando a cliente enviar o logo oficial. */
.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--c-tinta);
}

.marca__simbolo {
  flex: none;
  width: 31px;
  height: 34px;
  color: var(--c-vinho);
}

.marca__texto {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

@media (min-width: 1024px) {
  .marca__simbolo { width: 36px; height: 40px; }
}

.marca__nome {
  font-family: var(--f-serifa);
  font-optical-sizing: auto;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.005em;
}

.marca__registro {
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--c-texto-suave);
}

.nav,
.cabecalho__acao { display: none; }

.nav ul {
  display: flex;
  gap: clamp(22px, 2.2vw, 32px);
  list-style: none;
}

.nav a {
  position: relative;
  display: inline-block;
  padding-block: 10px;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--c-tinta);
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: var(--c-tinta);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms var(--ease-saida);
}

.nav a:hover::after { transform: scaleX(1); }

.nav a[aria-current="true"]::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 12px;
  height: 2px;
  background: var(--c-vinho);
}

.menu-botao {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--c-tinta);
}

.menu-botao__linhas {
  position: relative;
  display: block;
  width: 24px;
  height: 8px;
}

.menu-botao__linhas span {
  position: absolute;
  left: 0;
  width: 24px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 300ms var(--ease-saida), top 300ms var(--ease-saida);
}

.menu-botao__linhas span:first-child { top: 0; }
.menu-botao__linhas span:last-child { top: 6.5px; }

.menu-botao[aria-expanded="true"] .menu-botao__linhas span:first-child {
  top: 3.25px;
  transform: rotate(45deg);
}

.menu-botao[aria-expanded="true"] .menu-botao__linhas span:last-child {
  top: 3.25px;
  transform: rotate(-45deg);
}

html:not(.js) .menu-botao { display: none; }

@media (min-width: 1024px) {
  .nav { display: block; margin-left: auto; }
  .cabecalho__acao { display: inline-flex; margin-left: 12px; }
  .menu-botao { display: none; }
}

/* Menu mobile em tela cheia */
.menu {
  position: fixed;
  inset: 0;
  z-index: 45;
  overflow-y: auto;
  padding-top: calc(var(--header-h) + 40px);
  padding-bottom: 40px;
  background-color: var(--c-papel);
  opacity: 0;
  transition: opacity 300ms ease;
}

.menu[hidden] { display: none; }
.menu.is-aberto { opacity: 1; }

.menu .fitas {
  top: var(--header-h);
  right: var(--gutter);
  --fita-comprimento: 150px;
}

.menu__lista {
  display: flex;
  flex-direction: column;
  gap: 20px;
  list-style: none;
  padding-right: 72px;
}

.menu__lista a {
  font-family: var(--f-serifa);
  font-optical-sizing: auto;
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-decoration: none;
  color: var(--c-tinta);
}

.menu__lista a:hover { color: var(--c-vinho); }

.menu__acao {
  width: 100%;
  margin-top: 44px;
}

.menu__instagram {
  display: inline-block;
  margin-top: 24px;
  font-size: 0.9375rem;
}

@media (min-width: 1024px) {
  .menu { display: none; }
}

/* 9.1 Hero */
.hero {
  position: relative;
  overflow-x: clip;
  padding-top: calc(var(--header-h) + clamp(24px, 4vw, 56px));
  padding-bottom: clamp(56px, 6vw, 96px);
  background-color: var(--c-papel);
  background-image:
    radial-gradient(55% 60% at 84% 16%, rgba(212, 160, 58, 0.13), transparent 70%),
    linear-gradient(118deg, transparent 54%, rgba(255, 250, 240, 0.6) 61%, transparent 68%);
}

/* Luz de manhã que atravessa o Hero uma vez, na entrada */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 36%, rgba(255, 250, 240, 0.75) 50%, transparent 64%);
  opacity: 0;
}

.hero__titulo {
  font-size: var(--t-h1);
  font-weight: 380;
  line-height: 1;
  letter-spacing: -0.03em;
}

/* Em telas muito estreitas, um pouco abaixo do mínimo da escala para
   "Um pensamento" caber inteiro na primeira linha */
@media (max-width: 379px) {
  .hero__titulo { font-size: 2.6rem; }
}

.hero__lead {
  margin-top: 28px;
  max-width: 46ch;
  font-size: var(--t-lead);
  line-height: 1.6;
}

.hero__acoes {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  margin-top: 36px;
}

.hero__acoes .botao { width: 100%; }

.hero__apoio {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 36px;
  max-width: 46ch;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--c-texto-suave);
}

.hero__apoio .icone {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  color: var(--c-vinho);
}

/* --fita-x ajustado para a foto real: o rosto ocupa de 41% a 62% da largura,
   então as fitas pousam a 76%, sobre o cabelo e o fundo. */
.hero__visual {
  --fita-x: 76%;
  --fita-topo: 64px;
  position: relative;
  width: min(86vw, 400px);
  margin: 80px auto 44px;
}

.moldura {
  position: relative;
  z-index: 1;
  padding: 12px;
  background-color: var(--c-papel);
  border: 1px solid var(--c-linha);
  border-radius: var(--r-papel);
  box-shadow: var(--sombra-suave);
}

.foto--hero { --foto-raio: 3px; }
.foto--hero img { object-position: 50% 24%; }

/* Fitas do Hero: nascem acima da moldura e pousam no terço de cima da foto.
   A fita vinho termina a 34% da altura da foto; a mostarda, a 26%.
   No desktop o JS mede --fita-topo para que elas nasçam logo abaixo do header. */
.fitas--hero {
  z-index: 2;
  left: var(--fita-x);
  top: calc(-1 * var(--fita-topo));
  bottom: 0;
  clip-path: inset(0 -24px -24px -24px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 22px);
}

.fitas--hero .fita--1 {
  height: calc(var(--fita-topo) + 13px + 0.34 * (100% - var(--fita-topo) - 26px));
}

.fitas--hero .fita--2 {
  height: calc(var(--fita-topo) + 13px + 0.26 * (100% - var(--fita-topo) - 26px));
}

.cartao-nome {
  position: absolute;
  z-index: 3;
  top: calc(100% - 37px);
  left: 0;
  right: 0;
  width: max-content;
  max-width: calc(100% - 32px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: var(--r-md);
  background-color: rgba(248, 243, 236, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--sombra-flutuante);
}

.cartao-nome::before {
  content: "";
  flex: none;
  width: 2px;
  height: 32px;
  background: var(--c-vinho);
}

.cartao-nome__texto {
  display: flex;
  flex-direction: column;
}

.cartao-nome__nome {
  font-family: var(--f-serifa);
  font-optical-sizing: auto;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.3;
}

.cartao-nome__crp {
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--c-texto-suave);
}

@media (min-width: 600px) {
  .hero__acoes {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
  }

  .hero__acoes .botao { width: auto; }
}

@media (min-width: 900px) {
  .hero {
    display: flex;
    align-items: center;
    min-height: min(100svh, 920px);
  }

  .hero__grade {
    align-items: center;
  }

  .hero__texto {
    grid-column: 1 / 8;
    padding-bottom: 12px;
  }

  .hero__titulo { font-size: 3.4rem; }

  .hero__lead { margin-top: 32px; }
  .hero__acoes { margin-top: 40px; }
  .hero__apoio { margin-top: 44px; }

  .hero__visual {
    grid-column: 8 / 13;
    justify-self: end;
    width: clamp(300px, 36vw, 380px);
    margin: 0 0 28px;
    --fita-topo: 110px;
  }

  /* No desktop as fitas nascem da borda de cima do Hero: corte reto, sem esmaecer */
  .fitas--hero {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .cartao-nome {
    top: auto;
    right: auto;
    left: -40px;
    bottom: -28px;
    margin: 0;
    max-width: none;
  }
}

@media (min-width: 1024px) {
  .hero__titulo { font-size: var(--t-h1); }
  .hero__visual { width: clamp(360px, 32vw, 460px); }
}

/* 9.2 O que pesa */
.pesa__topo { display: grid; gap: 24px; }

.pesa__intro { color: var(--c-texto-suave); }

.pesa__lista {
  margin-top: 64px;
  list-style: none;
  border-bottom: 1px solid var(--c-linha);
}

.pesa__item {
  display: grid;
  gap: 14px;
  padding-block: 32px;
  border-top: 1px solid var(--c-linha);
}

.pensamento {
  max-width: 24ch;
  font-family: var(--f-serifa);
  font-optical-sizing: auto;
  font-size: var(--t-pensamento);
  font-style: italic;
  font-weight: 350;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--c-tinta);
  text-wrap: balance;
}

.pesa__nome {
  font-family: var(--f-sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--c-vinho);
}

.pesa__descricao {
  margin-top: 6px;
  max-width: 44ch;
  color: var(--c-texto-suave);
}

.pesa__fecho { margin-top: 56px; }

.pesa__fecho p {
  max-width: 34ch;
  font-size: var(--t-lead);
  line-height: 1.55;
}

.pesa__fecho .botao {
  width: 100%;
  margin-top: 28px;
}

@media (min-width: 600px) {
  .pesa__fecho .botao { width: auto; }
}

@media (min-width: 900px) {
  .pesa__topo h2 { grid-column: 1 / 7; }

  .pesa__intro {
    grid-column: 8 / 13;
    align-self: end;
  }

  .pesa__item {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    align-items: baseline;
  }

  .pensamento { grid-column: 1 / 8; }
  .pesa__demanda { grid-column: 8 / 13; }

  .pesa__fecho > div { grid-column: 8 / 13; }
}

/* 9.3 Para quem */
.para-quem__topo p {
  margin-top: 24px;
  color: var(--c-texto-suave);
}

.fases {
  display: grid;
  gap: 48px;
  margin-top: 64px;
}

/* Traço de acento: 48px vinho de 2px que continua numa linha fina */
.fase {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: 28px;
}

.fase::before,
.fase::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: left center;
}

.fase::before {
  right: 0;
  height: 1px;
  background: var(--c-linha);
}

.fase::after {
  width: 48px;
  height: 2px;
  background: var(--c-vinho);
}

.fase h3 {
  font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.fase__idade {
  margin-top: 10px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-mostarda-texto);
}

.fase__texto { margin-top: 20px; }

.fase__formato {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 24px;
  font-size: 0.875rem;
  color: var(--c-texto-suave);
}

.fase__formato .icone {
  width: 18px;
  height: 18px;
  color: var(--c-vinho);
}

@media (min-width: 900px) {
  .para-quem__topo > * { grid-column: 1 / 7; }

  .fases {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
}

/* 9.4 Sobre */
.sobre__grade {
  display: grid;
  gap: 48px;
}

.sobre__figura {
  width: 100%;
  max-width: 440px;
  margin: 0;
}

.foto--sobre { --foto-raio: var(--r-lg); }
.foto--sobre img { object-position: 50% 30%; }

.sobre__figura figcaption {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--c-linha);
  font-family: var(--f-serifa);
  font-optical-sizing: auto;
  font-size: 0.9375rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--c-texto-suave);
}

.sobre__texto h2 { max-width: 15ch; }

.sobre__texto > p { margin-top: 20px; }
.sobre__texto h2 + p { margin-top: 32px; }

.assinatura {
  display: inline-block;
  margin: 18px 0 0 4px;
  font-family: var(--f-assinatura);
  font-size: 3rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--c-vinho);
  transform: rotate(-4deg);
  transform-origin: left center;
}

.credenciais {
  margin: 32px 0 0;
  border-top: 1px solid var(--c-linha);
}

.credenciais > div {
  display: grid;
  gap: 2px;
  padding-block: 14px;
  border-bottom: 1px solid var(--c-linha);
}

.credenciais dt {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--c-texto-suave);
}

.credenciais dd {
  margin: 0;
  line-height: 1.55;
}

@media (min-width: 600px) {
  .credenciais > div {
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 24px;
    align-items: baseline;
  }
}

@media (min-width: 900px) {
  .sobre__grade {
    align-items: start;
    gap: 0;
  }

  .sobre__figura {
    grid-column: 1 / 6;
    max-width: none;
  }

  .sobre__texto { grid-column: 7 / 13; }
}

/* 9.5 A TCC */
.tcc__topo {
  display: grid;
  gap: 48px;
}

.tcc__intro p { margin-top: 20px; }
.tcc__intro h2 + p { margin-top: 28px; }

.principios { margin: 0; }

.principios > div {
  padding-top: 18px;
  border-top: 1px solid var(--c-linha);
}

.principios > div + div { margin-top: 28px; }

.principios dt {
  font-family: var(--f-serifa);
  font-optical-sizing: auto;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.35;
}

.principios dd {
  margin: 6px 0 0;
  color: var(--c-texto-suave);
}

@media (min-width: 900px) {
  /* O título usa até a coluna 7 para "Cognitivo-Comportamental" caber inteiro;
     os parágrafos continuam limitados a 62ch (cerca de seis colunas). */
  .tcc__intro { grid-column: 1 / 8; }
  .tcc__intro h2 { font-size: min(var(--t-h2), 3.3vw, 3rem); }

  .principios {
    grid-column: 8 / 13;
    align-self: end;
  }
}

/* Página de caderno: registro de pensamentos */
.caderno {
  max-width: 1080px;
  margin-top: 80px;
}

.caderno__cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 40px;
}

.caderno__apoio {
  margin-top: 6px;
  color: var(--c-texto-suave);
}

.abas {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--c-linha);
  border-radius: var(--r-pill);
}

.aba {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--c-tinta);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: background-color 250ms ease, color 250ms ease;
}

.aba:hover { background-color: rgba(51, 25, 28, 0.06); }

.aba[aria-selected="true"] {
  background-color: var(--c-tinta);
  color: var(--c-papel);
}

html:not(.js) .abas { display: none; }

.caderno__pagina {
  --margem: 28px;
  --recuo: 44px;
  position: relative;
  margin-top: 24px;
  padding: 32px 20px 32px var(--recuo);
  border: 1px solid var(--c-linha);
  border-radius: var(--r-papel);
  background-color: var(--c-papel);
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(51, 25, 28, 0.07) 31px 32px);
  background-position: 0 -9px;
  box-shadow: var(--sombra-suave);
  line-height: 32px;
  overflow: clip;
}

/* Linha de margem do caderno escolar */
.caderno__pagina::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--margem);
  width: 2px;
  background: rgba(122, 43, 56, 0.35);
}

.caderno__exemplo + .caderno__exemplo { margin-top: 32px; }

.caderno__exemplo-titulo {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 32px;
  color: var(--c-vinho);
}

.js .caderno__exemplo-titulo { display: none; }

.registro {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

.registro th,
.registro td {
  padding: 0;
  text-align: left;
  vertical-align: top;
}

.registro th {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--c-texto-suave);
}

.registro td { font-size: 0.9375rem; }

.registro__pensamento { font-weight: 500; }

.grifo {
  display: block;
  width: 92%;
  height: 8px;
  margin-top: -9px;
  overflow: visible;
  color: var(--c-mostarda);
}

.grifo path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.registro__olhar {
  font-family: var(--f-serifa);
  font-optical-sizing: auto;
  font-size: 1.125rem;
  font-style: italic;
  color: var(--c-vinho);
}

.emocao {
  display: block;
  white-space: nowrap;
}

/* Medidor da intensidade: trilho fino e preenchimento proporcional ao número */
.barra {
  position: relative;
  display: block;
  width: min(100%, 112px);
  height: 2px;
  margin-top: -4px;
  margin-bottom: 2px;
  border-radius: 2px;
  background: rgba(51, 25, 28, 0.1);
  overflow: hidden;
}

.barra::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--c-mostarda);
  transform: scaleX(var(--valor));
  transform-origin: left center;
}

.barra--depois::before { background: var(--c-vinho); }

/* Mobile: a tabela vira blocos empilhados, com o rótulo da coluna em cima */
@media (max-width: 899px) {
  .registro,
  .registro tbody,
  .registro tr,
  .registro td {
    display: block;
    width: 100%;
  }

  .registro thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .registro td + td { margin-top: 16px; }

  .registro td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--f-sans);
    font-size: 0.8125rem;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.005em;
    color: var(--c-texto-suave);
  }

  .registro td + td::before { margin-top: 16px; }
  .registro td + td { margin-top: 0; }
}

@media (min-width: 900px) {
  .caderno__pagina {
    --margem: 48px;
    --recuo: 72px;
    padding: 32px 40px 32px var(--recuo);
  }

  .aba {
    padding: 0 18px;
    font-size: 0.9375rem;
  }

  .registro { table-layout: fixed; }

  .registro col:nth-child(1) { width: 18%; }
  .registro col:nth-child(2) { width: 20%; }
  .registro col:nth-child(3) { width: 15%; }
  .registro col:nth-child(4) { width: 32%; }
  .registro col:nth-child(5) { width: 15%; }

  .registro th,
  .registro td { padding-right: 28px; }

  .registro th:last-child,
  .registro td:last-child { padding-right: 0; }

  .registro thead th { padding-bottom: 32px; }
}

.caderno__legenda {
  margin-top: 20px;
  font-size: 0.9375rem;
  color: var(--c-texto-suave);
}

/* 9.6 Atendimento: sumário de livro */
.pagina-sumario {
  max-width: 880px;
  margin-inline: auto;
  padding: 24px;
  border: 1px solid var(--c-linha);
  border-radius: var(--r-papel);
  background-color: var(--c-papel);
  box-shadow: var(--sombra-suave);
}

.pagina-sumario > p {
  margin-top: 16px;
  color: var(--c-texto-suave);
}

.sumario {
  display: grid;
  gap: 32px;
  margin-top: 48px;
  list-style: none;
  container-type: inline-size;
}

.sumario li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: baseline;
}

.sumario__num {
  font-family: var(--f-serifa);
  font-optical-sizing: auto;
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--c-vinho);
}

.sumario__linha {
  display: flex;
  align-items: baseline;
  min-width: 0;
}

.sumario__titulo {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.4;
}

.sumario__pontos {
  flex: 1 1 auto;
  align-self: baseline;
  min-width: 32px;
  height: 2px;
  margin-inline: 14px;
  background-image: radial-gradient(circle at 1px 1px, var(--c-mostarda) 1px, transparent 1.25px);
  background-size: 8px 2px;
  background-repeat: repeat-x;
  transform-origin: left center;
}

.sumario__detalhe {
  flex: none;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--c-mostarda-texto);
  white-space: nowrap;
}

.sumario__descricao {
  grid-column: 2;
  max-width: 56ch;
  margin-top: 6px;
  color: var(--c-texto-suave);
}

/* Sem espaço para o pontilhado: o detalhe desce e os pontos somem */
@container (max-width: 540px) {
  .sumario__linha {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .sumario__pontos { display: none; }
  .sumario__detalhe { white-space: normal; }
}

.formatos {
  display: grid;
  gap: 24px;
  max-width: 880px;
  margin: 64px auto 0;
}

.formato {
  padding: 28px 28px 32px;
  border-radius: var(--r-md);
}

.formato--online { border: 1px solid var(--c-linha); }
.formato--presencial { background-color: var(--c-trigo); }

.formato .icone { color: var(--c-vinho); }

.formato h3 {
  margin-top: 16px;
  font-size: 1.375rem;
  font-weight: 500;
}

.formato p {
  margin-top: 10px;
  color: var(--c-texto-suave);
}

.formato__endereco {
  margin-top: 10px;
  font-style: normal;
  color: var(--c-tinta);
}

.formato .formato__mapa { margin-top: 8px; }

.formato .formato__publico {
  margin-top: 16px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-tinta);
}

.info-sessao {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 880px;
  margin: 32px auto 0;
  font-size: 0.9375rem;
  color: var(--c-texto-suave);
}

.info-sessao .icone {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--c-vinho);
}

.info-sessao p { max-width: none; }

@media (min-width: 700px) {
  .formatos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 600px) {
  .pagina-sumario { padding: clamp(32px, 5vw, 72px); }
}

/* 9.7 Dúvidas */
.duvidas__grade {
  display: grid;
  gap: 40px;
}

.duvidas__cabeca p {
  margin-top: 20px;
  color: var(--c-texto-suave);
}

.duvidas__link { margin-top: 28px; }

.duvidas__link .link-texto {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.duvidas__link .icone {
  width: 18px;
  height: 18px;
  color: var(--c-vinho);
}

.duvidas__lista { border-bottom: 1px solid var(--c-linha); }

.duvida { border-top: 1px solid var(--c-linha); }

.duvida summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-block: 22px;
  list-style: none;
  cursor: pointer;
  font-family: var(--f-serifa);
  font-optical-sizing: auto;
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
  font-weight: 450;
  line-height: 1.35;
  transition: color 200ms ease;
}

.duvida summary::-webkit-details-marker { display: none; }
.duvida summary::marker { content: ""; }

.duvida summary:hover { color: var(--c-vinho); }

.duvida summary .icone {
  margin-top: 2px;
  color: var(--c-vinho);
}

.icone-mais__v {
  transform-origin: center;
  transform-box: fill-box;
  transition: transform var(--t-resposta) var(--ease-saida);
}

.duvida[open]:not(.is-fechando) .icone-mais__v { transform: rotate(90deg); }

.duvida__resposta { overflow: hidden; }

.duvida__resposta p {
  padding-bottom: 26px;
  padding-right: 48px;
  color: var(--c-texto-suave);
}

@media (min-width: 900px) {
  .duvidas__cabeca {
    grid-column: 1 / 6;
    position: sticky;
    top: calc(var(--header-h) + 40px);
    align-self: start;
  }

  .duvidas__lista { grid-column: 7 / 13; }
}

/* 9.8 Agendar */
.agendar h2 {
  max-width: 13ch;
  color: var(--c-papel);
}

.agendar__texto > p {
  margin-top: 24px;
  max-width: 42ch;
  color: var(--c-nevoa);
}

.agendar__texto .botao {
  width: 100%;
  margin-top: 36px;
}

.agendar__contato {
  display: grid;
  gap: 8px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--c-linha-noite);
  list-style: none;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.agendar__contato li,
.rodape__contato li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.agendar__contato .icone {
  width: 18px;
  height: 18px;
  color: var(--c-mostarda);
}

.agendar__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 104px;
}

.cartao-form {
  position: relative;
  padding: 36px 24px 28px;
  border-radius: var(--r-papel);
  background-color: var(--c-papel);
  color: var(--c-tinta);
  box-shadow: var(--sombra-noite);
}

.cartao-form .fitas {
  top: -30px;
  right: 36px;
  --fita-comprimento: 112px;
  z-index: 2;
}

.formulario__titulo {
  max-width: calc(100% - 72px);
  font-size: var(--t-h3);
}

.formulario__nota {
  margin-top: 8px;
  max-width: 38ch;
  font-size: 0.9375rem;
  color: var(--c-texto-suave);
}

.campo { margin-top: 26px; }

.campo > label,
.campo legend {
  display: block;
  margin-bottom: 8px;
  padding: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
}

.campo__opcional {
  font-weight: 400;
  color: var(--c-texto-suave);
}

fieldset.campo {
  min-width: 0;
  margin-inline: 0;
  margin-bottom: 0;
  padding: 0;
  border: 0;
}

.campo input[type="text"] {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 10px 0 8px;
  border: 0;
  border-bottom: 1px solid var(--c-campo);
  border-radius: 0;
  background: transparent;
  font-size: 1rem;
  transition: border-color 200ms ease;
}

.campo input[type="text"]::placeholder { color: var(--c-texto-suave); opacity: 1; }

.campo input[type="text"]:hover { border-bottom-color: var(--c-tinta); }

.campo input[type="text"]:focus-visible {
  outline-offset: 2px;
  border-bottom-color: var(--c-vinho);
}

.campo input[aria-invalid="true"] {
  border-bottom: 2px solid var(--c-vinho);
}

.campo__erro {
  margin-top: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-vinho);
}

.opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.opcao {
  position: relative;
  display: inline-flex;
}

.opcao input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.opcao span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--c-campo);
  border-radius: var(--r-pill);
  font-size: 0.9375rem;
  line-height: 1.2;
  transition: background-color 250ms ease, color 250ms ease, border-color 250ms ease;
}

.opcao:hover span { border-color: var(--c-tinta); }

.opcao input:checked + span {
  border-color: var(--c-tinta);
  background-color: var(--c-tinta);
  color: var(--c-papel);
}

.opcao input:focus-visible + span {
  outline: 2px solid var(--c-vinho);
  outline-offset: 3px;
}

.formulario__privacidade {
  margin-top: 28px;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--c-texto-suave);
}

.formulario .botao { margin-top: 18px; }

html:not(.js) .formulario { display: none; }

.cartao-form__sem-js p {
  max-width: calc(100% - 72px);
  font-size: var(--t-h3);
  font-family: var(--f-serifa);
  line-height: 1.3;
}

.cartao-form__sem-js .botao { margin-top: 24px; }

@media (min-width: 600px) {
  .agendar__texto .botao { width: auto; }
  .cartao-form { padding: clamp(36px, 4vw, 48px); }
  .cartao-form .fitas { right: 48px; }
}

@media (min-width: 900px) {
  .agendar__grade {
    align-items: center;
    gap: 0;
  }

  .agendar__texto { grid-column: 1 / 6; }
  .cartao-form { grid-column: 7 / 13; }
}

/* 9.9 Rodapé */
.rodape {
  padding-block: 8px 32px;
  background-color: var(--c-vinho-noite);
  color: var(--c-nevoa);
}

.rodape__grade {
  display: grid;
  gap: 40px;
  padding-top: 64px;
  border-top: 1px solid var(--c-linha-noite);
}

.rodape__marca .marca__simbolo { color: var(--c-mostarda); }

.rodape__marca .marca__nome {
  font-size: 1.25rem;
  color: var(--c-papel);
}

.rodape__contato .icone {
  width: 16px;
  height: 16px;
  color: var(--c-mostarda);
}

.rodape__marca .marca__registro {
  margin-top: 2px;
  font-size: 0.875rem;
  color: var(--c-nevoa);
}

.rodape__marca p {
  margin-top: 16px;
  max-width: 30ch;
  font-size: 0.9375rem;
}

.rodape__titulo {
  margin-bottom: 14px;
  font-family: var(--f-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.005em;
  color: var(--c-papel);
}

.rodape ul {
  display: grid;
  gap: 8px;
  list-style: none;
  font-size: 0.9375rem;
}

.rodape__coluna p,
.rodape__endereco {
  font-size: 0.9375rem;
  font-style: normal;
}

.rodape__endereco { margin-top: 10px; }
.rodape__coluna address + p { margin-top: 8px; }

.rodape a {
  color: var(--c-nevoa);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 200ms ease, text-decoration-color 200ms ease;
}

.rodape a:hover {
  color: var(--c-mostarda);
  text-decoration-color: currentColor;
}

.rodape__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 32px;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--c-linha-noite);
  font-size: 0.875rem;
  line-height: 1.55;
}

.rodape__base p { max-width: 60ch; }

@media (min-width: 600px) {
  .rodape__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .rodape__grade { grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: 24px; }
}

/* 9.10 Botão flutuante do WhatsApp */
.flutuante {
  position: fixed;
  right: max(16px, calc(env(safe-area-inset-right) + 16px));
  bottom: max(16px, calc(env(safe-area-inset-bottom) + 16px));
  z-index: 40;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--r-pill);
  background-color: var(--c-vinho);
  color: var(--c-papel);
  box-shadow: var(--sombra-flutuante);
  transition: background-color 200ms ease, opacity 250ms ease, translate 250ms var(--ease-saida), visibility 0s linear 0s;
}

.flutuante .icone { width: 26px; height: 26px; }

.flutuante:hover { background-color: var(--c-tinta); }

.js .flutuante:not(.is-visivel) {
  opacity: 0;
  translate: 0 16px;
  visibility: hidden;
  pointer-events: none;
  transition: background-color 200ms ease, opacity 250ms ease, translate 250ms var(--ease-saida), visibility 0s linear 250ms;
}

@media (min-width: 1024px) {
  .flutuante {
    right: 28px;
    bottom: 28px;
  }
}


/* ---------- 6. Utilitários ---------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ---------- 7. Movimento ----------
   Um único momento orquestrado (a entrada do Hero) e o resto
   quase parado. Com prefers-reduced-motion: reduce, nada daqui
   roda e tudo aparece no estado final. */

@keyframes hero-sobe {
  from { opacity: 0; translate: 0 16px; }
}

@keyframes hero-sobe-curto {
  from { opacity: 0; translate: 0 12px; }
}

@keyframes hero-pagina {
  from { clip-path: inset(-60px -60px 100% -60px); }
  to { clip-path: inset(-60px -60px -90px -60px); }
}

@keyframes fita-desce {
  from { translate: 0 -105%; }
}

@keyframes fita-assenta {
  0% { rotate: 0deg; }
  12% { rotate: 1.4deg; }
  56% { rotate: -0.6deg; }
  100% { rotate: 0deg; }
}

@keyframes fita-balanca {
  0% { rotate: 0deg; }
  30% { rotate: 1deg; }
  70% { rotate: -0.5deg; }
  100% { rotate: 0deg; }
}

@keyframes aparece {
  from { opacity: 0; }
}

@keyframes item-menu {
  from { opacity: 0; translate: 0 8px; }
}

@keyframes grifar {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes progresso {
  to { transform: scaleX(1); }
}

@keyframes preloader-sai {
  from { clip-path: inset(0 0 0 0); }
  to { clip-path: inset(0 0 100% 0); visibility: hidden; }
}

@keyframes preloader-sai-agora {
  from { clip-path: inset(0 0 0 0); }
  to { clip-path: inset(0 0 100% 0); visibility: hidden; }
}

@keyframes palavra-sobe {
  from { transform: translateY(110%); }
}

@keyframes desce {
  from { opacity: 0; translate: 0 -10px; }
}

@keyframes luz {
  0% { opacity: 0; transform: translateX(-45%); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: translateX(45%); }
}

@keyframes celula {
  from { opacity: 0; translate: 0 8px; }
}

@keyframes barra-enche {
  from { transform: scaleX(0); }
}

@keyframes aceno {
  0% { rotate: 0deg; }
  30% { rotate: -12deg; }
  65% { rotate: 7deg; }
  100% { rotate: 0deg; }
}

@keyframes pulso {
  from { opacity: 0.55; transform: scale(1); }
  to { opacity: 0; transform: scale(1.7); }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* Estado inicial do Hero, antes de a página ficar pronta */
  .js:not(.hero-in) .hero__titulo,
  .js:not(.hero-in) .hero__lead,
  .js:not(.hero-in) .hero__acoes,
  .js:not(.hero-in) .hero__apoio,
  .js:not(.hero-in) .cartao-nome { opacity: 0; }

  .js:not(.hero-in) .moldura { clip-path: inset(-60px -60px 100% -60px); }
  .js:not(.hero-in) .fitas--hero .fita { translate: 0 -105%; }

  /* Sequência de entrada (seção 9.1) */
  .hero-in .hero__titulo { animation: hero-sobe 700ms var(--ease-saida) backwards; }
  .hero-in .hero__lead { animation: hero-sobe-curto 620ms var(--ease-saida) 120ms backwards; }
  .hero-in .hero__acoes { animation: hero-sobe-curto 620ms var(--ease-saida) 200ms backwards; }
  .hero-in .hero__apoio { animation: hero-sobe-curto 620ms var(--ease-saida) 280ms backwards; }
  .hero-in .moldura { animation: hero-pagina 950ms var(--ease-pagina) 150ms backwards; }

  .hero-in .fitas--hero .fita--1 {
    animation:
      fita-desce 800ms var(--ease-saida) 900ms backwards,
      fita-assenta 900ms ease-in-out 1600ms;
  }

  .hero-in .fitas--hero .fita--2 {
    animation:
      fita-desce 800ms var(--ease-saida) 1020ms backwards,
      fita-assenta 900ms ease-in-out 1720ms;
  }

  .hero-in .cartao-nome { animation: hero-sobe-curto 600ms var(--ease-saida) 1500ms backwards; }

  /* Balanço opcional ao passar o mouse sobre a foto (uma vez, ativado pelo JS) */
  .fitas.is-balancando .fita__tecido { animation: fita-balanca 600ms ease-in-out; }
  .fitas.is-balancando .fita--2 .fita__tecido { animation-delay: 60ms; }

  /* Revelação ao rolar: só nos H2 e nos blocos principais */
  .revela [data-reveal] {
    transition:
      opacity 500ms var(--ease-saida),
      transform 500ms var(--ease-saida);
  }

  .revela [data-reveal]:not(.is-visivel) {
    opacity: 0;
    transform: translateY(12px);
  }

  /* Pontilhados do sumário se preenchem da esquerda para a direita */
  .revela .sumario .sumario__pontos {
    transition: transform 600ms var(--ease-saida);
    transition-delay: calc(var(--i, 0) * 80ms + 120ms);
  }

  .revela .sumario:not(.is-visivel) .sumario__pontos { transform: scaleX(0); }

  /* Caderno: troca de exemplo e sublinhado à mão */
  .caderno__exemplo.is-entrando { animation: aparece 250ms ease backwards; }
  .js .caderno:not(.is-visto) .grifo path { stroke-dashoffset: 1; }
  .caderno__exemplo.is-entrando .grifo path { animation: grifar 500ms var(--ease-saida) 450ms backwards; }

  /* Células do registro entram uma a uma, e os medidores se enchem */
  .caderno__exemplo.is-entrando td { animation: celula 450ms var(--ease-saida) backwards; }
  .caderno__exemplo.is-entrando td:nth-child(2) { animation-delay: 60ms; }
  .caderno__exemplo.is-entrando td:nth-child(3) { animation-delay: 120ms; }
  .caderno__exemplo.is-entrando td:nth-child(4) { animation-delay: 180ms; }
  .caderno__exemplo.is-entrando td:nth-child(5) { animation-delay: 240ms; }
  .js .caderno:not(.is-visto) .barra::before { transform: scaleX(0); }
  .caderno__exemplo.is-entrando .barra::before { animation: barra-enche 800ms var(--ease-saida) 380ms backwards; }

  /* Linha de margem do caderno se desenha de cima para baixo */
  .revela .caderno__pagina::before {
    transform-origin: top center;
    transition: transform 1100ms var(--ease-pagina) 350ms;
  }

  .revela .caderno:not(.is-visivel) .caderno__pagina::before { transform: scaleY(0); }

  /* Header entra depois do preloader */
  .js:not(.hero-in) .cabecalho__barra > * { opacity: 0; }

  .hero-in .cabecalho .marca,
  .hero-in .nav li,
  .hero-in .cabecalho__acao,
  .hero-in .menu-botao { animation: desce 600ms var(--ease-saida) backwards; }

  .hero-in .nav li:nth-child(1) { animation-delay: 160ms; }
  .hero-in .nav li:nth-child(2) { animation-delay: 210ms; }
  .hero-in .nav li:nth-child(3) { animation-delay: 260ms; }
  .hero-in .nav li:nth-child(4) { animation-delay: 310ms; }
  .hero-in .nav li:nth-child(5) { animation-delay: 360ms; }
  .hero-in .cabecalho__acao,
  .hero-in .menu-botao { animation-delay: 420ms; }

  /* Luz de manhã atravessando o Hero */
  .hero-in .hero::after { animation: luz 2600ms ease-out 500ms backwards; }

  /* H1 do Hero palavra por palavra (quando o JS dividiu as palavras) */
  .js:not(.hero-in) .hero__titulo.titulo-dividido { opacity: 1; }
  .js:not(.hero-in) .hero__titulo .palavra > span { transform: translateY(110%); }
  .hero-in .hero__titulo.titulo-dividido { animation: none; }

  .hero-in .hero__titulo .palavra > span {
    animation: palavra-sobe 1000ms var(--ease-saida) backwards;
    animation-delay: calc(var(--i, 0) * 80ms);
  }

  /* H2 palavra por palavra */
  .revela [data-reveal].titulo-dividido:not(.is-visivel) {
    opacity: 1;
    transform: none;
  }

  .revela [data-reveal].titulo-dividido .palavra > span {
    transition: transform 900ms var(--ease-saida);
    transition-delay: calc(var(--i, 0) * 55ms);
  }

  .revela [data-reveal].titulo-dividido:not(.is-visivel) .palavra > span { transform: translateY(110%); }

  /* Grupos que entram em sequência */
  .revela [data-stagger] > * {
    transition:
      opacity 650ms var(--ease-saida),
      transform 650ms var(--ease-saida),
      background-color 200ms ease,
      color 200ms ease;
    transition-delay:
      calc(var(--i, 0) * 70ms),
      calc(var(--i, 0) * 70ms),
      0s,
      0s;
  }

  .revela [data-stagger]:not(.is-visivel) > * {
    opacity: 0;
    transform: translateY(14px);
  }

  /* O que pesa: o pensamento se escreve da esquerda para a direita */
  .revela .pensamento {
    clip-path: inset(-0.3em -0.4em -0.35em -0.2em);
    transition: clip-path 1100ms var(--ease-pagina) 150ms;
  }

  .revela .pesa__item:not(.is-visivel) .pensamento { clip-path: inset(-0.3em 100% -0.35em -0.2em); }

  .revela .pesa__demanda {
    transition:
      opacity 700ms var(--ease-saida) 380ms,
      transform 700ms var(--ease-saida) 380ms;
  }

  .revela .pesa__item:not(.is-visivel) .pesa__demanda {
    opacity: 0;
    transform: translateX(16px);
  }

  /* Para quem: o traço de acento e a linha se desenham */
  .revela .fase::before {
    transition: transform 1100ms var(--ease-pagina);
    transition-delay: calc(var(--i, 0) * 120ms + 100ms);
  }

  .revela .fase::after {
    transition: transform 700ms var(--ease-saida);
    transition-delay: calc(var(--i, 0) * 120ms + 450ms);
  }

  .revela .fases:not(.is-visivel) .fase::before,
  .revela .fases:not(.is-visivel) .fase::after { transform: scaleX(0); }

  .revela .fase__icone {
    transition:
      opacity 700ms var(--ease-saida),
      transform 900ms var(--ease-saida);
    transition-delay: calc(var(--i, 0) * 120ms + 500ms);
  }

  .revela .fases:not(.is-visivel) .fase__icone {
    opacity: 0;
    transform: translateY(-8px) rotate(-10deg);
  }

  /* Sobre: a foto se revela como página e a assinatura se escreve */
  .revela .sobre__figura .foto {
    clip-path: inset(0 0 0 0 round var(--r-lg));
    transition: clip-path 1200ms var(--ease-pagina) 100ms;
  }

  .revela .sobre__figura:not(.is-visivel) .foto { clip-path: inset(0 0 100% 0 round var(--r-lg)); }

  .revela .sobre__figura .foto img { transition: transform 1600ms var(--ease-saida) 100ms; }
  .revela .sobre__figura:not(.is-visivel) .foto img { transform: scale(1.08); }

  /* O observador vigia a linha (o próprio texto recortado teria área zero) */
  .revela .assinatura-linha .assinatura {
    clip-path: inset(-40% -15% -40% -8%);
    transition: clip-path 1500ms cubic-bezier(0.55, 0.1, 0.35, 1) 250ms;
  }

  .revela .assinatura-linha:not(.is-visivel) .assinatura { clip-path: inset(-40% 100% -40% -8%); }

  /* Atendimento: ícones dos painéis descem para o lugar */
  .revela .formato .icone { transition: opacity 600ms ease 300ms, transform 800ms var(--ease-saida) 300ms; }
  .revela .formato:not(.is-visivel) .icone { opacity: 0; transform: translateY(-10px); }

  /* Agendar: as fitas descem até o cartão e assentam */
  .revela .cartao-form .fita {
    transition:
      translate 1000ms var(--ease-saida) 400ms,
      opacity 500ms ease 400ms;
  }

  .revela .cartao-form .fita--2 { transition-delay: 520ms, 520ms; }

  .revela .cartao-form:not(.is-visivel) .fita {
    translate: 0 -48px;
    opacity: 0;
  }

  .revela .cartao-form.is-visivel .fita--1 { animation: fita-assenta 900ms ease-in-out 1250ms; }
  .revela .cartao-form.is-visivel .fita--2 { animation: fita-assenta 900ms ease-in-out 1370ms; }

  /* Ícone do WhatsApp acena no hover dos botões */
  .botao:hover .icone,
  .flutuante:hover .icone { animation: aceno 520ms var(--ease-saida); }

  /* Botão flutuante: dois pulsos ao aparecer, sem repetir */
  .flutuante::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1.5px solid var(--c-vinho);
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
  }

  .flutuante.is-visivel::after { animation: pulso 1800ms ease-out 400ms 2; }

  /* Menu mobile */
  .menu.is-aberto .menu__lista li,
  .menu.is-aberto .menu__acao,
  .menu.is-aberto .menu__instagram {
    animation: item-menu 320ms var(--ease-saida) backwards;
  }

  .menu.is-aberto .menu__lista li:nth-child(1) { animation-delay: 60ms; }
  .menu.is-aberto .menu__lista li:nth-child(2) { animation-delay: 100ms; }
  .menu.is-aberto .menu__lista li:nth-child(3) { animation-delay: 140ms; }
  .menu.is-aberto .menu__lista li:nth-child(4) { animation-delay: 180ms; }
  .menu.is-aberto .menu__lista li:nth-child(5) { animation-delay: 220ms; }
  .menu.is-aberto .menu__acao { animation-delay: 260ms; }
  .menu.is-aberto .menu__instagram { animation-delay: 300ms; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}