/* Cristal: portada, La obra, barra e indice */
* { box-sizing:border-box; }
html, body { margin:0; height:100%; background:var(--noche); color:var(--crema); font-size:16px; line-height:1.45; overflow:hidden; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
main { position:fixed; inset:0; transition:opacity .52s ease, filter .52s ease; }
body.fundido main { opacity:0; filter:blur(14px); }
.vidrio { background:linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.06)); -webkit-backdrop-filter:blur(26px) saturate(1.3); backdrop-filter:blur(26px) saturate(1.3); border:1px solid rgba(255,255,255,.2); }
.capsula { display:inline-flex; align-items:center; gap:10px; height:38px; padding:0 20px; border-radius:19px; border:1px solid rgba(246,239,228,.5); transition:background .35s, color .35s, border-color .35s; white-space:nowrap; }
.capsula:hover { background:var(--crema); color:#17161a; border-color:var(--crema); }
.circulo { width:52px; height:52px; border-radius:50%; display:grid; place-items:center; transition:transform .45s cubic-bezier(.2,.7,.2,1), background .35s; }
.circulo:hover { transform:scale(1.08); background:rgba(255,255,255,.26); }

#barra { position:fixed; left:var(--m); right:var(--m); top:22px; display:flex; align-items:center; z-index:30; pointer-events:none; }
#barra a, #barra button { pointer-events:auto; }
.marca { font:400 25px/1 var(--serif); font-variation-settings:'opsz' 40; letter-spacing:.01em; text-shadow:0 0 14px rgba(0,0,0,.45); }
#barra .der { margin-left:auto; display:flex; align-items:center; gap:22px; }
#barra nav { display:flex; gap:clamp(16px, 2.2vw, 32px); }
.solo-portada { display:none !important; }
body[data-modulo="inicio"] .marca { display:none; }
body[data-modulo="inicio"] nav.solo-portada { display:flex !important; } body[data-modulo="inicio"] a.solo-portada { display:inline-flex !important; } body[data-modulo="inicio"] #b-indice { display:none; }
body[data-modulo="inicio"].bajado #barra { opacity:0; pointer-events:none; } body[data-modulo="inicio"].bajado #barra * { pointer-events:none; }
#barra { transition:opacity .4s; }

.vista { position:absolute; inset:0; display:none; overflow:hidden; }
.vista.on { display:block; }
#v-inicio { overflow-y:auto; overflow-x:hidden; }
.vista iframe { position:absolute; inset:0; width:100%; height:100%; border:0; display:block; background:var(--noche); }

/* PORTADA: letra entre el cielo y la casa */
#hero { position:relative; height:100%; min-height:300px; overflow:hidden; background:#16161c; }
#escena { position:absolute; }
#escena img { position:absolute; inset:0; width:100%; height:100%; display:block; }
.eco { position:absolute; overflow:hidden; filter:blur(16px); }
#eco-sup { filter:blur(3px); }
.eco img { position:absolute; display:block; max-width:none; transform-origin:0 0; }
#eco-izq::after, #eco-der::after { content:''; position:absolute; inset:0; }
#eco-izq::after { background:linear-gradient(90deg, rgba(11,11,14,.62), rgba(11,11,14,0)); } #eco-der::after { background:linear-gradient(270deg, rgba(11,11,14,.62), rgba(11,11,14,0)); }
#letra { margin:0; position:absolute; text-align:center; font:400 100px/.92 var(--serif); font-variation-settings:'opsz' 28; letter-spacing:-.02em; color:var(--crema); white-space:nowrap; will-change:transform; }
#letra br { display:none; } #hero.vertical #letra br { display:inline; } .par-w { margin-right:-.115em; }
#letra-t { display:inline-block; animation:asoma 1.9s .15s cubic-bezier(.16,.8,.2,1) both; }
@keyframes asoma { from { transform:translateY(46%); opacity:0; } 30% { opacity:1; } to { transform:none; opacity:1; } }
.velo { position:absolute; inset:auto 0 0 0; height:42%; background:linear-gradient(0deg, rgba(10,10,14,.72), rgba(10,10,14,0)); pointer-events:none; }
.tarj { position:absolute; bottom:28px; border-radius:18px; padding:18px 22px 17px; z-index:4; animation:sube 1.1s 1.15s cubic-bezier(.2,.7,.2,1) both; }
@keyframes sube { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
.t-obra { left:var(--m); width:min(378px, 40vw); }
.t-obra .tit { margin:0 0 5px; font:italic 400 34px/1.06 var(--serif); font-variation-settings:'opsz' 60; }
.t-obra p { margin:0; font-size:15px; line-height:1.34; }
.t-obra .lugar { color:var(--tenue); font-size:13.5px; margin-top:6px; }
.t-cifra { right:var(--m); display:flex; align-items:center; gap:18px; }
.t-cifra b { font:200 58px/1 var(--sans); letter-spacing:-.02em; } .t-cifra span { font-size:14px; line-height:1.3; }
#bajar { position:absolute; left:50%; bottom:34px; margin-left:-26px; z-index:5; animation:sube 1.1s 1.35s both; }
#pin { position:absolute; width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%; z-index:5; display:grid; place-items:center; animation:sube 1.1s 1.6s both; }
#pin::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--crema); }
#pin::after { content:''; position:absolute; inset:-1px; border-radius:50%; border:1px solid var(--crema); animation:onda 3s ease-out infinite; }
@keyframes onda { to { transform:scale(2.1); opacity:0; } }
#pin span { position:absolute; left:calc(100% + 10px); white-space:nowrap; font-size:14px; opacity:0; transform:translateX(-5px); transition:opacity .35s, transform .35s; text-shadow:0 0 12px rgba(0,0,0,.7); }
#pin:hover span, #pin:focus-visible span { opacity:1; transform:none; }
.leyenda { position:absolute; right:var(--m); bottom:8px; font-size:11.5px; color:var(--tenue); z-index:4; }

/* LA OBRA: seccion oscura, cifras y listas de una linea */
#laobra { padding:clamp(70px, 10vw, 150px) var(--m) 40px; background:var(--noche); }
.eti { color:var(--tenue); }
.autoria { font:400 clamp(52px, 10.4vw, 176px)/.98 var(--serif); font-variation-settings:'opsz' 96; letter-spacing:-.018em; margin:14px 0 18px; }
.autoria-sub { font-size:clamp(17px, 1.5vw, 21px); color:var(--tenue); max-width:44em; margin:0; }
.cifras { display:grid; grid-template-columns:repeat(4, 1fr); margin-top:clamp(50px, 7vw, 100px); border-top:1px solid var(--hilo); }
.cifras div { padding:18px 16px 0 0; }
.cifras b { display:block; font:200 clamp(52px, 7.4vw, 112px)/1 var(--sans); letter-spacing:-.03em; } .cifras span { color:var(--tenue); font-size:15px; }
.par { display:grid; grid-template-columns:5fr 7fr; gap:clamp(24px, 5vw, 80px); margin-top:clamp(60px, 9vw, 130px); align-items:start; }
.par figure { margin:0; position:relative; } .par figure::after { content:''; position:absolute; inset:45% 0 0 0; background:linear-gradient(0deg, rgba(10,10,12,.72), rgba(10,10,12,0)); border-radius:0 0 4px 4px; }
.par img { display:block; width:100%; height:auto; border-radius:4px; }
.par figcaption { z-index:1; position:absolute; left:-1px; bottom:18px; font:italic 400 clamp(30px, 3.6vw, 52px)/1.04 var(--serif); font-variation-settings:'opsz' 60; padding-left:18px; text-shadow:0 0 22px rgba(0,0,0,.45); }
.lista { list-style:none; margin:0; padding:0; }
.lista li { border-top:1px solid var(--hilo); } .lista li:last-child { border-bottom:1px solid var(--hilo); }
.lista a { display:grid; grid-template-columns:48px 1fr auto; align-items:baseline; gap:10px; padding:16px 0 15px; transition:padding .45s cubic-bezier(.2,.7,.2,1); }
.lista a:hover { padding-left:14px; }
.lista i { font-style:normal; color:var(--tenue); font-size:13.5px; } .lista b { font:400 clamp(25px, 2.5vw, 36px)/1.1 var(--serif); font-variation-settings:'opsz' 40; } .lista span { color:var(--tenue); font-size:15px; text-align:right; }
.ficha { margin-top:clamp(60px, 8vw, 120px); display:grid; grid-template-columns:5fr 7fr; gap:clamp(24px, 5vw, 80px); }
.ficha h2 { font:italic 400 clamp(32px, 3.5vw, 52px)/1.05 var(--serif); margin:0; }
.ficha dl { margin:0; } .ficha dl div { display:grid; grid-template-columns:170px 1fr; gap:10px; padding:10px 0; border-top:1px solid var(--hilo); } .ficha dt { color:var(--tenue); } .ficha dd { margin:0; }
.replica { margin:0; font-size:17px; line-height:1.5; color:var(--crema); }
.fin { margin-top:clamp(60px, 8vw, 110px); display:flex; justify-content:space-between; align-items:baseline; gap:24px; color:var(--tenue); font-size:14.5px; flex-wrap:wrap; }
.firma { font:400 21px/1 var(--serif); font-variation-settings:'opsz' 40; letter-spacing:.03em; color:var(--crema); }

/* indice */
#indice { position:fixed; inset:0; z-index:50; padding:84px var(--m) 30px; display:flex; flex-direction:column; justify-content:center; background:rgba(20,20,26,.5); -webkit-backdrop-filter:blur(30px) saturate(1.3); backdrop-filter:blur(30px) saturate(1.3); animation:aparece .4s both; overflow:auto; }
@keyframes aparece { from { opacity:0; } to { opacity:1; } }
#indice nav { display:flex; flex-direction:column; align-items:flex-start; }
#indice a { font:400 clamp(38px, min(6.6vw, 11.4vh), 92px)/1.14 var(--serif); font-variation-settings:'opsz' 72; color:var(--tenue); transition:color .4s; }
#indice a:hover, #indice a:focus-visible, #indice a[aria-current] { color:var(--crema); outline:none; }
#indice .cerrar { position:fixed; right:var(--m); top:22px; }

@media (max-width:820px) {
  body[data-modulo="inicio"] nav.solo-portada, body[data-modulo="inicio"] a.solo-portada { display:none !important; } body[data-modulo="inicio"] #b-indice { display:inline-flex; }
  #pin { width:38px; height:38px; margin:-19px 0 0 -19px; } #pin span { display:none; }
  .tarj { animation-delay:.9s; }
  #hero.vertical .t-obra { left:var(--m); right:var(--m); width:auto; bottom:92px; padding:15px 18px; } #hero.vertical .t-obra .tit { font-size:30px; }
  #hero.vertical .t-cifra { display:none; }
  #hero.vertical #bajar { bottom:26px; left:var(--m); margin-left:0; } #hero.vertical .leyenda { left:calc(var(--m) + 66px); right:var(--m); bottom:30px; line-height:1.3; }
  .cifras { grid-template-columns:1fr 1fr; row-gap:14px; border-top:0; } .cifras div { border-top:1px solid var(--hilo); }
  .par, .ficha { grid-template-columns:1fr; } .lista a { grid-template-columns:30px 1fr; } .lista span { grid-column:2; text-align:left; font-size:14px; } .ficha dl div { grid-template-columns:118px 1fr; }
}
@media (max-height:500px) and (orientation:landscape) { body[data-modulo="inicio"] nav.solo-portada, body[data-modulo="inicio"] a.solo-portada { display:none !important; } body[data-modulo="inicio"] #b-indice { display:inline-flex; } }
/* ventana baja o celular acostado: la tarjeta pasa a una sola linea para que la casa conserve la altura */
#hero.bajo .t-obra { left:12px; right:auto; bottom:6px; width:auto; max-width:calc(58vw - 12px); padding:5px 12px; border-radius:12px; display:flex; align-items:baseline; gap:7px; white-space:nowrap; }
#hero.bajo .t-obra .tit { font-size:16px; margin:0; } #hero.bajo .t-obra p { font-size:12px; } #hero.bajo .t-obra .lugar { display:none; }
#hero.bajo .t-cifra, #hero.bajo #bajar { display:none; }
#hero.bajo .leyenda { left:auto; right:12px; bottom:6px; width:38vw; font-size:10px; line-height:1.2; text-align:right; }