/*
 * Aprova Seguro — Camada compartilhada de páginas internas
 * Escopo: páginas de seguro, institucionais, Blog Hub e artigos
 * Mantém a Home fora desta camada.
 */

.as-service-page {
  background: var(--as-white);
}

.as-service-breadcrumb {
  border-bottom: 1px solid var(--as-mist);
  background: rgba(244, 247, 248, .72);
}

.as-service-breadcrumb .as-container {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  color: var(--as-slate);
  font-size: 13px;
}

.as-service-breadcrumb a {
  color: var(--as-teal-dark);
  font-weight: 700;
  text-decoration: none;
}

.as-service-breadcrumb a:hover {
  text-decoration: underline;
}

.as-service-content {
  overflow: hidden;
}

.as-service-page-content .as-section {
  padding: 92px 0;
}

.as-service-page-content .as-reading {
  max-width: 790px;
}

.as-service-page-content .as-reading > p {
  color: var(--as-slate);
}

.as-service-page-content .as-section--navy .as-reading > p {
  color: rgba(255,255,255,.78);
}

/* Hero */
.as-service-hero {
  overflow: hidden;
  padding: 94px 0 88px;
  background:
    radial-gradient(circle at 86% 18%, rgba(15,157,138,.14), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #f4f7f8 68%, #edf7f5 100%);
}

.as-service-hero::after {
  content: "";
  position: absolute;
  right: -120px;
  bottom: -180px;
  width: 520px;
  height: 520px;
  border: 1px solid rgba(15,157,138,.16);
  border-radius: 50%;
  pointer-events: none;
}

.as-service-hero-copy {
  position: relative;
  z-index: 1;
  max-width: 880px;
}

.as-service-hero h1 {
  max-width: 850px;
}

.as-service-hero .as-lead {
  max-width: 760px;
  color: var(--as-slate);
}

.as-service-proof {
  margin-top: 22px;
  color: var(--as-navy);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .015em;
}

/* Cards */
.as-service-card-grid {
  display: grid;
  gap: 18px;
  margin-top: 42px;
}

.as-service-card-grid--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.as-service-card-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.as-service-card {
  min-width: 0;
  padding: 28px 24px;
  border: 1px solid var(--as-mist);
  border-radius: var(--as-radius-md);
  background: var(--as-white);
  box-shadow: 0 12px 30px rgba(16,42,67,.045);
}

.as-service-card h3 {
  font-size: 1.12rem;
}

.as-service-card p {
  margin-top: 12px;
  color: var(--as-slate);
  font-size: 14px;
  line-height: 1.62;
}

.as-service-card p a {
  font-weight: 700;
}

.as-service-card--link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.as-service-card--link:hover {
  color: inherit;
  transform: translateY(-3px);
  border-color: rgba(15,157,138,.34);
  box-shadow: var(--as-shadow-soft);
}

.as-service-link {
  margin-top: 30px;
}

.as-service-link a {
  font-weight: 800;
}

/* Cotação — 5 etapas */
.as-service-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  margin-top: 46px;
}

.as-service-steps::before {
  content: "";
  position: absolute;
  left: 5%;
  right: 5%;
  top: 24px;
  height: 1px;
  background: var(--as-mist);
}

.as-service-steps article {
  position: relative;
  z-index: 1;
}

.as-service-steps article > span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 21px;
  border: 2px solid var(--as-teal);
  border-radius: 50%;
  background: var(--as-white);
  color: var(--as-teal-dark);
  font-family: "Manrope", sans-serif;
  font-size: 13px;
  font-weight: 800;
}

.as-service-steps h3 {
  font-size: 1.05rem;
}

.as-service-steps p {
  margin-top: 10px;
  color: var(--as-slate);
  font-size: 14px;
  line-height: 1.58;
}

.as-service-steps + .as-button-row {
  margin-top: 38px;
}

/* Formulário único */
.as-service-form-wrap {
  width: min(calc(100% - 48px), 920px);
  margin: 0 auto 92px;
  padding-top: 6px;
}

.as-service-form-wrap .as-kommo-slot.as-wpforms-slot {
  max-width: 760px;
  margin-inline: auto;
  border: 1px solid var(--as-mist);
  box-shadow: var(--as-shadow-soft);
}

/* Fatores de preço */
.as-service-factor-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 34px 0 40px;
  padding: 0;
  list-style: none;
}

.as-service-factor-list li {
  position: relative;
  min-height: 82px;
  display: flex;
  align-items: center;
  padding: 18px 18px 18px 42px;
  border: 1px solid var(--as-mist);
  border-radius: 14px;
  background: var(--as-white);
  color: var(--as-navy);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}

.as-service-factor-list li::before {
  content: "✓";
  position: absolute;
  left: 17px;
  color: var(--as-teal-dark);
  font-weight: 900;
}

/* Tabelas */
.as-service-table-wrap {
  margin: 38px 0;
  overflow: hidden;
  border: 1px solid var(--as-mist);
  border-radius: var(--as-radius-md);
  background: var(--as-white);
  box-shadow: 0 14px 34px rgba(16,42,67,.045);
}

.as-service-table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
}

.as-service-table th,
.as-service-table td {
  padding: 18px 20px;
  border-bottom: 1px solid var(--as-mist);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.as-service-table thead th {
  background: var(--as-navy);
  color: var(--as-white);
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  font-weight: 800;
}

.as-service-table tbody th {
  width: 28%;
  color: var(--as-navy);
  font-weight: 800;
}

.as-service-table tbody td {
  color: var(--as-slate);
}

.as-service-table tbody tr:last-child th,
.as-service-table tbody tr:last-child td {
  border-bottom: 0;
}

/* Método Aprova */
.as-service-page-content .as-section--navy .as-criteria-list {
  margin-top: 34px;
}

/* FAQ */
.as-service-faq {
  max-width: 900px;
  margin-top: 38px;
  border-top: 1px solid var(--as-mist);
}

.as-service-faq details {
  border-bottom: 1px solid var(--as-mist);
}

.as-service-faq summary {
  position: relative;
  padding: 22px 46px 22px 0;
  color: var(--as-navy);
  font-family: "Manrope", sans-serif;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}

.as-service-faq summary::-webkit-details-marker {
  display: none;
}

.as-service-faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--as-teal-dark);
  font-size: 24px;
  font-weight: 500;
}

.as-service-faq details[open] summary::after {
  content: "−";
}

.as-service-faq details p {
  max-width: 760px;
  margin: 0;
  padding: 0 46px 22px 0;
  color: var(--as-slate);
}

.as-service-faq details p + p {
  margin-top: -8px;
}

/* CTA final */
.as-service-final {
  padding-top: 84px !important;
  padding-bottom: 88px !important;
}

.as-service-final .as-reading {
  max-width: 800px;
}

.as-service-final .as-button--secondary {
  background: transparent;
  border-color: rgba(255,255,255,.58);
  color: var(--as-white);
}

.as-service-final .as-button--secondary:hover {
  background: rgba(255,255,255,.08);
  border-color: var(--as-white);
  color: var(--as-white);
}

/* Foco e acessibilidade */
.as-service-page a:focus-visible,
.as-service-page summary:focus-visible {
  outline: 3px solid rgba(15,157,138,.45);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Tablet */
@media (max-width: 1120px) {
  .as-service-card-grid--5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .as-service-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .as-service-steps::before {
    display: none;
  }

  .as-service-factor-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .as-service-page-content .as-section {
    padding: 76px 0;
  }

  .as-service-hero {
    padding: 72px 0 68px;
  }

  .as-service-card-grid--5,
  .as-service-card-grid--3,
  .as-service-steps {
    grid-template-columns: 1fr 1fr;
  }

  .as-service-form-wrap {
    width: min(calc(100% - 36px), 920px);
    margin-bottom: 76px;
  }
}

/* Mobile */
@media (max-width: 620px) {
  .as-service-breadcrumb .as-container {
    min-height: 42px;
    font-size: 12px;
  }

  .as-service-page-content .as-section {
    padding: 62px 0;
  }

  .as-service-hero {
    padding: 58px 0 62px;
  }

  .as-service-hero::after {
    display: none;
  }

  .as-service-proof {
    font-size: 12px;
    line-height: 1.6;
  }

  .as-service-card-grid--5,
  .as-service-card-grid--3,
  .as-service-steps,
  .as-service-factor-list {
    grid-template-columns: 1fr;
  }

  .as-service-card-grid,
  .as-service-steps {
    margin-top: 32px;
  }

  .as-service-card {
    padding: 23px 20px;
  }

  .as-service-factor-list {
    gap: 10px;
  }

  .as-service-factor-list li {
    min-height: 68px;
  }

  .as-service-form-wrap {
    width: min(calc(100% - 30px), 920px);
    margin-bottom: 62px;
  }

  .as-service-table tbody th {
   width: 40%;
  }

  .as-service-table th,
  .as-service-table td {
    padding: 14px 12px;
    font-size: 13px;
    line-height: 1.48;
    overflow-wrap: anywhere;
    word-break: normal;
}

  .as-service-table tbody th {
  width: 40%;
}

  .as-service-faq summary {
    padding-right: 38px;
    font-size: 16px;
  }

  .as-service-faq details p {
    padding-right: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .as-service-card--link {
    transition: none;
  }
}


/* =====================================================
   IMAGENS OPCIONAIS — PÁGINAS DE SEGURO
   ===================================================== */

.as-service-media {
  margin: 34px 0 0;
}

.as-service-media__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--as-radius-lg);
  box-shadow: var(--as-shadow-soft);
}

.as-service-media--hero {
  margin: 0;
  aspect-ratio: 6 / 5;
}

.as-service-media--compare {
  max-width: 960px;
  margin: 40px auto;
  aspect-ratio: 16 / 9;
}

.as-service-media--protection {
  max-width: 680px;
  margin: 40px 0;
  aspect-ratio: 4 / 3;
}

/* O Hero só vira duas colunas quando houver imagem selecionada */
.as-service-hero .as-container:has(.as-service-media--hero) {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr);
  gap: 64px;
  align-items: center;
}

@media (max-width: 980px) {
  .as-service-hero .as-container:has(.as-service-media--hero) {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .as-service-media--hero {
    max-width: 680px;
  }
}

@media (max-width: 620px) {
  .as-service-media--compare,
  .as-service-media--protection {
    margin-top: 30px;
    margin-bottom: 30px;
  }
}

/* Ajuste de respiro — páginas institucionais */
.as-institutional-page .as-reading h2 {
  margin-top: 56px;
}

.as-institutional-page .as-reading h3 {
  margin-top: 34px;
}

.as-institutional-page .as-reading h2:first-child,
.as-institutional-page .as-reading h3:first-child {
  margin-top: 0;
}

@media (max-width: 620px) {
  .as-institutional-page .as-reading h2 {
    margin-top: 44px;
  }

  .as-institutional-page .as-reading h3 {
    margin-top: 28px;
  }
}

/* =========================================================
   PÁGINAS DE SEGURO — ALINHAMENTO CONTÍNUO V2
   Escopo exclusivo: template-seguro.php
   ========================================================= */

/* Textos corridos justificados apenas nas páginas de seguro. */
.as-insurance-page .as-service-page-content p,
.as-insurance-page .as-service-page-content .as-service-table tbody td,
.as-insurance-page .as-service-page-content .as-service-faq details p {
  text-align: justify;
  text-justify: inter-word;
}

@media (min-width: 981px) {

  /*
   * IMPORTANTE:
   * Há dois formatos no HTML:
   * 1) <div class="as-container as-reading">
   * 2) <div class="as-container"><div class="as-reading">
   *
   * O V1 zerava as margens de ambos e, no formato 1,
   * removia o margin-inline:auto do próprio container.
   * Aqui preservamos o container centralizado.
   */

  /* Quando as duas classes estão no MESMO elemento */
  .as-insurance-page .as-service-page-content .as-container.as-reading {
    width: min(calc(100% - 48px), var(--as-container));
    max-width: var(--as-container);
    margin-left: auto;
    margin-right: auto;
  }

  /* Quando .as-reading está DENTRO do container */
  .as-insurance-page .as-service-page-content .as-container > .as-reading {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  /* Hero: mantém o mesmo eixo externo e libera limites internos */
  .as-insurance-page .as-service-page-content .as-service-hero-copy,
  .as-insurance-page .as-service-page-content .as-service-hero h1,
  .as-insurance-page .as-service-page-content .as-service-hero .as-lead {
    width: 100%;
    max-width: none;
  }

  /* FAQ acompanha a largura útil do container */
  .as-insurance-page .as-service-page-content .as-service-faq,
  .as-insurance-page .as-service-page-content .as-service-faq details p {
    width: 100%;
    max-width: none;
  }

  /* CTA final: libera apenas o limitador interno, sem mexer no container */
  .as-insurance-page .as-service-page-content .as-service-final .as-reading {
    max-width: none;
  }

  /* Formulário Gutenberg: usa o mesmo container externo da página */
  .as-insurance-page .as-service-form-wrap {
    width: min(calc(100% - 48px), var(--as-container)) !important;
    max-width: var(--as-container) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .as-insurance-page .as-service-form-wrap > .as-kommo-slot.as-wpforms-slot {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* =========================================================
   PÁGINAS INSTITUCIONAIS — ALINHAMENTO CONTÍNUO
   Escopo exclusivo: template-institucional.php
   Afeta Sobre, Contato, Política, Termos e demais páginas
   que usam o template "Página Institucional".
   ========================================================= */

/* Textos corridos justificados apenas nas páginas institucionais. */
.as-service-page.as-institutional-page .as-service-page-content p,
.as-service-page.as-institutional-page .as-service-page-content .as-service-table tbody td,
.as-service-page.as-institutional-page .as-service-page-content .as-service-faq details p {
  text-align: justify;
  text-justify: inter-word;
}

@media (min-width: 981px) {

  /*
   * O conteúdo institucional usa os mesmos dois formatos das páginas de seguro:
   * 1) <div class="as-container as-reading">
   * 2) <div class="as-container"><div class="as-reading">
   *
   * Preservamos sempre o .as-container centralizado e liberamos somente
   * o estreitamento interno de leitura.
   */

  /* Quando .as-container e .as-reading estão no MESMO elemento */
  .as-service-page.as-institutional-page .as-service-page-content .as-container.as-reading {
    width: min(calc(100% - 48px), var(--as-container));
    max-width: var(--as-container);
    margin-left: auto;
    margin-right: auto;
  }

  /* Quando .as-reading está DENTRO do container */
  .as-service-page.as-institutional-page .as-service-page-content .as-container > .as-reading {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  /* Hero institucional acompanha o mesmo eixo lateral */
  .as-service-page.as-institutional-page .as-service-page-content .as-service-hero-copy,
  .as-service-page.as-institutional-page .as-service-page-content .as-service-hero h1,
  .as-service-page.as-institutional-page .as-service-page-content .as-service-hero .as-lead {
    width: 100%;
    max-width: none;
  }

  /* FAQ institucional acompanha toda a largura útil do container */
  .as-service-page.as-institutional-page .as-service-page-content .as-service-faq,
  .as-service-page.as-institutional-page .as-service-page-content .as-service-faq details p {
    width: 100%;
    max-width: none;
  }

  /* CTA final institucional: remove apenas o limite interno */
  .as-service-page.as-institutional-page .as-service-page-content .as-service-final .as-reading {
    max-width: none;
  }

  /* Formulários institucionais, como Contato, usam o mesmo container da página */
  .as-service-page.as-institutional-page .as-service-form-wrap {
    width: min(calc(100% - 48px), var(--as-container)) !important;
    max-width: var(--as-container) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .as-service-page.as-institutional-page .as-service-form-wrap > .as-kommo-slot.as-wpforms-slot {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* =========================================================
   SOBRE A APROVA — AJUSTE PONTUAL DA GRADE DE 4 ETAPAS
   ========================================================= */

/* Listas textuais da página Sobre seguem o padrão justificado. */
.as-service-page.as-institutional-page .as-about-page li {
  text-align: justify;
  text-justify: inter-word;
}

/*
 * A grade compartilhada .as-service-steps foi criada para 5 etapas.
 * Na seção "Como a Aprova organiza a decisão" existem somente 4.
 * Em desktop grande, esta variação ocupa quatro colunas proporcionais.
 * Tablet e mobile continuam obedecendo às regras responsivas já existentes.
 */
@media (min-width: 1121px) {
  .as-service-page.as-institutional-page .as-about-page .as-service-steps--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .as-service-page.as-institutional-page .as-about-page .as-service-steps--4::before {
    left: 24px;
    right: calc(25% - 24px);
  }
}

/* =========================================================
   BLOG HUB — ALINHAMENTO CONTÍNUO
   Escopo exclusivo: template-blog-hub.php
   Mantém Seguro, Institucional, Sobre e artigos intactos.
   ========================================================= */

/* Textos corridos justificados no Hub do Blog. */
.as-service-page.as-blog-hub-page .as-service-page-content p,
.as-service-page.as-blog-hub-page .as-blog-recent p,
.as-service-page.as-blog-hub-page .as-service-table tbody td {
  text-align: justify;
  text-justify: inter-word;
}

@media (min-width: 981px) {

  /* Quando .as-container e .as-reading estão no mesmo elemento. */
  .as-service-page.as-blog-hub-page
  .as-service-page-content
  .as-container.as-reading {
    width: min(calc(100% - 48px), var(--as-container));
    max-width: var(--as-container);
    margin-left: auto;
    margin-right: auto;
  }

  /* Quando .as-reading está dentro do container. */
  .as-service-page.as-blog-hub-page
  .as-service-page-content
  .as-container > .as-reading {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  /* Hero do Blog acompanha o mesmo eixo lateral. */
  .as-service-page.as-blog-hub-page
  .as-service-page-content
  .as-service-hero-copy,
  .as-service-page.as-blog-hub-page
  .as-service-page-content
  .as-service-hero h1,
  .as-service-page.as-blog-hub-page
  .as-service-page-content
  .as-service-hero .as-lead {
    width: 100%;
    max-width: none;
  }

  /* CTA final do Blog sem estreitamento interno. */
  .as-service-page.as-blog-hub-page
  .as-service-page-content
  .as-service-final .as-reading {
    width: 100%;
    max-width: none;
  }

  /*
   * "Conteúdos mais recentes" é um bloco Gutenberg constrained,
   * fora de .as-service-page-content. O theme.json limita seus filhos
   * ao contentSize; aqui eles passam a seguir o mesmo container de 1240px.
   */
  .as-service-page.as-blog-hub-page
  .as-blog-recent > .wp-block-heading,
  .as-service-page.as-blog-hub-page
  .as-blog-recent > .wp-block-query {
    width: min(calc(100% - 48px), var(--as-container)) !important;
    max-width: var(--as-container) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* =========================================================
   ARTIGOS DO BLOG — PADRÃO DEFINITIVO DE MARGENS + HERO
   Escopo exclusivo: single-post.php / .as-article-page
   Objetivo: todos os posts usam exatamente o mesmo eixo lateral
   do tema, independentemente das variações internas dos HTMLs.
   Home, Blog Hub, páginas de Seguro, Institucionais e mobile
   permanecem fora deste ajuste.
   ========================================================= */

/* Mantém o comportamento editorial já aprovado dos artigos. */
.as-service-page.as-article-page .as-service-content p,
.as-service-page.as-article-page .as-service-content .as-service-table tbody td,
.as-service-page.as-article-page .as-service-content .as-service-faq details p {
  text-align: justify;
  text-justify: inter-word;
}

@media (min-width: 981px) {

  /* Remove qualquer limitação externa do conteúdo do post. */
  .as-service-page.as-article-page .as-service-content,
  .as-service-page.as-article-page .as-service-content > .as-service-page-content {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Breadcrumb no mesmo eixo horizontal do restante do site. */
  .as-service-page.as-article-page
  .as-service-breadcrumb > .as-container {
    width: min(calc(100% - 48px), var(--as-container)) !important;
    max-width: var(--as-container) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
  }

  /*
   * Regra única para TODOS os containers estruturais dos posts.
   * Funciona tanto em seções de texto quanto em seções com cards,
   * tabelas, FAQ, listas e visuais próprios de cada artigo.
   */
  .as-service-page.as-article-page
  .as-service-content
  .as-hero > .as-container,
  .as-service-page.as-article-page
  .as-service-content
  .as-section > .as-container,
  .as-service-page.as-article-page
  .as-service-content
  .as-section > .as-reading {
    width: min(calc(100% - 48px), var(--as-container)) !important;
    max-width: var(--as-container) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
  }

  /*
   * Alguns HTMLs usam .as-container.as-reading e outros usam
   * .as-container > .as-reading. Ambos passam a obedecer ao
   * MESMO eixo, eliminando a diferença de margem entre posts.
   */
  .as-service-page.as-article-page
  .as-service-content
  .as-section > .as-container > .as-reading,
  .as-service-page.as-article-page
  .as-service-content
  .as-hero > .as-container > .as-reading {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }

  /* Elementos estruturais ocupam toda a largura útil do container. */
  .as-service-page.as-article-page
  .as-service-content
  .as-section > .as-container > .as-service-card-grid,
  .as-service-page.as-article-page
  .as-service-content
  .as-section > .as-container > .as-service-table-wrap,
  .as-service-page.as-article-page
  .as-service-content
  .as-section > .as-container > .as-service-faq,
  .as-service-page.as-article-page
  .as-service-content
  .as-section > .as-container > .as-service-factor-list,
  .as-service-page.as-article-page
  .as-service-content
  .as-section > .as-container > [class*="-visual"] {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
  }

  /* Hero: mesmo padrão das páginas de Seguro.
     Topo da imagem e do conteúdo alinhados para manter a mesma distância
     vertical em todos os artigos, independentemente do tamanho do título. */
  .as-service-page.as-article-page
  .as-service-content
  .as-service-hero > .as-container:has(.as-service-media--hero) {
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr) !important;
    gap: 64px !important;
    align-items: start !important;
  }

  .as-service-page.as-article-page
  .as-service-content
  .as-service-hero .as-service-hero-copy,
  .as-service-page.as-article-page
  .as-service-content
  .as-service-hero h1,
  .as-service-page.as-article-page
  .as-service-content
  .as-service-hero .as-lead {
    width: 100% !important;
    max-width: none !important;
  }

  .as-service-page.as-article-page
  .as-service-content
  .as-service-hero .as-service-media--hero {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    aspect-ratio: 6 / 5;
  }

  /* FAQ e CTA final seguem o mesmo eixo sem estreitamento extra. */
  .as-service-page.as-article-page
  .as-service-content
  .as-service-faq,
  .as-service-page.as-article-page
  .as-service-content
  .as-service-final .as-reading {
    width: 100% !important;
    max-width: none !important;
  }
}

/* =========================================================
   TERMOS DE USO — REFINOS DE DESKTOP
   Mantém tablet e mobile com o comportamento responsivo atual.
   ========================================================= */

@media (min-width: 1121px) {

  /*
   * "Quem faz o quê?"
   * A seção possui exatamente 4 cards. No desktop, exibe os 4 lado a lado.
   * O seletor por quantidade evita alterar grades institucionais com
   * 2, 3 ou 5 cards.
   */
  .as-service-page.as-institutional-page
  .as-service-page-content
  .as-service-card-grid:has(> :nth-child(4)):not(:has(> :nth-child(5))) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /*
   * "Da solicitação até a contratação"
   * A seção possui exatamente 6 etapas. No desktop, exibe as 6 em uma linha.
   */
  .as-service-page.as-institutional-page
  .as-service-page-content
  .as-service-steps:has(> :nth-child(6)):not(:has(> :nth-child(7))) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  /*
   * Linha da sequência: começa no centro da etapa 1 e termina
   * no centro da etapa 6.
   */
  .as-service-page.as-institutional-page
  .as-service-page-content
  .as-service-steps:has(> :nth-child(6)):not(:has(> :nth-child(7)))::before {
    left: 24px;
    right: calc(16.666667% - 24px);
  }
}

/* =========================================================
   BLOG HUB — REFINOS VISUAIS DE DESKTOP
   1) "O que você quer entender sobre seguros?"
   2) "Entenda o que o Seguro Auto pode cobrir"
   Escopo exclusivo do Hub do Blog em desktop grande.
   ========================================================= */

@media (min-width: 1121px) {

  /* ---------------------------------------------------------
     1. O QUE VOCÊ QUER ENTENDER SOBRE SEGUROS?
     --------------------------------------------------------- */

  /* Os dois temas principais passam a ocupar 50% / 50%. */
  .as-service-page.as-blog-hub-page
  section[aria-labelledby="assunto-seguro"]
  .as-service-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }

  /* Cards principais maiores, com hierarquia visual própria. */
  .as-service-page.as-blog-hub-page
  section[aria-labelledby="assunto-seguro"]
  .as-service-card {
    min-height: 190px;
    padding: 34px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Seguro Auto — destaque em azul profundo da identidade. */
  .as-service-page.as-blog-hub-page
  section[aria-labelledby="assunto-seguro"]
  .as-service-card-grid > .as-service-card:nth-child(1) {
    background: var(--as-navy);
    border-color: var(--as-navy);
    box-shadow: 0 16px 38px rgba(16,42,67,.13);
  }

  .as-service-page.as-blog-hub-page
  section[aria-labelledby="assunto-seguro"]
  .as-service-card-grid > .as-service-card:nth-child(1) h3 {
    color: var(--as-white);
  }

  .as-service-page.as-blog-hub-page
  section[aria-labelledby="assunto-seguro"]
  .as-service-card-grid > .as-service-card:nth-child(1) p {
    color: rgba(255,255,255,.80);
  }

  /* Seguro Moto — destaque em verde suave da identidade. */
  .as-service-page.as-blog-hub-page
  section[aria-labelledby="assunto-seguro"]
  .as-service-card-grid > .as-service-card:nth-child(2) {
    background: var(--as-soft-teal);
    border-color: rgba(15,157,138,.28);
    box-shadow: 0 16px 38px rgba(15,157,138,.08);
  }

  .as-service-page.as-blog-hub-page
  section[aria-labelledby="assunto-seguro"]
  .as-service-card-grid > .as-service-card:nth-child(2) h3 {
    color: var(--as-navy);
  }

  .as-service-page.as-blog-hub-page
  section[aria-labelledby="assunto-seguro"]
  .as-service-card-grid > .as-service-card:nth-child(2) p {
    color: var(--as-slate);
  }

  /* Texto de card não deve ser justificado. */
  .as-service-page.as-blog-hub-page
  section[aria-labelledby="assunto-seguro"]
  .as-service-card p {
    text-align: left;
    text-justify: auto;
    font-size: 15px;
    line-height: 1.65;
  }

  .as-service-page.as-blog-hub-page
  section[aria-labelledby="assunto-seguro"]
  .as-service-card h3 {
    font-size: 1.28rem;
    margin-bottom: 2px;
  }

  /*
   * Os atalhos deixam de ter larguras diferentes.
   * Em desktop ficam em 4 colunas iguais x 2 linhas.
   */
  .as-service-page.as-blog-hub-page
  section[aria-labelledby="assunto-seguro"]
  .as-button-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
    margin-top: 30px;
  }

  .as-service-page.as-blog-hub-page
  section[aria-labelledby="assunto-seguro"]
  .as-button-row .as-button {
    width: 100%;
    min-height: 58px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 12px;
  }

  /* ---------------------------------------------------------
     2. ENTENDA O QUE O SEGURO AUTO PODE COBRIR
     --------------------------------------------------------- */

  /* Seis cards em 3 x 2, todos com a mesma altura visual. */
  .as-service-page.as-blog-hub-page
  #coberturas-auto
  .as-service-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 22px;
    align-items: stretch;
  }

  .as-service-page.as-blog-hub-page
  #coberturas-auto
  .as-service-card {
    min-height: 172px;
    height: 100%;
    padding: 30px 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  /* Descrições de cards ficam limpas, sem espaços artificiais. */
  .as-service-page.as-blog-hub-page
  #coberturas-auto
  .as-service-card p {
    text-align: left;
    text-justify: auto;
    line-height: 1.62;
  }
}

/* =========================================================
   AJUSTE PONTUAL — HERO SEGURO CONTRA TERCEIROS
   Mantém o conteúdo do Hero no mesmo eixo superior visual das
   demais páginas quando o título ocupa mais linhas.
   Escopo exclusivo: .as-service-terceiros em desktop.
   ========================================================= */
@media (min-width: 981px) {
  .as-service-terceiros .as-service-hero .as-container:has(.as-service-media--hero) .as-service-media--hero {
    align-self: start;
  }
}

/* =========================================================
   BLOG HUB — CORREÇÃO FINAL DE DESKTOP
   Escopo exclusivo: /blog/ no template-blog-hub.php
   - restaura o eixo padrão de margens;
   - destaca Seguro Auto e Seguro Moto;
   - equaliza os atalhos;
   - equaliza os cards de coberturas;
   - coloca 4 cards de sinistro em uma única linha;
   - empilha Assistência e Carro reserva;
   - corrige o eixo das seções textuais finais.
   Tablet e mobile permanecem com o comportamento atual.
   ========================================================= */
@media (min-width: 1121px) {

  /* Eixo geral do conteúdo do Hub: mesma margem das demais páginas. */
  .as-service-page.as-blog-hub-page
  .as-blog-hub-content > .as-section > .as-container,
  .as-service-page.as-blog-hub-page
  .as-blog-hub-content > .as-section > .as-container.as-reading {
    width: min(calc(100% - 48px), var(--as-container)) !important;
    max-width: var(--as-container) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Leitura interna usa toda a largura útil do container. */
  .as-service-page.as-blog-hub-page
  .as-blog-hub-content > .as-section > .as-container > .as-reading {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* ---------------------------------------------------------
     O QUE VOCÊ QUER ENTENDER SOBRE SEGUROS?
     --------------------------------------------------------- */
  .as-service-page.as-blog-hub-page
  section[aria-labelledby="assunto-seguro"]
  .as-service-card-grid {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px;
    align-items: stretch;
  }

  .as-service-page.as-blog-hub-page
  section[aria-labelledby="assunto-seguro"]
  .as-service-card {
    min-height: 210px;
    height: 100%;
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .as-service-page.as-blog-hub-page
  section[aria-labelledby="assunto-seguro"]
  .as-service-card-grid > .as-service-card:nth-child(1) {
    background: var(--as-navy);
    border-color: var(--as-navy);
    box-shadow: 0 18px 42px rgba(16,42,67,.14);
  }

  .as-service-page.as-blog-hub-page
  section[aria-labelledby="assunto-seguro"]
  .as-service-card-grid > .as-service-card:nth-child(1) h3 {
    color: var(--as-white);
  }

  .as-service-page.as-blog-hub-page
  section[aria-labelledby="assunto-seguro"]
  .as-service-card-grid > .as-service-card:nth-child(1) p {
    color: rgba(255,255,255,.82);
  }

  .as-service-page.as-blog-hub-page
  section[aria-labelledby="assunto-seguro"]
  .as-service-card-grid > .as-service-card:nth-child(2) {
    background: var(--as-soft-teal);
    border-color: rgba(15,157,138,.30);
    box-shadow: 0 18px 42px rgba(15,157,138,.09);
  }

  .as-service-page.as-blog-hub-page
  section[aria-labelledby="assunto-seguro"]
  .as-service-card h3 {
    font-size: 1.34rem;
    margin-bottom: 4px;
  }

  .as-service-page.as-blog-hub-page
  section[aria-labelledby="assunto-seguro"]
  .as-service-card p {
    text-align: left;
    text-justify: auto;
    font-size: 15px;
    line-height: 1.65;
  }

  /* Atalhos: 8 itens = 4 colunas x 2 linhas, todos do mesmo tamanho. */
  .as-service-page.as-blog-hub-page
  section[aria-labelledby="assunto-seguro"]
  .as-button-row {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
    margin-top: 32px;
    align-items: stretch;
  }

  .as-service-page.as-blog-hub-page
  section[aria-labelledby="assunto-seguro"]
  .as-button-row .as-button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 60px;
    height: 100%;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 12px;
  }

  /* ---------------------------------------------------------
     ENTENDA O QUE O SEGURO AUTO PODE COBRIR
     6 cards = 3 x 2, com dimensões iguais.
     --------------------------------------------------------- */
  .as-service-page.as-blog-hub-page
  #coberturas-auto
  .as-service-card-grid {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: 1fr;
    gap: 22px;
    align-items: stretch;
  }

  .as-service-page.as-blog-hub-page
  #coberturas-auto
  .as-service-card {
    min-height: 178px;
    height: 100%;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .as-service-page.as-blog-hub-page
  #coberturas-auto
  .as-service-card p {
    text-align: left;
    text-justify: auto;
    line-height: 1.62;
  }

  /* ---------------------------------------------------------
     ACONTECEU ALGUMA COISA COM O CARRO?
     4 cards em uma única linha.
     --------------------------------------------------------- */
  .as-service-page.as-blog-hub-page
  #sinistro-auto
  .as-service-card-grid {
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-rows: 1fr;
    gap: 18px;
    align-items: stretch;
  }

  .as-service-page.as-blog-hub-page
  #sinistro-auto
  .as-service-card {
    min-height: 178px;
    height: 100%;
    padding: 28px 26px;
    display: flex;
    flex-direction: column;
  }

  .as-service-page.as-blog-hub-page
  #sinistro-auto
  .as-service-card p {
    text-align: left;
    text-justify: auto;
  }

  /* ---------------------------------------------------------
     ASSISTÊNCIA E BENEFÍCIOS
     Um card abaixo do outro, conforme solicitado.
     --------------------------------------------------------- */
  .as-service-page.as-blog-hub-page
  section[aria-labelledby="beneficios-auto"]
  .as-service-card-grid {
    width: 100%;
    grid-template-columns: 1fr !important;
    gap: 18px;
  }

  .as-service-page.as-blog-hub-page
  section[aria-labelledby="beneficios-auto"]
  .as-service-card {
    width: 100%;
    min-height: 132px;
    padding: 28px 30px;
  }

  /* ---------------------------------------------------------
     SEÇÕES TEXTUAIS FINAIS — MESMO EIXO DE MARGENS
     --------------------------------------------------------- */
  .as-service-page.as-blog-hub-page
  section[aria-labelledby="vale-a-pena-moto"] > .as-container.as-reading,
  .as-service-page.as-blog-hub-page
  section[aria-labelledby="conceitos-conectados"] > .as-container.as-reading,
  .as-service-page.as-blog-hub-page
  section[aria-labelledby="como-produzimos-blog"] > .as-container.as-reading,
  .as-service-page.as-blog-hub-page
  section[aria-labelledby="atualizacao-conteudos"] > .as-container.as-reading {
    width: min(calc(100% - 48px), var(--as-container)) !important;
    max-width: var(--as-container) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .as-service-page.as-blog-hub-page
  section[aria-labelledby="vale-a-pena-moto"] > .as-container.as-reading > *,
  .as-service-page.as-blog-hub-page
  section[aria-labelledby="conceitos-conectados"] > .as-container.as-reading > *,
  .as-service-page.as-blog-hub-page
  section[aria-labelledby="como-produzimos-blog"] > .as-container.as-reading > *,
  .as-service-page.as-blog-hub-page
  section[aria-labelledby="atualizacao-conteudos"] > .as-container.as-reading > * {
    max-width: none;
  }
}

/* =========================================================
   BLOG HUB — MINIATURA AUTOMÁTICA DOS POSTS RECENTES
   A imagem é gerada pelo functions.php a partir do Hero do post.
   ========================================================= */
.as-service-page.as-blog-hub-page
.as-blog-recent
.as-blog-recent-thumb {
  display: block;
  width: 100%;
  margin: 0 0 18px;
  overflow: hidden;
  aspect-ratio: 6 / 5;
  border-radius: 14px;
  background: var(--as-ice);
  text-decoration: none;
}

.as-service-page.as-blog-hub-page
.as-blog-recent
.as-blog-recent-thumb__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .2s ease;
}

.as-service-page.as-blog-hub-page
.as-blog-recent
.as-service-card:hover
.as-blog-recent-thumb__image {
  transform: scale(1.015);
}

.as-service-page.as-blog-hub-page
.as-blog-recent
.wp-block-post-template > li {
  min-width: 0;
}

.as-service-page.as-blog-hub-page
.as-blog-recent
.wp-block-post-template > li > .as-service-card {
  height: 100%;
}


/* =========================================================
   PÁGINAS COMERCIAIS — COMPOSIÇÃO PROTECTION EM DESKTOP
   Escopo estrito:
   - Seguro contra Terceiros: título + imagem à esquerda + texto à direita
   - Seguro Moto: título + imagem à esquerda + texto à direita
   - Seguro Auto: título + imagem à esquerda + 3 cards à direita
   Tablet e mobile permanecem com o fluxo atual.
   ========================================================= */
@media (min-width: 981px) {

  /* ---------------------------------------------------------
     SEGURO CONTRA TERCEIROS
     "Quanto contratar de cobertura para terceiros?"
     --------------------------------------------------------- */
  .as-service-terceiros
  section[aria-labelledby="limites-seguro-terceiros"]
  > .as-container.as-reading {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    column-gap: 64px;
    row-gap: 18px;
    align-items: start;
    width: min(calc(100% - 48px), var(--as-container));
    max-width: var(--as-container);
  }

  .as-service-terceiros
  section[aria-labelledby="limites-seguro-terceiros"]
  > .as-container.as-reading
  > h2 {
    grid-column: 1 / -1;
    margin-bottom: 18px;
  }

  .as-service-terceiros
  section[aria-labelledby="limites-seguro-terceiros"]
  > .as-container.as-reading
  > p {
    grid-column: 2;
    margin: 0;
  }

  .as-service-terceiros
  section[aria-labelledby="limites-seguro-terceiros"]
  > .as-container.as-reading
  > .as-service-media--protection {
    grid-column: 1;
    grid-row: 2 / span 4;
    align-self: start;
    width: 100%;
    max-width: none;
    margin: 0;
    aspect-ratio: 4 / 3;
  }

  .as-service-terceiros
  section[aria-labelledby="limites-seguro-terceiros"]
  > .as-container.as-reading
  > .as-service-steps {
    grid-column: 1 / -1;
    margin-top: 34px;
  }

  /* ---------------------------------------------------------
     SEGURO MOTO
     "Nem todo seguro de moto oferece a mesma proteção"
     --------------------------------------------------------- */
  .as-service-moto
  section[aria-labelledby="formas-protecao-seguro-moto"]
  > .as-container.as-reading {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    column-gap: 64px;
    row-gap: 18px;
    align-items: start;
    width: min(calc(100% - 48px), var(--as-container));
    max-width: var(--as-container);
  }

  .as-service-moto
  section[aria-labelledby="formas-protecao-seguro-moto"]
  > .as-container.as-reading
  > h2 {
    grid-column: 1 / -1;
    margin-bottom: 18px;
  }

  .as-service-moto
  section[aria-labelledby="formas-protecao-seguro-moto"]
  > .as-container.as-reading
  > p {
    grid-column: 2;
    margin: 0;
  }

  .as-service-moto
  section[aria-labelledby="formas-protecao-seguro-moto"]
  > .as-container.as-reading
  > .as-service-media--protection {
    grid-column: 1;
    grid-row: 2 / span 4;
    align-self: start;
    width: 100%;
    max-width: none;
    margin: 0;
    aspect-ratio: 4 / 3;
  }

  /* ---------------------------------------------------------
     SEGURO AUTO
     "Nem todo Seguro Auto precisa ser igual"
     --------------------------------------------------------- */
  .as-service-auto
  section[aria-labelledby="tipos-protecao-auto"]
  > .as-container {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    column-gap: 56px;
    row-gap: 30px;
    align-items: stretch;
  }

  .as-service-auto
  section[aria-labelledby="tipos-protecao-auto"]
  > .as-container
  > .as-reading {
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .as-service-auto
  section[aria-labelledby="tipos-protecao-auto"]
  > .as-container
  > .as-service-media--protection {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    width: 100%;
    max-width: none;
    margin: 0;
    aspect-ratio: 4 / 3;
  }

  .as-service-auto
  section[aria-labelledby="tipos-protecao-auto"]
  > .as-container
  > .as-service-card-grid--3 {
    grid-column: 2;
    grid-row: 2;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-self: stretch;
    width: 100%;
    margin: 0;
  }

  .as-service-auto
  section[aria-labelledby="tipos-protecao-auto"]
  > .as-container
  > .as-service-card-grid--3
  > .as-service-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
    height: 100%;
    padding: 22px 24px;
  }
}

/* =========================================================
   POLÍTICA DE PRIVACIDADE — CORREÇÃO PONTUAL DE OVERFLOW
   Escopo exclusivo: body.page-id-298
   Mantém o círculo decorativo do Hero contido pela própria seção,
   eliminando a rolagem horizontal sem afetar outras páginas.
   ========================================================= */
body.page-id-298 .as-service-hero {
  position: relative;
}
/* =========================================================
   BLOG HUB — RESPONSIVO INTERMEDIÁRIO
   Base: service-page.css atual recebido em 12/09/2026.
   Escopo exclusivo: /blog/ + seção "O que você quer entender sobre seguros?"
   Preserva:
   - mobile aprovado até 620px (inclui 390 x 844);
   - desktop grande aprovado a partir de 1600px.
   Objetivo entre 621px e 1599px:
   - repetir as cores aprovadas do desktop;
   - manter Auto/Moto uniformes e proporcionais;
   - distribuir os 8 atalhos sem item isolado;
   - adaptar largura e espaçamento à viewport.
   ========================================================= */
@media (min-width: 621px) and (max-width: 1599px) {

  /* Libera somente esta seção do limite editorial estreito. */
  .as-service-page.as-blog-hub-page
  section[aria-labelledby="assunto-seguro"] > .as-container,
  .as-service-page.as-blog-hub-page
  section[aria-labelledby="assunto-seguro"] > .as-container.as-reading {
    width: min(calc(100% - 48px), var(--as-container)) !important;
    max-width: var(--as-container) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
  }

  .as-service-page.as-blog-hub-page
  section[aria-labelledby="assunto-seguro"] > .as-container > .as-reading {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Auto + Moto: duas colunas iguais, com alturas uniformes. */
  .as-service-page.as-blog-hub-page
  section[aria-labelledby="assunto-seguro"]
  .as-service-card-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 1fr;
    gap: clamp(16px, 1.7vw, 24px) !important;
    width: 100% !important;
    align-items: stretch !important;
  }

  .as-service-page.as-blog-hub-page
  section[aria-labelledby="assunto-seguro"]
  .as-service-card {
    min-width: 0 !important;
    min-height: clamp(170px, 15vw, 210px) !important;
    height: 100% !important;
    padding: clamp(24px, 2.4vw, 36px) clamp(22px, 2.2vw, 32px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  /* Mesmas cores já aprovadas no desktop. */
  .as-service-page.as-blog-hub-page
  section[aria-labelledby="assunto-seguro"]
  .as-service-card-grid > .as-service-card:nth-child(1) {
    background: var(--as-navy) !important;
    border-color: var(--as-navy) !important;
    box-shadow: 0 18px 42px rgba(16,42,67,.14) !important;
  }

  .as-service-page.as-blog-hub-page
  section[aria-labelledby="assunto-seguro"]
  .as-service-card-grid > .as-service-card:nth-child(1) h3 {
    color: var(--as-white) !important;
  }

  .as-service-page.as-blog-hub-page
  section[aria-labelledby="assunto-seguro"]
  .as-service-card-grid > .as-service-card:nth-child(1) p {
    color: rgba(255,255,255,.82) !important;
  }

  .as-service-page.as-blog-hub-page
  section[aria-labelledby="assunto-seguro"]
  .as-service-card-grid > .as-service-card:nth-child(2) {
    background: var(--as-soft-teal) !important;
    border-color: rgba(15,157,138,.30) !important;
    box-shadow: 0 18px 42px rgba(15,157,138,.09) !important;
  }

  .as-service-page.as-blog-hub-page
  section[aria-labelledby="assunto-seguro"]
  .as-service-card-grid > .as-service-card:nth-child(2) h3 {
    color: var(--as-navy) !important;
  }

  .as-service-page.as-blog-hub-page
  section[aria-labelledby="assunto-seguro"]
  .as-service-card-grid > .as-service-card:nth-child(2) p {
    color: var(--as-slate) !important;
  }

  .as-service-page.as-blog-hub-page
  section[aria-labelledby="assunto-seguro"]
  .as-service-card h3 {
    font-size: clamp(1.16rem, 1.8vw, 1.34rem) !important;
    margin-bottom: 4px !important;
  }

  .as-service-page.as-blog-hub-page
  section[aria-labelledby="assunto-seguro"]
  .as-service-card p {
    text-align: left !important;
    text-justify: auto !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
  }

  /* Atalhos uniformes. A quantidade de colunas muda na regra seguinte. */
  .as-service-page.as-blog-hub-page
  section[aria-labelledby="assunto-seguro"]
  .as-button-row {
    display: grid !important;
    gap: 14px !important;
    width: 100% !important;
    margin-top: 32px !important;
    align-items: stretch !important;
  }

  .as-service-page.as-blog-hub-page
  section[aria-labelledby="assunto-seguro"]
  .as-button-row .as-button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 58px !important;
    height: 100% !important;
    padding: 14px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
    line-height: 1.25 !important;
    border-radius: 12px !important;
  }
}

/* Tablet/intermediário estreito: 2 colunas x 4 linhas nos atalhos. */
@media (min-width: 621px) and (max-width: 820px) {
  .as-service-page.as-blog-hub-page
  section[aria-labelledby="assunto-seguro"] > .as-container,
  .as-service-page.as-blog-hub-page
  section[aria-labelledby="assunto-seguro"] > .as-container.as-reading {
    width: min(calc(100% - 36px), var(--as-container)) !important;
  }

  .as-service-page.as-blog-hub-page
  section[aria-labelledby="assunto-seguro"]
  .as-button-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Tablet largo + notebook intermediário: 4 colunas x 2 linhas. */
@media (min-width: 821px) and (max-width: 1599px) {
  .as-service-page.as-blog-hub-page
  section[aria-labelledby="assunto-seguro"]
  .as-button-row {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* =========================================================
   HERO INTERNO — PADRÃO DEFINITIVO DE DESKTOP
   Referência visual aprovada: Seguro Auto.
   Escopo: páginas internas e artigos que utilizam .as-service-hero.
   Objetivo:
   - manter o mesmo respiro vertical no desktop;
   - alinhar o topo do texto ao topo da imagem;
   - impedir que Heroes com textos mais curtos sejam centralizados
     verticalmente e pareçam deslocados;
   - preservar tablet e mobile sem alteração.
   ========================================================= */
@media (min-width: 981px) {
  .as-service-page .as-service-hero {
    padding-top: 94px !important;
    padding-bottom: 88px !important;
  }

  .as-service-page
  .as-service-hero
  > .as-container:has(.as-service-media--hero) {
    align-items: start !important;
  }

  .as-service-page
  .as-service-hero
  > .as-container:has(.as-service-media--hero)
  > .as-service-hero-copy,
  .as-service-page
  .as-service-hero
  > .as-container:has(.as-service-media--hero)
  > .as-service-media--hero {
    align-self: start !important;
  }
}