.intro-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #131315;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

.intro-loader.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.intro-loader * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ==========================================
   CONTENEDOR PRINCIPAL DE LA ANIMACIÓN
========================================== */

.intro {
  position: relative;
  width: min(1200px, 92vw);
  height: min(540px, 70vh);

  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================
   ISOTIPO / CUBOS - ESCRITORIO BASE
========================================== */

.brand-mark {
  position: absolute;
  left: 6%;
  width: clamp(220px, 25vw, 340px);
  aspect-ratio: 1 / 1;
}

.cube {
  position: absolute;
  width: 42%;
  left: 0;
  top: 0;
  transform-origin: 50% 50%;
  opacity: 1;
  filter: drop-shadow(0 10px 12px rgba(237, 28, 36, 0.10));
  will-change: transform, opacity;
}

.cube img {
  width: 100%;
  display: block;
}

.cube.left {
  animation: cubeLeft 3s cubic-bezier(.18, .9, .22, 1) forwards;
}

.cube.top {
  animation: cubeTop 3s cubic-bezier(.18, .9, .22, 1) forwards;
}

.cube.bottom {
  animation: cubeBottom 3s cubic-bezier(.18, .9, .22, 1) forwards;
}

/* ==========================================
   TEXTO - ESCRITORIO BASE
========================================== */

.brand-text {
  position: absolute;
  left: 25%;
  top: 20%;
  width: clamp(420px, 55vw, 880px);
  opacity: 0;

  animation: revealTextDesktop 2s cubic-bezier(.18, .9, .22, 1) forwards;
  animation-delay: 2.15s;

  will-change: transform, opacity, clip-path;
}

.brand-text img {
  width: 100%;
  display: block;
}

/* ==========================================
   ANIMACIONES ESCRITORIO
========================================== */

@keyframes cubeLeft {
  0% {
    transform: translate(38%, 25%) scale(1) rotate(0deg);
  }

  100% {
    transform: translate(0%, 26%) scale(.92) rotate(0deg);
  }
}

@keyframes cubeTop {
  0% {
    transform: translate(38%, 25%) scale(1) rotate(0deg);
  }

  100% {
    transform: translate(80%, 10%) scale(.92) rotate(-60deg);
  }
}

@keyframes cubeBottom {
  0% {
    transform: translate(38%, 25%) scale(1) rotate(0deg);
  }

  100% {
    transform: translate(60%, 75%) scale(.92) rotate(-50deg);
  }
}

@keyframes revealTextDesktop {
  0% {
    opacity: 0;
    transform: translateY(130px);
    clip-path: inset(100% 0 0 0);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    clip-path: inset(0 0 0 0);
  }
}

/* =========================================================
   INTRO / LOADER - ESCRITORIO GRANDE
   1600px en adelante
========================================================= */

@media (min-width: 1600px) {

  .intro {
    width: min(94vw, 1700px);
    height: min(620px, 72vh);
  }

  .brand-mark {
    left: 5%;
    width: clamp(360px, 23vw, 460px);
  }

  .brand-text {
    left: 26%;
    top: 18%;
    width: clamp(900px, 56vw, 1180px);
  }
}

/* =========================================================
   INTRO / LOADER - ESCRITORIO EXTRA GRANDE
   2100px en adelante / 2560x1440
========================================================= */

@media (min-width: 2100px) {

  .intro {
    width: min(94vw, 2200px);
    height: min(760px, 74vh);
  }

  .brand-mark {
    left: 4.5%;
    width: clamp(500px, 22vw, 620px);
  }

  .brand-text {
    left: 26%;
    top: 17%;
    width: clamp(1200px, 56vw, 1550px);
  }
}

/* ==========================================================================
   RESPONSIVO PARA MÓVILES - CENTRADO PERFECTO
========================================================================== */

@media (max-width: 820px) {

  .intro {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;

    height: 100vh;
    width: 100%;
    padding: 20px;
  }

  .brand-mark {
    position: relative;
    left: auto;
    top: auto;

    width: min(200px, 45vw);
    aspect-ratio: 1 / 1;
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cube {
    position: absolute;
    width: 42%;
    left: 0;
    top: 0;
  }

  .cube.left {
    animation: cubeLeftMobile 3s cubic-bezier(.18, .9, .22, 1) forwards;
  }

  .cube.top {
    animation: cubeTopMobile 3s cubic-bezier(.18, .9, .22, 1) forwards;
  }

  .cube.bottom {
    animation: cubeBottomMobile 3s cubic-bezier(.18, .9, .22, 1) forwards;
  }

  .brand-text {
    position: relative;
    left: auto;
    top: auto;

    width: min(320px, 75vw);
    margin: 0 auto;
    opacity: 0;
    text-align: center;

    animation: revealTextMobile 2s cubic-bezier(.18, .9, .22, 1) forwards;
    animation-delay: 2.15s;
  }

  .brand-text img {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: auto;
  }

  @keyframes cubeLeftMobile {
    0% {
      opacity: 1;
      transform: translate(38%, 25%) scale(1) rotate(0deg);
    }

    100% {
      opacity: 1;
      transform: translate(5%, 20%) scale(0.85) rotate(0deg);
    }
  }

  @keyframes cubeTopMobile {
    0% {
      opacity: 1;
      transform: translate(38%, 25%) scale(1) rotate(0deg);
    }

    100% {
      opacity: 1;
      transform: translate(78%, 5%) scale(0.85) rotate(-60deg);
    }
  }

  @keyframes cubeBottomMobile {
    0% {
      opacity: 1;
      transform: translate(38%, 25%) scale(1) rotate(0deg);
    }

    100% {
      opacity: 1;
      transform: translate(65%, 65%) scale(0.85) rotate(-50deg);
    }
  }

  @keyframes revealTextMobile {
    0% {
      opacity: 0;
      transform: translateY(40px);
      clip-path: inset(100% 0 0 0);
    }

    100% {
      opacity: 1;
      transform: translateY(0);
      clip-path: inset(0 0 0 0);
    }
  }
}

/* ==========================================================================
   MÓVILES MUY PEQUEÑOS
========================================================================== */

@media (max-width: 480px) {

  .brand-mark {
    width: min(150px, 40vw);
  }

  .brand-text {
    width: min(260px, 80vw);
  }

  .intro {
    gap: 15px;
  }
}