/* ============================================================================
   STC — Activación Digital (subdominio) · escalera de valor P1–P5
   Reusa tokens.css + styles.css. Componente propio: la escalera acumulativa.
   ========================================================================== */

/* Header de subdominio (más ligero, sin mega-menú) */
.sub-badge{ font-size:var(--fs-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--stc-muted);
  border:1px solid var(--stc-border); border-radius:var(--stc-radius-pill); padding:4px 10px; margin-inline-start:var(--sp-3); }
.back-link{ margin-inline:auto var(--sp-4); color:var(--stc-muted); font-size:var(--fs-sm); display:inline-flex; align-items:center; gap:6px; }
.back-link:hover{ color:var(--stc-ink); }

/* Hero */
.ad-hero{ padding-block:clamp(56px,7vw,116px); text-align:center; position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--stc-bg), var(--stc-bg-2)); }
.ad-hero::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(52% 58% at 50% 0%, #E6F0F8, transparent 62%); }
.ad-hero .eyebrow{ margin-inline:auto; }
.ad-hero h1{ font-size:var(--fs-display); letter-spacing:-.01em; max-width:20ch; margin:0 auto var(--sp-6); }
.ad-hero .lead{ margin-inline:auto; max-width:62ch; }
.ad-hero-actions{ display:flex; gap:var(--sp-3); justify-content:center; flex-wrap:wrap; margin-top:var(--sp-8); }

/* ---------- Escalera de valor (5 tiers acumulativos) ---------- */
.ladder{ display:grid; gap:var(--sp-4); }
.tier{ display:grid; grid-template-columns:auto 1fr auto; gap:var(--sp-6); align-items:center;
  background:var(--stc-surface); border:1px solid var(--stc-border); border-radius:var(--stc-radius-lg);
  padding:var(--sp-8); position:relative; transition:transform var(--stc-dur) var(--stc-ease), border-color var(--stc-dur) var(--stc-ease), box-shadow var(--stc-dur) var(--stc-ease); }
.tier::before{ content:""; position:absolute; inset:0 auto 0 0; width:4px; border-radius:var(--stc-radius-lg) 0 0 var(--stc-radius-lg); background:var(--stc-primary); opacity:calc(0.4 + var(--lvl,1) * 0.12); }
.tier:hover{ transform:translateY(-3px); border-color:var(--stc-border-strong); box-shadow:var(--stc-shadow-lg); }
.tier-badge{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  width:76px; height:76px; border-radius:var(--stc-radius); flex:none;
  background:var(--stc-surface-2); border:1px solid var(--stc-border); }
.tier-badge b{ font-family:var(--stc-font-display); font-weight:var(--fw-bold); font-size:1.5rem; color:var(--stc-primary); line-height:1; }
.tier-badge span{ font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--stc-muted); }
.tier-body h3{ font-size:var(--fs-h4); margin-bottom:2px; }
.tier-focus{ color:var(--stc-primary); font-weight:var(--fw-semibold); font-size:var(--fs-sm); margin-bottom:var(--sp-3); }
.tier-inherit{ display:inline-block; font-size:var(--fs-xs); font-weight:var(--fw-semibold); letter-spacing:.02em;
  color:var(--stc-muted); background:var(--stc-surface-2); border:1px solid var(--stc-border);
  padding:2px 10px; border-radius:var(--stc-radius-pill); margin-bottom:var(--sp-3); }
.tier-incl{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4); }
.tier-incl li{ display:flex; align-items:flex-start; gap:6px; font-size:var(--fs-sm); color:var(--stc-ink); }
.tier-incl .ic{ color:var(--stc-primary-light); flex:none; margin-top:2px; }
.tier .btn{ white-space:nowrap; }

/* Tier destacado (P5 · Operación completa) = bloque navy premium */
.tier--top{ background:linear-gradient(150deg, var(--stc-navy), var(--stc-navy-2)); border-color:transparent; }
.tier--top::before{ opacity:1; background:var(--stc-cta); }
.tier--top .tier-badge{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.18); }
.tier--top .tier-badge b{ color:var(--stc-accent-navy); }
.tier--top .tier-badge span,.tier--top .tier-inherit{ color:var(--stc-muted-navy); background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14); }
.tier--top .tier-body h3{ color:var(--stc-on-navy); }
.tier--top .tier-focus{ color:var(--stc-accent-navy); }
.tier--top .tier-incl li{ color:var(--stc-on-navy); }
.tier--top .tier-incl .ic{ color:var(--stc-accent-navy); }

@media (max-width:820px){
  .tier{ grid-template-columns:auto 1fr; grid-template-areas:"badge body" "cta cta"; row-gap:var(--sp-6); }
  .tier-badge{ grid-area:badge; } .tier-body{ grid-area:body; } .tier > .btn{ grid-area:cta; justify-self:start; }
}
@media (max-width:520px){
  .tier{ grid-template-columns:1fr; grid-template-areas:"badge" "body" "cta"; text-align:left; }
}