/* Flow-Bi · web-analista (A-14) — grilla de 3 planes y estado "próximo" de /planes.

   Sólo disposición y estados, con los tokens que ya existen (--muted, --line,
   --surface, --ink): ningún color nuevo. `.price-card.glass`, `.eyebrow`,
   `.primary`, `.text-link`, `.steps` y `.faq-list` ya están estilizados en
   styles.css/pages.css/refinement.css (ver INVENTARIO-COMPONENTES.md, E1) —
   acá sólo se agrega lo que hoy no existe en ningún CSS del árbol: una
   grilla de 3 columnas (la vieja `.pricing-grid` es de 4) y el estado
   "próximo" (candado + botón deshabilitado + etiqueta), que INVENTARIO-
   COMPONENTES.md E3 confirma que no tenía clase propia. */

.oferta-section {
  padding: 20px 0 10px;
}

/* m5 (revisión de diseño 21-sep): sin esto el h3 queda pegado al párrafo de
   arriba porque el reset de la casa pone `h3{margin:0}` (styles.css). El
   mismo espaciado que ya separa el resto de los bloques de la sección. */
#analista-en-detalle h3 {
  margin-top: 32px;
}

/* m4: el texto corrido de #analista-en-detalle va a la medida de `.narrow`
   sin encoger `.steps` (grilla de 3 columnas, que sigue a lo ancho). */
#analista-en-detalle > p,
#analista-en-detalle > ul {
  max-width: 850px;
}

.oferta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

/* El estado "próximo" se lee del texto y del candado, nunca sólo del color
   (regla de las reglas comunes): la opacidad es apenas perceptible, texto
   siempre legible — nada de blur ni de apariencia de error. */
.plan-locked {
  opacity: 0.94;
}

.plan-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin: 0;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 100px;
  /* m12 (revisión de diseño 21-sep-2026): con `--muted` sobre el vidrio
     medía 4,49:1 claro / 4,50:1 oscuro (bajo 4,5:1). `--ink` es el token de
     texto fuerte que ya usa la casa. */
  color: var(--ink);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.plan-status .lock-icon {
  width: 14px;
  height: 14px;
  flex: none;
}

/* El control de compra deshabilitado: mismo radio de píldora que `.primary`,
   pero sin relleno — para que se lea "apagado" sin desenfoque ni opacidad
   extrema. El motivo va en el `small` de abajo, en texto, no sólo en el
   `aria-disabled`. */
.locked-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  padding: 13px 19px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: not-allowed;
}

.locked-cta small {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 400;
}

.proximos-resumen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 22px;
}

.proximos-resumen h3 {
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 500;
}

.proximos-resumen p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
}

/* Tablet: nunca 2+1 huérfano (regla del contrato). Analista pasa a ocupar
   las dos columnas arriba, las dos próximas quedan una al lado de la otra
   debajo — nunca una tercera columna vacía ni una tarjeta suelta. */
@media (max-width: 1150px) {
  .oferta-grid {
    grid-template-columns: 1fr 1fr;
  }
  .oferta-grid [data-plan="analista"] {
    grid-column: 1 / -1;
  }
}

/* Móvil: una columna, Analista primero por orden natural del documento (ya
   es el primer nodo del DOM, sin necesidad de reordenar con CSS). */
@media (max-width: 760px) {
  .oferta-grid {
    grid-template-columns: 1fr;
  }
  .proximos-resumen {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .locked-cta,
  .plan-status {
    transition: none;
  }
}