*, *::before, *::after { box-sizing: border-box }

:root {

    --bg: #121417;
    --box: #2b3039;
    --text: #ffffff;

    --primary: #264d96;
    --primary-l: #3a65b5;
    --primary-d: #264d96;

}

body {
    background: url(./img/Lightning.png) no-repeat;
    background-position: 40% 0;
    background-size: auto 0px;
    transition: .1s 1s background
}

body.loaded { 
    background-size: auto calc(100vh + 1rem)
}


@font-face {
    font-family: 'rubik';
    src: url('./fonts/rubik.ttf')
}

html { min-height: 100% }

body {

    max-width: 1440px;
    margin: 0 auto;
    padding:0;
    background-color: var(--bg);
    color: var(--text);

    font-family: 'rubik', Helvetica, sans-serif, Calibri;
    overflow-x: hidden;

    scroll-behavior: smooth
}

hr {
    border: none;
    width: 95%;
    margin: 0 auto;
    border-top: 1px solid var(--box)
}

hr.invert {
    width: 90%;
    border-top: 1px solid var(--bg)
}

/* Hipervínculos */

a {
    color: var(--primary-l);
    text-decoration: none
}

a:not(.no-decoration):hover { text-decoration: underline; }

/* Decoraciones en Títulos */

h2, h3 {
    position: relative;
    width: fit-content;
    margin-left: auto!important;
    margin-right: auto!important
}

h2.special::before {
    content: '';
    background-image: url('./ico/Lightning-H2.png');
    background-size: 100% 100%;
    position: absolute;
    top: -75%;
    left: -55%;
    width: 210%;
    height: 160%;
    z-index: 0;
    pointer-events: none;
    user-select: none
}

h3::before {
    content: '';
    background-image: url('./ico/Lightning-H3.png');
    background-size: 100% 100%;
    position: absolute;
    top: -20%;
    left: -55px;
    width: 50px;
    height: 125%
}

/* Botones */

.btn {
    display: block;
    width: fit-content;
    padding: .75rem 1rem;
    font-weight: bold;
    color: var(--text);
    background-color: var(--primary);
    border: 3px solid var(--primary);
    margin: 0 1rem;
    border-radius: 12px;
    text-decoration: none;
    cursor: pointer;
    transition: .2s
}

.btn.invert {
    background-color: var(--box);
    border-color: var(--box)
}

.btn.centered { margin: 0 auto }

.btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn:not(.disabled):hover {
    background-color: transparent;
}


/* Header */
header {
    width: 100%;
    height: 100px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    display: flex;
    justify-content: center;
    transition: .2s ease height, .2s background
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

header.sticky {
    background-color: var(--bg);
    height: 80px
}

    .header > .brand { display: flex;align-items: center }

    /* Logo */
    .logo {
        padding-left: 1rem
    }

    .header.sticky .logo img {
        width: 64px;
        transition: .2s ease
    }

    /* Nombre de la Empresa */
    .header > .brand > h1 {
        color: var(--text);

        font-size: 1.7rem;
        margin: 0;
        margin-left: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: .2s
    }

    header.sticky > .header > .brand > h1 {
        font-size: 1.5rem
    }

    .header > .brand:hover {
        text-decoration: none!important
    }

    .header > .brand > h1 > small { color: var(--primary) }

nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 1.5rem
}

nav > a {
    display: block;
    margin: 0 1rem;
    padding: .75rem;
    text-transform: uppercase;
    color: var(--text);
    font-weight: bold;
}

nav > a:hover { 

    text-decoration: none!important;
    color: #c9c9c9

}

/* Home Section */

#HOME {
    display: grid;
    grid-template-columns: 1fr 48%;
    margin: auto 0;
    min-height: calc(100vh - 100px);
    padding-top: 100px;
}

#HOME > .homeNext {
    position: absolute;
    bottom: 30px;
    left: -50px;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: 1.5s NextFly infinite
}

@keyframes NextFly {
    0%, 50%, 100% { transform: translateY(0px)  }

    25% { transform: translateY(2px)  }

    75% { transform: translateY(-2px)  }
}

#HOME > .homeNext > a > div {
    width: 56px;
    height: 56px;
    background-color: var(--text);
}

#HOME > div {
    width: 100%;
    padding: 0 .5rem;
}

#HOME > .improved {
    position: relative;
    padding-left: 5rem;
    height: 100%;
    letter-spacing: 4px;
    display: flex;
    align-items: center;
}

/* Gigantismo */
.improved > .improvedContent {
    padding: .5rem 1rem;
    text-transform: uppercase;
    font-weight: bold;
    height: fit-content;
    position: relative;
}

.improvedContent > .arrow {
    position: absolute;
    width: 60%;
    height: 4px;
    bottom: 1rem;
    left: 6rem;
    background-color: var(--text)
}

.improvedContent::before {
    content: '';
    position: absolute;
    top:0;
    left: -30px;
    width: 60%;
    height: 100%;
    z-index: -1;
    border: 5px solid var(--primary);
}

.improvedContent::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 80%;
    left: -3rem;
    top: 10%;
    background-color: var(--text)
}

.improved > .improvedContent > h2 {
    font-size: 3rem;
    margin: 1rem 0!important
}

.improved > .improvedContent > .covered {
    width: fit-content;
    background-color: var(--primary);
    padding: .15rem 1rem;
    margin: 1rem 0;
    font-size: 2.8rem
}

.improved > .improvedContent > .improvedService{
    font-size: 2rem;
    font-style: italic;
    margin: 1rem 0;
    margin-top: 2rem
}

/* Screen Animated in Desktop */

.showProject {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.showProject > .screenContainer {
    position: relative;
    top: -50px;
    width: 100%;
    transition: .2s
}

.showProject > .screenContainer > .shadowBottom{
    position: absolute;
    bottom:0;
    left: 2%;
    width: 96%;
    height: 30px;
    z-index: 0;
    border-radius: 12px;
    box-shadow: 0 5px 10px 2px var(--primary);
    animation: 12s fly infinite
}

.screen {
    background-color: var(--box);
    border: 4px solid var(--primary);
    border-bottom: none;
    padding: 1rem;
    border-radius: 12px;
    width: 100%;
    height: 100%;
    max-height: 350px;
    position: relative;
    animation: 12s fly infinite;
    transition: .2s ease transform
}

.screen > img {
    width: 100%;
    height: 100%;
    transform: scaleX(1);
    transition: .3s ease transform
}

.screen > img.change {
    transform: scaleX(0)
}

.screen > .screenShadow {
    position: absolute;
    bottom: -120px;
    width: 100%;
    height: 20px;
    padding-right: calc(.5rem + 5px)
}

.screen > .screenShadow > div {
    margin: 0 auto;
    width: 30%;
    height: 100%;
    border-radius: 100%;
    background-color: var(--primary-d);
    box-shadow: 0 0 5px 10px var(--primary-d);
    opacity: .3;
    animation: 12s flyShadow infinite
}

@keyframes fly {

    0% {

        transform: translateY(0px)

    }

    25% {
        transform: translateY(60px)
    }

    100% {
        transform: translateY(0)
    }

}

@keyframes flyShadow {

    0% {
        transform: translateY(0px)
    }

    25% {
        transform: translateY(-60px);
        width: 80%;
        height: 12px;
        box-shadow: 0 0 5px 1px var(--primary);
        opacity: .9
    }

    100% {
        transform: translateY(0px)
    }

}

@media screen and (max-width: 1310px) {

    #HOME { grid-template-columns: 1fr 45%  }

}

/* WORKS */

#works {
    margin-top: 1rem;
    padding: .5rem 0
}

#works > h2 {
    margin-top: calc(2rem + 80px);
    text-align: center;
    text-transform: uppercase;
}

#works > .works {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1rem;
    margin-top: 4rem
}

.work {
    position: relative;
    width: 100%;
    height: 250px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    transition: 0.5s
}

.work .circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.work .circle::before{
    content: '';
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--primary);
    clip-path: circle(100px at center);
    transition: 0.5s
}

.work:hover .circle::before,
.work.active .circle::before{
    background-color: var(--primary);
    clip-path: circle(100% at center)
}

.work img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 225px;
    width: 130px;
    pointer-events: none;
    transition: .5s;
}

.work.desktop img {
    width: 50%;
    max-width: 250px;
    height: auto
}

.work:hover img, .work.active img{
    left: 72%;
    top: 50%;
    height: 105%;
    width: 150px
}

.work.desktop:hover img, .work.desktop.active img {
    max-width: 50%;
    width: 100%;
    height: auto
}

.work .content {
    position: relative;
    width: 50%;
    left: 20%;
    padding: 1rem;
    padding-left: 2rem;
    opacity: 0;
    visibility: hidden;
    transition: .5s
}

.work.desktop .content {
    width: 45%
}

.work:hover .content, .work.active .content {
    left: 0;
    opacity: 1;
    visibility: visible;
}

.work .content h2 {
    color: var(--text);
    text-transform: uppercase;
    font-size: 2rem;
    line-height: 1rem;
}

.work .content p {
    padding: .5rem 0
}

.work .content a {
    position: relative;
    padding: .75rem 2rem;
    border-radius: 12px;
    background: #fff;
    color: #111;
    margin-top: 10px;
    display: inline-block;
    text-decoration: none;
    font-weight: bold;

}

@media (max-width: 991px) {

    /* Remover rayo gigante en background body*/
    body { background-image: none }

    /* Centrar Next */
    #HOME > .homeNext { left: 0 }

    #HOME { 
        grid-template-columns: 1fr;
        grid-gap: 2rem;
    }

    #HOME > div {
        width: 50%;
        margin-left: auto;
        margin-right: auto
    }

    #HOME > .improved {
        padding-left: 7rem;
        margin-bottom: 4rem!important
    }

    #HOME > .showProject {
        margin-top: 3rem;
        height: fit-content;
        width: 90%
    }

    .screen {
        max-height: inherit;
    }

    #works > .works {
        grid-template-columns: 1fr
    }

    .work{
        width: 100%;
        max-width: 95%!important;
        align-items: flex-start;
        margin-bottom: 5rem
    }

    .work:hover, .work.active{
        height: 600px
    }

    .work.active .circle::before{
        background-color: var(--primary);
        clip-path: circle(100% at center)
    }
    
    .work.active .content {
        left: 0;
        opacity: 1;
        visibility: visible;
    }

    .work .content{
        width: 100%!important;
        left: 0;
        padding: 30px;
    }

    .work:hover img, .work.active img {
        top: 70%;
        left: 50%;
        width: 150px;
        height: auto
    }

    .work.desktop img {
        width: 80%;
        max-width: 350px;
        height: auto
    }

    .work.desktop:hover img, .work.desktop.active img{
        width: 100%;
        height: auto
    }

}

@media (max-width: 420px) {
    .work .content {
        padding: 20px
    }
}

/* Services */

#services {
    padding: 1rem
}

#services > h2 {
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 1rem;
    margin-top: 100px;
}

.services {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1rem;
}

#services > .serviceOffer {

    width: 80%;
    padding: .5rem;
    border-radius: 12px;
    background-color: var(--primary);
    margin: 0 auto;
    text-align: center

}
#services > .serviceOffer > p{ margin: 0 }

.services > .service {

    background-color: var(--box);
    border-radius: 12px;
    padding: 1rem 0;
    height: fit-content;
    margin: auto 0;
    margin: 3rem 0;
    margin-top: 1rem

}

.services > .service > ul {
    list-style: none;
    padding: 0 .5rem;
    margin: 1rem 0
}

.services > .service > ul > li {
    padding: .5rem;
    margin: .25rem 0;
    border-radius: 12px
}

.services > .service > ul > li:nth-child(odd) {
    background-color: #2e343e
}

.services > .service > p {
    padding: 0 1.5rem
}

.services > .service > a > s {
    font-size: .9rem;
    color: #b1b5bd;
}

.services > .service > h3 {
    margin: 0;
    text-align: center
}

#services > p {
    text-align: center
}

@media screen and (max-width: 768px) {

    .logo { padding: 0 }

    #HOME > .homeNext { display: none }

    #HOME > div {
        width: 100%;
        margin: 0 auto
    }

    #HOME > .improved {
        padding-left: 4rem;
        margin-bottom: 0;
        height: fit-content;
        width: fit-content;
        margin-top: 2rem;
    }

    .screen,
    .showProject > .screenContainer > .shadowBottom,
    .screen > .screenShadow > div
    { animation: none }
    
    .screen > .screenShadow { display: none }

    #services > .services {
        grid-template-columns: 1fr;
    }

    nav { 
        display: none
     }
}

/* About */

#about {

    min-height: 100vh;
    margin-top: 8rem;
    margin-bottom: 4rem;

    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;

}

#about > h2 {
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 3rem
}

#about > .content > img {
    width: 30%;
    border-radius: 100%;
    float: left;
    shape-outside: circle();
    margin: .5rem
}

#about > .content > p {
    padding-left: 1rem
}

/* Contact */

.separate {
    width: 100%;
    height: 4px;
    background-color: var(--text);
    margin-bottom: .5rem
}

#contact {
    min-height: 100vh;
    background-color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 2rem
}

#contact > h2 {
    text-align: center;
    text-transform: uppercase;
    margin: 0;
    margin-top: 80px;
    margin-bottom: 3rem
}

#contact > div {
    width: 50%;
}

#contact > div > .input {
    display: flex;
    flex-direction: column
}

#contact > div > .input > label {
    padding: .75rem 0
}

#contact > div > .input > input {

    padding: .75rem;
    border: none;
    color: #ffffff;
    background: transparent;
    border-bottom: 2px solid var(--text);
    font-size: 1rem
}

#contact > div > .input > input:focus {
    outline: none
}

#contact > div > .input > textarea {
    margin: 0;
    margin-left: auto;
    padding: .75rem;
    width: 100%;
    position: relative;
    border: none;
    background: transparent;
    color: var(--text);
    border-bottom: 2px solid var(--text);
}

#contact > div > .input > textarea:focus {
    outline: none
}

/* Footer */

footer {
    padding: .5rem 0;
    text-align: center;
    width: 90%;
    margin: 0 auto;
    position: relative;
    top: -10px;
    background: var(--bg);
    border-radius: 12px
}

/* Scroll Revela */

.reveal {
    opacity: 0;
    transition: .3s .2s ease
}

.reveal.r-scale {
    opacity: 1;
    transform: scale(0)
}

.reveal.r-scale.active {
    transform: scale(1)
}

.reveal.r-delay-5 { transition-delay: .5s }

.reveal.active { opacity: 1 }

/* Box Borders Effect Around */

.box-borders { position: relative }
.box-borders:hover::before, 
.box-borders:hover::after, 
.box-borders.complete::before,
.box-borders.complete::after {
    width: calc(100%);
    height: calc(100%)
}
.box-borders::before, .box-borders::after {
    content: '';
    position: absolute;
    width: 60%;
    height: 30%;
    user-select: none;
    z-index: -1;
    transition: .3s ease-out width, .3s ease-in height
}
.box-borders::before {
    top: 0px;
    left: 0px;
    border-top: 3px solid var(--primary);
    border-left: 3px solid var(--primary);
}
.box-borders::after {
    bottom: 0px;
    right: 0px;
    border-bottom: 3px solid var(--primary);
    border-right: 3px solid var(--primary);
}

/* RWD Mobile */

.mt-0 { margin-top: 0 }
.center { text-align: center }
.on-mobile { display: none }

@media screen and (max-width: 768px) {

    .on-mobile { display: block }
    .hide-mobile { display: none }

    /* Header Mobile */

    header {
        margin-bottom: 2rem;
        flex-direction: column
    }

    header { height: 70px }

    .header > .brand > .logo { padding: 0 }

    .header > .brand > .logo > img {
        width: 70px;
        height: 70px
    }

    .header > .brand > h1 {
        font-size: 1.4rem
    }

    #contact {
        padding: 2rem
    }

    #contact > div {
        width: 95%
    }

    #about {

        min-height: 100vh;
        margin-top: 8rem;
        margin-bottom: 4rem;
    
        padding: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: center
    }

    footer { width: 100%;padding: 2rem }
}

*::-webkit-input-placeholder {
    color: #c9c9c9;
}
*:-moz-placeholder {
    /* FF 4-18 */
    color: #c9c9c9;
    opacity: 1;
}
*::-moz-placeholder {
    /* FF 19+ */
    color: #c9c9c9;
    opacity: 1;
}
*:-ms-input-placeholder {
    /* IE 10+ */
    color: #c9c9c9;
}
*::-ms-input-placeholder {
    /* Microsoft Edge */
    color: #c9c9c9;
}
*::placeholder {
    /* modern browser */
    color: #c9c9c9;
}