@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


/* ROOT DE CLASES Y SISTEMA DE DISEÑO */

:root{
    color-scheme: light dark;

    /* ORANGE VALUES */
    --orange-50: oklch(0.9758 0.0151 61.35);
    --orange-100: oklch(0.9446 0.0357 61.95);
    --orange-200: oklch(0.8831 0.0749 58.08);
    --orange-300: oklch(0.8095 0.1198 54.07);
    --orange-400: oklch(0.7246 0.1722 45.37);
    --orange-500: oklch(0.6725 0.2061 39.23); 
    --orange-600: oklch(0.6194 0.2138 34.7);
    --orange-700: oklch(0.5333 0.1895 33.03);
    --orange-800: oklch(0.4532 0.156 31.9);
    --orange-900: oklch(0.2562 0.0838 30.32);

    --navbar-light: oklch(0.9461 0 0 / 66%);
    --border-light: oklch(0.9461 0 0 / 11%);
    --navbar-dark: oklch(0.0969 0 0 / 66%);

    --text-light:  oklch(0.9461 0 0);
    --text-dark: oklch(0.0969 0 0);

    --primary-color: oklch(0.6957 0.201 40.2);
    --secondary-color: oklch(0.7294 0.1687 34.05);
    --tertiary-color: oklch(0.7294 0.1687 34.05); 
    --cuaternary-color: oklch(0.1338 0.0271 29.12); 
    --background-light: oklch(0.9461 0 0);  /* casi blanco */
    --background-dark: oklch(0.1108 0.0254 62.51);  /* casi negro */


/* USAMOS CLAMP PARA TAMAÑOS DE FUENTES RESPONSIVOS QUE SE AJUSTAN AUTOMATICAMENTE BASADOS
EN EL VIEWPORT SIN NECESIDAD DE USAR MEDIAQUERIES */

    --spacing-xs: clamp(0.8rem, 0.48rem + 0.56vw, .72rem);
    --spacing-sm: clamp(0.72rem, 0.64rem + 0.56vw, .88rem);
    --spacing-md: clamp(.96rem, 0.96rem + 0.56vw, 1.6rem);
    --spacing-xl: clamp(1.6rem, 1.6rem + 0.56vw, 2.4rem);
    --spacing-xxl: clamp(2.4rem, 2.4rem + 0.56vw, 3.2rem);
    --spacing-big: clamp(3.2rem, 3.64rem + 0.56vw, 4.8rem);

    --radius: .8rem;
    --radius-nav: 2.4rem;
    --primary-font:#;
    --secondary-font:#;
    --general-padding: 1.6rem;
    --general-margin: 0 auto;
    --titulo: clamp(2.4rem, 1.6rem + 0.56vw, 3.2rem);
    --subtitulo: clamp(1.6rem, 1.44rem + 0.56vw, 2.4rem);
    --parrafo: clamp(1.20rem, 0.8rem + 0.56vw, 1.20rem);
    --parrafo-sm: clamp(.8rem, 0.72rem, + 0.56vw, 1.04rem);
    --parrafo-xs: .64rem;
}


*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}


body{
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
scroll-behavior: smooth;
color: light-dark( var(--background-light), var(--background-light));
background-color: light-dark( var(--background-light), var(--background-dark));
}




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

/* CONTENEDOR PRINCIPAL */
main{
container-type: inline-size;
container-name: principal;
width: 100%;
height: auto;
margin: 0 auto;
padding: 0;
}

/* SECCION NAVEGACION */

header{
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 100%;
height: auto;
border-radius: var(--radius);
background-color: var(--background-dark);
}

.nav--menu{
width: 100%;
height: auto;
margin: 0 auto;
z-index: 1000;
}

.menu{
    width: 100%;
    max-width: 480px;
    height: 32px;
    display: flex;
    flex-direction: grid;
    justify-content: center;
    align-items: center;
    position: fixed;
    border-radius: var(--radius-nav);
    padding: var(--spacing-xl);
    margin: .24rem auto;
    z-index: 1000;
    backdrop-filter: blur(64px);
    background-color: light-dark( var(--navbar-light), var(--navbar-dark));
    border: .08rem solid var(--border-light);
}

.logo{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    width:100%;
    height: auto;
    padding: var(--spacing-big) var(--spacing-xs);
    font-size: var(--subtitulo);
    color: light-dark( var(--text-dark), var(--text-light));
}


.menu-btn{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background-color: transparent;
    color: light-dark( var(--background-dark), var(--background-light));
    border: none;
    cursor: pointer;
    font-size: var(--parrafo);
    padding: var(--spacing-xs);
    border: .016rem solid var(--border-light);
}

.menu-list{
    position:absolute;
    top:66px;
    margin: var(--general-margin);
    width: 100%;
    height: auto;
    color: var(--background-light);
    padding: var(--spacing-md) 0 ;
    list-style: none;
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
    transition: opacity .1s, transform 0.1s;
    font-weight: 600;
    z-index: 1000;
    backdrop-filter: blur(32px);
    border: .016rem solid var(--border-light);
    border-radius: var(--radius);
}

li{
    padding: var(--spacing-xs) 0 ;
}


a{
    text-decoration: none;
    color: light-dark( var(--background-dark), var(--background-light));
    cursor: pointer;
}

a:hover{
color: light-dark ( var(--background-light), var(--background-light));
cursor: pointer;
}

a:focus-within{
color: var(--primary-color);
}

.menu-btn:hover .menu-list, .menu:focus-within .menu-list{
opacity:1;
transform: scaleY(1);
color: light-dark(var(--primary-color), var(--primary-color));
background-color: light-dark(var(--navbar-light), var(--navbar-dark));
}




.nav--links{
    display: flex;
    gap: var(--spacing-md);
}

.nav--links a{
    text-decoration: none;
    color: var(--cuaternary-color);
    padding: var(--spacing-xl);
    border-radius: var(--radius);
    transition: all 0.88s ease-in;
}

:is(.nav--links a:hover, .nav--links a:focus){
 background-color: var(--tertiary-color); 
 color: var(--cuaternary-color);
 transition: all 0.88 ease-in;  
 padding: var(--spacing-md);

}

/* SECCION HERO - PRESENTACION DE LA MARCA CON CTA */


.hero{
text-align: center;
overflow: hidden;
margin: var(--general-margin);
padding: var(--spacing-xxl) var(--spacing-xs);
 width: 100%;
 height: 960px;  
/* GRADIENT */
 background: linear-gradient(190deg,
  oklch(0.0969 0 0 / 1%) 33%,
oklch(0.6958 0.204259 43.491 / 90%) 100%,
  oklch(0.0969 0 0 / 1%) 66%,
  oklch(0.6958 0.204259 43.491 / 33%) 10%);
}

.logo-pampa{
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 320px;
    height: auto;
    align-items: center;
    justify-content: center;
    margin: var(--spacing-big) auto;
    cursor: pointer;
    padding: var(--spacing-xs);
}


.hero h1{
    font-family: "Poppins", sans-serif;
    font-style: normal;
    font-size: var(--titulo);
    margin-bottom: var(--spacing-md);
    --color-destacado: var(var(--background-light));
    line-height: 3.2rem;
    color: light-dark( var(--text-dark), var(--text-light));
}

.hero:has(.cta-button:hover) h1{
    --color-destacado:var(--primary-color);
}

.hero h1 span{
    color:var(--color-destacado);
    transition: all 0.333s ease;
}

.hero p{
    font-family: Arial, Helvetica, sans-serif;
    font-size: var(--titulo);
    max-width: 800px;
    margin: var(--general-margin) var(--spacing-xl); 
    line-height: 2.4rem;
    color: light-dark( var(--text-dark), var(--text-light));
}

.cta-button{
display: inline-block;
padding: var(--spacing-xs) var(--spacing-xs);
background-color: var(--primary-color);
color: var(--background-light);
text-decoration: none;
border-radius: var(--radius);
font-weight: bold;
transition:  all 0.333s ease;
cursor:pointer;
border: none;
}

.cta-button:hover{
color: var(--background-dark);
transform: scale(calc( 1 + 0.056));
box-shadow: 0 4px 5px rgba(32, 2, 2, 0.222) ;
}



/* SECCION PROYECTOS */

.proyectos{
padding: var(--spacing-big) var(--spacing-md);
view-timeline-name: --scroll-proyectos;
view-timeline-axis: block;
background-color: light-dark( var(--background-light), var(--background-dark));
border-radius: var(--radius);
margin: var(--spacing-xs) 0;
}

.proyectos h2{
    font-size: var(--subtitulo);
    text-align: center;
    margin-bottom: var(--spacing-xl);
    /* animacion basada en scroll utilizando timeline */
    animation: aparecer linear;
    animation-timeline: --scroll-proyectos;
    animation-range: entry 10% cover 20%;
    color: var(--primary-color);
}

.proyecto--card{
border-radius: var(--radius);
overflow: hidden;
background-color: light-dark( var(--background-light,) var(--background-dark));
box-shadow: 0 1px 2px rgba(0,0,0,.1);
content-visibility: auto;
contain-intrinsic-size: 0 300px;
transition: transform 0.3s ease;
border: .001rem solid var(--background-light);
opacity: 1;
backdrop-filter: blur(25px);
}

.proyecto--card:hover{
    transform: translateY(-5px);
    box-shadow: 0 4px 16px rgba(0,0,0,.111);
}

.proyectos--grid{
display: grid;
gap: var(--spacing-md);
grid-template-columns: repeat(auto-fit, minmax(320px , 1fr));
}

.proyecto--img{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 320px;
position: relative;
overflow: hidden;
mix-blend-mode: multiply;
}

.proyecto--img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    mix-blend-mode: multiply;
    filter:grayscale(50%);
    transition: all 0.3s ease;
}

.proyecto--img .material-icons{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    padding: var(--general-padding);
    border: .16rem solid var(--primary-color);
    border-radius: var(--radius);
    color: var(--background-dark);
    background-color: var(--primary-color);
}

.proyecto--card:hover .proyecto--img img{
    filter: grayscale(0%);
    mix-blend-mode: normal;
    transition: all 0.666 ease;
}


.proyecto--data{
padding: var(--spacing-md);
}

.proyecto--data h3{
    font-size: var(--subtitulo);
    margin-bottom: var(--spacing-md);
    color: var(--primary-color);
}

.proyecto--data p{
    font-size: var(--parrafo);
    margin-bottom: var(--spacing-sm);
    color: light-dark( var(--background-dark), var(--background-light));
    line-height: 1.6rem;
}

.proyecto--tech{
display: flex;
flex-wrap: wrap;
gap:var(--spacing-xs);
margin-top: var(--spacing-xs);
color: var(--background-dark);
}



.etiqueta{
/* background-color: color-mix(in oklch, var(--secondary-color) 11.3%, var(--primary-color)); */
background-color: light-dark( var(--background-light), var(--background-dark)  );
padding: calc(var(--spacing-xs) / 2 ) var(--spacing-xs);
border-radius: var(--radius);
font-size: var(--parrafo-xs);
color: light-dark(var(--text-dark), var(--text-light));
border: .08rem solid var(--primary-color);
}


.problem--container{
padding: var(--spacing-big) var(--spacing-md);
view-timeline-name: --scroll-proyectos;
view-timeline-axis: block;
border-radius: var(--radius);
margin: var(--spacing-xs) 0;
}

.problem--container h2{
    font-size: var(--subtitulo);
    text-align: center;
    margin-bottom: var(--spacing-xl);
    /* animacion basada en scroll utilizando timeline */
    animation: aparecer linear;
    animation-timeline: --scroll-proyectos;
    animation-range: entry 10% cover 20%;
    color: var(--primary-color);
}

.problem--grid{
display: grid;
gap: 0;
grid-template-columns: repeat(auto-fit, minmax(560px , 1fr));
}

.problem--card{
color: var(--primary-color);
border-radius: var(--radius);
overflow: hidden;
box-shadow: 0 1px 2px rgba(0,0,0,.05);
content-visibility: auto;
contain-intrinsic-size: 0 300px;
transition: transform 0.5s ease;
border: .008rem solid var(--primary-color); 
opacity: .9;
transition: all .5s;
width: 100%;
min-height: 400px;
display: flex;
justify-content: center;
align-items: center;
}

.problem--card:hover{
    border: .16rem solid var(--primary-color); 
    color: var(--primary-color);
    transform: translateY(-5px);
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
    background: var(--background-dark) ;
    background: linear-gradient(180deg,
  oklch(0.0969 0 0 / 1%) 33%,
oklch(0.6958 0.204259 43.491 / 33%) 100%,
  oklch(0.0969 0 0 / 1%) 66%,
  oklch(0.6958 0.204259 43.491 / 66%) 10%
 );
    opacity: 1;
    transition: all .5s;
}

.problem--data{
padding: var(--spacing-md);
text-align: right;
line-height: 1.6rem;
}

.problem--data h3{
    font-family: "Poppins", sans-serif;
    font-style: normal;
    font-size: var(--subtitulo);
    margin-bottom: var(--spacing-md);
}

.problem--data p{
    font-family: "Poppins", sans-serif;
    font-style: normal;
    font-size: var(--parrafo);
    margin-bottom: var(--spacing-sm);
    padding: .16rem;
}


.problem--img{
height: 240px;
position: relative;
overflow: hidden;
mix-blend-mode: multiply;
}

.problem--img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    mix-blend-mode: multiply;
    filter:grayscale(50%);
    transition: all 0.3s ease;
}


.problem--card:hover .proyecto--img img{
    filter: grayscale(0%);
    mix-blend-mode: normal;
    transition: all 0.333 ease;
}

.solution--card{
color: var(--secondary-color);
border-radius: var(--radius);
overflow: hidden;
box-shadow: 0 1px 2px rgba(0,0,0,.05);
content-visibility: auto;
contain-intrinsic-size: 0 300px;
transition: all 0.5s ease;
border: .008rem solid var(--secondary-color);
opacity: 1;
width: 100%;
min-height: 400px;
text-align: left;
display: flex;
justify-content: center;
align-items: center;
}

.solution--card:hover , .problem--card:focus-within{
    border: .16rem solid var(--secondary-color); 
    color: var(--secondary-color);
    transform: translateY(-5px);
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
    background: var(--background-dark) ;
    background: linear-gradient(180deg,
  oklch(0.0969 0 0 / 1%) 33%,
oklch(0.7294 0.1687 34.05 / 33%) 100%,
  oklch(0.0969 0 0 / 1%) 66%,
  oklch(0.7294 0.1687 34.05 / 66%) 10%
 );
    transition: all 1s;
}


.solution--data{
padding: var(--spacing-md);
line-height: 1.6rem;
}

.solution--data h3{
    font-family: "Poppins", sans-serif;
    font-style: normal;
    font-size: var(--subtitulo);
    margin-bottom: var(--spacing-md);
}

.solution--data p{
    font-family: "Poppins", sans-serif;
    font-style: normal;
    font-size: var(--parrafo);
    margin-bottom: var(--spacing-sm);
    padding: .16rem;
}


.solution--card:hover .solution--img img{
    filter: grayscale(0%);
    mix-blend-mode: normal;
    transition: all 0.333 ease;
}


/* SECCION SKILLS */

.habilidades{
padding: var(--spacing-xl);
background-color: color-mix(in oklch, var(--primary-color) 10%, var(--background-light)90%);
border-radius: var(--radius);
margin: var(--spacing-xs) 0;
opacity: .888;
}

.habilidades h2{
    font-size: var(--subtitulo);
    text-align: center;
    margin-bottom: var(--spacing-xxl);
}

.habilidades--container{
display: flex;
flex-wrap: wrap;
gap: var(--spacing-md);
justify-content: center;

}

.item--habilidades{
position: relative;
padding: var(--spacing-md);
border-radius: var(--radius);
background-color: var(--background-light);
box-shadow: 0 4px 8px rgba(0,0,0,.1);
width: calc(33% var(--spacing-md));
min-width: 320px;
text-align: center;
/* para animation-timeline basada en scroll */
animation: deslizar 1s ease;
animation-timeline: view();
animation-range: entry 20% cover 50%;
}


@keyframes deslizar{
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to{
        transform: translateY(0);
        opacity: 1;
    }
}

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


/* SECCION CONTACTO */


.contacto--container{
padding: var(--spacing-xl) 0 ;
text-align: center;
background-color: light-dark( var(--background-light), var(--background-dark));
border-radius: var(--radius);
margin: var(--spacing-xs) 0;
opacity: .888;
}

.contacto--container h2{
    font-size: var(--subtitulo);
    margin-bottom: var(--spacing-xs);
    color: light-dark( var(--background-dark), var(--background-light));
}
.formulario--contacto{
max-width: 640px;
margin: var(--general-margin);
}

.grupo--formulario{
margin-bottom: var(--spacing-md);
text-align: left;
}

.grupo--formulario label{
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: bold;
    font-size: var(--parrafo);
    color: light-dark(var(--background-dark), var(--background-light));
}

.grupo--formulario:focus-within label{
    color: var(--primary-color);
    transition: all .3s ease ;
}

.grupo--formulario:focus-within .control--formulario{
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary-color) 30%, transparent);
    outline: none;
}

.control--formulario{
width: 100%;
padding: var(--spacing-xs);
border: 1px solid #ddd;
border-radius: var(--radius);
font-size: var(--parrafo);
}

/* PIE DE PAGINA */


.footer{
padding: var(--spacing-xxl) 0 ;
background-color: light-dark( var(--background-light), var(--background-dark));
color: light-dark( var(--background-dark), var(--background-light));;
text-align: center;

}


.social--media{
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    margin-bottom: (var(--spacing-md));
}



.social--media a:hover{
    transform: translateY(-3px);
    color:var(--secondary-color);
    transition:transform 0.3s ease;
}

.social--media a {
    color: light-dark( var(--background-dark) var(--background-light));;
    text-decoration: none;
    transition: transform 0.3 ease;
}




/* ======= CONTAINER QUERIES ======= */

@container principal (max-width: 768px){
.hero h1{
    line-height: 3.2rem;
}

.hero p{
    line-height: 3.2rem;
}
    .proyectos--grid{
        grid-template-columns: 1fr;
    }
    .item--habilidades{
        width: calc(50% - var(--spacing-xs));
    }

    .problem--grid{
        grid-template-columns: 1fr;
    }

    .menu-list{
    top:64px;
}
}


@container principal (max-width:480px){

    .logo-pampa{
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 240px;
    height: auto;
    align-items: center;
    justify-content: center;
    margin: var(--spacing-big) auto;
    cursor: pointer;
    padding: var(--spacing-xs);
}

    .hero{
        height: 640px;
        padding: var(--spacing-xs) 0;
        margin: 0 auto;
    }

    .item--habilidades{
        width: 96%;
    }
    .hero h1{
    font-size: var(--subtitulo);
    line-height: 1.6rem;
}
    .hero p{
       font-size: var(--parrafo-xs);
         line-height: 1.6rem;
    }
}


@media (max-width:768px){

    .logo-pampa{
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 240px;
    height: auto;
    align-items: center;
    justify-content: center;
    margin: var(--spacing-big) auto;
    cursor: pointer;
    padding: var(--spacing-xs);
}

    .contacto--container{
    padding: var(--spacing-xs);
}

    .nav--links{
        gap: var(--spacing-xs);
    }


}

@media (max-width: 560px){

    .logo-pampa{
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 240px;
    height: auto;
    align-items: center;
    justify-content: center;
    margin: var(--spacing-big) auto;
    cursor: pointer;
    padding: var(--spacing-xs);
}

    .nav--menu{
        flex-direction: column;
        gap: var(--spacing-xs);
    }

.nav--links{
    flex-direction: column;
    align-items: center;
}


.contacto--container{
    padding: var(--spacing-xs);
}

}