/* Gold Face Estética Avançada — goldfaceestetica.com.br */

/* ---------- Fontes (self-hosted) ---------- */
@font-face{font-family:'Jost';src:url('../fonts/jost-300.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Jost';src:url('../fonts/jost-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Jost';src:url('../fonts/jost-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Mulish';src:url('../fonts/mulish-300.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Mulish';src:url('../fonts/mulish-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Mulish';src:url('../fonts/mulish-600.woff2') format('woff2');font-weight:600;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --branco:#ffffff;
  --off:#f7f5f2;
  --linha:#e6e2db;
  --linha-escura:#3d3c3b;
  --grafite:#4f4e4d;
  --ink:#2e2d2c;
  --ink-2:#262524;
  --ouro:#c9971f;
  --ouro-claro:#e9c860;
  --ouro-escuro:#a87a15;
  --grad-ouro:linear-gradient(115deg,#e9c860 0%,#c9971f 55%,#a87a15 100%);
  --display:'Jost',system-ui,sans-serif;
  --body:'Mulish',system-ui,sans-serif;
  --largura:1140px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  font-family:var(--body);font-weight:300;font-size:1.0625rem;line-height:1.75;
  color:var(--grafite);background:var(--branco);-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--ouro);text-decoration:none}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--ouro);outline-offset:3px}
strong{font-weight:600}

.container{max-width:var(--largura);margin:0 auto;padding:0 1.5rem}

/* ---------- Tipografia ---------- */
h1,h2,h3{font-family:var(--display);font-weight:300;line-height:1.18;color:var(--ink)}
h1{font-size:clamp(2.1rem,4.6vw,3.4rem);letter-spacing:.01em}
h2{font-size:clamp(1.7rem,3.2vw,2.4rem)}
h3{font-size:1.25rem;font-weight:400}
.eyebrow{
  font-family:var(--display);font-weight:500;font-size:.78rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ouro);
  display:block;margin-bottom:1rem;
}
.escuro h1,.escuro h2,.escuro h3{color:var(--branco)}
.escuro{color:#cfccc7}
.ouro-texto{
  background:var(--grad-ouro);-webkit-background-clip:text;background-clip:text;
  color:transparent;
}

/* ---------- Fio dourado (assinatura) ---------- */
.fio{border:0;height:1px;width:76px;background:var(--grad-ouro);margin:1.4rem 0 1.6rem}
.fio.centro{margin-left:auto;margin-right:auto}

/* ---------- Seções ---------- */
section{padding:5.5rem 0}
.escuro{
  background-color:var(--ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.off{background:var(--off)}

/* ---------- Header ---------- */
.topo{
  position:sticky;top:0;z-index:50;
  background:rgba(38,37,36,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(233,200,96,.18);
}
.topo-in{
  max-width:var(--largura);margin:0 auto;padding:.65rem 1.5rem;
  display:flex;align-items:center;gap:2rem;
}
.marca{display:flex;align-items:center;gap:.7rem}
.marca img{height:44px;width:auto}
.marca-nome{font-family:var(--display);line-height:1.1}
.marca-nome b{
  display:block;font-weight:400;font-size:1.05rem;letter-spacing:.22em;
  background:var(--grad-ouro);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.marca-nome span{display:block;font-weight:300;font-size:.56rem;letter-spacing:.34em;color:#b5b2ad;text-transform:uppercase}
.nav{display:flex;align-items:center;gap:1.6rem;margin-left:auto}
.nav a{
  font-family:var(--display);font-weight:400;font-size:.92rem;letter-spacing:.06em;
  color:#dad7d2;padding:.35rem 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s;
}
.nav a:hover{color:var(--ouro-claro);border-color:var(--ouro-claro)}
.menu-drop{position:relative}
.menu-drop>a::after{content:' ▾';font-size:.7em}
.menu-lista{
  position:absolute;top:calc(100% + .6rem);left:50%;transform:translateX(-50%);
  background:var(--ink-2);border:1px solid var(--linha-escura);min-width:250px;
  padding:.5rem 0;display:none;box-shadow:0 18px 40px rgba(0,0,0,.35);
}
.menu-drop:hover .menu-lista,.menu-drop:focus-within .menu-lista{display:block}
.menu-lista a{display:block;padding:.5rem 1.2rem;border:0;font-size:.88rem}
.menu-lista a:hover{background:rgba(233,200,96,.08)}

/* ---------- Botões ---------- */
.btn{
  display:inline-block;font-family:var(--display);font-weight:500;font-size:.9rem;
  letter-spacing:.12em;text-transform:uppercase;padding:.95rem 2rem;
  background:var(--grad-ouro);color:var(--ink);transition:filter .2s,transform .2s;
}
.btn:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn-fantasma{
  display:inline-block;font-family:var(--display);font-weight:400;font-size:.9rem;
  letter-spacing:.1em;text-transform:uppercase;padding:.95rem 1.6rem;
  color:var(--ouro-claro);border:1px solid rgba(233,200,96,.5);transition:background .2s;
}
.btn-fantasma:hover{background:rgba(233,200,96,.08)}
.topo .btn{padding:.6rem 1.3rem;font-size:.78rem}

/* ---------- Hero (home) ---------- */
.hero{padding:6rem 0 6.5rem;position:relative;overflow:hidden}
.hero-marca-agua{
  position:absolute;right:-6%;top:-12%;width:min(52vw,640px);opacity:.07;pointer-events:none;
}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:4rem;align-items:center;position:relative}
.hero p.lead{font-size:1.15rem;max-width:34rem;margin-bottom:2.2rem}
.hero-acoes{display:flex;gap:1rem;flex-wrap:wrap}
.hero-foto{position:relative;justify-self:center}
.hero-foto img{width:min(100%,380px);aspect-ratio:3/4;object-fit:cover;object-position:top}
.hero-foto::before{
  content:'';position:absolute;inset:-14px 14px 14px -14px;
  border:1px solid rgba(233,200,96,.55);z-index:0;pointer-events:none;
}
.hero-legenda{
  margin-top:1.1rem;font-family:var(--display);font-weight:400;font-size:.8rem;
  letter-spacing:.18em;text-transform:uppercase;color:#b5b2ad;text-align:center;
}

/* ---------- Barra de confiança ---------- */
.confianca{border-top:1px solid rgba(233,200,96,.16);padding:2.2rem 0;background:var(--ink-2)}
.confianca-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;text-align:center}
.confianca b{
  display:block;font-family:var(--display);font-weight:400;font-size:1.15rem;color:var(--ouro-claro);
  letter-spacing:.04em;margin-bottom:.2rem;
}
.confianca span{font-size:.9rem;color:#b5b2ad}

/* ---------- Blocos texto+foto ---------- */
.duas-colunas{display:grid;grid-template-columns:1fr 1fr;gap:4.5rem;align-items:center}
.duas-colunas .texto p+p{margin-top:1.1rem}
.moldura{position:relative}
.moldura img{width:100%;object-fit:cover}
.moldura::after{
  content:'';position:absolute;inset:14px -14px -14px 14px;
  border:1px solid var(--ouro);opacity:.5;z-index:-1;
}

/* ---------- Procedimentos (cards) ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.8rem}
.card{
  border:1px solid var(--linha);padding:2rem 1.8rem;background:var(--branco);
  color:var(--grafite);display:flex;flex-direction:column;gap:.7rem;
  transition:border-color .25s,box-shadow .25s;
}
.card:hover{border-color:var(--ouro);box-shadow:0 14px 34px rgba(46,45,44,.08)}
.card h3{font-size:1.18rem}
.card p{font-size:.95rem;flex:1}
.card .saiba{
  font-family:var(--display);font-weight:500;font-size:.8rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ouro);
}
.card .saiba::after{content:'  →'}

/* ---------- Galeria ---------- */
.galeria{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.6rem}
.galeria figure{position:relative;overflow:hidden}
.galeria img{width:100%;height:380px;object-fit:cover;transition:transform .5s}
.galeria figure:hover img{transform:scale(1.04)}
.galeria figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:2.2rem 1.2rem .9rem;
  background:linear-gradient(transparent,rgba(38,37,36,.85));
  color:#e8e5e0;font-family:var(--display);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
}

/* ---------- Localização ---------- */
.local-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:stretch;margin-top:2.6rem}
.local-grid iframe{width:100%;height:100%;min-height:380px;border:1px solid var(--linha);filter:grayscale(.25)}
.nap{border:1px solid var(--linha);background:var(--branco);padding:2.4rem;display:flex;flex-direction:column;gap:1.1rem}
.nap h3{font-size:1.1rem}
.nap p{font-size:.98rem}
.nap .btn{align-self:flex-start;margin-top:.6rem}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:2.4rem auto 0}
.faq details{border-bottom:1px solid var(--linha);padding:1.1rem 0}
.escuro .faq details{border-color:var(--linha-escura)}
.faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;
  font-family:var(--display);font-weight:400;font-size:1.08rem;color:var(--ink);
}
.escuro .faq summary{color:var(--branco)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--ouro);font-size:1.3rem;line-height:1;flex-shrink:0}
.faq details[open] summary::after{content:'−'}
.faq details p{padding:.8rem 0 .3rem;font-size:.98rem}

/* ---------- CTA final ---------- */
.cta-faixa{text-align:center;padding:5rem 0}
.cta-faixa h2{max-width:640px;margin:0 auto 1rem}
.cta-faixa p{max-width:520px;margin:0 auto 2.2rem}

/* ---------- Footer ---------- */
footer{background:var(--ink-2);color:#b5b2ad;padding:3.6rem 0 2rem;font-size:.92rem}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:3rem;margin-bottom:2.6rem}
footer h4{
  font-family:var(--display);font-weight:500;font-size:.8rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ouro-claro);margin-bottom:1rem;
}
footer a{color:#dad7d2}
footer a:hover{color:var(--ouro-claro)}
footer ul{list-style:none}
footer li{margin-bottom:.45rem}
.footer-marca img{height:56px;margin-bottom:1rem}
.footer-fim{border-top:1px solid var(--linha-escura);padding-top:1.4rem;font-size:.8rem;color:#8a8783;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* ---------- Página de procedimento ---------- */
.hero-interno{padding:4.2rem 0 4.6rem}
.hero-interno .container{max-width:900px}
.breadcrumb{font-family:var(--display);font-size:.8rem;letter-spacing:.1em;color:#b5b2ad;margin-bottom:1.6rem;text-transform:uppercase}
.breadcrumb a{color:#b5b2ad}
.breadcrumb a:hover{color:var(--ouro-claro)}
.hero-interno p.lead{font-size:1.12rem;max-width:40rem;margin-top:1.2rem}
.conteudo{display:grid;grid-template-columns:1fr 320px;gap:4rem;align-items:start}
.artigo h2{margin:2.6rem 0 1rem;font-size:1.55rem}
.artigo h2:first-child{margin-top:0}
.artigo p+p{margin-top:1.05rem}
.artigo ul{margin:1rem 0 1rem 1.2rem}
.artigo li{margin-bottom:.5rem}
.lateral{position:sticky;top:92px;display:flex;flex-direction:column;gap:1.4rem}
.card-cta{background:var(--ink);color:#cfccc7;padding:2rem;text-align:center}
.card-cta img{height:64px;margin:0 auto 1rem}
.card-cta h3{color:var(--branco);font-size:1.1rem;margin-bottom:.6rem}
.card-cta p{font-size:.9rem;margin-bottom:1.4rem}
.card-lista{border:1px solid var(--linha);padding:1.6rem}
.card-lista h4{
  font-family:var(--display);font-weight:500;font-size:.78rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--grafite);margin-bottom:.9rem;
}
.card-lista ul{list-style:none}
.card-lista li{border-bottom:1px solid var(--linha);}
.card-lista li:last-child{border:0}
.card-lista a{display:block;padding:.55rem 0;font-size:.92rem;color:var(--grafite)}
.card-lista a:hover{color:var(--ouro)}

/* ---------- WhatsApp flutuante ---------- */
.zap-flutuante{
  position:fixed;right:1.4rem;bottom:1.4rem;z-index:60;width:58px;height:58px;
  border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(0,0,0,.3);transition:transform .2s;
}
.zap-flutuante:hover{transform:scale(1.08)}
.zap-flutuante svg{width:30px;height:30px;fill:#fff}

/* ---------- Mobile ---------- */
.menu-btn{display:none}
@media (max-width:920px){
  section{padding:3rem 0}
  .hero{padding:2.4rem 0 3rem}
  .hero-grid,.duas-colunas,.local-grid,.conteudo{grid-template-columns:1fr;gap:2.4rem}
  .cards,.galeria{grid-template-columns:1fr;gap:1.1rem}
  .galeria img{height:300px}
  .confianca-grid{grid-template-columns:1fr;gap:1.2rem}
  .footer-grid{grid-template-columns:1fr;gap:2rem}
  .lateral{position:static}
  h1{font-size:clamp(1.9rem,8vw,2.4rem)}
  .hero p.lead{font-size:1rem;margin-bottom:1.6rem}
  .fio{margin:1rem 0 1.2rem}
  .hero-acoes{flex-direction:column;align-items:stretch}
  .hero-acoes .btn,.hero-acoes .btn-fantasma{text-align:center}
  .hero-foto{display:none}
  .hero-marca-agua{display:none}
  .moldura{max-width:420px;margin:0 auto;width:100%}
  .moldura::after{display:none}

  .menu-btn{
    display:block;margin-left:auto;background:none;border:1px solid rgba(233,200,96,.4);
    color:var(--ouro-claro);font-family:var(--display);font-size:.8rem;letter-spacing:.14em;
    text-transform:uppercase;padding:.5rem .9rem;cursor:pointer;
  }
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    align-items:flex-start;gap:0;background:var(--ink-2);border-bottom:1px solid var(--linha-escura);
    padding:.6rem 1.5rem 1.2rem;
  }
  .nav.aberto{display:flex}
  .nav a{padding:.55rem 0;font-size:1rem}
  .menu-drop{width:100%}
  .menu-lista{position:static;transform:none;display:block;border:0;box-shadow:none;background:transparent;padding:0 0 0 1rem;min-width:0}
  .topo .btn{display:none}
}