/* =========================================================
   YHE UTILITIES — SPRINT 15.2
   Helpers visuales reutilizables
   ========================================================= */

.yhe-section { padding: clamp(2.5rem, 6vw, 5rem) 0; }
.yhe-section-sm { padding: clamp(1.75rem, 4vw, 3rem) 0; }
.yhe-soft-bg { background: var(--yhe-surface-soft) !important; }
.yhe-brand-bg { background: var(--yhe-bg) !important; }
.yhe-dark-bg { background: var(--yhe-dark) !important; color: #fff !important; }
.yhe-green-bg { background: var(--yhe-surface-green) !important; }
.yhe-accent-bg { background: var(--yhe-accent) !important; color: var(--yhe-dark) !important; }

.yhe-text-dark { color: var(--yhe-dark) !important; }
.yhe-text-soft { color: var(--yhe-text-soft) !important; }
.yhe-text-green { color: var(--yhe-green) !important; }
.yhe-text-blue { color: var(--yhe-blue) !important; }

.yhe-rounded-sm { border-radius: var(--yhe-radius-sm) !important; }
.yhe-rounded-md { border-radius: var(--yhe-radius-md) !important; }
.yhe-rounded-lg { border-radius: var(--yhe-radius-lg) !important; }
.yhe-rounded-xl { border-radius: var(--yhe-radius-xl) !important; }

.yhe-shadow-sm { box-shadow: var(--yhe-shadow-sm) !important; }
.yhe-shadow { box-shadow: var(--yhe-shadow-md) !important; }
.yhe-shadow-lg { box-shadow: var(--yhe-shadow-lg) !important; }

.yhe-lift { transition: transform var(--yhe-transition), box-shadow var(--yhe-transition); }
.yhe-lift:hover { transform: translateY(-2px); box-shadow: var(--yhe-shadow-md) !important; }

.yhe-kicker {
    color: var(--yhe-green) !important;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .10em;
    font-size: .78rem;
}

.yhe-page-shell {
    background:
        radial-gradient(circle at top left, rgba(95,160,129,.16), transparent 34rem),
        linear-gradient(180deg, var(--yhe-bg) 0%, #fff 62%, var(--yhe-surface-soft) 100%);
}

.yhe-wellness-surface {
    background:
        linear-gradient(135deg, rgba(245,239,230,.92), rgba(255,255,255,.88)),
        radial-gradient(circle at top right, rgba(231,254,65,.22), transparent 24rem);
    border: 1px solid var(--yhe-border);
    border-radius: var(--yhe-radius-xl);
    box-shadow: var(--yhe-shadow-sm);
}

@media (max-width: 767.98px) {
    .container,
    .yhe-admin-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .display-4 { font-size: 2.25rem; }
    .display-5 { font-size: 2rem; }
}