/* ============================================================
   PORTA DE ENTRADA
   Quem chega ao site pela primeira vez escolhe entre as duas casas
   da Med Company: a assessoria e a imobiliária. Aparece uma vez por
   visita, e nunca quando a pessoa chega por um link direto (com #) ou
   vindo do site irmão — nesses casos ela já sabe onde quer ir.

   A regra que esconde tudo isto (.portal{display:none}) fica no <style>
   dentro do <head> da página, junto com a que esconde as telas: assim o
   palco preto cobre a tela desde a primeira pintura, sem piscar o site
   por baixo. Sem JavaScript o atributo data-portal nunca é escrito e a
   porta simplesmente não existe.
   ============================================================ */

.portal {
  position: fixed;
  inset: 0;
  z-index: 300;
  place-items: center;
  overflow: auto;
  padding: clamp(18px, 4vh, 44px) clamp(14px, 3vw, 32px);
  background: #07080a;
  color: #eef1f4;
  font-family: Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- o palco: dois clarões que passeiam bem devagar ---------- */

.portal__fundo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.portal__brilho {
  position: absolute;
  width: 78vmax;
  height: 78vmax;
  border-radius: 50%;
  filter: blur(18px);
  opacity: .34;
}
.portal__brilho--a {
  top: -34vmax;
  left: -26vmax;
  background: radial-gradient(circle, #6b5226 0%, #3a2c1240 45%, transparent 70%);
  animation: portal-vagar 26s ease-in-out infinite;
}
.portal__brilho--b {
  right: -30vmax;
  bottom: -36vmax;
  background: radial-gradient(circle, #5a4413 0%, #2e230a40 45%, transparent 70%);
  animation: portal-vagar 31s ease-in-out infinite reverse;
}
/* uma trama fininha por cima, para o preto não ficar chapado */
.portal__fundo::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .5;
  background-size: 3px 3px;
  background-image:
    linear-gradient(#ffffff05 1px, transparent 1px),
    linear-gradient(90deg, #ffffff05 1px, transparent 1px);
}

@keyframes portal-vagar {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(6vmax, 4vmax, 0) scale(1.12); }
}

/* ---------- o texto de cima ---------- */

.portal__caixa {
  position: relative;
  z-index: 1;
  width: min(1120px, 100%);
  margin: auto;
  text-align: center;
}
/* a caixa recebe o foco só para o teclado começar aqui dentro; ela não
   é um alvo clicável, então não desenha anel nenhum */
.portal__caixa:focus { outline: none; }

.portal__sobre {
  margin: 0;
  color: #8f9aa4;
  font: 600 clamp(9px, 1.5vw, 11px)/1 Inter, sans-serif;
  letter-spacing: .42em;
  text-indent: .42em;
}
.portal__titulo {
  margin: clamp(10px, 1.8vh, 18px) 0 0;
  color: #fff;
  font: 500 clamp(22px, 4.6vw, 40px)/1.15 "Playfair Display", Georgia, serif;
  letter-spacing: -.01em;
}
.portal__fio {
  display: block;
  width: 64px;
  height: 1px;
  margin: clamp(12px, 2vh, 20px) auto clamp(18px, 3.4vh, 34px);
  background: linear-gradient(90deg, transparent, #b9c3cc, transparent);
  transform: scaleX(0);
}
.portal__rodape {
  margin: clamp(16px, 3vh, 28px) 0 0;
  color: #6d7680;
  font: 500 clamp(10px, 1.8vw, 12px)/1.5 Inter, sans-serif;
  letter-spacing: .12em;
}

/* ---------- os dois cartões ---------- */

.portal__cartoes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.8vw, 24px);
  perspective: 1500px;
}

.portal__cartao {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: clamp(16px, 1.6vw, 24px);
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  isolation: isolate;
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.2, .8, .25, 1),
              box-shadow .45s ease,
              opacity .35s ease,
              filter .35s ease;
}
/* a moldura de um fio de luz, mais viva no canto de cima */
.portal__cartao::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, var(--fio-alto), #ffffff12 38%, #ffffff06);
  -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, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
  transition: background .4s ease;
}

/* As duas portas agora são da mesma família quente. Para não virarem a
   mesma porta, a assessoria fica no dourado claro (champanhe) e a
   imobiliária no âmbar fechado que ela já tinha. */
.portal__cartao--asse {
  --acento: #d8b980;
  --acento-forte: #f0dcb4;
  --fio-alto: #d8b98040;
  --clarao: #4a3a1c;
  --veu-cor: #241a0a42;
  /* enquadra os dois estudantes no alto, e o logo cai no vão entre eles */
  --foco: 50% 62%;
  background: linear-gradient(158deg, #241d14, #16110a 58%, #090704);
  box-shadow: 0 26px 60px #0009, 0 1px 0 #ffffff0d inset;
}
.portal__cartao--imob {
  --acento: #cda54a;
  --acento-forte: #eed497;
  --fio-alto: #cda54a40;
  --clarao: #4a3710;
  --veu-cor: #2a1c0742;
  /* a sala e o pôr do sol ficam à direita da foto do apartamento */
  --foco: 88% 58%;
  background: linear-gradient(158deg, #211b13, #141007 58%, #0a0805);
  box-shadow: 0 26px 60px #0009, 0 1px 0 #ffffff0d inset;
}

/* A foto entra só como textura, quase apagada, e com uma sombra por cima
   para as letras nunca caírem em cima de uma parte clara dela. */
/* É uma <img> de verdade, não um fundo por CSS. A foto já foi por
   propriedade personalizada dentro do atalho `background`, e bastava um
   navegador engasgar na substituição do var() para a declaração inteira
   cair e o cartão ficar sem foto nenhuma — sem erro, sem aviso. Com uma
   imagem no HTML, quem baixa e desenha é o navegador, pelo caminho mais
   batido que existe. */
.portal__foto {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .09;
  filter: grayscale(1) contrast(1.08);
  transform: scale(1.06);
  transition: opacity .6s ease, transform 1.1s cubic-bezier(.2, .8, .25, 1);
}
/* o clarão da cor da casa, discreto, subindo do rodapé do cartão */
.portal__luz {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, #05080bd9, #05080b73 42%, #05080bdd),
    radial-gradient(95% 55% at 50% 112%, var(--clarao) 0%, transparent 68%);
  opacity: .85;
  transition: opacity .45s ease;
}

/* ---------- cartão com a foto à mostra ----------
   Aqui a foto não é textura: é a imagem do cartão, inteira, e a leitura
   se resolve pela composição, não por véu em cima de tudo. O topo fica
   limpo, só foto; o escuro sobe do rodapé, onde mora o texto. A cor da
   casa entra bem fraca no pé, para a foto pertencer à marca. */
.portal__cartao--foto .portal__foto {
  opacity: 1;
  /* O enquadramento é de cada cartão (--foco, lá em cima). A linha de
     baixo é a que vale; se o navegador não der conta do var(), sobra a
     de cima e a foto fica centrada — nunca sem posição. */
  object-position: center;
  object-position: var(--foco, center);
  filter: saturate(1.08) contrast(1.05) brightness(1.04);
  transform: scale(1.04);
}
.portal__cartao--foto .portal__luz {
  opacity: 1;
  background:
    linear-gradient(180deg, #05070a4d 0%, #05070a1a 18%, #05070a00 34%,
                            #05070a80 58%, #05070ae8 80%, #05070afa 100%),
    linear-gradient(180deg, transparent 52%, var(--veu-cor, transparent) 100%);
}
/* A foto do apartamento já é escura, de noite, e cai sozinha no tom do
   palco. A dos estudantes é o contrário: luz de dia, dois jalecos brancos
   ocupando o cartão de alto a baixo. Do lado do outro cartão ela gritava,
   o logo branco sumia no jaleco e o título ficava em cima de branco.
   Aqui ela desce ao mesmo tom: menos brilho, e um clarão em volta dos
   rostos que apaga tudo o que está em volta — as bordas e o pé do cartão
   viram quase preto, e a luz sobra só onde precisa. */
.portal__cartao--asse.portal__cartao--foto .portal__foto {
  filter: saturate(.85) contrast(1.1) brightness(.64);
}
.portal__cartao--asse.portal__cartao--foto .portal__luz {
  background:
    radial-gradient(86% 58% at 50% 22%, transparent 0%, #05070a66 46%,
                                        #05070adb 72%, #05070af7 100%),
    linear-gradient(180deg, #05070a8c 0%, #05070a38 16%, #05070a26 30%,
                            #05070ac9 48%, #05070af5 66%, #05070afc 100%),
    linear-gradient(180deg, transparent 52%, var(--veu-cor, transparent) 100%);
}
/* o conteúdo desce para o rodapé e o alto do cartão fica só com a foto */
.portal__cartao--foto .portal__corpo {
  align-content: end;
  min-height: min(62vh, 500px);
  padding-top: clamp(40px, 8vw, 90px);
}
.portal__cartao--foto .portal__logo { height: clamp(58px, 8vw, 92px); }
/* um brilho da cor da casa correndo pela borda de baixo */
.portal__cartao--foto::before {
  content: "";
  position: absolute;
  right: 14%;
  bottom: 0;
  left: 14%;
  z-index: 3;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--acento), transparent);
  opacity: .55;
  transition: opacity .4s ease, right .55s ease, left .55s ease;
}
/* Em cima da foto o ponto de luz do ponteiro não entra: ele é um clarão
   branco largo, e por cima de uma imagem escura e quente lavava o cartão
   inteiro de dourado. Aqui o retorno ao ponteiro é a foto se aproximando,
   a moldura acendendo e o botão se enchendo. */
.portal__cartao--foto .portal__toque { display: none; }
/* o ponto de luz que acompanha o mouse (só no computador) */
.portal__toque {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  background: radial-gradient(22vw 22vw at var(--mx, 50%) var(--my, 50%), #ffffff14, transparent 68%);
  transition: opacity .4s ease;
}
/* o reflexo que atravessa o cartão de tempos em tempos */
.portal__reflexo {
  position: absolute;
  top: -60%;
  bottom: -60%;
  left: -40%;
  z-index: 3;
  width: 26%;
  background: linear-gradient(90deg, transparent, #ffffff1c, transparent);
  transform: rotate(14deg) translateX(-160%);
  pointer-events: none;
}

.portal__corpo {
  position: relative;
  z-index: 5;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(8px, 1.4vh, 14px);
  /* de pé, como uma porta — e nunca mais alto do que a tela */
  min-height: min(52vh, 430px);
  padding: clamp(26px, 4vw, 48px) clamp(16px, 2.6vw, 34px);
  text-align: center;
}

.portal__logo {
  width: auto;
  height: clamp(74px, 11vw, 124px);
  margin-bottom: clamp(2px, .8vh, 8px);
}
.portal__chamada {
  display: block;
  max-width: 24ch;
  color: #fff;
  font: 600 clamp(13px, 1.55vw, 18px)/1.35 Inter, sans-serif;
  letter-spacing: -.01em;
}
.portal__linha {
  display: block;
  max-width: 30ch;
  color: #9aa4ad;
  font: 400 clamp(11px, 1.15vw, 13.5px)/1.5 Inter, sans-serif;
}
.portal__entrar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(4px, 1.2vh, 12px);
  padding: clamp(9px, 1.1vw, 13px) clamp(18px, 2vw, 28px);
  border: 1px solid var(--acento);
  border-radius: 999px;
  color: var(--acento-forte);
  font: 600 clamp(11px, 1.15vw, 13.5px)/1 Inter, sans-serif;
  letter-spacing: .04em;
  white-space: nowrap;
  transition: background .3s ease, color .3s ease, box-shadow .3s ease, gap .3s ease;
}
.portal__entrar svg {
  width: 1em;
  height: 1em;
  flex: none;
  transition: transform .3s ease;
}

/* ---------- o que acontece ao passar o dedo ou o mouse ---------- */

@media (hover: hover) {
  .portal__cartoes:hover .portal__cartao { opacity: .62; filter: saturate(.7); }
  .portal__cartoes .portal__cartao:hover { opacity: 1; filter: none; }
}
.portal__cartao:hover,
.portal__cartao:focus-visible {
  opacity: 1;
  filter: none;
  box-shadow: 0 36px 80px #000c, 0 0 0 1px #ffffff10, 0 2px 0 #ffffff18 inset;
}
.portal__cartao:focus-visible { outline: 2px solid var(--acento-forte); outline-offset: 3px; }
.portal__cartao:is(:hover, :focus-visible) .portal__foto { opacity: .2; transform: scale(1.13); }
.portal__cartao:is(:hover, :focus-visible) .portal__luz { opacity: .95; }
.portal__cartao:is(:hover, :focus-visible) .portal__toque { opacity: 1; }
.portal__cartao:is(:hover, :focus-visible)::after { background: linear-gradient(150deg, var(--acento), #ffffff22 42%, #ffffff08); }
.portal__cartao:is(:hover, :focus-visible) .portal__entrar {
  gap: 12px;
  background: var(--acento);
  color: #07080a;
  box-shadow: 0 10px 26px -8px var(--acento);
}
.portal__cartao:is(:hover, :focus-visible) .portal__entrar svg { transform: translateX(2px); }

/* O cartão com foto reage ao contrário do de textura: lá a foto acende de
   apagada, aqui ela já está inteira e só se aproxima. Estas regras vêm
   depois das de cima de propósito — têm a mesma força, e quem vem por
   último manda. */
.portal__cartao--foto:is(:hover, :focus-visible) .portal__foto { opacity: 1; transform: scale(1.08); }
.portal__cartao--foto:is(:hover, :focus-visible) .portal__luz { opacity: 1; }
.portal__cartao--foto:is(:hover, :focus-visible)::before { opacity: 1; right: 3%; left: 3%; }
.portal__cartao:active { transform: translateY(-2px) scale(.994); }

/* ---------- a chegada ---------- */

/* tudo começa apagado e sobe em duas levas, com o palco à frente */
html[data-portal] .portal__caixa > * { animation: portal-sobe .7s cubic-bezier(.2, .8, .25, 1) both; }
html[data-portal] .portal__sobre   { animation-delay: .06s; }
html[data-portal] .portal__titulo  { animation-delay: .14s; }
html[data-portal] .portal__fio     { animation: portal-fio .7s cubic-bezier(.2, .8, .25, 1) .3s both; }
html[data-portal] .portal__cartoes { animation-delay: .22s; }
html[data-portal] .portal__rodape  { animation-delay: .5s; }

html[data-portal] .portal__cartao { animation: portal-cartao .85s cubic-bezier(.2, .8, .25, 1) both; }
html[data-portal] .portal__cartao--asse { animation-delay: .26s; }
html[data-portal] .portal__cartao--imob { animation-delay: .38s; }
html[data-portal] .portal__corpo > * { animation: portal-sobe .6s cubic-bezier(.2, .8, .25, 1) both; }
html[data-portal] .portal__cartao--asse .portal__corpo > * { animation-delay: .5s; }
html[data-portal] .portal__cartao--imob .portal__corpo > * { animation-delay: .62s; }

/* o reflexo passa uma vez na chegada e volta de tempos em tempos */
html[data-portal] .portal__reflexo { animation: portal-reflexo 7s ease-in-out 1.1s infinite; }
html[data-portal] .portal__cartao--imob .portal__reflexo { animation-delay: 2.6s; }

@keyframes portal-sobe {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes portal-fio {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes portal-cartao {
  from { opacity: 0; transform: translateY(42px) scale(.94) rotateX(7deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes portal-reflexo {
  0%       { transform: rotate(14deg) translateX(-160%); }
  22%, 100% { transform: rotate(14deg) translateX(560%); }
}

/* ---------- a saída: o cartão escolhido toma a tela ---------- */

.portal.is-saindo { pointer-events: none; }
.portal.is-saindo .portal__caixa > *:not(.portal__cartoes) { opacity: 0; transition: opacity .25s ease; }
.portal.is-saindo .portal__cartao { animation: none; }
.portal.is-saindo .portal__cartao:not(.is-escolhido) {
  opacity: 0;
  transform: translateY(18px) scale(.94);
  transition: opacity .3s ease, transform .3s ease;
}
.portal.is-saindo .portal__cartao.is-escolhido {
  transform: scale(1.04);
  box-shadow: 0 40px 90px #000d;
}
.portal.is-fechando {
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .42s ease, transform .42s ease;
}

/* ---------- telas estreitas: os cartões um sobre o outro ---------- */

@media (max-width: 599.98px) {
  .portal { padding: clamp(14px, 3vh, 26px) 14px; align-content: center; }
  .portal__cartoes { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  /* Um cartão em cima do outro, os dois de pé e com a mesma presença:
     30% da altura da tela cada um deixa os dois inteiros à vista. */
  .portal__corpo {
    gap: 9px;
    min-height: min(30vh, 260px);
    padding: 20px 18px;
  }
  .portal__logo { height: clamp(58px, 15vw, 82px); margin-bottom: 1px; }
  /* o cartão com foto também precisa caber: dois deles na mesma tela */
  .portal__cartao--foto .portal__corpo {
    min-height: min(34vh, 290px);
    padding-top: clamp(70px, 22vw, 120px);
  }
  .portal__cartao--foto .portal__logo { height: clamp(52px, 13vw, 72px); }
  /* No celular o cartão fica mais deitado que a foto, e o enquadramento
     de computador cortava o alto da cabeça dele. Aqui a foto desce. */
  .portal__cartao--asse { --foco: 50% 46%; }
  .portal__chamada { max-width: none; font-size: clamp(13.5px, 3.9vw, 16px); }
  .portal__linha { display: none; }
  .portal__entrar { margin-top: 3px; padding: 9px 20px; font-size: 12px; }
  .portal__titulo { font-size: clamp(21px, 6.4vw, 28px); }
  .portal__fio { margin-bottom: 18px; }
}

/* Telas baixinhas — o celular deitado, sobretudo. Aqui a altura é que
   manda: a frase de apoio sai e o resto encolhe até os dois cartões
   caberem sem rolar. */
@media (max-height: 620px) {
  .portal { padding: 12px 14px; }
  .portal__corpo,
  .portal__cartao--foto .portal__corpo { min-height: 0; gap: 7px; padding: 14px 16px; }
  .portal__logo,
  .portal__cartao--foto .portal__logo { height: clamp(42px, 9vh, 62px); margin-bottom: 0; }
  .portal__linha { display: none; }
  .portal__chamada { font-size: clamp(12.5px, 2.4vh, 15px); }
  .portal__entrar { margin-top: 2px; padding: 8px 18px; font-size: 11.5px; }
  .portal__titulo { font-size: clamp(17px, 4.4vh, 26px); }
  .portal__fio { margin: 8px auto 12px; }
  .portal__rodape { margin-top: 12px; }
}

/* ---------- quem pediu menos movimento ---------- */

@media (prefers-reduced-motion: reduce) {
  .portal__brilho,
  html[data-portal] .portal__caixa > *,
  html[data-portal] .portal__cartao,
  html[data-portal] .portal__corpo > *,
  html[data-portal] .portal__fio,
  html[data-portal] .portal__reflexo { animation: none; }
  .portal__fio { transform: none; }
  .portal__reflexo { display: none; }
  .portal__cartao,
  .portal__foto,
  .portal__luz,
  .portal__toque,
  .portal__entrar { transition: none; }
}