/* =========================================================
   G.O.S. – Áreas de Atuação (simples, elegante, sem JS extra)
   ========================================================= */

.s-areas{
  --bg:#0d1d34;          /* fundo da seção */
  --gold:#e7b440;        /* dourado */
  --gold-deep:#b48714;   /* dourado mais escuro */
  --text:#fff;
  background:var(--bg);
  color:var(--text);
  padding:0;             /* sem padding embaixo pra não sobrar faixa */
  box-sizing:border-box;
}

/* Cabeçalho */
.s-areas .areas-header{
  text-align:center; padding:56px 20px 28px; margin:0;
}
.s-areas .areas-title{
  color:#fff; font-weight:800; margin:0 0 10px;
  font-size:clamp(1.8rem,1.1rem + 1.6vw,2.4rem); letter-spacing:.3px;
  position:relative; display:inline-block;
}
.s-areas .areas-title::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  bottom:-10px; height:6px; width:84px; border-radius:999px; background:var(--gold);
  transition:width .25s ease;
}
.s-areas .areas-title:hover::after{ width:122px; }
.s-areas .areas-desc{
  max-width:820px; margin:14px auto 0; color:#fff; opacity:.9;
}

/* Grid colado – sem gaps entre as imagens */
.s-areas .areas-grid{
  display:grid; grid-template-columns:1fr; gap:0; background:#000; margin:0;
}
@media (min-width: 992px){
  .s-areas .areas-grid{ grid-template-columns:repeat(3,1fr); }
}

/* Card */
.s-areas .area-card {
  position:relative; display:block; min-height:560px; margin:0;
  overflow:hidden; isolation:isolate; background:#000;
}
@media (max-width: 991px){
  .s-areas .area-card{ min-height:420px; }
  .s-areas .area-content{
  position:absolute; top: 40% !important; left:0; right:0; bottom:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
  padding:0 24px; margin:0;
  box-sizing:border-box;
}
}

@media (max-width: 720px){
  .s-areas .area-card{ min-height:305px; }
  .s-areas .area-content{
  position:absolute; top: 20% !important; left:0; right:0; bottom:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
  padding:0 24px; margin:0;
  box-sizing:border-box;
}
}

/* Imagem como background (cover) + zoom suave no hover */
.s-areas .area-fig{
  position:absolute; inset:0;
  background: center/cover no-repeat;
  background-image: var(--bg);
  transform: scale(1);
  transition: transform .8s ease;
  will-change:transform;
}
.s-areas .area-card:hover .area-fig{ transform: scale(1.08); }

/* Overlay: normal escuro; no hover, dourado com leve escurecido extra */
.s-areas .area-layer{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to top,
      rgba(0,0,0,.62) 0,
      rgba(0,0,0,.45) 38%,
      rgba(0,0,0,.25) 60%,
      rgba(0,0,0,0) 78%);
  transition: background .3s ease;
}
.s-areas .area-card:hover .area-layer{
  background:
    linear-gradient(to top,
      rgba(180,135,20,.95) 0,
      rgba(180,135,20,.70) 35%,
      rgba(180,135,20,0) 58%),
    linear-gradient(to bottom, rgba(0,0,0,.22), rgba(0,0,0,.22));
}

/* Conteúdo: preso no rodapé, sem gerar espaço extra */
.s-areas .area-content{
  position:absolute; top: 45%; left:0; right:0; bottom:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
  padding:0 24px; margin:0;
  box-sizing:border-box;
}
.s-areas .area-title{
  margin:0; color:#fff; font-weight:800; font-size:1.28rem; line-height:1.2;
  transition:color .25s ease;
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}
.s-areas .area-text{
  margin:0; color:#fff; max-width:540px; transition:color .25s ease;
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}

/* Ícone com seus SVGs via mask (permite trocar a cor no hover) */
.s-areas .area-icon{
  width:28px; height:28px; display:inline-block;
  background-color:#fff; /* ícone branco no estado normal */
  -webkit-mask: var(--ico) no-repeat center / contain;
          mask: var(--ico) no-repeat center / contain;
  transition: background-color .25s ease, transform .25s ease;
}



/* Acessibilidade / preferência do usuário */
@media (prefers-reduced-motion: reduce){
  .s-areas .area-fig{ transition:none }
}