/*   
Theme Name: Portfolio demicheo 
Theme URI: the-theme's-homepage
Description: a-brief-description
Author: Dela de Micheo
Author URI: your-URI
Version: 1.2
.
General comments/License Statement if any.
.
*/

/* ------------- RESET -----------------*/
img { width: 100%; height: auto;}
figure{margin: 0;}
hr{
    margin: 1.5rem 0;
    border-top: 2px solid var(--primary);
    opacity: 1;
}

::selection{
    background-color: var(--primary);
    color: var(--white);
}

a{color: var(--primary); text-decoration: none;}

p>a{
    box-shadow: 0 1px 0 var(--primary);
}


/*COSAS DE LA HOME EN CONTRUCCIÓN*/
:root{
    --fondo: #f5e960;
    --blanco: #F2F5FF;
    --negro: #172121;
    --acento:#55D6C2;
    --acento-hover:#31a392;
    --morao:#7e2553;
}

.coming-soon{
    height: 100vh;
    background: var(--fondo);
    

}

.contenedor-soon{
    padding: 20px;
    border-radius: 20px;
    border: 5px solid var(--negro);
    background-color: var(--blanco);
    backdrop-filter: blur(10px);
    
}

.contenedor-soon > h1{
    margin:0;
    padding: 0;
}

.mensaje{
    margin-top: 20px;
}

.boton{
    margin: 20px;
    padding: 20px 40px;
    background-color: #f5e960;
    border: 3px solid var(--negro);
    border-radius: 100px;
    box-shadow: 5px 10px 0px 1px var(--acento);

    text-decoration: none;
    color: var(--negro);
    font: var(--lex-16-med);

    transition: all .1s ease-in-out;
}

.boton:hover{
    transform: translateX(2px) translateY(3px);
    font-weight: bold;

    box-shadow: 5px 7px 0px -1px var(--acento-hover);
}



/*PÁGINA DE LINKS*/
:root{
    /*COLORES*/
    --principal:rgb(251 222 24);
    --negro:#000;
    --blanco:#fff;
    /*FUENTES*/
    --exo-20-reg:normal 400 1.25rem/100% 'Exo 2', system-ui;
    --Spc-20-reg: normal 400 1.25rem/100% 'Space Grotesk', system-ui;
    /*estilo - grosor - tamaño/line heigth - fuente */
}
.container{
    display:flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 90vh;
}
.section-links{
    margin: auto;
    border: 2px solid red;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--principal);
    padding: 30px;
    ul{
        border: 2px solid magenta;
    }
}

/*EMPIEZA AQUÍ----------------------------------------------------------------------------------------------------------*/

:root{
    /* colors */
    --amarillo:#FFDE00;
    --naranja:#FF7300;
    --morado:#7B00FF;
    --crema:#FFF9DC;
    --negro:#201D1C;
    --black:#1A1818;
    --white:#F6F6F6;
    --s-morado:#47038f;
    --s-naranja:#a04901;
    --s-crema:#c5bd95;
    /* espacios */
    --xs:0.5rem;    /*8px*/
    --s:1rem;       /*16px*/
    --m:1.5rem;     /*24px*/
    /* z index */
    --top:10;
    --mid:5;
    --back:-10;
    /* fuentes */
    --etiqueta: normal 400 1rem/100% "Space Grotesk", sans-serif;
    --titulo-uno: normal 800 3rem/100% "Fraunces", serif;
    --titulo-dos: normal 650 1.9rem/120% "Fraunces", serif;
    --titulo-tres-fr: normal 650 1.4rem/120% "Fraunces", serif;
    --titulo-tres: normal 600 1.4rem/100% "Space Grotesk", sans-serif;
    --subtitulo-fr: normal 600 1.15rem/100% "Space Grotesk", sans-serif;
    --parrafo: normal 300 1rem/100% "Space Grotesk", sans-serif;
    --navmenu: normal 800 3rem/100% "Fraunces", serif;
    --t-cta: normal 800 1rem/100% "Space Grotesk", sans-serif;

}
/*COMUNES*/
.este{
    border: 2px solid rgb(21, 255, 0);
}

/*colores*/
.color-crema{color: var(--crema);}
.color-amarillo{color: var(--amarillo);}
.color-morado{color: var(--morado);}
.color-naranja{color: var(--naranja);}
.color-negro{color: var(--negro);}

.bg-crema{background-color: var(--crema);}
.bg-amarillo{background-color: var(--amarillo);}
.bg-morado{background-color: var(--morado);}
.bg-naranja{background-color: var(--naranja);}
.bg-negro{background-color: var(--negro);}

/*texto*/
.h-etiqueta{
    font: var(--etiqueta)
}

.h-uno{
    font: var(--titulo-uno);
}
.h-dos{
    font: var(--titulo-dos);
}
.h-tres{
    font: var(--titulo-tres);
}
.h-tres-fr{
    font: var(--titulo-tres-fr);
}

.subh-fr{
    font: var(--subtitulo-fr);
}
.text{
    font: var(--parrafo);
}

.mayusc{
    text-transform: capitalize;
}

.italic{
    font-style: italic;
}

.bold{
    font-weight: bold;
}

.z-top{z-index: var(--top);}
.z-mid{z-index: var(--mid);}
.z-back{z-index: var(--back);}


/* HEADER */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    min-height: 80px;
    z-index: var(--top);
}
.header-nuevo {
    border-radius: 0 0 var(--s) var(--s);
}
.logo-header {
    max-height: 100px;
    width: auto;
}

/* BURGER */
.burger {
    width: 80px;
    height: 80px;
    padding: 10px;
    z-index: 10;
    transition: all .5s ease;
}

.btn-burger {
    width: 100%;
    height: 100%;
    background-color: var(--crema);
    border: 3px solid var(--negro);
    border-radius: var(--s);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    filter: drop-shadow(4px 4px var(--s-crema));
    transition: .3s;
}


.stick {
    width: 50%;
    height: 5px;
    background-color: var(--negro);
    border-radius: 5px;
    transition: all .3s ease;
}
.btn-burger.active .stick:first-of-type {
    transform: rotate(45deg) translate(6px, 6px);
}
.btn-burger.active .stick:nth-of-type(2) {
    opacity: 0;
}
.btn-burger.active .stick:last-of-type {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* burger hover */
.btn-burger:hover{
    translate: 5px 5px;
    filter: none;
    background-color: var(--naranja);
}
/* burger active */
.btn-burger.active {
    translate: 5px 5px;
    filter: none;
    border-color: var(--crema);
    background-color: var(--naranja);
}
.btn-burger.active .stick{
    background-color: var(--crema);
}

.btn-burger.active .stick:first-of-type {
    transform: rotate(50deg) translateX(7px) translateY(6px) scale(1.2);
}

.btn-burger.active .stick:nth-of-type(2) {
    transform: scale(0);
}

.btn-burger.active .stick:last-of-type {
    transform: rotate(-50deg) translateX(5px) translateY(-5px) scale(1.2);
}
/* NAV*/
.nav-menu {
    position: absolute;
    top: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    padding-top: 80px;
    background: var(--naranja);
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateX(100%);
    transition: transform .4s ease;
}
.nav-menu.active {
    transform: translateX(0);
}

/* LINKS */
.HOLA{
    width: 100%;
}
.nav-link, #menu-top>li {
    background-color: red!important;
    border-bottom: 2px solid var(--crema);
    border-bottom: 2px solid var(--crema);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav-link:last-of-type {
    border-bottom: none;
}
.header-enlace {
    color: var(--crema);
    font: var(--navmenu);
    text-decoration: none;
    padding: 1rem;
    display: block;
    width: 100%;
    text-align: center;
}
.header-enlace:hover {
    background: var(--morado);
}

/* REDES */
.redes {
    display: flex;
    justify-content: center;
    gap: 1rem;
}
.nav-redes {
    width: 45px;
    height: 45px;
    border: 2px solid var(--crema);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav-redes-svg-path {
    fill: var(--crema);
}
.nav-redes:hover {
    border-color: var(--morado);
}
.nav-redes:hover .nav-redes-svg-path {
    fill: var(--morado);
}


/* MEDIAQUERY */

/* md */
@media (min-width: 768px) {
     .header{
        background-color: var(--crema);
    }
    .nav-menu {
        position: static;
        flex-direction: row;
        height: auto;
        width: auto;
        background: transparent;
        transform: none;
        padding: 0;
        box-shadow: none;
    }
    .header-enlace {
        color: var(--negro);
        font-size: 1.5rem;
    }
    .header-enlace:hover{
        background-color: transparent;
        color: var(--morado);
    }
  
}


/* xl */
@media (min-width: 768px) {
  .header-enlace {
        color: var(--negro);
        font-size: 2rem;
    }
}