/* =========================================================
   THORKIA WEB V31 R4.11 · MASTER M5 · RUTA / PROCESO
   Piloto: automatizacion-ventas-pymes-proceso
   Basado en patrones validados de Supremus Dental, reimplementado limpio.
   ========================================================= */

.article-template-process-route{
  --pr-accent:#0f95a6;
  --pr-accent-2:#22b8c8;
  --pr-dark:#071b2a;
  --pr-dark-2:#0b2c3b;
  --pr-text:#12243a;
  --pr-muted:#60748a;
  --pr-line:#d5e8ec;
  --pr-soft:#eefafb;
  --pr-soft-2:#f6fcfd;
  --pr-card:#fff;
  background:#fff;
  color:var(--pr-text);
}

/* HERO: composición real, no portada flotante ni min-height artificial. */
.article-template-process-route .process-hero{
  position:relative;
  overflow:hidden!important;
  padding:112px 0 58px!important;
  background:
    radial-gradient(circle at 88% 18%,rgba(34,184,200,.13),transparent 28%),
    linear-gradient(135deg,#f7fcfd 0%,#edf9fa 100%)!important;
  color:var(--pr-text)!important;
  border-bottom:1px solid #dcecef;
}
.article-template-process-route .process-hero:before{
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(15,149,166,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(15,149,166,.035) 1px,transparent 1px);
  background-size:44px 44px;
  pointer-events:none;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.75),transparent 88%);
}
.article-template-process-route .process-hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(430px,.94fr);
  gap:68px;
  align-items:center;
  max-width:1320px!important;
}
.article-template-process-route .process-hero-copy{max-width:720px}
.article-template-process-route .breadcrumbs{margin-bottom:21px;color:#70869a}
.article-template-process-route .breadcrumbs a{color:#68849a}
.article-template-process-route .article-kicker{margin-bottom:15px;color:var(--pr-accent);font-weight:900}
.article-template-process-route .process-hero h1{
  margin:0 0 20px!important;
  color:#0b1e32!important;
  font-size:clamp(46px,4.55vw,68px)!important;
  line-height:1.00!important;
  letter-spacing:-.05em!important;
}
.article-template-process-route .article-deck{
  max-width:680px!important;
  margin:0 0 20px!important;
  color:#526b80!important;
  font-size:17px!important;
  line-height:1.62!important;
}
.article-template-process-route .article-byline{color:#788b9d!important;font-size:9.5px!important}
.article-template-process-route .article-byline>*:not(:last-child):after{color:#b1c0cc!important}
.article-template-process-route .article-hero-conversion{
  max-width:650px;
  margin-top:22px!important;
  padding-top:20px!important;
  border-top:1px solid #d7e8eb!important;
  gap:12px!important;
}
.article-template-process-route .article-hero-actions{margin:0!important;gap:10px!important}
.article-template-process-route .article-hero-actions .btn,
.article-template-process-route .article-secondary-action{min-height:48px!important;border-radius:13px!important}
.article-template-process-route .article-register-btn{
  background:linear-gradient(135deg,#087f8c,#19aebe)!important;
  color:#fff!important;
  border:0!important;
  box-shadow:0 12px 28px rgba(8,127,140,.18)!important;
}
.article-template-process-route .article-register-btn:hover{transform:translateY(-1px);box-shadow:0 16px 34px rgba(8,127,140,.24)!important}
.article-template-process-route .article-secondary-action,
.article-template-process-route .article-secondary-action:visited{
  padding:0 18px!important;
  border:1px solid #c7dce1!important;
  background:#fff!important;
  color:#243b50!important;
  text-decoration:none!important;
  box-shadow:none!important;
}
.article-template-process-route .article-secondary-action:hover{background:#f5fbfc!important;border-color:#9dcbd3!important;color:#0b6270!important;transform:none!important}
.article-template-process-route .article-register-note{margin:0!important;max-width:600px!important;color:#74899a!important;font-size:12px!important;line-height:1.5!important}

/* Visual principal: integrado en el hero, no desplazado a otra sección. */
.article-template-process-route .process-hero-visual{
  position:relative;
  padding:13px;
  border:1px solid #c8e2e7;
  border-radius:26px;
  background:rgba(255,255,255,.72);
  box-shadow:0 24px 60px rgba(20,90,105,.11);
}
.article-template-process-route .process-visual-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:3px 4px 12px;
  color:#638092;
  font-size:9px;
  letter-spacing:.12em;
}
.article-template-process-route .process-visual-label span{font-weight:950;color:#0b7582}
.article-template-process-route .process-visual-label b{font-weight:850}
.article-template-process-route .article-cover.process-cover{
  max-width:none!important;
  margin:0!important;
  border:0!important;
  border-radius:18px!important;
  box-shadow:none!important;
  transform:none!important;
}
.article-template-process-route .article-cover.process-cover:hover{transform:none!important}
.article-template-process-route .article-cover.process-cover img{aspect-ratio:16/9!important}

/* ENTRADA: respuesta rápida + mapa de proceso. */
.article-template-process-route .process-entry{
  padding:38px 0 16px;
  background:#fff;
}
.article-template-process-route .process-entry-inner{max-width:1180px!important}
.article-template-process-route .process-quick .article-answer{
  margin:0!important;
  padding:22px 26px!important;
  border:1px solid #bfe0e5!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,#edfafa 0%,#f8fdfd 100%)!important;
  box-shadow:none!important;
}
.article-template-process-route .process-quick .article-answer span{color:#087f8c!important}
.article-template-process-route .process-quick .article-answer p{color:#18384a!important;font-size:17px!important;line-height:1.55!important}
.article-template-process-route .process-route-map{
  margin-top:22px;
  padding:20px;
  border:1px solid var(--pr-line);
  border-radius:20px;
  background:#fff;
  box-shadow:0 12px 34px rgba(18,63,76,.055);
}
.article-template-process-route .process-route-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:0 2px 14px;
  border-bottom:1px solid #e4eef1;
}
.article-template-process-route .process-route-heading span{color:#0b8997;font-size:9px;font-weight:950;letter-spacing:.13em}
.article-template-process-route .process-route-heading strong{color:#2a4358;font-size:12px}
.article-template-process-route .process-route-nodes{
  position:relative;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
  margin-top:10px;
}
@media(min-width:1081px){
  .article-template-process-route .process-route-nodes:before{
    content:"";position:absolute;left:9%;right:9%;top:28px;height:1px;background:#badce1;z-index:0;
  }
}
.article-template-process-route .process-route-nodes a{
  position:relative;
  z-index:1;
  min-width:0;
  padding:9px 8px 11px;
  color:#50677a!important;
  text-align:center;
  text-decoration:none!important;
  border:0;
  border-radius:14px;
  background:transparent;
  transition:background .15s ease,color .15s ease;
}
.article-template-process-route .process-route-nodes a b{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  margin:0 auto 9px;
  border:2px solid #7fc5ce;
  border-radius:50%;
  background:#fff;
  color:#087f8c;
  font:850 9.5px/1 "Space Grotesk",sans-serif;
  letter-spacing:.05em;
  box-shadow:0 0 0 6px #fff;
  transition:.15s ease;
}
.article-template-process-route .process-route-nodes a span{display:block;font-size:11.4px;line-height:1.34;font-weight:720}
.article-template-process-route .process-route-nodes a:hover,
.article-template-process-route .process-route-nodes a:focus-visible{background:#f1fafb;color:#153b4a!important;outline:none}
.article-template-process-route .process-route-nodes a:hover b,
.article-template-process-route .process-route-nodes a:focus-visible b{background:#0b8997;border-color:#0b8997;color:#fff}

/* LECTURA: ancho editorial. Cada H2 se convierte en una fase visible. */
.article-template-process-route .process-reading-shell{
  max-width:940px!important;
  padding-top:34px!important;
  padding-bottom:84px!important;
}
.article-template-process-route .process-reading-shell .article-content{
  counter-reset:processsection;
  color:#34495b!important;
  font-size:17px!important;
  line-height:1.82!important;
}
.article-template-process-route .process-reading-shell .article-content>h2{
  counter-increment:processsection;
  position:relative;
  margin:58px 0 18px!important;
  padding:0 0 14px 58px!important;
  border:0!important;
  border-bottom:1px solid #dce9ec!important;
  color:#10283a!important;
  font-size:clamp(29px,2.5vw,36px)!important;
  line-height:1.08!important;
}
.article-template-process-route .process-reading-shell .article-content>h2:before{
  content:counter(processsection,decimal-leading-zero);
  position:absolute;
  left:0;
  top:-3px;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:13px;
  background:#0b8997;
  color:#fff;
  font:800 11px/1 "Space Grotesk",sans-serif;
  letter-spacing:.05em;
  box-shadow:0 8px 18px rgba(11,137,151,.15);
}
.article-template-process-route .process-reading-shell .article-content>h2:after{display:none!important}
.article-template-process-route .article-content>p:first-child{font-size:17px!important;line-height:1.82!important;color:#34495b!important}

/* El listado de eventos es un mapa funcional en PC; no una lista vertical heredada. */
.article-template-process-route .article-steps{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:10px!important;
  margin:25px 0 32px!important;
}
.article-template-process-route .article-steps:before{display:none!important}
.article-template-process-route .article-steps li{
  display:block!important;
  min-width:0;
  padding:15px!important;
  border:1px solid #d5e8ec!important;
  border-radius:16px!important;
  background:#fbfefe!important;
  box-shadow:none!important;
}
.article-template-process-route .article-steps li>span{
  display:grid!important;
  place-items:center;
  width:34px!important;
  height:34px!important;
  margin-bottom:12px;
  border-radius:10px!important;
  background:#0b8997!important;
  color:#fff!important;
  box-shadow:none!important;
  font-size:10px!important;
}
.article-template-process-route .article-steps strong{display:block;color:#173347!important;font-size:13px;line-height:1.25}
.article-template-process-route .article-steps p{margin:6px 0 0!important;color:#687c8d!important;font-size:12px!important;line-height:1.5!important}
.article-template-process-route .article-errors{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.article-template-process-route .article-errors li{border-color:#eadfe0;background:#fffafa}
.article-template-process-route .article-example{
  margin:28px 0!important;
  padding:22px 24px!important;
  border:1px solid #c8e5e9!important;
  border-left:4px solid #0b8997!important;
  border-radius:0 16px 16px 0!important;
  background:#f1fafb!important;
}
.article-template-process-route .article-example span{color:#087f8c!important}
.article-template-process-route .article-related-inline{
  border-left-color:#0b8997!important;
  background:#f1fafb!important;
}
.article-template-process-route .article-content a{color:#087985}
.article-template-process-route .article-content a:hover{color:#075964}

/* CTA común con contrato de contraste propio del Master. */
.article-template-process-route .article-cta{
  margin-top:58px!important;
  padding:30px!important;
  border:1px solid #17394a!important;
  border-radius:20px!important;
  background:linear-gradient(135deg,#071b2a 0%,#0c3443 100%)!important;
  color:#fff!important;
  box-shadow:0 18px 42px rgba(7,27,42,.12);
}
.article-template-process-route .article-cta>span{color:#6fe0e7!important}
.article-template-process-route .article-cta h2{margin:9px 0 9px!important;padding:0!important;border:0!important;color:#fff!important;font-size:34px!important}
.article-template-process-route .article-cta h2:before,.article-template-process-route .article-cta h2:after{display:none!important}
.article-template-process-route .article-cta p{color:#c0ced8!important}
.article-template-process-route .article-cta .article-register-btn,
.article-template-process-route .article-cta .article-register-btn:visited{color:#fff!important}
.article-template-process-route .article-content .article-cta .article-contact-btn,
.article-template-process-route .article-content .article-cta .article-contact-btn:link,
.article-template-process-route .article-content .article-cta .article-contact-btn:visited{
  color:#fff!important;
  border-color:rgba(255,255,255,.23)!important;
  background:rgba(255,255,255,.07)!important;
}
.article-template-process-route .article-content .article-cta .article-contact-btn:hover{background:rgba(255,255,255,.12)!important;color:#fff!important}

/* TABLET: mapa 3+2; contenido conserva jerarquía. */
@media(max-width:1080px){
  .article-template-process-route .process-hero{padding:100px 0 48px!important}
  .article-template-process-route .process-hero-grid{grid-template-columns:1fr!important;gap:34px!important;max-width:900px!important}
  .article-template-process-route .process-hero-copy{max-width:760px}
  .article-template-process-route .process-hero-visual{max-width:760px;width:100%;margin:0 auto}
  .article-template-process-route .process-route-nodes{grid-template-columns:repeat(3,minmax(0,1fr))}
  .article-template-process-route .process-route-nodes a:nth-child(3){border-right:0}
  .article-template-process-route .process-route-nodes a:nth-child(-n+3){border-bottom:1px solid #e2ecef}
  .article-template-process-route .article-steps{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* MÓVIL: composición propia, no desktop comprimido. */
@media(max-width:700px){
  .article-template-process-route .process-hero{padding:82px 0 34px!important}
  .article-template-process-route .process-hero-grid{width:min(100% - 24px,1500px)!important;gap:24px!important}
  .article-template-process-route .breadcrumbs{margin-bottom:16px;font-size:8px}
  .article-template-process-route .process-hero h1{font-size:38px!important;line-height:1.02!important;margin-bottom:16px!important}
  .article-template-process-route .article-deck{font-size:15px!important;line-height:1.55!important;margin-bottom:17px!important}
  .article-template-process-route .article-byline{gap:7px 9px!important}
  .article-template-process-route .article-hero-conversion{margin-top:18px!important;padding-top:16px!important}
  .article-template-process-route .article-hero-actions{display:grid!important;grid-template-columns:1fr!important;gap:9px!important}
  .article-template-process-route .article-hero-actions .btn,.article-template-process-route .article-secondary-action{width:100%!important;min-height:46px!important}
  .article-template-process-route .article-register-note{font-size:11px!important;line-height:1.45!important;text-align:left!important}
  .article-template-process-route .process-hero-visual{padding:9px;border-radius:18px}
  .article-template-process-route .process-visual-label{padding:2px 3px 8px;font-size:8px}
  .article-template-process-route .article-cover.process-cover{border-radius:13px!important}
  .article-template-process-route .process-entry{padding:22px 0 6px}
  .article-template-process-route .process-entry-inner{width:min(100% - 24px,1500px)!important}
  .article-template-process-route .process-quick .article-answer{padding:18px!important;border-radius:15px!important}
  .article-template-process-route .process-quick .article-answer p{font-size:15px!important;line-height:1.5!important}
  .article-template-process-route .process-route-map{margin-top:14px;padding:14px;border-radius:16px}
  .article-template-process-route .process-route-heading{display:block;padding-bottom:10px}
  .article-template-process-route .process-route-heading strong{display:block;margin-top:5px;font-size:11px}
  .article-template-process-route .process-route-nodes{display:grid;grid-template-columns:1fr;margin-top:5px}
  .article-template-process-route .process-route-nodes a{display:grid;grid-template-columns:36px minmax(0,1fr);gap:9px;align-items:center;padding:11px 8px;border-right:0!important;border-bottom:1px solid #e2ecef!important}
  .article-template-process-route .process-route-nodes a:last-child{border-bottom:0!important}
  .article-template-process-route .process-route-nodes a b{margin:0}
  .article-template-process-route .process-route-nodes a span{font-size:11.5px}
  .article-template-process-route .process-reading-shell{width:min(100% - 24px,1500px)!important;padding-top:24px!important;padding-bottom:64px!important}
  .article-template-process-route .process-reading-shell .article-content{font-size:15.5px!important;line-height:1.74!important}
  .article-template-process-route .process-reading-shell .article-content>h2{margin:44px 0 15px!important;padding:0 0 12px 48px!important;font-size:27px!important}
  .article-template-process-route .process-reading-shell .article-content>h2:before{width:36px;height:36px;border-radius:11px;font-size:10px}
  .article-template-process-route .article-steps{grid-template-columns:1fr!important;gap:9px!important}
  .article-template-process-route .article-steps li{display:grid!important;grid-template-columns:36px minmax(0,1fr)!important;gap:10px!important;padding:13px!important}
  .article-template-process-route .article-steps li>span{margin:0!important;width:34px!important;height:34px!important}
  .article-template-process-route .article-steps li div{min-width:0}
  .article-template-process-route .article-errors{grid-template-columns:1fr}
  .article-template-process-route .article-example{padding:18px!important}
  .article-template-process-route .article-cta{padding:22px!important;margin-top:44px!important}
  .article-template-process-route .article-cta h2{font-size:28px!important}
}