/* Caminhos do Benzimento · cor, terra e presença.
   Variação da landing; o catálogo do Sistema Raízes permanece canônico. */
:root {
  --vivo-terra-escura: #5c241b;
  --vivo-terra: #a73c24;
  --vivo-sol: #f7d959;
  --vivo-creme: #f6f0dc;
  /* Variação apenas desta página: as superfícies herdadas do sistema
     acompanham a terracota, inclusive vidro, sombras e seleção. */
  --mata-900: var(--vivo-terra-escura);
  --verde-600: #b5643d;
  --verde-400: #dca85f;
}

/* A fotografia continua documental; a cor dá sustentação à leitura. */
.hero-full { min-height: min(960px, 100svh); padding-block: 10rem 4rem; background: var(--vivo-creme); }
.hero-full__midia { left: 30%; }
.hero-full__midia img { object-position: 64% 36%; }
.hero-full__veu {
  background: linear-gradient(90deg, var(--vivo-creme) 0%, #f6f0dcfa 23%, #f6f0dceb 35%, #f6f0dc80 53%, #f6f0dc00 76%),
    linear-gradient(0deg, #f6f0dc38, transparent 42%);
}
.hero-full__eyebrow { display: flex; align-items: center; gap: .75rem; color: var(--vivo-terra); font-size: .6875rem; }
.hero-full__eyebrow::before { content: ''; width: 1.75rem; height: 3px; background: var(--vivo-terra); flex: none; }
.hero-full__titulo { color: var(--marrom-900); max-width: 12ch; font-weight: 700; line-height: .98; font-size: clamp(3rem, 5.5vw, 6.5rem); margin-top: 1.5rem; }
.hero-full__titulo span { color: var(--vivo-terra); }
.hero-full__titulo:focus { outline: none; }
.hero-full__sub { color: var(--marrom-900); max-width: 30ch; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.5; }
.hero-full__apoio { max-width: 38ch; font-size: .9375rem; color: var(--marrom-900); line-height: 1.6; }
.hero-full__acoes { gap: 1.25rem; margin-top: 1.75rem; }
.hero-full__acoes .btn--outline { padding-inline: 0; border: 0; background: none; box-shadow: none; backdrop-filter: none; color: var(--vivo-terra); text-decoration: underline; text-underline-offset: 5px; }
.hero-full__acoes .btn--outline::before, .hero-full__acoes .btn--outline::after { display: none; }
.hero-full__nota { margin: .8rem 0 0; font-size: .75rem; color: var(--marrom-900); }
.hero-full__notas { gap: 1.5rem; margin-top: 2rem; }
.hero-full__notas li { color: var(--marrom-900); padding: 0; max-width: 22ch; border-radius: 0; font-size: .75rem; background: none; box-shadow: none; backdrop-filter: none; gap: .6rem; }
.hero-full__notas .ico { color: var(--vivo-terra); width: 1.1rem; height: 1.1rem; }
.hero-full__selo { position: absolute; right: var(--margem-externa); bottom: 5rem; display: grid; place-content: center; width: 8rem; height: 8rem; padding: 1rem; border-radius: 50%; background: var(--vivo-sol); color: var(--marrom-900); text-align: center; transform: rotate(9deg); font-size: .6875rem; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; }
.hero-full__selo svg { margin: 0 auto .4rem; }

/* CTAs sólidos: contraste de cor e resposta tátil, sem brilho contínuo. */
.btn--primario { --btn-bg: var(--vivo-terra); background: var(--vivo-terra); color: var(--vivo-creme); border: 1px solid var(--vivo-terra); box-shadow: 0 4px 0 var(--vivo-terra-escura); backdrop-filter: none; font-weight: 600; }
.btn--primario::before, .btn--primario::after { display: none; }
.btn--primario .ico--seta { width: 1.5rem; height: 1.5rem; }
.btn--grande { min-height: 3.5rem; padding-inline: 1.75rem; }
.btn--whats { --btn-bg: var(--vivo-terra-escura); background: var(--vivo-terra-escura); backdrop-filter: none; border: 1px solid #f6f0dc5c; }
.btn--whats::before { display: none; }
@media (hover: hover) and (pointer: fine) {
  .btn--primario:hover { background: #8c381b; color: var(--vivo-creme); transform: translateY(-2px); box-shadow: 0 6px 0 var(--vivo-terra-escura); }
  .btn--whats:hover { background: #8c381b; }
}
.btn--primario:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--vivo-terra-escura); }
.btn--primario:focus-visible { outline: 3px solid var(--vivo-terra); outline-offset: 5px; }
.ctx-escuro .btn--primario:focus-visible { outline-color: var(--vivo-creme); }
.hero-full .btn--primario:focus-visible { outline-color: var(--vivo-terra-escura); }
.cabecalho__marca, .navpill { background: #5c241bf5; }
.cabecalho__marca .cabecalho__assinatura { color: #eae8d3c9; }
.navpill__chip { background: var(--vivo-sol); }
.abrir-menu { background: var(--vivo-creme); color: var(--vivo-terra-escura); border-color: var(--vivo-creme); }
.cabecalho__botao { font-size: .8125rem; }

/* Uma faixa de cor pontua a passagem entre a imagem e o conteúdo. */
.faixa-saberes { background: var(--vivo-terra); color: var(--vivo-creme); overflow: hidden; }
.faixa-saberes__linha { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-block: 1.25rem; font-family: var(--fonte-display); font-size: clamp(.875rem, 1.65vw, 1.4rem); font-weight: 500; }
.faixa-saberes svg { color: var(--vivo-sol); flex: none; width: 1.3rem; height: 1.3rem; }
.faixa-saberes span { white-space: nowrap; }
#a-formacao { background: var(--vivo-creme); }
#a-formacao .t-realce { color: var(--vivo-terra); }
.destaque-calmo { border-left-color: var(--vivo-terra); }
#o-que-vive { background: #f0e4d0; }
.tema__ord { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--vivo-terra); color: var(--vivo-creme); font-size: .625rem; letter-spacing: .04em; }
.tema:nth-child(3n + 2) .tema__ord { background: var(--vivo-terra); }
.tema:nth-child(3n) .tema__ord { background: var(--vivo-sol); color: var(--marrom-900); }
#a-mentora { background: var(--vivo-terra-escura); }
.mentora-bloco__alcunha { color: var(--vivo-sol); }
.mosaico__titulo { background: var(--vivo-terra); }
#como-funciona { background: var(--vivo-creme); }
.etapa--agora { background: var(--vivo-terra); }
.etapa--agora .etapa__texto { color: var(--vivo-creme); }
.etapa__link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 1rem; color: var(--vivo-sol); font-weight: 600; text-underline-offset: 4px; }
.etapa__link:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.informacoes { background: #e8d297; }
.informacoes .campo { border-color: #33110d26; }
.convite-turma { display: flex; flex-direction: column; gap: 1.5rem; padding: clamp(1.75rem, 4vw, 3rem); border-radius: var(--raio-xl); background: var(--vivo-terra-escura); color: var(--vivo-creme); align-self: center; }
.convite-turma h3 { color: var(--vivo-sol); }
.convite-turma p { margin: 0; color: var(--vivo-creme); }
.convite-turma__icone { width: 3rem; height: 3rem; color: var(--vivo-sol); }
.convite-turma .t-eyebrow { color: var(--vivo-creme); }
.convite-turma .btn--primario { background: var(--vivo-sol); color: var(--marrom-900); border-color: var(--vivo-sol); }
.fechamento-campo { background: #ecd599; }
.fechamento-campo .t-display { color: var(--vivo-terra-escura); }
.fechamento-campo .t-realce-ouro, .fechamento-campo .ornamento--ouro { color: var(--vivo-terra); }
.fechamento-campo .fechamento__citacao p { color: var(--marrom-900); }
.fechamento-campo .btn--primario { background: var(--vivo-terra); color: var(--vivo-creme); border-color: var(--vivo-terra); box-shadow: 0 4px 0 var(--marrom-900); }
.fechamento-campo .btn--primario:focus-visible { outline-color: var(--marrom-900); }
.fechamento-campo .t-sec, .fechamento-campo .fechamento__citacao footer { color: var(--marrom-900); }
.rodape { background: var(--marrom-900); }

/* Abertura: três campos cromáticos, com saída curta e gesto para pular. */
html[data-abertura] .abertura { background: var(--vivo-terra); }
html[data-abertura] .abertura[data-cena-atual="2"] { background: var(--vivo-terra-escura); }
html[data-abertura] .abertura[data-cena-atual="3"] { background: var(--vivo-sol); }
.abertura__fundo { background: none; }
.abertura__fundo::before { content: ''; position: absolute; width: min(68vw, 850px); aspect-ratio: 1; left: 50%; top: 47%; border: 1px solid #f6f0dc24; border-radius: 50%; transform: translate(-50%, -50%); }
.cena__texto { color: var(--vivo-creme); font-size: clamp(2.1rem, 4.8vw, 5rem); font-weight: 600; }
.cena__fichas li { color: var(--vivo-creme); border-color: #f6f0dc59; background: transparent; backdrop-filter: none; }
.raiz-traco { width: 2px; background: linear-gradient(to top, #f7d959a6, #f7d95900); }
.onda { border-width: 2px; border-color: #f7d95966; }
.abertura__legenda, .abertura__acao { color: var(--vivo-creme); }
.abertura__acao--forte { background: var(--vivo-creme); color: var(--vivo-terra); border-color: var(--vivo-creme); }
.abertura[data-cena-atual="3"] .cena__casa,
.abertura[data-cena-atual="3"] .cena__assinatura,
.abertura[data-cena-atual="3"] .abertura__legenda,
.abertura[data-cena-atual="3"] .abertura__acao { color: var(--marrom-900); }
.abertura[data-cena-atual="3"] .abertura__barra { border-color: #33110d33; }
.abertura[data-cena-atual="3"] .abertura__acao { border-color: #33110d66; }
.abertura[data-cena-atual="3"] .abertura__acao .ico { color: var(--marrom-900); }
.abertura[data-cena-atual="3"] .abertura__progresso span { background: #33110d33; }
.abertura[data-cena-atual="3"] .abertura__progresso span::after { background: var(--vivo-terra); }
.abertura[data-cena-atual="3"] .arco { border-color: #33110d66; }
.cena__simbolo { height: 5.5rem; }

@media (min-width: 1081px) and (max-width: 1270px) {
  .cabecalho__nav .nav__link { padding-inline: .8rem; }
  .cabecalho__botao { padding-inline: 1rem; }
}
@media (max-width: 1080px) { .hero-full__selo { width: 6.5rem; height: 6.5rem; font-size: .5625rem; } }
@media (max-width: 760px) {
  .hero-full { min-height: 0; padding-top: clamp(20rem, 68vw, 30rem); padding-bottom: 2.5rem; }
  .hero-full__midia { inset: 0 0 auto; height: clamp(30rem, 120vw, 40rem); }
  .hero-full__midia img { object-position: 50% 30%; }
  .hero-full__veu { background: linear-gradient(180deg, #33110d18, #f6f0dc00 10rem, #f6f0dccf 18rem, var(--vivo-creme) 30rem); }
  .hero-full__eyebrow { font-size: .625rem; letter-spacing: .12em; max-width: 34ch; line-height: 1.6; }
  .hero-full__titulo { font-size: clamp(2.65rem, 9.5vw, 4.5rem); max-width: 13ch; margin-top: 1rem; }
  .hero-full__sub { max-width: 32ch; margin-top: 1.25rem; }
  .hero-full__apoio { max-width: 42ch; font-size: .875rem; }
  .hero-full__acoes { align-items: stretch; flex-direction: column; gap: .75rem; }
  .hero-full__acoes .btn--primario { justify-content: space-between; }
  .hero-full__acoes .btn--outline { align-self: flex-start; min-height: 2.75rem; }
  .hero-full__notas { gap: .75rem; margin-top: 1.25rem; }
  .hero-full__notas li { width: auto; max-width: none; }
  .hero-full__selo { display: none; }
  .faixa-saberes__linha { justify-content: center; flex-wrap: wrap; gap: .65rem 1rem; padding-block: 1rem; }
  .faixa-saberes svg { width: 1rem; height: 1rem; }
  .faixa-saberes__extra { display: none; }
  .cabecalho__marca { padding-right: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cena *, .cena *::after { animation: none !important; opacity: 1; transform: none; clip-path: none; }
  .hero-full__midia img { transition: none; }
  .btn--primario:hover { transform: none; }
}

/* ---------- CABEÇALHO EM BARRA ÚNICA ---------------------------
   As três pílulas soltas tinham alturas diferentes e sumiam sobre a
   fumaça da foto. Agora é uma barra sólida só, com marca, links e
   WhatsApp alinhados na mesma linha e na mesma altura (44px). */
.cabecalho__barra {
  width: min(100% - 2 * var(--gutter, 1.5rem), 1240px);
  min-height: 60px;
  padding: 8px 8px 8px 10px;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  border: 1px solid #f6f0dc1f;
  border-radius: 999px;
  background: #3d1913f7;
  box-shadow: inset 0 1px 0 #ffffff14, 0 18px 40px -18px #33110dcc;
}
.cabecalho__marca, .navpill {
  background: transparent; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.navpill::after { display: none; }
.cabecalho__marca { gap: .65rem; min-height: 44px; padding: 0 .75rem 0 .35rem; color: var(--vivo-creme); }
.cabecalho__marca .marca { height: 2.25rem !important; width: 2.25rem; }
.cabecalho__nome { font-size: .8125rem; font-weight: 700; letter-spacing: .03em; line-height: 1.15; }
.cabecalho__marca .cabecalho__assinatura { margin-top: 3px; color: var(--vivo-sol); font-size: .5625rem; font-weight: 600; letter-spacing: .2em; opacity: .9; }

.navpill { padding: 0; }
.navpill__chip { top: 0; height: 100%; background: var(--vivo-sol); box-shadow: none; }
.cabecalho__nav .nav__link {
  display: flex; align-items: center; min-height: 44px;
  padding: 0 1.15rem;
  color: var(--vivo-creme);
  font-size: .9375rem; font-weight: 500; letter-spacing: .01em;
}
.cabecalho__nav .nav__link.is-selected,
.cabecalho__nav .nav__link:focus-visible { color: var(--marrom-900); }
.cabecalho__nav .nav__link:focus-visible { outline: 2px solid var(--vivo-sol); outline-offset: 2px; border-radius: 999px; }

.cabecalho__botao {
  gap: .55rem; min-height: 44px; padding: 0 1.25rem 0 1rem;
  border: 0; border-radius: 999px;
  background: var(--vivo-creme); color: var(--vivo-terra-escura);
  font-size: .875rem; font-weight: 700; box-shadow: none;
}
.cabecalho__botao .ico { color: var(--vivo-terra); }
@media (hover: hover) and (pointer: fine) {
  .cabecalho__botao:hover { background: #fff; color: var(--vivo-terra-escura); transform: translateY(-1px); }
}
.cabecalho__botao:focus-visible { outline: 2px solid var(--vivo-sol); outline-offset: 3px; }
.abrir-menu { width: 44px; height: 44px; }

@media (min-width: 1081px) and (max-width: 1270px) {
  .cabecalho__nav .nav__link { padding-inline: .8rem; font-size: .875rem; }
  .cabecalho__marca .cabecalho__assinatura { display: none; }
}
@media (max-width: 1080px) {
  .cabecalho__barra { grid-template-columns: auto 1fr; }
}
@media (max-width: 760px) {
  .cabecalho__barra { width: calc(100% - 1.5rem); min-height: 56px; padding: 6px 6px 6px 8px; }
  .cabecalho__marca { padding-right: .5rem; }
  .cabecalho__marca .marca { height: 2rem !important; width: 2rem; }
  .cabecalho__botao { width: 44px; padding: 0; justify-content: center; }
}

/* ---------- TEMAS EM CARTÕES -----------------------------------
   A grade de títulos soltos não convidava à leitura. Cada tema vira
   um cartão com ícone, número, título e uma frase; o último fecha o
   percurso em destaque escuro. */
.temas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; border-top: 0; }
.tema, .tema:nth-child(2n), .tema:nth-child(4n), .tema:not(:nth-child(4n + 1)) {
  position: relative;
  gap: .75rem;
  padding: 1.5rem 1.5rem 1.75rem;
  border: 1px solid #5c241b1a;
  border-radius: 20px;
  background: #fbf7ec;
  box-shadow: 0 1px 0 #ffffffb3 inset, 0 10px 30px -22px #5c241b80;
  transition: transform .25s var(--ease-out, ease), box-shadow .25s var(--ease-out, ease), border-color .25s;
}
@media (hover: hover) and (pointer: fine) {
  .tema:hover { transform: translateY(-4px); border-color: #a73c244d; box-shadow: 0 1px 0 #ffffffb3 inset, 0 22px 40px -24px #5c241b99; }
}
.tema__topo { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: .5rem; }
.tema__icone { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 16px; background: #a73c241a; color: var(--vivo-terra); }
.tema__icone .ico { width: 1.6rem; height: 1.6rem; }
.tema:nth-child(3n + 2) .tema__icone { background: #f7d95966; color: var(--vivo-terra-escura); }
.tema:nth-child(3n) .tema__icone { background: #5c241b14; color: var(--vivo-terra-escura); }
.tema__ord, .tema:nth-child(3n + 2) .tema__ord, .tema:nth-child(3n) .tema__ord {
  display: block; width: auto; height: auto; border-radius: 0; background: none;
  font-family: var(--fonte-display); font-size: 2.25rem; font-weight: 700; line-height: 1; letter-spacing: -.02em;
  color: #a73c2433;
}
.tema__titulo { font-size: 1.25rem; line-height: 1.2; color: var(--marrom-900); }
.tema__texto { margin: 0; color: #4a2a22; font-size: .9375rem; line-height: 1.55; }

.tema--final, .tema--final:nth-child(4n) { background: var(--vivo-terra-escura); border-color: var(--vivo-terra-escura); box-shadow: 0 18px 40px -22px #33110dcc; }
.tema--final .tema__icone { background: var(--vivo-sol); color: var(--vivo-terra-escura); }
.tema--final .tema__ord { color: #f7d95959; }
.tema--final .tema__titulo { color: var(--vivo-creme); }
.tema--final .tema__texto { color: #f6f0dcd9; }

@media (max-width: 980px) {
  .temas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .temas { grid-template-columns: 1fr; gap: .75rem; }
  .tema, .tema:nth-child(2n), .tema:nth-child(4n), .tema:not(:nth-child(4n + 1)) {
    display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; row-gap: .25rem; padding: 1.25rem;
  }
  .tema__topo { grid-row: 1 / span 2; margin: 0; }
  .tema__icone { width: 2.75rem; height: 2.75rem; border-radius: 14px; }
  .tema__ord { display: none !important; }
  .tema__titulo { font-size: 1.0625rem; align-self: end; }
  .tema__texto { font-size: .875rem; }
}
@media (prefers-reduced-motion: reduce) { .tema { transition: none; } .tema:hover { transform: none; } }

/* ---------- VERDE DA IDENTIDADE ---------------------------------
   Esta página trocou os verdes do sistema por terracota (topo do
   arquivo). Os verdes originais voltam com nomes próprios, para
   não desfazer essa troca nas superfícies herdadas. */
:root {
  --id-mata: #17330c;
  --id-mata-800: #1f4417;
  --id-folha: #338875;
  --id-agua: #6dad9e;
}

/* "O que fica com você" passa a ser o bloco verde da página */
.contrapartida { background: var(--id-mata); }
.contrapartida::before {
  background:
    radial-gradient(34% 42% at 14% 8%,  color-mix(in srgb, var(--id-agua) 55%, transparent), transparent 70%),
    radial-gradient(40% 48% at 92% 90%, color-mix(in srgb, var(--id-folha) 70%, transparent), transparent 74%),
    radial-gradient(28% 36% at 78% 4%,  color-mix(in srgb, var(--vivo-sol) 32%, transparent), transparent 74%),
    radial-gradient(30% 38% at 6% 88%,  color-mix(in srgb, var(--id-folha) 60%, transparent), transparent 74%);
}
.contrapartida__painel {
  background: color-mix(in srgb, var(--id-mata) 58%, transparent);
  box-shadow:
    inset 0 22px 44px -30px #ffffff8c,
    inset 0 -26px 48px -36px #0b1a06,
    0 28px 64px -34px #0b1a06;
}
.contrapartida .t-eyebrow { color: var(--id-agua); }
.contrapartida .t-h2 { color: var(--vivo-creme); }
.contrapartida .destaque-calmo { border-left-color: var(--id-agua); color: var(--vivo-creme); }
.contrapartida__texto p.t-body { color: #f6f0dce6; }
.incluido__item { color: var(--vivo-creme); border-top-color: #f6f0dc26; }
.incluido__item:last-child { border-bottom-color: #f6f0dc26; }
.incluido__ico { color: var(--vivo-sol); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .contrapartida__painel { background: var(--id-mata-800); }
}
@media (prefers-reduced-transparency: reduce) {
  .contrapartida__painel { background: var(--id-mata-800); }
}

/* Nos temas: um terço dos ícones em verde folha e o cartão final em
   verde mata, que leva o olhar para o bloco verde logo abaixo. */
.tema:nth-child(3n) .tema__icone { background: #33887521; color: var(--id-folha); }
.tema--final, .tema--final:nth-child(4n) { background: var(--id-mata); border-color: var(--id-mata); box-shadow: 0 18px 40px -22px #0b1a06; }
.temas .tema--final .tema__icone { background: var(--id-agua); color: var(--id-mata); }
.temas .tema--final .tema__ord { color: #6dad9e66; }