/* Fiscalízate 365 (/membresia). Patrón «formulario con resumen fijo», como el pago de los planes del diagnóstico
   (.pago-cuerpo, .planes, .opciones-comprobante, .pago-resumen de app.css). Solo tokens de base.css: claro y oscuro. */
.membresia { display: grid; gap: 22px; padding-top: clamp(24px, 4vw, 44px); }

/* ---------- Cabecera ---------- */
.m-cabeza { display: grid; gap: 10px; }
.m-familia { font-size: .875rem; font-weight: 600; color: var(--oro-tinta); }
.m-cabeza h1 { font-size: clamp(2rem, 5vw, 3rem); }
.m-lema { font-size: 1.05rem; color: var(--suave); max-width: 60ch; }

/* Tipo de membresía: tres enlaces como control segmentado (objetivos de 44 px o más; aria-current marca el elegido) */
.m-tipos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 6px; border: 1px solid var(--linea-fuerte); border-radius: var(--r-control); overflow: hidden; background: var(--superficie); max-width: 720px; }
.m-tipos a { display: grid; gap: 1px; align-content: center; min-height: 56px; padding: 8px 14px; color: var(--tinta); text-decoration: none; min-width: 0; transition: background-color .15s ease, color .15s ease; }
.m-tipos a + a { border-left: 1px solid var(--linea-fuerte); }
.m-tipos a b { font-weight: 600; font-size: .98rem; }
.m-tipos a span { font-size: .8rem; color: var(--suave); overflow-wrap: anywhere; }
.m-tipos a:hover { background: var(--superficie-2); }
.m-tipos a:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }
.m-tipos a[aria-current="page"] { background: var(--noche); color: var(--oro-claro); }
.m-tipos a[aria-current="page"] span { color: var(--noche-suave); }
@media (max-width: 560px) {
  .m-tipos { grid-template-columns: minmax(0, 1fr); }
  .m-tipos a + a { border-left: 0; border-top: 1px solid var(--linea-fuerte); }
  .m-tipos a { min-height: 48px; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 10px; }
}

/* ---------- Estado ---------- */
.m-vigencia { font-size: 1.02rem; }
.m-estado .fila { margin-top: 2px; }

/* ---------- Compra ---------- */
.campo-grupo { display: grid; gap: 4px; }
.pago-opciones { display: grid; gap: 22px; min-width: 0; }
.m-banda-campos .campo, .m-rucs .campo { flex: 1 1 200px; min-width: 0; }
.m-banda-nota { flex-basis: 100%; color: var(--tinta); min-height: 1.4em; }
.m-rucs .campo { max-width: 260px; }
.m-periodos .plan { cursor: pointer; }
#r-cotizacion a { font-weight: 600; }
/* Resumen: los valores de texto (empresa, vigencia) pueden pasar a la línea siguiente sin estrechar el rótulo */
.membresia .desglose dl div { flex-wrap: wrap; }
.membresia .desglose dt { flex: 1 1 9em; min-width: 0; }
.membresia .desglose dd { flex: 0 1 auto; margin-left: auto; white-space: normal; text-align: right; overflow-wrap: anywhere; }

/* ---------- Lo que incluye ---------- */
.m-lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.m-lista li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: .95rem; }
.m-lista li.fuerte { font-weight: 600; grid-column: 1 / -1; }
.m-check { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--verde-bg); color: var(--verde); }
.m-check .ico { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.m-coordina { display: inline-block; margin-left: 4px; font-size: .75rem; font-weight: 600; color: var(--oro-tinta); border: 1px solid color-mix(in srgb, var(--oro) 55%, transparent); border-radius: 999px; padding: 0 8px; white-space: nowrap; }
.m-incluye .nota-legal { margin-top: 14px; }

@media (prefers-reduced-motion: reduce) {
  .m-tipos a { transition: none; }
}