/* styles.css */



/*ESTILOSG GENERALES

TITULOS: 50PX
TEXTO: 20PX
BOTONES: 30PX

*/

/*FONTS*/
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital@0;1&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

body, html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    font-size: 62.5%;
}

:root {
    --cafe-claro: #F3DEC3;
    --cafe-medio: #AB714C;
    --cafe-oscuro: #B06132;
    --guinda: #9A031E;
    --azul: #0F4C5C;
    --morado: #5F0F40;
    --negro: #000000;
    --blanco: #ffffff;
    --naranja: #FB8B24;
}


header {
    position: fixed;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--cafe-claro);

    height: 60px;
    width: 95%;
    
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
  
    z-index: 1000;

    box-shadow: 0 0px 100px rgba(202, 143, 14, 0.527);



       /*
    position: fixed;
    top: 0px;
    width: 90%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--guinda);
    color: var(--cafe-claro);

    margin: 20px;

    */
}


header img {
    height: 200px;
}

header button {
    padding: 10px 20px;
    background-color: var(--negro);
    border: none;
    color: var(--cafe-claro);
    cursor: pointer;
    
    margin-right: 12px;
    font-family: "EB Garamond", serif;
    font-family: "Montserrat", sans-serif;

}

#section1 {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    /*
    background: linear-gradient(135deg, var(--azul) , var(--negro), var(--negro) , var(--negro) , var(--cafe-oscuro));
*/

    background-color: var(--negro);
    text-align: center;
    
}

#section1 button {
    background-color: var(--cafe-claro);
    border: none;
    color: var(--negro);
    cursor: pointer;

    width: 300px;
    height: 50px;

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

#section1 h1 {

    font-size: 120px;

    color: var(--blanco);

    margin: 0;
    font-family: "EB Garamond", serif;
    font-weight: 100;


}

#section1 P {

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


    font-weight: 100;
    font-size: 20px;

    margin-bottom: 50px;

    width: 50%;

    color: var(--cafe-claro);

}

/*CATALOGOS*/

#section2 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    padding: 40px;

    background-color: var(--cafe-claro);

}

.grid-item {
    height: 400px;
    background-size: cover;
    background-position: center;
    position: relative;



    background-color: var(--cafe-claro);

}
.ramos {
    
    /*IMAGEN DE FONDO }*/

    background-image: url('./assets/ramos.png');
    background-size: cover; /* Asegura que la imagen cubra todo el contenedor */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    background-position: center; /* Centra la imagen en el contenedor */

    grid-column: span 2;
    
}

.corsage {
    
    /*IMAGEN DE FONDO }*/

    background-image: url('./assets/corsage.png');
    background-size: cover; /* Asegura que la imagen cubra todo el contenedor */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    background-position: center; /* Centra la imagen en el contenedor */
    
    grid-row: span 2;
    height: 820px;

}
.boda {
    
    /*IMAGEN DE FONDO }*/

    background-image: url('./assets/lazos.jpg');
    background-size: cover; /* Asegura que la imagen cubra todo el contenedor */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    background-position: center; /* Centra la imagen en el contenedor */


    grid-column: span 2;

    
}
.armazon {
    
    /*IMAGEN DE FONDO }*/

    background-image: url('./assets/armazon.jpg');
    background-size: cover; /* Asegura que la imagen cubra todo el contenedor */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    background-position: center; /* Centra la imagen en el contenedor */

    
    
}
.velas {
    
    /*IMAGEN DE FONDO }*/

    background-image: url('./assets/velas.jpg  ');
    background-size: cover; /* Asegura que la imagen cubra todo el contenedor */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    background-position: center; /* Centra la imagen en el contenedor */

    grid-column: span 2;

    
}
.biblias {
    
    /*IMAGEN DE FONDO }*/

    background-image: url('./assets/biblias.jpg');
    background-size: cover; /* Asegura que la imagen cubra todo el contenedor */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    background-position: center; /* Centra la imagen en el contenedor */
    
}
.coronas {
    
    /*IMAGEN DE FONDO }*/

    background-image: url('./assets/coronas.png');
    background-size: cover; /* Asegura que la imagen cubra todo el contenedor */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    background-position: center; /* Centra la imagen en el contenedor */
 
    grid-column: span 2;
    height: 400px;
}


.grid-content {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    padding: 10px;

    background: linear-gradient(135deg, var(--negro) , var(--morado) /*, var(--cafe-claro)*/);

  /* border: 1px solid var(--azul);*/

}

.grid-content p {
    font-size: 15px;
    padding-left: 10px;
    margin: 0;
    font-family: "Montserrat", sans-serif;
    font-weight: 100;
}

.grid-content button {
    color: var(--negro);
    border: none;
    height:30px;
    width: 150px;
    cursor: pointer;

    margin-left: 5px;
    background-color: var(--cafe-claro);

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

}

/*MAPA EEUU*/

#section3 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;


    padding: 40px;

    background-color: var(--negro);

    height: 800px;


}

.column1, .column2 {
    flex: 1;
    justify-content: center;
    align-items: center;
}

.column1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    
}

.column1 h2 {
    color: var(--cafe-claro);
    font-size: 50px;
    font-weight: 100;
    margin-bottom: 0px;


    font-family: "EB Garamond", serif;
}

.column1 p {
    color: var(--cafe-claro);
    font-size: 30px;
    font-family: "Montserrat", sans-serif;

    font-weight: 100;
    font-size: 20px;

}

.column1 button {
    margin-top: 20px;

    background-color: var(--cafe-claro);
    height: 50px;
    width: 650px;

    

    color: var(--negro);    
    font-size: 20px;

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


    cursor: pointer;
}

.column1 a {
    margin: 0;

    color: var(--negro);    
    font-size: 20px;

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


    cursor: pointer;
}


.column2 img {
    margin-top: 10px;
   
}   

footer {
    padding: 20px;
    background-color: var(--negro);
    color: #fff;
    text-align: center;
}

/*RESEÑAS*/
/*
#section44 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    padding: 40px;

    background-color: var(--cafe-medio);

    height: 400px;
}


 .grid-itemss {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--cafe-claro);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#section44 .grid-contents {
    text-align: center;
}

#section44 .grid-contents h2 {
    font-size: 50px;
    color: var(--cafe-oscuro);
    font-weight: 900;

    font-family: "EB Garamond", serif;
    margin: 0;
    padding-left: 25px;
    padding-right: 25px;


}

#section44 .grid-contents p {
    margin: 0;
    font-size: 20px;
    color: var(--cafe-medio);

    margin: 0;
    padding-left: 25px;
    padding-right: 25px;

}

#section44 .grid-contents img {

    margin-top: 20px;

    color: var(--cafe-medio);

    width: 40px;
    height: auto;

}

*/
/*CONTACTO*/


#section4 {
    display: flex;
    padding: 40px;
    gap: 20px;

    height: 800px;
    background-color: var(--negro);

}

#section4 .column11, #section4 .column22 {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    flex: 1;
    justify-content: center;
    align-items: center;

    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 20px;
    margin-left: 30px;
}

#section4 .column11 h2 {

    color: var(--cafe-claro);
    font-size: 50px;
    font-weight: 100;
    margin: 0px;

    align-self: flex-start;

    font-family: "EB Garamond", serif;
}


.column11 p {
    margin-bottom: 20px;
    align-self: flex-start;

    color: var(--cafe-claro);
    font-size: 30px;
    font-family: "Montserrat", sans-serif;


    font-weight: 100;
    font-size: 20px;
}

#section4 .buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-self: flex-start;
    
    font-family: "Montserrat", sans-serif;

}

#section4 .buttons button {
    padding: 10px 20px;
    border: none;
    cursor: pointer;

    margin-top: 20px;
    align-self: flex-start;
    background-color: var(--cafe-claro);
    height: 50px;
    width: 650px;
    color: var(--negro);
    font-weight: 550;
    font-size: 20px;
    font-family: "Montserrat", sans-serif;

}

#section4 .image-background {
    width: 500px;
    height: 500px;
    background: url('./assets/tgeneral-pacolixo.png') center center / cover no-repeat;
}

/*BENEFICIOS*/

#section5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    padding: 40px;
    background-color: var(--cafe-claro);
}

#section5 .grid-itemm {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    height: 200px;
    background-color: var(--negro);

}

.valcero {
    grid-column: span 2;
    height: 400px;
}

.valone {
    grid-column: span 2;
    height: 400px;
}

.valtwo {
    grid-column: span 1.5;
    height: 400px;
}

.valthree {
    grid-column: span 1;
    height: 400px;
}

.valfour {
    grid-column: span 2;
    height: 400px;
}


.valsix {
    grid-column: span 2;
    height: 400px;
}

#section5 .grid-itemm h2 {
    margin: 0;

    font-size: 50px;
    font-family: "EB Garamond", serif;

    color: var(--cafe-claro);
    font-weight: 100;

}

#section5 .grid-itemm p {
    margin: 0;
    font-size: 20px;


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

    color: var(--cafe-claro);
}


/*FOOTER*/

footer {
    background-color: var(--footer-background, var(--negro));
    color: var(--footer-text-color, #fff);
    padding: 20px 0;
    text-align: center;
    position: relative;
    bottom: 0;
    width: 100%;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-content p {
    margin: 10px 0;
    font-size: 30PX;
}

.social-media {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.social-icon {
    color: var(--footer-text-color, #fff);
    text-decoration: none;
    font-size: 18px;
}

.social-icon:hover {
    color: var(--footer-hover-color, #ddd);
}