:root{--diagon-gold:#d4ad63;--diagon-gold2:#f0cf87;--diagon-ink:#0a0d10;--diagon-paper:#efe3c3}
.diagon-intro{position:fixed;inset:0;z-index:9999;overflow:hidden;background:#0a0d10;color:#fff;display:grid;place-items:center;transition:opacity .8s ease,visibility .8s ease}.diagon-intro.is-done{opacity:0;visibility:hidden;pointer-events:none}.diagon-intro__bg{position:absolute;inset:-7%;background:url('/callejon-diagon/callejon-diagon-dia.jpg') center/cover no-repeat;filter:saturate(1.22) brightness(.85);animation:diagonPush 8s cubic-bezier(.2,.65,.2,1) forwards}.diagon-intro__shine{position:absolute;inset:0;background:radial-gradient(circle at 50% 15%,rgba(255,220,135,.28),transparent 33%),linear-gradient(180deg,rgba(8,12,16,.12),rgba(8,12,16,.62))}.diagon-intro__content{position:relative;text-align:center;padding:24px 18px;max-width:760px;text-shadow:0 5px 28px rgba(0,0,0,.65);animation:diagonTitle 1.4s 1.1s both}.diagon-intro__content h1,.diagon-hero__copy h1{font-family:'Cinzel',serif;font-size:clamp(3.1rem,10vw,8rem);line-height:.95;letter-spacing:.055em;text-transform:uppercase;color:var(--diagon-gold2);margin:.3rem 0 1rem}.diagon-intro__content p{font:italic clamp(1rem,2vw,1.4rem) 'Marcellus',serif;color:#fff3d0}.diagon-kicker{font-family:'Cinzel',serif;letter-spacing:.2em;text-transform:uppercase;color:var(--diagon-gold2);font-size:.78rem}.diagon-skip{position:absolute;z-index:5;right:clamp(16px,4vw,56px);top:clamp(16px,4vw,42px);border:1px solid rgba(240,207,135,.7);background:rgba(8,10,12,.72);color:var(--diagon-gold2);font:600 .72rem 'Cinzel',serif;letter-spacing:.08em;text-transform:uppercase;padding:.85rem 1.15rem;border-radius:4px;cursor:pointer}.diagon-skip:hover{background:rgba(212,173,99,.15)}.diagon-intro__owls span{position:absolute;color:rgba(255,246,218,.8);font-size:18px;animation:diagonFloat 6s linear infinite}.diagon-intro__owls span:nth-child(1){top:18%;left:12%;animation-delay:-1s}.diagon-intro__owls span:nth-child(2){top:26%;left:78%;animation-delay:-3s}.diagon-intro__owls span:nth-child(3){top:45%;left:88%;animation-delay:-5s}.diagon-intro__owls span:nth-child(4){top:35%;left:24%;animation-delay:-2s}
@keyframes diagonPush{from{transform:scale(1)}to{transform:scale(1.16) translateY(-1.5%)}}@keyframes diagonTitle{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}@keyframes diagonFloat{0%{transform:translate(-30px,20px) rotate(0);opacity:0}15%,80%{opacity:1}100%{transform:translate(100px,-45px) rotate(18deg);opacity:0}}
.diagon-main{background:linear-gradient(#0d1217,#080b0e 40%);min-height:100vh;overflow-x:hidden}.diagon-main .envoltura{padding-left:22px;padding-right:22px}.diagon-hero{min-height:clamp(560px,73vh,800px);position:relative;display:flex;align-items:end;overflow:hidden;border-bottom:1px solid rgba(212,173,99,.4)}.diagon-hero__image{position:absolute;inset:0;background:url('/callejon-diagon/callejon-diagon-dia.jpg') center/cover no-repeat;filter:saturate(1.35) brightness(1.05);transform:scale(1.02)}.diagon-hero__overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,8,10,.72),rgba(5,8,10,.18) 48%,rgba(5,8,10,.12)),linear-gradient(0deg,#090c0f 0%,transparent 45%)}.diagon-hero__copy{position:relative;padding-top:140px;padding-bottom:clamp(56px,9vw,110px);max-width:1120px;width:100%}.diagon-hero__copy p{max-width:650px;font:clamp(1.05rem,2vw,1.35rem) 'Marcellus',serif;color:#f1e5ca;margin:0 0 1.6rem}.diagon-btn{display:inline-flex;align-items:center;justify-content:center;padding:.9rem 1.35rem;text-decoration:none;text-transform:uppercase;letter-spacing:.08em;font:600 .74rem 'Cinzel',serif;border:1px solid var(--diagon-gold);border-radius:4px}.diagon-btn--gold{color:#111;background:linear-gradient(180deg,var(--diagon-gold2),var(--diagon-gold))}.diagon-section,.diagon-shops,.diagon-products{padding:64px 0}.diagon-title{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:30px;color:var(--diagon-gold)}.diagon-title--left{justify-content:flex-start}.diagon-title h2{font-family:'Cinzel',serif;font-size:clamp(1.55rem,3vw,2.5rem);text-transform:uppercase;letter-spacing:.055em;text-align:center}.diagon-title--left h2{text-align:left}.diagon-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.diagon-grid--three{grid-template-columns:repeat(3,minmax(0,1fr))}.diagon-card{min-width:0;border:1px solid rgba(212,173,99,.34);background:linear-gradient(160deg,rgba(21,28,34,.98),rgba(10,14,18,.98));padding:26px 22px;text-decoration:none;color:#f2e6ca;position:relative;overflow:hidden;transition:.25s}.diagon-card:before{content:"";position:absolute;inset:6px;border:1px solid rgba(212,173,99,.12);pointer-events:none}.diagon-card:hover{transform:translateY(-4px);border-color:rgba(240,207,135,.72);background:linear-gradient(160deg,rgba(32,41,45,.98),rgba(12,17,20,.98))}.diagon-card__icon{font-size:2rem;margin-bottom:18px}.diagon-card h3,.diagon-shop-card h3,.diagon-product h3{font-family:'Cinzel',serif;color:var(--diagon-gold2);font-size:1.18rem;text-transform:uppercase;line-height:1.2;margin-bottom:10px}.diagon-card p,.diagon-shop-card p,.diagon-product p{font:1rem 'Marcellus',serif;color:#c9c1b1;line-height:1.6;margin:0}.diagon-link{display:inline-block;margin-top:22px;font:600 .7rem 'Cinzel',serif;color:var(--diagon-gold2);text-transform:uppercase;letter-spacing:.06em}.diagon-shop-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.diagon-shop-card{border:1px solid rgba(212,173,99,.24);background:rgba(17,23,28,.82);padding:24px;min-width:0}.diagon-products__list{display:grid;gap:14px}.diagon-product{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;border:1px solid rgba(212,173,99,.24);background:rgba(16,21,25,.72);padding:20px 22px}.diagon-product>div{min-width:0}.diagon-badge{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;padding:.52rem .8rem;border:1px solid rgba(240,207,135,.35);background:rgba(212,173,99,.12);color:var(--diagon-gold2);font:600 .69rem 'Cinzel',serif;letter-spacing:.05em;text-transform:uppercase}.diagon-story{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch;padding:30px 0 70px}.diagon-story__copy{border:1px solid rgba(212,173,99,.25);padding:36px;background:rgba(16,21,25,.72)}.diagon-story h2{font-family:'Cinzel',serif;color:var(--diagon-gold2);font-size:clamp(1.7rem,3vw,2.6rem);margin:.6rem 0 1rem}.diagon-story p{font:1.08rem 'Marcellus',serif;color:#d3c9b6;line-height:1.7;margin:.8rem 0}.diagon-story__visual{min-height:420px;background:url('/callejon-diagon/callejon-diagon-dia.jpg') 72% center/cover no-repeat;border:1px solid rgba(212,173,99,.32);box-shadow:inset 0 0 90px rgba(0,0,0,.5)}.diagon-quote{display:flex;align-items:center;justify-content:center;gap:16px;border-top:1px solid rgba(212,173,99,.22);border-bottom:1px solid rgba(212,173,99,.22);padding:32px 20px;margin-bottom:70px;text-align:center}.diagon-quote p{font:italic 1.2rem 'Marcellus',serif;color:#d8c9aa}.diagon-quote__mark{color:var(--diagon-gold);font-size:2.4rem}
@media(max-width:980px){.diagon-grid--three,.diagon-shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.diagon-story{grid-template-columns:1fr}.diagon-hero{min-height:620px}.diagon-hero__image{background-position:58% center}}
@media(max-width:560px){.diagon-main .envoltura{padding-left:16px;padding-right:16px}.diagon-grid--three,.diagon-shop-grid{grid-template-columns:1fr}.diagon-intro__content h1,.diagon-hero__copy h1{font-size:clamp(2.3rem,14vw,4.2rem)}.diagon-intro__bg{background-position:58% center}.diagon-skip{right:12px;top:12px;padding:.7rem .85rem}.diagon-hero{align-items:center;min-height:580px}.diagon-hero__overlay{background:linear-gradient(180deg,rgba(5,8,10,.35),rgba(5,8,10,.58) 38%,rgba(5,8,10,.92))}.diagon-hero__copy{padding-top:110px;padding-bottom:48px}.diagon-hero__copy p{font-size:1.02rem;max-width:100%}.diagon-story__copy{padding:22px}.diagon-product{flex-direction:column;align-items:flex-start;padding:18px}.diagon-title{gap:10px;margin-bottom:22px}.diagon-quote{padding:26px 10px}}
@media(prefers-reduced-motion:reduce){.diagon-intro__bg,.diagon-intro__content,.diagon-intro__owls span{animation:none!important}.diagon-card{transition:none}}