/* ============================================================================
   Criativos compartilhados (/cr/:token) — folha própria.

   Não usa os tokens do dashboard: aquilo é interface de trabalho, isto é uma
   vitrine que o CLIENTE abre. Fundo preto de cinema, a mídia como
   protagonista, título em serifada e o resto na fonte do sistema. O que
   atravessa da marca é o teal.

   Tudo sob `.cr-publico` — a folha é global no Next e não pode vazar.
   ========================================================================== */

.cr-publico {
  --cr-fundo: #000;
  --cr-palco: #0b0b0c;
  --cr-tinta: #f5f5f7;
  --cr-meta: #d2d2d7;
  --cr-teal: #2dd4bf;
  --cr-linha: rgb(255 255 255 / 0.14);
  --cr-vazio: #161618;
  --cr-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --cr-fonte: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", sans-serif;
  --cr-titulo: var(--cr-serif), "New York", ui-serif, Georgia, serif;
  --cr-largura: 1320px;
  --cr-margem: 20px;

  color-scheme: dark;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--cr-fundo);
  color: var(--cr-tinta);
  font-family: var(--cr-fonte);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.022em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

@media (min-width: 640px) {
  .cr-publico {
    --cr-margem: 32px;
  }
}

@media (min-width: 1024px) {
  .cr-publico {
    --cr-margem: 48px;
  }
}

html:has(.cr-publico),
html:has(.cr-publico) body {
  background: #000;
  color-scheme: dark;
}

.cr-publico :focus-visible {
  outline: 2px solid var(--cr-teal);
  outline-offset: 3px;
}

.cr-publico button {
  font: inherit;
  letter-spacing: inherit;
}

/* ── barra ──────────────────────────────────────────────────────────────── */

.cr-barra {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 var(--cr-margem);
  padding-top: env(safe-area-inset-top);
  transition: background-color 300ms var(--cr-ease), backdrop-filter 300ms var(--cr-ease);
}

.cr-barra[data-solida="true"] {
  background: rgb(0 0 0 / 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}

/* ── nome Salão Lucrativo (texto, até a marca gráfica sair) ─────────────── */

.cr-marca {
  color: #f5f1e8;
  font-family: var(--cr-titulo);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.cr-marca--abertura {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* No topo: selo à esquerda da pilha SALÃO / Lucrativo. */
.cr-marca--barra {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cr-marca-pilha {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.cr-marca--barra .cr-abre-lucrativo {
  font-size: 23px;
  line-height: 1;
}

.cr-marca--abertura {
  gap: 16px;
  text-shadow: 0 2px 30px rgb(0 0 0 / 0.4);
}

/* Primeira linha: selo "Agência" + "SALÃO", centralizados juntos. */
.cr-marca-linha {
  display: flex;
  align-items: center;
  gap: 0.9em;
}

/* Selo "Agência": preenchido em marfim com texto escuro, cantos de 4px —
   selo, não pílula. Tamanho em em, a partir do "SALÃO" ao lado. */
.cr-marca-selo {
  padding: 0.42em 0.5em 0.36em 0.62em;
  border-radius: 4px;
  background: #f5f1e8;
  color: #0b0b0c;
  font-family: var(--cr-fonte);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: none;
  white-space: nowrap;
  box-shadow: 0 2px 12px rgb(0 0 0 / 0.25);
}

.cr-marca--abertura .cr-marca-linha {
  font-size: clamp(12px, 1.1vw, 15px);
}

.cr-marca--abertura .cr-marca-selo {
  font-size: 0.82em;
}

.cr-marca--barra .cr-abre-salao {
  font-size: 8.5px;
}

.cr-marca--barra .cr-marca-selo {
  font-size: 9px;
}

/* "SALÃO": versalete bem aberto. */
.cr-abre-salao {
  /* o tracking sobra depois do "O": a margem negativa devolve, pra linha
     (selo + SALÃO) ficar centrada no olho */
  margin-right: -0.55em;
  font-family: var(--cr-fonte);
  font-size: 1em;
  font-weight: 600;
  letter-spacing: 0.55em;
  text-transform: uppercase;
}


/* "Lucrativo": itálico grande. */
.cr-abre-lucrativo {
  font-size: clamp(58px, 7.8vw, 108px);
  font-style: italic;
  line-height: 0.95;
  letter-spacing: -0.03em;
}



/* ── hero: três painéis que viram um (sozinha, logo ao abrir) ─────────────
   --p  abertura do painel central (0 → 1, suavizada)
   --a  nome da abertura (1 → 0)
   --t  título e vitrine (0 → 1)
   A hero cresce com a vitrine: criativo que não cabe na linha desce, e as
   laterais acompanham a rolagem presas no topo.
   ------------------------------------------------------------------------ */

.cr-hero {
  --p: 0;
  --a: 1;
  --t: 0;
  /* larguras de começo e fim: lateral esquerda e centro (a direita é o resto) */
  --esq-0: 18%;
  --cen-0: 64%;
  --esq-1: 6%;
  --cen-1: 88%;
  --rasgo: 8px;

  position: relative;
  min-height: 100vh;
  min-height: 100svh;
}

@media (min-width: 768px) {
  .cr-hero {
    --esq-0: 27%;
    --cen-0: 42%;
    --esq-1: 4%;
    --cen-1: 91%;
  }
}

.cr-hero-palco {
  position: relative;
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  overflow: clip;
  background: var(--cr-palco);
}

.cr-hero-painel {
  position: relative;
  flex: none;
  overflow: clip;
  background: var(--cr-vazio);
}

.cr-hero-painel--esq {
  width: calc(var(--esq-0) + (var(--esq-1) - var(--esq-0)) * var(--p));
}

.cr-hero-painel--dir {
  flex: 1;
}

/* A arte da lateral fica presa no topo enquanto a vitrine rola. */
.cr-hero-fixo {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.cr-hero-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
}

/* A arte aproxima de leve e escurece um pouco enquanto o centro abre, pra
   não disputar com a vitrine. */
.cr-hero-img--arte {
  filter: brightness(calc(1 - 0.35 * var(--p)));
  transform: scale(calc(1.12 - 0.12 * var(--p)));
}

/* O centro invade um tico as laterais e termina num corte de papel à mão —
   quase reto, com a irregularidade sutil de colagem. */
.cr-hero-painel--centro {
  z-index: 1;
  width: calc(var(--cen-0) + (var(--cen-1) - var(--cen-0)) * var(--p) + var(--rasgo) * 2);
  margin: 0 calc(var(--rasgo) * -1);
  overflow: visible;
  background: none;
}

.cr-hero-miolo,
.cr-hero-borda {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 520' preserveAspectRatio='none'%3E%3Cpath d='M48,0 L24.0,0.0 L24.1,3.8 L24.2,7.7 L24.2,10.4 L23.2,15.6 L24.0,17.9 L25.2,20.1 L25.4,24.7 L25.4,26.8 L26.6,29.5 L25.8,33.9 L24.5,37.1 L24.2,41.7 L23.2,47.4 L21.2,52.5 L21.0,57.9 L19.9,63.2 L20.0,68.9 L19.1,72.5 L18.7,77.6 L20.1,80.9 L19.6,83.4 L20.5,85.6 L20.5,89.9 L19.8,94.8 L19.7,97.3 L21.1,100.3 L22.2,103.6 L23.1,107.1 L24.4,109.5 L25.0,112.6 L23.9,115.8 L23.3,120.1 L23.2,123.6 L23.4,127.5 L22.6,130.2 L22.0,135.5 L23.2,140.5 L24.2,146.3 L25.0,150.0 L24.3,154.8 L23.8,159.2 L22.7,164.0 L23.7,168.3 L24.7,171.4 L24.1,173.5 L23.3,175.7 L22.4,180.0 L23.7,185.6 L23.9,190.3 L22.7,192.5 L21.8,197.3 L21.4,202.2 L21.6,204.5 L22.3,210.1 L23.4,215.3 L24.4,220.0 L25.1,223.7 L25.4,228.0 L25.6,232.3 L26.8,236.9 L26.4,241.8 L26.2,246.1 L24.6,248.4 L25.0,251.3 L26.0,255.8 L25.5,257.8 L24.6,260.7 L24.4,265.3 L24.8,268.6 L25.5,272.3 L25.2,277.9 L24.2,281.1 L25.1,286.5 L24.5,292.3 L23.9,296.1 L24.2,299.7 L25.1,303.0 L21.5,306.8 L21.3,309.9 L21.7,314.2 L22.5,316.9 L23.3,322.1 L22.4,324.5 L22.1,329.1 L23.0,331.9 L23.7,336.7 L23.0,338.9 L24.1,343.0 L23.3,349.0 L22.6,353.8 L22.4,359.4 L25.5,362.2 L24.7,366.8 L25.1,372.0 L26.0,374.9 L26.0,380.8 L27.0,384.1 L25.8,387.5 L26.4,391.7 L27.1,393.8 L26.1,399.0 L25.2,404.2 L25.7,408.2 L26.7,413.0 L25.6,418.8 L25.0,422.9 L25.0,427.4 L24.5,431.7 L25.5,437.1 L26.6,442.5 L25.7,446.8 L23.7,450.8 L24.5,454.4 L25.0,458.3 L24.7,462.5 L24.1,468.2 L23.9,470.7 L23.9,476.3 L24.2,479.1 L23.2,481.6 L22.7,483.6 L22.7,486.6 L23.7,490.9 L24.2,495.8 L24.5,497.9 L24.6,502.4 L23.9,506.5 L24.1,510.7 L24.4,516.3 L24.0,519.0 L24.0,520.0 L48,520 Z' fill='black'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 520' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L24.0,0.0 L23.0,2.4 L23.3,4.7 L23.3,10.5 L23.0,13.3 L22.8,15.7 L23.2,21.0 L23.7,25.5 L22.9,30.8 L22.3,32.9 L22.4,38.6 L23.3,41.0 L22.9,44.2 L22.5,46.7 L22.8,49.1 L23.6,52.5 L24.8,57.0 L25.1,60.7 L24.8,66.4 L25.2,71.5 L24.2,76.9 L24.0,82.6 L24.4,87.0 L25.3,90.1 L24.2,92.7 L24.1,96.1 L24.9,99.8 L24.1,102.5 L23.1,104.9 L24.3,110.5 L24.8,116.4 L25.6,120.0 L25.5,124.1 L25.7,126.6 L26.6,129.0 L26.5,132.8 L27.6,137.4 L27.9,140.5 L27.7,144.1 L27.7,146.5 L27.1,150.7 L25.9,154.3 L24.9,160.2 L25.0,164.6 L25.3,167.7 L25.3,171.8 L24.8,177.5 L24.1,179.6 L24.3,184.2 L24.8,186.4 L24.2,190.7 L24.8,195.9 L27.0,198.9 L26.9,203.8 L26.6,209.1 L26.6,213.6 L26.4,215.8 L25.9,219.5 L25.6,222.6 L25.5,227.7 L24.8,233.5 L23.8,236.0 L24.2,240.5 L24.0,245.2 L23.4,249.7 L22.2,252.7 L23.4,258.2 L23.6,261.3 L23.5,263.7 L23.1,266.1 L23.5,270.6 L23.9,273.5 L24.9,278.8 L24.6,284.0 L24.8,286.9 L25.1,292.1 L25.4,298.1 L24.3,303.1 L25.3,306.6 L26.3,308.9 L25.8,312.8 L26.8,317.9 L27.7,322.6 L27.1,327.5 L27.3,330.0 L28.1,333.5 L26.9,337.8 L26.9,343.4 L27.3,346.6 L26.2,352.4 L26.4,355.8 L26.6,359.4 L25.7,363.7 L25.5,369.0 L24.5,374.0 L24.5,376.1 L23.3,380.4 L24.4,385.6 L25.4,390.8 L24.4,395.7 L25.2,400.3 L25.8,404.9 L25.7,409.9 L26.0,413.5 L26.0,418.2 L25.4,423.1 L24.5,426.7 L23.7,432.1 L22.6,437.7 L22.1,441.8 L22.4,445.5 L21.2,450.4 L22.1,453.1 L21.0,456.3 L22.1,459.5 L22.9,464.6 L22.8,468.4 L23.8,470.6 L24.5,473.5 L25.1,477.8 L25.9,481.0 L25.7,484.2 L26.2,488.1 L26.5,493.8 L26.5,499.6 L25.3,501.8 L25.2,505.3 L23.9,508.4 L25.1,511.4 L24.3,514.9 L24.0,519.3 L24.0,520.0 L0,520 Z' fill='black'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 520' preserveAspectRatio='none'%3E%3Cpath d='M48,0 L24.0,0.0 L24.1,3.8 L24.2,7.7 L24.2,10.4 L23.2,15.6 L24.0,17.9 L25.2,20.1 L25.4,24.7 L25.4,26.8 L26.6,29.5 L25.8,33.9 L24.5,37.1 L24.2,41.7 L23.2,47.4 L21.2,52.5 L21.0,57.9 L19.9,63.2 L20.0,68.9 L19.1,72.5 L18.7,77.6 L20.1,80.9 L19.6,83.4 L20.5,85.6 L20.5,89.9 L19.8,94.8 L19.7,97.3 L21.1,100.3 L22.2,103.6 L23.1,107.1 L24.4,109.5 L25.0,112.6 L23.9,115.8 L23.3,120.1 L23.2,123.6 L23.4,127.5 L22.6,130.2 L22.0,135.5 L23.2,140.5 L24.2,146.3 L25.0,150.0 L24.3,154.8 L23.8,159.2 L22.7,164.0 L23.7,168.3 L24.7,171.4 L24.1,173.5 L23.3,175.7 L22.4,180.0 L23.7,185.6 L23.9,190.3 L22.7,192.5 L21.8,197.3 L21.4,202.2 L21.6,204.5 L22.3,210.1 L23.4,215.3 L24.4,220.0 L25.1,223.7 L25.4,228.0 L25.6,232.3 L26.8,236.9 L26.4,241.8 L26.2,246.1 L24.6,248.4 L25.0,251.3 L26.0,255.8 L25.5,257.8 L24.6,260.7 L24.4,265.3 L24.8,268.6 L25.5,272.3 L25.2,277.9 L24.2,281.1 L25.1,286.5 L24.5,292.3 L23.9,296.1 L24.2,299.7 L25.1,303.0 L21.5,306.8 L21.3,309.9 L21.7,314.2 L22.5,316.9 L23.3,322.1 L22.4,324.5 L22.1,329.1 L23.0,331.9 L23.7,336.7 L23.0,338.9 L24.1,343.0 L23.3,349.0 L22.6,353.8 L22.4,359.4 L25.5,362.2 L24.7,366.8 L25.1,372.0 L26.0,374.9 L26.0,380.8 L27.0,384.1 L25.8,387.5 L26.4,391.7 L27.1,393.8 L26.1,399.0 L25.2,404.2 L25.7,408.2 L26.7,413.0 L25.6,418.8 L25.0,422.9 L25.0,427.4 L24.5,431.7 L25.5,437.1 L26.6,442.5 L25.7,446.8 L23.7,450.8 L24.5,454.4 L25.0,458.3 L24.7,462.5 L24.1,468.2 L23.9,470.7 L23.9,476.3 L24.2,479.1 L23.2,481.6 L22.7,483.6 L22.7,486.6 L23.7,490.9 L24.2,495.8 L24.5,497.9 L24.6,502.4 L23.9,506.5 L24.1,510.7 L24.4,516.3 L24.0,519.0 L24.0,520.0 L48,520 Z' fill='black'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 520' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L24.0,0.0 L23.0,2.4 L23.3,4.7 L23.3,10.5 L23.0,13.3 L22.8,15.7 L23.2,21.0 L23.7,25.5 L22.9,30.8 L22.3,32.9 L22.4,38.6 L23.3,41.0 L22.9,44.2 L22.5,46.7 L22.8,49.1 L23.6,52.5 L24.8,57.0 L25.1,60.7 L24.8,66.4 L25.2,71.5 L24.2,76.9 L24.0,82.6 L24.4,87.0 L25.3,90.1 L24.2,92.7 L24.1,96.1 L24.9,99.8 L24.1,102.5 L23.1,104.9 L24.3,110.5 L24.8,116.4 L25.6,120.0 L25.5,124.1 L25.7,126.6 L26.6,129.0 L26.5,132.8 L27.6,137.4 L27.9,140.5 L27.7,144.1 L27.7,146.5 L27.1,150.7 L25.9,154.3 L24.9,160.2 L25.0,164.6 L25.3,167.7 L25.3,171.8 L24.8,177.5 L24.1,179.6 L24.3,184.2 L24.8,186.4 L24.2,190.7 L24.8,195.9 L27.0,198.9 L26.9,203.8 L26.6,209.1 L26.6,213.6 L26.4,215.8 L25.9,219.5 L25.6,222.6 L25.5,227.7 L24.8,233.5 L23.8,236.0 L24.2,240.5 L24.0,245.2 L23.4,249.7 L22.2,252.7 L23.4,258.2 L23.6,261.3 L23.5,263.7 L23.1,266.1 L23.5,270.6 L23.9,273.5 L24.9,278.8 L24.6,284.0 L24.8,286.9 L25.1,292.1 L25.4,298.1 L24.3,303.1 L25.3,306.6 L26.3,308.9 L25.8,312.8 L26.8,317.9 L27.7,322.6 L27.1,327.5 L27.3,330.0 L28.1,333.5 L26.9,337.8 L26.9,343.4 L27.3,346.6 L26.2,352.4 L26.4,355.8 L26.6,359.4 L25.7,363.7 L25.5,369.0 L24.5,374.0 L24.5,376.1 L23.3,380.4 L24.4,385.6 L25.4,390.8 L24.4,395.7 L25.2,400.3 L25.8,404.9 L25.7,409.9 L26.0,413.5 L26.0,418.2 L25.4,423.1 L24.5,426.7 L23.7,432.1 L22.6,437.7 L22.1,441.8 L22.4,445.5 L21.2,450.4 L22.1,453.1 L21.0,456.3 L22.1,459.5 L22.9,464.6 L22.8,468.4 L23.8,470.6 L24.5,473.5 L25.1,477.8 L25.9,481.0 L25.7,484.2 L26.2,488.1 L26.5,493.8 L26.5,499.6 L25.3,501.8 L25.2,505.3 L23.9,508.4 L25.1,511.4 L24.3,514.9 L24.0,519.3 L24.0,520.0 L0,520 Z' fill='black'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
  -webkit-mask-position: left top, right top, center;
  mask-position: left top, right top, center;
  -webkit-mask-size: 24px 520px, 24px 520px, calc(100% - 46px) 100%;
  mask-size: 24px 520px, 24px 520px, calc(100% - 46px) 100%;
  -webkit-mask-repeat: repeat-y, repeat-y, no-repeat;
  mask-repeat: repeat-y, repeat-y, no-repeat;
}

.cr-hero-miolo {
  position: relative;
  min-height: 100%;
  /* clip e não hidden: hidden vira contêiner de rolagem e o fundo sticky
     deixaria de grudar na tela. */
  overflow: clip;
  background: #060505;
}

/* Fundo do centro preso na tela (como as laterais): a vitrine rola por cima.
   A margem negativa devolve a altura, pro conteúdo começar no topo. */
.cr-hero-fundo {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  margin-bottom: -100vh;
  margin-bottom: -100svh;
  overflow: hidden;
}

/* A mesma silhueta, 1px mais larga e escura: a sombra fina do papel. */
.cr-hero-borda {
  position: absolute;
  inset: 0 -1px;
  background: #000;
  opacity: 0.45;
}

/* Horizonte ao entardecer acima das nuvens, do tamanho da primeira tela. A
   linha do horizonte fica logo abaixo do meio, atrás da vitrine; o céu sobe
   um pouco enquanto o painel abre. */
.cr-hero-ceu {
  position: absolute;
  top: -6%;
  left: 0;
  width: 100%;
  height: 112%;
  object-fit: cover;
  object-position: 50% 58%;
  transform: translateY(calc(-3% * var(--p)));
  -webkit-user-drag: none;
}

/* Grão de filme por cima: tira o ar de degradê de computador. */
.cr-hero-grao {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  opacity: 0.16;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.cr-hero-conteudo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 88px 0 72px;
  text-align: center;
}

/* O logo no meio da primeira tela, independente da altura da vitrine. */
.cr-hero-abertura {
  position: absolute;
  inset: 0 0 auto;
  display: grid;
  place-items: center;
  height: 100vh;
  height: 100svh;
  margin: 0;
  opacity: var(--a);
  transform: translateY(calc(-16px * (1 - var(--a))));
  pointer-events: none;
}

/* Largura já da tela aberta: o painel estreito só recorta. Assim a vitrine
   não reflui (e a página não muda de altura) durante a abertura. */
.cr-hero-titulo-bloco {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  width: calc(88vw - 8px);
  opacity: var(--t);
  transform: translateY(calc(28px * (1 - var(--t)))) scale(calc(0.97 + 0.03 * var(--t)));
}

@media (min-width: 768px) {
  .cr-hero-titulo-bloco {
    width: calc(91vw - 48px);
  }
}

.cr-hero[data-titulo="0"] .cr-hero-titulo-bloco {
  visibility: hidden;
}

.cr-hero-data {
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cr-hero-titulo {
  margin: 0;
  font-family: var(--cr-titulo);
  font-size: clamp(56px, 8.5vw, 120px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.035em;
  /* Grão de impressão: pontinhos vazados no título, como tinta em papel. */
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='1' seed='4'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -9 7.4'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='1' seed='4'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -9 7.4'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>");
  -webkit-mask-size: 220px 220px;
  mask-size: 220px 220px;
  color: #f3ede2;
}

/* Vitrine: os criativos da cliente sobem quando o painel abre. Altura fixa
   por linha, largura da proporção de cada um; o que não cabe desce. */
.cr-vitrine {
  --h: 250px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .cr-vitrine {
    --h: clamp(260px, 44vh, 440px);
    gap: 20px;
    margin-top: 44px;
  }
}

.cr-vitrine > li {
  flex: none;
  opacity: var(--t);
  transform: translateY(calc((1 - var(--t)) * (64px + var(--i) * 26px)));
}

/* Na vitrine o card tem a altura da linha e a largura sai da proporção. */
.cr-vitrine .cr-card {
  width: auto;
  height: var(--h);
  box-shadow: 0 32px 64px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.1) inset;
}

@media (hover: hover) {
  .cr-vitrine .cr-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 44px 80px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.16) inset;
  }
}

/* Botão principal: pílula clara, como o "Assistir" do Apple TV. */
.cr-pilula {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 132px;
  height: 48px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  background: var(--cr-tinta);
  color: #000;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 200ms var(--cr-ease), background-color 200ms var(--cr-ease);
}

@media (hover: hover) {
  .cr-pilula:hover {
    background: #fff;
    transform: scale(1.03);
  }
}

.cr-pilula:active {
  transform: scale(0.97);
}

.cr-pilula:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ── card ───────────────────────────────────────────────────────────────── */

.cr-card {
  width: auto;
  height: var(--h);
  box-shadow: 0 32px 64px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.1) inset;
}

@media (hover: hover) {
  .cr-vitrine .cr-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 44px 80px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.16) inset;
  }
}

.cr-vitrine-caixa {
  position: relative;
  width: 100%;
}

.cr-vitrine-seta {
  position: absolute;
  top: calc(12px + var(--h, 0px) / 2);
  z-index: 2;
  display: none;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  transition: opacity 250ms var(--cr-ease), background-color 200ms var(--cr-ease);
}

@media (hover: hover) and (min-width: 768px) {
  .cr-vitrine-seta {
    display: flex;
  }
}

.cr-vitrine-seta--esq {
  left: 24px;
}

.cr-vitrine-seta--dir {
  right: 24px;
}

.cr-vitrine-seta[data-oculta="true"] {
  opacity: 0;
  pointer-events: none;
}

/* Botão principal: pílula clara, como o "Assistir" do Apple TV. */
.cr-pilula {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 132px;
  height: 48px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  background: var(--cr-tinta);
  color: #000;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 200ms var(--cr-ease), background-color 200ms var(--cr-ease);
}

@media (hover: hover) {
  .cr-pilula:hover {
    background: #fff;
    transform: scale(1.03);
  }
}

.cr-pilula:active {
  transform: scale(0.97);
}

.cr-pilula:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ── conteúdo: uma seção por tipo ──────────────────────────────────────── */

.cr-conteudo {
  position: relative;
  max-width: calc(var(--cr-largura) + 2 * var(--cr-margem));
  margin: 0 auto;
  padding: 96px var(--cr-margem) calc(120px + env(safe-area-inset-bottom));
}

.cr-secao + .cr-secao {
  margin-top: 96px;
}

/* A âncora do índice não pode ficar embaixo da barra fixa. */
.cr-secao {
  scroll-margin-top: 72px;
}

.cr-secao-cabecalho {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--cr-linha);
}

.cr-secao-titulo {
  margin: 0;
  font-family: var(--cr-titulo);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.025em;
}

.cr-secao-num {
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--cr-meta);
}

/* Grade em linhas, da esquerda pra direita na ordem do gestor. Cada card
   mantém a proporção real; a linha alinha pelo topo. */
.cr-grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .cr-grade {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (min-width: 1024px) {
  .cr-grade {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }

  .cr-grade[data-tipo="videos"] {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.cr-card {
  position: relative;
  display: block;
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
  background: var(--cr-vazio);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.06) inset;
  transition: transform 400ms var(--cr-ease), box-shadow 400ms var(--cr-ease);
}

@media (hover: hover) {
  .cr-card:hover {
    transform: scale(1.025);
    box-shadow: 0 24px 48px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.1) inset;
  }
}

.cr-card-midia {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.cr-publico .cr-card-midia:focus-visible {
  outline-offset: -3px;
  border-radius: 16px;
}

.cr-card-img,
.cr-card-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
}

.cr-card-video {
  opacity: 0;
  transition: opacity 300ms var(--cr-ease);
}

.cr-card-video[data-tocando="true"] {
  opacity: 1;
}

.cr-card-arquivo {
  position: absolute;
  inset: 0;
  margin: auto;
  color: var(--cr-meta);
}

.cr-card-play {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.35);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  color: #fff;
  transition: opacity 300ms var(--cr-ease);
}

.cr-card-play svg {
  margin-left: 2px;
}

.cr-card-play[data-tocando="true"] {
  opacity: 0;
}

/* ── escolha do cliente ────────────────────────────────────────────────── */

/* Marcado: aro marfim por dentro do card e o selo de check preenchido. */
.cr-card[data-selecionado="true"] {
  box-shadow: 0 0 0 3px #f5f1e8 inset, 0 32px 64px rgb(0 0 0 / 0.5);
}

.cr-card-marca {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 2px solid rgb(255 255 255 / 0.85);
  border-radius: 50%;
  background: rgb(0 0 0 / 0.25);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: transparent;
  transition: background-color 200ms var(--cr-ease), border-color 200ms var(--cr-ease), transform 200ms var(--cr-ease);
}

.cr-card[data-selecionado="true"] .cr-card-marca {
  border-color: #f5f1e8;
  background: #f5f1e8;
  color: #0b0b0c;
  transform: scale(1.06);
}

/* O aro do marcado precisa ficar por cima da mídia. */
.cr-card[data-selecionado="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid #f5f1e8;
  border-radius: inherit;
  pointer-events: none;
}

/* Ver de perto (play/ampliar): botão próprio no canto, não seleciona. */
.cr-card-ver {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.38);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  color: #fff;
  cursor: pointer;
  transition: background-color 200ms var(--cr-ease), transform 200ms var(--cr-ease);
}

.cr-card-ver svg {
  margin-left: 1px;
}

@media (hover: hover) {
  .cr-card-ver:hover {
    background: rgb(0 0 0 / 0.6);
    transform: scale(1.06);
  }
}

/* Barra da escolha: vidro escuro preso embaixo, no centro. */
.cr-escolha {
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom));
  left: 50%;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 8px 8px 22px;
  border-radius: 999px;
  background: rgb(18 18 20 / 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  box-shadow: 0 20px 50px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.08) inset;
  transform: translateX(-50%);
  animation: cr-escolha-entra 400ms var(--cr-ease);
  white-space: nowrap;
}

@keyframes cr-escolha-entra {
  from {
    opacity: 0;
    transform: translate(-50%, 16px);
  }
}

.cr-escolha-total {
  font-size: 16px;
  font-weight: 500;
}

.cr-escolha-num {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cr-escolha-botao {
  min-width: 0;
  height: 44px;
  padding: 0 22px;
  font-size: 16px;
}

.cr-escolha-salva {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 18px 0 14px;
  border-radius: 999px;
  background: rgb(52 199 89 / 0.18);
  color: #7ee2a0;
  font-size: 15px;
  font-weight: 600;
}

/* Espaço pra barra não cobrir a última fileira de criativos. */
.cr-hero-conteudo {
  padding-bottom: 120px;
}

/* No visualizador, "Selecionar" fica embaixo da mídia: pílula de vidro que
   vira marfim com check quando o criativo está na escolha. */
.cr-visor-base {
  display: flex;
  flex: none;
  justify-content: center;
  padding: 4px 16px calc(20px + env(safe-area-inset-bottom));
}

.cr-visor-escolher {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 168px;
  height: 48px;
  padding: 0 26px;
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.12);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 200ms var(--cr-ease), color 200ms var(--cr-ease), transform 200ms var(--cr-ease);
}

@media (hover: hover) {
  .cr-visor-escolher:hover {
    background: rgb(255 255 255 / 0.2);
  }
}

.cr-visor-escolher:active {
  transform: scale(0.97);
}

.cr-visor-escolher[data-selecionado="true"] {
  border-color: #f5f1e8;
  background: #f5f1e8;
  color: #0b0b0c;
}

/* Escolha enviada: os não escolhidos ficam em segundo plano. */
.cr-card[data-bloqueado="true"][data-selecionado="false"] {
  opacity: 0.38;
  filter: saturate(0.6);
}

.cr-card[data-bloqueado="true"] .cr-card-marca {
  display: none;
}

.cr-card[data-bloqueado="true"][data-selecionado="true"] .cr-card-marca {
  display: flex;
}

/* ── popup de confirmação ─────────────────────────────────────────────── */

.cr-confirma {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgb(0 0 0 / 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: cr-visor-entra 220ms var(--cr-ease);
}

.cr-confirma-caixa {
  width: min(440px, 100%);
  padding: 28px 24px 22px;
  border-radius: 22px;
  background: rgb(28 28 30 / 0.92);
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  backdrop-filter: saturate(180%) blur(30px);
  box-shadow: 0 30px 80px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.08) inset;
  text-align: center;
  animation: cr-confirma-entra 280ms var(--cr-ease);
}

@keyframes cr-confirma-entra {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}

.cr-confirma-titulo {
  margin: 0;
  font-family: var(--cr-titulo);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.cr-confirma-frase {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.4;
}

.cr-confirma-miniaturas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-height: 220px;
  margin: 20px 0 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.cr-confirma-miniaturas li {
  position: relative;
  height: 96px;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1) inset;
}

.cr-confirma-miniaturas img {
  display: block;
  width: auto;
  height: 100%;
}

.cr-confirma-play {
  position: absolute;
  top: 6px;
  left: 6px;
  color: #fff;
  filter: drop-shadow(0 1px 4px rgb(0 0 0 / 0.6));
}

.cr-confirma-acoes {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}

.cr-confirma-voltar {
  height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.12);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 200ms var(--cr-ease);
}

@media (hover: hover) {
  .cr-confirma-voltar:hover {
    background: rgb(255 255 255 / 0.2);
  }
}

/* ── carregando ─────────────────────────────────────────────────────────── */

.cr-carregando-palco {
  display: grid;
  grid-template-columns: 18% 1fr 18%;
  height: 100vh;
  height: 100svh;
}

@media (min-width: 768px) {
  .cr-carregando-palco {
    grid-template-columns: 27% 42% 1fr;
  }
}

.cr-esqueleto {
  display: block;
  background: linear-gradient(100deg, #111 30%, #1c1c1e 50%, #111 70%) 0 0 / 300% 100%;
  animation: cr-brilho 1.6s linear infinite;
}

.cr-carregando-palco .cr-esqueleto:nth-child(2) {
  background-color: #0d0d0e;
}

@keyframes cr-brilho {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0 0;
  }
}

/* ── link inválido / erro ───────────────────────────────────────────────── */

.cr-estado {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 96px 24px;
  text-align: center;
}

.cr-estado-icone {
  color: var(--cr-meta);
}

.cr-estado-titulo {
  margin: 0;
  font-family: var(--cr-titulo);
  font-size: clamp(40px, 7vw, 64px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.cr-estado-frase {
  margin: 0;
  font-size: 19px;
  line-height: 1.4;
}

/* ── visualizador ───────────────────────────────────────────────────────── */

.cr-visor {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  background: #000;
  color: #fff;
  overscroll-behavior: contain;
  animation: cr-visor-entra 280ms var(--cr-ease);
}

.cr-visor[data-saindo="true"] {
  animation: cr-visor-sai 200ms var(--cr-ease) forwards;
}

@keyframes cr-visor-entra {
  from {
    opacity: 0;
  }
}

@keyframes cr-visor-sai {
  to {
    opacity: 0;
  }
}

.cr-visor-topo {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  padding-top: calc(8px + env(safe-area-inset-top));
}

@media (min-width: 768px) {
  .cr-visor-topo {
    padding: 16px 24px;
  }
}

.cr-visor-titulo {
  min-width: 0;
  text-align: center;
}

.cr-visor-nome {
  overflow: hidden;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cr-visor-contagem {
  font-size: 13px;
  line-height: 18px;
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
}

.cr-botao-vidro {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.12);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  color: #fff;
  cursor: pointer;
  transition: background-color 200ms var(--cr-ease), transform 200ms var(--cr-ease),
    opacity 200ms var(--cr-ease);
}

@media (hover: hover) {
  .cr-botao-vidro:hover {
    background: rgb(255 255 255 / 0.22);
  }
}

.cr-botao-vidro:active {
  transform: scale(0.94);
}

.cr-publico .cr-botao-vidro:focus-visible {
  outline-color: #fff;
  outline-offset: 2px;
}

.cr-visor-palco {
  position: relative;
  flex: 1;
  min-height: 0;
  padding: 8px 12px 8px;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

@media (min-width: 768px) {
  .cr-visor-palco {
    padding: 8px 104px 8px;
  }
}

.cr-visor-area {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  container-type: size;
}

/* Caixa na proporção da mídia, do maior tamanho que cabe na área: é o
   object-fit: contain feito em CSS, pra prévia e original ocuparem o mesmo
   retângulo e um trocar pelo outro sem pular. */
.cr-visor-quadro {
  position: relative;
  aspect-ratio: var(--cr-razao);
  width: min(100cqw, 100cqh * var(--cr-razao));
  animation: cr-quadro-entra 320ms var(--cr-ease);
}

.cr-visor-quadro[data-direcao="anterior"] {
  animation-name: cr-quadro-entra-esquerda;
}

.cr-visor-quadro[data-direcao="proximo"] {
  animation-name: cr-quadro-entra-direita;
}

.cr-visor-quadro[data-arrastando="false"] {
  transition: transform 320ms var(--cr-ease);
}

@keyframes cr-quadro-entra {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
}

@keyframes cr-quadro-entra-direita {
  from {
    opacity: 0;
    transform: translateX(32px);
  }
}

@keyframes cr-quadro-entra-esquerda {
  from {
    opacity: 0;
    transform: translateX(-32px);
  }
}

.cr-visor-midia {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-user-drag: none;
}

.cr-visor-midia--original {
  opacity: 0;
  transition: opacity 300ms var(--cr-ease);
}

.cr-visor-midia--original[data-pronta="true"] {
  opacity: 1;
}

/* ── player próprio (sem os controles do navegador) ──────────────────── */

.cr-player {
  position: absolute;
  inset: 0;
}

.cr-player video {
  cursor: pointer;
}

.cr-player[data-controles="false"] {
  cursor: none;
}

.cr-player-centro {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72px;
  height: 72px;
  margin: -36px 0 0 -36px;
}

.cr-player-centro svg {
  margin-left: 3px;
}

.cr-player-barra {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 8px;
  border-radius: 14px;
  background: rgb(20 20 22 / 0.55);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  color: #fff;
  transition: opacity 300ms var(--cr-ease), transform 300ms var(--cr-ease);
}

.cr-player[data-controles="false"] .cr-player-barra {
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}

.cr-player-botao {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: none;
  color: #fff;
  cursor: pointer;
  transition: background-color 200ms var(--cr-ease);
}

@media (hover: hover) {
  .cr-player-botao:hover {
    background: rgb(255 255 255 / 0.14);
  }
}

.cr-player-tempo {
  flex: none;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* Linha do tempo: trilho fino, parte tocada em branco, bolinha só pra pegar. */
.cr-player-linha {
  flex: 1;
  min-width: 0;
  height: 20px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.cr-player-linha::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, #fff var(--prog), rgb(255 255 255 / 0.3) var(--prog));
}

.cr-player-linha::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, #fff var(--prog), rgb(255 255 255 / 0.3) var(--prog));
}

.cr-player-linha::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
  margin-top: -4px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  -webkit-appearance: none;
  appearance: none;
}

.cr-player-linha::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 50%;
  background: #fff;
}

.cr-visor-seta {
  position: absolute;
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 1;
}

.cr-visor-seta--anterior {
  left: 16px;
}

.cr-visor-seta--proximo {
  right: 16px;
}

@media (min-width: 768px) {
  .cr-visor-seta {
    top: 50%;
    bottom: auto;
    width: 48px;
    height: 48px;
    margin-top: -24px;
  }

  .cr-visor-seta--anterior {
    left: 32px;
  }

  .cr-visor-seta--proximo {
    right: 32px;
  }
}

.cr-visor-seta:disabled {
  opacity: 0;
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .cr-publico *,
  .cr-publico *::before,
  .cr-publico *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}