/* Rollo de boletos: las 32 noches de la feria. Compartido por la portada y /bitacora/ */
.rollo-wrap{position:relative}
.rollo{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 4px 26px;scrollbar-width:thin;scrollbar-color:#ff2e88 transparent;-webkit-overflow-scrolling:touch}
.rollo::-webkit-scrollbar{height:8px}.rollo::-webkit-scrollbar-thumb{background:#ff2e88;border-radius:9px}
.rollo.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));overflow:visible;scroll-snap-type:none}
.boleto{--c:#3a2a52;--t:#b9a8cf;flex:0 0 200px;scroll-snap-align:start;position:relative;display:flex;flex-direction:column;min-height:250px;border-radius:14px;background:#1a0f2e;color:#f4eefb;text-decoration:none;border:1.5px solid var(--c);overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}
a.boleto:hover{transform:translateY(-5px) rotate(-1deg);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.boleto__cab{display:flex;justify-content:space-between;align-items:baseline;padding:12px 14px 10px;border-bottom:2px dashed var(--c);position:relative}
.boleto__cab::before,.boleto__cab::after{content:"";position:absolute;bottom:-9px;width:16px;height:16px;border-radius:50%;background:var(--fondo-rollo,#0a0512);border:1.5px solid var(--c)}
.boleto__cab::before{left:-9px}.boleto__cab::after{right:-9px}
.boleto__dia{font-family:"Anton",Impact,sans-serif;font-size:46px;line-height:.9;letter-spacing:-.5px}
.boleto__mes{font-size:11px;text-transform:uppercase;letter-spacing:1.4px;color:var(--t);text-align:right;line-height:1.3}
.boleto__cuerpo{padding:14px;display:flex;flex-direction:column;gap:6px;flex:1}
.boleto__noche{font-size:11px;text-transform:uppercase;letter-spacing:1.6px;color:var(--t)}
.boleto__show{font-family:"Anton",Impact,sans-serif;font-size:22px;line-height:1.05;text-transform:uppercase;letter-spacing:.2px}
.boleto__foto{margin:2px 0 4px;border-radius:9px;aspect-ratio:16/10;object-fit:cover;width:100%;display:block;background:#241638}
.boleto__resumen{font-size:13px;color:var(--t);line-height:1.4;margin:0}
.boleto__estado{margin-top:auto;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--t)}
.boleto__sello{position:absolute;top:96px;right:-4px;transform:rotate(14deg);border:3px solid currentColor;border-radius:8px;padding:2px 10px;font-family:"Anton",Impact,sans-serif;font-size:20px;letter-spacing:1px;text-transform:uppercase;opacity:.9;pointer-events:none}
/* estados */
.boleto--futuro{opacity:.62}
.boleto--futuro:hover{opacity:1}
.boleto--hoy{--c:#ffc233;--t:#ffe3a1;background:linear-gradient(170deg,#3b2606,#1a0f2e 70%);box-shadow:0 0 0 4px rgba(255,194,51,.18),0 0 40px rgba(255,194,51,.25);flex-basis:230px}
.boleto--hoy .boleto__estado{color:#ffc233}
.boleto--hoy .boleto__sello{color:#ffc233;animation:sello-late 1.4s ease-in-out infinite}
@keyframes sello-late{50%{opacity:.35}}
.boleto--pasado{--c:#6b4f8f}
.boleto--pasado .boleto__sello{color:#ff5c5c}
.boleto--pasado .boleto__foto{opacity:.85}
.boleto--cronica{--c:#ff2e88;--t:#f2c6dc;background:linear-gradient(170deg,#3a0b24,#1a0f2e 75%)}
.boleto--cronica .boleto__sello{color:#26e3ff}
.boleto--cronica .boleto__estado{color:#26e3ff}
/* barra de avance */
.avance{display:flex;align-items:center;gap:14px;margin:0 0 18px;font-size:14px;color:#b9a8cf}
.avance__barra{flex:1;height:10px;border-radius:99px;background:#241638;overflow:hidden;max-width:420px}
.avance__barra i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ff2e88,#ffc233);border-radius:99px;transition:width 1s ease}
.avance b{color:#f4eefb}
.rollo-flechas{display:flex;gap:8px}
.rollo-flechas button{width:42px;height:42px;border-radius:50%;border:1.5px solid rgba(255,255,255,.2);background:transparent;color:#f4eefb;font-size:18px;cursor:pointer}
.rollo-flechas button:hover{border-color:#ff2e88}

/* Versión amplia (portada): el rollo ocupa todo el ancho de la pantalla y los boletos son más grandes,
   con la portada de cada noche a buen tamaño. El primer boleto queda alineado con el margen del texto. */
.rollo-wrap--amplio{width:100vw;margin-left:calc(50% - 50vw)}
.rollo--amplio{gap:22px;padding:14px max(20px,calc((100vw - 1140px)/2)) 30px;scroll-padding-left:max(20px,calc((100vw - 1140px)/2))}
.rollo--amplio .boleto{flex:0 0 330px;min-height:460px;border-radius:20px}
.rollo--amplio .boleto--hoy{flex-basis:360px}
.rollo--amplio .boleto__cab{padding:16px 18px 12px}
.rollo--amplio .boleto__dia{font-size:64px}
.rollo--amplio .boleto__mes{font-size:12px}
.rollo--amplio .boleto__cuerpo{padding:18px;gap:8px}
.rollo--amplio .boleto__noche{font-size:12px}
.rollo--amplio .boleto__show{font-size:29px}
.rollo--amplio .boleto__foto{border-radius:14px;margin:4px 0 6px}
.rollo--amplio .boleto__resumen{font-size:14.5px;line-height:1.45}
.rollo--amplio .boleto__estado{font-size:13px}
.rollo--amplio .boleto__sello{top:126px;right:-2px;font-size:25px;padding:3px 13px}
@media (max-width:640px){.boleto{flex-basis:172px;min-height:230px}.boleto--hoy{flex-basis:200px}.boleto__dia{font-size:40px}.boleto__show{font-size:19px}.rollo.rejilla{grid-template-columns:1fr 1fr;gap:10px}.rollo.rejilla .boleto{min-height:210px}
.rollo--amplio{gap:14px;padding:10px 16px 24px;scroll-padding-left:16px}
.rollo--amplio .boleto{flex-basis:272px;min-height:400px;border-radius:16px}
.rollo--amplio .boleto--hoy{flex-basis:290px}
.rollo--amplio .boleto__dia{font-size:52px}
.rollo--amplio .boleto__show{font-size:24px}
.rollo--amplio .boleto__sello{top:108px;font-size:21px}}
@media (prefers-reduced-motion:reduce){.boleto,.avance__barra i{transition:none}.boleto--hoy .boleto__sello{animation:none}}