/* ══════════════════════════════════════════════════════════
   automatizacion.css — Yeapdata®
   Manual de marca: Eurostile Black + Poppins
   Paleta: #E61667 | #6DC0AA | #4B509C | #FFE205 | #0B0A16
   Tema: 100% CLARO — sin ningún fondo oscuro
   Full Responsive Edition
══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&family=DM+Mono:wght@400;500&display=swap');

:root {
  /* ── Paleta del manual de marca ── */
  --pink:        #E61667;
  --pink-10:     rgba(230,22,103,.08);
  --pink-20:     rgba(230,22,103,.18);
  --pink-glow:   rgba(230,22,103,.22);

  --teal:        #6DC0AA;
  --teal-10:     rgba(109,192,170,.10);
  --teal-20:     rgba(109,192,170,.22);

  --indigo:      #4B509C;
  --indigo-10:   rgba(75,80,156,.10);
  --indigo-20:   rgba(75,80,156,.20);

  --amber:       #FFE205;
  --amber-dk:    #D4AB00;
  --amber-10:    rgba(255,226,5,.15);
  --amber-20:    rgba(255,226,5,.28);

  --navy:        #0B0A16;

  /* ── Fondos — SOLO CLAROS ── */
  --white:       #FFFFFF;
  --off:         #F5F6FC;
  --off-2:       #EEF0FA;

  /* ── Texto ── */
  --t1:          #0B0A16;
  --t2:          #3E3E60;
  --t3:          #8282A8;

  /* ── Bordes ── */
  --border:      rgba(75,80,156,.12);
  --border-lt:   rgba(75,80,156,.07);

  /* ── Sombras ── */
  --s-xs:        0 1px 6px rgba(11,10,22,.05);
  --s-sm:        0 3px 14px rgba(11,10,22,.08);
  --s-md:        0 8px 28px rgba(11,10,22,.10);
  --s-lg:        0 16px 52px rgba(11,10,22,.12);
  --s-pink:      0 8px 32px rgba(230,22,103,.20);
  --s-teal:      0 8px 32px rgba(109,192,170,.24);
  --s-indigo:    0 8px 32px rgba(75,80,156,.20);

  /* ── Tipografía ── */
  --ff-display:  'Eurostile', 'Arial Black', sans-serif;
  --ff-body:     'Poppins', sans-serif;
  --ff-mono:     'DM Mono', monospace;

  /* ── Curvas ── */
  --ease:        cubic-bezier(.22,1,.36,1);
  --ease-hard:   cubic-bezier(.76,0,.24,1);
  --max:         1160px;
}

/* ── Reset ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth }
body {
  font-family: var(--ff-body);
  background: var(--white);
  color: var(--t1);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  cursor: none;
}
::selection { background: var(--pink); color:#fff }
a { text-decoration:none; color:inherit }
img,svg { display:block }
.wrap { max-width:var(--max); margin:0 auto; padding:0 2.5rem }


/* ══ HELPERS ══════════════════════════════════════════════ */
.eyebrow {
  display:inline-block;
  font-family: var(--ff-mono);
  font-size:.68rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color: var(--pink);
  border-radius: 100px;
  padding: 4px 14px;
  margin-bottom: 1.1rem;
}
.eyebrow.center { display:block; text-align:center }


/* ══ REVEALS ══════════════════════════════════════════════ */
.reveal, .reveal-left, .reveal-step, .reveal-kpi, .reveal-dif {
  opacity:0;
}
.reveal.visible      { animation:revealUp    .72s var(--ease) both }
.reveal-left.visible { animation:revealLeft  .68s var(--ease) both }
.reveal-step.visible { animation:revealUp    .72s var(--ease) both }
.reveal-kpi.visible  { animation:revealScale .68s var(--ease) both }
.reveal-dif.visible  { animation:revealUp    .68s var(--ease) both }

@keyframes revealUp    { from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:translateY(0)} }
@keyframes revealLeft  { from{opacity:0;transform:translateX(-26px)} to{opacity:1;transform:translateX(0)} }
@keyframes revealScale { from{opacity:0;transform:scale(.93)} to{opacity:1;transform:scale(1)} }


/* ══════════════════════════════════════════════════════════
   HERO — blanco con circuito SVG animado
══════════════════════════════════════════════════════════ */
.hero {
  position:relative;
  min-height:100vh;
  background: var(--white);
  overflow:hidden;
  display:flex; align-items:center;
  padding:0 2.5rem;
}

/* Circuito SVG */
.hero-circuit {
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
}
.c-path {
  stroke: rgba(75,80,156,.07);
  stroke-width:1.5;
  stroke-dasharray:8 4;
  fill:none;
  animation:dashFlow 4s linear infinite;
}
.c-path-v { animation-duration:5s; animation-direction:reverse }
@keyframes dashFlow { from{stroke-dashoffset:0} to{stroke-dashoffset:-48} }

.c-node {
  fill: var(--pink);
  animation:nodePulse 3s ease-in-out infinite;
}
.c-node:nth-child(2){ animation-delay:.5s }
.c-node:nth-child(3){ animation-delay:1s }
.c-node:nth-child(4){ animation-delay:1.5s }
.c-node:nth-child(5){ animation-delay:2s }
.c-node:nth-child(6){ animation-delay:2.5s }
@keyframes nodePulse { 0%,100%{opacity:.25} 50%{opacity:.6} }

.c-pulse {
  fill: var(--pink);
  animation: pulseTravel 6s linear infinite;
}
.c-pulse-2 { animation-delay:3s; fill: var(--teal) }
@keyframes pulseTravel {
  0%  { cx:0;    cy:200; opacity:0 }
  5%  { opacity:.8 }
  95% { opacity:.8 }
  100%{ cx:1200; cy:140; opacity:0 }
}

/* Inner */
.hero-inner {
  position:relative; z-index:2;
  max-width: var(--max); margin:0 auto; width:100%;
  padding:120px 0 100px;
}

.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 16px;
  background: var(--off);
  border:1px solid var(--border);
  border-radius:100px;
  font-family: var(--ff-mono);
  font-size:.68rem; color: var(--t3);
  margin-bottom:2.4rem;
  opacity:0; animation:fadeIn .6s var(--ease) .1s forwards;
}
.hb-pip {
  width:6px; height:6px;
  background: var(--pink);
  border-radius:50%;
  box-shadow:0 0 0 3px var(--pink-10);
  animation:pipBlink 2s ease-in-out infinite;
}
@keyframes pipBlink { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes fadeIn   { to{opacity:1} }

/* Título partido */
.hero-title-wrap {
  display:flex; align-items:center; gap:2rem;
  margin-bottom:2rem; flex-wrap:wrap;
}
.ht-left {
  font-family: var(--ff-display);
  font-size:clamp(38px,5.8vw,78px);
  font-weight:900; line-height:.96; letter-spacing:-2px;
  color: var(--t1); overflow:hidden;
}
.ht-left span {
  display:block;
  opacity:0; transform:translateX(-60px);
  animation:slideFromLeft .9s var(--ease-hard) .3s forwards;
}
.ht-divider {
  display:flex; flex-direction:column; align-items:center; gap:.3rem;
  flex-shrink:0; opacity:0; animation:fadeIn .5s var(--ease) .7s forwards;
}
.htd-line {
  width:3px; height:30px;
  background:linear-gradient(to bottom,transparent,var(--pink));
}
.htd-line:last-child { background:linear-gradient(to bottom,var(--pink),transparent) }
.htd-sym { font-size:2rem; color: var(--pink); line-height:1 }
.ht-right {
  font-family: var(--ff-display);
  font-size:clamp(38px,5.8vw,78px);
  font-weight:900; line-height:.96; letter-spacing:-2px;
  display:flex; flex-direction:column; gap:.08em; overflow:hidden;
}
.ht-hollow {
  color:transparent;
  -webkit-text-stroke:2px var(--t1);
  display:block;
  opacity:0; transform:translateX(60px);
  animation:slideFromRight .9s var(--ease-hard) .4s forwards;
}
.ht-pink {
  color: var(--pink);
  display:block;
  opacity:0; transform:translateX(60px);
  animation:slideFromRight .9s var(--ease-hard) .52s forwards;
}
@keyframes slideFromLeft  { to{opacity:1;transform:translateX(0)} }
@keyframes slideFromRight { to{opacity:1;transform:translateX(0)} }

.hero-sub {
  font-size:clamp(.88rem,1.1vw,1.02rem);
  font-weight:300; color: var(--t2); line-height:1.82;
  max-width:520px; margin-bottom:2.4rem;
  opacity:0; animation:fadeIn .7s var(--ease) .8s forwards;
}

/* Métricas */
.hero-metrics {
  display:flex; align-items:center; gap:1.4rem;
  margin-bottom:2.4rem; flex-wrap:wrap;
  opacity:0; animation:fadeIn .7s var(--ease) .95s forwards;
}
.hm-item { text-align:center }
.hm-item strong {
  font-family: var(--ff-display);
  font-size:1.55rem; font-weight:900;
  color: var(--t1); letter-spacing:-.04em;
  display:block; line-height:1;
}
.hm-item span {
  font-family: var(--ff-mono);
  font-size:.6rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  color: var(--t3);
}
.hm-sep { width:1px; height:32px; background: var(--border) }

/* CTAs */
.hero-cta {
  display:flex; gap:12px; flex-wrap:wrap;
  opacity:0; animation:fadeIn .7s var(--ease) 1.05s forwards;
}
.btn-dark {
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 30px;
  background: var(--navy); color:rgba(255,255,255,.88);
  border-radius:100px;
  font-family: var(--ff-body);
  font-size:.76rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  border:1.5px solid transparent;
  transition:all .3s var(--ease);
}
.btn-dark:hover {
  background: var(--pink); color:#fff;
  box-shadow: var(--s-pink);
  transform:translateY(-2px);
}
.btn-dark svg { transition:transform .3s }
.btn-dark:hover svg { transform:translateX(3px) }
.btn-line {
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 26px;
  border:1.5px solid var(--border);
  color: var(--t2); border-radius:100px;
  font-family: var(--ff-body);
  font-size:.76rem; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase;
  transition:all .3s;
}
.btn-line:hover { border-color: var(--pink); color: var(--pink); transform:translateY(-2px) }

/* Scroll indicator */
.hero-scroll {
  position:absolute; bottom:2rem; right:2.5rem;
  width:52px;
}
.hs-bar {
  width:100%; height:2px;
  background:rgba(75,80,156,.1);
  border-radius:2px; overflow:hidden;
}
.hs-fill {
  width:30%; height:100%;
  background: var(--pink); border-radius:2px;
  animation:scrollFill 2.5s ease-in-out infinite alternate;
}
@keyframes scrollFill {
  from{width:15%;transform:translateX(0)}
  to{width:50%;transform:translateX(100%)}
}


/* ══════════════════════════════════════════════════════════
   QUÉ ES
══════════════════════════════════════════════════════════ */
.quees-sec { background: var(--off); padding:100px 0 }

.qe-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:72px; align-items:center;
}
.qe-title {
  font-family: var(--ff-display);
  font-size:clamp(26px,2.9vw,42px);
  font-weight:900; line-height:1.08;
  color: var(--t1); margin-bottom:1.4rem; letter-spacing:-.02em;
}
.qe-title em {
  font-style:italic; font-family: var(--ff-body);
  color: var(--pink); font-weight:400;
}
.qe-body {
  font-size:.9rem; font-weight:300;
  color: var(--t2); line-height:1.85; margin-bottom:1rem;
}

/* Stack chips */
.qe-stack {
  display:flex; flex-wrap:wrap; gap:8px; margin-top:1.8rem;
}
.stack-chip {
  font-family: var(--ff-mono);
  font-size:.66rem; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase;
  border-radius:6px; padding:5px 12px;
  border:1.5px solid;
}
.stack-chip.pink   { color:var(--pink);   background:var(--pink-10);   border-color:var(--pink-20);   }
.stack-chip.teal   { color:var(--teal);   background:var(--teal-10);   border-color:var(--teal-20);   }
.stack-chip.indigo { color:var(--indigo); background:var(--indigo-10); border-color:var(--indigo-20); }
.stack-chip.amber  { color:var(--amber-dk); background:var(--amber-10); border-color:var(--amber-20); }

/* Flow Viz */
.flow-viz {
  position:relative; width:100%; max-width:380px;
  margin:0 auto; aspect-ratio:380/340;
}
.fv-svg { position:absolute; inset:0; width:100%; height:100% }
.fv-connector {
  stroke: var(--border);
  stroke-width:1.5; stroke-dasharray:4 3;
  animation:connDash 3s linear infinite;
}
@keyframes connDash { from{stroke-dashoffset:0} to{stroke-dashoffset:-28} }

.fv-node {
  position:absolute; width:52px; height:52px;
  transform:translate(-50%,-50%);
  background: var(--white);
  border:1.5px solid var(--border);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--s-xs);
  transition:all .35s var(--ease); cursor:default;
}
.fv-node::after {
  content:attr(data-label);
  position:absolute; bottom:-22px; left:50%;
  transform:translateX(-50%);
  font-family: var(--ff-mono);
  font-size:.54rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  color: var(--t3); white-space:nowrap;
}
.fv-node:hover {
  border-color: var(--pink);
  box-shadow:0 0 0 6px var(--pink-10), var(--s-sm);
  transform:translate(-50%,-50%) scale(1.12);
}
.fvn-icon svg { width:17px; height:17px; color: var(--pink) }
.fv-n1 { left:24%; top:18% }
.fv-n2 { left:76%; top:18% }
.fv-n3 { left:50%; top:35%; width:60px; height:60px; background:var(--navy); border-color:var(--navy) }
.fv-n3 .fvn-icon svg { color: var(--pink) }
.fv-n3:hover { background:var(--navy); transform:translate(-50%,-50%) scale(1.1) }
.fv-n4 { left:24%; top:59% }
.fv-n5 { left:76%; top:59% }
.fv-n6 { left:50%; top:82% }
.fv-pulse { fill: var(--pink) }


/* ══════════════════════════════════════════════════════════
   PROBLEMAS
══════════════════════════════════════════════════════════ */
.problemas-sec {
  background: var(--white); padding:100px 0;
  position:relative; overflow:hidden;
}
.pb-bg-text {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  font-family: var(--ff-display);
  font-size:clamp(120px,18vw,220px);
  font-weight:900; color:transparent;
  -webkit-text-stroke:1px rgba(75,80,156,.04);
  pointer-events:none; user-select:none; letter-spacing:.1em;
}
.pb-header {
  max-width:var(--max); margin:0 auto; padding:0 2.5rem 3.5rem;
}
.pb-title {
  font-family: var(--ff-display);
  font-size:clamp(26px,3vw,42px);
  font-weight:900; line-height:1.08; color: var(--t1); letter-spacing:-.02em;
}
.pb-list {
  max-width:var(--max); margin:0 auto; padding:0 2.5rem;
  display:flex; flex-direction:column;
}
.pb-item {
  display:grid; grid-template-columns:110px 1fr;
  gap:2rem; padding:2.2rem 0;
  border-bottom:1px solid var(--border-lt);
  position:relative; overflow:hidden;
  transition:background .3s;
}
.pb-item:first-child { border-top:1px solid var(--border-lt) }
.pb-item:hover { background:rgba(230,22,103,.02) }
.pb-num {
  font-family: var(--ff-display);
  font-size:clamp(46px,5.5vw,74px);
  font-weight:900; line-height:1;
  color:rgba(75,80,156,.07);
  letter-spacing:-.04em; align-self:center;
  transition:color .3s;
}
.pb-item:hover .pb-num { color:rgba(230,22,103,.12) }
.pb-content h3 {
  font-family: var(--ff-display);
  font-size:.98rem; letter-spacing:-.01em;
  color: var(--t1); margin-bottom:.5rem; margin-top:.6rem;
  transition:color .3s;
}
.pb-item:hover .pb-content h3 { color: var(--pink) }
.pb-content p {
  font-size:.82rem; font-weight:300;
  color: var(--t2); line-height:1.72; max-width:560px;
}
.pb-bar {
  position:absolute; top:0; left:0;
  width:3px; height:100%;
  background: var(--pink);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .5s var(--ease);
}
.pb-item:hover .pb-bar { transform:scaleY(1) }


/* ══════════════════════════════════════════════════════════
   CAPACIDADES — split lista / panel
══════════════════════════════════════════════════════════ */
.caps-sec { background: var(--off); padding:100px 0 0 }
.caps-title {
  font-family: var(--ff-display);
  font-size:clamp(24px,2.8vw,40px);
  font-weight:900; line-height:1.1; letter-spacing:-.02em;
  color: var(--t1); margin-bottom:3.5rem;
}
.caps-title.center { text-align:center }

.caps-grid {
  display:grid; grid-template-columns:1fr 1fr;
  border-top:1px solid var(--border-lt);
}
.caps-list { border-right:1px solid var(--border-lt) }

.cap-item {
  display:grid; grid-template-columns:48px 1fr 28px;
  gap:1rem; align-items:center;
  padding:1.8rem 2.5rem;
  border-bottom:1px solid var(--border-lt);
  cursor:pointer; transition:all .3s var(--ease);
  position:relative;
}
.cap-item::before {
  content:''; position:absolute; left:0; top:0; bottom:0;
  width:3px; background:var(--pink);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .4s var(--ease);
}
.cap-item:hover, .cap-item.active { background:var(--pink-10) }
.cap-item:hover::before, .cap-item.active::before { transform:scaleY(1) }

.ci-index {
  font-family: var(--ff-display);
  font-size:1.05rem; font-weight:900;
  color:rgba(75,80,156,.14); letter-spacing:-.02em;
  transition:color .3s;
}
.cap-item:hover .ci-index, .cap-item.active .ci-index { color:var(--pink) }
.ci-body h4 {
  font-family: var(--ff-display);
  font-size:.88rem; letter-spacing:-.01em; color:var(--t1);
  margin-bottom:.25rem; transition:color .3s;
}
.cap-item:hover .ci-body h4, .cap-item.active .ci-body h4 { color:var(--pink) }
.ci-body p { font-size:.74rem; font-weight:300; color:var(--t3); line-height:1.6 }
.ci-arrow { font-size:1rem; color:var(--border); transition:all .3s }
.cap-item:hover .ci-arrow, .cap-item.active .ci-arrow {
  color:var(--pink); transform:translateX(4px);
}

/* Panel derecho */
.caps-panel-wrap {
  padding:3rem; position:relative; min-height:360px;
  background: var(--white);
}
.caps-panel {
  position:absolute; inset:3rem;
  opacity:0; pointer-events:none;
  transform:translateY(10px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.caps-panel.active { opacity:1; pointer-events:auto; transform:translateY(0) }

/* Ícono del panel */
.cp-icon {
  width:50px; height:50px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.4rem;
}
.cp-icon.pink   { background:var(--pink-10);   border:1px solid var(--pink-20);   }
.cp-icon.teal   { background:var(--teal-10);   border:1px solid var(--teal-20);   }
.cp-icon.indigo { background:var(--indigo-10); border:1px solid var(--indigo-20); }
.cp-icon.amber  { background:var(--amber-10);  border:1px solid var(--amber-20);  }
.cp-icon.pink   svg { width:22px; height:22px; color:var(--pink)   }
.cp-icon.teal   svg { width:22px; height:22px; color:var(--teal)   }
.cp-icon.indigo svg { width:22px; height:22px; color:var(--indigo) }
.cp-icon.amber  svg { width:22px; height:22px; color:var(--amber-dk) }

.caps-panel h3 {
  font-family: var(--ff-display);
  font-size:1.08rem; letter-spacing:-.01em;
  color:var(--t1); margin-bottom:.7rem;
}
.caps-panel p {
  font-size:.84rem; font-weight:300;
  color:var(--t2); line-height:1.75; margin-bottom:1.4rem;
}
.cp-tags {
  display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1.2rem;
}
.cp-tags span {
  font-family: var(--ff-mono);
  padding:.22rem .7rem;
  border-radius:100px; font-size:.62rem; font-weight:500;
  letter-spacing:.05em;
  background:var(--off); border:1px solid var(--border-lt); color:var(--t3);
  transition:all .25s;
}
.caps-panel.active .cp-tags span {
  border-color:var(--pink-20); color:var(--pink); background:var(--pink-10);
}
.cp-bar-wrap {
  height:3px; background:rgba(75,80,156,.08); border-radius:2px; overflow:hidden;
  margin-bottom:.8rem;
}
.cp-bar-fill {
  height:100%; border-radius:2px; width:0;
  transition:width 1s var(--ease) .3s;
}
.cp-bar-fill.pink   { background:linear-gradient(90deg,var(--pink-20),var(--pink)) }
.cp-bar-fill.teal   { background:linear-gradient(90deg,var(--teal-10),var(--teal)) }
.cp-bar-fill.indigo { background:linear-gradient(90deg,var(--indigo-10),var(--indigo)) }
.cp-bar-fill.amber  { background:linear-gradient(90deg,var(--amber-10),var(--amber-dk)) }
.caps-panel.active .cp-bar-fill { width:var(--w) }

.cp-kpi {
  font-family: var(--ff-mono);
  font-size:.68rem; color:var(--pink);
  background:var(--pink-10); border:1px solid var(--pink-20);
  border-radius:8px; padding:7px 12px;
}


/* ══════════════════════════════════════════════════════════
   PROCESO — 5 pasos con nodos de color
══════════════════════════════════════════════════════════ */
.proceso-sec { background:var(--white); padding:100px 0 80px }
.proc-title {
  font-family: var(--ff-display);
  font-size:clamp(24px,2.8vw,40px);
  font-weight:900; line-height:1.1; letter-spacing:-.02em;
  color:var(--t1); margin-bottom:4rem;
}
.proc-title.center { text-align:center }

/* Track horizontal — 5 columnas */
.proc-track {
  max-width:var(--max); margin:0 auto; padding:0 2.5rem;
  display:grid; grid-template-columns:repeat(5,1fr);
  position:relative;
}
.proc-track::before {
  content:''; position:absolute;
  top:34px; left:calc(2.5rem + 34px);
  right:calc(2.5rem + 34px);
  height:2px;
  background:linear-gradient(90deg, var(--pink), var(--teal), var(--indigo), var(--amber-dk), var(--pink));
  opacity:.18; z-index:0;
}

.proc-step {
  display:flex; flex-direction:column;
  align-items:center; text-align:center;
  padding:0 .6rem; position:relative; z-index:1;
}

.ps-bubble {
  width:68px; height:68px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.6rem; flex-shrink:0;
  border:2px solid; position:relative; z-index:2;
  background:var(--white);
  transition:all .4s var(--ease);
}
/* Color per step */
.ps-pink   { border-color:var(--pink-20);   box-shadow:0 0 0 6px var(--pink-10)   }
.ps-teal   { border-color:var(--teal-20);   box-shadow:0 0 0 6px var(--teal-10)   }
.ps-indigo { border-color:var(--indigo-20); box-shadow:0 0 0 6px var(--indigo-10) }
.ps-amber  { border-color:var(--amber-20);  box-shadow:0 0 0 6px var(--amber-10)  }
.ps-pink   svg { color:var(--pink)   }
.ps-teal   svg { color:var(--teal)   }
.ps-indigo svg { color:var(--indigo) }
.ps-amber  svg { color:var(--amber-dk) }

.proc-step:hover .ps-bubble { transform:scale(1.1) }
.proc-step:hover .ps-pink   { background:var(--pink);   border-color:var(--pink);   box-shadow:var(--s-pink)   }
.proc-step:hover .ps-teal   { background:var(--teal);   border-color:var(--teal);   box-shadow:var(--s-teal)   }
.proc-step:hover .ps-indigo { background:var(--indigo); border-color:var(--indigo); box-shadow:var(--s-indigo) }
.proc-step:hover .ps-amber  { background:var(--amber-dk); border-color:var(--amber-dk); }
.proc-step:hover .ps-pink   svg { color:#fff }
.proc-step:hover .ps-teal   svg { color:#fff }
.proc-step:hover .ps-indigo svg { color:#fff }
.proc-step:hover .ps-amber  svg { color:#fff }

.ps-num {
  display:block; font-family: var(--ff-mono);
  font-size:.58rem; font-weight:500;
  letter-spacing:.16em; margin-bottom:.35rem;
}
.ps-num-pink   { color:var(--pink)   }
.ps-num-teal   { color:var(--teal)   }
.ps-num-indigo { color:var(--indigo) }
.ps-num-amber  { color:var(--amber-dk) }

.ps-content h4 {
  font-family: var(--ff-display);
  font-size:.88rem; letter-spacing:-.01em; color:var(--t1);
  margin-bottom:.4rem; transition:color .3s;
}
.proc-step:hover .ps-content h4 { color:var(--pink) }
.ps-content p {
  font-size:.73rem; font-weight:300;
  color:var(--t2); line-height:1.6;
}

/* Principio de mejora continua */
.proc-principle {
  display:flex; align-items:center; gap:12px;
  margin-top:3rem;
  background:var(--pink-10);
  border:1px solid var(--pink-20);
  border-radius:10px; padding:14px 22px;
  font-family: var(--ff-mono);
  font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--pink);
  width:fit-content; max-width:var(--max); margin-left:auto; margin-right:auto;
}
.pp-icon { font-size:1.1rem; animation:spinSlow 4s linear infinite }
@keyframes spinSlow { to{transform:rotate(360deg)} }


/* ══════════════════════════════════════════════════════════
   KPIs — FONDO CLARO con tarjetas de color de acento
══════════════════════════════════════════════════════════ */
.kpis-sec { background:var(--off-2); padding:96px 0 }
.kpis-title {
  font-family: var(--ff-display);
  font-size:clamp(24px,2.8vw,40px);
  font-weight:900; line-height:1.1; letter-spacing:-.02em;
  color:var(--t1); margin-bottom:3.5rem;
}
.kpis-title.center { text-align:center }

.kpis-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:20px;
}

.kpi-card {
  background:var(--white);
  border:1.5px solid var(--border-lt);
  border-radius:20px; padding:2.2rem 1.8rem;
  display:flex; flex-direction:column; gap:1rem;
  transition:all .35s var(--ease);
  position:relative; overflow:hidden;
}
.kpi-card::before {
  content:''; position:absolute;
  top:0; left:0; right:0; height:3px;
}
.kc-pink::before   { background:var(--pink)   }
.kc-teal::before   { background:var(--teal)   }
.kc-indigo::before { background:var(--indigo) }
.kc-amber::before  { background:var(--amber-dk) }

.kpi-card:hover { transform:translateY(-5px); box-shadow:var(--s-md) }
.kc-pink:hover   { border-color:var(--pink-20);   box-shadow:var(--s-pink)   }
.kc-teal:hover   { border-color:var(--teal-20);   box-shadow:var(--s-teal)   }
.kc-indigo:hover { border-color:var(--indigo-20); box-shadow:var(--s-indigo) }

.kc-icon {
  width:40px; height:40px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
}
.kc-pink   .kc-icon { background:var(--pink-10);   color:var(--pink)   }
.kc-teal   .kc-icon { background:var(--teal-10);   color:var(--teal)   }
.kc-indigo .kc-icon { background:var(--indigo-10); color:var(--indigo) }
.kc-amber  .kc-icon { background:var(--amber-10);  color:var(--amber-dk) }
.kc-icon svg { width:18px; height:18px }

.kc-val {
  font-family: var(--ff-display);
  font-size:clamp(34px,3.5vw,52px);
  font-weight:900; letter-spacing:-1.5px; line-height:1;
  color:var(--t1);
}
.kc-label {
  font-family: var(--ff-mono);
  font-size:.66rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--t3); line-height:1.4;
}
.kc-track {
  height:3px; background:var(--off-2);
  border-radius:2px; overflow:hidden;
}
.kc-fill {
  height:100%; border-radius:2px; width:0;
  transition:width 1.2s var(--ease);
}
.kc-pink   .kc-fill { background:linear-gradient(90deg,var(--pink-20),var(--pink)) }
.kc-teal   .kc-fill { background:linear-gradient(90deg,var(--teal-10),var(--teal)) }
.kc-indigo .kc-fill { background:linear-gradient(90deg,var(--indigo-10),var(--indigo)) }
.kc-amber  .kc-fill { background:linear-gradient(90deg,var(--amber-10),var(--amber-dk)) }
.kc-note {
  font-size:.73rem; font-weight:300; color:var(--t3); line-height:1.55;
}


/* ══════════════════════════════════════════════════════════
   MODALIDADES
══════════════════════════════════════════════════════════ */
.modal-sec { background:var(--white); padding:96px 0 }
.modal-title {
  font-family: var(--ff-display);
  font-size:clamp(24px,2.8vw,40px);
  font-weight:900; line-height:1.1; letter-spacing:-.02em;
  color:var(--t1); margin-bottom:3.5rem;
}
.modal-title.center { text-align:center }

.modal-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.modal-card {
  position:relative;
  background:var(--off);
  border:1.5px solid var(--border-lt);
  border-radius:20px; padding:32px 28px;
  transition:all .35s var(--ease);
}
.modal-card:hover { box-shadow:var(--s-md); transform:translateY(-4px) }
.modal-featured {
  background:var(--white);
  border-color:var(--pink-20);
  box-shadow:var(--s-pink);
}
.modal-featured:hover { box-shadow:0 16px 56px rgba(230,22,103,.26) }
.modal-badge {
  position:absolute; top:-13px; left:50%;
  transform:translateX(-50%);
  background:var(--pink); color:#fff;
  font-family: var(--ff-mono); font-size:.65rem;
  letter-spacing:.12em; text-transform:uppercase;
  padding:4px 16px; border-radius:100px; white-space:nowrap;
}
.modal-num {
  font-family: var(--ff-mono); font-size:.7rem;
  color:var(--t3); margin-bottom:10px;
}
.modal-card h3 {
  font-family: var(--ff-display);
  font-size:1.1rem; letter-spacing:-.01em; font-weight:900;
  color:var(--t1); margin-bottom:12px;
}
.modal-card p { font-size:.84rem; font-weight:300; color:var(--t2); line-height:1.7; margin-bottom:18px }
.modal-list { list-style:none; display:flex; flex-direction:column; gap:7px; margin-bottom:20px }
.modal-list li {
  font-size:.8rem; color:var(--t2); padding-left:14px;
  position:relative; line-height:1.5;
}
.modal-list li::before {
  content:'·'; position:absolute; left:0; color:var(--pink); font-weight:900;
}
.modal-ideal {
  font-family: var(--ff-mono); font-size:.66rem;
  color:var(--pink); background:var(--pink-10);
  border:1px solid var(--pink-20); border-radius:6px;
  padding:4px 10px; display:inline-block;
}


/* ══════════════════════════════════════════════════════════
   DIFERENCIAL
══════════════════════════════════════════════════════════ */
.dif-sec { background:var(--off); padding:96px 0 }
.dif-title {
  font-family: var(--ff-display);
  font-size:clamp(24px,2.8vw,40px);
  font-weight:900; line-height:1.1; letter-spacing:-.02em;
  color:var(--t1); margin-bottom:3.5rem;
}
.dif-title.center { text-align:center }

.dif-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px }
.dif-item {
  background:var(--white);
  border:1.5px solid var(--border-lt);
  border-radius:20px; padding:2.4rem 2rem;
  position:relative; overflow:hidden;
  transition:all .35s var(--ease);
}
.dif-item:hover { box-shadow:var(--s-md); transform:translateY(-4px) }

.di-accent {
  position:absolute; top:0; left:0; right:0; height:3px;
  transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease);
}
.dif-item:hover .di-accent { transform:scaleX(1) }
.di-accent.pink   { background:var(--pink)   }
.di-accent.teal   { background:var(--teal)   }
.di-accent.indigo { background:var(--indigo) }

.di-icon {
  width:46px; height:46px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.2rem;
}
.di-icon.teal   { background:var(--teal-10);   border:1px solid var(--teal-20);   color:var(--teal)   }
.di-icon.pink   { background:var(--pink-10);   border:1px solid var(--pink-20);   color:var(--pink)   }
.di-icon.indigo { background:var(--indigo-10); border:1px solid var(--indigo-20); color:var(--indigo) }
.di-icon svg { width:20px; height:20px }

.dif-item h4 {
  font-family: var(--ff-display);
  font-size:.95rem; letter-spacing:-.01em; font-weight:900;
  color:var(--t1); margin-bottom:.65rem; transition:color .3s;
}
.dif-item:hover h4 { color:var(--pink) }
.dif-item p {
  font-size:.8rem; font-weight:300; color:var(--t2); line-height:1.7; margin-bottom:1rem;
}
.di-tags { display:flex; flex-wrap:wrap; gap:6px }
.di-tags span {
  font-family: var(--ff-mono); font-size:.6rem;
  padding:.2rem .55rem; border-radius:5px;
  background:var(--off); border:1px solid var(--border-lt); color:var(--t3);
  transition:all .25s;
}
.dif-item:hover .di-tags span {
  background:var(--pink-10); border-color:var(--pink-20); color:var(--pink);
}


/* ══════════════════════════════════════════════════════════
   CERTIFICACIONES
══════════════════════════════════════════════════════════ */
.certs-sec { background:var(--white); padding:96px 0 }
.certs-title {
  font-family: var(--ff-display);
  font-size:clamp(24px,2.8vw,38px);
  font-weight:900; line-height:1.1; letter-spacing:-.02em;
  color:var(--t1); margin-bottom:3.5rem;
}
.certs-title.center { text-align:center }

.certs-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:20px; margin-bottom:28px;
}
.cert-card {
  display:flex; align-items:center; gap:16px;
  background:var(--off);
  border:1.5px solid var(--border-lt);
  border-radius:16px; padding:20px 18px;
  transition:all .3s var(--ease);
}
.cert-card:hover { box-shadow:var(--s-sm); transform:translateY(-3px) }

.cert-badge {
  width:52px; height:52px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--ff-display); font-size:.68rem;
  font-weight:900; text-align:center; line-height:1.2;
  color:#fff; flex-shrink:0;
}
.cert-badge.pink   { background:var(--pink)   }
.cert-badge.teal   { background:var(--teal)   }
.cert-badge.indigo { background:var(--indigo) }
.cert-badge.amber  { background:var(--amber-dk) }

.cert-info h4 {
  font-family: var(--ff-display); font-size:.84rem;
  font-weight:900; margin-bottom:3px; letter-spacing:-.01em;
}
.cert-info p { font-size:.72rem; color:var(--t3); line-height:1.4; margin-bottom:5px }
.cert-code {
  font-family: var(--ff-mono); font-size:.6rem;
  color:var(--pink); background:var(--pink-10);
  border:1px solid var(--pink-20); border-radius:4px; padding:2px 7px;
}

.frameworks-bar {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:16px 22px; background:var(--off);
  border:1.5px solid var(--border-lt); border-radius:12px;
}
.fw-label {
  font-family: var(--ff-mono); font-size:.7rem;
  color:var(--t3); letter-spacing:.08em; text-transform:uppercase;
}
.fw-tag {
  font-family: var(--ff-mono); font-size:.66rem;
  color:var(--indigo); background:var(--indigo-10);
  border:1px solid var(--indigo-20); border-radius:6px; padding:3px 10px;
}


/* ══════════════════════════════════════════════════════════
   CTA — fondo suave claro con canvas de partículas
══════════════════════════════════════════════════════════ */
.cta-sec {
  position:relative; padding:100px 0;
  background:var(--off); overflow:hidden;
}
.cta-canvas {
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; opacity:.3;
}
.cta-inner {
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr 1fr;
  gap:5rem; align-items:center;
}
.cta-pre {
  font-family: var(--ff-mono); font-size:.68rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--pink); display:block; margin-bottom:1rem;
}
.cta-title {
  font-family: var(--ff-display);
  font-size:clamp(30px,4vw,54px);
  font-weight:900; line-height:.98; letter-spacing:-.03em;
  color:var(--t1);
}
.cta-title em { font-style:normal; color:var(--pink) }

.cta-body {
  font-size:.88rem; font-weight:300;
  color:var(--t2); line-height:1.82; margin-bottom:2rem;
}
.cta-btns { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:2.5rem }

.cta-btn-main {
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 32px;
  background:var(--pink); color:#fff;
  border-radius:100px;
  font-family: var(--ff-body); font-size:.76rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  transition:all .35s var(--ease);
  box-shadow:var(--s-pink);
}
.cta-btn-main:hover { background:#c2105a; transform:translateY(-2px); box-shadow:0 12px 40px rgba(230,22,103,.3) }
.cta-btn-main svg { transition:transform .3s }
.cta-btn-main:hover svg { transform:translateX(3px) }

.cta-btn-sec {
  display:inline-flex; align-items:center;
  padding:12px 26px;
  border:1.5px solid var(--border);
  color:var(--t2); border-radius:100px;
  font-family: var(--ff-body); font-size:.76rem; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase;
  transition:all .3s;
}
.cta-btn-sec:hover { border-color:var(--pink); color:var(--pink); transform:translateY(-2px) }

/* Proof strip en CTA */
.cta-proof {
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
.cp-item { text-align:center }
.cpv {
  display:block; font-family: var(--ff-display);
  font-size:1.6rem; font-weight:900; color:var(--t1); line-height:1;
}
.cpl {
  font-family: var(--ff-mono); font-size:.62rem;
  color:var(--t3); text-transform:uppercase; letter-spacing:.08em;
}
.cp-sep { width:1px; height:36px; background:var(--border) }


/* ══════════════════════════════════════════════════════════
   RESPONSIVE — 1280px (XL)
══════════════════════════════════════════════════════════ */
@media(max-width:1280px){
  .kpis-grid { grid-template-columns:repeat(4,1fr) }
  .certs-grid { grid-template-columns:repeat(4,1fr) }
  .proc-track { padding:0 1.5rem }
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE — 1100px (LG)
══════════════════════════════════════════════════════════ */
@media(max-width:1100px){
  .wrap { padding:0 2rem }
  .pb-header { padding:0 2rem 3rem }
  .pb-list    { padding:0 2rem }
  .proc-track { padding:0 2rem; grid-template-columns:repeat(3,1fr); row-gap:3rem }
  .proc-track::before { display:none }
  .kpis-grid  { grid-template-columns:repeat(2,1fr) }
  .certs-grid { grid-template-columns:repeat(2,1fr) }
  .dif-grid   { grid-template-columns:repeat(2,1fr) }
  .cta-inner  { gap:3.5rem }
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE — 1024px (MD-LG)
══════════════════════════════════════════════════════════ */
@media(max-width:1024px){
  /* Qué es */
  .qe-grid { grid-template-columns:1fr; gap:3rem }
  .flow-viz { max-width:340px }

  /* Capacidades */
  .caps-grid { grid-template-columns:1fr }
  .caps-list { border-right:none; border-bottom:1px solid var(--border-lt) }
  .caps-panel-wrap { min-height:auto; padding:2rem; background:var(--white) }
  .caps-panel { position:relative; inset:0; opacity:1; pointer-events:auto; transform:none }
  .caps-panel { display:none }
  .caps-panel.active { display:block }

  /* Proceso */
  .proc-track { grid-template-columns:repeat(3,1fr); row-gap:3rem }
  .proc-track::before { display:none }

  /* Modalidades */
  .modal-grid { grid-template-columns:repeat(2,1fr) }

  /* CTA */
  .cta-inner { grid-template-columns:1fr; gap:3rem }
  .cta-proof { justify-content:flex-start }
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE — 900px (MD)
══════════════════════════════════════════════════════════ */
@media(max-width:900px){
  /* Secciones */
  .quees-sec,
  .problemas-sec,
  .caps-sec,
  .proceso-sec,
  .kpis-sec,
  .modal-sec,
  .dif-sec,
  .certs-sec,
  .cta-sec { padding:80px 0 }

  /* Hero */
  .hero-inner { padding:96px 0 80px }
  .hero-badge { margin-bottom:2rem }

  /* Problemas */
  .pb-item { gap:1.4rem }
  .pb-num  { font-size:clamp(38px,5vw,56px) }

  /* Capacidades lista */
  .cap-item { padding:1.5rem 1.8rem }

  /* KPIs */
  .kpis-grid { grid-template-columns:repeat(2,1fr) }

  /* Diferencial */
  .dif-grid { grid-template-columns:1fr }

  /* Certs */
  .certs-grid { grid-template-columns:repeat(2,1fr) }

  /* CTA proof */
  .cta-proof { gap:14px }
  .cp-sep    { height:28px }
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE — 768px (SM-MD)
══════════════════════════════════════════════════════════ */
@media(max-width:768px){
   .caps-sec { display: contents;}
  .wrap { padding:0 1.5rem }
  .pb-header { padding:0 1.5rem 2.5rem }
  .pb-list    { padding:0 1.5rem }
  .proc-track { padding:0 1.5rem }

  /* Secciones */
  .quees-sec,
  .problemas-sec,
  .caps-sec,
  .proceso-sec,
  .kpis-sec,
  .modal-sec,
  .dif-sec,
  .certs-sec,
  .cta-sec { padding:68px 0;
  display: contents; }

  /* Hero — título partido a columna */
  .hero { padding:0 1.5rem; min-height:auto }
  .hero-inner { padding:80px 0 64px }
  .hero-title-wrap { flex-direction:column; gap:1rem; align-items:flex-start }
  .ht-left  { font-size:clamp(34px,8vw,54px); letter-spacing:-1.5px }
  .ht-right { font-size:clamp(34px,8vw,54px); letter-spacing:-1.5px }
  .ht-divider { flex-direction:row; gap:.5rem }
  .htd-line { width:22px; height:1px; background:linear-gradient(to right,transparent,var(--pink)) !important }
  .htd-line:last-child { background:linear-gradient(to left,transparent,var(--pink)) !important }
  .hero-sub { font-size:.9rem; max-width:100% }
  .hero-metrics { gap:1rem }
  .hm-sep { height:22px }
  .hero-scroll { display:none }

  /* Problemas */
  .pb-item { grid-template-columns:70px 1fr; gap:1.2rem; padding:1.8rem 0 }
  .pb-num  { font-size:clamp(32px,6vw,48px) }

  /* Proceso */
  .proc-track { grid-template-columns:repeat(2,1fr); row-gap:2.5rem }
  .ps-bubble  { width:58px; height:58px }

  /* KPIs */
  .kpis-grid  { grid-template-columns:1fr 1fr }
  .kpi-card   { padding:1.8rem 1.4rem }

  /* Modalidades */
  .modal-grid { grid-template-columns:1fr }
  .modal-card { padding:28px 22px }

  /* Diferencial */
  .dif-grid  { grid-template-columns:1fr }
  .dif-item  { padding:2rem 1.6rem }

  /* Certs */
  .certs-grid { grid-template-columns:1fr 1fr }
  .cert-card  { padding:16px 14px; gap:12px }

  /* CTA */
  .cta-sec   { padding:72px 0 }
  .cta-inner { gap:2.5rem }
  .cta-btns  { flex-wrap:wrap }
  .cta-proof { gap:12px }
  .cpv       { font-size:1.35rem }
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE — 600px (SM)
══════════════════════════════════════════════════════════ */
@media(max-width:600px){
   .caps-sec { display: contents;}
  .wrap { padding:0 1.25rem }
  .pb-header { padding:0 1.25rem 2rem }
  .pb-list    { padding:0 1.25rem }
  .proc-track { padding:0 1.25rem; grid-template-columns:1fr; row-gap:2rem }

  /* Secciones */
  .quees-sec,
  .problemas-sec,
  .caps-sec,
  .proceso-sec,
  .kpis-sec,
  .modal-sec,
  .dif-sec,
  .certs-sec,
  .cta-sec { padding:56px 0 }

  /* Hero */
  .hero-inner { padding:64px 0 52px }
  .ht-left  { font-size:clamp(28px,9vw,44px); letter-spacing:-1px }
  .ht-right { font-size:clamp(28px,9vw,44px); letter-spacing:-1px }
  .hero-badge { font-size:.62rem; padding:4px 12px; margin-bottom:1.6rem }
  .hero-sub   { font-size:.86rem; margin-bottom:2rem }
  .hero-metrics { gap:.8rem; flex-wrap:wrap }
  .hm-item strong { font-size:1.3rem }
  .hm-item span   { font-size:.55rem }
  .hm-sep { height:18px }
  .hero-cta { flex-direction:column; gap:10px }
  .btn-dark,
  .btn-line { width:100%; justify-content:center; padding:12px 22px }

  /* Problemas */
  .pb-item { grid-template-columns:1fr; gap:.5rem; padding:1.5rem 0 }
  .pb-num  { font-size:3rem; align-self:auto; margin-bottom:-.4rem; line-height:1 }

  /* Capacidades */
  .cap-item { padding:1.2rem 1.4rem; grid-template-columns:40px 1fr 24px }
  .ci-index { font-size:.9rem }

  /* Proceso */
  .ps-bubble { width:52px; height:52px }
  .ps-content h4 { font-size:.82rem }
  .proc-principle { font-size:.65rem; padding:12px 16px; text-align:center; flex-wrap:wrap; justify-content:center }

  /* KPIs */
  .kpis-grid { grid-template-columns:1fr }
  .kpi-card  { padding:1.6rem 1.2rem }
  .kc-val    { font-size:clamp(28px,8vw,42px) }

  /* Modalidades */
  .modal-card { padding:24px 18px }

  /* Diferencial */
  .dif-item  { padding:1.8rem 1.4rem }

  /* Certs */
  .certs-grid { grid-template-columns:1fr }
  .cert-badge { width:44px; height:44px; border-radius:10px }

  /* CTA */
  .cta-sec    { padding:56px 0 }
  .cta-btns   { flex-direction:column }
  .cta-btn-main,
  .cta-btn-sec { width:100%; justify-content:center }
  .cta-proof  { gap:10px }
  .cp-sep     { height:22px }
  .cpv        { font-size:1.2rem }
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE — 480px (XS-SM)
══════════════════════════════════════════════════════════ */
@media(max-width:480px){
   .caps-sec { display: contents;}
  .wrap { padding:0 1rem }
  .pb-header { padding:0 1rem 1.8rem }
  .pb-list    { padding:0 1rem }
  .proc-track { padding:0 1rem }

  /* Hero */
  .hero { padding:0 1rem }
  .hero-inner { padding:56px 0 44px }
  .ht-left  { font-size:clamp(26px,8.5vw,38px); letter-spacing:-.8px }
  .ht-right { font-size:clamp(26px,8.5vw,38px); letter-spacing:-.8px }
  .ht-hollow { -webkit-text-stroke:1.5px var(--t1) }

  /* Flow viz */
  .flow-viz { max-width:260px }

  /* Problemas */
  .pb-num  { font-size:2.4rem }
  .pb-content h3 { font-size:.9rem; margin-top:.4rem }

  /* Proceso */
  .proc-step { max-width:320px; margin:0 auto }
  .ps-bubble { width:48px; height:48px }
  .ps-content p { font-size:.7rem }

  /* KPIs */
  .kpi-card  { padding:1.4rem 1rem; border-radius:16px }

  /* Modalidades */
  .modal-card    { padding:20px 16px }
  .modal-badge   { font-size:.6rem; padding:3px 12px }

  /* Diferencial */
  .dif-item      { padding:1.6rem 1.2rem; border-radius:16px }

  /* Certs */
  .cert-card     { border-radius:14px }
  .frameworks-bar { padding:12px 16px; gap:8px }
  .fw-tag        { font-size:.6rem }

  /* CTA */
  .cta-title     { font-size:clamp(26px,7vw,40px) }
  .cta-proof     { flex-wrap:wrap; gap:8px }
  .cp-sep        { display:none }
  .cp-item       { flex:1; min-width:80px }
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE — 380px (XS — target 360×740)
══════════════════════════════════════════════════════════ */
@media(max-width:380px){
  .wrap { padding:0 .9rem }
  .pb-header { padding:0 .9rem 1.5rem }
  .pb-list    { padding:0 .9rem }
  .proc-track { padding:0 .9rem }
  .caps-sec { display: contents;}

  /* Secciones */
  .quees-sec,
  .problemas-sec,
  .caps-sec,
  .proceso-sec,
  .kpis-sec,
  .modal-sec,
  .dif-sec,
  .certs-sec,
  .cta-sec { padding:44px 0 }

  /* Hero — sin overflow */
  .hero { padding:0 .9rem; min-height:auto; overflow:visible }
  .hero-inner { padding:48px 0 36px }
  .hero-badge { font-size:.58rem; padding:3px 10px; margin-bottom:1.2rem; gap:6px }
  .hb-pip     { width:5px; height:5px }

  .ht-left  { font-size:clamp(22px,7.5vw,30px); letter-spacing:-.5px }
  .ht-right { font-size:clamp(22px,7.5vw,30px); letter-spacing:-.5px }
  .ht-hollow { -webkit-text-stroke:1px var(--t1) }
  .hero-title-wrap { gap:.7rem; margin-bottom:1.4rem }

  .hero-sub {
    font-size:.8rem; line-height:1.65;
    margin-bottom:1.6rem; max-width:100%;
    word-break:break-word;
  }

  .hero-metrics { gap:.6rem; margin-bottom:1.6rem }
  .hm-item strong { font-size:1.1rem }
  .hm-item span   { font-size:.5rem }
  .hm-sep { height:14px }

  .hero-cta { gap:8px; margin-bottom:0 }
  .btn-dark,
  .btn-line { padding:10px 16px; font-size:.7rem }

  /* Flow viz */
  .flow-viz { max-width:220px }
  .fv-node::after { font-size:.46rem }

  /* Problemas */
  .pb-num  { font-size:2rem }
  .pb-content h3 { font-size:.85rem }
  .pb-content p  { font-size:.78rem }

  /* Capacidades */
  .cap-item { padding:1rem 1rem; gap:.7rem; grid-template-columns:36px 1fr 20px }
  .ci-index { font-size:.82rem }
  .ci-body h4 { font-size:.82rem }
  .ci-body p  { font-size:.7rem }

  /* Caps panel */
  .caps-panel-wrap { padding:1.4rem }
  .caps-panel h3   { font-size:.95rem }
  .caps-panel p    { font-size:.78rem }

  /* Proceso */
  .ps-bubble    { width:44px; height:44px; margin-bottom:1.2rem }
  .ps-content h4 { font-size:.8rem }
  .ps-content p  { font-size:.68rem }
  .proc-principle { font-size:.6rem; padding:10px 14px }

  /* KPIs */
  .kpi-card  { padding:1.2rem .9rem; border-radius:14px }
  .kc-val    { font-size:clamp(24px,8vw,36px) }
  .kc-label  { font-size:.6rem }
  .kc-note   { font-size:.68rem }

  /* Modalidades */
  .modal-card { padding:18px 14px; border-radius:16px }
  .modal-card h3 { font-size:.95rem }
  .modal-card p  { font-size:.78rem }
  .modal-list li { font-size:.75rem }

  /* Diferencial */
  .dif-item  { padding:1.4rem 1rem; border-radius:14px }
  .dif-item h4 { font-size:.88rem }
  .dif-item p  { font-size:.75rem }

  /* Certs */
  .cert-badge { width:40px; height:40px; font-size:.6rem }
  .cert-info h4 { font-size:.78rem }
  .cert-info p  { font-size:.66rem }

  /* CTA */
  .cta-sec   { padding:44px 0 }
  .cta-title { font-size:clamp(22px,7vw,32px); letter-spacing:-.02em }
  .cta-body  { font-size:.82rem }
  .cta-btn-main,
  .cta-btn-sec { padding:11px 18px; font-size:.7rem }
  .cpv  { font-size:1.1rem }
  .cpl  { font-size:.56rem }
}