/* mod-auditorio / auditorio-01 / styles.css — mobile-first, breakpoints
   estándar de la LM (768/1024/1440). Usa las variables de base/variables.css. */

.auditorio-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--color-fondo);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  /* Alto de la mini (+ franja de verificar), medido en auditorio.js. */
  padding-bottom: var(--auditorio-rodape, 0px);
  transform: translateY(100%);
  transition: transform 280ms cubic-bezier(.4,0,.2,1);
}
.auditorio-overlay[hidden] { display: none; }
/* Símbolos SVG compartidos (template.php): sin display:none, que en algunos navegadores apaga los <use> */
.auditorio-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.auditorio-overlay--aberto { transform: translateY(0); }

/* Menú flotante (favoritos / usuário / campana): fijo en la franja del nav,
   a la derecha de las redes, sobre la mini (210) y bajo los modales (500);
   con el panel abierto va dentro del overlay. Modo campanha: oculto. */
.auditorio-flutuante-topo {
  position:    absolute;
  top:         calc((var(--nav-h) - 34px) / 2);
  right:       var(--espacio-sm);
  z-index:     5;
  display:     flex;
  align-items: center;
  gap:         8px;
}
body > .auditorio-flutuante-topo {
  position: fixed;
  z-index:  220;
}
body.modo-campanha .auditorio-flutuante-topo { display: none; }

/* Redes del nav a la izquierda de Meu Perfil, separadas por una línea; el
   margen reserva el ancho del menú y crece con la campana. Favoritos solo
   dentro del panel. */
body:not(.modo-campanha) .nav__social { margin-right: calc(34px + 12px); }
body:not(.modo-campanha):has(.auditorio-flutuante-avisos:not([hidden])) .nav__social {
  margin-right: calc(34px + 12px + 8px + 46px - var(--espacio-sm));
}
body:not(.modo-campanha) .nav__social::after {
  content:     '';
  width:       1px;
  height:      20px;
  margin-left: 6px;
  background:  rgba(var(--color-texto-rgb), 0.2);
}
/* Dentro de Instagram/Facebook sin sesión no hay menú: no se reserva su lugar. */
html.em-rede-social body:not(.lm-usuario):not(:has(.auditorio-flutuante-usuario:not([hidden]))) .nav__social { margin-right: 0; }
html.em-rede-social body:not(.lm-usuario):not(:has(.auditorio-flutuante-usuario:not([hidden]))) .nav__social::after { display: none; }
body > .auditorio-flutuante-topo .auditorio-flutuante-favoritos { display: none; }

.auditorio-flutuante-favoritos {
  width:          34px;
  height:         34px;
  flex-shrink:    0;
  display:        flex;
  align-items:    center;
  justify-content: center;
  border:         none;
  border-radius:  50%;
  background:     rgba(var(--color-fondo-rgb), 0.9);
  color:          var(--color-texto);
  box-shadow:     0 2px 10px rgba(var(--color-texto-rgb), 0.25);
  cursor:         pointer;
}
/* Entrada pra Favoritos — coração cheio e vermelho (mesmo tom dos
   corações ativos da lista). */
.auditorio-flutuante-favoritos { color: var(--color-acento-3); }
.auditorio-flutuante-favoritos[hidden] { display: none; }

/* Campana: pestaña pegada al borde derecho de la pantalla (el margen
   negativo anula el right del menú). --aceso: hay avisos sin ver.
   --balanca: lo agrega auditorio-avisos.js al cargar y cada 10 s, 3 veces. */
.auditorio-flutuante-avisos {
  width:           46px;
  height:          34px;
  flex-shrink:     0;
  margin-right:    calc(-1 * var(--espacio-sm));
  padding:         0 4px 0 0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  border:          none;
  border-radius:   17px 0 0 17px;
  background:      rgba(var(--color-fondo-rgb), 0.9);
  color:           var(--color-texto-3);
  box-shadow:      0 2px 10px rgba(var(--color-texto-rgb), 0.25);
  cursor:          pointer;
  transition:      background var(--transicion), color var(--transicion);
}
.auditorio-flutuante-avisos[hidden] { display: none; }
.auditorio-flutuante-avisos--aceso {
  background: var(--color-acento);
  color:      #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-acento) 25%, transparent),
              0 2px 12px color-mix(in srgb, var(--color-acento) 55%, transparent);
}
.auditorio-flutuante-avisos--balanca svg {
  transform-origin: 50% 10%;
  animation:        auditorio-campana 0.9s ease-in-out;
}

.auditorio-flutuante-comprar {
  flex-shrink:   0;
  border:        none;
  border-radius: 8px;
  padding:       7px 14px;
  background:    linear-gradient(135deg, color-mix(in srgb, var(--color-acento-2) 85%, #c8e06a), var(--color-acento-2));
  color:         #fff;
  font-family:   var(--fuente-cuerpo);
  font-weight:   500;
  font-size:     .8rem;
  white-space:   nowrap;
  box-shadow:    0 4px 12px rgba(var(--color-texto-rgb), 0.25);
  cursor:        pointer;
}
.auditorio-flutuante-comprar[hidden] { display: none; }

/* Modo normal (sin ?origem=ads): ya no flota sobre la portada (tapaba la
   tapa del disco) — flota a la altura del título, alineado a derecha, sin
   ocupar lugar en el flujo (mismo criterio: position:absolute). Esta misma
   posición es la pensada para, más adelante, el botón de compra propio de
   cada disco todavía no comprado en el catálogo. */
.auditorio-flutuante-comprar--cabecalho {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}

.auditorio-flutuante-usuario {
  position:    relative;
  flex-shrink: 0;
}
.auditorio-flutuante-usuario[hidden] { display: none; }
.auditorio-flutuante-usuario__btn {
  width:          34px;
  height:         34px;
  display:        flex;
  align-items:    center;
  justify-content: center;
  border:         none;
  border-radius:  50%;
  background:     rgba(var(--color-fondo-rgb), 0.9);
  color:          var(--color-texto);
  box-shadow:     0 2px 10px rgba(var(--color-texto-rgb), 0.25);
  cursor:         pointer;
}
.auditorio-flutuante-usuario__ok { color: var(--color-verde); }
/* Panel del menú de cuenta. Celular: llega al borde derecho de la pantalla
   (sin aire a la derecha); con la campana, el menú queda 54 px más adentro
   (gap 8 + campana 46). Tablet en adelante: tarjeta suelta bajo el botón. */
.auditorio-flutuante-usuario__painel {
  position:         absolute;
  top:              42px;
  right:            calc(-1 * var(--espacio-sm));
  width:            250px;
  padding:          12px 12px 4px 14px;
  background-color: var(--color-fondo);
  background-image: var(--t6-h-lite), var(--t6-v-lite);
  border:           1px solid var(--color-borde);
  border-right:     none;
  border-radius:    var(--radio) 0 0 var(--radio);
  box-shadow:       0 8px 24px rgba(var(--color-texto-rgb), 0.18);
  text-align:       left;
}
.auditorio-flutuante-topo:has(.auditorio-flutuante-avisos:not([hidden])) .auditorio-flutuante-usuario__painel {
  right: -54px;
}
.auditorio-flutuante-usuario__painel[hidden] { display: none; }
.auditorio-flutuante-usuario__nome {
  margin:      0;
  font-weight: 600;
  font-size:   .92rem;
  line-height: 1.25;
  color:       var(--color-texto);
}
.auditorio-flutuante-usuario__email {
  margin:        0 0 8px;
  font-size:     var(--texto-xs);
  line-height:   1.3;
  color:         var(--color-texto-2);
  overflow-wrap: anywhere;
}

/* Filas: ícono en círculo de color a la izquierda, texto a la derecha,
   una línea entre filas. Todas comparten esta caja; cada una pone su color
   en --fila-cor. */
.auditorio-flutuante-usuario__item {
  --fila-cor:      var(--color-texto-3);
  display:         flex;
  align-items:     center;
  gap:             10px;
  width:           100%;
  padding:         9px 0;
  border:          none;
  border-top:      1px solid color-mix(in srgb, var(--color-texto) 10%, transparent);
  background:      none;
  color:           var(--color-texto);
  font-family:     var(--fuente-cuerpo);
  font-size:       .84rem;
  text-align:      left;
  cursor:          pointer;
}
.auditorio-flutuante-usuario__item[hidden] { display: none; }
.auditorio-flutuante-usuario__icone {
  flex:             0 0 auto;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            26px;
  height:           26px;
  border-radius:    50%;
  background-color: var(--fila-cor);
  background-image: var(--t6-h), var(--t6-v);
  color:            #ffffff;
}
.auditorio-flutuante-usuario__icone svg {
  width:           14px;
  height:          14px;
  fill:            none;
  stroke:          currentColor;
  stroke-width:    2;
  stroke-linecap:  round;
  stroke-linejoin: round;
}
.auditorio-flutuante-usuario__item--verificar { --fila-cor: #f97316; font-weight: 600; } /* el naranja del play sonando: la acción que falta */
.auditorio-flutuante-usuario__item--instalar  { --fila-cor: var(--color-acento-2); }
.auditorio-flutuante-usuario__item--aparelhos { --fila-cor: var(--color-agradecer); }
.auditorio-flutuante-usuario__item--presentes { --fila-cor: #7b56c4; }
.auditorio-flutuante-usuario__item--sair      { --fila-cor: var(--color-texto-3); color: var(--color-texto-2); }
.auditorio-flutuante-usuario__item--sugestoes  { --fila-cor: var(--color-acento); }
.auditorio-flutuante-usuario__item--sair-todos { --fila-cor: var(--color-acento-3); color: var(--color-texto-2); }

/* Instalar: un ícono por modo (celular, atajo de escritorio, favoritos). */
.auditorio-flutuante-usuario__icone-atalho,
.auditorio-flutuante-usuario__icone-favoritos { display: none; }
[data-modo="atalho"] .auditorio-flutuante-usuario__icone-celular,
[data-modo="favoritos"] .auditorio-flutuante-usuario__icone-celular { display: none; }
[data-modo="atalho"] .auditorio-flutuante-usuario__icone-atalho,
[data-modo="favoritos"] .auditorio-flutuante-usuario__icone-favoritos { display: block; }
.auditorio-flutuante-usuario__passos { padding: 0 0 10px 36px; }
.auditorio-flutuante-usuario__passos .comprar-modal__aviso-app-ios { margin: 0; text-align: left; }
.auditorio-flutuante-usuario__passos-acao {
  margin-top:  4px;
  padding:     0;
  border:      none;
  background:  none;
  color:       #f97316;
  font-family: var(--fuente-cuerpo);
  font-size:   .78rem;
  font-weight: 600;
  cursor:      pointer;
}

/* Pie con Sair y Sair de todos: grupo aparte, de borde a borde del panel
   (márgenes negativos = su padding), línea más gruesa arriba y fondo un
   poco más gris. La primera fila no repite la línea. */
.auditorio-flutuante-usuario__rodape {
  margin:           4px -12px -4px -14px;
  padding:          0 12px 2px 14px;
  border-top:       2px solid color-mix(in srgb, var(--color-texto) 16%, transparent);
  background-color: color-mix(in srgb, var(--color-texto) 6%, var(--color-fondo));
  background-image: var(--t6-h-lite), var(--t6-v-lite);
  border-radius:    0 0 0 var(--radio);
}
.auditorio-flutuante-usuario__rodape .auditorio-flutuante-usuario__item:first-child { border-top: none; }
.auditorio-flutuante-usuario__aviso {
  margin:    0 0 10px;
  font-size: var(--texto-xs);
  color:     var(--color-texto-2);
}

@media (min-width: 768px) {
  .auditorio-flutuante-usuario__painel,
  .auditorio-flutuante-topo:has(.auditorio-flutuante-avisos:not([hidden])) .auditorio-flutuante-usuario__painel {
    right:         0;
    border-right:  1px solid var(--color-borde);
    border-radius: var(--radio);
  }
  .auditorio-flutuante-usuario__rodape { border-radius: 0 0 var(--radio) var(--radio); }
}

@keyframes auditorio-campana {
  0%, 100% { transform: rotate(0); }
  20%      { transform: rotate(16deg); }
  40%      { transform: rotate(-14deg); }
  60%      { transform: rotate(9deg); }
  80%      { transform: rotate(-5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .auditorio-flutuante-avisos--balanca svg { animation: none; }
}

/* ── Ventana de avisos ──────────────────────────────────────────────────
   Baja desde arriba por encima de los modales (500/510); debajo solo del
   aviso final de Instagram/Facebook (600), que tapa todo. */
.auditorio-avisos {
  position: fixed;
  inset:    0;
  z-index:  550;
}
.auditorio-avisos[hidden] { display: none; }
.auditorio-avisos__fundo {
  position:   absolute;
  inset:      0;
  background: rgba(var(--color-texto-rgb), 0.22);
  opacity:    0;
  transition: opacity 250ms ease;
}
/* Mismo papel que el resto del sitio: fondo con grano, sombra larga y
   suave (--sombra-box), sin bordes. */
.auditorio-avisos__painel {
  position:         absolute;
  top:              0;
  left:             0;
  right:            0;
  max-width:        480px;
  max-height:       85vh;
  max-height:       85dvh;
  margin-inline:    auto;
  display:          flex;
  flex-direction:   column;
  background-color: var(--color-fondo);
  background-image: var(--t6-h), var(--t6-v);
  border-radius:    0 0 22px 22px;
  box-shadow:       var(--sombra-box);
  transform:        translateY(-100%);
  transition:       transform 250ms cubic-bezier(.4,0,.2,1);
}
.auditorio-avisos--aberta .auditorio-avisos__fundo  { opacity: 1; }
.auditorio-avisos--aberta .auditorio-avisos__painel { transform: translateY(0); }
.auditorio-avisos__cabecalho {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         var(--espacio-sm) var(--sec-h) 0;
}
/* Rótulo como el eyebrow del documental ("Minidoc"). */
.auditorio-avisos__titulo {
  margin:         0;
  font-family:    var(--fuente-cuerpo);
  font-size:      var(--texto-xs);
  font-weight:    500;
  font-style:     normal;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color:          var(--color-texto-3);
}
.auditorio-avisos__cabecalho .modal__cerrar { color: var(--color-texto-3); }
/* Tarjetas como los depoimentos: sin caja, una línea tenue entre una y
   otra. */
.auditorio-avisos__lista {
  margin:              0;
  padding:             var(--espacio-xs) var(--sec-h) var(--espacio-md);
  list-style:          none;
  overflow-y:          auto;
  overscroll-behavior: contain;
  display:             flex;
  flex-direction:      column;
  gap:                 var(--espacio-md);
}
.auditorio-avisos__item {
  padding-bottom: var(--espacio-md);
  border-bottom:  1px solid color-mix(in srgb, var(--color-texto-3) 20%, transparent);
}
.auditorio-avisos__item:last-child {
  padding-bottom: 0;
  border-bottom:  none;
}
/* Título y texto de la cabecera del disco / descripción del documental. */
.auditorio-avisos__item-titulo {
  margin:      0;
  font-family: var(--fuente-display);
  font-size:   var(--texto-lg);
  font-weight: 600;
  font-style:  normal;
  line-height: 1.3;
  color:       var(--color-texto);
}
/* Sin ver todavía: un punto del acento antes del título. */
.auditorio-avisos__item--novo .auditorio-avisos__item-titulo::before {
  content:        '';
  display:        inline-block;
  width:          7px;
  height:         7px;
  margin-right:   8px;
  border-radius:  50%;
  background:     var(--color-acento);
  vertical-align: middle;
}
.auditorio-avisos__item-texto {
  margin:      4px 0 var(--espacio-sm);
  font-size:   .88rem;
  line-height: 1.5;
  color:       var(--color-texto-2);
  white-space: pre-line;
}
/* Pastilla + "Agora não" en una fila. */
.auditorio-avisos__item-acoes {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         var(--espacio-xs) var(--espacio-sm);
}
/* Pastilla suave, la de "Comentar" del documental. */
.auditorio-avisos__item-acao {
  display:          inline-flex;
  align-items:      center;
  padding:          8px 18px;
  border:           none;
  border-radius:    999px;
  background-color: var(--color-fondo);
  background-image: var(--t6-h), var(--t6-v);
  box-shadow:       0 1px 2px rgba(var(--color-texto-rgb), 0.06), 0 3px 10px rgba(var(--color-texto-rgb), 0.08);
  font-family:      var(--fuente-cuerpo);
  font-size:        .85rem;
  font-weight:      500;
  color:            var(--color-texto);
  text-decoration:  none;
  cursor:           pointer;
  transition:       box-shadow var(--transicion);
}
.auditorio-avisos__item-acao:hover,
.auditorio-avisos__item-acao:focus-visible {
  box-shadow: 0 1px 3px rgba(var(--color-texto-rgb), 0.08), 0 5px 16px rgba(var(--color-texto-rgb), 0.12);
}
/* "Agora não": texto suave, sin caja; la pastilla queda como la acción. */
.auditorio-avisos__item-dispensar {
  padding:     8px 4px;
  border:      none;
  background:  none;
  font-family: var(--fuente-cuerpo);
  font-size:   .85rem;
  color:       var(--color-texto-3);
  cursor:      pointer;
}
.auditorio-avisos__item .comprar-modal__aviso-app-ios { margin: 0; }
.auditorio-avisos__vazio {
  margin:    0;
  padding:   var(--espacio-sm) var(--sec-h) var(--espacio-md);
  font-size: .88rem;
  color:     var(--color-texto-3);
}

/* Acá vivían .auditorio-overlay__topbar, __topbar-inner y __logo — la barra
   superior que el overlay tenía antes, con el logo del sitio. El template no
   emite ninguno de los tres desde que los controles pasaron a flotar sobre la
   portada (.auditorio-flutuante-topo), así que eran 24 líneas que viajaban a
   todo proyecto con auditorio sin matchear nada. Borradas el 7/9/2026. */

/* ── Columna de abrir/cerrar — siempre en el mismo rincón (derecha),
   ocupa todo el alto de su franja y llega hasta el borde de pantalla,
   con fondo propio y label corto para que no haya dudas de qué hace.
   Variable: "Já viu o player?" de hero-08 usa el mismo celeste. ── */
:root { --auditorio-cor-abrir: #a9d8e6; }
.auditorio-toggle-col {
  flex-shrink: 0;
  align-self: stretch;
  min-width: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 10px 8px;
  border: none;
  background: var(--auditorio-cor-abrir);
  color: #1a1a1a;
  cursor: pointer;
}
.auditorio-toggle-col--aberto { background: #f5d976; } /* Fechar */
.auditorio-mini .auditorio-toggle-col {
  padding-top: 10px;
  padding-bottom: max(10px, var(--auditorio-safe-bottom));
}
/* Un solo botón: "Abrir" se transforma en "Fechar" in place — la flecha
   rota 180° en vez de cambiar de ícono, el label y el fondo cambian de
   estado. Nada cambia de posición. */
.auditorio-toggle-col__flecha {
  transition: transform 220ms ease;
}
.auditorio-toggle-col--aberto .auditorio-toggle-col__flecha {
  transform: rotate(180deg);
}
.auditorio-toggle-col__label {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* Convite a abrir, en cada visita hasta abrir el reproductor (auditorio.js
   quita las clases; nunca a clientes): resplandor continuo y, cuando la mini ya se ve (--chamar), a los
   5 s el botón pasa al acento ~5 s con la flecha subiendo 3 veces; después
   la misma secuencia más corta cada 10 s. El color va en una capa propia
   para no repetir el fondo del botón. */
.auditorio-toggle-col--convite {
  position: relative;
  isolation: isolate;
  animation: auditorio-convite-brilho 1.2s ease-in-out infinite alternate;
}
.auditorio-toggle-col--convite::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-acento);
  opacity: 0;
}
.auditorio-toggle-col--convite.auditorio-toggle-col--chamar::before {
  animation: auditorio-convite-cor-inicio 6s ease 5s 1, auditorio-convite-cor 10s ease 16s infinite;
}
.auditorio-toggle-col--convite.auditorio-toggle-col--chamar .auditorio-toggle-col__flecha {
  animation: auditorio-convite-seta-inicio 6s ease-in-out 5s 1, auditorio-convite-seta 10s ease-in-out 16s infinite;
}
/* Destaque de "Já viu o player?": el Abrir se vuelve
   terracota con letra blanca, late y suelta anillos (más visible que el
   ocre del convite); la flecha sube 3 veces. auditorio.js quita la clase. */
.auditorio-toggle-col--destaque {
  background: var(--color-acento-3);
  color:      #ffffff;
  animation:  auditorio-destaque-latido .5s ease-in-out 6 alternate, auditorio-destaque-anel 1s ease-out 3;
}
.auditorio-toggle-col--destaque .auditorio-toggle-col__flecha {
  animation: auditorio-convite-seta-inicio 3s ease-in-out 1;
}
@keyframes auditorio-destaque-latido {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}
@keyframes auditorio-destaque-anel {
  from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-acento-3) 75%, transparent); }
  to   { box-shadow: 0 0 0 16px transparent; }
}
@keyframes auditorio-convite-brilho {
  from { box-shadow: 0 0 0 0 transparent; }
  to   { box-shadow: 0 0 14px 3px color-mix(in srgb, var(--color-acento) 70%, transparent); }
}
@keyframes auditorio-convite-cor-inicio {
  0%, 95%, 100% { opacity: 0; }
  5%, 85%       { opacity: 1; }
}
@keyframes auditorio-convite-seta-inicio {
  0%, 10%, 23.3%, 36.7%, 50%, 100% { transform: translateY(0); }
  16.7%, 30%, 43.3%                { transform: translateY(-6px); }
}
@keyframes auditorio-convite-cor {
  0%, 34%, 100% { opacity: 0; }
  3%, 30%       { opacity: 1; }
}
@keyframes auditorio-convite-seta {
  0%, 3%, 11%, 19%, 27%, 100% { transform: translateY(0); }
  7%, 15%, 23%                { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .auditorio-toggle-col--convite,
  .auditorio-toggle-col--convite.auditorio-toggle-col--chamar::before,
  .auditorio-toggle-col--convite.auditorio-toggle-col--chamar .auditorio-toggle-col__flecha { animation: none; }
  .auditorio-toggle-col--destaque,
  .auditorio-toggle-col--destaque .auditorio-toggle-col__flecha { animation: none; }
}

/* ── Modal de código — usa el sistema .modal/.modal__card general del
   sitio (mismo de Política de Privacidad), acotado a un ancho de form. ── */
.auditorio-gate__card { max-width: 380px; text-align: center; }
.auditorio-gate__texto { color: var(--color-texto-2); font-size: var(--texto-sm); margin: 0 0 var(--espacio-md); }
.auditorio-gate__form { display: flex; flex-direction: column; gap: var(--espacio-xs); }
/* Sin esta guarda, el atributo hidden no esconde nada: una regla de autor con
   `display` le gana al display:none que el navegador aplica a [hidden]. El
   formulario de reenvío nace con hidden en el template y se veía igual, así
   que el gate ofrecía "Reenviar código" a todo el mundo sin que nadie lo
   pidiera. Mismo caso para el link que lo abre. */
.auditorio-gate__form[hidden],
.auditorio-gate__link[hidden],
.auditorio-gate__comprar[hidden] { display: none; }
/* "Comprar" del error sem_compra, debajo del mensaje. En verde y no en el
   acento de las acciones del modal: es el camino aparte del código. */
.auditorio-gate__comprar {
  width:      100%;
  margin-top: var(--espacio-sm);
  background: var(--color-verde);
  color:      var(--color-contraste);
}
.auditorio-gate__form input {
  padding: 13px 16px;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  font-size: var(--texto-md);
  text-align: center;
  letter-spacing: 0.08em;
}
.auditorio-gate__erro,
.auditorio-dispositivos__erro { color: #b3261e; font-size: var(--texto-sm); margin-top: var(--espacio-sm); }
.auditorio-dispositivos__erro[hidden] { display: none; }

/* ── Lista de aparelhos ───────────────────────────────────────────────────
   Modal "Meus aparelhos": las sesiones abiertas de la cuenta verificada. */
.auditorio-dispositivos__intro {
  margin:    0 0 var(--espacio-sm);
  font-size: var(--texto-sm);
  color:     var(--color-texto-2);
}
.auditorio-dispositivos__lista {
  list-style:     none;
  margin:         0;
  padding:        0;
  display:        flex;
  flex-direction: column;
  gap:            var(--espacio-xs);
}
.auditorio-dispositivos__item {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--espacio-sm);
  padding:         10px 12px;
  border:          1px solid var(--color-borde);
  border-radius:   var(--radio);
}
.auditorio-dispositivos__dados { min-width: 0; }
.auditorio-dispositivos__nome {
  font-weight: 600;
  font-size:   var(--texto-sm);
  color:       var(--color-texto);
}
.auditorio-dispositivos__meta {
  font-size: var(--texto-xs);
  color:     var(--color-texto-2);
}
.auditorio-dispositivos__atual {
  flex-shrink: 0;
  font-size:   var(--texto-xs);
  color:       var(--color-texto-2);
}
.auditorio-dispositivos__desconectar {
  flex-shrink:   0;
  border:        1px solid var(--color-borde);
  border-radius: var(--radio);
  padding:       6px 10px;
  background:    none;
  color:         var(--color-texto);
  font-family:   var(--fuente-cuerpo);
  font-size:     var(--texto-xs);
  cursor:        pointer;
}

/* ── Aviso de cierre de sesión ────────────────────────────────────────────
   Va en modal y no en el panel flotante (220px) porque el aviso tiene que
   leerse completo tanto en celular como en escritorio. */
.auditorio-sair__texto {
  margin:    0 0 var(--espacio-sm);
  font-size: var(--texto-sm);
  color:     var(--color-texto-2);
}
.auditorio-sair__acoes {
  display:    flex;
  gap:        var(--espacio-xs);
  margin-top: var(--espacio-md);
}
.auditorio-sair__acoes .btn { flex: 1; }

/* ── "Acessar minha conta" encima del checkout ────────────────────────────
   Todos los .modal comparten z-index 500 y gana el que viene después en el
   HTML: el checkout está más abajo y tapaba a este cuando se abre desde él. */
#auditorio-gate-modal { z-index: 510; }

/* ── Franja "Proteja seu acesso" ──────────────────────────────────────────
   Una línea, fija justo arriba de la franja mini: auditorio.js le pone el
   `bottom` con la altura real del mini (ajustarEspacoRodape). Encima del
   overlay (200) y del mini (210), debajo de los modales (500). */
.auditorio-verificar-franja {
  position:        fixed;
  left:            0;
  right:           0;
  bottom:          0;
  z-index:         211;
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--espacio-sm);
  padding:         6px var(--sec-h);
  background:      color-mix(in srgb, #f97316 12%, var(--color-superficie));
  border-top:      1px solid var(--color-borde);
}
.auditorio-verificar-franja[hidden] { display: none; }
.auditorio-verificar-franja__texto {
  min-width:     0;
  margin:        0;
  font-size:     var(--texto-xs);
  font-weight:   600;
  color:         var(--color-texto);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}
.auditorio-verificar-franja__btn {
  flex-shrink:   0;
  padding:       5px 12px;
  border:        none;
  border-radius: var(--radio);
  background:    #f97316;
  color:         #fff;
  font-family:   var(--fuente-cuerpo);
  font-size:     var(--texto-xs);
  font-weight:   600;
  white-space:   nowrap;
  cursor:        pointer;
}

/* ── Aviso final adentro de Instagram o Facebook ──────────────────────────
   Tapa todo, modales incluidos, y no tiene cerrar: la única salida es el
   botón que abre el navegador. */
.auditorio-rede-social {
  position:                fixed;
  inset:                   0;
  z-index:                 600;
  display:                 flex;
  align-items:             center;
  justify-content:         center;
  padding:                 var(--espacio-sm);
  background:              rgba(0, 0, 0, 0.55);
  backdrop-filter:         blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.auditorio-rede-social[hidden] { display: none; }
.auditorio-rede-social__card {
  width:          100%;
  max-width:      380px;
  max-height:     90vh;
  overflow-y:     auto;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--espacio-sm);
  padding:        var(--espacio-lg) var(--espacio-md);
  background:     var(--color-fondo);
  border-radius:  calc(var(--radio) + 4px);
  box-shadow:     0 24px 64px rgba(0, 0, 0, 0.22);
  text-align:     center;
}
.auditorio-rede-social__titulo {
  margin:      0;
  font-family: var(--fuente-display);
  font-style:  italic;
  font-size:   var(--texto-xl);
  color:       var(--color-texto);
}
.auditorio-rede-social__texto {
  margin:      0;
  font-size:   var(--texto-sm);
  line-height: 1.5;
  color:       var(--color-texto-2);
}
.auditorio-rede-social__boleto { width: 100%; }
.auditorio-rede-social__boleto .comprar-modal__campo-copia { margin: var(--espacio-xs) auto 0; }
.auditorio-rede-social__btn { width: 100%; }
/* .btn trae display propio: sin esto el atributo hidden no lo esconde. */
.auditorio-rede-social__btn[hidden] { display: none; }
/* Facebook y Messenger en iPhone: la instrucción del menú es lo principal,
   con una flecha hacia el ⋯ de arriba a la derecha. */
.auditorio-rede-social__fb-ios { width: 100%; }
.auditorio-rede-social__seta {
  position:  fixed;
  top:       var(--espacio-sm);
  right:     var(--espacio-sm);
  width:     40px;
  height:    40px;
  color:     var(--color-fondo);
  animation: auditorio-seta-apontar 1.6s ease-in-out infinite;
}
@keyframes auditorio-seta-apontar {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(4px, -4px); }
}
@media (prefers-reduced-motion: reduce) {
  .auditorio-rede-social__seta { animation: none; }
}
.auditorio-rede-social__menu {
  margin:      0 0 var(--espacio-md);
  font-size:   var(--texto-md);
  line-height: 1.5;
  color:       var(--color-texto);
}
.auditorio-rede-social__fb-ios .comprar-modal__campo-copia { margin: var(--espacio-xs) auto 0; }

/* Salida de emergencia por el menú de la app: chica, debajo del botón. */
.auditorio-rede-social__ajuda {
  margin:    0;
  font-size: var(--texto-xs);
  color:     var(--color-texto-3);
}
.auditorio-gate__ok   { color: var(--color-verde); font-size: var(--texto-sm); margin-top: var(--espacio-sm); }
.auditorio-gate__link {
  display: block;
  margin: var(--espacio-md) auto 0;
  background: none;
  border: none;
  color: var(--color-texto-2);
  text-decoration: underline;
  font-size: var(--texto-sm);
  cursor: pointer;
}
/* ── Gate: los dos caminos de entrada ─────────────────────────────────────
   Cada paso es un bloque que se muestra o se esconde entero. La guarda de
   [hidden] NO es opcional: cualquier regla de autor con `display` le gana al
   display:none que el navegador aplica al atributo, y en este mismo archivo
   ya pasó una vez — el formulario de reenvío nacía con hidden y se veía
   igual, así que el gate ofrecía por default el botón que rompía el código
   vigente de la persona. */
.auditorio-gate__paso { display: block; }
.auditorio-gate__paso[hidden] { display: none; }

.auditorio-gate__form--otp { margin-top: var(--espacio-sm); }
.auditorio-gate__form--otp input { letter-spacing: 0.3em; font-variant-numeric: tabular-nums; }
/* "O código vale por 10 minutos…" debajo del campo del código. */
.auditorio-gate__ajuda {
  margin:    var(--espacio-sm) 0 0;
  font-size: var(--texto-xs);
  color:     var(--color-texto-3);
}

/* Ayuda de la bienvenida de la comunidad (?wix), debajo del formulario del mail:
   "Não lembro qual e-mail usei" y el contacto por WhatsApp. */
.auditorio-gate__wix { margin-top: var(--espacio-md); }
.auditorio-gate__wix .auditorio-gate__texto { margin-top: var(--espacio-sm); }

/* ── Player ── */
.auditorio-player {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--espacio-md) var(--sec-h) var(--espacio-lg);
  gap: var(--espacio-md);
}

/* Portada del disco activo — casi todo el ancho de pantalla. El wrap (div
   normal) hace el sangrado con márgenes negativos — un <img>, al ser
   elemento reemplazado, no se expande solo con "width:auto" + márgenes
   negativos como un div (por eso el ancho quedaba corto antes). Adentro,
   la <img> es simple: 100% del wrap ya sangrado, alto automático, mismo
   criterio que .hero-08__foto — sin object-fit ni tope de alto, se
   estira lo que le pida su proporción real. */
.auditorio-player__portada-wrap {
  position: relative; /* ancla del sello de precio */
  margin: calc(var(--espacio-md) * -1) calc(var(--sec-h) * -1) 0;
  background-color: var(--color-superficie);
}
.auditorio-player__portada:not([hidden]) {
  display: block;
  width: 100%;
  height: auto;
}

/* Sello de precio: círculo de borde estrellado con "R$ 49⁹⁰". Componente
   compartido — lo usan la portada del player (abajo a la derecha, adentro de
   la foto) y el hero-08 (borde inferior de la foto). Cada uso pone su propia
   posición (right/bottom); el tamaño va en em y sigue al font-size, que escala
   con el ancho de pantalla. Nace con el atributo hidden y auditorio.js lo
   muestra con el precio de la base; sin precio nunca hay uno escrito a mano. */
.sello-precio {
  position: absolute;
  z-index: 2;
  width: calc(3.2em + 10px);
  height: calc(3.2em + 10px);
  margin: 0;
  color: var(--color-contraste);
  font-family: var(--fuente-cuerpo);
  font-weight: 500;
  font-style: normal;
  font-size: clamp(1.2rem, 5vw, 1.5rem);
  line-height: 1;
}
.sello-precio:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Estrella suave (borde "estrellado"): <use> de #auditorio-estrela (template.php),
   detrás del texto, con sombra y textura de lino dentro del SVG (filtros SVG
   clásicos). Sin clip-path ni filtros CSS, que en Safari pueden dar problemas al
   combinarse. El color llega por --sello-cor; sin color-mix queda el acento liso. */
.sello-precio__estrella {
  --sello-cor: var(--color-acento);
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: visible; /* deja salir la sombra fuera del área de 100x100 */
}
@supports (color: color-mix(in srgb, red, blue)) {
  .sello-precio__estrella { --sello-cor: color-mix(in srgb, var(--color-acento) 65%, #ffd93b 35%); }
}
.sello-precio__sombra-color { flood-color: rgb(var(--color-texto-rgb)); }

/* "R$ 49⁹⁰" en una sola línea: moneda chica en la línea del número, centavos
   chicos arriba, enteros grandes; se alinean entre sí y no contra el círculo. */
.sello-precio__linha { display: inline-flex; align-items: baseline; }
.sello-precio__moeda { font-size: 0.42em; margin-right: 0.2em; }
.sello-precio__cent  { font-size: 0.5em; margin: 0.2em 0 0 0.1em; align-self: flex-start; }

/* Aviso del descuento de la ocasión, prendido al borde de la estrella. */
.sello-precio__desconto {
  position: absolute;
  top: -0.3em;
  left: -0.45em;
  padding: 0.3em 0.5em;
  border-radius: 999px;
  background: var(--color-acento-2);
  color: var(--color-contraste);
  font-size: 0.55em;
  font-weight: 600;
  letter-spacing: -0.02em;
  transform: rotate(-12deg);
  box-shadow: 0 2px 6px rgba(var(--color-texto-rgb), 0.2);
}
.sello-precio__desconto[hidden] { display: none; }

/* Posición en la portada del player: abajo a la derecha, entero adentro de la
   foto para no pisar el carrusel de discos que va justo debajo. */
.auditorio-player__sello {
  right: 20px;
  bottom: 20px;
}

/* Tapa própria de Favoritos — não é foto de nenhum disco real (a lista
   cruza vários álbuns), corazón grande resplandecendo sobre fundo quente
   com a mesma textura que nav/footer já usam (--t6-h/--t6-v, injetada por
   main.js) — identidade visual própria em vez de emprestar a capa de um
   disco. [hidden] no <img> e aqui seguem o padrão já usado no modal de
   compra: um display fixo no seletor pisava o atributo hidden do JS. */
.auditorio-player__portada-favoritos:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2; /* mais apaisada — 2/3 da altura do quadrado original */
  background-color: color-mix(in srgb, var(--color-acento) 16%, var(--color-superficie));
  background-image: var(--t6-h), var(--t6-v);
}
.auditorio-player__portada-favoritos svg {
  width: 30%;
  height: auto;
  color: var(--color-acento-3);
  animation: auditorio-favoritos-pulso 3.2s ease-in-out infinite;
}
.auditorio-player__portada-favoritos svg path { fill: currentColor; }

@keyframes auditorio-favoritos-pulso {
  0%, 100% { filter: drop-shadow(0 0 16px rgba(213, 73, 52, .55)) drop-shadow(0 0 34px rgba(213, 73, 52, .3)); }
  50%      { filter: drop-shadow(0 0 24px rgba(213, 73, 52, .78)) drop-shadow(0 0 48px rgba(213, 73, 52, .42)); }
}
@media (prefers-reduced-motion: reduce) {
  .auditorio-player__portada-favoritos svg { animation: none; filter: drop-shadow(0 0 20px rgba(213, 73, 52, .65)); }
}

/* Carrossel de discos — mesmo padrão do carrossel de categorias de
   tienda-01 (Don Biloba): cards quadrados com foto + nome no rodapé,
   scroll horizontal com snap, anel no ativo, auto-centralizado ao clicar.
   Fondo marrón claro arranca justo debajo de la portada, de lado a lado
   (rompe el padding lateral/superior del player con márgenes negativos,
   igual que hace la portada arriba). */
.auditorio-player__discos-wrap {
  position: relative;
  margin: calc(var(--espacio-md) * -1) calc(var(--sec-h) * -1) 0;
}
.auditorio-player__discos {
  display: flex;
  gap: var(--espacio-sm);
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden; /* overflow-x:auto solo ya activaba scroll vertical también */
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: var(--color-superficie);
  padding: 12px var(--sec-h) 10px;
}
.auditorio-player__discos::-webkit-scrollbar { display: none; }
.auditorio-player__discos[hidden] { display: none; }

/* Flechita apuntando al disco activo — vive AFUERA del carrusel (hermana,
   no hija) para no quedar recortada por su overflow ni scrollear con él.
   El JS la reposiciona en cada cambio de disco y mientras el carrusel
   scrollea, así sigue al activo en vez de quedar fija en el medio. */
.auditorio-player__discos-flecha {
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translate(-50%, 50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 9px solid var(--color-fondo);
  pointer-events: none;
  z-index: 2;
  transition: left 280ms cubic-bezier(.4,0,.2,1);
}
.auditorio-player__discos-flecha[hidden] { display: none; }

.auditorio-player__disco-btn {
  flex: 0 0 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  scroll-snap-align: start;
}

.auditorio-player__disco-foto {
  width: 84px;
  aspect-ratio: 1;
  border-radius: var(--radio);
  background-color: var(--color-borde);
  background-size: cover;
  background-position: center;
}
/* Blanco contra el fondo crema del carrusel casi no contrastaba — el
   acento del sitio sí se distingue, mismo criterio que el resto de los
   estados activos (lista, aleatorio). */
.auditorio-player__disco-btn--activo .auditorio-player__disco-foto {
  box-shadow: 0 0 10px 3px rgba(245, 217, 118, 0.9), 0 0 26px 12px rgba(245, 217, 118, 0.55);
}
.auditorio-player__disco-label {
  max-width: 84px;
  font-size: .68rem;
  font-weight: 600;
  color: var(--color-texto);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Wrapper solo para anclar "Comprar Álbum" a la altura del título (modo
   normal, sin ?origem=ads — ese usa .nav__venda, no se toca). No puede
   vivir DENTRO de #auditorio-player-cabecalho porque ese div se reemplaza
   entero (innerHTML) en cada atualizarCabecalho() — un hijo puesto ahí
   desaparecería en el próximo cambio de disco. */
.auditorio-player__cabecalho-wrap {
  position: relative;
  margin-top: calc(var(--espacio-md) * -1 + 16px);
}
.auditorio-player__cabecalho {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.auditorio-player__cabecalho-titulo {
  font-family: var(--fuente-display);
  font-size: var(--texto-lg);
  font-weight: 600;
  margin: 0;
  /* Aire para que el botón flotante (ver .auditorio-flutuante-comprar--cabecalho
     abajo) nunca se superponga al texto, ni con nombre+año largos. */
  padding-right: 112px;
}
.auditorio-player__cabecalho-ano {
  margin: -4px 0 0;
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-xs);
  color: var(--color-texto-3);
  text-align: left;
}
/* Botão de baixar offline (2/9) — círculo com borda ao redor do ícone
   (decisão de produto), % tabular ao lado pra não saltar de largura enquanto
   os dígitos mudam. 3 estados via modificador — default (cinza), --baixando
   (verde + pulso), --completo (tick verde fixo, desabilitado). */
.auditorio-player__cabecalho-baixar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: middle;
  margin-left: 6px;
  border: none;
  background: none;
  padding: 0;
  color: var(--color-texto-2);
  cursor: pointer;
}
.auditorio-player__cabecalho-baixar-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
}
.auditorio-player__cabecalho-baixar-pct {
  font-family: var(--fuente-cuerpo); /* Outfit — mesmo motivo do ano, o <p> pai é serif */
  font-size: var(--texto-xs);
  font-variant-numeric: tabular-nums;
}
.auditorio-player__cabecalho-baixar--baixando {
  color: var(--color-verde);
  cursor: default;
}
.auditorio-player__cabecalho-baixar--baixando .auditorio-player__cabecalho-baixar-icone {
  animation: auditorio-baixar-pulso 1.1s infinite ease-in-out;
}
@keyframes auditorio-baixar-pulso {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}
.auditorio-player__cabecalho-baixar--completo {
  color: var(--color-verde);
  cursor: default;
  opacity: 1; /* neutraliza a opacidade baixa que o navegador aplica em [disabled] por default */
}
/* Disco ainda não consultado nesta sessão (2/9) — invisible mas mantém o
   espaço (evita pulo de layout), sem mostrar o ícone errado nem por um
   instante enquanto a consulta ao IndexedDB resolve. */
.auditorio-player__cabecalho-baixar--pendente {
  visibility: hidden;
}
/* Fila de download travou de vez (achado na auditoria) — "Falhou" por 3s
   e some com fade, mesmo vermelho já usado em .auditorio-gate__erro. */
.auditorio-player__cabecalho-baixar--erro {
  color: #b3261e;
}
.auditorio-player__cabecalho-baixar-pct {
  transition: opacity 500ms ease;
}
.auditorio-player__cabecalho-baixar--erro-saindo .auditorio-player__cabecalho-baixar-pct {
  opacity: 0;
}
/* Coraçãozinho ao lado do título — só na vista Favoritos. Cheio e vermelho
   igual aos corações ativos da lista, sem o círculo de fundo que os 3
   ícones de ação (Presentear/Agradecer/Recomendar) usam. */
.auditorio-player__cabecalho-coracao {
  display: inline-flex;
  vertical-align: middle;
  color: var(--color-acento-3);
}
.auditorio-player__cabecalho-coracao svg { fill: currentColor; }
.auditorio-player__cabecalho-desc {
  font-size: .88rem;
  color: var(--color-texto-2);
  line-height: 1.5;
  margin: 4px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.auditorio-player__lista {
  display: flex;
  flex-direction: column;
  transition: opacity 180ms ease;
}

/* Letras/cifras — fila discreta de ícones, centrada, entre a lista e a
   história, bem mais leve que .auditorio-player__acoes (sem card nem
   fundo): só o desenho do material e o nome embaixo. Botões que baixam o
   PDF (auditorio.js:baixarMaterial), com o percentual no lugar do nome. */
.auditorio-player__materiais {
  display: flex;
  justify-content: center;
  gap: var(--espacio-md);
  margin-top: var(--espacio-xs);
}
/* O [hidden] do navegador perde contra o display:flex de cima (mesma
   especificidade, autor sempre ganha do user-agent) — sem isto, o
   contenedor vazio seguia ocupando o margin-top mesmo escondido. */
.auditorio-player__materiais[hidden] {
  display: none;
}
.auditorio-player__material {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 84px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.auditorio-player__material--baixando {
  cursor: progress;
}
.auditorio-player__material-acento {
  fill: var(--color-acento);
  stroke: var(--color-acento);
}
.auditorio-player__material-papel {
  fill: color-mix(in srgb, var(--color-acento) 14%, transparent);
  stroke: var(--color-acento);
}
.auditorio-player__material-linha {
  stroke: var(--color-acento);
}
.auditorio-player__material-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: var(--color-texto-2);
  transition: transform var(--transicion), color var(--transicion);
}
.auditorio-player__material:hover .auditorio-player__material-icon,
.auditorio-player__material:focus-visible .auditorio-player__material-icon {
  color: var(--color-acento);
  transform: scale(1.08);
}
.auditorio-player__material-texto {
  font-size: var(--texto-xs);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  color: var(--color-texto-2);
}

.auditorio-player__historia {
  margin-top: 18px;
}
.auditorio-player__materiais:not([hidden]) + .auditorio-player__historia {
  margin-top: var(--espacio-xs);
}
.auditorio-player__historia-texto {
  margin: 0;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--color-texto-2);
}
/* "Participação especial": titulito negrita com um pouco de ar em cima,
   lista de nomes colada logo abaixo. Um pouco maior que o texto-xs
   original, mas menor que a história. */
.auditorio-player__historia-participacao-titulo {
  margin: var(--espacio-sm) 0 0;
  font-size: var(--texto-sm);
  font-weight: 700;
  color: var(--color-texto-2);
}
.auditorio-player__historia-participacao-lista {
  margin: 2px 0 0;
  font-size: var(--texto-sm);
  line-height: 1.6;
  color: var(--color-texto-2);
}
/* .auditorio-player__item é a LINHA (div) — o botão que toca a faixa fica
   dentro (.item-principal), separado do coração: um <button> nunca pode
   conter outro <button> (HTML inválido, quebra o clique de um dos dois). */
.auditorio-player__item {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 8px var(--espacio-xs);
  border-bottom: 1px solid var(--color-borde);
  font-size: .88rem;
  color: var(--color-texto);
}
.auditorio-player__item:last-child {
  border-bottom: none;
}
.auditorio-player__item-principal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-xs);
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.auditorio-player__item--bloqueado .auditorio-player__item-principal { cursor: default; }
/* Corações — direita de cada linha, com um pouco de ar antes. Cheio e
   vermelho quando ativo, só contorno cinza apagado quando não. */
.auditorio-player__coracao {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-left: 4px;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-texto-2);
  opacity: .55;
  cursor: pointer;
}
.auditorio-player__coracao svg { fill: none; }
.auditorio-player__coracao--ativo { color: var(--color-acento-3); opacity: 1; }
.auditorio-player__coracao--ativo svg { fill: currentColor; }

/* Flechinhas de reordenar — só na vista Favoritos. Duas empilhadas, bem
   compactas, mesmo tom apagado do coração inativo (não competem com ele). */
.auditorio-player__reordenar {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-left: 2px;
}
.auditorio-player__seta {
  width: 22px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  padding: 0;
  color: var(--color-texto-2);
  opacity: .6;
  cursor: pointer;
}
.auditorio-player__seta:hover,
.auditorio-player__seta:focus-visible { opacity: .9; color: var(--color-acento); }
.auditorio-player__seta:disabled {
  opacity: .2;
  cursor: default;
}

.auditorio-player__favoritos-vazio {
  color: var(--color-texto-2);
  font-size: var(--texto-sm);
  line-height: 1.6;
  text-align: center;
  padding: var(--espacio-lg) var(--espacio-sm);
}

.auditorio-player__item-titulo {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auditorio-player__item-duracao {
  flex: 0 0 auto;
  font-size: var(--texto-xs);
  color: var(--color-texto-2);
  font-variant-numeric: tabular-nums;
}
.auditorio-player__item-indicador {
  flex: 0 0 auto;
  width: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auditorio-player__item--activo .auditorio-player__item-titulo { color: var(--color-acento); font-weight: 600; }

/* Pistas bloqueadas — catálogo demo sem licença: mostra que o disco tem
   mais faixas, sem deixar tocar (cadeado no lugar da duração). */
.auditorio-player__item--bloqueado {
  cursor: default;
  opacity: 0.45;
}
.auditorio-player__item--bloqueado .auditorio-player__item-duracao,
.auditorio-player__item-duracao--amostra {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Badge "Amostra" — demo sem licença: junto ao nome da faixa, aclara que o
   que toca é uma amostra do tema cuja duração real aparece à direita. O nome
   deixa de esticar (só encolhe se faltar lugar) e o badge empurra o resto
   pra direita. */
.auditorio-player__item-titulo--amostra { flex: 0 1 auto; }
.auditorio-player__item-amostra {
  flex: 0 0 auto;
  margin: 0 auto 0 6px;
  padding: 1px 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-acento-2) 18%, transparent);
  color: color-mix(in srgb, var(--color-acento-2) 70%, var(--color-texto));
  font-size: 0.54rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.3;
}

/* Fila de acciones — presentear/recomendar/agradecer, mismos 3 acentos
   ya establecidos en el proyecto (dorado/verde/terracota), sin inventar
   colores nuevos. */
.auditorio-player__acoes {
  display: flex;
  justify-content: space-between;
  gap: var(--espacio-sm);
  margin-top: var(--espacio-sm); /* con el fondo nuevo quedaba pegado a "Historia" */
}
.auditorio-player__acao {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  background-color: var(--color-superficie);
  background-image: var(--t6-h), var(--t6-v);
  border: none;
  border-radius: 14px;
  box-shadow: var(--sombra-box);
  cursor: pointer;
  text-align: center;
}
.auditorio-player__acao-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: transform var(--transicion), background var(--transicion);
}
.auditorio-player__acao-texto {
  font-size: var(--texto-xs);
  font-weight: 700;
  color: var(--color-texto-2);
  margin-top: -8px;
}
.auditorio-player__acao:hover .auditorio-player__acao-icon,
.auditorio-player__acao:focus-visible .auditorio-player__acao-icon {
  transform: scale(1.08);
}
.auditorio-player__acao--presente:hover .auditorio-player__acao-icon,
.auditorio-player__acao--presente:focus-visible .auditorio-player__acao-icon,
.auditorio-player__acao--agradecer:hover .auditorio-player__acao-icon,
.auditorio-player__acao--agradecer:focus-visible .auditorio-player__acao-icon {
  background: color-mix(in srgb, currentColor 14%, transparent);
}
.auditorio-player__acao--presente .auditorio-player__acao-icon   { color: var(--color-acento); }
/* Sello "-N%" del Presentear (auditorio.js:marcarSeloPresentear), en la
   esquina de arriba a la derecha del ícono. */
.auditorio-player__acao--presente .auditorio-player__acao-icon { position: relative; }
.auditorio-player__presente-selo {
  top:       -20px;
  right:     -22px;
  width:     32px;
  height:    32px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.auditorio-player__acao--compartir .auditorio-player__acao-icon  { color: var(--color-acento-2); }
/* Azul del Agradecer (más visible que el celeste anterior). Variable porque
   las ondas de agua de la franja del documental usan el mismo tono. */
:root { --color-agradecer: #2f80c9; }
.auditorio-player__acao--agradecer .auditorio-player__acao-icon  { color: var(--color-agradecer); }

/* BOCETO — cabecera del bloque: título centrado en Garamond (entra en 1
   línea en celu) + subtítulo chico + línea suave abajo, separando del
   primer depoimento. */
.auditorio-player__depoimentos-cabecalho {
  margin-top: var(--espacio-sm); /* mismo criterio que .auditorio-player__historia: suma aire al gap del flex padre */
  /* Debajo, el aire entre su línea y el primer depoimento es el mismo que
     entre depoimentos (gap sm de .auditorio-player__depoimentos): le resta
     al gap md del flex padre la diferencia. */
  margin-bottom: calc(var(--espacio-sm) - var(--espacio-md));
  padding-bottom: var(--espacio-sm);
  border-bottom: 1px solid color-mix(in srgb, var(--color-texto-3) 20%, transparent);
  text-align: center;
}
.auditorio-player__depoimentos-titulo {
  margin: 0 0 4px;
  font-family: var(--fuente-display);
  font-weight: 600;
  font-style: normal;
  font-size: 1.3rem;
  color: var(--color-texto);
}
.auditorio-player__depoimentos-subtitulo {
  margin: 0;
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-xs);
  color: var(--color-texto-2);
}

/* BOCETO — depoimentos fijos debajo de Presentear/Recomendar/Agradecer, sin
   carrusel: 3 aparecen siempre, sin vínculo con el disco abierto. Línea
   suave entre cada uno (mismo tono ya usado en mod-depoimentos de la
   landing), la última sin línea — el aire final ya lo da el padding-bottom
   del propio .auditorio-player. */
.auditorio-player__depoimentos {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-sm); /* aire entre la línea y el depoimento siguiente */
}
/* La línea va pegada a la firma: 2px + el interlineado de la fecha dan el
   mismo aire que hay entre nombre y fecha. El aire hasta el siguiente lo
   pone el gap del contenedor (.auditorio-player__depoimentos). */
.auditorio-player__depoimento {
  padding-bottom: 2px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-texto-3) 20%, transparent);
}
.auditorio-player__depoimento:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.auditorio-player__depoimento-texto {
  margin: 0 0 8px;
  font-family: var(--fuente-cuerpo);
  font-weight: 300;
  font-size: .88rem;
  line-height: 22px;
  color: var(--color-texto);
  text-align: left;
  white-space: pre-line; /* respeta párrafos que la gente deja al Agradecer */
}
/* Resalte `**así**` — mismo criterio que .depoimento__realce de la landing
   (mod-depoimentos-01): más peso, sin llegar a un bold duro. */
.auditorio-player__depoimento-realce { font-weight: 600; }
.auditorio-player__depoimento-rodape {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
}
/* Firma sin negrita y apagada (el texto mezclado con el fondo): sutil, el
   peso lo lleva el texto. 2px más pegada a la fecha. */
.auditorio-player__depoimento-nome {
  margin-bottom: -2px;
  font-family: var(--fuente-cuerpo);
  font-weight: 400;
  font-size: .88rem;
  color: color-mix(in srgb, var(--color-texto) 70%, var(--color-fondo));
}
.auditorio-player__depoimento-data {
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-xs);
  color: var(--color-texto-2);
}

/* Header de modal con logo: mismas medidas que el header del modal de
   compra (comprar.css): logo 26px centrado, mismo alto, línea marrón abajo
   y cerrar arriba a la derecha. */
.auditorio-modal-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: var(--espacio-md);
  border-bottom: 1px solid color-mix(in srgb, var(--color-texto-3) 30%, transparent);
}
.auditorio-modal-logo {
  height: 26px;
  width: auto;
}
.auditorio-modal-header .modal__cerrar {
  position: absolute;
  right: var(--espacio-sm);
  top: var(--espacio-sm);
}
.auditorio-modal-texto {
  color: var(--color-texto-2);
  font-size: var(--texto-sm);
  line-height: 1.6;
  margin-top: var(--espacio-xs);
}
.auditorio-modal-acoes {
  display: flex;
  gap: var(--espacio-xs);
  margin-top: var(--espacio-sm);
}
.auditorio-modal-acoes .btn { flex: 1; }

/* ── Presentes que enviei: la lista para reenviar ─────────────────────────
   Un bloque por regalo pendiente, con el botón de WhatsApp y el copiar link.
   Sin cards ni bordes: son pocos y de vida corta. */
.auditorio-presentes__lista {
  display:        flex;
  flex-direction: column;
  gap:            var(--espacio-sm);
  margin-top:     var(--espacio-sm);
}
.auditorio-presentes__item {
  display:        flex;
  flex-direction: column;
  gap:            var(--espacio-xs);
  padding-top:    var(--espacio-sm);
  border-top:     1px solid var(--color-borde);
}
.auditorio-presentes__item:first-child { border-top: 0; padding-top: 0; }
.auditorio-presentes__quem {
  margin:    0;
  font-size: var(--texto-sm);
  color:     var(--color-texto-2);
}
/* Con vale: la imagen chica a la izquierda y las acciones al lado. */
.auditorio-presentes__corpo {
  display:     flex;
  gap:         var(--espacio-sm);
  align-items: flex-start;
}
.auditorio-presentes__vale {
  flex-shrink:   0;
  width:         96px;
  height:        auto;
  border-radius: var(--radio);
  box-shadow:    0 3px 10px rgba(var(--color-texto-rgb), 0.15);
}
.auditorio-presentes__acoes {
  flex:           1;
  display:        flex;
  flex-direction: column;
  gap:            var(--espacio-xs);
}
.auditorio-presentes__enviar { text-align: center; }

/* Abrir un presente: el vale que mandó quien regaló, entre el saludo y el botón. */
.auditorio-resgate__vale {
  display:       block;
  width:         100%;
  max-width:     220px;
  height:        auto;
  margin:        var(--espacio-sm) auto;
  border-radius: var(--radio);
  box-shadow:    0 6px 18px rgba(var(--color-texto-rgb), 0.15);
}
.auditorio-resgate__vale[hidden] { display: none; }
/* Video de bienvenida: la caja toma el tamaño del poster (horizontal o
   vertical, sin pasar de media pantalla de alto) y el video va encima con
   el mismo tamaño. El botón de play es el del documental (.documental__play). */
.auditorio-resgate__midia {
  position:      relative;
  width:         fit-content;
  max-width:     100%;
  margin:        var(--espacio-sm) auto;
  overflow:      hidden;
  border-radius: var(--radio);
  background:    rgb(var(--color-texto-rgb));
}
.auditorio-resgate__midia[hidden] { display: none; }
/* Sin poster (o no cargó): caja 16:9 al ancho del modal. */
.auditorio-resgate__midia--sem-poster { width: 100%; aspect-ratio: 16 / 9; }
.auditorio-resgate__midia--sem-poster .auditorio-resgate__poster { display: none; }
.auditorio-resgate__poster {
  display:    block;
  max-width:  100%;
  max-height: 55vh;
  max-height: 55dvh;
}
.auditorio-resgate__video {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: contain;
  background: rgb(var(--color-texto-rgb));
}
.auditorio-resgate__video[hidden] { display: none; }
/* Acción secundaria: link de texto, no un segundo botón que compita con el
   de enviar, que es lo que la persona vino a hacer. */
.auditorio-presentes__copiar {
  align-self:      flex-start;
  padding:         0;
  border:          0;
  background:      none;
  color:           var(--color-texto-3);
  font-family:     inherit;
  font-size:       var(--texto-xs);
  text-decoration: underline;
  cursor:          pointer;
}

/* ── Presentear y resgate: los dos formularios cortos de los modales ──────
   Mismo componente para el paso "para quién es el regalo" y para la
   bienvenida de quien lo recibe: son la misma cosa, una pila de campos
   sueltos dentro de un modal. Alineados a la izquierda, a diferencia del
   formulario del gate, que centra porque ahí se tipea un código. */
.auditorio-presente__form {
  display:        flex;
  flex-direction: column;
  gap:            var(--espacio-sm);
  margin-top:     var(--espacio-sm);
}
/* Línea de consentimiento debajo del botón de abrir el regalo: apretar el
   botón ES aceptar, así que el texto lo dice en vez de pedir un tilde. */
.auditorio-resgate__privacidade {
  margin:     0;
  text-align: center;
  font-size:  var(--texto-xs);
  color:      var(--color-texto-3);
}
.auditorio-presente__campo {
  padding:       11px 14px;
  border:        1px solid var(--color-borde);
  border-radius: var(--radio);
  font-size:     var(--texto-sm);
  font-family:   inherit;
  color:         var(--color-texto);
  background:    var(--color-fondo);
}

/* ── Agradecer: el formulario del depoimento ──────────────────────────────
   Mismos bordes y radio que el formulario del gate, pero alineado a la
   izquierda: acá se escribe un texto largo, no un código de 6 dígitos. */
/* Sugestões e desejos: pregunta en negrita y más grande, texto normal y
   cierre en itálica con el acento. */
.auditorio-sugestoes__pergunta {
  margin:      var(--espacio-xs) 0 0;
  font-size:   1rem;
  font-weight: 600;
  line-height: 1.35;
  color:       var(--color-texto);
}
.auditorio-sugestoes__texto { margin-top: 6px; line-height: 1.5; }
.auditorio-sugestoes__fecho {
  margin:      8px 0 0;
  font-family: var(--fuente-display);
  font-style:  italic;
  font-size:   1.05rem;
  line-height: 1.35;
  color:       color-mix(in srgb, var(--color-acento) 75%, var(--color-texto) 25%);
}

.auditorio-agradecer__form {
  display:        flex;
  flex-direction: column;
  gap:            var(--espacio-xs);
  margin-top:     var(--espacio-sm);
}
.auditorio-agradecer__nome,
.auditorio-agradecer__texto {
  padding:       11px 14px;
  border:        1px solid var(--color-borde);
  border-radius: var(--radio);
  font-size:     var(--texto-sm);
  font-family:   inherit;
  color:         var(--color-texto);
  background:    var(--color-fondo);
}
/* La caja de texto crece a lo alto, nunca a lo ancho: un resize horizontal
   dentro de un modal angosto rompe el layout. */
.auditorio-agradecer__texto {
  resize:      vertical;
  min-height:  7em;
  line-height: 1.5;
}
/* Contador discreto: informa sin competir con el botón. */
.auditorio-agradecer__contador {
  margin:     0;
  text-align: right;
  font-size:  var(--texto-xs);
  color:      var(--color-texto-3);
}
/* Sin sesión el formulario se ve pero no se usa: los campos quedan
   disabled desde auditorio.js, esto solo lo apaga a la vista. */
.auditorio-agradecer__form--bloqueado {
  opacity:        0.5;
  pointer-events: none;
}
/* Los dos bloques que se turnan (formulario y "recebido") son div sin
   display propio, así que el atributo hidden alcanza — no hace falta la
   guarda que sí necesita .auditorio-gate__form, que es flex. */

/* Ecualizador — "estou tocando eu" ao lado do tema ativo */
.auditorio-eq {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
  opacity: 0;
  animation: auditorio-eq-fade 200ms ease forwards;
}
@keyframes auditorio-eq-fade { to { opacity: 1; } }
.auditorio-eq i {
  display: block;
  width: 3px;
  border-radius: 2px;
  background: var(--color-acento);
  animation: auditorio-eq-bar 900ms ease-in-out infinite;
}
.auditorio-eq i:nth-child(1) { animation-delay: -0.6s; }
.auditorio-eq i:nth-child(2) { animation-delay: -0.3s; }
.auditorio-eq i:nth-child(3) { animation-delay: 0s; }
@keyframes auditorio-eq-bar {
  0%, 100% { height: 30%; }
  50%      { height: 100%; }
}
.auditorio-eq--pausado i {
  animation: none;
  height: 55%;
}

/* El tiempo "atual" del mini queda ANTES de la barra — alineado a la
   derecha de su caja para que el número quede pegado a la barra, igual
   que el "total" (después de la barra) que ya nace pegado por estar
   alineado a la izquierda por defecto. */
.auditorio-mini__tempo:first-child { text-align: right; }

/* Range nativo sin estilo propio (solo accent-color) se renderizaba
   distinto entre navegadores — en Brave se veía como una rayita/guioncito
   plano y con márgenes propios que desalineaban los tiempos a los costados. */
.auditorio-mini__seek {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.auditorio-mini__seek::-webkit-slider-runnable-track {
  height: 3px;
  background: var(--color-borde);
  border-radius: 999px;
}
.auditorio-mini__seek::-moz-range-track {
  height: 3px;
  background: var(--color-borde);
  border-radius: 999px;
}
.auditorio-mini__seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: var(--color-acento);
  cursor: pointer;
}
.auditorio-mini__seek::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: none;
  border-radius: 50%;
  background: var(--color-acento);
  cursor: pointer;
}

.auditorio-player__btn--play {
  color: #22c55e;
  filter: drop-shadow(0 0 6px rgba(34, 197, 94, .65));
}
.auditorio-player__btn--play.auditorio-player__btn--tocando {
  color: #f97316;
  filter: drop-shadow(0 0 6px rgba(249, 115, 22, .65));
}

/* ── Franja mini (auditório minimizado) ── */
.auditorio-mini {
  --auditorio-safe-bottom: env(safe-area-inset-bottom, 0px); /* margen inferior del aparato (barra de gestos) */
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 210; /* por encima del auditorio-overlay (200) — queda fijo siempre visible */
  background: var(--color-superficie);
  border-top: 1px solid var(--color-borde);
  display: flex;
  align-items: stretch;
  transition: opacity 220ms ease;
}
.auditorio-mini[hidden] { display: none; }
/* Dentro del navegador integrado de Instagram/Facebook los controles no
   suman el margen inferior. Con la página encima del video del anuncio
   (.sobre-video, ver auditorio.js) el borde inferior es zona de toque del
   video: franja libre bajo la mini, el margen de la app con un mínimo de
   40px; auditorio.js la descuenta del alto que copia el nav de campanha. */
html.em-rede-social .auditorio-mini { --auditorio-safe-bottom: 0px; }
html.sobre-video .auditorio-mini {
  --auditorio-franja-video: max(40px, env(safe-area-inset-bottom, 0px));
  padding-bottom: var(--auditorio-franja-video);
}
/* La franja lleva una frase de marca, sin acción: los toques ahí son del video. */
.auditorio-mini__frase { display: none; }
html.sobre-video .auditorio-mini__frase {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--auditorio-franja-video);
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--color-borde);
  background-color: color-mix(in srgb, var(--color-acento) 16%, var(--color-superficie));
  background-image: var(--t6-h), var(--t6-v);
  font-family: var(--fuente-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--color-texto-3);
  white-space: nowrap;
  pointer-events: none;
}

.auditorio-mini__corpo {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 6px var(--espacio-sm) calc(16px + var(--auditorio-safe-bottom)) var(--sec-h);
}
.auditorio-mini__linha-titulo {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  margin-left: 6px;
}
.auditorio-mini__titulo {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.auditorio-mini__titulo-tema {
  font-size: var(--texto-xs);
  font-weight: 600;
  color: var(--color-texto);
}
.auditorio-mini__titulo-disco {
  font-size: .64rem;
  font-weight: 400;
  color: var(--color-texto-2);
}

/* Estado de carregamento/aviso ao lado do título — 3 pontinhos enquanto
   pede/espera a faixa nova, texto fixo se depois de um tempo ainda não
   conseguiu (ver AVISO_MANUAL_MS em auditorio.js). Nunca encolhe (flex:none)
   pra não brigar espaço com o título, que já trunca sozinho. */
.auditorio-mini__status {
  display: none;
  flex: none;
  align-items: center;
  gap: 3px;
  font-size: .64rem;
  color: var(--color-texto-2);
  white-space: nowrap;
}
.auditorio-mini__status--visible { display: inline-flex; }
.auditorio-mini__status--cargando i {
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: .3;
  animation: auditorio-status-pulso 1s infinite ease-in-out;
}
.auditorio-mini__status--cargando i:nth-child(2) { animation-delay: .15s; }
.auditorio-mini__status--cargando i:nth-child(3) { animation-delay: .3s; }
@keyframes auditorio-status-pulso {
  0%, 80%, 100% { opacity: .3; transform: scale(.8); }
  40% { opacity: 1; transform: scale(1.15); }
}
.auditorio-mini__status--manual {
  color: var(--color-acento-2, var(--color-texto));
  font-weight: 600;
}
.auditorio-mini__linha-progresso { display: flex; align-items: center; gap: 6px; min-width: 0; margin-left: -6px; }
.auditorio-mini__tempo { flex: 0 0 5ch; font-variant-numeric: tabular-nums; font-size: .6rem; color: var(--color-texto-2); }
.auditorio-mini__seek {
  flex: 1;
  min-width: 0;
}

/* Dos columnas independientes: corpo (título+barra) crece a la izquierda,
   botoes es una columna de ancho fijo a la derecha — cambiar solo ese
   ancho (--ancho-col-botoes) reacomoda todo lo demás solo. */
.auditorio-mini {
  --ancho-col-botoes: 60px;
}
/* Grilla 2x2 equidistante: play arriba-izq, aleatorio arriba-der,
   anterior abajo-izq, siguiente abajo-der — el orden en el HTML sigue
   ese mismo orden (grid auto-placement por fila). */
.auditorio-mini__botoes {
  flex: 0 0 var(--ancho-col-botoes);
  width: var(--ancho-col-botoes);
  align-self: center;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  place-items: center;
  gap: 0;
  transform: translateX(-13px);
}
.auditorio-mini__btn {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: none;
  background: none;
  color: var(--color-texto);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
/* Mismo empate de especificidad que .auditorio-mini__btn (una sola
   clase) — sin este selector compuesto, quien gane depende del orden
   en el archivo y el verde/naranja del play/pausa se pisaba con el
   color base gris del botón. */
.auditorio-mini__btn.auditorio-player__btn--play { color: #22c55e; }
.auditorio-mini__btn.auditorio-player__btn--play.auditorio-player__btn--tocando { color: #f97316; }
/* Disco exibido sem nada tocável (ex: recém criado, sem preview ainda) e
   nada real carregado de outro disco tampouco — ver podeUsarPlay() em
   auditorio.js. Mesma opacidade que já usam as setas de reordenar
   Favoritos, pra manter um único idioma visual de "desativado". */
#auditorio-mini-playpause:disabled { opacity: .2; cursor: default; }
#auditorio-aleatorio[aria-pressed="true"] { color: var(--color-acento); }

/* Mientras el auditorio está activo (grande o minimizado), el botón de
   compra del nav no tiene sentido: quien está escuchando ya compró. */
body.auditorio-ativo .nav__venda { display: none; }

/* El espacio reservado abajo del body para que la franja mini (fixed)
   no tape el final de la página se calcula en JS con la altura real
   medida (ver ajustarEspacoRodape en auditorio.js) — un número fijo acá
   no calza igual en todos los celus por el safe-area-inset-bottom. */

/* ── Franja de la ocasión especial ────────────────────────────────────────
   La imprime index.php (ocasiao.php) al principio de <main>, solo con
   ocasión vigente; auditorio.js la copia arriba del reproductor. Va en el
   flujo, debajo del nav fijo; la caja colgante y la onda del fondo caen
   sobre la sección siguiente. Colores: paleta del sitio. */
/* Paleta compartida con el botón de la franja que pasa al nav (modo campanha) */
.auditorio-ocasiao,
.auditorio-ocasiao__cta--nav {
  --oc-ouro:   #f3c04a;
  /* Fiesta de chicos sobre tierra: azules, lilas y turquesa sobre marrón */
  --oc-caixa:    #7b56c4;
  --oc-azul:     #4f8fd6;
  --oc-turquesa: #3fb3a3;
  --oc-celeste:  #9fdcff;
  --oc-lila:     #d9b8ff;
  --oc-durazno:  #ffc29a;
  --oc-sombra:   #3a2215;
  /* Lino del sitio en gris y con blend overlay: el marrón casi transparente no se ve sobre color */
  --oc-textura: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.8%200.10' numOctaves='2' stitchTiles='stitch' result='r'/%3E%3CfeColorMatrix type='saturate' values='0' in='r' result='g'/%3E%3CfeComponentTransfer in='g' result='c'%3E%3CfeFuncR type='linear' slope='2.5' intercept='-0.7'/%3E%3CfeFuncG type='linear' slope='2.5' intercept='-0.7'/%3E%3CfeFuncB type='linear' slope='2.5' intercept='-0.7'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix type='matrix' in='c' values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 0 0.1'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.10%200.8' numOctaves='2' stitchTiles='stitch' result='r'/%3E%3CfeColorMatrix type='saturate' values='0' in='r' result='g'/%3E%3CfeComponentTransfer in='g' result='c'%3E%3CfeFuncR type='linear' slope='2.5' intercept='-0.7'/%3E%3CfeFuncG type='linear' slope='2.5' intercept='-0.7'/%3E%3CfeFuncB type='linear' slope='2.5' intercept='-0.7'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix type='matrix' in='c' values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 0 0.1'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)'/%3E%3C/svg%3E");
}
.auditorio-ocasiao {
  --oc-fundo:  linear-gradient(100deg, #9a6744, #74482d);
  /* Confeti de colores salpicado sobre el fondo */
  --oc-confeti: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='70'%3E%3Cg opacity='.75'%3E%3Ccircle cx='14' cy='12' r='2.2' fill='%239fdcff'/%3E%3Crect x='52' y='44' width='6' height='3' rx='1' fill='%23d9b8ff' transform='rotate(30 55 45)'/%3E%3Ccircle cx='92' cy='18' r='1.8' fill='%23f3c04a'/%3E%3Crect x='128' y='52' width='6' height='3' rx='1' fill='%233fb3a3' transform='rotate(-25 131 53)'/%3E%3Ccircle cx='160' cy='30' r='2' fill='%23ffc29a'/%3E%3Crect x='30' y='58' width='5' height='3' rx='1' fill='%234f8fd6' transform='rotate(60 32 59)'/%3E%3Ccircle cx='72' cy='62' r='1.6' fill='%239fdcff'/%3E%3Crect x='112' y='8' width='6' height='3' rx='1' fill='%23ffc29a' transform='rotate(-40 115 9)'/%3E%3Ccircle cx='140' cy='4' r='1.5' fill='%23d9b8ff'/%3E%3C/g%3E%3C/svg%3E");
  --oc-texto:  #fff8ef;
  /* Título y frase escalan con el ancho libre a la izquierda de la caja
     (--oc-ancho = franja − 22 de padding − 108 de la caja − 14 de aire;
     8.3 y 16.9 = ancho de cada uno por px de letra). Alto exacto = 32
     arriba + título + 9 de aire + frase (2 líneas de 1.32, menos las .22
     que sube contra el título = 2.42 frases) + 9 abajo:
     la caja cuelga 18px bajo la franja (posición e hilo derivan de --oc-alto). */
  --oc-ancho: calc(100cqw - 144px);
  --oc-fs-titulo: min(30px, var(--oc-ancho) / 8.3);
  --oc-fs-frase: min(17px, var(--oc-ancho) / 16.9);
  --oc-alto: calc(50px + var(--oc-fs-titulo) + 2.42 * var(--oc-fs-frase));
  /* Borde inferior en ondas: lo comparten el fondo y la lluvia para que coincidan */
  --oc-onda: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 9px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 10'%3E%3Cpath d='M0 0H60V3C45 3 45 10 30 10C15 10 15 3 0 3Z'/%3E%3C/svg%3E") 0 100% / 60px 10px repeat-x;
  /* Compensa el inner centrado en desktop: la lluvia ocupa todo el ancho */
  --oc-margem: max(0px, calc((100cqw - 560px) / 2));
  position: relative; z-index: 50; color: var(--oc-texto);
  container-type: inline-size;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .18));
}
/* Fondo en una sola capa que baja 10px más y termina en ondas */
.auditorio-ocasiao::before {
  content: ''; position: absolute; inset: 0 0 -10px;
  background: var(--oc-textura), var(--oc-confeti), var(--oc-fundo); background-blend-mode: overlay, overlay, normal, normal;
  -webkit-mask: var(--oc-onda);
          mask: var(--oc-onda);
}
.auditorio-ocasiao__inner {
  position: relative; max-width: 560px; min-height: var(--oc-alto); margin: 0 auto;
  display: flex; align-items: center; gap: 10px; padding: 32px 122px 9px 22px;
}

/* ── Texto: eyebrow como etiqueta pegada arriba, título en su línea y
   debajo, en una fila, la frase en dos líneas y el botón (en modo campanha
   el botón pasa al nav y la frase queda sola). Va por delante de la lluvia. ── */
.auditorio-ocasiao__texto {
  position: relative; z-index: 1; display: flex; flex-flow: row wrap; align-items: baseline;
  min-width: 0; margin: 0 -12px 0 0; translate: 0 -2px;
}
.auditorio-ocasiao__eyebrow {
  position: absolute; left: -12px; top: -19px; z-index: 3; padding: 3px 7px 2px; border-radius: 4px;
  background: var(--oc-turquesa); color: #fff; font: 600 10px/1 var(--fuente-cuerpo);
  letter-spacing: .18em; text-transform: uppercase; rotate: -5deg; box-shadow: 1px 2px 0 var(--oc-sombra);
}
/* El título va 2px más grande que su lugar (alto de línea = --oc-fs-titulo),
   apenas inclinado, y puede meterse bajo la caja */
.auditorio-ocasiao__titulo {
  flex-basis: 100%; font: italic 500 calc(var(--oc-fs-titulo) + 2px)/var(--oc-fs-titulo) var(--fuente-display);
  white-space: nowrap; text-shadow: 1.5px 1.5px 0 var(--oc-sombra), 0 2px 6px rgba(0, 0, 0, .25);
  -webkit-text-stroke: .5px currentColor; paint-order: stroke fill; /* Cormorant llega hasta 500: más peso con trazo */
  rotate: -2deg; translate: 4px 0; transform-origin: 0 100%;
}
/* Letras quietas en onda (seno de la posición), celestes */
.auditorio-ocasiao__letra {
  display: inline-block; position: relative; top: calc(sin(var(--i) * .8rad) * 2.5px); color: var(--oc-celeste);
}
/* Frase en escalera subiendo hacia el botón: dos líneas del mismo tamaño
   (1.2 frases), la segunda, el remate, en dorado. Sube .22 frases contra el
   título para que el alto siga siendo el de --oc-alto. La primera, más larga,
   pasa por encima del botón: el margen derecho negativo lo arrima al remate */
.auditorio-ocasiao__linhas {
  margin: calc(9px - .22 * var(--oc-fs-frase)) calc(2px - 1.4em) 0 -2px; font: italic 500 calc(1.2 * var(--oc-fs-frase))/1.1 var(--fuente-display); color: #fff1d0;
  -webkit-text-stroke: .3px currentColor; paint-order: stroke fill; text-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  white-space: nowrap; text-indent: 4px; rotate: -3deg; translate: 0 -5px;
}
.auditorio-ocasiao__linhas em {
  display: inline-block; text-indent: 0; translate: -2px 0; color: #ffe08a;
  -webkit-text-stroke: .5px currentColor; text-shadow: 1px 1px 0 var(--oc-sombra);
}

/* Botón Presentear: dorado en relieve (borde claro, luz arriba y canto
   inferior grueso) con letra marrón gruesa, para que se lea como botón.
   A los 3s y después cada 10s se hunde (baja y el canto se achica) junto con
   el sacudón del ícono */
.auditorio-ocasiao__cta {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px 5px 8px; border: 1px solid #fff0b8; border-radius: 8px; cursor: pointer;
  background: var(--oc-textura), linear-gradient(#ffe89a, var(--oc-ouro) 60%, #e0a62e); background-blend-mode: overlay;
  color: var(--oc-sombra); font: 700 12px/1 var(--fuente-cuerpo);
  animation: auditorio-ocasiao-cta-brilho 1.6s ease-in-out infinite alternate,
             auditorio-ocasiao-cta-aperta 10s ease-in-out 3s infinite;
}
/* En la franja se centra en el remate (2.ª línea, ~1.76 frases desde arriba,
   menos lo que sube la inclinación), 3px más abajo para no rozar la 1.ª;
   top compensa los 2px que sube el bloque de texto */
.auditorio-ocasiao__texto .auditorio-ocasiao__cta {
  position: relative; left: 8px; top: 3px; align-self: flex-start; margin-top: calc(9px + 1.76 * var(--oc-fs-frase) - 17px);
}
.auditorio-ocasiao__cta:active { scale: .95; translate: 0 2px; }
.auditorio-ocasiao__cta-icone {
  --cor: var(--oc-caixa); --fita: var(--color-fondo); width: 18px; height: 18px; margin-top: -3px;
  transform-origin: 50% 90%; animation: auditorio-ocasiao-icone 10s ease-in-out 3s infinite;
}
/* En el nav (modo campanha): letra y alto del botón de venta que reemplaza */
.auditorio-ocasiao__cta--nav { flex-shrink: 0; padding: 12px 15px 11px 10px; font-size: 1.05rem; white-space: nowrap; }
.auditorio-ocasiao__cta--nav .auditorio-ocasiao__cta-icone { width: 1.35em; height: 1.35em; }

/* ── Caja de regalo colgante: descuento y cuenta regresiva ── */
.auditorio-ocasiao__btn {
  --caixa: var(--oc-caixa); --fita: var(--oc-ouro);
  position: absolute; right: 12px; top: calc(var(--oc-alto) - 68px); z-index: 2; width: 96px; height: 86px; /* sobresale 18px */
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 30px 0 0;
  border: 0; background: none; cursor: pointer; isolation: isolate; color: var(--oc-texto);
  transform-origin: 50% calc(68px - var(--oc-alto)); filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .25));
  animation: auditorio-ocasiao-balanco 2.8s ease-in-out infinite alternate;
}
.auditorio-ocasiao__btn:active { scale: .95; }
.auditorio-ocasiao__caixa { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
/* Hilo: del borde superior de la franja al nudo del moño */
.auditorio-ocasiao__btn::after {
  content: ''; position: absolute; left: calc(50% - 1px); bottom: calc(100% - 9px);
  width: 2px; height: calc(var(--oc-alto) - 59px); background: var(--color-fondo);
}
/* "Até" encima del número; el margen le guarda su lugar en la columna. */
.auditorio-ocasiao__desconto--ate { margin-top: 7px; translate: 0 2px; }
.auditorio-ocasiao__num { position: relative; }
.auditorio-ocasiao__ate { position: absolute; left: 50%; bottom: 100%; translate: -50% 3px; font: 500 10px/1 var(--fuente-cuerpo); letter-spacing: 0; }
.auditorio-ocasiao__desconto { font: 600 16px/1 var(--fuente-cuerpo); letter-spacing: -.02em; white-space: nowrap; color: #ffe08a; }
.auditorio-ocasiao__faltam { font: 500 10.5px/1.2 var(--fuente-cuerpo); opacity: .95; translate: 0 -2px; }
.auditorio-ocasiao__faltam strong { font-size: 13px; font-weight: 700; }

/* ── Presentes que caen de a uno cada 4s detrás del texto (ciclo de 12s, cada uno
   cae en el primer 30% y espera), recortados con la onda del fondo ── */
.auditorio-ocasiao__lluvia {
  position: absolute; inset: 0 calc(-1 * var(--oc-margem)) -10px; z-index: 0; pointer-events: none;
  -webkit-mask: var(--oc-onda);
          mask: var(--oc-onda);
}
.auditorio-ocasiao__p {
  position: absolute; top: 0; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .2));
  animation: auditorio-ocasiao-lluvia 12s linear var(--delay) infinite; /* delays negativos: turnos a 0, 4 y 8s */
}
.auditorio-ocasiao__p--a { --cor: var(--oc-azul);     --fita: var(--color-fondo); width: 30px; height: 30px; left: 4%;  --rot: -10deg; --delay: 0s; }
.auditorio-ocasiao__p--b { --cor: var(--oc-turquesa); --fita: var(--color-fondo); width: 22px; height: 22px; left: 38%; --rot: 14deg;  --delay: -8s; }
.auditorio-ocasiao__p--c { --cor: var(--oc-ouro);     --fita: var(--oc-caixa);    width: 16px; height: 16px; left: 62%; --rot: -20deg; --delay: -4s; }
.auditorio-ocasiao__nota { display: none; position: absolute; font: 20px/1 Georgia, serif; opacity: .45; pointer-events: none; }

/* ── Copia dentro del reproductor: el menú flotante baja para no chocar con la caja ── */
.auditorio-ocasiao--player { flex-shrink: 0; }
.auditorio-overlay:has(> .auditorio-ocasiao) .auditorio-flutuante-topo { top: 136px; }

@keyframes auditorio-ocasiao-balanco { from { transform: rotate(-4deg); } to { transform: rotate(3deg); } }
@keyframes auditorio-ocasiao-lluvia {
  0%   { transform: translateY(-36px) rotate(var(--rot)); opacity: 0; }
  4%   { opacity: 1; }
  18%  { opacity: 1; }
  30%, 100% { transform: translateY(120px) rotate(calc(var(--rot) + 50deg)); opacity: 0; }
}
/* Alto del canto del botón: registrado para que el hundimiento lo anime
   mientras el brillo anima el resto de la sombra */
@property --oc-canto { syntax: '<length>'; inherits: false; initial-value: 3px; }
@keyframes auditorio-ocasiao-cta-brilho {
  from { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 var(--oc-canto) 0 #9a6a12, 0 5px 8px rgba(0, 0, 0, .3), 0 0 0 0 rgba(255, 236, 170, 0); }
  to   { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 var(--oc-canto) 0 #9a6a12, 0 5px 8px rgba(0, 0, 0, .3), 0 0 0 2px rgba(255, 236, 170, .8), 0 0 9px 2px rgba(255, 236, 170, .55); }
}
@keyframes auditorio-ocasiao-cta-aperta {
  0%, 2.2%, 100% { transform: none; --oc-canto: 3px; }
  .6%, 1.4% { transform: translateY(2px); --oc-canto: 1px; } /* click: baja en 60ms, 80ms abajo, sube en 80ms */
}
@keyframes auditorio-ocasiao-icone {
  0%, 6%, 100% { transform: none; }
  1.2% { transform: rotate(-12deg); }
  2.4% { transform: rotate(10deg); }
  3.6% { transform: rotate(-6deg); }
  4.8% { transform: rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .auditorio-ocasiao__p, .auditorio-ocasiao__btn, .auditorio-ocasiao__cta, .auditorio-ocasiao__cta-icone { animation: none; }
}

/* ── Tablet / Desktop ── */
@media (min-width: 768px) {
  /* Franja de la ocasión: más ancha, notas a los costados y la frase en una
     línea con el botón al costado */
  .auditorio-ocasiao { --oc-alto: 106px; --oc-margem: max(0px, calc((100cqw - 680px) / 2)); }
  .auditorio-ocasiao__inner { max-width: 680px; padding: 32px 140px 7px 22px; }
  .auditorio-ocasiao__btn { right: 24px; }
  .auditorio-ocasiao__nota { display: block; }
  .auditorio-ocasiao__nota--1 { left: -70px; top: 14px; transform: rotate(-12deg); }
  .auditorio-ocasiao__nota--2 { right: -70px; bottom: 12px; transform: rotate(10deg); }
  .auditorio-ocasiao__linhas { margin-top: 9px; margin-right: 18px; font-size: calc(1.12 * var(--oc-fs-frase)); }
  .auditorio-ocasiao__linhas br { display: none; }
  .auditorio-ocasiao__linhas em { translate: none; margin-left: .08em; } /* en una línea: aire tras la itálica de la 1.ª */
  .auditorio-ocasiao__texto .auditorio-ocasiao__cta { align-self: center; top: 0; margin-top: 9px; padding: 6px 14px 5px 9px; font-size: 13px; }
  .auditorio-ocasiao__cta--nav { padding: 13px 17px 12px 12px; font-size: 1.2rem; }
  .auditorio-ocasiao__p--a { left: calc(var(--oc-margem) + 20px); }
  .auditorio-ocasiao__p--b { left: calc(var(--oc-margem) + 230px); }
  .auditorio-ocasiao__p--c { left: calc(var(--oc-margem) + 420px); }
  .auditorio-overlay:has(> .auditorio-ocasiao) .auditorio-flutuante-topo { top: 124px; }
  .auditorio-player { max-width: 640px; margin: 0 auto; width: 100%; }
  .auditorio-mini { padding-left: calc(50% - 320px); padding-right: calc(50% - 320px); }
}

@media (min-width: 1024px) {
  .auditorio-player { max-width: 760px; }
  /* Sin el relleno de tablet: la barra ya mide lo que la columna (abajo). */
  .auditorio-mini { padding-left: 0; padding-right: 0; }

  /* Desktop como columna: el sitio está pensado para celular, así que en
     pantalla grande toda la página va en una columna centrada del mismo
     ancho que el reproductor, con el fondo a los costados. Los elementos
     fijos se miden contra la ventana y no contra el body: cada uno se acota
     a la columna por separado. */
  html {
    --ancho-columna-desk: 760px;
    background: color-mix(in srgb, var(--color-texto) 10%, var(--color-fondo));
  }
  body {
    max-width:    var(--ancho-columna-desk);
    margin-inline: auto;
    box-shadow:   0 0 48px rgba(var(--color-texto-rgb), 0.12);
  }
  nav#nav,
  .auditorio-mini,
  .auditorio-verificar-franja,
  .auditorio-overlay {
    left:  calc(50% - var(--ancho-columna-desk) / 2);
    right: calc(50% - var(--ancho-columna-desk) / 2);
  }
  body > .auditorio-flutuante-topo { right: calc(50% - var(--ancho-columna-desk) / 2 + var(--espacio-sm)); }
  /* Relleno lateral de nav/depoimentos/footer: los 120px de desktop de la
     base son para ancho completo; en la columna va el valor de tablet.
     :root y no html, para ganarle a la regla :root de la base. */
  :root {
    --contenedor-pad: var(--espacio-lg);
    /* Nav más alto: la base agranda el logo a 50px y lo deja sin aire. */
    --nav-h: 72px;
  }
  /* El nav va casi al borde de la columna, como en el celular. */
  nav#nav { padding-inline: var(--espacio-sm); }
  /* Barra de scroll del reproductor: queda en el borde de la columna, en
     medio de la pantalla — fina y con el color del texto en vez de la gris
     del sistema. Estándar (Chrome/Edge/Firefox) + ::-webkit para Safari. */
  .auditorio-overlay {
    /* Termina donde empieza la mini (1px solapado debajo, sin hueco por
       redondeo) en vez de rellenar: la barra se ve entera. */
    bottom:         max(0px, calc(var(--auditorio-rodape, 0px) - 1px));
    padding-bottom: 0;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--color-texto) 25%, transparent) transparent;
  }
  .auditorio-overlay::-webkit-scrollbar { width: 6px; }
  .auditorio-overlay::-webkit-scrollbar-track { background: transparent; }
  .auditorio-overlay::-webkit-scrollbar-thumb {
    background:    color-mix(in srgb, var(--color-texto) 25%, transparent);
    border-radius: 3px;
  }
  /* Modales proporcionados como en el celular, no del ancho de la columna. */
  .modal .modal__card { max-width: 480px; }
}