/* ==========================================================================
   Base compartilhada — reset, utilitários, comparador, FAQ e transição.
   A identidade de cada profissional vive em /styles/angel.css e /styles/claudio.css
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  min-height: 100vh;
  background: #171412;
  color: #171412;
  font-family: var(--font-jost), system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.photo { width: 100%; height: 100%; object-fit: cover; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Revelação no scroll: só esconde quando há JS (classe .js no <html>) */
.js [data-reveal] { opacity: 0; }
.js [data-reveal].is-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
}

[data-parallax] { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }

/* --------------------------------------------------------------------------
   Comparador antes/depois (estrutura comum)
   -------------------------------------------------------------------------- */
.ba {
  --pos: 50%;
  position: relative;
  width: 100%;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  cursor: ew-resize;
  isolation: isolate;
  background: #ddd;
}
.ba__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}
.ba__before {
  position: absolute; inset: 0;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
  z-index: 1;
}
.ba__line {
  position: absolute; top: 0; bottom: 0;
  left: var(--pos);
  width: 2px; margin-left: -1px;
  z-index: 2;
  pointer-events: none;
}
.ba__handle {
  position: absolute;
  top: 50%; left: var(--pos);
  transform: translate(-50%, -50%);
  z-index: 3;
  display: grid; place-items: center;
  touch-action: none;
  cursor: grab;
  transition: transform .25s ease, box-shadow .25s ease;
}
.ba.is-dragging .ba__handle { cursor: grabbing; transform: translate(-50%, -50%) scale(1.08); }
.ba__tag {
  position: absolute; top: 16px; z-index: 2;
  pointer-events: none;
  transition: opacity .3s ease;
}
.ba__tag--before { left: 16px; }
.ba__tag--after { right: 16px; }
.ba__hint {
  position: absolute; left: 50%; bottom: 18px; z-index: 3;
  transform: translateX(-50%);
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .5s ease, transform .5s ease;
}
.ba.is-used .ba__hint { opacity: 0; transform: translate(-50%, 8px); }
.ba__hint-arrow { display: inline-block; animation: ba-nudge 1.6s ease-in-out infinite; }
.ba__hint-arrow:last-child { animation-direction: reverse; }
@keyframes ba-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-4px); } }

/* --------------------------------------------------------------------------
   FAQ (estrutura comum)
   -------------------------------------------------------------------------- */
.faq__item summary { list-style: none; cursor: pointer; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.faq__icon { position: relative; flex: none; width: 14px; height: 14px; }
.faq__icon::before,
.faq__icon::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: 1.5px; margin-top: -.75px; background: currentColor;
  transition: transform .35s ease;
}
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] .faq__icon::after { transform: rotate(0deg); }

/* --------------------------------------------------------------------------
   Transição de troca de identidade
   -------------------------------------------------------------------------- */
html[data-switching] body { overflow: hidden; }
html[data-switching]::after {
  content: ''; position: fixed; inset: 0; z-index: 9998;
  background: #171412;
}
html[data-switching='claudio']::after { background: #fff; }
html[data-switching='home']::after { background: #0f0d0c; }

.bs { position: fixed; inset: 0; z-index: 9999; pointer-events: all; }
.bs__panel, .bs__accent { position: absolute; inset: 0; }
.bs__content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  padding: 24px;
}
.bs__logo { width: auto; opacity: 0; }
.bs__label { opacity: 0; font-size: 11px; letter-spacing: .32em; text-transform: uppercase; }

/* — Para a Dra. Ângel: cortina escura que sobe devagar, logo dourado em fade */
.bs--angel .bs__panel { background: #171412; transform: translateY(100%); }
.bs--angel .bs__accent { background: linear-gradient(180deg, transparent 0 49.9%, #b89b7a 50% 50.1%, transparent 50.2%); transform: scaleX(0); opacity: .6; }
.bs--angel .bs__logo { height: clamp(110px, 18vw, 170px); }
.bs--angel .bs__label { color: #dccbb5; font-family: var(--font-jost), sans-serif; font-weight: 300; }
.bs--angel.is-in .bs__panel { animation: bs-rise .9s cubic-bezier(.77, 0, .18, 1) forwards; }
.bs--angel.is-in .bs__accent { animation: bs-line .9s .35s cubic-bezier(.65, 0, .35, 1) forwards; }
.bs--angel.is-in .bs__logo { animation: bs-fade .9s .45s ease forwards; }
.bs--angel.is-in .bs__label { animation: bs-fade .9s .6s ease forwards; }

/* — Para o Dr. Cláudio: painel branco rápido com faixa azul */
.bs--claudio .bs__panel { background: #fff; transform: translateX(100%); }
.bs--claudio .bs__accent { background: #005bbb; transform: translateX(100%); inset: auto 0 0 0; height: 6px; }
.bs--claudio .bs__logo { height: clamp(56px, 9vw, 88px); }
.bs--claudio .bs__label { color: #005bbb; font-family: var(--font-jakarta), sans-serif; font-weight: 600; letter-spacing: .12em; }
.bs--claudio.is-in .bs__panel { animation: bs-slide .5s cubic-bezier(.65, 0, .35, 1) forwards; }
.bs--claudio.is-in .bs__accent { animation: bs-slide .5s .08s cubic-bezier(.65, 0, .35, 1) forwards; }
.bs--claudio.is-in .bs__logo { animation: bs-pop .45s .25s cubic-bezier(.2, .9, .3, 1.2) forwards; }
.bs--claudio.is-in .bs__label { animation: bs-fade .4s .35s ease forwards; }

/* — Para a tela inicial */
.bs--home .bs__panel { background: #0f0d0c; opacity: 0; }
.bs--home .bs__label { color: #efe7dc; font-family: var(--font-jost), sans-serif; }
.bs--home.is-in .bs__panel { animation: bs-fade .55s ease forwards; }
.bs--home.is-in .bs__label { animation: bs-fade .5s .2s ease forwards; }

/* Estado estático (carregamento completo): já coberto */
.bs.is-static .bs__panel, .bs.is-static .bs__logo, .bs.is-static .bs__label { animation: none !important; transform: none; opacity: 1; }
.bs.is-static .bs__accent { animation: none !important; opacity: 0; }

/* Saída — a nova identidade aparece */
.bs.is-out { pointer-events: none; }
.bs.is-out .bs__content { animation: bs-fade-out .35s ease forwards; }
.bs.is-out .bs__accent { animation: bs-fade-out .3s ease forwards !important; }
.bs--angel.is-out .bs__panel { animation: bs-leave-up .95s .15s cubic-bezier(.77, 0, .18, 1) forwards !important; transform: none; }
.bs--claudio.is-out .bs__panel { animation: bs-leave-left .5s .1s cubic-bezier(.65, 0, .35, 1) forwards !important; transform: none; }
.bs--home.is-out .bs__panel { animation: bs-fade-out .5s .1s ease forwards !important; opacity: 1; }

@keyframes bs-rise { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes bs-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes bs-slide { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes bs-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes bs-pop { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: scale(1); } }
@keyframes bs-fade-out { to { opacity: 0; } }
@keyframes bs-leave-up { from { transform: translateY(0); } to { transform: translateY(-100%); } }
@keyframes bs-leave-left { from { transform: translateX(0); } to { transform: translateX(-100%); } }

@media (prefers-reduced-motion: reduce) {
  .bs *, .bs.is-in *, .bs.is-out * { animation-duration: .01ms !important; animation-delay: 0s !important; }
}