/* =========================================================
   Components
   ========================================================= */

/* ---------- botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .85rem 1.5rem;
  font-size: .86rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  border-radius: 8px; text-decoration: none; border: 1px solid transparent;
  transition: transform var(--dur-rapido) var(--curva), background-color var(--dur-rapido), color var(--dur-rapido), border-color var(--dur-rapido);
}
.botao:hover  { transform: translateY(-2px) }
.botao:active { transform: translateY(0) scale(.97) }

.botao-lima { background: var(--folha); color: #FFFFFF; position: relative }
.botao-lima:hover { background: var(--musgo) }
.botao-lima::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  animation: piscar 2.4s ease-out infinite; pointer-events: none;
}

.botao-vazado { border-color: var(--salvia); color: var(--musgo); background: transparent }
.botao-vazado:hover { border-color: var(--musgo); background: var(--musgo); color: var(--areia) }
.botao-grande { padding: 1.05rem 1.9rem; font-size: .92rem }
.ico-zap { width: 19px; height: 19px; flex: none }

/* ---------- badge cargo (herói) ---------- */
.heroi-cargo-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem 1.1rem; border-radius: 99px;
  background: linear-gradient(135deg, var(--folha), var(--musgo));
  color: var(--areia); font-size: .82rem; font-weight: 600;
  letter-spacing: .04em; margin-bottom: 1.4rem;
}

/* ---------- carrossel ---------- */
.carrossel { position: relative }
.trilho {
  list-style: none; margin: 0; padding: 2.4rem clamp(1.25rem,5vw,4rem) 1rem;
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(275px,340px); gap: 1.5rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.trilho::-webkit-scrollbar { display: none }
.trilho:focus-visible { outline-offset: -4px }

.pontos { display: flex; justify-content: center; flex-wrap: wrap; gap: .45rem; margin-top: 2.2rem; padding-inline: 1.25rem }
.pontos button {
  width: 28px; height: 4px; border-radius: 99px; border: 0; padding: 0;
  background: var(--salvia); opacity: .4; cursor: pointer;
  transition: background-color .25s, width .25s, opacity .25s;
}
.pontos button[aria-selected="true"] { background: var(--folha); opacity: 1; width: 38px }

/* ---------- cartões de demanda (escuros) ---------- */
.cartao {
  --acento: var(--salvia);
  position: relative; scroll-snap-align: center;
  background: linear-gradient(160deg, var(--musgo) 0%, var(--noite) 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-top: 3px solid var(--acento);
  border-radius: 16px; padding: 3.4rem 1.75rem 1.9rem;
  display: flex; flex-direction: column;
  box-shadow: 0 2px 12px rgba(13,31,20,.2);
  transition: border-color .25s, box-shadow .25s, transform .25s var(--curva);
}
.cartao::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: .06; border-radius: inherit; clip-path: inset(0 round 16px);
}
.cartao:hover { border-color: var(--acento); box-shadow: 0 12px 32px rgba(13,31,20,.35); transform: translateY(-4px) }

.cartao--ansiedade       { --acento: var(--cor-ansiedade) }
.cartao--depressao       { --acento: var(--cor-depressao) }
.cartao--relacionamentos { --acento: var(--cor-relacionamentos) }
.cartao--autoestima      { --acento: var(--cor-autoestima) }
.cartao--luto            { --acento: var(--cor-luto) }
.cartao--estresse        { --acento: var(--cor-estresse) }
.cartao--sono            { --acento: var(--cor-sono) }
.cartao--autoconhecimento { --acento: var(--cor-autoconhecimento) }

/* ícone decorativo grande ao fundo */
.cartao .selo {
  position: absolute; top: -1.7rem; left: 1.6rem;
  width: 3.4rem; height: 3.4rem; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.08); border: 1px solid var(--acento);
  box-shadow: 0 3px 10px rgba(13,31,20,.2);
  transition: border-color .25s, background-color .25s;
}
.cartao .selo svg {
  width: 1.5rem; height: 1.5rem;
  fill: none; stroke: var(--acento); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; transition: stroke .25s;
}
.cartao:hover .selo { background: var(--acento) }
.cartao:hover .selo svg { stroke: var(--areia) }

.cartao h3 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.025em; color: var(--areia); margin: 0 0 .8rem }
.cartao p  { margin: 0 0 1.9rem; color: var(--salvia-clara); font-size: .97rem; flex: 1 }
.cartao .botao { align-self: flex-start }
.cartao .botao-vazado { color: var(--acento); border-color: var(--acento) }
.cartao .botao-vazado:hover { background: var(--acento); border-color: var(--acento); color: var(--noite) }

@media (max-width:620px) {
  .trilho { padding-inline: 1.25rem; gap: 1rem; grid-auto-columns: min(80vw,300px) }
  .cartao,.passo-cartao { padding: 3.1rem 1.4rem 1.7rem }
}

/* ---------- passo-cartões ---------- */
.passo-cartao {
  position: relative; scroll-snap-align: center;
  background: var(--creme); border: 1px solid var(--linha); border-radius: 16px;
  padding: 3.4rem 1.75rem 1.9rem;
  box-shadow: 0 2px 12px rgba(26,77,46,.06);
  transition: border-color .25s, background-color .25s, box-shadow .25s, transform .25s var(--curva);
}
.passo-cartao:hover { border-color: var(--salvia); background: var(--creme-alto); box-shadow: 0 8px 24px rgba(26,77,46,.10); transform: translateY(-4px) }

.passo-num {
  position: absolute; top: -1.7rem; left: 1.6rem;
  width: 3.4rem; height: 3.4rem; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 34% 28%, #FFFFFF, var(--creme) 72%);
  border: 1px solid var(--salvia); box-shadow: 0 3px 10px rgba(26,77,46,.10);
  font-size: 1.15rem; font-weight: 800; color: var(--folha); letter-spacing: -.02em;
  transition: border-color .25s, background-color .25s, color .25s;
}
.passo-cartao:hover .passo-num { border-color: var(--musgo); background: var(--musgo); color: var(--areia) }
.passo-cartao h3 { margin: 0 0 .55rem; font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; color: var(--musgo) }
.passo-cartao p  { margin: 0; color: var(--texto-suave); font-size: .97rem }

/* ---------- fichas de atendimento ---------- */
.fichas { margin: 0; display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 0 clamp(1.2rem,3vw,2.6rem) }
.fichas > div { padding: 1.15rem 0; border-top: 1px solid var(--linha) }
.ficha-cabecalho { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem }
.ficha-icone { width: 1.15rem; height: 1.15rem; flex: none; fill: none; stroke: var(--folha); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round }
.fichas dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .18em; color: var(--folha); font-weight: 600 }
.fichas dd { margin: 0; font-size: 1rem; line-height: 1.4; color: var(--musgo); padding-right: .5rem }
@media (max-width:480px) { .fichas { grid-template-columns: repeat(2,1fr); gap: 0 1rem } }

/* ---------- depoimentos (editorial) ---------- */
.vozes { column-count: 3; column-gap: clamp(1.2rem,2.5vw,1.8rem); }
@media (max-width:900px) { .vozes { column-count: 2 } }
@media (max-width:560px) { .vozes { column-count: 1 } }

.vozes blockquote {
  margin: 0 0 clamp(1.2rem,2.5vw,1.8rem); padding: 2.1rem 1.8rem;
  background: var(--creme); border: 1px solid var(--linha);
  border-radius: 16px; break-inside: avoid;
  box-shadow: 0 2px 12px rgba(26,77,46,.06);
  position: relative;
}
.vozes blockquote::before {
  content: "\201C"; font-family: var(--display-serif);
  font-size: 7rem; line-height: 1; color: var(--folha); opacity: .1;
  position: absolute; top: -.6rem; left: 1.2rem; pointer-events: none;
}
.vozes p { margin: 0; font-family: var(--display-serif); font-size: 1.06rem; line-height: 1.6; color: var(--musgo); font-style: italic }

.voz-cabecalho { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.1rem }
.voz-avatar {
  flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--folha); border: 2px solid var(--salvia);
  font-family: var(--display); font-size: 1.1rem; font-weight: 700; color: var(--areia);
}
.voz-identidade { min-width: 0 }
.voz-identidade cite { display: block; font-style: normal; font-size: 1rem; font-weight: 700; color: var(--musgo); letter-spacing: -.01em }
.voz-meta { margin: .1rem 0 0; font-size: .8rem; color: var(--texto-suave) }

.estrelas-linha { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: 1.1rem }
.estrelas { display: flex; gap: .2rem }
.estrela-cheia,.estrela-vazia { width: 1.05rem; height: 1.05rem }
.estrela-cheia { fill: var(--folha) }
.estrela-vazia { fill: none; stroke: var(--salvia); stroke-width: 1.4 }
.voz-tempo { font-size: .78rem; color: var(--texto-suave) }

/* ---------- avaliar ---------- */
.avaliar { margin-top: clamp(3rem,6vw,4.5rem); padding-top: clamp(3rem,6vw,4.5rem); border-top: 1px solid var(--linha); text-align: center }
.avaliar-ilustracao { width: 7rem; height: auto; margin: 0 auto 1.2rem; display: block }
.avaliar-cta { display: flex; justify-content: center; margin: 1.6rem 0 }

/* ---------- faq ---------- */
.faq { border-top: 1px solid var(--linha) }
.faq details { border-bottom: 1px solid var(--linha) }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 1.45rem 2.5rem 1.45rem 0; position: relative;
  font-size: 1.06rem; font-weight: 600; letter-spacing: -.015em; color: var(--musgo);
}
.faq summary::-webkit-details-marker { display: none }
.faq summary::after {
  content: ""; position: absolute; right: .4rem; top: 50%;
  width: 11px; height: 11px;
  border-right: 1.6px solid var(--folha); border-bottom: 1.6px solid var(--folha);
  transform: translateY(-70%) rotate(45deg); transition: transform .3s var(--curva);
}
.faq details[open] summary::after { transform: translateY(-20%) rotate(-135deg) }
.faq details p { margin: 0 0 1.6rem; color: var(--texto-suave); max-width: 64ch; padding-right: 2rem }

/* ---------- etiquetas e formação ---------- */
.etiquetas { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem }
.etiquetas li {
  padding: .5rem 1.05rem; border-radius: 99px;
  background: linear-gradient(135deg, var(--creme), var(--creme-alto));
  border: 1px solid var(--linha); box-shadow: 0 1px 4px rgba(20,47,29,.06);
  font-size: .78rem; font-weight: 600; letter-spacing: .02em; color: var(--folha);
}

.formacao { list-style: none; margin: 0; padding: 0 }
.formacao li { padding: .78rem 0; border-top: 1px solid var(--linha); color: var(--texto-suave); font-size: .98rem }
.formacao li:last-child { border-bottom: 1px solid var(--linha) }
.formacao li::before { content: "— "; color: var(--salvia); font-weight: 600 }

/* ---------- flutuante ---------- */
.flutuante {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 45;
  display: inline-flex; align-items: center; gap: .9rem;
  padding: .9rem 1.3rem .9rem 1.5rem; border-radius: 99px;
  background: var(--musgo); color: var(--areia);
  font-family: var(--display); font-size: 1.05rem; font-weight: 600;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(13,31,20,.3);
  transition: transform .25s var(--curva), background-color .25s;
}
.flutuante svg { color: #25D366; flex: none }
.flutuante:hover { transform: translateY(-3px); background: var(--folha) }
.flutuante-avatar {
  width: 2.4rem; height: 2.4rem; border-radius: 50%; flex: none;
  object-fit: cover; object-position: top center;
  border: 2px solid var(--areia); margin-left: .35rem;
}
@media (max-width:560px) {
  .flutuante {
    left: 50%; right: auto; bottom: 1rem; transform: translateX(-50%);
    width: min(calc(100% - 2rem), 29rem); min-height: 4.15rem;
    justify-content: center; padding: .7rem 1rem; gap: .75rem;
    background: #FFFFFF; color: #28312A; font-size: clamp(.9rem,4.4vw,1.1rem);
    box-shadow: 0 12px 34px rgba(0,0,0,.3);
  }
  .flutuante:hover { transform: translateX(-50%) translateY(-3px); background: #FFFFFF; color: var(--musgo) }
  .flutuante svg { width: 2.4rem; height: 2.4rem }
  .flutuante-avatar { display: none }
}

/* ---------- popup de captura ---------- */
.popup-captura { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 1.2rem }
.popup-captura[hidden] { display: none }
.popup-captura-fundo { position: absolute; inset: 0; background: rgba(13,31,20,.6); backdrop-filter: blur(2px) }
.popup-captura-caixa {
  position: relative; width: min(100%,26rem);
  background: var(--creme-alto); border: 1px solid var(--linha); border-radius: 20px;
  padding: 2rem 1.8rem 1.6rem; box-shadow: 0 30px 60px rgba(13,31,20,.4);
  animation: popup-captura-entrar .35s var(--curva);
}
.popup-captura-fechar {
  position: absolute; top: .7rem; right: .7rem;
  width: 2.2rem; height: 2.2rem; border-radius: 50%; border: none;
  background: transparent; color: var(--musgo); font-size: 1.5rem; line-height: 1;
  cursor: pointer; display: grid; place-items: center; transition: background-color .2s;
}
.popup-captura-fechar:hover { background: var(--linha) }
.popup-captura-caixa .apoio { margin-bottom: 1.6rem }
.popup-captura-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .6rem }
@media (max-width:300px) { .popup-captura-linha { grid-template-columns: 1fr } }
.popup-captura-campo { display: grid; gap: .4rem; margin-bottom: 1rem; min-width: 0 }
.popup-captura-campo label { font-size: .9rem; font-weight: 600; color: var(--musgo) }
.popup-captura-campo input {
  font: inherit; font-size: .92rem; color: var(--musgo);
  padding: .65rem .7rem; border-radius: 10px;
  border: 1px solid var(--linha); background: var(--creme); width: 100%; min-width: 0;
}
.popup-captura-campo input:focus { outline: 2px solid var(--salvia); outline-offset: 1px }
.popup-captura-honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden }
.popup-captura-enviar { width: 100%; justify-content: center; margin-top: .2rem }
.popup-captura-status { min-height: 1.2em; margin: .7rem 0 0; font-size: .9rem; text-align: center }
.popup-captura-status[data-tipo="erro"] { color: #B3261E }
.popup-captura-status[data-tipo="ok"]  { color: var(--folha) }
@media (max-width:480px) { .popup-captura-caixa { padding: 1.6rem 1.3rem 1.3rem } }

/* ---------- modal temas ---------- */
.temas-area { display: flex; justify-content: center; padding: 2rem 0 0 }
.temas-modal {
  padding: 2rem 1.8rem 1.6rem; border: 1px solid var(--linha); border-radius: 20px;
  background: var(--creme-alto); box-shadow: 0 30px 60px rgba(13,31,20,.4);
  width: min(90vw, 40rem); max-height: 86vh; overflow-y: auto;
  color: var(--texto-suave); font-family: var(--corpo);
  animation: popup-captura-entrar .35s var(--curva);
}
.temas-modal::backdrop { background: rgba(13,31,20,.6) }
.temas-titulo { font-family: var(--display); color: var(--musgo); font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; margin: 0 .6rem .4rem 0 }
.temas-subtitulo { color: var(--texto-suave); max-width: 60ch; margin: 0 0 1.8rem }
.temas-grupo { margin-bottom: 1.6rem }
.temas-grupo:last-of-type { margin-bottom: 0 }
.temas-grupo h3 { font-family: var(--display); color: var(--musgo); font-size: .95rem; font-weight: 700; letter-spacing: -.01em; margin: 0 0 .7rem }
.temas-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem }
.temas-lista li { padding: .5rem 1.05rem; border-radius: 99px; border: 1px solid var(--linha); background: var(--creme); font-size: .78rem; font-weight: 600; letter-spacing: .02em; color: var(--folha) }
.temas-rodape { margin: 1.8rem 0 0; padding-top: 1.4rem; border-top: 1px solid var(--linha); font-size: .85rem; font-weight: 600; color: var(--musgo) }
@media (max-width:480px) { .temas-modal { padding: 1.6rem 1.3rem 1.3rem } .temas-titulo { font-size: 1.3rem } }

/* ---------- banner de cookies (LGPD) ---------- */
.banner-cookies {
  position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%);
  width: min(calc(100% - 2rem), 680px);
  background: var(--creme-alto); border: 1px solid var(--linha); border-radius: 14px;
  padding: 1.1rem 1.4rem; box-shadow: 0 12px 36px rgba(13,31,20,.22);
  z-index: 999; animation: popup-captura-entrar .35s var(--curva);
}
.banner-cookies[hidden] { display: none !important; }
.banner-cookies-conteudo {
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap;
}
.banner-cookies-texto {
  margin: 0; font-size: .88rem; color: var(--texto-suave); line-height: 1.5; flex: 1 1 280px;
}
.banner-cookies-acoes {
  display: flex; align-items: center; gap: .6rem; flex: 0 0 auto;
}
.banner-cookies-acoes .botao {
  padding: .55rem 1.1rem; font-size: .8rem;
}
@media (max-width: 540px) {
  .banner-cookies { bottom: .75rem; width: calc(100% - 1.2rem); padding: 1rem 1.1rem; }
  .banner-cookies-acoes { width: 100%; justify-content: flex-end; }
  .banner-cookies-acoes .botao { flex: 1; }
}