/*
  CSS propio de esta página.

  En el sitio original iba embebido en el <head> de capacitacion-empresarial-medellin.html.
  Al migrar a WordPress solo se trasladaron las secciones, no estos
  estilos, y por eso la página se veía desordenada: la cabecera salía
  sin márgenes y las rejillas sin columnas.

  Se copia tal cual, con la paleta nueva aplicada.
*/
.svc-nav{ background:var(--verde); padding:.9rem 0; position:sticky; top:0; z-index:50; }
  .svc-nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
  .svc-nav img{ height:34px; width:auto; }
  .svc-nav .btn{ padding:.6rem 1.2rem; font-size:.85rem; }
  .svc-hero{ background:var(--verde); color:var(--cream); padding:clamp(3rem,7vw,5.5rem) 0 clamp(3.4rem,7vw,5rem); }
  .svc-hero .kicker{ color:var(--oro); }
  .svc-hero h1{ font-size:clamp(2rem,5vw,3.3rem); color:var(--cream); margin-top:.7rem; max-width:19ch; line-height:1.06; }
  .svc-hero h1 em{ font-style:italic; color:var(--oro); }
  .svc-hero .lead{ margin-top:1.2rem; font-size:clamp(1rem,1.7vw,1.18rem); color:rgba(247, 245, 241,.8); max-width:58ch; }
  .svc-hero .acts{ margin-top:2rem; display:flex; gap:1rem; flex-wrap:wrap; }
  .svc-hero .reassure{ margin-top:1.1rem; font-size:.87rem; color:rgba(247, 245, 241,.62); }
  .breadcrumb{ font-size:.82rem; color:var(--ink-mute); margin-bottom:1.4rem; }
  .breadcrumb a{ color:var(--oro-deep); }

  /* Modelo Kirkpatrick */
  .kp{ display:grid; gap:1rem; margin-top:1.8rem; }
  @media (min-width:900px){ .kp{ grid-template-columns:repeat(4,1fr); } }
  .kp-nivel{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:1.5rem 1.4rem; position:relative; display:flex; flex-direction:column; }
  .kp-nivel.incluido{ border-top:3px solid var(--oro-deep); }
  .kp-nivel.aparte{ background:var(--panel); border-top:3px solid rgba(12,51,98,.3); }
  .kp-n{ font-family:var(--font-display); font-size:2rem; color:var(--oro-deep); line-height:1; }
  .kp-nivel h3{ font-family:var(--font-display); font-size:1.32rem; color:var(--verde); margin:.4rem 0 .1rem; }
  .kp-pregunta{ font-size:.84rem; color:var(--ink-mute); font-style:italic; margin-bottom:.7rem; }
  .kp-nivel p{ font-size:.9rem; color:var(--ink-mute); line-height:1.55; margin:0 0 1rem; }
  .kp-cuando{ margin-top:auto; font-size:.75rem; letter-spacing:.07em; text-transform:uppercase; font-weight:600; }
  .kp-nivel.incluido .kp-cuando{ color:var(--oro-deep); }
  .kp-nivel.aparte .kp-cuando{ color:var(--ink-mute); }

  /* Línea de tiempo 90 días */
  .tl{ margin-top:1.8rem; border-left:2px solid var(--oro-deep); padding-left:1.8rem; display:grid; gap:1.7rem; }
  .tl-item{ position:relative; }
  .tl-item::before{ content:""; position:absolute; left:calc(-1.8rem - 6px); top:.45rem; width:10px; height:10px; border-radius:50%; background:var(--oro-deep); border:2px solid var(--cream); }
  .tl-dia{ font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--oro-deep); }
  .tl-item h3{ font-family:var(--font-display); font-size:1.35rem; color:var(--verde); margin:.25rem 0 .35rem; }
  .tl-item p{ font-size:.94rem; color:var(--ink-mute); margin:0; line-height:1.6; max-width:62ch; }

  /* Fases y facturación */
  .fases{ display:grid; gap:1rem; margin-top:1.6rem; }
  @media (min-width:760px){ .fases{ grid-template-columns:repeat(3,1fr); } }
  .fase{ background:var(--verde-2); color:var(--cream); border-radius:14px; padding:1.5rem 1.6rem; }
  .fase .et{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--oro); font-weight:700; }
  .fase h3{ font-family:var(--font-display); font-size:1.35rem; color:var(--cream); margin:.4rem 0 .5rem; }
  .fase p{ font-size:.89rem; color:rgba(247, 245, 241,.74); margin:0; line-height:1.55; }

  .puente{ background:var(--verde-2); color:var(--cream); border-radius:18px; padding:clamp(1.8rem,4vw,2.6rem); display:grid; gap:1.8rem; }
  @media (min-width:820px){ .puente{ grid-template-columns:1fr 1fr; } }
  .puente h2{ font-size:1.6rem; color:var(--cream); margin-bottom:.7rem; }
  .puente p{ color:rgba(247, 245, 241,.78); font-size:.97rem; margin:0 0 .8rem; line-height:1.6; }
  .puente ul{ margin:0; padding-left:1.1rem; color:rgba(247, 245, 241,.78); font-size:.94rem; }
  .puente li{ margin-bottom:.5rem; }
  .temas{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.5rem; }
  .temas span{ font-size:.86rem; padding:.5rem 1rem; border-radius:100px; background:var(--panel); color:var(--oro-deep); border:1px solid var(--line); }