:root {
  --font: "Libre Baskerville", Georgia, serif;
  --button-bg: #f2f2f2;
  --ink: #000;
  --page-bg: #9cd5f0;
  --bottom-bg: linear-gradient(180deg, #c2e9fb 0%, #88bfff 100%);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--page-bg); }
body { margin: 0; min-height: 100vh; font-family: var(--font); color: var(--ink); background: linear-gradient(rgba(20, 28, 38, .56), rgba(20, 28, 38, .56)), url("../assets/background.png") center top / cover fixed no-repeat; }
a { color: inherit; text-decoration: none; }

.viewport { min-height: 100vh; padding: 40px 0 56px; position: relative; overflow-x: hidden; }
.viewport::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(20, 28, 38, .56), rgba(20, 28, 38, .56)), url("../assets/background.png");
  background-size: cover; background-position: center top; background-attachment: fixed; filter: blur(0); transform: scale(1.01);
}
.site-shell { position: relative; z-index: 1; width: min(680px, calc(100% - 32px)); margin: 0 auto; padding: 14px 16px 34px; background: linear-gradient(rgba(10, 10, 10, .28), rgba(10, 10, 10, .28)), url("../assets/background.png") center top / cover fixed no-repeat; border-radius: 22px; }
.profile { text-align: center; color: white; }
.profile-image { width: 100px; height: 100px; object-fit: cover; border-radius: 50%; display: block; margin: 0 auto 7px; background: white; }
.profile h1 { margin: 0; font-size: 30px; line-height: 1.1; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.profile p { margin: 14px auto 14px; font-size: 16px; line-height: 1.6; white-space: pre-line; max-width: 620px; }
.socials { display: flex; justify-content: center; align-items: center; gap: 15px; margin: 0 0 17px; }
.social { width: 25px; height: 25px; display: grid; place-items: center; font-family: Arial, sans-serif; font-size: 19px; font-weight: 700; }
.social.whatsapp { color: #14df61; } .social.instagram { color: #ff2c9c; } .social.facebook { color: #1976d2; } .social.email { color: #1e3148; font-size: 22px; }
.share { position: absolute; top: 24px; right: 18px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(245,245,245,.86); color: #303840; cursor: pointer; font-size: 20px; }
.share:hover, .share:focus-visible { background: white; transform: scale(1.04); }
.links { display: grid; gap: 16px; }
.link-card { min-height: 59px; position: relative; display: flex; align-items: center; justify-content: center; padding: 8px 52px 8px 68px; border-radius: 32px; background: var(--button-bg); color: var(--ink); box-shadow: 0 2px 5px rgba(0,0,0,.18); text-align: center; transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }
.link-card:hover, .link-card:focus-visible { transform: translateY(-2px); background: #fff; box-shadow: 0 7px 16px rgba(0,0,0,.24); }
.thumb { position: absolute; left: 4px; top: 3px; width: 53px; height: 53px; border-radius: 50%; object-fit: cover; border: 3px solid white; background: #eee; }
.card-copy { display: flex; flex-direction: column; gap: 3px; align-items: center; font-size: 16px; line-height: 1.25; }
.card-title { font-weight: 700; }
.card-description { font-size: 13px; line-height: 1.3; }
.brand-mark { margin: 24px auto 0; color: #f05b24; font-family: Arial, sans-serif; font-size: 26px; font-weight: 700; }

@media (max-width: 700px) {
  .viewport { padding: 12px 0 24px; }
  .site-shell { width: min(680px, calc(100% - 16px)); padding: 13px 10px 25px; border-radius: 14px; }
  .profile-image { width: 82px; height: 82px; }
  .profile h1 { font-size: 25px; }
  .profile p { font-size: 13px; line-height: 1.5; margin: 10px 35px 12px; }
  .share { top: 15px; right: 10px; width: 35px; height: 35px; font-size: 18px; }
  .links { gap: 12px; }
  .link-card { min-height: 56px; padding-left: 61px; padding-right: 36px; }
  .thumb { width: 50px; height: 50px; }
  .card-copy { font-size: 14px; }
  .card-description { font-size: 11px; }
}

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