/*
 * Bienvenida (/taller), sobre la superficie de marca (brand-theme.css): columna con los logos,
 * titular, lo que toma el test (tres datos en fila, en un panel de vidrio) y "Comenzar" con el degradado de
 * marca. El aire sobrante va entre los logos y el titular (con tope en pantallas altas), así el
 * bloque de texto queda junto al botón, y el botón justo encima de la cinta.
 */
.welcome {
  --decor-ribbon-zone: 130px;

  display: flex;
}

/* Un poco más arriba que las demás: los logos van a la altura del switch, entre los arcos. */
.welcome .brand-column {
  padding-top: max(68px, calc(env(safe-area-inset-top) + var(--space-10)));
}

@media (min-width: 768px) {
  .welcome {
    --decor-ribbon-zone: 132px;
  }
}

.welcome__spacer {
  flex: 1 1 auto;
  min-height: var(--space-3);
  max-height: 140px;
}

.welcome__title {
  /* Tres líneas: "Descubre tu / estilo de / comunicación". */
  max-width: 7.6em;
  text-wrap: wrap;
  font-size: var(--text-display);
  font-weight: var(--weight-black);
  line-height: var(--text-display-leading);
  letter-spacing: var(--text-display-tracking);
}

.welcome__lead {
  margin-top: var(--space-3);
  max-width: 36ch;
  color: var(--brand-text-muted);
  font-size: var(--text-lead);
  line-height: var(--text-lead-leading);
}

/* Lo que toma el test: tres datos en fila, en un panel de vidrio como el del login. */
.welcome__features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-3);
  border: 1px solid var(--brand-glass-border);
  border-radius: var(--brand-radius-panel);
  background: var(--brand-glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.welcome__feature {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--space-2);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
}

.welcome__feature .icon {
  flex: none;
  width: var(--icon-size);
  height: var(--icon-size);
  color: var(--brand-sky);
}

.welcome__note {
  margin-top: var(--space-4);
  color: var(--brand-text-muted);
  font-size: var(--text-small);
  line-height: var(--text-small-leading);
}

.welcome__start {
  margin-top: var(--space-5);
}

/* Con código de evento, el contenido espera oculto la respuesta del estado del evento (con tope)
 * y aparece con un fundido corto: nunca se ve "Comenzar" para luego cambiar a un aviso. */
.welcome__content {
  transition: opacity 200ms var(--vt-ease);
}

.welcome__content--waiting {
  opacity: 0;
}

/* Aviso: test aún sin preguntas o cupo completo. Mismo titular de la bienvenida, sin botón. */
.welcome__notice {
  display: grid;
  justify-items: start;
}

.welcome__notice-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--brand-glass-border-strong);
  border-radius: var(--radius-pill);
  background: var(--brand-glass);
  color: var(--brand-sky);
}

.welcome__notice-icon .icon {
  width: 28px;
  height: 28px;
}

.welcome__notice-test {
  margin-top: var(--space-5);
  color: var(--brand-text-muted);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.welcome__title--notice {
  max-width: 11em;
  margin-top: var(--space-2);
  font-size: var(--text-title);
}

@media (prefers-reduced-motion: reduce) {
  .welcome__content {
    transition: none;
  }
}