/* MacroRadar Preview — correcciones visuales V5.
   Unifica español/inglés y portada/subpáginas sin modificar datos, pagos ni accesos. */

/* Las secciones usan la misma imagen en ambos idiomas. La imagen vive en el
   fondo real de la sección para que ninguna regla de pseudo-elementos la anule. */
.preview-redesign-v1 .progress-section {
  background:
    linear-gradient(90deg, rgba(5, 7, 6, 0.9) 0 38%, rgba(5, 7, 6, 0.55) 72%, rgba(5, 7, 6, 0.82)),
    linear-gradient(180deg, rgba(5, 7, 6, 0.34), rgba(5, 7, 6, 0.93) 88%),
    url("assets/macro-formation-desk-v1.webp") center 54% / cover no-repeat !important;
}

.preview-redesign-v1 .community-section {
  background:
    linear-gradient(90deg, rgba(5, 7, 6, 0.82), rgba(5, 7, 6, 0.44) 58%, rgba(5, 7, 6, 0.74)),
    linear-gradient(180deg, rgba(5, 7, 6, 0.28), rgba(5, 7, 6, 0.88) 92%),
    url("assets/macro-nasdaq-v3.webp") center top / cover no-repeat !important;
}

.preview-redesign-v1 .progress-section::before,
.preview-redesign-v1 .community-section::before {
  content: none !important;
}

/* Evita que la ampliación animada del fondo cree desplazamiento horizontal. */
.preview-redesign-v1 .hero-bg {
  inset: 0 !important;
  transform: none !important;
  animation: none !important;
  will-change: auto !important;
}

/* Los índices deben ser recuadros compactos, nunca barras de ancho completo. */
.preview-redesign-v1 .method-step > span,
.preview-redesign-v1 .entry-steps article > span {
  display: inline-grid !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  flex: 0 0 42px !important;
  place-items: center !important;
  margin: 0 0 26px !important;
  padding: 0 !important;
  border: 1px solid rgba(244, 37, 62, 0.58) !important;
  border-radius: 10px !important;
  color: #ff7586 !important;
  background: rgba(244, 37, 62, 0.12) !important;
  box-shadow: none !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 11px !important;
  line-height: 1 !important;
  letter-spacing: 0.05em !important;
}

/* La decisión final conserva el lenguaje visual rojo. */
.preview-redesign-v1 .method-step.decision-step {
  border-color: rgba(244, 37, 62, 0.62) !important;
  background:
    linear-gradient(145deg, rgba(244, 37, 62, 0.16), transparent 62%),
    rgba(13, 16, 15, 0.94) !important;
}

/* Las seis tarjetas de comunidad reservan el espacio de la explicación.
   Abrir una tarjeta revela el texto sin cambiar la cuadrícula ni mover la imagen. */
.preview-redesign-v1 .community-grid {
  grid-auto-rows: 200px !important;
  align-items: stretch !important;
}

.preview-redesign-v1 .community-item,
.preview-redesign-v1.subpage .community-item {
  height: 200px !important;
  min-height: 200px !important;
  max-height: 200px !important;
  overflow: hidden !important;
  transform: none !important;
}

.preview-redesign-v1 .community-item:hover,
.preview-redesign-v1.subpage .community-item:hover {
  transform: none !important;
}

.preview-redesign-v1 .community-item summary,
.preview-redesign-v1.subpage .community-item summary {
  min-height: 108px !important;
}

.preview-redesign-v1 .community-item > p,
.preview-redesign-v1.subpage .community-item > p {
  max-height: 78px !important;
  overflow: hidden !important;
}

/* Conclusión de MacroRadar Pro: bloque editorial rojo, igual en ES y EN. */
.preview-redesign-v1 .pro-clarifier,
.preview-redesign-v1.subpage .pro-clarifier {
  width: 100% !important;
  max-width: none !important;
  margin-top: 24px !important;
  padding: 19px 22px !important;
  border: 1px solid rgba(244, 37, 62, 0.52) !important;
  border-radius: 14px !important;
  color: #eef2ef !important;
  background:
    linear-gradient(90deg, rgba(244, 37, 62, 0.18), rgba(244, 37, 62, 0.035) 72%),
    rgba(14, 11, 12, 0.94) !important;
  box-shadow: inset 3px 0 #f4253e, 0 18px 44px rgba(244, 37, 62, 0.08) !important;
}

/* Mismo código cromático en las cuatro vistas de planes. */
.preview-redesign-v1 .price-card.free {
  --plan-accent: #aab1ad !important;
  --plan-rgb: 170, 177, 173 !important;
}

.preview-redesign-v1 .price-card.community {
  --plan-accent: #57adff !important;
  --plan-rgb: 57, 148, 255 !important;
}

.preview-redesign-v1 .price-card.standard-monthly {
  --plan-accent: #29d6a1 !important;
  --plan-rgb: 41, 214, 161 !important;
}

.preview-redesign-v1 .price-card.premium-monthly {
  --plan-accent: #b67cff !important;
  --plan-rgb: 152, 78, 255 !important;
}

.preview-redesign-v1 .price-card.standard-annual {
  --plan-accent: #ffd35c !important;
  --plan-rgb: 255, 196, 48 !important;
}

.preview-redesign-v1 .price-card.premium-annual {
  --plan-accent: #f4253e !important;
  --plan-rgb: 244, 37, 62 !important;
}

/* La subpágina de planes no añade un adorno aislado sobre su encabezado. */
.preview-redesign-v1.subpage .pricing-section::before,
.preview-redesign-v1.subpage .pricing-section::after {
  content: none !important;
}

.preview-redesign-v1.subpage .pricing-grid {
  align-items: start !important;
}

@media (max-width: 640px) {
  .preview-redesign-v1 .community-grid {
    grid-auto-rows: 210px !important;
  }

  .preview-redesign-v1 .community-item,
  .preview-redesign-v1.subpage .community-item {
    height: 210px !important;
    min-height: 210px !important;
    max-height: 210px !important;
  }

  .preview-redesign-v1 .pro-clarifier,
  .preview-redesign-v1.subpage .pro-clarifier {
    padding: 17px 18px !important;
  }
}