/* Aus dem <helmet> der Vorlagen; der Rest steht in clases.css */
@import url('../fonts/faces.css');

html,body{margin:0;padding:0;background:#14101F}
body{font-family:'Plus Jakarta Sans','Helvetica Neue',Helvetica,sans-serif;
     color:#A79CB8;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:#B9A8D4;text-decoration:none;transition:color 700ms cubic-bezier(0.22,1,0.36,1)}
a:hover{color:#EFE9F2}
::selection{background:#9E5CE8;color:#EFE9F2}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid #9E5CE8;outline-offset:3px}

@keyframes breathe{
  0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.30}
  50%{transform:translate(-50%,-50%) scale(1.03);opacity:.36}
}

/* Sprung zum Inhalt, nur mit Tastatur sichtbar */
.saltar{position:absolute;left:-9999px;top:0;z-index:100;background:#9E5CE8;color:#EFE9F2;
        padding:12px 18px;font-size:12px;letter-spacing:2px;text-transform:uppercase}
.saltar:focus{left:12px;top:12px}

[hidden]{display:none!important}

/* Player von Apple Music. Bis zum Klick steht hier nur ein Kasten;
   das iframe entsteht erst danach. */
.reproductor{
  margin:44px 0 0;padding:30px 28px;background:#1A1526;border:1px solid #241D33;
  max-width:660px
}
.reproductor-etiqueta{
  margin:0 0 14px;font-size:10.5px;letter-spacing:5px;text-transform:uppercase;color:#7A6F8C
}
.reproductor-texto{margin:0 0 22px;font-size:15px;line-height:1.8;color:#A79CB8}
.reproductor-boton{
  display:inline-flex;align-items:center;padding:15px 30px;border-radius:999px;
  border:1px solid #4A3D8C;background:transparent;color:#EFE9F2;font-family:inherit;
  font-size:12px;letter-spacing:2.5px;text-transform:uppercase;cursor:pointer;
  transition:border-color 700ms cubic-bezier(0.22,1,0.36,1),background 700ms cubic-bezier(0.22,1,0.36,1)
}
.reproductor-boton:hover{border-color:#9E5CE8;background:rgba(158,92,232,0.10)}
.reproductor-nota{margin:18px 0 0;font-size:13px;line-height:1.7;color:#7A6F8C}
.reproductor-marco{width:100%;height:450px;border:0;background:transparent;display:block}
@media (max-width:600px){.reproductor{padding:22px 18px}.reproductor-marco{height:420px}}

/* Seiten, die das PHP erzeugt (Bestaetigung, Abmeldung, Fehler).
   Als Klassen, damit die CSP ohne 'unsafe-inline' auskommt. */
.aviso{max-width:640px;margin:0 auto;padding:120px 24px}
.aviso h1{font-size:34px;font-weight:200;color:#EFE9F2;margin:0 0 22px;line-height:1.15}
.aviso p{font-size:15px;line-height:1.8;margin:0 0 32px}
.aviso strong{color:#EFE9F2;font-weight:400}
.aviso .peq{font-size:13px;line-height:1.7;color:#7A6F8C}
.aviso .peq a{word-break:break-all}
.aviso .volver{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:#B9A8D4}

/* Auf schmalen Schirmen sind die festen Innenabstaende der Vorlage zu gross */
@media (max-width:900px){
  .cabecera-int,.seccion{padding-left:22px!important;padding-right:22px!important}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}