html body div p img p h1 h2 h3{
    margin: 0%;
    padding: 0%;
    box-sizing: content-box;
    overflow-x: hidden;
    scroll-behavior: smooth;
}
a{
    text-decoration: none;
    color: inherit;
}
h1{
    font-size: 25px;
}
h1 > span {
    color: rgba(80, 150, 210, 1);
    font-size: 27px;
}
body {
    background-color: rgb(0, 0, 0);
    display: flex;
    animation: colorback 1s 4s both, scrollbarr 2s 6.7s both;
    overflow: hidden;
    justify-items: center;
    margin: 0%;
    padding: 0%;
    font-family: 'Times New Roman', Times, serif;
}

.intro{
    display: flex;
    height: 99dvh;
    align-items: center;
    text-align: center;
    animation: desaparecer 1s 5s both;
    right: inherit;
    z-index: 100;
    width: 100dvw;
    box-sizing: border-box;
}
.text {
    display: flex;
    flex-direction: column;
    color: black;
    letter-spacing: 7px;
    font-size: 14dvw;
    position: relative;
    width: 100dvw;
}

#text__item1 {
    display: flex;
    margin: auto;    
    animation: grow 2s both steps(26), rightmove 1s 4.8s both;
    overflow: hidden;
    width: 100dvw;
}

#text__item2 {
    display: flex;
    margin: auto;
        animation: grow 2s 1s both steps(22), leftmove 1s 4.8s both;
        overflow: hidden;
    max-width: fit-content ;
    width: 100dvw;
    font-size: 10dvw;
}
.text #text__item1::after{
    content: '';
    background-color: black;
    color: black;
    height: 100%;
    position: absolute;
    width: 2px;
    right: 0;
    animation: titilar1 0.15s 5 alternate ;
    opacity: 0;
}
.text #text__item2::after{
    content: '';
    background-color: black;
    color: black;
    height: 100%;
    position: absolute;
    width: 2px;
    right: 0;
    animation: titilar1 0.15s 20 alternate ;
    opacity: 0;
}
@keyframes grow {
    from {
        width: 0%;
    }
    to {
        width: 100%;
    }
    
}

@keyframes titilar1 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
    
}


.imgbackground{
    display: flex;
    position: fixed;
    width: 100%;
    height: 100%;
} 
#imagenbackground {
    display: flex;
    position:fixed;
    width: 100%;
    height: 100%;
    z-index: -1;
    animation: imagenfondo 1s 5s both;
    top: 700px;
    background-color: rgba(190, 210, 255, 0.8);
    background-attachment:scroll;
}

.box {
    display: flex;
    flex-direction: column;
    position: absolute;
    animation: aparecer 1s 6.4s both;
    width: 100dvw;
    right: 0;
    text-align: justify;
}
.box-item {
    text-align: center;
    margin-bottom: 5px;
    gap: 7px;
    font-size: clamp(1rem, 4dvw, 2rem);
}
nav, footer {
    padding: 20px;
}
header {
    border-radius: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3dvh;
    margin-bottom: 0px;
    }
main {
    margin-top: 0px;
    display: flex;
    flex-direction: column;
    background-color: rgba(190, 210, 255, 0.2);
    border-radius: 30px;
    box-sizing: border-box;
    width: 100dvw;
}
main > div {
    margin-top: 0px;
    padding-left: 15px;
    padding-right: 15px;
}
.p-main {
    margin: 0;
        padding-left: 15px;
    padding-right: 15px;
}
#parte1{
    margin: 0;
    padding-left: 0px;
    padding-right: 0px;
}

.mipresentacion{
    display: flex;
    flex-direction: row;
    }
.mipresentacion2{
    display: flex;
    flex-direction: column;
        background-color: rgba(193, 213, 255, 0.95);
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 100dvw;
    }
    #formacion{
        width: 70dvw;
}
.formacion{
    list-style:square;
}
.mipresentacion-item{
    width: 50dvw;
    align-content: space-around;
    text-shadow: 1px 2px rgba(150, 150, 150, 0.7);
}
#imgyo {
    width: 40dvw;
    box-sizing: border-box;
    border-radius: 50%;
}
#textyo1{
    margin: auto;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
        background-color: rgba(193, 213, 255, 0.95);
}
#textyo2{
    margin: auto;
        background-color: rgba(193, 213, 255, 0.95);
        border-bottom-left-radius: 25px;
        border-bottom-right-radius: 25px;
}
#presentacion {
    display: flex ;
    position: relative;
    width: 101dvw;
    height: 115dvh;
    padding-left: 0px;
    padding-right: 0px;
    right: 1dvw;

}
.misherramientas{
    width: 100dvw;
    height: 50dvh;
    display: flex;
    flex-direction: row;
    justify-content:space-evenly;
    align-items: center;
}
.logo8 > .p-main {
        background: radial-gradient(circle, rgba(155, 175, 230, 0.6),  rgba(100, 100, 155, 0.4) );

}
#logo {
    width: 25dvw;
    height: 50dvh;
}

#parte2{
    margin: 0;
    padding-left: 0px;
    padding-right: 0px;
        background: #0a0f1cc1 ;
    text-shadow: 1px 2px rgba(90, 90, 90, 0.7);
        color: rgb(230, 230, 235);
    
}
#serv-autom{
    text-align: left;
    margin-left: 8dvw;
    margin-right: 8dvw;
}
#serv-agro{
    text-align: left;
    margin-left: 8dvw;
    margin-right: 8dvw;
}
#serv-dom{
    text-align: left;
        margin-left: 8dvw;
    margin-right: 8dvw;
}
#ESP32 {
    width: 25dvw;
    height: 50dvh;
}
#contacto{
    background-color: #0a0f1c; 
    color: white; 
    padding: 40px 20px; 
    font-family: Arial, sans-serif;
}
#todocontacto{
    max-width: 800px; margin: auto; text-align: center;
}
#como_contactarme{
    font-size: 32px;
    margin-bottom: 20px;
}
#datos{
    font-size: 18px; margin-bottom: 30px;
}

#parte4{
    background-color:  #0a0f1c;
    margin: 0;
    padding-left: 30px;
    padding-right: 30px;
    color: rgb(230, 230, 235);
    padding: 10px;
}
#parte4 > p{
    margin-top: 15px;
}
h6{
    margin: 0;
    font-size: 10dvw;
    margin-bottom: 4dvw;
}
.grid{
    margin-top: 15dvh;
    display: grid;
    grid-template-columns: 33.333333% 33.33333% 33.33333%;
    margin-left: 5dvw;
    margin-right: 5dvw ;
    box-sizing: border-box;
}
.grid-item{
    gap:10px;
    box-sizing: border-box;
}
#paso1{
    display: flex;
    flex-direction: row;
    align-items: center;
}
#flecha1{
    display: flex;
    width: 12%;
}
#p-paso1{
    display: flex;
    width: 88%;
    background-color: rgba(190, 190, 255, 1);
    color: black;
    border-radius: 10px;
    font-size: 3.3dvw;
}
#paso2{
    display: flex;
    flex-direction: row;
    align-items: center;
}
#flecha2{
    display: flex;
    width: 15%;
}
#p-paso2{
    display: flex;
    width: 85%;
}
#paso3{
    display: flex;
    flex-direction: column;
    align-items: center;
}
#flecha3{
    display: flex;
    height: 20%;
}
#p-paso3{
    display: flex;
    height: 80%;
    background-color: rgba(190, 190, 255, 1);
    color: black;
    border-radius: 10px;
}
#paso4{
    display: flex;
    flex-direction: column;
    align-items: center;
}
#flecha4{
    display: flex;
    height: 20%;
}
#p-paso4{
    display: flex;
    height: 80%;
}
#paso5{
    display: flex;
    flex-direction: column;
    align-items: center;
}
#flecha5{
    display: flex;
    width: 20%;
}
#p-paso5{
    display: flex;
    width: 80%;
    background-color: rgba(190, 190, 255, 1);
    color: black;
    border-radius: 10px;
}
#paso6{
    display: flex;
    flex-direction: row;
    align-items: center;
}
#flecha6{
    display: flex;
    width: 15%;
}
#p-paso6{
    display: flex;
    width: 85%;
}
#paso7{
    display: flex;
    flex-direction: row;
    align-items: center;
}
#flecha7{
    display: flex;
    width: 15%;
}
#p-paso7{
    display: flex;
    width: 85%;
    background-color: rgba(190, 190, 255, 1);
    color: black;
    border-radius: 10px;
}
p{
    margin: 0;
}
nav {
    display:flex;
    flex-direction: row;
    border-radius: 25px;
    justify-content: space-evenly;
    justify-items: center;
    align-items: center;
    width: 100dvw;
    margin: 0;
    animation: aparecernav both;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-timeline: scroll();
    animation-range: 13dvh 19dvh;
    top:auto;
    bottom: auto;
    right: 100dvw;
    position: absolute;
    padding-left: 0;
}
.nav-item {
    width: 100%;
    box-sizing: border-box;
    background-color: rgba(200, 230, 255, 0.6) ;
    align-items: baseline;
    justify-content: baseline;
    justify-items: baseline;
}
.nav-item :hover{
        box-sizing: border-box;
    background-color:  rgba(100, 100, 190, 0.7);
    width: 100%;
    height: 30px;
    animation: boton 0.15s 3 alternate-reverse both;
    align-items: baseline;
    justify-items: baseline;
    align-content: center;
    justify-content: center;
}
a {
    width: 90%;
    height: 90%;
}
span{
    width: 90%;
    height: 90%;
}
p > span {
    width: auto;
    height: auto;
}
footer {
    display: flex;
    background-color: rgba(30, 0, 40, 0.5);
}

.logo{
    display: flex;
    box-sizing: content-box;
    border: 2px black solid;
    height: clamp(70px, 5dvw, 200px);
    border-radius: 50%;
}
#icono{
    box-sizing: border-box;
    border-radius: 50%;
    height: clamp(70px, 5dvw, 200px);
}
.header-menu{
    display: flex;
    box-sizing: border-box;
    justify-content: space-evenly;
    width: clamp(250px, 70dvw, 500px);
}
.header-item{
    padding: 10px;
    border-radius: 25px;
    background-color: rgba(190, 210, 255, 0.8);
    align-items: center;
    margin: 3px;
    text-decoration: none;
}
.header-item:hover {
        background-color: rgba(150, 150, 255, 1);
            animation: boton 0.3s 3 alternate both;
        border-radius: 90px;
}
.contactanos{  
    display: flex;
    box-sizing: content-box;
    background-color: transparent;
    height: clamp(70px, 5dvw, 200px);
    width:  clamp(70px, 5dvw, 200px);
    background-color: rgba(15, 205, 40, 0.7);
    border-radius: 50%;
}
#whatsapp {
    background-color: rgba(15, 205, 40, 0.7);
    height: clamp(70px, 5dvw, 200px);
    border-radius: 50%;
}
#whatsapp:hover{
    transform: rotate(360deg);
    animation: girar 0.6s linear both;
}
.contactanos:hover{
            animation: boton 0.3s 3 alternate both;
}
footer {
    background-color: #1e1e1e;
    color: #fff;
    font-family: sans-serif;
    box-sizing: border-box;
    height: fit-content;
        justify-content: space-evenly;
}
.footer-principal{
        display: grid;
    grid-template-columns: 18dvw 48dvw 20dvw;
        height: fit-content;
}
.footer-container {
    box-sizing: border-box;
    max-width: 1200px;
        height: fit-content;
}

.footer-container h3,
.footer-container h4 {
    margin-bottom: 10px;
  color: #73b4ff; /* Color destacado */
}

.footer-container ul {
    list-style: none;
    padding: 0;
}

.footer-container a {
    color: #ccc;
    text-decoration: none;
}

.footer-container a:hover {
    text-decoration: underline;
}

.footer-bottom {
    display: flex;
    text-align: center;
    font-size: 0.9em;
    color: #aaa;
    position: absolute;
}
@keyframes girar {
    from{
    transform: rotate(360deg);
    }
    to{
    transform: rotate(720deg);
    }
}
@keyframes boton {
    from{
    border-radius: 90px;
            align-items: center;
    }
    to{
        border-radius: 20px;
        align-items: center;

}
}

@media screen and (width < 800px) {
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
        html, body{
        overflow-x: hidden;
        box-sizing: border-box;
        width: fit-content;
    }
    body{
        padding: 0;
        margin: 0;
        width: 100%;
    }
    html::-webkit-scrollbar{
        display: none;
    }
    .contactanos{
        position: fixed;
        bottom: 5px;
        right: 2px;
        z-index: 20;
    }
    header{
        justify-content: space-evenly;
        box-sizing: border-box;
        width: 100%;
    }

    #presentacion {
    display: flex ;
    height: 60dvh;
    padding-left: 0px;
    padding-right: 0px;
}
.text{
    font-size: 8vw;
    font-size: 8dvw;
}
#text__item1{
    font-size: 12dvw;
}

#text__item2{
    font-size: 8dvw;
}
h1{
    font-size: 10dvw
}
#textyo1{
        background-color: rgba(193, 213, 255, 0.95);        text-align:left;
        text-justify: distribute;
        width: 80dvw;
        font-size: 8vw;
            font-size: 8dvw;

}
#textyo2{
        background-color: rgba(193, 213, 255, 0.95);   font-size: 8vw;
    font-size: 8dvw;

}
.mipresentacion{
    flex-direction: column-reverse;
}
.mipresentacion-item{
    width: 100%;
}
#logo {
    width: clamp(150px, 30dvw, 1900px) ;
    height: 35dvh;
}
#ESP32 {
    width: clamp(150px, 30dvw, 1900px) ;
    height: 35dvh;
}
.grid{
    margin-top: 15dvh;
    display: flex;
    flex-direction: column;
    margin-left: 5dvw;
    margin-right: 5dvw ;
    box-sizing: border-box;
}
.grid-item{
    box-sizing: border-box;
}
#paso1{
    display: flex;
    flex-direction: row;
    align-items: center;
}
#flecha1{
    display: none;
}
#p-paso1{
    display: flex;
    background-color: rgba(190, 190, 255, 1);
    color: black;
    border-radius: 10px;
    font-size: 5dvw;
}
#paso2{
    display: flex;
    flex-direction: row;
    align-items: center;
}
#flecha2{
    display: none;
}
#p-paso2{
    display: flex;
    font-size: 5dvw;
}
#paso3{
    display: flex;
    flex-direction: column;
    align-items: center;
}
#flecha3{
    display: none;
}
#p-paso3{
    display: flex;
    font-size: 5dvw;
    background-color: rgba(190, 190, 255, 1);
    color: black;
}
#paso4{
    display: flex;
    flex-direction: column;
    align-items: center;
}
#flecha4{
    display: none;
}
#p-paso4{
    display: flex;
    font-size: 5dvw;
}
#paso5{
    display: flex;
    flex-direction: column;
    align-items: center;
}
#flecha5{
    display: none;
}
#p-paso5{
    display: flex;
    font-size: 5dvw;
    background-color: rgba(190, 190, 255, 1);
    color: black;
}
#paso6{
    display: flex;
    flex-direction: row;
    align-items: center;
}
#flecha6{
    display: none;
}
#p-paso6{
    display: flex;
    font-size: 5dvw;
}
#paso7{
    display: flex;
    flex-direction: row;
    align-items: center;
}
#flecha7{
    display: none;
}
#p-paso7{
    display: flex;
    font-size: 5dvw;
    background-color: rgba(190, 190, 255, 1);
    color: black;
}
.grid-item{
    justify-content: center;
    margin: 10px;
}
#inexistente1, #inexistente2, #inexistente3, #inexistente4 {
    display: none;
}
.footer-bottom{
    position: absolute;
    bottom: 5px;
}
}

@media screen and (width < 400px) {
    body{
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .logo{
        display: none;
    }
    #presentacion{
        height: clamp(0, 60dvh, 600px) ;
    }
}

@keyframes desaparecer {
    from {
    opacity: 1;
    display: flex;
    bottom: 0;
    }
    to {
        opacity: 0;
        display: none;
        bottom: 300px
    }
}
@keyframes colorback {
    from {
            background-color: rgb(255, 255, 255);
            overflow: hidden;
            
}
    to {
        background-color: rgba(240, 240, 255, 1);
    }
}
@keyframes rightmove {
    from{
        right: 0;
        bottom: 0;
    }
    to{
        right: 700px;
        bottom: 300px;
    }
}
@keyframes leftmove {
    from{
        left: 0;
        top: 0;
    }
    to{
        left: 700px;
        top: 550px;
    }
}
@keyframes scrollbarr {
    from {
        overflow: hidden;
    }
    to {
        overflow: auto;
        overflow-x: hidden;

    }
}
@keyframes aparecernav {
    from{
        right: 100dvw;
        bottom: auto;
        position: absolute;
        top: auto;
    }
    to {
        right: auto;
        position: fixed;
        bottom: 99dvh;
        top: 0px;
    }
    
}
@keyframes aparecer {
    from {
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
@keyframes imagenfondo {
    from {
        opacity: 0;
            top: 700px;
    }
    to {
        opacity: 1;
        top: 0px;
    }    
}