/* ==========================================================================
   Tela inicial — escolha do profissional
   ========================================================================== */

.home {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: #0f0d0c;
  color: #efe7dc;
  font-family: var(--font-jost), system-ui, sans-serif;
}

/* Barra superior (Del Rey) — fica por cima dos dois painéis */
.home__bar {
  position: absolute; inset: 0 0 auto 0; z-index: 5;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: 22px clamp(16px, 3vw, 40px);
  pointer-events: none;
}
.home__brand {
  display: flex; align-items: baseline; gap: 10px;
  font-weight: 500; font-size: 15px; letter-spacing: .34em; text-transform: uppercase;
  color: #efe7dc;
}
.home__brand small { font-size: 10px; font-weight: 300; letter-spacing: .3em; opacity: .6; }
.home__title {
  font-family: var(--font-jost), sans-serif;
  font-weight: 300; font-size: 12px; letter-spacing: .32em; text-transform: uppercase;
  text-align: center;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(15, 13, 12, .55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(239, 231, 220, .14);
}
.home__title span:last-child { color: #e7c08d; }
.home__meta { justify-self: end; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: #171412; opacity: .55; }

.home__split { flex: 1; display: flex; min-height: 100vh; min-height: 100svh; }

/* ---------- Painel genérico ---------- */
.choice {
  position: relative;
  flex: 1 1 0;
  display: flex;
  overflow: hidden;
  isolation: isolate;
  transition: flex-grow 1s cubic-bezier(.7, 0, .2, 1), filter .8s ease;
}
.choice__media, .choice__veil, .choice__glow { position: absolute; inset: 0; }
.choice__body {
  position: relative; z-index: 3;
  align-self: flex-end;
  display: flex; flex-direction: column; gap: 22px;
  width: 100%;
  padding: 0 clamp(20px, 5vw, 72px) clamp(64px, 9vh, 104px);
}
.choice__index { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; }
.choice__identity { position: relative; display: grid; align-items: end; }
.choice__identity > * { grid-area: 1 / 1; }
.choice__name { display: block; transition: opacity .6s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.choice__name small { display: block; }
.choice__logo { opacity: 0; height: auto; pointer-events: none; }
.choice__more { display: grid; gap: 18px; max-width: 440px; }
.choice__desc { display: block; }
.choice__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.choice__cta { display: inline-flex; align-items: center; gap: 10px; width: fit-content; }
.choice__cta svg { transition: transform .4s ease; }

@media (hover: hover) and (min-width: 821px) {
  .home__split:hover .choice { filter: saturate(.75) brightness(.72); }
  .home__split .choice:hover,
  .home__split .choice:focus-visible { flex-grow: 1.55; filter: none; }
  .choice__more { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
  .choice:hover .choice__more,
  .choice:focus-visible .choice__more { opacity: 1; transform: none; transition-delay: .25s; }
  .choice:hover .choice__name,
  .choice:focus-visible .choice__name { opacity: 0; transform: translateY(-10px); }
  .choice:hover .choice__logo,
  .choice:focus-visible .choice__logo { opacity: 1; }
  .choice:hover .choice__cta svg { transform: translateX(6px); }
}

/* ---------- Dra. Ângel — premium ---------- */
.choice--angel { background: #171412; color: #efe7dc; }
.choice--angel .choice__media { left: 30%; opacity: .32; transform: scale(1.06); transition: opacity 1.2s ease, transform 1.8s cubic-bezier(.2, .7, .2, 1); }
.choice--angel .choice__media .photo { filter: sepia(.15) saturate(.9); }
.choice--angel .choice__veil {
  z-index: 1;
  background:
    linear-gradient(90deg, #171412 0%, rgba(23, 20, 18, .92) 28%, rgba(23, 20, 18, .35) 62%, rgba(23, 20, 18, .15) 100%),
    linear-gradient(0deg, rgba(23, 20, 18, .85) 0%, transparent 45%);
}
.choice--angel .choice__glow {
  z-index: 2;
  background: radial-gradient(520px circle at var(--mx, 30%) var(--my, 60%), rgba(231, 192, 141, .16), transparent 60%);
  opacity: 0; transition: opacity .8s ease;
}
.choice--angel .choice__index { color: #b89b7a; }
.choice--angel .choice__name {
  font-family: var(--font-cormorant), Georgia, serif;
  font-weight: 300;
  font-size: clamp(48px, 6.2vw, 96px);
  line-height: .95;
  letter-spacing: .01em;
}
.choice--angel .choice__name small {
  margin-top: 14px;
  font-family: var(--font-jost), sans-serif; font-size: 12px; font-weight: 300;
  letter-spacing: .42em; text-transform: uppercase; color: #dccbb5;
}
.choice--angel .choice__logo { width: clamp(150px, 15vw, 210px); transition: opacity 1s .1s ease; }
.choice--angel .choice__line { display: block; height: 1px; width: 100%; max-width: 280px; background: linear-gradient(90deg, #b89b7a, transparent); transform-origin: left; }
.choice--angel .choice__desc { font-family: var(--font-cormorant), serif; font-style: italic; font-weight: 300; font-size: clamp(20px, 1.7vw, 25px); line-height: 1.35; color: #efe7dc; }
.choice--angel .choice__tags span { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: #dccbb5; padding: 8px 0; margin-right: 18px; border-bottom: 1px solid rgba(184, 155, 122, .45); }
.choice--angel .choice__cta { font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: #e7c08d; padding-bottom: 6px; border-bottom: 1px solid rgba(231, 192, 141, .5); }

@media (hover: hover) and (min-width: 821px) {
  .choice--angel:hover .choice__media { opacity: .95; transform: scale(1); }
  .choice--angel:hover .choice__glow { opacity: 1; }
  .choice--angel .choice__line { transform: scaleX(0); transition: transform 1.2s .35s cubic-bezier(.2, .7, .2, 1); }
  .choice--angel:hover .choice__line { transform: scaleX(1); }
}

/* ---------- Dr. Cláudio — clínico e acessível ---------- */
.choice--claudio { background: #f2f7fc; color: #1e293b; font-family: var(--font-jakarta), system-ui, sans-serif; }
.choice--claudio .choice__media { display: flex; align-items: flex-start; justify-content: flex-end; padding: clamp(90px, 12vh, 120px) clamp(20px, 4vw, 56px) 0 0; }
.choice--claudio .choice__frame {
  position: relative;
  display: block;
  width: clamp(200px, 22vw, 330px);
  aspect-ratio: 619 / 820;
  border-radius: 24px;
  overflow: hidden;
  background: #dce8f5;
  box-shadow: 0 30px 60px -30px rgba(0, 91, 187, .35);
  transform: translateY(16px);
  opacity: .5;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .45s ease;
}
.choice--claudio .choice__frame::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: #005bbb;
  transform: scaleX(0); transform-origin: left; transition: transform .45s ease .1s;
}
.choice--claudio .choice__index { color: #005bbb; font-weight: 600; letter-spacing: .16em; }
.choice--claudio .choice__name { font-weight: 800; font-size: clamp(42px, 5vw, 76px); line-height: 1; letter-spacing: -.03em; color: #1e293b; }
.choice--claudio .choice__name small { margin-top: 10px; font-size: 13px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: #6b7280; }
.choice--claudio .choice__logo { width: clamp(220px, 22vw, 320px); transition: opacity .35s ease; }
.choice--claudio .choice__desc { font-size: clamp(15px, 1.15vw, 17px); line-height: 1.6; color: #475569; }
.choice--claudio .choice__tags span { font-size: 13px; font-weight: 600; color: #005bbb; background: #fff; border: 1px solid #d6e4f3; border-radius: 999px; padding: 7px 14px; }
.choice--claudio .choice__cta { font-size: 15px; font-weight: 700; color: #fff; background: #005bbb; border-radius: 12px; padding: 14px 20px; transition: background .25s ease; }
.choice--claudio .choice__more, .choice--claudio .choice__name { transition-duration: .3s; }

@media (hover: hover) and (min-width: 821px) {
  .choice--claudio:hover .choice__frame { transform: none; opacity: 1; }
  .choice--claudio:hover .choice__frame::after { transform: scaleX(1); }
  .choice--claudio:hover .choice__cta { background: #004a99; }
  .choice--claudio:hover .choice__more { transition-delay: .08s; }
  .choice--claudio:hover .choice__name { transform: none; }
}

.home__foot {
  position: absolute; left: 0; right: 0; bottom: 18px; z-index: 5;
  text-align: center; pointer-events: none;
  font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
  color: rgba(239, 231, 220, .55);
  mix-blend-mode: difference;
}
.home__foot-touch { display: none; }

/* ---------- Telas sem hover / mobile ---------- */
@media (hover: none), (max-width: 820px) {
  .home__foot-desk { display: none; }
  .home__foot-touch { display: inline; }
  .choice__name { display: none; }
  .choice__logo { opacity: 1; }
  .choice--angel .choice__media { opacity: .7; transform: none; }
  .choice--angel .choice__line { transform: none; }
  .choice--claudio .choice__frame { opacity: 1; transform: none; }
  .choice--claudio .choice__frame::after { transform: none; }
}

@media (max-width: 820px) {
  .home__bar { grid-template-columns: 1fr auto; padding: 16px; }
  .home__brand { white-space: nowrap; }
  .home__foot { position: static; padding: 18px 16px 22px; background: #0f0d0c; mix-blend-mode: normal; line-height: 1.8; }
  .home__title { grid-column: 1 / -1; grid-row: 2; justify-self: center; font-size: 10px; letter-spacing: .22em; padding: 8px 14px; }
  .home__meta { display: none; }
  .home__split { flex-direction: column; }
  .choice__tags { display: none !important; }

  /* Os dois painéis: foto inteira ao fundo, texto embaixo — o rosto fica livre */
  .choice { min-height: 0; flex: none; }
  .choice__body { gap: 14px; padding: clamp(300px, 92vw, 420px) 20px 36px; }
  .choice__desc { max-width: none !important; }

  /* Dra. Ângel */
  .choice--angel .choice__media { left: 0; opacity: 1; }
  .choice--angel .choice__media .photo { object-position: 50% 12%; }
  .choice--angel .choice__veil {
    background: linear-gradient(180deg,
      rgba(23, 20, 18, .55) 0%, rgba(23, 20, 18, 0) 22%, rgba(23, 20, 18, 0) 38%,
      rgba(23, 20, 18, .88) 58%, #171412 72%);
  }
  .choice--angel .choice__logo { width: 116px; }
  .choice--angel .choice__desc { font-size: 19px; }

  /* Dr. Cláudio — mesma lógica, versão clara */
  .choice--claudio .choice__body { padding-top: clamp(300px, 96vw, 430px); }
  .choice--claudio .choice__media { padding: 0; display: block; }
  .choice--claudio .choice__frame {
    position: absolute; left: 0; right: 0; top: 0; bottom: auto;
    width: 100%; max-width: none; height: 124vw; aspect-ratio: auto;
    border-radius: 0; box-shadow: none; opacity: 1; transform: none; background: #e3edf8;
  }
  .choice--claudio .choice__frame .photo { object-position: 50% 0%; }
  .choice--claudio .choice__frame::after {
    display: block; top: auto; bottom: 0; height: 45%; transform: none;
    background: linear-gradient(180deg, rgba(242, 247, 252, 0), #f2f7fc 85%);
  }
  .choice--claudio .choice__logo { width: min(64vw, 260px); }
  .choice--claudio .choice__desc { font-size: 15px; }
}