/* Personalidad circense. Editá aquí las ilustraciones, texturas y movimientos. */
body { overflow-x: clip; }
main { position: relative; }
.circus-bunting { height: 96px; width: 100%; overflow: hidden; margin-bottom: -38px; pointer-events: none; }
.circus-bunting img { width: 100%; min-width: 800px; height: 105px; object-fit: fill; transform-origin: top center; animation: bunting-sway 7s ease-in-out infinite; }
.hero { padding-top: 64px; isolation: isolate; }
.hero::before { content: ''; position: absolute; inset: 0 -35px 0; pointer-events: none; z-index: -2; background: radial-gradient(#762b3812 .65px, transparent .65px); background-size: 6px 6px; mask-image: linear-gradient(transparent, #000 20%, #000 70%, transparent); }
.hero-copy h1 { text-shadow: 3px 3px 0 #f5c54777; }
.hero-copy h1 > span:not(.period) { position: relative; }
.hero-copy h1 > span:not(.period)::after { content: ''; position: absolute; height: 9px; background: var(--aqua); bottom: 2px; left: -4px; right: -8px; z-index: -1; transform: rotate(-3deg); }
.hero-doodles { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.confetti { position: absolute; width: 11px; height: 25px; background: var(--aqua); animation: confetti-float 6s ease-in-out infinite; }
.confetti-one { left: -20px; top: 27%; transform: rotate(-20deg); }
.confetti-two { left: 44%; top: 13%; width: 17px; height: 9px; background: var(--yellow); animation-delay: -2s; }
.confetti-three { right: -20px; bottom: 10%; background: var(--red); width: 10px; height: 18px; animation-delay: -4s; }
.doodle-loop { position: absolute; width: 90px; height: 65px; border: 2px dashed #a7373580; border-radius: 50%; left: 43%; bottom: 28%; transform: rotate(-35deg); }
.hero-arch { border-width: 10px; outline: 1px solid var(--wine); outline-offset: 7px; box-shadow: 18px 20px 0 var(--aqua); }
.hero-visual::before { content: ''; position: absolute; inset: -20px -22px 7px; border: 2px dashed #762b3860; border-radius: 280px 280px 6px 6px; z-index: -1; }
.stage-curtain { position: absolute; top: 0; bottom: 0; width: 9%; background: repeating-linear-gradient(90deg, #762b38 0, #a73735 35%, #562432 75%, #762b38 100%); z-index: 1; opacity: .9; transition: width .7s ease; }
.curtain-left { left: 0; border-radius: 0 0 90% 0; }
.curtain-right { right: 0; border-radius: 0 0 0 90%; }
.hero-arch:hover .stage-curtain { width: 4%; }
.hero-stamp { animation: ticket-swing 6s ease-in-out infinite; transform-origin: top center; }
.hero-star { filter: drop-shadow(3px 3px 0 var(--wine)); }
.motion-toggle { position: absolute; right: 0; bottom: 10px; border: 0; border-bottom: 1px dotted var(--wine); background: none; padding: 3px 0; color: var(--wine); font-size: 9px; display: flex; gap: 10px; align-items: center; }
.motion-toggle span { font-size: 13px; }
.marquee { border-top-width: 2px; border-bottom-width: 2px; box-shadow: 0 5px 0 #f5c547; }
.show-card { position: relative; border: 1px solid var(--wine); border-radius: 5px; padding: 12px 12px 0; background: #fffaf0; box-shadow: 5px 6px 0 #762b381a; transition: transform .25s, box-shadow .25s; }
.show-card:hover { transform: translateY(-5px) rotate(-.35deg); box-shadow: 8px 11px 0 #762b3820; }
.show-copy { border-top: 1px dashed var(--wine); padding: 23px 12px 27px; position: relative; }
.show-copy::before, .show-copy::after { content: ''; position: absolute; width: 18px; height: 18px; border: 1px solid var(--wine); border-radius: 50%; background: var(--paper); top: -10px; }
.show-copy::before { left: -22px; clip-path: inset(0 0 0 50%); }
.show-copy::after { right: -22px; clip-path: inset(0 50% 0 0); }
.show-label { gap: 8px; }
.show-image { border-radius: 2px; }
.image-tag { box-shadow: 3px 3px 0 #762b3880; border: 1px solid var(--wine); transform: rotate(-2deg); }
.round-button { outline: 1px dashed var(--yellow); outline-offset: 5px; }
.about { position: relative; background: #eee4d0; background-image: repeating-linear-gradient(100deg, #f8f2e500 0 80px, #f8f2e529 80px 160px); }
.about::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 14px; background: radial-gradient(circle at 14px 0, var(--paper) 13px, transparent 14px); background-size: 28px 14px; }
.about-photo { border: 1px solid var(--wine); }
.handwritten { box-shadow: 3px 4px 0 #762b3820; border: 1px solid var(--wine); }
.circus-playground { background: var(--paper); position: relative; padding-bottom: 40px; }
.playground-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: 70px; align-items: center; }
.discipline-list { display: grid; gap: 16px; }
.discipline { display: flex; align-items: center; gap: 18px; border: 1px solid #cbb9a9; background: #fffaf0; padding: 18px 20px; text-align: left; border-radius: 3px; color: var(--wine); transition: transform .25s, background .25s, box-shadow .25s; }
.discipline.active { background: var(--yellow); border-color: var(--wine); transform: rotate(-1.5deg); box-shadow: 5px 6px 0 var(--aqua); }
.discipline:not(.active):hover { transform: translateX(5px); background: #eee4d0; }
.discipline svg { width: 76px; height: 76px; flex-shrink: 0; }
.discipline small { display: block; font-size: 8px; letter-spacing: 1.3px; margin-bottom: 7px; font-weight: 600; }
.discipline strong { font: 600 26px/1.1 var(--display); }
.discipline-arrow { margin-left: auto; font-size: 25px; }
.discipline-panel { min-width: 0; padding: 16px 16px 0; background: var(--aqua); border: 1px solid var(--wine); box-shadow: 8px 8px 0 #762b3815; border-radius: 240px 240px 3px 3px; }
.pista-photo { position: relative; height: 420px; }
.pista-photo > img { width: 100%; height: 100%; object-fit: cover; object-position: center 43%; border-radius: 230px 230px 2px 2px; background: var(--wine); }
.pista-photo > img[data-current="malabares"], .pista-photo > img[data-current="humor"] { object-position: center; }
.pista-curtain-layer { position: absolute; inset: 0; border-radius: 230px 230px 2px 2px; overflow: hidden; pointer-events: none; z-index: 2; }
.pista-curtain { position: absolute; top: 0; bottom: 0; width: 51%; background: repeating-linear-gradient(90deg, #562432 0, #8d243a 12px, #b23c48 22px, #762b38 32px, #4e1b2d 44px); box-shadow: inset -7px 0 12px #28091477, 0 5px 12px #18071066; transition: transform .65s cubic-bezier(.22,.65,.25,1); }
.pista-curtain::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #ffffff12, transparent 40%, #27051855); border-bottom: 5px solid var(--yellow); }
.pista-curtain-left { left: 0; transform: translateX(0); border-radius: 0 0 8% 0; }
.pista-curtain-right { right: 0; transform: translateX(0); border-radius: 0 0 0 8%; }
.curtain-open .pista-curtain-left { transform: translateX(-78%); }
.curtain-open .pista-curtain-right { transform: translateX(78%); }
.pista-valance { position: absolute; left: 0; right: 0; top: 0; height: 42px; background: repeating-linear-gradient(90deg, #762b38 0, #a73735 18px, #562432 36px); border-bottom: 3px solid var(--yellow); border-radius: 0 0 50% 50%; }
.curtain-tie { position: absolute; top: 64%; width: 15px; height: 40px; background: linear-gradient(90deg, #f5c547, #fff0ad, #bb8739); border-radius: 8px; opacity: 0; transition: opacity .35s; box-shadow: 0 2px 4px #0004; }
.tie-left { left: 5%; transform: rotate(-13deg); }
.tie-right { right: 5%; transform: rotate(13deg); }
.curtain-open .curtain-tie { opacity: 1; }
.curtain-toggle { position: absolute; bottom: 17px; left: 17px; z-index: 5; border: 1px solid var(--wine); border-radius: 3px; background: var(--yellow); color: var(--wine); font-size: 10px; font-weight: 700; padding: 9px 13px; display: flex; align-items: center; gap: 13px; box-shadow: 3px 3px 0 #56243260; }
.curtain-toggle:hover { background: #ffe099; }
.curtain-toggle > span { font-size: 18px; line-height: 1; }
.pista-photo .pista-ticket { z-index: 3; bottom: 80px; }
body.motion-paused .pista-curtain, body.motion-paused .curtain-tie { transition: none; }
.pista-ticket { position: absolute; right: -32px; bottom: 30px; padding: 18px 22px; background: var(--wine); color: var(--paper); border: 1px dashed var(--paper); outline: 5px solid var(--wine); transform: rotate(8deg); text-align: center; font: 600 18px/1 var(--display); letter-spacing: 1px; }
.pista-ticket b { font-size: 28px; line-height: 1.1; }
.pista-ticket > span { display: block; color: var(--yellow); font-size: 25px; padding-top: 8px; }
.discipline-caption { padding: 22px 10px 20px; color: var(--wine); }
.discipline-caption > span { font: italic 600 25px var(--serif); }
.discipline-caption p { font-size: 12px; margin: 8px 0 0; max-width: 400px; }
.discipline-panel.changing .pista-photo > img { animation: photo-in .4s ease; }
.gallery-item img { border: 8px solid #fffaf0; outline: 1px solid var(--line); box-shadow: 3px 3px 0 #762b381a; }
.gallery { padding: 3px 2px 10px; }
.gallery-item:nth-child(even) img { border-color: #f2d693; }
.festivals { position: relative; background-image: radial-gradient(#f8f2e518 1px, transparent 1px); background-size: 12px 12px; }
.festivals::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 13px; background: radial-gradient(circle at 13px 13px, var(--wine) 12px, transparent 13px); background-size: 26px 13px; }
.tour-poster { background-image: url('assets/carpa.svg'); background-repeat: no-repeat; background-size: 120px; background-position: calc(100% - 15px) 23px; }
.tour-year { font-size: 90px; }
.tour-title { padding-bottom: 34px; }
.press-links > a { background: #fffaf0; padding: 22px 18px; border: 1px solid var(--line); margin-bottom: 12px; box-shadow: 4px 4px 0 #762b3810; transition: transform .2s; }
.press-links > a:hover { transform: rotate(-1deg); }
.dossier-languages { border-top: 0; }
.contact { position: relative; background-image: radial-gradient(#762b381a .75px, transparent .75px); background-size: 7px 7px; }
.contact::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 10px; background: repeating-linear-gradient(90deg, var(--wine) 0 22px, var(--yellow) 22px 44px, var(--paper) 44px 66px); }
.inquiry { position: relative; border-top: 9px solid var(--wine); background-image: repeating-linear-gradient(45deg, var(--red) 0 8px, var(--paper) 8px 16px, var(--aqua) 16px 24px, var(--paper) 24px 32px); background-size: 100% 5px; background-repeat: no-repeat; padding-top: 34px; }
.contact h2 { text-shadow: 2px 2px 0 #f8f2e577; }
footer { position: relative; }
.footer-carpa { display: flex; justify-content: center; align-items: center; gap: 35px; padding: 40px 20px 0; }
.footer-carpa img { width: 180px; height: auto; transform: rotate(-4deg); }
.footer-carpa > span { font: italic 600 26px/1.3 var(--serif); color: var(--yellow); }
.footer-top { padding-top: 30px; }
body.motion-paused *, body.motion-paused *::before, body.motion-paused *::after { animation-play-state: paused !important; }
body.motion-paused .hero-arch:hover .stage-curtain { width: 9%; }
body.motion-paused .hero-arch .stage-curtain { transition: none; }
@keyframes bunting-sway { 0%,100% { transform: rotate(-.5deg); } 50% { transform: rotate(.5deg) translateY(3px); } }
@keyframes confetti-float { 0%,100% { translate: 0 0; rotate: -15deg; } 50% { translate: 0 -14px; rotate: 20deg; } }
@keyframes ticket-swing { 0%,100% { transform: rotate(-12deg); } 50% { transform: rotate(-6deg) translateY(-4px); } }
@keyframes photo-in { from { opacity: .55; transform: scale(.99); } to { opacity: 1; transform: scale(1); } }
@media(max-width: 1000px) { .playground-layout { gap: 35px; } .discipline { padding: 14px; gap: 12px; } .discipline svg { width: 58px; height: 58px; } .discipline strong { font-size: 23px; } .pista-photo { height: 360px; } .pista-ticket { right: -20px; } .show-label { flex-wrap: wrap; } }
@media(max-width: 700px) { .circus-bunting { height: 72px; margin-bottom: -30px; } .circus-bunting img { height: 80px; min-width: 680px; margin-left: calc((100% - 680px)/2); } .hero { padding-top: 52px; } .hero-doodles .doodle-loop { display: none; } .hero-copy h1 { text-shadow: 2px 2px 0 #f5c54777; } .hero-visual::before { inset: -14px -13px 5px; } .hero-arch { border-width: 8px; outline-offset: 5px; box-shadow: 12px 14px 0 var(--aqua); } .show-copy { padding-inline: 6px; } .motion-toggle { font-size: 8px; right: 0; } .scroll-note { font-size: 7px; letter-spacing: .7px; } .playground-layout { grid-template-columns: 1fr; gap: 30px; } .discipline-list { gap: 10px; } .discipline { padding: 10px 15px; } .discipline strong { font-size: 24px; } .discipline svg { width: 62px; height: 62px; } .discipline-panel { margin-right: 15px; padding: 12px 12px 0; } .pista-photo { height: 360px; } .pista-ticket { padding: 13px 16px; right: -22px; } .discipline-caption > span { font-size: 23px; } .circus-playground { padding-bottom: 20px; } .tour-year { font-size: 84px; } .tour-poster { background-size: 110px; } .footer-carpa { gap: 15px; padding-top: 30px; } .footer-carpa img { width: 130px; } .footer-carpa > span { font-size: 21px; } }
@media(max-width: 380px) { .scroll-note { letter-spacing: 0; font-size: 6px; gap: 5px; } .motion-toggle { font-size: 7px; gap: 5px; } .discipline small { font-size: 7px; } .discipline strong { font-size: 21px; } .discipline svg { width: 52px; } }
@media(prefers-reduced-motion: reduce) { .circus-bunting img, .hero-stamp, .confetti, .discipline-panel.changing .pista-photo > img { animation: none !important; } .hero-arch .stage-curtain { transition: none; } .hero-arch:hover .stage-curtain { width: 9%; } }
@media(prefers-reduced-motion: reduce) { .pista-curtain, .curtain-tie { transition: none; } }