/* ==========================================================
   COMPONENTS.CSS
   TuFuturaWeb
==========================================================*/

/*==========================================================
HEADER
==========================================================*/

header{

    width:100%;

    text-align:center;

    margin-bottom:70px;

}

/*==========================================================
LOGO
==========================================================*/

.logo{

    width:170px;

    margin:0 auto 30px;

}

.logo img{

    width:100%;

    display:block;

}

/*==========================================================
TÍTULO
==========================================================*/

h1{

    font-size:58px;

    font-weight:800;

    line-height:1.15;

    color:#ffffff;

}

h1 span{

    color:#23e7ff;

}

#subtitle{

    margin-top:18px;

    font-size:24px;

    color:#cfe8ff;

    max-width:900px;

    margin-left:auto;

    margin-right:auto;

    line-height:1.7;

}

/*==========================================================
BADGE
==========================================================*/

.badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:30px;

    padding:12px 26px;

    border-radius:50px;

    background:rgba(0,255,255,.08);

    border:1px solid rgba(0,255,255,.30);

    color:#3ce9ff;

}

/*==========================================================
EMPRESA
==========================================================*/

.empresa{

    margin-top:18px;

    font-size:38px;

    font-weight:700;

    color:#23e7ff;

    text-shadow:

        0 0 20px rgba(35,231,255,.35);

}

/*==========================================================
WORKSPACE
==========================================================*/

.workspace{

    width:100%;

    display:flex;

    justify-content:center;

    margin:70px 0;

}

/*==========================================================
DESK
==========================================================*/

.desk{

    display:flex;

    justify-content:center;

    align-items:flex-end;

    gap:45px;

    width:100%;

}

/*==========================================================
COMPUTER
==========================================================*/

.computer{

    display:flex;

    flex-direction:column;

    align-items:center;

}

/*==========================================================
MONITOR
==========================================================*/

.monitor{

    width:480px;

    height:280px;

    background:#182333;

    border:2px solid #2d465f;

    border-radius:18px;

    padding:18px;

    box-shadow:
        0 0 25px rgba(0,255,255,.18),
        inset 0 0 15px rgba(255,255,255,.03);

}

.screen{

    width:100%;

    height:100%;

    background:#050c14;

    border-radius:10px;

    overflow:hidden;

    padding:18px;

    color:#35ff9d;

    font-family:Consolas, monospace;

    font-size:14px;

    line-height:1.6;

}

.screen pre{

    white-space:pre-wrap;

}

/*==========================================================
BASE MONITOR
==========================================================*/

.monitor-base{

    width:90px;

    height:18px;

    background:#23374b;

    margin-top:10px;

    border-radius:8px;

}

.monitor-foot{

    width:180px;

    height:12px;

    background:#1a2b3c;

    margin-top:8px;

    border-radius:20px;

}

/*==========================================================
KEYBOARD
==========================================================*/

.keyboard{

    width:320px;

    height:18px;

    background:#1f3042;

    border-radius:20px;

    margin-top:18px;

    box-shadow:
        inset 0 2px 4px rgba(255,255,255,.08);

}

/*==========================================================
MOUSE
==========================================================*/

.mouse{

    width:36px;

    height:52px;

    margin-top:14px;

    border-radius:30px;

    background:#24384d;

    position:relative;

}

.mouse::before{

    content:"";

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    top:10px;

    width:3px;

    height:10px;

    background:#5fefff;

    border-radius:5px;

}

/*==========================================================
COFFEE
==========================================================*/

.coffee{

    width:58px;

    height:68px;

    background:#172030;

    border-radius:8px;

    position:relative;

}

.coffee::after{

    content:"";

    position:absolute;

    top:14px;

    right:-15px;

    width:16px;

    height:28px;

    border:4px solid #172030;

    border-left:none;

    border-radius:0 10px 10px 0;

}

/*==========================================================
PLANTA
==========================================================*/

.plant{

    width:50px;

    height:70px;

    background:#17263b;

    border-radius:8px;

}
/*==========================================================
ROBOT
==========================================================*/

.robot{

    position:relative;

    width:220px;

    height:340px;

}

/*=========================
CABEZA
=========================*/

.head{

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:120px;

    height:90px;

    border-radius:30px;

    background:linear-gradient(#ffffff,#c7dced);

    border:3px solid #25e8ff;

    box-shadow:
        0 0 20px rgba(37,232,255,.25);

}

/*=========================
ANTENA
=========================*/

.antenna{

    position:absolute;

    top:-24px;

    left:50%;

    transform:translateX(-50%);

    width:4px;

    height:24px;

    background:#ffffff;

}

.light{

    position:absolute;

    top:-10px;

    left:50%;

    transform:translateX(-50%);

    width:14px;

    height:14px;

    border-radius:50%;

    background:#23e7ff;

    box-shadow:
        0 0 20px cyan,
        0 0 40px cyan;

    animation:blink 1.6s infinite;

}

/*=========================
OJOS
=========================*/

.eyes{

    display:flex;

    justify-content:space-evenly;

    margin-top:28px;

}

.eyes span{

    width:14px;

    height:14px;

    border-radius:50%;

    background:#23e7ff;

    box-shadow:
        0 0 18px cyan;

}

/*=========================
BOCA
=========================*/

.mouth{

    width:40px;

    height:4px;

    margin:18px auto;

    border-radius:10px;

    background:#23e7ff;

}

/*=========================
CUERPO
=========================*/

.body{

    position:absolute;

    top:110px;

    left:50%;

    transform:translateX(-50%);

    width:140px;

    height:150px;

    border-radius:25px;

    background:linear-gradient(#eef8ff,#bfd9eb);

    border:3px solid #23e7ff;

    box-shadow:
        0 0 18px rgba(35,231,255,.18);

}

/* Logo pecho */

.body .logo{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    width:auto;

    margin:0;

    border:none;

    background:none;

    box-shadow:none;

}

/*=========================
BRAZOS
=========================*/

.arm{

    position:absolute;

    top:120px;

    width:24px;

    height:100px;

    border-radius:20px;

    background:#dceef9;

}

.arm.left{

    left:8px;

}

.arm.right{

    right:8px;

}

.forearm{

    position:absolute;

    bottom:-55px;

    left:2px;

    width:20px;

    height:70px;

    border-radius:20px;

    background:#cde5f5;

}

.hand{

    position:absolute;

    bottom:-68px;

    left:-3px;

    width:26px;

    height:18px;

    border-radius:15px;

    background:#ffffff;

}

/*=========================
ANIMACIONES
=========================*/

@keyframes blink{

    0%,100%{

        opacity:1;

    }

    50%{

        opacity:.3;

    }

}

#robot{

    width:100%;

    filter:
        drop-shadow(0 0 20px rgba(0,255,255,.35))
        drop-shadow(0 0 40px rgba(0,255,255,.25));

}
/*==========================================================
PROGRESS
==========================================================*/

.progress{

    width:100%;
    max-width:700px;

    margin:50px auto;

}

.loader{

    position:relative;
    width:100%;

    height:14px;

    background:#132334;

    border-radius:30px;

    overflow:hidden;

}

#loader{

    width:0%;

    height:100%;

    border-radius:30px;

    background:linear-gradient(90deg,#00bfff,#00ffd0);

}

.percent{

    margin-top:12px;

    text-align:right;

    color:#66f5ff;

    font-weight:bold;

}

/*==========================================================
CONTACTO
==========================================================*/

.contacto{

    width:100%;

    max-width:850px;

    margin:70px auto 30px;

    text-align:center;

}

.contacto h2{

    font-size:36px;

    margin-bottom:20px;

}

.contacto p{

    color:#d7e7f7;

    line-height:1.8;

    font-size:19px;

}

/*==========================================================
BOTON WHATSAPP
==========================================================*/

.btnWhatsapp{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    margin-top:35px;

    padding:18px 45px;

    border-radius:60px;

    background:#25D366;

    color:#ffffff;

    font-size:22px;

    font-weight:bold;

    text-decoration:none;

    transition:.35s;

    box-shadow:
        0 0 25px rgba(37,211,102,.45);

}

.btnWhatsapp:hover{

    transform:translateY(-6px);

    box-shadow:
        0 0 40px rgba(37,211,102,.70);

}

.numero{

    margin-top:25px;

    font-size:24px;

    color:#2be8ff;

    font-weight:bold;

}

/*==========================================================
WHATSAPP FLOTANTE
==========================================================*/

.whatsapp-float{

    position:fixed;

    right:25px;

    bottom:25px;

    width:72px;

    height:72px;

    border-radius:50%;

    background:#25D366;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

    box-shadow:
        0 0 20px rgba(37,211,102,.50);

    animation:whatsappPulse 2s infinite;

}

.whatsapp-float img{

    width:38px;

    height:38px;

    filter:invert(1);

}

.whatsapp-float:hover{

    transform:scale(1.10);

}

@keyframes whatsappPulse{

    0%{

        box-shadow:0 0 0 0 rgba(37,211,102,.6);

    }

    70%{

        box-shadow:0 0 0 18px rgba(37,211,102,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(37,211,102,0);

    }

}

/*==========================================================
RESPONSIVE
==========================================================*/

@media(max-width:992px){

    h1{

        font-size:44px;

    }

    #subtitle{

        font-size:20px;

    }

    .desk{

        flex-direction:column;

        align-items:center;

        gap:45px;

    }

    .monitor{

        width:100%;

        max-width:520px;

        height:270px;

    }

}

@media(max-width:768px){

    .logo{

        width:120px;

    }

    h1{

        font-size:34px;

    }

    #subtitle{

        font-size:18px;

    }

    .empresa{

        font-size:30px;

    }

    .monitor{

        height:220px;

    }

    .keyboard{

        width:240px;

    }

    .contacto h2{

        font-size:28px;

    }

    .btnWhatsapp{

        width:100%;

        max-width:340px;

        padding:18px;

        font-size:18px;

    }

    .whatsapp-float{

        width:60px;

        height:60px;

        right:15px;

        bottom:15px;

    }

}

@media(max-width:480px){

    .monitor{

        height:190px;

    }

    h1{

        font-size:28px;

    }

}

/*=========================================
FOOTER LOGO
=========================================*/

.footer-logo{

    display:flex;

    justify-content:center;

    margin-bottom:20px;

}

.footer-logo img{

    width:550px;      /* cambia este valor */

    height:auto;

}