/* =======================================================

   RESET Y CONFIGURACIÓN GLOBAL

======================================================= */

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

body{
    width: 100%;
    min-height: 80vh;
    overflow-y: hidden;
}





/* =======================================================

   TIPOGRAFÍAS

======================================================= */

@font-face {

    font-family: 'Test';

    src: url(../font/Prompt/Prompt-Medium.ttf);

}



@font-face {

    font-family: 'Test2';

    src: url(../font/Work_Sans/static/WorkSans-Bold.ttf);

}





/* =======================================================

   ESTRUCTURA Y LAYOUT

======================================================= */

header{
    width: 100%;
    min-height: 20vh;
    display: flex;
    justify-content: center;
    flex-direction: row;
    margin-top: 3em;
    margin-bottom: 5em;
}


main{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}



.help{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column nowrap;
}




/* =======================================================

   TEXTO Y COMPONENTES

======================================================= */

.logo {
    height: auto; 
}

.htext{
    margin: 1em;
    display: flex;
    gap: 0.5em; /* Espacio reducido para que quepa mejor */
    flex-flow: row nowrap; /* Obliga a estar en una sola fila */
    justify-content: center;
    align-items: center;
    /* Fuente dinámica para que no rompa la línea en móviles pequeños */
    font-size: clamp(1.2rem, 5vw, 3rem); 
    font-family: 'Test';
    text-align: center;
    white-space: nowrap; /* Evita que el texto o iconos salten de línea */
}

.htext h2 {
    font-size: 1em; /* Hereda del clamp de .htext */
}

.htext i{
    font-size: 1.25em;
}

.hbutton{
    font-size: clamp(3rem, 15vw, 5rem);
    transition: transform 1.5s ease, opacity 1.5s ease;
}










.tm .fa-gear{

    opacity: 0;

    transition: opacity 2s ease, animation 1.5s ease, transform 2s ease;

}



.tms{

    width: 100%;

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

    gap: 2em;

    padding: 1rem;

}



.mtype{
    background-color: rgb(255, 255, 255);
    border-radius: 15px;
    padding: 1em;
    text-align: center;
    box-shadow: 0px 0px 10px #0000005b;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 5em;
    transition: scale 1s ease-in-out, color 1s ease-in-out, box-shadow 1s ease-in-out, background 1s ease-in-out;
}

.mtype p{
    font-size: 1.25em;
    font-family: 'Test';
}





/* =======================================================

   ICONOS

======================================================= */

.help .fa-gear{

    transition:opacity 2s ease, animation 1.5s ease;

}



.tm .fa-hammer{

    transition:opacity 2s ease, animation 1.5s ease;

}





/* =======================================================

   ELEMENTOS INTERACTIVOS

======================================================= */

.ofitem{

    animation: floatitem 2s infinite ease-in-out;

    transition:

        scale 1s ease-in-out,

        color 1s ease-in-out,

        text-shadow 1s ease-in-out;

    cursor: pointer;

}



.ofitem:hover{

    scale: 1.1;

    color: white;

    text-shadow: 0px 0px 10px #000;

}




.mtype:hover{

    background-color: #000;

    box-shadow: #68676783;

    color: white;

    scale: 1.1;

}



/* =======================================================

   ANIMACIONES

======================================================= */

@keyframes rotate {

    to{

        transform: rotate(360deg);

    }

}



@keyframes hammerLeft {

    0% {

        transform: rotate(0deg) translateY(0);

    }

    30% {

        transform: rotate(-25deg) translateY(-10px);

    }

    50% {

        transform: rotate(15deg) translateY(5px);

    }

    100% {

        transform: rotate(0deg) translateY(0);

    }

}



@keyframes hammerRight {

    0% {

        transform: scaleX(-1) rotate(0deg) translateY(0);

    }

    30% {

        transform: scaleX(-1) rotate(-30deg) translateY(-10px);

    }

    50% {

        transform: scaleX(-1) rotate(20deg) translateY(6px);

    }

    100% {

        transform: scaleX(-1) rotate(0deg) translateY(0);

    }

}









/* =======================================================

   EFECTOS Y ESTADOS (CLASES EN BODY)

======================================================= */

.help{

    transition: transform 2s ease, opacity 2s ease;

}



body.effect-on .hbutton{

    transform: translateY(3em);

    opacity: 0;

}



body.Teffect-on .help{

    transform: translateY(4em);

    opacity: 0;

}



body.Geffect-on .help .fa-gear{

    opacity: 0;

    animation: rotate 1.5s linear infinite;

}



body.T2effect-on-up .tm {

    opacity: 1;

    transform: translateY(-10em);

}



body.Geffect-on-up .tm #noreverse{

    opacity: 1;

    animation: hammerLeft 1.2s ease-in-out infinite;

}



body.Geffect-on-up .tm .htext .fa-flip-horizontal{

    opacity: 1;

    animation: hammerRight 1.2s ease-in-out infinite;



 

}



body.Dnone .help{

    display: none;

}







/* =======================================================
    TEXTO E ICONOS (SIEMPRE EN LÍNEA)
======================================================= */

/* =======================================================
    SISTEMA DE COLUMNAS ADAPTATIVO
======================================================= */
.tm {
    width: 100%;
    max-width: 1200px;
    opacity: 0;
    transition: transform 2s ease, opacity 2s ease;
    /* Evitar que estorbe antes de la animación */
    position: absolute; 
    pointer-events: none;
    margin-top: 2em;
}

body.T2effect-on-up .tm {
    opacity: 1;
    position: relative;
    pointer-events: auto;
    transform: translateY(-10em);
}

.tms{
    width: 100%;
    display: grid;
    padding: 1rem;
    gap: 2em;
}

/* Lógica de columnas solicitada */
@media (min-width: 0px) {
    .tms { grid-template-columns: 1fr; }
}

@media (min-width: 768px) {
    .tms { grid-template-columns: repeat(2, 1fr); }
    /* La tercera opción centrada entre las dos */
    .mtype:nth-child(3) {
        grid-column: span 2;
        justify-self: center;
        width: calc(50% - 1em);
    }
}

@media (min-width: 1024px) {
    .tms { grid-template-columns: repeat(3, 1fr); }
    .mtype:nth-child(3) {
        grid-column: span 1;
        width: 100%;
    }
}