/* Width includes padding and border; pseudo-elements obey the same box model. */
*,*::before,*::after{box-sizing:border-box}
.journey-page{max-width:1500px;margin:0 auto}
.journey-landscape{
  position:relative;
  isolation:isolate;
  overflow:visible;
  padding:28px clamp(20px,3vw,48px) 36px;
  border:1px solid #bed4db;
  border-radius:26px;
  background:#d9e6ee url('/static/themes/oficio/oficio-plano-leyenda.png') center 40%/cover no-repeat;
  box-shadow:0 12px 40px #183b5520;
}
.journey-landscape::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  overflow:hidden;
  background:
    linear-gradient(100deg,#f4f8fce8 0%,#eef5fbcc 38%,#edf6ff66 68%,transparent 92%),
    linear-gradient(180deg,#ffffff55 0%,transparent 32%,#072A4E55 100%);
}
.journey-landscape .back-link{color:#0B3A6B;font-weight:700;margin-bottom:18px;display:inline-block}

/* Hero · camino */
.journey-heading{
  max-width:860px;
  margin:0 0 18px;
  padding:0;
  display:flex;
  align-items:stretch;
  overflow:hidden;
  background:#fffffff0;
  border:1px solid #ffffffcc;
  border-radius:18px;
  box-shadow:0 8px 24px rgba(7,42,78,.08);
}
.journey-heading-copy{padding:22px 24px 20px;min-width:0;flex:1}
.journey-heading-photo{
  width:200px;
  object-fit:cover;
  flex-shrink:0;
  display:block;
}
.journey-heading .eyebrow{
  color:#1558A0;
  letter-spacing:.14em;
  font-size:11px;
  font-weight:800;
}
.journey-heading h1{
  font-size:clamp(32px,4vw,52px);
  line-height:1.06;
  letter-spacing:-1.6px;
  color:#072A4E;
  margin-top:8px;
}
.journey-heading h1::after{
  content:"";
  display:block;
  width:88px;
  height:4px;
  margin-top:12px;
  border-radius:99px;
  background:#3EC6E0;
}
.journey-heading p{font-size:16px;color:#3D5166;margin:14px 0 12px;font-weight:700}
.journey-heading p span{font-weight:400;white-space:nowrap}
.journey-legend{display:flex;flex-wrap:wrap;gap:8px}
.journey-legend span{
  padding:6px 12px;
  background:#fff;
  border:1px solid #D5DEE8;
  border-radius:999px;
  font-size:12px;
  color:#0B3A6B;
  font-weight:600;
}

/* Ruta pedagógica (cómo se aprende) */
.learn-path{
  position:relative;
  z-index:1;
  margin:0 0 22px;
  padding:22px 24px 16px;
  background:#fffffff4;
  border:1px solid #D5DEE8;
  border-radius:18px;
  box-shadow:0 6px 18px rgba(7,42,78,.07);
}
.learn-path-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.learn-path-head .eyebrow{color:#1558A0;letter-spacing:.12em;font-size:11px;font-weight:800}
.learn-path-head p{margin:0;font-size:13px;color:#6B7C8E}
.learn-path-track{
  --path-fill:0%;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
  position:relative;
  margin:0;
  padding:6px 4px 8px;
}
.learn-path-track::before,
.learn-path-track::after{
  content:"";
  position:absolute;
  top:36px;
  left:8%;
  right:8%;
  height:3px;
  border-radius:99px;
  pointer-events:none;
}
.learn-path-track::before{background:#D5DEE8}
.learn-path-track::after{
  right:auto;
  width:calc((100% - 16%) * var(--path-fill) / 100);
  background:#1558A0;
}
.learn-path-step{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:6px;
  min-width:0;
  padding:0 4px 4px;
}
.learn-path-node{
  width:56px;
  height:56px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#fff;
  color:#1558A0;
  border:2px solid #1558A0;
  box-shadow:0 2px 8px rgba(11,58,107,.12);
  position:relative;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.learn-path-node .work-ico{
  width:28px;height:28px;background:transparent;box-shadow:none;color:inherit;
}
.learn-path-node .work-ico svg{width:24px;height:24px;transition:transform .18s ease}
.learn-path-node small{
  position:absolute;
  top:-7px;left:-4px;
  width:18px;height:18px;
  border-radius:50%;
  background:#0B3A6B;
  color:#fff;
  font-size:10px;
  font-weight:800;
  display:grid;place-items:center;
}
.learn-path-step b{
  font-size:12px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#0B3A6B;
  line-height:1.2;
}
.learn-path-hint{font-size:12px;color:#3D5166;line-height:1.3;max-width:140px}
.learn-path-step em{
  font-style:normal;
  font-size:10px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.learn-path-step.is-done .learn-path-node{background:#1558A0;color:#fff;border-color:#1558A0}
.learn-path-step.is-done em{color:#1F8A5B}
.learn-path-step.is-current .learn-path-node{
  width:62px;height:62px;
  border-width:3px;
  background:#1558A0;
  color:#fff;
  box-shadow:0 0 0 4px #D6F4FA,0 6px 14px rgba(11,58,107,.16);
}
.learn-path-step.is-current em{color:#1558A0}
.learn-path-step.is-pending .learn-path-node{border-color:#9bb0c4;color:#6B7C8E}
.learn-path-step.is-pending .learn-path-node small{background:#6B7C8E}
.learn-path-step.is-goal .learn-path-node{
  background:#072A4E;
  color:#fff;
  border-color:#072A4E;
}
.learn-path-step.is-goal.is-pending .learn-path-node{background:#fff;color:#072A4E;border-color:#072A4E}
.learn-path-step.is-goal .learn-path-node .work-ico svg{width:24px;height:24px}
.learn-path-step:hover .learn-path-node{transform:translateY(-3px)}
.learn-path-step:hover .learn-path-node .work-ico svg{transform:scale(1.08)}
.learn-path-step:hover{opacity:1}
.learn-path-story{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px 10px;
  margin:8px 0 0;
  padding-top:10px;
  border-top:1px solid #E8EEF4;
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#6B7C8E;
}
.learn-path-story span+span::before{
  content:"→";
  margin-right:10px;
  color:#1558A0;
  opacity:.55;
}

/* Puente entre niveles */
.journey-bridge{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin:0 0 14px;
  padding:10px 4px 2px;
}
.journey-bridge .eyebrow{color:#0B3A6B;letter-spacing:.12em;font-size:11px;font-weight:800}
.journey-bridge small{color:#6B7C8E;font-size:12px}

/* Recorrido de módulos (qué se completa) */
.journey-stops{
  --mod-fill:0%;
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px;
  list-style:none;
  padding:0;
  margin:0;
  align-items:stretch;
}
.journey-stops::before,
.journey-stops::after{
  content:"";
  position:absolute;
  top:26px;
  left:10%;
  right:10%;
  height:4px;
  border-radius:99px;
  pointer-events:none;
}
.journey-stops::before{background:#D5DEE8}
.journey-stops::after{
  right:auto;
  width:calc((100% - 20%) * var(--mod-fill) / 100);
  background:#1558A0;
}
.journey-stop{--accent:#1F8A5B;--tint:#E6F6EE;min-width:0;position:relative;display:flex;flex-direction:column}
.journey-stop.color-1{--accent:#1558A0;--tint:#E8F1FB}
.journey-stop.color-2{--accent:#6818ed;--tint:#fcfaff}
.journey-stop.color-3{--accent:#C47A12;--tint:#FFF4E0}
.journey-marker{
  width:54px;height:54px;
  display:grid;place-items:center;
  background:var(--accent);
  border:4px solid #fff;
  border-radius:50%;
  margin:0 auto 18px;
  color:#fff;
  font-size:18px;
  font-weight:800;
  box-shadow:0 4px 12px rgba(7,42,78,.18);
  z-index:1;
  transition:transform .18s ease;
}
.journey-stop.is-here .journey-marker{
  box-shadow:0 0 0 4px #D6F4FA,0 6px 14px rgba(7,42,78,.2);
  transform:scale(1.06);
}
.journey-card{
  background:#fff;
  border:1px solid #D5DEE8;
  border-top:5px solid var(--accent);
  border-radius:18px;
  padding:0;
  overflow:hidden;
  box-shadow:0 8px 20px rgba(7,42,78,.1);
  display:flex;
  flex-direction:column;
  flex:1;
  min-width:0;
  position:relative;
  transition:transform .18s ease, box-shadow .18s ease, border-top-width .18s ease;
}
.journey-photo{
  position:relative;
  height:128px;
  overflow:hidden;
  background:#e8eef4;
}
.journey-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.journey-photo::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:36%;
  background:linear-gradient(transparent,#fff);
  pointer-events:none;
}
.journey-card-body{
  padding:12px 16px 16px;
  display:flex;
  flex-direction:column;
  flex:1;
  min-width:0;
}
.journey-stop:hover .journey-card{
  transform:translateY(-3px);
  box-shadow:0 12px 26px rgba(7,42,78,.14);
  border-top-width:7px;
}
.journey-stop:hover .journey-marker{transform:translateY(-2px)}
.journey-card-top{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:10px}
.journey-symbol{width:36px;height:36px;display:grid;place-items:center;color:var(--accent);background:var(--tint);border-radius:10px}
.journey-symbol .icon{width:20px;height:20px}
.journey-state{color:var(--accent);background:var(--tint);font-size:11px;font-weight:700;padding:5px 8px;border-radius:20px}
.journey-card .eyebrow{color:var(--accent);font-size:10px;letter-spacing:1.2px}
.journey-encargos{
  margin:8px 0 0;
  font-size:12px;
  font-weight:700;
  color:#0B6E6C;
  line-height:1.3;
}
.here-chip{
  position:absolute;
  top:10px;
  left:10px;
  z-index:1;
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:0;
  padding:5px 10px;
  border-radius:999px;
  background:#fffffff2;
  color:#0B3A6B;
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  box-shadow:0 2px 8px rgba(7,42,78,.12);
}
.here-chip .work-ico{width:18px;height:18px;background:transparent;box-shadow:none;color:#1558A0}
.here-chip .work-ico svg{width:14px;height:14px}
.journey-stations{display:flex;gap:7px;margin-top:auto;margin-bottom:10px}
.journey-stations span{height:27px;width:27px;border:1px solid #c4cedc;color:#657386;display:grid;place-items:center;border-radius:50%;font-size:11px;background:#f5f8fc}
.journey-stations .done{background:var(--accent);border-color:var(--accent);color:#fff}
.journey-card progress::-webkit-progress-value{background:var(--accent)}.journey-card progress::-moz-progress-bar{background:var(--accent)}
.journey-button{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;margin-top:18px;padding:12px 14px;min-height:46px;background:var(--accent);border:1px solid var(--accent);color:white;border-radius:10px;font-size:12px;font-weight:700}
.journey-button:hover{filter:brightness(1.08)}

/* Meta · destino exclusivo de la bandera */
.journey-finish{
  position:relative;
  display:flex;
  align-items:center;
  gap:22px;
  padding:26px 28px;
  margin:12px 0 0 auto;
  max-width:760px;
  min-height:120px;
  background:#fff;
  border:1px solid #E8D7A8;
  border-left:5px solid #C47A12;
  border-radius:18px;
  box-shadow:0 8px 22px rgba(7,42,78,.1);
}
.journey-finish::before{
  content:"";
  position:absolute;
  right:72px;
  top:-42px;
  height:42px;
  border-left:3px solid #1558A0;
}
.finish-visual{
  position:relative;
  width:92px;
  height:92px;
  flex-shrink:0;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 4px 12px rgba(7,42,78,.16);
}
.finish-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:brightness(.72);
}
.finish-flag{
  position:absolute;
  inset:0;
  margin:auto;
  display:grid;
  place-items:center;
  width:52px;height:52px;
  border-radius:50%;
  background:#072A4E;
  color:#fff;
  box-shadow:0 0 0 3px #fff;
}
.finish-flag .icon{width:26px;height:26px}
.journey-finish .eyebrow{color:#C47A12;font-size:10px;letter-spacing:.08em;font-weight:800}
.journey-finish h2{font-size:22px;color:#072A4E}
.journey-finish p{font-size:13px;color:#3D5166;margin:8px 0 0}
.journey-finish>strong{font-size:34px;color:#0B3A6B;margin-left:auto;white-space:nowrap}
.journey-finish>strong span{font-size:18px}
.journey-finish small{font-size:10px;white-space:normal;color:#6B7C8E}
.journey-finish.reached{border-left-color:#1F8A5B;background:#f7fbf8}
.journey-finish.reached .finish-flag{background:#1F8A5B;box-shadow:0 0 0 4px #E6F6EE}
.journey-finish.reached .eyebrow{color:#1F8A5B}

.journey-bottom{display:grid;grid-template-columns:1fr 1.4fr;gap:20px;margin-top:24px}
.journey-overall{display:flex;align-items:center;gap:18px}
.journey-overall>div{flex:1;min-width:0}
.journey-overall h2{font-size:21px}
.journey-overall p{font-size:12px}
.journey-overall>strong{font-size:36px}
.journey-bottom .support{display:flex;flex-direction:column;gap:10px}
.journey-bottom .support h3{margin-bottom:0}
.journey-bottom .support-card{margin:0}
.journey-bottom .support-card small{display:none}

@media(max-width:1280px){
  .journey-stops{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
  .journey-stops::before,.journey-stops::after{display:none}
}
@media(max-width:1150px){
  .journey-stops{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
  .journey-stops::before,.journey-stops::after{display:none}
  .journey-card h2{min-height:53px}
  .journey-landscape{background-attachment:scroll;background-position:60% top}
  .journey-heading{margin-bottom:16px}
  .journey-bottom{grid-template-columns:1fr}
  .journey-finish{max-width:none}
  .journey-finish::before{display:none}
  .journey-marker{margin-bottom:12px}
  .learn-path-track{gap:8px}
}
@media(max-width:800px){
  .journey-heading-photo{width:140px}
  .learn-path-track{
    grid-template-columns:1fr;
    gap:0;
    padding-left:8px;
  }
  .learn-path-track::before,.learn-path-track::after{
    top:12px;bottom:12px;left:31px;right:auto;width:3px;height:auto;
  }
  .learn-path-track::after{width:3px;height:calc(var(--path-fill) * 1%)}
  .learn-path-step{
    flex-direction:row;
    align-items:center;
    text-align:left;
    gap:12px;
    padding:10px 0;
  }
  .learn-path-hint{max-width:none}
  .learn-path-story{justify-content:flex-start}
}
@media(max-width:600px){
  .journey-landscape{padding:20px 16px;border-radius:18px;background-position:56% top}
  .journey-heading{flex-direction:column}
  .journey-heading-copy{padding:18px 16px 16px}
  .journey-heading-photo{width:100%;height:120px}
  .journey-heading h1{letter-spacing:-1px}
  .journey-heading p{font-size:15px}
  .journey-stops{grid-template-columns:1fr;gap:24px}
  .journey-stop{padding-left:30px}
  .journey-marker{position:absolute;left:0;top:22px;width:44px;height:44px;border-width:4px;font-size:16px}
  .journey-card{padding:0}
  .journey-photo{height:140px}
  .journey-card-body{padding:14px 16px 16px 20px}
  .journey-card h2{min-height:0}
  .journey-finish{padding:20px;gap:16px;flex-wrap:wrap}
  .finish-visual{width:72px;height:72px}
  .finish-flag{width:44px;height:44px}
  .journey-finish>div{flex:1;min-width:150px}
  .journey-finish>strong{margin-left:0;font-size:28px}
  .journey-finish h2{font-size:20px}
  .journey-bottom .support{grid-template-columns:1fr}
  .journey-bottom .support-card small{display:block}
  .journey-overall{gap:12px;padding:16px}
  .journey-overall .circle{display:none}
  .journey-overall>strong{font-size:28px}
}
@media(prefers-reduced-motion:reduce){
  .learn-path-step:hover .learn-path-node,
  .learn-path-step:hover .learn-path-node .work-ico svg,
  .journey-stop:hover .journey-card,
  .journey-stop:hover .journey-marker,
  .journey-stop.is-here .journey-marker{transform:none}
  .learn-path-node,.journey-card,.journey-marker{transition:none}
}