/*  
Theme Name: Xativa a un pas
Description: Un tema desarrollado para LaBase
Author: W. Wallace
Version: 2.04
*/


body {padding: 0; margin: 0;     
    font-family: "Archivo", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
      "wdth" 100; color: #007581;}
img {display: block;}
a {text-decoration: none; color: inherit;}
p {font-size: 16px; line-height: 24px;}
h1 {font-size: 70px; line-height: 80px; font-weight: 400; color: #007581;}
h2 {font-size: 40px; line-height: 50px; font-weight: 400; color: #fff;}
h3 {font-size: 30px; line-height: 40px; font-weight: 400; color: #007581;}
h4 {font-size: 50px; line-height: 60px; font-weight: 400; color: #007581;}
body {background-image: url(https://xativaaunpas.com/wp-content/themes/xativaaunpas/imagenes/fons.svg); background-size: 60%; background-repeat: no-repeat; background-position: top left;}

#enlaceSelected {
    display: none;
    cursor: pointer;
    color: #fff;
}

ul.menu {display: grid; grid-auto-flow: column; padding-left: 0; list-style: none; column-gap: 64px;}
ul.menu li {width: fit-content;}
ul.menu li a { color: inherit; text-decoration: none;}
.current-menu-item {color: #007581 !important; }

.header { color: #3AC0AE; font-weight: 600; }
.header-content {width: 90%; max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: max-content 1fr max-content; column-gap: 32px; align-content: center; align-items: center; padding-top: 32px; padding-bottom: 32px;}
.header-content > div:nth-of-type(2) {
    display: grid;
    grid-auto-flow: column;
    column-gap: 32px;
    justify-content: center;
    justify-items: center;
}
.footer { color: #3AC0AE; font-weight: 600; background-color: #007581;}
.footer-content {width: 90%; max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: max-content 1fr max-content; column-gap: 32px; align-content: center; align-items: center; padding-top: 32px; padding-bottom: 32px;}
.footer-content > div:nth-of-type(2) {
    display: grid;
    grid-auto-flow: column;
    column-gap: 32px;
    justify-content: center;
    justify-items: center;
}

.hero { min-height: calc(100vh - 194px);  }
.hero-content {width: 100%; max-width: 2200px; margin: 0 auto;  padding: 0 0 0 5%; box-sizing: border-box; display: grid; grid-auto-flow: column; column-gap: 32px; align-content: center; align-items: center; padding-top: 16px; padding-bottom: 48px; overflow-x: scroll;}
.hero-content > div:first-of-type {min-width: 45vw;}
.hero-content > div {min-width: 66vh;}
.hero-content img {width: 100%;}
.hero-content p {max-width: 90%;}

.presentacion { }
.presentacion-content {width: 100%; max-width: 2200px; margin: 0 auto;   padding: 0 0 0 5%; box-sizing: border-box; display: grid; grid-template-columns: repeat(12,1fr); column-gap: 32px; align-content: center; align-items: center; padding-top: 16px; padding-bottom: 48px;}
.presentacion-content > div:first-of-type {grid-column: span 4;}
.presentacion-content > div:last-of-type {background-color: #007581; padding: 32px 48px 72px 48px; grid-column: 6 / span 8;}
.presentacion p {color: #007581;}

.lanzadera { }
.lanzadera-content {width: 90%; max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: repeat(12,1fr); column-gap: 32px; align-content: center; align-items: center; padding-top: 100px; padding-bottom: 100px;}
.lanzadera-content > div {grid-column: span 4; text-align: center; display: grid; justify-content: center; justify-items: center;}
.lanzadera img {width: 100%;}
.iframe {
    height: 75vh;
    width: 100%;
    display: block;
    overflow: hidden;
}
iframe {
    position: relative;
    border: none;
    display: block;
}
.formulario { }
.formulario-content {width: 90%; max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: repeat(12,1fr); column-gap: 32px; align-content: center; align-items: center;  padding-bottom: 100px;}
.formulario-content > div:first-of-type {grid-column: span 7; }
.formulario-content > div:last-of-type {grid-column: 9 / span 4; }
.formulario-content > div:first-of-type p {padding: 16px 24px 16px 24px; background-color: #eeeeee; border-radius:16px; margin-bottom: 16px;}
.formulario-content > div:first-of-type p:nth-last-of-type(3), .formulario-content > div:first-of-type p:nth-last-of-type(2) {
    background-color: unset;
    padding: 16px 0 16px 0;
}
.formulario-content > div:first-of-type p:last-of-type {background-color: unset; padding: 16px 0 16px 0;}
.docu {background-color: unset !important; border-radius: unset !important;}
.adjuntos {display: flex; column-gap: 8px;}
.asunto {min-height: 300px;}
.enviar {width: max-content; border-radius: 48px !important; background-color: #007581 !important; color: #ffffff;}

/* Personalización de los campos del formulario */
.wpcf7 input[type="text"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="email"],
.wpcf7 textarea,
.wpcf7 input[type="file"],
.wpcf7 input[type="submit"] {
    background: none; /* Sin fondo */
    border: none !important;
    font-size: 16px; /* Tamaño de texto igual a los <p> */
    color: #000; /* Color del texto */
    padding: 10px; /* Espaciado interno */
    width: 100%; /* Ancho completo */
    box-sizing: border-box; /* Evitar desbordamiento */
}

/* Cambiar el color del texto del placeholder */
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
    color:#007581;
}

/* Estilo del botón de envío */
.wpcf7 input[type="submit"] {
    background-color: #007581; /* Color de fondo del botón */
    color: #fff; /* Color del texto del botón */
    border: none; /* Sin borde */
    cursor: pointer; /* Cambiar el cursor al pasar por encima */
    font-weight: unset; /* Texto en negrita */
    text-transform: unset; /* Texto en mayúsculas */
    padding: 16px 24px; /* Espaciado interno */
    transition: background-color 0.3s ease; /* Animación al pasar el ratón */
    width: max-content;
    border-radius: 24px;
}

.wpcf7 input[type="submit"]:hover {
    background-color: #005f63; /* Color más oscuro al pasar el ratón */
}
/* Personalización del campo de archivo */
.wpcf7 input[type="file"] {
    background: none; /* Sin fondo */
    border: 1px solid #ccc; /* Borde ligero */
    font-size: 13px; /* Tamaño del texto */
    color:#007581; /* Color del texto */
    padding: 10px; /* Espaciado interno */
    width: 100%; /* Ancho completo */
    box-sizing: border-box; /* Evitar desbordamiento */
    border-radius: 8px; /* Bordes redondeados */
    cursor: pointer; /* Cambiar el cursor al pasar por encima */
}

/* Cambiar el estilo al pasar el ratón */
.wpcf7 input[type="file"]:hover {
    border-color: unset; /* Cambiar el color del borde */
}

/* Cambiar el estilo del texto del botón de selección */
.wpcf7 input[type="file"]::-webkit-file-upload-button {
    background-color: #eeeeee; /* Color de fondo del botón */
    color:#007581; /* Color del texto */
    border: none; /* Sin borde */
    padding: 16px 16px; /* Espaciado interno */
    border-radius: 8px; /* Bordes redondeados */
    cursor: pointer; /* Cambiar el cursor al pasar por encima */
    font-size: 16px; /* Tamaño del texto */

}

/* Cambiar el estilo del botón al pasar el ratón */
.wpcf7 input[type="file"]::-webkit-file-upload-button:hover {
    background-color: #dddddd; /* Color más oscuro al pasar el ratón */
}

/* Ocultar el texto original del navegador */
.wpcf7 input[type="file"] {
    width: auto; /* Ajusta el ancho para que solo se muestre el botón */
    padding: 0; /* Elimina el espaciado interno */
    margin: 0; /* Elimina el margen */
    border: none; /* Sin borde */
    background: none; /* Sin fondo */
    cursor: pointer; /* Cambia el cursor al pasar por encima */
}
.wpcf7-list-item {
    display: inline-block;
    margin: 0;
}

.zonas { }
.zonas-content {width: 90%; max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: repeat(12,1fr); column-gap: 32px; align-content: flex-start; align-items: flex-start; padding-top: 16px; padding-bottom: 148px;}
.zona {grid-column: span 12; display: grid; justify-content: center; justify-items: center;     row-gap: 64px;}
.zona img {width: 100%; height: 100%;}

.image-crop {
   
}

.image-crop img {
    width: 100%;

}

h2.post-title {
    font-size: 40px;
    line-height: 50px;
    font-weight: 400;
    color:#007581;
}

.enlace {
    background-color: #007581; /* Color de fondo del botón */
    color: #fff; /* Color del texto del botón */
    border: none; /* Sin borde */
    cursor: pointer; /* Cambiar el cursor al pasar por encima */
    font-weight: unset; /* Texto en negrita */
    text-transform: unset; /* Texto en mayúsculas */
    padding: 16px 24px; /* Espaciado interno */
    transition: background-color 0.3s ease; /* Animación al pasar el ratón */
    width: max-content;
    border-radius: 24px;
    height: max-content;
}

.enlace:hover {
    background-color: #005f63; /* Color más oscuro al pasar el ratón */
}

.post-item {
    display: grid;
    grid-template-columns: 3fr 7fr 2fr;
    column-gap: 64px;
    align-content: center;
    align-items: center;

}

.sencillo {  }
.sencillo-content {width: 90%; max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: repeat(12,1fr); padding: 0; column-gap: 32px; align-content: center; align-items: center; padding-top: 100px; padding-bottom: 100px; }
.sencillo-content > div:first-of-type {grid-column: span 8;}
.sencillo-content > div:last-of-type {grid-column: span 4;}

.contenido {  }
.contenido-content {width: 95%; max-width: 2200px; margin: 0 5% 0 0; display: grid; grid-template-columns: repeat(12,1fr); padding: 0; column-gap: 32px; align-content: flex-start; align-items: flex-start; padding-top: 100px; padding-bottom: 100px; }
.contenido-content > div:first-of-type {grid-column: span 3; background-color: #007581; color: #ffffff; box-sizing: border-box; padding: 32px 48px 72px 48px;}
.contenido-content > div:first-of-type a {color: #ffffff; text-decoration: none;}
.contenido-content > div:last-of-type {grid-column: 5 / span 8; }

figure.wp-block-gallery.has-nested-images {
margin-top: 32px; margin-bottom: 48px;
}
.post-list-container {
    position: sticky;
    top: 0;
}
.logotipo img {max-height: 150px;}
.column-layout {
    column-count: 2;
    column-gap: 32px;
}
.movil {display: none;}
#menu-movil { display: none;}
/* Media query para pantallas con anchura menor a 1600px */
@media (max-width: 1600px) {
        .column-layout {
        column-count: 1;
        column-gap: unset;
    }

}

/* Media query para pantallas con anchura menor a 980px */
@media (max-width: 980px) {

    #menu-movil li a {
        color: inherit;
        text-decoration: none;
        line-height: 200%;
        font-size: 24px;
        text-align: center;
    }
        #enlaceSelected {
            display: block;
            position: absolute;
            right: 5%;
            top: 32px;
        }

            #menu-movil {
                position: fixed;
                z-index: 9999;
                height: 100vh;
                height: 100svh;
                width: 100vw;
                align-content: center;
                justify-content: center;
                z-index: 9999;
                top: 0;
                background-color: #007581;
                color: #ffffff;
                right: 0;
                text-align: -webkit-center;
            }
            .current-menu-item {color: #3AC0AE !important; }
            .sencillo-content {

                padding-top: 0px;
                padding-bottom: 0px;
            }
            .contenido-content {

                padding-top: 50px;

            }
    h1 {
        font-size: 40px; /* Reducir el tamaño de fuente */
        line-height: 50px;


    }

    h2 {
        font-size: 30px; /* Reducir el tamaño de fuente */
        line-height: 40px;

    }
    h2.post-title {
        font-size: 30px;
        line-height: 40px;

    }

    h3, h4 {
        font-size: 24px; /* Reducir el tamaño de fuente */
        line-height: 32px;

    }

    p {
        font-size: 16px; /* Reducir el tamaño de fuente */
        line-height: 24px;
    }

    .hero-content > div:first-of-type {
        min-width: 60vw;
    }
    .hero-content > div {
        min-width: 36vh;
    }
    .header-content > div:nth-of-type(2) {
        display: none;
    }
    .presentacion-content > div:first-of-type {
        grid-column: span 12;
    }
    .presentacion-content > div:last-of-type {
        grid-column: span 12;
    }
    .lanzadera-content > div {
        grid-column: span 12;
    }
    .formulario-content > div:first-of-type {
        grid-column: span 12;
    }
    .formulario-content > div:last-of-type {
        grid-column: span 12;
    }
    .post-item {

        grid-template-columns: 1fr;

    }
    .contenido-content > div:first-of-type {
        grid-column: span 12;
        order: 2;
    }
    .contenido-content > div:last-of-type {
        grid-column: span 12;
        padding-left: 5%;
        order: 1;

    }

        .presentacion-content > div:first-of-type {
            grid-column: span 12;
            padding-right: 5%;
        }
        .post-list-container {
            position: unset;
            top: unset;
        }
        .contenido-content {row-gap: 64px;}
        .sencillo-content {row-gap: 24px;}
        .sencillo-content > div:first-of-type {
            grid-column: span 12;
        }
        .sencillo-content > div:last-of-type {
            grid-column: span 12;

        }
        .hero {
            min-height: unset;
        }
        .presentacion-content {

            row-gap: 48px;
        }
        .footer-content {

            grid-template-columns: 1fr;
            row-gap: 32px;

        }
        ul.menu {
            display: grid;
            grid-auto-flow: unset;
grid-template-columns: 1fr;
        }
        .footer-content > div:nth-of-type(2) {

            justify-content: unset;
            justify-items: unset;
        }
        .logotipo img {
            max-height: 110px;
        }
        .xativa img {
            max-height: 80px;
        }
}

@media (max-width: 680px) {
    .desktop {display: none;}
    .movil {display: grid;}
}

@media (max-width: 480px) {


    h1 {
        font-size: 35px; /* Reducir el tamaño de fuente */
        line-height: 40px;
        font-weight: 500;


    }

    h2 {
        font-size: 25px; /* Reducir el tamaño de fuente */
        font-weight: 500;

    }
    h2.post-title {
        font-size: 20px;
        line-height: 30px;
        font-weight: 500;

    }

    h3, h4 {
        font-size: 18px; /* Reducir el tamaño de fuente */
        line-height: 28px;
        font-weight: 500;

    }

    p {
        font-size: 16px; /* Reducir el tamaño de fuente */
        line-height: 24px;
    }

}