/* Conceito: coluna de celular. Retrato inteiro em arco, moldado por fio dourado, com o nome em caligrafia como assinatura. */
@font-face { font-family: "Pinyon Script"; src: url("../assets/fonts/pinyon-script.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("../assets/fonts/jost.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  /* Comunidade Posicionadas */
  --creme: #FCF4EA;
  --papel: #FFFBF5;
  --marrom: #634626;
  --bronze: #83562D;
  --dourado: #AF8658;
  --dourado-claro: #E0BC8C;
  --topo: #4D2A1A;           /* mesmo tom do fundo da foto */
  /* A Virada */
  --virada: #6D2F11;
  --virada-escuro: #3F1A08;
  --virada-creme: #FFF6EF;
  --virada-acento: #E68658;
  --texto-suave: #7D6349;
  --assinatura: "Pinyon Script", "Snell Roundhand", cursive;
  --corpo: "Jost", -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--creme); color: var(--marrom); font: 400 16px/1.45 var(--corpo); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
p { margin: 0; }

.pagina { width: 100%; max-width: 480px; min-height: 100dvh; margin-inline: auto; background: var(--creme); display: flex; flex-direction: column; }

/* Topo */
.topo { display: flex; flex-direction: column; align-items: center; text-align: center; padding: calc(18px + env(safe-area-inset-top, 0px)) 20px 18px; background: var(--topo); color: var(--creme); }
.retrato { position: relative; width: 150px; aspect-ratio: 640 / 790; }
.retrato::before { content: ""; position: absolute; inset: -7px; border: 1px solid var(--dourado-claro); border-radius: 999px 999px 10px 10px; }
.retrato img { width: 100%; height: 100%; object-fit: cover; border-radius: 999px 999px 6px 6px; }
h1 { margin: 12px 0 0; font: 400 clamp(44px, 12.6vw, 54px)/1.05 var(--assinatura); color: var(--dourado-claro); }
.topo p { margin-top: 2px; font-size: 14.5px; line-height: 1.35; color: #F3E3CF; text-wrap: balance; }

/* Links */
.links { display: flex; flex-direction: column; gap: 12px; padding-block: 14px 6px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.card, .linha { transition: transform .16s ease, box-shadow .16s ease; }
.card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 16px 18px; border-radius: 18px; }
.card:active, .linha:active { transform: scale(.98); }
.card__texto { font-size: 15.5px; line-height: 1.35; text-wrap: balance; }
.botao { width: 100%; }

.card--virada { background: var(--virada); color: var(--virada-creme); box-shadow: 0 10px 24px -14px var(--virada-escuro); }
.card--virada img { width: 150px; height: auto; }
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: 999px; font-weight: 500; font-size: 15px; white-space: nowrap; }
.card--virada .botao { background: var(--virada-acento); color: var(--virada-escuro); }
.card--comunidade .botao { background: var(--marrom); color: var(--creme); }

.card--comunidade { background: var(--papel); border: 1px solid var(--dourado-claro); }
.card--comunidade img { width: min(178px, 100%); height: auto; }

.linha { display: flex; align-items: center; gap: 14px; min-height: 62px; padding: 8px 18px; border-radius: 18px; }
.linha__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.linha__texto strong { font-weight: 500; font-size: 16px; }
.linha__texto small { font-size: 14px; color: var(--texto-suave); }
.linha--whats { background: #F3E3CF; }
.ico { flex: none; width: 26px; height: 26px; fill: var(--bronze); }
.seta { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .16s ease; }

@media (hover: hover) {
  .card:hover, .linha:hover { transform: translateY(-2px); }
  a:hover .seta { transform: translateX(3px); }
}
a:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }

/* Rodapé */
.rodape { margin-top: auto; padding: 4px 20px calc(16px + env(safe-area-inset-bottom, 0px)); text-align: center; }
.insta { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 500; }
.insta .ico { width: 20px; height: 20px; }
.rodape small { display: block; font-size: 12px; color: var(--texto-suave); }

/* Computador: a coluna vira um cartão sobre o marrom */
@media (min-width: 620px) {
  body { background: var(--topo); padding-block: 32px; }
  .pagina { min-height: 0; border-radius: 28px; overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .card, .linha, .seta { transition: none; }
}