/* ════════════════════════════════════════════════
   COLSING — PÁGINAS DE DETALLE DE SERVICIO
   Hoja complementaria a ../../styles.css
   Prefijo de clases nuevas: "sd-" (service detail)
   Reutiliza tokens y componentes globales: .sp .eyebrow .sh2
   .fu .title-reveal .btn-p .btn-g .proc .proc-grid .pstep .pnode
════════════════════════════════════════════════ */

/* ── ENTRADA ESCALONADA (activada por el loader, ver service.js) ── */
.sd-reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.sd-reveal.rev{opacity:1;transform:translateY(0)}

/* ── BREADCRUMB (compacta, unida, fácil de leer) ──
   Se blinda explícitamente contra el selector global "nav{}" (barra fija),
   ya que <nav class="sd-crumb"> también es un elemento <nav>. */
.sd-crumb{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;
  gap:5px;
  height:auto;
  background:none;backdrop-filter:none;border-bottom:none;
  padding:114px var(--gutter) 0;
  font-size:.74rem;font-weight:600;color:var(--text-dim);
  line-height:1;
}
.sd-crumb a{color:var(--text-dim);transition:color .2s;white-space:nowrap}
.sd-crumb a:hover{color:var(--lime)}
.sd-crumb span.sep{opacity:.35;font-size:.82em;margin:0 1px}
.sd-crumb span.here{color:var(--lime);font-weight:700;white-space:nowrap}

/* ── HERO DE SERVICIO ──
   Mismo criterio que el hero principal: dos columnas, texto a la
   izquierda, personaje "sangrando" hacia el borde a la derecha,
   sin tarjeta ni fondo alrededor. Mismo ancho de contenido que el nav. */
.sd-hero{
  position:relative;z-index:2;
  padding:26px var(--gutter) clamp(56px,8vh,90px);
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);
  gap:clamp(12px,3vw,32px);
  align-items:center;
  overflow:hidden;
}
.sd-hero-copy{max-width:640px}
.sd-num{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-heading);font-weight:800;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--lime);
  margin-bottom:18px;
}
.sd-num::before{content:"";width:22px;height:1.5px;background:var(--lime);display:inline-block}
.sd-hero-title{
  font-family:var(--font-heading);
  font-size:clamp(2.15rem,4.4vw,3.9rem);font-weight:800;line-height:1.05;
  letter-spacing:-.03em;color:var(--white);margin-bottom:18px;
}
.sd-hero-title em{font-style:normal;color:var(--lime)}
.sd-hero-desc{
  font-size:clamp(.94rem,1.15vw,1.05rem);line-height:1.78;color:var(--text-mid);
  max-width:560px;margin-bottom:30px;
}
.sd-hero-acts{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:34px}
.sd-chipbar{display:flex;flex-wrap:wrap;gap:9px}
.sd-chip{
  padding:8px 14px;border-radius:100px;border:1px solid var(--border2);
  font-size:.74rem;font-weight:600;color:var(--text-mid);background:rgba(255,255,255,.02);
}

/* ── ANIMACIÓN DE REFERENCIA DEL PORTAFOLIO — OCULTA ──
   Se conserva en el código (no se borra) por si se quiere reactivar:
   basta con quitar la clase .sd-anim-hidden en el HTML. */
.sd-anim-hidden{display:none!important}
.sd-service-anim{width:100%;max-width:460px}
.sd-service-anim svg{width:100%;height:100%;display:block}

/* ── VISUAL DEL HERO: espacio para la postura del personaje ──
   Sin tarjeta, sin borde, sin fondo — el personaje "sangra" hacia el
   borde derecho igual que el video del hero principal. */
.sd-hero-visual{
  position:relative;
  min-height:clamp(360px,52vh,540px);
  display:flex;align-items:flex-end;justify-content:center;
  overflow:visible;
}
.sd-wolf-slot{
  position:relative;width:100%;height:100%;
  display:flex;align-items:flex-end;justify-content:center;
  min-height:clamp(360px,52vh,540px);
}
.sd-wolf{
  position:relative;z-index:3;pointer-events:none;
  height:var(--wolf-pose-height,min(64vh,600px));
  width:auto;object-fit:contain;object-position:center bottom;
  transform:translate(var(--wolf-pose-x,0px),var(--wolf-pose-y,18px));
  filter:drop-shadow(-18px 18px 40px rgba(0,0,0,.6));
  opacity:0;
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}
.sd-wolf.rev{opacity:1;transform:translate(var(--wolf-pose-x,0px),0px)}

/* Marcador visible SOLO mientras no exista la imagen de la pose
   (se activa vía onerror desde el HTML). Desaparece solo al subir el PNG. */
.sd-wolf-placeholder{
  display:none;
  position:absolute;inset:auto 8% 6% 8%;
  height:min(58vh,520px);
  flex-direction:column;align-items:center;justify-content:center;gap:14px;
  border:1.5px dashed var(--border2);border-radius:24px;
  color:var(--text-dim);
  background:linear-gradient(160deg,rgba(222,242,44,.03),transparent);
}
.sd-wolf-placeholder svg{width:38px;height:38px;opacity:.6}
.sd-wolf-placeholder span{font-size:.76rem;font-weight:600;text-align:center;line-height:1.5;max-width:180px}

/* ── SECCIÓN: QUÉ INCLUYE / FEATURES ── */
.sd-feat-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px;
}
.sd-feat-card{
  position:relative;
  padding:28px 24px;border-radius:16px;
  background:var(--surface2);border:1px solid var(--border);
  transition:border-color .3s,transform .3s var(--ease),background .3s;
}
.sd-feat-card:hover{border-color:var(--lime-mid);transform:translateY(-4px);background:var(--surface3)}
.sd-feat-icon{
  width:42px;height:42px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  background:var(--lime-dim);border:1px solid var(--lime-mid);color:var(--lime);
  margin-bottom:18px;
}
.sd-feat-icon svg{width:20px;height:20px}
.sd-feat-title{
  font-family:var(--font-heading);font-weight:700;font-size:1rem;color:var(--white);
  margin-bottom:8px;
}
.sd-feat-desc{font-size:.85rem;line-height:1.65;color:var(--text-dim)}

/* ── POR QUÉ COLSING ── */
.sd-why{
  margin-top:56px;padding:36px clamp(20px,3vw,40px);
  border-radius:20px;background:var(--surface2);border:1px solid var(--border);
  display:grid;grid-template-columns:minmax(0,320px) 1fr;gap:clamp(24px,4vw,56px);
  align-items:start;
}
.sd-why-title{font-family:var(--font-heading);font-weight:800;font-size:clamp(1.3rem,2.2vw,1.7rem);color:var(--white);line-height:1.2}
.sd-why-title em{font-style:normal;color:var(--lime)}
.sd-why-list{display:grid;grid-template-columns:1fr 1fr;gap:18px 28px}
.sd-why-item{display:flex;gap:12px;align-items:flex-start}
.sd-why-ico{
  flex:0 0 auto;width:30px;height:30px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:var(--lime-dim);color:var(--lime);margin-top:2px;
}
.sd-why-ico svg{width:15px;height:15px}
.sd-why-t{font-size:.85rem;font-weight:700;color:var(--text);margin-bottom:3px}
.sd-why-d{font-size:.78rem;line-height:1.6;color:var(--text-dim)}

/* ── PROCESO (encabezado propio; usa .proc .proc-grid .pstep globales) ── */


/* ── SERVICIOS RELACIONADOS ── */
.sd-rel-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:40px}
.sd-rel-card{
  padding:20px 18px;border-radius:14px;background:var(--surface2);border:1px solid var(--border);
  transition:border-color .25s,transform .25s var(--ease),background .25s;
  display:flex;flex-direction:column;gap:10px;
}
.sd-rel-card:hover{border-color:var(--lime-mid);transform:translateY(-3px);background:var(--surface3)}
.sd-rel-num{font-family:var(--font-heading);font-size:.68rem;font-weight:800;color:var(--lime);letter-spacing:.08em}
.sd-rel-name{font-family:var(--font-heading);font-size:.86rem;font-weight:700;color:var(--white);line-height:1.3}
.sd-rel-go{font-size:.7rem;font-weight:700;color:var(--text-dim);display:flex;align-items:center;gap:5px;margin-top:auto}
.sd-rel-card:hover .sd-rel-go{color:var(--lime)}

/* ── CTA FINAL ── */
.sd-cta-band{
  margin-top:56px;padding:clamp(32px,5vw,56px);border-radius:24px;
  background:linear-gradient(135deg,var(--surface2),var(--surface));
  border:1px solid var(--border2);
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
  position:relative;overflow:hidden;
}
.sd-cta-band::before{
  content:"";position:absolute;right:-10%;top:-40%;width:50%;height:180%;
  background:radial-gradient(ellipse,var(--lime-dim),transparent 65%);pointer-events:none;
}
.sd-cta-copy{position:relative;z-index:1;max-width:480px}
.sd-cta-eyebrow{font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);margin-bottom:10px}
.sd-cta-title{font-family:var(--font-heading);font-weight:800;font-size:clamp(1.4rem,2.6vw,2.05rem);color:var(--white);line-height:1.16;margin-bottom:10px}
.sd-cta-desc{font-size:.88rem;line-height:1.7;color:var(--text-mid)}
.sd-cta-acts{position:relative;z-index:1;display:flex;flex-direction:column;gap:12px;min-width:230px}
.sd-cta-acts .btn-p,.sd-cta-acts .btn-g{justify-content:center}

/* ── RESPONSIVE ── */
@media (max-width:1100px){
  .sd-hero{grid-template-columns:1fr;padding-top:20px}
  .sd-hero-copy{max-width:640px}
  .sd-hero-visual{min-height:340px;order:-1}
  .sd-wolf-slot{min-height:340px}
  .sd-wolf{height:var(--wolf-pose-height,300px)}
  .sd-wolf-placeholder{height:280px}
  .sd-feat-grid{grid-template-columns:1fr 1fr}
  .sd-why{grid-template-columns:1fr}
  .sd-rel-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:720px){
  .sd-crumb{padding-top:96px;font-size:.68rem}
  .sd-hero{padding-top:16px}
  .sd-hero-title{font-size:clamp(1.9rem,7vw,2.6rem)}
  .sd-feat-grid{grid-template-columns:1fr}
  .sd-why-list{grid-template-columns:1fr}
  .sd-rel-grid{grid-template-columns:1fr 1fr}
  .sd-cta-band{flex-direction:column;align-items:stretch}
  .sd-cta-acts{width:100%}
  .sd-hero-visual{min-height:280px}
  .sd-wolf-slot{min-height:280px}
  .sd-wolf{height:var(--wolf-pose-height,240px)}
  .sd-wolf-placeholder{height:220px;inset:auto 4% 4% 4%}
}
@media (max-width:480px){
  .sd-rel-grid{grid-template-columns:1fr}
}

/* ── Respeta preferencia de movimiento reducido ── */
@media (prefers-reduced-motion:reduce){
  .sd-wolf{transition:none}
}

/* ════════════════════════════════════════════════
   COLSING IDENTITY OVERRIDE — DETALLE DE SERVICIOS
════════════════════════════════════════════════ */
.sd-crumb a:hover,
.sd-crumb span.here,
.sd-num,
.sd-num::before,
.sd-hero-title em,
.sd-cta-eyebrow,
.sd-rel-num,
.sd-rel-card:hover .sd-rel-go{
  color:var(--lime)!important;
  background-color:var(--lime);
}
.sd-crumb{
  color:var(--text-dim)!important;
}
.sd-hero{
  background:transparent;
}
.sd-chip{
  background:rgba(222,242,44,.07)!important;
  border-color:rgba(222,242,44,.18)!important;
  color:var(--bone)!important;
}
.sd-feat-card,
.sd-why,
.sd-rel-card,
.sd-cta-band{
  background:linear-gradient(180deg,var(--surface2),var(--surface))!important;
  border-color:rgba(243,240,230,.10)!important;
}
.sd-feat-card:hover,
.sd-rel-card:hover{
  background:linear-gradient(180deg,var(--surface3),var(--surface2))!important;
  border-color:rgba(222,242,44,.18)!important;
}
.sd-feat-icon,
.sd-why-ico{
  background:rgba(222,242,44,.08)!important;
  border:1px solid rgba(222,242,44,.18)!important;
  color:var(--lime)!important;
}
.sd-wolf-placeholder{
  border-color:rgba(243,240,230,.14)!important;
  background:linear-gradient(180deg, rgba(222,242,44,.03), rgba(255,255,255,.02))!important;
}
.sd-cta-band::before{
  background:radial-gradient(ellipse, rgba(222,242,44,.10), transparent 65%)!important;
}

/* Ajuste fino: mantiene el acento lima sin rellenar el texto */
.sd-crumb a:hover,
.sd-crumb span.here,
.sd-num,
.sd-hero-title em,
.sd-cta-eyebrow,
.sd-rel-num,
.sd-rel-card:hover .sd-rel-go{
  color:var(--lime)!important;
  background-color:transparent!important;
}
.sd-num::before{background:var(--lime)!important}

/* ════════════════════════════════════════════════
   PREMIUM AIR — DETALLE DE SERVICIOS
════════════════════════════════════════════════ */
.sd-hero{
  padding:34px var(--gutter) clamp(84px,10vh,120px)!important;
  gap:clamp(28px,5vw,72px)!important;
}
.sd-hero-copy{
  max-width:600px!important;
}
.sd-hero-desc{
  max-width:560px!important;
  line-height:1.86!important;
  margin-bottom:36px!important;
}
.sd-hero-acts{
  gap:16px!important;
  margin-bottom:38px!important;
}
.sd-chipbar{
  gap:10px!important;
}
.sd-feat-grid{
  gap:24px!important;
  margin-top:52px!important;
}
.sd-feat-card{
  padding:32px 28px!important;
  border-radius:22px!important;
  box-shadow:0 18px 48px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.02)!important;
}
.sd-why{
  margin-top:64px!important;
  padding:40px clamp(26px,3vw,44px)!important;
  gap:clamp(32px,4vw,64px)!important;
  border-radius:24px!important;
  box-shadow:0 18px 48px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.02)!important;
}
.sd-why-list{
  gap:22px 30px!important;
}
.sd-rel-grid{
  gap:18px!important;
  margin-top:48px!important;
}
.sd-rel-card{
  padding:22px 20px!important;
  border-radius:18px!important;
  box-shadow:0 18px 48px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.02)!important;
}
.sd-cta-band{
  margin-top:64px!important;
  padding:clamp(38px,5vw,62px)!important;
  border-radius:28px!important;
  box-shadow:0 22px 56px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.02)!important;
}
@media (max-width:1100px){
  .sd-hero{
    gap:26px!important;
    padding-top:24px!important;
  }
}
@media (max-width:720px){
  .sd-hero{
    padding:20px var(--gutter) 70px!important;
  }
  .sd-hero-desc{
    margin-bottom:30px!important;
  }
  .sd-feat-card,
  .sd-why,
  .sd-rel-card,
  .sd-cta-band{
    border-radius:20px!important;
  }
}

/* ════════════════════════════════════════════════
   COLSING — PULIDO FINAL DE PÁGINAS DE SERVICIO
════════════════════════════════════════════════ */
.sd-crumb{
  color:var(--text-dim)!important;
  letter-spacing:.01em;
}
.sd-crumb a{
  transition:color .22s!important;
}
.sd-hero-title{
  max-width:13ch;
  font-size:clamp(2.35rem,4.5vw,4.1rem)!important;
  line-height:1.02!important;
  letter-spacing:-.045em!important;
}
.sd-hero-desc{
  font-size:clamp(.94rem,1.12vw,1.05rem)!important;
  line-height:1.84!important;
  color:var(--text-mid)!important;
}
.sd-chip{
  min-height:32px;
  display:inline-flex;
  align-items:center;
  font-weight:650!important;
}
.sd-feat-card,
.sd-why,
.sd-rel-card,
.sd-cta-band{
  border-color:rgba(243,240,230,.10)!important;
  box-shadow:0 16px 42px rgba(0,0,0,.16)!important;
  transition:transform .28s var(--ease),box-shadow .28s,border-color .28s,background .28s!important;
}
.sd-feat-card:hover,
.sd-rel-card:hover{
  transform:translateY(-5px)!important;
  box-shadow:0 24px 54px rgba(0,0,0,.24)!important;
}
.sd-feat-title,
.sd-why-title,
.sd-rel-name,
.sd-cta-title{
  letter-spacing:-.022em!important;
}
.sd-feat-desc,
.sd-why-d,
.sd-cta-desc{
  color:var(--text-dim)!important;
  line-height:1.72!important;
}
.sd-feat-icon,
.sd-why-ico{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.sd-rel-go{
  transition:color .22s,transform .22s!important;
}
.sd-rel-card:hover .sd-rel-go{
  transform:translateX(3px);
}
.sd-cta-band{
  border-radius:28px!important;
}
.sd-cta-acts .btn-p,
.sd-cta-acts .btn-g{
  min-height:48px;
  border-radius:12px!important;
}

@media (max-width:720px){
  .sd-hero-title{
    max-width:none;
    font-size:clamp(2rem,9vw,2.8rem)!important;
  }
  .sd-feat-card,
  .sd-why,
  .sd-rel-card,
  .sd-cta-band{
    border-radius:20px!important;
  }
}

/* ════════════════════════════════════════════════
   DISEÑO Y COMUNICACIÓN — PRUEBA DE HERO CLARO
   Solo se activa mediante .sd-hero--light en esta página.
════════════════════════════════════════════════ */
.sd-hero--light{
  position:relative!important;
  isolation:isolate!important;
  min-height:min(860px,calc(100svh - 20px));
  padding-top:clamp(150px,17vh,190px)!important;
  background:
    radial-gradient(circle at 82% 28%,rgba(222,242,44,.13),transparent 26%),
    radial-gradient(circle at 12% 86%,rgba(21,38,26,.055),transparent 30%),
    linear-gradient(180deg,#FFFFFF 0%,#FBFBF7 100%)!important;
  color:#11130F!important;
  box-shadow:0 0 0 100vmax #FFFFFF;
  clip-path:inset(0 -100vmax);
}
.sd-hero--light::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(118deg,rgba(255,255,255,.82),transparent 34%),
    radial-gradient(ellipse at 72% 70%,rgba(222,242,44,.07),transparent 38%);
}
.sd-hero--light .sd-num{
  color:var(--lime,#DEF22C)!important;
}
.sd-hero--light .sd-num::before{
  background:var(--lime,#DEF22C)!important;
}
.sd-hero--light .sd-hero-title{
  color:#15261A!important;
}
.sd-hero--light .sd-hero-title em{
  display:inline-block!important;
  padding:.08em .34em .12em!important;
  margin-inline:.04em!important;
  border-radius:.28em!important;
  background:#15261A!important;
  color:var(--lime,#DEF22C)!important;
  -webkit-text-fill-color:var(--lime,#DEF22C)!important;
  box-shadow:0 10px 24px rgba(21,38,26,.14), inset 0 1px 0 rgba(255,255,255,.06)!important;
}
.sd-hero--light .sd-hero-desc{
  color:#171A16!important;
}
.sd-hero--light .sd-chip{
  color:#15261A!important;
  background:rgba(222,242,44,.15)!important;
  border-color:rgba(161,178,25,.30)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65)!important;
}

/* Botones invertidos para ganar contraste sobre el fondo blanco. */
.sd-hero--light .btn-p{
  background:#15261A!important;
  color:#FFFFFF!important;
  border:1px solid #15261A!important;
  box-shadow:0 12px 28px rgba(21,38,26,.18)!important;
}
.sd-hero--light .btn-p:hover{
  background:var(--lime,#DEF22C)!important;
  color:#15261A!important;
  border-color:var(--lime,#DEF22C)!important;
  box-shadow:0 14px 32px rgba(160,177,28,.22)!important;
}
.sd-hero--light .btn-g{
  background:rgba(255,255,255,.78)!important;
  color:#15261A!important;
  border-color:rgba(21,38,26,.42)!important;
  box-shadow:0 10px 24px rgba(21,38,26,.06)!important;
}
.sd-hero--light .btn-g:hover{
  background:#15261A!important;
  color:#FFFFFF!important;
  border-color:#15261A!important;
}
.sd-hero--light .btn-p svg,
.sd-hero--light .btn-g svg{
  color:inherit!important;
  stroke:currentColor!important;
  fill:currentColor;
}

/* El espacio reservado del personaje también se adapta al hero claro. */
.sd-hero--light .sd-wolf-placeholder{
  color:#15261A!important;
  border-color:rgba(21,38,26,.25)!important;
  background:linear-gradient(160deg,rgba(222,242,44,.13),rgba(21,38,26,.035))!important;
}
.sd-hero--light .sd-wolf{
  filter:drop-shadow(-14px 18px 32px rgba(21,38,26,.20))!important;
}

@media (max-width:1100px){
  .sd-hero--light{
    min-height:auto;
    padding-top:clamp(132px,15vh,164px)!important;
  }
}
@media (max-width:720px){
  .sd-hero--light{
    padding-top:122px!important;
    padding-bottom:66px!important;
  }
}

/* ════════════════════════════════════════════════
   DISEÑO Y COMUNICACIÓN — CONTRASTE + RESALTE MINIMALISTA
════════════════════════════════════════════════ */
.sd-hero--light .sd-num{
  color:#15261A!important;
  -webkit-text-fill-color:#15261A!important;
  font-weight:700!important;
}
.sd-hero--light .sd-num::before{
  background:var(--lime,#DEF22C)!important;
}
.sd-hero--light .sd-hero-title{
  color:#101A12!important;
  -webkit-text-fill-color:#101A12!important;
  font-weight:650!important;
  text-shadow:none!important;
}
.sd-hero--light .sd-hero-title em{
  display:inline!important;
  padding:.015em .16em .055em!important;
  margin-inline:.025em!important;
  border-radius:.11em!important;
  background:#15261A!important;
  color:var(--lime,#DEF22C)!important;
  -webkit-text-fill-color:var(--lime,#DEF22C)!important;
  box-shadow:none!important;
  -webkit-box-decoration-break:clone!important;
  box-decoration-break:clone!important;
}

/* ══════════════════════════════════════════════════════════════
   SISTEMA EDITORIAL HÍBRIDO — PÁGINAS DE SERVICIO
   Base visual compartida entre Diseño y las demás capacidades.
   El contenido, las etapas y la iconografía se adaptan a cada servicio.
══════════════════════════════════════════════════════════════ */
body.service-design-editorial{
  --editorial-bone:#F4F2E9;
  --editorial-paper:#FBFAF5;
  --editorial-green:#15261A;
  --editorial-green-2:#1C3222;
  --editorial-ink:#151814;
  --editorial-muted:#596259;
  background:var(--editorial-bone)!important;
  color:var(--editorial-ink)!important;
}
body.service-design-editorial main{
  position:relative;
  background:var(--editorial-bone)!important;
  overflow:hidden;
}
body.service-design-editorial main::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(circle at 9% 23%,rgba(222,242,44,.075),transparent 18%),
    radial-gradient(circle at 91% 66%,rgba(21,38,26,.045),transparent 22%);
}
body.service-design-editorial main > section{position:relative;z-index:1}

/* HERO claro: editorial, contrastado y conectado con el resto de la página. */
body.service-design-editorial .sd-hero--light{
  background:
    radial-gradient(circle at 82% 26%,rgba(222,242,44,.16),transparent 27%),
    linear-gradient(180deg,#FFFFFF 0%,#F8F7F1 100%)!important;
  border-bottom:1px solid rgba(21,38,26,.09)!important;
  box-shadow:none!important;
}
body.service-design-editorial .sd-hero--light .sd-num{
  color:var(--editorial-green)!important;
}
body.service-design-editorial .sd-hero--light .sd-num::before{
  background:var(--editorial-green)!important;
}
body.service-design-editorial .sd-hero--light .sd-hero-title{
  color:var(--editorial-green)!important;
  text-shadow:none!important;
}
body.service-design-editorial .sd-hero--light .sd-hero-title em{
  display:inline!important;
  padding:.025em .13em .055em!important;
  margin:0 .015em!important;
  border-radius:.09em!important;
  background:var(--editorial-green)!important;
  color:var(--lime)!important;
  -webkit-text-fill-color:var(--lime)!important;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
  box-shadow:none!important;
}
body.service-design-editorial .sd-hero--light .sd-hero-desc{
  color:#303730!important;
}
body.service-design-editorial .sd-hero--light .sd-chip{
  color:var(--editorial-green)!important;
  background:rgba(222,242,44,.17)!important;
  border-color:rgba(142,158,22,.28)!important;
}
body.service-design-editorial .sd-wolf{
  filter:drop-shadow(-14px 18px 28px rgba(21,38,26,.20))!important;
}

/* Superficies editoriales claras. */
body.service-design-editorial .sd-editorial-light{
  background:transparent!important;
}
body.service-design-editorial #incluye{
  padding-top:clamp(84px,9vw,126px)!important;
  padding-bottom:clamp(86px,9vw,132px)!important;
}
body.service-design-editorial #relacionados{
  padding-top:clamp(86px,9vw,128px)!important;
  padding-bottom:clamp(70px,8vw,108px)!important;
}
body.service-design-editorial .sd-editorial-light .eyebrow{
  color:var(--editorial-green)!important;
}
body.service-design-editorial .sd-editorial-light .eyebrow::before{
  background:var(--editorial-green)!important;
}
body.service-design-editorial .sd-editorial-light .sh2{
  color:var(--editorial-green)!important;
}
body.service-design-editorial .sd-editorial-light .sh2 em{
  position:relative;
  color:var(--editorial-green)!important;
  -webkit-text-fill-color:var(--editorial-green)!important;
}
body.service-design-editorial .sd-editorial-light .sh2 em::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-.07em;
  height:.12em;
  border-radius:999px;
  background:var(--lime);
  opacity:.88;
}
body.service-design-editorial .sd-editorial-light .ssub{
  color:var(--editorial-muted)!important;
  max-width:720px;
}

/* Tarjetas de capacidades: papel premium y glass muy sutil. */
body.service-design-editorial .sd-feat-grid{
  gap:22px!important;
}
body.service-design-editorial .sd-feat-card{
  border:1px solid rgba(21,38,26,.11)!important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.90),rgba(255,255,255,.62)),
    var(--editorial-paper)!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.06)!important;
  backdrop-filter:blur(14px) saturate(1.06)!important;
  box-shadow:
    0 20px 48px rgba(21,38,26,.075),
    inset 0 1px 0 rgba(255,255,255,.92)!important;
}
body.service-design-editorial .sd-feat-card:hover{
  border-color:rgba(21,38,26,.22)!important;
  background:#FFFFFF!important;
  box-shadow:0 26px 58px rgba(21,38,26,.11)!important;
}
body.service-design-editorial .sd-feat-icon{
  width:46px!important;height:46px!important;
  color:var(--editorial-green)!important;
  background:rgba(222,242,44,.26)!important;
  border:1px solid rgba(152,168,24,.25)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78)!important;
}
body.service-design-editorial .sd-feat-title{
  color:var(--editorial-green)!important;
}
body.service-design-editorial .sd-feat-desc{
  color:#5A625A!important;
}

/* Bloque estratégico oscuro dentro de la narrativa clara. */
body.service-design-editorial .sd-why{
  margin-top:clamp(62px,7vw,92px)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  background:
    radial-gradient(circle at 88% 16%,rgba(222,242,44,.11),transparent 28%),
    linear-gradient(145deg,#1C3222 0%,#15261A 62%,#101D14 100%)!important;
  box-shadow:
    0 30px 70px rgba(21,38,26,.20),
    inset 0 1px 0 rgba(255,255,255,.09)!important;
}
body.service-design-editorial .sd-why-title{
  color:#FFFFFF!important;
}
body.service-design-editorial .sd-why-title em{
  color:var(--lime)!important;
}
body.service-design-editorial .sd-why-ico{
  color:var(--lime)!important;
  background:rgba(222,242,44,.10)!important;
  border:1px solid rgba(222,242,44,.20)!important;
}
body.service-design-editorial .sd-why-t{
  color:#FFFFFF!important;
}
body.service-design-editorial .sd-why-d{
  color:rgba(243,240,230,.67)!important;
}

/* Capacidades relacionadas: tarjetas claras, legibles y comerciales. */
body.service-design-editorial .sd-rel-card{
  min-height:176px;
  border:1px solid rgba(21,38,26,.11)!important;
  background:rgba(255,255,255,.78)!important;
  -webkit-backdrop-filter:blur(12px)!important;
  backdrop-filter:blur(12px)!important;
  box-shadow:0 18px 42px rgba(21,38,26,.065)!important;
}
body.service-design-editorial .sd-rel-card:hover{
  border-color:rgba(21,38,26,.24)!important;
  background:#FFFFFF!important;
  box-shadow:0 24px 54px rgba(21,38,26,.11)!important;
}
body.service-design-editorial .sd-rel-num{
  color:#8E9D15!important;
}
body.service-design-editorial .sd-rel-name{
  color:var(--editorial-green)!important;
}
body.service-design-editorial .sd-rel-go{
  color:#667066!important;
}
body.service-design-editorial .sd-rel-card:hover .sd-rel-go{
  color:var(--editorial-green)!important;
}

/* Cierre oscuro: recuperación clara de la identidad de marca. */
body.service-design-editorial .sd-cta-section{
  padding-bottom:clamp(86px,8vw,120px)!important;
}
body.service-design-editorial .sd-cta-band{
  border:1px solid rgba(255,255,255,.12)!important;
  background:
    radial-gradient(circle at 86% 14%,rgba(222,242,44,.15),transparent 28%),
    linear-gradient(145deg,#1C3222 0%,#15261A 66%,#101D14 100%)!important;
  box-shadow:0 30px 68px rgba(21,38,26,.21)!important;
}
body.service-design-editorial .sd-cta-eyebrow{
  color:var(--lime)!important;
}
body.service-design-editorial .sd-cta-title{
  color:#FFFFFF!important;
}
body.service-design-editorial .sd-cta-desc{
  color:rgba(243,240,230,.68)!important;
}
body.service-design-editorial .sd-cta-band .btn-p{
  background:var(--lime)!important;
  color:var(--editorial-green)!important;
  border-color:var(--lime)!important;
}
body.service-design-editorial .sd-cta-band .btn-p:hover{
  background:#FFFFFF!important;
  color:var(--editorial-green)!important;
  border-color:#FFFFFF!important;
}
body.service-design-editorial .sd-cta-band .btn-g{
  background:rgba(255,255,255,.04)!important;
  color:#FFFFFF!important;
  border-color:rgba(255,255,255,.28)!important;
}
body.service-design-editorial .sd-cta-band .btn-g:hover{
  background:#FFFFFF!important;
  color:var(--editorial-green)!important;
  border-color:#FFFFFF!important;
}

/* El footer continúa oscuro y funciona como cierre natural. */
body.service-design-editorial footer{
  position:relative;
  z-index:2;
}

@media (max-width:1100px){
  body.service-design-editorial #incluye,
  body.service-design-editorial #relacionados{
    padding-top:82px!important;
    padding-bottom:88px!important;
  }
}
@media (max-width:720px){
  body.service-design-editorial .sd-hero--light .sd-hero-title em{
    padding:.02em .11em .05em!important;
  }
  body.service-design-editorial #incluye,
  body.service-design-editorial #relacionados{
    padding-top:68px!important;
    padding-bottom:72px!important;
  }
  
  body.service-design-editorial .sd-why{
    margin-top:52px!important;
  }
  body.service-design-editorial .sd-rel-card{
    min-height:142px;
  }
}

/* Ajustes finos — Diseño y Comunicación */

/* Hero: más aire entre el título y el párrafo. */
body.service-design-editorial .sd-hero--light .sd-hero-desc{
  margin-top:clamp(18px,2.2vw,26px)!important;
}
body.service-design-editorial .sd-hero--light .sd-hero-title em{
  margin-inline:.09em!important;
}

/* Capacidades que conectan: más presencia de los números. */
body.service-design-editorial .sd-rel-num{
  color:var(--lime)!important;
  font-size:.82rem!important;
  font-weight:800!important;
  letter-spacing:.10em!important;
}

@media (max-width:720px){
  
  body.service-design-editorial .sd-hero--light .sd-hero-desc{
    margin-top:16px!important;
  }
}











/* Six-column grid prevents implicit tracks and centers the second row. */







/* Integrated lime circle. */

/* Lime outer card border. */


/* ════════════════════════════════════════════════
   DISEÑO Y COMUNICACIÓN — PROCESO EDITORIAL AISLADO
════════════════════════════════════════════════ */
body.service-design-editorial .sd-process{
  background:#15261A!important;
  color:#FFFFFF;
  padding-top:clamp(86px,9vw,126px)!important;
  padding-bottom:clamp(90px,9vw,132px)!important;
  box-shadow:0 0 0 100vmax #15261A;
  clip-path:inset(0 -100vmax);
}
body.service-design-editorial .sd-process-head{
  max-width:720px;
}
body.service-design-editorial .sd-process .eyebrow{
  color:var(--lime)!important;
}
body.service-design-editorial .sd-process .eyebrow::before{
  background:var(--lime)!important;
}
body.service-design-editorial .sd-process .sh2{
  margin-top:18px;
  color:#FFFFFF!important;
}
body.service-design-editorial .sd-process .sh2 em{
  font-style:normal;
  color:var(--lime)!important;
  -webkit-text-fill-color:var(--lime)!important;
}
body.service-design-editorial .sd-process .ssub{
  margin-top:22px;
  color:rgba(243,240,230,.72)!important;
}
body.service-design-editorial .process-cards{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:24px;
  margin:clamp(44px,6vw,70px) 0 0;
  padding:0;
}
body.service-design-editorial .process-card{
  grid-column:span 2;
  min-width:0;
  min-height:270px;
  padding:26px;
  display:flex;
  flex-direction:column;
  border:1px solid rgba(21,38,26,.12);
  border-radius:28px;
  background:#F3F0E6;
  box-shadow:0 18px 42px rgba(0,0,0,.13);
}
body.service-design-editorial .process-card:nth-child(4){grid-column:2 / span 2}
body.service-design-editorial .process-card:nth-child(5){grid-column:4 / span 2}
body.service-design-editorial .process-card__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
}
body.service-design-editorial .process-card__number{
  width:52px;
  height:52px;
  flex:0 0 52px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--lime);
  color:#15261A;
  font-family:var(--font-heading);
  font-size:1rem;
  font-weight:800;
  letter-spacing:.03em;
}
body.service-design-editorial .process-card__icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  color:#15261A;
}
body.service-design-editorial .process-card__icon svg{
  width:31px;
  height:31px;
  stroke:currentColor;
  stroke-width:1.35;
  stroke-linecap:round;
  stroke-linejoin:round;
}
body.service-design-editorial .process-card__title{
  margin:36px 0 12px;
  min-height:2.5em;
  color:#15261A;
  font-family:var(--font-heading);
  font-size:1.02rem;
  line-height:1.25;
  font-weight:700;
}
body.service-design-editorial .process-card__description{
  margin:0;
  color:rgba(21,38,26,.72);
  font-size:.9rem;
  line-height:1.58;
}
@media(max-width:980px){
  body.service-design-editorial .process-cards{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  body.service-design-editorial .process-card,
  body.service-design-editorial .process-card:nth-child(4){grid-column:auto}
  body.service-design-editorial .process-card:nth-child(5){
    grid-column:1 / span 2;
    width:calc((100% - 24px)/2);
    justify-self:center;
  }
}
@media(max-width:640px){
  body.service-design-editorial .sd-process{
    padding-top:68px!important;
    padding-bottom:72px!important;
  }
  body.service-design-editorial .process-cards{
    grid-template-columns:1fr;
    gap:18px;
    margin-top:38px;
  }
  body.service-design-editorial .process-card,
  body.service-design-editorial .process-card:nth-child(4),
  body.service-design-editorial .process-card:nth-child(5){
    grid-column:auto;
    width:100%;
    min-height:238px;
    padding:22px;
    border-radius:24px;
  }
  body.service-design-editorial .process-card__number{
    width:46px;
    height:46px;
    flex-basis:46px;
    font-size:.94rem;
  }
  body.service-design-editorial .process-card__icon{
    width:38px;
    height:38px;
  }
  body.service-design-editorial .process-card__icon svg{
    width:28px;
    height:28px;
  }
  body.service-design-editorial .process-card__title{
    margin-top:28px;
    min-height:0;
  }
}

/* ════════════════════════════════════════════════
   DISEÑO Y COMUNICACIÓN — PROCESO EN ESCENA
   Versión editorial con relato visual y tarjetas apiladas.
════════════════════════════════════════════════ */
body.service-design-editorial .sd-process--story{
  background:#15261A!important;
  color:#fff!important;
  padding-top:clamp(92px,10vw,138px)!important;
  padding-bottom:clamp(96px,10vw,142px)!important;
  box-shadow:0 0 0 100vmax #15261A;
  clip-path:inset(0 -100vmax);
}
body.service-design-editorial .story-process{
  display:grid;
  grid-template-columns:minmax(280px,380px) minmax(0,1fr);
  gap:clamp(34px,4vw,66px);
  align-items:start;
}
body.service-design-editorial .story-process__intro{
  position:sticky;
  top:108px;
  align-self:start;
}
body.service-design-editorial .story-process__intro .eyebrow{color:var(--lime)!important}
body.service-design-editorial .story-process__intro .eyebrow::before{background:var(--lime)!important}
body.service-design-editorial .story-process__intro .sh2{
  margin-top:16px;
  color:#fff!important;
  max-width:12ch;
}
body.service-design-editorial .story-process__intro .sh2 em{
  font-style:normal;
  color:var(--lime)!important;
  -webkit-text-fill-color:var(--lime)!important;
}
body.service-design-editorial .story-process__intro .ssub{
  margin-top:22px;
  color:rgba(243,240,230,.74)!important;
  max-width:34ch;
}
body.service-design-editorial .story-process__status{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:34px;
}
body.service-design-editorial .story-process__current{
  font-family:var(--font-heading);
  font-size:clamp(2.8rem,5vw,4.4rem);
  line-height:.9;
  font-weight:800;
  letter-spacing:-.06em;
  color:var(--lime);
}
body.service-design-editorial .story-process__divider{
  width:56px;
  height:1px;
  background:rgba(243,240,230,.22);
}
body.service-design-editorial .story-process__total{
  font-family:var(--font-heading);
  font-size:1.02rem;
  font-weight:600;
  color:rgba(243,240,230,.56);
}
body.service-design-editorial .story-process__nav{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:30px;
}
body.service-design-editorial .story-process__nav-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  width:100%;
  padding:13px 15px;
  border-radius:18px;
  border:1px solid rgba(243,240,230,.09);
  background:rgba(255,255,255,.03);
  color:rgba(243,240,230,.7);
  text-align:left;
  transition:background .25s ease,border-color .25s ease,transform .25s ease,color .25s ease;
}
body.service-design-editorial .story-process__nav-item span{
  font-family:var(--font-heading);
  font-size:.95rem;
  font-weight:700;
  color:var(--lime);
  letter-spacing:.04em;
}
body.service-design-editorial .story-process__nav-item small{
  font-size:.89rem;
  font-weight:600;
  color:inherit;
}
body.service-design-editorial .story-process__nav-item.is-active,
body.service-design-editorial .story-process__nav-item:hover,
body.service-design-editorial .story-process__nav-item:focus-visible{
  background:rgba(222,242,44,.08);
  border-color:rgba(222,242,44,.22);
  color:#fff;
  transform:translateX(4px);
}
body.service-design-editorial .story-process__cards{
  list-style:none;
  margin:0;
  padding:12px 0;
}
body.service-design-editorial .story-process__card{
  position:sticky;
  top:84px;
  margin:0;
  padding:0;
  z-index:1;
}
body.service-design-editorial .story-process__card + .story-process__card{margin-top:-82px}
body.service-design-editorial .story-process__card:nth-child(2){z-index:2}
body.service-design-editorial .story-process__card:nth-child(3){z-index:3}
body.service-design-editorial .story-process__card:nth-child(4){z-index:4}
body.service-design-editorial .story-process__card:nth-child(5){z-index:5}
body.service-design-editorial .story-process__layer{
  position:absolute;
  inset:16px 18px -18px 18px;
  border-radius:34px;
  background:rgba(243,240,230,.09);
  border:1px solid rgba(243,240,230,.06);
  z-index:0;
}
body.service-design-editorial .story-process__panel{
  position:relative;
  z-index:1;
  min-height:400px;
  padding:34px 36px 34px;
  border-radius:36px;
  border:1px solid rgba(21,38,26,.10);
  background:linear-gradient(180deg,#f7f4eb 0%,#f0ecdf 100%);
  box-shadow:0 24px 60px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.74);
  overflow:hidden;
}
body.service-design-editorial .story-process__panel::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at top right, rgba(222,242,44,.18), transparent 24%),
    linear-gradient(125deg, rgba(255,255,255,.26), transparent 34%);
  pointer-events:none;
}
body.service-design-editorial .story-process__ghost{
  position:absolute;
  right:24px;
  top:18px;
  font-family:var(--font-heading);
  font-size:clamp(5rem,10vw,8rem);
  line-height:.9;
  font-weight:800;
  letter-spacing:-.08em;
  color:rgba(21,38,26,.06);
  user-select:none;
}
body.service-design-editorial .story-process__panel-top{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
body.service-design-editorial .story-process__chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:9px 15px;
  border-radius:999px;
  background:#15261A;
  color:var(--lime);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
body.service-design-editorial .story-process__icon{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:rgba(21,38,26,.05);
  color:#15261A;
}
body.service-design-editorial .story-process__icon svg{
  width:28px;
  height:28px;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
}
body.service-design-editorial .story-process__title{
  position:relative;
  z-index:1;
  margin:76px 0 14px;
  max-width:13ch;
  color:#15261A;
  font-family:var(--font-heading);
  font-size:clamp(1.45rem,2vw,2rem);
  line-height:1.06;
  font-weight:700;
  letter-spacing:-.03em;
}
body.service-design-editorial .story-process__description{
  position:relative;
  z-index:1;
  margin:0;
  max-width:46ch;
  color:rgba(21,38,26,.74);
  font-size:1rem;
  line-height:1.68;
}
body.service-design-editorial .story-process__accent{
  position:relative;
  z-index:1;
  margin:22px 0 0;
  padding-top:18px;
  border-top:1px solid rgba(21,38,26,.10);
  max-width:42ch;
  color:#15261A;
  font-size:.94rem;
  line-height:1.55;
  font-weight:600;
}
body.service-design-editorial .story-process__card.is-current .story-process__panel{
  transform:translateY(-2px);
}
body.service-design-editorial .story-process__card.is-current .story-process__chip{
  background:var(--lime);
  color:#15261A;
}
@media (max-width:1080px){
  body.service-design-editorial .story-process{
    grid-template-columns:1fr;
    gap:34px;
  }
  body.service-design-editorial .story-process__intro{
    position:relative;
    top:auto;
  }
  body.service-design-editorial .story-process__intro .sh2,
  body.service-design-editorial .story-process__intro .ssub{max-width:none}
  body.service-design-editorial .story-process__nav{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
  }
  body.service-design-editorial .story-process__nav-item{
    flex-direction:column;
    align-items:flex-start;
    padding:12px;
  }
  body.service-design-editorial .story-process__card{top:32px}
}
@media (max-width:720px){
  body.service-design-editorial .sd-process--story{
    padding-top:72px!important;
    padding-bottom:78px!important;
  }
  body.service-design-editorial .story-process__status{margin-top:24px}
  body.service-design-editorial .story-process__nav{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  body.service-design-editorial .story-process__nav-item:last-child{grid-column:1 / -1}
  body.service-design-editorial .story-process__cards{padding-top:0}
  body.service-design-editorial .story-process__card{
    position:relative;
    top:auto;
  }
  body.service-design-editorial .story-process__card + .story-process__card{margin-top:18px}
  body.service-design-editorial .story-process__layer{display:none}
  body.service-design-editorial .story-process__panel{
    min-height:auto;
    padding:24px 22px 24px;
    border-radius:28px;
  }
  body.service-design-editorial .story-process__ghost{
    right:14px;
    top:12px;
    font-size:4.7rem;
  }
  body.service-design-editorial .story-process__icon{
    width:46px;
    height:46px;
    border-radius:14px;
  }
  body.service-design-editorial .story-process__icon svg{
    width:24px;
    height:24px;
  }
  body.service-design-editorial .story-process__title{
    margin-top:42px;
    max-width:none;
    font-size:1.36rem;
  }
  body.service-design-editorial .story-process__description{
    font-size:.93rem;
    line-height:1.6;
  }
  body.service-design-editorial .story-process__accent{
    margin-top:18px;
    padding-top:14px;
    font-size:.89rem;
  }
}

/* Refinamiento — Proceso en escena */
body.service-design-editorial .story-process{
  gap:clamp(40px,5vw,82px)!important;
}
body.service-design-editorial .story-process__intro{
  z-index:20;
  padding-right:8px;
  isolation:isolate;
}
body.service-design-editorial .story-process__status{
  position:relative;
  z-index:3;
}
body.service-design-editorial .story-process__nav{
  position:relative;
  z-index:3;
}
body.service-design-editorial .story-process__cards{
  padding:22px 0 8px!important;
}
body.service-design-editorial .story-process__card + .story-process__card{
  margin-top:34px!important;
}
body.service-design-editorial .story-process__card{
  top:96px!important;
}
body.service-design-editorial .story-process__layer{
  inset:20px 24px -16px 24px!important;
  opacity:.75;
}
body.service-design-editorial .story-process__panel{
  min-height:420px!important;
  padding:34px 36px 36px!important;
}
body.service-design-editorial .story-process__ghost{
  right:28px!important;
  top:18px!important;
  font-size:clamp(5.6rem,10vw,8.5rem)!important;
  color:rgba(21,38,26,.07)!important;
}
body.service-design-editorial .story-process__panel-top{
  align-items:flex-start!important;
  justify-content:flex-start!important;
}
body.service-design-editorial .story-process__chip{
  position:relative;
  z-index:2;
}
body.service-design-editorial .story-process__icon{
  position:absolute;
  top:122px;
  right:34px;
  width:54px;
  height:54px;
  border-radius:18px;
  background:rgba(21,38,26,.045)!important;
}
body.service-design-editorial .story-process__icon svg{
  width:30px!important;
  height:30px!important;
  stroke-width:1.25!important;
}
body.service-design-editorial .story-process__title{
  margin-top:86px!important;
  max-width:14ch!important;
}
body.service-design-editorial .story-process__description{
  max-width:48ch!important;
}
body.service-design-editorial .story-process__nav-item.is-active,
body.service-design-editorial .story-process__nav-item:hover,
body.service-design-editorial .story-process__nav-item:focus-visible{
  transform:translateX(6px)!important;
}

@media (max-width:1080px){
  body.service-design-editorial .story-process__intro{
    padding-right:0!important;
  }
  body.service-design-editorial .story-process__cards{
    padding-top:4px!important;
  }
  body.service-design-editorial .story-process__card{
    top:28px!important;
  }
  body.service-design-editorial .story-process__card + .story-process__card{
    margin-top:24px!important;
  }
}
@media (max-width:720px){
  body.service-design-editorial .story-process__nav{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.service-design-editorial .story-process__card + .story-process__card{
    margin-top:20px!important;
  }
  body.service-design-editorial .story-process__panel{
    padding:24px 22px 24px!important;
  }
  body.service-design-editorial .story-process__ghost{
    right:16px!important;
    top:12px!important;
    font-size:5rem!important;
  }
  body.service-design-editorial .story-process__icon{
    top:88px!important;
    right:22px!important;
    width:46px!important;
    height:46px!important;
    border-radius:14px!important;
  }
  body.service-design-editorial .story-process__icon svg{
    width:24px!important;
    height:24px!important;
  }
  body.service-design-editorial .story-process__title{
    margin-top:54px!important;
  }
}


/* Refinamiento 2 — columna fija real + iconografía más robusta */
@media (min-width:1081px){
  body.service-design-editorial .sd-process--story{overflow:visible!important}
  body.service-design-editorial .story-process{
    grid-template-columns:minmax(300px,390px) minmax(0,1fr)!important;
    gap:clamp(48px,5.4vw,92px)!important;
    align-items:start!important;
  }
  body.service-design-editorial .story-process__intro{
    position:sticky!important;
    top:96px!important;
    align-self:start!important;
    z-index:40!important;
    max-height:calc(100vh - 112px)!important;
    overflow:auto!important;
    padding:4px 22px 12px 0!important;
    background:#15261A!important;
    box-shadow:26px 0 0 #15261A!important;
    scrollbar-width:none;
  }
  body.service-design-editorial .story-process__intro::-webkit-scrollbar{display:none}
  body.service-design-editorial .story-process__cards{
    padding-top:18px!important;
  }
}
body.service-design-editorial .story-process__status,
body.service-design-editorial .story-process__nav{
  position:relative!important;
  z-index:5!important;
}
body.service-design-editorial .story-process__card{
  top:112px!important;
}
body.service-design-editorial .story-process__card + .story-process__card{
  margin-top:46px!important;
}
body.service-design-editorial .story-process__panel{
  min-height:430px!important;
}
body.service-design-editorial .story-process__ghost{
  right:28px!important;
  top:20px!important;
  font-size:clamp(6rem,10vw,8.8rem)!important;
}
body.service-design-editorial .story-process__icon{
  position:absolute!important;
  right:34px!important;
  top:132px!important;
  width:58px!important;
  height:58px!important;
  border-radius:18px!important;
  background:rgba(21,38,26,.055)!important;
}
body.service-design-editorial .story-process__icon svg{
  width:32px!important;
  height:32px!important;
  stroke:#15261A!important;
  stroke-width:1.9!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  vector-effect:non-scaling-stroke!important;
}
body.service-design-editorial .story-process__title{
  margin-top:98px!important;
}
@media (max-width:1080px){
  body.service-design-editorial .story-process__intro{
    position:relative!important;
    top:auto!important;
    max-height:none!important;
    overflow:visible!important;
    background:transparent!important;
    box-shadow:none!important;
    padding:0!important;
  }
  body.service-design-editorial .story-process__card{
    top:28px!important;
  }
}
@media (max-width:720px){
  body.service-design-editorial .story-process__card + .story-process__card{
    margin-top:22px!important;
  }
  body.service-design-editorial .story-process__icon{
    right:22px!important;
    top:92px!important;
    width:48px!important;
    height:48px!important;
    border-radius:14px!important;
  }
  body.service-design-editorial .story-process__icon svg{
    width:27px!important;
    height:27px!important;
    stroke-width:1.85!important;
  }
  body.service-design-editorial .story-process__title{
    margin-top:58px!important;
  }
}


/* Ajuste final — intro siempre visible dentro de la sección */
@media (min-width:1081px){
  body.service-design-editorial .sd-process--story{
    overflow:visible!important;
  }
  body.service-design-editorial .story-process{
    grid-template-columns:minmax(300px,370px) minmax(0,1fr)!important;
    gap:clamp(42px,4.8vw,78px)!important;
    align-items:start!important;
  }
  body.service-design-editorial .story-process__intro{
    position:sticky!important;
    top:104px!important;
    align-self:start!important;
    z-index:30!important;
    max-height:none!important;
    overflow:visible!important;
    padding:0 12px 0 0!important;
    background:transparent!important;
    box-shadow:none!important;
    isolation:isolate!important;
  }
  body.service-design-editorial .story-process__cards{
    padding-top:8px!important;
  }
}
body.service-design-editorial .story-process__status,
body.service-design-editorial .story-process__nav,
body.service-design-editorial .story-process__intro .eyebrow,
body.service-design-editorial .story-process__intro .sh2,
body.service-design-editorial .story-process__intro .ssub{
  position:relative!important;
  z-index:3!important;
}
body.service-design-editorial .story-process__card{
  top:112px!important;
}
body.service-design-editorial .story-process__card + .story-process__card{
  margin-top:40px!important;
}
body.service-design-editorial .story-process__layer{
  inset:20px 24px -14px 24px!important;
}
body.service-design-editorial .story-process__panel{
  min-height:426px!important;
}
body.service-design-editorial .story-process__icon{
  position:absolute!important;
  right:34px!important;
  top:138px!important;
  width:56px!important;
  height:56px!important;
  border-radius:16px!important;
  background:rgba(21,38,26,.05)!important;
}
body.service-design-editorial .story-process__icon svg{
  width:31px!important;
  height:31px!important;
  stroke:#15261A!important;
  stroke-width:2.15!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  fill:none!important;
}
body.service-design-editorial .story-process__title{
  margin-top:98px!important;
}

@media (max-width:1080px){
  body.service-design-editorial .story-process__intro{
    position:relative!important;
    top:auto!important;
    padding:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  body.service-design-editorial .story-process__card{
    top:28px!important;
  }
}
@media (max-width:720px){
  body.service-design-editorial .story-process__card + .story-process__card{
    margin-top:22px!important;
  }
  body.service-design-editorial .story-process__icon{
    right:20px!important;
    top:92px!important;
    width:46px!important;
    height:46px!important;
    border-radius:14px!important;
  }
  body.service-design-editorial .story-process__icon svg{
    width:26px!important;
    height:26px!important;
    stroke-width:2.05!important;
  }
  body.service-design-editorial .story-process__title{
    margin-top:58px!important;
  }
}

/* ════ PROCESO EN ESCENA — desplazamiento suave del bloque lateral ════ */
@media (min-width:1081px){
  body.service-design-editorial .story-process{
    align-items:start!important;
  }
  body.service-design-editorial .story-process__intro{
    position:relative!important;
    top:auto!important;
    align-self:start!important;
    transform:translate3d(0,var(--story-intro-y,0px),0)!important;
    will-change:transform!important;
    transition:none!important;
    max-height:none!important;
    overflow:visible!important;
    background:transparent!important;
    box-shadow:none!important;
  }
}
@media (max-width:1080px){
  body.service-design-editorial .story-process__intro{
    transform:none!important;
  }
}

/* Diseño y Comunicación — Material Symbols oficiales */
body.service-design-editorial .story-process__ghost{
  color:rgba(21,38,26,.12)!important;
  text-shadow:0 0 18px rgba(222,242,44,.08)!important;
}
body.service-design-editorial .story-process__icon.material-symbols-rounded{
  position:absolute!important;
  right:18px!important;
  top:112px!important;
  width:190px!important;
  height:190px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:rgba(21,38,26,.10)!important;
  font-family:'Material Symbols Rounded'!important;
  font-size:190px!important;
  font-weight:700!important;
  font-style:normal!important;
  line-height:1!important;
  letter-spacing:normal!important;
  text-transform:none!important;
  white-space:nowrap!important;
  word-wrap:normal!important;
  direction:ltr!important;
  font-feature-settings:'liga'!important;
  -webkit-font-feature-settings:'liga'!important;
  font-variation-settings:'FILL' 1,'wght' 700,'GRAD' 0,'opsz' 48!important;
  pointer-events:none!important;
  z-index:1!important;
}
body.service-design-editorial .story-process__icon.material-symbols-rounded svg{
  display:none!important;
}
body.service-design-editorial .story-process__panel-top,
body.service-design-editorial .story-process__title,
body.service-design-editorial .story-process__description,
body.service-design-editorial .story-process__accent{
  position:relative!important;
  z-index:3!important;
}
body.service-design-editorial .story-process__title{
  margin-top:168px!important;
  max-width:15ch!important;
}
body.service-design-editorial .story-process__card.is-current .story-process__icon.material-symbols-rounded{
  color:rgba(21,38,26,.14)!important;
}
@media(max-width:720px){
  body.service-design-editorial .story-process__icon.material-symbols-rounded{
    right:10px!important;
    top:82px!important;
    width:142px!important;
    height:142px!important;
    font-size:142px!important;
    color:rgba(21,38,26,.09)!important;
  }
  body.service-design-editorial .story-process__title{
    margin-top:120px!important;
    max-width:none!important;
  }
}


/* ══════════════════════════════════════════════════════════════
   SISTEMA EDITORIAL COMPARTIDO — AJUSTES PARA TODAS LAS CAPACIDADES
══════════════════════════════════════════════════════════════ */
body.service-editorial-system .sd-hero--light{
  min-height:min(780px,92vh)!important;
}
body.service-editorial-system .sd-hero-copy{
  max-width:690px!important;
}
body.service-editorial-system .sd-feat-card{
  min-height:248px!important;
}
body.service-editorial-system .story-process__chip{
  max-width:68%!important;
  min-height:36px!important;
  white-space:normal!important;
  line-height:1.25!important;
  text-align:left!important;
  font-size:.69rem!important;
}
body.service-editorial-system .story-process__nav-item{
  min-height:54px!important;
}
body.service-editorial-system .story-process__nav-item small{
  max-width:74%!important;
  line-height:1.25!important;
  text-align:right!important;
}
body.service-editorial-system .story-process__panel{
  min-height:408px!important;
}
body.service-editorial-system .story-process__title{
  max-width:16ch!important;
}
body.service-editorial-system .story-process__description{
  max-width:44ch!important;
}
body.service-editorial-system .sd-cta-section{
  background:transparent!important;
}
@media(max-width:1080px){
  body.service-editorial-system .sd-hero--light{
    min-height:auto!important;
  }
  body.service-editorial-system .story-process__nav-item small{
    max-width:100%!important;
    text-align:left!important;
  }
}
@media(max-width:720px){
  body.service-editorial-system .sd-feat-card{
    min-height:auto!important;
  }
  body.service-editorial-system .story-process__chip{
    max-width:72%!important;
    font-size:.64rem!important;
  }
  body.service-editorial-system .story-process__panel{
    min-height:330px!important;
  }
  body.service-editorial-system .story-process__title{
    max-width:18ch!important;
  }
}


/* ════════════════════════════════════════════════
   SERVICIOS — SLIDER GLOBAL DE IMÁGENES DEL HERO
   Cambia únicamente la imagen cada 3 segundos.
════════════════════════════════════════════════ */
body.service-design-editorial .sd-hero-image-slider{
  position:relative;
  isolation:isolate;
  overflow:visible;
}
body.service-design-editorial .sd-hero-image-slider .sd-hero-slide{
  position:absolute;
  left:50%;
  bottom:0;
  margin:0;
  opacity:0;
  visibility:hidden;
  transform:translate3d(calc(-50% + var(--wolf-pose-x,0px)),var(--wolf-pose-y,0px),0) scale(.985);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),
             transform .75s cubic-bezier(.22,.61,.36,1),
             visibility 0s linear .6s;
  will-change:opacity,transform;
}
body.service-design-editorial .sd-hero-image-slider .sd-hero-slide.is-active{
  opacity:1;
  visibility:visible;
  transform:translate3d(calc(-50% + var(--wolf-pose-x,0px)),0,0) scale(1);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),
             transform .75s cubic-bezier(.22,.61,.36,1),
             visibility 0s;
}
body.service-design-editorial .sd-hero-image-slider .sd-wolf-placeholder{
  z-index:0;
}
@media (prefers-reduced-motion:reduce){
  body.service-design-editorial .sd-hero-image-slider .sd-hero-slide{
    transition:none!important;
  }
}

/* HERO RESPONSIVE — imagen completa y separada de la navegación */
@media (max-width:1100px){
  body.service-design-editorial .sd-hero--light{
    padding-top:clamp(104px,11vw,128px)!important;
  }
  body.service-design-editorial .sd-hero-visual{
    margin-top:12px!important;
  }
  body.service-design-editorial .sd-hero-visual,
  body.service-design-editorial .sd-hero-image-slider{
    width:100%!important;
    height:clamp(420px,58vw,560px)!important;
    min-height:clamp(420px,58vw,560px)!important;
    align-items:flex-end!important;
    justify-content:center!important;
  }
  body.service-design-editorial .sd-hero-image-slider .sd-hero-slide{
    width:auto!important;
    height:calc(100% - 28px)!important;
    max-width:min(88vw,620px)!important;
    max-height:calc(100% - 28px)!important;
    object-fit:contain!important;
    object-position:center bottom!important;
    bottom:-10px!important;
    top:auto!important;
  }
}
@media (max-width:720px){
  body.service-design-editorial .sd-hero--light{
    padding-top:98px!important;
  }
  body.service-design-editorial .sd-hero-visual{
    margin-top:10px!important;
  }
  body.service-design-editorial .sd-hero-visual,
  body.service-design-editorial .sd-hero-image-slider{
    height:clamp(350px,104vw,460px)!important;
    min-height:clamp(350px,104vw,460px)!important;
  }
  body.service-design-editorial .sd-hero-image-slider .sd-hero-slide{
    height:calc(100% - 20px)!important;
    max-height:calc(100% - 20px)!important;
    max-width:94vw!important;
    bottom:-12px!important;
  }
}
@media (max-width:430px){
  body.service-design-editorial .sd-hero--light{
    padding-top:92px!important;
  }
  body.service-design-editorial .sd-hero-visual{
    margin-top:8px!important;
  }
  body.service-design-editorial .sd-hero-visual,
  body.service-design-editorial .sd-hero-image-slider{
    height:clamp(340px,110vw,420px)!important;
    min-height:clamp(340px,110vw,420px)!important;
  }
  body.service-design-editorial .sd-hero-image-slider .sd-hero-slide{
    height:calc(100% - 16px)!important;
    max-height:calc(100% - 16px)!important;
    max-width:96vw!important;
  }
}


/* ════ V3.1 — LEGIBILIDAD + PROCESO EDGE EN SERVICIOS ════ */
.story-process__mobile-tracker{display:none}
.story-process__mobile-stage{display:contents}

@media(max-width:720px){
  /* Evita que el resaltado verde invada las líneas vecinas. */
  body.service-design-editorial .sd-hero--light .sd-hero-title{
    font-size:clamp(2rem,9.2vw,2.78rem)!important;
    line-height:1.24!important;
    letter-spacing:-.035em!important;
    margin-bottom:24px!important;
  }
  body.service-design-editorial .sd-hero--light .sd-hero-title em{
    display:inline!important;
    line-height:1.42!important;
    padding:.075em .14em .12em!important;
    margin-inline:.045em!important;
    box-decoration-break:clone!important;
    -webkit-box-decoration-break:clone!important;
  }
  body.service-design-editorial .sd-hero--light .sd-hero-desc{
    margin-top:22px!important;
  }
  body.service-design-editorial .sd-editorial-light .sh2,
  body.service-design-editorial .story-process__intro .sh2,
  body.service-design-editorial .sd-process .sh2{
    line-height:1.16!important;
  }
  body.service-design-editorial .sd-editorial-light .sh2 em,
  body.service-design-editorial .story-process__intro .sh2 em,
  body.service-design-editorial .sd-process .sh2 em{
    display:inline-block!important;
    margin-top:.10em!important;
    padding-bottom:.08em!important;
    line-height:1.18!important;
  }

  /* El listado de etapas deja la cabecera y se convierte en un rail lateral. */
  body.service-design-editorial .story-process__intro>.story-process__status,
  body.service-design-editorial .story-process__intro>.story-process__nav{
    display:none!important;
  }
  body.service-design-editorial .story-process{
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto!important;
    row-gap:28px!important;
  }
  body.service-design-editorial .story-process__mobile-stage{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 70px!important;
    grid-template-rows:auto!important;
    column-gap:8px!important;
    grid-column:1!important;
    grid-row:2!important;
    align-items:start!important;
    min-width:0;
    position:relative;
  }
  body.service-design-editorial .story-process__mobile-tracker{
    position:sticky!important;
    top:50svh!important;
    transform:translateY(-50%)!important;
    z-index:70!important;
    grid-column:2!important;
    grid-row:1!important;
    align-self:start!important;
    justify-self:end!important;
    display:flex!important;
    flex-direction:column!important;
    width:70px!important;
    margin:0 calc(-1 * var(--gutter)) 0 0!important;
    padding:10px 5px 11px!important;
    overflow:hidden!important;
    border:1px solid rgba(255,255,255,.72)!important;
    border-right:0!important;
    border-radius:19px 0 0 19px!important;
    background:
      linear-gradient(145deg,rgba(255,255,255,.64),rgba(244,240,228,.78))!important;
    -webkit-backdrop-filter:blur(20px) saturate(1.32)!important;
    backdrop-filter:blur(20px) saturate(1.32)!important;
    box-shadow:
      -14px 18px 34px rgba(7,20,12,.18),
      inset 0 1px 0 rgba(255,255,255,.88),
      inset 1px 0 0 rgba(222,242,44,.18)!important;
  }
  body.service-design-editorial .story-process__mobile-tracker::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:
      radial-gradient(circle at 20% 5%,rgba(255,255,255,.92),transparent 42%),
      linear-gradient(180deg,rgba(222,242,44,.08),transparent 38%);
  }
  body.service-design-editorial .story-process__mobile-tracker .story-process__status{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;
    margin:0 0 8px!important;
  }
  body.service-design-editorial .story-process__mobile-tracker .story-process__current{
    color:#15261A!important;
    font-size:1.62rem!important;
    font-weight:800!important;
    line-height:.9!important;
    letter-spacing:-.075em!important;
    text-shadow:0 1px 0 rgba(255,255,255,.42)!important;
  }
  body.service-design-editorial .story-process__mobile-tracker .story-process__divider{
    width:1px!important;
    height:19px!important;
    background:rgba(21,38,26,.22)!important;
  }
  body.service-design-editorial .story-process__mobile-tracker .story-process__total{
    color:rgba(21,38,26,.54)!important;
    font-size:.63rem!important;
    font-weight:700!important;
  }
  body.service-design-editorial .story-process__nav--mobile{
    display:flex!important;
    flex-direction:column!important;
    gap:5px!important;
    margin:0!important;
  }
  body.service-design-editorial .story-process__nav--mobile .story-process__nav-item,
  body.service-design-editorial .story-process__nav--mobile .story-process__nav-item:last-child{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:center!important;
    width:65px!important;
    min-width:65px!important;
    min-height:41px!important;
    grid-column:auto!important;
    gap:2px!important;
    padding:6px 6px!important;
    overflow:hidden!important;
    border:1px solid rgba(21,38,26,.10)!important;
    border-right:0!important;
    border-radius:12px 0 0 12px!important;
    background:rgba(255,255,255,.28)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.42)!important;
    text-align:left!important;
    transform:none!important;
    transition:background .25s ease,border-color .25s ease,box-shadow .25s ease,transform .25s ease!important;
  }
  body.service-design-editorial .story-process__nav--mobile .story-process__nav-item span{
    color:#36513D!important;
    font-size:.69rem!important;
    font-weight:800!important;
    line-height:1!important;
  }
  body.service-design-editorial .story-process__nav--mobile .story-process__nav-item small{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
    color:rgba(21,38,26,.66)!important;
    font-size:.45rem!important;
    font-weight:650!important;
    line-height:1.08!important;
    letter-spacing:-.012em!important;
    text-align:left!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  body.service-design-editorial .story-process__nav--mobile .story-process__nav-item.is-active{
    background:#15261A!important;
    border-color:#15261A!important;
    transform:translateX(-6px)!important;
    box-shadow:
      -9px 11px 22px rgba(7,20,12,.22),
      inset 0 1px 0 rgba(255,255,255,.10)!important;
  }
  body.service-design-editorial .story-process__nav--mobile .story-process__nav-item.is-active span{
    color:#DEF22C!important;
  }
  body.service-design-editorial .story-process__nav--mobile .story-process__nav-item.is-active small{
    color:#F5F1E7!important;
  }
  body.service-design-editorial .story-process__cards{
    grid-column:1!important;
    grid-row:1!important;
    min-width:0!important;
    padding-top:0!important;
    position:relative!important;
    z-index:1!important;
  }

  /* Sticky necesita que el flujo principal no recorte la sección. */
  body.service-design-editorial main{
    overflow:visible!important;
  }
}

@media(max-width:370px){
  body.service-design-editorial .story-process__mobile-stage{
    grid-template-columns:minmax(0,1fr) 64px!important;
    column-gap:6px!important;
  }
  body.service-design-editorial .story-process__mobile-tracker{
    width:64px!important;
    padding-inline:4px!important;
  }
  body.service-design-editorial .story-process__nav--mobile .story-process__nav-item,
  body.service-design-editorial .story-process__nav--mobile .story-process__nav-item:last-child{
    width:59px!important;
    min-width:59px!important;
    padding-inline:5px!important;
  }
}



/* ════ CIERRE PROCESO EDGE — ALINEACIÓN CON PRIMERA TARJETA ════ */
@media(max-width:720px){
  body.service-design-editorial .story-process__mobile-stage{
    grid-template-columns:minmax(0,1fr) 70px!important;
    align-items:start!important;
  }
  body.service-design-editorial .story-process__mobile-tracker{
    top:calc(76px + 14px)!important;
    transform:none!important;
    align-self:start!important;
    margin-top:0!important;
    background:linear-gradient(145deg,rgba(255,255,255,.66),rgba(244,240,228,.82))!important;
    border-color:rgba(255,255,255,.78)!important;
  }
  body.service-design-editorial .story-process__cards{
    align-self:start!important;
    padding-top:0!important;
  }
}


/* CIERRE FINAL — PROCESO MÓVIL SOLO TARJETAS */
@media(max-width:720px){
  body.service-design-editorial .story-process__intro>.story-process__status,
  body.service-design-editorial .story-process__intro>.story-process__nav,
  body.service-design-editorial .story-process__mobile-tracker{
    display:none!important;
  }
  body.service-design-editorial .story-process__mobile-stage{
    display:block!important;
    width:100%!important;
    min-width:0!important;
  }
  body.service-design-editorial .story-process__cards{
    display:grid!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    grid-column:1!important;
  }
  body.service-design-editorial .story-process__card,
  body.service-design-editorial .story-process__panel{
    width:100%!important;
    max-width:none!important;
    box-sizing:border-box!important;
  }
}