/* Pacífica Soluciones Digitales — estilos globales (vanilla CSS, sin framework) */


:root{
  --bg:           #001B3A;
  --bg-deep:      #000814;
  --bg-mid:       #022c5a;
  --ink:          #E8F1FA;
  --white:        #FFFFFF;
  --amber:        #F5B301;
  --amber-hover:  #FFD24A;
  --cyan:         #4FC3F7;
  --cyan-deep:    #65B2E8;
  --turquesa:     #3CBFAE;
  --naranja:      #E8762B;
  --azul:         #5B8FF9;

  --p-marca:           #062235;
  --p-estrategia:      #0a1a3d;
  --p-diseno:          #0a2540;
  --p-desarrollo:      #08172e;
  --p-automatizacion:  #04142a;

  --catalogo-bg:  #F4F1EA;
  --catalogo-ink: #101720;

  --font:         'Poppins', sans-serif;
}

*, *::before, *::after{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }
html{ background: var(--bg); overflow-x: clip; }
body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}
/* Nota: usamos overflow-x:clip (NO hidden) como red de seguridad contra scroll
   horizontal. A diferencia de overflow-x:hidden, clip NO fuerza overflow-y:auto
   implícito, así que body NO se convierte en contenedor de scroll y el
   position:sticky de los pilares/secciones sigue funcionando. El control de
   overflow horizontal se sigue haciendo localmente en cada sección
   (.hero, .pilar, .marquee-viewport), esto es solo un respaldo. */
img, video{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
button{ font-family: inherit; border:none; background:none; color:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p{ margin:0; }

/* Transición entre páginas: agua con olas — RÉPLICA EXACTA de lsce.com.
   El agua SUBE para cubrir (con la ola como línea de agua) y BAJA (drena) para revelar. */
.page-fade{ position:fixed; inset:0; z-index:9999; pointer-events:none; overflow:hidden; }
.pf-water{
  position:absolute; top:0; left:0; width:100%; height:100%;
  background: var(--bg);              /* agua: navy océano de Pacífica */
  transform: translateY(100%); will-change: transform;
  transition: transform 1.2s cubic-bezier(.4,0,.2,1);
}
/* con JS la página arranca cubierta → reveal sin parpadeo */
html.js .pf-water{ transform: translateY(0); }
/* estado abierto: el agua drena hacia abajo (translateY 122%), revelando */
.page-fade.is-open .pf-water{ transform: translateY(122%); }

/* olas (réplica de .water_wave / _back / _front de lsce) */
.pf-crest{ position:absolute; bottom:100%; width:200%; display:block; }
/* cresta trasera: cian de marca (la que "atrapa la luz"); delantera: igual que el agua */
.pf-crest-back{ fill: var(--cyan); width:300%; right:0; animation: pfWaveBack 2.8s linear infinite; }
.pf-crest-front{ fill: var(--bg); left:0; margin-bottom:-1px; animation: pfWaveFront 1.4s linear infinite; }
@keyframes pfWaveBack{ to{ transform: translateX(50%); } }
@keyframes pfWaveFront{ to{ transform: translateX(-50%); } }

/* logo centrado sobre el agua: "respira" mientras cubre y se desvanece al revelar.
   La animación pulsa el contenedor y el reveal desvanece la <img>; si ambos tocaran
   la misma propiedad, la animación ganaría en la cascada y el logo nunca se iría. */
.pf-logo{
  position:absolute; inset:0; z-index:3; display:grid; place-items:center;
  animation: pfCrossFade 2s cubic-bezier(.4,0,.2,1) infinite;
}
/* monograma vertical (viewBox 150×200): se dimensiona por alto */
.pf-logo img{ height: clamp(96px,13vh,150px); width:auto; display:block; transition: opacity .3s .4s; }
.page-fade.is-open .pf-logo img{ opacity:0; transition-delay:0s; }
/* pulso sutil: máximo 50% de opacidad */
@keyframes pfCrossFade{ 0%,100%{ opacity:.3; } 50%{ opacity:.5; } }

@media (prefers-reduced-motion: reduce){
  .pf-water{ transition:none; }
  .pf-crest-back, .pf-crest-front{ animation:none; }
  .pf-logo{ animation:none; }
}

.eyebrow{
  display:flex; align-items:center; gap:14px;
  font-size:11px; text-transform:uppercase; letter-spacing:.34em;
  color: rgba(232,241,250,.45);
}
.eyebrow .dot{ width:7px; height:7px; border-radius:50%; background: var(--amber); flex:none; }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  border-radius:999px; padding:15px 30px; font-size:15px; font-weight:600;
  transition: background-color .25s, color .25s, border-color .25s, transform .2s;
}
.btn-fill{ background: var(--amber); color:#0B0B0C; }
.btn-fill:hover{ background: var(--amber-hover); }
.btn-outline{ border:1px solid rgba(255,255,255,.2); color: var(--ink); }
.btn-outline:hover{ border-color: var(--amber); color: var(--amber); }

.chip{
  border-radius:999px; padding:9px 15px; font-size:12.5px; font-weight:500;
  border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color:#fff;
}

/* ---------- Header fijo ---------- */
.site-header{
  position:fixed; top:18px; left:50%; transform:translateX(-50%);
  z-index:130; width:min(1560px, calc(100vw - 40px));
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  pointer-events:none;
}
.site-header .brand-pill,
.site-header .actions{ pointer-events:auto; }
.brand-pill{
  display:flex; align-items:center; padding:14px 0;
}
.brand-logo{ height:30px; width:auto; opacity:.95; display:block; }
.actions{ display:flex; align-items:center; gap:10px; }
.btn-hablemos{
  border-radius:999px; padding:15px 28px; font-size:13.5px; font-weight:600;
  color:#00121f; background: var(--cyan); transition: background-color .3s;
}
.btn-hablemos:hover{ background:#6FD0FA; }
.menu-toggle{
  display:grid; place-items:center; width:52px; height:52px; border-radius:999px;
  border:1px solid rgba(255,255,255,.1); background: rgba(2,16,36,.7); backdrop-filter: blur(14px);
  color: rgba(232,241,250,.9);
}
.menu-toggle .bars{ display:flex; flex-direction:column; align-items:center; gap:5px; }
.menu-toggle .bars span{ display:block; width:18px; height:1.5px; border-radius:999px; background:currentColor; transition: transform .3s; }
.menu-toggle.is-open .bars span:nth-child(1){ transform: translateY(3.25px) rotate(45deg); }
.menu-toggle.is-open .bars span:nth-child(2){ transform: translateY(-3.25px) rotate(-45deg); }

/* ---------- Menú fullscreen ---------- */
.fullscreen-menu{
  position:fixed; inset:0; z-index:110; visibility:hidden; opacity:0;
  background:#021024;
  /* cierre: fade algo más largo para que la salida escalonada de los ítems termine */
  transition: opacity .6s ease, visibility .6s;
}
.fullscreen-menu::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(60% 55% at 78% 30%, rgba(245,179,1,.14) 0%, rgba(245,179,1,0) 70%);
}
.fullscreen-menu.is-open{ visibility:visible; opacity:1; transition: opacity .35s ease, visibility .35s; }
.fullscreen-menu nav{
  position:relative; height:100%; display:flex; flex-direction:column; justify-content:center; gap:8px;
  padding: 0 clamp(28px,7vw,140px);
}
.menu-row{ overflow:hidden; padding: clamp(2px,.6vh,8px) 0; }
.menu-row a{
  display:inline-flex; align-items:baseline; gap:20px;
  font-family: var(--font); font-weight:700;
  font-size: clamp(30px,6.6vw,86px); line-height:1.05; letter-spacing:-.035em;
  color: var(--ink);
  transform: translateY(118%) rotate(3deg); opacity:0;
  transform-origin: left bottom; will-change: transform, opacity;
  /* Salida: espejo de la entrada (mismo easing y orden por --i) pero más rápida */
  transition:
    transform .46s cubic-bezier(.5,0,.2,1) calc(var(--i,0) * .045s),
    opacity .34s ease calc(var(--i,0) * .045s),
    color .3s;
}
/* Entrada: revelado escalonado desde abajo, enmascarado por overflow del row */
.fullscreen-menu.is-open .menu-row a{
  transform: translateY(0) rotate(0deg); opacity:1;
  transition:
    transform .8s cubic-bezier(.16,1,.3,1) calc(var(--i,0) * .075s + .12s),
    opacity .6s ease calc(var(--i,0) * .075s + .12s),
    color .3s;
}
.menu-row a:hover{ color: var(--amber); }
.menu-row .num{ font-size: clamp(10px,1vw,13px); font-weight:500; letter-spacing:.28em; color: rgba(245,179,1,.7); }
.menu-row .label{ display:inline-block; }
@media (prefers-reduced-motion: reduce){
  .menu-row a, .fullscreen-menu.is-open .menu-row a{ transform:none; transition: opacity .3s ease, color .3s; }
}

/* ---------- Indicador de profundidad submarina (lateral derecho) ---------- */
.depth-nav{
  position:fixed; top:50%; right:clamp(14px,2.2vw,34px); transform:translateY(-50%);
  z-index:100; width:190px; height:min(60vh,600px); display:none; pointer-events:none;
}
@media (min-width:1024px){ .depth-nav{ display:block; } }
/* riel vertical con la escala de profundidad (más tenue hacia el fondo) */
.depth-track{
  position:absolute; right:0; top:0; bottom:0; width:2px;
  background: linear-gradient(to bottom, rgba(79,195,247,.55) 0%, rgba(79,195,247,.14) 45%, rgba(79,195,247,.04) 100%);
}
.depth-track::before{
  content:""; position:absolute; right:-4px; top:0; width:9px; height:100%;
  background: repeating-linear-gradient(to bottom, rgba(232,241,250,.22) 0 1px, transparent 1px 38px);
}
/* tramo recorrido: glow cian que desciende con el scroll */
.depth-progress{
  position:absolute; left:0; top:0; width:100%; height:calc(var(--p,0) * 100%);
  background: linear-gradient(to bottom, rgba(79,195,247,.9), rgba(79,195,247,.25));
  box-shadow: 0 0 10px rgba(79,195,247,.5);
}
/* la "sonda" (marcador que baja) */
.depth-marker{
  position:absolute; right:-4px; top:calc(var(--p,0) * 100%); width:10px; height:10px;
  border-radius:50%; background: var(--amber); transform:translateY(-50%);
  box-shadow: 0 0 16px 3px rgba(245,179,1,.5);
}
.depth-marker::before{
  content:""; position:absolute; top:50%; right:14px; width:20px; height:1px;
  background: rgba(245,179,1,.55); transform:translateY(-50%);
}
/* lectura (profundidad + sección) que sigue al marcador */
.depth-readout{
  position:absolute; right:24px; top:calc(var(--p,0) * 100%); transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:flex-end; gap:3px; text-align:right; white-space:nowrap;
}
.depth-section{
  font-size:10px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color: var(--amber);
  min-height:12px; opacity:0; transform:translateY(3px); transition: opacity .35s ease, transform .35s ease;
}
.depth-section:not(:empty){ opacity:1; transform:none; }
.depth-value{ font-size:12px; font-weight:700; letter-spacing:.06em; color: rgba(232,241,250,.8); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce){ .depth-section{ transition:none; } }

/* ---------- Hero ---------- */
.hero-spacer{ position:relative; }
.hero{
  position:relative; height:100dvh; width:100%; overflow:hidden; background:#001226;
}
.hero .hero-water{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(79,195,247,.22) 0%, transparent 70%),
    linear-gradient(180deg, #04355f 0%, #022c5a 28%, #001B3A 60%, #000814 100%);
}
.hero .hero-water::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:34%;
  background: linear-gradient(180deg, transparent 0%, rgba(0,8,20,.55) 60%, rgba(0,8,20,.95) 100%);
}
.hero-art{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:1; display:block;
}
.hero-art-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  opacity: 0; transition: opacity .4s ease;
}
.hero-art.is-ready .hero-art-canvas{ opacity: 1; }
.hero .veil{
  position:absolute; inset:0; pointer-events:none; z-index:3;
  background: radial-gradient(120% 90% at 50% 55%, rgba(0,8,20,0) 42%, rgba(0,8,20,.72) 100%);
}
.hero .veil-mobile{
  position:absolute; inset:0; pointer-events:none; display:none; z-index:3;
  background: linear-gradient(rgba(0,8,20,0) 30%, rgba(0,8,20,.55) 52%, rgba(0,8,20,.92) 72%, #000814 100%);
}
@media (max-width:1023px){ .hero .veil-mobile{ display:block; } }
.hero .stage{
  position:absolute; inset:0; display:grid; place-items:center; z-index:4;
  padding: 0 clamp(24px,7vw,140px); pointer-events:none;
}
.hero .stage-inner{ position:relative; height:100%; width:min(1560px,100%); }
.hero-phase{
  position:absolute; opacity:0; filter:blur(5px); transform:translateY(26px);
}
.hero-phase.intro{
  inset:0; display:grid; place-content:center; justify-items:center; gap:22px; text-align:center;
}
.hero-phase.intro .tiny{ font-size:12px; text-transform:uppercase; letter-spacing:.42em; color: rgba(232,241,250,.55); }
.hero-phase.intro .hint{ font-size:clamp(13px,1.1vw,15px); color: rgba(232,241,250,.35); }
.scroll-hint{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.scroll-hint .halo{
  position:relative; width:21px; height:34px; border-radius:999px; padding-top:6px;
  border:1px solid rgba(245,179,1,.45); background: rgba(245,179,1,.05); display:flex; justify-content:center;
  animation: gecScrollHalo 2.4s ease-out infinite;
}
.scroll-hint .halo span{ display:block; width:3px; height:5px; border-radius:999px; background:var(--amber); animation: gecScrollDot 2.4s cubic-bezier(.4,0,.2,1) infinite; }
.scroll-hint svg{ animation: gecScrollChevron 2.4s ease-in-out infinite; margin-bottom:-3px; }
.scroll-hint svg:nth-child(3){ animation-delay:.22s; }
@keyframes gecScrollHalo{ 0%,100%{opacity:.6} 50%{opacity:1} }
@keyframes gecScrollDot{ 0%{transform:translateY(0)} 50%{transform:translateY(10px)} 100%{transform:translateY(0)} }
@keyframes gecScrollChevron{ 0%,100%{opacity:.4; transform:translateY(0)} 50%{opacity:1; transform:translateY(3px)} }

.hero-phase.left{ top:50%; left:0; max-width:640px; padding-right:16px; }
.hero-phase.right{ top:44%; right:0; max-width:620px; padding-left:16px; text-align:right; }
.hero-phase.center{ top:22%; left:0; right:0; text-align:center; }
.hero-phase .big{
  font-size: clamp(26px,5.4vw,60px); line-height:1.08; font-weight:600; letter-spacing:-.02em; color: var(--ink);
}
.hero-phase.center .big{ font-size: clamp(30px,6.4vw,74px); line-height:1.04; font-weight:700; color:#fff; }
.hero-phase .big em{ font-style:normal; color: var(--amber); }

.hero-final{
  position:absolute; bottom:7%; left:0; width:100%;
  display:flex; flex-direction:column; align-items:flex-start; gap:18px; text-align:left;
  opacity:0; transform:translateY(26px); filter:blur(5px); pointer-events:auto;
}
@media (min-width:640px){ .hero-final{ width:72%; gap:24px; } }
@media (min-width:1024px){ .hero-final{ top:104px; bottom:6%; width:min(560px,46%); } }
.hero-final h1{
  font-size: clamp(30px,6vw,56px); line-height:1.04; font-weight:700; color:#fff; letter-spacing:-.03em;
}
.hero-final h1 span{ color: var(--amber); }
.hero-final p{ max-width:52ch; font-size: clamp(14px,1.1vw,17px); line-height:1.7; color: rgba(232,241,250,.74); }
.hero-final .ctas{ display:flex; flex-wrap:wrap; gap:12px; }
.hero-cta-block{ flex-direction:column; align-items:flex-start; gap:10px; }
.hero-cta-lead{ font-size:14px; font-weight:600; color: rgba(232,241,250,.72); letter-spacing:.01em; }
.hero-cta-block .btn-fill{ background: var(--cyan); color:#00121f; }
.hero-cta-block .btn-fill:hover{ background:#6FD0FA; }
.hero-stats{
  display:flex; flex-wrap:wrap; gap: clamp(20px, 2.4vw, 36px);
  padding-top:18px; border-top:1px solid rgba(255,255,255,.12);
  width:100%;
}
.hero-stat{ display:flex; flex-direction:column; gap:4px; }
.hero-stat-num{
  font-size: clamp(22px, 2.6vw, 32px); line-height:1; font-weight:800; color: var(--amber);
  letter-spacing:-.02em;
}
.hero-stat-lbl{ font-size:11px; text-transform:uppercase; letter-spacing:.18em; color: rgba(232,241,250,.55); }
.hero .bottom-fade{ position:absolute; left:0; right:0; bottom:0; height:120px; pointer-events:none; z-index:2; background: linear-gradient(rgba(0,8,20,0) 0%, var(--bg) 100%); }

/* ---------- Promesa de valor ---------- */
.promesa{ background: var(--bg); padding: clamp(90px,11vw,180px) clamp(24px,5vw,90px); }
.promesa .wrap{ max-width:1180px; margin:0 auto; display:grid; gap:44px; }
.promesa .headline{ font-size: clamp(24px,2.9vw,46px); line-height:1.24; font-weight:500; color: var(--ink); letter-spacing:-.02em; }
.promesa .cols{
  display:grid; gap:28px; padding-top:20px; border-top:1px solid rgba(255,255,255,.1);
  grid-template-columns: repeat(auto-fit,minmax(230px,1fr));
}
.promesa .col{ display:flex; flex-direction:column; gap:14px; }
.promesa .col-head{ display:flex; align-items:baseline; gap:10px; }
.promesa .col-num{ font-size:13px; font-weight:700; color: var(--amber); letter-spacing:.08em; }
.promesa .col-title{ font-size:clamp(17px,1.4vw,20px); font-weight:600; color: var(--ink); letter-spacing:-.01em; }
.promesa .cols .col p{ font-size:15px; line-height:1.75; font-weight:300; color: rgba(232,241,250,.6); }

/* ---------- Ecosistema (5 pilares apilados) ---------- */
.servicios{ background: var(--bg); padding: clamp(40px,6vw,90px) clamp(16px,3vw,44px) clamp(60px,7vw,120px); display:flex; flex-direction:column; gap: clamp(16px,2vw,28px); }
.servicios .head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:30px; padding: 0 clamp(8px,1.5vw,26px) clamp(20px,3vw,50px); }
.servicios .head h2{ max-width:22ch; font-size: clamp(28px,3.2vw,52px); line-height:1.06; font-weight:700; letter-spacing:-.03em; color: var(--ink); }

.pilar{
  position:relative; overflow:hidden; border-radius: clamp(24px,2.6vw,44px);
  min-height: 70vh;
}
@media (min-width:1024px){
  .pilar{ position:sticky; top: calc(50dvh - 46vh); min-height:92vh; }
}
.pilar-media{ position:relative; height:min(44vh,420px); min-height:300px; }
@media (min-width:1024px){ .pilar-media{ position:absolute; inset:0; height:auto; min-height:0; } }
.pilar-media img, .pilar-media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pilar-media .fade-mobile{ position:absolute; inset:0; pointer-events:none; }
@media (min-width:1024px){ .pilar-media .fade-mobile{ display:none; } }
.pilar-scrim{ position:absolute; inset:0; pointer-events:none; display:none; }
@media (min-width:1024px){ .pilar-scrim{ display:block; } }

.pilar-copy{
  position:relative; z-index:2; display:flex; flex-direction:column; gap:32px;
  padding: clamp(24px,4.4vw,88px); padding-top:8px;
}
@media (min-width:1024px){
  .pilar-copy{ min-height:92vh; width:56%; justify-content:space-between; gap:40px; padding-top: clamp(24px,4.4vw,88px); }
}
.pilar-copy .top-row{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.pilar-copy .top-row .label{ font-size:11px; text-transform:uppercase; letter-spacing:.34em; color: rgba(255,255,255,.55); }
.pilar-copy .top-row .num{ font-size:12px; font-weight:700; color: rgba(255,255,255,.55); }
.pilar-copy .title-block{ display:flex; flex-direction:column; gap:22px; }
.pilar-copy h3{ font-size: clamp(48px,7vw,124px); line-height:.92; font-weight:800; letter-spacing:-.045em; color:#fff; }
.pilar-copy .sub{ max-width:40ch; font-size: clamp(17px,1.6vw,26px); line-height:1.35; font-weight:500; letter-spacing:-.01em; color:#fff; }
.pilar-copy .desc{ max-width:48ch; font-size:15px; line-height:1.75; font-weight:300; color: rgba(232,241,250,.68); }
.pilar-copy .chips{ display:flex; max-width:640px; flex-wrap:wrap; gap:8px; }
.pilar-copy .cta-row{ display:flex; flex-direction:column; gap:22px; }
.btn-pilar-cta{
  align-self:flex-start; display:inline-flex; align-items:center; gap:10px; border-radius:999px;
  padding:15px 26px; font-size:14px; font-weight:600; background:#fff; color:#0a1a3d; transition: opacity .2s;
}
.btn-pilar-cta:hover{ opacity:.85; }

#p-marca{ background: var(--p-marca); z-index:1; }
#p-estrategia{ background: var(--p-estrategia); z-index:2; }
#p-diseno{ background: var(--p-diseno); z-index:3; }
#p-desarrollo{ background: var(--p-desarrollo); z-index:4; }
#p-automatizacion{ background: var(--p-automatizacion); z-index:5; }

/* ---------- Insights (antes Inside Your Brand) ---------- */
.insights{ position:relative; height:640vh; background:#001020; }
.insights-sticky{ position:sticky; top:0; height:100dvh; overflow:hidden; }
.insights-bg{ position:absolute; inset:0; opacity:0; transform:scale(1.1); will-change:transform,opacity; }
.insights-bg img{ width:100%; height:100%; object-fit:cover; filter:brightness(.42) saturate(.9); }
.insights-scrim{ position:absolute; inset:0; background: linear-gradient(rgba(0,8,20,.55) 0%, rgba(0,8,20,.25) 40%, rgba(0,8,20,.85) 100%); }
.insights-logo{ position:absolute; top: clamp(94px,11vh,120px); left: clamp(24px,5vw,90px); z-index:3; height: clamp(40px,3.6vw,56px); width:auto; border-radius:10px; box-shadow: 0 14px 36px rgba(0,0,0,.5); }
.insights-stage{ position:absolute; inset:0; display:grid; place-items:center; padding: 86px clamp(24px,5vw,90px) 0; }
.insights-grid{ display:grid; width:min(1560px,100%); align-items:center; gap: clamp(20px,4vw,70px); grid-template-columns:1fr; }
@media (min-width:768px){ .insights-grid{ grid-template-columns:1fr auto 1fr; } }
.insights-index{ display:none; flex-direction:column; gap:6px; }
@media (min-width:768px){ .insights-index{ display:flex; } }
.insights-index.right{ text-align:right; align-items:flex-end; }
.insights-index span{ font-size: clamp(13px,1.15vw,17px); font-weight:700; text-transform:uppercase; letter-spacing:.06em; color: rgba(232,241,250,.32); transition: color .5s; }
.insights-index span.is-active{ color:#fff; }
.insights-center{ display:flex; flex-direction:column; gap:6px; text-align:center; }
.insights-center h2{ font-size: clamp(38px,7vw,124px); line-height:.9; font-weight:400; color:#fff; letter-spacing:-.03em; }
.insights-rotator{ position:relative; height: clamp(40px,6.2vw,104px); overflow:hidden; }
.insights-rotator .word{
  position:absolute; inset:0; display:grid; place-items:center; opacity:0; transform:translateY(-90%);
  font-size: clamp(26px,5.2vw,86px); line-height:.9; font-weight:800; color: var(--amber); white-space:nowrap; letter-spacing:-.04em;
}
.insights-rotator .word.is-active{ opacity:1; transform:translateY(0); transition: opacity .5s, transform .5s; }
.insights-rotator .word.channel{ display:inline-flex; align-items:center; gap: clamp(10px,1.4vw,22px); }
.insights-rotator .word.channel .play{
  display:grid; place-items:center; width: clamp(30px,3.4vw,58px); height: clamp(30px,3.4vw,58px);
  border-radius:999px; background: var(--amber); color:#0B0B0C; font-size: clamp(11px,1.2vw,20px); padding-left:.12em;
}
.insights-paras{ position:relative; margin-top:14px; height:92px; }
.insights-paras p{ position:absolute; inset:0 0 auto 0; margin:0 auto; max-width:46ch; font-size:15px; line-height:1.7; font-weight:300; color: rgba(232,241,250,.7); opacity:0; transform:translateY(-16px); text-align:center; }
.insights-paras p.is-active{ opacity:1; transform:translateY(0); transition: opacity .5s, transform .5s; }
.progress-bar{ display:flex; align-items:center; gap:16px; }
.progress-bar .track{ position:relative; flex:1; height:1px; background: rgba(255,255,255,.15); }
.progress-bar .fill{ position:absolute; inset:0 auto 0 0; width:0%; background: var(--amber); }
.progress-bar .num{ font-size:12px; letter-spacing:.1em; }
.insights-progress{ position:absolute; bottom:8%; left:50%; transform:translateX(-50%); width:min(420px,70vw); display:flex; align-items:center; gap:16px; }

/* ---------- Valor integrado (6 fuerzas) ---------- */
.valor{ position:relative; height:520vh; background:#001020; }
.valor-sticky{ position:sticky; top:0; height:100dvh; display:flex; flex-direction:column; overflow:hidden; }
.valor-head{ padding: clamp(90px,10vh,130px) clamp(24px,5vw,90px) 0; }
.valor-track-wrap{ flex:1; min-height:0; display:flex; align-items:stretch; overflow:hidden; padding: clamp(8px,2vh,26px) 0; }
.valor-track{ display:flex; height:100%; gap: clamp(20px,2.4vw,44px); padding: 0 clamp(24px,5vw,90px); will-change:transform; }
.valor-card{ position:relative; height:100%; max-height:620px; min-height:0; width: clamp(300px,32vw,520px); flex:none; overflow:hidden; border-radius: clamp(20px,2vw,34px); border:1px solid rgba(255,255,255,.1); background:#021024; }
.valor-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.45) saturate(.85); }
.valor-card .scrim{ position:absolute; inset:0; background: linear-gradient(rgba(0,8,20,.15) 0%, rgba(0,8,20,.9) 100%); }
.valor-card .content{ position:relative; z-index:2; display:flex; height:100%; flex-direction:column; justify-content:space-between; padding: clamp(24px,2.4vw,42px); }
.valor-card .num{ font-size: clamp(64px,8vw,150px); line-height:.8; font-weight:800; color: rgba(255,255,255,.15); letter-spacing:-.06em; }
.valor-card .info{ display:flex; flex-direction:column; gap:12px; }
.valor-card .info .title{ font-size: clamp(30px,3.4vw,58px); line-height:1; font-weight:800; color:#fff; letter-spacing:-.035em; }
.valor-card .info .rule{ width:44px; height:2px; background: var(--amber); }
.valor-card .info .desc{ max-width:30ch; font-size:14.5px; line-height:1.65; font-weight:300; color: rgba(232,241,250,.78); }
.valor-progress{ display:flex; align-items:center; gap:16px; padding: 0 clamp(24px,5vw,90px) clamp(28px,4.5vh,56px); }

/* ---------- Portafolio (fan carousel) ---------- */
.portafolio{ position:relative; height:420vh; background: var(--bg); }
.portafolio-sticky{ position:sticky; top:0; display:flex; height:100dvh; flex-direction:column; justify-content:center; gap: clamp(24px,4vh,54px); overflow:hidden; padding-top: clamp(90px,10vh,130px); }
.portafolio-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px; padding: 0 clamp(24px,5vw,90px); }
.portafolio-head .ph-copy{ display:flex; flex-direction:column; gap:12px; }
.portafolio-head .breadcrumb{ font-size:11px; text-transform:uppercase; letter-spacing:.22em; font-weight:600; color: rgba(245,179,1,.9); }
.portafolio-head h2{ max-width:20ch; font-size: clamp(26px,3vw,50px); line-height:1.04; font-weight:700; color: var(--ink); letter-spacing:-.03em; }
.portafolio-head .sub{ max-width:36ch; font-size:13px; line-height:1.6; font-weight:300; color: rgba(232,241,250,.5); }
.fan-stage{ position:relative; display:grid; height:min(58vh,600px); place-items:center; }
.fan-card{
  position:absolute; aspect-ratio:9/15; width: clamp(190px,17vw,290px); overflow:hidden; border-radius: clamp(16px,1.6vw,28px);
  background:#021024; box-shadow:0 30px 80px rgba(0,0,0,.6); will-change:transform;
}
.fan-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.fan-card .scrim{ position:absolute; inset:0; background: linear-gradient(rgba(0,0,0,.1) 40%, rgba(0,0,0,.85) 100%); }
.fan-card .cap{ position:absolute; left:0; right:0; bottom:0; display:flex; flex-direction:column; gap:6px; padding: clamp(14px,1.4vw,22px); }
.fan-card .cap .kicker{ font-size:9.5px; text-transform:uppercase; letter-spacing:.26em; color: rgba(245,179,1,.9); }
.fan-card .cap .title{ font-size: clamp(15px,1.4vw,22px); line-height:1.1; font-weight:700; color:#fff; letter-spacing:-.02em; }
.portafolio-meta{ position:relative; z-index:200; display:flex; flex-direction:column; align-items:center; gap:14px; }
.portafolio-meta .caption{ min-height:48px; max-width:44ch; text-align:center; font-size:14.5px; line-height:1.7; font-weight:300; color: rgba(232,241,250,.65); }
.portafolio-dots{ display:flex; gap:8px; }
.portafolio-dots span{ width:7px; height:7px; border-radius:999px; background: rgba(255,255,255,.2); transition: transform .5s, background-color .5s; }
.portafolio-dots span.is-active{ background: var(--amber); transform:scale(1.4); }

/* ---------- Marquee de clientes ---------- */
.marquee-section{ overflow:hidden; background: var(--bg); padding: clamp(50px,6vw,100px) 0; }
.marquee-section .eyebrow{ padding: 0 clamp(24px,5vw,90px); margin-bottom:40px; }
.marquee-viewport{ overflow:hidden; }
.marquee-track{ display:flex; width:max-content; animation: gecMarquee 38s linear infinite; }
.marquee-group{ display:flex; gap: clamp(40px,5vw,88px); padding-right: clamp(40px,5vw,88px); }
.marquee-group span{ font-size: clamp(20px,2.2vw,34px); font-weight:600; white-space:nowrap; letter-spacing:-.02em; color: rgba(232,241,250,.3); }
@keyframes gecMarquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- El océano digital es vasto (narrativa) ---------- */
.oceano{ position:relative; background: var(--bg); padding: clamp(80px,10vw,160px) clamp(24px,5vw,90px); text-align:center; }
.oceano .wrap{ max-width:880px; margin:0 auto; display:grid; gap: clamp(18px, 2vw, 28px); justify-items:center; }
.oceano .eyebrow{ justify-content:center; }
.oceano h2{ font-size: clamp(28px,4vw,52px); line-height:1.1; font-weight:700; color: var(--ink); letter-spacing:-.03em; }
.oceano .lead{ font-size: clamp(17px,1.6vw,22px); line-height:1.5; font-weight:500; color: rgba(232,241,250,.85); }
.oceano p{ max-width:64ch; font-size: clamp(14.5px, 1.2vw, 16.5px); line-height:1.7; font-weight:300; color: rgba(232,241,250,.62); }
.oceano .ctas{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }

/* ---------- Testimonios ---------- */
.testimonios{ position:relative; background: var(--bg); padding: clamp(20px,3vw,50px) clamp(24px,5vw,90px) clamp(70px,8vw,140px); }
.testimonios .wrap{ margin:0 auto; max-width:1560px; display:flex; flex-direction:column; gap: clamp(32px,4vw,64px); }
.testimonios .head{ display:flex; flex-direction:column; gap:16px; }
.testimonios .head h2{ max-width:20ch; font-size: clamp(26px,3vw,50px); line-height:1.06; font-weight:700; color: var(--ink); letter-spacing:-.03em; }
.testi-grid{ display:grid; gap: clamp(14px,1.6vw,24px); grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); }
.testi-card{
  display:flex; flex-direction:column; justify-content:space-between; gap:28px;
  border-radius: clamp(18px,1.8vw,28px); border:1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03);
  padding: clamp(24px,2.4vw,38px); transition: border-color .5s, background-color .5s;
}
.testi-card:hover{ border-color: rgba(245,179,1,.3); background: rgba(245,179,1,.04); }
.testi-card .quote-mark{ font-size:42px; line-height:1; color: rgba(245,179,1,.55); font-weight:800; }
.testi-card blockquote{ margin:0; font-size:15.5px; line-height:1.7; font-weight:300; color: rgba(232,241,250,.78); }
.testi-card figcaption{ display:flex; align-items:center; gap:14px; border-top:1px solid rgba(255,255,255,.08); padding-top:20px; }
.testi-card .avatar{ display:grid; place-items:center; flex:none; width:40px; height:40px; border-radius:999px; font-size:12px; font-weight:700; color:#0B0B0C; background: var(--amber); letter-spacing:.02em; }
.testi-card .who{ display:flex; flex-direction:column; }
.testi-card .who .role{ font-size:14px; font-weight:600; color:#fff; }
.testi-card .who .brand{ font-size:12.5px; font-weight:300; color: rgba(232,241,250,.55); }

/* ---------- Familia Pacífica ---------- */
.ecosistema{ position:relative; height:400vh; background:#000814; }
.ecosistema-sticky{ position:sticky; top:0; display:flex; height:100dvh; flex-direction:column; overflow:hidden; }
.ecosistema-sticky canvas{ position:absolute; inset:0; width:100%; height:100%; }
.ecosistema-scrim{ position:absolute; inset:0; opacity:.35; background: radial-gradient(110% 85% at 50% 45%, rgba(0,8,20,.18) 0%, rgba(0,8,20,.62) 62%, rgba(0,8,20,.95) 100%); }
.ecosistema-content{ position:relative; z-index:2; display:flex; min-height:0; flex:1; flex-direction:column; justify-content:flex-start; padding: clamp(90px,12dvh,150px) clamp(24px,5vw,90px) 0; }
.ecosistema-content .eyebrow{ color: rgba(232,241,250,.65); }
.ecosistema-content h2{ margin-top: clamp(10px,2dvh,22px); max-width:24ch; font-size: clamp(22px,2.6vw,44px); line-height:1.08; font-weight:700; color:#fff; letter-spacing:-.03em; }
.ecosistema-progress{ position:relative; z-index:3; display:flex; flex:none; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; padding: 0 clamp(24px,5vw,90px) clamp(26px,4dvh,44px); }
.ecosistema-progress .track-wrap{ display:flex; max-width:420px; min-width:220px; flex:1; align-items:center; gap:14px; }

/* ---------- Contacto ---------- */
.contacto{ position:relative; overflow:hidden; background:#001020; }
@media (min-width:1024px){ .contacto{ display:flex; min-height:86vh; align-items:center; padding: clamp(70px,9vw,150px) clamp(24px,5vw,90px); } }
.contacto-media{ position:relative; height:min(44vh,420px); min-height:300px; }
@media (min-width:1024px){ .contacto-media{ position:absolute; inset:0; height:auto; min-height:0; } }
.contacto-media img, .contacto-media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; }
.contacto-media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, rgba(0,8,20,.4) 0%, rgba(0,8,20,.85) 100%);
}
.contacto-grid{ position:relative; z-index:2; margin:0 auto; display:grid; width:100%; max-width:1560px; align-items:center; gap: clamp(32px,5vw,80px); padding: 8px clamp(24px,5vw,90px) clamp(56px,9vw,150px); }
@media (min-width:1024px){ .contacto-grid{ grid-template-columns:1.05fr .95fr; padding:0; } }
.contacto-copy{ display:flex; flex-direction:column; gap: clamp(22px,3vw,40px); }
.contacto-copy h2{ max-width:20ch; font-size: clamp(32px,4.6vw,84px); line-height:1.02; font-weight:800; color:#fff; letter-spacing:-.04em; }
.contacto-copy h2 span{ color: var(--amber); }
.contacto-copy .ctas{ display:flex; flex-wrap:wrap; gap:12px; }

/* ---------- Footer ---------- */
.site-footer{ border-top:1px solid rgba(255,255,255,.07); background:#000814; padding: clamp(44px,5vw,80px) clamp(24px,5vw,90px) 40px; }
.site-footer .wrap{ margin:0 auto; max-width:1560px; display:grid; gap: clamp(28px,4vw,70px); position:relative; }
@media (min-width:768px){ .site-footer .wrap{ grid-template-columns: 1.4fr repeat(3,minmax(0,1fr)); } }
.footer-brand{ display:flex; flex-direction:column; gap:24px; }
/* El SVG del logo trae viewBox pero no width/height, así que con width:auto se
   estiraba a todo el ancho de la columna. Controlamos el ancho (mantiene el aspecto
   500:120 con height:auto) y lo alineamos a la izquierda. */
.footer-logo{ width: clamp(180px,19vw,240px); height:auto; display:block; align-self:flex-start; }
.footer-brand .tag{ max-width:34ch; font-size:13.5px; line-height:1.7; font-weight:300; color: rgba(232,241,250,.5); }
.footer-brand address{ display:flex; flex-direction:column; gap:6px; font-style:normal; font-size:13.5px; line-height:1.7; color: rgba(232,241,250,.62); }
.footer-brand address a:hover{ color: var(--amber); }
.social-row{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.social-row a{
  display:grid; place-items:center; width:40px; height:40px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: rgba(232,241,250,.7);
  transition: transform .3s, border-color .3s, background-color .3s, color .3s;
}
.social-row a:hover{ transform:translateY(-2px); border-color: var(--amber); background: rgba(245,179,1,.12); color: var(--amber); }
.footer-col{ display:flex; flex-direction:column; gap:12px; }
.footer-col .head{ font-size:11px; text-transform:uppercase; letter-spacing:.28em; color: rgba(232,241,250,.4); }
.footer-col a{ font-size:14px; color: rgba(232,241,250,.66); transition: color .3s; }
.footer-col a:hover{ color: var(--amber); }


.footer-bottom{ margin: 52px auto 0; max-width:1560px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:18px; border-top:1px solid rgba(255,255,255,.06); padding-top:22px; }
.footer-bottom span{ font-size:12px; color: rgba(232,241,250,.36); }

/* ---------- Drawer / módulo Nuestra Metodología ---------- */
.drawer{
  position:fixed; inset:0; z-index:150; overflow-y:auto; background:#021024;
  transform: translateX(100%); opacity:0; visibility:hidden;
  transition: transform .52s cubic-bezier(.65,0,.35,1), opacity .52s, visibility 0s .52s;
  overscroll-behavior: contain; box-shadow: -40px 0 120px rgba(0,0,0,.7);
}
.drawer.is-open{ transform: translateX(0); opacity:1; visibility:visible; transition: transform .52s cubic-bezier(.65,0,.35,1), opacity .52s; }
.drawer-topbar{ position:sticky; top:0; z-index:50; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid rgba(255,255,255,.08); background: rgba(2,16,36,.92); backdrop-filter: blur(14px); padding:14px clamp(20px,4vw,40px); }
.drawer-back{ display:inline-flex; align-items:center; gap:10px; border-radius:999px; border:1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.04); padding:10px 18px 10px 14px; font-size:13px; font-weight:500; color:#E8F1FA; transition: border-color .2s, color .2s; }
.drawer-back:hover{ border-color: var(--amber); color: var(--amber); }
.drawer-badge{ display:none; align-items:center; gap:12px; }
@media (min-width:768px){ .drawer-badge{ display:flex; } }
.drawer-badge .g{ display:grid; place-items:center; width:30px; height:30px; border-radius:9px; font-size:13px; font-weight:800; color:#10131A; background: linear-gradient(135deg, var(--amber), var(--naranja)); }
.drawer-badge .name{ font-size:14px; font-weight:700; letter-spacing:-.01em; color:#E8F1FA; }
.drawer-badge .pilares{ border-left:1px solid rgba(255,255,255,.15); padding-left:12px; font-size:11px; text-transform:uppercase; letter-spacing:.14em; color: rgba(232,241,250,.5); }
.drawer-cta{ display:none; border-radius:999px; padding:10px 18px; font-size:13px; font-weight:700; color:#10131A; background: var(--amber); transition: background-color .2s; }
@media (min-width:640px){ .drawer-cta{ display:inline-block; } }
.drawer-cta:hover{ background:#FFD25E; }

.pac-hero{ position:relative; padding: clamp(56px,7vw,84px) clamp(20px,4vw,40px) clamp(64px,8vw,96px); background: radial-gradient(1100px 620px at 12% 8%, #0a2540 0%, #022c5a 42%, #021024 100%); overflow:hidden; }
.pac-hero .glow{ position:absolute; inset:0; pointer-events:none; background: radial-gradient(600px 380px at 78% 62%, rgba(245,179,1,.18), transparent 70%); animation: glowPulse 7s ease-in-out infinite; }
@keyframes glowPulse{ 0%,100%{ opacity:.6 } 50%{ opacity:1 } }
.pac-hero .grid{ position:relative; margin:0 auto; max-width:1220px; display:grid; align-items:center; gap: clamp(32px,5vw,56px); }
@media (min-width:1024px){ .pac-hero .grid{ grid-template-columns:1.05fr .95fr; } }
.pac-badge{ display:inline-flex; align-items:center; gap:10px; margin-bottom:24px; border-radius:999px; padding:7px 14px 7px 8px; background: rgba(245,179,1,.12); border:1px solid rgba(245,179,1,.35); }
.pac-badge .dot{ width:7px; height:7px; border-radius:999px; background: var(--amber); box-shadow: 0 0 0 4px rgba(245,179,1,.2); }
.pac-badge span{ font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.16em; color: var(--amber); }
.pac-hero .pac-title{ margin:0 0 20px; font-size: clamp(56px,9vw,92px); line-height:.92; font-weight:800; color:#fff; letter-spacing:-.035em; }
.pac-hero .pac-title .grad{ background: linear-gradient(120deg, var(--amber) 20%, var(--turquesa) 90%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.pac-hero .subtitle{ margin:0 0 20px; max-width:20ch; font-size: clamp(21px,2.6vw,27px); line-height:1.3; font-weight:600; color:#fff; letter-spacing:-.02em; }
.pac-hero p.lead{ margin:0 0 32px; max-width:46ch; font-size:16px; line-height:1.7; color: rgba(232,241,250,.65); }
.pac-hero p.lead strong{ font-weight:600; }
.pac-hero p.lead strong.strategy{ color: var(--amber); }
.pac-hero p.lead strong.build{ color: var(--turquesa); }
.pac-hero .ctas{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-bottom:44px; }
.pac-cta-primary{ display:inline-flex; align-items:center; gap:10px; border-radius:999px; padding:16px 28px; font-size:15px; font-weight:700; color:#10131A; background: var(--amber); box-shadow:0 14px 34px rgba(245,179,1,.28); transition: transform .2s; }
.pac-cta-primary:hover{ transform:translateY(-2px); }
.pac-cta-outline{ display:inline-flex; align-items:center; gap:10px; border-radius:999px; border:1px solid rgba(255,255,255,.25); padding:15px 24px; font-size:15px; font-weight:600; color:#E8F1FA; transition: background-color .2s; }
.pac-cta-outline:hover{ background: rgba(255,255,255,.08); }
.pac-stats{ display:grid; max-width:520px; grid-template-columns: repeat(3,1fr); gap:16px; }
.pac-stat{ border-radius:16px; padding:16px 18px; }
.pac-stat .val{ font-size:32px; line-height:1; font-weight:800; }
.pac-stat .lbl{ margin-top:6px; font-size:12px; color: rgba(232,241,250,.6); }
.pac-stat.turquesa{ background: rgba(60,191,174,.08); border:1px solid rgba(60,191,174,.22); }
.pac-stat.turquesa .val{ color: var(--turquesa); }
.pac-stat.dorado{ background: rgba(245,179,1,.08); border:1px solid rgba(245,179,1,.22); }
.pac-stat.dorado .val{ color: var(--amber); }
.pac-stat.naranja{ background: rgba(232,118,43,.08); border:1px solid rgba(232,118,43,.22); }
.pac-stat.naranja .val{ color: var(--naranja); }
.pac-whale{ position:relative; display:grid; place-items:center; }
.pac-whale .glow-circle{ position:absolute; width:70%; aspect-ratio:1; border-radius:999px; background: radial-gradient(circle, rgba(79,195,247,.22), transparent 65%); filter:blur(10px); pointer-events:none; }
.pac-whale .frame{ position:relative; width:100%; max-width:560px; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 16%, #000 84%, transparent 100%), linear-gradient(transparent 0%, #000 12%, #000 86%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, #000 16%, #000 84%, transparent 100%), linear-gradient(transparent 0%, #000 12%, #000 86%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; }
.pac-whale .frame img, .pac-whale .frame video{ width:100%; display:block; }
.pac-whale .frame video{ position:absolute; inset:0; height:100%; object-fit:cover; }
.whale-placeholder{
  width:100%; aspect-ratio: 5/4; border-radius: clamp(20px, 2vw, 30px);
  border:1px dashed rgba(79,195,247,.35);
  background: radial-gradient(60% 50% at 50% 50%, rgba(79,195,247,.1) 0%, transparent 70%);
  display:grid; place-items:center;
}
.whale-placeholder span{
  font-size:11px; text-transform:uppercase; letter-spacing:.28em; color: rgba(79,195,247,.6);
  padding:14px 20px; text-align:center;
}
.pac-whale .caption{ position:absolute; bottom:6px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:10px; border-radius:999px; border:1px solid rgba(255,255,255,.15); background: rgba(2,16,36,.82); padding:10px 18px; white-space:nowrap; backdrop-filter: blur(10px); }
.pac-whale .caption .dot{ width:8px; height:8px; border-radius:999px; background: var(--turquesa); }
.pac-whale .caption span:last-child{ font-size:12.5px; font-weight:600; color:#E8F1FA; }

.pac-pilares{ border-top:1px solid rgba(255,255,255,.07); background:#021024; padding: clamp(56px,7vw,88px) clamp(20px,4vw,40px); }
.pac-pilares .wrap{ margin:0 auto; max-width:1220px; }
.pac-pilares .head{ margin-bottom:40px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:32px; }
.pac-pilares .eyebrow-line{ margin-bottom:14px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.18em; color: var(--amber); }
.pac-pilares h2{ font-size: clamp(30px,4vw,46px); line-height:1.05; font-weight:700; color:#fff; letter-spacing:-.03em; }
.pac-pilares .sub{ max-width:40ch; font-size:15px; line-height:1.65; color: rgba(232,241,250,.6); }
.pilares-cards{ display:grid; gap:26px; }
@media (min-width:768px){ .pilares-cards{ grid-template-columns:1fr 1fr; } }
.pilar-card{ position:relative; overflow:hidden; border-radius:26px; padding: 38px 36px 34px; transition: transform .25s; }
.pilar-card:hover{ transform:translateY(-4px); }
.pilar-card .circle{ position:absolute; right:-40px; bottom:-50px; width:190px; height:190px; border-radius:999px; }
.pilar-card.strategy{ color:#10131A; background: linear-gradient(150deg, #FFC935, #F5B301 55%, #E8A200); }
.pilar-card.strategy .circle{ border:14px solid rgba(16,19,26,.08); }
.pilar-card.build{ background: linear-gradient(150deg, #154A63, #13314F 60%, #0E2438); border:1px solid rgba(60,191,174,.3); }
.pilar-card.build .circle{ border:14px solid rgba(60,191,174,.09); }
.pilar-card .kicker{ margin-bottom:16px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.2em; }
.pilar-card.build .kicker{ color: var(--turquesa); }
.pilar-card h3{ margin-bottom:14px; font-size: clamp(30px,4vw,42px); font-weight:800; letter-spacing:-.03em; }
.pilar-card.build h3{ color:#fff; }
.pilar-card p{ margin-bottom:24px; max-width:34ch; font-size:15.5px; line-height:1.6; }
.pilar-card.strategy p{ font-weight:500; }
.pilar-card.build p{ color: rgba(232,241,250,.72); }
.pilar-card .tags{ display:flex; flex-wrap:wrap; gap:8px; position:relative; }
.pilar-card.strategy .tags span{ border-radius:999px; background: rgba(16,19,26,.12); padding:7px 14px; font-size:12.5px; font-weight:600; }
.pilar-card.build .tags span{ border-radius:999px; background: rgba(60,191,174,.14); color:#7FE0D3; padding:7px 14px; font-size:12.5px; font-weight:600; }

.pac-ruta{ padding: clamp(60px,7vw,92px) clamp(20px,4vw,40px); background: linear-gradient(#021024, #0a2540 40%, #021024); }
.pac-ruta .wrap{ margin:0 auto; max-width:1220px; }
.pac-ruta .head{ margin:0 auto 56px; max-width:640px; text-align:center; }
.pac-ruta .eyebrow-line{ margin-bottom:14px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.18em; color: var(--turquesa); }
.pac-ruta h2{ margin-bottom:16px; font-size: clamp(30px,4vw,46px); line-height:1.05; font-weight:700; color:#fff; letter-spacing:-.03em; }
.pac-ruta .sub{ font-size:15.5px; line-height:1.7; color: rgba(232,241,250,.62); }
.ruta-progress{ position:relative; margin-bottom:26px; height:4px; border-radius:999px; background: rgba(255,255,255,.08); overflow:hidden; }
.ruta-progress .fill{ position:absolute; inset:0; border-radius:999px; background: linear-gradient(90deg, var(--turquesa), var(--amber) 34%, var(--naranja) 67%, var(--azul)); }
.fases-grid{ display:grid; gap:20px; grid-template-columns:1fr; }
@media (min-width:640px){ .fases-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1280px){ .fases-grid{ grid-template-columns: repeat(4,1fr); } }
.fase-card{ position:relative; border-radius:22px; border:1px solid rgba(255,255,255,.08); background:#021024; padding: 26px 24px 28px; transition: transform .25s, background-color .25s; }
.fase-card:hover{ transform:translateY(-4px); background:#06182a; }
.fase-card.descubrir{ border-top:3px solid var(--turquesa); }
.fase-card.disenar{ border-top:3px solid var(--amber); }
.fase-card.construir{ border-top:3px solid var(--naranja); }
.fase-card.escalar{ border-top:3px solid var(--azul); }
.fase-card .top{ margin-bottom:16px; display:flex; align-items:center; gap:12px; }
.fase-card .top .n{ font-size:34px; line-height:1; font-weight:800; }
.fase-card.descubrir .n{ color: var(--turquesa); }
.fase-card.disenar .n{ color: var(--amber); }
.fase-card.construir .n{ color: var(--naranja); }
.fase-card.escalar .n{ color: var(--azul); }
.fase-card .top .name{ font-size:18px; font-weight:700; color:#fff; letter-spacing:-.01em; }
.fase-card .desc{ margin-bottom:20px; min-height:66px; font-size:14px; line-height:1.6; color: rgba(232,241,250,.62); }
.fase-card .rule{ margin-bottom:18px; height:1px; background: rgba(255,255,255,.08); }
.fase-card .programs{ display:flex; flex-direction:column; gap:10px; }
.fase-card .program{ display:flex; align-items:center; gap:10px; }
.fase-card .program .pilar-tag{ border-radius:6px; padding:4px 8px; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; }
.fase-card .program .pilar-tag.strategy{ background: rgba(245,179,1,.16); color: var(--amber); }
.fase-card .program .pilar-tag.build{ background: rgba(60,191,174,.16); color:#7FE0D3; }
.fase-card .program .name{ font-size:13.5px; font-weight:500; color: rgba(232,241,250,.88); }

.pac-catalogo{ padding: clamp(60px,7vw,96px) clamp(20px,4vw,40px) clamp(64px,8vw,100px); color: var(--catalogo-ink); background: var(--catalogo-bg); }
.pac-catalogo .wrap{ margin:0 auto; max-width:1220px; }
.pac-catalogo .head{ margin-bottom:32px; display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:40px; }
.pac-catalogo .eyebrow-line{ margin-bottom:14px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.18em; color: var(--naranja); }
.pac-catalogo h2{ margin-bottom:14px; font-size: clamp(30px,4vw,48px); line-height:1.03; font-weight:700; letter-spacing:-.035em; color:#101720; }
.pac-catalogo .sub{ max-width:52ch; font-size:16px; line-height:1.65; color: rgba(20,24,31,.62); }

.catalogo-card{ position:relative; margin:0 auto; max-width:860px; overflow:hidden; border-radius: clamp(20px,2.4vw,30px); border:1px solid rgba(20,24,31,.1); background:#fff; padding: clamp(30px,4vw,48px) clamp(24px,4vw,54px); box-shadow:0 26px 60px rgba(16,23,32,.1); }
.catalogo-card .top-strip{ position:absolute; inset:0 0 auto 0; height:5px; background: var(--turquesa); }
.catalogo-card .intro{ margin-bottom:32px; display:flex; flex-direction:column; gap:12px; }
.badge-lock{ display:inline-flex; width:fit-content; align-items:center; gap:8px; border-radius:8px; padding:6px 12px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.16em; background: rgba(60,191,174,.13); color:#0F6F63; }
.catalogo-card h3{ font-size: clamp(22px,2.8vw,32px); line-height:1.14; font-weight:700; letter-spacing:-.03em; color:#101720; }
.catalogo-card .desc{ max-width:58ch; font-size:15px; line-height:1.65; color: rgba(20,24,31,.62); }

.lead-form{ display:flex; flex-direction:column; gap:20px; }
.form-grid-2{ display:grid; gap:20px; }
@media (min-width:640px){ .form-grid-2{ grid-template-columns:1fr 1fr; } }
.field{ display:flex; flex-direction:column; gap:6px; }
.field .field-label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color: rgba(20,24,31,.5); }
.field input, .field select{ width:100%; border-radius:12px; border:1px solid rgba(20,24,31,.14); background:#fff; padding:12px 16px; font-size:14.5px; color:#101720; outline:none; transition: border-color .2s; }
.field input::placeholder{ color: rgba(20,24,31,.38); }
.field input:focus, .field select:focus{ border-color:#101720; }
.field select{ cursor:pointer; }
.tel-row{ display:flex; gap:10px; }
.tel-row select{ width:136px; flex:none; }
.form-actions{ margin-top:4px; display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
.form-submit{ display:inline-flex; align-items:center; gap:10px; border-radius:999px; border:0; padding:16px 32px; font-size:15px; font-weight:700; color:#10131A; background: var(--amber); transition: transform .2s; }
.form-submit:hover{ transform:translateY(-2px); }
.form-note{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color: rgba(20,24,31,.5); }

.puertas-layout{ display:none; margin-top:22px; align-items:flex-start; gap:22px; grid-template-columns:340px 1fr; }
.puertas-layout.is-active{ display:grid; }
.puertas-list{ display:flex; flex-direction:column; gap:10px; }
.puertas-list .heading{ padding: 4px 6px 8px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.16em; color: rgba(20,24,31,.42); }
.puerta-btn{ display:flex; align-items:center; gap:14px; border-radius:16px; padding:15px 16px; text-align:left; background: rgba(255,255,255,.45); border:1px solid rgba(20,24,31,.08); transition: transform .2s, background-color .2s, border-color .2s; }
.puerta-btn:hover{ transform:translateX(3px); }
.puerta-btn.is-active{ background:#fff; border-color: var(--turquesa); box-shadow:0 12px 26px rgba(16,23,32,.12); }
.puerta-btn .letter{ display:grid; place-items:center; flex:none; width:34px; height:34px; border-radius:11px; font-size:13px; font-weight:800; background: rgba(20,24,31,.07); color: rgba(20,24,31,.55); }
.puerta-btn.is-active .letter{ background: var(--turquesa); color:#10131A; }
.puerta-btn .txt{ display:flex; min-width:0; flex-direction:column; gap:3px; }
.puerta-btn .txt .label{ font-size:14.5px; font-weight:600; letter-spacing:-.01em; color: rgba(20,24,31,.72); }
.puerta-btn.is-active .txt .label{ color:#101720; }
.puerta-btn .txt .meta{ font-size:12px; color: rgba(20,24,31,.5); }

.puerta-detail{ position:relative; overflow:hidden; border-radius:26px; border:1px solid rgba(20,24,31,.08); background:#fff; padding: 40px clamp(22px,3vw,40px) 36px; box-shadow:0 26px 60px rgba(16,23,32,.09); }
.puerta-detail .top-strip{ position:absolute; inset:0 0 auto 0; height:5px; background: var(--turquesa); }
.puerta-detail .tags{ margin-bottom:16px; display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.puerta-detail .tag-badge{ border-radius:8px; padding:6px 11px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.16em; background: rgba(60,191,174,.133); color: var(--turquesa); }
.puerta-detail .tag-fase{ font-size:12.5px; font-weight:500; color: rgba(20,24,31,.5); }
.puerta-detail h3{ margin-bottom:14px; font-size: clamp(24px,3vw,34px); line-height:1.12; font-weight:700; letter-spacing:-.03em; color:#101720; }
.puerta-detail .lead{ margin-bottom:28px; max-width:60ch; font-size:16px; line-height:1.65; color: rgba(20,24,31,.66); }
.ruta-sugerida{ margin-bottom:26px; border-radius:18px; background:#F7F5F0; padding:22px; }
.ruta-sugerida .heading{ margin-bottom:16px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.16em; color: rgba(20,24,31,.42); }
.ruta-chips{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.ruta-chip{ display:inline-flex; align-items:center; gap:10px; border-radius:999px; border:1px solid rgba(20,24,31,.1); background:#fff; padding:10px 15px; font-size:13.5px; font-weight:600; color:#101720; }
.ruta-chip .dot{ width:8px; height:8px; border-radius:999px; }
.ruta-arrow{ font-size:15px; color: rgba(20,24,31,.3); }
.puerta-cols{ display:grid; gap:26px; }
@media (min-width:768px){ .puerta-cols{ grid-template-columns:1fr 1fr; } }
.porque-lista{ display:flex; flex-direction:column; gap:12px; }
.porque-item{ display:flex; align-items:flex-start; gap:12px; }
.porque-item .bullet{ margin-top:6px; width:6px; height:6px; flex:none; border-radius:999px; background: var(--turquesa); }
.porque-item span:last-child{ font-size:14.5px; line-height:1.55; color: rgba(20,24,31,.78); }
.resumen-box{ border-radius:18px; padding:22px 24px; background: rgba(60,191,174,.08); }
.resumen-box .heading{ margin-bottom:14px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.16em; color: rgba(20,24,31,.45); }
.resumen-item{ margin-bottom:12px; }
.resumen-item:last-child{ margin-bottom:0; }
.resumen-item .k{ font-size:14px; font-weight:600; color:#101720; }
.resumen-item .v{ margin-top:2px; font-size:13px; line-height:1.5; color: rgba(20,24,31,.6); }
.puerta-footer{ margin-top:30px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid rgba(20,24,31,.08); padding-top:24px; }
.puerta-footer .note{ max-width:52ch; font-size:13.5px; color: rgba(20,24,31,.55); }
.puerta-footer .cta{ display:inline-flex; align-items:center; gap:8px; border-radius:999px; padding:13px 22px; font-size:14px; font-weight:700; white-space:nowrap; color:#101720; background: var(--amber); transition: background-color .2s; }
.puerta-footer .cta:hover{ background:#FFD25E; }

.pac-impacto{ background:#021024; padding:42px clamp(20px,4vw,40px) 46px; }
.impacto-banner{ margin:0 auto; display:flex; max-width:1120px; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:26px; border-radius:20px; padding:22px 26px; background: linear-gradient(100deg, rgba(60,191,174,.1), rgba(19,49,79,.32)); border:1px solid rgba(60,191,174,.22); }
.impacto-left{ display:flex; align-items:center; gap:16px; }
.impacto-icon{ display:grid; place-items:center; flex:none; width:42px; height:42px; border-radius:13px; font-size:19px; background: rgba(245,179,1,.16); color: var(--amber); }
.impacto-left .title{ font-size:18px; font-weight:700; color:#fff; letter-spacing:-.015em; }
.impacto-left .sub{ margin-top:4px; font-size:13.5px; color: rgba(232,241,250,.58); }
.impacto-cta{ display:inline-flex; align-items:center; gap:8px; border-radius:999px; border:0; padding:13px 22px; font-size:13.5px; font-weight:700; color:#10131A; background: var(--amber); transition: transform .2s; }
.impacto-cta:hover{ transform:translateY(-2px); }

.pac-agendar{ padding: clamp(60px,7vw,96px) clamp(20px,4vw,40px) clamp(68px,8vw,104px); color:#10131A; background: var(--amber); }
.pac-agendar .grid{ margin:0 auto; display:grid; max-width:1000px; align-items:center; gap:48px; }
@media (min-width:1024px){ .pac-agendar .grid{ grid-template-columns:1.2fr .8fr; } }
.pac-agendar .eyebrow-line{ margin-bottom:16px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.18em; opacity:.6; }
.pac-agendar h2{ margin-bottom:18px; font-size: clamp(34px,5vw,52px); line-height:1; font-weight:800; letter-spacing:-.035em; }
.pac-agendar p{ margin-bottom:30px; max-width:44ch; font-size:17px; line-height:1.6; font-weight:500; }
.pac-agendar .ctas{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.agendar-cta{ display:inline-flex; align-items:center; gap:10px; border-radius:999px; background:#10131A; color: var(--amber); padding:17px 30px; font-size:16px; font-weight:700; transition: transform .2s; }
.agendar-cta:hover{ transform:translateY(-2px); }
.pac-agendar .note{ font-size:13.5px; font-weight:600; opacity:.65; }
.pasos{ display:flex; flex-direction:column; gap:12px; }
.paso{ border-radius:16px; padding:18px 20px; background: rgba(16,19,26,.08); }
.paso .n{ font-size:14px; font-weight:700; }
.paso .d{ margin-top:4px; font-size:13px; opacity:.7; }
.paso.activo{ background:#10131A; color:#E8F1FA; }
.paso.activo .n{ color: var(--amber); }

.drawer-footer{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; border-top:1px solid rgba(255,255,255,.08); background:#021024; padding:32px clamp(20px,4vw,40px); }
.drawer-footer span{ font-size:12.5px; color: rgba(232,241,250,.45); }

[data-lenis-prevent]{ overscroll-behavior: contain; }