/* ======================================================================
   Ferramentas novas, logo 3D e impressão em PDF
   ====================================================================== */

/* ---- Logo 3D ---- */
.hero-cromo::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: 4%; height: 28px; z-index: -1;
  background: radial-gradient(closest-side, var(--cromo-reflexo), transparent);
  filter: blur(6px); opacity: 0; transition: opacity 1s .4s;
}
.hero-cromo.tem-3d .cromo { display: none; }
.hero-cromo.tem-3d::after { opacity: .9; }
.cromo-3d { display: block; width: 100%; cursor: grab; touch-action: pan-y; }
.hero-cromo.arrastando .cromo-3d { cursor: grabbing; }

/* ---- Faixa de ferramentas ---- */
.ferramentas { max-width: var(--largura); margin: 0 auto; padding: clamp(64px, 8vw, 104px) var(--margem) 0; }
.ferramentas-titulo { font-family: var(--display); font-weight: 600; font-size: var(--t-md); letter-spacing: -.01em; margin-bottom: 18px; }
.ferramentas-lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ferramentas-lista a {
  display: flex; flex-direction: column; gap: 6px; height: 100%;
  padding: 20px 20px 22px; border-radius: 16px; text-decoration: none;
  border: 1px solid var(--linha); background: rgba(255, 255, 255, .02);
  transition: border-color .2s, background .2s;
}
.ferramentas-lista a:hover { border-color: var(--sinal); background: var(--campo); }
.ferramentas-lista strong { font-family: var(--display); font-weight: 600; font-size: 1.0625rem; line-height: 1.2; }
.ferramentas-lista span { color: var(--texto-2); font-size: .875rem; line-height: 1.4; }

/* ---- Ficha: ações ---- */
.ficha-acoes { display: grid; gap: 10px; }
.so-impressao { display: none; }

/* ---- Simulador de vazamento ---- */
.vaz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px; align-items: start; }
.vaz-form { display: grid; gap: 26px; padding: clamp(24px, 4vw, 44px); border: 1px solid var(--linha); border-radius: 22px; }
.campo-opcoes { border: 0; padding: 0; margin: 0; }
.campo-opcoes legend { padding: 0; margin-bottom: 10px; }
.segmentos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.segmentos label { position: relative; }
.segmentos input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmentos span {
  display: flex; align-items: center; justify-content: center; text-align: center; min-height: 46px; padding: 6px 8px;
  border: 1px solid var(--linha-forte); border-radius: 12px; font-size: .875rem; line-height: 1.2;
  transition: background .2s, border-color .2s, color .2s;
}
.segmentos input:checked + span { background: var(--sinal); border-color: var(--sinal); color: var(--sobre-sinal); font-weight: 600; }
.segmentos input:focus-visible + span { outline: 2px solid var(--sinal); outline-offset: 2px; }

.vaz-painel { position: sticky; top: 96px; padding: clamp(24px, 4vw, 40px); border-radius: 22px; background: var(--campo); border: 1px solid var(--linha); }
.vaz-funil { display: grid; gap: 14px; margin-bottom: 28px; }
.vaz-etapa { display: grid; grid-template-columns: 84px minmax(0, 1fr) 110px; align-items: center; gap: 14px; }
.vaz-nome { color: var(--texto-2); font-size: .875rem; }
.vaz-barras { position: relative; height: 30px; }
.vaz-barras i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; transition: width .5s var(--curva); }
.vaz-ideal { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--linha-forte) 6px 7px); border: 1px dashed var(--linha-forte); }
.vaz-hoje { background: var(--sinal); }
.vaz-num { font-family: var(--display); font-weight: 600; font-size: 1.125rem; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vaz-num small { display: block; font-family: var(--sans); font-weight: 500; font-size: .75rem; color: var(--sinal); }
.vaz-resumo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 22px 0; border-top: 1px solid var(--linha); }
.vaz-resumo span { display: block; color: var(--texto-2); font-size: .875rem; }
.vaz-resumo strong { font-family: var(--display); font-weight: 600; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vaz-resumo div + div strong { color: var(--sinal); }
.vaz-mesa { padding: 16px 18px; border-radius: 14px; background: rgba(255, 255, 255, .05); font-size: .9375rem; }
.vaz-mesa strong { font-family: var(--display); font-weight: 700; font-size: 1.25rem; color: var(--sinal); }
.vaz-causas { margin: 18px 0 6px; }
.vaz-causas li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--linha); font-size: .9375rem; }
.vaz-causas span { color: var(--texto-2); }
.vaz-causas strong { font-weight: 600; white-space: nowrap; }
.vaz-causas em { font-style: normal; color: var(--texto-2); opacity: .7; }

/* ---- Sazonalidade ---- */
.saz { padding: clamp(24px, 4vw, 44px); border: 1px solid var(--linha); border-radius: 22px; }
.saz-nichos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
.saz-nichos button { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--linha-forte); background: none; cursor: pointer; font-size: .9375rem; transition: background .2s, color .2s, border-color .2s; }
.saz-nichos button:hover { border-color: var(--sinal); }
.saz-nichos button[aria-checked="true"] { background: var(--sinal); border-color: var(--sinal); color: var(--sobre-sinal); font-weight: 600; }
.saz-grafico { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; height: 220px; }
.saz-mes { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; height: 100%; }
.saz-mes i { align-self: end; height: var(--altura, 50%); border-radius: 8px 8px 3px 3px; background: var(--campo-2); transition: height .6s var(--curva), background .3s; }
.saz-mes.pico i { background: var(--sinal); }
.saz-mes span { text-align: center; font-size: .8125rem; color: var(--texto-2); }
.saz-mes.pico span { color: var(--texto); font-weight: 600; }
.saz-leitura { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 24px 48px; margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--linha); align-items: start; }
.saz-pico span { display: block; color: var(--texto-2); font-size: .875rem; }
.saz-pico strong { font-family: var(--display); font-weight: 600; font-size: var(--t-md); }
.saz-dica { color: var(--texto-2); max-width: 36em; }
.saz .ficha-nota { margin-top: 20px; }

/* ---- Plano de 90 dias ---- */
.plano { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--linha); }
.plano-titulo { font-family: var(--display); font-weight: 600; font-size: var(--t-md); margin-bottom: 18px; }
.plano-fases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.plano-fases > li { padding: 20px; border-radius: 16px; border: 1px solid var(--linha); background: rgba(255, 255, 255, .02); }
.plano-fases > li > span { font-size: .8125rem; color: var(--texto-2); }
.plano-fases h4 { font-family: var(--display); font-weight: 700; font-size: 1.375rem; letter-spacing: -.02em; margin: 2px 0 12px; color: var(--sinal); }
.plano-fases ul { display: grid; gap: 8px; }
.plano-fases ul li { font-size: .875rem; line-height: 1.45; color: var(--texto-2); padding-left: 14px; position: relative; }
.plano-fases ul li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--linha-forte); }
.quiz-acoes { margin-top: 28px; }

/* ---- Responsivo das ferramentas ---- */
@media (max-width: 1100px) {
  .ferramentas-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .vaz { grid-template-columns: 1fr; }
  .vaz-painel { position: static; }
  .saz-leitura { grid-template-columns: 1fr 1fr; }
  .saz-dica { grid-column: 1 / -1; }
  .plano-fases { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .ferramentas-lista { grid-template-columns: 1fr; }
  .segmentos { grid-template-columns: 1fr 1fr; }
  .vaz-etapa { grid-template-columns: 70px minmax(0, 1fr) 76px; gap: 10px; }
  .vaz-resumo { grid-template-columns: 1fr; }
  .saz-grafico { gap: 4px; height: 160px; }
  .saz-mes span { font-size: .6875rem; }
}

/* ---- Baixar em PDF: imprime só o bloco escolhido ---- */
@media print {
  @page { margin: 14mm; }
  body[data-imprimindo] { background: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body[data-imprimindo] * { visibility: hidden; }
  body[data-imprimindo] .topo, body[data-imprimindo] .whats-fixo { display: none !important; }
  body[data-imprimindo="ficha"] .ficha, body[data-imprimindo="ficha"] .ficha *,
  body[data-imprimindo="plano"] .plano, body[data-imprimindo="plano"] .plano * { visibility: visible; }
  body[data-imprimindo="ficha"] .ficha, body[data-imprimindo="plano"] .plano {
    position: absolute; left: 0; top: 0; width: 100%; margin: 0;
  }
  body[data-imprimindo] .ficha-acoes, body[data-imprimindo] .quiz-acoes { display: none; }
  body[data-imprimindo] .so-impressao { display: block; margin-bottom: 18px; font-size: .8125rem; color: var(--texto-2); }
  body[data-imprimindo="plano"] .plano { padding: 24px; background: var(--fundo); border: 0; }
  body[data-imprimindo="plano"] .plano-fases { grid-template-columns: 1fr; }
}

/* foco programático (resultado do quiz) sem contorno */
[tabindex="-1"]:focus { outline: none; }
