/*==================================================

Baby Shower - Elian Antonella

Diseñado por ChatGPT

==================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;

}

body{

    overflow-x:hidden;

    font-family:'Poppins',sans-serif;

    background:#FFF8FB;

}
/*=========================================
INTRO
=========================================*/

#intro{

    position:fixed;

    width:100%;

    height:100vh;

    background:
    radial-gradient(circle at top,#ffdff0,#f7bfd4,#f3a7c4);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

    overflow:hidden;

}

.intro-content{

    text-align:center;

    position:relative;

}

.baby-title{

    font-family:'Cormorant Garamond';

    color:white;

    letter-spacing:5px;

    font-size:30px;

    margin-bottom:10px;

}

.baby-name{

    font-family:'Great Vibes';

    color:white;

    font-size:75px;

    margin-bottom:35px;

    text-shadow:
    0px 5px 20px rgba(0,0,0,.15);

}

.touch-text{

    color:white;

    font-size:18px;

    margin-bottom:35px;

}

/*==========================
        SOBRE PREMIUM
==========================*/



/* brillo */

.seal::after{

    content:"";

    position:absolute;

    width:18px;

    height:18px;

    border-radius:50%;

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

    top:12px;

    left:16px;

}

/* flotar */





/* hover */



.seal{

    position:absolute;

    left:50%;

    top:52%;

    transform:translate(-50%,-50%);

    width:60px;

    height:60px;

    background:#d4af37;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

    z-index:10;

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

}
/*=========================================

FONDO GENERAL

=========================================*/

#mainContent{

    min-height:100vh;

    position:relative;

    overflow:hidden;

    background:
    linear-gradient(
    180deg,
    #fff8fb 0%,
    #ffeef6 30%,
    #fffdfb 70%,
    #fff6fa 100%);

}

#backgroundEffects{

    position:fixed;

    inset:0;

    pointer-events:none;

    overflow:hidden;

    z-index:0;

}

/*====================

PÉTALOS

====================*/

.petal{

    position:absolute;

    top:-100px;

    border-radius:50% 50% 50% 0;

    opacity:.75;

    animation-name:fall;

    animation-timing-function:linear;

    animation-iteration-count:infinite;

    transform:rotate(45deg);

}

@keyframes fall{

    from{

        transform:
        translateY(-150px)
        rotate(0deg);

    }

    to{

        transform:
        translateY(120vh)
        rotate(360deg);

    }

}

/*====================

DESTELLOS

====================*/

.spark{

    position:absolute;

    border-radius:50%;

    background:#d4af37;

    opacity:.6;

    animation:twinkle 2s infinite alternate;

}

@keyframes twinkle{

    from{

        transform:scale(.3);

        opacity:.2;

    }

    to{

        transform:scale(1.2);

        opacity:1;

    }

}

/*==================================

HERO

==================================*/

/*==================================================

HERO NUEVO

==================================================*/

#hero{

    position:relative;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    padding:60px 20px;

}

.hero-card{

    position:relative;

    width:100%;

    max-width:900px;

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

    backdrop-filter:blur(18px);

    border-radius:45px;

    padding:70px;

    text-align:center;

    box-shadow:

    0 25px 70px rgba(0,0,0,.08);

}

.main-bunny{

    width:320px;

    max-width:90%;

    margin-bottom:35px;

}

.mini-title{

    font-family:"Cormorant Garamond";

    font-size:34px;

    color:#b78598;

    letter-spacing:7px;

}

.hero-card h1{

    font-family:"Great Vibes";

    font-size:95px;

    color:#cb8aa0;

    margin-top:15px;

}

.hero-description{

    margin-top:25px;

    font-size:23px;

    color:#77626d;

}

.flower{

    position:absolute;

    width:250px;

    pointer-events:none;

}

.flower-left{

    left:-60px;

    top:-30px;

}

.flower-right{

    right:-60px;

    top:-30px;

}

.sparkle{

    position:absolute;

    width:60px;

    animation:float 3s ease-in-out infinite;

}

.sparkle1{

    left:15%;

    top:25%;

}

.sparkle2{

    right:15%;

    top:35%;

}

.scroll-down{

    margin-top:45px;

    font-size:28px;

    color:#cb8aa0;

    animation:bounce 2s infinite;

}

@keyframes bounce{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(10px);

    }

}

@keyframes float{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}

/*==================================================

CARTA

==================================================*/

#letter{

    padding:120px 20px;

    position:relative;

}

.letter-card{

    max-width:950px;

    margin:auto;

    background:#fffdfd;

    border-radius:40px;

    padding:70px;

    box-shadow:

    0 20px 60px rgba(0,0,0,.08);

    position:relative;

    overflow:hidden;

}

.letter-card::before{

    content:"";

    position:absolute;

    inset:12px;

    border:2px solid rgba(212,175,55,.25);

    border-radius:30px;

}

.letter-bunny{

    width:180px;

    display:block;

    margin:auto;

    margin-bottom:30px;

    position:relative;

    z-index:2;

}

.letter-card h2{

    font-family:"Great Vibes";

    text-align:center;

    font-size:60px;

    color:#cb8aa0;

    margin-bottom:35px;

    position:relative;

    z-index:2;

}

.letter-card p{

    font-size:22px;

    line-height:2;

    color:#7d6870;

    text-align:center;

    max-width:760px;

    margin:25px auto;

    position:relative;

    z-index:2;

}

.letter-flower{

    position:absolute;

    width:220px;

    z-index:1;

}

.letter-flower.left{

    left:-40px;

    top:40px;

}

.letter-flower.right{

    right:-40px;

    bottom:40px;

}

/*==================================================

FECHA

==================================================*/

#event-date{

    padding:120px 20px;

    text-align:center;

}

.section-title h2{

    font-family:"Great Vibes";

    font-size:70px;

    color:#cb8aa0;

}

.section-title p{

    margin-top:15px;

    color:#8a7179;

    font-size:22px;

}

.date-card{

    max-width:650px;

    margin:60px auto;

    background:linear-gradient(
       180deg,
     #fffdfc,
     #f8f3f2
    );

    border-radius:18px;

    padding:50px;

    box-shadow:

    0 35px 70px rgba(0,0,0,.12),

    0 10px 25px rgba(203,138,160,.18);

    position:relative;

}

.date-card::before{

    content:"";

    position:absolute;

    inset:10px;

    border:2px solid rgba(212,175,55,.3);

    border-radius:28px;

}

.calendar-img{

    width:220px;

    margin-bottom:25px;

    position:relative;

    z-index:2;

}

.date-card h3{

    position:relative;

    z-index:2;

    font-family:"Cormorant Garamond";

    font-size:42px;

    color:#cb8aa0;

}

.date-card span{

    display:block;

    margin-top:20px;

    font-size:28px;

    color:#8b6f79;

}

/*==================================================

CONTADOR

==================================================*/

#countdown-section{

    padding:80px 20px 140px;

    text-align:center;

}

.count-title{

    font-family:"Great Vibes";

    font-size:65px;

    color:#cb8aa0;

    margin-bottom:50px;

}

#countdown{

    display:flex;

    justify-content:center;

    gap:25px;

    flex-wrap:wrap;

}

.time-box{

    width:170px;

    height:170px;

    background:white;

    border-radius:30px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.time-box span{

    font-size:55px;

    color:#cb8aa0;

    font-weight:bold;

}

.time-box small{

    margin-top:10px;

    color:#7f6971;

    font-size:20px;

}

/*==================================================

FAMILIA

==================================================*/

#family{

    padding:120px 20px;

}

.family-card{

    max-width:850px;

    margin:auto;

    background:white;

    border-radius:40px;

    padding:60px;

    text-align:center;

    box-shadow:0 20px 50px rgba(0,0,0,.08);

}

.family-img{

    width:320px;

    margin-bottom:30px;

}

.family-card h2{

    font-family:"Great Vibes";

    font-size:58px;

    color:#cb8aa0;

}

.family-card h3{

    margin-top:25px;

    font-family:"Cormorant Garamond";

    font-size:42px;

    color:#7d6870;

}

/*==================================================

LUGAR

==================================================*/

#location{

    padding:120px 20px;

    text-align:center;

}

#location h2{

    font-family:"Great Vibes";

    font-size:65px;

    color:#cb8aa0;

    margin-bottom:50px;

}

.location-frame{

    display:inline-block;

    padding:6px;

    background:#ffffff;

    border-radius:28px;

    border:2px solid #f4dce5;

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

    transition:.35s ease;

}

.location-image{

    display:block;

    width:100%;

    max-width:480px;

    height:300px;

    object-fit:cover;

    border-radius:22px;

}

.location-frame:hover{

    transform:translateY(-5px);

    box-shadow:0 20px 40px rgba(203,138,160,.18);

}

#location h3{

    margin-top:40px;

    font-size:38px;

    color:#cb8aa0;

}

#location p{

    margin-top:25px;

    line-height:1.9;

    font-size:22px;

    color:#7d6870;

}

.location-btn{

    display:inline-block;

    margin-top:45px;

    padding:18px 45px;

    border-radius:50px;

    text-decoration:none;

    background:#cb8aa0;

    color:white;

    font-size:20px;

    transition:.3s;

}

.location-btn:hover{

    transform:translateY(-5px);

    background:#b9748c;

}

/*==================================================

WHATSAPP

==================================================*/

#confirm{

    padding:120px 20px;

    text-align:center;

}

#confirm h2{

    font-family:"Great Vibes";

    font-size:65px;

    color:#cb8aa0;

}

#confirm p{

    margin-top:20px;

    font-size:22px;

    color:#7d6870;

}

.whatsapp-btn{

    display:inline-block;

    margin-top:45px;

    background:#25D366;

    color:white;

    padding:20px 45px;

    border-radius:60px;

    text-decoration:none;

    font-size:22px;

    transition:.3s;

}

.whatsapp-btn:hover{

    transform:scale(1.05);

}

/*==================================================

ALBERCAS

==================================================*/

#pools{

    padding:120px 20px;

}

.pool-card{

    max-width:850px;

    margin:auto;

    background:white;

    border-radius:40px;

    padding:60px;

    text-align:center;

    box-shadow:0 20px 50px rgba(0,0,0,.08);

}

.pool-icon{

    width:180px;

    margin-bottom:35px;

}

.pool-card h2{

    font-family:"Great Vibes";

    font-size:62px;

    color:#cb8aa0;

}

.pool-card p{

    margin-top:30px;

    font-size:24px;

    line-height:1.9;

    color:#7d6870;

}

/*==================================================

FINAL

==================================================*/

#ending{

    padding:140px 20px;

    text-align:center;

}

.ending-bunny{

    width:240px;

}

#ending h2{

    margin-top:40px;

    font-family:"Great Vibes";

    font-size:82px;

    color:#cb8aa0;

}

.location-frame:hover{

    transform:translateY(-8px) scale(1.02);

    transition:.4s;

}

.location-frame:hover .location-image{

    filter:brightness(1.05);

}

.pool-items{

    width:380px;
    max-width:90%;

    animation:pulse 2s ease-in-out infinite;

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.06);

    }

    100%{

        transform:scale(1);

    }

}



.flower-top-left{

    position:absolute;

    width:110px;

    top:-40px;

    left:-40px;

    z-index:20;

}

.flower-top-right{

    position:absolute;

    width:110px;

    top:-40px;

    right:-40px;

    z-index:20;

}

/*==========================
        SOBRE PREMIUM
==========================*/

#envelope{

    position:relative;

    width:480px;

    height:320px;

    margin:60px auto;

    cursor:pointer;

    animation:floatEnvelope 4s ease-in-out infinite;

    overflow:hidden;

}

/* sombra */

.envelope-shadow{

    position:absolute;

    width:330px;

    height:35px;

    left:50%;

    bottom:-20px;

    transform:translateX(-50%);

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

    filter:blur(18px);

    border-radius:50%;

}

/* carta */

.envelope-letter{

    position:absolute;

    width:340px;

    height:200px;

    left:50%;

    top:125px;

    transform:translateX(-50%);

    background:white;

    border-radius:12px;

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

    z-index:3;

}

/* cuerpo */

.envelope-paper{

    position:absolute;

    width:100%;

    height:100%;

    background:linear-gradient(
        180deg,
        #fffdfa,
        #fff7f8
    );

    overflow:hidden;

    border-radius:18px;

    z-index:2;

    box-shadow:

    0 25px 60px rgba(0,0,0,.12),

    inset 0 0 0 1px rgba(255,255,255,.5);

}

/* tapa */

.envelope-top{

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:160px;

    background:linear-gradient(
        180deg,
        #f9dce7,
        #efc6d4
    );

    clip-path:polygon(0 0,50% 100%,100% 0);

    z-index:5;

    transform-origin:top center;

    transform-style:preserve-3d;

    backface-visibility:hidden;

}

/* líneas del sobre */

.envelope-paper::before{

    content:"";

    position:absolute;

    left:0;

    right:0;

    top:0;

    bottom:0;

    background:

    linear-gradient(35deg,transparent 49.5%,#f2d3df 50%,transparent 50.5%),

    linear-gradient(-35deg,transparent 49.5%,#f2d3df 50%,transparent 50.5%);

    opacity:.5;

}

/* sello */

.seal{

    position:absolute;

    left:50%;

    top:175px;

    transform:translateX(-50%);

    width:70px;

    height:70px;

    border-radius:50%;

    background:linear-gradient(145deg,#cb8aa0,#b66d87);

    color:white;

    font-weight:bold;

    font-size:28px;

    display:flex;

    justify-content:center;

    align-items:center;

    border:5px solid #f7d7b2;

    box-shadow:

    0 8px 20px rgba(0,0,0,.18);

    z-index:6;

    animation:sealPulse 2s infinite;

}

/* brillo */

.seal::after{

    content:"";

    position:absolute;

    width:18px;

    height:18px;

    border-radius:50%;

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

    top:12px;

    left:16px;

}

/* flotar */

@keyframes floatEnvelope{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}

/* respirar sello */

@keyframes sealPulse{

    0%,100%{

        transform:translateX(-50%) scale(1);

    }

    50%{

        transform:translateX(-50%) scale(1.08);

    }

}

/* hover */

#envelope:hover{

    transform:scale(1.03);

    transition:.35s;

}

.open-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    padding:20px 55px;

    font-family:"Cormorant Garamond", serif;
    font-size:30px;
    font-weight:700;
    letter-spacing:1px;

    color:#8b5d70;

    background:linear-gradient(
        180deg,
        #fffefc 0%,
        #fff6f9 100%
    );

    border:3px solid #d4af37;
    border-radius:60px;

    cursor:pointer;

    box-shadow:
        0 10px 30px rgba(212,175,55,.35),
        inset 0 2px 0 rgba(255,255,255,.9);

    transition:.35s;
    animation:luxuryPulse 2.5s infinite;
}

.open-btn::before{
    content:"✨";
}

.open-btn::after{
    content:"✨";
}

.open-btn:hover{
    transform:translateY(-6px) scale(1.06);
    background:linear-gradient(
        180deg,
        #ffffff,
        #fff0f6
    );

    box-shadow:
        0 18px 45px rgba(212,175,55,.45);
}

@keyframes luxuryPulse{

    0%,100%{
        transform:scale(1);
        box-shadow:
            0 10px 30px rgba(212,175,55,.35);
    }

    50%{
        transform:scale(1.04);
        box-shadow:
            0 18px 45px rgba(212,175,55,.55);
    }

}