/* Cartel de circo, escenografía y personajes originales hechos en SVG. */
@font-face { font-family: Sancreek; src: url('assets/fonts/Sancreek-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
:root { --circus: Sancreek, Georgia, serif; }
.header .brand > .brand-act { display: block; flex: 0 0 80px; width: 80px; height: 70px; font-size: 0; line-height: 0; }
.brand-act .tricycle-illustration { width: 100%; height: 100%; animation: brand-cycle 8s ease-in-out infinite; }
.brand-act .cycle-wheel { animation-duration: 1.8s; }
.hero-performance { position: absolute; inset: 54px 0 40px; }
.hero-performance img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 45%; }
@keyframes brand-cycle { 0%,100% { transform: translateX(-2px); } 50% { transform: translateX(3px); } }
@media(max-width:600px) { .header .brand > .brand-act { flex-basis: 48px; width: 48px; height: 47px; } }
@media(max-width:360px) { .header .brand > .brand-act { flex-basis: 40px; width: 40px; height: 42px; } }
.grand-opening { position: relative; display: grid; grid-template-columns: 1.08fr 1fr; gap: 40px; align-items: center; padding-top: 56px; padding-bottom: 24px; }
.opening-copy { position: relative; z-index: 2; }
.opening-copy > .eyebrow { font-size: 9px; letter-spacing: 2px; margin-bottom: 30px; }
.poster-overline { display: flex; align-items: center; gap: 15px; font-size: 11px; font-weight: 700; letter-spacing: 2px; color: var(--wine); }
.poster-overline > span { color: var(--red); font-size: 23px; }
.grand-opening h1 { font: 400 clamp(58px,6.2vw,86px)/1.13 var(--circus); color: var(--wine); margin: 14px 0 22px; letter-spacing: -1.8px; }
.grand-opening h1 > span { font-size: .76em; color: var(--red); }
.opening-description { font-size: 15px; line-height: 1.7; }
.opening-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: 26px; }
.opening-actions .button { padding: 14px 23px; font-size: 12px; }
.opening-actions .text-link { font-size: 10px; }
.opening-route { font-size: 8px; letter-spacing: 1.3px; margin-top: 35px; color: var(--wine); }
.opening-route > span { color: var(--red); padding-inline: 9px; }
.opening-scene { position: relative; min-width: 0; height: 430px; isolation: isolate; }
.scene-rays { position: absolute; top: 55px; left: 50%; width: min(70%,270px); aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: repeating-conic-gradient(from 0deg,#dcbc8820 0deg 10deg,transparent 10deg 20deg); mask-image: radial-gradient(black,transparent 70%); animation: rays-turn 70s linear infinite; }
.scene-arch { position: absolute; inset: 15px 23px 40px; border: 8px solid #762b38; border-radius: 47% 47% 10px 10px; background: #efdfbd; overflow: hidden; outline: 2px solid #b08563; outline-offset: 6px; box-shadow: 14px 17px 0 #a7c9c044; }
.scene-arch::before { content: ''; position: absolute; inset: 9px; border: 2px dashed #ba854c; border-radius: 47% 47% 3px 3px; pointer-events: none; }
.scene-arch::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 40px #762b3820; pointer-events: none; }
.scene-floor { position: absolute; bottom: 0; left: 0; right: 0; height: 51px; background: repeating-linear-gradient(90deg,#af8b5f14 0 35px,transparent 35px 70px),linear-gradient(#dfc59f,#d2ac7a); border-top: 1px solid #b08c5c; z-index: -1; }
.scene-curtain { position: absolute; top: 0; bottom: 45px; width: 24%; background: repeating-linear-gradient(90deg,#a13c42 0 9px,#bd4d4d 9px 21px,#873139 21px 26px); z-index: 2; transform-origin: top; }
.curtain-a { left: 0; border-radius: 0 0 90% 0; animation: curtain-breathe 7s ease-in-out infinite; }
.curtain-b { right: 0; border-radius: 0 0 0 90%; animation: curtain-breathe 7s ease-in-out -3s infinite; }
.scene-swag { position: absolute; top: -42px; left: 0; right: 0; height: 112px; background: #762b38; border-radius: 0 0 50% 50%; border-bottom: 7px solid #e4af43; z-index: 3; }
.tricycle-track { position: absolute; left: -1%; bottom: 3px; width: 100%; z-index: 1; animation: tricycle-ride 12s ease-in-out infinite; }
.tricycle-illustration { display: block; width: 100%; overflow: visible; }
.cycle-wheel { animation: wheel-roll 2.6s linear infinite; }
.cycle-pedal { animation: wheel-roll 1.3s linear infinite; }
.rider-body { transform-origin: 280px 223px; animation: rider-bob 1.3s ease-in-out infinite; }
.rider-head { transform-origin: 278px 152px; animation: artist-nod 5s ease-in-out infinite; }
.pedaling-leg { transform-origin: 298px 215px; animation: pedal-leg 1.3s ease-in-out infinite; }
.scene-star { position: absolute; color: #ba4c48; z-index: 1; animation: stage-star 5s ease-in-out infinite; }
.star-a { top: 95px; left: 29%; font-size: 38px; }
.star-b { top: 110px; right: 24%; font-size: 57px; animation-delay: -2s; }
.star-c { top: 68px; right: 41%; font-size: 20px; animation-delay: -3s; }
.scene-orbit { width: 13px; height: 13px; border: 2px solid #762b38; border-radius: 50%; background: #f5c547; position: absolute; top: 180px; left: 25%; animation: ball-toss 4s ease-in-out infinite; }
.orbit-b { left: auto; right: 25%; width: 10px; height: 10px; background: #8bbdb1; animation-delay: -2s; }
.opening-masks { position: absolute; width: 147px; top: -20px; left: -34px; z-index: 5; transform: rotate(-12deg); }
.theatre-faces { width: 100%; display: block; overflow: visible; }
.face-happy { transform-origin: 80px 90px; animation: happy-face 8s ease-in-out infinite; }
.face-surprise { transform-origin: 190px 123px; animation: happy-face 8s ease-in-out -4s infinite reverse; }
.face-eye { transform-box: fill-box; transform-origin: center; animation: face-blink 6s linear infinite; }
.scene-seal { position: absolute; right: -2px; bottom: 23px; z-index: 6; width: 118px; height: 118px; display: flex; align-items: center; justify-content: center; flex-direction: column; border-radius: 50%; background: #f5c547; color: #542332; outline: 1px dashed #542332; outline-offset: -8px; box-shadow: 0 0 0 5px var(--paper); transform: rotate(10deg); animation: seal-swing 6s ease-in-out infinite; }
.scene-seal > span { font-size: 8px; letter-spacing: 1px; }
.scene-seal > b { font: 400 20px var(--circus); margin-block: 1px; }
.scene-caption { position: absolute; left: 41px; bottom: 1px; font: italic 600 15px var(--serif); color: var(--wine); }
.opening-bottom { grid-column: 1/-1; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); padding-top: 20px; margin-top: 11px; font-size: 8px; letter-spacing: 1px; color: var(--wine); }
.opening-bottom .motion-toggle { position: static; font-size: 9px; letter-spacing: 0; border: 1px solid var(--line); border-radius: 20px; padding: 8px 13px; }
.circus-bunting { margin-top: 20px; }
.video-hero { padding-top: 24px; }
.video-intro h2 { font: 400 39px/1.18 var(--circus); }
.video-intro h2 em { font: italic 600 32px/1.3 var(--serif); }
.section-heading h2,.about-copy h2,.press h2 { font: 400 clamp(30px,3.5vw,48px)/1.18 var(--circus); letter-spacing: -.7px; }
.section-heading h2 em,.about-copy h2 em,.press h2 em { font: italic 600 .8em/1.35 var(--serif); }
.marquee span { font-family: var(--circus); font-weight: 400; font-size: 23px; }
.show-image { overflow: hidden; }
.show-image img { transition: transform .7s cubic-bezier(.2,.7,.3,1); }
.show-card:hover .show-image img { transform: scale(1.035); }
.show-card .round-button:hover { transform: rotate(-10deg) scale(1.07); }
.next-stage { display: flex; align-items: center; justify-content: space-between; gap: 50px; padding-block: 80px 100px; }
.next-stage h2 { font: 400 46px/1.17 var(--circus); color: var(--wine); }
.next-stage h2 em { font: italic 600 40px/1.3 var(--serif); }
.next-stage p:not(.eyebrow) { margin-top: 18px; font-size: 13px; }
.ticket-cta { position: relative; text-align: center; background: var(--yellow); color: #542332; border: 1px dashed #542332; outline: 8px solid var(--yellow); padding: 30px 50px; min-width: 300px; transform: rotate(3deg); box-shadow: 14px 15px 0 var(--aqua); transition: transform .3s; }
.ticket-cta::before,.ticket-cta::after { content: ''; position: absolute; width: 28px; height: 28px; border-radius: 50%; background: var(--paper); top: calc(50% - 14px); }
.ticket-cta::before { left: -20px; } .ticket-cta::after { right: -20px; }
.ticket-cta:hover { transform: rotate(-3deg) translateY(-5px); }
.ticket-cta > span { display: block; font-size: 9px; letter-spacing: 1px; font-weight: 700; }
.ticket-cta strong { display: block; font: 400 34px/1.2 var(--circus); padding-block: 12px; }
footer.grand-finale,html[data-theme="dark"] footer.grand-finale { padding: 0; background: #762b38; color: #fff0d5; overflow: hidden; }
html[data-theme="dark"] footer.grand-finale a { color: inherit; }
.footer-lights { display: flex; align-items: center; justify-content: space-around; gap: 12px; padding: 14px 8px; background: #562432; }
.footer-lights i { width: 8px; height: 8px; border-radius: 50%; background: #ffe49b; box-shadow: 0 0 9px #f5c54788; animation: lights-glow 3s ease-in-out infinite alternate; }
.footer-lights i:nth-child(even) { animation-delay: -1.5s; }
.finale-main { position: relative; display: grid; grid-template-columns: 150px minmax(0,1fr) 260px; align-items: center; gap: 55px; padding-block: 55px; }
.finale-faces { transform: rotate(-12deg); }
.finale-copy .eyebrow { font-size: 9px; color: #f4cf84; letter-spacing: 1.3px; margin-bottom: 18px; }
.finale-title { font: 400 57px/1.16 var(--circus); }
.finale-title > span { color: #f5c547; }
.finale-copy .button { margin-top: 23px; color: #542332; padding: 13px 22px; font-size: 12px; width: fit-content; }
.finale-sign { text-align: center; }
.finale-sign > img { width: 145px; height: auto; margin: 0 auto 15px; animation: tent-rock 8s ease-in-out infinite; transform-origin: center bottom; }
.finale-sign > p { font: italic 600 23px/1.4 var(--serif); margin-bottom: 17px; }
.finale-sign > a { font-size: 11px; }
.finale-social { display: flex; justify-content: center; gap: 23px; padding-top: 16px; font-size: 11px; color: #f5c547; }
.finale-parade { display: flex; align-items: center; justify-content: space-around; gap: 30px; width: 1900px; max-width: none; border-block: 1px solid #f5c54755; padding: 17px 0; animation: footer-parade 30s linear infinite; }
.finale-parade > span { font: 400 26px var(--circus); letter-spacing: 1px; white-space: nowrap; }
.finale-parade > b { font-size: 32px; color: #f5c547; }
.finale-bottom { padding-block: 24px; display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: 9px; }
.finale-logo { font: 400 29px var(--circus); }
.booking-motion { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding-block: 23px; color: var(--wine); font-size: 9px; letter-spacing: .8px; }
.booking-motion .motion-toggle { position: static; font-size: 9px; }
.booking-page.contact { background: var(--paper); padding-top: 43px; padding-bottom: 70px; }
.booking-page .contact-grid { gap: 55px; align-items: start; }
.booking-back { font-size: 11px; margin-bottom: 35px; display: inline-flex; }
.booking-page .contact-copy { color: var(--text); }
.booking-page .contact-copy .eyebrow { color: var(--wine); }
.booking-page h1 { color: var(--wine); font: 400 47px/1.16 var(--circus); text-shadow: none; }
.booking-page h1 em { font: italic 600 43px/1.3 var(--serif); }
.booking-page .contact-email,.booking-page .contact-phones { color: var(--wine); }
.booking-page .inquiry { border: 1px solid var(--line); border-top: 9px solid #762b38; box-shadow: 10px 10px 0 var(--aqua); background-color: #fffaf0; }
.booking-page .inquiry > .eyebrow { margin-bottom: 22px; color: var(--wine); }
.booking-page .inquiry .quote-summary[hidden] { display: none; }
.booking-masks { width: 145px; margin-top: 25px; transform: rotate(-6deg); }
html[data-theme="dark"] .scene-rays { filter: brightness(1.7); }
html[data-theme="dark"] .scene-arch { background-color: #ebd8b1; box-shadow: 14px 17px 0 #4d615a; }
html[data-theme="dark"] .opening-route,html[data-theme="dark"] .opening-bottom { color: #f1c4c9; }
html[data-theme="dark"] .booking-page .inquiry { background-color: #25212d; }

@keyframes tricycle-ride { 0%,100% { transform: translateX(-18px); } 50% { transform: translateX(26px); } }
@keyframes wheel-roll { to { transform: rotate(360deg); } }
@keyframes rider-bob { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-4px) rotate(1deg); } }
@keyframes pedal-leg { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(9deg); } }
@keyframes artist-nod { 0%,65%,100% { transform: rotate(0); } 76% { transform: rotate(-10deg); } 87% { transform: rotate(6deg); } }
@keyframes curtain-breathe { 50% { transform: scaleX(.85); } }
@keyframes stage-star { 0%,100% { transform: translateY(0) rotate(-9deg); } 50% { transform: translateY(-12px) rotate(20deg); } }
@keyframes ball-toss { 0%,100% { transform: translate(0,0); } 50% { transform: translate(12px,-65px); } }
@keyframes happy-face { 50% { transform: rotate(8deg) translateY(-4px); } }
@keyframes face-blink { 0%,44%,48%,100% { transform: scaleY(1); } 46% { transform: scaleY(.1); } }
@keyframes seal-swing { 50% { transform: rotate(3deg) translateY(-5px); } }
@keyframes rays-turn { to { transform: rotate(360deg); } }
@keyframes lights-glow { to { box-shadow: 0 0 15px #f5c547cc; background: #e6b853; } }
@keyframes tent-rock { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes footer-parade { to { transform: translateX(-950px); } }

@media(max-width:1100px) { .grand-opening { gap: 25px; } .grand-opening h1 { font-size: 64px; } .opening-scene { height: 400px; } .opening-copy > .eyebrow { letter-spacing: 1px; } .finale-main { grid-template-columns: 110px minmax(0,1fr) 220px; gap: 30px; } .finale-title { font-size: 46px; } .booking-page h1 { font-size: 40px; } .booking-page h1 em { font-size: 38px; } }
@media(max-width:800px) { .grand-opening { grid-template-columns: 1fr 1fr; padding-top: 35px; } .grand-opening h1 { font-size: 48px; } .opening-copy > .eyebrow { font-size: 7px; margin-bottom: 17px; } .poster-overline { font-size: 8px; letter-spacing: 1px; gap: 8px; } .opening-description { font-size: 12px; } .opening-description br { display: none; } .opening-actions { gap: 14px; } .opening-route { line-height: 1.8; font-size: 7px; } .opening-scene { height: 335px; } .opening-masks { width: 105px; top: -3px; left: -17px; } .scene-seal { width: 88px; height: 88px; right: -5px; } .scene-seal > span { font-size: 6px; } .scene-seal > b { font-size: 15px; } .scene-caption { font-size: 11px; left: 25px; } .scene-arch { inset: 15px 10px 40px; } .star-a { top: 80px; font-size: 25px; } .star-b { top: 100px; font-size: 32px; } .finale-main { grid-template-columns: 80px minmax(0,1fr); gap: 25px; } .finale-sign { grid-column: 1/-1; display: grid; grid-template-columns: 100px minmax(0,1fr); column-gap: 25px; text-align: left; border-top: 1px solid #fff3; padding-top: 27px; } .finale-sign > img { width: 100px; grid-row: 1/4; margin: 0; } .finale-sign p { font-size: 18px; margin-bottom: 8px; } .finale-social { justify-content: start; padding-top: 10px; } .next-stage { gap: 35px; } .next-stage h2 { font-size: 35px; } .next-stage h2 em { font-size: 31px; } .ticket-cta { min-width: 230px; padding: 25px; } .ticket-cta strong { font-size: 28px; } .booking-page .contact-grid { grid-template-columns: 1fr; gap: 25px; } .booking-page .contact-copy { position: relative; } .booking-masks { position: absolute; right: 0; bottom: 0; width: 100px; } .booking-page .contact-phones { padding-right: 100px; } }
@media(max-width:600px) { .grand-opening { grid-template-columns: 1fr; gap: 19px; padding-top: 27px; } .opening-copy > .eyebrow { font-size: 7px; margin-bottom: 14px; } .poster-overline { font-size: 8px; } .grand-opening h1 { font-size: clamp(49px,14vw,68px); margin-top: 7px; margin-bottom: 16px; letter-spacing: -1px; } .opening-description { font-size: 13px; } .opening-actions .button { padding: 12px 18px; font-size: 11px; } .opening-actions .text-link { font-size: 10px; } .opening-route { margin-top: 21px; } .opening-scene { height: 345px; width: min(360px,100%); margin-inline: auto; } .scene-arch { inset: 23px 23px 39px; } .opening-masks { width: 106px; top: 0; left: -2px; } .scene-seal { right: 1px; bottom: 22px; width: 98px; height: 98px; } .scene-seal > b { font-size: 17px; } .scene-caption { left: 26px; } .opening-bottom { grid-column: 1; margin-top: 0; padding-top: 14px; letter-spacing: .1px; font-size: 7px; } .opening-bottom .motion-toggle { font-size: 8px; white-space: nowrap; padding: 7px 8px; } .video-intro h2 { font-size: 29px; } .video-intro h2 em { font-size: 26px; } .section-heading h2,.about-copy h2,.press h2 { font-size: 32px; } .marquee span { font-size: 20px; } .next-stage { display: block; padding-block: 50px 65px; } .next-stage h2 { font-size: 33px; } .next-stage h2 em { font-size: 30px; } .ticket-cta { display: block; margin: 30px 12px 0; min-width: 0; padding: 23px; } .finale-main { grid-template-columns: 72px minmax(0,1fr); gap: 17px; padding-block: 34px; } .finale-title { font-size: 37px; } .finale-copy .eyebrow { font-size: 7px; letter-spacing: .4px; } .finale-copy .button { font-size: 10px; padding: 12px 15px; } .finale-sign { gap: 14px; grid-template-columns: 90px minmax(0,1fr); } .finale-sign > img { width: 90px; } .finale-sign > a { font-size: 10px; } .finale-social { gap: 18px; font-size: 10px; } .finale-parade span { font-size: 22px; } .finale-bottom { flex-wrap: wrap; gap: 14px; font-size: 8px; } .finale-bottom > span { width: 100%; order: 3; } .finale-logo { font-size: 26px; } .booking-motion { font-size: 7px; letter-spacing: 0; padding-block: 17px; gap: 10px; } .booking-motion .motion-toggle { font-size: 8px; white-space: nowrap; } .booking-page.contact { padding-top: 30px; } .booking-back { margin-bottom: 25px; } .booking-page h1 { font-size: 38px; } .booking-page h1 em { font-size: 36px; } .booking-page .contact-email { font-size: 14px; } .booking-masks { width: 78px; bottom: 4px; } .booking-page .contact-phones { padding-right: 72px; font-size: 10px; } .booking-page .inquiry { padding: 25px 20px; box-shadow: 6px 6px 0 var(--aqua); } .booking-page .form-row { grid-template-columns: 1fr; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation: none !important; scroll-behavior: auto !important; } .show-image img,.ticket-cta { transition: none; } }
body.motion-paused .show-image img,body.motion-paused .ticket-cta { transition: none; }
body.motion-paused { scroll-behavior: auto; }
.scene-resting *, .scene-resting *::before, .scene-resting *::after { animation-play-state: paused !important; }