:root{
  --lima:#d2d826; --lima-2:#e6ec4a; --carbon:#35322f;
  --negro:#0a0a08; --tinta:#f3f4ea; --suave:#a6a898; --linea:rgb(243 244 234 / .1);
  --f-titulo:"Fredoka",system-ui,sans-serif; --f-texto:"Instrument Sans",system-ui,sans-serif; --f-mono:"IBM Plex Mono",ui-monospace,monospace;
  --gut:clamp(20px,5vw,80px);
}
*{box-sizing:border-box} html,body{margin:0}
html{background:var(--negro)}
body{color:var(--tinta);font-family:var(--f-texto);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img{max-width:100%;display:block}
::selection{background:var(--lima);color:var(--negro)}

/* lienzo 3D fijo detrás del inicio y del recorrido */
#gl{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;display:block;transition:opacity .5s}
.grano{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
main,footer.om-pie{position:relative;z-index:2}

.btn{--b:var(--lima);display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 28px;border-radius:999px;background:var(--b);color:var(--negro);
  font:600 16px/1 var(--f-texto);text-decoration:none;border:0;cursor:pointer;position:relative;overflow:hidden;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.btn::before{content:"";position:absolute;inset:0;background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%),rgb(255 255 255 / .55),transparent 60%);opacity:0;transition:opacity .3s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 40px -8px rgb(210 216 38 / .6)}
.btn:hover::before{opacity:1}
.btn:active{transform:translateY(0) scale(.98)}
.btn--linea{background:transparent;color:var(--tinta);box-shadow:inset 0 0 0 1px rgb(243 244 234 / .25)}
.btn--linea:hover{box-shadow:inset 0 0 0 1px var(--lima),0 12px 40px -12px rgb(210 216 38 / .35)}

.etq{font-family:var(--f-mono);font-size:13px;letter-spacing:.06em;color:var(--lima);display:inline-flex;align-items:center;gap:10px}
.etq::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lima);box-shadow:0 0 12px var(--lima);animation:latido 2s infinite}
@keyframes latido{50%{opacity:.35}}
h1,h2,h3{font-family:var(--f-titulo);font-weight:500;letter-spacing:-.015em;margin:0}

/* 1. INICIO */
.inicio{position:relative;min-height:100svh;display:grid;align-items:end;padding:0 var(--gut) clamp(40px,7vh,80px)}
.inicio__txt{max-width:780px}
.inicio h1{font-size:clamp(46px,7.2vw,112px);line-height:.95;margin:22px 0 26px}
.inicio h1 .l{color:var(--lima);display:inline-block}
.inicio p{font-size:clamp(17px,1.4vw,21px);color:#d4d6c8;max-width:600px;margin:0 0 34px}
.acciones{display:flex;gap:14px;flex-wrap:wrap}
.datos{display:flex;gap:40px;margin-top:48px;font-family:var(--f-mono);font-size:13px;color:var(--suave)}
.datos b{display:block;font-family:var(--f-titulo);font-weight:500;font-size:34px;color:var(--tinta);letter-spacing:-.01em}
.scroll-hint{position:absolute;right:var(--gut);bottom:clamp(40px,7vh,80px);font-family:var(--f-mono);font-size:12px;color:var(--suave);writing-mode:vertical-rl;display:flex;align-items:center;gap:14px}
.scroll-hint::after{content:"";width:1px;height:70px;background:linear-gradient(var(--lima),transparent);animation:baja 2s infinite}
@keyframes baja{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* 2. RECORRIDO: las partículas cambian de forma mientras el texto avanza */
.recorrido{height:500vh;position:relative}
.recorrido__fijo{position:sticky;top:0;height:100vh;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;padding:0 var(--gut)}
.pasos{position:relative;height:340px}
.paso{position:absolute;inset:0;opacity:0;transform:translateY(40px);pointer-events:none;transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1)}
.paso.activo{pointer-events:auto;opacity:1;transform:none}
html:not(.js) .paso[data-paso="0"]{opacity:1;transform:none}
.paso .n{font-family:var(--f-mono);font-size:14px;color:var(--lima)}
.paso h2{font-size:clamp(36px,4.6vw,72px);line-height:1;margin:14px 0 20px}
.paso p{color:#cfd1c3;font-size:19px;max-width:480px;margin:0 0 18px}
.paso .chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-family:var(--f-mono);font-size:12.5px;padding:6px 12px;border-radius:999px;border:1px solid rgb(210 216 38 / .35);color:var(--lima-2);background:rgb(210 216 38 / .06)}
.barra{position:absolute;left:var(--gut);bottom:48px;display:flex;gap:10px;align-items:center;font-family:var(--f-mono);font-size:12px;color:var(--suave)}
.barra i{width:56px;height:2px;background:var(--linea);position:relative;overflow:hidden;border-radius:2px}
.barra i b{position:absolute;inset:0;background:var(--lima);transform-origin:left;transform:scaleX(0)}

/* secciones sólidas sobre el lienzo */
.solido{background:var(--negro);position:relative}
.cab{display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap;margin-bottom:56px}
.cab h2{font-size:clamp(40px,5.4vw,88px);line-height:.96;max-width:900px}
.cab h2 span{color:var(--suave)}
.cab p{max-width:420px;color:#c7c9bb;margin:0}

/* 3. PROYECTOS: galería horizontal en perspectiva */
.proyectos{height:400vh}
.proyectos__fijo{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding-top:72px}
.proyectos .cab{padding:0 var(--gut);margin-bottom:32px}
.proyectos .cab h2{font-size:clamp(36px,4.2vw,68px)}
.pista{display:flex;gap:40px;padding:0 var(--gut);perspective:1600px;will-change:transform}
.proy{flex:none;width:min(52vw,760px);text-decoration:none;transform-style:preserve-3d}
.proy__marco{border-radius:18px;overflow:hidden;background:#141412;border:1px solid var(--linea);aspect-ratio:16/10;position:relative;transition:box-shadow .5s,border-color .5s}
.proy__barra{height:38px;display:flex;align-items:center;gap:8px;padding:0 14px;border-bottom:1px solid var(--linea);font-family:var(--f-mono);font-size:12px;color:var(--suave);background:#121210}
.proy__barra i{width:9px;height:9px;border-radius:50%;background:#2c2b27}
.proy__barra span{margin-left:10px}
.proy__img{position:absolute;top:38px;left:0;right:0;bottom:0;overflow:hidden}
.proy__img img{width:100%;height:auto;transition:transform 4s cubic-bezier(.2,.8,.2,1)}
.proy:hover .proy__img img{transform:translateY(calc(-100% + 440px))}
.proy:hover .proy__marco{box-shadow:0 30px 90px -30px rgb(210 216 38 / .45);border-color:rgb(210 216 38 / .4)}
.proy__pie{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-top:18px}
.proy__pie h3{font-size:28px}
.proy__pie p{margin:4px 0 0;color:var(--suave);font-size:15px}
.proy__pie .chip{flex:none}

/* 4. SERVICIOS: tarjetas con luz que sigue al cursor */
.servicios{padding:160px var(--gut)}
.rejilla{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.tarj{--mx:50%;--my:50%;grid-column:span 4;position:relative;border-radius:22px;padding:34px;background:#11110e;overflow:hidden;min-height:420px;display:flex;flex-direction:column;isolation:isolate}
.tarj::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:radial-gradient(420px circle at var(--mx) var(--my),rgb(210 216 38 / .9),rgb(243 244 234 / .08) 40%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;z-index:-1}
.tarj::after{content:"";position:absolute;inset:0;background:radial-gradient(500px circle at var(--mx) var(--my),rgb(210 216 38 / .09),transparent 45%);z-index:-1;opacity:0;transition:opacity .4s}
.tarj:hover::after{opacity:1}
.tarj--ancha{grid-column:span 8}
.tarj .num{font-family:var(--f-mono);font-size:13px;color:var(--lima)}
.tarj h3{font-size:clamp(28px,2.6vw,40px);line-height:1.02;margin:16px 0 14px}
.tarj p{color:#c9cbbd;margin:0;max-width:440px}
.tarj .vis{margin-top:auto;padding-top:28px}
/* buscador animado */
.busca{background:#f3f4ea;color:#1a1a17;border-radius:16px;padding:14px 18px;font-size:16px;display:flex;align-items:center;gap:12px;box-shadow:0 20px 50px -20px #000}
.busca svg{flex:none}
.busca .cur{width:2px;height:20px;background:#1a1a17;animation:latido 1s steps(1) infinite}
.res{margin-top:10px;display:grid;gap:8px}
.res div{background:#1a1a16;border:1px solid var(--linea);border-radius:12px;padding:12px 16px;font-size:14px;color:var(--suave);display:flex;gap:12px;align-items:center}
.res div b{color:var(--tinta);font-weight:500}
.res .tu{border-color:rgb(210 216 38 / .5);background:rgb(210 216 38 / .07)}
.res .tu b{color:var(--lima)}
.pos{font-family:var(--f-mono);font-size:12px;color:var(--lima)}
/* mini sitio en tarjeta ancha */
.mini{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;align-items:end}
.mini img{border-radius:12px;border:1px solid var(--linea)}
.movil{border-radius:26px;overflow:hidden;border:6px solid #23221f;max-width:200px;justify-self:end;box-shadow:0 30px 60px -20px #000}
/* embudo de campaña */
.embudo{display:grid;gap:10px}
.embudo div{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-radius:12px;background:#1a1a16;border:1px solid var(--linea);font-size:15px}
.embudo div:nth-child(2){margin:0 14px}.embudo div:nth-child(3){margin:0 28px;border-color:rgb(210 216 38 / .5);color:var(--lima)}
.embudo span{font-family:var(--f-mono);font-size:12px;color:var(--suave)}

/* 5. SOFTWARE PROPIO */
.software{padding:40px var(--gut) 160px}
.soft{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
.soft h2{font-size:clamp(40px,4.8vw,76px);line-height:.98}
.soft ul{list-style:none;padding:0;margin:32px 0 0;display:grid;gap:2px}
.soft li{display:flex;justify-content:space-between;gap:20px;padding:18px 0;border-top:1px solid var(--linea)}
.soft li b{font-family:var(--f-titulo);font-weight:500;font-size:22px}
.soft li span{color:var(--suave);font-size:15px;text-align:right}
.soft li a{color:var(--lima);text-decoration:none}
.tel{justify-self:center;width:min(380px,100%);border-radius:44px;background:#0f0f0d;border:1px solid var(--linea);padding:14px;box-shadow:0 60px 120px -40px rgb(210 216 38 / .25),0 0 0 10px #161613}
.tel__cab{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--linea)}
.tel__cab i{width:36px;height:36px;border-radius:50%;background:var(--lima);display:grid;place-items:center}
.tel__cab b{font-weight:600;font-size:15px}.tel__cab small{display:block;color:var(--lima);font-size:12px}
.chat{height:420px;padding:18px 10px;display:flex;flex-direction:column;gap:10px;overflow:hidden;justify-content:flex-end}
.msg{max-width:80%;padding:10px 14px;border-radius:18px;font-size:15px;line-height:1.4;transition:opacity .45s,transform .45s cubic-bezier(.3,1.6,.5,1)}
.chat.espera .msg{opacity:0;transform:translateY(12px)}
.chat.espera .msg.ve{opacity:1;transform:none}
.msg.yo{align-self:flex-end;background:var(--lima);color:var(--negro);border-bottom-right-radius:6px}
.msg.bot{align-self:flex-start;background:#1d1d19;border-bottom-left-radius:6px}
.msg small{display:block;font-family:var(--f-mono);font-size:11px;opacity:.6;margin-top:4px}
.escribe{align-self:flex-start;background:#1d1d19;border-radius:18px;padding:12px 16px;display:none;gap:5px}
.escribe i{width:7px;height:7px;border-radius:50%;background:var(--suave);animation:latido 1s infinite}
.escribe i:nth-child(2){animation-delay:.2s}.escribe i:nth-child(3){animation-delay:.4s}

/* 6. MARQUESINA de giros */
.marq{padding:36px 0;border-block:1px solid var(--linea);overflow:hidden;white-space:nowrap}
.marq__pista{display:inline-flex;gap:56px;animation:marq 40s linear infinite;font-family:var(--f-titulo);font-size:clamp(28px,3.4vw,52px);color:#3d3c35}
.marq__pista span::after{content:"●";color:var(--lima);font-size:.4em;margin-left:56px;vertical-align:middle}
@keyframes marq{to{transform:translateX(-50%)}}

/* 7. CIERRE: el interruptor que enciende */
.cierre{min-height:100svh;display:grid;place-items:center;text-align:center;padding:140px var(--gut);transition:background .7s cubic-bezier(.7,0,.2,1),color .7s;overflow:hidden}
.cierre h2{font-size:clamp(48px,8vw,140px);line-height:.92;max-width:1200px}
.cierre p{color:var(--suave);font-size:20px;max-width:560px;margin:26px auto 48px;transition:color .7s}
.switch{width:min(320px,70vw);aspect-ratio:258/146;border-radius:999px;border:clamp(8px,1.4vw,14px) solid var(--lima);background:transparent;position:relative;cursor:pointer;margin:0 auto 44px;transition:background .5s,border-color .5s;display:block}
.switch::after{content:"";position:absolute;top:8%;left:6%;height:84%;aspect-ratio:1;border-radius:50%;background:var(--lima);transition:left .55s cubic-bezier(.7,-0.3,.3,1.4),background .5s;box-shadow:0 0 40px var(--lima)}
.switch:hover::after{box-shadow:0 0 70px var(--lima)}
.cierre .btn{transition:background .5s,color .5s}
.cierre.on{background:var(--lima);color:var(--negro)}
.cierre.on p{color:#2c2b24}
.cierre.on .switch{border-color:var(--negro)}
.cierre.on .switch::after{left:calc(94% - 84% * 146 / 258);background:var(--negro);box-shadow:none}
.cierre.on .btn{opacity:1;pointer-events:auto;background:var(--negro);color:var(--lima)}
.cierre .pista-sw{font-family:var(--f-mono);font-size:13px;color:var(--lima);margin-bottom:22px;transition:color .5s}
.cierre.on .pista-sw{color:var(--negro)}

/* pie */
footer.om-pie{background:var(--negro);border-top:1px solid var(--linea);padding:64px var(--gut) 40px}
.pie{display:grid;grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,2fr));gap:32px}
.pie img{height:40px;width:auto;margin-bottom:18px}
.pie p{color:var(--suave);font-size:15px;margin:0 0 6px}
.pie h4{font-family:var(--f-mono);font-weight:500;font-size:12px;color:var(--suave);margin:0 0 14px;letter-spacing:.06em}
.pie ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.pie ul a{text-decoration:none;color:var(--tinta);font-size:15px}
.pie ul a:hover{color:var(--lima)}
.legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:56px;padding-top:24px;border-top:1px solid var(--linea);font-size:13px;color:var(--suave)}

/* celular y tableta */
@media (max-width:1023px){
  .recorrido__fijo{grid-template-columns:1fr;align-items:start;padding-top:110px}
  .tarj,.tarj--ancha{grid-column:span 12}
  .soft{grid-template-columns:1fr}
  .proy{width:80vw}
  .pie{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .datos{gap:24px}.datos b{font-size:26px}
  .scroll-hint{display:none}
  .pasos{height:300px}
  .paso p{font-size:17px}
  .mini{grid-template-columns:1fr}.movil{display:none}
  .proy{width:84vw}.proy__pie h3{font-size:22px}
  .servicios{padding:110px 20px}.tarj{padding:24px;min-height:0}
  .pie{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .recorrido{height:auto}.recorrido__fijo{position:relative;height:auto;padding-block:120px}
  .pasos{height:auto;display:grid;gap:56px}.paso{position:relative;opacity:1;transform:none}
  .proyectos{height:auto}.proyectos__fijo{position:relative;height:auto}.pista{flex-wrap:wrap}
  .msg{opacity:1;transform:none}
}

/* ===== Proyectos: lista gigante ===== */
#proyectos{padding:150px var(--gut) 120px}
.lista{border-top:1px solid var(--linea)}
.fila{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,300px) auto;gap:28px;align-items:center;padding:24px 0;border-bottom:1px solid var(--linea);text-decoration:none}
.fila .n{font-family:var(--f-mono);font-size:13px;color:var(--suave)}
.fila h3{font-size:clamp(34px,4.6vw,76px);line-height:1;transition:color .3s,transform .45s cubic-bezier(.2,.8,.2,1)}
.fila p{margin:0;color:var(--suave);font-size:15px;text-align:right}
@media (hover:hover){.lista:hover .fila h3{color:#3a3a33}.lista .fila:hover h3{color:var(--lima);transform:translateX(18px)}}
.flota{position:fixed;left:0;top:0;width:440px;aspect-ratio:16/10;border-radius:14px;overflow:hidden;pointer-events:none;z-index:25;opacity:0;transform:translate(-50%,-50%) scale(.8) rotate(-4deg);transition:opacity .3s,transform .4s cubic-bezier(.2,.8,.2,1);box-shadow:0 40px 90px -30px rgb(0 0 0 / .9),0 0 0 1px rgb(210 216 38 / .4)}
.flota.ve{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-4deg)}
.flota img{width:100%;height:100%;object-fit:cover;object-position:top}
/* ===== Servicios: tarjetas que se apilan ===== */
#servicios{padding:120px var(--gut) 160px}
.capa{position:sticky;top:110px;min-height:560px;border-radius:26px;padding:48px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:center;margin-bottom:60px;box-shadow:0 -30px 60px -20px rgb(0 0 0 / .7)}
.capa:nth-child(1){background:#151512;border:1px solid var(--linea)}
.capa:nth-child(2){background:#1d1d18;border:1px solid var(--linea);top:140px}
.capa:nth-child(3){background:var(--lima);color:var(--negro);top:170px;margin-bottom:0}
.capa .n{font-family:var(--f-mono);font-size:13px;color:var(--lima)}.capa:nth-child(3) .n{color:var(--negro)}
.capa h3{font-size:clamp(40px,4.4vw,68px);line-height:.98;margin:14px 0 18px}
.capa p{margin:0;font-size:19px;color:#c9cbbd}.capa:nth-child(3) p{color:#2c2b24}
.capa .chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.capa:nth-child(3) .chip{color:var(--negro);border-color:rgb(0 0 0 / .3);background:rgb(0 0 0 / .06)}
.dispos{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:end}
.dispos .esc{border-radius:12px;border:1px solid var(--linea)}
.tel-mini{width:170px;border-radius:24px;overflow:hidden;border:6px solid #23221f;box-shadow:0 30px 60px -20px #000}
.busca2{background:#f3f4ea;color:#1a1a17;border-radius:16px;padding:14px 18px;display:flex;gap:12px;align-items:center;font-size:16px}
.busca2 .cur{width:2px;height:20px;background:#1a1a17;animation:latido 1s steps(1) infinite}
.res2{display:grid;gap:8px;margin-top:10px}
.res2 div{background:#11110e;border:1px solid var(--linea);border-radius:12px;padding:12px 16px;font-size:14px;color:var(--suave)}
.res2 .tu{border-color:rgb(210 216 38 / .5);color:var(--lima)}
.embudo2{display:grid;gap:10px}
.embudo2 div{display:flex;justify-content:space-between;padding:16px 20px;border-radius:12px;background:rgb(0 0 0 / .08);border:1px solid rgb(0 0 0 / .2)}
.embudo2 div:nth-child(2){margin:0 22px}.embudo2 div:nth-child(3){margin:0 44px;background:var(--negro);color:var(--lima)}
.embudo2 span{font-family:var(--f-mono);font-size:12px;color:#3d3c33}.embudo2 div:nth-child(3) span{color:var(--suave)}
@media (max-width:1023px){
  .fila{grid-template-columns:40px minmax(0,1fr)}.fila p,.fila .chip{display:none}
  .capa{grid-template-columns:1fr;padding:28px;gap:28px;min-height:0}
}
@media (max-width:760px){#proyectos,#servicios{padding:96px 20px}.tel-mini{display:none}.dispos{grid-template-columns:1fr}.capa{top:84px}.capa:nth-child(2){top:100px}.capa:nth-child(3){top:116px}}
@media (max-width:980px){.inicio{padding-bottom:130px}}