/* FDT hub — saturated brand planes, inspired by Futuro del Trabajo Chile.
   The 135deg field is reserved for the hero's emphasis band. */
:root{--violet-ink:#5721b7;--violet-wash:#f3efff;--cyan-wash:#e5fbff;--blue-wash:#edf4ff}
.commercial-copy h1 em{color:var(--violet)}
nav a[aria-current=page]:after{background:var(--violet)}
nav .nav-chat{color:var(--violet-ink);background:var(--violet-wash);border:1px solid #d7c9f6;border-radius:24px;padding:8px 12px}
.primary:hover,.contact:hover{background:var(--violet);color:#fff}
.hero-cinema{border-color:#d9d1f3;box-shadow:0 18px 45px #7a3cff0e}
.hero-cinema figcaption{background:linear-gradient(135deg,var(--blue),var(--violet));color:#fff}
.hero-cinema figcaption>div>span,.cinema-duration strong{color:#fff}
.cinema-kicker{border-color:#d7c9f6;color:var(--violet-ink);background:var(--violet-wash)}
.cinema-kicker i{background:var(--violet)}
.cinema-invitation{border-left:3px solid var(--violet)}
.hero-outcomes a{border-color:transparent;background:var(--blue);color:#fff}
.hero-outcomes a:nth-child(2){background:var(--violet)}
.hero-outcomes a:nth-child(3){background:var(--cyan);color:var(--navy)}
.hero-outcomes a small,.hero-outcomes .outcome-no{color:inherit}
.hero-outcomes a:nth-child(-n+2) .ico{filter:brightness(0) invert(1)}
.hero-outcomes a:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.hero-outcomes a:hover .ico{filter:brightness(0) invert(1)}
.visual{border-color:var(--navy);background-color:var(--navy);background-image:repeating-linear-gradient(43.6deg,transparent,transparent 42px,#ffffff0b 42px,#ffffff0b 43px)}
.visual>.eyebrow{color:var(--cyan)}
.visual>.text-link{color:#fff;border-color:var(--cyan)}
.visual .flow-path>span{background:var(--blue-wash);border-color:#c9dcff}
.visual .flow-path>span:nth-child(2){background:var(--violet-wash);border-color:#d7c9f6}
.visual .flow-path>span:nth-child(3){background:var(--cyan-wash);border-color:#a9ebf5}
.visual .flow-path>span:first-child b{color:#164b9c}
.visual .flow-path>span:nth-child(2) b{color:var(--violet-ink)}
.visual .flow-path>span:nth-child(3) b{color:var(--navy)}
.visual .flow-path .flow-action{background:var(--blue);border-color:var(--blue);color:#fff}
.visual .flow-action b,.visual .flow-action small{color:#fff}
.option-list button{border-left:3px solid var(--blue)}
.option-list button:nth-child(2){border-left-color:var(--violet)}
.option-list button:nth-child(3){border-left-color:var(--cyan)}
.option-list button:nth-child(4){border-left-color:var(--navy)}
.option-list button:hover{background:var(--violet-wash);color:var(--navy)}
.tabs button[aria-pressed=true],.radar-tabs button[aria-pressed=true]{background:var(--violet);border-color:var(--violet);color:#fff}
.phase-tabs button[aria-pressed=true]>span{color:#fff}
.knowledge-card{background:var(--violet-wash);border-color:#d7c9f6}
.term-list button[aria-pressed=true]{background:var(--violet-wash);border-color:#d7c9f6;color:var(--navy)}
.radar-card{background:var(--violet)}
.radar-detail .eyebrow,.radar-foot{color:#fff}
.radar-detail .primary{color:var(--violet-ink)}
.radar-detail .primary:hover{background:var(--navy);color:#fff}
footer{border-top:2px solid var(--cyan)}
#hub-chat .chat-heading{background:var(--navy);color:#fff;border-bottom:2px solid var(--cyan)}
#hub-chat .chat-heading .eyebrow{color:var(--cyan)}
#hub-chat .chat-heading>button{border-color:#ffffff65;color:#fff}
#hub-chat .chat-heading>button:hover{background:#1d3766}
.chat-heading h2 span{background:var(--cyan);color:var(--navy)}
.chat-messages{background:#f4f1fb}
.chat-suggestions button:hover{background:var(--violet-wash);border-color:var(--violet)}
.chat-message.user{background:var(--violet);border-color:var(--violet)}
.chat-message.user .chat-role{color:#fff}
.chat-role{color:var(--violet-ink)}
@media(max-width:700px){nav .nav-chat{padding:5px 9px}}
.knowledge-card>.eyebrow,.knowledge-compact button{color:var(--violet-ink)}
.chat-library summary,.chat-evidence summary{color:var(--violet-ink)}
/* On narrow or short phones, keep the vision focused on readable copy.
   The full diagram remains available in roomier views and the explorer. */
@media(max-width:360px),(max-width:700px) and (max-height:720px){
.stage:has(>.visual[aria-label="Diagrama ocupación a habilidades"]){grid-template-rows:1fr}
.stage>.visual[aria-label="Diagrama ocupación a habilidades"]{display:none}
}