/* ==========================================================================
   CandLotus — /bio
   Implementação do Figma "Mobile" 247:25 (1080 x 1964).

   ESCALA
   Todas as medidas são os valores do Figma multiplicados por --u, onde
   --u = largura do quadro / 1080. Assim o layout é proporcionalmente
   idêntico ao design em qualquer largura de tela, e travar --w em 540px
   equivale a ver o design em 50%.
   ========================================================================== */

/* TROCAR AQUI — fontes licenciadas.
   O design usa Aeonik Pro (logo/título/pill) e Rebond Grotesque (cards).
   Coloque os .woff2 em assets/fonts/, descomente abaixo, troque as duas
   variáveis --fonte-* e remova o <link> do Google Fonts no HTML.

@font-face {
  font-family: "Aeonik Pro";
  src: url("../fonts/AeonikPro-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Rebond Grotesque";
  src: url("../fonts/RebondGrotesque-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
*/

:root {
  /* Paleta 02 — a variante rosa da marca, usada nesta página */
  --rosa: #f45692;
  --rosa-card: #ff629e;
  --rosa-borda: rgba(255, 193, 216, 0.3);

  /* Tokens da ID Visual */
  --roxo-lotus: #7b5ea7;
  --branco-lotus: #f5f0fa;
  --cinza-neutro: #2d2d2d;
  --verde-agua: #4a9c8f;

  --rodape-bg: #f3f3f3;
  --rodape-borda: rgba(212, 212, 212, 0.1);
  --ponto-grid: #fcfcfc;

  --fonte-titulo: "Inter", system-ui, -apple-system, sans-serif;
  --fonte-card: "Inter", system-ui, -apple-system, sans-serif;
}

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

body {
  margin: 0;
  background: #fff;
  color: var(--cinza-neutro);
  font-family: var(--fonte-titulo);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p, h1 { margin: 0; }

:focus-visible {
  outline: 3px solid var(--roxo-lotus);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   Quadro
   -------------------------------------------------------------------------- */

:root {
  --w: min(100vw, 540px);
  --u: calc(var(--w) / 1080);
}

.bio {
  position: relative;
  width: var(--w);
  /* Só até onde o rodapé começa no Figma — ele vive fora deste quadro. */
  height: calc(1847.412 * var(--u));
  margin-inline: auto;
  overflow: hidden;

  /* Grid pontilhado: pontos de 8.94 x 9.15 a cada 22.494 x 23.4 */
  background-color: #fff;
  background-image: radial-gradient(
    circle,
    var(--ponto-grid) 0 calc(4.47 * var(--u)),
    transparent calc(4.47 * var(--u))
  );
  background-size: calc(22.494 * var(--u)) calc(23.4 * var(--u));
  background-position: 0 calc(11.8 * var(--u));
}

/* --------------------------------------------------------------------------
   Pétalas — sangram para fora do quadro, recortadas pelo overflow
   -------------------------------------------------------------------------- */

.petalas {
  position: absolute;
  pointer-events: none;
  user-select: none;
  /* Os PNGs vêm do Figma com fundo branco chapado, não com alpha.
     multiply descarta o branco e deixa o grid pontilhado aparecer por trás. */
  mix-blend-mode: multiply;
}

.petalas--sup {
  left: 0;
  top: 0;
  width: calc(396 * var(--u));
  height: calc(537 * var(--u));
}

.petalas--inf {
  left: calc(774 * var(--u));
  top: calc(1271 * var(--u));
  width: calc(308 * var(--u));
  height: calc(695 * var(--u));
}

/* --------------------------------------------------------------------------
   Topo — logo, título, pill  (frame 312:29862 em [167,155], 746 de largura)
   -------------------------------------------------------------------------- */

.topo {
  position: absolute;
  left: calc(167 * var(--u));
  top: calc(155 * var(--u));
  width: calc(746 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(39 * var(--u));
}

.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(18.029 * var(--u));
  width: calc(343.886 * var(--u));
}

.logo__simbolo {
  width: calc(91.92 * var(--u));
  height: calc(61.287 * var(--u));
}

.logo__wordmark {
  width: calc(343.888 * var(--u));
  height: calc(54.863 * var(--u));
}

.titulo {
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: calc(70.742 * var(--u));
  line-height: calc(70.742 * var(--u));
  letter-spacing: calc(-1.9651 * var(--u));
  color: var(--roxo-lotus);
  text-align: center;
  width: 100%;
}

.pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(12.615 * var(--u));
  padding: calc(7.569 * var(--u)) calc(25.23 * var(--u));
  border-radius: 999px;
  background: var(--branco-lotus);
  color: var(--cinza-neutro);
  font-size: calc(25.23 * var(--u));
  line-height: calc(37.846 * var(--u));
  white-space: nowrap;
}

.pill__seta {
  width: calc(22.707 * var(--u));
  height: calc(22.707 * var(--u));
  transform: rotate(90deg); /* arrow-circle-right girado para baixo */
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card {
  position: absolute;
  display: block;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover { transform: translateY(calc(-6 * var(--u))); }

.card__arte {
  width: 100%;
  height: 100%;
}

/* O texto fica dentro do retângulo rosa, que começa mais abaixo do que o
   card porque a ilustração sobe para fora dele. */
.card__texto {
  position: absolute;
  width: calc(504 * var(--u));
  height: calc(256 * var(--u));
  padding-left: calc(70 * var(--u));
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: var(--fonte-card);
  font-weight: 500;
  font-size: calc(47.769 * var(--u));
  line-height: calc(51.809 * var(--u));
  color: #fff;
}

/* --- Card 1: Agende sua consulta premium (Group 13 em [90,615] 900x397) --- */
.card--consulta {
  left: calc(90 * var(--u));
  top: calc(615 * var(--u));
  width: calc(900 * var(--u));
  height: calc(397 * var(--u));
}

.card--consulta .card__texto {
  left: 0;
  top: calc(135 * var(--u)); /* 750 - 615 */
}

/* --- Card 2: Protocolo Cand21 (247:5973 em [90,1050.806] 900x265.284) --- */
.card--protocolo {
  left: calc(90 * var(--u));
  top: calc(1050.806 * var(--u));
  width: calc(900 * var(--u));
  height: calc(265.284 * var(--u));
  background: var(--rosa-card);
  border: calc(6.878 * var(--u)) solid var(--rosa-borda);
  border-radius: calc(19.651 * var(--u));
  overflow: hidden;
}

/* Os textos "Protocolo" e "Cand" são vetor no Figma, não fonte.
   Ficam como SVG para manter o traço exato.

   Coordenadas absolutas do Figma, relativas ao card (900 x 265.284), menos
   a borda de 6.878 — inset em % seria medido sobre o padding box e erraria
   ~2px. */
.card--protocolo img { position: absolute; }

.card--protocolo .deco {
  left: calc(518.122 * var(--u));
  top: calc(-120.684 * var(--u));
  width: calc(648.961 * var(--u));
  height: calc(432.689 * var(--u));
}

.card--protocolo .protocolo {
  left: calc(253.122 * var(--u));
  top: calc(48.748 * var(--u));
  width: calc(253.579 * var(--u));
  height: calc(43.685 * var(--u));
}

.card--protocolo .cand {
  left: calc(253.122 * var(--u));
  top: calc(108.806 * var(--u));
  width: calc(253.709 * var(--u));
  height: calc(78.932 * var(--u));
}

.card--protocolo .cal21 {
  left: calc(520.343 * var(--u));
  top: calc(94.898 * var(--u));
  width: calc(112.779 * var(--u));
  height: calc(107.406 * var(--u));
}

/* --- Card 3: Fale com uma especialista (Group 12 em [88,1270] 904x398) --- */
.card--especialista {
  left: calc(88 * var(--u));
  top: calc(1270 * var(--u));
  width: calc(904 * var(--u));
  height: calc(398 * var(--u));
}

.card--especialista .card__texto {
  left: calc(2 * var(--u));   /* 90 - 88 */
  top: calc(138 * var(--u));  /* 1408 - 1270 */
}

/* --------------------------------------------------------------------------
   Rodapé  (247:5976 em [0,1847.412] 1080x116.588)
   -------------------------------------------------------------------------- */

.rodape {
  width: var(--w);
  min-height: calc(116.588 * var(--u));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: calc(24 * var(--u));
  background: var(--rodape-bg);
  border-top: 1px solid var(--rodape-borda);
}

/* DIVERGE DO FIGMA — por necessidade, não por descuido.
   No Figma o rodapé é uma linha de três colunas num quadro de 1080. A página
   real tem no máximo 540 (--w), o que dá 450px de conteúdo, e o texto tem
   piso de 11px por legibilidade. Nessa largura os três blocos somam ~468px:
   não cabem em nenhuma largura de produção. Então: logo e links na primeira
   linha (mantendo o espaçamento lateral do design) e copyright na segunda. */
.rodape__linha {
  width: calc(900 * var(--u));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: calc(16 * var(--u));
  row-gap: 8px;
}

/* O logo escala com o quadro, mas o texto para de encolher no piso de 11px.
   Sem isto o logo fica minúsculo ao lado do texto — mantém a proporção
   logo/texto do design (~1.4x a altura da fonte). */
.rodape__logo {
  width: auto;
  height: 15px;
  flex-shrink: 0;
}

.rodape__copy {
  order: 3;
  flex-basis: 100%;
  text-align: center;
}

.rodape__links { order: 2; }

/* DESVIO CONSCIENTE DO DESIGN
   No Figma o rodapé está em 14px absolutos dentro de um quadro de 1080 —
   escala diferente do resto da página (o título tem 70px). Escalado ao pé
   da letra daria ~7px, ilegível e abaixo de qualquer piso de acessibilidade.
   Aplicamos um mínimo de 11px. Remova o max() para voltar ao 1:1 literal. */
.rodape__copy,
.rodape__links {
  font-size: max(calc(14 * var(--u)), 11px);
  line-height: 1.43;
  color: var(--verde-agua);
  white-space: nowrap;
}

.rodape__links {
  display: flex;
  gap: calc(16 * var(--u));
}

.rodape__links a { transition: opacity 200ms; }
.rodape__links a:hover { opacity: 0.7; }

/* Em telas bem estreitas o copyright pode não caber numa linha só. */
@media (max-width: 420px) {
  .rodape__copy { white-space: normal; }
  .rodape__links { gap: 18px; }
}