/* Patrones Globales del CSS */

/* Tipografía Principal */
h1, h2, h3, h6, a, button { font-family: 'Big Shoulders Display', cursive; }

/* Tipografía Secundaria */
h4, h5, p, div, form, input, select, option, textarea, span, em, strong { font-family: 'Roboto Condensed', sans-serif; }

/* Fondos Oscuros */
/* .fondo-dark { background: #111; } */
body { background: rgb(0,0,0); background: -moz-linear-gradient(top,  rgba(0,0,0,1) 0%, rgba(17,17,17,1) 100%); background: -webkit-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(17,17,17,1) 100%); background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(17,17,17,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#111111',GradientType=0 ); }

/* Quitar el Margen por defecto que trae Body */
body { margin: 0 !important; }

/* Cargar el display: block; a todos los tags de estructura */
header, main, section, footer, aside, article, nav, figure, figcaption, div { display: block; }

/* Quitar margen por defecto a todas las tags de texto */
h1, h2, h3, h4, h5, h6, p { margin: 0; }



/* ----------------------------------------------------------------- */


/* CSS propio */

/* Componente Menú Móvil */
aside#menu-burger { display: none; }


/* Componente WhatsApp */
aside#boton-wp { width: 45px; height: 45px; margin: 0; float: none; position: fixed; bottom: 20px; right: 20px; z-index: 9999; }
aside#boton-wp a { width: 100%; height: auto; margin: 0; float: none; position: relative; display: block; text-align: center; color: #fff; background: rgb(43 199 4); font-size: 1.5em; padding: 8px 0; border-radius: 50%; transition: all 0.3s ease-in; }
aside#boton-wp a:hover { background: #f90; transition: all 0.3s ease-in; }


/* Header */
header { width: 100%; height: 250px; margin: 0; float: none; position: fixed; top: 0; left: 0; z-index: 99999; transition: all 0.3s ease-in; }
header figure { width: 1100px; height: 250px; margin: 0 auto; float: none; position: relative; transition: all 0.3s ease-in; }
header figure a { width: 200px; height: 200px; margin: 25px 0; float: none; position: relative; display: block; transition: all 0.3s ease-in; }
header figure a img { display: block; width: 100%; height: auto; border-radius: 50%; transition: all 0.3s ease-in; }

.dark-header { background: rgb(17,17,17); background: -moz-linear-gradient(top,  rgba(17,17,17,1) 0%, rgba(0,0,0,1) 100%); background: -webkit-linear-gradient(top,  rgba(17,17,17,1) 0%,rgba(0,0,0,1) 100%); background: linear-gradient(to bottom,  rgba(17,17,17,1) 0%,rgba(0,0,0,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#111111', endColorstr='#000000',GradientType=0 ); }


/* Footer */
footer { width: 100%; height: auto; margin: 0 auto; float: none; position: relative; }
footer div#ancla-contacto { width: 100%; height: 1px; display: block; margin: 0; float: none; position: absolute; top: -100px; left: 0; z-index: 13; }

footer article { width: 1100px; height: auto; margin: 0 auto; float: none; position: relative; }
footer article h6 { width: 100%; height: auto; display: block; margin: 0 auto; float: none; position: relative; color: #fff; font-size: 1.4em; line-height: 1em; text-align: center; padding: 90px 0 30px; letter-spacing: 0.25em; font-weight: 300; }

footer article nav { width: 180px; height: 41px; margin: 0 auto 90px; float: none; position: relative; }
footer article nav a { width: 40px; height: auto; margin: 0 10px; float: left; position: relative; display: block; text-align: center; color: #fff; font-size: 1.5em; padding: 6px 0; transition: all 0.3s ease-in; }
footer article nav a:hover { color: #f90; transition: all 0.3s ease-in; }


/* Main */
main { width: 100%; height: auto; margin: 250px auto 0 auto; float: none; position: relative; }

/* Sección Presentación */
section#presentacion { width: 100%; height: auto; margin: 100px auto 0 auto; float: none; position: relative; }
section#presentacion div#ancla-presentacion { width: 100%; height: 1px; display: block; margin: 0; float: none; position: absolute; top: -250px; left: 0; z-index: 11; }
section#presentacion article { width: 1100px; height: auto; margin: 0 auto; float: none; position: relative; }
section#presentacion article h1 { width: 100%; height: auto; display: block; margin: 0 auto; float: none; position: relative; color: #f90; font-size: 2.75em; line-height: 1em; text-align: left; padding: 70px 0 15px; letter-spacing: 0.05em; font-weight: 400; }
section#presentacion article p { width: 100%; height: auto; display: block; margin: 0 auto; float: none; position: relative; color: rgb(199, 199, 199); font-size: 1.05em; line-height: 1.45em; text-align: left; padding: 0 0 90px; letter-spacing: 0.055em; font-weight: 100; }
section#presentacion article p strong { font-weight: 400; color: #fff; }


/* Sección Portafolio */
section#portafolio { width: 100%; height: auto; margin: 0 auto; float: none; position: relative; }
section#portafolio div#ancla-portafolio { width: 100%; height: 1px; display: block; margin: 0; float: none; position: absolute; top: -100px; left: 0; z-index: 12; }

section#portafolio article { width: 1100px; height: auto; margin: 0 auto; float: none; position: relative; }
section#portafolio article h3 { width: 100%; height: auto; display: block; margin: 0 auto; float: none; position: relative; color: #999; font-size: 1.4em; line-height: 1em; text-align: left; padding: 0 0 10px; letter-spacing: 0.05em; font-weight: 400; }
section#portafolio article h2 { width: 375px; height: auto; display: block; margin: 0 0 50px; float: none; position: relative; color: #fff; font-size: 2.3em; line-height: 1em; text-align: left; padding: 0 0 10px; letter-spacing: 0.05em; font-weight: 400; border-bottom: solid 2px #f90; }

section#portafolio article nav { width: 100%; height: auto; margin: 0 auto; float: none; position: relative; }

section#portafolio article nav a.img-portafolio { width: 336px; height: 336px; margin: 14px; float: none; position: relative; display: inline-block; overflow: hidden; transition: all 0.3s ease-in; }
section#portafolio article nav a.img-portafolio span.titulo-proyecto { width: 100%; height: auto; margin: 0; float: none; position: absolute; top: 0; left: 0; z-index: 20; display: block; color: #f90; font-size: 1.35em; line-height: 1em; text-align: center; padding: 157px 0; letter-spacing: 0.15em; font-weight: 400; transition: all 0.3s ease-in; }
section#portafolio article nav a.img-portafolio span.capa-color { width: 100%; height: 100%; margin: 0; float: none; position: absolute; top: 0; left: 0; z-index: 19; display: block; background: rgb(0 0 0 / 85%); transition: all 0.3s ease-in; }
section#portafolio article nav a.img-portafolio img { width: 100%; height: auto; margin: 0; float: none; position: absolute; top: 0; left: 0; z-index: 18; display: block; transition: all 0.3s ease-in; }

/* section#portafolio article nav a.img-portafolio:nth-child(3) span.capa-color { background: rgba(0, 153, 255, 0.856); } */

section#portafolio article nav a.img-portafolio:hover { transition: all 0.3s ease-in; }
section#portafolio article nav a.img-portafolio:hover span.titulo-proyecto { color: #000; transition: all 0.3s ease-in; }
section#portafolio article nav a.img-portafolio:hover span.capa-color { background: rgb(255 153 0 / 85%); transition: all 0.3s ease-in; }
section#portafolio article nav a.img-portafolio:hover img { transform: scale(1.1); transition: all 0.3s ease-in; }




/* Zona de Media Queries */

/* MQ para Tablets = Breakpoint 1199px */
@media only screen and (max-width: 1199px){
    header figure { width: 80%; }

    section#presentacion article { width: 80%; }

    section#portafolio article { width: 80%; }
    section#portafolio article nav { width: 602px; }
    section#portafolio article nav a.img-portafolio { width: 270px; height: 270px; }
    section#portafolio article nav a.img-portafolio span.titulo-proyecto { padding: 124px 0; }

    footer article { width: 80%; }
}

@media only screen and (max-width: 799px){
    section#portafolio article nav { width: 100%; }
    section#portafolio article nav a.img-portafolio { display: block; margin: 14px auto; }
}


/* MQ para Móviles Grandes = Breakpoint 499px */
@media only screen and (max-width: 499px){
    footer article { width: 90%; }

    section#portafolio article h2 { width: 100%; }
}


/* MQ para Móviles Pequeños = Breakpoint 399px */
@media only screen and (max-width: 399px){
    
}