/* ═══════════════════════════════════════════════════════════
   Dra. Jessica Barakat — v5
   Luxo claro: cores do site original (creme, areia, café, dourado)
   + aurora suave, vidro fosco e linhas de luz.
   Cada seção é uma faixa com tom próprio (.tom-creme, .tom-areia,
   .tom-cafe); os componentes herdam as cores do tom.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* paleta da Dra.: café, areia, dourado e branco */
  --creme: #FFFFFF;
  --areia: #EBE1CF;
  --areia-2: #E1D4BC;
  --areia-3: #E1D4BC;
  --cafe: #3A3028;
  --cafe-2: #2F2620;
  --dourado: #C9A96E;
  --dourado-texto: #A07840;   /* dourado mais escuro só para texto pequeno sobre claro */
  --marrom-suave: #7A6A58;
  --rose: #C9A96E;
  --rose-claro: #E6CFA3;
  --rose-escuro: #A07840;

  --grad-btn: linear-gradient(120deg, #EEDDB8 0%, #D9BC88 48%, #C9A96E 100%);

  --display: 'Cormorant Garamond', 'Times New Roman', serif;
  --marca: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --ui: 'Instrument Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;

  --r-xl: 36px;
  --r-lg: 26px;
  --r-md: 18px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --cab-h: 84px;

  /* tom padrão = claro */
  --txt: var(--cafe);
  --txt-2: var(--marrom-suave);
  --txt-3: rgba(58, 48, 40, .5);
  --rotulo: var(--dourado-texto);
  --borda: rgba(58, 48, 40, .12);
  --borda-forte: rgba(58, 48, 40, .22);
  --grad-texto: linear-gradient(100deg, #C9A96E 0%, #A07840 100%);
  --vidro-bg: linear-gradient(150deg, rgba(255, 255, 255, .82) 0%, rgba(255, 255, 255, .5) 100%);
  --vidro-borda: rgba(201, 169, 110, .38);
  --vidro-sombra: 0 1px 2px rgba(58, 48, 40, .04), 0 24px 50px -24px rgba(58, 48, 40, .28);
  --icone: var(--rose-escuro);
}

/* ── Tons ── */
.tom-creme, .tom-areia { color: var(--txt); }
/* --fundo é a cor "chapada" de cada faixa: as curvas do topo usam essa mesma cor.
   Os brilhos ficam longe do topo para a emenda com a curva não aparecer. */
/* seções brancas: tecido de cetim bem suave ao fundo (véu branco por cima deixa ~20% visível) */
.tom-creme {
  --fundo: #FFFFFF;
  background:
    linear-gradient(rgba(255, 255, 255, .8), rgba(255, 255, 255, .8)),
    url('../../fotos/tecido.avif') center / cover no-repeat,
    #FFFFFF;
}
.tom-areia { --fundo: #EBE1CF; background: radial-gradient(42% 40% at 96% 92%, rgba(255, 255, 255, .5), transparent 70%), var(--areia); }
/* nas faixas brancas, os cards de vidro ganham fundo areia para destacar */
.tom-creme { --vidro-bg: linear-gradient(150deg, #F7F1E6 0%, rgba(235, 225, 207, .7) 100%); }
.tom-cafe {
  --txt: var(--creme);
  --txt-2: rgba(253, 250, 245, .74);
  --txt-3: rgba(253, 250, 245, .5);
  --rotulo: var(--dourado);
  --borda: rgba(255, 236, 224, .14);
  --borda-forte: rgba(255, 236, 224, .28);
  --grad-texto: linear-gradient(100deg, #F2E0BC 0%, #DCC08E 50%, #C9A96E 100%);
  --vidro-bg: linear-gradient(150deg, rgba(255, 238, 228, .12) 0%, rgba(255, 238, 228, .04) 100%);
  --vidro-borda: rgba(255, 228, 214, .18);
  --vidro-sombra: inset 0 1px 0 rgba(255, 255, 255, .12), 0 30px 60px -30px rgba(0, 0, 0, .5);
  --icone: var(--rose-claro);
  color: var(--txt);
}
.tom-cafe { --fundo: #3A3028; background: radial-gradient(45% 45% at 92% 96%, rgba(201, 169, 110, .16), transparent 70%), var(--cafe); }

/* ═══ Faixas com transição orgânica ═══ */
.banda { position: relative; isolation: isolate; --forma-h: 96px; }
.banda > .wrap { position: relative; z-index: 1; }

/* textura de luz (reflexos diagonais suaves), some perto das bordas */
.banda::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(118deg, transparent 18%, rgba(255, 255, 255, .55) 26%, transparent 36%),
    linear-gradient(118deg, transparent 52%, rgba(255, 255, 255, .4) 58%, transparent 66%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%);
  opacity: .9;
}
.tom-areia.banda::before { opacity: .6; }
.tom-cafe.banda::before {
  background:
    linear-gradient(118deg, transparent 20%, rgba(201, 169, 110, .1) 28%, transparent 38%),
    linear-gradient(118deg, transparent 55%, rgba(201, 169, 110, .07) 61%, transparent 68%);
  opacity: 1;
}

/* forma do topo: pinta a cor da faixa por cima do fim da seção anterior */
.banda[class*="forma-"]::after {
  content: ''; position: absolute; left: 0; right: 0; top: calc(var(--forma-h) * -1 + 1px); height: var(--forma-h);
  z-index: 0; pointer-events: none; background: var(--fundo);
  -webkit-mask: var(--mascara) 0 0 / 100% 100% no-repeat; mask: var(--mascara) 0 0 / 100% 100% no-repeat;
}
/* degrau em S subindo à direita (como na faixa da referência) */
.forma-degrau { --mascara: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V76H930C1010 76 1030 4 1120 4H1440V100Z'/%3E%3C/svg%3E"); }

/* contato: card que atravessa a divisa entre o FAQ (branco) e o contato (areia) */
/* o card sobe por cima do fim do FAQ: mais respiro embaixo do FAQ para eles não encostarem */
#duvidas { padding-bottom: 160px; }
#contato .final { margin-top: -190px; background: linear-gradient(180deg, #FFFFFF 0%, #FBF8F2 100%); box-shadow: 0 40px 80px -40px rgba(58, 48, 40, .4); border-color: rgba(201, 169, 110, .45); }
/* "Como funciona": painel que atravessa a divisa com Procedimentos (como na referência) */
#como-funciona .painel {
  margin-top: -180px; background: linear-gradient(180deg, #FFFFFF 0%, #FBF8F2 100%);
  border-color: rgba(201, 169, 110, .45); box-shadow: 0 40px 80px -40px rgba(58, 48, 40, .45);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; background: #EEE4D3; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html.lenis { scroll-behavior: auto; }
body { font-family: var(--ui); font-size: 17px; line-height: 1.6; color: var(--cafe); background: var(--creme); -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip; }
body.travado { overflow: hidden; }
body::after {
  content: ''; position: fixed; inset: 0; z-index: 1000; pointer-events: none; opacity: .045; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px;
}
img, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 1.5px solid var(--rose-escuro); outline-offset: 3px; border-radius: 10px; }
::selection { background: var(--rose); color: var(--cafe); }
.ico { width: 18px; height: 18px; flex-shrink: 0; }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 22px; }
.centro { display: flex; justify-content: center; }

/* ═══ Vidro ═══ */
.vidro {
  position: relative; background: var(--vidro-bg); border: 1px solid var(--vidro-borda);
  backdrop-filter: blur(22px) saturate(1.35); -webkit-backdrop-filter: blur(22px) saturate(1.35);
  box-shadow: var(--vidro-sombra);
}

/* vídeos: sempre mudos, sem controles, sem tela cheia e sem botão de play do iPhone por cima */
video { pointer-events: none; }
video::-webkit-media-controls, video::-webkit-media-controls-start-playback-button, video::-webkit-media-controls-panel { display: none !important; -webkit-appearance: none; }

/* ═══ Tipografia ═══ */
.titulo { font-family: var(--display); font-weight: 500; font-size: clamp(2.4rem, 9.4vw, 4.2rem); line-height: 1.02; letter-spacing: -.015em; color: var(--txt); }
.titulo em, .hero-titulo em, .ajuda h3 em {
  font-style: italic; font-weight: 400;
  background: var(--grad-texto); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em;
}
/* rótulos sem traço, como pedido */
.rotulo { display: inline-block; margin-bottom: 16px; font: 500 .74rem/1 var(--marca); letter-spacing: .26em; text-transform: uppercase; color: var(--rotulo); }
/* identificação da Dra. no topo: só texto, no estilo dos rótulos */
.chip { display: block; width: fit-content; font: 500 .74rem/1 var(--marca); letter-spacing: .24em; text-transform: uppercase; color: var(--dourado-texto); }

/* ═══ Botões ═══ */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 58px; padding: 0 32px; border-radius: 999px;
  font-weight: 500; font-size: 1rem; white-space: nowrap;
  transition: transform .3s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
.btn .ico { transition: transform .35s var(--ease); }
.btn:hover .ico { transform: translateX(4px); }
.btn:active { transform: scale(.97); }
.btn-cheio { width: 100%; }
.btn-rose { background: var(--grad-btn); color: #3A3028; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 14px 32px -14px rgba(160, 120, 64, .7); }
.btn-rose:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 20px 42px -14px rgba(160, 120, 64, .85); }
.btn-rose::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .6) 50%, transparent 70%); transform: translateX(-120%); transition: transform 1s var(--ease); }
.btn-rose:hover::after { transform: translateX(120%); }
.btn-linha { border: 1px solid var(--borda-forte); color: var(--txt); background: transparent; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn-linha:hover { border-color: var(--rose-escuro); background: rgba(201, 169, 110, .1); }
.redondo { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--borda-forte); color: var(--txt); transition: background .3s var(--ease), border-color .3s var(--ease); }
.redondo:hover { border-color: var(--rose); background: rgba(201, 169, 110, .14); }

/* ═══ Moldura com borda luminosa ═══ */
.moldura { position: relative; overflow: hidden; border-radius: 120px 120px var(--r-lg) var(--r-lg); background: var(--areia-2); isolation: isolate; }
.moldura img { width: 100%; height: 100%; object-fit: cover; }
.moldura::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; padding: 1.5px;
  background: linear-gradient(160deg, rgba(255, 245, 238, 1) 0%, rgba(201, 169, 110, .55) 24%, rgba(255, 255, 255, .1) 50%, rgba(201, 169, 110, .4) 78%, rgba(255, 245, 238, .9) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* ═══ Selo ═══ */
.selo { position: relative; width: 120px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; color: var(--dourado-texto); }
.selo svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: gira 28s linear infinite; }
.selo text { font: 500 9.2px var(--marca); letter-spacing: .2em; fill: currentColor; }
.selo img { width: 34%; height: auto; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ═══ Cabeçalho ═══ */
.cabecalho { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: max(10px, env(safe-area-inset-top)) 12px 0; }
.cab-in {
  max-width: 1280px; margin: 0 auto; height: 64px; padding: 0 10px 0 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  border-radius: 999px; border: 1px solid transparent; color: var(--cafe);
  transition: background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease), color .4s var(--ease);
}
/* no topo (sobre a capa clara) o menu é escuro; ao rolar vira vidro café com texto claro */
/* ao rolar, a barra vira vidro na cor da seção que está embaixo (--cab-bg vem do JS);
   sobre seções café ela fica clara por cima do escuro (.escuro) */
.cabecalho.rolou .cab-in { background: var(--cab-bg, rgba(255, 255, 255, .72)); border-color: rgba(201, 169, 110, .3); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); box-shadow: 0 16px 34px -22px rgba(58, 48, 40, .35); }
.cabecalho.escuro .cab-in { color: var(--creme); border-color: rgba(255, 236, 224, .18); box-shadow: 0 16px 34px -22px rgba(0, 0, 0, .5); }
.marca { display: flex; align-items: center; gap: 12px; }
.marca img { width: 30px; height: auto; }
.marca span { font: 500 1.25rem/1 var(--display); letter-spacing: .01em; white-space: nowrap; }
.cab-links { display: none; gap: 44px; font-size: .95rem; color: var(--marrom-suave); }
.cabecalho.escuro .cab-links { color: rgba(253, 250, 245, .82); }
.cab-links a { position: relative; transition: color .25s var(--ease); }
.cab-links a::after { content: ''; position: absolute; left: 50%; right: 50%; bottom: -8px; height: 1px; background: var(--dourado); transition: left .35s var(--ease), right .35s var(--ease); }
.cab-links a:hover, .cab-links a.ativo { color: var(--cafe); }
.cabecalho.escuro .cab-links a:hover, .cabecalho.escuro .cab-links a.ativo { color: #fff; }
.cab-links a:hover::after, .cab-links a.ativo::after { left: 0; right: 0; }
.cab-cta { display: none; min-height: 50px; padding: 0 24px; font-size: .95rem; color: var(--cafe); border-color: rgba(58, 48, 40, .3); }
.cabecalho.escuro .cab-cta { color: var(--creme); border-color: rgba(255, 236, 224, .4); }
.cab-menu { position: relative; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(58, 48, 40, .25); background: rgba(255, 255, 255, .35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.cabecalho.escuro .cab-menu { border-color: rgba(255, 236, 224, .4); background: rgba(255, 238, 228, .08); }
.cab-menu span { position: absolute; left: 14px; right: 14px; height: 1.3px; background: var(--cafe); transition: transform .35s var(--ease), top .35s var(--ease); }
.cabecalho.escuro .cab-menu span, .menu .cab-menu span { background: var(--creme); }
.menu .cab-menu { border-color: rgba(255, 236, 224, .4); background: rgba(255, 238, 228, .08); }
.cab-menu span:first-child { top: 18px; }
.cab-menu span:last-child { top: 26px; }
.cab-menu.aberto span:first-child { top: 22px; transform: rotate(45deg); }
.cab-menu.aberto span:last-child { top: 22px; transform: rotate(-45deg); }

/* ═══════════════════ HERO ═══════════════════
   2 elementos: monograma (atrás) e Dra. recortada, sobre o fundo #EEE4D3.
   Todas as medidas são fixas (px/rem), nada depende da largura da tela:
   assim o zoom do navegador funciona normal (aumenta e diminui tudo junto).
   O monograma e o card são posicionados em % da caixa da Dra. (700×922),
   então o grupo nunca se desencaixa. */

.hero {
  position: relative; overflow: hidden; isolation: isolate; color: var(--cafe);
  background: radial-gradient(42% 58% at 74% 46%, rgba(255, 255, 255, .55), transparent 70%), #EEE4D3;
  padding: calc(var(--cab-h) + 36px) 0 0;
}
@keyframes entra { from { opacity: 0; transform: translateY(16px); } }

/* ── celular / tablet: empilhado ── */
.hero-palco { position: relative; width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 18px; }
.hero-texto > * { animation: entra 1s var(--ease) both; }
.hero-texto > :nth-child(2) { animation-delay: .1s; }
.hero-texto > :nth-child(3) { animation-delay: .22s; }
.hero-texto > :nth-child(4) { animation-delay: .34s; }
.hero .chip { margin-bottom: 26px; }
.hero-titulo { font: 500 3.1rem/1 var(--display); letter-spacing: -.02em; color: var(--cafe); }
.hero-titulo em { font-weight: 400; }
.hero-lead { margin-top: 24px; max-width: 34ch; font-size: 1.05rem; line-height: 1.65; color: var(--marrom-suave); }
.hero-btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero-local { display: flex; align-items: center; gap: 10px; margin-top: 22px; font-size: .88rem; line-height: 1.4; color: var(--marrom-suave); }
.hero-local .ico { flex-shrink: 0; width: 18px; height: 18px; color: var(--dourado-texto); }
.hero-local b { font-weight: 600; color: var(--cafe); white-space: nowrap; }
.hero-texto > :nth-child(5) { animation-delay: .46s; }
.hero .btn-linha { color: var(--cafe); border-color: rgba(58, 48, 40, .3); }

/* grupo da Dra. */
.hero-figura { position: relative; width: min(100%, 380px); aspect-ratio: 700 / 922; margin: 34px auto 0; }
.hero-monograma { position: absolute; z-index: 0; left: -6.4%; top: -6.8%; width: 108%; max-width: none; height: auto; pointer-events: none; }
.hero-dra { position: absolute; z-index: 1; left: 0; bottom: 0; width: 100%; height: auto; }
.hero-monograma, .hero-dra { animation: entra 1.2s var(--ease) .2s both; }
/* brilho suave por cima da foto, do lado do rosto: luz quente que "respira" devagar */
.hero-figura::after {
  content: ""; position: absolute; z-index: 2; pointer-events: none;
  left: -22%; top: -11%; width: 80%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 250, 238, .75) 0%, rgba(255, 240, 210, .45) 25%, rgba(236, 210, 160, .18) 48%, rgba(201, 169, 110, 0) 70%);
  filter: blur(8px); mix-blend-mode: screen;
  animation: entra 1.2s var(--ease) .4s both, brilha 7s ease-in-out 1.6s infinite;
}
/* animações contínuas em camada própria: a placa de vídeo cuida delas, sem redesenhar a página */
.hero-figura::after, .selo svg { will-change: transform; }
@keyframes brilha { 50% { opacity: .65; transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .hero-figura::after { animation: none; } }

.hero-card {
  position: absolute; z-index: 3; right: -2%; bottom: 12%; width: 250px;
  padding: 2px 16px; border-radius: var(--r-md);
  background: linear-gradient(150deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .62)); border-color: rgba(201, 169, 110, .45);
  animation: entra 1.2s var(--ease) .35s both;
}
.hero-card > div { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.hero-card > div + div { border-top: 1px solid rgba(58, 48, 40, .14); }
.hero-card .ico { flex: none; width: 26px; height: 26px; color: var(--dourado-texto); }
.hero-card strong { display: block; font: 500 1.05rem/1.2 var(--ui); color: var(--cafe); }
.hero-card span { display: block; margin-top: 4px; font-size: .78rem; line-height: 1.3; color: var(--marrom-suave); }

/* ── tablet ── */
@media (min-width: 720px) {
  .hero-palco { padding: 0 32px; }
  .hero-titulo { font-size: 4.2rem; }
  .hero-figura { width: 420px; }
}

/* ── desktop ──
   Mesmo comportamento das outras seções: conteúdo numa coluna centralizada
   de no máximo 1200px (igual ao .wrap), e a altura vem do conteúdo, não da tela.
   Assim, com zoom ou em monitores grandes, o hero fica alinhado ao resto do site. */
@media (min-width: 1000px) {
  .hero { padding-top: calc(var(--cab-h) + 40px); }
  .hero-palco {
    max-width: 1200px; padding: 0 32px;
    display: grid; grid-template-columns: minmax(0, 1fr) 460px; column-gap: 40px; align-items: end;
  }
  .hero-texto { align-self: center; padding-bottom: 40px; }
  /* ritmo do hero: rótulo colado no título, título → texto 24, texto → botões 40, botões → local 20 */
  .hero .chip { margin-bottom: 20px; }
  .hero-titulo { font-size: 3.8rem; line-height: 1.03; }
  .hero-lead { font-size: 1.12rem; line-height: 1.6; margin-top: 24px; max-width: 44ch; }
  .hero-btns { margin-top: 40px; gap: 14px; }
  .hero-btns .btn { min-height: 56px; padding: 0 30px; font-size: 1rem; }
  .hero-local { margin-top: 20px; }

  .hero-figura { width: 460px; margin: 0; justify-self: end; }
  /* card sobre o braço da Dra., passando só um pouco da borda dela */
  .hero-card { left: auto; right: -24px; bottom: 20%; width: 285px; padding: 6px 22px; border-radius: 18px; }
  .hero-card > div { padding: 14px 0; gap: 16px; }
  .hero-card .ico { width: 28px; height: 28px; }
  .hero-card strong { font-size: 1.15rem; }
  .hero-card span { font-size: .84rem; }
}

/* a partir de 1200px a coluna já está no tamanho máximo: só aumenta um pouco */
@media (min-width: 1200px) {
  .hero-palco { grid-template-columns: minmax(0, 1fr) 520px; }
  .hero-titulo { font-size: 4.6rem; }
  .hero-figura { width: 520px; }
  .hero-card { width: 285px; padding: 6px 24px; }
}

/* ═══ Seções ═══ */
.secao { padding: 104px 0; }
.secao-topo { display: grid; gap: 16px; margin-bottom: 40px; }
.secao-intro { color: var(--txt-2); max-width: 38ch; font-size: 1rem; }
.secao-topo-centro { justify-items: center; text-align: center; }
.painel { border-radius: var(--r-xl); padding: 56px 22px 44px; overflow: hidden; }
.js .revela { opacity: 0; transform: translateY(22px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .revela.visivel { opacity: 1; transform: none; }

/* ═══ Sobre ═══ */
.sobre { display: grid; gap: 48px; }
.sobre-midia { position: relative; width: min(100%, 460px); justify-self: center; }
.moldura-alta { aspect-ratio: 4 / 5.2; box-shadow: 0 40px 70px -40px rgba(58, 48, 40, .5); }
.moldura-alta img { object-position: center 24%; }
.js .sobre-midia .moldura { clip-path: inset(100% 0 0 0 round 120px 120px 26px 26px); transition: clip-path 1.4s var(--ease); }
.js .sobre.visivel .sobre-midia .moldura { clip-path: inset(0 0 0 0 round 120px 120px 26px 26px); }
.sobre-selo { position: absolute; z-index: 3; right: 12px; top: 18%; width: 104px; background: rgba(253, 250, 245, .78); border: 1px solid #fff; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--vidro-sombra); }
.flutua { position: absolute; z-index: 3; left: 12px; bottom: 24px; display: flex; align-items: center; gap: 12px; padding: 14px 20px 14px 14px; border-radius: var(--r-md); }
.flutua .ico { width: 36px; height: 36px; padding: 8px; border-radius: 12px; background: rgba(201, 169, 110, .22); color: var(--rose-escuro); }
.flutua b { display: block; font-weight: 500; font-size: .92rem; }
.flutua span { font-size: .8rem; color: var(--txt-2); }
.sobre-texto > p { margin-top: 16px; color: var(--txt-2); max-width: 36em; }
.sobre-texto { position: relative; z-index: 1; }

/* eventos: 3 fotos verticais + legenda */
.eventos { margin: 34px 0 0; }
.eventos-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.eventos-fotos img {
  width: 100%; aspect-ratio: 3 / 4.3; object-fit: cover; object-position: 50% 8%;
  border-radius: var(--r-md); box-shadow: 0 18px 34px -20px rgba(58, 48, 40, .45);
  outline: 1px solid rgba(201, 169, 110, .35); outline-offset: -1px;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.eventos-fotos img:hover { transform: translateY(-6px); box-shadow: 0 26px 40px -22px rgba(58, 48, 40, .55); }
.eventos figcaption { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; }
.eventos figcaption .rotulo { margin: 0; }
.eventos figcaption span:last-child { font: italic 400 1.15rem/1.4 var(--display); color: var(--txt-2); max-width: 34em; }

#sobre { overflow-x: clip; }

/* ═══ Procedimentos ═══ */
.procs { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 22px; margin: 0 -22px; padding: 0 22px 8px; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.procs::-webkit-scrollbar { display: none; }
.procs-nav { display: flex; align-items: center; gap: 16px; margin-top: 20px; font-size: .82rem; color: var(--txt-3); font-variant-numeric: tabular-nums; }
.procs-nav i { position: relative; flex: 1; height: 1px; background: var(--borda); }
.procs-nav b { position: absolute; left: 0; top: -1px; height: 3px; border-radius: 2px; background: var(--grad-btn); transition: transform .5s var(--ease); }
.proc {
  position: relative; display: block; flex: 0 0 76%; scroll-snap-align: start;
  aspect-ratio: 3 / 4; border-radius: var(--r-lg); overflow: hidden;
  clip-path: inset(0 round var(--r-lg));
  background: var(--cafe-2); text-align: left; color: var(--creme); isolation: isolate;
  transform: scale(.95); transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.proc.ativo { transform: none; }
.proc::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 2; pointer-events: none; padding: 1.3px;
  background: linear-gradient(165deg, rgba(255, 235, 225, .85), rgba(255, 255, 255, 0) 40%, rgba(201, 169, 110, .45) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.proc::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(46, 38, 32, 0) 35%, rgba(46, 38, 32, .55) 60%, rgba(46, 38, 32, .95) 100%); }
.proc-midia { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: saturate(.8); transition: transform 1s var(--ease); }
@media (hover: hover) { .proc:hover .proc-midia { transform: scale(1.06); } }
.proc-info { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 1; padding: 16px 16px 14px; border-radius: var(--r-md); background: linear-gradient(150deg, rgba(255, 238, 228, .14), rgba(255, 238, 228, .05)); border: 1px solid rgba(255, 228, 214, .2); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.proc-tag { display: block; font: 500 .6rem/1 var(--marca); letter-spacing: .2em; text-transform: uppercase; color: var(--rose-claro); margin-bottom: 8px; }
.proc-nome { display: block; font: 500 1.6rem/1.02 var(--display); }
.proc-mais { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: .78rem; font-weight: 500; color: var(--rose-claro); }
.proc-mais .ico { width: 15px; height: 15px; transition: transform .35s var(--ease); }
@media (hover: hover) { .proc:hover .proc-mais .ico { transform: translateX(4px); } }
.no-media { background: radial-gradient(90% 70% at 70% 20%, rgba(201, 169, 110, .35), transparent 60%), radial-gradient(70% 60% at 20% 90%, rgba(201, 169, 110, .22), transparent 60%), var(--cafe-2); }
/* celular: sem desfoque em cima do vídeo (era o que mais pesava ao arrastar) e sem zoom preso após o toque */
@media (max-width: 999px) {
  .proc { -webkit-tap-highlight-color: transparent; will-change: transform; }
  .proc-info { backdrop-filter: none; -webkit-backdrop-filter: none; background: linear-gradient(150deg, rgba(74, 62, 52, .62), rgba(46, 38, 32, .5)); }
  .proc-midia { transition: none; }
}

/* ═══ Como funciona ═══ */
.passos { position: relative; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 34px 14px; }
.passos li { text-align: center; }
.anel {
  position: relative; display: grid; place-items: center; width: 92px; height: 92px; margin: 0 auto 18px; border-radius: 50%;
  background: linear-gradient(150deg, #fff, rgba(255, 255, 255, .55));
  border: 1px solid #fff;
  box-shadow: 0 0 0 8px rgba(255, 255, 255, .35), 0 18px 34px -16px rgba(160, 120, 64, .55);
  color: var(--rose-escuro);
}
.anel .ico { width: 32px; height: 32px; }
.passos b { display: block; font: 500 1.45rem/1.15 var(--display); }
.passos p { margin-top: 8px; font-size: .88rem; line-height: 1.5; color: var(--txt-2); }
#como-funciona .centro { margin-top: 48px; }

/* ── visual premium (modelo aprovado): cetim, arcos dourados, anéis de vidro ── */
#como-funciona .painel {
  isolation: isolate;
  background:
    radial-gradient(60% 50% at 15% 10%, rgba(255, 255, 255, .9), transparent 70%),
    linear-gradient(rgba(251, 247, 239, .78), rgba(248, 242, 231, .82)),
    url('../../fotos/tecido.avif') center / cover no-repeat, #F8F2E7;
}
.rotulo-tracos { display: inline-flex; align-items: center; gap: 18px; }
.rotulo-tracos::before, .rotulo-tracos::after { content: ''; width: 46px; height: 1px; background: linear-gradient(90deg, transparent, rgba(160, 120, 64, .6)); }
.rotulo-tracos::after { transform: scaleX(-1); }
#como-funciona .titulo em { display: block; }
#como-funciona .rotulo { font-size: .8rem; letter-spacing: .32em; white-space: nowrap; }
@media (max-width: 719px) {
  #como-funciona .rotulo { font-size: .72rem; letter-spacing: .26em; gap: 12px; }
  .rotulo-tracos::before, .rotulo-tracos::after { width: 24px; }
  .btn-bronze { padding: 0 30px; letter-spacing: .2em; }
  /* passos em lista vertical (linha do tempo): ícone pequeno à esquerda, texto à direita */
  #como-funciona .passos { grid-template-columns: 1fr; gap: 0; max-width: 340px; margin: 0 auto; }
  #como-funciona .passos li { position: relative; display: grid; grid-template-columns: 54px 1fr; column-gap: 18px; align-items: start; text-align: left; padding-bottom: 28px; }
  #como-funciona .passos li:last-child { padding-bottom: 0; }
  #como-funciona .passos li:not(:last-child)::before {
    content: ''; position: absolute; left: 27px; top: 62px; bottom: 6px; width: 1px;
    background: linear-gradient(180deg, rgba(185, 145, 80, .5), rgba(185, 145, 80, .12));
  }
  #como-funciona .anel {
    grid-row: span 2; width: 54px; height: 54px; margin: 0;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, .55), 0 0 0 6px rgba(201, 169, 110, .22), 0 12px 22px -14px rgba(140, 100, 50, .55);
  }
  #como-funciona .anel .ico { width: 22px; height: 22px; }
  #como-funciona .passos b { margin-top: 4px; font-size: 1.4rem; }
  #como-funciona .passos p { margin-top: 4px; font-size: .9rem; }
  #como-funciona .centro { margin-top: 36px; }
}
@media (min-width: 1000px) { #como-funciona .titulo { font-size: 5rem; line-height: .98; } }
#como-funciona .anel {
  background: radial-gradient(circle at 35% 25%, #fff 0%, rgba(255, 255, 255, .85) 45%, rgba(246, 238, 224, .9) 100%);
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow:
    0 0 0 7px rgba(255, 255, 255, .45), 0 0 0 8px rgba(201, 169, 110, .22),
    inset 0 -6px 14px rgba(201, 169, 110, .14),
    0 0 30px rgba(255, 250, 238, .9), 0 20px 34px -18px rgba(140, 100, 50, .55);
  color: #9C7A45;
}
#como-funciona .anel { margin-bottom: 22px; }
.btn-bronze {
  min-height: 60px; padding: 0 44px; gap: 18px;
  font-size: .82rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: #FBF5EA;
  background: linear-gradient(100deg, #7E5E33 0%, #A7804A 45%, #8C6A3B 100%);
  box-shadow: inset 0 1px 0 rgba(255, 236, 200, .45), inset 0 -10px 18px -10px rgba(255, 214, 150, .55), 0 18px 36px -16px rgba(110, 78, 38, .8);
}
.btn-bronze::after { content: ''; position: absolute; left: 30%; right: 30%; bottom: -1px; height: 2px; border-radius: 2px; background: radial-gradient(closest-side, rgba(255, 226, 170, .95), transparent); filter: blur(1px); }
.btn-bronze:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 236, 200, .45), inset 0 -10px 18px -10px rgba(255, 214, 150, .7), 0 24px 44px -16px rgba(110, 78, 38, .9); }
.btn-bronze:hover .ico { transform: translateX(4px); }

/* ═══ Consultório ═══ */
.reel { position: relative; height: 78svh; min-height: 520px; max-height: 740px; margin: 0 -22px; overflow: hidden; background: var(--cafe); cursor: pointer; color: var(--creme); }
.reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s var(--ease); }
.reel video.on { opacity: 1; }
.reel::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(46, 38, 32, .4) 0%, rgba(46, 38, 32, 0) 18%, rgba(46, 38, 32, 0) 80%, rgba(46, 38, 32, .25) 100%); }
.reel-barras { position: absolute; top: 18px; left: 18px; right: 18px; z-index: 2; display: flex; gap: 6px; }
.reel-barras i { flex: 1; height: 2px; border-radius: 2px; background: rgba(253, 250, 245, .35); overflow: hidden; }
.reel-barras b { display: block; height: 100%; width: 0; background: var(--grad-btn); }
/* ═══ Depoimentos ═══ */
.depos-setas { display: none; gap: 10px; }
.depos { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -22px; padding: 0 22px 10px; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.depos::-webkit-scrollbar { display: none; }
/* degradê nas pontas: o card cortado fica com baixa opacidade; o JS liga cada lado
   (--fe esquerda, --fd direita) só quando ainda há card escondido daquele lado */
/* o carrossel vai até a borda da tela (o 1º card continua alinhado ao conteúdo)
   e as pontas somem num degradê longo e suave, em curva */
.depos {
  --fe: 0px; --fd: 0px;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50%); padding-right: calc(50vw - 50%);
  /* scroll-padding é definido no JS (em px), igual à margem lateral */
  --mascara-depos: linear-gradient(90deg,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, .06) calc(var(--fe) * .3),
    rgba(0, 0, 0, .25) calc(var(--fe) * .55),
    rgba(0, 0, 0, .6) calc(var(--fe) * .8),
    #000 var(--fe),
    #000 calc(100% - var(--fd)),
    rgba(0, 0, 0, .6) calc(100% - var(--fd) * .8),
    rgba(0, 0, 0, .25) calc(100% - var(--fd) * .55),
    rgba(0, 0, 0, .06) calc(100% - var(--fd) * .3),
    rgba(0, 0, 0, 0) 100%);
  /* degradê das pontas desligado (com 3 depoimentos não é necessário) */
  -webkit-mask-image: none; mask-image: none;
  /* espaço embaixo para a sombra dos cards não ser cortada pela área de rolagem (era a "linha" feia) */
  padding-top: 6px; padding-bottom: 46px; margin-bottom: -36px;
}
/* Depoimentos: fundo café com degradê contínuo e suave (sem as faixas de luz diagonais) */
#depoimentos {
  background:
    radial-gradient(70% 55% at 12% 0%, rgba(201, 169, 110, .13), transparent 70%),
    radial-gradient(60% 55% at 100% 100%, rgba(201, 169, 110, .10), transparent 70%),
    linear-gradient(180deg, #40362D 0%, #3A3028 55%, #342B24 100%);
}
#depoimentos.banda::before { display: none; }
#depoimentos .depo {
  background: linear-gradient(160deg, rgba(255, 240, 225, .10) 0%, rgba(255, 240, 225, .035) 100%);
  border-color: rgba(255, 228, 214, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 22px 40px -22px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .08);
}
.depo { flex: 0 0 86%; max-width: 420px; scroll-snap-align: start; display: flex; flex-direction: column; padding: 30px 26px 24px; border-radius: var(--r-lg); }
.depo blockquote { flex: 1; }
.depo blockquote::before { content: '\201C'; display: block; height: 34px; font: 400 4.4rem/.8 var(--display); background: var(--grad-texto); -webkit-background-clip: text; background-clip: text; color: transparent; }
.depo blockquote p { font: 400 1.15rem/1.5 var(--display); color: var(--txt); }
.depo figcaption { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--borda); font-size: .82rem; color: var(--txt-3); }
.depo figcaption img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--cafe), 0 0 0 3px var(--rose-escuro); }
.depo figcaption b { display: block; font-size: .92rem; font-weight: 500; color: var(--txt); }
.pontos { display: flex; justify-content: center; gap: 6px; margin-top: 18px; }
.pontos i { width: 6px; height: 6px; border-radius: 3px; background: var(--borda-forte); transition: width .35s var(--ease), background .35s var(--ease); }
.pontos i.on { width: 24px; background: var(--rose); }

/* ═══ FAQ ═══ */
.duvidas { display: grid; gap: 28px; }
.faq { display: grid; gap: 12px; }
.faq-item { border-radius: var(--r-md); transition: background .35s var(--ease), border-color .35s var(--ease); }
.faq-item.aberto { background: linear-gradient(150deg, rgba(201, 169, 110, .3), rgba(255, 255, 255, .6)); border-color: rgba(201, 169, 110, .6); }
.faq-q { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; padding: 20px 20px 20px 24px; text-align: left; font-size: 1rem; font-weight: 500; }
.faq-mais { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; border: 1px solid var(--borda-forte); transition: transform .4s var(--ease), background .4s var(--ease); }
.faq-mais .ico { width: 16px; height: 16px; }
.faq-mais .ico { transition: transform .4s var(--ease); }
.faq-item.aberto .faq-mais .ico { transform: rotate(180deg); }
.faq-item.aberto .faq-mais { background: var(--grad-btn); border-color: transparent; }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.faq-a > div { overflow: hidden; }
.faq-a p { padding: 0 24px 22px; font-size: .95rem; color: var(--txt-2); max-width: 62ch; }
.faq-item.aberto .faq-a { grid-template-rows: 1fr; }
.ajuda { overflow: hidden; padding: 34px 28px 30px; border-radius: var(--r-lg); background: radial-gradient(80% 70% at 100% 0%, rgba(201, 169, 110, .35), transparent 70%), var(--vidro-bg); }
.ajuda-ico { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 20px; background: #fff; border: 1px solid rgba(201, 169, 110, .5); color: var(--rose-escuro); }
.ajuda-ico .ico { width: 24px; height: 24px; }
.ajuda h3 { font: 500 2.2rem/1.04 var(--display); }
.ajuda p { margin: 14px 0 26px; color: var(--txt-2); font-size: .96rem; max-width: 30ch; }
.ajuda-marca { position: absolute; right: -30px; bottom: -40px; width: 170px; opacity: .12; pointer-events: none; }

/* ═══ Sinais ═══ */
.sinais { list-style: none; display: grid; gap: 14px; }
.sinais li { padding: 26px 24px; border-radius: var(--r-lg); }
.sinais b { display: block; font: 500 1.45rem/1.15 var(--display); }
.sinais p { margin-top: 8px; font-size: .9rem; line-height: 1.5; color: var(--txt-2); }
#sinais .centro { margin-top: 40px; }
@media (min-width: 720px) { .sinais { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .sinais { grid-template-columns: repeat(3, 1fr); } }


/* ═══ Contato ═══ */
.final { position: relative; display: grid; gap: 40px; padding: 52px 22px 22px; border-radius: var(--r-xl); overflow: hidden; }
.final > * { position: relative; z-index: 1; }
.final-topo p { margin: 16px 0 30px; color: var(--txt-2); max-width: 380px; }
.final-mapa { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--borda); background: var(--creme); }
.final iframe { width: 100%; height: 240px; border: 0; display: block; filter: grayscale(.45) sepia(.2); }
.final-dados a { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-top: 1px solid var(--borda); font-size: .92rem; overflow-wrap: anywhere; transition: background .3s var(--ease); }
.final-dados a:hover { background: var(--areia); }
.final-dados .ico { margin-top: 2px; color: var(--rose-escuro); }
.final-dados small { display: block; margin-bottom: 2px; font-size: .76rem; color: var(--dourado-texto); }

/* ═══ Rodapé ═══ */
.rodape { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 70px 22px 56px; text-align: center; font-size: .82rem; color: var(--txt-3); }
.rodape-selo { width: 104px; color: var(--dourado); border: 1px solid var(--borda); }
.rodape-nome { width: 210px; opacity: .9; }
.rodape-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; font-size: .9rem; color: var(--txt-2); }
.rodape-nav a:hover { color: var(--rose-claro); }
.rodape-contatos { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 28px; margin-top: 4px; }
.rodape-contatos a { display: inline-flex; align-items: center; gap: 9px; padding: 8px 0; font-size: .92rem; color: var(--txt); transition: color .3s var(--ease); }
.rodape-contatos a:hover { color: var(--dourado); }
.rodape-contatos .ico { width: 18px; height: 18px; color: var(--dourado); }
.rodape-base {
  width: 100%; max-width: 1200px; margin-top: 18px; padding-top: 26px; border-top: 1px solid rgba(201, 169, 110, .22);
  display: flex; flex-direction: column; align-items: center; gap: 16px; font-size: .78rem; line-height: 1.7; color: var(--txt-3);
}
.rodape-legal p + p { margin-top: 2px; }
.rodape-base a { color: var(--txt-2); text-decoration: underline; text-decoration-color: rgba(201, 169, 110, .5); text-underline-offset: 3px; transition: color .3s var(--ease); }
.rodape-base a:hover { color: var(--dourado); }
.rodape-dev a { font-weight: 600; letter-spacing: .04em; text-decoration: none; color: var(--dourado); }
@media (min-width: 900px) {
  .rodape-base { flex-direction: row; justify-content: space-between; align-items: flex-end; text-align: left; padding: 26px 32px 0; }
}

/* ═══ Celular (iPhone 15 = 393×852) ═══ */
@media (max-width: 719px) {
  /* hero mais compacto: a Dra. já aparece na primeira tela */
  .hero { padding: calc(var(--cab-h) + 22px) 0 64px; }
  .hero-palco { padding: 0 22px; }
  .hero-card { display: none; }
  .hero .chip { margin-bottom: 14px; }
  .hero-titulo { font-size: 2.85rem; line-height: 1.02; }
  .hero-lead { margin-top: 18px; font-size: 1rem; line-height: 1.6; }
  .hero-btns { margin-top: 28px; gap: 10px; }
  .hero-local { margin-top: 16px; }
  .hero-btns .btn { flex: 1 1 100%; justify-content: center; min-height: 54px; }
  /* foto da Dra. primeiro, texto embaixo (teste — para voltar, apague as 3 linhas abaixo e use margin-top: 26px na figura) */
  .hero-palco { display: flex; flex-direction: column; }
  .hero-figura { order: -1; margin-top: 0; width: min(100%, 340px); }
  .hero-texto { position: relative; z-index: 3; margin-top: -14px; }
  /* base da foto some aos poucos no fundo, sem mostrar o corte */
  .hero-dra {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0, 0, 0, .55) 72%, rgba(0, 0, 0, .15) 88%, transparent 98%);
    mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0, 0, 0, .55) 72%, rgba(0, 0, 0, .15) 88%, transparent 98%);
  }
  /* vídeos do consultório num quadro com borda arredondada (não encosta nas laterais) */
  .reel {
    margin: 0; height: auto; min-height: 0; max-height: none; aspect-ratio: 4 / 5;
    border-radius: 28px; border: 1px solid rgba(201, 169, 110, .35);
    box-shadow: 0 30px 60px -30px rgba(58, 48, 40, .55);
  }
  .reel-barras { top: 14px; left: 16px; right: 16px; }
  /* foto do Sobre um pouco mais estreita: selo e card ficam na borda da foto, sem cobrir a Dra., e sem passar da margem */
  .sobre-midia { width: calc(100% - 32px); }
  .sobre-selo { right: -16px; top: 6%; width: 84px; }
  .flutua { left: -16px; bottom: 18px; gap: 10px; padding: 10px 16px 10px 10px; }
  .flutua .ico, .flutua > svg { width: 34px; height: 34px; padding: 8px; }
  .flutua b { font-size: .88rem; }
  .flutua span { font-size: .74rem; }
  /* degrau café no topo dos Procedimentos mais baixo no celular */
  .banda { --forma-h: 46px; }
  /* textos pequenos mais legíveis */
  .proc-tag { font-size: .68rem; }
  /* rodapé: links com área de toque confortável */
  /* rodapé compacto no celular */
  .rodape { gap: 12px; padding: 44px 22px max(28px, calc(env(safe-area-inset-bottom) + 16px)); }
  .rodape-selo { width: 64px; }
  .rodape-nome { width: 160px; }
  .rodape-nav { gap: 0 2px; font-size: .84rem; }
  .rodape-nav a { padding: 8px 8px; }
  .rodape-contatos { flex-direction: column; align-items: center; gap: 0; margin-top: 0; }
  .rodape-contatos a { padding: 5px 0; font-size: .86rem; }
  .rodape-contatos .ico { width: 16px; height: 16px; }
  .rodape-base { margin-top: 8px; padding-top: 16px; gap: 8px; font-size: .72rem; line-height: 1.55; }
}

/* ═══ WhatsApp flutuante ═══ */
.wpp {
  position: fixed; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40;
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: var(--grad-btn); color: #3A3028;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 16px 34px -12px rgba(160, 120, 64, .7);
  opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.wpp .ico { width: 25px; height: 25px; }
.wpp.on { opacity: 1; transform: none; pointer-events: auto; }

/* ═══ Menu (celular) ═══ */
.menu {
  position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; color: var(--creme); overflow-y: auto; overscroll-behavior: contain;
  padding: max(18px, env(safe-area-inset-top)) 22px max(28px, env(safe-area-inset-bottom));
  background: radial-gradient(70% 50% at 100% 0%, rgba(201, 169, 110, .3), transparent 70%), rgba(58, 48, 40, .95);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility 0s linear .35s;
}
.menu.on { opacity: 1; visibility: visible; transition: opacity .35s var(--ease); }
.menu-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; }
.menu nav { display: flex; flex-direction: column; }
/* menu clean: texto menor, linhas bem suaves e uma setinha dourada discreta */
.menu nav a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 2px; border-bottom: 1px solid rgba(255, 236, 224, .08);
  font: 400 1.32rem/1.1 var(--display); letter-spacing: .01em; color: rgba(253, 250, 245, .92);
  -webkit-tap-highlight-color: transparent; transition: color .25s var(--ease), padding .25s var(--ease);
}
.menu nav a::after { content: ''; width: 7px; height: 7px; border-top: 1px solid var(--dourado); border-right: 1px solid var(--dourado); transform: rotate(45deg); opacity: .7; }
.menu nav a:active, .menu nav a:hover { color: var(--dourado); padding-left: 6px; }
.menu .btn { margin-top: auto; }

/* ═══ Telas de procedimento ═══ */
.fundo { position: fixed; inset: 0; z-index: 90; background: rgba(46, 38, 32, .5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility 0s linear .4s; }
.fundo.on { opacity: 1; visibility: visible; transition: opacity .4s var(--ease); }
.tela { position: fixed; top: 0; right: 0; bottom: 0; z-index: 100; width: 100%; display: flex; flex-direction: column; color: var(--cafe); background: radial-gradient(80% 50% at 100% 100%, rgba(201, 169, 110, .22), transparent 70%), var(--creme); transform: translateX(100%); transition: transform .5s var(--ease); visibility: hidden; }
.tela.on { transform: none; visibility: visible; }
.tela.saindo { visibility: visible; }
.tela.sem-slide { transition: none; }
::view-transition-group(proc-foto) { animation-duration: .5s; animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
::view-transition-old(proc-foto), ::view-transition-new(proc-foto) { height: 100%; object-fit: cover; animation-duration: .5s; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; }
.tela-voltar { position: absolute; top: max(14px, env(safe-area-inset-top)); left: 14px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(253, 250, 245, .9); border: 1px solid #fff; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.tela-voltar .ico-fechar { display: none; }
.tela-corpo { flex: 1; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.tela-midia { position: relative; height: 56svh; max-height: 560px; overflow: hidden; border-radius: 0 0 var(--r-xl) var(--r-xl); background: var(--areia-2); }
.tela-midia img, .tela-midia video { width: 100%; height: 100%; object-fit: cover; }
.tela-video { height: auto; aspect-ratio: 16 / 9; max-height: 66svh; background: var(--cafe); }
.tela-video video { object-fit: contain; }
.tela-video.no-media { aspect-ratio: auto; height: 30svh; }
.tela-texto { padding: 28px 22px 32px; }
.tela-texto .titulo { font-size: 2.7rem; }
.tela-texto .corpo p { margin-top: 14px; color: var(--marrom-suave); max-width: 62ch; }
.tela-pe { display: grid; gap: 10px; padding: 14px 16px max(16px, env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(253, 250, 245, 0), var(--creme) 30%); }
.aviso { text-align: center; font-size: .76rem; color: var(--marrom-suave); }

/* ═══ Formulário antes do WhatsApp (folha que sobe no celular, janela central no computador) ═══ */
/* altura "grande" da tela: cobre também a área atrás das barras do Safari no iPhone */
.fw { position: fixed; left: 0; right: 0; top: 0; height: 100vh; height: 100lvh; z-index: 130; display: flex; align-items: flex-end; justify-content: center; }
.fw[hidden] { display: none; }
.fw, .fw * { -webkit-tap-highlight-color: transparent; }
.fw-fundo { position: absolute; inset: -120px 0; background: rgba(46, 38, 32, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .35s var(--ease); }
.fw-caixa {
  position: relative; width: 100%; max-height: 92svh; overflow-y: auto; overscroll-behavior: contain;
  padding: 30px 22px max(22px, env(safe-area-inset-bottom)); border-radius: 28px 28px 0 0;
  /* no iPhone a folha vai até o fim da tela: sobra espaço para o botão não ficar atrás da barra do Safari */
  padding-bottom: max(22px, env(safe-area-inset-bottom), calc(100lvh - 100svh + 18px));
  background: radial-gradient(90% 60% at 100% 0%, rgba(201, 169, 110, .18), transparent 70%), #FBF8F2;
  color: var(--cafe); box-shadow: 0 -20px 60px -20px rgba(46, 38, 32, .5);
  transform: translateY(100%); transition: transform .4s var(--ease);
}
/* barra de rolagem do formulário: fina, dourada como o botão, afastada da borda e das curvas da caixa */
.fw-caixa::-webkit-scrollbar { width: 18px; }
.fw-caixa::-webkit-scrollbar-track { margin: 26px 0; border: 7px solid transparent; border-radius: 999px; background: rgba(201, 169, 110, .2); background-clip: padding-box; }
.fw-caixa::-webkit-scrollbar-thumb { border: 6px solid transparent; border-radius: 999px; background: linear-gradient(180deg, #E3C995 0%, #D2B27A 50%, #C9A96E 100%); background-clip: padding-box; }
.fw-caixa::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #D9BC88 0%, #C9A96E 60%, #A07840 100%); background-clip: padding-box; }
@supports not selector(::-webkit-scrollbar) { .fw-caixa { scrollbar-width: thin; scrollbar-color: #C9A96E transparent; } }
.fw.on .fw-fundo { opacity: 1; }
.fw.on .fw-caixa { transform: none; }
.fw-fechar { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(58, 48, 40, .18); background: #fff; color: var(--cafe); }
.fw-fechar .ico { width: 16px; height: 16px; transform: rotate(45deg); }
.fw-titulo { padding-right: 44px; font: 500 2rem/1.05 var(--display); }
.fw-titulo em { font-style: italic; font-weight: 400; color: var(--dourado-texto); }
.fw-sub { margin: 8px 0 20px; font-size: .92rem; color: var(--marrom-suave); }
.fw-campo { display: block; border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }
.fw-campo > span, .fw-campo legend { display: block; margin-bottom: 7px; padding: 0; font-size: .86rem; font-weight: 500; color: var(--cafe); }
.fw-campo legend small { font-weight: 400; color: var(--marrom-suave); }
.fw-campo input[type="text"] {
  width: 100%; height: 50px; padding: 0 16px; border-radius: 14px; font: 400 16px var(--ui); color: var(--cafe);
  background: #fff; border: 1px solid rgba(201, 169, 110, .45); outline: none; transition: border-color .25s, box-shadow .25s;
}
.fw-campo input[type="text"]:focus { border-color: var(--dourado); box-shadow: 0 0 0 4px rgba(201, 169, 110, .18); }
.fw-opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.fw-pilula { position: relative; cursor: pointer; }
.fw-pilula input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; -webkit-appearance: none; appearance: none; clip-path: inset(50%); }
.fw-campo input[type="text"] { -webkit-appearance: none; appearance: none; }
.fw-pilula span {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 15px; border-radius: 999px; font-size: .88rem;
  background: #fff; border: 1px solid rgba(201, 169, 110, .4); color: var(--cafe); transition: background .25s, border-color .25s, color .25s;
}
.fw-pilula input:checked + span { background: var(--grad-btn); border-color: transparent; font-weight: 500; }
.fw-pilula input:focus-visible + span { box-shadow: 0 0 0 3px rgba(201, 169, 110, .35); }
.fw-pilula input:focus { outline: none; }
.fw-erro { min-height: 1.3em; margin: 2px 0 10px; font-size: .86rem; color: #A3473A; }
@media (min-width: 720px) {
  .fw { align-items: center; padding: 24px; }
  /* no computador o botão fica preso no rodapé da caixa: aparece de cara, mesmo em tela baixa */
  .fw-pe { position: sticky; bottom: -32px; margin: 0 -36px -32px; padding: 4px 36px 32px; background: #FBF8F2; box-shadow: 0 -18px 18px -14px #FBF8F2; }
  .fw-caixa { max-width: 520px; border-radius: 28px; padding: 38px 36px 32px; transform: translateY(24px) scale(.97); opacity: 0; transition: transform .4s var(--ease), opacity .3s var(--ease); }
  .fw.on .fw-caixa { opacity: 1; }
  .fw-titulo { font-size: 2.4rem; }
}


@media (prefers-reduced-motion: reduce) {
  .js .revela, .js .sobre-midia .moldura { opacity: 1; transform: none; clip-path: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ═══════════ Tablet ═══════════ */
@media (min-width: 720px) {
  .wrap { padding: 0 32px; }
  .proc { flex-basis: 44%; }
  .depo { flex-basis: 46%; }
  .passos { grid-template-columns: repeat(4, 1fr); }
  .passos::before { content: ''; position: absolute; left: 12.5%; right: 12.5%; top: 46px; height: 1px; background: linear-gradient(90deg, rgba(185, 145, 80, .25), rgba(185, 145, 80, .7) 50%, rgba(185, 145, 80, .25)); }
  .reel { margin: 0; border-radius: var(--r-xl); height: auto; min-height: 0; max-height: none; aspect-ratio: 16 / 9; box-shadow: 0 40px 80px -40px rgba(58, 48, 40, .5); }
  .painel { padding: 80px 48px 64px; }
  .final { padding: 64px 44px 44px; }
}

/* ═══════════ Desktop ═══════════ */
@media (min-width: 1000px) {
  .cab-links { display: flex; }
  .cab-cta { display: inline-flex; }
  .cab-menu { display: none; }
  .cabecalho { padding: 18px 32px 0; }
  .cab-in { height: 72px; padding: 0 12px 0 22px; }
  .marca img { width: 38px; }
  .banda { --forma-h: 130px; }
  #contato .final { margin-top: -260px; }
  #duvidas { padding-bottom: 220px; }
  #como-funciona .painel { margin-top: -250px; }
  .marca span { font-size: 1.6rem; }

  .secao { padding: 140px 0; }
  .secao-topo { grid-template-columns: 1fr minmax(0, 36ch); align-items: end; gap: 48px; margin-bottom: 52px; }
  .secao-topo-centro { grid-template-columns: 1fr; gap: 16px; }

  /* foto da esquerda com a mesma altura do texto: topo e base alinhados no grid */
  .sobre { grid-template-columns: 5fr 6fr; gap: 80px; align-items: stretch; }
  .sobre-midia { display: flex; }
  .sobre-midia .moldura-alta { flex: 1; aspect-ratio: auto; min-height: 560px; }
  .sobre-texto { display: flex; flex-direction: column; }
  .sobre-texto .eventos { margin-top: auto; padding-top: 34px; }
  .eventos figcaption span:last-child { line-height: 1.3; }
  .eventos-fotos { gap: 18px; }
  .eventos figcaption span:last-child { font-size: 1.25rem; }
  .sobre-midia { width: 100%; }
  .moldura-alta { border-radius: 180px 180px 32px 32px; }
  .js .sobre-midia .moldura { clip-path: inset(100% 0 0 0 round 180px 180px 32px 32px); }
  .js .sobre.visivel .sobre-midia .moldura { clip-path: inset(0 0 0 0 round 180px 180px 32px 32px); }
  .sobre-selo { right: -50px; width: 128px; }
  .flutua { left: -50px; }

  /* 3 cards em cima e 2 mais largos embaixo: tudo maior e mais legível */
  .procs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px; overflow: visible; margin: 0; padding: 0; }
  .proc { grid-column: span 2; aspect-ratio: 4 / 4.6; }
  .proc:nth-child(n + 4) { grid-column: span 3; aspect-ratio: 16 / 10; }
  .proc, .proc.ativo { transform: none; }
  .proc:hover { transform: translateY(-8px); box-shadow: 0 40px 60px -30px rgba(0, 0, 0, .6), 0 0 50px -20px rgba(201, 169, 110, .45); }
  .procs-nav { display: none; }
  .proc-info { left: 16px; right: 16px; bottom: 16px; padding: 15px 18px 14px; }
  .proc:nth-child(n + 4) .proc-info { right: auto; width: min(58%, 350px); }
  .proc-tag { font-size: .64rem; margin-bottom: 8px; }
  .proc-nome { font-size: 1.65rem; }
  .proc-mais { margin-top: 10px; font-size: .84rem; }
  .proc-mais .ico { width: 16px; height: 16px; }

  .painel { padding: 100px 72px 84px; }
  .anel { width: 112px; height: 112px; }
  .anel .ico { width: 38px; height: 38px; }
  .passos { gap: 36px; }
  .passos::before { top: 56px; }
  .passos b { font-size: 1.65rem; }

  .depos-setas { display: flex; justify-self: end; align-self: end; }
  .depo { flex-basis: calc((100% - 42px) / 3.4); max-width: none; }
  .pontos { display: none; }

  /* caixa da direita acompanha a lista: começa na 1ª pergunta e termina na última */
  .duvidas { grid-template-columns: 1.5fr 1fr; column-gap: 56px; row-gap: 0; align-items: stretch; }
  .duvidas > div:first-child { display: contents; }
  .duvidas .secao-topo { grid-column: 1; grid-row: 1; }
  .duvidas .faq { grid-column: 1; grid-row: 2; }
  .duvidas .ajuda { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
  .duvidas .secao-topo { grid-template-columns: 1fr; }
  .ajuda { padding: 48px 40px 42px; }


  .final { grid-template-columns: 1fr 1.1fr; gap: 72px; align-items: center; padding: 96px 72px 72px; }
  .final iframe { height: 300px; }
  .final-dados { display: grid; grid-template-columns: 1fr 1fr; }
  .final-dados .largo { grid-column: 1 / -1; }
  .final-dados a:nth-child(3) { border-left: 1px solid var(--borda); }

  .wpp { right: 28px; bottom: 28px; }
  /* tela de procedimento no computador: painel flutuante, no mesmo padrão do pop-up do WhatsApp.
     A altura acompanha o conteúdo (sem vão vazio) e fica centralizada na vertical. */
  .tela {
    top: 50%; right: 16px; bottom: auto; width: 520px; max-height: calc(100vh - 32px);
    border-radius: 28px; overflow: hidden;
    background: radial-gradient(90% 60% at 100% 0%, rgba(201, 169, 110, .18), transparent 70%), #FBF8F2;
    box-shadow: 0 30px 80px -20px rgba(46, 38, 32, .55);
    transform: translate(calc(100% + 32px), -50%);
  }
  .tela.on { transform: translateY(-50%); }
  .tela-corpo { flex: 0 1 auto; }
  /* fechar com "×" no canto direito, como no pop-up do WhatsApp (no celular continua a seta de voltar) */
  .tela-voltar { top: 28px; left: auto; right: 28px; width: 40px; height: 40px; background: #fff; border-color: rgba(58, 48, 40, .18); }
  .tela-voltar .ico-voltar { display: none; }
  .tela-voltar .ico-fechar { display: block; width: 16px; height: 16px; transform: rotate(45deg); }
  /* foto/vídeo em moldura arredondada com fio dourado, como as fotos de eventos */
  .tela-midia { height: min(380px, 42vh); margin: 16px 16px 0; border-radius: var(--r-lg); outline: 1px solid rgba(201, 169, 110, .35); outline-offset: -1px; }
  /* vídeo explicativo: a largura manda, a altura vem do formato do vídeo (sem rolagem lateral) */
  .tela-midia.tela-video { height: auto; max-height: 60vh; }
  .tela-texto { padding: 26px 32px 24px; }
  .tela-pe { padding: 18px 32px 22px; border-top: 1px solid rgba(201, 169, 110, .3); background: #FBF8F2; }
}

/* celular: os cards de vidro ficam sobre fundo liso, então o desfoque não aparece, mas pesa muito no iPhone ao rolar.
   Fica no fim do arquivo para valer por cima das regras normais. */
@media (max-width: 719px) {
  .vidro:not(.hero-card) { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .btn-linha, .cab-menu, .sobre-selo { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .hero-figura::after { animation: entra 1.2s var(--ease) .4s both; }
}