/* ============================================================
   CAMPO ESTUDIO — estilos de los widgets con Swiper
   (mapea el look del carrusel/marquee originales sobre el markup
   de Swiper: .swiper / .swiper-wrapper / .swiper-slide)
   ============================================================ */

/* ---------- El Estudio: carrusel de tarjetas ---------- */
.campo-estudio-swiper{
  position:relative;min-width:0;overflow:hidden;
  height:var(--cs-h,clamp(460px,52vw,760px));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.campo-estudio-swiper .swiper-wrapper{align-items:center}
.campo-estudio-swiper .swiper-slide{
  width:var(--cs-w,min(42%,380px));height:auto;flex-shrink:0;
}
/* El escalado/opacidad "apagado" sólo se aplica una vez que Swiper terminó
   de inicializar (clase que la propia librería agrega al contenedor). Si
   el script de Swiper no llegó a cargar o falló por algún motivo, las
   tarjetas quedan en su tamaño y opacidad normales en vez de congeladas al
   40% de opacidad — que es justo lo que se veía como "overlay blanco". */
.campo-estudio-swiper.swiper-initialized .swiper-slide{
  transform:scale(.8);opacity:.4;
  transition:transform .9s cubic-bezier(.22,.61,.36,1),opacity .9s cubic-bezier(.22,.61,.36,1);
}
.campo-estudio-swiper.swiper-initialized .swiper-slide-active{
  transform:scale(var(--cs-active,1.22)) translateY(-6%);opacity:1;z-index:3;
}
.campo-estudio-swiper .card3{width:100%}
.campo-estudio-swiper .card3 figure{position:relative;overflow:hidden;aspect-ratio:var(--cs-ratio,3/4);background:var(--paper-2,#EFEBE1);margin:0}
.campo-estudio-swiper .card3 img{width:100%;height:100%;object-fit:cover}
/* Tamaño intermedio para las 2 tarjetas vecinas a la activa (`.is-far2-l/-r`
   las marca swiper-widgets.js, en las 2 posiciones siguientes — Swiper no
   las etiqueta por sí solo). El `translateX` no es decorativo: como el
   escalado no mueve la caja dentro del `swiper-wrapper`, sin esa
   compensación las vecinas quedan pegadas a la activa y el hueco grande cae
   entre la vecina y la lejana — ver nota de mismo cálculo en el sitio HTML. */
@media(min-width:900px){
  .campo-estudio-swiper.swiper-initialized .swiper-slide-prev{
    transform:translateX(-5%) scale(.88) translateY(-3%);opacity:.7;z-index:2;
  }
  .campo-estudio-swiper.swiper-initialized .swiper-slide-next{
    transform:translateX(5%) scale(.88) translateY(-3%);opacity:.7;z-index:2;
  }
  .campo-estudio-swiper.swiper-initialized .is-far2-l{transform:translateX(11%) scale(.8)}
  .campo-estudio-swiper.swiper-initialized .is-far2-r{transform:translateX(-11%) scale(.8)}
}
@media(max-width:900px){
  .campo-estudio-swiper{--cs-w:66%}
  .campo-estudio-swiper .swiper-slide{width:var(--cs-w)}
  .campo-estudio-swiper .swiper-slide-active{transform:scale(var(--cs-active,1.08)) translateY(-3%)}
}
/* ---------- Lightbox de imagen (carrusel) ----------
   Lo crea swiper-widgets.js al primer clic y lo cuelga de <body>. Mismo look
   que el lightbox de proyectos (.lb): fondo oscuro + "Cerrar ✕". */
.campo-estudio-swiper .card3 img{cursor:zoom-in}
.campo-estudio-lb{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(3.5rem,8vw,5rem) clamp(1rem,4vw,3rem);
  background:rgba(20,17,13,.92);
  opacity:0;visibility:hidden;
  transition:opacity .5s var(--ease,cubic-bezier(.22,.61,.36,1)),visibility .5s var(--ease,cubic-bezier(.22,.61,.36,1));
}
.campo-estudio-lb.is-open{opacity:1;visibility:visible}
.campo-estudio-lb__img{
  display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  cursor:default;
}
/* Mismo blindaje contra `button:hover{background:#c36}` que .lb__close. */
.campo-estudio-lb__close,
.campo-estudio-lb__close:hover,
.campo-estudio-lb__close:focus{
  position:absolute;top:clamp(1rem,2.2vw,1.7rem);right:clamp(1rem,4vw,3rem);
  padding:.5rem 0;cursor:pointer;
  font-family:var(--font-head);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
  background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;
  color:var(--paper,#F7F5EF)!important;text-decoration:none!important;
}
@media (prefers-reduced-motion:reduce){.campo-estudio-lb{transition:none}}

/* Flechas manuales: SVG (no texto) para que queden centradas en el círculo
   sin depender de las métricas de la fuente. */
/* Por defecto, arriba a la derecha. `.campo-estudio-nav--bottom` (control
   "Posición de las flechas") las manda abajo y al medio, sólo con CSS. */
/* Separación entre las flechas y las imágenes: la regula el control
   "Separación de las flechas" (variable --arrows-offset, en px, admite
   negativos porque el carrusel tiene aire vacío por su altura fija). */
.campo-estudio-nav{display:flex;flex-direction:column}
.campo-estudio-arrows{
  position:relative;z-index:5;
  display:flex;justify-content:flex-end;gap:.8rem;
  margin-bottom:calc(clamp(1rem,2.5vw,2rem) + var(--arrows-offset,0px));
}
.campo-estudio-nav--bottom .campo-estudio-arrows{
  order:2;justify-content:center;margin-bottom:0;
  margin-top:calc(clamp(1rem,2.5vw,2rem) + var(--arrows-offset,0px));
}
/* `!important` + estados hover/focus: el tema/Elementor traen
   `button:hover,[type=button]:focus{background:#c36;color:#fff}`, que pintaba
   la flecha de rosa al pasar el mouse (mismo blindaje que .cform__btn). */
.campo-estudio-arrow,
.campo-estudio-arrow:hover,
.campo-estudio-arrow:focus,
.campo-estudio-arrow:active{
  display:inline-flex;align-items:center;justify-content:center;
  width:3.2rem;height:3.2rem;padding:0;margin:0;cursor:pointer;
  background:transparent!important;border:1px solid var(--green,#687A54)!important;border-radius:50%!important;box-shadow:none!important;
  text-decoration:none!important;
  color:var(--green,#687A54)!important;
  transition:color .5s var(--ease,cubic-bezier(.22,.61,.36,1)),background-color .5s var(--ease,cubic-bezier(.22,.61,.36,1)),border-color .5s var(--ease,cubic-bezier(.22,.61,.36,1));
}
.campo-estudio-arrow svg{display:block}
.campo-estudio-arrow span{
  display:flex;line-height:0;
  transition:transform .5s var(--ease,cubic-bezier(.22,.61,.36,1));
}
/* Hover: todo el círculo se pinta de verde y la flecha pasa a blanco (pisa el #c36 del tema). */
.campo-estudio-arrow:hover,.campo-estudio-arrow:focus-visible{
  background:var(--green,#687A54)!important;border-color:var(--green,#687A54)!important;
  color:#fff!important;
}
.campo-estudio-arrow--next:hover span,.campo-estudio-arrow--next:focus-visible span{transform:translateX(4px)}
.campo-estudio-arrow--prev:hover span,.campo-estudio-arrow--prev:focus-visible span{transform:translateX(-4px)}
.campo-estudio-arrow.swiper-button-disabled{opacity:.35;cursor:default;pointer-events:none}

/* ---------- Marquee de clientes ---------- */
.campo-marquee-swiper{overflow:hidden;width:100%}
.campo-marquee-swiper .swiper-wrapper{transition-timing-function:linear!important}
.campo-marquee-swiper .swiper-slide{
  width:auto!important;display:flex;align-items:center;
  margin-right:clamp(2.6rem,5vw,5rem);
}
.campo-marquee-swiper img{
  height:clamp(17px,1.9vw,25px);width:auto;display:block;
  filter:brightness(0) invert(.62);opacity:.8;
  transition:filter .4s,opacity .4s;
}
.campo-marquee-swiper img:hover{filter:brightness(0) invert(.4);opacity:1}

/* Fila "hacia la derecha": se espeja el contenedor completo (invierte el
   sentido del scroll continuo) y se espeja cada logo hacia adentro para que
   se vea derecho — más confiable que `autoplay.reverseDirection` de Swiper,
   que combinado con freeMode + loop hacía correr esta fila mucho más rápido
   de lo configurado. */
.campo-marquee-swiper--reverse{transform:scaleX(-1)}
.campo-marquee-swiper--reverse .swiper-slide img{transform:scaleX(-1)}

@media (prefers-reduced-motion:reduce){
  .campo-estudio-swiper .swiper-slide{transition:none}
}

/* Mobile / táctil: el :hover queda "pegado" tras tocar, y el desplazamiento
   de 4px dejaba la flecha corrida (como desentrada). Sin movimiento. */
@media(max-width:900px),(hover:none){
  .campo-estudio-arrow--next:hover span,.campo-estudio-arrow--next:focus-visible span,
  .campo-estudio-arrow--prev:hover span,.campo-estudio-arrow--prev:focus-visible span,
  .campo-estudio-arrow:active span{transform:none!important}
}