/* =========================================================
   WRATH64 STUDIOS
   MAIN.CSS
   ========================================================= */


/* =========================================================
   FUENTE PERSONALIZADA DE LAS PESTAÑAS

   Cambia el nombre del archivo por el de tu fuente real.
   Ejemplo:

   assets/fonts/WRATH64-TABS.ttf
   ========================================================= */

@font-face {

    font-family: "WrathTabs";

    src:
        url("../fonts/WRATH64-TABS.ttf")
        format("truetype");

    font-weight: normal;
    font-style: normal;

    font-display: swap;

}


/* =========================================================
   VARIABLES
   ========================================================= */

:root {

    --background:
        #000000;

    --outside-background:
        #1d1d1d;

    --terminal-green:
        #00ff66;

    --terminal-green-dim:
        #00d957;

    --terminal-line:
        #00b84d;

    --frame-color:
        #777777;

    --white-line:
        #d5d5d5;

    --nav-background:
        #e7e7e7;

    --nav-border:
        #bcbcbc;

    --nav-text:
        #101010;

}


/* =========================================================
   RESET GENERAL
   ========================================================= */

* {

    box-sizing: border-box;

}


html,
body {

    margin: 0;

    padding: 0;

    width: 100%;

    min-height: 100%;

}


html {

    background:
        var(--outside-background);

}


body {

    min-height: 100vh;

    background:
        var(--outside-background);

    color:
        var(--terminal-green);

    font-family:
        "Courier New",
        Courier,
        monospace;

}


/* =========================================================
   MARCO EXTERIOR
   ========================================================= */

.frame {

    width:
        calc(100% - 28px);

    min-height:
        calc(100vh - 28px);

    margin:
        14px;

    padding:
        55px
        68px
        27px;

    border:
        2px solid
        var(--frame-color);

    background:
        #000000;


    /*
       Estructura vertical:

       línea superior
       contenido central
       línea inferior
       footer
    */

    display: grid;

    grid-template-rows:
        auto
        1fr
        auto
        auto;

}


/* =========================================================
   LINEA SUPERIOR EXTERIOR
   ========================================================= */

.top-line {

    width:
        min(100%, 1650px);

    height:
        2px;

    margin:
        0 auto;

    background:
        var(--white-line);

}


/* =========================================================
   CONTENIDO CENTRAL
   ========================================================= */

.home-layout {

    width:
        min(100%, 1280px);

    margin:
        0 auto;

    padding:
        65px 0;

    display: grid;

    grid-template-columns:
        370px
        2px
        minmax(0, 660px);

    column-gap:
        70px;

    align-items:
        center;

    justify-content:
        center;

}


/* =========================================================
   PANEL IZQUIERDO
   ========================================================= */

.left-panel {

    width:
        100%;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

}


/* =========================================================
   CAJA DEL LOGO

   SOLO LINEA ARRIBA Y ABAJO.
   ========================================================= */

.logo-box {

    width:
        340px;

    height:
        340px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;


    border-top:
        2px solid
        var(--white-line);

    border-bottom:
        2px solid
        var(--white-line);

    border-left:
        none;

    border-right:
        none;


    background:
        #000000;

}


/* =========================================================
   LOGO
   ========================================================= */

.logo-box img {

    display: block;

    width: 92%;
    height: 92%;

    max-width: none;
    max-height: none;

    object-fit: contain;

}


/* =========================================================
   DIVISOR VERTICAL
   ========================================================= */

.divider-vertical {

    width:
        2px;

    height:
        340px;

    justify-self:
        center;

    background:
        var(--white-line);

}


/* =========================================================
   PANEL DERECHO
   ========================================================= */

.right-panel {

    width:
        100%;

    max-width:
        660px;

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    align-items:
        flex-start;

}


/* =========================================================
   NAVEGACION
   ========================================================= */

.terminal-nav {

    display:
        flex;

    align-items:
        stretch;

    width:
        fit-content;

    margin:
        0 0 34px 0;

    padding:
        0;

    border:
        1px solid
        var(--nav-border);

}


/* =========================================================
   PESTAÑAS
   ========================================================= */

.terminal-tab {

    min-width:
        110px;

    height:
        44px;

    margin:
        0;

    padding:
        0 22px;


    display:
        flex;

    justify-content:
        center;

    align-items:
        center;


    border:
        none;

    border-right:
        1px solid
        var(--nav-border);

    border-radius:
        0;


    background:
        var(--nav-background);

    color:
        var(--nav-text);


    font-family:
        "WrathTabs",
        "Courier New",
        monospace;

    font-size:
        16px;

    font-weight:
        normal;

    line-height:
        1;


    cursor:
        pointer;

    white-space:
        nowrap;

    appearance:
        none;

    -webkit-appearance:
        none;


    transition:
        background 0.15s ease,
        color 0.15s ease;

}


.terminal-tab:last-child {

    border-right:
        none;

}


/* =========================================================
   PESTAÑA ACTIVA
   ========================================================= */

.terminal-tab.active {

    background:
        #101010;

    color:
        #ffffff;

}


/* =========================================================
   HOVER
   ========================================================= */

.terminal-tab:not(.active):hover {

    background:
        #ffffff;

    color:
        #000000;

}


.terminal-tab.active:hover {

    background:
        #101010;

    color:
        #ffffff;

}


/* =========================================================
   PREFIJO >

   OCULTO EN TODAS.
   SOLO VISIBLE EN LA ACTIVA.
   ========================================================= */

.nav-prefix {

    display:
        none;

    margin-right:
        2px;

}


.terminal-tab.active .nav-prefix {

    display:
        inline-block;

}


/* =========================================================
   CURSOR _ DE PESTAÑA

   OCULTO EN TODAS.
   SOLO VISIBLE EN ACTIVA.
   ========================================================= */

.nav-cursor {

    display:
        none;

    margin-left:
        1px;

}


.terminal-tab.active .nav-cursor {

    display:
        inline-block;

    animation:
        wrath64-nav-blink
        0.80s
        steps(1, end)
        infinite;

}


/* =========================================================
   PARPADEO DEL _
   ========================================================= */

@keyframes wrath64-nav-blink {

    0%,
    49% {

        opacity:
            1;

    }


    50%,
    100% {

        opacity:
            0;

    }

}


/* =========================================================
   CONTENEDOR GENERAL DE SECCIONES
   ========================================================= */

.terminal-sections {

    position:
        relative;

    width:
        100%;

    min-width:
        0;

}


/* =========================================================
   MUY IMPORTANTE:

   TODAS LAS SECCIONES ESTAN OCULTAS.
   ========================================================= */

.terminal-section {

    display:
        none;

    width:
        100%;

    min-width:
        0;

}


/* =========================================================
   SOLAMENTE LA SECCION ACTIVA SE VE.
   ========================================================= */

.terminal-section.active {

    display:
        block;

}


/* =========================================================
   TERMINALES INTERNAS
   ========================================================= */

.terminal-window {

    width:
        100%;

    max-width:
        660px;

    margin:
        0;

    padding:
        0;

    background:
        transparent;

    color:
        var(--terminal-green);

    font-family:
        "Courier New",
        Courier,
        monospace;

    font-size:
        13px;

    line-height:
        1.65;


    text-shadow:

        0 0 3px
        rgba(0, 255, 102, 0.55),

        0 0 8px
        rgba(0, 255, 102, 0.15);

}


/* =========================================================
   ROOT TERMINAL
   ========================================================= */

#wrath64-root-terminal {

    width:
        100%;

    max-width:
        660px;

}


/* =========================================================
   TYPEWRITER ITEMS
   ========================================================= */

.terminal-window .type-item {

    min-height:
        1em;

}


/* =========================================================
   PARRAFOS
   ========================================================= */

.terminal-window p {

    margin:
        0 0 6px 0;

    padding:
        0;

    color:
        var(--terminal-green);

}


/* =========================================================
   HEADER
   ========================================================= */

.terminal-header {

    width:
        100%;

}


/* =========================================================
   DIVISORES INTERNOS
   ========================================================= */

.terminal-divider {

    width:
        100%;

    max-width:
        100%;

    margin:
        19px 0 27px;

    overflow:
        hidden;

    white-space:
        nowrap;

    color:
        var(--terminal-green);

    opacity:
        0.72;

}


/* =========================================================
   TITULO TERMINAL
   ========================================================= */

.terminal-title {

    margin:
        0 0 22px 0;

    color:
        var(--terminal-green);

    font-size:
        19px;

    font-weight:
        bold;

    letter-spacing:
        0.5px;

}


/* =========================================================
   CONTENIDO TERMINAL
   ========================================================= */

.terminal-content {

    width:
        100%;

    color:
        var(--terminal-green);

}


/* =========================================================
   TEXTO DIM
   ========================================================= */

.terminal-dim {

    opacity:
        0.76;

}


/* =========================================================
   ESPACIADORES INTERNOS
   ========================================================= */

.terminal-space {

    width:
        100%;

    height:
        20px;

}


/* =========================================================
   FOOTER INTERNO DE TERMINAL
   ========================================================= */

.terminal-footer {

    width:
        100%;

    margin:
        0;

}


/* =========================================================
   COMANDO FINAL
   ========================================================= */

.terminal-command {

    display:
        flex;

    align-items:
        center;

    min-height:
        18px;

    margin:
        0;

}


/* =========================================================
   CURSOR TYPEWRITER
   ========================================================= */

.typing-cursor,
.terminal-cursor {

    display:
        inline-block;

    width:
        8px;

    height:
        15px;

    margin-left:
        3px;


    background:
        var(--terminal-green);


    vertical-align:
        -2px;


    box-shadow:

        0 0 3px
        rgba(0, 255, 102, 0.90),

        0 0 7px
        rgba(0, 255, 102, 0.30);


    animation:
        wrath64-terminal-blink
        0.75s
        steps(1)
        infinite;

}


/* =========================================================
   PARPADEO CURSOR TERMINAL
   ========================================================= */

@keyframes wrath64-terminal-blink {

    0%,
    49% {

        opacity:
            1;

    }


    50%,
    100% {

        opacity:
            0;

    }

}


/* =========================================================
   CURSOR FINAL
   ========================================================= */

.final-cursor {

    display:
        none;

}


/* =========================================================
   LINEA INFERIOR EXTERIOR
   ========================================================= */

.bottom-line {

    width:
        min(100%, 1650px);

    height:
        2px;

    margin:
        0 auto 25px;

    background:
        var(--white-line);

}


/* =========================================================
   FOOTER EXTERIOR
   ========================================================= */

.site-footer {

    width:
        min(100%, 1650px);

    margin:
        0 auto;

    text-align:
        right;


    color:
        #f1f1f1;


    font-family:
        "Courier New",
        Courier,
        monospace;

    font-size:
        9px;

    line-height:
        1.3;

}


/* =========================================================
   ESCRITORIO FULL HD
   1600px EN ADELANTE
   ========================================================= */

@media (min-width: 1600px) {

    .home-layout {

        width:
            min(100%, 1280px);

        grid-template-columns:
            370px
            2px
            660px;

        column-gap:
            70px;

        padding:
            65px 0;

    }


    .logo-box {

        width:
            340px;

        height:
            340px;

    }


    .divider-vertical {

        height:
            340px;

    }


    .right-panel {

        max-width:
            660px;

    }


    .terminal-window {

        max-width:
            660px;

    }

}


/* =========================================================
   LAPTOP
   ========================================================= */

@media (max-width: 1399px) {

    .frame {

        padding:
            42px
            40px
            22px;

    }


    .home-layout {

        width:
            min(100%, 1120px);

        grid-template-columns:
            310px
            2px
            minmax(0, 610px);

        column-gap:
            42px;

        padding:
            45px 0;

    }


    .logo-box {

        width:
            280px;

        height:
            280px;

    }


    .divider-vertical {

        height:
            280px;

    }


    .terminal-tab {

        min-width:
            95px;

        height:
            42px;

        padding:
            0 17px;

        font-size:
            15px;

    }


    .terminal-window {

        font-size:
            12px;

    }


    .terminal-title {

        font-size:
            18px;

    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .frame {

        display:
            block;

    }


    .top-line {

        margin-bottom:
            45px;

    }


    .home-layout {

        display:
            flex;

        flex-direction:
            column;

        width:
            100%;

        padding:
            0 0 45px;

        gap:
            45px;

    }


    .divider-vertical {

        display:
            none;

    }


    .right-panel {

        width:
            100%;

        max-width:
            720px;

    }


    .terminal-nav {

        width:
            100%;

    }


    .terminal-tab {

        flex:
            1;

        min-width:
            0;

    }


    .terminal-window {

        max-width:
            100%;

    }

}


/* =========================================================
   MOVIL
   ========================================================= */

@media (max-width: 767px) {

    .frame {

        width:
            calc(100% - 16px);

        min-height:
            calc(100vh - 16px);

        margin:
            8px;

        padding:
            24px
            17px
            17px;

    }


    .top-line {

        margin-bottom:
            30px;

    }


    .home-layout {

        gap:
            32px;

        padding-bottom:
            32px;

    }


    .logo-box {

        width:
            220px;

        height:
            220px;

    }


    .logo-box img {

        width:
            64%;

    }


    .terminal-nav {

        display:
            grid;

        grid-template-columns:
            repeat(2, 1fr);

        width:
            100%;

    }


    .terminal-tab {

        width:
            100%;

        min-width:
            0;

        height:
            42px;

        padding:
            0 8px;

        font-size:
            14px;

        border-bottom:
            1px solid
            var(--nav-border);

    }


    .terminal-window {

        font-size:
            11px;

        line-height:
            1.6;

    }


    .terminal-title {

        font-size:
            16px;

    }


    .terminal-divider {

        margin:
            16px 0 22px;

    }


    .typing-cursor,
    .terminal-cursor {

        width:
            7px;

        height:
            13px;

    }


    .bottom-line {

        margin-bottom:
            18px;

    }


    .site-footer {

        text-align:
            center;

        font-size:
            8px;

    }

}


/* =========================================================
   FOOTER POLICIES
   GLOBAL — DESKTOP / TABLET / MOBILE
   ========================================================= */

.site-footer {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    flex-wrap:
        wrap;

    gap:
        7px;

}


.site-footer-policy,
.site-footer-policy:link,
.site-footer-policy:visited {

    color:
        #00ff66;

    text-decoration:
        none;

    text-shadow:
        0 0 4px
        rgba(0, 255, 102, 0.55);

}


.site-footer-policy:hover {

    color:
        #baffcf;

    text-shadow:
        0 0 3px
        #00ff66,

        0 0 8px
        rgba(0, 255, 102, 0.85);

}


.site-footer-policy:focus-visible {

    outline:
        1px dotted
        #00ff66;

    outline-offset:
        3px;

}


.site-footer-separator {

    color:
        #4f6657;

}


/* =========================================================
   FOOTER — MOBILE ALIGNMENT
   ========================================================= */

@media (max-width: 767px) {

    .site-footer {

        justify-content:
            center;

    }

}