*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
}
body {
  background-color: #050505; color: #fff;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
  position: relative;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; outline: none; }
.glass {
  background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.05);
  border-top-color: rgba(255,255,255,0.15); border-left-color: rgba(255,255,255,0.15);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.blob {
  position: fixed; border-radius: 50%; filter: blur(80px);
  z-index: -1; opacity: 0.5; pointer-events: none;
  animation: morph 20s ease-in-out infinite alternate;
}
.blob-1 { background: rgba(88,28,135,0.3); width: 600px; height: 600px; top: -10%; left: -10%; }
.blob-2 { background: rgba(30,58,138,0.3); width: 700px; height: 700px; bottom: 10%; right: -10%; animation-delay: -5s; }
.blob-3 { background: rgba(255,255,255,0.08); width: 500px; height: 500px; top: 40%; left: 40%; animation-delay: -10s; }
@keyframes morph {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(100px,100px) scale(1.2); }
  100% { transform: translate(-50px,-50px) scale(0.9); }
}
.tg { background: linear-gradient(to right,#fff,#888); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
@keyframes pulse { 50% { opacity:.5; } }
.pulse { animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite; }
@keyframes fir { from { opacity:0; transform:translateX(16px); } to { opacity:1; transform:translateX(0); } }

/* NAV */
nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; }
.nav-in { max-width:1280px; margin:0 auto; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; }
@media(min-width:768px){ .nav-in { padding:16px 24px; } }
.nav-logo img { height:20px; }
@media(min-width:768px){ .nav-logo img { height:24px; } }
.nav-links { display:none; gap:32px; align-items:center; font-size:15px; font-weight:600; color:#A1A1AA; }
@media(min-width:768px){ .nav-links { display:flex; } }
.nav-links a:hover, .nav-gb:hover { color:#fff; }
.nav-sep { color:rgba(255,255,255,.2); }
.nav-gb { display:flex; align-items:center; gap:6px; color:rgba(255,255,255,.6); font-size:15px; font-weight:600; }
.nav-st {
  display:flex; align-items:center; gap:6px;
  padding:6px 14px; border-radius:999px;
  font-size:13px; font-weight:700;
  color:#fff;
  background:rgba(34,211,238,.06);
  border:1px solid rgba(34,211,238,.55);
  box-shadow:0 0 10px rgba(34,211,238,.25), inset 0 0 10px rgba(34,211,238,.06);
  transition:box-shadow .3s, border-color .3s, transform .3s;
}
.nav-st svg { color:#22d3ee; flex-shrink:0; }
.nav-st:hover { border-color:rgba(34,211,238,.9); box-shadow:0 0 18px rgba(34,211,238,.45), inset 0 0 14px rgba(34,211,238,.1); transform:translateY(-1px); }
.nav-cta { padding:8px 16px; background:#fff; color:#000; font-size:12px; font-weight:700; border-radius:999px; transition:transform .3s; box-shadow:0 0 20px rgba(255,255,255,.3); }
@media(min-width:768px){ .nav-cta { padding:10px 20px; font-size:14px; } }
.nav-cta:hover { transform:scale(1.05); }

/* HERO */
.hero { position:relative; padding:130px 16px 64px; min-height:85vh; display:flex; align-items:center; overflow:hidden; }
@media(min-width:768px){ .hero { padding:160px 24px 80px; } }
@media(min-width:1024px){ .hero { padding:192px 24px 96px; } }
.hero-in { max-width:1280px; margin:0 auto; width:100%; display:grid; gap:48px; align-items:center; }
@media(min-width:1024px){ .hero-in { grid-template-columns:1fr 1fr; gap:64px; } }
.hero-txt { text-align:center; order:1; }
@media(min-width:1024px){ .hero-txt { text-align:left; } }
.hero-badge { display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#A1A1AA; margin-bottom:24px; }
.hero-badge .dot { width:6px; height:6px; border-radius:50%; background:#fff; }
h1 { font-size:clamp(2.2rem,5vw,4.5rem); font-weight:900; line-height:1.1; letter-spacing:-.025em; margin-bottom:24px; }
.hero-p { font-size:clamp(15px,2vw,18px); color:#D1D5DB; max-width:480px; line-height:1.625; font-weight:300; margin:0 auto 32px; }
@media(min-width:1024px){ .hero-p { margin-left:0; } }
.hero-btns { display:flex; flex-direction:column; gap:12px; justify-content:center; }
@media(min-width:640px){ .hero-btns { flex-direction:row; } }
@media(min-width:1024px){ .hero-btns { justify-content:flex-start; } }
.btn-w { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:#fff; color:#000; padding:14px 24px; border-radius:999px; font-weight:700; font-size:15px; transition:background .3s; }
.btn-w:hover { background:#e5e7eb; }
.btn-g { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 24px; border-radius:999px; font-weight:600; font-size:15px; color:#fff; }

/* HERO VIDEOS */
.hero-vids { position:relative; display:flex; justify-content:center; align-items:center; order:2; height:450px; }
@media(min-width:768px){ .hero-vids { height:600px; } }
.hvm { position:absolute; width:220px; z-index:30; border-radius:32px; padding:6px; box-shadow:0 0 50px rgba(255,255,255,.15); }
@media(min-width:768px){ .hvm { width:280px; border-radius:40px; padding:8px; } }
.hvm-in { width:100%; aspect-ratio:9/16; border-radius:27px; overflow:hidden; background:#121212; position:relative; }
@media(min-width:768px){ .hvm-in { border-radius:32px; } }
.hvm-in video { width:100%; height:100%; object-fit:cover; }
.hvm-ov { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.8),transparent,transparent); z-index:1; pointer-events:none; }
.hvm-info { position:absolute; bottom:16px; left:12px; z-index:2; display:flex; align-items:center; gap:8px; pointer-events:none; }
.hvm-av { width:32px; height:32px; border-radius:50%; overflow:hidden; border:1px solid rgba(255,255,255,.3); }
.hvm-av img { width:100%; height:100%; object-fit:cover; }
.hvm-info p { font-size:11px; color:#fff; font-weight:700; }
.hvm-info span { font-size:10px; color:rgba(255,255,255,.8); }
.hvs { position:absolute; width:180px; aspect-ratio:9/16; border-radius:24px; padding:4px; overflow:hidden; }
@media(min-width:768px){ .hvs { width:240px; border-radius:32px; } }
.hvs video { width:100%; height:100%; object-fit:cover; }
.hvl { z-index:10; transform:translateX(-80px) rotate(-12deg) scale(.9); opacity:.5; filter:blur(2px); }
.hvr { z-index:20; transform:translateX(80px) rotate(12deg) scale(.9); opacity:.7; filter:blur(1px); }
@media(min-width:768px){ .hvl { transform:translateX(-128px) rotate(-12deg) scale(.9); } .hvr { transform:translateX(128px) rotate(12deg) scale(.9); } }

/* PORTFOLIO */
#portfolio { padding:64px 0 40px; position:relative; overflow:hidden; }
@media(min-width:768px){ #portfolio { padding:96px 0 40px; } }
.sec-hd { text-align:center; max-width:1280px; margin:0 auto 48px; padding:0 16px; }
.sec-hd p { color:#9CA3AF; margin-top:16px; max-width:640px; margin-left:auto; margin-right:auto; }
h2 { font-size:clamp(1.75rem,4vw,3rem); font-weight:900; letter-spacing:-.025em; line-height:1.2; }

/* CAROUSEL */
.car-wrap { max-width:1280px; margin:0 auto; padding:0 16px; }
@media(min-width:768px){ .car-wrap { padding:0 24px; } }
.car-lay { display:flex; flex-direction:column; align-items:center; gap:24px; }
@media(min-width:1024px){ .car-lay { flex-direction:row; gap:48px; } }
.car-vids { width:100%; height:380px; position:relative; display:flex; align-items:center; justify-content:center; perspective:800px; }
@media(min-width:768px){ .car-vids { height:450px; } }
@media(min-width:1024px){ .car-vids { width:60%; } }
.car-item { position:absolute; width:220px; aspect-ratio:9/16; border-radius:24px; overflow:hidden; padding:4px; transition:transform .5s ease, opacity .5s ease, filter .5s ease, z-index 0s; cursor:pointer; }
.car-item video { width:100%; height:100%; object-fit:cover; border-radius:19px; }
.car-item.p-center { transform:translateX(0) rotateY(0deg) scale(1); opacity:1; z-index:30; box-shadow:0 0 40px rgba(255,255,255,.1); }
.car-item.p-left  { transform:translateX(-65%) rotateY(20deg) scale(.8); opacity:.5; z-index:10; filter:blur(2px) brightness(.4); }
.car-item.p-right { transform:translateX(65%) rotateY(-20deg) scale(.8); opacity:.5; z-index:10; filter:blur(2px) brightness(.4); }
.car-item.p-hidden { opacity:0; transform:scale(.5); z-index:0; pointer-events:none; }
.car-btn { position:absolute; z-index:40; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; transition:background .2s; }
.car-btn:hover { background:rgba(255,255,255,.1); }
.car-prev { left:0; } @media(min-width:768px){ .car-prev { left:16px; } }
.car-next { right:0; } @media(min-width:768px){ .car-next { right:16px; } }
.mute-btn { position:absolute; bottom:12px; right:12px; z-index:50; width:32px; height:32px; border-radius:50%; background:rgba(0,0,0,.4); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; color:#fff; border:1px solid rgba(255,255,255,.2); opacity:0; transition:opacity .3s; }
.car-item.p-center:hover .mute-btn { opacity:1; }

/* STATS */
.car-stats { width:100%; max-width:384px; margin:0 auto; }
@media(min-width:1024px){ .car-stats { width:40%; margin:0; } }
.stats-box { padding:24px; border-radius:24px; border:1px solid rgba(255,255,255,.1); box-shadow:0 25px 50px rgba(0,0,0,.5); }
.st-hd { display:flex; align-items:center; gap:12px; margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,.1); }
.st-av { width:40px; height:40px; border-radius:50%; object-fit:cover; border:1px solid rgba(255,255,255,.2); flex-shrink:0; }
.st-name { font-weight:700; font-size:15px; color:#fff; line-height:1.2; white-space:pre-line; }
.st-role { font-size:9px; text-transform:uppercase; letter-spacing:.1em; color:#A1A1AA; font-weight:700; margin-top:4px; }
.st-views { font-size:clamp(2rem,4vw,2.5rem); font-weight:900; color:#fff; letter-spacing:-.025em; margin-bottom:16px; }
.st-bullets { list-style:none; display:flex; flex-direction:column; gap:12px; }
.st-bullets li { font-size:13px; color:#D1D5DB; font-weight:500; line-height:1.4; }
.st-socials { display:flex; align-items:center; gap:16px; margin-top:24px; padding-top:20px; border-top:1px solid rgba(255,255,255,.1); color:#A1A1AA; }
.st-socials a:hover { color:#fff; }

/* CLIENT SELECTOR */
.cli-sel { max-width:1280px; margin:48px auto 0; padding:0 16px; }
.cli-scroll { display:flex; align-items:center; gap:32px; overflow-x:auto; padding:24px 16px; scrollbar-width:none; -ms-overflow-style:none; justify-content:flex-start; }
@media(min-width:768px){ .cli-scroll { gap:56px; justify-content:center; } }
.cli-scroll::-webkit-scrollbar { display:none; }
.cli-btn { display:flex; flex-direction:column; align-items:center; gap:8px; flex-shrink:0; transition:all .2s; }
.cli-btn.active { transform:scale(1.1); }
.cli-btn:not(.active) { opacity:.8; filter:grayscale(50%); }
.cli-av { width:64px; height:64px; border-radius:50%; object-fit:cover; border:2px solid transparent; box-shadow:0 4px 15px rgba(0,0,0,.5); }
@media(min-width:768px){ .cli-av { width:80px; height:80px; } }
.cli-btn.active .cli-av { border-color:#fff; }
.cli-name { font-size:10px; font-weight:700; color:#9CA3AF; text-align:center; white-space:pre-line; transition:color .2s; }
@media(min-width:768px){ .cli-name { font-size:14px; } }
.cli-btn.active .cli-name { color:#fff; }
.cli-more { display:flex; flex-direction:column; align-items:center; gap:8px; flex-shrink:0; opacity:.4; }
.cli-more-ring { width:64px; height:64px; border-radius:50%; border:2px dashed rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; }
@media(min-width:768px){ .cli-more-ring { width:80px; height:80px; } }
.cli-more span { font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:-.025em; color:#fff; }
@media(min-width:768px){ .cli-more span { font-size:14px; } }
.swipe-hint { display:flex; align-items:center; gap:8px; justify-content:center; margin-top:8px; color:rgba(161,161,170,.4); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite; }
@media(min-width:768px){ .swipe-hint { display:none; } }

/* ECOSISTEMA */
#ecosistema { padding:96px 0; background:rgba(255,255,255,.02); border-top:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1); overflow:hidden; }
.eco-in { max-width:1280px; margin:0 auto; padding:0 16px; }
@media(min-width:768px){ .eco-in { padding:0 24px; } }
.badge { display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#A1A1AA; margin-bottom:16px; }
.show-hd { text-align:center; max-width:768px; margin:0 auto 48px; }
.show-hd p { font-size:clamp(15px,2vw,18px); color:#9CA3AF; font-weight:300; line-height:1.625; margin-top:16px; }
.show-hd p span { color:#fff; font-weight:500; }
.show-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; max-width:1700px; margin:0 auto; }
@media(min-width:768px){ .show-grid { grid-template-columns:repeat(4,1fr); gap:16px; } }
@media(min-width:1024px){ .show-grid { grid-template-columns:repeat(6,1fr); } }
@media(min-width:1280px){ .show-grid { grid-template-columns:repeat(8,1fr); } }
.show-item { aspect-ratio:9/16; overflow:hidden; border-radius:16px; padding:2px; }
@media(min-width:768px){ .show-item { border-radius:24px; padding:4px; } }
.show-item video { width:100%; height:100%; object-fit:cover; border-radius:13px; transition:transform .7s ease; }
@media(min-width:768px){ .show-item video { border-radius:21px; } }
.show-item:hover video { transform:scale(1.05); }
.team-hd { text-align:center; max-width:768px; margin:96px auto 64px; }
.team-hd p { color:#D1D5DB; margin-top:16px; line-height:1.625; }
.team-grid { display:grid; grid-template-columns:1fr; gap:24px; }
@media(min-width:768px){ .team-grid { grid-template-columns:repeat(2,1fr); } }
@media(min-width:1024px){ .team-grid { grid-template-columns:repeat(4,1fr); } }
.team-card { padding:24px; border-radius:40px; display:flex; flex-direction:column; align-items:center; text-align:center; border:1px solid rgba(255,255,255,.05); transition:transform .3s; }
@media(min-width:768px){ .team-card { padding:32px; } }
.team-card:hover { transform:translateY(-8px); }
.team-av-wrap { width:128px; height:128px; border-radius:50%; overflow:hidden; margin-bottom:24px; border:2px solid rgba(255,255,255,.1); padding:4px; transition:border-color .3s; }
@media(min-width:768px){ .team-av-wrap { width:144px; height:144px; } }
.team-card:hover .team-av-wrap { border-color:rgba(255,255,255,.4); }
.team-av-wrap img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.team-name { color:#fff; font-weight:700; font-size:20px; }
.team-role { font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:#A1A1AA; font-weight:700; margin:4px 0 16px; }
.team-desc { color:#9CA3AF; font-size:14px; line-height:1.625; font-weight:300; }

/* CONTACTO */
#contacto { padding:80px 16px; position:relative; overflow:hidden; }
@media(min-width:768px){ #contacto { padding:128px 24px; } }
.con-box { max-width:896px; margin:0 auto; text-align:center; padding:40px 24px; border-radius:40px; }
@media(min-width:768px){ .con-box { padding:64px; border-radius:48px; } }
.con-icon { display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.1); border-radius:50%; padding:16px; margin-bottom:8px; }
.con-title { font-size:clamp(2rem,5vw,4.5rem); font-weight:900; letter-spacing:-.05em; margin-bottom:16px; }
.con-desc { color:#D1D5DB; font-size:clamp(15px,2vw,20px); font-weight:300; max-width:512px; margin:0 auto 40px; line-height:1.625; }
.con-btn { display:inline-block; background:#fff; color:#000; padding:16px 40px; border-radius:999px; font-weight:700; font-size:clamp(15px,2vw,18px); box-shadow:0 0 40px rgba(255,255,255,.3); transition:transform .3s; }
.con-btn:hover { transform:scale(1.05); }

/* FOOTER */
footer { border-top:1px solid rgba(255,255,255,.1); padding:40px 16px; background:rgba(5,5,5,.8); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
@media(min-width:768px){ footer { padding:48px 24px; } }
.ft-in { max-width:1280px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:32px; text-align:center; }
@media(min-width:768px){ .ft-in { flex-direction:row; justify-content:space-between; text-align:left; } }
.ft-logo { height:32px; margin-bottom:8px; }
@media(min-width:768px){ .ft-logo { height:40px; } }
.ft-soc { display:flex; align-items:center; gap:16px; color:#A1A1AA; margin-bottom:8px; }
.ft-soc a:hover { color:#fff; }
.ft-copy { color:#A1A1AA; font-size:12px; }
.ft-legal { display:flex; flex-wrap:wrap; gap:6px 12px; justify-content:center; margin-top:8px; }
@media(min-width:768px){ .ft-legal { justify-content:flex-start; } }
.ft-legal a { color:#A1A1AA; font-size:12px; }
.ft-legal a:hover { color:#fff; text-decoration:underline; }
.ft-tag { color:rgba(161,161,170,.6); font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.2em; line-height:1.625; text-align:center; }
@media(min-width:768px){ .ft-tag { text-align:right; font-size:12px; } }

/* POPUP */
.popup { position:fixed; bottom:40px; left:50%; transform:translateX(-50%) translateY(100px); z-index:200; padding:16px 24px; border-radius:16px; border:1px solid rgba(255,255,255,.2); box-shadow:0 25px 50px rgba(0,0,0,.5); display:flex; align-items:center; gap:12px; white-space:nowrap; opacity:0; transition:transform .4s cubic-bezier(.34,1.56,.64,1), opacity .4s; pointer-events:none; }
.popup.show { transform:translateX(-50%) translateY(0); opacity:1; }
.popup-ic { background:rgba(255,255,255,.1); border-radius:50%; padding:8px; display:flex; }
.popup p { font-weight:700; font-size:14px; color:#fff; }
@media(min-width:768px){ .popup p { font-size:16px; } }

/* LEGAL PAGES */
.legal-main { position:relative; padding:120px 16px 80px; }
@media(min-width:768px){ .legal-main { padding:150px 24px 96px; } }
.legal-box { max-width:820px; margin:0 auto; padding:32px 20px; border-radius:32px; }
@media(min-width:768px){ .legal-box { padding:56px; border-radius:40px; } }
.legal-eyebrow { color:#A1A1AA; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; margin-bottom:16px; }
.legal-box h1 { font-size:clamp(1.9rem,4vw,2.75rem); margin-bottom:8px; }
.legal-updated { color:#9CA3AF; font-size:13px; margin-bottom:40px; }
.legal-box h2 { font-size:clamp(1.1rem,2.2vw,1.4rem); margin:36px 0 12px; }
.legal-box h2:first-of-type { margin-top:0; }
.legal-box p { color:#D1D5DB; font-weight:300; line-height:1.75; font-size:15px; margin-bottom:14px; }
.legal-box ul, .legal-box ol { color:#D1D5DB; font-weight:300; line-height:1.75; font-size:15px; margin:0 0 14px 20px; }
.legal-box li { margin-bottom:6px; }
.legal-box strong { color:#fff; font-weight:600; }
.legal-box a.inline-link { color:#fff; text-decoration:underline; }
.legal-info-card { border-radius:24px; padding:24px; margin:24px 0; }
.legal-info-card p { margin-bottom:8px; font-size:14px; }
.legal-info-card p:last-child { margin-bottom:0; }
.legal-back { display:inline-flex; align-items:center; gap:8px; color:#A1A1AA; font-size:13px; font-weight:600; margin-bottom:32px; }
.legal-back:hover { color:#fff; }
.contact-grid { display:grid; grid-template-columns:1fr; gap:16px; margin-top:8px; }
@media(min-width:640px){ .contact-grid { grid-template-columns:1fr 1fr; } }
.contact-card { border-radius:24px; padding:24px; }
.contact-card h3 { font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:#A1A1AA; font-weight:700; margin-bottom:10px; }
.contact-card p, .contact-card a { color:#D1D5DB; font-size:15px; font-weight:300; line-height:1.6; }
.contact-card a.inline-link { color:#fff; font-weight:600; text-decoration:none; }
.contact-card a.inline-link:hover { text-decoration:underline; }