@font-face {
    font-family: 'Kdam Thmor Pro';
    src: url('KdamThmorPro-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Ubuntu';
    src: url('Ubuntu-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'Ubuntu';
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background: linear-gradient(to bottom, #547608 300px, #fff5e4c1 200px);
    color: #212121;
    font-size: var(--text-size);
}

:root {
    --verde: #547608;
    /* --bluemenu: rgb(90, 103, 139);*/
    --bluemenu: rgb(84, 118, 8);
    --backgrey: rgb(245, 135, 10);
    --letter-spacing: 0.25em;
    --re-title-size: 2.6rem;
    --h1-size: 2.7rem;
    --h2-size: 2.0rem;
    --h3-size: 1.5rem;
    --h4-size: 1.3rem;
    --sub-title: 1.2rem;
    --main-font-family: 'Kdam Thmor Pro';
    --elsa: 'Ubuntu-Italic';
    --radio5: 5px;
    --radio10: 10px;
    --radioform: 3px;
    --letter-spacingH1: 0.3rem;
    --letter-spacingH2: 0.1rem;
    --text-size: 1rem
}

.espacio {
    height: 60px;
    opacity: 0;
}

.espacio-sup {
    height: 25px;
    opacity: 0;
}

.call-action {
    background-color: var(--backgrey);
    padding: 20px 0 10px 0;
}

h1 {
    font-family: var(--main-font-family);
    font-size: var(--h1-size);
    letter-spacing: var(--letter-spacingH1);
    text-align: center;
    color: #ffffff;
}

h2 {
    font-family: var(--main-font-family);
    font-size: var(--h2-size);
    text-align: center;
    color: #ffffff;
    letter-spacing: var(--letter-spacingH2);
}


h3 {
    font-family: var(--main-font-family);
    font-size: var(--h3-size);
    text-align: center;
    color: #ffffff;
    letter-spacing: var(--letter-spacingH2);
}

h4 {
    font-family: var(--main-font-family);
    font-size: var(--h4-size);
    text-align: center;
    color: #ffffff;
    padding: 10px 0;
    letter-spacing: var(--letter-spacingH2);
}

.title {
    background-color: var(--bluemenu);
    padding: 20px 0 10px 0;
    border-radius: 10px;
    margin: 0 0 35px 0;
    border-radius: var(--radio5);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.subtitle {
    font-family: var(--main-font-family);
    font-size: var(--h4-size);
    text-align: center;
    color: #384364;
    letter-spacing: var(--letter-spacingH2);
}

.logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo img {
    max-width: 100%;
    height: auto;
    display: block;
}

.nomb {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    width: 180px;
}

.elsa {
    font-family: var(--elsa);
    color: #ffffff;
    font-size: 1.5rem;
    padding-bottom: 30px;
    padding-top: 10px;
    text-align: left;
}

.propiedad {
    color: #ffffff;
    text-align: center;
}

#map {
    height: 500px;
    width: 50%;
    border-radius: 12px;
}

.map-fon {
    background-image: url("img/map.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.map-txt {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.compromiso {
    border-radius: 0px 0px 10px 10px;
    background-color: var(--backgrey);
    padding: 15px 0px;


    box-shadow: rgba(114, 114, 114, 0.219) -0px 6px 6px 0px inset;
}

.form-txt {
    display: flex;
    justify-content: center;
    align-items: center;
}

.div-level {
    margin: 25px 0px 0px 0px;
}

.textarea {
    width: 100%;
    margin-bottom: 25px;
}

.custom-button {
    font-family: var(--main-font-family);
    font-size: 1.3rem;
    align-items: center;
    color: var(--fondo);
    background-color: var(--bluemenu);
    border-radius: var(--radio5);
    /* Padding vertical, el horizontal lo manejarán los elementos internos */
    transition: transform 0.2s, box-shadow 0.2s;
    /* Transición suave al interactuar */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    text-align: center;
    padding: 15px 0;
}

.custom-button:hover {
    transform: translateY(2px);
    /* Efecto ligero de levantamiento al pasar el ratón */
    box-shadow: none;
    /* Sombra más pronunciada al pasar el ratón */
    ;
}



input[type="checkbox"] {
    /* background-color: initial; */
    /* cursor: default; */
    /* appearance: auto; */
    /* box-sizing: border-box; */
    margin: 3px 3px 3px 4px;
    width: 17px;
    height: 17px;
}

input[type="text"],
input[type="email"],
input[type="tel"] {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid var(--bluemenu);
    border-radius: var(--radioform);
}

.btn-custom {
    background-color: var(--bluemenu);
    color: #ffffff;
    padding: 12px 28px;
    font-family: var(--main-font-family);
    font-size: var(--h4-size);
    border: none;
    border-radius: var(--radio5);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    width: 100%;
    letter-spacing: 0.5rem;
}

.btn-custom:hover {
    /* 2. Usa la variable con la opacidad en el hover */
    opacity: 0.9;
    /* Opacidad del 60% */
    transform: translateY(2px);
    box-shadow: none;
}



.menu {
    text-align: right;
    color: #ffffff;
}

a.menu {
    text-decoration: none;
}

a.menu:hover {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.7);
}

.footer {
    background-color: var(--bluemenu);
    padding: 20px 0 35px 0;
    color: #ffffff;
}

.footer-txt {
    font-family: var(--main-font-family);
    font-size: 1.2rem;
    text-align: center;
    letter-spacing: 0.3rem;
}

.elegirnos {
    background-image: url("img/fondo.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.politica {
    font-weight: 100;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.3);
    text-decoration: none;
    text-align: center;

}

.politica:hover {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.5);

}

.webmail {
    color: rgb(165, 165, 165);
    text-decoration: none;
    text-align: right;
}

.webmail:hover {
    color: rgb(67, 89, 114);
    /* o el color que quieras */
    text-decoration: none;
    text-align: right;
    /* opcional */
}

@media screen and (max-width: 600px) {
    .espacio {
        height: 30px;
        opacity: 0;
    }

    h1 {
        font-size: 1.5rem;
    }

    #map {
        width: 100%;
    }

    .map-fon {
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .espacio-sup {
        height: 10px;
    }

    .logo {
        margin-bottom: 10px;
    }
}