/* ============================================================
   SHARED STYLES — Julio Lopez Gestión de Marca
   Extraídos y adaptados desde index.html para las páginas de galería
   ============================================================ */

:root{
--accent:#e8b800;
--accent-dark:#c99f00;
--accent-light:rgba(232,184,0,0.15);
--bg:#0a0a12;
--bg2:#111120;
--text:#fff;
--text2:rgba(255,255,255,0.7);
--text3:rgba(255,255,255,0.45);
--glass-bg:rgba(255,255,255,0.06);
--glass-bg-hover:rgba(255,255,255,0.1);
--glass-border:rgba(255,255,255,0.12);
--glass-border-bright:rgba(255,255,255,0.25);
--glass-shadow:0 10px 40px -10px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.15);
--glass-shadow-hover:0 15px 60px -10px rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,255,255,0.22);
}
body.light{
--bg:#f5f5f7;
--bg2:#ffffff;
--text:#1a1a1a;
--text2:rgba(26,26,26,0.7);
--text3:rgba(26,26,26,0.45);
--glass-bg:rgba(255,255,255,0.55);
--glass-bg-hover:rgba(255,255,255,0.75);
--glass-border:rgba(255,255,255,0.8);
--glass-border-bright:rgba(255,255,255,0.95);
--glass-shadow:0 10px 40px -10px rgba(0,0,0,0.15),inset 0 1px 0 rgba(255,255,255,0.8);
--glass-shadow-hover:0 15px 60px -10px rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.9);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{
overflow-x:hidden;
max-width:100vw;
width:100%;
position:relative;
}
html{scroll-behavior:smooth}
body{
font-family:'Plus Jakarta Sans',sans-serif;
background:var(--bg);
color:var(--text);
min-height:100vh;
transition:background .5s,color .5s;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}

/* ============ AMBIENT ORBS ============ */
.ambient{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.orb{
position:absolute;border-radius:50%;filter:blur(80px);
animation:ambientFloat 20s ease-in-out infinite;
will-change:transform;
}
.orb1{width:600px;height:600px;background:radial-gradient(circle,rgba(232,184,0,.35),transparent 70%);top:-10%;left:-10%;animation-delay:0s}
.orb2{width:500px;height:500px;background:radial-gradient(circle,rgba(255,100,50,.25),transparent 70%);bottom:-10%;right:-10%;animation-delay:-5s}
.orb3{width:450px;height:450px;background:radial-gradient(circle,rgba(100,150,255,.2),transparent 70%);top:40%;right:20%;animation-delay:-10s}
.orb4{width:400px;height:400px;background:radial-gradient(circle,rgba(200,50,150,.18),transparent 70%);top:60%;left:30%;animation-delay:-15s}

@keyframes ambientFloat{
0%,100%{transform:translate(0,0) scale(1)}
25%{transform:translate(50px,-30px) scale(1.08)}
50%{transform:translate(-40px,40px) scale(.95)}
75%{transform:translate(30px,20px) scale(1.03)}
}

body.light .orb1{background:radial-gradient(circle,rgba(232,184,0,.55),transparent 70%)}
body.light .orb2{background:radial-gradient(circle,rgba(255,100,50,.4),transparent 70%)}
body.light .orb3{background:radial-gradient(circle,rgba(100,150,255,.35),transparent 70%)}
body.light .orb4{background:radial-gradient(circle,rgba(200,50,150,.3),transparent 70%)}

/* ============ GRAIN TEXTURE ============ */
.grain{
position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.04;
background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' seed='5'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ============ NAVIGATION ============ */
.nav{
position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:1000;
padding:10px 24px;
max-width:calc(100vw - 24px);
border-radius:100px;
background:var(--glass-bg);
backdrop-filter:blur(40px) saturate(200%);
-webkit-backdrop-filter:blur(40px) saturate(200%);
border:1px solid var(--glass-border);
box-shadow:var(--glass-shadow);
transition:all .4s;
}
.nav::before{
content:'';position:absolute;inset:0;border-radius:100px;
background:linear-gradient(180deg,rgba(255,255,255,0.15) 0%,transparent 60%);
pointer-events:none;
}
.nav-content{
display:flex;align-items:center;gap:1.5rem;flex-wrap:nowrap;white-space:nowrap;
position:relative;z-index:2;
}

.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.logo-mark{
width:34px;height:34px;border-radius:10px;
background:linear-gradient(135deg,var(--accent),var(--accent-dark));
display:flex;align-items:center;justify-content:center;
font-family:'Syne',sans-serif;font-weight:800;font-size:.85rem;color:#000;
box-shadow:0 0 20px rgba(232,184,0,.4),inset 0 1px 0 rgba(255,255,255,.4);
flex-shrink:0;
}
.logo-text{font-family:'Syne',sans-serif;font-weight:800;font-size:1rem;color:var(--text);display:flex;flex-direction:column;line-height:1.1}
.logo-text span{color:var(--text)}
.logo-text small{font-weight:500;font-size:.62rem;color:var(--accent);letter-spacing:.08em}

.nav-links{display:flex;gap:.2rem;flex-wrap:nowrap}
.nav-links a{
color:var(--text2);text-decoration:none;font-size:.78rem;
font-weight:500;letter-spacing:.03em;
padding:.5rem 1rem;border-radius:100px;
transition:all .3s;white-space:nowrap;
}
.nav-links a:hover{
color:var(--text);
background:rgba(255,255,255,0.08);
box-shadow:inset 0 1px 0 rgba(255,255,255,.15);
}

.nav-actions{display:flex;align-items:center;gap:.6rem}

.theme-toggle{
width:34px;height:34px;border-radius:50%;
background:rgba(255,255,255,0.08);
border:1px solid var(--glass-border);
color:var(--text);cursor:pointer;font-size:.9rem;
display:flex;align-items:center;justify-content:center;
transition:all .3s;
backdrop-filter:blur(10px);
}
.theme-toggle:hover{background:rgba(255,255,255,0.15);transform:rotate(15deg)}

.hamburger{
display:none;
width:34px;height:34px;border-radius:50%;
background:rgba(255,255,255,0.08);
border:1px solid var(--glass-border);
cursor:pointer;padding:0;
align-items:center;justify-content:center;
flex-direction:column;gap:4px;
transition:all .3s;
}
.hamburger span{
display:block;width:16px;height:1.5px;
background:var(--text);border-radius:2px;
transition:all .3s cubic-bezier(.16,1,.3,1);
}
.hamburger.active span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.active span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.hamburger:hover{background:rgba(255,255,255,0.15)}

/* ============ BUTTONS ============ */
.btn{
display:inline-block;
padding:1rem 2rem;
text-decoration:none;
font-weight:700;font-size:.9rem;
border-radius:100px;
transition:all .3s;
position:relative;overflow:hidden;
cursor:pointer;
border:none;
font-family:inherit;
}
.btn-primary{
background:linear-gradient(135deg,var(--accent),var(--accent-dark));
color:#000;
box-shadow:0 8px 30px rgba(232,184,0,.4),inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-primary::after{
content:'';position:absolute;inset:0;
background:linear-gradient(135deg,transparent 30%,rgba(255,255,255,.3) 50%,transparent 70%);
transform:translateX(-100%);transition:transform .6s;
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(232,184,0,.55),inset 0 1px 0 rgba(255,255,255,.5)}
.btn-primary:hover::after{transform:translateX(100%)}

.btn-secondary{
background:var(--glass-bg);
backdrop-filter:blur(30px) saturate(180%);
-webkit-backdrop-filter:blur(30px) saturate(180%);
border:1px solid var(--glass-border);
color:var(--text);
font-weight:600;
box-shadow:var(--glass-shadow);
}
.btn-secondary::before{
content:'';position:absolute;inset:0;border-radius:100px;
background:linear-gradient(180deg,rgba(255,255,255,0.12),transparent 60%);
pointer-events:none;
}
.btn-secondary:hover{background:var(--glass-bg-hover);border-color:var(--glass-border-bright);transform:translateY(-3px)}

.btn-ghost{
background:transparent;
border:1px solid var(--glass-border);
color:var(--text2);
font-weight:600;
}
.btn-ghost:hover{background:var(--glass-bg);color:var(--text);border-color:var(--glass-border-bright)}

/* Nav CTA variant — smaller inside nav */
.nav .btn-primary{padding:.55rem 1.2rem;font-size:.78rem}

/* ============ SECTIONS ============ */
.section{padding:6rem 3rem;position:relative;z-index:2;overflow:hidden}
.section-hdr{text-align:center;margin-bottom:4rem;max-width:700px;margin-left:auto;margin-right:auto}
.section-tag{
display:inline-block;
font-size:.72rem;text-transform:uppercase;letter-spacing:.2em;
color:var(--accent);font-weight:700;margin-bottom:.8rem;
padding:.3rem 1rem;border-radius:100px;
background:rgba(232,184,0,0.08);
border:1px solid rgba(232,184,0,0.2);
backdrop-filter:blur(10px);
}
.section-title{
font-family:'Syne',sans-serif;
font-size:clamp(2rem,4vw,3rem);
font-weight:700;line-height:1.15;letter-spacing:-.01em;
margin-bottom:1rem;
}
.section-title em{font-style:italic;background:linear-gradient(90deg,var(--accent-dark),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.section-desc{color:var(--text2);font-size:1rem;line-height:1.6}

/* ============ FOOTER ============ */
.footer{
padding:3rem;text-align:center;
position:relative;z-index:2;
color:var(--text3);font-size:.85rem;
border-top:1px solid var(--glass-border);
}
.footer-content{max-width:1100px;margin:0 auto}
.footer-logo{
display:flex;align-items:center;justify-content:center;gap:.7rem;
margin-bottom:1rem;color:var(--text);font-weight:700;
}
.footer-copy{color:var(--text3);font-size:.8rem}

/* ============ REVEAL ============ */
.reveal{opacity:0;transform:translateY(40px);transition:all 1s cubic-bezier(.16,1,.3,1)}
.reveal.visible{opacity:1;transform:translateY(0)}

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

@media(max-width:1024px){
.nav{gap:1rem;padding:8px 18px}
.nav-content{gap:1rem}
.nav-links{gap:.1rem}
.nav-links a{padding:.45rem .7rem;font-size:.74rem}
.section{padding:5rem 2rem}
}

@media(max-width:900px){
.nav{
top:12px;left:12px;right:12px;transform:none;
padding:8px 14px;
justify-content:space-between;
max-width:calc(100vw - 24px);
}
.nav-content{width:100%;justify-content:space-between;gap:.5rem}
.logo-text{font-size:.85rem}
.logo-text small{font-size:.55rem}
.logo-mark{width:30px;height:30px;font-size:.75rem}
.nav-links{display:none}
.hamburger{display:flex}
.theme-toggle{width:30px;height:30px;font-size:.8rem}
.nav .btn-primary{padding:.45rem 1rem;font-size:.7rem}
.section{padding:4rem 1.5rem}
.section-hdr{margin-bottom:2.5rem}
.section-title{font-size:clamp(1.6rem,5.5vw,2.2rem)}
.footer{padding:2rem 1.5rem}
}

@media(max-width:600px){
.nav{padding:6px 12px;gap:.3rem}
.nav-content{gap:.4rem}
.logo-mark{width:28px;height:28px;font-size:.7rem}
.logo-text{font-size:.8rem}
.logo-text small{display:none}
.theme-toggle{width:28px;height:28px;font-size:.75rem}
.nav .btn-primary{display:none}
.hamburger{width:30px;height:30px}
.section{padding:3rem 1.2rem}
.section-hdr{margin-bottom:2rem}
.section-tag{font-size:.65rem;padding:.25rem .8rem}
.section-title{font-size:clamp(1.5rem,6.5vw,2rem)}
.section-desc{font-size:.9rem}
.footer{padding:1.5rem 1.2rem;font-size:.78rem}
.btn{padding:.9rem 1.5rem;font-size:.85rem}

/* Reduce ambient orbs on mobile for performance */
.orb3,.orb4{display:none}
.orb1,.orb2{filter:blur(60px)}
}

@media(max-width:400px){
.logo-text{font-size:.75rem}
}