* {
    box-sizing: border-box;
    padding: 0%;
    margin: 0%;
}
body {
    background-color: #ffffff;
}
a{
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
}
/* Header */
.container {
    max-width: 100%;
    display: flex;
        justify-content: center;
    background-color: rgb(0, 0, 0);
    margin: 0;
    padding: 20px;
}

    .header {
        max-width: 1100px;
        width: 100%;
        padding:  20px 6%;
       
        border-radius: 40px;
        background-color: #ffffff;
        font-family:Arial, Helvetica, sans-serif;
        display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            align-items: center;
    }
        .header__logo {
            font-family: 'Times New Roman', Times, serif;
            font-weight: 300;
            font-size: large;
            color: #000000;
        }
        ul {
            list-style: none;
            display: flex;
            gap: 20px;
        }
            .header__menu a {
                text-decoration: none;
                font-size:smaller;
                color: rgb(0, 0, 0);
            }
            .header__menu a:hover {
                color: teal;
            }
        .header__btn {
            display: flex;
            gap: 20px;
        }
            .btn_cv {
                background: transparent;
                border: 1px solid black;
                border-radius: 20px;
                padding: 10px 30px;
                font-weight: 500;
            }
            .btn_portafolio {
                color: #fff;
                background: teal;
                border: 1px solid teal;
                border-radius: 20px;
                padding: 10px 30px;
                font-weight: 500;
            }
          
/* Hero */
.hero__container {
    max-width: 100%;
    display: flex;
    justify-content: center;
    background: rgb(0, 0, 0);
    padding: 20px;
}
    .hero {
        background-color: #000;
        border-radius: 60px;
        max-width: 1100px;
        width: 100%;
        padding: 20px;
        display: flex;
        gap: 60px;
        align-items: center;
    }
        .hero__img img {
            width: 280px;
            border-radius: 30px;
        }
        .hero__content h1 {
            font-family:Arial, Helvetica, sans-serif;
            font-size: 42px;
            margin-bottom: 20px;
            color: #fff;
        }
        .hero__content p {
            font-family: Arial, Helvetica, sans-serif;
            color: #fff;
            line-height: 1.5;
            margin-bottom: 25px;
        }
        .btn__hero{
                color: #fff;
                background: teal;
                border: 1px solid black;
                border-radius: 20px;
                padding: 10px 30px;
                font-weight: 500;
        }

/* Experiencias*/
.experiencia__container{
    padding: 80px 20px;
    display: flex;
        justify-content: center;
        flex-direction: row;
}
    .experiencia {
        max-width: 1100px;
        width: 100%;
        display: flex;
        gap: 50px;
       
    }
    .experiencia1 h2{
        margin-bottom: 20px;
        max-width: 450px;
        font-family: Arial, Helvetica, sans-serif;
    }
    .tags {
        display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
        margin-bottom: 10px;
            max-width: 450px;
         gap: 4px;
        
    }
    .tags span{
        font-family: Arial, Helvetica, sans-serif;
        border: solid rgb(164, 164, 164);
        color: rgb(142, 142, 142);
        padding: 6px 16px;
        border-radius: 20px;
        font-size: 13px;
    }

    .experiencia2{
        flex: 1;
    }
        details{
            border-bottom: 1px solid #ccc;
            padding: 20px 0;
        }
        p{
            font-family: Arial, Helvetica, sans-serif;
        }
        details p {
            margin-top: 15px;
            color: #555;
        }
        summary {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 20px;
            cursor: pointer;
            
        }

/* Stack tecnologico*/
.stack__container{
    width: 100%;
    box-sizing: border-box;
    padding: 10px 5% 80px 5%;
    display: flex;
        flex-direction: column;
        align-items: center;
}
.stack{
    max-width: 1100px;
    width:100%;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    color: #000000;
    display: flex;
        flex-direction: column;
}
h2{
    margin-bottom: 20px;
   
}
.stack__logos{
     width: 100%;
    margin-top: 40px;
    display: flex;
        justify-content: center;
        flex-wrap: wrap;
    gap: 80px;
}
.stack__item img{
    max-width: auto;
    max-height: 80px;
}
/*Portafolio*/
.portafolio__container{
    width: 100%;
    padding: 80px 5%;
    background-color: #000000;
    border: solid black;
    box-sizing: border-box;
    border-radius: 30px;
    color: #ffffff;
    display: flex;
        flex-direction: column;
        align-items: center;
}
.portafolio{
    max-width: 1100px;
    width:100%;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}
.portafolio__content{
    display: flex;
        justify-content:center;
        align-content: flex-start;
    gap: 5px;
 
}
.portafolio__card{
    background-color: #fff;
    border-radius: 20px;
    color: #000000;
    padding: 20px;
    min-height: 360px;
    display: flex;
        flex-direction: column;
        justify-content: flex-end;
        
    margin-bottom: 20px;
}

/* --- RESPONSIVE DESIGN --- */

/* Tablets y pantallas medianas (aprox 1024px) */
@media (max-width: 1024px) {
    .header {
        gap: 20px;
        padding: 20px;
    }
    
    .portafolio__content {
        flex-wrap: wrap; /* Para que las tarjetas bajen si no caben */
        justify-content: center;
    }
    
    .portafolio__card {
        width: 45%; /* Dos tarjetas por fila */
    }
}

/* Móviles (768px o menos) */
@media (max-width: 768px) {
    
    /* Header: Logo arriba, menú y botones abajo */
    .header {
        flex-direction: column;
        border-radius: 20px;
        gap: 20px;
        text-align: center;
    }

    .header__menu ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }

    /* Hero: Imagen arriba, texto abajo */
    .hero {
        flex-direction: column;
        text-align: center;
        gap: 30px;
        border-radius: 30px;
    }

    .hero__img img {
        width: 100%; /* La imagen se adapta al ancho del móvil */
        max-width: 300px;
    }

    /* Experiencia: Tags arriba, acordeones abajo */
    .experiencia {
        flex-direction: column;
        gap: 30px;
    }

    .experiencia1 h2, .tags {
        max-width: 100%;
        justify-content: center;
    }

    /* Stack Tecnológico: Logos más pequeños y centrados */
    .stack__logos {
        justify-content: center;
        gap: 20px;
    }

    .stack__item img {
        max-height: 50px; /* Logos un poco más pequeños en móvil */
    }

    /* Portafolio: Una tarjeta por fila */
    .portafolio__content {
        flex-direction: column;
        gap: 20px;
    }

    .portafolio__card {
        width: 100%;
        min-height: auto;
        padding: 30px 20px;
    }
    
    /* Botón final del portafolio */
    .portafolio__container .btn_portafolio {
        width: 100%;
        margin-top: 20px;
    }
}