:root {
    --resp-blue-deep: #102a43;
    --resp-blue: #1f4e79;
    --resp-blue-clear: #4a90e2;
    --resp-teal: #50e3c2;
    --resp-gold: #c89b3c;
    --resp-sand: #f5efe1;
}

/* REGLA ULTRA ESPECÍFICA CON MÁXIMA PRIORIDAD - FORZAR ESTILO EXACTO DEL TEMPLATE */
/* Replicar EXACTAMENTE: <h2 class="text-2xl font-bold section-title mb-2"> */
/* AUMENTAR tamaño - el usuario dice que 24px está muy chico */
/* FORZAR color #5D4037 con máxima especificidad - EXACTO DEL TEMPLATE */
/* Esta regla va PRIMERO para tener máxima prioridad */
body .respiraccion-lesson-personalization section.lesson-block:not(.lesson-block--hero_science) h2.lesson-block__title.text-2xl.font-bold.section-title.mb-2,
body .respiraccion-lesson-personalization section.lesson-block:not(.lesson-block--hero_science) h2.lesson-block__title.text-2xl,
body .respiraccion-lesson-personalization section.lesson-block:not(.lesson-block--hero_science) h2.text-2xl.font-bold.section-title,
body .respiraccion-lesson-personalization .lesson-block:not(.lesson-block--hero_science) h2.lesson-block__title.text-2xl,
body .respiraccion-lesson-personalization section.lesson-block h2.lesson-block__title.text-2xl,
body .respiraccion-lesson-personalization section.lesson-block h2.text-2xl.font-bold.section-title,
.respiraccion-lesson-personalization section.lesson-block:not(.lesson-block--hero_science) h2.lesson-block__title.text-2xl.font-bold.section-title.mb-2,
.respiraccion-lesson-personalization section.lesson-block:not(.lesson-block--hero_science) h2.lesson-block__title.text-2xl,
.respiraccion-lesson-personalization section.lesson-block:not(.lesson-block--hero_science) h2.text-2xl.font-bold.section-title,
.respiraccion-lesson-personalization .lesson-block:not(.lesson-block--hero_science) h2.lesson-block__title.text-2xl {
    font-size: 30px !important;
    /* AUMENTADO de 24px - estaba muy chico */
    font-size: 1.875rem !important;
    color: var(--lesson-heading, #5D4037) !important;
    /* section-title color EXACTO del template - FORZAR */
    /* Removed hardcoded override to allow variable to work */
    font-weight: 700 !important;
    /* font-bold EXACTO */
    font-family: 'Montserrat', sans-serif !important;
    /* Font family EXACTO del template */
    letter-spacing: -0.025em !important;
    /* tracking-tight de Tailwind - efecto más compacto */
    text-decoration: none !important;
    /* NO subrayado - igual que el template */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    /* Sombra sutil como el template */
    line-height: 1.5 !important;
    /* Tailwind default */
    margin-bottom: 0.5rem !important;
    /* mb-2 EXACTO */
}

/* REGLA ULTRA ESPECÍFICA PARA TÍTULOS NORMALES - ESTILO EXACTO DEL TEMPLATE */
/* Replicar EXACTAMENTE: <h2 class="text-2xl font-bold section-title mb-2"> */
/* AUMENTAR tamaño - el usuario dice que 24px está muy chico */
/* NO SUBRAYADO - el template solo define .section-title { color: #5D4037; } */
/* Títulos para bloques normales - EXCEPTO hero_science (solo hero_science tiene tamaño diferente) */
section.lesson-block:not(.lesson-block--hero_science) h2.lesson-block__title,
section.lesson-block:not(.lesson-block--hero_science) h2.text-2xl,
section.lesson-block:not(.lesson-block--hero_science) .lesson-block__title.text-2xl,
.lesson-block:not(.lesson-block--hero_science) h2.lesson-block__title,
.lesson-block:not(.lesson-block--hero_science) h2.text-2xl,
.lesson-block:not(.lesson-block--hero_science) .lesson-block__title.text-2xl,
h2.text-2xl.font-bold.section-title {
    color: var(--lesson-heading, #5D4037) !important;
    /* section-title color */
    /* section-title color */
    font-size: 1.875rem !important;
    /* AUMENTADO de 1.5rem (24px) a 30px */
    font-size: 30px !important;
    /* AUMENTADO - estaba muy chico */
    font-weight: 700 !important;
    /* font-bold */
    text-decoration: none !important;
    /* NO subrayado - igual que el template */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    /* Sombra sutil como el template */
    font-family: 'Montserrat', sans-serif !important;
    letter-spacing: -0.025em !important;
    line-height: 1.5 !important;
    /* Tailwind default para text-2xl */
    margin-bottom: 0.5rem !important;
    /* mb-2 */
}

.respiraccion-lesson-personalization {
    --lesson-bg: linear-gradient(135deg, rgba(79, 146, 186, 0.08) 0%, #ffffff 55%);
    --lesson-text: #0f172a;
    --lesson-muted: #475569;
    --lesson-accent: var(--resp-blue);
    --lesson-card: rgba(255, 255, 255, 0.9);
    --lesson-border: rgba(31, 78, 121, 0.12);
    --lesson-heading: var(--resp-blue-deep);
    --lesson-shadow: 0 30px 70px -40px rgba(15, 23, 42, 0.65);

    /* Estilo EXACTO del template: .section-title { color: #5D4037; } */
    /* Estilo EXACTO del template: .section-title { color: #5D4037; } */
    --section-title-color: #5D4037;

    /* REMOVED BASE STYLES to allow block-level overrides to work better */
    /* background: var(--lesson-bg); */
    /* color: var(--lesson-text); */
    /* padding: clamp(1.5rem, 3vw, 2.75rem); */
    /* border-radius: 28px; */
    /* margin: 0 auto clamp(2rem, 4vw, 3rem); */
    /* max-width: min(980px, 92vw); */
    /* box-shadow: var(--lesson-shadow); */
    /* position: relative; */
    /* overflow: hidden; */

    /* Keep generic margin/width for layout structure only */
    margin: 0 auto;
    max-width: 1000px;
    font-family: 'Poppins', sans-serif !important;
}

.respiraccion-lesson-personalization h1 {
    color: var(--lesson-heading);
    font-family: 'Montserrat', sans-serif !important;
    letter-spacing: -0.02em;
    margin-top: 1.8rem;
    margin-bottom: 1rem;
}

/* Excepción para h2 dentro de lesson-blocks - NO aplicar estilos generales */
.respiraccion-lesson-personalization h2:not(.lesson-block__title):not(.text-2xl):not(.section-title) {
    color: var(--lesson-heading);
    font-family: 'Montserrat', sans-serif !important;
    letter-spacing: -0.02em;
    margin-top: 1.8rem;
    margin-bottom: 1rem;
}

/* Estilo EXACTO del template: .section-title { color: #5D4037; } */
/* FORZAR color con máxima especificidad */
.section-title,
h2.section-title,
.lesson-block__title.section-title,
h2.lesson-block__title.section-title,
.text-2xl.font-bold.section-title,
h2.text-2xl.font-bold.section-title {
    color: var(--lesson-heading, #5D4037) !important;
    /* section-title color EXACTO del template - variable para permitir overrides */
    /* Removed hardcoded override to allow variable to work */
}

/* Excepción para h4 dentro de lesson-blocks - NO aplicar márgenes grandes */
.respiraccion-lesson-personalization h4:not(.lesson-block__content-subtitle):not(.lesson-block h4) {
    color: var(--lesson-heading);
    font-family: 'Montserrat', sans-serif !important;
    letter-spacing: -0.02em;
    margin-top: 1.8rem;
    margin-bottom: 1rem;
}

/* Excepción para h3.lesson-block__title - NO aplicar estilos globales, usar estilos específicos abajo */
.respiraccion-lesson-personalization h3:not(.lesson-block__title) {
    color: var(--lesson-heading);
    font-family: 'Montserrat', sans-serif !important;
    letter-spacing: -0.02em;
    margin-top: 1.8rem;
    margin-bottom: 1rem;
}

.respiraccion-lesson-personalization p,
.respiraccion-lesson-personalization li {
    font-family: 'Poppins', sans-serif !important;
    color: var(--lesson-muted);
    line-height: 1.75;
    font-size: clamp(1rem, 0.8vw + 0.9rem, 1.1rem);
}

.respiraccion-lesson-personalization ul,
.respiraccion-lesson-personalization ol {
    padding-left: 1.4rem;
    margin-bottom: 1.4rem;
}

.respiraccion-lesson-personalization .card,
.respiraccion-lesson-personalization .highlight-box,
.respiraccion-lesson-personalization .intro-highlight-block,
.respiraccion-lesson-personalization .quote-reflection,
.respiraccion-lesson-personalization .warning-power-box-v2 {
    background: var(--lesson-card);
    border-radius: 20px;
    border: 1px solid var(--lesson-border);
    padding: clamp(1.25rem, 2.4vw, 2rem);
    box-shadow: 0 20px 50px -35px rgba(15, 23, 42, 0.4);
    margin-bottom: clamp(1.2rem, 2.2vw, 1.8rem);
}

.respiraccion-lesson-personalization .highlight-box,
.respiraccion-lesson-personalization .intro-highlight-block,
.respiraccion-lesson-personalization .quote-reflection {
    border-left: 4px solid var(--lesson-accent);
}

/* Estilo simple para .intro-highlight-block - como estaba antes */
.respiraccion-lesson-personalization .intro-highlight-block {
    border-left: 4px solid var(--lesson-accent) !important;
}

.respiraccion-lesson-personalization .respirar-bien-caracteristicas,
.respiraccion-lesson-personalization .power-card-light-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: clamp(1rem, 2.5vw, 1.8rem);
    margin: clamp(1.2rem, 2.4vw, 2rem) 0;
}

.respiraccion-lesson-personalization .caracteristica-block,
.respiraccion-lesson-personalization .power-card-light {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 18px;
    border: 1px solid rgba(2, 132, 199, 0.12);
    padding: clamp(1.25rem, 2.5vw, 1.8rem);
    box-shadow: 0 25px 50px -40px rgba(2, 132, 199, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.respiraccion-lesson-personalization .caracteristica-block:hover,
.respiraccion-lesson-personalization .power-card-light:hover {
    transform: translateY(-6px);
    box-shadow: 0 35px 70px -45px rgba(2, 132, 199, 0.45);
}

.respiraccion-lesson-personalization table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 60px -32px rgba(15, 23, 42, 0.45);
}

.respiraccion-lesson-personalization table th,
.respiraccion-lesson-personalization table td {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.respiraccion-lesson-personalization table th {
    background: rgba(2, 132, 199, 0.12);
    font-weight: 600;
    color: var(--lesson-heading);
    text-align: left;
    vertical-align: middle;
}

.table-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-right: 8px;
    vertical-align: middle;
    background: white;
    padding: 4px;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.table-header-icon img,
.table-header-icon .preset-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.table-header-icon .preset-icon-emoji {
    font-size: 16px;
    line-height: 1;
}

/* Estilo Focus - Dorado/Ocre cálido con acento vibrante */
.lesson-style-focus,
.lesson-block.lesson-style-focus,
section.lesson-block.lesson-style-focus,
.respiraccion-lesson-personalization section.lesson-block.lesson-style-focus {
    --lesson-bg: linear-gradient(140deg, rgba(200, 155, 60, 0.15) 0%, rgba(200, 155, 60, 0.05) 40%, #ffffff 80%) !important;
    border-radius: 20px !important;
    --lesson-accent: var(--resp-gold) !important;
    /* #C89B3C */
    --lesson-border: rgba(200, 155, 60, 0.3) !important;
    --lesson-heading: #5D4037 !important;
    /* Marrón oscuro del template */
    --lesson-text: #3a2d1f !important;
    --lesson-muted: #6b5d4f !important;
    --lesson-card: rgba(255, 249, 239, 0.95) !important;
    /* Fondo cálido */
    --lesson-shadow: 0 30px 70px -40px rgba(200, 155, 60, 0.4) !important;
}

/* ============================================================
   ESTILO FOCUS - Dorado/Ocre Cálido Premium con 3D Suave
   ============================================================ */
.respiraccion-lesson-personalization section.lesson-block.lesson-style-focus:not(.lesson-block--hero_science),
section.lesson-block.lesson-style-focus:not(.lesson-block--hero_science),
.lesson-block.lesson-style-focus:not(.lesson-block--hero_science) {
    /* Gradiente cálido suave con profundidad */
    background: linear-gradient(145deg, rgba(255, 251, 245, 0.98) 0%, rgba(255, 247, 235, 0.96) 50%, rgba(254, 243, 225, 0.94) 100%) !important;
    color: #3a2d1f !important;

    /* Borde lateral dorado - USAR BOX-SHADOW en lugar de border para permitir border-radius */
    border-left: 5px solid var(--lesson-accent) !important;
    /* REMOVED border-image to fix border-radius */

    /* Efecto 3D suave con sombras multicapa doradas */
    box-shadow:
        /* Sombra exterior principal dorada */
        0 24px 60px -40px rgba(200, 155, 60, 0.45),
        /* Capa media */
        0 12px 30px -25px rgba(200, 155, 60, 0.3),
        /* Capa superior suave */
        0 6px 15px -12px rgba(200, 155, 60, 0.2),
        /* Highlight interior para convexidad */
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        /* Profundidad interior */
        inset 0 -1px 0 rgba(200, 155, 60, 0.1) !important;

    /* Borde sutil para definición */
    border-right: 1px solid rgba(200, 155, 60, 0.15) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-bottom: 1px solid rgba(200, 155, 60, 0.12) !important;
}

/* Hover Focus - elevación suave con más brillo dorado */
.lesson-block.lesson-style-focus:not(.lesson-block--hero_science):hover {
    transform: translateY(-5px) !important;
    box-shadow:
        0 32px 80px -45px rgba(200, 155, 60, 0.55),
        0 16px 40px -30px rgba(200, 155, 60, 0.4),
        0 8px 20px -15px rgba(200, 155, 60, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 rgba(200, 155, 60, 0.15) !important;
}

/* Estilo Earth - Tierras y marrones cálidos */
.lesson-style-earth,
.lesson-block.lesson-style-earth,
section.lesson-block.lesson-style-earth,
.respiraccion-lesson-personalization section.lesson-block.lesson-style-earth {
    --lesson-bg: linear-gradient(135deg, #fdf3da 0%, #fef7e8 50%, #fff9ef 85%) !important;
    border-radius: 20px !important;
    --lesson-accent: #c47a29 !important;
    /* Marrón terroso */
    --lesson-border: rgba(196, 122, 41, 0.35) !important;
    --lesson-heading: #5D4037 !important;
    /* Marrón oscuro consistente */
    --lesson-text: #3a2d1f !important;
    --lesson-muted: #6b5d4f !important;
    --lesson-card: rgba(253, 243, 218, 0.98) !important;
    --lesson-shadow: 0 25px 60px -35px rgba(196, 122, 41, 0.45) !important;
}

/* ============================================================
   ESTILO EARTH - Tierras y Marrones Cálidos Premium con 3D
   ============================================================ */
.respiraccion-lesson-personalization section.lesson-block.lesson-style-earth:not(.lesson-block--hero_science),
section.lesson-block.lesson-style-earth:not(.lesson-block--hero_science),
.lesson-block.lesson-style-earth:not(.lesson-block--hero_science) {
    /* Gradiente tierra suave y natural */
    background: linear-gradient(145deg, rgba(254, 249, 240, 0.98) 0%, rgba(253, 243, 228, 0.96) 50%, rgba(252, 237, 215, 0.94) 100%) !important;
    color: #3a2d1f !important;

    /* Borde lateral marrón terroso - USAR SOLID para permitir border-radius */
    border-left: 5px solid var(--lesson-accent) !important;
    /* REMOVED border-image */

    /* Efecto 3D suave con sombras multicapa tierra */
    box-shadow:
        0 24px 60px -40px rgba(196, 122, 41, 0.5),
        0 12px 30px -25px rgba(196, 122, 41, 0.35),
        0 6px 15px -12px rgba(196, 122, 41, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        inset 0 -1px 0 rgba(196, 122, 41, 0.12) !important;

    border-right: 1px solid rgba(196, 122, 41, 0.18) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.6) !important;
    border-bottom: 1px solid rgba(196, 122, 41, 0.15) !important;
}

/* Hover Earth */
.lesson-block.lesson-style-earth:not(.lesson-block--hero_science):hover {
    transform: translateY(-5px) !important;
    box-shadow:
        0 32px 80px -45px rgba(196, 122, 41, 0.6),
        0 16px 40px -30px rgba(196, 122, 41, 0.45),
        0 8px 20px -15px rgba(196, 122, 41, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(196, 122, 41, 0.18) !important;
}

/* Estilo Sky - Azules claros y celestes vibrantes */
.lesson-style-sky,
.lesson-block.lesson-style-sky,
section.lesson-block.lesson-style-sky,
.respiraccion-lesson-personalization section.lesson-block.lesson-style-sky {
    --lesson-bg: linear-gradient(135deg, rgba(74, 144, 226, 0.12) 0%, rgba(80, 227, 194, 0.08) 35%, rgba(14, 165, 233, 0.05) 60%, #ffffff 95%) !important;
    border-radius: 20px !important;
    --lesson-accent: var(--resp-blue-clear) !important;
    /* #4A90E2 - azul principal calma */
    --lesson-border: rgba(74, 144, 226, 0.25) !important;
    --lesson-heading: #0f2d3d !important;
    /* Azul oscuro */
    --lesson-text: #0f172a !important;
    --lesson-muted: #475569 !important;
    --lesson-card: rgba(240, 249, 255, 0.95) !important;
    /* Fondo azul muy claro */
    --lesson-shadow: 0 30px 70px -40px rgba(74, 144, 226, 0.35) !important;
}

/* ============================================================
   ESTILO SKY - Azules Claros y Celestes Premium con 3D
   ============================================================ */
.respiraccion-lesson-personalization section.lesson-block.lesson-style-sky:not(.lesson-block--hero_science),
section.lesson-block.lesson-style-sky:not(.lesson-block--hero_science),
.lesson-block.lesson-style-sky:not(.lesson-block--hero_science) {
    /* Gradiente celeste cristalino y aireado */
    background: linear-gradient(145deg, rgba(245, 252, 255, 0.98) 0%, rgba(240, 249, 255, 0.96) 50%, rgba(235, 246, 254, 0.94) 100%) !important;
    color: #0f172a !important;

    /* Borde lateral azul celeste - USAR SOLID para permitir border-radius */
    border-left: 5px solid var(--lesson-accent) !important;
    /* REMOVED border-image */

    /* Efecto 3D suave con sombras multicapa celestes */
    box-shadow:
        0 24px 60px -40px rgba(74, 144, 226, 0.42),
        0 12px 30px -25px rgba(74, 144, 226, 0.28),
        0 6px 15px -12px rgba(74, 144, 226, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(74, 144, 226, 0.08) !important;

    border-right: 1px solid rgba(74, 144, 226, 0.12) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.7) !important;
    border-bottom: 1px solid rgba(74, 144, 226, 0.1) !important;
}

/* Hover Sky */
.lesson-block.lesson-style-sky:not(.lesson-block--hero_science):hover {
    transform: translateY(-5px) !important;
    box-shadow:
        0 32px 80px -45px rgba(74, 144, 226, 0.52),
        0 16px 40px -30px rgba(74, 144, 226, 0.38),
        0 8px 20px -15px rgba(74, 144, 226, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 0 rgba(74, 144, 226, 0.12) !important;
}

/* Estilo Dark - Marrones integrados con celestes */
.lesson-style-dark,
.lesson-block.lesson-style-dark,
section.lesson-block.lesson-style-dark,
.respiraccion-lesson-personalization section.lesson-block.lesson-style-dark {
    --lesson-bg: linear-gradient(135deg, #f5efe1 0%, #e8ddd4 30%, #f0f9ff 70%, #e0f2fe 100%) !important;
    border-radius: 20px !important;
    /* Gradiente marrón a celeste */
    --lesson-text: #3d2817 !important;
    /* Marrón oscuro para texto */
    --lesson-muted: #5d4037 !important;
    /* Marrón medio para texto secundario */
    --lesson-card: rgba(255, 247, 237, 0.95) !important;
    /* Fondo beige/marrón claro */
    --lesson-border: rgba(14, 165, 233, 0.4) !important;
    /* Celeste para bordes */
    --lesson-heading: #5d4037 !important;
    /* Marrón oscuro para títulos */
    --lesson-accent: #0284c7 !important;
    /* Celeste medio como acento */
    --lesson-shadow: 0 30px 60px -34px rgba(93, 64, 55, 0.25), 0 0 40px -10px rgba(14, 165, 233, 0.15) !important;
}

/* ===== SUPER STYLES - Visualmente Impactantes ===== */

/* Estilo Forest (Super) - Bosque natural y renovador - VERSIÓN SPA (Muy sutil) */
.lesson-style-forest,
.lesson-block.lesson-style-forest,
section.lesson-block.lesson-style-forest,
.respiraccion-lesson-personalization section.lesson-block.lesson-style-forest {
    --lesson-bg: linear-gradient(180deg, #ffffff 0%, #f6fbf7 50%, #eef7f1 100%) !important;
    border-radius: 20px !important;
    /* Gradiente casi blanco a menta muy pálido */
    --lesson-accent: #81c784 !important;
    /* Verde salvia suave */
    --lesson-border: rgba(129, 199, 132, 0.3) !important;
    --lesson-heading: #2d3748 !important;
    /* Gris oscuro neutro */
    --lesson-text: #4a5568 !important;
    /* Gris medio-oscuro */
    --lesson-muted: #718096 !important;
    --lesson-card: #ffffff !important;
    /* Tarjetas blancas puras */
    --lesson-shadow: 0 25px 50px -20px rgba(129, 199, 132, 0.15), 0 0 30px -10px rgba(129, 199, 132, 0.1) !important;
}

/* ============================================================
   ESTILO FOREST - Bosque Natural SPA Premium
   ============================================================ */
.respiraccion-lesson-personalization section.lesson-block.lesson-style-forest:not(.lesson-block--hero_science),
section.lesson-block.lesson-style-forest:not(.lesson-block--hero_science),
.lesson-block.lesson-style-forest:not(.lesson-block--hero_science) {
    /* Gradiente minimalista y fresco */
    background: linear-gradient(180deg, #ffffff 0%, #f9fdfa 40%, #f0f9f4 100%) !important;
    color: #4a5568 !important;

    /* Borde lateral verde salvia elegante */
    border-left: 5px solid var(--lesson-accent) !important;

    /* Sombra muy difusa y suave (no tóxica) */
    box-shadow:
        0 20px 40px -20px rgba(0, 0, 0, 0.05),
        0 0 20px -5px rgba(129, 199, 132, 0.15) !important;

    border-right: 1px solid rgba(129, 199, 132, 0.1) !important;
    border-top: 1px solid #ffffff !important;
    border-bottom: 1px solid rgba(129, 199, 132, 0.1) !important;
    padding: clamp(1.75rem, 4vw, 2.5rem) !important;
    border-radius: 24px !important;
}

/* Hover Forest */
.lesson-block.lesson-style-forest:not(.lesson-block--hero_science):hover {
    transform: translateY(-4px) !important;
    box-shadow:
        0 25px 50px -20px rgba(0, 0, 0, 0.08),
        0 0 30px -5px rgba(129, 199, 132, 0.2) !important;
}

/* Títulos forest - Neutros */
.respiraccion-lesson-personalization.lesson-style-forest .lesson-block .lesson-block__title,
.lesson-style-forest .lesson-block .lesson-block__title,
.lesson-style-forest .lesson-block h2.lesson-block__title,
.respiraccion-lesson-personalization section.lesson-block.lesson-style-forest .lesson-block__title,
.respiraccion-lesson-personalization section.lesson-block.lesson-style-forest h2.lesson-block__title {
    color: #2d3748 !important;
    text-shadow: none !important;
    /* Eliminar sombra verde */
}

/* Forest text overrides */
.lesson-style-forest p,
.lesson-style-forest li,
.lesson-block.lesson-style-forest p,
.lesson-block.lesson-style-forest li,
.lesson-style-forest .lesson-block__content,
.lesson-block.lesson-style-forest .lesson-block__content {
    color: #4a5568 !important;
}

.lesson-style-forest h3,
.lesson-style-forest h4,
.lesson-style-forest strong,
.lesson-block.lesson-style-forest h3,
.lesson-block.lesson-style-forest h4,
.lesson-block.lesson-style-forest strong {
    color: #2d3748 !important;
}

/* Estilo Ocean (Super) - Océano profundo e inmersivo */
.lesson-style-ocean,
.lesson-block.lesson-style-ocean,
section.lesson-block.lesson-style-ocean,
.respiraccion-lesson-personalization section.lesson-block.lesson-style-ocean {
    --lesson-bg: linear-gradient(135deg, #e6f7ff 0%, #d6eef5 25%, #bae5eb 50%, #9edce1 75%, #82d3d7 100%) !important;
    border-radius: 20px !important;
    --lesson-accent: #0077b6 !important;
    /* Azul océano profundo */
    --lesson-border: rgba(0, 119, 182, 0.45) !important;
    /* Borde azul intenso */
    --lesson-heading: #023e7d !important;
    /* Azul navy oscuro */
    --lesson-text: #001d3d !important;
    /* Azul casi negro */
    --lesson-muted: #003459 !important;
    /* Azul profundo para secundario */
    --lesson-card: rgba(230, 247, 255, 0.98) !important;
    /* Fondo azul muy claro */
    --lesson-shadow: 0 35px 80px -45px rgba(0, 119, 182, 0.65), 0 0 50px -15px rgba(130, 211, 215, 0.35) !important;
    /* Sombra azul profunda */
}

/* ============================================================
   ESTILO OCEAN (SUPER) - Océano Profundo Premium con 3D Ultra
   ============================================================ */
.respiraccion-lesson-personalization section.lesson-block.lesson-style-ocean:not(.lesson-block--hero_science),
section.lesson-block.lesson-style-ocean:not(.lesson-block--hero_science),
.lesson-block.lesson-style-ocean:not(.lesson-block--hero_science) {
    /* Gradiente océano inmersivo con profundidad acuática */
    background: linear-gradient(145deg, rgba(240, 250, 255, 1) 0%, rgba(230, 247, 255, 0.98) 25%, rgba(220, 244, 254, 0.96) 50%, rgba(209, 240, 252, 0.94) 100%) !important;
    color: #001d3d !important;

    /* Borde lateral azul océano - USAR SOLID para permitir border-radius */
    border-left: 6px solid var(--lesson-accent) !important;
    /* REMOVED border-image */

    /* Efecto 3D ULTRA con múltiples capas azules oceánicas */
    box-shadow:
        /* Resplandor azul turquesa exterior amplio */
        0 0 60px -20px rgba(130, 211, 215, 0.45),
        /* Sombra profunda principal océano */
        0 32px 80px -45px rgba(0, 119, 182, 0.7),
        /* Capa media oceánica */
        0 20px 50px -32px rgba(0, 119, 182, 0.55),
        /* Capa superior definida */
        0 10px 25px -18px rgba(0, 119, 182, 0.4),
        /* Highlight brillante superior cristalino */
        inset 0 2px 0 rgba(255, 255, 255, 0.95),
        /* Profundidad interior azul */
        inset 0 -2px 0 rgba(0, 119, 182, 0.18) !important;

    border-right: 1px solid rgba(0, 119, 182, 0.22) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.8) !important;
    border-bottom: 1px solid rgba(0, 119, 182, 0.2) !important;
    padding: clamp(1.75rem, 4vw, 2.5rem) !important;
    border-radius: 28px !important;
}

/* Hover Ocean SUPER - elevación dramática submarina */
.lesson-block.lesson-style-ocean:not(.lesson-block--hero_science):hover {
    transform: translateY(-8px) scale(1.01) !important;
    box-shadow:
        0 0 80px -15px rgba(130, 211, 215, 0.6),
        0 45px 100px -50px rgba(0, 119, 182, 0.8),
        0 28px 70px -38px rgba(0, 119, 182, 0.65),
        0 14px 35px -22px rgba(0, 119, 182, 0.5),
        inset 0 2px 0 rgba(255, 255, 255, 1),
        inset 0 -2px 0 rgba(0, 119, 182, 0.24) !important;
}

/* Títulos ocean con efecto depth */
.respiraccion-lesson-personalization.lesson-style-ocean .lesson-block .lesson-block__title,
.lesson-style-ocean .lesson-block .lesson-block__title,
.lesson-style-ocean .lesson-block h2.lesson-block__title,
.respiraccion-lesson-personalization section.lesson-block.lesson-style-ocean .lesson-block__title,
.respiraccion-lesson-personalization section.lesson-block.lesson-style-ocean h2.lesson-block__title,
.lesson-block.lesson-style-ocean .lesson-block__title,
.lesson-block.lesson-style-ocean h2.lesson-block__title {
    color: #023e7d !important;
    /* Azul navy oscuro */
    text-shadow: 0 2px 4px rgba(0, 119, 182, 0.3), 0 0 20px rgba(0, 119, 182, 0.12) !important;
    /* Profundidad */
}

/* Hover effects para super styles - mayor elevación */
.lesson-style-forest .lesson-block:hover,
.lesson-style-ocean .lesson-block:hover,
.lesson-block.lesson-style-forest:hover,
.lesson-block.lesson-style-ocean:hover {
    transform: translateY(-8px) !important;
    /* Mayor elevación que estilos normales */
    box-shadow: 0 45px 90px -50px rgba(0, 0, 0, 0.4) !important;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ============================================================
   ESTILO DARK - Marrones + Celestes Premium con 3D Dual
   ============================================================ */
.respiraccion-lesson-personalization section.lesson-block.lesson-style-dark:not(.lesson-block--hero_science),
section.lesson-block.lesson-style-dark:not(.lesson-block--hero_science),
.lesson-block.lesson-style-dark:not(.lesson-block--hero_science) {
    /* Gradiente que fusiona marrón cálido con celeste fresco */
    background: linear-gradient(145deg, rgba(255, 250, 242, 0.98) 0%, rgba(252, 246, 237, 0.96) 30%, rgba(245, 250, 253, 0.94) 70%, rgba(240, 248, 255, 0.92) 100%) !important;
    color: #3d2817 !important;

    /* Borde lateral celeste - USAR SOLID para permitir border-radius */
    border-left: 5px solid var(--lesson-accent) !important;
    /* REMOVED border-image */

    /* Efecto 3D dual con sombras marrón-celeste */
    box-shadow:
        /* Sombra principal dual (marrón + celeste) */
        0 24px 60px -38px rgba(93, 64, 55, 0.35),
        0 20px 50px -32px rgba(14, 165, 233, 0.25),
        0 12px 30px -25px rgba(93, 64, 55, 0.22),
        0 6px 15px -12px rgba(14, 165, 233, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        inset 0 -1px 0 rgba(14, 165, 233, 0.08) !important;

    border-right: 1px solid rgba(14, 165, 233, 0.15) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.65) !important;
    border-bottom: 1px solid rgba(93, 64, 55, 0.12) !important;
}

/* Hover Dark - fusión de ambos colores */
.lesson-block.lesson-style-dark:not(.lesson-block--hero_science):hover {
    transform: translateY(-5px) !important;
    box-shadow:
        0 32px 80px -42px rgba(93, 64, 55, 0.45),
        0 28px 70px -36px rgba(14, 165, 233, 0.35),
        0 16px 40px -30px rgba(93, 64, 55, 0.28),
        0 8px 20px -15px rgba(14, 165, 233, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 rgba(14, 165, 233, 0.12) !important;
}

/* OVERRIDE PARA TABLAS - MÁXIMA PRIORIDAD */
.respiraccion-lesson-personalization section.lesson-block.lesson-style-forest .lesson-block__table,
.lesson-block.lesson-style-forest .lesson-block__table {
    background: rgba(240, 253, 244, 0.98) !important;
    color: #022c22 !important;
    border: 2px solid #059669 !important;
    border-radius: 15px !important;
    padding: 20px !important;
}

.respiraccion-lesson-personalization section.lesson-block.lesson-style-ocean .lesson-block__table,
section.lesson-block.lesson-style-ocean .lesson-block__table {
    background: rgba(230, 247, 255, 0.98) !important;
    color: #001d3d !important;
    border: 2px solid #0077b6 !important;
    border-radius: 15px !important;
}

.respiraccion-lesson-personalization section.lesson-block.lesson-style-focus .lesson-block__table,
section.lesson-block.lesson-style-focus .lesson-block__table {
    background: rgba(255, 249, 239, 0.95) !important;
    color: #3a2d1f !important;
    border: 2px solid #C89B3C !important;
    border-radius: 15px !important;
}

.respiraccion-lesson-personalization section.lesson-block.lesson-style-earth .lesson-block__table,
section.lesson-block.lesson-style-earth .lesson-block__table {
    background: rgba(253, 243, 218, 0.98) !important;
    color: #3a2d1f !important;
    border: 2px solid #c47a29 !important;
    border-radius: 15px !important;
}

.respiraccion-lesson-personalization section.lesson-block.lesson-style-sky .lesson-block__table,
section.lesson-block.lesson-style-sky .lesson-block__table {
    background: rgba(240, 249, 255, 0.95) !important;
    color: #0f172a !important;
    border: 2px solid #4A90E2 !important;
    border-radius: 15px !important;
}

.respiraccion-lesson-personalization section.lesson-block.lesson-style-dark .lesson-block__table,
section.lesson-block.lesson-style-dark .lesson-block__table {
    background: rgba(255, 247, 237, 0.95) !important;
    color: #3d2817 !important;
    border: 2px solid #0284c7 !important;
    border-radius: 15px !important;
}

/* Títulos dentro de bloques con estilo dark - ULTRA ESPECÍFICO para sobrescribir estilos inline */
/* Reglas con máxima especificidad para sobrescribir estilos inline */
.respiraccion-lesson-personalization.lesson-style-dark .lesson-block .lesson-block__title[style],
.respiraccion-lesson-personalization.lesson-style-dark .lesson-block h2.lesson-block__title[style],
.respiraccion-lesson-personalization.lesson-style-dark .lesson-block h3.lesson-block__title[style],
.respiraccion-lesson-personalization.lesson-style-dark section.lesson-block .lesson-block__title[style],
.respiraccion-lesson-personalization.lesson-style-dark section.lesson-block h2.lesson-block__title[style],
.respiraccion-lesson-personalization.lesson-style-dark section.lesson-block h3.lesson-block__title[style],
.respiraccion-lesson-personalization.lesson-style-dark .lesson-block .lesson-block__title,
.respiraccion-lesson-personalization.lesson-style-dark .lesson-block h2.lesson-block__title,
.respiraccion-lesson-personalization.lesson-style-dark .lesson-block h3.lesson-block__title,
.respiraccion-lesson-personalization.lesson-style-dark .lesson-block h2,
.respiraccion-lesson-personalization.lesson-style-dark .lesson-block h3,
.respiraccion-lesson-personalization.lesson-style-dark section.lesson-block .lesson-block__title,
.respiraccion-lesson-personalization.lesson-style-dark section.lesson-block h2.lesson-block__title,
.respiraccion-lesson-personalization.lesson-style-dark section.lesson-block h3.lesson-block__title,
.respiraccion-lesson-personalization.lesson-style-dark section.lesson-block h2,
.respiraccion-lesson-personalization.lesson-style-dark section.lesson-block h3,
.lesson-style-dark .lesson-block .lesson-block__title.text-2xl.font-bold.section-title,
.lesson-style-dark .lesson-block h2.lesson-block__title.text-2xl.font-bold.section-title,
.lesson-style-dark .lesson-block h3.lesson-block__title.text-2xl.font-semibold,
.lesson-block.lesson-style-dark .lesson-block__title,
.lesson-block.lesson-style-dark h2.lesson-block__title,
.lesson-block.lesson-style-dark h3.lesson-block__title {
    color: var(--lesson-heading) !important;
    /* Sobrescribir también otros estilos inline si existen */
    font-size: 1.875rem !important;
    font-size: 30px !important;
}

/* Párrafos y contenido dentro de bloques con estilo dark */
.lesson-style-dark .lesson-block p,
.lesson-style-dark .lesson-block li,
.lesson-style-dark .lesson-block .lesson-block__content,
.lesson-block.lesson-style-dark p,
.lesson-block.lesson-style-dark li,
.lesson-block.lesson-style-dark .lesson-block__content {
    color: var(--lesson-text) !important;
}

/* Texto secundario */
.lesson-style-dark .lesson-block .lesson-block__subtitle,
.lesson-style-dark .lesson-block .lesson-block__content-subtitle,
.lesson-block.lesson-style-dark .lesson-block__subtitle,
.lesson-block.lesson-style-dark .lesson-block__content-subtitle {
    color: var(--lesson-muted) !important;
}

/* ============================================================
   RESPONSIVE MOBILE - OPTIMIZADO PARA MÁXIMA LEGIBILIDAD
   Objetivo: Contenido cerca de los bordes, párrafos anchos
   ============================================================ */

@media (max-width: 768px) {

    /* Contenedor principal - EDGE TO EDGE - márgenes prácticamente CERO */
    .respiraccion-lesson-personalization {
        padding: 0 !important;
        /* CERO padding lateral */
        margin-left: 0 !important;
        /* CERO margen */
        margin-right: 0 !important;
        /* CERO margen */
        max-width: 100% !important;
        border-radius: 0 !important;
        /* Sin border radius para usar toda la pantalla */
    }

    /* Bloques individuales - EDGE TO EDGE en mobile, solo mínimo margen */
    .lesson-block:not(.lesson-block--hero_science):not(.lesson-block--warning_power) {
        padding: 1.25rem 0.65rem !important;
        /* Padding lateral reducido para más ancho de contenido */
        margin-bottom: 0.85rem !important;
        margin-left: 0.2rem !important;
        /* Margen mínimo - casi edge to edge */
        margin-right: 0.2rem !important;
        border-radius: 12px !important;
    }

    /* Bloques con estilos específicos - casi edge-to-edge */
    .lesson-block.lesson-style-focus:not(.lesson-block--hero_science),
    .lesson-block.lesson-style-earth:not(.lesson-block--hero_science),
    .lesson-block.lesson-style-sky:not(.lesson-block--hero_science),
    .lesson-block.lesson-style-dark:not(.lesson-block--hero_science) {
        padding: 1.25rem 0.65rem !important;
        margin-left: 0.2rem !important;
        margin-right: 0.2rem !important;
    }

    /* Estilos SUPER - casi edge-to-edge */
    .lesson-block.lesson-style-forest:not(.lesson-block--hero_science),
    .lesson-block.lesson-style-ocean:not(.lesson-block--hero_science) {
        padding: 1.35rem 0.7rem !important;
        margin-left: 0.2rem !important;
        margin-right: 0.2rem !important;
        border-radius: 14px !important;
    }

    /* Cards y highlight boxes - casi edge-to-edge */
    .respiraccion-lesson-personalization .card,
    .respiraccion-lesson-personalization .highlight-box,
    .respiraccion-lesson-personalization .intro-highlight-block {
        padding: 1rem 0.65rem !important;
        margin-left: 0.2rem !important;
        margin-right: 0.2rem !important;
        margin-bottom: 0.85rem !important;
    }

    /* Grid de características - una columna */
    .respiraccion-lesson-personalization .respirar-bien-caracteristicas {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }

    /* Párrafos - optimizados para legibilidad máxima */
    .respiraccion-lesson-personalization p,
    .lesson-block p,
    .lesson-block__content-text {
        font-size: 1.05rem !important;
        /* Tamaño óptimo para mobile */
        line-height: 1.65 !important;
        /* Altura de línea cómoda */
        margin-bottom: 1rem !important;
        max-width: 100% !important;
        /* Usar todo el ancho */
    }

    /* Listas - padding ajustado */
    .respiraccion-lesson-personalization ul,
    .respiraccion-lesson-personalization ol,
    .lesson-block ul,
    .lesson-block ol {
        padding-left: 1.25rem !important;
        margin-bottom: 1rem !important;
    }

    .respiraccion-lesson-personalization li,
    .lesson-block li {
        margin-bottom: 0.65rem !important;
        line-height: 1.6 !important;
    }

    /* IMÁGENES - Renderizado óptimo en mobile */
    .respiraccion-lesson-personalization img,
    .lesson-block img,
    .lesson-block__content img,
    .elementor-widget-container img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
        border-radius: 8px !important;
        object-fit: contain !important;
    }

    /* Figures con imágenes */
    .respiraccion-lesson-personalization figure,
    .lesson-block figure {
        margin: 1rem 0 !important;
        padding: 0 !important;
        max-width: 100% !important;
    }

    .respiraccion-lesson-personalization figure img,
    .lesson-block figure img {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Videos y elementos multimedia */
    .respiraccion-lesson-personalization video,
    .respiraccion-lesson-personalization iframe,
    .lesson-block video,
    .lesson-block iframe {
        max-width: 100% !important;
        height: auto !important;
        margin: 1rem auto !important;
        display: block !important;
    }

    /* ============================================================
       ULTRA AGGRESSIVE MOBILE - ABSOLUTE EDGE TO EDGE
       Force ALL parent containers to zero padding/margin
       ============================================================ */

    /* LearnDash Focus Mode Content - Zero padding */
    .ld-focus-content,
    .ld-focus-main,
    .ld-focus .ld-focus-content,
    .learndash-wrapper .ld-focus-content,
    body.single-sfwd-lessons .ld-focus-content,
    body.single-sfwd-topic .ld-focus-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* LearnDash Content Container */
    .ld-focus-content .ld-content,
    .ld-content,
    .learndash-wrapper .ld-content,
    .ld-focus-content>article,
    .ld-focus-content .entry-content,
    .ld-focus-content .learndash-content {
        padding-left: 0.15rem !important;
        padding-right: 0.15rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
    }

    /* Force ALL lesson-block variations to be ultra wide */
    section.lesson-block,
    div.lesson-block,
    .lesson-block,
    .respiraccion-lesson-personalization section.lesson-block,
    .respiraccion-lesson-personalization .lesson-block,
    .ld-focus-content .lesson-block,
    .learndash-wrapper .lesson-block {
        margin-left: 0.15rem !important;
        margin-right: 0.15rem !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        max-width: calc(100% - 0.3rem) !important;
        width: calc(100% - 0.3rem) !important;
        box-sizing: border-box !important;
    }

    /* Intro highlight block - same edge treatment */
    .intro-highlight-block,
    .respiraccion-lesson-personalization .intro-highlight-block,
    .ld-focus-content .intro-highlight-block {
        margin-left: 0.15rem !important;
        margin-right: 0.15rem !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        max-width: calc(100% - 0.3rem) !important;
        width: calc(100% - 0.3rem) !important;
        box-sizing: border-box !important;
    }

    /* Hero science blocks - full width */
    .lesson-block--hero_science,
    section.lesson-block--hero_science {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        max-width: 100% !important;
        width: 100% !important;
        border-radius: 0 !important;
    }
}

/* ============================================================
   ESTILOS BASE PARA BLOQUES - CON EFECTO 3D SUAVE Y PREMIUM
   ============================================================ */

/* Estilos base para bloques normales - CON boxes y efecto 3D suave */
.lesson-block:not(.lesson-block--hero_science):not(.lesson-block--warning_power) {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(250, 250, 252, 0.95) 100%);
    border-radius: 24px;
    padding: clamp(1.5rem, 3.5vw, 2.25rem);
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);

    /* Efecto 3D suave con múltiples capas de sombras */
    box-shadow:
        /* Sombra principal profunda */
        0 20px 50px -35px rgba(15, 23, 42, 0.4),
        /* Sombra media para profundidad */
        0 10px 25px -20px rgba(15, 23, 42, 0.25),
        /* Sombra superior suave */
        0 4px 12px -8px rgba(15, 23, 42, 0.15),
        /* Highlight interior superior para convexidad */
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        /* Sombra interior inferior para profundidad */
        inset 0 -1px 0 rgba(15, 23, 42, 0.05);

    text-align: left;
    color: #0f172a;
    border: 1px solid rgba(15, 23, 42, 0.06);

    /* Transición suave para hover */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover general para bloques normales - elevación suave */
.lesson-block:not(.lesson-block--hero_science):not(.lesson-block--warning_power):hover {
    transform: translateY(-4px);
    box-shadow:
        0 28px 70px -40px rgba(15, 23, 42, 0.5),
        0 14px 35px -25px rgba(15, 23, 42, 0.3),
        0 6px 16px -10px rgba(15, 23, 42, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(15, 23, 42, 0.08);
}

/* Títulos normales - estilo EXACTO del template HTML (text-2xl font-bold section-title) */
/* Replicar EXACTAMENTE: <h2 class="text-2xl font-bold section-title mb-2"> */
/* AUMENTAR tamaño - el usuario dice que 24px está muy chico */
/* FORZAR color #5D4037 - EXACTO DEL TEMPLATE */
/* NO SUBRAYADO - el template solo define .section-title { color: #5D4037; } */
.lesson-block__title:not(.lesson-block--hero_science .lesson-block__title),
h2.lesson-block__title:not(.lesson-block--hero_science h2),
h2.text-2xl.font-bold.section-title,
.lesson-block__title.text-2xl,
.respiraccion-lesson-personalization .lesson-block__title:not(.lesson-block--hero_science .lesson-block__title),
.respiraccion-lesson-personalization h2.lesson-block__title:not(.lesson-block--hero_science h2),
section:not(.lesson-block--hero_science) .lesson-block__title,
section:not(.lesson-block--hero_science) h2.lesson-block__title,
body .respiraccion-lesson-personalization .lesson-block__title:not(.lesson-block--hero_science),
body .respiraccion-lesson-personalization h2.lesson-block__title:not(.lesson-block--hero_science) {
    font-size: 1.875rem !important;
    /* AUMENTADO de 1.5rem (24px) a 30px */
    font-size: 30px !important;
    /* AUMENTADO - estaba muy chico */
    margin: 0 0 0.5rem !important;
    /* mb-2 en el template */
    color: #5D4037 !important;
    /* Fallback */
    color: var(--lesson-heading, #5D4037) !important;
    /* Variable wins */
    color: var(--lesson-heading, rgb(93, 64, 55)) !important;
    font-weight: 700 !important;
    /* font-bold de Tailwind */
    font-family: 'Montserrat', sans-serif !important;
    /* Font family EXACTO del template */
    letter-spacing: -0.025em !important;
    /* tracking-tight de Tailwind - efecto más compacto */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    /* Sombra sutil como el template */
    line-height: 1.5 !important;
    /* Tailwind default para text-2xl */
    text-decoration: none !important;
    /* NO subrayado - igual que el template */
}

/* Asegurar que h2 tenga el estilo correcto - EXACTO DEL TEMPLATE */
/* AUMENTAR tamaño - el usuario dice que 24px está muy chico */
/* FORZAR color #5D4037 - EXACTO DEL TEMPLATE */
/* NO SUBRAYADO - el template solo define .section-title { color: #5D4037; } */
.respiraccion-lesson-personalization h2.lesson-block__title,
.respiraccion-lesson-personalization h2.text-2xl,
h2.text-2xl.font-bold.section-title,
body .respiraccion-lesson-personalization h2.lesson-block__title,
body .respiraccion-lesson-personalization h2.text-2xl,
body h2.text-2xl.font-bold.section-title {
    font-size: 1.875rem !important;
    /* AUMENTADO de 1.5rem (24px) a 30px */
    font-size: 30px !important;
    /* AUMENTADO - estaba muy chico */
    color: var(--lesson-heading, #5D4037) !important;
    /* section-title color EXACTO - FORZAR */
    /* Removed hardcoded override to allow variable to work */
    font-weight: 700 !important;
    /* font-bold */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    /* Sombra sutil como el template */
    text-decoration: none !important;
    /* NO subrayado - igual que el template */
}

/* Responsive: en móvil usar tamaño más pequeño como el template EXACTO */
@media (max-width: 768px) {

    .text-2xl.font-bold.section-title,
    h2.text-2xl.font-bold.section-title,
    .lesson-block__title.text-2xl,
    .lesson-block__title {
        font-size: 1.35rem !important;
        /* EXACTO como el template en móvil */
        line-height: 1.4 !important;
        margin-bottom: 6px !important;
        margin-top: 2px !important;
    }
}

/* Asegurar que los títulos en bloques normales tengan estilo EXACTO del template */
/* Replicar EXACTAMENTE: <h2 class="text-2xl font-bold section-title mb-2"> */
/* AUMENTAR tamaño - el usuario dice que 24px está muy chico */
/* NO SUBRAYADO - el template solo define .section-title { color: #5D4037; } */
/* Regla adicional para asegurar que TODOS los bloques (excepto hero_science) tengan títulos grandes */
section.lesson-block:not(.lesson-block--hero_science) .lesson-block__title,
section.lesson-block:not(.lesson-block--hero_science) h2.lesson-block__title,
section.lesson-block:not(.lesson-block--hero_science) h2.text-2xl,
.lesson-block:not(.lesson-block--hero_science) .lesson-block__title,
.lesson-block:not(.lesson-block--hero_science) h2.lesson-block__title,
.lesson-block:not(.lesson-block--hero_science) h2.text-2xl,
.respiraccion-lesson-personalization .lesson-block:not(.lesson-block--hero_science) .lesson-block__title,
.respiraccion-lesson-personalization .lesson-block:not(.lesson-block--hero_science) h2.lesson-block__title {
    color: #5D4037 !important;
    /* Color EXACTO section-title del template */
    font-size: 1.875rem !important;
    /* AUMENTADO de 1.5rem (24px) a 30px */
    font-size: 30px !important;
    /* AUMENTADO - estaba muy chico */
    font-weight: 700 !important;
    /* font-bold de Tailwind */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    /* Sombra sutil como el template */
    font-family: 'Montserrat', sans-serif !important;
    letter-spacing: -0.025em !important;
    margin-bottom: 0.5rem !important;
    /* mb-2 en el template */
    text-decoration: none !important;
    /* NO subrayado - igual que el template */
    line-height: 1.5 !important;
    /* Tailwind default para text-2xl */
}

@media (max-width: 768px) {
    .lesson-block:not(.lesson-block--hero_science) .lesson-block__title {
        font-size: 1.35rem !important;
        line-height: 1.4 !important;
        margin-bottom: 6px !important;
        margin-top: 2px !important;
    }
}

.lesson-block__subtitle {
    margin: 0 0 0.75rem 0 !important;
    color: var(--lesson-muted, #475569) !important;
    font-size: 1.5rem !important;
    /* Más grande - tamaño similar a los títulos */
    font-size: 24px !important;
    /* También en px para forzar */
    line-height: 1.6 !important;
    font-weight: 400 !important;
}

/* Forzar tamaño de subtítulos en todos los contextos - MÁXIMA ESPECIFICIDAD */
section.lesson-block .lesson-block__subtitle,
section.lesson-block:not(.lesson-block--hero_science) .lesson-block__subtitle,
.lesson-block .lesson-block__subtitle,
.lesson-block:not(.lesson-block--hero_science) .lesson-block__subtitle,
.respiraccion-lesson-personalization .lesson-block__subtitle,
.respiraccion-lesson-personalization .lesson-block:not(.lesson-block--hero_science) .lesson-block__subtitle,
p.lesson-block__subtitle {
    font-size: 1.5rem !important;
    font-size: 24px !important;
    /* También en px - mismo tamaño que títulos */
    margin: 0 0 0.75rem 0 !important;
}

/* Subtítulos de contenido (h4) - deben ser más grandes y visibles */
/* REDUCIR espacio superior e inferior para que no haya tanto espacio */
.lesson-block__content-subtitle,
h4.lesson-block__content-subtitle,
.lesson-block h4 {
    font-size: 1.5rem !important;
    /* Aumentar tamaño - más visible */
    font-size: 24px !important;
    /* También en px - tamaño considerable */
    font-weight: 600 !important;
    color: var(--lesson-heading, #1e293b) !important;
    margin-top: 0.5rem !important;
    /* REDUCIR espacio superior */
    margin-bottom: 0.5rem !important;
    /* REDUCIR espacio inferior */
    line-height: 1.5 !important;
}

/* Asegurar tamaño de subtítulos de contenido en todos los contextos - MÁXIMA ESPECIFICIDAD */
/* REDUCIR márgenes para evitar mucho espacio */
section.lesson-block .lesson-block__content-subtitle,
section.lesson-block h4.lesson-block__content-subtitle,
section.lesson-block h4,
.lesson-block .lesson-block__content-subtitle,
.lesson-block h4.lesson-block__content-subtitle,
.lesson-block h4,
.respiraccion-lesson-personalization .lesson-block h4,
.respiraccion-lesson-personalization .lesson-block .lesson-block__content-subtitle,
.respiraccion-lesson-personalization .lesson-block h4.lesson-block__content-subtitle {
    font-size: 1.5rem !important;
    font-size: 24px !important;
    margin-top: 0.5rem !important;
    /* REDUCIR espacio superior */
    margin-bottom: 0.5rem !important;
    /* REDUCIR espacio inferior */
    /* Sobrescribir los márgenes grandes de la regla general de h4 */
}

/* FORZAR reducción de márgenes en h4 dentro de lesson-blocks */
.respiraccion-lesson-personalization .lesson-block h4 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

.lesson-block__cta {
    margin-top: 1.25rem;
}

.lesson-block__cta-link {
    display: inline-block;
    padding: 0.65rem 1.5rem;
    border-radius: 999px;
    background: var(--lesson-accent, #0284c7);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lesson-block__cta-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -16px rgba(2, 132, 199, 0.9);
}

.lesson-block--intro {
    background: var(--lesson-card-bg, rgba(255, 255, 255, 0.95)) !important;
    border-left: 4px solid var(--lesson-accent, #0284c7) !important;
}

/* Blockquote quote-reflection dentro de highlight - estilo simple como estaba antes */
.respiraccion-lesson-personalization .intro-highlight-block blockquote,
.respiraccion-lesson-personalization .intro-highlight-block .quote-reflection {
    background-color: transparent !important;
    border-left: 3px solid #0284c7 !important;
    padding: 15px !important;
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
    border-radius: 4px !important;
    color: #4a4a4a !important;
    font-style: italic !important;
}

.respiraccion-lesson-personalization .intro-highlight-block blockquote p,
.respiraccion-lesson-personalization .intro-highlight-block .quote-reflection p {
    font-size: 1.125rem !important;
    margin: 0 !important;
    line-height: 1.6 !important;
}

.lesson-block--warning {
    background: #fff8e1 !important;
    border-left: 4px solid #f59e0b !important;
}

.lesson-block--quote blockquote {
    font-size: 1.35rem;
    font-style: italic;
    color: var(--lesson-heading, #0f172a);
    margin: 0;
}


/* Icono principal del bloque (renderizado directamente dentro del section) - círculo celeste claro */
.lesson-block__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 1rem;
    margin-top: 0;
    text-align: center;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* Icono arriba del título - sin wrapper header */
.lesson-block__icon-wrapper {
    margin-bottom: 1rem;
}

.lesson-block__icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border-radius: 50%;

    /* Gradiente 3D con profundidad - de claro a más oscuro */
    background: linear-gradient(145deg, #f0f9ff 0%, #e0f2fe 50%, #bae6fd 100%);

    padding: 0;

    /* Efecto 3D con múltiples sombras en capas */
    box-shadow:
        /* Sombra exterior profunda (base) */
        0 8px 16px rgba(14, 165, 233, 0.25),
        /* Sombra exterior media (capa intermedia) */
        0 4px 8px rgba(14, 165, 233, 0.15),
        /* Sombra exterior suave (capa superior) */
        0 2px 4px rgba(14, 165, 233, 0.1),
        /* Sombra interior para efecto cóncavo */
        inset 0 -2px 4px rgba(14, 165, 233, 0.1),
        /* Highlight superior para efecto convexo */
        inset 0 2px 4px rgba(255, 255, 255, 0.6);

    /* Borde sutil para definición */
    border: 1px solid rgba(14, 165, 233, 0.2);

    font-size: 2.5rem;
    line-height: 1;

    /* Transición suave para hover */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Efecto hover para interactividad */
.lesson-block__icon-circle:hover {
    transform: translateY(-2px);
    box-shadow:
        0 12px 24px rgba(14, 165, 233, 0.3),
        0 6px 12px rgba(14, 165, 233, 0.2),
        0 3px 6px rgba(14, 165, 233, 0.15),
        inset 0 -2px 4px rgba(14, 165, 233, 0.15),
        inset 0 2px 4px rgba(255, 255, 255, 0.7);
}

.lesson-block__icon-circle img,
.lesson-block__icon-circle svg,
.lesson-block__icon-circle .preset-icon {
    width: 60px;
    height: 60px;
    max-width: 60px;
    max-height: 60px;
    object-fit: contain;
    display: block;

    /* Mejorar calidad de renderizado de imágenes */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;

    /* Filtro sutil para mayor nitidez y contraste */
    filter: contrast(1.05) brightness(1.02);

    /* Transición suave */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.lesson-block__icon-circle .preset-icon {
    width: 60px;
    height: 60px;
}

/* Efecto hover para iconos - ligera ampliación */
.lesson-block__icon-circle:hover img,
.lesson-block__icon-circle:hover svg,
.lesson-block__icon-circle:hover .preset-icon {
    transform: scale(1.05);
}

/* Iconos específicos para hero_science - círculo blanco/transparente para que se vea sobre el gradiente azul */
.lesson-block--hero_science .lesson-block__icon-circle {
    width: 120px;
    height: 120px;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.8);
    font-size: 3rem;
}

.lesson-block--hero_science .lesson-block__icon-circle img,
.lesson-block--hero_science .lesson-block__icon-circle svg,
.lesson-block--hero_science .lesson-block__icon-circle .preset-icon {
    width: 80px;
    height: 80px;
    max-width: 80px;
    max-height: 80px;
    /* filter: brightness(0) invert(1); */
    /* Hacer el icono blanco */
}

/* Iconos específicos para warning_power - círculo celeste claro como todos */
.lesson-block--warning_power .lesson-block__icon-circle {
    width: 100px;
    height: 100px;
    background: #fef3c7 !important;
    font-size: 2.5rem;
}

.lesson-block--warning_power .lesson-block__icon-circle img,
.lesson-block--warning_power .lesson-block__icon-circle svg,
.lesson-block--warning_power .lesson-block__icon-circle .preset-icon {
    width: 60px;
    height: 60px;
    max-width: 60px;
    max-height: 60px;
    /* Removed filter that was distorting icon to yellow triangle */
}

/* Forzar color amarillo/naranja en iconos de warning */
.lesson-block--warning_power .lesson-block__icon-circle svg path,
.lesson-block--warning_power .lesson-block__icon-circle svg circle,
.lesson-block--warning_power .lesson-block__icon-circle svg polygon {
    fill: #f59e0b !important;
    stroke: #f59e0b !important;
}


.preset-icon {
    max-width: 100%;
    height: auto;
}


/* Beautiful table styling for stat_table blocks */
.lesson-block__table {
    font-family: 'Poppins', sans-serif !important;
    max-width: 100%;
    margin: 0 auto;
    padding: 15px;
}

.lesson-block__table h2 {
    font-size: 1.6rem;
    color: #022859;
    text-align: center;
    margin-bottom: 25px;
    font-weight: 600;
}

/* Override colors para títulos de tabla */
.respiraccion-lesson-personalization section.lesson-block.lesson-style-forest .lesson-block__table h2,
section.lesson-block.lesson-style-forest .lesson-block__table h2 {
    color: #064e3b !important;
}

.respiraccion-lesson-personalization section.lesson-block.lesson-style-ocean .lesson-block__table h2,
section.lesson-block.lesson-style-ocean .lesson-block__table h2 {
    color: #023e7d !important;
}

.respiraccion-lesson-personalization section.lesson-block.lesson-style-focus .lesson-block__table h2,
section.lesson-block.lesson-style-focus .lesson-block__table h2 {
    color: #5D4037 !important;
}

.respiraccion-lesson-personalization section.lesson-block.lesson-style-earth .lesson-block__table h2,
section.lesson-block.lesson-style-earth .lesson-block__table h2 {
    color: #5D4037 !important;
}

.respiraccion-lesson-personalization section.lesson-block.lesson-style-sky .lesson-block__table h2,
section.lesson-block.lesson-style-sky .lesson-block__table h2 {
    color: #0f2d3d !important;
}

.respiraccion-lesson-personalization section.lesson-block.lesson-style-dark .lesson-block__table h2,
section.lesson-block.lesson-style-dark .lesson-block__table h2 {
    color: #5d4037 !important;
}

.lesson-block__table table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
    margin-bottom: 30px;
}

.lesson-block__table thead tr {
    background-color: #f9f9f9;
    text-align: left;
}

.lesson-block__table thead th {
    padding: 15px 20px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 8px;
}

.lesson-block__table thead th:first-child {
    color: #79afd2;
    border-radius: 8px 0 0 8px;
}

.lesson-block__table thead th:last-child {
    color: #25c2f2;
    border-radius: 0 8px 8px 0;
}

/* Override colors para encabezados de tabla */
.respiraccion-lesson-personalization section.lesson-block.lesson-style-forest .lesson-block__table thead th:first-child,
section.lesson-block.lesson-style-forest .lesson-block__table thead th:first-child {
    color: #059669 !important;
}

.respiraccion-lesson-personalization section.lesson-block.lesson-style-forest .lesson-block__table thead th:last-child,
section.lesson-block.lesson-style-forest .lesson-block__table thead th:last-child {
    color: #059669 !important;
}

.respiraccion-lesson-personalization section.lesson-block.lesson-style-ocean .lesson-block__table thead th:first-child,
section.lesson-block.lesson-style-ocean .lesson-block__table thead th:first-child {
    color: #0077b6 !important;
}

.respiraccion-lesson-personalization section.lesson-block.lesson-style-ocean .lesson-block__table thead th:last-child,
section.lesson-block.lesson-style-ocean .lesson-block__table thead th:last-child {
    color: #0077b6 !important;
}

.respiraccion-lesson-personalization section.lesson-block.lesson-style-focus .lesson-block__table thead th:first-child,
section.lesson-block.lesson-style-focus .lesson-block__table thead th:first-child {
    color: #C89B3C !important;
}

.respiraccion-lesson-personalization section.lesson-block.lesson-style-focus .lesson-block__table thead th:last-child,
section.lesson-block.lesson-style-focus .lesson-block__table thead th:last-child {
    color: #C89B3C !important;
}

.respiraccion-lesson-personalization section.lesson-block.lesson-style-earth .lesson-block__table thead th:first-child,
section.lesson-block.lesson-style-earth .lesson-block__table thead th:first-child {
    color: #c47a29 !important;
}

.respiraccion-lesson-personalization section.lesson-block.lesson-style-earth .lesson-block__table thead th:last-child,
section.lesson-block.lesson-style-earth .lesson-block__table thead th:last-child {
    color: #c47a29 !important;
}

.respiraccion-lesson-personalization section.lesson-block.lesson-style-sky .lesson-block__table thead th:first-child,
section.lesson-block.lesson-style-sky .lesson-block__table thead th:first-child {
    color: #4A90E2 !important;
}

.respiraccion-lesson-personalization section.lesson-block.lesson-style-sky .lesson-block__table thead th:last-child,
section.lesson-block.lesson-style-sky .lesson-block__table thead th:last-child {
    color: #4A90E2 !important;
}

.respiraccion-lesson-personalization section.lesson-block.lesson-style-dark .lesson-block__table thead th:first-child,
section.lesson-block.lesson-style-dark .lesson-block__table thead th:first-child {
    color: #0284c7 !important;
}

.respiraccion-lesson-personalization section.lesson-block.lesson-style-dark .lesson-block__table thead th:last-child,
section.lesson-block.lesson-style-dark .lesson-block__table thead th:last-child {
    color: #0284c7 !important;
}

.lesson-block__table tbody td {
    padding: 15px 20px;
    border: 1px solid #d4eaf7;
    background-color: #f0f8ff;
    vertical-align: top;
}

.lesson-block__table tbody td p {
    margin: 0;
    font-weight: 600;
    color: #333;
}

.lesson-block__table tbody td small {
    color: #555;
    font-size: 0.9rem;
    display: block;
    margin-top: 5px;
}

.lesson-block__table blockquote {
    margin: 30px 0 0 0;
    padding: 15px 20px;
    border-left: 4px solid #ae873e;
    background-color: #fffde7;
    font-size: 0.95rem;
    color: #333;
    border-radius: 0 8px 8px 0;
}

.lesson-block__table blockquote p {
    margin: 0;
    font-style: italic;
}

/* Override colors para blockquotes de tabla */
.respiraccion-lesson-personalization section.lesson-block.lesson-style-forest .lesson-block__table blockquote,
section.lesson-block.lesson-style-forest .lesson-block__table blockquote {
    border-left-color: #059669 !important;
    background-color: rgba(240, 253, 244, 0.9) !important;
}

.respiraccion-lesson-personalization section.lesson-block.lesson-style-ocean .lesson-block__table blockquote,
section.lesson-block.lesson-style-ocean .lesson-block__table blockquote {
    border-left-color: #0077b6 !important;
    background-color: rgba(230, 247, 255, 0.9) !important;
}

.respiraccion-lesson-personalization section.lesson-block.lesson-style-focus .lesson-block__table blockquote,
section.lesson-block.lesson-style-focus .lesson-block__table blockquote {
    border-left-color: #C89B3C !important;
    background-color: rgba(255, 249, 239, 0.9) !important;
}

.respiraccion-lesson-personalization section.lesson-block.lesson-style-earth .lesson-block__table blockquote,
section.lesson-block.lesson-style-earth .lesson-block__table blockquote {
    border-left-color: #c47a29 !important;
    background-color: rgba(253, 243, 218, 0.9) !important;
}

.respiraccion-lesson-personalization section.lesson-block.lesson-style-sky .lesson-block__table blockquote,
section.lesson-block.lesson-style-sky .lesson-block__table blockquote {
    border-left-color: #4A90E2 !important;
    background-color: rgba(240, 249, 255, 0.9) !important;
}

.respiraccion-lesson-personalization section.lesson-block.lesson-style-dark .lesson-block__table blockquote,
section.lesson-block.lesson-style-dark .lesson-block__table blockquote {
    border-left-color: #0284c7 !important;
    background-color: rgba(255, 247, 237, 0.9) !important;
}

/* Mofidicado para separar visualmente el cuerpo y la cita */
.lesson-block--study_reference {
    /* Quitamos estilos del contenedor principal para dárselos a los hijos */
    background: transparent !important;
    border-left: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    /* El padding lo tendrán los bloques internos */
}

/* El cuerpo ahora lleva el estilo "Azul" original */
.lesson-study-reference__summary {
    background: rgba(236, 249, 255, 0.95);
    border-left: 4px solid #0ea5e9;
    box-shadow: 0 10px 30px -20px rgba(14, 165, 233, 0.2);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.25rem;
    color: var(--lesson-text, #334155);
}

/* Asegurar que el last-child no tenga margen inferior excesivo si es el único */
.lesson-study-reference__summary:last-child {
    margin-bottom: 0;
}

/* Nuevo contenedor para la cita con estilo "Dorado/Naranja" */
.lesson-study-reference__citation-box {
    background: rgba(255, 249, 239, 0.95);
    border-left: 4px solid #C89B3C;
    /* Gold */
    box-shadow: 0 10px 30px -20px rgba(200, 155, 60, 0.2);
    border-radius: 12px;
    padding: 1.25rem;
    margin-top: 1rem;
}

.lesson-study-reference__headline {
    margin: 0;
    font-size: 0.95rem;
    color: var(--lesson-heading, #5D4037);
    line-height: 1.5;
}

.lesson-study-reference__headline a {
    font-weight: 700;
    color: #0369a1;
    text-decoration: none;
}

.lesson-study-reference__headline a:hover {
    text-decoration: underline;
}

.lesson-study-reference__source {
    display: block;
    /* Poner la fuente en nueva línea para más limpieza */
    margin-top: 0.25rem;
    font-size: 0.9rem;
    color: #64748b;
    font-style: italic;
}

.lesson-block--warning_power {
    background: linear-gradient(140deg, #fff4db 0%, #ffe6c5 100%) !important;
    border: 1px solid rgba(200, 155, 60, 0.35) !important;
    box-shadow: 0 30px 55px -35px rgba(97, 65, 12, 0.45) !important;
    border-radius: 26px !important;
    padding: 1.75rem !important;
    text-align: left !important;
    color: #3b2213 !important;
}

.warning-power {
    display: block;
    text-align: left;
}


.warning-power__body {
    text-align: left;
}

.warning-power__title {
    font-size: clamp(1.5rem, 2vw, 1.8rem);
    color: #1f2937;
    font-weight: 700;
    margin-bottom: 0.75rem;
    letter-spacing: -0.01em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.warning-power__content {
    color: #3b2a1f;
    font-size: 1.05rem;
    line-height: 1.75;
}

/* Hero_science: emular el header del template HTML - gradiente azul oscuro, borde dorado, TODO dentro del box */
section.lesson-block.lesson-block--hero_science {
    text-align: center !important;
    background: linear-gradient(145deg, #1f4e79 0%, #102a43 100%) !important;
    color: #fff !important;
    border-radius: 26px !important;
    padding: clamp(2rem, 4vw, 3.25rem) !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25) !important;
    border: 2px solid #c89b3c !important;
    position: relative;
    overflow: hidden;
    margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem) !important;
}

section.lesson-block.lesson-block--hero_science .lesson-block__title {
    font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
    margin: 0 0 0.5rem !important;
    color: #ffffff !important;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

section.lesson-block.lesson-block--hero_science .lesson-block__subtitle {
    margin: 0 0 1rem !important;
    color: #e2e8f0 !important;
    font-size: 1rem;
}

section.lesson-block.lesson-block--hero_science p,
section.lesson-block.lesson-block--hero_science .lesson-block__content-text,
section.lesson-block.lesson-block--hero_science div {
    color: #ffffff !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 0 1rem 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Eliminar cualquier estilo de box en elementos internos de hero_science */
section.lesson-block.lesson-block--hero_science .lesson-block__content-text,
section.lesson-block.lesson-block--hero_science .lesson-block__content-subtitle,
section.lesson-block.lesson-block--hero_science div[class*="content"] {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Hover en hero_science - solo en el bloque principal, no en elementos internos */
section.lesson-block.lesson-block--hero_science *:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Efecto hover del template HTML - gradiente azul claro a teal, borde blanco, elevación */
section.lesson-block.lesson-block--hero_science:hover {
    background: linear-gradient(145deg, #4a90e2 0%, #50e3c2 100%) !important;
    border-color: #ffffff !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35) !important;
    transition: all 0.3s ease !important;
}

/* Asegurar que otros bloques tengan boxes normales */
section.lesson-block:not(.lesson-block--hero_science):not(.lesson-block--warning_power) {
    background: rgba(255, 255, 255, 0.92) !important;
    color: #0f172a !important;
    border: none !important;
    text-align: left !important;
    padding: clamp(1.25rem, 3vw, 1.8rem) !important;
    border-radius: 20px !important;
    box-shadow: 0 18px 40px -30px rgba(15, 23, 42, 0.35) !important;
}

/* Regla adicional con máxima especificidad para section - ESTILO EXACTO DEL TEMPLATE */
/* Replicar EXACTAMENTE: <h2 class="text-2xl font-bold section-title mb-2"> */
/* AUMENTAR tamaño - el usuario dice que 24px está muy chico */
/* NO SUBRAYADO - el template solo define .section-title { color: #5D4037; } */
/* Regla con máxima especificidad para section - TODOS los bloques excepto hero_science */
section.lesson-block:not(.lesson-block--hero_science) h2.lesson-block__title,
section.lesson-block:not(.lesson-block--hero_science) .lesson-block__title,
section.lesson-block:not(.lesson-block--hero_science) h2,
section.lesson-block:not(.lesson-block--hero_science) h2.text-2xl,
section.lesson-block:not(.lesson-block--hero_science) .lesson-block__title.text-2xl {
    color: #5D4037 !important;
    /* Color EXACTO section-title del template */
    font-size: 1.875rem !important;
    /* AUMENTADO de 1.5rem (24px) a 30px */
    font-size: 30px !important;
    /* AUMENTADO - estaba muy chico */
    font-weight: 700 !important;
    /* font-bold de Tailwind */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    /* Sombra sutil como el template */
    font-family: 'Montserrat', sans-serif !important;
    letter-spacing: -0.025em !important;
    margin-bottom: 0.5rem !important;
    /* mb-2 en el template */
    text-decoration: none !important;
    /* NO subrayado - igual que el template */
    line-height: 1.5 !important;
    /* Tailwind default para text-2xl */
}

@media (max-width: 768px) {
    section.lesson-block:not(.lesson-block--hero_science) .lesson-block__title {
        font-size: 1.35rem !important;
        line-height: 1.4 !important;
        margin-bottom: 6px !important;
        margin-top: 2px !important;
    }
}

section.lesson-block:not(.lesson-block--hero_science) p,
section.lesson-block:not(.lesson-block--hero_science) .lesson-block__content-text {
    color: #475569 !important;
}

.lesson-block--practice {
    background: #ffffff !important;
    border-radius: 22px !important;
    padding: clamp(1.5rem, 3vw, 2.25rem) !important;
    box-shadow: 0 15px 40px -25px rgba(16, 42, 67, 0.45) !important;
    border: 1px solid rgba(31, 78, 121, 0.12) !important;
}

.lesson-block--practice .practice-block__meta {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.lesson-block--practice .practice-block__level,
.lesson-block--practice .practice-block__duration {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: rgba(31, 78, 121, 0.08);
    color: var(--resp-blue);
    font-weight: 600;
    font-size: 0.9rem;
}

.lesson-block--practice .practice-block__steps {
    margin: 1rem 0;
    padding-left: 1.25rem;
    line-height: 1.7;
    color: var(--lesson-text);
}

.lesson-block--practice .practice-block__steps li {
    margin-bottom: 0.6rem;
}

.lesson-block--practice .practice-block__media {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    font-weight: 600;
    color: var(--resp-blue);
    text-decoration: none;
}

.lesson-block--practice .practice-block__media:hover {
    text-decoration: underline;
}

/* Mobile - Hero Science edge-to-edge */
@media (max-width: 768px) {
    .lesson-block--hero_science {
        padding: 1.5rem 0.85rem !important;
        /* Mismo padding que otros bloques */
        border-radius: 16px !important;
        min-height: 220px !important;
        margin-left: 0.5rem !important;
        /* Solo 8px margen */
        margin-right: 0.5rem !important;
        /* Solo 8px margen */
    }

    /* Iconos en mobile - tamaño reducido para mejor proporción */
    .lesson-block__icon-circle {
        width: 80px !important;
        height: 80px !important;
        margin-bottom: 0.85rem !important;
    }

    .lesson-block__icon-circle img,
    .lesson-block__icon-circle svg,
    .lesson-block__icon-circle .preset-icon {
        width: 48px !important;
        height: 48px !important;
        max-width: 48px !important;
        max-height: 48px !important;
    }

    /* Tablas - scroll horizontal suave */
    .lesson-block__table,
    .lesson-table-responsive {
        margin-left: -0.5rem !important;
        margin-right: -0.5rem !important;
        width: calc(100% + 1rem) !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Warning power block edge-to-edge */
    .lesson-block--warning_power {
        padding: 1.5rem 0.85rem !important;
        margin-left: 0.5rem !important;
        margin-right: 0.5rem !important;
    }
}

/* Tablet - Transición suave entre mobile y desktop */
@media (min-width: 769px) and (max-width: 1024px) {
    .respiraccion-lesson-personalization {
        padding: 0.75rem 1rem;
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }

    .lesson-block:not(.lesson-block--hero_science):not(.lesson-block--warning_power) {
        padding: 1.5rem 1.25rem !important;
    }

    /* Párrafos en tablet - tamaño intermedio */
    .respiraccion-lesson-personalization p,
    .lesson-block p {
        font-size: 1.075rem !important;
        line-height: 1.7 !important;
    }
}

/* ===== RICH TEXT UTILITY STYLES - Para uso en WYSIWYG ===== */
/* Estas clases pueden aplicarse a elementos dentro del editor para mejorar la presentación */

/* Callout Box - Caja destacada con borde y fondo */
.respiraccion-lesson-personalization .rich-callout,
.rich-callout {
    background: linear-gradient(145deg, rgba(var(--lesson-accent-rgb, 2, 132, 199), 0.08) 0%, rgba(var(--lesson-accent-rgb, 2, 132, 199), 0.02) 100%);
    border-left: 4px solid var(--lesson-accent, #0284c7);
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
    border-radius: 12px;
    box-shadow: 0 4px 12px -8px rgba(0, 0, 0, 0.15);
}

.rich-callout strong:first-child,
.rich-callout b:first-child {
    display: block;
    color: var(--lesson-heading, #102a43);
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
}

/* Emphasis Box - Texto enfatizado con fondo suave */
.respiraccion-lesson-personalization .rich-emphasis,
.rich-emphasis {
    background: rgba(200, 155, 60, 0.12);
    padding: 0.75rem 1.25rem;
    margin: 1rem 0;
    border-radius: 10px;
    border-left: 3px solid var(--resp-gold, #c89b3c);
    font-weight: 500;
    font-size: 1.05rem;
}

/* Tip Box - Consejo o sugerencia */
.respiraccion-lesson-personalization .rich-tip,
.rich-tip {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 2px solid rgba(14, 165, 233, 0.3);
    padding: 1.25rem;
    margin: 1.5rem 0;
    border-radius: 14px;
    position: relative;
    padding-left: 3.5rem;
}

.rich-tip::before {
    content: '💡';
    position: absolute;
    left: 1.25rem;
    top: 1.25rem;
    font-size: 1.5rem;
}

/* Card Style - Tarjeta con sombra */
.respiraccion-lesson-personalization .rich-card,
.rich-card {
    background: rgba(255, 255, 255, 0.98);
    border-radius: 16px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    box-shadow: 0 8px 24px -12px rgba(15, 23, 42, 0.25);
    border: 1px solid rgba(148, 163, 184, 0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.rich-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px -16px rgba(15, 23, 42, 0.35);
}

/* Grid Layout - Disposición en grilla */
.respiraccion-lesson-personalization .rich-grid,
.rich-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    margin: 1.5rem 0;
}

.rich-grid>* {
    background: rgba(255, 255, 255, 0.95);
    padding: 1.25rem;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    box-shadow: 0 4px 12px -8px rgba(0, 0, 0, 0.12);
}

/* Steps List - Lista de pasos numerados */
.respiraccion-lesson-personalization .rich-steps,
.rich-steps {
    counter-reset: step-counter;
    list-style: none;
    padding-left: 0;
    margin: 1.5rem 0;
}

.rich-steps li {
    counter-increment: step-counter;
    position: relative;
    padding-left: 3.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}

.rich-steps li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.rich-steps li::before {
    content: counter(step-counter);
    position: absolute;
    left: 0;
    top: 0;
    width: 2.5rem;
    height: 2.5rem;
    background: var(--lesson-accent, #0284c7);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.15rem;
    box-shadow: 0 4px 12px -6px rgba(2, 132, 199, 0.5);
}

/* Inline Quote - Cita en línea destacada */
.respiraccion-lesson-personalization .rich-quote-inline,
.rich-quote-inline {
    font-size: 1.2rem;
    font-style: italic;
    color: var(--lesson-heading, #102a43);
    padding: 1rem 1.5rem 1rem 3rem;
    margin: 1.5rem 0;
    position: relative;
    border-left: 4px solid var(--lesson-accent, #0284c7);
    background: rgba(2, 132, 199, 0.04);
    border-radius: 8px;
}

.rich-quote-inline::before {
    content: '"';
    position: absolute;
    left: 1rem;
    top: 0.5rem;
    font-size: 3rem;
    color: var(--lesson-accent, #0284c7);
    opacity: 0.3;
    font-family: Georgia, serif;
    line-height: 1;
}

/* Highlight Text - Texto resaltado con marcador */
.respiraccion-lesson-personalization .rich-highlight,
.rich-highlight {
    background: linear-gradient(180deg, transparent 50%, rgba(200, 155, 60, 0.3) 50%);
    padding: 0.125rem 0.25rem;
    border-radius: 2px;
    font-weight: 600;
}

/* Subtitle Enhancement - Subtítulos más impactantes */
.respiraccion-lesson-personalization .rich-subtitle,
.rich-subtitle {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--lesson-heading, #102a43);
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--lesson-accent, #0284c7);
    display: inline-block;
}

/* Warning Inline - Advertencia en línea */
.respiraccion-lesson-personalization .rich-warning,
.rich-warning {
    background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
    border-left: 4px solid #f59e0b;
    padding: 1rem 1.25rem 1rem 3rem;
    margin: 1.25rem 0;
    border-radius: 10px;
    position: relative;
}

.rich-warning::before {
    content: '⚠️';
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.25rem;
}

/* Success Box - Caja de éxito o logro */
.respiraccion-lesson-personalization .rich-success,
.rich-success {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-left: 4px solid #22c55e;
    padding: 1rem 1.25rem 1rem 3rem;
    margin: 1.25rem 0;
    border-radius: 10px;
    position: relative;
}

.rich-success::before {
    content: '✓';
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    color: #22c55e;
    font-weight: 700;
}

/* Responsive adjustments for rich text utilities */
@media (max-width: 768px) {

    .rich-card,
    .rich-callout,
    .rich-tip {
        padding: 1rem;
        margin: 1rem 0;
    }

    .rich-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .rich-steps li {
        padding-left: 3rem;
    }

    .rich-steps li::before {
        width: 2rem;
        height: 2rem;
        font-size: 1rem;
    }
}

/* ===== CONTENT-LEVEL STYLES - Estilos por sección individual ===== */
/* Estos estilos se aplican a nivel de cada subtítulo+párrafo dentro de un bloque */

/* Base para todos los content-items */
.lesson-content-item {
    margin-bottom: 1.5rem;
}

.lesson-content-item:last-child {
    margin-bottom: 0;
}

/* Mini Card - Tarjeta completa con fondo y sombra */
.lesson-content-item.content-style-mini-card {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 4px 12px -6px rgba(15, 23, 42, 0.2);
    border: 1px solid rgba(148, 163, 184, 0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lesson-content-item.content-style-mini-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px -8px rgba(15, 23, 42, 0.3);
}

.lesson-content-item.content-style-mini-card .lesson-block__content-subtitle {
    margin-top: 0;
    color: var(--lesson-heading, #102a43);
}

/* Pseudo-bloque - Separación sutil con borde lateral */
.lesson-content-item.content-style-pseudo-block {
    padding-left: 1.25rem;
    border-left: 3px solid var(--lesson-accent, #0284c7);
    background: linear-gradient(90deg, rgba(var(--lesson-accent-rgb, 2, 132, 199), 0.04) 0%, transparent 100%);
    padding: 0.75rem 1rem 0.75rem 1.25rem;
    border-radius: 0 8px 8px 0;
    margin-left: 0.25rem;
}

.lesson-content-item.content-style-pseudo-block .lesson-block__content-subtitle {
    margin-top: 0;
    color: var(--lesson-heading, #102a43);
    font-weight: 600;
}

/* Callout - Destacado con fondo suave */
.lesson-content-item.content-style-callout {
    background: linear-gradient(145deg, rgba(var(--lesson-accent-rgb, 2, 132, 199), 0.06) 0%, rgba(var(--lesson-accent-rgb, 2, 132, 199), 0.02) 100%);
    border-left: 3px solid var(--lesson-accent, #0284c7);
    padding: 1rem 1.25rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px -4px rgba(0, 0, 0, 0.1);
}

.lesson-content-item.content-style-callout .lesson-block__content-subtitle {
    margin-top: 0;
    color: var(--lesson-heading, #102a43);
    font-weight: 600;
    font-size: 1.1rem;
}

/* Énfasis - Fondo dorado sutil */
.lesson-content-item.content-style-emphasis {
    background: rgba(200, 155, 60, 0.08);
    padding: 0.85rem 1.15rem;
    border-radius: 8px;
    border-left: 2px solid var(--resp-gold, #c89b3c);
    font-weight: 500;
}

.lesson-content-item.content-style-emphasis .lesson-block__content-subtitle {
    margin-top: 0;
    color: #8b6914;
    font-weight: 600;
}

.lesson-content-item.content-style-emphasis .lesson-block__content-text {
    color: #5d4a10;
}

/* Espaciado mejorado dentro de content-items con estilo */
.lesson-content-item.content-style-mini-card .lesson-block__content-subtitle,
.lesson-content-item.content-style-pseudo-block .lesson-block__content-subtitle,
.lesson-content-item.content-style-callout .lesson-block__content-subtitle,
.lesson-content-item.content-style-emphasis .lesson-block__content-subtitle {
    margin-bottom: 0.5rem;
}

/* Responsive para content-level styles */
@media (max-width: 768px) {

    .lesson-content-item.content-style-mini-card,
    .lesson-content-item.content-style-callout {
        padding: 0.85rem 1rem;
    }

    .lesson-content-item.content-style-pseudo-block {
        padding: 0.6rem 0.85rem 0.6rem 1rem;
    }

    .lesson-content-item.content-style-emphasis {
        padding: 0.7rem 0.95rem;
    }
}

/* Responsive Table Wrapper */
.lesson-table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
    border-radius: 12px;
}

/* Ensure table doesn't shrink too much */
.lesson-table-responsive table {
    min-width: 600px;
    /* Force minimum width to trigger scroll on small screens */
    margin: 0 !important;
    /* Reset margin inside wrapper */
    box-shadow: none !important;
    /* Shadow on wrapper if needed, or keep on table but clip */
}

/* ============================================================
   ENHANCED SHADOW EFFECTS FOR TITLES AND SUBTITLES
   Efecto de sombra premium para todos los títulos y subtítulos
   Sombras VISIBLES y prominentes
   ============================================================ */

/* ==============================================
   TÍTULOS (H2) - Sombra prominente y visible
   ============================================== */
.lesson-block h2,
.lesson-block h2.lesson-block__title,
.lesson-block .lesson-block__title,
section.lesson-block h2,
section.lesson-block h2.lesson-block__title,
section.lesson-block .lesson-block__title,
.respiraccion-lesson-personalization .lesson-block h2,
.respiraccion-lesson-personalization .lesson-block h2.lesson-block__title,
.respiraccion-lesson-personalization .lesson-block .lesson-block__title,
.respiraccion-lesson-personalization section.lesson-block h2,
.respiraccion-lesson-personalization section.lesson-block h2.lesson-block__title,
h2.lesson-block__title,
h2.text-2xl.font-bold.section-title,
.text-2xl.font-bold.section-title {
    text-shadow:
        /* Sombra principal - 15% menos intensidad */
        1px 2px 3px rgba(0, 0, 0, 0.30),
        /* Sombra exterior difusa */
        2px 4px 8px rgba(0, 0, 0, 0.17),
        /* Glow sutil para profundidad */
        0 0 12px rgba(16, 42, 67, 0.12) !important;
}

/* ==============================================
   SUBTÍTULOS (H3) - Sombra visible
   ============================================== */
.lesson-block h3,
.lesson-block h3.lesson-block__title,
section.lesson-block h3,
section.lesson-block h3.lesson-block__title,
.respiraccion-lesson-personalization .lesson-block h3,
.respiraccion-lesson-personalization .lesson-block h3.lesson-block__title,
.respiraccion-lesson-personalization section.lesson-block h3,
h3.lesson-block__title {
    text-shadow:
        1px 2px 3px rgba(0, 0, 0, 0.35),
        2px 4px 8px rgba(0, 0, 0, 0.2),
        0 0 12px rgba(16, 42, 67, 0.15) !important;
}

/* ==============================================
   SUBTÍTULOS DE CONTENIDO (H4) - Sombra media
   ============================================== */
.lesson-block h4,
.lesson-block h4.lesson-block__content-subtitle,
.lesson-block .lesson-block__content-subtitle,
section.lesson-block h4,
section.lesson-block h4.lesson-block__content-subtitle,
section.lesson-block .lesson-block__content-subtitle,
.respiraccion-lesson-personalization .lesson-block h4,
.respiraccion-lesson-personalization .lesson-block h4.lesson-block__content-subtitle,
.respiraccion-lesson-personalization .lesson-block .lesson-block__content-subtitle,
.respiraccion-lesson-personalization section.lesson-block h4,
.respiraccion-lesson-personalization section.lesson-block h4.lesson-block__content-subtitle,
h4.lesson-block__content-subtitle {
    text-shadow:
        1px 1px 2px rgba(0, 0, 0, 0.3),
        1px 3px 6px rgba(0, 0, 0, 0.15) !important;
}

/* ==============================================
   SUBTÍTULOS PÁRRAFO (.lesson-block__subtitle)
   ============================================== */
.lesson-block .lesson-block__subtitle,
.lesson-block p.lesson-block__subtitle,
section.lesson-block .lesson-block__subtitle,
section.lesson-block p.lesson-block__subtitle,
.respiraccion-lesson-personalization .lesson-block .lesson-block__subtitle,
.respiraccion-lesson-personalization .lesson-block p.lesson-block__subtitle,
.respiraccion-lesson-personalization section.lesson-block .lesson-block__subtitle,
p.lesson-block__subtitle {
    text-shadow:
        1px 1px 2px rgba(0, 0, 0, 0.25),
        1px 2px 5px rgba(0, 0, 0, 0.12) !important;
}

/* ==============================================
   HERO SCIENCE - Sombras especiales para fondo azul
   ============================================== */
section.lesson-block.lesson-block--hero_science h2,
section.lesson-block.lesson-block--hero_science h3,
section.lesson-block.lesson-block--hero_science .lesson-block__title,
.lesson-block.lesson-block--hero_science h2,
.lesson-block.lesson-block--hero_science h3,
.lesson-block.lesson-block--hero_science .lesson-block__title {
    text-shadow:
        /* Sombra profunda para contraste sobre fondo azul */
        2px 3px 6px rgba(0, 0, 0, 0.4),
        3px 6px 15px rgba(0, 0, 0, 0.25),
        /* Glow blanco sutil */
        0 0 25px rgba(255, 255, 255, 0.15) !important;
}

section.lesson-block.lesson-block--hero_science h4,
section.lesson-block.lesson-block--hero_science .lesson-block__subtitle,
section.lesson-block.lesson-block--hero_science .lesson-block__content-subtitle,
.lesson-block.lesson-block--hero_science h4,
.lesson-block.lesson-block--hero_science .lesson-block__subtitle,
.lesson-block.lesson-block--hero_science .lesson-block__content-subtitle {
    text-shadow:
        1px 2px 4px rgba(0, 0, 0, 0.35),
        2px 4px 10px rgba(0, 0, 0, 0.2) !important;
}

/* ==============================================
   RICH SUBTITLE - Sombra para subtítulos estilizados
   ============================================== */
.respiraccion-lesson-personalization .rich-subtitle,
.rich-subtitle {
    text-shadow:
        1px 1px 2px rgba(0, 0, 0, 0.3),
        1px 3px 6px rgba(0, 0, 0, 0.15) !important;
}