:root{
  --bg:#041226;
  --bg-2:#071c3a;
  --panel:#0a1c35;
  --blue:#2f86ff;
  --blue-2:#67a9ff;
  --text:#f8fbff;
  --muted:#b8c8dc;
  --border:rgba(148,183,230,.22);
  --shadow:0 28px 90px rgba(0,0,0,.46);
  --radius:26px;
  --font-heading:"Sora","Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-body:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text);
  background:var(--bg);
}
a{color:inherit;text-decoration:none}
.site-shell{
  position:relative;
  min-height:100svh;
  overflow:hidden;
  padding:28px clamp(22px,5vw,112px) 0;
  background:
    radial-gradient(circle at 74% 38%, rgba(47,134,255,.34), transparent 30%),
    radial-gradient(circle at 88% 90%, rgba(47,134,255,.18), transparent 34%),
    linear-gradient(126deg,#020a16 0%,#061731 46%,#092752 100%);
}
.site-shell::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(87,145,220,.08) 1px, transparent 1px),
    linear-gradient(90deg,rgba(87,145,220,.08) 1px, transparent 1px);
  background-size:120px 120px;
  mask-image:linear-gradient(90deg,transparent,black 38%,black 84%,transparent);
  pointer-events:none;
}
.site-shell::after{
  content:"";
  position:absolute;
  width:620px;height:620px;
  right:7%;top:19%;
  border:1px solid rgba(91,155,255,.16);
  border-radius:50%;
  pointer-events:none;
}
.site-header{
  position:relative;z-index:5;
  height:56px;
  display:flex;align-items:center;justify-content:space-between;
  gap:32px;
}
.brand{display:flex;align-items:center;gap:12px;min-width:190px}
.brand-mark{width:36px;height:36px;display:grid;place-items:center}
.brand-mark svg{width:36px;height:36px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.brand-copy{line-height:.9;letter-spacing:.04em}
.brand-copy strong{display:block;font:800 25px/1 var(--font-heading);letter-spacing:.03em}
.brand-copy small{display:block;font:500 14px/1.15 var(--font-body);letter-spacing:.08em;margin-top:4px}
.desktop-nav{display:flex;align-items:center;gap:36px;font-weight:650;color:#eef5ff;font-size:15px}
.desktop-nav a{opacity:.94;transition:.2s ease}
.desktop-nav a:hover{color:var(--blue-2)}
.nav-cta{padding:14px 22px;border-radius:13px;background:linear-gradient(135deg,var(--blue),#1266e8);font-weight:750;box-shadow:0 16px 42px rgba(33,121,255,.32)}
.menu-button{display:none;background:transparent;border:0;width:42px;height:42px;padding:8px;cursor:pointer}
.menu-button span{display:block;height:3px;background:#fff;border-radius:99px;margin:6px 0}
.hero{
  position:relative;z-index:2;
  min-height:calc(100svh - 230px);
  display:grid;grid-template-columns:minmax(410px, .9fr) minmax(560px,1.1fr);
  align-items:center;
  gap:clamp(40px,6vw,98px);
  padding:90px 0 46px;
}
.hero-content{max-width:690px}
.eyebrow{
  margin:0 0 26px;
  text-transform:uppercase;
  letter-spacing:.28em;
  color:var(--blue-2);
  font-weight:600;
  font-size:11px;
}
h1{
  margin:0;
  font-family:var(--font-heading);
  font-size:clamp(54px,5.4vw,60px);
  line-height:1.05;
  letter-spacing:-.050em;
  max-width:500px;
  text-wrap:balance;
}
h1 span{color:var(--blue)}
.hero-text{
  margin:30px 0 30px;
  max-width:600px;
  color:var(--muted);
  font-size:clamp(17px,1.4vw,18px);
  line-height:1.5;
}
.hero-actions{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-bottom:34px}
.btn{
  min-height:58px;
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  border-radius:13px;padding:0 28px;
  font-weight:780;font-size:16px;
}
.btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn-primary{background:linear-gradient(135deg,#2592ff,#1267f4);box-shadow:0 18px 46px rgba(33,121,255,.35)}
.btn-secondary{border:1px solid rgba(218,232,255,.26);background:rgba(255,255,255,.035);backdrop-filter:blur(10px)}
.features{
  display:grid;grid-template-columns:repeat(4,max-content);
  gap:15px;
  align-items:center;
  list-style:none;margin:0;padding:0;
  color:#d8e5f5;font-weight:400;
}
.features li{display:flex;gap:9px;align-items:center;white-space:nowrap;position:relative}
.features li:not(:last-child)::after{content:"";width:1px;height:22px;background:var(--border);margin-left:14px}
.features span{width:18px;height:18px;border-radius:50%;border:2px solid var(--blue);position:relative;flex:0 0 auto}
.features span::after{content:"";position:absolute;width:7px;height:4px;border-left:2px solid var(--blue-2);border-bottom:2px solid var(--blue-2);transform:rotate(-45deg);left:4px;top:4px}
.portfolio-preview{
  position:relative;
  min-height:570px;
  perspective:1200px;
}

.portfolio-shot{
  position:absolute;
  display:block;
  height:auto;
  object-fit:contain;
  border-radius:26px;
  filter:drop-shadow(0 30px 70px rgba(0,0,0,.42)) drop-shadow(0 0 22px rgba(47,134,255,.22));
  user-select:none;
  pointer-events:auto;
  cursor:pointer;
  will-change:transform;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),filter .3s ease,opacity .3s ease;
}
.portfolio-shot--nekora{
  width:630px;
  right:13%;
  top: -39px;;
  transform:rotate(3deg);
  z-index:1;
}
.portfolio-shot--aura{
  width:520px;
  left: -60px;
  bottom:68px;
  z-index:3;
}
.portfolio-shot--finvest{
  width:540px;
  right: 8px;
  bottom:-35px;
  z-index:4;
}

/* ===== Pop / hover premium del portfolio ===== */
.portfolio-shot:hover{
  transform:translateY(-12px) scale(1.045);
  z-index:20;
  filter:
    drop-shadow(0 36px 80px rgba(0,0,0,.5))
    drop-shadow(0 0 40px rgba(47,134,255,.5))
    brightness(1.06) contrast(1.03);
}
/* nekora conserva su inclinación al hacer pop */
.portfolio-shot--nekora:hover{
  transform:translateY(-12px) scale(1.045) rotate(3deg);
}
/* las demás bajan apenas su brillo para que la activa destaque */
.portfolio-preview:hover .portfolio-shot:not(:hover){
  opacity:.7;
  filter:
    drop-shadow(0 30px 70px rgba(0,0,0,.42))
    drop-shadow(0 0 22px rgba(47,134,255,.18))
    brightness(.86) saturate(.95);
}
@media (prefers-reduced-motion:reduce){
  .portfolio-shot{transition:filter .2s ease,opacity .2s ease}
  .portfolio-shot:hover,.portfolio-shot--nekora:hover{transform:none}
}
.project-card{
  position:absolute;
  border:1px solid rgba(159,198,255,.22);
  border-radius:var(--radius);
  background:linear-gradient(145deg,rgba(9,26,50,.96),rgba(4,14,28,.96));
  box-shadow:var(--shadow),0 0 0 1px rgba(47,134,255,.05) inset;
  overflow:hidden;
}
.project-card::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,rgba(255,255,255,.08),transparent 38%);pointer-events:none}
.browser-dots{position:absolute;top:14px;left:17px;display:flex;gap:7px;z-index:3}
.browser-dots i{width:7px;height:7px;border-radius:50%;background:#b74d5e}.browser-dots i:nth-child(2){background:#d2a245}.browser-dots i:nth-child(3){background:#58bf7a}
.project-nav{height:45px;display:flex;align-items:center;gap:18px;padding:0 26px;color:#b8c9dd;font-size:11px;position:relative;z-index:2}
.project-nav strong{margin-right:auto;color:#fff;letter-spacing:.08em}.project-nav.light{color:#243247}.project-nav.light strong{color:#111827}
.project-body{padding:22px 28px 28px;position:relative;z-index:2}.split{display:grid;grid-template-columns:1fr .95fr;gap:20px;align-items:center}
.project-body h2{margin:0 0 13px;font:650 30px/1.08 var(--font-heading);letter-spacing:-.04em}.project-body p{margin:0 0 18px;color:#adc1d8;font-size:12px;line-height:1.55}.project-body b{display:inline-block;padding:9px 13px;border:1px solid rgba(255,255,255,.18);border-radius:8px;font-size:11px;color:#fff}
.project-card--real-estate{width:600px;height:310px;right:8%;top:0;transform:rotate(3deg);z-index:1}
.house-visual{height:178px;border-radius:16px;background:linear-gradient(180deg,#112b4d,#071523);position:relative;overflow:hidden;box-shadow:inset 0 0 40px rgba(0,0,0,.45)}
.house-visual span:nth-child(1){position:absolute;left:30px;right:25px;bottom:42px;height:72px;background:linear-gradient(90deg,#111827,#22364e);clip-path:polygon(0 100%,12% 20%,100% 0,100% 100%)}
.house-visual span:nth-child(2){position:absolute;left:72px;right:82px;bottom:50px;height:45px;background:repeating-linear-gradient(90deg,#f6c36f 0 18px,#1a2940 18px 28px);opacity:.85}
.house-visual span:nth-child(3){position:absolute;inset:auto -10px 0;height:36px;background:linear-gradient(180deg,rgba(55,137,255,.3),rgba(255,255,255,.03))}
.project-card--fashion{width:500px;height:310px;left:0;bottom:62px;background:linear-gradient(140deg,#efe7db,#cfc5b7);color:#111827;z-index:3}
.project-card--fashion .project-body h2{font-size:27px;color:#151515}.project-card--fashion .project-body p{color:#536070}.project-card--fashion .project-body b{background:#111827;color:#fff}.model-visual{height:170px;border-radius:14px;background:linear-gradient(160deg,#f2e8db,#c9b7a3);position:relative;overflow:hidden}.model-visual span{position:absolute;left:35%;bottom:-12px;width:86px;height:160px;border-radius:48% 48% 0 0;background:linear-gradient(180deg,#dcc6ae 0 30%,#fff 30%);box-shadow:0 0 0 22px rgba(255,255,255,.25)}.brand-row{display:flex;justify-content:space-around;border-top:1px solid rgba(0,0,0,.08);padding:11px 22px 0;font:700 12px/1 serif;color:#171717}
.project-card--finance{width:520px;height:292px;right:0;bottom:35px;z-index:4}.project-card--finance .project-body h2{font-size:30px}.globe-visual{width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#77c3ff,#1267f4 34%,#06204a 62%,transparent 64%);box-shadow:0 0 50px rgba(47,134,255,.58);position:relative}.globe-visual::before{content:"";position:absolute;inset:22px -18px;border:1px solid rgba(103,169,255,.55);border-radius:50%;transform:rotate(-24deg)}.metric-row{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.09);padding:14px 22px;font-weight:800;color:#fff}.metric-row span{font-size:16px}.metric-row span:not(:first-child){border-left:1px solid rgba(255,255,255,.1);padding-left:16px}
.proof-strip{
  position:relative;z-index:3;
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--border);
  padding:32px 0 42px;
}
.proof-item{display:flex;align-items:center;justify-content:center;gap:16px;min-height:62px}.proof-item:not(:first-child){border-left:1px solid var(--border)}.proof-item strong{font-size:23px;letter-spacing:-.03em}.proof-item small{display:block;color:var(--muted);font-size:18px}.proof-icon{width:48px;height:48px;border:1px solid rgba(69,145,255,.6);border-radius:50%;position:relative;box-shadow:0 0 35px rgba(47,134,255,.16) inset}.proof-icon::after{content:"";position:absolute;inset:14px;border:2px solid var(--blue);border-radius:5px;transform:rotate(45deg)}.proof-icon.diamond::after{border-radius:0}.proof-icon.bolt::after{clip-path:polygon(48% 0,15% 55%,47% 55%,38% 100%,85% 38%,53% 38%);background:var(--blue);border:0;transform:none}.proof-icon.target::after{border-radius:50%;inset:12px}.proof-icon.target::before{content:"";position:absolute;inset:20px;background:var(--blue);border-radius:50%}
@media (max-width:1100px){
  .desktop-nav,.nav-cta{display:none}.menu-button{display:block}.site-header{border-bottom:1px solid var(--border);height:72px}.hero{grid-template-columns:1fr;padding:48px 0 30px;gap:38px}.hero-content{max-width:100%}.portfolio-preview{min-height:500px}.project-card--real-estate{right:5%;top:0}.project-card--fashion{left:4%;bottom:40px}.project-card--finance{right:3%;bottom:8px}.proof-strip{grid-template-columns:repeat(2,1fr);gap:0}.proof-item{justify-content:flex-start;padding:18px 8px}.proof-item:nth-child(odd){border-left:0}.proof-item:nth-child(n+3){border-top:1px solid var(--border)}
}
@media (max-width:720px){
  .site-shell{padding:24px 26px 0;min-height:100svh}.site-shell::after{display:none}.brand-mark{width:30px;height:30px}.brand-mark svg{width:30px;height:30px}.brand-copy strong{font-size:22px}.brand-copy small{font-size:14px}.hero{padding-top:48px}.eyebrow{font-size:13px;letter-spacing:.22em;line-height:1.7;margin-bottom:22px}h1{font-size:clamp(48px,13vw,66px);line-height:1.08;letter-spacing:-.06em}.hero-text{font-size:20px;line-height:1.62;margin:24px 0 28px}.hero-actions{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:30px}.btn{width:100%;min-height:68px;font-size:23px;border-radius:12px}.features{grid-template-columns:repeat(4,1fr);gap:0}.features li{flex-direction:column;align-items:flex-start;font-size:18px;line-height:1.25;white-space:normal;padding-right:10px}.features li:not(:last-child)::after{position:absolute;right:10px;height:36px;margin:0}.features span{width:22px;height:22px}.portfolio-preview{margin:34px -10px 0;min-height:630px}.project-card{border-radius:18px}.project-card--real-estate{width:92%;height:285px;right:0;left:auto;top:0;transform:none}.project-card--fashion{width:61%;height:320px;left:0;top:250px;bottom:auto}.project-card--finance{width:56%;height:330px;right:0;top:315px;bottom:auto}.project-nav{height:38px;padding:0 18px;gap:10px}.project-nav span{display:none}.project-body{padding:18px}.split{grid-template-columns:1fr;gap:12px}.project-body h2{font-size:26px}.project-body p{font-size:11px}.project-card--real-estate .split{grid-template-columns:.72fr 1fr}.project-card--real-estate .project-body h2{font-size:24px}.house-visual{height:160px}.project-card--fashion .split{grid-template-columns:1fr}.model-visual{height:140px}.project-card--fashion .project-body h2{font-size:22px}.brand-row{font-size:11px}.project-card--finance .project-body h2{font-size:24px}.globe-visual{width:112px;height:112px;position:absolute;right:18px;top:75px;opacity:.95}.metric-row{grid-template-columns:repeat(2,1fr);font-size:12px;gap:6px}.proof-strip{display:none}
}
@media (max-width:430px){
  .site-shell{padding-inline:22px}.hero-text{font-size:17px}.features li{font-size:15px}.portfolio-preview{min-height:560px}.project-card--fashion{height:280px}.project-card--finance{height:300px}.project-body h2,.project-card--real-estate .project-body h2{font-size:21px}.project-card--fashion .project-body h2,.project-card--finance .project-body h2{font-size:20px}.btn{font-size:19px}
}


@media (max-width:1100px){
  .portfolio-shot--nekora{right:5%;top:0;width:min(680px,92%);}
  .portfolio-shot--aura{left:4%;bottom:58px;width:min(540px,58%);}
  .portfolio-shot--finvest{right:3%;bottom:12px;width:min(560px,58%);}
}
@media (max-width:720px){
  .portfolio-shot{border-radius:18px;filter:drop-shadow(0 22px 46px rgba(0,0,0,.42)) drop-shadow(0 0 18px rgba(47,134,255,.2));}
  .portfolio-shot--nekora{width:94%;right:0;left:auto;top:0;transform:none;}
  .portfolio-shot--aura{width:64%;left:0;top:248px;bottom:auto;}
  .portfolio-shot--finvest{width:60%;right:0;top:318px;bottom:auto;}
}
@media (max-width:430px){
  .portfolio-shot--nekora{width:98%;top:0;}
  .portfolio-shot--aura{width:68%;top:225px;}
  .portfolio-shot--finvest{width:64%;top:285px;}
}

/* ===== Ajustes responsive del hero ===== */
/* Desktop intermedio: achicar y correr los mockups a la derecha
   para que NO invadan/tapen el texto y las features del hero. */
@media (min-width:1441px) and (max-width:1600px){
  .portfolio-preview{transform:scale(.9);transform-origin:center right}
}
@media (min-width:1367px) and (max-width:1440px){
  .hero{gap:clamp(28px,3.2vw,56px)}
  .portfolio-preview{transform:scale(.84);transform-origin:center right}
}
@media (min-width:1101px) and (max-width:1366px){
  .hero{gap:clamp(24px,2.6vw,48px)}
  .features{gap:12px}
  .portfolio-preview{transform:scale(.76);transform-origin:center right}
}
/* Mobile: hero más compacto y proporcionado (título, botones, espacios) */
@media (max-width:768px){
  .hero{padding-top:36px}
  h1{font-size:clamp(40px,11vw,52px);line-height:1.06}
  .hero-text{font-size:17px;line-height:1.55;margin:20px 0 24px}
  .hero-actions{margin-bottom:26px}
  .btn{min-height:56px;font-size:17px}
}
@media (max-width:520px){
  .hero{padding-top:28px}
  h1{font-size:clamp(34px,10.5vw,46px)}
  .hero-text{font-size:16px}
  .btn{min-height:54px;font-size:16px}
  .features li{font-size:14px}
}
@media (max-width:390px){
  h1{font-size:32px}
}

/* ===== Mobile: mockups del hero como composición compacta ===== */
@media (max-width:768px){
  .portfolio-preview{
    width:100%;
    max-width:360px;
    height:360px;
    min-height:0;
    margin:32px auto 0;
    transform:none;
  }
  .portfolio-shot{
    border-radius:16px;
    filter:drop-shadow(0 16px 34px rgba(0,0,0,.42)) drop-shadow(0 0 14px rgba(47,134,255,.2));
  }
  .portfolio-shot--nekora{width:92%;left:4%;right:auto;top:0;bottom:auto;transform:none}
  .portfolio-shot--aura{width:62%;left:0;right:auto;top:170px;bottom:auto}
  .portfolio-shot--finvest{width:62%;right:0;left:auto;top:210px;bottom:auto}
}
@media (max-width:390px){
  .portfolio-preview{max-width:320px;height:320px;margin-top:26px}
  .portfolio-shot--nekora{width:90%;top:0}
  .portfolio-shot--aura{width:58%;top:150px}
  .portfolio-shot--finvest{width:58%;top:182px}
}

/* ===== Menú mobile (desplegable del hamburguesa) ===== */
@media (max-width:1100px){
  .desktop-nav{
    position:absolute;
    top:calc(100% + 12px);
    right:0;left:auto;
    width:min(280px, calc(100vw - 52px));
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    padding:12px;
    border-radius:16px;
    background:linear-gradient(180deg,rgba(8,18,38,.98),rgba(4,10,26,.98));
    border:1px solid rgba(148,183,230,.18);
    box-shadow:0 24px 60px rgba(2,8,20,.55);
    z-index:60;
    display:none;
  }
  .desktop-nav.is-open{display:flex}
  .desktop-nav a{
    padding:12px 14px;
    border-radius:10px;
    font-size:15px;
    opacity:1;
  }
  .desktop-nav a:hover{background:rgba(47,134,255,.12);color:#fff}

  /* animación del ícono a "X" al abrir */
  .menu-button span{transition:transform .25s ease, opacity .2s ease}
  .menu-button.is-open span:nth-child(1){transform:translateY(9px) rotate(45deg)}
  .menu-button.is-open span:nth-child(2){opacity:0}
  .menu-button.is-open span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
}