:root{

    /* Tipografías */
    --font-script:'Great Vibes', cursive;
    --font-title:'Cormorant Garamond', serif;
    --font-body:'Montserrat', sans-serif;

    /* Colores */
    --color-principal:#6D7CA8;
    --color-secundario:#7E889C;
    --color-acento:#a6b5cd;
    --color-boton:#AEBED7;
    --color-boton-hover:#8EA4C7;

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

html{
    scroll-behavior:smooth;
}

body{
    background:
        radial-gradient(circle at top,#F7FBFF 0%,#EDF5FF 30%,#E6F0FF 65%,#DEEAFE 100%);
    color:#4E5665;
    font-family:'Montserrat',sans-serif;
    overflow-x:hidden;
}

/* ======================
   PORTADA
====================== */

.portada{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    transition:1s;

    padding:40px;

    position:relative;

    overflow:hidden;

}

/* Destellos */

.portada::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:
        radial-gradient(circle,#ffffffcc 1px,transparent 2px),
        radial-gradient(circle,#ffffff99 2px,transparent 3px);

    background-size:140px 140px,220px 220px;

    animation:brillos 18s linear infinite;

    opacity:.55;

    pointer-events:none;

}

.content{

    max-width:760px;

    position:relative;

    z-index:2;

}

.saludo{

    font-family:var(--font-script);

    color:var(--color-acento);

    font-size:95px;

    text-shadow:
        0 2px 2px rgba(255,255,255,.75),
        0 8px 25px rgba(201,208,219,.30);

}

.subtitulo{

    margin-top:20px;

    letter-spacing:5px;

    line-height:2;

    color:var(--color-secundario);

    font-size:12px;

    text-transform:uppercase;

}

.nombres-portada{

    margin-top:35px;

    font-family:var(--font-script);

    font-size:82px;

    color:var(--color-principal);

    text-shadow:0 8px 25px rgba(0,0,0,.08);

}

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

.envelope{

    width:310px;

    height:200px;

    margin:70px auto;

    position:relative;

    cursor:pointer;

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

}

.base{

    width:100%;

    height:100%;

    position:absolute;

    border-radius:10px;

    background:linear-gradient(
        145deg,
        #FFFFFF 0%,
        #F5F8FE 45%,
        #EAF1FC 100%
    );

    border:2px solid #C6D5EC;

    box-shadow:
        0 18px 45px rgba(54,70,110,.18),
        inset 0 1px 0 rgba(255,255,255,.85);

}

.flap{

    position:absolute;

    width:0;

    height:0;

    border-left:155px solid transparent;

    border-right:155px solid transparent;

    border-top:105px solid #DCE7F7;

    transform-origin:top;

    transition:1s;

}

.sello{

    width:72px;

    height:72px;

    border-radius:50%;

    background:
        radial-gradient(circle at 30% 30%,
        #FFFFFF,
        #DCE6F6 45%,
        #AFC3E8 100%);

    position:absolute;

    top:60px;

    left:119px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:white;

    font-size:26px;

    font-family:var(--font-script);

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

    box-shadow:
        0 10px 30px rgba(109,124,168,.35);

    transition:.5s;

}

.abrir{

    letter-spacing:4px;

    font-size:11px;

    color:var(--color-principal);

    font-weight:500;

}

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

.hero{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:40px;

    position:relative;

    overflow:hidden;

}

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(circle at 20% 20%,rgba(255,255,255,.45),transparent 35%),

        radial-gradient(circle at 80% 10%,rgba(212,175,55,.15),transparent 30%),

        radial-gradient(circle at 50% 100%,rgba(255,255,255,.35),transparent 40%);

    pointer-events:none;

}

.hero-content{

    max-width:760px;

    position:relative;

    z-index:2;

}

.hero-title{

    color:#D4AF37;

    letter-spacing:8px;

    font-size:14px;

    text-transform:uppercase;

}

.nombres{

    margin-top:40px;

    font-family:'Great Vibes',cursive;

    color:#5D6F9C;

}

.novia{

    font-size:110px;

    line-height:1;

}

.and{

    font-size:45px;

    margin:18px 0;

    color:#D4AF37;

}

.novio{

    font-family:'Cormorant Garamond',serif;

    font-size:40px;

    letter-spacing:3px;

    color:#7C86A8;

    font-weight:400;

    white-space:nowrap;

    text-transform:none;

}

.fecha{

    margin-top:40px;

    font-family:'Cormorant Garamond',serif;

    font-size:42px;

    color:#5E677A;

}

.texto{

    margin-top:35px;

    line-height:2;

    color:#6C7484;

    font-size:19px;

}

.scroll{

    margin-top:80px;

    color:#D4AF37;

    font-size:42px;

    animation:flecha 2s infinite;

}


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

@keyframes flotar{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-12px);
    }

}

@keyframes flecha{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(10px);
    }

}

@keyframes brillos{

    from{
        transform:translateY(0);
    }

    to{
        transform:translateY(120px);
    }

}

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

.hero{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:40px;

}

.hero-content{

    max-width:760px;

}

.hero-title{

    font-family:var(--font-title);

    color:var(--color-acento);

    letter-spacing:8px;

    font-size:16px;

    font-weight:600;

    text-transform:uppercase;

}

.nombres{

    margin-top:40px;

    font-family:var(--font-script);

    color:var(--color-principal);

}

.novia{

    font-size:110px;

    line-height:1;

}

.and{

    font-size:45px;

    margin:20px 0;

    color:var(--color-acento);

}

.novio{

    font-family:var(--font-title);

    font-size:52px;

    letter-spacing:4px;

    color:var(--color-principal);

    font-weight:400;

    white-space:nowrap;

}

.fecha{

    margin-top:40px;

    font-family:var(--font-title);

    font-size:42px;

    color:var(--color-secundario);

}

.texto{

    margin-top:35px;

    line-height:2;

    color:var(--color-secundario);

    font-size:19px;

}

.scroll{

    margin-top:80px;

    color:var(--color-acento);

    font-size:42px;

    animation:flecha 2s infinite;

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

.countdown{

    min-height:100vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

}

.countdown-title{

    font-family:var(--font-title);

    color:var(--color-acento);

    font-size:22px;

    font-weight:600;

    letter-spacing:6px;

    text-transform:uppercase;

    margin-bottom:60px;

}

.boxes{

    display:flex;

    gap:25px;

    flex-wrap:wrap;

    justify-content:center;

}

.box{

    width:130px;

    height:130px;

    background:linear-gradient(
        145deg,
        #FFFFFF,
        #F7FAFF
    );

    border-radius:15px;

    border:1px solid var(--color-acento);

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

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    transition:.3s;

}

.box:hover{

    transform:translateY(-4px);

    box-shadow:
        0 16px 35px rgba(54,70,110,.16);

}

.box span{

    font-size:42px;

    font-family:var(--font-title);

    color:var(--color-principal);

    font-weight:600;

}

.box p{

    margin-top:10px;

    color:var(--color-secundario);

    font-size:12px;

    letter-spacing:2px;

    text-transform:uppercase;

}


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

@keyframes flotar{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}

@keyframes flecha{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(10px);

    }

}

/* ======================
   HISTORIA
====================== */

.historia{

    min-height:50vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:40px;

}

.historia-content{

    max-width:700px;

}

.titulo-seccion{

    font-family:var(--font-title);

    font-size:24px;

    font-weight:700;

    letter-spacing:5px;

    color:var(--color-acento);

    text-transform:uppercase;

    margin-bottom:35px;

}

.frase{

    margin-top:40px;

    line-height:2;

    font-size:20px;

    color:var(--color-secundario);

    font-family:var(--font-body);

}


/* ======================
   GALERIA
====================== */

.galeria{

    width:90%;

    max-width:1100px;

    margin:auto;

    padding-bottom:120px;

}

.galeria img{

    width:100%;

    display:block;

    border-radius:20px;

    box-shadow:0 12px 30px rgba(54,70,110,.12);

    transition:.35s ease;

}

.galeria img:hover{

    transform:scale(1.03);

    box-shadow:0 18px 40px rgba(54,70,110,.18);

}

.foto-principal{

    width:50%;

    margin:auto;

}

.fila2{

    margin-top:30px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:30px;

}

.fila3{

    margin-top:30px;

    display:grid;

    grid-template-columns:1fr 1fr 1fr;

    gap:30px;

}
/* ======================
   PADRES Y PADRINOS
====================== */

.familia{

    min-height:100vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    width:100%;

    padding:120px 40px;

}

.grupo-familia{

    width:100%;

    margin-top:80px;

}

.encabezado-familia{

    font-family:var(--font-title);

    font-size:20px;

    font-weight:600;

    letter-spacing:4px;

    color:var(--color-acento);

    text-transform:uppercase;

    margin-bottom:30px;

    text-align:center;

}

.nombres-familia{

    font-family:var(--font-title);

    font-size:42px;

    line-height:1.7;

    color:var(--color-principal);

    text-align:center;

}

.separador-familia{

    margin-top:70px;

    font-size:28px;

    color:var(--color-acento);

    text-align:center;

}

@media(max-width:768px){

    .nombres-familia{

        font-size:28px;

    }

}
/* RESPONSIVE */

@media(max-width:768px){

    .foto-principal{

        width:100%;

    }

    .fila2{

        grid-template-columns:1fr;

    }

    .fila3{

        grid-template-columns:1fr;

    }

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

.evento{

    min-height:60vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:40px;

}

.tarjeta-evento{

    width:90%;

    max-width:600px;

    background:linear-gradient(
        145deg,
        #FFFFFF,
        #F7FAFF
    );

    border-radius:20px;

    border:1px solid var(--color-acento);

    box-shadow:0 12px 30px rgba(54,70,110,.12);

    padding:60px 40px;

    margin-top:50px;

    transition:.35s ease;

}

.tarjeta-evento:hover{

    transform:translateY(-5px);

    box-shadow:0 18px 40px rgba(54,70,110,.18);

}

.icono{

    font-size:55px;

}

.nombre-lugar{

    margin-top:30px;

    font-family:var(--font-title);

    font-size:28px;

    color:var(--color-principal);

    font-weight:600;

}

.hora{

    margin-top:25px;

    font-family:var(--font-body);

    color:var(--color-secundario);

    letter-spacing:2px;

}

.boton-mapa{

    display:inline-block;

    margin-top:40px;

    padding:16px 40px;

    border-radius:50px;

    background:var(--color-boton);

    color:white;

    text-decoration:none;

    font-family:var(--font-body);

    font-weight:600;

    letter-spacing:1px;

    transition:.35s ease;

}

.boton-mapa:hover{

    transform:translateY(-3px);

    background:var(--color-boton-hover);

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

.gracias{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:40px;

}

.gracias-content{

    max-width:700px;

}

.mensaje-final{

    margin-top:50px;

    line-height:2;

    font-size:18px;

    font-family:var(--font-body);

    color:var(--color-secundario);

}

.firma{

    margin-top:80px;

    font-family:var(--font-script);

    color:var(--color-principal);

}

.novia-final{

    font-size:85px;

    line-height:1;

}

.and-final{

    font-size:50px;

    color:var(--color-acento);

}

.novio-final{

    font-size:85px;

    line-height:1;

}

.fecha-final{

    margin-top:40px;

    font-family:var(--font-title);

    font-size:34px;

    color:var(--color-secundario);

}

.corazon{

    margin-top:60px;

    color:var(--color-acento);

    font-size:40px;

    animation:latido 1.5s infinite;

}
/* ======================
   ANIMACIONES SCROLL
====================== */

.animar{

    opacity:0;

    transform:translateY(40px);

    transition:all .9s ease;

}

.animar.visible{

    opacity:1;

    transform:translateY(0);

}

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

@media(max-width:768px){

    .saludo{

        font-size:68px;

    }

    .nombres-portada{

        font-size:56px;

    }

    .novia{

        font-size:72px;

        line-height:.92;

    }

    .novio{

        font-size:34px;

        letter-spacing:3px;

        white-space:nowrap;

    }

    .and{

        font-size:38px;

        color:var(--color-acento);

        margin:20px 0;

    }

    .fecha{

        font-size:30px;

    }

    .envelope{

        width:260px;

        height:170px;

    }

    .flap{

        border-left:130px solid transparent;

        border-right:130px solid transparent;

        border-top:90px solid #DCE7F7;

    }

    .sello{

        width:64px;

        height:64px;

        left:98px;

        top:48px;

        font-size:22px;

    }

    .box{

        width:100px;

        height:100px;

    }

}