/* ============================================================
   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 }
.aw-marca: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%) } }

/* ── 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{ animation:none!important }
}