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

html, body{
width:100%;
height:100%;
overflow:hidden;
}

body{
background:#0c0a08;
font-family:'Poppins', sans-serif;
color:#fff;

position:fixed;
top:0;
left:0;
right:0;
bottom:0;
}

/* BRAND MARK */

.brand-mark{
position:fixed;
top:24px;
left:clamp(20px,4vw,60px);
z-index:3;

font-family:'Anton', sans-serif;
font-size:18px;
letter-spacing:2px;
color:#fff;
}

.brand-mark span{
color:#e0a24a;
font-family:'Poppins', sans-serif;
font-weight:500;
font-size:12px;
letter-spacing:1.5px;
}

/* BADGE */

.badge{
display:inline-block;
background:#e0a24a;
color:#1a1208;
font-weight:600;
font-size:12px;
letter-spacing:1.5px;
text-transform:uppercase;
padding:6px 14px;
border-radius:999px;
margin-bottom:18px;
}

/* TEXTO */

p{
margin-top:16px;
line-height:1.65;
color:rgba(255,255,255,0.75);
}

/* FULL SCREEN */

.product-section{
width:100vw;
height:100dvh;

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

padding:clamp(20px,4vw,60px);
}

/* GRID RESPONSIVE PRO */

.product-container{
width:100%;
max-width:1400px;
height:100%;

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

gap:clamp(20px,4vw,80px);
}

/* TEXTO RESPONSIVE */

.product-info{
z-index:2;
}

.product-info h1{
font-size:clamp(36px,6vw,72px);
line-height:1.05;
font-family:'Anton', sans-serif;
font-weight:400;
letter-spacing:1px;
text-transform:uppercase;
}

.product-info h1 span{
display:block;
color:#e0a24a;
}

.product-info p{
font-size:clamp(14px,1.4vw,17px);
font-family:'Poppins', sans-serif;
font-weight:400;
letter-spacing:0.2px;
max-width:46ch;
}

.location{
margin-top:26px;
padding-top:18px;
border-top:1px solid rgba(255,255,255,0.15);

font-size:13px;
letter-spacing:0.4px;
color:rgba(255,255,255,0.6);
}

.location .pin{
margin-right:4px;
}

/* VIEWER FULL ADAPTATIVO */

.product-viewer{
width:100%;
height:100%;
position:relative;
}

/* canvas SIEMPRE full */

#webgl{
width:100%;
height:100%;
display:block;
}

/* GLOW */

.product-viewer::after{
content:"";
position:absolute;

width:60vw;
height:60vw;

background:radial-gradient(
circle,
rgba(224,162,74,0.30) 0%,
rgba(224,162,74,0.12) 40%,
transparent 70%
);

filter:blur(120px);

top:50%;
left:50%;
transform:translate(-50%,-50%);
z-index:-1;
}

/* LOADER */

#loader{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
font-size:13px;
letter-spacing:1px;
color:rgba(255,255,255,0.7);
}

#loader .dots span{
animation:blink 1.4s infinite;
opacity:0;
}
#loader .dots span:nth-child(2){animation-delay:0.2s;}
#loader .dots span:nth-child(3){animation-delay:0.4s;}

@keyframes blink{
0%,80%,100%{opacity:0;}
40%{opacity:1;}
}

/* VIDEO BACKGROUND */

#bg-video{
position:fixed;
top:0;
left:0;

width:100vw;
height:100dvh;

object-fit:cover;

z-index:-3;
pointer-events:none;

filter:brightness(0.55) saturate(1.05);
}

.video-overlay{
position:fixed;
inset:0;
z-index:-2;
pointer-events:none;

background:linear-gradient(180deg, rgba(12,10,8,0.35) 0%, rgba(12,10,8,0.55) 60%, rgba(12,10,8,0.85) 100%);
}

/* MOBILE (vertical PRO) */

@media(max-width:900px){

.product-container{
grid-template-columns:1fr;
text-align:center;
height:100%;
}

.product-info{
order:1;
}

.product-info p{
margin-left:auto;
margin-right:auto;
}

.location{
border-top:none;
padding-top:0;
}

.product-viewer{
order:2;
height:50%;
}

/* canvas más chico en mobile */
#webgl{
height:100%;
}

}

/* EXTRA SMALL (celus chicos) */

@media(max-width:500px){

.brand-mark{
font-size:15px;
}

.product-viewer{
height:100%;
}

.product-info h1{
font-size:32px;
letter-spacing:1px;
}

}