:root { --creme: #f7f1ea; --papel: #fffaf5; --tinta: #2b2320; --suave: #75655d; --terra: #a5583c; --terra-escura: #874530; --rosa: #ead6c8; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: linear-gradient(180deg, var(--rosa), var(--creme) 360px) no-repeat var(--creme); color: var(--tinta); font: 400 17px/1.5 "Jost", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
main { width: min(440px, 100% - 32px); margin: 0 auto; padding: 48px 0 56px; text-align: center; }
.foto { width: 132px; height: 132px; margin: 0 auto 20px; border-radius: 50%; object-fit: cover; border: 4px solid var(--papel); box-shadow: 0 6px 24px rgba(60, 35, 25, .15); }
h1 { margin: 0; font: 500 40px/1.1 "Cormorant Garamond", Georgia, serif; }
.sub { margin: 8px 0 0; font: 500 12px/1.4 "Jost", sans-serif; letter-spacing: .22em; text-transform: uppercase; color: var(--terra); }
.chamada { margin: 14px 0 6px; font: italic 21px/1.4 "Cormorant Garamond", Georgia, serif; color: var(--suave); }
.arroba { color: var(--suave); font-size: 15px; text-decoration: none; }
nav { display: grid; gap: 12px; margin-top: 28px; }
.botao { display: block; padding: 15px 20px; border: 1px solid var(--terra); border-radius: 999px; background: var(--terra); color: #fff; font-weight: 500; font-size: 16px; text-decoration: none; transition: background .2s; }
.botao:hover { background: var(--terra-escura); }
.botao.claro { background: rgba(255, 250, 245, .7); border-color: var(--tinta); color: var(--tinta); }
.botao.claro:hover { background: var(--papel); }