/* v4: estrutura da ACQ em fundo claro, vidro nos elementos principais, degradê de aço escovado, azul só em detalhes */

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

:root {
  --ground: #f3f5f7;
  --ink: #111820;
  --soft: rgba(17, 24, 32, 0.74);
  --muted: rgba(17, 24, 32, 0.56);
  --blue: #104570;
  --steel-ink: #5b646c;
  --line: rgba(17, 24, 32, 0.1);
  --shade: 12, 18, 26;
  --r-lg: 28px;
  --r-md: 20px;
  --r-sm: 14px;
  /* degradê de destaque: do grafite ao azul do Dr. Julliano */
  --steel: linear-gradient(100deg, #1c2a38 0%, #104570 55%, #1f5f96 100%);
  --steel-edge: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.35) 35%, rgba(255, 255, 255, 0.12) 60%, rgba(255, 255, 255, 0.85));
  --glass-rim: conic-gradient(from 200deg, rgba(255, 255, 255, 1) 0deg, rgba(255, 255, 255, 0.18) 70deg, rgba(255, 255, 255, 0.06) 110deg, rgba(255, 255, 255, 0.85) 180deg, rgba(255, 255, 255, 0.18) 250deg, rgba(255, 255, 255, 0.06) 290deg, rgba(255, 255, 255, 1) 360deg);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

html { color: var(--ink); background: var(--ground); scroll-behavior: smooth; overflow-x: hidden; }

body {
  font-family: var(--font);
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 6%, rgba(139, 139, 139, 0.1), transparent 28rem),
    radial-gradient(circle at 80% 34%, rgba(16, 69, 112, 0.05), transparent 30rem),
    linear-gradient(145deg, #f6f7f9 0%, #eceff2 48%, #f6f7f9 100%);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { border: 0; font: inherit; color: inherit; background: none; cursor: pointer; }
img { max-width: 100%; display: block; }
.site { position: relative; overflow: hidden; }

.steel {
  font-weight: 600;
  background: var(--steel);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

h1, h2 { font-weight: 300; letter-spacing: 0.02em; color: var(--ink); }

/* vidro */
/* liquid glass do iPhone: quase sem véu, borda que brilha nos cantos, refração nas bordas (Chrome) */
.glass {
  position: relative;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06) 55%, rgba(255, 255, 255, 0.12));
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  box-shadow:
    0 14px 40px rgba(var(--shade), 0.14),
    0 2px 6px rgba(var(--shade), 0.06),
    inset 2px 3px 7px -3px rgba(255, 255, 255, 0.95),
    inset -2px -3px 7px -3px rgba(255, 255, 255, 0.6),
    inset 0 0 18px rgba(255, 255, 255, 0.12);
  isolation: isolate;
}

/* borda de luz: forte no canto de cima à esquerda e no de baixo à direita, apagada nos lados */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1.5px;
  border-radius: inherit;
  background: var(--glass-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* brilho que segue o ponteiro */
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(240px circle at var(--mx, 30%) var(--my, 0%), rgba(255, 255, 255, 0.7), transparent 60%);
  opacity: 0.55;
  transition: opacity 400ms ease;
  pointer-events: none;
}

.glass:hover::after { opacity: 0.9; }

/* botões */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  min-height: 58px;
  padding: 0 1.6rem 0 1.8rem;
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: transform 520ms var(--ease), box-shadow 520ms ease;
}

.btn:hover { transform: translateY(-2px); }

.btn-blue {
  position: relative;
  color: #fff;
  background: linear-gradient(135deg, rgba(16, 69, 112, 0.94), rgba(16, 69, 112, 0.78));
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 20px 50px rgba(16, 69, 112, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.btn-white {
  color: var(--blue);
  background: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22), inset 0 -1px 0 rgba(16, 69, 112, 0.08);
}

.btn-white:hover { box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28); }

.arrow { font-size: 1rem; transition: transform 360ms var(--ease); }
.btn:hover .arrow { transform: translateX(5px); }

.round {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-size: 1.1rem;
  transition: transform 420ms var(--ease);
}

.round:hover { transform: scale(1.06); }

/* menu */
.nav {
  position: fixed;
  top: clamp(0.8rem, 1.6vw, 1.4rem);
  left: 50%;
  z-index: 30;
  width: min(1320px, calc(100% - 2rem));
  translate: -50% 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2rem;
  min-height: 68px;
  padding: 0.5rem 0.55rem 0.5rem 1.4rem;
  border-radius: 999px;
}

.brand img { width: auto; height: 34px; }

.nav-links { display: flex; justify-content: center; gap: clamp(1rem, 2.4vw, 2.8rem); list-style: none; }
.nav-links a { position: relative; padding: 0.4rem 0; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--steel);
  transform: scaleX(0);
  transition: transform 420ms var(--ease);
}

.nav-links a:hover::after { transform: scaleX(1); }
.nav-links-cta { display: none; }
.nav-cta { min-height: 52px; }

.nav-toggle { display: none; width: 48px; height: 48px; border-radius: 50%; place-items: center; gap: 5px; align-content: center; }
.nav-toggle span { display: block; width: 18px; height: 1.5px; background: var(--ink); transition: transform 300ms var(--ease); }
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

/* abertura */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: 140px clamp(1.15rem, 7.7vw, 9.3rem) clamp(2.5rem, 5vw, 4.5rem);
  isolation: isolate;
  overflow: hidden;
  background: #e8eaec;
}

.hero-media, .hero-image, .hero-vignette { position: absolute; inset: 0; }
.hero-media { z-index: -2; }
.hero-image { width: 100%; height: 100%; object-fit: cover; object-position: 72% center; transform: scale(1.015); }

.hero-vignette {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(243, 245, 247, 0.97) 0%, rgba(243, 245, 247, 0.9) 30%, rgba(243, 245, 247, 0.15) 62%, rgba(243, 245, 247, 0) 100%),
    linear-gradient(180deg, rgba(243, 245, 247, 0.4) 0%, transparent 24%, transparent 74%, rgba(243, 245, 247, 0.95) 100%);
}

.hero-copy { max-width: 720px; }

.eyebrow { margin-bottom: clamp(1.4rem, 3.4vh, 2.4rem); color: var(--ink); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }

h1 { font-size: clamp(2.8rem, 4.4vw, 5.1rem); line-height: 1.1; }
.hero-word { display: block; overflow: hidden; padding-bottom: 0.08em; }
.hero-word > span { display: inline-block; }
.hero-word-sub { margin-top: 0.3em; font-size: 0.5em; line-height: 1.25; color: var(--soft); }

.hero-subtitle { max-width: 560px; margin-top: clamp(1.4rem, 3vh, 2rem); color: var(--soft); font-size: clamp(1rem, 1.1vw, 1.12rem); line-height: 1.66; }
.hero-subtitle strong { color: var(--ink); font-weight: 600; }
.hero-subtitle mark {
  color: var(--ink);
  font-weight: 600;
  background: linear-gradient(transparent 62%, rgba(16, 69, 112, 0.18) 62%);
  padding: 0 0.1em;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: clamp(1.8rem, 4vh, 2.6rem); }
.hero-actions .btn { min-width: 290px; min-height: 68px; padding: 0 1.8rem 0 2.1rem; font-size: 0.8rem; }
.hero-actions .btn .arrow { font-size: 1.15rem; }

.proofs { display: flex; flex-wrap: wrap; gap: clamp(1.4rem, 3vw, 3rem); margin-top: clamp(2rem, 5vh, 3.4rem); }
.proofs dt { font-size: clamp(2.9rem, 4vw, 4.1rem); font-weight: 700; line-height: 1; letter-spacing: -0.01em; }
.proofs dd { margin-top: 0.45rem; color: var(--soft); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }

/* sobre */
.about { padding: clamp(5rem, 9vw, 8rem) clamp(1rem, 4vw, 4.75rem) clamp(3rem, 5vw, 4.5rem); scroll-margin-top: 90px; }

.about-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  max-width: 1320px;
  margin-inline: auto;
}

.about h2 { margin-bottom: 1.4rem; font-size: clamp(2.3rem, 3.4vw, 4rem); line-height: 1.08; }
.about h2 strong { font-size: 1.12em; letter-spacing: 0; }
.about-copy { display: grid; gap: 1rem; max-width: 600px; color: var(--soft); font-size: clamp(0.98rem, 1vw, 1.06rem); line-height: 1.7; }

/* mosaico de vídeos do Dr. (fotos até os vídeos serem escolhidos) */
.about-reel {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0.9rem;
  height: clamp(560px, 84vh, 800px);
}

.reel-tile { position: relative; overflow: hidden; border-radius: var(--r-lg); background: #d8d8d8; box-shadow: 0 30px 80px rgba(var(--shade), 0.16); }
.reel-main { grid-row: 1 / span 2; }
.reel-tile img, .reel-tile video { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); transition: transform 1400ms var(--ease); }
.reel-tile:hover img, .reel-tile:hover video { transform: scale(1.04); }

.glass-bar.glass-bar-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 660px; margin: 2rem 0 0; }
.glass-bar-3 .bar-item { grid-template-columns: 24px 1fr; gap: 0.7rem; padding: 0.9rem 1rem; }
.glass-bar-3 .bar-item svg { width: 22px; height: 22px; }
.glass-bar-3 .bar-item h3 { letter-spacing: 0.1em; }

/* procedimentos: faixas de foto lado a lado; a escolhida abre grande com texto e botão */
.accordion {
  display: flex;
  gap: clamp(0.6rem, 1vw, 0.9rem);
  max-width: 1320px;
  height: clamp(520px, 72vh, 660px);
  margin: clamp(2rem, 4vw, 3rem) auto 0;
}

.acc-item {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: #d8d8d8;
  box-shadow: 0 30px 70px rgba(var(--shade), 0.14);
  cursor: pointer;
  container: proc / inline-size;
  transition: flex-grow 800ms var(--ease);
}

.acc-item.on { flex-grow: 8; cursor: default; }

.acc-item > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); transform: scale(1.04); transition: transform 1400ms var(--ease); }
.acc-item.on > img { transform: scale(1); }

.acc-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--shade), 0.35) 0%, rgba(var(--shade), 0.5) 40%, rgba(var(--shade), 0.88));
  transition: opacity 600ms ease;
}

.acc-item.on::after { opacity: 0.2; }

.acc-label {
  position: absolute;
  left: 50%; bottom: 1.6rem;
  z-index: 1;
  translate: -50% 0;
  color: #fff;
  font-size: clamp(0.92rem, 1.05vw, 1.05rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
  text-transform: uppercase;
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  transition: opacity 400ms ease;
}

.acc-item.on .acc-label { opacity: 0; }

/* barra fina no rodapé da foto: nome e frase à esquerda, botão à direita */
.acc-panel {
  position: absolute;
  left: 0.8rem; right: 0.8rem; bottom: 0.8rem;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "titulo botao" "texto botao";
  align-items: center;
  column-gap: 1.4rem;
  row-gap: 0.35rem;
  padding: 1.1rem 1.1rem 1.15rem 1.5rem;
  border-radius: var(--r-md);
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity 500ms ease, transform 700ms var(--ease);
}

.acc-item.on .acc-panel { opacity: 1; transform: none; pointer-events: auto; transition-delay: 650ms; }
.acc-item:not(.on) .acc-panel { transition-duration: 150ms; }
.acc-panel h3 { font-size: clamp(1.45rem, 2vw, 2.1rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; color: #fff; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4); }
.acc-panel p { margin-top: 0.2rem; color: rgba(255, 255, 255, 0.9); font-size: 0.86rem; line-height: 1.45; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.25); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* sobre a foto o vidro é fosco e escuro, para o texto branco ler em qualquer pele */
.acc-panel.glass {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.12), rgba(14, 22, 32, 0.12));
  -webkit-backdrop-filter: blur(26px);
  backdrop-filter: blur(26px);
}

/* a leitura vem de uma sombra suave na base da foto, não do vidro */
.acc-item.on::after { opacity: 1; background: linear-gradient(180deg, transparent 55%, rgba(var(--shade), 0.55) 100%); }
.acc-panel h3 { text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.35); }
.acc-panel p { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3); }
.acc-panel h3 { grid-area: titulo; align-self: end; }
.acc-panel p { grid-area: texto; align-self: start; margin-top: 0; max-width: 44ch; font-size: 0.92rem; }
.acc-panel .btn { grid-area: botao; min-height: 50px; padding: 0 1.2rem 0 1.4rem; gap: 0.9rem; font-size: 0.66rem; }

/* barra estreita (procedimento aberto em tela pequena): botão desce para baixo do texto */
@container proc (max-width: 470px) {
  .acc-panel { grid-template-columns: 1fr; grid-template-areas: "titulo" "texto" "botao"; row-gap: 0.5rem; }
  .acc-panel .btn { justify-self: start; margin-top: 0.4rem; }
}

/* barra de vidro */
.glass-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1320px;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  padding: 0.6rem;
  border-radius: var(--r-md);
  position: relative;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08) 55%, rgba(255, 255, 255, 0.16));
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  box-shadow:
    0 14px 40px rgba(var(--shade), 0.1),
    inset 2px 3px 7px -3px rgba(255, 255, 255, 0.95),
    inset -2px -3px 7px -3px rgba(255, 255, 255, 0.6);
}

.glass-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: var(--glass-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.bar-item { position: relative; display: grid; grid-template-columns: 30px 1fr; gap: 0.9rem; align-items: start; padding: 1rem 1.2rem; }

.bar-item + .bar-item::before {
  content: "";
  position: absolute;
  left: 0; top: 1rem; bottom: 1rem;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(139, 139, 139, 0.45), transparent);
}

.bar-item svg, .card-btn svg { width: 26px; height: 26px; fill: none; stroke: var(--steel-ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.bar-item h3 { margin-bottom: 0.3rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
.bar-item p { color: var(--muted); font-size: 0.86rem; line-height: 1.45; }

/* pacientes e alunos */
.block { padding: clamp(4.5rem, 8vw, 7rem) clamp(1rem, 4vw, 4.75rem); scroll-margin-top: 90px; }
.block-alt { background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0)); }

.block-head {
  display: grid;
  grid-template-columns: minmax(0, 0.6fr) minmax(280px, 0.4fr);
  gap: clamp(1.5rem, 6vw, 6rem);
  align-items: end;
  max-width: 1320px;
  margin: 0 auto;
}

.block-head h2 { font-size: clamp(2.4rem, 4vw, 5rem); line-height: 1.05; }
.block-head p { color: var(--soft); font-size: clamp(0.98rem, 1.05vw, 1.08rem); line-height: 1.68; }
.block-head mark, .hero-subtitle mark {
  color: var(--ink);
  font-weight: 600;
  background: linear-gradient(transparent 62%, rgba(16, 69, 112, 0.18) 62%);
  padding: 0 0.1em;
}

.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 1.6vw, 1.5rem);
  max-width: 1320px;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
}

.card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1rem, 1.8vw, 1.6rem);
  min-height: 340px;
  padding: 0.7rem;
  border-radius: var(--r-lg);
  transition: transform 620ms var(--ease), box-shadow 620ms ease;
}

.card:hover { transform: translateY(-4px); box-shadow: 0 34px 80px rgba(var(--shade), 0.14), inset 0 1px 0 #fff; }

.card-photo { position: relative; overflow: hidden; border-radius: var(--r-md); background: #d8d8d8; }
.card-photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); transition: transform 1100ms var(--ease); }
.card:hover .card-photo img { transform: scale(1.05); }
.card-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(var(--shade), 0.78)); }

.card-photo h3 {
  position: absolute;
  left: 1.1rem; right: 1.1rem; bottom: 1.1rem;
  z-index: 1;
  color: #fff;
  font-size: clamp(1rem, 1.3vw, 1.35rem);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.card-body { display: flex; flex-direction: column; justify-content: space-between; gap: 1.2rem; padding: 1.2rem 1rem 0.6rem 0; }
.card-body p { color: var(--soft); font-size: 0.96rem; line-height: 1.65; }
.card-body .btn { align-self: flex-start; min-height: 52px; font-size: 0.68rem; }

/* clínica */
.clinic { position: relative; min-height: 100svh; display: grid; align-items: center; padding: 120px clamp(1rem, 4vw, 4.75rem) 4rem; overflow: hidden; isolation: isolate; scroll-margin-top: 0; }

.clinic-slides { position: absolute; inset: 0; z-index: -2; }
.clinic-slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1200ms ease, transform 7000ms linear; }
.clinic-slides img.on { opacity: 1; transform: scale(1); }

.clinic-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(243, 245, 247, 0.85) 0%, rgba(243, 245, 247, 0.4) 40%, rgba(243, 245, 247, 0) 70%); }

.clinic-panel { width: min(100%, 520px); padding: clamp(1.6rem, 3vw, 2.6rem); border-radius: var(--r-lg); }
.clinic-panel h2 { font-size: clamp(2.2rem, 3.4vw, 3.8rem); line-height: 1.06; }
.clinic-text { min-height: 150px; margin-top: 1.6rem; transition: opacity 400ms ease; }
.clinic-text.fading { opacity: 0; }
.clinic-text h3 { margin-bottom: 0.6rem; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; }
.clinic-text p { color: var(--soft); font-size: 1.02rem; line-height: 1.65; }

.clinic-controls { display: flex; align-items: center; gap: 1rem; margin-top: 1.4rem; }
.clinic-dots { display: flex; gap: 0.5rem; }
.clinic-dots button { width: 8px; height: 8px; border-radius: 999px; background: rgba(17, 24, 32, 0.22); transition: width 420ms var(--ease), background 420ms ease; }
.clinic-dots button[aria-current="true"] { width: 26px; background: var(--steel); }

/* contato */
.contact { padding: clamp(5rem, 9vw, 8rem) clamp(1rem, 4vw, 4.75rem) 2rem; scroll-margin-top: 90px; }
.contact-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.contact h2 { font-size: clamp(2.4rem, 4vw, 4.6rem); line-height: 1.06; }
.contact-inner > p { margin-top: 1rem; color: var(--soft); font-size: 1.04rem; line-height: 1.6; }
.contact-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; margin-top: 2rem; }
.contact-actions .btn { min-width: 260px; }
.contact-line { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 0.8rem; margin-top: 1.8rem; color: var(--muted); font-size: 0.9rem; }
.contact-line a:hover { color: var(--ink); }

.footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; max-width: 1320px; margin: clamp(4rem, 8vw, 6rem) auto 0; padding-top: 1.4rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.8rem; }
.footer img { width: auto; height: 28px; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* entrada */
.fade-up { opacity: 0; transform: translateY(32px); transition: opacity 900ms var(--ease), transform 900ms var(--ease); }
.fade-up.is-visible { opacity: 1; transform: none; }
.nav.fade-up.is-visible { transform: none; }

/* tablet */
@media (max-width: 1100px) {
  .nav { grid-template-columns: 1fr auto auto; gap: 0.6rem; }
  .nav-links { display: none; }
  .nav-toggle { display: grid; }

  .nav-links.is-open {
    display: flex;
    position: absolute;
    top: calc(100% + 10px); left: 0; right: 0;
    flex-direction: column;
    gap: 1.1rem;
    padding: 1.6rem;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 30px 80px rgba(var(--shade), 0.14);
  }

  .about-inner, .block-head { grid-template-columns: 1fr; }
  .about-reel { height: 560px; }
  .glass-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bar-item:nth-child(3)::before { display: none; }
  .cards { grid-template-columns: 1fr; }
}

/* celular */
@media (max-width: 720px) {
  .nav { min-height: 60px; padding: 0.4rem 0.4rem 0.4rem 1.1rem; }
  .brand img { height: 28px; }
  .nav-cta { display: none; }
  .nav-links-cta { display: block; }
  .nav-links-cta a { color: var(--blue); }

  /* no celular a foto fica no alto e o texto embaixo, sem sobrepor o rosto */
  .hero { padding: 44svh 1rem 2.5rem; align-items: start; background: var(--ground); }
  .hero-media { bottom: auto; height: 52svh; }
  .hero-image { object-position: 70% 20%; }
  .hero-vignette { bottom: auto; height: 54svh; background: linear-gradient(180deg, transparent 50%, var(--ground) 94%); }
  h1 { font-size: clamp(2.2rem, 9.6vw, 3rem); }
  .eyebrow { font-size: 0.64rem; letter-spacing: 0.14em; margin-bottom: 1rem; }
  .proofs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; }
  .proofs dt { font-size: 1.95rem; }
  .hero-actions .btn, .contact-actions .btn { min-width: 100%; }

  .about-reel { height: 440px; gap: 0.6rem; }
  .glass-bar, .glass-bar.glass-bar-3 { grid-template-columns: 1fr; }
  /* no celular as faixas ficam empilhadas; a escolhida abre para baixo */
  .accordion { flex-direction: column; height: auto; }
  .acc-item { flex: none; height: 84px; transition: height 700ms var(--ease); }
  .acc-item.on { height: 500px; }
  .acc-label { left: 1.2rem; bottom: auto; top: 50%; translate: 0 -50%; writing-mode: horizontal-tb; transform: none; }
  .bar-item + .bar-item::before { left: 1.2rem; right: 1.2rem; top: 0; bottom: auto; width: auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(139, 139, 139, 0.4), transparent); }
  .bar-item:nth-child(3)::before { display: block; }

  .card { grid-template-columns: 1fr; }
  .card-photo { height: 260px; }
  .card-body { padding: 0.4rem 0.5rem 0.5rem; }

  .clinic { align-items: end; padding: 100px 1rem 1.5rem; min-height: 92svh; }
  .clinic-shade { background: linear-gradient(180deg, transparent 30%, rgba(243, 245, 247, 0.7) 100%); }
  .clinic-text { min-height: 170px; }

  .footer { justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .fade-up { opacity: 1; transform: none; }
}

/* frases das janelas de procedimento quebram em linhas de tamanho parecido */
.acc-panel h3, .acc-panel p { text-wrap: balance; }
.acc-panel p { max-width: 38ch; }

/* "Quero ser paciente" leva até aqui: título, texto e janelas cabem inteiros na tela */
#pacientes { scroll-margin-top: 0; padding-top: clamp(92px, 12vh, 112px); padding-bottom: clamp(1.5rem, 4vh, 3rem); }
#pacientes .block-head { grid-template-columns: minmax(0, 1fr) minmax(280px, 0.75fr); align-items: center; }
#pacientes .block-head h2 { font-size: clamp(2rem, 3.2vw, 3.8rem); white-space: nowrap; }
#pacientes .block-head p { font-size: clamp(0.92rem, 1vw, 1.02rem); line-height: 1.6; }
#pacientes .accordion { margin-top: clamp(1rem, 2.6vh, 1.8rem); height: clamp(360px, calc(100svh - 290px), 660px); }

@media (max-width: 1100px) {
  #pacientes .block-head h2 { white-space: normal; }
}

/* barra de informações dos cursos em azul */
.glass-bar.glass-bar-blue {
  background: linear-gradient(135deg, rgba(16, 69, 112, 0.94), rgba(22, 86, 138, 0.86));
  box-shadow: 0 22px 50px rgba(16, 69, 112, 0.28), inset 2px 3px 7px -3px rgba(255, 255, 255, 0.45), inset -2px -3px 7px -3px rgba(255, 255, 255, 0.25);
}
.glass-bar-blue .bar-item h3 { color: #fff; }
.glass-bar-blue .bar-item p { color: rgba(255, 255, 255, 0.78); }
.glass-bar-blue .bar-item svg { stroke: rgba(255, 255, 255, 0.9); }
.glass-bar-blue .bar-item + .bar-item::before { background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.35), transparent); }

/* trilha de cursos: do básico ao avançado */
.trail {
  display: grid;
  grid-template-columns: minmax(300px, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: stretch;
  max-width: 1320px;
  margin: clamp(2.2rem, 4vw, 3.4rem) auto 0;
}

.trail-list { position: relative; display: grid; gap: 1.6rem; align-content: center; padding-left: 1.6rem; }

/* linha da trilha */
.trail-list::before {
  content: "";
  position: absolute;
  left: 4px; top: 0.6rem; bottom: 0.6rem;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(to bottom, rgba(16, 69, 112, 0.15), rgba(16, 69, 112, 0.6));
}

.trail-step { position: relative; margin-bottom: 0.4rem; color: var(--blue); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; }
.trail-step span { display: block; margin-top: 0.25rem; color: var(--muted); font-size: 0.82rem; font-weight: 400; letter-spacing: 0; text-transform: none; }

/* ponto da etapa sobre a linha */
.trail-step::before {
  content: "";
  position: absolute;
  left: calc(-1.6rem - 1px); top: 0.2rem;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--blue);
}

.trail-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 0.7rem 1rem;
  border-radius: 14px;
  color: var(--soft);
  font-size: clamp(1.1rem, 1.5vw, 1.45rem);
  font-weight: 400;
  text-align: left;
  transition: background 400ms ease, color 400ms ease, transform 500ms var(--ease);
}

.trail-item .arrow { opacity: 0; transform: translateX(-6px); transition: opacity 400ms ease, transform 400ms var(--ease); }
.trail-item:hover { color: var(--ink); }

.trail-item.on {
  color: var(--blue);
  font-weight: 600;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 10px 30px rgba(var(--shade), 0.08), inset 0 1px 0 #fff;
  transform: translateX(4px);
}

.trail-item.on .arrow { opacity: 1; transform: none; }

.trail-stage {
  position: relative;
  min-height: clamp(440px, 62vh, 600px);
  overflow: hidden;
  border-radius: var(--r-lg);
  background: #d8d8d8;
  box-shadow: 0 34px 80px rgba(var(--shade), 0.18);
}

.trail-photos img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, center);
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 700ms ease, transform 1400ms var(--ease);
}

.trail-photos img.on { opacity: 1; transform: scale(1); }
.trail-stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(var(--shade), 0.6)); pointer-events: none; }

.trail-panel {
  position: absolute;
  left: 1rem; right: 1rem; bottom: 1rem;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "nivel botao" "titulo botao" "texto botao";
  align-items: center;
  column-gap: 1.4rem;
  row-gap: 0.3rem;
  padding: 1.2rem 1.2rem 1.25rem 1.5rem;
  border-radius: var(--r-md);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.12), rgba(14, 22, 32, 0.12));
  -webkit-backdrop-filter: blur(26px);
  backdrop-filter: blur(26px);
  transition: opacity 220ms ease;
}

.trail-panel.fading { opacity: 0; }
.trail-level { grid-area: nivel; color: rgba(255, 255, 255, 0.85); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4); }
.trail-panel h3 { grid-area: titulo; color: #fff; font-size: clamp(1.45rem, 2vw, 2.1rem); font-weight: 700; line-height: 1.1; text-wrap: balance; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.35); }
.trail-panel p { grid-area: texto; max-width: 44ch; color: rgba(255, 255, 255, 0.92); font-size: 0.92rem; line-height: 1.5; text-wrap: balance; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); }
.trail-panel .btn { grid-area: botao; min-height: 50px; padding: 0 1.2rem 0 1.4rem; gap: 0.9rem; font-size: 0.66rem; }

@media (max-width: 1100px) {
  .trail { grid-template-columns: 1fr; }
  .trail-stage { order: -1; }
}

@media (max-width: 720px) {
  .trail-stage { min-height: 460px; }
  .trail-panel { grid-template-columns: 1fr; grid-template-areas: "nivel" "titulo" "texto" "botao"; }
  .trail-panel .btn { justify-self: start; margin-top: 0.5rem; }
  .trail-item { font-size: 1.1rem; }
}

/* lista de cursos dentro de um cartão de vidro, como o resto do site */
.trail-list.glass {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.7rem;
  border-radius: var(--r-lg);
}
.trail-list::before { display: none; }

.trail-item { padding: 0.85rem 1.1rem; border-radius: var(--r-sm); font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.3; }
.trail-text { display: grid; gap: 0.2rem; }
.trail-text small { color: var(--muted); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.trail-item.on .trail-text small { color: var(--blue); }
.trail-item.on { transform: none; background: rgba(255, 255, 255, 0.85); }
.trail-item + .trail-item { box-shadow: 0 -1px 0 rgba(17, 24, 32, 0.06); }
.trail-item.on, .trail-item.on + .trail-item { box-shadow: 0 10px 30px rgba(var(--shade), 0.08), inset 0 1px 0 #fff; }
.trail-item.on + .trail-item { box-shadow: none; }

/* "Para alunos" leva até aqui: título, barra e cursos cabem na tela */
#alunos { scroll-margin-top: 0; padding-top: clamp(92px, 12vh, 112px); padding-bottom: clamp(1.5rem, 4vh, 3rem); }
#alunos .block-head { grid-template-columns: auto minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
#alunos .block-head h2 { font-size: clamp(2rem, 3.2vw, 3.8rem); white-space: nowrap; }
#alunos .block-head p { max-width: 70ch; justify-self: end; font-size: clamp(0.92rem, 1vw, 1.02rem); line-height: 1.6; }
#alunos .glass-bar { margin-top: clamp(1rem, 2.4vh, 1.6rem); }
#alunos .bar-item { padding: 0.75rem 1.1rem; }
#alunos .trail { margin-top: clamp(1rem, 2.4vh, 1.6rem); height: clamp(380px, calc(100svh - 330px), 620px); }
#alunos .trail-stage { min-height: 0; }
#alunos .trail-list.glass { justify-content: flex-start; overflow-y: auto; scrollbar-width: thin; }
#alunos .trail-item { padding: 0.6rem 1rem; font-size: clamp(0.95rem, 1.05vw, 1.08rem); }
#alunos .trail-text { gap: 0.1rem; }

@media (max-width: 1100px) {
  #alunos .block-head { grid-template-columns: 1fr; }
  #alunos .block-head h2 { white-space: normal; }
  #alunos .block-head p { justify-self: start; }
  #alunos .trail { height: auto; }
  #alunos .trail-stage { min-height: 440px; }
  #alunos .trail-list.glass { overflow: visible; }
}
#alunos .block-head p { max-width: 92ch; }
#alunos .trail-list.glass { gap: 0.1rem; padding: 0.5rem; }
#alunos .trail-item { padding: 0.45rem 0.9rem; }
#alunos .trail-text small { font-size: 0.6rem; }

/* os cursos dividem a altura toda do cartão, sem sobrar espaço vazio embaixo */
#alunos .trail-list.glass { justify-content: stretch; }
#alunos .trail-item { flex: 1 0 auto; font-size: clamp(1rem, 1.15vw, 1.15rem); }
#alunos .trail-text small { font-size: 0.64rem; }

/* nomes longos de curso quebram em linhas equilibradas ("... Botox e / Preenchimento Full Face") */
.trail-text, .trail-panel h3 { text-wrap: balance; }
/* "|" no nome do curso marca onde a linha quebra; no celular a quebra some se não couber */
@media (max-width: 720px) { .trail-text br, .trail-panel h3 br { display: none; } }
/* frase do painel do curso usa a largura toda, para caber em 2 linhas */
.trail-panel p { max-width: 62ch; }

/* título da clínica: "A clínica" pequeno em cima, "Setti Medic." grande embaixo */
.clinic-panel h2 { display: grid; gap: 0.15em; line-height: 1; }
.clinic-panel h2 .clinic-line { font-size: 0.5em; font-weight: 400; letter-spacing: 0.02em; color: var(--soft); }
.clinic-panel h2 strong { font-size: 1.15em; letter-spacing: -0.01em; }
/* foto clara da clínica: um véu branco à esquerda para o texto do painel ler bem */
.clinic-shade { background: linear-gradient(90deg, rgba(243, 245, 247, 0.92) 0%, rgba(243, 245, 247, 0.6) 38%, rgba(243, 245, 247, 0) 68%); }
.clinic-panel.glass { background: linear-gradient(160deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.28)); }

/* contato: chamada e botões à esquerda, cartão de vidro com as informações à direita */
.contact { padding-bottom: 0; }
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.85fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  max-width: 1320px;
  margin: 0 auto;
}
.contact-main h2 { font-size: clamp(2.2rem, 3.6vw, 4.2rem); line-height: 1.05; white-space: nowrap; }
.contact-main > p { max-width: 520px; margin-top: 1rem; color: var(--soft); font-size: 1.04rem; line-height: 1.6; }
.contact-main .contact-actions { justify-content: flex-start; margin-top: 1.8rem; }
.contact-main .contact-actions .btn { min-width: 270px; min-height: 64px; font-size: 0.76rem; }
.contact-numbers { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; margin-top: 1rem; color: var(--muted); font-size: 0.88rem; }
.contact-numbers b { color: var(--ink); font-weight: 600; }

.contact-card { display: grid; padding: 0.6rem 1.6rem; border-radius: var(--r-lg); background: linear-gradient(160deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.3)); }
.contact-card .info { display: grid; grid-template-columns: 26px 1fr; gap: 1rem; padding: 1.1rem 0; }
.contact-card .info + .info { border-top: 1px solid var(--line); }
.contact-card svg, .socials svg, .footer-social svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.contact-card .info > svg { width: 24px; height: 24px; color: var(--blue); margin-top: 0.1rem; }
.contact-card h3 { margin-bottom: 0.35rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; }
.contact-card p { color: var(--soft); font-size: 0.95rem; line-height: 1.55; }
.contact-card a { color: var(--blue); font-weight: 500; }
.contact-card .info > div > a { display: inline-block; margin-top: 0.35rem; font-size: 0.88rem; }
.socials { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.2rem; }
.socials a { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.8rem 0.4rem 0.55rem; border-radius: 999px; background: rgba(255, 255, 255, 0.75); box-shadow: 0 4px 14px rgba(var(--shade), 0.06); font-size: 0.86rem; }
.socials svg { width: 18px; height: 18px; }

/* marcação de dado que falta: some quando o dado for preenchido */
.pendente { color: #a0611b !important; font-style: italic; }
.pendente-link { outline: 1px dashed rgba(160, 97, 27, 0.6); outline-offset: 2px; }

/* rodapé completo */
.footer-full { max-width: 1320px; margin: clamp(4rem, 8vw, 6rem) auto 0; padding: 2.4rem 0 1.4rem; border-top: 1px solid var(--line); }
.footer-cols { display: grid; grid-template-columns: 1.4fr 0.8fr 1fr 1.3fr; gap: clamp(1.5rem, 3vw, 3rem); }
.footer-cols h3 { margin-bottom: 0.9rem; color: var(--ink); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; }
.footer-cols nav { display: grid; align-content: start; gap: 0.55rem; }
.footer-cols nav a, .footer-cols p { color: var(--soft); font-size: 0.9rem; line-height: 1.55; }
.footer-cols nav a:hover { color: var(--blue); }
.footer-cols p + p { margin-top: 0.6rem; }
.footer-cols p a { color: var(--blue); }
.footer-brand img { width: auto; height: 34px; margin-bottom: 1rem; }
.footer-social { display: flex; gap: 0.5rem; margin-top: 1.1rem; }
.footer-social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--blue); background: rgba(255, 255, 255, 0.75); box-shadow: 0 4px 14px rgba(var(--shade), 0.06); transition: transform 300ms var(--ease); }
.footer-social a:hover { transform: translateY(-2px); }
.footer-social svg { width: 20px; height: 20px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem 2rem; margin-top: 2.2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.8rem; line-height: 1.5; }

@media (max-width: 1100px) {
  .contact-grid { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .contact-main h2 { white-space: normal; }
  .contact-main .contact-actions .btn { min-width: 100%; }
  .contact-card { padding: 0.4rem 1.1rem; }
  .footer-cols { grid-template-columns: 1fr; }
  .footer-full { padding-inline: 0.2rem; }
}
.nowrap { white-space: nowrap; }

/* contato: título em duas linhas, alinhado à esquerda */
.contact-main h2 { white-space: normal; }

/* redes sociais em destaque dentro do cartão */
.socials { gap: 0.6rem; margin-top: 0.5rem; }
.socials a {
  gap: 0.6rem;
  padding: 0.5rem 1.1rem 0.5rem 0.5rem;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 600;
  box-shadow: 0 8px 22px rgba(var(--shade), 0.1);
  transition: transform 300ms var(--ease), box-shadow 300ms ease;
}
.socials a:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(16, 69, 112, 0.18); }
.socials a svg { width: 34px; height: 34px; padding: 7px; border-radius: 50%; color: #fff; background: var(--steel); stroke-width: 1.8; }

/* botões "como chegar" no endereço */
.route { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }
.contact-card .route a {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin: 0; padding: 0.55rem 1rem 0.55rem 0.8rem;
  border-radius: 999px;
  color: #fff; background: var(--steel);
  font-size: 0.82rem; font-weight: 600;
  box-shadow: 0 8px 20px rgba(16, 69, 112, 0.22);
  transition: transform 300ms var(--ease);
}
.contact-card .route a:hover { transform: translateY(-2px); }
.route svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
/* "como chegar" em branco, com texto e ícone azuis */
.contact-card .route a { color: var(--blue); background: #fff; box-shadow: 0 8px 22px rgba(var(--shade), 0.1); }
.contact-card .route a:hover { box-shadow: 0 12px 28px rgba(16, 69, 112, 0.18); }

/* letras maiores nos botões, principalmente nos de WhatsApp */
.btn { font-size: 0.84rem; }
.hero-actions .btn { font-size: 0.92rem; min-width: 310px; min-height: 70px; }
.contact-main .contact-actions .btn { font-size: 0.95rem; min-width: 300px; min-height: 72px; padding: 0 1.8rem 0 2.1rem; }
.acc-panel .btn, .trail-panel .btn { font-size: 0.76rem; min-height: 52px; }
.contact-card .route a { font-size: 0.9rem; }
.socials a { font-size: 1rem; }

/* primeira tela: legenda dos números e texto auxiliar maiores */
.proofs dd { font-size: 0.95rem; }
.hero-subtitle { font-size: clamp(1.1rem, 1.3vw, 1.28rem); max-width: 600px; }

@media (max-width: 720px) {
  .hero-actions .btn, .contact-main .contact-actions .btn { min-width: 100%; }
  .proofs dd { font-size: 0.78rem; }
}

/* rodada 2: letras maiores em botões, textos de apoio e menu */
.btn { font-size: 0.92rem; }
.hero-actions .btn { font-size: 1rem; min-width: 330px; min-height: 74px; }
.contact-main .contact-actions .btn { font-size: 1.04rem; min-width: 320px; min-height: 76px; }
.nav-cta { font-size: 0.86rem; min-height: 56px; }
.acc-panel .btn, .trail-panel .btn { font-size: 0.84rem; min-height: 54px; }
.contact-card .route a { font-size: 0.96rem; }
.socials a { font-size: 1.06rem; }

.nav-links a { font-size: 0.8rem; letter-spacing: 0.16em; }
.nav-links { gap: clamp(1rem, 2.2vw, 2.6rem); }

.hero-subtitle { font-size: clamp(1.18rem, 1.4vw, 1.36rem); max-width: 640px; }
.about-copy { font-size: clamp(1.06rem, 1.12vw, 1.16rem); }
.block-head p, #pacientes .block-head p, #alunos .block-head p { font-size: clamp(1.04rem, 1.12vw, 1.16rem); }
.acc-panel p, .trail-panel p { font-size: 1rem; }
.clinic-text p { font-size: 1.12rem; }
.contact-main > p { font-size: 1.14rem; max-width: 560px; }
.contact-card p { font-size: 1.02rem; }
.bar-item p { font-size: 0.94rem; }
.footer-cols nav a, .footer-cols p { font-size: 0.96rem; }

@media (max-width: 720px) {
  .hero-actions .btn, .contact-main .contact-actions .btn { min-width: 100%; }
  .nav-links a { font-size: 0.9rem; }
}
/* os dois botões de WhatsApp lado a lado no computador */
.contact-main .contact-actions .btn { min-width: 0; flex: 1 1 280px; max-width: 330px; padding: 0 1.4rem 0 1.7rem; }
@media (max-width: 720px) { .contact-main .contact-actions .btn { max-width: none; } }
.btn { white-space: nowrap; }
.contact-main .contact-actions .btn { max-width: 360px; letter-spacing: 0.1em; gap: 1rem; }
@media (max-width: 720px) {
  .proofs { gap: 0.6rem; }
  .proofs dt { font-size: 1.7rem; white-space: nowrap; }
  .proofs dd { font-size: 0.72rem; }
}
@media (max-width: 1100px) {
  #pacientes .block-head { grid-template-columns: 1fr; gap: 1rem; }
  #pacientes .block-head h2 { white-space: normal; }
}
@media (max-width: 720px) {
  #pacientes .accordion { height: auto; }
  #pacientes, #alunos { padding-top: 96px; }
}
@media (max-width: 720px) {
  .acc-label { font-size: 0.82rem; letter-spacing: 0.08em; right: 1.2rem; white-space: normal; }
}
@media (max-width: 720px) {
  .trail-panel { left: 0.7rem; right: 0.7rem; bottom: 0.7rem; padding: 1rem 1.1rem; }
  .trail-panel h3 { font-size: 1.3rem; }
  .trail-panel p { font-size: 0.92rem; }
}
.contact-card .route a { white-space: nowrap; }
@media (max-width: 720px) {
  .contact-card .info { grid-template-columns: 1fr; gap: 0.5rem; }
  .route { flex-direction: column; align-items: stretch; }
  .contact-card .route a { justify-content: center; font-size: 0.9rem; }
}

/* ===== ajustes só do celular (rodada de encaixe) ===== */
@media (max-width: 720px) {
  /* clínica: quadrinho sem buraco entre o texto e as setas */
  .clinic-panel { padding: 1.3rem 1.3rem 1.2rem; }
  .clinic-text { min-height: 0; margin-top: 1rem; }
  .clinic-text p { font-size: 1rem; }
  .clinic-controls { margin-top: 1.1rem; }
  .clinic-dots button { position: relative; }
  .clinic-dots button::after { content: ""; position: absolute; inset: -14px -6px; }

  /* contato: ícone ao lado do título, não em cima */
  .contact-card .info { grid-template-columns: 22px minmax(0, 1fr); gap: 0.8rem; }
  .contact-card .info > svg { width: 20px; height: 20px; margin-top: 0.05rem; }

  /* cursos: nomes quebram naturalmente e o painel da foto fica mais baixo */
  .trail-text, .trail-panel h3 { text-wrap: pretty; }
  .trail-stage { min-height: 400px; }
  .trail-panel p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

  /* etiquetas pequenas legíveis */
  .bar-item h3, .contact-card h3, .footer-cols h3, .clinic-text h3, .trail-level { font-size: 0.74rem; letter-spacing: 0.14em; }
  .trail-text small { font-size: 0.68rem; }
  .proofs dd { font-size: 0.74rem; }

  /* links do rodapé com área de toque maior */
  .footer-cols nav { gap: 0.2rem; }
  .footer-cols nav a { padding: 0.45rem 0; }
}

/* ===== revisão de design (desktop) ===== */
/* sinal de que a faixa fechada abre */
.acc-plus {
  position: absolute; top: 1rem; left: 50%; z-index: 2;
  translate: -50% 0;
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  color: #fff; font-size: 1.25rem; font-weight: 300; line-height: 1;
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
  transition: opacity 300ms ease, transform 400ms var(--ease);
}
.acc-item:not(.on):hover .acc-plus { transform: scale(1.12); }
.acc-item.on .acc-plus { opacity: 0; pointer-events: none; }

/* pontinhos da clínica com área de clique maior */
.clinic-dots button { position: relative; }
.clinic-dots button::after { content: ""; position: absolute; inset: -14px -6px; }

@media (min-width: 721px) {
  /* etiquetas pequenas maiores */
  .nav-links a { font-size: 0.875rem; }
  .trail-text small { font-size: 0.76rem; }
  .trail-level { font-size: 0.78rem; }
  .bar-item h3, .glass-bar-3 .bar-item h3 { font-size: 0.8rem; }
  .contact-card h3, .footer-cols h3 { font-size: 0.78rem; }
  .clinic-text h3 { font-size: 0.82rem; }

  /* títulos de seção no mesmo tamanho */
  .about h2, #pacientes .block-head h2, #alunos .block-head h2, .contact-main h2, .clinic-panel h2 { font-size: clamp(2.3rem, 3.3vw, 3.8rem); }
  .about h2 strong { font-size: 1.1em; }
  .clinic-panel h2 strong { font-size: 1.1em; }
}

@media (max-width: 720px) {
  .acc-plus { top: 50%; left: auto; right: 1rem; translate: 0 -50%; width: 30px; height: 30px; }
}

/* brilho que passa pelos botões (comandado por app.js) */
.btn { position: relative; overflow: hidden; }
.btn .brilho {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.5) 50%, transparent 70%);
  transform: translateX(-120%);
}
.btn-white .brilho { background: linear-gradient(110deg, transparent 30%, rgba(16, 69, 112, 0.16) 50%, transparent 70%); }
.btn.brilha .brilho { animation: btn-brilho 1.2s ease-in-out; }
@keyframes btn-brilho { from { transform: translateX(-120%); } to { transform: translateX(120%); } }

/* botão de agendar abaixo dos procedimentos e no painel da clínica */
.block-cta { display: flex; justify-content: center; margin-top: clamp(1.2rem, 3vh, 2rem); }
.clinic-cta { margin-top: 1.2rem; }
@media (max-width: 720px) { .block-cta .btn, .clinic-cta { width: 100%; } }
/* procedimentos: frase de apoio ao lado do botão de agendar */
.block-cta-texto { align-items: center; gap: clamp(1rem, 2.5vw, 2rem); }
.block-cta-texto p { max-width: 34ch; color: var(--soft); font-size: clamp(1.02rem, 1.2vw, 1.15rem); line-height: 1.5; text-wrap: balance; }
@media (max-width: 720px) { .block-cta-texto { flex-direction: column; text-align: center; gap: 0.9rem; } }
@media (min-width: 1101px) {
  #pacientes .accordion { height: clamp(340px, calc(100svh - 345px), 640px); }
  #pacientes .block-cta { margin-top: clamp(0.9rem, 2vh, 1.4rem); }
}
.block-cta-texto mark { color: var(--ink); font-weight: 600; background: linear-gradient(transparent 62%, rgba(16, 69, 112, 0.18) 62%); padding: 0 0.1em; }

/* revisão de design 25/10: celular */
@media (max-width: 720px) {
  .clinic-panel { width: min(100%, calc(100vw - 32px)); max-width: calc(100vw - 32px); }
  .proofs dd { font-size: 0.8rem; }
  .bar-item h3, .glass-bar-3 .bar-item h3, .trail-level { font-size: 0.8rem; letter-spacing: 0.12em; }
}

/* clínica no celular: a foto fica inteira em cima e o quadro de vidro vem logo abaixo, encostando só na borda */
@media (max-width: 720px) {
  .clinic { display: block; min-height: 0; padding: 88px 1rem 2rem; }
  .clinic-slides { position: relative; inset: auto; z-index: 0; height: 56svh; min-height: 320px; overflow: hidden; border-radius: var(--r-lg); box-shadow: 0 24px 60px rgba(var(--shade), 0.18); }
  .clinic-shade { display: none; }
  .clinic-panel { position: relative; z-index: 1; width: auto; max-width: none; margin: -2.4rem 0.6rem 0; }
  .clinic-panel.glass { background: rgba(255, 255, 255, 0.78); }
  .clinic-cta { padding: 0 1.1rem 0 1.3rem; gap: 0.6rem; letter-spacing: 0.1em; font-size: 0.8rem; }
}

/* ===== aviso de cookies: barra de vidro no rodapé da tela ===== */
.cookie-barra {
  position: fixed; left: 50%; bottom: 1.2rem; z-index: 60;
  display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2rem);
  width: min(980px, calc(100% - 2rem)); padding: 1rem 1rem 1rem 1.6rem;
  border-radius: 999px; background: rgba(255, 255, 255, 0.62);
  transform: translate(-50%, 160%); opacity: 0;
  transition: transform 700ms var(--ease), opacity 400ms ease;
}
.cookie-barra.on { transform: translate(-50%, 0); opacity: 1; }
.cookie-barra p { flex: 1; color: var(--soft); font-size: 0.98rem; line-height: 1.5; }
.cookie-barra b { color: var(--ink); }
.cookie-barra a { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.cookie-acoes { display: flex; gap: 0.6rem; flex: none; }
.cookie-acoes .btn { min-height: 48px; padding: 0 1.4rem; }
body.cookie-aberto .c-sticky { transform: translateY(160%); opacity: 0; }
@media (max-width: 720px) {
  .cookie-barra { flex-direction: column; align-items: stretch; gap: 0.8rem; bottom: 0.8rem; padding: 1.1rem 1.1rem 1rem; border-radius: 24px; }
  .cookie-barra p { font-size: 0.92rem; }
  .cookie-acoes .btn { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .cookie-barra { transition: none; } }

/* fotos e vídeos protegidos: sem arrastar, sem "salvar imagem" no toque longo do celular; o texto da página continua selecionável */
img, video { -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none; }
img { -webkit-user-select: none; user-select: none; }

/* ===== procedimentos e cursos: o quadro sai de cima da foto e fica logo abaixo, encostando só na borda (como a clínica no celular) ===== */
:root { --encosta: 2.4rem; }
.acc-item { --fi: 6.6rem; overflow: visible; background: none; box-shadow: none; }
.acc-item > img, .acc-item.on > img { inset: 0 auto auto 0; height: calc(100% - var(--fi)); border-radius: var(--r-lg); background: #d8d8d8; box-shadow: 0 30px 70px rgba(var(--shade), 0.14); transform: none; }
.acc-item::after { inset: 0 0 var(--fi) 0; border-radius: var(--r-lg); }
.acc-item.on::after { opacity: 0; }
.acc-label { bottom: calc(var(--fi) + 1.6rem); }
.acc-panel { top: calc(100% - var(--fi) - var(--encosta)); bottom: auto; left: 0.6rem; right: 0.6rem; }
.acc-panel.glass, .trail-panel.glass { background: rgba(255, 255, 255, 0.8); box-shadow: 0 24px 50px rgba(var(--shade), 0.14); }
.acc-panel h3, .trail-panel h3 { color: var(--ink); text-shadow: none; }
.acc-panel p, .trail-panel p { color: var(--soft); text-shadow: none; }
.trail-level { color: var(--blue); text-shadow: none; }

.trail-stage { display: flex; flex-direction: column; overflow: visible; border-radius: 0; background: none; box-shadow: none; }
.trail-stage::after { display: none; }
.trail-photos { position: relative; flex: 1 1 auto; min-height: 240px; overflow: hidden; border-radius: var(--r-lg); background: #d8d8d8; box-shadow: 0 34px 80px rgba(var(--shade), 0.18); }
.trail-panel { position: relative; left: auto; right: auto; bottom: auto; margin: calc(-1 * var(--encosta)) 0.8rem 0; }

@media (max-width: 720px) {
  /* faixas empilhadas: só a aberta reserva espaço para o quadro embaixo da foto */
  .acc-item { --fi: 0px; }
  .acc-item.on { --fi: 9.5rem; height: calc(420px + var(--fi)); }
  .trail-panel { margin: calc(-1 * var(--encosta)) 0.6rem 0; }
  .trail-photos { min-height: 300px; }
}

/* ===== procedimentos: capa na faixa fechada (só o depois, rosto no centro) e fotos que trocam a cada 5 s na faixa aberta ===== */
.acc-item > img { opacity: 0; transition: opacity 900ms var(--ease); }
.acc-item:not(.on) > .acc-capa, .acc-item.on > .acc-foto.vez { opacity: 1; }
.acc-item > .acc-capa { object-position: var(--cx, 50%) 50%; }
@media (max-width: 720px) {
  .acc-item > .acc-capa { object-position: 50% var(--cy, 40%); }
}