/* ============================================================
   components.css — Ilustraciones y componentes reutilizables
   ============================================================ */

/* ---- Utilidades de acento ---- */
.accent-cyan   { --accent: var(--cyan);   --accent-rgb: 0,212,255; }
.accent-violet { --accent: var(--violet); --accent-rgb: 139,92,246; }
.accent-mix    { --accent: #7ad0ff;       --accent-rgb: 110,180,255; }

/* ============================================================
   Encabezado de tecnología: breadcrumb + stepper de 4 pasos
   ============================================================ */
.techhead {
  display: flex;
  flex-direction: column;
  gap: clamp(0.7rem, 1.6vw, 1.1rem);
}

.crumb {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  width: max-content;
}
.crumb__ico {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 12px;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  font-size: 1.1rem;
}
.crumb__num {
  font-family: "Sora"; font-weight: 700; font-size: 0.92rem;
  color: var(--accent);
  letter-spacing: 0.05em;
}
.crumb__name {
  font-family: "Sora"; font-weight: 700;
  font-size: clamp(1.25rem, 2.1vw, 1.7rem);
  letter-spacing: -0.01em;
  color: var(--text);
}

/* Stepper */
.stepper {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  row-gap: 0.5rem;
}
.stepper__step {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.8rem 0.4rem 0.45rem;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--stroke-soft);
  color: var(--text-faint);
  transition: color .25s, background .25s, border-color .25s;
  cursor: pointer;
}
.stepper__step:hover { color: var(--text); border-color: var(--stroke); }
.stepper__dot {
  width: 24px; height: 24px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 50%;
  font-family: "Sora"; font-weight: 700; font-size: 0.75rem;
  background: rgba(255,255,255,.06);
  color: var(--text-dim);
  border: 1px solid var(--stroke-soft);
  transition: all .25s;
}
.stepper__label { font-family: "Sora"; font-weight: 600; font-size: 0.82rem; white-space: nowrap; }

.stepper__step.is-done { color: var(--text-dim); }
.stepper__step.is-done .stepper__dot {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.4);
}
.stepper__step.is-active {
  color: #05121f;
  background: var(--grad-main);
  border-color: transparent;
  box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.3);
}
.stepper__step.is-active .stepper__dot {
  background: rgba(5,18,31,.25);
  color: #05121f;
  border-color: transparent;
}
.stepper__line {
  width: clamp(10px, 2vw, 26px);
  height: 1px;
  background: var(--stroke);
  flex: 0 0 auto;
}
@media (max-width: 720px) {
  .stepper__line { display: none; }
  .stepper { gap: 0.4rem; }
  .stepper__label { font-size: 0.76rem; }
}

/* Icono principal grande con halo */
.hero-icon {
  --size: clamp(84px, 12vw, 128px);
  width: var(--size);
  height: var(--size);
  display: grid;
  place-items: center;
  border-radius: var(--r-lg);
  font-size: calc(var(--size) * 0.42);
  color: var(--white);
  background: var(--grad-soft);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-soft), inset 0 0 30px rgba(var(--accent-rgb), 0.12);
  position: relative;
}
.hero-icon::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),.5), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;
  pointer-events: none;
}

/* ---- Glass card genérica ---- */
.card {
  background: var(--glass);
  border: 1px solid var(--stroke);
  border-radius: var(--r-md);
  padding: clamp(1rem, 1.6vw, 1.4rem);
  backdrop-filter: blur(8px);
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--accent-rgb), .5);
  box-shadow: 0 18px 40px rgba(0,0,0,.4), 0 0 30px rgba(var(--accent-rgb), .18);
}

/* ============================================================
   Grid de capacidades (slide "¿Qué puede hacer?")
   ============================================================ */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.7rem, 1.3vw, 1.05rem);
}
@media (max-width: 900px) { .cap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cap-grid { grid-template-columns: 1fr; } }
.cap {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: clamp(0.9rem, 1.4vw, 1.25rem);
}
.cap__ico {
  flex: 0 0 auto;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 12px;
  font-size: 1.15rem;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
}
.cap__name { font-family: "Sora"; font-weight: 600; font-size: 1rem; line-height: 1.15; }
.cap__desc { color: var(--text-dim); font-size: 0.85rem; margin-top: 0.25rem; }

/* ============================================================
   Flujo (slide "¿Cómo funciona?" y "cómo trabajan juntas")
   ============================================================ */
.flow {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 0.35rem;
}
.flow__step {
  flex: 1 1 130px;
  max-width: 190px;
  min-width: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  padding: clamp(0.8rem, 1.4vw, 1.15rem) 0.6rem;
  border-radius: var(--r-md);
  background: var(--glass);
  border: 1px solid var(--stroke);
  position: relative;
  transition: transform .3s var(--ease), box-shadow .3s;
}
.flow__step:hover { transform: translateY(-4px); box-shadow: 0 0 30px rgba(var(--accent-rgb),.22); }
.flow__num {
  position: absolute;
  top: 0.5rem; left: 0.6rem;
  font-family: "Sora"; font-weight: 700; font-size: 0.7rem;
  color: var(--accent);
  opacity: 0.7;
}
.flow__ico {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 14px;
  font-size: 1.3rem;
  color: var(--white);
  background: var(--grad-soft);
  border: 1px solid rgba(var(--accent-rgb), .35);
  box-shadow: inset 0 0 20px rgba(var(--accent-rgb), .18);
}
.flow__label { font-family:"Sora"; font-weight: 600; font-size: 0.9rem; }
.flow__desc { color: var(--text-dim); font-size: 0.75rem; line-height: 1.3; margin-top: 0.1rem; }

/* Conector (flecha) entre pasos */
.flow__arrow {
  display: flex;
  align-items: center;
  color: rgba(var(--accent-rgb), 0.8);
  font-size: 1.1rem;
  padding: 0 0.15rem;
  align-self: center;
}
/* En vertical (pantallas angostas) el flujo se apila y las flechas giran */
@media (max-width: 760px) {
  .flow { flex-direction: column; align-items: center; }
  .flow__step { width: 100%; max-width: 340px; flex-direction: row; text-align: left; justify-content: flex-start; }
  .flow__arrow { transform: rotate(90deg); }
}

/* Variante numerada compacta para "cómo trabajan juntas" */
.flow--chain .flow__step { max-width: 160px; min-width: 110px; }

/* ============================================================
   Diagrama "qué es" (icono central + satélites orbitando)
   ============================================================ */
.orbit {
  position: relative;
  width: min(360px, 78vw);
  aspect-ratio: 1;
  margin: 0 auto;
  display: grid;
  place-items: center;
}
.orbit__ring {
  position: absolute;
  inset: 12%;
  border: 1px dashed rgba(var(--accent-rgb), 0.35);
  border-radius: 50%;
  animation: spin 40s linear infinite;
}
.orbit__ring--2 { inset: 26%; border-color: rgba(var(--accent-rgb), 0.2); animation-duration: 28s; animation-direction: reverse; }
@keyframes spin { to { transform: rotate(360deg); } }

.orbit__core {
  width: 40%; aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  color: var(--white);
  background: var(--grad-main);
  box-shadow: var(--glow-cyan), 0 12px 40px rgba(0,0,0,.5);
  z-index: 2;
}
.orbit__sat {
  position: absolute;
  width: 58px; height: 58px;
  display: grid; place-items: center;
  border-radius: 14px;
  font-size: 1.15rem;
  color: var(--accent);
  background: var(--bg-soft);
  border: 1px solid rgba(var(--accent-rgb), .4);
  box-shadow: var(--shadow-soft);
}
.orbit__sat span { position:absolute; bottom:-1.35rem; font-size:.62rem; color: var(--text-faint); white-space: nowrap; }
.orbit__sat--0 { top: 2%;   left: 50%; transform: translateX(-50%); }
.orbit__sat--1 { top: 50%;  right: 0;  transform: translateY(-50%); }
.orbit__sat--2 { bottom: 2%; left: 50%; transform: translateX(-50%); }
.orbit__sat--3 { top: 50%;  left: 0;   transform: translateY(-50%); }

/* ============================================================
   Franja de "claves" (slide 1), "Ideal para", Resultado y notas
   ============================================================ */
.hl-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.7rem, 1.3vw, 1rem);
}
@media (max-width: 760px) { .hl-strip { grid-template-columns: 1fr; } }
.hl {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.85rem 1rem;
  border-radius: var(--r-md);
  background: var(--glass);
  border: 1px solid var(--stroke);
}
.hl__ico {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 11px;
  color: var(--accent); font-size: 1rem;
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
}
.hl__title { font-family: "Sora"; font-weight: 600; font-size: 0.9rem; line-height: 1.15; }
.hl__desc { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.15rem; line-height: 1.3; }

.audience {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  border-radius: var(--r-sm);
  background: rgba(var(--accent-rgb), 0.06);
  border: 1px dashed rgba(var(--accent-rgb), 0.35);
  color: var(--text-dim);
  font-size: 0.9rem;
}
.audience > i { color: var(--accent); font-size: 1rem; }
.audience__k { color: var(--text); font-weight: 600; font-family: "Sora"; margin-right: 0.15rem; }

.outcome {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.3rem;
  border-radius: var(--r-md);
  background: var(--grad-soft);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
}
.outcome__ico {
  flex: 0 0 auto;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 12px;
  font-size: 1.2rem; color: var(--white);
  background: var(--grad-main);
  box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.35);
}
.outcome__k {
  font-family: "Sora"; font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 0.1rem;
}
.outcome__body { font-size: 0.98rem; color: var(--text); }

.usecase-note {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 1.1rem;
  border-radius: var(--r-sm);
  background: var(--glass);
  border: 1px solid var(--stroke);
  color: var(--text-dim);
  font-size: 0.9rem;
}
.usecase-note > i { color: var(--accent); font-size: 1rem; }

/* Bloque analogía */
.analogy {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 1rem 1.2rem;
  border-radius: var(--r-md);
  background: rgba(var(--accent-rgb), 0.07);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
}
.analogy__ico { color: var(--accent); font-size: 1.3rem; margin-top: 2px; }
.analogy__txt { font-size: 0.95rem; }
.analogy__txt strong { color: var(--white); }
.analogy__txt .en { display:block; color: var(--text-dim); font-size: 0.85rem; margin-top: 0.15rem; }

/* ============================================================
   Casos de uso (slide 4)
   ============================================================ */
.cases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.7rem, 1.3vw, 1.05rem);
}
@media (max-width: 900px) { .cases { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cases { grid-template-columns: 1fr; } }
.case {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 1.1rem;
}
.case__emoji {
  font-size: 1.8rem;
  line-height: 1;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.4));
}
.case__sector { font-family:"Sora"; font-weight: 600; font-size: 0.98rem; }
.case__sector .en { display:block; font-size: .78rem; font-weight:500; color: var(--text-faint); }
.case__desc { color: var(--text-dim); font-size: 0.85rem; margin-top: 0.2rem; }
.case__desc .en { display:block; color: var(--text-faint); font-size:.78rem; }

/* ============================================================
   Portada (cover)
   ============================================================ */
.cover { align-items: center; text-align: center; }
.cover__inner { display:flex; flex-direction: column; align-items:center; gap: 1.4rem; max-width: 900px; }
.cover__badge {
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.5rem 1.1rem; border-radius:999px;
  border:1px solid var(--stroke); background: var(--glass);
  font-family:"Sora"; font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:.78rem;
  color: var(--cyan);
}
.cover__logo {
  width: clamp(90px, 14vw, 140px); aspect-ratio:1;
  display:grid; place-items:center; border-radius: var(--r-xl);
  font-size: clamp(2.6rem, 7vw, 4rem); color: var(--white);
  background: var(--grad-main);
  box-shadow: var(--glow-cyan), var(--glow-violet), 0 20px 60px rgba(0,0,0,.5);
  animation: pulse 4s var(--ease) infinite;
}
@keyframes pulse { 50% { transform: translateY(-6px); box-shadow: var(--glow-violet), 0 30px 70px rgba(0,0,0,.55); } }
.cover__title { font-size: clamp(2.2rem, 6.5vw, 4.6rem); }
.cover__title .en { display:block; font-size:.42em; color: var(--text-dim); font-weight:600; margin-top:.4rem; }
.cover__sub { color: var(--text-dim); font-size: clamp(1rem,1.8vw,1.25rem); max-width: 60ch; }
.cover__sub .en { display:block; color: var(--text-faint); font-size:.9em; margin-top:.3rem; }
.cover__hint { color: var(--text-faint); font-size:.85rem; margin-top:.6rem; display:flex; gap:1.2rem; flex-wrap:wrap; justify-content:center; }
.cover__hint kbd {
  font-family:"Sora"; font-size:.72rem; padding:.15rem .5rem; border-radius:6px;
  background: var(--glass-strong); border:1px solid var(--stroke); color: var(--text);
}

/* ============================================================
   Índice (grid de tarjetas de tecnologías)
   ============================================================ */
.idx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: clamp(0.7rem, 1.3vw, 1rem);
  overflow-y: auto;
  max-height: 68vh;
  padding: 4px;
}
.idx-card {
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1rem 1.1rem;
}
.idx-card__top { display:flex; align-items:center; gap:.7rem; }
.idx-card__ico {
  width: 40px; height: 40px; flex:0 0 auto;
  display:grid; place-items:center; border-radius: 11px;
  color: var(--accent); font-size: 1.05rem;
  background: rgba(var(--accent-rgb), .12);
  border:1px solid rgba(var(--accent-rgb), .3);
}
.idx-card__num { margin-left:auto; font-family:"Sora"; font-size:.8rem; color: var(--text-faint); }
.idx-card__name { font-family:"Sora"; font-weight:600; font-size:1rem; }
.idx-card__name .en { display:block; font-size:.76rem; font-weight:500; color: var(--text-faint); }
.idx-card__desc { color: var(--text-dim); font-size:.82rem; }

/* ============================================================
   Ecosistema (hub central + tarjetas satélite)
   ============================================================ */
.eco {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.65rem;
  overflow-y: auto;
  max-height: 56vh;
  padding: 4px;
}
.eco-hub {
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  text-align: center; margin: 0 auto clamp(1rem,2vw,1.6rem);
}
.eco-hub__core {
  width: clamp(90px, 13vw, 130px); aspect-ratio:1;
  display:grid; place-items:center; border-radius: 50%;
  font-family:"Sora"; font-weight:700; font-size: clamp(.8rem,1.4vw,1rem); text-align:center; line-height:1.15;
  color: var(--white); background: var(--grad-main);
  box-shadow: var(--glow-cyan), var(--glow-violet);
  position: relative;
}
.eco-hub__core span { display:block; font-size:.72em; font-weight:500; opacity:.85; }
.eco-hub__core::before {
  content:""; position:absolute; inset:-10px; border-radius:50%;
  border:1px dashed rgba(255,255,255,.18); animation: spin 30s linear infinite;
}
.eco-node {
  display:flex; flex-direction:column; gap:.35rem;
  padding:.8rem .85rem; border-radius: var(--r-sm);
  background: var(--glass); border:1px solid var(--stroke);
  transition: border-color .3s, box-shadow .3s, transform .3s var(--ease);
}
.eco-node:hover { transform: translateY(-3px); border-color: rgba(var(--accent-rgb),.5); box-shadow: 0 0 24px rgba(var(--accent-rgb),.18); }
.eco-node__top { display:flex; align-items:center; gap:.5rem; }
.eco-node__ico { color: var(--accent); font-size:.95rem; width:26px; text-align:center; }
.eco-node__name { font-family:"Sora"; font-weight:600; font-size:.85rem; line-height:1.1; }
.eco-node__name .en { display:block; font-size:.68rem; font-weight:500; color: var(--text-faint); }
.eco-node__cap { color: var(--text-dim); font-size:.72rem; }

.eco-caption {
  text-align:center; color: var(--text-dim); font-size:.9rem;
  max-width: 66ch; margin: clamp(1rem,2vw,1.4rem) auto 0;
}
.eco-caption .en { display:block; color: var(--text-faint); font-size:.85em; margin-top:.2rem; }

/* Cierre / CTA suave */
.closing {
  margin-top: 1.2rem;
  display:flex; gap:.8rem; flex-wrap:wrap; justify-content:center;
}
.pill {
  padding:.5rem 1rem; border-radius:999px;
  background: var(--grad-soft); border:1px solid var(--stroke);
  font-family:"Sora"; font-weight:600; font-size:.85rem; color: var(--white);
}

/* ============================================================
   Enriquecimiento: escenas SVG, 2º párrafo, incluye, beneficios,
   ejemplo real y caso destacado
   ============================================================ */

/* Escena SVG a medida */
.scene {
  color: var(--accent);
  display: grid;
  place-items: center;
  padding: 0.5rem;
}
.scene svg { width: 100%; height: auto; max-width: 420px; filter: drop-shadow(0 18px 40px rgba(0,0,0,.4)); }

/* Segundo párrafo de la definición */
.def-more {
  color: var(--text-dim);
  font-size: clamp(0.88rem, 1.25vw, 1rem);
  line-height: 1.6;
  margin-top: 0.75rem;
  max-width: 62ch;
}

/* Encabezado de sección pequeño */
.section-k {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: "Sora"; font-weight: 700; font-size: 0.75rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.6rem;
}

/* ¿Qué incluye? — pills */
.includes { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.includes__k {
  font-family: "Sora"; font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent);
  flex: 0 0 auto;
}
.includes__list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.4rem 0.8rem; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--stroke);
  font-size: 0.8rem; color: var(--text);
}
.chip i { color: var(--accent); font-size: 0.8rem; }

/* Beneficios de negocio */
.benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.7rem, 1.3vw, 1.05rem);
}
@media (max-width: 900px) { .benefits { grid-template-columns: 1fr; } }
.benefit {
  display: flex; gap: 0.8rem; align-items: flex-start;
  padding: 0.9rem 1.05rem;
  border-radius: var(--r-md);
  background: rgba(var(--accent-rgb), 0.06);
  border: 1px solid rgba(var(--accent-rgb), 0.22);
}
.benefit__ico {
  flex: 0 0 auto; width: 42px; height: 42px;
  display: grid; place-items: center; border-radius: 11px;
  color: var(--white); font-size: 1rem;
  background: var(--grad-main);
  box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.3);
}
.benefit__title { font-family: "Sora"; font-weight: 600; font-size: 0.92rem; }
.benefit__desc { color: var(--text-dim); font-size: 0.8rem; margin-top: 0.15rem; line-height: 1.35; }

/* Slide 3: ejemplo + resultado lado a lado */
.how-extras {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(0.8rem, 1.6vw, 1.3rem);
  align-items: stretch;
}
@media (max-width: 900px) { .how-extras { grid-template-columns: 1fr; } }
.how-extras .outcome { margin: 0; align-items: flex-start; }

.example {
  padding: 1rem 1.25rem;
  border-radius: var(--r-md);
  background: var(--glass);
  border: 1px solid var(--stroke);
}
.example__k {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: "Sora"; font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 0.5rem;
}
.example__body { color: var(--text); font-size: 0.92rem; line-height: 1.55; }

/* Caso destacado */
.featured {
  position: relative;
  padding: 1.15rem 1.35rem;
  border-radius: var(--r-md);
  background: var(--grad-soft);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
}
.featured__badge {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: "Sora"; font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 0.5rem;
}
.featured__badge i { color: #ffd45e; }
.featured__sector { font-family: "Sora"; font-weight: 600; font-size: 1.02rem; color: var(--white); margin-bottom: 0.4rem; }
.featured__story { color: var(--text-dim); font-size: 0.9rem; line-height: 1.55; max-width: 100ch; }