/* Sobre de apertura. Todas las capas comparten un lienzo 1:2 y se alinean en % */
html.sobre-cerrado{overflow:hidden}
.opening{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:#faf7ec;transition:opacity .55s ease,visibility .55s}
.opening.out{opacity:0;visibility:hidden}
.sobre{position:relative;width:100%;height:100%;overflow:hidden;background:#fff;border:0;padding:0;display:block;cursor:pointer;-webkit-tap-highlight-color:transparent;color:inherit;font:inherit;opacity:0;transition:opacity .45s ease}
.opening.lista .sobre{opacity:1}
.sobre:focus-visible{outline:2px solid #ad853a;outline-offset:-6px}
.sobre-lienzo{position:absolute;left:50%;top:50%;width:max(100%,50cqh);aspect-ratio:1/2;transform:translate(-50%,-50%);perspective:1500px;transform-style:preserve-3d}
.sobre{container-type:size}
.sobre-capa{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;user-select:none}
.sobre-oscuro{position:absolute;inset:0;background:#1d271c}
.sobre-rayos{position:absolute;left:0;width:100%;height:auto;top:0;aspect-ratio:500/520;transform-origin:49% 97.3%;opacity:0;pointer-events:none}
/* El origen de la solapa es el borde superior: sube y se inclina hacia quien mira */
.sobre-solapa{position:absolute;inset:0;transform-origin:50% 0;will-change:transform;backface-visibility:hidden}
.sobre-sello{position:absolute;left:30%;top:37.9%;width:40%;height:auto;pointer-events:none}
.sobre-letras{position:absolute;inset:0;width:100%;height:100%;transition:opacity .35s ease,transform .5s ease}
.sobre-aro{position:absolute;left:33.2%;top:41.4%;width:33.6%;aspect-ratio:1;border-radius:50%;pointer-events:none;transition:box-shadow .5s ease,opacity .3s}
.opening.abierto .sobre-letras{opacity:0;transform:scale(.96)}
.opening.abierto .sobre-aro{opacity:0}
.sobre:focus-visible .sobre-aro{box-shadow:0 0 0 2px #fff0d2cc}
@media(hover:hover) and (pointer:fine){.sobre:hover .sobre-aro{box-shadow:0 0 0 1px #ffecc859,0 0 46px 6px #ffe2aa61}}
.solo-raton{display:none}
@media(hover:hover) and (pointer:fine){.solo-tactil{display:none}.solo-raton{display:inline}}
.sobre-destello{position:absolute;left:50%;top:50.6%;width:150%;aspect-ratio:1;margin-left:-75%;margin-top:-75%;opacity:0;pointer-events:none;transform:scale(.2)}
.sobre-blanco{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.sobre-aviso{position:absolute;left:0;right:0;bottom:11%;text-align:center;color:#2f3b2d;font:500 13px/1 "Cormorant Garamond",Georgia,serif;letter-spacing:.42em;padding-left:.42em;text-transform:uppercase;pointer-events:none;transition:opacity .3s}
.sobre-aviso svg{display:block;width:16px;height:38px;margin:0 auto 18px;animation:sobre-flecha 2.2s ease-in-out infinite}
.sobre-carga{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px;border:2px solid #d9cfae;border-top-color:#ad853a;border-radius:50%;animation:sobre-gira 1s linear infinite;transition:opacity .25s}
.opening.lista .sobre-carga{opacity:0}

/* Tiempos: solapa 0–2.6 s · luz desde 1 s · destello 2.3 s · blanco 2.65 s (lo cierra sobre.js) */
.opening.abierto .sobre{cursor:default}
.opening.abierto .sobre-aviso{opacity:0}
.opening.abierto .sobre-solapa{animation:sobre-solapa 2.75s cubic-bezier(.45,.02,.4,1) forwards}
.opening.abierto .sobre-sombra{animation:sobre-sale .75s ease-out .1s forwards}
.opening.abierto .sobre-oscuro{animation:sobre-sale .75s ease-in .55s forwards}
.opening.abierto .sobre-rayos{animation:sobre-rayos 1.5s cubic-bezier(.3,.1,.5,1) .8s forwards}
.opening.abierto .sobre-destello{animation:sobre-destello .62s cubic-bezier(.5,0,.8,.4) 2.2s forwards}
.opening.abierto .sobre-blanco{animation:sobre-entra .36s ease-in 2.5s forwards}
@keyframes sobre-solapa{
  0%{transform:translateY(0) rotateX(0)}
  28%{transform:translateY(-3.2%) rotateX(9deg)}
  58%{transform:translateY(-11.5%) rotateX(24deg)}
  100%{transform:translateY(-26%) rotateX(43deg)}
}
@keyframes sobre-sale{to{opacity:0}}
@keyframes sobre-entra{to{opacity:1}}
@keyframes sobre-rayos{0%{opacity:0;transform:scale(.5)}55%{opacity:.95}100%{opacity:1;transform:scale(1.32)}}
@keyframes sobre-destello{0%{opacity:0;transform:scale(.25)}55%{opacity:1}100%{opacity:1;transform:scale(2.5)}}
@keyframes sobre-flecha{0%,100%{transform:translateY(0);opacity:.75}50%{transform:translateY(-6px);opacity:1}}
@keyframes sobre-gira{to{transform:rotate(360deg)}}

/* Pantalla ancha: encuadre vertical a toda la altura, con los bordes fundidos con el papel */
@media(min-width:760px){
  .opening{background:var(--grano,none),radial-gradient(ellipse at 50% 45%,#92a58a,#7d8f75)}
  .sobre{width:100%;height:100%;background:transparent}
  .sobre-lienzo{width:min(100%,58cqh);-webkit-mask-image:linear-gradient(90deg,transparent,#000 17%,#000 83%,transparent);mask-image:linear-gradient(90deg,transparent,#000 17%,#000 83%,transparent)}
}
@media(prefers-reduced-motion:reduce){
  .opening.abierto .sobre-solapa,.opening.abierto .sobre-rayos,.opening.abierto .sobre-destello,.opening.abierto .sobre-oscuro,.opening.abierto .sobre-sombra{animation:none}
  .opening.abierto .sobre-blanco{animation:sobre-entra .25s ease forwards}
  .sobre-aviso svg{animation:none}
}