:root{
  --deep:#0C2A2E; --deep2:#123C40; --gold:#F5D9A8; --peach:#F7B58A; --rose:#E4748C; --white:#FDF8F1;
  --sans:Jost,"Helvetica Neue",Arial,sans-serif; --serif:"Cormorant Garamond",Georgia,serif;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-snap-type:y proximity}
body{background:var(--deep);color:var(--white);font:300 1.05rem/1.7 var(--sans)}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
a{color:inherit}
.label{font-size:.78rem;letter-spacing:.35em;text-transform:uppercase;color:var(--gold)}
h1,h2{font-family:var(--serif);font-weight:300}
.panel{min-height:100vh;scroll-snap-align:start;padding:6rem clamp(1.2rem,7vw,6rem) 4rem;display:flex;flex-direction:column;justify-content:center;position:relative}

.top{position:fixed;inset:0 0 auto 0;display:flex;justify-content:space-between;align-items:center;padding:1.4rem clamp(1.2rem,4vw,3rem);z-index:5;mix-blend-mode:normal}
.brand{font:italic 500 1.7rem var(--serif);text-decoration:none;text-shadow:0 1px 12px rgba(12,42,46,.5)}
.sound{font:inherit;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;background:rgba(12,42,46,.5);backdrop-filter:blur(8px);color:var(--white);border:1px solid rgba(253,248,241,.5);border-radius:99px;padding:.45rem 1.1rem;cursor:pointer}
.dots{position:fixed;right:clamp(.8rem,2vw,1.8rem);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:1.1rem;z-index:5}
.dots a{width:10px;height:10px;border:1px solid var(--white);border-radius:50%;transition:.3s;background:transparent;box-shadow:0 0 8px rgba(12,42,46,.4)}
.dots a.on{background:var(--gold);border-color:var(--gold);transform:scale(1.5)}

/* hero */
.hero{background:linear-gradient(180deg,var(--peach) 0%,var(--rose) 38%,#6A3A63 68%,var(--deep) 100%);align-items:center;text-align:center;overflow:hidden}
.hero .label{color:var(--deep);position:relative;z-index:2}
.hero-glass{background:none;border:0;cursor:pointer;width:min(260px,52vw);margin:1rem 0 -2rem;position:relative;z-index:1}
.hero-glass svg{width:100%;display:block;filter:drop-shadow(0 30px 40px rgba(12,42,46,.35))}
.hero-glass::after{content:"";position:absolute;left:50%;top:38%;width:30px;height:30px;margin:-15px;border:2px solid var(--white);border-radius:50%;opacity:0;pointer-events:none}
.ringing::after{animation:ripple 1.2s ease-out}
.ringing svg{animation:shake .45s}
@keyframes ripple{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(11)}}
@keyframes shake{20%{transform:translateX(-2px)}40%{transform:translateX(2px)}60%{transform:translateX(-1px)}}
h1{font-style:italic;font-size:clamp(5rem,20vw,15rem);line-height:.85;letter-spacing:-.03em;position:relative;z-index:2;text-shadow:0 2px 30px rgba(12,42,46,.25)}
.lead{max-width:46ch;margin-top:1.4rem;color:rgba(253,248,241,.85)}
.down{position:absolute;bottom:2rem;font-size:1.6rem;text-decoration:none;animation:float 2.4s ease-in-out infinite}
@keyframes float{50%{transform:translateY(8px)}}

/* colección */
.col{background:var(--deep)}
.col-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;margin-top:2rem}
.list{list-style:none;padding:0}
.list li{border-top:1px solid rgba(253,248,241,.25)}
.list li:last-child{border-bottom:1px solid rgba(253,248,241,.25)}
.list button{width:100%;text-align:left;background:none;border:0;color:rgba(253,248,241,.45);font:italic 300 clamp(2.2rem,5.5vw,4.4rem)/1.1 var(--serif);padding:1rem 0;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;transition:color .3s,padding .3s}
.list button span{font:300 .8rem var(--sans);letter-spacing:.2em;text-transform:uppercase}
.list button[aria-pressed="true"],.list button:hover{color:var(--gold);padding-left:1.2rem}
.show{display:flex;gap:2rem;align-items:center;justify-content:center}
.show-glass{width:min(210px,40%)}
.show-glass svg{width:100%;display:block}
.show-info h2{font-size:2.6rem;font-style:italic;color:var(--gold);line-height:1}
.show-info p{margin-top:.8rem;max-width:26ch}
.meta{font-size:.85rem;letter-spacing:.18em;text-transform:uppercase}

/* arpa */
.arpa{background:var(--deep2);text-align:center;align-items:center}
.big{font-size:clamp(2.6rem,7vw,5.6rem);font-style:italic;line-height:1;margin-top:1rem}
kbd{font:400 .8rem var(--sans);border:1px solid var(--gold);color:var(--gold);padding:.1rem .5rem;border-radius:5px}
.harp{display:grid;grid-template-columns:repeat(7,1fr);gap:clamp(.2rem,1.5vw,1.2rem);width:min(900px,100%);margin-top:2.5rem}
.harp button{background:none;border:0;cursor:pointer;color:var(--gold);font:inherit;font-size:.78rem;letter-spacing:.2em;display:flex;flex-direction:column;align-items:center;gap:.4rem;position:relative}
.harp button svg{width:100%;display:block;transition:transform .2s}
.harp button:hover svg{transform:translateY(-6px)}

/* pedido */
.pedido{background:linear-gradient(180deg,var(--deep2),var(--deep))}
.ped-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:4rem;align-items:center;margin-top:2rem}
.prev{text-align:center}
.prev svg{width:min(260px,70%)}
.prev-note{font-size:.78rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-top:1rem}
form{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem 1.6rem;max-width:640px}
form h2{grid-column:1/-1;font-size:clamp(2.4rem,5vw,3.6rem);font-style:italic;line-height:1}
label{display:flex;flex-direction:column;gap:.3rem;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
select,input{font:300 1.05rem var(--sans);letter-spacing:0;text-transform:none;background:transparent;border:0;border-bottom:1px solid rgba(253,248,241,.5);color:var(--white);padding:.5rem 0;border-radius:0}
select option{color:#000}
input[aria-invalid="true"]{border-bottom-color:#FF8A8A}
small{color:#FF9E9E;min-height:1.2em;letter-spacing:0;text-transform:none;font-size:.85rem}
.total{grid-column:1/-1;font-size:1rem}
.total b{font:italic 300 2.8rem var(--serif);color:var(--gold);margin:0 .5rem}
.btn{grid-column:1/-1;justify-self:start;font:400 .85rem var(--sans);letter-spacing:.3em;text-transform:uppercase;background:var(--gold);color:var(--deep);border:0;border-radius:99px;padding:1rem 2.2rem;cursor:pointer}
.btn:hover{background:var(--white)}
#ok{grid-column:1/-1;color:var(--gold);min-height:1.6em}
footer{padding:2rem clamp(1.2rem,7vw,6rem);font-size:.85rem;letter-spacing:.12em;border-top:1px solid rgba(253,248,241,.2);background:var(--deep)}
.wave{animation:wave 4s linear infinite}
@keyframes wave{to{transform:translateX(100px)}}

@media(max-width:820px){
  .dots{display:none}
  .col-grid,.ped-grid,form{grid-template-columns:1fr}
  .show{flex-direction:row}
  .ped-grid{gap:2rem}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;scroll-snap-type:none}.wave,.down,.ringing svg,.ringing::after{animation:none}*{transition:none!important}
}