/* ============================================================
   HUMANIZACION DEL SERVICIO EN LA PRIMERA INFANCIA
   CSS encapsulado para Moodle - scope: .curso-humanizacion
   Ubicacion: /public_html/public/theme/own-styles/estilo_cursohum.css
   Docente: Orlando de Jesus Carcamo Berrio - COMFAGUAJIRA - Riohacha 2026
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Nunito:wght@400;500;600;700;800&display=swap');




:root {
    /* Paleta del curso */
    --turquesa: #00A9A5;
    --turquesa-osc: #007C79;
    --amarillo: #FFC845;
    --coral: #FF6B6B;
    --verde: #7FB800;
    --morado: #6A4C93;
    --gris: #3E3A39;
    --gris-suave: #6B6664;
    --crema: #FFF9F0;
    --crema-hueso: #FDF3E3;
    --blanco: #FFF;
    --sombra: 0 6px 24px rgba(106, 76, 147, 0.1);
    --sombra-suave: 0 2px 10px rgba(62, 58, 57, 0.06);
    --radio: 18px;
    --radio-sm: 12px;
    /* Colores por sesión */
    --s1: #00A9A5;
    --s2: #7FB800;
    --s3: #6A4C93;
    --s4: #FF6B6B
    }

.curso-humanizacion * {
    margin: 0;
    padding: 0;
    box-sizing: border-box
    }
.curso-humanizacion {
    font-family: "Nunito", system-ui, -apple-system, sans-serif;
    color: var(--gris);
    background: radial-gradient(circle at 12% 8%, rgba(255, 200, 69, 0.1), transparent 32%), radial-gradient(circle at 88% 4%, rgba(0, 169, 165, 0.08), transparent 30%), var(--crema);
    line-height: 1.65;
    font-size: 17px;
    -webkit-font-smoothing: antialiased
    }
.curso-humanizacion h1, .curso-humanizacion h2, .curso-humanizacion h3, .curso-humanizacion .display {
    font-family: "Fraunces", Georgia, serif;
    line-height: 1.2;
    color: var(--gris);
    font-weight: 600
    }
.curso-humanizacion .contenedor {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px
    }
.curso-humanizacion .hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--turquesa) 0%, var(--turquesa-osc) 100%);
    color: var(--blanco);
    padding: 68px 0 92px;
    text-align: center
    }
.curso-humanizacion .hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 60px;
    background: var(--crema);
    border-radius: 50% 50% 0 0/100% 100% 0 0;
    transform: scalex(1.5)
    }
.curso-humanizacion .hero__eyebrow {
    display: inline-block;
    background: rgba(255, 255, 255, 0.16);
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    padding: 7px 18px;
    border-radius: 100px;
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    margin-bottom: 22px
    }
.curso-humanizacion .hero h1 {
    color: var(--blanco);
    font-size: clamp(2.1rem, 5vw, 3.4rem);
    font-weight: 600;
    max-width: 16ch;
    margin: 0 auto 18px
    }
.curso-humanizacion .hero p {
    font-size: 1.12rem;
    max-width: 54ch;
    margin: 0 auto;
    opacity: 0.95
    }
.curso-humanizacion .hero__meta {
    margin-top: 30px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center
    }
.curso-humanizacion .hero__chip {
    background: rgba(255, 255, 255, 0.14);
    padding: 9px 16px;
    border-radius: 100px;
    font-size: 0.9rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 7px
    }
.curso-humanizacion .seccion {
    padding: 54px 0
    }
.curso-humanizacion .seccion--tight {
    padding: 34px 0
    }
.curso-humanizacion .ficha {
    background: var(--blanco);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 30px 34px;
    margin-top: -54px;
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 22px 30px;
    border-top: 5px solid var(--amarillo)
    }
.curso-humanizacion .ficha__item .k {
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--turquesa-osc);
    margin-bottom: 3px
    }
.curso-humanizacion .ficha__item .v {
    font-weight: 600;
    color: var(--gris)
    }
.curso-humanizacion .titulo-seccion {
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    margin-bottom: 8px;
    color: var(--turquesa-osc)
    }
.curso-humanizacion .titulo-seccion + .subtitulo {
    color: var(--gris-suave);
    margin-bottom: 30px;
    font-size: 1.05rem;
    max-width: 62ch
    }
.curso-humanizacion .intro-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 26px;
    align-items: start
    }
@media (max-width: 760px) {
    .curso-humanizacion .intro-grid {
        grid-template-columns: 1fr
        }
    }
.curso-humanizacion .prosa p {
    margin-bottom: 16px
    }
.curso-humanizacion .prosa .cita {
    font-style: italic;
    color: var(--gris-suave)
    }
.curso-humanizacion .caja {
    border-radius: var(--radio);
    padding: 24px 26px;
    border-left: 6px solid var(--turquesa);
    background: var(--blanco);
    box-shadow: var(--sombra-suave)
    }
.curso-humanizacion .caja h3 {
    font-size: 1.12rem;
    margin-bottom: 8px
    }
.curso-humanizacion .caja--verde {
    border-left-color: var(--verde);
    background: #f6faec
    }
.curso-humanizacion .caja--amarillo {
    border-left-color: var(--amarillo);
    background: #fff6e2
    }
.curso-humanizacion .caja--coral {
    border-left-color: var(--coral);
    background: #fff0f0
    }
.curso-humanizacion .caja--morado {
    border-left-color: var(--morado);
    background: #f3eef9
    }
.curso-humanizacion .caja--turquesa {
    border-left-color: var(--turquesa);
    background: #e8f7f6
    }
.curso-humanizacion .caja .etq {
    font-weight: 800;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--turquesa-osc)
    }
.curso-humanizacion .caja--verde .etq {
    color: #5a8500
    }
.curso-humanizacion .caja--amarillo .etq {
    color: #b5820a
    }
.curso-humanizacion .caja--coral .etq {
    color: #d64545
    }
.curso-humanizacion .caja--morado .etq {
    color: var(--morado)
    }
.curso-humanizacion .tabs {
    margin-top: 8px
    }
.curso-humanizacion .tabs__nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 26px
    }
@media (max-width: 680px) {
    .curso-humanizacion .tabs__nav {
        grid-template-columns: repeat(2, 1fr)
        }
    }
.curso-humanizacion .tab-btn {
    border: none;
    cursor: pointer;
    font-family: "Nunito", sans-serif;
    background: var(--blanco);
    border-radius: var(--radio-sm);
    padding: 16px 14px;
    text-align: left;
    box-shadow: var(--sombra-suave);
    border-bottom: 4px solid transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease
    }
.curso-humanizacion .tab-btn:hover {
    transform: translatey(-3px);
    box-shadow: var(--sombra)
    }
.curso-humanizacion .tab-btn .n {
    font-family: "Fraunces", serif;
    font-size: 1.7rem;
    font-weight: 600;
    display: block;
    line-height: 1
    }
.curso-humanizacion .tab-btn .t {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--gris);
    display: block;
    margin-top: 4px
    }
.curso-humanizacion .tab-btn .f {
    font-size: 0.76rem;
    color: var(--gris-suave);
    font-weight: 600
    }
.curso-humanizacion .tab-btn[data-s="1"] .n {
    color: var(--s1)
    }
.curso-humanizacion .tab-btn[data-s="2"] .n {
    color: var(--s2)
    }
.curso-humanizacion .tab-btn[data-s="3"] .n {
    color: var(--s3)
    }
.curso-humanizacion .tab-btn[data-s="4"] .n {
    color: var(--s4)
    }
.curso-humanizacion .tab-btn.activo[data-s="1"] {
    border-bottom-color: var(--s1);
    background: #e8f7f6
    }
.curso-humanizacion .tab-btn.activo[data-s="2"] {
    border-bottom-color: var(--s2);
    background: #f6faec
    }
.curso-humanizacion .tab-btn.activo[data-s="3"] {
    border-bottom-color: var(--s3);
    background: #f3eef9
    }
.curso-humanizacion .tab-btn.activo[data-s="4"] {
    border-bottom-color: var(--s4);
    background: #fff0f0
    }
.curso-humanizacion .tab-btn:focus-visible {
    outline: 3px solid var(--amarillo);
    outline-offset: 2px
    }
.curso-humanizacion .panel {
    display: none;
    animation: aparece 0.35s ease
    }
.curso-humanizacion .panel.activo {
    display: block
    }
@keyframes aparece {
    from {
        opacity: 0;
        transform: translateY(8px);
        } to {
        opacity: 1;
        transform: none;
        }
    }
.curso-humanizacion .panel__cabecera {
    border-radius: var(--radio);
    padding: 28px 30px;
    color: var(--blanco);
    margin-bottom: 24px
    }
.curso-humanizacion .panel__cabecera .n {
    font-weight: 800;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.9
    }
.curso-humanizacion .panel__cabecera h2 {
    color: var(--blanco);
    font-size: clamp(1.5rem, 3.5vw, 2.1rem);
    margin-top: 4px
    }
.curso-humanizacion .panel__cabecera .ra {
    margin-top: 12px;
    font-weight: 500;
    max-width: 66ch;
    opacity: 0.97
    }
.curso-humanizacion .panel[data-s="1"] .panel__cabecera {
    background: linear-gradient(135deg, var(--s1), var(--turquesa-osc))
    }
.curso-humanizacion .panel[data-s="2"] .panel__cabecera {
    background: linear-gradient(135deg, var(--s2), #5a8500)
    }
.curso-humanizacion .panel[data-s="3"] .panel__cabecera {
    background: linear-gradient(135deg, var(--s3), #4a3468)
    }
.curso-humanizacion .panel[data-s="4"] .panel__cabecera {
    background: linear-gradient(135deg, var(--s4), #d64545)
    }
.curso-humanizacion .saberes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 24px
    }
@media (max-width: 720px) {
    .curso-humanizacion .saberes {
        grid-template-columns: 1fr
        }
    }
.curso-humanizacion .saber {
    background: var(--blanco);
    border-radius: var(--radio-sm);
    padding: 18px 20px;
    box-shadow: var(--sombra-suave);
    border-top: 4px solid var(--turquesa)
    }
.curso-humanizacion .saber h4 {
    font-family: "Nunito";
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--turquesa-osc);
    font-weight: 800;
    margin-bottom: 8px
    }
.curso-humanizacion .saber p {
    font-size: 0.96rem
    }
.curso-humanizacion .panel[data-s="2"] .saber {
    border-top-color: var(--s2)
    }
.curso-humanizacion .panel[data-s="2"] .saber h4 {
    color: #5a8500
    }
.curso-humanizacion .panel[data-s="3"] .saber {
    border-top-color: var(--s3)
    }
.curso-humanizacion .panel[data-s="3"] .saber h4 {
    color: var(--morado)
    }
.curso-humanizacion .panel[data-s="4"] .saber {
    border-top-color: var(--s4)
    }
.curso-humanizacion .panel[data-s="4"] .saber h4 {
    color: #d64545
    }
.curso-humanizacion .subtitulo-bloque {
    font-size: 1.2rem;
    margin: 26px 0 12px;
    color: var(--gris)
    }
.curso-humanizacion .acordeon {
    display: flex;
    flex-direction: column;
    gap: 10px
    }
.curso-humanizacion .item {
    background: var(--blanco);
    border-radius: var(--radio-sm);
    box-shadow: var(--sombra-suave);
    overflow: hidden;
    border: 1.5px solid #f0e9dd
    }
.curso-humanizacion .item__cab {
    width: 100%;
    border: none;
    background: var(--blanco);
    cursor: pointer;
    font-family: "Nunito", sans-serif;
    text-align: left;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 1rem;
    color: var(--gris);
    transition: background 0.15s ease
    }
.curso-humanizacion .item__cab:hover {
    background: var(--crema-hueso)
    }
.curso-humanizacion .item__cab:focus-visible {
    outline: 3px solid var(--amarillo);
    outline-offset: -3px
    }
.curso-humanizacion .item__hora {
    font-weight: 800;
    font-size: 0.82rem;
    color: var(--turquesa-osc);
    background: #e8f7f6;
    padding: 5px 11px;
    border-radius: 100px;
    white-space: nowrap
    }
.curso-humanizacion .panel[data-s="2"] .item__hora {
    color: #5a8500;
    background: #f0f7dc
    }
.curso-humanizacion .panel[data-s="3"] .item__hora {
    color: var(--morado);
    background: #efe8f8
    }
.curso-humanizacion .panel[data-s="4"] .item__hora {
    color: #d64545;
    background: #ffe6e6
    }
.curso-humanizacion .item__titulo {
    font-weight: 700;
    flex: 1
    }
.curso-humanizacion .item__flecha {
    transition: transform 0.25s ease;
    color: var(--gris-suave);
    font-size: 1.2rem
    }
.curso-humanizacion .item.abierto .item__flecha {
    transform: rotate(180deg)
    }
.curso-humanizacion .item__cuerpo {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease
    }
.curso-humanizacion .item.abierto .item__cuerpo {
    max-height: 600px
    }
.curso-humanizacion .item__cuerpo-inner {
    padding: 4px 20px 20px 20px
    }
.curso-humanizacion .item__cuerpo-inner .rec {
    display: inline-block;
    margin-top: 10px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--morado);
    background: #f3eef9;
    padding: 4px 12px;
    border-radius: 100px
    }
.curso-humanizacion .doble {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 22px
    }
@media (max-width: 720px) {
    .curso-humanizacion .doble {
        grid-template-columns: 1fr
        }
    }
.curso-humanizacion .lista-limpia {
    list-style: none;
    margin-top: 8px
    }
.curso-humanizacion .lista-limpia li {
    padding-left: 24px;
    position: relative;
    margin-bottom: 8px
    }
.curso-humanizacion .lista-limpia li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--amarillo)
    }
.curso-humanizacion .tabla-eval {
    width: 100%;
    border-collapse: collapse;
    background: var(--blanco);
    border-radius: var(--radio);
    overflow: hidden;
    box-shadow: var(--sombra-suave)
    }
.curso-humanizacion .tabla-eval th {
    background: var(--turquesa);
    color: var(--blanco);
    padding: 13px 16px;
    text-align: left;
    font-size: 0.92rem
    }
.curso-humanizacion .tabla-eval td {
    padding: 12px 16px;
    border-bottom: 1px solid #f0e9dd;
    font-size: 0.95rem
    }
.curso-humanizacion .tabla-eval tr:nth-child(even) td {
    background: var(--crema)
    }
.curso-humanizacion .tabla-eval tr:last-child td {
    font-weight: 800;
    color: var(--turquesa-osc)
    }
.curso-humanizacion .tabla-eval .peso {
    font-weight: 800;
    color: var(--coral)
    }
.curso-humanizacion .ref {
    display: flex;
    gap: 14px;
    align-items: center;
    background: var(--blanco);
    border-radius: var(--radio-sm);
    padding: 16px 20px;
    box-shadow: var(--sombra-suave);
    margin-bottom: 10px;
    border-left: 5px solid var(--morado)
    }
.curso-humanizacion .ref__txt {
    flex: 1;
    font-size: 0.95rem
    }
.curso-humanizacion .ref__txt em {
    color: var(--gris-suave)
    }
.curso-humanizacion .ref__btn {
    white-space: nowrap;
    text-decoration: none;
    background: var(--morado);
    color: var(--blanco);
    padding: 9px 16px;
    border-radius: 100px;
    font-weight: 700;
    font-size: 0.85rem;
    transition: background 0.15s ease, transform 0.15s ease
    }
.curso-humanizacion .ref__btn:hover {
    background: #513a72;
    transform: translatey(-2px)
    }
.curso-humanizacion .pie {
    background: var(--morado);
    color: var(--blanco);
    text-align: center;
    padding: 40px 24px;
    margin-top: 50px
    }
.curso-humanizacion .pie strong {
    display: block;
    font-family: "Fraunces", serif;
    font-size: 1.2rem;
    margin-bottom: 6px
    }
.curso-humanizacion .pie p {
    opacity: 0.85;
    font-size: 0.92rem
    }
@media (prefers-reduced-motion: reduce) {
    .curso-humanizacion *, .curso-humanizacion *::before, .curso-humanizacion *::after {
        animation: none !important;
        transition: none !important
        }
    }

/* ============================================================
   COMPLEMENTO CSS · Hojas de lectura del Book de Moodle
   Unidad "Humanización del Servicio en la Primera Infancia"
   Añadir al final de estilo_cursohum.css (ya está scoped a .curso-humanizacion)
   ============================================================ */

/* Encabezado de cada hoja del libro */
.curso-humanizacion .hoja-cab {
  border-radius: var(--radio);
  padding: 22px 26px;
  color: var(--blanco);
  margin: 4px 0 22px;
  background: linear-gradient(135deg, var(--turquesa), var(--turquesa-osc));
}
.curso-humanizacion .hoja-cab.p2 { background: linear-gradient(135deg, var(--morado), #4a3468); }
.curso-humanizacion .hoja-cab .eyebrow {
  font-weight: 800; font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.06em; opacity: 0.9; display: block; margin-bottom: 4px;
}
.curso-humanizacion .hoja-cab h1 {
  color: var(--blanco); font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 0;
}

/* Cuerpo de lectura */
.curso-humanizacion .lectura p {
  margin-bottom: 15px; text-align: justify; line-height: 1.7;
}

/* ---- CORRECCIÓN DE ESPACIADO (padding) ---- */
/* Respiro interno de las cajas y espacio entre su texto y los bordes redondeados */
.curso-humanizacion .lectura .caja {
  padding: 22px 28px 24px;
  margin: 20px 0;
}
.curso-humanizacion .lectura .caja p {
  margin: 0;
  text-align: left;           /* evita que el justificado pegue el texto a los bordes ovalados */
  line-height: 1.65;
}
.curso-humanizacion .lectura .caja h3 { margin: 2px 0 8px; }
.curso-humanizacion .lectura .caja .etq { margin-bottom: 6px; display: block; }

/* La cita destacada también con respiro y sin justificar contra el borde */
.curso-humanizacion .lectura .cita-fuente {
  padding: 16px 24px;
  margin: 20px 0;
  text-align: left;
}

/* Tablas: aire interno en las celdas para que el texto no toque los bordes */
.curso-humanizacion .lectura .tabla-lectura td,
.curso-humanizacion .lectura .tabla-lectura th {
  padding: 12px 18px;
}
.curso-humanizacion .lectura .tabla-lectura { margin: 22px 0; }

/* Listas numeradas con un poco más de separación inferior */
.curso-humanizacion .lectura .lista-num { margin: 16px 0 20px; }
/* ---- FIN CORRECCIÓN ---- */

.curso-humanizacion .lectura h2 {
  font-size: 1.35rem; color: var(--turquesa-osc); margin: 22px 0 10px;
}
.curso-humanizacion .lectura h3 {
  font-size: 1.1rem; color: var(--morado); margin: 20px 0 8px;
}
.curso-humanizacion .lectura strong { color: var(--gris); font-weight: 700; }
.curso-humanizacion .lectura em { color: var(--gris-suave); }

/* Cita destacada (blockquote) */
.curso-humanizacion .cita-fuente {
  border-left: 5px solid var(--amarillo);
  background: var(--crema-hueso);
  padding: 14px 20px; margin: 18px 0; border-radius: 0 12px 12px 0;
  font-style: italic; color: #5a5350;
}

/* Referencia bibliográfica en gris pequeño al pie de párrafo */
.curso-humanizacion .ref-apa { color: var(--gris-suave); font-style: italic; }

/* Tabla de contenido (lecturas) */
.curso-humanizacion .tabla-lectura {
  width: 100%; border-collapse: collapse; margin: 18px 0;
  background: var(--blanco); border-radius: var(--radio); overflow: hidden;
  box-shadow: var(--sombra-suave); font-size: 0.95rem;
}
.curso-humanizacion .tabla-lectura th {
  background: var(--turquesa); color: var(--blanco); padding: 11px 14px; text-align: left;
}
.curso-humanizacion .tabla-lectura.p2 th { background: var(--morado); }
.curso-humanizacion .tabla-lectura td {
  padding: 10px 14px; border-bottom: 1px solid #f0e9dd; vertical-align: top;
}
.curso-humanizacion .tabla-lectura tr:nth-child(even) td { background: var(--crema); }

/* Lista de pasos/numerada estilizada */
.curso-humanizacion .lista-num { counter-reset: paso; list-style: none; margin: 12px 0; }
.curso-humanizacion .lista-num li {
  counter-increment: paso; position: relative; padding-left: 42px; margin-bottom: 12px; line-height: 1.6;
}
.curso-humanizacion .lista-num li::before {
  content: counter(paso); position: absolute; left: 0; top: 0;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--turquesa); color: var(--blanco);
  font-weight: 800; font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center;
}
.curso-humanizacion .lista-num.p2 li::before { background: var(--morado); }

/* Navegación entre hojas (opcional, si el usuario no usa la del Book) */
.curso-humanizacion .nav-hojas {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 28px; padding-top: 18px; border-top: 2px dashed #e5ddcd;
  font-size: 0.9rem; color: var(--gris-suave);
}

/* Píldora de sección */
.curso-humanizacion .pildora {
  display: inline-block; background: #e8f7f6; color: var(--turquesa-osc);
  font-weight: 700; font-size: 0.8rem; padding: 4px 12px; border-radius: 100px; margin-bottom: 10px;
}
.curso-humanizacion .pildora.p2 { background: #efe8f8; color: var(--morado); }

/* ============================================================
   COMPLEMENTO CSS · Hojas de lectura del Book de Moodle
   Unidad "Humanización del Servicio en la Primera Infancia"
   Añadir al final de estilo_cursohum.css (ya está scoped a .curso-humanizacion)
   ============================================================ */

/* Encabezado de cada hoja del libro */
.curso-humanizacion .hoja-cab {
  border-radius: var(--radio);
  padding: 22px 26px;
  color: var(--blanco);
  margin: 4px 0 22px;
  background: linear-gradient(135deg, var(--turquesa), var(--turquesa-osc));
}
.curso-humanizacion .hoja-cab.p2 { background: linear-gradient(135deg, var(--morado), #4a3468); }
.curso-humanizacion .hoja-cab .eyebrow {
  font-weight: 800; font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.06em; opacity: 0.9; display: block; margin-bottom: 4px;
}
.curso-humanizacion .hoja-cab h1 {
  color: var(--blanco); font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 0;
}

/* Cuerpo de lectura */
.curso-humanizacion .lectura {
  padding: 4px 18px 8px;     /* respiro lateral claro para todo el contenido de la hoja */
}
.curso-humanizacion .lectura p {
  margin-bottom: 15px; text-align: justify; line-height: 1.7;
  padding: 0 2px;
}

/* ---- BLOQUE DE OBJETIVO (se coloca al inicio de cada hoja) ---- */
.curso-humanizacion .objetivo {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: linear-gradient(135deg, #fff8e8, #fff2d6);
  border: 1.5px solid #f5d98a;
  border-left: 6px solid var(--amarillo);
  border-radius: 14px;
  padding: 16px 20px;
  margin: 0 0 24px;
}
.curso-humanizacion .objetivo__icono {
  font-size: 1.5rem;
  line-height: 1.2;
  flex-shrink: 0;
}
.curso-humanizacion .objetivo__texto { flex: 1; }
.curso-humanizacion .objetivo__k {
  display: block;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #b5820a;
  margin-bottom: 3px;
}
.curso-humanizacion .objetivo__texto p {
  margin: 0;
  text-align: left;
  line-height: 1.6;
  color: #6b5a2a;
}
/* ---- FIN BLOQUE OBJETIVO ---- */

/* ---- CORRECCIÓN DE ESPACIADO (padding) ---- */
/* Respiro interno de las cajas y espacio entre su texto y los bordes redondeados */
.curso-humanizacion .lectura .caja {
  padding: 22px 28px 24px;
  margin: 20px 0;
}
.curso-humanizacion .lectura .caja p {
  margin: 0;
  text-align: left;           /* evita que el justificado pegue el texto a los bordes ovalados */
  line-height: 1.65;
}
.curso-humanizacion .lectura .caja h3 { margin: 2px 0 8px; }
.curso-humanizacion .lectura .caja .etq { margin-bottom: 6px; display: block; }

/* La cita destacada también con respiro y sin justificar contra el borde */
.curso-humanizacion .lectura .cita-fuente {
  padding: 16px 24px;
  margin: 20px 0;
  text-align: left;
}

/* Tablas: aire interno en las celdas para que el texto no toque los bordes */
.curso-humanizacion .lectura .tabla-lectura td,
.curso-humanizacion .lectura .tabla-lectura th {
  padding: 12px 18px;
}
.curso-humanizacion .lectura .tabla-lectura { margin: 22px 0; }

/* Listas numeradas con un poco más de separación inferior */
.curso-humanizacion .lectura .lista-num { margin: 16px 0 20px; }
/* ---- FIN CORRECCIÓN ---- */

.curso-humanizacion .lectura h2 {
  font-size: 1.35rem; color: var(--turquesa-osc); margin: 22px 0 10px;
}
.curso-humanizacion .lectura h3 {
  font-size: 1.1rem; color: var(--morado); margin: 20px 0 8px;
}
.curso-humanizacion .lectura strong { color: var(--gris); font-weight: 700; }
.curso-humanizacion .lectura em { color: var(--gris-suave); }

/* Cita destacada (blockquote) */
.curso-humanizacion .cita-fuente {
  border-left: 5px solid var(--amarillo);
  background: var(--crema-hueso);
  padding: 14px 20px; margin: 18px 0; border-radius: 0 12px 12px 0;
  font-style: italic; color: #5a5350;
}

/* Referencia bibliográfica en gris pequeño al pie de párrafo */
.curso-humanizacion .ref-apa { color: var(--gris-suave); font-style: italic; }

/* Tabla de contenido (lecturas) */
.curso-humanizacion .tabla-lectura {
  width: 100%; border-collapse: collapse; margin: 18px 0;
  background: var(--blanco); border-radius: var(--radio); overflow: hidden;
  box-shadow: var(--sombra-suave); font-size: 0.95rem;
}
.curso-humanizacion .tabla-lectura th {
  background: var(--turquesa); color: var(--blanco); padding: 11px 14px; text-align: left;
}
.curso-humanizacion .tabla-lectura.p2 th { background: var(--morado); }
.curso-humanizacion .tabla-lectura td {
  padding: 10px 14px; border-bottom: 1px solid #f0e9dd; vertical-align: top;
}
.curso-humanizacion .tabla-lectura tr:nth-child(even) td { background: var(--crema); }

/* Lista de pasos/numerada estilizada */
.curso-humanizacion .lista-num { counter-reset: paso; list-style: none; margin: 12px 0; }
.curso-humanizacion .lista-num li {
  counter-increment: paso; position: relative; padding-left: 42px; margin-bottom: 12px; line-height: 1.6;
}
.curso-humanizacion .lista-num li::before {
  content: counter(paso); position: absolute; left: 0; top: 0;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--turquesa); color: var(--blanco);
  font-weight: 800; font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center;
}
.curso-humanizacion .lista-num.p2 li::before { background: var(--morado); }

/* Navegación entre hojas (opcional, si el usuario no usa la del Book) */
.curso-humanizacion .nav-hojas {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 28px; padding-top: 18px; border-top: 2px dashed #e5ddcd;
  font-size: 0.9rem; color: var(--gris-suave);
}

/* Píldora de sección */
.curso-humanizacion .pildora {
  display: inline-block; background: #e8f7f6; color: var(--turquesa-osc);
  font-weight: 700; font-size: 0.8rem; padding: 4px 12px; border-radius: 100px; margin-bottom: 10px;
}
.curso-humanizacion .pildora.p2 { background: #efe8f8; color: var(--morado); }