@font-face {
  font-family: 'Principal'; /* Nombre que tú eliges */
  src: url('../fonts/Lato/Lato-Bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Black'; /* Nombre que tú eliges */
  src: url('../fonts/Lato/Lato-Black.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Normal'; /* Nombre que tú eliges */
  src: url('../fonts/Lato/Lato-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Thin'; /* Nombre que tú eliges */
  src: url('../fonts/Lato/Lato-Light.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

html {
  scroll-behavior: smooth;
}

/* Ejemplo de uso */
body {
    background: linear-gradient(to bottom, rgb(24, 24, 24) 0%,  rgb(7, 7, 7) 100%);
}

.encabezado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 20px;
    color: #fff;
    background: linear-gradient(to bottom, rgb(24, 24, 24) 0%,  rgb(7, 7, 7) 100%);
}

@media (max-width: 768px) {
  .encabezado {
    display: flex;
    justify-content: space-between;
  }

  .navegacion {
    display: flex;
    flex-direction: column;
  }

  .enlace-header {
    width: 100%;
  }
}

.enlace-logo {
    text-decoration: none;
    font-family: 'Black', sans-serif;
    color: #fff;
    font-size: 40px;
    transition: all 0.3s ease;
}

.enlace-logo:hover{
    text-shadow: 0 0 15px #361bc9;
}

.enlace-header {
    font-family: 'Principal', sans-serif;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    transition: all 0.3s ease;
}

.enlace-header:hover {
    text-shadow: 0 0 15px #66c628;
}

.navegacion {
    display: flex;
    justify-content: space-between;
    width: 25%;
}

.hero {
    padding: 2.5% 5%;
    display: flex;
    justify-content: space-evenly;
    color: #fff;
}

.my-name {
    font-family: 'Principal', sans-serif;
    font-size: 30px;
    margin: 20px 0;
}

.video-editor {
    font-family: 'Black', sans-serif;
    font-size: 50px;
    margin: 0;
}

.texto-azul {
    color: #361bc9;
}

.textos {
    width: 50%;
}

.hero-img {
    width: 55%;
    transform: perspective(1000px) rotateY(10deg);
    transition: transform 0.3s ease;
    box-shadow: 0 0 5px #66c628;
}

/*.hero-img:hover {
    transform: perspective(1000px) rotateY(0) rotateX(0);
}*/



.hero-paragrapg {
    font-family: 'Thin', sans-serif;
    font-size: 26px;
    font-weight: 300;
    margin: 20px 0 0 0;

}

.contenedor-botones {
    margin-top: 35px;
}

.boton {
    text-decoration: none;
    font-family: 'Principal', sans-serif;
    color: #fff;
    padding: 15px 20px;
    border-radius: 5px;
    margin-right: 10px;
}

.boton-principal {
    transition: all 0.3s ease;
    background-color: #361bc9;
}

.boton-principal:hover {
  background: #361bc9;
  box-shadow: 0 0 15px #361bc9;
}

.boton-secundario {
    border: 2px solid #66c628;
    color: #66c628;
    transition: all 0.3s ease;
}

.boton-secundario:hover {
    background-color: #66c628;
    box-shadow: 0 0 15px #66c628;
    color: #fff;
}

.boton-yt {
    border: 2px solid rgb(221, 59, 59);
    color: #fff;
    text-decoration: none;
    transition: all 0.5s ease;
}

.boton-yt:hover {
    background:  rgb(221, 59, 59);
    box-shadow: 0 0 15px rgb(221, 59, 59);
}

@media (max-width: 768px) {
    .hero {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero-img {
        width: 100%;
    }

    .textos {
        width: 100%;
    }

    .contenedor-botones {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .boton-principal, .boton-secundario, .boton-yt {
        text-align: center;
    }

}


.logros {
    display: flex;
    color: #fff;
    background-color: #361bc9;
}

.logro-individual {
    display: flex;
    justify-content: center;
    align-items: start;
    gap: 20px;
    padding-right: 15px;
    width: 90%;
    border-right: 1px solid #5840db;
}

.icon{
    width: 85px;
}

.textos-logro{
    justify-content: space-evenly;
    font-family: 'Principal', sans-serif;
    font-size: 20px;
}

.contenedor-clips {
    margin: 0 auto;
    width: 80%;
    text-align: center;
    color: #fff;
    font-size: 26px;
}

@media (max-width: 768px) {
    .logros {
        display: flex;
        flex-direction: column;
    }

    .logro-individual {
        display: flex;
        align-items: center;
    }

    .logro-individual {
        border: none;
    }

}

.texto-encabezado {
    margin-bottom: 0;
    font-family: 'Principal', sans-serif;
}

.clip-descripcion {
    font-family: 'Thin', sans-serif;
}

.contenedor-videos {
    margin: 0 auto;
    width: 90%;
}

.clips {
    display: flex;
    gap: 20px;
    margin-bottom: 10px;
}

.clip {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 15px;
    color: #fff;
    font-family: 'Principal', sans-serif;
    padding: 10px 0;
}

.clip:hover {
  transform: scale(1.03);
  transition: 0.3s ease;
}

.clip video{
    width: 95%;
    border-radius: 10px;
    cursor: pointer;
}


.descripcion-video{
    text-align: center;
}

.descripcion-video {
    margin: 0;
}

.button-youtube {
    border: 2px solid rgb(221, 59, 59);
    color: #fff;
    text-decoration: none;
    border-radius: 10px;
    padding: 10px;
    transition: all 0.5s ease;

}

.button-youtube:hover {
    background  :  linear-gradient(to bottom, rgb(250, 106, 106) 0%, rgb(221, 59, 59) 100%);
    box-shadow: 0 0 15px rgb(221, 59, 59);
}


.video-embebido {
    width: 420px;
    height: 270px;
}

.descripcion-video-yt {
    text-align: left;
    padding: 20px;
}

@media (max-width: 768px) {
    .clips {
        display: flex;
        flex-direction: column;
    }

    
    .video-embebido {
        width: 280px;
        height: 158px;
    }

}

.contenedor-form {
    margin: 0 auto;
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    font-family: 'Principal', sans-serif;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding-bottom: 20px;
    margin-bottom: 40px;
}

.contenedor-form form {
    width: 60%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.contact-input {
    font-family: 'Thin', sans-serif;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 5px;
    width: 60%;
    height: 40px;
    font-size: 20px;
}

.boton-send {
    background-color: #66c628;
    color: #fff;
    transition: all 0.3s ease;
    border: 1px solid #66c628;
    font-size: 20px;
    padding: 10px 15px;
    border-radius: 5px;
    width: 60%;
}

.boton-send:hover {
    box-shadow: 0 0 15px #66c628;
    color: #fff;
    cursor: pointer;
}

@media (max-width: 768px) {
    .contenedor-form {
        width: 80%;
    }
    .contenedor-form form {
        width: 100%;
    }
    .contact-input {
        width: 90%;
    }

}


footer {
    font-family: 'Thin', sans-serif;
    text-align: center;
    color: #fff;
}