/*
 * 12-art-direction.css - Pase final de direccion de arte: alturas del hero, tipografia de poster, galeria grande, glass al 150% y bloque Luma.
 * Origen: index.html, <style> #1 (lineas 211-273). Contenido identico al original.
 */
/* ===== FINAL ART-DIRECTION PASS ===== */
body{background:#030507}
.hero{height:112vh;min-height:820px;z-index:1}
.hero-bg{background-size:cover;background-position:center center;transform:scale(1.001);will-change:background-position,transform}
.hero::after{background:linear-gradient(180deg,transparent 48%,rgba(3,5,7,.02) 66%,rgba(3,5,7,.12) 78%,rgba(3,5,7,.48) 94%,#030507 100%);opacity:1;mix-blend-mode:normal}
.hero-title{font-family:Cinzel,serif;font-weight:700;letter-spacing:.035em}
/* Heavy event-poster lettering */
.section-title{font-family:Anton,Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;font-weight:900;letter-spacing:.045em;text-transform:uppercase;font-size:clamp(46px,7vw,92px);line-height:.92}
.section-kicker{font-family:Inter,system-ui,sans-serif;font-weight:700;letter-spacing:.28em}
/* Make the transition feel like one continuous cinematic canvas */
#experiencia{margin-top:-13vh;padding-top:90px;background:linear-gradient(180deg,rgba(3,5,7,0) 0%,rgba(3,5,7,.14) 14%,#030507 48%,#030507 100%);border-top:0;z-index:2}
#experiencia::after{content:"";position:absolute;z-index:-1;left:0;right:0;top:-28vh;height:58vh;background-image:linear-gradient(180deg,rgba(3,5,7,0) 0%,rgba(3,5,7,.04) 40%,rgba(3,5,7,.62) 88%,#030507 100%);background-size:cover;background-position:center bottom;filter:saturate(.98) brightness(.98);pointer-events:none}
#experiencia .container{position:relative}
/* Gallery much larger, closer to the reference composition */
.gallery-wrap{height:800px;margin-left:-8vw;margin-right:-8vw;perspective:1800px}
.gallery-stage{width:min(1240px,94vw);height:590px}
.card{width:58%;height:86%;border-radius:30px;background:rgba(9,12,16,.24);backdrop-filter:blur(10px) saturate(125%);-webkit-backdrop-filter:blur(10px) saturate(125%);border-color:rgba(255,215,126,.52);box-shadow:0 45px 120px rgba(0,0,0,.56),inset 0 1px 0 rgba(255,255,255,.22),0 0 35px rgba(230,177,61,.08)}
.card img{object-fit:cover}
.card::after{background:linear-gradient(180deg,rgba(255,255,255,.04),transparent 30%,rgba(0,0,0,.18) 100%)}
.card.center{transform:translate(-50%,-50%) translateZ(240px) rotateY(0deg) scale(1.12)}
.card.left{transform:translate(-96%,-50%) translateZ(20px) rotateY(30deg) scale(.84);filter:saturate(.92) brightness(.78)}
.card.right{transform:translate(-4%,-50%) translateZ(20px) rotateY(-30deg) scale(.84);filter:saturate(.92) brightness(.78)}
.card.farleft{transform:translate(-133%,-50%) translateZ(-150px) rotateY(50deg) scale(.62);opacity:.52}
.card.farright{transform:translate(33%,-50%) translateZ(-150px) rotateY(-50deg) scale(.62);opacity:.52}
.gallery-controls{margin-top:-70px;gap:16px}
.dot{width:7px;height:7px;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.dot.active{width:34px;height:8px}
.gallery-caption{margin-top:30px}
/* 150% liquid-glass treatment */
.glass,.glass-card,.card{background:linear-gradient(135deg,rgba(255,255,255,.105),rgba(255,255,255,.035) 48%,rgba(255,194,77,.045)),rgba(8,10,14,.28);backdrop-filter:blur(34px) saturate(175%);-webkit-backdrop-filter:blur(34px) saturate(175%);box-shadow:0 30px 90px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(255,205,100,.07)}
.glass::after,.glass-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.13),transparent 20%,transparent 70%,rgba(255,207,105,.10));opacity:.55;mix-blend-mode:screen}
.glass:hover,.glass-card:hover{border-color:rgba(255,218,139,.48);box-shadow:0 38px 105px rgba(0,0,0,.43),0 0 55px rgba(255,198,72,.10),inset 0 1px 0 rgba(255,255,255,.24)}
/* Thicker Luma access: uses much more vertical space */
.luma-section{padding-top:105px;padding-bottom:125px}
.luma-access-large{min-height:330px;padding:54px 58px;border-radius:34px;display:flex;align-items:center}
.luma-access-inner{width:100%;display:flex;align-items:center;justify-content:space-between;gap:40px;position:relative;z-index:2}
.luma-copy h2{font-family:Anton,Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;text-transform:uppercase;font-size:clamp(40px,5vw,72px);line-height:.95;letter-spacing:.025em;margin:22px 0 16px}
.luma-copy p{max-width:650px;margin:0;color:#bdb8ae;line-height:1.75;font-size:15px}
.luma-button{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-width:210px;min-height:68px;padding:18px 25px;border-radius:999px;border:1px solid rgba(255,213,111,.58);background:linear-gradient(135deg,rgba(255,214,113,.17),rgba(255,255,255,.055));box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 18px 45px rgba(0,0,0,.28),0 0 28px rgba(255,199,79,.10);color:#ffe29a;text-transform:uppercase;font-weight:800;font-size:11px;letter-spacing:.18em;transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s,border-color .45s}
.luma-button:hover{transform:translateY(-7px) scale(1.025);border-color:#ffe08a;box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 25px 60px rgba(0,0,0,.35),0 0 42px rgba(255,199,79,.22)}
.luma-button span{font-size:19px;line-height:1}
.footer-inner{display:block;text-align:center}
.footer-logo{display:flex;flex-direction:column;align-items:center;gap:22px}
.footer-name{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Helvetica Neue',Arial,sans-serif;font-size:clamp(5rem,15vw,15rem);line-height:.72;letter-spacing:-.085em;font-weight:700}
@media(max-width:760px){
  .hero{height:105vh;min-height:720px}
  #experiencia{margin-top:-9vh;padding-top:70px}
  #experiencia::after{top:-18vh;height:48vh}
  .gallery-wrap{height:650px;margin-left:-4vw;margin-right:-4vw}
  .gallery-stage{width:96vw;height:450px}
  .card{width:72%;height:82%}
  .card.center{transform:translate(-50%,-50%) translateZ(130px) scale(1.08)}
  .card.left{transform:translate(-91%,-50%) rotateY(25deg) scale(.76)}
  .card.right{transform:translate(-9%,-50%) rotateY(-25deg) scale(.76)}
  .card.farleft{transform:translate(-124%,-50%) rotateY(42deg) scale(.54)}
  .card.farright{transform:translate(24%,-50%) rotateY(-42deg) scale(.54)}
  .luma-access-large{min-height:430px;padding:38px 28px}
  .luma-access-inner{flex-direction:column;align-items:flex-start}
  .luma-button{width:100%}
}