/* ============================================================
   ANTBUC — Sitio web · Unbounded + Mohave · muy visual
   ============================================================ */
:root{
  /* Paleta actualizada Antbuc (cotización 2026): negro + azul brillante */
  --navy:#16181A;
  --navy-2:#1E2124;
  --navy-deep:#0B0C0D;
  --blue:#0A66E8;
  --blue-soft:#5B94F2;
  --carbon:#111314;
  --ink:#111314;
  --paper:#FFF9F2;
  --white:#ffffff;
  --font-display:'Unbounded',system-ui,sans-serif;
  --font-body:'Mohave',system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--navy-deep);
  color:var(--white);
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
::selection{background:var(--blue);color:var(--white)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}

/* ---------- cursor ---------- */
.cursor-dot,.cursor-ring{display:none}
@media (hover:hover) and (pointer:fine){
  .cursor-dot{display:block;position:fixed;top:0;left:0;width:8px;height:8px;background:var(--blue);border-radius:50%;pointer-events:none;z-index:9999}
  .cursor-ring{display:block;position:fixed;top:0;left:0;width:38px;height:38px;border:1.5px solid rgba(10,102,232,.55);border-radius:50%;pointer-events:none;z-index:9998;transition:width .25s var(--ease),height .25s var(--ease),background .25s}
  .cursor-ring.is-hover{width:64px;height:64px;background:rgba(10,102,232,.12)}
}

/* ---------- progreso ---------- */
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--blue),var(--blue-soft));z-index:1001}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem clamp(1.25rem,4vw,3.5rem);
  transition:background .4s,box-shadow .4s,padding .4s;
}
.nav.is-scrolled{background:rgba(11,12,13,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(255,255,255,.06);padding-top:.65rem;padding-bottom:.65rem}
.nav__logo img{height:28px;width:auto}
.nav__links{display:flex;gap:2.2rem;align-items:center}
.nav__links a{font-size:1rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;opacity:.85;position:relative;transition:opacity .25s}
.nav__links a:hover{opacity:1}
.nav__links a::after{content:'';position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--blue);transition:width .3s var(--ease)}
.nav__links a:hover::after{width:100%}
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-body);font-weight:600;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.85rem 1.8rem;border-radius:999px;border:none;cursor:pointer;
  background:var(--blue);color:var(--white);
  transition:transform .3s var(--ease),box-shadow .3s,background .3s;
}
.btn:hover{background:#3b86f7;box-shadow:0 12px 30px -8px rgba(10,102,232,.55);transform:translateY(-2px)}
.btn--ghost{background:transparent;border:1.5px solid rgba(255,255,255,.35)}
.btn--ghost:hover{background:rgba(255,255,255,.08);box-shadow:none;border-color:rgba(255,255,255,.7)}
.btn--nav{padding:.55rem 1.3rem;font-size:.9rem}
.btn .arrow{transition:transform .3s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}

.nav__burger{display:none;background:none;border:none;cursor:pointer;z-index:1002;width:44px;height:44px;position:relative}
.nav__burger span{position:absolute;left:10px;width:24px;height:2px;background:var(--white);transition:transform .35s var(--ease),opacity .25s,top .35s var(--ease)}
.nav__burger span:nth-child(1){top:16px}
.nav__burger span:nth-child(2){top:22px}
.nav__burger span:nth-child(3){top:28px}
.nav__burger.is-open span:nth-child(1){top:22px;transform:rotate(45deg)}
.nav__burger.is-open span:nth-child(2){opacity:0}
.nav__burger.is-open span:nth-child(3){top:22px;transform:rotate(-45deg)}

.mobile-menu{
  position:fixed;inset:0;z-index:999;background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 100%);
  display:flex;flex-direction:column;justify-content:center;padding:0 2rem;
  clip-path:circle(0 at calc(100% - 44px) 44px);transition:clip-path .6s var(--ease);
  visibility:hidden;
}
.mobile-menu.is-open{clip-path:circle(150% at calc(100% - 44px) 44px);visibility:visible}
.mobile-menu a{font-family:var(--font-display);font-size:clamp(1.6rem,8vw,2.6rem);font-weight:700;padding:.6rem 0;opacity:0;transform:translateY(24px);transition:opacity .4s,transform .5s var(--ease)}
.mobile-menu.is-open a{opacity:1;transform:none}
.mobile-menu a span{color:var(--blue);font-size:.5em;margin-right:.8rem;font-weight:400}
.mobile-menu__foot{position:absolute;bottom:2.2rem;left:2rem;font-size:.9rem;opacity:.6;letter-spacing:.14em;text-transform:uppercase}

/* ---------- hero ---------- */
.hero{
  min-height:100svh;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:2rem;
  position:relative;overflow:hidden;
  background:
    radial-gradient(1100px 700px at 85% -10%,rgba(10,102,232,.30),transparent 60%),
    radial-gradient(900px 600px at -10% 110%,rgba(63,127,224,.18),transparent 55%),
    linear-gradient(165deg,var(--navy) 0%,var(--navy-deep) 70%);
  padding:7rem clamp(1.25rem,5vw,4rem) 3rem;
}
.hero__kicker{
  display:inline-flex;align-items:center;gap:.7rem;
  font-size:.95rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--blue-soft);
  margin-bottom:1.5rem;
}
.hero__kicker::before{content:'';width:38px;height:1.5px;background:var(--blue)}
.hero h1{
  font-family:var(--font-display);
  font-size:clamp(2.2rem,6.5vw,4.8rem);
  font-weight:900;line-height:1.04;letter-spacing:-.01em;
  text-transform:uppercase;
}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .word{display:inline-block;transform:translateY(110%);animation:rise 1s var(--ease) forwards}
.hero h1 .accent{color:var(--blue)}
.hero h1 .outline{color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.85)}
@keyframes rise{to{transform:translateY(0)}}
.hero__cta{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2.4rem;opacity:0;animation:fadeUp .9s var(--ease) .8s forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* visor 360 */
.hero__stage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:380px}
.viewer360{
  position:relative;width:100%;max-width:640px;aspect-ratio:16/10;
  display:flex;align-items:center;justify-content:center;
  cursor:grab;user-select:none;touch-action:pan-y;
}
.viewer360:active{cursor:grabbing}
.viewer360 img{width:100%;height:100%;object-fit:contain;pointer-events:none;
  filter:drop-shadow(0 40px 50px rgba(0,0,0,.45))}
.viewer360__hint{
  margin-top:.6rem;display:inline-flex;align-items:center;gap:.6rem;
  font-size:.85rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.65);
}
.viewer360__hint::before{content:'⟲';font-size:1.1rem;color:var(--blue);animation:spinhint 3s linear infinite;display:inline-block}
@keyframes spinhint{to{transform:rotate(-360deg)}}
.hero__chip{
  position:absolute;top:8%;right:6%;
  font-size:.8rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  background:rgba(10,102,232,.15);border:1px solid rgba(10,102,232,.4);color:var(--blue-soft);
  padding:.45rem 1rem;border-radius:999px;backdrop-filter:blur(4px);
  animation:fadeUp .9s var(--ease) 1.1s both;
}
/* fallback isotipo */
.hero__isofall{width:min(46vw,420px);opacity:.92;animation:float 8s ease-in-out infinite;filter:drop-shadow(0 40px 60px rgba(0,0,0,.4))}
@keyframes float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-18px) rotate(2deg)}}

.hero__scroll{
  position:absolute;bottom:1.6rem;left:50%;transform:translateX(-50%);
  font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;opacity:.55;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
}
.hero__scroll::after{content:'';width:1.5px;height:40px;background:linear-gradient(var(--white),transparent);animation:drip 1.8s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- marquee ---------- */
.marquee{
  background:var(--blue);color:var(--navy-deep);
  overflow:hidden;padding:1rem 0;transform:rotate(-1.2deg) scale(1.02);
  position:relative;z-index:5;
}
.marquee__track{display:flex;gap:2.6rem;width:max-content;animation:scroll 26s linear infinite}
.marquee span{
  font-family:var(--font-display);font-weight:700;font-size:1rem;letter-spacing:.1em;text-transform:uppercase;
  display:flex;align-items:center;gap:2.6rem;white-space:nowrap;
}
.marquee span::after{content:'✦';font-size:.8em}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- secciones ---------- */
.section{padding:clamp(4rem,8vw,7rem) clamp(1.25rem,4vw,3.5rem);position:relative}
.section__head{max-width:1400px;margin:0 auto 2.4rem;display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.section__tag{
  display:inline-flex;align-items:center;gap:.6rem;font-size:.85rem;font-weight:500;
  letter-spacing:.28em;text-transform:uppercase;color:var(--blue);margin-bottom:.9rem;
}
.section__tag::before{content:'';width:30px;height:1.5px;background:var(--blue)}
.section h2{
  font-family:var(--font-display);font-size:clamp(1.6rem,4vw,2.8rem);
  font-weight:800;line-height:1.1;letter-spacing:0;text-transform:uppercase;max-width:22ch;
}
.wrap{max-width:1400px;margin:0 auto}

.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}

/* ---------- servicios (lista con imagen al hover) ---------- */
.services{background:var(--paper);color:var(--ink)}
.services__list{max-width:1400px;margin:0 auto;border-top:1px solid rgba(17,19,20,.15)}
.service{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:2.2rem .5rem;border-bottom:1px solid rgba(17,19,20,.15);
  position:relative;transition:padding .4s var(--ease);
}
.service:hover{padding-left:1.5rem}
.service__num{font-family:var(--font-display);font-weight:400;font-size:1rem;color:var(--blue);min-width:3ch}
.service h3{
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.3rem,3.6vw,2.6rem);color:var(--navy);letter-spacing:0;
  flex:1;transition:color .3s;
}
.service:hover h3{color:var(--blue)}
.service__peek{
  width:200px;height:130px;border-radius:14px;object-fit:cover;flex-shrink:0;
  opacity:0;transform:scale(.85) rotate(3deg);transition:opacity .45s,transform .55s var(--ease);
  box-shadow:0 24px 50px -18px rgba(17,19,20,.4);
}
.service:hover .service__peek{opacity:1;transform:scale(1) rotate(-2deg)}
.service__arrow{font-size:1.6rem;color:var(--navy);opacity:.35;transition:transform .4s var(--ease),opacity .3s}
.service:hover .service__arrow{transform:translateX(8px) rotate(-45deg);opacity:1;color:var(--blue)}

/* ---------- galería proyectos (grid apretado) ---------- */
.projects{background:linear-gradient(180deg,var(--navy-deep),var(--navy) 130%)}
.projects__grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;
  max-width:1400px;margin:0 auto;
}
.tile{
  border-radius:12px;overflow:hidden;position:relative;aspect-ratio:1/1;
  isolation:isolate;background:var(--navy-2);display:block;
}
.tile--w{grid-column:span 2;aspect-ratio:2/1}
.tile--t{grid-row:span 2;aspect-ratio:1/2}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),filter .5s}
.tile:hover img{transform:scale(1.07)}
.tile::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(190deg,transparent 55%,rgba(11,12,13,.9) 100%);
  opacity:0;transition:opacity .45s;z-index:1;
}
.tile:hover::after{opacity:1}
.tile__label{
  position:absolute;left:1.1rem;bottom:1rem;z-index:2;
  opacity:0;transform:translateY(12px);transition:opacity .4s,transform .5s var(--ease);
}
.tile:hover .tile__label{opacity:1;transform:none}
.tile__label h3{font-family:var(--font-display);font-weight:700;font-size:1.05rem;text-transform:uppercase;letter-spacing:.02em}
.tile__label p{font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-soft)}
.tile__plus{
  position:absolute;top:.9rem;right:.9rem;z-index:2;width:38px;height:38px;border-radius:50%;
  background:rgba(11,12,13,.5);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.25);
  display:grid;place-items:center;font-size:1rem;
  opacity:0;transform:rotate(-45deg);transition:opacity .4s,transform .5s var(--ease);
}
.tile:hover .tile__plus{opacity:1;transform:none}
.projects__more{display:flex;justify-content:center;margin-top:2.6rem}

/* ---------- reels ---------- */
.reels{background:var(--paper);color:var(--ink);overflow:hidden}
.reels__row{
  display:flex;gap:1.2rem;justify-content:center;align-items:stretch;
  max-width:1400px;margin:0 auto;flex-wrap:wrap;
}
.reel{
  flex:0 1 300px;border-radius:22px;overflow:hidden;position:relative;
  aspect-ratio:9/16;background:var(--navy-deep);
  box-shadow:0 30px 60px -22px rgba(17,19,20,.45);
  transition:transform .5s var(--ease),box-shadow .5s;
}
.reel:nth-child(1){transform:rotate(-2.5deg) translateY(10px)}
.reel:nth-child(3){transform:rotate(2.5deg) translateY(10px)}
.reel:hover{transform:rotate(0) translateY(-6px) scale(1.02);box-shadow:0 40px 80px -20px rgba(17,19,20,.55);z-index:2}
.reel video{width:100%;height:100%;object-fit:cover;display:block}
.reel__badge{
  position:absolute;top:.9rem;left:.9rem;
  font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--white);
  background:rgba(11,12,13,.55);backdrop-filter:blur(6px);
  padding:.35rem .8rem;border-radius:999px;
}

/* ---------- manifiesto ---------- */
.manifesto{
  background:
    radial-gradient(900px 500px at 20% 0%,rgba(10,102,232,.2),transparent 60%),
    linear-gradient(180deg,var(--navy) 0%,var(--navy-deep) 100%);
  text-align:center;overflow:hidden;position:relative;
}
.manifesto__iso{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(70vw,720px);opacity:.06;pointer-events:none}
.manifesto blockquote{
  font-family:var(--font-display);font-size:clamp(1.3rem,3.4vw,2.4rem);font-weight:700;text-transform:uppercase;
  line-height:1.25;max-width:26ch;margin:0 auto;position:relative;
}
.manifesto blockquote em{font-style:normal;color:var(--blue)}
.manifesto__stats{display:flex;justify-content:center;gap:clamp(2rem,7vw,5.5rem);margin-top:3.4rem;flex-wrap:wrap;position:relative}
.stat{text-align:center}
.stat__num{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,4.6vw,3.2rem);color:var(--blue);line-height:1}
.stat__label{margin-top:.5rem;font-size:.88rem;letter-spacing:.22em;text-transform:uppercase;opacity:.7}

/* ---------- contacto ---------- */
.contact{background:var(--paper);color:var(--ink);overflow:hidden}
.contact__card{
  max-width:1400px;margin:0 auto;border-radius:28px;
  background:
    radial-gradient(700px 400px at 90% -20%,rgba(10,102,232,.35),transparent 60%),
    linear-gradient(150deg,var(--navy),var(--navy-deep));
  color:var(--white);padding:clamp(2.8rem,6vw,5rem) clamp(1.8rem,5vw,4.5rem);
  position:relative;overflow:hidden;text-align:center;
}
.contact__card h2{font-family:var(--font-display);font-size:clamp(1.7rem,4.6vw,3.2rem);font-weight:900;text-transform:uppercase;line-height:1.1;margin:0 auto;max-width:18ch}
.contact__card h2 em{font-style:normal;color:var(--blue)}
.contact__cta{margin-top:2.2rem;display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}
.contact__iso{position:absolute;right:-5%;bottom:-22%;width:min(34vw,340px);opacity:.12;pointer-events:none;transform:rotate(-8deg)}

/* ---------- footer ---------- */
.footer{background:var(--navy-deep);padding:2.8rem clamp(1.25rem,4vw,3.5rem) 1.8rem}
.footer__top{max-width:1400px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;padding-bottom:1.8rem;border-bottom:1px solid rgba(255,255,255,.1)}
.footer__brand img{height:30px;width:auto}
.footer__links{display:flex;gap:1.8rem;flex-wrap:wrap}
.footer__links a{font-size:.95rem;letter-spacing:.1em;text-transform:uppercase;opacity:.8;transition:opacity .25s,color .25s}
.footer__links a:hover{opacity:1;color:var(--blue-soft)}
.footer__bottom{max-width:1400px;margin:1.3rem auto 0;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.85rem;color:rgba(255,255,255,.45)}

/* ============================================================
   PÁGINA PROYECTOS
   ============================================================ */
.phead{
  padding:9rem clamp(1.25rem,4vw,3.5rem) 3rem;
  background:
    radial-gradient(900px 500px at 80% -20%,rgba(10,102,232,.28),transparent 60%),
    linear-gradient(165deg,var(--navy) 0%,var(--navy-deep) 75%);
}
.phead h1{
  font-family:var(--font-display);font-size:clamp(2.4rem,8vw,5.5rem);
  font-weight:900;text-transform:uppercase;line-height:1;
}
.phead h1 em{font-style:normal;color:var(--blue)}
.phead__filters{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:2rem}
.chip{
  font-family:var(--font-body);font-size:.92rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  padding:.5rem 1.3rem;border-radius:999px;cursor:pointer;
  background:transparent;border:1.5px solid rgba(255,255,255,.3);color:var(--white);
  transition:background .3s,border-color .3s,color .3s,transform .3s var(--ease);
}
.chip:hover{transform:translateY(-2px);border-color:var(--blue)}
.chip.is-active{background:var(--blue);border-color:var(--blue)}

.pwork{padding:3rem clamp(1.25rem,4vw,3.5rem) 5rem;background:linear-gradient(180deg,var(--navy-deep),#001a2e)}
.pcase{max-width:1400px;margin:0 auto 4.5rem;scroll-margin-top:6rem}
.pcase.is-hidden{display:none}
.pcase__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem}
.pcase__head h2{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:clamp(1.4rem,3.4vw,2.3rem)}
.pcase__meta{font-size:.85rem;letter-spacing:.24em;text-transform:uppercase;color:var(--blue-soft)}
.pcase__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.pcase__grid .shot{
  border-radius:12px;overflow:hidden;position:relative;cursor:zoom-in;
  aspect-ratio:4/3;background:var(--navy-2);border:none;padding:0;display:block;width:100%;
}
.pcase__grid .shot--hero{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.shot:hover img{transform:scale(1.06)}
.shot::after{
  content:'+';position:absolute;top:.7rem;right:.8rem;z-index:2;
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:rgba(11,12,13,.5);backdrop-filter:blur(6px);color:var(--white);font-size:1.2rem;
  opacity:0;transition:opacity .35s;
}
.shot:hover::after{opacity:1}

/* lightbox */
.lightbox{
  position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;
  background:rgba(0,20,35,.92);backdrop-filter:blur(10px);
}
.lightbox.is-open{display:flex}
.lightbox img{max-width:92vw;max-height:86vh;border-radius:14px;box-shadow:0 40px 100px rgba(0,0,0,.6)}
.lightbox__btn{
  position:absolute;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);
  color:var(--white);width:52px;height:52px;border-radius:50%;font-size:1.4rem;cursor:pointer;
  display:grid;place-items:center;transition:background .3s;
}
.lightbox__btn:hover{background:rgba(10,102,232,.4)}
.lightbox__close{top:1.4rem;right:1.4rem}
.lightbox__prev{left:1.4rem;top:50%;transform:translateY(-50%)}
.lightbox__next{right:1.4rem;top:50%;transform:translateY(-50%)}
.lightbox__count{position:absolute;bottom:1.6rem;left:50%;transform:translateX(-50%);font-size:.9rem;letter-spacing:.3em;color:rgba(255,255,255,.7)}

/* ---------- responsive ---------- */
@media (max-width:1060px){
  .projects__grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:960px){
  .nav__links{display:none}
  .nav__burger{display:block}
  .hero{grid-template-columns:1fr;padding-top:6.5rem;text-align:center}
  .hero__kicker{justify-content:center}
  .hero__cta{justify-content:center}
  .hero__stage{min-height:300px}
  .hero__chip{top:0;right:2%}
  .pcase__grid{grid-template-columns:repeat(2,1fr)}
  .pcase__grid .shot--hero{grid-column:span 2;grid-row:auto}
}
@media (max-width:640px){
  .projects__grid{grid-template-columns:repeat(2,1fr);gap:.5rem}
  .tile--w{grid-column:span 2}
  .tile--t{grid-row:span 1;aspect-ratio:1/1}
  .service__peek{display:none}
  .pcase__grid{grid-template-columns:1fr}
  .pcase__grid .shot--hero{grid-column:span 1}
  .hero__scroll{display:none}
  /* reels: carrusel horizontal deslizable (los 3 accesibles con swipe) */
  .reels__row{
    flex-wrap:nowrap;justify-content:flex-start;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding:0 1rem 1.2rem;margin:0 -1.25rem;scrollbar-width:none;
  }
  .reels__row::-webkit-scrollbar{display:none}
  .reel{flex:0 0 72vw;scroll-snap-align:center}
  .reel:nth-child(1),.reel:nth-child(3){transform:none}
  .reel:hover{transform:none}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .hero h1 .word{transform:none}
  .hero__cta{opacity:1}
  .reveal{opacity:1;transform:none}
  /* la marquesina es identidad del sitio: se mantiene en movimiento (más lenta) */
  .marquee__track{animation-duration:40s!important;animation-iteration-count:infinite!important}
}

/* ============================================================
   MURO DE LOGOTIPOS (negro -> preferente al hover/tap)
   ============================================================ */
.logowall{background:#ffffff;color:var(--ink)}
.logowall .section__tag{color:var(--blue)}
.logowall h2{color:var(--navy)}
.logowall__grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:.6rem;
  max-width:1400px;margin:0 auto;
}
.logocard{
  position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;
  background:#ffffff;border:1px solid rgba(17,19,20,.1);
  display:grid;place-items:center;cursor:pointer;
  transition:transform .4s var(--ease),box-shadow .4s,border-color .4s;
}
.logocard:hover{transform:translateY(-5px);box-shadow:0 22px 44px -18px rgba(17,19,20,.28);border-color:rgba(10,102,232,.4)}
.logocard img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:18%;
  transition:opacity .35s ease,transform .5s var(--ease);
}
.logocard .lc-color{opacity:0;transform:scale(.94)}
.logocard:hover .lc-negro,.logocard.is-active .lc-negro{opacity:0;transform:scale(1.05)}
.logocard:hover .lc-color,.logocard.is-active .lc-color{opacity:1;transform:scale(1)}
.logocard--full .lc-color{object-fit:cover;padding:0}

/* ============================================================
   POPUP COLABOREMOS
   ============================================================ */
.popup{
  position:fixed;right:1.2rem;bottom:1.2rem;z-index:1500;
  display:flex;align-items:center;gap:1rem;
  background:linear-gradient(150deg,var(--navy),var(--navy-deep));
  border:1px solid rgba(10,102,232,.35);
  border-radius:20px;padding:1rem 1.2rem;max-width:330px;
  box-shadow:0 30px 70px -20px rgba(0,10,20,.7);
  opacity:0;transform:translateY(30px) scale(.95);pointer-events:none;
  transition:opacity .5s var(--ease),transform .6s var(--ease);
}
.popup.is-visible{opacity:1;transform:none;pointer-events:auto}
.popup__eye{
  width:64px;height:64px;border-radius:50%;flex-shrink:0;object-fit:cover;
  border:2px solid var(--blue);
  animation:eyewink 5s ease-in-out infinite;
}
@keyframes eyewink{0%,90%,100%{transform:rotate(0)}93%{transform:rotate(-8deg)}96%{transform:rotate(6deg)}}
.popup__body h3{font-family:var(--font-display);font-size:1rem;font-weight:800;text-transform:uppercase;line-height:1.2;color:var(--white)}
.popup__body a{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:.45rem;
  font-size:.85rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);
}
.popup__body a:hover{color:var(--blue-soft)}
.popup__close{
  position:absolute;top:.45rem;right:.6rem;background:none;border:none;color:rgba(255,255,255,.5);
  font-size:1rem;cursor:pointer;padding:.2rem;line-height:1;
}
.popup__close:hover{color:var(--white)}

/* ============================================================
   VIDEOS EN GALERIA DE PROYECTOS
   ============================================================ */
.shot--video{cursor:default}
.shot--video video{width:100%;height:100%;object-fit:cover;display:block}
.shot--video::after{content:'▶';font-size:.85rem;opacity:1;background:rgba(10,102,232,.55)}

@media (max-width:1060px){
  .logowall__grid{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:760px){
  .logowall__grid{grid-template-columns:repeat(3,1fr)}
  .popup{right:.8rem;bottom:.8rem;left:.8rem;max-width:none}
}
@media (max-width:520px){
  .logowall__grid{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================
   ANIMACION DE MARCA (videos de logotipo)
   ============================================================ */
.anims{background:linear-gradient(180deg,var(--navy-deep) 0%,var(--navy) 130%)}
.anims__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;max-width:1400px;margin:0 auto}
.anim{
  position:relative;border-radius:16px;overflow:hidden;aspect-ratio:16/9;
  background:var(--navy-2);isolation:isolate;
  transition:transform .5s var(--ease),box-shadow .5s;
}
.anim:hover{transform:translateY(-6px);box-shadow:0 30px 60px -20px rgba(10,102,232,.35)}
.anim video{width:100%;height:100%;object-fit:cover;display:block}
.anim__tag{
  position:absolute;left:.9rem;bottom:.8rem;z-index:2;
  font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--white);
  background:rgba(11,12,13,.55);backdrop-filter:blur(6px);
  padding:.35rem .9rem;border-radius:999px;
}
@media (max-width:960px){
  .anims__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .anims__grid{grid-template-columns:1fr;gap:.7rem}
}