/* =============================
   Dr. Daniel Paixão - Endodontia
   Réplica fiel do site original (Canva Site)

   Valores de cor, fonte, peso, tracking e line-height
   extraídos diretamente do JSON de configuração interno
   do site original (window.bootstrap). O único valor que
   não pôde ser extraído com certeza é o tamanho absoluto
   em px (o Canva usa unidades internas de canvas cuja
   largura-base não é exposta) — por isso os tamanhos foram
   calibrados proporcionalmente a partir de uma âncora
   (H1 = 44px), preservando exatamente as proporções reais
   entre os elementos.
   ============================= */

:root {
  /* Verdes (3 tons muito próximos, usados em papéis diferentes no original) */
  --green-h1: #597b66;      /* H1 do hero */
  --green-h2: #506f5c;      /* H2 de seção, logo, headings de card */
  --green-sub: #50705c;     /* subtítulo do hero, tagline */

  /* Dourado */
  --gold: #b48d33;          /* botões, eyebrows, "Casos realizados em sessão ÚNICA" */
  --gold-light: #d1af5e;    /* preenchimento do ícone do botão */
  --gold-dark: #ab8115;     /* contorno do ícone do botão / hover */

  /* Texto sobre fundo escuro/botões */
  --cream: #faf8f5;

  /* Texto de corpo dentro dos cards */
  --card-text: #293b30;

  /* Pills dos casos */
  --pill-red: #e17666;
  --pill-green: #40bb6f;
  --pill-bg: #0c1210;

  /* Fundo dos cards escuros de raio-x */
  --dark-card-bg: #061420;

  /* Fundo geral (tom creme, não branco puro) */
  --bg-page: #faf8f5;
  --bg-cases: #f9f2ed;

  /* Não confirmados diretamente (sem shape-fill isolável) — mantidos por
     aproximação visual a partir dos prints enviados */
  --footer-bg: #3e5140;
  --icon-circle-bg: #e8e8e8;
  --text-caption: #000000;

  --white: #ffffff;

  /* Fontes reais (confirmadas via mapa de font-id do JSON original) */
  --font-hero: 'Catamaran', sans-serif;       /* H1 + subtítulo do hero */
  --font-heading: 'Poppins', sans-serif;      /* H2, headings de card, pills */
  --font-button: 'Montserrat', sans-serif;    /* texto dos botões, logo, "Como chegar" */
  --font-caption: 'Open Sans', sans-serif;    /* eyebrows pequenos, legendas, copyright */
  --font-accent: 'Raleway', sans-serif;       /* "ENDODONTIA AVANÇADA" */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-caption);
  color: var(--card-text);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

.container {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Header ---------- */
.site-header {
  background: var(--bg-page);
  border-bottom: 1px solid #e7e5df;
  padding: 18px 0;
}

.header-inner { display: flex; justify-content: center; }

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

.logo-icon { flex-shrink: 0; }
.logo-icon img { mix-blend-mode: multiply; }

.logo-text { display: flex; flex-direction: column; line-height: 1.42; }

.logo-text strong {
  font-family: var(--font-button);
  font-weight: 700;
  font-size: 18.8px; /* 26.63 unidades originais */
  color: var(--green-h2);
  letter-spacing: 0.024em;
}

.logo-text small {
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 10px; /* 14.23 unidades originais */
  letter-spacing: 0.241em;
  color: var(--gold);
}

/* ---------- Elementos compartilhados ---------- */
.rule {
  display: block;
  width: 46px;
  height: 3px;
  background: var(--gold);
  border-radius: 2px;
  margin: 0 0 18px;
}

.rule--center { margin-left: auto; margin-right: auto; }

.rule--wide { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-dark) 15%, var(--gold-dark) 85%, transparent); margin: 0; }

.eyebrow {
  font-family: var(--font-caption);
  font-weight: 400;
  font-size: 15px; /* 21.45 unidades originais */
  letter-spacing: 0.129em;
  line-height: 1.61;
  color: var(--gold);
  margin: 0 0 6px;
}

.eyebrow.center { text-align: center; }

.section-title {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--green-h2);
  font-size: 32px; /* 45.13 unidades originais */
  line-height: 1.3;
  letter-spacing: 0.024em;
  margin: 0 0 40px;
}

.section-title.center { text-align: center; }
.section-title.gold {
  color: var(--gold);
  font-size: 30px; /* 42.90 unidades originais */
  line-height: 1.61;
  margin-bottom: 32px;
}

.underline {
  position: relative;
  display: inline-block;
}
.underline::after {
  content: '';
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 2px;
  height: 4px;
  background: var(--gold);
  border-radius: 2px;
  z-index: -1;
  opacity: .55;
}
.underline--gold::after { background: var(--gold-dark); }

.divider {
  display: block;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--pill-red), var(--gold));
  border-radius: 2px;
  opacity: .55;
  margin: 40px 0;
}

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--gold);
  color: var(--cream);
  font-family: var(--font-button);
  font-weight: 700;
  font-size: 25px; /* 35.41 unidades (botão principal do hero) */
  text-decoration: none;
  padding: 16px 34px;
  border-radius: 999px;
  box-shadow: 0 12px 24px -8px rgba(180, 141, 51, .55);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.btn:hover { background: var(--gold-dark); transform: translateY(-1px); }

.btn-sm { font-size: 24px; padding: 12px 26px; } /* 33.81 unidades (WhatsApp de urgência) */
.btn-final { font-size: 17.8px; padding: 14px 30px; } /* 25.26 unidades (CTA final / Como chegar) */

.btn-icon { display: inline-flex; align-items: center; }

.btn-outline {
  background: rgba(255,255,255,.12);
  box-shadow: none;
  font-size: 17.8px;
  padding: 10px 22px;
  color: var(--cream);
}
.btn-outline:hover { background: rgba(255,255,255,.2); }

.underline-text { text-decoration: underline; text-underline-offset: 3px; }

.btn-caption {
  text-align: center;
  font-family: var(--font-caption);
  font-weight: 700;
  font-size: 12px; /* 17.2 unidades originais */
  letter-spacing: 0.129em;
  line-height: 1.61;
  color: var(--text-caption);
  margin-top: 10px;
}

.cta-center { display: flex; flex-direction: column; align-items: center; }

/* ---------- Hero ---------- */
.hero {
  padding: 64px 24px 56px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero h1 {
  font-family: var(--font-hero);
  font-weight: 400;
  color: var(--green-h1);
  font-size: 44px; /* 62.51 unidades originais — âncora da escala */
  line-height: 1.0;
  letter-spacing: 0.01em;
  margin: 0 0 20px;
}

.hero-sub {
  max-width: 620px;
  font-family: var(--font-hero);
  font-weight: 400;
  color: var(--green-sub);
  font-size: 16px; /* 22.73 unidades originais */
  letter-spacing: 0.043em;
  line-height: 1.61;
  margin: 0 0 32px;
}

/* ---------- Especialista ---------- */
.specialist {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 56px;
  align-items: center;
  padding: 40px 24px 90px;
}

.specialist-photo img {
  width: 100%;
  aspect-ratio: 4 / 3; /* proporção real da foto (1600x1200) */
  object-fit: cover;
  background: #dcdad2;
  border-radius: 20px;
  box-shadow: 0 20px 40px -16px rgba(0,0,0,.25);
}

.specialist-info h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--green-h2);
  font-size: 32px; /* 45.13 unidades originais */
  letter-spacing: 0.024em;
  margin: 0 0 16px;
}

.specialist-text {
  color: var(--card-text);
  font-family: var(--font-heading);
  font-size: 14px;
  letter-spacing: 0.122em;
  line-height: 1.61;
  margin: 0 0 24px;
}

.badges {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin: 0;
  padding: 0;
}

.badges li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  color: var(--green-h2);
}

/* ---------- Por que escolher ---------- */
.why { background: var(--bg-page); padding: 70px 0 60px; }

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 44px;
}

.why-card { text-align: center; padding: 0 12px; }

.why-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: var(--icon-circle-bg);
  margin-bottom: 20px;
  overflow: hidden;
}

.why-icon img {
  width: 74px;
  height: 74px;
}

.why-icon img.icon-zoom {
  transform: scale(1.35);
}

.why-icon svg {
  width: 72px;
  height: 72px;
}

.why-card h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--green-h2);
  font-size: 18px; /* 19.13 unidades — mantido próximo ao tamanho visual do print (ver nota de fidelidade) */
  letter-spacing: 0.024em;
  line-height: 1.4;
  margin: 0 0 12px;
}

.why-card p {
  color: var(--card-text);
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 14.5px; /* 13.2 unidades — mantido próximo ao tamanho visual do print (ver nota de fidelidade) */
  letter-spacing: 0.03em;
  line-height: 1.61;
  margin: 0;
}

.why-card p strong { font-weight: 700; }

.tagline-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 0 44px;
}

.tagline {
  flex-shrink: 0;
  font-family: var(--font-hero);
  color: var(--green-sub);
  font-weight: 700;
  font-size: 19.6px; /* 27.87 unidades originais */
  letter-spacing: 0.07em;
  line-height: 1.3;
  white-space: nowrap;
  margin: 0;
}

/* ---------- Casos Reais ---------- */
.cases { background: var(--bg-cases); padding: 70px 0 80px; }

.cases-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 0 0 8px;
}

.case-card {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: var(--dark-card-bg);
  box-shadow: 0 16px 30px -14px rgba(0,0,0,.35);
}

.case-card img {
  width: 100%;
  aspect-ratio: 1 / 1; /* próximo à proporção real das fotos 943x792 / 874x806 */
  object-fit: cover;
  background: #d9d9d9;
}

.case-card--dark img { aspect-ratio: 3 / 4; background: #0d1420; }

.pill {
  margin: -22px auto 14px;
  position: relative;
  width: fit-content;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11.5px; /* 15.86 / 17.19 unidades originais */
  letter-spacing: 0.103em;
  line-height: 1.4;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--pill-bg);
}

.pill-red { color: var(--pill-red); }
.pill-green { color: var(--pill-green); }

/* ---------- Quem vai cuidar de você ---------- */
.caregiver {
  background: var(--bg-page);
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 56px;
  align-items: center;
  padding: 80px 24px 90px;
}

.caregiver-photo img {
  width: 100%;
  aspect-ratio: 4 / 5; /* foto "dandan quadro.png" é retrato (1844x2304) */
  object-fit: cover;
  background: #dcdad2;
  border-radius: 20px;
  box-shadow: 0 20px 40px -16px rgba(0,0,0,.25);
}

.caregiver-info h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--green-h2);
  font-size: 32px;
  letter-spacing: 0.024em;
  margin: 0 0 16px;
}

.caregiver-text {
  color: var(--card-text);
  font-family: var(--font-heading);
  font-size: 14px;
  letter-spacing: 0.03em;
  line-height: 1.61;
  margin: 0 0 14px;
}

.signature {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--green-h2);
  font-size: 15px;
  letter-spacing: 0.024em;
  margin: 4px 0 26px;
}

/* ---------- Footer ---------- */
.site-footer { background: var(--footer-bg); padding: 48px 0 32px; }

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}

.address {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  color: var(--cream);
  font-weight: 600;
  font-size: 18px; /* 25.5px calculado (36.24 unidades) — ver nota de fidelidade */
  letter-spacing: 0.024em;
  margin: 0;
}

.copyright {
  font-family: var(--font-heading);
  color: var(--cream);
  opacity: .85;
  font-size: 13px;
  margin: 8px 0 0;
}

.copyright a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* =============================
   Responsivo
   ============================= */
@media (max-width: 860px) {
  .specialist {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-bottom: 60px;
  }
  .specialist-photo { max-width: 420px; margin: 0 auto; width: 100%; }

  .caregiver {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 56px 24px 70px;
  }
  .caregiver-photo { max-width: 420px; margin: 0 auto; width: 100%; }

  .why-grid { grid-template-columns: 1fr; gap: 40px; }

  .hero h1 { font-size: 32px; }
  .tagline-wrap { flex-wrap: wrap; justify-content: center; }
  .tagline { white-space: normal; text-align: center; flex-shrink: 1; min-width: 0; max-width: 100%; }
}

@media (max-width: 560px) {
  .hero { padding: 48px 16px 40px; }
  .hero h1 { font-size: 26px; }
  .hero-sub { font-size: 14.5px; }
  .btn { font-size: 18px; padding: 14px 24px; }
  .btn-sm { font-size: 17px; }
  .btn-final { font-size: 14px; }
  .section-title { font-size: 24px; }
  .section-title.gold { font-size: 20px; }
  .cases-grid { gap: 12px; }
  .pill { font-size: 10px; padding: 6px 10px; margin-top: -16px; }
  .logo-text strong { font-size: 15px; }
}

/* =============================
   Consentimento de cookies
   ============================= */
.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: -140px;
  z-index: 1000;
  max-width: 720px;
  margin: 0 auto;
  background: var(--footer-bg);
  color: var(--cream);
  border-radius: 16px;
  padding: 18px 22px;
  box-shadow: 0 16px 40px -12px rgba(0,0,0,.4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  font-family: var(--font-heading);
  transition: bottom .35s ease;
}

.cookie-banner--visible { bottom: 16px; }

.cookie-banner__text {
  flex: 1 1 260px;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  opacity: .92;
}

.cookie-banner__text a { color: var(--gold-light); }

.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cookie-banner__btn {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12.5px;
  border: none;
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
}

.cookie-banner__btn--accept { background: var(--gold); color: var(--cream); }
.cookie-banner__btn--reject { background: rgba(255,255,255,.12); color: var(--cream); }
.cookie-banner__btn--link { background: none; color: var(--cream); text-decoration: underline; padding: 9px 4px; }

.cookie-prefs {
  position: fixed;
  inset: 0;
  z-index: 1001;
  background: rgba(0,0,0,.45);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.cookie-prefs--visible { display: flex; }

.cookie-prefs__box {
  background: var(--bg-page);
  border-radius: 16px;
  padding: 26px;
  max-width: 380px;
  width: 100%;
  font-family: var(--font-heading);
}

.cookie-prefs__box h2 {
  color: var(--green-h2);
  font-size: 19px;
  margin: 0 0 16px;
}

.cookie-prefs__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #e7e5df;
  color: var(--card-text);
  font-size: 14px;
}

.cookie-prefs__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner { transition: none; }
}