.exf-course-title-wrapper {
    display: block;
    margin-bottom: 20px;
    font-weight: 800;
    line-height: 1.1;
    white-space: normal;
    word-break: normal;
    max-width: 100%;
}

/* Tipografias */
/* Tipografias */
.exf-font-title {
    font-family: 'Outfit', var(--wp--preset--font-family--heading, sans-serif) !important;
    font-weight: 800 !important;
}
.exf-font-subtitle {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, var(--wp--preset--font-family--body, sans-serif) !important;
    font-weight: 500 !important;
}

/* Efecto 1: Doble Color (Bicolor) */
.exf-effect-bicolor .exf-title-part-1 {
    /* Color principal aplicado inline */
}
.exf-effect-bicolor .exf-title-part-2 {
    /* Color secundario aplicado inline */
}

/* Efecto 2: Degradado Moderno (Gradient) */
.exf-effect-gradient {
    /* Los colores se insertan via estilo en linea usando CSS variables */
    background: linear-gradient(90deg, var(--exf-main-color), var(--exf-sec-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Efecto 3: Subrayado Rotulador (Highlighter) */
.exf-effect-highlighter {
    position: relative;
    display: inline;
}
.exf-effect-highlighter::after {
    content: '';
    position: absolute;
    bottom: 5%;
    left: -2%;
    width: 104%;
    height: 35%;
    background-color: var(--exf-sec-color);
    z-index: -1;
    opacity: 0.6;
    border-radius: 4px;
    transform: rotate(-1deg);
}

/* Efecto 4: Sombra Brutalista 3D (Hard Shadow) */
.exf-effect-3d-shadow {
    /* Sombra dura usando var(--exf-sec-color) */
    text-shadow: 4px 4px 0px var(--exf-sec-color);
}

/* Efecto 5: Typewriter (Aparición de letras) */
.exf-effect-typewriter {
    overflow: hidden; /* Oculta el texto hasta que aparece */
    white-space: nowrap; /* Evita saltos de linea durante animacion */
    margin: 0 auto;
    letter-spacing: normal;
    animation: 
      typing 2s steps(40, end),
      blink-caret .75s step-end infinite;
    border-right: .15em solid var(--exf-sec-color); /* El cursor */
    max-width: max-content;
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: var(--exf-sec-color); }
}

/* Para typewriter multiline, usamos un truco de opacity si no cabe en una linea */
@media (max-width: 768px) {
    .exf-effect-typewriter {
        white-space: normal;
        animation: fadein 1.5s ease-in-out;
        border-right: none;
    }
}

@keyframes fadein {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}