/* RUTA 24 · paginas.css — lo que comparten la portada y las páginas de servicio (desde 2026-10-17):
   transiciones entre páginas, nav con servicios, botones, menú de teléfono, panel de contacto,
   portales de la portada, portada de cada servicio, dispositivos donde viven las demos,
   pestañas por industria, filas de casos, listas de "lo que ya funciona", auditoría y aviso.
   Mismas reglas que styles.css: escala, no peso · líneas finas, no cajas · orgánico (píldoras y
   esquinas grandes) · por cuadro solo transform y opacity. */

/* ---------- transición entre páginas ----------
   Chrome y Safari: la página nueva se abre en un círculo que crece desde donde tocaste (el script del
   <head> lo anima); la vieja se hunde un poco. Los demás navegadores cambian de página normal. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-hunde .95s cubic-bezier(.7,0,.2,1) both}
::view-transition-new(root){animation:none}
::view-transition-group(nav){animation-duration:.95s}
@keyframes vt-hunde{to{transform:scale(.93);opacity:.35}}
.nav{view-transition-name:nav}
html.vt-llegada .umbral{display:none}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

/* ---------- nav: servicios, botón de contacto y menú ---------- */
.nav-logo{visibility:visible;color:transparent} /* el wordmark anclado se dibuja encima; esto lo hace clicable */
.nav-der{display:flex;align-items:center;gap:clamp(14px,2vw,28px)}
.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.nav-links a[aria-current="page"]{color:var(--fg)}
.nav-cta{display:inline-flex;align-items:center;gap:8px;padding:9px 16px 9px 14px;border-radius:999px;background:var(--fg);color:var(--bg);
  transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease)}
/* el latido es un anillo (::after) que crece y se desvanece: solo transform y opacity (con box-shadow animado
   la página repintaba el nav en cada cuadro, para siempre) */
.nav-cta i{position:relative;width:6px;height:6px;border-radius:50%;background:var(--acento)}
.nav-cta i::after,.va-estado i::after{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(var(--acento-rgb),.55);animation:latir 2.4s var(--ease) infinite}
@keyframes latir{0%{transform:scale(1);opacity:1}70%,100%{transform:scale(4);opacity:0}}
.nav-menu{display:none;padding:9px 4px}
@media (max-width:900px){
  .nav .nav-links{display:none}
  .nav-menu{display:inline-flex}
  .nav-cta{padding:8px 13px 8px 11px}
}

/* menú de teléfono: se abre en un círculo desde el botón, como el paso entre páginas */
.menu{position:fixed;inset:0;z-index:90;background:#030305;color:#E6E5E0;display:flex;flex-direction:column;justify-content:space-between;
  padding:calc(var(--nav-h) + 24px) var(--gutter) calc(var(--gutter) + env(safe-area-inset-bottom));
  clip-path:circle(0 at calc(100% - 40px) 32px);visibility:hidden;transition:clip-path .8s cubic-bezier(.7,0,.2,1),visibility 0s .8s}
.menu.abierto{clip-path:circle(150% at calc(100% - 40px) 32px);visibility:visible;transition:clip-path .9s cubic-bezier(.7,0,.2,1),visibility 0s}
.menu-cerrar{position:absolute;top:0;right:var(--gutter);height:var(--nav-h);display:flex;align-items:center}
.menu-lista{display:flex;flex-direction:column;gap:6px}
.menu-lista a{display:flex;align-items:baseline;gap:14px;font-size:clamp(40px,11vw,72px);line-height:1.02;letter-spacing:-.04em;
  transform:translateY(40px);opacity:0;transition:transform .8s var(--ease),opacity .6s var(--ease)}
.menu-lista a .mono{color:#5B5B62;font-size:11px;transform:translateY(-.9em)}
.menu-lista a em{font-family:var(--f-serif);font-style:italic}
.menu.abierto .menu-lista a{transform:none;opacity:1}
.menu.abierto .menu-lista a:nth-child(1){transition-delay:.18s}
.menu.abierto .menu-lista a:nth-child(2){transition-delay:.24s}
.menu.abierto .menu-lista a:nth-child(3){transition-delay:.3s}
.menu.abierto .menu-lista a:nth-child(4){transition-delay:.36s}
.menu-pie{display:flex;flex-direction:column;gap:10px;color:#8D8D93}

/* ---------- botones ---------- */
.boton{position:relative;display:inline-flex;align-items:center;gap:12px;padding:16px 24px 16px 26px;border-radius:999px;border:1px solid var(--stroke);
  font-size:15px;line-height:1;white-space:nowrap;color:var(--fg);transition:border-color .4s var(--ease),background .4s var(--ease),color .4s var(--ease)}
.boton svg{width:16px;height:16px;transition:transform .5s var(--ease)}
.boton-lleno{background:var(--acento);border-color:var(--acento);color:#fff}
html:not(.en-taller) .boton-lleno{color:#030305}
@media (hover:hover){
  .boton:hover{border-color:var(--fg)}
  .boton:hover svg{transform:translateX(4px)}
  .boton-lleno:hover{border-color:var(--acento);filter:none}
}
.boton:active{transform:scale(.97)}
.acciones{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- panel de contacto (se abre desde cualquier página) ---------- */
.panel-velo{position:fixed;inset:0;z-index:80;background:rgba(3,3,5,.55);opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s .5s}
.panel-velo.abierto{opacity:1;visibility:visible;transition:opacity .5s var(--ease)}
.panel{position:fixed;z-index:81;top:10px;right:10px;bottom:10px;width:min(520px,calc(100vw - 20px));border-radius:28px;background:#0B0B0E;color:#E6E5E0;
  box-shadow:0 0 0 1px #1C1C21,0 40px 120px -30px rgba(0,0,0,.8);display:flex;flex-direction:column;
  transform:translateX(calc(100% + 24px));visibility:hidden;transition:transform .75s cubic-bezier(.7,0,.2,1),visibility 0s .75s;
  --fg:#E6E5E0;--fg-2:#8D8D93;--fg-3:#5B5B62;--line:#26262C;--acento:#3D6BFF;--acento-rgb:61,107,255;--stroke:rgba(230,229,224,.28);--bg:#0B0B0E}
.panel .boton-lleno{color:#030305}
.panel.abierto{transform:none;visibility:visible;transition:transform .75s cubic-bezier(.7,0,.2,1),visibility 0s}
.panel-cabeza{display:flex;justify-content:space-between;align-items:center;padding:22px 26px 0}
.panel-cabeza .mono{color:var(--fg-3)}
.panel-cuerpo{flex:1;overflow-y:auto;padding:18px 26px 26px;overscroll-behavior:contain}
.panel h2{font-size:clamp(40px,4.4vw,60px);line-height:1;letter-spacing:-.04em;margin-bottom:10px}
.panel-sub{color:var(--fg-2);margin-bottom:26px;max-width:36ch}
.campo{display:flex;flex-direction:column;gap:8px;margin-bottom:22px}
.campo > span{color:var(--fg-3)}
.campo input,.campo textarea{font:inherit;font-size:17px;color:var(--fg);background:none;border:0;border-bottom:1px solid var(--line);padding:8px 0 10px;outline:none;border-radius:0;
  transition:border-color .35s var(--ease)}
.campo textarea{resize:none;min-height:96px;line-height:1.45}
.campo input:focus,.campo textarea:focus{border-color:var(--fg)}
.campo input::placeholder,.campo textarea::placeholder{color:var(--fg-3)}
.opciones{display:flex;flex-wrap:wrap;gap:8px}
.opcion{padding:10px 15px;border-radius:999px;border:1px solid var(--line);font-size:14px;line-height:1;color:var(--fg-2);
  transition:border-color .3s var(--ease),background .3s var(--ease),color .3s var(--ease)}
.opcion[aria-pressed="true"]{background:var(--fg);border-color:var(--fg);color:#0B0B0E}
@media (hover:hover){.opcion:hover{border-color:var(--fg-2);color:var(--fg)}}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.panel-enviar{width:100%;justify-content:center;margin-top:6px}
.panel-nota{margin-top:16px;color:var(--fg-3);font-size:13px;line-height:1.5}
.panel-nota a{text-decoration:underline;text-underline-offset:.2em}
.panel-otros{display:flex;gap:18px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.panel-listo{display:none;flex-direction:column;align-items:flex-start;gap:16px;padding-top:12vh}
.panel.enviado form{display:none}
.panel.enviado .panel-listo{display:flex}
.palomita{width:64px;height:64px}
.palomita circle,.palomita path{fill:none;stroke:var(--acento);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.palomita circle{stroke-dasharray:190;stroke-dashoffset:190}
.palomita path{stroke-dasharray:40;stroke-dashoffset:40}
.panel.enviado .palomita circle{animation:trazo .9s var(--ease) .1s forwards}
.panel.enviado .palomita path{animation:trazo .5s var(--ease) .7s forwards}
@keyframes trazo{to{stroke-dashoffset:0}}
.panel-error{color:#FF8A7A;font-size:14px;margin-top:10px;min-height:1em}
@media (max-width:900px){
  .panel{top:auto;left:0;right:0;bottom:0;width:100%;height:min(92svh,780px);border-radius:28px 28px 0 0;transform:translateY(105%)}
}

/* ---------- portada: los tres servicios como portales ----------
   Tarjetas grandes que se apilan con el scroll (sticky); la de abajo se hunde un poco cuando la
   siguiente la cubre (paginas.js, solo transform y la opacidad de su sombra). */
.servicios-portada{padding-bottom:clamp(40px,calc(var(--vh) * 6),96px)}
.portales{margin-top:clamp(48px,calc(var(--vh) * 8),110px);display:flex;flex-direction:column;gap:clamp(56px,calc(var(--vh) * 12),140px)}
.portal{position:sticky;top:calc(var(--nav-h) + 8px + var(--i,0) * 14px);height:min(calc(100svh - var(--nav-h) - 40px),760px);min-height:540px;
  border-radius:clamp(22px,2.6vw,40px);background:#08080B;color:#E6E5E0;overflow:hidden;transform-origin:50% 0;will-change:transform;
  box-shadow:0 0 0 1px #1C1C21,0 -40px 90px -50px rgba(0,0,0,.95)}
.portal-enlace{position:absolute;inset:0;display:grid;grid-template-columns:5fr 7fr;column-gap:clamp(24px,3vw,56px);padding:clamp(24px,3vw,52px)}
.portal-luz{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .6s var(--ease);
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),rgba(61,107,255,.16),transparent 60%)}
.portal-sombra{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;z-index:3;will-change:opacity}
@media (hover:hover){.portal:hover .portal-luz{opacity:1}}
.portal-info{position:relative;z-index:2;display:flex;flex-direction:column;gap:18px;min-width:0}
.portal-num{display:flex;justify-content:space-between;color:#5B5B62}
.portal h3{font-size:clamp(46px,6vw,112px);line-height:.92;letter-spacing:-.045em;font-weight:400;margin-top:auto}
.portal h3 em{font-family:var(--f-serif);font-style:italic;letter-spacing:-.02em}
.portal-que{color:#8D8D93;font-size:clamp(16px,1.2vw,19px);max-width:36ch}
.portal-lista{display:flex;flex-wrap:wrap;gap:6px 18px;color:#8D8D93}
.portal-lista li::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:#3D6BFF;margin-right:8px;vertical-align:middle}
.portal-ir{align-self:flex-start;margin-top:8px;border-color:rgba(230,229,224,.28);color:#E6E5E0}
.portal:hover .portal-ir{border-color:#E6E5E0;background:#E6E5E0;color:#08080B}
.portal:hover .portal-ir svg{transform:translateX(4px)}
.portal-vista{position:relative;z-index:1;border-radius:clamp(16px,1.8vw,26px);overflow:hidden;background:#0E0E12;box-shadow:0 0 0 1px #1C1C21}
@media (max-width:900px){
  .portal{height:auto;min-height:0;position:sticky;top:calc(var(--nav-h) + var(--i,0) * 10px)}
  .portal-enlace{position:relative;grid-template-columns:1fr;row-gap:22px;padding:22px}
  .portal-vista{order:-1;aspect-ratio:4/3}
  .portal h3{margin-top:0}
}

/* vista 01 · web: una página que se recorre sola y avisos de lo que pasa en ella */
.vw-marco{position:absolute;inset:0;display:flex;flex-direction:column}
.vw-barra{display:flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-bottom:1px solid #1C1C21;flex:0 0 auto}
.vw-barra i{width:9px;height:9px;border-radius:50%;background:#26262C}
.vw-barra span{margin-left:12px;padding:5px 14px;border-radius:999px;background:#16161B;color:#8D8D93;font-family:var(--f-mono);font-size:10px;letter-spacing:.06em}
.vw-pagina{position:relative;flex:1;overflow:hidden}
.vw-pagina img{position:absolute;left:0;top:0;width:100%;height:auto;animation:vw-recorre 14s linear infinite alternate;animation-play-state:paused}
@keyframes vw-recorre{from{transform:translateY(0)}to{transform:translateY(calc(-100% + 340px))}}
.vw-avisos{position:absolute;right:18px;bottom:18px;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.aviso{display:flex;align-items:center;gap:10px;padding:10px 16px 10px 12px;border-radius:999px;background:rgba(245,244,239,.96);color:#121211;font-size:13px;line-height:1.2;
  box-shadow:0 14px 40px -12px rgba(0,0,0,.6);opacity:0;transform:translateY(16px) scale(.96);animation:aviso 9s var(--ease) infinite;animation-play-state:paused}
.aviso b{font-weight:500}
.aviso svg{width:20px;height:20px;flex:0 0 auto}
.aviso svg circle{fill:#1F2CE8}
.aviso svg path{fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.aviso:nth-child(2){animation-delay:3s}
.aviso:nth-child(3){animation-delay:6s}
@keyframes aviso{0%{opacity:0;transform:translateY(16px) scale(.96)}6%,30%{opacity:1;transform:none}38%,100%{opacity:0;transform:translateY(-10px) scale(.98)}}

/* vista 02 · automatización: un proceso corriendo solo */
.va-svg{position:absolute;inset:0;width:100%;height:100%}
.va-svg .ruta{fill:none;stroke:#26262C;stroke-width:1.5}
.va-svg .nodo{fill:#0E0E12;stroke:#3A3A42;stroke-width:1.5}
.va-svg .nodo-luz{fill:#3D6BFF;opacity:0;animation:nodo 6s ease-in-out infinite;animation-play-state:paused}
@keyframes nodo{0%,100%{opacity:0}8%,22%{opacity:.9}36%{opacity:0}}
.va-svg text{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;fill:#8D8D93}
.va-svg .paquete{fill:#E6E5E0}
.va-estado{position:absolute;left:18px;top:18px;display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:#16161B;color:#E6E5E0}
.va-estado i{position:relative;width:7px;height:7px;border-radius:50%;background:#3D6BFF}
.va-estado i::after{background:rgba(61,107,255,.55);animation-duration:2s;animation-play-state:paused}
.va-bitacora{position:absolute;left:18px;right:18px;bottom:16px;display:flex;flex-direction:column;gap:6px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.04em;color:#5B5B62}
.va-bitacora span{opacity:0;animation:linea 6s var(--ease) infinite;animation-play-state:paused}
.va-bitacora span:nth-child(2){animation-delay:1.5s}
.va-bitacora span:nth-child(3){animation-delay:3s}
@keyframes linea{0%{opacity:0;transform:translateY(6px)}8%,70%{opacity:1;transform:none}85%,100%{opacity:0}}

/* vista 03 · marketing: un reel que se publica y la gente que responde */
.vm-escena{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:clamp(16px,3vw,44px)}
.vm-tel{position:relative;width:min(44%,240px);aspect-ratio:9/18.5;border-radius:30px;background:#16161B;box-shadow:0 0 0 1px #2A2A31,0 30px 80px -30px rgba(0,0,0,.9);overflow:hidden}
.vm-reel{position:absolute;inset:7px;border-radius:24px;overflow:hidden;background:#101833}
.vm-reel::before{content:"";position:absolute;width:160%;aspect-ratio:1;left:-30%;top:-10%;border-radius:50%;
  background:radial-gradient(circle,rgba(61,107,255,.75),rgba(61,107,255,0) 62%);animation:deriva 9s ease-in-out infinite alternate;animation-play-state:paused}
@keyframes deriva{to{transform:translate(18%,30%) scale(.8)}}
.vm-barras{position:absolute;left:12px;right:12px;top:12px;display:flex;gap:4px;z-index:2}
.vm-barras i{flex:1;height:2px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden;position:relative}
.vm-barras i::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left;animation:barra 9s linear infinite;animation-play-state:paused}
.vm-barras i:nth-child(2)::after{animation-name:barra2}
.vm-barras i:nth-child(3)::after{animation-name:barra3}
@keyframes barra{0%{transform:scaleX(0)}33%,100%{transform:scaleX(1)}}
@keyframes barra2{0%,33%{transform:scaleX(0)}66%,100%{transform:scaleX(1)}}
@keyframes barra3{0%,66%{transform:scaleX(0)}100%{transform:scaleX(1)}}
.vm-gancho{position:absolute;left:16px;right:16px;top:38%;z-index:2;font-family:var(--f-display);font-weight:800;font-stretch:125%;font-size:clamp(17px,1.7vw,24px);line-height:1;color:#fff;letter-spacing:-.01em}
.vm-gancho span{position:absolute;left:0;right:0;opacity:0;animation:gancho 9s var(--ease) infinite;animation-play-state:paused}
.vm-gancho span:nth-child(2){animation-delay:3s}
.vm-gancho span:nth-child(3){animation-delay:6s}
@keyframes gancho{0%{opacity:0;transform:translateY(14px)}4%,30%{opacity:1;transform:none}34%,100%{opacity:0;transform:translateY(-8px)}}
.vm-corazones{position:absolute;right:14px;bottom:60px;width:30px;height:160px;z-index:2}
.vm-corazones svg{position:absolute;bottom:0;left:4px;width:20px;height:20px;opacity:0;animation:sube 3.6s ease-out infinite;animation-play-state:paused}
.vm-corazones svg:nth-child(2){animation-delay:1.2s;left:0}
.vm-corazones svg:nth-child(3){animation-delay:2.4s;left:9px}
.vm-corazones path{fill:#fff}
@keyframes sube{0%{opacity:0;transform:translateY(0) scale(.6)}15%{opacity:.95}100%{opacity:0;transform:translateY(-140px) scale(1.1)}}
.vm-comenta{position:absolute;left:12px;right:12px;bottom:14px;z-index:2;padding:9px 13px;border-radius:999px;background:rgba(0,0,0,.4);color:#fff;font-size:12px}
.vm-avisos{display:flex;flex-direction:column;gap:10px;width:min(46%,260px)}
.vm-avisos .aviso{border-radius:18px;padding:12px 16px 12px 12px;animation-duration:9s}
@media (max-width:900px){ .vm-avisos{display:none} .vm-tel{width:min(46%,200px)} }
/* las demos que no se ven (paginas.js pone .demo-fuera) tienen todas sus animaciones en pausa: una animación
   infinita fuera de pantalla sigue pidiendo cuadros al navegador aunque nadie la vea */
.demo-fuera *,.demo-fuera *::before,.demo-fuera *::after{animation-play-state:paused!important}
/* igual con la vista de un portal que el siguiente ya cubre (paginas.js pone .cubierto) */
.portal.cubierto .portal-vista *,.portal.cubierto .portal-vista *::before,.portal.cubierto .portal-vista *::after{animation-play-state:paused!important}
/* las vistas se animan solo cuando su portal está a la vista (paginas.js pone .en-vista) */
.en-vista .vw-pagina img,.en-vista .aviso,.en-vista .nodo-luz,.en-vista .va-bitacora span,
.en-vista .vm-reel::before,.en-vista .vm-barras i::after,.en-vista .vm-gancho span,.en-vista .vm-corazones svg,.en-vista .va-estado i::after{animation-play-state:running}

/* ---------- la señal que acompaña al satélite en Marketing (mismo centro, misma trayectoria) ---------- */
.senal{position:absolute;left:50%;top:50%;width:var(--sat-w);height:calc(var(--sat-w) * .5625);margin:calc(var(--sat-w) * -.28125) 0 0 calc(var(--sat-w) * -.5);z-index:-2;pointer-events:none;will-change:transform}
.senal i{position:absolute;left:50%;top:50%;width:46%;aspect-ratio:1;margin:-23% 0 0 -23%;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(61,107,255,.55);opacity:0;animation:onda 4.2s cubic-bezier(.2,.6,.3,1) infinite}
.senal i:nth-child(2){animation-delay:1.4s}
.senal i:nth-child(3){animation-delay:2.8s}
/* las ondas solo corren mientras el satélite cruza la pantalla (paginas.js pone .en-vista) */
.senal i{animation-play-state:paused}
.senal.en-vista i{animation-play-state:running}
@keyframes onda{0%{opacity:0;transform:scale(.35)}12%{opacity:.9}100%{opacity:0;transform:scale(1.9)}}
@media (prefers-reduced-motion:reduce){.senal i{animation:none}}

/* ---------- banda: auditoría gratis (portada) ---------- */
.banda{display:grid;grid-template-columns:2fr 6fr 4fr;column-gap:var(--gutter);align-items:center;padding:clamp(48px,calc(var(--vh) * 7),96px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.banda-sec{padding-bottom:0}
.va-svg text{font-size:13px}
@media (max-width:900px){ .va-svg text{display:none} }
.banda .mono{color:var(--fg-3)}
.banda h3{font-size:clamp(30px,3.4vw,58px);line-height:1.02;letter-spacing:-.03em;font-weight:400}
.banda .acciones{justify-content:flex-end}
@media (max-width:900px){ .banda{grid-template-columns:1fr;row-gap:18px} .banda .acciones{justify-content:flex-start} }

/* ---------- portada de un servicio ---------- */
.sv-hero{min-height:calc(var(--vh) * 100);display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);grid-template-rows:auto 1fr auto auto;
  padding-top:calc(var(--nav-h) + clamp(28px,calc(var(--vh) * 6),80px));padding-bottom:var(--gutter)}
.sv-meta{grid-column:1/-1;display:flex;gap:28px;color:var(--fg-3)}
.sv-meta b{font-weight:400;color:var(--fg)}
.sv-titulo{grid-column:1/9;grid-row:2;align-self:center;font-size:clamp(54px,8.4vw,168px);line-height:.9;letter-spacing:-.05em;font-weight:400;margin:clamp(28px,calc(var(--vh) * 5),64px) 0}
.sv-titulo .ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.sv-titulo .ln > span{display:inline-block;will-change:transform}
html.js .sv-titulo .ln > span{transform:translateY(108%)}
.sv-titulo em{font-family:var(--f-serif);font-style:italic;letter-spacing:-.025em}
.hero-forma{grid-column:9/13;grid-row:2;align-self:center;width:100%;aspect-ratio:4/3;pointer-events:none}
.sv-lead{grid-column:1/7;grid-row:3;font-size:clamp(17px,1.4vw,22px);line-height:1.45;color:var(--fg-2);max-width:44ch}
.sv-hero .acciones{grid-column:7/13;grid-row:3;justify-content:flex-end;align-self:end}
.sv-indice{grid-column:1/-1;grid-row:4;display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:clamp(36px,calc(var(--vh) * 6),72px);padding-top:18px;border-top:1px solid var(--line);color:var(--fg-3)}
.sv-indice a{transition:color .3s var(--ease)}
.sv-indice a:hover{color:var(--fg)}
.sv-indice a span{color:var(--fg-2);margin-right:8px}
@media (max-width:900px){
  .sv-hero{grid-template-columns:1fr;grid-template-rows:none;min-height:auto}
  .sv-meta,.sv-titulo,.hero-forma,.sv-lead,.sv-hero .acciones,.sv-indice{grid-column:auto;grid-row:auto}
  .sv-meta{flex-wrap:wrap;gap:6px 18px}
  .hero-forma{width:min(100%,420px);justify-self:center;margin-bottom:28px}
  .sv-hero .acciones{justify-content:flex-start;margin-top:24px}
}

/* ---------- dispositivos: donde viven las demos ---------- */
.dispositivo{position:relative;width:100%}
.dispositivo-cinta{position:absolute;left:50%;bottom:-34px;transform:translateX(-50%);white-space:nowrap;color:var(--fg-3)}
.navegador{border-radius:clamp(14px,1.4vw,20px);background:#0E0E12;box-shadow:0 0 0 1px var(--line),0 50px 120px -50px rgba(0,0,0,.75);overflow:hidden}
html.en-taller .navegador{box-shadow:0 0 0 1px rgba(18,18,17,.14),0 50px 110px -50px rgba(18,18,17,.45)}
.navegador-barra{display:flex;align-items:center;gap:7px;height:38px;padding:0 14px;background:#0E0E12}
.navegador-barra i{width:9px;height:9px;border-radius:50%;background:#2A2A31}
.navegador-barra span{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;margin:0 auto;padding:5px 16px;border-radius:999px;background:#18181D;color:#8D8D93;font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;white-space:nowrap}
.navegador .pantalla{position:relative;aspect-ratio:16/10;background:#F5F4EF;overflow:hidden}
.telefono{width:min(100%,340px);margin:0 auto;aspect-ratio:9/19;max-height:720px;padding:9px;border-radius:44px;background:#0E0E12;
  box-shadow:0 0 0 1px var(--line),0 50px 120px -50px rgba(0,0,0,.75)}
html.en-taller .telefono{box-shadow:0 0 0 1px rgba(18,18,17,.14),0 50px 110px -50px rgba(18,18,17,.45)}
.telefono .pantalla{position:relative;width:100%;height:100%;border-radius:36px;overflow:hidden;background:#F5F4EF}
.telefono .pantalla::before{content:"";position:absolute;top:9px;left:50%;width:84px;height:22px;margin-left:-42px;border-radius:999px;background:#0E0E12;z-index:50;pointer-events:none}
.demo{position:absolute;inset:0;width:100%;height:100%;color:#121211;font-size:14px;line-height:1.4}
.demo[hidden]{display:none}
/* lo que styles.css les pone a las etiquetas (el relleno de section, el tamaño de h3) no se filtra a las
   demos; :where no suma especificidad, así las clases de cada demo siguen mandando */
:where(.demo) section{padding:0}
:where(.demo) h3,:where(.demo) h4{font-size:inherit;line-height:inherit;letter-spacing:inherit;font-weight:600}
.demo.cargando::after{content:"";position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:1.5px solid #E2E0D8;border-top-color:#121211;animation:gira .9s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
@media (max-width:900px){
  .navegador .pantalla{aspect-ratio:4/5}
  .telefono{width:min(100%,320px)}
}

/* ---------- tu industria: pestañas + dispositivo ---------- */
.ind{margin-top:clamp(48px,calc(var(--vh) * 8),110px)}
.pestanas{position:relative;display:flex;flex-wrap:wrap;gap:6px;margin-bottom:clamp(32px,calc(var(--vh) * 5),56px)}
.pestana{position:relative;z-index:1;padding:12px 18px;border-radius:999px;border:1px solid var(--line);font-size:15px;line-height:1;color:var(--fg-2);transition:color .35s var(--ease),border-color .35s var(--ease)}
.pestana[aria-selected="true"]{color:var(--bg);border-color:transparent}
@media (hover:hover){.pestana:hover{color:var(--fg);border-color:var(--fg-3)}.pestana[aria-selected="true"]:hover{color:var(--bg)}}
.pestanas-marca{position:absolute;left:0;top:0;height:0;border-radius:999px;background:var(--fg);z-index:0;transition:transform .55s var(--ease),width .55s var(--ease),height .55s var(--ease)}
.ind-cuerpo{display:grid;grid-template-columns:4fr 8fr;column-gap:clamp(24px,3vw,56px);align-items:center}
.ind-texto{position:relative;min-height:340px}
.ind-panel{display:flex;flex-direction:column;gap:16px}
.ind-panel[hidden]{display:none}
.ind-panel .mono{color:var(--fg-3)}
.ind-panel h3{font-size:clamp(32px,3.2vw,56px);line-height:1;letter-spacing:-.035em;font-weight:400}
.ind-panel p{color:var(--fg-2);max-width:38ch}
.logros{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.logros li{padding:12px 0;border-bottom:1px solid var(--line);color:var(--fg);display:flex;gap:12px;align-items:baseline}
.logros li::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--acento);transform:translateY(-2px)}
.tambien{color:var(--fg-3);line-height:1.8}
.tambien span{color:var(--fg-2)}
.otros-giros{margin-top:clamp(80px,calc(var(--vh) * 12),150px);display:grid;grid-template-columns:2fr 10fr;column-gap:var(--gutter);align-items:baseline}
.otros-giros > .mono{color:var(--fg-3)}
.giros{display:flex;flex-wrap:wrap;gap:10px}
.giro{padding:12px 18px;border-radius:999px;border:1px solid var(--line);color:var(--fg-2);line-height:1.2}
.giro b{font-weight:500;color:var(--fg);margin-right:6px}
@media (max-width:900px){
  .pestanas{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter));padding:0 var(--gutter)}
  .pestanas::-webkit-scrollbar{display:none}
  .pestana{white-space:nowrap;font-size:14px}
  .ind-cuerpo{grid-template-columns:1fr;row-gap:36px}
  .ind-texto{min-height:0}
  .otros-giros{grid-template-columns:1fr;row-gap:16px}
}

/* ---------- filas de casos: texto a un lado, demo al otro ---------- */
.filas{display:flex;flex-direction:column;gap:clamp(110px,calc(var(--vh) * 18),220px);margin-top:clamp(56px,calc(var(--vh) * 9),120px)}
.fila-caso{display:grid;grid-template-columns:5fr 7fr;column-gap:clamp(24px,4vw,80px);align-items:center}
.fila-caso:nth-child(even) .fila-texto{order:2}
.fila-caso.con-telefono{grid-template-columns:7fr 5fr}
.fila-caso.con-telefono:nth-child(even){grid-template-columns:5fr 7fr}
.fila-texto{display:flex;flex-direction:column;gap:16px}
.fila-texto > .mono{color:var(--fg-3)}
.fila-texto h3{font-size:clamp(34px,3.8vw,68px);line-height:.98;letter-spacing:-.04em;font-weight:400}
.fila-texto h3 em{font-family:var(--f-serif);font-style:italic}
.fila-texto p{color:var(--fg-2);max-width:42ch}
@media (max-width:900px){
  .fila-caso,.fila-caso.con-telefono,.fila-caso.con-telefono:nth-child(even){grid-template-columns:1fr;row-gap:36px}
  .fila-caso:nth-child(even) .fila-texto{order:0}
}

/* ---------- caso propio: cifras ---------- */
.cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter);margin-top:clamp(56px,calc(var(--vh) * 9),120px)}
.cifra{border-top:1px solid var(--line);padding-top:18px;display:flex;flex-direction:column;gap:10px}
.cifra b{font-family:var(--f-display);font-weight:400;font-size:clamp(48px,5.6vw,104px);line-height:.9;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.cifra b em{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:-.02em}
.cifra span{color:var(--fg-2);max-width:24ch}
@media (max-width:900px){ .cifras{grid-template-columns:1fr 1fr;row-gap:36px} }

/* radar: la ilustración del caso de prospección (solo el resultado, nunca cómo funciona) */
.radar-caso{display:grid;grid-template-columns:7fr 5fr;column-gap:clamp(24px,4vw,80px);align-items:center;margin-top:clamp(56px,calc(var(--vh) * 9),120px)}
.radar{position:relative;width:min(100%,560px);aspect-ratio:1;justify-self:center;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle,transparent 0 24.6%,var(--line) 24.6% 25%,transparent 25% 49.6%,var(--line) 49.6% 50%,transparent 50% 74.6%,var(--line) 74.6% 75%,transparent 75%);
  box-shadow:inset 0 0 0 1px var(--line)}
.radar::before,.radar::after{content:"";position:absolute;background:var(--line)}
.radar::before{left:50%;top:0;bottom:0;width:1px}
.radar::after{top:50%;left:0;right:0;height:1px}
/* el borde brillante va adelante (en 0°, girando a la derecha) y la estela queda atrás */
.radar-barrido{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 76%,rgba(var(--acento-rgb),.34) 100%);
  animation:barre 5s linear infinite;animation-play-state:paused}
@keyframes barre{to{transform:rotate(360deg)}}
.radar i{position:absolute;width:7px;height:7px;margin:-3.5px;border-radius:50%;background:var(--fg-3);opacity:0;animation:eco 5s ease-out infinite;animation-play-state:paused}
.radar i.si{background:var(--acento);width:9px;height:9px;margin:-4.5px;box-shadow:0 0 0 5px rgba(var(--acento-rgb),.18)}
@keyframes eco{0%,100%{opacity:0;transform:scale(.6)}6%{opacity:1;transform:scale(1)}60%{opacity:.85}90%{opacity:0}}
.radar.en-vista .radar-barrido,.radar.en-vista i{animation-play-state:running}
.radar-texto{display:flex;flex-direction:column;gap:18px}
.radar-texto h3{font-size:clamp(30px,3vw,52px);line-height:1;letter-spacing:-.035em;font-weight:400}
.radar-texto h3 em{font-family:var(--f-serif);font-style:italic}
.radar-texto p{color:var(--fg-2);max-width:40ch}
.leyenda{display:flex;gap:22px;color:var(--fg-3)}
.leyenda span::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--fg-3);margin-right:8px;vertical-align:middle}
.leyenda span.si::before{background:var(--acento)}
@media (max-width:900px){ .radar-caso{grid-template-columns:1fr;row-gap:36px} }

/* ---------- lo que ya funciona: filas que se abren ---------- */
.vanguardia{margin-top:clamp(48px,calc(var(--vh) * 8),110px);border-top:1px solid var(--line)}
.vg{border-bottom:1px solid var(--line)}
.vg button{width:100%;display:grid;grid-template-columns:2fr 9fr 1fr;column-gap:var(--gutter);align-items:baseline;padding:26px 0;text-align:left}
.vg .mono{color:var(--fg-3)}
.vg h3{font-size:clamp(24px,2.6vw,46px);line-height:1.05;letter-spacing:-.03em;font-weight:400;transition:transform .6s var(--ease)}
.vg-mas{justify-self:end;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);position:relative;transition:transform .5s var(--ease),border-color .35s var(--ease)}
.vg-mas::before,.vg-mas::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1px;margin:-.5px 0 0 -5px;background:currentColor}
.vg-mas::after{transform:rotate(90deg);transition:transform .5s var(--ease)}
.vg[aria-expanded="true"] .vg-mas::after,.vg.abierta .vg-mas::after{transform:rotate(0)}
.vg-cuerpo{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.vg.abierta .vg-cuerpo{grid-template-rows:1fr}
.vg-cuerpo > div{overflow:hidden;display:grid;grid-template-columns:2fr 6fr 4fr;column-gap:var(--gutter)}
.vg-cuerpo p{grid-column:2;color:var(--fg-2);padding-bottom:28px;max-width:56ch}
.vg-cuerpo small{grid-column:3;color:var(--fg-3);font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;line-height:1.6;padding-bottom:28px}
@media (hover:hover){ .vg button:hover h3{transform:translateX(10px)} .vg button:hover .vg-mas{border-color:var(--fg)} }
@media (max-width:900px){
  .vg button{grid-template-columns:auto 1fr auto;column-gap:16px}
  .vg-cuerpo > div{grid-template-columns:1fr}
  .vg-cuerpo p,.vg-cuerpo small{grid-column:auto}
  .vg-cuerpo small{padding-top:0;margin-top:-14px}
}

/* ---------- más cosas por área (automatización y marketing) ---------- */
.areas{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(40px,calc(var(--vh) * 6),72px) var(--gutter);margin-top:clamp(48px,calc(var(--vh) * 8),110px)}
.area{border-top:1px solid var(--line);padding-top:18px;display:flex;flex-direction:column;gap:12px}
.area > .mono{color:var(--fg-3)}
.area h3{font-size:clamp(24px,2.2vw,36px);letter-spacing:-.03em;font-weight:400}
.area ul{display:flex;flex-direction:column;gap:8px;color:var(--fg-2)}
.area li{display:flex;gap:10px;align-items:baseline}
.area li::before{content:"";flex:0 0 auto;width:14px;height:1px;background:var(--fg-3);transform:translateY(-4px)}
@media (max-width:900px){ .areas{grid-template-columns:1fr} }

/* widget del sitio (cotizador, calculadoras): sin marco, sobre el fondo de la sección */
.widget{position:relative;margin-top:clamp(48px,calc(var(--vh) * 8),110px)}
.widget .demo{position:relative;inset:auto;height:auto;color:var(--fg);font-size:inherit;line-height:inherit}

/* ---------- auditoría ---------- */
.auditoria .grid{row-gap:24px}
.audit{margin-top:clamp(40px,calc(var(--vh) * 6),80px)}
.audit-form{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 28px;border-radius:999px;border:1px solid var(--stroke);max-width:880px;transition:border-color .35s var(--ease)}
.audit-form:focus-within{border-color:var(--fg)}
.audit-form input{flex:1;min-width:0;font:inherit;font-size:clamp(17px,1.6vw,24px);color:var(--fg);background:none;border:0;outline:none;padding:10px 0}
.audit-form input::placeholder{color:var(--fg-3)}
.audit-form .boton{flex:0 0 auto}
.audit-nota{margin-top:14px;color:var(--fg-3)}
.audit-estado{display:none;align-items:center;gap:22px;margin-top:40px}
.audit.midiendo .audit-estado{display:flex}
.audit-orbita{position:relative;width:64px;height:64px;flex:0 0 auto;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line)}
.audit-orbita::after{content:"";position:absolute;top:-4px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--acento);transform-origin:4px 36px;animation:orbita 1.6s linear infinite}
@keyframes orbita{to{transform:rotate(360deg)}}
.audit-paso{font-size:clamp(18px,1.6vw,24px);letter-spacing:-.01em}
.audit-res{display:none;margin-top:clamp(40px,calc(var(--vh) * 6),80px)}
.audit.listo .audit-res{display:block}
.audit-sitio{color:var(--fg-3);margin-bottom:24px;word-break:break-all}
.anillos{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter)}
.anillo-p{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.anillo-p svg{width:min(150px,100%);aspect-ratio:1;transform:rotate(-90deg)}
.anillo-p circle{fill:none;stroke-width:2}
.anillo-p .fondo{stroke:var(--line)}
.anillo-p .valor{stroke:var(--acento);stroke-linecap:round;stroke-dasharray:283;stroke-dashoffset:283;transition:stroke-dashoffset 1.6s var(--ease)}
.anillo-p.bajo .valor{stroke:#E5484D}
.anillo-p.medio .valor{stroke:#D98E04}
.anillo-p b{font-family:var(--f-display);font-weight:400;font-size:clamp(40px,4vw,68px);line-height:.9;letter-spacing:-.04em;font-variant-numeric:tabular-nums;margin-top:-4px}
.anillo-p .mono{color:var(--fg-2)}
.audit-cols{display:grid;grid-template-columns:5fr 7fr;gap:var(--gutter);margin-top:clamp(40px,calc(var(--vh) * 6),72px)}
.audit-cols h4{font-weight:400;color:var(--fg-3);margin-bottom:10px}
.metricas li,.fallas li{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line)}
.metricas li b,.fallas li b{font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.fallas li span{color:var(--fg)}
.fallas li b{color:var(--fg-3);font-weight:400}
.audit-cta{margin-top:40px}
.audit-error{margin-top:24px;color:var(--fg-2)}
@media (max-width:900px){
  .audit-form{padding-left:20px;flex-wrap:wrap;border-radius:28px;padding:14px}
  .audit-form .boton{width:100%;justify-content:center}
  .anillos{grid-template-columns:1fr 1fr;row-gap:32px}
  .audit-cols{grid-template-columns:1fr;row-gap:36px}
}

/* ---------- contacto en las páginas (además del de la portada) ---------- */
.contacto .acciones{justify-content:center}
.contacto-links a{display:inline-flex;align-items:center;gap:6px}

/* ---------- pie con mapa del sitio ---------- */
.pie-mapa{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter);padding:clamp(48px,calc(var(--vh) * 7),96px) var(--gutter) clamp(32px,calc(var(--vh) * 4),56px);border-top:1px solid var(--line)}
.pie-mapa > div{display:flex;flex-direction:column;gap:10px}
.pie-mapa .mono{color:var(--fg-3);margin-bottom:6px}
.pie-mapa a{color:var(--fg-2);transition:color .3s var(--ease);align-self:flex-start}
.pie-mapa a:hover{color:var(--fg)}
@media (max-width:900px){ .pie-mapa{grid-template-columns:1fr 1fr;row-gap:36px} }

/* ---------- aviso de privacidad (texto largo) ---------- */
.legal{padding-top:calc(var(--nav-h) + clamp(48px,calc(var(--vh) * 8),110px))}
.legal h1{font-size:clamp(44px,6vw,110px);line-height:.95;letter-spacing:-.045em;font-weight:400;margin-bottom:28px}
.legal-cuerpo{max-width:68ch;margin-top:clamp(40px,calc(var(--vh) * 6),80px);color:var(--fg-2)}
.legal-cuerpo h2{grid-column:auto;font-size:clamp(22px,2vw,30px);color:var(--fg);letter-spacing:-.02em;margin:44px 0 12px}
.legal-cuerpo p,.legal-cuerpo li{margin-bottom:12px}
.legal-cuerpo ul{padding-left:0}
.legal-cuerpo li{display:flex;gap:12px}
.legal-cuerpo li::before{content:"";flex:0 0 auto;width:14px;height:1px;background:var(--fg-3);transform:translateY(12px)}
.legal-cuerpo a{color:var(--fg);text-decoration:underline;text-underline-offset:.2em}

@media (prefers-reduced-motion:reduce){
  .aviso,.nodo-luz,.va-bitacora span,.vm-reel::before,.vm-barras i::after,.vm-gancho span,.vm-corazones svg,.radar-barrido,.radar i,.nav-cta i::after,.va-estado i::after{animation:none!important}
  .aviso,.va-bitacora span{opacity:1;transform:none}
  .vm-gancho span:first-child{opacity:1}
  html.js .sv-titulo .ln > span{transform:none}
}