@import"https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@400;500;600&display=swap";:root{color-scheme:dark;--coal: #0b0b0d;--night: #101b30;--stone: #73604b;--wood: #352418;--gold: #c6a05a;--parchment: #e8d5ae;--ivory: #f4e8cf;--font-display: "Cinzel", Georgia, serif;--font-body: "Inter", system-ui, sans-serif;font-family:var(--font-body);color:var(--ivory);background:var(--coal)}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%;width:100%}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{touch-action:manipulation}button:focus-visible,a:focus-visible{outline:2px solid var(--ivory);outline-offset:6px}button:disabled{opacity:.45;cursor:wait}.app{min-height:100dvh;background:var(--coal);position:relative;isolation:isolate}.app:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:-2;background:linear-gradient(90deg,#080c13eb,#080c1380 50%,#080c13eb),linear-gradient(0deg,#080b13,#0b101842 60%,#080b13a8),url(/assets/Sal%C3%B3n%20Gryffindor%20con%20pedestal%20vac%C3%ADo-xDUuKF2I.png) center 42% / cover}.app:after{content:"";position:fixed;top:15px;right:15px;bottom:15px;left:15px;border:1px solid #c6a05a33;pointer-events:none;z-index:5}.screen{position:relative;width:100%;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(.8rem,2vh,1.6rem);padding:48px 5vw;text-align:center;animation:screenIn .65s ease both}.display{font-family:var(--font-display);font-weight:400;font-size:clamp(2.6rem,6vw,6rem);line-height:1.15;letter-spacing:-.035em;color:var(--ivory);margin:0;text-shadow:0 4px 35px #000a}.display--small{font-size:clamp(1.8rem,3.5vw,3.6rem)}.subtitle{font-family:Cormorant Garamond,Georgia,serif;font-size:clamp(1.15rem,2vw,1.6rem);color:var(--parchment);font-weight:400;line-height:1.45;max-width:48ch;margin:0}.eyebrow{text-transform:uppercase;letter-spacing:.28em;font-size:.66rem;line-height:1.8;color:var(--gold);margin:0}.btn-primary,.btn-ghost{font-family:var(--font-display);font-weight:500;font-size:.85rem;letter-spacing:.12em;padding:18px 30px;border:1px solid var(--gold);border-radius:1px;cursor:pointer;transition:background .25s,box-shadow .25s,transform .25s}.btn-primary{color:var(--ivory);background:linear-gradient(110deg,#69502b99,#352418ee);box-shadow:inset 0 0 0 4px #0b0b0d55,0 8px 35px #0005}.btn-primary span{margin-left:24px}.btn-primary:hover:not(:disabled){background:#74582d;box-shadow:0 0 30px #c6a05a33;transform:translateY(-2px)}.btn-ghost{color:var(--parchment);background:#0b0b0d44;border-color:#c6a05a44;font-size:.7rem;padding:12px 20px}.btn-ghost:hover{background:#c6a05a18;border-color:var(--gold)}.intro{overflow:hidden}.intro__content{position:relative;display:flex;flex-direction:column;align-items:center;gap:clamp(12px,2.4vh,24px);z-index:1}.intro__seal{font:42px var(--font-display);border:1px solid var(--gold);border-radius:48% 48% 50% 50%;color:var(--gold);width:70px;height:84px;padding-top:9px;box-shadow:0 0 0 5px #c6a05a0c}.intro__seal span{display:block;font-size:10px;margin-top:-3px}.intro__logo{font:500 .8rem var(--font-display);letter-spacing:.3em;color:var(--gold);margin:0;text-transform:uppercase}.intro__title em{font-style:normal;color:var(--parchment)}.ornament{color:var(--gold);display:flex;align-items:center;gap:18px;font-size:.65rem}.ornament:before,.ornament:after{content:"";height:1px;width:70px;background:linear-gradient(90deg,transparent,var(--gold))}.ornament:after{transform:rotate(180deg)}.intro__note{font-size:.65rem;letter-spacing:.08em;color:#d4c7ae99}.screen-footer{position:absolute;bottom:28px;margin:0;font-family:var(--font-display);font-size:.55rem;letter-spacing:.2em;color:#c6a05a88}.intro__banners{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;justify-content:space-between;padding:0 5vw;pointer-events:none;opacity:.65}.intro__banners>:nth-child(2){margin-right:auto;margin-left:24px}.intro__banners>:nth-child(3){margin-right:24px}.intro__banners>:nth-child(2n){transform:translateY(-50px)}.house-banner{--house: #740f19;--house-accent: #d4a43c;color:var(--house-accent);width:clamp(135px,15vw,210px);height:clamp(270px,37vh,390px);position:relative;display:flex;flex-direction:column;align-items:center;padding:20px 14px 38px;background:repeating-linear-gradient(90deg,#0002 0,transparent 2px,#fff1 3px,transparent 5px),linear-gradient(90deg,#0007,transparent 30%,#ffffff08 55%,#0007),var(--house);clip-path:polygon(0 0,100% 0,100% 88%,50% 100%,0 88%);filter:drop-shadow(0 15px 15px #0008)}.house-banner__border{position:absolute;top:7px;right:7px;bottom:0;left:7px;border:2px solid currentColor;opacity:.65;clip-path:polygon(0 0,100% 0,100% 88%,50% 98%,0 88%);pointer-events:none}.house-banner__star{font-size:.8rem}.house-banner__crest{width:70%;max-height:125px;flex-shrink:0;margin-top:8px}.house-banner__name{font:600 clamp(.55rem,.9vw,.8rem) var(--font-display);letter-spacing:.06em;margin:8px 0 0}.house-banner__vines{width:70%;min-height:0;flex:1;opacity:.7}.house-banner__end{position:absolute;bottom:17px}.house-banner--slytherin{clip-path:polygon(0 0,100% 0,100% 93%,85% 100%,63% 94%,63% 78%,50% 71%,37% 78%,37% 94%,15% 100%,0 93%)}.house-banner--ravenclaw{clip-path:polygon(0 0,100% 0,100% 100%,76% 100%,76% 83%,62% 83%,62% 100%,38% 100%,38% 83%,24% 83%,24% 100%,0 100%)}.house-banner--hufflepuff{clip-path:polygon(0 0,100% 0,100% 100%,74% 82%,50% 100%,26% 82%,0 100%)}.house-banner--small{width:clamp(70px,9vw,125px);height:320px;padding:24px 6px 40px}.house-banner--small .house-banner__name{font-size:.5rem}.body-selector{gap:16px}.body-selector__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(15px,3vw,48px);width:min(100%,1050px);margin:18px 0}.house-option{min-width:0;padding:0 0 10px;display:flex;flex-direction:column;align-items:center;gap:12px;background:none;color:var(--ivory);border:0;cursor:pointer;transition:transform .3s}.house-option .house-banner{width:90%;transition:filter .3s}.house-option__visual{display:flex;justify-content:center;position:relative;width:100%;padding-bottom:8px}.house-outfit{position:absolute;width:88%;height:67%;bottom:0;right:-3%;filter:drop-shadow(0 8px 10px #000b);pointer-events:none}.house-option__attire{font-size:.6rem;letter-spacing:.04em;color:var(--parchment)}.house-option:hover{transform:translateY(-8px)}.house-option:hover .house-banner{filter:brightness(1.2) drop-shadow(0 0 15px #c6a05a22)}.house-option__name{font:500 clamp(.9rem,1.7vw,1.35rem) var(--font-display)}.house-option__virtue{color:#e8d5ae99;font-family:Cormorant Garamond,Georgia,serif;font-size:.95rem}.house-option__choose{color:var(--house-accent);border-bottom:1px solid #c6a05a44;padding:5px 0;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase}.house-option__choose span{margin-left:15px}.camera-stage{height:100dvh;min-height:600px;padding:0;animation:none;background:#080b13;overflow:hidden}.camera-stage__video{position:absolute;top:12%;left:50%;transform:translate(-50%);width:auto;height:65%;aspect-ratio:3/4;max-width:95%;object-fit:cover;background:#000;border:1px solid #c6a05a66}.camera-stage__video--mirrored{transform:translate(-50%) scaleX(-1)}.camera-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;display:flex;flex-direction:column;align-items:center;color:var(--parchment)}.camera-overlay__hint{position:absolute;top:2%;font:.75rem var(--font-display);letter-spacing:.09em}.camera-overlay__guides{position:absolute;top:13%;height:60%;max-width:90%;color:#e8d5aeb0}.camera-overlay__caption{position:absolute;top:76%;font-size:.7rem;line-height:1.7;margin:8px 16px}.camera-ui{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;padding:24px;pointer-events:none}.camera-ui>*{pointer-events:auto}.camera-ui__title{position:absolute;top:7%;font-size:clamp(1rem,2vw,1.5rem)}.camera-ui .btn-primary{padding:13px 28px}.camera-ui .btn-ghost{padding:7px 18px}.camera-ui .subtitle{background:#0b0b0de8;padding:18px}.countdown{justify-content:center}.countdown__number{font-size:clamp(7rem,25vh,15rem);color:var(--ivory);text-shadow:0 0 50px #c6a05a;animation:screenIn .4s ease}.flash{position:fixed;top:0;right:0;bottom:0;left:0;background:#fff;opacity:0;pointer-events:none;z-index:50}.flash--on{animation:flash .32s ease-out forwards}.result__image{height:min(59vh,680px);aspect-ratio:2/3;max-width:90vw;padding:6px;border:1px solid var(--gold);background:#0b0b0d;box-shadow:0 0 0 4px #c6a05a22,0 20px 80px #0008}.result__image img{width:100%;height:100%;object-fit:contain}.qr__image{height:min(42vh,340px);max-width:85vw;aspect-ratio:1;object-fit:contain;padding:16px;background:#fff;border:6px double var(--gold)}.qr__url{max-width:90%;overflow-wrap:anywhere;font-size:.75rem;color:var(--parchment)}.processing__caption{font-size:.75rem;color:var(--parchment);line-height:1.7;max-width:42ch}.magic-loader{width:170px;height:200px;position:relative;display:grid;place-items:center}.magic-loader__ring{position:absolute;width:150px;height:150px;border:1px solid #c6a05a44;border-top-color:var(--gold);border-radius:50%;animation:spin 7s linear infinite}.magic-loader__ring:before{content:"✦";color:var(--gold);position:absolute;top:-11px;left:62px;background:#10131a;padding:0 5px}.magic-loader__ring:nth-child(2){width:120px;height:120px;animation-direction:reverse}.magic-loader__symbol{font:60px var(--font-display);color:var(--gold);text-shadow:0 0 30px #c6a05a55}.error__code{font-size:.7rem;color:#e8d5ae88}.debug-bar{position:fixed;bottom:0;left:0;right:0;z-index:100;display:flex;flex-wrap:wrap;gap:8px;background:#0b0b0df0;padding:6px;color:var(--gold);font:10px monospace}.debug-bar__actions{display:flex;flex-wrap:wrap;gap:5px;margin-left:auto}.debug-bar button{background:var(--wood);border:1px solid var(--gold);color:var(--ivory);font:inherit;cursor:pointer}@keyframes screenIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes flash{0%,to{opacity:0}15%{opacity:.95}}@media (max-width: 900px){.intro__banners{padding:0 4vw;opacity:.45}.intro__banners>:nth-child(2),.intro__banners>:nth-child(3){display:none}.intro__banners .house-banner{height:230px}.house-option__virtue{font-size:.8rem}}@media (max-width: 600px){.app:after{top:8px;right:8px;bottom:8px;left:8px}.screen{padding:38px 22px}.intro{min-height:750px;min-height:max(750px,100dvh)}.intro__banners{opacity:.35}.intro__banners .house-banner{width:60px;height:190px}.intro__banners .house-banner__name{display:none}.intro__content{gap:18px}.intro .eyebrow{max-width:22ch}.intro__title{font-size:clamp(2.7rem,11vw,4rem)}.intro__note{font-size:.58rem}.screen-footer{font-size:.45rem}.body-selector__grid{grid-template-columns:repeat(2,1fr);gap:26px 16px}.house-option{gap:8px}.house-option .house-banner{width:125px;height:235px;padding-top:12px}.house-banner__crest{height:90px}.house-banner__name{font-size:.55rem}.house-option__name{font-size:.95rem}.house-option__virtue{max-width:18ch;line-height:1.3;min-height:2.6em}.camera-stage{padding:0}.camera-ui{padding-bottom:20px}.result__image{height:min(55vh,600px)}}@media (max-height: 760px) and (min-width: 601px){.intro__content{gap:10px}.intro__seal{display:none}.intro__title{font-size:clamp(2.8rem,8vh,5rem)}.body-selector__grid{margin:5px 0}.house-option .house-banner{height:260px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}