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

html{
    scroll-behavior:smooth;
}

body{
    background:#F7F4EE;
    color:#555;
    font-family:'Montserrat',sans-serif;
}


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

.portada{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    transition:1s;

}

.content{

    max-width:700px;

}

.saludo{

    font-family:'Great Vibes',cursive;

    color:#C6A76A;

    font-size:85px;

}

.subtitulo{

    margin-top:15px;

    letter-spacing:4px;

    line-height:2;

    color:#888;

    font-size:12px;

}

.nombres-portada{

    margin-top:30px;

    font-family:'Cormorant Garamond',serif;

    font-size:42px;

    color:#555;

}


/* SOBRE */

.envelope{

    width:280px;

    height:180px;

    margin:60px auto;

    position:relative;

    cursor:pointer;

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

}

.base{

    width:100%;

    height:100%;

    background:white;

    border-radius:6px;

    border:1px solid #D8BE8B;

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

    position:absolute;

}

.flap{

    position:absolute;

    width:0;

    height:0;

    border-left:140px solid transparent;

    border-right:140px solid transparent;

    border-top:95px solid #EEE0BF;

    transform-origin:top;

    transition:1s;

}

.sello{

    width:65px;

    height:65px;

    border-radius:50%;

    background:linear-gradient(145deg,#D8BC82,#B9914E);

    position:absolute;

    top:55px;

    left:108px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:white;

    font-size:20px;

    font-family:'Great Vibes',cursive;

    transition:.5s;

}

.abrir{

    letter-spacing:4px;

    font-size:11px;

    color:#B58D4C;

}


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

.hero{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:40px;

}

.hero-content{

    max-width:700px;

}

.hero-title{

    color:#C6A76A;

    letter-spacing:6px;

    font-size:13px;

}

.nombres{

    margin-top:35px;

    font-family:'Great Vibes',cursive;

    color:#C6A76A;

}

.novia{

    font-size:95px;

}

.and{

    font-size:55px;

}

.novio{

    font-size:95px;

}

.fecha{

    margin-top:35px;

    font-family:'Cormorant Garamond',serif;

    font-size:38px;

}

.texto{

    margin-top:35px;

    line-height:2;

    color:#777;

    font-size:18px;

}

.scroll{

    margin-top:80px;

    color:#C6A76A;

    font-size:40px;

    animation:flecha 2s infinite;

}


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

.countdown{

    min-height:100vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

}

.countdown-title{

    color:#C6A76A;

    letter-spacing:6px;

    margin-bottom:60px;

}

.boxes{

    display:flex;

    gap:25px;

    flex-wrap:wrap;

    justify-content:center;

}

.box{

    width:130px;

    height:130px;

    background:white;

    border-radius:15px;

    border:1px solid #D8BE8B;

    box-shadow:0 10px 25px rgba(0,0,0,.06);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

}

.box span{

    font-size:42px;

    color:#C6A76A;

    font-family:'Cormorant Garamond',serif;

}

.box p{

    margin-top:10px;

    color:#888;

    font-size:12px;

}


/* ANIMACIONES */

@keyframes flotar{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

}

@keyframes flecha{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(10px);

}

}


/* RESPONSIVE */

@media(max-width:768px){

.saludo{

font-size:65px;

}

.nombres-portada{

font-size:32px;

}

.novia{

font-size:70px;

}

.novio{

font-size:70px;

}

.and{

font-size:40px;

}

.fecha{

font-size:28px;

}

.box{

width:100px;

height:100px;

}

}
/* ======================
   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{

    color:#C6A76A;

    letter-spacing:6px;

    font-size:14px;

}

.frase{

    margin-top:40px;

    line-height:2;

    font-size:20px;

    color:#777;

}



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

.galeria{

    width:90%;

    max-width:1100px;

    margin:auto;

    padding-bottom:120px;

}

.galeria img{

    width:100%;

    border-radius:20px;

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

    transition:.5s;

}

.galeria img:hover{

    transform:scale(1.03);

}

.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;

}


@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:white;

    border-radius:20px;

    border:1px solid #D8BE8B;

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

    padding:60px 40px;

    margin-top:50px;

}

.icono{

    font-size:55px;

}

.nombre-lugar{

    margin-top:30px;

    font-size:28px;

    color:#555;

    font-family:'Cormorant Garamond',serif;

}

.hora{

    margin-top:25px;

    color:#888;

    letter-spacing:2px;

}

.boton-mapa{

    display:inline-block;

    margin-top:40px;

    background:#C6A76A;

    color:white;

    text-decoration:none;

    padding:16px 40px;

    border-radius:50px;

    transition:.4s;

}

.boton-mapa:hover{

    transform:translateY(-3px);

    background:#B9914E;

}
/* ======================
   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;

    color:#777;

    font-size:18px;

}


.firma{

    margin-top:80px;

    color:#C6A76A;

    font-family:'Great Vibes',cursive;

}

.novia-final{

    font-size:85px;

}

.and-final{

    font-size:50px;

}

.novio-final{

    font-size:85px;

}


.fecha-final{

    margin-top:40px;

    font-family:'Cormorant Garamond',serif;

    font-size:34px;

    color:#666;

}


.corazon{

    margin-top:60px;

    color:#C6A76A;

    font-size:40px;

    animation:latido 1.5s infinite;

}


@keyframes latido{

0%,100%{

transform:scale(1);

}

50%{

transform:scale(1.15);

}

}


@media(max-width:768px){

.novia-final{

font-size:65px;

}

.novio-final{

font-size:65px;

}

.and-final{

font-size:40px;

}

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

.animar{

    opacity:0;

    transform:translateY(40px);

    transition:all .9s ease;

}

.animar.visible{

    opacity:1;

    transform:translateY(0);

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

.familia{

    min-height:100vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center !important;

    width:100%;

    padding:120px 40px;

}

.grupo-familia{

    width:100%;

    margin-top:80px;

}

.encabezado-familia{

    color:#C6A76A;

    letter-spacing:4px;

    font-size:14px;

    margin-bottom:30px;

    text-align:center;

}

.nombres-familia{

    font-family:'Cormorant Garamond',serif;

    font-size:42px;

    line-height:1.7;

    color:#555;

    text-align:center;

}

.separador-familia{

    margin-top:70px;

    color:#C6A76A;

    font-size:28px;

    text-align:center;

}

@media(max-width:768px){

    .nombres-familia{

        font-size:28px;

    }

}