/*
 * Resultado del participante (/resultado), sobre la superficie de marca: logos, el estilo y sus
 * textos, y las acciones justo encima de la cinta.
 */
.result {
  --decor-ribbon-zone: 150px;

  display: flex;
}

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

.result__body {
  display: grid;
  flex: 1 0 auto;
  align-content: start;
  gap: var(--space-5);
  padding-block: var(--space-8) var(--space-6);
}

.result__tie-title {
  font-size: var(--text-question);
  font-weight: var(--weight-bold);
  line-height: 1.2;
}

/* Bloque de cada estilo. */
.result-style {
  display: grid;
  gap: var(--space-5);
}

/* Empate: separa el segundo estilo como grupo propio. */
.result-style + .result-style {
  margin-top: var(--space-8);
}

.result-hero {
  position: relative;
  /* El nombre se dimensiona con el ancho de la tarjeta (cqi) para no desbordar en 360 px. */
  container-type: inline-size;
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-card);
  background: var(--accent-soft);
}

.result-hero__heading {
  display: grid;
  gap: var(--space-2);
}

.result-hero__intro {
  /* Deja libre la esquina del ícono. */
  padding-right: 48px;
  color: var(--brand-text-muted);
  font-size: var(--text-label);
  font-weight: var(--weight-regular);
  line-height: 1.3;
}

.result-hero__name {
  color: var(--accent-ink);
  /* RESOLUTIVO, el nombre más largo, mide unos 6,3 em en Figtree 800; se descuenta la esquina
   * del ícono para que el nombre nunca la toque. */
  padding-right: 56px;
  font-size: min(var(--text-result-name), (100cqi - 56px) / 6.3);
  font-weight: var(--weight-black);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.result-hero__summary {
  margin-top: var(--space-4);
  font-size: var(--text-body);
  line-height: 1.5;
}

.result-hero__icon {
  position: absolute;
  top: var(--space-6);
  right: var(--space-5);
  width: 44px;
  height: 44px;
  color: var(--accent-ink);
  stroke-width: 1.6;
}

.result-paragraph {
  padding: var(--space-6);
  font-size: var(--text-body);
  line-height: 1.6;
}

/* Descripción y consejo justificados. La división silábica (lang="es") evita los huecos
 * grandes entre palabras en una columna tan estrecha. */
.result-paragraph,
.result .callout__text {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

.saved-note {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-6);
  color: var(--brand-text-muted);
}

.saved-note__icon {
  flex: none;
  width: 36px;
  height: 36px;
  color: var(--color-text);
  stroke-width: 1.6;
}

.result__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* "Ver más": descarga el PDF del estilo, en rojo PDF. */
.btn-pdf {
  background: var(--color-pdf-bg);
  color: var(--color-pdf-fg);
}

/* El ícono no se desliza al pasar el mouse: no es una flecha de avance. */
@media (hover: hover) {
  .btn-pdf:hover .icon {
    transform: none;
  }
}

.result__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-min);
  margin-top: var(--space-8);
  color: var(--brand-text-muted);
}

.result__status[hidden] {
  display: none;
}

/* Empate con combinación: solo el resultado de la pareja, en una tarjeta con el degradado de
 * marca (sin los estilos que la forman). */
.result-hero--combo {
  background: linear-gradient(135deg, var(--brand-magenta), var(--brand-violet) 55%, var(--brand-blue));
  box-shadow:
    -10px 10px 28px -12px var(--brand-magenta-glow),
    10px 10px 28px -12px var(--brand-blue-glow);
  color: var(--brand-on-gradient);
}

.result-combo__heading {
  display: grid;
  gap: var(--space-2);
}

.result-hero--combo .result-hero__intro {
  padding-right: 0;
  color: inherit;
  opacity: 0.85;
}

.result-combo__name {
  color: inherit;
  /* ESTRATÉGICO / MOVILIZADOR, los nombres más largos, miden unos 7,4 em en Figtree 800; la
   * tarjeta (container-type de .result-hero) da el ancho. */
  font-size: min(var(--text-result-name), 100cqi / 7.6);
  font-weight: var(--weight-black);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* esc: los nombres de escucha son de dos palabras y la segunda puede ser larga (AUTORREFERENCIAL,
 * unos 11 em en Figtree 800): se parte entre palabras y se dimensiona por esa palabra. */
.result-combo__name--long {
  font-size: min(var(--text-result-name), 100cqi / 11.5);
  line-height: 1.05;
}

/* Texto de varios párrafos en una sola tarjeta (resultado de esc). */
.result-text {
  display: grid;
  gap: var(--space-4);
}

.result-text p {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

.result-text-group {
  display: grid;
  gap: var(--space-3);
}

.result-text-group__title {
  font-size: var(--text-heading);
  font-weight: var(--weight-bold);
  line-height: 1.3;
}