/* ===============================
   DLO Animations - STYLE v1.1
   =============================== */

/* --------------------------------
   BASE GLOBAL PARA TODOS LOS MÓDULOS
----------------------------------- */

[class*="dlo-"] {
    position: relative;
    will-change: transform, opacity, clip-path;
}

/* --------------------------------
   LIQUID MASK
----------------------------------- */

.dlo-liquid-mask {
    position: relative;
    overflow: hidden;
    will-change: clip-path, opacity;
    clip-path: circle(0% at 50% 50%);
}

/* --------------------------------
   GROW SOFT
----------------------------------- */

.dlo-grow-soft {
    position: relative;
    overflow: hidden;
    transform-origin: center center;
    will-change: transform, opacity;
}

/* --------------------------------
   PARALLAX
----------------------------------- */

.dlo-parallax {
    position: relative;
    overflow: hidden;
    will-change: transform;
}

/* --------------------------------
   FADE LIFT
----------------------------------- */

.dlo-fade-lift {
    position: relative;
    overflow: hidden;
    will-change: transform, opacity;
}

/* --------------------------------
   LIGHT SWEEP
----------------------------------- */

.dlo-light-sweep {
    position: relative;
    overflow: hidden;
    will-change: opacity, transform;
}

/* --------------------------------
   CINEMATIC REVEAL
----------------------------------- */

.dlo-cinematic-reveal {
    position: relative;
    overflow: hidden;
    will-change: transform, opacity, clip-path;
}

/* ============================================
   🧩 MODO EDITOR — DESACTIVA EFECTOS
============================================ */

.elementor-editor-active [class*="dlo-"] {
    all: unset !important;
    display: block !important;
    position: relative !important;
    overflow: visible !important;
}

/* ============================================================
   DLO DIAGONAL AGENCY — DESKTOP (POLISHED)
============================================================ */

/* SECCIÓN BASE */
.dlo-diagonal-agency {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

/* PRO HOOK (no hereda por accidente) */
.dlo-diagonal-agency--pro {
    /* extensión PRO: parallax, depth, chaos controlado */
}

/* STAGE */
.dlo-diagonal-stage {
    position: absolute !important;
    inset: 0;
    display: block !important;
    transform: rotate(20deg);
    transform-origin: center;
    pointer-events: none;
}

/* CAPA BASE */
.dlo-diagonal-layer {
    position: absolute !important;
    top: -55%;
    left: 50%;
    width: 520px;
    max-width: 60vw;
    transform-origin: center;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 40px 90px rgba(0,0,0,0.35);
    pointer-events: auto;

    /* 👇 CLAVE PARA PARALLAX LIMPIO */
    will-change: transform;
}

/* ---------- DESKTOP COMPOSITION + MICRO ROTATION ---------- */

/* Frontal */
.dlo-diagonal-layer.dlo-speed-1 {
    z-index: 1;
    transform:
        translate(-99%, -10%)
        translateX(0)
        scale(1)
        rotate(-2deg);
}

/* Media */
.dlo-diagonal-layer.dlo-speed-2 {
    z-index: 2;
    transform:
        translate(-50%, -40%)
        translateX(240px)
        scale(0.94)
        rotate(1.5deg);
}

/* Fondo */
.dlo-diagonal-layer.dlo-speed-3 {
    z-index: 3;
    transform:
        translate(40%, -120%)
        translateX(-240px)
        scale(0.88)
        rotate(-1deg);
}

/* IMÁGENES */
.dlo-diagonal-layer img {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================================
   RESPONSIVE — AGENCY TUNED
============================================================ */

/* ---------- TABLET ---------- */
@media (max-width: 1024px) {

    .dlo-diagonal-agency {
        height: 90vh;
    }

    .dlo-diagonal-stage {
        transform: rotate(12deg);
    }

    .dlo-diagonal-layer {
        width: 420px;
        top: -40%;
    }

    .dlo-diagonal-layer.dlo-speed-1 {
        transform:
            translate(-90%, -10%)
            scale(1)
            rotate(-1.5deg);
    }

    .dlo-diagonal-layer.dlo-speed-2 {
        transform:
            translate(-40%, -35%)
            translateX(180px)
            scale(0.92)
            rotate(1deg);
    }

    .dlo-diagonal-layer.dlo-speed-3 {
        transform:
            translate(20%, -90%)
            translateX(-180px)
            scale(0.86)
            rotate(-0.8deg);
    }
}

/* ---------- MOBILE ---------- */
@media (max-width: 767px) {

    .dlo-diagonal-agency {
        height: 75vh;
    }

    .dlo-diagonal-stage {
        transform: rotate(6deg);
    }

    .dlo-diagonal-layer {
        width: 280px;
        top: -25%;
        border-radius: 12px;
    }

    .dlo-diagonal-layer.dlo-speed-1 {
        transform:
            translate(-70%, 0%)
            scale(1)
            rotate(-0.5deg);
        z-index: 2;
    }

    .dlo-diagonal-layer.dlo-speed-2 {
        transform:
            translate(-10%, -30%)
            scale(0.9)
            rotate(0.5deg);
        z-index: 1;
    }

    /* tercera capa muy sutil */
    .dlo-diagonal-layer.dlo-speed-3 {
        transform:
            translate(40%, -60%)
            scale(0.82);
        opacity: 0.85;
        z-index: 0;
    }
}

/* ===========================
   MGA Sticky Module
   =========================== */

.mga-sticky {
  font-family: "Georgia", serif;
}

.mga-sticky .color-wrapper {
  min-height: 100vh;
  transition: background 1.4s ease, color 1.4s ease;
  background: linear-gradient(135deg, #ffffff, #f5f5f5);
  color: #111;
}

.mga-sticky .sticky-section {
  position: relative;
  height: 500vh;
}

.mga-sticky .sticky-inner {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mga-sticky .parallax {
  position: absolute;
  top: -10vh;
  left: 0;
  width: 100%;
  height: 120vh;
  object-fit: cover;
  z-index: -2;
  transition: filter 1.2s ease;
  transform: translateY(0) scale(1.1);
}

.mga-sticky .step {
  position: absolute;
  opacity: 0;
  transform: translateY(40px);
  filter: blur(12px);
  transition:
    opacity 0.9s cubic-bezier(.25,.46,.1,.99),
    transform 0.9s cubic-bezier(.25,.46,.1,.99),
    filter 0.9s cubic-bezier(.25,.46,.1,.99);
  max-width: 720px;
  text-align: left;
  z-index: 2;
}

.mga-sticky .step.active {
  opacity: 1;
  transform: translateY(0px);
  filter: blur(0px);
}

.mga-sticky .step-line {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(10px);
  transition:
    opacity 0.8s cubic-bezier(.25,.46,.1,.99),
    transform 0.8s cubic-bezier(.25,.46,.1,.99),
    filter 0.8s cubic-bezier(.25,.46,.1,.99);
}

.mga-sticky .step.active .step-line {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.mga-sticky .step-line:nth-child(1) { transition-delay: 0s; }
.mga-sticky .step-line:nth-child(2) { transition-delay: 0.12s; }
.mga-sticky .step-line:nth-child(3) { transition-delay: 0.24s; }
.mga-sticky .step-line:nth-child(4) { transition-delay: 0.36s; }

.mga-sticky .step[data-step="1"] {
  --bg: linear-gradient(135deg, #ffffff, #f5f5f5);
  --fg: #111;
  --tint: grayscale(0%) brightness(1);
}

.mga-sticky .step[data-step="2"] {
  --bg: linear-gradient(135deg, #F1C40F33, #F1C40F);
  --fg: #000;
  --tint: sepia(60%) hue-rotate(10deg) saturate(200%);
}

.mga-sticky .step[data-step="3"] {
  --bg: linear-gradient(135deg, #D5583A33, #D5583A);
  --fg: #fff;
  --tint: sepia(80%) hue-rotate(-20deg) saturate(250%);
}

.mga-sticky .step[data-step="4"] {
  --bg: linear-gradient(135deg, #4477E733, #4477E7);
  --fg: #fff;
  --tint: hue-rotate(180deg) saturate(200%);
}

.mga-sticky h1 {
  font-size: 3.6rem;
  margin-bottom: 18px;
  line-height: 1.1;
}

.mga-sticky p {
  font-size: 1.3rem;
  line-height: 1.6;
  max-width: 640px;
}

/* =========================================================
   MGA STICKY V2 — SCROLL-TIMELINE
   ========================================================= */

.mga-sticky-v2 {
  height: 300vh;
  position: relative;
}

.mga-sticky-v2__wrapper {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
}

/* Scroll Timeline */
@scroll-timeline mgaScrollTimeline {
  source: auto;
  orientation: block;
  scroll-offsets: 0%, 100%;
}

/* Imagen parallax suave */
.mga-sticky-v2__image img {
  width: 100%;
  height: 120vh;
  object-fit: cover;
  transform: scale(1.2);
  animation: parallaxMove 1 linear both;
  animation-timeline: mgaScrollTimeline;
}

@keyframes parallaxMove {
  0%   { transform: translateY(0) scale(1.2); }
  100% { transform: translateY(-120px) scale(1.2); }
}

/* Título que entra desde la izquierda */
.mga-sticky-v2__title {
  font-size: 4rem;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateX(-80px);
  animation: titleIn 1 linear both;
  animation-timeline: mgaScrollTimeline;
}

@keyframes titleIn {
  0%   { opacity: 0; transform: translateX(-80px); }
  30%  { opacity: 1; transform: translateX(0); }
  100% { opacity: 1; transform: translateX(0); }
}

/* Texto que aparece progresivamente */
.mga-sticky-v2__text {
  font-size: 1.4rem;
  max-width: 600px;
  opacity: 0;
  transform: translateY(40px);
  animation: textIn 1 linear both;
  animation-timeline: mgaScrollTimeline;
}

@keyframes textIn {
  0%   { opacity: 0; transform: translateY(40px); }
  40%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   MGA STICKY V2.1 — CINEMATIC EDITION
   ========================================================= */

.mga-sticky-v21 {
  height: 300vh;
  position: relative;
}

.mga-sticky-v21__wrapper {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
}

/* Imagen con parallax + zoom */
.mga-sticky-v21__image img {
  width: 100%;
  height: 120vh;
  object-fit: cover;
  transform: scale(1.2) translateY(0);
  transition: transform 0.2s linear;
}

/* Título */
.mga-sticky-v21__title {
  font-size: 4rem;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateX(-80px);
  transition: all 0.6s ease-out;
}

/* Texto */
.mga-sticky-v21__text {
  font-size: 1.4rem;
  max-width: 600px;
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.6s ease-out;
}

/* Estado activo (JS lo añade) */
.mga-sticky-v21.active .mga-sticky-v21__title {
  opacity: 1;
  transform: translateX(0);
}

.mga-sticky-v21.active .mga-sticky-v21__text {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   MGA STICKY V2.2 — CINEMATIC MULTIESCENA (CROSSFADE REAL)
   ========================================================= */

.mga-sticky-v22 {
  height: 400vh;
  position: relative;
  transition: background 0.8s ease;
}

.mga-sticky-v22__wrapper {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
}

/* CONTENEDOR DE IMÁGENES (2 capas superpuestas) */
.mga-sticky-v22__image {
  position: relative;
  width: 100%;
  height: 120vh;
  overflow: hidden;
}

/* Ambas imágenes ocupan el mismo espacio */
.mga-sticky-v22__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 120vh;
  object-fit: cover;
  transform: scale(1.2) translateY(0);
  transition: opacity 2.4s ease, transform 0.2s linear;
}

/* Capa base (imagen actual) */
#mga-v22-image-base {
  opacity: 1;
}

/* Capa fade (imagen entrante) */
#mga-v22-image-fade {
  opacity: 0;
}

/* Título */
#mga-v22-title {
  font-size: 4rem;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateX(-80px);
  transition: all 0.6s ease-out;
}

/* Texto */
#mga-v22-text {
  font-size: 1.4rem;
  max-width: 600px;
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.6s ease-out;
}

/* Estado activo */
.mga-sticky-v22.active #mga-v22-title {
  opacity: 1;
  transform: translateX(0);
}

.mga-sticky-v22.active #mga-v22-text {
  opacity: 1;
  transform: translateY(0);
}

/* Fade entre escenas (solo afecta a la capa fade) */
.mga-sticky-v22.fade #mga-v22-image-fade {
  opacity: 1;
}