/* =====================================================================
   CONCEITO.CSS — ZAFINNE ODONTOLOGIA
   Paleta: azul marinho #1E1B4B + dourado champagne #C8A96E + branco
   Tipografia: Cormorant (display) + Montserrat (corpo)
   ui-ux-pro-max consultada: color→Banking/Trust Navy+Gold; typography→Luxury Serif
   ===================================================================== */

/* ── TOKENS ──────────────────────────────────────────────────────────── */
:root {
  --cor-fundo-1:    #1E1B4B;
  --cor-fundo-2:    #1A1748;
  --cor-fundo-3:    #131038;
  --cor-destaque:   #C8A96E;
  --cor-texto:      #F5F0E8;
  --cor-texto-soft: rgba(245,240,232,.68);
  --font-display:   'Cormorant', serif;
  --font-body:      'Montserrat', sans-serif;
  --gold:           #C8A96E;
  --navy:           #1E1B4B;
}

/* ── CENÁRIO-SCRIM — camada de escurecimento sobre o fundo contínuo ─── */
.cenario-scrim {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: rgba(19,16,56,.42);
  pointer-events: none;
}

/* ── NAV ─────────────────────────────────────────────────────────────── */
.nav {
  background: transparent;
}
.nav.scrolled {
  background: rgba(19,16,56,.88);
  backdrop-filter: blur(16px) saturate(130%);
}
.nav-logo-text {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--cor-texto);
}
.nav-cta {
  background: var(--gold);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
}

/* ── TIPOGRAFIA GLOBAL ───────────────────────────────────────────────── */
.display, .serif { font-family: var(--font-display); font-weight: 500; line-height: 1.08; }
body             { font-family: var(--font-body); }

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.eyebrow::before { content: '✦ '; }

/* ── BOTÕES ──────────────────────────────────────────────────────────── */
.btn {
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  padding:       14px 26px;
  border-radius: 100px;
  font-family:   var(--font-body);
  font-size:     .84rem;
  font-weight:   600;
  letter-spacing: .03em;
  transition:    background .2s, color .2s, box-shadow .2s;
  min-height:    48px;
  cursor:        pointer;
  text-decoration: none;
}
.btn-cta {
  background:  var(--gold);
  color:       var(--navy);
  box-shadow:  0 8px 24px -8px rgba(200,169,110,.45);
}
.btn-cta:hover {
  background:  #d4b87a;
  box-shadow:  0 12px 32px -8px rgba(200,169,110,.55);
}
.btn-ghost {
  border:      1.5px solid rgba(200,169,110,.45);
  color:       var(--gold);
  background:  transparent;
}
.btn-ghost:hover {
  border-color: var(--gold);
  background:   rgba(200,169,110,.08);
}
.arrow { font-size: 1em; }

/* ── WHATSAPP FLUTUANTE ──────────────────────────────────────────────── */
.wa-float {
  position:      fixed;
  bottom:        28px;
  right:         24px;
  z-index:       600;
  width:         56px;
  height:        56px;
  border-radius: 50%;
  background:    #25D366;
  color:         #fff;
  display:       flex;
  align-items:   center;
  justify-content: center;
  box-shadow:    0 8px 24px -8px rgba(37,211,102,.55);
  transition:    transform .2s, box-shadow .2s;
}
.wa-float:hover {
  transform:  scale(1.08);
  box-shadow: 0 12px 32px -8px rgba(37,211,102,.65);
}

/* ===================================================================== */
/* HERO — FULL-BLEED (foto de intenção dirigida, copy à direita desktop) */
/* ===================================================================== */

.panel-hero { position: relative; overflow: hidden; background: var(--navy); }

.hero-inner {
  display:   block;
  position:  relative;
  height:    100svh;
}

/* ── Fundo foto (ocupa 100% do hero) ────────────────────────────────── */
.hero-photo-col {
  position: absolute;
  inset:    0;
  z-index:  1;
  overflow: hidden;
}

/* KEN BURNS — CSS PURO, 9s (régua CEO), never scroll-linked */
@keyframes kenBurns {
  from { transform: scale(1.02); }
  to   { transform: scale(1.19); }
}

.hero-kenburns {
  position:            absolute;
  inset:               -8%;
  width:               116%;
  height:              116%;
  background-size:     cover;
  background-position: 30% center; /* mulher à esquerda, espaço à direita */
  transform-origin:    30% 50%;
  animation:           kenBurns 9s ease-in-out infinite alternate;
  will-change:         transform;
}

@media (prefers-reduced-motion: reduce) {
  .hero-kenburns { animation: none !important; }
}

/* ── Gradiente lateral: transparente (esquerda) → navy (direita) ─────── */
.hero-photo-scrim {
  position:   absolute;
  inset:      0;
  z-index:    2;
  background: linear-gradient(
    to left,
    rgba(19,16,56,.92) 0%,
    rgba(19,16,56,.70) 42%,
    rgba(19,16,56,.18) 62%,
    transparent        78%
  );
  pointer-events: none;
}

/* ── Copy — lado direito ─────────────────────────────────────────────── */
.hero-copy-col {
  position:   absolute;
  inset:      0;
  z-index:    3;
  display:    flex;
  align-items: center;
  justify-content: flex-end;
}

.hero-copy-inner {
  padding:    0 clamp(28px, 5vw, 80px) 0 0;
  max-width:  clamp(320px, 44%, 540px);
  width:      100%;
  text-align: left;
}

.hero-title {
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  color:     var(--cor-texto);
  margin-bottom: clamp(16px, 2.5vh, 24px);
  line-height: 1.05;
}
.hero-title em {
  font-style: italic;
  color:      var(--gold);
}

.hero-sub {
  font-size:   clamp(.9rem, 1.4vw, 1.05rem);
  line-height: 1.65;
  color:       var(--cor-texto-soft);
  margin-bottom: clamp(24px, 4vh, 40px);
  max-width: 44ch;
}

.hero-actions {
  display:    flex;
  flex-wrap:  wrap;
  gap:        14px;
  align-items: center;
}

/* Scrolldown indicator */
.hero-scrolldown {
  position:   absolute;
  bottom:     28px;
  left:       clamp(32px, 7vw, 80px); /* no canto esquerdo, sobre a pessoa */
  z-index:    4;
  display:    flex;
  align-items: center;
  justify-content: center;
}
.hero-scrolldown span {
  display:    block;
  width:      1px;
  height:     52px;
  background: linear-gradient(to bottom, transparent, var(--gold));
  animation:  scrollPulse 1.8s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%,100% { opacity:.4; transform:scaleY(.7); }
  50%      { opacity:1;  transform:scaleY(1);  }
}

/* ── HERO MOBILE — full-bleed ─────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Imagem mobile: portrait (608x1088) — troca no kenburns.
     top/bottom ajustados para deslocar o frame 100px para baixo:
     garante headroom acima do rosto ≥ 35% da face-height (gate_rosto.py).
     transform-origin: 30% 20% → o pivo fica acima do rosto, zoom expande
     para baixo em vez de empurrar o rosto para fora do frame. */
  .hero-kenburns {
    background-image:    url('assets/hero-zafinne-mobile-1.webp') !important;
    background-position: center center;
    top:             calc(-8% + 100px);  /* desloca 100px abaixo do topo */
    bottom:          calc(-8% - 100px);  /* compensa: element segue cobrindo o bottom */
    transform-origin: 30% 20%;           /* pivo acima da face → zoom não corta cabeça */
  }
  /* Gradiente mobile: de baixo para cima (copy fica na faixa inferior) */
  .hero-photo-scrim {
    background: linear-gradient(
      to top,
      rgba(19,16,56,.94) 0%,
      rgba(19,16,56,.72) 50%,
      transparent        80%
    );
  }
  /* Copy fica em baixo no mobile */
  .hero-copy-col {
    align-items:     flex-end;
    justify-content: flex-start;
  }
  .hero-copy-inner {
    padding:   0 24px clamp(32px, 6vh, 56px);
    max-width: 100%;
    width:     100%;
  }
  .hero-title {
    font-size: clamp(2rem, 8vw, 2.8rem);
  }
  .hero-sub {
    font-size: .88rem;
    max-width: 100%;
  }
  .hero-scrolldown {
    left: 24px;
  }
}

/* ===================================================================== */
/* O QUE TRAVA                                                           */
/* ===================================================================== */

.trava {
  padding:     var(--section-pad) clamp(20px,5vw,56px);
  max-width:   900px;
  margin:      0 auto;
  text-align:  center;
  position:    relative;
  z-index:     2;
}
.trava-title {
  font-size:   clamp(2rem, 4vw, 3.2rem);
  color:       var(--cor-texto);
  margin-bottom: 20px;
}
.trava-title em {
  font-style:  italic;
  color:       var(--gold);
}
.trava-sub {
  font-size:   clamp(.95rem, 1.6vw, 1.1rem);
  color:       var(--cor-texto-soft);
  max-width:   60ch;
  margin:      0 auto;
  line-height: 1.7;
}
/* Estrela divisória */
.trava-star {
  display:     block;
  color:       var(--gold);
  font-size:   1.4rem;
  margin:      clamp(24px, 4vh, 48px) auto 0;
  text-align:  center;
  opacity:     .6;
}

/* ===================================================================== */
/* A FILA — galeria de pacientes nomeados                                */
/* ===================================================================== */

.a-fila {
  /* padding-bottom maior: absorve o espaço da seção antes/depois removida */
  padding:         var(--section-pad) clamp(20px,5vw,56px) clamp(80px,14vh,140px);
  max-width:       1320px;
  margin:          0 auto;
  position:        relative;
  z-index:         2;
}

.a-fila-head {
  max-width: 640px;
  margin-bottom: clamp(40px, 7vh, 72px);
}
.a-fila-head h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  color:     var(--cor-texto);
}

.fila-grid {
  display:               grid;
  /* Desktop/tablet: auto-fill colunas de 200px */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap:                   clamp(10px, 2vw, 20px);
}

/* Mobile: 2 colunas fixas — a Fila é uma fila, não um único rosto por vez */
@media (max-width: 600px) {
  .fila-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .fila-card-body {
    padding: 10px 12px;
  }
  .fila-card-name {
    font-size: .95rem;
    margin-bottom: 4px;
  }
  .fila-card-case {
    font-size: .72rem;
  }
}

.fila-card {
  border-radius:   16px;
  overflow:        hidden;
  background:      rgba(255,255,255,.04);
  border:          1px solid rgba(200,169,110,.12);
  transition:      transform .3s, box-shadow .3s;
  position:        relative;
  /* Flexbox coluna: garante que a body preencha o restante da cell —
     sem buracos quando duas cards do mesmo row têm textos de comprimento diferente */
  display:         flex;
  flex-direction:  column;
}
.fila-card:hover {
  transform:    translateY(-4px);
  box-shadow:   0 16px 40px -16px rgba(0,0,0,.5);
}

.fila-card-img {
  width:        100%;
  /* 3/4 = 0.75 > todos os image-ratios (0.68–0.75): cover escala por WIDTH
     → bottom clipa automaticamente (captions nunca vazam).
     object-position: center top ancora o rosto no topo do recorte. */
  aspect-ratio: 3 / 4;
  object-fit:   cover;
  object-position: center top;
  display:      block;
  flex:         none; /* imagem não cresce — só o body cresce */
}

.fila-card-body {
  padding: clamp(12px, 2vw, 20px);
  flex:    1; /* preenche o espaço restante → cards irmãs têm mesma altura total */
}
.fila-card-name {
  display:     block;
  font-family: var(--font-display);
  font-size:   1.05rem;
  font-weight: 600;
  color:       var(--cor-texto);
  margin-bottom: 6px;
  letter-spacing: .02em;
}
.fila-card-case {
  font-size:   .78rem;
  color:       var(--cor-texto-soft);
  line-height: 1.45;
  margin:      0;
  /* Limita a 2 linhas: evita que texto longo de um card empurre a row inteira */
  display:            -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:           hidden;
}

/* Medalha do caso no canto superior da foto */
.fila-card-badge {
  position:    absolute;
  top:         12px;
  left:        12px;
  background:  rgba(200,169,110,.9);
  color:       var(--navy);
  font-family: var(--font-body);
  font-size:   .62rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding:     4px 10px;
  border-radius: 100px;
  z-index:     4;
}

/* ===================================================================== */
/* COMO ACONTECE — ANEL 3D / tratamentos                                 */
/* ===================================================================== */

.tratamentos {
  padding:     var(--section-pad) 0;
  position:    relative;
  z-index:     2;
}
.tratamentos-head {
  padding:      0 clamp(20px,5vw,56px);
  max-width:    1320px;
  margin:       0 auto clamp(32px, 5vh, 56px);
}
.tratamentos-head h2 {
  font-size:  clamp(2rem, 4vw, 3rem);
  color:      var(--cor-texto);
}

/* Grid fallback (tier baixo) — aspect-ratio uniform → gate uniformidade ✓ */
.trat-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap:                   clamp(12px, 2vw, 20px);
  padding:               0 clamp(20px,5vw,56px);
  max-width:             1320px;
  margin:                0 auto;
}

.trat-cell {
  border-radius: 18px;
  overflow:      hidden;
  background:    rgba(255,255,255,.04);
  border:        1px solid rgba(200,169,110,.12);
  aspect-ratio:  2/3;
}

.trat-img {
  height:          62%;
  background-size: cover;
  background-position: center top;
}

.trat-body {
  padding: clamp(14px, 2.5vw, 22px);
}
.trat-label {
  display:       block;
  font-family:   var(--font-body);
  font-size:     .65rem;
  font-weight:   700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:         var(--gold);
  margin-bottom: 8px;
}
.trat-cell h3 {
  font-family: var(--font-display);
  font-size:   1.1rem;
  font-weight: 600;
  color:       var(--cor-texto);
  margin-bottom: 8px;
  line-height:  1.15;
}
.trat-cell p {
  font-size:   .82rem;
  color:       var(--cor-texto-soft);
  line-height: 1.55;
}
/* Card destaque: ligeiramente maior no grid */
.trat-cell-destaque {
  grid-row: span 1;
}

/* ===================================================================== */
/* QUEM CUIDA                                                            */
/* ===================================================================== */

.quemcuida {
  padding:    var(--section-pad) clamp(20px,5vw,56px);
  max-width:  1000px;
  margin:     0 auto;
  position:   relative;
  z-index:    2;
}
.quemcuida h2 {
  font-size:   clamp(2.2rem, 4vw, 3.2rem);
  color:       var(--cor-texto);
  margin-bottom: 24px;
}
.quemcuida-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   clamp(32px, 6vw, 64px);
  margin-top:            clamp(24px, 4vh, 48px);
}
@media (max-width: 640px) {
  .quemcuida-grid { grid-template-columns: 1fr; }
}
.quemcuida-col h3 {
  font-family: var(--font-display);
  font-size:   1.5rem;
  font-weight: 500;
  color:       var(--gold);
  margin-bottom: 12px;
}
.quemcuida-bio {
  font-size:   clamp(.88rem, 1.4vw, 1rem);
  color:       var(--cor-texto-soft);
  line-height: 1.75;
}
.quemcuida-credenciais {
  list-style:  none;
  margin-top:  clamp(20px, 3vh, 32px);
  display:     flex;
  flex-wrap:   wrap;
  gap:         8px;
}
.quemcuida-credenciais li {
  font-family: var(--font-body);
  font-size:   .75rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  background:  rgba(200,169,110,.12);
  color:       var(--gold);
  border:      1px solid rgba(200,169,110,.25);
  padding:     6px 14px;
  border-radius: 100px;
}

/* Depoimento inline no quem cuida */
.quemcuida-depoimento {
  margin-top:  clamp(24px, 4vh, 40px);
  border-left: 2px solid var(--gold);
  padding-left: 20px;
}
.quemcuida-depoimento blockquote {
  font-family: var(--font-display);
  font-size:   clamp(1.05rem, 2vw, 1.3rem);
  font-style:  italic;
  color:       var(--cor-texto);
  line-height: 1.55;
  margin-bottom: 10px;
}
.quemcuida-depoimento footer {
  font-size:   .78rem;
  color:       var(--cor-texto-soft);
  font-style:  normal;
}

/* ===================================================================== */
/* PROVA SOCIAL                                                          */
/* ===================================================================== */

.prova-social {
  padding:    var(--section-pad) clamp(20px,5vw,56px);
  max-width:  1200px;
  margin:     0 auto;
  position:   relative;
  z-index:    2;
}
.prova-social h2 {
  font-size:   clamp(1.8rem, 3.5vw, 2.8rem);
  color:       var(--cor-texto);
  max-width:   700px;
  margin-bottom: clamp(32px, 5vh, 56px);
}

/* Badge Google — UMA VEZ APENAS no site inteiro */
.prova-rating {
  display:     flex;
  align-items: center;
  gap:         16px;
  margin-bottom: clamp(32px, 5vh, 56px);
  flex-wrap:   wrap;
}
.prova-rating-g { flex-shrink: 0; }
.prova-rating-num {
  font-family: var(--font-display);
  font-size:   2.4rem;
  font-weight: 600;
  color:       var(--cor-texto);
  line-height: 1;
}
.prova-rating-meta {
  display:       flex;
  flex-direction: column;
  gap:           4px;
}
.prova-stars {
  color:       #F5BD41;
  font-size:   1rem;
  letter-spacing: .04em;
}
.prova-rating-meta span:last-child {
  font-size:   .82rem;
  color:       var(--cor-texto-soft);
}

/* Grid de depoimentos */
.prova-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:                   clamp(16px, 2.5vw, 24px);
}

.prova-card {
  background:    rgba(255,255,255,.04);
  border:        1px solid rgba(200,169,110,.14);
  border-radius: 16px;
  padding:       clamp(20px, 3vw, 32px);
  margin:        0;
}
.prova-card p {
  font-family: var(--font-display);
  font-size:   clamp(1rem, 1.8vw, 1.2rem);
  font-style:  italic;
  color:       var(--cor-texto);
  line-height: 1.6;
  margin-bottom: 16px;
}
.prova-card footer {
  font-size:   .8rem;
  color:       var(--cor-texto-soft);
}
.prova-card footer span {
  opacity: .65;
}

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

.cta-final {
  padding:    var(--section-pad) clamp(20px,5vw,56px);
  max-width:  800px;
  margin:     0 auto;
  text-align: center;
  position:   relative;
  z-index:    2;
}
.cta-final-title {
  font-size:   clamp(2rem, 4vw, 3.2rem);
  color:       var(--cor-texto);
  margin-bottom: 20px;
}
.cta-final-title em {
  font-style:  italic;
  color:       var(--gold);
}
.cta-final-sub {
  font-size:   clamp(.9rem, 1.5vw, 1.05rem);
  color:       var(--cor-texto-soft);
  max-width:   52ch;
  margin:      0 auto clamp(28px, 4vh, 48px);
  line-height: 1.65;
}

/* Separador de estrela antes do CTA */
.cta-star-sep {
  color:       var(--gold);
  font-size:   1.2rem;
  margin-bottom: clamp(24px, 3vh, 40px);
  display:     block;
  opacity:     .55;
}

/* ===================================================================== */
/* RODAPÉ                                                                */
/* ===================================================================== */

.site-footer {
  padding:       clamp(40px, 6vh, 64px) clamp(20px,5vw,56px);
  border-top:    1px solid rgba(200,169,110,.15);
  position:      relative;
  z-index:       2;
}
.site-footer-inner {
  max-width:     1320px;
  margin:        0 auto;
  display:       flex;
  flex-wrap:     wrap;
  align-items:   center;
  justify-content: space-between;
  gap:           16px;
}
.site-footer-logo {
  width:    clamp(90px, 12vw, 140px);
  height:   auto;
  opacity:  .75;
}
.site-footer-addr {
  font-size:   .78rem;
  color:       var(--cor-texto-soft);
  flex:        1;
  text-align:  center;
}
.site-footer-disclaimer {
  font-size:   .72rem;
  color:       rgba(245,240,232,.38);
  letter-spacing: .05em;
}

/* ===================================================================== */
/* UTILITÁRIOS — reveals, fade                                           */
/* ===================================================================== */
[data-fade] { opacity: 0; transform: translateY(16px); transition: opacity .7s, transform .7s; }
[data-fade].is-visible { opacity: 1; transform: none; }
[data-reveal] { opacity: 0; }
[data-reveal].is-visible { opacity: 1; }

/* Fail-safe: se JS falhar, conteúdo aparece mesmo assim */
.no-js [data-fade],
.no-js [data-reveal] { opacity: 1 !important; transform: none !important; }