/* ====================================================================
   MDTopX — página de producto (hero + catálogo de funciones por familia)
   ==================================================================== */

/* ---------- Hero ---------- */
.mdtopx-hero {
    background: var(--brand-hero);
    color: #fff;
    padding: 4rem 0 4.5rem;
}

.mdtopx-hero .lead {
    font-size: 1.4rem;
    font-weight: 500;
}

.mdtopx-hero-sub {
    max-width: 46rem;
    opacity: .9;
}

.mdtopx-hero-img {
    max-width: 100%;
    height: auto;
    border-radius: .75rem;
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .35);
}

/* ---------- Banda de flujo (qué cubre) ---------- */
.mdtopx-flujo {
    background: #f6fafb;
}

.mdtopx-flujo .row > div {
    color: #555;
    font-size: .8rem;
    font-weight: 500;
    line-height: 1.2;
}

.mdtopx-flujo .bi {
    display: block;
    font-size: 1.5rem;
    color: #136f8b;
    margin-bottom: .35rem;
}

/* ---------- Navegación por familias (chips) ---------- */
.familias-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    position: sticky;
    top: 0;
    z-index: 5;
    padding: .75rem 0;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(4px);
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.chip-familia {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .8rem;
    border-radius: 2rem;
    font-size: .85rem;
    font-weight: 500;
    color: #136f8b;
    background: #eaf4f7;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.chip-familia:hover,
.chip-familia:focus {
    background: #136f8b;
    color: #fff;
}

/* ---------- Cabecera de familia ---------- */
.familia-mdtopx {
    scroll-margin-top: 4.5rem; /* para que el ancla no quede bajo la barra sticky */
}

.familia-cabecera {
    border-left: 4px solid #1aa179;
    padding-left: .85rem;
}

/* ---------- Tarjetas de funcionalidad ---------- */
.ficha-mdtopx {
    border-radius: .75rem;
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
}

.ficha-mdtopx:hover {
    transform: translateY(-4px);
    box-shadow: 0 .75rem 1.5rem rgba(0, 0, 0, .12) !important;
}

/* Caja de imagen con el icono de la familia como fondo/relleno.
   Si la imagen del blob existe, la cubre; si no (onerror la elimina), se ve el icono. */
.ficha-media {
    position: relative;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #eef5f8 0%, #e3f0ec 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ficha-icono {
    color: #6fb7c4;
    font-size: 2.75rem;
    line-height: 1;
}

.ficha-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ficha-beneficio {
    color: #157347;
}

.ficha-variantes {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-top: .25rem;
}

.ficha-variantes .badge {
    background: #eaf4f7;
    color: #136f8b;
    font-weight: 500;
}