/* hindi: las letras devanagari salen de Noto Sans Devanagari, con el mismo nombre de familia */
@font-face{font-family:'Archivo';src:url(../fonts/NotoSansDevanagari.woff2) format('woff2');font-weight:100 900;font-stretch:62% 125%;font-display:block;unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF}
@font-face{font-family:'Bricolage';src:url(../fonts/NotoSansDevanagari.woff2) format('woff2');font-weight:200 800;font-stretch:75% 100%;font-display:block;unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF}
@font-face{font-family:'Newsreader';src:url(../fonts/NotoSansDevanagari.woff2) format('woff2');font-weight:200 800;font-display:block;unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF}
/* Motor de proyección: compartido por salida, vista previa, proyectar aquí y pantallas inalámbricas */
@font-face{font-family:'Archivo';src:url(../fonts/Archivo.woff2) format('woff2');font-weight:100 900;font-stretch:62% 125%;font-display:block}
@font-face{font-family:'Bricolage';src:url(../fonts/Bricolage.woff2) format('woff2');font-weight:200 800;font-stretch:75% 100%;font-display:block}
@font-face{font-family:'Newsreader';src:url(../fonts/Newsreader.woff2) format('woff2');font-weight:200 800;font-display:block}
@font-face{font-family:'Newsreader';src:url(../fonts/Newsreader-Italic.woff2) format('woff2');font-style:italic;font-weight:200 800;font-display:block}
.escena{--fuente:'Archivo',system-ui,sans-serif;--peso:700;--mayus:none;--sombra:0 .04em .18em rgba(0,0,0,.85),0 0 .6em rgba(0,0,0,.35);--color:#fff;--dur:.45s;
  position:absolute;inset:0;overflow:hidden;background:#000;color:#fff;container-type:size}
.escena .capa{position:absolute;inset:0}
.escena .fondo>*{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s ease}
.escena .fondo>.on{opacity:1}
.escena .contenido>.diapo{position:absolute;inset:0;opacity:0;transition:opacity var(--dur) ease}
.escena .contenido>.diapo.on{opacity:1}
.escena .medio{background:#000;display:grid;place-items:center}
.escena .medio img,.escena .medio video,.escena .medio canvas{max-width:100%;max-height:100%;width:auto;height:auto;display:block}
.escena .medio.cubrir img,.escena .medio.cubrir video{width:100%;height:100%;object-fit:cover}
.escena .medio iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;background:#000}
.escena .falta{font:500 3.2cqh 'Archivo',sans-serif;color:#aaa;text-align:center;padding:0 10%}
.escena .texto .caja{position:absolute;left:6%;right:6%;top:9%;bottom:12%;display:flex;align-items:center;justify-content:center}
.escena .texto .txt{font-family:var(--fuente);font-weight:var(--peso);text-transform:var(--mayus);color:var(--color);text-shadow:var(--sombra);
  text-align:center;line-height:1.22;letter-spacing:-.005em;text-wrap:balance;max-width:100%}
.escena .texto.biblia .txt{line-height:1.3;font-weight:calc(var(--peso) - 100)}
.escena .texto .txt sup{font-size:.5em;vertical-align:.7em;margin-right:.18em;opacity:.75;font-weight:600}
.escena .texto .pie{position:absolute;left:5%;right:5%;bottom:3.4%;text-align:center;font-family:var(--fuente);font-weight:600;font-size:4.2cqh;
  color:rgba(255,255,255,.88);text-shadow:0 2px 10px rgba(0,0,0,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.escena .texto.cancion .pie{font-size:2.6cqh;font-weight:500;color:rgba(255,255,255,.7)}
.escena.pos-abajo .texto .caja{top:auto;height:30%;bottom:6%;left:4%;right:4%}
.escena.pos-abajo .texto .pie{bottom:1.2%}
.escena.pos-abajo .texto::before{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(transparent,rgba(0,0,0,.72))}
.escena.sin-texto .contenido>.texto{opacity:0!important}
/* cuenta regresiva */
.escena .cuenta{display:grid;place-items:center;opacity:0;transition:opacity .6s ease;pointer-events:none;background:rgba(0,0,0,.25)}
.escena .cuenta.on{opacity:1}
.escena .cuenta-in{text-align:center;font-family:var(--fuente);text-shadow:var(--sombra)}
.escena .cuenta-tit{font-weight:600;font-size:6cqh;letter-spacing:-.01em;color:rgba(255,255,255,.92)}
.escena .cuenta-num{font-family:'Bricolage',var(--fuente);font-weight:800;font-size:30cqh;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.03em;margin-top:2cqh}
.escena .cuenta.sin-titulo .cuenta-num{margin-top:0}
.escena .cuenta.on~.logo{opacity:0}
.escena.con-cuenta .contenido{opacity:0;transition:opacity .4s}
.escena .cuenta.on~.mensaje{z-index:1}
/* mensajes (por ejemplo, avisos del cuarto de bebés) */
.escena .mensaje{pointer-events:none;opacity:0;transition:opacity .5s ease}
.escena .mensaje.on{opacity:1}
.escena .mensaje.banda .mensaje-in{position:absolute;left:0;right:0;bottom:0;padding:2.4cqh 5%;background:rgba(10,12,30,.86);border-top:.5cqh solid #ffd66e;
  font:700 5cqh/1.25 'Archivo',sans-serif;text-align:center;color:#fff}
.escena .mensaje.arriba .mensaje-in{position:absolute;left:0;right:0;top:0;padding:1.6cqh 5%;background:rgba(10,12,30,.86);border-bottom:.4cqh solid #ffd66e;
  font:700 4cqh/1.25 'Archivo',sans-serif;text-align:center;color:#fff}
/* logo y negro */
.escena .logo{display:grid;place-items:center;opacity:0;transition:opacity .6s ease;background:#000;pointer-events:none}
.escena .logo img{max-width:46%;max-height:46%;object-fit:contain}
.escena .logo .nombre{font-family:'Bricolage',var(--fuente);font-weight:800;font-size:8cqh;letter-spacing:-.02em;text-align:center;padding:0 6%}
.escena.con-logo .logo{opacity:1}
.escena.logo-sobre-fondo .logo{background:transparent}
.escena .negro{background:#000;opacity:0;transition:opacity .5s ease;pointer-events:none}
.escena.en-negro .negro{opacity:1}
/* transmisión en vivo (OBS, vMix, consola de video): solo la letra, centrada abajo, sobre un fondo que se quita */
.escena.transmision{background:transparent}
.escena.transmision .logo,.escena.transmision .cuenta,.escena.transmision .negro,.escena.transmision .mensaje{display:none}
.escena.transmision.en-negro .contenido,.escena.transmision.sin-texto .contenido,.escena.transmision.con-logo .contenido{opacity:0}
.escena.transmision .texto .caja{top:auto;height:23%;bottom:8%;left:7%;right:7%;z-index:1}
.escena.transmision .texto .txt{line-height:1.18}
.escena.transmision .texto .pie{bottom:2.4%;font-size:2.6cqh;z-index:1}
/* Franja: una banda oscura detrás de la letra. Sobre verde o azul va sólida para que la consola la recorte limpio. */
.escena.transmision[data-trans-estilo=franja] .texto::before{content:"";position:absolute;left:0;right:0;bottom:0;height:36%;background:rgba(8,10,24,.74)}
.escena.transmision[data-trans-estilo=franja]:is([data-trans-fondo=verde],[data-trans-fondo=azul]) .texto::before{background:#0b0d1c}
/* Sombra: un degradado suave hacia abajo. Sobre verde o azul no se usa el degradado (ensucia el recorte), solo la sombra de las letras. */
.escena.transmision[data-trans-estilo=sombra][data-trans-fondo=transparente] .texto::before,
.escena.transmision[data-trans-estilo=sombra][data-trans-fondo=negro] .texto::before{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(transparent,rgba(0,0,0,.8))}
.escena.transmision[data-trans-estilo=sombra]:is([data-trans-fondo=verde],[data-trans-fondo=azul]) .texto .txt{text-shadow:0 .05em .12em #000}
/* Solo letra: con un contorno oscuro para que se lea sobre cualquier cámara */
.escena.transmision[data-trans-estilo=contorno] .texto .txt,.escena.transmision[data-trans-estilo=contorno] .texto .pie{-webkit-text-stroke:.06em #000;paint-order:stroke fill;text-shadow:0 .04em .1em rgba(0,0,0,.9)}
.escena.transmision[data-trans-estilo=contorno]:is([data-trans-fondo=verde],[data-trans-fondo=azul]) .texto .txt{text-shadow:none}