/* ═══════════════════════════════════════════════════════════════════
   PEDREGOSA · movimiento.css — capa de interacción para ESCRITORIO
   Se activa solo cuando <html> tiene .motion (puntero fino, ≥1024 px y
   sin prefers-reduced-motion). Sin esa clase nada de esto se aplica:
   el móvil y los lectores de pantalla ven el sitio base.
   Todo es transform/opacity; ningún contenido depende de estas reglas.
   ═══════════════════════════════════════════════════════════════════ */

/* ── curvas ─────────────────────────────────────────────────────── */
.motion{
  --expo:cubic-bezier(.16,1,.3,1);          /* expo.out: arranca rápido, se asienta largo */
  --suave:cubic-bezier(.2,0,0,1);
}

/* ── 1 · revelado tipográfico por líneas/palabras ───────────────── */
.motion .split{display:block}
.motion .split .l{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.motion .split .l > span{display:block;transform:translateY(110%);transition:transform 900ms var(--expo);will-change:transform}
.motion .split.on .l > span{transform:none}
.motion .split.words .w{display:inline-block;opacity:0;transform:translateY(12px);transition:opacity 600ms var(--expo),transform 600ms var(--expo)}
.motion .split.words.on .w{opacity:1;transform:none}

/* ── 2 · parallax suave en fotografías grandes ──────────────────── */
.motion .plx{overflow:hidden}
.motion .plx img{will-change:transform;transform:translate3d(0,var(--py,0),0) scale(1.08);transition:none}

/* ── 3 · fichas: cruce producto ↔ instalado al pasar el cursor ───── */
.motion .mat-card .principal .inst{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 480ms var(--expo);pointer-events:none}
.motion .mat-card:hover .principal .inst,.motion .mat-card:focus-within .principal .inst{opacity:1}
.motion .mat-card .principal .etq-inst{position:absolute;left:10px;bottom:10px;z-index:2;font-family:var(--ui);font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:5px 8px;background:rgba(40,44,43,.85);color:var(--caliza-claro);opacity:0;transform:translateY(6px);transition:opacity 320ms var(--expo),transform 320ms var(--expo);font-variation-settings:"wdth" 88,"wght" 700;pointer-events:none}
.motion .mat-card:hover .principal .etq-inst,.motion .mat-card:focus-within .principal .etq-inst{opacity:1;transform:none}
/* luz rasante que barre la foto una sola vez al entrar el cursor */
.motion .mat-card .principal::after,.motion .proy .img::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(104deg,transparent 40%,rgba(255,246,224,.18) 49%,transparent 58%);transform:translate3d(-120%,0,0)}
.motion .mat-card:hover .principal::after,.motion .proy:hover .img::after,.motion .proy:focus-within .img::after{animation:barrido 1100ms var(--expo) forwards}
@keyframes barrido{to{transform:translate3d(120%,0,0)}}
.motion .proy .img{position:relative}

/* ── 4 · carrusel horizontal de inspiración (arrastre) ──────────── */
.motion .galeria.insp{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:none;cursor:grab}
.motion .galeria.insp::-webkit-scrollbar{display:none}
.motion .galeria.insp.arrastrando{cursor:grabbing;scroll-snap-type:none}
.motion .galeria.insp.arrastrando button{pointer-events:none}
.motion .galeria.insp button{flex:0 0 calc((100% - 36px)/4);aspect-ratio:4/3;scroll-snap-align:start}
.motion .galeria.insp button img{transition:transform 900ms var(--expo)}
.motion .carr-nav{display:flex;gap:8px}
.motion .carr-nav button{width:44px;height:44px;border:1px solid var(--linea);background:var(--papel);color:var(--basalto);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background var(--t1) var(--curva),border-color var(--t1) var(--curva)}
.motion .carr-nav button:hover{background:var(--basalto);color:var(--marfil);border-color:var(--basalto)}
.motion .carr-nav button svg{width:20px;height:20px}
.motion .carr-nav button[disabled]{opacity:.35;cursor:default}
.carr-nav{display:none}

/* ── 5 · cursor con etiqueta sobre fotografías y tarjetas ───────── */
.motion .cursor-etq{position:fixed;left:0;top:0;z-index:95;pointer-events:none;transform:translate3d(-50%,-50%,0) scale(.6);opacity:0;background:var(--caliza-claro);color:var(--basalto);font-family:var(--ui);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:9px 12px;font-variation-settings:"wdth" 88,"wght" 700;transition:opacity 200ms var(--expo),transform 320ms var(--expo);white-space:nowrap}
.motion .cursor-etq.on{opacity:1;transform:translate3d(-50%,-50%,0) scale(1)}
.motion [data-cursor]{cursor:none}
.motion [data-cursor] *{cursor:none}

/* ── 6 · botones magnéticos y relleno por barrido ───────────────── */
.motion .btn{will-change:transform;transition:background var(--t1) var(--curva),color var(--t1) var(--curva),border-color var(--t1) var(--curva),transform 500ms var(--expo)}
.motion .btn::before{content:"";position:absolute;inset:0;background:currentColor;opacity:0;transform:scaleX(0);transform-origin:0 50%;transition:transform 420ms var(--expo),opacity 420ms var(--expo);pointer-events:none}
.motion .btn{position:relative;overflow:hidden;isolation:isolate}
.motion .btn::before{z-index:-1}
.motion .btn:hover::before{transform:scaleX(1);opacity:.1}

/* ── 7 · cabecera: barra de progreso de lectura ─────────────────── */
.motion .progreso{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--caliza-claro);transform:scaleX(0);transform-origin:0 50%;will-change:transform;pointer-events:none}

/* ── 8 · resultado de la calculadora: la fila total se subraya ──── */
.motion .resultado .fila.total{position:relative}
.motion .resultado .fila.total::before{content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:var(--caliza-claro);transform:scaleX(0);transform-origin:0 50%;transition:transform 700ms var(--expo)}
.motion .resultado.actualizado .fila.total::before{transform:scaleX(1)}

/* ── 9 · tarjetas de proyecto: elevación + foto que respira ──────── */
.motion .proy{transition:transform 600ms var(--expo),box-shadow 600ms var(--expo)}
.motion .proy:hover,.motion .proy:focus-within{transform:translateY(-6px);box-shadow:10px 10px 0 rgba(40,44,43,.10)}
.motion .proy img{transition:transform 1200ms var(--expo)}
.motion .proy:hover img,.motion .proy:focus-within img{transform:scale(1.06)}

/* ── 10 · números con tabulación estable (sin animar cifras) ─────── */
.motion .resultado .v{font-variant-numeric:tabular-nums}

/* ── seguridad: reduced-motion apaga todo aunque exista la clase ──── */
@media(prefers-reduced-motion:reduce){
  .motion .split .l > span,.motion .split.words .w{transform:none!important;opacity:1!important;transition:none!important}
  .motion .plx img{transform:none!important}
  .motion .cursor-etq{display:none!important}
  .motion [data-cursor],.motion [data-cursor] *{cursor:auto}
}