:root {

    --primary: #9b4d5c;
    --primary-dark: #743744;

    --cream: #fffaf7;
    --soft: #f4e6e8;

    --text: #302a29;
    --muted: #7d7370;

    --white: #ffffff;

}


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    font-family:
        "DM Sans",
        sans-serif;

    color: var(--text);

    background: var(--cream);

}


h1,
h2,
h3 {

    font-family:
        "Playfair Display",
        serif;

}


/* ===================================================== */
/* MUSIC */
/* ===================================================== */

.music-button {

    position: fixed;

    right: 25px;

    bottom: 25px;

    width: 52px;

    height: 52px;

    border: none;

    border-radius: 50%;

    background: rgba(155,77,92,.95);

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 19px;

    z-index: 999;

    box-shadow:
        0 8px 25px rgba(0,0,0,.18);

    cursor: pointer;

    transition: .3s;

}


.music-button:hover {

    transform: scale(1.08);

}


.music-button.playing {

    animation:
        musicPulse 1.5s infinite;

}


@keyframes musicPulse {

    0% {
        box-shadow:
            0 0 0 0 rgba(155,77,92,.5);
    }

    70% {
        box-shadow:
            0 0 0 15px rgba(155,77,92,0);
    }

    100% {
        box-shadow:
            0 0 0 0 rgba(155,77,92,0);
    }

}


/* ===================================================== */
/* FLOATING HEARTS */
/* ===================================================== */

.floating-hearts {

    position: fixed;

    inset: 0;

    pointer-events: none;

    z-index: 5;

    overflow: hidden;

}


.floating-heart {

    position: absolute;

    bottom: -30px;

    color: rgba(255,255,255,.65);

    animation:
        floatHeart linear forwards;

}


@keyframes floatHeart {

    from {

        transform:
            translateY(0)
            rotate(0deg);

        opacity: 0;

    }

    15% {

        opacity: 1;

    }

    to {

        transform:
            translateY(-110vh)
            rotate(360deg);

        opacity: 0;

    }

}


/* ===================================================== */
/* HERO */
/* ===================================================== */

.story-hero {

    min-height: 100vh;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    color: white;

    background:
        linear-gradient(
            135deg,
            #713844,
            #c47b88
        );

    overflow: hidden;

}


.story-hero::before {

    content: "";

    position: absolute;

    inset: 35px;

    border:
        1px solid rgba(255,255,255,.35);

}


.story-overlay {

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at center,
            transparent 0%,
            rgba(30,10,15,.35) 100%
        );

}


.hero-content {

    position: relative;

    z-index: 2;

    padding: 30px;

}


.eyebrow {

    display: block;

    font-size: 11px;

    letter-spacing: 4px;

    margin-bottom: 25px;

    opacity: .9;

}


.hero-content h1 {

    font-size:
        clamp(55px, 10vw, 105px);

    line-height: 1;

    font-weight: 400;

    margin: 0;

}


.hero-content h1 span {

    display: block;

    font-size: .45em;

    font-family:
        "DM Sans",
        sans-serif;

    font-weight: 400;

    margin: 15px 0;

    opacity: .8;

}


.hero-date {

    margin-top: 30px;

    font-size: 12px;

    letter-spacing: 4px;

}


.hero-heart {

    margin:
        35px auto;

    font-size: 20px;

}


.hero-heart i {

    animation:
        heartbeat 1.7s infinite;

}


@keyframes heartbeat {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.25);
    }

}


.scroll-button {

    border:
        1px solid rgba(255,255,255,.5);

    background:
        rgba(255,255,255,.08);

    color: white;

    border-radius: 50px;

    padding: 13px 22px;

    font-size: 12px;

    letter-spacing: .5px;

    transition: .3s;

}


.scroll-button:hover {

    background: white;

    color: var(--primary);

}


.scroll-button i {

    margin-left: 8px;

}


/* ===================================================== */
/* GENERAL */
/* ===================================================== */

.story-section {

    padding: 110px 20px;

}


.section-intro {

    max-width: 750px;

    margin: auto;

    text-align: center;

}


.section-label {

    color: var(--primary);

    font-size: 10px;

    letter-spacing: 3px;

    font-weight: 700;

}


.section-intro h2 {

    font-size:
        clamp(35px, 5vw, 55px);

    line-height: 1.15;

    margin:
        18px 0 25px;

}


.section-intro p {

    color: var(--muted);

    font-size: 16px;

    line-height: 1.9;

}


.decorative-heart {

    color: var(--primary);

    margin: 25px 0;

}


/* ===================================================== */
/* COUNTER */
/* ===================================================== */

.counter-section {

    padding: 100px 20px;

    background: white;

}


.counter {

    max-width: 700px;

    margin:
        60px auto 0;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 30px;

}


.counter-item {

    text-align: center;

    min-width: 110px;

}


.counter-item strong {

    display: block;

    font-family:
        "Playfair Display",
        serif;

    color: var(--primary);

    font-size: 58px;

    font-weight: 400;

    line-height: 1;

}


.counter-item span {

    display: block;

    margin-top: 12px;

    color: var(--muted);

    font-size: 9px;

    letter-spacing: 3px;

}


.counter-separator {

    font-family:
        "Playfair Display",
        serif;

    color: #d6b8bd;

    font-size: 35px;

}


/* ===================================================== */
/* QUOTE */
/* ===================================================== */

.quote-section {

    padding: 120px 20px;

    background:
        var(--soft);

    text-align: center;

}


.quote-content {

    max-width: 750px;

    margin: auto;

}


.quote-icon {

    color: var(--primary);

    font-size: 40px;

}


.quote-content blockquote {

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(30px, 5vw, 48px);

    line-height: 1.3;

    margin: 20px 0;

}


.quote-line {

    width: 45px;

    height: 2px;

    background: var(--primary);

    margin: 25px auto;

}


.quote-content span {

    font-size: 11px;

    letter-spacing: 2px;

    color: var(--muted);

}


/* ===================================================== */
/* GALLERY */
/* ===================================================== */

.gallery-section {

    background: white;

}


.gallery {

    max-width: 1050px;

    margin:
        60px auto 0;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    grid-auto-rows: 260px;

    gap: 15px;

}


.gallery-item {

    overflow: hidden;

    border-radius: 3px;

}


.gallery-large {

    grid-row:
        span 2;

}


.photo-placeholder {

    width: 100%;

    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 10px;

    color: rgba(255,255,255,.85);

    background:
        linear-gradient(
            145deg,
            #c48791,
            #e7b9bf
        );

    transition:
        transform .5s;

}


.gallery-item:hover
.photo-placeholder {

    transform: scale(1.05);

}


.photo-placeholder i {

    font-size: 30px;

}


.photo-placeholder span {

    font-size: 11px;

    letter-spacing: 1px;

}


/* ===================================================== */
/* TIMELINE */
/* ===================================================== */

.timeline-section {

    padding: 110px 20px;

    background: var(--cream);

}


.timeline {

    max-width: 750px;

    margin:
        70px auto 0;

    position: relative;

}


.timeline::before {

    content: "";

    position: absolute;

    top: 0;

    bottom: 0;

    left: 14px;

    width: 1px;

    background:
        #dec7ca;

}


.timeline-item {

    position: relative;

    padding-left: 55px;

    margin-bottom: 60px;

}


.timeline-dot {

    position: absolute;

    left: 7px;

    top: 3px;

    width: 15px;

    height: 15px;

    border-radius: 50%;

    background: var(--primary);

    border:
        4px solid var(--cream);

}


.timeline-content span {

    font-size: 10px;

    color: var(--primary);

    font-weight: 700;

    letter-spacing: 2px;

}


.timeline-content h3 {

    font-size: 27px;

    margin: 8px 0;

}


.timeline-content p {

    color: var(--muted);

    line-height: 1.7;

    font-size: 14px;

}


/* ===================================================== */
/* LETTER */
/* ===================================================== */

.letter-section {

    padding:
        120px 20px;

    background: white;

    text-align: center;

}


.letter-intro {

    color: var(--muted);

    margin:
        15px 0 40px;

}


.letter-button {

    border: none;

    background: none;

    display: inline-flex;

    flex-direction: column;

    align-items: center;

    gap: 12px;

    color: var(--primary);

    cursor: pointer;

    font-size: 12px;

    letter-spacing: 1px;

}


.envelope {

    width: 85px;

    height: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--soft);

    border-radius: 8px;

    font-size: 32px;

    transition: .3s;

}


.letter-button:hover
.envelope {

    transform:
        translateY(-5px)
        rotate(-2deg);

    box-shadow:
        0 12px 30px rgba(0,0,0,.10);

}


.letter-content {

    display: none;

    position: fixed;

    inset: 0;

    background:
        rgba(30,15,20,.72);

    z-index: 1000;

    align-items: center;

    justify-content: center;

    padding: 20px;

    backdrop-filter: blur(5px);

}


.letter-content.open {

    display: flex;

}


.letter-paper {

    position: relative;

    width: min(600px, 100%);

    max-height: 85vh;

    overflow-y: auto;

    background: #fffdf9;

    padding:
        55px 45px;

    box-shadow:
        0 25px 70px rgba(0,0,0,.25);

    animation:
        letterOpen .5s ease;

}


@keyframes letterOpen {

    from {

        opacity: 0;

        transform:
            scale(.85)
            translateY(20px);

    }

    to {

        opacity: 1;

        transform:
            scale(1)
            translateY(0);

    }

}


.close-letter {

    position: absolute;

    top: 15px;

    right: 18px;

    border: none;

    background: none;

    color: var(--muted);

    cursor: pointer;

}


.letter-heart {

    color: var(--primary);

    font-size: 25px;

    margin-bottom: 20px;

}


.letter-paper h3 {

    font-size: 35px;

    margin-bottom: 25px;

}


.letter-paper p {

    color: var(--muted);

    line-height: 2;

    font-size: 15px;

}


.letter-signature {

    margin-top: 35px;

    color: var(--muted);

}


.letter-signature strong {

    display: block;

    margin-top: 8px;

    color: var(--primary);

    font-family:
        "Parisienne",
        cursive;

    font-size: 35px;

    font-weight: 400;

}


/* ===================================================== */
/* FINAL */
/* ===================================================== */

.final-section {

    padding: 130px 20px;

    color: white;

    background:
        linear-gradient(
            135deg,
            #713844,
            #b76c79
        );

}


.final-heart {

    font-size: 28px;

}


.final-section h2 {

    font-size:
        clamp(40px, 6vw, 65px);

    margin:
        25px 0;

}


.final-section p {

    margin-bottom: 5px;

    opacity: .75;

}


.final-section h3 {

    font-size: 30px;

    font-weight: 400;

}


.final-date {

    margin-top: 15px;

    font-size: 11px;

    letter-spacing: 3px;

    opacity: .7;

}


/* ===================================================== */
/* SCROLL ANIMATIONS */
/* ===================================================== */

.animate {

    opacity: 0;

    transform:
        translateY(30px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}


.animate.show {

    opacity: 1;

    transform:
        translateY(0);

}


/* ===================================================== */
/* RESPONSIVE */
/* ===================================================== */

@media (max-width: 768px) {

    .story-hero::before {

        inset: 15px;

    }


    .hero-content h1 {

        font-size: 58px;

    }


    .story-section,
    .timeline-section,
    .letter-section {

        padding:
            80px 20px;

    }


    .counter {

        gap: 10px;

    }


    .counter-item {

        min-width: 80px;

    }


    .counter-item strong {

        font-size: 42px;

    }


    .counter-separator {

        font-size: 25px;

    }


    .gallery {

        grid-template-columns:
            repeat(2, 1fr);

        grid-auto-rows:
            220px;

    }


    .gallery-large {

        grid-row:
            span 2;

    }

}


@media (max-width: 480px) {

    .hero-content h1 {

        font-size: 48px;

    }


    .counter {

        gap: 4px;

    }


    .counter-item {

        min-width: 65px;

    }


    .counter-item strong {

        font-size: 32px;

    }


    .counter-item span {

        font-size: 7px;

        letter-spacing: 1px;

    }


    .counter-separator {

        font-size: 18px;

    }


    .gallery {

        grid-template-columns: 1fr;

        grid-auto-rows: 280px;

    }


    .gallery-large {

        grid-row:
            span 1;

    }


    .letter-paper {

        padding:
            45px 25px;

    }





    /* =========================================================
   GALERÍA - OVERLAY
   ========================================================= */

.gallery-item {
    cursor: pointer;
}

.photo-placeholder {
    position: relative;
    overflow: hidden;
}

.photo-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.gallery-item:hover .photo-placeholder img {
    transform: scale(1.05);
}


/* =========================================================
   OVERLAY DE LA FOTO
   ========================================================= */

.gallery-overlay {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(0,0,0,.25);

    opacity: 0;

    transition: opacity .3s ease;

    pointer-events: none;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-overlay i {
    width: 50px;
    height: 50px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(255,255,255,.9);

    color: #9b4d5c;

    font-size: 20px;

    box-shadow: 0 5px 20px rgba(0,0,0,.2);
}



}