/* =========================================
   RESET E CONFIGURAÇÕES BASE
   ========================================= */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

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

/* =========================================
   ESTRUTURA GERAL DO SITE
   ========================================= */

#bloco-principal {
    background-color: #FFFFFF;
}

nav {
    padding: 1vh 52px 0 52px;
    width: 100%;
    height: 5vh;
    font-family: "Instrument serif";
    color: #e84c84;
}

nav a {
    text-decoration: none;
    font-size: 3rem;
}

nav a:link {
    color: inherit;
}

nav a:visited {
    color: inherit;
}

main {}

/* =========================================
   SEÇÃO 1: CAPA (SAVE THE DATE)
   ========================================= */

#bloco-main {
    padding: 20vh 52px 0 52px;
    font-family: "Instrument sans";
    color: #e84c84;
    width: 100%;
    height: 95vh;
}

.principal {
    text-align: center;
}

#data,
#save-the-date {
    font-size: clamp(1rem, 2rem, 3rem);
    padding: 5vh 0;
    font-family: "Montserrat", sans-serif;
}

#nomes {
    font-family: "Instrument serif";
    font-style: normal;
    font-size: clamp(6rem, 8rem, 9rem);
}

#nomes span,
nav a span {
    color: #3E4826;
}

#imagem-1 {
    width: 275px;
    height: 90px;
}







/* =========================================
   SEÇÃO 2: SOBRE O CASAMENTO
   ========================================= */

#sobre-casamento {
    width: 100%;
    min-height: 100vh;
    padding: 5vh 5% 5vh 5%;
    color: #000000;
    background-image: url("./images/bg1.png");
    background-size: 90vh;
}

#bg-color {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4vw;
    padding: 10vh 12% 10vh 12%;
    background-color: #FFFFFF;
    height: 90vh;
}

#texto-sobre-casamento {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
}

#titulo {
    font-family: "Instrument Serif", serif;
    font-size: clamp(3.5rem, 5.5vw, 6rem);
    margin-top: 0 !important;
    padding-top: 0;
    line-height: 0.9;
    display: block;
}

.paragrafo-sobre {
    font-family: "Montserrat", sans-serif;
    font-size: 1.5rem;
    line-height: 1.4;
    text-align: justify;
    margin-bottom: 2vh;
}

.paragrafo-sobre span {
    font-weight: bolder;
}

.paragrafo-sobre:nth-of-type(1) {
    padding-top: 4vh;
}

.paragrafo-sobre:nth-of-type(2) {
    font-style: italic;
    margin-top: 2vh;
}

.paragrafo-sobre:nth-of-type(3) {
    font-style: italic;
}

.imagem-sobre {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
}

.imagem-sobre img {
    max-width: 100%;
    max-height: 60vh;
    object-fit: contain;
    height: auto;
    display: block;
    margin-top: 0;
}

/* CARROSSEL */

#carrossel {
    /* --carrossel-itens define quantas fotos aparecem por vez.
       Alterado no media query para deixar o carrossel responsivo. */
    --carrossel-itens: 3;
    --carrossel-gap: 20px;

    width: 100%;
    min-height: 40vh;
    padding: 5% 10% 5% 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background-color: #8E9158;



}

#carrossel-anterior,
#carrossel-proximo {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background-color: #FFFFFF;
    color: #e84c84;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

#carrossel-anterior:hover,
#carrossel-proximo:hover {
    background-color: #e84c84;
    color: #FFFFFF;
}

#janela-carrossel {
    width: 100%;
    overflow: hidden;
    cursor: grab;
    touch-action: pan-y;


}

#janela-carrossel.arrastando {
    cursor: grabbing;
}

#bloco-carrossel {
    display: flex;
    gap: var(--carrossel-gap);


}

#bloco-carrossel img {
    flex: 0 0 calc((100% - (var(--carrossel-itens) - 1) * var(--carrossel-gap)) / var(--carrossel-itens));
    height: 50vh;
    object-fit: scale-down;
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
    


}




/*  FORMULARIO  */

#forms-pix {
    width: 100%;
    min-height: 100%;
    padding: 5vh 5% 5vh 5%;
    color: #000000;

    /* Adições para colocar lado a lado */
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 5vw;

    background-color: #FDF9EF/*#8E9158*/;
}

#forms,
#pix {
    flex: 1;
    /* Faz com que os dois lados ocupem espaços iguais */
    height: 50vh;
}

/* Ajustes da Lista do Formulário */
#forms ul {}

#forms li {

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

#forms li:last-child {
    margin-bottom: 5%;
}

#forms label {
    display: flex;
    flex-direction: column;
    font-size: 1.5rem;
    font-family: "Montserrat", sans-serif;
    line-height: 1.4;
    padding-top: 2%;

}



#forms input[type="text"],
#forms input[type="email"],
#forms input[type="tel"] {
    margin-top: 10px;
    padding: 12px;
    font-family: "Montserrat", sans-serif;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
    width: 100%;

}

/* Ajustes do Botão de Envio */
#forms input[type="submit"] {
    margin-top: 10px;
    padding: 15px 40px;
    background-color: #e84c84;
    /* Utilizando a mesma cor de destaque do site */
    color: #FFFFFF;
    border: none;
    border-radius: 5px;
    font-family: "Montserrat", sans-serif;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
}

#forms input[type="submit"]:hover {
    background-color: #3E4826;
    /* Cor verde/oliva presente nos detalhes do site */
}

/*
#forms{
    background-color: aqua;
}*/
#pix {}

#pix img {
    width: 30%;
    display: block;
    margin-top: 3%;
    margin-left: 35%;

}

#forms-pix h1 {
    font-family: "Instrument Serif", serif;
    font-size: clamp(2.5rem, 3.5vw, 4rem);
    margin-top: 0 !important;
    padding-top: 0;
    line-height: 0.9;
    display: block;
    margin-bottom: 1%;
}



#forms-pix h2 {
    font-family: "Montserrat", sans-serif;
    font-size: 1.5rem;
    line-height: 1.4;
    padding-top: 2%;
}




/*  FOOTER  */

footer {
    padding: 1vh 52px 0 52px;
    width: 100%;
    height: 5vh;
    font-family: "Instrument serif";
    color: #e84c84;
    border-top: 2px solid #ccc;
    text-align: center;

}

footer a {
    text-decoration: none;
    font-size: 3rem;

}

footer a:link {
    color: inherit;
}

footer a:visited {
    color: inherit;
}


/* =========================================
   RESPONSIVIDADE (TABLETS E CELULARES)
   ========================================= */

@media (max-width: 768px) {
    #carrossel {
        --carrossel-itens: 1;
        padding: 5vh 20px;
        gap: 10px;
    }

    #bloco-carrossel img {
        height: 50vh;
    }

    #carrossel-anterior,
    #carrossel-proximo {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    nav {
        padding: 2vh 20px 0 20px;
        text-align: center;
    }

    nav a {
        font-size: clamp(1rem, 7vw, 1.5rem);
    }

    #bloco-main {
        padding: 5vh 20px 5vh 20px;
        height: 20%;
    }

    #nomes {
        font-size: clamp(2.5rem, 15vw, 4.5rem);
    }

    #data,
    #save-the-date {
        font-size: clamp(1rem, 7vw, 1.5rem);
    }

    #imagem-1 {
        width: 100px;
        height: auto;
    }

    #bg-color {
        flex-direction: column;
        align-items: center;
        padding: 5vh 10% 5vh 10%;
        gap: 8vw;
    }

    #texto-sobre-casamento {
        align-items: center;
    }

    #titulo {
        text-align: center;
        font-size: clamp(3rem, 12vw, 4rem);
    }

    .paragrafo-sobre {
        text-align: justify;
        font-size: 1rem;
    }

    .paragrafo-sobre:nth-of-type(2),
    .paragrafo-sobre:nth-of-type(3) {
        text-align: left;
        width: 100%;
    }

    .imagem-sobre {
        justify-content: center;
        width: 100%;
    }

    .imagem-sobre img {
        max-height: 50vh;
        width: 100%;
    }


    #forms-pix {
        flex-direction: column;
        gap: 10vw;
        align-items: stretch; /* Faz com que as divs filhas estiquem até a largura total permitida pelo padding */
    }

    
    #forms, #pix {
        width: 100%; /* Garante a ocupação total do espaço */
        height: auto; /* Remove o limite de 50vh do desktop para o conteúdo não vazar no celular */
    }
    
    

    #forms-pix label,
    #forms-pix h2 {
        text-align: justify;
        font-size: 1rem;
    }

    #forms-pix h1 {
        margin-bottom: 10px;

    }


    

    #pix img {
        width: 40%;
        display: block;
        margin: 20px auto;
        /* O 'auto' nas laterais empurra a imagem para o centro */
    }


    footer a {
        font-size: clamp(1rem, 7vw, 1.5rem);
    }


}