/* ==========================================================================
   LIVELET — Identidade visual
   ========================================================================== */

:root {
    --bg:            #07060a;
    --bg-2:          #0d0a12;
    --surface:       rgba(255, 255, 255, .038);
    --surface-2:     rgba(255, 255, 255, .06);
    --border:        rgba(255, 255, 255, .10);
    --border-forte:  rgba(255, 255, 255, .20);

    --texto:         #f6f4f8;
    --texto-suave:   #b7b1c4;
    --texto-fraco:   #7d7590;

    --pink:          #ff1b8d;
    --rosa-quente:   #ff3d62;
    --laranja:       #ff7a2f;
    --ambar:         #ffb13d;

    --grad:          linear-gradient(100deg, #ff1b8d 0%, #ff4d5e 48%, #ffa62b 100%);
    --grad-suave:    linear-gradient(100deg, rgba(255,27,141,.16), rgba(255,166,43,.16));

    --ok:            #2fd98a;
    --erro:          #ff5470;

    --r-sm:  10px;
    --r-md:  16px;
    --r-lg:  24px;
    --r-xl:  32px;

    --sombra:        0 24px 60px -20px rgba(0, 0, 0, .8);
    --brilho-rosa:   0 0 40px -6px rgba(255, 27, 141, .55);

    --fonte:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --fonte-titulo:  'Archivo', var(--fonte);
    --fonte-logo:    'Nunito', var(--fonte);
}

/* --------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--texto);
    font-family: var(--fonte);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* brilho ambiente de fundo */
body::before {
    content: '';
    position: fixed;
    inset: -30vh -20vw auto;
    height: 90vh;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(45% 55% at 22% 30%, rgba(255, 27, 141, .30), transparent 70%),
        radial-gradient(40% 50% at 78% 22%, rgba(255, 122, 47, .24), transparent 70%);
    filter: blur(30px);
}
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .35;
    background-image: radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
    background-size: 3px 3px;
    mix-blend-mode: overlay;
}

.pagina { position: relative; z-index: 1; }

img, svg, video { max-width: 100%; display: block; }

a { color: var(--ambar); text-underline-offset: 3px; }

::selection { background: rgba(255, 27, 141, .45); color: #fff; }

/* ---------------------------------------------------------------- logo */

.logo {
    display: inline-flex;
    align-items: center;
    gap: .42em;
    font-family: var(--fonte-logo);
    font-size: var(--logo-tam, 30px);
    line-height: 1;
    user-select: none;
    text-decoration: none;
}
.logo picture { display: contents; }
.logo__img { height: calc(var(--logo-tam, 30px) * 1.55); width: auto; }

.logo__live {
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: .74em;
    letter-spacing: .045em;
    color: #fff;
    padding: .30em .46em .32em;
    border: .115em solid #fff;
    border-radius: .55em;
    box-shadow: 0 0 .5em rgba(255,255,255,.65), 0 0 1.6em rgba(255,255,255,.30);
    text-shadow: 0 0 .45em rgba(255,255,255,.55);
}
.logo__let {
    font-weight: 900;
    letter-spacing: -.015em;
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 .40em rgba(255, 45, 130, .55))
            drop-shadow(0 0 1.1em rgba(255, 122, 47, .35));
}
.logo__tag {
    display: block;
    margin-top: .5em;
    font-family: var(--fonte-titulo);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .38em;
    text-transform: uppercase;
    color: var(--texto-fraco);
}

/* ------------------------------------------------------------ estrutura */

.container { width: min(760px, 100% - 32px); margin-inline: auto; }
.container--largo { width: min(1280px, 100% - 32px); }

/* ---------------------------------------------------------------- capa */

.capa { padding: 46px 0 8px; text-align: center; }

.capa__selo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 26px 0 18px;
    padding: 7px 15px 7px 11px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    backdrop-filter: blur(10px);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--texto-suave);
}
.ponto-live {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--pink);
    box-shadow: 0 0 0 0 rgba(255, 27, 141, .7);
    animation: pulsar 2s infinite;
}
@keyframes pulsar {
    70%  { box-shadow: 0 0 0 9px rgba(255, 27, 141, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 27, 141, 0); }
}

.capa h1 {
    font-family: var(--fonte-titulo);
    font-size: clamp(30px, 6.4vw, 52px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.025em;
    margin: 0 0 16px;
}
.destaque {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.capa__texto {
    max-width: 560px;
    margin: 0 auto;
    color: var(--texto-suave);
    font-size: clamp(15px, 2.6vw, 17.5px);
}

.marcadores {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}
.marcadores li {
    padding: 7px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    font-size: 13.5px;
    color: var(--texto-suave);
}
.marcadores li b { color: var(--texto); font-weight: 600; }

/* ------------------------------------------------------- compartilhar */

.compartilhar {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin: 30px 0 6px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background:
        var(--grad-suave),
        linear-gradient(var(--bg-2), var(--bg-2));
    text-align: left;
}
.compartilhar__texto { flex: 1 1 240px; }
.compartilhar__texto strong { display: block; font-size: 15px; }
.compartilhar__texto span { font-size: 13.5px; color: var(--texto-suave); }
.compartilhar__acoes { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- botões */

.btn {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 20px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 650;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform .14s ease, box-shadow .2s ease, background .2s ease, opacity .2s;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn:focus-visible { outline: 2px solid var(--ambar); outline-offset: 3px; }
.btn svg { width: 17px; height: 17px; flex: none; }

.btn--principal {
    background: var(--grad);
    color: #fff;
    box-shadow: var(--brilho-rosa);
}
.btn--principal:hover { box-shadow: 0 0 52px -4px rgba(255, 27, 141, .8); }

.btn--contorno {
    background: var(--surface);
    border-color: var(--border-forte);
    color: var(--texto);
    backdrop-filter: blur(8px);
}
.btn--contorno:hover { background: var(--surface-2); border-color: rgba(255,255,255,.34); }

.btn--zap { background: #22c55e19; border-color: #22c55e55; color: #4ade80; }
.btn--zap:hover { background: #22c55e29; }

.btn--grande { padding: 17px 34px; font-size: 16.5px; width: 100%; }
.btn--pequeno { padding: 8px 14px; font-size: 13px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* --------------------------------------------------------------- progresso */

.barra-progresso {
    position: sticky;
    top: 0;
    z-index: 40;
    height: 3px;
    background: rgba(255,255,255,.07);
}
.barra-progresso__preenchida {
    height: 100%;
    width: 0;
    background: var(--grad);
    box-shadow: 0 0 12px rgba(255, 27, 141, .9);
    transition: width .35s cubic-bezier(.4, 0, .2, 1);
}

/* ---------------------------------------------------------------- form */

.form { margin: 34px 0 60px; }

.bloco {
    position: relative;
    margin-bottom: 20px;
    padding: 26px 24px;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
    backdrop-filter: blur(14px);
    box-shadow: var(--sombra);
}
.bloco__cabecalho {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
}
.bloco__num {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px; height: 32px;
    border-radius: 11px;
    background: var(--grad);
    color: #fff;
    font-family: var(--fonte-titulo);
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 0 22px -6px rgba(255, 27, 141, .9);
}
.bloco__cabecalho h2 {
    margin: 0;
    font-family: var(--fonte-titulo);
    font-size: 18.5px;
    font-weight: 700;
    letter-spacing: -.01em;
}
.bloco__cabecalho p { margin: 2px 0 0; font-size: 13.5px; color: var(--texto-fraco); }

.campo { margin-bottom: 20px; }
.campo:last-child { margin-bottom: 0; }

.linha { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }
.linha--3 { grid-template-columns: 2fr 1fr; }
@media (max-width: 620px) {
    .linha, .linha--3 { grid-template-columns: 1fr; }
}

label.rotulo, .rotulo {
    display: block;
    margin-bottom: 8px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--texto);
}
.rotulo .obrig { color: var(--pink); margin-left: 2px; }
.ajuda { display: block; margin-top: 7px; font-size: 12.8px; color: var(--texto-fraco); line-height: 1.5; }
.ajuda--destaque {
    margin-top: 9px;
    padding: 10px 12px;
    border-left: 2px solid var(--laranja);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    background: rgba(255, 122, 47, .09);
    color: var(--texto-suave);
}

input[type=text], input[type=email], input[type=tel], input[type=date],
input[type=url], input[type=password], input[type=number], select, textarea {
    width: 100%;
    padding: 13px 15px;
    border: 1px solid var(--border-forte);
    border-radius: var(--r-sm);
    background: rgba(0, 0, 0, .32);
    color: var(--texto);
    font-family: inherit;
    font-size: 15.5px;
    line-height: 1.4;
    transition: border-color .18s, box-shadow .18s, background .18s;
}
textarea { min-height: 118px; resize: vertical; }

input::placeholder, textarea::placeholder { color: #6a6280; }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--pink);
    background: rgba(0, 0, 0, .5);
    box-shadow: 0 0 0 3px rgba(255, 27, 141, .18);
}

select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 42px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b7b1c4' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 17px;
}
select option { background: #16121d; color: var(--texto); }

input[type=date] { min-height: 49px; }
input[type=date]::-webkit-calendar-picker-indicator { filter: invert(.75); cursor: pointer; }

/* ---------------------------------------------- opções (radio / checkbox) */

.opcoes { display: grid; gap: 9px; }
.opcoes--2 { grid-template-columns: 1fr 1fr; }
.opcoes--chips { display: flex; flex-wrap: wrap; gap: 9px; }
@media (max-width: 620px) { .opcoes--2 { grid-template-columns: 1fr; } }

.opcao {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 15px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: rgba(0, 0, 0, .22);
    font-size: 14.8px;
    cursor: pointer;
    transition: border-color .16s, background .16s, transform .1s;
}
.opcao:hover { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.045); }
.opcao input { position: absolute; opacity: 0; pointer-events: none; }

.opcao__marca {
    flex: none;
    position: relative;
    width: 20px; height: 20px;
    border: 2px solid rgba(255,255,255,.35);
    border-radius: 50%;
    transition: border-color .16s, background .16s;
}
.opcao--check .opcao__marca { border-radius: 6px; }
.opcao__marca::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: inherit;
    background: var(--grad);
    opacity: 0;
    transform: scale(.4);
    transition: opacity .16s, transform .16s;
}
.opcao--check .opcao__marca::after {
    inset: 0;
    background: var(--grad) no-repeat center / 12px
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}
.opcao input:checked ~ .opcao__marca { border-color: var(--pink); }
.opcao input:checked ~ .opcao__marca::after { opacity: 1; transform: scale(1); }
.opcao:has(input:checked) {
    border-color: rgba(255, 27, 141, .6);
    background: rgba(255, 27, 141, .09);
}
.opcao input:focus-visible ~ .opcao__marca { box-shadow: 0 0 0 3px rgba(255, 177, 61, .5); }

/* variação "chip" compacta */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(0,0,0,.22);
    font-size: 14px;
    cursor: pointer;
    transition: all .16s;
}
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip:hover { border-color: rgba(255,255,255,.3); }
.chip:has(input:checked) {
    border-color: transparent;
    background: var(--grad);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 0 24px -8px rgba(255, 27, 141, .95);
}

/* turnos em cartões maiores */
.turnos { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 620px) { .turnos { grid-template-columns: 1fr; } }
.turno {
    position: relative;
    display: block;
    padding: 16px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: rgba(0,0,0,.22);
    text-align: center;
    cursor: pointer;
    transition: all .16s;
}
.turno input { position: absolute; opacity: 0; pointer-events: none; }
.turno__icone { font-size: 22px; line-height: 1; }
.turno__nome { display: block; margin-top: 7px; font-weight: 650; font-size: 15px; }
.turno__hora { display: block; font-size: 12.5px; color: var(--texto-fraco); }
.turno:hover { border-color: rgba(255,255,255,.3); }
.turno:has(input:checked) {
    border-color: rgba(255, 27, 141, .65);
    background: rgba(255, 27, 141, .11);
    box-shadow: inset 0 0 30px -12px rgba(255, 27, 141, .8);
}
.turno:has(input:checked) .turno__hora { color: var(--texto-suave); }

/* ---------------------------------------------------------------- upload */

/* especificações do vídeo (duração, formato, resolução) */
.specs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}
@media (max-width: 620px) { .specs { grid-template-columns: 1fr; } }

.specs li {
    padding: 14px 15px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: rgba(0, 0, 0, .22);
}
.specs__icone { font-size: 18px; line-height: 1; }
.specs b {
    display: block;
    margin-top: 6px;
    font-size: 14.5px;
    font-weight: 650;
    letter-spacing: -.005em;
}
.specs span:last-child {
    display: block;
    margin-top: 3px;
    font-size: 12.6px;
    line-height: 1.45;
    color: var(--texto-fraco);
}

/* gravar agora  |  escolher da galeria */
.escolha-video {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
@media (max-width: 480px) { .escolha-video { grid-template-columns: 1fr; } }

.escolha-video__opcao {
    position: relative;
    display: grid;
    place-items: center;
    gap: 2px;
    padding: 22px 16px;
    border: 1.5px dashed rgba(255, 255, 255, .24);
    border-radius: var(--r-md);
    background: rgba(0, 0, 0, .22);
    text-align: center;
    cursor: pointer;
    transition: border-color .18s, background .18s, transform .1s;
}
.escolha-video__opcao:hover,
.escolha-video__opcao:focus-within,
.escolha-video.is-ativa .escolha-video__opcao {
    border-color: var(--pink);
    background: rgba(255, 27, 141, .07);
}
.escolha-video__opcao:active { transform: scale(.99); }
.escolha-video__opcao input[type=file] {
    position: absolute;
    inset: 0;
    width: 100%;
    opacity: 0;
    cursor: pointer;
}
.escolha-video__icone {
    display: grid; place-items: center;
    width: 46px; height: 46px;
    margin-bottom: 6px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--grad-suave);
    color: var(--texto);
}
.escolha-video__icone svg { width: 22px; height: 22px; }
.escolha-video__titulo { font-weight: 650; font-size: 15px; }
.escolha-video__dica { font-size: 12.5px; color: var(--texto-fraco); }

.escolha-video__formatos {
    margin: 10px 0 0;
    font-size: 12.6px;
    color: var(--texto-fraco);
    text-align: center;
}

/* no desktop a câmera não faz sentido: o JS marca o body e escondemos */
body.sem-camera .escolha-video { grid-template-columns: 1fr; }
body.sem-camera #opcao-gravar { display: none; }

.arquivo-escolhido {
    display: none;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 13px 15px;
    border: 1px solid rgba(47, 217, 138, .35);
    border-radius: var(--r-sm);
    background: rgba(47, 217, 138, .08);
    font-size: 14px;
}
.arquivo-escolhido.is-visivel { display: flex; }
.arquivo-escolhido__nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arquivo-escolhido__peso { color: var(--texto-fraco); font-size: 12.5px; flex: none; }
.arquivo-escolhido button {
    flex: none;
    background: none; border: 0; padding: 4px;
    color: var(--texto-fraco); cursor: pointer; font-size: 18px; line-height: 1;
}
.arquivo-escolhido button:hover { color: var(--erro); }

.separador-ou {
    display: flex; align-items: center; gap: 14px;
    margin: 20px 0;
    color: var(--texto-fraco);
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .16em;
}
.separador-ou::before, .separador-ou::after {
    content: ''; flex: 1; height: 1px; background: var(--border);
}

.roteiro {
    margin: 0 0 18px;
    padding: 15px 17px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: rgba(255, 177, 61, .06);
}
.roteiro strong { display: block; margin-bottom: 8px; font-size: 14.5px; }
.roteiro ol { margin: 0; padding-left: 19px; font-size: 14px; color: var(--texto-suave); }
.roteiro li { margin-bottom: 5px; }
.roteiro li:last-child { margin-bottom: 0; }

/* --------------------------------------------------------- envio / erros */

.envio { margin-top: 26px; }

.progresso-envio { display: none; margin-bottom: 16px; }
.progresso-envio.is-visivel { display: block; }
.progresso-envio__trilha {
    height: 8px;
    border-radius: 99px;
    background: rgba(255,255,255,.09);
    overflow: hidden;
}
.progresso-envio__barra {
    height: 100%; width: 0;
    background: var(--grad);
    border-radius: 99px;
    transition: width .25s ease;
}
.progresso-envio__texto {
    margin-top: 8px;
    font-size: 13px;
    color: var(--texto-suave);
    text-align: center;
}

.aviso {
    display: flex;
    gap: 11px;
    margin-bottom: 20px;
    padding: 14px 16px;
    border-radius: var(--r-md);
    font-size: 14.2px;
    line-height: 1.5;
}
.aviso--erro {
    border: 1px solid rgba(255, 84, 112, .45);
    background: rgba(255, 84, 112, .10);
    color: #ffc2cc;
}
.aviso--ok {
    border: 1px solid rgba(47, 217, 138, .4);
    background: rgba(47, 217, 138, .10);
    color: #b6f2d6;
}
.aviso ul { margin: 6px 0 0; padding-left: 18px; }

.campo.tem-erro input, .campo.tem-erro select, .campo.tem-erro textarea,
.campo.tem-erro .dropzone {
    border-color: var(--erro);
}
.msg-erro { display: block; margin-top: 6px; font-size: 12.8px; color: #ff8fa3; }

.contador { float: right; font-size: 12.5px; color: var(--texto-fraco); font-weight: 400; }

/* ----------------------------------------------------------------- rodapé */

.rodape {
    padding: 34px 0 44px;
    border-top: 1px solid var(--border);
    text-align: center;
    font-size: 13px;
    color: var(--texto-fraco);
}
.rodape a { color: var(--texto-suave); }

/* --------------------------------------------------------------- sucesso */

.sucesso { padding: 60px 0 40px; text-align: center; }
.sucesso__icone {
    display: grid; place-items: center;
    width: 92px; height: 92px;
    margin: 0 auto 26px;
    border-radius: 50%;
    background: var(--grad);
    box-shadow: 0 0 70px -8px rgba(255, 27, 141, .85);
    animation: entrar .6s cubic-bezier(.34, 1.56, .64, 1);
}
.sucesso__icone svg { width: 44px; height: 44px; stroke: #fff; }
@keyframes entrar {
    from { transform: scale(.4); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
}
.sucesso h1 {
    font-family: var(--fonte-titulo);
    font-size: clamp(26px, 5.4vw, 40px);
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0 0 14px;
}
.sucesso p { max-width: 520px; margin: 0 auto 12px; color: var(--texto-suave); }

.passos {
    display: grid;
    gap: 12px;
    margin: 34px 0;
    text-align: left;
}
.passo {
    display: flex;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
}
.passo__num {
    flex: none;
    display: grid; place-items: center;
    width: 26px; height: 26px;
    border-radius: 9px;
    background: var(--grad-suave);
    border: 1px solid var(--border);
    font-size: 13px;
    font-weight: 700;
}
.passo b { display: block; font-size: 14.8px; }
.passo span { font-size: 13.6px; color: var(--texto-suave); }

/* --------------------------------------------------------------- toast */

.toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: 90;
    transform: translate(-50%, 140%);
    padding: 12px 22px;
    border-radius: 999px;
    background: #ffffff;
    color: #101014;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 18px 40px -12px rgba(0,0,0,.7);
    transition: transform .32s cubic-bezier(.34, 1.4, .64, 1);
}
.toast.is-visivel { transform: translate(-50%, 0); }

/* ------------------------------------------------------------ acessível */

.sr {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}