/* ==========================================================================
   Componentes
   ========================================================================== */

/* --------------------------------------------------------------------------
   Botões — AN-07
   O verde da marca é claro demais para carregar texto branco (1.98:1),
   então o botão primário usa texto quase preto: 9.6:1.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-2);
  min-height: 44px; /* alvo de toque WCAG 2.5.5 */
  padding: var(--espaco-3) var(--espaco-5);
  border-radius: var(--raio);
  font-size: var(--fs-body);
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  transition:
    transform var(--t-rapida) var(--easing-entrada),
    background-color var(--t-rapida) var(--easing-entrada),
    border-color var(--t-rapida) var(--easing-entrada),
    color var(--t-rapida) var(--easing-entrada),
    box-shadow var(--t-rapida) var(--easing-entrada);
}

.btn:hover {
  transform: scale(1.02);
}

.btn:active {
  transform: scale(0.98);
}

.btn--primario {
  background-color: var(--verde);
  color: var(--tinta);
  box-shadow: 0 2px 8px rgb(64 212 0 / 0.32);
}

.btn--primario:hover {
  background-color: var(--verde-brilho);
  box-shadow: 0 6px 18px rgb(64 212 0 / 0.42);
}

.btn--secundario {
  background-color: transparent;
  color: var(--tinta);
  border: 1.5px solid var(--linha-forte);
}

.btn--secundario:hover {
  border-color: var(--verde-escuro);
  color: var(--verde-mais-escuro);
  background-color: var(--verde-suave);
}

.btn--fantasma {
  padding-inline: var(--espaco-3);
  color: var(--tinta-media);
  font-weight: 600;
}

.btn--fantasma:hover {
  color: var(--verde-mais-escuro);
}

.btn--bloco {
  width: 100%;
  /* Botão de largura total já ocupa a linha inteira: o nowrap herdado de .btn
     só serviria para impedir que ele encolha, forçando a coluna do grid a
     ficar maior que a tela em 320px. */
  white-space: normal;
  min-width: 0;
}

.btn--grande {
  padding: var(--espaco-4) clamp(var(--espaco-4), 3vw, var(--espaco-6));
  font-size: var(--fs-grande);
}

.secao--escura .btn--secundario {
  color: #fff;
  border-color: rgb(255 255 255 / 0.28);
}

.secao--escura .btn--secundario:hover {
  background-color: rgb(255 255 255 / 0.08);
  border-color: var(--verde);
  color: var(--verde);
}

/* --------------------------------------------------------------------------
   Link de navegação — AN-15 (sublinhado cresce da esquerda)
   -------------------------------------------------------------------------- */

.link-nav {
  position: relative;
  padding-block: var(--espaco-2);
  font-weight: 600;
  color: var(--tinta-media);
  transition: color var(--t-rapida) var(--easing-entrada);
}

.link-nav::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: var(--verde);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-media) var(--easing-entrada);
}

.link-nav:hover,
.link-nav:focus-visible {
  color: var(--tinta);
}

.link-nav:hover::after,
.link-nav:focus-visible::after {
  transform: scaleX(1);
}

.link-sublinhado {
  color: var(--verde-mais-escuro);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color var(--t-rapida) var(--easing-entrada);
}

.link-sublinhado:hover {
  color: var(--verde-escuro);
}

.footer a:not(.btn) {
  transition: color var(--t-rapida) var(--easing-entrada);
}

.footer a:not(.btn):hover {
  color: var(--verde);
}

/* --------------------------------------------------------------------------
   Contador — AN-05
   -------------------------------------------------------------------------- */

.numero__valor {
  display: block;
  font-size: clamp(2.25rem, 4vw + 1rem, 3.25rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--verde-escuro);
  /* Evita o texto "pular" de largura enquanto os dígitos mudam. */
  font-variant-numeric: tabular-nums;
}

.numero__rotulo {
  display: block;
  margin-top: var(--espaco-2);
  font-size: var(--fs-pequeno);
  color: var(--tinta-media);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card {
  padding: var(--espaco-5);
  border: 1px solid var(--linha);
  border-radius: var(--raio-grande);
  background-color: var(--fundo);
  box-shadow: var(--sombra-card);
  transition:
    transform var(--t-media) var(--easing-entrada),
    box-shadow var(--t-media) var(--easing-entrada),
    border-color var(--t-media) var(--easing-entrada);
}

/* AN-06 */
.card--interativo:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-card-hover);
  border-color: var(--verde);
}

.card__titulo {
  margin-bottom: var(--espaco-3);
}

.card__texto {
  color: var(--tinta-media);
  font-size: var(--fs-pequeno);
}

/* Card de dor — citação */
.card-dor {
  padding: var(--espaco-6) var(--espaco-5);
  border-left: 3px solid var(--verde);
  border-radius: var(--raio);
  background-color: var(--fundo);
  box-shadow: var(--sombra-card);
}

.card-dor__aspas {
  display: block;
  font-family: var(--fonte-serifada);
  font-size: 3rem;
  line-height: 0.6;
  color: var(--verde);
  margin-bottom: var(--espaco-3);
}

.card-dor__texto {
  font-size: var(--fs-grande);
  font-style: italic;
  color: var(--tinta);
}

/* Card de módulo */
.card-modulo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-3);
  padding: var(--espaco-5);
  border: 1px solid var(--linha);
  border-radius: var(--raio-grande);
  background-color: var(--fundo);
  transition:
    transform var(--t-media) var(--easing-entrada),
    box-shadow var(--t-media) var(--easing-entrada),
    border-color var(--t-media) var(--easing-entrada);
}

.card-modulo:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-card-hover);
  border-color: var(--verde);
}

.card-modulo__icone {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--raio);
  background-color: var(--verde-suave);
  color: var(--verde-mais-escuro);
  flex-shrink: 0;
}

.card-modulo__icone svg {
  width: 1.375rem;
  height: 1.375rem;
}

.card-modulo__titulo {
  font-size: var(--fs-body);
  font-weight: 700;
}

.card-modulo__texto {
  font-size: var(--fs-pequeno);
  color: var(--tinta-media);
}

/* Item com marcador de check */
.lista-check--afastada {
  margin-top: var(--espaco-5);
}

.lista-check--afastada-md {
  margin-top: var(--espaco-6);
}

.bloco__titulo {
  margin-bottom: var(--espaco-4);
}

.modulos__rodape {
  margin-top: var(--espaco-6);
  text-align: center;
}

.prosa__data {
  margin-top: var(--espaco-4);
}

.lista-check {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-3);
  list-style: none;
}

.lista-check li {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-3);
}

.lista-check li > span {
  min-width: 0;
}

.lista-check svg {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
  color: var(--verde-escuro);
}

.secao--escura .lista-check svg {
  color: var(--verde);
}

/* --------------------------------------------------------------------------
   Figura / screenshot — AN-16
   -------------------------------------------------------------------------- */

.figura {
  border: 1px solid var(--linha);
  border-radius: var(--raio-grande);
  overflow: hidden;
  background-color: var(--fundo);
  box-shadow: var(--sombra-card-hover);
}

.figura img,
.figura svg {
  width: 100%;
  height: auto;
}

.figura__legenda {
  padding: var(--espaco-3) var(--espaco-4);
  border-top: 1px solid var(--linha);
  background-color: var(--fundo-suave);
  font-size: var(--fs-mini);
  color: var(--tinta-fraca);
}

/* --------------------------------------------------------------------------
   Acordeão — AN-08
   O truque do grid-template-rows 0fr → 1fr anima altura variável
   sem precisar medir nada em JS e sem animar `height` (que causaria reflow).
   -------------------------------------------------------------------------- */

.acordeao {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-3);
}

.acordeao__item {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background-color: var(--fundo);
  overflow: hidden;
  transition: border-color var(--t-media) var(--easing-entrada);
}

.acordeao__item:has(.acordeao__gatilho[aria-expanded='true']) {
  border-color: var(--verde);
}

.acordeao__gatilho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-4);
  width: 100%;
  min-height: 44px;
  padding: var(--espaco-4) var(--espaco-5);
  text-align: left;
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--tinta);
  transition: background-color var(--t-rapida) var(--easing-entrada);
}

.acordeao__gatilho:hover {
  background-color: var(--fundo-suave);
}

.acordeao__icone {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--verde-escuro);
  transition: transform var(--t-media) var(--easing-entrada);
}

.acordeao__gatilho[aria-expanded='true'] .acordeao__icone {
  transform: rotate(180deg);
}

.acordeao__painel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-media) var(--easing-entrada);
}

.acordeao__painel.is-aberto {
  grid-template-rows: 1fr;
}

.acordeao__interno {
  overflow: hidden;
}

.acordeao__texto {
  padding: 0 var(--espaco-5) var(--espaco-5);
  color: var(--tinta-media);
}

/* --------------------------------------------------------------------------
   Formulário
   -------------------------------------------------------------------------- */

.form {
  padding: clamp(var(--espaco-4), 4vw, var(--espaco-6));
  border: 1px solid var(--linha);
  border-radius: var(--raio-grande);
  background-color: var(--fundo);
  box-shadow: var(--sombra-card);
}

.form__grade {
  display: grid;
  gap: var(--espaco-4);
}

.campo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  /* Sem isto, o <select> com a opção mais longa define a largura da coluna. */
  min-width: 0;
}

.campo--largo {
  grid-column: 1 / -1;
}

.campo__rotulo {
  font-size: var(--fs-pequeno);
  font-weight: 700;
  color: var(--tinta);
}

.campo__obrigatorio {
  color: var(--erro);
}

.campo__controle {
  width: 100%;
  min-height: 44px;
  padding: var(--espaco-3) var(--espaco-4);
  border: 1.5px solid var(--linha-forte);
  border-radius: var(--raio);
  background-color: var(--fundo);
  /* 16px é o mínimo: abaixo disso o iOS dá zoom automático ao focar. */
  font-size: 1rem;
  color: var(--tinta);
  transition:
    border-color var(--t-rapida) var(--easing-entrada),
    box-shadow var(--t-rapida) var(--easing-entrada);
}

.campo__controle::placeholder {
  color: var(--tinta-fraca);
}

.campo__controle:hover {
  border-color: var(--tinta-fraca);
}

.campo__controle:focus {
  outline: none;
  border-color: var(--verde-escuro);
  box-shadow: 0 0 0 3px var(--verde-vidro);
}

textarea.campo__controle {
  min-height: 7rem;
  resize: vertical;
}

select.campo__controle {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356635c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--espaco-4) center;
  background-size: 1.125rem;
  padding-right: var(--espaco-7);
  /* Trunca a opção mais longa em vez de esticar o campo. */
  text-overflow: ellipsis;
}

.campo.is-invalido .campo__controle {
  border-color: var(--erro);
  background-color: var(--erro-suave);
}

.campo.is-invalido .campo__controle:focus {
  box-shadow: 0 0 0 3px rgb(198 40 40 / 0.15);
}

.campo__erro {
  display: none;
  font-size: var(--fs-mini);
  font-weight: 600;
  color: var(--erro);
}

.campo.is-invalido .campo__erro {
  display: block;
}

/* Consentimento */
.campo-check {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-3);
  grid-column: 1 / -1;
}

.campo-check input {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
  accent-color: var(--verde-escuro);
  cursor: pointer;
}

.campo-check label {
  font-size: var(--fs-pequeno);
  color: var(--tinta-media);
  cursor: pointer;
}

.campo-check.is-invalido label {
  color: var(--erro);
}

/* Honeypot — invisível para humanos, preenchido por bot.
   Não usar display:none: alguns bots ignoram campos ocultos assim. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Botão de envio e seus estados — AN-12 */
.form__envio {
  position: relative;
  overflow: hidden;
}

.form__envio[data-estado='carregando'] {
  pointer-events: none;
  opacity: 0.85;
}

.form__envio[data-estado='carregando'] .form__envio-texto {
  visibility: hidden;
}

.spinner {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
}

.form__envio[data-estado='carregando'] .spinner {
  display: grid;
}

.spinner::after {
  content: '';
  width: 1.25rem;
  height: 1.25rem;
  border: 2.5px solid rgb(20 32 26 / 0.25);
  border-top-color: var(--tinta);
  border-radius: 50%;
  animation: girar 700ms linear infinite;
}

/* Mensagem de sucesso */
.form__sucesso {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-4);
  padding: var(--espaco-7) var(--espaco-5);
  text-align: center;
}

.form__sucesso.is-visivel {
  display: flex;
}

.form__sucesso-icone {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background-color: var(--verde-suave);
  color: var(--verde-escuro);
}

.form__sucesso-icone svg {
  width: 2rem;
  height: 2rem;
}

.form__aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-3);
  margin-bottom: var(--espaco-5);
  padding: var(--espaco-3) var(--espaco-4);
  border-radius: var(--raio);
  background-color: var(--verde-suave);
  color: var(--verde-mais-escuro);
  font-size: var(--fs-pequeno);
}

.form__aviso-icone {
  flex-shrink: 0;
  margin-top: 2px;
}

.form__aviso button {
  margin-left: auto;
  font-size: var(--fs-mini);
  font-weight: 700;
  text-decoration: underline;
  color: inherit;
  flex-shrink: 0;
}

.form__nota {
  margin-top: var(--espaco-4);
  font-size: var(--fs-mini);
  color: var(--tinta-fraca);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Botões flutuantes — AN-14
   -------------------------------------------------------------------------- */

.flutuantes {
  position: fixed;
  right: var(--espaco-4);
  bottom: var(--espaco-4);
  z-index: var(--z-flutuante);
  display: flex;
  flex-direction: column-reverse;
  gap: var(--espaco-3);
}

.btn-flutuante {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  box-shadow: var(--sombra-flutuante);
  transition:
    transform var(--t-media) var(--easing-entrada),
    opacity var(--t-media) var(--easing-entrada),
    visibility var(--t-media) var(--easing-entrada),
    background-color var(--t-rapida) var(--easing-entrada);
}

.btn-flutuante svg {
  width: 1.625rem;
  height: 1.625rem;
}

.btn-flutuante--whatsapp {
  background-color: #25d366;
  color: #fff;
}

.btn-flutuante--whatsapp:hover {
  transform: scale(1.08);
  background-color: #1fb855;
}

.btn-flutuante--topo {
  background-color: var(--tinta);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.8);
}

.btn-flutuante--topo.is-visivel {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.btn-flutuante--topo:hover {
  transform: scale(1.08);
  background-color: var(--verde-mais-escuro);
}

/* --------------------------------------------------------------------------
   Página de conteúdo (política / termos)
   -------------------------------------------------------------------------- */

.pagina-conteudo {
  padding-top: calc(var(--altura-header) + var(--espaco-7));
  padding-bottom: var(--espaco-secao);
}

.prosa h2 {
  margin-top: var(--espaco-7);
  margin-bottom: var(--espaco-4);
  font-size: var(--fs-h3);
}

.prosa p,
.prosa ul {
  margin-bottom: var(--espaco-4);
  color: var(--tinta-media);
}

.prosa ul {
  padding-left: var(--espaco-5);
}

.prosa li {
  margin-bottom: var(--espaco-2);
}

.aviso-rascunho {
  padding: var(--espaco-4) var(--espaco-5);
  border: 1px solid var(--verde);
  border-radius: var(--raio);
  background-color: var(--verde-suave);
  color: var(--verde-mais-escuro);
  font-size: var(--fs-pequeno);
  margin-bottom: var(--espaco-6);
}