/* ==========================================================
   ARTIGOS / BLOG — complementa style.css
   Carregue SEMPRE depois de style.css
   ========================================================== */

/* Header sólido (não há hero de vídeo atrás nas páginas de artigo) */
.site-header--article{
  background:var(--navy);
  backdrop-filter:none;
}

/* ---------- Hero do artigo ---------- */
.article-hero{
  position:relative;
  display:flex;
  align-items:flex-end;
  min-height:56vh;
  padding:150px 0 56px;
  color:var(--white);
  overflow:hidden;
}
.article-hero-media{position:absolute;inset:0;z-index:0;}
.article-hero-media img{width:100%;height:100%;object-fit:cover;}
.article-hero-media::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(31,49,69,0.65) 0%, rgba(31,49,69,0.55) 45%, rgba(24,37,51,0.92) 100%);
}
.article-hero .container{position:relative;z-index:1;max-width:820px;}
.article-hero h1{
  color:var(--white);
  font-size:clamp(1.9rem, 4vw, 3rem);
  font-weight:700;
  margin-bottom:.4em;
}
.article-lead{
  color:rgba(255,255,255,0.88);
  font-size:1.05rem;
  max-width:660px;
  margin:0 0 24px;
}

.breadcrumb{
  font-size:.82rem;
  color:rgba(255,255,255,0.7);
  margin-bottom:18px;
}
.breadcrumb a:hover{color:var(--white);}
.breadcrumb span{margin:0 8px;opacity:.5;}

.article-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px 20px;
  font-size:.82rem;
  color:rgba(255,255,255,0.75);
}
.article-meta strong{color:var(--white);font-weight:700;}

/* ---------- Corpo do artigo ---------- */
.article-body{padding:72px 0 90px;}
.article-body .container{max-width:820px;}
.article-body h2{
  font-size:clamp(1.4rem, 2.4vw, 1.9rem);
  margin-top:2em;
  scroll-margin-top:100px;
}
.article-body h3{
  font-size:1.1rem;
  margin-top:1.8em;
  color:var(--navy-primary);
}
.article-body p{
  color:var(--ink-soft);
  font-size:1.02rem;
  margin:0 0 1.2em;
}
.article-body strong{color:var(--ink);}
.article-body a:not(.btn){
  color:var(--navy-primary);
  font-weight:700;
  border-bottom:1px solid rgba(61,92,125,0.35);
}
.article-body a:not(.btn):hover{border-bottom-color:var(--navy-primary);}

.article-body ul.check{
  margin:0 0 1.6em;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.article-body ul.check li{
  position:relative;
  padding-left:32px;
  color:var(--ink-soft);
  font-size:1rem;
}
.article-body ul.check li::before{
  content:"";
  position:absolute;
  left:0;top:5px;
  width:16px;height:16px;
  border-radius:50%;
  background:var(--white);
  box-shadow:inset 0 0 0 4px var(--white);
}
.article-body ul.check li strong{display:block;color:var(--ink);}

/* ---------- Sumário ---------- */
.toc{
  background:var(--navy-pale);
  border-radius:var(--radius);
  padding:26px 28px;
  margin-bottom:44px;
}
.toc-title{
  font-family:var(--font-head);
  font-size:.78rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:2px;
  color:var(--navy-primary);
  margin:0 0 16px;
}
.toc ol{
  margin:0;padding:0;
  list-style:none;
  counter-reset:toc;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 24px;
}
.toc li{counter-increment:toc;font-size:.92rem;}
.toc li::before{
  content:counter(toc,decimal-leading-zero);
  color:var(--white);
  font-family:var(--font-head);
  font-weight:700;
  margin-right:10px;
}
.toc a{color:var(--navy);font-weight:500;}
.toc a:hover{color:var(--navy-primary);}

/* ---------- Destaques ---------- */
.callout{
  border-left:4px solid var(--navy-bright);
  background:linear-gradient(90deg, rgba(46,71,99,0.08), rgba(46,71,99,0));
  padding:22px 26px;
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  margin:0 0 1.8em;
}
.callout p{margin:0;color:var(--ink);}
.callout-label{
  display:block;
  font-family:var(--font-head);
  font-size:.74rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1.5px;
  color:var(--navy-primary);
  margin-bottom:6px;
}

.spec-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin:0 0 2.2em;
}
.spec-item{
  background:var(--navy-pale);
  border-radius:var(--radius-sm);
  padding:22px 18px;
  text-align:center;
}
.spec-item strong{
  display:block;
  font-family:var(--font-head);
  font-size:1.45rem;
  color:var(--navy-primary);
  line-height:1.2;
  margin-bottom:4px;
}
.spec-item span{font-size:.82rem;color:var(--ink-soft);}

/* ---------- Figuras ---------- */
.article-figure{margin:2.4em 0;}
.article-figure img{
  width:100%;
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.article-figure figcaption{
  margin-top:12px;
  font-size:.84rem;
  color:var(--ink-soft);
  text-align:center;
}
.figure-duo{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.figure-duo img{height:260px;object-fit:cover;}

/* ---------- Prós e contras ---------- */
.pros-cons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin:0 0 2.2em;
}
.pros-cons > div{
  border-radius:var(--radius);
  padding:24px 26px;
  border:1px solid rgba(46,71,99,0.12);
}
.pros{background:rgba(46,71,99,0.07);}
.cons{background:var(--navy-pale);}
.pros-cons h3{margin:0 0 14px;font-size:1rem;color:var(--navy);}
.pros-cons ul{display:flex;flex-direction:column;gap:10px;}
.pros-cons li{
  position:relative;
  padding-left:24px;
  font-size:.92rem;
  color:var(--ink-soft);
}
.pros-cons li::before{position:absolute;left:0;top:0;font-weight:700;}
.pros li::before{content:"+";color:#12a58f;}
.cons li::before{content:"\2212";color:var(--ink-soft);}

/* ---------- Tabela comparativa ---------- */
.table-wrap{
  overflow-x:auto;
  margin:0 0 1em;
  -webkit-overflow-scrolling:touch;
}
.compare-table{
  width:100%;
  min-width:560px;
  border-collapse:collapse;
  font-size:.9rem;
  background:var(--white);
  border-radius:var(--radius-sm);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.compare-table th,.compare-table td{
  padding:14px 18px;
  text-align:left;
  border-bottom:1px solid rgba(46,71,99,0.1);
}
.compare-table thead th{
  background:var(--navy);
  color:var(--white);
  font-family:var(--font-head);
  font-size:.85rem;
  font-weight:700;
}
.compare-table tbody th{
  color:var(--navy);
  font-weight:700;
  white-space:nowrap;
}
.compare-table td{color:var(--ink-soft);}
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td{border-bottom:none;}
.table-note{font-size:.82rem;color:var(--ink-soft);margin:0 0 2.2em;}

/* ---------- Referências ---------- */
.ref-mark{
  display:inline-block;
  font-size:.68em;
  font-weight:700;
  line-height:1;
  vertical-align:super;
  color:var(--navy-primary);
  border-bottom:none !important;
  padding:0 1px;
}
.ref-mark:hover{color:var(--navy-bright);}

.references{
  margin-top:3.5em;
  padding-top:32px;
  border-top:2px solid rgba(46,71,99,0.12);
}
.references h2{font-size:1.15rem !important;margin-top:0 !important;}
.references > p{font-size:.9rem;}
.references ol{
  margin:0;padding:0;
  list-style:none;
  counter-reset:ref;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.references li{
  counter-increment:ref;
  position:relative;
  padding-left:34px;
  font-size:.88rem;
  color:var(--ink-soft);
  line-height:1.55;
  scroll-margin-top:100px;
}
.references li::before{
  content:counter(ref);
  position:absolute;
  left:0;top:1px;
  width:22px;height:22px;
  border-radius:50%;
  background:var(--navy-pale);
  color:var(--navy-primary);
  font-family:var(--font-head);
  font-size:.72rem;
  font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.references li:target::before{background:var(--navy-primary);color:var(--white);}
.references cite{font-style:normal;color:var(--ink);font-weight:700;}
.references a{word-break:break-word;}

/* ---------- FAQ dentro do artigo ---------- */
.article-faq{background:var(--navy-pale);padding:80px 0;}
.article-faq .container{max-width:820px;}
/* respostas do artigo são mais longas que as da home e quebram em mais linhas no mobile */
.article-faq .faq-item.open .faq-answer{max-height:400px;}

/* ---------- Artigos relacionados ---------- */
.related{padding:80px 0;}
.related-card{
  display:block;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  background:var(--white);
  transition:transform .3s ease, box-shadow .3s ease;
}
.related-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);}
.related-card img{height:180px;width:100%;object-fit:cover;}
.related-body{padding:20px 22px;}
.related-card h3{font-size:1.02rem;margin-bottom:6px;}
.related-card p{color:var(--ink-soft);font-size:.88rem;margin:0;}
.related-card .tag{
  display:inline-block;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--navy-primary);
  margin-bottom:8px;
}

/* ---------- Responsivo ---------- */
@media (max-width:820px){
  .article-hero{min-height:auto;padding:130px 0 44px;}
  .toc ol{grid-template-columns:1fr;}
  .spec-grid{grid-template-columns:1fr;}
  .pros-cons{grid-template-columns:1fr;}
  .figure-duo{grid-template-columns:1fr;}
  .figure-duo img{height:220px;}
}
@media (max-width:560px){
  .article-body{padding:56px 0 70px;}
  .article-faq,.related{padding:60px 0;}
}