/* EL SUSTO DEL 31 DE OCTUBRE (28/09/2026) — lo que pinta js/susto.js.
   Una casita encantada pequeña: fondo de noche, «chan, chan, chaaan» en naranja calabaza con
   letra de terror, un relámpago y un murciélago que cruza. El naranja SOLO vive aquí: es la broma,
   no un color de la página (el 60-30-10 de vota. no se toca). */

.sus { margin: 12px 0 2px; }
.sus__btn {
	display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
	font: 700 14px 'Poppins', sans-serif; letter-spacing: -.01em; color: #6b3200;
	background: #fff2e6; border: 1.5px dashed #d9661a; border-radius: 99px; cursor: pointer;
}
.sus__btn[aria-expanded="true"] { background: #1c140c; color: #ffb066; border-style: solid; }
.sus__btn:focus-visible { outline: 3px solid #b9c91c; outline-offset: 2px; }
/* en el aviso (fondo oscuro) */
.apz .sus__btn { color: #ffb066; background: rgb(255 138 31 / 10%); border-color: rgb(255 138 31 / 60%); }

.sus__caja {
	position: relative; overflow: hidden; margin-top: 10px; padding: 14px 14px 16px;
	background: radial-gradient(120% 90% at 50% 0%, #2b1d10 0%, #120c07 70%); border-radius: 6px;
	box-shadow: inset 0 0 0 1px rgb(255 138 31 / 25%);
}
/* `.sus .x` y no `.x`: dentro de la tarjeta del billete, `.ts__estado p` y `.ts__estado b` pisaban el color y la letra. */
.sus .sus__chan { margin: 0 0 8px; font: 400 30px/1.05 'Creepster', 'Poppins', cursive; letter-spacing: .02em; color: #ff8a1f; text-shadow: 0 2px 0 #3d1a00, 0 0 18px rgb(255 120 0 / 45%); }
.sus__chan span { display: inline-block; }
.sus__chan span:last-child { font-size: 1.25em; }
.sus .sus__tx { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: #efe7da; }
.sus .sus__tx b { display: inline; font: inherit; font-weight: 700; letter-spacing: 0; color: #fff; }
.sus .sus__mas { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; font: 700 14px Roboto, sans-serif; color: #ffcf9e; text-underline-offset: 3px; }
.sus__bat { position: absolute; top: 10px; left: -40px; font-size: 22px; opacity: 0; pointer-events: none; }

/* el relámpago */
.sus__caja::before { content: ''; position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: no-preference) {
	/* cada «chan» entra con su golpe de sonido (0 · 0,36 · 0,78 s) */
	.sus--abierto .sus__chan span { animation: sus-golpe .28s cubic-bezier(.2, 1.6, .4, 1) both; }
	.sus--abierto .sus__chan span:nth-child(2) { animation-delay: .36s; }
	.sus--abierto .sus__chan span:nth-child(3) { animation: sus-golpe .3s cubic-bezier(.2, 1.6, .4, 1) .78s both, sus-tiembla .5s linear 1.1s 2; }
	.sus--abierto .sus__tx, .sus--abierto .sus__mas { animation: sus-sale .4s ease-out 1s both; }
	.sus--abierto .sus__caja::before { animation: sus-rayo .5s ease-out .78s; }
	.sus--abierto .sus__bat { animation: sus-vuela 1.6s ease-in-out .8s; }
}
@media (prefers-reduced-motion: reduce) {
	.sus__bat { left: auto; right: 12px; opacity: .8; }
}
@keyframes sus-golpe { from { opacity: 0; transform: scale(1.8) rotate(-4deg); } to { opacity: 1; transform: none; } }
@keyframes sus-tiembla { 0%, 100% { transform: none; } 20% { transform: translate(-2px, 1px) rotate(-1deg); } 40% { transform: translate(2px, -1px) rotate(1deg); } 60% { transform: translate(-1px, 2px); } 80% { transform: translate(1px, -2px) rotate(.5deg); } }
@keyframes sus-sale { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes sus-rayo { 0% { opacity: 0; } 8% { opacity: .55; } 16% { opacity: .05; } 24% { opacity: .35; } 100% { opacity: 0; } }
@keyframes sus-vuela {
	0% { opacity: 0; transform: translate(0, 20px) scale(.6); }
	15% { opacity: 1; }
	50% { transform: translate(190px, -6px) scale(1) rotate(8deg); }
	85% { opacity: 1; }
	100% { opacity: 0; transform: translate(420px, 18px) scale(.7) rotate(-6deg); }
}

/* ── Halloween en el aviso: una telaraña en la esquina ───────────────────── */
.apz__caja { position: relative; }
.apz__caja::after {
	content: ''; position: absolute; top: -14px; right: -6px; width: 74px; height: 74px; opacity: .32; pointer-events: none;
	background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23e9e4d8' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M100 0 L20 0 M100 0 L30 45 M100 0 L55 70 M100 0 L100 80'/%3E%3Cpath d='M78 0 Q80 12 92 9 Q97 18 100 20'/%3E%3Cpath d='M56 0 Q60 22 80 20 Q88 34 100 40'/%3E%3Cpath d='M36 0 Q42 32 66 34 Q76 52 100 58'/%3E%3C/svg%3E");
}
.apz__nuevo {
	display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin-top: 8px;
	font: 700 15px Roboto, sans-serif; color: #e9e4d8; background: none; border: 1.5px solid rgb(233 228 216 / 30%); border-radius: 4px; cursor: pointer;
}
.apz__nuevo:focus-visible { outline: 3px solid #b9c91c; outline-offset: 2px; }

/* los números de la casa, dentro del susto: en ámbar, como en el panel */
.sus .sus__tx .num { color: #ffc14d; font-weight: 900; }