/* Página da bio do Instagram @fernandamezine (14/10/2026): uma coluna só, do tamanho do celular.
   Os tokens são os da página B (creme e tinta, framboesa no destaque; Fraunces + DM Sans).
   Toque: cada link tem 76 px ou mais de altura e 12 px entre um e outro. Contraste: texto suave 5,8:1, botão 5,6:1.
   Revisão de 14/10 (skill ui-ux-pro-max): um destaque só (o cartão do guia); nada que não seja link com cara de botão;
   texto secundário com 14 px; alvo de toque de 44 px também no rodapé. */
:root {
  --papel: #fbf7f3; --papel-2: #f4ece6; --branco: #fff; --tinta: #2a1f26; --tinta-2: #4a3d45; --suave: #6b5a64; --linha: #e7dad6;
  --acento: #a8456b; --acento-forte: #8f3459; --acento-2: #f5e3ea; --lilas: #6a57a3;
  --raio: 20px; --raio-sm: 14px;
  --sombra: 0 1px 2px rgba(42, 31, 38, .06), 0 10px 26px -16px rgba(42, 31, 38, .32);
  --serif: 'Fraunces', Georgia, serif; --sans: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; color: var(--tinta); font-family: var(--sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased;
  background: radial-gradient(120% 340px at 50% 0, var(--acento-2) 0, rgba(245, 227, 234, 0) 100%) no-repeat, var(--papel); }
img { display: block; max-width: 100%; height: auto; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--lilas); outline-offset: 3px; }
.sprite { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.bio { width: 100%; max-width: 480px; margin: 0 auto; padding: max(28px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom)); }

/* ---------- quem é ---------- */
.perfil { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 26px; }
.avatar { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; border: 3px solid var(--branco);
  box-shadow: 0 0 0 2px var(--acento), 0 12px 26px -12px rgba(42, 31, 38, .45); margin-bottom: 14px; }
.perfil h1 { margin: 0; font-family: var(--serif); font-optical-sizing: auto; font-weight: 700; font-size: 30px; line-height: 1.1; letter-spacing: -.02em; }
.area { margin-top: 4px; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--acento-forte); }
.quem { margin-top: 10px; max-width: 34ch; color: var(--tinta-2); text-wrap: balance; }

/* ---------- grupos de links ---------- */
.grupo { margin-top: 24px; }
.perfil + .grupo { margin-top: 0; }
.grupo h2 { margin: 0 0 10px 4px; font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--suave); }
.grupo > * + * { margin-top: 12px; }

.link { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 10px 14px 10px 10px; border-radius: var(--raio);
  background: var(--branco); box-shadow: var(--sombra); text-decoration: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform .15s ease, box-shadow .2s ease; }
.link img { width: 56px; height: 56px; flex: none; border-radius: var(--raio-sm); object-fit: cover; background: var(--papel-2); }
.link-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.link-txt b { font-size: 16px; line-height: 1.3; }
.link-txt small { font-size: 14px; line-height: 1.4; color: var(--suave); }
.seta { color: var(--acento); }
.link:active, .destaque:active { transform: scale(.98); }
@media (hover: hover) { .link:hover, .destaque:hover { transform: translateY(-1px); box-shadow: 0 1px 2px rgba(42, 31, 38, .06), 0 16px 32px -16px rgba(42, 31, 38, .4); } }
.ico-circulo { display: grid; place-items: center; width: 56px; height: 56px; flex: none; border-radius: var(--raio-sm); background: var(--acento-2); color: var(--acento-forte); }
.ico-circulo .ic { width: 26px; height: 26px; }

/* ---------- agenda do estúdio: 2 botões lado a lado, mais discretos que os links ---------- */
.agendar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn-ag { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 8px 12px; border-radius: 999px;
  background: var(--branco); border: 1.5px solid var(--linha); color: var(--tinta); font-weight: 700; font-size: 15px; line-height: 1.2; text-align: center; text-decoration: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: border-color .2s ease, transform .15s ease; }
.btn-ag .ic { color: var(--acento); }
.btn-ag:active { transform: scale(.97); }
@media (hover: hover) { .btn-ag:hover { border-color: var(--acento); } }

/* ---------- o guia, em destaque ---------- */
.destaque { display: block; overflow: hidden; border-radius: var(--raio); background: var(--branco); box-shadow: var(--sombra); text-decoration: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: transform .15s ease, box-shadow .2s ease; }
.destaque-foto { position: relative; display: block; background: var(--papel-2); }
.destaque-foto img { width: 100%; aspect-ratio: 900 / 672; object-fit: cover; }
.selo { position: absolute; left: 12px; top: 12px; padding: 5px 10px; border-radius: 8px; background: rgba(42, 31, 38, .82); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.destaque-txt { display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 14px; color: var(--tinta-2); font-size: 15px; }
.destaque-titulo { font-family: var(--serif); font-optical-sizing: auto; font-weight: 700; font-size: 23px; line-height: 1.15; letter-spacing: -.015em; color: var(--tinta); }
.destaque-pe { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-top: 8px; }
.preco { font-size: 13.5px; color: var(--suave); }
.preco b { margin-right: 4px; font-size: 21px; color: var(--tinta); font-variant-numeric: tabular-nums; }
.cta { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 52px; padding: 0 16px 0 20px; border-radius: 999px; background: var(--acento); color: #fff;
  font-weight: 800; font-size: 16.5px; box-shadow: 0 10px 22px -10px rgba(168, 69, 107, .75); transition: background-color .2s ease; }
.destaque:hover .cta { background: var(--acento-forte); }
.pdf { font-size: 13px; color: var(--suave); text-align: center; }

.pe { margin-top: 30px; text-align: center; font-size: 14px; }
.pe a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--suave); font-weight: 600; text-decoration: none; }

@media (prefers-reduced-motion: reduce) { .link, .destaque, .cta, .btn-ag { transition: none; } .link:active, .destaque:active, .btn-ag:active { transform: none; } }