/* =====================================================================
   AHAV · BASE
   Usado por todas as páginas. Cada página carrega este arquivo primeiro
   e depois o CSS próprio (home.css, servicos.css, ...).

   ÍNDICE
    1. Fontes
    2. Base e reset
    3. Tipografia
    4. Cores (classes utilitárias)
    5. Ícones e brilho
    6. Botões (pill)
    7. Foco (acessibilidade)
    8. Placeholders de imagem
    9. Menu e seletor de idioma
   10. Painéis, chamada final e selo
   11. Faixas brancas (onda + textura)
   12. Rodapé
   13. Utilitários do site
   14. Responsivo
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. FONTES
   --------------------------------------------------------------------- */
@font-face{font-family:Galline;src:url("../assets/fonts/galline-bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Galline;src:url("../assets/fonts/galline-bold-italic.otf") format("opentype");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:Poppins;src:url("../assets/fonts/poppins-thin.ttf") format("truetype");font-weight:100;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url("../assets/fonts/poppins-regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url("../assets/fonts/poppins-bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}


/* ---------------------------------------------------------------------
   2. BASE E RESET
   --------------------------------------------------------------------- */
body{margin:0;background:#f2e9d7}
a{color:#6b2ea0}
a:hover{color:#000}
.ah{--ease:cubic-bezier(.34,1.56,.64,1);--out:cubic-bezier(.22,1,.36,1);font-family:Poppins,system-ui,sans-serif;font-size:16px;line-height:1.7;color:#000;background:#f2e9d7;-webkit-font-smoothing:antialiased;overflow-x:clip}
.ah *,.ah *::before,.ah *::after{box-sizing:border-box}
.ah :where(h1,h2,h3,p,ul,ol,blockquote){margin:0}
.ah h1,.ah h2,.ah h3{font-family:Galline,Georgia,serif;font-weight:700;text-wrap:balance}
.ah p{text-wrap:pretty}
.ah i{font-style:italic}
.wrap{width:100%;max-width:1280px;margin-inline:auto;padding-inline:32px}
.sec{padding-block:96px}


/* ---------------------------------------------------------------------
   3. TIPOGRAFIA
   --------------------------------------------------------------------- */
.eyebrow{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1.3}
.t1{font-size:clamp(42px,5.6vw,76px);line-height:1.03;letter-spacing:-.01em}
.t2{font-size:clamp(32px,3.6vw,44px);line-height:1.1;letter-spacing:-.01em}
.t3{font-size:28px;line-height:1.2}
.lead{font-size:clamp(17px,1.5vw,20px);line-height:1.55}
.thin{font-weight:100;font-size:56px;line-height:1}


/* ---------------------------------------------------------------------
   4. CORES — classes utilitárias da paleta Ahav
   bg-* = fundo · tx-* = texto
   --------------------------------------------------------------------- */
.ah .bg-laranja{background:#f28643}
.ah .bg-rosa{background:#da609a}
.ah .bg-uva{background:#6b2ea0}
.ah .bg-rosa-claro{background:#ea92b2}
.ah .bg-amarelo{background:#f4bd51}
.ah .bg-creme{background:#f2e9d7}
.ah .bg-branco{background:#ffffff}
.ah .bg-laranja-suave{background:#f7b88f}
.ah .bg-lilas{background:#bc7cea}
.ah .bg-rosa-palido{background:#f3c3d4}
.ah .tx-preto{color:#000}
.ah .tx-creme{color:#f2e9d7}
.ah .tx-uva{color:#6b2ea0}
.ah .tx-amarelo{color:#f4bd51}


/* ---------------------------------------------------------------------
   5. ÍCONES E BRILHO (estrelinha ao lado dos títulos)
   --------------------------------------------------------------------- */
.ic{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.brilho{display:inline-block;width:.5em;height:.5em;vertical-align:.1em;margin-left:.14em}
.br-laranja{fill:#f28643}
.br-rosa{fill:#da609a}
.br-uva{fill:#6b2ea0}


/* ---------------------------------------------------------------------
   6. BOTÕES (pill)
   --------------------------------------------------------------------- */
.ah .pill{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:12px 14px 12px 24px;border-radius:999px;font:700 15px/1.2 Poppins,system-ui,sans-serif;letter-spacing:.01em;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:transform 180ms var(--ease)}
.ah .pill.np{padding-right:24px}
.ah .pill:hover{transform:translateY(-2px)}
.ah .pill:active{transform:translateY(0) scale(.97);transition-duration:90ms}
.ah .pill .ar{flex:none;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;transition:transform 220ms var(--ease)}
.ah .pill .ar svg{width:14px;height:14px}
.ah .pill:hover .ar{transform:translateX(3px)}
/* variações de cor */
.ah .p-uva{background:#6b2ea0;color:#f2e9d7}
.ah .p-uva .ar{background:#f2e9d7;color:#6b2ea0}
.ah .p-lar{background:#f28643;color:#000}
.ah .p-lar .ar{background:#000;color:#f28643}
.ah .p-preto{background:#000;color:#f2e9d7}
.ah .p-preto .ar{background:#f2e9d7;color:#000}
.ah .p-ghost{background:transparent;color:#000;border-color:#000}
.ah .p-ghost-l{background:transparent;color:#f2e9d7;border-color:rgba(242,233,215,.6)}


/* ---------------------------------------------------------------------
   7. FOCO (navegação por teclado)
   --------------------------------------------------------------------- */
.ah a:focus-visible,.ah button:focus-visible,.ah input:focus-visible,.ah select:focus-visible,.ah textarea:focus-visible{outline:3px solid #6b2ea0;outline-offset:3px}
.ah .on-dark a:focus-visible,.ah .on-dark button:focus-visible{outline-color:#f4bd51}


/* ---------------------------------------------------------------------
   8. PLACEHOLDERS DE IMAGEM (caixas tracejadas até entrar a imagem real)
   --------------------------------------------------------------------- */
.ph{display:grid;place-items:center;text-align:center;border:1.5px dashed rgba(0,0,0,.42);border-radius:20px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:1.4;color:rgba(0,0,0,.75);padding:12px}
.ph.ph-l{border-color:rgba(242,233,215,.55);color:#f2e9d7}


/* ---------------------------------------------------------------------
   9. MENU E SELETOR DE IDIOMA
   Versão clara (fundo creme). A versão escura da Home fica em home.css.
   --------------------------------------------------------------------- */
.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px 24px;padding-block:24px}
.nav .logo{display:block;justify-self:start;border-radius:12px}
.nav .logo img{height:44px;width:auto;display:block}
.nav-links{display:flex;gap:2px;list-style:none;margin:0;padding:5px;border-radius:999px;border:1px solid rgba(0,0,0,.14)}
.ah .nav-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;font-size:14px;color:#000;text-decoration:none;transition:transform 180ms var(--ease)}
.ah .nav-links a:hover{transform:translateY(-1px);background:rgba(0,0,0,.06)}
.ah .nav-links a:active{transform:scale(.96)}
.ah .nav-links a[aria-current="page"]{background:#6b2ea0;color:#f2e9d7}
.lang{display:inline-flex;justify-self:end;gap:2px;padding:4px;border-radius:999px;flex:none;border:1px solid rgba(0,0,0,.2)}
.ah .lang button{min-width:48px;min-height:40px;border:0;border-radius:999px;font:700 13px/1 Poppins,system-ui,sans-serif;letter-spacing:.06em;cursor:pointer;background:transparent;color:inherit;transition:transform 160ms var(--ease)}
.ah .lang button:hover{transform:translateY(-1px)}
.ah .lang button:active{transform:scale(.94)}
.ah .lang button[aria-pressed="true"]{background:#6b2ea0;color:#f2e9d7}


/* ---------------------------------------------------------------------
   10. PAINÉIS, CHAMADA FINAL E SELO
   --------------------------------------------------------------------- */
.panel-wrap{padding-inline:16px}
.panel{max-width:1408px;margin-inline:auto;border-radius:56px;padding:72px 56px}
.cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;max-width:1216px;margin-inline:auto}
/* selo girando */
.selo{animation:spin 26s linear infinite}
.selo img{width:100%;height:100%;display:block}
@keyframes spin{to{transform:rotate(360deg)}}


/* ---------------------------------------------------------------------
   11. FAIXAS BRANCAS (onda em cima e embaixo + textura de estrelinhas)
   .band = ondas tipo 1 · .band.b2 = ondas tipo 2
   --------------------------------------------------------------------- */
.band{position:relative;z-index:1;margin-block:72px;background:#fff url("../assets/img/textura.svg") repeat;background-size:260px 260px}
.band::before,.band::after{content:"";position:absolute;left:0;right:0;height:56px;background-repeat:no-repeat;background-size:100% 100%;pointer-events:none}
.band::before{top:-55px;background-image:url("../assets/img/onda-topo-1.svg")}
.band::after{bottom:-55px;background-image:url("../assets/img/onda-base-1.svg")}
.band.b2::before{background-image:url("../assets/img/onda-topo-2.svg")}
.band.b2::after{background-image:url("../assets/img/onda-base-2.svg")}


/* ---------------------------------------------------------------------
   12. RODAPÉ
   --------------------------------------------------------------------- */
.foot{margin:16px;border-radius:56px;background:#6b2ea0;color:#f2e9d7;padding:64px 56px 32px}
.foot-grid{display:grid;grid-template-columns:1.5fr .8fr 1.2fr .8fr;gap:40px;max-width:1216px;margin:0 auto}
.ah .foot .foot-logo{display:block;width:160px;min-height:0;margin-bottom:24px;text-decoration:none;border-radius:12px}
.foot-logo img{width:100%;height:auto;display:block}
.foot .selo{width:96px;height:96px;margin-bottom:20px}
.foot h3{font-size:clamp(26px,2.4vw,32px);line-height:1.15;max-width:420px}
.foot .eyebrow{color:#f4bd51;margin-bottom:12px}
.foot ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:4px}
.ah .foot a{display:inline-flex;align-items:center;min-height:40px;color:#f2e9d7;text-decoration:underline;text-underline-offset:5px;text-decoration-color:rgba(242,233,215,.45);transition:transform 180ms var(--ease)}
.ah .foot a:hover{color:#f4bd51;transform:translateX(2px)}
.foot .lang{border-color:rgba(242,233,215,.3)}
.ah .foot .lang button[aria-pressed="true"]{background:#f2e9d7;color:#6b2ea0}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;max-width:1216px;margin:48px auto 0;padding-top:24px;border-top:1px solid rgba(242,233,215,.2);font-size:14px}


/* ---------------------------------------------------------------------
   13. UTILITÁRIOS DO SITE
   --------------------------------------------------------------------- */
.ah [hidden]{display:none !important}
/* trava a rolagem da página enquanto um popup está aberto */
html.locked,html.locked body{overflow:hidden}
/* link "Pular para o conteúdo" (aparece só no Tab) */
.skip{position:absolute;left:16px;top:-80px;z-index:2000;padding:12px 18px;border-radius:999px;background:#6b2ea0;color:#f2e9d7 !important;font:700 14px/1 Poppins,system-ui,sans-serif;text-decoration:none}
.skip:focus{top:16px}


/* ---------------------------------------------------------------------
   14. RESPONSIVO
   --------------------------------------------------------------------- */
@media (max-width:900px){
  .wrap{padding-inline:16px}
  .sec{padding-block:48px}
  /* menu */
  .nav{grid-template-columns:1fr auto}
  .nav-links{grid-column:1/-1;order:3;width:100%;margin:0;justify-content:space-between;overflow-x:auto}
  .ah .nav-links a{padding:0 12px}
  /* painéis */
  .panel-wrap{padding-inline:8px}
  .panel{border-radius:32px;padding:40px 20px}
  /* faixas brancas */
  .band{margin-block:40px}
  .band::before,.band::after{height:32px}
  .band::before{top:-31px}
  .band::after{bottom:-31px}
  /* rodapé */
  .foot{margin:8px;border-radius:32px;padding:40px 20px 24px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .foot-grid > div:first-child{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){
  .selo{animation:none}
}