/**
 * ESTILOS: MK-Breath
 * Metodología: BEM + CSS Variables Locales
 * DESCRIPCIÓN: Sección de respiro con tipografía fluida y degradado atmosférico.
 */

.mk-breath {
    /* Token de Gradiente: Copiá y pegá este valor entre archivos para probar */
    --mk-breath-bg-gradient: radial-gradient(circle at center, #000000 0%, #050505 70%);
    --mk-breath-padding: clamp(6rem, 15vh, 12rem);

    background: var(--mk-breath-bg-gradient);
    
    padding-block: var(--mk-breath-padding);
    display: flex;
    justify-content: center;
    width: 100%;
}
.mk-breath__container {
    width: var(--mk-container-width, 92%);
    max-width: var(--mk-max-width, 1200px);
    margin: 0 auto;
}

.mk-breath__content {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.mk-breath__phrase {
    color: #ffffff;
    font-size: clamp(2rem, 5vw, 3.8rem);
    font-weight: 200;
    text-align: center;
    letter-spacing: -0.04em;
}

.mk-breath__accent {
    color: var(--mk-brand-primary, #00ff88);
    font-weight: 700;
}

.mk-breath__divider {
    width: 50px;
    height: 1px;
    background: var(--mk-divider-color, var(--mk-breath-accent));
    margin: 40px auto 0;
    opacity: 0.4;
}

/* Responsive Mobile First */
@media (max-width: 48rem) {
    .mk-breath { --mk-breath-padding: 80px; }
}