/* =========================================================
   EXCELPBI — Catálogo de formación (portado de abitic.com)
   Requiere recursos.css (tokens --site-* y filtros).
   ========================================================= */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--site-azul-acento);
  transition: color 0.2s ease;
}
.link-arrow i { font-size: 0.85em; transition: transform 0.2s ease; }
.link-arrow:hover { color: var(--site-azul-oscuro); }
.link-arrow:hover i { transform: translateX(4px); }
.course-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.course-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--site-blanco);
  border: 1px solid var(--site-borde);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 51, 102, 0.06);
  transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.course-card:hover { box-shadow: 0 10px 28px rgba(0, 51, 102, 0.14); border-color: var(--site-gris-azulado); }
.course-card-media { overflow: hidden; background: var(--site-azul-marino); }
.course-card-media img { width: 100%; height: auto; aspect-ratio: 760 / 420; object-fit: cover; transition: transform 0.5s ease; }
.course-card:hover .course-card-media img { transform: scale(1.04); }
.course-card-body { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; flex: 1; }
.course-card-body h3 { font-size: var(--fs-base); line-height: 1.35; margin: 0; }
.course-card-body .link-arrow { margin-top: auto; padding-top: 4px; }
.course-card-body .link-arrow::after { content: ""; position: absolute; inset: 0; }
.course-card:hover .link-arrow { color: var(--site-azul-oscuro); text-decoration: underline; }
.course-card:hover .link-arrow i { transform: translateX(4px); }
.course-card:focus-within { box-shadow: 0 0 0 3px rgba(11, 107, 203, 0.35); }
.course-level {
  align-self: flex-start;
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--site-gris-claro);
  color: var(--site-azul-marino);
}
.course-level--esencial { background: #e3f4e6; color: #1f6b30; }
.course-level--intermedio { background: #e1eefb; color: #0b4f96; }
.course-level--avanzado { background: #e4e8f3; color: #1c2f66; }

@media (max-width: 1000px) {
  .course-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .course-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .course-card-media img { transition: none; }
  .course-card:hover .course-card-media img { transform: none; }
}
#cursos .course-grid { text-align: left; }
.course-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 auto 28px; }
.course-filters button { padding: 9px 18px; border-radius: 999px; border: 1px solid var(--site-borde); background: #fff; color: var(--site-azul-marino); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.course-filters button:hover { border-color: var(--site-azul-acento); }
.course-filters button.is-active { background: var(--site-azul-marino); border-color: var(--site-azul-marino); color: #fff; }
.course-card-body .course-desc { margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--site-gris-texto); }
.course-card-body .course-meta { margin: 0; font-size: var(--fs-xs); font-weight: 600; color: var(--site-azul-marino); }
.course-card-body .course-meta i { color: var(--site-azul-acento); margin-right: 4px; }
.course-level--programa { background: #fdf0dc; color: #8a4d06; }
.course-grid[hidden], .course-card[hidden] { display: none; }

/* =========================================================
   Catálogo por áreas, programas e itinerarios
   ========================================================= */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.section-kicker { display: block; text-align: center; text-transform: uppercase; letter-spacing: .08em; font-size: var(--fs-xs); font-weight: 700; color: var(--site-naranja); margin-bottom: 6px; }

/* Áreas */
.area-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.area-card { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--site-borde); border-radius: 10px; box-shadow: 0 2px 10px rgba(0, 51, 102, .06); transition: opacity .6s ease, transform .6s ease, box-shadow .25s ease; }
.area-card:hover { box-shadow: 0 10px 28px rgba(0, 51, 102, .14); }
.area-card h3 { margin: 4px 0 0; font-size: var(--fs-lg); color: var(--site-azul-marino); }
.area-card p { margin: 0; font-size: var(--fs-sm); color: var(--site-gris-texto); line-height: 1.5; }
.area-count { font-size: var(--fs-xs); font-weight: 700; color: var(--site-azul-marino); }
.area-go { margin-top: auto; padding-top: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--site-azul-acento); }
.area-icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px; background: var(--site-azul-marino); color: #fff; font-size: 1.2rem; }

.area-media { position: relative; aspect-ratio: 3 / 2; background: var(--site-azul-marino); border-bottom: 4px solid var(--site-verde); }
.area-media picture { display: block; height: 100%; }
.area-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.area-card:hover .area-media img { transform: scale(1.05); }
.area-media .area-icon { position: absolute; left: 18px; bottom: -23px; border: 3px solid #fff; box-shadow: 0 4px 12px rgba(0, 51, 102, .25); }
.area-body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 30px 22px 22px; }

/* Programas: tabla comparativa */
.path-program em { font-style: normal; font-size: var(--fs-xs); font-weight: 700; color: #1f6b30; }
.prog-note { margin: 16px 0 0; text-align: center; font-size: var(--fs-sm); color: var(--site-gris-texto); }
.prog-note i { color: var(--site-azul-acento); margin-right: 4px; }

/* Itinerarios */
.area-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 auto 36px; }
.area-nav a { padding: 9px 18px; border-radius: 999px; border: 1px solid var(--site-borde); background: #fff; color: var(--site-azul-marino); font-size: var(--fs-sm); font-weight: 600; transition: border-color .2s ease, background .2s ease, color .2s ease; }
.area-nav a:hover { background: var(--site-azul-marino); border-color: var(--site-azul-marino); color: #fff; }
.area-nav i { margin-right: 4px; }
.path { margin-bottom: 44px; padding: 28px; border: 1px solid var(--site-borde); border-radius: 12px; background: var(--site-gris-claro); scroll-margin-top: 90px; }
.path[hidden] { display: none; }
.path:last-child { margin-bottom: 0; }
.path-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 22px; }
.path-head h3 { margin: 0 0 4px; font-size: var(--fs-xl); color: var(--site-azul-marino); }
.path-head p { margin: 0; max-width: 760px; color: var(--site-gris-texto); font-size: var(--fs-md); }
.path-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 26px; }
.path-step { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 0 18px 18px; background: #fff; border: 1px solid var(--site-borde); border-radius: 10px; box-shadow: 0 2px 8px rgba(0, 51, 102, .05); transition: box-shadow .25s ease, border-color .25s ease; }
.path-step[hidden] { display: none; }
.path-step:hover { box-shadow: 0 10px 24px rgba(0, 51, 102, .13); border-color: var(--site-gris-azulado); }
.path-step:focus-within { box-shadow: 0 0 0 3px rgba(11, 107, 203, .35); }
.path-step:not(:last-child)::after { content: "\f054"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; right: -20px; top: 50%; transform: translateY(-50%); font-size: .8rem; color: var(--site-gris-azulado); }
.path-step h4 { margin: 0; font-size: var(--fs-md); line-height: 1.35; color: var(--site-negro-texto); }
.path-step .course-desc { margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--site-gris-texto); }
.path-step .course-meta { margin: 0; font-size: var(--fs-xs); font-weight: 600; color: var(--site-azul-marino); }
.path-step .course-meta i { color: var(--site-azul-acento); margin-right: 4px; }
.path-step .link-arrow { margin-top: auto; padding-top: 4px; font-size: var(--fs-sm); }
.path-step .link-arrow::after { content: ""; position: absolute; inset: 0; }
.path-step--soon { background: #fffdf8; border-style: dashed; }
.path-media { margin: 0 -18px 6px; border-radius: 10px 10px 0 0; overflow: hidden; background: var(--site-azul-marino); }
.path-media img { width: 100%; height: auto; aspect-ratio: 760 / 420; object-fit: cover; transition: transform .5s ease; }
.path-step:hover .path-media img { transform: scale(1.04); }
.path-step--soon .path-media img { filter: saturate(.75); }
.path-num { z-index: 1; position: absolute; top: -13px; left: 16px; width: 26px; height: 26px; border-radius: 50%; background: var(--site-azul-marino); color: #fff; font-size: var(--fs-xs); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.path-step--soon .path-num { background: var(--site-naranja); }
.path-program { position: relative; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 6px 18px; margin-top: 18px; padding: 16px 22px; background: #fff; border: 1px solid #f1dcb9; border-left: 5px solid var(--site-naranja); border-radius: 10px; transition: box-shadow .25s ease; }
.path-program[hidden] { display: none; }
.path-program:hover { box-shadow: 0 8px 22px rgba(0, 51, 102, .12); }
.path-program-tag { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #8a4d06; }
.path-program strong { color: var(--site-azul-marino); font-size: var(--fs-base); }
.path-program-meta { font-size: var(--fs-sm); color: var(--site-gris-texto); }
.path-program-meta b { color: var(--site-azul-marino); }
.path-program-go { font-size: var(--fs-sm); font-weight: 600; color: var(--site-azul-acento); white-space: nowrap; }
.path-program:hover .path-program-go { text-decoration: underline; }

/* Metodología */
.method-wrap { display: grid; grid-template-columns: 1fr 1.25fr; gap: 28px; align-items: stretch; }
.method-photo { position: relative; margin: 0; border-radius: 12px; overflow: hidden; min-height: 320px; box-shadow: 0 10px 28px rgba(0, 51, 102, .16); }
.method-photo picture, .method-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.method-photo figcaption { position: absolute; left: 16px; bottom: 16px; right: 16px; padding: 10px 14px; border-radius: 8px; background: rgba(0, 34, 68, .85); color: #fff; font-size: var(--fs-sm); font-weight: 600; }
.method-photo figcaption i { color: var(--site-verde); margin-right: 6px; }
.method-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.method-step { position: relative; padding: 26px 22px 22px; background: #fff; border: 1px solid var(--site-borde); border-radius: 10px; }
.method-step > i { font-size: 1.5rem; color: var(--site-azul-acento); }
.method-step h3 { margin: 12px 0 6px; font-size: var(--fs-base); color: var(--site-azul-marino); }
.method-step p { margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--site-gris-texto); }
.method-num { position: absolute; top: 18px; right: 20px; font-family: var(--font-display); font-size: 2rem; font-weight: 700; line-height: 1; color: var(--site-borde); }
.included-list { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin: 26px 0 0; padding: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--site-azul-marino); }
.included-list i { color: var(--site-verde); margin-right: 6px; }
.director-formacion { margin: 52px auto 0; padding: 30px; background: #fff; border: 1px solid var(--site-borde); border-radius: 12px; }

/* Test de nivel */
.level-cta { padding: 40px 0; background: linear-gradient(135deg, var(--site-azul-marino), #00509e); color: #fff; }
.level-cta .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.level-cta h2 { text-align: left; margin: 0 0 4px; color: #fff; font-size: var(--fs-xl); }
.level-cta p { margin: 0; color: #d6e4f3; }
.level-cta .btn { flex-shrink: 0; }
.level-img { flex-shrink: 0; width: 220px; }
.level-img img { width: 100%; height: auto; border-radius: 8px; box-shadow: 0 8px 22px rgba(0, 0, 0, .3); }
.level-text { flex: 1; }

/* Microcursos */
.micro-section { padding: 0 0 64px; }
.micro-section[hidden], #microcursos[hidden] { display: none; }
#microcursos { padding-bottom: 0; }
.course-grid--4 { grid-template-columns: repeat(4, 1fr); gap: 22px; }


@media (max-width: 1100px) {
  .course-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1000px) {
  .area-grid { grid-template-columns: repeat(2, 1fr); }
  .method-wrap { grid-template-columns: 1fr; }
  .path-program { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .area-grid, .method-grid { grid-template-columns: 1fr; }
  .level-img { width: 100%; max-width: 320px; }
  .path { padding: 22px 16px; }
  .path-head { flex-direction: column; gap: 10px; }
  .course-grid--4 { grid-template-columns: 1fr; max-width: 460px; }
  .level-cta .container { flex-direction: column; align-items: flex-start; }
  .director-formacion { flex-direction: column; text-align: center; padding: 24px 18px; }
  .director-formacion h2 { text-align: center; }
}

/* Fichas de áreas: misma altura de imagen y textos alineados a dos líneas */
.area-media { overflow: hidden; }
.area-media picture { position: absolute; inset: 0; height: auto; }
.area-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.area-media .area-icon { z-index: 2; }
.area-media { overflow: visible; }
.area-media picture { overflow: hidden; }
.area-card p { min-height: 3em; }
.area-count { display: flex; flex-direction: column; gap: 2px; min-height: 2.6em; }
.area-count > span { display: block; }

/* ---------- Programas formativos: tarjetas con imagen grande y descripción ancha ---------- */
.prog-list-wrap { display: grid; gap: 22px; }
.prog-card { display: grid; grid-template-columns: 300px 1fr 200px; gap: 0 28px; align-items: stretch; background: #fff; border: 1px solid var(--site-borde); border-left: 6px solid var(--prog-accent, var(--site-azul-marino)); border-radius: 12px; overflow: hidden; box-shadow: 0 2px 10px rgba(0, 51, 102, .06); transition: box-shadow .25s ease, transform .25s ease; }
.prog-card:hover { box-shadow: 0 12px 30px rgba(0, 51, 102, .14); transform: translateY(-2px); }
.prog-card[hidden] { display: none; }
.prog--excel { --prog-accent: #1f9d55; }
.prog--pbi { --prog-accent: #e0a800; }
.prog--gestion { --prog-accent: #0b6bcb; }
.prog--pymes { --prog-accent: #d9741a; }
.prog--ia { --prog-accent: #7a52d1; }
.prog-card .prog-media { display: block; width: auto; border-radius: 0; box-shadow: none; overflow: hidden; background: var(--site-azul-marino); }
.prog-card .prog-media picture, .prog-card .prog-media img { display: block; width: 100%; height: 100%; }
.prog-card .prog-media img { object-fit: cover; aspect-ratio: auto; min-height: 180px; transition: transform .5s ease; }
.prog-card:hover .prog-media img { transform: scale(1.05); }
.prog-main { padding: 22px 0; min-width: 0; }
.prog-main h3 { margin: 0 0 6px; font-size: var(--fs-xl); line-height: 1.25; }
.prog-main h3 a { color: var(--site-azul-marino); }
.prog-main h3 a:hover { text-decoration: underline; }
.prog-desc { margin: 0 0 12px; font-size: var(--fs-md); line-height: 1.6; color: var(--site-gris-texto); max-width: 62ch; }
.prog-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 12px; font-size: var(--fs-sm); font-weight: 700; color: var(--site-azul-marino); }
.prog-meta i { color: var(--prog-accent); margin-right: 5px; }
.prog-card .prog-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px; font-size: var(--fs-sm); color: var(--site-negro-texto); }
.prog-card .prog-list li { position: relative; padding-left: 16px; line-height: 1.45; }
.prog-card .prog-list li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--prog-accent); }
.prog-card .prog-list small { color: var(--site-naranja-oscuro); }
.prog-side { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: 22px 22px 22px 0; border-left: 1px solid var(--site-borde); padding-left: 22px; }
.prog-old s { font-size: var(--fs-sm); color: var(--site-gris-oscuro); }
.prog-final { font-size: 1.7rem; line-height: 1.1; color: var(--site-azul-marino); font-family: var(--font-heading); }
.prog-side em { font-style: normal; font-size: var(--fs-xs); font-weight: 700; color: #1f6b30; margin-bottom: 8px; }
.prog-link { font-size: var(--fs-sm); font-weight: 700; color: var(--site-azul-acento); white-space: nowrap; }
.prog-link:hover { text-decoration: underline; }
.prog-link i { margin-left: 4px; transition: transform .2s ease; }
.prog-card:hover .prog-link i { transform: translateX(4px); }
@media (max-width: 1000px) {
  .prog-card { grid-template-columns: 240px 1fr; }
  .prog-side { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; border-left: 0; border-top: 1px solid var(--site-borde); padding: 14px 22px; }
  .prog-main { padding-right: 22px; }
}
@media (max-width: 700px) {
  .prog-card { grid-template-columns: 1fr; border-left-width: 0; border-top: 6px solid var(--prog-accent); }
  .prog-card .prog-media img { min-height: 0; aspect-ratio: 760 / 420; }
  .prog-main { padding: 18px 20px 0; }
  .prog-card .prog-list { grid-template-columns: 1fr; }
}

/* Portada completa, sin recortes */
.prog-card { grid-template-columns: 340px 1fr 200px; }
.prog-card .prog-media { align-self: center; margin: 18px 0 18px 18px; border-radius: 8px; aspect-ratio: 760 / 420; box-shadow: 0 6px 18px rgba(0, 51, 102, .25); }
.prog-card .prog-media picture, .prog-card .prog-media img { height: 100%; }
.prog-card .prog-media img { min-height: 0; aspect-ratio: 760 / 420; object-fit: cover; }
@media (max-width: 1000px) {
  .prog-card { grid-template-columns: 280px 1fr; }
}
@media (max-width: 700px) {
  .prog-card .prog-media { margin: 0; border-radius: 0; box-shadow: none; }
}


/* ---------- Programas formativos: ajustes tras la revisión ---------- */
/* Cursos en orden de lectura vertical (el orden del itinerario importa) */
.prog-card .prog-list { display: block; columns: 2; column-gap: 28px; }
.prog-card .prog-list li { break-inside: avoid; margin-bottom: 5px; }
.prog-card .prog-list small { white-space: nowrap; }
/* Toda la tarjeta es clicable */
.prog-card { position: relative; }
.prog-link::after { content: ""; position: absolute; inset: 0; }
.prog-main h3 a, .prog-card .prog-media { position: relative; z-index: 1; }
.prog-side em { font-size: var(--fs-sm); }
/* Móvil: una sola columna (corrige el orden de las reglas anteriores) */
@media (max-width: 700px) {
  .prog-card { grid-template-columns: 1fr; border-left-width: 0; border-top: 6px solid var(--prog-accent); }
  .prog-card .prog-media { margin: 0; border-radius: 0; box-shadow: none; aspect-ratio: 760 / 420; }
  .prog-main { padding: 18px 20px 6px; }
  .prog-main h3 { font-size: var(--fs-lg); }
  .prog-card .prog-list { columns: 1; }
  .prog-side { grid-column: auto; padding: 14px 20px 18px; justify-content: flex-start; }
}

/* =========================================================
   Itinerarios por área: pasos en vertical + programa al lado
   Cada área tiene su color, el mismo que el de su programa y sus portadas.
   ========================================================= */
.path--excel { --area: #1f9d55; --area-ink: #17703d; --area-soft: #e7f5ec; }
.path--powerbi { --area: #d9a400; --area-ink: #8a6500; --area-soft: #fcf4d6; }
.path--gestion { --area: #0b6bcb; --area-ink: #0a55a1; --area-soft: #e4effb; }
.path--productividad { --area: #7a52d1; --area-ink: #5b38ab; --area-soft: #efe9fb; }
.path[class*="path--"] { background: #fff; border: 1px solid var(--site-borde); border-top: 5px solid var(--area); padding: 30px; box-shadow: 0 4px 18px rgba(0, 51, 102, .06); }
.path[class*="path--"] .path-head { margin-bottom: 26px; }
.path[class*="path--"] .area-icon { background: var(--area); }
.path-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 34px; align-items: start; }
.path-body:not(:has(.path-program:not([hidden]))) { grid-template-columns: 1fr; }
.path-body:not(:has(.path-program:not([hidden]))) .path-aside { display: none; }

/* Pasos */
.path-body .path-steps { position: relative; display: grid; grid-auto-flow: row; grid-auto-columns: auto; gap: 14px; padding-left: 46px; }
.path-body .path-steps::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: 34px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--area) 0%, var(--area-soft) 100%); }
.path-body .path-step { display: grid; grid-template-columns: 210px minmax(0, 1fr) 140px; gap: 0 20px; align-items: center; padding: 12px 18px 12px 12px; border-radius: 12px; border: 1px solid var(--site-borde); background: #fff; box-shadow: 0 2px 8px rgba(0, 51, 102, .05); transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease; }
.path-body .path-step[hidden] { display: none; }
.path-body .path-step:hover { box-shadow: 0 10px 26px rgba(0, 51, 102, .13); border-color: var(--area); transform: translateX(3px); }
.path-body .path-step:not(:last-child)::after { content: none; }
.path-body .path-num { top: 50%; left: -46px; transform: translateY(-50%); width: 34px; height: 34px; font-size: var(--fs-sm); background: var(--area); box-shadow: 0 0 0 5px #fff; }
.path-body .path-step--soon { background: #fffdf8; border-style: dashed; }
.path-body .path-step--soon .path-num { background: #fff; color: var(--area-ink); border: 2px dashed var(--area); }
.path-thumb { border-radius: 8px; overflow: hidden; background: var(--site-azul-marino); aspect-ratio: 760 / 420; }
.path-thumb picture, .path-thumb img { display: block; width: 100%; height: 100%; }
.path-thumb img { object-fit: cover; transition: transform .5s ease; }
.path-step:hover .path-thumb img { transform: scale(1.05); }
.path-info { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.path-body .path-step h4 { font-size: var(--fs-base); line-height: 1.3; color: var(--site-azul-marino); }
.path-body .path-step .course-desc { font-size: var(--fs-sm); line-height: 1.5; }
.path-incl { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 2px 0 0; font-size: var(--fs-xs); color: var(--site-gris-texto); }
.path-incl .chip { font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.chip--gestion { background: #e4effb; color: #0a55a1; }
.chip--pymes { background: #fdeede; color: #a8540b; }
.path-buy { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; padding-left: 16px; border-left: 1px solid var(--site-borde); align-self: stretch; justify-content: center; }
.path-price { font-family: var(--font-heading); font-size: 1.45rem; line-height: 1.1; color: var(--site-azul-marino); }
.path-price--soon { font-size: var(--fs-sm); font-family: inherit; color: #8a4d06; background: #fdf0dc; padding: 3px 10px; border-radius: 999px; }
.path-time { font-size: var(--fs-xs); color: var(--site-gris-texto); white-space: nowrap; }
.path-time i { margin-right: 3px; color: var(--area); }
.path-body .path-step .link-arrow { margin-top: 6px; padding-top: 0; white-space: nowrap; color: var(--area-ink); }

/* Programa del área */
.path-aside { position: sticky; top: 96px; display: grid; gap: 14px; }
.path-aside-title { margin: 0; font-size: var(--fs-sm); font-weight: 700; color: var(--area-ink); }
.path-aside-title i { margin-right: 6px; transform: scaleX(-1); }
.path-aside .path-program { display: block; grid-template-columns: none; margin: 0; padding: 0; border: 2px solid var(--prog-accent, var(--area)); border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 8px 24px rgba(0, 51, 102, .12); transition: transform .25s ease, box-shadow .25s ease; }
.path-aside .path-program[hidden] { display: none; }
.path-aside .path-program:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0, 51, 102, .2); }
.path-program-media { display: block; aspect-ratio: 760 / 420; overflow: hidden; }
.path-program-media picture, .path-program-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.path-program-body { display: flex; flex-direction: column; gap: 3px; padding: 16px 18px 18px; }
.path-aside .path-program-tag { color: var(--site-gris-texto); }
.path-aside .path-program-tag i { color: var(--prog-accent, var(--area)); margin-right: 4px; }
.path-aside .path-program strong { font-family: var(--font-heading); font-size: var(--fs-lg); line-height: 1.25; }
.path-aside .path-program-meta { margin-bottom: 6px; }
.path-program-price { display: flex; align-items: baseline; gap: 10px; }
.path-program-price s { font-size: var(--fs-sm); color: var(--site-gris-oscuro); }
.path-program-price b { font-family: var(--font-heading); font-size: 1.7rem; line-height: 1.1; color: var(--site-azul-marino); }
.path-aside .path-program em { font-size: var(--fs-sm); }
.path-aside .path-program-go { display: block; margin-top: 12px; padding: 10px 14px; border-radius: 22px; background: var(--color-naranja); color: #fff; text-align: center; font-weight: 700; white-space: normal; }
.path-aside .path-program:hover .path-program-go { text-decoration: none; background: #b06c14; }
/* Dos programas en la misma área: versión compacta sin portada grande */
.path--gestion .path-program-media { aspect-ratio: 760 / 300; }
.path--gestion .path-program-price b { font-size: 1.4rem; }

@media (max-width: 1100px) {
  .path-body { grid-template-columns: 1fr; }
  .path-aside { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .path-aside-title { grid-column: 1 / -1; }
  .path-aside-title i { transform: rotate(0); }
}
@media (max-width: 760px) {
  .path[class*="path--"] { padding: 20px 16px; }
  .path-body .path-steps { padding-left: 0; }
  .path-body .path-steps::before { display: none; }
  .path-body .path-step { grid-template-columns: 112px minmax(0, 1fr); gap: 10px 14px; padding: 12px; align-items: start; }
  .path-body .path-num { top: 4px; left: 4px; transform: none; width: 26px; height: 26px; font-size: var(--fs-xs); box-shadow: 0 0 0 3px #fff; }
  .path-buy { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; padding: 10px 0 0; border-left: 0; border-top: 1px solid var(--site-borde); text-align: left; }
  .path-body .path-step .link-arrow { margin-top: 0; margin-left: auto; }
  .path-price { font-size: 1.2rem; }
}
.path-step--soon .link-arrow i { font-size: .85em; }

/* Itinerarios: tableta (pasos a ancho completo, programas debajo en fila) */
@media (max-width: 1100px) and (min-width: 761px) {
  .path-body .path-step { grid-template-columns: 200px minmax(0, 1fr) 140px; }
}
/* Las portadas no se desaturan en "Próximamente": su color es la conexión con el programa */
.path-body .path-step--soon .path-thumb img { filter: none; }

/* Programa transversal (cursos de varias áreas) */
.path--pymes { --area: #d9741a; --area-ink: #a8540b; --area-soft: #fdeede; }
.path--gestion .path-program-media { aspect-ratio: 760 / 420; }
.path--gestion .path-program-price b { font-size: 1.7rem; }
.path-kicker { display: block; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--area-ink); }
.chip--excel { background: #e7f5ec; color: #17703d; }
.chip--ia { background: #efe9fb; color: #5b38ab; }
a.chip { position: relative; z-index: 2; text-decoration: none; }
a.chip:hover { text-decoration: underline; }

/* ---------- Tests de nivel por área ---------- */
.level-cta { padding: 60px 0; }
.level-cta .container { display: block; }
.level-head { text-align: center; max-width: 760px; margin: 0 auto 30px; }
.level-kicker { display: inline-block; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #c8f0a8; margin-bottom: 8px; }
.level-cta .level-head h2 { text-align: center; font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 8px; }
.level-facts { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 16px 0 0; padding: 0; font-size: var(--fs-sm); font-weight: 600; color: #fff; }
.level-facts i { margin-right: 6px; color: #9ec0e6; }
.level-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.level-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 22px 18px 18px; background: #fff; border-radius: 14px; border-top: 5px solid var(--lv); box-shadow: 0 10px 26px rgba(0, 0, 0, .2); transition: transform .25s ease, box-shadow .25s ease; }
.level-card:hover { transform: translateY(-5px); box-shadow: 0 18px 36px rgba(0, 0, 0, .3); }
.level-card--excel { --lv: #1f9d55; --lv-soft: #e7f5ec; }
.level-card--powerbi { --lv: #d9a400; --lv-soft: #fcf4d6; }
.level-card--gestion { --lv: #0b6bcb; --lv-soft: #e4effb; }
.level-card--productividad { --lv: #d9741a; --lv-soft: #fdeede; }
.level-card--ia { --lv: #7a52d1; --lv-soft: #efe9fb; }
.level-icon { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--lv-soft); color: var(--lv); font-size: 1.2rem; margin-bottom: 6px; }
.level-card strong { font-family: var(--font-heading); font-size: var(--fs-base); line-height: 1.25; color: var(--site-azul-marino); }
.level-desc { font-size: var(--fs-sm); line-height: 1.45; color: var(--site-gris-texto); }
.level-go { margin-top: auto; padding-top: 10px; font-size: var(--fs-sm); font-weight: 700; color: var(--site-azul-acento); white-space: nowrap; }
.level-go i { margin-left: 4px; transition: transform .2s ease; }
.level-card:hover .level-go i { transform: translateX(4px); }
@media (max-width: 1000px) { .level-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .level-cta .container { display: block; } .level-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .level-card { padding: 18px 14px 14px; } }
@media (max-width: 400px) { .level-grid { grid-template-columns: 1fr; } }

/* ---------- Microcursos: misma disposición que los itinerarios ---------- */
.path--micro { --area: #0e9aa0; --area-ink: #0a6f74; --area-soft: #dff5f4; }
.prog--fde { --prog-accent: #0e9aa0; }
.micro-facts { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin: -14px 0 28px; padding: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--site-azul-marino); }
.micro-facts i { margin-right: 6px; color: #0e9aa0; }

/* ---------- Recursos gratuitos ---------- */
.free-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.free-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--site-borde); border-radius: 12px; overflow: hidden; box-shadow: 0 2px 10px rgba(0, 51, 102, .06); transition: transform .25s ease, box-shadow .25s ease; }
.free-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0, 51, 102, .16); }
.free-media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--site-azul-marino); }
.free-media picture, .free-media img { display: block; width: 100%; height: 100%; }
.free-media img { object-fit: cover; transition: transform .5s ease; }
.free-card:hover .free-media img { transform: scale(1.06); }
.free-type { position: absolute; left: 12px; top: 12px; padding: 4px 11px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; background: #fff; color: var(--ft, var(--site-azul-marino)); box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.free-type i { margin-right: 4px; }
.free-card--simulador { --ft: #0a55a1; }
.free-card--guia { --ft: #17703d; }
.free-body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 16px 18px 18px; border-top: 4px solid var(--ft); }
.free-body strong { font-family: var(--font-heading); font-size: var(--fs-base); line-height: 1.3; color: var(--site-azul-marino); }
.free-desc { font-size: var(--fs-sm); line-height: 1.5; color: var(--site-gris-texto); }
.free-go { margin-top: auto; padding-top: 8px; font-size: var(--fs-sm); font-weight: 700; color: var(--site-azul-acento); }
.free-go i { margin-left: 4px; transition: transform .2s ease; }
.free-card:hover .free-go i { transform: translateX(4px); }
.free-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px; margin-top: 30px; }
.free-pill { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--site-borde); background: #fff; font-size: var(--fs-sm); font-weight: 600; color: var(--site-azul-marino); transition: border-color .2s ease, background .2s ease; }
.free-pill:hover { border-color: var(--site-azul-marino); background: #f4f8fc; }
.free-pill i { margin-right: 5px; color: var(--site-azul-acento); }
.free-more .btn { margin-left: 6px; }
@media (max-width: 1000px) { .free-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .free-grid { grid-template-columns: 1fr; } .free-more .btn { margin-left: 0; width: 100%; text-align: center; } }
.free-type { top: auto; bottom: 12px; }
.path-paso { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--area-ink); }

/* ---------- Cinco áreas: Gestión del Negocio y Administración y Finanzas separadas ---------- */
.area-grid--5 { grid-template-columns: repeat(5, 1fr); gap: 18px; }
.area-grid--5 .area-card h3 { font-size: var(--fs-base); }
.area-grid--5 .area-body { padding: 28px 16px 18px; }
@media (max-width: 1100px) { .area-grid--5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .area-grid--5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .area-grid--5 { grid-template-columns: 1fr; } }
.path--negocio { --area: #d9741a; --area-ink: #a8540b; --area-soft: #fdeede; }
.prog-for { display: block; color: var(--site-azul-marino); }
.area-grid--5 .area-card h3 { min-height: 2.6em; display: flex; align-items: flex-end; line-height: 1.3; }

/* =========================================================
   Conversión y versión móvil (octubre 2026)
   ========================================================= */
/* Fechas de convocatoria en cada curso */
.path-date { font-size: var(--fs-xs); font-weight: 700; color: var(--area-ink); white-space: nowrap; }
.path-date i { margin-right: 3px; }
.path-date[hidden], [data-hasta][hidden] { display: none; }
.path-date--pre { color: #8a4d06; background: #fdf0dc; padding: 2px 8px; border-radius: 999px; }
.path-body .path-step--pre .path-num { background: #fff; color: var(--area-ink); border: 2px solid var(--area); }


/* Barra de áreas: acompaña al recorrer los itinerarios */
.area-nav { position: sticky; top: 0; z-index: 60; padding: 10px 0; margin-bottom: 26px; background: rgba(255, 255, 255, .96); backdrop-filter: blur(6px); border-bottom: 1px solid var(--site-borde); }
.area-nav a.is-active { background: var(--site-azul-marino); border-color: var(--site-azul-marino); color: #fff; }
.path { scroll-margin-top: 76px; }

/* Áreas desplegables (solo en móvil) */
.path-count, .path-toggle { display: none; }

/* Preguntas frecuentes, empresas y cierre */
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-more { margin: 22px 0 0; text-align: center; color: var(--site-gris-texto); }
.faq-more a { color: var(--site-azul-marino); font-weight: 600; text-decoration: underline; }
.btn-whatsapp { display: inline-flex; align-items: center; gap: 8px; background: #1f8f4e; color: #fff; border-color: #1f8f4e; }
.btn-whatsapp:hover { background: #17733e; border-color: #17733e; color: #fff; }
.company-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.final-cta .hero-actions { justify-content: center; margin-top: 22px; }
.benefit-card--cta p strong { color: #fff; }

@media (max-width: 760px) {
  /* Ventajas: icono a la izquierda, dos líneas */
  .benefit-grid { gap: 10px; }
  .benefit-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px 12px; padding: 14px 16px; align-items: start; }
  .benefit-card .benefit-icon { grid-row: 1 / span 3; width: 40px; height: 40px; }
  .benefit-card p { font-size: var(--fs-sm); }

  /* Áreas: filas compactas */
  .area-grid--5 { grid-template-columns: 1fr; gap: 10px; }
  .area-grid--5 .area-card { flex-direction: row; align-items: stretch; }
  .area-grid--5 .area-media { flex: 0 0 96px; aspect-ratio: auto; border-bottom: 0; border-right: 4px solid var(--site-verde); }
  .area-grid--5 .area-media .area-icon { display: none; }
  .area-grid--5 .area-body { padding: 12px 14px; gap: 3px; }
  .area-grid--5 .area-card h3 { min-height: 0; display: block; margin: 0; }
  .area-grid--5 .area-card p { min-height: 0; }
  .area-grid--5 .area-count { flex-direction: row; flex-wrap: wrap; gap: 0 10px; min-height: 0; }
  .area-grid--5 .area-go { display: none; }

  /* Programas: portada pequeña, título y precio a la vista */
  .prog-list-wrap { gap: 12px; }
  .prog-card { grid-template-columns: 104px minmax(0, 1fr); gap: 0 12px; padding: 12px; border-top: 1px solid var(--site-borde); border-left: 5px solid var(--prog-accent); align-items: start; }
  .prog-card .prog-media { margin: 2px 0 0; border-radius: 6px; aspect-ratio: 760 / 420; align-self: start; box-shadow: 0 3px 10px rgba(0, 51, 102, .2); }
  .prog-main { padding: 0; }
  .prog-main h3 { font-size: var(--fs-base); margin-bottom: 4px; }
  .prog-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-bottom: 6px; font-size: var(--fs-sm); line-height: 1.45; }
  .prog-for { display: inline; }
  .prog-meta { margin: 0; font-size: var(--fs-xs); gap: 4px 12px; }
  .prog-card .prog-list { display: none; }
  .prog-side { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 2px 10px; margin-top: 10px; padding: 10px 0 0; border-left: 0; border-top: 1px solid var(--site-borde); }
  .prog-final { font-size: 1.25rem; }
  .prog-side em { margin: 0; font-size: var(--fs-xs); }
  .prog-link { margin-left: auto; }

  /* Barra de áreas deslizable */
  .area-nav { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; gap: 8px; margin: 0 -24px 16px; padding: 10px 24px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .area-nav::-webkit-scrollbar { display: none; }
  .area-nav a { flex: 0 0 auto; padding: 7px 14px; white-space: nowrap; }

  /* Áreas desplegables */
  .path { margin-bottom: 12px; }
  .path[class*="path--"] { padding: 14px; }
  .path[class*="path--"] .path-head { position: relative; flex-direction: row; align-items: center; text-align: left; gap: 12px; margin-bottom: 14px; padding-right: 40px; cursor: pointer; }
  .path-head .area-icon { width: 40px; height: 40px; font-size: 1rem; }
  .path-head h3 { font-size: var(--fs-lg); margin: 0; }
  .path-head p { font-size: var(--fs-sm); margin-top: 4px; }
  .path-kicker { font-size: .68rem; }
  .path-count { display: block; margin-top: 2px; font-size: var(--fs-xs); font-weight: 700; color: var(--area-ink); }
  .path-toggle { display: flex; align-items: center; justify-content: center; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 1px solid var(--site-borde); border-radius: 50%; background: #fff; color: var(--area-ink); cursor: pointer; }
  .path-toggle i { transition: transform .25s ease; }
  .path:not(.is-collapsed) .path-toggle i { transform: rotate(180deg); }
  .path.is-collapsed .path-body { display: none; }
  .path.is-collapsed .path-head { margin-bottom: 0; }
  .path.is-collapsed .path-head p { display: none; }

  /* Cursos: fila compacta (portada, nivel, título, precio y fecha) */
  .path-body .path-steps { gap: 8px; }
  .path-body .path-step { grid-template-columns: 84px minmax(0, 1fr); gap: 6px 12px; padding: 10px; }
  .path-body .path-step:hover { transform: none; }
  .path-thumb { grid-row: 1 / span 2; align-self: start; border-radius: 6px; }
  .path-info { gap: 3px; }
  .path-paso { font-size: .68rem; }
  .path-body .path-step h4 { font-size: var(--fs-md); line-height: 1.25; }
  .path-body .path-step .course-desc, .path-body .path-step .path-incl { display: none; }
  .path-body .path-num { top: 4px; left: 4px; width: 20px; height: 20px; font-size: .68rem; box-shadow: 0 0 0 2px #fff; }
  .path-buy { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 2px 8px; padding: 0; border: 0; text-align: left; }
  .path-price { font-size: 1.05rem; }
  .path-body .path-step .link-arrow { margin-left: auto; font-size: var(--fs-xs); }

  /* Programa del área: tarjeta horizontal */
  .path-aside { gap: 8px; margin-top: 4px; }
  .path-aside .path-program { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 0 12px; align-items: start; padding: 10px; border-width: 1px; border-left-width: 5px; border-radius: 10px; box-shadow: none; }
  .path-aside .path-program:hover { transform: none; }
  .path-program-media { border-radius: 6px; }
  .path-program-body { padding: 0; gap: 1px; }
  .path-aside .path-program strong { font-size: var(--fs-md); }
  .path-aside .path-program-meta { margin: 0; font-size: var(--fs-xs); }
  .path-program-price b, .path--gestion .path-program-price b { font-size: 1.1rem; }
  .path-aside .path-program em { font-size: var(--fs-xs); }
  .path-aside .path-program-go { margin-top: 4px; padding: 0; background: none; color: var(--color-naranja); text-align: left; font-size: var(--fs-sm); }
  .path-aside .path-program:hover .path-program-go { background: none; }

  /* Recursos gratuitos y empresas */
  .company-actions, .company-actions .btn { width: 100%; justify-content: center; text-align: center; }
  .final-cta .hero-actions .btn { width: 100%; justify-content: center; }
}
@media (max-width: 760px) {
  /* Cabecera del área: icono arriba y botón fijo en la esquina */
  .path[class*="path--"] .path-head { align-items: flex-start; }
  .path-toggle { top: 3px; transform: none; }
  /* Curso: flecha a la derecha en lugar de una línea propia */
  .path-body .path-step { padding-right: 34px; }
  .path-body .path-step .link-arrow { position: static; margin: 0; font-size: 0; }
  .path-body .path-step .link-arrow i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: .9rem; color: var(--area-ink); }
}
@media (max-width: 760px) {
  /* Tests de nivel: filas compactas */
  .level-grid { grid-template-columns: 1fr; gap: 8px; }
  .level-card { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 0 12px; align-items: center; padding: 10px 14px; border-top: 0; border-left: 5px solid var(--lv); border-radius: 10px; }
  .level-card:hover { transform: none; }
  .level-icon { grid-row: 1 / span 2; width: 40px; height: 40px; margin: 0; font-size: 1rem; }
  .level-desc { grid-column: 2; font-size: var(--fs-xs); }
  .level-go { grid-column: 3; grid-row: 1 / span 2; margin: 0; padding: 0; font-size: 0; }
  .level-go i { margin: 0; font-size: 1rem; }
  /* Recursos y artículos: carrusel deslizable */
  .free-grid, #articulos .gate-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin: 0 -24px; padding: 4px 24px 14px; -webkit-overflow-scrolling: touch; }
  .free-grid > *, #articulos .gate-grid > * { flex: 0 0 78%; scroll-snap-align: center; }
  .free-grid::-webkit-scrollbar, #articulos .gate-grid::-webkit-scrollbar { height: 4px; }
  .free-grid::-webkit-scrollbar-thumb, #articulos .gate-grid::-webkit-scrollbar-thumb { background: #b9c4d1; border-radius: 4px; }
}
/* Etiqueta de preinscripción: cabe en la columna del precio */
@media (min-width: 761px) { .path-date--pre { white-space: normal; text-align: center; line-height: 1.3; border-radius: 10px; padding: 3px 8px; } .path-aside { top: 84px; } }
/* Con filtro por objetivo, el recuento total del área no aplica */
.is-objetivo .path-count { display: none; }

/* ---------- Opiniones: carrusel ---------- */
.op-carousel { position: relative; margin-top: 8px; padding: 0 54px; }
.op-track { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 10px 2px 18px; outline: none; }
.op-track::-webkit-scrollbar { display: none; }
.op-card { flex: 0 0 calc((100% - 44px) / 3); scroll-snap-align: start; display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 26px 26px 22px; background: #fff; border: 1px solid var(--site-borde); border-radius: 14px; box-shadow: 0 6px 20px rgba(0, 51, 102, .07); }
.op-stars { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: #e4effb; color: var(--site-azul-acento); font-size: .95rem; }
.op-card p { margin: 0; flex: 1; font-size: var(--fs-md); line-height: 1.65; color: var(--site-negro-texto); }
.op-card footer { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--site-borde); }
.op-avatar { flex: 0 0 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--site-azul-marino); color: #fff; font-family: var(--font-heading); font-weight: 700; }
.op-card footer strong { display: block; color: var(--site-azul-marino); line-height: 1.2; }
.op-card footer small { display: block; font-size: var(--fs-xs); color: var(--site-gris-texto); line-height: 1.35; }
.op-nav { position: absolute; top: calc(50% - 18px); transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--site-borde); background: #fff; color: var(--site-azul-marino); cursor: pointer; box-shadow: 0 4px 12px rgba(0, 51, 102, .1); transition: background .2s ease, color .2s ease, border-color .2s ease; }
.op-nav:hover { background: var(--site-azul-marino); border-color: var(--site-azul-marino); color: #fff; }
.op-prev { left: 0; }
.op-next { right: 0; }
.op-dots { display: flex; justify-content: center; gap: 8px; margin-top: 6px; }
.op-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: #c3cedb; cursor: pointer; transition: width .25s ease, background .25s ease; }
.op-dots button.is-active { width: 26px; border-radius: 6px; background: var(--site-azul-marino); }
@media (max-width: 1000px) { .op-card { flex-basis: calc((100% - 22px) / 2); } }
@media (max-width: 700px) {
  .op-carousel { padding: 0; }
  .op-nav { display: none; }
  .op-track { gap: 14px; margin: 0 -24px; padding: 10px 24px 18px; scroll-padding: 0 24px; }
  .op-card { flex-basis: 86%; padding: 22px 20px 18px; }
}
@media (prefers-reduced-motion: reduce) { .op-track { scroll-behavior: auto; } }

/* ---------- Cierre: llamada final y aviso en una sola tarjeta ---------- */
.closing { padding: 72px 0; }
.closing-card { position: relative; overflow: hidden; max-width: 1040px; margin: 0 auto; padding: 52px 48px 40px; border-radius: 24px; background: linear-gradient(135deg, #0a5aa8 0%, #003366 100%); box-shadow: 0 24px 50px rgba(0, 51, 102, .25); color: #fff; text-align: center; }
.closing-card::after { content: ""; position: absolute; width: 340px; height: 340px; border-radius: 50%; background: rgba(125, 194, 66, .18); filter: blur(50px); right: -80px; top: -120px; pointer-events: none; }
.closing-card > * { position: relative; z-index: 1; }
.closing-card h2 { margin: 0 0 10px; color: #fff; font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
.closing-card > p { margin: 0; color: #dbe5f0; font-size: var(--fs-lg); }
.closing-card .hero-actions { justify-content: center; margin-top: 26px; }
.closing-aviso { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 36px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .18); }
.closing-aviso p { margin: 0; color: #dbe5f0; }
.closing-aviso p strong { color: #fff; }
.closing-aviso .notify-form--wide { width: 100%; max-width: 520px; display: grid; grid-template-columns: 1fr auto; gap: 10px; text-align: left; }
.closing-aviso .notify-consent { font-size: var(--fs-xs); }
@media (max-width: 700px) {
  .closing { padding: 44px 0; }
  .closing-card { padding: 36px 22px 28px; border-radius: 18px; }
  .closing-card .hero-actions .btn { width: 100%; justify-content: center; }
  .closing-aviso .notify-form--wide { grid-template-columns: 1fr; }
}

/* ---------- Fondos alternos ---------- */
#microcursos.bg-light, .micro-section.bg-light { background: var(--site-gris-claro); }
#opiniones .section-kicker { margin-bottom: 6px; }
.closing-card .hero-actions, .company-actions { align-items: center; }
.closing-card .hero-actions .btn, .company-actions .btn { margin: 0; transform: none; }
/* Empresas que confían, bajo las ventajas */
.trust-logos { margin-top: 38px; padding-top: 30px; border-top: 1px solid var(--site-borde); text-align: center; }
.trust-logos .trust-kicker { margin-bottom: 16px; }
@media (max-width: 760px) { .trust-logos { margin-top: 26px; padding-top: 22px; } }

/* ---------- Precios: plazos y lanzamiento ---------- */
.prog-plazos { margin-bottom: 8px; font-size: var(--fs-xs); font-weight: 600; color: var(--site-gris-texto); white-space: nowrap; }
.prog-plazos i { margin-right: 4px; color: var(--prog-accent); }
.path-price s { margin-left: 4px; font-family: var(--font-body); font-size: .62em; font-weight: 400; color: var(--site-gris-oscuro); }
.micro-note { margin: -14px auto 26px; text-align: center; font-size: var(--fs-sm); color: var(--site-gris-texto); }
.micro-note i { margin-right: 6px; color: #0e9aa0; }
@media (max-width: 760px) { .prog-plazos { margin: 0; } .prog-side .prog-link { flex-basis: 100%; text-align: right; } .micro-note { margin-top: 0; } }

/* "Próximo inicio: 1 ene. 2027" necesita más ancho que el precio: columna más ancha en escritorio y tableta */
@media (min-width: 761px) {
  .path-body .path-step { grid-template-columns: 200px minmax(0, 1fr) 186px; }
  .path-buy { min-width: 0; }
}

/* ---------- Cabecera de FORMACIÓN con fotografía ---------- */
.fm-hero .fm-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 52px; align-items: center; text-align: left; }
.fm-hero .fm-hero-text h1 { margin-left: 0; margin-right: 0; text-align: left; }
.fm-hero .fm-hero-text > p { margin-left: 0; margin-right: 0; text-align: left; }
.fm-hero .hero-actions, .fm-hero .hero-facts { justify-content: flex-start; }
.fm-hero-media { position: relative; margin: 0; }
.fm-hero-media picture { display: block; }
.fm-hero-media img { display: block; width: 100%; height: auto; border-radius: 18px; border: 4px solid rgba(255, 255, 255, .92); box-shadow: 0 24px 50px rgba(0, 0, 0, .35); transform: rotate(1.5deg); }
.fm-chip { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; background: #fff; color: var(--site-azul-marino); font-size: var(--fs-sm); font-weight: 700; box-shadow: 0 12px 26px rgba(0, 0, 0, .25); white-space: nowrap; }
.fm-chip > span { margin: 0 -4px; }
.fm-chip i { color: var(--color-naranja); }
.fm-chip--a { left: -20px; top: 20px; }
.fm-chip--b { right: -8px; bottom: 22px; }
.fm-chip--b i { color: #1f9d55; }
@media (max-width: 980px) {
  .fm-hero .fm-hero-grid { grid-template-columns: 1fr; text-align: center; }
  .fm-hero .fm-hero-text h1, .fm-hero .fm-hero-text > p { text-align: center; margin-left: auto; margin-right: auto; }
  .fm-hero .hero-actions, .fm-hero .hero-facts { justify-content: center; }
  .fm-hero-media { display: block; max-width: 520px; width: 100%; margin: 14px auto 0; }
  .fm-hero-media img { transform: none; border-width: 3px; }
  .fm-chip--a { left: 10px; top: 12px; }
  .fm-chip--b { right: 10px; bottom: 14px; }
}
@media (max-width: 480px) {
  .fm-chip { padding: 7px 10px; font-size: .78rem; gap: 6px; }
  .fm-chip--a { left: 8px; top: 8px; }
  .fm-chip--b { right: 8px; bottom: 10px; }
}
.fm-hero .hero-actions { align-items: center; }
.fm-hero .hero-actions .btn { margin: 0; }
.fm-hero .fm-hero-text > p { text-wrap: balance; }
.fm-hero .hero-facts { gap: 6px 20px; }

/* =========================================================
   Animación sobria de la página FORMACIÓN (<body class="pg-anim fm-anim">)
   Las entradas al llegar a la vista las gestiona initPgAnim (main.js).
   ========================================================= */
@keyframes pg-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes pg-left { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
@keyframes pg-right { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes pg-zoom { from { opacity: 0; transform: scale(.97) translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fm-media { from { opacity: 0; transform: translateX(40px) rotate(4deg); } to { opacity: 1; transform: rotate(1.5deg); } }
@keyframes fm-float { 0%, 100% { transform: rotate(1.5deg) translateY(0); } 50% { transform: rotate(1.5deg) translateY(-8px); } }
@keyframes fm-pop { 0% { opacity: 0; transform: translateY(10px) scale(.92); } 70% { transform: translateY(-2px) scale(1.03); } 100% { opacity: 1; transform: none; } }
.fm-anim .pg-rv { opacity: 0; }
.fm-anim .pg-rv.pg-rv-in { animation-duration: .65s; animation-timing-function: cubic-bezier(.22, .61, .36, 1); animation-fill-mode: both; }
.fm-anim .pg-rv--up.pg-rv-in { animation-name: pg-up; }
.fm-anim .pg-rv--left.pg-rv-in { animation-name: pg-left; }
.fm-anim .pg-rv--right.pg-rv-in { animation-name: pg-right; }
.fm-anim .pg-rv--zoom.pg-rv-in { animation-name: pg-zoom; animation-duration: .8s; }
/* Cabecera: texto escalonado, foto que entra y flota, etiquetas al final */
.fm-anim .fm-hero-text > * { animation: pg-up .7s cubic-bezier(.22, .61, .36, 1) both; }
.fm-anim .fm-hero-text > *:nth-child(1) { animation-delay: .05s; }
.fm-anim .fm-hero-text > *:nth-child(2) { animation-delay: .15s; }
.fm-anim .fm-hero-text > *:nth-child(3) { animation-delay: .27s; }
.fm-anim .fm-hero-text > *:nth-child(4) { animation-delay: .4s; }
.fm-anim .fm-hero-media img { animation: fm-media .9s cubic-bezier(.22, .61, .36, 1) .25s both, fm-float 7s ease-in-out 1.3s infinite; }
.fm-anim .fm-chip--a { animation: fm-pop .5s ease-out 1s both; }
.fm-anim .fm-chip--b { animation: fm-pop .5s ease-out 1.2s both; }
/* Detalles al pasar el ratón */
.fm-anim .level-card, .fm-anim .blog-mini { transition: transform .25s ease, box-shadow .25s ease; }
.fm-anim .area-card:hover .area-go i, .fm-anim .prog-card:hover .prog-link i { transition: transform .2s ease; }
.fm-anim .area-card:hover .area-go i { transform: translateY(3px); }
.fm-anim .area-card .area-icon, .fm-anim .benefit-icon { transition: transform .25s ease; }
.fm-anim .area-card:hover .area-icon, .fm-anim .benefit-card:hover .benefit-icon { transform: scale(1.08); }
.fm-anim .area-nav a { transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease; }
.fm-anim .area-nav a:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .fm-anim .pg-rv { opacity: 1; }
  .fm-anim .fm-hero-text > *, .fm-anim .fm-hero-media img, .fm-anim .fm-chip, .fm-anim .pg-rv.pg-rv-in { animation: none; }
}

/* ---------- Cierre de FORMACIÓN con fotografía ---------- */
.fm-closing { text-align: left; max-width: 1100px; }
.fm-closing-top { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 44px; align-items: center; }
.fm-closing-text h2 { text-align: left; }
.fm-closing-text > p { margin: 0; color: #dbe5f0; font-size: var(--fs-lg); }
.fm-closing .hero-actions { justify-content: flex-start; }
.fm-closing-photo { margin: 0; }
.fm-closing-photo picture { display: block; }
.fm-closing-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; border: 4px solid rgba(255, 255, 255, .9); box-shadow: 0 20px 44px rgba(0, 0, 0, .35); transform: rotate(2deg); transition: transform .5s ease; }
.fm-closing:hover .fm-closing-photo img { transform: rotate(0deg) scale(1.02); }
.fm-closing .closing-aviso { align-items: flex-start; }
.fm-closing .closing-aviso .notify-form--wide { margin: 0; }
@media (max-width: 900px) {
  .fm-closing { text-align: center; }
  .fm-closing-top { grid-template-columns: 1fr; gap: 24px; }
  .fm-closing-photo { order: -1; max-width: 420px; width: 100%; margin: 0 auto; }
  .fm-closing-photo img { aspect-ratio: 16 / 9; transform: none; }
  .fm-closing-text h2 { text-align: center; }
  .fm-closing .hero-actions { justify-content: center; }
  .fm-closing .closing-aviso { align-items: center; }
}
.fm-closing .hero-actions { align-items: center; flex-wrap: nowrap; }
.fm-closing .hero-actions .btn { margin: 0; white-space: nowrap; }
.fm-closing-alt { margin: 18px 0 0 !important; font-size: var(--fs-sm) !important; color: #dbe5f0; }
.fm-closing-alt a { color: #fff; font-weight: 700; text-decoration: underline; white-space: nowrap; }
.fm-closing-alt a i { margin: 0 2px 0 4px; color: #7fe0a5; }
@media (max-width: 560px) { .fm-closing .hero-actions { flex-wrap: wrap; } .fm-closing .hero-actions .btn { width: 100%; justify-content: center; } }

/* Títulos y textos que en el móvil deben quedar en un número fijo de filas */
.h2-dos-filas span { white-space: nowrap; }
@media (max-width: 640px) {
  .h2-dos-filas span { display: block; }
  .closing-card .h2-dos-filas { font-size: min(1.5rem, calc((100vw - 96px) / 14.8)); line-height: 1.3; }
  .method-photo figcaption { left: 10px; right: 10px; bottom: 10px; padding: 8px 10px; font-size: max(12px, min(.85rem, 3vw)); white-space: nowrap; }
  .method-photo figcaption i { margin-right: 4px; }
  /* Programas: nº de cursos y horas / precio con y sin descuento / opción de pago en tres plazos */
  .prog-side { align-items: baseline; }
  .prog-side .prog-plazos { flex: 1 0 100%; margin-top: 2px; }
  .prog-side .prog-link { flex: 1 0 100%; margin: 8px 0 0; justify-content: flex-end; text-align: right; }
}

/* Móvil: recursos gratuitos y artículos como lista compacta (miniatura a la izquierda) */
@media (max-width: 600px) {
  #aprende-gratis .free-card { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px; }
  #aprende-gratis .free-card .free-media { display: block; margin: 0; border-radius: 8px; overflow: hidden; }
  #aprende-gratis .free-card .free-media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
  #aprende-gratis .free-card .free-type { display: none; }
  #aprende-gratis .free-card .free-body { padding: 0; gap: 3px; border-top: 0; }
  #aprende-gratis .free-card .free-body strong { font-size: .98rem; line-height: 1.3; }
  #aprende-gratis .free-card .free-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .85rem; }
  #articulos .blog-mini { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px; }
  #articulos .blog-mini img { width: 104px; height: 78px; object-fit: cover; border-radius: 8px; }
}
@media (max-width: 600px) { #aprende-gratis .free-card.reveal, #articulos .blog-mini.reveal { opacity: 1; transform: none; } }

/* Cierre de FORMACIÓN en móvil: la columna se ajusta al ancho de la tarjeta y nada queda recortado */
@media (max-width: 900px) {
  .fm-closing-top { grid-template-columns: minmax(0, 1fr); }
  .fm-closing .fm-closing-text, .fm-closing .closing-aviso { min-width: 0; max-width: 100%; }
  .fm-closing .hero-actions { flex-wrap: wrap; width: 100%; }
  .fm-closing .hero-actions .btn { white-space: normal; max-width: 100%; text-align: center; }
  .fm-closing-alt a { white-space: normal; }
  .fm-closing-photo { max-width: 100%; }
  .fm-closing-photo img { width: 100%; max-width: 100%; aspect-ratio: 4 / 3; object-position: center 25%; }
  .fm-closing .notify-form--wide { max-width: 100%; }
}