.fx-decisions__heading {
  display: grid;
  gap: var(--fx-space-2);
  margin-bottom: var(--fx-space-5);
}

.fx-decisions__heading-copy {
  display: grid;
  gap: var(--fx-space-2);
}

.fx-decisions__heading-copy > * {
  margin: 0;
}

.fx-decisions__intro {
  color: var(--fx-color-text-secondary);
}

.fx-decisions__grid {
  display: flex;
  gap: var(--fx-space-3);
  margin-inline: calc(var(--fx-page-margin) * -1);
  padding-inline: var(--fx-page-margin);
  padding-bottom: var(--fx-space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--fx-page-margin);
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.fx-decisions__grid::-webkit-scrollbar {
  display: none;
}

/* Durante el desplazamiento automático el snap se desactiva temporalmente
   para que la interpolación fluya; al terminar se restaura y la card queda
   exactamente alineada con su posición de snap. */
.fx-decisions__grid.is-animating {
  scroll-snap-type: none;
}

.fx-decision {
  display: grid;
  flex: 0 0 min(72vw, 16.25rem);
  align-content: start;
  gap: var(--fx-space-4);
  min-height: 13rem;
  padding: var(--fx-space-4);
  scroll-snap-align: start;
}

.fx-decision.is-accent {
  border-color: var(--fx-color-primary);
}

.fx-decision__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fx-space-2);
}

.fx-decision__option {
  color: var(--fx-color-primary);
  font-weight: 600;
}

.fx-decision__tag {
  color: var(--fx-color-outline);
  text-align: right;
}

.fx-decision.is-accent .fx-decision__tag {
  color: var(--fx-color-primary);
  font-weight: 500;
}

.fx-decision__body {
  display: grid;
  gap: var(--fx-space-2);
}

.fx-decision__body > * {
  margin: 0;
}

@media (min-width: 768px) {
  .fx-decisions__heading {
    max-width: 42rem;
    margin-bottom: var(--fx-space-8);
  }

  .fx-decisions__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-inline: 0;
    padding: 0;
    overflow: visible;
  }

  .fx-decision {
    min-height: 15rem;
  }
}

/* ==========================================================================
   Interacción de cards: cara frontal (decisión) ↔ cara posterior (ejemplo).
   La cara frontal define la altura; la posterior es absoluta (inset: 0),
   por lo que el flip no produce layout shift ni cambia la geometría del
   carrusel. Estados controlados por la clase .is-open sobre la card.
   ========================================================================== */

.fx-decision {
  position: relative;
  overflow: hidden;
  perspective: 900px;
  align-content: stretch;
}

.fx-decision__flip {
  display: contents;
}

.fx-decision__face {
  backface-visibility: hidden;
  transition:
    opacity 300ms var(--fx-ease-standard),
    transform 300ms var(--fx-ease-standard),
    visibility 300ms var(--fx-ease-standard);
}

/* Cara frontal: columna interna con header arriba, copy y CTA anclado abajo.
   La cara ocupa toda la caja de la card (grid item estirado), por lo que el
   CTA queda al mismo nivel en las cinco cards, sin importar el copy. */
.fx-decision__face--front {
  display: flex;
  flex-direction: column;
  gap: var(--fx-space-4);
}

.fx-decision__face--back {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: var(--fx-space-1);
  padding: var(--fx-space-4);
  opacity: 0;
  transform: rotateY(90deg);
  pointer-events: none;
  visibility: hidden;
}

.fx-decision.is-open .fx-decision__face--front {
  opacity: 0;
  transform: rotateY(-90deg);
  pointer-events: none;
  visibility: hidden;
}

.fx-decision.is-open .fx-decision__face--back {
  opacity: 1;
  transform: rotateY(0);
  pointer-events: auto;
  visibility: visible;
}

/* Indicador de interactividad de la card (cara frontal). */
.fx-decision__reveal {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: var(--fx-space-2);
  margin-top: auto;
  align-self: flex-start;
  border: 0;
  background: transparent;
  color: var(--fx-color-outline);
  cursor: pointer;
  font-family: var(--fx-font-mono);
  font-size: var(--fx-text-label-sm);
  line-height: var(--fx-leading-label-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  touch-action: manipulation;
  transition: color var(--fx-duration-fast) var(--fx-ease-standard);
}

.fx-decision__reveal-icon {
  transition: transform var(--fx-duration-fast) var(--fx-ease-standard);
}

.fx-decision__reveal:hover,
.fx-decision__reveal:focus-visible {
  color: var(--fx-color-primary);
}

.fx-decision__reveal:hover .fx-decision__reveal-icon,
.fx-decision__reveal:focus-visible .fx-decision__reveal-icon {
  transform: translateX(var(--fx-space-1));
}

.fx-decision.is-accent .fx-decision__reveal {
  color: var(--fx-color-primary);
}

/* Cara posterior: ejemplo pedagógico.
   Estructura editorial: header (EJEMPLO · CASO TÍPICO), bloque del ejemplo
   con zonas SITUACIÓN / DECISIÓN / RESULTADO y acción inferior anclada.
   La caja es absoluta (inset: 0) sobre la misma card que el frontal. */
.fx-decision__example-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--fx-space-2);
}

.fx-decision__example-eyebrow {
  color: var(--fx-color-primary);
  letter-spacing: 0.08em;
}

.fx-decision__block-label {
  color: var(--fx-color-outline);
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.fx-decision__example-block {
  display: grid;
  gap: var(--fx-space-1);
  padding: var(--fx-space-2);
  background: var(--fx-color-surface-container);
  border: 1px solid var(--fx-color-outline);
  border-left: 2px solid var(--fx-color-primary);
}

.fx-decision__zone {
  display: inline;
  margin: 0;
  color: var(--fx-color-text-secondary);
  font-family: var(--fx-font-mono);
  font-size: var(--fx-text-label-sm);
  line-height: var(--fx-leading-label-sm);
  letter-spacing: -0.01em;
}

.fx-decision__zone-text {
  white-space: normal;
}

.fx-decision__zone-label {
  display: inline;
  margin-right: var(--fx-space-2);
  color: var(--fx-color-outline);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fx-decision__zone.is-decision {
  color: var(--fx-color-carbon);
}

.fx-decision__zone.is-outcome,
.fx-decision__zone.is-outcome .fx-decision__zone-label {
  color: var(--fx-color-primary);
}

.fx-decision__back {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: var(--fx-space-2);
  margin-top: auto;
  align-self: flex-start;
  border: 0;
  background: transparent;
  color: var(--fx-color-primary);
  cursor: pointer;
  font-family: var(--fx-font-mono);
  font-size: var(--fx-text-label-sm);
  line-height: var(--fx-leading-label-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  touch-action: manipulation;
  transition: color var(--fx-duration-fast) var(--fx-ease-standard);
}

.fx-decision__back:hover,
.fx-decision__back:focus-visible {
  color: var(--fx-color-carbon);
}

@media (prefers-reduced-motion: reduce) {
  .fx-decision__face {
    transition: none;
    backface-visibility: visible;
    transform: none;
  }

  .fx-decision__face--back,
  .fx-decision.is-open .fx-decision__face--front {
    opacity: 0;
  }

  .fx-decision.is-open .fx-decision__face--back {
    opacity: 1;
  }
}