/* ——— Módulo y SVG ——— */
.module.office-hero {
  position: relative;
  width: 100%;
  overflow: visible;
}
.office-figure {
  width: 100%;
  height: auto;
  display: block;
}

/* ——— Wrapper: fade a NEGRO (sólido al final) ——— */
.wrapper {
  background-color: transparent;
  transition: background-color 600ms ease;
}
.wrapper.is-black {
  background-color: #000;
}

/* ——— Overlay ABSOLUTO alineado al SVG (DESKTOP) ——— */
.office-hero {
  --roof-px: 0px;
  --box-px: 0px;
}

.red-overlay {
  position: absolute;
  left: 0;
  top: var(--roof-px);
  right: 0;
  height: var(--box-px);
  z-index: 5;
  opacity: 0;
  pointer-events: auto;
  transition: opacity 0.45s ease;
  overflow: visible;
}

.wrapper.is-black .red-overlay {
  opacity: 1;
}

.red-overlay__inner {
  position: absolute;
  inset: 0;
  overflow: visible;
}

.red-overlay__inner > .module {
  margin: 0 !important;
  width: 100%;
  height: auto;
}

/* =========================================================
   ✅ MOBILE
   - Sin overlay
   - Sin SVG (para que no ocupe alto “vacío”)
   - Intro gradiente rojo→negro con animación
   - Los módulos siguientes se ocultan solo durante la intro
   ========================================================= */
@media (max-width:  1023px) {
  /* Hero en mobile: que NO empuje el contenido con un bloque gigante,
     pero sí tenga altura suficiente para ver la animación */
  .module.office-hero {
    background: #000;
    min-height: 0;
    height: 220px; /* 👈 ajustá (180–260 suele andar bien) */
    padding-bottom: 0;
    overflow: hidden; /* para que el gradiente no “chorree” */
  }

  /* No usamos overlay absoluto en mobile */
  .red-overlay {
    display: none !important;
  }

  /* ✅ Ocultamos TODO el SVG en mobile (esto elimina el espacio negro “vacío”) */
  .office-figure {
    display: none !important;
  }

  .module.office-hero {
    display: none !important;
  }

  /* Intro gradiente encima del hero */
  .module.office-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    opacity: 0;
    transform-origin: top;
    transform: scaleY(0);
    background: linear-gradient(180deg, #ff0000 0%, #7a0000 40%, #000000 90%);
  }

  @keyframes officeMobileGradientIntro {
    0% {
      opacity: 1;
      transform: scaleY(0);
    }
    60% {
      opacity: 1;
      transform: scaleY(1);
    }
    100% {
      opacity: 0;
      transform: scaleY(1);
    }
  }

  .module.office-hero.mobile-intro-running::before {
    opacity: 1;
    animation: officeMobileGradientIntro 1200ms ease forwards;
  }

  /* Ocultar módulos siguientes SOLO durante la intro */
  body[data-current-slug="home"].mobile-intro-running
    .modules-shell
    > .module.office-hero
    ~ .module {
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
  }

  /* Mostrar cuando termina */
  body[data-current-slug="home"].mobile-intro-done
    .modules-shell
    > .module.office-hero
    ~ .module {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition:
      opacity 420ms ease,
      transform 420ms ease;
  }
}