/* =========================================================
   Hub de Links — Dra. Adriana Cabrini
   Direção "Plano B" (aprovada). Tokens do brand book oficial.
   ========================================================= */

:root {
  /* Cores */
  --c-marrom:      #221C18;  /* fundo da página */
  --c-vinho-fundo: #1A0908;  /* fundo dos cards de mentoria */
  --c-vinho:       #381413;  /* botões da clínica, halos, card do Instagram */
  --c-grafite:     #39322D;  /* texto sobre fundo claro */
  --c-pedra:       112, 107, 95;   /* cinza-pedra   #706B5F */
  --c-offwhite:    #F3F2EE;
  --c-areia:       #D5D3C8;
  --c-areia-rgb:   213, 211, 200;
  --c-areia-esc:   184, 182, 170;  /* #B8B6AA */
  --c-cream-rgb:   243, 242, 238;
  --c-scrim:       20, 15, 12;     /* scrim do hero */
  --c-scrim-card:  26, 9, 8;       /* scrim dos cards de mentoria */

  /* Tipografia */
  --f-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --f-sans:  Poppins, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Multiplicador de velocidade das animações de fundo
     (1 = sutil e lento, padrão do design; 0.55 = mais presente) */
  --b-mv: 1;

  /* Curvas de easing. As nativas do CSS são fracas demais: não têm o
     "punch" que faz a animação parecer intencional. */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* Durações. Nada de interação passa de 300ms. */
  --t-press: 130ms;
  --t-hover: 220ms;
  --t-reveal: 420ms;
  --t-fill: 420ms;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--c-marrom);
}

body {
  color: var(--c-offwhite);
  font-family: var(--f-sans);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;  /* o :active abaixo dá o feedback */
}

::selection { background: var(--c-vinho); color: var(--c-offwhite); }

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

/* ---------- Casca da página ---------- */

.page {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: var(--c-marrom);
  overflow: hidden;
  isolation: isolate;
}

/* halo vinho na base */
.page__halo {
  position: absolute;
  z-index: 0;
  inset: auto 0 0 0;
  height: 62%;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 100%, rgba(56, 20, 19, 0.5), rgba(56, 20, 19, 0) 70%);
}

/* grão sobre tudo */
.page__grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.055;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

.column {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 604px;
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 22px) 64px;
}

/* A subida da coluna de cards sobre o fim do hero é calculada em layout.js
   a partir da posição real do indicador de scroll (ver o comentário lá). */

/* =========================================================
   1. Hero
   ========================================================= */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: clamp(600px, 94vh, 920px);
  overflow: hidden;
}

.hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }

.hero__photo {
  position: absolute;
  inset: 0;
  background-image: url('assets/hero-bg.jpg');
  background-image: image-set(url('assets/hero-bg.webp') type('image/webp'), url('assets/hero-bg.jpg') type('image/jpeg'));
  background-size: cover;
  background-position: 74% 18%;
  transform-origin: 74% 18%;
  animation: bPan calc(52s * var(--b-mv)) ease-in-out infinite;
}

/* Abaixo de ~760px o container do hero fica bem mais alto que largo (retrato),
   e a foto de desktop (paisagem) cortaria demais as laterais. Usa o enquadramento
   próprio que veio recortado em retrato para esse caso. */
@media (max-width: 760px) {
  .hero__photo {
    background-image: url('assets/hero-bg-mobile.jpg');
    background-image: image-set(url('assets/hero-bg-mobile.webp') type('image/webp'), url('assets/hero-bg-mobile.jpg') type('image/jpeg'));
    background-position: 76% 14%;
    transform-origin: 76% 14%;
  }
}

/* scrim lateral: garante leitura do texto à esquerda */
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    rgba(20, 15, 12, 0.94) 0%,
    rgba(20, 15, 12, 0.84) 34%,
    rgba(20, 15, 12, 0.38) 54%,
    rgba(20, 15, 12, 0.04) 74%,
    rgba(20, 15, 12, 0) 100%);
}

/* fade de base: conecta a foto ao marrom chapado, na altura dos pés */
.hero__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(34, 28, 24, 0) 74%,
    rgba(34, 28, 24, 0.42) 88%,
    var(--c-marrom) 100%);
}

.hero__wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(52px, 9vh, 96px) clamp(18px, 4vw, 44px) clamp(40px, 7vh, 80px);
}

.hero__content { position: relative; max-width: 560px; }

.hero__logo {
  width: 208px;
  max-width: 52%;
  height: auto;
  display: block;
  opacity: 0.95;
}

.hero__title {
  margin: clamp(30px, 5vh, 52px) 0 0;
  font-family: var(--f-serif);
  font-weight: 300;
  font-size: clamp(27px, 7vw, 62px);
  line-height: 1.04;
  letter-spacing: -0.005em;
  color: var(--c-offwhite);
  text-wrap: pretty;
}

.hero__title em { font-style: italic; font-weight: 400; }

.hero__lede + .hero__lede { margin-top: 13px; }

/* A última frase é a tese do texto: sai da sans e vai para a serifada da
   marca, como as outras frases que carregam peso na página. */
.hero__tese {
  margin: 22px 0 0;
  max-width: 468px;
  font-family: var(--f-serif);
  font-weight: 300;
  font-size: clamp(16px, 4vw, 21px);
  line-height: 1.35;
  color: rgba(var(--c-cream-rgb), 0.9);
  text-wrap: pretty;
}

.hero__tese em { font-style: italic; font-weight: 400; }

.hero__lede {
  margin: 20px 0 0;
  max-width: 468px;
  font-size: clamp(12px, 3.2vw, 14px);
  font-weight: 300;
  line-height: 1.75;
  color: rgba(var(--c-cream-rgb), 0.62);
  text-wrap: pretty;
}

/* pills */
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 9px 17px;
  border: 1px solid rgba(var(--c-areia-rgb), 0.26);
  border-radius: 999px;
  background: rgba(var(--c-cream-rgb), 0.05);
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 15px;
  white-space: nowrap;
  color: rgba(var(--c-cream-rgb), 0.88);
}

/* indicador de scroll */
.scroll-cue {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(34px, 6vh, 56px);
}

.scroll-cue__box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 1px solid rgba(var(--c-areia-rgb), 0.3);
  border-radius: 3px;
  background: rgba(56, 20, 19, 0.5);
  animation: bBob calc(4.5s * var(--b-mv)) ease-in-out infinite;
}

.scroll-cue__label {
  font-size: 9px;
  letter-spacing: 0.26em;
  font-weight: 300;
  line-height: 1.9;
  color: rgba(var(--c-areia-rgb), 0.75);
}

/* =========================================================
   2. Divisores de seção
   ========================================================= */

.divider {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 76px;
}

.divider--first  { margin: clamp(24px, 5vh, 46px) 0 22px; }

.divider__rule { flex: 1; height: 1px; }
.divider__rule--left  { background: linear-gradient(90deg, rgba(184, 182, 170, 0), rgba(184, 182, 170, 0.3)); }
.divider__rule--right { background: linear-gradient(90deg, rgba(184, 182, 170, 0.3), rgba(184, 182, 170, 0)); }

.divider__label {
  font-size: 9px;
  letter-spacing: 0.34em;
  color: rgba(var(--c-areia-rgb), 0.78);
  text-align: center;
}

/* =========================================================
   Elementos compartilhados
   ========================================================= */

.stack { display: flex; flex-direction: column; gap: 18px; }

.eyebrow {
  font-size: 8.5px;
  letter-spacing: 0.3em;
  font-weight: 300;
}
.eyebrow--dark  { color: rgba(var(--c-areia-rgb), 0.82); }
.eyebrow--light { color: rgba(var(--c-pedra), 0.95); }

/* Duas camadas empilhadas em vez de um crossfade de cor: a de cima é
   recortada por clip-path e varre o botão. Cor trocando por transição
   deixa ver os dois estados brigando; recorte troca sem intermediário. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  max-width: 100%;
  white-space: nowrap;
  isolation: isolate;
}

.btn__txt {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 16px;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
}

.btn__fill {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  /* escondido à esquerda; o hover empurra a borda direita até 0 */
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--t-fill) var(--ease-in-out);
}

.btn--light {
  margin-top: clamp(18px, 3vw, 28px);
  border-radius: 3px;
  background: var(--c-offwhite);
  color: var(--c-vinho-fundo);
}

.btn--light .btn__fill {
  background: var(--c-areia);
  color: var(--c-vinho-fundo);
  border-radius: 3px;
}

.btn--dark {
  margin-top: 18px;
  border: 1px solid var(--c-vinho);
  border-radius: 2px;
  background: transparent;
  color: var(--c-vinho);
}

/* invertido: no repouso a camada cheia cobre tudo e o hover a retira */
.btn--dark .btn__fill {
  background: var(--c-vinho);
  color: var(--c-offwhite);
  clip-path: inset(0 0 0 0);
}

/* =========================================================
   3. Cards de mentoria
   ========================================================= */

.mentoria {
  position: relative;
  display: grid;
  grid-template-columns: 1fr clamp(120px, 34%, 320px);
  min-height: clamp(210px, 30vw, 268px);
  border: 1px solid rgba(var(--c-areia-rgb), 0.14);
  border-radius: 4px;
  overflow: hidden;
  background: var(--c-vinho-fundo);
  transition: transform var(--t-hover) var(--ease-out),
              border-color var(--t-hover) var(--ease-out);
}

/* a sombra vive num pseudo-elemento: animar `opacity` é de graça,
   animar `box-shadow` custa paint a cada frame */
.mentoria::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
  transition: opacity var(--t-hover) var(--ease-out);
}

.mentoria__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: 78% 26%;
  transition: transform 900ms var(--ease-out);
}

.mentoria__photo--comunicacao {
  background-image: url('assets/card-comunicacao.jpg');
  background-image: image-set(url('assets/card-comunicacao.webp') type('image/webp'), url('assets/card-comunicacao.jpg') type('image/jpeg'));
}

.mentoria__photo--amplify {
  background-image: url('assets/card-amplify.jpg');
  background-image: image-set(url('assets/card-amplify.webp') type('image/webp'), url('assets/card-amplify.jpg') type('image/jpeg'));
  background-position: 50% 0%;
}

.mentoria__photo--posicionamento {
  background-image: url('assets/card-posicionamento.jpg');
  background-image: image-set(url('assets/card-posicionamento.webp') type('image/webp'), url('assets/card-posicionamento.jpg') type('image/jpeg'));
}

.mentoria__scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(95deg,
    rgba(26, 9, 8, 0.92) 0%,
    rgba(26, 9, 8, 0.8) 30%,
    rgba(26, 9, 8, 0.34) 52%,
    rgba(26, 9, 8, 0) 74%);
}

.mentoria__content {
  position: relative;
  z-index: 1;
  min-width: 0;              /* sem isto o texto vaza no mobile */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(24px, 4vw, 40px) clamp(16px, 2vw, 26px) clamp(24px, 4vw, 40px) clamp(22px, 4vw, 44px);
}

.mentoria__title {
  margin: 0;
  font-family: var(--f-serif);
  font-weight: 300;
  font-size: clamp(25px, 5.4vw, 40px);
  line-height: 1.05;
  color: var(--c-offwhite);
  overflow-wrap: break-word;
}

.mentoria__title em { font-style: italic; font-weight: 400; }

.mentoria__text--estreito { max-width: 262px; }

.mentoria__text {
  margin: 12px 0 0;
  max-width: 30em;
  font-size: clamp(11px, 2.9vw, 13px);
  font-weight: 300;
  line-height: 1.7;
  color: rgba(var(--c-cream-rgb), 0.62);
  text-wrap: pretty;
}

/* Foco de luz preso ao cursor. As três fotos da marca são spotlight —
   figura acesa por um foco no escuro — então a luz aqui é a linguagem da
   própria fotografia, não enfeite avulso. Posição interpolada por mola
   em motion.js: seguir o mouse 1:1 fica robótico. */
.mentoria__luz {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 620px;
  height: 620px;
  margin: -310px 0 0 -310px;
  pointer-events: none;
  opacity: 0;
  /* creme levemente quente, não branco: a luz das fotos da marca é morna */
  background: radial-gradient(circle closest-side,
    rgba(255, 246, 232, 0.30),
    rgba(250, 238, 224, 0.11) 40%,
    rgba(243, 242, 238, 0) 70%);
  mix-blend-mode: screen;
  transition: opacity 340ms var(--ease-out);
  will-change: transform;
}

/* coluna vazia que reserva a área da foto */
.mentoria__spacer { position: relative; overflow: hidden; }

/* =========================================================
   4. Card do atendimento clínico
   Mesmo formato dos cards de mentoria (foto de fundo inteira, texto à
   esquerda, faixa da foto à direita), mas em off-white: o degradê claro
   da esquerda é o que deixa o texto escuro legível sobre a foto.
   ========================================================= */

.stack--clinica { margin-top: 40px; }

.clinica {
  position: relative;
  display: grid;
  grid-template-columns: 1fr clamp(96px, 34%, 190px);
  min-height: clamp(230px, 30vw, 268px);
  border: 1px solid rgba(var(--c-areia-rgb), 0.14);
  border-radius: 4px;
  overflow: hidden;
  background: var(--c-offwhite);
  color: var(--c-grafite);
  transition: transform var(--t-hover) var(--ease-out);
}

.clinica::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.45);
  transition: opacity var(--t-hover) var(--ease-out);
}

.clinica__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('assets/atendimento.jpg');
  background-image: image-set(url('assets/atendimento.webp') type('image/webp'), url('assets/atendimento.jpg') type('image/jpeg'));
  background-size: cover;
  background-position: 78% 40%;
  transition: transform 900ms var(--ease-out);
}

.clinica__fade {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(95deg,
    rgba(243, 242, 238, 0.97) 0%,
    rgba(243, 242, 238, 0.9) 34%,
    rgba(243, 242, 238, 0.5) 56%,
    rgba(243, 242, 238, 0) 76%);
}

.clinica__content {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(24px, 4vw, 40px) clamp(16px, 2vw, 26px) clamp(24px, 4vw, 40px) clamp(22px, 4vw, 44px);
}

.clinica__spacer { position: relative; }

.clinica__title {
  margin: 12px 0 0;
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(25px, 6.4vw, 30px);
  line-height: 1.05;
  color: var(--c-grafite);
}

.clinica__text {
  margin: 10px 0 0;
  max-width: 44ch;
  font-size: clamp(11.5px, 1.3vw, 13px);
  font-weight: 300;
  line-height: 1.68;
  color: rgba(57, 50, 45, 0.72);
  text-wrap: pretty;
}

/* =========================================================
   5. Cards sociais
   ========================================================= */

.social {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin-top: clamp(34px, 6vh, 56px);
}

.social__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 26px;
  min-height: 150px;
  padding: 22px;
  border: 1px solid rgba(var(--c-areia-rgb), 0.16);
  border-radius: 4px;
  transition: border-color var(--t-hover) var(--ease-out),
              transform var(--t-hover) var(--ease-out);
}

.social__card--whatsapp  { background: linear-gradient(160deg, rgba(243, 242, 238, 0.07), rgba(243, 242, 238, 0.015)); }
.social__card--instagram { background: linear-gradient(160deg, rgba(56, 20, 19, 0.55), rgba(56, 20, 19, 0.12)); }

.social__title {
  font-family: var(--f-serif);
  font-size: 22px;
  line-height: 1.15;
  color: var(--c-offwhite);
}

.social__title em { font-style: italic; }

.social__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.social__label {
  font-size: 8px;
  letter-spacing: 0.22em;
  color: rgba(var(--c-areia-rgb), 0.62);
}

/* =========================================================
   6. Rodapé
   ========================================================= */

.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: clamp(46px, 8vh, 80px);
  padding-top: 26px;
  border-top: 1px solid rgba(var(--c-areia-rgb), 0.12);
}

.footer__brand { display: flex; align-items: center; gap: 14px; }

.footer__mark { width: 26px; height: auto; opacity: 0.42; }

.footer__name {
  font-size: 8px;
  letter-spacing: 0.26em;
  color: rgba(var(--c-areia-esc), 0.5);
}

.footer__legal {
  font-size: 8px;
  letter-spacing: 0.2em;
  color: rgba(var(--c-areia-esc), 0.35);
}

/* =========================================================
   Hover, press e foco
   ========================================================= */

/* `pointer: fine` evita que o toque dispare estado de hover grudado */
@media (hover: hover) and (pointer: fine) {
  .mentoria:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--c-areia-rgb), 0.34);
  }

  .mentoria:hover::after { opacity: 1; }
  .mentoria:hover .mentoria__luz { opacity: 1; }
  .mentoria:hover .mentoria__photo { transform: scale(1.035); }

  .clinica:hover { transform: translateY(-3px); }
  .clinica:hover::after { opacity: 1; }
  .clinica:hover .clinica__photo { transform: scale(1.04); }

  /* a camada de cima varre: entra no claro, sai no escuro */
  .mentoria:hover .btn--light .btn__fill { clip-path: inset(0 0 0 0); }
  .clinica:hover .btn--dark .btn__fill { clip-path: inset(0 0 0 100%); }

  .social__card:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--c-cream-rgb), 0.4);
  }

  .social__card:hover svg { transform: translateY(-2px) scale(1.06); }
}

/* Press: o card inteiro é o alvo, então o recuo é mínimo — num bloco de
   560px, o 0.97 de um botão viraria um solavanco. */
.mentoria:active,
.clinica:active,
.social__card:active {
  transform: scale(0.985);
  transition-duration: var(--t-press);
}

/* mesmo tratamento do hover no foco por teclado */
.mentoria:focus-visible { transform: translateY(-3px); border-color: rgba(var(--c-areia-rgb), 0.34); }
.mentoria:focus-visible::after { opacity: 1; }
.mentoria:focus-visible .btn--light .btn__fill { clip-path: inset(0 0 0 0); }
.clinica:focus-visible { transform: translateY(-3px); }
.clinica:focus-visible::after { opacity: 1; }
.clinica:focus-visible .btn--dark .btn__fill { clip-path: inset(0 0 0 100%); }
.social__card:focus-visible { transform: translateY(-3px); border-color: rgba(var(--c-cream-rgb), 0.4); }

.social__card svg { transition: transform var(--t-hover) var(--ease-out); }

/* =========================================================
   Entrada do conteúdo
   ========================================================= */

/* O estado inicial só existe quando o JS está vivo: sem ele, a página
   renderiza normal em vez de ficar invisível para sempre. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(10px);
}

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--t-reveal) var(--ease-out),
              transform var(--t-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

/* conteúdo que o usuário já passou: aparece, não anima */
.js [data-reveal].is-instant { transition: none; }

/* A foto sobe por recorte enquanto o card faz fade: duas camadas com
   ritmos diferentes leem como profundidade, não como um bloco só. */
.js [data-reveal] [data-foto] { clip-path: inset(0 0 100% 0); }

.js [data-reveal].is-in [data-foto] {
  clip-path: inset(0 0 0 0);
  transition: clip-path 820ms var(--ease-in-out) 90ms,
              transform 900ms var(--ease-out);
}

.js [data-reveal].is-instant [data-foto] { clip-path: none; transition: none; }

/* =========================================================
   Animações
   ========================================================= */

@keyframes bPan {
  0%   { transform: scale(1.02) translate3d(0, 0, 0); }
  50%  { transform: scale(1.09) translate3d(-1.4%, -1%, 0); }
  100% { transform: scale(1.02) translate3d(0, 0, 0); }
}

@keyframes bBob {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(7px); }
  100% { transform: translateY(0); }
}

/* Movimento reduzido não é "nenhuma animação": é menos movimento.
   O que some é deslocamento e escala; opacidade e cor continuam,
   porque é o que comunica a mudança de estado. */
@media (prefers-reduced-motion: reduce) {
  .hero__photo,
  .scroll-cue__box { animation: none; }

  .js [data-reveal] { transform: none; }
  .js [data-reveal] [data-foto] { clip-path: none; }
  .mentoria__luz { display: none; }
  .mentoria:hover .mentoria__photo,
  .clinica:hover .clinica__photo,
  .social__card:hover svg { transform: none; }

  .mentoria:hover,
  .clinica:hover,
  .social__card:hover,
  .mentoria:active,
  .clinica:active,
  .social__card:active,
  .mentoria:focus-visible,
  .clinica:focus-visible,
  .social__card:focus-visible { transform: none; }
}