/* ═══════════════════════════════════════════════════════════════════
   home.css · Yeapdata® · v8.0
   Paleta: #E61667 pk · #6DC0AA tl · #E8A800 am · #4B509C in
   Tipografía: Poppins (manual de marca)
   Base blanca · Dark solo en modelo cards + cta
   ═══════════════════════════════════════════════════════════════════ */

/* ── VARIABLES ──────────────────────────────────────────────────── */
:root {
  --pk:      #E61667;
  --pk06:    rgba(230,22,103,.06);
  --pk12:    rgba(230,22,103,.12);
  --pk20:    rgba(230,22,103,.20);
  --pk-glow: rgba(230,22,103,.38);
  --tl:      #6DC0AA;
  --tl06:    rgba(109,192,170,.06);
  --tl12:    rgba(109,192,170,.12);
  --am:      #E8A800;
  --am12:    rgba(232,168,0,.12);
  --in:      #4B509C;
  --in12:    rgba(75,80,156,.12);
  --ink:     #0B0A16;
  --ink2:    #100F22;
  --ink3:    #181730;
  --white:   #FFFFFF;
  --paper:   #F7F7FA;
  --warm:    #FAF9F6;
  --t1:      #0B0A16;
  --t2:      #52516A;
  --t3:      #8C8AA6;
  --brd:     rgba(11,10,22,.08);
  --brd2:    rgba(11,10,22,.13);
  --i-inv:   rgba(255,255,255,.9);
  --i-dim:   rgba(255,255,255,.5);
  --i-faint: rgba(255,255,255,.16);
  --bi:      rgba(255,255,255,.07);
  --bi2:     rgba(255,255,255,.14);
  --ease:    cubic-bezier(.22,1,.36,1);
  --hard:    cubic-bezier(.76,0,.24,1);
  --spring:  cubic-bezier(.34,1.56,.64,1);
  --max:     1220px;
}

/* ── RESET ──────────────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth }
body {
  font-family: 'Poppins', sans-serif;
  background: var(--white);
  color: var(--t1);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
::selection { background:var(--pk); color:#fff }
a { text-decoration:none; color:inherit }
svg, canvas { display:block }

/* ── UTILERÍAS ──────────────────────────────────────────────────── */
.eyebrow {
  display: inline-block;
  font-size: .48rem; font-weight: 800;
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--pk); margin-bottom: .9rem;
}
.eyebrow--inv   { color: rgba(230,22,103,.7) }
.eyebrow--center { display:block; text-align:center }

[data-r] { opacity:0; transition:opacity .95s var(--ease), transform .95s var(--ease) }
[data-r="up"]    { transform:translateY(30px) }
[data-r="left"]  { transform:translateX(-26px) }
[data-r="right"] { transform:translateX(26px) }
[data-r].r-in    { opacity:1; transform:none }


/* ═══════════════════════════════════════════════════════════════════
   §01  HERO  — nodos a la derecha, texto a la izquierda
   ═══════════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto;   /* stage | services-strip */
  background: #fff;
  overflow: hidden;
}

/* Node canvas — right 58 % */
#nodeCanvas {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 58%;
  pointer-events: none;
  z-index: 0;
}

/* Gradient mask: dissolves canvas into white on the left */
.node-mask {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 58%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(255,255,255,1)    0%,
    rgba(255,255,255,.88) 22%,
    rgba(255,255,255,.38) 52%,
    rgba(255,255,255,.04) 82%,
    rgba(255,255,255,0)  100%
  );
}

/* Subtle radial tint on left side for depth */
.left-texture {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 50%;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 0% 50%, rgba(230,22,103,.04) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 18% 18%, rgba(75,80,156,.03) 0%, transparent 60%);
}

/* ── STAGE ── */
.stage {
  position: relative; z-index: 10;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 0 56px;
  min-height: 0;
}

/* ── LEFT COLUMN ── */
.left {
  display: flex; flex-direction: column;
  justify-content: center;
  padding: 72px 40px 52px 150px;
}

/* Eyebrow */
.eyebrow-pill {
  font-size: .42rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--pk); padding: 4px 13px;
  background: rgba(230,22,103,.07);
  border: 1px solid rgba(230,22,103,.2);
  border-radius: 100px;
}
.eyebrow-dash { width: 22px; height: 1.5px; background: rgba(230,22,103,.28) }
.eyebrow-sub {
  font-size: .4rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--t3);
}
.hero .left .eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 1.8rem;
  opacity: 0; animation: up .5s var(--ease) .3s forwards;
}

/* Headline */
.headline { margin-bottom: 1.6rem }
.h-row {
  display: block; overflow: hidden;
  opacity: 0; transform: translateY(100%);
  animation: rowReveal 1s cubic-bezier(.77,0,.175,1) forwards;
}
.h-row:nth-child(1) { animation-delay: .38s }
.h-row:nth-child(2) { animation-delay: .54s }
@keyframes rowReveal { to { opacity:1; transform:translateY(0) } }

.h-word {
  font-size: clamp(28px, 3.6vw, 54px);
  font-weight: 900; line-height: 1.05;
  letter-spacing: -.035em; display: inline;
}
.hw-dark  { color: var(--t1) }
.hw-pk    { color: var(--pk) }
.hw-ghost {
  font-weight: 300; font-style: italic;
  color: var(--t3);
  font-size: clamp(20px, 2.4vw, 38px);
  letter-spacing: -.01em;
}
.hw-bluec { color: #0a1628 !important }
.hw-tl { color: var(--tl) }

.h-rule {
  display: block; height: 2.5px; width: 0;
  background: linear-gradient(90deg, var(--pk), var(--tl));
  border-radius: 2px; margin-top: .85rem;
  animation: ruleW .9s var(--ease) 1.1s forwards;
}
@keyframes ruleW { to { width: 110px } }

/* Body copy */
.body-copy {
  font-size: clamp(.78rem, .9vw, .92rem);
  font-weight: 300; line-height: 1.88;
  color: var(--t3); max-width: 440px;
  margin-bottom: 1.8rem;
  opacity: 0; animation: up .8s var(--ease) .9s forwards;
}
.body-copy strong { color: var(--t2); font-weight: 600 }

/* Actions */
.actions {
  display: flex; align-items: center;
  gap: 10px; margin-bottom: 1.8rem; flex-wrap: wrap;
  opacity: 0; animation: up .7s var(--ease) 1.05s forwards;
}
.btn-main {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 28px; border-radius: 8px;
  background: var(--pk); color: #fff;
  font-size: .64rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  position: relative; overflow: hidden;
  transition: transform .32s var(--spring), box-shadow .32s;
  box-shadow: 0 4px 18px rgba(230,22,103,.28);
}
.btn-main::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.2) 50%, transparent 70%);
  transform: translateX(-100%); transition: .55s var(--ease);
}
.btn-main:hover::after { transform: translateX(100%) }
.btn-main:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(230,22,103,.4);
}
.btn-main svg { width:13px; height:13px; transition:transform .28s }
.btn-main:hover svg { transform: translateX(4px) }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 8px;
  color: var(--t2); border: 1.5px solid var(--brd);
  font-size: .64rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  transition: border-color .28s, color .28s, background .28s;
}
.btn-ghost:hover { border-color: rgba(11,10,22,.18); color: var(--t1); background: rgba(11,10,22,.025) }

/* ISO badges row */
.iso-row {
  display: flex; align-items: center;
  gap: 10px; flex-wrap: wrap;
  opacity: 0; animation: up .6s var(--ease) 1.22s forwards;
}
.iso-label {
  font-size: .60rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--t3); white-space: nowrap;
}
.iso-badges { display: flex; gap: 6px; flex-wrap: wrap }
.iso-badge {
  font-size: .65rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--t2); padding: 4px 9px;
  border: 1px solid var(--brd); border-radius: 4px;
  background: rgba(11,10,22,.022);
  transition: border-color .28s, color .28s;
}
.iso-badge:hover { border-color: var(--pk); color: var(--pk) }
.iso-badge--light {
  color: var(--t2);
  border-color: rgba(11,10,22,.12);
  background: rgba(11,10,22,.025);
}

/* ── RIGHT COLUMN ── */
.right {
  display: flex; align-items: center;
  justify-content: center;
  padding: 72px 0 52px 40px;
}

.stat-stack {
  display: flex; flex-direction: column; gap: 10px;
  z-index: 5; position: relative;
  opacity: 0; animation: up .9s var(--ease) 1.1s forwards;
}

.sc {
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(16px);
  border: 1px solid var(--brd);
  border-radius: 12px;
  padding: 14px 20px;
  display: flex; align-items: center; gap: 14px;
  box-shadow: 0 2px 16px rgba(11,10,22,.05);
  position: relative; overflow: hidden;
  transition: transform .28s var(--spring), box-shadow .28s;
  min-width: 210px;
}
.sc:hover { transform: translateX(-4px); box-shadow: 0 8px 28px rgba(11,10,22,.1) }
.sc::before {
  content: ''; position: absolute;
  left: 0; top: 0; bottom: 0; width: 3px;
}
.sc:nth-child(1)::before { background: var(--pk) }
.sc:nth-child(2)::before { background: var(--tl) }
.sc:nth-child(3)::before { background: var(--in) }
.sc:nth-child(4)::before { background: var(--am) }

.sc-icon {
  width: 36px; height: 36px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sc-icon svg { width:16px; height:16px; color:#fff }
.sc-data { display: flex; flex-direction: column; gap: 2px }
.sc-num {
  font-size: 1.5rem; font-weight: 900;
  letter-spacing: -.04em; line-height: 1; color: var(--t1);
  display: flex; align-items: baseline; gap: 1px;
}
.sc-sfx { font-size: .58rem; font-weight: 700 }
.sc-lbl {
  font-size: .5rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--t3);
}

/* ── SERVICES STRIP ── */
.hero__svcstrip {
  position: relative; z-index: 10;
  border-top: 1px solid var(--brd);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(16px);
  display: flex; align-items: center;
  height: 52px; padding: 0 56px; gap: 20px;
  overflow: hidden;
  flex-shrink: 0;
}
.svcstrip__label {
  font-size: .4rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--t3); flex-shrink: 0; white-space: nowrap;
}
.svcstrip__items {
  display: flex; align-items: center;
  overflow-x: auto; flex: 1;
  scrollbar-width: none;
}
.svcstrip__items::-webkit-scrollbar { display: none }
.svcstrip__item {
  display: flex; align-items: center; gap: 7px;
  padding: 0 18px; height: 52px; white-space: nowrap;
  font-size: .56rem; font-weight: 500; color: var(--t3);
  border-left: 1px solid var(--brd);
  transition: color .28s, background .28s;
  flex-shrink: 0;
}
.svcstrip__item:first-child { border-left: none }
.svcstrip__item svg { width:13px; height:13px; flex-shrink:0; transition:color .28s }
.svcstrip__item:hover { color: var(--pk); background: rgba(230,22,103,.03) }
.svcstrip__item:hover svg { color: var(--pk) }


/* ═══════════════════════════════════════════════════════════════════
   §02  QUÉ HACEMOS
   ═══════════════════════════════════════════════════════════════════ */
.what { position:relative; padding:50px 0; background:var(--white); overflow:hidden }
.what__accent {
  position:absolute; top:0; left:0; width:4px; height:100%;
  background:linear-gradient(to bottom,var(--pk),rgba(230,22,103,.06));
  pointer-events:none;
}
.what__container {
  max-width:var(--max); margin:0 auto; padding:0 44px;
  display:grid; grid-template-columns:1fr 1fr; gap:88px; align-items:center;
}
.what__h2 {
  font-size:clamp(28px,3.8vw,52px); font-weight:900; line-height:1.08;
  letter-spacing:-.025em; text-transform:uppercase; color:var(--t1); margin:0 0 .5rem;
}
.what__h2 em { font-style:normal; color:var(--pk) }
.what__rule { width:48px; height:3px; background:var(--pk); border-radius:1.5px; margin:1.8rem 0 }
.what__lead { font-size:.98rem; font-weight:400; line-height:1.82; color:var(--t2); margin-bottom:.9rem }
.what__body { font-size:.9rem; font-weight:300; line-height:1.78; color:var(--t3) }
.what__card {
  position:relative; padding:54px 50px;
  background:var(--warm); border:1px solid rgba(11,10,22,.07);
  border-radius:22px; overflow:hidden;
  transition:transform .5s var(--ease), box-shadow .5s;
}
.what__card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(to right,var(--pk),var(--tl));
}
.what__card:hover { transform:translateY(-8px); box-shadow:0 32px 64px rgba(0,0,0,.07) }
.what__card-ghost {
  position:absolute; top:20px; right:28px;
  font-size:62px; font-weight:900;
  color:rgba(11,10,22,.04); letter-spacing:.1em;
  pointer-events:none; user-select:none;
}
.what__list { list-style:none }
.what__list li {
  display:flex; align-items:center; gap:16px;
  font-size:.94rem; font-weight:400; color:var(--t2);
  padding:13px 0; border-bottom:1px solid rgba(11,10,22,.05);
  transition:color .28s, padding-left .28s;
}
.what__list li:last-child { border-bottom:none }
.what__list li:hover { color:var(--t1); padding-left:6px }
.wl-dot {
  width:8px; height:8px; border-radius:50%; background:var(--pk);
  flex-shrink:0; box-shadow:0 0 10px rgba(230,22,103,.55);
}


/* ═══════════════════════════════════════════════════════════════════
   §03  MODELO
   ═══════════════════════════════════════════════════════════════════ */
.modelo { position:relative; padding:120px 0; background:white; overflow:hidden }
.modelo__canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:.22 }
.modelo__container { max-width:var(--max); margin:0 auto; padding:0 44px; position:relative; z-index:1 }
.modelo__header { text-align:center; max-width:780px; margin:0 auto 80px }
.modelo__header::after {
  content:''; display:block; width:52px; height:2px;
  background:linear-gradient(to right,var(--pk),var(--tl));
  border-radius:1px; margin:24px auto 0;
}
.modelo__h2 {
  font-size:clamp(22px,2.9vw,40px); font-weight:900; line-height:1.15;
  letter-spacing:-.015em; text-transform:uppercase; color:var(--t1); margin-top:.5rem;
}
.modelo__h2 em { font-style:normal; color:var(--pk) }
.modelo__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:3rem }

.modelo__card {
  position:relative; padding:52px 40px;
  background:var(--ink3); border:1px solid rgba(255,255,255,.07);
  border-radius:20px; overflow:hidden;
  opacity:0; transform:translateY(32px) scale(.97);
  transition:opacity .85s var(--ease), transform .85s var(--ease),
    border-color .35s, background .35s, box-shadow .35s;
}
.modelo__card.mc-in { opacity:1; transform:translateY(0) scale(1) }
.modelo__card:hover {
  border-color:rgba(230,22,103,.3); background:var(--ink3);
  transform:translateY(-8px) scale(1.015) !important;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.mc__num {
  font-size:clamp(54px,5.5vw,72px); font-weight:900;
  letter-spacing:-.06em; color:rgba(255,255,255,.05);
  line-height:1; margin-bottom:24px; transition:color .35s;
}
.modelo__card:hover .mc__num { color:rgba(230,22,103,.09) }
.mc__accent {
  position:absolute; bottom:0; left:0; height:3px; width:0;
  background:rgba(255,255,255,.18); border-radius:2px;
  transition:width .75s var(--ease);
}
.mc__accent--pink { background:var(--pk) }
.mc__accent--teal { background:var(--tl) }
.modelo__card.mc-in .mc__accent { width:100%; transition-delay:.15s }
.modelo__card h3 {
  font-size:1rem; font-weight:800; letter-spacing:.04em;
  text-transform:uppercase; color:var(--i-inv);
  margin-bottom:14px; transition:color .3s;
}
.modelo__card:hover h3 { color:var(--pk) }
.modelo__card p { font-size:.85rem; font-weight:300; line-height:1.72; color:var(--i-dim); margin-bottom:28px }
.mc__kpi {
  display:flex; flex-direction:column; gap:4px;
  padding:14px 18px; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07); border-radius:10px;
}
.mc__kpi-val { font-size:1.5rem; font-weight:900; letter-spacing:-.03em; color:var(--i-inv); line-height:1 }
.mc__kpi-val--pink { color:var(--pk) }
.mc__kpi-val--teal { color:var(--tl) }
.mc__kpi-lbl { font-size:.46rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.3) }

/* Ciclo de entrega */
.modelo__ciclo {
  background: var(--paper); border-radius: 18px;
  padding: 36px 48px; text-align: center;
  border: 1px solid var(--brd);
}
.ciclo__title {
  font-size: .68rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--t3); margin-bottom: 1.8rem;
}
.ciclo__steps {
  display: flex; align-items: center;
  justify-content: center; flex-wrap: wrap; gap: 0;
}
.ciclo__step {
  display: flex; flex-direction: column; gap: 4px;
  align-items: center; padding: 0 20px;
}
.ciclo__n {
  font-size: 1.2rem; font-weight: 900;
  letter-spacing: -.04em; color: var(--pk); line-height: 1;
}
.ciclo__lbl {
  font-size: .58rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--t1);
}
.ciclo__arr { font-size: 1rem; color: var(--t3); flex-shrink: 0 }
.ciclo__sub {
  margin-top: 1rem;
  font-size: .54rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--tl);
}


/* ═══════════════════════════════════════════════════════════════════
   §04  PROMESA
   ═══════════════════════════════════════════════════════════════════ */
.promise {
  position:relative; padding:130px 0 120px;
  background:var(--white); overflow:hidden;
  border-top:1px solid rgba(11,10,22,.06);
}
.promise__canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:.05; z-index:0 }
.promise__container {
  max-width:var(--max); margin:0 auto; padding:0 44px;
  display:grid; grid-template-columns:1fr 1fr;
  gap:80px; align-items:start; position:relative; z-index:1;
}

.promise__left {
  position:sticky; top:120px;
  opacity:0; transform:translateX(-24px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.promise__left.pl-in { opacity:1; transform:translateX(0) }

.promise__hl-wrap {
  display:flex; flex-direction:column;
  gap:2px; margin:12px 0 36px; overflow:hidden;
}
.promise__hl {
  display:block; overflow:hidden;
  opacity:0; transform:translateY(100%);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.promise__left.pl-in .promise__hl { opacity:1; transform:translateY(0) }
.promise__hl[style*="--d:0"] { transition-delay:.05s }
.promise__hl[style*="--d:1"] { transition-delay:.16s }
.promise__hl[style*="--d:2"] { transition-delay:.27s }
.promise__hl[style*="--d:3"] { transition-delay:.38s }
.promise__hl[style*="--d:4"] { transition-delay:.49s }

.promise__hl-inner {
  display:block;
  font-size:clamp(32px,4.5vw,58px);
  font-weight:900; letter-spacing:-.035em;
  text-transform:uppercase; line-height:.96;
}
.promise__hl--out .promise__hl-inner {
  color:transparent;
  -webkit-text-stroke:1.5px rgba(11,10,22,.2);
}
.promise__hl--fill .promise__hl-inner { color:var(--t1) }
.promise__hl--grad .promise__hl-inner {
  background:linear-gradient(100deg,var(--pk) 10%,var(--in) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

.promise__badge {
  display:flex; align-items:flex-start; gap:14px;
  padding:18px 22px; background:var(--paper);
  border:1px solid rgba(11,10,22,.07);
  border-left:3px solid var(--pk);
  border-radius:0 12px 12px 0; margin-bottom:28px;
}
.promise__badge-dot {
  width:8px; height:8px; border-radius:50%; background:var(--pk);
  flex-shrink:0; margin-top:3px;
  animation:pkping 2s ease infinite;
}
@keyframes pkping {
  0%,100% { box-shadow:0 0 0 0 rgba(230,22,103,.6) }
  50%     { box-shadow:0 0 0 9px transparent }
}
.promise__badge span { font-size:.84rem; font-weight:300; line-height:1.72; color:var(--t2) }

.promise__mini-stats {
  display:flex; align-items:center; gap:0;
  border:1px solid rgba(11,10,22,.08); border-radius:12px;
  overflow:hidden; margin-bottom:24px;
}
.pms__item {
  flex:1; display:flex; flex-direction:column;
  align-items:center; padding:16px 8px; background:var(--white);
}
.pms__val { font-size:1.4rem; font-weight:900; color:var(--t1); letter-spacing:-.03em; line-height:1 }
.pms__val--pk { color:var(--pk) }
.pms__val--tl { color:var(--tl) }
.pms__lbl { font-size:.44rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--t3); margin-top:4px; text-align:center }
.pms__sep { width:1px; height:40px; background:rgba(11,10,22,.07) }

/* ISO grid in promise section */
.promise__isos {
  display: flex; flex-direction: column; gap: 10px;
}
.promise__isos-label {
  font-size: .42rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--t3);
}
.promise__isos-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 8px;
}
.piso {
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding: 10px 6px; border-radius: 10px;
  border: 1px solid var(--brd);
  background: var(--paper);
  transition: border-color .28s, transform .28s var(--spring);
}
.piso:hover { border-color: var(--pk); transform: translateY(-3px) }
.piso--in:hover  { border-color: var(--in) }
.piso--tl:hover  { border-color: var(--tl) }
.piso--am:hover  { border-color: var(--am) }
.piso__code { font-size: .34rem; font-weight: 700; letter-spacing: .1em; color: var(--t3) }
.piso__num  { font-size: .88rem; font-weight: 900; letter-spacing: -.02em; color: var(--pk); line-height: 1 }
.piso--in .piso__num  { color: var(--in) }
.piso--tl .piso__num  { color: var(--tl) }
.piso--am .piso__num  { color: var(--am) }
.piso__name { font-size: .34rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--t3); text-align: center }

.promise__right {
  display:flex; flex-direction:column; gap:16px;
  opacity:0; transform:translateX(24px);
  transition:opacity .9s var(--ease) .1s, transform .9s var(--ease) .1s;
}
.promise__right.pr-in { opacity:1; transform:translateX(0) }

.p-pill {
  position:relative; display:flex; align-items:flex-start; gap:18px;
  padding:24px 28px; background:var(--white);
  border:1px solid rgba(11,10,22,.07); border-radius:16px; overflow:hidden;
  opacity:0; transform:translateX(20px);
  transition:opacity .7s var(--ease), transform .7s var(--ease),
    border-color .35s, box-shadow .35s, transform .35s;
}
.promise__right.pr-in .p-pill { opacity:1; transform:translateX(0) }
.p-pill[data-pp="0"] { transition-delay:.1s }
.p-pill[data-pp="1"] { transition-delay:.22s }
.p-pill[data-pp="2"] { transition-delay:.34s }
.p-pill[data-pp="3"] { transition-delay:.46s }
.p-pill:hover {
  border-color:rgba(230,22,103,.24);
  box-shadow:0 8px 32px rgba(230,22,103,.07);
  transform:translateX(6px) !important;
}
.p-pill__ico {
  width:44px; height:44px; border-radius:12px;
  background:var(--pk06); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:background .3s;
}
.p-pill:hover .p-pill__ico { background:var(--pk12) }
.p-pill__ico svg { width:20px; height:20px; color:var(--pk) }
.p-pill__ico--tl { background:var(--tl06) }
.p-pill__ico--tl svg { color:var(--tl) }
.p-pill:hover .p-pill__ico--tl { background:var(--tl12) }
.p-pill__ico--am { background:var(--am12) }
.p-pill__ico--am svg { color:#B89300 }
.p-pill__ico--in { background:var(--in12) }
.p-pill__ico--in svg { color:var(--in) }
.p-pill__body { display:flex; flex-direction:column; gap:4px }
.p-pill__body strong { font-size:.88rem; font-weight:700; color:var(--t1); line-height:1.3 }
.p-pill__body span { font-size:.82rem; font-weight:300; color:var(--t2); line-height:1.6 }
.p-pill__line {
  position:absolute; left:0; top:14px; bottom:14px; width:3px;
  background:var(--pk); border-radius:0 2px 2px 0;
  transform:scaleY(0); transform-origin:top;
  transition:transform .35s var(--ease);
}
.p-pill:hover .p-pill__line { transform:scaleY(1) }
.p-pill__line--tl { background:var(--tl) }
.p-pill__line--am { background:var(--am) }
.p-pill__line--in { background:var(--in) }

/* Frase clave en promise */
.promise__frase {
  padding: 24px 28px; border-radius: 16px;
  background: var(--ink3); border: 1px solid rgba(255,255,255,.07);
}
.promise__frase blockquote {
  font-size: .88rem; font-weight: 400; font-style: italic;
  line-height: 1.72; color: var(--i-dim); margin-bottom: 10px;
}
.promise__frase cite {
  font-size: .46rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--pk); font-style: normal;
}


/* ═══════════════════════════════════════════════════════════════════
   §05  MÉTRICAS
   ═══════════════════════════════════════════════════════════════════ */
.metrics {
  position:relative; padding:130px 0 100px;
  background:var(--paper); overflow:hidden;
  border-top:1px solid rgba(11,10,22,.06);
}
.metrics__canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:.06; z-index:0 }
.metrics__container { max-width:var(--max); margin:0 auto; padding:0 44px; position:relative; z-index:1 }
.metrics__header { text-align:center; max-width:640px; margin:0 auto 72px }
.metrics__h2 {
  font-size:clamp(24px,3.4vw,46px); font-weight:900; line-height:1.1;
  letter-spacing:-.025em; text-transform:uppercase; color:var(--t1); margin:.5rem 0 .8rem;
}
.metrics__h2 em { font-style:normal; color:var(--pk) }
.metrics__header p { font-size:.94rem; color:var(--t2) }

.metrics__board {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:20px; margin-bottom:48px;
}
.m-card {
  position:relative; background:var(--white);
  border:1px solid rgba(11,10,22,.07); border-radius:22px; overflow:hidden;
  padding:36px 28px 28px;
  display:flex; flex-direction:column; gap:20px;
  opacity:0; transform:translateY(36px) scale(.97);
  transition:opacity .85s var(--ease), transform .85s var(--ease),
    border-color .35s, box-shadow .35s;
}
.m-card.mc-in { opacity:1; transform:translateY(0) scale(1) }
.m-card:hover { border-color:rgba(230,22,103,.28); box-shadow:0 16px 48px rgba(230,22,103,.08); transform:translateY(-6px) }
.m-card--teal:hover  { border-color:rgba(109,192,170,.4);  box-shadow:0 16px 48px rgba(109,192,170,.1) }
.m-card--amber:hover { border-color:rgba(232,168,0,.5);    box-shadow:0 16px 48px rgba(232,168,0,.12) }
.m-card--indigo:hover { border-color:rgba(75,80,156,.35);  box-shadow:0 16px 48px rgba(75,80,156,.1) }
.m-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--pk) }
.m-card--teal::before   { background:var(--tl) }
.m-card--amber::before  { background:var(--am) }
.m-card--indigo::before { background:var(--in) }
.m-card__glow {
  position:absolute; top:-20px; left:50%; transform:translateX(-50%);
  width:160px; height:80px; border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(230,22,103,.12),transparent 70%);
  pointer-events:none;
}
.m-card--teal   .m-card__glow { background:radial-gradient(ellipse at center,rgba(109,192,170,.12),transparent 70%) }
.m-card--amber  .m-card__glow { background:radial-gradient(ellipse at center,rgba(232,168,0,.1),transparent 70%) }
.m-card--indigo .m-card__glow { background:radial-gradient(ellipse at center,rgba(75,80,156,.1),transparent 70%) }
.m-card__ring-wrap { position:relative; width:120px; height:120px; margin:0 auto; flex-shrink:0 }
.m-ring { width:120px; height:120px; transform:rotate(-90deg) }
.m-ring__bg  { fill:none; stroke:rgba(11,10,22,.06); stroke-width:8 }
.m-ring__arc {
  fill:none; stroke:var(--pk); stroke-width:8;
  stroke-linecap:round; stroke-dasharray:314; stroke-dashoffset:314;
  transition:stroke-dashoffset 1.6s var(--ease);
}
.m-ring__arc--teal   { stroke:var(--tl) }
.m-ring__arc--amber  { stroke:var(--am) }
.m-ring__arc--indigo { stroke:var(--in) }
.m-card__center {
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.m-card__plus { font-size:1rem; font-weight:800; color:var(--pk); line-height:1; margin-bottom:-2px }
.m-card--teal   .m-card__plus { color:var(--tl) }
.m-card--amber  .m-card__plus { color:#B89300 }
.m-card--indigo .m-card__plus { color:var(--in) }
.m-card__num { font-size:1.8rem; font-weight:900; color:var(--t1); line-height:1; letter-spacing:-.04em }
.m-card__info { text-align:center }
.m-card__info h3 { font-size:.72rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--t1); margin-bottom:6px }
.m-card__info p  { font-size:.78rem; font-weight:300; color:var(--t2); line-height:1.55 }
.m-card__bar-track { height:3px; background:rgba(11,10,22,.05); border-radius:2px; overflow:hidden; margin-top:4px }
.m-card__bar-fill { height:100%; background:var(--pk); border-radius:2px; width:0; transition:width 1.8s var(--ease) }
.m-card__bar-fill--teal   { background:var(--tl) }
.m-card__bar-fill--amber  { background:var(--am) }
.m-card__bar-fill--indigo { background:var(--in) }

.metrics__bars { display:grid; grid-template-columns:repeat(4,1fr); gap:20px }
.mbar { opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease) }
.mbar.mb-in { opacity:1; transform:translateY(0) }
.mbar__label { display:block; font-size:.48rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--t3); margin-bottom:8px }
.mbar__track { height:6px; background:rgba(11,10,22,.06); border-radius:3px; overflow:hidden }
.mbar__fill {
  height:100%; background:var(--pk); border-radius:3px; width:0;
  display:flex; align-items:center; justify-content:flex-end;
  transition:width 1.6s var(--ease); position:relative;
}
.mbar__fill span { position:absolute; right:-28px; font-size:.46rem; font-weight:700; color:var(--pk); white-space:nowrap; letter-spacing:.04em }
.mbar__fill--tl { background:var(--tl) }
.mbar__fill--tl span { color:var(--tl) }
.mbar__fill--am { background:var(--am) }
.mbar__fill--am span { color:#B89300 }
.mbar__fill--in { background:var(--in) }
.mbar__fill--in span { color:var(--in) }


/* ═══════════════════════════════════════════════════════════════════
   §06  SERVICIOS
   ═══════════════════════════════════════════════════════════════════ */
.svcs { position:relative; padding:120px 0; background:var(--white); overflow:hidden }
.svcs__grid-bg {
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(11,10,22,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(11,10,22,.028) 1px,transparent 1px);
  background-size:60px 60px;
}
.svcs__canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:.04 }
.svcs__container { max-width:1300px; margin:0 auto; padding:0 44px; position:relative; z-index:1 }
.svcs__header { display:grid; grid-template-columns:1fr auto; gap:48px; align-items:end; margin-bottom:64px }
.svcs__h2 {
  font-size:clamp(24px,3.2vw,44px); font-weight:900; line-height:1.1;
  letter-spacing:-.02em; text-transform:uppercase; color:var(--t1); margin:.5rem 0;
}
.svcs__h2 em { font-style:normal; color:var(--pk) }
.svcs__sub { font-size:.9rem; font-weight:300; line-height:1.72; color:var(--t2); max-width:360px; text-align:right }
.svcs__grid {
  display:grid; grid-template-columns:1.4fr 1fr 1fr;
  grid-template-rows:auto auto auto; gap:16px;
}
.svc {
  display:flex; flex-direction:column; position:relative; overflow:hidden;
  padding:28px; background:var(--white); border:1px solid rgba(11,10,22,.08);
  border-radius:18px;
  opacity:0; transform:translateY(36px) scale(.97); filter:blur(3px);
  transition:opacity .85s var(--ease), transform .85s var(--ease),
    filter .85s ease, border-color .35s, box-shadow .35s;
}
.svc.sv-in { opacity:1; transform:translateY(0) scale(1); filter:blur(0) }
.svc::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
  background:var(--pk); transform:scaleX(0); transform-origin:left;
  transition:transform .38s var(--ease);
}
.svc:hover { border-color:rgba(230,22,103,.26); box-shadow:0 12px 40px rgba(230,22,103,.07); transform:translateY(-5px) }
.svc:hover::after { transform:scaleX(1) }
.svc__ico {
  width:48px; height:48px; border-radius:12px; background:var(--pk06);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px; transition:background .3s; flex-shrink:0;
}
.svc__ico svg { width:22px; height:22px; color:var(--pk); transition:transform .3s }
.svc:hover .svc__ico { background:var(--pk12) }
.svc:hover .svc__ico svg { transform:scale(1.1) rotate(-4deg) }
.svc h3 {
  font-size:.86rem; font-weight:800; letter-spacing:.03em;
  text-transform:uppercase; color:var(--t1); margin-bottom:8px; transition:color .3s;
}
.svc:hover h3 { color:var(--pk) }
.svc > p { font-size:.8rem; font-weight:300; color:var(--t2); line-height:1.65; flex:1 }
.svc__arr {
  position:absolute; bottom:20px; right:20px;
  width:34px; height:34px; border-radius:50%;
  background:var(--paper); border:1px solid rgba(11,10,22,.07);
  display:flex; align-items:center; justify-content:center;
  transition:all .3s var(--ease);
}
.svc__arr svg { width:14px; height:14px; color:var(--pk); transition:all .3s }
.svc:hover .svc__arr { background:var(--pk); border-color:var(--pk) }
.svc:hover .svc__arr svg { color:#fff; transform:rotate(-42deg) }

.svc--featured {
  grid-row:span 2; padding:36px; padding-bottom:80px;
  background:linear-gradient(160deg,var(--ink2) 0%,var(--ink3) 100%);
  border-color:rgba(255,255,255,.08);
}
.svc--featured::after { background:var(--pk); height:3px }
.svc--featured:hover { border-color:rgba(230,22,103,.4); box-shadow:0 20px 60px rgba(0,0,0,.35) }
.svc--featured .svc__ico { background:rgba(230,22,103,.15); width:60px; height:60px; border-radius:16px }
.svc--featured .svc__ico svg { width:28px; height:28px; color:var(--pk) }
.svc--featured:hover .svc__ico { background:rgba(230,22,103,.25) }
.svc--featured h3 { font-size:1.1rem; color:var(--i-inv) }
.svc--featured:hover h3 { color:var(--pk) }
.svc--featured > p { font-size:.88rem; color:var(--i-dim) }
.svc--featured .svc__arr { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.1) }
.svc--featured:hover .svc__arr { background:var(--pk); border-color:var(--pk) }
.svc--featured .svc__arr svg { color:rgba(255,255,255,.7) }
.svc__tag-badge {
  position:absolute; top:24px; right:20px;
  font-size:.42rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--pk); padding:4px 10px;
  border:1px solid rgba(230,22,103,.3); border-radius:4px; background:rgba(230,22,103,.1);
}
.svc__glow {
  position:absolute; top:-40px; left:-20px; width:200px; height:200px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(230,22,103,.12),transparent 70%);
  pointer-events:none; animation:glowPulse 3s ease-in-out infinite;
}
@keyframes glowPulse { 0%,100%{opacity:.5;transform:scale(1)} 50%{opacity:1;transform:scale(1.1)} }
.svc__chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; margin-bottom:8px }
.svc__chips span {
  font-size:.48rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.38); padding:4px 10px;
  border:1px solid rgba(255,255,255,.1); border-radius:4px; background:rgba(255,255,255,.04);
}

.svcs__status {
  display:flex; align-items:center; gap:14px;
  margin-top:40px; padding:14px 24px;
  background:var(--white); border:1px solid rgba(11,10,22,.07); border-radius:10px;
}
.svcs-status__indicator {
  width:8px; height:8px; border-radius:50%; background:#4ADE80;
  flex-shrink:0; animation:pkping 2s ease infinite;
  box-shadow:0 0 8px rgba(74,222,128,.6);
}
.svcs__status span:nth-child(2) { font-size:.68rem; font-weight:500; color:var(--t2); flex:1 }
.svcs-status__wave { display:flex; align-items:center; gap:3px; margin-left:auto }
.svcs-status__wave span { width:3px; background:var(--pk); border-radius:2px; opacity:.6; animation:waveBar 1.2s ease-in-out infinite }
.svcs-status__wave span:nth-child(1){height:8px;animation-delay:0s}
.svcs-status__wave span:nth-child(2){height:14px;animation-delay:.1s}
.svcs-status__wave span:nth-child(3){height:20px;animation-delay:.2s}
.svcs-status__wave span:nth-child(4){height:16px;animation-delay:.3s}
.svcs-status__wave span:nth-child(5){height:10px;animation-delay:.4s}
.svcs-status__wave span:nth-child(6){height:18px;animation-delay:.5s}
.svcs-status__wave span:nth-child(7){height:14px;animation-delay:.6s}
.svcs-status__wave span:nth-child(8){height:8px;animation-delay:.7s}
@keyframes waveBar { 0%,100%{transform:scaleY(.5);opacity:.4} 50%{transform:scaleY(1);opacity:1} }
.svcs-status__time { font-family:'Courier New',monospace; font-size:.52rem; color:var(--t3); letter-spacing:.08em; flex-shrink:0 }


/* ═══════════════════════════════════════════════════════════════════
   §07  INDUSTRIAS
   ═══════════════════════════════════════════════════════════════════ */
.ind { padding:120px 0; background:var(--warm); border-top:1px solid rgba(11,10,22,.06) }
.ind__container { max-width:1280px; margin:0 auto; padding:0 44px }
.ind__header { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:end; margin-bottom:64px }
.ind__h2 {
  font-size:clamp(24px,3.2vw,44px); font-weight:900; line-height:1.1;
  letter-spacing:-.025em; text-transform:uppercase; color:var(--t1); margin:.5rem 0;
}
.ind__header-r { font-size:.9rem; font-weight:300; line-height:1.72; color:var(--t2) }
.ind__mosaic {
  display:grid; grid-template-columns:1.3fr 1fr 1fr;
  grid-template-rows:auto auto; gap:16px;
}
.ind__tile--lg { grid-row:span 2 }
.ind__tile {
  position:relative; overflow:hidden; background:var(--white);
  border:1px solid rgba(11,10,22,.07); border-radius:20px; cursor:pointer;
  opacity:0; transform:translateY(24px);
  transition:opacity .75s var(--ease), transform .75s var(--ease);
}
.ind__tile.it-in { opacity:1; transform:translateY(0) }
.ind__tile:hover { box-shadow:0 16px 48px rgba(0,0,0,.08) }
.ind__tile-stripe {
  position:absolute; top:0; left:0; bottom:0; width:3px;
  background:var(--pk); transform:scaleY(0); transform-origin:top;
  transition:transform .45s var(--ease);
}
.ind__tile:hover .ind__tile-stripe { transform:scaleY(1) }
.ind__tile-stripe--tl { background:var(--tl) }
.ind__tile-stripe--am { background:var(--am) }
.ind__tile-stripe--in { background:var(--in) }
.ind__tile-body { padding:32px 28px 28px 34px }
.ind__tile--lg .ind__tile-body { padding:36px 32px 32px 38px }
.ind__tile-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px }
.ind__tile-icon { width:42px; height:42px; color:var(--pk); transition:transform .4s var(--ease) }
.ind__tile-icon svg { width:100%; height:100% }
.ind__tile:hover .ind__tile-icon { transform:scale(1.15) rotate(-4deg) }
.ind__tile-n {
  font-size:clamp(40px,4.5vw,56px); font-weight:900;
  letter-spacing:-.06em; color:rgba(11,10,22,.05); line-height:1; transition:color .35s;
}
.ind__tile:hover .ind__tile-n { color:rgba(230,22,103,.08) }
.ind__tile h3 {
  font-size:1rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.03em; color:var(--t1); margin-bottom:10px; transition:color .3s;
}
.ind__tile:hover h3 { color:var(--pk) }
.ind__tile--lg h3 { font-size:1.15rem }
.ind__tile-desc { font-size:.84rem; font-weight:400; color:var(--t2); line-height:1.62 }
.ind__tile--lg .ind__tile-desc { font-size:.9rem }
.ind__tile-reveal {
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .5s var(--ease), opacity .4s, margin .4s;
}
.ind__tile:hover .ind__tile-reveal { max-height:200px; opacity:1; margin-top:14px }
.ind__tile-reveal p { font-size:.82rem; font-weight:300; color:var(--t2); line-height:1.65; margin-bottom:12px }
.ind__tile-kpi {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; background:var(--paper);
  border:1px solid rgba(11,10,22,.06); border-radius:8px; margin-bottom:12px; width:fit-content;
}
.itk__n { font-size:1.2rem; font-weight:900; color:var(--pk); letter-spacing:-.03em; line-height:1 }
.itk__n--tl { color:var(--tl) }
.itk__n--am { color:#B89300 }
.itk__n--in { color:var(--in) }
.itk__l { font-size:.5rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--t3) }
.ind__tile-link { display:inline-flex; align-items:center; gap:5px; font-size:.72rem; font-weight:700; color:var(--pk); letter-spacing:.06em; transition:gap .25s }
.ind__tile-link:hover { gap:9px }


/* ═══════════════════════════════════════════════════════════════════
   §08  CTA FINAL — FONDO CLARO con partículas suaves
   ═══════════════════════════════════════════════════════════════════ */
.cta-sec {
  position: relative;
  padding: 140px 44px 160px;
  background: #F4F6FA;                 /* claro, no oscuro */
  overflow: hidden;
  text-align: center;
  border-top: 1px solid rgba(11,10,22,.07);
}
.cta-sec__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; opacity: 1; z-index: 0;
}
.cta-sec__container { position:relative; z-index:2; max-width:900px; margin:0 auto }
.cta-sec__inner {
  opacity:0; transform:translateY(28px);
  transition:opacity 1s var(--ease), transform 1s var(--ease);
}
.cta-sec__inner.ci-in { opacity:1; transform:translateY(0) }

/* Eyebrow en CTA ya está definido arriba con --pk */

.cta-sec__h2 {
  display:flex; flex-direction:column; gap:0;
  margin:18px 0 28px; overflow:hidden;
}
.cta-h2__l1 {
  font-size: clamp(18px,2.4vw,32px);
  font-weight: 300; text-transform: uppercase;
  letter-spacing: .08em; color: var(--t2);
  line-height: 1.15; display:block;
  opacity:0; transform:translateY(22px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.cta-h2__l2 {
  font-size: clamp(56px,9vw,120px);
  font-weight: 900; text-transform: uppercase;
  letter-spacing: -.04em; color: var(--t1);
  line-height: .92; display:block;
  opacity:0; transform:translateY(28px);
  transition:opacity .8s var(--ease) .12s, transform .8s var(--ease) .12s;
}
.cta-h2__l3 {
  font-size: clamp(56px,9vw,120px);
  font-weight: 900; text-transform: uppercase;
  letter-spacing: -.04em; line-height: .92; display:block;
  opacity:0; transform:translateY(28px);
  background: linear-gradient(100deg, var(--pk) 20%, rgba(232,168,0,.9) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  transition:opacity .8s var(--ease) .24s, transform .8s var(--ease) .24s;
}
.cta-sec__inner.ci-in .cta-h2__l1,
.cta-sec__inner.ci-in .cta-h2__l2,
.cta-sec__inner.ci-in .cta-h2__l3 { opacity:1; transform:translateY(0) }

.cta-sec__sub {
  font-size: clamp(.88rem,1.05vw,.98rem);
  font-weight: 300; line-height: 1.82;
  color: var(--t2); max-width:540px; margin:0 auto 28px;
}

/* ISO strip in CTA */
.cta-sec__isos {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap; margin-bottom: 36px;
}

.cta-sec__btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 18px 52px;
  font-size: .75rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: #fff; background: var(--pk); border-radius: 20px;
  transition: background .32s, transform .4s var(--spring), box-shadow .32s;
  position: relative; overflow: hidden;
  box-shadow: 0 4px 24px rgba(230,22,103,.28);
}
.cta-sec__btn::before {
  content:''; position:absolute; inset:0;
  background:rgba(255,255,255,.12);
  transform:translateX(-100%); transition:transform .4s var(--ease);
}
.cta-sec__btn:hover::before { transform:translateX(0) }
.cta-sec__btn:hover {
  background: #ff1d75;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 18px 56px rgba(230,22,103,.4);
}
.cta-sec__btn svg { transition:transform .25s }
.cta-sec__btn:hover svg { transform:translateX(5px) }


/* ═══════════════════════════════════════════════════════════════════
   KEYFRAMES GLOBALES
   ═══════════════════════════════════════════════════════════════════ */
@keyframes up { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { to{opacity:1} }


/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */
@media(max-width:1100px){
  .stage { grid-template-columns:1fr; padding:0 32px }
  .left  { padding:56px 0 32px; border-bottom:1px solid var(--brd) }
  .right { padding:28px 0 40px; justify-content:flex-start }
  .stat-stack { flex-direction:row; flex-wrap:wrap }
  .sc { min-width:clamp(140px,38%,200px); flex:1 }
  #nodeCanvas { width:100%; top:50%; opacity:.25 }
  .node-mask  { width:100% }
  .hero__svcstrip { padding:0 32px }
  .what__container { grid-template-columns:1fr; gap:3rem; padding:0 32px }
  .modelo__grid { grid-template-columns:1fr }
  .promise__container { grid-template-columns:1fr; gap:3rem }
  .promise__left { position:static }
  .promise__isos-grid { grid-template-columns:repeat(4,1fr) }
  .metrics__board { grid-template-columns:repeat(2,1fr) }
  .metrics__bars  { grid-template-columns:repeat(2,1fr) }
  .svcs__grid { grid-template-columns:1fr 1fr; grid-template-rows:auto }
  .svc--featured { grid-row:span 1 }
  .ind__mosaic { grid-template-columns:1fr 1fr; grid-template-rows:auto }
  .ind__tile--lg { grid-row:span 1 }
  .svcs__header { grid-template-columns:1fr; gap:16px }
  .svcs__sub { text-align:left; max-width:none }
  .ind__header { grid-template-columns:1fr }
  .what__accent { display:none }
  .ciclo__steps { gap:8px }
  .ciclo__arr { display:none }
  .ciclo__step { background:var(--white); border-radius:8px; border:1px solid var(--brd); padding:8px 14px }
}

@media(max-width:768px){
  .stage { padding:0 24px }
  .hero__svcstrip { padding:0 20px; height:auto; min-height:44px }
  .svcstrip__items { gap:0 }
  .svcs__grid { grid-template-columns:1fr }
  .svc--featured { grid-row:span 1 }
  .ind__mosaic { grid-template-columns:1fr }
  .ind__tile--lg { grid-row:span 1 }
  .metrics__board { grid-template-columns:repeat(2,1fr) }
  .metrics__bars  { grid-template-columns:1fr }
  .promise__container,.metrics__container,.svcs__container,
  .ind__container,.modelo__container { padding-left:24px; padding-right:24px }
  .cta-sec { padding:100px 24px 120px }
  .promise__isos-grid { grid-template-columns:repeat(2,1fr) }
}

@media(max-width:480px){
  .h-word { font-size:clamp(28px,10vw,44px) }
  .cta-h2__l2,.cta-h2__l3 { font-size:clamp(40px,12vw,64px) }
  .metrics__board { grid-template-columns:1fr }
  .promise__hl-inner { font-size:clamp(28px,9vw,44px) }
  .stat-stack { flex-direction:column }
  .sc { min-width:100% }
  .actions { flex-direction:column; align-items:stretch }
  .btn-main,.btn-ghost { justify-content:center }
}