/* =====================================================================
   AHAV · SERVIÇOS (servicos.html)
   Carrega depois de: base.css, modal.css

   ÍNDICE  (mesma ordem da página)
   0. Ajustes da página sobre a base
   1. ABERTURA (título + atalhos)
   2. PRODUTOS DIGITAIS e 3. MARCAS (painéis com lista de serviços)
   4. PROCESSO (etapas coloridas)
   5. PERGUNTAS FREQUENTES
   6. CHAMADA FINAL
   7. Responsivo
   ===================================================================== */


/* ---------------------------------------------------------------------
   0. AJUSTES DA PÁGINA SOBRE A BASE
   --------------------------------------------------------------------- */
/* espaço no topo ao pular para #digitais / #marcas */
.panel{scroll-margin-top:16px}


/* ---------------------------------------------------------------------
   1. ABERTURA
   --------------------------------------------------------------------- */
.page-head{padding-block:72px 80px;display:flex;flex-direction:column;gap:24px;max-width:920px}
.page-head h1 i{color:#6b2ea0}
.page-head .lead{max-width:640px}
/* atalhos "Produtos digitais ↓" e "Marcas ↓" */
.shortcuts{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.ah .chip{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 22px;border-radius:999px;font-weight:700;font-size:15px;color:#000;text-decoration:none;transition:transform 180ms var(--ease)}
.ah .chip:hover{transform:translateY(-2px);color:#000}
.ah .chip:active{transform:scale(.97)}
.chip svg{width:14px;height:14px}


/* ---------------------------------------------------------------------
   2. PRODUTOS DIGITAIS  e  3. MARCAS
   .rev = painel invertido (lista à esquerda, texto à direita)
   --------------------------------------------------------------------- */
.svc-panel{display:grid;grid-template-columns:1fr 1.25fr;gap:56px;align-items:start;max-width:1216px;margin-inline:auto}
.svc-panel.rev{grid-template-columns:1.25fr 1fr}
.svc-intro{display:flex;flex-direction:column;gap:20px;align-items:flex-start;position:sticky;top:24px}
.panel-gap{height:16px}
/* itens da lista (abrem o popup do serviço) */
.svc-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:16px}
.ah .svc-item{width:100%;display:grid;grid-template-columns:96px 1fr auto;gap:24px;align-items:center;background:#f2e9d7;border:0;border-radius:32px;padding:20px;font:inherit;color:#000;text-align:left;cursor:pointer;transition:transform 220ms var(--ease)}
.ah .svc-item:hover{transform:translateY(-3px)}
.ah .svc-item:active{transform:scale(.99)}
.svc-item .ph{height:96px;border-radius:20px;font-size:11px;letter-spacing:.06em;padding:12px}
.svc-item .nm{display:block;font-family:Galline,Georgia,serif;font-weight:700;font-size:28px;line-height:1.2;margin-bottom:4px}
.svc-item .ds{display:block;font-size:15px;line-height:1.6}
.svc-item .more{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px 0 14px;border-radius:999px;background:#6b2ea0;color:#f2e9d7;font-size:13px;font-weight:700;white-space:nowrap}
.svc-item .more svg{width:14px;height:14px;transition:transform 220ms var(--ease)}
.svc-item:hover .more svg{transform:translateX(3px)}


/* ---------------------------------------------------------------------
   4. PROCESSO
   --------------------------------------------------------------------- */
.how-head{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:end}
.how-cards{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:48px}
.hc{border-radius:32px;padding:28px 24px 32px;display:flex;flex-direction:column;gap:14px;min-height:280px}
.hc .thin{margin-bottom:auto}
.hc h3{font-size:28px;line-height:1.2}
.hc p{font-size:15px;line-height:1.6}


/* ---------------------------------------------------------------------
   5. PERGUNTAS FREQUENTES
   --------------------------------------------------------------------- */
.s-faq{padding-top:48px}
.faq-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:56px;align-items:start}
.faq-side{display:flex;flex-direction:column;gap:20px}
.faq-side .selo{width:120px;height:120px}
/* perguntas (acordeão) */
.faq{list-style:none;padding:0;display:flex;flex-direction:column;gap:12px}
.faq li{border-radius:32px;background:#fff}
.ah .faq h3{font-family:Poppins,system-ui,sans-serif;font-size:17px}
.ah .q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;padding:16px 20px 16px 28px;border:0;border-radius:32px;background:transparent;color:#000;font:700 17px/1.4 Poppins,system-ui,sans-serif;text-align:left;cursor:pointer;transition:transform 180ms var(--ease)}
.ah .q:hover{transform:translateX(2px)}
.ah .q:active{transform:scale(.99)}
.q .plus{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#f28643;transition:transform 260ms var(--ease)}
.q .plus svg{width:16px;height:16px}
.q[aria-expanded="true"] .plus{transform:rotate(45deg);background:#da609a}
.a{padding:0 28px 24px;font-size:15px;line-height:1.7;max-width:640px}


/* ---------------------------------------------------------------------
   6. CHAMADA FINAL
   --------------------------------------------------------------------- */
.s-cta .panel{padding-block:56px}


/* ---------------------------------------------------------------------
   7. RESPONSIVO
   --------------------------------------------------------------------- */
@media (max-width:1024px){
  .how-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .page-head{padding-block:40px 48px}
  .svc-panel,.svc-panel.rev,.faq-grid,.how-head{grid-template-columns:1fr;gap:32px}
  .svc-intro{position:static}
  .svc-panel.rev .svc-intro{order:-1}
}
@media (max-width:600px){
  .how-cards{grid-template-columns:1fr}
  .hc{min-height:0}
  .ah .svc-item{grid-template-columns:1fr}
  .svc-item .more{justify-self:start}
  .svc-item .ph{height:120px}
  .ah .q{padding-left:20px;font-size:16px}
  .a{padding:0 20px 20px}
}