/* =========================================================================
   CAPA DE INTERACCIÓN — patrones de la referencia (Halston / Webflow)
   Todo lo que se oculta aquí se oculta SOLO si el JS ha arrancado (.fx),
   para que sin JavaScript la web siga siendo legible al 100%.
   ========================================================================= */

/* ---------- 1. PRELOADER (Eliminado) ---------- */

/* ---------- 2. BARRA DE PROGRESO DE LECTURA ---------- */
#prog{position:fixed;top:0;left:0;height:2px;width:0;background:var(--teal,#7FA8AE);z-index:80;transition:width .1s linear}

/* ---------- 3. REVELADO CON MÁSCARA ---------- */
/* IMPORTANTE: el revelado NO usa opacity. Solo recorta con clip-path.
   Si algo falla, lo peor que pasa es que la foto aparezca sin animación,
   nunca que desaparezca. */
.fx [data-rv]{clip-path:inset(0 0 100% 0);transition:clip-path 1.05s cubic-bezier(.22,1,.36,1)}
.fx [data-rv].is-in{clip-path:inset(0 0 0 0)}
.fx [data-rv="right"]{clip-path:inset(0 100% 0 0)}
.fx [data-rv="right"].is-in{clip-path:inset(0 0 0 0)}
/* zoom lento tras el revelado */
.fx .zin{overflow:hidden}
.fx .zin img{transform:scale(1.08);transition:transform 1.6s cubic-bezier(.22,1,.36,1)}
.fx .zin.is-in img{transform:none}

/* ---------- 4. TITULARES PARTIDOS POR PALABRAS ---------- */
.fx .sp-w{display:inline-block;overflow:hidden;vertical-align:top}
.fx .sp-w > i{
  display:inline-block;font-style:inherit;transform:translateY(110%);
  transition:transform .95s cubic-bezier(.22,1,.36,1);
}
.fx .sp.is-in .sp-w > i{transform:none}

/* ---------- 5. MARQUESINA DE COLABORADORES ----------
   Tres copias del juego de logos y desplazamiento de un tercio exacto: así
   el bucle es continuo. Antes eran dos copias y, como cinco logos no llenan
   la pantalla, se veía el empalme (el primero aparecía repetido al final). */
/* OJO: fx.js SUSTITUYE el div .colabs por este .mq, así que el relleno de
   .colabs desaparece del DOM. La altura de la banda se define AQUÍ. */
.mq{overflow:hidden;position:relative;padding-block:clamp(64px,8vw,150px)}
.mq:before,.mq:after{content:"";position:absolute;top:0;bottom:0;width:9%;z-index:2;pointer-events:none}
.mq:before{left:0;background:linear-gradient(90deg,#35352F,rgba(53,53,47,0))}
.mq:after{right:0;background:linear-gradient(270deg,#35352F,rgba(53,53,47,0))}
.mq-t{display:flex;width:max-content;animation:mq 46s linear infinite}
.mq:hover .mq-t{animation-play-state:paused}
/* El padding-right TIENE que valer lo mismo que el gap: es el hueco entre el
   ultimo logotipo de una copia y el primero de la siguiente. Si se separan, el
   empalme del bucle canta cada vuelta. */
.mq-t > div{display:flex;align-items:center;gap:clamp(80px,10vw,170px);padding-right:clamp(80px,10vw,170px)}
/* Mismos topes que en la fila estática. Si se cambian aquí, hay que cambiarlos
   allí: son la misma banda vista con y sin movimiento.
   Sin caja fija ni object-fit desde que los PNG se recortaron a su contenido:
   cada logotipo mide lo suyo y se frena por el ancho o por el alto, el que
   alcance antes. Ver la nota larga en main.css, en .colabs img. */
.mq-t img{
  width:auto;height:auto;
  max-height:clamp(44px,6.5vw,95px);max-width:clamp(150px,20vw,300px);flex:none;
  filter:brightness(0) invert(1);opacity:.85;transition:opacity .3s;
}
.mq-t img:hover{opacity:1}
@keyframes mq{to{transform:translateX(-33.3333%)}}

/* ---------- 6. BOTONES: relleno que entra por la izquierda ---------- */
.bmore{position:relative;overflow:hidden;z-index:0}
.bmore:before{
  content:"";position:absolute;inset:0;background:var(--ink,#1D1D1B);z-index:-1;
  transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.bmore.light:before{background:#fff}
.bmore:hover:before{transform:scaleX(1)}
/* La banda entera es el enlace, asi que su boton se rellena con ella. */
.band:hover .go:before{transform:scaleX(1)}
.bmore i{transition:transform .45s cubic-bezier(.22,1,.36,1)}
.bmore:hover i{transform:rotate(90deg)}
.bsolid,.bghost{position:relative;overflow:hidden}
.bsolid:after{
  content:"";position:absolute;inset:0;background:rgba(255,255,255,.16);
  transform:translateX(-101%);transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.bsolid:hover:after{transform:translateX(0)}

/* ---------- 7. MENÚ: entrada escalonada de los enlaces ---------- */
.fx .ov-col{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.fx .ov.open .ov-col{opacity:1;transform:none}
.fx .ov.open .ov-col:nth-child(1){transition-delay:.10s}
.fx .ov.open .ov-col:nth-child(2){transition-delay:.16s}
.fx .ov.open .ov-col:nth-child(3){transition-delay:.22s}
.fx .ov.open .ov-col:nth-child(4){transition-delay:.28s}
.fx .ov-foot{opacity:0;transition:opacity .5s ease .34s}
.fx .ov.open .ov-foot{opacity:1}
.ov-col a{position:relative}
.ov-col a:before{
  content:"";position:absolute;left:0;bottom:4px;height:1px;width:0;background:currentColor;
  transition:width .4s cubic-bezier(.22,1,.36,1);
}
.ov-col a:hover:before{width:26px}

/* ---------- 8. MINIATURA DE SERVICIOS PEGADA ---------- */
@media(min-width:861px){
  .svc-thumbs{align-self:stretch}
  .svc-thumbs .stick{position:sticky;top:78px;height:clamp(300px,34vw,460px)}
}

/* ---------- 9. ZOOM AL PASAR EL RATÓN ----------
   OJO A LA ESPECIFICIDAD: la regla del zoom de entrada (.fx .zin.is-in img)
   pesa 0-3-1 y ganaba a los hover, que pesaban 0-2-2. Por eso el mosaico y
   los proyectos dejaron de moverse. Prefijando con .fx suben a 0-3-2. */
.pj .ims{overflow:hidden}
.pj .ims img{transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
.fx .pj.has-link:hover .ims img,.pj.has-link:hover .ims img{transform:scale(1.045)}
.fx .mos2 a[href]:hover img,.mos2 a[href]:hover img{transform:scale(1.06)}
.fx .mos2 a img{transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.fx .bigtype figure:hover img{transform:scale(1.04)}
.bigtype figure{overflow:hidden}
.bigtype figure img{transition:transform 1.2s cubic-bezier(.22,1,.36,1)}

/* ---------- 10. COMPARADOR ANTES / DESPUÉS ---------- */
.cmp{position:relative;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:pan-y;cursor:ew-resize}
/* el revelado con máscara NO se aplica aquí: descuadraba las dos fotos */
.fx .cmp,.fx .cmp img{clip-path:none !important;transform:none !important}
.cmp img{width:100%;height:clamp(280px,42vw,620px);object-fit:cover;display:block;pointer-events:none}
.cmp .after{position:absolute;inset:0;clip-path:inset(0 0 0 50%)}
.cmp .after .inner{position:absolute;inset:0}
.cmp .after img{width:100%;height:100%;object-fit:cover}
.cmp .handle{
  position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;z-index:3;
  transform:translateX(-1px);box-shadow:0 0 22px rgba(0,0,0,.4);
}
.cmp .handle b{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:48px;height:48px;border-radius:50%;background:#fff;color:var(--ink,#1D1D1B);
  display:grid;place-items:center;font-size:15px;font-weight:600;letter-spacing:-.04em;
  box-shadow:0 6px 26px rgba(0,0,0,.28);
}
.cmp .tag{
  position:absolute;top:18px;z-index:4;background:#fff;color:var(--ink,#1D1D1B);
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:6px 13px;
}
.cmp .tag.a{left:18px}
.cmp .tag.d{right:18px}
.cmp .foot{
  position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;flex-wrap:wrap;gap:6px 18px;
  padding:clamp(40px,4.5vw,58px) clamp(14px,2vw,24px) 14px;color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.8) 0%,rgba(0,0,0,.68) 65%,rgba(0,0,0,0) 100%);
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
}
.cmp .foot .sp{flex:1}
.cmp .hint{
  /* Arriba y no abajo: con el velo del pie mas alto, en movil el aviso caia
     dentro de el y chocaba con el tirador, que ocupa el centro. */
  position:absolute;left:50%;top:clamp(60px,7vw,84px);transform:translateX(-50%);z-index:4;color:#fff;
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.9;
  transition:opacity .4s;pointer-events:none;
  /* El velo lo pone una caja solida: la sombra de texto no cuenta para WCAG. */
  background:rgba(0,0,0,.68);padding:7px 13px;
}
.cmp.touched .hint{opacity:0}

/* ---------- 11. PARALLAX ---------- */
.fx [data-px]{will-change:transform}

/* ---------- 12. CONTADORES ---------- */
.figs b{font-variant-numeric:tabular-nums}

/* ---------- Accesibilidad: si el usuario pide menos movimiento ---------- */
@media(prefers-reduced-motion:reduce){
  #pre{display:none}
  .fx [data-rv],.fx [data-rv].is-in{clip-path:none;opacity:1;transition:none}
  .fx .sp-w > i{transform:none;transition:none}
  .fx .zin img{transform:none;transition:none}
  .mq-t{animation:none}
  .fx .ov-col,.fx .ov-foot{opacity:1;transform:none;transition:none}
  .bmore:before,.bmore i,.bsolid:after{transition:none}
}