/* ==========================================================
   Impar · home.css — estilos exclusivos de la portada
   ========================================================== */

/* HERO */
.hero{height:100svh;min-height:640px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad)}
.orb{position:absolute;width:56vmax;height:56vmax;border-radius:50%;background:radial-gradient(circle,rgba(29,43,255,.75),rgba(29,43,255,0) 62%);left:0;top:0;transform:translate(-50%,-50%);pointer-events:none;filter:blur(10px);opacity:.9}
.hero-top{position:absolute;top:96px;left:var(--pad);right:var(--pad);display:flex;justify-content:space-between;font-size:13px;letter-spacing:.18em;text-transform:uppercase;opacity:.7}
.hero h1{position:relative;font-size:clamp(46px,8.4vw,150px);font-weight:700;line-height:.92;letter-spacing:-.055em;z-index:2}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .ln>span{display:inline-block;transform:translateY(105%);transition:transform 1.3s var(--e)}
.ready .hero h1 .ln>span{transform:none}
.ready .hero h1 .ln:nth-child(2)>span{transition-delay:.12s}
.hero-sub{position:relative;z-index:2;margin-top:clamp(18px,2.4vw,30px);font-size:clamp(16px,1.35vw,20px);line-height:1.4;max-width:560px;opacity:0;transform:translateY(16px);transition:opacity 1s var(--e) .5s,transform 1.1s var(--e) .5s}
.hero-sub b{font-weight:700}
.ready .hero-sub{opacity:.8;transform:none}
.rot{position:relative;display:inline-block;color:var(--yellow);vertical-align:top}
.rot b{display:inline-block;font-weight:700}
.rot b span{display:inline-block;transition:transform .7s var(--e),opacity .5s}
.hero-mark{position:absolute;left:0;right:0;bottom:-2vw;display:flex;flex-direction:column;align-items:center;pointer-events:none;z-index:1}
.hero-mark .w{font-size:29vw;font-weight:700;line-height:.74;letter-spacing:-.07em;color:transparent;-webkit-text-stroke:1px rgba(238,233,227,.22);white-space:nowrap}
.hero-mark .w.r{transform:scaleY(-1) skewX(var(--sk,0deg));-webkit-text-stroke:1px rgba(29,43,255,.6);-webkit-mask-image:linear-gradient(0deg,transparent 10%,#000 95%);mask-image:linear-gradient(0deg,transparent 10%,#000 95%);transition:transform .8s var(--e)}
.scroll-hint{position:absolute;bottom:32px;left:var(--pad);display:flex;align-items:center;gap:14px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;z-index:3}
.scroll-hint i{width:1px;height:48px;background:rgba(238,233,227,.25);position:relative;overflow:hidden}
.scroll-hint i::after{content:"";position:absolute;inset:0;background:var(--yellow);animation:drop 1.8s var(--eio) infinite}
@keyframes drop{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}

/* MANIFIESTO */
.manifesto{background:var(--bone);color:var(--ink);padding:clamp(120px,18vw,240px) clamp(20px,6vw,96px);position:relative}
.manifesto .tag{font-size:13px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:40px;display:flex;align-items:center;gap:14px}
.manifesto .tag::before{content:"";width:40px;height:3px;background:var(--blue)}
.mtext{font-size:clamp(34px,5.4vw,92px);font-weight:500;line-height:1.02;letter-spacing:-.045em;max-width:1500px}
.mtext .wd{opacity:.12;transition:opacity .4s,color .4s}
.mtext .wd.on{opacity:1}
.mtext .k.on{color:var(--blue)}

/* ZOOM "TODO UN EQUIPO DETRÁS" */
.zoom{height:100svh;min-height:560px;position:relative;background:var(--ink)}
.zoom-stick{position:relative;height:100%;overflow:hidden}
.zoom-img{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.25);will-change:transform;transition:transform 2.6s cubic-bezier(.16,1,.3,1)}
.zoom.open .zoom-img{transform:scale(1)}
.zoom-mask{position:absolute;inset:0;background:var(--bone);mix-blend-mode:screen;display:flex;align-items:center;justify-content:center;will-change:transform,opacity;transition:transform 1.9s cubic-bezier(.7,0,.25,1) .15s,opacity .6s ease 1.35s}
.zoom.open .zoom-mask{transform:scale(40);opacity:0}
.zoom-mask span{font-size:24vw;font-weight:700;letter-spacing:-.08em;color:#000;line-height:1}
.zoom-copy{position:absolute;left:var(--pad);bottom:clamp(28px,5vw,64px);right:clamp(96px,9vw,130px);display:flex;justify-content:space-between;align-items:flex-end;gap:24px;opacity:0;transform:translateY(30px);transition:opacity .9s var(--e) 1.6s,transform 1s var(--e) 1.6s}
.zoom.open .zoom-copy{opacity:1;transform:none}
.zoom-copy h2{font-size:clamp(40px,6.5vw,110px);font-weight:700;letter-spacing:-.05em;line-height:.92;text-shadow:0 2px 40px rgba(0,0,0,.4)}
.zoom-copy h2 em{font-style:normal;color:var(--yellow)}
.zoom-copy p{max-width:340px;font-size:17px;line-height:1.5;text-shadow:0 1px 20px rgba(0,0,0,.6)}
.zoom-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(13,13,13,.85),rgba(13,13,13,0) 55%);opacity:0;transition:opacity .9s 1.4s}
.zoom.open .zoom-shade{opacity:1}

/* CARRUSEL HORIZONTAL */
.hs{position:relative;background:var(--ink)}
.hs-stick{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center}
.hs-track{display:flex;gap:2vw;padding:0 4vw;will-change:transform}
.panel{flex:none;width:min(78vw,1100px);height:min(74svh,680px);border-radius:28px;padding:clamp(28px,4vw,56px);display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.panel .top{display:flex;gap:16px;justify-content:space-between;align-items:flex-start;font-size:14px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.panel .big{font-size:clamp(150px,22vw,340px);font-weight:700;letter-spacing:-.08em;line-height:.75;position:absolute;right:-1vw;bottom:-2vw;opacity:.14}
.panel h3{font-size:clamp(40px,6vw,104px);font-weight:700;letter-spacing:-.055em;line-height:.9;position:relative}
.panel p{font-size:clamp(17px,1.5vw,21px);max-width:440px;line-height:1.45;margin-top:22px;position:relative;opacity:.85}
.p-intro{width:min(60vw,760px);background:transparent;padding-left:0;justify-content:center}
.p-intro h2{font-size:clamp(48px,7vw,120px);font-weight:700;letter-spacing:-.055em;line-height:.9}
.p-intro h2 em{font-style:normal;color:var(--yellow)}
.p-intro p{opacity:.65}
.p1{background:var(--blue);color:#fff}
.p2{background:var(--yellow);color:var(--ink)}
.p3{background:var(--bone);color:var(--ink)}
.p4{background:#1b1b1b;color:var(--bone);border:1px solid rgba(238,233,227,.12)}
.pben{width:min(88vw,1320px);justify-content:flex-start;gap:clamp(20px,2.6vw,36px)}
.pben .ben-head{display:grid;grid-template-columns:1.3fr 1fr;gap:3vw;align-items:end}
.pben h3{font-size:clamp(34px,4.2vw,68px)}
.pben h3 em{font-style:normal;color:var(--yellow)}
.pben .ben-head p{margin-top:0;opacity:.65}
.ben-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px);margin-top:auto}
.ben-grid>div{border-top:1px solid rgba(238,233,227,.18);padding-top:18px;transition:border-color .4s}
.ben-grid>div:hover{border-color:var(--yellow)}
.ben-grid span{font-size:13px;font-weight:500;color:var(--yellow);letter-spacing:.1em}
.ben-grid h4{font-size:clamp(19px,1.6vw,24px);font-weight:700;letter-spacing:-.025em;line-height:1.1;margin:12px 0 10px}
.ben-grid p{font-size:15px;line-height:1.45;margin:0;opacity:.6;max-width:none}
.chip{display:inline-block;white-space:nowrap;padding:7px 12px;border-radius:999px;border:1px solid currentColor;font-size:12px;letter-spacing:.12em}
.hs-bar{position:absolute;left:4vw;right:4vw;bottom:5svh;height:2px;background:rgba(238,233,227,.12)}
.hs-bar span{position:absolute;inset:0;background:var(--yellow);transform:scaleX(0);transform-origin:left}

/* VIDEO: disparadores y modal */
.vcard{position:absolute;right:var(--pad);bottom:clamp(80px,9vw,120px);z-index:4;width:clamp(130px,11vw,170px);aspect-ratio:9/16;border-radius:18px;overflow:hidden;cursor:pointer;border:0;padding:0;background:#111;box-shadow:0 20px 60px rgba(0,0,0,.5);opacity:0;transform:translateY(30px) rotate(4deg);transition:opacity 1s var(--e) .9s,transform 1s var(--e) .9s}
.ready .vcard{opacity:1;transform:rotate(4deg)}
.vcard:hover{transform:rotate(0) scale(1.04)!important;transition-delay:0s}
.vcard img{width:100%;height:100%;object-fit:cover;animation:kb 12s ease-in-out infinite alternate}
@keyframes kb{to{transform:scale(1.12)}}
.vcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.75))}
.vcard .lbl{position:absolute;left:12px;right:12px;bottom:12px;z-index:2;color:var(--bone);font-size:12px;line-height:1.3;text-align:left;font-weight:500}
.vcard .lbl b{display:block;color:var(--yellow);font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:3px}
.play{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;background:var(--yellow);display:flex;align-items:center;justify-content:center;z-index:2;transition:transform .5s var(--e)}
.play::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--yellow);animation:waPulse 2.2s var(--e) infinite}
.play svg{width:18px;height:18px;margin-left:3px;fill:var(--ink)}
.vcard:hover .play,.vtile:hover .play{transform:translate(-50%,-50%) scale(1.12)}
.vlink{display:inline-flex;align-items:center;gap:12px;margin-top:22px;background:var(--yellow);color:var(--ink);border:0;border-radius:999px;padding:10px 18px 10px 10px;font:500 15px 'Space Grotesk',sans-serif;cursor:pointer;transition:background .3s}
.vlink:hover{background:var(--bone)}
.vlink i{width:30px;height:30px;border-radius:50%;background:var(--ink);display:flex;align-items:center;justify-content:center}
.vlink i svg{width:11px;height:11px;fill:var(--yellow);margin-left:2px}
.vbox{position:relative;height:min(88svh,calc((100vw - 32px)*16/9));aspect-ratio:9/16;border-radius:22px;overflow:hidden;background:#000;box-shadow:0 30px 120px rgba(0,0,0,.6);transform:scale(.92) translateY(20px);transition:transform .7s var(--e)}
.vmodal.open .vbox{transform:none}
.vbox video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.vbox.playing .spin{display:none}
.vside{position:absolute;left:var(--pad);bottom:clamp(20px,5vh,48px);max-width:300px;color:var(--bone)}
.vside b{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--yellow);margin-bottom:8px;font-weight:500}
.vside p{font-size:clamp(22px,2.2vw,32px);font-weight:700;letter-spacing:-.035em;line-height:1.02}
@media (max-width:1100px){.vside{display:none}}

/* PORTAFOLIO */
.pf-row{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;padding:clamp(56px,7vw,96px) var(--pad) 0;scroll-margin-top:120px}
.pf-k{font-size:13px;letter-spacing:.18em;text-transform:uppercase;opacity:.55;display:flex;align-items:center;gap:12px;margin-bottom:16px}
.pf-k::before{content:"";width:36px;height:3px;background:var(--blue)}
.pf-row h3{font-size:clamp(32px,4.4vw,72px);font-weight:700;letter-spacing:-.05em;line-height:.95}
.pf-row h3 em{font-style:normal;color:var(--yellow)}
.pf-btn{display:inline-flex;align-items:center;gap:16px;background:var(--bone);color:var(--ink);border:0;border-radius:999px;padding:12px 12px 12px 28px;font:600 17px 'Space Grotesk',sans-serif;cursor:pointer;transition:background .35s}
.pf-btn i{width:46px;height:46px;border-radius:50%;background:var(--ink);color:var(--yellow);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:20px;transition:transform .5s var(--e)}
.pf-btn:hover{background:var(--yellow)}
.pf-btn:hover i{transform:rotate(-45deg)}
.pbox{position:relative;width:min(94vw,calc((88svh - 64px)*16/9));transform:scale(.94) translateY(20px);transition:transform .7s var(--e)}
.vmodal.open .pbox{transform:none}
.pframe{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#161616;box-shadow:0 30px 120px rgba(0,0,0,.6)}
.pframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pframe.loaded .spin{display:none}
.pbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:14px;font-size:14px;color:var(--bone)}
.pbar span{opacity:.6;letter-spacing:.12em;text-transform:uppercase;font-size:12px}
@media (max-width:860px){.pf-btn{width:100%;justify-content:space-between}}

/* PRUEBA SOCIAL: cifras, logos y fotos */
.proof{background:var(--ink);padding:clamp(100px,14vw,200px) 0 clamp(70px,8vw,110px);overflow:hidden}
.nums{display:grid;grid-template-columns:repeat(4,1fr);padding:0 var(--pad);gap:2vw}
.num{border-top:1px solid rgba(238,233,227,.18);padding-top:22px}
.num b{display:block;font-size:clamp(64px,10vw,170px);font-weight:700;letter-spacing:-.07em;line-height:.85}
.num b i{font-style:normal}
.num b sup{font-size:.4em;color:var(--yellow);vertical-align:top}
.num span{display:block;margin-top:14px;font-size:15px;opacity:.6;max-width:220px}
.mq{margin-top:clamp(80px,10vw,140px);overflow:hidden;position:relative}
.mq-view{position:relative;overflow:hidden}
.mq-view::before,.mq-view::after{content:"";position:absolute;top:0;bottom:0;width:10%;z-index:2;pointer-events:none}
.mq-view::before{left:0;background:linear-gradient(90deg,var(--ink),rgba(13,13,13,0))}
.mq-view::after{right:0;background:linear-gradient(270deg,var(--ink),rgba(13,13,13,0))}
.mq-t{display:flex;width:max-content;align-items:center}
.mq-g{display:flex;align-items:center;flex-shrink:0;animation:mqg 40s linear infinite;will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden}
@keyframes mqg{from{transform:translate3d(0,0,0)}to{transform:translate3d(-100%,0,0)}}
.mq:hover .mq-g{animation-play-state:paused}
.mq-t img{width:auto;margin:0 clamp(32px,4vw,64px);opacity:.5;transition:opacity .3s}
.mq-t img:hover{opacity:1}
.mq-label{text-align:center;font-size:13px;letter-spacing:.18em;text-transform:uppercase;opacity:.5;margin-bottom:34px}
@media (max-width:860px){.mq-t img{margin:0 22px;transform:scale(.85)}.mq-g{animation-duration:32s}}
.strip{display:flex;gap:14px;padding:0 14px;margin-top:clamp(70px,9vw,120px)}
.strip figure{flex:1;height:clamp(240px,34vw,520px);border-radius:20px;overflow:hidden;transition:flex 1s var(--e);position:relative;background:#161616}
.strip figure:hover{flex:2.4}
.strip img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:filter .8s,transform 1.2s var(--e)}
.strip figure:hover img{filter:none;transform:scale(1.04)}
.strip figcaption{position:absolute;left:18px;bottom:16px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;opacity:0;transform:translateY(10px);transition:all .6s var(--e)}
.strip figure:hover figcaption{opacity:1;transform:none}
.strip .vtile{cursor:pointer;flex:.85}
.strip .vtile:hover{flex:1.4}
.strip .vtile img{filter:none}
.strip .vtile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.7))}
.strip .vtile figcaption{opacity:1;transform:none;z-index:2;color:var(--bone)}
.strip .vtile figcaption b{color:var(--yellow);font-weight:500}

/* CTA ¿HABLAMOS? */
.cta{min-height:100svh;background:var(--yellow);color:var(--ink);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:120px var(--pad) 60px;position:relative;overflow:hidden}
.cta .eyb{font-size:13px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:24px}
.cta h2{font-size:clamp(70px,15vw,260px);font-weight:700;letter-spacing:-.075em;line-height:.82}
.cta-btn{margin-top:clamp(40px,5vw,64px);width:clamp(150px,15vw,200px);height:clamp(150px,15vw,200px);border-radius:50%;background:var(--ink);color:var(--bone);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-weight:500;font-size:16px;position:relative;transition:background .4s}
.cta-btn:hover{background:var(--blue)}
button.cta-btn{border:0;cursor:pointer;font-family:inherit;padding:0}
.cta-btn .ar{font-size:28px;transition:transform .5s var(--e)}
.cta-btn:hover .ar{transform:rotate(-45deg)}
.cta-btn svg{position:absolute;inset:-26px;width:calc(100% + 52px);height:calc(100% + 52px);animation:spin 18s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.cta-btn text{font-size:10px;letter-spacing:.1em;text-transform:uppercase;fill:var(--ink);font-weight:500}
.cta-links{margin-top:56px;display:flex;gap:clamp(20px,4vw,56px);flex-wrap:wrap;justify-content:center;font-size:clamp(16px,1.5vw,20px);font-weight:500}
.cta-links a{border-bottom:2px solid transparent;transition:border-color .3s}
.cta-links a:hover{border-color:var(--ink)}

@media (max-width:860px){
  .hero-top span:last-child{display:none}
  .vcard{width:auto;aspect-ratio:auto;height:auto;bottom:96px;right:20px;border-radius:999px;display:flex;align-items:center;gap:10px;padding:6px 16px 6px 6px;background:rgba(13,13,13,.7);backdrop-filter:blur(10px);border:1px solid rgba(238,233,227,.15)}
  .ready .vcard{transform:none}
  .vcard img,.vcard::after{display:none}
  .vcard .play{position:relative;left:auto;top:auto;transform:none;width:40px;height:40px}
  .vcard:hover .play{transform:scale(1.08)}
  .vcard .lbl{position:static;font-size:13px}
  .vcard .lbl b{font-size:10px}
  .hs-stick{position:relative;height:auto;display:block;padding:90px 0}
  .hs-track{flex-direction:column;transform:none!important;padding:0 16px;gap:14px}
  .panel,.p-intro{width:100%;height:auto;min-height:420px}
  .p-intro{min-height:0;padding:0 4px 30px}
  .hs{height:auto!important}
  .hs-bar{display:none}
  .pben .ben-head,.ben-grid{grid-template-columns:1fr}
  .ben-grid{margin-top:12px;gap:22px}
  .nums{grid-template-columns:1fr 1fr;row-gap:40px}
  .strip{overflow-x:auto;scroll-snap-type:x mandatory}
  .strip figure{flex:none;width:72vw;scroll-snap-align:start}
  .strip figure:hover{flex:none}
  .strip img{filter:none}
  .strip .vtile,.strip .vtile:hover{flex:none;width:56vw}
  .zoom-copy{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){.hero h1 .ln>span{transform:none}.hero-sub{opacity:.8;transform:none}}
.panel .pmore{display:inline-block;margin-top:20px;font-size:15px;font-weight:500;border-bottom:1.5px solid currentColor;padding-bottom:3px;position:relative}