@import url('https://fonts.googleapis.com/css2?family=Delicious+Handrawn&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');@import url('https://fonts.googleapis.com/css2?family=Just+Another+Hand&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Nunito', sans-serif;
    color: var(--blanco);
    border: none;
    outline: none;
    scroll-behavior: smooth;
    text-decoration: none;
}

  html {
    overflow-x: hidden;
  }
  body {
    overflow-x: hidden;
  }
  
:root{
    --moraoscuro: #120B2C;
    --moraclaro: #b868dd;
    --moraaoscuro: #65307d;
    --morafondos: #411656e0;
    --turquesa: #54dcd3;
    --blanco: #F2F2EA;
    --negro: #000;
    --darkturquesa : #2c9a9a;
    --texto: #696969;
     
}

html{
    font-size: 62.5%;
    overflow-x: hidden;
}

body{
    background-color: #010908;
}

.header-principal{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 2rem 9%;
    background: var(--negro);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    transition: .3s;

}

header.header-principal .sticky {
    background: #084040;
}

.logo {
    max-width: 35%; /* El logo ocupará el 50% del ancho del contenedor */
    height: auto;
}

.navbar a{
    font-size: 1.7rem;
    color: #fff;
    font-weight: 700;
    margin-left: 3.5rem;
    transition: .3s;

}

.navbar a:hover, 
.navbar a.active {
    color: var(--moraclaro);
}

#menu-icon{
    font-size: 3.3rem;
    color: var(--bg-color);
    cursor: pointer;
    display: none;
}

section{
    width: 100vw; /* Ocupar el 100% del ancho de la pantalla */
    padding: 6rem 10%; /* Espaciado interno para evitar contenido pegado */
    background-size: cover; /* Asegura que el fondo cubra el área */
    background-position: center; /* Centra el fondo si tiene imagen */
}

.home {
    display: flex;
    align-items: center;
    padding: 0 9%;
    background: #010908;
    background-size: cover;
    background-position: center;
}

.home-content {
    max-width: 60rem;
    z-index: 99;
    margin-top: 12.5rem;
}

.home-content h1, .home-content span { 
    line-height: 1.3;    
    font-weight: 400;

}

.home-content h1 {    
    font-family: 'Nunito', sans-serif;
    color: var(--blanco);
    font-size: 3.5rem;
}

.home-content span {   
    font-family: "Delicious Handrawn", serif;
    color: var(--moraclaro);
    font-size: 5rem;
}

.home-content  h3 {
    font-size: 3rem;
    font-weight: 700;
    color: var(--blanco);
    padding-top: 3rem;
    
}

.home-img img {
    width: 40vw;
    border-radius: 50%;
    margin-top: 24%;
    margin-left: 8%;
}

.text-animate {
    font-size: 3.5rem;
    font-weight: 600;
    min-width: 280px;
}

.text-animate span {
    position: relative;
    font-size: 3.6rem;
    font-weight: 700;
   
}

.text-animate span::before {
    content: "Diseñadora Web";
    color: var(--turquesa);
    animation: words 20s infinite;
    font-family: 'Nunito', sans-serif;   
}

.text-animate span::after {
    content: "";
    background-color: var(--negro);
    position: absolute;
    width: calc(100% + 8px);
    height: 100%;
    border-left: 3px solid var(--negro);
    right: -8px;
    animation: cursor 0.6s infinite, typing 20s steps(14) infinite;
}

@keyframes cursor{
    to {
        border-left: 2px solid var(--naranjasuave);
    }
}


@keyframes words {
    0%,
    20%{
        content: "Diseñadora gráfica";
    }

    21%,
    40%{
        content: "CM & Branding";
    }

    41%,
    60%{
        content: "Diseñadora UI/UX";
    }

    61%,
    80%{
        content: "Diseñadora web";
    }

    81%,
    100%{
        content: "Web Developer";
    }
}

@keyframes typing {
    10%,
    15%,
    30%,
    35%,
    50%,
    55%,
    70%,
    75%,
    90%,
    95%{
        width: 0;
    }

    5%,
    20%,
    25%,
    40%,
    45%,
    60%,
    65%,
    80%,
    85%{
        width: calc(100% + 8px);
    }
}











.home-content p {
    font-size: 1.6rem;
    color: var(--blanco);
    margin: 2rem 0 4rem;

}

.btn-box {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 34.5rem;
    height: 5rem;
}

.btn-box .btn{
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 15rem;
    height: 100%;
    background-color: var(--moraclaro);
    border: .2rem solid var(--moraclaro);
    border-radius: .8rem;
    font-size: 1.8rem;
    font-weight: 600;
    letter-spacing: .1rem;
    color: var(--blanco);
    z-index: 1;
    overflow: hidden;
    transform: .5s;
    margin-top: 4rem;
}

.btn-box .btn:nth-child(2){
    background-color: transparent;
    color: var(--blanco);
}

.btn-box .btn:nth-child(2):hover{
    color: var(--blanco);
}

.btn-box .btn:nth-child(2)::before{
    background-color: var(--moraaoscuro);
    
}

.btn-box .btn:nth-child(1):hover{
    background-color: transparent;
    color: var(--blanco);
}

.btn-box .btn:nth-child(1):hover{
    color: var(--blanco);
}

.btn-box .btn::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    z-index: -1;
    background: var(--moraaoscuro);
    transition: .5s;
}

.btn-box .btn:hover::before{
    width: 100%;
}

.home-sci {
    position: absolute;
    bottom: 1rem;
    width: 170px;
    display: flex;
    justify-content: space-between;

 
}

.home-sci a{
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: var(--darkturquesa);
    border: .2rem solid var(--moraaoscuro);
    border-radius: 50%;
    font-size: 20px;
    color: var(--turquesa);
    z-index: 1;
    overflow: hidden;
}

.home-sci a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    z-index: -1;
   
}

.home-sci a:hover::before{
    width: 100%;
}


.about {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 2rem;
    padding-bottom: 6rem;
    background: var(--blanco);

}

.heading {
    font-size: 7rem;
    margin-bottom: 3rem;
    text-align: center;
    color: var(--moraaoscuro);
    
    
}

span {
    color: var(--darkturquesa);
    font-family: "Delicious Handrawn", serif;
}

.about-img {
    position: relative;
    width: 25rem;
    height: 25rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-img img{
    width: 90%;
    border-radius: 50%;
    border: .2rem solid var(--moraaoscuro);
}

.about-img .circle-spin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border-top: .2rem solid var(--darkturquesa);
    border-bottom: .2rem solid var(--darkturquesa);
    border-left: .2rem solid var(--moraclaro);
    border-right: .2rem solid var(--moraclaro);
    animation: aboutSpinner 8s linear infinite;
}

.about-content {
    text-align: center;
}

.about-content h3 {
    font-size: 2.6rem;
    color: var(--moraaoscuro);
}

.about-content p {
    font-size: 1.6rem;
    margin: 2rem 0 3rem;
    color: var(--texto);
}


.btn-box.btns {
    display: inline-block;
    width: 15rem;

}

.btn-box.btns a::before {
    background: var(--negro);
}

.education {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: auto;
    padding-bottom: 5rem;
    background: var(--moraaoscuro);
}

.education span {
    color: var(--blanco);
    font-weight: 200;
}

.education h2 {
    color: var(--turquesa);
    font-weight: 800;
}

.education .education-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5rem;
}

.education-row .education-column {
    flex: 1 1 40rem;
}

.education-column .title {
    font-size: 3.5rem;
    margin: 0 0 1.5rem 2rem;
}

.education-column .education-box {
    border-left: .2rem solid var(--turquesa);
}

.education-box .education-content {
    position: relative;
    padding-left: 2rem;
}

.education-box .education-content::before{
    content: '';
    position: absolute;
    top: 0;
    left: -1.1rem;
    width: 2rem;
    height: 2rem;
    background-color: var(--darkturquesa);
    border-radius: 50%;
}

.education-content .content {
    position: relative;
    padding: 1.5rem;
    border: .2rem solid var(--morafondos);
    border-radius: .6rem;
    margin-bottom: 2rem;
    overflow: hidden;

}

.education-content .content::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--moraoscuro);
    z-index: -1;
    transition: .5s;

}

.education-content .content:hover::before{
    width: 100%;
}


.education-content .content .year {
    font-size: 1.5rem;
    color: var(--naranjasuave);
    padding-bottom: .5rem;
}

.education-content .content .year i{
    padding-right: .5rem;
    color: var(--naranjasuave);
}

.education-content .content h3 {
    font-size: 1.8rem;
}

.education-content .content p {
    font-size: 1.3rem;
}

.portfolio {
    background: var(--darkturquesa);
}
.portfolio h2 {
    margin-bottom: 4rem;
    

}

.portfolio span {
    color: var(--blanco);
    font-weight: 200;
}

.portfolio-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    gap: 2.5rem;
}

.portfolio-container .portfolio-box {
    position: relative;
    border-radius: 2rem;
    box-shadow: 0 0 1rem var(--moraaoscuro);
    overflow: hidden;
    display: flex;
}

.portfolio-box img {
    width: 100%;
    transition: .5s ease;
}

.portfolio-box:hover img{
    transform: scale(1.1);
}

.portfolio-box .portfolio-layer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(99, 47, 120, 0.81), #010101);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    padding: 0 4rem;
    transform: translateY(100%);
    transition: .5s ease;
   
}

.portfolio-box:hover .portfolio-layer {
    transform: translateY(0);
}

.portfolio-layer h4 {
    font-size: 3rem;
}

.portfolio-layer p {
    font-size: 1.6rem;
    margin: .3rem 0 1rem;
}

.portfolio-layer a i{
    font-size: 3rem;
    color: var(--blanco);

}

/* skills */

.skills {
    min-height: auto;
    padding-bottom: 7rem;
    background: var(--blanco);
}

.skills-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5rem;
}


.skills-row .skills-column {
    flex: 1 1 40rem;
}

.skills-column .title {
    font-size: 2.5rem;
    margin: 0 0 1.5rem;
}

.skills-box .skills-content {
    position: relative;
    border: .2rem solid var(--moraclaro);
    border-radius: .6rem;
    padding: .5rem 1.5rem;
    background: rgb(205 123 238 / 19%);
}

.skills-box .skills-content::before {
    content: '';
    position: absolute;
    top:0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--moraclaro);
    z-index: -1;
    transition: .5s;
}

.skills-box .skills-content:hover::before {
    width: 100%
}

.skills-content .progress {
    padding: 1rem 0;
}

.skills-content .progress h3 {
    font-size: 1.7rem;
    display: flex;
    justify-content: space-between;
    color: var(--moraaoscuro);
}

.skills-content .progress h3 span{
    color: var(--moraoscuro);
    font-family: 'Nunito', sans-serif;;
}

.skills-content .progress .bar {
    height: 2.5rem;
    border-radius: .6rem;
    border: .2rem solid var(--morafondos);
    padding: .5rem;
    margin: 1rem 0;
}

.skills-content .progress .bar span {
    display: block;
    height: 100%;
    border-radius: .3rem;
    background: var(--moraaoscuro);
}

.skills-column:nth-child(1) .skills-content .progress:nth-child(1) .bar span {
    width: 90%;
}

.skills-column:nth-child(1) .skills-content .progress:nth-child(2) .bar span {
    width: 80%;
}

.skills-column:nth-child(1) .skills-content .progress:nth-child(3) .bar span {
    width: 60%;
}

.skills-column:nth-child(1) .skills-content .progress:nth-child(4) .bar span {
    width: 90%;
}

.skills-column:nth-child(1) .skills-content .progress:nth-child(5) .bar span {
    width: 85%;
}

.skills-column:nth-child(1) .skills-content .progress:nth-child(6) .bar span {
    width: 90%;
}

.skills-column:nth-child(1) .skills-content .progress:nth-child(7) .bar span {
    width: 70%;
}

/***/

.skills-column:nth-child(2) .skills-content .progress:nth-child(1) .bar span {
    width: 95%;
}

.skills-column:nth-child(2) .skills-content .progress:nth-child(2) .bar span {
    width: 70%;
}

.skills-column:nth-child(2) .skills-content .progress:nth-child(3) .bar span {
    width: 95%;
}

.skills-column:nth-child(2) .skills-content .progress:nth-child(4) .bar span {
    width: 60%;
}

.skills-column:nth-child(2) .skills-content .progress:nth-child(5) .bar span {
    width: 85%;
}

.skills-column:nth-child(2) .skills-content .progress:nth-child(6) .bar span {
    width: 90%;
}

.skills-column:nth-child(2) .skills-content .progress:nth-child(7) .bar span {
    width: 60%;
}

.contacto h2 {
    color: var(--moraclaro);
}

.contacto span {
    color: var(--turquesa);
    font-weight: 200;
}

.contacto {
    min-height: 50vh;
    padding-bottom: 10rem;
    padding-top: 10rem;
}

.contact {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 60px;
    width: 100%;
    padding-top: 10rem;
    
}

.contact a {
    display: flex;
    align-items: center; /* Alinea el ícono con el texto */
    gap: 10px; /* Espacio entre ícono y texto */
    text-decoration: none;
    font-size: 16px;
    color: var(--turquesa);
    
}

.contact a i {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border: 2px solid var(--turquesa);
    border-radius: 50%;
    font-size: 20px;
    color: var(--bg-color);
    
}

.contact a span {
    font-size: 1.7rem;
    font-family: 'Nunito', sans-serif;
    color: var(--blanco);
    white-space: nowrap; /* Evita que el texto se rompa en varias líneas */
}


/* FOOTER */


.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 2rem 9%;
    background: var(--moraoscuro);
}

.footer-text p {
    font-size: 1.6rem;
}

.footer-iconTop a {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: .8rem;
    background: var(--blanco);
    border: .2rem solid var(--darkturquesa);
    border-radius: .6rem;
    color: var(--morafondos);
}




.footer-iconTop a i {
    font-size: 2.4rem;
    color: var(--moraaoscuro);
}


/* BREAKPOINTS */

@media (max-width: 1200px) {
    html {
        font-size: 55%;
    }
}

@media (max-width: 1280px) {
    .home {
        flex-direction: column-reverse;
        margin: 5rem 0;
        gap: 5rem;
    }

    .home-content {
        margin-top: 2.5rem;
        align-items: center;
        text-align: center;
    }

    .home-img {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .home-sci {
        position: relative;
        align-items: center;
        width: 170px;
        display: flex;
        justify-content: space-between;
    }

    .btn-box {
        position: relative;
        display: flex;
        height: 5rem;
        align-items: center;
        justify-content: center;
        width: 59rem;
        gap: 18px;
    }
}

@media (max-width: 991px) {

    html {
        overflow-x: hidden;
    }

    .header {
        padding: 2rem 4%;
    }

    section {
        padding: 10rem 4% 2rem;
    }

    .home {
        padding: 7% 4%;
    }
  
    .footer {
        padding: 2rem 4%;
    }

    .home-img img {
        width: 73vw;
        border-radius: 50%;
        margin-top: 10%;
    }

    .home-content {
        margin-top: -3rem;
       
    }
}

@media (max-width: 768px) {
    .header {
        background-color: var(--darkturquesa);
    }

    #menu-icon {
        display: block;
    }

    .navbar {
        position: absolute;
        top: 100%;
        left: -100%;
        width: 100%;
        padding: 1rem 4%;
        background: var(--negro);
        box-shadow: 0.5rem 1 rem rgba(0,0,0, .2);
        transition: .25s ease;
        transition-delay: .25s;
    }

    .navbar.active {
        left: 0;
        transition-delay: 0s;
    }

    .navbar a {
        display: block;
        font-size: 2rem;
        margin: 3rem 0;
    }

    .home-imgHover {
        pointer-events: none;
        background-color: #000;
        opacity: .6;
    }

    .contact {   
        flex-direction: column;
        gap: 40px;
        padding-top: 4rem;
    }

    .portfolio-container {      
        grid-template-columns: repeat(2, 1fr);
       
    }

    .about-content p {
        font-size: 2.5rem;
        text-align: justify;
    }

    .about-content h3 {
        font-size: 3.6rem;
        
    }


}

@media (max-width: 520px) {
    .html {
        font-size: 50%;
    }

    .home-content h1 {
        display: flex;
        flex-direction: column;
        padding-top: 0rem;
    }

    .home-sci {
        width: 160px;
    }

    .home-sci a {
        width: 38px;
        height: 38px;
    }

    .portfolio-container {      
        grid-template-columns: repeat(1, 1fr);
       
    }

    .home-content p {
        font-size: 1.9rem;
        color: var(--blanco);
        margin: -3rem 0 0rem;
        padding: 9rem;
    }

    .about-content p {
        font-size: 2rem;
        text-align: justify;
    }

    

}


@media (max-width: 462px) {
    .home-content h1 {
        font-size: 5.2rem;
    }

    .education {
        padding: 10rem 4% 5rem 5%;
    }

    .footer {
        flex-direction: column-reverse;
    }

    .footer p {
        margin-top: 2rem;
        text-align: center;
    }

    .home-img img {
        width: 103vw;
        border-radius: 50%;
        margin-top: 11%;
    }

    .btn-box .btn {
        margin-top: 4rem;
    }
    
    .portafoliob .heading{
        margin-top: 10rem;
    }

}

@media (max-width: 370px) {

    .home {
        justify-content: center;
    }

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

    .home-content h1, p, h3 {
        font-size: 5rem;
        text-align: center;
    }

    .home-content p {
        margin: 4rem 0 4rem;
    }

    .btn-box {
     
        margin: 9.8rem 4% 8.8rem;
    }

  

}

@keyframes aboutSpinner {
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.contacto {
    background: var(--moraoscuro) !important;
}

/* PÁGINA DE LA MASCOTERÍA */

.mascoteria {
    background: var(--blanco);
}

.proyecto {
    background: var(--blanco);
    margin-top: 17.5rem;
    padding: 6.5rem 10% 1.5rem;
}

section.imagenes {
    background: var(--blanco);
}


.gallery-ppal {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-align: center;
}

.gallery-ppal div {
    width: 100%;
    display: flex;
    justify-content: center;
}

.gallery-ppal img {
    max-width: 100%;
    height: auto;
    display: block;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: center; /* Centra el contenido */
    align-items: center;
    gap: 0px; /* Espacio entre imágenes */
    width: 100%;
    text-align: center;
}

.gallery-item {
    flex: 1; /* Hace que ambas imágenes ocupen el mismo espacio */
    display: flex;
    justify-content: center;
    align-items: center;
}

.gallery-item img {
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: cover; /* Ajusta la imagen sin deformarla */
}


.descripcion p {
    color: var(--texto);
    font-size: 2rem;
}

.descripcion strong {
    color: var(--moraaoscuro);
}

.descripcion ul li strong {
    font-size: 2rem;
}

.descripcion ul li {
    color: gray;
    font-size: 2rem;
}

.descripcion h3 {
    font-size: 2rem;
    color: var(--darkturquesa);
    line-height: 6rem;
}

/* media queries */

@media (max-width: 991px) {
    .proyecto {
   
        margin-top: 6.5rem;
   
    }

    section.imagenes {
        padding: 5rem 4% 2rem;
    }
    
}

@media (max-width: 520px) {
    .descripcion {
        padding: 5%;
    }

    .proyecto h2.heading {
        line-height: 6rem;
    }

    .gallery {
        grid-template-columns: repeat(1, 1fr);   
    }
}