/* Importación de la fuente Arimo Italic Variable */
@font-face {
    font-family: 'Arimo Italic';
    src: url('fonts/Arimo/Arimo-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900; /* Variable font: rango de pesos */
    font-style: italic;
    font-display: swap; /* Mejor rendimiento y evita flash de texto invisible */
}

@font-face {
    font-family: 'Arimo';
    src: url('fonts/Arimo/Arimo-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900; /* Rango completo de pesos para variable font */
    font-style: normal;
    font-display: swap; /* Evita flash de texto invisible */
}

:root{
    --font-arimo: 'Arimo', Arial, sans-serif;
    --font-arimo-italic: 'Arimo Italic', Arial, sans-serif;
    --main-color: #FEF8E6;
    --text-color: #5B533B;
}

/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    font-family: var(--font-arimo);
    font-weight: 400;

    background-image: url('images/thegrove.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    overflow-x: hidden;
}

/* Lang */

.lang{
    position: absolute;
    top: 65px;
    right: 100px;

    a{
        text-align: center;
        background-color: #C0DFD9;
        padding: 10px 25px;
        color: var(--text-color);
        font-family: var(--font-arimo);
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        letter-spacing: 0.56px;
        text-transform: uppercase;
        text-decoration: none;
    }
}


/* Sección del hero con imagen de fondo */
.hero {
    position: relative;
    display: flex;
    justify-content: center;
    text-align: center;
}

.hero-content h1 {
    font-size: 0;
    margin: 0 auto;
    margin-top: 60px;
    
    img{
        width: 407px;
        max-width: 100%;
    }
}

.hero-content h2 {
    color: var(--main-color);
    text-align: center;
    font-family: var(--font-arimo);
    font-size: 35px;
    font-style: normal;
    font-weight: 400;
    line-height: 45px; /* 128.571% */
    letter-spacing: 8.75px;
    text-transform: uppercase;
    margin-top: 50px;
    margin-bottom: 40px;
}

.hero-content ul{
    display: flex;
    justify-content: center;
    list-style: none;
    gap: 2rem;
    padding-left: 0;
}

.btn-send-message,
.hero-content ul li a{
    background-color: var(--main-color);
    padding: 10px 30px;
    color: var(--text-color);
    font-family: var(--font-arimo);
    font-size: 14.5px;
    font-style: normal;
    font-weight: 400;
    line-height: 22.513px; /* 155.262% */
    letter-spacing: 0.58px;
    text-decoration: none;
}


/* Formulario de contacto */
.contact {
    max-width: 560px;
    background: var(--main-color);
    margin: 45px auto;
    padding: 30px 55px;
}

.contact p{
    color: var(--text-color);
    font-family: var(--font-arimo);
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 22.513px; /* 150.087% */
    letter-spacing: 0.6px;
}

.contact h2 {
    margin-bottom: 40px;
}

.message {
    text-align: center;
    margin-bottom: 20px;
    font-weight: bold;
    padding: 10px;
    border-radius: 6px;
}

form {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px; 
}

input, textarea {
    width: 100%;
    padding: 6px 0;
    border: 0;
    border-bottom: 1px solid var(--text-color);
    background-color: transparent;
    color: var(--text-color);
    font-family: var(--font-arimo);
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 22.513px; /* 150.087% */
    letter-spacing: 0.6px;
}

input[type="checkbox"] {
    width: fit-content;
}

form label,
form a{
    color: var(--text-color);
    font-family: var(--font-arimo);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 22.513px; /* 187.609% */
    letter-spacing: 0.48px;
}

button {
    border: 0;
    max-width: fit-content;
    display: flex;
    width: 167px;
    height: 41px;
    padding: 10px 25px;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    background-color: #C8B98B;
    color: var(--text-color);
    font-family: var(--font-arimo);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.56px;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

button:hover {
    background-color: var(--text-color);
    color: #C8B98B;
}

form input[type=checkbox] {
	appearance: none;
	width: 20px;
	min-width: 20px;
	height: 20px;
	padding: 0;
	border: 1px solid rgba(46, 40, 43, .5);
	background-color: transparent;
    float: left;
    margin-right: 10px;
    margin-bottom: 20px;
}

form input[type=checkbox]:checked {
	background-image: url(images/close-menu.svg);
	background-size: 12px 12px;
	background-repeat: no-repeat;
	background-position: center center;
}

input::placeholder,
textarea::placeholder{
	color: var(--color-text);
    opacity: .5;
}

input:disabled,
textarea:disabled,
input[readonly],]
textarea[readonly],
input:focus-visible,
textarea:focus-visible,
input:focus,
textarea:focus {
	box-shadow: none;
}

/* Responsive */
@media (min-width: 768px) {
    body, html{
        animation: moveUp 3s ease none;
    }

    .contact{
        animation: moveUpContact 3s ease none;
    }
}

@media (max-width: 991px) {
    .lang{
        right: 1rem;
    }
}

@media (max-width: 767.98px) {
    .hero-content h1 img{
        width: 311px;
    }

    .hero-content h2{

        font-size: 26.732px;
        font-style: normal;
        font-weight: 400;
        line-height: 34.369px; /* 128.571% */
        letter-spacing: 6.683px;

        br{
            display: none
        }
    } 

    .hero ul{
        flex-direction: column;
    }

    .contact{
        /* transform: translateY(1000%); */
        /* height: 0; */
        position: relative;
        opacity: 0;
        overflow: hidden;
        padding: 0 55px;
        transition: 2s all;
        max-width: 100%;
        z-index: -1;

        &.contactShow{
            opacity: 1;
            transform: translateY(-35%);
            height: inherit;
            overflow: visible;
            padding: 30px 55px;
            z-index: 1;
        }
    }

    .ic-list-mobile{
        position: fixed;
        bottom: 0; 
        left: 1rem;
        right: 1rem;

        ul{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            list-style: none;
            padding-left: 0;

            li{
                margin-bottom: 1rem;
                a{
                    background-color: var(--main-color);
                    padding: 10px;
                    color: var(--text-color);
                    font-family: var(--font-arimo);
                    font-size: 14.5px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 22.513px; /* 155.262% */
                    letter-spacing: 0.58px;
                    text-decoration: none;
                }

                &:last-child{
                    a{
                        text-align: center;
                        background-color: #C0DFD9;
                        padding: 10px;
                        color: var(--text-color);
                        font-family: var(--font-arimo);
                        font-size: 14px;
                        font-style: normal;
                        font-weight: 500;
                        line-height: normal;
                        letter-spacing: 0.56px;
                        text-transform: uppercase;
                        text-decoration: none;
                    }
                }
            }
        }
    }

    .ic-closeContact{
        position: absolute;
        top: 1rem;
        right: 1rem;
        background-color: #C0DFD9;
        padding: 5px;

        img{
            width: 30px;
            height: 30px;
        }
    }
}

@media (max-width: 768px) {
    .ic-list-mobile{
        ul{
            justify-content: center;
            gap: 12px
        }
    }

    .contact{
        &.contactShow{
            transform: translateY(-30%);
        }
    }
}


@-webkit-keyframes moveUp {
    from {
        background-position: center -10px ;
    }
    to {
        background-position: center;
    }
}

@keyframes moveUp {
    from {
        background-position: center -10px ;
    }
    to {
        background-position: center
    }
}

@-webkit-keyframes moveUpContact {
    from {
        -webkit-transform: translateY(90%);
                transform: translateY(90%);
    }
    to {
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
}

@keyframes moveUpContact {
    from {
        -webkit-transform: translateY(90%);
                transform: translateY(90%);
    }
    to {
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
}