/* ============================================================
   style.css | Components — Dra. Leila Márcia
   Paleta creme · branco · dourado · rosé
   ============================================================ */

/* ===================== HEADER ===================== */
.header {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:var(--header-h);
  background:rgba(250,248,244,0.93);
  backdrop-filter:blur(20px) saturate(1.3);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);
  border-bottom:1px solid var(--cream-border);
  transition:transform 0.35s var(--ease), box-shadow 0.3s ease;
}
.header.scrolled { box-shadow:var(--shadow-md); }
.header.hidden   { transform:translateY(-100%); }

.header-inner {
  max-width:var(--container); margin:0 auto;
  padding:0 var(--sp-6); height:100%;
  display:flex; align-items:center;
  justify-content:space-between; gap:var(--sp-8);
}

.logo-wrap { display:flex; flex-direction:column; line-height:1.1; text-decoration:none; }
.logo-name { font-family:var(--font-serif); font-size:1.15rem; font-weight:500; color:var(--dark); letter-spacing:0.01em; }
.logo-sub  { font-family:var(--font); font-size:0.58rem; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold); }

.nav-desktop { display:flex; align-items:center; gap:var(--sp-8); }
.nav-desktop a {
  font-size:var(--text-sm); font-weight:500; color:var(--text-muted);
  letter-spacing:0.01em; position:relative; transition:color var(--t);
}
.nav-desktop a::after {
  content:''; position:absolute; bottom:-4px; left:0;
  width:0; height:1px; background:var(--gold);
  transition:width 0.3s var(--ease);
}
.nav-desktop a:hover { color:var(--text); }
.nav-desktop a:hover::after { width:100%; }

.header-actions { display:flex; align-items:center; gap:var(--sp-3); }

.hamburger { display:none; flex-direction:column; gap:5px; width:28px; padding:4px 0; }
.hamburger span {
  display:block; height:1.5px; background:var(--text); border-radius:1px;
  transition:transform 0.3s var(--ease),opacity 0.2s ease; transform-origin:center;
}
.hamburger.active span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity:0; }
.hamburger.active span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

.mobile-nav {
  position:fixed; inset:0; z-index:999; background:var(--cream);
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:var(--sp-8);
  opacity:0; pointer-events:none; transition:opacity 0.3s var(--ease);
}
.mobile-nav.active { opacity:1; pointer-events:auto; }
.mobile-nav a { font-family:var(--font-serif); font-size:var(--text-3xl); font-weight:500; color:var(--text); transition:color var(--t); }
.mobile-nav a:hover { color:var(--gold); }

/* ===================== HERO ===================== */
.hero {
  min-height:100vh; padding-top:var(--header-h);
  display:flex; align-items:center;
  background:linear-gradient(135deg, var(--white) 0%, var(--cream) 50%, var(--cream-dk) 100%);
  position:relative; overflow:hidden;
}
.hero::before {
  content:''; position:absolute; top:-20%; right:-10%;
  width:700px; height:700px;
  background:radial-gradient(ellipse, rgba(201,168,76,0.07) 0%, transparent 65%);
  pointer-events:none;
}
.hero::after {
  content:''; position:absolute; bottom:-15%; left:-5%;
  width:500px; height:500px;
  background:radial-gradient(ellipse, rgba(201,168,76,0.06) 0%, transparent 65%);
  pointer-events:none;
}

.hero-inner {
  max-width:var(--container); margin:0 auto;
  padding:var(--sp-16) var(--sp-6);
  width:100%; display:grid;
  grid-template-columns:1fr 400px;
  gap:var(--sp-16); align-items:center; position:relative; z-index:1;
}

.hero-tag {
  display:inline-flex; align-items:center; gap:var(--sp-2);
  font-size:var(--text-xs); font-weight:600; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--gold); padding:var(--sp-2) var(--sp-4);
  border:1px solid rgba(201,168,76,0.3);
  border-radius:var(--r-full); background:var(--gold-lt);
  margin-bottom:var(--sp-5);
}

.hero h1 {
  font-family:var(--font-serif);
  font-size:var(--text-hero);
  font-weight:400; line-height:1.08;
  color:var(--dark); margin-bottom:var(--sp-6);
  letter-spacing:-0.01em;
}
.hero h1 em { font-style:italic; color:var(--gold); }
.hero h1 .gold { color:var(--gold); font-style:italic; }

.hero-sub {
  font-size:var(--text-lg); font-weight:300; color:var(--text-muted);
  max-width:500px; line-height:1.75; margin-bottom:var(--sp-8);
}

.hero-btns { display:flex; gap:var(--sp-3); flex-wrap:wrap; margin-bottom:var(--sp-10); }

.hero-stats { display:flex; gap:var(--sp-8); }
.hero-stat strong { display:block; font-family:var(--font); font-size:2rem; font-weight:700; color:var(--dark); line-height:1; letter-spacing:-0.02em; }
.hero-stat span   { font-size:0.65rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-faint); }

/* Hero photo */
.hero-photo-wrap { position:relative; display:flex; justify-content:center; }

.hero-photo-frame {
  width:100%; max-width:360px;
  aspect-ratio:3/4;
  border-radius:180px 180px 140px 140px;
  overflow:hidden; background:var(--cream-dk);
  box-shadow:var(--shadow-lg), 0 0 0 6px rgba(201,168,76,0.15), 0 0 0 14px rgba(201,168,76,0.07);
}
.hero-photo-frame img { width:100%; height:100%; object-fit:cover; object-position:center top; }

.hero-badge {
  position:absolute; bottom:var(--sp-6); left:-var(--sp-4);
  background:var(--white); border-radius:var(--r-lg);
  padding:var(--sp-3) var(--sp-5);
  box-shadow:var(--shadow-lg);
  display:flex; align-items:center; gap:var(--sp-3); white-space:nowrap;
  border:1px solid var(--cream-border);
}
.hero-badge-icon { width:32px; height:32px; background:var(--gold-lt); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.9rem; }
.hero-badge strong { display:block; font-size:var(--text-sm); color:var(--dark); font-weight:600; }
.hero-badge span   { font-size:0.7rem; color:var(--text-faint); }

/* ===================== STATS BAR ===================== */
.stats-bar { background:var(--dark); padding:var(--sp-12) var(--sp-6); }
.stats-bar-inner {
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:var(--sp-6); text-align:center;
}
.stat-num { font-family:var(--font); font-size:clamp(2.5rem,5vw,3.75rem); font-weight:700; color:var(--gold); line-height:1; letter-spacing:-0.03em; }
.stat-lbl { margin-top:var(--sp-3); font-size:var(--text-xs); font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.45); }

/* ===================== SOBRE ===================== */
.sobre-grid { display:grid; grid-template-columns:400px 1fr; gap:var(--sp-16); align-items:center; }

.sobre-img { position:relative; }
.sobre-img-frame { border-radius:var(--r-xl); overflow:hidden; aspect-ratio:4/5; background:var(--cream-dk); }
.sobre-img-frame img { width:100%; height:100%; object-fit:cover; }
.sobre-deco {
  position:absolute; bottom:-var(--sp-5); right:-var(--sp-5);
  width:140px; height:140px;
  border:2px solid rgba(201,168,76,0.2); border-radius:var(--r-xl); z-index:-1;
}

.sobre-content .lead { margin-bottom:var(--sp-6); }

.credenciais { margin-top:var(--sp-8); display:flex; flex-direction:column; gap:var(--sp-4); }
.credencial  { display:flex; align-items:flex-start; gap:var(--sp-4); }
.credencial-icon { width:34px; height:34px; min-width:34px; border-radius:50%; background:var(--gold-lt); display:flex; align-items:center; justify-content:center; font-size:0.85rem; margin-top:2px; }
.credencial-text { font-size:var(--text-sm); color:var(--text-muted); line-height:1.5; }
.credencial-text strong { display:block; font-size:var(--text-base); color:var(--text); margin-bottom:2px; }

/* ===================== TRATAMENTOS ===================== */
.trat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); margin-top:var(--sp-12); }

.trat-card {
  background:var(--white); border-radius:var(--r-lg);
  border:1px solid var(--border);
  padding:var(--sp-8) var(--sp-6);
  transition:box-shadow var(--t),transform var(--t),border-color var(--t);
  position:relative; overflow:hidden;
}
.trat-card::after {
  content:''; position:absolute; bottom:0; left:0;
  width:100%; height:3px; background:var(--gold);
  transform:scaleX(0); transform-origin:left;
  transition:transform 0.35s var(--ease);
}
.trat-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-3px); border-color:rgba(201,168,76,0.2); }
.trat-card:hover::after { transform:scaleX(1); }

.trat-icon { width:46px; height:46px; border-radius:var(--r-md); background:var(--gold-lt); display:flex; align-items:center; justify-content:center; font-size:1.35rem; margin-bottom:var(--sp-5); }
.trat-card h3 { font-family:var(--font-serif); font-size:1.15rem; font-weight:500; color:var(--dark); margin-bottom:var(--sp-3); }
.trat-card p  { font-size:var(--text-sm); color:var(--text-faint); line-height:1.65; }

/* ===================== PÓS-PROCEDIMENTO ===================== */
.pos-section { background:var(--dark); }

.pos-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-5); margin-top:var(--sp-12); }

.pos-card {
  display:flex; align-items:flex-start; gap:var(--sp-5);
  padding:var(--sp-6); border-radius:var(--r-lg);
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.04);
  text-decoration:none; color:#fff;
  transition:background var(--t),border-color var(--t),transform var(--t);
}
.pos-card:hover { background:rgba(255,255,255,0.09); border-color:rgba(201,168,76,0.4); transform:translateY(-2px); }

.pos-card-icon { width:50px; height:50px; min-width:50px; border-radius:var(--r-md); background:rgba(201,168,76,0.12); display:flex; align-items:center; justify-content:center; font-size:1.4rem; }
.pos-card-body h3 { font-family:var(--font-serif); font-size:1.05rem; font-weight:500; color:#fff; margin-bottom:var(--sp-2); }
.pos-card-body p  { font-size:var(--text-sm); color:rgba(255,255,255,0.5); line-height:1.6; }
.pos-card-arrow   { margin-left:auto; padding-left:var(--sp-4); color:var(--gold); font-size:1.1rem; align-self:center; opacity:0.6; transition:opacity var(--t),transform var(--t); }
.pos-card:hover .pos-card-arrow { opacity:1; transform:translateX(3px); }

/* ===================== UNIDADES ===================== */
.unidades-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-6); margin-top:var(--sp-12); }

.unidade-card { border-radius:var(--r-lg); border:1px solid var(--border); overflow:hidden; }

.unidade-header { background:var(--dark); padding:var(--sp-6) var(--sp-8); display:flex; align-items:center; gap:var(--sp-4); }
.unidade-header span { font-size:1.3rem; }
.unidade-header h3 { font-family:var(--font-serif); font-size:1.25rem; font-weight:500; color:#fff; }
.unidade-header p  { font-size:var(--text-xs); color:rgba(255,255,255,0.4); font-weight:600; letter-spacing:0.1em; text-transform:uppercase; }

.unidade-body { padding:var(--sp-8); display:flex; flex-direction:column; gap:var(--sp-5); background:var(--white); }

.unidade-info-row { display:flex; align-items:flex-start; gap:var(--sp-4); }
.unidade-info-icon { width:30px; height:30px; min-width:30px; border-radius:50%; background:var(--gold-lt); display:flex; align-items:center; justify-content:center; font-size:0.8rem; margin-top:2px; }
.unidade-info-row strong { display:block; font-size:var(--text-xs); text-transform:uppercase; letter-spacing:0.1em; color:var(--gold); margin-bottom:2px; }
.unidade-info-row p, .unidade-info-row a { font-size:var(--text-sm); color:var(--text-muted); line-height:1.5; }

/* ===================== BLOG ===================== */
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-6); margin-top:var(--sp-12); }

.blog-card { border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--border); background:var(--white); text-decoration:none; display:flex; flex-direction:column; transition:box-shadow var(--t),transform var(--t); }
.blog-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-3px); }

.blog-card-img { aspect-ratio:16/9; background:var(--cream-dk); display:flex; align-items:center; justify-content:center; font-size:2.5rem; border-bottom:1px solid var(--border); }
.blog-card-img img { width:100%; height:100%; object-fit:cover; }

.blog-card-body { padding:var(--sp-6); flex:1; display:flex; flex-direction:column; }

.blog-tag { font-size:0.65rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold); margin-bottom:var(--sp-3); }

.blog-card-body h3 { font-family:var(--font-serif); font-size:1.05rem; font-weight:500; color:var(--dark); line-height:1.35; margin-bottom:var(--sp-3); }
.blog-card-body p  { font-size:var(--text-sm); color:var(--text-faint); line-height:1.65; flex:1; margin-bottom:var(--sp-5); }
.blog-card-footer  { display:flex; align-items:center; justify-content:space-between; }
.blog-card-date    { font-size:var(--text-xs); color:var(--text-faint); }
.blog-card-read    { font-size:var(--text-xs); font-weight:600; color:var(--gold); }

/* ===================== CONTATO ===================== */
.contato-grid { display:grid; grid-template-columns:1fr 440px; gap:var(--sp-16); align-items:start; }

.contato-info-rows { margin-top:var(--sp-8); display:flex; flex-direction:column; gap:var(--sp-6); }
.contato-info-row  { display:flex; align-items:flex-start; gap:var(--sp-4); }
.contato-info-icon { width:42px; height:42px; min-width:42px; background:var(--gold-lt); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.05rem; }
.contato-info-row strong { display:block; font-size:var(--text-xs); font-weight:700; text-transform:uppercase; letter-spacing:0.12em; color:var(--gold); margin-bottom:var(--sp-1); }
.contato-info-row p, .contato-info-row a { font-size:var(--text-sm); color:var(--text-muted); line-height:1.6; }
.contato-info-row a:hover { color:var(--gold); }

.contato-btns { display:flex; gap:var(--sp-3); flex-wrap:wrap; margin-top:var(--sp-8); }

.form-card { background:var(--white); border-radius:var(--r-lg); padding:var(--sp-10); box-shadow:var(--shadow-lg); border:1px solid var(--border); }
.form-card h3 { font-family:var(--font-serif); font-size:1.6rem; font-weight:500; color:var(--dark); margin-bottom:var(--sp-2); }
.form-card > p { font-size:var(--text-sm); color:var(--text-faint); margin-bottom:var(--sp-8); }

.form-group { margin-bottom:var(--sp-5); }
.form-row   { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); margin-bottom:var(--sp-5); }

.form-label { display:block; font-size:var(--text-xs); font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-faint); margin-bottom:var(--sp-2); }

.form-input { width:100%; padding:var(--sp-3) var(--sp-4); border:1.5px solid var(--cream-border); border-radius:var(--r-md); font-size:var(--text-sm); font-family:var(--font); color:var(--text); background:var(--cream); transition:border-color var(--t),background var(--t); outline:none; }
.form-input:focus { border-color:var(--gold); background:var(--white); }
textarea.form-input { resize:vertical; min-height:110px; }

/* ===================== FOOTER ===================== */
.footer { background:var(--dark); color:rgba(255,255,255,0.55); padding:var(--sp-16) var(--sp-6) var(--sp-8); }
.footer-inner { max-width:var(--container); margin:0 auto; }

.footer-top { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:var(--sp-10); padding-bottom:var(--sp-10); border-bottom:1px solid rgba(255,255,255,0.07); margin-bottom:var(--sp-8); }

.footer-brand .logo-name { color:#fff; }
.footer-brand .logo-sub  { color:var(--gold); }
.footer-brand p { font-size:var(--text-sm); margin-top:var(--sp-4); line-height:1.7; }

.footer-col h4 { font-size:var(--text-xs); font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold); margin-bottom:var(--sp-5); }
.footer-col ul { display:flex; flex-direction:column; gap:var(--sp-3); }
.footer-col a  { font-size:var(--text-sm); color:rgba(255,255,255,0.45); transition:color var(--t); }
.footer-col a:hover { color:#fff; }

.footer-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--sp-4); font-size:var(--text-xs); color:rgba(255,255,255,0.25); }

/* WhatsApp float */
.wa-float {
  position:fixed; bottom:var(--sp-6); right:var(--sp-6); z-index:900;
  width:52px; height:52px; background:#25D366; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(37,211,102,0.5);
  transition:transform var(--t),box-shadow var(--t);
}
.wa-float:hover { transform:scale(1.1); box-shadow:0 6px 28px rgba(37,211,102,0.65); }
.wa-float svg { width:28px; height:28px; fill:#fff; }

/* ===================== PÓS-PROCEDIMENTO PAGE ===================== */
.page-hero { padding:calc(var(--header-h) + var(--sp-16)) var(--sp-6) var(--sp-12); background:var(--dark); text-align:center; }
.page-hero .label-gold { color:var(--gold); }
.page-hero h1 { font-family:var(--font-serif); font-size:var(--text-4xl); font-weight:400; color:#fff; margin-bottom:var(--sp-4); }
.page-hero p  { font-size:var(--text-lg); color:rgba(255,255,255,0.6); max-width:580px; margin:0 auto; line-height:1.7; font-weight:300; }

.pos-content { max-width:760px; margin:0 auto; padding:var(--sp-16) var(--sp-6); }

.pos-block { margin-bottom:var(--sp-12); }

.pos-block-header { display:flex; align-items:center; gap:var(--sp-4); margin-bottom:var(--sp-6); padding-bottom:var(--sp-5); border-bottom:1px solid var(--border); }
.pos-block-num { width:34px; height:34px; background:var(--dark); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:var(--text-sm); font-weight:700; flex-shrink:0; }
.pos-block-header h2 { font-family:var(--font-serif); font-size:var(--text-2xl); font-weight:500; color:var(--dark); }

.pos-list { display:flex; flex-direction:column; gap:var(--sp-4); }
.pos-list li { display:flex; align-items:flex-start; gap:var(--sp-4); font-size:var(--text-base); color:var(--text-muted); line-height:1.7; }
.pos-list li::before { content:''; width:5px; height:5px; min-width:5px; border-radius:50%; background:var(--gold); margin-top:11px; }

.alert-box { background:var(--gold-lt); border-left:4px solid var(--gold); border-radius:var(--r-md); padding:var(--sp-5) var(--sp-6); margin:var(--sp-8) 0; }
.alert-box p { font-size:var(--text-sm); color:var(--text-muted); line-height:1.65; }
.alert-box strong { color:var(--dark); }

.alert-red { background:#FFF3F3; border-left-color:#C05050; }
.alert-red p { color:#7A2020; }
.alert-red strong { color:#5C1515; }

.pos-cta-bar { background:var(--dark); border-radius:var(--r-xl); padding:var(--sp-10) var(--sp-12); text-align:center; margin-top:var(--sp-16); }
.pos-cta-bar h3 { font-family:var(--font-serif); font-size:var(--text-3xl); font-weight:400; color:#fff; margin-bottom:var(--sp-3); }
.pos-cta-bar p  { font-size:var(--text-base); color:rgba(255,255,255,0.55); margin-bottom:var(--sp-8); }

/* ===================== BLOG PAGE ===================== */
.blog-hero { padding:calc(var(--header-h) + var(--sp-16)) var(--sp-6) var(--sp-12); background:var(--dark); text-align:center; }
.blog-hero h1 { font-family:var(--font-serif); font-size:var(--text-4xl); font-weight:400; color:#fff; margin-bottom:var(--sp-4); }
.blog-hero p  { font-size:var(--text-lg); color:rgba(255,255,255,0.6); max-width:520px; margin:0 auto; font-weight:300; }

/* ===================== POST PAGE ===================== */
.post-hero { padding:calc(var(--header-h) + var(--sp-12)) var(--sp-6) var(--sp-10); background:var(--cream-dk); border-bottom:1px solid var(--border); }
.post-meta { display:flex; align-items:center; gap:var(--sp-4); margin-bottom:var(--sp-5); font-size:var(--text-xs); font-weight:600; letter-spacing:0.1em; text-transform:uppercase; }
.post-cat  { color:var(--gold); }
.post-dot  { color:var(--border); }
.post-date { color:var(--text-faint); }

.post-hero h1 { font-family:var(--font-serif); font-size:var(--text-4xl); font-weight:400; color:var(--dark); letter-spacing:-0.01em; line-height:1.2; max-width:760px; margin-bottom:var(--sp-5); }
.post-hero .lead { max-width:660px; }

.post-content { max-width:720px; margin:0 auto; padding:var(--sp-12) var(--sp-6); font-size:var(--text-lg); color:var(--text-muted); line-height:1.8; font-weight:300; }
.post-content h2 { font-family:var(--font-serif); font-size:var(--text-3xl); font-weight:500; color:var(--dark); margin:var(--sp-10) 0 var(--sp-5); }
.post-content h3 { font-family:var(--font-serif); font-size:var(--text-xl); font-weight:500; color:var(--dark); margin:var(--sp-8) 0 var(--sp-4); }
.post-content p  { margin-bottom:var(--sp-6); }
.post-content ul,.post-content ol { padding-left:var(--sp-6); margin-bottom:var(--sp-6); }
.post-content li { margin-bottom:var(--sp-3); list-style:disc; }
.post-content strong { color:var(--dark); font-weight:600; }

/* ===================== RESPONSIVO ===================== */
@media (max-width:1024px) {
  .hero-inner   { grid-template-columns:1fr 340px; gap:var(--sp-12); }
  .sobre-grid   { grid-template-columns:340px 1fr; gap:var(--sp-12); }
  .footer-top   { grid-template-columns:1fr 1fr; gap:var(--sp-8); }
}
@media (max-width:860px) {
  .hero-inner      { grid-template-columns:1fr; }
  .hero-photo-wrap { display:none; }
  .sobre-grid      { grid-template-columns:1fr; }
  .sobre-img       { display:none; }
  .trat-grid       { grid-template-columns:repeat(2,1fr); }
  .blog-grid       { grid-template-columns:repeat(2,1fr); }
  .contato-grid    { grid-template-columns:1fr; }
  .unidades-grid   { grid-template-columns:1fr; }
  .pos-grid        { grid-template-columns:1fr; }
  .nav-desktop,.header-actions .btn-outline { display:none; }
  .hamburger       { display:flex; }
  .stats-bar-inner { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px) {
  .hero h1              { font-size:clamp(2.2rem,9vw,3rem); }
  .trat-grid,.blog-grid { grid-template-columns:1fr; }
  .form-row             { grid-template-columns:1fr; }
  .footer-top           { grid-template-columns:1fr; }
  .pos-cta-bar          { padding:var(--sp-8); }
}