/** Para respetar el ancho de los elementos, incluyendo en el mismo tanto el márgen como el padding */
* {
    box-sizing: border-box;
}

/** Formato general para la página */
body {
    background-color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
}

/** Ancho del 90% para poder tener un márgen, ancho maximo para que el contenedor no distorcione el contenido cuando el usuario haga mas grande la página, un margen auto para poder centrar el contenedor, el overflow se coloca por ser contenedor padre y eliminar todo el contenido sobrante, para que aparezca completo */
.contenedor {
    width: 90%;
    max-width: 1200px;
    margin: auto;
    overflow: hidden;
}


/** TODO: ===== HEADER ===== */
/** Se agrega un fondo de imagén y en caso de que no cargue, se coloca un color, la imágen no se debe repetir en caso de que sea mas pequeña que el ancho de la página y la centramos, se le pone un alto máximo a la imágen porque al texto se le dará márgen */
header {
    background-color: #49a3d6;
    ;
    background-image: url("../img/fondo.jpeg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    max-height: 600px;
}

/** Al manú dar un margen arriba y abajo de 40px y a los lados de 0, alineamos su contenido a la derecha */
header .menu {
    margin: 40px 0;
    text-align: right;
}

/** A los enlaces del menú le asignamos color blanco al texto, quitandole el subrayado y con tamaño de letra de 1em. Un margen a los lados de 20px para que sirva de separación entre el texto de los enlaces, además de un border 2px solido transparente. Se establece en inline-block para que respete el padding. El color del border se lo vamos a cambiar cuando el mouse se posicione por encima. Si no hubieramos establecido desde el principio el borde, se produciria el efecto en salto en la pagina al aplicar el efecto con la propiedad hover */
header .menu a {
    color: #fff;
    text-decoration: none;
    font-size: 1em;
    margin: 0 20px;
    border-bottom: 2px solid transparent;
    display: inline-block;
    padding-bottom: 9px;
}

/** Cambiar el color del border de transparente a blanco, cuando el mouse se posicione encima del enlace */
header .menu a:hover {
    border-bottom: 2px solid #fff;
}

/** Establecemos el contenedor en modo flex para que su contenido se centre de manera automatica horizontal y verticalmente, el margen se establece en 190px arriba y abajo */
header .contenedor-texto {
    display: flex;
    justify-content: center;
    align-content: center;
    margin: 190px 0;
}

/** Al contenedor de .nombre y .profesion, le asignamos un borde de 2px solido blanco transparente con un radio de 15px, centramos su contenido (h1 y h2), lo asignamos en inline-block para que respete el padding arriba y abajo de 20px y el de los lados de 60px */
header .contenedor-texto .texto {
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    text-align: center;
    display: inline-block;
    padding: 20px 60px;
}

/** Formatear a los h1 y h2 del contenedor secundario .texto, cambiando el color y el grosor, asi mismo quitarle un márgen que traen por default */
header .contenedor-texto .texto h1,
header .contenedor-texto .texto h2 {
    color: #fff;
    font-weight: 300;
    margin: 0;
}

/** A la clase .nombre le asignamos un margen inferior de 10px, un tamaño de letra 3 veces el predeterminado, y un interlineado de 50px para separar .nombre de .profesion */
header .contenedor-texto .texto .nombre {
    margin-bottom: 10px;
    font-size: 3em;
    line-height: 50px;
}

/** A la clase .profesion le asignamos un tamaño de letra 1.5 veces el predeterminado */
header .contenedor-texto .texto .profesion {
    font-size: 1.5em;
}

/** TODO:===== MAIN ACERCA DE ==== */

/** El overflow visible lo que hace es que el contenido se sobrepone al que tenga, en este caso para que .main .acercade .foto img se sobreponga al header */
.main .acercade .contenedor {
    overflow: visible;
}

/** Centramos horizontalmente el contenido */
.main .acercade {
    text-align: center;
}

/** Establecer un margen negativo de 60px al contenedor para que el contenido, en este caso la imagen, se junte con el elemento superior cercano (en este caso el encabezado) */
.main .acercade .foto {
    margin-top: -120px;
}

/** La alineación vertical es para quitar un pequeño espaciado que aparece verticalmente, un borde de 5px solido con color blanco semitransparente, un radio de 50px para el borde */
.main .acercade .foto img {
    vertical-align: top;
    border: 5px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
}

/** El texto dentro de .main . acercade .texto se establece a un ancho del 80% de su contenedor padre, con un color medio gris, un tamaño de letra de 1em, con un grosor de 600 e intelineado del 1.875em, además de un margen a los lados de auto para centrar el contenido */
.main .acercade .texto {
    width: 80%;
    color: #5a5a5a;
    font-size: 1em;
    font-weight: 600;
    line-height: 1.875em;
    text-align: justify;
    margin: 40px auto 60px auto;
}

/** Al titulo del texto, cambiarle el color a un tono amarillo, un tamaño de letra de 1.5em con relación al tamaño establecido para toda la página con un grosor de 300 y un interlineado de 1.5em, centrado el texto y con un margen inferior de 40px para separar el titulo del texto */
.main .acercade .texto .titulo {
    color: #dd820d;
    font-size: 1.5em;
    line-height: 1.5em;
    font-weight: 300;
    text-align: center;
    margin-bottom: 40px;
}

/** Al texto tipo span, se le asigna un color azul y un subrauyado para que se destaque en el contenido */
.main .acercade .texto .bold {
    color: #3895ea;
    text-decoration: underline;
}

/** TODO: ===== MAIN TRABAJOS ===== */

/** Al contenedor principal de los trabajos se le da un color de fondo para diferenciar en la página entre una sección y otra, así como un espaciado arriba y abajo de 60px */
.main .trabajos {
    background-color: #f2f2f2;
    padding: 60px 0;
}

.main .trabajos#playa,
.main .trabajos#hospedaje {
    background-color: #fff;
    padding: 60px 0;
}

/** El overflow se coloca por ser contenedor padre y eliminar todo el contenido sobrante, para que aparezca completo */
.main .trabajos .contenedor {
    overflow: hidden;
}

/** Al titulo del trabajo, cambiarle el color a un tono amarillo, un tamaño de letra de 1.5em con relación al tamaño establecido para toda la página con un grosor de 300 y un interlineado de 1.5em, centrado el texto y con un margen inferior de 40px para separar el titulo de la imágen */
.main .trabajos .titulo {
    color: #323068;
    font-size: 1.5em;
    line-height: 1.5em;
    font-weight: 300;
    text-align: center;
    margin-bottom: 40px;
}

/** Definir el modo flex el contenedor padre .contenedor-trabajos, colocando a los hijos en modo fila, en modo wrap enviamos a los hijos que no quepan en la fila a una nueva, el espacio entre ellos se debe distribuir */
.main .trabajos .contenedor-trabajos {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

/** A cada caja .trabajo, que contiene una imagen, un título con una breve descripción, le damos un ancho del 23% del ancho total del contenedor padre .contenedor-trabajos  para que nos permita tener por lo menos 4 elementos en una misma linea (23% * 4 = 92%) y tener una correcta distribución uniforme del espacio restante, mejorando con esto la presentación de los trabajos, además le agregamos un márgen inferior para separalo de los elementos inferiores (la siguiente linea de trabajos) */
.main .trabajos .contenedor-trabajos .trabajo {
    width: 23%;
    margin-bottom: 40px;
}

/** Definimos que el ancho del contenedor .imagen, hijo de .trabajo, ocupe el 100% del ancho con un márgen inferior de 10px */
.main .trabajos .contenedor-trabajos .trabajo .imagen {
    width: 100%;
    margin-bottom: 10px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
}

/** La imágen la definimos para que ocupe el 100% de la caja .imagen y le quitamos el espacio extra que en ocasiones aparece debajo de la imágen */
.main .trabajos .contenedor-trabajos .trabajo .imagen img {
    width: 100%;
    vertical-align: top;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

/** Alineamos al centro lo contenido (dos etiquetas <p>)  en la caja .descripcion */
.main .trabajos .contenedor-trabajos .trabajo .descripcion {
    text-align: center;
}

/** Al texto que contiene el nombre del proyecto le cambiamos el color, el grosor de fuente y asignamos un márgen inferior de 10px para que se separe del texto inferior .categoria */
.main .trabajos .contenedor-trabajos .trabajo .descripcion .nombre {
    color: #3895ea;
    font-weight: 700;
    margin-bottom: 10px;
}


/** Al texto que contiene una breve descripción del trabajo le cambiamos el color y el tamaño de fuente */
.main .trabajos .contenedor-trabajos .trabajo .descripcion .categoria {
    color: #636363;
    font-size: 0.875em;
}


/** TODO: ===== FOOTER CONTACTO ===== */
/** Se agrega un espaciado arriba y abajo de 60px unicamente */
footer .contacto {
    background-color: #f2f2f2;
    padding: 60px 0;
}

/** Al título se le cambia el color, tamaño de fuente, interlineado del texto y grosor de fuente, además de centrarlo en su contenedor, dejando un márgen inferior de 40px separandolo de los demás elementos */
footer .titulo {
    color: #3895ea;
    font-size: 1.5em;
    line-height: 1.5em;
    font-weight: 300;
    text-align: center;
    margin-bottom: 40px;
}

/** Definir el modo flex del contenedor padre .formulario, colocando a los hijos en modo fila, en modo wrap enviamos a los hijos que no quepan en la fila a una nueva, el espacio entre ellos se debe distribuir */
footer .contacto .formulario {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

/** A los input y textarea del formulario se le cambia el tamaño de la fuente, el color del texto asignandole un borde solido redondeado, además de una espaciado entre ellos de 15px arriba y abajo y de 20px a los lados */
footer .contacto .formulario input[type="text"],
footer .contacto .formulario input[type="email"],
footer .contacto .formulario textarea {
    font-size: 1.25em;
    color: #a4a4a4;
    border: 2px solid #cecece;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    padding: 15px 20px;
}

/** A los input y textarea del formulario se les cambia el color del borde cuando reciben el focus */
footer .contacto .formulario input[type="text"]:focus,
footer .contacto .formulario input[type="email"]:focus,
footer .contacto .formulario textarea:focus {
    border: 2px solid #387bea;
}

/** Los input text y email se les pone un ancho del 49% del contenedor padre .formulario y el espacio restante se distribuye entre ellos, de manera que el textarea se mueve a la siguiente linea por no caber en la misma que ellos, considerando ese movimiento, se le agrega un márgen inferior de 15px para separar los input del textarea */
footer .contacto .formulario input[type="text"],
footer .contacto .formulario input[type="email"] {
    width: 49%;
    margin-bottom: 15px;
}

/** El textarea se asigna con un ancho del 100% de su contenedor padre .formulario, de esta manera nos aseguramos que se mueva en una siguiente línea de donde se encuentran los input text y email, además de qe se les restringue el ancho y el alto para que el usuario no pueda redimencionar en exceso su tamaño, se le asigna un márgen inferior de 15px para separarlo del botón de envío */
footer .contacto .formulario textarea {
    width: 100%;
    height: 100px;
    min-width: 100%;
    max-width: 100%;
    min-height: 100px;
    max-height: 300px;
    margin-bottom: 15px;
}

/** El  márgen del botón de envío se coloca en auto para centrarlo en su contenedor padre .formulario, además de un color de fondo, también se le cambia el color del texto, se le quita el borde que acompaña a los botones y se deja de forma redondeada. Se le asigna un espaciado de 15px arriba y abajo y de 40px a los lados para que el texto interior tenga espacio. Cambiamos el estilo del cursor  */
footer .contacto .formulario .boton {
    margin: auto;
    background-color: #3895ea;
    color: #fff;
    border: none;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    padding: 15px 40px;
    cursor: pointer;
}

/** Cuando el botón de envío tiene el focus del mouse, cambia el color de su fondo */
footer .contacto .formulario .boton:hover {
    background-color: #387bea;
}

/** TODO: ===== FOOTER REDES SOCIALES ===== */
/** Cambiar el color de fondo del contenedor .redes-sociales, agregando un espaciado arriba y abajo de 60px */
footer .redes-sociales {
    background-color: #1e2b38;
    padding: 60px 0;
}

/** El contenedor padre de los enlaces es .contenedor que está dentro del contenedor .redes-sociales, ponerlo en modo flex y que su contenido se centre, en este caso los enlaces de las redes sociales */

footer .datoscontacto {
    display: inline-block;
}

footer .redes-sociales .contenedor {
    display: flex;
    justify-content: center;
}

/** A los enlaces de las redes sociales se les cambia el tamaño de la fuente, el color del texto, se alinea el texto del enlace al centro, con un anccho de 100px. Se debe establecer en modo block para poder asignarle márgen de 20px a los lados para separar cada enlace entre sí y un espaciado de 15px arriba y abajo. Se le asigna un borde redondeado */
footer .redes-sociales a {
    font-size: 2em;
    color: #fff;
    text-align: center;
    width: 100px;
    display: block;
    margin: 0 20px;
    padding: 15px 0;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

/** Cuando cada enlace reciba el focus del mouse, se le cambiará el color de fondo de acuerdo al color propio de la red social que corresponda a la clase asignada */
footer .redes-sociales .facebook:hover {
    background-color: #1877f2;
}

footer .redes-sociales .twitter:hover {
    background-color: #1da1f2;
}

footer .redes-sociales .youtube:hover {
    background-color: #ff0000;
}

footer .redes-sociales .instagram:hover {
    background-color: #405de6;
}

footer .redes-sociales .telegram:hover {
    background-color: #0088cc;
}

/** TODO: MEDIA QUERIES PARA MODO RESPONSIVE WEB */


/** TODO: Responsive Web a los 800px */
@media screen and (max-width: 800px) {

    /** Alineamos el contenido del menú al centro */
    header .menu {
        text-align: center;
    }

    /** A cada caja .trabajo, que contiene una imagen, un título con una breve descripción, le damos un ancho del 46% del ancho total del contenedor padre .contenedor-trabajos  para que nos permita tener por lo menos 2 elementos en una misma linea (46% * 2 = 92%) y tener una correcta distribución uniforme del espacio restante, mejorando con esto la presentación de los trabajos */
    .main .trabajos .contenedor-trabajos .trabajo {
        width: 46%;
    }
}

/** TODO: Responsive Web a los 500px */
@media screen and (max-width: 500px) {

    /** A la clase .nombre le asignamos un tamaño de letra 2 veces el predeterminado */
    header .contenedor-texto .texto .nombre {
        font-size: 2em;
    }

    /** A la clase .profesion le asignamos un tamaño de letra 1.05 veces el predeterminado */
    header .contenedor-texto .texto .profesion {
        font-size: 1.05em;
    }

    footer .redes-sociales .contenedor {
        flex-wrap: wrap;
        padding: 20px 0;
    }
}

/** TODO: Responsive Web a los 400px */
@media screen and (max-width: 400px) {

    /** Reducir el alto del header */
    header {
        max-height: 300px;
    }

    /** Ajustar lso margenes arriba y abajo del contenedor .menu */
    header .menu {
        margin: 20px 0;
    }

    /** Ajustar el márgen lateral de los enlaces */
    header .menu a {
        margin: 0 10px;
    }

    header .contenedor-texto {
        margin: 60px 0;
    }

    header .contenedor-texto .texto {
        padding: 10px 30px;
    }

    .main .acercade .texto {
        width: 100%;
    }

    .main .acercade .texto .titulo {
        margin-bottom: 20px;
    }

    .main .acercade .texto p {
        font-size: 1em;
        font-weight: 400;
        line-height: 1.6em;
    }


    /** A la clase .nombre le asignamos un margen inferior de 10px, un tamaño de letra 3 veces el predeterminado, y un interlineado de 50px para separar .nombre de .profesion */
    header .contenedor-texto .texto .nombre {
        margin-bottom: 5px;
        font-size: 2em;
        line-height: 25px;
    }

    /** A la clase .profesion le asignamos un tamaño de letra 1.5 veces el predeterminado */
    header .contenedor-texto .texto .profesion {
        font-size: 1em;
    }

    .main .trabajos {
        padding: 20px 0;
    }

    .main .trabajos .contenedor-trabajos .trabajo {
        margin-bottom: 20px;
    }

    .main .trabajos .contenedor-trabajos .trabajo .imagen img {
        height: 100px;
    }

    .main .trabajos .contenedor-trabajos .trabajo .descripcion .nombre {
        font-size: 0.8em;
        margin-bottom: 5px;
    }

    /** Al texto que contiene una breve descripción del trabajo le cambiamos el color y el tamaño de fuente */
    .main .trabajos .contenedor-trabajos .trabajo .descripcion .categoria {

        font-size: 0.7em;
    }

    footer .contacto {
        padding: 20px 0;
    }

    /** Al título se le cambia el color, tamaño de fuente, interlineado del texto y grosor de fuente, además de centrarlo en su contenedor, dejando un márgen inferior de 40px separandolo de los demás elementos */
    footer .titulo {
        line-height: 1em;
        margin-bottom: 40px;
    }

    footer .contacto .formulario input[type="text"],
    footer .contacto .formulario input[type="email"],
    footer .contacto .formulario textarea {
        font-size: 1em;
    }

    footer .redes-sociales {
        padding: 10px 0;
    }

    footer .redes-sociales .contenedor {
        width: 100%;
    }

    footer .redes-sociales a {
        margin: 0 10px;
    }


}