/* =====================================================================
   GALAXIA · rediseño de la web pública (index y proyectos)
   ---------------------------------------------------------------------
   El cielo lo dibuja assets/js/cosmos.js en <canvas id="cosmos">.
   Las animaciones de scroll están en assets/js/efectos.js (comunes),
   assets/js/home.js y assets/js/proyectos.js.
   Tipografías: Sora (titulares), Megrim (logotipo), IBM Plex (texto).
   ===================================================================== */
:root{
  --f-display:'Sora','IBM Plex Sans',ui-sans-serif,system-ui,sans-serif;
  --f-marca:'Megrim','Sora',ui-sans-serif,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --luz:#9cc0ff;
  --luz-fuerte:#d6e4ff;
  --panel:rgba(9,11,18,.66);
  --panel-borde:rgba(170,195,240,.14);
  --panel-borde-f:rgba(196,216,252,.36);
  --trazo:rgba(186,206,245,.42);
  --trazo-suave:rgba(186,206,245,.16);
  --texto-2:#c3cbda;
  --texto-3:#8f97a8;
  --gutter:clamp(20px,5vw,80px);
  --ancho:1560px;
}
html{background:#05060c;}
body{background:transparent;}
#cosmos{position:fixed;inset:0;width:100%;height:100vh;height:100lvh;z-index:0;display:block;pointer-events:none;background:#05060c;}
main,footer{position:relative;z-index:1;}
main{display:block;}

/* Scroll suave (Lenis) */
html.lenis,html.lenis body{height:auto;}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip;}
.lenis [data-lenis-prevent]{overscroll-behavior:contain;}
.lenis.lenis-smooth iframe{pointer-events:none;}

.saltar{position:fixed;left:16px;top:-60px;z-index:200;background:#e9f0fd;color:#05060c;padding:10px 16px;font-family:var(--f-mono);font-size:13px;transition:top .2s;}
.saltar:focus{top:calc(12px + env(safe-area-inset-top,0px));}
.visualmente-oculto{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}
.flecha{width:.8em;height:.8em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.05em;}

/* ---------- Titulares ---------- */
.display-xl{font-family:var(--f-display);font-weight:600;font-size:clamp(38px,min(6.2vw,9.6vh),98px);line-height:.98;letter-spacing:-.045em;color:#f3f6fc;text-wrap:balance;margin:0;}
.display-l{font-family:var(--f-display);font-weight:600;font-size:clamp(32px,4.4vw,66px);line-height:1.02;letter-spacing:-.04em;color:#f3f6fc;text-wrap:balance;margin:0;}

/* Palabras que aparecen: la animación solo mueve --p (0 → 1) en el titular */
.partido .w{
  display:inline-block;
  --t:clamp(0, calc((var(--p, 1) * (var(--n, 1) + 3) - var(--i, 0)) / 3), 1);
  opacity:var(--t);
  transform:translate3d(0, calc((1 - var(--t)) * .5em), 0);
  filter:blur(calc((1 - var(--t)) * 10px));
}
.partido.listo .w{filter:none;transform:none;}

/* ---------- Barra de sección (estilo «(02 — Servicios)») ---------- */
.sec-bar{
  position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  width:100%;max-width:var(--ancho);margin:0 auto;padding:16px var(--gutter);
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--texto-3);
}
.sec-bar::before{
  content:"";position:absolute;left:var(--gutter);right:var(--gutter);top:0;height:1px;
  background:linear-gradient(90deg,rgba(186,206,245,.34),rgba(186,206,245,.06));
  transform:scaleX(var(--l,1));transform-origin:0 50%;
}
.sec-bar span:last-child{text-align:right;}
@media (max-width:600px){.sec-bar{font-size:10px;letter-spacing:.12em;gap:14px;}}

/* ---------- Cursor propio ---------- */
html.con-cursor,html.con-cursor *{cursor:none!important;}
html.con-cursor input,html.con-cursor textarea,html.con-cursor select,html.con-cursor [contenteditable]{cursor:text!important;}
.cursor{position:fixed;left:0;top:0;z-index:1000;pointer-events:none;opacity:0;transition:opacity .3s ease;}
.cursor.visible{opacity:1;}
.cursor.sobre-campo{opacity:0;}
.cursor-punto{position:fixed;left:0;top:0;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#eef4ff;box-shadow:0 0 8px rgba(160,195,255,.8);}
.cursor-anillo{
  position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  border:1px solid rgba(207,224,255,.5);display:grid;place-items:center;
  transition:width .35s cubic-bezier(.2,.8,.2,1),height .35s cubic-bezier(.2,.8,.2,1),margin .35s cubic-bezier(.2,.8,.2,1),background .3s ease,border-color .3s ease,opacity .25s ease;
}
.cursor.sobre-enlace .cursor-anillo{width:58px;height:58px;margin:-29px 0 0 -29px;background:rgba(156,192,255,.1);border-color:rgba(214,228,255,.9);}
.cursor.pulsado .cursor-anillo{background:rgba(156,192,255,.24);}
.cursor.sobre-foto .cursor-anillo{opacity:0;}
.cursor-txt{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#eef4ff;}

/* ---------- Botón de luz ---------- */
.btn-luz{
  display:inline-flex;align-items:center;font-family:var(--f-mono);font-size:14px;letter-spacing:.02em;
  color:#070910;background:#e9f0fd;padding:15px 24px;border-radius:999px;
  box-shadow:0 0 0 1px rgba(255,255,255,.4),0 10px 40px rgba(120,160,255,.22);
  transition:background .25s ease,box-shadow .25s ease;
}
.btn-luz .iman-in{display:inline-flex;align-items:center;gap:12px;}
.btn-luz .flecha{width:18px;height:18px;}
.btn-luz:hover{background:#fff;box-shadow:0 0 0 1px #fff,0 14px 50px rgba(140,180,255,.45);}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{position:relative;}
.hero-mobius{position:sticky;top:0;height:100vh;height:100svh;margin-bottom:-100vh;margin-bottom:-100svh;z-index:0;pointer-events:none;overflow:hidden;overflow:clip;}
.mobius-capa{position:absolute;inset:0;}
.mobius-capa svg,.mobius-capa canvas{
  position:absolute;left:50%;top:50%;width:100%!important;height:100%!important;
  transform:translate(-50%,-50%) scale(1.14);display:block;
}
/* El dibujo de reserva queda oculto mientras carga la cinta 3D (así no se ve un ∞ gigante
   un instante al entrar). Solo aparece si el 3D no va a cargar (clase .sin-3d) o sin JavaScript. */
.mobius-capa svg{width:min(88vw,1100px)!important;height:auto!important;opacity:0;transition:opacity .8s ease;}
.mobius-capa.sin-3d svg{opacity:.6;}
.hero-intro{
  position:relative;z-index:2;min-height:100vh;min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(110px,14vh,150px) clamp(20px,5vw,74px) clamp(70px,8vh,96px);
}
.hero-brand-center{position:relative;z-index:3;display:flex;align-items:center;justify-content:center;width:min(80vw,880px);min-height:220px;text-align:center;}
.hero-brand-name{
  display:inline-flex;font-family:var(--f-marca);font-size:clamp(84px,16vw,230px);line-height:.82;
  letter-spacing:.06em;color:#f3f3ef;text-shadow:0 0 28px rgba(0,0,0,.95),0 0 70px rgba(0,0,0,.72);
  transform:translateX(.04em);
}
.hero-brand-name span{display:inline-block;}
.hero-scroll-cue{
  position:absolute;left:50%;bottom:clamp(26px,4vh,44px);transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;font-size:10px;letter-spacing:.18em;color:var(--muted);z-index:4;
}
.hero-scroll-cue i{width:1px;height:36px;background:linear-gradient(to bottom,var(--muted),transparent);animation:scrollPulse 1.8s ease-in-out infinite;}
@keyframes scrollPulse{0%,100%{opacity:.35;transform:scaleY(.65);transform-origin:top;}50%{opacity:1;transform:scaleY(1);}}

.hero-message{
  position:relative;z-index:2;min-height:100vh;min-height:100svh;display:flex;align-items:center;
  padding:clamp(110px,14vh,160px) var(--gutter) clamp(70px,9vh,110px);
}
.hero-grid{width:100%;max-width:var(--ancho);margin:0 auto;}
.hero-titulo{
  margin:0;font-family:var(--f-display);font-weight:300;
  font-size:clamp(46px,min(8.4vw,13.5vh),140px);line-height:1;letter-spacing:-.05em;color:#f4f6fb;
}
.hero-l{display:block;text-shadow:0 8px 40px rgba(0,0,0,.5);}
.hero-l2{
  margin-top:.08em;
  background:linear-gradient(100deg,#e6edfb 10%,#a9bfe9 70%);
  -webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;
}
.hero-l2 .w{background:inherit;-webkit-background-clip:text;background-clip:text;}
.hero-foot{
  max-width:880px;margin-top:clamp(40px,6vh,72px);padding-top:18px;
  font-size:12px;color:var(--muted);letter-spacing:.04em;border-top:1px solid rgba(255,255,255,.14);
}

/* =====================================================================
   SERVICIOS · pantalla 1
   ===================================================================== */
.servicios{position:relative;}
.sv-intro{
  min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:calc(78px + env(safe-area-inset-top,0px)) 0 clamp(18px,3vh,34px);
}
.sv-grid{
  width:100%;max-width:var(--ancho);margin:0 auto;padding:clamp(12px,2.4vh,34px) var(--gutter);
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:center;
}
/* El titular de servicios es largo en otros idiomas: un poco más pequeño y la pregunta en su propia línea */
.sv-copy .display-xl{font-size:clamp(34px,min(5.2vw,8.4vh),84px);}
.sv-p{color:var(--ink-soft);font-size:clamp(15.5px,1.2vw,19px);line-height:1.65;max-width:52ch;margin-top:clamp(14px,2.4vh,28px);}
.sv-hitos{list-style:none;margin:clamp(16px,3vh,34px) 0 0;padding:0;display:flex;flex-direction:column;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#aeb8ca;max-width:520px;}
.sv-hitos li{display:flex;gap:16px;align-items:center;padding:clamp(8px,1.3vh,12px) 0;border-top:1px solid var(--trazo-suave);opacity:.3;transition:opacity .5s ease,color .5s ease;}
.sv-hitos li:last-child{border-bottom:1px solid var(--trazo-suave);}
.sv-hitos li.on{opacity:1;color:#eef3fc;}
.hito-n{color:#5f6778;transition:color .5s ease;}
.sv-hitos li.on .hito-n{color:var(--luz);}
.fx-quieto .sv-hitos li,html:not(.fx) .sv-hitos li{opacity:1;}

.sv-orbita{margin:0;}
.orb-marco{border:1px solid var(--panel-borde);background:rgba(7,9,15,.55);display:flex;justify-content:center;}
.orb-svg{display:block;width:100%;height:auto;max-height:50vh;}
.orb-pie{display:flex;justify-content:space-between;gap:16px;padding:12px 2px 0;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#d2d9e6;}
.sv-orbita figcaption{margin-top:8px;color:var(--texto-3);font-size:13.5px;line-height:1.5;max-width:56ch;}

.orb-anillo{fill:none;stroke:rgba(186,206,245,.2);stroke-width:1;stroke-dasharray:2 7;animation:orbFlujo 40s linear infinite;}
.orb-anillo-int{stroke:rgba(186,206,245,.13);animation-duration:26s;animation-direction:reverse;}
@keyframes orbFlujo{to{stroke-dashoffset:-600;}}
.orb-lineas path{fill:none;stroke:rgba(186,206,245,.22);stroke-width:1;}
.orb-senales path{fill:none;stroke:var(--luz-fuerte);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:12 400;stroke-dashoffset:12;opacity:0;animation:senal 6s var(--d,0s) infinite cubic-bezier(.55,0,.25,1);}
@keyframes senal{0%{stroke-dashoffset:12;opacity:0;}2%{opacity:1;}15%{stroke-dashoffset:-176;opacity:1;}17%,100%{stroke-dashoffset:-176;opacity:0;}}
.orb-web rect{fill:rgba(186,206,245,.1);}
.orb-web .orb-pagina{fill:rgba(9,12,20,.92);stroke:rgba(196,214,248,.5);stroke-width:1.2;animation:pagina 1.2s .9s infinite;}
@keyframes pagina{0%{stroke:rgba(220,232,255,1);}45%,100%{stroke:rgba(196,214,248,.5);}}
.orb-web .orb-img{fill:rgba(156,192,255,.16);}
.orb-web .orb-btn{fill:var(--luz);}
.orb-centro{font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;fill:#aeb8ca;}
.orb-nodos rect{fill:#232834;stroke:rgba(186,206,245,.35);}
.orb-nodos circle{fill:var(--luz);opacity:0;animation:nodo 6s var(--d,0s) infinite;}
@keyframes nodo{0%{opacity:0;}3%{opacity:1;}16%{opacity:1;}22%,100%{opacity:0;}}
.orb-nodos text{font-family:var(--f-mono);font-size:15px;letter-spacing:.12em;text-transform:uppercase;fill:#e2e8f4;}

/* Barra de luz que se carga con el scroll */
.sv-carga{
  width:100%;max-width:var(--ancho);margin:0 auto;padding:clamp(10px,2vh,22px) var(--gutter) 0;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#aeb8ca;
}
.carga-txt{display:grid;}
.carga-a,.carga-b{grid-area:1/1;transition:opacity .4s ease;}
.carga-b{opacity:0;color:var(--luz-fuerte);}
.sv-carga.listo .carga-a{opacity:0;}
.sv-carga.listo .carga-b{opacity:1;}
.carga-barra{position:relative;height:2px;background:rgba(186,206,245,.12);border-radius:2px;}
.carga-barra i{
  position:absolute;inset:0;transform:scaleX(var(--carga,1));transform-origin:0 50%;
  background:linear-gradient(90deg,rgba(156,192,255,.08),var(--luz) 70%,#fff);
  box-shadow:0 0 12px rgba(156,192,255,.7),0 0 30px rgba(156,192,255,.3);border-radius:2px;
}
.carga-barra::after{
  content:"";position:absolute;top:50%;left:calc(var(--carga,1) * 100%);width:8px;height:8px;margin:-4px 0 0 -4px;
  border-radius:50%;background:#fff;box-shadow:0 0 12px 3px rgba(170,200,255,.85);
}
.sv-carga.listo .carga-barra i{box-shadow:0 0 18px rgba(156,192,255,.95),0 0 60px rgba(156,192,255,.5);}
.carga-pct{font-variant-numeric:tabular-nums;color:#eef3fc;min-width:4.5ch;text-align:right;}

/* =====================================================================
   SERVICIOS · pantalla 2 · «Lo que hacemos»
   Dos bloques de seis tarjetas iguales (web y sistemas). Cada bloque cabe
   en una pantalla al 100 %: la altura de las tarjetas sale del alto de la
   ventana (--cap-h). Al pasar el ratón la tarjeta se amplía un poco.
   ===================================================================== */
.sv-cap{
  --cap-h:clamp(210px,calc((100svh - 300px) / 2),330px);
  padding:clamp(40px,8vh,96px) 0 clamp(70px,12vh,140px);
}
.cap-cab{
  max-width:var(--ancho);margin:0 auto;padding:clamp(8px,1.6vh,18px) var(--gutter) 0;
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 48px;
}
.cap-titulo{margin:0;font-family:var(--f-display);font-weight:600;font-size:clamp(30px,3.2vw,50px);line-height:1;letter-spacing:-.045em;color:#f3f6fc;}
.cap-sub{color:var(--texto-2);font-size:15px;line-height:1.55;max-width:58ch;}
.cap-bloque{max-width:var(--ancho);margin:0 auto;padding:0 var(--gutter);}
.cap-bloque+.cap-bloque{margin-top:clamp(36px,7vh,80px);}
.cap-grupo{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:clamp(18px,3vh,30px) 0 12px;
  font-family:var(--f-mono);font-weight:400;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#d8dfeb;
}
.cap-grupo-n{color:var(--luz);}
.cap-grupo-s{color:var(--texto-3);}
.cap-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;}
.cap{position:relative;height:var(--cap-h);z-index:0;transition:transform .55s cubic-bezier(.2,.8,.2,1),z-index 0s .55s;}
.cap-in{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;
  padding:18px 22px 22px;border:1px solid var(--panel-borde);background:rgba(9,11,18,.78);
  overflow:hidden;isolation:isolate;color:inherit;
  transition:border-color .4s ease,background .4s ease,box-shadow .55s ease;
}
.cap-vis{position:absolute;inset:0;z-index:-2;opacity:.72;transition:opacity .6s ease,transform 1s cubic-bezier(.2,.7,.2,1);}
.cap-vis svg{display:block;width:100%;height:100%;}
.cap-in::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(6,8,13,0) 38%,rgba(6,8,13,.92) 100%);}
.cap-top{display:flex;justify-content:space-between;align-items:center;gap:12px;}
.cap-n{font-size:12px;letter-spacing:.12em;color:#cfd6e3;}
.cap-ir{
  display:grid;place-items:center;flex:0 0 auto;width:32px;height:32px;border-radius:50%;
  border:1px solid rgba(214,228,255,.26);background:rgba(5,6,12,.45);color:#e9f0fd;
  transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.cap-ir .flecha{width:14px;height:14px;transition:transform .4s cubic-bezier(.2,.8,.2,1);}
.cap-txt{position:relative;}
/* Al abrirse la descripción, un fondo oscuro detrás del texto para que se lea sobre el dibujo */
.cap-txt::before{content:"";position:absolute;left:-22px;right:-22px;bottom:-22px;top:-46px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(6,8,13,0),rgba(6,8,13,.9) 46%);opacity:0;transition:opacity .45s ease;}
.cap:hover .cap-txt::before,.cap:focus-within .cap-txt::before{opacity:1;}
.cap-txt h3{margin:0;font-family:var(--f-display);font-weight:600;font-size:clamp(21px,1.75vw,30px);line-height:1.05;letter-spacing:-.04em;color:#f2f5fb;text-wrap:balance;}
.cap-txt p{
  margin:0;color:#b3bccc;font-size:14.5px;line-height:1.5;max-width:44ch;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .5s ease,opacity .4s ease,margin .4s ease;
}
.cap:hover .cap-txt p,.cap:focus-within .cap-txt p{max-height:6em;opacity:1;margin-top:10px;}
.cap:hover .cap-vis,.cap:focus-within .cap-vis{opacity:1;transform:scale(1.04);}
.cap:hover .cap-ir,.cap:focus-within .cap-ir{background:#e9f0fd;color:#070910;border-color:#e9f0fd;}
.cap:hover .cap-ir .flecha{transform:translate(1px,-1px);}
.cap-in:focus-visible{outline:2px solid var(--luz);outline-offset:3px;}

/* Home: dos tarjetas grandes, una por grupo. La descripción siempre se ve. */
.cap-duo{
  --cap-h:clamp(340px,calc(100svh - 330px),560px);
  max-width:var(--ancho);margin:clamp(18px,3vh,32px) auto 0;padding:0 var(--gutter);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;
}
.cap-grande .cap-in{padding:24px 28px 30px;}
.cap-grande .cap-vis{opacity:.85;}
.cap-grande .cap-txt h3{font-size:clamp(32px,3.4vw,58px);line-height:1;letter-spacing:-.05em;color:#f4f6fb;}
.cap-grande .cap-txt p{max-height:none;opacity:1;margin-top:14px;font-size:clamp(15px,1.15vw,17.5px);line-height:1.55;max-width:46ch;color:#c6cedc;}
.cap-grande .cap-txt::before{opacity:1;top:-90px;}
.cap-ver{display:inline-flex;align-items:center;gap:10px;margin-top:18px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--luz-fuerte);}
.cap-ver .flecha{width:14px;height:14px;transition:transform .4s cubic-bezier(.2,.8,.2,1);}
.cap-grande:hover .cap-ver .flecha{transform:translateX(5px);}
@media (hover:hover){
  .cap-grande:hover,.cap-grande:focus-within{transform:scale(1.018);}
}
@media (hover:hover){
  .cap:hover,.cap:focus-within{transform:scale(1.045);z-index:3;transition:transform .55s cubic-bezier(.2,.8,.2,1),z-index 0s;}
  .cap:hover .cap-in,.cap:focus-within .cap-in{
    border-color:var(--panel-borde-f);background:rgba(11,14,23,.94);
    box-shadow:0 34px 70px -28px rgba(0,0,0,.95),0 0 0 1px rgba(214,228,255,.08),0 0 60px -12px rgba(156,192,255,.28);
  }
}
@media (hover:none){.cap-txt p{max-height:none;opacity:1;margin-top:8px;}}

/* Llamada final: una franja ancha bajo las tarjetas */
.cap-pie{max-width:var(--ancho);margin:6px auto 0;padding:0 var(--gutter);}
.cap-cta{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 40px;
  padding:clamp(22px,3.4vh,36px) clamp(22px,2.6vw,36px);border:1px solid var(--panel-borde);
  background:linear-gradient(100deg,rgba(156,192,255,.12),rgba(9,11,18,.84) 55%);transition:border-color .4s ease;
}
.cap-cta:hover{border-color:var(--panel-borde-f);}
.cap-k{font-family:var(--f-display);font-size:clamp(19px,1.5vw,24px);letter-spacing:-.03em;color:#e9eef8;}
.cap-cta-txt{display:inline-block;font-family:var(--f-display);font-weight:600;font-size:clamp(28px,2.9vw,46px);line-height:1;letter-spacing:-.05em;color:#fff;}
.cap-cta-txt .flecha{width:.62em;height:.62em;margin-left:.1em;transition:transform .4s cubic-bezier(.2,.8,.2,1);}
.cap-cta:hover .flecha{transform:translate(4px,-4px);}

@media (max-width:1000px){
  .sv-cap{--cap-h:240px;}
  .cap-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .sv-grid{grid-template-columns:minmax(0,1fr);}
  .orb-svg{max-height:40vh;}
}
@media (max-width:760px){
  .cap-duo{grid-template-columns:minmax(0,1fr);--cap-h:clamp(340px,94vw,420px);}
}
@media (max-width:600px){
  .sv-cap{--cap-h:clamp(176px,52vw,210px);}
  .cap-grid{gap:5px;}
  .cap-in{padding:12px 13px 14px;}
  .cap-n{font-size:11px;}
  .cap-ir{width:26px;height:26px;}
  .cap-ir .flecha{width:12px;height:12px;}
  .cap-txt h3{font-size:clamp(16px,4.6vw,19px);}
  .cap-txt p{display:none;}
  .cap-sub{font-size:14.5px;}
  .cap-cta-txt{font-size:clamp(22px,6.4vw,28px);}
  .cap-grande .cap-in{padding:16px 18px 22px;}
  .cap-grande .cap-txt p{display:block;font-size:15px;}
  .cap-grande .cap-txt h3{font-size:clamp(28px,8.4vw,36px);}
  .sv-carga{grid-template-columns:minmax(0,1fr) auto;row-gap:10px;}
  .carga-barra{grid-column:1/-1;grid-row:2;}
}

/* ---------- Dibujos animados de las tarjetas ---------- */
/* 01 · diseño a medida */
.v1-cuad path{stroke:rgba(186,206,245,.06);}
.v1 rect,.v1 path,.v1 circle,.v1 ellipse{fill:none;stroke:rgba(196,214,248,.55);stroke-width:1.2;}
.v1-b rect{fill:rgba(156,192,255,.06);}
.v1 .v1-t{fill:rgba(196,214,248,.38);stroke:none;}
.v1 .v1-btn{fill:var(--luz);stroke:none;}
.v1 .v1-planeta{fill:rgba(156,192,255,.22);}
.v1-cursor{transform:translate(520px,300px);animation:v1cursor 7s infinite cubic-bezier(.6,0,.3,1);}
.v1 .v1-cursor path{fill:#fff;stroke:#0a0c12;stroke-width:1.2;}
.v1-todo{animation:v1todo 7s infinite;}
.v1-marco{stroke-dasharray:1200;animation:v1marco 7s infinite;}
.v1-b{transform-box:fill-box;transform-origin:center;}
.v1-b1{animation:v1b1 7s infinite;}
.v1-b2{animation:v1b2 7s infinite;}
.v1-b3{animation:v1b3 7s infinite;}
.v1-b4{animation:v1b4 7s infinite;}
.v1 .v1-clic{stroke:var(--luz);opacity:0;transform-box:fill-box;transform-origin:center;}
.v1-clic1{animation:v1clic1 7s infinite;}
.v1-clic2{animation:v1clic2 7s infinite;}
@keyframes v1todo{0%{opacity:0;}5%,92%{opacity:1;}100%{opacity:0;}}
@keyframes v1marco{0%{stroke-dashoffset:1200;}14%,100%{stroke-dashoffset:0;}}
@keyframes v1b1{0%,12%{opacity:0;transform:translateY(12px);}21%,100%{opacity:1;transform:none;}}
@keyframes v1b2{0%,30%{opacity:0;transform:translateY(12px);}37%,100%{opacity:1;transform:none;}}
@keyframes v1b3{0%,37%{opacity:0;transform:translateY(12px);}44%,100%{opacity:1;transform:none;}}
@keyframes v1b4{0%,44%{opacity:0;transform:translateY(12px);}51%,100%{opacity:1;transform:none;}}
@keyframes v1cursor{0%{transform:translate(520px,300px);}18%,23%{transform:translate(190px,143px);}32%,37%{transform:translate(300px,220px);}62%{transform:translate(430px,236px);}100%{transform:translate(520px,300px);}}
@keyframes v1clic1{0%,19%{opacity:0;transform:scale(.3);}21%{opacity:.9;}29%,100%{opacity:0;transform:scale(1.7);}}
@keyframes v1clic2{0%,33%{opacity:0;transform:scale(.3);}35%{opacity:.9;}43%,100%{opacity:0;transform:scale(1.7);}}

/* 02 · desarrollo veloz */
.v2-rayos line{stroke:rgba(214,228,255,.75);stroke-width:1.6;stroke-linecap:round;animation:v2rayo 1.6s var(--d,0s) linear infinite;}
@keyframes v2rayo{0%{transform:translateX(0) scaleX(.4);opacity:0;}15%{opacity:1;}100%{transform:translateX(150px) scaleX(2.4);opacity:0;}}
.v2-pista{fill:rgba(8,11,19,.9);stroke:rgba(186,206,245,.18);stroke-width:2;}
.v2-progreso{fill:none;stroke:var(--luz);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:365;stroke-dashoffset:0;animation:v2prog 3.2s infinite cubic-bezier(.3,.6,.2,1);}
@keyframes v2prog{0%{stroke-dashoffset:365;opacity:1;}55%,85%{stroke-dashoffset:0;opacity:1;}100%{stroke-dashoffset:0;opacity:0;}}
.v2-num{font-family:var(--f-mono);font-size:24px;fill:#eef3fc;}

/* 03 · tiendas y reservas */
.v3-orbita{fill:none;stroke:rgba(186,206,245,.32);stroke-dasharray:3 6;}
.v3-planeta{fill:#121828;stroke:rgba(186,206,245,.42);stroke-width:1.2;}
.v3-tienda path{fill:none;stroke:#dbe5fa;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;}
.v3-item{offset-path:path('M50 196 A150 50 0 1 1 350 196 A150 50 0 1 1 50 196');offset-rotate:0deg;offset-distance:0%;animation:v3orbita 9s var(--d,0s) linear infinite,v3prof 9s var(--d,0s) linear infinite;}
.v3-item:nth-child(2){offset-distance:33%;}
.v3-item:nth-child(3){offset-distance:66%;}
.v3-item rect,.v3-item path{fill:#0c111c;stroke:var(--luz);stroke-width:1.4;}
@keyframes v3orbita{from{offset-distance:0%;}to{offset-distance:100%;}}
@keyframes v3prof{0%,44%{opacity:.35;}52%,94%{opacity:1;}100%{opacity:.35;}}
.v3-aviso{animation:v3aviso 3s infinite;}
.v3-aviso rect{fill:rgba(156,192,255,.14);stroke:var(--luz);}
.v3-aviso text{font-family:var(--f-mono);font-size:12px;fill:#eef3fc;letter-spacing:.04em;}
@keyframes v3aviso{0%{opacity:0;transform:translateY(8px);}15%,60%{opacity:1;transform:none;}75%,100%{opacity:0;transform:translateY(-6px);}}

/* 04 · visibilidad en Google */
.v4-radar circle,.v4-radar path{fill:none;stroke:rgba(186,206,245,.15);}
.v4-barrido{transform-origin:300px 180px;animation:giro 4s linear infinite;}
.v4-filo{stroke:var(--luz);stroke-width:1.5;}
.v4-blip{fill:#cfe0ff;opacity:.14;animation:v4blip 4s var(--d,0s) infinite;}
@keyframes v4blip{0%{opacity:1;}35%,100%{opacity:.14;}}
.v4-tu circle{fill:var(--luz);}
.v4-tu .v4-onda{fill:none;stroke:var(--luz);transform-box:fill-box;transform-origin:center;opacity:0;animation:v4onda 4s var(--d,0s) infinite;}
@keyframes v4onda{0%{transform:scale(1);opacity:.9;}40%,100%{transform:scale(4);opacity:0;}}
.v4-etiqueta path{fill:none;stroke:rgba(186,206,245,.5);}
.v4-etiqueta text{font-family:var(--f-mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;fill:#eef3fc;}
@keyframes giro{to{transform:rotate(360deg);}}

/* 05 · mantenimiento y soporte */
.v5-globo circle,.v5-globo ellipse,.v5-globo path{fill:none;stroke:rgba(186,206,245,.34);stroke-width:1;}
.v5-globo circle{fill:rgba(11,15,26,.92);}
.v5-meridiano{animation:v5mer 6s var(--d,0s) linear infinite;}
@keyframes v5mer{0%{rx:78px;}50%{rx:0px;}100%{rx:78px;}}
.v5-casa path{fill:#0c111c;stroke:var(--luz);stroke-width:1.5;stroke-linejoin:round;}
.v5-ondas path{fill:none;stroke:var(--luz);stroke-width:1.4;stroke-linecap:round;transform-box:fill-box;transform-origin:50% 100%;opacity:0;animation:v5onda 1.8s var(--d,0s) infinite;}
@keyframes v5onda{0%{opacity:0;transform:translateY(0) scale(.6);}30%{opacity:.9;}100%{opacity:0;transform:translateY(-26px) scale(1.6);}}
.v5-orbita{fill:none;stroke:rgba(186,206,245,.18);stroke-dasharray:2 6;}
.v5-sat-giro{transform-origin:200px 216px;animation:giro 14s linear infinite;}
.v5-sat-giro rect,.v5-sat-giro path{fill:#0c111c;stroke:#dfe7f8;stroke-width:1.2;}
.v5-sat-giro .v5-panel{fill:rgba(156,192,255,.32);}

/* 06 · apps y área de clientes */
.v6-orbita{fill:none;stroke:rgba(186,206,245,.14);stroke-dasharray:2 6;}
.v6-enlace{fill:none;stroke:rgba(156,192,255,.5);stroke-width:1.2;stroke-dasharray:3 5;animation:flujo 2.4s linear infinite;}
@keyframes flujo{to{stroke-dashoffset:-16;}}
.v6-usuario circle,.v6-usuario path{fill:none;stroke:rgba(214,228,255,.6);stroke-width:1.2;}
.v6 .v6-disco{fill:#0c111c;stroke:rgba(186,206,245,.35);stroke-width:1;}
.v6-movil rect,.v6-movil path{fill:#0c111c;stroke:rgba(214,228,255,.62);stroke-width:1.3;stroke-linecap:round;}
.v6-movil .v6-pant{fill:rgba(156,192,255,.05);stroke:rgba(186,206,245,.25);stroke-width:1;}
.v6-apps rect{fill:rgba(156,192,255,.14);stroke:rgba(186,206,245,.45);stroke-width:1;animation:v6app 4s var(--d,0s) infinite;}
.v6-apps .v6-fila{fill:rgba(196,214,248,.3);stroke:none;animation:none;}
@keyframes v6app{0%,100%{fill:rgba(156,192,255,.14);}8%{fill:rgba(156,192,255,.6);}22%{fill:rgba(156,192,255,.14);}}
.v6-aviso{animation:v6aviso 6s infinite;}
.v6-aviso rect{fill:#141b2c;stroke:var(--luz);stroke-width:1.2;}
.v6-aviso circle{fill:var(--luz);}
.v6-aviso path{fill:none;stroke:rgba(214,228,255,.7);stroke-width:2;stroke-linecap:round;}
@keyframes v6aviso{0%,28%{opacity:0;transform:translateY(-14px);}36%,72%{opacity:1;transform:none;}80%,100%{opacity:0;transform:translateY(-6px);}}
.v6-bell{fill:none;stroke:#dfe7f8;stroke-width:1.4;stroke-linejoin:round;transform-box:fill-box;transform-origin:50% 0;animation:v6bell 6s infinite;}
@keyframes v6bell{0%,30%,46%,100%{transform:rotate(0);}33%{transform:rotate(14deg);}37%{transform:rotate(-12deg);}41%{transform:rotate(8deg);}}
.v6-punto{fill:var(--luz);transform-box:fill-box;transform-origin:center;animation:v6punto 6s infinite;}
@keyframes v6punto{0%,30%{transform:scale(0);}36%,74%{transform:scale(1);}80%,100%{transform:scale(0);}}

/* 07 · software de gestión: una tarea cruza el tablero hasta «hecho» */
.v7-cuad path{stroke:rgba(186,206,245,.05);}
.v7-app rect,.v7-app path,.v7-app circle{fill:none;stroke:rgba(196,214,248,.45);stroke-width:1.1;}
.v7-app .v7-marco{fill:rgba(9,12,20,.75);stroke:rgba(196,214,248,.55);}
.v7-app .v7-col{fill:rgba(156,192,255,.04);stroke:rgba(186,206,245,.14);}
.v7-app .v7-cab{fill:rgba(196,214,248,.42);stroke:none;}
.v7-app .v7-ok{fill:var(--luz);stroke:none;}
.v7-t rect{fill:#101624;stroke:rgba(196,214,248,.4);stroke-width:1;}
.v7-t path{fill:none;stroke:rgba(196,214,248,.35);stroke-width:2;stroke-linecap:round;}
.v7-mueve{animation:v7mueve 8s infinite cubic-bezier(.6,0,.3,1);}
.v7-mueve rect{fill:#162036;stroke:var(--luz);stroke-width:1.3;}
.v7-mueve path{fill:none;stroke:rgba(214,228,255,.75);stroke-width:2;stroke-linecap:round;}
.v7-mueve .v7-check{stroke:var(--luz);stroke-dasharray:20;stroke-dashoffset:20;animation:v7check 8s infinite;}
.v7-mueve .v7-mano{fill:#fff;stroke:#0a0c12;stroke-width:1.1;stroke-linejoin:round;animation:v7mano 8s infinite;}
@keyframes v7mueve{0%,12%{transform:translate(0,0);opacity:1;}30%,40%{transform:translate(86px,-32px);}56%,90%{transform:translate(172px,0);opacity:1;}95%{transform:translate(172px,0);opacity:0;}96%{transform:translate(0,0);opacity:0;}100%{transform:translate(0,0);opacity:1;}}
@keyframes v7check{0%,58%{stroke-dashoffset:20;}66%,90%{stroke-dashoffset:0;}95%,100%{stroke-dashoffset:20;}}
@keyframes v7mano{0%,6%{opacity:0;}10%,58%{opacity:1;}64%,100%{opacity:0;}}

/* 08 · integración: datos que viajan entre el núcleo y los sistemas */
.v8-orbita{fill:none;stroke:rgba(186,206,245,.12);stroke-dasharray:2 6;}
.v8-lineas path{fill:none;stroke:rgba(186,206,245,.26);stroke-width:1;}
.v8-paq{fill:var(--luz-fuerte);offset-rotate:0deg;animation:v8paq 3s var(--d,0s) infinite cubic-bezier(.5,0,.5,1);}
@keyframes v8paq{0%{offset-distance:0%;opacity:0;}12%{opacity:1;}88%{opacity:1;}100%{offset-distance:100%;opacity:0;}}
.v8-hub circle{fill:#0e1422;stroke:var(--luz);stroke-width:1.4;}
.v8-hub .v8-anillo{fill:none;stroke:rgba(156,192,255,.4);stroke-dasharray:3 6;transform-origin:200px 200px;animation:giro 12s linear infinite;}
.v8-hub text{font-family:var(--f-mono);font-size:13px;letter-spacing:.12em;fill:#eef3fc;}
.v8-nodo rect{fill:#0c111c;stroke:rgba(214,228,255,.5);stroke-width:1.1;}
.v8-nodo path,.v8-nodo circle{fill:none;stroke:#dfe7f8;stroke-width:1.3;stroke-linejoin:round;stroke-linecap:round;}
.v8-nodo rect+rect{fill:none;stroke:#dfe7f8;stroke-width:1.3;}

/* 09 · automatización: disparador → engranaje → correo y documento */
.v9-cuad path{stroke:rgba(186,206,245,.05);}
.v9-cables path{fill:none;stroke:rgba(186,206,245,.32);stroke-width:1.2;stroke-dasharray:4 4;}
.v9-token{fill:#fff;animation:v9token 4s infinite cubic-bezier(.5,0,.5,1);}
@keyframes v9token{0%,8%{offset-distance:0%;opacity:0;}12%{opacity:1;}74%{offset-distance:100%;opacity:1;}80%,100%{offset-distance:100%;opacity:0;}}
.v9-nodo rect{fill:#0c111c;stroke:rgba(214,228,255,.42);stroke-width:1.2;}
.v9-nodo .ic{fill:none;stroke:#dfe7f8;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round;}
.v9-n1 rect{animation:v9n1 4s infinite;}
.v9-n2 rect{animation:v9n2 4s infinite;}
.v9-n3 rect{animation:v9n3 4s infinite;}
@keyframes v9n1{0%,14%{stroke:var(--luz);fill:#15213a;}24%,100%{stroke:rgba(214,228,255,.42);fill:#0c111c;}}
@keyframes v9n2{0%,30%{stroke:rgba(214,228,255,.42);fill:#0c111c;}38%,50%{stroke:var(--luz);fill:#15213a;}58%,100%{stroke:rgba(214,228,255,.42);fill:#0c111c;}}
@keyframes v9n3{0%,70%{stroke:rgba(214,228,255,.42);fill:#0c111c;}76%,92%{stroke:var(--luz);fill:#15213a;}100%{stroke:rgba(214,228,255,.42);fill:#0c111c;}}
.v9-engranaje{transform-origin:192px 200px;animation:giro 4s linear infinite;}
.v9 .v9-dientes{fill:none;stroke:#dfe7f8;stroke-width:4;stroke-dasharray:3.9 3.95;}
.v9-ok path{fill:none;stroke:var(--luz);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:22;stroke-dashoffset:22;animation:v9ok 4s infinite;}
@keyframes v9ok{0%,74%{stroke-dashoffset:22;}82%,94%{stroke-dashoffset:0;}100%{stroke-dashoffset:0;opacity:0;}}

/* 10 · inteligencia artificial: señales que cruzan la red y un chat que escribe */
.v10-conex path{fill:none;stroke:rgba(186,206,245,.12);stroke-width:1;}
.v10-senal path{fill:none;stroke:var(--luz-fuerte);stroke-width:2;stroke-linecap:round;stroke-dasharray:16 420;stroke-dashoffset:16;opacity:0;animation:v10senal 3.6s var(--d,0s) infinite cubic-bezier(.5,0,.3,1);}
@keyframes v10senal{0%{stroke-dashoffset:16;opacity:0;}4%{opacity:1;}58%{stroke-dashoffset:-200;opacity:1;}64%,100%{stroke-dashoffset:-200;opacity:0;}}
.v10-salida{fill:none;stroke:rgba(156,192,255,.5);stroke-width:1.2;stroke-dasharray:3 5;animation:flujo 2.4s linear infinite;}
.v10-nodos circle{fill:#0c111c;stroke:rgba(214,228,255,.55);stroke-width:1.2;animation:v10nodo 1.8s var(--d,0s) infinite;}
@keyframes v10nodo{0%,100%{fill:#0c111c;}12%{fill:rgba(156,192,255,.85);}40%{fill:#0c111c;}}
.v10-globo path{fill:#111a2b;stroke:var(--luz);stroke-width:1.2;stroke-linejoin:round;}
.v10-globo circle{fill:#eef3fc;animation:v10escribe 1.2s var(--d,0s) infinite;}
@keyframes v10escribe{0%,60%,100%{opacity:.25;transform:translateY(0);}30%{opacity:1;transform:translateY(-3px);}}
.v10-chispa{fill:var(--luz);opacity:.85;animation:v10chispa 3s ease-in-out infinite;transform-box:fill-box;transform-origin:center;}
@keyframes v10chispa{0%,100%{opacity:.35;}50%{opacity:1;}}

/* 11 · datos: las barras crecen y la tendencia se dibuja */
.v11-ejes path{fill:none;stroke:rgba(186,206,245,.3);stroke-width:1;}
.v11-ejes .v11-guia{stroke:rgba(186,206,245,.1);stroke-dasharray:3 5;}
.v11-barras rect{fill:rgba(156,192,255,.14);stroke:rgba(186,206,245,.5);stroke-width:1;transform-box:fill-box;transform-origin:50% 100%;animation:v11barra 6s var(--d,0s) infinite cubic-bezier(.3,.7,.2,1);}
.v11-barras .v11-ultima{fill:rgba(156,192,255,.4);stroke:var(--luz);}
@keyframes v11barra{0%{transform:scaleY(0);}18%,86%{transform:scaleY(1);}96%,100%{transform:scaleY(0);}}
.v11-linea{fill:none;stroke:var(--luz-fuerte);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:240;stroke-dashoffset:240;animation:v11linea 6s infinite;}
@keyframes v11linea{0%,22%{stroke-dashoffset:240;opacity:1;}46%,86%{stroke-dashoffset:0;opacity:1;}96%,100%{stroke-dashoffset:0;opacity:0;}}
.v11-punto{fill:var(--luz-fuerte);animation:v11aparece 6s infinite;}
.v11-onda{fill:none;stroke:var(--luz);transform-box:fill-box;transform-origin:center;animation:v11onda 2s infinite;}
@keyframes v11onda{0%{transform:scale(1);opacity:.9;}70%,100%{transform:scale(3.6);opacity:0;}}
@keyframes v11aparece{0%,44%{opacity:0;}48%,88%{opacity:1;}96%,100%{opacity:0;}}
.v11-kpi{animation:v11aparece 6s infinite;}
.v11-kpi rect{fill:rgba(156,192,255,.12);stroke:var(--luz);}
.v11-kpi text{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;fill:#eef3fc;}
.v11-kpi path{fill:var(--luz);}

/* 12 · cloud y ciberseguridad: escudo, anillos de protección y amenazas que no pasan */
.v12-anillo{fill:none;stroke:rgba(156,192,255,.36);stroke-width:1.2;stroke-dasharray:10 7;transform-origin:200px 200px;animation:giro 24s linear infinite;}
.v12-anillo-2{stroke:rgba(186,206,245,.16);stroke-dasharray:2 7;animation-duration:40s;animation-direction:reverse;}
.v12-amenaza{fill:#ffc8b8;animation:v12amenaza 4s var(--d,0s) infinite cubic-bezier(.4,0,.8,.6);}
@keyframes v12amenaza{0%{offset-distance:0%;opacity:0;}15%{opacity:.9;}70%{offset-distance:100%;opacity:.9;}80%,100%{offset-distance:100%;opacity:0;}}
.v12-escudo{fill:rgba(12,17,28,.94);stroke:rgba(214,228,255,.7);stroke-width:1.5;stroke-linejoin:round;}
.v12-scan{fill:var(--luz);opacity:.55;animation:v12scan 3.6s ease-in-out infinite alternate;}
@keyframes v12scan{from{transform:translateY(0);}to{transform:translateY(166px);}}
.v12-candado rect,.v12-candado path{fill:none;stroke:#dfe7f8;stroke-width:1.6;stroke-linecap:round;}
.v12-candado rect{fill:#141c2e;}
.v12-nube path{fill:#0c111c;stroke:rgba(214,228,255,.55);stroke-width:1.3;stroke-linejoin:round;}
.v12-nube .v12-sube{fill:none;stroke:var(--luz);stroke-linecap:round;animation:v12sube 2.4s infinite;}
@keyframes v12sube{0%{opacity:0;transform:translateY(3px);}40%,70%{opacity:1;transform:none;}100%{opacity:0;transform:translateY(-3px);}}

/* Los dibujos solo se mueven cuando están en pantalla */
.fx [data-anim]:not(.en-vista) *{animation-play-state:paused!important;}

/* =====================================================================
   CÓMO TRABAJAMOS
   ===================================================================== */
.metodo{padding:clamp(70px,12vh,140px) 0 clamp(60px,10vh,120px);}
.met-grid{
  max-width:var(--ancho);margin:0 auto;padding:clamp(24px,4vh,48px) var(--gutter);
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(30px,5vw,80px);align-items:center;
}
.met-p{color:var(--ink-soft);font-size:clamp(15.5px,1.2vw,18.5px);line-height:1.7;max-width:54ch;margin:22px 0 30px;}
.met-plano{margin:0;border:1px solid var(--panel-borde);background:rgba(6,9,17,.7);padding:clamp(10px,1.4vw,18px);}
.plano{display:block;width:100%;height:auto;}
.plano-cuad path{stroke:rgba(156,192,255,.07);}
.plano .trazo{fill:none;stroke:rgba(156,192,255,.62);stroke-width:1.1;}
.plano .eje{stroke-dasharray:14 4 2 4;stroke:rgba(156,192,255,.4);}
.plano text{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;fill:#b9c9ea;text-transform:uppercase;}
.plano .cj-firma{font-size:9.5px;letter-spacing:.05em;}
.plano .cj-marca{font-family:var(--f-marca);font-size:15px;letter-spacing:.14em;fill:#eef3fc;}
.met-principios{
  list-style:none;max-width:var(--ancho);margin:clamp(24px,5vh,56px) auto 0;padding:0 var(--gutter);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;
}
.met-principios li{border:1px solid var(--panel-borde);background:var(--panel);padding:26px 24px 28px;display:flex;flex-direction:column;gap:12px;transition:border-color .3s ease,background .3s ease;}
.met-principios li:hover{border-color:var(--panel-borde-f);background:rgba(13,17,28,.8);}
.pr-ico svg{width:26px;height:26px;fill:none;stroke:var(--luz);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;}
.met-principios h3{margin:0;font-family:var(--f-display);font-weight:600;font-size:20px;letter-spacing:-.03em;color:#f0f4fb;}
.met-principios p{color:#a3adbf;font-size:14.5px;line-height:1.55;}
.met-tec{max-width:var(--ancho);margin:0 auto;padding:28px var(--gutter) 0;display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;}
.met-tec-t{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--texto-3);}
.met-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
.met-chips li{font-size:12px;border:1px solid var(--panel-borde);padding:6px 11px;color:#c6cfdd;border-radius:999px;background:rgba(9,11,18,.5);}
@media (max-width:1000px){
  .met-grid{grid-template-columns:minmax(0,1fr);}
  .met-principios{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:600px){.met-principios{grid-template-columns:minmax(0,1fr);}}

/* =====================================================================
   NOSOTROS · tripulación
   ===================================================================== */
.nosotros{padding:clamp(70px,12vh,140px) 0;}
.nos-head{
  max-width:var(--ancho);margin:0 auto;padding:clamp(24px,4vh,44px) var(--gutter) 0;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,70px);align-items:end;
}
.nos-head p{color:var(--ink-soft);font-size:16.5px;line-height:1.7;max-width:62ch;}
/* Fila: [dato] [tarjeta] [∞] [tarjeta] [dato]; detrás, órbitas decorativas */
.tripulacion{
  --carta:clamp(170px,19vw,270px);--centro:clamp(56px,7.5vw,104px);
  max-width:1180px;margin:clamp(30px,5vh,60px) auto 0;padding:0 var(--gutter);
}
.trip-fila,.trip-linea{display:grid;grid-template-columns:minmax(0,1fr) var(--carta) var(--centro) var(--carta) minmax(0,1fr);gap:clamp(10px,1.6vw,24px);}
.trip-fila{position:relative;align-items:center;padding-block:clamp(26px,5vh,54px);}
.trip-fila>*{position:relative;z-index:1;}
.trip-dato-izq{grid-column:1;}
.trip-card[data-persona="abel"]{grid-column:2;}
.trip-infinito{grid-column:3;}
.trip-card[data-persona="ariel"]{grid-column:4;}
.trip-dato-der{grid-column:5;}
.p-abel{grid-column:2;}
.p-centro{grid-column:3;}
.p-ariel{grid-column:4;}

/* Órbitas y marcas de esquina detrás de las tarjetas */
.trip-fila>.trip-orbitas{position:absolute;inset:0;z-index:0;width:100%;height:100%;overflow:visible;pointer-events:none;}
.to-anillo{fill:none;stroke:rgba(186,206,245,.24);stroke-width:1;stroke-dasharray:2 7;animation:orbFlujo 60s linear infinite;}
.to-a2{stroke:rgba(186,206,245,.15);animation-duration:40s;animation-direction:reverse;}
.to-eje{fill:none;stroke:rgba(186,206,245,.09);stroke-dasharray:14 4 2 4;}
.to-cruz{fill:none;stroke:rgba(214,228,255,.42);stroke-width:1;}
.to-sat{fill:#eef4ff;offset-path:path('M20 210 A480 176 0 1 1 980 210 A480 176 0 1 1 20 210');offset-distance:30%;animation:infinito 30s linear infinite;}
.to-s2{offset-path:path('M128 210 A372 132 0 1 1 872 210 A372 132 0 1 1 128 210');offset-distance:70%;animation-duration:20s;animation-direction:reverse;fill:var(--luz);}

/* Lecturas tipo telemetría a cada lado */
.trip-dato{
  display:flex;flex-direction:column;gap:12px;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:#7d8597;opacity:.55;transition:opacity .6s ease,color .6s ease;
}
.trip-dato-izq{align-items:flex-end;text-align:right;}
.trip-dato-der{align-items:flex-start;}
.tripulacion[data-activo="abel"] .trip-dato-izq,.tripulacion[data-activo="ariel"] .trip-dato-der{opacity:1;color:#d2dae8;}
.td-k{font-size:10.5px;color:var(--luz);}
.td-fila{display:flex;align-items:center;gap:12px;}
.trip-dato-der .td-fila{flex-direction:row-reverse;justify-content:flex-end;}
.td-barras{display:inline-flex;align-items:flex-end;gap:3px;height:16px;}
.td-barras i{display:block;width:3px;height:100%;background:currentColor;transform:scaleY(.4);transform-origin:50% 100%;animation:barra 1.7s ease-in-out infinite;}
.td-barras i:nth-child(2){animation-delay:-.3s;}
.td-barras i:nth-child(3){animation-delay:-.9s;}
.td-barras i:nth-child(4){animation-delay:-.5s;}
.td-barras i:nth-child(5){animation-delay:-1.3s;}
.td-barras i:nth-child(6){animation-delay:-.7s;}
.td-fila+.td-fila .td-barras i{animation-duration:2.3s;}
@keyframes barra{0%,100%{transform:scaleY(.25);}50%{transform:scaleY(1);}}
.tripulacion[data-activo="abel"] .trip-dato-izq .td-barras,.tripulacion[data-activo="ariel"] .trip-dato-der .td-barras{color:var(--luz);}
.td-guia{position:relative;display:block;width:min(130px,100%);height:1px;margin-top:4px;background:linear-gradient(90deg,rgba(186,206,245,0),rgba(186,206,245,.45));}
.trip-dato-der .td-guia{background:linear-gradient(270deg,rgba(186,206,245,0),rgba(186,206,245,.45));}
.td-guia::after{content:"";position:absolute;top:-3px;width:7px;height:7px;border-radius:50%;border:1px solid rgba(214,228,255,.6);background:#05060c;}
.trip-dato-izq .td-guia::after{right:-4px;}
.trip-dato-der .td-guia::after{left:-4px;}
.trip-card{
  position:relative;display:block;width:100%;aspect-ratio:4/5;padding:0;margin:0;
  border:1px solid var(--panel-borde);background:#0b0d14;overflow:hidden;isolation:isolate;
  color:inherit;font:inherit;text-align:left;cursor:pointer;transition:border-color .5s ease;
  transform-style:preserve-3d;
}
.trip-foto{position:absolute;inset:0;z-index:0;}
.trip-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;filter:grayscale(1) brightness(.42) contrast(1.05);transform:scale(1.05);transition:filter .7s ease,transform 1s cubic-bezier(.2,.7,.2,1);}
.trip-card::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 60% 50% at 50% 42%,rgba(5,6,10,0) 35%,rgba(5,6,10,.82) 100%);}
.trip-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;z-index:2;pointer-events:none;background:linear-gradient(rgba(5,6,10,0),rgba(5,6,10,.88));}
.trip-card{box-shadow:0 0 0 0 rgba(160,195,255,0);transition:border-color .5s ease,box-shadow .7s ease;}
.trip-card.activa{border-color:rgba(220,232,255,.55);box-shadow:0 0 0 1px rgba(220,232,255,.12),0 24px 70px -28px rgba(160,195,255,.45);}
.trip-card.activa .trip-foto img{filter:grayscale(1) brightness(1) contrast(1.1);transform:scale(1);}
.trip-card:not(.activa):hover .trip-foto img{filter:grayscale(1) brightness(.62) contrast(1.05);}
.trip-nombre{position:absolute;z-index:3;left:clamp(14px,2vw,22px);bottom:clamp(12px,1.6vw,18px);font-family:var(--f-display);font-weight:600;font-size:clamp(18px,1.9vw,28px);letter-spacing:-.04em;color:#eef2f9;}
.trip-infinito svg{display:block;width:100%;height:auto;overflow:visible;}
.inf-trazo{fill:none;stroke:rgba(206,222,255,.75);stroke-width:2.2;}
.inf-punto{fill:#fff;offset-path:path('M50,30 C50,19 41,10 30,10 C19,10 10,19 10,30 C10,41 19,50 30,50 C41,50 50,41 50,30 C50,19 59,10 70,10 C81,10 90,19 90,30 C90,41 81,50 70,50 C59,50 50,41 50,30 Z');animation:infinito 6s linear infinite;}
@keyframes infinito{from{offset-distance:0%;}to{offset-distance:100%;}}
.trip-linea{position:relative;height:24px;margin-top:20px;align-items:center;}
.trip-linea::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(186,206,245,.3);transform:scaleX(var(--l,1));}
.trip-punto{justify-self:center;position:relative;z-index:1;width:9px;height:9px;border-radius:50%;background:#59627a;transition:background .4s ease,box-shadow .4s ease,transform .4s ease;}
.trip-punto.activo{background:var(--luz-fuerte);box-shadow:0 0 0 4px rgba(156,192,255,.18),0 0 14px rgba(156,192,255,.9);transform:scale(1.25);}
.trip-punto.activo::before{content:"";position:absolute;left:50%;bottom:100%;width:1px;height:20px;background:linear-gradient(transparent,var(--luz-fuerte));}
.trip-punto.p-centro{background:transparent;border:1px solid rgba(186,206,245,.6);}
.trip-panel{
  max-width:880px;margin:16px auto 0;border:1px solid var(--panel-borde);background:rgba(8,10,17,.8);
  padding:clamp(20px,3vw,34px) clamp(20px,3.4vw,44px);
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(14px,3vw,48px);align-items:start;
}
.trip-panel-id{position:relative;padding-left:26px;}
.trip-marca{position:absolute;left:0;top:.7em;width:8px;height:8px;background:var(--luz);box-shadow:0 0 12px rgba(156,192,255,.9);}
.trip-panel h3{margin:0;font-family:var(--f-display);font-weight:600;font-size:clamp(26px,3vw,40px);letter-spacing:-.045em;line-height:1.05;color:#f4f6fb;}
.trip-rol{display:block;margin-top:12px;font-size:11.5px;letter-spacing:.18em;color:var(--texto-2);}
.trip-panel p{margin:0;color:#c2cad8;font-size:clamp(15px,1.3vw,18px);line-height:1.6;}
.trip-pista{margin-top:12px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#6b7386;text-align:center;}
@media (max-width:900px){
  .nos-head{grid-template-columns:minmax(0,1fr);}
  .trip-dato{display:none;}
  .tripulacion{--carta:clamp(150px,30vw,240px);}
}
@media (max-width:700px){.trip-panel{grid-template-columns:minmax(0,1fr);}}
@media (max-width:560px){
  .tripulacion{--centro:44px;}
  .trip-fila,.trip-linea{grid-template-columns:0 minmax(0,1fr) var(--centro) minmax(0,1fr) 0;gap:8px;}
  .to-cruz{display:none;}
}

/* =====================================================================
   CONTACTO (se mantiene; solo se adapta al fondo)
   ===================================================================== */
.contacto{padding:clamp(70px,12vh,140px) 0 clamp(70px,10vh,120px);}
.contacto .wrap{padding-top:clamp(24px,4vh,44px);}
.contacto .section-head h2{font-family:var(--f-display);font-weight:600;font-size:clamp(32px,4.4vw,66px);line-height:1.02;letter-spacing:-.04em;}
.contact-tile{background:rgba(9,11,18,.55);}
footer{border-top-color:var(--panel-borde);}

/* =====================================================================
   PÁGINA DE MÉTODO Y PROYECTOS
   ===================================================================== */
.pp-cabecera{padding:calc(140px + env(safe-area-inset-top,0px)) 0 clamp(50px,9vh,110px);}
.pp-cabecera .sec-bar{margin-bottom:clamp(24px,4vh,44px);}
.pp-cab-grid{max-width:var(--ancho);margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(24px,4vw,70px);align-items:end;}
.pp-cabecera h1{font-family:var(--f-display);font-weight:300;font-size:clamp(42px,6.4vw,104px);line-height:1;letter-spacing:-.05em;color:#f4f6fb;margin:0;text-wrap:balance;}
.pp-cabecera p{color:var(--ink-soft);font-size:clamp(15.5px,1.2vw,18.5px);line-height:1.7;max-width:46ch;}
@media (max-width:900px){.pp-cab-grid{grid-template-columns:minmax(0,1fr);}}

/* Fases: una línea que se ilumina con el scroll y una «nave» que la recorre */
.fases{padding:clamp(30px,6vh,70px) 0 clamp(60px,10vh,120px);overflow-x:clip;}
.ruta{position:relative;max-width:1100px;margin:clamp(20px,4vh,40px) auto 0;padding:0 var(--gutter);}
.ruta-eje{position:absolute;top:10px;bottom:10px;left:calc(var(--gutter) + 27px);width:1px;background:rgba(186,206,245,.16);}
.ruta-luz{position:absolute;inset:0;background:linear-gradient(var(--luz),var(--luz-fuerte));transform:scaleY(var(--avance,1));transform-origin:50% 0;box-shadow:0 0 12px rgba(156,192,255,.8);}
.ruta-nave{position:absolute;left:50%;top:calc(var(--avance,1) * 100%);width:11px;height:11px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff;box-shadow:0 0 16px 4px rgba(170,200,255,.85);}
.fase{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);gap:clamp(16px,3vw,40px);padding:clamp(22px,4vh,40px) 0;}
.fase-n{position:relative;z-index:1;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-mono);font-size:13px;letter-spacing:.06em;color:#8f97a8;background:#070910;border:1px solid rgba(186,206,245,.2);transition:color .5s ease,border-color .5s ease,box-shadow .5s ease;}
.fase.activa .fase-n{color:#eef3fc;border-color:var(--luz);box-shadow:0 0 0 5px rgba(156,192,255,.08),0 0 22px rgba(156,192,255,.35);}
.fase-c{border:1px solid var(--panel-borde);background:var(--panel);padding:clamp(20px,2.6vw,32px);transition:border-color .5s ease,background .5s ease;}
.fase.activa .fase-c{border-color:var(--panel-borde-f);background:rgba(12,16,27,.82);}
.fase h3{margin:0;font-family:var(--f-display);font-weight:600;font-size:clamp(22px,2.4vw,34px);letter-spacing:-.04em;color:#f2f5fb;}
.fase p{margin-top:10px;color:#aab3c4;font-size:15.5px;line-height:1.65;max-width:62ch;}
.fx:not(.fx-quieto) .fase .fase-c{opacity:.45;}
.fx:not(.fx-quieto) .fase.activa .fase-c{opacity:1;}

/* Proyectos: tarjetas que entran desde los lados */
.pj{padding:clamp(40px,8vh,90px) 0 clamp(60px,10vh,120px);overflow-x:clip;}
.pj-head{max-width:var(--ancho);margin:0 auto;padding:clamp(20px,4vh,40px) var(--gutter) 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,60px);align-items:end;}
.pj-head p{color:var(--ink-soft);font-size:16.5px;line-height:1.7;max-width:52ch;}
.pj-grid{max-width:var(--ancho);margin:clamp(30px,6vh,64px) auto 0;padding:0 var(--gutter);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,34px);perspective:1400px;}
.fases-lista{list-style:none;margin:0;padding:0;}
.mision{position:relative;}
.mision-in{position:relative;height:100%;display:flex;flex-direction:column;border:1px solid var(--panel-borde);background:rgba(9,11,18,.84);transform-style:preserve-3d;transition:border-color .4s ease;}
.mision:hover .mision-in{border-color:var(--panel-borde-f);}
.mision-in::before,.mision-in::after{content:"";position:absolute;width:14px;height:14px;pointer-events:none;border:solid rgba(214,228,255,.7);z-index:3;}
.mision-in::before{left:-1px;top:-1px;border-width:1px 0 0 1px;}
.mision-in::after{right:-1px;bottom:-1px;border-width:0 1px 1px 0;}
.mision-img{position:relative;aspect-ratio:1000/457;overflow:hidden;background:#0b0e16;border-bottom:1px solid var(--panel-borde);}
.mision-img img{width:100%;height:100%;object-fit:cover;object-position:50% 0;filter:grayscale(.85) brightness(.75) contrast(1.05);transform:scale(1.03);transition:filter .7s ease,transform 1.1s cubic-bezier(.2,.7,.2,1);}
.mision:hover .mision-img img{filter:none;transform:scale(1.07);}
.mision-img::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px);mix-blend-mode:overlay;}
.mision-brillo{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .4s ease;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(170,200,255,.14),transparent 45%);}
.mision:hover .mision-brillo{opacity:1;}
.mision-cuerpo{padding:clamp(22px,2.6vw,32px);display:flex;flex-direction:column;gap:14px;flex-grow:1;}
.mision-meta{display:flex;justify-content:space-between;gap:12px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3);}
.mision-meta span{white-space:nowrap;}
.mision-meta span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;text-transform:none;letter-spacing:.04em;}
.mision h3{margin:0;font-family:var(--f-display);font-weight:600;font-size:clamp(24px,2.4vw,34px);letter-spacing:-.04em;color:#f2f5fb;}
.mision p{color:#aab3c4;font-size:15px;line-height:1.6;flex-grow:1;}
.mision .chip-row{display:flex;flex-wrap:wrap;gap:8px;}
.mision .chip{font-family:var(--f-mono);font-size:11.5px;border:1px solid var(--panel-borde);padding:5px 10px;color:#c6cfdd;border-radius:999px;}
.mision-ir{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;margin-top:6px;font-family:var(--f-mono);font-size:13.5px;color:#eef3fc;border:1px solid rgba(214,228,255,.35);border-radius:999px;padding:10px 16px;transition:background .25s ease,color .25s ease;}
.mision-ir:hover{background:#e9f0fd;color:#070910;}
.mision-ir .iman-in{display:inline-flex;align-items:center;gap:10px;}
@media (max-width:860px){.pj-grid{grid-template-columns:minmax(0,1fr);}.pj-head{grid-template-columns:minmax(0,1fr);}}

.pp-cta{padding:clamp(60px,10vh,120px) 0 clamp(80px,12vh,150px);text-align:center;}
.pp-cta h2{margin:0 auto 30px;max-width:16ch;}

/* ---------- Menos movimiento ---------- */
@media (prefers-reduced-motion:reduce){
  [data-anim] *,.inf-punto,.hero-scroll-cue i,.orb-anillo{animation:none!important;}
  .partido .w{filter:none;transform:none;opacity:1;}
  .cap,.cap-vis,.trip-foto img,.mision-img img{transition:none;}
}