/* =============================================================================
   EL PORTAL DE PIA · LA BIENVENIDA — CSS
   =============================================================================

   Nodo 6be2ab55, 27-ago-2026. Fichero aparte y no dentro de `base.css` a
   propósito, por el mismo motivo que ya dejó escrito
   `empaquetado/portada-app/www/bienvenida.css` en su cabecera: `base.css` es
   la COPIA VIGILADA que lee `element/brand/pia-tokens.css` y que además
   sincroniza hacia la app empaquetada. Meter aquí clases de una pantalla que
   sólo existe en el portal ensuciaría esa copia para nadie.

   Cargado en `index.html` DESPUÉS de `base.css`, como hace la app con la suya.
   ========================================================================== */

/* --- El carrusel a todo el alto ---------------------------------------------
   Misma pieza que `.pia-app--alto` en la app (medida ahí a 390x844: sin esto la
   tarjeta se queda en el 51% de la pantalla). `align-self: stretch` le gana al
   `align-items: center` de `.portal-lienzo` sin tener que tocar esa clase, que
   es compartida por las otras once pantallas del portal. */
.pia-app--alto {
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

.pia-app--alto > .pia-tarjeta {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.pia-app--alto > .pia-tarjeta > .portal-pila {
  flex: 1 1 auto;
  min-height: 0;
}

.portal-bienvenida__fila {
  margin-top: var(--pia-esp-6);
}

/* --- El hueco de la escena --------------------------------------------------- */
.portal-bienvenida__escena {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pia-esp-5) 0;
}

.portal-escena {
  width: 100%;
  height: 100%;
  max-width: 210px;
  max-height: 210px;
  color: var(--pia-texto-tercero);
  animation: portal-escena-aparece .45s ease-out both;
}

@keyframes portal-escena-aparece {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* --- 1 · El filtro de atención ----------------------------------------------- */
.portal-escena__entrante {
  fill: currentColor;
  opacity: .8;
  transform-box: fill-box;
  transform-origin: center;
  animation: portal-escena-entra 4s var(--retraso, 0s) infinite ease-in-out;
}

@keyframes portal-escena-entra {
  0%          { opacity: 0;  transform: translateX(-9px); }
  16%, 36%    { opacity: .8; transform: translateX(0); }
  62%, 100%   { opacity: 0;  transform: translateX(10px); }
}

.portal-escena__filtro {
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-dasharray: 3 5;
  opacity: .55;
}

.portal-escena__elegida { fill: var(--pia-accion); }
.portal-escena__punto   { fill: var(--pia-azul-claro); }

/* --- 2 · A, B o C -------------------------------------------------------------- */
.portal-escena__ficha {
  animation: portal-escena-ficha .5s var(--retraso, 0s) ease-out both;
}

@keyframes portal-escena-ficha {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}

.portal-escena__ficha-caja { fill: none; stroke: currentColor; stroke-width: 1.5; }

.portal-escena__letra {
  fill: currentColor;
  font-family: var(--pia-fuente-titular);
  font-size: 15px;
  font-weight: var(--pia-peso-medio);
}

.portal-escena__resumen { fill: currentColor; opacity: .55; }

.portal-escena__ficha--elegida .portal-escena__ficha-caja {
  fill: var(--pia-accion);
  stroke: var(--pia-accion);
}
.portal-escena__ficha--elegida .portal-escena__letra   { fill: var(--pia-accion-texto); }
.portal-escena__ficha--elegida .portal-escena__resumen { fill: var(--pia-accion-texto); opacity: .7; }

/* --- 3 · Tu servidor ------------------------------------------------------------ */
.portal-escena__rack {
  fill: none;
  stroke: var(--pia-accion);
  stroke-width: 2;
  stroke-linecap: round;
}

.portal-escena__bandejas { fill: currentColor; stroke: none; opacity: .6; }
.portal-escena__piloto   { opacity: .75; }

.portal-escena__anillo {
  fill: none;
  stroke: var(--pia-decor-hasta);
  stroke-width: 2;
  stroke-dasharray: 289;
  stroke-dashoffset: 0;
  transform: rotate(-90deg);
  transform-origin: center;
  animation: portal-escena-cierra 1.6s ease-out both;
}

@keyframes portal-escena-cierra {
  from { stroke-dashoffset: 289; }
  to   { stroke-dashoffset: 0; }
}

.portal-escena__punto--late {
  transform-box: fill-box;
  transform-origin: center;
  animation: portal-escena-late 2.6s infinite ease-in-out;
}

@keyframes portal-escena-late {
  0%, 100% { transform: scale(1);    opacity: 1;  }
  50%      { transform: scale(1.22); opacity: .75; }
}

/* --- Quieto también tiene que decir lo mismo ---------------------------------
   Todas las capturas de este repo fuerzan `prefers-reduced-motion`, así que
   los valores base de cada pieza de arriba ya SON el estado final. */
@media (prefers-reduced-motion: reduce) {
  .portal-escena,
  .portal-escena * {
    animation: none;
    transform: none;
  }
}