/* =============================================================
   BIBLIOTECA DE RUTINAS "EDICIÓN CLÍNICA" (F5) — pantalla 4a
   Fuente vinculante: design_handoff_esther_gaya/README.md + prototipo
   Propuestas Landing.dc.html (frame id=4a).
   Mobile-first. Tokens: assets/css/edicion-clinica.css (--ec-*).
   Este fichero SOLO lo usa rutinas.php.
   ============================================================= */

.ec-rutinas {
    background: var(--ec-bg);
}

.ec-r-container {
    max-width: 1120px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
}

/* ---------- Hero ---------- */
.ec-r-hero {
    padding-top: 28px;
    text-align: center;
}

.ec-r-hero .ec-eyebrow {
    display: block;
    margin-bottom: 10px;
}

.ec-r-h1 {
    font-family: var(--ec-font-display) !important;
    font-weight: 400;
    font-size: 30px;
    line-height: 1.12;
    letter-spacing: normal !important;
    margin: 0 0 10px;
    color: var(--ec-ink);
}

.ec-r-lead {
    font-size: 16px; /* F8: 13px → 16px (cuerpo móvil) */
    line-height: 1.6;
    color: var(--ec-muted);
    margin: 0 auto;
    max-width: 340px;
}

.ec-r-recover {
    font-size: 14px; /* F8: 11.5px → 14px (única vía de recuperar compra) */
    color: var(--ec-muted);
    margin-top: 4px;
}

.ec-r-recover a {
    color: var(--ec-mauve);
    font-weight: 600;
    text-decoration: underline;
    display: inline-block;
    padding: 11px 0; /* F8: zona táctil ~44px (antes ~18px) */
}

/* ---------- Toggle de temporada (píldora, activo oscuro) ---------- */
.ec-r-season-toggle {
    display: inline-flex;
    margin: 20px auto 0;
    background: #fff;
    border: 1px solid rgba(46, 36, 41, 0.14);
    border-radius: var(--ec-radius-pill);
    padding: 4px;
    gap: 4px;
}

.ec-r-season-btn {
    font-family: var(--ec-font-body);
    font-size: 14px; /* F8: 12px → 14px (control interactivo) */
    font-weight: 700;
    letter-spacing: 0.06em;
    border-radius: var(--ec-radius-pill);
    padding: 14px 20px; /* F8: 9px 18px → 14px 20px (alto ~45px) */
    cursor: pointer;
    border: none;
    transition: all var(--ec-transition);
    white-space: nowrap;
    background: transparent;
    color: var(--ec-muted);
}

.ec-r-season-btn.active {
    background: var(--ec-dark);
    color: var(--ec-dark-text);
}

/* ---------- Cabecera de temporada (serif itálica + regla) ---------- */
.ec-r-season-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 26px 0 14px;
}

.ec-r-season-header h2 {
    font-family: var(--ec-font-display) !important;
    font-style: italic;
    font-weight: 400;
    font-size: 22px;
    letter-spacing: normal !important;
    margin: 0;
    white-space: nowrap;
    color: var(--ec-ink);
}

.ec-r-season-header .ec-r-rule {
    flex: 1;
    height: 1px;
    background: var(--ec-border-12);
}

/* ---------- Grid de tarjetas ---------- */
.ec-r-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* La cabecera de temporada vive dentro del flujo del grid */
.ec-r-grid .ec-r-season-header {
    width: 100%;
}

/* ---------- Tarjeta de rutina ---------- */
.ec-r-card {
    position: relative;
    display: block;
    background: var(--ec-card-bg);
    border-radius: var(--ec-radius-card-lg);
    overflow: visible;
    text-decoration: none;
    color: var(--ec-ink);
    border: 1px solid var(--ec-border);
    box-shadow: 0 8px 24px -20px rgba(46, 36, 41, 0.35);
    transition: transform var(--ec-transition), box-shadow var(--ec-transition);
}

.ec-r-card:hover {
    transform: translateY(-3px);
    color: var(--ec-ink);
}

/* Destacada "La más elegida": borde rosa + sombra destacada */
.ec-r-card.ec-r-featured {
    border: 1.5px solid var(--ec-rose);
    box-shadow: var(--ec-shadow-featured);
}

.ec-r-featured-badge {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    background: var(--ec-rose-cta); /* F8: 3.60:1 → 5.16:1 con blanco */
    color: #fff;
    font-size: 11px; /* F8: 9.5px → 11px */
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 14px;
    border-radius: var(--ec-radius-pill);
    white-space: nowrap;
}

/* Cover con pill de temporada */
.ec-r-cover {
    position: relative;
    height: 150px;
    border-radius: 16.5px 16.5px 0 0;
    overflow: hidden;
    background-color: #EFE9EC;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ec-r-cover-pill {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(255, 255, 255, 0.75);
    color: var(--ec-ink);
    font-family: var(--ec-font-display);
    font-style: italic;
    font-size: 12px;
    padding: 3px 12px;
    border-radius: var(--ec-radius-pill);
}

.ec-r-cover-glyph {
    font-family: var(--ec-font-display);
    font-size: 40px;
    color: rgba(255, 255, 255, 0.85);
}

/* Cuerpo de la tarjeta */
.ec-r-card-body {
    padding: 16px 18px 18px;
}

.ec-r-card-topline {
    display: flex;
    flex-wrap: wrap; /* F8: al crecer tier/stats, en pantallas estrechas envuelve */
    justify-content: space-between;
    align-items: baseline;
    gap: 4px 8px;
    margin-bottom: 6px;
}

.ec-r-tier {
    font-size: 12px; /* F8: 10.5px → 12px (info clave de elección) */
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ec-text-2);
}

.ec-r-stats {
    font-family: var(--ec-font-mono);
    font-size: 12px; /* F8: 9px → 12px (dato de compra) */
    color: var(--ec-muted);
    white-space: nowrap;
}

.ec-r-price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
}

.ec-r-price {
    font-family: var(--ec-font-display);
    font-size: 30px;
    color: var(--ec-ink);
}

.ec-r-price-sub {
    font-size: 12.5px; /* F8: 10.5px → 12.5px (aclara qué se compra) */
    color: var(--ec-muted);
}

.ec-r-desc {
    font-size: 15px; /* F8: 12px → 15px (cuerpo: qué incluye la rutina) */
    line-height: 1.55;
    color: var(--ec-muted);
    margin: 0 0 14px;
}

/* CTA "Desbloquear rutina" */
.ec-r-cta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    border-radius: var(--ec-radius-pill);
    padding: 12px;
    font-size: 12.5px; /* F8: 11px → 12.5px (lleva la acción) */
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: transparent;
    color: var(--ec-ink);
    border: 1px solid rgba(46, 36, 41, 0.25);
    transition: background var(--ec-transition), color var(--ec-transition), border-color var(--ec-transition);
}

.ec-r-card.ec-r-featured .ec-r-cta {
    background: var(--ec-dark);
    color: var(--ec-dark-text);
    border-color: var(--ec-dark);
}

.ec-r-card:hover .ec-r-cta {
    background: var(--ec-rose-cta); /* F8: estado activo 3.60:1 → 5.16:1 */
    color: #fff;
    border-color: var(--ec-rose-cta);
}

/* ---------- Nota pago único ---------- */
.ec-r-note {
    padding: 12px 24px 0;
    margin: 0;
    font-size: 13px; /* F8: 11px → 13px (condición de compra) */
    color: var(--ec-muted);
    text-align: center;
}

/* ---------- Banda upsell oscura → Rutina personalizada 95€ ---------- */
.ec-r-upsell {
    margin: 26px 0 0;
    background: var(--ec-dark);
    color: var(--ec-dark-text);
    border-radius: var(--ec-radius-card-lg);
    padding: 22px;
}

.ec-r-upsell-eyebrow {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: var(--ec-ls-mono-wide);
    text-transform: uppercase;
    color: var(--ec-rose-light);
    margin-bottom: 6px;
}

.ec-r-upsell-title {
    font-family: var(--ec-font-display) !important;
    font-weight: 400;
    font-size: 19px;
    line-height: 1.3;
    letter-spacing: normal !important;
    margin: 0 0 12px;
    color: var(--ec-dark-text);
}

.ec-r-upsell-cta {
    display: inline-flex;
    align-items: center;
    min-height: var(--ec-tap-min); /* F8: ~40px → >=44px */
    background: var(--ec-rose-cta); /* F8: 3.60:1 → 5.16:1 con blanco */
    color: #fff;
    border-radius: var(--ec-radius-pill);
    padding: 12px 22px;
    font-size: 14px; /* F8: 12.5px → 14px */
    font-weight: 600;
    text-decoration: none;
    transition: background var(--ec-transition);
}

.ec-r-upsell-cta:hover {
    background: var(--ec-rose-cta-hover); /* F8 */
    color: #fff;
}

/* ---------- Strip de confianza ---------- */
.ec-r-trust {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    padding: 22px 0 30px;
    font-size: 12px; /* F8: 10px → 12px (claims informativos) */
    color: var(--ec-muted);
    text-align: center;
}

.ec-r-trust-item {
    flex: 1;
}

.ec-r-trust-item strong {
    color: var(--ec-ink);
}

.ec-r-trust-sep {
    width: 1px;
    background: var(--ec-border-12);
}

.ec-r-empty {
    text-align: center;
    padding: 4rem 0;
    color: var(--ec-muted);
}

/* =============================================================
   Desktop (≥760px): 3 tarjetas por gama en fila, hero más grande
   ============================================================= */
@media (min-width: 760px) {
    .ec-r-hero {
        padding-top: 48px;
    }

    .ec-r-h1 {
        font-size: 42px;
    }

    .ec-r-lead {
        font-size: 16px; /* F8: no bajar de la base móvil */
        max-width: 520px;
    }

    .ec-r-season-header {
        padding: 40px 0 20px;
    }

    .ec-r-season-header h2 {
        font-size: 27px;
    }

    .ec-r-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
        align-items: stretch;
    }

    .ec-r-grid .ec-r-season-header {
        grid-column: 1 / -1;
    }

    .ec-r-card {
        display: flex;
        flex-direction: column;
    }

    .ec-r-card-body {
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    .ec-r-cta {
        margin-top: auto;
    }

    .ec-r-desc {
        flex: 1;
    }

    .ec-r-upsell {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 28px;
        padding: 32px 36px;
    }

    .ec-r-upsell-title {
        font-size: 24px;
        max-width: 46ch;
        margin-bottom: 0;
    }

    .ec-r-upsell-cta {
        flex-shrink: 0;
    }

    .ec-r-trust {
        max-width: 760px;
        margin: 0 auto;
        font-size: 12px;
        padding: 34px 0 44px;
    }
}