/* ==========================================================================
   DESIGN TOKENS - Dra. Daniele Murga
   Valores de cor abaixo sao aproximados, ajustar com hex exato do Figma
   ========================================================================== */

:root {
  /* Paleta */
  --color-ivory: #F7F4EF;      /* primary - base da interface */
  --color-warm-sand: #E8DED3;  /* secondary - blocos e destaque */
  --color-taupe: #B8A99B;      /* accent - detalhes e linhas */
  --color-espresso: #302A27;   /* dark - texto principal */
  --color-stone: #D5CEC6;      /* neutral - bordas e divisores */
  --color-charcoal: #302A27;   /* CTA background */

  /* Tipografia */
  --font-title: 'Playfair Display', serif;
  --font-body: 'Manrope', sans-serif;

  --size-h1-desktop: 72px;
  --size-h1-mobile: 48px;
  --size-h2: 44px;
  --size-h3: 24px;
  --size-body: 16px;
  --line-height-body: 1.5;

  /* Componentes */
  --radius-button: 999px;
  --button-height: 50px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* overflow-x fica somente no body (nao tambem no html): definir a
   mesma propriedade non-visible nos dois cria dois containers de
   scroll aninhados (o "quirk" de propagacao do scroll do body para o
   viewport deixa de acontecer) e isso quebra position: sticky no
   header, que passa a "rolar junto" em vez de fixar no topo. */
html {
  width: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--color-espresso);
  background-color: var(--color-ivory);
  line-height: var(--line-height-body);
  overflow-x: hidden;
  width: 100%;
}

h1, h2, h3 {
  font-family: var(--font-title);
  font-weight: 600;
  line-height: 1.15;
}

h1 {
  font-size: clamp(34px, 5vw, 72px);
  font-weight: 600;
}

h2 {
  font-size: var(--size-h2);
}

h3 {
  font-size: var(--size-h3);
}

@media (max-width: 700px) {
  h2 {
    font-size: clamp(26px, 7vw, 34px);
  }

  h3 {
    font-size: clamp(18px, 5vw, 22px);
  }
}

.btn {
  display: inline-block;
  border-radius: var(--radius-button);
  height: var(--button-height);
  padding: 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.btn:hover {
  transform: scale(1.03);
}

.btn-primary {
  background-color: #302A27;
  color: #F7F4EF;
  border: none;
}

.btn-secondary {
  background-color: transparent;
  color: #302A27;
  border: 2px solid var(--color-stone);
}

/* ==========================================================================
   LAYOUT BASE
   ========================================================================== */

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Container mais largo, usado apenas nas secoes da Home, para
   reproduzir o gutter de 80px / conteudo de 1280px do frame do
   Figma (1440px) sem alterar o container padrao usado nas
   demais paginas do site. */
.container-home {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 24px;
}

@media (min-width: 900px) {
  .container-home {
    padding: 0 40px;
  }
}

/* ==========================================================================
   HEADER
   ========================================================================== */

/* ---- Header compartilhado (partials/header.html), consumido por
   todas as paginas via JS. Sempre position: sticky - pinado no topo
   assim que a rolagem ultrapassa o inicio da pagina, sem precisar
   remover o header do fluxo normal (evita hacks de altura/padding-top
   no conteudo seguinte). O mesmo comportamento de opacidade/scroll se
   aplica em qualquer pagina, controlado por uma unica instancia de JS
   (ver initHeader() em js/script.js). ---- */
.site-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: box-shadow 0.3s ease;
}

/* Opacidade 100% no topo: fundo solido com a cor de identidade do
   site (sem transparencia baixa deixando o conteudo atravessar). */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-ivory);
  z-index: -1;
}

/* Ao rolar: mantem opacidade alta, mas adiciona blur/leve translucidez
   (efeito vidro) e sombra sutil, sem deixar o conteudo de tras
   interferir visualmente no menu. */
.site-header.is-scrolled {
  box-shadow: 0 8px 24px rgba(48, 42, 39, 0.08);
}

.site-header.is-scrolled::before {
  background-color: rgba(245, 241, 235, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  padding-bottom: 20px;
  gap: 16px;
  position: relative;
}

/* Com o header sticky, um link ancora (#tratamentos, #sobre, etc.)
   precisa de folga no topo para nao ficar escondido atras dele. */
[id] {
  scroll-margin-top: 100px;
}

/* Desktop: logo fixo a esquerda, navegacao centralizada no espaco
   disponivel, CTA fixo a direita - nao e um simples space-between,
   pois a navegacao fica centrada entre a logo e o CTA, e nao colada
   a nenhum dos dois. Aplicado a todas as paginas, ja que o header e
   um unico componente compartilhado. */
@media (min-width: 900px) {
  .header-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    justify-content: normal;
  }

  .header-inner .main-nav {
    justify-self: center;
  }

  .header-inner .header-cta-desktop {
    justify-self: end;
  }
}

.logo {
  font-family: var(--font-title);
  font-size: 28px;
  font-weight: 700;
  color: var(--color-espresso);
  text-decoration: none;
  letter-spacing: 0.02em;
}

.main-nav a {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-espresso);
  text-decoration: none;
}

/* ---- Dropdown "Tratamentos" ---- */

.nav-item {
  position: relative;
}

.nav-dropdown {
  display: flex;
  flex-direction: column;
}

@media (min-width: 900px) {
  .nav-item.has-dropdown {
    position: relative;
    display: flex;
    align-items: center;
  }

  .nav-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 240px;
    transform: translateX(-50%) translateY(-6px);
    margin-top: 0;
    padding-top: 14px;
    background-color: transparent;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 50;
  }

  .nav-dropdown-inner {
    background-color: var(--color-ivory);
    border: 1px solid var(--color-stone);
    border-radius: 16px;
    padding: 12px;
    min-width: 220px;
    box-shadow: 0 12px 32px rgba(48, 42, 39, 0.12);
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .nav-item.has-dropdown:hover .nav-dropdown,
  .nav-item.has-dropdown:focus-within .nav-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }

  .nav-dropdown a {
    display: block;
    padding: 14px 20px;
    margin: 0 4px;
    border-radius: 10px;
    text-transform: none;
    letter-spacing: 0;
    font-size: 14px;
    line-height: 1.4;
    white-space: nowrap;
    text-align: center;
  }

  .nav-dropdown a:hover {
    background-color: var(--color-warm-sand);
  }
}

/* ---- Menu mobile (off-canvas) ---- */

.main-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(80vw, 320px);
  background-color: var(--color-ivory);
  padding: 96px 32px 32px;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 200;
  box-shadow: -12px 0 32px rgba(48, 42, 39, 0.12);
}

.main-nav.is-active {
  transform: translateX(0);
}

.main-nav a {
  width: 100%;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-stone);
}

.nav-item.has-dropdown {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.nav-item-trigger {
  border-bottom: none !important;
  padding-bottom: 6px !important;
  opacity: 0.6;
  font-size: 12px !important;
}

.nav-dropdown {
  width: 100%;
  padding-left: 16px;
  border-bottom: 1px solid var(--color-stone);
}

.nav-dropdown a {
  display: block;
  width: 100%;
  border-bottom: none;
  padding: 10px 0 !important;
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
}

.main-nav .nav-cta {
  margin-top: 20px;
  width: 100%;
  border: none;
  justify-content: center;
  color: var(--color-ivory);
}

.menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(48, 42, 39, 0.4);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 190;
}

.menu-overlay.is-active {
  display: block;
  opacity: 1;
}

body.menu-open,
body.lightbox-open {
  overflow: hidden;
}

.menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 210;
  flex-shrink: 0;
}

.menu-toggle-bar {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-espresso);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.menu-toggle.is-active .menu-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle.is-active .menu-toggle-bar:nth-child(2) {
  opacity: 0;
}

.menu-toggle.is-active .menu-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (min-width: 900px) {
  .main-nav {
    position: static;
    height: auto;
    width: auto;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    padding: 0;
    background-color: transparent;
    box-shadow: none;
    transform: none;
    transition: none;
  }

  .main-nav a,
  .nav-item-trigger {
    white-space: nowrap;
  }

  .main-nav a {
    width: auto;
    padding: 0;
    border-bottom: none;
  }

  .nav-item-trigger {
    opacity: 1 !important;
    font-size: 14px !important;
    padding-bottom: 0 !important;
  }

  /* Corrige o dropdown desalinhado: as regras "mobile" acima
     (.nav-item.has-dropdown com width:100%/flex-direction:column e
     .nav-dropdown com width:100%) nao tinham reset equivalente aqui,
     entao venciam a cascata tambem no desktop (mesma especificidade,
     definidas depois no arquivo) e faziam o item "Tratamentos" ocupar
     uma largura maior que a do proprio texto - descentralizando o
     dropdown, que usa left: 50% relativo a essa largura. */
  .nav-item.has-dropdown {
    width: auto;
    flex-direction: row;
  }

  .nav-dropdown {
    width: 240px;
    padding-left: 0;
    border-bottom: none;
  }

  .main-nav .nav-cta {
    display: none;
  }

  .menu-overlay {
    display: none !important;
  }

  .menu-toggle {
    display: none;
  }
}

@media (max-width: 899px) {
  .header-cta-desktop {
    display: none;
  }
}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
  background-color: var(--color-ivory);
  background-image: linear-gradient(rgba(245, 245, 245, 0.6), rgba(245, 245, 245, 0.6)), url('https://res.cloudinary.com/do0uq7w4n/image/upload/v1787638354/background_hero_w2uja0.jpg');
  background-size: cover;
  background-position: center;
}

.hero-inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-top: 48px;
  padding-bottom: 0;
}

@media (min-width: 900px) {
  .hero-inner {
    flex-direction: row;
    align-items: center;
    padding-top: 80px;
    padding-bottom: 0;
  }
}

.hero-content {
  flex: 1;
}

.badge {
  display: inline-block;
  background-color: var(--color-taupe);
  color: #F7F4EF;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 6px 15px;
  border-radius: 10px;
  margin-bottom: 16px;
}

.badge-hero-home {
  border-radius: 999px;
}

.badge-linebreak {
  display: none;
}

@media (max-width: 899px) {
  .badge-hero-home {
    display: block;
    width: fit-content;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .badge-linebreak {
    display: block;
  }
}

.hero-content h1 {
  margin-bottom: 20px;
}

.hero-text {
  font-family: var(--font-body);
  font-size: 18px;
  max-width: 440px;
  margin-bottom: 32px;
  color: var(--color-espresso);
  opacity: 1;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

@media (max-width: 899px) {
  .hero-buttons {
    display: grid;
    grid-template-columns: max-content;
    gap: 16px;
  }

  .hero-buttons .btn {
    width: 100%;
  }
}

.hero-photo {
  position: relative;
  flex: 1;
}

.hero-photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 24px;
}

@media (max-width: 899px) {
  body.page-med-integrativa .hero-photo,
  body.page-sobre-clinica .hero-photo {
    order: 2;
  }

  body.page-med-integrativa .hero-content,
  body.page-sobre-clinica .hero-content {
    order: 1;
  }
}

.badge-float {
  position: absolute;
  top: 24px;
  left: -16px;
  background-color: var(--color-taupe);
  color: var(--color-espresso);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 8px 18px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

.hero-credentials {
  background-color: #B8A99B;
  padding: 18px 0;
}

.credentials-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #302A27;
}

@media (min-width: 700px) {
  .credentials-inner {
    flex-direction: row;
    justify-content: center;
    gap: 48px;
  }
}

/* ---- Ajustes exclusivos da Home (nao afetam as demais paginas,
   que reaproveitam as classes .hero-* / .credentials-inner) ---- */
@media (min-width: 900px) {
  body.page-home .hero-inner {
    gap: 64px;
    padding-top: 58px;
  }

  body.page-home .hero-content {
    flex: 0 1 687px;
  }

  body.page-home .hero-photo {
    flex: 0 1 526px;
  }

  body.page-home .hero-photo img {
    aspect-ratio: 526 / 624;
    height: 100%;
    object-fit: cover;
  }
}

body.page-home .hero-text {
  max-width: 485px;
  line-height: 1.4;
}

@media (min-width: 700px) {
  body.page-home .hero-credentials {
    padding: 0;
    height: 70px;
    display: flex;
    align-items: center;
  }

  body.page-home .credentials-inner {
    width: 100%;
  }
}

/* ==========================================================================
   INTRO
   ========================================================================== */

.intro {
  display: flex;
  flex-direction: column;
  margin-top: 48px;
  background-color: var(--color-warm-sand);
}

.intro-photo {
  height: 460px;
}

@media (max-width: 899px) {
  .intro-photo {
    order: 2;
  }

  .intro-text {
    order: 1;
  }
}

@media (min-width: 900px) {
  .intro {
    flex-direction: row;
    align-items: stretch;
    margin-top: 64px;
  }

  .intro-photo {
    height: 740px;
  }
}

.intro-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  display: block;
  border-radius: 0 24px 24px 0;
}

@media (max-width: 899px) {
  .intro-photo img {
    border-radius: 0 0 24px 24px;
  }
}

.intro-text {
  flex: 1;
  padding: 48px 24px;
}

@media (min-width: 900px) {
  .intro-text {
    padding: 64px 80px;
  }
}

.intro-text h2 {
  margin-bottom: 20px;
}

.intro-title-break {
  display: none;
}

@media (min-width: 900px) {
  .intro-title-break {
    display: block;
  }
}

.intro-text p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  max-width: 460px;
  color: #302A27;
  opacity: 1;
}

/* ---- Ajustes exclusivos da Home (medicina-integrativa.html
   reaproveita .intro / .intro-photo / .intro-text sem estas regras) ---- */
@media (max-width: 899px) {
  body.page-home .intro {
    margin-top: 0;
  }
}

@media (min-width: 900px) {
  body.page-home .intro {
    margin-top: 136px;
  }

  body.page-home .intro-photo {
    flex: 0 0 56%;
    height: 700px;
  }

  body.page-home .intro-text h2 {
    font-size: 52px;
  }
}


/* ==========================================================================
   TREATMENTS
   ========================================================================== */

.treatments {
  padding: 64px 0;
  text-align: center;
}

/* Home: os 3 blocos (Dermatologia Estetica, Dermatologia Clinica,
   Medicina Integrativa), cada um com link para sua propria pagina.
   Mobile: empilhados (icone + titulo em cima, texto e botao embaixo).
   Desktop (900px+): layout horizontal em linha - icone, depois
   titulo+descricao lado a lado, botao fixo a direita - conforme
   padrao definido no Figma da Marilia. */
.treatments-columns {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 48px;
  text-align: left;
}

.treatment-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: var(--color-ivory);
  border: 1px solid var(--color-stone);
  border-radius: 24px;
  padding: 22px 28px;
  transition: background-color 0.2s ease;
}

.treatment-block:hover {
  background-color: var(--color-warm-sand);
}

.treatment-block-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
  flex-shrink: 0;
}

.treatment-block-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.treatment-block h3 {
  font-size: 22px;
  margin-bottom: 10px;
}

.treatment-block p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  color: #302A27;
  opacity: 0.75;
  line-height: 1.6;
}

/* Botao deslocado para a direita do bloco (mobile: abaixo do texto). */
.treatment-block-link {
  align-self: flex-end;
  white-space: nowrap;
  margin-top: 16px;
}

@media (min-width: 900px) {
  .treatment-block {
    flex-direction: row;
    align-items: center;
    gap: 32px;
    padding: 28px 32px;
    min-height: 132px;
  }

  .treatment-block-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 0;
  }

  /* Titulo e descricao lado a lado, ocupando o espaco entre o icone
     e o botao. A descricao fica com largura limitada para quebrar em
     ate 3-4 linhas, ficando visualmente mais proxima do botao do que
     do titulo - mesma logica do Figma. */
  .treatment-block-info {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }

  .treatment-block-info h3 {
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .treatment-block-info p {
    max-width: 380px;
    margin: 0;
  }

  .treatment-block-link {
    align-self: center;
    margin-top: 0;
    flex-shrink: 0;
  }
}

/* ==========================================================================
   BIO
   ========================================================================== */

.bio {
  background-color: var(--color-warm-sand);
  padding: 64px 0;
}

.bio-inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

@media (max-width: 899px) {
  body.page-sobre-dra .bio-photo {
    order: 2;
  }

  body.page-sobre-dra .bio-text {
    order: 1;
  }
}

@media (min-width: 900px) {
  .bio-inner {
    flex-direction: row;
    align-items: center;
    gap: 64px;
  }
}

.bio-photo {
  flex: 1;
}

.bio-photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 24px;
}

.bio-text {
  flex: 1;
}

.bio-text h2 {
  margin-bottom: 20px;
}

.bio-text p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  color: #302A27;
  margin-bottom: 28px;
}

/* ---- Ajustes exclusivos da Home (sobre-dra-daniele.html e
   sobre-clinica.html reaproveitam .bio-* sem estas regras) ---- */
@media (min-width: 900px) {
  body.page-home .bio-inner {
    gap: 67px;
  }

  body.page-home .bio-photo {
    flex: 0 0 56%;
  }

  body.page-home .bio-text {
    flex: 1 1 495px;
    max-width: 495px;
  }

  body.page-home .bio-photo img {
    aspect-ratio: 720 / 960;
    height: 100%;
    object-fit: cover;
  }

  body.page-home .bio-text h2 {
    font-size: 52px;
  }
}

/* ==========================================================================
   WHY (Precisao, Naturalidade, Acompanhamento)
   ========================================================================== */

.why {
  background-color: var(--color-ivory);
  padding: 64px 0;
  text-align: center;
}

.section-title-center {
  text-align: center;
  margin-bottom: 48px;
}

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

@media (min-width: 700px) {
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .why-card-acompanhamento {
    grid-column: span 2;
  }
}

.why-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.why-card-acompanhamento {
  aspect-ratio: 1280 / 527;
}

.why-card-precisao,
.why-card-naturalidade {
  aspect-ratio: 5 / 4;
}

.why-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.why-overlay {
  position: absolute;
  left: 4.2%;
  right: 4.2%;
  top: 62%;
  bottom: 5.7%;
  background-color: rgba(247, 244, 239, 0.65);
  backdrop-filter: blur(3px) saturate(1.15) brightness(1.05);
  -webkit-backdrop-filter: blur(3px) saturate(1.15) brightness(1.05);
  border: 1px solid var(--color-stone);
  border-radius: 24px;
  padding: 24px 32px;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.why-card-acompanhamento .why-overlay {
  left: 53.6%;
  right: 1.9%;
}

.why-overlay h3 {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 6px;
  color: #302A27;
}

.why-overlay p {
  font-size: 14px;
  font-weight: 700;
  color: #302A27;
  opacity: 0.85;
}

/* object-position ajustado ao enquadramento de cada foto real fornecida
   pelo cliente (Cloudinary) - o card e mais largo que alto (4/3), as
   fotos sao verticais, entao o corte automatico de cover acontece no
   eixo vertical; o deslocamento mantem o rosto dentro do enquadramento
   em vez de cortar pelo centro. */
.why-card-precisao img {
  object-position: center 22%;
}

.why-card-naturalidade img {
  object-position: center 50%;
}

.why-card-acompanhamento img {
  object-position: center 20%;
}

@media (max-width: 699px) {
  .why-card-acompanhamento {
    aspect-ratio: 5 / 4;
  }

  .why-card-acompanhamento .why-overlay {
    left: 4.2%;
    right: 4.2%;
  }
}

/* LOGO - ajuste de tamanho (sobrescreve qualquer regra anterior) */
.header-inner .logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.header-inner .logo img {
  height: 72px;
  width: auto;
  max-height: 72px;
  display: block;
}

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */

.testimonials {
  background-color: var(--color-warm-sand);
  padding: 64px 0;
  text-align: center;
}

.testimonial-featured {
  background-color: var(--color-ivory);
  border-radius: 24px;
  padding: 40px;
  margin: 0 0 24px;
}

@media (min-width: 900px) {
  .testimonial-featured {
    padding: 48px 64px;
  }
}

.testimonials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 700px) {
  .testimonials-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.testimonial-card {
  background-color: var(--color-ivory);
  border-radius: 24px;
  padding: 28px;
}

.testimonial-quote {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 17px;
  font-style: italic;
  margin-bottom: 16px;
  color: var(--color-espresso);
}

.testimonial-featured .testimonial-quote {
  font-size: 20px;
}

.testimonial-stars {
  color: #F3D699;
  font-size: 14px;
  letter-spacing: 2px;
  margin-bottom: 8px;
}

.testimonial-author {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-espresso);
  opacity: 0.7;
}


/* ==========================================================================
   TEXTURA DE GRANITO/MARMORE (utilitario reutilizavel)
   ========================================================================== */
/* Na Home, o granito/marmore fica exclusivo do Hero (destaque principal).
   Em cada pagina interna, aplique esta classe em UMA unica secao para
   manter consistencia visual entre paginas, sem repetir em varias
   secoes da mesma pagina. */

.section-texture {
  position: relative;
  overflow: hidden;
}

.section-texture::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('https://res.cloudinary.com/do0uq7w4n/image/upload/v1788070390/textura-granizo_mdyuhu.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.11;
  pointer-events: none;
}

.section-texture > .container,
.section-texture > .container-home {
  position: relative;
  z-index: 1;
}


/* ==========================================================================
   RESULTS (antes e depois)
   ========================================================================== */

.results {
  padding: 64px 0;
}

.result-row {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 48px;
}

@media (min-width: 900px) {
  .result-row {
    flex-direction: row;
    align-items: stretch;
  }
}

.result-photo {
  position: relative;
  flex: 1.1;
  border-radius: 24px;
  overflow: hidden;
}

.result-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.result-badge {
  position: absolute;
  bottom: 10%;
  transform: translateX(-50%);
  background-color: rgba(162, 145, 130, 0.2);
  border: 1px solid var(--color-stone);
  border-radius: 999px;
  color: var(--color-espresso);
  font-weight: 700;
  font-size: 16px;
  padding: 12px 24px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.result-badge-left {
  left: 25%;
}

.result-badge-right {
  left: 75%;
}

.result-text {
  flex: 1;
  background-color: var(--color-warm-sand);
  border: 1px solid var(--color-stone);
  border-radius: 24px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.result-text h3 {
  font-size: 28px;
  margin-bottom: 12px;
}

.result-text p {
  font-size: 16px;
  opacity: 0.85;
}

.result-disclaimer {
  display: block;
  font-size: 13px;
  opacity: 0.6;
  margin-top: 16px;
}

.result-photo-pair {
  display: flex;
  gap: 4px;
  height: 100%;
}

.result-photo-pair img {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ==========================================================================
   DIARY (Diario da Pele)
   ========================================================================== */

.diary {
  padding: 64px 0;
  text-align: center;
}

.diary-carousel {
  position: relative;
  margin-top: 48px;
  text-align: left;
  overflow: hidden;
}

/* Esteira continua: a faixa e mais larga que o container e desliza
   sozinha via CSS var --diary-offset (atualizada pelo JS a cada frame).
   Os cards sao duplicados no JS para o loop parecer infinito. */
.diary-track {
  display: flex;
  gap: 20px;
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
  transform: translateX(var(--diary-offset, 0px));
  will-change: transform;
}

.diary-track:active {
  cursor: grabbing;
}

.diary-track .diary-video-card {
  flex: 0 0 auto;
}

/* Card de video/reel: video (ou poster, enquanto o arquivo real nao
   estiver disponivel) ao fundo, com um bloco de texto em vidro/blur
   sobreposto - mesma linguagem visual dos cards de "Por que a Dra.
   Daniele?" (.why-overlay). O overlay some durante a reproducao.
   Altura controlada explicitamente (nao por aspect-ratio vertical) -
   o video/poster usa object-fit: cover, entao nunca fica esticado. */
.diary-video-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 9 / 16;
  margin: 0 auto;
  background-color: var(--color-stone);
}

@media (min-width: 900px) {
  .diary-video-card {
    max-width: 400px;
  }
}

.diary-video-media {
  position: absolute;
  inset: 0;
}

.diary-video-media video,
.diary-video-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.diary-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background-color: var(--color-ivory);
  color: var(--color-espresso);
  box-shadow: 0 8px 20px rgba(48, 42, 39, 0.25);
  cursor: pointer;
  z-index: 3;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.diary-play-btn svg {
  margin-left: 3px;
}

.diary-video-card.is-playing .diary-play-btn {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.85);
  pointer-events: none;
}

.diary-video-overlay {
  position: absolute;
  left: 4.2%;
  right: 4.2%;
  bottom: 5.7%;
  background-color: rgba(217, 217, 217, 0.2);
  backdrop-filter: blur(3px) saturate(1.15) brightness(1.05);
  -webkit-backdrop-filter: blur(3px) saturate(1.15) brightness(1.05);
  border: 1px solid var(--color-stone);
  border-radius: 24px;
  padding: 20px 24px;
  text-align: left;
  z-index: 2;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.diary-video-card.is-playing .diary-video-overlay {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

.diary-video-overlay h3 {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 4px;
  color: #FFFFFF;
}

.diary-video-overlay p {
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.9);
}

.diary-video-pending {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  background-color: rgba(48, 42, 39, 0.35);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Setas de navegacao do carrossel: abaixo dos videos, centralizadas,
   mesma linguagem visual dos demais botoes redondos do site. */
.diary-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}

.diary-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--color-stone);
  border-radius: 999px;
  background-color: var(--color-ivory);
  color: var(--color-espresso);
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.diary-nav:hover {
  background-color: var(--color-warm-sand);
}

.diary-nav:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* ==========================================================================
   CTA FINAL
   ========================================================================== */

/* Bloco marrom com altura FIXA (nao fluida, nao calculada por vw nem
   por aspect-ratio) - a altura e um numero real em px por breakpoint,
   testado visualmente. A foto e position: absolute dentro dele, entao
   nunca pode "explodir" para fora: sua altura e sempre = altura do
   bloco + o quanto o top/bottom negativo adiciona, nunca mais que
   isso. Esta e a abordagem estavel usada como base - qualquer ajuste
   futuro de tamanho mexe apenas nestes numeros fixos, nunca na
   logica. */
.cta-final {
  padding: 140px 0 160px;
}

@media (max-width: 899px) {
  .cta-final {
    padding: 64px 0 32px;
  }
}

.cta-final-top {
  position: relative;
  background-color: var(--color-espresso);
  padding: 40px 0;
}

@media (max-width: 899px) {
  .cta-final-top {
    border-radius: 24px 24px 0 0;
    overflow: hidden;
  }

  .cta-final-bar {
    border-radius: 0 0 24px 24px;
    overflow: hidden;
  }
}

.cta-final-top-inner {
  position: relative;
  z-index: 1;
}

.cta-final-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 24px;
  padding-bottom: 32px;
}

.cta-final-content h2 {
  color: var(--color-ivory);
  margin-bottom: 16px;
}

.cta-final-content p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  max-width: 380px;
  margin-bottom: 28px;
  padding-right: 24px;
}

.cta-final-photo {
  padding: 0 24px;
}

.cta-final-photo img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: 24px;
}

.cta-final-bar {
  background-color: var(--color-warm-sand);
  padding: 14px 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--color-espresso);
}

.cta-final-bar .container {
  text-align: left;
}

.cta-final-bar {
  text-align: center;
}

@media (min-width: 900px) {
  .cta-final-bar {
    text-align: left;
  }

  .cta-final-bar span {
    padding-left: 137px;
  }
}

@media (min-width: 700px) {
  .cta-final-photo {
    padding: 0 40px;
  }

  .cta-final-photo img {
    aspect-ratio: 16 / 9;
  }
}

.cta-final-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 24px;
  padding-bottom: 32px;
}

@media (min-width: 900px) {
  /* Altura FIXA do bloco marrom - numero real, nao calculado. */
  .cta-final-top {
    height: 420px;
    padding: 0;
    display: flex;
    align-items: center;
  }

  .cta-final-top-inner {
    height: 100%;
    display: flex;
    align-items: center;
  }

  .cta-final-content {
    max-width: 320px;
    padding-left: 48px;
  }

  .cta-final-content p {
    max-width: 320px;
  }

  /* A foto e absoluta, ancorada aos 4 lados do .cta-final-top (que
     agora tem altura FIXA de 420px). top/bottom negativos fazem ela
     vazar simetricamente para cima e para baixo - a altura final da
     foto e sempre 420px + 80px = 500px. Nunca mais que isso, em
     nenhuma largura de tela, porque nao depende de vw nem de
     aspect-ratio do item. */
  .cta-final-photo {
    position: absolute;
    top: -100px;
    bottom: -100px;
    right: 0;
    width: 48%;
    max-width: 700px;
    padding: 0;
    z-index: 2;
  }

  .cta-final-photo img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    /* Arredondado so no canto que encontra o texto (esquerda); o
       lado direito, que encosta na borda da secao, fica em esquadro. */
    border-radius: 24px 0 0 24px;
  }
}

@media (min-width: 1200px) {
  .cta-final-top {
    height: 480px;
  }

  .cta-final-photo {
    top: -120px;
    bottom: -120px;
  }
}

.btn-outline-light {
  background-color: transparent;
  color: var(--color-ivory);
  border: 1px solid var(--color-ivory);
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
  background-color: var(--color-espresso);
  color: var(--color-ivory);
  padding-top: 56px;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-bottom: 40px;
}

@media (min-width: 900px) {
  .footer-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.footer-logo {
  height: 110px;
  width: auto;
}

.footer-brand p {
  font-size: 15px;
  opacity: 0.8;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (min-width: 900px) {
  .footer-contact {
    flex-direction: row;
    gap: 40px;
  }
}

@media (max-width: 899px) {
  .footer-contact {
    align-items: center;
    text-align: center;
  }
}

.footer-contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}

.footer-map {
  flex: 1;
  min-width: 260px;
  max-width: 320px;
}

@media (max-width: 899px) {
  .footer-map {
    margin: 0 auto;
  }
}

.footer-map iframe {
  display: block;
  border-radius: 16px;
  overflow: hidden;
  width: 100%;
}

.footer-map-address {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  opacity: 0.75;
}

.footer-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  background-color: var(--color-taupe);
  border-radius: 999px;
  color: var(--color-espresso);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding: 20px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 16px;
  text-align: center;
}

@media (max-width: 899px) {
  .footer-bottom {
    flex-direction: column;
    padding-top: 32px;
    gap: 10px;
  }
}

.footer-copyright {
  color: var(--color-ivory);
  opacity: 0.7;
  font-size: 13px;
}

.footer-bottom a {
  color: var(--color-ivory);
  opacity: 0.7;
  font-size: 13px;
  text-decoration: none;
}

.footer-bottom a:hover {
  opacity: 1;
}

.footer-dev-credit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.footer-dev-logo {
  height: 24px;
  width: auto;
  display: block;
}

/* ==========================================================================
   PAGINA INTERNA - DERMATOLOGIA ESTETICA
   ========================================================================== */

.page-hero {
  background-color: var(--color-warm-sand);
  padding-bottom: 64px;
}

.lead-text {
  max-width: 640px;
  margin: 0 auto;
  font-size: 17px;
  color: var(--color-espresso);
  opacity: 0.85;
}

.section-intro {
  padding: 64px 0;
  text-align: center;
}

/* ---- Destaques / Principais tratamentos ---- */

.featured {
  padding: 64px 0;
  text-align: center;
  background-color: var(--color-warm-sand);
}

.featured-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 48px;
  text-align: left;
}

@media (min-width: 700px) {
  .featured-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .featured-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.featured-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-ivory);
  border: 1px solid var(--color-stone);
  border-radius: 24px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.featured-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(48, 42, 39, 0.1);
}

.featured-card-image {
  aspect-ratio: 4 / 3;
}

.featured-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.featured-card-image img[alt*="ultrassom-micro-macrofocado"] {
  height: auto;
  aspect-ratio: 4 / 3;
}

/* Imagem de origem em formato retrato (Ultrassom) precisa do mesmo
   enquadramento 4:3 dos demais cards, que sao imagens quadradas. */
.featured-card-image-ultrassom {
  aspect-ratio: 4 / 3;
}

.featured-card-image-ultrassom img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Variante para itens ainda sem foto real - icone centralizado sobre
   fundo suave, ate que o asset definitivo seja fornecido. */
.featured-card-image-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-warm-sand);
  padding: 32px;
}

.featured-card-image-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.featured-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px;
}

.featured-card-body h3 {
  font-size: 20px;
  margin-bottom: 8px;
}

.featured-card-body p {
  font-size: 14px;
  opacity: 0.75;
  flex: 1;
}

.featured-card-link {
  margin-top: 16px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-espresso);
  text-decoration: none;
}

.featured-card-link:hover {
  opacity: 0.65;
}

/* ---- Tratamentos por necessidade ---- */

.needs {
  padding: 64px 0;
  text-align: center;
}

.needs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 48px;
}

@media (min-width: 700px) {
  .needs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .needs-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.needs-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  background-color: var(--color-ivory);
  border: 1px solid var(--color-stone);
  border-radius: 24px;
  padding: 28px 24px;
  text-align: center;
  transition: background-color 0.2s ease;
}

.needs-card:hover {
  background-color: var(--color-warm-sand);
}

.needs-card h3 {
  font-size: 20px;
}

/* ---- Outros procedimentos ---- */

.other-treatments {
  padding: 64px 0;
  text-align: center;
  background-color: var(--color-warm-sand);
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: 900px;
  margin: 32px auto 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  background-color: var(--color-ivory);
  border: 1px solid var(--color-stone);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-espresso);
}

/* ==========================================================================
   PAGINA INTERNA - MEDICINA INTEGRATIVA
   ========================================================================== */

/* ---- Areas de cuidado ---- */

.care {
  padding: 64px 0;
  text-align: center;
}

.care-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 48px;
  text-align: left;
}

.care-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background-color: var(--color-ivory);
  border: 1px solid var(--color-stone);
  border-radius: 16px;
  padding: 28px 32px;
  transition: background-color 0.2s ease;
}

.care-row:hover {
  background-color: var(--color-warm-sand);
}

@media (min-width: 700px) {
  .care-row {
    flex-direction: row;
    align-items: center;
    gap: 28px;
  }

  .care-row .featured-card-link {
    margin-top: 0;
    flex-shrink: 0;
    white-space: nowrap;
  }
}

.care-row-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.care-row-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.care-row-body {
  flex: 1;
}

.care-row-body h3 {
  font-size: 22px;
  margin-bottom: 6px;
}

.care-row-body p {
  font-size: 14px;
  opacity: 0.75;
}

/* ---- Uma visao integrada do cuidado ---- */

.integrated-vision {
  padding: 64px 0;
  background-color: var(--color-taupe);
}

.integrated-vision-inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

@media (min-width: 900px) {
  .integrated-vision-inner {
    flex-direction: row;
    align-items: center;
    gap: 64px;
  }
}

.integrated-vision-text {
  flex: 1;
}

.integrated-vision-text .badge {
  background-color: var(--color-espresso);
  color: var(--color-ivory);
}

.integrated-vision-text h2 {
  margin: 16px 0 20px;
  color: var(--color-espresso);
}

.integrated-vision-text p {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--color-espresso);
  opacity: 0.85;
  max-width: 480px;
}

.integrated-vision-photo {
  flex: 1;
}

.integrated-vision-photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 24px;
}

/* ---- Abordagem personalizada ---- */

.approach {
  padding: 64px 0;
}

.approach-inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

@media (min-width: 900px) {
  .approach-inner {
    flex-direction: row;
    align-items: center;
    gap: 64px;
  }
}

.approach-photo {
  flex: 1;
}

.approach-photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 24px;
}

.approach-text {
  flex: 1;
}

.approach-text h2 {
  margin: 16px 0 20px;
}

.approach-text p {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-espresso);
  opacity: 0.85;
  max-width: 460px;
  margin-bottom: 24px;
}

.approach-points {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.approach-points li {
  position: relative;
  padding-left: 24px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-espresso);
}

.approach-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background-color: var(--color-taupe);
}

/* ==========================================================================
   PAGINA INTERNA - A DRA. DANIELE
   ========================================================================== */

/* ---- Formacao e trajetoria ---- */

.formation {
  padding: 64px 0;
  text-align: center;
}

.formation-timeline {
  margin: 48px auto 0;
  max-width: 640px;
  text-align: left;
}

.formation-item {
  position: relative;
  padding: 0 0 32px 28px;
  border-left: 2px solid var(--color-stone);
  margin-left: 6px;
}

.formation-item:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}

.formation-marker {
  position: absolute;
  left: -7px;
  top: 2px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background-color: var(--color-taupe);
  border: 2px solid var(--color-ivory);
}

.formation-item-body h3 {
  font-size: 20px;
  margin-bottom: 4px;
}

.formation-item-body p {
  font-size: 14px;
  opacity: 0.75;
}

/* ---- Areas de atuacao ---- */

.expertise {
  padding: 64px 0;
  text-align: center;
  background-color: var(--color-warm-sand);
}

.expertise-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-top: 48px;
  text-align: left;
}

@media (min-width: 900px) {
  .expertise-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }
}

.expertise-item {
  border-top: 2px solid var(--color-taupe);
  padding-top: 20px;
}

.expertise-item h3 {
  font-size: 22px;
  margin-bottom: 10px;
}

.expertise-item p {
  font-size: 15px;
  opacity: 0.8;
  margin-bottom: 12px;
}

/* ---- Olhar e filosofia profissional ---- */

.philosophy-view {
  padding: 64px 0;
}

.philosophy-view-inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

@media (min-width: 900px) {
  .philosophy-view-inner {
    flex-direction: row;
    align-items: center;
    gap: 64px;
  }
}

.philosophy-view-text {
  flex: 1;
}

.philosophy-view-text h2 {
  margin: 16px 0 20px;
}

.philosophy-view-text p {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--color-espresso);
  opacity: 0.85;
  max-width: 480px;
}

.philosophy-view-photo {
  flex: 1;
}

.philosophy-view-photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 24px;
}

/* ---- Experiencia de cuidado ---- */

.care-experience {
  padding: 64px 0 0;
  text-align: center;
}

.care-experience .lead-text-spaced {
  margin-bottom: 48px;
}

/* ==========================================================================
   PAGINA INTERNA - RESULTADOS
   ========================================================================== */

.results-gallery {
  padding: 64px 0;
  text-align: center;
}

.results-notice {
  max-width: 720px;
  margin: 0 auto 48px;
  padding: 24px 28px;
  background-color: var(--color-warm-sand);
  border: 1px solid var(--color-stone);
  border-radius: 16px;
}

.results-notice p {
  font-size: 14px;
  color: var(--color-espresso);
  opacity: 0.85;
}

/* ---- Filtros ---- */

.results-filters {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin: 0 0 40px;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 700px) {
  .results-filters {
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: visible;
  }
}

.filter-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid var(--color-stone);
  background-color: var(--color-ivory);
  color: var(--color-espresso);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.filter-btn:hover {
  background-color: var(--color-warm-sand);
}

.filter-btn.is-active {
  background-color: var(--color-espresso);
  border-color: var(--color-espresso);
  color: var(--color-ivory);
}

/* ---- Grid editorial ---- */

.results-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-flow: dense;
  gap: 24px 24px;
  text-align: left;
  align-items: start;
}

@media (min-width: 700px) {
  .results-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .result-card--pair,
  .result-card--combined {
    grid-column: span 2;
  }
}

@media (min-width: 900px) {
  .results-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.result-card-trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
}

.results-grid .result-photo {
  aspect-ratio: 4 / 5;
}

.results-grid .result-card--pair .result-photo {
  aspect-ratio: 16 / 10;
}

.results-grid .result-card--combined .result-photo {
  aspect-ratio: auto;
}

.results-grid .result-card--combined .result-photo img {
  height: auto;
}

.result-card-body {
  padding-top: 16px;
}

.result-card-body h3 {
  font-size: 18px;
  margin-bottom: 6px;
}

.result-card-body p {
  font-size: 14px;
  opacity: 0.75;
  margin-bottom: 8px;
}

.result-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.result-card-meta .chip {
  padding: 6px 14px;
  font-size: 12px;
}

/* ---- CTA entre conteudo ---- */

.results-inline-cta {
  padding: 40px 0;
  text-align: center;
  background-color: var(--color-warm-sand);
}

.results-inline-cta p {
  font-family: var(--font-title);
  font-size: 22px;
  font-weight: 600;
  color: var(--color-espresso);
  margin-bottom: 20px;
}

/* ---- Lightbox ---- */

.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background-color: rgba(48, 42, 39, 0.85);
  z-index: 1100;
}

.lightbox.is-active {
  display: flex;
}

.lightbox-content {
  position: relative;
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  overflow-y: auto;
  background-color: var(--color-ivory);
  border-radius: 24px;
  padding: 24px;
}

.lightbox-content::-webkit-scrollbar {
  width: 8px;
}

.lightbox-content::-webkit-scrollbar-track {
  background: transparent;
}

.lightbox-content::-webkit-scrollbar-thumb {
  background-color: var(--color-stone);
  border-radius: 999px;
}

.lightbox-content::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-taupe);
}

.lightbox-content {
  scrollbar-width: thin;
  scrollbar-color: var(--color-stone) transparent;
}

.lightbox-images {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 20px;
}

.lightbox-images img {
  width: 100%;
  display: block;
}

.lightbox-images.result-photo-pair {
  display: flex;
  gap: 4px;
  aspect-ratio: 16 / 10;
}

.lightbox-images.result-photo-pair img {
  flex: 1;
  min-width: 0;
  height: 100%;
  object-fit: cover;
}

.lightbox-meta {
  display: block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-taupe);
  margin-bottom: 6px;
}

.lightbox-body h3 {
  font-size: 24px;
  margin-bottom: 10px;
}

.lightbox-body p {
  font-size: 15px;
  opacity: 0.8;
}

.lightbox-body p:empty {
  display: none;
}

.lightbox-whatsapp {
  margin-top: 16px;
}

.lightbox-whatsapp[hidden] {
  display: none;
}

.lightbox-close {
  position: fixed;
  top: 24px;
  right: 24px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--color-stone);
  background-color: var(--color-ivory);
  color: var(--color-espresso);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 1110;
}

.lightbox-nav {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.lightbox-nav button {
  flex: 1;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--color-stone);
  background-color: transparent;
  color: var(--color-espresso);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.lightbox-nav button:hover {
  background-color: var(--color-warm-sand);
}

.lightbox-nav button:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ==========================================================================
   PAGINA INTERNA - DEPOIMENTOS
   ========================================================================== */

/* ---- Avaliacoes Google ---- */

.google-section {
  padding: 64px 0;
  text-align: center;
}

.google-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 8px auto 48px;
}

.google-stat-number {
  font-family: var(--font-title);
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-espresso);
}

.google-stat-stars {
  color: #F3D699;
  font-size: 20px;
  letter-spacing: 4px;
}

.google-stat-count {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-espresso);
  opacity: 0.65;
}

.google-stat-count .google-review-source {
  font-size: inherit;
  font-weight: inherit;
  opacity: 1;
}

.google-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}

.google-marquee-track {
  display: flex;
  gap: 24px;
  width: max-content;
  text-align: left;
  animation: google-marquee-scroll 42s linear infinite;
}

.google-marquee:hover .google-marquee-track,
.google-marquee:focus-within .google-marquee-track {
  animation-play-state: paused;
}

@keyframes google-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.google-review-card {
  flex: 0 0 320px;
  background-color: var(--color-ivory);
  border: 1px solid var(--color-stone);
  border-radius: 24px;
  padding: 28px;
}

.google-review-card .testimonial-quote {
  margin-bottom: 16px;
  font-size: 16px;
}

.google-review-source {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
}

.google-review-source span:nth-child(1) { color: #4285F4; } /* G azul */
.google-review-source span:nth-child(2) { color: #EA4335; } /* o vermelho */
.google-review-source span:nth-child(3) { color: #FBBC05; } /* o amarelo */
.google-review-source span:nth-child(4) { color: #4285F4; } /* g azul */
.google-review-source span:nth-child(5) { color: #34A853; } /* l verde */
.google-review-source span:nth-child(6) { color: #EA4335; } /* e vermelho */

@media (prefers-reduced-motion: reduce) {
  .google-marquee {
    overflow-x: auto;
  }

  .google-marquee-track {
    animation: none;
  }
}

/* ---- Transicao para depoimentos em video ---- */

.testimonials-transition {
  padding: 64px 0;
  text-align: center;
  background-color: var(--color-espresso);
}

.testimonials-transition .badge {
  background-color: var(--color-taupe);
  color: var(--color-espresso);
}

.testimonials-transition h2 {
  color: var(--color-ivory);
}

.testimonials-transition p {
  max-width: 640px;
  margin: 0 auto;
  font-size: 16px;
  color: rgba(247, 244, 239, 0.8);
}

/* ---- Carrossel de depoimentos em video ---- */

.video-section {
  padding: 64px 0;
  text-align: center;
}

.video-carousel-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.video-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 8px 4px 12px;
  flex: 1;
  text-align: left;
  -webkit-overflow-scrolling: touch;
}

.video-card {
  flex: 0 0 220px;
  scroll-snap-align: center;
}

@media (min-width: 700px) {
  .video-card {
    flex-basis: 260px;
  }
}

@media (min-width: 900px) {
  .video-card {
    flex-basis: 300px;
  }
}

.video-card-trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
}

.video-card-poster {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 24px;
  overflow: hidden;
  background-color: var(--color-warm-sand);
}

.video-card-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background-color: var(--color-ivory);
  color: var(--color-espresso);
  box-shadow: 0 8px 20px rgba(48, 42, 39, 0.2);
}

.video-play-btn svg {
  margin-left: 3px;
}

.video-card-body {
  padding-top: 14px;
}

.video-card-body h3 {
  font-size: 17px;
  margin-bottom: 6px;
}

.video-nav-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--color-stone);
  background-color: var(--color-ivory);
  color: var(--color-espresso);
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.video-nav-btn:hover {
  background-color: var(--color-warm-sand);
}

/* ---- Destaque editorial ---- */

.video-feature {
  padding: 64px 0;
  background-color: var(--color-warm-sand);
}

.video-feature-inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

@media (min-width: 900px) {
  .video-feature-inner {
    flex-direction: row;
    align-items: center;
    gap: 64px;
  }
}

.video-feature-poster {
  position: relative;
  flex: 0 0 auto;
  width: 220px;
  max-width: 60%;
  margin: 0 auto;
  aspect-ratio: 9 / 16;
  border-radius: 24px;
  overflow: hidden;
  background-color: var(--color-warm-sand);
}

@media (min-width: 900px) {
  .video-feature-poster {
    margin: 0;
    width: 280px;
    max-width: none;
  }
}

.video-feature-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-feature-text {
  flex: 1;
}

.video-feature-text h2 {
  margin: 16px 0 16px;
}

.video-feature-text p {
  font-size: 16px;
  color: var(--color-espresso);
  opacity: 0.85;
  max-width: 480px;
}

/* ---- Lightbox de video ---- */

.lightbox-content--video {
  max-width: 420px;
}

.lightbox-video {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 16px;
  overflow: hidden;
  background-color: var(--color-warm-sand);
  margin-bottom: 20px;
}

.lightbox-video img,
.lightbox-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lightbox-video-pending {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  padding: 8px 18px;
  border-radius: 999px;
  background-color: rgba(247, 244, 239, 0.92);
  color: var(--color-espresso);
  font-size: 13px;
  font-weight: 600;
}

/* ==========================================================================
   PAGINA INTERNA - SOBRE A CLINICA
   ========================================================================== */

/* ---- O espaco (composicao editorial de imagens) ---- */

.clinic-space {
  padding: 64px 0;
  text-align: center;
}

.space-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 48px;
  align-items: start;
}

@media (min-width: 700px) {
  .space-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .space-item-recepcao,
  .space-item-detalhe {
    grid-column: span 2;
  }
}

@media (min-width: 900px) {
  .space-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .space-item-recepcao,
  .space-item-consultorio,
  .space-item-sala,
  .space-item-maca {
    grid-column: span 1;
    grid-row: span 1;
  }

  .space-item-detalhe {
    grid-column: span 4;
  }
}

.space-item {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.space-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.space-item-detalhe {
  aspect-ratio: 16 / 9;
}

.space-item-detalhe img {
  object-position: right center;
}

@media (max-width: 699px) {
  .space-item-recepcao {
    aspect-ratio: 9 / 16;
  }
}

@media (min-width: 900px) {
  .space-item-recepcao {
    aspect-ratio: 4 / 3;
  }

  .space-item-detalhe {
    aspect-ratio: 1280 / 320;
  }
}

.space-video-trigger-card {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.space-video-trigger-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Bloco maior de "O espaco" preparado para receber um video importado
   do Instagram (poster + botao de play + reproducao), enquanto o
   arquivo real nao e fornecido. */
.space-video-media {
  position: absolute;
  inset: 0;
}

.space-video-media video,
.space-video-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.space-video-pending {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  padding: 6px 16px;
  border-radius: 999px;
  background-color: rgba(247, 244, 239, 0.92);
  color: var(--color-espresso);
  font-size: 12px;
  font-weight: 700;
  z-index: 2;
}

.space-video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background-color: var(--color-ivory);
  color: var(--color-espresso);
  box-shadow: 0 8px 20px rgba(48, 42, 39, 0.25);
  cursor: pointer;
  z-index: 3;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.space-video-play-btn svg {
  margin-left: 3px;
}

.space-video.is-playing .space-video-play-btn,
.space-video.is-playing .space-video-pending {
  opacity: 0;
  pointer-events: none;
}

/* ---- Conforto, privacidade e cuidado ---- */

.pillars {
  padding: 64px 0;
  text-align: center;
  background-color: var(--color-warm-sand);
}

.pillars-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-top: 48px;
  text-align: left;
}

@media (min-width: 700px) {
  .pillars-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .pillars-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
  }
}

.pillar-icon {
  display: block;
  width: 40px;
  height: 40px;
  margin-bottom: 16px;
}

/* ---- Tecnologia a servico do cuidado ---- */

.tech-section {
  position: relative;
  padding: 80px 0;
  text-align: center;
  overflow: hidden;
}

.tech-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('https://res.cloudinary.com/do0uq7w4n/image/upload/v1788070390/textura-granizo_mdyuhu.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.05;
  pointer-events: none;
}

.tech-section .container {
  position: relative;
  z-index: 1;
}

.tech-statement {
  font-family: var(--font-title);
  font-weight: 600;
  font-style: italic;
  font-size: clamp(22px, 3.2vw, 32px);
  line-height: 1.35;
  max-width: 720px;
  margin: 24px auto 20px;
  color: var(--color-espresso);
}

/* ---- Localizacao ---- */

.location-section {
  padding: 64px 0;
}

.location-inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

@media (min-width: 900px) {
  .location-inner {
    flex-direction: row;
    align-items: center;
    gap: 64px;
  }
}

.location-details {
  flex: 1;
}

.location-details h2 {
  margin: 16px 0 20px;
}

.location-address {
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-espresso);
  opacity: 0.85;
  margin-bottom: 28px;
}

.location-map {
  flex: 1;
}

.location-map iframe {
  display: block;
  width: 100%;
  border-radius: 24px;
}

/* ==========================================================================
   PAGINA INTERNA - POLITICA DE PRIVACIDADE (pagina documental)
   ========================================================================== */

.legal-container {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
}

.legal-header {
  padding: 56px 0 40px;
  background-color: var(--color-warm-sand);
}

.legal-header h1 {
  font-size: clamp(32px, 4.5vw, 48px);
  margin-bottom: 10px;
}

.legal-updated {
  display: block;
  margin-bottom: 20px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-espresso);
  opacity: 0.6;
}

.legal-intro {
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-espresso);
  opacity: 0.85;
}

.legal-toc {
  padding: 40px 0 0;
}

.legal-toc-box {
  border: 1px solid var(--color-stone);
  border-radius: 16px;
  padding: 24px 28px;
  background-color: var(--color-ivory);
}

.legal-toc-box h2 {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 14px;
}

.legal-toc-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 24px;
  list-style: none;
}

@media (min-width: 700px) {
  .legal-toc-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.legal-toc-list a {
  display: inline-block;
  padding: 6px 0;
  font-size: 14px;
  color: var(--color-espresso);
  opacity: 0.85;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.legal-toc-list a:hover,
.legal-toc-list a:focus-visible {
  opacity: 1;
  border-bottom-color: var(--color-taupe);
}

.legal-content {
  padding: 48px 0 88px;
}

.legal-section {
  padding-top: 36px;
  margin-top: 36px;
  border-top: 1px solid var(--color-stone);
  scroll-margin-top: 100px;
}

.legal-section:first-child {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}

.legal-section h2 {
  font-size: 24px;
  margin-bottom: 16px;
}

.legal-section p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-espresso);
  opacity: 0.85;
  margin-bottom: 16px;
}

.legal-section p:last-child {
  margin-bottom: 0;
}

.legal-section ul {
  margin: 0 0 16px;
  padding-left: 20px;
}

.legal-section li {
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-espresso);
  opacity: 0.85;
  margin-bottom: 8px;
}

.legal-contact-list {
  list-style: none;
  padding-left: 0;
}

.legal-contact-list li {
  margin-bottom: 10px;
}