/* Próspero Studio · página principal
   Colores, proporciones y radio tomados de los SVG de Línea gráfica/Assets. */

/* Con JavaScript la cabecera nace oculta y home.js la va mostrando; sin esto podía verse
   un instante antes de que el código corriera. */
.js { --cabecera: 0; }

/* La cabecera no recibe clics hasta que los cuadros terminan de acomodarse */
.js:not(.asentado) .cabecera { pointer-events: none; }

/* ---------- Cuadros ---------- */

.cuadro {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 8px;
  color: #fff;
  font-size: var(--texto-cuadro);
  line-height: 1;
  transition: scale .5s var(--curva), box-shadow .5s var(--curva);
}
.cuadro--pre { background: var(--amarillo); }
.cuadro--mnfstos { background: var(--rojo); }
.cuadro--pro { background: var(--azul); }
.cuadro--post { background: var(--verde); }
.cuadro--crear { background: var(--rosa); }

.cuadro__texto {
  grid-area: 1 / 1;
  white-space: nowrap;
  /* Estado oculto de la aparición del texto: sube y se descubre de abajo hacia arriba */
  opacity: 0;
  transform: translateY(55%);
  clip-path: inset(-25% -6% 100% -6%);
  transition: opacity .25s ease, transform .3s ease, clip-path .3s ease;
}
/* Aparición del texto. Una sola animación: en escritorio la dispara el hover,
   en pantallas sin hover corre sola cuando los cuadros terminan de acomodarse. */
.cuadro:focus-visible .cuadro__texto {
  opacity: 1;
  transform: none;
  clip-path: inset(-25% -6% -25% -6%);
  transition: opacity .35s ease, transform .6s var(--curva), clip-path .6s var(--curva);
}
.cuadro__logo {
  grid-area: 1 / 1;
  width: 75%;
  height: auto;
  opacity: var(--logo-intro);
  pointer-events: none;
}

.cuadro:active { scale: .97; }

@media (hover: hover) {
  .cuadro:hover { scale: 1.06; box-shadow: 0 18px 40px -22px rgba(5, 19, 54, .45); }
  .cuadro:hover .cuadro__texto {
    opacity: 1;
    transform: none;
    clip-path: inset(-25% -6% -25% -6%);
    transition: opacity .35s ease, transform .6s var(--curva), clip-path .6s var(--curva);
  }
}

/* Sin hover (táctil) o en acomodo móvil: el texto queda visible siempre.
   Entra en cascada, de arriba hacia abajo, al terminar el acomodo. */
@media (hover: none), (max-width: 767px) {
  .cuadro .cuadro__texto {
    opacity: 1;
    transform: none;
    clip-path: inset(-25% -6% -25% -6%);
    transition: opacity .35s ease, transform .6s var(--curva), clip-path .6s var(--curva);
    transition-delay: calc(120ms + var(--turno, 0) * 90ms);
  }
  .js:not(.asentado) .cuadro .cuadro__texto {
    opacity: 0;
    transform: translateY(55%);
    clip-path: inset(-25% -6% 100% -6%);
    transition: none;
  }
  .cuadro--crear { --turno: 0; }
  .cuadro--pro { --turno: 1; }
  .cuadro--post { --turno: 2; }
  .cuadro--pre { --turno: 3; }
  .cuadro--mnfstos { --turno: 4; }
}
@media (hover: none) and (min-width: 768px) {
  .cuadro--pre { --turno: 0; }
  .cuadro--mnfstos { --turno: 1; }
  .cuadro--pro { --turno: 2; }
  .cuadro--post { --turno: 3; }
  .cuadro--crear { --turno: 4; }
}

/* Sin JavaScript: acomodo final con flexbox (imagen 2 en escritorio, imagen 3 en móvil) */
.escena {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6.5vw;
}
.cuadro--pre { width: 8.67vw; aspect-ratio: 166.27 / 133.02; }
.cuadro--mnfstos { width: 6.93vw; aspect-ratio: 133.02 / 199.52; }
.cuadro--pro { width: 10.85vw; aspect-ratio: 208.21 / 117.12; }
.cuadro--post { width: 6.4vw; aspect-ratio: 122.78 / 218.28; }
.cuadro--crear { width: 6.4vw; aspect-ratio: 1; }

/* Con JavaScript: home.js coloca cada cuadro y lo lleva del montón al acomodo */
.js .escena {
  position: fixed;
  inset: 0;
  display: block;
  min-height: 0;
  overflow: hidden;
}
.js .cuadro {
  position: absolute;
  left: 50%;
  top: 50%;
  aspect-ratio: auto;
  will-change: transform, width, height;
}
.js .cuadro--pre { z-index: 1; }
.js .cuadro--post { z-index: 2; }
.js .cuadro--mnfstos { z-index: 3; }
.js .cuadro--pro { z-index: 4; }
.js .cuadro--crear { z-index: 5; }
.js:not(.asentado) .cuadro { pointer-events: none; }
.js.asentado .cuadro { will-change: auto; }
.js.asentado .cuadro:hover,
.js.asentado .cuadro:focus-visible { z-index: 6; }

.js .recorrido { height: 100vh; height: 100svh; }
.js.intro-scroll .recorrido { height: 260vh; height: 260svh; }

@media (max-width: 767px) {
  .escena { flex-direction: column; gap: 7svh; padding: 80px 0 40px; }
  .cuadro--crear { order: 1; width: 16vw; }
  .cuadro--pro { order: 2; width: 27vw; }
  .cuadro--post { order: 3; width: 16vw; }
  .cuadro--pre { order: 4; width: 21.5vw; }
  .cuadro--mnfstos { order: 5; width: 17.2vw; }
  .js .escena { padding: 0; }
}

/* ---------- Regreso desde una sección ----------
   El cuadro de la sección ya está en su lugar (ahí termina el fondo al rebobinar);
   los demás entran alrededor, del más cercano al más lejano. */
@keyframes cuadro-vuelve { from { opacity: 0; scale: .5; } }
@keyframes cabecera-vuelve { from { opacity: 0; } }
.regreso .cuadro:not(.cuadro--origen) {
  animation: cuadro-vuelve .85s var(--curva) backwards;
  animation-delay: calc(90ms + var(--vuelta, 0) * 80ms);
}
.regreso .cabecera { animation: cabecera-vuelve .7s ease .3s backwards; }
@media (prefers-reduced-motion: reduce) {
  .regreso .cuadro, .regreso .cabecera { animation: none; }
}

/* ---------- Salida hacia una sección ----------
   Los demás cuadros y la cabecera se apartan mientras el cuadro pulsado crece (home.js). */
.saliendo .cuadro:not(.cuadro--elegido) {
  opacity: 0;
  scale: .8;
  transition: opacity .26s ease, scale .45s cubic-bezier(.4, 0, .2, 1);
}
.saliendo .cuadro--elegido .cuadro__texto { opacity: 0; transition: opacity .15s ease; }
.saliendo .cabecera { opacity: 0; transition: opacity .26s ease; }
.saliendo .cuadro, .saliendo .cabecera { pointer-events: none; }

/* Al volver de una sección la página abre sobre el color de esa sección */
.vuelve body { background: transparent; }