/* Variables y resets */
:root{
    --bg:#0b0b0d;
    --paper:#0f1113;
    --muted:#9aa2a6;
    --accent:#6ce1d6; /* acento sutil */
    --glass: rgba(255,255,255,0.03);
    --card:#0f1214;
    --radius:12px;
    --fw-heading:700;
    --fw-body:400;
    --max-width:1200px;
    --gap:20px;
}
[data-theme="light"]{
    --bg:#ffffff;
    --paper:#fbfbfb;
    --muted:#4a5560;
    --accent:#0aa3a0;
    --glass: rgba(11,11,13,0.04);
    --card:#ffffff;
}
*{box-sizing:border-box}
html,body{height:100%; margin:0; font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; background:var(--bg); color: #e6eef0; scroll-behavior:smooth}
a{color:inherit; text-decoration:none}

/* Layout */
.wrap{max-width:var(--max-width); margin:0 auto; padding:40px 24px}
header.nav{position:sticky; top:12px; z-index:40}
nav{display:flex; gap:16px; align-items:center; justify-content:space-between}
.brand{display:flex; gap:18px; align-items:center}
.logo{width:44px; height:44px; border-radius:10px; background:linear-gradient(135deg,var(--accent), #9befe8); display:flex; align-items:center; justify-content:center; color:#052425; font-weight:700}
.navlinks{display:flex; gap:16px; align-items:center}
.navlinks a{padding:8px 12px; border-radius:8px; color:var(--muted); font-size:0.95rem}
.navlinks a:hover{background:var(--glass); color:var(--accent)}
.controls{display:flex; gap:8px; align-items:center}

/* Hero */
.hero{min-height:72vh; display:grid; grid-template-columns:1fr; align-items:center; position:relative; overflow:hidden}
.hero-inner{display:flex; gap:40px; align-items:flex-start; padding:80px 0}
.intro{max-width:720px}
h1{font-family:'Space Grotesk', Inter, sans-serif; margin:0; font-size:clamp(2.1rem, 5vw, 4rem); letter-spacing:-0.02em; font-weight:var(--fw-heading)}
.subtitle{color:var(--accent); font-weight:600; margin-top:8px}
p.lead{color:var(--muted); line-height:1.6; margin-top:18px}

/* Animated canvas-like background using gradients */
.bg-visual{position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(600px 400px at 10% 20%, rgba(108,225,214,0.06), transparent 8%), radial-gradient(500px 350px at 90% 80%, rgba(108,225,214,0.03), transparent 10%); mix-blend-mode:screen; animation: drift 18s linear infinite}
@keyframes drift{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(30px,-20px) rotate(3deg)}100%{transform:translate(0,0) rotate(0)}}

/* Sections */
section{padding:80px 0; position:relative}
h2.section-title{font-family:'Space Grotesk'; margin:0 0 18px 0; font-size:1.35rem}

/* Masonry / cards */
.masonry{column-count:3; column-gap:var(--gap)}
@media (max-width:1000px){.masonry{column-count:2}}
@media (max-width:640px){.masonry{column-count:1}}
.card{break-inside:avoid; background:var(--card); border-radius:var(--radius); margin:0 0 var(--gap); padding:14px; box-shadow:0 6px 20px rgba(2,6,8,0.7); transition:transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s}
.card:hover{transform:translateY(-8px) scale(1.01); box-shadow:0 18px 40px rgba(2,6,8,0.65)}
.media{position:relative; border-radius:10px; overflow:hidden}
.meta{display:flex; justify-content:space-between; align-items:flex-start; margin-top:10px}
.title{font-weight:600}
.desc{color:var(--muted); font-size:0.95rem}

/* Responsive iframe */
.iframe-wrap{position:relative; width:100%; aspect-ratio:16/9; background:#000}
.iframe-wrap iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* Statement & Contact */
.statement{max-width:900px; color:var(--muted)}
.contact{display:flex; gap:18px; align-items:center; flex-wrap:wrap}
.chip{background:linear-gradient(90deg, rgba(255,255,255,0.02), transparent); padding:10px 14px; border-radius:999px; color:var(--muted)}

/* Preloader */
#preloader{position:fixed; inset:0; background:var(--bg); display:flex; align-items:center; justify-content:center; z-index:9999}
.spinner{width:110px; height:110px; border-radius:50%; background:conic-gradient(var(--accent), transparent 40%); animation:spin 1.8s linear infinite; display:grid; place-items:center}
.spinner::after{content:""; width:62px; height:62px; border-radius:50%; background:var(--paper)}
@keyframes spin{to{transform:rotate(1turn)}}

/* Reveal animation */
.reveal{opacity:0; transform:translateY(12px) scale(.995); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.9,.2,1)}
.reveal.is-visible{opacity:1; transform:translateY(0) scale(1)}

/* Footer */
footer{padding:40px 0; color:var(--muted); font-size:0.95rem}

/* Small utilities */
.muted{color:var(--muted)}
.btn{background:var(--accent); color:#052425; padding:8px 12px; border-radius:8px; font-weight:600}