/*
Theme Name: RothsRock Ultra Final
Version: 11.0
*/

/* RESET */
*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* BASE */
body{
    background:#000;
    color:#fff;
    font-family:'Inter',sans-serif;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
}

/* GRID BASE INVISIBLE */
body::before{
    content:'';
    position:fixed;
    left:60px;
    top:0;
    width:1px;
    height:100%;
    background:#1a1a1a;
    z-index:0;
}

/* HEADER */
header{
    position:fixed;
    width:100%;
    top:0;
    padding:22px 8%;
    display:flex;
    justify-content:space-between;
    border-bottom:1px solid #111;
    background:rgba(0,0,0,0.85);
    backdrop-filter:blur(6px);
    z-index:10;
}

.logo{
    letter-spacing:3px;
    font-weight:800;
    font-size:12px;
}

nav a{
    color:#777;
    margin-left:28px;
    text-decoration:none;
    font-size:11px;
    letter-spacing:1px;
    transition:0.2s;
}

nav a:hover{
    color:#fff;
}

/* HERO */
.hero{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    position:relative;
    overflow:hidden;
    padding:0 20px;
}

/* TEXTO FONDO */
.hero::after{
    content:'ROTHSROCK';
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    font-size:70px;
    color:#0a0a0a;
    letter-spacing:-2px;
    z-index:0;
}

/* TITULO */
.main-title{
    font-size:clamp(32px,5vw,56px);
    font-weight:900;
    line-height:1.05;
    max-width:720px;
    letter-spacing:-1px;
    z-index:2;
}

/* SUB */
.hero-sub{
    margin-top:18px;
    font-size:14px;
    color:#aaa;
    max-width:420px;
}

/* LINK */
.email-link{
    margin-top:24px;
    font-size:11px;
    letter-spacing:2px;
    color:#fff;
    text-decoration:none;
    border-bottom:1px solid #333;
    padding-bottom:4px;
}

.email-link:hover{
    border-color:#fff;
}

/* CAPAS */
.hero *{
    position:relative;
    z-index:2;
}

/* CUBO */
#cubeCanvas{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    opacity:0.80;
    z-index:0;
}

/* SECCIONES */
.section{
    position:relative;
    padding:150px 8%;
    border-top:1px solid #111;
}

/* FONDO */
.section:nth-of-type(even){
    background:#030303;
}

.section:nth-of-type(odd){
    background:#000;
}

/* COLUMNA ESTRUCTURAL */
.section::before{
    content:'';
    position:absolute;
    left:18%;
    top:0;
    width:1px;
    height:100%;
    background:#0f0f0f;
}

/* CONTENEDOR */
.section > *{
    max-width:560px;
}

/* TITULOS */
.section h2{
    font-size:10px;
    letter-spacing:2px;
    color:#777;
    margin-bottom:30px;
}

/* TEXTO */
p{
    color:#d0d0d0;
    margin-bottom:14px;
    line-height:1.8;
}

/* PRIMER PÁRRAFO */
.section p:first-of-type{
    color:#fff;
}

/* GRID */
.grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
}

/* CARDS */
.card{
    border-top:1px solid #fff;
    padding-top:16px;
}

.card h3{
    margin-bottom:6px;
    font-size:14px;
}

.card p{
    color:#aaa;
}

/* STATEMENT */
.statement{
    font-size:22px;
    line-height:1.4;
    color:#fff;
    margin:40px 0;
}

/* CASES */
.cases{
    display:flex;
    flex-direction:column;
    gap:50px;
}

.case span{
    font-size:9px;
    letter-spacing:2px;
    color:#555;
}

.case h3{
    margin:6px 0;
}

.case p{
    color:#bbb;
}

/* EXPERIENCE */
.experience{
    display:flex;
    flex-direction:column;
    gap:35px;
}

.number{
    font-size:18px;
    color:#333;
}

.step p{
    color:#bbb;
}

/* LISTAS */
ul{
    list-style:none;
}

ul li{
    margin-bottom:8px;
    color:#bbb;
}

/* MICRO DETALLE (mejora visual) */
.section::after{
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:1px;
    background:linear-gradient(to right, transparent, #111, transparent);
}

/* MOBILE */
@media(max-width:900px){

body::before{
    display:none;
}

.section::before{
    display:none;
}

.hero::after{
    display:none;
}

nav{
    display:none;
}

.grid{
    grid-template-columns:1fr;
}

#cubeCanvas{
    display:none;
}

.section{
    padding:80px 20px;
}

.main-title{
    font-size:28px;
}

}
/* LAYOUT ASIMÉTRICO */

.section{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:80px;
}

/* contenido principal */
.section > *{
    grid-column:1;
}

/* empujar algunos bloques */
.section:nth-of-type(even) > *{
    grid-column:2;
}
/* ESPACIO CONTROLADO */

.section::after{
    content:'';
    grid-column:2;
}
.section h2{
    font-size:10px;
    letter-spacing:3px;
    color:#666;
}
.section{
    border-top:1px solid #111;
}
a{
    transition:0.2s;
}

a:hover{
    opacity:0.6;
}
/* ELIMINAR TEXTO FANTASMA */
.hero::after,
.hero::before{
    display:none !important;
    content:none !important;
}

/* por si hay elementos ocultos */
.hero *{
    text-shadow:none !important;
}

/* por si existe un layer con texto */
[class*="bg"],
[class*="overlay"],
[class*="text-bg"]{
    display:none !important;
}