/*=====================================================
SISWON INVITACIONES PREMIUM
Template: Graduación
Autor: SISWON
======================================================*/


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

:root{

    --navy:#0F2235;
    --navy-light:#1E3550;

    --gold:#C8A96A;
    --gold-light:#E4C68A;

    --cream:#F8F5F0;

    --white:#FFFFFF;

    --text:#555;

    --shadow:0 20px 45px rgba(0,0,0,.12);

    --radius:22px;

}


/*==============================
RESET
==============================*/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--cream);

    color:var(--text);

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

    overflow-x:hidden;

    line-height:1.7;

}


/*==============================
TIPOGRAFÍAS
==============================*/

h1{

    font-family:'Great Vibes',cursive;

}

h2,h3{

    font-family:'Cormorant Garamond',serif;

}

section{

    padding:90px 24px;

}


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

body{

    background:

    radial-gradient(circle at top right,
    rgba(200,169,106,.10),
    transparent 35%),

    radial-gradient(circle at bottom left,
    rgba(15,34,53,.08),
    transparent 30%),

    #F8F5F0;

}


/*==============================
PARTÍCULAS DECORATIVAS
==============================*/

#particles{

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:-1;

    opacity:.25;

}


/*==============================
PRELOADER
==============================*/

#preloader{

    position:fixed;

    inset:0;

    background:#0F2235;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

    transition:.8s;

}

.loader{

    text-align:center;

    color:white;

}

.loader i{

    font-size:75px;

    color:var(--gold);

    margin-bottom:20px;

}

.loader h2{

    font-size:24px;

    font-weight:400;

    letter-spacing:1px;

}


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

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    overflow:hidden;

    padding:40px;

}


/* Fondo */

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(rgba(15,34,53,.65),
    rgba(15,34,53,.65)),

    url("../assets/img/graduacion-bg.jpg");

    background-size:cover;

    background-position:center;

    z-index:0;

}


/* Capa */

.hero-overlay{

    position:absolute;

    inset:0;

    backdrop-filter:blur(2px);

}


/* Contenido */

.hero-content{

    position:relative;

    z-index:2;

    max-width:700px;

    padding:60px;

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

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

    backdrop-filter:blur(12px);

    border-radius:35px;

}


/* Birrete */

.cap{

    width:110px;

    height:110px;

    margin:auto;

    margin-bottom:30px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

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

    border:2px solid rgba(255,255,255,.15);

}

.cap i{

    color:var(--gold);

    font-size:52px;

}


/* Texto */

.subtitle{

    color:white;

    letter-spacing:4px;

    text-transform:uppercase;

    font-size:.9rem;

    margin-bottom:15px;

}

.hero h1{

    color:white;

    font-size:5rem;

    line-height:1;

    margin-bottom:10px;

}

.hero h2{

    color:var(--gold-light);

    font-size:2rem;

    font-weight:500;

}

.hero-date{

    color:white;

    margin-top:20px;

    font-size:1.1rem;

}


/* Línea */

.divider{

    width:120px;

    height:2px;

    margin:30px auto;

    background:linear-gradient(to right,
    transparent,
    var(--gold),
    transparent);

}

/*=====================================================
BOTONES
======================================================*/

.btn-primary,
.btn-secondary,
.action{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    text-decoration:none;

    cursor:pointer;

    transition:.35s ease;

    font-weight:600;

    letter-spacing:.5px;

}

/* Botón principal */

.btn-primary{

    margin-top:40px;

    background:linear-gradient(135deg,var(--gold),var(--gold-light));

    color:#fff;

    padding:18px 40px;

    border-radius:50px;

    box-shadow:0 15px 35px rgba(200,169,106,.35);

}

.btn-primary:hover{

    transform:translateY(-5px);

    box-shadow:0 20px 45px rgba(200,169,106,.45);

}


/* Botón secundario */

.btn-secondary{

    background:white;

    color:var(--navy);

    border-radius:50px;

    padding:18px 40px;

    box-shadow:var(--shadow);

}

.btn-secondary:hover{

    background:var(--navy);

    color:white;

}


/*=====================================================
TÍTULOS DE SECCIÓN
======================================================*/

section h2{

    text-align:center;

    font-size:3rem;

    color:var(--navy);

    margin-bottom:45px;

    position:relative;

}

section h2::after{

    content:"";

    display:block;

    width:90px;

    height:3px;

    background:var(--gold);

    margin:18px auto 0;

    border-radius:50px;

}


/*=====================================================
CUENTA REGRESIVA
======================================================*/

.countdown{

    text-align:center;

}

.countdown-grid{

    display:grid;

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

    gap:30px;

    max-width:900px;

    margin:auto;

}

.countdown-grid div{

    background:white;

    border-radius:25px;

    padding:35px;

    box-shadow:var(--shadow);

    transition:.35s;

}

.countdown-grid div:hover{

    transform:translateY(-8px);

}

.countdown-grid span{

    display:block;

    font-size:3.3rem;

    color:var(--gold);

    font-weight:bold;

    font-family:'Cormorant Garamond',serif;

}

.countdown-grid small{

    display:block;

    margin-top:10px;

    color:#777;

    letter-spacing:1px;

    text-transform:uppercase;

}


/*=====================================================
MENSAJE
======================================================*/

.message{

    max-width:900px;

    margin:auto;

    text-align:center;

}

.message p{

    font-size:1.15rem;

    line-height:2;

    color:#666;

}


/*=====================================================
INFORMACIÓN
======================================================*/

.cards{

    display:grid;

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

    gap:30px;

    max-width:1200px;

    margin:auto;

}

.cards article{

    background:white;

    border-radius:25px;

    padding:45px 30px;

    text-align:center;

    transition:.35s;

    box-shadow:var(--shadow);

    position:relative;

    overflow:hidden;

}


/* brillo */

.cards article::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    background:rgba(200,169,106,.08);

    border-radius:50%;

    top:-120px;

    right:-120px;

}


.cards article:hover{

    transform:translateY(-10px);

}


.cards i{

    font-size:3rem;

    color:var(--gold);

    margin-bottom:20px;

}

.cards h3{

    font-size:1.9rem;

    color:var(--navy);

    margin-bottom:12px;

}

.cards p{

    color:#666;

}


/*=====================================================
GALERÍA
======================================================*/

.gallery{

    background:white;

}

#galleryContainer{

    display:grid;

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

    gap:20px;

    max-width:1200px;

    margin:auto;

}

#galleryContainer img{

    width:100%;

    border-radius:20px;

    object-fit:cover;

    aspect-ratio:4/5;

    cursor:pointer;

    transition:.35s;

    box-shadow:var(--shadow);

}

#galleryContainer img:hover{

    transform:scale(1.04);

}


/*=====================================================
VIDEO
======================================================*/

.video{

    text-align:center;

}

.video video{

    width:100%;

    max-width:900px;

    border-radius:25px;

    box-shadow:var(--shadow);

}


/*=====================================================
UBICACIÓN
======================================================*/

.location{

    text-align:center;

}


/*=====================================================
ACCIONES
======================================================*/

.actions{

    display:flex;

    justify-content:center;

    gap:30px;

    flex-wrap:wrap;

}


.action{

    min-width:280px;

    padding:22px 30px;

    border-radius:20px;

    background:white;

    color:var(--navy);

    box-shadow:var(--shadow);

    font-size:1rem;

}

.action:hover{

    background:var(--gold);

    color:white;

    transform:translateY(-6px);

}

.action i{

    font-size:1.4rem;

}


/*=====================================================
FOOTER
======================================================*/

footer{

    padding:80px 30px;

    text-align:center;

    background:var(--navy);

}

footer h3{

    color:white;

    font-size:2.4rem;

    margin-bottom:15px;

}

footer p{

    color:#d4d4d4;

    letter-spacing:1px;

}


/*=====================================================
SCROLLBAR
======================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#ece8df;

}

::-webkit-scrollbar-thumb{

    background:var(--gold);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#b88d48;

}

/*=====================================================
LIGHTBOX
======================================================*/

#lightbox{

    position:fixed;

    inset:0;

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

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:999999;

}

#lightbox.show{

    opacity:1;

    visibility:visible;

}

.lightbox-content{

    position:relative;

    width:92%;

    max-width:950px;

}

#lightbox img{

    width:100%;

    border-radius:18px;

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

}

#closeLightbox{

    position:absolute;

    top:-55px;

    right:0;

    background:none;

    color:white;

    border:none;

    font-size:40px;

    cursor:pointer;

}

#prevImage,
#nextImage{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

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

    color:white;

    cursor:pointer;

    font-size:22px;

    backdrop-filter:blur(10px);

}

#prevImage{

    left:-70px;

}

#nextImage{

    right:-70px;

}

#prevImage:hover,
#nextImage:hover{

    background:var(--gold);

}

/*=====================================================
CONFETTI
======================================================*/

#confetti-container{

    position:fixed;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:99998;

}

.confetti-piece{

    position:absolute;

    top:-30px;

    border-radius:2px;

    opacity:.95;

    animation:confettiFall linear forwards;

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

}

@keyframes confettiFall{

    0%{

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

        opacity:1;

    }

    100%{

        transform:
            translateY(115vh)
            rotate(900deg);

        opacity:0;

    }

}

/*=====================================================
==========      PREMIUM DESIGN V2      ================
======================================================*/

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

:root{

    --paper:#FCFAF6;
    --gold-soft:#d8be8c;
    --gold-dark:#9f7b42;

}


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

body{

    background:
    radial-gradient(circle at 10% 20%, rgba(200,169,106,.10), transparent 35%),
    radial-gradient(circle at 90% 80%, rgba(15,34,53,.06), transparent 40%),
    linear-gradient(#fcfaf6,#f8f5f0);

}


/*=========================
SECCIONES
=========================*/

section{

    position:relative;

    overflow:hidden;

}


/*=========================
TEXTURA PAPEL
=========================*/

section::before{

    content:"";

    position:absolute;

    inset:0;

    opacity:.05;

    background-image:

    radial-gradient(circle,#000 1px,transparent 1px);

    background-size:18px 18px;

    pointer-events:none;

}


/*=========================
TÍTULOS
=========================*/

section h2{

    font-size:3.4rem;

    color:var(--navy);

    letter-spacing:.5px;

}


section h2::after{

    width:120px;

    height:2px;

}


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

.hero{

    background:

    linear-gradient(135deg,#0F2235,#173551);

}


.hero-content{

    background:

    rgba(255,255,255,.12);

    border:

    1px solid rgba(255,255,255,.22);

    box-shadow:

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

}


.hero h1{

    text-shadow:

    0 5px 20px rgba(0,0,0,.25);

}


.hero h2{

    letter-spacing:2px;

}


/*=========================
MARCO DORADO
=========================*/

.hero-content::before{

    content:"";

    position:absolute;

    inset:15px;

    border:

    1px solid rgba(200,169,106,.45);

    border-radius:26px;

    pointer-events:none;

}


/*=========================
BOTONES
=========================*/

.btn-primary{

    font-size:1rem;

    letter-spacing:1px;

    text-transform:uppercase;

}


.btn-primary:hover{

    transform:

    translateY(-5px)

    scale(1.02);

}


/*=========================
CARDS
=========================*/

.cards article{

    background:

    linear-gradient(

    white,

    #fbfaf7);

    border:

    1px solid rgba(200,169,106,.18);

}


.cards article:hover{

    box-shadow:

    0 35px 60px rgba(0,0,0,.14);

}


/*=========================
ICONOS
=========================*/

.cards i{

    text-shadow:

    0 6px 12px rgba(200,169,106,.25);

}


/*=========================
GALERÍA
=========================*/

#galleryContainer img{

    border:

    8px solid white;

}


/*=========================
VIDEO
=========================*/

.video video{

    border:

    8px solid white;

}


/*=========================
FOOTER
=========================*/

footer{

    background:

    linear-gradient(

    135deg,

    #0f2235,

    #1f3c58);

}


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

.gold-shine{

    position:absolute;

    width:250px;

    height:250px;

    background:

    radial-gradient(

    rgba(200,169,106,.18),

    transparent);

    filter:blur(60px);

}

/*=====================================================
FLORES
======================================================*/

.flower{

    position:absolute;

    width:230px;

    height:230px;

    opacity:.16;

    background-repeat:no-repeat;

    background-size:contain;

    pointer-events:none;

    background-image:url("../assets/img/floral.svg");

}


.flower-top-left{

    top:-30px;

    left:-30px;

}


.flower-top-right{

    top:-30px;

    right:-30px;

    transform:scaleX(-1);

}


.flower-bottom-left{

    bottom:-30px;

    left:-30px;

    transform:scaleY(-1);

}


.flower-bottom-right{

    bottom:-30px;

    right:-30px;

    transform:scale(-1);

}