/* ============================================================
   assets/css/aw-visual.css — Fase 210 (todas las plantillas de la web)
   Lo carga lib/tracking-lib.php (gtmHeadSnippet) en todas las páginas
   públicas. Las clases las pone assets/js/aw-visual.js sobre el HTML que
   ya arma cada plantilla, así que no hace falta tocar cada main.php.

   1) Marcas: el logo llena la caja (fondo blanco tipo "muro de logos") y
      la caja tiene movimiento: flota, la cruza un brillo, y al pasar el
      mouse se levanta con resplandor y borde de luz que gira.
   2) Hero (Fase 211): la foto cubre todo y el encuadre se corre solo hacia
      lo importante (aw-visual.js + smartcrop.js).
   ============================================================ */

/* ── 1) Marcas ─────────────────────────────────────────────── */
.aw-marca{
  --aw-acento: var(--aw-acento-sec, #f97316);
  position:relative!important; display:flex!important; align-items:center!important; justify-content:center!important;
  height:7rem!important; padding:0!important; border-radius:14px!important; overflow:hidden!important; isolation:isolate;
  background:#0B0E14!important; border:1px solid rgba(255,255,255,.08)!important; text-decoration:none!important; cursor:pointer;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s!important;
  animation:awMarcaFlota 5s ease-in-out infinite; animation-delay:calc(var(--aw-i,0) * -.7s);
}
.aw-marca.con-logo{ background:#fff!important }
.aw-marca .aw-marca-img{
  width:100%!important; height:100%!important; max-width:none!important; max-height:none!important;
  object-fit:contain!important; padding:10px!important; filter:none!important; opacity:1!important; display:block!important;
  transition:transform .45s cubic-bezier(.2,.8,.2,1)!important;
}
.aw-marca .aw-marca-txt{
  font-weight:800!important; font-size:1rem!important; letter-spacing:.06em; text-transform:uppercase; opacity:1!important;
  background:linear-gradient(90deg,#cbd5e1,#fff,var(--aw-acento),#cbd5e1); background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  animation:awMarcaTxt 6s linear infinite; padding:0 10px; text-align:center;
}
/* el "Ver más" que traía cada plantilla tapaba el logo entero: se oculta y va la franja de abajo */
.aw-marca > div.absolute{ display:none!important }
.aw-marca::before{
  content:""; position:absolute; top:-40%; bottom:-40%; left:-60%; width:45%; z-index:2; pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-20deg);
  animation:awMarcaBrillo 4.5s ease-in-out infinite; animation-delay:calc(var(--aw-i,0) * .6s);
}
.aw-marca::after{
  content:""; position:absolute; inset:-2px; z-index:-1; border-radius:16px; opacity:0; transition:opacity .35s;
  background:conic-gradient(from var(--awAng,0deg), var(--aw-acento), #fbbf24, #fff, var(--aw-acento));
  animation:awMarcaGira 2.5s linear infinite;
}
.aw-marca:hover{
  transform:translateY(-8px) scale(1.06) rotate(-1deg)!important; border-color:transparent!important;
  box-shadow:0 18px 40px -12px color-mix(in srgb, var(--aw-acento) 70%, transparent), 0 0 0 2px var(--aw-acento)!important;
}
.aw-marca:hover::after{ opacity:1 }
/* Fase 218: el agrandado de siempre queda solo para el efecto "clásico" (los demás animan el logo) */
.aw-marca:not([class*="aw-ef-"]):hover .aw-marca-img, .aw-marca.aw-ef-clasico:hover .aw-marca-img{ transform:scale(1.12)!important }
.aw-marca .aw-marca-ver{
  position:absolute; left:0; right:0; bottom:0; z-index:3; padding:5px 0; text-align:center; font-size:10px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; color:#fff; background:var(--aw-acento); transform:translateY(100%); transition:transform .3s;
}
.aw-marca:hover .aw-marca-ver{ transform:translateY(0) }
.aw-marcas-slide{ padding:10px 0 }

/* cinta continua para listas de marcas que no usan Swiper (ej. Compustore) */
.aw-cinta{ overflow:hidden!important; -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); padding:12px 0!important }
.aw-cinta-mov{ display:flex; gap:16px; width:max-content; animation:awCinta var(--aw-cinta-dur,30s) linear infinite }
.aw-cinta:hover .aw-cinta-mov{ animation-play-state:paused }
.aw-cinta-mov > .aw-marca{ flex:0 0 auto; width:11rem!important }

@property --awAng{ syntax:"<angle>"; initial-value:0deg; inherits:false }
@keyframes awMarcaGira{ to{ --awAng:360deg } }
@keyframes awMarcaFlota{ 0%,100%{ translate:0 0 } 50%{ translate:0 -5px } }
@keyframes awMarcaBrillo{ 0%,70%{ left:-60% } 100%{ left:130% } }
@keyframes awMarcaTxt{ to{ background-position:300% 0 } }
@keyframes awCinta{ to{ transform:translateX(-50%) } }

/* ── 1b) Fase 218: efectos de los logos (al pasar el mouse y una vez al aparecer en pantalla) ──
   aw-visual.js le pone a cada caja la clase aw-ef-<efecto> (según Diseño Web →
   Marcas en la web), al logo/nombre la clase aw-ef-el y agrega la capa
   .aw-ef-capa (la usa "bandera a cuadros"). .aw-ef-play = se está reproduciendo
   porque la marca recién apareció en pantalla (sirve también en el celular). */
.aw-ef-capa{ position:absolute; inset:-10% -5%; z-index:2; pointer-events:none; transform:translateX(-140%);
  background:conic-gradient(#111 25%,#fff 0 50%,#111 0 75%,#fff 0) 0 0/18px 18px; opacity:0 }
.aw-ef-giro:hover .aw-ef-el,      .aw-ef-giro.aw-ef-play .aw-ef-el     { animation:awEfGiro .9s cubic-bezier(.3,.7,.3,1) }
.aw-ef-caida:hover .aw-ef-el,     .aw-ef-caida.aw-ef-play .aw-ef-el    { animation:awEfCaida 1s ease-out }
.aw-ef-derecha:hover .aw-ef-el,   .aw-ef-derecha.aw-ef-play .aw-ef-el  { animation:awEfDerecha .8s cubic-bezier(.2,.9,.3,1.2) }
.aw-ef-izquierda:hover .aw-ef-el, .aw-ef-izquierda.aw-ef-play .aw-ef-el{ animation:awEfIzquierda .8s cubic-bezier(.2,.9,.3,1.2) }
.aw-ef-rebote:hover .aw-ef-el,    .aw-ef-rebote.aw-ef-play .aw-ef-el   { animation:awEfRebote 1s ease-out; transform-origin:50% 100% }
.aw-ef-volteo:hover .aw-ef-el,    .aw-ef-volteo.aw-ef-play .aw-ef-el   { animation:awEfVolteo .9s cubic-bezier(.3,.7,.3,1) }
.aw-ef-zoom:hover .aw-ef-el,      .aw-ef-zoom.aw-ef-play .aw-ef-el     { animation:awEfZoom .7s cubic-bezier(.2,.9,.3,1.3) }
.aw-ef-latido:hover .aw-ef-el                                          { animation:awEfLatido 1.1s ease-in-out infinite }
.aw-ef-latido.aw-ef-play .aw-ef-el                                     { animation:awEfLatido 1.1s ease-in-out }
.aw-ef-temblor:hover .aw-ef-el,   .aw-ef-temblor.aw-ef-play .aw-ef-el  { animation:awEfTemblor .9s ease-in-out }
.aw-ef-persiana:hover .aw-ef-el,  .aw-ef-persiana.aw-ef-play .aw-ef-el { animation:awEfPersiana .9s ease-out }
.aw-ef-remolino:hover .aw-ef-el,  .aw-ef-remolino.aw-ef-play .aw-ef-el { animation:awEfRemolino .9s cubic-bezier(.2,.8,.3,1.1) }
.aw-ef-bandera:hover .aw-ef-el,   .aw-ef-bandera.aw-ef-play .aw-ef-el  { animation:awEfOndea 1.3s ease-in-out; transform-origin:0 50% }
.aw-ef-bandera:hover .aw-ef-capa, .aw-ef-bandera.aw-ef-play .aw-ef-capa{ animation:awEfCuadros 1.1s ease-in-out }

@property --awP{ syntax:"<length>"; initial-value:14px; inherits:false }
@keyframes awEfGiro{ from{ transform:perspective(500px) rotateY(0) } to{ transform:perspective(500px) rotateY(360deg) } }
@keyframes awEfVolteo{ from{ transform:perspective(500px) rotateX(0) } to{ transform:perspective(500px) rotateX(360deg) } }
@keyframes awEfCaida{
  0%{ transform:translateY(-150%); opacity:0 } 15%{ opacity:1 } 50%{ transform:translateY(0) }
  65%{ transform:translateY(-22%) } 78%{ transform:translateY(0) } 88%{ transform:translateY(-7%) } 100%{ transform:translateY(0) } }
@keyframes awEfDerecha{ 0%{ transform:translateX(150%); opacity:0 } 70%{ transform:translateX(-7%); opacity:1 } 100%{ transform:translateX(0) } }
@keyframes awEfIzquierda{ 0%{ transform:translateX(-150%); opacity:0 } 70%{ transform:translateX(7%); opacity:1 } 100%{ transform:translateX(0) } }
@keyframes awEfRebote{
  0%,100%{ transform:translateY(0) scale(1,1) } 12%{ transform:translateY(0) scale(1.1,.88) } 30%{ transform:translateY(-30%) scale(.95,1.06) }
  48%{ transform:translateY(0) scale(1.08,.92) } 62%{ transform:translateY(-14%) } 76%{ transform:translateY(0) scale(1.03,.97) } 88%{ transform:translateY(-5%) } }
@keyframes awEfZoom{ 0%{ transform:scale(0); opacity:0 } 65%{ transform:scale(1.25); opacity:1 } 85%{ transform:scale(.94) } 100%{ transform:scale(1) } }
@keyframes awEfLatido{ 0%,100%{ transform:scale(1) } 14%{ transform:scale(1.18) } 28%{ transform:scale(1) } 42%{ transform:scale(1.18) } 70%{ transform:scale(1) } }
@keyframes awEfTemblor{
  0%,100%{ transform:none } 15%{ transform:skew(-12deg,-12deg) } 30%{ transform:skew(8deg,8deg) } 45%{ transform:skew(-5deg,-5deg) }
  60%{ transform:skew(3deg,3deg) } 75%{ transform:skew(-1.5deg,-1.5deg) } }
@keyframes awEfPersiana{ from{ --awP:0px } to{ --awP:14px } }
.aw-ef-persiana .aw-ef-el{ -webkit-mask-image:repeating-linear-gradient(90deg,#000 0 var(--awP),transparent var(--awP) 14px); mask-image:repeating-linear-gradient(90deg,#000 0 var(--awP),transparent var(--awP) 14px) }
@keyframes awEfRemolino{ 0%{ transform:rotate(-540deg) scale(0); opacity:0 } 70%{ opacity:1 } 100%{ transform:rotate(0) scale(1) } }
@keyframes awEfOndea{
  0%,100%{ transform:perspective(400px) rotateY(0) skewY(0) } 20%{ transform:perspective(400px) rotateY(-28deg) skewY(5deg) }
  40%{ transform:perspective(400px) rotateY(16deg) skewY(-4deg) } 60%{ transform:perspective(400px) rotateY(-10deg) skewY(3deg) }
  80%{ transform:perspective(400px) rotateY(5deg) skewY(-1.5deg) } }
@keyframes awEfCuadros{
  0%{ transform:translateX(-140%) skewX(-18deg); opacity:.95 } 45%{ transform:translateX(0) skewX(12deg); opacity:.95 }
  55%{ transform:translateX(15%) skewX(-10deg); opacity:.9 } 100%{ transform:translateX(150%) skewX(8deg); opacity:.9 } }

/* ── 2) Hero: Fase 211 — sin relleno difuminado; el encuadre lo resuelve aw-visual.js ── */

@media (prefers-reduced-motion:reduce){
  .aw-marca,.aw-marca::before,.aw-marca::after,.aw-marca .aw-marca-txt,.aw-cinta-mov,.aw-ef-el,.aw-ef-capa{ animation:none!important }
}