/* =========================================================
   servicos.css: complementos das páginas de serviço
   (abertura de empresa e, nas próximas etapas, as demais).
   Não altera styles.css nem blog-novo*.css, que são compartilhados.
   ========================================================= */

/* ---------- Acessibilidade ---------- */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 3000;
  background: var(--first-color);
  color: #fff;
  padding: .75rem 1rem;
  border-radius: .5rem;
  font-weight: var(--font-semi-bold);
}
.skip-link:focus { top: 1rem; }

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--second-color);
  outline-offset: 3px;
  border-radius: .25rem;
}

button.nav__toggle,
button.nav__close {
  background: none;
  border: 0;
  padding: .25rem;
  line-height: 1;
  color: inherit;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Hero em WebP (antes: JPG de 221 KB) ---------- */
.hero-abertura__bg { background-image: url('images/hero-abertura-empresa.webp'); }
@media screen and (max-width: 768px) {
  .hero-abertura__bg { background-image: url('images/hero-abertura-empresa-800.webp'); }
}

/* ---------- Contador responsável ---------- */
.author-box {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  margin: 2.5rem 0;
  padding: 1.5rem;
  border-radius: 1rem;
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--first-color);
  background: linear-gradient(135deg, rgba(139, 61, 255, .05), rgba(255, 46, 146, .05));
}
.author-box__icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-color);
  color: #fff;
  font-size: 1.6rem;
}
.blog-post-content .author-box p { margin: 0; }
.author-box__eyebrow {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: var(--smaller-font-size);
  font-weight: var(--font-semi-bold);
  color: var(--first-color);
}
.blog-post-content .author-box .author-box__name {
  font-family: var(--title-font);
  font-weight: var(--font-bold);
  color: var(--title-color);
  font-size: 1.1rem;
  margin: .2rem 0 .5rem;
}
.blog-post-content .author-box .author-box__meta {
  margin-top: .5rem;
  font-size: var(--smaller-font-size);
  color: var(--text-color-light);
}

.footer__crc { font-size: var(--smaller-font-size); opacity: .85; }

@media screen and (max-width: 576px) {
  .author-box { flex-direction: column; }
}

/* Fundos das páginas de serviço em WebP (antes: JPG/PNG de 230 KB a 3,6 MB) */
.hero-troca-de-contador__bg { background-image: url('images/hero-troca-de-contador.webp'); }
.hero-contabilidade-mei__bg { background-image: url('images/hero-contabilidade-mei.webp'); }
.hero-planejamento-tributario__bg { background-image: url('images/hero-planejamento-tributario.webp'); }
.hero-bpo-financeiro__bg { background-image: url('images/hero-bpo-financeiro.webp'); }
.hero-consultoria-empresarial__bg { background-image: url('images/hero-consultoria-empresarial.webp'); }
@media screen and (max-width: 768px) {
  .hero-troca-de-contador__bg { background-image: url('images/hero-troca-de-contador-800.webp'); }
  .hero-contabilidade-mei__bg { background-image: url('images/hero-contabilidade-mei-800.webp'); }
  .hero-planejamento-tributario__bg { background-image: url('images/hero-planejamento-tributario-800.webp'); }
  .hero-bpo-financeiro__bg { background-image: url('images/hero-bpo-financeiro-800.webp'); }
  .hero-consultoria-empresarial__bg { background-image: url('images/hero-consultoria-empresarial-800.webp'); }
}

/* Fundos dos artigos do blog em WebP (antes: PNG de 2,1 a 2,8 MB) */
.hero-blog-real-operacao__bg { background-image: url('images/blog-real-operacao.webp'); }
.hero-blog-real-planejamento-tributario__bg { background-image: url('images/blog-real-planejamento-tributario.webp'); }
.hero-blog-real-consultoria-estrategica__bg { background-image: url('images/blog-real-consultoria-estrategica.webp'); }
.hero-blog-real-atendimento__bg { background-image: url('images/blog-real-atendimento.webp'); }
.hero-blog-hero-contabilidade-medicos__bg { background-image: url('images/blog-hero-contabilidade-medicos.webp'); }
@media screen and (max-width: 768px) {
  .hero-blog-real-operacao__bg { background-image: url('images/blog-real-operacao-800.webp'); }
  .hero-blog-real-planejamento-tributario__bg { background-image: url('images/blog-real-planejamento-tributario-800.webp'); }
  .hero-blog-real-consultoria-estrategica__bg { background-image: url('images/blog-real-consultoria-estrategica-800.webp'); }
  .hero-blog-real-atendimento__bg { background-image: url('images/blog-real-atendimento-800.webp'); }
  .hero-blog-hero-contabilidade-medicos__bg { background-image: url('images/blog-hero-contabilidade-medicos-800.webp'); }
}

/* =========================================================
   Blog: perguntas frequentes, leituras relacionadas e avisos
   ========================================================= */

/* Perguntas frequentes (os artigos usam três marcações diferentes) */
.faq-list { display: grid; gap: 1rem; margin: 1.5rem 0 2rem; }
.faq-list .faq-item,
.faq-section .faq-item,
.faq-section details {
  background: var(--container-color);
  border: 1px solid var(--border-color);
  border-radius: .75rem;
  padding: 1.1rem 1.4rem;
  margin: 0 0 1rem;
}
.faq-list .faq-item { margin: 0; }
.blog-post-content .faq-question,
.faq-section .faq-item h3,
.faq-section .faq-item h4,
.faq-section .faq-item > strong {
  display: block;
  font-family: var(--title-font);
  font-size: 1.02rem;
  font-weight: var(--font-semi-bold);
  line-height: 1.45;
  color: var(--title-color);
  text-align: left;
  margin: 0 0 .5rem;
}
.faq-list .faq-answer p,
.faq-section .faq-item p { margin: 0; }
.faq-section details summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 2rem;
  font-family: var(--title-font);
  font-weight: var(--font-semi-bold);
  line-height: 1.45;
  color: var(--title-color);
}
.faq-section details summary::-webkit-details-marker { display: none; }
.faq-section details summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  color: var(--first-color);
}
.faq-section details[open] { border-color: var(--first-color); }
.faq-section details[open] summary::after { content: "\2212"; }
.faq-section details > p { margin: .75rem 0 0; }

/* Leia também */
.related-reading {
  margin: 3rem 0 1.5rem;
  padding: 1.75rem;
  border-radius: 1rem;
  border: 1px solid var(--border-color);
  background: linear-gradient(135deg, rgba(139, 61, 255, .05), rgba(255, 46, 146, .05));
}
.blog-post-content .related-reading__title,
.related-reading__title {
  font-family: var(--title-font);
  font-size: 1.15rem;
  font-weight: var(--font-bold);
  color: var(--title-color);
  margin: 0 0 1rem;
}
.related-reading__list,
.blog-post-content .related-reading__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.related-reading__list li { margin: 0; padding: 0; }
.related-reading__list li::before { content: none; }
.blog-post-content .related-reading__list a,
.related-reading__list a {
  display: block;
  height: 100%;
  padding: 1rem 1.1rem;
  background: var(--container-color);
  border: 1px solid var(--border-color);
  border-radius: .75rem;
  color: var(--title-color);
  font-weight: var(--font-semi-bold);
  line-height: 1.4;
  text-decoration: none;
  transition: var(--transition);
}
.blog-post-content .related-reading__list a:hover,
.related-reading__list a:hover {
  border-color: var(--first-color);
  color: var(--first-color);
  transform: translateY(-2px);
}
.related-reading__tag {
  display: block;
  margin-bottom: .35rem;
  font-size: var(--smaller-font-size);
  font-weight: var(--font-semi-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--first-color);
}

/* Aviso de atualização dentro do artigo */
.update-note {
  margin: 1.75rem 0;
  padding: 1.1rem 1.3rem;
  border-left: 4px solid var(--second-color);
  border-radius: .5rem;
  background: #fff6fb;
}
.blog-post-content .update-note p { margin: .25rem 0 0; }
.blog-post-content .update-note .update-note__label,
.update-note__label {
  margin: 0;
  font-size: var(--smaller-font-size);
  font-weight: var(--font-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--second-color);
}

/* Topo da página do blog: foto da equipe XRP em WebP */
.hero-blog-index__bg { background-image: url('images/blog-real-consultoria-estrategica.webp'); }
@media screen and (max-width: 768px) {
  .hero-blog-index__bg { background-image: url('images/blog-real-consultoria-estrategica-800.webp'); }
}
.blog-post-card[hidden] { display: none !important; }