/* PORTADA ANIMADA — todo lo que se mueve vive aquí. Sin JavaScript (o con "reducir movimiento")
   la página se ve completa y quieta: las clases .anim / .listo las pone animada.js. */
.avance{ position:fixed; inset:0 0 auto 0; height:2px; z-index:20; background:var(--blue-hi); transform-origin:0 50%; transform:scaleX(var(--s,0)); pointer-events:none; }

/* ---------- portada ---------- */
.hero2{ position:relative; overflow:hidden; padding:clamp(44px,7vh,84px) 0 0; border-bottom:1px solid var(--line); text-align:center; isolation:isolate; }
.hero2 .wrap{ display:flex; flex-direction:column; align-items:center; }
.hero2 .tagline{ justify-content:center; }
.hero2 h1{ font-size:clamp(2.7rem,6.8vw,5.7rem); font-weight:300; letter-spacing:-.04em; line-height:1; margin:0 0 26px; max-width:12.5em; }
.hero2 h1 .pre{ display:block; margin-bottom:28px; font-size:.95rem; font-weight:400; letter-spacing:.2em; line-height:1.4; color:var(--muted); text-transform:lowercase; }
.hero2 h1 em{ font-style:normal; font-weight:700; color:var(--blue-hi); }
.hero2 .lead{ color:var(--muted); font-size:clamp(1.1rem,1.7vw,1.32rem); max-width:56ch; text-wrap:balance; }
.hero2 .cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:34px; }
.hero2 .note{ margin-top:18px; font-size:.9rem; color:var(--faint); }
.hero2 .note a{ color:var(--muted); text-decoration:none; font-family:var(--mono); font-size:.86rem; }
.hero2 .btn-blue{ box-shadow:0 10px 40px -8px rgba(31,107,255,.65); }

.halo{ position:absolute; z-index:-1; border-radius:50%; pointer-events:none; }
.halo-a{ width:min(760px,90vw); aspect-ratio:1; left:50%; top:-22%; margin-left:calc(min(760px,90vw) / -2); background:radial-gradient(circle, rgba(31,107,255,.34), rgba(31,107,255,.12) 38%, transparent 68%); }
.halo-b{ width:min(900px,120vw); aspect-ratio:1.5; left:50%; bottom:-14%; margin-left:calc(min(900px,120vw) / -2); background:radial-gradient(ellipse, rgba(77,139,255,.26), rgba(77,139,255,.09) 40%, transparent 70%); }
.anim .halo-a{ animation:deriva-a 16s ease-in-out infinite alternate; }
.anim .halo-b{ animation:deriva-b 20s ease-in-out infinite alternate; }
@keyframes deriva-a{ from{ transform:translate3d(-14%,0,0) scale(1); } to{ transform:translate3d(16%,8%,0) scale(1.18); } }
@keyframes deriva-b{ from{ transform:translate3d(12%,0,0) scale(1.1); } to{ transform:translate3d(-12%,-6%,0) scale(.94); } }

/* las capturas reales, en escena: inclinadas al llegar y se enderezan al bajar */
.stage{ --p:0; perspective:1500px; perspective-origin:50% 0; margin:clamp(40px,6vh,64px) auto 0; padding:0 24px; max-width:1240px; position:relative; }
.stage::after{ content:""; position:absolute; inset:55% 0 0 0; background:linear-gradient(transparent, var(--ink) 96%); pointer-events:none; }
.frames{ position:relative; width:min(900px,100%); margin:0 auto; transform-style:preserve-3d; transform-origin:50% 0;
  transform:rotateX(calc((1 - var(--p)) * 30deg)) scale(calc(.9 + var(--p) * .1)); will-change:transform; }
.stage .frame{ cursor:default; box-shadow:0 0 0 1px rgba(77,139,255,.14); }
.stage .frame:hover{ transform:none; border-color:var(--line); }
.stage .centro{ position:relative; }
.stage .lado{ position:absolute; top:7%; width:74%; opacity:calc(.6 - var(--p) * .6); }
.stage .izq{ left:0; transform:translate3d(calc(-46% - var(--p) * 30%),0,-180px) rotateY(16deg); }
.stage .der{ right:0; transform:translate3d(calc(46% + var(--p) * 30%),0,-180px) rotateY(-16deg); }
.stage .izq:hover{ transform:translate3d(calc(-46% - var(--p) * 30%),0,-180px) rotateY(16deg); }
.stage .der:hover{ transform:translate3d(calc(46% + var(--p) * 30%),0,-180px) rotateY(-16deg); }
@media (max-width:860px){ .stage{ padding:0 16px; } .stage .lado{ display:none; } .frames{ transform:rotateX(calc((1 - var(--p)) * 22deg)) scale(calc(.94 + var(--p) * .06)); } }

/* entrada de la portada */
.anim .sube{ opacity:0; transform:translateY(22px); transition:opacity .9s cubic-bezier(.2,.7,.2,1) var(--d,0s), transform .9s cubic-bezier(.2,.7,.2,1) var(--d,0s); }
.anim.listo .sube{ opacity:1; transform:none; }
.anim .hero2 h1 .w{ display:inline-block; opacity:0; transform:translateY(.5em) rotate(3deg); transform-origin:0 100%;
  transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); transition-delay:calc(.12s + var(--i) * .055s); }
.anim.listo .hero2 h1 .w{ opacity:1; transform:none; }
.anim .stage{ opacity:0; transform:translateY(90px); transition:opacity 1.2s ease .55s, transform 1.4s cubic-bezier(.16,.8,.2,1) .55s; }
.anim.listo .stage{ opacity:1; transform:none; }

/* ---------- cifras ---------- */
.band{ padding:clamp(56px,8vw,96px) 0; border-bottom:1px solid var(--line); }
.band ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:32px; }
.band li{ display:flex; flex-direction:column; gap:10px; padding-left:20px; border-left:1px solid var(--line); }
.band b{ font-size:clamp(2.4rem,4.6vw,3.9rem); font-weight:300; letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums; white-space:nowrap; }
.band li > span{ color:var(--muted); font-size:.98rem; max-width:24ch; }
@media (max-width:900px){ .band ul{ grid-template-columns:repeat(2,1fr); gap:36px 20px; } }

/* ---------- lo que aparece al bajar ---------- */
.anim .ver{ opacity:0; transform:translateY(34px);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--i,0) * .09s); }
.anim .ver.in{ opacity:1; transform:none; }
.anim .section-head h2, .anim .contact h2{ background:linear-gradient(100deg, var(--paper) 40%, var(--blue-hi) 50%, var(--paper) 60%) 100% 0 / 260% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; transition:background-position 1.6s ease .25s; }
.anim .section-head.in h2, .anim .contact h2.in{ background-position:0 0; }

/* las capturas de los trabajos giran hacia ti al aparecer (una sola vez) */
.anim .works .frame{ opacity:0; transform:perspective(1400px) rotateY(calc(var(--lado,1) * 13deg)) rotateX(6deg) translateY(44px) scale(.93);
  transition:opacity .9s ease, transform 1.2s cubic-bezier(.16,.8,.2,1), border-color .2s ease; }
.anim .works .work:nth-child(even) .frame{ --lado:-1; }
.anim .works .frame.in{ opacity:1; transform:none; }
.anim .works .frame.in:hover{ transform:translateY(-3px); }

/* luz que sigue al cursor en las tarjetas */
@media (hover:hover){
  .anim .sys, .anim .plan, .anim .steps li{ position:relative; }
  .anim .sys::after, .anim .plan::after, .anim .steps li::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .35s ease;
    background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(77,139,255,.16), transparent 60%); }
  .anim .sys:hover::after, .anim .plan:hover::after, .anim .steps li:hover::after{ opacity:1; }
}

/* cierre: la luz crece detrás de la llamada a escribir */
.anim .contact{ position:relative; overflow:hidden; isolation:isolate; }
.anim .contact::before{ content:""; position:absolute; z-index:-1; left:50%; top:50%; width:min(900px,130vw); aspect-ratio:1.4; transform:translate(-50%,-50%) scale(.6); opacity:0; border-radius:50%;
  background:radial-gradient(ellipse, rgba(31,107,255,.32), rgba(31,107,255,.1) 40%, transparent 70%); transition:transform 2s cubic-bezier(.2,.7,.2,1), opacity 1.6s ease; }
.anim .contact.luz::before{ transform:translate(-50%,-50%) scale(1); opacity:1; }

/* ============ NIVEL 2: aire, tipografía fina y una cosa a la vez ============ */
.section{ padding:clamp(96px,15vh,168px) 0; }
.section .section-head{ margin-bottom:clamp(48px,8vh,84px); gap:16px; }
.section .section-head h2{ font-size:clamp(2.3rem,5.4vw,4.2rem); font-weight:300; letter-spacing:-.04em; line-height:1; }
.section .section-head > p:last-child{ font-size:1.12rem; }
.contact{ padding:clamp(120px,20vh,220px) 0; }
.contact h2{ font-size:clamp(2.8rem,7.6vw,6.2rem); font-weight:300; letter-spacing:-.045em; line-height:.98; max-width:13ch; }

/* luz que acompaña al cursor en la portada */
.foco{ position:absolute; z-index:-1; left:-310px; top:-310px; width:620px; height:620px; border-radius:50%; pointer-events:none; opacity:0;
  background:radial-gradient(circle, rgba(77,139,255,.2), rgba(77,139,255,.06) 42%, transparent 68%);
  transition:transform 1s cubic-bezier(.16,.8,.2,1), opacity .8s ease; }
.foco.on{ opacity:1; }

/* cinta de sitios en vivo */
.cinta{ position:relative; overflow:hidden; border-bottom:1px solid var(--line); padding:22px 0; }
.cinta::before, .cinta::after{ content:""; position:absolute; top:0; bottom:0; width:min(160px,18vw); z-index:1; pointer-events:none; }
.cinta::before{ left:0; background:linear-gradient(90deg, var(--ink), transparent); }
.cinta::after{ right:0; background:linear-gradient(270deg, var(--ink), transparent); }
.cinta-pista{ display:flex; align-items:center; gap:56px; width:max-content; padding-left:56px; white-space:nowrap; }
.cinta-pista span{ display:inline-flex; align-items:center; gap:.7em; font-family:var(--mono); font-size:.92rem; color:var(--muted); }
.cinta-rotulo{ font-size:.74rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--blue-hi); }
.anim .cinta-pista{ animation:cinta 46s linear infinite; }
.anim .cinta .dot{ animation:late 2.4s ease-in-out infinite; }
@keyframes cinta{ to{ transform:translate3d(-50%,0,0); } }
@keyframes late{ 50%{ opacity:.25; } }

/* trabajos: cada proyecto es una tarjeta grande que se apila sobre la anterior */
.works{ counter-reset:obra; }
.work{ counter-increment:obra; }
@media (min-width:1000px) and (min-height:780px){
  .works{ gap:0; }
  .works .work{ position:sticky; top:calc(92px + var(--n,0) * 12px); margin-bottom:12vh; padding:48px 48px 44px; gap:56px; min-height:min(590px, calc(100vh - 190px));
    background:linear-gradient(180deg, var(--surface-2), var(--surface) 46%); border:1px solid var(--line); border-radius:28px; box-shadow:0 -28px 70px -34px #000; }
  .works .work:last-child{ margin-bottom:0; }
  .works .work:nth-child(2){ --n:1; } .works .work:nth-child(3){ --n:2; } .works .work:nth-child(4){ --n:3; }
  .works .work:nth-child(5){ --n:4; } .works .work:nth-child(6){ --n:5; } .works .work:nth-child(7){ --n:6; }
  .works .work::before{ content:"0" counter(obra) " / 04"; position:absolute; top:22px; right:30px; font-family:var(--mono); font-size:.78rem; letter-spacing:.14em; color:var(--faint); }
  .works .work-body li{ font-size:.95rem; }
}
/* la captura se inclina hacia el cursor */
.anim .works .frame.vivo{ transform:perspective(1100px) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg)) scale(1.015); transition:transform .25s ease-out, border-color .2s ease; border-color:var(--blue); }

/* precio a la vista en la portada */
.hero2 .desde{ margin-top:22px; font-size:1rem; color:var(--muted); }
.hero2 .desde a{ color:var(--paper); text-decoration:none; border-bottom:1px solid var(--blue); padding-bottom:2px; }
.hero2 .desde b{ font-weight:700; color:var(--blue-hi); }
.hero2 .note{ margin-top:12px; }

/* trabajos más chicos, debajo de las tarjetas grandes */
.mas-rotulo{ margin:clamp(56px,9vh,96px) 0 22px; }
.mas{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:900px){ .mas{ grid-template-columns:1fr; } }
.mini{ display:flex; flex-direction:column; text-decoration:none; background:var(--surface); border:1px solid var(--line); border-radius:18px; overflow:hidden; transition:border-color .2s ease, transform .25s ease; }
a.mini:hover{ border-color:var(--blue); transform:translateY(-4px); }
.mini img{ width:100%; aspect-ratio:1200/620; object-fit:cover; object-position:top; border-bottom:1px solid var(--line); }
.mini > span{ display:flex; flex-direction:column; gap:8px; padding:22px 24px 24px; }
.mini b{ font-size:1.2rem; font-weight:700; letter-spacing:-.01em; }
.mini small{ color:var(--muted); font-size:.95rem; line-height:1.5; }
.mini i{ font-style:normal; font-family:var(--mono); font-size:.82rem; color:var(--blue-hi); margin-top:4px; }
.mini.sin-foto{ justify-content:flex-end; background:radial-gradient(circle at 85% 10%, rgba(31,107,255,.16), transparent 55%), var(--surface); }
.mini.sin-foto i{ color:var(--faint); }

/* testimonios */
.voces{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:900px){ .voces{ grid-template-columns:1fr; } }
.voz{ margin:0; position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:28px; padding:34px 30px 30px; background:var(--surface); border:1px solid var(--line); border-radius:20px; }
.voz::before{ content:"“"; font-size:4.4rem; line-height:.6; font-weight:700; color:var(--blue); height:28px; }
.voz blockquote{ margin:0; font-size:clamp(1.15rem,1.7vw,1.38rem); font-weight:400; letter-spacing:-.015em; line-height:1.4; }
.voz figcaption{ display:flex; flex-direction:column; gap:2px; padding-top:18px; border-top:1px solid var(--line); }
.voz figcaption b{ font-weight:700; }
.voz figcaption span{ color:var(--muted); font-size:.9rem; }
.borrador-testimonio{ position:absolute; top:16px; right:16px; font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#FFC53D; border:1px dashed #FFC53D; border-radius:999px; padding:3px 10px; }
.hero2 h1 .pre .dot{ margin:0 .7em; }

/* ============ el logo tiene su momento (sin tapar nada) ============ */
/* menú: el perrito se arma al cargar y el ojo lanza un destello */
.anim .brand{ position:relative; }
.anim .brand img{ clip-path:inset(0 100% 0 0); transform:translateX(-6px); }
.anim.listo .brand img{ clip-path:inset(0 0 0 0); transform:none; transition:clip-path .9s cubic-bezier(.2,.7,.2,1) .15s, transform .9s cubic-bezier(.2,.7,.2,1) .15s; }
.anim .brand::after{ content:""; position:absolute; left:calc(34px * .644 - 4px); top:calc(50% - 17px + 34px * .32 - 4px); width:8px; height:8px; border-radius:50%; border:1.5px solid var(--blue-hi); opacity:0; pointer-events:none; }
.anim.listo .brand::after{ animation:onda 1.3s ease-out 1s 2; }
@keyframes onda{ from{ opacity:.95; transform:scale(.3); } to{ opacity:0; transform:scale(3.4); } }

/* cierre: el logo grande aparece y el ojo se enciende */
.contact .sello{ position:absolute; right:max(4%, calc(50% - 560px)); top:50%; width:min(430px,34vw); aspect-ratio:698/674; transform:translateY(-50%); pointer-events:none; opacity:.16; }
.contact .sello .ghost{ position:static; transform:none; width:100%; height:auto; opacity:1; right:auto; mix-blend-mode:normal; }
.contact .sello .ojo{ position:absolute; left:65.9%; top:30.3%; width:7.4%; aspect-ratio:1; margin:-3.7% 0 0 -3.7%; border-radius:50%; background:#1F6BFF; }
@media (min-width:900px){ .contact .sello{ opacity:1; } }
@media (max-width:899px){ .contact .sello{ right:-70px; width:300px; opacity:.13; } }
.anim .contact .sello{ transform:translateY(-50%) scale(.88) rotate(-5deg); transition:transform 1.5s cubic-bezier(.16,.8,.2,1) .2s; }
.anim .contact.luz .sello{ transform:translateY(-50%); }
.anim .contact .sello .ghost{ clip-path:inset(0 100% 0 0); transition:clip-path 1.3s cubic-bezier(.3,.7,.2,1) .2s; }
.anim .contact.luz .sello .ghost{ clip-path:inset(0 0 0 0); }
.anim .contact .sello .ojo{ transform:scale(0); }
.anim .contact.luz .sello .ojo{ transform:scale(1); transition:transform .5s cubic-bezier(.3,1.6,.5,1) 1.35s; }
.anim .contact .sello .ojo::before, .anim .contact .sello .ojo::after{ content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--blue-hi); opacity:0; }
.anim .contact.luz .sello .ojo::before{ animation:onda 2.6s ease-out 1.5s infinite; }
.anim .contact.luz .sello .ojo::after{ inset:-180%; border:0; background:radial-gradient(circle, rgba(31,107,255,.55), transparent 65%); animation:brillo 2.6s ease-in-out 1.5s infinite; }
@keyframes brillo{ 0%,100%{ opacity:.35; } 50%{ opacity:.9; } }