/* ===========================
        VARIABLES
=========================== */

:root{

    --rosa:#ff4f88;
    --rosa2:#ff7eb3;
    --blanco:#ffffff;
    --texto:#444;
    --glass:rgba(255,255,255,.20);

}

/* ===========================
        BODY
=========================== */

body{

    margin:0;

    background:
    linear-gradient(-45deg,
    #ffe3ec,
    #fff6fb,
    #ffd7e6,
    #ffffff);

    background-size:400% 400%;

    animation:fondo 15s ease infinite;

    overflow-x:hidden;

}

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

.hero{

    position:relative;

    width:100%;

    height:100vh;

    background:
    url("../img/fondo2.png") center center/cover no-repeat;

    display:flex;

    justify-content:center;

    align-items:center;

}

.overlay{

    position:absolute;

    inset:0;

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

    backdrop-filter:blur(2px);

}

.hero-content{

    position:relative;

    z-index:10;

    width:90%;

    max-width:900px;

    text-align:center;

    color:white;

    animation:fadeUp 1.5s ease;

}

.hero h1{

    font-size:70px;

    margin-bottom:25px;

    text-shadow:0 0 25px rgba(255,255,255,.4);

}

.hero p{

    font-size:23px;

    line-height:1.7;

    margin-bottom:50px;

}

/* ===========================
        BOTON
=========================== */

.btn-love{

    display:inline-block;

    text-decoration:none;

    color:white;

    font-size:20px;

    font-weight:bold;

    padding:18px 45px;

    border-radius:60px;

    background:
    linear-gradient(135deg,var(--rosa),var(--rosa2));

    transition:.4s;

    position:relative;

    overflow:hidden;

}

.btn-love:hover{

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

    box-shadow:0 15px 35px rgba(255,80,140,.45);

}

.btn-love::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:60%;

    height:100%;

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

    transform:skewX(-25deg);

}

.btn-love:hover::before{

    animation:shine .8s;

}

/* ===========================
        TARJETAS
=========================== */

.quick-links{

    width:90%;

    max-width:1400px;

    margin:100px auto;

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:35px;

}

.card{

    text-decoration:none;

    color:var(--texto);

    text-align:center;

    padding:50px 30px;

    background:var(--glass);

    backdrop-filter:blur(18px);

    border-radius:30px;

    transition:.4s;

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

}

.card:hover{

    transform:
    translateY(-15px)
    rotateX(8deg);

    box-shadow:0 25px 40px rgba(255,100,170,.25);

}

.card span{

    font-size:65px;

}

.card h2{

    margin:20px 0;

    color:var(--rosa);

}

.card p{

    line-height:1.7;

}

/* ===========================
        FRASE
=========================== */

.quote{

    width:90%;

    max-width:900px;

    margin:120px auto;

    text-align:center;

}

.quote h2{

    color:#ff3c7d;

    font-size:38px;

    font-style:italic;

    min-height:120px;

    animation:fadeUp 1s;

}

/* ===========================
        CORAZONES
=========================== */

.heart{

    position:fixed;

    bottom:-40px;

    color:#ff8cb5;

    animation:float linear forwards;

    pointer-events:none;

}

/* ===========================
        ANIMACIONES
=========================== */

@keyframes float{

    to{

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

        opacity:0;

    }

}

@keyframes shine{

    from{

        left:-120%;

    }

    to{

        left:140%;

    }

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fondo{

    0%{

        background-position:0% 50%;

    }

    50%{

        background-position:100% 50%;

    }

    100%{

        background-position:0% 50%;

    }

}

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

@media(max-width:900px){

.hero h1{

font-size:45px;

}

.hero p{

font-size:19px;

}

.quote h2{

font-size:28px;

}

}

@media(max-width:600px){

.hero{

padding:20px;

}

.hero h1{

font-size:35px;

}

.hero p{

font-size:17px;

}

.btn-love{

font-size:17px;

padding:15px 30px;

}

}