*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
}

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
    background-color: #58c3bd;
}

body {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: white;
    /* background-color: #58c3bd; */
    max-width: 100vw;
}

.container-principal {}

/* section.seccion {
    min-height: 100vh;
    width: 100%;
    /* padding-top: 56px; */
}

*/
/* NAV */

nav.nav-principal {
    display: block;
    position: fixed;
    width: 100%;
    background-color: #58c3bd;
    z-index: 2;
}

.nav-principal_desktop {
    display: none;
}

.nav-principal_movil {
    display: flex;
    list-style: none;
    justify-content: flex-end;
    padding: 1rem 0;
}

.nav-principal_movil a,
.nav-principal_desktop a {
    text-decoration: none;
    padding: .5rem 1rem;
    margin-right: 1rem;
    color: white;
}

.nav-principal_movil a.link-idioma,
.nav-principal_desktop a.link-idioma {}

.nav-principal_movil a.link-contacto,
.nav-principal_desktop a.link-contacto {
    background-color: #ffcc05;
    border-radius: 2rem;
    color: #868686;
    font-weight: 700;
}

.nav-principal_movil a.link-navegacion,
.nav-principal_desktop a.link-navegacion {
    font-weight: 700;
    text-decoration: underline;
}

.nav-principal_movil li.li-navegacion,
.nav-principal_desktop li.li-navegacion {
    margin-right: auto;
}


a.link-idioma--error {
    display: inline-block;
    background-color: #ffcc05;
    border-radius: 2rem;
    color: #868686;
    font-weight: 700;
    text-decoration: none;
    padding: .5rem 2rem;
    margin: 1rem 2rem;
}

/* SECCION HERO */

section.seccion-hero {
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

h2.seccion-hero--h2 {
    font-family: 'Cardo', serif;
    font-size: 4rem;
    text-align: center;
    max-width: 500px;
}

span.seccion-hero--subrayado {
    display: inline-block;
}

span.seccion-hero--subrayado::after {
    content: '';
    display: block;
    /* width: 140%; */
    transform: translate(-12%, -100%);
    height: 0.3rem;
    /* background-color: #ffcc05; */
    background-image: url(../imagenes/subrayado.gif);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

p.seccion-hero--p {
    font-family: 'Cardo', serif;
    font-size: 1.8rem;
}

p.seccion-hero--p_chamber {
    font-family: 'Cardo', serif;
    max-width: 50%;
    font-size: 1.8rem;
    text-align: center;
}

span.seccion-hero--precio {
    color: #868686;
}

a.seccion-hero--link-seccion {
    text-decoration: none;
    text-align: center;
    color: white;
    margin-top: 1rem;
}

p.seccion-hero--work-label {
    font-family: 'Cardo', serif;
    font-size: 1.5rem;
}

img.seccion-hero--logo {
    width: 80%;
    padding: 2rem 0;
    max-width: 450px;
}

img.seccion-hero--chamber-logo {
    width: 80%;
    padding: 0;
    max-width: 450px;
}

img.seccion-hero--flecha {
    width: 50px;
    /* padding: 2rem 0; */
}

/* partes genericas secciones paginas */
div.descripcion-sitio {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(0, 0, 0, .8);
    border-radius: 1rem;
    height: 400px;
    width: 100%;
    justify-content: center;
}

div.descripcion-sitio>h2.sitio-nombre {
    font-family: 'Cardo', serif;
    font-size: 2.5rem;
    text-align: center;
    max-width: 100%;
    word-wrap: break-word;
    hyphens: manual;
}

div.descripcion-sitio>a.sitio-boton {
    display: inline-block;
    background-color: #ffcc05;
    border-radius: 2rem;
    color: #868686;
    padding: .5rem 2rem;
    /* margin-top: 1rem; */
    text-decoration: none;
}

div.descripcion-sitio>img.sitio-rating {
    width: 250px;
}

div.descripcion-sitio>p.sitio-descripcion {
    margin: 1rem 1rem;
    text-align: center;
    min-height: 30%;
}

section.seccion-pagina-1,
section.seccion-pagina-2,
section.seccion-pagina-3,
section.seccion-pagina-4 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

div.screenshot-sitio {
    display: block;
    width: 100vw;
    height: 50vh;
    background-position: top;
    background-size: cover;
}

div.separador-secciones {
    width: 100%;
    height: .3rem;
    background-color: #ffcc05;
}

.sitio-portfolio {
    background-position: top;
    background-size: cover;
    border-radius: 1rem;
    /* width: 100%; */
    margin: 1rem;
    height: 400px;
}

.sitio-portfolio-1 {
    background-image: url(../imagenes/screenshots/2sabnch-full.png);
}

.sitio-portfolio-2 {
    background-image: url(../imagenes/screenshots/psisolamato-full.png);
}

.sitio-portfolio-3 {
    background-image: url(../imagenes/screenshots/esbendev-com-full.png);
}

/* .sitio-portfolio-4 {
    background-image: url(../imagenes/screenshots/waesolutions-full.png);
} */

.sitio-portfolio-5 {
    background-image: url(../imagenes/screenshots/ob08-net-full.png);
}

.sitio-portfolio-6 {
    background-image: url(../imagenes/screenshots/waesolutions-full.png);
}

.sitio-portfolio-7 {
    background-image: url(../imagenes/screenshots/stephaniestroudcpa-com-full.png);
}

.sitio-portfolio-8 {
    background-image: url(../imagenes/screenshots/menumenu-dev-full.png);
}

.sitio-portfolio-9 {
    background-image: url(../imagenes/screenshots/menumenu-dev-e1-full.png);
}

.sitio-portfolio-10 {
    background-image: url(../imagenes/screenshots/menumenu-dev-e2-full.png);
}

section.seccion-contacto {
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: white;
    color: black;
}

h2.seccion-contacto--h2 {
    font-family: 'Cardo', serif;
    font-size: 4rem;
    text-align: center;
    max-width: 500px;
}

p.seccion-contacto--p {
    font-family: 'Cardo', serif;
    font-size: 1.8rem;
}

div.contacto-links {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

a.contacto-links--boton {
    display: inline-block;
    background-color: #ffcc05;
    border-radius: 2rem;
    color: #868686;
    font-weight: 700;
    text-decoration: none;
    padding: .5rem 2rem;
    margin: 1rem 2rem;
}

img.seccion-contacto--img,
img.descripcion-sitio--icono {
    max-width: 100px;
}

img.descripcion-sitio--icono {
    display: none;
}

.seccion-portfolio {
    padding: 1rem 0;
}

@media screen and (min-width: 700px) {
    div.contacto-links {
        flex-direction: row;
    }

    .seccion-portfolio {
        display: grid;
        padding: 1rem;
        gap: 1rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    div.descripcion-sitio>h2.sitio-nombre {
        font-size: 2.5rem;
    }
}

@media screen and (min-width: 700px) and (hover) {
    div.descripcion-sitio {
        opacity: 0;
        transition: opacity .3s;
    }

    div.descripcion-sitio:hover {
        opacity: 1;
    }
}

@media screen and (min-width: 1000px) {
    .nav-principal_desktop {
        display: flex;
        list-style: none;
        justify-content: flex-end;
        padding: 1rem 0;
    }

    .nav-principal_movil {
        display: none;
    }

    a.seccion-hero--link-seccion {
        text-decoration: none;
        text-align: center;
        color: white;
        display: block;
        position: absolute;
        bottom: 0;
        right: 0;
        margin: 0;
        padding: 1rem;
    }

    img.seccion-hero--flecha {
        width: 100px;
    }

    p.seccion-hero--work-label {
        font-family: 'Cardo', serif;
        font-size: 3rem;
        transform: rotate(90deg);
        margin-bottom: 3rem;
    }

    section.seccion-pagina-1,
    section.seccion-pagina-2,
    section.seccion-pagina-3,
    section.seccion-pagina-4 {
        flex: 1 1 0px;
    }

    section.seccion-pagina-1,
    section.seccion-pagina-3 {
        flex-direction: row;
    }

    section.seccion-pagina-2,
    section.seccion-pagina-4 {
        flex-direction: row-reverse;
    }

    .sitio-portfolio {
        height: 500px;
    }

    div.descripcion-sitio {
        width: 100%;
        padding: 1rem;
        border-radius: 1rem;
        height: 500px;
    }

    div.descripcion-sitio:hover {
        background-color: rgba(0, 0, 0, 0.8);
    }

    div.descripcion-sitio>h2.sitio-nombre {
        /* font-size: 3rem; */
    }

    div.foto-sitio {
        width: 100%;
        height: 100vh;
    }

    div.screenshot-sitio {
        display: block;
        width: 100%;
        height: 100%;
        background-attachment: fixed;
        background-position: 0 56px;
        background-size: 50%;
    }

    div.descripcion-sitio>p.sitio-descripcion {
        font-size: 1.2rem;
        /* padding: 0 3rem; */
    }

    img.seccion-hero--logo {
        max-width: 600px;
    }

    img.descripcion-sitio--icono {
        display: block;
    }

    .seccion-portfolio {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (min-width: 1200px) {
    img.seccion-hero--logo {
        max-width: 800px;
    }

    .seccion-portfolio {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        max-width: 1400px;
        margin: 0 auto;
    }
}