/* Orientador: una invitación estática por página, sin interrupciones. */
.orientation-promo-slot { padding-block: 0 var(--sp-8); }
.orientation-promo {
  --op-accent: #1b5fbf;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.5rem 2rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  margin-block: 1.5rem;
  border: 1px solid var(--border-strong);
  border-inline-start: 4px solid var(--brand-cyan);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  text-align: start;
  scroll-margin-top: 96px;
}
.orientation-promo__content { min-width: 0; }
.orientation-promo .orientation-promo__eyebrow {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .65rem;
  color: var(--op-accent);
  font: 600 .75rem/1.5 var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.orientation-promo__eyebrow svg { flex-shrink: 0; }
.orientation-promo .orientation-promo__title {
  max-width: 36ch;
  margin: 0;
  padding: 0;
  border: 0;
  color: inherit;
  font: 700 clamp(1.3rem, 1.1rem + .6vw, 1.65rem)/1.2 var(--font-display);
  letter-spacing: -.025em;
  text-wrap: balance;
}
.orientation-promo .orientation-promo__description {
  max-width: 68ch;
  margin: .8rem 0 0;
  color: var(--text-muted);
  font: 400 .95rem/1.65 var(--font-body);
}
.orientation-promo__action { display: grid; justify-items: start; gap: .7rem; }
.orientation-promo .orientation-promo__button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: .8rem;
  min-height: 48px;
  max-width: 100%;
  padding: .85rem 1.2rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: #1b5fbf;
  color: #fff;
  font: 600 .95rem/1.4 var(--font-body);
  text-decoration: none;
  text-align: center;
  transition: background-color 150ms ease;
}
.orientation-promo .orientation-promo__button:hover { background: #144d9f; color: #fff; }
.orientation-promo__button svg { flex: 0 0 20px; }
.orientation-promo a:focus-visible { outline: 3px solid var(--op-accent); outline-offset: 4px; }
.orientation-promo .orientation-promo__trust,
.orientation-promo .orientation-promo__note,
.orientation-promo .orientation-promo__secondary {
  margin: 0;
  color: var(--text-muted);
  font: 400 .78rem/1.6 var(--font-body);
}
.orientation-promo .orientation-promo__secondary a { color: var(--op-accent); text-underline-offset: 3px; }
.orientation-promo--article { grid-template-columns: 1fr; margin-block: var(--sp-8) 0; }
.orientation-promo--article .orientation-promo__title { max-width: none; }
.orientation-promo--article .orientation-promo__action { margin-top: .1rem; }
.orientation-promo--feature {
  --op-accent: #83dfff;
  grid-template-columns: minmax(0, 1.4fr) minmax(240px, .8fr);
  gap: 1.5rem 4rem;
  padding: clamp(1.5rem, 4vw, 3.2rem);
  margin: 0;
  border: 1px solid #29465f;
  border-radius: var(--radius-xl);
  background: #0d2033;
  color: #f5faff;
}
.orientation-promo--feature .orientation-promo__title {
  max-width: 18ch;
  font-size: clamp(1.9rem, 1.3rem + 1.8vw, 3rem);
  line-height: 1.08;
}
.orientation-promo--feature .orientation-promo__description { max-width: 57ch; color: #c3d1df; font-size: 1rem; }
.orientation-promo--feature .orientation-promo__note { margin-top: .8rem; color: #c3d1df; }
.orientation-promo--feature .orientation-promo__action { grid-column: 1; }
.orientation-promo--feature .orientation-promo__button { background: #83dfff; color: #0d2033; }
.orientation-promo--feature .orientation-promo__button:hover { background: #b3ebff; color: #0d2033; }
.orientation-promo--feature .orientation-promo__trust { color: #c3d1df; }
.orientation-promo__visual { grid-column: 2; grid-row: 1 / 3; padding-inline-start: 2rem; border-inline-start: 1px solid #29465f; }
.orientation-promo .orientation-promo__visual-label { margin: 0 0 1.5rem; color: #a6bdd0; font: 500 .72rem/1.5 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.orientation-promo__steps { list-style: none; margin: 0; padding: 0; display: grid; }
.orientation-promo__step { display: grid; grid-template-columns: 36px 1fr; gap: .9rem; position: relative; padding-block: 0 1.7rem; }
.orientation-promo__step:not(:last-child)::after { content: ''; position: absolute; top: 38px; bottom: 2px; left: 17px; width: 1px; background: #36536c; }
.orientation-promo__step:last-child { padding-bottom: 0; }
.orientation-promo__number { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #42627b; border-radius: 50%; color: #bad0e0; font: 500 .75rem/1 var(--font-mono); }
.orientation-promo__step:last-child .orientation-promo__number { background: #83dfff; border-color: #83dfff; color: #0d2033; }
.orientation-promo__step strong { display: block; color: #f5faff; font: 600 1rem/1.4 var(--font-body); }
.orientation-promo__step small { display: block; margin-top: .2rem; color: #b3c5d5; font: 400 .82rem/1.5 var(--font-body); }
[data-theme="dark"] .orientation-promo { --op-accent: #83dfff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .orientation-promo { --op-accent: #83dfff; }
}
@media (max-width: 900px) {
  .orientation-promo { grid-template-columns: minmax(0, 1fr); }
  .orientation-promo--feature { grid-template-columns: minmax(0, 1.3fr) minmax(210px, .8fr); gap: 1.5rem 2rem; }
  .orientation-promo__visual { padding-inline-start: 1.5rem; }
}
@media (max-width: 640px) {
  .orientation-promo--feature { grid-template-columns: minmax(0, 1fr); }
  .orientation-promo--feature .orientation-promo__title { max-width: 20ch; }
  .orientation-promo__visual { grid-column: 1; grid-row: auto; border-inline-start: 0; border-top: 1px solid #29465f; padding: 1.25rem 0 0; }
  .orientation-promo .orientation-promo__visual-label { margin-bottom: 1rem; }
  .orientation-promo__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; }
  .orientation-promo__step { grid-template-columns: minmax(0, 1fr); gap: .6rem; padding: 0; }
  .orientation-promo__step:not(:last-child)::after { display: none; }
  .orientation-promo__step strong { font-size: .8rem; }
  .orientation-promo__step small { font-size: .72rem; }
  .orientation-promo__action, .orientation-promo__button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .orientation-promo .orientation-promo__button { transition: none; }
}
@media print {
  .orientation-promo-slot, .orientation-promo { display: none; }
}