/* =========================================================
   El problema: análisis de mercado + tres pilares.
   La tarjeta .valor-nfc se reutiliza en Privacidad.
   ========================================================= */
.valor-nfc {
  padding: var(--esp-6);
}

.privacidad__derechos {
  margin-top: var(--esp-5);
}

.privacidad__demo {
  margin-top: var(--esp-5);
}

.valor-nfc__titulo {
  font-size: var(--texto-lg);
  font-weight: 700;
}

.valor-nfc__texto {
  max-width: 640px;
  margin-top: var(--esp-3);
  color: var(--color-tenue);
}

.valor-nfc__claves {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-5);
  margin: var(--esp-5) 0 0;
  padding: 0;
  list-style: none;
}

.pilares {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--esp-5);
  margin-top: var(--esp-5);
  /* Escena secuencial (base.css) con giro: cada pilar entra dando vueltas
     rápido y frena hasta quedar de frente. La perspectiva da la profundidad. */
  --animacion-reveal: girar-tarjeta;
  perspective: 1200px;
}

/* Vuelta y media: termina de frente. La curva (--curva) arranca rápido y
   frena al final, así que casi todo el giro ocurre en el primer tramo.
   Se oculta con `visibility` (no con `opacity`): animar la opacidad aplana
   el 3D y, mientras gira, se vería el frente en espejo en vez del reverso.
   `visibility` solo vale `hidden` en el fotograma inicial, que el relleno
   `backwards` mantiene durante la espera de cada tarjeta. */
@keyframes girar-tarjeta {
  from {
    visibility: hidden;
    rotate: y 540deg;
  }

  to {
    visibility: visible;
    rotate: none;
  }
}

/* Flipcard: el artículo es el eje del giro (transform) y sus dos caras
   se apilan en la misma celda, de espaldas. La entrada usa `rotate`
   y el hover `translate`, así que no chocan con el giro al clic. */
.pilar {
  display: grid;
  transform-style: preserve-3d;
  cursor: pointer;
  transition: transform var(--t-giro) var(--curva), translate var(--t-media) var(--curva);
}

.pilar[aria-pressed="true"] {
  transform: rotateY(180deg);
}

.pilar:hover {
  translate: 0 -4px;
}

.pilar:focus-visible {
  outline: none;
}

.pilar:focus-visible .pilar__cara {
  outline: 2px solid var(--color-acento);
  outline-offset: 3px;
}

.pilar__cara {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  padding: var(--esp-5);
  backface-visibility: hidden;
  transition: box-shadow var(--t-media);
}

.pilar:hover .pilar__cara {
  box-shadow: var(--sombra-alta);
}

.pilar__cara--reverso {
  transform: rotateY(180deg);
  background: var(--color-superficie-alt);
}

.pilar__pie {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-3);
}

.pilar__pista {
  margin-top: auto;
  font-size: var(--texto-xs);
  font-weight: 700;
  color: var(--color-acento);
  white-space: nowrap;
}

.pilar__cara--reverso .pilar__pista {
  align-self: flex-end;
}

.pilar__grafico {
  margin: var(--esp-3) 0;
}

.pilar__cifra {
  font-size: var(--texto-sm);
  color: var(--color-tenue);
}

.pilar__cifra strong {
  display: block;
  font-family: var(--fuente-titulos);
  font-size: 2rem;
  line-height: 1.1;
  color: var(--color-acento);
}

.pilar__nota {
  margin: var(--esp-3) 0 var(--esp-3);
  font-size: 0.68rem;
  font-style: italic;
  color: var(--color-tenue);
}

.pilar__cabecera {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--esp-3);
}

.pilar__sobre {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-acento);
}

.pilar__titulo {
  margin-top: var(--esp-1);
  font-size: 1.3rem;
  font-weight: 700;
}

.pilar__texto {
  flex: 1;
  margin: var(--esp-4) 0 var(--esp-6);
  font-size: var(--texto-sm);
  color: var(--color-tenue);
}

@media (max-width: 860px) {
  .pilares {
    grid-template-columns: 1fr;
    --escena-escalonada: 0;
  }
}

@media (max-width: 520px) {
  .valor-nfc {
    padding: var(--esp-5);
  }
}