/*
 * Halloween: la portada abre de noche. El resto de la web conserva su forma y solo
 * cambia el acento (calabaza). Contrastes comprobados: tinta hueso sobre noche 14,6:1,
 * ámbar sobre noche 7,8:1, calabaza sobre blanco 6,1:1.
 */
:root {
	--sr-noche: #1C1A26;
	--sr-hueso: #F3ECDF;
	--sr-hueso-suave: #C9C2B6;
	--sr-ambar: #F29B4C;
}

/* Bienvenida: un campo de noche entero */
.bienvenida.has-granito-background-color { background-color: var(--sr-noche) !important; color: var(--sr-hueso); }
.bienvenida h1 { color: var(--sr-hueso); }
.bienvenida .has-gris-color { color: var(--sr-hueso-suave) !important; }
.bienvenida .antetitulo { color: var(--sr-ambar); }
.bienvenida .wp-block-search__label { color: var(--sr-hueso); }
.bienvenida .buscador-portada .wp-block-search__input { border-color: transparent; }
.bienvenida .buscador-portada .wp-block-search__button { background: var(--sr-ambar); color: var(--sr-noche); }
.bienvenida .buscador-portada .wp-block-search__button:hover { background: var(--sr-hueso); }
.bienvenida :focus-visible { outline-color: var(--sr-ambar) !important; }
.bienvenida .is-style-pildora .wp-block-button__link { border-color: transparent; }


/* ---------- Decoración fija en los bordes: se queda quieta al hacer scroll ---------- */
.hw-decor { position: fixed; inset: 0; z-index: 50; pointer-events: none; overflow: hidden; }
.hw-oculto .hw-decor, .hw-oculto .hw-escondida { display: none; }

.hw-telarana { position: absolute; top: 0; left: 0; width: clamp(90px, 9.5vw, 150px); height: auto; color: #8C8796; opacity: 0.6; }

.hw-arana { position: absolute; top: 0; left: clamp(58px, 6.2vw, 98px); display: flex; flex-direction: column; align-items: center; animation: hw-colgar 7s ease-in-out infinite; transform-origin: top center; }
.hw-arana__hilo { width: 1.5px; height: clamp(70px, 11vw, 150px); background: #8C8796; transition: height 1.4s ease-in-out; }
.hw-arana--baja .hw-arana__hilo { height: 70vh; }
@keyframes hw-colgar { 0%, 100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(4deg) translateY(10px); } }

.hw-murcielagos { position: absolute; top: clamp(150px, 22vh, 220px); right: clamp(8px, 2vw, 34px); display: grid; justify-items: end; gap: 0.5rem; }
.hw-murcielago { animation: hw-aletear 0.9s ease-in-out infinite alternate; transform-origin: center; }
.hw-murcielago:nth-child(2) { margin-right: 46px; animation-delay: 0.3s; }
.hw-murcielago:nth-child(3) { margin-right: 10px; animation-delay: 0.55s; }
@keyframes hw-aletear { from { transform: scaleY(1); } to { transform: scaleY(0.55) translateY(3px); } }

.hw-calabazas { position: absolute; left: clamp(4px, 1.2vw, 18px); bottom: 0; display: flex; align-items: flex-end; }
.hw-calabaza--grande { width: 80px; height: auto; }
.hw-calabaza--peque { width: 50px; height: auto; margin-left: -14px; margin-bottom: 2px; }
@media (min-width: 1500px) { .hw-calabaza--grande { width: 112px; } .hw-calabaza--peque { width: 70px; } }
@media (max-width: 1399px) { .hw-calabaza--peque { display: none; } }
.hw-calabazas--gira .hw-calabaza { animation: hw-girar 0.9s ease-in-out 2; }
@keyframes hw-girar { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }

/* Murciélagos del «truco»: cruzan la pantalla una vez */
.hw-vuelo { position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; }
.hw-vuelo svg { position: absolute; left: -80px; animation: hw-cruzar 2.8s linear forwards; }
@keyframes hw-cruzar { to { transform: translate(calc(100vw + 160px), -18vh) rotate(-8deg); } }

/* ---------- ¿Truco o trato? ---------- */
.hw-boton {
	position: fixed; right: clamp(10px, 2vw, 28px); bottom: clamp(10px, 2vw, 24px); z-index: 60;
	display: inline-flex; align-items: center; gap: 0.5rem; min-height: 52px; padding: 0.375rem 1.125rem 0.375rem 0.625rem;
	border: 2px solid var(--sr-ambar); border-radius: 999px; background: var(--sr-noche); color: var(--sr-hueso);
	font: 700 var(--wp--preset--font-size--small) / 1.2 var(--wp--preset--font-family--texto); cursor: pointer;
}
.hw-boton:hover { background: #2C2938; }
.hw-boton:focus-visible { outline: 3px solid var(--sr-ambar); outline-offset: 3px; }

.hw-dialogo { width: min(26rem, calc(100vw - 2rem)); padding: 1.75rem 1.5rem 1.25rem; border: 0; border-radius: 14px; background: var(--sr-noche); color: var(--sr-hueso); }
.hw-dialogo::backdrop { background: rgb(28 26 38 / 0.6); }
.hw-dialogo h2 { margin: 0 0 0.5rem; color: var(--sr-hueso); font-size: var(--wp--preset--font-size--x-large); }
.hw-dialogo p { margin: 0 0 1rem; }
.hw-dialogo a { color: var(--sr-ambar); }
.hw-dialogo :focus-visible { outline: 3px solid var(--sr-ambar); outline-offset: 2px; }
.hw-dialogo__intro { color: var(--sr-hueso-suave); }
.hw-dialogo__cerrar { position: absolute; top: 0.5rem; right: 0.5rem; margin: 0; }
.hw-dialogo__cerrar button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--sr-hueso); font-size: 1.75rem; line-height: 1; cursor: pointer; }
.hw-resultado:not(:empty) { margin-bottom: 1rem; padding: 1rem 1.125rem; border-radius: 10px; background: #2C2938; }
.hw-resultado strong { display: block; margin-bottom: 0.25rem; color: var(--sr-ambar); font-family: var(--wp--preset--font-family--titulares); font-size: var(--wp--preset--font-size--large); }
.hw-llamar { min-height: 48px; padding: 0 1.25rem; border: 0; border-radius: 6px; background: var(--sr-ambar); color: var(--sr-noche); font-weight: 700; cursor: pointer; }
.hw-llamar:hover { background: var(--sr-hueso); }
.hw-marcador { color: var(--sr-hueso-suave); font-size: var(--wp--preset--font-size--small); }
.hw-quitar { margin: 0 !important; }
.hw-quitar button { min-height: 44px; padding: 0; border: 0; background: none; color: var(--sr-hueso); text-decoration: underline; cursor: pointer; font-size: var(--wp--preset--font-size--small); }

/* Calabazas escondidas en la portada */
.hw-escondida { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: 0.25rem; padding: 0; border: 0; background: none; vertical-align: middle; cursor: pointer; }
.hw-escondida svg { width: 26px; height: 24px; transition: transform 0.2s; }
.hw-escondida:hover svg { transform: rotate(-12deg) scale(1.15); }
.hw-escondida--hallada svg { animation: hw-pop 0.5s ease-in forwards; }
@keyframes hw-pop { 50% { transform: scale(1.5); } to { transform: scale(0); opacity: 0; } }

.hw-anuncio { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 781px) {
	.hw-telarana { width: 52px; opacity: 0.45; }
	.hw-arana { display: none; } /* en el móvil tapaba el escudo */
	.hw-murcielagos { top: auto; bottom: 78px; right: 14px; }
	.hw-murcielago:nth-child(n+2) { display: none; }
	.hw-murcielago { width: 36px; height: 18px; }
	.hw-calabaza--grande { width: 50px; }
	/* En el móvil, el botón solo con la calabaza (el texto sigue ahí para los lectores de pantalla) */
	.hw-boton { width: 58px; height: 58px; padding: 0; justify-content: center; }
	.hw-boton span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
	.hw-arana, .hw-murcielago, .hw-calabazas--gira .hw-calabaza { animation: none !important; }
	.hw-arana__hilo { transition: none; }
}