/* ==========================================================================
   CW Título Signature — SD Clinic
   Semantic heading system. No JavaScript, no hidden/duplicated SEO text.
   ========================================================================== */

.cw-sd-title {
    --cw-title-color: var(--cw-sd-text, #253536);
    --cw-title-eyebrow: var(--cw-sd-primary, #4DA49D);
    --cw-title-subtitle: color-mix(in srgb, var(--cw-sd-text, #253536) 78%, transparent);
    --cw-title-accent: var(--cw-sd-primary, #4DA49D);
    --cw-title-highlight-text: inherit;
    --cw-title-surface: color-mix(in srgb, var(--cw-sd-primary, #4DA49D) 14%, transparent);
    --cw-title-highlight-radius: 10px;
    --cw-title-gap-top: 18px;
    --cw-title-gap-bottom: 22px;
    --cw-title-decor-scale: 1;
    --cw-title-decor-opacity: .72;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    margin-left: 0;
    margin-right: auto;
    color: var(--cw-title-color);
    isolation: isolate;
}

.cw-sd-title,
.cw-sd-title *,
.cw-sd-title *::before,
.cw-sd-title *::after {
    box-sizing: border-box;
}

.cw-sd-title__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 var(--cw-title-gap-top);
    color: var(--cw-title-eyebrow);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.cw-sd-title__eyebrow-mark {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border: 1px solid currentColor;
    border-radius: 50%;
}

.cw-sd-title__eyebrow-mark::after {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: inherit;
    background: currentColor;
    opacity: .55;
}

.cw-sd-title__heading {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--cw-title-color) !important;
    font-size: clamp(42px, 4.15vw, 72px);
    font-weight: 650;
    line-height: .99;
    letter-spacing: -.045em;
    text-wrap: balance;
}


.cw-sd-title__highlight {
    position: relative;
    z-index: 0;
    display: inline;
    color: var(--cw-title-highlight-text);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* Sweep: refined highlight integrated behind the baseline, not a marker stripe. */
.cw-sd-title--highlight-sweep .cw-sd-title__highlight {
    padding: 0 .055em .015em;
    background:
        linear-gradient(
            180deg,
            transparent 0 66%,
            color-mix(in srgb, var(--cw-title-accent) 62%, transparent) 66% 91%,
            transparent 91% 100%
        );
}

.cw-sd-title--highlight-underline .cw-sd-title__highlight {
    text-decoration-line: underline;
    text-decoration-color: var(--cw-title-accent);
    text-decoration-thickness: .065em;
    text-underline-offset: .12em;
    text-decoration-skip-ink: none;
}

.cw-sd-title--highlight-accent .cw-sd-title__highlight {
    color: var(--cw-title-accent) !important;
}

.cw-sd-title--highlight-capsule .cw-sd-title__highlight {
    padding: .025em .18em .07em;
    border-radius: var(--cw-title-highlight-radius);
    background: var(--cw-title-surface);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cw-title-accent) 17%, transparent);
}

.cw-sd-title--highlight-outline .cw-sd-title__highlight {
    color: transparent !important;
    -webkit-text-stroke: 1.35px var(--cw-title-accent);
    text-stroke: 1.35px var(--cw-title-accent);
}

.cw-sd-title--highlight-none .cw-sd-title__highlight {
    color: inherit;
}

/* Multiple highlights can coexist inside one semantic heading. */
.cw-sd-title__highlight--sweep {
    padding: 0 .055em .015em;
    background: linear-gradient(180deg, transparent 0 66%, color-mix(in srgb, var(--cw-title-accent) 62%, transparent) 66% 91%, transparent 91% 100%);
}

.cw-sd-title__highlight--underline {
    text-decoration-line: underline;
    text-decoration-color: var(--cw-title-accent);
    text-decoration-thickness: .065em;
    text-underline-offset: .12em;
    text-decoration-skip-ink: none;
}

.cw-sd-title__highlight--accent {
    color: var(--cw-title-accent) !important;
}

.cw-sd-title__highlight--capsule {
    padding: .025em .18em .07em;
    border-radius: var(--cw-title-highlight-radius);
    background: var(--cw-title-surface);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cw-title-accent) 17%, transparent);
}

.cw-sd-title__highlight--outline {
    color: transparent !important;
    -webkit-text-stroke: 1.35px var(--cw-title-accent);
    text-stroke: 1.35px var(--cw-title-accent);
}

.cw-sd-title__subtitle {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: var(--cw-title-gap-bottom) 0 0 !important;
    padding: 0 !important;
    color: var(--cw-title-subtitle) !important;
    font-size: clamp(16px, 1.2vw, 19px);
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: -.012em;
}

.cw-sd-title__subtitle > :first-child { margin-top: 0 !important; }
.cw-sd-title__subtitle > :last-child { margin-bottom: 0 !important; }
.cw-sd-title__subtitle p {
    margin: 0 0 .72em;
    color: inherit !important;
    font: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}
.cw-sd-title__subtitle strong,
.cw-sd-title__subtitle b {
    color: inherit;
    font-weight: 700;
}
.cw-sd-title__subtitle em,
.cw-sd-title__subtitle i {
    font-style: italic;
}
.cw-sd-title__subtitle a {
    color: var(--cw-title-accent) !important;
    font-weight: 600;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
    text-decoration-color: color-mix(in srgb, var(--cw-title-accent) 55%, transparent);
    transition: text-decoration-color .22s ease, color .22s ease;
}
.cw-sd-title__subtitle a:hover,
.cw-sd-title__subtitle a:focus-visible {
    color: var(--cw-title-accent) !important;
    text-decoration-color: currentColor;
}


/* --------------------------------------------------------------------------
   Lists inside the support text
   Elementor's WYSIWYG can output semantic UL/OL structures. They deliberately
   receive their own clinical rhythm instead of inheriting browser/Elementor
   bullets, so long treatment explanations remain easy to scan.
   -------------------------------------------------------------------------- */
.cw-sd-title__subtitle ul,
.cw-sd-title__subtitle ol {
    width: 100%;
    margin: .9em 0 1.05em !important;
    padding: 0 !important;
    list-style: none !important;
    text-align: left;
}

.cw-sd-title__subtitle > ul:first-child,
.cw-sd-title__subtitle > ol:first-child {
    margin-top: 0 !important;
}

.cw-sd-title__subtitle > ul:last-child,
.cw-sd-title__subtitle > ol:last-child {
    margin-bottom: 0 !important;
}

.cw-sd-title__subtitle li {
    position: relative;
    display: block;
    margin: 0 !important;
    color: inherit !important;
    font: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}

.cw-sd-title__subtitle li + li {
    margin-top: .72em !important;
}

/* Unordered list: small clinical target, visible without feeling decorative. */
.cw-sd-title__subtitle ul > li {
    padding-left: 1.55em;
}

.cw-sd-title__subtitle ul > li::before {
    content: '';
    position: absolute;
    left: .08em;
    top: .69em;
    width: .48em;
    height: .48em;
    min-width: 6px;
    min-height: 6px;
    max-width: 8px;
    max-height: 8px;
    border: 1.5px solid color-mix(in srgb, var(--cw-title-accent) 82%, transparent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--cw-title-accent) 16%, transparent);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--cw-title-accent) 10%, transparent);
    transform: translateY(-50%);
}

/* Ordered list: compact numbered marker using the same visual language. */
.cw-sd-title__subtitle ol {
    counter-reset: cw-sd-title-list;
}

.cw-sd-title__subtitle ol > li {
    min-height: 1.65em;
    padding-left: 2.2em;
    counter-increment: cw-sd-title-list;
}

.cw-sd-title__subtitle ol > li::before {
    content: counter(cw-sd-title-list);
    position: absolute;
    left: 0;
    top: .05em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.55em;
    height: 1.55em;
    border: 1px solid color-mix(in srgb, var(--cw-title-accent) 34%, transparent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--cw-title-accent) 9%, transparent);
    color: var(--cw-title-accent);
    font-size: .78em;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
}

/* Nested lists stay readable and do not become visually heavy. */
.cw-sd-title__subtitle li > ul,
.cw-sd-title__subtitle li > ol {
    margin: .58em 0 .15em !important;
    padding-left: .2em !important;
}

.cw-sd-title__subtitle ul ul > li::before {
    background: transparent;
    border-color: color-mix(in srgb, var(--cw-title-accent) 62%, transparent);
    transform: translateY(-50%) scale(.78);
}

.cw-sd-title__subtitle li p {
    margin: 0 !important;
}

.cw-sd-title__subtitle li p + p {
    margin-top: .45em !important;
}

/* --------------------------------------------------------------------------
   Ritmo clínico — movimiento expresado con tipografía y lectura, no con figuras.
   -------------------------------------------------------------------------- */
.cw-sd-title--motion.cw-sd-title--decorated .cw-sd-title__eyebrow-mark {
    width: 18px;
    height: 3px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--cw-title-accent) 0 58%, color-mix(in srgb, var(--cw-title-accent) 28%, transparent) 58% 100%);
}

.cw-sd-title--motion .cw-sd-title__eyebrow-mark::after { display: none; }

.cw-sd-title--motion.cw-sd-title--decorated .cw-sd-title__subtitle {
    padding-left: clamp(14px, 1.5vw, 22px) !important;
    border-left: 2px solid color-mix(in srgb, var(--cw-title-accent) 72%, transparent);
}

/* --------------------------------------------------------------------------
   Editorial amplio — aire, contraste tipográfico y una separación editorial.
   -------------------------------------------------------------------------- */
.cw-sd-title--editorial .cw-sd-title__eyebrow-mark {
    width: 6px;
    height: 6px;
    border: 0;
    border-radius: 50%;
    background: var(--cw-title-accent);
}

.cw-sd-title--editorial .cw-sd-title__eyebrow-mark::after { display: none; }

.cw-sd-title--editorial .cw-sd-title__heading {
    font-weight: 600;
    line-height: 1.015;
    letter-spacing: -.05em;
}

.cw-sd-title--editorial.cw-sd-title--decorated .cw-sd-title__subtitle {
    margin-top: clamp(20px, 2.2vw, 30px) !important;
    padding-top: clamp(16px, 1.8vw, 22px) !important;
    border-top: 1px solid color-mix(in srgb, var(--cw-title-color) 14%, transparent);
}

/* --------------------------------------------------------------------------
   Precisión tipográfica — un eje fino ordena el bloque sin encerrarlo.
   -------------------------------------------------------------------------- */
.cw-sd-title--frame.cw-sd-title--decorated {
    padding-left: clamp(18px, 2vw, 28px);
    box-shadow: inset 1px 0 0 color-mix(in srgb, var(--cw-title-color) 12%, transparent);
}

.cw-sd-title--frame.cw-sd-title--decorated::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: clamp(44px, 5.5vw, 72px);
    border-radius: 999px;
    background: var(--cw-title-accent);
    opacity: calc(var(--cw-title-decor-opacity) * .9);
}

.cw-sd-title--frame.cw-sd-title--decorated::after { display: none; }

.cw-sd-title--frame .cw-sd-title__eyebrow-mark {
    width: 7px;
    height: 7px;
    border-radius: 2px;
    border-color: color-mix(in srgb, var(--cw-title-accent) 74%, transparent);
    transform: rotate(45deg);
}

.cw-sd-title--frame .cw-sd-title__eyebrow-mark::after {
    inset: 2px;
    background: var(--cw-title-accent);
}

/* --------------------------------------------------------------------------
   Minimal clinical — almost invisible geometry, ideal inside dense pages.
   -------------------------------------------------------------------------- */
.cw-sd-title--minimal.cw-sd-title--decorated .cw-sd-title__eyebrow::after {
    content: '';
    display: inline-block;
    width: clamp(22px, 3vw, 42px);
    height: 1px;
    margin-left: 4px;
    background: color-mix(in srgb, var(--cw-title-accent) 55%, transparent);
}


/* --------------------------------------------------------------------------
   Panel clínico — pieza editorial autónoma para bloques sin imagen.
   La cabecera se resuelve en horizontal y la lista usa todo el ancho debajo,
   evitando columnas muertas y densidad innecesaria.
   -------------------------------------------------------------------------- */
.cw-sd-title--panel {
    --cw-title-panel-bg: var(--cw-sd-primary, #4DA49D);
    --cw-title-panel-border: rgba(255, 255, 255, .16);
    --cw-title-panel-radius: 26px;
    --cw-title-color: #fff;
    --cw-title-eyebrow: rgba(255, 255, 255, .72);
    --cw-title-subtitle: rgba(255, 255, 255, .88);
    --cw-title-accent: #dcf7f3;
    --cw-title-highlight-text: #e6faf7;
    --cw-title-surface: rgba(255, 255, 255, .08);
    position: relative;
    width: 100%;
    padding: clamp(36px, 4.2vw, 58px);
    overflow: hidden;
    border-radius: var(--cw-title-panel-radius);
    background:
        radial-gradient(circle at 92% 4%, rgba(255,255,255,.12), transparent 27%),
        linear-gradient(135deg, color-mix(in srgb, var(--cw-title-panel-bg) 94%, #163e3d 6%) 0%, var(--cw-title-panel-bg) 58%, color-mix(in srgb, var(--cw-title-panel-bg) 92%, #ffffff 8%) 100%);
    box-shadow:
        inset 0 0 0 1px var(--cw-title-panel-border),
        0 20px 50px rgba(24, 69, 68, .07);
    color: var(--cw-title-color);
    text-align: left !important;
}

.cw-sd-title--panel.cw-sd-title--decorated::before,
.cw-sd-title--panel.cw-sd-title--decorated::after {
    display: none;
}

.cw-sd-title--panel .cw-sd-title__panel-header {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
    gap: clamp(42px, 6vw, 82px);
    align-items: end;
    padding-bottom: clamp(28px, 3vw, 38px);
    border-bottom: 1px solid rgba(255, 255, 255, .18);
}

.cw-sd-title--panel .cw-sd-title__panel-heading {
    min-width: 0;
}

.cw-sd-title--panel .cw-sd-title__eyebrow {
    margin: 0 0 14px !important;
    color: var(--cw-title-eyebrow);
    text-align: left !important;
}

.cw-sd-title--panel .cw-sd-title__eyebrow-mark {
    width: 18px;
    height: 2px;
    border: 0;
    border-radius: 999px;
    background: currentColor;
    opacity: .8;
}

.cw-sd-title--panel .cw-sd-title__eyebrow-mark::after {
    display: none;
}

.cw-sd-title--panel .cw-sd-title__heading {
    max-width: 650px !important;
    margin: 0 !important;
    color: var(--cw-title-color) !important;
    font-size: clamp(38px, 3.6vw, 56px);
    font-weight: 650;
    line-height: 1.01;
    letter-spacing: -.045em;
    text-align: left !important;
    text-wrap: balance;
}

.cw-sd-title--panel .cw-sd-title__highlight--accent,
.cw-sd-title--panel.cw-sd-title--highlight-accent .cw-sd-title__highlight {
    color: var(--cw-title-accent) !important;
}

.cw-sd-title--panel .cw-sd-title__subtitle {
    max-width: none !important;
    margin: 0 !important;
    color: var(--cw-title-subtitle) !important;
    font-size: clamp(15.5px, 1.02vw, 17px);
    line-height: 1.6;
    text-align: left !important;
}

.cw-sd-title--panel .cw-sd-title__panel-intro {
    align-self: end;
    max-width: 560px !important;
}

.cw-sd-title--panel .cw-sd-title__panel-intro > p {
    margin: 0 !important;
    color: var(--cw-title-subtitle) !important;
}

.cw-sd-title--panel .cw-sd-title__panel-body {
    position: relative;
    z-index: 2;
    margin-top: clamp(24px, 2.7vw, 34px) !important;
}

.cw-sd-title--panel .cw-sd-title__panel-body > p {
    margin: 0 0 20px !important;
    color: var(--cw-title-subtitle) !important;
}

.cw-sd-title--panel .cw-sd-title__subtitle a {
    color: #fff !important;
    text-decoration-color: rgba(255,255,255,.52);
}

.cw-sd-title--panel .cw-sd-title__panel-body > ul,
.cw-sd-title--panel .cw-sd-title__panel-body > ol {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 clamp(24px, 2.6vw, 38px);
    margin: 0 !important;
    padding: 0 !important;
}

.cw-sd-title--panel-list-grid2 .cw-sd-title__panel-body > ul,
.cw-sd-title--panel-list-grid2 .cw-sd-title__panel-body > ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cw-sd-title--panel-list-stacked .cw-sd-title__panel-body > ul,
.cw-sd-title--panel-list-stacked .cw-sd-title__panel-body > ol {
    grid-template-columns: minmax(0, 1fr);
}

.cw-sd-title--panel .cw-sd-title__panel-body > ul > li,
.cw-sd-title--panel .cw-sd-title__panel-body > ol > li {
    position: relative;
    min-width: 0;
    margin: 0 !important;
    padding: 22px 8px 24px 30px;
    border-top: 1px solid rgba(255, 255, 255, .18);
    color: var(--cw-title-subtitle) !important;
}

.cw-sd-title--panel .cw-sd-title__panel-body > ul > li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 28px;
    width: 16px;
    height: 2px;
    min-width: 16px;
    min-height: 2px;
    max-width: 16px;
    max-height: 2px;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    box-shadow: none;
}

.cw-sd-title--panel .cw-sd-title__panel-body > ol {
    counter-reset: cw-panel-list;
}

.cw-sd-title--panel .cw-sd-title__panel-body > ol > li {
    counter-increment: cw-panel-list;
    padding-left: 42px;
}

.cw-sd-title--panel .cw-sd-title__panel-body > ol > li::before {
    content: counter(cw-panel-list, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 20px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255,255,255,.30);
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.88);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.cw-sd-title--panel .cw-sd-title__panel-body li strong,
.cw-sd-title--panel .cw-sd-title__panel-body li b {
    display: block;
    margin: 0 0 7px;
    color: #fff;
    font-size: 1.04em;
    font-weight: 700;
    line-height: 1.34;
}

.cw-sd-title--panel .cw-sd-title__panel-body li > ul,
.cw-sd-title--panel .cw-sd-title__panel-body li > ol {
    display: block;
    margin-top: 8px !important;
    padding: 0 !important;
}

.cw-sd-title--panel .cw-sd-title__panel-body li > ul > li,
.cw-sd-title--panel .cw-sd-title__panel-body li > ol > li {
    margin: 0 !important;
    padding-top: 5px;
    padding-bottom: 5px;
    border: 0;
}

@media (max-width: 1024px) {
    .cw-sd-title--panel {
        padding: clamp(30px, 4vw, 42px);
    }

    .cw-sd-title--panel .cw-sd-title__panel-header {
        grid-template-columns: minmax(0, 1fr) minmax(280px, .9fr);
        gap: 34px;
    }

    .cw-sd-title--panel .cw-sd-title__heading {
        font-size: clamp(34px, 4.4vw, 46px);
    }

    .cw-sd-title--panel .cw-sd-title__panel-body > ul,
    .cw-sd-title--panel .cw-sd-title__panel-body > ol {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cw-sd-title--panel-list-stacked .cw-sd-title__panel-body > ul,
    .cw-sd-title--panel-list-stacked .cw-sd-title__panel-body > ol {
        grid-template-columns: minmax(0, 1fr);
    }

    .cw-sd-title__heading {
        font-size: clamp(38px, 6vw, 58px);
        line-height: 1.01;
    }

}

@media (max-width: 767px) {
    .cw-sd-title--panel,
    .cw-sd-title--panel.cw-sd-title--no-eyebrow {
        padding: 24px 22px 26px;
        border-radius: min(var(--cw-title-panel-radius), 22px);
    }

    .cw-sd-title--panel .cw-sd-title__panel-header {
        display: block;
        padding-bottom: 22px;
    }

    .cw-sd-title--panel .cw-sd-title__eyebrow {
        margin-bottom: 12px !important;
    }

    .cw-sd-title--panel .cw-sd-title__heading {
        font-size: clamp(30px, 9vw, 40px);
        line-height: 1.03;
    }

    .cw-sd-title--panel .cw-sd-title__panel-intro {
        margin-top: 18px !important;
        font-size: 15.5px;
        line-height: 1.56;
    }

    .cw-sd-title--panel .cw-sd-title__panel-body {
        margin-top: 8px !important;
        font-size: 15.5px;
        line-height: 1.56;
    }

    .cw-sd-title--panel .cw-sd-title__panel-body > ul,
    .cw-sd-title--panel .cw-sd-title__panel-body > ol,
    .cw-sd-title--panel-list-grid2 .cw-sd-title__panel-body > ul,
    .cw-sd-title--panel-list-grid2 .cw-sd-title__panel-body > ol {
        grid-template-columns: minmax(0, 1fr);
    }

    .cw-sd-title--panel .cw-sd-title__panel-body > ul > li,
    .cw-sd-title--panel .cw-sd-title__panel-body > ol > li {
        padding-top: 17px;
        padding-bottom: 18px;
    }


    .cw-sd-title {
        --cw-title-gap-top: 14px;
        --cw-title-gap-bottom: 18px;
    }

    .cw-sd-title__eyebrow {
        gap: 8px;
        font-size: 10px;
        letter-spacing: .14em;
    }

    .cw-sd-title__heading {
        font-size: clamp(34px, 10.5vw, 48px);
        line-height: 1.015;
        letter-spacing: -.04em;
        text-wrap: pretty;
    }

    .cw-sd-title__subtitle {
        font-size: 16px;
        line-height: 1.58;
    }


    .cw-sd-title__subtitle li + li {
        margin-top: .66em !important;
    }

    .cw-sd-title__subtitle ul > li {
        padding-left: 1.4em;
    }

    .cw-sd-title__subtitle ol > li {
        padding-left: 2.05em;
    }

    .cw-sd-title--frame.cw-sd-title--decorated {
        padding-left: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cw-sd-title *,
    .cw-sd-title *::before,
    .cw-sd-title *::after {
        transition: none !important;
        animation: none !important;
    }
}

/* ========================================================================== 
   v1.1.96 · Panel clínico — composición SD Clinic
   Mantiene la superficie turquesa del modo original, pero elimina la lectura
   de tabla: cabecera agrupada arriba, lista abierta, sin líneas horizontales
   y con un único gesto vertical por elemento.
   ========================================================================== */
.cw-sd-title--panel {
    --cw-title-panel-bg: var(--cw-sd-primary, #4DA49D);
    --cw-title-panel-border: rgba(255,255,255,.16);
    --cw-title-color: #fff;
    --cw-title-eyebrow: rgba(255,255,255,.72);
    --cw-title-subtitle: rgba(255,255,255,.88);
    --cw-title-accent: #dff8f4;
    --cw-title-highlight-text: #e8faf7;
    --cw-title-surface: rgba(255,255,255,.08);
    padding: clamp(38px, 4.3vw, 60px);
    border: 0;
    border-radius: var(--cw-title-panel-radius);
    background:
        radial-gradient(circle at 92% 6%, rgba(255,255,255,.11), transparent 28%),
        linear-gradient(135deg,
            color-mix(in srgb, var(--cw-title-panel-bg) 94%, #143c3b 6%) 0%,
            var(--cw-title-panel-bg) 60%,
            color-mix(in srgb, var(--cw-title-panel-bg) 92%, #fff 8%) 100%);
    box-shadow:
        inset 0 0 0 1px var(--cw-title-panel-border),
        0 20px 48px rgba(24,69,68,.07);
    color: var(--cw-title-color);
}

/* Cabecera: título e introducción forman una sola lectura, sin columnas enfrentadas. */
.cw-sd-title--panel .cw-sd-title__panel-header {
    display: block;
    padding: 0;
    border: 0;
}

.cw-sd-title--panel .cw-sd-title__panel-heading {
    max-width: 900px;
}

.cw-sd-title--panel .cw-sd-title__eyebrow {
    margin: 0 0 13px !important;
    color: var(--cw-title-eyebrow) !important;
    text-align: left !important;
}

.cw-sd-title--panel .cw-sd-title__eyebrow-mark {
    width: 20px;
    height: 2px;
    border: 0;
    border-radius: 999px;
    background: currentColor;
    opacity: .82;
}

.cw-sd-title--panel .cw-sd-title__heading {
    max-width: 920px !important;
    margin: 0 !important;
    color: var(--cw-title-color) !important;
    font-size: clamp(40px, 3.9vw, 60px);
    font-weight: 650;
    line-height: 1.015;
    letter-spacing: -.045em;
    text-align: left !important;
    text-wrap: balance;
}

.cw-sd-title--panel .cw-sd-title__highlight--accent,
.cw-sd-title--panel.cw-sd-title--highlight-accent .cw-sd-title__highlight {
    color: var(--cw-title-accent) !important;
}

.cw-sd-title--panel .cw-sd-title__subtitle {
    color: var(--cw-title-subtitle) !important;
    font-size: clamp(15.5px, 1vw, 17px);
    line-height: 1.62;
    text-align: left !important;
}

.cw-sd-title--panel .cw-sd-title__panel-intro {
    max-width: 940px !important;
    margin: clamp(16px, 1.8vw, 22px) 0 0 !important;
}

.cw-sd-title--panel .cw-sd-title__panel-intro > p {
    margin: 0 !important;
    color: var(--cw-title-subtitle) !important;
}

.cw-sd-title--panel .cw-sd-title__subtitle a {
    color: #fff !important;
    text-decoration-color: rgba(255,255,255,.48);
}

/* La lista se separa de la cabecera por aire, no por una raya de extremo a extremo. */
.cw-sd-title--panel .cw-sd-title__panel-body {
    margin-top: clamp(32px, 3.4vw, 46px) !important;
}

.cw-sd-title--panel .cw-sd-title__panel-body > p {
    max-width: 940px;
    margin: 0 0 24px !important;
    color: var(--cw-title-subtitle) !important;
}

/* 3 columnas es el ritmo recomendado para 6 beneficios; el usuario puede bajarlo. */
.cw-sd-title--panel .cw-sd-title__panel-body > ul,
.cw-sd-title--panel .cw-sd-title__panel-body > ol {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(34px, 4.2vw, 58px);
    row-gap: clamp(30px, 3.2vw, 42px);
    margin: 0 !important;
    padding: 0 !important;
}

.cw-sd-title--panel-list-grid2 .cw-sd-title__panel-body > ul,
.cw-sd-title--panel-list-grid2 .cw-sd-title__panel-body > ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(44px, 5vw, 72px);
}

.cw-sd-title--panel-list-stacked .cw-sd-title__panel-body > ul,
.cw-sd-title--panel-list-stacked .cw-sd-title__panel-body > ol {
    grid-template-columns: minmax(0, 1fr);
    max-width: 940px;
}

/* Sin tarjetas ni separadores: marcador circular clínico y un eje de texto estable. */
.cw-sd-title--panel .cw-sd-title__panel-body > ul > li,
.cw-sd-title--panel .cw-sd-title__panel-body > ol > li {
    position: relative;
    min-width: 0;
    margin: 0 !important;
    padding: 0 0 0 25px;
    border: 0 !important;
    color: var(--cw-title-subtitle) !important;
    align-self: start;
}

/* El círculo se alinea con la primera línea del título, no con la caja completa. */
.cw-sd-title--panel .cw-sd-title__panel-body > ul > li::before {
    content: '';
    position: absolute;
    left: 1px;
    top: .70em;
    width: 7px;
    height: 7px;
    min-width: 7px;
    min-height: 7px;
    max-width: 7px;
    max-height: 7px;
    border: 1.5px solid rgba(232,250,247,.88);
    border-radius: 50%;
    background: rgba(232,250,247,.10);
    box-shadow: inset 0 0 0 2px rgba(232,250,247,.06);
    transform: translateY(-50%);
}

.cw-sd-title--panel .cw-sd-title__panel-body > ol {
    counter-reset: cw-panel-list;
}

.cw-sd-title--panel .cw-sd-title__panel-body > ol > li {
    counter-increment: cw-panel-list;
    padding-left: 42px;
}

.cw-sd-title--panel .cw-sd-title__panel-body > ol > li::before {
    content: counter(cw-panel-list, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: -1px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 999px;
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.9);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.cw-sd-title--panel .cw-sd-title__panel-body li strong,
.cw-sd-title--panel .cw-sd-title__panel-body li b {
    display: block;
    margin: 0 0 4px;
    color: #fff !important;
    font-size: 1.04em;
    font-weight: 700;
    line-height: 1.32;
    text-wrap: balance;
}

/* TinyMCE puede insertar un <br> inmediatamente después del título en negrita.
   Como strong/b ya son block, ese salto produciría una línea vacía artificial. */
.cw-sd-title--panel .cw-sd-title__panel-body li > strong + br,
.cw-sd-title--panel .cw-sd-title__panel-body li > b + br {
    display: none;
}

.cw-sd-title--panel .cw-sd-title__panel-body li > p {
    margin: 4px 0 0 !important;
}

.cw-sd-title--panel .cw-sd-title__panel-body li > ul,
.cw-sd-title--panel .cw-sd-title__panel-body li > ol {
    display: block;
    margin-top: 8px !important;
    padding: 0 !important;
}

.cw-sd-title--panel .cw-sd-title__panel-body li > ul > li,
.cw-sd-title--panel .cw-sd-title__panel-body li > ol > li {
    margin: 0 !important;
    padding-top: 4px;
    padding-bottom: 4px;
    border: 0 !important;
}

/* En modo oscuro la pieza sigue siendo turquesa: es una pieza de marca, no una superficie del tema. */
html[data-theme="dark"] .cw-sd-title--panel,
body[data-theme="dark"] .cw-sd-title--panel {
    --cw-title-color: #fff;
    --cw-title-eyebrow: rgba(255,255,255,.72);
    --cw-title-subtitle: rgba(255,255,255,.88);
    --cw-title-accent: #dff8f4;
    background:
        radial-gradient(circle at 92% 6%, rgba(255,255,255,.10), transparent 28%),
        linear-gradient(135deg,
            color-mix(in srgb, var(--cw-title-panel-bg) 90%, #0c2f30 10%) 0%,
            color-mix(in srgb, var(--cw-title-panel-bg) 96%, #123c3d 4%) 60%,
            color-mix(in srgb, var(--cw-title-panel-bg) 88%, #fff 12%) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.14),
        0 20px 50px rgba(0,0,0,.10);
}

@media (max-width: 1024px) {
    .cw-sd-title--panel {
        padding: clamp(32px, 4vw, 44px);
    }

    .cw-sd-title--panel .cw-sd-title__heading {
        font-size: clamp(36px, 5vw, 50px);
    }

    .cw-sd-title--panel .cw-sd-title__panel-body > ul,
    .cw-sd-title--panel .cw-sd-title__panel-body > ol,
    .cw-sd-title--panel-list-grid2 .cw-sd-title__panel-body > ul,
    .cw-sd-title--panel-list-grid2 .cw-sd-title__panel-body > ol {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: clamp(28px, 4vw, 44px);
    }

    .cw-sd-title--panel-list-stacked .cw-sd-title__panel-body > ul,
    .cw-sd-title--panel-list-stacked .cw-sd-title__panel-body > ol {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    .cw-sd-title--panel,
    .cw-sd-title--panel.cw-sd-title--no-eyebrow {
        padding: 26px 22px 28px;
        border-radius: min(var(--cw-title-panel-radius), 22px);
    }

    .cw-sd-title--panel .cw-sd-title__heading {
        font-size: clamp(31px, 9.2vw, 40px);
        line-height: 1.03;
    }

    .cw-sd-title--panel .cw-sd-title__panel-intro {
        margin-top: 15px !important;
        font-size: 15px;
        line-height: 1.56;
    }

    .cw-sd-title--panel .cw-sd-title__panel-body {
        margin-top: 28px !important;
        font-size: 15px;
        line-height: 1.56;
    }

    .cw-sd-title--panel .cw-sd-title__panel-body > ul,
    .cw-sd-title--panel .cw-sd-title__panel-body > ol,
    .cw-sd-title--panel-list-grid2 .cw-sd-title__panel-body > ul,
    .cw-sd-title--panel-list-grid2 .cw-sd-title__panel-body > ol {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 24px;
    }

    .cw-sd-title--panel .cw-sd-title__panel-body > ul > li,
    .cw-sd-title--panel .cw-sd-title__panel-body > ol > li {
        padding-left: 23px;
    }

    .cw-sd-title--panel .cw-sd-title__panel-body > ol > li {
        padding-left: 39px;
    }
}