/* ==========================================================
   Blog FD Projetos — layout global
   ----------------------------------------------------------
   ESTE É O ÚNICO LUGAR COM CSS. Nenhuma página deve ter
   <style> próprio: se precisar de um estilo novo, ele entra
   aqui e passa a valer para o blog inteiro.

   Paleta e fontes herdadas do site institucional
   (fdprojetosirriga.com), para o blog parecer a mesma empresa.
   ========================================================== */

:root{
  --agua:#0E7C9C;
  --agua-escura:#0A5A72;
  --agua-clara:#E4F3F7;
  --campo:#3E6B3F;
  --campo-claro:#E8F2E3;
  --sol:#E8A93A;
  --sol-escuro:#C77E1E;
  --terra:#C1502E;
  --solo:#241E15;
  --palha:#EEEAD9;
  --fundo:#FAFAF4;
  --branco:#FFFFFF;
  --linha:#D8D3C2;

  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --corpo:'Public Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  --raio:14px;
  --max:1140px;
  --sombra:0 2px 10px rgba(36,30,21,.05);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{font-family:var(--corpo);background:var(--fundo);color:var(--solo);line-height:1.7;font-size:17px}
img{max-width:100%;height:auto}
a{color:var(--agua-escura)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--agua);outline-offset:2px}
.container{width:min(92%,var(--max));margin:0 auto}

/* ---------- Cabeçalho ---------- */
header{background:rgba(250,250,244,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--linha);position:sticky;top:0;z-index:30}
.nav{min-height:72px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.marca{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:800;font-size:1.15rem;color:var(--solo);text-decoration:none;letter-spacing:-.02em}
.marca-simbolo{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--agua),var(--campo));color:#fff;display:grid;place-items:center;font-weight:800;font-size:.95rem;flex:none}
.menu{display:flex;gap:20px;flex-wrap:wrap;font-size:.92rem;font-weight:500}
.menu a{color:var(--solo);text-decoration:none}
.menu a:hover{color:var(--agua)}
.menu a[aria-current="page"]{color:var(--agua);font-weight:600}
.menu-btn{display:none;background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--solo)}

/* ---------- Topo do artigo ---------- */
.hero{padding:52px 0 32px;background:linear-gradient(160deg,var(--agua-clara),var(--fundo) 60%,var(--campo-claro))}
.trilha{font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:#6B6350;margin-bottom:14px}
.trilha a{color:var(--agua-escura);text-decoration:none}
.trilha a:hover{text-decoration:underline}
.etiqueta{display:inline-block;background:var(--campo-claro);color:var(--campo);padding:6px 14px;border-radius:999px;font-family:var(--mono);font-size:.72rem;font-weight:500;text-transform:uppercase;letter-spacing:.08em}
.hero h1{font-family:var(--display);font-weight:800;font-size:clamp(2rem,4.4vw,3.2rem);line-height:1.08;letter-spacing:-.03em;max-width:20ch;margin:16px 0}
.chamada{max-width:60ch;color:#4A4436;font-size:1.1rem}
.meta{margin-top:14px;font-family:var(--mono);font-size:.78rem;color:#6B6350;letter-spacing:.04em}

/* ---------- Layout de duas colunas ---------- */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:32px;padding:36px 0 64px;align-items:start}

article{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);box-shadow:var(--sombra);padding:38px}
article h2{font-family:var(--display);font-weight:700;font-size:1.5rem;line-height:1.2;letter-spacing:-.02em;margin:34px 0 12px;padding-bottom:8px;border-bottom:2px solid var(--linha)}
article h2:first-child{margin-top:0}
article h3{font-family:var(--display);font-weight:700;font-size:1.18rem;margin:26px 0 10px}
article p{margin-bottom:16px}
article ul,article ol{margin:0 0 18px 22px}
article li{margin-bottom:8px}
article li::marker{color:var(--sol-escuro)}
article strong{font-weight:600}

/* ---------- Caixas de apoio ---------- */
.formula{font-family:var(--mono);font-size:1rem;font-weight:500;background:var(--solo);color:#9FD7E8;border-radius:var(--raio);padding:18px 22px;margin:22px 0;overflow-x:auto;line-height:1.8}
.exemplo{background:var(--agua-clara);border:1px solid #BFE0EA;border-left:4px solid var(--agua);border-radius:var(--raio);padding:20px 24px;margin:22px 0}
.exemplo p{margin-bottom:8px}
.exemplo p:last-child{margin-bottom:0}
.dica{background:#FBEED9;border:1px solid #EBD3A4;border-left:4px solid var(--sol);border-radius:var(--raio);padding:18px 22px;margin:22px 0}
.atencao{background:#F6E1D9;border:1px solid #E7BFB0;border-left:4px solid var(--terra);border-radius:var(--raio);padding:18px 22px;margin:22px 0}

.numero{font-family:var(--mono);font-weight:500;white-space:nowrap;color:var(--agua-escura)}

.tabela-wrap{overflow-x:auto;margin:22px 0}
article table{border-collapse:collapse;width:100%;font-size:.94rem;min-width:420px}
article th{background:var(--agua);color:#fff;font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;text-align:left;padding:10px 13px}
article td{border-bottom:1px solid var(--linha);padding:10px 13px;vertical-align:top}
article tbody tr:nth-child(even){background:var(--fundo)}

/* ---------- Chamada para ação ---------- */
.cta{background:linear-gradient(135deg,var(--agua-escura),var(--campo));color:#fff;border-radius:18px;padding:28px 30px;margin-top:32px}
.cta h3{font-family:var(--display);font-weight:700;font-size:1.25rem;color:#fff;margin-bottom:8px}
.cta p{color:rgba(255,255,255,.88);margin-bottom:14px}
.btn{display:inline-block;background:var(--sol);color:var(--solo);font-weight:600;padding:12px 22px;border-radius:999px;text-decoration:none;transition:background .2s}
.btn:hover{background:var(--sol-escuro);color:#fff}
.btn-zap{background:#1FA855;color:#fff}
.btn-zap:hover{background:#178A45;color:#fff}

/* ---------- Barra lateral ---------- */
.caixa-lateral{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);box-shadow:var(--sombra);padding:24px;margin-bottom:18px}
.caixa-lateral h3{font-family:var(--display);font-weight:700;font-size:1.05rem;margin-bottom:12px}
.caixa-lateral a{display:block;padding:10px 0;border-bottom:1px solid var(--linha);font-size:.92rem;color:var(--solo);text-decoration:none}
.caixa-lateral a:last-child{border-bottom:none}
.caixa-lateral a:hover{color:var(--agua)}
.anuncio{min-height:250px;border:1px dashed var(--linha);background:var(--palha);border-radius:var(--raio);display:grid;place-items:center;text-align:center;color:#7B8A84;padding:20px;font-family:var(--mono);font-size:.76rem;line-height:1.6}

/* ---------- Esquema em etapas (fluxo, caminho, sequência) ---------- */
.esquema{background:linear-gradient(180deg,var(--campo-claro),var(--branco));border:1px solid var(--linha);border-radius:var(--raio);padding:24px;margin:26px 0}
.esquema h3{font-family:var(--display);font-weight:700;font-size:1.05rem;margin:0 0 16px}
.esquema-passos{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;text-align:center}
.esquema-passo{background:var(--branco);border:1px solid var(--linha);border-radius:10px;padding:16px 12px}
.esquema-passo b{display:block;font-family:var(--display);font-weight:700;font-size:.95rem;color:var(--agua-escura);margin-bottom:4px}
.esquema-passo span{font-size:.82rem;color:#6B6350;line-height:1.45}

/* ---------- Gráfico de fases (barras proporcionais) ----------
   A altura de cada barra vem de --h no HTML, porque é dado,
   não estilo. Ex.: <div class="barra" style="--h:42px"></div>   */
.grafico-fases{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;align-items:end;margin-top:8px}
.grafico-fases .fase{display:flex;flex-direction:column;justify-content:flex-end;text-align:center}
.grafico-fases .barra{height:var(--h,40px);border-radius:8px 8px 0 0;margin-bottom:10px;background:var(--campo-claro)}
.grafico-fases .fase:nth-child(1) .barra{background:#C9E3D5}
.grafico-fases .fase:nth-child(2) .barra{background:#8FCBAE}
.grafico-fases .fase:nth-child(3) .barra{background:var(--campo)}
.grafico-fases .fase:nth-child(4) .barra{background:var(--sol)}
.grafico-fases b{font-family:var(--display);font-weight:700;font-size:.92rem;display:block}
.grafico-fases span{font-family:var(--mono);font-size:.74rem;color:#6B6350}
.grafico-legenda{margin:16px 0 0;font-size:.86rem;color:#6B6350;font-style:italic}

/* ---------- Perfil do solo: entradas, reservatório e saídas ---------- */
.perfil{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,1.35fr) minmax(0,1fr);gap:16px;align-items:stretch;margin-top:6px}
.perfil-fluxo{display:flex;flex-direction:column;gap:12px;justify-content:center}
.fluxo-item{border-radius:10px;padding:14px 12px;text-align:center;border:1px solid}
.fluxo-item b{display:block;font-family:var(--display);font-weight:700;font-size:.98rem}
.fluxo-item span{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:#6B6350;margin-top:4px}
.fluxo-item.entrada{background:var(--agua-clara);border-color:#BFE0EA}
.fluxo-item.entrada b{color:var(--agua-escura)}
.fluxo-item.saida{background:#F6E1D9;border-color:#E7BFB0}
.fluxo-item.saida b{color:var(--terra)}
.fluxo-seta{text-align:center;font-family:var(--mono);font-size:1.5rem;font-weight:500}
.fluxo-seta.entrada{color:var(--agua)}
.fluxo-seta.saida{color:var(--terra)}

.perfil-corpo{border:1px solid var(--linha);border-radius:12px;overflow:hidden;background:var(--branco)}
.perfil-faixa{padding:12px 16px;text-align:center}
.perfil-faixa b{display:block;font-family:var(--display);font-weight:700;font-size:.9rem}
.perfil-faixa span{display:block;font-size:.76rem;margin-top:2px;color:#6B6350}
.perfil-faixa.cc{background:var(--campo-claro);border-bottom:2px dashed var(--campo)}
.perfil-faixa.cc b{color:var(--campo)}
.perfil-faixa.raw{background:#FBEED9;border-top:2px dashed var(--sol)}
.perfil-faixa.raw b{color:var(--sol-escuro)}
.perfil-faixa.pmp{background:#F6E1D9;border-top:2px dashed var(--terra)}
.perfil-faixa.pmp b{color:var(--terra)}

.perfil-terra{background:linear-gradient(180deg,#8C6B4A,#5E4630);color:#fff;padding:22px 18px;min-height:170px;text-align:center}
.perfil-terra b{display:block;font-family:var(--display);font-weight:700;font-size:1.02rem}
.perfil-terra .zona{font-size:.8rem;opacity:.9;margin-top:3px}
.perfil-taw{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);border-radius:10px;padding:12px;margin:18px auto 0;max-width:340px}
.perfil-taw b{font-size:.9rem}
.perfil-taw code{font-family:var(--mono);font-size:.82rem;background:none;border:none;color:#fff;padding:0}

.logica-diaria{background:var(--palha);border-radius:10px;padding:16px;text-align:center;margin-top:18px;font-size:.92rem;line-height:1.9}
.logica-diaria b{font-family:var(--display);display:block;margin-bottom:6px}
.logica-diaria .repor{color:var(--agua-escura);font-weight:600}
.logica-diaria .gastar{color:var(--terra);font-weight:600}
.logica-diaria .decidir{color:var(--campo);font-weight:600}

@media (max-width:760px){
  .perfil{grid-template-columns:1fr}
  .fluxo-seta{transform:rotate(90deg)}
}

/* ---------- Equação visual (A × B = C) ---------- */
.equacao{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:12px;align-items:center;text-align:center;background:var(--agua-clara);border:1px solid #BFE0EA;border-radius:var(--raio);padding:22px;margin:24px 0}
.equacao b{display:block;font-family:var(--display);font-weight:700;font-size:1.1rem;color:var(--agua-escura)}
.equacao span{font-size:.82rem;color:#4A4436}
.equacao .sinal{font-family:var(--mono);font-size:1.4rem;color:var(--agua)}
@media (max-width:620px){
  .equacao{grid-template-columns:1fr;gap:8px}
  .equacao .sinal{font-size:1.1rem}
  .grafico-fases{grid-template-columns:repeat(2,1fr);gap:12px}
}

/* ---------- Perguntas frequentes ---------- */
.faq{margin:26px 0}
.faq details{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);margin-bottom:10px;overflow:hidden}
.faq summary{cursor:pointer;padding:16px 20px;font-family:var(--display);font-weight:700;font-size:1rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;font-size:1.4rem;color:var(--agua);flex:none;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 20px 16px;margin:0;color:#4A4436;font-size:.96rem}

/* ---------- Formulários e calculadoras ---------- */
.campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin:24px 0}
.campo{display:flex;flex-direction:column;gap:6px}
.campo label{font-weight:600;font-size:.92rem}
.campo .ajuda{font-size:.8rem;color:#6B6350}
.campo input{font-family:var(--mono);font-size:1rem;padding:12px 14px;border:1.5px solid var(--linha);border-radius:10px;background:var(--branco);width:100%}
.campo input:focus{border-color:var(--agua)}
.acoes{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
button.btn{border:none;cursor:pointer;font-family:var(--corpo);font-size:1rem}
.btn-secundario{background:transparent;color:var(--solo);border:1.5px solid var(--linha)}
.btn-secundario:hover{background:var(--palha);color:var(--solo)}

.resultado{display:none;background:linear-gradient(135deg,var(--agua-escura),var(--campo));color:#fff;border-radius:18px;padding:28px 30px;margin-top:26px}
.resultado h3{font-family:var(--display);font-weight:700;font-size:1rem;color:rgba(255,255,255,.8);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}
.resultado .principal{font-family:var(--display);font-weight:800;font-size:clamp(2rem,5vw,2.8rem);letter-spacing:-.02em;line-height:1.1}
.resultado .detalhe{font-family:var(--mono);font-size:.9rem;color:rgba(255,255,255,.85);margin-top:8px}

/* ---------- Lista de artigos (home e categorias) ---------- */
.artigos{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.cartao{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);box-shadow:var(--sombra);padding:26px;display:flex;flex-direction:column;gap:10px;transition:transform .2s,box-shadow .2s}
.cartao:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(36,30,21,.09)}
.cartao h2,.cartao h3{font-family:var(--display);font-weight:700;font-size:1.15rem;line-height:1.25;border:none;padding:0;margin:0}
.cartao a{color:var(--solo);text-decoration:none}
.cartao a:hover{color:var(--agua)}
.cartao p{font-size:.95rem;color:#4A4436;flex:1;margin:0}
.cartao .meta{margin-top:6px;border-top:1px dashed var(--linha);padding-top:10px}

.secao{padding:48px 0}
.secao-titulo{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:-.02em;margin-bottom:10px}
.secao-sub{color:#5A5343;max-width:60ch;margin-bottom:32px}

/* ---------- Rodapé ---------- */
.rodape-links{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;font-size:.86rem}
.rodape-links a{color:#9FD7E8;text-decoration:none}
.rodape-links a:hover{text-decoration:underline}

/* Página institucional (sobre, contato, política) — coluna única, sem sidebar */
.pagina{max-width:760px;margin:0 auto;padding:40px 0 64px}
.pagina article{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);box-shadow:var(--sombra);padding:38px}
.pagina .atualizado{font-family:var(--mono);font-size:.78rem;color:#6B6350;margin-bottom:24px}
@media (max-width:900px){.pagina article{padding:26px 22px}}

footer{background:var(--solo);color:#C9C2AE;padding:40px 0;font-size:.9rem}
.rodape{display:grid;grid-template-columns:2fr 1fr;gap:24px;align-items:start}
footer strong{font-family:var(--display);font-size:1.1rem;color:#fff;display:block;margin-bottom:6px}
footer a{color:#9FD7E8}
.rodape-nota{font-size:.82rem;margin-top:10px;color:#8F887A}

/* ---------- Responsivo ---------- */
@media (max-width:900px){
  /* minmax(0,1fr) e nao 1fr: o piso do 1fr e o min-content, e a tabela tem
     min-width 420px. Com 1fr a coluna esticava ate 466px no celular e a
     pagina inteira rolava de lado, em vez de so a tabela rolar dentro do
     .tabela-wrap. Toda materia com tabela era afetada. */
  .layout{grid-template-columns:minmax(0,1fr)}
  .rodape{grid-template-columns:1fr}
  .menu{display:none;position:absolute;top:72px;left:0;right:0;background:var(--fundo);flex-direction:column;padding:18px 24px;border-bottom:1px solid var(--linha);gap:16px;align-items:flex-start}
  .menu.aberto{display:flex}
  .menu-btn{display:block}
  article{padding:26px 22px}
  .hero{padding:40px 0 26px}
}

@media print{
  header,.anuncio,.cta,aside,.menu-btn{display:none}
  body{background:#fff;font-size:12pt}
  article{border:none;box-shadow:none;padding:0}
}