/* Carta — la herramienta. Vive sobre el cielo, no a pantalla completa. */

.taller {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--e-7);
}

.carta {
  position: relative;
  width: min(var(--m-carta-ancho), 100%);
  height: min(var(--m-carta-alto), calc(100dvh - var(--e-11)));
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--m-panel-ancho);
  border-radius: var(--r-xl);
  overflow: hidden;
  /* La carta no tiene fondo propio: lo pone cada mitad. Así la zona de la
     imagen puede ser translúcida y dejar ver el cielo de verdad. */
  background: none;
  color: var(--texto-principal);
  box-shadow: var(--sombra-carta), 0 0 0 1px var(--borde-carta);
}

/* ── Escenario: la imagen, entera, nunca recortada a sangre ──────────── */

.escenario {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--e-11);
  background: var(--superficie-escenario);
  overflow: hidden;
}

.escenario__lienzo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* ── La pila: antes debajo, después encima ────────────────────────────
   Las dos capas son la misma imagen pasada por el proceso. La de después se
   descubre de arriba abajo con una línea, como cuando arrastras el separador
   de un antes/después. Cuando un paso del proceso cambie el archivo, la capa
   de después apunta a ese resultado y esto sigue funcionando igual. */

.pila {
  position: relative;
  display: inline-block;
  max-width: 100%;
  max-height: 100%;
  line-height: 0;
  border-radius: var(--r-s);
  overflow: hidden;
  box-shadow: var(--sombra-imagen);
}

.escenario__imagen {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

.pila__despues {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  clip-path: inset(0 0 100% 0);
}

/* El frente: una banda de luz difuminada que recorre la imagen de arriba abajo.
   Por su centro va pasando el revelado —de ahí para arriba ya está la imagen
   que ha salido del proceso—, pero sin ninguna línea que lo señale. */
.pila__frente {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--m-difuminado-alto);
  max-height: 60%;
  transform: translateY(-50%);
  background: var(--revelado-difuminado);
  filter: blur(var(--revelado-suavizado));
  opacity: 0;
  pointer-events: none;
}

/* Mientras se aplica, el frente va descubriendo la imagen que sale del proceso.
   La de partida no se toca: nada de apagarla ni desaturarla, que marcaba un
   borde duro al pasar y se leía como un blanco y negro. */
.app[data-fase="aplicando"] .pila__despues {
  animation: revela var(--t-aplicando) var(--curva-calma) forwards;
}

.app[data-fase="aplicando"] .pila__frente {
  animation: baja var(--t-aplicando) var(--curva-calma) forwards;
}

.app[data-fase="hecho"] .pila__despues { clip-path: inset(0 0 0 0); }

@keyframes revela {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes baja {
  0%   { top: 0;    opacity: 0; }
  6%   { opacity: 1; }
  94%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

.escenario__hueco {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e-6);
  width: 78%;
  height: 76%;
  border: 1px dashed var(--borde-hueco);
  border-radius: var(--r-l);
  font-size: var(--f-m);
  color: var(--texto-escenario);
  text-align: center;
  padding: var(--e-7);
}

.escenario__sello {
  position: absolute;
  left: var(--e-10);
  bottom: var(--e-8);
  font-size: var(--f-sm);
  color: var(--texto-escenario-tenue);
}

/* El enlace del hueco vive sobre el cielo, no sobre la carta. */
.escenario__hueco .enlace {
  color: var(--texto-escenario);
  border-bottom-color: var(--borde-hueco);
}
.escenario__hueco .enlace:hover {
  color: var(--texto-escenario-fuerte);
  border-bottom-color: var(--borde-hueco-fuerte);
}

/* ── El momento de aplicar ───────────────────────────────────────────── */

.anillo {
  position: absolute;
  width: var(--m-anillo);
  height: var(--m-anillo);
  max-width: 90%;
  max-height: 90%;
  border: 1px solid var(--aplicando-anillo);
  border-radius: var(--r-circulo);
  pointer-events: none;
  animation: respira var(--t-respiracion) var(--curva-calma) infinite;
}
.anillo--tarde { animation-delay: calc(var(--t-respiracion) / 2); }

@keyframes respira {
  0%   { transform: scale(0.84); opacity: 0; }
  40%  { opacity: 0.75; }
  100% { transform: scale(1.26); opacity: 0; }
}

/* ── Panel: los pasos ────────────────────────────────────────────────── */

.panel {
  display: flex;
  flex-direction: column;
  padding: var(--e-9) var(--e-9) var(--e-8);
  background: var(--superficie-carta);
  border-left: 1px solid var(--borde-panel);
  overflow-y: auto;
}

.panel__paso + .panel__paso { margin-top: var(--e-8); }

.panel__eleccion {
  display: flex;
  align-items: center;
  gap: var(--e-5);
  flex-wrap: wrap;
}

.panel__cierre {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  margin-top: auto;
  padding-top: var(--e-8);
}

.panel__nota {
  font-size: var(--f-s);
  color: var(--texto-tenue);
  text-align: center;
  margin: 0;
  min-height: calc(var(--f-s) * var(--f-alto-normal));
}

.panel__grupo {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}

/* ── Estrecho: una sola columna, imagen arriba ───────────────────────── */

@media (max-width: 900px) {
  .taller {
    padding: var(--m-margen-ventana-movil);
    /* Centrada: el margen de arriba y el de abajo son el mismo. `safe` evita
       que se corte por arriba si la carta no cupiera. */
    align-items: safe center;
  }

  .carta {
    grid-template-columns: minmax(0, 1fr);
    /* El alto de la zona de la imagen lo fija la rejilla, no el contenido:
       así la carta mide lo mismo con imagen y sin ella. */
    grid-template-rows: var(--m-escenario-movil) auto;
    height: auto;
  }

  .escenario {
    padding: var(--e-6);
    min-height: var(--m-escenario-estrecho);
  }

  .escenario__sello { left: var(--e-7); bottom: var(--e-5); }

  .panel {
    border-left: 0;
    border-top: 1px solid var(--borde-panel);
    padding: var(--e-6);
    overflow-y: visible;
  }

  .panel__paso + .panel__paso { margin-top: var(--e-7); }
  .panel__cierre { padding-top: var(--e-6); gap: var(--e-3); }
}

/* Pantallas de móvil pequeñas: todo lo necesario para aplicar cabe sin scroll. */
@media (max-width: 640px) {
  .escenario { min-height: var(--m-escenario-movil); padding: var(--e-5); }
  /* La imagen manda sobre el alto de la zona: sin este tope, una foto apaisada
     empuja el botón de Aplicar fuera de la pantalla en móviles pequeños. */
  .panel { padding: var(--e-5); }
  .panel__paso + .panel__paso { margin-top: var(--e-6); }
  .panel__cierre { padding-top: var(--e-5); }
}