/**
 * Cards y Bloques Reutilizables — 360 Vision HSE
 */

.v360-card {
    background: var(--v360-bg-surface);
    border: 1px solid var(--v360-border-color);
    border-radius: var(--v360-border-radius-md);
    padding: 2rem;
    transition: all var(--v360-transition-base);
    position: relative;
    overflow: hidden;
}

.v360-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--v360-shadow-lg);
    border-color: rgba(0, 86, 179, 0.25);
}

.v360-card-dark {
    background: linear-gradient(145deg, var(--v360-color-dark-surface) 0%, var(--v360-color-dark) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--v360-text-inverse);
}

.v360-card-dark h3,
.v360-card-dark h4 {
    color: var(--v360-text-inverse);
}

.v360-card-dark p {
    color: var(--v360-text-light);
}

.v360-card-icon {
    width: 54px;
    height: 54px;
    border-radius: var(--v360-border-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    font-size: 1.6rem;
    background: var(--v360-color-primary-light);
    color: var(--v360-color-primary);
}

/* Subtítulo / Eyebrow Institucional — Borde izquierdo gradiente con espacio (sin curvas de IA) */
.v360-eyebrow,
.v360-badge {
    display: inline-flex;
    align-items: center;
    position: relative;
    padding: 0.2rem 0 0.2rem 1.15rem;
    font-family: var(--v360-font-title);
    font-size: 0.8125rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--v360-color-blue);
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-bottom: 1rem;
    line-height: 1.25;
}

.v360-eyebrow::before,
.v360-badge::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3.5px;
    height: 100%;
    min-height: 16px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--v360-color-blue) 0%, #06b6d4 100%);
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.45);
}

.v360-eyebrow.dark,
.v360-badge.dark,
.v360-section-dark .v360-eyebrow,
.v360-section-dark .v360-badge {
    color: #38bdf8;
}

.v360-eyebrow.dark::before,
.v360-badge.dark::before,
.v360-section-dark .v360-eyebrow::before,
.v360-section-dark .v360-badge::before {
    background: linear-gradient(180deg, #38bdf8 0%, #10b981 100%);
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.6);
}

.v360-eyebrow.green,
.v360-badge-green {
    color: #059669 !important;
}

.v360-eyebrow.green::before,
.v360-badge-green::before {
    background: linear-gradient(180deg, #10b981 0%, #059669 100%) !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.4) !important;
}

.v360-eyebrow.orange,
.v360-badge-orange {
    color: #d97706 !important;
}

.v360-eyebrow.orange::before,
.v360-badge-orange::before {
    background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%) !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.4) !important;
}