/* ════════════════════════════════════════════════
   COLOR SYSTEM — oklch single source of truth
   sRGB fallback → oklch upgrade automático
   PARA CAMBIAR EL LIMA: edita oklch(0.916 0.199 115.8)
   y actualiza el hex #DEF22C en :root
════════════════════════════════════════════════ */
:root {
  --lime:       #DEF22C;
  --lime-dim:   rgba(222,242,44,.08);
  --lime-mid:   rgba(222,242,44,.20);
  --lime-glow:  rgba(222,242,44,.30);
  --lime-hover: #c8da20;
  --black:      #0A0A08;
  --surface:    #111110;
  --surface2:   #181816;
  --surface3:   #1F1F1C;
  --border:     rgba(255,255,255,.06);
  --border2:    rgba(255,255,255,.10);
  --text:       rgba(255,255,255,.88);
  --text-dim:   rgba(255,255,255,.58);
  --text-mid:   rgba(255,255,255,.72);
  --white:      #FFFFFF;
  --ease:       cubic-bezier(.4,0,.2,1);
  --ease-back:  cubic-bezier(.34,1.56,.64,1);
  --font:         'Manrope', sans-serif;
  --font-heading: 'Sora', sans-serif;
  --font-hero:    'Manrope', sans-serif;
  /* STRATA brand color */
  --strata:     #2A7FD4;
  --strata-dim: rgba(42,127,212,.10);
  --strata-mid: rgba(42,127,212,.25);
  --strata-glow:rgba(42,127,212,.35);
  /* ── ANCHO DE CONTENEDOR ("estilo Adobe") ──
     Adobe (adobe.com / sistema Milo) limita el CONTENIDO a un ancho
     máximo fijo mientras el FONDO de cada sección sigue a pantalla
     completa. Truco: el padding lateral pasa de ser un simple 6vw a
     max(6vw, (100vw - --maxw)/2) — en pantallas normales se comporta
     igual que antes (fluido), y en monitores grandes se detiene para
     que el contenido no se estire más allá de --maxw, quedando
     centrado con el fondo intacto a los costados. */
  --maxw: 1280px;
  --gutter: max(6vw, calc((100vw - var(--maxw)) / 2));
}
@supports (color: oklch(0 0 0)) {
  :root {
    --lime:      oklch(0.916 0.199 115.8);
    --lime-dim:  oklch(0.916 0.199 115.8 / .08);
    --lime-mid:  oklch(0.916 0.199 115.8 / .20);
    --lime-glow: oklch(0.916 0.199 115.8 / .30);
    --lime-hover:oklch(0.870 0.199 115.8);
    --black:     oklch(0.115 0.004 106.8);
    --surface:   oklch(0.145 0.004 106.8);
    --surface2:  oklch(0.170 0.004 106.8);
    --surface3:  oklch(0.195 0.005 106.8);
    --strata:    oklch(0.560 0.140 240.0);
    --strata-dim:oklch(0.560 0.140 240.0 / .10);
    --strata-mid:oklch(0.560 0.140 240.0 / .25);
    --strata-glow:oklch(0.560 0.140 240.0 / .35);
  }
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:82px;overflow-x:hidden;color-scheme:dark}
body{background:var(--black);color:var(--text);font-family:var(--font);overflow-x:hidden;cursor:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button{cursor:none;font-family:inherit;border:none;background:none}


/* ── TYPOGRAPHY SYSTEM ──
   Manrope: body copy, descriptions, labels, navigation and form text.
   Sora: titles, subtitles and every call-to-action button. */
h1,h2,h3,h4,h5,h6,
.hh1,.sh2,.svc-info-title,.acc-title,
.strata-mark,.strata-sub-mark,.sph-t,
.pstep-t,.wi-t,.wcard-t,
.tm-name,.tm-role,.contact-info-t,.ptitle{
  font-family:var(--font-heading);
}
button,.skip-link,
.ncta,.btn-p,.btn-g,.svc-cta,.acc-cta,.btn-strata,.fsub,.pclose{
  font-family:var(--font-heading);
}

/* ── ACCESIBILIDAD: salto, foco y navegación por teclado ── */
.skip-link{position:fixed;top:12px;left:12px;z-index:10000;padding:11px 16px;background:var(--lime);color:var(--black);border-radius:8px;font-size:.78rem;font-weight:800;transform:translateY(-160%);transition:transform .2s var(--ease);box-shadow:0 8px 28px rgba(0,0,0,.45)}
.skip-link:focus{transform:translateY(0)}
main:focus{outline:none}
:where(a,button,input,select,textarea,[role="tab"],[role="button"]):focus-visible{outline:3px solid var(--lime);outline-offset:4px}
:where(input,select,textarea):focus-visible{outline-offset:2px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ── CUSTOM CURSOR ── */
#cDot{position:fixed;width:7px;height:7px;background:var(--lime);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);mix-blend-mode:difference;transition:width .2s,height .2s}
#cRing{position:fixed;width:34px;height:34px;border:1.5px solid var(--lime-mid);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .3s var(--ease-back),height .3s var(--ease-back),border-color .3s}
#cDot.h{width:4px;height:4px}
#cRing.h{width:54px;height:54px;border-color:var(--lime-glow)}
@media(hover:none){#cDot,#cRing{display:none}body{cursor:auto}button{cursor:pointer}}

/* ── GRAIN ── */
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px;opacity:.025}

/* ── LOADER ──
   logo-symbol.png = solo el isotipo sin texto */
#loader{position:fixed;inset:0;z-index:8888;background:var(--black);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:24px;transition:opacity .8s var(--ease),visibility .8s}
#loader.out{opacity:0;visibility:hidden;pointer-events:none}
.ld-sym{width:68px;height:68px;display:flex;align-items:center;justify-content:center;animation:ldBreathe 1.5s ease-in-out infinite alternate}
.ld-sym img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 22px var(--lime-glow))}
.ld-sym-fb{font-size:2.4rem;font-weight:800;color:var(--lime);display:none}
.ld-track{width:150px;height:1px;background:rgba(255,255,255,.06);overflow:hidden;border-radius:2px}
.ld-bar{height:100%;background:var(--lime);animation:ldFill 2s ease forwards}
.ld-num{font-size:.62rem;font-weight:700;letter-spacing:.14em;color:var(--text-dim)}
@keyframes ldBreathe{from{opacity:.35;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@keyframes ldFill{from{width:0}to{width:100%}}

/* ── PARTICLES CANVAS ── */
#cv{position:fixed;inset:0;z-index:0;pointer-events:none}

/* ════════════════════════════════════════════════
   NAV
   Logo: ./assets/logo.png
   Ajusta height en .nl img para cambiar tamaño
════════════════════════════════════════════════ */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 var(--gutter);height:70px;background:rgba(10,10,8,.0);backdrop-filter:blur(0);transition:background .4s,backdrop-filter .4s,border-color .4s;border-bottom:1px solid transparent}
nav.s{background:rgba(10,10,8,.95);backdrop-filter:blur(16px);border-color:var(--border)}
.nl{display:flex;align-items:center;gap:10px;text-decoration:none}
/* ← TAMAÑO LOGO NAV: cambia height clamp(36px,4.2vh,50px) */
.nl img{height:clamp(36px,4.2vh,50px);width:auto;object-fit:contain}
.nl-fb{font-size:1.3rem;font-weight:800;letter-spacing:.1em;color:var(--lime);display:none}
.nlinks{display:flex;align-items:center;gap:clamp(18px,2.5vw,38px)}
.nav-actions{display:flex;align-items:center;gap:12px}
.nlink{font-size:.74rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-dim);transition:color .25s;position:relative}
.nlink::after{content:'';position:absolute;bottom:-3px;left:0;width:0;height:1.5px;background:var(--lime);transition:width .3s var(--ease)}
.nlink:hover{color:var(--white)}
.nlink:hover::after{width:100%}
.ncta{display:flex;align-items:center;gap:8px;padding:9px 20px;background:var(--lime);color:var(--black);border-radius:8px;font-size:.74rem;font-weight:700;letter-spacing:.05em;transition:background .25s,transform .2s,box-shadow .25s}
.ncta:hover{background:var(--lime-hover);transform:translateY(-2px);box-shadow:0 8px 22px var(--lime-glow)}
.nmob{display:none;flex-direction:column;gap:5px;padding:6px;background:none;border:none}
.nmob span{width:22px;height:1.5px;background:var(--white);border-radius:2px;transition:.3s}

/* Mobile drawer */
.drawer{position:fixed;inset:0;z-index:200;background:rgba(10,10,8,.98);backdrop-filter:blur(20px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;opacity:0;visibility:hidden;transition:.4s var(--ease)}
.drawer.open{opacity:1;visibility:visible}
.drawer .nlink{font-size:1.3rem;letter-spacing:.04em}
.drawer .ncta{font-size:.9rem;padding:13px 30px}
.dclose{position:absolute;top:22px;right:var(--gutter);font-size:1.4rem;color:var(--text-dim);transition:color .25s}
.dclose:hover{color:var(--white)}

/* ════════════════════════════════════════════════
   HERO
════════════════════════════════════════════════ */
.hero{position:relative;min-height:100vh;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:90px var(--gutter) 0;overflow:hidden}
.hero-glow{position:absolute;right:-5%;top:5%;width:58vw;height:75vh;background:radial-gradient(ellipse at 55% 40%,rgba(21,38,26,.55) 0%,transparent 65%);filter:blur(70px);pointer-events:none}
.hero-left{position:relative;z-index:2;font-family:var(--font-hero)}
.hbadge{display:inline-flex;align-items:center;gap:9px;background:var(--lime-dim);border:1px solid var(--lime-mid);border-radius:100px;padding:6px 16px;font-size:.67rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--lime);margin-bottom:28px}
.hbadge-dot{width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px var(--lime-glow);animation:blink 2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
.hh1{font-size:clamp(2.6rem,5.2vw,5.2rem);font-weight:800;line-height:1.01;letter-spacing:-.045em;color:var(--white);margin-bottom:20px;opacity:0;transform:translateY(36px) rotateX(6deg);transform-origin:top;transition:opacity .9s var(--ease),transform .9s var(--ease)}
.hh1.rev{opacity:1;transform:translateY(0) rotateX(0)}
.hh1 em{font-style:normal;color:var(--lime)}
.hsub{font-size:clamp(.9rem,1.15vw,1.02rem);font-weight:500;color:var(--text-mid);line-height:1.76;max-width:470px;margin-bottom:36px;opacity:0;transform:translateY(24px);transition:opacity .8s .12s var(--ease),transform .8s .12s var(--ease)}
.hsub.rev{opacity:1;transform:translateY(0)}
.hacts{display:flex;align-items:center;gap:14px;flex-wrap:wrap;opacity:0;transform:translateY(20px);transition:opacity .7s .25s var(--ease),transform .7s .25s var(--ease)}
.hacts.rev{opacity:1;transform:translateY(0)}
.btn-p{display:flex;align-items:center;gap:9px;padding:15px 30px;background:var(--lime);color:var(--black);border-radius:10px;font-size:.9rem;font-weight:700;transition:background .25s,transform .22s,box-shadow .25s;border:none}
.btn-p:hover{background:var(--lime-hover);transform:translateY(-3px);box-shadow:0 12px 32px var(--lime-glow)}
.btn-p svg{width:15px;height:15px;transition:transform .25s}
.btn-p:hover svg{transform:translateX(4px)}
.btn-g{display:flex;align-items:center;gap:9px;padding:15px 26px;border:1.5px solid var(--border2);border-radius:10px;font-size:.86rem;font-weight:600;color:var(--text-mid);transition:.25s;background:transparent}
.btn-g:hover{border-color:var(--lime-mid);color:var(--white);background:var(--lime-dim)}

/* Hero right — mascota en video */
.hero-right{position:relative;height:100%;min-height:540px;display:flex;align-items:center;justify-content:center}
/* ← VIDEO MASCOTA: ajusta right/bottom/height para reposicionar */
.wolf-video{position:absolute;right:-20px;bottom:-60px;height:calc(100% + 60px);max-height:700px;width:auto;object-fit:contain;object-position:right bottom;filter:drop-shadow(-40px 20px 80px rgba(0,0,0,.75));opacity:0;transform:translateY(46px);transition:opacity 1s var(--ease),transform 1s var(--ease);background:transparent;-webkit-mask-image:radial-gradient(ellipse 62% 58% at 56% 50%,#000 55%,transparent 92%);mask-image:radial-gradient(ellipse 62% 58% at 56% 50%,#000 55%,transparent 92%)}
.wolf-video.rev{opacity:1;transform:translateY(0)}
.wolf-video.rev.float{animation:wFloat 7s ease-in-out infinite}
@keyframes wFloat{0%,100%{transform:translateY(0) rotate(.3deg)}50%{transform:translateY(-14px) rotate(-.3deg)}}

/* Stats bar */
.hstats{font-family:var(--font-hero);position:relative;z-index:2;grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--border);margin-top:40px}
.hstat{padding:22px 28px;border-right:1px solid var(--border);opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.hstat:last-child{border-right:none}
.hstat.rev{opacity:1;transform:translateY(0)}
.hstat-n{font-size:clamp(1.6rem,2.2vw,2.2rem);font-weight:800;color:var(--lime);line-height:1}
.hstat-l{font-size:.66rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-dim);margin-top:5px}

/* ════════════════════════════════════════════════
   SHARED SECTION STYLES
════════════════════════════════════════════════ */
section{position:relative;z-index:2}
.sp{padding:clamp(72px,10vh,120px) var(--gutter)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.65rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--lime)}
.eyebrow::before{content:'';width:20px;height:1px;background:var(--lime)}
.sh2{font-size:clamp(1.8rem,3.5vw,3.2rem);font-weight:800;line-height:1.08;letter-spacing:-.025em;color:var(--white);margin:14px 0 12px}
.ssub{font-size:clamp(.84rem,1vw,.95rem);color:var(--text-dim);line-height:1.75;max-width:500px}
.fu{opacity:0;transform:translateY(32px);transition:opacity .72s var(--ease),transform .72s var(--ease)}
.fu.v{opacity:1;transform:translateY(0)}
.fu:nth-child(2){transition-delay:.08s}.fu:nth-child(3){transition-delay:.16s}.fu:nth-child(4){transition-delay:.24s}.fu:nth-child(5){transition-delay:.32s}.fu:nth-child(6){transition-delay:.40s}

/* ════════════════════════════════════════════════
   SERVICE EXPLORER — explorador interactivo
   Izquierda: menú de áreas. Derecha: panel 3D único.
   Móvil: acordeón vertical.
════════════════════════════════════════════════ */
.svcs { background: var(--surface); }
.svcs-head { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end; margin-bottom:52px; }

/* ── Layout: menú + panel ── */
.svc-explorer {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  min-height: 520px;
}

/* ── LEFT: área menu ── */
.svc-menu {
  background: var(--surface2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 8px 0;
}
.svc-tab {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 14px;
  padding: 18px 24px;
  text-align: left;
  color: inherit;
  cursor: none;
  position: relative;
  transition: background .25s var(--ease);
  border-left: 2px solid transparent;
}
.svc-tab::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--lime-dim), transparent);
  opacity: 0;
  transition: opacity .3s;
}
.svc-tab:hover { background: rgba(255,255,255,.03); }
.svc-tab:focus-visible{z-index:2;background:var(--surface3);outline-offset:-3px}
.svc-tab.active {
  background: var(--surface3);
  border-left-color: var(--lime);
}
.svc-tab.active::after { opacity: 1; }
.svc-tab-num {
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--text-dim);
  min-width: 20px;
  transition: color .25s;
  font-variant-numeric: tabular-nums;
}
.svc-tab.active .svc-tab-num { color: var(--lime); }
.svc-tab-label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-dim);
  transition: color .25s;
  line-height: 1.3;
}
.svc-tab.active .svc-tab-label,
.svc-tab:hover .svc-tab-label { color: var(--white); }
.svc-tab-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--lime);
  margin-left: auto;
  opacity: 0;
  transform: scale(0);
  transition: opacity .25s, transform .3s var(--ease-back);
}
.svc-tab.active .svc-tab-dot { opacity: 1; transform: scale(1); }
.svc-menu-footer {
  margin-top: auto;
  padding: 20px 24px;
  border-top: 1px solid var(--border);
  font-size: .64rem;
  color: var(--text-dim);
  letter-spacing: .06em;
  line-height: 1.6;
}

/* ── RIGHT: panel 3D ── */
.svc-panel {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  perspective: 1200px;
}
.svc-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  opacity: 0;
  transform: translateX(18px) rotateY(4deg);
  transition: opacity .38s var(--ease), transform .38s var(--ease);
  pointer-events: none;
}
.svc-slide.active {
  opacity: 1;
  transform: translateX(0) rotateY(0);
  pointer-events: all;
}
.svc-slide.exit {
  opacity: 0;
  transform: translateX(-14px) rotateY(-3deg);
}

/* Panel visual area (SVG illustration) */
.svc-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  overflow: hidden;
}
.svc-visual-bg {
  position: absolute;
  inset: 0;
  opacity: .04;
  background-image: radial-gradient(circle at 30% 50%, var(--lime) 1px, transparent 1px),
                    radial-gradient(circle at 70% 50%, var(--lime) 1px, transparent 1px);
  background-size: 40px 40px;
}
.svc-visual svg { position: relative; z-index: 1; }
.win-clean {
  fill: rgba(100,200,255,.06);
  animation: winClean 3s ease-in-out infinite;
}
@keyframes winClean {
  0%,100% { fill: rgba(100,200,255,.06); }
  50%      { fill: rgba(255,255,255,.22); }
}

/* Panel info area — row layout: left text + right CTA */
.svc-info {
  padding: 22px 32px 26px;
  border-top: 1px solid var(--border);
  background: linear-gradient(to top, var(--surface2), transparent);
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}
.svc-info-left { flex: 1; min-width: 0; }
.svc-info-eyebrow {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.svc-info-eyebrow::before { content:''; width:14px; height:1px; background:var(--lime); }
.svc-info-title {
  font-size: clamp(1rem, 1.6vw, 1.4rem);
  font-weight: 800;
  color: var(--white);
  margin-bottom: 8px;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.svc-info-desc {
  font-size: .78rem;
  color: var(--text-dim);
  line-height: 1.68;
  margin-bottom: 12px;
}
.svc-caps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.svc-cap {
  padding: 3px 11px;
  border: 1px solid var(--border2);
  border-radius: 100px;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--text-mid);
  transition: border-color .25s, color .25s, background .25s;
}
.svc-slide.active .svc-cap { border-color: var(--lime-mid); color: var(--lime); background: var(--lime-dim); }
/* CTA horizontal — right side of info bar */
.svc-cta {
  flex-shrink: 0;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1.5px solid var(--lime-mid);
  border-radius: 10px;
  background: var(--lime-dim);
  font-size: .72rem;
  font-weight: 700;
  color: var(--lime);
  letter-spacing: .04em;
  white-space: nowrap;
  cursor: none;
  transition: background .25s, border-color .25s, transform .25s, box-shadow .25s;
  align-self: flex-end;
  margin-top: 14px;
}
.svc-cta:hover {
  background: var(--lime);
  color: var(--black);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px var(--lime-glow);
}
.svc-cta svg {
  width: 13px; height: 13px;
  writing-mode: horizontal-tb;
  transform: none;
}

/* ── MOBILE ACCORDION ── */
.svc-accordion { display: none; flex-direction: column; gap: 0; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.acc-item { border-bottom: 1px solid var(--border); }
.acc-item:last-child { border-bottom: none; }
.acc-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: var(--surface2);
  cursor: pointer;
  transition: background .25s;
  text-align: left;
}
.acc-trigger.open { background: var(--surface3); }
.acc-num { font-size: .58rem; font-weight: 700; letter-spacing: .12em; color: var(--lime); min-width: 18px; }
.acc-label { font-size: .82rem; font-weight: 600; color: var(--text-mid); flex: 1; }
.acc-trigger.open .acc-label { color: var(--white); }
.acc-chevron { width: 16px; height: 16px; color: var(--text-dim); transition: transform .3s var(--ease); }
.acc-trigger.open .acc-chevron { transform: rotate(180deg); color: var(--lime); }
.acc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s var(--ease);
  background: var(--surface);
}
.acc-body.open { max-height: 1000px; }
.acc-body-inner { padding: 20px; }
.acc-visual {
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  min-height: 160px;
  background: var(--surface2);
  border-radius: 12px;
  overflow: hidden;
  padding: 12px;
}
.acc-visual svg { max-width: 100%; height: auto; }
.acc-title { font-size: 1rem; font-weight: 700; color: var(--white); margin-bottom: 6px; }
.acc-desc { font-size: .78rem; color: var(--text-dim); line-height: 1.65; margin-bottom: 12px; }
.acc-caps { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.acc-cap { padding: 3px 11px; border: 1px solid var(--lime-mid); border-radius: 100px; font-size: .62rem; font-weight: 600; color: var(--lime); background: var(--lime-dim); }
.acc-cta { display:inline-flex;align-items:center;gap:7px;font-size:.72rem;font-weight:700;color:var(--lime); }
.acc-cta svg { width:13px;height:13px; }

/* ════════════════════════════════════════════════
   STRATA — micro-servicio integrado en Colsing
   Mismo lenguaje visual que el explorador de servicios.
   Color: lima de Colsing (no azul externo).
════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════
   STRATA — micro-sección integrada
   Minimalista, misma línea visual que el explorador
════════════════════════════════════════════════ */
.strata-sec { background: var(--black); }

.strata-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
}

/* Izquierda — identidad marca */
.strata-left {
  background: var(--surface2);
  border-right: 1px solid var(--border);
  padding: clamp(32px,4vw,52px);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.strata-label {
  font-size: .62rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-dim);
  margin-bottom: 20px;
  display: flex; align-items: center; gap: 8px;
}
.strata-label::before { content:''; width:20px; height:1px; background:var(--border2); }
.strata-mark {
  font-size: clamp(2.4rem,4vw,3.6rem);
  font-weight: 800; letter-spacing: -.04em;
  color: var(--white); line-height: 1; margin-bottom: 4px;
}
.strata-mark em { font-style: normal; color: var(--lime); }
.strata-sub-mark {
  font-size: .7rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-dim);
  margin-bottom: 28px;
}
.strata-desc {
  font-size: .84rem; color: var(--text-dim); line-height: 1.76;
  flex: 1; margin-bottom: 32px;
}
.strata-url-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 24px;
}
.strata-url-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--lime); box-shadow: 0 0 8px var(--lime-glow);
  animation: blink 2s ease-in-out infinite; flex-shrink: 0;
}
.strata-url-txt {
  font-size: .72rem; font-weight: 600;
  color: var(--lime); letter-spacing: .04em;
}
.btn-strata {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px; background: var(--lime); color: var(--black);
  border-radius: 9px; font-size: .78rem; font-weight: 700;
  transition: background .25s, transform .2s, box-shadow .25s;
  border: none; font-family: var(--font-heading); align-self: flex-start;
}
.btn-strata:hover { background: var(--lime-hover); transform: translateY(-2px); box-shadow: 0 8px 22px var(--lime-glow); }
.btn-strata svg { width: 13px; height: 13px; transition: transform .25s; }
.btn-strata:hover svg { transform: translateX(4px); }

/* Derecha — 4 capacidades PH: misma cuadrícula que svc-explorer */
.strata-right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5px;
  background: var(--border);
}
.strata-ph-card {
  background: var(--surface);
  padding: clamp(22px,2.5vw,32px);
  position: relative; overflow: hidden;
  transition: background .3s var(--ease);
  cursor: default;
}
.strata-ph-card::before {
  content: ''; position: absolute;
  top: 0; left: 0; width: 0; height: 2px;
  background: var(--lime); transition: width .45s var(--ease);
}
.strata-ph-card:hover { background: var(--surface2); }
.strata-ph-card:hover::before { width: 100%; }
.strata-ph-card:hover .sph-icon { border-color: var(--lime-mid); background: var(--lime-dim); }
.strata-ph-card:hover .sph-icon svg { color: var(--lime); }
.sph-icon {
  width: 36px; height: 36px; border-radius: 9px;
  border: 1.5px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px; transition: border-color .3s, background .3s;
}
.sph-icon svg { width: 17px; height: 17px; color: var(--text-dim); transition: color .3s; }
.sph-t { font-size: .82rem; font-weight: 700; color: var(--white); margin-bottom: 5px; }
.sph-d { font-size: .72rem; color: var(--text-dim); line-height: 1.62; }

@media(max-width:960px) {
  .strata-wrap { grid-template-columns: 1fr; }
  .strata-left { border-right: none; border-bottom: 1px solid var(--border); }
  .strata-right { grid-template-columns: 1fr 1fr; }
}
@media(max-width:640px) {
  .strata-right { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════
   PROCESS — animated timeline
════════════════════════════════════════════════ */
.proc { background: var(--surface); }
.proc-grid {
  display: grid; grid-template-columns: repeat(5,1fr);
  gap: 0; margin-top: 60px; position: relative;
}
/* Animated progress line — BEHIND nodes (z-index:-1) */
.proc-grid::before {
  content: ''; position: absolute;
  top: 42px; left: 8%; width: 0; height: 1px;
  background: var(--lime-mid); z-index: -1;
  transition: width 2s ease;
}
.proc-grid.line-done::before { width: 84%; }
/* Static bg track — also behind */
.proc-grid::after {
  content: ''; position: absolute;
  top: 42px; left: 8%; right: 8%; height: 1px;
  background: var(--border); z-index: -1;
}
/* Steps always in front */
.pstep { padding: 0 20px; position: relative; z-index: 2; }
.pnode {
  width: 84px; height: 84px; border-radius: 50%;
  border: 1.5px solid var(--border2); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 24px; position: relative;
  transition: border-color .6s, background .6s, box-shadow .6s;
  cursor: default;
}
/* Ping ring — only on active step */
.pnode::after {
  content: ''; position: absolute; inset: -7px; border-radius: 50%;
  border: 1.5px solid var(--lime-dim);
  opacity: 0; transform: scale(.8);
  transition: opacity .5s, transform .5s;
}
.pstep.v .pnode::after { opacity: 1; transform: scale(1); animation: nRing 2.8s ease-in-out infinite; }
@keyframes nRing { 0%,100%{transform:scale(1);opacity:.6} 50%{transform:scale(1.1);opacity:.15} }
.pstep.v .pnode {
  border-color: var(--lime-mid); background: var(--lime-dim);
  box-shadow: 0 0 0 6px var(--lime-dim);
}
.pstep.v .pnode svg { color: var(--lime); }
.pnode svg { width: 26px; height: 26px; color: var(--text-dim); transition: color .6s; }
.pnode-n {
  position: absolute; top: -10px; right: -10px;
  width: 24px; height: 24px; background: var(--border);
  border-radius: 50%; font-size: .6rem; font-weight: 800;
  color: var(--text-dim); display: flex; align-items: center; justify-content: center;
  transition: background .6s, color .6s;
}
.pstep.v .pnode-n { background: var(--lime); color: var(--black); }
.pstep-t { font-size: .86rem; font-weight: 700; color: var(--white); text-align: center; margin-bottom: 7px; transition: color .4s; }
.pstep.v .pstep-t { color: var(--lime); }
.pstep-d { font-size: .72rem; color: var(--text-dim); text-align: center; line-height: 1.6; }
/* Mobile proc */
@media(max-width:960px) {
  .proc-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .proc-grid::before, .proc-grid::after { display: none; }
  .pstep { padding: 0; }
}
@media(max-width:640px) {
  .proc-grid { grid-template-columns: 1fr; gap: 20px; }
  .pstep { display: flex; align-items: flex-start; gap: 16px; padding: 0; }
  .pnode { width: 52px; height: 52px; margin: 0; flex-shrink: 0; }
  .pnode svg { width: 20px; height: 20px; }
  .pnode-n { top: -6px; right: -6px; width: 18px; height: 18px; font-size: .52rem; }
  .pstep-t { text-align: left; }
  .pstep-d { text-align: left; }
}

/* ════════════════════════════════════════════════
   WHY COLSING
════════════════════════════════════════════════ */
.why{background:var(--black)}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,100px);align-items:center}
.why-items{display:flex;flex-direction:column;gap:14px;margin-top:32px}
.wi{display:flex;align-items:flex-start;gap:16px;padding:20px 24px;background:var(--surface);border:1px solid var(--border);border-radius:12px;transition:border-color .3s,background .3s,transform .3s}
.wi:hover{border-color:var(--lime-mid);background:var(--lime-dim);transform:translateX(6px)}
.wi-icon{flex-shrink:0;width:36px;height:36px;border-radius:9px;background:var(--lime-dim);border:1px solid var(--lime-mid);display:flex;align-items:center;justify-content:center}
.wi-icon svg{width:17px;height:17px;color:var(--lime)}
.wi-t{font-size:.86rem;font-weight:700;color:var(--white);margin-bottom:3px}
.wi-d{font-size:.74rem;color:var(--text-dim);line-height:1.55}
/* Floating cards stack */
.why-stack{position:relative;height:380px}
.wcard{
  position:absolute;background:var(--surface2);border:1px solid var(--border);
  border-radius:16px;padding:26px 30px;width:270px;
  transition:transform .45s var(--ease-back), box-shadow .45s, z-index 0s .45s, opacity .35s;
  cursor:default;
}
/* Default stacked positions */
.wcard:nth-child(1){top:0;left:0;transform:rotate(-2.5deg);z-index:3}
.wcard:nth-child(2){top:60px;left:60px;transform:rotate(1.5deg);z-index:2}
.wcard:nth-child(3){top:120px;left:30px;transform:rotate(-.8deg);z-index:1;background:var(--surface3);border-color:var(--lime-mid)}
/* When ANY card is hovered: spread and bring hovered to front */
.why-stack:hover .wcard{opacity:.55;transform:rotate(0);z-index:1}
.why-stack:hover .wcard:nth-child(1){transform:rotate(0) translate(-22px,-10px);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.why-stack:hover .wcard:nth-child(2){transform:rotate(0) translate(12px,-18px);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.why-stack:hover .wcard:nth-child(3){transform:rotate(0) translate(-4px,14px);box-shadow:0 8px 24px rgba(0,0,0,.25)}
/* The specific hovered card: full opacity, front, scale up */
.wcard:hover{
  opacity:1 !important;
  transform:rotate(0) scale(1.04) translateY(-6px) !important;
  z-index:10 !important;
  box-shadow:0 24px 48px rgba(0,0,0,.5), 0 0 0 1px var(--lime-mid) !important;
  background:var(--surface) !important;
  border-color:var(--lime-mid) !important;
  transition:transform .3s var(--ease-back), box-shadow .3s, opacity .2s, z-index 0s !important;
}
/* Ícono: fondo cuadrado con borde lima, más legible */
.wcard-icon{
  width:44px;height:44px;border-radius:11px;
  background:var(--lime-dim);border:1.5px solid var(--lime-mid);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:14px;
}
.wcard-icon svg{width:22px;height:22px;color:var(--lime)}
.wcard-t{
  font-size:.88rem;font-weight:700;color:var(--white);
  margin-bottom:8px;letter-spacing:-.01em;
}
.wcard-d{
  font-size:.76rem;color:var(--text-mid);line-height:1.65;
}

/* ════════════════════════════════════════════════
   ALIADOS — MÓDULO ACTIVO
   Los logos se presentan a color y sin alterar su identidad.
════════════════════════════════════════════════ */
#aliados{display:block}
.allies-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(14px,1.6vw,22px);
  margin-top:46px;
}
.ally-logo{
  display:flex;align-items:center;justify-content:center;
  height:88px;padding:14px;
  background:var(--surface2);
  border:1px solid var(--border2);
  border-radius:14px;
  transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease-back);
}
.ally-logo:hover{
  border-color:var(--lime-mid);
  background:var(--surface3);
  transform:translateY(-4px);
}
.ally-logo img{
  max-width:100%;max-height:100%;
  object-fit:contain;
  filter:none;
  opacity:1;
  transition:transform .35s var(--ease),opacity .35s var(--ease);
}
.ally-logo:hover img{filter:none;opacity:1}
.ally-fb{
  display:none;align-items:center;justify-content:center;
  width:100%;height:100%;
  font-family:var(--font-heading);font-size:.68rem;font-weight:700;
  letter-spacing:.04em;text-align:center;color:var(--text-dim);
}

/* ════════════════════════════════════════════════
   TEAM — MÓDULO ACTIVO
   Sección habilitada para visualización
   Agrega fotos en ./assets/team/nombre.jpg
════════════════════════════════════════════════ */
#team{display:block;background:var(--surface)} /* Sección Equipo habilitada. */
.team-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(24px,3vw,46px);
  margin-top:58px;
  align-items:start;
}
.tmember{
  position:relative;
  min-width:0;
  text-align:center;
  transition:transform .38s var(--ease-back);
}
.tmember:hover{transform:translateY(-10px)}
.tm-portrait{
  position:relative;
  width:min(100%,260px);
  aspect-ratio:1 / 1.08;
  margin:0 auto 22px;
  isolation:isolate;
}
.tm-portrait::before{
  content:'';
  position:absolute;
  inset:12% 3% 4% 4%;
  z-index:-1;
  background:linear-gradient(145deg,var(--lime) 0%,rgba(222,242,44,.74) 58%,rgba(222,242,44,.28) 100%);
  border-radius:42% 58% 54% 46% / 48% 38% 62% 52%;
  transform:rotate(-5deg);
  box-shadow:0 24px 60px rgba(0,0,0,.34),0 0 44px rgba(222,242,44,.08);
  transition:transform .48s var(--ease-back),border-radius .48s var(--ease-back),filter .4s;
}
.tmember:nth-child(even) .tm-portrait::before{
  border-radius:58% 42% 45% 55% / 38% 55% 45% 62%;
  transform:rotate(5deg);
}
.tmember:nth-child(3) .tm-portrait::before{
  border-radius:46% 54% 61% 39% / 57% 42% 58% 43%;
  transform:rotate(-2deg);
}
.tmember:hover .tm-portrait::before{
  transform:rotate(0) scale(1.045);
  border-radius:50% 50% 44% 56% / 44% 55% 45% 56%;
  filter:brightness(1.05);
}
.tm-photo{
  position:absolute;
  inset:0;
  overflow:hidden;
  border-radius:45% 55% 50% 50% / 42% 42% 58% 58%;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.tm-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  filter:grayscale(1) contrast(1.06);
  transform:scale(1.015);
  transition:transform .52s var(--ease-back),filter .45s;
}
.tmember:hover .tm-photo img{
  transform:scale(1.065) translateY(-2px);
  filter:grayscale(.18) contrast(1.04);
}
.tm-info{padding:0 6px}
.tm-role{
  font-size:.69rem;
  font-weight:700;
  letter-spacing:.095em;
  text-transform:uppercase;
  color:var(--lime);
  margin-bottom:7px;
}
.tm-name{
  font-size:clamp(1rem,1.35vw,1.22rem);
  line-height:1.15;
  font-weight:800;
  color:var(--white);
  letter-spacing:-.025em;
}
@media(max-width:980px){
  .team-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 34px}
  .tm-portrait{max-width:280px}
  .allies-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:560px){
  .team-grid{grid-template-columns:1fr;gap:48px;margin-top:44px}
  .allies-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .tm-portrait{width:min(82vw,290px)}
}
@media(prefers-reduced-motion:reduce){
  .tmember,.tm-portrait::before,.tm-photo img{transition:none!important}
  .tmember:hover{transform:none}
}
/* Datos de los miembros del equipo
   Descomentar y agregar foto ./assets/team/nixon.jpg etc. */
/* Nixon R. Pabón — Fundador y CEO
   Nixon Pabón Medina — Director
   Jenniffer del Pilar Pabón — Directora de Salud
   Nicolas Pabón — Director de TI */

/* ════════════════════════════════════════════════
   CONTACT
════════════════════════════════════════════════ */
.contact{background:var(--surface)}
.contact-inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,90px);align-items:start}
.contact-eyebrow{margin-bottom:14px}
.contact-info-t{font-size:clamp(1.6rem,2.8vw,2.6rem);font-weight:800;line-height:1.1;color:var(--white);letter-spacing:-.02em;margin-bottom:16px}
.contact-info-t em{font-style:normal;color:var(--lime)}
.contact-info-b{font-size:.88rem;color:var(--text-dim);line-height:1.75;margin-bottom:36px;max-width:360px}
.channels{display:flex;flex-direction:column;gap:12px}
.ch{display:flex;align-items:center;gap:16px;padding:17px 20px;background:var(--surface2);border:1px solid var(--border);border-radius:12px;transition:border-color .3s,background .3s,transform .3s}
.ch-static{cursor:default}
.ch:hover{border-color:var(--lime-mid);background:var(--lime-dim);transform:translateX(6px)}
.ch-icon{flex-shrink:0;width:38px;height:38px;border-radius:9px;background:var(--lime-dim);border:1px solid var(--lime-mid);display:flex;align-items:center;justify-content:center}
.ch-icon svg{width:18px;height:18px;color:var(--lime)}
.ch-l{font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);margin-bottom:2px}
.ch-v{font-size:.86rem;font-weight:600;color:var(--white)}

/* Contact form */
.cform{background:var(--surface2);border:1px solid var(--border);border-radius:20px;padding:clamp(28px,4vw,44px)}
.cform h3{font-size:1.3rem;font-weight:700;color:var(--white);margin-bottom:6px}
.cform p{font-size:.82rem;color:var(--text-dim);margin-bottom:28px;line-height:1.6}
.fg{margin-bottom:16px}
.fl{display:block;font-size:.67rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);margin-bottom:7px}
.ff{width:100%;background:var(--surface3);border:1.5px solid var(--border);border-radius:10px;padding:13px 17px;font-size:.86rem;color:var(--white);font-family:var(--font);outline:none;transition:border-color .3s,background .3s;resize:none}
.ff::placeholder{color:rgba(255,255,255,.50);opacity:1}
.ff:focus{border-color:var(--lime);background:var(--lime-dim)}
.ff.err{border-color:#ff5a5a}
.fr2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fsel{width:100%;background:var(--surface3);border:1.5px solid var(--border);border-radius:10px;padding:13px 17px;font-size:.86rem;color:var(--white);font-family:var(--font);outline:none;transition:border-color .3s;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,.35)' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center}
.fsel:focus{border-color:var(--lime)}
.fsel option{background:var(--surface3)}
.ferr{font-size:.68rem;color:#ff8080;margin-top:4px;display:none}
.ferr.show{display:block}
.fsub{width:100%;display:flex;align-items:center;justify-content:space-between;padding:15px 22px;background:var(--lime);color:var(--black);border:none;border-radius:10px;font-size:.88rem;font-weight:700;font-family:var(--font-heading);transition:background .25s,transform .2s,box-shadow .25s;margin-top:4px}
.fsub:hover{background:var(--lime-hover);transform:translateY(-2px);box-shadow:0 10px 26px var(--lime-glow)}
.fsub svg{width:17px;height:17px}
.fsub.sending{opacity:.7;pointer-events:none}

/* ── POPUP ── */
.popup-bg{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s}
.popup-bg.show{opacity:1;visibility:visible}
.popup-box{background:var(--surface);border:1px solid var(--lime-mid);border-radius:22px;padding:clamp(30px,4vw,48px) clamp(26px,3.5vw,44px);max-width:400px;width:100%;text-align:center;transform:scale(.86) translateY(22px);transition:transform .5s var(--ease-back);box-shadow:0 40px 80px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.04);position:relative}
.popup-bg.show .popup-box{transform:scale(1) translateY(0)}
.popup-box::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:68px;height:2px;background:var(--lime);border-radius:0 0 4px 4px;box-shadow:0 0 18px var(--lime-glow)}
.pw{width:76px;height:76px;border-radius:50%;overflow:hidden;margin:0 auto 16px;border:2px solid var(--lime-mid);box-shadow:0 0 22px var(--lime-dim);background:rgba(21,38,26,.5)}
.pw img{width:100%;height:100%;object-fit:cover;object-position:top}
.pcheck{width:50px;height:50px;border:2px solid var(--lime);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;animation:chkPop .5s .3s both}
@keyframes chkPop{from{transform:scale(0) rotate(-45deg)}to{transform:scale(1) rotate(0)}}
.pcheck svg{width:22px;height:22px;color:var(--lime)}
.ptitle{font-size:1.35rem;font-weight:700;color:var(--white);margin-bottom:9px}
.psub{font-size:.83rem;color:var(--text-dim);line-height:1.65;margin-bottom:14px}
.ppill{display:inline-block;background:var(--lime-dim);border:1px solid var(--lime-mid);border-radius:100px;padding:4px 15px;font-size:.74rem;font-weight:600;color:var(--lime);margin-bottom:26px;word-break:break-all}
.pclose{width:100%;background:var(--lime);color:var(--black);border:none;border-radius:10px;padding:13px;font-size:.88rem;font-weight:700;font-family:var(--font-heading);transition:.25s var(--ease)}
.pclose:hover{background:var(--lime-hover);transform:translateY(-2px);box-shadow:0 8px 22px var(--lime-glow)}

/* ── WA FAB ──
   Número: cambia wa.me/57XXXXXXXXXX en el HTML */
.wafab{position:fixed;bottom:30px;right:30px;z-index:80;width:54px;height:54px;background:var(--lime);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--black);box-shadow:0 8px 26px var(--lime-glow);transition:transform .3s var(--ease),box-shadow .3s}
.wafab::before{content:'';position:absolute;inset:-8px;border-radius:50%;border:1.5px solid var(--lime-mid);animation:waPing 2.4s ease-out infinite}
@keyframes waPing{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.8);opacity:0}}
.wafab:hover{transform:scale(1.1);box-shadow:0 12px 34px var(--lime-glow)}
.wafab svg{width:25px;height:25px}

/* ── FOOTER ── */
footer{background:var(--surface);border-top:1px solid var(--border);padding:28px var(--gutter);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;position:relative;z-index:2}
.fl-logo img{height:34px;object-fit:contain}
.fl-logo-fb{display:none;font-size:.95rem;font-weight:800;letter-spacing:.1em;color:var(--lime)}
.fcopy{font-size:.7rem;color:var(--text-dim)}
.flinks{display:flex;gap:20px}
.flink{font-size:.7rem;color:var(--text-dim);transition:color .25s}
.flink:hover{color:var(--lime)}

/* ════════════════════════════════════════════════
   SERVICE INFO ROW — CTA right-aligned
════════════════════════════════════════════════ */
.svc-info-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.svc-info-row .svc-caps { flex: 1; }
.svc-info-row .svc-cta  { flex-shrink: 0; white-space: nowrap; }

/* ════════════════════════════════════════════════
   MONTAJE DE ANIMACIÓN EN ACORDEÓN (mobile)
   Recibe la misma instancia SVG usada en escritorio
════════════════════════════════════════════════ */
.acc-mini-visual {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px 4px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
}
.acc-mini-visual svg { max-width: 100%; height: auto; }

/* ════════════════════════════════════════════════
   PROCESO — animated steps
   Cada paso se ilumina en secuencia on-scroll
════════════════════════════════════════════════ */
.proc-anim-wrap {
  position: relative;
  margin-top: 64px;
}
/* Progress line animada */
.proc-line-track {
  position: absolute;
  top: 42px; left: 8%; right: 8%; height: 1px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
}
.proc-line-fill {
  height: 100%;
  background: linear-gradient(to right, var(--lime), rgba(222,242,44,.3));
  width: 0;
  transition: width 1.8s cubic-bezier(.4,0,.2,1);
}
.proc-anim-wrap.started .proc-line-fill { width: 100%; }

.proc-grid {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 0;
  position: relative;
}
/* Each step pulses in sequence */
.pstep { padding: 0 16px; position: relative; z-index: 1; }
.pstep.seq-anim .pnode {
  animation: stepPulse .5s var(--ease-back) forwards;
}
@keyframes stepPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.12); box-shadow: 0 0 28px var(--lime-glow); }
  100% { transform: scale(1); }
}

/* ════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════ */
@media(max-width:960px){
  .hero{grid-template-columns:1fr;padding-top:100px;padding-bottom:20px}
  .hero-right{min-height:320px;margin-top:36px}
  .wolf-video{height:100%;max-height:420px;right:-16px}
  .hstats{grid-template-columns:repeat(2,1fr)}
  .hstat:nth-child(2){border-right:none}
  .hstat:nth-child(3){border-top:1px solid var(--border)}
  .hstat:nth-child(4){border-top:1px solid var(--border);border-right:none}
  .svcs-head{grid-template-columns:1fr}
  .svcs-grid{grid-template-columns:1fr 1fr}
  .sc.wide{grid-column:auto;display:block}
  .sc.wide .sc-vis{display:none}
  .strata-inner{grid-template-columns:1fr}
  .proc-grid{grid-template-columns:1fr 1fr;gap:32px}
  /* proc-grid before already handled */
  .why-grid{grid-template-columns:1fr}
  .why-stack{display:none}
  .contact-inner{grid-template-columns:1fr}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .nlinks{display:none}
  .nmob{display:flex}
}
@media(max-width:640px){
  .hh1{font-size:2.3rem}
  .svcs-grid{grid-template-columns:1fr}
  .sc.wide{grid-column:auto}
  .hstats{grid-template-columns:1fr 1fr}
  .proc-grid{grid-template-columns:1fr}
  .fr2{grid-template-columns:1fr}
  footer{flex-direction:column;align-items:flex-start;gap:10px}
  .flinks{flex-wrap:wrap;gap:12px}
  .wafab{bottom:20px;right:20px;width:50px;height:50px}
  .wafab svg{width:22px;height:22px}
  .team-grid{grid-template-columns:1fr}
  /* Accordion full width on tiny screens */
  .acc-mini-visual svg { max-width: 100%; }
  .svc-accordion { display: flex !important; }
  .svc-explorer  { display: none !important; }
  /* Proceso single column */
  .proc-line-track { display: none; }
  .pstep { padding: 0 0 28px 0; }
}


/* ════════════════════════════════════════════════
   CORRECCIONES SINCRONIZADAS — COLSING 2026
════════════════════════════════════════════════ */
.service-motion{max-width:100%;height:auto;overflow:visible}
.service-motion *{transform-box:fill-box}

/* STRATA integrada a COLSING */
.strata-sec{background:var(--black);overflow:hidden}
.strata-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:42px}
.strata-heading .sh2 em{font-style:normal;color:var(--lime)}
.strata-integrated{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);border:1px solid var(--border);border-radius:20px;overflow:hidden;background:var(--surface)}
.strata-services{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);order:1}
.strata-services .strata-ph-card{min-height:190px}
.strata-identity{order:2;padding:clamp(34px,4vw,56px);display:flex;flex-direction:column;justify-content:center;background:linear-gradient(145deg,var(--surface2),var(--surface));border-left:1px solid var(--border);position:relative;overflow:hidden}
.strata-identity::after{content:'';position:absolute;right:-80px;bottom:-100px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,var(--lime-dim),transparent 68%);pointer-events:none}
.strata-identity .strata-label{color:var(--lime);margin-bottom:16px}
.strata-identity .strata-label::before{background:var(--lime)}
.strata-identity .strata-mark{font-size:clamp(2.8rem,5vw,4.8rem);margin-bottom:6px}
.strata-identity .strata-mark em{color:var(--lime);font-style:normal}
.strata-site-brand{display:flex;align-items:center;gap:11px;margin-bottom:20px;position:relative;z-index:1;width:max-content;padding:7px 11px 7px 8px;border:1px solid var(--border2);border-radius:11px;background:rgba(255,255,255,.025)}
.strata-site-brand img{width:32px;height:32px;object-fit:contain;border-radius:7px;background:var(--surface3)}
.strata-site-fallback{display:none;width:32px;height:32px;border-radius:7px;align-items:center;justify-content:center;background:var(--lime);color:var(--black);font-size:1rem;font-weight:800}
.strata-site-wordmark{font-size:.7rem;font-weight:800;letter-spacing:.13em;color:var(--white)}
.strata-site-wordmark small{display:block;margin-top:2px;font-size:.52rem;font-weight:600;letter-spacing:.16em;color:var(--text-dim)}
.strata-identity .strata-sub-mark{font-size:.78rem;color:var(--white);letter-spacing:.18em;margin-bottom:28px}
.strata-identity .strata-desc{flex:none;position:relative;z-index:1}
.strata-url-row,.btn-strata{position:relative;z-index:1}

/* Proceso secuencial: conectores por tramos, sin tocar los nodos */
.proc-anim-wrap{position:relative;margin-top:60px}
.proc-line-track{display:none!important}
.proc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative;margin-top:0;overflow:visible}
.proc-grid::before,.proc-grid::after{display:none!important}
.pstep{padding:0 16px;position:relative;z-index:2;opacity:.48;transform:translateY(10px);transition:opacity .45s var(--ease),transform .45s var(--ease);overflow:visible}
.pstep:not(:last-child)::before,.pstep:not(:last-child)::after{content:'';position:absolute;top:42px;left:calc(50% + 52px);right:calc(-50% + 52px);height:1px;z-index:0;pointer-events:none}
.pstep:not(:last-child)::before{background:rgba(255,255,255,.075)}
.pstep:not(:last-child)::after{background:linear-gradient(90deg,rgba(222,242,44,.16),rgba(222,242,44,.48),rgba(222,242,44,.16));transform:scaleX(0);transform-origin:left center;transition:transform .58s cubic-bezier(.4,0,.2,1)}
.pstep.link-active:not(:last-child)::after,.pstep.is-complete:not(:last-child)::after{transform:scaleX(1)}
.pstep-copy{transition:transform .45s var(--ease),opacity .45s var(--ease);opacity:.65;transform:translateY(8px)}
.pstep .pnode{position:relative;z-index:2;transition:transform .45s var(--ease),border-color .45s,background .45s,box-shadow .45s}
.pstep .pnode::after{animation:none!important}
.pstep.is-active,.pstep.is-complete{opacity:1;transform:translateY(0)}
.pstep.is-active .pnode{transform:scale(1.08);border-color:var(--lime);background:var(--lime-dim);box-shadow:0 0 22px rgba(222,242,44,.18)}
.pstep.is-complete .pnode{border-color:var(--lime-mid);background:var(--lime-dim);box-shadow:0 0 0 5px var(--lime-dim)}
.pstep.is-active .pnode svg,.pstep.is-complete .pnode svg{color:var(--lime)}
.pstep.is-active .pnode-n,.pstep.is-complete .pnode-n{background:var(--lime);color:var(--black)}
.pstep.is-active .pstep-t{color:var(--lime)}
.pstep.is-active .pstep-copy,.pstep.is-complete .pstep-copy{opacity:1;transform:translateY(0)}
.pstep:hover{opacity:1}
.pstep:hover .pnode{border-color:var(--lime-mid);transform:translateY(-3px)}

/* Móvil: usa los SVG completos y animados del portafolio */
.acc-mini-visual{padding:16px;background:var(--surface2);min-height:210px;overflow:hidden}
.acc-mini-visual .service-motion,.acc-mini-visual>svg{width:100%;height:auto;max-height:300px}
.acc-body:not(.open) svg *{animation-play-state:paused!important}
.acc-body.open svg *{animation-play-state:running}

@media(max-width:960px){
  .strata-integrated{grid-template-columns:1fr}
  .strata-identity{order:1;border-left:none;border-bottom:1px solid var(--border)}
  .strata-services{order:2}
  .proc-grid{grid-template-columns:1fr;gap:18px}
  .pstep{display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:start;padding:0 0 12px}
  .pnode{width:52px!important;height:52px!important;margin:0!important;background:var(--surface)!important}
  .pstep-copy{padding-top:4px}
  .pstep:not(:last-child)::before,.pstep:not(:last-child)::after{left:25px;right:auto;top:59px;bottom:-7px;width:1px;height:auto}
  .pstep:not(:last-child)::after{transform:scaleY(0);transform-origin:top center}
  .pstep.link-active:not(:last-child)::after,.pstep.is-complete:not(:last-child)::after{transform:scaleY(1)}
}
@media(max-width:640px){
  .strata-services{grid-template-columns:1fr}
  .strata-services .strata-ph-card{min-height:0}
  .strata-identity{padding:32px 26px}
  .acc-mini-visual{min-height:190px;padding:10px}
}

/* ════════════════════════════════════════════════
   REVISIÓN 3D VALIDADA — COLSING
   Profundidad visible y controlada sin WebGL.
════════════════════════════════════════════════ */
:root{
  --panel-rx:-.65deg;
  --panel-ry:.8deg;
  --visual-shift-x:0px;
  --visual-shift-y:0px;
  --strata-grid-y:0px;
  --strata-grid-x:0px;
  --proc-glow-y:48%;
}
section{perspective:1500px}
.fu{transform:translate3d(0,32px,-28px) scale(.985)}
.fu.v{transform:translate3d(0,0,0) scale(1)}

/* Portafolio: volumen, reflejo y profundidad por capas. */
.svc-explorer{
  perspective:1700px;transform-style:preserve-3d;isolation:isolate;overflow:visible;
  box-shadow:0 42px 110px rgba(0,0,0,.46),0 0 0 1px rgba(222,242,44,.035);
}
.svc-explorer::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.34;
  background-image:linear-gradient(rgba(222,242,44,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(222,242,44,.045) 1px,transparent 1px);
  background-size:28px 28px;mask-image:linear-gradient(90deg,transparent 12%,#000 45%,#000 100%);
  transform:translateZ(-70px) scale(1.035);
}
.svc-menu{position:relative;z-index:6;transform:translateZ(30px);box-shadow:18px 0 42px rgba(0,0,0,.28)}
.svc-panel{
  position:relative;z-index:2;transform-style:preserve-3d;
  transform:rotateX(var(--panel-rx)) rotateY(var(--panel-ry)) translateZ(2px);
  transform-origin:center;will-change:transform;
  transition:transform .2s ease-out,box-shadow .3s ease;
  box-shadow:0 28px 74px rgba(0,0,0,.35),inset 0 1px rgba(255,255,255,.025);
}
.svc-panel::before{
  content:'';position:absolute;inset:0;z-index:8;pointer-events:none;
  border:1px solid rgba(222,242,44,.075);
  background:linear-gradient(115deg,rgba(255,255,255,.035),transparent 24%,transparent 72%,rgba(222,242,44,.025));
}
.svc-panel.is-resting{box-shadow:0 30px 82px rgba(0,0,0,.4),0 0 46px rgba(222,242,44,.025)}
.svc-slide{transform-style:preserve-3d}
.svc-slide .svc-visual-bg{transform:translateZ(-38px) scale(1.08);transition:transform .22s ease-out}
.svc-slide.active .svc-visual{transform-style:preserve-3d}
.svc-slide:not([data-slide="4"]) .svc-visual>svg{
  transform:translate3d(var(--visual-shift-x),var(--visual-shift-y),42px);
  transform-origin:center;transition:transform .2s ease-out;will-change:transform;
  filter:drop-shadow(0 20px 24px rgba(0,0,0,.16));
}
.svc-slide[data-slide="4"] .svc-visual>svg{transform:translateZ(30px)}
.svc-slide .svc-info{position:relative;z-index:7;transform:translateZ(24px)}
.svc-slide .svc-cta{transform:translateZ(34px)}


/* Corrección de nitidez: Diseño no rasteriza sus textos bajo transformaciones 3D. */
.svc-explorer.design-crisp .svc-panel{transform:none}
.svc-explorer.design-crisp .svc-slide[data-slide="0"] .svc-visual>svg{
  transform:none!important;filter:none!important;will-change:auto;
}
.svc-explorer.design-crisp .svc-slide[data-slide="0"] .svc-visual-bg{transform:none}

/* STRATA: plano arquitectónico en perspectiva y tarjetas elevadas. */
.strata-sec{isolation:isolate;--strata-grid-y:0px;--strata-grid-x:0px}
.strata-sec::before{
  content:'';position:absolute;z-index:0;left:-12%;right:-12%;bottom:-210px;height:560px;pointer-events:none;
  background-image:linear-gradient(rgba(222,242,44,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(222,242,44,.075) 1px,transparent 1px);
  background-size:44px 44px;mask-image:linear-gradient(to top,rgba(0,0,0,.92),transparent 84%);
  transform:perspective(760px) rotateX(63deg) translate3d(var(--strata-grid-x),var(--strata-grid-y),-80px);
  transform-origin:center bottom;opacity:.62;will-change:transform;
}
.strata-sec::after{
  content:'';position:absolute;z-index:0;right:5%;top:18%;width:420px;height:420px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(222,242,44,.075),transparent 68%);filter:blur(10px);
}
.strata-sec>*{position:relative;z-index:1}
.strata-integrated{
  perspective:1400px;transform-style:preserve-3d;
  transform:rotateX(.8deg);transform-origin:center top;
  box-shadow:0 38px 100px rgba(0,0,0,.34),0 0 0 1px rgba(222,242,44,.035);
}
.strata-services{transform:translateZ(12px)}
.strata-identity{transform:translateZ(28px)}
.strata-ph-card{transform-style:preserve-3d;transition:transform .32s var(--ease-back),background .3s,border-color .3s}
.strata-ph-card:hover{transform:translate3d(0,-5px,24px)}
.strata-ph-card .sph-icon{transform:translateZ(18px);transition:transform .3s var(--ease-back),border-color .3s,background .3s}
.strata-ph-card:hover .sph-icon{transform:translateZ(34px) translateY(-2px)}

/* Experiencia 3D sin iluminación ligada al cursor. */


/* Cómo trabajamos: dependencia visual y avance real en profundidad. */
.proc{isolation:isolate;--proc-glow-y:48%}
.proc::before{
  content:'';position:absolute;inset:10% 3% 3%;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at 50% var(--proc-glow-y),rgba(222,242,44,.085),transparent 63%);
  transform:translateZ(-90px);
}
.proc>*{position:relative;z-index:1}
.proc-anim-wrap{perspective:1400px;transform-style:preserve-3d}
.pstep{
  transform:translate3d(0,15px,-44px) scale(.955);transform-style:preserve-3d;
  transition:opacity .45s var(--ease),transform .52s var(--ease-back),filter .45s ease;
  filter:saturate(.62);
}
.pstep:not(:last-child)::before,.pstep:not(:last-child)::after{height:2px;left:calc(50% + 57px);right:calc(-50% + 57px)}
.pstep:not(:last-child)::before{background:rgba(255,255,255,.055)}
.pstep:not(:last-child)::after{
  background:linear-gradient(90deg,rgba(222,242,44,.08),rgba(222,242,44,.7),rgba(222,242,44,.18));
  background-size:180% 100%;box-shadow:0 0 10px rgba(222,242,44,.13);
}
.pstep.link-active:not(:last-child)::after{animation:procLinkTravel .88s ease-out both}
@keyframes procLinkTravel{0%{background-position:100% 0;filter:brightness(.75)}100%{background-position:0 0;filter:brightness(1.2)}}
.pstep.is-active{transform:translate3d(0,-8px,54px) scale(1.035);filter:saturate(1)}
.pstep.is-complete{transform:translate3d(0,0,8px) scale(1);filter:saturate(.9)}
.pstep.is-pending{transform:translate3d(0,15px,-44px) scale(.955)}
.pstep .pnode{transform-style:preserve-3d}
.pstep.is-active .pnode{transform:translateZ(32px) scale(1.1);box-shadow:0 0 0 7px rgba(222,242,44,.065),0 0 34px rgba(222,242,44,.22)}
.pstep.is-complete .pnode{transform:translateZ(10px)}
.pstep.is-active .pstep-copy{transform:translate3d(0,0,18px)}
.pstep.is-complete .pstep-copy{transform:translate3d(0,0,6px)}

@media(max-width:960px){
  .svc-explorer{perspective:none}
  .svc-explorer::before,.svc-explorer::after,.svc-panel::before{display:none}
  .svc-menu,.svc-panel,.svc-slide .svc-info,.svc-slide .svc-visual-bg,.svc-slide .svc-visual>svg,.svc-slide .svc-cta{transform:none!important}
  .strata-sec::before{height:390px;bottom:-160px;opacity:.38}
  .strata-integrated,.strata-services,.strata-identity{transform:none}
  .pstep:not(:last-child)::before,.pstep:not(:last-child)::after{left:25px;right:auto;height:auto;width:2px}
  .pstep,.pstep.is-active,.pstep.is-complete,.pstep.is-pending{transform:none;filter:none}
  .pstep.is-active .pnode{transform:scale(1.07)}
  .pstep.is-complete .pnode{transform:none}
}

@media(prefers-reduced-motion:reduce){
  .service-motion *{animation:none!important;transition-duration:.01ms!important}
  .design-visual{--reduced-motion:1}
  .tech-scene{transition:none!important}
  .technology-visual[data-tech-state="terminal"] .tech-code{opacity:1!important;clip-path:inset(0 0 0 0)!important}
  .technology-visual .tech-cursor{opacity:0!important}
  .technology-visual .bio-ridge{stroke-dashoffset:0!important;opacity:1!important}
  .technology-visual .tech-scan{opacity:0!important}
  .proc-line-fill,.pstep,.pstep-copy,.pnode{transition-duration:.01ms!important}
  .svc-panel,.svc-menu,.svc-slide .svc-info,.svc-slide .svc-visual-bg,.svc-slide .svc-visual>svg,.svc-slide .svc-cta,.strata-sec::before,.strata-integrated,.strata-services,.strata-identity{transform:none!important;transition:none!important}
  .pstep,.pstep.is-active,.pstep.is-complete,.pstep.is-pending,.pstep .pnode{transform:none!important;filter:none!important}
}



/* ── TÍTULOS DE SECCIÓN: entrada sin destello ──
   Sin JavaScript permanecen visibles. Con JavaScript se preparan ocultos antes del primer render. */
.title-reveal{
  opacity:1;
  transform:none;
  visibility:visible;
}
.js .title-reveal{
  opacity:0;
  transform:translate3d(-32px,0,0);
  transition:opacity .78s var(--ease),transform .78s var(--ease);
  will-change:opacity,transform;
}
.js .title-reveal.is-title-visible{
  opacity:1;
  transform:translate3d(0,0,0);
}
.js .title-reveal.title-delay{
  transition-delay:0s;
}
.js .title-reveal.title-delay.is-title-visible{
  transition-delay:.10s;
}
@media(prefers-reduced-motion:reduce){
  .js .title-reveal,.js .title-reveal.is-title-visible{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }
}


@media (prefers-contrast: more){
  :root{--text-dim:rgba(255,255,255,.72);--text-mid:rgba(255,255,255,.84);--border:rgba(255,255,255,.18);--border2:rgba(255,255,255,.28)}
  .nlink,.svc-tab-label,.svc-tab-num{font-weight:700}
}


/* ════════════════════════════════════════════════
   SELECTOR DE IDIOMA — ES / EN
   Mantiene el cursor personalizado y replica el patrón compacto de STRATA.
════════════════════════════════════════════════ */
.lang-selector{position:relative;z-index:4;font-family:var(--font)}
.lang-toggle{display:flex;align-items:center;gap:7px;min-height:38px;padding:7px 10px;border:1px solid var(--border2);border-radius:9px;background:rgba(17,17,16,.72);color:var(--text-mid);font-family:var(--font-heading);font-size:.7rem;font-weight:700;letter-spacing:.07em;transition:border-color .25s,background .25s,color .25s,transform .2s}
.lang-toggle:hover,.lang-selector.is-open .lang-toggle{border-color:var(--lime-mid);background:var(--surface2);color:var(--white)}
.lang-toggle:hover{transform:translateY(-1px)}
.lang-flag{font-size:1.05rem;line-height:1;filter:saturate(.9)}
.lang-code{min-width:19px;text-align:center}
.lang-chevron{transition:transform .25s var(--ease)}
.lang-selector.is-open .lang-chevron{transform:rotate(180deg)}
.lang-menu{position:absolute;top:calc(100% + 9px);right:0;width:178px;padding:7px;background:rgba(17,17,16,.98);border:1px solid var(--border2);border-radius:12px;box-shadow:0 18px 48px rgba(0,0,0,.48);opacity:0;visibility:hidden;transform:translateY(-7px) scale(.98);transform-origin:top right;transition:opacity .2s,visibility .2s,transform .2s var(--ease);backdrop-filter:blur(18px)}
.lang-selector.is-open .lang-menu{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.lang-option{width:100%;display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:8px;padding:10px;border-radius:8px;color:var(--text-mid);font-family:var(--font-heading);font-size:.78rem;text-align:left;transition:background .2s,color .2s}
.lang-option:hover,.lang-option:focus-visible{background:var(--lime-dim);color:var(--white)}
.lang-option.is-active{background:var(--lime-dim);color:var(--lime)}
.lang-option small{font-family:var(--font-heading);font-size:.6rem;letter-spacing:.09em;opacity:.78}
.lang-selector--drawer{display:none}
.lang-selector--drawer .lang-menu{position:static;width:210px;margin-top:8px;display:none;opacity:1;visibility:visible;transform:none}
.lang-selector--drawer.is-open .lang-menu{display:block}
.lang-selector--drawer .lang-toggle{margin:auto;justify-content:center;min-width:104px}

/* ════ SUBMENÚ DE SERVICIOS (nav de escritorio + acordeón en el drawer) ════ */
.nav-drop{position:relative}
.nav-drop-btn{display:inline-flex;align-items:center;gap:5px;background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer}
.nav-drop-chev{flex:0 0 auto;transition:transform .25s var(--ease)}
.nav-drop.is-open .nav-drop-chev{transform:rotate(180deg)}
.nav-drop-menu{
  position:absolute;top:calc(100% + 16px);left:50%;
  transform:translateX(-50%) translateY(-8px) scale(.98);
  width:312px;padding:10px;
  background:rgba(17,17,16,.98);border:1px solid var(--border2);border-radius:14px;
  box-shadow:0 22px 54px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;
  transition:opacity .22s,visibility .22s,transform .22s var(--ease);
  backdrop-filter:blur(18px);
  z-index:120;
}
.nav-drop.is-open .nav-drop-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0) scale(1)}
.nav-drop-all{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 12px;margin-bottom:7px;border-bottom:1px solid var(--border);border-radius:9px;color:var(--lime);font-family:var(--font-heading);font-weight:700;font-size:.76rem;letter-spacing:.02em;transition:background .2s}
.nav-drop-all:hover{background:var(--lime-dim)}
.nav-drop-list{display:grid;gap:2px}
.nav-drop-item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px;color:var(--text-mid);font-size:.79rem;font-weight:600;transition:background .2s,color .2s}
.nav-drop-item:hover,.nav-drop-item:focus-visible{background:var(--surface2);color:var(--white)}
.nav-drop-item.is-current{color:var(--lime);background:var(--lime-dim)}
.nav-drop-num{flex:0 0 auto;font-family:var(--font-heading);font-size:.64rem;font-weight:800;color:var(--lime);min-width:18px}

/* Variante acordeón dentro del drawer móvil */
.drawer-services{width:min(86vw,380px)}
.drawer-services .nav-drop-btn{width:100%;justify-content:center}
.drawer-services .nav-drop-item,.drawer-services .nav-drop-all{justify-content:center;text-align:center}
.drawer-services .nav-drop-menu{
  position:static;width:100%;margin-top:6px;padding:0 0 0 4px;
  background:none;border:none;box-shadow:none;backdrop-filter:none;
  opacity:1;visibility:visible;transform:none;left:auto;top:auto;
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .3s var(--ease);
}
.drawer-services.is-open .nav-drop-menu{grid-template-rows:1fr;margin-top:6px;transform:none;opacity:1;visibility:visible;left:auto;top:auto}
.nav-drop-menu-inner{min-height:0;overflow:hidden;padding:10px}
.drawer-services .nav-drop-menu-inner{padding:2px 0 8px}
.drawer-services .nav-drop-item{color:var(--text-dim);font-size:.85rem}
.drawer-services .nav-drop-all{color:var(--lime);font-size:.85rem}

@media(max-width:640px){
  .nav-drop-menu{width:280px}
}
html[lang="en"] .lang-option[data-lang="en"],html[lang="es"] .lang-option[data-lang="es"]{color:var(--lime)}
@media(max-width:960px){
  .lang-selector--nav .lang-menu{right:0}
}
@media(max-width:640px){
  nav{padding-left:5vw;padding-right:5vw}
  .nav-actions>.ncta{display:none}
  .lang-toggle{min-height:36px;padding:6px 9px}
  .lang-selector--nav .lang-menu{right:-42px}
  .drawer{gap:22px;padding:72px 20px 30px;overflow-y:auto}
  .lang-selector--drawer{display:block}
  .lang-selector--nav{display:block}
}


/* ════════════════════════════════════════════════
   RESTAURACIÓN OSCURA + AJUSTES FINALES APROBADOS
   Conserva la posición del video, el hero sin destello
   y la corrección geométrica del efecto 3D de servicios.
════════════════════════════════════════════════ */
:root{
  /* Tema oscuro original */
  --black:#0A0A08;
  --surface:#111110;
  --surface2:#181816;
  --surface3:#1F1F1C;
  --border:rgba(255,255,255,.06);
  --border2:rgba(255,255,255,.10);
  --text:rgba(255,255,255,.88);
  --text-dim:rgba(255,255,255,.58);
  --text-mid:rgba(255,255,255,.72);
  --white:#FFFFFF;
  /* STRATA se mantiene en la familia lima/oliva, sin azul */
  --strata:#9CAD18;
  --strata-dim:rgba(156,173,24,.10);
  --strata-mid:rgba(156,173,24,.25);
  --strata-glow:rgba(156,173,24,.32);
}
html{color-scheme:dark;background:var(--black)}
body{background:var(--black);color:var(--text)}

/* Navegación y menús en tema oscuro */
nav{background:rgba(10,10,8,0);box-shadow:none}
nav.s{
  background:rgba(10,10,8,.95);
  backdrop-filter:blur(16px);
  border-color:var(--border);
  box-shadow:0 10px 32px rgba(0,0,0,.18);
}
.nlink,nav:not(.s) .nlink{color:var(--text-dim)}
.nlink:hover,nav:not(.s) .nlink:hover{color:var(--white)}
.lang-toggle,nav:not(.s) .lang-toggle{
  background:rgba(17,17,16,.72);
  border-color:var(--border2);
  color:var(--text-mid);
  box-shadow:none;
}
.lang-toggle:hover,.lang-selector.is-open .lang-toggle,
nav:not(.s) .lang-toggle:hover,nav:not(.s) .lang-selector.is-open .lang-toggle{
  background:var(--surface2);
  border-color:var(--lime-mid);
  color:var(--white);
}
.lang-menu{background:rgba(17,17,16,.98);border-color:var(--border2);box-shadow:0 18px 48px rgba(0,0,0,.48)}
.lang-option{color:var(--text-mid)}
.lang-option:hover,.lang-option:focus-visible{background:var(--lime-dim);color:var(--white)}
.drawer{background:rgba(10,10,8,.98)}
.drawer .nlink{color:var(--text-mid)}
.drawer .nlink:hover{color:var(--white)}
.nmob span,nav:not(.s) .nmob span{background:var(--white)}

/* Hero oscuro: conserva exactamente la ubicación final del video */
.hero{
  min-height:100svh;
  grid-template-columns:minmax(0,1.08fr) minmax(400px,.92fr);
  column-gap:0;
  padding:104px var(--gutter) 0;
  background:var(--black);
  color:var(--text);
}
.hero-glow{display:none!important}
.hero-left{z-index:4;max-width:680px}
.hero-right{
  z-index:2;
  margin-left:clamp(-170px,-9vw,-110px);
  min-height:520px;
  align-items:flex-end;
  justify-content:center;
  overflow:visible;
  pointer-events:none;
}
.hero .wolf-video{
  position:relative;
  left:0;
  right:auto;
  bottom:-12px;
  width:auto;
  height:min(72vh,690px);
  max-height:690px;
  object-fit:contain;
  object-position:center bottom;
  background:transparent;
  filter:drop-shadow(-22px 20px 56px rgba(0,0,0,.72));
}
.hero .hh1{color:var(--white)}
.hero .hh1 em{color:var(--lime)}
.hero .hsub{color:var(--text-mid);max-width:590px}
.hero .hbadge{background:var(--lime-dim);border-color:var(--lime-mid);color:var(--lime)}
.hero .btn-g{background:transparent;border-color:var(--border2);color:var(--text-mid)}
.hero .hstats{
  margin-top:28px;
  background:rgba(10,10,8,.62);
  border-top:1px solid var(--border);
  border-radius:18px 18px 0 0;
  overflow:hidden;
}
.hero .hstat{border-right-color:var(--border)}
.hero .hstat-n{color:var(--lime)}
.hero .hstat-l{color:var(--text-dim)}

/* Mantiene el comportamiento aprobado de los botones */
.ncta,.btn-p,.btn-strata,.fsub,.pclose{
  background:var(--lime);
  color:var(--black);
  border:1px solid transparent;
}
.ncta:hover,.btn-p:hover,.btn-strata:hover,.fsub:hover,.pclose:hover{
  background:var(--black)!important;
  color:var(--lime)!important;
  border-color:var(--lime-mid);
  box-shadow:0 12px 30px rgba(0,0,0,.38),0 0 0 1px rgba(222,242,44,.06);
}
.btn-g:hover,.svc-cta:hover,.acc-cta:hover{
  background:var(--black)!important;
  border-color:var(--lime-mid)!important;
  color:var(--lime)!important;
  box-shadow:0 12px 30px rgba(0,0,0,.34);
}

/* Contraste oscuro consistente */
.sh2,.svc-info-title,.acc-title,.strata-mark,.strata-sub-mark,.wi-t,.wcard-t,
.contact-info-t,.ptitle,.tm-name,.sph-t,.pstep-t,.ch-v,.cform h3{color:var(--white)}
.ssub,.svc-info-desc,.wcard-d,.sph-d,.strata-desc,.contact-info-b,.pstep-d,.ch-l,.cform p{color:var(--text-dim)}
.eyebrow,.svc-info-eyebrow,.tm-role,.strata-label,.acc-num{color:var(--lime)}
.eyebrow::before,.svc-info-eyebrow::before,.strata-label::before{background:var(--lime)}

/* Servicios: conserva la corrección del contenedor 3D sin esquinas discordantes */
.svc-explorer{
  border-radius:0!important;
  overflow:hidden!important;
  box-shadow:0 24px 64px rgba(0,0,0,.34)!important;
  background:var(--surface);
}
.svc-explorer::after{display:none!important}
.svc-menu{
  border-radius:0!important;
  transform:none!important;
  box-shadow:none!important;
  background:var(--surface2);
}
.svc-panel{
  border-radius:0!important;
  transform:none!important;
  box-shadow:none!important;
  overflow:hidden!important;
  background:var(--surface);
}
.svc-panel::before{
  border-radius:0!important;
  border:0!important;
  background:linear-gradient(115deg,rgba(255,255,255,.025),transparent 28%,transparent 72%,rgba(222,242,44,.025))!important;
}
.svc-panel.is-resting{box-shadow:none!important}
.svc-slide,.svc-visual,.svc-info{border-radius:0!important}
.svc-accordion{border-radius:0!important}
.svc-slide:not([data-slide="4"]) .svc-visual>svg{filter:drop-shadow(0 18px 22px rgba(0,0,0,.24))}

/* Restaura las superficies oscuras originales */
.svcs,.proc,.contact,footer{background:var(--surface)}
.strata-sec{background:var(--black)}
.why{background:var(--black)}
.wi,.wcard,.ch,.cform,.popup-box,.tm-card,.contact-form,.pstep{background:var(--surface2)}
.wcard:nth-child(3){background:var(--surface3)}
.strata-integrated{background:var(--surface);border-color:var(--border)}
.strata-services{background:var(--border)}
.strata-identity{background:linear-gradient(145deg,var(--surface2),var(--surface));border-left-color:var(--border)}
.strata-ph-card{background:var(--surface);border-color:var(--border)}
.strata-ph-card:hover{background:var(--surface2)}
.strata-site-brand{background:rgba(255,255,255,.025);border-color:var(--border2)}
.strata-site-wordmark{color:var(--white)}
.strata-site-wordmark small{color:var(--text-dim)}
.sph-icon{background:var(--lime-dim);border-color:var(--lime-mid)}
.sph-icon svg{color:var(--lime)}

/* Formularios en oscuro */
.ff,.fsel,input,textarea,select{
  color:var(--text)!important;
  background:var(--surface2)!important;
  border-color:var(--border2)!important;
}
.ff::placeholder,input::placeholder,textarea::placeholder{color:rgba(255,255,255,.38)!important}
.fsel{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,.58)' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:right 15px center!important;
}
.fsel option{background:var(--surface2);color:var(--text)}

@media(min-width:1101px){
  .hero .wolf-video{left:-76px}
}
@media(max-width:1100px){
  .hero{grid-template-columns:1fr;row-gap:0;padding-top:96px}
  .hero-right{margin-left:0;min-height:430px;margin-top:-36px}
  .hero .wolf-video{left:0;height:min(58vh,510px);max-height:510px;bottom:-6px}
  .hero .hstats{border-radius:18px}
}
@media(max-width:640px){
  .hero{padding-top:92px}
  .hero-right{min-height:340px;margin-top:-20px}
  .hero .wolf-video{height:370px;max-height:370px}
}

/* ════════════════════════════════════════════════
   AJUSTES FINALES — HERO + PORTAFOLIO
   1) Lobo más cerca del bloque de título.
   2) Menú y panel del portafolio separados.
   3) Borde lima sutil y contraste entre animación/descripción.
════════════════════════════════════════════════ */
@media(min-width:1101px){
  .hero-right{
    margin-left:clamp(-210px,-11vw,-145px);
  }
  .hero .wolf-video{
    left:-105px;
  }
}

/* El portafolio deja de leerse como una sola caja continua. */
.svc-explorer{
  grid-template-columns:300px minmax(0,1fr);
  gap:18px!important;
  border:0!important;
  background:transparent!important;
  overflow:visible!important;
  box-shadow:none!important;
}
.svc-menu,
.svc-panel{
  border:1px solid rgba(222,242,44,.22)!important;
  box-shadow:0 22px 54px rgba(0,0,0,.26),0 0 0 1px rgba(222,242,44,.025)!important;
}
.svc-menu{
  border-right:1px solid rgba(222,242,44,.22)!important;
}
.svc-panel.is-resting{
  box-shadow:0 24px 58px rgba(0,0,0,.30),0 0 34px rgba(222,242,44,.025)!important;
}

/* Diferenciación tonal clara entre escena animada y contenido descriptivo. */
.svc-visual{
  background:
    radial-gradient(circle at 52% 44%,rgba(222,242,44,.065) 0%,rgba(222,242,44,.018) 36%,transparent 68%),
    linear-gradient(145deg,#0c100b 0%,#141b11 100%);
}
.svc-visual-bg{
  opacity:.075;
}
.svc-info{
  background:linear-gradient(180deg,#1c1e18 0%,#141511 100%)!important;
  border-top:1px solid rgba(222,242,44,.18)!important;
}

@media(max-width:1100px){
  .svc-explorer{
    gap:14px!important;
  }
}

/* ════════════════════════════════════════════════
   ANCHO CONTROLADO — SOLO HERO
   El hero usa un contenedor más amplio de 1440 px.
   “Por qué COLSING” conserva el ancho y padding general
   de las demás secciones y su contenido queda centrado.
════════════════════════════════════════════════ */
.hero{
  width:100%;
  max-width:1440px;
  margin-left:auto;
  margin-right:auto;
  padding-left:32px;
  padding-right:32px;
}

/* Restaura el comportamiento general de las secciones .sp. */
.why{
  width:100%;
  max-width:none;
  margin-left:0;
  margin-right:0;
}
.why.sp{
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}
.why-grid{
  width:100%;
  margin-left:auto;
  margin-right:auto;
}

@media(max-width:1440px){
  .hero{
    padding-left:24px;
    padding-right:24px;
  }
}

@media(max-width:640px){
  .hero{
    padding-left:20px;
    padding-right:20px;
  }
  .why.sp{
    padding-left:6vw;
    padding-right:6vw;
  }
}

/* ════════════════════════════════════════════════
   AJUSTE DE COMPOSICIÓN — LOBO CON MAYOR RESPIRACIÓN
   Mantiene el hero a 1440 px y separa ligeramente la mascota
   del bloque de texto sin volver a aislarla visualmente.
════════════════════════════════════════════════ */
@media(min-width:1101px){
  .hero-right{
    margin-left:clamp(-180px,-9vw,-125px);
  }
  .hero .wolf-video{
    left:-85px;
  }
}


/* ════════════════════════════════════════════════
   AJUSTE FINAL — HERO SIN ANCHO MÁXIMO + ENTRADA DEL LOBO
   - El hero vuelve a ocupar el ancho disponible sin max-width.
   - La mascota conserva una separación moderada respecto al título.
   - Entrada cinematográfica mediante desvanecimiento, desplazamiento y enfoque.
════════════════════════════════════════════════ */
.hero{
  width:100%;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  padding-left:var(--gutter)!important;
  padding-right:var(--gutter)!important;
}

@media(min-width:1101px){
  .hero-right{
    margin-left:clamp(-105px,-5vw,-68px)!important;
  }
  .hero .wolf-video{
    left:-28px!important;
  }
}

/* La clase .rev ya es activada por el JavaScript existente al cargar la web. */
.hero .wolf-video{
  opacity:0;
  transform:translate3d(52px,24px,0) scale(.965);
  filter:blur(7px) drop-shadow(-22px 20px 56px rgba(0,0,0,.72));
  transition:
    opacity 1.35s cubic-bezier(.22,.61,.36,1),
    transform 1.55s cubic-bezier(.16,1,.3,1),
    filter 1.35s ease;
  will-change:opacity,transform,filter;
}
.hero .wolf-video.rev{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  filter:blur(0) drop-shadow(-22px 20px 56px rgba(0,0,0,.72));
}
.hero .wolf-video.rev.float{
  filter:drop-shadow(-22px 20px 56px rgba(0,0,0,.72));
}

@media(max-width:1100px){
  .hero{
    padding-left:6vw!important;
    padding-right:6vw!important;
  }
  .hero-right{
    margin-left:0!important;
  }
  .hero .wolf-video{
    left:0!important;
    transform:translate3d(34px,20px,0) scale(.97);
  }
  .hero .wolf-video.rev{
    transform:translate3d(0,0,0) scale(1);
  }
}

@media(max-width:640px){
  .hero{
    padding-left:5vw!important;
    padding-right:5vw!important;
  }
  .hero .wolf-video{
    transform:translate3d(24px,16px,0) scale(.98);
  }
  .hero .wolf-video.rev{
    transform:translate3d(0,0,0) scale(1);
  }
}

@media(prefers-reduced-motion:reduce){
  .hero .wolf-video,
  .hero .wolf-video.rev{
    opacity:1!important;
    transform:none!important;
    filter:drop-shadow(-22px 20px 56px rgba(0,0,0,.72))!important;
    transition:none!important;
  }
}


/* ════════════════════════════════════════════════
   COMPOSICIÓN FINAL DEL HERO — TEXTO + VIDEO INTEGRADOS
   El hero conserva el fondo a ancho completo, pero limita el
   crecimiento individual del texto y del video para que no se separen
   en monitores grandes.

   VIDEO EDITABLE:
   --hero-wolf-x      mueve el video horizontalmente.
   --hero-wolf-y      mueve el video verticalmente.
   --hero-wolf-height controla su tamaño máximo.
   Al reemplazar el archivo, conserva las rutas de index.html o edítalas allí.
════════════════════════════════════════════════ */
.hero{
  --hero-wolf-x:-30px;
  --hero-wolf-y:-4px;
  --hero-wolf-height:min(69vh,650px);

  width:100%;
  max-width:none!important;
  margin:0!important;
  padding-left:var(--gutter)!important;
  padding-right:var(--gutter)!important;
  grid-template-columns:minmax(0,720px) minmax(380px,620px)!important;
  column-gap:clamp(28px,3vw,52px)!important;
  justify-content:center;
  align-items:center;
}
.hero-left{
  width:100%;
  max-width:680px;
  justify-self:start;
  align-self:center;
}
.hero-right{
  position:relative;
  width:100%;
  min-height:clamp(470px,61vh,560px)!important;
  margin-left:0!important;
  justify-content:flex-start!important;
  align-items:center!important;
  align-self:center;
  overflow:visible;
}
.hero-right::after{
  content:'';
  position:absolute;
  z-index:-1;
  left:2%;
  bottom:9%;
  width:78%;
  height:64px;
  background:radial-gradient(ellipse,rgba(0,0,0,.38) 0%,rgba(0,0,0,.13) 44%,transparent 74%);
  filter:blur(16px);
  pointer-events:none;
}
.hero .wolf-video{
  left:var(--hero-wolf-x)!important;
  right:auto!important;
  bottom:var(--hero-wolf-y)!important;
  width:auto;
  height:var(--hero-wolf-height)!important;
  max-height:650px!important;
  object-fit:contain;
  object-position:left center!important;

  /* Entrada corta y limpia; luego el personaje queda estable. */
  opacity:0;
  transform:translate3d(30px,14px,0) scale(.98);
  filter:blur(4px) drop-shadow(-22px 20px 56px rgba(0,0,0,.72));
  transition:
    opacity 1.05s cubic-bezier(.22,.61,.36,1),
    transform 1.15s cubic-bezier(.16,1,.3,1),
    filter 1.05s ease;
  will-change:opacity,transform,filter;
}
.hero .wolf-video.rev{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  filter:blur(0) drop-shadow(-22px 20px 56px rgba(0,0,0,.72));
}
.hero .wolf-video.rev.float{
  animation:none!important;
  transform:translate3d(0,0,0) scale(1)!important;
}

@media(max-width:1100px){
  .hero{
    --hero-wolf-x:0px;
    --hero-wolf-y:-6px;
    --hero-wolf-height:min(58vh,510px);
    grid-template-columns:1fr!important;
    column-gap:0!important;
    justify-content:stretch;
  }
  .hero-left{
    max-width:680px;
    justify-self:start;
  }
  .hero-right{
    min-height:430px!important;
    margin-top:-24px;
    justify-content:center!important;
  }
  .hero-right::after{
    left:14%;
    width:72%;
    bottom:7%;
  }
  .hero .wolf-video{
    object-position:center bottom!important;
    transform:translate3d(26px,14px,0) scale(.985);
  }
  .hero .wolf-video.rev,
  .hero .wolf-video.rev.float{
    transform:translate3d(0,0,0) scale(1)!important;
  }
}

@media(max-width:640px){
  .hero{
    --hero-wolf-height:370px;
    padding-left:5vw!important;
    padding-right:5vw!important;
  }
  .hero-right{
    min-height:340px!important;
    margin-top:-14px;
  }
  .hero .wolf-video{
    transform:translate3d(20px,12px,0) scale(.99);
  }
}

@media(prefers-reduced-motion:reduce){
  .hero .wolf-video,
  .hero .wolf-video.rev,
  .hero .wolf-video.rev.float{
    opacity:1!important;
    transform:none!important;
    filter:drop-shadow(-22px 20px 56px rgba(0,0,0,.72))!important;
    transition:none!important;
    animation:none!important;
  }
}

/* ════════════════════════════════════════════════
   AJUSTE FINAL RESPONSIVE — VIDEO NUEVO + RUTA + WHY + TRANSICIONES
   - Hero fluido, sin ancho máximo.
   - Video editable desde assets/wolf.mp4 y variables CSS.
   - Ruta sin tarjetas que corten la línea.
   - Tarjetas de “Por qué COLSING” desplazadas hacia la derecha.
   - Entrada fina y repetible en el portafolio de servicios.
════════════════════════════════════════════════ */

/* HERO: ocupa el ancho disponible; solo el video conserva límites técnicos. */
.hero{
  --hero-wolf-x:clamp(-54px,-3vw,-24px);
  --hero-wolf-y:-8px;
  --hero-wolf-height:clamp(540px,73vh,730px);

  width:100%!important;
  max-width:none!important;
  margin:0!important;
  background:#000!important;
  padding-left:var(--gutter)!important;
  padding-right:var(--gutter)!important;
  grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr)!important;
  column-gap:clamp(24px,3.2vw,68px)!important;
  justify-content:stretch!important;
  align-items:center!important;
}
.hero-left{
  width:100%;
  max-width:none!important;
  justify-self:stretch!important;
}
.hero-right{
  width:100%;
  min-width:0;
  min-height:clamp(520px,66vh,650px)!important;
  margin:0!important;
  display:flex!important;
  justify-content:flex-start!important;
  align-items:flex-end!important;
  overflow:visible!important;
}
.hero-right::after{
  left:8%!important;
  bottom:5%!important;
  width:72%!important;
  height:58px!important;
  opacity:.72;
}
.hero .wolf-video{
  position:absolute!important;
  left:var(--hero-wolf-x)!important;
  right:auto!important;
  bottom:var(--hero-wolf-y)!important;
  width:auto!important;
  height:var(--hero-wolf-height)!important;
  max-height:none!important;
  max-width:min(48vw,760px)!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  mix-blend-mode:lighten;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 5%,#000 94%,transparent 100%)!important;
  mask-image:linear-gradient(to bottom,transparent 0%,#000 5%,#000 94%,transparent 100%)!important;
}

@media(max-width:1100px){
  .hero{
    --hero-wolf-x:0px;
    --hero-wolf-y:-4px;
    --hero-wolf-height:clamp(470px,58vh,560px);
    grid-template-columns:1fr!important;
    row-gap:0!important;
    padding-left:clamp(24px,6vw,64px)!important;
    padding-right:clamp(24px,6vw,64px)!important;
  }
  .hero-left{max-width:760px!important}
  .hero-right{
    min-height:clamp(410px,53vh,510px)!important;
    margin-top:-34px!important;
    justify-content:center!important;
  }
  .hero .wolf-video{
    position:relative!important;
    left:0!important;
    bottom:var(--hero-wolf-y)!important;
    max-width:min(82vw,610px)!important;
  }
  .hero-right::after{left:16%!important;width:68%!important}
}

@media(max-width:640px){
  .hero{
    --hero-wolf-height:clamp(330px,50vh,410px);
    padding-left:20px!important;
    padding-right:20px!important;
  }
  .hero-right{
    min-height:330px!important;
    margin-top:-18px!important;
  }
  .hero .wolf-video{max-width:94vw!important}
}

/* RUTA CLARA: elimina superficies detrás de pasos e iconos y deja la línea continua. */
.proc .pstep{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.proc .pnode,
.proc .pstep.v .pnode,
.proc .pstep.is-active .pnode,
.proc .pstep.is-complete .pnode,
.proc .pstep:hover .pnode{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.proc .pnode::after{display:none!important}
.proc .pnode svg{
  position:relative;
  z-index:3;
  width:30px;
  height:30px;
  color:var(--text-mid);
  filter:drop-shadow(0 0 0 transparent);
}
.proc .pstep.is-active .pnode svg,
.proc .pstep.is-complete .pnode svg,
.proc .pstep.v .pnode svg{
  color:var(--lime)!important;
  filter:drop-shadow(0 0 10px rgba(222,242,44,.24));
}
.proc .pstep:not(:last-child)::before,
.proc .pstep:not(:last-child)::after{
  top:42px!important;
  left:50%!important;
  right:-50%!important;
  z-index:0!important;
}
.proc .pnode{z-index:2!important}
.proc .pnode-n{z-index:4}

@media(max-width:960px){
  .proc .pstep:not(:last-child)::before,
  .proc .pstep:not(:last-child)::after{
    left:42px!important;
    right:auto!important;
  }
}
@media(max-width:640px){
  .proc .pstep:not(:last-child)::before,
  .proc .pstep:not(:last-child)::after{
    top:52px!important;
    bottom:-20px!important;
    left:26px!important;
    width:2px!important;
    height:auto!important;
  }
}

/* POR QUÉ COLSING: aprovecha el espacio de la columna derecha. */
@media(min-width:961px){
  .why-grid{
    grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr)!important;
    gap:clamp(52px,6vw,112px)!important;
  }
  .why-stack{
    width:min(100%,500px)!important;
    height:410px!important;
    justify-self:end!important;
    transform:translateX(clamp(18px,2.8vw,54px));
  }
  .why-stack .wcard{
    width:clamp(285px,22vw,330px)!important;
  }
  .why-stack .wcard:nth-child(1){left:auto!important;right:92px!important;top:0!important}
  .why-stack .wcard:nth-child(2){left:auto!important;right:14px!important;top:72px!important}
  .why-stack .wcard:nth-child(3){left:auto!important;right:62px!important;top:150px!important}
}

/* PORTAFOLIO: transición refinada al entrar al viewport o cambiar de servicio. */
.svc-slide.active.svc-enter .svc-visual{
  animation:svcVisualReveal .72s cubic-bezier(.16,1,.3,1) both;
}
.svc-slide.active.svc-enter .svc-info{
  animation:svcInfoSurfaceReveal .68s cubic-bezier(.22,.61,.36,1) .06s both;
}
.svc-slide.active.svc-enter .svc-info-eyebrow,
.svc-slide.active.svc-enter .svc-info-title,
.svc-slide.active.svc-enter .svc-info-desc,
.svc-slide.active.svc-enter .svc-caps,
.svc-slide.active.svc-enter .svc-cta{
  opacity:0;
  animation:svcDetailReveal .58s cubic-bezier(.16,1,.3,1) both;
}
.svc-slide.active.svc-enter .svc-info-eyebrow{animation-delay:.16s}
.svc-slide.active.svc-enter .svc-info-title{animation-delay:.22s}
.svc-slide.active.svc-enter .svc-info-desc{animation-delay:.29s}
.svc-slide.active.svc-enter .svc-caps{animation-delay:.36s}
.svc-slide.active.svc-enter .svc-cta{animation-delay:.42s}

@keyframes svcVisualReveal{
  from{opacity:.32;clip-path:inset(0 7% 0 0);filter:blur(3px) saturate(.82)}
  to{opacity:1;clip-path:inset(0 0 0 0);filter:blur(0) saturate(1)}
}
@keyframes svcInfoSurfaceReveal{
  from{opacity:.38;clip-path:inset(12% 0 0 0)}
  to{opacity:1;clip-path:inset(0 0 0 0)}
}
@keyframes svcDetailReveal{
  from{opacity:0;translate:0 13px;filter:blur(2px)}
  to{opacity:1;translate:0 0;filter:blur(0)}
}

/* Acordeón móvil: mantiene el mismo lenguaje de transición. */
.acc-body.open .acc-mini-visual,
.acc-body.open .acc-title,
.acc-body.open .acc-desc,
.acc-body.open .acc-caps,
.acc-body.open .acc-cta{
  opacity:0;
  animation:svcDetailReveal .55s cubic-bezier(.16,1,.3,1) both;
}
.acc-body.open .acc-mini-visual{animation-delay:.04s}
.acc-body.open .acc-title{animation-delay:.12s}
.acc-body.open .acc-desc{animation-delay:.19s}
.acc-body.open .acc-caps{animation-delay:.26s}
.acc-body.open .acc-cta{animation-delay:.33s}

@media(prefers-reduced-motion:reduce){
  .svc-slide.active.svc-enter .svc-visual,
  .svc-slide.active.svc-enter .svc-info,
  .svc-slide.active.svc-enter .svc-info-eyebrow,
  .svc-slide.active.svc-enter .svc-info-title,
  .svc-slide.active.svc-enter .svc-info-desc,
  .svc-slide.active.svc-enter .svc-caps,
  .svc-slide.active.svc-enter .svc-cta,
  .acc-body.open .acc-mini-visual,
  .acc-body.open .acc-title,
  .acc-body.open .acc-desc,
  .acc-body.open .acc-caps,
  .acc-body.open .acc-cta{
    opacity:1!important;
    translate:none!important;
    filter:none!important;
    clip-path:none!important;
    animation:none!important;
  }
}



/* ════════════════════════════════════════════════
   AJUSTE DE REFINAMIENTO — HERO, PORTAFOLIO, RUTA Y WHY
   - Hero centrado visualmente, video alineado con selector de idioma.
   - Mascota superpuesta suavemente sobre la franja de estadísticas.
   - Cambio de servicios por desvanecimiento continuo, sin destellos de texto.
   - Línea de proceso tenue y oculta por detrás de cada icono.
   - Tarjetas de “Por qué COLSING” reequilibradas hacia el centro.
════════════════════════════════════════════════ */

/* HERO — escritorio amplio */
@media(min-width:1101px){
  .hero{
    --hero-wolf-x:clamp(-170px,-9vw,-110px);
  }
  .hero-right{
    z-index:5!important;
  }
  .hero-right::after{
    left:-4%!important;
    width:78%!important;
  }
  .hero .wolf-video{
    z-index:6!important;
  }
  .hero .hstats{
    position:relative;
    z-index:3!important;
    margin-top:-68px!important;
  }
}

/* PORTAFOLIO — crossfade del panel completo; evita reanimar cada línea de texto. */
.svc-slide{
  opacity:0!important;
  transform:none!important;
  transition:opacity .52s cubic-bezier(.22,.61,.36,1)!important;
  will-change:opacity;
}
.svc-slide.active{
  opacity:1!important;
  transform:none!important;
}
.svc-slide.exit{
  opacity:0!important;
  transform:none!important;
}
.svc-slide.active.svc-enter .svc-visual,
.svc-slide.active.svc-enter .svc-info,
.svc-slide.active.svc-enter .svc-info-eyebrow,
.svc-slide.active.svc-enter .svc-info-title,
.svc-slide.active.svc-enter .svc-info-desc,
.svc-slide.active.svc-enter .svc-caps,
.svc-slide.active.svc-enter .svc-cta{
  opacity:1!important;
  translate:none!important;
  transform:none;
  filter:none!important;
  clip-path:none!important;
  animation:none!important;
}

/* RUTA — línea discreta y máscara del color de fondo detrás de cada icono. */
.proc .pstep:not(:last-child)::before,
.proc .pstep:not(:last-child)::after{
  height:1px!important;
}
.proc .pstep:not(:last-child)::before{
  background:rgba(255,255,255,.035)!important;
}
.proc .pstep:not(:last-child)::after{
  background:linear-gradient(90deg,rgba(222,242,44,.045),rgba(222,242,44,.18),rgba(222,242,44,.045))!important;
  box-shadow:none!important;
}
.proc .pnode{
  isolation:isolate;
}
.proc .pnode::before{
  content:'';
  display:block!important;
  position:absolute;
  left:50%;
  top:50%;
  width:52px;
  height:52px;
  border-radius:50%;
  background:var(--surface);
  box-shadow:0 0 0 7px var(--surface);
  transform:translate(-50%,-50%);
  z-index:1;
  pointer-events:none;
}
.proc .pnode svg{z-index:3!important}
.proc .pnode-n{z-index:4!important}

@media(max-width:960px){
  .proc .pstep:not(:last-child)::before,
  .proc .pstep:not(:last-child)::after{
    width:1px!important;
  }
}
@media(max-width:640px){
  .proc .pnode::before{
    width:38px;
    height:38px;
    box-shadow:0 0 0 5px var(--surface);
  }
}

/* POR QUÉ COLSING — devuelve la pila a una posición equilibrada. */
@media(min-width:961px){
  .why-grid{
    grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr)!important;
    gap:clamp(44px,5vw,84px)!important;
  }
  .why-stack{
    width:min(100%,460px)!important;
    height:410px!important;
    justify-self:start!important;
    transform:none!important;
  }
  .why-stack .wcard{
    width:clamp(285px,21vw,325px)!important;
  }
  .why-stack .wcard:nth-child(1){left:8px!important;right:auto!important;top:0!important}
  .why-stack .wcard:nth-child(2){left:74px!important;right:auto!important;top:72px!important}
  .why-stack .wcard:nth-child(3){left:42px!important;right:auto!important;top:150px!important}
}

/* Afinación de la línea de proceso: conserva continuidad sin dibujar círculos detrás. */
.proc .pnode::before{display:none!important}
@media(min-width:961px){
  .proc .pstep:not(:last-child)::before,
  .proc .pstep:not(:last-child)::after{
    left:calc(50% + 25px)!important;
    right:calc(-50% + 25px)!important;
  }
}


/* ════════════════════════════════════════════════
   ESCENARIO CENTRAL FLUIDO — HERO FINAL
   El fondo conserva el 100% del viewport. Solo la composición
   interna se centra y evita dispersarse en monitores grandes.
   El video sigue siendo reemplazable desde /assets.
════════════════════════════════════════════════ */
.hero{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  min-height:100svh!important;
  margin:0!important;
  padding:90px 0 0!important;
  overflow:hidden!important;
  background:#000!important;
}
.hero-stage{
  width:min(calc(100% - clamp(48px,9vw,180px)),var(--maxw));
  min-height:calc(100svh - 90px);
  margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(500px,1.05fr) minmax(460px,.95fr);
  grid-template-rows:minmax(540px,1fr) auto;
  column-gap:clamp(24px,3vw,48px);
  align-items:center;
  position:relative;
  z-index:2;
}
.hero-stage .hero-left{
  grid-column:1;
  grid-row:1;
  width:100%;
  max-width:700px!important;
  justify-self:start!important;
  align-self:center!important;
}
.hero-stage .hero-right{
  grid-column:2;
  grid-row:1;
  width:100%;
  min-width:0;
  min-height:clamp(540px,66vh,660px)!important;
  margin:0!important;
  justify-content:center!important;
  align-items:flex-end!important;
  align-self:stretch!important;
  overflow:visible!important;
  z-index:5!important;
}
.hero-stage .hero-right::after{
  left:5%!important;
  bottom:4%!important;
  width:78%!important;
  height:58px!important;
}
.hero-stage .wolf-video{
  --hero-wolf-x:clamp(-92px,-5vw,-54px);
  --hero-wolf-y:-18px;
  --hero-wolf-height:clamp(570px,72vh,720px);
  position:absolute!important;
  left:var(--hero-wolf-x)!important;
  right:auto!important;
  bottom:var(--hero-wolf-y)!important;
  width:auto!important;
  height:var(--hero-wolf-height)!important;
  max-width:min(44vw,720px)!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center bottom!important;
}
.hero-stage .hstats{
  grid-column:1/-1;
  grid-row:2;
  width:100%;
  margin: -62px 0 0!important;
  position:relative;
  z-index:3!important;
}

/* Pantallas grandes: el escenario deja de crecer, no el fondo. */
@media(min-width:1800px){
  .hero-stage .wolf-video{
    --hero-wolf-x:-86px;
  }
}

/* Tablet / portátil: una sola columna sin perder fluidez. */
@media(max-width:1100px){
  .hero{
    padding-top:88px!important;
  }
  .hero-stage{
    width:calc(100% - clamp(40px,10vw,96px));
    min-height:auto;
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
    row-gap:0;
    padding-bottom:24px;
  }
  .hero-stage .hero-left{
    grid-column:1;
    grid-row:1;
    max-width:760px!important;
  }
  .hero-stage .hero-right{
    grid-column:1;
    grid-row:2;
    min-height:clamp(410px,53vh,520px)!important;
    margin-top:-30px!important;
    justify-content:center!important;
    align-self:auto!important;
  }
  .hero-stage .wolf-video{
    --hero-wolf-x:0px;
    --hero-wolf-y:-6px;
    --hero-wolf-height:clamp(470px,58vh,560px);
    position:relative!important;
    left:0!important;
    bottom:var(--hero-wolf-y)!important;
    max-width:min(82vw,610px)!important;
  }
  .hero-stage .hstats{
    grid-column:1;
    grid-row:3;
    margin-top:-44px!important;
  }
}

@media(max-width:640px){
  .hero{
    padding-top:84px!important;
  }
  .hero-stage{
    width:calc(100% - 40px);
    padding-bottom:18px;
  }
  .hero-stage .hero-right{
    min-height:330px!important;
    margin-top:-18px!important;
  }
  .hero-stage .wolf-video{
    --hero-wolf-height:clamp(330px,50vh,410px);
    max-width:94vw!important;
  }
  .hero-stage .hstats{
    margin-top:-26px!important;
  }
}

/* ════════════════════════════════════════════════
   AJUSTE FINAL DE ALTURA — VIDEO DEL HERO
   Eleva el lobo y libera la franja de estadísticas sin
   modificar el archivo de video ni la composición central.
════════════════════════════════════════════════ */
.hero-stage .hero-right{
  padding-bottom:24px!important;
}
.hero-stage .wolf-video{
  --hero-wolf-x:clamp(-78px,-4.2vw,-46px);
  --hero-wolf-y:40px;
  --hero-wolf-height:clamp(550px,69vh,690px);
}
.hero-stage .hstats{
  margin:-14px 0 0!important;
  z-index:8!important;
}

@media(max-width:1100px){
  .hero-stage .hero-right{
    margin-top:-12px!important;
    padding-bottom:12px!important;
  }
  .hero-stage .wolf-video{
    --hero-wolf-y:22px;
    --hero-wolf-height:clamp(450px,55vh,530px);
  }
  .hero-stage .hstats{
    margin-top:0!important;
  }
}

@media(max-width:640px){
  .hero-stage .hero-right{
    margin-top:-6px!important;
    padding-bottom:8px!important;
  }
  .hero-stage .wolf-video{
    --hero-wolf-y:14px;
    --hero-wolf-height:clamp(315px,47vh,390px);
  }
  .hero-stage .hstats{
    margin-top:0!important;
  }
}

/* ════════════════════════════════════════════════
   AJUSTE DE PROPORCIÓN DEL HERO + FUNDIDO DEL BORDE DEL VIDEO
   Acerca la escena al navegador y disimula el recorte lateral
   del archivo sin modificar ni recodificar el video.
════════════════════════════════════════════════ */
.hero{
  padding-top:70px!important;
}
.hero-stage{
  min-height:calc(100svh - 70px)!important;
  grid-template-rows:minmax(500px,1fr) auto!important;
  align-items:start!important;
}
.hero-stage .hero-left{
  align-self:start!important;
  padding-top:clamp(42px,5.5vh,68px)!important;
}
.hero-stage .hero-right{
  align-self:start!important;
  min-height:clamp(500px,63vh,630px)!important;
  padding-top:0!important;
  padding-bottom:0!important;
}
.hero-stage .wolf-video{
  --hero-wolf-x:clamp(-72px,-4vw,-44px);
  --hero-wolf-height:clamp(535px,67vh,675px);
  top:clamp(8px,1.4vh,18px)!important;
  bottom:auto!important;
  /* Doble máscara: conserva el desvanecimiento vertical y suaviza
     el extremo derecho donde el video original termina recortado. */
  -webkit-mask-image:
    linear-gradient(to bottom,transparent 0%,#000 5%,#000 95%,transparent 100%),
    linear-gradient(to right,#000 0%,#000 84%,rgba(0,0,0,.92) 89%,rgba(0,0,0,.48) 95%,transparent 100%)!important;
  -webkit-mask-composite:source-in!important;
  mask-image:
    linear-gradient(to bottom,transparent 0%,#000 5%,#000 95%,transparent 100%),
    linear-gradient(to right,#000 0%,#000 84%,rgba(0,0,0,.92) 89%,rgba(0,0,0,.48) 95%,transparent 100%)!important;
  mask-composite:intersect!important;
  filter:drop-shadow(-20px 18px 52px rgba(0,0,0,.74))!important;
}
.hero-stage .hstats{
  margin-top:-8px!important;
}

@media(max-width:1100px){
  .hero{padding-top:70px!important}
  .hero-stage{
    min-height:auto!important;
    grid-template-rows:auto auto auto!important;
  }
  .hero-stage .hero-left{
    padding-top:clamp(28px,4vh,46px)!important;
  }
  .hero-stage .hero-right{
    min-height:clamp(390px,50vh,500px)!important;
    margin-top:-20px!important;
  }
  .hero-stage .wolf-video{
    --hero-wolf-height:clamp(435px,54vh,520px);
    top:0!important;
    bottom:auto!important;
    -webkit-mask-image:
      linear-gradient(to bottom,transparent 0%,#000 5%,#000 95%,transparent 100%),
      linear-gradient(to right,#000 0%,#000 87%,rgba(0,0,0,.88) 92%,transparent 100%)!important;
    mask-image:
      linear-gradient(to bottom,transparent 0%,#000 5%,#000 95%,transparent 100%),
      linear-gradient(to right,#000 0%,#000 87%,rgba(0,0,0,.88) 92%,transparent 100%)!important;
  }
  .hero-stage .hstats{margin-top:0!important}
}

@media(max-width:640px){
  .hero-stage .hero-left{padding-top:24px!important}
  .hero-stage .hero-right{
    min-height:315px!important;
    margin-top:-10px!important;
  }
  .hero-stage .wolf-video{
    --hero-wolf-height:clamp(305px,45vh,380px);
    max-width:92vw!important;
  }
}

/* ════════════════════════════════════════════════
   CORRECCIÓN FINAL — POSICIÓN VERTICAL Y ALTURA DEL HERO
   Recupera la posición central original, mantiene las estadísticas
   dentro del primer viewport y conserva el fundido lateral del video.
════════════════════════════════════════════════ */
@media(min-width:1101px){
  .hero{
    padding-top:90px!important;
    min-height:auto!important;
  }
  .hero-stage{
    min-height:0!important;
    height:clamp(650px,calc(100svh - 90px),820px)!important;
    grid-template-rows:minmax(0,1fr) auto!important;
    align-items:center!important;
  }
  .hero-stage .hero-left{
    align-self:center!important;
    padding-top:0!important;
  }
  .hero-stage .hero-right{
    align-self:stretch!important;
    min-height:0!important;
    height:100%!important;
    padding:0 0 18px!important;
  }
  .hero-stage .wolf-video{
    --hero-wolf-x:clamp(-72px,-4vw,-44px);
    --hero-wolf-height:clamp(530px,65vh,665px);
    top:auto!important;
    bottom:40px!important;
    -webkit-mask-image:
      linear-gradient(to bottom,transparent 0%,#000 5%,#000 95%,transparent 100%),
      linear-gradient(to right,#000 0%,#000 84%,rgba(0,0,0,.94) 90%,rgba(0,0,0,.55) 96%,transparent 100%)!important;
    -webkit-mask-composite:source-in!important;
    mask-image:
      linear-gradient(to bottom,transparent 0%,#000 5%,#000 95%,transparent 100%),
      linear-gradient(to right,#000 0%,#000 84%,rgba(0,0,0,.94) 90%,rgba(0,0,0,.55) 96%,transparent 100%)!important;
    mask-composite:intersect!important;
  }
  .hero-stage .hstats{
    margin:-12px 0 0!important;
    align-self:end!important;
  }
}

@media(max-width:1100px){
  .hero{
    padding-top:88px!important;
    min-height:auto!important;
  }
  .hero-stage{
    min-height:auto!important;
    height:auto!important;
    grid-template-rows:auto auto auto!important;
    align-items:center!important;
  }
  .hero-stage .hero-left{
    align-self:center!important;
    padding-top:0!important;
  }
  .hero-stage .hero-right{
    min-height:clamp(410px,53vh,520px)!important;
    height:auto!important;
    margin-top:-12px!important;
    padding:0 0 12px!important;
  }
  .hero-stage .wolf-video{
    --hero-wolf-height:clamp(450px,55vh,530px);
    position:relative!important;
    top:auto!important;
    bottom:22px!important;
    -webkit-mask-image:
      linear-gradient(to bottom,transparent 0%,#000 5%,#000 95%,transparent 100%),
      linear-gradient(to right,#000 0%,#000 88%,rgba(0,0,0,.9) 94%,transparent 100%)!important;
    -webkit-mask-composite:source-in!important;
    mask-image:
      linear-gradient(to bottom,transparent 0%,#000 5%,#000 95%,transparent 100%),
      linear-gradient(to right,#000 0%,#000 88%,rgba(0,0,0,.9) 94%,transparent 100%)!important;
    mask-composite:intersect!important;
  }
  .hero-stage .hstats{
    margin-top:0!important;
  }
}

@media(max-width:640px){
  .hero{
    padding-top:84px!important;
  }
  .hero-stage .hero-right{
    min-height:330px!important;
    margin-top:-6px!important;
    padding-bottom:8px!important;
  }
  .hero-stage .wolf-video{
    --hero-wolf-height:clamp(315px,47vh,390px);
    top:auto!important;
    bottom:14px!important;
    max-width:94vw!important;
  }
}

/* ════════════════════════════════════════════════
   AJUSTE PUNTUAL — VIDEO DEL HERO MÁS A LA DERECHA
   Mantiene tamaño, altura, fundido y composición existentes.
════════════════════════════════════════════════ */
@media(min-width:1101px){
  .hero-stage .wolf-video{
    --hero-wolf-x:clamp(-42px,-2.35vw,-18px)!important;
  }
}

@media(min-width:641px) and (max-width:1100px){
  .hero-stage .wolf-video{
    left:18px!important;
  }
}

/* ════════════════════════════════════════════════
   AJUSTE PUNTUAL — ALINEACIÓN DEL LOBO CON BOGOTÁ
   Desplaza el video hacia la derecha sin alterar altura,
   escala, fundido lateral ni posición de las estadísticas.
════════════════════════════════════════════════ */
@media(min-width:1101px){
  .hero-stage .wolf-video{
    --hero-wolf-x:clamp(24px,2.35vw,46px)!important;
  }
}

@media(min-width:641px) and (max-width:1100px){
  .hero-stage .wolf-video{
    left:32px!important;
  }
}


/* ════════════════════════════════════════════════
   DETALLES VISUALES — STRATA + POR QUÉ COLSING
   - Logo PNG de STRATA junto al wordmark.
   - STRATA se presenta como puerta de entrada a su sitio especializado.
   - Servicios en lista editorial compacta, sin tarjetas vacías.
   - Pila de “Por qué COLSING” más abierta e identificable.
════════════════════════════════════════════════ */
.strata-heading{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(280px,430px)!important;
  align-items:end!important;
  gap:clamp(32px,5vw,84px)!important;
}
.strata-heading-note{
  max-width:430px;
  justify-self:end;
  margin:0 0 8px;
  font-size:clamp(.8rem,.95vw,.92rem);
  line-height:1.72;
  color:var(--text-dim);
}
.strata-gateway{
  grid-template-columns:minmax(340px,.78fr) minmax(0,1.22fr)!important;
  min-height:590px;
  border:1px solid rgba(222,242,44,.14)!important;
  border-radius:22px!important;
  background:linear-gradient(145deg,var(--surface),#0d0f0c)!important;
  box-shadow:0 30px 82px rgba(0,0,0,.34),0 0 0 1px rgba(222,242,44,.02)!important;
}
.strata-gateway .strata-identity{
  order:1!important;
  justify-content:center!important;
  padding:clamp(38px,4.5vw,66px)!important;
  border-left:0!important;
  border-right:1px solid rgba(222,242,44,.12)!important;
  background:
    radial-gradient(circle at 16% 16%,rgba(222,242,44,.10),transparent 38%),
    linear-gradient(155deg,#171a14 0%,#0f110e 100%)!important;
}
.strata-gateway .strata-services{
  order:2!important;
  display:flex!important;
  flex-direction:column;
  gap:0!important;
  padding:clamp(30px,3.8vw,54px)!important;
  background:linear-gradient(180deg,#11130f 0%,#0d0f0c 100%)!important;
  transform:none!important;
}
.strata-brand-lockup{
  display:flex;
  align-items:center;
  gap:clamp(13px,1.4vw,20px);
  width:max-content;
  max-width:100%;
  margin-bottom:28px;
  position:relative;
  z-index:2;
}
.strata-brand-logo,
.strata-brand-lockup .strata-site-fallback{
  width:clamp(54px,5vw,72px)!important;
  height:clamp(54px,5vw,72px)!important;
  flex:0 0 auto;
  object-fit:contain;
  border-radius:15px!important;
  background:rgba(255,255,255,.035)!important;
  border:1px solid rgba(222,242,44,.16);
  padding:7px;
  box-shadow:0 16px 34px rgba(0,0,0,.24);
}
.strata-brand-lockup .strata-site-fallback{
  display:none;
  align-items:center;
  justify-content:center;
  color:var(--black);
  background:var(--lime)!important;
  font-family:var(--font-heading);
  font-size:1.55rem;
  font-weight:800;
  padding:0;
}
.strata-brand-copy{min-width:0}
.strata-brand-copy .strata-mark{
  margin:0!important;
  color:var(--white)!important;
  font-size:clamp(2.65rem,4.8vw,4.7rem)!important;
  line-height:.9;
  letter-spacing:-.055em;
}
.strata-brand-copy .strata-sub-mark{
  margin:9px 0 0!important;
  color:var(--text-mid)!important;
  font-size:.68rem!important;
  letter-spacing:.22em!important;
}
.strata-gateway .strata-label{margin-bottom:14px!important}
.strata-gateway .strata-desc{
  max-width:470px;
  margin-bottom:32px;
  font-size:clamp(.82rem,1vw,.94rem);
  line-height:1.8;
}
.strata-visit{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:18px;
  position:relative;
  z-index:2;
}
.strata-services-head{
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(240px,1.12fr);
  align-items:end;
  gap:clamp(24px,3vw,52px);
  padding:0 4px 26px;
  border-bottom:1px solid rgba(255,255,255,.075);
}
.strata-kicker{
  display:block;
  margin-bottom:8px;
  color:var(--lime);
  font-size:.61rem;
  font-weight:800;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.strata-services-head h3{
  color:var(--white);
  font-family:var(--font-heading);
  font-size:clamp(1.25rem,2vw,1.8rem);
  line-height:1.16;
  letter-spacing:-.025em;
}
.strata-services-head p{
  color:var(--text-dim);
  font-size:.76rem;
  line-height:1.65;
}
.strata-service-list{
  display:flex;
  flex-direction:column;
  flex:1;
}
.strata-gateway .strata-ph-card{
  min-height:0!important;
  display:grid!important;
  grid-template-columns:36px 48px minmax(0,1fr) 28px;
  align-items:center;
  gap:clamp(12px,1.5vw,20px);
  padding:20px 4px!important;
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.07)!important;
  background:transparent!important;
  transform:none!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.strata-gateway .strata-ph-card::before{display:none!important}
.strata-gateway .strata-ph-card:hover{
  background:linear-gradient(90deg,rgba(222,242,44,.055),transparent 78%)!important;
  transform:translateX(5px)!important;
}
.strata-service-num{
  color:rgba(222,242,44,.55);
  font-family:var(--font-heading);
  font-size:.64rem;
  font-weight:800;
  letter-spacing:.08em;
}
.strata-gateway .sph-icon{
  width:42px!important;
  height:42px!important;
  border-radius:12px!important;
  transform:none!important;
}
.strata-gateway .strata-ph-card:hover .sph-icon{
  transform:translateY(-2px)!important;
}
.strata-service-copy{min-width:0}
.strata-gateway .sph-t{
  margin-bottom:5px;
  font-size:.83rem;
  color:var(--white);
}
.strata-gateway .sph-d{
  max-width:560px;
  font-size:.71rem;
  line-height:1.58;
}
.strata-service-arrow{
  color:rgba(222,242,44,.42);
  font-size:1.05rem;
  transition:color .25s,transform .25s;
}
.strata-ph-card:hover .strata-service-arrow{
  color:var(--lime);
  transform:translate(2px,-2px);
}
.strata-deep-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-top:22px;
  padding:16px 18px;
  border:1px solid rgba(222,242,44,.16);
  border-radius:12px;
  color:var(--text-mid);
  background:rgba(222,242,44,.035);
  font-family:var(--font-heading);
  font-size:.72rem;
  font-weight:700;
  transition:background .25s,color .25s,border-color .25s,transform .25s;
}
.strata-deep-link svg{width:16px;height:16px;flex:0 0 auto}
.strata-deep-link:hover{
  color:var(--black);
  background:var(--lime);
  border-color:var(--lime);
  transform:translateY(-2px);
}

/* La pila sigue superpuesta, pero cada tarjeta conserva identidad visual. */
@media(min-width:961px){
  .why-stack{
    width:min(100%,500px)!important;
    height:470px!important;
  }
  .why-stack .wcard{
    width:clamp(295px,22vw,338px)!important;
  }
  .why-stack .wcard:nth-child(1){left:0!important;top:0!important}
  .why-stack .wcard:nth-child(2){left:76px!important;top:102px!important}
  .why-stack .wcard:nth-child(3){left:36px!important;top:208px!important}
  .why-stack:hover .wcard:nth-child(1){transform:rotate(0) translate(-18px,-12px)!important}
  .why-stack:hover .wcard:nth-child(2){transform:rotate(0) translate(18px,-10px)!important}
  .why-stack:hover .wcard:nth-child(3){transform:rotate(0) translate(-2px,18px)!important}
}

@media(max-width:1050px){
  .strata-heading{grid-template-columns:1fr!important}
  .strata-heading-note{justify-self:start;max-width:640px}
  .strata-gateway{grid-template-columns:1fr!important}
  .strata-gateway .strata-identity{
    border-right:0!important;
    border-bottom:1px solid rgba(222,242,44,.12)!important;
  }
}
@media(max-width:720px){
  .strata-services-head{grid-template-columns:1fr}
  .strata-gateway .strata-ph-card{
    grid-template-columns:28px 42px minmax(0,1fr);
  }
  .strata-service-arrow{display:none}
  .strata-brand-logo,
  .strata-brand-lockup .strata-site-fallback{
    width:52px!important;
    height:52px!important;
  }
}
@media(max-width:480px){
  .strata-gateway .strata-services,
  .strata-gateway .strata-identity{padding:28px 22px!important}
  .strata-gateway .strata-ph-card{
    grid-template-columns:26px 38px minmax(0,1fr);
    gap:10px;
    padding:17px 0!important;
  }
  .strata-gateway .sph-icon{width:36px!important;height:36px!important}
  .strata-gateway .sph-d{font-size:.68rem}
}


/* ════════════════════════════════════════════════
   AJUSTE DE LEGIBILIDAD + LOCKUP STRATA
   - Mayor jerarquía para párrafos y descripciones.
   - Descripciones del portafolio con contraste y espacio propio.
   - Logo PNG de STRATA alineado con el wordmark, sin recuadro.
════════════════════════════════════════════════ */

/* Párrafos principales: más cómodos en portátil y escritorio. */
.ssub,
.strata-heading-note,
.strata-desc,
.contact-info-b,
.cform p{
  font-size:clamp(.92rem,.98vw,1rem)!important;
  line-height:1.72!important;
}
.ssub{max-width:560px!important}
.contact-info-b{max-width:410px!important}

/* Textos explicativos de “Por qué COLSING” y del proceso. */
.wi-d{
  font-size:clamp(.84rem,.9vw,.94rem)!important;
  line-height:1.66!important;
}
.wcard-d{
  font-size:clamp(.84rem,.9vw,.93rem)!important;
  line-height:1.68!important;
  color:rgba(255,255,255,.68)!important;
}
.pstep-d{
  font-size:clamp(.8rem,.86vw,.9rem)!important;
  line-height:1.65!important;
}

/* Portafolio: la descripción deja de parecer un pie de imagen. */
.svc-info{
  min-height:210px;
  padding:28px 36px 32px!important;
  align-items:center!important;
  gap:clamp(22px,3vw,42px)!important;
  background:linear-gradient(180deg,rgba(31,31,28,.98),rgba(23,25,21,.99))!important;
}
.svc-info-left{max-width:760px}
.svc-info-title{
  font-size:clamp(1.28rem,1.7vw,1.7rem)!important;
  line-height:1.18!important;
  margin-bottom:12px!important;
}
.svc-info-desc{
  max-width:640px!important;
  margin-bottom:18px!important;
  font-size:clamp(.94rem,1vw,1.02rem)!important;
  line-height:1.7!important;
  color:rgba(255,255,255,.74)!important;
}
.svc-caps{gap:8px!important}
.svc-cap{
  padding:5px 12px!important;
  font-size:.67rem!important;
  color:rgba(255,255,255,.68)!important;
}
.svc-cta{
  padding:12px 20px!important;
  font-size:.77rem!important;
  align-self:center!important;
  margin-top:0!important;
}

/* STRATA: logo y palabra STRATA quedan realmente en la misma línea visual. */
.strata-brand-lockup{
  --strata-logo-size:clamp(58px,5vw,76px);
  display:flex!important;
  align-items:flex-start!important;
  gap:clamp(14px,1.5vw,22px)!important;
  width:max-content;
  max-width:100%;
  margin-bottom:28px!important;
}
.strata-brand-logo,
.strata-logo-slot{
  display:block;
  width:var(--strata-logo-size)!important;
  height:var(--strata-logo-size)!important;
  flex:0 0 var(--strata-logo-size)!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.strata-logo-slot{display:none}
.strata-brand-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  padding-top:0!important;
}
.strata-brand-copy .strata-mark{
  margin:0!important;
  font-size:clamp(2.65rem,4.8vw,4.7rem)!important;
  line-height:.94!important;
  letter-spacing:-.055em!important;
}
.strata-brand-copy .strata-sub-mark{
  margin:8px 0 0!important;
  font-size:.7rem!important;
  line-height:1!important;
}

/* STRATA: descripciones y servicios con más presencia. */
.strata-services-head p{
  font-size:clamp(.84rem,.9vw,.94rem)!important;
  line-height:1.68!important;
  color:rgba(255,255,255,.66)!important;
}
.strata-gateway .sph-t{
  font-size:clamp(.9rem,.98vw,1rem)!important;
  margin-bottom:7px!important;
}
.strata-gateway .sph-d{
  max-width:590px!important;
  font-size:clamp(.82rem,.88vw,.92rem)!important;
  line-height:1.66!important;
  color:rgba(255,255,255,.64)!important;
}
.strata-gateway .strata-ph-card{
  padding:22px 4px!important;
}

@media(max-width:960px){
  .svc-info{min-height:0;padding:24px 26px 28px!important}
  .svc-info-left{max-width:none}
}
@media(max-width:720px){
  .strata-brand-lockup{--strata-logo-size:54px}
  .strata-brand-copy .strata-mark{font-size:clamp(2.35rem,13vw,3.35rem)!important}
  .svc-info{padding:22px!important}
  .svc-info-desc{font-size:.94rem!important}
}
@media(max-width:480px){
  .strata-brand-lockup{--strata-logo-size:48px;gap:12px!important}
  .strata-brand-copy .strata-sub-mark{font-size:.62rem!important;margin-top:6px!important}
}

/* Portafolio móvil: conserva la misma mejora de lectura. */
.acc-title{
  font-size:1.08rem!important;
  line-height:1.25!important;
  margin-bottom:9px!important;
}
.acc-desc{
  font-size:.92rem!important;
  line-height:1.68!important;
  color:rgba(255,255,255,.72)!important;
  margin-bottom:16px!important;
}
.acc-cap{font-size:.67rem!important;padding:5px 11px!important}
.acc-cta{font-size:.78rem!important}

/* ════════════════════════════════════════════════
   LOGO STRATA EN CSS + NAVEGACIÓN ACTIVA
════════════════════════════════════════════════ */

/* =========================
   LOGO — construido en CSS
========================= */
.logo {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.04em;
}

/* Marca geométrica original — dos gradientes CSS */
.logo-mark {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background:
    linear-gradient(45deg, currentColor 0 45%, transparent 45%),
    linear-gradient(-45deg, var(--accent) 0 45%, transparent 45%);
}

.logo-img {
  height: 28px;
  width: auto;
  display: block;
  object-fit: contain;
}

/* Lockup específico dentro de STRATA: sin caja ni asset externo. */
.strata-brand-lockup.logo {
  --accent: #EDFF00;
  color: #FFFFFF;
  width: max-content;
  max-width: 100%;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 28px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.strata-brand-lockup.logo .strata-brand-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  padding: 0 !important;
}
.strata-brand-lockup.logo .strata-mark {
  margin: 0 !important;
  color: currentColor !important;
  font-size: 23px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -0.04em !important;
}
.strata-brand-lockup.logo .strata-sub-mark {
  margin: 0 !important;
  color: var(--text-dim) !important;
  font-size: .58rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase;
}

/* =========================
   NAVEGACIÓN — sección activa
========================= */
.nlink {
  --nav-indicator-scale: 0;
  padding-bottom: 7px;
  color: var(--text-dim);
  transition: color .28s var(--ease), opacity .28s var(--ease);
}
.nlink::after {
  width: 100%;
  height: 2px;
  bottom: 0;
  opacity: .95;
  background: var(--lime);
  transform: scaleX(var(--nav-indicator-scale));
  transform-origin: left center;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.nlink:hover {
  color: var(--white);
}
.nlink:hover::after {
  transform: scaleX(1);
}
.nlink.is-active,
nav:not(.s) .nlink.is-active,
.drawer .nlink.is-active {
  --nav-indicator-scale: 1;
  color: var(--lime) !important;
  opacity: 1;
}
.nlink.is-active::after {
  box-shadow: 0 0 12px rgba(222,242,44,.34);
}
.nlinks:has(.nlink.is-active) .nlink:not(.is-active) {
  color: rgba(255,255,255,.50);
}
.drawer .nlink::after {
  bottom: -7px;
}
.drawer .nlink.is-active::after {
  transform: scaleX(1);
}

@media(max-width:720px){
  .strata-brand-lockup.logo{
    font-size:22px;
    gap:9px;
  }
  .strata-brand-lockup.logo .strata-mark{font-size:22px!important}
}


/* ════════════════════════════════════════════════
   AJUSTE FINAL — LOGO STRATA + SELECTOR ACTIVO
   Logo con mayor presencia y navegación tipo cápsula técnica.
════════════════════════════════════════════════ */

/* STRATA: firma principal, no versión compacta de navegación. */
.strata-brand-lockup.logo{
  gap:clamp(15px,1.5vw,22px)!important;
  font-size:clamp(2.7rem,4.5vw,4.45rem)!important;
  line-height:1!important;
}
.strata-brand-lockup.logo .logo-mark{
  width:clamp(44px,4.1vw,64px)!important;
  height:clamp(44px,4.1vw,64px)!important;
  flex:0 0 clamp(44px,4.1vw,64px)!important;
}
.strata-brand-lockup.logo .strata-brand-copy{
  gap:0!important;
}
.strata-brand-lockup.logo .strata-mark{
  font-size:inherit!important;
  line-height:.9!important;
  letter-spacing:-.055em!important;
}
.strata-brand-lockup.logo .strata-sub-mark{
  margin-top:10px!important;
  font-size:clamp(.62rem,.68vw,.74rem)!important;
  letter-spacing:.20em!important;
}

/* Navegación: cápsula ligera con punto luminoso para la sección activa. */
.nlinks{
  gap:clamp(5px,.75vw,14px)!important;
}
.nlink,
nav:not(.s) .nlink,
.drawer .nlink{
  --nav-dot-scale:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0;
  min-height:36px;
  padding:8px 11px!important;
  border:1px solid transparent;
  border-radius:9px;
  color:var(--text-dim);
  background:transparent;
  transition:
    color .28s var(--ease),
    background-color .28s var(--ease),
    border-color .28s var(--ease),
    transform .24s var(--ease),
    opacity .28s var(--ease);
}
.nlink::after{
  display:none!important;
}
.nlink::before{
  content:'';
  width:5px;
  height:5px;
  flex:0 0 5px;
  margin-right:0;
  border-radius:50%;
  background:var(--lime);
  opacity:0;
  transform:scale(var(--nav-dot-scale));
  box-shadow:0 0 0 rgba(222,242,44,0);
  transition:
    opacity .24s var(--ease),
    transform .3s var(--ease-back),
    margin-right .28s var(--ease),
    box-shadow .28s var(--ease);
}
.nlink:hover,
nav:not(.s) .nlink:hover,
.drawer .nlink:hover{
  color:var(--white);
  background:rgba(255,255,255,.035);
  border-color:rgba(255,255,255,.055);
  transform:translateY(-1px);
}
.nlink.is-active,
nav:not(.s) .nlink.is-active,
.drawer .nlink.is-active{
  --nav-dot-scale:1;
  color:var(--lime)!important;
  background:rgba(222,242,44,.075)!important;
  border-color:rgba(222,242,44,.16)!important;
  opacity:1!important;
  transform:none;
}
.nlink.is-active::before{
  opacity:1;
  margin-right:8px;
  box-shadow:0 0 11px rgba(222,242,44,.48);
}
.nlinks:has(.nlink.is-active) .nlink:not(.is-active){
  color:rgba(255,255,255,.48);
}

/* Menú móvil: la cápsula conserva una anchura estable y legible. */
.drawer .nlink{
  min-width:220px;
  min-height:46px;
  padding:10px 16px!important;
}

@media(max-width:960px){
  .strata-brand-lockup.logo{
    font-size:clamp(2.55rem,8vw,3.8rem)!important;
  }
  .strata-brand-lockup.logo .logo-mark{
    width:clamp(42px,7vw,56px)!important;
    height:clamp(42px,7vw,56px)!important;
    flex-basis:clamp(42px,7vw,56px)!important;
  }
}
@media(max-width:720px){
  .strata-brand-lockup.logo{
    gap:13px!important;
    font-size:clamp(2.25rem,11vw,3.15rem)!important;
  }
  .strata-brand-lockup.logo .logo-mark{
    width:44px!important;
    height:44px!important;
    flex-basis:44px!important;
  }
  .strata-brand-lockup.logo .strata-sub-mark{
    margin-top:7px!important;
    font-size:.61rem!important;
  }
}


/* ════════════════════════════════════════════════
   AJUSTE BOTONES DE DETALLE DE SERVICIO
   Ver más arriba del CTA comercial, con jerarquía secundaria.
════════════════════════════════════════════════ */
.svc-actions{
  flex:0 0 clamp(188px,15vw,220px);
  display:flex;
  flex-direction:column;
  align-self:center;
  gap:10px;
}
.svc-actions .svc-cta,
.svc-more{
  width:100%;
  min-height:44px;
  margin:0!important;
  padding:11px 16px!important;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-radius:10px;
  font-family:var(--font-heading);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.035em;
  white-space:nowrap;
}
.svc-more{
  color:var(--lime);
  background:rgba(222,242,44,.035);
  border:1px solid rgba(222,242,44,.24);
  transition:background .26s var(--ease),border-color .26s var(--ease),color .26s var(--ease),transform .24s var(--ease),box-shadow .26s var(--ease);
}
.svc-more-plus{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  flex:0 0 22px;
  border-radius:50%;
  background:rgba(222,242,44,.09);
  font-size:1rem;
  font-weight:500;
  line-height:1;
  transition:transform .3s var(--ease-back),background .26s var(--ease),color .26s var(--ease);
}
.svc-more:hover,
.svc-more:focus-visible{
  color:var(--black);
  background:var(--lime);
  border-color:var(--lime);
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(222,242,44,.16);
}
.svc-more:hover .svc-more-plus,
.svc-more:focus-visible .svc-more-plus{
  color:var(--lime);
  background:var(--black);
  transform:rotate(90deg);
}
.svc-actions .svc-cta{
  align-self:stretch!important;
}

/* Acordeón móvil: mismas dos intenciones, apiladas. */
.acc-actions{
  display:flex;
  flex-direction:column;
  gap:9px;
  margin-top:18px;
}
.acc-more,
.acc-contact{
  width:100%;
  min-height:43px;
  padding:10px 14px!important;
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-radius:9px;
  font-family:var(--font-heading);
  font-size:.76rem!important;
  font-weight:700;
  letter-spacing:.025em;
}
.acc-more{
  color:var(--lime);
  border:1px solid rgba(222,242,44,.23);
  background:rgba(222,242,44,.035);
}
.acc-more-plus{
  width:21px;
  height:21px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(222,242,44,.09);
  font-size:.95rem;
  transition:transform .28s var(--ease-back);
}
.acc-more:hover .acc-more-plus,
.acc-more:focus-visible .acc-more-plus{transform:rotate(90deg)}
.acc-contact{
  color:var(--black)!important;
  background:var(--lime);
  border:1px solid var(--lime);
}
.acc-contact svg{width:14px;height:14px;flex:0 0 auto}

@media(max-width:960px){
  .svc-actions{flex-basis:190px}
}
@media(max-width:720px){
  .svc-actions{width:100%;flex:0 0 auto}
}


/* ════════════════════════════════════════════════
   EFECTO DE LUZ TENUE — BOTÓN VER MÁS
   Barrido luminoso discreto para sugerir interacción.
════════════════════════════════════════════════ */
.svc-more,
.acc-more{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}

.svc-more::before,
.acc-more::before{
  content:'';
  position:absolute;
  z-index:-1;
  top:-45%;
  bottom:-45%;
  left:-38%;
  width:26%;
  pointer-events:none;
  opacity:0;
  transform:translateX(-150%) skewX(-18deg);
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.025) 25%,
    rgba(255,255,255,.14) 50%,
    rgba(222,242,44,.10) 64%,
    transparent 100%
  );
  filter:blur(.4px);
  animation:svcMoreSoftShine 5.4s ease-in-out infinite;
}

.svc-more::after,
.acc-more::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  border-radius:inherit;
  opacity:0;
  box-shadow:
    inset 0 0 0 1px rgba(222,242,44,.06),
    0 0 16px rgba(222,242,44,.055);
  animation:svcMoreSoftPulse 5.4s ease-in-out infinite;
}

.svc-more:hover::before,
.svc-more:focus-visible::before,
.acc-more:hover::before,
.acc-more:focus-visible::before{
  animation-duration:1.15s;
}

@keyframes svcMoreSoftShine{
  0%,64%{
    opacity:0;
    transform:translateX(-150%) skewX(-18deg);
  }
  69%{
    opacity:.42;
  }
  82%{
    opacity:.16;
    transform:translateX(680%) skewX(-18deg);
  }
  83%,100%{
    opacity:0;
    transform:translateX(680%) skewX(-18deg);
  }
}

@keyframes svcMoreSoftPulse{
  0%,62%,86%,100%{opacity:0}
  70%{opacity:.55}
  80%{opacity:.16}
}

@media(prefers-reduced-motion:reduce){
  .svc-more::before,
  .svc-more::after,
  .acc-more::before,
  .acc-more::after{
    animation:none!important;
    opacity:0!important;
  }
}


/* ════════════════════════════════════════════════
   AJUSTE NAV — MEGA MENÚ LIMA + DRAWER LATERAL
   - “Servicios” conserva exactamente la tipografía del nav.
   - Flecha siempre lima y separada del texto.
   - Submenú de escritorio ocupa desde el inicio del texto
     de navegación hasta el final de la barra.
   - Menú móvil reorganizado como panel lateral compacto.
════════════════════════════════════════════════ */
:root{
  --nav-olive:#68751A;
  --nav-drop-left:var(--gutter);
  --nav-drop-right:var(--gutter);
  --nav-drop-top:70px;
}

/* Servicios: mismo tamaño de letra que los demás enlaces. */
.nlinks .nav-drop-btn,
.drawer-services .nav-drop-btn{
  font-family:var(--font)!important;
  font-size:.74rem!important;
  font-weight:600!important;
  line-height:1!important;
  letter-spacing:.07em!important;
  text-transform:uppercase!important;
}
.nav-drop-btn{
  gap:11px!important;
}
.nav-drop-label{
  display:inline-block;
  white-space:nowrap;
}
.nav-drop-chev{
  width:12px!important;
  height:12px!important;
  flex:0 0 12px!important;
  color:var(--lime)!important;
  stroke:currentColor!important;
  filter:drop-shadow(0 0 5px rgba(222,242,44,.28));
  opacity:1!important;
}

/* Mega menú: desde el inicio de los enlaces hasta el final del nav. */
.nlinks .nav-drop-menu{
  position:fixed!important;
  top:var(--nav-drop-top)!important;
  left:var(--nav-drop-left)!important;
  right:var(--nav-drop-right)!important;
  width:auto!important;
  max-width:none!important;
  padding:14px!important;
  border:1px solid rgba(255,255,255,.18)!important;
  border-top-color:rgba(10,10,8,.13)!important;
  border-radius:0 0 16px 16px!important;
  background:var(--lime)!important;
  box-shadow:0 24px 60px rgba(0,0,0,.34)!important;
  backdrop-filter:blur(18px)!important;
  transform:translateY(-10px) scale(.992)!important;
  transform-origin:top center!important;
  z-index:145!important;
}
.nlinks .nav-drop.is-open .nav-drop-menu{
  transform:translateY(0) scale(1)!important;
}
.nlinks .nav-drop-menu-inner{
  padding:0!important;
  overflow:visible!important;
}
.nlinks .nav-drop-all{
  min-height:42px;
  margin:0 0 10px!important;
  padding:8px 10px 12px!important;
  border:0!important;
  border-bottom:1px solid rgba(10,10,8,.20)!important;
  border-radius:8px!important;
  color:var(--black)!important;
  background:transparent!important;
  font-size:.76rem!important;
}
.nlinks .nav-drop-all:hover,
.nlinks .nav-drop-all:focus-visible{
  color:var(--white)!important;
  background:var(--nav-olive)!important;
}
.nlinks .nav-drop-list{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
}
.nlinks .nav-drop-item{
  min-height:56px;
  padding:12px 14px!important;
  border:1px solid rgba(10,10,8,.08);
  border-radius:10px!important;
  color:rgba(10,10,8,.84)!important;
  background:rgba(10,10,8,.055)!important;
  font-size:.79rem!important;
  font-weight:700!important;
}
.nlinks .nav-drop-num{
  color:rgba(10,10,8,.54)!important;
}
.nlinks .nav-drop-item:hover,
.nlinks .nav-drop-item:focus-visible,
.nlinks .nav-drop-item.is-current{
  color:var(--white)!important;
  background:var(--nav-olive)!important;
  border-color:rgba(255,255,255,.12)!important;
  transform:translateY(-1px);
}
.nlinks .nav-drop-item:hover .nav-drop-num,
.nlinks .nav-drop-item:focus-visible .nav-drop-num,
.nlinks .nav-drop-item.is-current .nav-drop-num{
  color:var(--white)!important;
}

/* Botón móvil “Solicitar propuesta”: mismo tratamiento visual de escritorio. */
.acc-contact{
  color:var(--lime)!important;
  background:var(--lime-dim)!important;
  border:1.5px solid var(--lime-mid)!important;
  box-shadow:none!important;
  transition:
    background .25s,
    color .25s,
    border-color .25s,
    transform .25s,
    box-shadow .25s!important;
}
.acc-contact:hover,
.acc-contact:focus-visible{
  color:var(--black)!important;
  background:var(--lime)!important;
  border-color:var(--lime)!important;
  transform:translateY(-2px);
  box-shadow:0 8px 20px var(--lime-glow)!important;
}

/* Icono hamburguesa: control compacto y técnico. */
.nmob{
  width:42px;
  height:42px;
  padding:0!important;
  display:none;
  align-items:center;
  justify-content:center;
  gap:4px!important;
  border:1px solid rgba(222,242,44,.16)!important;
  border-radius:10px;
  background:rgba(222,242,44,.045)!important;
  transition:
    background .25s,
    border-color .25s,
    transform .22s;
}
.nmob:hover{
  background:rgba(222,242,44,.09)!important;
  border-color:rgba(222,242,44,.28)!important;
  transform:translateY(-1px);
}
.nmob span{
  width:18px!important;
  height:1.5px!important;
  background:var(--lime)!important;
  transform-origin:center;
}
.nmob[aria-expanded="true"] span:nth-child(1){
  transform:translateY(5.5px) rotate(45deg);
}
.nmob[aria-expanded="true"] span:nth-child(2){
  opacity:0;
  transform:scaleX(.3);
}
.nmob[aria-expanded="true"] span:nth-child(3){
  transform:translateY(-5.5px) rotate(-45deg);
}

@media(max-width:960px){
  .nmob{display:flex!important}

  /* Drawer lateral: ya no es un menú centrado a pantalla completa. */
  .drawer{
    inset:0 0 0 auto!important;
    width:min(88vw,390px)!important;
    height:100dvh;
    padding:82px 24px 28px!important;
    display:flex;
    flex-direction:column;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:9px!important;
    background:rgba(10,10,8,.985)!important;
    border-left:1px solid rgba(222,242,44,.12);
    box-shadow:-24px 0 60px rgba(0,0,0,.42);
    opacity:1!important;
    visibility:hidden;
    transform:translateX(104%);
    transition:
      transform .38s var(--ease),
      visibility .38s!important;
    overflow-y:auto;
  }
  .drawer.open{
    visibility:visible;
    transform:translateX(0);
  }
  .dclose{
    top:20px!important;
    right:20px!important;
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    padding:0;
    border:1px solid rgba(255,255,255,.10);
    border-radius:10px;
    background:rgba(255,255,255,.035);
    font-size:1.05rem!important;
  }
  .lang-selector--drawer{
    display:block!important;
    margin-bottom:10px;
  }
  .lang-selector--drawer .lang-toggle{
    width:100%;
    justify-content:space-between!important;
    margin:0!important;
  }

  /* Todos los textos del menú conservan la escala de escritorio. */
  .drawer .nlink,
  .drawer-services .nav-drop-btn,
  .drawer .ncta{
    width:100%;
    min-width:0!important;
    min-height:42px!important;
    padding:11px 12px!important;
    justify-content:flex-start!important;
    text-align:left!important;
    font-family:var(--font)!important;
    font-size:.74rem!important;
    font-weight:600!important;
    letter-spacing:.07em!important;
    text-transform:uppercase!important;
    border-radius:9px!important;
  }

  .drawer-services{
    width:100%!important;
  }
  .drawer-services .nav-drop-btn{
    justify-content:space-between!important;
    color:var(--text-mid)!important;
  }
  .drawer-services .nav-drop-btn.is-active{
    color:var(--lime)!important;
  }

  /* Acordeón móvil con el mismo lima del mega menú. */
  .drawer-services .nav-drop-menu{
    position:static!important;
    width:100%!important;
    margin-top:6px!important;
    padding:0!important;
    border:0!important;
    border-radius:11px!important;
    background:var(--lime)!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    transform:none!important;
    display:grid!important;
    grid-template-rows:0fr!important;
    opacity:1!important;
    visibility:visible!important;
    overflow:hidden!important;
    transition:grid-template-rows .32s var(--ease),margin .32s var(--ease)!important;
  }
  .drawer-services.is-open .nav-drop-menu{
    grid-template-rows:1fr!important;
    margin-bottom:4px!important;
  }
  .drawer-services .nav-drop-menu-inner{
    min-height:0;
    overflow:hidden;
    padding:0!important;
  }
  .drawer-services.is-open .nav-drop-menu-inner{
    padding:10px!important;
  }
  .drawer-services .nav-drop-list{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:5px!important;
  }
  .drawer-services .nav-drop-item,
  .drawer-services .nav-drop-all{
    justify-content:flex-start!important;
    text-align:left!important;
    color:rgba(10,10,8,.84)!important;
    background:rgba(10,10,8,.055)!important;
    border:1px solid rgba(10,10,8,.08)!important;
    border-radius:8px!important;
    font-size:.74rem!important;
    font-weight:700!important;
    text-transform:none!important;
    letter-spacing:0!important;
  }
  .drawer-services .nav-drop-all{
    margin:0 0 6px!important;
    padding:10px 12px!important;
  }
  .drawer-services .nav-drop-item{
    min-height:44px;
    padding:10px 12px!important;
  }
  .drawer-services .nav-drop-item:hover,
  .drawer-services .nav-drop-item:focus-visible,
  .drawer-services .nav-drop-item.is-current,
  .drawer-services .nav-drop-all:hover,
  .drawer-services .nav-drop-all:focus-visible{
    color:var(--white)!important;
    background:var(--nav-olive)!important;
    border-color:rgba(255,255,255,.12)!important;
  }
  .drawer-services .nav-drop-item:hover .nav-drop-num,
  .drawer-services .nav-drop-item:focus-visible .nav-drop-num,
  .drawer-services .nav-drop-item.is-current .nav-drop-num{
    color:var(--white)!important;
  }
  .drawer-services .nav-drop-num{
    color:rgba(10,10,8,.52)!important;
  }

  /* CTA del drawer igual al botón web. */
  .drawer .ncta{
    margin-top:8px;
    color:var(--black)!important;
    background:var(--lime)!important;
    border:1px solid var(--lime)!important;
    justify-content:space-between!important;
    text-transform:none!important;
    letter-spacing:.04em!important;
  }
  .drawer .ncta:hover,
  .drawer .ncta:focus-visible{
    color:var(--lime)!important;
    background:var(--black)!important;
    border-color:var(--lime)!important;
  }
}

@media(max-width:640px){
  .drawer{width:min(92vw,370px)!important;padding-inline:20px!important}
}


/* ════════════════════════════════════════════════
   AJUSTE FINAL — SUBMENÚ TENUE + VER MÁS MÓVIL
   Submenú con el mismo lenguaje visual de “Solicitar propuesta”.
   El botón “Ver más” móvil conserva su barrido luminoso.
════════════════════════════════════════════════ */

/* Escritorio: panel oscuro con tinte lima, borde tenue y sin bloque lima sólido. */
.nlinks .nav-drop-menu{
  background:
    linear-gradient(180deg,rgba(222,242,44,.065),rgba(222,242,44,.025)),
    rgba(12,13,10,.97)!important;
  border:1px solid rgba(222,242,44,.22)!important;
  border-top-color:rgba(222,242,44,.14)!important;
  box-shadow:
    0 24px 60px rgba(0,0,0,.38),
    inset 0 1px rgba(255,255,255,.035)!important;
}

.nlinks .nav-drop-all{
  color:var(--lime)!important;
  background:rgba(222,242,44,.035)!important;
  border:1px solid rgba(222,242,44,.15)!important;
  border-bottom-color:rgba(222,242,44,.15)!important;
}

.nlinks .nav-drop-item{
  color:rgba(255,255,255,.74)!important;
  background:rgba(222,242,44,.028)!important;
  border:1px solid rgba(222,242,44,.105)!important;
}

.nlinks .nav-drop-num{
  color:rgba(222,242,44,.56)!important;
}

.nlinks .nav-drop-item:hover,
.nlinks .nav-drop-item:focus-visible,
.nlinks .nav-drop-item.is-current,
.nlinks .nav-drop-all:hover,
.nlinks .nav-drop-all:focus-visible{
  color:var(--white)!important;
  background:var(--nav-olive)!important;
  border-color:rgba(222,242,44,.25)!important;
  box-shadow:0 8px 20px rgba(0,0,0,.16);
}

.nlinks .nav-drop-item:hover .nav-drop-num,
.nlinks .nav-drop-item:focus-visible .nav-drop-num,
.nlinks .nav-drop-item.is-current .nav-drop-num{
  color:var(--white)!important;
}

/* Móvil: mismo tratamiento tenue dentro del acordeón. */
@media(max-width:960px){
  .drawer-services .nav-drop-menu{
    background:
      linear-gradient(180deg,rgba(222,242,44,.06),rgba(222,242,44,.025)),
      rgba(14,15,12,.98)!important;
    border:1px solid rgba(222,242,44,.18)!important;
    box-shadow:inset 0 1px rgba(255,255,255,.025)!important;
  }

  .drawer-services .nav-drop-item,
  .drawer-services .nav-drop-all{
    color:rgba(255,255,255,.74)!important;
    background:rgba(222,242,44,.03)!important;
    border:1px solid rgba(222,242,44,.11)!important;
  }

  .drawer-services .nav-drop-num{
    color:rgba(222,242,44,.55)!important;
  }

  .drawer-services .nav-drop-item:hover,
  .drawer-services .nav-drop-item:focus-visible,
  .drawer-services .nav-drop-item.is-current,
  .drawer-services .nav-drop-all:hover,
  .drawer-services .nav-drop-all:focus-visible{
    color:var(--white)!important;
    background:var(--nav-olive)!important;
    border-color:rgba(222,242,44,.24)!important;
  }

  .drawer-services .nav-drop-item:hover .nav-drop-num,
  .drawer-services .nav-drop-item:focus-visible .nav-drop-num,
  .drawer-services .nav-drop-item.is-current .nav-drop-num{
    color:var(--white)!important;
  }
}

/* “Ver más” móvil: exactamente el mismo tratamiento base que el CTA,
   conservando el resplandor y el barrido ya existentes en ::before/::after. */
@media(max-width:720px){
  .acc-more,
  .acc-contact{
    color:var(--lime)!important;
    background:var(--lime-dim)!important;
    border:1.5px solid var(--lime-mid)!important;
    box-shadow:none!important;
    transition:
      background .25s,
      color .25s,
      border-color .25s,
      transform .25s,
      box-shadow .25s!important;
  }

  .acc-more:hover,
  .acc-more:focus-visible,
  .acc-contact:hover,
  .acc-contact:focus-visible{
    color:var(--black)!important;
    background:var(--lime)!important;
    border-color:var(--lime)!important;
    transform:translateY(-2px);
    box-shadow:0 8px 20px var(--lime-glow)!important;
  }

  .acc-more-plus{
    color:var(--lime);
    background:rgba(222,242,44,.09)!important;
  }

  .acc-more:hover .acc-more-plus,
  .acc-more:focus-visible .acc-more-plus{
    color:var(--lime)!important;
    background:var(--black)!important;
    transform:rotate(90deg);
  }
}


/* ════════════════════════════════════════════════
   AJUSTE RESPONSIVE — HERO MÓVIL SIN SUPERPOSICIÓN
   Se da más respiración entre los CTA y el video, y se
   compactan ligeramente los botones sin perder legibilidad.
════════════════════════════════════════════════ */
@media(max-width:640px){
  .hero .hacts{
    gap:8px!important;
    margin-bottom:8px;
  }

  .hero .btn-p,
  .hero .btn-g{
    min-height:43px;
    padding:11px 15px!important;
    gap:7px!important;
    font-size:.78rem!important;
    line-height:1.15;
  }

  .hero .btn-p svg,
  .hero .btn-g svg{
    width:13px!important;
    height:13px!important;
    flex:0 0 13px;
  }

  .hero-stage .hero-right{
    min-height:325px!important;
    margin-top:16px!important;
    padding-bottom:0!important;
  }

  .hero-stage .wolf-video{
    --hero-wolf-height:clamp(292px,43vh,360px)!important;
    top:auto!important;
    bottom:-4px!important;
    max-width:92vw!important;
  }
}

@media(max-width:390px){
  .hero .hacts{
    flex-direction:column;
    align-items:stretch!important;
  }

  .hero .btn-p,
  .hero .btn-g{
    width:100%;
    justify-content:space-between;
  }

  .hero-stage .hero-right{
    min-height:305px!important;
    margin-top:18px!important;
  }

  .hero-stage .wolf-video{
    --hero-wolf-height:clamp(278px,41vh,335px)!important;
  }
}


/* ════════════════════════════════════════════════
   AJUSTE DEFINITIVO — LOBO BAJO DESDE EL PRIMER BREAKPOINT
   En cuanto el hero pasa a una columna, el video inicia debajo
   de las acciones y deja una zona de seguridad para los botones.
════════════════════════════════════════════════ */
@media(max-width:1100px){
  .hero-stage{
    row-gap:clamp(14px,2.6vw,28px)!important;
  }

  .hero-stage .hero-left{
    position:relative;
    z-index:12!important;
  }

  .hero-stage .hacts{
    position:relative;
    z-index:14!important;
    margin-bottom:0!important;
  }

  .hero-stage .hero-right{
    position:relative;
    z-index:2!important;
    margin-top:clamp(30px,4vw,48px)!important;
    min-height:clamp(420px,54vh,530px)!important;
  }

  .hero-stage .wolf-video{
    --hero-wolf-y:-26px!important;
    bottom:var(--hero-wolf-y)!important;
    pointer-events:none;
  }
}

@media(max-width:640px){
  .hero-stage .hero-right{
    margin-top:34px!important;
    min-height:330px!important;
  }

  .hero-stage .wolf-video{
    --hero-wolf-y:-18px!important;
    bottom:var(--hero-wolf-y)!important;
  }
}

@media(max-width:390px){
  .hero-stage .hero-right{
    margin-top:38px!important;
    min-height:312px!important;
  }

  .hero-stage .wolf-video{
    --hero-wolf-y:-16px!important;
  }
}

/* ════════════════════════════════════════════════
   COLSING IDENTITY OVERRIDE — AGO 2026
   Verde oscuro como base, lima como acento y negro como profundidad.
   Este bloque se deja al final para que prevalezca sobre ajustes previos.
════════════════════════════════════════════════ */
:root{
  --brand-green:#15261A;
  --green-deep:#0F1712;
  --green-base:#15261A;
  --green-surface:#1B3020;
  --green-elevated:#243A29;
  --brand-lime:#DEF22C;

  --black:#080A08;
  --surface:#132118;
  --surface2:#1A2A1E;
  --surface3:#223527;

  --white:#FFFFFF;
  --bone:#F3F0E6;
  --gray-light:#B7C0B9;
  --gray-medium:#78817A;
  --gray-dark:#39443C;

  --text:var(--white);
  --text-mid:#D9DFD7;
  --text-dim:#AEB7B0;
  --border:rgba(243,240,230,.10);
  --border2:rgba(243,240,230,.18);

  --lime:var(--brand-lime);
  --lime-dim:rgba(222,242,44,.08);
  --lime-mid:rgba(222,242,44,.22);
  --lime-glow:rgba(222,242,44,.28);
}

html,body{
  background:var(--green-deep)!important;
  color:var(--text)!important;
}

nav{
  background:rgba(12,21,16,0)!important;
  border-bottom-color:transparent!important;
}
nav.s{
  background:rgba(12,21,16,.92)!important;
  backdrop-filter:blur(18px)!important;
  border-bottom-color:rgba(222,242,44,.10)!important;
}
.nlink{color:var(--bone)!important}
.nlink:hover,.nlink.active{color:var(--lime)!important}

.hero{
  position:relative!important;
  background:
    radial-gradient(circle at 74% 34%, rgba(36,58,41,.48) 0%, rgba(36,58,41,.18) 22%, rgba(36,58,41,0) 44%),
    linear-gradient(180deg,
      #15261A 0%,
      #15261A 30%,
      #132118 44%,
      #101712 54%,
      #080A08 64%,
      #080A08 100%)!important;
}
.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 72% 54%, rgba(8,10,8,.96) 0%, rgba(8,10,8,.78) 24%, rgba(8,10,8,.40) 40%, transparent 62%);
  pointer-events:none;
  z-index:0;
}
.hero-stage{
  position:relative;
  z-index:1;
}
.hero-stage .hero-right{
  position:relative;
  overflow:hidden!important;
}
.hero-stage .hero-right::before{
  content:'';
  position:absolute;
  left:2%;
  right:0;
  top:clamp(92px,16vh,150px);
  bottom:0;
  background:linear-gradient(180deg,
    rgba(8,10,8,0) 0%,
    rgba(8,10,8,.42) 20%,
    rgba(8,10,8,.82) 54%,
    rgba(8,10,8,.97) 78%,
    #080A08 100%);
  border-radius:34px 34px 0 0;
  z-index:0;
  pointer-events:none;
}
.hero-stage .hero-right::after{
  background:radial-gradient(ellipse at center, rgba(222,242,44,.16), rgba(222,242,44,.03) 52%, transparent 76%)!important;
  filter:blur(2px);
}
.hero-stage .wolf-video{
  z-index:2!important;
  filter:drop-shadow(-26px 22px 64px rgba(0,0,0,.78))!important;
}
.hero .hbadge,
.hero .btn-g,
.hero .hstats{
  border-color:rgba(243,240,230,.12)!important;
}
.hero .hbadge{
  background:rgba(222,242,44,.08)!important;
  color:var(--lime)!important;
}
.hero .btn-g{
  color:var(--bone)!important;
}
.hero .hstats{
  background:linear-gradient(180deg, rgba(15,23,18,.80), rgba(8,10,8,.92))!important;
  backdrop-filter:blur(14px);
  border-top-color:rgba(243,240,230,.10)!important;
}
.hero .hstat-n{color:var(--lime)!important}
.hero .hstat-l{color:var(--text-dim)!important}

.svcs{background:var(--green-deep)!important}
.svcs-head .lead,
.svcs-head .sh2,
.svcs-head .eyebrow{color:inherit}
.svc-menu,
.svc-accordion,
.svc-info,
.svc-stage,
.svc-visual,
.svc-cta-row,
.svc-info-card,
.svc-copy-card,
.svc-card,
.svc-mobile-acc{
  background:transparent;
}
.svc-menu{
  background:linear-gradient(180deg,var(--green-base),var(--green-surface))!important;
  border-color:rgba(243,240,230,.10)!important;
}
.svc-tab{
  color:var(--text-mid)!important;
  border-bottom-color:rgba(243,240,230,.08)!important;
}
.svc-tab:hover,
.svc-tab:focus-visible,
.svc-tab.active{
  background:rgba(222,242,44,.08)!important;
  color:var(--white)!important;
}
.svc-stage,
.acc-body,
.acc-mini-visual,
.svc-info{
  background:linear-gradient(180deg,var(--surface2),var(--surface))!important;
  border-color:rgba(243,240,230,.10)!important;
}
.acc-mini-visual,
.svc-visual{
  background:radial-gradient(circle at center, rgba(222,242,44,.06), transparent 62%), linear-gradient(180deg,var(--surface2),var(--surface))!important;
}
.svc-cap,
.acc-cap{
  background:rgba(222,242,44,.07)!important;
  border-color:rgba(222,242,44,.18)!important;
  color:var(--bone)!important;
}
.svc-cta,
.acc-cta,
.acc-more{
  border-color:rgba(243,240,230,.12)!important;
}

.strata-sec{background:var(--black)!important}
.strata-integrated{
  background:linear-gradient(180deg,var(--surface),var(--green-deep))!important;
  border-color:rgba(243,240,230,.10)!important;
}
.strata-identity{
  background:linear-gradient(145deg,var(--surface2),var(--surface))!important;
}
.strata-ph-card,
.strata-site-brand img,
.strata-point{
  background:var(--surface2)!important;
  border-color:rgba(243,240,230,.10)!important;
}
.strata-ph-card:hover{background:var(--surface3)!important}

.proc{
  background:var(--bone)!important;
  color:var(--brand-green)!important;
}
.proc .eyebrow,
.proc .sh2,
.proc .sh2 em,
.proc .lead,
.proc .pnode-t,
.proc .pstep h3,
.proc .pstep p,
.proc .proc-mobile-subtitle{
  color:var(--brand-green)!important;
}
.proc .lead{opacity:.88}
.proc .proc-line,
.proc .proc-track,
.proc .proc-progress{
  background-color:rgba(21,38,26,.12)!important;
}
.proc .proc-progress{background:linear-gradient(90deg,var(--brand-green),var(--lime))!important}
.proc .pnode{
  background:#FFFDF8!important;
  border-color:rgba(21,38,26,.12)!important;
  box-shadow:0 12px 32px rgba(21,38,26,.08)!important;
}
.proc .pnode-n,
.proc .pstep.is-active .pnode-n,
.proc .pstep.is-complete .pnode-n{
  background:var(--lime)!important;
  color:var(--brand-green)!important;
}
.proc .pstep{
  background:rgba(255,255,255,.72)!important;
  border-color:rgba(21,38,26,.10)!important;
}
.proc .pstep.is-active,
.proc .pstep.is-complete{
  background:#FFFFFF!important;
  border-color:rgba(222,242,44,.34)!important;
}

.why{background:var(--green-base)!important}
.why .wi,
.why .wcard{
  background:linear-gradient(180deg,var(--surface2),var(--surface))!important;
  border-color:rgba(243,240,230,.10)!important;
}
.why .wi:hover,
.why .wcard:hover{
  border-color:rgba(222,242,44,.18)!important;
}

#team{background:var(--green-deep)!important}
.tm-card,
.tm-media,
.tm-bio,
.tm-meta{border-color:rgba(243,240,230,.10)!important}
.tm-card{background:linear-gradient(180deg,var(--surface2),var(--surface))!important}

.contact{background:var(--green-base)!important}
.ch,
.cform,
.ff,
.fsel,
.popup-box,
.fsel option,
.contact-form{
  border-color:rgba(243,240,230,.10)!important;
}
.ch,
.cform,
.popup-box{background:linear-gradient(180deg,var(--surface2),var(--surface))!important}
.ff,
.fsel,
.contact-form{background:var(--surface3)!important}
.ff:focus,
.fsel:focus{border-color:var(--lime)!important;box-shadow:0 0 0 3px rgba(222,242,44,.10)!important}

footer{
  background:var(--black)!important;
  border-top-color:rgba(243,240,230,.10)!important;
}
.flink,
footer p,
footer span{color:var(--text-dim)!important}
.flink:hover{color:var(--lime)!important}

/* Servicios internos */
.service-shell,
.service-main,
.sd-shell{background:var(--green-deep)!important}

@media(max-width:1100px){
  .hero-stage .hero-right::before{
    left:0;
    top:clamp(62px,12vh,104px);
  }
}

@media(max-width:720px){
  .hero{
    background:
      radial-gradient(circle at 50% 28%, rgba(36,58,41,.38) 0%, rgba(36,58,41,.14) 28%, transparent 50%),
      linear-gradient(180deg,
        #15261A 0%,
        #15261A 34%,
        #101712 56%,
        #080A08 74%,
        #080A08 100%)!important;
  }
  .proc{
    background:#F5F1E7!important;
  }
}

/* ════════════════════════════════════════════════
   PREMIUM AIR + HIGH-END POLISH
   Inspirado en la referencia: más respiración, bloques menos densos,
   composición más editorial y profundidad más sutil.
════════════════════════════════════════════════ */
:root{
  --maxw:1240px;
  --gutter:max(7vw, calc((100vw - var(--maxw)) / 2));
}

.sp{
  padding:clamp(92px,12vh,150px) var(--gutter)!important;
}

nav{
  height:76px!important;
}

.hero{
  padding-top:106px!important;
}
.hero-stage{
  width:min(calc(100% - clamp(88px,13vw,260px)), var(--maxw))!important;
  min-height:calc(100svh - 106px)!important;
  column-gap:clamp(48px,5vw,92px)!important;
  align-items:center!important;
}
.hero-stage .hero-left{
  max-width:620px!important;
  padding-block:clamp(12px,2vh,28px)!important;
}
.hero .hbadge{
  margin-bottom:34px!important;
  padding:8px 18px!important;
}
.hero .hh1{
  max-width:11ch;
  margin-bottom:24px!important;
}
.hero .hsub{
  max-width:540px!important;
  line-height:1.9!important;
  margin-bottom:44px!important;
}
.hero .hacts{
  gap:16px!important;
}
.hero-stage .hero-right{
  min-height:clamp(560px,68vh,720px)!important;
  padding-right:clamp(6px,1.6vw,18px)!important;
}
.hero-stage .hero-right::before{
  left:10%!important;
  right:6%!important;
  top:clamp(112px,18vh,172px)!important;
  border-radius:42px 42px 0 0!important;
  background:linear-gradient(180deg,
    rgba(8,10,8,0) 0%,
    rgba(8,10,8,.32) 18%,
    rgba(8,10,8,.72) 52%,
    rgba(8,10,8,.94) 78%,
    #080A08 100%)!important;
}
.hero-stage .hero-right::after{
  left:14%!important;
  bottom:8%!important;
  width:64%!important;
  height:42px!important;
  opacity:.82;
}
.hero-stage .wolf-video{
  --hero-wolf-x:clamp(-52px,-2.8vw,-24px)!important;
  --hero-wolf-y:18px!important;
  --hero-wolf-height:clamp(500px,62vh,635px)!important;
  max-width:min(39vw,630px)!important;
  filter:drop-shadow(-20px 24px 54px rgba(0,0,0,.60))!important;
}
.hero-stage .hstats{
  width:min(100%,1120px)!important;
  margin:clamp(24px,4vh,42px) 0 0!important;
  border:1px solid rgba(243,240,230,.10)!important;
  border-radius:24px!important;
  overflow:hidden!important;
  box-shadow:0 18px 52px rgba(0,0,0,.18)!important;
}
.hero .hstat{
  padding:24px 28px!important;
}

.svcs-head{
  gap:clamp(46px,6vw,88px)!important;
  margin-bottom:clamp(42px,5vh,72px)!important;
}
.why-grid,
.contact-inner{
  gap:clamp(52px,8vw,120px)!important;
}

.svc-panel,
.strata-integrated,
.why .wi,
.why .wcard,
.tm-card,
.ch,
.cform,
.popup-box,
.sd-feat-card,
.sd-why,
.sd-rel-card,
.sd-cta-band{
  box-shadow:0 18px 48px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.02)!important;
}

.svc-panel{
  border-radius:30px!important;
  overflow:hidden!important;
}
.svc-menu{
  border-top-left-radius:30px!important;
  border-bottom-left-radius:30px!important;
  padding-block:12px!important;
  box-shadow:none!important;
}
.svc-stage,
.svc-slide,
.svc-visual,
.svc-info,
.acc-body,
.acc-mini-visual{
  border-radius:24px!important;
}
.svc-visual{
  padding:clamp(22px,2vw,30px)!important;
}
.svc-info{
  padding:clamp(30px,3vw,42px)!important;
}
.why .wi{
  padding:24px 26px!important;
}
.strata-integrated{
  border-radius:30px!important;
  overflow:hidden!important;
}
.strata-identity,
.strata-services{
  padding:clamp(36px,4vw,56px)!important;
}
.strata-ph-card{
  border-radius:18px!important;
}
.proc .pstep{
  border-radius:20px!important;
}
.tm-card{
  border-radius:22px!important;
}
.ch,
.cform{
  border-radius:24px!important;
}
.cform{
  padding:clamp(32px,4vw,48px)!important;
}
.ff,
.fsel{
  min-height:52px;
  border-radius:12px!important;
}
footer{
  padding:36px var(--gutter)!important;
}

@media(max-width:1100px){
  :root{
    --gutter:clamp(24px,5vw,42px);
  }
  .hero-stage{
    width:min(calc(100% - 48px), 820px)!important;
    row-gap:22px!important;
  }
  .hero-stage .hero-left{
    max-width:680px!important;
  }
  .hero-stage .hero-right{
    padding-right:0!important;
  }
  .hero-stage .hero-right::before{
    left:4%!important;
    right:4%!important;
    top:clamp(76px,13vh,118px)!important;
  }
  .hero-stage .wolf-video{
    --hero-wolf-x:0px!important;
    --hero-wolf-y:4px!important;
    --hero-wolf-height:clamp(420px,56vh,540px)!important;
    max-width:min(68vw,540px)!important;
  }
  .hero-stage .hstats{
    width:100%!important;
  }
}

@media(max-width:720px){
  .sp{
    padding:78px var(--gutter)!important;
  }
  nav{
    height:72px!important;
  }
  .hero{
    padding-top:98px!important;
  }
  .hero-stage{
    width:min(calc(100% - 32px), 100%)!important;
    row-gap:16px!important;
  }
  .hero .hh1,
  .hero .hsub{
    max-width:none!important;
  }
  .hero .hsub{
    margin-bottom:34px!important;
    line-height:1.8!important;
  }
  .hero-stage .hero-right::before{
    left:0!important;
    right:0!important;
    top:72px!important;
    border-radius:28px 28px 0 0!important;
  }
  .hero-stage .wolf-video{
    --hero-wolf-y:0px!important;
    --hero-wolf-height:clamp(320px,46vh,390px)!important;
    max-width:92vw!important;
  }
  .hero-stage .hstats{
    margin-top:10px!important;
    border-radius:18px!important;
  }
  .svc-panel,
  .strata-integrated,
  .cform,
  .ch,
  .tm-card,
  .sd-feat-card,
  .sd-why,
  .sd-rel-card,
  .sd-cta-band{
    border-radius:20px!important;
  }
}

/* ════════════════════════════════════════════════
   HERO FINAL — COMPOSICIÓN, AIRE Y FUSIÓN DEL VIDEO
   El negro comienza exactamente a la altura superior del video de Rocco.
   Esta entrega modifica únicamente el hero.
════════════════════════════════════════════════ */
@media(min-width:1101px){
  .hero{
    --hero-top-offset:106px;
    --hero-black-start:clamp(150px,18vh,196px);
    background:
      radial-gradient(circle at 76% 29%, rgba(42,70,49,.36) 0%, rgba(42,70,49,.14) 24%, transparent 48%),
      linear-gradient(180deg,
        #15261A 0,
        #15261A calc(var(--hero-black-start) - 54px),
        #111D15 calc(var(--hero-black-start) + 34px),
        #0B100D calc(var(--hero-black-start) + 112px),
        #080A08 calc(var(--hero-black-start) + 178px),
        #080A08 100%)!important;
  }
  .hero::before{
    background:radial-gradient(ellipse at 76% 45%, rgba(8,10,8,.58) 0%, rgba(8,10,8,.26) 30%, transparent 59%)!important;
  }
  .hero-stage{
    grid-template-columns:minmax(500px,1.04fr) minmax(440px,.96fr)!important;
    column-gap:clamp(72px,6vw,112px)!important;
  }
  .hero-stage .hero-left{
    max-width:600px!important;
    align-self:center!important;
  }
  .hero .hh1{
    max-width:10.7ch!important;
    line-height:.99!important;
    letter-spacing:-.05em!important;
  }
  .hero-stage .hero-right{
    --hero-video-top:calc(var(--hero-black-start) - var(--hero-top-offset));
    --hero-wolf-height:clamp(510px,61vh,620px);
    --hero-wolf-left:clamp(34px,3vw,58px);
    min-height:clamp(560px,68vh,720px)!important;
    overflow:visible!important;
    isolation:isolate;
  }
  .hero-stage .hero-right::before{
    left:-14%!important;
    right:-12%!important;
    top:var(--hero-video-top)!important;
    bottom:-2px!important;
    border-radius:0!important;
    background:#080A08!important;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.58) 14%,#000 29%,#000 100%);
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.58) 14%,#000 29%,#000 100%);
    z-index:0!important;
  }
  .hero-stage .wolf-video{
    left:var(--hero-wolf-left)!important;
    right:auto!important;
    top:var(--hero-video-top)!important;
    bottom:auto!important;
    height:var(--hero-wolf-height)!important;
    max-height:none!important;
    max-width:min(40vw,620px)!important;
    object-position:center bottom!important;
    -webkit-mask-image:radial-gradient(ellipse 67% 76% at 65% 53%,#000 56%,rgba(0,0,0,.94) 73%,transparent 100%)!important;
    mask-image:radial-gradient(ellipse 67% 76% at 65% 53%,#000 56%,rgba(0,0,0,.94) 73%,transparent 100%)!important;
    filter:drop-shadow(-18px 22px 46px rgba(0,0,0,.52))!important;
  }
  .hero-stage .hero-right::after{
    left:30%!important;
    width:58%!important;
    bottom:6%!important;
    opacity:.52!important;
  }
  .hero-stage .hstats{
    width:100%!important;
    margin:clamp(30px,4.5vh,48px) 0 0!important;
    background:rgba(8,10,8,.22)!important;
    border:0!important;
    border-top:1px solid rgba(243,240,230,.12)!important;
    border-radius:0!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
  }
  .hero .hstat{
    padding:23px 20px 19px!important;
  }
}

@media(max-width:1100px){
  .hero::before{
    background:radial-gradient(ellipse at 50% 68%,rgba(8,10,8,.34),transparent 58%)!important;
  }
  .hero-stage .hero-left{
    max-width:650px!important;
  }
  .hero-stage .hero-right{
    --hero-video-top:0px;
    --hero-wolf-height:clamp(430px,56vh,540px);
    margin-top:clamp(44px,6vw,64px)!important;
    min-height:var(--hero-wolf-height)!important;
    overflow:visible!important;
    isolation:isolate;
  }
  .hero-stage .hero-right::before{
    top:var(--hero-video-top)!important;
    left:-12vw!important;
    right:-12vw!important;
    bottom:0!important;
    border-radius:32px 32px 0 0!important;
    background:linear-gradient(180deg,#080A08 0%,#080A08 100%)!important;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 18%,#000 82%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0%,#000 18%,#000 82%,transparent 100%);
  }
  .hero-stage .wolf-video{
    left:50%!important;
    right:auto!important;
    top:var(--hero-video-top)!important;
    bottom:auto!important;
    translate:-50% 0;
    height:var(--hero-wolf-height)!important;
    max-height:none!important;
    max-width:min(72vw,540px)!important;
    -webkit-mask-image:radial-gradient(ellipse 68% 78% at 65% 53%,#000 57%,rgba(0,0,0,.94) 74%,transparent 100%)!important;
    mask-image:radial-gradient(ellipse 68% 78% at 65% 53%,#000 57%,rgba(0,0,0,.94) 74%,transparent 100%)!important;
  }
  .hero-stage .hstats{
    margin-top:28px!important;
    border-radius:0!important;
    border:0!important;
    border-top:1px solid rgba(243,240,230,.12)!important;
    box-shadow:none!important;
    background:rgba(8,10,8,.18)!important;
  }
}

@media(max-width:720px){
  .hero .hbadge{
    margin-bottom:26px!important;
  }
  .hero .hh1{
    line-height:1.01!important;
  }
  .hero-stage .hero-right{
    --hero-wolf-height:clamp(330px,45vh,390px);
    margin-top:38px!important;
  }
  .hero-stage .hero-right::before{
    left:-24px!important;
    right:-24px!important;
    border-radius:26px 26px 0 0!important;
  }
  .hero-stage .wolf-video{
    max-width:94vw!important;
  }
  .hero-stage .hstats{
    margin-top:20px!important;
  }
  .hero .hstat{
    padding:20px 14px!important;
  }
}

/* Ajuste de integración para el video recortado con transparencia real. */
@media(min-width:1101px){
  .hero-stage .hero-right::before{
    left:-18%!important;
    right:-14%!important;
    background:radial-gradient(ellipse 78% 82% at 68% 54%,rgba(8,10,8,.88) 0%,rgba(8,10,8,.56) 44%,rgba(8,10,8,.18) 70%,transparent 100%)!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
  }
  .hero-stage .wolf-video{
    --hero-wolf-left:clamp(88px,7vw,118px);
    left:var(--hero-wolf-left)!important;
    -webkit-mask-image:radial-gradient(ellipse 92% 90% at 54% 52%,#000 76%,rgba(0,0,0,.96) 88%,transparent 100%)!important;
    mask-image:radial-gradient(ellipse 92% 90% at 54% 52%,#000 76%,rgba(0,0,0,.96) 88%,transparent 100%)!important;
  }
}
@media(max-width:1100px){
  .hero-stage .hero-right::before{
    background:radial-gradient(ellipse 84% 88% at 50% 54%,rgba(8,10,8,.90) 0%,rgba(8,10,8,.58) 48%,rgba(8,10,8,.12) 76%,transparent 100%)!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
  }
  .hero-stage .wolf-video{
    -webkit-mask-image:radial-gradient(ellipse 94% 92% at 52% 52%,#000 78%,rgba(0,0,0,.96) 90%,transparent 100%)!important;
    mask-image:radial-gradient(ellipse 94% 92% at 52% 52%,#000 78%,rgba(0,0,0,.96) 90%,transparent 100%)!important;
  }
}

/* Transparencia nativa: sin caja oscura alrededor de Rocco. */
.hero-stage .hero-right::before{
  display:none!important;
}
.hero-stage .hero-right.uses-video-fallback::before{
  display:block!important;
}

/* El WebM principal ya contiene transparencia real; no necesita máscara. */
.hero-stage .wolf-video{
  -webkit-mask-image:none!important;
  mask-image:none!important;
}
@media(min-width:1101px){
  .hero-stage .hero-right.uses-video-fallback .wolf-video{
    -webkit-mask-image:radial-gradient(ellipse 92% 90% at 54% 52%,#000 76%,rgba(0,0,0,.96) 88%,transparent 100%)!important;
    mask-image:radial-gradient(ellipse 92% 90% at 54% 52%,#000 76%,rgba(0,0,0,.96) 88%,transparent 100%)!important;
  }
}
@media(max-width:1100px){
  .hero-stage .hero-right.uses-video-fallback .wolf-video{
    -webkit-mask-image:radial-gradient(ellipse 94% 92% at 52% 52%,#000 78%,rgba(0,0,0,.96) 90%,transparent 100%)!important;
    mask-image:radial-gradient(ellipse 94% 92% at 52% 52%,#000 78%,rgba(0,0,0,.96) 90%,transparent 100%)!important;
  }
}

/* ════════════════════════════════════════════════
   HERO TUNING — ajuste fino solicitado
   Más alineado con la proyección visual: menos separación vertical,
   barra inferior más integrada y sombra lima pegada al personaje.
════════════════════════════════════════════════ */
@media(min-width:1101px){
  .hero-stage{
    grid-template-rows:auto auto!important;
    align-content:center!important;
    row-gap:0!important;
    min-height:calc(100svh - 118px)!important;
    column-gap:clamp(58px,5vw,92px)!important;
  }
  .hero-stage .hero-left{
    max-width:590px!important;
    padding-block:0!important;
  }
  .hero .hbadge{
    margin-bottom:20px!important;
    padding:7px 16px!important;
  }
  .hero .hh1{
    margin-bottom:14px!important;
    line-height:.97!important;
  }
  .hero .hsub{
    line-height:1.72!important;
    margin-bottom:26px!important;
    max-width:520px!important;
  }
  .hero .hacts{
    gap:14px!important;
  }
  .hero-stage .hero-right{
    min-height:clamp(500px,60vh,590px)!important;
  }
  .hero-stage .wolf-video{
    --hero-wolf-height:clamp(495px,59vh,590px)!important;
    --hero-wolf-left:clamp(68px,5.7vw,102px)!important;
    left:var(--hero-wolf-left)!important;
    top:var(--hero-video-top)!important;
    filter:drop-shadow(-14px 18px 38px rgba(0,0,0,.42))!important;
  }
  .hero-stage .hero-right::after{
    left:42%!important;
    width:34%!important;
    height:24px!important;
    bottom:18%!important;
    opacity:.34!important;
    filter:blur(6px)!important;
    background:radial-gradient(ellipse at center, rgba(222,242,44,.18), rgba(222,242,44,.05) 58%, transparent 76%)!important;
  }
  .hero-stage .hstats{
    margin:-8px 0 0!important;
    padding-top:0!important;
    background:rgba(8,10,8,.16)!important;
  }
  .hero .hstat{
    padding:18px 20px 16px!important;
  }
}

@media(max-width:1100px){
  .hero-stage{
    grid-template-rows:auto auto auto!important;
    row-gap:0!important;
    align-content:start!important;
  }
  .hero .hbadge{
    margin-bottom:20px!important;
  }
  .hero .hh1{
    margin-bottom:14px!important;
  }
  .hero .hsub{
    margin-bottom:24px!important;
    line-height:1.7!important;
  }
  .hero-stage .hero-right{
    margin-top:24px!important;
    min-height:var(--hero-wolf-height)!important;
  }
  .hero-stage .hero-right::after{
    left:37%!important;
    width:30%!important;
    height:20px!important;
    bottom:13%!important;
    opacity:.3!important;
    filter:blur(5px)!important;
  }
  .hero-stage .hstats{
    margin-top:8px!important;
  }
}

@media(max-width:720px){
  .hero .hbadge{
    margin-bottom:18px!important;
  }
  .hero .hh1{
    margin-bottom:12px!important;
  }
  .hero .hsub{
    margin-bottom:22px!important;
    line-height:1.68!important;
  }
  .hero-stage .hero-right{
    margin-top:20px!important;
  }
  .hero-stage .hero-right::after{
    left:35%!important;
    width:32%!important;
    height:18px!important;
    bottom:14%!important;
  }
  .hero-stage .hstats{
    margin-top:6px!important;
  }
}

/* ════════════════════════════════════════════════
   COLSING — PULIDO GENERAL FINAL
   No modifica la geometría ni la composición del hero.
════════════════════════════════════════════════ */
:root{
  --radius-xs:10px;
  --radius-sm:12px;
  --radius-md:18px;
  --radius-lg:26px;
  --shadow-soft:0 14px 38px rgba(0,0,0,.14);
  --shadow-card:0 18px 46px rgba(0,0,0,.18);
  --shadow-hover:0 24px 58px rgba(0,0,0,.24);
  --focus-ring:0 0 0 3px rgba(222,242,44,.16);
}

body{
  line-height:1.55;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

/* ── Jerarquía tipográfica ── */
.eyebrow,
.svc-info-eyebrow,
.strata-label,
.tm-role,
.acc-num,
.sd-num,
.sd-cta-eyebrow{
  font-weight:750!important;
  letter-spacing:.14em!important;
}

.sh2{
  max-width:15ch;
  font-size:clamp(2rem,3.45vw,3.35rem)!important;
  line-height:1.04!important;
  letter-spacing:-.035em!important;
  margin-top:16px!important;
  margin-bottom:16px!important;
}

.lead{
  max-width:620px;
  color:var(--text-mid)!important;
  font-size:clamp(.92rem,1.1vw,1.02rem)!important;
  line-height:1.82!important;
}

.svc-info-title,
.acc-title,
.contact-info-t,
.wcard-t,
.tm-name,
.cform h3{
  letter-spacing:-.022em!important;
}

.svc-info-desc,
.acc-desc,
.strata-desc,
.wi-d,
.wcard-d,
.contact-info-b,
.cform p{
  color:var(--text-dim)!important;
  line-height:1.72!important;
}

/* ── Foco accesible y estados activos ── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--lime)!important;
  outline-offset:4px!important;
}

button,
a,
input,
textarea,
select{
  -webkit-tap-highlight-color:transparent;
}

/* ── Navegación ── */
nav{
  padding-inline:var(--gutter)!important;
}
.nlinks{
  gap:clamp(18px,2vw,30px)!important;
}
.nlink{
  position:relative;
  padding:9px 0!important;
  font-size:.73rem!important;
  font-weight:650!important;
  letter-spacing:.025em!important;
}
.nlink::after{
  content:'';
  position:absolute;
  left:0;
  right:100%;
  bottom:3px;
  height:1px;
  background:var(--lime);
  transition:right .28s var(--ease);
}
.nlink:hover::after,
.nlink.active::after{
  right:0;
}
.ncta{
  min-height:42px;
  padding:10px 20px!important;
  border-radius:var(--radius-sm)!important;
  box-shadow:0 8px 22px rgba(222,242,44,.10);
}
.ncta:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 12px 28px rgba(222,242,44,.18)!important;
}
.lang-toggle{
  min-height:40px!important;
  border-radius:var(--radius-sm)!important;
  background:rgba(12,21,16,.72)!important;
}
.lang-menu{
  border-radius:16px!important;
  box-shadow:0 22px 56px rgba(0,0,0,.42)!important;
}

/* ── Botones y llamados a la acción ── */
.btn-p,
.btn-g,
.svc-cta,
.acc-cta,
.acc-more,
.btn-strata,
.fsub,
.sd-cta-acts .btn-p,
.sd-cta-acts .btn-g{
  min-height:48px;
  border-radius:var(--radius-sm)!important;
  font-family:var(--font-heading)!important;
  font-weight:720!important;
  letter-spacing:-.005em;
  transition:transform .22s var(--ease),box-shadow .28s var(--ease),background .25s,border-color .25s,color .25s!important;
}
.btn-p,
.fsub{
  box-shadow:0 10px 26px rgba(222,242,44,.13)!important;
}
.btn-p:hover,
.fsub:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 16px 34px rgba(222,242,44,.20)!important;
}
.btn-g:hover,
.svc-cta:hover,
.acc-cta:hover,
.acc-more:hover,
.btn-strata:hover{
  transform:translateY(-2px)!important;
  border-color:rgba(222,242,44,.36)!important;
  background:rgba(222,242,44,.08)!important;
  box-shadow:0 12px 28px rgba(0,0,0,.14)!important;
}
.btn-p:active,
.btn-g:active,
.svc-cta:active,
.acc-cta:active,
.acc-more:active,
.btn-strata:active,
.fsub:active{
  transform:translateY(0) scale(.985)!important;
}
.btn-p svg,
.btn-g svg,
.svc-cta svg,
.acc-cta svg,
.fsub svg{
  flex:0 0 auto;
  transition:transform .25s var(--ease)!important;
}

/* ── Servicios ── */
.svcs-head{
  align-items:end!important;
}
.svc-explorer,
.svc-panel{
  border-radius:var(--radius-lg)!important;
}
.svc-panel{
  border:1px solid rgba(243,240,230,.10)!important;
  box-shadow:var(--shadow-card)!important;
}
.svc-menu{
  border-right:1px solid rgba(243,240,230,.08)!important;
}
.svc-tab{
  min-height:72px;
  padding:17px 20px!important;
  border-bottom-color:rgba(243,240,230,.07)!important;
  transition:background .26s,color .26s,transform .25s var(--ease)!important;
}
.svc-tab:hover{
  transform:translateX(3px);
  background:rgba(222,242,44,.055)!important;
}
.svc-tab.active{
  background:linear-gradient(90deg,rgba(222,242,44,.10),rgba(222,242,44,.025))!important;
}
.svc-tab.active::after{
  width:3px!important;
  border-radius:0 3px 3px 0;
}
.svc-tab-num{
  font-variant-numeric:tabular-nums;
}
.svc-tab-label{
  font-weight:680!important;
  letter-spacing:-.01em!important;
}
.svc-visual{
  border-right:1px solid rgba(243,240,230,.07)!important;
}
.svc-info{
  padding:clamp(30px,3.2vw,48px)!important;
}
.svc-info-title{
  font-size:clamp(1.7rem,2.4vw,2.45rem)!important;
  line-height:1.08!important;
  margin-bottom:16px!important;
}
.svc-info-desc{
  max-width:50ch;
  font-size:.9rem!important;
}
.svc-caps,
.acc-caps{
  gap:8px!important;
}
.svc-cap,
.acc-cap,
.sd-chip{
  padding:7px 12px!important;
  border-radius:999px!important;
  font-size:.68rem!important;
  font-weight:650!important;
  letter-spacing:.015em;
}
.acc-trigger{
  transition:background .25s,border-color .25s,color .25s!important;
}
.acc-trigger:hover{
  background:rgba(222,242,44,.055)!important;
}

/* ── STRATA ── */
.strata-heading{
  margin-bottom:clamp(40px,5vh,58px)!important;
}
.strata-heading-note{
  color:var(--text-dim)!important;
  line-height:1.7!important;
}
.strata-integrated{
  border-radius:var(--radius-lg)!important;
  border-color:rgba(243,240,230,.10)!important;
  box-shadow:var(--shadow-card)!important;
}
.strata-ph-card{
  padding:clamp(24px,2.5vw,34px)!important;
  transition:transform .28s var(--ease),background .28s,border-color .28s,box-shadow .28s!important;
}
.strata-ph-card:hover{
  transform:translateY(-4px)!important;
  box-shadow:0 16px 34px rgba(0,0,0,.16)!important;
}
.sph-t{
  font-size:.94rem!important;
  line-height:1.3!important;
}
.sph-d{
  line-height:1.65!important;
}
.strata-site-brand{
  border-radius:var(--radius-sm)!important;
}

/* ── Proceso claro ── */
.proc .sh2{
  color:var(--brand-green)!important;
}
.proc .lead{
  color:rgba(21,38,26,.78)!important;
}
.proc .pstep{
  border:1px solid rgba(21,38,26,.09)!important;
  box-shadow:0 10px 28px rgba(21,38,26,.055)!important;
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s,background .3s!important;
}
.proc .pstep:hover{
  transform:translateY(-4px)!important;
  border-color:rgba(21,38,26,.16)!important;
  box-shadow:0 16px 34px rgba(21,38,26,.09)!important;
}
.proc .pstep.is-active{
  border-color:rgba(222,242,44,.62)!important;
  box-shadow:0 18px 38px rgba(21,38,26,.10),0 0 0 3px rgba(222,242,44,.15)!important;
}
.proc .pstep-t{
  font-size:.88rem!important;
  line-height:1.35!important;
}
.proc .pstep-d{
  color:rgba(21,38,26,.66)!important;
  font-size:.74rem!important;
  line-height:1.62!important;
}

/* ── Por qué COLSING ── */
.why .wi{
  border-radius:var(--radius-md)!important;
  box-shadow:0 10px 28px rgba(0,0,0,.10)!important;
  transition:transform .28s var(--ease),box-shadow .28s,border-color .28s,background .28s!important;
}
.why .wi:hover{
  transform:translateX(4px) translateY(-2px)!important;
  box-shadow:0 18px 38px rgba(0,0,0,.18)!important;
  background:linear-gradient(90deg,rgba(222,242,44,.075),rgba(222,242,44,.025))!important;
}
.wi-t{
  font-size:.9rem!important;
  line-height:1.3!important;
}
.wi-d{
  font-size:.76rem!important;
}
.why .wcard{
  border-radius:22px!important;
  box-shadow:0 22px 54px rgba(0,0,0,.24)!important;
}
.why .wcard:hover{
  box-shadow:0 28px 64px rgba(0,0,0,.30)!important;
}

/* ── Equipo ── */
.tm-card{
  border:1px solid rgba(243,240,230,.10)!important;
  border-radius:22px!important;
  overflow:hidden;
  box-shadow:var(--shadow-soft)!important;
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s!important;
}
.tm-card:hover{
  transform:translateY(-6px)!important;
  border-color:rgba(222,242,44,.20)!important;
  box-shadow:var(--shadow-hover)!important;
}
.tm-portrait{
  overflow:hidden;
}
.tm-photo img{
  transition:transform .55s var(--ease),filter .4s!important;
}
.tm-card:hover .tm-photo img{
  transform:scale(1.025);
}
.tm-role{
  font-size:.66rem!important;
}
.tm-name{
  font-size:1.02rem!important;
  line-height:1.25!important;
}

/* ── Contacto y formularios ── */
.contact-info-t{
  font-size:clamp(1.9rem,3vw,2.85rem)!important;
  line-height:1.06!important;
  margin-bottom:20px!important;
}
.contact-info-b{
  max-width:440px!important;
  font-size:.92rem!important;
}
.channels{
  gap:14px!important;
}
.ch{
  border-radius:var(--radius-md)!important;
  box-shadow:0 10px 26px rgba(0,0,0,.10)!important;
  transition:transform .28s var(--ease),box-shadow .28s,border-color .28s,background .28s!important;
}
.ch:hover{
  transform:translateX(4px)!important;
  box-shadow:0 16px 34px rgba(0,0,0,.16)!important;
}
.cform{
  border-radius:var(--radius-lg)!important;
  box-shadow:var(--shadow-card)!important;
}
.cform h3{
  font-size:1.42rem!important;
  line-height:1.25!important;
}
.fg label{
  font-weight:650!important;
  letter-spacing:.01em;
}
.ff,
.fsel{
  min-height:52px!important;
  border-radius:var(--radius-sm)!important;
  border-width:1px!important;
  background:rgba(36,53,39,.84)!important;
  transition:border-color .22s,background .22s,box-shadow .22s!important;
}
textarea.ff{
  min-height:126px!important;
}
.ff:hover,
.fsel:hover{
  border-color:rgba(243,240,230,.18)!important;
}
.ff:focus,
.fsel:focus{
  background:rgba(36,53,39,.96)!important;
  box-shadow:var(--focus-ring)!important;
}
.ff::placeholder{
  color:rgba(243,240,230,.46)!important;
}
.fsub{
  margin-top:8px!important;
}

/* ── Pie de página ── */
footer{
  min-height:92px;
  border-top-color:rgba(243,240,230,.08)!important;
}
.flinks{
  gap:24px!important;
}
.flink{
  position:relative;
  font-weight:600;
  letter-spacing:.015em;
}
.flink::after{
  content:'';
  position:absolute;
  left:0;
  right:100%;
  bottom:-5px;
  height:1px;
  background:var(--lime);
  transition:right .25s var(--ease);
}
.flink:hover::after{
  right:0;
}

/* ── Microinteracciones discretas ── */
.wafab{
  box-shadow:0 12px 30px rgba(222,242,44,.19)!important;
}
.wafab:hover{
  transform:translateY(-3px) scale(1.035)!important;
  box-shadow:0 18px 38px rgba(222,242,44,.27)!important;
}

@media(max-width:1100px){
  .sh2{
    max-width:18ch;
  }
  .svc-tab{
    min-height:66px;
  }
}

@media(max-width:720px){
  .sh2{
    max-width:none;
    font-size:clamp(1.85rem,8vw,2.55rem)!important;
  }
  .lead{
    font-size:.9rem!important;
    line-height:1.74!important;
  }
  .btn-p,
  .btn-g,
  .svc-cta,
  .acc-cta,
  .acc-more,
  .btn-strata,
  .fsub{
    min-height:46px;
  }
  .svc-panel,
  .strata-integrated,
  .cform{
    border-radius:20px!important;
  }
  .contact-info-t{
    font-size:clamp(1.75rem,8vw,2.35rem)!important;
  }
  footer{
    min-height:auto;
    gap:20px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
  }
  .svc-tab:hover,
  .strata-ph-card:hover,
  .why .wi:hover,
  .tm-card:hover,
  .ch:hover,
  .wafab:hover,
  .btn-p:hover,
  .btn-g:hover,
  .svc-cta:hover,
  .acc-cta:hover,
  .acc-more:hover,
  .btn-strata:hover,
  .fsub:hover{
    transform:none!important;
  }
}

/* ════════════════════════════════════════════════
   SERVICIOS — CORRECCIÓN DE ACABADO Y RESPONSIVE
   Un solo contenedor, radios coherentes, detalle tipo STRATA y
   animaciones completas en todas las resoluciones.
════════════════════════════════════════════════ */
.svc-explorer{
  display:grid!important;
  grid-template-columns:minmax(270px,286px) minmax(0,1fr)!important;
  min-height:700px!important;
  border:1px solid rgba(243,240,230,.10)!important;
  border-radius:var(--radius-lg)!important;
  overflow:hidden!important;
  background:linear-gradient(145deg,var(--surface2),var(--surface))!important;
  box-shadow:var(--shadow-card)!important;
  isolation:isolate;
}
.svc-accordion{display:none!important}

/* El radio pertenece únicamente al contenedor exterior. */
.svc-menu,
.svc-panel,
.svc-stage,
.svc-slide,
.svc-visual,
.svc-info{
  border-radius:0!important;
}
.svc-menu{
  padding:10px 0!important;
  background:linear-gradient(180deg,var(--green-base),var(--green-surface))!important;
  border:0!important;
  border-right:1px solid rgba(243,240,230,.08)!important;
  box-shadow:inset -18px 0 32px rgba(0,0,0,.055)!important;
}
.svc-panel{
  min-width:0;
  min-height:700px!important;
  border:0!important;
  box-shadow:none!important;
  background:linear-gradient(180deg,var(--surface2),var(--surface))!important;
  overflow:hidden!important;
}
.svc-panel::before{display:none!important}
.svc-panel.is-resting{box-shadow:none!important}

.svc-tab{
  min-height:76px!important;
  padding:18px 22px!important;
  border:0!important;
  border-bottom:1px solid rgba(243,240,230,.065)!important;
}
.svc-tab:last-of-type{border-bottom:0!important}
.svc-tab.active{
  box-shadow:inset 3px 0 0 var(--lime)!important;
}
.svc-tab.active::after{
  inset:0!important;
  width:auto!important;
  border-radius:0!important;
  background:linear-gradient(90deg,rgba(222,242,44,.095),transparent 78%)!important;
}
.svc-menu-footer{
  border-top-color:rgba(243,240,230,.08)!important;
}

.svc-slide{
  grid-template-rows:minmax(410px,1fr) minmax(238px,auto)!important;
}
.svc-visual{
  min-height:410px!important;
  padding:34px clamp(34px,4vw,58px)!important;
  border:0!important;
  overflow:visible!important;
  background:
    radial-gradient(circle at 50% 48%,rgba(222,242,44,.055),transparent 58%),
    linear-gradient(180deg,var(--surface2),var(--surface))!important;
}
.svc-visual-bg{
  inset:22px!important;
  border-radius:20px!important;
  opacity:.055!important;
}
.svc-visual>svg,
.svc-visual>.service-motion{
  display:block!important;
  width:min(100%,560px)!important;
  height:auto!important;
  max-width:560px!important;
  max-height:none!important;
  overflow:visible!important;
  transform-origin:center center!important;
}
.svc-slide:not([data-slide="4"]) .svc-visual>svg,
.svc-slide[data-slide="4"] .svc-visual>svg{
  transform:none!important;
}

.svc-info{
  min-height:238px!important;
  padding:30px clamp(32px,3.4vw,50px)!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(190px,218px)!important;
  align-items:center!important;
  gap:clamp(28px,4vw,48px)!important;
  border:0!important;
  border-top:1px solid rgba(243,240,230,.08)!important;
  background:linear-gradient(180deg,rgba(27,48,32,.88),rgba(19,33,24,.98))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.015)!important;
}
.svc-info-left{
  max-width:720px!important;
}
.svc-info-title{
  max-width:24ch;
}
.svc-info-desc{
  max-width:66ch!important;
  font-size:.91rem!important;
  line-height:1.72!important;
  margin-bottom:18px!important;
}
.svc-actions{
  width:100%!important;
  flex:0 0 auto!important;
  align-self:center!important;
}
.svc-actions .svc-cta,
.svc-more{
  border-radius:12px!important;
}

/* Tablet: el menú pasa arriba y el panel conserva la animación original. */
@media(max-width:960px){
  .svc-explorer{
    grid-template-columns:1fr!important;
    min-height:0!important;
  }
  .svc-menu{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    padding:0!important;
    border-right:0!important;
    border-bottom:1px solid rgba(243,240,230,.08)!important;
    box-shadow:inset 0 -14px 28px rgba(0,0,0,.045)!important;
  }
  .svc-tab{
    min-height:72px!important;
    padding:15px 18px!important;
    border-right:1px solid rgba(243,240,230,.06)!important;
    border-bottom:1px solid rgba(243,240,230,.06)!important;
  }
  .svc-tab:nth-child(3n){border-right:0!important}
  .svc-tab:nth-last-child(-n+3){border-bottom:0!important}
  .svc-tab.active{
    box-shadow:inset 0 -3px 0 var(--lime)!important;
  }
  .svc-tab.active::after{
    background:linear-gradient(180deg,transparent,rgba(222,242,44,.085))!important;
  }
  .svc-menu-footer{display:none!important}
  .svc-panel{
    min-height:0!important;
    overflow:hidden!important;
  }
  .svc-slide{
    display:none!important;
    position:relative!important;
    inset:auto!important;
    grid-template-rows:auto auto!important;
    transform:none!important;
  }
  .svc-slide.active{
    display:grid!important;
    opacity:1!important;
    pointer-events:auto!important;
  }
  .svc-slide.exit{display:none!important}
  .svc-visual{
    min-height:380px!important;
    padding:34px clamp(28px,6vw,58px)!important;
  }
  .svc-visual>svg,
  .svc-visual>.service-motion{
    width:min(100%,540px)!important;
    max-width:540px!important;
  }
  .svc-info{
    min-height:0!important;
    grid-template-columns:minmax(0,1fr) minmax(180px,205px)!important;
    padding:30px clamp(28px,5vw,44px)!important;
  }
}

/* Móvil: menú desplazable, visual completo y descripción sin recortes. */
@media(max-width:640px){
  .svc-explorer{
    border-radius:20px!important;
  }
  .svc-menu{
    display:flex!important;
    flex-direction:row!important;
    overflow-x:auto!important;
    overscroll-behavior-inline:contain;
    scrollbar-width:thin;
    scroll-snap-type:x proximity;
  }
  .svc-tab{
    flex:0 0 178px!important;
    min-height:68px!important;
    padding:14px 16px!important;
    border-right:1px solid rgba(243,240,230,.065)!important;
    border-bottom:0!important;
    scroll-snap-align:start;
  }
  .svc-tab:nth-child(3n),
  .svc-tab:nth-last-child(-n+3){
    border-right:1px solid rgba(243,240,230,.065)!important;
    border-bottom:0!important;
  }
  .svc-tab:last-child{border-right:0!important}
  .svc-tab:hover{transform:none!important}
  .svc-tab.active{
    box-shadow:inset 0 -3px 0 var(--lime)!important;
  }
  .svc-visual{
    min-height:300px!important;
    padding:26px 18px!important;
  }
  .svc-visual-bg{
    inset:14px!important;
    border-radius:16px!important;
  }
  .svc-visual>svg,
  .svc-visual>.service-motion{
    width:min(100%,440px)!important;
    max-width:440px!important;
  }
  .svc-info{
    display:block!important;
    padding:26px 22px 28px!important;
  }
  .svc-info-title{
    font-size:clamp(1.48rem,7vw,1.9rem)!important;
    max-width:none!important;
  }
  .svc-info-desc{
    max-width:none!important;
    font-size:.88rem!important;
  }
  .svc-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    margin-top:22px!important;
  }
}

@media(max-width:460px){
  .svc-tab{flex-basis:164px!important}
  .svc-visual{
    min-height:270px!important;
    padding:22px 12px!important;
  }
  .svc-actions{
    grid-template-columns:1fr!important;
  }
}

/* ════════════════════════════════════════════════
   SERVICIOS MÓVIL — ACORDEÓN VISUAL INTUITIVO
   El explorador de escritorio se conserva desde 821 px.
════════════════════════════════════════════════ */
.svc-accordion{
  display:none!important;
}

@media(max-width:820px){
  .svcs-head{
    grid-template-columns:1fr!important;
    gap:18px!important;
    margin-bottom:30px!important;
  }
  .svcs-head .lead{
    max-width:60ch;
  }

  .svc-explorer{
    display:none!important;
  }
  .svc-accordion{
    display:flex!important;
    flex-direction:column;
    gap:12px;
    border:0!important;
    border-radius:0!important;
    overflow:visible!important;
    background:transparent!important;
  }

  .acc-guide{
    padding:0 2px 8px;
  }
  .acc-guide span{
    display:block;
    margin-bottom:5px;
    font-family:var(--font-heading);
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--lime);
  }
  .acc-guide p{
    max-width:42ch;
    font-size:.86rem;
    line-height:1.55;
    color:var(--text-dim);
  }

  .acc-item{
    border:1px solid rgba(243,240,230,.10)!important;
    border-radius:18px!important;
    overflow:hidden!important;
    background:linear-gradient(180deg,rgba(27,48,32,.94),rgba(19,33,24,.98))!important;
    box-shadow:0 12px 34px rgba(0,0,0,.13),inset 0 1px 0 rgba(255,255,255,.018)!important;
    transition:border-color .28s var(--ease),box-shadow .28s var(--ease),transform .28s var(--ease);
  }
  .acc-item:last-child{
    border-bottom:1px solid rgba(243,240,230,.10)!important;
  }
  .acc-item.is-open{
    border-color:rgba(222,242,44,.25)!important;
    box-shadow:0 18px 46px rgba(0,0,0,.20),0 0 0 1px rgba(222,242,44,.035),inset 0 1px 0 rgba(255,255,255,.025)!important;
  }

  .acc-trigger{
    width:100%;
    min-height:88px;
    display:grid!important;
    grid-template-columns:34px minmax(0,1fr) 38px;
    align-items:center;
    gap:13px!important;
    padding:17px 17px 17px 18px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    text-align:left;
    transition:background .24s var(--ease);
  }
  .acc-trigger:hover,
  .acc-trigger:focus-visible{
    background:rgba(222,242,44,.035)!important;
  }
  .acc-trigger:focus-visible{
    outline:2px solid rgba(222,242,44,.68)!important;
    outline-offset:-3px!important;
  }
  .acc-trigger.open{
    background:linear-gradient(90deg,rgba(222,242,44,.055),transparent 72%)!important;
  }

  .acc-num{
    min-width:0!important;
    align-self:start;
    padding-top:3px;
    font-family:var(--font-heading);
    font-size:.66rem!important;
    font-weight:800!important;
    letter-spacing:.12em!important;
    color:var(--lime)!important;
  }
  .acc-trigger-copy{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:5px;
  }
  .acc-label{
    display:block;
    font-family:var(--font-heading);
    font-size:clamp(.96rem,3.8vw,1.08rem)!important;
    font-weight:750!important;
    line-height:1.22;
    color:var(--white)!important;
  }
  .acc-summary{
    display:block;
    max-width:42ch;
    font-size:.76rem;
    line-height:1.42;
    color:rgba(243,240,230,.60);
  }
  .acc-toggle{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    justify-self:end;
    border:1px solid rgba(243,240,230,.11);
    border-radius:50%;
    background:rgba(255,255,255,.025);
    transition:background .25s,border-color .25s,transform .25s;
  }
  .acc-chevron{
    width:15px!important;
    height:15px!important;
    color:var(--text-dim)!important;
    transition:transform .32s var(--ease),color .25s!important;
  }
  .acc-trigger.open .acc-toggle{
    border-color:rgba(222,242,44,.26);
    background:rgba(222,242,44,.08);
  }
  .acc-trigger.open .acc-chevron{
    transform:rotate(180deg)!important;
    color:var(--lime)!important;
  }

  .acc-body{
    display:block!important;
    max-height:0;
    overflow:hidden!important;
    border:0!important;
    border-radius:0!important;
    background:rgba(8,10,8,.15)!important;
    transition:max-height .5s cubic-bezier(.16,1,.3,1)!important;
  }
  .acc-body.open{
    border-top:1px solid rgba(243,240,230,.075)!important;
  }

  .acc-mini-visual{
    width:100%;
    min-height:clamp(270px,72vw,390px)!important;
    aspect-ratio:4/3;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:clamp(20px,5vw,34px)!important;
    border:0!important;
    border-radius:0!important;
    overflow:hidden!important;
    background:
      radial-gradient(circle at 50% 48%,rgba(222,242,44,.065),transparent 60%),
      linear-gradient(180deg,rgba(26,42,30,.96),rgba(19,33,24,.98))!important;
  }
  .acc-body[data-body="2"] .acc-mini-visual,
  .acc-body[data-body="3"] .acc-mini-visual{
    min-height:clamp(290px,78vw,410px)!important;
  }
  .acc-mini-visual .mobile-service-visual{
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:560px!important;
    max-height:100%!important;
    overflow:visible!important;
    transform:none!important;
    transform-origin:center center!important;
  }

  .acc-body-inner{
    padding:24px 22px 22px!important;
    border-top:1px solid rgba(243,240,230,.065);
  }
  .acc-title{
    max-width:26ch;
    margin-bottom:9px!important;
    font-family:var(--font-heading);
    font-size:clamp(1.14rem,4.7vw,1.36rem)!important;
    font-weight:780!important;
    line-height:1.2!important;
    color:var(--white)!important;
  }
  .acc-desc{
    max-width:62ch;
    margin-bottom:17px!important;
    font-size:.89rem!important;
    line-height:1.68!important;
    color:rgba(243,240,230,.72)!important;
  }
  .acc-caps{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:7px!important;
    margin-bottom:0!important;
  }
  .acc-cap{
    padding:6px 11px!important;
    border:1px solid rgba(222,242,44,.17)!important;
    border-radius:999px!important;
    background:rgba(222,242,44,.055)!important;
    font-size:.66rem!important;
    color:var(--bone)!important;
  }
  .acc-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
    margin-top:20px!important;
  }
  .acc-more,
  .acc-contact{
    min-height:46px!important;
    padding:11px 15px!important;
    border-radius:11px!important;
    font-size:.78rem!important;
  }

  .acc-body.open .acc-mini-visual,
  .acc-body.open .acc-title,
  .acc-body.open .acc-desc,
  .acc-body.open .acc-caps,
  .acc-body.open .acc-actions{
    opacity:0;
    animation:svcDetailReveal .5s cubic-bezier(.16,1,.3,1) both;
  }
  .acc-body.open .acc-mini-visual{animation-delay:.02s}
  .acc-body.open .acc-title{animation-delay:.08s}
  .acc-body.open .acc-desc{animation-delay:.13s}
  .acc-body.open .acc-caps{animation-delay:.18s}
  .acc-body.open .acc-actions{animation-delay:.23s}
}

@media(max-width:480px){
  .svc-accordion{gap:10px!important}
  .acc-trigger{
    min-height:84px;
    grid-template-columns:29px minmax(0,1fr) 34px;
    gap:10px!important;
    padding:15px 14px 15px 15px!important;
  }
  .acc-label{font-size:.96rem!important}
  .acc-summary{font-size:.72rem}
  .acc-toggle{width:32px;height:32px}
  .acc-mini-visual{
    min-height:250px!important;
    padding:18px 12px!important;
  }
  .acc-body[data-body="2"] .acc-mini-visual,
  .acc-body[data-body="3"] .acc-mini-visual{
    min-height:270px!important;
  }
  .acc-body-inner{padding:21px 18px 19px!important}
}

@media(prefers-reduced-motion:reduce){
  .acc-item,
  .acc-trigger,
  .acc-toggle,
  .acc-chevron,
  .acc-body{
    transition:none!important;
  }
}

/* ════════════════════════════════════════════════
   NAV + HERO BRAND TRANSITION — PRIMER AJUSTE
   Logo institucional central al inicio y navegación glass al desplazarse.
════════════════════════════════════════════════ */
.hero-brand-morph{
  --brand-start-top:clamp(24px,3.2vh,34px);
  position:fixed;
  top:0;
  left:0;
  z-index:160;
  width:clamp(270px,23vw,350px);
  height:auto;
  pointer-events:none;
  opacity:0;
  visibility:visible;
  transform-origin:top left;
  will-change:transform,opacity;
  filter:drop-shadow(0 14px 30px rgba(0,0,0,.20));
}
.hero-brand-morph img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  user-select:none;
}
.home-page.brand-ready .hero-brand-morph{
  opacity:var(--brand-opacity,1);
}

/* Reserva visual bajo el logo central sin desarmar el hero aprobado. */
.home-page .hero-stage{
  box-sizing:border-box;
  padding-top:clamp(38px,5.5vh,66px)!important;
}

/* Barra más alta, espaciada y con vidrio verde profundo. */
nav{
  height:92px!important;
  padding-inline:clamp(34px,5.5vw,88px)!important;
  gap:clamp(26px,3vw,52px)!important;
  background:rgba(15,30,20,.72)!important;
  border-bottom:1px solid rgba(243,240,230,.10)!important;
  box-shadow:0 16px 42px rgba(0,0,0,.12)!important;
  -webkit-backdrop-filter:blur(22px) saturate(132%)!important;
  backdrop-filter:blur(22px) saturate(132%)!important;
}
.home-page nav{
  opacity:var(--nav-reveal,0);
  transform:translate3d(0,var(--nav-bar-shift,-18px),0);
  pointer-events:none;
  visibility:hidden;
  transition:visibility .01s linear .35s;
  will-change:opacity,transform;
}
.home-page nav.nav-visible{
  visibility:visible;
  pointer-events:auto;
  transition-delay:0s;
}
nav.s{
  background:linear-gradient(180deg,rgba(21,38,26,.82),rgba(12,23,16,.74))!important;
  border-bottom-color:rgba(243,240,230,.11)!important;
  box-shadow:0 18px 48px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.025)!important;
}

.nl{
  flex:0 0 auto;
}
.nl img{
  height:clamp(50px,5.6vh,58px)!important;
  width:auto!important;
  opacity:1;
  transition:opacity .12s linear;
}
.home-page nav .nl{
  opacity:var(--nav-logo-opacity,0);
}
.home-page nav .nlinks,
.home-page nav .nav-actions{
  opacity:var(--nav-content-opacity,0);
  transform:translateY(var(--nav-content-shift,-9px));
}
.nlinks,
.nav-actions{
  transition:opacity .12s linear,transform .12s linear;
}
.nlinks{
  gap:clamp(28px,2.6vw,46px)!important;
  margin-inline:auto!important;
}
.nav-actions{
  gap:clamp(14px,1.2vw,20px)!important;
}

/* Texto ligero en reposo; negrilla clara en hover y selección. */
.nlink,
nav:not(.s) .nlink{
  min-height:42px!important;
  padding:10px 0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:rgba(243,240,230,.76)!important;
  font-family:var(--font-heading)!important;
  font-size:.76rem!important;
  font-weight:380!important;
  letter-spacing:.055em!important;
  line-height:1!important;
  transition:color .24s var(--ease),font-weight .24s var(--ease),opacity .24s var(--ease)!important;
}
.nlink::before{
  display:none!important;
}
.nlink::after{
  content:''!important;
  display:block!important;
  position:absolute!important;
  left:0!important;
  right:100%!important;
  bottom:5px!important;
  height:1px!important;
  background:var(--lime)!important;
  opacity:.9!important;
  transition:right .28s var(--ease)!important;
}
.nlink:hover,
nav:not(.s) .nlink:hover,
.nlink.is-active,
nav:not(.s) .nlink.is-active{
  color:var(--white)!important;
  background:transparent!important;
  border-color:transparent!important;
  font-weight:760!important;
  transform:none!important;
}
.nlink:hover::after,
.nlink.is-active::after{
  right:0!important;
}
.nlink.is-active,
nav:not(.s) .nlink.is-active{
  color:var(--lime)!important;
}
.nlinks:has(.nlink.is-active) .nlink:not(.is-active){
  color:rgba(243,240,230,.64)!important;
}

.ncta{
  min-height:46px!important;
  padding:12px 22px!important;
  border-radius:12px!important;
}
.lang-toggle{
  min-height:44px!important;
  padding-inline:13px!important;
  border-color:rgba(243,240,230,.12)!important;
  background:rgba(255,255,255,.035)!important;
}

/* Submenús glass: mismo lenguaje de la barra, no bloque lima. */
.nlinks .nav-drop-menu{
  top:var(--nav-drop-top)!important;
  padding:16px!important;
  border:1px solid rgba(243,240,230,.13)!important;
  border-top-color:rgba(243,240,230,.08)!important;
  border-radius:0 0 22px 22px!important;
  background:linear-gradient(145deg,rgba(21,38,26,.88),rgba(10,20,13,.80))!important;
  -webkit-backdrop-filter:blur(24px) saturate(135%)!important;
  backdrop-filter:blur(24px) saturate(135%)!important;
  box-shadow:0 28px 64px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.nlinks .nav-drop-all{
  color:var(--bone)!important;
  border-bottom-color:rgba(243,240,230,.10)!important;
  background:rgba(255,255,255,.025)!important;
  font-weight:430!important;
}
.nlinks .nav-drop-all:hover,
.nlinks .nav-drop-all:focus-visible{
  color:var(--lime)!important;
  background:rgba(222,242,44,.065)!important;
  font-weight:720!important;
}
.nlinks .nav-drop-item{
  color:rgba(243,240,230,.72)!important;
  border-color:rgba(243,240,230,.07)!important;
  background:rgba(255,255,255,.025)!important;
  font-weight:380!important;
  transition:background .24s,border-color .24s,color .24s,font-weight .24s!important;
}
.nlinks .nav-drop-item:hover,
.nlinks .nav-drop-item:focus-visible{
  color:var(--white)!important;
  background:rgba(222,242,44,.07)!important;
  border-color:rgba(222,242,44,.16)!important;
  font-weight:720!important;
}
.nlinks .nav-drop-num{
  color:var(--lime)!important;
}
.lang-menu{
  background:linear-gradient(145deg,rgba(21,38,26,.90),rgba(10,20,13,.84))!important;
  border-color:rgba(243,240,230,.13)!important;
  -webkit-backdrop-filter:blur(22px) saturate(135%)!important;
  backdrop-filter:blur(22px) saturate(135%)!important;
  box-shadow:0 24px 58px rgba(0,0,0,.34)!important;
}
.lang-option{
  font-weight:380!important;
}
.lang-option:hover,
.lang-option.is-active{
  font-weight:720!important;
}

@media(max-width:1100px){
  .hero-brand-morph{
    --brand-start-top:22px;
    width:clamp(240px,34vw,310px);
  }
  nav{
    height:84px!important;
    padding-inline:clamp(24px,4vw,44px)!important;
  }
  .nl img{
    height:50px!important;
  }
  .home-page .hero-stage{
    padding-top:48px!important;
  }
}

@media(max-width:960px){
  nav{
    height:80px!important;
    gap:18px!important;
  }
  .home-page nav .nav-actions{
    margin-left:auto;
  }
  .nl img{
    height:46px!important;
  }
  .lang-selector--nav{
    display:none!important;
  }
}

@media(max-width:640px){
  .hero-brand-morph{
    --brand-start-top:18px;
    width:clamp(210px,62vw,260px);
  }
  nav{
    height:76px!important;
    padding-inline:20px!important;
  }
  .nl img{
    height:42px!important;
  }
  .home-page .hero-stage{
    padding-top:34px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .hero-brand-morph,
  .home-page nav,
  .home-page nav .nlinks,
  .home-page nav .nav-actions,
  .home-page nav .nl{
    transition:none!important;
  }
}

/* ════════════════════════════════════════════════
   AJUSTE NAV / HERO — SUBMENÚ ORDENADO Y RITMO DE ENTRADA
════════════════════════════════════════════════ */

/* Submenú compacto, centrado y de lectura inmediata. */
@media(min-width:961px){
  .nlinks .nav-drop{
    position:relative!important;
  }
  .nlinks .nav-drop-menu{
    position:absolute!important;
    top:calc(100% + 18px)!important;
    left:50%!important;
    right:auto!important;
    width:min(640px,calc(100vw - 48px))!important;
    max-width:640px!important;
    padding:14px!important;
    border-radius:20px!important;
    transform:translateX(-50%) translateY(-12px) scale(.985)!important;
    transform-origin:top center!important;
    overflow:hidden!important;
  }
  .nlinks .nav-drop.is-open .nav-drop-menu{
    transform:translateX(-50%) translateY(0) scale(1)!important;
  }
  .nlinks .nav-drop-menu-inner{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    padding:0!important;
  }
  .nlinks .nav-drop-all{
    min-height:46px!important;
    margin:0!important;
    padding:12px 15px!important;
    border-radius:12px!important;
  }
  .nlinks .nav-drop-list{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .nlinks .nav-drop-item{
    min-height:58px!important;
    display:grid!important;
    grid-template-columns:30px minmax(0,1fr)!important;
    align-items:center!important;
    gap:10px!important;
    padding:12px 14px!important;
    border-radius:12px!important;
    line-height:1.28!important;
    text-align:left!important;
  }
  .nlinks .nav-drop-num{
    min-width:0!important;
    width:30px!important;
    height:30px!important;
    display:grid!important;
    place-items:center!important;
    border:1px solid rgba(222,242,44,.16)!important;
    border-radius:9px!important;
    background:rgba(222,242,44,.055)!important;
  }
}

/* Drawer móvil: lista vertical, sin columnas ni alineaciones cruzadas. */
@media(max-width:960px){
  .drawer-services .nav-drop-menu-inner{
    padding:8px!important;
  }
  .drawer-services .nav-drop-list{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
  }
  .drawer-services .nav-drop-item,
  .drawer-services .nav-drop-all{
    width:100%!important;
    min-height:50px!important;
    justify-content:flex-start!important;
    text-align:left!important;
    padding:11px 13px!important;
    border-radius:11px!important;
  }
  .drawer-services .nav-drop-item{
    display:grid!important;
    grid-template-columns:28px minmax(0,1fr)!important;
    gap:10px!important;
  }
}

/* Entrada del contenido más pausada y coordinada con Rocco. */
.hero .hh1{
  transition:
    opacity 1.45s cubic-bezier(.16,1,.3,1),
    transform 1.45s cubic-bezier(.16,1,.3,1)!important;
}
.hero .hsub{
  transition:
    opacity 1.25s cubic-bezier(.16,1,.3,1),
    transform 1.25s cubic-bezier(.16,1,.3,1)!important;
}
.hero .hacts{
  transition:
    opacity 1.05s cubic-bezier(.16,1,.3,1),
    transform 1.05s cubic-bezier(.16,1,.3,1)!important;
}
.hero .hh1:not(.rev){
  transform:translateY(46px) rotateX(7deg)!important;
}
.hero .hsub:not(.rev){
  transform:translateY(32px)!important;
}
.hero .hacts:not(.rev){
  transform:translateY(26px)!important;
}

/* Acerca el hero al logo conservando una franja de respiración. */
@media(min-width:1101px){
  .home-page .hero-stage{
    padding-top:clamp(10px,1.8vh,22px)!important;
    transform:translateY(-18px)!important;
  }
}
@media(min-width:641px) and (max-width:1100px){
  .home-page .hero-stage{
    padding-top:24px!important;
    transform:translateY(-10px)!important;
  }
}
@media(max-width:640px){
  .home-page .hero-stage{
    padding-top:22px!important;
    transform:translateY(-4px)!important;
  }
}

/* ════════════════════════════════════════════════
   ENTRADA ELEGANTE DEL LOGO CENTRAL
   El contenedor conserva el morph por scroll; la imagen realiza
   una entrada independiente desde arriba para evitar un salto brusco.
════════════════════════════════════════════════ */
.hero-brand-morph img{
  opacity:0;
  transform:translate3d(0,-46px,0) scale(.975);
  transform-origin:center top;
  filter:blur(5px);
  will-change:transform,opacity,filter;
  transition:
    transform 1.35s cubic-bezier(.16,1,.30,1) .08s,
    opacity .92s cubic-bezier(.22,1,.36,1) .08s,
    filter .90s ease-out .08s;
}
.home-page.brand-ready .hero-brand-morph img{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  filter:blur(0);
}

@media(max-width:720px){
  .hero-brand-morph img{
    transform:translate3d(0,-34px,0) scale(.98);
    transition-duration:1.15s,.82s,.78s;
  }
}

@media(prefers-reduced-motion:reduce){
  .hero-brand-morph img,
  .home-page.brand-ready .hero-brand-morph img{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    transition:none!important;
  }
}

/* ════════════════════════════════════════════════
   AJUSTE LOGO + HERO MÓVIL — AGO 2026
   Logo inicial más bajo, etiqueta compacta y acciones verticales
   sin interferir con el área visual de Rocco.
════════════════════════════════════════════════ */
.hero-brand-morph{
  --brand-start-top:clamp(46px,5.4vh,62px)!important;
}

@media(max-width:1100px){
  .hero-brand-morph{
    --brand-start-top:clamp(34px,4.5vh,46px)!important;
  }
}

@media(max-width:640px){
  .hero-brand-morph{
    --brand-start-top:28px!important;
    width:clamp(196px,56vw,238px)!important;
  }

  /* El contenido inicia un poco más abajo para separar logo y etiqueta. */
  .home-page .hero-stage{
    padding-top:48px!important;
    transform:translateY(0)!important;
  }

  .hero-stage .hero-left{
    padding-top:8px!important;
  }

  /* Etiqueta más compacta y con respiración superior. */
  .hero .hbadge{
    margin-top:10px!important;
    margin-bottom:18px!important;
    padding:5px 11px!important;
    gap:7px!important;
    font-size:.57rem!important;
    letter-spacing:.095em!important;
    line-height:1.15!important;
    white-space:nowrap;
  }
  .hero .hbadge-dot{
    width:5px!important;
    height:5px!important;
  }

  /* Acciones en columna: misma anchura, menor escala y lectura inmediata. */
  .hero .hacts{
    width:min(100%,218px)!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:9px!important;
    margin-top:2px!important;
    position:relative!important;
    z-index:14!important;
  }
  .hero .btn-p,
  .hero .btn-g{
    width:100%!important;
    min-height:42px!important;
    padding:10px 14px!important;
    justify-content:space-between!important;
    gap:10px!important;
    border-radius:10px!important;
    font-size:.74rem!important;
    line-height:1.15!important;
    white-space:nowrap!important;
  }
  .hero .btn-p svg,
  .hero .btn-g svg{
    width:13px!important;
    height:13px!important;
    flex:0 0 13px!important;
  }

  /* Rocco comienza después de las acciones para evitar cualquier cruce. */
  .hero-stage .hero-right{
    margin-top:30px!important;
    min-height:clamp(310px,43vh,365px)!important;
    position:relative!important;
    z-index:2!important;
  }
  .hero-stage .wolf-video{
    --hero-wolf-height:clamp(300px,42vh,355px)!important;
    max-width:90vw!important;
    top:auto!important;
    bottom:0!important;
  }
}

@media(max-width:390px){
  .hero-brand-morph{
    --brand-start-top:24px!important;
    width:clamp(184px,54vw,218px)!important;
  }
  .home-page .hero-stage{
    padding-top:44px!important;
  }
  .hero .hbadge{
    margin-top:8px!important;
    padding:5px 10px!important;
    font-size:.54rem!important;
    letter-spacing:.075em!important;
  }
  .hero .hacts{
    width:min(100%,205px)!important;
  }
  .hero .btn-p,
  .hero .btn-g{
    min-height:40px!important;
    padding:9px 12px!important;
    font-size:.7rem!important;
  }
  .hero-stage .hero-right{
    margin-top:26px!important;
    min-height:300px!important;
  }
  .hero-stage .wolf-video{
    --hero-wolf-height:clamp(284px,40vh,330px)!important;
  }
}

/* ════════════════════════════════════════════════
   NAV CONTENT WIDTH + MOBILE HERO COMPOSITION
   Mantiene logo, menú e idioma dentro del ancho real del sitio.
   En móvil, Rocco acompaña lateralmente a las acciones.
════════════════════════════════════════════════ */
nav{
  display:block!important;
  padding-inline:0!important;
}
.nav-frame{
  width:min(calc(100% - 48px),var(--maxw));
  height:100%;
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(22px,2.4vw,42px);
  position:relative;
}
.nav-frame>.nl,
.nav-frame>.nav-actions{
  flex:0 0 auto;
}
.nav-frame>.nlinks{
  min-width:0;
  margin-inline:auto!important;
}

/* Logo inicial más abajo. La distancia hasta el contenido del hero
   queda aproximadamente equivalente a la altura visual del logo. */
.hero-brand-morph{
  --brand-start-top:clamp(56px,6.6vh,76px)!important;
}
.home-page .hero-stage{
  padding-top:clamp(184px,22vh,220px)!important;
  transform:none!important;
}

@media(max-width:1100px){
  .nav-frame{
    width:min(calc(100% - 40px),var(--maxw));
    gap:20px;
  }
  .hero-brand-morph{
    --brand-start-top:clamp(46px,5.4vh,60px)!important;
  }
  .home-page .hero-stage{
    padding-top:160px!important;
    transform:none!important;
  }
}

@media(max-width:960px){
  .nav-frame{
    width:calc(100% - 32px);
  }
}

@media(max-width:640px){
  .nav-frame{
    width:calc(100% - 28px);
    gap:12px;
  }
  .hero-brand-morph{
    --brand-start-top:42px!important;
    width:clamp(196px,56vw,238px)!important;
  }

  /* La escena móvil se reorganiza: texto a todo el ancho y,
     debajo, botones a la izquierda con Rocco a la derecha. */
  .home-page .hero-stage{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(132px,.82fr)!important;
    grid-template-rows:auto auto auto auto auto!important;
    column-gap:12px!important;
    row-gap:0!important;
    align-items:start!important;
    padding-top:126px!important;
    transform:none!important;
    min-height:auto!important;
  }
  .hero-stage .hero-left{
    display:contents!important;
  }
  .hero .hbadge{
    grid-column:1/-1!important;
    grid-row:1!important;
    justify-self:start!important;
    margin-top:12px!important;
    margin-bottom:18px!important;
  }
  .hero .hh1{
    grid-column:1/-1!important;
    grid-row:2!important;
    width:100%!important;
  }
  .hero .hsub{
    grid-column:1/-1!important;
    grid-row:3!important;
    width:100%!important;
    max-width:none!important;
    margin-bottom:18px!important;
  }
  .hero .hacts{
    grid-column:1!important;
    grid-row:4!important;
    width:100%!important;
    max-width:205px!important;
    align-self:center!important;
    justify-self:start!important;
    margin:0!important;
    gap:8px!important;
    z-index:14!important;
  }
  .hero .btn-p,
  .hero .btn-g{
    min-height:40px!important;
    padding:9px 12px!important;
    font-size:.7rem!important;
  }
  .hero-stage .hero-right{
    grid-column:2!important;
    grid-row:4!important;
    position:relative!important;
    width:100%!important;
    min-height:220px!important;
    height:220px!important;
    margin:0!important;
    padding:0!important;
    align-self:end!important;
    overflow:visible!important;
    z-index:4!important;
  }
  .hero-stage .wolf-video{
    --hero-wolf-height:clamp(210px,30vh,250px)!important;
    position:absolute!important;
    left:50%!important;
    right:auto!important;
    top:auto!important;
    bottom:-4px!important;
    translate:-50% 0!important;
    width:auto!important;
    height:var(--hero-wolf-height)!important;
    max-width:48vw!important;
  }
  .hero-stage .hero-right::after{
    left:28%!important;
    width:44%!important;
    bottom:8%!important;
  }
  .hero-stage .hstats{
    grid-column:1/-1!important;
    grid-row:5!important;
    margin-top:8px!important;
  }
}

@media(max-width:390px){
  .hero-brand-morph{
    --brand-start-top:38px!important;
    width:clamp(184px,54vw,218px)!important;
  }
  .home-page .hero-stage{
    grid-template-columns:minmax(0,1fr) minmax(116px,.78fr)!important;
    column-gap:8px!important;
    padding-top:116px!important;
  }
  .hero .hacts{
    max-width:188px!important;
  }
  .hero .btn-p,
  .hero .btn-g{
    min-height:38px!important;
    padding:8px 10px!important;
    font-size:.66rem!important;
  }
  .hero-stage .hero-right{
    min-height:202px!important;
    height:202px!important;
  }
  .hero-stage .wolf-video{
    --hero-wolf-height:clamp(194px,28vh,224px)!important;
    max-width:47vw!important;
  }
}

/* ════════════════════════════════════════════════
   AJUSTE DE PRECISIÓN — LOGO 120 PX, MEGA MENÚ Y HERO MÓVIL
════════════════════════════════════════════════ */

/* El logo institucional inicia exactamente a 120 px del borde superior
   del hero, conservando su transición hacia la navegación. */
.hero-brand-morph{
  --brand-start-top:120px!important;
}

/* Reserva el espacio real del logo y una separación equivalente a su alto. */
.home-page .hero-stage{
  padding-top:clamp(304px,34vh,360px)!important;
}

/* Tipografía light en barra, submenús y controles de idioma. */
.nlink,
nav:not(.s) .nlink,
.nlinks .nav-drop-all,
.nlinks .nav-drop-item,
.lang-toggle,
.lang-option{
  font-weight:300!important;
}
.nlink:hover,
nav:not(.s) .nlink:hover,
.nlink.is-active,
nav:not(.s) .nlink.is-active,
.nlinks .nav-drop-all:hover,
.nlinks .nav-drop-all:focus-visible,
.nlinks .nav-drop-item:hover,
.nlinks .nav-drop-item:focus-visible,
.lang-option:hover,
.lang-option.is-active{
  font-weight:600!important;
}

/* El mega menú ocupa exactamente el tramo horizontal desde Servicios
   hasta Contacto, en lugar de quedar como una caja centrada independiente. */
@media(min-width:961px){
  .nlinks .nav-drop-menu{
    position:fixed!important;
    top:var(--nav-drop-top)!important;
    left:var(--nav-drop-left)!important;
    right:var(--nav-drop-right)!important;
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    border-radius:0 0 20px 20px!important;
    transform:translateY(-12px) scale(.992)!important;
    transform-origin:top center!important;
  }
  .nlinks .nav-drop.is-open .nav-drop-menu{
    transform:translateY(0) scale(1)!important;
  }
  .nlinks .nav-drop-menu-inner{
    padding:2px!important;
  }
  .nlinks .nav-drop-list{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
  }
}

/* Menú hamburguesa: todo el sistema de navegación usa peso light,
   con énfasis moderado únicamente al seleccionar o pasar el cursor. */
@media(max-width:960px){
  .drawer,
  .drawer .nlink,
  .drawer .nav-drop-btn,
  .drawer-services .nav-drop-all,
  .drawer-services .nav-drop-item,
  .drawer .lang-toggle,
  .drawer .lang-option{
    font-weight:300!important;
  }
  .drawer .nlink:hover,
  .drawer .nlink:focus-visible,
  .drawer .nlink.is-active,
  .drawer-services .nav-drop-all:hover,
  .drawer-services .nav-drop-all:focus-visible,
  .drawer-services .nav-drop-item:hover,
  .drawer-services .nav-drop-item:focus-visible,
  .drawer .lang-option:hover,
  .drawer .lang-option.is-active{
    font-weight:600!important;
  }
}

/* En móvil, el texto permanece completamente a la izquierda y termina
   antes de la fila compartida por acciones y Rocco. */
@media(max-width:640px){
  .hero-brand-morph{
    --brand-start-top:120px!important;
  }
  .home-page .hero-stage{
    grid-template-columns:minmax(0,1fr) minmax(132px,.72fr)!important;
    grid-template-rows:auto auto auto auto auto!important;
    column-gap:16px!important;
    row-gap:0!important;
    padding-top:292px!important;
    align-items:start!important;
  }
  .hero .hbadge,
  .hero .hh1,
  .hero .hsub{
    text-align:left!important;
    justify-self:start!important;
    align-self:start!important;
  }
  .hero .hbadge{
    margin-top:0!important;
    margin-bottom:18px!important;
  }
  .hero .hh1{
    margin-bottom:14px!important;
  }
  .hero .hsub{
    max-width:none!important;
    margin-bottom:32px!important;
    padding:0!important;
    line-height:1.72!important;
  }
  .hero .hacts{
    grid-column:1!important;
    grid-row:4!important;
    width:100%!important;
    max-width:196px!important;
    align-self:center!important;
    justify-self:start!important;
    margin:0!important;
    gap:9px!important;
  }
  .hero-stage .hero-right{
    grid-column:2!important;
    grid-row:4!important;
    width:100%!important;
    height:232px!important;
    min-height:232px!important;
    margin:0!important;
    padding:0!important;
    align-self:start!important;
    overflow:visible!important;
  }
  .hero-stage .wolf-video{
    --hero-wolf-height:210px!important;
    position:absolute!important;
    left:50%!important;
    top:auto!important;
    bottom:0!important;
    translate:-50% 0!important;
    height:var(--hero-wolf-height)!important;
    max-height:var(--hero-wolf-height)!important;
    max-width:46vw!important;
  }
  .hero-stage .hstats{
    grid-column:1/-1!important;
    grid-row:5!important;
    margin-top:18px!important;
  }
}

@media(max-width:390px){
  .hero-brand-morph{
    --brand-start-top:120px!important;
  }
  .home-page .hero-stage{
    grid-template-columns:minmax(0,1fr) 120px!important;
    column-gap:10px!important;
    padding-top:276px!important;
  }
  .hero .hsub{
    margin-bottom:28px!important;
  }
  .hero .hacts{
    max-width:176px!important;
  }
  .hero-stage .hero-right{
    height:214px!important;
    min-height:214px!important;
  }
  .hero-stage .wolf-video{
    --hero-wolf-height:194px!important;
    max-width:45vw!important;
  }
}

/* ════════════════════════════════════════════════
   AJUSTE POR PARTES — LOGO 350 / NAV EXTREMOS /
   SUBMENÚ LIQUID GLASS / ROCCO MÓVIL +33%
════════════════════════════════════════════════ */

/* 1. Logo inicial: 350 px desde el top. El hero no se desplaza. */
.hero-brand-morph{
  --brand-start-top:350px!important;
}
.home-page .hero-stage{
  padding-top:0!important;
  transform:none!important;
}

/* 2. Logo e idioma regresan a los extremos visuales de la barra. */
.nav-frame{
  width:100%!important;
  max-width:none!important;
  margin-inline:0!important;
  padding-inline:clamp(34px,5.5vw,88px)!important;
  box-sizing:border-box!important;
}
.nav-frame>.nl{
  margin-right:0!important;
}
.nav-frame>.nav-actions{
  margin-left:0!important;
}

/* Evita que el transform del nav convierta el mega menú fixed en un
   elemento relativo a la propia barra cuando ya está visible. */
.home-page nav.nav-visible{
  transform:none!important;
}

/* 3. Submenú visible, desde Servicios hasta Contacto, sin etiquetas,
   cajas individuales ni resaltadores sólidos. */
@media(min-width:961px){
  .nlinks .nav-drop-menu{
    position:fixed!important;
    top:var(--nav-drop-top)!important;
    left:var(--nav-drop-left)!important;
    right:var(--nav-drop-right)!important;
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
    margin:0!important;
    padding:18px 22px 20px!important;
    overflow:hidden!important;
    border:1px solid rgba(222,242,44,.38)!important;
    border-top-color:rgba(222,242,44,.22)!important;
    border-radius:0 0 22px 22px!important;
    background:
      radial-gradient(circle at 18% 0%,rgba(255,255,255,.18),transparent 34%),
      linear-gradient(135deg,rgba(222,242,44,.25),rgba(222,242,44,.10) 48%,rgba(21,38,26,.64) 100%),
      rgba(12,24,15,.76)!important;
    -webkit-backdrop-filter:blur(30px) saturate(175%)!important;
    backdrop-filter:blur(30px) saturate(175%)!important;
    box-shadow:
      0 28px 70px rgba(0,0,0,.36),
      inset 0 1px 0 rgba(255,255,255,.22),
      inset 0 -1px 0 rgba(222,242,44,.10)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translateY(-14px) scaleY(.97)!important;
    transform-origin:top center!important;
    transition:
      opacity .28s ease,
      visibility .28s ease,
      transform .38s cubic-bezier(.16,1,.3,1)!important;
    z-index:420!important;
  }
  .nlinks .nav-drop-menu::before{
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.08) 38%,transparent 66%);
    opacity:.72;
  }
  .nlinks .nav-drop.is-open .nav-drop-menu{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translateY(0) scaleY(1)!important;
  }
  .nlinks .nav-drop-menu-inner{
    position:relative!important;
    z-index:1!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    padding:0!important;
  }
  .nlinks .nav-drop-all{
    min-height:auto!important;
    margin:0!important;
    padding:2px 2px 13px!important;
    border:0!important;
    border-bottom:1px solid rgba(222,242,44,.22)!important;
    border-radius:0!important;
    background:transparent!important;
    color:rgba(255,255,255,.84)!important;
    font-size:.78rem!important;
    font-weight:300!important;
    letter-spacing:.04em!important;
  }
  .nlinks .nav-drop-all svg{
    opacity:.58;
  }
  .nlinks .nav-drop-list{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:2px 34px!important;
  }
  .nlinks .nav-drop-item{
    min-height:auto!important;
    display:block!important;
    padding:11px 2px!important;
    border:0!important;
    border-bottom:1px solid rgba(255,255,255,.075)!important;
    border-radius:0!important;
    background:transparent!important;
    color:rgba(255,255,255,.78)!important;
    font-size:.79rem!important;
    font-weight:300!important;
    letter-spacing:.025em!important;
    line-height:1.35!important;
    box-shadow:none!important;
    transform:none!important;
    transition:color .22s ease,transform .26s cubic-bezier(.16,1,.3,1),border-color .22s ease!important;
  }
  .nlinks .nav-drop-num{
    display:none!important;
  }
  .nlinks .nav-drop-all:hover,
  .nlinks .nav-drop-all:focus-visible,
  .nlinks .nav-drop-item:hover,
  .nlinks .nav-drop-item:focus-visible,
  .nlinks .nav-drop-item.is-current{
    background:transparent!important;
    border-color:rgba(222,242,44,.24)!important;
    color:var(--white)!important;
    font-weight:400!important;
    box-shadow:none!important;
    transform:translateX(5px)!important;
  }
  .nlinks .nav-drop-item.is-current{
    color:var(--lime)!important;
  }
}

/* 4. Rocco móvil: aproximadamente 33% más grande, a la derecha de los
   botones, apoyado abajo y sin invadir título ni descripción. */
@media(max-width:640px){
  .nav-frame{
    padding-inline:20px!important;
  }
  .hero-brand-morph{
    --brand-start-top:350px!important;
  }
  .home-page .hero-stage{
    grid-template-columns:minmax(0,1fr) minmax(158px,.92fr)!important;
    grid-template-rows:auto auto auto auto auto!important;
    column-gap:14px!important;
    padding-top:0!important;
    align-items:start!important;
  }
  .hero .hbadge,
  .hero .hh1,
  .hero .hsub{
    grid-column:1/-1!important;
    width:100%!important;
    max-width:none!important;
    text-align:left!important;
    justify-self:start!important;
  }
  .hero .hsub{
    margin-bottom:38px!important;
    padding-right:0!important;
  }
  .hero .hacts{
    grid-column:1!important;
    grid-row:4!important;
    width:100%!important;
    max-width:190px!important;
    align-self:center!important;
    justify-self:start!important;
    margin:0!important;
    z-index:5!important;
  }
  .hero-stage .hero-right{
    grid-column:2!important;
    grid-row:4!important;
    position:relative!important;
    width:100%!important;
    height:284px!important;
    min-height:284px!important;
    margin:0!important;
    padding:0!important;
    align-self:end!important;
    overflow:visible!important;
    z-index:4!important;
  }
  .hero-stage .wolf-video{
    --hero-wolf-height:280px!important;
    position:absolute!important;
    left:54%!important;
    right:auto!important;
    top:auto!important;
    bottom:0!important;
    translate:-50% 0!important;
    width:auto!important;
    height:var(--hero-wolf-height)!important;
    max-height:var(--hero-wolf-height)!important;
    max-width:57vw!important;
    object-fit:contain!important;
    object-position:center bottom!important;
  }
  .hero-stage .hero-right::after{
    left:25%!important;
    width:54%!important;
    bottom:5%!important;
  }
  .hero-stage .hstats{
    grid-column:1/-1!important;
    grid-row:5!important;
    margin-top:12px!important;
  }
}

@media(max-width:390px){
  .nav-frame{
    padding-inline:16px!important;
  }
  .hero-brand-morph{
    --brand-start-top:350px!important;
  }
  .home-page .hero-stage{
    grid-template-columns:minmax(0,1fr) 146px!important;
    column-gap:9px!important;
    padding-top:0!important;
  }
  .hero .hsub{
    margin-bottom:34px!important;
  }
  .hero .hacts{
    max-width:174px!important;
  }
  .hero-stage .hero-right{
    height:264px!important;
    min-height:264px!important;
  }
  .hero-stage .wolf-video{
    --hero-wolf-height:258px!important;
    left:55%!important;
    max-width:58vw!important;
  }
}

/* ════════════════════════════════════════════════
   AJUSTE CONTROLADO — LOGO 230 / SUBMENÚ ANCLADO /
   LOGO ÚNICO EN MÓVIL
════════════════════════════════════════════════ */

/* Escritorio: el logo central queda a 230 px. El hero no se desplaza. */
.hero-brand-morph{
  --brand-start-top:230px!important;
}
.home-page .hero-stage{
  transform:none!important;
}

/* Escritorio: el submenu nace directamente debajo de Servicios y su
   ancho termina en el borde derecho de Contacto. Se usa display:none
   al cerrar para impedir cualquier línea o residuo visual. */
@media(min-width:961px){
  .nlinks .nav-drop{
    position:relative!important;
    isolation:isolate;
  }
  .nlinks .nav-drop-menu{
    display:none!important;
    position:absolute!important;
    top:calc(100% + var(--services-menu-gap,24px))!important;
    left:0!important;
    right:auto!important;
    width:var(--services-menu-width,560px)!important;
    min-width:430px!important;
    max-width:min(760px,calc(100vw - 40px))!important;
    margin:0!important;
    padding:20px 24px 22px!important;
    overflow:hidden!important;
    border:1px solid rgba(222,242,44,.42)!important;
    border-radius:0 0 22px 22px!important;
    background:
      radial-gradient(circle at 18% 0%,rgba(255,255,255,.20),transparent 35%),
      linear-gradient(135deg,rgba(222,242,44,.29),rgba(222,242,44,.12) 52%,rgba(21,38,26,.74) 100%),
      rgba(12,24,15,.82)!important;
    -webkit-backdrop-filter:blur(30px) saturate(180%)!important;
    backdrop-filter:blur(30px) saturate(180%)!important;
    box-shadow:0 30px 76px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.24)!important;
    z-index:900!important;
  }
  .nlinks .nav-drop.is-open .nav-drop-menu{
    display:block!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    animation:colsingSubmenuIn .34s cubic-bezier(.16,1,.3,1) both;
  }
  .nlinks .nav-drop-menu-inner{
    min-height:auto!important;
    overflow:visible!important;
  }
  @keyframes colsingSubmenuIn{
    from{opacity:0;transform:translateY(-12px) scale(.985)}
    to{opacity:1;transform:translateY(0) scale(1)}
  }
}

/* Móvil: un solo logo, situado dentro de la parte superior del hero.
   No se transforma hacia la barra y el logo de la barra se oculta. */
@media(max-width:960px){
  .home-page .hero-brand-morph{
    --brand-start-top:0px!important;
    position:absolute!important;
    top:24px!important;
    left:50%!important;
    width:clamp(188px,55vw,238px)!important;
    opacity:1!important;
    visibility:visible!important;
    transform:translateX(-50%)!important;
    transform-origin:top center!important;
    z-index:18!important;
  }
  .home-page nav .nl{
    display:none!important;
  }
  .home-page .nav-frame{
    justify-content:flex-end!important;
  }
  .home-page .nav-actions{
    margin-left:auto!important;
  }
  .home-page .hero-stage{
    padding-top:clamp(116px,31vw,142px)!important;
  }

  /* El mega menú de escritorio nunca puede asomarse en móvil. */
  .nlinks .nav-drop-menu{
    display:none!important;
  }

  /* El acordeón del drawer permanece totalmente ausente hasta el clic. */
  .drawer-services .nav-drop-menu{
    display:none!important;
    position:static!important;
    width:100%!important;
    height:auto!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    overflow:hidden!important;
    transform:none!important;
    box-shadow:none!important;
  }
  .drawer-services.is-open .nav-drop-menu{
    display:block!important;
    margin:7px 0 4px!important;
    padding:10px!important;
    border:1px solid rgba(222,242,44,.35)!important;
    border-radius:14px!important;
    background:
      radial-gradient(circle at 16% 0%,rgba(255,255,255,.18),transparent 38%),
      linear-gradient(145deg,rgba(222,242,44,.26),rgba(222,242,44,.10) 58%,rgba(21,38,26,.80))!important;
    -webkit-backdrop-filter:blur(24px) saturate(170%)!important;
    backdrop-filter:blur(24px) saturate(170%)!important;
    box-shadow:0 18px 42px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.18)!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    animation:colsingDrawerServicesIn .28s cubic-bezier(.16,1,.3,1) both;
  }
  .drawer-services .nav-drop-menu-inner{
    min-height:auto!important;
    overflow:visible!important;
    padding:0!important;
  }
  .drawer-services .nav-drop-list{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:2px!important;
  }
  .drawer-services .nav-drop-all,
  .drawer-services .nav-drop-item{
    background:transparent!important;
    border:0!important;
    border-bottom:1px solid rgba(255,255,255,.09)!important;
    border-radius:0!important;
    color:rgba(255,255,255,.82)!important;
    font-weight:300!important;
    box-shadow:none!important;
  }
  .drawer-services .nav-drop-num{
    display:none!important;
  }
  @keyframes colsingDrawerServicesIn{
    from{opacity:0;transform:translateY(-8px)}
    to{opacity:1;transform:translateY(0)}
  }
}

@media(max-width:390px){
  .home-page .hero-brand-morph{
    top:22px!important;
    width:clamp(176px,54vw,212px)!important;
  }
  .home-page .hero-stage{
    padding-top:112px!important;
  }
}

/* ════════════════════════════════════════════════
   AJUSTE MÓVIL — HERO CERCA DEL LOGO + ISOTIPO NAV
════════════════════════════════════════════════ */
.mobile-nav-symbol{
  display:none;
}

@media(max-width:960px){
  /* El contenido del hero sube y queda próximo al logo inicial. */
  .home-page .hero-stage{
    padding-top:clamp(92px,25vw,108px)!important;
  }

  /* Etiqueta compacta: el fondo se ajusta estrictamente al texto. */
  .home-page .hero .hbadge{
    display:inline-flex!important;
    width:max-content!important;
    max-width:100%!important;
    min-width:0!important;
    align-self:flex-start!important;
    justify-self:start!important;
    padding:5px 10px!important;
    margin-bottom:16px!important;
    gap:6px!important;
    font-size:clamp(.49rem,2vw,.56rem)!important;
    line-height:1.1!important;
    letter-spacing:.075em!important;
    white-space:nowrap!important;
  }
  .home-page .hero .hbadge-dot{
    width:5px!important;
    height:5px!important;
    flex:0 0 5px!important;
  }

  /* En móvil se utiliza únicamente el isotipo junto al hamburguesa. */
  nav .nl{
    display:none!important;
  }
  .mobile-nav-symbol{
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    flex:0 0 42px;
    margin:0!important;
    padding:0!important;
    opacity:.96;
    transition:opacity .22s ease,transform .22s ease;
  }
  .mobile-nav-symbol:hover,
  .mobile-nav-symbol:focus-visible{
    opacity:1;
    transform:translateY(-1px);
  }
  .mobile-nav-symbol img{
    display:block;
    width:36px;
    height:36px;
    object-fit:contain;
  }
  .home-page .nav-frame,
  .nav-frame{
    width:100%!important;
    justify-content:space-between!important;
  }
  .nav-actions{
    margin-left:auto!important;
  }

  /* Cada servicio se mantiene en una sola línea dentro del drawer. */
  .drawer-services .nav-drop-all,
  .drawer-services .nav-drop-item{
    display:block!important;
    width:100%!important;
    min-height:38px!important;
    padding:9px 10px!important;
    font-size:clamp(.66rem,2.65vw,.73rem)!important;
    line-height:1.25!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
}

@media(max-width:390px){
  .home-page .hero-stage{
    padding-top:88px!important;
  }
  .home-page .hero .hbadge{
    padding:5px 9px!important;
    font-size:.49rem!important;
    letter-spacing:.06em!important;
  }
  .mobile-nav-symbol{
    width:39px;
    height:39px;
    flex-basis:39px;
  }
  .mobile-nav-symbol img{
    width:33px;
    height:33px;
  }
  .drawer-services .nav-drop-all,
  .drawer-services .nav-drop-item{
    font-size:.65rem!important;
    padding-inline:8px!important;
  }
}

/* ════════════════════════════════════════════════
   HERO BACKGROUND + SECTION SNAP + SECTION ENTRY FX
════════════════════════════════════════════════ */
.hero{
  background:
    linear-gradient(180deg, rgba(8,10,8,.30) 0%, rgba(8,10,8,.42) 34%, rgba(8,10,8,.60) 68%, rgba(8,10,8,.82) 100%),
    url('./assets/hero-bg-black-lime.png') center center / cover no-repeat!important;
}
.hero::before{
  background:
    radial-gradient(circle at 18% 22%, rgba(222,242,44,.08), transparent 24%),
    radial-gradient(circle at 82% 28%, rgba(222,242,44,.05), transparent 26%),
    linear-gradient(180deg, rgba(8,10,8,.06) 0%, rgba(8,10,8,.26) 54%, rgba(8,10,8,.44) 100%)!important;
}

@media(min-width:1101px){
  html{
    scroll-snap-type:y proximity;
    scroll-behavior:smooth;
  }
  body{
    scroll-snap-type:y proximity;
  }
  section.hero,
  section.svcs,
  section.strata-sec,
  section.proc,
  section.why,
  section#team,
  section.allies-sec,
  section.contact{
    scroll-snap-align:start;
    scroll-snap-stop:always;
    min-height:100svh;
    position:relative;
  }
  section.svcs,
  section.strata-sec,
  section.proc,
  section.why,
  section#team,
  section.allies-sec,
  section.contact{
    display:flex;
    flex-direction:column;
    justify-content:center;
  }

  .section-fx{
    --sec-shift: 42px;
    transition: transform .95s cubic-bezier(.16,1,.3,1), opacity .95s cubic-bezier(.16,1,.3,1), filter .95s cubic-bezier(.16,1,.3,1), box-shadow .95s cubic-bezier(.16,1,.3,1);
    opacity:.72;
    transform:translate3d(0,var(--sec-shift),0) scale(.988);
    filter:saturate(.92) brightness(.92);
    will-change:transform,opacity,filter;
  }
  .section-fx::after{
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
      radial-gradient(circle at 50% 12%, rgba(222,242,44,.11), transparent 26%),
      linear-gradient(180deg, rgba(8,10,8,.12), rgba(8,10,8,.02) 26%, transparent 42%, rgba(8,10,8,.10) 100%);
    opacity:.62;
    transform:translateY(16px);
    transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
    z-index:0;
  }
  .section-fx > *{
    position:relative;
    z-index:1;
    transition: transform .95s cubic-bezier(.16,1,.3,1), opacity .95s cubic-bezier(.16,1,.3,1);
  }
  .section-fx.is-active{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
    filter:none;
  }
  .section-fx.is-active::after{
    opacity:0;
    transform:translateY(0);
  }
  .section-fx.is-prev,
  .section-fx.is-next{
    opacity:.74;
  }
  .section-fx.is-active > *{
    animation: sectionLift .9s cubic-bezier(.16,1,.3,1) both;
  }
  .section-fx.is-active > *:nth-child(2){animation-delay:.08s}
  .section-fx.is-active > *:nth-child(3){animation-delay:.14s}
}

@keyframes sectionLift{
  from{opacity:.02; transform:translate3d(0,26px,0) scale(.995)}
  to{opacity:1; transform:translate3d(0,0,0) scale(1)}
}

@media(prefers-reduced-motion:reduce){
  html,body{scroll-behavior:auto!important}
  .section-fx,
  .section-fx::after,
  .section-fx > *{
    animation:none!important;
    transition:none!important;
    transform:none!important;
    opacity:1!important;
    filter:none!important;
  }
}

/* ════════════════════════════════════════════════
   AJUSTE VISUAL — LOGO, ENTRADA ESTABLE, PROCESO Y ALIADOS
════════════════════════════════════════════════ */

/* El logo queda centrado incluso antes de que JavaScript calcule el morph. */
.hero-brand-morph{
  left:50%;
  transform:translate3d(-50%,var(--brand-start-top),0);
  transform-origin:top left;
}

/* Entrada de sección sin titileo: ocurre una sola vez. */
@media(min-width:1101px){
  .section-fx{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    transition:none!important;
    will-change:auto!important;
  }
  .section-fx::after{
    content:none!important;
  }
  .section-fx > *{
    opacity:0;
    transform:translate3d(0,26px,0);
    transition:
      opacity .82s cubic-bezier(.16,1,.3,1),
      transform .82s cubic-bezier(.16,1,.3,1)!important;
  }
  .section-fx.has-entered > *{
    opacity:1;
    transform:translate3d(0,0,0);
  }
  .section-fx.has-entered > *:nth-child(2){transition-delay:.07s!important}
  .section-fx.has-entered > *:nth-child(3){transition-delay:.13s!important}
  .section-fx.has-entered > *:nth-child(4){transition-delay:.18s!important}
  .section-fx.is-active > *{
    animation:none!important;
  }
}

/* ALIADOS: sección compacta, institucional y coherente con el sitio. */
.allies-sec{
  min-height:clamp(500px,66svh,680px)!important;
  padding-top:clamp(76px,9vh,108px)!important;
  padding-bottom:clamp(76px,9vh,108px)!important;
  justify-content:center!important;
  overflow:hidden!important;
  background:var(--surface);
}
.allies-sec .sh2{
  font-size:clamp(2rem,3.4vw,3.25rem)!important;
  line-height:1.04!important;
}
.allies-sec .ssub{
  max-width:690px;
  margin-bottom:34px!important;
}
.allies-marquee{
  width:calc(100vw - var(--gutter) - var(--gutter));
  max-width:var(--maxw);
  overflow:hidden;
  position:relative;
  padding-block:10px 14px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.allies-marquee::before,
.allies-marquee::after{
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  width:84px;
  z-index:3;
  pointer-events:none;
}
.allies-marquee::before{left:0;background:linear-gradient(90deg,var(--surface),transparent)}
.allies-marquee::after{right:0;background:linear-gradient(-90deg,var(--surface),transparent)}
.allies-track{
  display:flex;
  align-items:center;
  width:max-content;
  gap:18px;
  animation:alliesContinuous 40s linear infinite;
  will-change:transform;
}
.allies-marquee:hover .allies-track,
.allies-marquee:focus-within .allies-track{
  animation-play-state:paused;
}
.ally-logo{
  --ally-card:#f6f4ed;
  --ally-border:rgba(255,255,255,.18);
  flex:0 0 clamp(218px,19vw,260px);
  height:126px!important;
  min-height:126px!important;
  padding:14px 18px!important;
  border-radius:18px!important;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:var(--ally-card)!important;
  border:1px solid var(--ally-border)!important;
  box-shadow:0 16px 38px rgba(0,0,0,.20)!important;
  transition:transform .35s var(--ease-back),border-color .35s var(--ease),box-shadow .35s var(--ease)!important;
}
.ally-logo::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.18),transparent 45%);
  opacity:.6;
}
.ally-logo--light{
  --ally-card:linear-gradient(145deg,#fbfaf6,#efede4);
  --ally-border:rgba(255,255,255,.24);
}
.ally-logo--dark{
  --ally-card:linear-gradient(145deg,#20201d,#151513);
  --ally-border:rgba(243,240,230,.12);
}
.ally-logo:hover{
  transform:translateY(-4px)!important;
  border-color:rgba(222,242,44,.34)!important;
  box-shadow:0 20px 44px rgba(0,0,0,.28),0 0 0 1px rgba(222,242,44,.05)!important;
}
.ally-logo img{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  filter:none!important;
  opacity:1!important;
  transform:scale(1);
  transition:transform .35s var(--ease)!important;
}
.ally-logo:hover img{transform:scale(1.025)}
.ally-fb{
  color:#171714;
  font-size:.7rem;
}
.ally-logo--dark .ally-fb{color:var(--text-mid)}
@keyframes alliesContinuous{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(-50% - 9px),0,0)}
}

@media(max-width:960px){
  .proc-anim-wrap{
    min-height:auto;
  }
  .proc-grid{
    height:auto!important;
    grid-template-columns:1fr!important;
    gap:18px!important;
  }
  .proc-grid::before,
  .proc-grid::after,
  .proc .pstep::before,
  .proc .pstep::after{
    display:none!important;
  }
  .proc .pstep,
  .proc .pstep:nth-child(n){
    min-height:0;
    transform:none!important;
    display:grid!important;
    grid-template-columns:52px 1fr!important;
    align-items:start!important;
  }
  .allies-sec{
    min-height:auto!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .section-fx > *{
    opacity:1!important;
    transform:none!important;
  }
}

/* ════════════════════════════════════════════════
   HERO SÓLIDO + CURSOR SOBRE FONDOS CLAROS
════════════════════════════════════════════════ */
.hero .hh1{
  font-weight:800!important;
  letter-spacing:-.045em!important;
}
.hero .hh1 em{
  color:var(--lime)!important;
  -webkit-text-fill-color:var(--lime)!important;
  -webkit-text-stroke:0 transparent!important;
  text-shadow:none!important;
  font-weight:800!important;
}
body.cursor-on-light #cDot{
  background:var(--brand-green)!important;
  mix-blend-mode:normal!important;
}
body.cursor-on-light #cRing{
  border-color:rgba(21,38,26,.52)!important;
  mix-blend-mode:normal!important;
}
body.cursor-on-light #cRing.h{border-color:rgba(21,38,26,.72)!important}

/* ════════════════════════════════════════════════
   FIX RESPONSIVE — LOGO DEL HERO SIN CRUCE CON TEXTO
   Reserva dinámica basada en la proporción real del logo (800×301).
   No modifica escritorio ni la geometría interna del hero.
════════════════════════════════════════════════ */
@media(max-width:960px){
  .home-page{
    --mobile-brand-top:24px;
    --mobile-brand-width:clamp(188px,55vw,238px);
    --mobile-brand-height:clamp(71px,20.7vw,90px);
    --mobile-brand-gap:22px;
  }
  .home-page .hero-brand-morph{
    top:var(--mobile-brand-top)!important;
    width:var(--mobile-brand-width)!important;
  }
  .home-page .hero-stage{
    padding-top:calc(var(--mobile-brand-top) + var(--mobile-brand-height) + var(--mobile-brand-gap))!important;
  }
}

@media(max-width:390px){
  .home-page{
    --mobile-brand-top:22px;
    --mobile-brand-width:clamp(176px,54vw,212px);
    --mobile-brand-height:clamp(66px,20.32vw,80px);
    --mobile-brand-gap:18px;
  }
  .home-page .hero-brand-morph{
    top:var(--mobile-brand-top)!important;
    width:var(--mobile-brand-width)!important;
  }
  .home-page .hero-stage{
    padding-top:calc(var(--mobile-brand-top) + var(--mobile-brand-height) + var(--mobile-brand-gap))!important;
  }
}

/* ════════════════════════════════════════════════
   SERVICIOS — PREMIUM LIQUID GLASS
   Efecto tomado del archivo de referencia del usuario.
   Conserva paleta, contenido y estructura actuales de COLSING.
════════════════════════════════════════════════ */
@media(min-width:821px){
  .svc-explorer{
    position:relative!important;
    isolation:isolate!important;
    border:1px solid rgba(255,255,255,.13)!important;
    background:
      linear-gradient(160deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,.014) 38%,rgba(0,0,0,.13) 100%),
      linear-gradient(145deg,var(--surface2),var(--surface))!important;
    -webkit-backdrop-filter:blur(28px) saturate(145%) brightness(1.025)!important;
    backdrop-filter:blur(28px) saturate(145%) brightness(1.025)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.085),
      inset 0 0 1px rgba(255,255,255,.22),
      0 24px 58px -24px rgba(0,0,0,.58),
      -34px 26px 90px -68px rgba(222,242,44,.22)!important;
  }

  /* Reflejo interno superior: no añade contenido ni altera layout. */
  .svc-explorer::before{
    content:''!important;
    display:block!important;
    position:absolute!important;
    inset:0!important;
    border-radius:inherit!important;
    pointer-events:none!important;
    background:
      radial-gradient(115% 72% at 10% -7%,rgba(255,255,255,.12) 0%,rgba(255,255,255,0) 43%),
      linear-gradient(198deg,rgba(255,255,255,.045) 0%,rgba(255,255,255,0) 29%)!important;
    opacity:.88!important;
    mix-blend-mode:screen!important;
    transform:none!important;
    z-index:20!important;
  }

  /* Borde óptico: más brillante arriba y más sutil en laterales/base. */
  .svc-explorer::after{
    content:''!important;
    display:block!important;
    position:absolute!important;
    inset:0!important;
    border-radius:inherit!important;
    padding:1px!important;
    pointer-events:none!important;
    background:linear-gradient(
      165deg,
      rgba(255,255,255,.50) 0%,
      rgba(255,255,255,.075) 31%,
      rgba(255,255,255,.035) 70%,
      rgba(222,242,44,.17) 100%
    )!important;
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0)!important;
    -webkit-mask-composite:xor!important;
    mask-composite:exclude!important;
    opacity:.72!important;
    z-index:21!important;
  }

  .svc-menu{
    background:
      linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012) 42%,rgba(0,0,0,.07)),
      linear-gradient(180deg,var(--green-base),var(--green-surface))!important;
    -webkit-backdrop-filter:blur(24px) saturate(138%)!important;
    backdrop-filter:blur(24px) saturate(138%)!important;
    border-right:1px solid rgba(255,255,255,.085)!important;
    box-shadow:
      inset -1px 0 0 rgba(255,255,255,.025),
      inset 0 1px 0 rgba(255,255,255,.055),
      16px 0 36px -28px rgba(0,0,0,.46)!important;
  }

  .svc-panel{
    background:
      radial-gradient(110% 80% at 92% 4%,rgba(255,255,255,.035),transparent 44%),
      linear-gradient(160deg,rgba(255,255,255,.025),rgba(255,255,255,.006) 42%,rgba(0,0,0,.055)),
      linear-gradient(180deg,var(--surface2),var(--surface))!important;
    -webkit-backdrop-filter:blur(24px) saturate(136%) brightness(1.015)!important;
    backdrop-filter:blur(24px) saturate(136%) brightness(1.015)!important;
  }

  .svc-info{
    background:
      linear-gradient(160deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,.014) 36%,rgba(0,0,0,.11) 100%),
      linear-gradient(180deg,rgba(27,48,32,.88),rgba(19,33,24,.98))!important;
    -webkit-backdrop-filter:blur(24px) saturate(138%)!important;
    backdrop-filter:blur(24px) saturate(138%)!important;
    border-top:1px solid rgba(255,255,255,.095)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.055),
      0 -14px 42px -38px rgba(255,255,255,.20)!important;
  }

  .svc-tab{
    transition:
      background .28s var(--ease),
      box-shadow .28s var(--ease),
      border-color .28s var(--ease)!important;
  }
  .svc-tab:hover{
    background:linear-gradient(90deg,rgba(255,255,255,.045),rgba(255,255,255,.008) 74%,transparent)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
  }
  .svc-tab.active{
    background:
      linear-gradient(90deg,rgba(222,242,44,.085),rgba(255,255,255,.022) 52%,transparent)!important;
    box-shadow:
      inset 3px 0 0 var(--lime),
      inset 0 1px 0 rgba(255,255,255,.045)!important;
  }
}

/* Acordeón móvil: mismo lenguaje glass, sin añadir elementos. */
@media(max-width:820px){
  .acc-item{
    position:relative!important;
    isolation:isolate!important;
    border:1px solid rgba(255,255,255,.12)!important;
    background:
      linear-gradient(160deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,.014) 38%,rgba(0,0,0,.12) 100%),
      linear-gradient(180deg,rgba(27,48,32,.91),rgba(19,33,24,.96))!important;
    -webkit-backdrop-filter:blur(22px) saturate(140%) brightness(1.02)!important;
    backdrop-filter:blur(22px) saturate(140%) brightness(1.02)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.075),
      inset 0 0 1px rgba(255,255,255,.16),
      0 18px 40px -24px rgba(0,0,0,.52)!important;
  }
  .acc-item::before{
    content:'';
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    background:
      radial-gradient(120% 78% at 8% -10%,rgba(255,255,255,.11),transparent 42%),
      linear-gradient(200deg,rgba(255,255,255,.038),transparent 30%);
    opacity:.82;
    mix-blend-mode:screen;
    z-index:0;
  }
  .acc-item > *{position:relative;z-index:1}
  .acc-item.is-open{
    border-color:rgba(222,242,44,.23)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.095),
      0 24px 52px -24px rgba(0,0,0,.58),
      0 0 30px -24px rgba(222,242,44,.28)!important;
  }
}

/* ════════════════════════════════════════════════
   SERVICIOS — GLASS PREMIUM POR PARTES + ICONOS LATERALES
   Ajuste solicitado:
   - El efecto se separa entre el panel lateral y el panel principal.
   - Los acentos verdes del ejemplo se adaptan al lima de marca.
   - Se sustituyen los números por iconos lineales relacionados con el servicio.
════════════════════════════════════════════════ */
.svc-explorer{
  gap:14px!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}

.svc-menu,
.svc-panel{
  position:relative!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:30px!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.18)!important;
  backdrop-filter:blur(18px) saturate(1.18)!important;
}
.svc-menu::before,
.svc-panel::after{
  content:'';
  position:absolute;
  inset:1px;
  border-radius:inherit;
  pointer-events:none;
}
.svc-menu::before{
  background:
    linear-gradient(120deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.02) 22%, rgba(255,255,255,0) 42%),
    radial-gradient(circle at 10% 8%, rgba(222,242,44,.12), transparent 28%),
    radial-gradient(circle at 90% 100%, rgba(222,242,44,.06), transparent 34%);
  opacity:.92;
}
.svc-panel::after{
  background:
    linear-gradient(120deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.02) 18%, rgba(255,255,255,0) 38%),
    radial-gradient(circle at 82% 12%, rgba(222,242,44,.09), transparent 24%),
    radial-gradient(circle at 14% 92%, rgba(243,240,230,.05), transparent 28%);
  opacity:.88;
}
.svc-menu{
  background:linear-gradient(165deg, rgba(21,38,26,.92) 0%, rgba(21,38,26,.84) 42%, rgba(11,18,13,.88) 100%)!important;
  box-shadow:
    0 26px 60px rgba(8,10,8,.22),
    0 8px 20px rgba(8,10,8,.12),
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -1px 0 rgba(255,255,255,.03)!important;
}
.svc-panel{
  background:linear-gradient(165deg, rgba(26,45,31,.66) 0%, rgba(17,29,21,.82) 34%, rgba(12,20,14,.92) 100%)!important;
  box-shadow:
    0 30px 70px rgba(8,10,8,.22),
    0 10px 22px rgba(8,10,8,.11),
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -1px 0 rgba(255,255,255,.02)!important;
}
.svc-tab{
  position:relative!important;
  z-index:1!important;
  display:grid!important;
  grid-template-columns:52px minmax(0,1fr) 10px!important;
  align-items:center!important;
  gap:14px!important;
  min-height:84px!important;
  padding:16px 18px!important;
  background:transparent!important;
  transition:background .26s var(--ease), transform .26s var(--ease), box-shadow .26s var(--ease)!important;
}
.svc-tab::after{
  z-index:-1!important;
}
.svc-tab:hover,
.svc-tab:focus-visible{
  background:linear-gradient(90deg, rgba(222,242,44,.07), rgba(222,242,44,.015) 72%)!important;
}
.svc-tab.active{
  background:linear-gradient(90deg, rgba(222,242,44,.10), rgba(222,242,44,.02) 72%)!important;
  box-shadow:inset 3px 0 0 var(--lime)!important;
}
.svc-tab-icon,
.acc-icon{
  flex:none;
  width:52px;
  height:52px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:radial-gradient(120% 120% at 28% 18%, rgba(222,242,44,.34), rgba(222,242,44,.10) 72%)!important;
  border:1px solid rgba(222,242,44,.28)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 0 18px -4px rgba(222,242,44,.32)!important;
  color:var(--lime)!important;
  transition:transform .32s var(--ease), box-shadow .32s var(--ease), border-color .32s var(--ease)!important;
}
.svc-tab-icon svg,
.acc-icon svg{
  width:22px;
  height:22px;
  display:block;
  stroke:currentColor;
  stroke-width:1.55;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.svc-tab.active .svc-tab-icon,
.svc-tab:hover .svc-tab-icon,
.acc-trigger.open .acc-icon,
.acc-trigger:hover .acc-icon{
  transform:scale(1.06);
  border-color:rgba(222,242,44,.44)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 0 26px -3px rgba(222,242,44,.42)!important;
}
.svc-tab-num,
.acc-num{display:none!important}
.svc-tab-label{
  color:rgba(243,240,230,.78)!important;
  font-size:.98rem!important;
  font-weight:380!important;
  line-height:1.22!important;
}
.svc-tab.active .svc-tab-label,
.svc-tab:hover .svc-tab-label{
  color:var(--white)!important;
}
.svc-tab-dot{
  justify-self:end!important;
  width:7px!important;
  height:7px!important;
  border-radius:999px!important;
  background:rgba(222,242,44,.28)!important;
  box-shadow:0 0 0 1px rgba(222,242,44,.16), 0 0 14px rgba(222,242,44,.14)!important;
}
.svc-tab.active .svc-tab-dot{background:var(--lime)!important; box-shadow:0 0 0 1px rgba(222,242,44,.26), 0 0 18px rgba(222,242,44,.22)!important}

.svc-visual,
.svc-info{
  position:relative!important;
  z-index:1!important;
}
.svc-visual{
  background:
    radial-gradient(circle at 50% 48%,rgba(222,242,44,.08),transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0) 22%),
    linear-gradient(180deg, rgba(27,48,32,.50), rgba(17,29,21,.74))!important;
}
.svc-visual-bg{
  opacity:.08!important;
  border:1px solid rgba(255,255,255,.05)!important;
}
.svc-info{
  background:
    linear-gradient(180deg, rgba(21,38,26,.76), rgba(14,24,17,.94))!important;
  border-top:1px solid rgba(255,255,255,.07)!important;
}

/* Accordion mobile: mismo lenguaje visual con iconos. */
.acc-item{
  background:linear-gradient(165deg, rgba(21,38,26,.90) 0%, rgba(21,38,26,.82) 42%, rgba(11,18,13,.90) 100%)!important;
  border:1px solid rgba(255,255,255,.09)!important;
  box-shadow:0 18px 42px rgba(8,10,8,.16), inset 0 1px 0 rgba(255,255,255,.07)!important;
  position:relative;
  overflow:hidden!important;
}
.acc-item::before{
  content:'';
  position:absolute;
  inset:1px;
  border-radius:inherit;
  pointer-events:none;
  background:
    linear-gradient(120deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.02) 24%, rgba(255,255,255,0) 44%),
    radial-gradient(circle at 10% 8%, rgba(222,242,44,.10), transparent 26%);
  opacity:.9;
}
.acc-trigger{
  grid-template-columns:52px minmax(0,1fr) 38px!important;
  gap:14px!important;
}
.acc-label{font-weight:400!important}
.acc-trigger.open .acc-label,
.acc-trigger:hover .acc-label{color:var(--white)!important}

@media(max-width:960px){
  .svc-explorer{gap:12px!important}
  .svc-menu{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    border-right:0!important;
  }
  .svc-tab{
    grid-template-columns:1fr!important;
    gap:10px!important;
    justify-items:center!important;
    text-align:center!important;
    min-height:110px!important;
    padding:16px 14px!important;
  }
  .svc-tab-dot{justify-self:center!important}
  .svc-tab-label{font-size:.9rem!important}
}

@media(max-width:640px){
  .svc-explorer,
  .svc-accordion{gap:12px!important}
  .acc-icon{width:48px;height:48px;border-radius:15px}
  .acc-icon svg{width:20px;height:20px}
}

/* ════════════════════════════════════════════════
   SERVICIOS — AJUSTE FINAL ICONOS / SELECTOR / PANELES
════════════════════════════════════════════════ */
/* Cada panel debe sentirse independiente; se elimina cualquier trazo que encierre a ambos. */
.svc-explorer,
.svc-explorer::before,
.svc-explorer::after{
  border:none!important;
  outline:none!important;
  box-shadow:none!important;
  background:transparent!important;
}
.svc-explorer::before,
.svc-explorer::after{display:none!important}

/* Paneles independientes */
.svc-menu,
.svc-panel{
  border-radius:30px!important;
  overflow:hidden!important;
}

/* Evita que el selector del primer servicio se desborde visualmente */
.svc-menu{padding:10px!important}
.svc-tab{
  border-radius:20px!important;
  overflow:hidden!important;
  margin:0!important;
}
.svc-tab + .svc-tab{margin-top:2px!important}
.svc-tab::after{
  inset:2px!important;
  border-radius:18px!important;
  width:auto!important;
}
.svc-tab.active{
  box-shadow:inset 3px 0 0 var(--lime), 0 8px 18px rgba(0,0,0,.10)!important;
}

/* Icon tile inspirado en la referencia: cuadro lima suave + icono lima */
.svc-tab-icon,
.acc-icon{
  width:52px!important;
  height:52px!important;
  border-radius:16px!important;
  background:
    radial-gradient(120% 120% at 28% 18%, rgba(222,242,44,.34), rgba(222,242,44,.12) 62%, rgba(222,242,44,.08) 100%)!important;
  border:1px solid rgba(222,242,44,.24)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -1px 0 rgba(255,255,255,.10),
    0 0 18px -4px rgba(222,242,44,.22)!important;
  color:var(--lime)!important;
}
.svc-tab-icon svg,
.acc-icon svg{
  width:22px!important;
  height:22px!important;
  stroke:currentColor!important;
  fill:currentColor!important;
  fill-opacity:.16!important;
  stroke-width:1.35!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.svc-tab.active .svc-tab-icon,
.svc-tab:hover .svc-tab-icon,
.acc-trigger.open .acc-icon,
.acc-trigger:hover .acc-icon{
  border-color:rgba(222,242,44,.34)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.52),
    inset 0 -1px 0 rgba(255,255,255,.12),
    0 0 22px -3px rgba(222,242,44,.30)!important;
}

/* Mobile / tablet keep panels independent and selector clean */
@media(max-width:960px){
  .svc-menu{padding:8px!important}
  .svc-tab{margin:0!important}
  .svc-tab::after{inset:2px!important;border-radius:16px!important}
}

/* Accordion items use same icon finish */
.acc-trigger{
  grid-template-columns:52px minmax(0,1fr) 38px!important;
}

/* ════════════════════════════════════════════════
   EQUIPO — POPUP PREMIUM (adaptado del adjunto)
   Solo afecta el modal; las tarjetas de Equipo conservan su diseño.
════════════════════════════════════════════════ */
#team .tmember{
  cursor:pointer;
}
#team .tmember:focus-visible{
  outline:2px solid var(--lime);
  outline-offset:8px;
  border-radius:18px;
}

/* Popup anterior team-modal eliminado: no existe markup asociado. */

/* ════════════════════════════════════════════════
   EQUIPO — POPUP COMPLETO TIPO PERSONA
   Replica la composición 2×2 del archivo de referencia.
════════════════════════════════════════════════ */
.team-persona-overlay{
  --tp-bg:#080a08;
  --tp-surface:#151a16;
  --tp-surface-2:#192019;
  --tp-line:rgba(255,255,255,.075);
  --tp-text:#f5f5f1;
  --tp-muted:rgba(245,245,241,.58);
  --tp-muted-2:rgba(245,245,241,.42);
  --tp-accent:var(--lime,#DEF22C);
  --tp-green:var(--brand-green,#15261A);
  --tp-track:#303630;
  position:fixed;
  inset:0;
  z-index:1200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(14px,3.2vw,36px);
  background:rgba(4,6,4,.78);
  -webkit-backdrop-filter:blur(9px) saturate(1.08);
  backdrop-filter:blur(9px) saturate(1.08);
  opacity:0;
  transition:opacity .28s cubic-bezier(.65,0,.35,1);
}
.team-persona-overlay[hidden]{display:none!important}
.team-persona-overlay.is-open{opacity:1}
.team-persona-modal{
  position:relative;
  width:min(100%,1000px);
  max-height:min(880px,92vh);
  background:transparent;
  transform:translateY(18px) scale(.97);
  opacity:0;
  transition:transform .42s cubic-bezier(.16,1,.3,1),opacity .26s cubic-bezier(.16,1,.3,1);
  outline:none;
}
.team-persona-overlay.is-open .team-persona-modal{transform:none;opacity:1}
.team-persona-close{
  position:absolute;
  top:-14px;
  right:-14px;
  z-index:8;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:var(--tp-accent);
  color:#15261A;
  box-shadow:0 10px 28px rgba(0,0,0,.38),0 0 20px rgba(222,242,44,.10);
  transition:transform .2s cubic-bezier(.16,1,.3,1);
}
.team-persona-close:hover,.team-persona-close:focus-visible{transform:scale(1.08) rotate(90deg)}
.team-persona-body{
  max-height:min(880px,92vh);
  overflow-y:auto;
  overflow-x:hidden;
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1fr);
  gap:20px;
  padding:4px;
  scrollbar-width:thin;
  scrollbar-color:rgba(222,242,44,.20) transparent;
}
.team-persona-body::-webkit-scrollbar{width:7px}
.team-persona-body::-webkit-scrollbar-thumb{background:rgba(222,242,44,.20);border-radius:999px}
.team-persona-col{display:flex;flex-direction:column;gap:20px;min-width:0}
.team-persona-photo-card{margin:0;min-width:0}
.team-persona-photo-frame{
  position:relative;
  width:100%;
  aspect-ratio:4/4.55;
  overflow:hidden;
  border-radius:32px 32px 32px 6px;
  isolation:isolate;
  background:
    radial-gradient(circle at 52% 34%,rgba(255,255,255,.16),transparent 38%),
    linear-gradient(145deg,#DEF22C 0%,#cfe327 100%);
  box-shadow:0 30px 70px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.24);
}
.team-persona-photo-frame::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(140deg,rgba(255,255,255,.10),transparent 26%,rgba(21,38,26,.04));
  pointer-events:none;
}
.team-persona-photo{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center 18%;
}
.team-persona-photo-scrim{
  position:absolute;
  z-index:2;
  left:0;right:0;bottom:0;height:46%;
  background:linear-gradient(to top,rgba(7,10,7,.94) 0%,rgba(7,10,7,.58) 44%,rgba(7,10,7,0) 100%);
  pointer-events:none;
}
.team-persona-photo-caption{
  position:absolute;
  z-index:3;
  left:0;right:0;bottom:clamp(18px,2.8vw,26px);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:0 16px;
}
.team-persona-name{font-family:var(--font-heading);font-size:clamp(1.3rem,2.2vw,1.65rem);font-weight:650;color:#fff;letter-spacing:-.02em}
.team-persona-role{font-size:.95rem;color:rgba(255,255,255,.68)}
.team-persona-statement-card,
.team-persona-panel{
  margin:0;
  background:linear-gradient(155deg,rgba(24,31,25,.98),rgba(17,22,18,.99));
  border:1px solid var(--tp-line);
  border-radius:32px;
  box-shadow:0 24px 54px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.025);
}
.team-persona-statement-card{
  padding:clamp(24px,3vw,32px) clamp(20px,3vw,30px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;flex:1;min-height:210px;
}
.team-persona-quote-mark{color:var(--tp-accent);flex:none}
.team-persona-statement{font-family:var(--font-heading);font-size:clamp(1.05rem,1.8vw,1.28rem);line-height:1.48;color:var(--tp-muted);max-width:32ch}
.team-persona-panel{padding:clamp(22px,3vw,30px)}
.team-persona-focus{min-height:250px}
.team-persona-details{flex:1}
.team-persona-panel-title{font-family:var(--font-heading);font-size:1.16rem;font-weight:560;color:var(--tp-text);margin:0 0 18px}
.team-persona-list-block+.team-persona-list-block{margin-top:28px}
.team-persona-list{list-style:none!important;margin:0!important;padding:0!important;display:flex;flex-direction:column;gap:9px}
.team-persona-list li{position:relative;padding-left:18px;color:var(--tp-muted);font-size:.93rem;line-height:1.48}
.team-persona-list li::before{content:'';position:absolute;left:2px;top:.66em;width:5px;height:5px;border-radius:50%;background:var(--tp-accent);box-shadow:0 0 9px rgba(222,242,44,.16)}
.team-persona-sliders{display:flex;flex-direction:column;gap:25px}
.team-persona-slider-labels{display:flex;justify-content:space-between;gap:12px;margin-bottom:10px;color:var(--tp-muted);font-size:.92rem}
.team-persona-slider{position:relative;display:flex;align-items:center;height:24px}
.team-persona-slider-input{
  -webkit-appearance:none;appearance:none;width:100%;height:7px;border:0;border-radius:999px;outline:none;cursor:pointer;
  background:linear-gradient(to right,var(--tp-accent) 0%,var(--tp-accent) var(--val,50%),var(--tp-track) var(--val,50%),var(--tp-track) 100%);
}
.team-persona-slider-input::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:19px;height:19px;border-radius:50%;background:#fff;border:0;box-shadow:0 2px 6px rgba(0,0,0,.42),0 0 0 3px rgba(255,255,255,.05);cursor:grab;
}
.team-persona-slider-input::-moz-range-track{height:7px;border-radius:999px;background:transparent}
.team-persona-slider-input::-moz-range-progress{height:7px;border-radius:999px;background:var(--tp-accent)}
.team-persona-slider-input::-moz-range-thumb{width:19px;height:19px;border:0;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.42)}
.team-persona-slider-input:focus-visible{box-shadow:0 0 0 2px var(--tp-bg),0 0 0 4px var(--tp-accent)}
body.team-persona-open{overflow:hidden!important}

@media(max-width:860px){
  .team-persona-body{grid-template-columns:1fr}
  .team-persona-photo-frame{aspect-ratio:16/10}
  .team-persona-statement-card{min-height:180px}
}
@media(max-width:560px){
  .team-persona-overlay{padding:0;align-items:flex-end}
  .team-persona-modal{max-width:100%;max-height:94vh;transform:translateY(100%)}
  .team-persona-overlay.is-open .team-persona-modal{transform:translateY(0)}
  .team-persona-body{max-height:94vh;padding:4px 4px 20px}
  .team-persona-close{top:12px;right:12px}
  .team-persona-photo-frame{aspect-ratio:4/3.3;border-radius:26px 26px 26px 4px}
  .team-persona-statement-card,.team-persona-panel{border-radius:26px}
}
@media(prefers-reduced-motion:reduce){
  .team-persona-overlay,.team-persona-modal,.team-persona-close{transition:none!important}
}

/* ════════════════════════════════════════════════
   TEAM POPUP — LIME TINTED LIQUID GLASS
   Mantiene la composición completa, pero con tratamiento glass premium.
════════════════════════════════════════════════ */
.team-persona-overlay{
  background:rgba(4,6,4,.62)!important;
  -webkit-backdrop-filter:blur(16px) saturate(1.08)!important;
  backdrop-filter:blur(16px) saturate(1.08)!important;
}
.team-persona-modal{
  filter:drop-shadow(0 26px 68px rgba(0,0,0,.34));
}
.team-persona-photo-frame,
.team-persona-statement-card,
.team-persona-panel{
  position:relative!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.18)!important;
  background:
    linear-gradient(155deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.04) 28%, rgba(222,242,44,.05) 100%),
    linear-gradient(165deg, rgba(18,24,19,.86) 0%, rgba(12,17,13,.92) 100%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.12)!important;
  backdrop-filter:blur(18px) saturate(1.12)!important;
  box-shadow:
    0 26px 58px rgba(0,0,0,.22),
    0 10px 22px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(255,255,255,.04)!important;
}
.team-persona-photo-frame::before,
.team-persona-statement-card::before,
.team-persona-panel::before{
  content:''!important;
  position:absolute!important;
  inset:1px!important;
  border-radius:inherit!important;
  pointer-events:none!important;
  background:
    linear-gradient(120deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.08) 16%, rgba(255,255,255,0) 40%),
    radial-gradient(circle at 12% 10%, rgba(222,242,44,.14), transparent 26%),
    radial-gradient(circle at 86% 92%, rgba(243,240,230,.06), transparent 30%)!important;
  opacity:.95!important;
  z-index:0!important;
}
.team-persona-photo-frame::after,
.team-persona-statement-card::after,
.team-persona-panel::after{
  content:''!important;
  position:absolute!important;
  left:0!important;right:0!important;top:0!important;
  height:34%!important;
  pointer-events:none!important;
  background:linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,0))!important;
  opacity:.75!important;
  z-index:0!important;
}
.team-persona-photo,
.team-persona-photo-scrim,
.team-persona-photo-caption,
.team-persona-statement-card > *,
.team-persona-panel > *{
  position:relative!important;
  z-index:1!important;
}
.team-persona-photo-frame{
  background:
    radial-gradient(circle at 52% 34%, rgba(255,255,255,.10), transparent 38%),
    linear-gradient(145deg, rgba(222,242,44,.18) 0%, rgba(207,227,39,.10) 24%, rgba(16,22,17,.78) 100%)!important;
}
.team-persona-statement-card,
.team-persona-panel{
  background:
    linear-gradient(155deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.035) 24%, rgba(222,242,44,.04) 100%),
    linear-gradient(165deg, rgba(19,25,20,.88) 0%, rgba(12,16,13,.94) 100%)!important;
}
.team-persona-close{
  background:linear-gradient(145deg, rgba(222,242,44,.94), rgba(210,227,42,.84))!important;
  color:#15261A!important;
  border:1px solid rgba(255,255,255,.34)!important;
  box-shadow:
    0 10px 28px rgba(0,0,0,.28),
    0 0 18px rgba(222,242,44,.14),
    inset 0 1px 0 rgba(255,255,255,.44)!important;
}
.team-persona-role,
.team-persona-statement,
.team-persona-list li,
.team-persona-slider-labels{
  color:rgba(245,245,241,.72)!important;
}
.team-persona-panel-title,
.team-persona-name{
  color:#fff!important;
}
.team-persona-list li::before{
  background:rgba(222,242,44,.88)!important;
  box-shadow:0 0 10px rgba(222,242,44,.20)!important;
}
.team-persona-slider-input{
  background:linear-gradient(to right, rgba(222,242,44,.90) 0%, rgba(222,242,44,.90) var(--val,50%), rgba(255,255,255,.08) var(--val,50%), rgba(255,255,255,.08) 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(255,255,255,.04)!important;
}
.team-persona-slider-input::-webkit-slider-thumb{
  background:#f7f7f2!important;
  box-shadow:0 2px 7px rgba(0,0,0,.32), 0 0 0 3px rgba(255,255,255,.08)!important;
}
.team-persona-slider-input::-moz-range-progress{background:rgba(222,242,44,.90)!important}
.team-persona-slider-input::-moz-range-thumb{background:#f7f7f2!important}

@media(max-width:560px){
  .team-persona-photo-frame,
  .team-persona-statement-card,
  .team-persona-panel{border-radius:26px!important}
}

/* ════════════════════════════════════════════════
   TEAM — CENTRAR 2 PERFILES Y RESTAURAR 4 AUTOMÁTICAMENTE
════════════════════════════════════════════════ */
@media(min-width:981px){
  #team .team-grid.team-grid--pair{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    column-gap:clamp(34px,4vw,72px)!important;
    row-gap:46px!important;
  }
  #team .team-grid.team-grid--pair > .tmember:not([hidden]):nth-child(1){
    grid-column:2!important;
  }
  #team .team-grid.team-grid--pair > .tmember:not([hidden]):nth-child(2){
    grid-column:3!important;
  }
  #team .team-grid.team-grid--pair > .tmember:not([hidden]) .tm-portrait{
    width:min(100%,276px)!important;
    margin-bottom:24px!important;
  }
  #team .team-grid.team-grid--pair > .tmember:not([hidden]) .tm-info{
    padding:0 10px!important;
  }
}

/* ════════════════════════════════════════════════
   AJUSTES COLSING BILINGÜE 10
   1) Popup Equipo móvil: fotografía completa sin recorte.
   2) Proceso: glass individual verde oscuro por tarjeta.
════════════════════════════════════════════════ */

/* ── EQUIPO / POPUP MÓVIL — FOTO COMPLETA ── */
@media(max-width:860px){
  .team-persona-photo-frame{
    width:100%!important;
    height:clamp(280px,52vh,430px)!important;
    min-height:280px!important;
    aspect-ratio:auto!important;
    display:flex!important;
    align-items:flex-end!important;
    justify-content:center!important;
    background:
      radial-gradient(circle at 50% 36%,rgba(222,242,44,.13),transparent 42%),
      linear-gradient(155deg,rgba(255,255,255,.07),rgba(222,242,44,.035) 42%,rgba(13,20,15,.94))!important;
  }
  .team-persona-photo{
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    object-fit:contain!important;
    object-position:center bottom!important;
    transform:none!important;
  }
  .team-persona-photo-scrim{
    height:38%!important;
    background:linear-gradient(to top,rgba(7,10,7,.94) 0%,rgba(7,10,7,.48) 46%,rgba(7,10,7,0) 100%)!important;
  }
}

@media(max-width:560px){
  .team-persona-body{
    gap:10px!important;
  }
  .team-persona-photo-frame{
    height:clamp(255px,44vh,360px)!important;
    min-height:255px!important;
    aspect-ratio:auto!important;
    border-radius:26px 26px 26px 4px!important;
  }
  .team-persona-photo{
    object-fit:contain!important;
    object-position:center bottom!important;
    transform:none!important;
  }
  .team-persona-photo-caption{
    bottom:16px!important;
  }
  .team-persona-name{
    font-size:clamp(1.16rem,5.2vw,1.45rem)!important;
  }
  .team-persona-role{
    font-size:.84rem!important;
  }
}

/* ════════════════════════════════════════════════
   TEAM — ELIMINA FOCO RESIDUAL AL CERRAR POPUP
════════════════════════════════════════════════ */

/* TEAM — sin recuadro residual tras cerrar el popup */
#team .tmember:focus,
#team .tmember:focus-visible,
#team .tmember[role="button"]:focus,
#team .tmember[role="button"]:focus-visible{
  outline:none!important;
  outline-offset:0!important;
  box-shadow:none!important;
}


/* ════════════════════════════════════════════════
   HOME — PROCESO EN ESCENA
   Narrativa visual con seguimiento suave del bloque lateral.
════════════════════════════════════════════════ */
.home-page .home-process--story{
  position:relative;
  overflow:visible!important;
  background:#F3F0E6!important;
  color:#15261A;
  padding-top:clamp(92px,10vw,138px)!important;
  padding-bottom:clamp(100px,10vw,148px)!important;
  box-shadow:0 0 0 100vmax #F3F0E6;
  clip-path:inset(0 -100vmax);
}
.home-page .home-story-process{
  display:grid;
  grid-template-columns:minmax(300px,380px) minmax(0,1fr);
  gap:clamp(44px,5vw,82px);
  align-items:start;
}
.home-page .home-story-process__intro{
  position:relative;
  align-self:start;
  z-index:20;
  transform:translate3d(0,var(--home-process-intro-y,0px),0);
  will-change:transform;
}
.home-page .home-story-process__intro .eyebrow{
  color:#15261A!important;
}
.home-page .home-story-process__intro .eyebrow::before{
  background:var(--lime)!important;
}
.home-page .home-story-process__intro .sh2{
  margin-top:18px;
  max-width:12ch;
  color:#15261A!important;
}
.home-page .home-story-process__status{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:38px;
}
.home-page .home-story-process__current{
  font-family:var(--font-heading);
  font-size:clamp(3rem,5vw,4.6rem);
  line-height:.88;
  font-weight:800;
  letter-spacing:-.07em;
  color:#15261A;
}
.home-page .home-story-process__divider{
  width:58px;
  height:2px;
  background:var(--lime);
}
.home-page .home-story-process__total{
  font-family:var(--font-heading);
  font-size:1.02rem;
  font-weight:700;
  color:rgba(21,38,26,.48);
}
.home-page .home-story-process__nav{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:30px;
}
.home-page .home-story-process__nav-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  width:100%;
  padding:13px 15px;
  border:1px solid rgba(21,38,26,.10);
  border-radius:17px;
  background:rgba(255,255,255,.28);
  color:rgba(21,38,26,.64);
  text-align:left;
  transition:transform .25s ease,border-color .25s ease,background .25s ease,color .25s ease;
}
.home-page .home-story-process__nav-item span{
  font-family:var(--font-heading);
  font-size:.92rem;
  font-weight:800;
  letter-spacing:.04em;
  color:#15261A;
}
.home-page .home-story-process__nav-item small{
  font-size:.88rem;
  font-weight:650;
  color:inherit;
}
.home-page .home-story-process__nav-item.is-active,
.home-page .home-story-process__nav-item:hover,
.home-page .home-story-process__nav-item:focus-visible{
  transform:translateX(6px);
  border-color:rgba(21,38,26,.28);
  background:#15261A;
  color:#F3F0E6;
}
.home-page .home-story-process__nav-item.is-active span,
.home-page .home-story-process__nav-item:hover span,
.home-page .home-story-process__nav-item:focus-visible span{
  color:var(--lime);
}
.home-page .home-story-process__cards{
  list-style:none;
  margin:0;
  padding:18px 0 8px;
}
.home-page .home-story-process__card{
  position:sticky;
  top:104px;
  margin:0;
  padding:0;
  z-index:1;
}
.home-page .home-story-process__card + .home-story-process__card{
  margin-top:44px;
}
.home-page .home-story-process__card:nth-child(2){z-index:2}
.home-page .home-story-process__card:nth-child(3){z-index:3}
.home-page .home-story-process__card:nth-child(4){z-index:4}
.home-page .home-story-process__card:nth-child(5){z-index:5}
.home-page .home-story-process__layer{
  position:absolute;
  inset:18px 22px -16px 22px;
  z-index:0;
  border:1px solid rgba(21,38,26,.08);
  border-radius:34px;
  background:rgba(222,242,44,.42);
}
.home-page .home-story-process__panel{
  position:relative;
  z-index:1;
  min-height:412px;
  padding:34px 36px 36px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  border-radius:36px;
  background:
    radial-gradient(circle at 94% 6%,rgba(222,242,44,.12),transparent 25%),
    linear-gradient(145deg,#19301f 0%,#102016 100%);
  box-shadow:0 28px 66px rgba(21,38,26,.20),inset 0 1px 0 rgba(255,255,255,.05);
}
.home-page .home-story-process__panel::after{
  content:'';
  position:absolute;
  right:-70px;
  bottom:-90px;
  width:220px;
  height:220px;
  border:1px solid rgba(222,242,44,.10);
  border-radius:50%;
  pointer-events:none;
}
.home-page .home-story-process__ghost{
  position:absolute;
  right:26px;
  top:18px;
  font-family:var(--font-heading);
  font-size:clamp(6rem,10vw,8.7rem);
  line-height:.88;
  font-weight:800;
  letter-spacing:-.08em;
  color:rgba(222,242,44,.09);
  user-select:none;
}
.home-page .home-story-process__panel-top{
  position:relative;
  z-index:2;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
}
.home-page .home-story-process__chip{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:9px 15px;
  border-radius:999px;
  background:var(--lime);
  color:#15261A;
  font-size:.76rem;
  line-height:1;
  font-weight:800;
  letter-spacing:.10em;
  text-transform:uppercase;
}
.home-page .home-story-process__icon{
  position:absolute;
  right:34px;
  top:132px;
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  border:1px solid rgba(243,240,230,.12);
  border-radius:17px;
  background:rgba(243,240,230,.055);
  color:var(--lime);
}
.home-page .home-story-process__icon svg{
  width:31px;
  height:31px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.05;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.home-page .home-story-process__title{
  position:relative;
  z-index:2;
  margin:96px 0 16px;
  max-width:13ch;
  color:#FFFFFF;
  font-family:var(--font-heading);
  font-size:clamp(1.55rem,2.2vw,2.12rem);
  line-height:1.06;
  font-weight:700;
  letter-spacing:-.035em;
}
.home-page .home-story-process__description{
  position:relative;
  z-index:2;
  margin:0;
  max-width:45ch;
  color:rgba(243,240,230,.76);
  font-size:1rem;
  line-height:1.68;
}
.home-page .home-story-process__card.is-current .home-story-process__panel{
  border-color:rgba(222,242,44,.30);
}
.home-page .home-story-process__card.is-current .home-story-process__chip{
  box-shadow:0 0 0 5px rgba(222,242,44,.09);
}

@media(max-width:1080px){
  .home-page .home-story-process{
    grid-template-columns:1fr;
    gap:38px;
  }
  .home-page .home-story-process__intro{
    transform:none!important;
  }
  .home-page .home-story-process__intro .sh2{
    max-width:none;
  }
  .home-page .home-story-process__nav{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
  }
  .home-page .home-story-process__nav-item{
    flex-direction:column;
    align-items:flex-start;
    min-height:76px;
    padding:12px;
  }
  .home-page .home-story-process__card{
    top:28px;
  }
  .home-page .home-story-process__card + .home-story-process__card{
    margin-top:26px;
  }
}
@media(max-width:720px){
  .home-page .home-process--story{
    padding-top:70px!important;
    padding-bottom:78px!important;
  }
  .home-page .home-story-process__status{
    margin-top:26px;
  }
  .home-page .home-story-process__nav{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .home-page .home-story-process__nav-item:last-child{
    grid-column:1 / -1;
  }
  .home-page .home-story-process__cards{
    padding-top:0;
  }
  .home-page .home-story-process__card{
    position:relative;
    top:auto;
  }
  .home-page .home-story-process__card + .home-story-process__card{
    margin-top:20px;
  }
  .home-page .home-story-process__layer{
    display:none;
  }
  .home-page .home-story-process__panel{
    min-height:300px;
    padding:24px 22px 26px;
    border-radius:28px;
  }
  .home-page .home-story-process__ghost{
    right:15px;
    top:12px;
    font-size:5rem;
  }
  .home-page .home-story-process__icon{
    right:21px;
    top:88px;
    width:47px;
    height:47px;
    border-radius:14px;
  }
  .home-page .home-story-process__icon svg{
    width:26px;
    height:26px;
    stroke-width:2;
  }
  .home-page .home-story-process__title{
    margin-top:58px;
    max-width:none;
    font-size:1.42rem;
  }
  .home-page .home-story-process__description{
    font-size:.93rem;
    line-height:1.62;
  }
}

/* Home proceso — iconos grandes de fondo + números con más brillo */
.home-page .home-story-process__panel::after{
  display:none!important;
  content:none!important;
}
.home-page .home-story-process__ghost{
  color:rgba(222,242,44,.22)!important;
  text-shadow:0 0 18px rgba(222,242,44,.16), 0 0 34px rgba(222,242,44,.08)!important;
  opacity:1!important;
}
.home-page .home-story-process__icon{
  position:absolute!important;
  right:-34px!important;
  bottom:-46px!important;
  top:auto!important;
  width:280px!important;
  height:280px!important;
  display:block!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:rgba(222,242,44,.09)!important;
  opacity:1!important;
  pointer-events:none!important;
  z-index:1!important;
}
.home-page .home-story-process__icon svg{
  width:100%!important;
  height:100%!important;
  stroke:currentColor!important;
  fill:none!important;
  stroke-width:1.35!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.home-page .home-story-process__panel-top{
  position:relative!important;
  z-index:3!important;
}
.home-page .home-story-process__title,
.home-page .home-story-process__description{
  position:relative!important;
  z-index:3!important;
}
.home-page .home-story-process__title{
  margin-top:92px!important;
}
.home-page .home-story-process__card:nth-child(1) .home-story-process__icon{
  width:300px!important; height:300px!important; right:-56px!important; bottom:-52px!important;
}
.home-page .home-story-process__card:nth-child(2) .home-story-process__icon{
  width:300px!important; height:300px!important; right:-54px!important; bottom:-58px!important;
}
.home-page .home-story-process__card:nth-child(3) .home-story-process__icon{
  width:290px!important; height:290px!important; right:-44px!important; bottom:-52px!important;
}
.home-page .home-story-process__card:nth-child(4) .home-story-process__icon{
  width:300px!important; height:300px!important; right:-44px!important; bottom:-62px!important;
}
.home-page .home-story-process__card:nth-child(5) .home-story-process__icon{
  width:294px!important; height:294px!important; right:-42px!important; bottom:-58px!important;
}
.home-page .home-story-process__card.is-current .home-story-process__ghost{
  color:rgba(222,242,44,.28)!important;
  text-shadow:0 0 24px rgba(222,242,44,.18), 0 0 42px rgba(222,242,44,.10)!important;
}
@media(max-width:720px){
  .home-page .home-story-process__ghost{
    font-size:4.9rem!important;
    right:14px!important;
    top:12px!important;
  }
  .home-page .home-story-process__icon{
    width:180px!important;
    height:180px!important;
    right:-18px!important;
    bottom:-24px!important;
  }
  .home-page .home-story-process__title{
    margin-top:54px!important;
  }
}

/* Ajuste final — iconos visibles debajo del número y alineados con el título */
.home-page .home-story-process__icon{
  right:auto!important;
  left:36px!important;
  top:108px!important;
  bottom:auto!important;
  width:248px!important;
  height:248px!important;
  color:rgba(222,242,44,.14)!important;
  z-index:1!important;
}
.home-page .home-story-process__icon svg{
  stroke-width:1.5!important;
}
.home-page .home-story-process__title{
  margin-top:170px!important;
}
.home-page .home-story-process__description{
  max-width:43ch!important;
}
.home-page .home-story-process__card:nth-child(1) .home-story-process__icon,
.home-page .home-story-process__card:nth-child(2) .home-story-process__icon,
.home-page .home-story-process__card:nth-child(3) .home-story-process__icon,
.home-page .home-story-process__card:nth-child(4) .home-story-process__icon,
.home-page .home-story-process__card:nth-child(5) .home-story-process__icon{
  left:36px!important;
  right:auto!important;
  bottom:auto!important;
}
.home-page .home-story-process__card:nth-child(1) .home-story-process__icon{width:250px!important;height:250px!important;top:106px!important}
.home-page .home-story-process__card:nth-child(2) .home-story-process__icon{width:246px!important;height:246px!important;top:104px!important}
.home-page .home-story-process__card:nth-child(3) .home-story-process__icon{width:238px!important;height:238px!important;top:110px!important}
.home-page .home-story-process__card:nth-child(4) .home-story-process__icon{width:250px!important;height:250px!important;top:104px!important}
.home-page .home-story-process__card:nth-child(5) .home-story-process__icon{width:244px!important;height:244px!important;top:108px!important}
.home-page .home-story-process__card.is-current .home-story-process__icon{
  color:rgba(222,242,44,.17)!important;
}
@media(max-width:720px){
  .home-page .home-story-process__icon,
  .home-page .home-story-process__card:nth-child(1) .home-story-process__icon,
  .home-page .home-story-process__card:nth-child(2) .home-story-process__icon,
  .home-page .home-story-process__card:nth-child(3) .home-story-process__icon,
  .home-page .home-story-process__card:nth-child(4) .home-story-process__icon,
  .home-page .home-story-process__card:nth-child(5) .home-story-process__icon{
    left:22px!important;
    top:92px!important;
    width:176px!important;
    height:176px!important;
    right:auto!important;
    bottom:auto!important;
    color:rgba(222,242,44,.13)!important;
  }
  .home-page .home-story-process__title{
    margin-top:128px!important;
  }
}


/* Home proceso — iconos centrados bajo el número y sólidos */
.home-page .home-story-process__icon,
.home-page .home-story-process__card:nth-child(1) .home-story-process__icon,
.home-page .home-story-process__card:nth-child(2) .home-story-process__icon,
.home-page .home-story-process__card:nth-child(3) .home-story-process__icon,
.home-page .home-story-process__card:nth-child(4) .home-story-process__icon,
.home-page .home-story-process__card:nth-child(5) .home-story-process__icon{
  left:50%!important;
  right:auto!important;
  top:94px!important;
  bottom:auto!important;
  transform:translateX(-50%)!important;
  width:212px!important;
  height:212px!important;
  color:rgba(222,242,44,.12)!important;
  z-index:1!important;
}
.home-page .home-story-process__icon svg{
  width:100%!important;
  height:100%!important;
  fill:currentColor!important;
  stroke:none!important;
}
.home-page .home-story-process__title{
  margin-top:168px!important;
}
.home-page .home-story-process__card.is-current .home-story-process__icon{
  color:rgba(222,242,44,.15)!important;
}
@media(max-width:720px){
  .home-page .home-story-process__icon,
  .home-page .home-story-process__card:nth-child(1) .home-story-process__icon,
  .home-page .home-story-process__card:nth-child(2) .home-story-process__icon,
  .home-page .home-story-process__card:nth-child(3) .home-story-process__icon,
  .home-page .home-story-process__card:nth-child(4) .home-story-process__icon,
  .home-page .home-story-process__card:nth-child(5) .home-story-process__icon{
    top:84px!important;
    width:154px!important;
    height:154px!important;
  }
  .home-page .home-story-process__title{
    margin-top:122px!important;
  }
}

/* Home proceso — Material Symbols oficiales, alineados con el número */
.home-page .home-story-process__ghost{
  right:18px!important;
  width:232px!important;
  text-align:center!important;
  color:rgba(222,242,44,.24)!important;
  text-shadow:0 0 20px rgba(222,242,44,.18),0 0 42px rgba(222,242,44,.09)!important;
}
.home-page .home-story-process__icon,
.home-page .home-story-process__card:nth-child(1) .home-story-process__icon,
.home-page .home-story-process__card:nth-child(2) .home-story-process__icon,
.home-page .home-story-process__card:nth-child(3) .home-story-process__icon,
.home-page .home-story-process__card:nth-child(4) .home-story-process__icon,
.home-page .home-story-process__card:nth-child(5) .home-story-process__icon{
  position:absolute!important;
  left:auto!important;
  right:18px!important;
  top:122px!important;
  bottom:auto!important;
  width:232px!important;
  height:232px!important;
  transform:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:rgba(222,242,44,.105)!important;
  font-family:'Material Symbols Rounded'!important;
  font-size:224px!important;
  font-style:normal!important;
  font-weight:normal!important;
  line-height:1!important;
  letter-spacing:normal!important;
  text-transform:none!important;
  white-space:nowrap!important;
  word-wrap:normal!important;
  direction:ltr!important;
  -webkit-font-feature-settings:'liga'!important;
  -webkit-font-smoothing:antialiased!important;
  font-feature-settings:'liga'!important;
  font-variation-settings:'FILL' 1,'wght' 700,'GRAD' 0,'opsz' 48!important;
  pointer-events:none!important;
  z-index:1!important;
}
.home-page .home-story-process__icon svg{display:none!important}
.home-page .home-story-process__title,
.home-page .home-story-process__description{
  position:relative!important;
  z-index:3!important;
  max-width:calc(100% - 270px)!important;
}
.home-page .home-story-process__title{
  margin-top:96px!important;
}
.home-page .home-story-process__card.is-current .home-story-process__icon{
  color:rgba(222,242,44,.14)!important;
}
@media(max-width:720px){
  .home-page .home-story-process__ghost{
    right:8px!important;
    width:154px!important;
    font-size:4.9rem!important;
  }
  .home-page .home-story-process__icon,
  .home-page .home-story-process__card:nth-child(1) .home-story-process__icon,
  .home-page .home-story-process__card:nth-child(2) .home-story-process__icon,
  .home-page .home-story-process__card:nth-child(3) .home-story-process__icon,
  .home-page .home-story-process__card:nth-child(4) .home-story-process__icon,
  .home-page .home-story-process__card:nth-child(5) .home-story-process__icon{
    right:8px!important;
    top:82px!important;
    width:154px!important;
    height:154px!important;
    font-size:148px!important;
    color:rgba(222,242,44,.10)!important;
  }
  .home-page .home-story-process__title,
  .home-page .home-story-process__description{
    max-width:calc(100% - 112px)!important;
  }
  .home-page .home-story-process__title{
    margin-top:58px!important;
  }
}

/* TEAM POPUP — frase con tipografía de párrafo y comillas en Sora */
.team-persona-statement-card .team-persona-quote-mark{
  display:none!important;
}
.team-persona-statement-card .team-persona-statement{
  font-family:var(--font)!important;
  font-style:normal!important;
  font-weight:450!important;
  letter-spacing:0!important;
}
.team-persona-statement-card .team-persona-statement::before,
.team-persona-statement-card .team-persona-statement::after{
  font-family:var(--font-heading)!important;
  color:var(--tp-accent)!important;
  font-size:1.32em!important;
  font-weight:700!important;
  line-height:0!important;
}
.team-persona-statement-card .team-persona-statement::before{
  content:'“';
  margin-right:.12em;
}
.team-persona-statement-card .team-persona-statement::after{
  content:'”';
  margin-left:.12em;
}

/* ════════════════════════════════════════════════
   OPTIMIZACIÓN MÓVIL — NAVEGACIÓN
════════════════════════════════════════════════ */
html.mobile-drawer-open,
body.mobile-drawer-open{
  overscroll-behavior:none;
}

@media(max-width:960px){
  nav,
  nav.s,
  .home-page nav.nav-visible{
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    background:linear-gradient(180deg,rgba(18,34,23,.97),rgba(12,24,16,.96))!important;
    will-change:auto!important;
  }
  .home-page nav{
    transition:opacity .18s ease,visibility .18s ease!important;
  }
  #cv{contain:strict;}
}

/* ════════════════════════════════════════════════
   MÓVIL — ALIADOS CONTINUOS + PROCESO EDGE A CAMPO COMPLETO
════════════════════════════════════════════════ */
.home-story-process__mobile-tracker{display:none}

@media(max-width:720px){
  html{overflow-x:clip!important;overflow-y:auto!important}
  body{overflow-x:clip!important;overflow-y:visible!important}

  /* El encabezado superior se sustituye por el rail lateral. */
  .home-page .home-story-process__intro>.home-story-process__status,
  .home-page .home-story-process__intro>.home-story-process__nav{display:none!important}

  .home-page .home-story-process{
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto!important;
    row-gap:28px!important;
  }
  /* Rail y tarjetas comparten la misma celda: las tarjetas usan todo el ancho. */
  .home-page .home-story-process__mobile-stage{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto!important;
    grid-column:1!important;
    grid-row:2!important;
    align-items:start!important;
    width:100%!important;
    min-width:0!important;
    position:relative!important;
  }
  .home-page .home-story-process__mobile-tracker{
    position:sticky!important;
    top:50svh!important;
    transform:translateY(-50%)!important;
    z-index:60!important;
    grid-column:1!important;
    grid-row:1!important;
    align-self:start!important;
    justify-self:end!important;
    display:flex!important;
    flex-direction:column!important;
    width:66px!important;
    margin:0 calc(-1 * var(--gutter)) 0 0!important;
    padding:9px 5px 10px!important;
    overflow:hidden!important;
    border:1px solid rgba(255,255,255,.72)!important;
    border-right:0!important;
    border-radius:17px 0 0 17px!important;
    background:linear-gradient(145deg,rgba(255,255,255,.64),rgba(244,240,228,.78))!important;
    -webkit-backdrop-filter:blur(20px) saturate(1.32)!important;
    backdrop-filter:blur(20px) saturate(1.32)!important;
    box-shadow:-14px 18px 34px rgba(7,20,12,.18),inset 0 1px 0 rgba(255,255,255,.88),inset 1px 0 0 rgba(222,242,44,.18)!important;
  }
  .home-page .home-story-process__mobile-tracker::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:radial-gradient(circle at 20% 5%,rgba(255,255,255,.92),transparent 42%),linear-gradient(180deg,rgba(222,242,44,.08),transparent 38%);
  }
  .home-page .home-story-process__mobile-tracker .home-story-process__status{
    display:flex!important;align-items:center!important;justify-content:center!important;gap:4px!important;margin:0 0 7px!important;
  }
  .home-page .home-story-process__mobile-tracker .home-story-process__current{
    color:#15261A!important;font-size:1.58rem!important;font-weight:800!important;line-height:.9!important;letter-spacing:-.07em!important;
  }
  .home-page .home-story-process__mobile-tracker .home-story-process__divider{
    width:1px!important;height:18px!important;background:rgba(21,38,26,.22)!important;
  }
  .home-page .home-story-process__mobile-tracker .home-story-process__total{
    color:rgba(21,38,26,.54)!important;font-size:.62rem!important;font-weight:700!important;
  }
  .home-page .home-story-process__nav--mobile{
    display:flex!important;flex-direction:column!important;gap:5px!important;margin:0!important;
  }
  .home-page .home-story-process__nav--mobile .home-story-process__nav-item,
  .home-page .home-story-process__nav--mobile .home-story-process__nav-item:last-child{
    display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;
    width:61px!important;min-width:61px!important;min-height:39px!important;grid-column:auto!important;gap:1px!important;
    padding:5px 6px!important;border:1px solid rgba(21,38,26,.10)!important;border-right:0!important;
    border-radius:11px 0 0 11px!important;background:rgba(255,255,255,.28)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.42)!important;text-align:left!important;transform:none!important;
    transition:background .25s ease,border-color .25s ease,transform .25s ease!important;
  }
  .home-page .home-story-process__nav--mobile .home-story-process__nav-item span{
    color:#36513D!important;font-size:.69rem!important;line-height:1!important;font-weight:800!important;
  }
  .home-page .home-story-process__nav--mobile .home-story-process__nav-item small{
    display:block!important;width:100%!important;overflow:hidden!important;color:rgba(21,38,26,.66)!important;
    font-size:.44rem!important;font-weight:650!important;line-height:1.08!important;letter-spacing:-.015em!important;
    text-overflow:ellipsis!important;white-space:nowrap!important;
  }
  .home-page .home-story-process__nav--mobile .home-story-process__nav-item.is-active{
    background:#15261A!important;border-color:#15261A!important;transform:translateX(-5px)!important;
    box-shadow:-9px 11px 22px rgba(7,20,12,.22),inset 0 1px 0 rgba(255,255,255,.10)!important;
  }
  .home-page .home-story-process__nav--mobile .home-story-process__nav-item.is-active span{color:#DEF22C!important}
  .home-page .home-story-process__nav--mobile .home-story-process__nav-item.is-active small{color:#F5F1E7!important}

  .home-page .home-story-process__cards{
    grid-column:1!important;
    grid-row:1!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    position:relative!important;
    z-index:1!important;
  }
  .home-page .home-story-process__card,
  .home-page .home-story-process__panel{
    width:100%!important;
    max-width:none!important;
    box-sizing:border-box!important;
  }
}

/* Instancias únicas de las animaciones de Servicios. */
[data-service-visual].is-service-paused *{animation-play-state:paused!important}
[data-service-visual].mobile-service-visual{display:block;width:100%;height:100%;max-width:560px;max-height:100%;overflow:visible}


/* ════════════════════════════════════════════════
   CIERRE RESPONSIVE — LOGO, ALIADOS, PROCESO Y TEAM
   Reglas consolidadas; sustituyen correcciones móviles anteriores.
════════════════════════════════════════════════ */

/* El contenedor del logo no crea espacio en móvil. */
.hero-brand-shell{display:contents}

/* Carrusel único, continuo y más pausado. */
.allies-track{
  --allies-duration:46s;
  animation:alliesContinuous var(--allies-duration) linear infinite!important;
  animation-fill-mode:both;
  backface-visibility:hidden;
  transform:translateZ(0);
}
@media(hover:hover) and (pointer:fine){
  .allies-marquee:hover .allies-track,
  .allies-marquee:focus-within .allies-track{animation-play-state:paused}
}

/* Logo separado del hero únicamente en escritorio.
   La franja superior reserva su espacio sin modificar la versión móvil. */
@media(min-width:961px){
  .home-page{
    --desktop-brand-band:clamp(176px,23svh,220px);
  }
  .home-page .hero-brand-shell{
    display:block;
    position:relative;
    width:100%;
    height:var(--desktop-brand-band);
    background:#000;
  }
  .home-page .hero-brand-morph{
    --brand-start-top:clamp(32px,4.5svh,46px)!important;
  }
  .home-page .hero{
    min-height:calc(100svh - var(--desktop-brand-band))!important;
    padding-top:0!important;
  }
  .home-page .hero-stage{
    min-height:calc(100svh - var(--desktop-brand-band))!important;
    padding-top:0!important;
  }
}

/* Proceso principal: iconos conservados y claramente verdes. */
.home-page .home-story-process__icon{
  display:inline-grid!important;
  place-items:center;
  color:var(--brand-green,#15261A)!important;
  text-shadow:none!important;
}
.home-page .home-story-process__panel-top{position:relative;z-index:3}

/* Nombre del popup debajo de la fotografía. */
.team-persona-photo-card{display:flex;flex-direction:column;gap:0}
.team-persona-photo-caption{
  position:relative!important;
  inset:auto!important;
  display:flex!important;
  flex-direction:column;
  align-items:center;
  gap:5px;
  padding:16px 18px 18px!important;
  text-align:center;
  border:1px solid rgba(255,255,255,.15);
  border-top:0;
  border-radius:0 0 26px 6px;
  background:linear-gradient(155deg,rgba(24,31,25,.92),rgba(14,20,15,.97));
  -webkit-backdrop-filter:blur(14px) saturate(1.12);
  backdrop-filter:blur(14px) saturate(1.12);
  box-shadow:0 18px 38px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.05);
}
.team-persona-name{
  color:#fff!important;
  text-shadow:0 2px 3px rgba(0,0,0,.78),0 5px 16px rgba(0,0,0,.46),0 0 18px rgba(222,242,44,.10)!important;
}
.team-persona-role{color:var(--lime,#DEF22C)!important}
.team-persona-photo-scrim{height:22%!important;opacity:.46}
@media(max-width:560px){
  .team-persona-photo-caption{padding:14px 16px 16px!important}
}


/* ════════════════════════════════════════════════
   CIERRE FINAL — HERO CONTINUO + PROCESO SIN EDGE EN MÓVIL
════════════════════════════════════════════════ */

/* Móvil y tablet: se muestran únicamente las tarjetas de Proceso. */
@media(max-width:960px){
  .home-page .home-story-process__mobile-tracker,
  .home-page .home-story-process__intro>.home-story-process__status,
  .home-page .home-story-process__intro>.home-story-process__nav{
    display:none!important;
  }
  .home-page .home-story-process__mobile-stage{
    display:block!important;
    width:100%!important;
    min-width:0!important;
  }
  .home-page .home-story-process__cards{
    display:grid!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
  }
}

@media(max-width:720px){
  body.service-design-editorial .story-process__mobile-tracker,
  body.service-design-editorial .story-process__intro>.story-process__status,
  body.service-design-editorial .story-process__intro>.story-process__nav{
    display:none!important;
  }
  body.service-design-editorial .story-process__mobile-stage{
    display:block!important;
    width:100%!important;
    min-width:0!important;
  }
  body.service-design-editorial .story-process__cards{
    display:grid!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
  }
}

/* Escritorio: logo y hero comparten una única superficie visual. */
.hero-composition{display:contents}
@media(min-width:961px){
  .home-page .hero-composition{
    display:block;
    position:relative;
    min-height:100svh;
    overflow:clip;
    background:
      linear-gradient(180deg,rgba(8,10,8,.30) 0%,rgba(8,10,8,.42) 34%,rgba(8,10,8,.60) 68%,rgba(8,10,8,.82) 100%),
      url('./assets/hero-bg-black-lime.png') center top / cover no-repeat;
  }
  .home-page .hero-composition::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
      radial-gradient(circle at 18% 16%,rgba(222,242,44,.09),transparent 25%),
      radial-gradient(circle at 82% 26%,rgba(222,242,44,.05),transparent 27%);
    z-index:0;
  }
  .home-page .hero-brand-shell,
  .home-page .hero{
    position:relative;
    z-index:1;
    background:transparent!important;
  }
  .home-page .hero-brand-shell{
    background:transparent!important;
  }
  .home-page .hero-brand-morph{
    transition:filter .08s linear;
    will-change:transform,opacity,filter;
  }
}

@media(prefers-reduced-motion:reduce){
  .home-page .hero-brand-morph{filter:none!important}
}


/* ════════════════════════════════════════════════
   CIERRE MÓVIL ESTABLE — ALIADOS, FOOTER Y NAVEGACIÓN TÁCTIL
   El carrusel móvil es un componente independiente; el de escritorio no se reutiliza.
════════════════════════════════════════════════ */
.mobile-allies{display:none}

@media(max-width:960px){
  /* Evita restauraciones visuales, anclajes automáticos y transiciones que compiten con el gesto táctil. */
  html,
  body{
    scroll-behavior:auto!important;
    scroll-snap-type:none!important;
    overflow-anchor:none!important;
  }
  body{touch-action:pan-y pinch-zoom}
  main,
  main section{
    scroll-snap-align:none!important;
    scroll-snap-stop:normal!important;
  }
  .section-fx,
  .section-fx::before,
  .section-fx::after,
  .section-fx>*{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    animation:none!important;
    transition:none!important;
    will-change:auto!important;
  }
  .fu,
  .title-reveal,
  .title-reveal::before,
  .title-reveal::after{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    clip-path:none!important;
    animation:none!important;
    transition:none!important;
    will-change:auto!important;
  }
  /* Los overlays fijos decorativos generaban repintados durante el desplazamiento táctil. */
  #cv,
  .grain{display:none!important}

  /* El carrusel de escritorio desaparece por completo en móvil. */
  .allies-sec .allies-marquee{display:none!important}

  /* Carrusel móvil nuevo, sin JavaScript y con dos grupos idénticos. */
  .mobile-allies{
    display:block;
    width:100vw;
    margin-left:calc(-1 * var(--gutter));
    padding:8px 0 18px;
    overflow:hidden;
    position:relative;
    opacity:1!important;
    visibility:visible!important;
  }
  .mobile-allies::before,
  .mobile-allies::after{
    content:"";
    position:absolute;
    z-index:3;
    top:0;
    bottom:0;
    width:clamp(18px,7vw,34px);
    pointer-events:none;
  }
  .mobile-allies::before{
    left:0;
    background:linear-gradient(90deg,var(--surface) 8%,transparent);
  }
  .mobile-allies::after{
    right:0;
    background:linear-gradient(-90deg,var(--surface) 8%,transparent);
  }
  .mobile-allies-viewport{
    width:100%;
    overflow:hidden;
    touch-action:pan-y pinch-zoom;
    contain:layout paint;
  }
  .mobile-allies-loop{
    display:flex;
    align-items:center;
    width:max-content;
    transform:translate3d(0,0,0);
    animation:mobileAlliesLoop 56s linear infinite;
    backface-visibility:hidden;
    will-change:transform;
  }
  .mobile-allies-set{
    display:flex;
    align-items:center;
    flex:none;
    gap:12px;
    padding-right:12px;
  }
  .mobile-ally-card{
    flex:0 0 clamp(142px,42vw,174px);
    width:clamp(142px,42vw,174px);
    height:98px;
    padding:12px 14px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
    border-radius:17px;
    border:1px solid rgba(255,255,255,.22);
    box-shadow:0 13px 28px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.42);
  }
  .mobile-ally-card--light{background:linear-gradient(145deg,#fbfaf6,#eeece3)}
  .mobile-ally-card--dark{background:linear-gradient(145deg,#242421,#151513)}
  .mobile-ally-card img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    opacity:1;
  }
  .mobile-ally-fallback{
    display:none;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    color:#171714;
    font-size:.68rem;
    font-weight:800;
    text-align:center;
  }
  .mobile-ally-card--dark .mobile-ally-fallback{color:#f5f1e7}
  @keyframes mobileAlliesLoop{
    from{transform:translate3d(0,0,0)}
    to{transform:translate3d(-50%,0,0)}
  }

  /* Footer completamente centrado en móvil y tablet. */
  footer{
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    padding:34px 24px 38px!important;
    gap:16px!important;
  }
  footer .fl-logo{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    margin:0 auto!important;
  }
  footer .fl-logo img{display:block;margin:0 auto!important}
  footer .fcopy{
    display:block!important;
    width:min(100%,430px)!important;
    margin:0 auto!important;
    text-align:center!important;
    line-height:1.55!important;
  }
  footer .flinks{
    width:100%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex-wrap:wrap!important;
    gap:12px 20px!important;
    margin:0 auto!important;
    text-align:center!important;
  }
}

@media(max-width:390px){
  .mobile-allies-loop{animation-duration:60s}
  .mobile-ally-card{
    flex-basis:148px;
    width:148px;
    height:94px;
  }
  footer{padding-inline:20px!important}
}

@media(max-width:960px) and (prefers-reduced-motion:reduce){
  .mobile-allies-loop{animation-play-state:paused!important;transform:none!important}
  .mobile-allies-viewport{overflow-x:auto;scrollbar-width:none}
  .mobile-allies-viewport::-webkit-scrollbar{display:none}
}