/* Reglas base de la invitación. Lo visual fino vive en el <style> de index.html. */
*,*::before,*::after{ box-sizing:border-box }
[hidden]{ display:none !important }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{ margin:0 }
img{ display:block; max-width:100%; height:auto }
button{ font:inherit; color:inherit }
.solo-lectura{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

/* Sin JavaScript no hay apertura: se ve la invitación completa */
html:not(.js) [data-apertura]{ display:none }
/* Con JavaScript, la página queda quieta hasta que el invitado abre */
html.js:not(.abierto){ overflow:hidden }
[data-apertura]{ position:fixed; inset:0; z-index:500 }
[data-abrir]{ position:absolute; inset:0; width:100%; height:100%; padding:0; margin:0; border:0; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent }
[data-abrir]:focus-visible{ outline:2px solid currentColor; outline-offset:-6px }

/* Formulario de muestra: los estilos finos los pone cada página */
.demo-nota{ font-size:.78em; opacity:.7; margin:.8rem 0 0 }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; transition-delay:0s !important }
}

/* Dibujo de la Casona San Ignacio: es una máscara, así que se tiñe con --casona-color */
.casona{ margin:1.6rem auto; width:min(100%,19rem); text-align:center }
.casona i{ display:block; aspect-ratio:1/.9; background:var(--casona-color,currentColor);
  -webkit-mask:url(fotos/casona.webp) center/contain no-repeat; mask:url(fotos/casona.webp) center/contain no-repeat }
.casona figcaption{ margin-top:.5rem }

/* Botón de música (aparece cuando el invitado abre la invitación) */
.pp-musica{ position:fixed; right:max(12px,env(safe-area-inset-right)); bottom:max(12px,env(safe-area-inset-bottom)); z-index:1000; width:2.6rem; height:2.6rem; display:grid; place-items:center; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:rgba(22,22,20,.82); color:#fff; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:0 4px 18px rgba(0,0,0,.28) }
.pp-musica:focus-visible{ outline:2px solid #fff; outline-offset:2px }
.pp-musica .off{ display:none } .pp-musica[aria-pressed="true"] .on{ display:none } .pp-musica[aria-pressed="true"] .off{ display:inline }