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

.ec-pd {
    background: var(--ec-bg);
    padding-bottom: 96px; /* hueco para la barra inferior fija */
}

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

/* ---------- Breadcrumb ---------- */
.ec-pd-breadcrumb {
    font-size: 12.5px; /* F8: 11px → 12.5px */
    color: var(--ec-muted);
    padding-top: 12px;
    margin: 0 0 6px;
}

.ec-pd-breadcrumb a {
    color: var(--ec-mauve);
    text-decoration: none;
    display: inline-block;
    padding: 13px 0; /* F8: zona táctil ~44px */
}

.ec-pd-breadcrumb a:hover {
    text-decoration: underline;
}

/* ---------- Imagen ---------- */
.ec-pd-media {
    position: relative;
    background: linear-gradient(160deg, #FFFFFF, #F0E6EB);
    border: 1px solid rgba(46, 36, 41, 0.08);
    border-radius: var(--ec-radius-card-lg);
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ec-pd-media img.ec-pd-img {
    max-width: 82%;
    max-height: 88%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.ec-pd-seal {
    position: absolute;
    bottom: 10px;
    right: 12px;
    width: 62px;
    height: 62px;
    z-index: 3;
}

.ec-pd-seal img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(46, 36, 41, 0.25));
}

/* ---------- Cabecera editorial ---------- */
.ec-pd-meta {
    font-family: var(--ec-font-mono);
    font-size: 12px; /* F8: 10px → 12px (marca/categoría) */
    letter-spacing: var(--ec-ls-mono);
    text-transform: uppercase;
    color: var(--ec-muted);
    margin: 16px 0 4px;
}

.ec-pd h1.ec-pd-title {
    font-family: var(--ec-font-display) !important;
    font-weight: 400;
    font-size: 27px;
    line-height: 1.12;
    letter-spacing: normal !important;
    color: var(--ec-ink);
    margin: 0 0 8px;
    text-transform: none;
}

.ec-pd-tagline {
    font-size: 16px; /* F8: 13px → 16px (cuerpo) */
    line-height: 1.6;
    color: var(--ec-text-3);
    margin: 0;
}

/* ---------- Tarjeta "Mejor precio hoy" ---------- */
.ec-pd-pricecard {
    margin-top: 18px;
    background: var(--ec-card-bg);
    border: 1px solid var(--ec-border-12);
    border-radius: var(--ec-radius-card);
    padding: 18px;
}

.ec-pd-pricecard-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.ec-pd-pricecard-label {
    font-size: 12px; /* F8: 10px → 12px (label de la tarjeta clave) */
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ec-mauve);
}

.ec-pd-pricecard-count {
    font-family: var(--ec-font-mono);
    font-size: 12px; /* F8: 9px → 12px */
    letter-spacing: var(--ec-ls-mono);
    color: var(--ec-muted); /* F8: placeholder 3.27:1 → muted 6.01:1 */
    text-transform: uppercase;
}

/* Filas por tienda */
.ec-pd-offers {
    display: flex;
    flex-direction: column;
}

.ec-pd-offer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 2px;
    border-top: 1px solid var(--ec-border);
    text-decoration: none;
    color: var(--ec-ink);
    transition: background var(--ec-transition, 0.2s ease);
}

.ec-pd-offer:first-child {
    border-top: none;
}

.ec-pd-offer:hover {
    background: var(--ec-bg-alt);
}

/* F8: sin opacity en la fila entera (dejaba AGOTADO a 2.36:1);
   se atenúa por color manteniendo AA */
.ec-pd-offer.oos .ec-pd-offer-store-top {
    color: var(--ec-muted);
}

.ec-pd-offer-store {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ec-pd-offer-store-top {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ec-ink);
}

.ec-pd-badge-best {
    background: var(--ec-mauve);
    color: #fff;
    font-size: 11px; /* F8: 8.5px → 11px */
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: var(--ec-radius-pill);
    white-space: nowrap;
}

.ec-pd-badge-oos {
    font-size: 11px; /* F8: 9px → 11px */
    font-weight: 700;
    color: #8A5A2B;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ec-pd-offer-ship {
    font-size: 12px; /* F8: 10px → 12px (info de envío) */
    color: var(--ec-muted); /* F8: placeholder → muted (6.01:1) */
    line-height: 1.3;
}

.ec-pd-offer-amt {
    font-family: var(--ec-font-display);
    font-size: 18px;
    color: var(--ec-ink);
    white-space: nowrap;
    text-align: right;
    line-height: 1.1;
}

.ec-pd-offer-amt small {
    display: block;
    font-family: var(--ec-font-body);
    font-size: 12px; /* F8: 9.5px → 12px */
    color: var(--ec-muted); /* F8: placeholder → muted */
}

.ec-pd-offer.is-best .ec-pd-offer-amt {
    color: var(--ec-rose-text); /* F8: 3.60:1 → 5.16:1 (mejor precio) */
}

.ec-pd-seeprice {
    font-family: var(--ec-font-body);
    font-size: 13px; /* F8: 12px → 13px */
    font-weight: 600;
    color: var(--ec-muted); /* F8: placeholder → muted */
}

/* Precio único (sin comparativa) */
.ec-pd-price-single {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.ec-pd-price-now {
    font-family: var(--ec-font-display);
    font-size: 32px;
    color: var(--ec-ink);
    line-height: 1;
}

.ec-pd-price-old {
    font-size: 14px;
    color: var(--ec-muted); /* F8: placeholder 3.27:1 → muted 6.01:1 */
    text-decoration: line-through;
}

.ec-pd-price-save {
    font-size: 12px; /* F8: 11.5px → 12px */
    font-weight: 700;
    color: var(--ec-rose-text); /* F8: 3.60:1 → 5.16:1 */
}

/* Código de descuento (borde dashed, como las cards del catálogo) */
.ec-pd-code {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    border: 1px dashed rgba(139, 95, 131, 0.5);
    border-radius: var(--ec-radius-input);
    padding: 7px 12px;
    font-family: var(--ec-font-mono);
    font-size: 12px;
    letter-spacing: var(--ec-ls-mono);
    color: var(--ec-mauve);
    background: var(--ec-bg-promo);
}

.ec-pd-code strong {
    font-weight: 500;
}

.ec-pd-code .btn-copy-code {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ec-mauve);
    font-size: 15px; /* F8: 13px → 15px */
    /* F8: ~17px → área táctil >=44px (paso clave de la conversión) */
    min-width: var(--ec-tap-min);
    min-height: var(--ec-tap-min);
    padding: 8px;
    margin: -8px -6px -8px 0;
    line-height: 1;
}

.ec-pd-code .btn-copy-code.copied {
    color: var(--ec-rose);
}

/* Evolución del precio (sparkline conservada del módulo de transparencia) */
.ec-pd-chart {
    margin-top: 12px;
}

.ec-pd-chart .pt-sparkline {
    display: block;
    height: 64px;
}

.ec-pd-chart-x {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-family: var(--ec-font-mono);
    font-size: 12px; /* F8: 9px → 12px (fechas del histórico) */
    color: var(--ec-muted); /* F8: placeholder → muted */
    margin-top: 3px;
}

.ec-pd-trend {
    font-weight: 500;
}

.ec-pd-trend.down {
    color: #177A44; /* F8: #1f9d57 3.49:1 → 5.38:1 sobre blanco */
}

.ec-pd-trend.up {
    color: #b45309;
}

.ec-pd-pricecard-note {
    font-size: 12px; /* F8: 10.5px → 12px */
    color: var(--ec-muted); /* F8: placeholder → muted */
    margin: 10px 0 0;
    line-height: 1.45;
}

/* CTA principal */
.ec-pd-buy {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 12px;
    background: var(--ec-rose-cta); /* F8: 3.60:1 → 5.16:1 con blanco */
    color: #fff;
    border: none;
    border-radius: var(--ec-radius-pill);
    padding: 14px;
    font-family: var(--ec-font-body);
    font-size: 15px; /* F8: 14px → 15px */
    font-weight: 700;
    cursor: pointer;
    transition: background var(--ec-transition, 0.2s ease);
}

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

.ec-pd-buy-sub {
    font-size: 12.5px; /* F8: 11.5px → 12.5px */
    color: var(--ec-muted);
    text-align: center;
    margin: 8px 0 0;
    line-height: 1.45;
}

.ec-pd-disclaimer {
    font-size: 12px; /* F8: 10px → 12px (texto legal) */
    color: var(--ec-muted); /* F8: placeholder 2.97:1 → muted 5.45:1 */
    text-align: center;
    margin: 8px 0 0;
}

/* ---------- El veredicto de Esther ---------- */
.ec-pd-verdict {
    margin-top: 20px;
    background: var(--ec-card-bg);
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius-card);
    padding: 18px;
}

.ec-pd-verdict-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.ec-pd-verdict-head img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

.ec-pd-verdict-name {
    font-family: var(--ec-font-display);
    font-size: 18px;
    color: var(--ec-ink);
}

.ec-pd-verdict-cred {
    font-family: var(--ec-font-mono);
    font-size: 12px; /* F8: 9px → 12px (credenciales de Esther) */
    letter-spacing: var(--ec-ls-mono);
    text-transform: uppercase;
    color: var(--ec-muted);
}

.ec-pd-verdict-text {
    font-size: 16px; /* F8: 13px → 16px (contenido estrella) */
    line-height: 1.65;
    color: var(--ec-text-2);
    margin: 0;
}

/* Video-review (bloque oscuro con play rojo, patrón 4c) */
.ec-pd-video {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    background: var(--ec-dark);
    border-radius: var(--ec-radius-card-sm);
    padding: 10px 12px;
    text-decoration: none;
}

.ec-pd-video-thumb {
    position: relative;
    flex-shrink: 0;
    width: 92px;
    height: 56px;
    border-radius: 8px;
    background-color: #443a40;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ec-pd-play {
    width: 30px;
    height: 21px;
    background: var(--ec-youtube);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ec-pd-play::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent #fff;
}

.ec-pd-video-txt {
    font-size: 13px; /* F8: 12.5px → 13px */
    font-weight: 600;
    color: var(--ec-dark-text);
    line-height: 1.35;
}

.ec-pd-video-txt em {
    display: block;
    font-style: normal;
    font-size: 12px; /* F8: 10px → 12px */
    font-weight: 400;
    color: var(--ec-dark-muted);
    margin-top: 2px;
}

/* ---------- Secciones con eyebrow malva ---------- */
.ec-pd-block {
    padding-top: 22px;
}

.ec-pd-eyebrow {
    font-size: 12px; /* F8: 10px → 12px (titulan secciones) */
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ec-mauve);
    margin: 0 0 10px;
}

/* Activos como enlaces píldora */
.ec-pd-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ec-pd-pill {
    font-size: 12.5px; /* F8: 11.5px → 12.5px (nombres de activos) */
    font-weight: 600;
    color: var(--ec-mauve);
    border: 1px solid rgba(139, 95, 131, 0.35);
    border-radius: var(--ec-radius-pill);
    display: inline-flex; /* F8: enlaces píldora con caja >=44px */
    align-items: center;
    min-height: var(--ec-tap-min);
    padding: 11px 16px;
    text-decoration: none;
    background: transparent;
    transition: background var(--ec-transition, 0.2s ease);
}

a.ec-pd-pill:hover {
    background: rgba(139, 95, 131, 0.08);
    color: var(--ec-mauve);
}

/* ---------- Caja "Ojo al combinar" ---------- */
.ec-pd-clash {
    margin-top: 18px;
    background: var(--ec-notice-bg);
    border: 1px solid var(--ec-notice-border);
    border-radius: var(--ec-radius-card-sm);
    padding: 16px 18px;
}

.ec-pd-clash-title {
    font-size: 13px; /* F8: 11px → 13px (aviso de seguridad de uso) */
    font-weight: 700;
    color: var(--ec-rose-text); /* F8: 3.33:1 → 4.78:1 sobre notice-bg */
    margin: 0 0 6px;
}

.ec-pd-clash p {
    font-size: 15px; /* F8: 12px → 15px */
    line-height: 1.6;
    color: var(--ec-text-2);
    margin: 0;
}

/* ---------- Cómo lo usaría contigo ---------- */
.ec-pd-usage-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.ec-pd-usage-grid.one-col {
    grid-template-columns: 1fr;
}

.ec-pd-usage-card {
    background: var(--ec-card-bg);
    border: 1px solid var(--ec-border);
    border-radius: 12px;
    padding: 14px;
}

.ec-pd-usage-card h3 {
    font-family: var(--ec-font-body) !important;
    font-size: 13px; /* F8: 11px → 13px */
    font-weight: 700;
    letter-spacing: normal !important;
    text-transform: none;
    color: var(--ec-ink);
    margin: 0 0 6px;
}

.ec-pd-usage-card p {
    font-size: 15px; /* F8: 11.5px → 15px (cómo usarlo) */
    color: var(--ec-muted);
    line-height: 1.55;
    margin: 0;
}

.ec-pd-usage-step {
    font-family: var(--ec-font-mono);
    font-size: 12px; /* F8: 9.5px → 12px (AM/PM) */
    letter-spacing: var(--ec-ls-mono);
    text-transform: uppercase;
    color: var(--ec-muted);
    margin: 10px 0 0;
}

/* ---------- Aparece en (cross-selling a rutinas) ---------- */
.ec-pd-appears {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ec-pd-appears-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    background: var(--ec-card-bg);
    border: 1px solid var(--ec-border-12);
    border-radius: 12px;
    padding: 13px 16px;
    text-decoration: none;
    color: var(--ec-ink);
    transition: border-color var(--ec-transition, 0.2s ease);
}

.ec-pd-appears-item:hover {
    border-color: rgba(184, 114, 142, 0.5);
    color: var(--ec-ink);
}

.ec-pd-appears-name {
    font-size: 14px; /* F8: 12.5px → 14px */
    font-weight: 600;
}

.ec-pd-appears-meta {
    font-size: 12px; /* F8: 10.5px → 12px */
    color: var(--ec-muted);
    margin-top: 1px;
}

.ec-pd-appears-arrow {
    color: var(--ec-rose);
    flex-shrink: 0;
}

/* ---------- Detalles plegados (SEO íntegro en el DOM) ---------- */
.ec-pd-details {
    margin-top: 10px;
    background: var(--ec-card-bg);
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-radius-card-sm);
}

.ec-pd-details summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    font-size: 14.5px; /* F8: 12.5px → 14.5px (control de despliegue) */
    font-weight: 600;
    color: var(--ec-ink);
}

.ec-pd-details summary::-webkit-details-marker {
    display: none;
}

.ec-pd-details summary::after {
    content: '+';
    font-family: var(--ec-font-display);
    font-size: 18px;
    color: var(--ec-mauve);
    line-height: 1;
}

.ec-pd-details[open] summary::after {
    content: '−';
}

.ec-pd-details-body {
    padding: 0 16px 16px;
    font-size: 15px; /* F8: 12.5px → 15px */
    line-height: 1.65;
    color: var(--ec-text-2);
}

.ec-pd-details-body p {
    font-size: 15px; /* F8: 12.5px → 15px */
    line-height: 1.65;
    color: var(--ec-text-2);
    margin: 0 0 10px;
}

.ec-pd-details-body p:last-child {
    margin-bottom: 0;
}

.ec-pd-benefit {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 0 0 7px;
}

.ec-pd-benefit svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--ec-rose);
}

.ec-pd-spec-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 0;
    border-top: 1px solid var(--ec-border);
    font-size: 13px; /* F8: 12px → 13px */
}

.ec-pd-spec-row:first-child {
    border-top: none;
}

.ec-pd-spec-label {
    color: var(--ec-muted);
}

.ec-pd-spec-value {
    font-weight: 600;
    color: var(--ec-ink);
    text-align: right;
}

/* ---------- Barra inferior fija ---------- */
.ec-pd-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 900;
    background: rgba(247, 243, 241, 0.94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--ec-border-12);
    padding: 11px 18px;
}

.ec-pd-bar-inner {
    max-width: 840px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ec-pd-bar-info {
    flex: 1;
    line-height: 1.3;
    min-width: 0;
}

.ec-pd-bar-label {
    font-size: 12px; /* F8: 10.5px → 12px */
    color: var(--ec-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ec-pd-bar-price {
    font-family: var(--ec-font-display);
    font-size: 18px;
    color: var(--ec-ink);
}

.ec-pd-bar-cta {
    background: var(--ec-rose-cta); /* F8: 3.60:1 → 5.16:1 */
    color: #fff;
    border: none;
    border-radius: var(--ec-radius-pill);
    min-height: var(--ec-tap-min); /* F8: ~40px → >=44px (CTA persistente) */
    padding: 12px 22px;
    font-family: var(--ec-font-body);
    font-size: 14px; /* F8: 13px → 14px */
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--ec-transition, 0.2s ease);
}

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

/* ---------- Desktop ---------- */
@media (min-width: 900px) {
    .ec-pd-breadcrumb {
        padding-top: 28px;
    }

    .ec-pd-hero {
        display: grid;
        grid-template-columns: 420px 1fr;
        gap: 34px;
        align-items: start;
    }

    .ec-pd-media {
        height: 380px;
    }

    .ec-pd-meta {
        margin-top: 0;
    }

    .ec-pd h1.ec-pd-title {
        font-size: 38px;
    }

    .ec-pd-tagline {
        font-size: 16px; /* F8: no bajar de la base móvil */
    }

    .ec-pd-usage-card p {
        font-size: 15px; /* F8 */
    }
}