/* Página Feliz Aniversário — Michelly */

.page-aniversario main,
:is(.page-primeiro-mes, .page-segundo-mes, .page-surpresa-pos-mes) main {
    position: relative;
    z-index: 2;
}

.page-aniversario,
:is(.page-primeiro-mes, .page-segundo-mes) {
    min-height: 100vh;
    background: linear-gradient(
        145deg,
        #1a0a12 0%,
        #3d1528 25%,
        #5c1f3a 50%,
        #2d1220 75%,
        #1a0a12 100%
    );
    background-size: 400% 400%;
    animation: anivGradient 18s ease infinite;
    color: var(--cream, #fdf8f0);
    overflow-x: hidden;
}

/* Tema exclusivo da página de aniversário (diferente do primeiro mês) */
.page-aniversario {
    background: radial-gradient(circle at 18% 12%, #39255f 0%, transparent 35%),
        radial-gradient(circle at 82% 18%, #4c2f79 0%, transparent 30%),
        linear-gradient(160deg, #130a28 0%, #201042 42%, #12081f 100%);
    animation: none;
}

.page-aniversario .aniv-header {
    background: linear-gradient(180deg, rgba(16, 9, 36, 0.94) 0%, transparent 100%);
}

.page-aniversario .aniv-badge-top {
    color: #d6c27a;
    text-shadow: 0 0 18px rgba(214, 194, 122, 0.45);
}

.page-aniversario .aniv-hero-glow {
    background: radial-gradient(circle, rgba(112, 88, 196, 0.42) 0%, transparent 65%);
}

.page-aniversario .aniv-title {
    background: none;
    color: #f7f2ff;
    -webkit-text-fill-color: #f7f2ff;
    text-shadow: 0 6px 24px rgba(9, 4, 26, 0.45), 0 0 14px rgba(183, 152, 255, 0.28);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .page-aniversario .aniv-title {
        background: linear-gradient(115deg, #f8f5ff 0%, #dbc6ff 45%, #d6c27a 80%, #b798ff 100%);
        background-size: 200% auto;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
    }
}

.page-aniversario .aniv-subtitle {
    color: rgba(234, 224, 255, 0.95);
}

.page-aniversario .aniv-date,
.page-aniversario .aniv-section-label {
    color: #d6c27a;
}

.page-aniversario .aniv-music-card {
    background: rgba(122, 93, 206, 0.13);
    border: 1px solid rgba(190, 161, 255, 0.32);
    box-shadow: 0 10px 42px rgba(6, 2, 22, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

.page-aniversario .aniv-music-label {
    color: #d9c8ff;
}

.page-aniversario .aniv-play-big {
    color: #170f2e;
    background: linear-gradient(135deg, #d8c7ff, #d6c27a);
    box-shadow: 0 6px 26px rgba(122, 93, 206, 0.45);
}

.page-aniversario .aniv-prose {
    color: rgba(239, 230, 255, 0.9);
}

.page-aniversario .aniv-prose strong {
    color: #e7d8ff;
}

.page-aniversario .aniv-quote-box {
    border-left-color: #bea1ff;
    background: rgba(122, 93, 206, 0.16);
    color: #f4edff;
}

.page-aniversario .aniv-photo {
    border-color: rgba(214, 194, 122, 0.55);
}

.page-aniversario .aniv-footer-love {
    color: #e2d2ff;
    text-shadow: 0 0 26px rgba(122, 93, 206, 0.4);
}

@keyframes anivGradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.page-aniversario .floating-hearts,
:is(.page-primeiro-mes, .page-segundo-mes, .page-surpresa-pos-mes) .floating-hearts {
    opacity: 0.85;
}

.page-aniversario .floating-heart,
:is(.page-primeiro-mes, .page-segundo-mes, .page-surpresa-pos-mes) .floating-heart {
    color: rgba(255, 150, 180, 0.75);
    text-shadow: 0 0 12px rgba(255, 107, 138, 0.6);
}

.aniv-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(180deg, rgba(26, 10, 18, 0.92) 0%, transparent 100%);
    backdrop-filter: blur(8px);
}

.aniv-back {
    font-family: var(--font-body, 'Poppins', sans-serif);
    font-size: 0.9rem;
    color: var(--pink-300, #ffb3c6);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.25s ease, transform 0.25s ease;
}

.aniv-back:hover {
    color: #fff;
    transform: translateX(-3px);
}

.aniv-badge-top {
    font-family: var(--font-display, 'Dancing Script', cursive);
    font-size: 1.35rem;
    color: var(--gold-light, #f0d68a);
    text-shadow: 0 0 20px rgba(212, 168, 83, 0.5);
}

.aniv-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6rem 1.5rem 4rem;
}

.aniv-hero-glow {
    position: absolute;
    width: min(90vw, 520px);
    height: min(90vw, 520px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 107, 138, 0.35) 0%, transparent 65%);
    filter: blur(40px);
    animation: anivPulse 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes anivPulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.08); opacity: 1; }
}

.aniv-cake {
    font-size: clamp(3rem, 10vw, 5rem);
    margin-bottom: 1rem;
    animation: anivBounce 2.5s ease-in-out infinite;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.35));
}

@keyframes anivBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.aniv-title {
    font-family: var(--font-heading, 'Playfair Display', serif);
    font-size: clamp(2.2rem, 7vw, 3.8rem);
    font-weight: 500;
    line-height: 1.15;
    margin-bottom: 0.75rem;
    background: linear-gradient(110deg, #fff5f7 0%, #ffd6e0 35%, #f0d68a 65%, #ffb3c6 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: anivShine 6s linear infinite;
}

@keyframes anivShine {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

.aniv-subtitle {
    font-family: var(--font-display, 'Dancing Script', cursive);
    font-size: clamp(1.6rem, 5vw, 2.5rem);
    color: rgba(255, 230, 240, 0.95);
    margin-bottom: 0.5rem;
}

.aniv-date {
    font-family: var(--font-body, 'Poppins', sans-serif);
    font-size: 0.95rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold, #d4a853);
    margin-bottom: 2rem;
}

.aniv-music-card {
    position: relative;
    z-index: 2;
    max-width: 420px;
    width: 100%;
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius-lg, 20px);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 179, 198, 0.25);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    margin-bottom: 2rem;
}

.aniv-music-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--pink-300, #ffb3c6);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.aniv-music-label i {
    color: #ff6b8a;
    animation: anivHeartBeat 1.2s ease-in-out infinite;
}

@keyframes anivHeartBeat {
    0%, 100% { transform: scale(1); }
    15% { transform: scale(1.2); }
    30% { transform: scale(1); }
}

.aniv-audio-wrap audio {
    width: 100%;
    height: 40px;
    border-radius: 999px;
    margin-top: 0.25rem;
}

.aniv-play-big {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 0.75rem;
    padding: 0.75rem 1.5rem;
    font-family: var(--font-body, 'Poppins', sans-serif);
    font-size: 0.95rem;
    font-weight: 500;
    color: #1a0a12;
    background: linear-gradient(135deg, #ffd6e0, #f0d68a);
    border: none;
    border-radius: var(--radius-full, 9999px);
    cursor: pointer;
    box-shadow: 0 4px 24px rgba(255, 107, 138, 0.45);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.aniv-play-big:hover {
    transform: scale(1.04);
    box-shadow: 0 6px 32px rgba(255, 179, 198, 0.55);
}

.aniv-play-big:active {
    transform: scale(0.98);
}

.aniv-music-note {
    font-size: 0.75rem;
    color: rgba(255, 230, 240, 0.55);
    margin-top: 0.75rem;
    line-height: 1.45;
}

.aniv-scroll-hint {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.45);
    animation: anivFadeUp 2s ease-in-out infinite;
}

@keyframes anivFadeUp {
    0%, 100% { opacity: 0.45; transform: translateX(-50%) translateY(0); }
    50% { opacity: 1; transform: translateX(-50%) translateY(-6px); }
}

.aniv-section {
    position: relative;
    padding: 4rem 1.5rem;
    max-width: 720px;
    margin: 0 auto;
}

.aniv-section-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--gold, #d4a853);
    margin-bottom: 1rem;
    text-align: center;
}

.aniv-section h2 {
    font-family: var(--font-heading, 'Playfair Display', serif);
    font-size: clamp(1.75rem, 4.5vw, 2.35rem);
    text-align: center;
    margin-bottom: 1.5rem;
    color: #fff5f7;
}

.aniv-prose {
    font-family: var(--font-body, 'Poppins', sans-serif);
    font-size: 1.05rem;
    line-height: 1.85;
    color: rgba(255, 236, 242, 0.88);
    text-align: center;
}

.aniv-prose p + p {
    margin-top: 1.25rem;
}

.aniv-prose strong {
    color: #ffd6e0;
    font-weight: 600;
}

.aniv-quote-box {
    margin-top: 2rem;
    padding: 1.75rem 1.5rem;
    border-radius: var(--radius-md, 12px);
    border-left: 4px solid #ff6b8a;
    background: rgba(255, 107, 138, 0.08);
    font-family: var(--font-display, 'Dancing Script', cursive);
    font-size: clamp(1.5rem, 4vw, 2rem);
    color: #ffe8ef;
    line-height: 1.4;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.aniv-gallery-strip {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    max-width: 900px;
    margin: 3rem auto 0;
    padding: 0 1.5rem 4rem;
}

@media (min-width: 640px) {
    .aniv-gallery-strip {
        grid-template-columns: repeat(3, 1fr);
    }
}

.aniv-photo {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-lg, 20px);
    overflow: hidden;
    border: 2px solid rgba(240, 214, 138, 0.45);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset;
    transform: translateZ(0);
    animation: anivFloatPhoto 6s ease-in-out infinite;
}

.aniv-photo:nth-child(2) { animation-delay: -1.5s; }
.aniv-photo:nth-child(3) { animation-delay: -3s; }
.aniv-photo:nth-child(4) { animation-delay: -2s; }
.aniv-photo:nth-child(5) { animation-delay: -4s; }
.aniv-photo:nth-child(6) { animation-delay: -0.5s; }

@keyframes anivFloatPhoto {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.aniv-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.aniv-photo:hover img {
    transform: scale(1.06);
}

.aniv-photo-cap {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.65rem 0.75rem;
    font-size: 0.8rem;
    font-family: var(--font-body, 'Poppins', sans-serif);
    background: linear-gradient(transparent, rgba(26, 10, 18, 0.88));
    color: #fff5f7;
    text-align: center;
}

/* Carrossel moderno - somente aniversário */
.page-aniversario .aniv-gallery-carousel {
    position: relative;
    max-width: 920px;
    margin: 2.2rem auto 0;
    padding: 0 3rem 2.5rem;
    overflow: hidden;
}

.page-aniversario .aniv-gallery-strip {
    display: flex;
    gap: 1rem;
    max-width: none;
    margin: 0;
    padding: 0;
    transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.page-aniversario .aniv-photo {
    min-width: calc(100% - 90px);
    height: min(74vh, 620px);
    aspect-ratio: auto;
    animation: none;
    opacity: 0.55;
    transform: scale(0.92);
    transition: transform 0.45s ease, opacity 0.45s ease;
}

.page-aniversario .aniv-photo img {
    object-fit: contain;
    background: rgba(12, 6, 26, 0.7);
}

.page-aniversario .aniv-photo.is-active {
    opacity: 1;
    transform: scale(1);
}

.page-aniversario .aniv-gallery-nav {
    position: absolute;
    top: calc(50% - 18px);
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(240, 214, 138, 0.35);
    background: rgba(23, 12, 44, 0.8);
    color: #f9f3ff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    z-index: 3;
    transition: transform 0.2s ease, background 0.2s ease;
}

.page-aniversario .aniv-gallery-nav:hover {
    transform: translateY(-50%) scale(1.06);
    background: rgba(122, 93, 206, 0.9);
}

.page-aniversario .aniv-gallery-prev {
    left: 0.4rem;
}

.page-aniversario .aniv-gallery-next {
    right: 0.4rem;
}

.page-aniversario .aniv-gallery-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.page-aniversario .aniv-gallery-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: 1px solid rgba(240, 214, 138, 0.28);
    background: rgba(255, 255, 255, 0.2);
    transition: all 0.25s ease;
}

.page-aniversario .aniv-gallery-dot.active {
    width: 28px;
    background: linear-gradient(135deg, #d6c27a, #bea1ff);
    border-color: transparent;
}

.aniv-footer-love {
    text-align: center;
    padding: 3rem 1.5rem 5rem;
    font-family: var(--font-display, 'Dancing Script', cursive);
    font-size: clamp(1.8rem, 5vw, 2.6rem);
    color: #f0d68a;
    text-shadow: 0 0 30px rgba(255, 107, 138, 0.35);
}

.aniv-footer-love span {
    display: block;
    font-family: var(--font-body, 'Poppins', sans-serif);
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 200, 215, 0.65);
    margin-top: 0.75rem;
}

/* Sparkles layer */
.aniv-sparkles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.aniv-sparkle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.8);
    animation: anivTwinkle var(--tw, 3s) ease-in-out infinite;
    opacity: 0;
}

@keyframes anivTwinkle {
    0%, 100% { opacity: 0; transform: scale(0.5); }
    50% { opacity: 0.95; transform: scale(1); }
}

/* Confetti */
.confetti-piece {
    position: fixed;
    top: -12px;
    width: 10px;
    height: 10px;
    z-index: 50;
    pointer-events: none;
    border-radius: 2px;
    animation: confettiFall linear forwards;
}

@keyframes confettiFall {
    to {
        transform: translateY(110vh) rotate(720deg);
        opacity: 0.85;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-aniversario,
    :is(.page-primeiro-mes, .page-segundo-mes),
    .aniv-title,
    .aniv-cake,
    .aniv-hero-glow,
    .aniv-photo,
    .aniv-scroll-hint,
    .aniv-music-label i {
        animation: none !important;
    }

    .page-aniversario,
    :is(.page-primeiro-mes, .page-segundo-mes) {
        background: #2d1220;
    }

    .page-segundo-mes {
        background: #151c2e !important;
    }

    .aniv-title {
        background: none;
        color: #fff5f7;
        -webkit-text-fill-color: #fff5f7;
    }
}

/* ========== Primeiro mês juntos (primeiro-mes-juntos.html) ========== */

/* Hero em destaque máximo — só nesta página */
:is(.page-primeiro-mes, .page-segundo-mes) .aniv-hero {
    padding: 5.25rem 1.25rem 3.5rem;
    gap: 0;
}

:is(.page-primeiro-mes, .page-segundo-mes) .aniv-hero-glow {
    width: min(96vw, 640px);
    height: min(96vw, 640px);
    filter: blur(48px);
}

:is(.page-primeiro-mes, .page-segundo-mes) .aniv-cake {
    font-size: clamp(3.75rem, 16vw, 7.25rem);
    margin-bottom: 1.25rem;
    line-height: 1;
}

:is(.page-primeiro-mes, .page-segundo-mes) .aniv-title {
    font-size: clamp(3rem, 12vw, 6rem);
    font-weight: 600;
    /* 1.06 cortava descendentes (ex.: “g” em “segundo”) com background-clip:text */
    line-height: 1.14;
    letter-spacing: -0.025em;
    margin-bottom: 1rem;
    max-width: min(18ch, 96vw);
    padding-block: 0.02em 0.14em;
    overflow: visible;
}

:is(.page-primeiro-mes, .page-segundo-mes) .aniv-subtitle {
    font-size: clamp(2.05rem, 7.5vw, 3.75rem);
    line-height: 1.3;
    max-width: min(38rem, 92vw);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0.75rem;
    text-shadow: 0 2px 28px rgba(0, 0, 0, 0.35);
}

:is(.page-primeiro-mes, .page-segundo-mes) .aniv-date {
    font-size: clamp(0.9rem, 2.4vw, 1.15rem);
    letter-spacing: 0.24em;
    margin-bottom: 2.5rem;
}

:is(.page-primeiro-mes, .page-segundo-mes) .mes-hero-music.aniv-music-card {
    max-width: min(36rem, 94vw);
    padding: 1.5rem 1.75rem;
}

:is(.page-primeiro-mes, .page-segundo-mes) .mes-hero-music .aniv-music-label {
    font-size: clamp(0.85rem, 2.6vw, 1rem);
    letter-spacing: 0.14em;
}

:is(.page-primeiro-mes, .page-segundo-mes) .mes-hero-music .aniv-music-note {
    font-size: clamp(0.95rem, 3vw, 1.12rem);
    line-height: 1.5;
    color: rgba(255, 230, 240, 0.82);
}

@media (min-width: 900px) {
    :is(.page-primeiro-mes, .page-segundo-mes) .aniv-title {
        max-width: none;
    }

    :is(.page-primeiro-mes, .page-segundo-mes) .aniv-subtitle {
        max-width: min(42rem, 88vw);
    }
}

/* Card da música — desktop: ícone + título inline; capa só no mobile (padrão Spotify da referência) */
:is(.page-primeiro-mes, .page-segundo-mes) .mes-hero-music__cover {
    display: none;
}

:is(.page-primeiro-mes, .page-segundo-mes) .mes-hero-music__label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    text-align: center;
    margin-bottom: 0;
}

:is(.page-primeiro-mes, .page-segundo-mes) .mes-now-playing-kicker {
    display: none;
}

:is(.page-primeiro-mes, .page-segundo-mes) .mes-hero-music__title-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.45rem;
}

:is(.page-primeiro-mes, .page-segundo-mes) .mes-hero-music__meta {
    display: inline;
}

:is(.page-primeiro-mes, .page-segundo-mes) .mes-hero-music__titles {
    display: inline;
}

/* ——— Mobile: aparência inspirada em Spotify (cores e romantismo atuais) ——— */
@media (max-width: 768px) {
    :is(.page-primeiro-mes, .page-segundo-mes) main {
        padding-bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px));
    }

    :is(.page-primeiro-mes, .page-segundo-mes) .aniv-header {
        padding-top: max(0.75rem, env(safe-area-inset-top, 0px));
        padding-left: max(1rem, env(safe-area-inset-left, 0px));
        padding-right: max(1rem, env(safe-area-inset-right, 0px));
    }

    :is(.page-primeiro-mes, .page-segundo-mes) .aniv-badge-top {
        font-size: 1.1rem;
    }

    :is(.page-primeiro-mes, .page-segundo-mes) .aniv-hero {
        min-height: min(100dvh, 100vh);
        padding: 4.75rem 1rem calc(2rem + env(safe-area-inset-bottom, 0px));
        justify-content: flex-start;
        padding-top: max(4.75rem, calc(3.5rem + env(safe-area-inset-top, 0px)));
    }

    :is(.page-primeiro-mes, .page-segundo-mes) .aniv-cake {
        font-size: clamp(3rem, 14vw, 5.5rem);
        margin-bottom: 0.85rem;
    }

    :is(.page-primeiro-mes, .page-segundo-mes) .aniv-title {
        font-size: clamp(2.35rem, 9vw, 4.25rem);
        line-height: 1.14;
        padding-block: 0.02em 0.12em;
        margin-bottom: 0.65rem;
    }

    :is(.page-primeiro-mes, .page-segundo-mes) .aniv-subtitle {
        font-size: clamp(1.45rem, 5.5vw, 2.35rem);
        margin-bottom: 0.5rem;
    }

    :is(.page-primeiro-mes, .page-segundo-mes) .aniv-date {
        margin-bottom: 1.5rem;
    }

    /* Card “now playing” — alinhado à referência: capa (imagem), glass, texto central */
    :is(.page-primeiro-mes, .page-segundo-mes) .mes-hero-music.aniv-music-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        max-width: 100%;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding: 1.25rem 1.15rem 1.15rem;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.07);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(255, 179, 198, 0.28);
        box-shadow:
            0 20px 48px rgba(0, 0, 0, 0.42),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    :is(.page-primeiro-mes, .page-segundo-mes) .mes-hero-music__cover {
        display: block;
        width: clamp(6.5rem, 36vw, 7.75rem);
        height: clamp(6.5rem, 36vw, 7.75rem);
        margin: 0 auto 1rem;
        object-fit: cover;
        object-position: center top;
        border-radius: 8px;
        box-shadow:
            0 12px 32px rgba(0, 0, 0, 0.45),
            0 0 0 2px rgba(240, 214, 138, 0.22);
        background: rgba(10, 4, 8, 0.5);
    }

    :is(.page-primeiro-mes, .page-segundo-mes) .mes-hero-music__label {
        width: 100%;
        max-width: 22rem;
        align-items: center;
        gap: 0.5rem;
    }

    :is(.page-primeiro-mes, .page-segundo-mes) .mes-now-playing-kicker {
        display: block;
        font-family: var(--font-body, 'Poppins', sans-serif);
        font-size: 0.65rem;
        font-weight: 600;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: rgba(240, 214, 138, 0.9);
    }

    :is(.page-primeiro-mes, .page-segundo-mes) .mes-hero-music__title-row {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.4rem 0.5rem;
        width: 100%;
    }

    :is(.page-primeiro-mes, .page-segundo-mes) .mes-hero-music__icon {
        display: block;
        margin-top: 0.2rem;
        font-size: 1rem;
        color: #ff6b8a;
        flex-shrink: 0;
    }

    :is(.page-primeiro-mes, .page-segundo-mes) .mes-hero-music__meta {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
        text-align: center;
    }

    :is(.page-primeiro-mes, .page-segundo-mes) .mes-hero-music__titles {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.35rem;
        width: 100%;
    }

    :is(.page-primeiro-mes, .page-segundo-mes) .mes-track-title-sep {
        display: none;
    }

    :is(.page-primeiro-mes, .page-segundo-mes) .mes-track-title-line {
        font-family: var(--font-body, 'Poppins', sans-serif);
        font-size: clamp(0.95rem, 3.8vw, 1.1rem);
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #fff8fb;
        line-height: 1.2;
        max-width: 100%;
    }

    :is(.page-primeiro-mes, .page-segundo-mes) .mes-track-artist-line {
        font-family: var(--font-body, 'Poppins', sans-serif);
        font-size: clamp(0.68rem, 2.8vw, 0.78rem);
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: rgba(255, 236, 242, 0.72);
        max-width: 100%;
        line-height: 1.35;
    }

    :is(.page-primeiro-mes, .page-segundo-mes) .mes-hero-music .aniv-music-note {
        width: 100%;
        max-width: 22rem;
        margin-top: 0.85rem !important;
        padding-top: 0.85rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        font-size: 0.84rem;
        line-height: 1.55;
        text-align: center;
        color: rgba(255, 230, 240, 0.82);
    }

    /* Seções como cards elevados (exceto carta cinematográfica) */
    :is(.page-primeiro-mes, .page-segundo-mes) .aniv-section:not(.mes-carta-section) {
        padding: 3rem 1.1rem;
        margin-left: 0.35rem;
        margin-right: 0.35rem;
        max-width: none;
        border-radius: 18px;
        background: rgba(0, 0, 0, 0.12);
        border: 1px solid rgba(255, 179, 198, 0.08);
        margin-bottom: 0.75rem;
    }

    /* Relógio: um único painel de vidro (evita card duplo com a seção) */
    :is(.page-primeiro-mes, .page-segundo-mes) .mes-love-clock-section.aniv-section:not(.mes-carta-section) {
        background: transparent;
        border: none;
        box-shadow: none;
        padding-top: 2.25rem;
        padding-bottom: 2.25rem;
    }

    :is(.page-primeiro-mes, .page-segundo-mes) .aniv-gallery-strip {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        gap: 0.75rem;
    }

    :is(.page-primeiro-mes, .page-segundo-mes) .aniv-photo {
        border-radius: 12px;
    }

    :is(.page-primeiro-mes, .page-segundo-mes) .mes-lyrics-panel .aniv-section {
        margin-left: 0;
        margin-right: 0;
        border-radius: 0;
        border: none;
        background: transparent;
    }

    /* Botões flutuantes acima do mini-player da playlist */
    :is(.page-primeiro-mes, .page-segundo-mes) .mes-toggle-song-lyrics {
        bottom: calc(5.35rem + env(safe-area-inset-bottom, 0px));
        left: 50%;
        transform: translateX(-50%);
        max-width: calc(100vw - 5.75rem);
        border-radius: 12px;
        font-size: 0.8rem;
        padding: 0.65rem 1rem;
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
    }

    :is(.page-primeiro-mes, .page-segundo-mes) .mes-toggle-song-lyrics:hover {
        transform: translateX(-50%) scale(1.02);
    }

    :is(.page-primeiro-mes, .page-segundo-mes) .mes-audio-fab {
        bottom: calc(5.35rem + env(safe-area-inset-bottom, 0px));
        right: max(0.75rem, env(safe-area-inset-right, 0px));
        width: 48px;
        height: 48px;
        border-radius: 12px;
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
    }

    :is(.page-primeiro-mes, .page-segundo-mes) .aniv-footer-love {
        padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    }
}

/* —— Relógio do nosso amor (primeiro mês) —— */
:is(.page-primeiro-mes, .page-segundo-mes) .mes-love-clock-section.aniv-section {
    max-width: min(52rem, calc(100% - 2rem));
}

.mes-love-clock {
    position: relative;
    margin: 0 auto;
    padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.25rem, 3vw, 2.5rem);
    border-radius: clamp(20px, 4vw, 28px);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 45%, rgba(0, 0, 0, 0.12) 100%);
    border: 1px solid rgba(255, 179, 198, 0.22);
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset,
        0 1px 0 rgba(255, 255, 255, 0.08) inset;
    overflow: hidden;
    isolation: isolate;
}

.mes-love-clock__ambient {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.mes-love-clock__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(48px);
    opacity: 0.55;
    animation: mesLoveOrbPulse 5s ease-in-out infinite;
}

.mes-love-clock__orb--a {
    width: min(72%, 340px);
    height: min(72%, 340px);
    left: -12%;
    top: -25%;
    background: radial-gradient(circle, rgba(255, 107, 138, 0.55) 0%, transparent 70%);
}

.mes-love-clock__orb--b {
    width: min(65%, 300px);
    height: min(65%, 300px);
    right: -18%;
    bottom: -30%;
    background: radial-gradient(circle, rgba(240, 214, 138, 0.45) 0%, transparent 70%);
    animation-delay: -2.2s;
}

@keyframes mesLoveOrbPulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.45;
    }
    50% {
        transform: scale(1.06);
        opacity: 0.65;
    }
}

.mes-love-clock__heart {
    position: absolute;
    left: var(--x);
    top: var(--h);
    font-size: clamp(0.75rem, 2.2vw, 1rem);
    opacity: 0.35;
    animation: mesLoveHeartFloat var(--d, 7s) ease-in-out infinite;
    text-shadow: 0 0 14px rgba(255, 179, 198, 0.5);
}

@keyframes mesLoveHeartFloat {
    0%,
    100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-10px) scale(1.05);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mes-love-clock__orb,
    .mes-love-clock__heart {
        animation: none !important;
    }

    .mes-love-clock__heart {
        opacity: 0.28;
    }
}

.mes-love-clock__kicker,
.mes-love-clock__title,
.mes-love-clock__lede,
.mes-love-clock__grid,
.mes-love-clock__quote,
.mes-love-clock__summary {
    position: relative;
    z-index: 1;
}

.mes-love-clock__kicker {
    margin-bottom: 0.65rem;
}

.mes-love-clock__title {
    font-family: var(--font-heading, 'Playfair Display', serif);
    font-size: clamp(1.85rem, 5vw, 2.5rem);
    font-weight: 500;
    text-align: center;
    margin: 0 0 0.75rem;
    letter-spacing: 0.02em;
    background: linear-gradient(105deg, #fff8fb 0%, #ffd6e0 40%, #f0d68a 75%, #ffb3c6 100%);
    background-size: 180% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.mes-love-clock__lede {
    font-family: var(--font-body, 'Poppins', sans-serif);
    font-size: clamp(0.92rem, 2.8vw, 1.02rem);
    line-height: 1.65;
    text-align: center;
    color: rgba(255, 236, 242, 0.82);
    max-width: 36rem;
    margin: 0 auto 1.75rem;
}

.mes-love-clock__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(0.65rem, 2vw, 1rem);
    max-width: 38rem;
    margin: 0 auto 1.75rem;
}

@media (min-width: 640px) {
    .mes-love-clock__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.mes-love-clock__unit {
    position: relative;
    text-align: center;
    padding: clamp(1rem, 3vw, 1.35rem) 0.5rem;
    border-radius: 16px;
    background: rgba(10, 4, 8, 0.35);
    border: 1px solid rgba(255, 214, 224, 0.18);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.mes-love-clock__unit:hover {
    border-color: rgba(240, 214, 138, 0.35);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.mes-love-clock__value {
    display: block;
    font-family: var(--font-body, 'Poppins', sans-serif);
    font-weight: 700;
    font-size: clamp(1.85rem, 7vw, 2.65rem);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    color: #fff8fb;
    text-shadow: 0 2px 24px rgba(255, 107, 138, 0.25);
}

.mes-love-clock__unit-label {
    display: block;
    margin-top: 0.45rem;
    font-family: var(--font-body, 'Poppins', sans-serif);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(240, 214, 138, 0.85);
}

.mes-love-clock__quote {
    font-family: var(--font-heading, 'Playfair Display', serif);
    font-size: clamp(1.05rem, 3vw, 1.25rem);
    font-style: italic;
    text-align: center;
    color: rgba(255, 245, 250, 0.92);
    margin: 0 0 1rem;
    line-height: 1.5;
}

.mes-love-clock__summary {
    font-family: var(--font-body, 'Poppins', sans-serif);
    font-size: clamp(0.86rem, 2.5vw, 0.95rem);
    line-height: 1.65;
    text-align: center;
    color: rgba(255, 230, 240, 0.78);
    max-width: 34rem;
    margin: 0 auto;
}

/* —— Contador estilo calendário (segundo mês) —— */
.mes-love-clock--calendar {
    overflow: visible;
    background:
        linear-gradient(165deg, rgba(18, 32, 58, 0.92) 0%, rgba(12, 22, 42, 0.88) 40%, rgba(20, 14, 38, 0.9) 100%);
    border: 1px solid rgba(130, 190, 255, 0.28);
    box-shadow:
        0 28px 72px rgba(0, 8, 24, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset,
        0 1px 0 rgba(255, 255, 255, 0.07) inset;
}

.mes-love-clock--calendar .mes-love-clock__orb--a {
    background: radial-gradient(circle, rgba(100, 180, 255, 0.45) 0%, transparent 72%);
}

.mes-love-clock--calendar .mes-love-clock__orb--b {
    background: radial-gradient(circle, rgba(255, 150, 200, 0.32) 0%, transparent 70%);
}

.mes-love-clock--calendar .mes-love-clock__title {
    background: linear-gradient(105deg, #f4fbff 0%, #b8dcff 38%, #e8c9ff 72%, #ffd6ea 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.mes-love-clock--calendar .mes-love-clock__lede {
    color: rgba(210, 228, 255, 0.88);
}

.mes-love-clock--calendar .mes-love-clock__kicker,
.mes-love-clock--calendar .mes-love-clock__title,
.mes-love-clock--calendar .mes-love-clock__lede,
.mes-love-clock--calendar .mes-cal-board,
.mes-love-clock--calendar .mes-love-clock__quote,
.mes-love-clock--calendar .mes-love-clock__summary {
    position: relative;
    z-index: 1;
}

.mes-cal-board {
    max-width: 42rem;
    margin: 0 auto 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mes-cal-spine {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 1.1rem;
    margin-bottom: -0.55rem;
    padding: 0 0.5rem;
}

.mes-cal-spine__wire {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -35%);
    width: min(88%, 22rem);
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(200, 165, 90, 0.55), rgba(230, 210, 140, 0.85), rgba(200, 165, 90, 0.55), transparent);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
    opacity: 0.9;
}

.mes-cal-spine__ring {
    position: relative;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 3px solid rgba(212, 175, 95, 0.95);
    background: radial-gradient(circle at 30% 30%, #fff8e8, #c9a227 55%, #6a5218 100%);
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.25) inset;
}

.mes-cal-sheet {
    position: relative;
    width: 100%;
    padding: clamp(1.35rem, 4vw, 1.85rem) clamp(1rem, 3vw, 1.5rem) clamp(1.15rem, 3vw, 1.45rem);
    border-radius: clamp(18px, 3.5vw, 26px);
    background:
        linear-gradient(180deg, rgba(255, 252, 248, 0.97) 0%, rgba(245, 248, 255, 0.94) 42%, rgba(232, 240, 255, 0.92) 100%);
    box-shadow:
        0 18px 48px rgba(0, 10, 30, 0.35),
        0 0 0 1px rgba(80, 120, 180, 0.12) inset,
        0 1px 0 rgba(255, 255, 255, 0.85) inset;
}

.mes-cal-sheet__today {
    margin: 0 0 1.1rem;
    text-align: center;
    font-family: var(--font-body, 'Poppins', sans-serif);
    font-size: clamp(0.78rem, 2.2vw, 0.9rem);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(45, 70, 110, 0.72);
    line-height: 1.45;
    text-wrap: balance;
}

.mes-love-clock__grid--calendar {
    max-width: none;
    margin: 0;
    gap: clamp(0.55rem, 2vw, 0.95rem);
}

.mes-love-clock--calendar .mes-love-clock__grid--calendar .mes-love-clock__unit {
    padding: clamp(0.85rem, 2.5vw, 1.15rem) 0.45rem;
    border-radius: 14px;
    background: linear-gradient(165deg, rgba(14, 26, 48, 0.94) 0%, rgba(8, 14, 32, 0.96) 100%);
    border: 1px solid rgba(120, 185, 255, 0.22);
    box-shadow:
        0 6px 22px rgba(0, 6, 20, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.mes-love-clock--calendar .mes-love-clock__grid--calendar .mes-love-clock__unit:hover {
    border-color: rgba(200, 225, 255, 0.38);
    box-shadow:
        0 10px 30px rgba(0, 20, 50, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.mes-cal-cell__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(3.1rem, 12vw, 4.1rem);
}

/* Folhas do calendário — virada em 3D (dia / hora / minuto) */
.mes-cal-cell--flip {
    overflow: visible;
}

.mes-cal-cell__inner--flip {
    display: block;
    width: 100%;
    min-height: clamp(3.25rem, 12vw, 4.35rem);
}

.mes-cal-flip {
    perspective: 760px;
    width: 100%;
    transform-style: preserve-3d;
}

.mes-cal-flip__inner {
    position: relative;
    min-height: clamp(3.25rem, 12vw, 4.35rem);
    transform-style: preserve-3d;
    transform-origin: top center;
    transition: transform 0.82s cubic-bezier(0.42, 0, 0.22, 1);
}

.mes-cal-flip__inner--no-anim {
    transition: none !important;
}

.mes-cal-flip__inner--turned {
    transform: rotateX(-180deg);
}

.mes-cal-flip__face {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(3.25rem, 12vw, 4.35rem);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(26, 42, 72, 0.45) 0%, rgba(8, 14, 32, 0.88) 100%);
}

.mes-cal-flip__face--front {
    position: relative;
    z-index: 1;
}

.mes-cal-flip__face--back {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    transform: rotateX(180deg);
    transform-origin: top center;
}

.mes-cal-cell--turning {
    border-color: rgba(200, 230, 255, 0.45) !important;
    box-shadow:
        0 14px 40px rgba(40, 120, 220, 0.28),
        0 0 36px rgba(255, 190, 210, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

.mes-love-clock--calendar .mes-love-clock__value {
    font-family: var(--font-heading, 'Playfair Display', serif);
    font-weight: 600;
    font-size: clamp(1.95rem, 7.5vw, 2.85rem);
    letter-spacing: 0.02em;
    color: #f8fbff;
    text-shadow:
        0 2px 20px rgba(100, 170, 255, 0.35),
        0 1px 0 rgba(0, 0, 0, 0.25);
}

.mes-love-clock--calendar .mes-love-clock__unit-label {
    color: rgba(190, 220, 255, 0.82);
    letter-spacing: 0.16em;
}

.mes-love-clock--calendar .mes-love-clock__summary {
    color: rgba(200, 220, 255, 0.78);
}

.mes-love-clock--calendar .mes-love-clock__quote {
    color: rgba(200, 228, 255, 0.9);
}

@media (max-width: 540px) {
    .mes-cal-spine {
        gap: 0.72rem;
    }

    .mes-cal-spine__ring {
        width: 11px;
        height: 11px;
        border-width: 2px;
    }

    .mes-cal-sheet__today {
        letter-spacing: 0.04em;
        font-size: 0.72rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mes-cal-flip__inner {
        transition: none !important;
    }

    .mes-cal-flip__inner--turned {
        transform: none !important;
    }
}

.mes-sound-gate {
    position: fixed;
    inset: 0;
    /* Acima do player/modal da playlist (mobile) para o toque não “sumir” por stacking. */
    z-index: 10060;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.5rem;
    background: rgba(26, 10, 18, 0.92);
    backdrop-filter: blur(10px);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.45s ease, visibility 0.45s ease;
}

.mes-sound-gate.is-open {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    /* WebKit: composição própria reduz falhas de hit-test com backdrop-filter no fullscreen. */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.mes-sound-gate-btn {
    position: relative;
    z-index: 2;
    pointer-events: auto;
    font-family: var(--font-body, 'Poppins', sans-serif);
    font-size: 1.05rem;
    font-weight: 600;
    padding: 1rem 1.75rem;
    border: none;
    border-radius: var(--radius-full, 9999px);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    color: #1a0a12;
    background: linear-gradient(135deg, #fff5c2, #ffd6e0);
    box-shadow: 0 8px 32px rgba(255, 214, 140, 0.45);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mes-sound-gate-btn:hover {
    transform: scale(1.04);
}

.mes-sound-gate-hint {
    max-width: 280px;
    text-align: center;
    font-size: 0.88rem;
    color: rgba(255, 230, 240, 0.75);
    line-height: 1.5;
}

.mes-sound-gate-panel {
    position: relative;
    z-index: 10;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    transition:
        opacity 1s cubic-bezier(0.33, 0, 0.25, 1),
        transform 1.15s cubic-bezier(0.33, 0, 0.2, 1),
        filter 1s cubic-bezier(0.33, 0, 0.25, 1);
}

.mes-sound-gate--storming .mes-sound-gate-panel {
    opacity: 0;
    transform: scale(0.94) translateY(6px);
    filter: blur(5px);
    pointer-events: none;
}

.mes-storm-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse 80% 60% at 50% 45%, rgba(60, 20, 40, 0.4) 0%, rgba(12, 4, 10, 0.97) 65%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.75s cubic-bezier(0.33, 0, 0.25, 1);
}

.mes-storm-overlay[hidden] {
    display: none !important;
}

.mes-sound-gate--storming .mes-storm-overlay {
    pointer-events: auto;
}

.mes-storm-overlay.is-active {
    opacity: 1;
    animation: mesStormScreenSway 5.2s cubic-bezier(0.37, 0, 0.25, 1) forwards;
}

.mes-storm-sky {
    position: absolute;
    inset: -20%;
    border-radius: 50%;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0.35;
}

.mes-storm-sky--a {
    background: conic-gradient(
        from 0deg,
        transparent,
        rgba(255, 107, 138, 0.25),
        rgba(240, 214, 138, 0.2),
        transparent,
        rgba(255, 180, 200, 0.15),
        transparent
    );
    animation: mesStormSkySpin 5.5s linear infinite;
}

.mes-storm-sky--b {
    background: conic-gradient(
        from 180deg,
        rgba(255, 255, 255, 0.08),
        transparent,
        rgba(212, 168, 83, 0.18),
        transparent,
        rgba(255, 107, 138, 0.12),
        transparent
    );
    animation: mesStormSkySpin 8s linear infinite reverse;
    opacity: 0.5;
}

@keyframes mesStormSkySpin {
    to { transform: rotate(360deg); }
}

.mes-storm-vortex-wrap {
    position: relative;
    width: min(120vmin, 520px);
    height: min(120vmin, 520px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mes-storm-overlay.is-active .mes-storm-vortex-wrap {
    animation: mesStormVortexZoom 5.2s cubic-bezier(0.33, 0, 0.2, 1) forwards;
}

@keyframes mesStormVortexZoom {
    0% {
        transform: scale(0.1) rotate(0deg);
        opacity: 0;
    }
    22% {
        opacity: 1;
    }
    52% {
        transform: scale(1) rotate(320deg);
        opacity: 1;
    }
    78% {
        opacity: 0.9;
        transform: scale(1.85) rotate(620deg);
    }
    100% {
        transform: scale(2.35) rotate(780deg);
        opacity: 0;
    }
}

.mes-storm-vortex {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: repeating-conic-gradient(
        from 0deg,
        rgba(255, 107, 138, 0.12) 0deg 14deg,
        rgba(26, 10, 18, 0.5) 14deg 28deg,
        rgba(240, 214, 138, 0.1) 28deg 42deg,
        rgba(26, 10, 18, 0.45) 42deg 56deg
    );
    -webkit-mask-image: radial-gradient(circle, #000 12%, transparent 68%);
    mask-image: radial-gradient(circle, #000 12%, transparent 68%);
    animation: mesStormVortexSpin 1.65s linear infinite;
    filter: blur(0.5px);
    box-shadow:
        0 0 60px rgba(255, 107, 138, 0.35),
        inset 0 0 80px rgba(0, 0, 0, 0.5);
}

@keyframes mesStormVortexSpin {
    to { transform: rotate(360deg); }
}

@keyframes mesStormVortexSpinCcw {
    to { transform: scale(0.72) rotate(-360deg); }
}

.mes-storm-vortex--ccw {
    animation: mesStormVortexSpinCcw 1.35s linear infinite;
    opacity: 0.75;
}

.mes-storm-eye {
    position: absolute;
    width: 18%;
    height: 18%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 250, 245, 0.95) 0%, rgba(255, 214, 224, 0.35) 45%, transparent 70%);
    box-shadow:
        0 0 40px rgba(255, 255, 255, 0.5),
        0 0 80px rgba(240, 214, 138, 0.35);
    animation: mesStormEyePulse 0.75s cubic-bezier(0.45, 0, 0.35, 1) infinite alternate;
    z-index: 2;
}

@keyframes mesStormEyePulse {
    0% { transform: scale(0.88); opacity: 0.75; }
    100% { transform: scale(1.05); opacity: 1; }
}

.mes-storm-debris {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
}

.mes-storm-flake {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: clamp(0.65rem, 2.8vw, 1.35rem);
    line-height: 1;
    opacity: 0;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
    animation: mesStormSpiral var(--storm-dur, 3.2s) cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
    animation-delay: var(--storm-delay, 0s);
}

@keyframes mesStormSpiral {
    0% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            rotate(var(--storm-angle, 0deg))
            translateX(var(--storm-r0, 18%))
            scale(0.25);
    }
    22% {
        opacity: 1;
    }
    100% {
        opacity: 0.85;
        transform:
            translate(-50%, -50%)
            rotate(calc(var(--storm-angle, 0deg) + 520deg))
            translateX(min(95vw, 420px))
            scale(1.08);
    }
}

.mes-storm-rain {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        -18deg,
        transparent,
        transparent 6px,
        rgba(255, 255, 255, 0.03) 6px,
        rgba(255, 255, 255, 0.03) 7px
    );
    background-size: 200% 200%;
    animation: mesStormRain 0.85s linear infinite;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}

.mes-storm-overlay.is-active .mes-storm-rain {
    opacity: 1;
}

@keyframes mesStormRain {
    to { background-position: 0 18px; }
}

.mes-storm-flash {
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 0;
    pointer-events: none;
    z-index: 5;
    mix-blend-mode: overlay;
}

.mes-storm-overlay.is-active .mes-storm-flash {
    animation: mesStormLightning 5.2s cubic-bezier(0.33, 0, 0.2, 1) forwards;
}

@keyframes mesStormLightning {
    0%, 100% { opacity: 0; }
    4% { opacity: 0; }
    4.8% { opacity: 0.14; }
    5.6% { opacity: 0; }
    34% { opacity: 0; }
    34.6% { opacity: 0.22; }
    35.4% { opacity: 0.05; }
    36% { opacity: 0; }
    58% { opacity: 0; }
    58.5% { opacity: 0.12; }
    59.2% { opacity: 0; }
}

.mes-storm-phrase {
    position: absolute;
    bottom: clamp(12%, 18vh, 22%);
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    margin: 0;
    padding: 0 1rem;
    font-family: var(--font-display, 'Dancing Script', cursive);
    font-size: clamp(1.5rem, 5vw, 2.25rem);
    color: rgba(255, 248, 252, 0.95);
    text-shadow:
        0 0 24px rgba(255, 107, 138, 0.6),
        0 4px 20px rgba(0, 0, 0, 0.6);
    opacity: 0;
    text-align: center;
    max-width: 90vw;
    pointer-events: none;
}

.mes-storm-overlay.is-active .mes-storm-phrase {
    animation: mesStormPhrase 5.2s cubic-bezier(0.33, 0, 0.25, 1) forwards;
}

@keyframes mesStormPhrase {
    0%, 14% { opacity: 0; transform: translateX(-50%) translateY(16px) scale(0.94); }
    28% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
    82% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-12px) scale(1.01); }
}

@keyframes mesStormScreenSway {
    0%, 100% { transform: translate3d(0, 0, 0); }
    18% { transform: translate3d(0.8px, -0.4px, 0); }
    36% { transform: translate3d(-0.6px, 0.5px, 0); }
    54% { transform: translate3d(0.5px, 0.7px, 0); }
    72% { transform: translate3d(-0.4px, -0.5px, 0); }
    88% { transform: translate3d(0.3px, 0.2px, 0); }
}

.mes-sound-gate-btn:disabled {
    opacity: 0.65;
    cursor: wait;
    transform: none;
}

/* -------------------------------------------------------------------------
   Segundo mês — tela de som + “tempestade” romântica (rosa / vermelho suave)
   ------------------------------------------------------------------------- */
.mes-sound-gate--romantic-rose {
    background:
        radial-gradient(ellipse 130% 90% at 50% -10%, rgba(255, 210, 220, 0.75) 0%, transparent 52%),
        radial-gradient(ellipse 80% 60% at 15% 85%, rgba(255, 160, 170, 0.35) 0%, transparent 48%),
        radial-gradient(ellipse 70% 55% at 88% 75%, rgba(255, 182, 193, 0.4) 0%, transparent 46%),
        linear-gradient(168deg, #fff8fb 0%, #ffe8ef 28%, #ffd6e0 58%, #ffc9d4 100%);
    backdrop-filter: blur(14px);
}

.mes-sound-gate--romantic-rose::before {
    content: '';
    position: absolute;
    inset: -25%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 25% 30%, rgba(255, 192, 203, 0.45) 0%, transparent 42%),
        radial-gradient(circle at 78% 22%, rgba(255, 150, 160, 0.28) 0%, transparent 38%),
        radial-gradient(circle at 50% 95%, rgba(255, 228, 232, 0.5) 0%, transparent 45%);
    animation: mesRoseGateBreathe 7s ease-in-out infinite;
}

@keyframes mesRoseGateBreathe {
    0%,
    100% {
        opacity: 0.75;
        transform: scale(1) translate(0, 0);
    }
    50% {
        opacity: 1;
        transform: scale(1.04) translate(1%, -1%);
    }
}

.mes-sound-gate-floats {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.mes-sound-gate--romantic-rose .mes-sound-gate-floats .mes-sg-float {
    position: absolute;
    font-size: clamp(0.95rem, 3.8vw, 1.65rem);
    line-height: 1;
    opacity: 0.42;
    filter: drop-shadow(0 2px 10px rgba(220, 80, 110, 0.35));
    animation: mesSgFloatDrift 8s ease-in-out infinite;
}

.mes-sound-gate--romantic-rose .mes-sound-gate-floats .mes-sg-float:nth-child(1) {
    left: 6%;
    top: 14%;
    animation-duration: 6.8s;
    animation-delay: 0s;
}
.mes-sound-gate--romantic-rose .mes-sound-gate-floats .mes-sg-float:nth-child(2) {
    left: 82%;
    top: 10%;
    animation-duration: 7.4s;
    animation-delay: 0.4s;
}
.mes-sound-gate--romantic-rose .mes-sound-gate-floats .mes-sg-float:nth-child(3) {
    left: 14%;
    top: 72%;
    animation-duration: 7.1s;
    animation-delay: 0.2s;
}
.mes-sound-gate--romantic-rose .mes-sound-gate-floats .mes-sg-float:nth-child(4) {
    left: 88%;
    top: 68%;
    animation-duration: 6.5s;
    animation-delay: 0.6s;
}
.mes-sound-gate--romantic-rose .mes-sound-gate-floats .mes-sg-float:nth-child(5) {
    left: 48%;
    top: 8%;
    animation-duration: 8.2s;
    animation-delay: 0.1s;
}
.mes-sound-gate--romantic-rose .mes-sound-gate-floats .mes-sg-float:nth-child(6) {
    left: 4%;
    top: 44%;
    animation-duration: 7.6s;
    animation-delay: 0.8s;
}
.mes-sound-gate--romantic-rose .mes-sound-gate-floats .mes-sg-float:nth-child(7) {
    left: 92%;
    top: 38%;
    animation-duration: 6.9s;
    animation-delay: 0.3s;
}
.mes-sound-gate--romantic-rose .mes-sound-gate-floats .mes-sg-float:nth-child(8) {
    left: 28%;
    top: 22%;
    animation-duration: 7.9s;
    animation-delay: 0.5s;
}
.mes-sound-gate--romantic-rose .mes-sound-gate-floats .mes-sg-float:nth-child(9) {
    left: 62%;
    top: 18%;
    animation-duration: 6.6s;
    animation-delay: 0.7s;
}
.mes-sound-gate--romantic-rose .mes-sound-gate-floats .mes-sg-float:nth-child(10) {
    left: 36%;
    top: 82%;
    animation-duration: 8s;
    animation-delay: 0.15s;
}
.mes-sound-gate--romantic-rose .mes-sound-gate-floats .mes-sg-float:nth-child(11) {
    left: 72%;
    top: 78%;
    animation-duration: 7.2s;
    animation-delay: 0.45s;
}
.mes-sound-gate--romantic-rose .mes-sound-gate-floats .mes-sg-float:nth-child(12) {
    left: 52%;
    top: 52%;
    animation-duration: 6.4s;
    animation-delay: 0.9s;
    opacity: 0.28;
    font-size: clamp(0.75rem, 2.8vw, 1.1rem);
}

@keyframes mesSgFloatDrift {
    0%,
    100% {
        transform: translate(0, 0) rotate(-4deg) scale(1);
        opacity: 0.38;
    }
    35% {
        transform: translate(6px, -14px) rotate(5deg) scale(1.12);
        opacity: 0.72;
    }
    70% {
        transform: translate(-5px, 8px) rotate(-3deg) scale(1.04);
        opacity: 0.55;
    }
}

.mes-sound-gate--romantic-rose .mes-sound-gate-kicker {
    font-size: 1rem;
    font-weight: 600;
    color: #b84a62;
    margin-bottom: 0.25rem;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

.mes-sound-gate--romantic-rose .mes-sound-gate-hint:not(.mes-sound-gate-kicker) {
    max-width: 300px;
    color: rgba(120, 40, 58, 0.78);
}

.mes-sound-gate--romantic-rose .mes-sound-gate-panel {
    z-index: 10;
    padding: 1.35rem 1.5rem 1.5rem;
    border-radius: 1.75rem;
    background: rgba(255, 252, 253, 0.55);
    border: 1px solid rgba(255, 170, 185, 0.55);
    box-shadow:
        0 12px 48px rgba(200, 80, 100, 0.12),
        0 0 0 1px rgba(255, 255, 255, 0.65) inset,
        0 0 60px rgba(255, 182, 193, 0.35);
    backdrop-filter: blur(12px);
}

.mes-sound-gate--romantic-rose .mes-sound-gate-btn {
    color: #fffefc;
    background: linear-gradient(135deg, #e84d6b 0%, #ff7a9a 45%, #ffb3c6 100%);
    box-shadow:
        0 6px 28px rgba(220, 70, 95, 0.45),
        0 0 40px rgba(255, 150, 170, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
    animation: mesRoseBtnPulse 2.4s ease-in-out infinite;
}

.mes-sound-gate--romantic-rose .mes-sound-gate-btn:hover {
    box-shadow:
        0 8px 36px rgba(220, 70, 95, 0.5),
        0 0 48px rgba(255, 140, 165, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

@keyframes mesRoseBtnPulse {
    0%,
    100% {
        box-shadow:
            0 6px 28px rgba(220, 70, 95, 0.45),
            0 0 40px rgba(255, 150, 170, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.45);
    }
    50% {
        box-shadow:
            0 8px 36px rgba(220, 70, 95, 0.55),
            0 0 52px rgba(255, 130, 155, 0.5),
            inset 0 1px 0 rgba(255, 255, 255, 0.55);
    }
}

.mes-sound-gate--romantic-rose .mes-sound-gate-btn:disabled {
    animation: none;
}

.mes-sound-gate--romantic-rose .mes-storm-overlay {
    background:
        radial-gradient(ellipse 88% 68% at 50% 44%, rgba(255, 248, 250, 0.92) 0%, rgba(255, 220, 228, 0.75) 32%, rgba(255, 170, 185, 0.55) 58%, rgba(190, 70, 95, 0.72) 88%, rgba(120, 28, 48, 0.94) 100%);
}

.mes-sound-gate--romantic-rose .mes-storm-sky--a {
    background: conic-gradient(
        from 0deg,
        transparent,
        rgba(255, 182, 193, 0.45),
        rgba(255, 230, 235, 0.35),
        transparent,
        rgba(255, 140, 165, 0.38),
        transparent
    );
    opacity: 0.5;
}

.mes-sound-gate--romantic-rose .mes-storm-sky--b {
    background: conic-gradient(
        from 180deg,
        rgba(255, 255, 255, 0.35),
        transparent,
        rgba(255, 200, 210, 0.4),
        transparent,
        rgba(255, 105, 130, 0.22),
        transparent
    );
    opacity: 0.55;
}

.mes-sound-gate--romantic-rose .mes-storm-vortex {
    background: repeating-conic-gradient(
        from 0deg,
        rgba(255, 182, 193, 0.42) 0deg 14deg,
        rgba(255, 245, 248, 0.22) 14deg 28deg,
        rgba(255, 120, 140, 0.32) 28deg 42deg,
        rgba(255, 228, 232, 0.2) 42deg 56deg
    );
    box-shadow:
        0 0 70px rgba(255, 120, 145, 0.55),
        inset 0 0 90px rgba(255, 200, 210, 0.35);
    filter: blur(0.35px);
}

.mes-sound-gate--romantic-rose .mes-storm-vortex--ccw {
    opacity: 0.82;
}

.mes-sound-gate--romantic-rose .mes-storm-eye {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.98) 0%, rgba(255, 214, 224, 0.65) 42%, rgba(255, 160, 175, 0.25) 68%, transparent 78%);
    box-shadow:
        0 0 50px rgba(255, 255, 255, 0.75),
        0 0 90px rgba(255, 150, 170, 0.55),
        0 0 120px rgba(255, 105, 130, 0.25);
}

.mes-sound-gate--romantic-rose .mes-storm-rain {
    background-image: repeating-linear-gradient(
        -12deg,
        transparent,
        transparent 10px,
        rgba(255, 255, 255, 0.12) 10px,
        rgba(255, 255, 255, 0.12) 11px,
        transparent 11px,
        transparent 22px,
        rgba(255, 192, 203, 0.18) 22px,
        rgba(255, 192, 203, 0.18) 23px
    );
    opacity: 0;
    mix-blend-mode: soft-light;
}

.mes-sound-gate--romantic-rose .mes-storm-overlay.is-active .mes-storm-rain {
    opacity: 0.65;
}

.mes-sound-gate--romantic-rose .mes-storm-overlay.is-active .mes-storm-flash {
    background: radial-gradient(circle at 50% 45%, rgba(255, 240, 245, 0.95) 0%, rgba(255, 182, 193, 0.4) 45%, transparent 70%);
    mix-blend-mode: screen;
    animation: mesRoseSoftFlash 5.2s cubic-bezier(0.33, 0, 0.2, 1) forwards;
}

@keyframes mesRoseSoftFlash {
    0%,
    100% {
        opacity: 0;
    }
    5% {
        opacity: 0.18;
    }
    8% {
        opacity: 0;
    }
    36% {
        opacity: 0;
    }
    37% {
        opacity: 0.28;
    }
    39% {
        opacity: 0.06;
    }
    41% {
        opacity: 0;
    }
    61% {
        opacity: 0;
    }
    62% {
        opacity: 0.22;
    }
    64% {
        opacity: 0;
    }
}

.mes-sound-gate--romantic-rose .mes-storm-flake {
    text-shadow:
        0 0 14px rgba(255, 255, 255, 0.85),
        0 0 22px rgba(255, 160, 180, 0.65),
        0 0 32px rgba(255, 105, 130, 0.35);
}

.mes-sound-gate--romantic-rose .mes-storm-phrase {
    color: #fffafb;
    text-shadow:
        0 0 24px rgba(255, 220, 230, 0.95),
        0 0 40px rgba(255, 150, 170, 0.55),
        0 1px 3px rgba(70, 18, 32, 0.55),
        0 4px 28px rgba(140, 40, 65, 0.35);
}

.mes-lyrics-wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1.5rem 4rem;
}

.mes-lyrics-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 1.75rem;
}

.mes-lyrics-toolbar button {
    font-family: var(--font-body, 'Poppins', sans-serif);
    font-size: 0.82rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full, 9999px);
    border: 1px solid rgba(255, 179, 198, 0.35);
    background: rgba(255, 255, 255, 0.06);
    color: #ffe8ef;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.mes-lyrics-toolbar button:hover,
.mes-lyrics-toolbar button[aria-pressed="true"] {
    background: rgba(255, 107, 138, 0.25);
    border-color: rgba(240, 214, 138, 0.5);
}

.mes-lyrics-toolbar[hidden] {
    display: none;
}

.mes-lyrics--mono-pt .mes-lyrics-stanza .mes-lyrics-pt {
    border-top: none;
    padding-top: 0;
}

.mes-lyrics-disclaimer {
    font-size: 0.78rem;
    color: rgba(255, 220, 230, 0.55);
    text-align: center;
    margin-bottom: 1.5rem;
    line-height: 1.45;
}

.mes-lyrics {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.mes-lyrics-stanza {
    padding: 1.1rem 1.15rem;
    border-radius: var(--radius-md, 12px);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 179, 198, 0.12);
}

.mes-lyrics-stanza p {
    margin: 0;
    line-height: 1.65;
    font-size: 0.98rem;
}

.mes-lyrics-stanza p + p {
    margin-top: 0.65rem;
}

.mes-lyrics-en {
    font-family: var(--font-heading, 'Playfair Display', Georgia, serif);
    color: #fff8fb;
    font-style: italic;
}

.mes-lyrics-pt {
    font-family: var(--font-body, 'Poppins', sans-serif);
    color: rgba(255, 214, 224, 0.92);
    padding-top: 0.35rem;
    border-top: 1px solid rgba(240, 214, 138, 0.2);
}

.mes-lyrics[data-view="en"] .mes-lyrics-pt {
    display: none;
}

.mes-lyrics[data-view="en"] .mes-lyrics-en {
    border-top: none;
    padding-top: 0;
}

.mes-lyrics[data-view="pt"] .mes-lyrics-en {
    display: none;
}

.mes-lyrics[data-view="pt"] .mes-lyrics-pt {
    border-top: none;
    padding-top: 0;
}

@media (min-width: 768px) {
    .mes-lyrics[data-view="both"] .mes-lyrics-stanza {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem 1.5rem;
        align-items: start;
    }

    .mes-lyrics[data-view="both"] .mes-lyrics-en {
        padding-right: 0.5rem;
    }

    .mes-lyrics[data-view="both"] .mes-lyrics-pt {
        border-top: none;
        padding-top: 0;
        border-left: 1px solid rgba(240, 214, 138, 0.2);
        padding-left: 1.25rem;
    }
}

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

    .mes-sound-gate-panel {
        transition: none;
    }

    .mes-sound-gate--romantic-rose::before,
    .mes-sound-gate--romantic-rose .mes-sg-float,
    .mes-sound-gate--romantic-rose .mes-sound-gate-btn {
        animation: none !important;
    }

    .mes-storm-overlay.is-active,
    .mes-storm-sky--a,
    .mes-storm-sky--b,
    .mes-storm-overlay.is-active .mes-storm-vortex-wrap,
    .mes-storm-vortex,
    .mes-storm-vortex--ccw,
    .mes-storm-eye,
    .mes-storm-overlay.is-active .mes-storm-rain,
    .mes-storm-overlay.is-active .mes-storm-flash,
    .mes-storm-overlay.is-active .mes-storm-phrase,
    .mes-storm-flake {
        animation: none !important;
    }

    .mes-storm-overlay.is-active {
        opacity: 1;
        transform: none;
    }
}

/* Carta em ritmo (karaokê), player invisível, letra opcional */
.mes-hero-music > audio {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.mes-hero-music {
    position: relative;
}

.mes-hero-music-note {
    font-size: 0.88rem;
    color: rgba(255, 230, 240, 0.7);
    margin: 0 0 0.5rem;
    line-height: 1.45;
}

.mes-carta-section .mes-carta-intro {
    max-width: 520px;
    margin: 0 auto 1.75rem;
    text-align: center;
    font-size: 0.95rem;
    color: rgba(255, 220, 230, 0.8);
}

.mes-carta-karaoke {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 0.25rem;
}

.mes-carta-bar {
    height: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
    margin-bottom: 1.75rem;
}

.mes-carta-bar-fill {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, #ff6b8a, #f0d68a);
    transition: width 0.2s linear;
}

.mes-carta-stage {
    min-height: clamp(7rem, 22vw, 11rem);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.25rem 1rem;
    border-radius: var(--radius-lg, 20px);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 179, 198, 0.18);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.2);
}

.mes-carta-line {
    margin: 0;
    font-family: var(--font-body, 'Poppins', sans-serif);
    font-size: clamp(1.05rem, 3.8vw, 1.35rem);
    font-weight: 400;
    line-height: 1.65;
    color: #fff8fb;
    text-wrap: balance;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.mes-carta-line--in {
    opacity: 1;
    transform: translateY(0);
}

.mes-carta-static {
    max-width: 640px;
    margin: 0 auto;
}

/* Carta — palco cinematográfico (primeiro mês) */
.mes-carta-section--cinematic.aniv-section {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: clamp(4rem, 12vw, 7rem) clamp(1.25rem, 4vw, 2.5rem) clamp(5rem, 14vw, 8rem);
    min-height: min(92vh, 56rem);
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
}

.mes-carta-cinematic-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.mes-carta-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.55;
    animation: mesCartaGlowDrift 14s ease-in-out infinite;
}

.mes-carta-glow--1 {
    width: min(70vw, 420px);
    height: min(70vw, 420px);
    top: -8%;
    left: -12%;
    background: radial-gradient(circle, rgba(255, 107, 138, 0.5) 0%, transparent 68%);
}

.mes-carta-glow--2 {
    width: min(55vw, 340px);
    height: min(55vw, 340px);
    bottom: -5%;
    right: -8%;
    background: radial-gradient(circle, rgba(240, 214, 138, 0.45) 0%, transparent 65%);
    animation-delay: -4.5s;
    animation-duration: 18s;
}

.mes-carta-glow--3 {
    width: min(45vw, 280px);
    height: min(45vw, 280px);
    top: 38%;
    right: 6%;
    left: auto;
    background: radial-gradient(circle, rgba(180, 100, 160, 0.35) 0%, transparent 70%);
    animation-delay: -7s;
    animation-duration: 20s;
}

@keyframes mesCartaGlowDrift {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
    33% { transform: translate(4%, 3%) scale(1.06); opacity: 0.65; }
    66% { transform: translate(-3%, 2%) scale(0.96); opacity: 0.55; }
}

.mes-carta-light-leak {
    position: absolute;
    top: -20%;
    width: 45%;
    height: 120%;
    opacity: 0.12;
    filter: blur(40px);
    animation: mesLightLeak 10s ease-in-out infinite;
}

.mes-carta-light-leak--l {
    left: -15%;
    background: linear-gradient(100deg, rgba(255, 220, 200, 0.9) 0%, transparent 75%);
    animation-delay: -2s;
}

.mes-carta-light-leak--r {
    right: -15%;
    background: linear-gradient(260deg, rgba(255, 180, 210, 0.85) 0%, transparent 75%);
    animation-delay: -5s;
}

@keyframes mesLightLeak {
    0%, 100% { opacity: 0.08; }
    50% { opacity: 0.18; }
}

.mes-carta-vignette {
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 120px 40px rgba(10, 4, 8, 0.55);
    border-radius: 0;
}

.mes-carta-grain {
    position: absolute;
    inset: 0;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    pointer-events: none;
    animation: mesGrainShift 0.4s steps(2) infinite;
}

@keyframes mesGrainShift {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-2%, -2%); }
}

.mes-carta-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 52rem;
    margin: 0 auto;
}

.mes-carta-section--cinematic .mes-carta-label {
    margin-bottom: 0.85rem;
    letter-spacing: 0.28em;
}

.mes-carta-title {
    font-size: clamp(2rem, 5.5vw, 3.15rem) !important;
    line-height: 1.2 !important;
    text-shadow:
        0 2px 24px rgba(0, 0, 0, 0.45),
        0 0 40px rgba(255, 107, 138, 0.15);
    margin-bottom: 0 !important;
}

.mes-carta-title-line {
    width: min(12rem, 55%);
    height: 4px;
    margin: 1.75rem auto 2.5rem;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 107, 138, 0.4) 15%,
        #f0d68a 45%,
        #ff8fab 70%,
        transparent
    );
    background-size: 200% 100%;
    animation: mesTitleLineShine 5s ease-in-out infinite;
    box-shadow: 0 0 20px rgba(240, 214, 138, 0.35);
}

@keyframes mesTitleLineShine {
    0%, 100% { background-position: 0% center; }
    50% { background-position: 100% center; }
}

.mes-carta-section--cinematic .mes-carta-static {
    max-width: 42rem;
}

.mes-carta-section--cinematic .mes-carta-static.aniv-prose {
    font-size: clamp(1.12rem, 2.4vw, 1.28rem);
    line-height: 1.95;
    color: rgba(255, 248, 252, 0.97);
    text-align: left;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.mes-carta-section--cinematic .mes-carta-static.aniv-prose p {
    margin-top: 0;
    margin-bottom: 0;
    padding: 1.15rem 1.35rem;
    border-radius: 1rem;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.09) 0%,
        rgba(30, 12, 22, 0.55) 100%
    );
    border: 1px solid rgba(255, 179, 198, 0.22);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    animation: mesCartaParaIn 0.9s ease backwards;
}

.mes-carta-section--cinematic .mes-carta-static.aniv-prose p:nth-child(1) { animation-delay: 0.05s; }
.mes-carta-section--cinematic .mes-carta-static.aniv-prose p:nth-child(2) { animation-delay: 0.15s; }
.mes-carta-section--cinematic .mes-carta-static.aniv-prose p:nth-child(3) { animation-delay: 0.25s; }
.mes-carta-section--cinematic .mes-carta-static.aniv-prose p:nth-child(4) { animation-delay: 0.35s; }
.mes-carta-section--cinematic .mes-carta-static.aniv-prose p:nth-child(5) { animation-delay: 0.45s; }

@keyframes mesCartaParaIn {
    from {
        opacity: 0;
        transform: translateY(14px);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

.mes-carta-section--cinematic .mes-carta-static.aniv-prose p + p {
    margin-top: 1.15rem;
}

.mes-carta-section--cinematic .mes-carta-static.aniv-prose strong {
    color: #fff0f5;
    font-weight: 600;
}

.mes-carta-quote {
    margin-top: 1.75rem !important;
    font-size: clamp(1.55rem, 4vw, 2.05rem) !important;
    padding: 1.5rem 1.35rem !important;
    border-left-width: 5px !important;
    animation: mesCartaParaIn 0.9s ease 0.55s backwards;
}

.mes-carta-section--cinematic .mes-carta-karaoke {
    max-width: 46rem;
}

.mes-carta-section--cinematic .mes-carta-bar {
    height: 5px;
    margin-bottom: 2rem;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 20px rgba(255, 107, 138, 0.12);
}

.mes-carta-section--cinematic .mes-carta-bar-fill {
    box-shadow: 0 0 16px rgba(240, 214, 138, 0.5);
}

.mes-carta-section--cinematic .mes-carta-stage {
    min-height: clamp(10rem, 28vw, 15rem);
    padding: clamp(1.5rem, 4vw, 2.25rem) clamp(1.25rem, 3vw, 2rem);
    background: linear-gradient(
        160deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(20, 8, 14, 0.65) 100%
    );
    border: 1px solid rgba(255, 179, 198, 0.28);
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.35),
        inset 0 0 80px rgba(255, 107, 138, 0.04);
    backdrop-filter: blur(12px);
}

.mes-carta-section--cinematic .mes-carta-line {
    font-size: clamp(1.18rem, 3.2vw, 1.55rem);
    line-height: 1.7;
    font-weight: 500;
    color: #fffcfd;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}

.mes-toggle-song-lyrics {
    position: fixed;
    bottom: 1.25rem;
    left: 1.25rem;
    z-index: 9980;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.75rem 1.15rem;
    font-family: var(--font-body, 'Poppins', sans-serif);
    font-size: 0.85rem;
    font-weight: 500;
    color: #1a0a12;
    background: linear-gradient(135deg, rgba(255, 246, 220, 0.95), rgba(255, 214, 224, 0.95));
    border: 1px solid rgba(255, 179, 198, 0.45);
    border-radius: var(--radius-full, 9999px);
    cursor: pointer;
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mes-toggle-song-lyrics:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 32px rgba(255, 107, 138, 0.25);
}

.mes-lyrics-panel {
    padding-bottom: 1rem;
}

.mes-lyrics-panel[hidden] {
    display: none !important;
}

.mes-audio-fab {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 9985;
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: #1a0a12;
    background: linear-gradient(145deg, #ffd6e0, #f0d68a);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mes-audio-fab:hover {
    transform: scale(1.06);
}

@media (max-width: 480px) {
    .mes-toggle-song-lyrics {
        left: 50%;
        transform: translateX(-50%);
        max-width: calc(100vw - 5.5rem);
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }

    .mes-toggle-song-lyrics:hover {
        transform: translateX(-50%) scale(1.03);
    }

    .mes-audio-fab {
        right: 0.85rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mes-carta-line {
        transition: none;
        opacity: 1;
        transform: none;
    }

    .mes-carta-bar-fill {
        transition: none;
    }

    .mes-carta-glow,
    .mes-carta-light-leak,
    .mes-carta-grain,
    .mes-carta-title-line {
        animation: none !important;
    }

    .mes-carta-section--cinematic .mes-carta-static.aniv-prose p,
    .mes-carta-quote {
        animation: none !important;
        opacity: 1;
        transform: none;
        filter: none;
    }
}

@media (max-width: 768px) {
    .page-aniversario .aniv-gallery-carousel {
        padding: 0 0.35rem 2.15rem;
    }

    .page-aniversario .aniv-photo {
        min-width: 100%;
        height: min(58vh, 440px);
        opacity: 1;
        transform: none;
    }

    .page-aniversario .aniv-gallery-nav {
        top: auto;
        bottom: 0.15rem;
        transform: none;
        width: 40px;
        height: 40px;
    }

    .page-aniversario .aniv-gallery-nav:hover {
        transform: scale(1.04);
    }
}

/* ========== Nosso segundo mês juntos (nosso-segundo-mes-juntos.html) ========== */

@keyframes segundoMesGradient {
    0%,
    100% {
        background-position: 0% 40%;
    }
    50% {
        background-position: 100% 60%;
    }
}

.page-segundo-mes {
    background:
        radial-gradient(ellipse 130% 90% at 50% -15%, rgba(110, 190, 255, 0.14), transparent 52%),
        radial-gradient(ellipse 80% 55% at 100% 25%, rgba(255, 130, 190, 0.11), transparent 48%),
        radial-gradient(ellipse 70% 50% at 0% 70%, rgba(180, 120, 255, 0.08), transparent 50%),
        linear-gradient(152deg, #0a1426 0%, #152a45 26%, #2a1f4a 52%, #1a1532 78%, #0c1020 100%);
    background-size: 400% 400%;
    animation: segundoMesGradient 22s ease infinite;
}

.page-segundo-mes .aniv-hero-glow {
    background: radial-gradient(
        circle,
        rgba(110, 185, 255, 0.34) 0%,
        rgba(255, 140, 195, 0.18) 42%,
        transparent 68%
    );
}

.page-segundo-mes .aniv-badge-top {
    color: #bfe6ff;
    text-shadow:
        0 0 22px rgba(120, 200, 255, 0.38),
        0 0 16px rgba(255, 170, 210, 0.28);
}

.mes-moment-destaque-section {
    text-align: center;
    padding-top: 2.5rem;
    padding-bottom: 1rem;
}

.mes-moment-destaque-heading {
    font-family: var(--font-display, 'Dancing Script', cursive);
    font-size: clamp(2rem, 6vw, 3.25rem);
    font-weight: 600;
    margin: 0.35rem auto 0.75rem;
    max-width: 18ch;
    line-height: 1.15;
    color: #fff8fc;
    text-shadow: 0 4px 28px rgba(0, 0, 0, 0.35);
}

.mes-moment-destaque-lede {
    max-width: 34rem;
    margin: 0 auto 2rem;
    color: rgba(230, 240, 255, 0.88);
}

.mes-moment-destaque {
    position: relative;
    display: inline-block;
    margin: 0 auto;
    padding: 0;
    border: none;
    max-width: min(22rem, 92vw);
}

.mes-moment-destaque__halo {
    position: absolute;
    inset: -12%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 200, 230, 0.35) 0%, rgba(120, 200, 255, 0.12) 45%, transparent 70%);
    filter: blur(18px);
    animation: mesMomentPulse 4.5s ease-in-out infinite;
    pointer-events: none;
}

.mes-moment-destaque__ring {
    position: absolute;
    inset: -4px;
    border-radius: 1.35rem;
    pointer-events: none;
    box-shadow:
        0 0 0 2px rgba(255, 210, 235, 0.65),
        0 0 36px rgba(120, 200, 255, 0.38),
        0 20px 55px rgba(0, 0, 0, 0.48);
}

.mes-moment-destaque__img-wrap {
    position: relative;
    border-radius: 1.2rem;
    overflow: hidden;
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.5),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.mes-moment-destaque__img-wrap img {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: middle;
    transform: scale(1.01);
    transition: transform 0.6s ease;
}

.mes-moment-destaque:hover .mes-moment-destaque__img-wrap img {
    transform: scale(1.04);
}

.mes-moment-destaque__cap {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 1.25rem;
    font-family: var(--font-body, 'Poppins', sans-serif);
}

.mes-moment-destaque__cap-kicker {
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(190, 230, 255, 0.85);
}

.mes-moment-destaque__cap-title {
    font-family: var(--font-display, 'Dancing Script', cursive);
    font-size: clamp(1.75rem, 5vw, 2.35rem);
    color: #fff5fb;
}

.mes-moment-destaque__cap-sub {
    font-size: 0.95rem;
    color: rgba(255, 230, 245, 0.82);
    line-height: 1.45;
}

@keyframes mesMomentPulse {
    0%,
    100% {
        opacity: 0.65;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.03);
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-segundo-mes {
        animation: none !important;
    }

    .mes-moment-destaque__halo {
        animation: none !important;
    }

    .mes-moment-destaque:hover .mes-moment-destaque__img-wrap img {
        transform: none;
    }

    .page-segundo-mes .mes-gallery-card,
    .page-segundo-mes .mes-gallery-card__img img {
        transition: none !important;
    }

    .page-segundo-mes .mes-gallery-card:hover,
    .page-segundo-mes .mes-gallery-card:hover .mes-gallery-card__img img {
        transform: none !important;
    }
}

/* —— Galeria fluida (segundo mês) —— */
.page-segundo-mes .mes-gallery-head {
    max-width: min(38rem, calc(100vw - 2.25rem));
    margin: 0 auto;
    padding-inline: clamp(0.65rem, 3vw, 1.25rem);
    text-align: center;
}

.page-segundo-mes .mes-gallery-label {
    margin-bottom: 0.45rem;
    text-wrap: balance;
}

.page-segundo-mes .mes-gallery-intro {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
}

.page-segundo-mes .mes-gallery-intro__line {
    display: block;
    max-width: 32em;
    margin: 0;
    font-family: var(--font-body, 'Poppins', sans-serif);
    font-size: clamp(0.86rem, 2.65vw, 1.04rem);
    line-height: 1.58;
    letter-spacing: 0.012em;
    color: rgba(220, 236, 255, 0.9);
    text-wrap: balance;
}

.page-segundo-mes .mes-gallery-scroller {
    margin-top: clamp(1.35rem, 4vw, 2.25rem);
    outline: none;
}

.page-segundo-mes .mes-gallery-scroller:focus-visible {
    box-shadow: 0 0 0 2px rgba(168, 216, 255, 0.55);
    border-radius: 16px;
}

.page-segundo-mes .mes-gallery-card {
    position: relative;
    break-inside: avoid;
    margin-bottom: 1.15rem;
    border-radius: clamp(14px, 2.5vw, 22px);
    overflow: hidden;
    border: 1px solid rgba(255, 210, 235, 0.32);
    background: rgba(6, 10, 24, 0.35);
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.42),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.45s ease;
}

.page-segundo-mes .mes-gallery-card:hover {
    transform: translateY(-5px);
    box-shadow:
        0 22px 56px rgba(0, 0, 0, 0.48),
        0 0 0 1px rgba(160, 210, 255, 0.22);
    z-index: 2;
}

.page-segundo-mes .mes-gallery-card--accent {
    border-color: rgba(255, 220, 190, 0.5);
    box-shadow:
        0 0 42px rgba(120, 190, 255, 0.12),
        0 16px 48px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.07) inset;
}

.page-segundo-mes .mes-gallery-card__img {
    overflow: hidden;
}

.page-segundo-mes .mes-gallery-card__img img {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: middle;
    transition: transform 0.55s ease;
}

.page-segundo-mes .mes-gallery-card:hover .mes-gallery-card__img img {
    transform: scale(1.04);
}

.page-segundo-mes .mes-gallery-card__cap {
    padding: 0.8rem 0.95rem 1.05rem;
    background: linear-gradient(180deg, rgba(12, 18, 40, 0.08) 0%, rgba(8, 12, 28, 0.94) 48%);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.page-segundo-mes .mes-gallery-card__verse {
    display: block;
    font-family: var(--font-display, 'Dancing Script', cursive);
    font-size: clamp(1.02rem, 2.75vw, 1.38rem);
    line-height: 1.38;
    color: rgba(255, 248, 252, 0.96);
    text-align: center;
    text-wrap: balance;
}

@media (max-width: 899px) {
    .page-segundo-mes .mes-gallery-scroller {
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: max(1rem, env(safe-area-inset-left, 0px));
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.35rem;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 200, 220, 0.35) transparent;
        mask-image: linear-gradient(
            to right,
            transparent 0,
            #000 min(1.1rem, 3.5vw),
            #000 calc(100% - min(1.1rem, 3.5vw)),
            transparent 100%
        );
        margin-inline: max(-0.35rem, calc(-1 * env(safe-area-inset-left, 0px) / 2));
    }

    .page-segundo-mes .mes-gallery-flow {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 0.9rem;
        width: max-content;
        padding: 0.25rem max(1rem, env(safe-area-inset-left, 0px)) 0.85rem max(1rem, env(safe-area-inset-right, 0px));
        align-items: flex-start;
    }

    .page-segundo-mes .mes-gallery-card {
        flex: 0 0 auto;
        width: min(76vw, 292px);
        margin-bottom: 0;
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }

    .page-segundo-mes .mes-gallery-card--accent {
        width: min(80vw, 312px);
    }
}

@media (min-width: 900px) {
    .page-segundo-mes .mes-gallery-scroller {
        overflow: visible;
        mask-image: none;
        margin-inline: 0;
    }

    .page-segundo-mes .mes-gallery-flow {
        columns: 3;
        column-gap: 1.2rem;
        max-width: 1000px;
        margin: 0 auto;
        padding: 0 1.35rem 3.5rem;
    }

    .page-segundo-mes .mes-gallery-card {
        margin-bottom: 1.2rem;
    }

    .page-segundo-mes .mes-gallery-card__verse {
        font-size: clamp(1.08rem, 1.2vw, 1.42rem);
    }
}

/* Modal em coração — lembrete periódico (nosso-segundo-mes-juntos.html) */
.page-segundo-mes .mes-heart-love-toast {
    position: fixed;
    inset: 0;
    z-index: 10040;
    display: grid;
    place-items: center;
    padding: max(1rem, env(safe-area-inset-top, 0px)) 1.25rem max(1rem, env(safe-area-inset-bottom, 0px));
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.45s ease,
        visibility 0.45s ease;
}

.page-segundo-mes .mes-heart-love-toast--visible {
    opacity: 1;
    visibility: visible;
}

.page-segundo-mes .mes-heart-love-toast__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(24, 10, 18, 0.38);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.45s ease;
}

.page-segundo-mes .mes-heart-love-toast--visible .mes-heart-love-toast__backdrop {
    opacity: 1;
}

.page-segundo-mes .mes-heart-love-toast__panel {
    position: relative;
    z-index: 1;
    width: min(300px, 88vw);
    height: min(278px, 82vw);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.68) translateY(12px);
    opacity: 0;
    filter: drop-shadow(0 12px 36px rgba(200, 50, 90, 0.45));
    transition:
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1.12),
        opacity 0.4s ease;
}

.page-segundo-mes .mes-heart-love-toast--visible .mes-heart-love-toast__panel {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.page-segundo-mes .mes-heart-love-toast__shape {
    position: absolute;
    width: min(260px, 78vw);
    height: min(240px, 72vw);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -52%);
    pointer-events: none;
}

.page-segundo-mes .mes-heart-love-toast__shape::before,
.page-segundo-mes .mes-heart-love-toast__shape::after {
    content: '';
    position: absolute;
    width: 50%;
    height: 88%;
    left: 50%;
    top: 0;
    background: linear-gradient(168deg, #ffd6e4 0%, #ff8fab 38%, #e84d6b 72%, #c43652 100%);
    border-radius: 999px 999px 0 0;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
    box-shadow:
        inset 0 -28px 48px rgba(255, 255, 255, 0.28),
        inset 0 8px 20px rgba(255, 255, 255, 0.15);
}

.page-segundo-mes .mes-heart-love-toast__shape::after {
    left: 0;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
}

.page-segundo-mes .mes-heart-love-toast__text {
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 0 12% 10%;
    max-width: 14em;
    text-align: center;
    font-family: var(--font-display, 'Dancing Script', cursive);
    font-size: clamp(1.45rem, 5.2vw, 2rem);
    font-weight: 600;
    line-height: 1.25;
    color: #fffafc;
    text-shadow:
        0 0 20px rgba(255, 255, 255, 0.55),
        0 2px 16px rgba(120, 20, 45, 0.45),
        0 4px 28px rgba(200, 40, 70, 0.35);
    animation: mesHeartToastTextGlow 2.2s ease-in-out infinite;
}

@keyframes mesHeartToastTextGlow {
    0%,
    100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-segundo-mes .mes-heart-love-toast,
    .page-segundo-mes .mes-heart-love-toast__panel,
    .page-segundo-mes .mes-heart-love-toast__backdrop {
        transition: none;
    }

    .page-segundo-mes .mes-heart-love-toast--visible .mes-heart-love-toast__panel {
        transform: none;
    }

    .page-segundo-mes .mes-heart-love-toast__text {
        animation: none;
    }
}

/* ========== Convite surpresa (nosso-segundo-mes-juntos.html) ========== */
.page-segundo-mes .mes-surpresa-invite {
    position: relative;
    margin: 0 auto 3rem;
    max-width: 640px;
    padding: 0 1.25rem;
}

.page-segundo-mes .mes-surpresa-invite__bg {
    position: absolute;
    inset: -8px;
    border-radius: 1.75rem;
    background:
        radial-gradient(ellipse 80% 90% at 50% 0%, rgba(255, 220, 230, 0.55) 0%, transparent 55%),
        linear-gradient(155deg, rgba(255, 248, 252, 0.35) 0%, rgba(255, 182, 200, 0.22) 100%);
    border: 1px solid rgba(255, 160, 180, 0.45);
    box-shadow: 0 18px 50px rgba(120, 40, 65, 0.12);
    pointer-events: none;
}

.page-segundo-mes .mes-surpresa-invite__inner {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 2.25rem 1.75rem 2.5rem;
}

.page-segundo-mes .mes-surpresa-invite__wax {
    display: inline-block;
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: 0.75rem;
    filter: drop-shadow(0 6px 16px rgba(200, 60, 90, 0.25));
    animation: mesSurpresaWaxPulse 2.8s ease-in-out infinite;
}

@keyframes mesSurpresaWaxPulse {
    0%,
    100% {
        transform: scale(1) rotate(-2deg);
    }
    50% {
        transform: scale(1.06) rotate(2deg);
    }
}

.page-segundo-mes .mes-surpresa-invite__title {
    font-family: var(--font-display, 'Dancing Script', cursive);
    font-size: clamp(1.85rem, 5vw, 2.45rem);
    color: #fff5f8;
    margin: 0 0 0.85rem;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
}

.page-segundo-mes .mes-surpresa-invite__lede {
    font-family: var(--font-body, 'Poppins', sans-serif);
    font-size: 0.98rem;
    line-height: 1.65;
    color: rgba(255, 236, 244, 0.9);
    margin: 0 auto 1.35rem;
    max-width: 32rem;
}

.page-segundo-mes .mes-surpresa-invite__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.95rem 1.85rem;
    border-radius: 9999px;
    font-family: var(--font-body, 'Poppins', sans-serif);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    color: #fffefc;
    background: linear-gradient(135deg, #e84d6b, #ff8fab);
    box-shadow:
        0 8px 32px rgba(220, 70, 95, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.25) inset;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.page-segundo-mes .mes-surpresa-invite__btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 12px 40px rgba(220, 70, 95, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.35) inset;
}

.page-segundo-mes .mes-surpresa-invite__note {
    font-family: var(--font-body, 'Poppins', sans-serif);
    font-size: 0.82rem;
    color: rgba(255, 214, 224, 0.65);
    margin: 1.1rem 0 0;
}

@media (prefers-reduced-motion: reduce) {
    .page-segundo-mes .mes-surpresa-invite__wax {
        animation: none;
    }
}

/* ========== Página surpresa “mais-uma-pagina-so-nossa.html” ========== */
.page-surpresa-pos-mes {
    min-height: 100vh;
    overflow-x: hidden;
    color: #fff8fb;
    background:
        radial-gradient(ellipse 100% 80% at 50% -30%, rgba(255, 200, 215, 0.35) 0%, transparent 55%),
        radial-gradient(ellipse 60% 50% at 0% 100%, rgba(180, 60, 90, 0.35) 0%, transparent 50%),
        radial-gradient(ellipse 55% 45% at 100% 80%, rgba(120, 40, 70, 0.45) 0%, transparent 48%),
        linear-gradient(168deg, #1a0a12 0%, #3a1522 28%, #5c1f38 55%, #2a1420 82%, #14080c 100%);
    background-attachment: fixed;
}

.page-surpresa-pos-mes .mes-sound-gate--sps {
    z-index: 10070;
}

.page-surpresa-pos-mes .sps-header.aniv-header {
    background: linear-gradient(180deg, rgba(20, 8, 14, 0.92) 0%, transparent 100%);
}

.page-surpresa-pos-mes .sps-badge {
    font-size: 1.15rem;
    opacity: 0.95;
}

.sps-main {
    position: relative;
    z-index: 2;
}

.page-surpresa-pos-mes .sps-audio-hidden,
audio.sps-audio-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

/* Revelação ao scroll */
[data-surpresa-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-surpresa-reveal].sps-reveal--visible {
    opacity: 1;
    transform: translateY(0);
}

/* Hero */
.sps-hero {
    position: relative;
    min-height: min(100vh, 900px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7rem 1.5rem 4rem;
    text-align: center;
}

.sps-hero__veil {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 55% at 50% 40%, rgba(40, 12, 22, 0.15) 0%, rgba(10, 4, 8, 0.55) 100%);
    pointer-events: none;
}

.sps-hero__orbs {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.sps-hero__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(48px);
    opacity: 0.45;
    animation: spsOrbFloat 12s ease-in-out infinite;
}

.sps-hero__orb--a {
    width: min(55vw, 340px);
    height: min(55vw, 340px);
    left: -10%;
    top: 15%;
    background: radial-gradient(circle, rgba(255, 120, 150, 0.5) 0%, transparent 70%);
}

.sps-hero__orb--b {
    width: min(50vw, 300px);
    height: min(50vw, 300px);
    right: -8%;
    bottom: 10%;
    background: radial-gradient(circle, rgba(255, 200, 220, 0.35) 0%, transparent 68%);
    animation-delay: -4s;
}

@keyframes spsOrbFloat {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(4%, -3%) scale(1.06);
    }
}

.sps-hero__content {
    position: relative;
    z-index: 1;
    max-width: 38rem;
}

.sps-hero__kicker {
    font-family: var(--font-display, 'Dancing Script', cursive);
    font-size: clamp(1.5rem, 4.5vw, 2.1rem);
    color: #ffd6e4;
    margin: 0 0 0.75rem;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
}

.sps-hero__title {
    font-family: var(--font-heading, 'Playfair Display', serif);
    font-size: clamp(1.65rem, 5vw, 2.35rem);
    font-weight: 500;
    line-height: 1.28;
    margin: 0 0 1rem;
    color: #fff5f8;
    text-shadow: 0 4px 32px rgba(0, 0, 0, 0.35);
}

.sps-hero__lede {
    font-family: var(--font-body, 'Poppins', sans-serif);
    font-size: 1.02rem;
    line-height: 1.75;
    color: rgba(255, 228, 236, 0.88);
    margin: 0;
}

.sps-hero__scroll {
    margin: 2.5rem 0 0;
    font-size: 1.25rem;
    color: rgba(255, 182, 200, 0.75);
    animation: spsChevronBounce 2.2s ease-in-out infinite;
}

@keyframes spsChevronBounce {
    0%,
    100% {
        transform: translateY(0);
        opacity: 0.6;
    }
    50% {
        transform: translateY(8px);
        opacity: 1;
    }
}

/* Stanza */
.sps-stanza {
    padding: 4rem 1.5rem 5rem;
}

.sps-stanza__inner {
    max-width: 36rem;
    margin: 0 auto;
}

.sps-quote {
    margin: 0;
    padding: 0;
    border: none;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-family: var(--font-heading, 'Cormorant Garamond', serif);
    font-size: clamp(1.25rem, 3.8vw, 1.65rem);
    font-style: italic;
    line-height: 1.55;
    color: rgba(255, 236, 244, 0.94);
    text-align: center;
}

.sps-quote__line--accent {
    font-weight: 600;
    font-size: 1.08em;
    background: linear-gradient(120deg, #ffd6e4, #ffb3c6, #fff5f8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Timeline */
.sps-timeline {
    padding: 2rem 1.25rem 4.5rem;
    max-width: 900px;
    margin: 0 auto;
}

.sps-section-title {
    font-family: var(--font-display, 'Dancing Script', cursive);
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    text-align: center;
    color: #ffd6e4;
    margin: 0 0 2.25rem;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
}

.sps-section-title--light {
    color: #fff5f8;
}

.sps-timeline__track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: stretch;
}

.sps-timeline__node {
    position: relative;
    padding: 1.35rem 1.5rem 1.45rem;
    border-radius: 1.15rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 160, 180, 0.22);
    backdrop-filter: blur(8px);
}

.sps-timeline__node--heart {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem;
    background: transparent;
    border: none;
    backdrop-filter: none;
}

.sps-timeline__date {
    display: block;
    font-family: var(--font-body, 'Poppins', sans-serif);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #ffb3c6;
    margin-bottom: 0.45rem;
}

.sps-timeline__label {
    font-family: var(--font-body, 'Poppins', sans-serif);
    font-size: 0.98rem;
    line-height: 1.55;
    color: rgba(255, 236, 244, 0.9);
}

.sps-timeline__heart {
    font-size: 1.75rem;
    color: rgba(255, 150, 175, 0.85);
    text-shadow: 0 0 24px rgba(255, 100, 130, 0.4);
}

/* Polaroids */
.sps-polaroids {
    padding: 3rem 0 4.5rem;
    background: linear-gradient(180deg, transparent 0%, rgba(30, 10, 18, 0.55) 40%, rgba(20, 8, 14, 0.85) 100%);
}

.sps-polaroids__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem 1rem;
    padding: 0 1rem;
    max-width: 1100px;
    margin: 0 auto;
}

.sps-polaroid {
    margin: 0;
    width: min(100%, 220px);
    padding: 0.65rem 0.65rem 1.1rem;
    background: linear-gradient(165deg, #fffdf8 0%, #f5ebe0 100%);
    border-radius: 3px;
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.35),
        0 1px 0 rgba(255, 255, 255, 0.6) inset;
    transform: rotate(var(--sps-rot, 0deg));
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.sps-polaroid:hover {
    transform: rotate(0deg) scale(1.03);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
}

.sps-polaroid__img {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 1px;
    background: #1a1014;
}

.sps-polaroid__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sps-polaroid__cap {
    font-family: var(--font-display, 'Dancing Script', cursive);
    font-size: 1.05rem;
    line-height: 1.35;
    color: #4a2832;
    margin: 0.65rem 0 0;
    text-align: center;
}

/* Promessas */
.sps-promessas {
    padding: 3rem 1.25rem 4rem;
    max-width: 960px;
    margin: 0 auto;
}

.sps-promessas__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

.sps-promessa {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: start;
    padding: 1.35rem 1.4rem;
    border-radius: 1.1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 170, 190, 0.2);
}

.sps-promessa__icon {
    font-size: 1.75rem;
    line-height: 1;
}

.sps-promessa p {
    margin: 0;
    font-family: var(--font-body, 'Poppins', sans-serif);
    font-size: 0.96rem;
    line-height: 1.65;
    color: rgba(255, 236, 244, 0.9);
}

/* Finale */
.sps-finale {
    position: relative;
    padding: 4rem 1.25rem 5rem;
    text-align: center;
}

.sps-finale__glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 60% at 50% 30%, rgba(255, 120, 150, 0.25) 0%, transparent 65%);
    pointer-events: none;
}

.sps-finale__inner {
    position: relative;
    z-index: 1;
    max-width: 36rem;
    margin: 0 auto;
}

.sps-finale__title {
    font-family: var(--font-display, 'Great Vibes', cursive);
    font-size: clamp(3rem, 12vw, 4.5rem);
    font-weight: 400;
    margin: 0 0 1rem;
    background: linear-gradient(120deg, #fff5f8, #ffb3c6, #ffd6e4);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 4px 24px rgba(255, 100, 130, 0.35));
}

.sps-finale__line {
    font-family: var(--font-body, 'Poppins', sans-serif);
    font-size: 1.05rem;
    color: rgba(255, 228, 236, 0.88);
    margin: 0 0 0.35rem;
}

.sps-finale__line--big {
    font-family: var(--font-display, 'Dancing Script', cursive);
    font-size: clamp(1.85rem, 6vw, 2.6rem);
    color: #ffd6e4;
    margin-bottom: 2rem;
}

.sps-finale__photo {
    margin: 0 auto 2rem;
    max-width: 320px;
    border-radius: 1.25rem;
    overflow: hidden;
    border: 3px solid rgba(255, 200, 215, 0.45);
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}

.sps-finale__photo img {
    width: 100%;
    height: auto;
    display: block;
}

.sps-finale__sign {
    font-family: var(--font-display, 'Dancing Script', cursive);
    font-size: clamp(1.35rem, 4vw, 1.75rem);
    line-height: 1.55;
    color: rgba(255, 236, 244, 0.92);
    margin: 0;
}

.sps-finale__sign-name {
    font-size: 1.15em;
    color: #ffb3c6;
}

/* Footer surpresa */
.sps-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    justify-content: center;
    padding: 2.5rem 1.25rem 4rem;
    border-top: 1px solid rgba(255, 160, 180, 0.12);
}

.sps-footer__link {
    font-family: var(--font-body, 'Poppins', sans-serif);
    font-size: 0.9rem;
    padding: 0.65rem 1.35rem;
    border-radius: 9999px;
    text-decoration: none;
    color: #1a0a12;
    background: linear-gradient(135deg, #ffd6e0, #f0d68a);
    transition: transform 0.2s ease;
}

.sps-footer__link:hover {
    transform: translateY(-2px);
}

.sps-footer__link--ghost {
    color: #ffb3c6;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 179, 198, 0.35);
}

@media (min-width: 720px) {
    .sps-promessas__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .sps-timeline__track {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }

    .sps-timeline__node:not(.sps-timeline__node--heart) {
        flex: 1 1 240px;
        max-width: 280px;
    }

    .sps-timeline__node--heart {
        flex: 0 0 auto;
        min-width: 3rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-surpresa-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .sps-hero__orb,
    .sps-hero__scroll {
        animation: none !important;
    }
}