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

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

html{
    scroll-behavior:smooth;
}

body{
    background:#eef6fb;
    color:#444;
    font-family:'Montserrat',sans-serif;
    overflow-x:hidden;
}

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

:root{

    --babyBlue:#d9edf9;
    --silver:#c9ccd3;
    --white:#ffffff;
    --text:#505050;
    --shadow:0 15px 40px rgba(0,0,0,.18);

}

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

@font-face{

    font-family:"Vivaldi";

    src:url("fonts/VIVALDII.TTF");

}

.titulo{

    font-family:'Cinzel',serif;

}

.nombre{

    font-family:'Vivaldi',cursive;

}

.especial{

    font-family:"Lucida Calligraphy",cursive;

}

/*==================================================
ESCENAS
==================================================*/

.escena{

    width:100%;

    min-height:100vh;

    display:none;

    justify-content:center;

    align-items:center;

    position:relative;

    overflow:hidden;

}

.escena.activa{

    display:flex;

}

/*==================================================
LOADER
==================================================*/

#loader{

    background:linear-gradient(#ffffff,#dceffc);

}

.loader{

    text-align:center;

}

.spinner{

    width:70px;

    height:70px;

    border-radius:50%;

    border:8px solid #dce8f2;

    border-top:8px solid #78b8ef;

    animation:girar 1s linear infinite;

    margin:auto auto 25px;

}

.loader p{

    font-size:18px;

    letter-spacing:2px;

}

@keyframes girar{

    to{

        transform:rotate(360deg);

    }

}

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

#intro{

    background:linear-gradient(#fefefe,#dceffc);

}

.introBox{

    text-align:center;

    width:min(90%,420px);

}

.introBox h1{

    font-family:'Cinzel',serif;

    font-size:42px;

    margin-bottom:20px;

}

.introBox p{

    margin-bottom:35px;

    line-height:1.8;

}

#btnEntrar{

    border:none;

    padding:18px 45px;

    border-radius:50px;

    background:#78b8ef;

    color:#fff;

    cursor:pointer;

    font-size:18px;

    transition:.3s;

}

#btnEntrar:hover{

    transform:scale(1.05);

}

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

#sobre,
#sobreAbierto,
#hoja{

    background:linear-gradient(#edf7fd,#d8ecfa);

}

.sobreBox,
.sobreAbiertoBox,
.hojaBox{

    position:relative;

    width:min(92vw,520px);

    display:flex;

    justify-content:center;

    align-items:center;

}

/*==================================================
IMÁGENES DEL SOBRE
==================================================*/

#sobreImg,
#sobreAbiertoImg{

    width:100%;

    display:block;

    user-select:none;

    pointer-events:none;

}

/*==================================================
SELLO
==================================================*/

#romperSello{

    position:absolute;

    left:50%;

    top:56%;

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

    background:none;

    border:none;

    cursor:pointer;

    z-index:30;

}

#selloImg{

    width:95px;

    transition:.45s;

    filter:drop-shadow(0 8px 20px rgba(0,0,0,.25));

}

#romperSello:hover #selloImg{

    transform:scale(1.08);

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

#hoja{

    overflow:hidden;

}

.hojaBox{

    position:relative;

    width:min(92vw,520px);

    aspect-ratio:3/4;

}

#hojaImg{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:contain;

    z-index:1;

}

/*==================================================
TEXTO SOBRE LA HOJA
==================================================*/

.textoHoja{

    position:absolute;

    inset:0;

    z-index:5;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:60px 40px;

}

#tituloInvitacion{

    font-family:'Cinzel',serif;

    font-size:clamp(28px,5vw,42px);

    color:#6d7c8f;

    letter-spacing:4px;

    margin-bottom:25px;

}

#nombreInvitada{

    font-family:'Vivaldi',cursive;

    font-size:clamp(54px,9vw,86px);

    color:#6aa9d8;

    line-height:1;

    text-shadow:0 2px 8px rgba(0,0,0,.12);

}

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

.saleHoja{

    animation:salirHoja 1.4s ease forwards;

}

@keyframes salirHoja{

    0%{

        transform:translateY(180px);

        opacity:0;

    }

    100%{

        transform:translateY(0);

        opacity:1;

    }

}

.romper{

    animation:romper .8s forwards;

}

@keyframes romper{

    to{

        transform:translate(-50%,-50%) scale(1.8) rotate(18deg);

        opacity:0;

    }

}

/*==================================================
FOTO BEBÉ
==================================================*/

#bebe{

    background:#000;

}

#fotoBebe{

    width:100%;

    height:100vh;

    object-fit:cover;

}

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

#hero{

    background:#000;

}

#heroImg{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

}

.heroOverlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

        rgba(0,0,0,.15),

        rgba(0,0,0,.35),

        rgba(0,0,0,.55)

    );

    z-index:1;

}

.heroContenido{

    position:relative;

    z-index:2;

    text-align:center;

    color:#fff;

    padding:20px;

}

.heroContenido h2{

    font-family:'Cinzel',serif;

    font-size:30px;

    letter-spacing:4px;

    margin-bottom:20px;

}

.heroContenido h1{

    font-family:'Vivaldi',cursive;

    font-size:82px;

    font-weight:normal;

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

}

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

.contador{

    position:absolute;

    bottom:35px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    gap:15px;

    z-index:3;

}

.contador div{

    width:78px;

    height:78px;

    border-radius:16px;

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

    backdrop-filter:blur(12px);

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

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    color:#fff;

}

.contador span{

    font-size:28px;

    font-weight:600;

}

.contador small{

    font-size:11px;

    letter-spacing:2px;

    text-transform:uppercase;

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

.seccion{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:70px 25px;

    background:
        url("Recursos/sobre/hoja.png") center center / contain no-repeat,
        #f8fbfe;

}

.contenedor{

    width:min(900px,95%);

    text-align:center;

}

.seccion h2{

    font-family:'Cinzel',serif;

    font-size:34px;

    color:#6f7c91;

    margin-bottom:30px;

    text-shadow:0 1px 2px rgba(255,255,255,.85);

}

.seccion p{

    font-size:19px;

    line-height:2;

    color:#475569;

    text-shadow:0 1px 1px rgba(255,255,255,.70);

}

/*==================================================
ORACIÓN
==================================================*/

#oracion{

    overflow:hidden;

}

#textoOracion{

    width:60%;

    max-width:450px;

    margin:auto;

    font-size:22px;

    line-height:2.1;

    color:#3f4a5a;

    font-weight:500;

    text-align:center;

    text-shadow:0 1px 2px rgba(255,255,255,.9);

}

/*==================================================
PROGRAMA
==================================================*/

#listaPrograma{

    width:min(520px,100%);

    margin:40px auto 0;

    display:flex;

    flex-direction:column;

    gap:18px;

}

.itemPrograma{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 24px;

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

    border:1px solid rgba(201,204,211,.55);

    border-radius:18px;

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

    backdrop-filter:blur(3px);

}

.horaPrograma{

    font-weight:700;

    color:#78aede;

    font-size:20px;

}

.eventoPrograma{

    color:#555;

    font-size:18px;

    text-align:right;

}

/*==================================================
LLUVIA DE SOBRES
==================================================*/

#sobres{
    background:
        url("Recursos/sobre/hoja.png") center center / contain no-repeat,
        #f5fbff;
}

#sobres p{
    width:50%;
    max-width:380px;
    margin:0 auto;
}


/*==================================================
VESTIMENTA
==================================================*/

#vestimenta{

    background:
        url("Recursos/sobre/hoja.png") center center / contain no-repeat,
        #edf7fd;

}

/*==================================================
DIRECCIÓN
==================================================*/

#direccion{

    background:
        url("Recursos/sobre/hoja.png") center center / contain no-repeat,
        #f8fbfe;

}

/*==================================================
BOTÓN MAPA
==================================================*/

#btnMapa{

    display:inline-block;

    margin-top:35px;

    padding:16px 38px;

    border-radius:50px;

    background:#78b8ef;

    color:#fff;

    text-decoration:none;

    transition:.30s;

    box-shadow:0 8px 20px rgba(120,184,239,.30);

}

#btnMapa:hover{

    transform:scale(1.05);

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

#galeria{

    background:#eef7fd;

}

.gridGaleria{

    margin-top:45px;

    display:grid;

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

    gap:24px;

}

.gridGaleria img{

    width:100%;

    aspect-ratio:4/5;

   object-fit:contain;

   background:#fff;

    border-radius:20px;

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

    transition:.35s;

}

.gridGaleria img:hover{

    transform:scale(1.03);

}

/*==================================================
FIRMA
==================================================*/

#firma{

    padding:35px 20px;

    background:#d9edf9;

    text-align:center;

}

#firma p{

    font-size:14px;

    color:#6a7b8c;

    letter-spacing:2px;

}

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

@media (max-width:768px){

    #nombreInvitada{

        font-size:64px;

    }

    .heroContenido h1{

        font-size:64px;

    }

    .contador{

        gap:8px;

    }

    .contador div{

        width:64px;

        height:64px;

    }

    .contador span{

        font-size:22px;

    }

    .seccion h2{

        font-size:28px;

    }

    .seccion p{

        font-size:17px;

        line-height:1.8;

    }

    #textoOracion{

        width:88%;

        font-size:19px;

        line-height:1.9;

    }

    .itemPrograma{

        padding:16px 18px;

    }

}

@media (max-width:480px){

    #nombreInvitada{

        font-size:52px;

    }

    .heroContenido h1{

        font-size:52px;

    }

    #tituloInvitacion{

        font-size:24px;

    }

    .contador{

        flex-wrap:wrap;

        justify-content:center;

    }

    .itemPrograma{

        flex-direction:column;

        gap:10px;

        text-align:center;

    }

    .eventoPrograma{

        text-align:center;

    }

}

/*==================================================
MENSAJE FINAL - PADRES Y PADRINOS
==================================================*/

.separador{

    width:70%;

    margin:40px auto 30px;

    border:none;

    border-top:1px solid #b8cfe5;

}

.mensaje-final{

    margin-top:20px;

    max-width:700px;

    margin-left:auto;

    margin-right:auto;

    text-align:center;

    color:#556270;

}

.mensaje-final h3{

    font-family:"Lucida Calligraphy","Lucida Calligraphy Italic",cursive;

    font-size:2rem;

    font-weight:normal;

    color:#6d8fb8;

    margin-bottom:20px;

    line-height:1.4;

}

.mensaje-final p{

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

    font-size:1.05rem;

    line-height:1.9;

    color:#555;

    text-shadow:0 1px 2px rgba(255,255,255,.8);

    margin:12px 0;

}/*==================================================
CONTINUACIÓN MENSAJE FINAL
==================================================*/

.mensaje-final .frase{

    font-size:1.15rem;

    font-style:italic;

    color:#6b7280;

    margin:28px 0;

    line-height:2;

    text-shadow:0 1px 2px rgba(255,255,255,.80);

}

.mensaje-final .firma{

    margin-top:30px;

    color:#6d8fb8;

    font-weight:500;

}

.mensaje-final h4{

    font-family:"Vivaldi",cursive;

    font-size:2.6rem;

    font-weight:normal;

    color:#6d8fb8;

    margin-top:10px;

    text-shadow:0 1px 3px rgba(0,0,0,.08);

}

/*==================================================
CODIGO DE VESTIMENTA FULL SCREEN
==================================================*/

.vestimentaFull{

    width:100%;

    height:100vh;

    padding:0;

    overflow:hidden;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#ffffff;

}

.vestimentaFull img{

    width:100%;

    height:100%;

    object-fit:contain;

}

/*==================================================
AJUSTES FINALES DE UNIFICACIÓN
==================================================*/

#padres .contenedor,
#padrinos .contenedor,
#programa .contenedor,
#sobres .contenedor,
#vestimenta .contenedor,
#direccion .contenedor{

    position:relative;

    z-index:2;

}

#padres h2,
#padrinos h2,
#programa h2,
#sobres h2,
#vestimenta h2,
#direccion h2{

    color:#6d7c8f;

    text-shadow:0 1px 2px rgba(255,255,255,.90);

}

#padres p,
#padrinos p,
#programa p,
#sobres p,
#vestimenta p,
#direccion p{

    color:#475569;

    text-shadow:0 1px 2px rgba(255,255,255,.90);

}

#direccion iframe{

    width:100%;

    border:none;

    border-radius:22px;

    overflow:hidden;

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

    margin-top:30px;

}

#programa,
#padres,
#padrinos,
#sobres,
#vestimenta,
#direccion{

    position:relative;

    overflow:hidden;

}

#programa::before,
#padres::before,
#padrinos::before,
#sobres::before,
#vestimenta::before,
#direccion::before{

    content:"";

    position:absolute;

    inset:0;

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

    pointer-events:none;

}/*==================================================
BOTÓN DESLIZA
==================================================*/

.deslizaHero{

    position:absolute;

    left:50%;

    bottom:120px;

    transform:translateX(-50%);

    padding:12px 24px;

    border-radius:30px;

    background:rgba(109,143,184,.92);

    backdrop-filter:blur(10px);

    color:#ffffff;
border:2px solid rgba(255,255,255,.85);

box-shadow:0 8px 25px rgba(0,0,0,.18);
    font-family:'Montserrat',sans-serif;

    font-size:16px;

    font-weight:500;

    letter-spacing:1px;

    z-index:50;

    display:none;

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

}

@keyframes flotar{

    0%,100%{

        transform:translate(-50%,0);

    }

    50%{

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

    }

}

/*==================================================
FIN DEL ARCHIVO
==================================================*/