/* Tema de Halloween, opción A. Todo cuelga de html.hw-on: sin esa clase este archivo no pinta nada.
   La clase la pone el script de halloween_theme.php mientras dura la temporada. */

/* Franja de afiliados: calabaza, ámbar y morado, con el mismo desplazamiento de siempre */
html.hw-on .partner-bar{background-image:linear-gradient(90deg,#ff7a18,#ffb347,#b36bff,#ff7a18,#ffb347,#b36bff,#ff7a18)}
html.hw-on .partner-bar::before{box-shadow:inset 0 -2px 0 rgba(0,0,0,.25),0 0 22px 2px rgba(255,122,24,.4)}

/* Acento del menú y del cajón: naranja en vez de verde (más oscuro en tema claro para llegar a AA) */
html.hw-on .top-nav,html.hw-on .nav-drawer{--green:#ff7a18}
html.hw-on[data-theme="light"] .top-nav,html.hw-on[data-theme="light"] .nav-drawer{--green:#b84a00}
html.hw-on .top-nav .nav-dropdown-panel a.active{background:rgba(255,122,24,.1)}
html.hw-on .nav-drawer-item.active{background:rgba(255,122,24,.08)}
html.hw-on .search-toggle{border-color:rgba(255,122,24,.45)}
html.hw-on .search-toggle.is-active{background:rgba(255,122,24,.14);border-color:rgba(255,122,24,.55)}

/* Telarañas del menú: esquinas de arriba, detrás del logo y de los enlaces */
html.hw-on .top-nav::before,html.hw-on .top-nav::after{content:"";position:absolute;top:0;left:0;z-index:-1;width:64px;height:64px;background:url(/seasonal/halloween/telarana.svg?v=1) no-repeat 0 0/100% 100%;opacity:.5;pointer-events:none}
html.hw-on .top-nav::after{left:auto;right:0;transform:scaleX(-1)}
html.hw-on[data-theme="light"] .top-nav::before,html.hw-on[data-theme="light"] .top-nav::after{opacity:.85}

/* Esqueleto sobre fondo claro: un contorno oscuro para que el hueso no se pierda (su caja está en esqueleto.css) */
html.hw-on[data-theme="light"] .hw-esq svg{filter:drop-shadow(0 0 .7px #2a2018) drop-shadow(0 0 .7px #2a2018)}

/* Telarañas de los banners: sobre la creatividad, bajo la etiqueta AD, sin capturar clics.
   El enlace del banner principal recorta: mientras no hay imagen mide cero y no se ve nada. */
html.hw-on #hero-banner-link{position:relative;display:block;overflow:hidden;border-radius:var(--r,12px)}
html.hw-on #hero-banner-link::before,html.hw-on #hero-banner-link::after,html.hw-on .dl-promo-banner::before,html.hw-on .dl-promo-banner::after,html.hw-on .dl-mobile-cb-banner::before,html.hw-on .dl-mobile-cb-banner::after,html.hw-on .tra-promo::before,html.hw-on .tra-promo::after{content:"";position:absolute;top:0;left:0;z-index:1;height:clamp(26px,40%,64px);aspect-ratio:1;background:url(/seasonal/halloween/telarana.svg?v=1) no-repeat 0 0/100% 100%;opacity:.6;pointer-events:none}
html.hw-on #hero-banner-link::after,html.hw-on .dl-promo-banner::after,html.hw-on .dl-mobile-cb-banner::after,html.hw-on .tra-promo::after{left:auto;right:0;transform:scaleX(-1)}
html.hw-on .dl-ad-tag,html.hw-on .tra-promo-label{z-index:2}

@media (max-width:700px){
html.hw-on .top-nav::before,html.hw-on .top-nav::after{width:52px;height:52px}
/* En tema claro el logo es ancho: la lupa deja de flotar al centro para que quepa el esqueleto */
html.hw-on[data-theme="light"] .top-nav .search-toggle-mobile{margin-left:auto}
}