@charset "utf-8";
/* CSS Document */

/* Variables Globales */
:root {
    --tipografia-cincel: 'Cinzel', serif;
    --tipografia-comun: 'Quicksand', sans-serif;
    --color-claro: #ffffff;
    --color-oscuro: #0e1317;
    --color-terciario: #171717;
    --color-texto: #646464;
    --color-boton: #c19977;
    --border: solid 0px green;
}
a {text-decoration: none;
color: var(--color-oscuro);}

.nav-links li a {text-decoration: none;
color: var(--color-oscuro);}
/* Estilos generales */
html, body, .wrapp{
    overflow-x: hidden; /* Evita el scroll lateral */
    max-width: 100vw;   /* Limita el ancho máximo */
}
body {
    font-family: var(--tipografia-comun);
    margin: 0px;
    padding: 0px;
    background-color: var(--color-claro);
    color: var(--color-texto);
}
/* wrapp */
.wrapp {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center; /* Alineación vertical centrada */
    justify-content: center; /* Alineación horizontal centrada */
    width: 100%;
    max-width: 1920px;              /* Asegura que el contenedor ocupe el 100% del ancho disponible */
    margin: 0 auto;  
}
/* Header */
header {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    background-color: var(--color-claro);
    color: var(--color-oscuro);
    
    font-family: var(--tipografia-cincel);
    height: 200px;
    
}

.header-top  {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    width: 100%;
    min-height: 50px;
    text-align: center;
    font-size: 14px;
    background-color: var(--color-oscuro);
    color: var(--color-claro);
}

.header-main {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-content: flex-start;
   margin-left: 18%;
    
}

.logo {
    display: flex;
    align-items: center;
    font-family: var(--tipografia-cincel);
    max-width: 1000px;
    margin-top: -20px;
}

.logo img {
    width: 81px;
    height: 81px;
}

.logo h1 {
    font-size: 60px;
    margin-left: 10px;
    font-family: var(--tipografia-cincel);
    font-weight: 500;
}

/* nav */

.nav-links{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    width: 800px;
    margin-top: -40px;
	margin-left: 10px;
    
}

.nav-links li{list-style: none; margin-left: 35px;}
.nav-links li:first-child{ margin-left: 0px;}

/* Hero */
.hero {
    position: relative;
    background: url('../imagenes/fotoheader.jpg') no-repeat center center/cover;
    text-align: center;
    padding: 100px 20px;
    min-height: 450px;
    width: 100%;
    color: var(--color-primario); /* Para que el texto contraste */
} 
.catalogos {
    border-top: 2px solid black;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 1200px;
    padding: 100px;
}

.catalogos .contenedor {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Distribuye uniformemente */
    width: 1000px;
   
    gap: 20px; /* Espaciado entre imágenes */
}

.catalogos .contenedor a {
    width: calc(50% - 10px); /* 50% menos la mitad del gap */
}

.catalogos img {
    width: 90%;
    height: auto; /* Mantiene la proporción */
}

.bannerCatalogos{
	 position: relative;
    background: url('../imagenes/fotoheader.jpg') no-repeat center center/cover;
    text-align: center;
    padding: 100px 20px;
    min-height: 250px;
    width: 100%;
    color: var(--color-primario); /* Para que el texto contraste */
}
.bannerCatalogos h2
{
	position: relative;
    z-index: 2; /* Para que el contenido esté encima del filtro oscuro */

    font-size: 110px;
    font-family: var(--tipografia-cincel);
    color: var(--color-claro);
}
.hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* Ajusta la opacidad aquí */
    z-index: 1;
}

.hero h2, 
.hero .buttons {
    position: relative;
    z-index: 2; /* Para que el contenido esté encima del filtro oscuro */

    font-size: 85px;
    font-family: var(--tipografia-cincel);
    color: var(--color-claro);
}

/* Botones */
.buttons {
    margin-top: 30px;
}

.btn {
    background-color: var(--color-boton);
    color: var(--color-claro);
    padding: 15px 25px;
    text-decoration: none;
    font-size: 18px;
    font-family: var(--tipografia-cincel);
    border-radius: 8px;
}

/* sections */

.nuevassencaciones, .philosophy, .catalogs {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 80%;
     background-color: var(--color-claro);
    border-radius: 15px;
    padding: 40px;
    gap: 30px;
    outline: var(--border);
    min-height: auto;
}
.philosophy .image-box{display: flex; }
.philosophy .image-boxR{display: none; }
.quienessomos{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 64%;
     background-color: var(--color-claro);
    border-radius: 15px;
    padding: 40px;
    gap: 30px;
    outline: var(--border);
    min-height: auto;

}
.quienessomos img{
    width: 100%;
}
.quienessomos .info{
     display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
text-align: center;}

.services{
     display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
padding-top: 50px;
    padding-left: 50px;
    min-height: 300px;
    width: 100%;
    background-color: #F5F1DE;
}
.service{
     display: flex;
    flex-direction: row;
    flex-wrap: wrap;
        margin-top: 250px;
    align-items: flex-start;
    justify-content: flex-start;
    outline: var(--border);
    width: 25%;
margin: 30px;}

.infoservice{
    display: flex;
flex-direction: column;
width: 80%;
    outline: var(--border);
}

.service h3, .service p {
    word-wrap: break-word; /* Asegura que las palabras largas se rompan cuando sea necesario */
    word-break: break-word; /* Asegura que se rompan palabras largas si no pueden ajustarse */
    margin: 0;
}

h3{
    font-size: 20px;
    margin-left: 10px;
    font-family: var(--tipografia-cincel);
    font-weight: 500;
    color: #0E0E0E;
}
.service p { margin-top: 10px;}

.image-box {
    width: 40%;
    
}
.image-boxR{
	width: 100%;
}

.image-box img, .image-boxR img{
    width: 100%;
    
}
.imgservicios img{
    
    width: 80%;
    
}

.imgservicios{display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
background-color: #fff;
border-radius: 40px;
    margin-right: 10px;
}

.info{display: flex;
flex-direction: column;
    align-content: flex-start;
width: 40%;
    outline: var(--border);
}
.info h2{
    font-size: 60px;
    color: #070707;
    font-family: var(--tipografia-cincel);
    font-weight: 500;
}
.nuevassencaciones .info h2{
    font-size: 50px;
}
.catalogs .info {
    text-align: right;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Asegura que el contenido esté alineado en la parte superior */
    align-content: flex-start; /* Alinea el contenido al inicio de la caja (parte superior) */
    margin-top: 0; /* Asegura que no haya espacio extra encima */
}

.catalogs h2 {
    line-height: 1.1; /* Reduce el espacio entre las líneas */
    margin: 0; /* Elimina el margen alrededor del título */
}

.catalogs p {
    line-height: 1.2; /* Reduce el interlineado del párrafo */
    margin: 0; /* Elimina el margen alrededor del párrafo */
}


/* Footer */
footer {
    background-color: var(--color-oscuro);
    color: var(--color-claro) !important;
    text-align: center;
    padding: 20px;
    width: 100%;
    
}

.footer-content h3 {
    font-family: var(--tipografia-cincel);
    color: var(--color-claro) !important;
}
/* responsive */

@media screen and (max-width: 1024px), (orientation: portrait) {
    body{
         background-color: var(--color-claro);
    }
	header{
		min-height: 350px;
		width: 100%;
	}
	.header-main {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: flex-start;
    align-content: flex-start;
   margin-left: 0%;
		min-height: 350px;
		width: 100%
    
}

.logo {
    display: flex;
	flex-direction: column;
    align-items: flex-start;
    font-family: var(--tipografia-cincel);
    width: 100%;
	min-height: 300px;
   
}
	.logo img{margin-top: 30px;}
	.logo h1{ margin-top: -10px;
		font-size: 50px;
		 
	}
	
    .services{
         flex-direction: column;
    }
	.logo{margin-top: -20px;}
    .hero h2{
		
        font-size: 60px;
    }

    .info, .image-box{width: 100%;}
	
	.info h2{
    font-size: 44px;
}

    .service{
        flex-direction: column;
        justify-content: center;
        width: 100%;
        
    }
	.philosophy .image-boxR{
		display: flex;
	}
	.philosophy .image-box{
	display: none; 
	}
	
	 .catalogos {
      
        min-height: auto;
    }

    .catalogos .contenedor {
        width: 100%; /* Ocupar todo el ancho */
       
    }

    .catalogos .contenedor a {
        width: 100%; /* Cada imagen ocupa el 100% en pantallas pequeñas */
    }
	
	.bannerCatalogos{
	 position: relative;
    background: url('../imagenes/fotoheader.jpg') no-repeat center center/cover;
    text-align: center;
    padding: 100px 20px;
    min-height: 150px;
    width: 100%;
    color: var(--color-primario); /* Para que el texto contraste */
}
.bannerCatalogos h2
{
	position: relative;
    z-index: 2; /* Para que el contenido esté encima del filtro oscuro */

    font-size: 60px;
    font-family: var(--tipografia-cincel);
    color: var(--color-claro);
}
}

/* cookies */

          .cookie-banner {
            background-color: #171717;
            color: #fff;
            padding: 20px;
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%; /* Ancho más grande */
            max-width: 1920px; /* Limitar el ancho máximo */
            text-align: center;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            display: none;
            z-index: 1000;
        }
        .cookie-banner a {
            color: #c19977;
            text-decoration: none;
        }
        .cookie-banner button {
            background-color: #c19977;
            border: none;
            color: white;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            margin-top: 10px;
        }
        .cookie-banner button:hover {
            background-color: #a18861;
        }
        /* Fondo oscuro detrás de la ventana flotante */
        .cookie-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 999;
            display: none;
        }