/* Encabezado pedagógico visual estándar · Aula TP Chile
   Identidad → ubicación pedagógica → contexto profesional.
   Un componente; cambia información, foto y acento de estación. */

body[data-screen="courses"] .topbar,
body[data-screen="course"] .topbar,
body[data-station="1"] .topbar,
body[data-station="2"] .topbar,
body[data-station="3"] .topbar,
body[data-station="4"] .topbar,
body[data-station="5"] .topbar{display:none}

body[data-screen="courses"] #main,
body[data-screen="course"] #main,
body[data-screen="module"] #main{padding-top:16px}

.atp-hero{
  --hero-accent:#1558A0;
  --hero-soft:#E8F1FB;
  --hero-wash:#F7FAFC;
  --hero-ink:#0B3A6B;
  --hero-muted:#3D5166;
  display:grid;
  grid-template-columns:minmax(132px,13%) minmax(0,42%) minmax(0,45%);
  min-height:280px;
  max-height:340px;
  height:clamp(280px,28vw,340px);
  border-radius:22px;
  overflow:hidden;
  background:linear-gradient(90deg,#fff 0%,var(--hero-wash) 55%,#fff 100%);
  border:1px solid #D5DEE8;
  box-shadow:0 1px 4px rgba(7,42,78,.06);
  position:relative;
  margin:0 0 16px;
  isolation:isolate;
}
.atp-hero.s1{--hero-accent:#3EC6E0;--hero-soft:#D6F4FA;--hero-wash:#F4FBFD}
.atp-hero.s2{--hero-accent:#1558A0;--hero-soft:#E8F1FB;--hero-wash:#F4F8FC}
.atp-hero.s3{--hero-accent:#6A5A9A;--hero-soft:#F3EFFA;--hero-wash:#F7F5FC}
.atp-hero.s4{--hero-accent:#C47A12;--hero-soft:#FFF4E0;--hero-wash:#FFFCF6}
.atp-hero.s5{--hero-accent:#1F8A5B;--hero-soft:#E6F6EE;--hero-wash:#F4FBF7}
.atp-hero.s0{--hero-accent:#1558A0;--hero-soft:#E8F1FB;--hero-wash:#F6F9FC}

.atp-hero-id{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  padding:18px 12px 28px 16px;
  background:#fff;
  z-index:2;
}
.atp-hero-logo{
  display:grid;
  place-items:center;
  width:100%;
  max-width:128px;
  min-height:88px;
  padding:10px 8px;
  background:#fff;
  border:1px solid #E8EEF4;
  border-radius:14px;
  box-shadow:0 1px 3px rgba(7,42,78,.04);
}
.atp-hero-logo img{
  width:100%;
  height:auto;
  max-height:72px;
  object-fit:contain;
  display:block;
}
.atp-hero-back{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:44px;
  padding:8px 14px;
  border-radius:999px;
  background:#fff;
  border:1px solid #C5D7EA;
  color:#1558A0;
  font-size:13px;
  font-weight:700;
  text-decoration:none;
  box-shadow:none;
}
.atp-hero-back .icon{width:14px;height:14px;transform:scaleX(-1)}
.atp-hero-back:hover{background:#E8F1FB;border-color:#9BB8D6;filter:none}
.atp-hero-back:focus-visible{
  outline:2px solid #3EC6E0;
  outline-offset:2px;
}
.atp-hero-account{
  margin-top:auto;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  color:#3D5166;
  width:100%;
}
.atp-hero-account .avatar{
  width:28px;height:28px;font-size:12px;flex-shrink:0;
  background:var(--hero-soft);color:var(--hero-ink);
}
.atp-hero-account > span:nth-child(2){
  display:none;
}
.atp-hero-account .plain{
  margin-left:0;
  background:#fff;color:#1558A0;border:1px solid #C5D7EA;
  padding:4px 8px;min-height:32px;font-size:11px;border-radius:999px;
}

.atp-hero-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
  padding:28px 18px 24px 16px;
  min-width:0;
  z-index:2;
  background:linear-gradient(90deg,#fff 0%,var(--hero-wash) 100%);
}
.atp-hero-crumb{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  font-size:12px;
  color:#6B7C8E;
  font-weight:600;
}
.atp-hero-crumb a{color:#1558A0;text-decoration:none;display:inline-flex;align-items:center;gap:4px}
.atp-hero-crumb a .work-ico,
.atp-hero-crumb a .work-ico svg,
.atp-hero-crumb a .icon{
  width:14px;height:14px;min-width:14px;min-height:14px;
  background:transparent;box-shadow:none;color:#1558A0;overflow:visible;
}
.atp-hero-crumb b{
  color:#fff;
  background:var(--hero-accent);
  padding:3px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
}
.atp-hero-kicker{
  margin:4px 0 0;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--hero-accent);
  overflow-wrap:break-word;
  max-width:52ch;
}
.atp-hero-copy h1{
  margin:0;
  color:#0B3A6B;
  font-size:clamp(26px,2.4vw,38px);
  font-weight:800;
  letter-spacing:-.4px;
  line-height:1.15;
}
.atp-hero-copy h1::after{
  content:"";
  display:block;
  width:52px;
  height:3px;
  margin-top:10px;
  border-radius:99px;
  background:var(--hero-accent);
}
.atp-hero.is-station .atp-hero-copy h1::after{
  content:"";
  display:block;
  width:82px;
  height:6px;
  margin-top:10px;
  border-radius:0 99px 99px 0;
  background:linear-gradient(92deg,#F8C74E,#F5B83A 55%,#EF9F2A);
}
.atp-hero-chip{
  display:none;
  align-items:center;
  gap:8px;
  margin:0;
  width:fit-content;
  padding:6px 10px;
  border-radius:999px;
  background:var(--hero-soft);
  color:var(--hero-ink);
  font-size:12px;
  font-weight:800;
  border:1px solid color-mix(in srgb, var(--hero-accent) 28%, #fff);
}
.atp-hero-chip .work-ico{
  width:20px;height:20px;background:transparent;box-shadow:none;color:var(--hero-accent);
}
.atp-hero-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:4px;
}
.atp-hero-meta span{
  padding:5px 10px;
  background:#fff;
  border:1px solid #D5DEE8;
  border-radius:999px;
  font-size:11px;
  color:#0B3A6B;
  font-weight:600;
}
.atp-hero-purpose{
  margin:0;
  font-size:16px;
  color:#3D5166;
  font-weight:500;
  line-height:1.4;
  max-width:40ch;
}
.atp-hero-detail{
  margin:0;
  font-size:14px;
  color:#0B3A6B;
  font-weight:700;
}
.atp-hero-orient{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin:6px 0 0;
  font-size:13px;
  color:#6B7C8E;
}
.atp-hero-orient .work-ico{
  width:22px;height:22px;border-radius:50%;
  background:var(--hero-soft);color:var(--hero-accent);
  box-shadow:none;
}
.atp-hero-orient .work-ico svg{width:12px;height:12px}
.atp-hero-orient b{color:var(--hero-ink);font-weight:700}

.atp-hero-visual{
  position:relative;
  min-width:0;
  z-index:1;
}
.atp-hero-visual img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:62% 38%;
}
body[data-specialty=climate] .atp-hero-visual img{
  object-position:58% 78%;
}
.atp-hero-fade{
  position:absolute;
  inset:0 auto 0 0;
  width:38%;
  background:linear-gradient(90deg,var(--hero-wash) 0%,color-mix(in srgb, var(--hero-wash) 55%, transparent) 42%,rgba(255,255,255,0) 100%);
  pointer-events:none;
}
.atp-hero-motto{
  position:absolute;
  top:16px;
  right:22%;
  max-width:188px;
  padding:10px 12px;
  background:rgba(255,255,255,.94);
  border:1px solid #E8EEF4;
  border-radius:14px;
  box-shadow:0 6px 18px rgba(7,42,78,.12);
  z-index:2;
}
.atp-spark{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin:8px 0 0;
  color:#1558A0;
  font-family:Georgia,"Palatino Linotype",Times,serif;
  font-size:14px;
  font-style:italic;
  font-weight:400;
  line-height:1.4;
}
.atp-spark em{
  display:block;
  font-style:italic;
  font-weight:400;
  color:#1558A0;
}
.atp-spark-leaf{
  width:20px;
  height:20px;
  flex-shrink:0;
  margin-top:1px;
  overflow:visible;
  filter:drop-shadow(0 1px 1px rgba(20,83,45,.28));
}
.atp-hero-motto.atp-spark{
  margin:0;
  font-size:13px;
}
.atp-hero.is-station .atp-hero-motto.atp-spark em{color:#1558A0}
.login-story .atp-spark{
  margin:14px 0 0;
  color:#D6F4FA;
  max-width:22rem;
}
.login-story .atp-spark em{color:#D6F4FA}
.login-story .atp-spark-leaf{
  width:22px;
  height:22px;
  filter:drop-shadow(0 1px 2px rgba(0,20,30,.4));
}
.page-heading .atp-spark{
  margin:10px 0 0;
  max-width:28rem;
}
.atp-hero-badge{
  position:absolute;
  right:16px;
  bottom:16px;
  min-width:92px;
  padding:10px 12px 8px;
  border-radius:14px;
  background:var(--hero-accent);
  color:#fff;
  text-align:center;
  z-index:2;
  box-shadow:0 6px 16px rgba(7,42,78,.18);
}
.atp-hero-badge .work-ico,
.atp-hero-badge .icon{
  display:block;margin:0 auto 4px;
  width:22px;height:22px;background:transparent;box-shadow:none;color:#fff;
}
.atp-hero-badge .work-ico svg{width:18px;height:18px}
.atp-hero-badge b{display:block;font-size:13px;line-height:1.15;font-weight:800}
.atp-hero-badge small{display:block;font-size:11px;opacity:.92;font-weight:600}

body.simple-visual .atp-hero-visual,
body.low-stim .atp-hero-visual,
body.simple-visual .atp-hero-motto,
body.low-stim .atp-hero-motto{display:none}
body.simple-visual .atp-hero,
body.low-stim .atp-hero{
  grid-template-columns:minmax(132px,16%) minmax(0,1fr);
  max-height:none;height:auto;
}
body.high-contrast .atp-hero,
body.high-contrast .atp-hero-logo,
body.high-contrast .atp-hero-back,
body.high-contrast .atp-hero-motto,
body.high-contrast .atp-hero-badge{
  border:2px solid #000 !important;
  box-shadow:none !important;
}
body.high-contrast .atp-hero-copy h1{color:#000}

@media (max-width:1100px){
  .atp-hero{grid-template-columns:120px minmax(0,1fr) minmax(0,42%);height:280px;max-height:300px}
  .atp-hero.is-station{height:auto;max-height:none;min-height:0}
  .atp-hero-copy h1{font-size:26px}
  .atp-hero.is-station .atp-hero-copy h1{font-size:clamp(22px,3.2vw,32px)}
  .atp-hero-motto{right:12px;max-width:110px;font-size:12px}
}
@media (max-width:800px){
  .atp-hero{
    grid-template-columns:1fr;
    height:auto;max-height:none;
  }
  .atp-hero-id{
    flex-direction:row;flex-wrap:wrap;align-items:center;
    padding:12px 14px 8px;
  }
  .atp-hero-logo{max-width:96px;min-height:64px;padding:6px}
  .atp-hero-account{margin:0 0 0 auto;width:auto}
  .atp-hero-copy{padding:8px 16px 16px;order:2}
  .atp-hero-chip{display:inline-flex}
  .atp-hero-crumb b{
    background:transparent;
    color:var(--hero-accent);
    padding:0;
    font-size:12px;
  }
  .atp-hero-visual{min-height:180px;order:3}
  .atp-hero-fade{width:100%;height:28%;inset:0 0 auto;background:linear-gradient(180deg,var(--hero-wash),transparent)}
  .atp-hero-motto{display:none}
  .atp-hero-badge{display:none}
}
@media (prefers-reduced-motion:reduce){
  .atp-hero-back,.atp-hero-motto{transition:none}
  .atp-hero-node{transform:none}
}

/* Cartel, metas y mini-ruta · mismo sistema en las 5 estaciones */
.atp-hero.is-station{
  height:auto;
  min-height:22.5rem;
  max-height:none;
  align-items:stretch;
  grid-template-columns:minmax(148px,14%) minmax(0,44%) minmax(0,42%);
}
.atp-hero.is-station .atp-hero-id{
  gap:10px;
  padding:16px 10px 18px 16px;
}
.atp-hero.is-station .atp-hero-copy{
  justify-content:flex-start;
  gap:10px;
  padding:22px 18px 20px 12px;
  max-width:40rem;
}
.atp-hero.is-station .atp-hero-copy h1{
  font-size:clamp(30px,3.4vw,42px);
  font-weight:800;
  letter-spacing:-.035em;
  line-height:1.08;
  color:#0B3A6B;
  padding-top:2px;
}
.atp-hero h1 .atp-title-accent{color:var(--hero-accent)}
.atp-hero.is-station .atp-hero-purpose{
  margin:0;
  max-width:36rem;
  color:#3D5166;
  font-size:1.02rem;
  font-weight:500;
  line-height:1.62;
}
.atp-hero.is-station .atp-hero-detail{
  margin:0;
  color:#0B3A6B;
  font-size:.92rem;
  font-weight:700;
}
.atp-hero.is-station .atp-hero-kicker{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:3px 14px 3px 3px;
  border-radius:999px;
  background:var(--hero-soft);
  border:1px solid color-mix(in srgb, var(--hero-accent) 30%, #fff);
  color:var(--hero-accent);
  font-size:11px;
  letter-spacing:.05em;
  max-width:none;
}
.atp-hero.is-station .atp-hero-kicker .icon{
  width:14px;height:14px;
  padding:6px;
  box-sizing:content-box;
  border-radius:50%;
  background:var(--hero-accent);
  color:#fff;
  flex-shrink:0;
}
.atp-hero-sign{
  display:inline-flex;
  align-items:center;
  gap:10px;
  width:fit-content;
  min-height:56px;
  margin:0;
  padding:6px 8px 6px 16px;
  border:1px solid color-mix(in srgb,var(--hero-accent) 30%,#D5DEE8);
  border-radius:999px;
  background:linear-gradient(115deg,var(--hero-soft) 0%,#fff 72%);
  box-shadow:0 8px 22px color-mix(in srgb,var(--hero-accent) 14%,transparent);
  color:#0B3A6B;
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:none;
}
.atp-hero-sign .work-ico{
  width:30px;
  height:30px;
  border-radius:50%;
  background:color-mix(in srgb,var(--hero-accent) 16%,#fff);
  box-shadow:none;
  color:var(--hero-accent);
}
.atp-hero-sign .work-ico svg{width:18px;height:18px}
.atp-hero-sign-num{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--hero-accent);
  color:#fff;
  font-size:22px;
  font-weight:800;
  letter-spacing:0;
  line-height:1;
  box-shadow:0 0 0 3px #fff,0 6px 14px color-mix(in srgb,var(--hero-accent) 26%,transparent);
}
.atp-hero-goals{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:2px 0 0;
  padding:0;
  list-style:none;
}
.atp-hero-goals li{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:36px;
  padding:4px 12px 4px 4px;
  border:1px solid #D5DEE8;
  border-radius:999px;
  background:#fff;
  color:#0B3A6B;
  font-size:.82rem;
  font-weight:700;
}
.atp-hero-goals .work-ico{
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--hero-soft);
  color:var(--hero-accent);
  box-shadow:none;
}
.atp-hero-goals .work-ico svg{width:14px;height:14px}
.atp-hero-path{
  display:flex;
  width:100%;
  max-width:36rem;
  margin:6px 0 0;
  padding:8px 0 0;
  list-style:none;
}
.atp-hero-path li{
  position:relative;
  display:flex;
  flex:1;
  min-width:0;
}
.atp-hero-path li + li::before{
  content:"";
  position:absolute;
  top:18px;
  right:50%;
  left:-50%;
  height:3px;
  border-radius:99px;
  background:#D5DEE8;
  pointer-events:none;
}
.atp-hero-path li.is-done + li.is-done::before,
.atp-hero-path li.is-done + li.is-current::before{
  background:var(--hero-accent);
}
.atp-hero-path li > button,
.atp-hero-path li > span{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  width:100%;
  min-height:44px;
  margin:0;
  padding:0;
  border:0;
  background:none;
  box-shadow:none;
  color:#6B7C8E;
  text-align:center;
  text-decoration:none;
  filter:none;
  border-radius:0;
}
.atp-hero-path li > button:hover:not(:disabled){
  filter:none;
  background:none;
}
.atp-hero-path li > button:focus-visible{
  outline:2px solid #3EC6E0;
  outline-offset:2px;
  border-radius:12px;
}
.atp-hero-node{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border:2px solid #D5DEE8;
  border-radius:50%;
  background:#fff;
  color:#6B7C8E;
}
.atp-hero-node .work-ico{
  width:18px;
  height:18px;
  background:transparent;
  box-shadow:none;
  color:inherit;
}
.atp-hero-node .work-ico svg{width:16px;height:16px}
.atp-hero-path small{
  max-width:6.6rem;
  color:#6B7C8E;
  font-size:.68rem;
  font-weight:700;
  line-height:1.25;
}
.atp-hero-path .is-done .atp-hero-node{
  border-color:#1F8A5B;
  background:#E6F6EE;
  color:#1F8A5B;
}
.atp-hero-path .is-done small{color:#0B3A6B}
.atp-hero-path .is-current .atp-hero-node{
  width:42px;
  height:42px;
  border-color:var(--hero-accent);
  background:var(--hero-accent);
  color:#fff;
  box-shadow:0 0 0 5px var(--hero-soft);
}
.atp-hero-path .is-current small{
  color:#0B3A6B;
  font-weight:800;
}
.atp-hero-path .is-wait{opacity:.62}
.atp-hero-path .is-locked{cursor:default}
.atp-hero-side{
  display:flex;
  flex-direction:column;
  gap:4px;
  width:100%;
  padding:4px 0 2px;
}
.atp-hero-side a,
.atp-hero-side .is-here{
  display:flex;
  align-items:flex-start;
  gap:8px;
  min-height:40px;
  padding:6px 10px;
  border-radius:12px;
  color:#0B3A6B;
  font-size:.78rem;
  font-weight:700;
  text-decoration:none;
  overflow-wrap:anywhere;
  line-height:1.25;
}
.atp-hero-side .is-here{
  background:var(--hero-soft);
  box-shadow:inset 3px 0 0 var(--hero-accent);
}
.atp-hero-side a:focus-visible,
.atp-hero-side .atp-hero-logo:focus-visible{
  outline:2px solid #3EC6E0;
  outline-offset:2px;
}
.atp-hero-side .icon{
  width:16px;
  height:16px;
  color:var(--hero-accent);
}
.atp-hero.is-station .atp-hero-motto{
  top:16px;
  right:16px;
  max-width:196px;
}
.atp-hero.is-station .atp-hero-badge{
  background:var(--hero-accent);
  color:#fff;
}
body.simple-visual .atp-hero.is-station,
body.low-stim .atp-hero.is-station{
  grid-template-columns:minmax(132px,16%) minmax(0,1fr);
  min-height:0;
}

@media (max-width:800px){
  .atp-hero.is-station{
    grid-template-columns:1fr;
    min-height:0;
    padding:0;
  }
  .atp-hero.is-station .atp-hero-copy{padding:8px 16px 16px;max-width:none}
  .atp-hero-path{max-width:none}
  .atp-hero-path small{max-width:4.8rem;font-size:.62rem}
  .atp-hero-side{
    flex-direction:row;
    flex-wrap:wrap;
    width:auto;
    flex:1;
  }
  .atp-hero-side a,
  .atp-hero-side .is-here{min-height:36px;padding:4px 8px;font-size:.78rem}
}
body.simple-visual .atp-hero-chip,
body.low-stim .atp-hero-chip{display:inline-flex}
.journey-page > .atp-hero{margin-bottom:18px}
.atp-hero-logo:focus-visible,
.atp-hero-crumb a:focus-visible{
  outline:2px solid #3EC6E0;
  outline-offset:2px;
}

/* e5-identity-single: collage already has motto + badge */
.atp-hero.s5 .atp-hero-motto,
.atp-hero.s5 .atp-hero-badge{display:none!important}

/* ux-contrast-20260919 */
.atp-hero-copy h1,
.atp-hero.is-station .atp-hero-copy h1{
  color:#071F45 !important;
  font-weight:900;
  letter-spacing:-.02em;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.atp-hero h1 .atp-title-accent{font-weight:900}
.atp-hero-purpose,
.atp-hero.is-station .atp-hero-purpose,
.atp-hero-detail{
  color:#0B3A6B !important;
  font-weight:650;
  opacity:1 !important;
}
.atp-hero-path small,
.atp-hero-path .is-wait small,
.atp-hero-path .is-done small{
  color:#0B3A6B !important;
  opacity:1 !important;
  font-weight:700;
}
.atp-hero-path .is-wait{opacity:1}
.atp-hero-path .is-wait .atp-hero-node{
  border-color:#8BA4C4;
  background:#EEF4FB;
  color:#0B3A6B;
}
.atp-hero-path li > button,
.atp-hero-path li > span{
  color:#0B3A6B;
}
.atp-hero-path li > button:hover:not(:disabled){
  background:#E8F1FB;
  transform:translateY(-1px);
}
.atp-hero-path .is-current small{
  color:#071F45 !important;
  font-weight:800;
}
.atp-hero-path .is-current .atp-hero-node{
  box-shadow:0 0 0 3px rgba(31,138,91,.28),0 6px 16px rgba(11,58,107,.18);
}
.atp-hero-goals li{
  border-color:#9BB8D6;
  color:#0B3A6B;
  font-weight:700;
  background:#fff;
}
.atp-hero-goals li:hover,
.atp-hero-goals li.is-on,
.atp-hero-goals li[aria-current="true"]{
  background:#0B3A6B;
  color:#fff;
  border-color:#0B3A6B;
}
.atp-hero-goals li.is-on .work-ico,
.atp-hero-goals li[aria-current="true"] .work-ico{color:#fff}
/* e5: collage keeps badge; motto sticker removed from image */
.atp-hero.s5 .atp-hero-badge{display:none!important}
.atp-hero.s5 .atp-hero-motto{display:none!important}

/* hero-visual-fix-20260919 */
.atp-hero.s5 .atp-hero-visual img{
  object-fit:cover;
  object-position:52% 36% !important;
}
.atp-hero.s5 .atp-hero-visual{
  overflow:hidden;
  border-radius:0 22px 22px 0;
}
.atp-hero.s5 .atp-hero-visual::after{
  content:"";
  position:absolute;inset:0 auto 0 0;width:18%;
  background:linear-gradient(90deg,rgba(255,255,255,.72) 0%,transparent 100%);
  pointer-events:none;z-index:1;
}
/* ux-mark-20260919 */
.atp-hero-goals li{
  cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.atp-hero-goals li:hover,
.atp-hero-goals li:focus-within{
  background:#0B3A6B !important;
  color:#fff !important;
  border-color:#0B3A6B !important;
  box-shadow:0 8px 18px rgba(11,58,107,.22);
  transform:translateY(-1px);
}
.atp-hero-goals li:hover .work-ico,
.atp-hero-goals li:focus-within .work-ico{color:#fff !important}
.atp-hero-path li > button{
  cursor:pointer;
  transition:transform .15s ease;
}
.atp-hero-path li > button:hover:not(:disabled) .atp-hero-node{
  border-color:#0B3A6B;
  color:#0B3A6B;
  background:#E8F1FB;
  transform:scale(1.06);
  box-shadow:0 0 0 4px rgba(11,58,107,.12);
}
.atp-hero-path li > button:hover:not(:disabled) small{
  color:#071F45 !important;
  font-weight:800;
}
.atp-hero-path .is-wait{opacity:1}
.atp-hero-side a,
.side-nav a,
.station-menu a{
  transition:background .15s ease,box-shadow .15s ease,color .15s ease;
}
.atp-hero-side a:hover,
.side-nav a:hover,
.station-menu a:hover{
  background:#E8F1FB;
  color:#071F45;
}

/* hero-fade-soft-20260919 */
.atp-hero.s5{
  --hero-wash:#F4FBF7;
}
.atp-hero.s5 .atp-hero-copy{
  background:linear-gradient(90deg,#fff 0%,#F7FCFA 70%,var(--hero-wash) 100%);
}
.atp-hero.s5 .atp-hero-fade{
  width:48%;
  background:linear-gradient(
    90deg,
    var(--hero-wash) 0%,
    color-mix(in srgb, var(--hero-wash) 78%, transparent) 28%,
    color-mix(in srgb, var(--hero-wash) 42%, transparent) 58%,
    color-mix(in srgb, var(--hero-wash) 12%, transparent) 82%,
    transparent 100%
  );
  opacity:.95;
}
/* kill harsh white plate; rely on soft wash + image-edge blend */
.atp-hero.s5 .atp-hero-visual::after{
  width:42% !important;
  background:linear-gradient(
    90deg,
    var(--hero-wash) 0%,
    color-mix(in srgb, var(--hero-wash) 70%, transparent) 35%,
    color-mix(in srgb, var(--hero-wash) 25%, transparent) 70%,
    transparent 100%
  ) !important;
  opacity:.9;
}
.atp-hero.s5 .atp-hero-visual img{
  object-position:64% 38% !important;
}

/* s5-hero-phrases-visible-v40
   The station-5 photo already carries positive-reinforcement copy
   (ampolleta + "Tu esfuerzo también cuenta"). A wide left wash was
   covering it — keep only a thin seam so the phrases stay readable. */
.atp-hero.s5 .atp-hero-fade{
  width:14% !important;
  opacity:.55 !important;
  background:linear-gradient(
    90deg,
    var(--hero-wash) 0%,
    color-mix(in srgb, var(--hero-wash) 45%, transparent) 55%,
    transparent 100%
  ) !important;
}
.atp-hero.s5 .atp-hero-visual::after{
  width:12% !important;
  opacity:.4 !important;
  background:linear-gradient(
    90deg,
    color-mix(in srgb, var(--hero-wash) 55%, transparent) 0%,
    transparent 100%
  ) !important;
}
.atp-hero.s5 .atp-hero-visual img{
  /* keep student + left callouts in frame */
  object-position:42% 36% !important;
  filter:contrast(1.06) saturate(1.05);
}

/* Portadas de estación · experiencia panorámica y botonera claramente marcada */
.atp-hero-progress{width:100%;margin-top:8px;padding:14px 10px;border-top:1px solid #e2ebf4;color:#0b3a6b}
.atp-hero-progress b,.atp-hero-progress span{display:block;font-size:11px}.atp-hero-progress span{text-align:center;margin-top:5px;font-weight:700}
.atp-hero-progress progress{width:100%;height:9px;margin-top:9px;accent-color:var(--hero-accent)}
.atp-hero-quote{margin:14px 0 0 18px;color:#0c4385;font-family:Georgia,"Palatino Linotype",serif;font-size:20px;font-weight:700;font-style:italic;line-height:1.35;transform:rotate(-3deg)}
.atp-hero-path em{display:flex;align-items:center;justify-content:center;gap:4px;min-height:25px;margin-top:3px;padding:4px 13px;border-radius:999px;background:#ffe69a;color:#0b3a6b;font-size:10px;font-style:normal;font-weight:850;white-space:nowrap}
.atp-hero-path em.is-complete{padding:3px 7px;background:#e7f8f1;color:#16855d}.atp-hero-path em.is-complete .icon{width:13px;height:13px}
.atp-hero-path li>button{transition:transform .18s ease,background .18s ease,box-shadow .18s ease;border-color .18s ease}
.atp-hero-path li>button:hover:not(:disabled){transform:translateY(-3px)}
.atp-hero-path li>button:active:not(:disabled){transform:translateY(-1px)}
.atp-hero-path .is-current>button{border-radius:14px;background:color-mix(in srgb,var(--hero-soft) 72%,transparent)}
.atp-hero-path .is-current>button:focus-visible{outline:3px solid color-mix(in srgb,var(--hero-accent) 42%,#fff);outline-offset:3px}
.atp-hero-side a{transition:background .18s ease,transform .18s ease,box-shadow .18s ease}
.atp-hero-side a:hover{transform:translateX(3px);background:var(--hero-soft);box-shadow:0 4px 10px rgba(11,58,107,.08)}
.atp-hero-side .is-here{border:1px solid color-mix(in srgb,var(--hero-accent) 30%,#fff);box-shadow:inset 5px 0 0 var(--hero-accent),0 5px 12px rgba(11,58,107,.08)}

@media(min-width:1200px){
  .atp-hero.is-station{grid-template-columns:250px minmax(500px,46%) minmax(0,1fr);min-height:700px;height:700px;max-height:none;border-radius:22px}
  .atp-hero.is-station .atp-hero-id{padding:20px 16px 22px;gap:14px;border-right:1px solid #dfeaf4}
  .atp-hero.is-station .atp-hero-logo{max-width:210px;min-height:138px;padding:14px}.atp-hero.is-station .atp-hero-logo img{max-height:116px}
  .atp-hero.is-station .atp-hero-back{width:100%;min-height:58px;border-radius:14px;font-size:15px;justify-content:flex-start;padding:10px 18px}
  .atp-hero.is-station .atp-hero-side{gap:9px}.atp-hero.is-station .atp-hero-side a,.atp-hero.is-station .atp-hero-side .is-here{min-height:54px;padding:11px 14px;font-size:14px}
  .atp-hero.is-station .atp-hero-side .icon{width:20px;height:20px}
  .atp-hero.is-station .atp-hero-copy{max-width:none;padding:28px 32px 175px 46px;gap:13px;background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.95) 58%,var(--hero-wash) 100%)}
  .atp-hero.is-station .atp-hero-sign{min-height:62px}.atp-hero.is-station .atp-hero-sign-num{width:52px;height:52px;font-size:26px}
  .atp-hero.is-station .atp-hero-kicker{font-size:14px;padding-right:22px}
  .atp-hero.is-station .atp-hero-copy h1{font-size:clamp(48px,4.2vw,68px);line-height:1.02}
  .atp-hero.is-station .atp-hero-detail{font-size:19px;line-height:1.35}.atp-hero.is-station .atp-hero-purpose{max-width:34rem;font-size:17px;line-height:1.5}
  .atp-hero.is-station .atp-hero-goals{display:none}
  .atp-hero.is-station .atp-hero-visual{padding-bottom:150px;background:#f4f7fa}.atp-hero.is-station .atp-hero-visual img{object-position:center center}
  body[data-specialty=climate] .atp-hero.s1 .atp-hero-visual img{object-position:58% 50%}
  body[data-specialty=climate] .atp-hero.s2 .atp-hero-visual img{object-position:62% 44%}
  body[data-specialty=climate] .atp-hero.s3 .atp-hero-visual img{object-position:54% 48%}
  body[data-specialty=climate] .atp-hero.s4 .atp-hero-visual img{object-position:68% 52%}
  body[data-specialty=climate] .atp-hero.s5 .atp-hero-visual img{object-position:48% 38%!important}
  .atp-hero.is-station .atp-hero-fade{width:42%}
  .atp-hero.is-station .atp-hero-motto{top:22px;right:22px;max-width:250px;padding:14px 17px;font-size:15px}
  .atp-hero.is-station .atp-hero-badge{display:none}
  .atp-hero.is-station .atp-hero-path{position:absolute;z-index:5;left:250px;right:0;bottom:0;width:auto;max-width:none;height:150px;margin:0;padding:18px 70px 12px;background:rgba(255,255,255,.97);border-top:1px solid #d9e6f2;box-shadow:0 -5px 16px rgba(11,58,107,.05)}
  .atp-hero.is-station .atp-hero-path li+li:before{top:24px;height:3px}.atp-hero.is-station .atp-hero-node{width:50px;height:50px}.atp-hero.is-station .atp-hero-node .work-ico{width:24px;height:24px}.atp-hero.is-station .atp-hero-node .work-ico svg{width:22px;height:22px}
  .atp-hero.is-station .atp-hero-path .is-current .atp-hero-node{width:58px;height:58px}.atp-hero.is-station .atp-hero-path small{max-width:10rem;font-size:12px;line-height:1.25}
  .atp-hero-account .avatar{width:42px;height:42px}.atp-hero-account .plain{font-size:13px;min-height:40px}
}
@media(max-width:1199px){.atp-hero-progress{display:none}.atp-hero-quote{font-size:16px}.atp-hero-path em{display:none}}

/* Sistema común de las 5 estaciones · colores propios, ruta legible y frase semanal */
.atp-hero.s5 .atp-hero-motto{display:flex!important}
.atp-hero.s5 .atp-hero-badge{display:none!important}
.atp-hero-path li:nth-child(1){--path-accent:#1599b5;--path-soft:#e4f8fc}
.atp-hero-path li:nth-child(2){--path-accent:#286bb3;--path-soft:#e8f2fc}
.atp-hero-path li:nth-child(3){--path-accent:#7357b5;--path-soft:#f0ecfb}
.atp-hero-path li:nth-child(4){--path-accent:#c47a12;--path-soft:#fff3df}
.atp-hero-path li:nth-child(5){--path-accent:#27865f;--path-soft:#e6f6ee}
.atp-hero-path li>button,.atp-hero-path li>span{margin:0 5px;padding:8px 6px;border:1px solid color-mix(in srgb,var(--path-accent) 22%,#fff);border-radius:14px;background:var(--path-soft);color:#071f45}
.atp-hero-path li>button small,.atp-hero-path li>span small,.atp-hero-path .is-current small,.atp-hero-path .is-wait small,.atp-hero-path .is-done small{color:#071f45!important;font-weight:850;opacity:1!important}
.atp-hero-path .atp-hero-node,.atp-hero-path .is-wait .atp-hero-node,.atp-hero-path .is-done .atp-hero-node{border-color:color-mix(in srgb,var(--path-accent) 45%,#fff);background:#fff;color:var(--path-accent)}
.atp-hero-path .is-current>button{border-color:color-mix(in srgb,var(--path-accent) 45%,#fff);background:var(--path-soft);box-shadow:0 7px 18px color-mix(in srgb,var(--path-accent) 18%,transparent)}
.atp-hero-path .is-current .atp-hero-node{border-color:#fff;background:var(--path-accent);color:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--path-accent) 24%,transparent),0 6px 15px rgba(11,58,107,.16)}
.atp-hero-path .is-done em.is-complete{background:#fff;color:var(--path-accent);border:1px solid color-mix(in srgb,var(--path-accent) 28%,#fff)}
.atp-hero-path .is-current em{background:color-mix(in srgb,var(--path-accent) 18%,#fff);color:#071f45;border:1px solid color-mix(in srgb,var(--path-accent) 30%,#fff)}
.atp-hero-path li+li:before{background:#aec4dc}.atp-hero-path li.is-done+li.is-done:before,.atp-hero-path li.is-done+li.is-current:before{background:#7899bd}
.atp-hero-path li>button:hover:not(:disabled){background:color-mix(in srgb,var(--path-soft) 70%,#fff);border-color:var(--path-accent)}
.atp-hero-path li>button:hover:not(:disabled) .atp-hero-node{border-color:var(--path-accent);background:var(--path-accent);color:#fff}
.atp-hero-motto.atp-spark{border-color:color-mix(in srgb,var(--hero-accent) 28%,#fff);background:rgba(255,255,255,.95)}
.atp-hero-motto.atp-spark em,.atp-hero-quote{color:#082f67!important}
.atp-hero-quote{max-width:360px;padding:10px 14px;border-left:4px solid var(--hero-accent);border-radius:0 12px 12px 0;background:color-mix(in srgb,var(--hero-soft) 68%,#fff);transform:rotate(-1deg)}

@media(min-width:1200px){
  .atp-hero.is-station,.atp-hero.is-station.s1,.atp-hero.is-station.s2,.atp-hero.is-station.s3,.atp-hero.is-station.s4,.atp-hero.is-station.s5{width:100%;height:580px;min-height:580px;max-height:580px;margin-inline:auto;grid-template-columns:220px minmax(470px,44%) minmax(0,1fr)}
  .atp-hero.is-station .atp-hero-copy,.atp-hero.is-station.s5 .atp-hero-copy{padding:28px 32px 175px 46px}
  .atp-hero.is-station .atp-hero-visual,.atp-hero.is-station.s5 .atp-hero-visual{min-height:0;height:580px;padding-bottom:150px;border-radius:0 22px 22px 0}
  .atp-hero.is-station .atp-hero-path{align-items:stretch;padding:14px 55px 10px}.atp-hero.is-station .atp-hero-path li{align-items:stretch}
  .atp-hero.is-station .atp-hero-path li>button,.atp-hero.is-station .atp-hero-path li>span{min-height:116px}
  .atp-hero.is-station .atp-hero-path li+li:before{top:39px}
}
@media(max-width:1199px){.atp-hero-path li>button,.atp-hero-path li>span{margin:0 2px;padding:6px 3px}.atp-hero-quote{max-width:none}}

/* La ruta inferior fue retirada: la fotografia vuelve a ocupar toda la portada. */
@media(min-width:1200px){
  .atp-hero.is-station .atp-hero-copy,
  .atp-hero.is-station.s5 .atp-hero-copy{padding-bottom:28px}
  .atp-hero.is-station .atp-hero-visual,
  .atp-hero.is-station.s5 .atp-hero-visual{padding-bottom:0;background:var(--hero-wash)}
  .atp-hero.is-station .atp-hero-visual img,
  .atp-hero.is-station.s5 .atp-hero-visual img{width:100%;height:100%;min-height:100%;object-fit:cover}
  body[data-specialty=climate] .atp-hero.s5 .atp-hero-visual img{object-position:30% 50%!important}
}

/* La altura se conserva: compactamos únicamente la columna lateral para evitar recortes. */
@media(min-width:1200px){
  .atp-hero.is-station .atp-hero-id{
    gap:7px;
    padding:10px 12px 10px;
    overflow:visible;
  }
  .atp-hero.is-station .atp-hero-logo{
    min-height:104px;
    padding:8px 12px;
  }
  .atp-hero.is-station .atp-hero-logo img{max-height:88px}
  .atp-hero.is-station .atp-hero-back{
    min-height:46px;
    padding:8px 14px;
  }
  .atp-hero.is-station .atp-hero-side{gap:6px}
  .atp-hero.is-station .atp-hero-side a,
  .atp-hero.is-station .atp-hero-side .is-here{
    min-height:43px;
    padding:8px 11px;
    font-size:12px;
  }
  .atp-hero.is-station .atp-hero-side .icon{width:17px;height:17px}
  .atp-hero.is-station .atp-hero-progress{
    margin-top:3px;
    padding:8px 8px 6px;
  }
  .atp-hero.is-station .atp-hero-progress progress{height:7px;margin-top:6px}
  .atp-hero.is-station .atp-hero-progress span{margin-top:3px}
  .atp-hero.is-station .atp-hero-account{min-height:34px}
  .atp-hero.is-station .atp-hero-account .avatar{width:32px;height:32px}
  .atp-hero.is-station .atp-hero-account .plain{min-height:32px;font-size:11px}
}