/* Opción B «Dinámico» · se carga encima de styles.css */
.progreso{position:fixed;left:0;right:0;top:0;height:2px;z-index:70;background:transparent}
.progreso i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--cian),var(--ambar));transform:scaleX(var(--p,0));transform-origin:left}
/* Titular: se descubre de izquierda a derecha */
.dyn h1{animation:descubre 1.3s var(--ease) .15s backwards}
@keyframes descubre{from{clip-path:inset(0 100% 0 0);opacity:.2}to{clip-path:inset(0 0 -12% 0);opacity:1}}
.dyn .hero__mapa{opacity:.42}
.dyn .parcela polygon{stroke-dasharray:6 10;animation:trazo 14s linear infinite}
/* Lectura de coordenadas que reacciona al cursor */
.hud{position:absolute;right:24px;bottom:20px;z-index:1;display:none;gap:14px;align-items:center;font:500 12px/1 "IBM Plex Mono",ui-monospace,monospace;color:var(--texto-2);letter-spacing:.06em;padding:10px 14px;border:1px solid var(--linea);border-radius:999px;background:rgba(5,21,25,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hud b{font-weight:500;color:var(--ambar-2);font-variant-numeric:tabular-nums}
.hud span{color:var(--cian)}
@media (min-width:960px){.hud{display:flex}}
/* Cinta de servicios en movimiento continuo */
.cinta{overflow:hidden;border-block:1px solid var(--linea);background:linear-gradient(180deg,rgba(255,255,255,.03),transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.cinta__pista{display:flex;gap:48px;width:max-content;padding:18px 0;animation:cinta 42s linear infinite}
.cinta:hover .cinta__pista{animation-play-state:paused}
.cinta span{font:500 13px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--texto-2);white-space:nowrap;display:inline-flex;align-items:center;gap:48px}
.cinta span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--ambar);opacity:.8}
@keyframes cinta{to{transform:translateX(-50%)}}
/* Inclinación 3D suave en tarjetas */
.dyn .serv,.dyn .form-card{transform-style:preserve-3d;will-change:transform}
.dyn .serv.tilt,.dyn .form-card.tilt{transition:transform .12s linear;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px)}
.dyn .serv:not(.tilt),.dyn .form-card:not(.tilt){transition:transform .6s var(--ease),border-color .35s,box-shadow .45s var(--ease)}
.dyn .serv h3{background:linear-gradient(90deg,#fff,#fff);-webkit-background-clip:text;background-clip:text}
.dyn .serv:hover h3{color:var(--ambar-2)}
/* Pasos: el número se enciende al llegar */
.dyn .pasos li>span{transition:background .6s,color .6s,box-shadow .6s,transform .6s var(--ease)}
.dyn .pasos li.on>span{background:var(--ambar);color:#1A1405;border-color:var(--ambar);box-shadow:0 0 0 6px rgba(200,164,90,.14),0 0 30px -4px rgba(200,164,90,.6);transform:scale(1.06)}
/* Botón magnético */
.dyn .btn--primary{transition:transform .25s var(--ease),box-shadow .3s}
/* Secciones alternan velo para dar ritmo */
.dyn .sec--dolor{background:linear-gradient(180deg,transparent,rgba(200,164,90,.035) 50%,transparent)}
.dyn .titulo{font-size:clamp(30px,6.4vw,52px)}
@media (prefers-reduced-motion:reduce){.cinta__pista{animation:none}.dyn h1{animation:none}}