/* Espira: identidade Ateliê · editorial botânico
   Cores tingidas com plantas brasileiras (A Natureza das Cores Brasileiras, Maibe Maroccolo) */
:root {
  --moldura: #ACB193;          /* carqueja 105 */
  --pau-brasil: #7A2238;       /* pau-brasil 302: links e botões */
  --papel: #F7F4EF;            /* argila branca */
  --argila-crua: #F1EAE0;
  --barro-ocre: #E8DCC7;
  --foto: #E6E0D2;             /* espaço das fotos */
  --fio: #E2DACD;              /* linhas finas da grade */
  --borda: #D9D1C3;
  --titulo: #1B1B23;           /* jenipapo 255 */
  --texto: #484651;            /* jenipapo 256 */
  --araucaria: #4E250F;        /* araucária 43 */
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Karla', system-ui, sans-serif;
  --respiro: 120px;            /* espaço entre seções principais */
  --respiro-curto: 72px;       /* blocos menores: agenda, notas, chamada final */
}
@media (max-width: 900px) {
  :root { --respiro: 72px; --respiro-curto: 48px; }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--moldura);
  color: var(--titulo);
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
a { color: var(--pau-brasil); }
a:hover { color: var(--araucaria); }
:focus-visible { outline: 2px solid var(--pau-brasil); outline-offset: 4px; }

.moldura { padding: 64px; min-height: 100vh; }
.pagina { max-width: 1280px; margin: 0 auto; background: var(--papel); border: 1px solid var(--borda); }

/* cabeçalho */
.topo { display: flex; justify-content: flex-start; align-items: center; gap: 64px; padding: 22px 40px; border-bottom: 1px solid var(--fio); }
.marca { font-family: var(--serif); font-weight: 300; font-size: 22px; color: var(--titulo); text-decoration: none; }
.marca img { height: 28px; width: auto; }
.menu { display: flex; flex-wrap: wrap; gap: 28px; font-size: 13px; letter-spacing: 0.06em; }
.menu a { color: var(--texto); text-decoration: none; }
.menu a[aria-current="page"], .menu a:hover { color: var(--pau-brasil); }

/* grade */
.linha { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); border-bottom: 1px solid var(--fio); }
.celula { padding: 72px 40px; }
.celula.foto-cel { padding: 24px; }
.divisa { border-right: 1px solid var(--fio); }
.c1-5 { grid-column: 1 / span 5; } .c1-6 { grid-column: 1 / span 6; } .c1-7 { grid-column: 1 / span 7; } .c1-8 { grid-column: 1 / span 8; }
.c6-7 { grid-column: 6 / span 7; } .c7-6 { grid-column: 7 / span 6; } .c8-5 { grid-column: 8 / span 5; } .c9-4 { grid-column: 9 / span 4; }

.com-lateral { display: grid; grid-template-columns: 80px minmax(0, 1fr); border-bottom: 1px solid var(--fio); }
.lateral { border-right: 1px solid var(--fio); display: flex; align-items: center; justify-content: center; }
.lateral span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 13px; letter-spacing: 0.08em; color: var(--texto); }
.abertura { display: grid; grid-template-columns: 80px minmax(0, 1fr) minmax(0, 1fr); border-bottom: 1px solid var(--fio); }

.colunas-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--fio); }
.colunas-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--fio); }
.colunas-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--fio); }
.colunas-2 > * + *, .colunas-3 > * + *, .colunas-4 > * + * { border-left: 1px solid var(--fio); }

/* fotos (trocar os divs .foto por <img> quando houver) */
.foto { background: var(--foto); display: flex; align-items: flex-end; padding: 12px; width: 100%; object-fit: cover; }
.foto span { font-size: 13px; color: var(--texto); }
.foto.alta { height: 560px; } .foto.media { height: 420px; } .foto.baixa { height: 300px; } .foto.mini { height: 240px; }

/* tipografia */
h1, h2, h3, .titulo { font-family: var(--serif); font-weight: 200; margin: 0; }
.h-hero { font-size: 50px; line-height: 1.1; }
.h-pagina { font-size: 60px; line-height: 1.04; }
.h-secao { font-size: 34px; line-height: 1.15; }
.h-destaque { font-size: 52px; line-height: 1.1; font-style: italic; color: var(--araucaria); }
.h-card { font-family: var(--serif); font-weight: 300; font-size: 21px; }
.italico { font-style: italic; color: var(--araucaria); }
.rotulo { margin: 0; font-size: 13px; letter-spacing: 0.06em; color: var(--texto); }
p { margin: 0; }
.texto { font-size: 16px; line-height: 1.85; color: var(--texto); max-width: 520px; }
.texto-p { font-size: 16px; line-height: 1.65; color: var(--texto); }
.pilha { display: flex; flex-direction: column; gap: 24px; }
.entre { display: flex; flex-direction: column; justify-content: space-between; gap: 56px; }

/* links e botões */
.link { font-size: 14px; color: var(--pau-brasil); text-decoration: none; border-bottom: 1px solid var(--pau-brasil); padding-bottom: 3px; align-self: flex-start; }
.botao { display: inline-block; font-size: 14px; color: var(--pau-brasil); text-decoration: none; border: 1px solid var(--pau-brasil); border-radius: 2px; padding: 13px 28px; }
.botao:hover, .link:hover { color: var(--araucaria); border-color: var(--araucaria); }
.centro { display: flex; align-items: center; justify-content: center; padding: 40px; }

/* cards com foto */
.card { padding: 24px; text-decoration: none; color: var(--titulo); display: flex; flex-direction: column; gap: 14px; }
.card:hover .h-card { color: var(--araucaria); }

/* listas com fios */
.lista-fios { margin: 0; padding: 0; list-style: none; font-size: 16px; line-height: 1.6; }
.lista-fios li { padding: 14px 0; border-top: 1px solid var(--fio); }
.lista-fios li:last-child { border-bottom: 1px solid var(--fio); }

/* percurso da jornada */
.semana { padding: 0; border-bottom: 1px solid var(--fio); }
.semana .rotulo { margin-bottom: 20px; }
.semana .h-card { font-size: 24px; margin-bottom: 8px; }

/* rodapé */
.rodape { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding: 28px 40px; font-size: 13px; color: var(--texto); }

/* único movimento: o título do topo surge devagar */
@keyframes surgir { from { opacity: 0; } to { opacity: 1; } }
.surgir { animation: surgir 1.6s ease-out both; }
@media (prefers-reduced-motion: reduce) { .surgir { animation: none; } html { scroll-behavior: auto; } }

/* tablet e celular */
@media (max-width: 900px) {
  .moldura { padding: 14px; }
  .topo { flex-direction: column; align-items: flex-start; gap: 24px; padding: 20px 24px; }
  .menu { gap: 18px; }
  .linha, .colunas-2, .colunas-3, .colunas-4, .abertura, .com-lateral { grid-template-columns: minmax(0, 1fr); }
  .linha > * { grid-column: 1 / -1; }
  .divisa { border-right: 0; border-bottom: 1px solid var(--fio); }
  .colunas-2 > * + *, .colunas-3 > * + *, .colunas-4 > * + * { border-left: 0; border-top: 1px solid var(--fio); }
  .lateral { display: none; }
  .celula { padding: 48px 24px; }
  .celula.foto-cel, .card { padding: 16px; }
  .h-hero, .h-pagina { font-size: 38px; }
  .h-destaque { font-size: 36px; }
  .h-secao { font-size: 28px; }
  .foto.alta { height: 380px; } .foto.media { height: 320px; } .foto.baixa, .foto.mini { height: 240px; }
  .rodape { flex-direction: column; align-items: flex-start; padding: 24px; }
}

/* sem moldura: a página ocupa a tela toda */
body { background: var(--papel); }
.moldura { padding: 0; }
.pagina { border: 0; }

/* ===== versão fluida: sem moldura, sem fios, mais respiro ===== */
body { background: var(--papel); }
.moldura { padding: 0; }
.pagina { border: 0; max-width: 1240px; padding: 0 48px; }

.topo, .linha, .com-lateral, .abertura, .colunas-2, .colunas-3, .colunas-4, .rodape { border: 0 !important; }
.divisa { border: 0 !important; }
.colunas-2 > * + *, .colunas-3 > * + *, .colunas-4 > * + * { border: 0 !important; }
.lista-fios li, .lista-fios li:last-child, .semana { border: 0 !important; }
.lista-fios li { padding: 10px 0; }

.topo { padding: 32px 0; }
.lateral { display: none; }
.com-lateral { grid-template-columns: minmax(0, 1fr); }
.abertura { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; }
.linha { column-gap: 48px; margin: 0; }
.colunas-2 { column-gap: 72px; row-gap: 48px; margin: 0; }
.colunas-3 { column-gap: 48px; row-gap: 48px; margin: 0; }
.colunas-4 { column-gap: 32px; row-gap: 48px; margin: 0; align-items: start; }
.colunas-4 > .card:nth-child(even) { margin-top: 0; }

.celula { padding: 0; }
.celula.foto-cel, .card { padding: 0; }
.foto { border-radius: 6px; }
.centro { justify-content: flex-start; padding: 0; }

/* ritmo vertical: o espaço entre seções vem só daqui.
   margin (e não padding) para duas seções vizinhas não somarem 240px:
   as margens se sobrepõem e vale a maior. */
.secao { margin-block: var(--respiro); }
.secao-curta { margin-block: var(--respiro-curto); }
.rodape { padding: 56px 0 40px; margin-top: 40px; }

@media (max-width: 900px) {
  .pagina { padding: 0 24px; }
  .abertura { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .linha, .colunas-2, .colunas-3, .colunas-4 { row-gap: 32px; }
  .colunas-4 > .card:nth-child(even) { margin-top: 0; }
}

/* logo */
.marca { display: inline-flex; }
.marca img { height: 54px; width: auto; }
.marca-rodape img { height: 44px; }

/* topo com imagem inteira */
/* o topo usa 100vw, que inclui a barra de rolagem: sem isto, sobra rolagem lateral */
html, body { overflow-x: clip; }
.hero-topo {
  margin: 0 calc(50% - 50vw);
  padding: 0 calc(50vw - 50%);
  min-height: 88vh;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
}
.hero-topo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("../img/topo.jpg") right center / cover no-repeat;
  transform-origin: 100% 50%;
  animation: respirar 16s ease-in-out infinite alternate;
}
.hero-topo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* véu leve só atrás da coluna de texto (a coluna fica centralizada, por isso o 50%) */
  background: linear-gradient(90deg, rgba(247,244,239,.5) 0%, rgba(247,244,239,.28) calc(50% - 40px), rgba(247,244,239,0) calc(50% + 140px));
}
/* telas entre tablet e notebook pequeno: a foto é cortada nas laterais;
   puxar o enquadramento para a esquerda mantém as folhas claras atrás do texto */
@media (min-width: 901px) and (max-width: 1200px) {
  .hero-topo::before { background-position: 35% center; transform-origin: 35% 50%; }
}
@keyframes respirar {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-topo::before { animation: none; }
}
.hero-texto {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  max-width: 560px;
  padding: 40px 0 80px;
}
.hero-texto .link { align-self: flex-start; }
.hero-sub { font-size: 16px; line-height: 1.65; color: var(--titulo); max-width: 400px; }
@media (max-width: 900px) {
  .hero-topo {
    min-height: 80vh;
  }
  .hero-topo::before {
    background: url("../img/topo-vertical.jpg") center / cover no-repeat;
  }
  .hero-topo::after {
    background: linear-gradient(180deg, rgba(247,244,239,.4), rgba(247,244,239,.78) 45%, rgba(247,244,239,.4));
  }
  .hero-texto { max-width: 100%; }
}

/* menu mais legível sobre a imagem do topo */
.hero-topo .menu a { color: var(--titulo); font-weight: 400; }
.hero-topo .menu a:hover { color: var(--pau-brasil); }

/* serviços: dois cards com foto em cima e texto embaixo + outros caminhos ao lado */
.servicos {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr);
  gap: 48px;
  align-items: start;
}
.servicos .card {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: var(--titulo);
}
.servicos .card-foto {
  aspect-ratio: 4 / 5;
  height: auto;
  border-radius: 6px;
  margin-bottom: 12px;
}
.servicos .card-foto-ritual { object-position: center; }
.servicos .card-tag { font-size: 13px; letter-spacing: 0.06em; color: var(--texto); }
.servicos .h-card { font-size: 28px; }
.servicos .texto-p { font-size: 16px; color: var(--titulo); opacity: .8; }
.servicos .rotulo { color: var(--pau-brasil); }
.servicos .card:hover .h-card { color: var(--pau-brasil); }

/* outros caminhos: cocriar, alinhado ao topo dos cards */
.caminhos {
  display: flex;
  flex-direction: column;
}
.caminhos-titulo {
  margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--texto);
}
.caminhos a {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: 24px 0;
  border-top: 1px solid var(--fio);
  text-decoration: none;
  color: var(--titulo);
}
.caminhos .card-tag-texto { font-size: 13px; letter-spacing: 0.06em; color: var(--texto); }
.caminhos .h-card { font-size: 22px; }
.caminhos a:hover .h-card { color: var(--pau-brasil); }

@media (max-width: 900px) {
  .servicos { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .caminhos a { padding: 20px 0; }
}

/* fotos reais: sem moldura de placeholder */
img.foto { padding: 0; background: none; display: block; object-fit: cover; }

/* laboratório: texto à esquerda, vídeo vertical à direita */
.lab-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 64px; align-items: center; }
.lab-midia video, .lab-midia img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 6px; background: var(--foto); }
.lab-poster { display: none !important; }
@media (max-width: 900px) {
  .lab-grade { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .lab-midia video { display: none; }
  .lab-poster { display: block !important; }
}

/* tese (home): rótulo e título à esquerda, texto à direita começando na altura do título */
.tese { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px; row-gap: 24px; }
.tese > .rotulo { grid-column: 1; grid-row: 1; }
.tese > h2 { grid-column: 1; grid-row: 2; }
.tese-texto { grid-column: 2; grid-row: 2; }
.tese-texto .texto { max-width: 58ch; }
@media (max-width: 900px) {
  .tese { grid-template-columns: minmax(0, 1fr); }
  .tese > .rotulo, .tese > h2, .tese-texto { grid-column: 1; grid-row: auto; }
}

/* experiências coletivas: dois caminhos (vivências e jornada), blocos inteiros clicáveis */
.dois-caminhos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.caminho { display: flex; flex-direction: column; gap: 16px; padding-top: 32px; border-top: 1px solid var(--fio); text-decoration: none; color: var(--titulo); }
.caminho-link { align-self: flex-start; margin-top: 8px; font-size: 14px; color: var(--titulo); border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.caminho:hover .caminho-link, .caminho:focus-visible .caminho-link { color: var(--pau-brasil); }
@media (max-width: 900px) {
  .dois-caminhos { grid-template-columns: minmax(0, 1fr); }
}

/* caminho de volta (vivências e jornada → experiências coletivas) */
.trilha { margin: 0 0 16px; font-size: 13px; letter-spacing: 0.06em; color: var(--texto); }
.trilha a { color: inherit; }
.trilha a:hover { color: var(--pau-brasil); }

/* abertura sem foto: texto numa coluna só, na margem esquerda, largura de leitura */
.abertura.abertura-texto { grid-template-columns: minmax(0, 1fr); max-width: 720px; }


/* faixa de cor de ponta a ponta (.faixa genérica; .faixa-registro em vivências)
   registro de vivências: cards com ficha + card convite.
   Nova vivência = copiar um .card-vivencia; o .card-convite fica sempre por último. */
.faixa-registro, .faixa {
  margin: var(--respiro) calc(50% - 50vw);
  padding: var(--respiro) calc(50vw - 50%);
  background: var(--foto);
}
.grade-vivencias { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 48px; }
.card-vivencia { background: var(--papel); padding: 40px; border-radius: 2px; display: flex; flex-direction: column; gap: 16px; }
.card-vivencia-topo { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.etiqueta { font-size: 13px; text-transform: lowercase; letter-spacing: 0.08em; color: var(--araucaria); border: 1px solid var(--araucaria); padding: 4px 10px; }
.card-vivencia-data { font-size: 13px; letter-spacing: 0.04em; color: var(--texto); }
.card-vivencia-nome { font-size: 32px; font-weight: 200; line-height: 1.15; }
.ficha { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px 16px; margin: 8px 0 0; padding-top: 20px; border-top: 1px solid var(--fio); font-size: 14px; line-height: 1.55; }
.ficha dt { font-size: 13px; letter-spacing: 0.04em; color: var(--texto); padding-top: 2px; }
.ficha dd { margin: 0; color: var(--titulo); }
.card-vivencia-rodape { margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--fio); font-size: 13px; letter-spacing: 0.04em; color: var(--texto); }
.card-convite { order: 1; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 40px; border: 1px dashed rgba(78, 37, 15, .4); border-radius: 2px; }
@media (max-width: 900px) {
  .grade-vivencias { grid-template-columns: minmax(0, 1fr); }
  .card-vivencia, .card-convite { padding: 28px 24px; }
  .ficha { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ficha dd + dt { margin-top: 10px; }
}

/* ===== ritual ===== */
.frase-italica { font-family: var(--serif); font-weight: 200; font-style: italic; font-size: 26px; line-height: 1.3; color: var(--araucaria); }

/* como acontece: três tempos */
.tres-tempos { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.passo-num { font-family: var(--serif); font-weight: 200; font-size: 64px; line-height: 1; color: var(--pau-brasil); }
.passo-corpo { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--fio); }
.passo-corpo .h-card { font-size: 24px; }

/* o que compõe: lista à esquerda, foto fixa à direita */
.compoe { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: start; }
.compoe-lista { list-style: none; margin: 24px 0 0; padding: 0; }
.compoe-lista li { padding: 28px 0; }
.compoe-lista li + li { border-top: 1px solid var(--fio); }
.compoe-nome { font-family: var(--serif); font-weight: 300; font-size: 24px; line-height: 1.25; margin-bottom: 10px; }
.compoe-lista .texto { max-width: 56ch; }
.compoe-foto { aspect-ratio: 4 / 5; height: auto; position: sticky; top: 48px; }

/* pergunta */
.pergunta { max-width: 760px; margin-inline: auto; text-align: center; }
.pergunta .titulo { font-size: 40px; line-height: 1.3; }

/* agenda */
.card-agenda { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 48px; align-items: center; padding: 56px; border: 1px solid rgba(78, 37, 15, .3); border-radius: 2px; }
.card-agenda-acao { justify-self: end; }

@media (max-width: 900px) {
  .tres-tempos { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .compoe { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .compoe-foto { order: -1; position: static; }
  .pergunta .titulo { font-size: 28px; }
  .card-agenda { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 28px; }
  .card-agenda-acao { justify-self: start; }
}

/* ===== refinamentos: laboratório, credibilidade, área de toque ===== */
.lab-texto { display: flex; flex-direction: column; gap: 16px; }
.lab-midia { justify-self: end; width: 100%; max-width: 420px; }

/* linha de credibilidade (home), entre o encerramento e o rodapé */
.credibilidade { margin: var(--respiro-curto) 0 0; padding-top: 24px; border-top: 1px solid var(--fio); font-size: 15px; line-height: 1.6; color: var(--texto); }
.credibilidade a { color: var(--pau-brasil); text-decoration: none; white-space: nowrap; }
.credibilidade a:hover { color: var(--araucaria); }

@media (max-width: 900px) {
  .lab-midia { justify-self: stretch; max-width: none; }
  /* links de texto pequeno: área de toque de pelo menos 44px, sem mudar o desenho */
  .menu a, .link, .trilha a, .rodape a, .credibilidade a { position: relative; }
  .menu a::after, .link::after, .trilha a::after, .rodape a::after, .credibilidade a::after {
    content: ""; position: absolute; inset: -14px -6px;
  }
}

/* tablet: cards dos caminhos em 2 colunas e vídeo do laboratório com largura contida */
@media (min-width: 601px) and (max-width: 900px) {
  .servicos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .caminhos { grid-column: 1 / -1; }
  .lab-midia { max-width: 420px; justify-self: start; }
}

/* ===== sobre ===== */
/* duas colunas 5/12 | 7/12, alinhadas ao topo (também dentro de .faixa) */
.duas-colunas { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.cargo { font-size: 14px; letter-spacing: 0.04em; color: var(--texto); }
.formacao { margin-top: 24px; }
.formacao ul { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--fio); }
.formacao li { display: flex; flex-direction: column; gap: 2px; padding: 14px 0; }
.formacao li + li { border-top: 1px solid var(--fio); }
.formacao-curso { font-size: 16px; line-height: 1.5; color: var(--titulo); }
.formacao-lugar { font-size: 14px; line-height: 1.5; color: var(--texto); }
.pergunta .botao { margin-top: 32px; }
@media (max-width: 900px) {
  .duas-colunas { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

/* sobre: blocos em zigue-zague (imagem e texto alternados), separados por fio.
   No HTML a imagem vem primeiro (fica antes do texto no celular);
   .zz-inverte manda a imagem para a direita no computador. */
.zz { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: center; padding-block: var(--respiro); }
.zz:first-child { padding-top: var(--respiro-curto); }
.zz + .zz { border-top: 1px solid var(--fio); }
.zz + .pergunta { margin-top: 0; }
.zz-inverte .zz-img { order: 2; }
.zz-img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.zz-trajetoria { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
.zz-trajetoria .zz-img { position: sticky; top: 48px; }
.rotulo .num { color: var(--pau-brasil); }
.nome { font-family: var(--serif); font-weight: 300; font-size: 28px; line-height: 1.2; color: var(--titulo); }
@media (max-width: 900px) {
  .zz, .zz-trajetoria { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .zz-trajetoria .zz-img { position: static; }
  .zz-inverte .zz-img { order: 0; }
}

/* ===== formulários (interesse e cocriar) ===== */
.formulario { max-width: 640px; margin-top: 40px; display: flex; flex-direction: column; gap: 28px; }
.campo { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.campo > label, .campo > legend { font-size: 14px; letter-spacing: 0.02em; color: var(--texto); }
.campo > legend { padding: 0; margin-bottom: 4px; }
.formulario input[type="text"], .formulario input[type="tel"], .formulario input[type="email"],
.formulario input[type="date"], .formulario input[type="number"],
.formulario textarea, .formulario select {
  width: 100%; padding: 10px 0; font: inherit; font-size: 16px; color: var(--titulo);
  background: transparent; border: 0; border-bottom: 1px solid var(--borda); border-radius: 0;
  -webkit-appearance: none; appearance: none;
}
.formulario input[type="date"] { min-height: 44px; }
.formulario textarea { min-height: 110px; resize: vertical; line-height: 1.6; }
.formulario select {
  padding-right: 28px; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23484651' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 4px center;
}
.formulario input:focus, .formulario textarea:focus, .formulario select:focus { border-bottom-color: var(--pau-brasil); }
.formulario [aria-invalid="true"] { border-bottom-color: var(--pau-brasil); }
.campos-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; }

/* opções: caixas grandes, clicáveis pelo texto */
.grupo { flex-direction: row; flex-wrap: wrap; column-gap: 28px; row-gap: 0; }
.opcao { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 16px; line-height: 1.4; color: var(--titulo); cursor: pointer; }
.opcao input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--pau-brasil); cursor: pointer; }
.campo > .opcao { font-size: 16px; letter-spacing: 0; color: var(--titulo); }
.consentimento { align-items: flex-start; }
.consentimento input { margin-top: 2px; }

.campo-erro { font-size: 14px; color: var(--pau-brasil); }
.form-erro-geral { font-size: 15px; line-height: 1.6; color: var(--pau-brasil); padding: 14px 16px; border: 1px solid rgba(122, 34, 56, .35); border-radius: 2px; }
.formulario .botao { align-self: flex-start; min-height: 44px; font-family: inherit; background: transparent; cursor: pointer; }
.formulario .botao:disabled { opacity: .6; cursor: progress; }
.form-sucesso { max-width: 640px; margin-top: 40px; padding: 32px; border: 1px dashed rgba(78, 37, 15, .4); border-radius: 2px; font-family: var(--serif); font-weight: 200; font-style: italic; font-size: 24px; line-height: 1.4; color: var(--araucaria); }

/* anti-spam: campo fora da tela, invisível para pessoas e leitores de tela */
.pote { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ===== política de privacidade ===== */
.politica { max-width: 720px; }
.politica-item { display: flex; flex-direction: column; gap: 10px; padding: 28px 0; border-top: 1px solid var(--fio); }
.politica-titulo { font-family: var(--serif); font-weight: 300; font-size: 22px; line-height: 1.3; }
.politica-data { padding-top: 20px; border-top: 1px solid var(--fio); font-size: 14px; color: var(--texto); }

@media (max-width: 900px) {
  .campos-2 { grid-template-columns: minmax(0, 1fr); }
}

/* ===== para organizações ===== */
.cards-org { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 48px; }
.card-org { display: flex; flex-direction: column; background: var(--papel); padding: 40px; border-radius: 2px; }
.card-org-num { font-family: var(--serif); font-weight: 200; font-size: 40px; line-height: 1; color: var(--pau-brasil); }
.card-org-corpo { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--fio); }
.card-org-corpo .h-card { font-size: 24px; line-height: 1.25; }
.pergunta .texto { margin: 16px auto 0; }
.orientacao { margin-top: 24px; font-size: 14px; line-height: 1.6; color: var(--texto); }
.orientacao a { color: var(--pau-brasil); text-decoration: none; white-space: nowrap; }
.orientacao a:hover { color: var(--araucaria); }
.menu a { white-space: nowrap; }
@media (max-width: 900px) {
  .cards-org { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .card-org { padding: 28px 24px; }
  .orientacao a { position: relative; }
  .orientacao a::after { content: ""; position: absolute; inset: -14px -6px; }
}

/* ===== ficha do ritual ===== */
.ficha-form { max-width: 720px; margin-top: 0; gap: 0; }
.ficha-bloco { display: flex; flex-direction: column; gap: 28px; padding: 40px 0; }
.ficha-bloco + .ficha-bloco { border-top: 1px solid var(--fio); }
.ficha-bloco:first-child { padding-top: 0; }
.ficha-bloco-titulo { font-family: var(--serif); font-weight: 300; font-size: 26px; line-height: 1.25; }
.ficha-form .botao { margin-top: 8px; }
.ficha-form .form-erro-geral { margin-bottom: 20px; }
.campo-ajuda { font-size: 14px; line-height: 1.5; color: var(--texto); }
.grupo-coluna { flex-direction: column; }
.aviso { font-size: 15px; line-height: 1.6; color: var(--titulo); padding: 14px 18px; border-left: 2px solid var(--araucaria); background: var(--argila-crua); }
.aviso a { color: var(--pau-brasil); }

/* blocos que aparecem conforme a resposta */
.condicional { display: flex; flex-direction: column; gap: 28px; }
.condicional.aparece { animation: aparecer .35s ease-out; }
@keyframes aparecer { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .condicional.aparece { animation: none; } }

/* escala de 0 a 10: botões grandes */
.escala-itens { display: flex; flex-wrap: wrap; gap: 8px; }
.escala-item { position: relative; cursor: pointer; }
.escala-item input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.escala-item span { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; font-size: 16px; color: var(--titulo); border: 1px solid var(--borda); border-radius: 2px; }
.escala-item:hover span { border-color: var(--pau-brasil); }
.escala-item input:checked + span { background: var(--pau-brasil); border-color: var(--pau-brasil); color: var(--papel); }
.escala-item input:focus-visible + span { outline: 2px solid var(--pau-brasil); outline-offset: 3px; }

div.form-sucesso { display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 900px) {
  .escala-item span { width: 44px; height: 44px; }
}