/* ============================================================
   /rehab-x: composiciones propias de la página.
   Los componentes (secciones, botones, estado, tarjetas) vienen de
   v2-system.css; acá solo va lo que no se repite en otras páginas.
   ============================================================ */

/* --- Hero: lo que suma el kit, en íconos de nube de puntos y con su
   etiqueta de estado al pie, para que no se lea como producto en uso. --- */
.rx-hero__media { margin: 0; }
.rx-kit {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.rx-kit li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    padding: 1rem .75rem 1.1rem;
    border-radius: var(--v2-radio-md);
    background: rgba(255, 255, 255, .6);
    border: 1px solid var(--v2-borde);
    font-size: var(--v2-fs-small);
    font-weight: 500;
    color: var(--v2-tinta-2);
}
.rx-kit li span { position: relative; display: block; width: 100%; height: 110px; }
.rx-hero__media figcaption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: 1rem;
    font-size: var(--v2-fs-small);
    color: var(--v2-tinta-3);
}

/* --- 01 · Las tres cifras del vacío, en Fraunces grande --- */
.rx-cifras {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    margin: 0;
}
.rx-cifra {
    border-top: 1px solid var(--v2-borde-fuerte);
    padding-top: 1.25rem;
}
.rx-cifra__num {
    font-family: var(--v2-font-accent);
    font-weight: 300;
    font-size: clamp(3.5rem, 2.6rem + 4vw, 6rem);
    line-height: 1;
    color: var(--v2-tinta);
    font-variant-numeric: tabular-nums;
}
.rx-cifra__num .v2-ref { font-family: var(--v2-font-main); font-size: 1rem; vertical-align: super; }
.rx-cifra dd { margin: .75rem 0 0; max-width: 28ch; color: var(--v2-tinta-2); }
.rx-cifra--acento .rx-cifra__num { color: var(--v2-violeta-texto); font-style: italic; }

/* --- 02 · La escalera. Se conserva la estructura de .v2-plan (medidor,
   pastilla de rango, grilla de qué mide) y se pasa a los tokens nuevos. --- */
.rx-plans { max-width: none; align-items: stretch; }
.rx-plan {
    background: var(--v2-superficie);
    border-color: var(--v2-borde);
    border-radius: var(--v2-radio-lg);
    box-shadow: var(--v2-sombra-1);
    min-width: 0;
}
.rx-plan:hover { border-color: var(--v2-violeta-200); }
.rx-plan.v2-plan--tope { background: var(--v2-violeta-50); border-color: var(--v2-violeta-200); }
.rx-plan .v2-plan__nivel i.is-on { background: var(--v2-violeta); }
.rx-plan.v2-plan--tope .v2-plan__rango { background: var(--v2-violeta); border-color: var(--v2-violeta); }
.rx-plan .v2-estado { align-self: flex-start; margin-bottom: .75rem; }
.rx-plan .v2-plan__tier { font-weight: 300; color: var(--v2-tinta); }
.rx-plan .v2-plan__claim { color: var(--v2-tinta); }
.rx-plan .v2-plan__suma,
.rx-plan__incluido {
    display: block;
    margin: 0 0 10px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--v2-violeta-texto);
}
/* Inter 300 gris se leía lavado: el cuerpo de la tarjeta pasa a 400 y tinta-2 */
.rx-plan .v2-plan__gana,
.rx-plan .v2-plan__mide li,
.rx-plan .v2-plan__includes li { font-weight: 400; color: var(--v2-tinta-2); }
.rx-plan .v2-plan__mide .is-si { color: var(--v2-tinta); }
.rx-plan .v2-plan__mide .is-no { color: var(--v2-tinta-3); }
.rx-plan .v2-plan__mide .is-si::before { color: var(--v2-violeta); }
.rx-plan .v2-plan__includes li::before { background: var(--v2-violeta); }
.rx-plan .v2-plan__detalle summary { color: var(--v2-violeta-texto); font-weight: 500; }
.rx-plan .v2-plan__nota { font-weight: 400; color: var(--v2-tinta-3); margin: 18px 0 0; }
.rx-plan__cta { margin-top: auto; width: 100%; }

/* Los ejercicios adentro de la tarjeta Base: más angosta que el bloque
   original, así que los grupos bajan a dos columnas */
.rx-plan .v2-ejercicios { margin-top: 0; }
.rx-plan .v2-ejercicios__grupos {
    grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
    gap: 18px;
    margin-top: 18px;
    padding-top: 18px;
}
.rx-plan .v2-ejercicios__grupo h4 {
    margin: 0 0 6px;
    font: 600 .72rem/1.3 var(--v2-font-main);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--v2-violeta-texto);
}
.rx-plan .v2-ejercicios__grupo ul { margin: 0; padding: 0; list-style: none; }
.rx-plan .v2-ejercicios__grupo li { font-weight: 400; font-size: .9rem; line-height: 1.7; color: var(--v2-tinta-2); }

/* --- 03 · Piezas del kit: estado + escalón en la misma línea --- */
.rx-pieza__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.rx-pieza__escalon {
    padding: .2rem .65rem;
    border: 1px solid var(--v2-borde-fuerte);
    border-radius: var(--v2-radio-pill);
    font: 600 .7rem/1.2 var(--v2-font-main);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--v2-tinta-2);
}

.rx-puente { margin: var(--v2-espacio-bloque) 0 0; }
.rx-aviso { margin-top: var(--v2-espacio-bloque); }

/* --- 06 · Pasos con estado arriba del título --- */
.v2-paso .v2-estado { margin-bottom: .75rem; }
.rx-con-kit { margin-top: var(--v2-espacio-bloque); max-width: 760px; }

/* --- Cierre --- */
.rx-acciones--centro { justify-content: center; }
.rx-notas { margin-bottom: var(--v2-espacio-seccion); }