/* efectos-web.css — 07-11-2026 (Luis: «Ponle el estilo similar a lo que ya tenemos con ventanas, que cuando uno le pasa
   el mouse suelta color, los botones, el mismo sistema, todo igual. Yo quiero que la página se vea igual en todos los lados.»)
   El MISMO efecto del demo y del portal (assets/css/efectos-portal.css), para las páginas públicas. Se carga el ÚLTIMO.
     verde = cotizar / enviar     rojo = botón rojo de la barra     azul = ver / navegar */

/* ---------- VENTANAS: cristal oscuro + luces RGB por debajo solo en la que tiene el ratón, mientras se mueve ---------- */
@property --dn-a{syntax:"<number>";inherits:false;initial-value:0}
@keyframes dn-luces-suave{
  0%  {box-shadow:-16px 0 34px -12px rgb(255 0 0 / var(--dn-a)),16px 0 34px -12px rgb(0 0 255 / var(--dn-a)),0 16px 34px -12px rgb(0 255 0 / var(--dn-a))}
  33% {box-shadow:-16px 0 34px -12px rgb(0 255 0 / var(--dn-a)),16px 0 34px -12px rgb(255 0 0 / var(--dn-a)),0 16px 34px -12px rgb(0 0 255 / var(--dn-a))}
  66% {box-shadow:-16px 0 34px -12px rgb(0 0 255 / var(--dn-a)),16px 0 34px -12px rgb(0 255 0 / var(--dn-a)),0 16px 34px -12px rgb(255 0 0 / var(--dn-a))}
  100%{box-shadow:-16px 0 34px -12px rgb(255 0 0 / var(--dn-a)),16px 0 34px -12px rgb(0 0 255 / var(--dn-a)),0 16px 34px -12px rgb(0 255 0 / var(--dn-a))}}
@keyframes ew-sube{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.ew-ventana{background:#1b1b1b !important;border:1px solid #2a2a2a !important;border-radius:20px !important;
  --dn-a:0;transition:--dn-a 1.6s ease-out,border-color .45s,transform .45s;animation:dn-luces-suave 3s linear infinite}
.ew-ventana:hover{border-color:#353535 !important}
body.dn-mueve .ew-ventana:hover{--dn-a:1;transition:--dn-a .9s ease-in-out,border-color .45s,transform .45s}
/* una ventana dentro de otra: solo brilla la de dentro */
body.dn-mueve .ew-ventana:has(.ew-ventana:hover){--dn-a:0}
.ew-ventana--entra{animation:ew-sube .7s cubic-bezier(.2,.7,.2,1) both,dn-luces-suave 3s linear infinite}

/* ---------- BOTONES: franja de luz que cruza, suben un poquito, borde y resplandor de su color ---------- */
.ew-boton{--c:#3d6bff;position:relative !important;overflow:hidden !important;isolation:isolate;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s,color .3s,background .3s !important}
.ew-boton--verde{--c:#00ff00}.ew-boton--rojo{--c:#ff0000}
.ew-boton::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,color-mix(in srgb,var(--c) 28%,transparent) 50%,transparent 70%);transform:translateX(-120%)}
.ew-boton:hover::after{animation:dn-luz .75s ease-out}
@keyframes dn-luz{to{transform:translateX(120%)}}
.ew-boton:hover{transform:translateY(-2px) !important;color:#fff !important;border-color:color-mix(in srgb,var(--c) 75%,#000) !important;
  box-shadow:0 8px 22px -10px var(--c),0 0 0 1px color-mix(in srgb,var(--c) 35%,transparent) inset !important}
.ew-boton:not(.boton.rojo):hover{background:color-mix(in srgb,var(--c) 9%,#161616) !important}
.ew-boton:active{transform:translateY(0) scale(.97) !important;transition-duration:.08s !important}
.ew-boton svg{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.ew-boton:hover svg{transform:translateX(3px) rotate(-8deg)}

@media (prefers-reduced-motion:reduce){
  .ew-boton::after{animation:none !important}.ew-boton:hover{transform:none !important}
  .ew-ventana{animation-duration:12s}}