/* FONTS */

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;700&family=Yeseva+One&display=swap');

/* BASIC */

:root {
    --verde: #7e9b66;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Fira Sans', sans-serif;
    font-weight: 400;
    font-style: normal;
    padding: 0;
    margin: 0;
    color: #333;
}

section,
header {
    max-width: 1400px;
    margin: 0 auto;
}

a {
    color: var(--verde);
    transition: all ease-in-out 0.3s;
}
a:hover {
    color: var(--verde);
    filter: brightness(50%);
}

/* TWEAKS */

.full-width {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* HEADER */

header {
    display: flex;
    justify-content: space-between;
    padding: 1rem 0;
}
header > img {
    max-height: 120px;
}
header nav {
    display: flex;
}
header nav img {
    max-width: 24px;
    min-width: 24px;
}
header ul {
    display: flex;
    list-style: none;
    padding: 0;
}
header ul li {
    padding-left: 1rem;
}

/* GALLERY */

.gallery {
    width: 100%;
    background: url(../img/background-texture.png),
        linear-gradient(
            90deg,
            rgba(209, 214, 200, 1) 0%,
            rgba(162, 181, 153, 1) 100%
        );
}

.swiper {
    width: 100%;
    height: 600px;
}
.swiper-button-next,
.swiper-button-prev {
    color: var(--verde);
}

.slide {
    height: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 3rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    align-items: center;
    justify-items: center;
}
.slide img {
    max-width: 100%;
}
.slide p {
    font-family: 'Yeseva One', serif;
    font-size: 3.8rem;
    margin: 0;
    color: var(--verde);
}

/* QUIÉN SOY */

.quien-soy {
    max-width: 700px;
    padding: 2rem 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    align-items: center;
}
.quien-soy img {
    max-width: 100%;
}
.quien-soy h1 {
    color: var(--verde);
    text-transform: uppercase;
    font-size: 2rem;
}

/* SERVICIOS */

.servicios {
    padding: 2rem;
    background-color: var(--verde);
    color: white;
}
.servicios > div {
    max-width: 1400px;
    margin: 0 auto;
}
.servicios h2 {
    text-transform: uppercase;
    font-size: 2rem;
}
.servicios h3 {
    text-transform: uppercase;
}
.servicios .servicios-cuadro {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    align-items: start;
}
.servicios .servicios-cuadro img {
    width: 100%;
}
.servicios .servicios-cuadro p {
    font-size: 0.8rem;
}
.servicios hr {
    color: white;
    margin: 2rem;
}
.servicios .servicios-recall {
    text-align: center;
}
.servicios .servicios-recall h3 {
    text-transform: none;
    font-size: 1.6rem;
}
.servicios .servicios-recall a {
    display: inline-block;
    text-decoration: none;
    text-transform: uppercase;
    background-color: white;
    margin: 1rem;
    padding: 1rem;
    border-radius: 15px;
    border: 1px solid white;
}
.servicios .servicios-recall a:hover {
    filter: none;
    border: 1px solid white;
    background-color: var(--verde);
    color: white;
}

/* PRIMERA CONSULTA */

.primera-consulta {
    padding: 2rem 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    align-items: center;
}
.primera-consulta img {
    max-width: 100%;
}
.primera-consulta h1 {
    color: var(--verde);
    text-transform: uppercase;
    font-size: 2rem;
}

/* FOOTER */

footer .contacto {
    max-width: 1400px;
    margin: 0 auto;
}
footer .contacto > div {
    /* padding: 2rem 0; */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
}
footer h2 {
    text-transform: uppercase;
    font-size: 2rem;
    margin: 0;
}
footer form input {
    width: 100%;
    padding: 0.2rem;
    margin-bottom: 1rem;
    font-family: 'Fira Sans', sans-serif;
    font-weight: 400;
    font-style: normal;
}
footer form input[type='checkbox'],
footer form input[type='submit'] {
    width: auto;
    margin-bottom: 1rem;
}
footer form textarea {
    width: 100%;
    margin-bottom: 1rem;
    font-family: 'Fira Sans', sans-serif;
    font-weight: 400;
    font-style: normal;
}
footer form input[type='submit'] {
    display: block;
    text-decoration: none;
    text-transform: uppercase;
    background-color: var(--verde);
    color: white;
    margin: 1rem 0 0;
    padding: 1rem;
    border-radius: 15px;
    border: 1px solid var(--verde);
    transition: all ease-in-out 0.3s;
}
footer form input[type='submit']:hover {
    border: 1px solid var(--verde);
    background-color: white;
    color: var(--verde);
}
footer .pie {
    background-color: var(--verde);
    color: white;
    padding: 1rem 0;
    margin-top: 1rem;
}
footer .pie a {
    color: white;
}
footer .pie > div {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}
footer .pie > div ul {
    display: flex;
    list-style: none;
    padding: 0;
}
footer .pie > div ul li {
    padding-left: 1rem;
}
footer .pie img {
    filter: brightness(0) invert(1);
    max-width: 120px;
}
footer .pie .legal {
    display: inline;
    width: 100%;
    text-align: center;
    font-size: 0.7rem;
}

.grecaptcha-badge {
    visibility: hidden;
}


/* POLÍTICA PRIVACIDAD */
.politica-privacidad {
    padding: 1rem;
}
.politica-privacidad h1 {
    color: var(--verde);
}

/* MOBILE */

@media (max-width: 600px) {
    header,
    footer .pie {
        padding-left: 0.6rem;
        padding-right: 0.6rem;
    }
    header ul li,
    footer .pie > div ul li {
        font-size: 0.8rem;
        padding-left: 0.5rem;
    }
    .slide p {
        font-size: 2.2rem;
        align-self: end;
    }
    .quien-soy,
    .primera-consulta,
    .contacto {
        padding-left: 0.6rem;
        padding-right: 0.6rem;
    }
    .servicios {
        padding: 0.5rem;
    }
    .servicios .servicios-cuadro {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        gap: 0.5rem;
    }
    .servicios .servicios-cuadro img {
        width: 100%;
        height: 150px;
        object-fit: cover;
    }
    footer form {
        padding-right: 0.6rem;
    }
}