/* =========================================================
   RYZTOR — Software · IA · Soluciones digitales
   Home v1  (estética oscura, tipografía grande)
   ========================================================= */

:root{
  --bg:        #0a0a0b;
  --bg-2:      #101012;
  --bg-3:      #17171a;
  --fg:        #f4f4f6;
  --muted:     #9a9aa5;
  --muted-2:   #6f6f7a;
  --accent:    #6020f8;
  --accent-2:  #8a5cff;
  --line:      rgba(255,255,255,.09);
  --line-2:    rgba(255,255,255,.16);
  --radius:    18px;
  --radius-lg: 26px;
  --maxw:      1240px;
  --nav-h:     76px;
  --ease:      cubic-bezier(.22,.61,.36,1);
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; }

body{
  background:var(--bg);
  color:var(--fg);
  font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size:17px;
  line-height:1.6;
  letter-spacing:-.01em;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}

::selection{ background:var(--accent); color:#fff; }

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; border:0; background:none; color:inherit; }

.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px; }

/* ---------- Tipografía de titulares ---------- */
h1,h2,h3{ font-family:"Inter",sans-serif; font-weight:800; line-height:1.02; letter-spacing:-.035em; }
.display{ font-size:clamp(2.35rem, 5.4vw, 4.7rem); }
h2.section-title{ font-size:clamp(2rem, 4.6vw, 3.6rem); }
h3{ font-size:clamp(1.25rem, 2vw, 1.65rem); }
.eyebrow{
  display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
  font-size:.78rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted);
}
.eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 14px var(--accent); }
.lead{ color:var(--muted); font-size:clamp(1rem,1.4vw,1.2rem); max-width:56ch; }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px; border-radius:100px;
  font-size:.95rem; font-weight:600; letter-spacing:-.01em;
  transition:transform .35s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  white-space:nowrap;
}
.btn svg{ transition:transform .35s var(--ease); }
.btn-primary{ background:var(--fg); color:#0a0a0b; }
.btn-primary:hover{ transform:translateY(-2px); background:#fff; }
.btn-primary:hover svg{ transform:translate(3px,-3px); }
.btn-ghost{ border:1px solid var(--line-2); color:var(--fg); }
.btn-ghost:hover{ transform:translateY(-2px); border-color:var(--fg); background:rgba(255,255,255,.04); }
.btn-accent{ background:var(--accent); color:#fff; }
.btn-accent:hover{ transform:translateY(-2px); background:var(--accent-2); }

/* ---------- Navegación ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; height:var(--nav-h); z-index:120;
  display:flex; align-items:center;
  transition:background .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(10,10,11,.7);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom-color:var(--line);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; }
.nav-right{ display:flex; align-items:center; gap:14px; }

/* Selector de idioma */
.lang-switch{ position:relative; }
.lang-btn{ display:flex; align-items:center; gap:8px; padding:7px 12px; border:1px solid var(--line-2); border-radius:100px; background:rgba(255,255,255,.04); color:var(--fg); font-size:.78rem; font-weight:700; letter-spacing:.06em; cursor:pointer; }
.lang-btn img{ width:20px; height:14px; border-radius:2px; object-fit:cover; display:block; }
.lang-menu{ position:absolute; top:calc(100% + 8px); right:0; min-width:172px; background:rgba(16,16,18,.98); border:1px solid var(--line-2); border-radius:12px; padding:6px; box-shadow:0 20px 50px rgba(0,0,0,.5); opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s; z-index:210; }
.lang-switch.open .lang-menu{ opacity:1; visibility:visible; transform:none; }
.lang-menu button{ display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; border-radius:8px; color:var(--fg); font-size:.88rem; background:none; cursor:pointer; text-align:left; }
.lang-menu button img{ width:22px; height:15px; border-radius:2px; object-fit:cover; }
.lang-menu button:hover, .lang-menu button.on{ background:rgba(255,255,255,.07); }
.brand{ display:flex; align-items:center; gap:11px; font-family:"Inter",sans-serif; font-weight:700; font-size:1.32rem; letter-spacing:.16em; }
.brand img{ width:30px; height:30px; border-radius:8px; }

/* Hamburguesa (dos líneas cortas, como el original) */
.burger{ position:relative; width:44px; height:44px; }
.burger span,
.burger span::before{
  content:""; position:absolute; right:2px; height:2px; background:var(--fg); border-radius:2px;
  transition:top .35s var(--ease), width .35s var(--ease), transform .35s var(--ease);
}
.burger span{ top:20px; width:26px; }
.burger span::before{ top:-8px; width:18px; }
.burger.active span{ top:21px; transform:rotate(45deg); }
.burger.active span::before{ top:0; width:26px; transform:rotate(-90deg); }

/* ---------- Menú overlay ---------- */
.menu-overlay{
  position:fixed; inset:0; z-index:110; background:rgba(8,8,9,.98);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  display:flex; flex-direction:column; justify-content:center; padding:0 clamp(24px,8vw,140px);
  opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility .5s;
}
.menu-overlay.open{ opacity:1; visibility:visible; }
.menu-links{ display:flex; flex-direction:column; }
.menu-links a{
  font-family:"Inter",sans-serif; font-weight:700; line-height:1.05;
  font-size:clamp(2.1rem,6.5vw,4.6rem); letter-spacing:-.02em; color:var(--fg);
  display:flex; align-items:baseline; gap:20px; padding:8px 0;
  transition:color .3s var(--ease), transform .45s var(--ease);
}
.menu-links a em{ font-family:"Inter",sans-serif; font-style:normal; font-weight:500; font-size:.85rem; color:var(--muted-2); }
.menu-links a:hover{ color:var(--accent-2); transform:translateX(12px); }
.menu-foot{ margin-top:64px; border-top:1px solid var(--line); padding-top:26px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; color:var(--muted); }
.menu-foot a{ color:var(--muted); transition:color .25s; }
.menu-foot a:hover{ color:var(--fg); }
.menu-social{ display:flex; gap:26px; }
body.menu-open{ overflow:hidden; }

/* ---------- Hero ---------- */
.hero{ position:relative; padding:calc(var(--nav-h) + 76px) 0 clamp(70px,9vw,120px); overflow:hidden; }
.hero-bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(1000px 760px at 72% 4%, rgba(96,32,248,.22), transparent 62%),
    radial-gradient(800px 620px at 16% 46%, rgba(96,32,248,.08), transparent 60%),
    #0a0a0b;
}
.hero-bg::after{
  content:""; position:absolute; top:-12%; left:60%; width:30vw; height:130%;
  transform:translateX(-50%) rotate(9deg); border-radius:50%;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  filter:blur(46px);
}
.hero-grid{
  position:absolute; inset:0; z-index:0; opacity:.4;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 50% 30%, #000 40%, transparent 80%);
  -webkit-mask-image:radial-gradient(circle at 50% 30%, #000 40%, transparent 80%);
}

/* Video en loop de fondo del hero */
.hero-video{
  position:absolute; top:0; right:0; width:66%; height:100%; z-index:0;
  object-fit:cover; opacity:.5; pointer-events:none;
  -webkit-mask-image:linear-gradient(to left, #000 42%, transparent 100%);
  mask-image:linear-gradient(to left, #000 42%, transparent 100%);
  filter:saturate(1.12) contrast(1.03);
}

/* Luces animadas del hero */
.hero-blobs{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.hero-blobs span{ position:absolute; border-radius:50%; filter:blur(72px); will-change:transform; }
.hero-blobs span:nth-child(1){ width:46vw; height:46vw; left:54%; top:-16%; background:radial-gradient(circle, rgba(96,32,248,.62), transparent 62%); animation:blob1 16s ease-in-out infinite; }
.hero-blobs span:nth-child(2){ width:36vw; height:36vw; left:4%; top:32%;  background:radial-gradient(circle, rgba(138,92,255,.42), transparent 62%); animation:blob2 21s ease-in-out infinite; }
@keyframes blob1{ 0%,100%{ transform:translate(0,0) scale(1) } 50%{ transform:translate(-5%,7%) scale(1.08) } }
@keyframes blob2{ 0%,100%{ transform:translate(0,0) scale(1) } 50%{ transform:translate(7%,-5%) scale(1.1) } }

/* Spotlight que sigue el cursor */
.hero-spot{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0;
  transition:opacity .5s var(--ease);
  background:radial-gradient(560px circle at var(--mx,72%) var(--my,28%), rgba(96,32,248,.22), transparent 62%);
}
.hero:hover .hero-spot{ opacity:1; }

/* Badge "disponible" con pulso */
.badge-avail{ display:inline-flex; align-items:center; gap:10px; padding:9px 16px; border:1px solid var(--line-2); border-radius:100px; font-size:.8rem; font-weight:500; color:var(--fg); letter-spacing:.02em; background:rgba(255,255,255,.03); }
.badge-avail i{ width:8px; height:8px; border-radius:50%; background:#34d399; animation:pulse 2s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(52,211,153,.55); } 70%{ box-shadow:0 0 0 10px rgba(52,211,153,0); } 100%{ box-shadow:0 0 0 0 rgba(52,211,153,0); } }

/* Marquee de clientes */
.hero-clients{ margin-top:clamp(44px,7vw,90px); }
.hero-clients-label{ font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted-2); }
.hero-clients-marquee{ margin-top:18px; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); }
.hero-clients-track{ display:flex; gap:clamp(30px,4vw,58px); width:max-content; animation:marq 32s linear infinite; }
.hero-clients-track span{ font-weight:700; font-size:clamp(1.05rem,1.6vw,1.4rem); color:var(--muted); white-space:nowrap; transition:color .3s var(--ease); }
.hero-clients-track span:hover{ color:var(--fg); }
@keyframes marq{ to{ transform:translateX(-50%); } }

/* Indicador de scroll */
.hero-scroll{ display:flex; flex-direction:column; align-items:center; gap:10px; margin:46px auto 0; width:max-content; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-2); transition:color .3s; }
.hero-scroll:hover{ color:var(--fg); }
.hero-scroll-line{ position:relative; width:1px; height:46px; background:rgba(255,255,255,.15); overflow:hidden; }
.hero-scroll-line::after{ content:""; position:absolute; left:0; top:-45%; width:1px; height:45%; background:var(--accent-2); animation:scrolldot 1.7s var(--ease) infinite; }
@keyframes scrolldot{ 0%{ top:-45%; } 100%{ top:100%; } }
.hero-top{ position:relative; z-index:2; display:grid; grid-template-columns:1.45fr .55fr; gap:56px; align-items:start; padding-bottom:70px; }
.hero-copy{ min-width:0; }
.hero .display{ margin-top:22px; max-width:16ch; }
.hl{ color:var(--accent-2); }
.hero .lead{ margin-top:28px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; }
.hero-aside{ display:flex; flex-direction:column; gap:60px; padding-top:12px; }
.trust-badge{ display:flex; align-items:center; gap:16px; }
.hero-proof{ display:flex; align-items:center; gap:16px; }
.hero-proof .proof-num{ font-family:"Inter",sans-serif; font-weight:800; font-size:2.2rem; line-height:1; color:var(--fg); }
.hero-proof .proof-txt b{ display:block; font-weight:600; font-size:.95rem; }
.hero-proof .proof-txt span{ display:block; font-size:.78rem; color:var(--muted); letter-spacing:.02em; margin-top:3px; }
.hero-proof .proof-txt{ border-left:1px solid var(--line-2); padding-left:16px; }
.avatars{ display:flex; }
.avatars span{
  width:40px; height:40px; margin-left:-13px; border-radius:50%;
  display:grid; place-items:center; font-weight:600; font-size:.85rem; color:#fff;
  border:2px solid var(--bg); background:var(--accent);
}
.avatars span:first-child{ margin-left:0; }
.avatars span:nth-child(2){ background:#26262c; }
.avatars span:nth-child(3){ background:#3a3a44; }
.avatars span:nth-child(4){ background:#4d3aa8; }
.trust-txt b{ display:block; font-family:"Inter",sans-serif; font-size:1.05rem; }
.trust-txt span{ display:block; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:2px; }
.collab-label{ font-size:.82rem; color:var(--muted); margin-bottom:12px; }
.collab-box{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 22px; border:1px solid var(--line-2); border-radius:12px;
  color:var(--fg); font-size:.95rem; background:rgba(255,255,255,.02);
  transition:border-color .35s var(--ease), transform .35s var(--ease), background .35s var(--ease);
}
.collab-box:hover{ border-color:var(--fg); transform:translateY(-3px); background:rgba(255,255,255,.06); }
.collab-box svg{ color:var(--accent-2); flex:none; }

/* Marca gigante en la base del hero */
.hero-mark{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  text-align:center; white-space:nowrap; pointer-events:none; user-select:none;
  font-family:"Inter",sans-serif; font-weight:900; letter-spacing:-.03em;
  font-size:23.5vw; line-height:.78; color:#f4f4f6;
  transform:translateY(34%);
  will-change:transform;
}

/* ---------- Secciones claras (como el original) ---------- */
.section-light{
  --bg:#f4f4f5; --bg-2:#ffffff; --bg-3:#ececef;
  --fg:#0a0a0b; --muted:#55555f; --muted-2:#8a8a94;
  --line:rgba(0,0,0,.10); --line-2:rgba(0,0,0,.20);
  background:var(--bg); color:var(--fg);
}
.section-light .btn-primary{ background:#0a0a0b; color:#fff; }
.section-light .btn-primary:hover{ background:#26262c; }
.section-light .btn-ghost{ border-color:var(--line-2); color:var(--fg); }
.section-light .btn-ghost:hover{ border-color:var(--fg); background:rgba(0,0,0,.04); }
.section-light .card{ background:#fff; }
.section-light .card::after{ background:radial-gradient(500px 200px at 50% -20%, rgba(96,32,248,.12), transparent 70%); }
.section-light .stat b{ color:var(--fg); }

/* ---------- Banda de marca (RYZTOR gigante) ---------- */
.mark-band{ position:relative; padding:0; overflow:hidden; }
.mark-band-inner{ padding:clamp(28px,5vw,64px) 0 0; }
.mark-word{
  font-family:"Inter",sans-serif; font-weight:900; line-height:.8; letter-spacing:-.035em;
  font-size:25vw; white-space:nowrap; text-align:center; color:#0a0a0b;
  transform:translateX(0); will-change:transform;
}
.mark-cap{ text-align:center; padding:clamp(16px,2.4vw,30px) 0 clamp(44px,7vw,92px); }
.mark-cap .eyebrow{ color:#6f6f7a; }

/* ---------- Marquee ---------- */
.marquee{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:26px 0; overflow:hidden; background:var(--bg-2); }
.marquee-track{ display:flex; gap:60px; width:max-content; animation:marquee 26s linear infinite; }
.marquee-track span{
  font-family:"Inter",sans-serif; font-weight:700;
  font-size:clamp(2.4rem, 6vw, 5rem); letter-spacing:-.02em; color:transparent;
  -webkit-text-stroke:1px var(--line-2);
}
.marquee-track span.solid{ color:var(--fg); -webkit-text-stroke:0; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ---------- Secciones ---------- */
section{ padding:110px 0; }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; margin-bottom:56px; }

/* Servicios */
.services{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card{
  position:relative; background:var(--bg-2); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:34px 30px 38px; overflow:hidden;
  transition:transform .45s var(--ease), border-color .45s var(--ease), background .45s var(--ease);
}
.card::after{ content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(500px 200px at 50% -20%, rgba(96,32,248,.16), transparent 70%); opacity:0; transition:opacity .45s var(--ease); }
.card:hover{ transform:translateY(-6px); border-color:var(--line-2); }
.card:hover::after{ opacity:1; }
.card .ic{ width:52px; height:52px; border-radius:14px; display:grid; place-items:center; background:rgba(96,32,248,.12); border:1px solid rgba(96,32,248,.3); color:var(--accent-2); margin-bottom:22px; }
.card h3{ margin-bottom:12px; }
.card p{ color:var(--muted); font-size:.98rem; }
.card .num{ position:absolute; top:26px; right:30px; font-size:.8rem; color:var(--muted-2); font-family:"Inter",sans-serif; }

/* Proyectos */
.projects{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.project{
  position:relative; border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; background:var(--bg-2); display:block;
  transition:transform .5s var(--ease), border-color .5s var(--ease);
}
.project:hover{ transform:translateY(-6px); border-color:var(--line-2); }
.project .shot{ aspect-ratio:16/10; overflow:hidden; background:var(--bg-3); }
.project .shot img{ width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .7s var(--ease); }
.project:hover .shot img{ transform:scale(1.05); }
.project .meta{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 24px; }
.project .meta h3{ font-size:1.2rem; }
.project .meta span{ color:var(--muted); font-size:.86rem; }
.project .arrow{ width:40px; height:40px; border-radius:50%; border:1px solid var(--line-2); display:grid; place-items:center; flex:none; transition:.4s var(--ease); }
.project:hover .arrow{ background:var(--fg); color:#0a0a0b; border-color:var(--fg); }

/* ---------- Servicios: galería horizontal pineada (distinta a Proyectos) ---------- */
.svc-hscroll{ position:relative; background:#050505; color:#f4f4f6; overflow:clip; }
.svc-pin{
  position:sticky; top:0; height:100vh; display:flex; flex-direction:column; justify-content:center;
  gap:clamp(26px,4vw,52px); padding:calc(var(--nav-h) + 10px) clamp(20px,4vw,64px) 44px; overflow:hidden;
}
.svc-pin-head{ max-width:82ch; }
.svc-pin-head .eyebrow{ color:#b8b8c0; }
.svc-pin-head .section-title{ color:#fff; font-size:clamp(1.6rem,3vw,2.6rem); margin-top:14px; }
.svc-pin-head .hl{ color:var(--accent-2); }
.svc-pin-head .lead{ color:#b8b8c0; margin-top:14px; max-width:52ch; }

.svc-track{ display:flex; gap:clamp(16px,2vw,26px); will-change:transform; }
.svc-card{ flex:0 0 auto; width:clamp(300px,30vw,440px); }
.svc-card-img{ aspect-ratio:3/2; border-radius:16px; overflow:hidden; background:#fff; border:1px solid rgba(255,255,255,.12); box-shadow:0 30px 70px rgba(0,0,0,.5); }
.svc-card-img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.svc-card:hover .svc-card-img img{ transform:scale(1.05); }
.svc-card-body{ margin-top:18px; }
.svc-num{ font-size:.78rem; letter-spacing:.2em; color:#8a8a94; font-weight:600; }
.svc-card-body h3{ color:#fff; font-size:clamp(1.15rem,1.7vw,1.5rem); margin-top:8px; transition:color .3s var(--ease); }
.svc-card:hover .svc-card-body h3{ color:var(--accent-2); }
.svc-card-body p{ color:#b8b8c0; font-size:.95rem; margin-top:8px; max-width:44ch; }

.svc-progress{ height:3px; width:100%; max-width:360px; background:rgba(255,255,255,.14); border-radius:3px; overflow:hidden; }
.svc-progress span{ display:block; height:100%; width:0; background:var(--accent-2); border-radius:3px; transition:width .1s linear; }

/* Cartas que entran desde varios lados al aparecer la sección */
.svc-card{ opacity:0; transition:opacity .8s var(--ease), transform .8s var(--ease); }
.svc-card:nth-child(1){ transform:translateY(80px); }
.svc-card:nth-child(2){ transform:translateY(-80px); }
.svc-card:nth-child(3){ transform:translateX(-110px) rotate(-3deg); }
.svc-card:nth-child(4){ transform:translateX(110px) rotate(3deg); }
.svc-card:nth-child(5){ transform:translateY(90px); }
.svc-card:nth-child(6){ transform:translateY(-90px); }
.svc-hscroll.in .svc-card{ opacity:1; transform:none; }
.svc-hscroll.in .svc-card:nth-child(1){ transition-delay:.05s; }
.svc-hscroll.in .svc-card:nth-child(2){ transition-delay:.14s; }
.svc-hscroll.in .svc-card:nth-child(3){ transition-delay:.23s; }
.svc-hscroll.in .svc-card:nth-child(4){ transition-delay:.32s; }
.svc-hscroll.in .svc-card:nth-child(5){ transition-delay:.41s; }
.svc-hscroll.in .svc-card:nth-child(6){ transition-delay:.50s; }

@media (max-width:900px){
  .svc-pin{ padding:calc(var(--nav-h) + 10px) 18px 40px; }
  .svc-pin-head .section-title{ font-size:clamp(1.4rem,6.2vw,2rem); }
  .svc-card{ width:80vw; }
  .svc-card-body p{ font-size:.9rem; }
  .svc-card-img img{ animation:svcimg 9s ease-in-out infinite alternate; }
}
@keyframes svcimg{ from{ transform:scale(1) translateY(0); } to{ transform:scale(1.14) translateY(-8px); } }

/* ---------- Proyectos: 3 columnas con imagen sticky (estilo "Featured Work") ---------- */
.projects-sec{ position:relative; }
.proj-lines{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.proj-lines span{ position:absolute; top:0; bottom:0; width:0; border-left:1px dashed rgba(0,0,0,.10); }
.proj-lines span:nth-child(1){ left:0; }
.proj-lines span:nth-child(2){ left:25%; }
.proj-lines span:nth-child(3){ left:50%; }
.proj-lines span:nth-child(4){ left:75%; }
.projects-sec .container{ position:relative; z-index:1; max-width:1820px; padding-left:clamp(16px,2.4vw,44px); padding-right:clamp(16px,2.4vw,44px); }

.proj-grid{ display:grid; grid-template-columns:0.72fr 1.32fr 1fr; gap:clamp(28px,4vw,72px); align-items:start; }

.proj-left{ position:sticky; top:calc(var(--nav-h) + 28px); }
.proj-left .section-title{ font-size:clamp(1.7rem,2.6vw,2.5rem); }
.proj-stats{ display:flex; gap:44px; margin:32px 0 26px; }
.proj-stats b{ display:block; font-size:2rem; font-weight:800; line-height:1; }
.proj-stats span{ color:#8a8a94; font-size:.82rem; }

.proj-media-col{ position:sticky; top:calc(var(--nav-h) + 28px); }
.proj-frame{
  position:relative; aspect-ratio:4/3; border-radius:18px; overflow:hidden;
  border:1px solid rgba(0,0,0,.12); background:#fff; box-shadow:0 30px 80px rgba(10,10,20,.16);
}
.proj-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; opacity:0; transform:scale(1.15); transition:opacity .6s var(--ease), transform .9s var(--ease); }
.proj-img.is-active{ opacity:1; transform:scale(1); }
.proj-dots{ display:flex; gap:8px; justify-content:center; margin-top:18px; }
.proj-dots span{ width:24px; height:3px; border-radius:3px; background:rgba(0,0,0,.15); transition:background .4s var(--ease), width .4s var(--ease); }
.proj-dots span.is-active{ background:var(--accent); width:40px; }

.proj-texts{ display:flex; flex-direction:column; }
.proj-text{
  min-height:52vh; display:flex; flex-direction:column; justify-content:center;
  padding:44px 0; border-bottom:1px dashed rgba(0,0,0,.16);
  opacity:.35; transition:opacity .5s var(--ease);
}
.proj-text.is-active{ opacity:1; }
.proj-num{ font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:#8a8a94; margin-bottom:16px; }
.proj-text h3{ font-size:clamp(1.6rem,2.4vw,2.2rem); letter-spacing:-.03em; transition:color .3s var(--ease); }
.proj-text.is-active h3{ color:var(--accent); }
.proj-cat{ display:block; color:#6f6f7a; font-size:.95rem; margin-top:8px; }
.proj-meta{ display:flex; gap:46px; margin:20px 0 18px; padding-top:18px; border-top:1px dashed rgba(0,0,0,.16); }
.proj-meta span{ font-size:1rem; color:#0a0a0b; font-weight:500; }
.proj-meta em{ display:block; font-style:normal; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:#8a8a94; margin-bottom:5px; }
.proj-desc{ color:#55555f; font-size:.98rem; max-width:44ch; margin-bottom:24px; }
.proj-link{ display:inline-flex; align-items:center; gap:9px; font-weight:600; color:#0a0a0b; }
.proj-link svg{ transition:transform .35s var(--ease); }
.proj-link:hover svg{ transform:translate(3px,-3px); }
.proj-media-mobile{ display:none; margin-bottom:22px; border-radius:14px; overflow:hidden; border:1px solid rgba(0,0,0,.12); }
.proj-media-mobile img{ width:100%; display:block; }

.proj-other{ display:flex; align-items:flex-end; justify-content:space-between; gap:26px; flex-wrap:wrap; margin-top:64px; }
.proj-other-links{ display:flex; flex-wrap:wrap; margin-top:18px; border:1px dashed rgba(0,0,0,.16); border-radius:12px; overflow:hidden; }
.proj-other-links a{ padding:14px 24px; border-left:1px dashed rgba(0,0,0,.16); font-weight:600; font-size:.95rem; transition:background .3s var(--ease), color .3s var(--ease); }
.proj-other-links a:first-child{ border-left:0; }
.proj-other-links a:hover{ background:#0a0a0b; color:#fff; }

.proj-cta{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-top:70px; padding-top:40px; border-top:1px dashed rgba(0,0,0,.16); }
.proj-cta h3{ font-size:clamp(1.4rem,2.2vw,2rem); }

/* Stats */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.stat{ border-top:1px solid var(--line); padding-top:24px; }
.stat b{ display:block; font-family:"Inter",sans-serif; font-size:clamp(2.4rem,4vw,3.6rem); line-height:1; }
.stat span{ color:var(--muted); font-size:.92rem; }

/* CTA final (pro) */
.cta{ position:relative; text-align:center; overflow:hidden; }
.cta-glow{ position:absolute; inset:-20% 0 auto 0; height:72%; z-index:0; pointer-events:none;
  background:radial-gradient(720px 380px at 50% 0%, rgba(96,32,248,.35), transparent 65%); }
.cta .container{ position:relative; z-index:1; }
.cta-box{
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:34px;
  padding:clamp(56px,8vw,112px) clamp(24px,5vw,64px);
  background:radial-gradient(1000px 520px at 50% -25%, rgba(96,32,248,.26), transparent 65%), var(--bg-2);
}
.cta-box::before{
  content:""; position:absolute; left:50%; top:-45%; width:58%; aspect-ratio:1; transform:translateX(-50%);
  background:radial-gradient(circle, rgba(96,32,248,.4), transparent 62%); filter:blur(46px);
  animation:ctaglow 7s ease-in-out infinite alternate; pointer-events:none;
}
@keyframes ctaglow{ from{ opacity:.5; transform:translateX(-50%) scale(1); } to{ opacity:1; transform:translateX(-50%) scale(1.18); } }
.cta-box > *{ position:relative; z-index:1; }
.cta-title{ font-size:clamp(2rem,5.2vw,4.2rem); margin:20px auto 0; max-width:17ch; }
.cta-box .lead{ margin:22px auto 0; }
.cta-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:38px; }
.cta-meta{ margin-top:24px; font-size:.85rem; color:var(--muted-2); letter-spacing:.02em; }

/* Footer */
.footer{ border-top:1px solid var(--line); padding:56px 0 40px; background:var(--bg-2); }
.footer-top{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; margin-bottom:44px; }
.footer .brand{ margin-bottom:14px; }
.footer p{ color:var(--muted); font-size:.92rem; max-width:34ch; }
.footer-cols{ display:flex; gap:70px; flex-wrap:wrap; }
.footer-cols h4{ font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); margin-bottom:16px; }
.footer-cols a{ display:block; color:var(--muted); font-size:.94rem; margin-bottom:10px; transition:color .25s; }
.footer-cols a:hover{ color:var(--fg); }
.footer-bottom{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:24px; color:var(--muted-2); font-size:.85rem; }

/* ---------- Animaciones de aparición ---------- */
.reveal{ opacity:0; transform:translateY(34px); filter:blur(6px); transition:opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease); }
.reveal.in{ opacity:1; transform:none; filter:blur(0); }

/* Reveal desde la derecha + parallax horizontal */
.reveal-right{ opacity:0; transform:translateX(90px); filter:blur(6px); transition:opacity .95s var(--ease), transform .95s var(--ease), filter .95s var(--ease); transition-delay:var(--wd,0ms); }
.reveal-right.in{ opacity:1; transform:translateX(0); filter:blur(0); }
/* Reveal desde la izquierda */
.reveal-left{ opacity:0; transform:translateX(-80px); filter:blur(6px); transition:opacity .95s var(--ease), transform .95s var(--ease), filter .95s var(--ease); transition-delay:var(--wd,0ms); }
.reveal-left.in{ opacity:1; transform:translateX(0); filter:blur(0); }
.px{ will-change:transform; }
.reveal.d1,.reveal-right.d1,.reveal-left.d1{ transition-delay:.08s; } .reveal.d2,.reveal-right.d2,.reveal-left.d2{ transition-delay:.16s; }
.reveal.d3,.reveal-right.d3,.reveal-left.d3{ transition-delay:.24s; } .reveal.d4,.reveal-right.d4,.reveal-left.d4{ transition-delay:.32s; }
.reveal.d5,.reveal-right.d5,.reveal-left.d5{ transition-delay:.40s; } .reveal.d6,.reveal-right.d6,.reveal-left.d6{ transition-delay:.48s; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; filter:none !important; }
  .reveal-right{ opacity:1 !important; transform:none !important; filter:none !important; }
  .reveal-left{ opacity:1 !important; transform:none !important; filter:none !important; }
  .reveal-zoom{ opacity:1 !important; transform:none !important; }
  .marquee-track{ animation:none; }
  .hero-blobs span{ animation:none; }
  .hero-video{ display:none; }
  .badge-avail i, .hero-scroll-line::after, .hero-clients-track{ animation:none; }
  .hl{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- Reveal de texto palabra por palabra ---------- */
.display .w, .split .w{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.09em; }
.display .wi, .split .wi{ display:inline-block; transform:translateY(116%); filter:blur(9px); transition:transform 1.05s var(--ease), filter 1.05s var(--ease); transition-delay:var(--wd,0ms); }
.display.animate .wi, .split.animate .wi{ transform:translateY(0); filter:blur(0); }
.section-title .w{ display:inline-block; overflow:hidden; vertical-align:top; }

/* ---------- Menú overlay: links escalonados ---------- */
.menu-links a{ opacity:0; transform:translateY(46px); transition:opacity .6s var(--ease), transform .6s var(--ease), color .3s; }
.menu-overlay.open .menu-links a{ opacity:1; transform:none; }
.menu-overlay.open .menu-links a:nth-child(1){ transition-delay:.10s; }
.menu-overlay.open .menu-links a:nth-child(2){ transition-delay:.17s; }
.menu-overlay.open .menu-links a:nth-child(3){ transition-delay:.24s; }
.menu-overlay.open .menu-links a:nth-child(4){ transition-delay:.31s; }
.menu-foot{ opacity:0; transition:opacity .6s var(--ease) .36s; }
.menu-overlay.open .menu-foot{ opacity:1; }

/* ---------- Parallax de imágenes ---------- */
.parallax img{ will-change:transform; transition:transform .1s linear; }

/* ---------- Scroll suave ---------- */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .hero-top{ grid-template-columns:1fr; gap:48px; padding-bottom:40px; }
  .hero .display{ max-width:100%; }
  .hero-aside{ gap:36px; }
  .services{ grid-template-columns:repeat(2,1fr); }
  .projects{ grid-template-columns:1fr; }
  .proj-grid{ grid-template-columns:1fr; gap:30px; }
  .proj-left{ position:static; }
  .proj-media-col{ display:none; }
  .proj-text{ min-height:auto; padding:34px 0; opacity:1; }
  .proj-media-mobile{ display:block; }
  .stats{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  section{ padding:78px 0; }
  .px{ transform:none !important; }
  .hero{ padding-bottom:24vw; }
  .hero-mark{ font-size:33vw; }
  .services{ grid-template-columns:1fr; }
  .footer-cols{ gap:44px; }
  .menu-foot{ margin-top:44px; }
}

/* ---------- Scroll "secciones que se apilan" (la siguiente cubre a la anterior) ---------- */
.hero{ position:sticky; top:0; z-index:1; }
body > section:not(.hero){
  position:relative; z-index:2;
  border-top-left-radius:26px; border-top-right-radius:26px;
  box-shadow:0 -26px 60px rgba(0,0,0,.4);
}
body > section.stk{ position:sticky; top:0; }
.footer{ position:relative; z-index:2; }
.cta{ background:var(--bg); }
@media (max-width:760px){
  body > section:not(.hero){ border-top-left-radius:20px; border-top-right-radius:20px; box-shadow:0 -18px 44px rgba(0,0,0,.4); }
}

/* ---------- Rendimiento en móvil (versión ligera) ---------- */
@media (max-width:900px){
  .hero-video{ display:none; }
  .hero-blobs span{ filter:blur(46px); animation-duration:26s; }
  .hero-grid{ display:none; }
  .hero-scroll-line::after{ display:none; }
  .display .wi, .split .wi{ filter:none !important; }
  .reveal, .reveal-right, .reveal-left, .reveal-zoom{
    transition:opacity .5s var(--ease), transform .5s var(--ease) !important;
    filter:none !important;
  }
  .nav.scrolled{ background:rgba(10,10,11,.94); -webkit-backdrop-filter:none; backdrop-filter:none; }
  .menu-overlay{ -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(8,8,9,.99); }
  .hero-clients-track{ animation-duration:48s; }
}

/* ---------- Páginas internas / legales ---------- */
.page{ position:relative; z-index:2; background:#0a0a0b; padding:calc(var(--nav-h) + 64px) 0 110px; overflow:clip; }
.page section{ padding:0; position:relative; z-index:1; }
.page-glow{ position:absolute; inset:-12% 0 auto 0; height:64%; z-index:0; pointer-events:none;
  background:radial-gradient(720px 400px at 32% 0%, rgba(96,32,248,.30), transparent 66%);
  animation:pglo 10s ease-in-out infinite alternate; will-change:transform; }
@keyframes pglo{ from{ transform:translateX(-3%) translateY(0); } to{ transform:translateX(3%) translateY(20px); } }
.page-head h1{ margin-top:16px; font-size:clamp(2rem,4.6vw,3.5rem); }
.page-head .lead{ margin-top:18px; }
.page-body{ margin-top:46px; }
.prose{ max-width:72ch; }
.prose h2{ margin:38px 0 14px; font-size:clamp(1.25rem,2vw,1.7rem); color:#fff; }
.prose h3{ margin:26px 0 10px; color:#fff; }
.prose p, .prose li{ color:#b8b8c0; margin-bottom:12px; }
.prose ul{ padding-left:22px; margin-bottom:16px; }
.prose li{ list-style:disc; }
.prose a{ color:var(--accent-2); text-decoration:underline; }
.prose strong{ color:#fff; }
.prose .btn{ margin-top:16px; text-decoration:none; }

.about-grid{ display:grid; grid-template-columns:1.3fr .7fr; gap:clamp(30px,4vw,70px); align-items:start; }
.about-visual{ display:flex; flex-direction:column; gap:18px; }
.about-visual img{ width:100%; border-radius:16px; border:1px solid var(--line); }

.contact-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(30px,4vw,64px); align-items:start; }
.contact-card{ background:#0f0f12; border:1px solid var(--line); border-radius:22px; padding:clamp(24px,3vw,40px); box-shadow:0 30px 80px rgba(0,0,0,.35); }
.contact-side{ display:flex; flex-direction:column; gap:22px; }
.field input::placeholder, .field textarea::placeholder{ color:#6a6a76; }
.hp{ position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; opacity:0 !important; pointer-events:none !important; }
.field:focus-within label{ color:var(--accent-2); }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:.85rem; color:#b8b8c0; margin-bottom:8px; }
.field input, .field textarea, .field select{ width:100%; padding:14px 16px; border-radius:12px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.03); color:#fff; font:inherit; font-size:.98rem; }
.field select{ appearance:none; -webkit-appearance:none; background-image:linear-gradient(45deg, transparent 50%, #8a8a94 50%), linear-gradient(135deg, #8a8a94 50%, transparent 50%); background-position:calc(100% - 20px) calc(50% - 2px), calc(100% - 14px) calc(50% - 2px); background-size:6px 6px, 6px 6px; background-repeat:no-repeat; cursor:pointer; }
.field select option{ background:#15151a; color:#fff; }
.field textarea{ min-height:150px; resize:vertical; }
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--accent-2); }
.footer-addr{ color:var(--muted-2); font-size:.85rem; margin-top:10px; }
.contact-info li .ci-addr{ color:#fff; }
.form-note{ font-size:.8rem; color:#8a8a94; margin-top:14px; }
.form-note a{ color:var(--accent-2); text-decoration:underline; }
.form-status{ margin-top:14px; font-size:.92rem; }
.form-status.ok{ color:#34d399; }
.form-status.err{ color:#f87171; }
.contact-info h3{ margin-bottom:18px; }
.contact-info ul{ list-style:none; }
.contact-info li{ display:flex; flex-direction:column; gap:4px; padding:16px 0; border-bottom:1px dashed rgba(255,255,255,.14); }
.contact-info li span{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:#8a8a94; }
.contact-info li a{ color:#fff; }
.contact-info li a:hover{ color:var(--accent-2); }

@media (max-width:860px){
  .about-grid, .contact-grid{ grid-template-columns:1fr; gap:40px; }
}

/* Proyectos: el reveal corre en móvil; en desktop se mantiene la atenuación/activo */
@media (min-width:901px){
  .projects-sec .proj-text{ opacity:.32 !important; transform:none !important; filter:none !important; }
  .projects-sec .proj-text.is-active{ opacity:1 !important; }
}

/* Imagen de proyecto (móvil): marco fijo + parallax por JS */
@media (max-width:900px){
  .proj-media-mobile{ aspect-ratio:3/2; }
  .proj-media-mobile img{ height:100% !important; object-fit:cover; will-change:transform; transition:transform .08s linear; }
}

/* Banner de cookies */
.cookie-bar{ position:fixed; left:16px; right:16px; bottom:16px; z-index:200; display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:space-between; padding:16px 20px; border-radius:14px; background:rgba(16,16,18,.97); border:1px solid var(--line-2); box-shadow:0 20px 60px rgba(0,0,0,.55); }
.cookie-bar p{ color:#b8b8c0; font-size:.88rem; margin:0; max-width:46ch; }
.cookie-bar a{ color:var(--accent-2); text-decoration:underline; }
@media (min-width:761px){ .cookie-bar{ max-width:660px; right:auto; } }

/* ---------- Precios / Paquetes ---------- */
.pricing-sec{ background:#0a0a0b; padding:110px 0; }
.pricing-sec .container{ position:relative; z-index:1; }
.pricing-head{ text-align:center; max-width:60ch; margin:0 auto 54px; }
.pricing-head .eyebrow{ justify-content:center; }
.pricing-head .section-title{ margin-top:16px; }
.pricing-head .lead{ margin:16px auto 0; }
.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; }
.price-card{ position:relative; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:22px; padding:36px 28px 30px; background:var(--bg-2); transition:transform .4s var(--ease), border-color .4s var(--ease); }
.price-card:hover{ transform:translateY(-6px); border-color:var(--line-2); }
.price-card.featured{ border-color:var(--accent); background:radial-gradient(600px 300px at 50% -20%, rgba(96,32,248,.24), transparent 70%), var(--bg-2); }
.price-badge{ position:absolute; top:-13px; left:24px; background:var(--accent); color:#fff; font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:6px 13px; border-radius:100px; }
.price-card h3{ font-size:1.35rem; }
.price{ font-family:"Inter",sans-serif; font-weight:800; font-size:2.4rem; line-height:1; margin:16px 0 22px; }
.price span{ display:block; font-size:.78rem; font-weight:500; color:var(--muted); letter-spacing:.05em; margin-bottom:5px; }
.price-list{ list-style:none; margin:0 0 26px; display:flex; flex-direction:column; gap:11px; flex:1; padding:0; }
.price-list li{ position:relative; padding-left:26px; color:var(--muted); font-size:.95rem; line-height:1.45; }
.price-list li::before{ content:""; position:absolute; left:0; top:6px; width:12px; height:12px; border-radius:50%; background:rgba(96,32,248,.22); border:1px solid var(--accent-2); }
.price-card .btn{ width:100%; justify-content:center; }
.pricing-note{ text-align:center; color:var(--muted); margin-top:38px; font-size:.95rem; }
.pricing-pay{ text-align:center; color:var(--muted-2); font-size:.9rem; margin-top:26px; }
.pricing-note a{ color:var(--accent-2); text-decoration:underline; }
@media (max-width:900px){ .pricing-grid{ grid-template-columns:1fr; } .pricing-sec{ padding:78px 0; } }

/* ---------- Proceso ---------- */
.process-sec{ padding:110px 0; }
.process-head{ text-align:center; max-width:60ch; margin:0 auto 54px; }
.process-head .eyebrow{ justify-content:center; }
.process-head .section-title{ margin-top:16px; }
.process-head .lead{ margin:16px auto 0; }
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.step{ position:relative; border-top:1px solid var(--line); padding-top:24px; }
.step-num{ font-family:"Inter",sans-serif; font-weight:800; font-size:1.5rem; color:var(--accent); }
.step h3{ margin-top:12px; font-size:1.15rem; }
.step p{ color:var(--muted); margin-top:8px; font-size:.95rem; }
@media (max-width:900px){ .steps{ grid-template-columns:repeat(2,1fr); gap:28px; } }
@media (max-width:560px){ .steps{ grid-template-columns:1fr; } }

/* ---------- FAQ ---------- */
.faq-sec{ background:#0a0a0b; padding:110px 0; }
.faq-head{ text-align:center; max-width:60ch; margin:0 auto 44px; }
.faq-head .eyebrow{ justify-content:center; }
.faq-head .section-title{ margin-top:16px; }
.faq-list{ max-width:820px; margin:0 auto; border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 0; text-align:left; font-size:1.05rem; font-weight:600; color:var(--fg); }
.faq-icon{ position:relative; width:18px; height:18px; flex:none; }
.faq-icon::before, .faq-icon::after{ content:""; position:absolute; background:var(--accent-2); border-radius:2px; transition:transform .3s var(--ease); }
.faq-icon::before{ top:50%; left:0; width:100%; height:2px; transform:translateY(-50%); }
.faq-icon::after{ left:50%; top:0; height:100%; width:2px; transform:translateX(-50%); }
.faq-item.open .faq-icon::after{ transform:translateX(-50%) scaleY(0); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.faq-a p{ color:var(--muted); padding:0 0 22px; max-width:70ch; }
@media (max-width:900px){ .process-sec, .faq-sec{ padding:78px 0; } }