/* ==========================================================
   >>> ALTERE AQUI: CORES PRINCIPAIS DO SITE <<<
   Você só precisa trocar os códigos abaixo.
   ========================================================== */
:root {
  --black: #0b0b0b;       /* preto principal */
  --black-soft: #151515;  /* preto secundário */
  --gold: #b69658;        /* dourado principal */
  --gold-light: #d8c49d;  /* dourado claro */
  --champagne: #e6dac4;   /* champagne */
  --cream: #f4efe7;       /* bege claro */
  --offwhite: #faf8f4;    /* branco quente */
  --white: #ffffff;
  --text: #202020;
  --muted: #6d675f;
  --line: rgba(182, 150, 88, 0.25);
  --shadow: 0 30px 80px rgba(0,0,0,.10);
  --radius: 24px;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family:var(--sans); color:var(--text); background:var(--offwhite); line-height:1.6; overflow-x:hidden; }
body.modal-open { overflow:hidden; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
img { max-width:100%; display:block; }
.container { width:min(1180px, calc(100% - 40px)); margin-inline:auto; }

.announcement { min-height:34px; background:var(--black); color:rgba(255,255,255,.76); display:flex; align-items:center; justify-content:center; gap:22px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; padding:8px 18px; }
.announcement a { color:var(--gold-light); border-bottom:1px solid rgba(216,196,157,.45); }

.site-header { position:sticky; top:0; z-index:50; background:rgba(11,11,11,.90); backdrop-filter:blur(16px); border-bottom:1px solid rgba(255,255,255,.08); }
.nav-wrap { min-height:92px; display:flex; align-items:center; justify-content:space-between; gap:30px; }

.brand { min-width:240px; display:inline-flex; flex-direction:column; line-height:1; }
.brand-main { color:var(--gold-light); font-family:var(--serif); font-weight:600; font-size:25px; letter-spacing:.10em; }
.brand-sub { color:rgba(255,255,255,.75); font-size:9px; letter-spacing:.42em; margin-top:9px; }

/* >>> ALTERE AQUI: TAMANHO DA LOGO EM IMAGEM <<< */
.logo-image { width:250px; max-height:78px; object-fit:contain; object-position:left center; }

.main-nav { display:flex; align-items:center; justify-content:flex-end; gap:22px; }
.main-nav > a:not(.btn) { color:rgba(255,255,255,.78); font-size:12px; letter-spacing:.04em; transition:.25s ease; }
.main-nav > a:not(.btn):hover { color:var(--gold-light); }

.menu-toggle { display:none; background:none; border:0; padding:8px; }
.menu-toggle span { display:block; width:28px; height:1px; background:#fff; margin:6px 0; }

/* ==========================================================
   >>> ALTERE AQUI: FUNDO DA CAPA PRINCIPAL <<<
   Para usar uma foto:
   background:
     linear-gradient(rgba(0,0,0,.40), rgba(0,0,0,.50)),
     url("images/capa.jpg") center/cover no-repeat;
   ========================================================== */
.hero { min-height:calc(100vh - 126px); position:relative; display:grid; place-items:center; color:#fff; overflow:hidden; }
.hero-bg {
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 70% 30%, rgba(182,150,88,.14), transparent 25%),
    linear-gradient(rgba(0,0,0,.40), rgba(0,0,0,.50)),
     url("imagens/capa.jpg.jpg") center/cover no-repeat;
}
.hero-bg::after { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px); background-size:72px 72px; }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,.10), rgba(0,0,0,.44)),radial-gradient(circle at 50% 70%, transparent, rgba(0,0,0,.25)); }

.hero-content { position:relative; z-index:2; text-align:center; max-width:990px; padding:80px 0; }
.hero-logo-mark { margin:0 auto 56px; display:inline-flex; flex-direction:column; align-items:center; }
.hero-logo-main { font-family:var(--serif); color:var(--gold-light); font-size:clamp(34px,5vw,64px); letter-spacing:.12em; line-height:.95; }
.hero-logo-sub { margin-top:14px; font-size:11px; letter-spacing:.60em; color:rgba(255,255,255,.72); }

.eyebrow { display:inline-block; margin-bottom:18px; color:var(--gold-light); font-size:11px; letter-spacing:.28em; text-transform:uppercase; font-weight:600; }
.eyebrow.dark { color:#8d7447; }

h1,h2,h3,h4 { font-family:var(--serif); margin-top:0; line-height:1.05; }
h1 { font-size:clamp(48px,7vw,92px); font-weight:500; letter-spacing:-.02em; max-width:1000px; margin-inline:auto; margin-bottom:26px; }
h2 { font-size:clamp(42px,5vw,68px); font-weight:500; letter-spacing:-.02em; margin-bottom:26px; }
h3 { font-size:32px; font-weight:600; }

.hero-text { max-width:720px; margin:0 auto 36px; color:rgba(255,255,255,.78); font-size:17px; }
.hero-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }

.btn { min-height:52px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; padding:0 26px; border:1px solid transparent; font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; transition:transform .25s ease, background .25s ease, border-color .25s ease, color .25s ease; }
.btn:hover { transform:translateY(-2px); }
.btn-small { min-height:42px; padding:0 18px; font-size:10px; }
.btn-gold { background:var(--gold); color:#fff; }
.btn-gold:hover { background:#a5854d; }
.btn-outline { border-color:rgba(255,255,255,.35); color:#fff; background:rgba(255,255,255,.03); }
.btn-outline:hover { border-color:var(--gold-light); }
.btn-dark { background:var(--black); color:#fff; }

.scroll-down { position:absolute; z-index:3; left:50%; bottom:24px; transform:translateX(-50%); color:var(--gold-light); font-size:22px; opacity:.85; animation:bounce 2s infinite; }
@keyframes bounce { 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,8px)} }

.section { padding:120px 0; }
.section-light { background:var(--offwhite); }
.section-cream { background:var(--cream); }
.section-champagne { background:#e4d7bf; }
.section-dark { background:var(--black); color:#fff; }

.section-heading { max-width:780px; }
.section-heading.center { text-align:center; margin:0 auto 66px; }
.section-heading p { color:var(--muted); max-width:670px; margin-inline:auto; }
.section-dark .section-heading p { color:rgba(255,255,255,.62); }

.split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(50px,8vw,120px); }
.align-center { align-items:center; }
.content-block p { font-size:16px; color:#5c574f; margin-bottom:20px; }

.mini-features { display:grid; gap:16px; margin-top:42px; }
.mini-features > div { display:grid; grid-template-columns:46px 1fr; gap:16px; align-items:center; border-top:1px solid rgba(32,32,32,.12); padding-top:16px; }
.mini-features strong { font-family:var(--serif); color:#927648; font-size:22px; }
.mini-features span { font-weight:500; }

.procedure-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.procedure-card { border-radius:var(--radius); overflow:hidden; background:var(--offwhite); box-shadow:0 12px 35px rgba(0,0,0,.045); transition:transform .35s ease, box-shadow .35s ease; }
.procedure-card:hover { transform:translateY(-7px); box-shadow:var(--shadow); }

.procedure-image { height:250px; background-size:cover; background-position:center; position:relative; overflow:hidden; }
.procedure-image::after,.image-frame::after,.gallery-item::after { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.18), transparent 60%); }

/* ==========================================================
   >>> ALTERE AQUI: FOTOS DOS PROCEDIMENTOS <<<
   EXEMPLO:
   .image-ultraformer {
      background: url("images/ultraformer.jpg") center/cover no-repeat;
   }
   ========================================================== */
.image-ultraformer {  background-image: url('imagens/ultraformer.jpg.webp');
  background-size: cover;
  background-position: center;
}
.image-co2 {  background-image: url('imagens/co2.jpg.webp');
  background-size: cover;
  background-position: center;
}
.image-botox {  background-image: url('imagens/botox.jpg.webp');
  background-size: cover;
  background-position: center;
}
.image-preenchimento {  background-image: url('imagens/labial.jpg.jpg');
  background-size: cover;
  background-position: center;
}
.image-bioestimulador {  background-image: url('imagens/bioestimulador.jpg.webp');
  background-size: cover;
  background-position: center;
}
.image-crio {  background-image: url('imagens/crio.jpg.webp');
  background-size: cover;
  background-position: center;
}

.procedure-body { padding:28px; }
.tag { display:inline-block; color:#8b7144; font-size:10px; letter-spacing:.18em; text-transform:uppercase; margin-bottom:13px; }
.procedure-body h3 { font-size:31px; margin-bottom:14px; }
.procedure-body p { color:var(--muted); font-size:14px; min-height:68px; }
.text-link { background:none; border:0; padding:0; color:#8b7144; font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.center-actions { display:flex; justify-content:center; margin-top:48px; }

.hidden-section { display:none; }
.hidden-section.show { display:block; }
.all-treatments { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.treatment-group { background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:var(--radius); padding:34px; }
.treatment-group h3 { font-size:34px; }
.treatment-group ul { padding-left:18px; color:var(--muted); }
.treatment-group li { margin-bottom:9px; }

.tech-list { max-width:980px; margin:0 auto; }
.tech-item { display:grid; grid-template-columns:90px 1fr; gap:30px; padding:32px 0; border-top:1px solid rgba(255,255,255,.11); }
.tech-item:last-child { border-bottom:1px solid rgba(255,255,255,.11); }
.tech-item > span { color:var(--gold-light); font-family:var(--serif); font-size:28px; }
.tech-item h3 { margin-bottom:8px; }
.tech-item p { color:rgba(255,255,255,.62); margin:0; max-width:720px; }

.image-frame { position:relative; min-height:570px; border-radius:28px; overflow:hidden; box-shadow:var(--shadow); }

/* ==========================================================
   >>> ALTERE AQUI: FOTO DO LIPEDEMA <<<
   Exemplo:
   .image-lipedema {
      background:url("images/lipedema.jpg") center/cover no-repeat;
   }
   ========================================================== */
.image-lipedema {  background-image: url('imagens/lipedema.jpg.jpg');
  background-size: cover;
  background-position: center;
}

/* ==========================================================
   >>> ALTERE AQUI: SUA FOTO <<<
   1. coloque "samara.jpg" dentro da pasta images
   2. substitua pela linha:
   background:url("images/samara.jpg") center/cover no-repeat;
   ========================================================== */
.image-samara {
  background-image: url('imagens/samara.jpg.jpg');
  background-size: cover;
  background-position: center;
}

.image-label { position:relative; z-index:2; border:1px solid rgba(255,255,255,.45); color:#fff; padding:14px 18px; letter-spacing:.18em; font-size:11px; }

.pill-list { display:flex; flex-wrap:wrap; gap:9px; margin:26px 0; }
.pill-list span,.credentials span { border:1px solid rgba(54,46,36,.16); background:rgba(255,255,255,.32); padding:9px 14px; border-radius:999px; font-size:12px; }
.notice { border-left:2px solid #967b4b; padding:14px 0 14px 18px; margin:24px 0 30px; color:#5d5141; font-size:13px; }
.credentials { display:flex; flex-wrap:wrap; gap:9px; margin:30px 0; }
.small-note { font-size:12px!important; color:#8a847c!important; }

/* ==========================================================
   >>> ALTERE AQUI: FOTOS DA CLÍNICA <<<
   Exemplos:
   .gallery-1 { background:url("images/recepcao.jpg") center/cover no-repeat; }
   .gallery-2 { background:url("images/sala.jpg") center/cover no-repeat; }
   .gallery-3 { background:url("images/equipamentos.jpg") center/cover no-repeat; }
   ========================================================== */
.gallery-grid { display:grid; grid-template-columns:1.3fr .7fr; grid-template-rows:270px 270px; gap:18px; }
.gallery-item { position:relative; border-radius:22px; overflow:hidden; display:flex; align-items:flex-end; padding:22px; color:#fff; background-size:cover; box-shadow:0 10px 30px rgba(0,0,0,.06); }
.gallery-item span { position:relative; z-index:2; font-family:var(--serif); font-size:30px; }
.gallery-1 { grid-row:1/3; background:linear-gradient(145deg,#c6b397,#7d6953); }
.gallery-2 { background:linear-gradient(145deg,#d2c2a9,#85715d); }
.gallery-3 { background:url("imagens/tec.jpg.jpeg") center/cover no-repeat; }
.gallery-4 { display:none; }

.results-placeholder { max-width:920px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.results-placeholder > div { min-height:440px; border-radius:24px; background:linear-gradient(145deg,#d9d1c6,#bca98f); display:flex; flex-direction:column; justify-content:flex-end; padding:24px; color:#fff; }
.results-placeholder strong { font-family:var(--serif); font-size:32px; }
.results-placeholder span { opacity:.72; font-size:12px; }

.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.step { border-top:1px solid rgba(255,255,255,.16); padding-top:22px; }
.step > span { color:var(--gold-light); font-family:var(--serif); font-size:28px; }
.step h3 { font-size:27px; margin:20px 0 10px; }
.step p { color:rgba(255,255,255,.60); font-size:14px; }

.faq-wrap { display:grid; grid-template-columns:.7fr 1.3fr; gap:70px; }
.faq-list details { border-top:1px solid rgba(0,0,0,.10); padding:20px 0; }
.faq-list details:last-child { border-bottom:1px solid rgba(0,0,0,.10); }
.faq-list summary { cursor:pointer; list-style:none; font-family:var(--serif); font-size:24px; font-weight:600; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list p { color:var(--muted); max-width:720px; }

.luxury-cta { background:radial-gradient(circle at 80% 40%, rgba(182,150,88,.12), transparent 25%),var(--black); color:#fff; padding:110px 0; text-align:center; }
.luxury-cta .container { max-width:850px; }
.luxury-cta h2 { margin-bottom:20px; }
.luxury-cta p { color:rgba(255,255,255,.64); margin-bottom:28px; }

.contact-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:90px; }
.contact-links { display:flex; flex-direction:column; gap:12px; margin-top:30px; }
.contact-links a { color:#8b7144; font-weight:600; }

.lead-form { background:#fff; padding:36px; border-radius:26px; box-shadow:var(--shadow); }
.form-row { margin-bottom:18px; }
.form-row label { display:grid; gap:8px; color:#514c45; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
input,select,textarea { width:100%; border:1px solid rgba(0,0,0,.12); background:#fbfaf7; color:var(--text); border-radius:14px; padding:14px 15px; outline:none; transition:border-color .2s ease; }
input:focus,select:focus,textarea:focus { border-color:var(--gold); }
.consent { display:flex; gap:10px; align-items:flex-start; font-size:12px; color:#777067; margin:15px 0 22px; }
.consent input { width:auto; margin-top:4px; }

.footer { background:#050505; color:#fff; padding:68px 0 24px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:60px; }
.footer h4 { color:var(--gold-light); font-family:var(--sans); font-size:11px; text-transform:uppercase; letter-spacing:.14em; }
.footer a { display:block; color:rgba(255,255,255,.62); margin:7px 0; font-size:13px; }
.footer-brand p { color:rgba(255,255,255,.48); font-size:13px; margin-top:20px; }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; margin-top:50px; padding-top:20px; border-top:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.42); font-size:11px; }

.whatsapp-float { position:fixed; right:22px; bottom:22px; z-index:45; background:var(--gold); color:#fff; border-radius:999px; padding:14px 20px; font-weight:600; font-size:12px; box-shadow:0 15px 35px rgba(0,0,0,.22); }

.modal { position:fixed; inset:0; z-index:100; display:none; place-items:center; padding:24px; }
.modal.open { display:grid; }
.modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.72); backdrop-filter:blur(10px); }
.modal-content { position:relative; width:min(900px,100%); max-height:90vh; overflow:auto; background:var(--offwhite); border-radius:28px; box-shadow:0 40px 100px rgba(0,0,0,.35); }
.modal-close { position:absolute; z-index:3; top:18px; right:20px; width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.24); background:rgba(0,0,0,.25); color:#fff; font-size:25px; }
.modal-hero { min-height:300px; display:flex; flex-direction:column; justify-content:flex-end; padding:48px; color:#fff; background:radial-gradient(circle at 80% 20%, rgba(182,150,88,.25), transparent 30%),linear-gradient(145deg,#16130f,#090909); }
.modal-hero h2 { margin-bottom:10px; }
.modal-hero p { color:rgba(255,255,255,.7); max-width:650px; }
.modal-body { padding:48px; }
.modal-body section { margin-bottom:38px; }
.modal-body h3 { font-size:34px; margin-bottom:12px; }
.modal-body p,.modal-body li { color:var(--muted); }
.modal-body ul { padding-left:20px; }
.modal-highlight { background:var(--black); color:#fff; padding:32px; border-radius:22px; }
.modal-highlight p { color:rgba(255,255,255,.66); }

.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:none; }

@media (max-width:1080px) {
  .main-nav { position:fixed; top:126px; left:0; right:0; background:rgba(11,11,11,.98); padding:24px; display:none; flex-direction:column; align-items:flex-start; border-top:1px solid rgba(255,255,255,.08); }
  .main-nav.open { display:flex; }
  .menu-toggle { display:block; }
  .procedure-grid { grid-template-columns:repeat(2,1fr); }
  .steps { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:780px) {
  .announcement { display:none; }
  .site-header { top:0; }
  .nav-wrap { min-height:78px; }
  .brand-main { font-size:20px; }
  .brand-sub { font-size:8px; letter-spacing:.28em; }
  .main-nav { top:78px; }
  .hero { min-height:calc(100vh - 78px); }
  .hero-content { padding:70px 0 90px; }
  .hero-logo-mark { margin-bottom:36px; }
  .hero-logo-sub { letter-spacing:.30em; font-size:9px; }
  h1 { font-size:clamp(44px,12vw,66px); }
  h2 { font-size:clamp(38px,10vw,54px); }
  .hero-text { font-size:15px; }
  .section { padding:86px 0; }
  .split,.faq-wrap,.contact-grid { grid-template-columns:1fr; gap:50px; }
  .procedure-grid { grid-template-columns:1fr; }
  .all-treatments { grid-template-columns:1fr; }
  .gallery-grid { grid-template-columns:1fr; grid-template-rows:auto; }
  .gallery-item { min-height:280px; }
  .gallery-1 { grid-row:auto; }
  .gallery-4 { display:flex; background:linear-gradient(145deg,#c2ad8a,#735f48); }
  .results-placeholder { grid-template-columns:1fr; }
  .steps { grid-template-columns:1fr; }
  .tech-item { grid-template-columns:52px 1fr; gap:16px; }
  .image-frame { min-height:440px; }
  .footer-grid { grid-template-columns:1fr; gap:34px; }
  .footer-bottom { flex-direction:column; }
  .modal { padding:10px; }
  .modal-content { border-radius:20px; }
  .modal-hero,.modal-body { padding:32px 24px; }
  .lead-form { padding:24px; }
}

@media (max-width:480px) {
  .container { width:min(100% - 26px,1180px); }
  .brand { min-width:auto; }
  .brand-sub { max-width:190px; }
  .hero-actions { flex-direction:column; }
  .hero-actions .btn { width:100%; }
  .procedure-image { height:220px; }
  .whatsapp-float { left:12px; right:12px; bottom:12px; text-align:center; }
}