/* ============================================================
   Dúvidas frequentes — estilos exclusivos desta página
   ============================================================ */

/* ---------- cabeçalho — fundo simples com o ícone de interrogação (mesmo elemento usado no teaser do index) ---------- */
.duvidas-hero-bg{
  position:relative; overflow:hidden;
  padding:80px 0 84px;
  background-color:var(--paper);
  background-image:linear-gradient(180deg, var(--paper) 0%, var(--paper) 80%, var(--paper-deep) 100%);
}
.duvidas-hero-bg::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  right:-60px; top:calc(50% - 300px); height:470px;
  width:630px;
  background-image:url('../img/decor-interrogacao-duvidas.png');
  background-size:contain; background-repeat:no-repeat; background-position:top center;
  opacity:.16;
  -webkit-mask-image: radial-gradient(circle at 62% 44%, #000 0%, #000 38%, rgba(0,0,0,.55) 58%, transparent 78%);
          mask-image: radial-gradient(circle at 62% 44%, #000 0%, #000 38%, rgba(0,0,0,.55) 58%, transparent 78%);
}
.duvidas-hero-bg .container{ position:relative; z-index:1; }
@media (max-width:900px){
  .duvidas-hero-bg::before{ width:430px; top:calc(38% - 215px); height:340px; right:25px; }
}
@media (max-width:520px){
  .duvidas-hero-bg{ padding:28px 0 48px; }
  .duvidas-hero-bg::before{ width:320px; top:calc(58% - 165px); height:255px; right:0; opacity:.17; }
}

/* ---------- seção de perguntas — parede em tom terracota, para combinar com o creme da ilustração do hero ---------- */
.duvidas-faq-section{
  position:relative;
  padding:24px 0 88px;
  background-color:var(--paper-deep);
  background-image:
    linear-gradient(180deg, var(--paper-deep) 0%, rgba(238,226,208,.7) 18%, rgba(246,240,230,.86) 48%, var(--paper) 100%),
    url('../img/textura-parede-bege.jpg');
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
}
.duvidas-faq-card{
  background:var(--cream);
  border:2px solid var(--ink);
  border-radius:16px;
  padding:.5rem 2rem;
  box-shadow:8px 8px 0 var(--terracotta);
}
@media (max-width:640px){
  .duvidas-faq-card{ padding:.25rem 1.25rem; border-radius:16px; box-shadow:5px 5px 0 var(--terracotta); }
}