/* FUENTES */
@font-face {
    font-family: 'fuente1';
    src: url(../fonts/playfairdisplay/static/PlayfairDisplay-Regular.ttf);
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'fuente1-cursiva';
    src: url(../fonts/playfairdisplay/static/PlayfairDisplay-Italic.ttf);
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'fuente3';
    src: url(../fonts/Dancing_Script/DancingScript-VariableFont_wght.ttf);
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'fuente4';
    src: url(../fonts/Kapakana/static/Kapakana-Regular.ttf);
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'fuente5';
    src: url(../fonts/Cormorant_Garamond/CormorantGaramond-VariableFont_wght.ttf);
    font-display: swap;
}

@font-face {
    font-family: 'fuente7';
    src: url(../fonts/Parisienne/Parisienne-Regular.ttf);
    font-display: swap;
}

    
/********* COLORES *********/
:root {
    /* COLORES */
    --terracotagpt: #cb997e; /* Terracota */
    --terracota-oscuro: #5c280c;
    --darkclay: #7A3B2E;
    --forestolive: #4f5d2f;
    --olive:#808000;
    --olivogpt: #6b705c; /* Títulos */
    --beige1: #E8D8C3;
    --beigegpt: #f5f1e8; /* Fondo */
    --gris: #3e3e3e; /* Descripción */
    --dorado: hsl(60, 70%, 90%);
}


body {
    margin: 0;
    background-color: white;
    background-image: url(../img/textura-papel.jpg);
}

main {
    width: 80%;
    background-color: var(--beigegpt);
    box-shadow: 0px 0px 30px 3px rgb(0 0 0 / 50%);
    margin-left: auto;
    margin-right: auto;
}   

a {
    text-decoration: none;
}

#header-card-index {
    width: 100%;
    height: 100vh;
    margin-left: auto;
    margin-right: auto;
    background: url("../img/paisaje-fondo.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    align-content: center;
    text-align: center;
    color: #fff;
}

#header-card-index #header-card-index-label-1 {
    font-family: 'fuente1';
    margin: 0;
}

#header-card-index #sobre-closed-img {
    margin: 0;
    display: inline-block;
    width: 35rem;
}


#header-card-index #header-card-index-label-2 {
    font-family: 'fuente4';
    font-size: 5em;
    margin: 0;
    margin-bottom: 1rem;
}

#header-card-index #header-card-index-label-3 {
    font-family: 'fuente1';
    margin: 0;
}












/* --------------- ANIMACIÓN DE TEXTOS (aparecer desde abajo) -------------- */
.reveal-text {
    opacity: 0;
    transform: translateY(2.5rem);
    transition: opacity .8s cubic-bezier(.25, .1, .25, 1),
                transform .8s cubic-bezier(.25, .1, .25, 1);
    will-change: opacity, transform;
}

.reveal-text.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .reveal-text {
        transition: none;
        opacity: 1;
        transform: none;
    }
}




/* --------------- HEADER CARD -------------- */
#header-card {
    min-height: 100vh;
    width: 100%;
    margin: 0;
    background: url("../img/paisaje-fondo.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
    align-content: center ;
    color: #fff;
    overflow: hidden;
}

#header-card-hero {
    background-color: hsla(50, 10%, 20%, .4);
    width: inherit;
    min-height: inherit;
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

#header-hero-box {
    display: inline-block;
    z-index: 1;
    position: relative;
    width: fit-content;
    height: 80%;
    margin: 0;
}

#header-card-hero #corazon-bordado-img {
    position: absolute;
    margin: 0;
    z-index: 2;
    width: 30rem;
    max-width: 30rem;
    pointer-events: none;
    transform: translateX(-50%);
    left: 50%;
}

#corazon-bordado-img.reveal-text {
    transition-duration: 2s;
}

#header-card-hero #sobre-opened-img {
    z-index: 1;
    width: 80%;
    max-width: 30rem;
    margin: 0;
    margin-bottom: 1rem;
    display: inline-block;
}

#header-card #header-label-1,
#header-card #header-label-2 {
    font-family: 'fuente4';
    font-size: 2.5em;
    margin: 0;
    margin-top: 1rem;
    margin-bottom: 1rem;
}












/* ---------- NOMBRES ESPOSOS CARD ------------ */

#nombres-esposos-card {
    text-align: center;
    margin: 0;
    margin-bottom: 5rem;
    padding: 0 3rem;
    color: var(--gris);
}

#nombres-esposos-card #logo-ze {
    display: block;
    min-width: 15rem;
    margin: 0 auto;
}

#nombres-esposos-card p {
    font-family: 'fuente1-cursiva';
    font-size: 1.7em;
}

#nombres-esposos-card #nombres-esposos-label-2 {
    font-size: 7em;
    font-family: 'fuente4';
    color: var(--terracota-oscuro);
    margin: 0;
}

#nombres-esposos-card #amphersant {
    font-family: 'fuente1';
    font-size: .6em;
    margin: 0;
}

#nombres-esposos-card .nombres-esposos-divider {
    width: 10rem;
    height: .15rem;
    background-color: var(--darkclay);
    margin: 1rem;
    margin-left: auto;
    margin-right: auto;
}


#padres-card {
    width: 100%;
    text-align: center;
    color: var(--terracota-oscuro);
    padding: 0;
    margin: 12rem 0;
}

#padres-card #nombres_padres_novia,
#padres-card #nombres_padres_novio {
    display: inline-block;
    margin: 0 5rem;
}

#padres-card #padres_title {
    font-size: 2em;
    font-family: 'fuente1-cursiva';
}

#nombres_padres_novia #padres-novia-label-1,
#nombres_padres_novio #padres-novio-label-1 {
    font-size: 2em;
    font-family: 'fuente1-cursiva';
}

#nombres_padres_novia #padres-novia-label-2,
#nombres_padres_novio #padres-novio-label-2 {
    font-family: 'fuente4';
    font-size: 4em;
    color: var(--terracota-oscuro);
}


#padres-card #padres-decoration {
    display: flex;
    width: fit-content;
    margin: 0 auto;
    margin-bottom: 2rem;
    flex-direction: column;
}

#padres-decoration #padres-linea-l,
#padres-decoration #padres-linea-r {
    display: block;
    height: 2.5rem;
    width: .11rem;
    background-color: var(--terracota-oscuro);
    margin: 0 auto;
}

#padres-decoration #padres-punto {
    display: inline-block;
    width: .3rem;
    height: .3rem;
    border-radius: 50%;
    background-color: var(--terracota-oscuro);
    margin: 1rem 0;
}

#divider-1 {
    width: 70%;
    height: .15rem;
    background-color: var(--darkclay);
    margin: 3rem auto;
}










/* ------------- TIMER CARD -------------- */
#timer-card {
    margin: 0;
    padding-top: 3rem;
    padding-bottom: 3rem;
    text-align: center;
    align-content: center;
    background-color: var(--olivogpt);
    width: 100%;
}

#timer-card #timer-decoration {
    margin: 0;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

#timer-card .timer-linea-l, 
#timer-card .timer-linea-r {
    display: inline-block;
    width: 20rem;
    height: .11rem;
    background-color: var(--beigegpt);
    margin: 0;
    margin-left: auto;
    margin-right: auto;
}

#timer-card .timer-punto {
    display: inline-block;
    width: .3rem;
    height: .3rem;
    border-radius: 50%;
    background-color: var(--beigegpt);
    margin: 0;
    margin-left: 1rem;
    margin-right: 1rem;
}

#timer-card .timer-div {
    display: inline-block;
    text-align: center;
    align-content: center;
}

#timer-card .tiempo {
    font-family: 'fuente4';
    width: 8rem;
    height: 8rem;
    background-color: var(--olivogpt);
    border-radius: 50%;
    align-content: center;
    text-align: center;
    color: var(--dorado);
    font-size: 4em;
    margin: 0;
    margin-right: 1rem;
    margin-left: 1rem;
}

#timer-card .descripcion {
    font-family: 'fuente4';
    font-size: 2em;
    margin: 0;
    color: white;
}

#timer-card .punto {
    display: inline-block;
    border-radius: 50%;
    background-color: var(--terracotagpt);
    margin: 0;
    margin-bottom: 5.5rem;
}











/* -------------- CEREMONIA | CELEBRATION | VESTUARIO CARDS -------------- */

#ceremonia-card,
#vestuario-card,
#galeria-card,
#regalos-card {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 0;
    width: 100%;
    min-height: 70rem;
    padding: 5rem;
    margin: 0 auto;
    align-items: center;
    align-content: center;
    text-align: center;
}

#galeria-card {
    grid-template-rows: auto auto;
    gap: 3rem;
    padding: 0;
    position: relative;
    text-align: center;
}

#vestuario-card {
    max-height: 100vh;
    background-color: var(--beigegpt);
    color: var(--olivogpt);
}

#ceremonia-card {
    background-color: var(--darkclay);
    color: white;
}

#regalos-card {
    min-height: fit-content;
    background-color: var(--olivogpt);
    color: white;
}


#ceremonia-card .icon,
#vestuario-card .icon,
#regalos-card .icon {
    max-width: 5rem;
    height: auto;
    display: block;
    margin: auto;
}

#ceremonia-card #ceremonia-title,
#vestuario-card #vestuario-title,
#galeria-card #galeria-title,
#regalos-card #regalos-title {
    font-family: 'fuente1';
    font-size: 3em;
}

#ceremonia-card #ceremonia-title {
    margin: 8rem auto;
}

#vestuario-card #vestuario-title {
    margin: auto;
    margin-top: 8rem;
    margin-bottom: 0rem;
}

#ceremonia-card #ceremonia-label-1,
#vestuario-card #vestuario-label-2,
#vestuario-card #vestuario-label-4,
#galeria-card #galeria-label-1 {
    font-size: 2em;
    font-family: 'fuente3';
    margin: 2rem auto;
}

#vestuario-card #vestuario-label-1 {
    font-size: 2em;
    font-family: 'fuente3';
    margin: auto;
    margin-top: 0;
    margin-bottom: 2rem;
}

#galeria-card #galeria-label-1 {
    color: var(--olivogpt);
}

#ceremonia-card #ceremonia-label-2,
#ceremonia-card #ceremonia-label-3,
#ceremonia-card #ceremonia-label-4,
#vestuario-card #vestuario-label-5,
#vestuario-card #vestuario-label-6,
#vestuario-card #vestuario-label-7,
#regalos-card #regalos-label-1, 
#regalos-card #regalos-label-2 {
    font-size: 2.4em;
    font-family: 'fuente7';
    margin: 2rem auto;
}

#vestuario-card #vestuario-label-2,
#vestuario-card #vestuario-label-3,
#vestuario-card #vestuario-label-4 {
    font-size: 3em;
    font-family: 'fuente7';
    margin: 2rem auto;
}

#vestuario-card #vestuario-label-3,
#vestuario-card #vestuario-label-5,
#vestuario-card #vestuario-label-6,
#vestuario-card #vestuario-label-7 {
    color: var(--olive);
}

#ceremonia-card #ceremonia-date-box {
    margin: 2rem auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

#ceremonia-card #ceremonia-label-fecha,
#ceremonia-card #ceremonia-label-hora {
    font-family: 'fuente1';
    font-size: 3.5em;
    display: inline-block;
    margin: 0;
}

#ceremonia-card #ceremonia-decoration {
    display: inline-block;
    margin: 4rem;
    margin-bottom: auto;
    margin-top: auto;
}

.decoration-linea-t,
.decoration-linea-b {
    width: .2rem;
    height: 2rem;
    background-color: var(--beigegpt);
    margin: 0;
    margin-left: auto;
    margin-right: auto;
}

.decoration-punto {
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background-color: var(--beigegpt);
    margin: 1rem;
    margin-left: auto;
    margin-right: auto;
}

#ceremonia-card #ceremonia-button,
#regalos-card #regalos-button {
    width: 50%;
    height: 4rem;
    background-color: transparent;
    color: white;
    border: 0;
    font-family: 'fuente5';
    font-size: 3em;
    text-decoration: none;
    border-radius: .3rem;
    display: block;
    margin: auto;
    padding: 0;
}


/* --------------- GALERIA CARD -------------- */

.foto {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100vh;
}

.foto-gradient {
    width: inherit;
    height: inherit;
    background: linear-gradient(
        hsla(50, 50%, 90%, 1),
        transparent,
        transparent,
        transparent,
        transparent,
        hsla(50, 50%, 90%, 1)
    );
}

/* background-image de #foto-1 y #foto-2 se asigna vía JS (ver animations.js)
   cuando la sección entra al viewport, para diferir su carga */

#galeria-card .icon {
    max-width: 5rem;
    height: auto;
    display: block;
    margin: auto;
}

#galeria-title {
    font-family: 'fuente1';
    font-size: 3rem;
    font-weight: 900;
    color: var(--forestolive);
}

#galeria-box-2 {
    position: relative;
    height: fit-content;
}

.gradient {
    position: absolute;
    top: 0;
    height: 100%;
    width: 10%;
}

#galeria-gradient-1 {
    background: linear-gradient(
        to right,
        hsla(50, 50%, 90%, 1),
        transparent
    );
}

#galeria-gradient-2 {
    right: 0;
    background: linear-gradient(
        to right,
        transparent,
        hsla(50, 50%, 90%, 1)
    );
}

#galeria-track {
    display:flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

#galeria-track::-webkit-scrollbar {
    display: none;
}

.imagen  {
    height: 30rem;
}



/* ==================================================================
   RESPONSIVE - PHONE / TABLET
   ================================================================== */

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    overflow-x: hidden;
}

img {
    max-width: 100%;
}

@media (max-width: 900px) {
    /* HEADER CARD */
    #header-card #corazon-bordado-img {
        width: 100%;
        max-width: 30rem;
    }

    #header-card #sobre-opened-img {
        height: auto;
        width: 100%;
        max-width: 30rem;
    }

    #header-card #header-label-1,
    #header-card #header-label-2 {
        font-size: 2em;
        padding: 0 5rem;
    }

    /* NOMBRES ESPOSOS CARD */
    #nombres-esposos-card {
        height: fit-content;
    }

    #nombres-esposos-card #logo-ze {
        min-width: 0;
        width: 40%;
        max-width: 10rem;
    }

    #nombres-esposos-card p {
        font-size: 1.3em;
    }

    #nombres-esposos-card #nombres-esposos-label-2 {
        font-size: 4em;
    }



    #padres-card {
        height: fit-content;
        margin: 0;
        margin-bottom: 9rem;
    }

    #padres-card #nombres_padres_novia,
    #padres-card #nombres_padres_novio {
        display: inline-block;
        margin: 1.5rem 0;
    }

    #nombres_padres_novia #padres-novia-label-1,
    #nombres_padres_novio #padres-novio-label-1 {
        font-size: 2em;
    }

    #nombres_padres_novia #padres-novia-label-2,
    #nombres_padres_novio #padres-novio-label-2 {
        font-family: 'fuente4';
        font-size: 3em;
    }


    #padres-card #padres-decoration {
        width: fit-content;
        margin: 0 auto;
        display: flex;
    }

    #padres-decoration #padres-linea-l,
    #padres-decoration #padres-linea-r {
        height: 2rem;
        width: .15rem;
        margin: 0 auto;
    }

    #padres-decoration #padres-punto {
        width: .3rem;
        height: .3rem;
        margin: 1rem 0;
    }

    #divider-1 {
        width: 25rem;
        height: .15rem;
        margin: 8rem auto;
    }
    




    /* TIMER CARD */
    #timer-card .timer-linea-l,
    #timer-card .timer-linea-r {
        width: 40%;
    }

    #timer-card .tiempo {
        width: 4.2rem;
        height: 4.2rem;
        font-size: 3em;
        margin-left: 2.5rem;
        margin-right: 2.5rem;
    }

    #timer-card .descripcion {
        font-size: 2em;
    }

    #timer-card .punto {
        margin-bottom: 2.8rem;
    }

    /* CEREMONIA / CELEBRACION / VESTUARIO CARDS */
    #ceremonia-card,
    #vestuario-card,
    #galeria-card {
        min-height: 100vh;
        max-height: 110vh;
    }

    #vestuario-card {
        max-height: 80vh;
    }

    #regalos-card {
        min-height: 80vh;
    }

    #ceremonia-card .icon,
    #vestuario-card .icon,
    #galeria-card .icon,
    #regalos-card .icon {
        height: 4rem;
    }

    #ceremonia-card #ceremonia-title,
    #regalos-card #regalos-title,
    #galeria-card #galeria-title {
        width: 100%;
        max-width: 30rem;
        margin: 3rem auto;
    }

    #vestuario-card #vestuario-title {
        width: 100%;
        max-width: 30rem;
        margin: auto;
        margin-bottom: 0;
        margin-top: 3rem;
    }

    #ceremonia-card #ceremonia-label-1,
    #vestuario-card #vestuario-label-1,
    #regalos-card #regalos-label-1,
    #regalos-card #regalos-label-2 {
        font-size: 1.6em;
    }

    #ceremonia-card #ceremonia-label-2,
    #ceremonia-card #ceremonia-label-3,
    #ceremonia-card #ceremonia-label-4,
    #vestuario-card #vestuario-label-2,
    #vestuario-card #vestuario-label-3,
    #vestuario-card #vestuario-label-4,
    #vestuario-card #vestuario-label-5,
    #vestuario-card #vestuario-label-6,
    #vestuario-card #vestuario-label-7 {
        font-size: 2.4em;
    }

    #ceremonia-card #ceremonia-label-fecha,
    #ceremonia-card #ceremonia-label-hora {
        font-size: 3em;
    }

    #ceremonia-card #ceremonia-decoration {
        margin: 1rem 3rem;
    }

    #ceremonia-card #ceremonia-button,
    #regalos-card #regalos-button {
        width: 100%;
        height: 3.2rem;
        font-size: 3em;
    }

    .imagen  {
        height: 25rem;
    }
}





@media (max-width: 500px) {
    main {
        width: 95%;
    }

    #header-card-index #sobre-closed-img {
        margin: 0;
        display: inline-block;
        width: 35rem;
    }


    #header-card-index #header-card-index-label-2 {
        font-size: 3em;
        margin: 2rem auto;
    }

    #header-card-index #header-card-index-label-1,
    #header-card-index #header-card-index-label-3 {
        font-size: 1em;
    }


    #header-card #corazon-bordado-img {
        width: 20rem;
        top: 1rem
    }

    #header-card #header-label-1,
    #header-card #header-label-2 {
        font-size: 1.5em;
        padding: 0;
    }

    #nombres-esposos-card {
        height: 25rem;
        margin-bottom: 4rem;
    }

    #nombres-esposos-card p {
        font-size: 1em;
    }

    #nombres-esposos-card #nombres-esposos-label-2 {
        font-size: 2.35em;
    }

    #padres-card {
        height: 30rem;
        margin: 0;
    }

    #padres-card #nombres_padres_novia,
    #padres-card #nombres_padres_novio {
        width: 100%;
        display: inline-block;
        margin: 0;
    }

    #nombres_padres_novia #padres-novia-label-1,
    #nombres_padres_novio #padres-novio-label-1 {
        font-size: 1em;
    }

    #nombres_padres_novia #padres-novia-label-2,
    #nombres_padres_novio #padres-novio-label-2 {
        font-size: 2.2em;
    }


    #padres-card #padres-decoration {
        display: flex;
        width: fit-content;
        margin: 0 auto;
        margin-bottom: 1rem;
    }

    #padres-decoration #padres-linea-l,
    #padres-decoration #padres-linea-r {
        display: inline-block;
        height: 1.5rem;
        width: .12rem;
    }

    #padres-decoration #padres-punto {
        width: .25rem;
        height: .25rem;
        margin: .5rem auto;
    }

    #divider-1 {
        width: 15em;
        height: .12rem;
        margin: 5rem auto;
    }


    #timer-card {
        padding: 0;
    }

    #timer-card .tiempo {
        font-size: 3em;
    }

    #timer-card .descripcion {
        font-size: 1.8em;
    }

    #timer-card .tiempo,
    #timer-card .descripcion {
        width: auto;
        height: auto;
        margin: .25rem .5rem;
    }

    #timer-card .timer-linea-l,
    #timer-card .timer-linea-r {
        width: 40%;
    }

    #ceremonia-card,
    #vestuario-card,
    #regalos-card {
        height: 100vh;
        max-height: 10rem;
        padding: 3rem;
    }

    #vestuario-card {
        max-height: 80vh;
    }

    #regalos-card {
        height: auto;
        min-height: 100vh;
        max-height: none;
    }

    #ceremonia-card .icon,
    #vestuario-card .icon,
    #galeria-card .icon,
    #regalos-card .icon {
        height: 3rem;
        margin: 1rem auto;
    }

    #ceremonia-card #ceremonia-title,
    #ceremonia-card #ceremonia-button,
    #vestuario-card #vestuario-title,
    #galeria-card #galeria-title,
    #regalos-card #regalos-title,
    #regalos-card #regalos-button {
        font-size: 1.5rem;
        margin: 1rem 0;
    }


    #ceremonia-card #ceremonia-label-1,
    #vestuario-card #vestuario-label-1,
    #regalos-card #regalos-label-1 {
        font-size: 1.5em;
        margin: 0;
    }

    #ceremonia-card #ceremonia-label-2,
    #ceremonia-card #ceremonia-label-3,
    #ceremonia-card #ceremonia-label-4,
    #vestuario-card #vestuario-label-2,
    #vestuario-card #vestuario-label-3,
    #vestuario-card #vestuario-label-4,
    #vestuario-card #vestuario-label-5,
    #vestuario-card #vestuario-label-6,
    #vestuario-card #vestuario-label-7 {
        font-size: 1.5em;
        margin: 1rem 0;
    }

    #ceremonia-card #ceremonia-label-fecha,
    #ceremonia-card #ceremonia-label-hora {
        font-size: 2.5em;
    }

    #ceremonia-card #ceremonia-date-box {
        margin: 2.5rem 0;
    }

    #ceremonia-card #ceremonia-decoration {
        margin: 0 1.3rem;
    }

    #galeria-card {
        height: 25rem;
    }

    .imagen  {
        height: 15rem;
    }

    #galeria-card {
        height: 80vh;
    }

    #galeria-card .icon {
        max-width: 3rem;
        height: auto;
        display: block;
        margin: auto;
    }

    #galeria-card #galeria-title {
        font-family: 'fuente1';
        font-size: 1.5rem;
        font-weight: 900;
        color: var(--forestolive);
    }
}