/* ============================================================
   Semacovi — Efectos (fx.css) · se activan con fx.js
   Todo lo que oculta contenido depende de html.fx y de [data-r],
   que solo pone el JS: sin JS el sitio se ve completo.
   ============================================================ */

/* ── Revelado al scroll ───────────────────────────────────── */
.fx [data-r]{transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .8s cubic-bezier(.2,.7,.2,1) var(--d,0ms),clip-path 1s cubic-bezier(.7,0,.2,1) var(--d,0ms)}
.fx [data-r]:not(.in){opacity:0}
.fx [data-r="up"]:not(.in){transform:translateY(34px)}
.fx [data-r="left"]:not(.in){transform:translateX(-30px)}
.fx [data-r="right"]:not(.in){transform:translateX(30px)}
.fx [data-r="zoom"]:not(.in){transform:scale(.94)}
/* Collages: cada foto se descubre como cortina y luego entran los sellos */
.fx .collage[data-r]:not(.in){opacity:1;transform:none}
.fx .collage[data-r] > img,.fx .collage[data-r] > .ph{clip-path:inset(0 0 0 0);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1),scale .9s cubic-bezier(.2,.7,.2,1)}
.fx .collage[data-r]:not(.in) > img,.fx .collage[data-r]:not(.in) > .ph{clip-path:inset(100% 0 0 0)}
.fx .collage[data-r] > :nth-child(2){transition-delay:.15s}
.fx .collage[data-r] > :nth-child(3){transition-delay:.3s}
.fx .collage[data-r] > .cl-card,.fx .collage[data-r] > .cl-stat,.fx .collage[data-r] > .ribbon{transition:opacity .6s ease .9s}
.fx .collage[data-r]:not(.in) > .cl-card,.fx .collage[data-r]:not(.in) > .cl-stat,.fx .collage[data-r]:not(.in) > .ribbon{opacity:0}

/* ── Subrayado amarillo que se pinta ─────────────────────── */
.fx .hs h2 em{background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 0 88% / 0% 30%;transition:background-size 1s cubic-bezier(.7,0,.2,1) .25s}
.fx .hs h2 em.paint{background-size:100% 30%}

/* ── Fotos: parallax + zoom al pasar el mouse ────────────── */
.collage img,.collage .ph{translate:0 var(--py,0px)}
.collage:hover img{scale:1.04}
.svc-img,.gal figure,.pcard-img{overflow:hidden}
.svc-img img,.gal img,.pcard-img img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.svc:hover .svc-img img,.gal figure:hover img{transform:scale(1.08)}
.pcard:hover .pcard-img img{transform:scale(1.08) rotate(-1.5deg)}

/* Sellos y tarjetas flotantes: parallax + vaivén */
.cl-card,.cl-stat,.ribbon{translate:0 var(--fy,0px)}
.cl-stat{animation:fxBob 5s ease-in-out infinite}
.cl-card{animation:fxBob 6s ease-in-out infinite .8s}
@keyframes fxBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ── Tarjetas: elevación e inclinación 3D ────────────────── */
.pcard,.cov-col,.sign-card,.need-item,.senal,.svc,.sv-cat,.norms2 li,.client-list li{transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s,border-color .3s}
.fx-tilt{transform-style:preserve-3d}
html .fx-tilt.in:hover,html .fx-tilt:not([data-r]):hover{transform:perspective(900px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) translateY(-6px);box-shadow:0 22px 44px rgba(20,25,30,.14)}
.svc:hover,.sv-cat:hover,.norms2 li:hover{transform:translateY(-5px);box-shadow:0 18px 36px rgba(20,25,30,.12)}
.client-list li:hover{background:var(--yellow);border-color:#000;transform:translateY(-3px)}
.cov li a{transition:padding .3s}
.cov li a:hover{padding-left:8px}
.checks li{transition:padding .3s,background .3s}
.checks li:hover{padding-left:40px;background:linear-gradient(90deg,var(--sun),transparent)}

/* ── Botones: destello que cruza ─────────────────────────── */
html .btn-cta,html .btn-black{background-image:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);background-size:260% 100%;background-position:160% 0;background-repeat:no-repeat;transition:background-position .7s ease,transform .25s,box-shadow .25s}
html .btn-cta:hover,html .btn-black:hover{background-image:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);background-size:260% 100%;background-repeat:no-repeat;background-position:-60% 0;transform:translateY(-2px);box-shadow:0 10px 24px rgba(20,25,30,.18)}
.btn:active{transform:translateY(0) scale(.98)}

/* ── Menú: subrayado que crece ───────────────────────────── */
.nav-link{background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 50% 100% / 0% 3px!important;box-shadow:none!important;transition:background-size .35s cubic-bezier(.2,.7,.2,1),color .2s}
.nav-link:hover,.nav-link.active{background-size:70% 3px!important}
.dropdown a{transition:padding .25s,background .25s}
.dropdown a:hover{padding-left:22px}
.navbar{transition:box-shadow .3s,background .3s}
.navbar .nav-logo img{transition:height .3s}
.navbar.scrolled .nav-logo img{height:44px!important}

/* ── Franjas de obra en movimiento ───────────────────────── */
.hazard{background:repeating-linear-gradient(-45deg,var(--yellow) 0 14px,var(--asphalt) 14px 28px) 0 0/39.6px 100%;animation:fxHazard 2.4s linear infinite}
.page-header::after{background:repeating-linear-gradient(-45deg,var(--yellow) 0 10px,var(--asphalt) 10px 20px) 0 0/28.28px 100%;animation:fxHazard2 2s linear infinite}
@keyframes fxHazard{to{background-position:39.6px 0}}
@keyframes fxHazard2{to{background-position:28.28px 0}}

/* ── Barra de progreso de lectura ────────────────────────── */
.fx-progress{position:fixed;left:0;right:0;top:0;height:4px;background:var(--yellow);transform:scaleX(0);transform-origin:0 50%;z-index:2000;pointer-events:none}

/* ── Hero: la señal sigue al mouse ───────────────────────── */
.hp .hp-sign{transform:translate(calc(-50% + var(--mx,0px)), var(--my,0px)) rotate(var(--rz,0deg));transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.hp-cred li{transition:transform .3s}
.hp-cred li:hover{transform:translateY(-3px)}

/* ── Accesibilidad ───────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .fx [data-r]{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .hazard,.page-header::after,.cl-stat,.cl-card{animation:none!important}
  .collage img,.cl-card,.cl-stat,.ribbon{translate:none!important}
}