/* =============================================================================
   ONEBYTESTORE — landing de vendas
   -----------------------------------------------------------------------------
   Uma página: apresentação, catálogo com caixas de selecção, resumo e botão
   para o WhatsApp. Escura e de inspiração cinematográfica, com a marca da
   OneByteStore (o byte de 8 quadrados) e o azul vivo no que está activo.

   Feita primeiro para o telemóvel. Sem imagens nem fontes de fora: carrega
   num instante, mesmo com dados fracos.

   Contraste: o texto dos botões azuis é escuro. Branco sobre #00A8E1 fica
   abaixo do mínimo de leitura (WCAG AA).
   ============================================================================= */

:root {
    --fundo:       #0B101B;
    --cartao:      #172233;
    --cartao-alto: #1D2B41;
    --linha:       rgba(255, 255, 255, .10);
    --linha-forte: rgba(255, 255, 255, .24);
    --texto:       #FFFFFF;
    --texto-2:     #AAB6C6;
    --azul:        #00A8E1;
    --azul-vivo:   #33BFEF;
    --no-azul:     #04121C;
    --verde:       #3DDC97;
    --ambar:       #FFC266;

    --letra: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --raio:  12px;
    --largura: 1080px;
    --margem: 16px;
    --suave: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }

body {
    margin: 0;
    background: var(--fundo);
    color: var(--texto);
    font-family: var(--letra);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
body.com-barra { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }

h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--texto); outline-offset: 3px; border-radius: 6px; }
:focus:not(:focus-visible) { outline: none; }

@media (min-width: 900px) { :root { --margem: 32px; } }

/* =============================================================================
   BOTÕES
   ============================================================================= */

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 0 22px;
    border: 0;
    border-radius: 10px;
    background: var(--azul);
    color: var(--no-azul);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s var(--suave), transform .12s var(--suave), opacity .18s;
    -webkit-tap-highlight-color: transparent;
}
.botao:hover { background: var(--azul-vivo); }
.botao:active { transform: scale(.97); }
.botao[disabled] { opacity: .4; cursor: not-allowed; transform: none; }
.botao--pequeno { min-height: 40px; padding: 0 16px; font-size: 14px; }
.botao--grande { min-height: 56px; padding: 0 28px; font-size: 17px; }
.botao__icone { width: 21px; height: 21px; flex: 0 0 auto; fill: currentColor; }

/* =============================================================================
   CABEÇALHO
   ============================================================================= */

.topo {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(11, 16, 27, .9);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--linha);
}
.topo__fila {
    max-width: var(--largura);
    height: 60px;
    margin: 0 auto;
    padding: 0 var(--margem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.logo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--texto);
    font-size: 19px;
    font-weight: 500;
    letter-spacing: -.01em;
    text-decoration: none;
    white-space: nowrap;
}
.logo strong { font-weight: 800; color: var(--azul); }
.logo__bits { width: 30px; height: 13px; flex: 0 0 auto; }
.logo__bits .b0 { fill: none; stroke: var(--texto-2); stroke-width: 1.2; }
.logo__bits .b1 { fill: var(--texto); }
.logo__bits .b1--azul { fill: var(--azul); }

/* =============================================================================
   APRESENTAÇÃO
   ============================================================================= */

.heroi {
    position: relative;
    max-width: var(--largura);
    margin: 0 auto;
    padding: 44px var(--margem) 36px;
}
.heroi::before {
    /* luz azul por trás do título, como um ecrã ligado no escuro */
    content: "";
    position: absolute;
    inset: -60px 0 auto;
    height: 460px;
    z-index: -1;
    /* closest-side: a luz apaga-se antes das bordas da caixa, sem arestas à vista */
    background: radial-gradient(closest-side at 32% 45%, rgba(0, 168, 225, .26), transparent);
    pointer-events: none;
}
.heroi__titulo {
    max-width: 14ch;
    font-size: clamp(36px, 9vw, 62px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -.03em;
}
.heroi__texto {
    max-width: 32em;
    margin: 16px 0 26px;
    color: #D3DAE4;
    font-size: clamp(17px, 2.4vw, 20px);
}
.heroi__texto strong { color: var(--texto); white-space: nowrap; }
@media (max-width: 520px) { .heroi .botao { display: flex; width: 100%; } }

.selos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}
.selos li {
    padding: 5px 12px;
    border: 1px solid var(--linha-forte);
    border-radius: 999px;
    color: var(--texto-2);
    font-size: 13px;
    font-weight: 700;
}

/* =============================================================================
   CATÁLOGO
   ============================================================================= */

.catalogo { max-width: var(--largura); margin: 0 auto; padding: 18px var(--margem) 10px; }
.catalogo:focus { outline: none; }
.catalogo__titulo { font-size: clamp(24px, 4.5vw, 32px); font-weight: 800; letter-spacing: -.02em; }
.catalogo__sub { margin-top: 4px; color: var(--texto-2); }
.catalogo__sub strong { color: var(--texto); }

.grupo { margin-top: 28px; }
.grupo__titulo {
    margin-bottom: 12px;
    color: var(--azul);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.grupo__lista {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 640px)  { .grupo__lista { grid-template-columns: repeat(2, 1fr); align-items: start; } }

/* ---------- cartão de serviço ---------- */

.servico {
    border-radius: var(--raio);
    background: var(--cartao);
    box-shadow: 0 0 0 1px var(--linha);
    transition: box-shadow .2s var(--suave), background-color .2s var(--suave), transform .2s var(--suave);
}
.servico:hover { box-shadow: 0 0 0 1px rgba(255,255,255,.28); }
.servico.escolhido {
    background: var(--cartao-alto);
    box-shadow: 0 0 0 2px var(--azul), 0 14px 30px -14px rgba(0, 168, 225, .55);
}

/* a parte de cima é a etiqueta da caixa: tocar em qualquer lado marca/desmarca */
.servico__cabeca {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 76px;
    padding: 14px 16px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.servico__caixa-real { position: absolute; opacity: 0; width: 1px; height: 1px; }

.marca {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--cor, #24324A);
    color: #fff;
    font-size: 19px;
    font-weight: 900;
    letter-spacing: -.03em;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
    overflow: hidden;
}
.marca--longa { font-size: 13px; letter-spacing: -.01em; }
.marca img { width: 70%; height: 70%; object-fit: contain; }

.servico__texto { flex: 1 1 auto; min-width: 0; }
.servico__nome { display: block; font-size: 17px; font-weight: 800; line-height: 1.25; }
.servico__desde { display: block; color: var(--texto-2); font-size: 14px; }
.servico__desde strong { color: var(--texto); font-size: 16px; font-weight: 800; }

/* a caixa que se vê */
.caixa {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: 2px solid var(--linha-forte);
    border-radius: 8px;
    transition: background-color .15s, border-color .15s, transform .15s var(--suave);
}
.servico__caixa-real:checked ~ .caixa {
    border-color: var(--azul);
    background: var(--azul)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 12.5l4.2 4.2L18.5 8' fill='none' stroke='%2304121C' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        center / 18px no-repeat;
    transform: scale(1.06);
}
.servico__caixa-real:focus-visible ~ .caixa { outline: 3px solid var(--texto); outline-offset: 3px; }

/* ---------- pacotes, só depois de marcar ---------- */

.pacotes {
    margin: 0;
    padding: 2px 16px 16px;
    border: 0;
    animation: abrir .25s var(--suave) both;
}
@keyframes abrir { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.pacotes__titulo {
    float: left;                     /* faz a <legend> comportar-se como um bloco normal */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    margin-bottom: 10px;
    padding: 12px 0 0;
    border-top: 1px solid var(--linha);
    color: var(--texto-2);
    font-size: 14px;
    font-weight: 700;
}
.duracao {
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(0, 168, 225, .15);
    color: var(--azul-vivo);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}
.pacotes__falta { color: var(--ambar); }

.pacotes__titulo + * { clear: both; }
.pacote { position: relative; display: block; cursor: pointer; }
.pacote + .pacote { margin-top: 8px; }
.pacote input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pacote__caixa {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 10px 14px;
    border: 2px solid var(--linha-forte);
    border-radius: 10px;
    transition: border-color .15s, background-color .15s;
}
.pacote:hover .pacote__caixa { border-color: rgba(255,255,255,.45); }
.pacote input:checked + .pacote__caixa { border-color: var(--azul); background: rgba(0, 168, 225, .12); }
.pacote input:focus-visible + .pacote__caixa { outline: 3px solid var(--texto); outline-offset: 2px; }
.pacote__ponto {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border: 2px solid var(--linha-forte);
    border-radius: 50%;
    transition: border-color .15s, box-shadow .15s;
}
.pacote input:checked + .pacote__caixa .pacote__ponto { border-color: var(--azul); box-shadow: inset 0 0 0 4px var(--cartao-alto), inset 0 0 0 10px var(--azul); }
.pacote__info { flex: 1 1 auto; min-width: 0; }
.pacote__nome { display: block; font-weight: 800; line-height: 1.3; }
.pacote__acesso { display: block; color: var(--texto-2); font-size: 14px; line-height: 1.35; }
.pacote__preco { flex: 0 0 auto; font-size: 17px; font-weight: 800; white-space: nowrap; }

/* serviço com um só pacote: os detalhes, sem escolha */
.unico {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(0, 168, 225, .1);
    box-shadow: inset 0 0 0 1px rgba(0, 168, 225, .35);
}

/* =============================================================================
   RESUMO
   ============================================================================= */

.resumo {
    max-width: 640px;
    margin: 36px auto 0;
    padding: 22px 20px;
    border-radius: var(--raio);
    background: var(--cartao);
    box-shadow: 0 0 0 1px var(--linha);
}
@media (min-width: 680px) { .resumo { padding: 28px; } }
@media (max-width: 679px) { .resumo { margin-left: var(--margem); margin-right: var(--margem); } }
.resumo__titulo { margin-bottom: 14px; font-size: 22px; font-weight: 800; }
.resumo__vazio { color: var(--texto-2); }
.resumo__item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--linha);
}
.resumo__item:first-child { padding-top: 0; }
.resumo__item-nome { display: block; font-weight: 800; }
.resumo__item-det { display: block; color: var(--texto-2); font-size: 14px; }
.resumo__item-det--falta { color: var(--ambar); }
.resumo__item-preco { font-weight: 800; white-space: nowrap; }
.resumo__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 16px 0 18px;
}
.resumo__total span { font-weight: 700; }
.resumo__total strong { font-size: 32px; font-weight: 800; letter-spacing: -.02em; }
.resumo .botao { display: flex; width: 100%; }
.resumo__dica { margin-top: 10px; color: var(--texto-2); font-size: 14px; text-align: center; }
.resumo__dica--falta { color: var(--ambar); }

.pagamento { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--linha); }
.pagamento__titulo { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-2); }
.selos--pagamento { margin-top: 10px; }
.selos--pagamento li { color: var(--texto); background: rgba(255,255,255,.05); }
.pagamento__nota { margin-top: 12px; color: var(--texto-2); font-size: 14px; }

.aviso-sem-js { margin-top: 18px; color: var(--texto-2); }
.aviso-sem-js .botao { margin-top: 12px; }

/* =============================================================================
   BARRA FIXA (telemóvel e computador) E RODAPÉ
   ============================================================================= */

.barra {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 25;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 12px var(--margem) calc(12px + env(safe-area-inset-bottom));
    background: rgba(23, 34, 51, .97);
    border-top: 1px solid var(--linha-forte);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    animation: subir .28s var(--suave) both;
}
@keyframes subir { from { transform: translateY(100%); } to { transform: none; } }
.barra__total { flex: 1 1 auto; max-width: 420px; min-width: 0; line-height: 1.2; }
.barra__total span { display: block; color: var(--texto-2); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra__total span.falta { color: var(--ambar); }
.barra__total strong { font-size: 21px; font-weight: 800; white-space: nowrap; }
.barra .botao { flex: 0 0 auto; padding: 0 18px; }

.rodape {
    max-width: var(--largura);
    margin: 40px auto 0;
    padding: 22px var(--margem) 30px;
    border-top: 1px solid var(--linha);
    color: #7F8B9C;
    font-size: 12px;
}
.rodape p + p { margin-top: 6px; }
.rodape p:first-child { color: var(--texto-2); font-size: 14px; font-weight: 700; }

/* =============================================================================
   INTERACÇÃO — botão que pulsa, montra, guia, filtros, aviso, saltos
   ============================================================================= */

/* "Continuar no WhatsApp" pulsa quando está pronto: um anel de luz que cresce
   e se apaga a cada 2 s. Suave de propósito — piscar depressa cansa e pode
   incomodar quem é sensível a luzes. */
.botao--whatsapp { background: var(--azul); }
.botao--whatsapp:not([disabled]) { animation: pulsar 2s var(--suave) infinite; }
@keyframes pulsar {
    0%   { box-shadow: 0 0 0 0 rgba(0, 168, 225, .65); transform: scale(1); }
    40%  { box-shadow: 0 0 0 12px rgba(0, 168, 225, 0); transform: scale(1.025); }
    100% { box-shadow: 0 0 0 0 rgba(0, 168, 225, 0); transform: scale(1); }
}

/* cabeçalho: dúvidas */
.topo__accoes { display: flex; align-items: center; gap: 8px; }
.duvidas {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 40px;
    min-width: 40px;
    padding: 0 12px;
    border: 1px solid var(--linha-forte);
    border-radius: 10px;
    color: var(--texto);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .18s, border-color .18s;
}
.duvidas:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.45); }
.duvidas .botao__icone { width: 18px; height: 18px; }
@media (max-width: 419px) { .duvidas { padding: 0; } .duvidas__texto { display: none; } }

/* montra de logótipos no topo */
.montra { margin-top: 26px; }
.montra__titulo { margin-bottom: 10px; color: var(--texto-2); font-size: 13px; font-weight: 700; }
.montra__lista {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.montra__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 64px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--texto-2);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.montra__item .marca { width: 50px; height: 50px; transition: transform .2s var(--suave), box-shadow .2s; }
.montra__item:hover .marca { transform: translateY(-3px); }
.montra__item:active .marca { transform: scale(.92); }
.montra__item.activo { color: var(--texto); }
.montra__item.activo .marca { box-shadow: 0 0 0 3px var(--fundo), 0 0 0 5px var(--azul); }
.montra__item.activo::after {
    content: "";
    position: absolute;
    top: -4px;
    right: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--azul)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%2304121C' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        center / 12px no-repeat;
    box-shadow: 0 0 0 2px var(--fundo);
}

/* guia de 3 passos */
.guia {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}
.guia li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 6px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    color: var(--texto-2);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
}
.guia__n {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 168, 225, .16);
    color: var(--azul);
    font-size: 13px;
    font-weight: 900;
}

/* filtros por grupo */
.filtros {
    display: flex;
    gap: 8px;
    margin: 18px calc(var(--margem) * -1) 0;
    padding: 2px var(--margem) 4px;
    overflow-x: auto;
    scrollbar-width: none;
}
.filtros::-webkit-scrollbar { display: none; }
.filtro {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid var(--linha-forte);
    border-radius: 999px;
    background: transparent;
    color: var(--texto-2);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .18s, color .18s, border-color .18s;
}
.filtro:hover { color: var(--texto); border-color: rgba(255,255,255,.45); }
.filtro[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); color: var(--no-azul); }
.grupo.escondido { display: none; }

/* cartões: resposta ao toque */
.servico__cabeca:active { transform: scale(.99); }
.servico { scroll-margin-top: 80px; }
.pacote__barato {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(61, 220, 151, .15);
    color: var(--verde);
    font-size: 11px;
    font-weight: 800;
    vertical-align: 2px;
}

/* resumo: tirar um serviço, limpar tudo */
.resumo__cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.resumo__cabeca .resumo__titulo { margin-bottom: 0; }
.ligacao-botao {
    padding: 6px 0;
    border: 0;
    background: none;
    color: var(--texto-2);
    font-size: 14px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.ligacao-botao:hover { color: var(--texto); }
.resumo__item { align-items: center; gap: 12px; }
.resumo__item .marca { width: 34px; height: 34px; border-radius: 8px; font-size: 13px; }
.resumo__item-meio { flex: 1 1 auto; min-width: 0; }
.resumo__fim { display: flex; align-items: center; gap: 6px; }
.tirar {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--texto-2);
    cursor: pointer;
    transition: background-color .18s, color .18s;
}
.tirar:hover { background: rgba(255,255,255,.08); color: var(--texto); }
.tirar svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; fill: none; }

/* barra: logótipos do que está escolhido */
.barra__logos { display: inline-flex; flex: 0 0 auto; }
.barra__logos .marca {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    font-size: 11px;
    box-shadow: 0 0 0 2px var(--cartao);
}
.barra__logos .marca + .marca { margin-left: -9px; }
.barra__mais {
    width: 30px;
    height: 30px;
    margin-left: -9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--cartao-alto);
    color: var(--texto);
    font-size: 11px;
    font-weight: 800;
    box-shadow: 0 0 0 2px var(--cartao);
}
@media (max-width: 359px) { .barra__logos { display: none; } }

/* confiança, por baixo da montra */
.confianca {
    display: grid;
    gap: 10px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 760px) { .confianca { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
.confianca li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .04);
    box-shadow: inset 0 0 0 1px var(--linha);
    color: var(--texto-2);
    font-size: 14px;
    line-height: 1.4;
}
.confianca strong { display: block; color: var(--texto); font-size: 15px; }
.confianca__icone {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    margin-top: 1px;
    fill: none;
    stroke: var(--verde);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* entrada suave dos cartões ao descer a página (só com JavaScript: sem ele, ficam visíveis) */
.revelar {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .45s var(--suave), transform .45s var(--suave),
                box-shadow .2s var(--suave), background-color .2s var(--suave);
}
.revelar.visivel { opacity: 1; transform: none; }

/* número de pacotes ao lado do preço */
.servico__pacotes { white-space: nowrap; }

/* computador: catálogo à esquerda, pedido sempre à vista à direita */
@media (min-width: 1000px) {
    main {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 360px;
        column-gap: 36px;
        max-width: var(--largura);
        margin: 0 auto;
        padding: 0 var(--margem);
    }
    .heroi { grid-column: 1 / -1; width: 100%; padding-left: 0; padding-right: 0; }
    .catalogo { grid-column: 1; width: 100%; padding-left: 0; padding-right: 0; }
    .grupo__lista { grid-template-columns: repeat(2, 1fr); }
    .resumo {
        grid-column: 2;
        align-self: start;
        position: sticky;
        top: 84px;
        width: 100%;
        margin: 26px 0 0;
        padding: 24px;
    }
    .filtros { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
}

/* textos que só cabem em ecrãs mais largos */
@media (max-width: 479px) { .so-largo { display: none; } }

/* o total dá um salto quando muda */
.salto { animation: salto .35s var(--suave); display: inline-block; }
@keyframes salto { 40% { transform: scale(1.12); color: var(--azul-vivo); } }

/* aviso curto */
.aviso {
    position: fixed;
    left: 50%;
    bottom: 22px;
    z-index: 40;
    max-width: calc(100% - 32px);
    padding: 11px 16px;
    border-radius: 10px;
    background: var(--texto);
    color: var(--no-azul);
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
    transform: translateX(-50%);
    animation: aviso .25s var(--suave) both;
}
body.com-barra .aviso { bottom: calc(96px + env(safe-area-inset-bottom)); }
@keyframes aviso { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

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