/* Página "Redes sociais": só é carregada nela. Topo azul com a Mia; uma linha grande por rede, que se enche de azul ao passar o mouse. */

/* ---------- Topo ---------- */
.page-head.rs-topo {
    position: relative; overflow: hidden; border-bottom: 0;
    background:
        radial-gradient(60% 120% at 85% 0%, rgba(42, 98, 214, .55) 0%, transparent 62%),
        radial-gradient(50% 90% at 0% 110%, rgba(0, 20, 70, .6) 0%, transparent 65%),
        linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 62%, var(--blue-mid) 135%);
}
.page-head.rs-topo .rs-topo-grade { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: end; gap: clamp(8px, 3vw, 40px); padding-top: clamp(34px, 5vw, 64px); padding-bottom: 0; }
.rs-topo-texto { align-self: center; padding-bottom: clamp(34px, 5vw, 64px); }
.rs-topo h1 { color: var(--white); text-shadow: 0 2px 18px rgba(0, 20, 70, .35); }
.rs-topo p { color: var(--blue-100); max-width: 34ch; }
.rs-mia { display: block; width: 100%; max-width: 460px; height: auto; margin-left: auto; filter: drop-shadow(0 18px 28px rgba(0, 12, 50, .35)); }

/* ---------- Lista ---------- */
.rs-pagina { padding-top: clamp(26px, 4vw, 48px); }
.rs-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(12px, 1.6vw, 18px); }
.rs-linha { border-radius: 28px; }
.rs-link {
    position: relative; isolation: isolate; overflow: hidden;
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(16px, 3vw, 36px);
    padding: clamp(20px, 3vw, 36px) clamp(18px, 3vw, 40px); color: var(--blue-ink); text-decoration: none;
    background: var(--white); border: 1px solid var(--line); border-radius: 28px; box-shadow: 0 1px 2px rgba(10, 26, 69, .04);
    transition: border-color .3s ease, box-shadow .3s ease;
}
a.rs-link:hover, a.rs-link:focus-visible { border-color: var(--blue); box-shadow: 0 16px 36px rgba(0, 56, 152, .18); }
.rs-link::before {
    content: ""; position: absolute; inset: 0; z-index: -1; background: var(--blue);
    transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
a.rs-link:hover::before, a.rs-link:focus-visible::before { transform: scaleX(1); }
a.rs-link:focus-visible { outline: 3px solid var(--blue-mid); outline-offset: 3px; }

.rs-icone {
    display: inline-flex; align-items: center; justify-content: center; width: clamp(56px, 7vw, 84px); aspect-ratio: 1; border-radius: 50%;
    background: var(--blue-50); color: var(--blue); font-size: clamp(26px, 3.2vw, 38px); transition: background .3s ease, color .3s ease;
}
.rs-miolo { display: grid; gap: 4px; min-width: 0; }
.rs-nome { font-weight: 700; font-size: clamp(16px, 1.6vw, 19px); color: var(--muted); transition: color .3s ease; }
.rs-perfil {
    font-family: var(--font-display); font-weight: 800; line-height: 1; letter-spacing: .005em; color: var(--blue);
    font-size: clamp(30px, 4.8vw, 62px); overflow-wrap: anywhere; transition: color .3s ease, transform .45s cubic-bezier(.2, .7, .2, 1);
}
.rs-texto { max-width: 52ch; color: var(--muted); line-height: 1.55; transition: color .3s ease; }

.rs-ir {
    display: inline-flex; align-items: center; gap: 12px; font-weight: 700; color: var(--blue); transition: color .3s ease;
}
.rs-ir i {
    display: inline-flex; align-items: center; justify-content: center; width: 48px; aspect-ratio: 1; border-radius: 50%;
    background: var(--blue); color: var(--white); transition: background .3s ease, color .3s ease, transform .35s ease;
}
.rs-ir-breve { padding: 10px 20px; border-radius: 999px; background: var(--blue-50); }

a.rs-link:hover .rs-icone, a.rs-link:focus-visible .rs-icone { background: var(--white); color: var(--blue); }
a.rs-link:hover .rs-nome, a.rs-link:hover .rs-texto, a.rs-link:focus-visible .rs-nome, a.rs-link:focus-visible .rs-texto { color: var(--blue-100); }
a.rs-link:hover .rs-perfil, a.rs-link:focus-visible .rs-perfil { color: var(--white); transform: translateX(10px); }
a.rs-link:hover .rs-ir, a.rs-link:focus-visible .rs-ir { color: var(--white); }
a.rs-link:hover .rs-ir i, a.rs-link:focus-visible .rs-ir i { background: var(--white); color: var(--blue); transform: translateX(4px); }
.rs-breve .rs-perfil { color: var(--blue-mid); opacity: .55; }

@media (max-width: 860px) {
    .page-head.rs-topo .rs-topo-grade { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
    .rs-topo-texto { padding-bottom: clamp(26px, 6vw, 40px); }
    .rs-mia { max-width: 300px; }
    .rs-link { grid-template-columns: auto minmax(0, 1fr); }
    .rs-ir { grid-column: 2; justify-self: start; }
}
@media (max-width: 480px) {
    .rs-link { grid-template-columns: 1fr; }
    .rs-ir { grid-column: 1; }
}

/* Sem animação para quem pediu */
html.a11y-pausar .rs-link::before, html.a11y-pausar .rs-perfil, html.a11y-pausar .rs-ir i,
html.a11y-pausar .rs-icone, html.a11y-pausar .rs-nome, html.a11y-pausar .rs-texto { transition: none; }
html.a11y-pausar a.rs-link:hover .rs-perfil, html.a11y-pausar a.rs-link:hover .rs-ir i { transform: none; }
@media (prefers-reduced-motion: reduce) {
    .rs-link::before, .rs-perfil, .rs-ir i, .rs-icone, .rs-nome, .rs-texto { transition: none; }
    a.rs-link:hover .rs-perfil, a.rs-link:hover .rs-ir i { transform: none; }
}

/* ---------- Mais vida: bolhas ao redor da Mia, marca-d'água em cada rede e fecho ---------- */
.rs-mia-caixa { position: relative; align-self: end; }
.rs-bolhas { position: absolute; inset: 0; pointer-events: none; }
.rs-bolha {
    position: absolute; display: flex; align-items: center; justify-content: center; width: clamp(42px, 5vw, 64px); aspect-ratio: 1; border-radius: 50%;
    background: var(--white); color: var(--blue); font-size: clamp(20px, 2.4vw, 30px); box-shadow: 0 10px 24px rgba(0, 12, 50, .3);
    animation: rs-flutua 5.2s ease-in-out infinite;
}
.rs-bolha-1 { left: -4%; top: 10%; }
.rs-bolha-2 { right: -2%; top: 46%; animation-delay: -1.7s; }
.rs-bolha-3 { right: 8%; top: 4%; animation-delay: -3.4s; }
@keyframes rs-flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.rs-linha { opacity: 0; animation: rs-entra .7s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(.12s * var(--i, 0) + .1s); }
@keyframes rs-entra { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.rs-marca {
    position: absolute; right: clamp(70px, 14vw, 230px); top: 50%; z-index: -1; transform: translateY(-50%) rotate(-8deg);
    font-size: clamp(120px, 16vw, 230px); color: var(--blue-50); transition: color .3s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
}
a.rs-link:hover .rs-marca, a.rs-link:focus-visible .rs-marca { color: rgba(255, 255, 255, .1); transform: translateY(-50%) rotate(0deg) scale(1.08); }
.rs-breve .rs-marca { color: var(--paper-2); }
a.rs-link:hover .rs-icone, a.rs-link:focus-visible .rs-icone { transform: rotate(-8deg) scale(1.06); }
.rs-icone { transition: background .3s ease, color .3s ease, transform .35s ease; }

.rs-fecho {
    border-radius: 28px;
    display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap;
    margin-top: clamp(28px, 4vw, 48px); padding: clamp(22px, 3vw, 34px) clamp(22px, 3.4vw, 40px);
    background: var(--blue-50); border: 1px solid var(--blue-100); border-radius: 28px;
}
.rs-fecho h2 { margin: 0 0 4px; color: var(--blue); font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; }
.rs-fecho p { margin: 0; color: var(--muted); max-width: 52ch; }
.rs-fecho-botao {
    display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 999px; background: var(--blue);
    color: var(--white); font-weight: 700; text-decoration: none; transition: background .2s ease;
}
.rs-fecho-botao:hover { background: var(--blue-dark); }
.rs-fecho-botao:focus-visible { outline: 3px solid var(--blue-mid); outline-offset: 3px; }

@media (max-width: 860px) {
    .rs-marca { right: -10px; font-size: 130px; }
    .rs-bolha-2 { left: -2%; }
}
html.a11y-pausar .rs-bolha { animation: none; }
html.a11y-pausar .rs-linha { animation: none; opacity: 1; }
html.a11y-pausar .rs-marca, html.a11y-pausar .rs-icone { transition: none; }
@media (prefers-reduced-motion: reduce) {
    .rs-bolha { animation: none; }
    .rs-linha { animation: none; opacity: 1; }
    .rs-marca, .rs-icone { transition: none; }
    a.rs-link:hover .rs-icone, a.rs-link:hover .rs-marca { transform: none; }
}