/* =========================================================
   OZKAR MIKE — BASE GENERAL
   FONDO / TIPOGRAFÍA / MENÚ / LOGO / FOOTER
========================================================= */

:root{
    --bg:#000000;
    --text:rgba(255,255,255,.90);
    --muted:rgba(255,255,255,.40);
    --line:rgba(255,255,255,.18);
    --page-x:clamp(24px,4vw,72px);
}

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

html,
body{
    width:100%;
    min-height:100%;
    background:#000;
}

body{
    color:var(--text);
    font-family:Arial, Helvetica, sans-serif;
    overflow-x:hidden;
}



/* =========================================================
   FONDO CON PROFUNDIDAD Y TEXTURA
========================================================= */

.site-shell{
    position:relative;
    width:100%;
    min-height:100svh;
    padding:0 var(--page-x);
    display:flex;
    flex-direction:column;
    isolation:isolate;

    background:
        radial-gradient(circle at 50% 48%,
            #161616 0%,
            #0a0a0a 43%,
            #000000 100%);
}

.site-shell::before{
    content:"";
    position:fixed;
    left:50%;
    top:50%;
    width:min(70vw,760px);
    height:min(70vw,760px);
    transform:translate(-50%,-50%);
    pointer-events:none;
    z-index:-2;

    background:
        radial-gradient(circle,
            rgba(255,255,255,.075) 0%,
            rgba(255,255,255,.022) 38%,
            transparent 72%);
    filter:blur(24px);
}

.site-shell::after{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:60;
    opacity:.055;

    background-image:
        radial-gradient(rgba(255,255,255,.45) .4px, transparent .7px),
        radial-gradient(rgba(255,255,255,.25) .35px, transparent .65px);

    background-size:4px 4px,7px 7px;
    background-position:0 0,2px 3px;
    mix-blend-mode:soft-light;
}

/* =========================================================
   MARCA VERTICAL
========================================================= */

.brand-vertical{
    position:fixed;
    left:16px;
    top:50%;
    z-index:70;

    transform:translateY(-50%) rotate(-90deg);

    color:rgba(255,255,255,.40);
    font-family:"Courier New", monospace;
    font-size:10px;
    letter-spacing:3px;
    text-transform:uppercase;
    white-space:nowrap;

    pointer-events:none;
}

/* =========================================================
   ESTRUCTURA
========================================================= */

.site-header{
    height:82px;
    flex:0 0 auto;
}

.page-content{
    flex:1 0 auto;
    width:100%;
}

.home-screen{
    display:flex;
    align-items:center;
    justify-content:center;
    
}

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

.logo-container{
    width:min(55vw,520px);
    display:flex;
    align-items:center;
    justify-content:center;
    transform-origin:center;
}

.logo-container img{
    display:block;
    width:200px;
    max-width:100%;
    height:auto;
    user-select:none;
    -webkit-user-drag:none;
}

/* Movimiento sincronizado con el sonido */
.logo-container.beating{
    animation:logoHeartbeat 1.65s ease-in-out infinite;
}

.logo-container.beating img{
    animation:logoGlow 1.65s ease-in-out infinite;
}

@keyframes logoHeartbeat{
    0%,100%{transform:scale(1)}
    7%{transform:scale(1.035)}
    12%{transform:scale(1)}
    18%{transform:scale(1.055)}
    26%{transform:scale(1)}
}

@keyframes logoGlow{
    0%,100%{
        filter:drop-shadow(0 0 0 rgba(255,255,255,0));
    }
    7%{
        filter:drop-shadow(0 0 5px rgba(255,255,255,.13));
    }
    18%{
        filter:drop-shadow(0 0 10px rgba(255,255,255,.18));
    }
    26%{
        filter:drop-shadow(0 0 0 rgba(255,255,255,0));
    }
}

/* =========================================================
   BOTÓN MENÚ
========================================================= */

.menu-toggle{
    position:fixed;
    top:28px;
    right:var(--page-x);

    width:42px;
    height:42px;

    border:0;
    background:transparent;
    color:#fff;
    cursor:pointer;
    z-index:100;
}

.menu-toggle span{
    position:absolute;
    left:50%;

    width:26px;
    height:1px;

    background:currentColor;
    transform-origin:center;

    transition:
        transform .38s cubic-bezier(.22,1,.36,1),
        opacity .20s ease;
}

.line-1{transform:translate(-50%,-7px)}
.line-2{transform:translate(-50%,0)}
.line-3{transform:translate(-50%,7px)}

.menu-toggle.active .line-1{
    transform:translate(-50%,0) rotate(45deg);
}

.menu-toggle.active .line-2{
    opacity:0;
}

.menu-toggle.active .line-3{
    transform:translate(-50%,0) rotate(-45deg);
}

/* =========================================================
   MENÚ LATERAL
========================================================= */

.menu-overlay{
    position:fixed;
    inset:0;
    z-index:80;

    background:rgba(0,0,0,.52);
    opacity:0;
    visibility:hidden;

    transition:
        opacity .35s ease,
        visibility .35s ease;

    backdrop-filter:blur(2px);
}

.menu-overlay.open{
    opacity:1;
    visibility:visible;
}

.side-menu{
    position:fixed;
    top:0;
    right:0;

    width:min(420px,88vw);
    height:100svh;

    z-index:90;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:110px 52px 70px;

    background:
        linear-gradient(180deg,
            rgba(14,14,14,.99),
            rgba(0,0,0,.99));

    border-left:1px solid rgba(255,255,255,.10);

    box-shadow:
        -24px 0 70px rgba(0,0,0,.48);

    transform:translateX(105%);

    transition:
        transform .55s cubic-bezier(.77,0,.18,1);
}

.side-menu.open{
    transform:translateX(0);
}

.menu-label{
    margin-bottom:44px;

    color:rgba(255,255,255,.38);
    font-family:"Courier New", monospace;
    font-size:9px;
    letter-spacing:2.5px;
}

.menu-nav{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.menu-nav a{
    position:relative;

    color:#fff;
    text-decoration:none;

    font-size:clamp(28px,4vw,46px);
    font-weight:700;
    letter-spacing:-1px;

    padding-bottom:9px;

    transition:
        opacity .25s ease,
        transform .35s cubic-bezier(.2,.8,.2,1);
}

.menu-nav a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;

    width:0;
    height:1px;

    background:#fff;
    transition:width .35s ease;
}

.menu-nav a:hover{
    transform:translateX(8px);
}

.menu-nav a:hover::after{
    width:44px;
}

.menu-footer{
    margin-top:auto;

    color:rgba(255,255,255,.32);

    font-family:"Courier New", monospace;
    font-size:8px;
    line-height:1.7;
    letter-spacing:1.7px;
}

/* =========================================================
   BOTÓN DE SONIDO — LATERAL
========================================================= */

.sound-toggle{
    position:fixed;
    right:var(--page-x);
    bottom:90px;

    width:52px;
    height:52px;

    border:1px solid rgba(255,255,255,.26);
    border-radius:50%;

    background:rgba(8,8,8,.72);
    color:rgba(255,255,255,.72);

    display:grid;
    place-items:center;

    cursor:pointer;
    z-index:70;

    backdrop-filter:blur(8px);

    transition:
        color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        transform .2s ease;
}

.sound-toggle:hover{
    color:#fff;
    border-color:rgba(255,255,255,.50);
    transform:scale(1.04);
}

.sound-toggle svg{
    width:34px;
    height:24px;

    fill:none;
    stroke:currentColor;
    stroke-width:1.65;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.heart-on{
    display:none;
}

.sound-toggle.active .heart-off{
    display:none;
}

.sound-toggle.active .heart-on{
    display:block;
}

/* =========================================================
   FOOTER — ESTRUCTURA DEFINIDA
========================================================= */

.site-footer{
    width:100%;
    flex:0 0 auto;

    margin-top:42px;
    padding-bottom:26px;

    position:relative;
    z-index:2;
}

.footer-line{
    width:100%;
    height:1px;

    background:var(--line);
}

.footer-row{
    width:100%;

    margin-top:14px;

    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;

    column-gap:24px;

    min-height:24px;
}

.footer-side,
.developer-footer{
    color:var(--muted);

    font-family:"Courier New", monospace;
    font-size:8px;
    line-height:1;
    font-weight:700;
    letter-spacing:1.6px;
    text-transform:uppercase;

    white-space:nowrap;
}

.footer-left{
    text-align:left;
}

.footer-right{
    text-align:right;
}

.developer-footer{
    justify-self:center;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:9px;
}

.developer-logo{
    color:rgba(255,255,255,.72);

    font-family:Arial, Helvetica, sans-serif;
    font-size:10px;
    font-weight:800;
    letter-spacing:.12em;
}

/* =========================================================
   MÓVIL
========================================================= */

@media(max-width:800px){

    :root{
        --page-x:22px;
    }

    .site-header{
        height:72px;
    }

    .home-screen{
        
    }

    .brand-vertical{
        left:-25px;
        font-size:8px;
        letter-spacing:2.5px;
    }

    .menu-toggle{
        top:20px;
        width:38px;
        height:38px;
    }

    .menu-toggle span{
        width:23px;
    }

    .logo-container{
        width:72vw;
        max-width:390px;
    }

    .logo-container img{
        width:170px;
    }

    .side-menu{
        padding:100px 34px 45px;
    }

    .menu-nav{
        gap:16px;
    }

    .menu-nav a{
        font-size:clamp(26px,8vw,38px);
    }

    .sound-toggle{
        right:14px;
        bottom:max(80px,env(safe-area-inset-bottom));

        width:48px;
        height:48px;
    }

    .footer-row{
        column-gap:10px;
        margin-top:12px;
    }

    .footer-side,
    .developer-footer{
        font-size:7px;
        letter-spacing:1px;
    }

    .developer-logo{
        font-size:9px;
    }
}

@media(max-width:480px){

    .side-menu{
        width:100vw;
        padding:96px 28px 34px;
    }

    .footer-row{
        column-gap:6px;
    }

    .footer-side,
    .developer-footer{
        font-size:6px;
        letter-spacing:.08em;
    }
}


/* =========================================================
   OZKAR MIKE — INFO PAGE
   SOLO CONTENIDO CENTRAL / BOTONES / PANELES
   La base general, menú, sonido y footer se mantienen.
========================================================= */

.info-page{
    display:flex;
    align-items:center;
    min-height:0;
    padding:28px 0;
}

.info-shell{
    width:min(1100px, 100%);
    margin:0 auto;
    display:grid;
    grid-template-columns:285px minmax(0, 1fr);
    gap:clamp(64px, 9vw, 150px);
    align-items:center;
}

.info-navigation{
    width:100%;
}

.info-kicker,
.panel-code,
.code-number,
.status-block{
    font-family:"Courier New", monospace;
    text-transform:uppercase;
}

.info-kicker{
    display:block;
    margin-bottom:22px;
    color:rgba(255,255,255,.38);
    font-size:8px;
    letter-spacing:2.4px;
}

.info-tab{
    position:relative;
    width:100%;
    min-height:58px;
    margin-bottom:8px;
    padding:0 48px 0 18px;

    display:flex;
    align-items:center;

    border:1px solid rgba(255,255,255,.18);
    border-radius:0;
    background:transparent;
    color:rgba(255,255,255,.86);

    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    font-weight:700;
    letter-spacing:.01em;
    text-align:left;

    cursor:pointer;

    transition:
        background .22s ease,
        border-color .22s ease,
        color .22s ease;
}

.info-tab::after{
    content:"↗";
    position:absolute;
    right:20px;
    top:50%;
    transform:translateY(-50%);
    opacity:0;
    font-size:13px;
    transition:opacity .22s ease;
}

.info-tab:hover,
.info-tab:focus-visible{
    border-color:rgba(255,255,255,.42);
    outline:none;
}

.info-tab:hover::after,
.info-tab:focus-visible::after{
    opacity:.65;
}

.info-tab.active{
    background:rgba(255,255,255,.12);
    border-color:rgba(255,255,255,.12);
    color:#fff;
}

.info-tab.active::after{
    opacity:1;
}

.info-content{
    position:relative;
    width:100%;
    min-height:420px;
}

.info-panel{
    display:none;
    animation:infoReveal .35s ease both;
}

.info-panel.active{
    display:block;
}

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

.panel-code{
    display:block;
    margin-bottom:24px;
    color:rgba(255,255,255,.35);
    font-size:8px;
    letter-spacing:2.7px;
}

.info-title{
    margin:0 0 28px;
    color:#fff;

    font-family:Arial, Helvetica, sans-serif;
    font-size:clamp(58px, 6vw, 92px);
    font-weight:900;
    line-height:.9;
    letter-spacing:-.055em;
    text-transform:uppercase;
}

.info-text{
    max-width:720px;
    color:rgba(255,255,255,.62);
    font-size:12px;
    line-height:1.7;
}

.info-text p{
    margin-bottom:20px;
}

.info-text strong{
    color:rgba(255,255,255,.92);
    font-weight:700;
}

.info-quote{
    position:relative;
    margin-top:34px;
    padding-left:20px;
    color:rgba(255,255,255,.92);

    font-size:16px;
    font-style:italic;
    line-height:1.35;
}

.info-quote::before{
    content:"";
    position:absolute;
    left:0;
    top:2px;
    bottom:2px;
    width:1px;
    background:linear-gradient(
        to bottom,
        rgba(255,255,255,.85),
        rgba(255,255,255,.10)
    );
}

.code-list{
    width:100%;
    max-width:760px;
    list-style:none;
}

.code-list li{
    display:grid;
    grid-template-columns:42px minmax(0,1fr);
    gap:16px;
    padding:13px 0;

    border-bottom:1px solid rgba(255,255,255,.11);
    color:rgba(255,255,255,.65);

    font-size:14px;
    line-height:1.55;
}

.code-number{
    color:rgba(255,255,255,.36);
    font-size:9px;
    letter-spacing:1.5px;
}

.status-block{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:32px;

    color:rgba(255,255,255,.42);
    font-size:9px;
    letter-spacing:1.8px;
}

.info-page .status-dot{
    width:6px;
    height:6px;
    flex:0 0 auto;

    border-radius:50%;
    background:#9d4edd;
    box-shadow:0 0 12px rgba(157,78,221,.8);

    animation:infoDot 1.65s ease-in-out infinite;
}

@keyframes infoDot{
    0%,100%{
        transform:scale(.8);
        opacity:.5;
    }
    50%{
        transform:scale(1.2);
        opacity:1;
    }
}

@media(max-width:900px){
    .info-page{
        align-items:flex-start;
        padding:36px 0;
    }

    .info-shell{
        grid-template-columns:1fr;
        gap:42px;
        max-width:720px;
    }

    .info-content{
        min-height:0;
    }

    .info-title{
        font-size:clamp(52px, 13vw, 76px);
    }
}

@media(max-width:800px){
    .info-page{
        padding-top:22px;
    }

    .info-tab{
        min-height:54px;
        font-size:14px;
    }

    .info-text{
        font-size:14px;
    }
}

@media(max-width:480px){
    .info-page{
        padding-top:14px;
    }

    .info-kicker{
        font-size:7px;
        letter-spacing:2px;
    }

    .info-tab{
        min-height:51px;
        padding-left:16px;
        font-size:13px;
    }

    .info-title{
        margin-bottom:24px;
    }

    .info-quote{
        margin-top:30px;
        font-size:15px;
    }

    .code-list li{
        grid-template-columns:34px minmax(0,1fr);
        gap:10px;
        font-size:13px;
    }

    .status-block{
        font-size:8px;
        letter-spacing:1.2px;
    }
}


/* =========================================================
   CONTACT
   COMPOSICIÓN ESPECÍFICA DE LA PÁGINA
========================================================= */

.contact-page{
    position:relative;

    width:100%;
    min-height:79svh;

    display:flex;
    flex-direction:column;

    overflow:hidden;

    padding:
        clamp(95px, 11vh, 145px)
        max(6vw, 80px)
        24px;
}


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

.contact-shell{
    position:relative;
    z-index:2;

    width:100%;
    max-width:1100px;

    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
       

    display:grid;

    grid-template-columns:
        minmax(260px, 360px)
        minmax(430px, 1fr);

    column-gap:
        clamp(90px, 13vw, 210px);

    align-items:center;
}


/* =========================================================
   COLUMNA IZQUIERDA
========================================================= */

.contact-intro{
    width:100%;
    max-width:370px;
}


.contact-kicker{
    display:block;

    margin-bottom:22px;

    font-family:
        "Courier New",
        monospace;

    font-size:8px;

    font-weight:700;

    letter-spacing:3px;

    color:
        rgba(255,255,255,.42);
}


.contact-intro h1{
    margin:0 0 26px;

    color:#fff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        clamp(52px, 5vw, 78px);

    font-weight:300;

    line-height:.95;

    letter-spacing:-4px;
}


.contact-intro h1 strong{
    font-weight:800;
}


.contact-intro p{
    width:100%;
    max-width:330px;

    margin:0;

    color:
        rgba(255,255,255,.55);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:13px;

    line-height:1.8;
}


.contact-status{
    display:flex;
    align-items:center;

    gap:10px;

    margin-top:31px;

    font-family:
        "Courier New",
        monospace;

    font-size:8px;

    font-weight:700;

    letter-spacing:2.8px;

    color:
        rgba(255,255,255,.36);
}


.status-dot{
    flex:0 0 auto;

    width:5px;
    height:5px;

    border-radius:50%;

    background:#9d4edd;

    box-shadow:
        0 0 9px
        rgba(157,78,221,.8);
}


/* =========================================================
   FORMULARIO
========================================================= */

.contact-form{
    position:relative;

    width:100%;

    padding:
        38px
        40px
        39px;

    border:
        1px solid
        rgba(255,255,255,.12);

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.008)
        );

    box-shadow:
        0 24px 70px
        rgba(0,0,0,.22);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);
}


.contact-form::before{
    content:"CONTACT / 01";

    position:absolute;

    top:17px;
    right:18px;

    font-family:
        "Courier New",
        monospace;

    font-size:7px;

    font-weight:700;

    letter-spacing:2px;

    color:
        rgba(255,255,255,.23);
}


/* =========================================================
   FILAS
========================================================= */

.form-row{
    display:grid;

    grid-template-columns:
        1fr
        1fr;

    gap:20px;
}


.form-field{
    margin-bottom:18px;
}


.form-field-full{
    width:100%;
}


.form-field-message{
    margin-bottom:22px;
}


.form-field label{
    display:block;

    margin-bottom:9px;

    font-family:
        "Courier New",
        monospace;

    font-size:7px;

    font-weight:700;

    letter-spacing:2px;

    color:
        rgba(255,255,255,.42);
}


.form-field input,
.form-field textarea{
    display:block;

    width:100%;

    border:0;
    border-bottom:
        1px solid
        rgba(255,255,255,.18);

    border-radius:0;

    outline:none;

    background:transparent;

    color:#fff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:13px;

    transition:
        border-color .25s ease;
}


.form-field input{
    height:34px;
}


.form-field textarea{
    height:84px;

    padding:8px 0;

    resize:none;

    line-height:1.5;
}


.form-field input::placeholder,
.form-field textarea::placeholder{
    color:
        rgba(255,255,255,.24);
}


.form-field input:focus,
.form-field textarea:focus{
    border-bottom-color:
        rgba(255,255,255,.65);
}


/* =========================================================
   PARTE INFERIOR DEL FORMULARIO
========================================================= */

.contact-form-bottom{
    display:flex;

    align-items:center;

    justify-content:
        space-between;

    gap:25px;
}


.form-note{
    font-family:
        "Courier New",
        monospace;

    font-size:7px;

    font-weight:700;

    line-height:1.7;

    letter-spacing:2px;

    color:
        rgba(255,255,255,.25);
}


.contact-submit{
    min-width:160px;
    height:44px;
    margin-top: 10px;
    display:flex;

    align-items:center;

    justify-content:
        space-between;

    padding:
        0
        17px;

    border:
        1px solid
        rgba(255,255,255,.25);

    background:
        rgba(255,255,255,.018);

    color:
        rgba(255,255,255,.8);

    cursor:pointer;

    font-family:
        "Courier New",
        monospace;

    font-size:8px;

    font-weight:700;

    letter-spacing:1.8px;

    transition:
        background .25s ease,
        border-color .25s ease,
        transform .25s ease;
}


.contact-submit:hover{
    background:
        rgba(255,255,255,.06);

    border-color:
        rgba(255,255,255,.55);

    transform:
        translateY(-1px);
}


.contact-submit i{
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:18px;

    font-style:normal;

    font-weight:300;
}


/* =========================================================
   FOOTER
   MISMO ANCHO HORIZONTAL EN TODO EL PROYECTO
========================================================= */

.contact-page > .archive-footer{
    position:relative;

    z-index:2;

    width:100%;

    margin-top:
        clamp(50px, 7vh, 72px);

    padding-top:11px;

    border-top:
        1px solid
        rgba(255,255,255,.16);

    display:grid;

    grid-template-columns:
        1fr
        1fr;

    align-items:center;

    font-family:
        "Courier New",
        monospace;

    font-size:7px;

    font-weight:700;

    letter-spacing:2px;

    color:
        rgba(255,255,255,.34);
}


.contact-page > .archive-footer span:last-child{
    text-align:right;
}


/* =========================================================
   DEVELOPED BY
   SIEMPRE DEBAJO DE LA LÍNEA
========================================================= */

.contact-page > .developer-footer{
    position:relative;

    z-index:2;

    width:100%;

    margin-top:15px;

    padding-bottom:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;
}


.contact-page .developer-label{
    font-family:
        "Courier New",
        monospace;

    font-size:7px;

    font-weight:700;

    letter-spacing:1.5px;

    color:
        rgba(255,255,255,.3);
}


.contact-page .developer-logo{
    display:block;

    width:45px;

    height:auto;

    object-fit:contain;
}


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

@media(max-width:1100px){

    .contact-page{
        padding-left:
            max(5vw, 45px);

        padding-right:
            max(5vw, 45px);
    }


    .contact-shell{
        max-width:900px;

        column-gap:
            clamp(45px, 7vw, 90px);

        grid-template-columns:
            minmax(230px, .8fr)
            minmax(400px, 1.2fr);
    }

}


/* =========================================================
   RESPONSIVE MOBILE
========================================================= */

@media(max-width:800px){

    .contact-page{
        min-height:100svh;

        height:auto;

        overflow:visible;

        padding:
            110px
            22px
            24px;
    }


    .contact-shell{
        width:100%;

        display:flex;

        flex-direction:column;

        align-items:stretch;

        gap:48px;

        margin:0;
    }


    .contact-intro{
        max-width:100%;
    }


    .contact-intro h1{
        font-size:
            clamp(48px, 15vw, 68px);
    }


    .contact-intro p{
        max-width:390px;

        font-size:14px;
    }


    .contact-form{
        padding:
            34px
            25px;
    }


    .contact-page > .archive-footer{
        margin-top:48px;

        font-size:6px;

        letter-spacing:1.5px;
    }


    .contact-page > .developer-footer{
        padding-bottom:85px;
    }

}


@media(max-width:520px){

    .contact-page{
        padding-left:18px;
        padding-right:18px;
    }


    .form-row{
        grid-template-columns:1fr;

        gap:0;
    }


    .contact-form{
        padding:
            32px
            20px
            28px;
    }


    .contact-form-bottom{
        flex-direction:column;

        align-items:stretch;

        gap:22px;
    }


    .contact-submit{
        width:100%;
    }


    .contact-page > .archive-footer{
        grid-template-columns:1fr;

        gap:8px;
    }


    .contact-page > .archive-footer span:last-child{
        text-align:left;
    }

}


/* =========================================================
   OZKAR MIKE — WORK
   GALERÍA DE PROYECTOS
   ========================================================= */

.work-page{
    width:100%;
    min-height:100%;
    padding-bottom:80px;
    max-width: 80%;
    margin: 0 auto;
}

.work-header{
    width:100%;
    min-height:clamp(520px,72vh,820px);

    display:flex;
    flex-direction:column;
    justify-content:center;
}

.work-eyebrow{
    margin-bottom:28px;

    color:var(--muted);

    font-family:"Courier New", monospace;
    font-size:9px;
    font-weight:700;
    letter-spacing:2.5px;
    text-transform:uppercase;
}

.work-title{
    color:#fff;

    font-size:clamp(96px,18vw,260px);
    font-weight:900;
    line-height:.76;
    letter-spacing:-.09em;

    text-transform:uppercase;
}

.work-title span{
    color:rgba(255,255,255,.28);
}

.work-intro{
    margin-top:48px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;

    color:var(--muted);

    font-family:"Courier New", monospace;
    font-size:8px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
}


/* =========================================================
   GALERÍA
   ========================================================= */

.work-gallery{
    width:100%;

    display:grid;
    grid-template-columns:repeat(8,minmax(0,1fr));
    grid-auto-flow:dense;

    gap:clamp(12px,1.8vw,28px);

    padding-bottom:clamp(60px,10vh,140px);
}


/* =========================================================
   TARJETA
   ========================================================= */

.work-card{
    position:relative;

    display:block;

    overflow:hidden;

    background:#0d0d0f00;

    cursor:pointer;

    border:0px solid rgba(255,255,255,.08);

    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        border-color .35s ease,
        box-shadow .45s ease;
}

.work-card:hover{
    transform:translateY(-5px);

    border-color:rgba(255,255,255,.28);

}


/* =========================================================
   IMAGEN
   ========================================================= */

.work-card-media{
    position:absolute;
    inset:0;

    overflow:hidden;

    background:#15151800;
}

.work-card-media img,
.work-card-media video{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    filter:brightness(.82);

    transform:scale(1.01);

    transition:
        transform .8s cubic-bezier(.2,.7,0,1),
        filter .45s ease;
}

.work-card:hover .work-card-media img,
.work-card:hover .work-card-media video{
    transform:scale(1.07);

    filter:brightness(1);
}


/* CAPA */

.work-card-media::after{
    content:"";

    position:absolute;
    inset:0;

    
    pointer-events:none;

    transition:opacity .4s ease;
}


/* =========================================================
   INFORMACIÓN DEL PROYECTO
   ========================================================= */

.work-card-info{
    position:absolute;

    inset:auto 0 0 0;

    z-index:2;

    padding:clamp(18px,2vw,32px);

    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;

    color:#fff;
}

.work-card-number{
    position:absolute;

    top:20px;
    left:22px;

    color:rgba(255,255,255,.5);

    font-family:"Courier New", monospace;
    font-size:8px;
    font-weight:700;
    letter-spacing:2px;
}

.work-card-title{
    margin:0;

    font-size:clamp(20px,2.4vw,40px);
    font-weight:800;
    line-height:.95;
    letter-spacing:-.045em;

    text-transform:uppercase;
}

.work-card-category{
    margin-top:8px;

    color:rgba(255,255,255,.55);

    font-family:"Courier New", monospace;
    font-size:8px;
    font-weight:700;
    letter-spacing:1.8px;
    text-transform:uppercase;
}

.work-card-open{
    flex:0 0 auto;

    color:rgba(255,255,255,.7);

    font-family:"Courier New", monospace;
    font-size:8px;
    font-weight:700;
    letter-spacing:1.6px;

    transition:
        transform .3s ease,
        color .3s ease;
}

.work-card:hover .work-card-open{
    color:#fff;

    transform:translate(4px,-4px);
}


/* =========================================================
   TAMAÑOS DE LA GALERÍA — TODOS IGUALES
   ========================================================= */

.work-card-hero,
.work-card-tall,
.work-card-square,
.work-card-wide,
.work-card-medium,
.work-card-large,
.work-card-end{
    grid-column:span 4;
    aspect-ratio:1 / 1;
    margin:0;
}

@media(max-width:900px){

    .work-card-hero,
    .work-card-tall,
    .work-card-square,
    .work-card-wide,
    .work-card-medium,
    .work-card-large,
    .work-card-end{
        grid-column:span 4;
        aspect-ratio:1 / 1;
        margin:0;
    }
}

@media(max-width:600px){

    .work-card-hero,
    .work-card-tall,
    .work-card-square,
    .work-card-wide,
    .work-card-medium,
    .work-card-large,
    .work-card-end{
        grid-column:1;
        aspect-ratio:1 / 1;
        margin:0;
    }
}


/* =========================================================
   FOOTER DE WORK
   Usa exactamente la estructura general existente
   ========================================================= */

.work-page + .site-footer{
    margin-top:0;
}


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

@media(max-width:900px){

    .work-header{
        min-height:60vh;
    }

    .work-gallery{
        grid-template-columns:repeat(8,minmax(0,1fr));
    }

    .work-card-hero{
        grid-column:span 5;
    }

    .work-card-tall{
        grid-column:span 3;

        margin-top:60px;
    }

    .work-card-square{
        grid-column:span 4;
    }

    .work-card-wide{
        grid-column:span 8;
    }

    .work-card-medium{
        grid-column:span 4;

        margin-left:0;
    }

    .work-card-large{
        grid-column:span 4;

        margin-top:0;
    }

    .work-card-end{
        grid-column:span 8;

        margin-left:0;
    }
}


/* =========================================================
   MÓVIL
   ========================================================= */

@media(max-width:600px){

    .work-header{
        min-height:52svh;

        justify-content:flex-end;

        padding-bottom:55px;
    }

    .work-eyebrow{
        margin-bottom:20px;

        font-size:7px;
    }

    .work-title{
        font-size:clamp(70px,25vw,120px);
    }

    .work-intro{
        margin-top:32px;

        font-size:7px;
        line-height:1.6;
    }

    .work-intro span:last-child{
        display:none;
    }

    .work-gallery{
        grid-template-columns:1fr;

        gap:16px;
    }

    .work-card,
    .work-card-hero,
    .work-card-tall,
    .work-card-square,
    .work-card-wide,
    .work-card-medium,
    .work-card-large,
    .work-card-end{
        grid-column:1;

        margin:0;
    }

    .work-card-hero,
    .work-card-wide,
    .work-card-large,
    .work-card-end{
        aspect-ratio:4 / 3;
    }

    .work-card-tall{
        aspect-ratio:4 / 5;
    }

    .work-card-square{
        aspect-ratio:1 / 1;
    }

    .work-card-medium{
        aspect-ratio:4 / 3;
    }

    .work-card-info{
        padding:20px;
    }

    .work-card-number{
        top:16px;
        left:18px;
    }

    .work-card-open{
        font-size:7px;
    }
}

/* =========================================================
   OZKAR MIKE — NEWS
========================================================= */

.news-page{
    position:relative;
    width:100%;
    padding-bottom:80px;
}


/* CABECERA */

.news-header{
    width:100%;
    max-width:1100px;
    margin:0 auto;

    min-height:65vh;

    display:flex;
    flex-direction:column;
    justify-content:flex-end;

    padding:110px 0 70px;
}

.news-header-top,
.news-header-bottom{
    display:flex;
    justify-content:space-between;
    gap:20px;

    font-family:"Courier New", monospace;
    font-size:8px;
    font-weight:700;
    letter-spacing:2px;

    color:rgba(255,255,255,.38);
}

.news-header h1{
    margin:38px 0;

    font-size:clamp(100px,19vw,250px);
    line-height:.72;
    letter-spacing:-.09em;
    font-weight:900;

    color:#fff;
}

.news-header h1 span{
    color:rgba(255,255,255,.25);
}


/* ARTÍCULO PRINCIPAL */

.featured-story{
    width:100%;
    max-width:1100px;
    margin:0 auto;

    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:clamp(35px,7vw,100px);

    align-items:end;

    padding-bottom:clamp(70px,12vh,150px);
}

.featured-image{
    display:block;
    aspect-ratio:4 / 5;

    overflow:hidden;
    background:#111;
}

.featured-image img{
    width:100%;
    height:100%;
    display:block;

    object-fit:cover;

    filter:brightness(.82);

    transition:
        transform .7s ease,
        filter .4s ease;
}

.featured-image:hover img{
    transform:scale(1.04);
    filter:brightness(1);
}

.featured-content{
    padding-bottom:25px;
}

.article-meta{
    display:flex;
    align-items:center;
    gap:18px;

    margin-bottom:25px;

    font-family:"Courier New", monospace;
    font-size:8px;
    font-weight:700;
    letter-spacing:1.8px;

    color:rgba(255,255,255,.38);
}

.featured-content h2{
    margin:0;

    font-size:clamp(42px,5vw,74px);
    line-height:.92;
    letter-spacing:-.055em;
    font-weight:800;

    color:#fff;
}

.featured-content h2 em,
.news-card h2 em{
    font-style:normal;
    font-weight:300;

    color:rgba(255,255,255,.52);
}

.featured-content p{
    max-width:420px;

    margin:32px 0;

    font-size:14px;
    line-height:1.7;

    color:rgba(255,255,255,.55);
}

.read-story,
.news-open{
    display:inline-flex;
    align-items:center;
    gap:12px;

    color:#fff;
    text-decoration:none;

    font-family:"Courier New", monospace;
    font-size:8px;
    font-weight:700;
    letter-spacing:1.8px;

    transition:opacity .3s ease;
}

.read-story:hover,
.news-open:hover{
    opacity:.55;
}


/* LÍNEA EDITORIAL */

.news-divider{
    width:100%;
    max-width:1100px;
    height:1px;

    margin:0 auto clamp(50px,8vh,100px);

    background:rgba(255,255,255,.16);
}


/* GRID DE NOTICIAS */

.news-grid{
    width:100%;
    max-width:1100px;
    margin:0 auto;

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

    gap:clamp(45px,7vw,100px) clamp(25px,5vw,70px);
}

.news-card{
    min-width:0;
}

.news-card-image{
    display:block;

    width:100%;
    aspect-ratio:4 / 3;

    overflow:hidden;

    background:#111;
}

.news-card-image img{
    width:100%;
    height:100%;
    display:block;

    object-fit:cover;

    filter:brightness(.78);

    transition:
        transform .7s ease,
        filter .4s ease;
}

.news-card:hover .news-card-image img{
    transform:scale(1.05);
    filter:brightness(1);
}

.news-card .article-meta{
    margin:20px 0 16px;
}

.news-card h2{
    max-width:520px;

    margin:0 0 24px;

    font-size:clamp(28px,3.5vw,48px);
    line-height:.95;
    letter-spacing:-.045em;
}


/* RESPONSIVE */

@media(max-width:900px){

    .news-header,
    .featured-story,
    .news-divider,
    .news-grid{
        max-width:none;
        width:calc(100% - 90px);
    }

    .featured-story{
        grid-template-columns:1fr;
        gap:40px;
    }

    .featured-image{
        aspect-ratio:16 / 10;
    }

    .featured-content{
        padding-bottom:0;
        max-width:650px;
    }
}


@media(max-width:600px){

    .news-page{
        padding-bottom:50px;
    }

    .news-header,
    .featured-story,
    .news-divider,
    .news-grid{
        width:calc(100% - 44px);
    }

    .news-header{
        min-height:50svh;
        padding-top:100px;
        padding-bottom:55px;
    }

    .news-header h1{
        margin:30px 0;
        font-size:clamp(76px,25vw,125px);
    }

    .news-header-top,
    .news-header-bottom{
        font-size:7px;
        letter-spacing:1.3px;
    }

    .news-header-top span:last-child,
    .news-header-bottom span:last-child{
        display:none;
    }

    .featured-image{
        aspect-ratio:4 / 5;
    }

    .featured-content h2{
        font-size:clamp(40px,12vw,58px);
    }

    .featured-content p{
        font-size:13px;
    }

    .article-meta{
        font-size:7px;
        gap:12px;
    }

    .news-grid{
        grid-template-columns:1fr;
        gap:60px;
    }

    .news-card h2{
        font-size:clamp(32px,10vw,46px);
    }
}


/* =========================================================
   OZKAR MIKE — ACADEMY
========================================================= */

.academy-page{
    position:relative;
    width:100%;
    min-height:100svh;

    display:flex;
    flex-direction:column;

    padding-bottom:80px;
}


/* =========================================================
   INFORMACIÓN SUPERIOR
========================================================= */

.academy-system{
    width:calc(100% - 120px);
    max-width:1100px;

    margin:0 auto;

    padding-top:110px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    font-family:"Courier New", monospace;
    font-size:8px;
    font-weight:700;
    letter-spacing:2px;

    color:rgba(255,255,255,.35);
}


/* =========================================================
   CONTENIDO PRINCIPAL
========================================================= */

.academy-content{
    width:calc(100% - 120px);
    max-width:1100px;

    flex:1;

    margin:0 auto;

    display:grid;

    /* DOS ESPACIOS REALES.
       EL LOGIN NUNCA INVADE EL TÍTULO */
    grid-template-columns:
        minmax(0, 1fr)
        minmax(420px, 500px);

    column-gap:clamp(55px, 7vw, 110px);

    align-items:center;

    padding:
        clamp(70px,10vh,120px)
        0;
}


/* =========================================================
   LADO IZQUIERDO
========================================================= */

.academy-intro{
    width:100%;
    min-width:0;
    max-width:500px;
}


.academy-label{
    display:block;

    margin-bottom:25px;

    font-family:"Courier New", monospace;
    font-size:8px;
    font-weight:700;
    letter-spacing:3px;

    color:rgba(255,255,255,.35);
}


/* EL TÍTULO YA NO CRECE HASTA INVADIR EL LOGIN */

.academy-intro h1{
    margin:0;

    width:100%;
    max-width:100%;

    font-size:clamp(68px, 7vw, 90px);
    font-weight:900;
    line-height:.78;
    letter-spacing:-.085em;

    color:#fff;

    white-space:normal;
    overflow-wrap:anywhere;
}


.academy-intro h1 span{
    color:rgba(255,255,255,.25);
}


.academy-intro > p{
    max-width:370px;

    margin:45px 0 0;

    font-size:14px;
    line-height:1.8;

    color:rgba(255,255,255,.55);
}


/* =========================================================
   STATUS
========================================================= */

.academy-status{
    display:flex;
    align-items:center;
    gap:10px;

    margin-top:34px;
}


.academy-status span{
    width:6px;
    height:6px;

    flex:0 0 6px;

    border-radius:50%;

    background:rgba(255,255,255,.8);

    box-shadow:
        0 0 12px rgba(255,255,255,.35);
}


.academy-status p{
    margin:0;

    font-family:"Courier New", monospace;
    font-size:7px;
    font-weight:700;
    letter-spacing:2px;

    color:rgba(255,255,255,.3);
}


/* =========================================================
   LOGIN
========================================================= */

.academy-login{
    position:relative;

    width:100%;
    max-width:500px;
    min-width:0;

    justify-self:end;

    box-sizing:border-box;

    padding:
        clamp(32px,4vw,55px);

    border:
        1px solid rgba(255,255,255,.14);

    background:
        rgba(255,255,255,.018);

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
}


.login-top{
    display:flex;
    justify-content:space-between;
    gap:20px;

    padding-bottom:30px;

    border-bottom:
        1px solid rgba(255,255,255,.1);

    font-family:"Courier New", monospace;
    font-size:7px;
    font-weight:700;
    letter-spacing:2px;

    color:rgba(255,255,255,.32);
}


.academy-login h2{
    margin:
        clamp(50px,7vh,80px)
        0
        45px;

    font-size:clamp(42px,5vw,72px);
    font-weight:800;
    line-height:.88;
    letter-spacing:-.06em;

    color:#fff;
}


/* =========================================================
   INPUTS
========================================================= */

.academy-field{
    margin-bottom:30px;
}


.academy-field label{
    display:block;

    margin-bottom:12px;

    font-family:"Courier New", monospace;
    font-size:7px;
    font-weight:700;
    letter-spacing:2px;

    color:rgba(255,255,255,.38);
}


.academy-field input{
    width:100%;
    height:44px;

    box-sizing:border-box;

    padding:0;

    border:0;
    border-bottom:
        1px solid rgba(255,255,255,.2);

    border-radius:0;

    outline:none;

    background:transparent;

    color:#fff;

    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;

    transition:
        border-color .3s ease;
}


.academy-field input:focus{
    border-bottom-color:
        rgba(255,255,255,.8);
}


.academy-field input::placeholder{
    color:rgba(255,255,255,.22);
}


/* =========================================================
   ACCIONES
========================================================= */

.academy-actions{
    margin-top:45px;

    display:flex;
    flex-direction:column;
    align-items:flex-start;

    gap:24px;
}


.academy-enter{
    width:100%;
    min-height:58px;

    padding:0 22px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    border:
        1px solid rgba(255,255,255,.35);

    background:transparent;

    color:#fff;

    cursor:pointer;

    font-family:"Courier New", monospace;
    font-size:8px;
    font-weight:700;
    letter-spacing:2px;

    transition:
        background .3s ease,
        color .3s ease;
}


.academy-enter:hover{
    background:#fff;
    color:#111;
}


.academy-enter span:last-child{
    font-size:18px;
}


.academy-help{
    color:rgba(255,255,255,.35);

    text-decoration:none;

    font-family:"Courier New", monospace;
    font-size:7px;
    font-weight:700;
    letter-spacing:1.8px;

    transition:color .3s ease;
}


.academy-help:hover{
    color:#fff;
}


/* =========================================================
   REGISTRO
========================================================= */

.academy-register{
    margin-top:55px;
    padding-top:24px;

    border-top:
        1px solid rgba(255,255,255,.1);

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;

    font-family:"Courier New", monospace;
    font-size:7px;
    font-weight:700;
    letter-spacing:1.6px;

    color:rgba(255,255,255,.3);
}


.academy-register a{
    color:#fff;

    text-decoration:none;

    transition:opacity .3s ease;
}


.academy-register a:hover{
    opacity:.55;
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media(max-width:1050px){

    .academy-system,
    .academy-content{
        width:calc(100% - 90px);
    }


    .academy-content{
        grid-template-columns:1fr;

        gap:70px;

        padding:
            80px
            0;
    }


    .academy-intro{
        max-width:650px;
    }


    .academy-intro h1{
        font-size:clamp(80px,13vw,70px);
    }


    .academy-login{
        width:100%;
        max-width:620px;

        justify-self:start;
    }
}


/* =========================================================
   RESPONSIVE — MÓVIL
========================================================= */

@media(max-width:600px){

    .academy-page{
        padding-bottom:50px;
    }


    .academy-system,
    .academy-content{
        width:calc(100% - 44px);
    }


    .academy-system{
        padding-top:100px;

        font-size:7px;
        letter-spacing:1.3px;
    }


    .academy-system span:last-child{
        display:none;
    }


    .academy-content{
        padding:
            65px
            0;

        gap:60px;
    }


    .academy-intro h1{
        font-size:clamp(62px,20vw,60px);
        line-height:.8;
    }


    .academy-intro > p{
        margin-top:35px;

        font-size:13px;
    }


    .academy-login{
        width:100%;
        padding:30px 22px;
    }


    .academy-login h2{
        margin-top:50px;

        font-size:clamp(38px,12vw,56px);
    }


    .academy-register{
        flex-direction:column;
        align-items:flex-start;
    }
}


/* =========================================================
   POPUP — ROGER THAT
========================================================= */

.roger-popup{
    position:fixed;
    inset:0;

    z-index:99999;

    display:none;
    align-items:center;
    justify-content:center;

    padding:24px;

    background:rgba(0,0,0,.82);

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}

.roger-popup.show{
    display:flex;
}

.roger-box{
    width:min(520px,100%);

    padding:48px 36px 34px;

    text-align:center;

    border:1px solid rgba(255,255,255,.22);

    background:rgba(10,10,12,.96);

    box-shadow:
        0 0 70px rgba(157,78,221,.16);
}

.roger-signal{
    margin-bottom:28px;

    color:rgba(255,255,255,.36);

    font:
        8px "Courier New",
        monospace;

    letter-spacing:3px;
}

.roger-title{
    color:#fff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:clamp(42px,9vw,78px);

    font-weight:700;

    line-height:.9;

    letter-spacing:-3px;
}

.roger-meaning{
    margin-top:16px;

    color:rgba(255,255,255,.42);

    font:
        8px "Courier New",
        monospace;

    letter-spacing:2px;
}

.roger-close{
    margin-top:38px;

    padding:13px 24px;

    border:1px solid rgba(255,255,255,.25);

    background:transparent;

    color:#fff;

    cursor:pointer;

    font:
        8px "Courier New",
        monospace;

    letter-spacing:2px;

    transition:
        background .25s ease,
        color .25s ease;
}

.roger-close:hover{
    background:#fff;
    color:#000;
}