/**
 * 2PX Elementor Suite — Heading Widget
 * BEM Methodology
 */

/* ── Container ──────────────────────────────────────────────────────────────── */
.twopx-heading {
    display: flex;
    flex-direction: column;
}

.twopx-heading * {
    box-sizing: border-box;
}

/* ── Eyebrow wrapper ────────────────────────────────────────────────────────── */
.twopx-heading__eyebrow {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

/* Cuando el layout es "line-after" la línea ocupa el espacio restante */
.twopx-heading__eyebrow--line-after {
    width: 100%;
}

/* ── Línea decorativa ───────────────────────────────────────────────────────── */
.twopx-heading__eyebrow-line {
    flex: 1 1 0%;
    height: 1px;
    background-color: #cccccc;
    display: block;
}

/* ── Subtítulo ──────────────────────────────────────────────────────────────── */
.twopx-heading__subtitle {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.4;
    flex-shrink: 0;
}

/* ── Título ─────────────────────────────────────────────────────────────────── */
.twopx-heading__title {
    margin: 0 0 20px 0;
    line-height: 1.15;
    font-weight: 800;
}

/* Reset heading tags to avoid browser defaults disrupting layout */
.twopx-heading__title,
.twopx-heading__subtitle {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Descripción ────────────────────────────────────────────────────────────── */
.twopx-heading__description {
    margin: 0;
    line-height: 1.7;
}

.twopx-heading__description p {
    margin: 0 0 1em 0;
}

.twopx-heading__description p:last-child {
    margin-bottom: 0;
}

/* ── Alignment helpers: when description has max-width + centered text ──────── */
.twopx-heading[style*="text-align: center"] .twopx-heading__description,
.twopx-heading__description[style*="text-align: center"] {
    margin-left: auto;
    margin-right: auto;
}

.twopx-heading[style*="text-align: right"] .twopx-heading__description,
.twopx-heading__description[style*="text-align: right"] {
    margin-left: auto;
    margin-right: 0;
}