/* ══════════════════════════════════════════════════════════
   proc.css · Páginas de procedimento — Rebeca Almeida
   Reaproveita a paleta/fontes/voz da home (single-file).
   Carregado só pelas subpáginas; a home segue com seu <style> inline.
══════════════════════════════════════════════════════════ */
:root{
  --off-white:#FAF5F0; --bege:#F5EDE6; --rosa-pastel:#F7EDED; --pessego:#F9E8E0; --blush:#F2D9DA;
  --rose-gold:#C19A7B; --cobre:#B87B5E; --cobre-text:#9D5C3F; --ouro:#C4A265; --ouro-velho:#A8894A;
  --gold-grad:linear-gradient(135deg,#D4B896 0%,#B8956A 50%,#C4A265 100%);
  --rose-grad:linear-gradient(135deg,#D4A69A 0%,#C19A7B 100%);
  --marrom:#3D2B1F; --marrom-medio:#5C3D35; --marrom-soft:#6F524A; --bordo:#5A2A2A;
  --rosa-dark:#9A5C61; --rosa:#C9848A; --branco:#FFFFFF; --verde-wa:#25D366; --verde-wa-hov:#20BA5A;
  --serif:'Playfair Display',Georgia,serif; --sans:'Montserrat','Lato',sans-serif; --script:'Cormorant Garamond',Georgia,serif;
  --sh-sm:0 2px 8px rgba(61,43,31,.06); --sh-md:0 8px 24px rgba(61,43,31,.08); --sh-lg:0 16px 36px rgba(61,43,31,.1);
  --dark-marrom-1:#1A1110; --dark-marrom-2:#2A1E18; --bege-perola:#F8E3D7; --text-muted:#856A62;
  --ease:all .35s cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;outline:none;}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--ouro);outline-offset:3px;border-radius:4px;}
html{scroll-behavior:smooth;scroll-padding-top:78px;background:var(--off-white);}
html,body{overflow-x:hidden;}
body{font-family:var(--sans);color:var(--marrom);background:var(--off-white);line-height:1.6;-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
.script{font-family:var(--script);font-style:italic;}
.wrap{max-width:920px;margin:0 auto;padding:0 22px;}

/* ── Reveal (mesmo comportamento da home) ── */
.fade-up{opacity:0;transform:translateY(48px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);}
.fade-up.visible{opacity:1;transform:none;}
.fade-up.d1{transition-delay:.1s;} .fade-up.d2{transition-delay:.2s;} .fade-up.d3{transition-delay:.3s;}

/* ── Navbar (igual à home) ── */
.navbar{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;
  padding:16px 30px;transition:var(--ease);background:transparent;}
.navbar.scrolled{background:rgba(250,245,240,.92);backdrop-filter:blur(12px);box-shadow:var(--sh-sm);padding:11px 30px;}
.nav-logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--marrom);}
.nav-logo-disc{width:38px;height:38px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#fff;box-shadow:var(--sh-sm);}
.nav-logo-disc img{width:31px;height:31px;object-fit:contain;}
.nav-brand{font-family:var(--serif);font-size:18px;font-weight:600;letter-spacing:.3px;}
.nav-links{display:flex;align-items:center;gap:26px;}
.nav-links a{font-size:13.5px;font-weight:500;color:var(--marrom-medio);text-decoration:none;transition:var(--ease);}
.nav-links a:hover{color:var(--cobre-text);}
.nav-cta{padding:9px 20px;border-radius:50px;background:var(--gold-grad);color:#fff!important;font-weight:600;box-shadow:var(--sh-sm);}
@media(max-width:760px){.nav-links a:not(.nav-cta){display:none;} .navbar{padding:13px 18px;} .nav-cta{padding:8px 16px;font-size:12.5px;}}

/* ── Hero do procedimento ──
   Fotos verticais num hero largo cortam no eixo Y. Enquadramento por viewport:
   cada página define --hero-mob e --hero-desk; mobile e desktop pedem cortes diferentes. */
.proc-hero{position:relative;min-height:78vh;display:flex;align-items:flex-end;padding:120px 0 56px;
  background-size:cover;background-position:var(--hero-mob, center 30%);}
@media(min-width:768px){
  .proc-hero{min-height:74vh;background-position:var(--hero-desk, center 26%);}
}
.proc-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,17,16,.34) 0%,rgba(26,17,16,.12) 40%,rgba(26,17,16,.78) 100%);}
.proc-hero .wrap{position:relative;z-index:2;}
.proc-bread{font-size:12px;color:var(--bege-perola);opacity:.85;margin-bottom:14px;letter-spacing:.3px;}
.proc-bread a{color:var(--bege-perola);text-decoration:none;}
.proc-bread a:hover{text-decoration:underline;}
.proc-tag{display:inline-block;font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--bege-perola);
  background:rgba(193,154,123,.32);padding:5px 14px;border-radius:50px;margin-bottom:16px;}
.proc-hero h1{font-family:var(--serif);font-weight:600;color:#fff;font-size:clamp(30px,5.6vw,52px);line-height:1.08;max-width:14ch;}
.proc-hero h1 .script{color:var(--bege-perola);}
.proc-hero .lead{color:rgba(248,227,215,.95);font-size:clamp(15px,2.2vw,18px);max-width:46ch;margin-top:16px;}
.proc-hero .btn-hero{margin-top:26px;}

/* ── Botões ── */
.btn-hero{display:inline-flex;align-items:center;gap:9px;padding:15px 30px;border-radius:50px;background:var(--gold-grad);
  color:#fff;font-weight:600;font-size:15px;text-decoration:none;box-shadow:var(--sh-md);transition:var(--ease);position:relative;overflow:hidden;}
.btn-hero:hover{transform:translateY(-2px);box-shadow:var(--sh-lg);}
.btn-wa{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;border-radius:50px;background:var(--verde-wa);
  color:#fff;font-weight:600;font-size:15px;text-decoration:none;box-shadow:var(--sh-md);transition:var(--ease);}
.btn-wa:hover{background:var(--verde-wa-hov);transform:translateY(-2px);box-shadow:var(--sh-lg);}
.btn-wa svg,.btn-hero svg{width:19px;height:19px;fill:currentColor;}

/* ── Seções de conteúdo ── */
.proc-section{padding:64px 0;}
.proc-section.alt{background:var(--bege);}
.proc-section h2{font-family:var(--serif);font-weight:600;color:var(--marrom);font-size:clamp(24px,3.6vw,34px);line-height:1.15;margin-bottom:18px;}
.proc-section h2 .script{color:var(--cobre-text);}
.proc-section h3{font-family:var(--serif);font-weight:600;color:var(--marrom);font-size:20px;margin:26px 0 8px;}
.proc-section p{color:var(--marrom-soft);font-size:15.5px;margin-bottom:14px;max-width:64ch;}
.proc-section p strong{color:var(--marrom-medio);}
.lead-intro p{font-size:17px;color:var(--marrom-medio);}

/* lista com check dourado */
.check-list{list-style:none;margin:8px 0 4px;}
.check-list li{position:relative;padding-left:30px;margin-bottom:12px;color:var(--marrom-soft);font-size:15px;max-width:62ch;}
.check-list li::before{content:"";position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%;
  background:var(--gold-grad);box-shadow:var(--sh-sm);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M20 6 9 17l-5-5'/></svg>") center/12px no-repeat;
  mask:none;background:var(--ouro-velho);}
.check-list li::after{content:"✓";position:absolute;left:3px;top:0;color:#fff;font-size:11px;font-weight:700;width:18px;text-align:center;}

/* passos "como é feito" */
.steps{display:grid;gap:18px;margin-top:14px;}
.step{display:flex;gap:16px;align-items:flex-start;}
.step-num{flex:none;width:38px;height:38px;border-radius:50%;background:var(--gold-grad);color:#fff;font-family:var(--serif);
  font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-sm);}
.step h3{margin:0 0 4px;font-size:17px;}
.step p{margin:0;font-size:14.5px;}

/* FAQ */
.accordion{border-bottom:1px solid rgba(193,154,123,.25);}
.accordion summary{list-style:none;cursor:pointer;padding:18px 0;font-family:var(--serif);font-size:18px;color:var(--marrom);
  display:flex;justify-content:space-between;align-items:center;gap:14px;}
.accordion summary::-webkit-details-marker{display:none;}
.accordion summary::after{content:"+";font-family:var(--sans);font-size:22px;color:var(--cobre-text);transition:transform .3s;}
.accordion[open] summary::after{transform:rotate(45deg);}
.accordion p{padding:0 0 18px;color:var(--marrom-soft);font-size:15px;}

/* outros tratamentos */
.rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:10px;}
.rel-card{display:block;background:#fff;border:1px solid rgba(193,154,123,.18);border-radius:14px;padding:20px;text-decoration:none;
  box-shadow:var(--sh-sm);transition:var(--ease);}
.rel-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:rgba(193,154,123,.4);}
.rel-card .rel-pill{font-size:10.5px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--cobre-text);}
.rel-card h3{font-family:var(--serif);font-size:18px;color:var(--marrom);margin:6px 0 4px;}
.rel-card p{font-size:13px;color:var(--marrom-soft);margin:0;}

/* CTA final */
.cta-final{background:linear-gradient(160deg,var(--dark-marrom-2),var(--dark-marrom-1));text-align:center;padding:72px 22px;color:#fff;}
.cta-final h2{font-family:var(--serif);font-weight:600;font-size:clamp(26px,4vw,38px);line-height:1.15;margin-bottom:14px;}
.cta-final h2 .script{color:var(--bege-perola);}
.cta-final p{color:rgba(248,227,215,.85);max-width:48ch;margin:0 auto 28px;font-size:15px;}
.cta-selos{display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:center;margin-top:24px;}
.cta-selos span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:rgba(248,227,215,.8);}
.cta-selos svg{width:15px;height:15px;fill:none;stroke:var(--ouro);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}

/* ── Rodapé (igual à home) ── */
.rodape{background:var(--dark-marrom-1);color:var(--bege-perola);padding:52px 22px 26px;}
.rodape-grid{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:38px;}
.rodape-col h4{font-family:var(--serif);font-size:17px;color:#fff;margin-bottom:14px;font-weight:600;}
.rodape-marca img{height:42px;width:auto;border-radius:8px;margin-bottom:12px;}
.rodape-slogan{font-family:var(--script);font-style:italic;font-size:18px;color:var(--bege-perola);margin-bottom:10px;}
.rodape-bio{font-size:13px;color:rgba(248,227,215,.7);max-width:34ch;line-height:1.6;}
.rodape-social{display:flex;gap:12px;margin-top:16px;}
.rodape-social a{width:38px;height:38px;border-radius:50%;background:rgba(248,227,215,.1);display:flex;align-items:center;justify-content:center;transition:var(--ease);}
.rodape-social a:hover{background:var(--gold-grad);}
.rodape-social svg{width:18px;height:18px;fill:var(--bege-perola);}
.rodape-nav{display:flex;flex-direction:column;gap:9px;}
.rodape-nav a{font-size:13.5px;color:rgba(248,227,215,.78);text-decoration:none;transition:var(--ease);}
.rodape-nav a:hover{color:#fff;}
.rodape-contato p{font-size:13px;color:rgba(248,227,215,.78);margin-bottom:10px;line-height:1.6;}
.rodape-contato a{color:var(--bege-perola);text-decoration:none;}
.rodape-contato a:hover{text-decoration:underline;}
.status-aberto{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;padding:5px 12px;border-radius:50px;margin-top:4px;}
.status-aberto .dot{width:8px;height:8px;border-radius:50%;}
.status-aberto.is-open{background:rgba(37,211,102,.14);color:#7BE0A0;} .status-aberto.is-open .dot{background:var(--verde-wa);}
.status-aberto.is-closed{background:rgba(201,132,138,.14);color:#E0A9AD;} .status-aberto.is-closed .dot{background:var(--rosa);}
.rodape-bottom{max-width:1080px;margin:30px auto 0;padding-top:20px;border-top:1px solid rgba(248,227,215,.12);
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;font-size:12px;color:rgba(248,227,215,.6);}
.rodape-bottom a{color:rgba(248,227,215,.8);text-decoration:none;}
.rodape-bottom button{background:none;border:none;color:rgba(248,227,215,.8);font:inherit;cursor:pointer;padding:0;}
.rodape-bottom .sep{margin:0 6px;opacity:.5;}
@media(max-width:760px){.rodape-grid{grid-template-columns:1fr;gap:28px;} .rodape-bottom{flex-direction:column;}}

/* ── WhatsApp flutuante ── */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:90;width:56px;height:56px;border-radius:50%;background:var(--verde-wa);
  display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(37,211,102,.4);transition:var(--ease);}
.wa-float:hover{transform:scale(1.08);background:var(--verde-wa-hov);}
.wa-float svg{width:30px;height:30px;fill:#fff;}

/* ── Modal LGPD ── */
.modal-backdrop{position:fixed;inset:0;z-index:200;background:rgba(26,17,16,.55);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;padding:22px;}
.modal-backdrop.open{display:flex;}
.modal-card{background:var(--off-white);max-width:560px;width:100%;max-height:84vh;overflow:auto;border-radius:18px;padding:34px;position:relative;box-shadow:var(--sh-lg);}
.modal-card h2{font-family:var(--serif);font-size:24px;color:var(--marrom);margin-bottom:8px;}
.modal-card h3{font-family:var(--serif);font-size:17px;color:var(--marrom);margin:18px 0 6px;}
.modal-card p,.modal-card li{font-size:14px;color:var(--marrom-soft);line-height:1.6;}
.modal-card ul{padding-left:20px;margin:6px 0;}
.modal-sub{color:var(--text-muted);font-size:13px;}
.modal-close{position:absolute;top:14px;right:16px;background:none;border:none;font-size:30px;line-height:1;color:var(--marrom-soft);cursor:pointer;}

/* ── Acessibilidade: respeita reduzir movimento ── */
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;}
  .fade-up{opacity:1!important;transform:none!important;transition:none!important;}
  .btn-hero,.btn-wa,.wa-float,.rel-card{transition:none!important;}
}
