:root { color-scheme: light; font-family: 'Segoe UI', Arial, sans-serif; color: #521f3e; background: #f8d0e0; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 36px 24px; }
main { width: min(100%, 440px); text-align: center; }
h1 { margin: 0; line-height: 0; }
.logo { display: block; width: min(100%, 160px); height: auto; margin: 0 auto; }
.tagline { font-size: 1rem; line-height: 1.6; font-weight: 500; margin: 22px 0 28px; text-wrap: balance; }
nav { display: grid; gap: 12px; }
.social { --accent: #641c47; display: flex; align-items: center; gap: 16px; min-height: 76px; padding: 14px 20px; border: 1px solid #c6007233; border-radius: 16px; color: #641c47; background: #ffffff80; text-decoration: none; transition: background .22s, border-color .22s, transform .22s, box-shadow .22s; }
.tiktok { --accent: #242029; }
.instagram { --accent: #bd2177; }
.whatsapp { --accent: #147d4c; }
.community { --accent: #087c72; }
.social-icon { display: grid; place-items: center; flex: 0 0 44px; height: 44px; border-radius: 14px; background: #ffffffa6; color: var(--accent); transition: transform .25s, background .22s, color .22s; }
.social-icon svg { width: 25px; height: 25px; overflow: visible; }
.social-text { display: flex; flex: 1; min-width: 0; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; }
.social:focus-visible { background: #fff; border-color: var(--accent); box-shadow: 0 8px 22px #641c4714; }
@media (hover: hover) and (pointer: fine) {
  .social:hover { background: #fff; border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 10px 24px #641c4724; }
  .social:hover .social-icon { color: #fff; background: var(--accent); transform: rotate(-6deg) scale(1.08); }
}
.social:active { transform: scale(.98); }
a:focus-visible { outline: 3px solid #a5005f; outline-offset: 4px; }
.platform { font-size: 1rem; font-weight: 600; }
.detail { font-size: .875rem; }
@media (max-width: 360px) { body { padding: 24px 16px; } .social { padding: 14px 16px; gap: 14px; } .logo { width: min(100%, 150px); } }
@media (prefers-reduced-motion: reduce) { .social, .social-icon { transition: none; } .social:hover, .social:active, .social:hover .social-icon { transform: none; } }