/* Acabado y micro-animaciones (js/fx.js). v4: más sobrio. Se carga después del <style> de index.html y antes de
   secciones.css y sistema.css. Por cuadro solo transform y opacity; nada toca el lienzo 3D (#gl); todo respeta
   prefers-reduced-motion (al final). Lo que antes hacía aquí la portada (título por renglón, LED de las escenas,
   brillo que cruzaba el botón, caja de luz) ahora lo hacen sistema.css (.split, .entrada, marcos) y js/galeria.js. */
:root{
  --fx-sombra:0 30px 60px -30px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.05);
}

/* ---------- superficies: una sola receta de tarjeta (fondo --s-2, filete-1, --sombra-1); el brillo tenue arriba queda en la
   paleta del armador y en la lista de AR ---------- */
.ficha,.cal-mes,form.cot,.contacto .datos a{background-image:none;box-shadow:var(--sombra-1)}
.paleta button,.ar-lista :is(button,a){
  background-image:linear-gradient(180deg,rgba(243,238,227,.035),rgba(243,238,227,0) 40%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.cal-mes,form.cot,.contacto .datos a{position:relative}
.contacto .datos a{transition:border-color .5s var(--curva),transform .5s var(--curva),box-shadow .5s var(--curva)}
.cal-mes{transition:border-color .4s var(--curva),transform .5s var(--curva),box-shadow .5s var(--curva),opacity .75s var(--curva)}
@media(hover:hover){
  .cal-mes:hover,.contacto .datos a:hover,.paleta button:hover,.ar-lista :is(button,a):hover{box-shadow:var(--fx-sombra)}
  .cal-mes.fx-in:hover,.contacto .datos a:hover{transform:translateY(-2px)}
}
/* sin vidrio en las casillas del formulario (detrás solo está el panel) ni filete de luz que siga al cursor */

/* ---------- zoom lento en las fotos de tarjetas ---------- */
.tarjeta-media img{transition:transform 1.6s var(--curva)}
@media(hover:hover){
  .tarjeta:hover .tarjeta-media img{transform:scale(1.04)}
  html.scroll-fx .ficha.rev.in:not(.en3d):hover .media img{transform:scale(1.04)}
}

/* ---------- revelados escalonados (fx.js pone data-fx y --fi; nunca se queda en 0 si el observador no dispara) ---------- */
/* v13: misma receta que las entradas de sistema.css (16 px, .9-1 s, escalón de 80 ms) */
html.fx [data-fx]{opacity:0;transform:translateY(16px);transition:opacity var(--dur-entrada,.9s) var(--curva-entrada,cubic-bezier(.3,.5,.2,1)),transform calc(var(--dur-entrada,.9s) + .1s) var(--curva-entrada,cubic-bezier(.3,.5,.2,1));transition-delay:calc(min(var(--fi,0),6) * var(--paso-entrada,80ms))}
html.fx [data-fx].fx-in{opacity:1;transform:none}
html.fx .cal-mes.fx-in{transition-delay:0s}

/* ---------- barra: se compacta y se vuelve vidrio al bajar (el alto cambia sin animarse: solo se anima el logo, con transform) ---------- */
/* v13: barra de 76 → 70 px y logo al 88 % (65 → 57 px de alto, 6 px de aire); el cambio dura .6 s con la curva de la página */
@media(min-width:901px){.nav.solida{height:70px}} /* en celular la barra ya mide 60 px (index.html) */
.nav{transition:height .6s var(--curva-entrada,cubic-bezier(.3,.5,.2,1))}
.nav .logo{transition:transform .6s var(--curva-entrada,cubic-bezier(.3,.5,.2,1));transform-origin:0 50%}
/* en celular no se encoge: el enlace del logo conserva sus 44 px de alto para el dedo */
@media(min-width:901px){.nav.solida .logo{transform:scale(.91)}}
.nav.solida::before{background:rgba(14,9,34,.78);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
.nav.solida::after{opacity:.4}
/* celular o pantalla táctil: sin desenfoque detrás de la barra (sobre el 3D costaba cuadros); fondo casi opaco al bajar */
@media(pointer:coarse),(max-width:900px){
  .nav::before,.nav.solida::before{-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav.solida::before{background:rgba(14,9,34,.92)}
}

/* ---------- botones: elevación al pasar (sombra con un dejo de oro) ---------- */
@media(hover:hover){
  .btn:not(.p):hover{box-shadow:0 14px 28px -18px rgba(0,0,0,.75),0 0 0 1px rgba(201,162,78,.15)}
}

/* ---------- portada: sin halo ni resplandor detrás del 3D (ronda 7: el cliente pidió fondo limpio y gráficos definidos) ---------- */
.pantalla{isolation:isolate}
.pantalla::before,.pantalla::after{content:none}

/* ---------- marquesina de clientes (fx.js la arma con los nombres de #grupos; pausa al pasar el cursor, al tocarla, con Pausar y fuera de vista) ---------- */
.fx-marq{position:relative;margin:clamp(40px,5vw,64px) calc(-1 * var(--gutter)) 0;padding:14px 0;overflow:hidden;border-top:1px solid var(--filete-oro,rgba(201,162,78,.45));border-bottom:1px solid var(--filete-oro,rgba(201,162,78,.45));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.fx-marq-t{display:flex;width:max-content;animation:fxMarq var(--fx-dur,48s) linear infinite;will-change:transform}
.fx-marq{cursor:pointer}
.fx-marq:not(.fx-vis) .fx-marq-t,.fx-marq.fx-pausa .fx-marq-t,body.pausado .fx-marq-t{animation-play-state:paused}
@media(hover:hover){.fx-marq:hover .fx-marq-t{animation-play-state:paused}}
.fx-marq span{display:inline-flex;align-items:center;gap:28px;padding-right:28px;white-space:nowrap;font-family:var(--f-display);font-weight:500;font-size:clamp(18px,1.6vw,24px);letter-spacing:.03em;color:rgba(222,216,236,.84)}
.fx-marq span::after{content:"";flex:none;width:5px;height:5px;transform:rotate(45deg);background:var(--oro-brillo,#EEB73A);opacity:.85}
@keyframes fxMarq{to{transform:translateX(-50%)}}

/* ---------- micro-animaciones al agregar a la cotización y en los contadores ---------- */
@keyframes fxPop{0%{transform:scale(1)}35%{transform:scale(.975)}100%{transform:scale(1)}}
@keyframes fxTick{0%{transform:translateY(.35em);opacity:.2}100%{transform:none;opacity:1}}
.btn.fx-pop,.paleta button.fx-pop{animation:fxPop .6s var(--curva-entrada,var(--curva))}
.cot-chip.fx-pop span{animation:fxPop .5s var(--curva)}
.fx-tick{animation:fxTick .45s var(--curva)}
.btn.agregado{box-shadow:none}

/* ---------- calendario: eventos que entran y mes en curso con el tono de la sección (esmeralda) ---------- */
@keyframes fxUp{from{opacity:0;transform:translateY(8px)}}
.cal-evento{animation:fxUp .6s var(--curva) both}
.cal-mes.actual{box-shadow:0 0 0 1px var(--tono-filete)}
.cal-mes.actual::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;border:1px solid var(--tono);opacity:0}
@keyframes fxAnillo{0%{opacity:0;transform:scale(1)}30%{opacity:.9}100%{opacity:0;transform:scale(1.05)}}
.cal-mes.actual.fx-in::after{animation:fxAnillo 1.8s var(--curva) .5s 1}

/* ---------- WhatsApp flotante: un aro discreto UNA vez, a los 4 s (sin bucle decorativo ni sacudir el ícono) ---------- */
.wa-flot{isolation:isolate}
.wa-flot::before{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid rgba(37,211,102,.55);opacity:0;z-index:-1;pointer-events:none}
@keyframes fxWa{0%{opacity:.7;transform:scale(1)}88%{opacity:0;transform:scale(1.8)}100%{opacity:0;transform:scale(1.8)}}
@media(prefers-reduced-motion:no-preference){
  .wa-flot:not(.oculto)::before{animation:fxWa 2s ease-out 4s 1}
}
/* celular y tableta: el botón va en la barra (index.html) y su caja mide el alto de la barra; el aro sigue al círculo de 44 px */
@media(max-width:900px){.wa-flot::before{inset:auto 2px;top:50%;height:44px;margin-top:-22px}}

/* ---------- reducir movimiento: todo estático y visible ---------- */
@media(prefers-reduced-motion:reduce){
  html.fx [data-fx]{opacity:1;transform:none;transition:none}
  .fx-marq-t,.wa-flot::before,.cal-mes.actual::after,.cal-evento,.fx-pop,.fx-tick,.cot-chip.fx-pop span{animation:none!important}
  .cal-mes.fx-in:hover,.contacto .datos a:hover{transform:none}
  .tarjeta:hover .tarjeta-media img,html.scroll-fx .ficha.rev.in:not(.en3d):hover .media img{transform:none}
}