:root {
  color-scheme: light;
  --ink: #241825;
  --pink: #f12e91;
  --orange: #ff8a2f;
  --paper: #fffafd;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: #fff7fb; }

body {
  min-height: 100%;
  margin: 0;
  color: var(--ink);
  font-family: ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
  background:
    radial-gradient(circle at 10% 5%, rgba(255, 153, 202, .28), transparent 28rem),
    radial-gradient(circle at 95% 45%, rgba(255, 192, 98, .24), transparent 24rem),
    linear-gradient(165deg, #fff 0%, #fff4fa 58%, #fff9ee 100%);
}

.page {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: max(26px, env(safe-area-inset-top)) 18px max(22px, env(safe-area-inset-bottom));
}

.profile {
  position: relative;
  width: min(100%, 480px);
  text-align: center;
}

.portrait {
  display: block;
  width: 150px;
  height: 150px;
  margin: 0 auto -6px;
  object-fit: cover;
  border: 5px solid rgba(255,255,255,.96);
  border-radius: 50%;
  box-shadow: 0 15px 40px rgba(177, 26, 102, .2), 0 0 0 2px rgba(241,46,145,.12);
}

.brand {
  display: block;
  width: min(340px, 82vw);
  height: auto;
  margin: 6px auto 2px;
}

.intro {
  max-width: 390px;
  margin: 0 auto 21px;
  color: #674d62;
  font-size: 15px;
  line-height: 1.5;
}

.links { display: grid; gap: 12px; }

.link {
  display: grid;
  grid-template-columns: 48px 1fr 20px;
  align-items: center;
  min-height: 72px;
  padding: 10px 16px 10px 12px;
  color: var(--ink);
  text-align: left;
  text-decoration: none;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(77, 35, 66, .09);
  border-radius: 22px;
  box-shadow: 0 8px 28px rgba(93, 36, 74, .08);
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.link-featured {
  color: white;
  background: linear-gradient(105deg, #ee2a8d, #ff4c78 54%, #ff963a);
  border-color: transparent;
  box-shadow: 0 12px 30px rgba(234, 44, 130, .24);
}

.link-retos {
  color: #fff;
  background: linear-gradient(105deg, #722bd4, #ae36ce 55%, #ee3d94);
  border-color: transparent;
  box-shadow: 0 12px 30px rgba(126, 43, 201, .2);
}

.link-retos small { color: rgba(255,255,255,.8); }
.retos-icon { color: #6f28c9; background: #fff; font-size: 24px; }

.link:hover { transform: translateY(-2px); box-shadow: 0 13px 30px rgba(93,36,74,.14); }
.link:active { transform: scale(.985); }
.link:focus-visible { outline: 3px solid #7624d8; outline-offset: 3px; }

.icon {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  color: white;
  background: #111;
  border-radius: 14px;
  font-size: 25px;
  font-weight: 800;
}

.icon img {
  display: block;
  width: 23px;
  height: 23px;
}

.link-featured .icon { color: #121212; background: white; }
.gradient { background: linear-gradient(145deg, #6d35d6, #e02f83 48%, #ff9b35); }
.youtube { background: #ff0033; }
.whatsapp { background: #25d366; }
.facebook { background: #1877f2; }

.link strong, .link small { display: block; }
.link strong { font-size: 17px; letter-spacing: -.1px; }
.link small { margin-top: 2px; color: #826a7d; font-size: 12px; }
.link-featured small { color: rgba(255,255,255,.8); }
.arrow { font-size: 31px; font-weight: 300; opacity: .5; }

.official {
  margin: 21px 0 0;
  color: #927a8c;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.spark {
  position: absolute;
  z-index: -1;
  width: 12px;
  height: 12px;
  background: #ffb238;
  border-radius: 50%;
  box-shadow: 0 0 0 7px rgba(255,178,56,.12);
}
.spark-one { top: 72px; left: 7%; }
.spark-two { top: 174px; right: 4%; width: 8px; height: 8px; background: #ed3a9a; }

@media (max-height: 730px) {
  .page { padding-top: 18px; }
  .portrait { width: 118px; height: 118px; }
  .brand { width: min(295px, 78vw); }
  .intro { margin-bottom: 14px; }
  .links { gap: 9px; }
  .link { min-height: 62px; }
  .official { margin-top: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .link { transition: none; }
}