/* ==========================================================================
   Guía de humanización del servicio en la primera infancia · Comfaguajira
   Autor: Orlando de Jesús Cárcamo Berrío
   Hoja de estilos para el Libro de Moodle. Todo queda bajo .curso-humanizacion .gh
   (en el archivo fuente, .curso-humanizacion .gh se expande a ese prefijo al compilar).
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800;900&family=Nunito+Sans:ital,opsz,wght@0,6..12,400;0,6..12,600;0,6..12,700;1,6..12,400;1,6..12,600&display=swap');

.curso-humanizacion .gh {
  --morado: #312289; --morado-2: #4a3cb4; --lila: #f0eefa; --lila-2: #e3dff5;
  --verde: #2e7d32; --verde-2: #43a047; --verde-cl: #e9f5ea;
  --rojo: #b03a2e; --rojo-cl: #fcebe8;
  --crema: #fbf8f2; --tinta: #23223a; --gris: #5d5e72; --linea: #e6e3ee;
  --radio: 18px; --sombra: 0 1px 2px rgba(35,34,58,.06), 0 8px 24px rgba(35,34,58,.08);
  --mA: #d9692f; --mB: #c08a00; --mC: #1f8f82; --mD: #4f5fb8; --mE: #d6456d;
  --mF: #8250c4; --mG: #2f7fc4; --mH: #b8322a; --mI: #3f8a3b;
  --m: var(--morado);
  font-family: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 16px; line-height: 1.6; color: var(--tinta);
  max-width: 980px; margin: 0 auto; padding: 4px 0 24px;
  -webkit-font-smoothing: antialiased;
}
/* Blindaje contra estilos heredados del tema */
.curso-humanizacion .gh, .curso-humanizacion .gh div, .curso-humanizacion .gh p, .curso-humanizacion .gh span, .curso-humanizacion .gh ul, .curso-humanizacion .gh ol, .curso-humanizacion .gh li, .curso-humanizacion .gh a, .curso-humanizacion .gh h2, .curso-humanizacion .gh h3, .curso-humanizacion .gh img, .curso-humanizacion .gh textarea, .curso-humanizacion .gh input, .curso-humanizacion .gh button {
  position: static; float: none; box-sizing: border-box; text-shadow: none;
}
.curso-humanizacion .gh div { position: static !important; float: none !important; }
.curso-humanizacion .gh .gh-rel, .curso-humanizacion .gh .gh-contraste, .curso-humanizacion .gh .gh-regla-tarjeta, .curso-humanizacion .gh .gh-tarjeta, .curso-humanizacion .gh .gh-portada, .curso-humanizacion .gh .gh-buscador { position: relative !important; }
.curso-humanizacion .gh .gh-telon { position: absolute !important; }
.curso-humanizacion .gh p { margin: 0 0 .8em; }
.curso-humanizacion .gh h2, .curso-humanizacion .gh h3 { font-family: 'Nunito', 'Nunito Sans', system-ui, sans-serif; color: var(--morado); line-height: 1.2; letter-spacing: -.01em; }
.curso-humanizacion .gh a { color: var(--morado-2); }
.curso-humanizacion .gh em.gh-frase, .curso-humanizacion .gh em.gh-cita { font-style: italic; }
.curso-humanizacion .gh .gh-txt-no { color: var(--rojo); } .curso-humanizacion .gh .gh-txt-si { color: var(--verde); }

/* Colores por momento */
.curso-humanizacion .gh .gh-m-A, .curso-humanizacion .gh.gh-m-A { --m: var(--mA); } .curso-humanizacion .gh .gh-m-B, .curso-humanizacion .gh.gh-m-B { --m: var(--mB); }
.curso-humanizacion .gh .gh-m-C, .curso-humanizacion .gh.gh-m-C { --m: var(--mC); } .curso-humanizacion .gh .gh-m-D, .curso-humanizacion .gh.gh-m-D { --m: var(--mD); }
.curso-humanizacion .gh .gh-m-E, .curso-humanizacion .gh.gh-m-E { --m: var(--mE); } .curso-humanizacion .gh .gh-m-F, .curso-humanizacion .gh.gh-m-F { --m: var(--mF); }
.curso-humanizacion .gh .gh-m-G, .curso-humanizacion .gh.gh-m-G { --m: var(--mG); } .curso-humanizacion .gh .gh-m-H, .curso-humanizacion .gh.gh-m-H { --m: var(--mH); }
.curso-humanizacion .gh .gh-m-I, .curso-humanizacion .gh.gh-m-I { --m: var(--mI); }

/* Tipografía de cabeceras */
.curso-humanizacion .gh .gh-sobretitulo { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--verde); margin-bottom: .4em; }
.curso-humanizacion .gh .gh-h2 { font-size: clamp(1.6rem, 3.6vw, 2.25rem); font-weight: 900; margin: 0 0 .35em; }
.curso-humanizacion .gh .gh-h3 { font-size: 1.35rem; font-weight: 800; margin: 1.6em 0 .5em; }
.curso-humanizacion .gh .gh-lead { font-size: 1.07rem; color: var(--gris); max-width: 62ch; }
.curso-humanizacion .gh .gh-cabecera-simple { padding: 8px 0 10px; margin-bottom: 18px; border-bottom: 3px solid var(--lila-2); }
.curso-humanizacion .gh .gh-nota { font-size: .86rem; color: var(--gris); font-style: italic; }
.curso-humanizacion .gh .gh-bloque-texto { background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 22px 26px 12px; margin: 22px 0; }
.curso-humanizacion .gh .gh-bloque-texto h3 { margin: 0 0 .5em; font-size: 1.25rem; }
.curso-humanizacion .gh .gh-bloque-texto ul { padding-left: 1.2em; }
.curso-humanizacion .gh .gh-bloque-texto li { margin-bottom: .4em; }

/* ─── Portada ─── */
.curso-humanizacion .gh .gh-portada {
  overflow: hidden; border-radius: 26px; padding: clamp(28px, 6vw, 56px) clamp(20px, 5vw, 56px) clamp(30px, 5vw, 48px);
  background:
    radial-gradient(circle at 92% 12%, rgba(67,160,71,.16) 0 90px, transparent 91px),
    radial-gradient(circle at 104% 70%, rgba(49,34,137,.10) 0 160px, transparent 161px),
    radial-gradient(circle at -6% 100%, rgba(217,105,47,.12) 0 120px, transparent 121px),
    var(--crema);
  border: 1px solid #efe8da; text-align: left;
}
.curso-humanizacion .gh .gh-portada::after {
  content: ""; position: absolute; right: clamp(16px, 5vw, 48px); bottom: 22px; width: 110px; height: 14px;
  background: radial-gradient(circle, var(--mA) 5px, transparent 6px) 0 0/22px 14px repeat-x;
  opacity: .5;
}
.curso-humanizacion .gh .gh-logo { margin: 0 0 26px; }
.curso-humanizacion .gh .gh-logo img { background: #fff; border-radius: 14px; padding: 8px 12px; box-shadow: 0 2px 10px rgba(35,34,58,.08); width: 220px; height: auto; max-width: 60%; display: block; }
.curso-humanizacion .gh .gh-portada .gh-sobretitulo { color: var(--gris); letter-spacing: .08em; }
.curso-humanizacion .gh .gh-portada-titulo { font-size: clamp(2rem, 5.4vw, 3.3rem); font-weight: 900; margin: .1em 0 .3em; max-width: 20ch; }
.curso-humanizacion .gh .gh-portada-lema { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: clamp(1.2rem, 3vw, 1.6rem); margin: 0 0 .4em; }
.curso-humanizacion .gh .gh-lema-no { color: var(--rojo); text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: rgba(176,58,46,.55); margin-right: .35em; }
.curso-humanizacion .gh .gh-lema-si { color: var(--verde); background: linear-gradient(transparent 62%, rgba(67,160,71,.22) 62%); padding: 0 .15em; }
.curso-humanizacion .gh .gh-portada-sub { font-size: 1.12rem; color: var(--tinta); max-width: 46ch; }
.curso-humanizacion .gh .gh-portada-autor { font-size: .92rem; color: var(--gris); margin: 1.4em 0 0; }

.curso-humanizacion .gh .gh-cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 22px 0; }
.curso-humanizacion .gh .gh-cifra { background: #fff; border: 1px solid var(--linea); border-radius: 16px; padding: 16px 14px; margin: 0; text-align: center; }
.curso-humanizacion .gh .gh-cifra-n { display: block; font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 2.1rem; color: var(--morado); line-height: 1.1; }
.curso-humanizacion .gh .gh-cifra-t { display: block; font-size: .86rem; color: var(--gris); }
.curso-humanizacion .gh .gh-ir { text-align: center; margin: 26px 0; }
.curso-humanizacion .gh .gh-boton-enlace, .curso-humanizacion .gh .gh-btn {
  display: inline-flex; align-items: center; gap: .5em; font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 1rem;
  background: var(--morado); color: #fff !important; border: 0; border-radius: 999px; padding: .75em 1.4em; text-decoration: none !important;
  cursor: pointer; box-shadow: 0 6px 16px rgba(49,34,137,.25); transition: transform .15s ease, box-shadow .15s ease, background .15s ease; line-height: 1.2;
}
.curso-humanizacion .gh .gh-boton-enlace::after { content: "→"; }
.curso-humanizacion .gh .gh-boton-enlace:hover, .curso-humanizacion .gh .gh-btn:hover { background: var(--morado-2); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(49,34,137,.28); }
.curso-humanizacion .gh .gh-btn:focus-visible, .curso-humanizacion .gh .gh-boton-enlace:focus-visible, .curso-humanizacion .gh .gh-tarjeta:focus-visible, .curso-humanizacion .gh .gh-chip:focus-visible, .curso-humanizacion .gh .gh-regla-tarjeta:focus-visible { outline: 3px solid #f2b705; outline-offset: 3px; }
.curso-humanizacion .gh .gh-btn-sec { background: #fff; color: var(--morado) !important; border: 2px solid var(--lila-2); box-shadow: none; }
.curso-humanizacion .gh .gh-btn-sec:hover { background: var(--lila); box-shadow: none; }
.curso-humanizacion .gh .gh-btn-peq { font-size: .88rem; padding: .5em 1em; }
.curso-humanizacion .gh .gh-creditos { border-top: 1px dashed var(--linea); padding-top: 16px; margin-top: 26px; font-size: .9rem; color: var(--gris); }

/* ─── Progreso ─── */
.curso-humanizacion .gh .gh-progreso { margin: 18px 0; font-size: .92rem; color: var(--gris); }
.curso-humanizacion .gh .gh-progreso p { margin: 0; }
.curso-humanizacion .gh.gh-activo .gh-progreso { background: #fff; border: 1px solid var(--linea); border-radius: 16px; padding: 14px 18px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.curso-humanizacion .gh .gh-pg-txt { font-weight: 700; color: var(--tinta); min-width: 190px; }
.curso-humanizacion .gh .gh-pg-barra { flex: 1 1 200px; height: 12px; background: var(--lila); border-radius: 99px; overflow: hidden; }
.curso-humanizacion .gh .gh-pg-relleno { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--verde-2), var(--verde)); border-radius: 99px; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.curso-humanizacion .gh .gh-pg-reset { background: none; border: 0; color: var(--gris); text-decoration: underline; cursor: pointer; font: inherit; font-size: .82rem; padding: 0; }

/* ─── Explorador ─── */
.curso-humanizacion .gh .gh-momentos-lista { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 16px; list-style: none; }
.curso-humanizacion .gh .gh-momentos-lista li { background: #fff; border: 1px solid var(--linea); border-radius: 99px; padding: 3px 12px; font-size: .85rem; }
.curso-humanizacion .gh .gh-buscador { position: relative; margin: 0 0 14px; }
.curso-humanizacion .gh .gh-buscador input {
  width: 100%; font: inherit; font-size: 1.05rem; padding: 14px 18px 14px 48px; border: 2px solid var(--lila-2); border-radius: 16px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' stroke='%23312289' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='9.5' cy='9.5' r='6.5'/%3E%3Cpath d='M14.5 14.5 20 20'/%3E%3C/svg%3E") no-repeat 16px 50%;
  color: var(--tinta); outline: none; transition: border-color .15s, box-shadow .15s; box-shadow: none;
}
.curso-humanizacion .gh .gh-buscador input:focus { border-color: var(--morado); box-shadow: 0 0 0 4px rgba(49,34,137,.12); }
.curso-humanizacion .gh .gh-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.curso-humanizacion .gh .gh-chip {
  font: inherit; font-size: .88rem; font-weight: 700; display: inline-flex; align-items: center; gap: 7px;
  border: 2px solid var(--linea); background: #fff; color: var(--tinta); border-radius: 99px; padding: 6px 13px; cursor: pointer; transition: all .15s;
}
.curso-humanizacion .gh .gh-chip::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--m); flex: none; }
.curso-humanizacion .gh .gh-chip-todas::before { background: conic-gradient(var(--mA), var(--mB), var(--mC), var(--mD), var(--mE), var(--mF), var(--mG), var(--mH), var(--mI), var(--mA)); }
.curso-humanizacion .gh .gh-chip:hover { border-color: var(--m); }
.curso-humanizacion .gh .gh-chip[aria-pressed="true"] { background: var(--m); border-color: var(--m); color: #fff; }
.curso-humanizacion .gh .gh-chip-todas[aria-pressed="true"] { background: var(--morado); border-color: var(--morado); }
.curso-humanizacion .gh .gh-chip[aria-pressed="true"]::before { background: #fff; }
.curso-humanizacion .gh .gh-filtro-info { font-size: .88rem; color: var(--gris); margin: 4px 0 14px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.curso-humanizacion .gh .gh-vacio { text-align: center; padding: 30px; color: var(--gris); background: var(--crema); border-radius: 16px; }

.curso-humanizacion .gh .gh-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin: 6px 0 20px; }
.curso-humanizacion .gh .gh-tarjeta {
  display: flex !important; flex-direction: column; gap: 6px; text-decoration: none !important; color: var(--tinta) !important;
  background: #fff; border: 1px solid var(--linea); border-top: 6px solid var(--m); border-radius: var(--radio); padding: 18px 18px 16px;
  box-shadow: var(--sombra); transition: transform .18s ease, box-shadow .18s ease; overflow: hidden;
}
.curso-humanizacion .gh .gh-tarjeta:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(35,34,58,.06), 0 16px 32px rgba(35,34,58,.13); }
.curso-humanizacion .gh .gh-tarjeta span { display: block; }
.curso-humanizacion .gh .gh-t-num { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 2.2rem; line-height: 1; color: var(--m); opacity: .9; }
.curso-humanizacion .gh .gh-t-mom { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--m); }
.curso-humanizacion .gh .gh-t-tit { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 1.12rem; line-height: 1.25; color: var(--morado); }
.curso-humanizacion .gh .gh-t-sit { font-size: .9rem; color: var(--gris); display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.curso-humanizacion .gh .gh-t-reg { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--linea); font-size: .88rem; font-weight: 700; color: var(--verde); }
.curso-humanizacion .gh .gh-t-reg::before { content: "💡 "; }
.curso-humanizacion .gh .gh-tarjeta.gh-hecha::after {
  content: "✓ Repasada"; position: absolute; top: 14px; right: 14px; font-size: .74rem; font-weight: 800;
  background: var(--verde-cl); color: var(--verde); border-radius: 99px; padding: 3px 10px;
}
.curso-humanizacion .gh .gh-tarjeta[hidden] { display: none !important; }
.curso-humanizacion .gh mark.gh-resalte { background: #fff1a8; color: inherit; border-radius: 3px; padding: 0 1px; }

/* ─── Cómo usar ─── */
.curso-humanizacion .gh .gh-partes { list-style: none; counter-reset: parte; padding: 0; margin: 10px 0 0; display: grid; gap: 10px; }
.curso-humanizacion .gh .gh-partes li { counter-increment: parte; display: grid; grid-template-columns: 44px 160px 1fr; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--linea); border-radius: 14px; padding: 12px 16px; }
.curso-humanizacion .gh .gh-partes li::before { content: counter(parte); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-family: 'Nunito', sans-serif; font-weight: 900; color: #fff; background: var(--c, var(--morado)); }
.curso-humanizacion .gh .gh-partes strong { font-family: 'Nunito', sans-serif; color: var(--c, var(--morado)); }
.curso-humanizacion .gh .gh-partes span { color: var(--gris); font-size: .95rem; }
.curso-humanizacion .gh .gh-p-sit { --c: var(--morado); } .curso-humanizacion .gh .gh-p-pen { --c: #b7791f; } .curso-humanizacion .gh .gh-p-no { --c: var(--rojo); }
.curso-humanizacion .gh .gh-p-si { --c: var(--verde); } .curso-humanizacion .gh .gh-p-jue { --c: var(--mG); } .curso-humanizacion .gh .gh-p-rec { --c: var(--morado-2); }
.curso-humanizacion .gh .gh-principios { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.curso-humanizacion .gh .gh-principio { background: var(--lila); border-radius: var(--radio); padding: 18px 20px 12px; border: 1px solid var(--lila-2); }
.curso-humanizacion .gh .gh-pr-nom { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 1.2rem; color: var(--morado); margin-bottom: .3em; }
.curso-humanizacion .gh .gh-pr-que { font-size: .95rem; }
.curso-humanizacion .gh .gh-pr-como { font-size: .92rem; color: var(--verde); font-weight: 600; border-top: 1px dashed var(--lila-2); padding-top: .6em; }
.curso-humanizacion .gh.gh-activo .gh-principio { cursor: pointer; transition: background .2s, transform .15s; }
.curso-humanizacion .gh.gh-activo .gh-principio:hover { transform: translateY(-2px); }
.curso-humanizacion .gh.gh-activo .gh-principio .gh-pr-como { display: none; }
.curso-humanizacion .gh.gh-activo .gh-principio.gh-abierto { background: #fff; border-color: var(--verde-2); }
.curso-humanizacion .gh.gh-activo .gh-principio.gh-abierto .gh-pr-como { display: block; animation: gh-aparece .3s ease; }
.curso-humanizacion .gh .gh-pr-mas { font-size: .8rem; font-weight: 800; color: var(--morado-2); }
.curso-humanizacion .gh .gh-principio.gh-abierto .gh-pr-mas { display: none; }

/* ─── Momento (capítulo padre) ─── */
.curso-humanizacion .gh .gh-momento-hero { background: linear-gradient(135deg, color-mix(in srgb, var(--m) 14%, #fff), #fff 70%); border-left: 8px solid var(--m); border-radius: var(--radio); padding: 26px 28px 16px; margin-bottom: 20px; }
.curso-humanizacion .gh .gh-momento-hero .gh-sobretitulo { color: var(--m); }
.curso-humanizacion .gh .gh-momento-hero .gh-h2 { color: var(--tinta); }
.curso-humanizacion .gh .gh-momento-cuenta { display: inline-block; background: var(--m); color: #fff; font-weight: 800; font-size: .82rem; border-radius: 99px; padding: 3px 12px; }

/* ─── Ficha ─── */
.curso-humanizacion .gh .gh-cabecera { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "num chip" "num cont" "tit tit"; column-gap: 18px; align-items: end; margin: 4px 0 20px; }
.curso-humanizacion .gh .gh-num-grande { grid-area: num; font-family: 'Nunito', sans-serif; font-weight: 900; font-size: clamp(3.6rem, 9vw, 5.2rem); line-height: .85; margin: 0; color: transparent; -webkit-text-stroke: 2.5px var(--m); }
.curso-humanizacion .gh .gh-momento-chip { grid-area: chip; justify-self: start; margin: 0 0 6px; background: color-mix(in srgb, var(--m) 14%, #fff); color: var(--m); font-weight: 800; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; border-radius: 99px; padding: 4px 12px; }
.curso-humanizacion .gh .gh-contador { grid-area: cont; margin: 0; font-size: .88rem; color: var(--gris); }
.curso-humanizacion .gh .gh-titulo { grid-area: tit; font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 900; margin: .35em 0 0; }

.curso-humanizacion .gh .gh-rotulo { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 .6em; display: flex; align-items: center; gap: 8px; }
.curso-humanizacion .gh .gh-situacion {
  background: var(--lila); border-radius: var(--radio); padding: 22px 26px 12px 26px; margin: 0 0 16px; border-left: 6px solid var(--morado);
}
.curso-humanizacion .gh .gh-situacion .gh-rotulo { color: var(--morado); }
.curso-humanizacion .gh .gh-sit-texto { font-size: 1.14rem; line-height: 1.65; }

.curso-humanizacion .gh .gh-pensar { border: 2px dashed #e0c48a; background: #fffaf0; border-radius: var(--radio); padding: 16px 22px 8px; margin: 0 0 18px; }
.curso-humanizacion .gh .gh-pensar .gh-rotulo { color: #9a6a12; }
.curso-humanizacion .gh .gh-pensar .gh-rotulo::before { content: "🤔"; font-size: 1rem; letter-spacing: 0; }
.curso-humanizacion .gh .gh-pensar textarea {
  width: 100%; min-height: 92px; font: inherit; font-size: 1rem; line-height: 1.5; color: var(--tinta); resize: vertical;
  border: 1px solid #ead7ae; border-radius: 12px; padding: 12px 14px; background: #fff; margin: 4px 0 10px; outline: none;
}
.curso-humanizacion .gh .gh-pensar textarea:focus { border-color: #c79a3d; box-shadow: 0 0 0 4px rgba(199,154,61,.15); }
.curso-humanizacion .gh .gh-pensar-pie { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.curso-humanizacion .gh .gh-guardado { font-size: .8rem; color: var(--gris); }

.curso-humanizacion .gh .gh-contraste { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 18px; }
.curso-humanizacion .gh .gh-panel { border-radius: var(--radio); padding: 20px 22px 10px; transition: opacity .3s, filter .4s; }
.curso-humanizacion .gh .gh-no { background: var(--rojo-cl); border: 1px solid #f3cfc9; }
.curso-humanizacion .gh .gh-si { background: var(--verde-cl); border: 1px solid #cfe7d0; }
.curso-humanizacion .gh .gh-no .gh-rotulo { color: var(--rojo); } .curso-humanizacion .gh .gh-si .gh-rotulo { color: var(--verde); }
.curso-humanizacion .gh .gh-no .gh-rotulo::before, .curso-humanizacion .gh .gh-si .gh-rotulo::before { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-size: .95rem; letter-spacing: 0; flex: none; }
.curso-humanizacion .gh .gh-no .gh-rotulo::before { content: "✗"; background: var(--rojo); }
.curso-humanizacion .gh .gh-si .gh-rotulo::before { content: "✓"; background: var(--verde); }
.curso-humanizacion .gh .gh-texto-no { font-size: 1.02rem; }
.curso-humanizacion .gh .gh-no em.gh-frase { color: #8c2a20; }
.curso-humanizacion .gh .gh-dano { background: rgba(255,255,255,.65); border-radius: 12px; padding: 12px 14px; font-size: .95rem; }
.curso-humanizacion .gh .gh-dano strong { color: var(--rojo); }
.curso-humanizacion .gh .gh-lista-si { list-style: none; padding: 0; margin: 0 0 .6em; }
.curso-humanizacion .gh .gh-lista-si li { position: relative; padding: 0 0 0 26px; margin: 0 0 .7em; }
.curso-humanizacion .gh .gh-lista-si li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 10px; height: 10px; border-radius: 50%; background: var(--verde-2); box-shadow: 0 0 0 3px #cfe7d0; }
.curso-humanizacion .gh .gh-si em.gh-frase, .curso-humanizacion .gh .gh-si em.gh-cita { color: #1f6a24; font-weight: 600; }

/* Revelado (solo con JS) */
.curso-humanizacion .gh .gh-vista { display: flex; gap: 6px; background: #fff; border: 1px solid var(--linea); border-radius: 99px; padding: 4px; margin: 0 0 12px; width: max-content; max-width: 100%; flex-wrap: wrap; }
.curso-humanizacion .gh .gh-vista button { font: inherit; font-size: .86rem; font-weight: 700; border: 0; background: none; color: var(--gris); border-radius: 99px; padding: 6px 14px; cursor: pointer; }
.curso-humanizacion .gh .gh-vista button[aria-pressed="true"] { background: var(--morado); color: #fff; }
.curso-humanizacion .gh .gh-contraste.gh-solo-no { grid-template-columns: 1fr; } .curso-humanizacion .gh .gh-contraste.gh-solo-no .gh-si { display: none; }
.curso-humanizacion .gh .gh-contraste.gh-solo-si { grid-template-columns: 1fr; } .curso-humanizacion .gh .gh-contraste.gh-solo-si .gh-no { display: none; }
.curso-humanizacion .gh .gh-contraste.gh-cubierto .gh-panel { filter: blur(7px); opacity: .45; user-select: none; pointer-events: none; }
.curso-humanizacion .gh .gh-telon { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; text-align: center; padding: 20px; }
.curso-humanizacion .gh .gh-contraste:not(.gh-cubierto) .gh-telon { display: none; }
.curso-humanizacion .gh .gh-telon-caja { background: #fff; border-radius: 20px; padding: 22px 26px; box-shadow: 0 14px 40px rgba(35,34,58,.18); max-width: 380px; }
.curso-humanizacion .gh .gh-telon-caja p { margin: 0 0 14px; font-weight: 700; }
.curso-humanizacion .gh .gh-contraste.gh-revelado .gh-no { animation: gh-entra-izq .5s ease both; }
.curso-humanizacion .gh .gh-contraste.gh-revelado .gh-si { animation: gh-entra-der .5s .12s ease both; }

/* Juego frase por frase */
.curso-humanizacion .gh .gh-juego { background: #fff; border: 2px solid var(--lila-2); border-radius: var(--radio); padding: 20px 22px 12px; margin: 0 0 18px; }
.curso-humanizacion .gh .gh-juego .gh-rotulo { color: var(--mG); }
.curso-humanizacion .gh .gh-juego .gh-rotulo::before { content: "🎯"; letter-spacing: 0; font-size: 1rem; }
.curso-humanizacion .gh .gh-j-lista { list-style: none; padding: 0; margin: 8px 0 12px; display: grid; gap: 10px; }
.curso-humanizacion .gh .gh-j-item { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; border: 1px solid var(--linea); border-radius: 14px; padding: 12px 14px; background: #fcfcfe; transition: background .25s, border-color .25s; }
.curso-humanizacion .gh .gh-j-frase { font-style: italic; font-size: 1rem; margin: 0; }
.curso-humanizacion .gh .gh-j-btns { display: flex; gap: 6px; }
.curso-humanizacion .gh .gh-j-btns button { font: inherit; font-weight: 800; font-size: .84rem; border-radius: 99px; padding: 6px 12px; cursor: pointer; border: 2px solid; background: #fff; }
.curso-humanizacion .gh .gh-j-btns .gh-j-si { color: var(--verde); border-color: #bfe0c1; } .curso-humanizacion .gh .gh-j-btns .gh-j-si:hover { background: var(--verde-cl); }
.curso-humanizacion .gh .gh-j-btns .gh-j-no { color: var(--rojo); border-color: #f0c6c0; } .curso-humanizacion .gh .gh-j-btns .gh-j-no:hover { background: var(--rojo-cl); }
.curso-humanizacion .gh .gh-j-item.gh-ok { background: var(--verde-cl); border-color: #9fd3a3; }
.curso-humanizacion .gh .gh-j-item.gh-mal { background: #fff4e5; border-color: #f0c98a; }
.curso-humanizacion .gh .gh-j-fb { grid-column: 1 / -1; font-size: .88rem; margin: 0; font-weight: 600; }
.curso-humanizacion .gh .gh-ok .gh-j-fb { color: var(--verde); } .curso-humanizacion .gh .gh-mal .gh-j-fb { color: #9a5b00; }
.curso-humanizacion .gh .gh-j-pie { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.curso-humanizacion .gh .gh-j-puntaje { font-family: 'Nunito', sans-serif; font-weight: 900; color: var(--morado); }

.curso-humanizacion .gh .gh-sustento { border-left: 4px solid #c9c7d6; padding: 4px 0 2px 16px; margin: 0 0 18px; font-size: .92rem; color: var(--gris); }
.curso-humanizacion .gh .gh-sustento .gh-rotulo { color: var(--gris); }
.curso-humanizacion .gh .gh-sustento .gh-rotulo::before { content: "⚖️"; letter-spacing: 0; font-size: .95rem; }

.curso-humanizacion .gh .gh-recordar {
  background: var(--morado); color: #fff; border-radius: 22px; padding: 26px 28px 14px; margin: 0 0 18px; overflow: hidden;
  background-image: radial-gradient(circle at 100% 0, rgba(255,255,255,.12) 0 90px, transparent 91px), radial-gradient(circle at 0 100%, rgba(67,160,71,.35) 0 70px, transparent 71px);
}
.curso-humanizacion .gh .gh-recordar .gh-rotulo { color: #b9f0bd; }
.curso-humanizacion .gh .gh-recordar .gh-rotulo::before { content: "💡"; letter-spacing: 0; font-size: 1rem; }
.curso-humanizacion .gh .gh-regla { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: clamp(1.35rem, 3.2vw, 1.8rem); line-height: 1.25; margin: 0 0 .7em; color: #fff; }
.curso-humanizacion .gh .gh-reflexiona { background: rgba(255,255,255,.1); border-radius: 12px; padding: 12px 14px; font-size: .98rem; color: #f3f1ff; }
.curso-humanizacion .gh .gh-reflexiona strong { color: #b9f0bd; }
.curso-humanizacion .gh .gh-cierre { text-align: center; color: var(--gris); font-size: .92rem; padding: 6px 0; }
.curso-humanizacion .gh .gh-cierre-btns { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.curso-humanizacion .gh .gh-btn.gh-marcada { background: var(--verde); box-shadow: 0 6px 16px rgba(46,125,50,.25); }

/* ─── Repaso: tarjetas que voltean ─── */
.curso-humanizacion .gh .gh-repaso-barra { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 0 0 16px; }
.curso-humanizacion .gh .gh-repaso-cuenta { font-size: .9rem; color: var(--gris); margin-left: auto; }
.curso-humanizacion .gh .gh-reglas { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.curso-humanizacion .gh .gh-regla-tarjeta { border-radius: 18px; min-height: 170px; perspective: 1000px; }
.curso-humanizacion .gh .gh-cara { margin: 0; border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.curso-humanizacion .gh .gh-cara span { display: block; }
.curso-humanizacion .gh .gh-frente { background: #fff; border: 1px solid var(--linea); border-bottom: 5px solid var(--m); }
.curso-humanizacion .gh .gh-reverso { background: var(--m); color: #fff; margin-top: 8px; }
.curso-humanizacion .gh .gh-rt-num { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 1.5rem; line-height: 1; color: var(--m); }
.curso-humanizacion .gh .gh-reverso .gh-rt-num { color: rgba(255,255,255,.75); }
.curso-humanizacion .gh .gh-rt-tit { font-family: 'Nunito', sans-serif; font-weight: 800; color: var(--morado); font-size: 1.05rem; line-height: 1.25; }
.curso-humanizacion .gh .gh-rt-pista { margin-top: auto; font-size: .8rem; color: var(--gris); font-weight: 700; }
.curso-humanizacion .gh .gh-rt-regla { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 1.08rem; line-height: 1.3; }
.curso-humanizacion .gh.gh-activo .gh-regla-tarjeta { cursor: pointer; }
.curso-humanizacion .gh.gh-activo .gh-regla-tarjeta .gh-cara { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .6s cubic-bezier(.2,.8,.2,1); margin: 0; }
.curso-humanizacion .gh.gh-activo .gh-regla-tarjeta .gh-reverso { transform: rotateY(180deg); justify-content: center; }
.curso-humanizacion .gh.gh-activo .gh-regla-tarjeta.gh-volteada .gh-frente { transform: rotateY(-180deg); }
.curso-humanizacion .gh.gh-activo .gh-regla-tarjeta.gh-volteada .gh-reverso { transform: rotateY(0); }

/* ─── Ruta ─── */
.curso-humanizacion .gh .gh-linea141 { display: flex; align-items: center; gap: 18px; background: #fff5f3; border: 2px solid #f3cfc9; border-radius: var(--radio); padding: 16px 22px; margin: 0 0 20px; }
.curso-humanizacion .gh .gh-l141-num { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 3rem; line-height: 1; color: #fff; background: var(--rojo); border-radius: 18px; padding: 10px 16px; margin: 0; flex: none; }
.curso-humanizacion .gh .gh-l141-txt { margin: 0; font-size: .95rem; }
.curso-humanizacion .gh .gh-ruta-cols { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; }
.curso-humanizacion .gh .gh-ruta-si, .curso-humanizacion .gh .gh-ruta-no { border-radius: var(--radio); padding: 20px 22px 8px; }
.curso-humanizacion .gh .gh-ruta-si { background: var(--verde-cl); } .curso-humanizacion .gh .gh-ruta-si .gh-rotulo { color: var(--verde); }
.curso-humanizacion .gh .gh-ruta-no { background: var(--rojo-cl); } .curso-humanizacion .gh .gh-ruta-no .gh-rotulo { color: var(--rojo); }
.curso-humanizacion .gh .gh-pasos { list-style: none; counter-reset: paso; padding: 0; margin: 0; }
.curso-humanizacion .gh .gh-pasos li { counter-increment: paso; position: relative; padding: 0 0 18px 52px; }
.curso-humanizacion .gh .gh-pasos li::before { content: counter(paso); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--verde); color: #fff; display: grid; place-items: center; font-family: 'Nunito', sans-serif; font-weight: 900; }
.curso-humanizacion .gh .gh-pasos li::after { content: ""; position: absolute; left: 17px; top: 38px; bottom: 2px; width: 2px; background: #b9dcbb; }
.curso-humanizacion .gh .gh-pasos li:last-child::after { display: none; }
.curso-humanizacion .gh .gh-pasos strong { display: block; font-family: 'Nunito', sans-serif; color: var(--verde); font-size: 1.05rem; }
.curso-humanizacion .gh .gh-pasos span { display: block; font-size: .95rem; }
.curso-humanizacion .gh.gh-activo .gh-pasos li { cursor: pointer; }
.curso-humanizacion .gh .gh-pasos li.gh-paso-ok::before { content: "✓"; background: var(--verde-2); }
.curso-humanizacion .gh .gh-pasos li.gh-paso-ok strong { text-decoration: line-through; text-decoration-color: rgba(46,125,50,.4); }
.curso-humanizacion .gh .gh-nunca { list-style: none; padding: 0; margin: 0; }
.curso-humanizacion .gh .gh-nunca li { position: relative; padding: 0 0 0 30px; margin: 0 0 14px; }
.curso-humanizacion .gh .gh-nunca li::before { content: "✗"; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--rojo); color: #fff; font-size: .8rem; display: grid; place-items: center; font-weight: 900; }

/* ─── Decálogo y compromiso ─── */
.curso-humanizacion .gh .gh-decalogo { list-style: none; counter-reset: dec; padding: 0; margin: 0 0 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.curso-humanizacion .gh .gh-decalogo li { counter-increment: dec; display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--linea); border-radius: 14px; padding: 12px 14px; font-weight: 600; }
.curso-humanizacion .gh .gh-decalogo li::before { content: counter(dec); font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 1.6rem; color: var(--morado); text-align: center; line-height: 1; }
.curso-humanizacion .gh .gh-compromiso { background: var(--crema); border: 1px solid #efe8da; border-radius: 22px; padding: 22px 26px 16px; }
.curso-humanizacion .gh .gh-compromiso .gh-h3 { margin-top: 0; }
.curso-humanizacion .gh .gh-comp-campos { display: grid; gap: 10px; margin: 6px 0 12px; }
.curso-humanizacion .gh .gh-comp-campos label { font-size: .85rem; font-weight: 700; color: var(--gris); display: block; }
.curso-humanizacion .gh .gh-comp-campos input, .curso-humanizacion .gh .gh-comp-campos textarea { width: 100%; font: inherit; border: 1px solid #e3d9c4; border-radius: 12px; padding: 10px 12px; background: #fff; color: var(--tinta); }
.curso-humanizacion .gh .gh-comp-campos textarea { min-height: 64px; resize: vertical; }

/* ─── Bibliografía ─── */
.curso-humanizacion .gh .gh-biblio { list-style: none; padding: 0; margin: 0; }
.curso-humanizacion .gh .gh-biblio li { padding: 12px 0 12px 2em; text-indent: -2em; border-bottom: 1px solid var(--linea); font-size: .95rem; }
.curso-humanizacion .gh .gh-biblio a { word-break: break-all; }

/* ─── Animaciones ─── */
@keyframes gh-aparece { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes gh-entra-izq { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes gh-entra-der { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.curso-humanizacion .gh .gh-aparece { animation: gh-aparece .35s ease both; }
@media (prefers-reduced-motion: reduce) {
  .curso-humanizacion .gh *, .curso-humanizacion .gh *::before, .curso-humanizacion .gh *::after { animation: none !important; transition: none !important; }
}

/* ─── Móvil ─── */
@media (max-width: 720px) {
  .curso-humanizacion .gh .gh-contraste, .curso-humanizacion .gh .gh-ruta-cols, .curso-humanizacion .gh .gh-decalogo { grid-template-columns: 1fr; }
  .curso-humanizacion .gh .gh-cifras { grid-template-columns: 1fr 1fr; }
  .curso-humanizacion .gh .gh-partes li { grid-template-columns: 36px 1fr; }
  .curso-humanizacion .gh .gh-partes li span { grid-column: 2; }
  .curso-humanizacion .gh .gh-j-item { grid-template-columns: 1fr; }
  .curso-humanizacion .gh .gh-situacion, .curso-humanizacion .gh .gh-panel, .curso-humanizacion .gh .gh-recordar, .curso-humanizacion .gh .gh-juego { padding-left: 18px; padding-right: 18px; }
  .curso-humanizacion .gh .gh-linea141 { flex-direction: column; align-items: flex-start; }
  .curso-humanizacion .gh .gh-vista { width: 100%; flex-wrap: nowrap; }
  .curso-humanizacion .gh .gh-vista button { flex: 1; padding: 6px 6px; font-size: .8rem; }
}
@media print {
  .curso-humanizacion .gh .gh-vista, .curso-humanizacion .gh .gh-telon, .curso-humanizacion .gh .gh-pensar-pie, .curso-humanizacion .gh .gh-cierre-btns, .curso-humanizacion .gh .gh-juego, .curso-humanizacion .gh .gh-buscador, .curso-humanizacion .gh .gh-chips { display: none !important; }
  .curso-humanizacion .gh .gh-contraste.gh-cubierto .gh-panel { filter: none; opacity: 1; }
}