/* ==========================================================================
   main.css  .  Safira Base  .  Carregado sem bloquear render (preload+onload).
   Contem tudo abaixo da dobra: componentes, grades de secao, footer.
   Depende das custom properties definidas em tokens.css (inline no <head>).
   ========================================================================== */

/* ---- Utilitarios ---- */
.secao--fundo { background: var(--cor-superficie-dest); }
.texto-apoio { color: var(--cor-texto-sec); }
.centro { text-align: center; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---- Cartao generico ---- */
.card {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-12);
  padding: var(--e-24);
}
.card--link { transition: box-shadow .15s ease, transform .15s ease; }
.card--link:hover { box-shadow: var(--sombra-1); transform: translateY(-2px); }

/* Chips e selos ficam no critical.css (acima da dobra no hero). */

/* ---- Grade de coberturas / vantagens ---- */
.grade-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-24); }
.grade-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-24); }
@media (max-width: 1024px) { .grade-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .grade-3, .grade-2 { grid-template-columns: 1fr; } }

.item-icone { display: flex; gap: var(--e-16); }
.item-icone__icone {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: var(--raio-8);
  display: grid; place-items: center; background: var(--cor-azul-50); color: var(--cor-acao-sec);
  font-weight: 700;
}
.item-icone__titulo { font-weight: 600; margin: 0 0 var(--e-8); color: var(--cor-texto); }

/* ---- Modalidades (cards simples, usados em cidade e archive) ---- */
.modalidades { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-24); }
@media (max-width: 1024px) { .modalidades { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .modalidades { grid-template-columns: 1fr; } }
.modalidade__titulo { font: var(--t-titulo-p); margin-bottom: var(--e-8); }
.modalidade__link { font-weight: 600; }

/* ---- Secao "Seguros que a SegCerto oferece" (home, fiel ao Figma) ---- */
.seg-section {
  padding-block: var(--e-80);
  background: linear-gradient(179deg, #f8fbff 36%, var(--cor-azul-50) 106%);
}
.seg-cabecalho { display: flex; flex-direction: column; gap: var(--e-16); margin-bottom: var(--e-40); }
.seg-eyebrow { font: var(--t-legenda); font-weight: 600; text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--cor-acao-hover); }
.seg-cabecalho h2 { margin: 0; }
.seg-apoio { font: var(--t-corpo); color: var(--cor-texto-sec); max-width: 80ch; margin: 0; }

.seg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-24); }
@media (max-width: 1024px) { .seg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .seg-grid { grid-template-columns: 1fr; } }

.modalidade-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--cor-borda); border-radius: var(--raio-12); box-shadow: var(--sombra-1); overflow: visible; }
.modalidade-card__head { display: flex; align-items: center; gap: var(--e-8); }
.modalidade-card__icone { display: none; } /* so aparece no mobile (card compacto) */
.modalidade-card__titulo a { color: inherit; text-decoration: none; }
.modalidade-card__titulo a:hover { color: var(--cor-acao-sec); }
.modalidade-card__foto { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--raio-12) var(--raio-12) 0 0; background: linear-gradient(120deg, var(--cor-marca), var(--cor-azul-700)); }
.modalidade-card__foto img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--raio-12) var(--raio-12) 0 0; }
.modalidade-card__badge { position: absolute; left: var(--e-24); bottom: -16px; width: 44px; height: 44px; border-radius: var(--raio-8); background: #fff; border: 1px solid var(--cor-borda); box-shadow: var(--sombra-1); display: grid; place-items: center; color: var(--cor-acao-sec); }
.modalidade-card__badge svg { width: 24px; height: 24px; }
.modalidade-card__body { display: flex; flex-direction: column; gap: var(--e-16); padding: var(--e-32) var(--e-24) var(--e-24); flex: 1; }
.modalidade-card__titulo { font: var(--t-titulo-p); color: var(--cor-texto); margin: 0; }
.modalidade-card__desc { font: var(--t-corpo-p); color: var(--cor-texto-sec); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.modalidade-card__link { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: var(--e-8); height: 48px; border-radius: var(--raio-8); background: var(--cor-superficie-dest); color: var(--cor-acao-sec); font: var(--t-corpo); font-weight: 600; }
.modalidade-card__link:hover { background: #e0ebfb; color: var(--cor-acao-sec); text-decoration: none; }
.modalidade-card__link svg { width: 18px; height: 18px; }

.outros-ramos { display: flex; align-items: center; gap: var(--e-16); background: #fff; border: 1px solid var(--cor-borda); border-radius: var(--raio-12); padding: var(--e-16) var(--e-24); margin-top: var(--e-40); }
.outros-ramos p { margin: 0; font: var(--t-corpo); font-weight: 600; color: var(--cor-texto); flex: 1; }
.btn--ramos { flex: 0 0 auto; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--e-16); border-radius: var(--raio-8); background: var(--cor-acao-sec-hover); color: #fff; font: var(--t-corpo); font-weight: 600; }
.btn--ramos:hover { background: var(--cor-marca); color: #fff; text-decoration: none; }

/* ---- Variante mobile da secao de seguros (fiel ao Figma mobile) ----
   Cards compactos: so icone + titulo, 2 colunas, fundo solido, faixa empilhada. */
@media (max-width: 768px) {
  .seg-section { background: var(--cor-azul-50); padding-block: 3rem; }
  .seg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-12); }

  .modalidade-card { flex-direction: row; align-items: center; min-height: 56px; padding: var(--e-12); gap: var(--e-8); overflow: hidden; }
  .modalidade-card__foto { display: none; }
  .modalidade-card__body { flex-direction: row; align-items: center; gap: var(--e-8); padding: 0; }
  .modalidade-card__head { flex: 1; }
  .modalidade-card__icone { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto; border-radius: var(--raio-8); background: var(--cor-azul-50); color: var(--cor-acao-sec); }
  .modalidade-card__icone svg { width: 24px; height: 24px; }
  .modalidade-card__titulo { font: var(--t-corpo-p); font-weight: 500; }
  .modalidade-card__titulo a::after { content: ""; position: absolute; inset: 0; } /* card inteiro clicavel */
  .modalidade-card__desc, .modalidade-card__link { display: none; }

  .outros-ramos { flex-direction: column; align-items: flex-start; gap: var(--e-8); padding: var(--e-16); }
  .outros-ramos p { font-weight: 400; color: var(--cor-texto-sec); }
  .btn--ramos { background: transparent; color: var(--cor-acao-sec); height: auto; padding: 0; }
  .btn--ramos:hover { background: transparent; color: var(--cor-acao-sec-hover); }
}
@media (max-width: 360px) {
  .seg-grid { grid-template-columns: 1fr; }
}

/* ---- Fatores de preco ---- */
.fatores { display: grid; grid-template-columns: 440px 1fr; gap: var(--e-64); }
@media (max-width: 1024px) { .fatores { grid-template-columns: 1fr; gap: var(--e-32); } }
.fator { padding-block: var(--e-24); border-top: 1px solid var(--cor-borda); }
.fator:first-child { border-top: 0; }
.fator__titulo { font-weight: 600; margin-bottom: var(--e-8); }

/* ---- Como funciona (passos) ---- */
.passos { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e-24); }
@media (max-width: 900px) { .passos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .passos { grid-template-columns: 1fr; } }
.passo__num {
  display: inline-grid; place-items: center; width: 40px; height: 40px;
  border-radius: 999px; background: var(--cor-marca); color: #fff; font-weight: 700;
  margin-bottom: var(--e-16);
}

/* ---- Modelos de veiculo (links) ---- */
.modelos { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e-16); }
@media (max-width: 900px) { .modelos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .modelos { grid-template-columns: 1fr; } }
.modelo-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--e-16) var(--e-24); border: 1px solid var(--cor-borda);
  border-radius: var(--raio-8); font-weight: 600; color: var(--cor-texto);
  background: var(--cor-superficie);
}
.modelo-link:hover { border-color: var(--cor-acao-sec); color: var(--cor-acao-sec); text-decoration: none; }

/* ---- Onde atendemos (cidades) ---- */
.cidades-lista { display: flex; flex-wrap: wrap; gap: var(--e-12); }
.cidade-chip {
  display: inline-flex; align-items: center; gap: var(--e-8);
  padding: var(--e-12) var(--e-16); border: 1px solid var(--cor-borda);
  border-radius: var(--raio-8); font-weight: 500; color: var(--cor-texto);
}
.cidade-chip:hover { border-color: var(--cor-acao-sec); color: var(--cor-acao-sec); text-decoration: none; }

/* ---- Prova social (avaliacoes) ---- */
.avaliacoes {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(360px, 1fr);
  gap: var(--e-24); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: var(--e-16); scrollbar-width: thin;
}
.avaliacao { scroll-snap-align: start; }
.avaliacao__nota { color: #e8a500; font-weight: 700; letter-spacing: 2px; margin-bottom: var(--e-12); }
.avaliacao__texto { color: var(--cor-texto-sec); }
.avaliacao__autor { font-weight: 600; margin-top: var(--e-16); }
.carrossel-nav { display: inline-flex; gap: var(--e-12); }
.carrossel-nav button {
  width: 48px; height: 48px; border-radius: 999px; border: 1px solid var(--cor-borda);
  background: var(--cor-superficie); cursor: pointer; font-size: 1.25rem; color: var(--cor-marca);
}
.carrossel-nav button:hover { border-color: var(--cor-acao-sec); color: var(--cor-acao-sec); }

/* ---- Faixa de contato (corretor) ---- */
.faixa-contato {
  display: grid; grid-template-columns: 88px 1fr auto; gap: var(--e-24);
  align-items: center; background: var(--cor-superficie-dest);
  border-radius: var(--raio-12); padding: var(--e-32);
}
.faixa-contato__avatar { width: 88px; height: 88px; border-radius: 999px; object-fit: cover; }
@media (max-width: 768px) {
  .faixa-contato { grid-template-columns: 1fr; text-align: center; }
  .faixa-contato__avatar { margin-inline: auto; }
}

/* ---- FAQ (acordeao) ---- */
.faq { display: grid; grid-template-columns: 420px 1fr; gap: var(--e-64); }
@media (max-width: 1024px) { .faq { grid-template-columns: 1fr; gap: var(--e-32); } }
.faq-item { border-bottom: 1px solid var(--cor-borda); }
.faq-item__botao {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--e-16);
  background: none; border: 0; padding: var(--e-24) 0; cursor: pointer;
  font: var(--t-titulo-p); color: var(--cor-texto); text-align: left;
}
.faq-item__sinal { flex: 0 0 auto; font-size: 1.5rem; color: var(--cor-acao-sec); line-height: 1; }
.faq-item__resposta {
  overflow: hidden; max-height: 0; transition: max-height .25s ease;
}
.faq-item__resposta > div { padding-bottom: var(--e-24); color: var(--cor-texto-sec); }
.faq-item[aria-expanded="true"] .faq-item__resposta { max-height: 40rem; }

.faq-box {
  background: var(--cor-marca); color: #fff; border-radius: var(--raio-12); padding: var(--e-32);
}
.faq-box h3, .faq-box p { color: #fff; }

/* ---- Veja tambem ---- */
.veja-tambem { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-24); }
@media (max-width: 900px) { .veja-tambem { grid-template-columns: 1fr; } }

/* ---- Seguradoras parceiras ---- */
.seguradoras { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--e-40); }
.seguradoras img { height: 44px; width: auto; filter: grayscale(1); opacity: .75; transition: filter .2s, opacity .2s; }
.seguradoras img:hover { filter: none; opacity: 1; }

/* ---- Footer ---- */
.site-footer { background: var(--cor-marca); color: #cfe0f7; margin-top: var(--e-80); }
.site-footer a { color: #cfe0f7; }
.site-footer a:hover { color: #fff; }
.site-footer__grid { display: grid; grid-template-columns: 320px repeat(4, 1fr); gap: var(--e-40); padding-block: var(--e-64); }
.site-footer__col h4 { color: #fff; font: var(--t-corpo-p); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-eyebrow); }
.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-12); }
.site-footer__marca img { height: 56px; }
.site-footer__legal { border-top: 1px solid rgba(255,255,255,.15); padding-block: var(--e-24); display: flex; justify-content: space-between; gap: var(--e-16); font: var(--t-corpo-p); }
@media (max-width: 1024px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__legal { flex-direction: column; }
}

/* ---- Menu mobile (off-canvas) ---- */
.menu-mobile {
  position: fixed; inset: 0 0 0 auto; width: min(86vw, 360px);
  background: var(--cor-superficie); box-shadow: -8px 0 24px rgba(8,47,115,.12);
  transform: translateX(100%); transition: transform .25s ease; z-index: 100;
  padding: var(--e-24); overflow-y: auto;
}
.menu-mobile[aria-hidden="false"] { transform: translateX(0); }
.menu-mobile ul { list-style: none; margin: var(--e-24) 0 0; padding: 0; display: grid; gap: var(--e-8); }
.menu-mobile a { display: block; padding: var(--e-12) 0; color: var(--cor-texto); font-weight: 500; font-size: 1.125rem; }
.menu-mobile__fechar { background: none; border: 0; font-size: 1.75rem; cursor: pointer; float: right; color: var(--cor-texto); }
.menu-backdrop {
  position: fixed; inset: 0; background: rgba(8,47,115,.4); opacity: 0; visibility: hidden;
  transition: opacity .25s ease; z-index: 99;
}
.menu-backdrop[aria-hidden="false"] { opacity: 1; visibility: visible; }

/* ---- Conteudo de post (blog) ---- */
.post-conteudo { max-width: 46rem; margin-inline: auto; }
.post-conteudo h2, .post-conteudo h3 { margin-top: var(--e-40); }
.post-conteudo img { border-radius: var(--raio-12); margin-block: var(--e-24); }

/* ---- Acessibilidade: foco visivel ---- */
:focus-visible { outline: 3px solid var(--cor-acao-sec); outline-offset: 2px; border-radius: 2px; }

/* ---- Respeita reducao de movimento ---- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}