/* ==========================================================================
   Laboro | Consultoria de Obra
   Complementa css/style.css e css/blog.css. Mesmos tokens da identidade.
   ========================================================================== */

/* O topo é fixo: âncoras e o resultado do teste param abaixo dele */
html { scroll-padding-top: calc(var(--topo-h) + 16px); }

/* --------------------------------------------------------------- capa */

.dir-capa-acoes { margin-top: 34px; margin-bottom: 0; flex-wrap: wrap; }

/* Botão do teste: ícone de checklist e seta deixam claro que ele abre algo */
.btn-teste { gap: 10px; border-color: rgba(255,255,255,.7); }
.btn-teste svg { width: 18px; height: 18px; flex: none; }
.btn-teste .btn-seta { transition: transform .2s ease; }
.btn-teste:hover .btn-seta { transform: translateX(4px); }

/* --------------------------------------------------------------- abertura */

.dir-abertura-in {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.dir-abertura-destaque {
  font-size: clamp(1.6rem, 3.2vw, 2.35rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.018em;
  color: var(--verde);
}
.dir-abertura-texto p { font-size: 1.06rem; color: var(--texto-suave); }
.dir-abertura-texto p + p { margin-top: 18px; }

/* --------------------------------------------------------------- método */

/* O documento pede o método em destaque: faixa verde cheia, números grandes */
.dir-metodo {
  background: var(--verde);
  color: #fff;
  padding-block: clamp(72px, 9vw, 112px);
}
.dir-metodo .secao-topo h2 { color: #fff; }

.dir-passos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  counter-reset: none;
}
.dir-passos li {
  border-top: 2px solid rgba(255, 255, 255, .5);
  padding-top: 28px;
}
.dir-passo-num {
  display: block;
  font-size: 3.4rem;
  font-weight: 800;
  line-height: 1;
  color: rgba(255, 255, 255, .22);
  margin-bottom: 18px;
}
.dir-passos h3 { font-size: 1.6rem; margin-bottom: 12px; }
.dir-passos p { font-size: 15.5px; color: rgba(255, 255, 255, .82); max-width: 320px; }

/* --------------------------------------------------------------- entrega */

.dir-entrega {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 64px;
  align-items: center;
}
.dir-entrega h2 { font-size: clamp(1.85rem, 3.6vw, 2.7rem); margin-bottom: 20px; }
.dir-entrega-sub { color: var(--texto-suave); font-size: 1.04rem; margin-bottom: 28px; max-width: 520px; }

.dir-lista { list-style: none; margin: 0 0 28px; padding: 0; }
.dir-lista li {
  position: relative;
  padding: 15px 0 15px 32px;
  border-bottom: 1px solid var(--verde-linha);
  font-weight: 600;
}
.dir-lista li:first-child { border-top: 1px solid var(--verde-linha); }
.dir-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 18px;
  height: 2px;
  background: var(--verde);
}
.dir-formato { font-size: 15px; color: var(--texto-suave); }
.dir-formato strong { color: var(--verde); }

/* Folha do Mapa desenhada em CSS: mostra que existe um documento sem
   depender de imagem de banco. */
.dir-mapa { margin: 0; display: flex; justify-content: center; }
.dir-mapa-folha {
  width: 100%;
  max-width: 380px;
  aspect-ratio: 210 / 297;
  background: var(--branco);
  border: 1px solid var(--verde-linha);
  border-top: 4px solid var(--verde);
  border-radius: var(--raio);
  box-shadow: 0 24px 56px rgba(5, 61, 36, .1);
  padding: 30px 30px 26px;
  transform: rotate(-1.5deg);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.dir-mapa-logo { width: 96px; height: auto; }
.dir-mapa-titulo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .21em;
  text-transform: uppercase;
  color: var(--verde);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--verde-linha);
}
.dir-mapa-bloco span {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--verde);
  margin-bottom: 8px;
}
.dir-mapa-bloco i {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--card);
  margin-bottom: 6px;
}
.dir-mapa-bloco i.curto { width: 62%; }
.dir-mapa-bloco ol { list-style: none; margin: 0; padding: 0; counter-reset: p; }
.dir-mapa-bloco ol li {
  counter-increment: p;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 6px;
}
.dir-mapa-bloco ol li::before {
  content: counter(p);
  flex: none;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--verde);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.dir-mapa-bloco ol li::after {
  content: "";
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--card);
}

/* --------------------------------------------------------------- frase */

.dir-frase { background: var(--verde-esc); }

/* --------------------------------------------------------------- diferenciais */

.dir-cards { grid-template-columns: repeat(4, 1fr); }

/* --------------------------------------------------------------- teste */

/* Na página fica só o convite. As perguntas abrem no popup. */
.dir-convite {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px 56px;
  align-items: center;
  background: var(--branco);
  border: 1px solid var(--verde-linha);
  border-top: 4px solid var(--verde);
  border-radius: var(--raio);
  padding: clamp(30px, 4.5vw, 56px);
}
.dir-convite h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-bottom: 16px; }
.dir-convite-texto { color: var(--texto-suave); max-width: 560px; }
.dir-convite-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 22px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--verde);
}
.dir-convite-meta span { display: inline-flex; align-items: center; gap: 10px; }
.dir-convite-meta span + span::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--verde);
  opacity: .5;
}

/* popup */

body:has(.dir-modal[open]) { overflow: hidden; }

.dir-modal {
  width: min(620px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  padding: 0;
  border: 0;
  border-top: 4px solid var(--verde);
  border-radius: var(--raio);
  background: var(--off);
  color: var(--texto);
  box-shadow: 0 30px 80px rgba(3, 40, 24, .35);
}
.dir-modal::backdrop {
  background: rgba(3, 40, 24, .62);
  backdrop-filter: blur(3px);
}
.dir-modal[open] { animation: dir-surge .32s cubic-bezier(.22, .61, .36, 1); }
@keyframes dir-surge {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.dir-modal-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 18px 14px 32px;
}
.dir-modal-rotulo {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--verde);
}
.dir-modal-fechar {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--verde);
  cursor: pointer;
  transition: background var(--t);
}
.dir-modal-fechar:hover { background: var(--card); }
.dir-modal-fechar svg { width: 22px; height: 22px; fill: none; }

.dir-modal-progresso { height: 3px; background: var(--verde-linha); }
.dir-modal-progresso span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--verde);
  transition: width .35s cubic-bezier(.22, .61, .36, 1);
}

.dir-etapa { padding: 34px 32px 30px; }
.dir-etapa.entra { animation: dir-entra .3s ease-out; }
@keyframes dir-entra {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: none; }
}
.dir-etapa-contagem {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  color: rgba(5, 61, 36, .5);
  margin-bottom: 10px;
}
.dir-etapa-pergunta {
  font-size: clamp(1.35rem, 3vw, 1.7rem);
  line-height: 1.2;
  margin-bottom: 24px;
}
.dir-etapa-pergunta:focus { outline: none; }

.dir-opcoes { display: flex; flex-direction: column; gap: 10px; }
.dir-opcao {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  background: var(--branco);
  border: 1px solid var(--verde-linha);
  border-radius: var(--raio);
  padding: 17px 20px;
  font-family: var(--fonte);
  font-size: 15.5px;
  color: var(--texto);
  cursor: pointer;
  transition: border-color var(--t), background var(--t), transform var(--t);
}
.dir-opcao::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--verde-linha);
  transition: border-color var(--t), box-shadow var(--t);
}
.dir-opcao:hover { border-color: var(--verde); transform: translateX(3px); }
.dir-opcao:hover::before { border-color: var(--verde); }
.dir-opcao[aria-pressed="true"] {
  border-color: var(--verde);
  background: rgba(5, 61, 36, .05);
  font-weight: 600;
}
.dir-opcao[aria-pressed="true"]::before {
  border-color: var(--verde);
  box-shadow: inset 0 0 0 4px var(--branco), inset 0 0 0 10px var(--verde);
}

.dir-voltar {
  margin-top: 20px;
  background: none;
  border: 0;
  padding: 8px 0;
  font-family: var(--fonte);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto-suave);
  cursor: pointer;
}
.dir-voltar::before { content: "\2190"; margin-right: 8px; }
.dir-voltar:hover { color: var(--verde); }
.dir-voltar[hidden] { display: none; }

/* etapa de contato */

.dir-contato { padding: 34px 32px 30px; }
.dir-contato.entra { animation: dir-entra .3s ease-out; }
.dir-contato-sub { color: var(--texto-suave); font-size: 15.5px; margin: -10px 0 24px; }

.dir-campo { display: block; margin-bottom: 16px; }
.dir-campo span {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--verde);
  margin-bottom: 7px;
}
.dir-campo input {
  width: 100%;
  font-family: var(--fonte);
  font-size: 16px; /* 16px evita o zoom automático do iPhone ao tocar no campo */
  color: var(--texto);
  background: var(--branco);
  border: 1px solid var(--verde-linha);
  border-radius: var(--raio);
  padding: 14px 16px;
  transition: border-color var(--t);
}
.dir-campo input:hover { border-color: rgba(5, 61, 36, .4); }
.dir-campo input:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px rgba(5, 61, 36, .12); }

/* A isca fica fora da tela, e não com display:none, que alguns robôs ignoram */
.dir-isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.dir-consentimento {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 6px 0 22px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--texto-suave);
  cursor: pointer;
}
.dir-consentimento input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--verde);
}
.dir-consentimento a { color: var(--verde); font-weight: 600; text-underline-offset: 3px; }

.dir-contato-erro {
  color: #8A1C1C;
  background: #FBECEA;
  border-radius: var(--raio);
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 16px;
}
.dir-contato-enviar { width: 100%; }
.dir-contato-enviar:disabled { opacity: .6; cursor: wait; transform: none; }
.dir-contato .dir-voltar { display: block; }

.dir-recebido {
  background: rgba(5, 61, 36, .06);
  border-left: 3px solid var(--verde);
  border-radius: var(--raio);
  padding: 14px 16px;
  margin: -6px 0 22px;
  font-size: 14.5px;
  color: var(--texto) !important;
}

.dir-resultado { padding: 32px 32px 30px; }
.dir-resultado h2 {
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  color: var(--verde);
  margin-bottom: 14px;
}
.dir-resultado h2:focus { outline: none; }
.dir-resultado > p:not(.rotulo) { color: var(--texto-suave); font-size: 15.5px; }
.dir-resultado-colunas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 24px;
  margin: 26px 0 28px;
}
.dir-resultado-rotulo {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--verde);
  margin-bottom: 10px;
}
.dir-resultado ul { list-style: none; margin: 0; padding: 0; }
.dir-resultado ul li {
  position: relative;
  padding: 7px 0 7px 24px;
  font-size: 15px;
  border-bottom: 1px solid var(--verde-linha);
}
.dir-resultado ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(7px + .78em);
  width: 12px;
  height: 2px;
  background: var(--verde);
}
.dir-resultado-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; }
.dir-refazer {
  background: none;
  border: 0;
  padding: 8px 0;
  font-family: var(--fonte);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--verde);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* --------------------------------------------------------------- faq */

.dir-faq-wrap { max-width: 820px; }

/* --------------------------------------------------------------- preço */

.dir-preco {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 26px;
  padding: 22px 24px;
  background: var(--card);
  border-left: 3px solid var(--verde);
  border-radius: var(--raio);
  max-width: 560px;
}
.dir-preco p { margin: 0; }
.dir-preco-rotulo {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--verde);
}
.dir-preco-valor { font-size: 2rem; font-weight: 800; color: var(--texto); line-height: 1.2; }
.dir-preco-texto { font-size: 15px; line-height: 1.65; color: var(--texto); margin-top: 6px !important; }
.dir-preco-nota { font-size: 13.5px; font-weight: 600; color: var(--verde); margin-top: 8px !important; }

.contato-acoes .btn-contorno { margin-top: 10px; }

.contato-nota a { color: var(--verde); font-weight: 600; }

/* --------------------------------------------------------------- responsivo */

@media (max-width: 1060px) {
  .dir-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .dir-convite { grid-template-columns: 1fr; }
  .dir-abertura-in,
  .dir-entrega { grid-template-columns: 1fr; gap: 40px; }
  .dir-passos { grid-template-columns: 1fr; gap: 34px; }
  .dir-mapa-folha { max-width: 320px; }
}

@media (max-width: 700px) {
  .dir-metodo { padding-block: 54px; }
  .dir-cards { grid-template-columns: 1fr; }
  .dir-capa-acoes .btn { width: 100%; }
  .dir-convite { grid-template-columns: 1fr; }
  .dir-convite .btn { width: 100%; }

  /* No celular o popup vira folha que sobe do rodapé da tela */
  .dir-modal {
    width: 100vw;
    max-width: 100vw;
    max-height: 92dvh;
    margin: auto 0 0;
    border-radius: 12px 12px 0 0;
  }
  .dir-modal-topo { padding-left: 20px; padding-right: 10px; }
  .dir-etapa, .dir-resultado, .dir-contato { padding: 26px 20px 26px; }
  .dir-resultado-colunas { grid-template-columns: 1fr; gap: 18px; }
  .dir-resultado-acoes .btn { width: 100%; }
}