/* ====================================================================
   Digi3D.AI — página de producto (mismo lenguaje visual que MDTopX)
   ==================================================================== */

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

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

.d3d-hero-sub {
    max-width: 48rem;
    opacity: .9;
}

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

/* ---------- Navegación por áreas (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: #2d4ba0;
    background: #eaeefb;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.chip-familia:hover,
.chip-familia:focus {
    background: #2d4ba0;
    color: #fff;
}

/* ---------- Secciones ---------- */
.d3d-seccion {
    scroll-margin-top: 4.5rem;
}

.d3d-seccion-cabecera {
    border-left: 4px solid #4f6fd0;
    padding-left: .85rem;
}

/* ---------- Tarjetas de sensor (con imagen real) ---------- */
.sensor-card {
    border-radius: .75rem;
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
}

.sensor-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 .75rem 1.5rem rgba(0, 0, 0, .15) !important;
}

.sensor-card .sensor-media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #0f1a3a;
}

.sensor-card .sensor-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Tarjetas sin captura: icono sobre fondo suave (mismo encuadre que las de imagen). */
.sensor-card .sensor-media.media-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #eef1fc 0%, #e0e7f7 100%);
}

.sensor-card .sensor-media.media-icono .bi {
    font-size: 2.75rem;
    color: #4f6fd0;
}

/* ---------- Acordeones más sobrios ---------- */
.d3d-seccion .accordion-button:not(.collapsed) {
    background: #eaeefb;
    color: #1b2a6b;
}

.d3d-seccion .accordion-button:focus {
    box-shadow: none;
    border-color: rgba(79, 111, 208, .4);
}

.d3d-seccion .figure-caption {
    font-size: .85rem;
}