/*
  PAGES/HOME.CSS
  Estilos exclusivos de index.html: hero, barra de acesso rápido sobreposta,
  seção institucional, Agende Fácil e grade de artigos.
*/

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: var(--espaco-10);
  /* espaço extra embaixo para a barra de acesso rápido sobrepor o hero */
  padding-bottom: calc(var(--espaco-12) + var(--espaco-5));
}

@media (min-width: 992px) {
  .hero {
    padding-top: var(--espaco-11);
    padding-bottom: calc(var(--espaco-12) + var(--espaco-9));
  }
}

.hero .media-foto {
  position: absolute;
  inset: 0;
  height: 100%;
  border-radius: 0;
  z-index: 0;
}

/* O overlay padrão de .media-foto--overlay escurece só a base da imagem
   (pensado para legenda no rodapé de um card). Aqui o texto ocupa a coluna
   esquerda, do topo até os botões — então o overlay é mais forte à esquerda
   e mais fraco à direita, em diagonal, deixando a foto respirar do lado sem
   texto. Contraste no pior ponto da coluna de texto: ~4,6:1. */
.hero .media-foto--overlay::after {
  background:
    linear-gradient(115deg,
      rgba(43, 42, 40, 0.95) 0%,
      rgba(43, 42, 40, 0.89) 32%,
      rgba(43, 42, 40, 0.65) 58%,
      rgba(43, 42, 40, 0.35) 80%,
      rgba(43, 42, 40, 0.24) 100%
    );
}

@media (max-width: 767px) {
  /* Em telas estreitas o texto ocupa quase toda a largura — escurece por
     igual em vez de depender do gradiente diagonal. */
  .hero .media-foto--overlay::after {
    background: linear-gradient(180deg, rgba(43, 42, 40, 0.88) 0%, rgba(43, 42, 40, 0.74) 100%);
  }
}

.hero__conteudo {
  position: relative;
  z-index: 1;
  max-width: 660px;
}

.hero__titulo {
  color: var(--cor-branco);
  margin-block: var(--espaco-4) var(--espaco-5);
}

.hero__lead {
  color: rgba(255, 255, 255, 0.86);
  margin-bottom: var(--espaco-7);
  max-width: 560px;
}

.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-3);
}

/* Linha de confiança abaixo dos botões */
.hero__confianca {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-3) var(--espaco-6);
  margin-top: var(--espaco-7);
  padding-top: var(--espaco-5);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: var(--texto-pequeno);
  color: rgba(255, 255, 255, 0.86);
}

.hero__confianca li {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
}

.hero__confianca .icon {
  width: 18px;
  height: 18px;
  color: var(--cor-amarelo);
}

/* ==========================================================================
   Seção de serviços + barra de acesso rápido
   A barra fica no topo desta seção e é puxada para cima, sobre o hero.
   display: flow-root impede que a margem negativa "vaze" para a seção
   (margin collapsing) e arraste o fundo cinza por cima da foto.
   ========================================================================== */
.secao-servicos {
  display: flow-root;
  padding-top: 0;
}

.acesso-rapido {
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * var(--espaco-10));
  margin-bottom: var(--espaco-secao);
  display: grid;
  grid-template-columns: 1fr;
  background: var(--cor-branco);
  border: 1px solid var(--cor-neutro-200);
  border-radius: var(--raio-lg);
  box-shadow: 0 18px 40px rgba(43, 42, 40, 0.12);
  /* recorta o fundo do hover dos itens nos cantos arredondados */
  overflow: hidden;
}

@media (min-width: 576px) {
  .acesso-rapido { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1200px) {
  .acesso-rapido { grid-template-columns: repeat(4, 1fr); }
}

.acesso-rapido__item {
  display: flex;
  align-items: center;
  gap: var(--espaco-4);
  padding: var(--espaco-5);
  border-bottom: 1px solid var(--cor-neutro-200);
  transition: background-color var(--transicao-padrao);
}

.acesso-rapido__item:last-child { border-bottom: none; }

@media (min-width: 576px) {
  .acesso-rapido__item:nth-child(odd) { border-right: 1px solid var(--cor-neutro-200); }
  .acesso-rapido__item:nth-last-child(-n + 2) { border-bottom: none; }
}

@media (min-width: 1200px) {
  .acesso-rapido__item {
    border-bottom: none;
    border-right: 1px solid var(--cor-neutro-200);
    gap: var(--espaco-3);
    padding: var(--espaco-6) var(--espaco-4) var(--espaco-6) var(--espaco-5);
  }
  .acesso-rapido__item:last-child { border-right: none; }
}

.acesso-rapido__item:hover {
  background-color: var(--cor-laranja-50);
}

.acesso-rapido__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: var(--raio-md);
  background-color: var(--cor-laranja-50);
  color: var(--cor-laranja);
  transition: background-color var(--transicao-padrao), color var(--transicao-padrao);
}

.acesso-rapido__item:hover .acesso-rapido__icone {
  background-color: var(--cor-laranja);
  color: var(--cor-branco);
}

.acesso-rapido__titulo {
  display: block;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-bold);
  font-size: 1rem;
  color: var(--cor-neutro-900);
}

.acesso-rapido__descricao {
  display: block;
  font-size: var(--texto-pequeno);
  color: var(--cor-texto-secundario);
}

.acesso-rapido__seta {
  margin-left: auto;
  width: 18px;
  height: 18px;
  color: var(--cor-neutro-400);
  transition: transform var(--transicao-padrao), color var(--transicao-padrao);
}

.acesso-rapido__item:hover .acesso-rapido__seta {
  transform: translateX(3px);
  color: var(--cor-laranja);
}

/* 4 colunas ainda estreitas: a seta tira o espaço que o texto precisa */
@media (min-width: 1200px) and (max-width: 1359px) {
  .acesso-rapido__seta { display: none; }
}

/* ==========================================================================
   Seção institucional (fundo escuro, duas colunas)
   ========================================================================== */
.institucional {
  display: grid;
  gap: var(--espaco-9);
  align-items: center;
}

@media (min-width: 992px) {
  .institucional {
    grid-template-columns: 1.05fr 1fr;
    gap: var(--espaco-11);
  }
}

.institucional h2 { margin-top: var(--espaco-3); }

.institucional .text-lead { margin-top: var(--espaco-4); }

.institucional__selos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espaco-3);
  margin-block: var(--espaco-6);
}

@media (min-width: 576px) {
  .institucional__selos { grid-template-columns: repeat(2, 1fr); }
}

.institucional__rhei {
  padding-left: var(--espaco-4);
  border-left: 3px solid var(--cor-amarelo);
  font-size: var(--texto-pequeno);
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: var(--espaco-7);
}

.institucional__rhei strong { color: var(--cor-branco); }

.institucional__imagem {
  position: relative;
}

.institucional__imagem .media-foto {
  height: 360px;
}

@media (min-width: 992px) {
  .institucional__imagem .media-foto { height: 480px; }
}

/* Moldura decorativa atrás da foto */
.institucional__imagem::before {
  content: "";
  position: absolute;
  inset: var(--espaco-5) calc(-1 * var(--espaco-5)) calc(-1 * var(--espaco-5)) var(--espaco-5);
  border: 1.5px solid rgba(242, 203, 19, 0.35);
  border-radius: var(--raio-lg);
  pointer-events: none;
}

@media (max-width: 575px) {
  .institucional__imagem::before { display: none; }
}

/* ==========================================================================
   Agende Fácil
   ========================================================================== */
.agende-facil {
  display: grid;
  gap: var(--espaco-8);
  align-items: center;
}

@media (min-width: 992px) {
  .agende-facil {
    grid-template-columns: 1fr 1.1fr;
    gap: var(--espaco-11);
  }
}

.agende-facil h2 { margin-top: var(--espaco-3); }

.agende-facil .text-lead { margin-block: var(--espaco-4) var(--espaco-6); }

.agende-facil__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-3);
}

.agende-facil__nota {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  margin-top: var(--espaco-5);
  font-size: var(--texto-pequeno);
  color: var(--cor-texto-secundario);
}

.agende-facil__nota .icon {
  width: 18px;
  height: 18px;
  color: var(--cor-sucesso);
}