/* ==========================================================================
   INGITE — Componentes editoriais do blog
   Instalar UMA vez em: Aparência > Personalizar > CSS adicional
   ========================================================================== */

:root{
  --ing-orange:#ff7a1a;
  --ing-navy:#0d1b2a;
  --ing-navy-2:#16324f;
  --ing-line:#e3e8ee;
  --ing-line-dark:#2f5d86;
  --ing-muted:#5b6b7c;
  --ing-bg-soft:#f5f8fb;
  --ing-radius:10px;
  --ing-font:inherit;
}

/* --- ritmo de leitura -------------------------------------------------- */
.ing-post p{margin:0 0 1.15em;line-height:1.72}
.ing-post h2{margin:2.4em 0 .7em;line-height:1.25;letter-spacing:-.01em}
.ing-post h3{margin:1.9em 0 .5em;line-height:1.3}
.ing-post ul,.ing-post ol{margin:0 0 1.3em 1.15em;line-height:1.7}
.ing-post li{margin:0 0 .45em}
.ing-post a{color:#0b6bb5;text-decoration:underline;text-underline-offset:2px}

/* --- barra de meta ------------------------------------------------------ */
.ing-meta{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;
  font-size:.86rem;color:var(--ing-muted);border-bottom:1px solid var(--ing-line);
  padding-bottom:14px;margin-bottom:28px}
.ing-meta strong{color:var(--ing-navy);font-weight:600}
.ing-meta span::before{content:"·";margin-right:18px;color:#b9c4d0}
.ing-meta span:first-child::before{content:"";margin:0}

/* --- TL;DR -------------------------------------------------------------- */
.ing-tldr{background:var(--ing-bg-soft);border:1px solid var(--ing-line);
  border-left:4px solid var(--ing-orange);border-radius:var(--ing-radius);
  padding:22px 26px;margin:0 0 34px}
.ing-tldr h2,.ing-tldr h3{font-size:.78rem!important;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ing-orange);margin:0 0 10px!important}
.ing-tldr p{margin:0 0 .7em;font-size:1.04rem;line-height:1.65}
.ing-tldr p:last-child{margin-bottom:0}
.ing-tldr ul{margin:.6em 0 0 1.1em}

/* --- caixas de destaque ------------------------------------------------- */
.ing-box{border:1px solid var(--ing-line);border-radius:var(--ing-radius);
  padding:20px 24px;margin:28px 0;background:#fff}
.ing-box>.ing-box-label{display:inline-block;font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:9px}
.ing-box p:last-child{margin-bottom:0}
.ing-box--data{background:#f4f9ff;border-color:#cfe2f5}
.ing-box--data>.ing-box-label{color:#0b6bb5}
.ing-box--warn{background:#fff6ef;border-color:#ffd9bd}
.ing-box--warn>.ing-box-label{color:#c2510a}
.ing-box--tech{background:#0d1b2a;border-color:#0d1b2a;color:#d6e2ee}
.ing-box--tech>.ing-box-label{color:var(--ing-orange)}
.ing-box--tech a{color:#7fc4ff}
.ing-box--tech code{background:rgba(255,255,255,.09);color:#ffd0a8}

/* --- faixa de números --------------------------------------------------- */
.ing-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px;margin:30px 0}
.ing-stat{background:linear-gradient(160deg,var(--ing-navy-2),var(--ing-navy));
  border-radius:var(--ing-radius);padding:22px 20px;color:#fff}
.ing-stat b{display:block;font-size:2.2rem;line-height:1;font-weight:800;
  color:var(--ing-orange);letter-spacing:-.02em;margin-bottom:9px}
.ing-stat span{display:block;font-size:.94rem;line-height:1.45;color:#c3d2e0}
.ing-stat em{display:block;font-style:normal;font-size:.74rem;color:#8ba1b6;margin-top:9px}

/* --- tabela técnica ----------------------------------------------------- */
.ing-table-wrap{overflow-x:auto;margin:28px 0}
table.ing-table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:520px}
table.ing-table caption{caption-side:top;text-align:left;font-size:.78rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ing-muted);padding-bottom:10px}
table.ing-table th,table.ing-table td{padding:12px 15px;border:1px solid var(--ing-line);
  vertical-align:top;text-align:left}
table.ing-table thead th{background:var(--ing-navy);color:#fff;font-weight:600;
  border-color:var(--ing-navy)}
table.ing-table tbody tr:nth-child(even){background:var(--ing-bg-soft)}
table.ing-table td:first-child{font-weight:600;color:var(--ing-navy)}

/* --- checklist ---------------------------------------------------------- */
ul.ing-check{list-style:none;margin:26px 0;padding:0}
ul.ing-check li{position:relative;padding:0 0 0 34px;margin:0 0 12px;line-height:1.6}
ul.ing-check li::before{content:"";position:absolute;left:0;top:.32em;width:18px;height:18px;
  border:2px solid var(--ing-orange);border-radius:4px}
ul.ing-check li::after{content:"";position:absolute;left:6px;top:.52em;width:5px;height:10px;
  border:solid var(--ing-orange);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* --- passo a passo ------------------------------------------------------ */
ol.ing-steps{list-style:none;counter-reset:ing;margin:28px 0;padding:0}
ol.ing-steps li{counter-increment:ing;position:relative;padding:0 0 0 52px;margin:0 0 20px}
ol.ing-steps li::before{content:counter(ing);position:absolute;left:0;top:-2px;
  width:34px;height:34px;border-radius:50%;background:var(--ing-navy);color:#fff;
  font-weight:700;font-size:.95rem;display:flex;align-items:center;justify-content:center}
ol.ing-steps li strong{display:block;color:var(--ing-navy);margin-bottom:4px}

/* --- cards de produto --------------------------------------------------- */
.ing-products{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;margin:28px 0}
.ing-product{border:1px solid var(--ing-line);border-top:3px solid var(--ing-orange);
  border-radius:var(--ing-radius);padding:20px;background:#fff}
.ing-product h4{margin:0 0 8px;font-size:1.02rem;line-height:1.3;color:var(--ing-navy)}
.ing-product p{font-size:.93rem;line-height:1.55;color:var(--ing-muted);margin:0 0 12px}
.ing-product a{font-size:.9rem;font-weight:600;text-decoration:none}
.ing-product a::after{content:" →"}

/* --- FAQ ---------------------------------------------------------------- */
.ing-faq{margin:30px 0;border-top:1px solid var(--ing-line)}
.ing-faq details{border-bottom:1px solid var(--ing-line)}
.ing-faq summary{cursor:pointer;list-style:none;padding:16px 30px 16px 0;position:relative;
  font-weight:600;color:var(--ing-navy);line-height:1.45}
.ing-faq summary::-webkit-details-marker{display:none}
.ing-faq summary::after{content:"+";position:absolute;right:4px;top:13px;
  font-size:1.5rem;font-weight:400;color:var(--ing-orange);line-height:1}
.ing-faq details[open] summary::after{content:"–"}
.ing-faq details>div{padding:0 0 18px;color:var(--ing-muted);line-height:1.7}

/* --- citação ------------------------------------------------------------ */
.ing-pull{border-left:3px solid var(--ing-orange);padding:6px 0 6px 22px;margin:32px 0;
  font-size:1.28rem;line-height:1.5;font-weight:600;color:var(--ing-navy)}

/* --- CTA final ---------------------------------------------------------- */
.ing-cta{background:linear-gradient(160deg,var(--ing-navy-2),var(--ing-navy));
  border-radius:var(--ing-radius);padding:32px 34px;margin:40px 0 0;color:#c3d2e0}
.ing-cta h3{color:#fff;margin:0 0 10px;font-size:1.34rem;line-height:1.32}
.ing-cta p{margin:0 0 20px;line-height:1.6}
.ing-cta a.ing-btn{display:inline-block;background:var(--ing-orange);color:#fff;
  font-weight:700;text-decoration:none;padding:13px 26px;border-radius:6px;font-size:.98rem}
.ing-cta a.ing-btn:hover{background:#ff8f3f}

/* --- fontes ------------------------------------------------------------- */
.ing-sources{margin:34px 0 0;padding-top:16px;border-top:1px solid var(--ing-line);
  font-size:.84rem;color:var(--ing-muted);line-height:1.6}
.ing-sources b{display:block;text-transform:uppercase;letter-spacing:.12em;
  font-size:.72rem;color:var(--ing-navy);margin-bottom:7px}

/* --- responsivo --------------------------------------------------------- */
@media (max-width:640px){
  .ing-tldr,.ing-box,.ing-cta{padding:18px 18px}
  .ing-stat b{font-size:1.9rem}
  .ing-pull{font-size:1.12rem}
}