/* =========================================
   SALSA DATE
   style.css
   Diseño principal actualizado
========================================= */


/* ---------- Variables ---------- */

:root {

    --primary: #ff3b4f;
    --primary-dark: #c91835;

    --gold: #ffd166;

    --background:
        #111111;

    --card:
        #181818;

    --white:
        #ffffff;

    --text-soft:
        #cccccc;

    --shadow:

        0 20px 50px
        rgba(0,0,0,.45);


    --radius-xl:
        32px;

    --radius-lg:
        22px;

    --radius-md:
        16px;

}



/* ---------- Reset ---------- */


* {

    margin:0;

    padding:0;

    box-sizing:border-box;

}



html {

    scroll-behavior:smooth;

}



body {

    min-height:100dvh;

    overflow-x:hidden;


    background:

        radial-gradient(
            circle at top,
            #3a1118,
            #111 60%
        );


    color:white;


    font-family:

        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Display",
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

}



/* ---------- Fondo ---------- */


.background-effects {

    position:fixed;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:0;

}



.music-note {

    position:absolute;

    font-size:35px;

    opacity:.18;

}



/* ---------- App ---------- */


.app-container {


    min-height:100dvh;


    display:flex;


    justify-content:center;


    align-items:center;


    padding:

        env(safe-area-inset-top)

        20px

        env(safe-area-inset-bottom);


    position:relative;


    z-index:1;

}



/* ---------- Card ---------- */


.love-card {


    width:100%;


    max-width:430px;


    background:

        var(--card);


    border-radius:

        var(--radius-xl);


    overflow:hidden;


    box-shadow:

        var(--shadow);


}



/* ---------- Imagen principal ---------- */


.hero-image {


    height:260px;


    position:relative;


    overflow:hidden;


}



.hero-image img {


    width:100%;


    height:100%;


    object-fit:cover;


    display:block;


}



.hero-overlay {


    position:absolute;


    inset:0;


    background:

        linear-gradient(

            to top,

            rgba(0,0,0,.65),

            transparent

        );


}





/* ---------- Contenido ---------- */


.content {


    padding:

        28px

        22px

        25px;


    text-align:center;


}



.small-title {


    color:

        var(--primary);


    font-size:.95rem;


    font-weight:700;


    margin-bottom:15px;


}



h1 {


    color:white;


    font-size:

        1.85rem;


    line-height:

        1.25;


    font-weight:800;


    margin-bottom:20px;


}



.subtitle {


    color:

        var(--text-soft);


    font-size:1rem;


    line-height:1.5;


    margin-bottom:28px;


}



/* ---------- Galería ---------- */


.gallery {


    display:grid;


    grid-template-columns:

        repeat(3,1fr);


    gap:10px;


    margin-bottom:30px;


}



.gallery img {


    width:100%;


    height:90px;


    object-fit:cover;


    border-radius:

        var(--radius-md);


    background:#333;


}



/* ---------- Área botones ---------- */


.question-area {


    position:relative;


    height:220px;


    width:100%;


}



/* ---------- Botones ---------- */


.btn {


    border:none;


    cursor:pointer;


    font-size:1rem;


    font-weight:800;


    padding:

        16px

        28px;


    border-radius:999px;


    min-height:55px;


    touch-action:manipulation;


    user-select:none;


    transition:

        transform .2s ease;


}



/* SI */


.btn-yes {


    position:absolute;


    left:50%;


    top:40%;


    transform:

        translate(-50%,-50%);


    background:


        linear-gradient(

            135deg,

            #ff4d5e,

            #d62828

        );


    color:white;


    box-shadow:


        0 15px 35px

        rgba(255,59,79,.35);


}



/* NO */


.btn-no {


    position:absolute;


    left:50%;


    top:80%;


    transform:

        translate(-50%,-50%);


    background:

        #666;


    color:white;


}





/* ---------- Mensaje ---------- */


.message {


    min-height:30px;


    color:

        #ff9aaa;


    font-weight:700;


    font-size:.95rem;


}



/* ---------- Pantalla éxito ---------- */


.success-screen {


    position:fixed;


    inset:0;


    display:none;


    justify-content:center;


    align-items:center;


    text-align:center;


    padding:25px;


    background:

        rgba(10,10,10,.96);


    z-index:100;


}



.success-content {


    max-width:420px;


}



.dance-animation {


    font-size:80px;


    margin-bottom:25px;


}



.success-content h2 {


    color:

        var(--primary);


    font-size:

        2rem;


    margin-bottom:20px;


}



.success-content p {


    color:

        var(--text-soft);


    line-height:1.5;


    margin-bottom:30px;


}



/* ---------- Confeti ---------- */


#confettiContainer {


    position:fixed;


    inset:0;


    pointer-events:none;


    overflow:hidden;


    z-index:200;


}



/* ---------- Confeti piezas ---------- */


.confetti-piece {


    position:absolute;


    top:-20px;


}



/* ---------- Corazones ---------- */


.heart {


    position:absolute;

}