/* ========================
BASE
======================== */

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

body{
font-family:'Inter',sans-serif;
background:#0b0b0c;
color:#e9e9e9;
line-height:1.6;
overflow-x:hidden;
background:
radial-gradient(circle at 10% 10%, rgba(212,175,55,.05), transparent 40%),
radial-gradient(circle at 90% 80%, rgba(212,175,55,.05), transparent 40%),
#0b0b0c;
}

/* textura sutil */
body::after{
content:"";
position:fixed;
top:0;left:0;
width:100%;height:100%;
background-image:url("https://www.transparenttextures.com/patterns/asfalt-light.png");
opacity:.08;
pointer-events:none;
z-index:0;
}

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

.section{
padding:90px 0;
position:relative;
z-index:1;
}

.wrap{
width:90%;
max-width:1200px;
margin:auto;
}

/* ========================
LOADER
======================== */

#loader{
position:fixed;
top:0;left:0;
width:100%;height:100%;
background:#0b0b0c;
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
transition:opacity .7s ease;
flex-direction:column;
gap:20px;
}

.loader-logo img{
width:220px;
animation:loaderPulse 2s ease-in-out infinite;
filter:drop-shadow(0 0 25px rgba(212,175,55,.7));
}

.loader-bar{
width:180px;
height:2px;
background:rgba(255,255,255,.08);
border-radius:2px;
overflow:hidden;
}

.loader-bar::after{
content:"";
display:block;
width:40%;
height:100%;
background:linear-gradient(90deg,#d4af37,#ffd86b);
animation:loaderSlide 1.2s ease-in-out infinite alternate;
border-radius:2px;
}

@keyframes loaderSlide{
from{transform:translateX(-100%);}
to{transform:translateX(350%);}
}

@keyframes loaderPulse{
0%{transform:scale(1);opacity:.7;}
50%{transform:scale(1.12);opacity:1;}
100%{transform:scale(1);opacity:.7;}
}

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

.header{
position:sticky;
top:0;
background:rgba(10,10,10,.92);
backdrop-filter:blur(14px);
border-bottom:1px solid rgba(255,255,255,.06);
z-index:999;
transition:.3s;
}

.header.scrolled{
background:rgba(7,7,7,.97);
border-bottom:1px solid rgba(212,175,55,.15);
box-shadow:0 4px 30px rgba(0,0,0,.5);
}

.nav{
display:flex;
align-items:center;
justify-content:space-between;
padding:18px 0;
}

.brand{
display:flex;
align-items:center;
gap:12px;
text-decoration:none;
color:white;
}

.brand img{height:48px;}

.bname{
font-family:'Cinzel',serif;
font-size:15px;
letter-spacing:.3px;
}

.bsub{font-size:12px;color:#888;}

/* ========================
MENU DESKTOP
======================== */

.menu{
display:flex;
gap:22px;
align-items:center;
}

.menu a{
text-decoration:none;
color:#d7d7d7;
font-size:14px;
position:relative;
transition:.25s;
}

.menu a::after{
content:"";
position:absolute;
bottom:-5px;left:0;
width:0;height:1px;
background:#d4af37;
transition:.35s;
}

.menu a:hover{color:#fff;}
.menu a:hover::after{width:100%;}
.is-active{color:#d4af37 !important;}

/* ========================
HAMBURGUESA
======================== */

.hamburger{
display:none;
flex-direction:column;
gap:5px;
cursor:pointer;
background:none;
border:none;
padding:8px;
z-index:1001;
}

.hamburger span{
display:block;
width:24px;height:2px;
background:#d4af37;
border-radius:2px;
transition:.35s;
}

.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0);}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* MENÚ MÓVIL */
.mobile-menu{
display:none;
position:fixed;
top:0;left:0;
width:100%;height:100%;
background:rgba(5,5,5,.98);
backdrop-filter:blur(20px);
z-index:998;
flex-direction:column;
align-items:center;
justify-content:center;
gap:30px;
opacity:0;
pointer-events:none;
transition:opacity .35s ease;
}

.mobile-menu.open{
display:flex;
opacity:1;
pointer-events:all;
}

.mobile-menu a{
font-family:'Cinzel',serif;
font-size:22px;
color:#fff;
text-decoration:none;
letter-spacing:1px;
transition:.25s;
}

.mobile-menu a:hover{color:#d4af37;}

.mobile-menu .btn--gold{
margin-top:10px;
padding:14px 28px;
font-size:16px;
}

/* ========================
BUTTONS
======================== */

.btn{
padding:10px 20px;
border-radius:7px;
font-size:14px;
font-weight:600;
text-decoration:none;
transition:.3s;
position:relative;
overflow:hidden;
display:inline-block;
}

.btn::after{
content:"";
position:absolute;
top:0;left:-100%;
width:100%;height:100%;
background:linear-gradient(120deg,transparent,rgba(255,255,255,.25),transparent);
transition:.5s;
}

.btn:hover::after{left:100%;}

.btn--gold{
background:linear-gradient(135deg,#d4af37,#ffd86b);
color:#111;
box-shadow:0 6px 20px rgba(212,175,55,.3);
}

.btn--gold:hover{
transform:translateY(-2px);
box-shadow:0 10px 28px rgba(212,175,55,.5);
}

.btn--ghost{
border:1px solid #333;
color:#ddd;
}

.btn--ghost:hover{
border-color:#d4af37;
color:#d4af37;
transform:translateY(-2px);
}

.btn--line{
border:1px solid #d4af37;
color:#d4af37;
}

.btn--line:hover{
background:#d4af37;
color:#111;
transform:translateY(-2px);
}

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

.footer{
background:linear-gradient(180deg,#0b0b0c,#050505);
border-top:1px solid rgba(212,175,55,.2);
padding-top:70px;
padding-bottom:40px;
position:relative;
z-index:1;
}

.footer::before{
content:"";
display:block;
width:100px;height:2px;
background:linear-gradient(90deg,transparent,#d4af37,transparent);
margin:0 auto 50px auto;
}

.footer-grid{
display:grid;
grid-template-columns:2fr 1fr 1fr 1.2fr;
gap:50px;
width:90%;
max-width:1200px;
margin:auto;
}

.footer-logo{
font-family:'Cinzel',serif;
font-size:19px;
color:#fff;
margin-bottom:14px;
}

.footer-text{color:#999;font-size:14px;line-height:1.7;margin-bottom:14px;}
.footer-meta{color:#666;font-size:13px;}

.footer-col h4{
color:#d4af37;
margin-bottom:14px;
font-size:14px;
letter-spacing:.5px;
text-transform:uppercase;
}

.footer-col a{
display:block;
color:#aaa;
text-decoration:none;
margin-bottom:9px;
font-size:14px;
transition:.25s;
}

.footer-col a:hover{color:#d4af37;transform:translateX(4px);}
.footer-city{margin-top:14px;color:#666;font-size:13px;}

.footer-bottom{
width:90%;max-width:1200px;
margin:40px auto 0;
padding-top:20px;
border-top:1px solid rgba(255,255,255,.05);
display:flex;
justify-content:space-between;
font-size:13px;
color:#666;
}

/* DEV CARD */
.dev-card{
background:rgba(20,20,20,.7);
border:1px solid rgba(255,255,255,.07);
border-radius:12px;
padding:20px;
backdrop-filter:blur(8px);
transition:.35s;
}

.dev-card:hover{
border-color:#d4af37;
transform:translateY(-4px);
box-shadow:0 15px 40px rgba(0,0,0,.5);
}

.dev-title{font-size:11px;color:#777;margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px;}
.dev-name{font-family:'Cinzel',serif;font-size:17px;color:#d4af37;margin-bottom:8px;}
.dev-desc{font-size:13px;color:#999;line-height:1.5;margin-bottom:12px;}
.dev-links{display:flex;gap:14px;}
.dev-links a{color:#bbb;text-decoration:none;font-size:13px;transition:.25s;}
.dev-links a:hover{color:#d4af37;}

/* ========================
WHATSAPP FLOAT
======================== */

.wsp{
position:fixed;
right:22px;bottom:22px;
background:linear-gradient(135deg,#25D366,#1da851);
color:white;
padding:13px 20px;
border-radius:50px;
font-weight:700;
font-size:14px;
text-decoration:none;
box-shadow:0 8px 25px rgba(37,211,102,.35);
transition:.3s;
z-index:997;
letter-spacing:.3px;
}

.wsp:hover{transform:scale(1.06);box-shadow:0 12px 35px rgba(37,211,102,.5);}

/* ========================
PAGE HERO (páginas internas)
======================== */

.page-hero{
padding:130px 0 90px;
text-align:center;
position:relative;
background:
radial-gradient(circle at 15% 10%, rgba(212,175,55,.12), transparent 45%),
radial-gradient(circle at 85% 90%, rgba(212,175,55,.08), transparent 40%),
#0b0b0c;
border-bottom:1px solid rgba(255,255,255,.05);
}

.page-hero::after{
content:"";
display:block;
width:100px;height:2px;
background:linear-gradient(90deg,transparent,#d4af37,transparent);
margin:28px auto 0;
box-shadow:0 0 12px rgba(212,175,55,.5);
}

.page-hero h1{
font-family:'Cinzel',serif;
font-size:46px;
letter-spacing:.5px;
margin-bottom:12px;
}

.page-hero p{
color:#b8b8b8;
font-size:17px;
max-width:600px;
margin:auto;
line-height:1.7;
}

.gold-divider{
width:100px;height:2px;
background:#d4af37;
margin:22px auto 0;
box-shadow:0 0 14px rgba(212,175,55,.5);
}

/* ========================
SCROLL REVEAL
======================== */

.reveal{
opacity:0;
transform:translateY(60px);
transition:all .9s cubic-bezier(.22,.61,.36,1);
will-change:transform,opacity;
}

.reveal.active{opacity:1;transform:translateY(0);}

.reveal-left{
opacity:0;
transform:translateX(-60px);
transition:all .9s cubic-bezier(.22,.61,.36,1);
}

.reveal-left.active{opacity:1;transform:translateX(0);}

.reveal-right{
opacity:0;
transform:translateX(60px);
transition:all .9s cubic-bezier(.22,.61,.36,1);
}

.reveal-right.active{opacity:1;transform:translateX(0);}

.reveal-scale{
opacity:0;
transform:scale(.93);
transition:all .9s cubic-bezier(.22,.61,.36,1);
}

.reveal-scale.active{opacity:1;transform:scale(1);}

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

@media(max-width:960px){
.menu{display:none;}
.hamburger{display:flex;}

.footer-grid{
grid-template-columns:1fr 1fr;
gap:35px;
}
}

@media(max-width:600px){
.page-hero h1{font-size:32px;}

.footer-grid{
grid-template-columns:1fr;
text-align:center;
gap:30px;
}

.footer-bottom{
flex-direction:column;
gap:8px;
text-align:center;
}

.footer-col a:hover{transform:none;}
}

/* ========================
BOTÓN FLOTANTE DE LLAMADA
======================== */

#floatCall{
position:fixed;
right:22px;
bottom:80px;
background:linear-gradient(135deg,#1a73e8,#0d5bba);
color:white;
width:48px;height:48px;
border-radius:50%;
display:flex;align-items:center;justify-content:center;
text-decoration:none;
box-shadow:0 6px 20px rgba(26,115,232,.45);
transition:.3s;
z-index:997;
}

#floatCall:hover{
transform:scale(1.1);
box-shadow:0 10px 28px rgba(26,115,232,.6);
}

/* tooltip */
#floatCall::before{
content:"Llamar";
position:absolute;
right:58px;
background:rgba(0,0,0,.85);
color:#fff;
font-size:12px;
font-weight:600;
padding:5px 10px;
border-radius:6px;
white-space:nowrap;
opacity:0;
pointer-events:none;
transition:.25s;
font-family:'Inter',sans-serif;
}

#floatCall:hover::before{opacity:1;}

/* separación con el wsp */
.wsp{bottom:22px;}