@font-face {
    font-family: "Milker";
    src: url(../fonts/Milker.otf);
}

:root {
    --titulos: "Milker";
    --titulos-dos: "Archivo";
    --textos: "Archivo";

    --negro: #191A21;
    --rosa: #ED009D;
    --azul: #008FD7;
    --amarillo: #FFE500;
    --violeta: #7B2FFF;
    --verde: #00B341;
    --verde-oscuro: #05772e;
    --naranja: #FF5C00;

    --sombra: 12px 12px 0px;
    --sombra-btn: 6px 6px 0px;

    --padding: 8.5rem;
    --padding-alto: 6rem;

    --padding-responsive: 4rem;
    --padding-alto-responsive: 3rem;

    --padding-responsive-mid: 2rem;
    --padding-alto-responsive-mid: 1.4rem;

    --border: 2px solid #191A21;
    --border-grueso: 4px solid #191A21;
}

* {
    margin: 0;
    padding: 0;
}

html {
    overflow-y: scroll;
    cursor: url("../img/cursor/cursor-default.png") 0 0, auto;
}

a,
button,
.polaroid,
.botonContacto,
input[type="submit"] {
    cursor: url("../img/cursor/cursor-pointer.png") 0 0, pointer;
}

a {
    text-decoration: none;
}

li {
    list-style: none;
}

p {
    font-family: var(--textos);
    font-weight: 900;
}

h2 {
    font-family: var(--titulos-dos);
    font-weight: 900;
    text-transform: uppercase;
}

h3 {
    font-family: var(--titulos-dos);
    font-weight: 800;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;

    background-color: var(--negro);
    background-image: radial-gradient(white 1px, transparent 0);
    background-size: 26px 26px;

    /* para que no le afecte el scroll y no se muevan "los puntos" */
    background-attachment: fixed;

}

.body-home,
.body-contacto {
    min-height: 100dvh;
}

/* El ancho del header y el contenido */
header,
.contenido {
    width: 70%;
}

/* HEADER */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;


    margin: 2.5rem 0;
    padding: 1.5rem var(--padding);
    background-color: white;
    border: var(--border);
    box-shadow: var(--sombra) var(--rosa);

}

nav ul {
    display: flex;
    gap: 40px;
}

nav a {
    /*para poder rotar el texto en el hover*/
    display: inline-block;
    color: var(--rosa);
    font-family: 'Milker';
}

nav a:hover,
.header-activo {
    background-color: var(--rosa);
    outline: var(--rosa) solid 5px;
    color: white;
    transform: rotate(-4deg);
}

header img {
    display: block;
    height: 60px;
}

.abrir,
.cerrar {
    display: none;
}


/* El "doble fondo", dentro del cual va a ir todo el contenido */
.contenido {
    margin-bottom: 3rem;
    padding: var(--padding-alto) var(--padding);
    background-color: white;
    border: var(--border);
    box-shadow: var(--sombra) var(--azul);

    display: flex;
    flex-direction: column;
    justify-content: space-evenly;

    /* Para el marquee */
    overflow: hidden;
}

.body-home .contenido {
    /* Sin padding abajo para el marquee*/
    padding: var(--padding) var(--padding) 0px var(--padding);

}

.body-home .contenido,
.body-contacto .contenido {
    /* ocupa todo el alto */
    flex-grow: 1;
}


/* El grid de la Home */
.grid-home {
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 4rem;
    margin-bottom: 2rem;
}

/* Columna izquierda // Home */
.izq-main div {
    margin-bottom: 1.4rem;
}

.texto-yo p a {
    color: var(--naranja);
}

.izq-main .yo p {
    color: var(--rosa);
}

.izq-main h2 {
    /* en dvw porque quiero que se ajuste al ancho de la columna */
    font-size: clamp(2rem, 3.4vw, 7.5rem);
}

.texto-yo p {
    font-size: clamp(1rem, 1dvw, 2.6rem);
    font-weight: 800;
}

.texto-yo p:first-child {
    padding-bottom: clamp(1rem, 1.2dvw, 2.6rem);
}

.botones-home {
    display: flex;
}


/* Columna derecha // Home */
.drch-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.drch-main .perfil {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.foto-perfil {
    width: clamp(50%, 70%, 100%);
    aspect-ratio: 4/3;
    transform: rotate(4deg);

    box-shadow: var(--sombra) var(--negro);
    border: var(--border-grueso);

    object-fit: cover;
}

/* La "chincheta" encima de la foto // home */
.chincheta {
    height: clamp(20px, 4dvw, 50px);
    aspect-ratio: 1;
    background-color: grey;
    border-radius: 50%;
    box-shadow: 8px 8px 0px -4px var(--negro), 7px 0px 0px 2px #474747 inset;
    border: var(--border);
    position: absolute;
    top: -7%;
    left: 47%;
    z-index: 2;
}

/* H1 // home */
.drch-main h1 {
    position: absolute;
    top: 90%;
    left: 0%;
    font-family: var(--titulos-dos);
    font-weight: 900;
    font-size: clamp(1rem, 1dvw, 2rem);
    background-color: var(--azul);
    color: white;
    padding: 1rem;
    box-shadow: var(--sombra-btn) black;
    border: var(--border-grueso);
}

/* Marquee // Home */

.marquee {
    /* para el texto del marquee vaya a una linea */
    white-space: nowrap;
}

.marquee-texto {
    display: inline-flex;
    animation: marquee-efecto 40s linear infinite;
}
.normal{
    margin-top: 1rem;
}

.marquee-texto.inverso {
    animation: marquee-efecto 40s linear infinite reverse;
}

.marquee-texto h2 {
    padding-left: 1.25rem;
    font-family: var(--titulos);
    font-size: clamp(2.4rem, 2.6dvw, 6rem);
    color: white;
    text-shadow: 4px 4px 0px var(--azul), -4px -4px 0px var(--rosa);

    -webkit-text-stroke: 1px black;
    -moz-text-stroke: 1px black;
    -o-text-stroke: 1px black;
}

@keyframes marquee-efecto {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-50%);
    }
}


/* Portfolio */
.textos h3 {
    margin-bottom: 0.6rem;
}

.card p {
    font-weight: 600;
}

.galeria {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;

}

.card {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    border: var(--border-grueso);
    transition: all 0.4s ease-out;
}


.card.oculta {
    display: none;
}


.card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: all 0.4s ease-out;
}

.card img:hover,
.card video:hover {
    filter: brightness(0.8);
}

.card1,
.card2 {
    flex: 1 1 calc(35% - 1rem);
    height: 500px;
}

.card2 {
    flex: 2 1 calc(50% - 1rem);
}

.textos {
    width: 100%;
    background-color: white;
    position: absolute;
    bottom: 0;

    box-sizing: border-box;
    padding: 10px;

    transform: translateY(102%);
    transition: all 0.2s ease-out;
}

.card:hover .textos {
    transform: translateY(0%);
}

video {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

.vacia {
    height: 0px;
    width: calc(35% - 1rem);
    visibility: hidden;
}

/* Categorias en la galeria // portfolio */
.boton.todas {
    box-shadow: var(--sombra-btn) var(--negro);
}

.branding,
.boton.branding {
    box-shadow: var(--sombra-btn) var(--violeta);
}

.webui,
.boton.webui {
    box-shadow: var(--sombra-btn) var(--verde);
}

.packaging,
.boton.packaging {
    box-shadow: var(--sombra-btn) var(--naranja);
}

.print,
.boton.print {
    box-shadow: var(--sombra-btn) var(--rosa);
}

.art3d,
.boton.art3d {
    box-shadow: var(--sombra-btn) var(--azul);
}


/* Sobre mi */
.textoTrayecto {
    text-align: center;
}

.textoTrayecto h2 {
    font-size: clamp(2rem, 2.4vw, 2.4rem);
}

.textoTrayecto span {
    padding: 4px 4px 0px 4px;
    background-color: var(--amarillo);
}

.textoTrayecto p {
    font-size: clamp(1.2rem, 1.2dvw, 1.6rem);
    font-weight: 700;
}

/* Seccion TAB // Sobre mi */
.todoTab {
    margin-top: 3rem;
}

.navTab {
    display: flex;
    gap: 1rem;
}

.tab {
    padding: 0.5rem 1.2rem;
    border: var(--border);
    border-bottom: none;
    background-color: var(--azul);
    font-weight: 900;
    color: white;
}

.tab:nth-child(2) {
    background-color: var(--naranja);
}

.tab:nth-child(3) {
    background-color: var(--verde-oscuro);
}

.tab.activo {
    position: relative;
    /* para que no se vea el borde de abajo: */
    top: 2px;
    font-weight: 900;
    background-color: white;
    color: var(--negro);
}


/* Contenido en la seccion TAB */
.sectionTabs {
    border: var(--border);
    box-shadow: var(--sombra-btn) var(--azul);
    padding: 3rem 1rem;
}

.cont-tab {
    display: none;
}

.activo {
    display: block;
}

/* Grid de las skills // Sobre mi */
.skills {
    padding: 2rem 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 80px;
    justify-content: center;
    align-items: start;
}

.col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.col h2 {
    grid-column: span 2;
    text-align: center;
    align-self: center;
}

/* Grid de experiencia // sobre mi */
.exp {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-row-gap: 50px;
    grid-column-gap: 30px;
    padding: 2rem 4rem;
}

.circulo {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--naranja);

    border: var(--border-grueso);
    align-self: center;
    justify-self: center;
}

.tabTexto p {
    margin-bottom: 2px;
}

.tabTexto p:first-child {
    display: inline-block;
    padding: 2px 8px;
    background-color: var(--naranja);
    color: white;
    text-transform: uppercase;
}

.tabTexto p:last-child {
    font-weight: 600;
}

.estTexto p:first-child {
    background-color: transparent;
    text-decoration: underline var(--verde) 2px;
    color: var(--negro);
}

.grid-estudios {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 2rem 4rem;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.pin {
    rotate: 45deg;
    border-radius: 50% 50% 0%;
    background-color: var(--verde);
}



/* Polaroids // Sobre mi */

.parrafo-dos p {
    margin-top: 20px;
}

.polaroids {
    margin-top: 60px;

    position: relative;
    display: flex;
    justify-content: center;
}

.polaroid {
    width: 24%;
    padding: 1rem;
    min-height: 500px;

    display: flex;
    flex-direction: column;

    background-color: white;
    border: var(--border);
    box-shadow: var(--sombra-btn) var(--azul);

    transition: transform 0.4s ease-in-out;
}


.polaroid img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
}

.polaroid p {
    font-size: 1rem;
    font-weight: 600;
    text-align: center;

    flex: 1;
    /* ocupa todo el espacio restante */
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Polaroids stackeadas (en desktop) // Sobre mi */
/* polaroid del medio en relative. Asi el div padre no pierde la altura. */
.pola2 {
    position: relative;
    z-index: 1;
    transform: rotateZ(-1deg);
}

.pola1,
.pola3 {
    position: absolute;
    top: 0;
    left: 50%;
}


.pola1 {
    transform: translateX(-50%) rotateZ(-6deg);
}

.pola3 {
    transform: translateX(-50%) rotateZ(8deg);
}

/* transicion con click */
.trans-polaroids .pola1 {
    transform: translateX(-180%) rotateZ(0deg);
}

.trans-polaroids .pola2 {
    transform: rotateZ(0deg);
}

.trans-polaroids .pola3 {
    transform: translateX(80%) rotateZ(0deg);
}

/* Contacto */
.contacto {
    position: relative;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.separador {
    background-color: var(--verde);
    width: 500px;
    height: 2px;
    margin: 1rem 0;
}

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

.contactos h2 {
    background-color: var(--violeta);
    transform: rotate(2deg);
    color: white;
    padding: 4px 14px;
    margin: 4px 0;
}

.contactos a {
    font-size: 2rem;
    color: var(--verde);
    transition: color 0.4s;
}

.contactos a:hover {
    color: var(--verde-oscuro);
}

.mensaje {
    margin: 20px 0;
    color: var(--violeta);
}

/* Transicion con javascript // Contacto */
.contactos {
    transition: all 1s ease-in-out;
}

.down {
    translate: 0 100dvh;
}

.formulario {
    position: absolute;
    translate: 0 -100dvh;
    transition: all 1s ease-in-out;
}

.up {
    translate: 0 -30px;
}


/* Formulario // Contacto */
form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.formulario {
    width: 50%;
}

.columna {
    display: flex;
    gap: 20px;
    width: 100%;
}

.columna input {
    width: 50%;
}

.formulario input {
    box-shadow: var(--sombra-btn) var(--amarillo);
    padding: 0.6rem;
    border: var(--border);
    font-family: monospace;
}

.formulario textarea {
    height: 8rem;
    padding: 0.6rem;
    resize: none;
    box-shadow: var(--sombra-btn) var(--amarillo);
    border: var(--border);
}

input:focus,
textarea:focus {
    border: 2px solid var(--amarillo);
    outline: none;
}

input:focus::placeholder,
textarea:focus::placeholder {
    color: rgba(0, 0, 0, 0.4);
}

/* Paginas individuales de trabajos // portfolio */
.trabajo {
    /* sobreescribir el overflow: hidden de contenido para que funcione el sidebar
    con clip para poder mantener dentro del main el banner separador */
    overflow: clip;
}

.grid-trabajo {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 40px;
}

.trabajo-descripcion {
    width: 25%;
    height: 80dvh;
    position: sticky;
    top: 4rem;
}

.trabajo-descripcion h3 {
    margin-top: 1rem;
}

/* selector de todos los hijos de .trabajo-descripcion */
.trabajo-descripcion>* {
    margin-bottom: 1.4rem;
}

.trabajo-descripcion p {
    font-weight: 600;
    font-size: clamp(1rem, 1.1dvw, 1.2rem);
}

.softwares p {
    margin-bottom: 0.4rem;
}

.softwares p:first-child {
    font-weight: 900;
}

.separacion {
    height: 100dvh;
    width: 12dvh;
    position: sticky;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: -8rem 0;
}

.separacion h3 {
    color: white;
    font-size: 2rem;
    transform: rotate(-90deg);
    white-space: nowrap;
}

/* Colores de la separacion, segun la categoria del trabajo */
.color-branding {
    background-color: var(--violeta);
}

.color-web {
    background-color: var(--verde);
}

.color-packaging {
    background-color: var(--naranja);
}

.color-editorial {
    background-color: var(--rosa);
}

.color-arte3D {
    background-color: var(--azul);
}


.trabajo-imagenes {
    max-width: 55%;
}

.card-trabajo {
    margin-bottom: 20px;
    border: var(--border-grueso);
}

.card-trabajo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* HEADER RESPONSIVE DESPLEGABLE */
@media (max-width: 900px) {

    header {
        z-index: 1;
    }

    .abrir {
        border: 4px solid var(--rosa);
        width: 16%;
        padding: 6px 6px 0;
    }


    .abrir div {
        height: 6px;
        background-color: var(--rosa);
        margin-bottom: 6px;
    }

    .cerrar {
        padding: 4px 6px;
        border: 4px solid white;
        background-color: transparent;
        color: white;
        font-weight: 900;
    }

    /* para que se muestren los botones*/
    .abrir,
    .cerrar {
        display: block;
    }

    nav {
        position: fixed;
        top: calc(-100dvh - 2rem);
        left: 0;
        padding: 60px;
        background-color: var(--rosa);
        width: calc(100% - 100px);
        height: calc(100dvh - 120px);
        transition: top 0.6s;
    }

    .desplegado {
        top: 0;

    }

    .cerrar {
        position: absolute;
        top: 40px;
        right: 60px;
    }

    nav ul {
        display: block;
        text-align: center;
    }

    nav a {
        color: white;
        margin-top: 3rem;
    }

    .header-activo {
        background-color: white;
        color: var(--rosa);
        padding: 8px;
    }

    .sin-scroll {
        overflow: hidden;
    }

}


/* RESPONSIVE DISPOSITIVOS GRANDES */
@media (min-width: 900px) and (max-width: 1280px) {
    .body-home .contenido {
        padding: var(--padding-responsive) var(--padding-responsive) 0px var(--padding-responsive);
    }

    header,
    .contenido {
        width: 80%;
    }

    header {
        margin: 1.5rem 0;
        padding: 1.5rem var(--padding-responsive);
    }

    .contenido {
        margin-bottom: 3rem;
        padding: var(--padding-alto-responsive) var(--padding-responsive);

    }

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

    .polaroid {
        min-height: 440px;
    }
}


/* RESPONSIVE DISPOSITIVOS MEDIANOS */
@media (max-width: 900px) {

    /* HOME */
    .body-home .contenido {
        padding: var(--padding-responsive-mid) var(--padding-responsive-mid) 0px var(--padding-responsive-mid);
    }

    header,
    .contenido {
        width: 80%;
        transform: translateX(-5px);
    }

    header {
        margin: 1.5rem 0;
        padding: 1.5rem var(--padding-responsive-mid);
    }

    .contenido {
        margin-bottom: 3rem;
        padding: var(--padding-alto-responsive-mid) var(--padding-responsive-mid);
    }

    .grid-home {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 3rem;
    }

    .yo, .texto-yo {
        text-align: center;
    }        

    .botones-home {
        justify-content: center;
    }

    .normal{
        margin-top: 2rem;
    }

    .inverso{
        margin-top: 1rem;
    }

    /* PORTFOLIO */
    .galeria {
        flex-direction: column;
    }

    .card1,
    .card2 {
        flex: auto;
    }

    .textos {
        padding: 10px;
        transform: none;
    }

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

    /* ACCION POLAROID */
    .polaroids {
        flex-direction: column;
        align-items: center;
    }

    .polaroid {
        width: 90%;
        margin-bottom: 3rem;
        cursor: auto;
    }

    .polaroid p {
        margin-top: 1rem;
    }

    .pola2,
    .pola1,
    .pola3 {
        position: relative;
        transform: none;
        top: auto;
        left: auto;
    }

    /* CONTACTOS*/
    .contactos a {
        font-size: 1.2rem;
    }

    .mensaje {
        width: 60%;
    }

    .separador {
        width: 60%;
    }

    .formulario {
        width: 70%;
    }

    /* TRABAJOS INDIVIDUALES */
    .separacion {
        display: none;
    }

    .grid-trabajo {
        flex-direction: column;
        align-items: center;
    }

    .trabajo-descripcion {
        width: 80%;
        height: auto;
        position: relative;
        top: 0;
    }

    .trabajo-imagenes {
        max-width: 100%;
        width: 80%;
    }

}


/* RESPONSIVE DISPOSITIVOS PEQUES */
@media (max-width: 500px) {

    header img {
        display: block;
        height: 50px;
    }

    .drch-main h1 {
        padding: 0.5rem;
    }

    .navTab {
        gap: 0.4rem;
    }

    .tab {
        padding: 0.5rem;
    }

    .sectionTabs {
        padding: 0;
    }

    .col {
        display: flex;
        flex-direction: column;
        width: 75%;
    }

    .skills {
        flex-wrap: nowrap;
    }

    .col h2 {
        grid-column: auto;
        align-self: auto;
    }

    .exp {
        display: flex;
        flex-direction: column;
        gap: 25px;
        text-align: center;
        padding: 2rem;
    }

    .grid-estudios {
        padding: 2rem;
    }
}


/* RESPONSIVE DISPOSITIVOS PEQUES EN LANDSCAPE */
@media (max-width: 900px) and (orientation: landscape) {

    .grid-home {
        padding: 0 4rem;
    }

    .down {
        translate: 0 200dvh;
    }

    .formulario {
        translate: 0 -200dvh;
    }

    .up {
        translate: 0;
    }

}