/* =====================================================================
   PÁGINA DE COTAÇÃO — o estilo (22/09/2026).

   Tudo debaixo de `.cot`, sempre. O tema desta casa dá regras a todos os
   `<span>` dos formulários e já partiu peças por isso; e o `.container`
   dele tem pseudo-elementos de clearfix que viram itens de grelha quando
   alguém lhe põe `display:grid` por cima. Não se toca no tema, e não se
   deixa o tema tocar aqui.

   AS CORES SÃO AS DA CASA: preto, branco, os dois vermelhos (#d60037 e
   #af2835) e o azul (#00acc8). O azul entra pouco e de propósito -- é o
   que diz «isto está feito», e por isso tem de ser raro.

   MOVIMENTO REDUZIDO: reduzir não é apagar. Quem pede menos movimento
   continua a ver o que mudou -- só deixa de haver deslize. E não espera
   mais tempo por isso: o dono tem essa preferência ligada e já sentiu,
   duas vezes, o castigo de lhe alongarem as animações.
   ===================================================================== */

/* ---------------------------------------------------------------------
   O `hidden` GANHA SEMPRE, nesta página.

   Hoje caí três vezes na mesma pedra: `.cot-etapa { display: grid }`,
   `.cot-item { display: grid }` e outra antes. O atributo `[hidden]` e
   uma classe têm a MESMA força, e ganha quem vier depois na folha -- por
   isso escondia-se um elemento com `el.hidden = true` e ele continuava à
   vista, sem erro nenhum a dizer porquê.

   Uma linha acaba com a família inteira, e com as que eu ainda não
   escrevi. O `!important` aqui não é preguiça: `hidden` quer dizer
   escondido, e nada nesta página tem o direito de discordar. */
.cot [hidden] { display: none !important; }

.cot {
  --vm: #d60037; --vm2: #af2835; --az: #00acc8;
  --tinta: #101820; --tinta2: #3a4552; --ténue: #7d8794;
  --risco: #e4e8ec; --risco2: #f0f3f6; --papel: #fff; --fundo: #f7f9fb;
  max-width: 1140px; margin: 0 auto; padding: 0 15px 72px;
}

/* ---------------------------------------------------- a barra do topo */
/* A BARRA DAS ETAPAS DEIXOU DE SER COLADA — 23/09/2026.

   Era `sticky: top 0` e ia parar DEBAIXO do menu do site, que também fica
   no topo: colava-se num sítio onde não se via. Podia medir-se o cromo e
   descontá-lo, como se faz no menu lateral das legais -- mas com dois
   passos e o documento colado à direita, esta barra não precisa de
   acompanhar ninguém. Lê-se uma vez, no princípio, e fica.

   Uma peça que não cola não tem como colar no sítio errado. */
.cot-rail {
  margin: 0 0 24px; padding: 0 0 14px;
  border-bottom: 1px solid var(--risco);
}
.cot-rail-in { max-width: 1110px; margin: 0 auto; display: flex; align-items: center; gap: 10px; }
.cot-p { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.cot-p b { width: 23px; height: 23px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
  background: var(--risco2); color: var(--ténue); border: 1px solid var(--risco);
  transition: background .28s ease, color .28s ease, border-color .28s ease; }
.cot-p span { font-size: 13.5px; color: var(--ténue); font-weight: 600;
  transition: color .28s ease; }
.cot-p-on b { background: linear-gradient(135deg, var(--vm), var(--vm2)); color: #fff;
  border-color: transparent; box-shadow: 0 3px 10px rgba(175,40,53,.3); }
.cot-p-on span { color: var(--tinta); }
.cot-p-ok b { background: var(--az); border-color: transparent; color: #fff; }
.cot-p-ok b::before { content: '✓'; font-size: 13px; }
.cot-p-ok b i { display: none; }
.cot-fio { flex: 1 1 auto; height: 2px; background: var(--risco2); border-radius: 2px;
  position: relative; overflow: hidden; min-width: 14px; }
.cot-fio i { position: absolute; inset: 0 100% 0 0; background: var(--az);
  transition: right .45s cubic-bezier(.22,.61,.36,1); }
.cot-fio-on i { right: 0; }
@media (max-width: 720px) { .cot-p span { display: none; } }

/* -------------------------------------------------------- os cartões */
/* `min-width: 0` NOS ITENS DA GRELHA, e não é detalhe.
   Um item de grelha tem `min-width: auto` por omissão: não encolhe abaixo
   do conteúdo dele. O texto do «inclui» de cada produto leva
   `white-space: nowrap`, e um nome comprido esticava a coluna -- medido,
   o cartão ia a 1450px dentro de um contentor de 1140, e a barra do topo
   ia atrás dele. A página não rolava de lado (o tema corta), por isso o
   que se via era o conteúdo cortado à direita, sem nada a explicar. */
.cot-passos { display: grid; gap: 20px; }
.cot-passos > * { min-width: 0; }
.cot-item > * { min-width: 0; }
.cot-cx {
  background: var(--papel); border: 1px solid var(--risco); border-radius: 18px;
  padding: 28px 28px 24px; position: relative;
  box-shadow: 0 1px 2px rgba(16,24,32,.03), 0 10px 34px -22px rgba(16,24,32,.28);
  transition: box-shadow .3s ease, border-color .3s ease;
}
.cot-cx:focus-within { border-color: #cfd6de;
  box-shadow: 0 1px 2px rgba(16,24,32,.04), 0 18px 46px -24px rgba(16,24,32,.34); }
.cot-cx > h2 { margin: 0 0 3px; font-size: 20px; font-weight: 700; color: var(--tinta);
  letter-spacing: -.012em; display: flex; align-items: center; gap: 11px; }
.cot-n { flex: 0 0 auto; width: 27px; height: 27px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--vm), var(--vm2));
  box-shadow: 0 4px 12px -3px rgba(175,40,53,.5); }
.cot-cx > p.cot-ajuda { margin: 0 0 20px; font-size: 14.5px; color: var(--ténue);
  padding-left: 38px; }

/* --------------------------------------------------------- os campos */
.cot-grelha { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 16px; }
.cot-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cot-campo.cot-largo { grid-column: 1 / -1; }
.cot-campo label { font-size: 13px; font-weight: 600; color: var(--tinta2); }
.cot-campo .cot-nota { font-size: 12.5px; color: var(--ténue); font-weight: 400; line-height: 1.5; }
.cot-campo input, .cot-campo select, .cot-campo textarea {
  font: inherit; font-size: 15px; padding: 12px 14px; border: 1px solid var(--risco);
  border-radius: 11px; background: var(--papel); color: #23303d; width: 100%;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.cot-campo input::placeholder, .cot-campo textarea::placeholder { color: #b6bfc9; }
.cot-campo input:hover, .cot-campo select:hover, .cot-campo textarea:hover { border-color: #ccd4dc; }
.cot-campo input:focus, .cot-campo select:focus, .cot-campo textarea:focus {
  outline: 0; border-color: var(--vm2); background: #fff;
  box-shadow: 0 0 0 3.5px rgba(175,40,53,.13); }
.cot-campo textarea { min-height: 104px; resize: vertical; line-height: 1.55; }
/* o visto verde: aparece quando o campo está preenchido e válido */
.cot-campo.cot-feito > label::after { content: '✓'; color: var(--az); font-weight: 700;
  margin-left: 6px; animation: cot-pop .3s cubic-bezier(.34,1.56,.64,1); }
@keyframes cot-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }

/* ------------------------------------------------------- o catálogo */
/* ---------------------------------------- categorias, procura e lista */
/* Os `<details>` por categoria saíram a 23/09/2026: oito categorias
   abertas ao mesmo tempo são 41 produtos de uma vez, e quem vem pedir
   alojamento passava por onze servidores dedicados para lá chegar.
   Agora é uma categoria de cada vez, com procura por cima. */
/* e a barra das categorias pela mesma razão: colava a 52px, que era a
   conta de uma barra que já não existe */
.cot-cat-barra { position: relative; z-index: 12; margin: 0 0 18px;
  padding: 14px 0 12px; background: linear-gradient(var(--papel) 78%, rgba(255,255,255,0)); }
.cot-busca { position: relative; margin-bottom: 12px; }
.cot-busca-lupa { position: absolute; left: 15px; top: 50%; width: 13px; height: 13px;
  margin-top: -8px; border: 2px solid var(--ténue); border-radius: 50%; pointer-events: none; }
.cot-busca-lupa::after { content: ''; position: absolute; right: -5px; bottom: -4px;
  width: 6px; height: 2px; background: var(--ténue); transform: rotate(45deg); border-radius: 2px; }
.cot-busca-campo { width: 100%; padding: 13px 42px 13px 40px;
  border: 1px solid var(--risco); border-radius: 12px; background: var(--papel);
  font: inherit; font-size: 15px; color: var(--tinta);
  transition: border-color .18s ease, box-shadow .18s ease; }
.cot-busca-campo::placeholder { color: var(--ténue); }
.cot-busca-campo:focus { outline: none; border-color: var(--vm2);
  box-shadow: 0 0 0 3px rgba(175,40,53,.10); }
.cot-busca-limpa { position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
  background: var(--risco2); cursor: pointer; }
.cot-busca-limpa::before, .cot-busca-limpa::after { content: ''; position: absolute;
  left: 9px; top: 13px; width: 10px; height: 2px; background: var(--tinta2); border-radius: 2px; }
.cot-busca-limpa::before { transform: rotate(45deg); }
.cot-busca-limpa::after { transform: rotate(-45deg); }
.cot-busca-limpa:hover { background: #e8ecf1; }

.cot-cats { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.cot-cats::-webkit-scrollbar { height: 4px; }
.cot-cats::-webkit-scrollbar-thumb { background: var(--risco); border-radius: 4px; }
.cot-cat { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border: 1px solid var(--risco); border-radius: 99px;
  background: var(--papel); font: inherit; font-size: 14px; font-weight: 600;
  color: var(--tinta2); cursor: pointer; white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.cot-cat:hover { border-color: #c9d2db; background: var(--fundo); }
.cot-cat.on { background: linear-gradient(135deg, var(--vm), var(--vm2));
  border-color: transparent; color: #fff; box-shadow: 0 4px 14px rgba(175,40,53,.28); }
.cot-cat-n { min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px;
  background: var(--az); color: #fff; font-size: 11.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; }
.cot-cat.on .cot-cat-n { background: rgba(255,255,255,.26); }
.cot-cat-esc .cot-cat-n { background: var(--az); }

.cot-grupo { margin: 0 0 8px; }
.cot-grupo-tit { margin: 0 0 12px; font-size: 19px; font-weight: 800; color: var(--tinta);
  letter-spacing: -.01em; }
.cot-sem-nada { margin: 26px 0; padding: 26px 20px; border: 1px dashed var(--risco);
  border-radius: 14px; text-align: center; color: var(--ténue); font-size: 15px; }
.cot-lista { padding: 4px 12px 14px; }

.cot-item { display: grid; grid-template-columns: 1fr 148px 104px 124px; gap: 12px;
  align-items: center; padding: 11px 10px; border-radius: 11px;
  border-bottom: 1px solid var(--risco2);
  transition: background .22s ease, box-shadow .22s ease; }
.cot-item:last-child { border-bottom: 0; }
.cot-item:hover { background: var(--fundo); }
.cot-item .cot-nome { font-size: 15px; color: var(--tinta); font-weight: 600; min-width: 0; }
.cot-item .cot-inc { display: block; font-size: 12.5px; color: var(--ténue); font-weight: 400;
  margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cot-item select { font-size: 14px; padding: 8px 10px; border: 1px solid var(--risco);
  border-radius: 9px; width: 100%; background: var(--papel); }
.cot-item select:focus { outline: 0; border-color: var(--vm2);
  box-shadow: 0 0 0 3px rgba(175,40,53,.12); }
.cot-item .cot-valor { text-align: right; font-variant-numeric: tabular-nums; font-size: 15px;
  color: var(--ténue); white-space: nowrap; }
.cot-item.cot-on { background: linear-gradient(95deg, rgba(214,0,55,.045), rgba(175,40,53,.03));
  box-shadow: inset 3px 0 0 var(--vm2); }
.cot-item.cot-on .cot-valor { color: var(--tinta); font-weight: 800; }

/* o contador: menos / número / mais, em vez de um `number` cru */
.cot-qtd { display: flex; align-items: center; border: 1px solid var(--risco);
  border-radius: 9px; overflow: hidden; background: var(--papel); }
.cot-qtd button { font: inherit; font-size: 17px; line-height: 1; width: 30px; height: 34px;
  border: 0; background: transparent; color: var(--ténue); cursor: pointer;
  transition: background .18s ease, color .18s ease; }
.cot-qtd button:hover { background: var(--risco2); color: var(--vm2); }
.cot-qtd button:disabled { opacity: .35; cursor: not-allowed; background: transparent; }
.cot-qtd input { width: 40px; text-align: center; border: 0; font: inherit; font-size: 14.5px;
  font-variant-numeric: tabular-nums; padding: 7px 0; -moz-appearance: textfield; }
.cot-qtd input::-webkit-outer-spin-button, .cot-qtd input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0; }
.cot-qtd input:focus { outline: 0; }
.cot-qtd:focus-within { border-color: var(--vm2); box-shadow: 0 0 0 3px rgba(175,40,53,.12); }

/* ---------------------------------------------- o resumo que segue */
.cot-resumo { position: sticky; bottom: 14px; z-index: 20; margin-top: 22px;
  background: var(--papel); border: 1px solid var(--risco); border-radius: 16px;
  padding: 16px 20px; box-shadow: 0 -2px 10px rgba(16,24,32,.04), 0 16px 40px -20px rgba(16,24,32,.4);
  display: grid; grid-template-columns: 1fr auto; gap: 8px 20px; align-items: center; }
.cot-linhas { display: grid; gap: 3px; min-width: 0; }
.cot-linhas div { display: flex; justify-content: space-between; gap: 18px;
  font-size: 14px; color: var(--tinta2); }
.cot-linhas .cot-t { border-top: 1.5px solid var(--risco); margin-top: 5px; padding-top: 7px;
  font-size: 20px; font-weight: 800; color: var(--tinta); }
.cot-linhas .cot-t span:last-child { font-variant-numeric: tabular-nums; }
.cot-vazio { color: var(--ténue); font-size: 14px; margin: 0; }
.cot-resumo .cot-bt { grid-row: 1 / -1; grid-column: 2; }
@media (max-width: 680px) {
  .cot-resumo { grid-template-columns: 1fr; }
  .cot-resumo .cot-bt { grid-row: auto; grid-column: 1; width: 100%; }
}

/* ------------------------------------------------------------ botões */
.cot-bt { font: inherit; font-size: 15.5px; font-weight: 700; color: #fff; border: 0;
  background: linear-gradient(120deg, var(--vm), var(--vm2)); padding: 15px 32px;
  border-radius: 999px; cursor: pointer; white-space: nowrap;
  box-shadow: 0 10px 24px -8px rgba(175,40,53,.6);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, filter .18s ease; }
.cot-bt:hover:not([disabled]) { transform: translateY(-2px); filter: brightness(1.05);
  box-shadow: 0 16px 30px -10px rgba(175,40,53,.66); }
.cot-bt:active:not([disabled]) { transform: translateY(0); }
.cot-bt[disabled] { opacity: .42; cursor: not-allowed; box-shadow: none; filter: grayscale(.3); }
.cot-bt:focus-visible { outline: 3px solid var(--az); outline-offset: 3px; }

/* ------------------------------------------------- avisos e rodapé */
.cot-aviso { display: flex; flex-wrap: wrap; gap: 11px; align-items: center;
  background: linear-gradient(95deg, #fdf3f5, #fff); border: 1px solid #f3dde1;
  border-left: 3px solid var(--vm2); border-radius: 0 12px 12px 0;
  padding: 12px 17px; margin: 0 0 20px; font-size: 14px; color: var(--tinta2); }
.cot-apagar { font: inherit; font-size: 13.5px; background: var(--papel);
  border: 1px solid var(--risco); border-radius: 999px; padding: 6px 15px;
  cursor: pointer; color: var(--tinta2); transition: border-color .2s ease, color .2s ease; }
.cot-apagar:hover { border-color: var(--vm2); color: var(--vm2); }
.cot-legal { font-size: 13px; color: var(--ténue); max-width: 62ch; margin: 14px 0 0;
  line-height: 1.6; }
.cot-erro { color: var(--vm2); font-size: 14.5px; font-weight: 600; }

/* A ENTRADA DOS CARTÕES vive agora num sítio só, mais abaixo
   (`.cot-porentrar` + `.cot-entra`). O bloco que estava aqui punha
   `animation: … both` em TODOS os `.cot-cx` sem ninguém a destapá-los --
   e a seguir o outro sistema punha-lhes a dele por cima. Dois motores a
   animar o mesmo elemento: o que se via dependia de qual acabasse
   primeiro, e num separador escondido nenhum acabava. */

@media (prefers-reduced-motion: reduce) {
  /* REDUZIR NÃO É APAGAR: a entrada continua a ver-se, só deixa de
     deslizar. E NÃO fica mais lenta -- quem quer menos movimento não
     quer esperar mais. */
  .cot-cx, .cot-rail { animation: cot-aparece .3s ease both; }
  @keyframes cot-aparece { from { opacity: 0; } to { opacity: 1; } }
  .cot-bt:hover:not([disabled]) { transform: none; }
  .cot-fio i, .cot-seta, .cot-conta, .cot-p b, .cot-p span { transition-duration: .01ms; }
}

/* ----------------------------------------------------- no telemóvel */
@media (max-width: 760px) {
  .cot-cx { padding: 22px 18px 20px; border-radius: 15px; }
  .cot-cx > p.cot-ajuda { padding-left: 0; }
  .cot-item { grid-template-columns: 1fr auto; gap: 9px 12px; }
  .cot-item .cot-nome { grid-column: 1 / -1; }
  .cot-item select { grid-column: 1; }
  .cot-item .cot-valor { text-align: right; }
  .cot-qtd { grid-column: 2; }
}

/* ===== consultar o estado (23/09/2026) ===== */
/* A PORTA DA CONSULTA — 23/09/2026.
   Estava uma ligação sublinhada a encarnado, solta por cima do
   formulário: parecia texto que tinha ficado para trás, não um botão.
   Passa a ser uma barra com ar de coisa em que se carrega, na mesma
   família das caixas da página -- e continua discreta, porque nove em
   cada dez pessoas que aqui chegam vêm PEDIR, não consultar. */
.cot-estado { margin: 0 0 22px; }
.cot-estado-abre {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 13px 18px; border: 1px solid var(--risco); border-radius: 13px;
  background: var(--papel); cursor: pointer; text-align: left;
  font: inherit; font-size: 14.5px; color: var(--tinta2);
  box-shadow: 0 1px 2px rgba(16,24,32,.03);
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
/* o papel com a lupa, à esquerda */
.cot-estado-abre::before {
  content: ''; flex: 0 0 auto; width: 17px; height: 20px;
  border: 1.8px solid var(--vm2); border-radius: 3px 3px 3px 3px;
  box-shadow: inset 0 -7px 0 -5px var(--vm2), inset 0 -3px 0 -1.4px var(--vm2);
}
.cot-estado-abre::after {
  content: ''; margin-left: auto; flex: 0 0 auto;
  width: 8px; height: 8px;
  border-right: 2px solid var(--ténue); border-bottom: 2px solid var(--ténue);
  transform: rotate(-45deg);
  transition: transform .2s ease, border-color .2s ease;
}
.cot-estado-abre:hover { border-color: var(--vm2); background: var(--fundo);
  box-shadow: 0 4px 16px -6px rgba(175,40,53,.28); }
.cot-estado-abre:hover::after { transform: rotate(-45deg) translate(2px, 2px);
  border-color: var(--vm2); }
.cot-estado-abre:focus-visible { outline: 2px solid var(--vm2); outline-offset: 2px; }
.cot-estado-abre b { font-weight: 700; color: var(--tinta); }
.cot-estado-cx {
  background: #fff; border: 1px solid #e3e8ee; border-radius: 14px;
  padding: 26px 26px 22px; box-shadow: 0 1px 2px rgba(35, 48, 61, .05);
}
.cot-estado-cx h2 { margin: 0 0 6px; font-size: 22px; }
.cot-estado-accoes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 6px; }
.cot-estado-fecha {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 14.5px; color: #5a6672;
  text-decoration: underline; text-underline-offset: 3px;
}
.cot-estado-r { margin-top: 18px; padding: 16px 18px; border-radius: 12px; font-size: 15px; line-height: 1.55; }
.cot-estado-r p { margin: 6px 0 0; }
.cot-estado-r strong { font-size: 17px; }
.cot-estado-bom { background: #f2f7f3; border: 1px solid #cfe3d5; color: #23303d; }
.cot-estado-mau { background: #fdf3f4; border: 1px solid #f0d3d6; color: #23303d; }
.cot-estado-pe { color: #5a6672; font-size: 13.5px; }

/* =====================================================================
   ANIMAÇÃO — 23/09/2026, a pedido do dono.

   Três regras que esta casa já aprendeu e que se repetem aqui:

   1. NADA COMEÇA INVISÍVEL SEM REDE. O que entra começa em `opacity:0`
      só dentro da classe que o JS põe depois de arrancar. Se o JS não
      correr, a página fica visível — uma animação que falha e deixa a
      página em branco é pior do que animação nenhuma.
   2. `prefers-reduced-motion` desliga tudo, e o dono TEM ISSO LIGADO no
      navegador dele: é por isso que ele diz «não vejo a animação». A
      chave `?rlxanima=1` força-as para se poderem ver.
   3. NUNCA `!important` na altura nem na opacidade dos elementos que
      animam — já matou uma animação nesta casa.
   ===================================================================== */

/* ESCONDE-SE ELEMENTO A ELEMENTO, e não pela classe da página.

   Tinha-o escrito ao contrário -- `.cot-anima .cot-cx { opacity: 0 }` --
   e medi três caixas do formulário que o observador nunca marcava: ficavam
   invisíveis para sempre a quem não tem movimento reduzido. A regra da
   casa estava escrita duas linhas acima e eu quebrei-a na linha seguinte.

   Agora o JS põe `cot-porentrar` em cada elemento ANTES de o observar, e
   tira-o quando ele entra -- e há um temporizador que destapa o que
   sobrar. Quem falhar, aparece; ninguém fica escondido por uma animação
   que não correu. */
.cot-porentrar {
  opacity: 0;
  transform: translateY(14px);
}
.cot-anima .cot-entra {
  animation: cot-sobe .55s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes cot-sobe {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* as caixas do formulário entram uma atrás da outra, mas pouco: um
   escalonamento longo lê-se como lentidão, não como cuidado */
.cot-anima .cot-cx:nth-of-type(1) .cot-entra { animation-delay: 0s; }
.cot-anima .cot-cx:nth-of-type(2) .cot-entra { animation-delay: .06s; }
.cot-anima .cot-cx:nth-of-type(3) .cot-entra { animation-delay: .12s; }

/* O VISTO DO CAMPO PREENCHIDO já estava definido lá em cima, com o ✓ e
   a animação `cot-pop`. Acrescentei-lhe aqui um ponto verde e, por vir
   depois, ganhava: trocava o visto da casa por uma bola que não é de
   lado nenhum. Ficou o original. */

/* a barra do progresso e os passos deslizam em vez de saltar */
.cot-rail .cot-fio i { transition: width .45s cubic-bezier(.22, .61, .36, 1); }
.cot-p b { transition: background-color .3s ease, color .3s ease, transform .3s ease; }
.cot-p-on b { transform: scale(1.08); }

/* o total muda de valor: um toque, para se dar por ele */
.cot-total-valor.cot-mudou { animation: cot-toque .45s ease-out both; }
@keyframes cot-toque {
  from { transform: scale(1); }
  45%  { transform: scale(1.06); }
  to   { transform: scale(1); }
}

/* a resposta da consulta do estado desdobra-se */
.cot-estado-r { animation: cot-abre .35s ease-out both; }
@keyframes cot-abre {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* os cartões de produto reagem ao rato sem dar saltos de altura */
.cot-item { transition: border-color .2s ease, box-shadow .25s ease, background .2s ease; }
.cot-item:hover { border-color: #ccd5de; box-shadow: 0 4px 16px rgba(35, 48, 61, .07); }

/* ===== e desliga tudo para quem pediu menos movimento ===== */
@media (prefers-reduced-motion: reduce) {
  .cot-porentrar { opacity: 1; transform: none; }
  .cot-anima .cot-entra,
  .cot-estado-r,
  .cot-total-valor.cot-mudou { animation: none; }
  .cot-campo.cot-feito > label::after { animation: none; }
  .cot-rail .cot-fio i, .cot-p b, .cot-item, .cot-cat { transition: none; }
  .cot-item:hover { box-shadow: none; }
}
/* a chave `?rlxanima=1` volta a ligá-las, para se poderem ver */
@media (prefers-reduced-motion: reduce) {
  .rlx-anima-on .cot-porentrar { opacity: 0; transform: translateY(14px); }
  .rlx-anima-on .cot-anima .cot-entra { animation: cot-sobe .55s cubic-bezier(.22,.61,.36,1) both; }
  .rlx-anima-on .cot-estado-r { animation: cot-abre .35s ease-out both; }
  .rlx-anima-on .cot-item { transition: border-color .2s ease, box-shadow .25s ease; }
  .rlx-anima-on .cot-item:hover { box-shadow: 0 4px 16px rgba(35,48,61,.07); }
}

/* =====================================================================
   A CAIXA COM PROCURA (23/09/2026)

   Veste um `<select>` que continua lá dentro a guardar o valor. Ele fica
   por cima do botão, transparente e sem rato: assim o navegador ainda o
   sabe focar para mostrar o aviso de «preencha este campo» -- um
   `display:none` tirava-lhe isso e o formulário recusava-se a submeter
   sem dizer porquê.
   ===================================================================== */
.cot-esc { position: relative; }
.cot-esc-real {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  opacity: 0; pointer-events: none; z-index: 0;
}
.cot-esc-bot {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 46px;
  padding: 10px 14px;
  background: #fff; border: 1px solid #d8dee6; border-radius: 10px;
  font: inherit; font-size: 15px; color: #23303d; text-align: left; cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.cot-esc-bot::after {
  content: ''; flex: 0 0 auto;
  width: 8px; height: 8px; margin-right: 2px;
  border-right: 2px solid var(--cot-marca, #af2835);
  border-bottom: 2px solid var(--cot-marca, #af2835);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .22s ease;
}
.cot-esc.on .cot-esc-bot::after { transform: rotate(-135deg) translateY(-2px); }
.cot-esc-bot:hover { border-color: #b9c3cf; }
.cot-esc-bot:focus-visible { outline: 2px solid var(--cot-marca, #af2835); outline-offset: 2px; }
.cot-esc.on .cot-esc-bot { border-color: var(--cot-marca, #af2835); box-shadow: 0 0 0 3px rgba(175, 40, 53, .10); }
.cot-esc-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cot-esc-nome.vazio { color: #8b96a3; }

.cot-esc-painel {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px);
  background: #fff; border: 1px solid #d8dee6; border-radius: 12px;
  box-shadow: 0 12px 34px rgba(35, 48, 61, .16);
  padding: 10px;
  animation: cot-esc-abre .18s ease-out both;
}
@keyframes cot-esc-abre {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.cot-esc-proc {
  width: 100%; padding: 9px 12px; margin-bottom: 8px;
  border: 1px solid #e3e8ee; border-radius: 8px;
  font: inherit; font-size: 14.5px;
}
.cot-esc-proc:focus { outline: none; border-color: var(--cot-marca, #af2835); }
.cot-esc-painel ul {
  list-style: none; margin: 0; padding: 0;
  max-height: 258px; overflow-y: auto;
}
.cot-esc-painel li {
  padding: 9px 12px; border-radius: 8px;
  font-size: 14.5px; line-height: 1.35; cursor: pointer;
}
.cot-esc-painel li:hover,
.cot-esc-painel li.emfoco { background: #f4f6f9; }
.cot-esc-painel li[aria-selected="true"] { color: var(--cot-marca, #af2835); font-weight: 600; }
.cot-esc-nada { color: #8b96a3; cursor: default; }
.cot-esc-nada:hover { background: none; }

@media (prefers-reduced-motion: reduce) {
  .cot-esc-painel { animation: none; }
  .cot-esc-bot, .cot-esc-bot::after { transition: none; }
}

/* =====================================================================
   AS DUAS ETAPAS (23/09/2026) e a ficha do produto.
   ===================================================================== */
.cot-etapa { display: grid; gap: 20px; }
/* `min-width: 0` NOS FILHOS, e é a MESMA armadilha que já está explicada
   lá em cima, no `.cot-passos`. Criei o `.cot-etapa` como grelha nova e
   esqueci-me da regra: um item de grelha tem `min-width: auto` e não
   encolhe abaixo do conteúdo. Medido no ecrã -- a barra das categorias, o
   grupo e cada linha de produto iam a **1768px** dentro de uma coluna de
   736, e o painel da direita ficava por baixo deles.
   Escrevi o aviso e caí nele na página seguinte. */
.cot-etapa > *, .cot-col > * { min-width: 0; }
/* O `display` DA CLASSE VENCIA O `hidden`, e a etapa 2 ficava à vista
   com o atributo posto. `[hidden]` e `.cot-etapa` têm a mesma força, e a
   minha regra vinha depois no ficheiro -- ganhava por chegar mais tarde.
   Medido: as três caixas visíveis quando só deviam ser duas. */
.cot-etapa[hidden] { display: none; }
.cot-passo-pe { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.cot-passo-nota { font-size: 13.5px; color: var(--ténue); }
.cot-voltar { align-self: start; justify-self: start;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px 9px 13px; border: 1px solid var(--risco); border-radius: 999px;
  background: var(--papel); font: inherit; font-size: 14px; font-weight: 600;
  color: var(--tinta2); cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease; }
.cot-voltar::before { content: ''; width: 7px; height: 7px;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); }
.cot-voltar:hover { border-color: var(--vm2); color: var(--vm2); background: var(--fundo); }

/* o campo que falta para se poder avançar */
.cot-campo.cot-falta > label { color: var(--vm2); }
.cot-campo.cot-falta input, .cot-campo.cot-falta select, .cot-campo.cot-falta textarea,
.cot-campo.cot-falta .cot-esc-bot {
  border-color: var(--vm2); box-shadow: 0 0 0 3px rgba(175,40,53,.14);
  animation: cot-treme .34s ease-in-out; }
@keyframes cot-treme {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* a barra das etapas responde ao rato, porque agora leva lá */
.cot-rail .cot-p { border-radius: 999px; padding: 3px 8px; margin: -3px -8px;
  transition: background .2s ease; }
.cot-rail .cot-p:hover { background: var(--risco2); }

/* ---- a ficha do produto, como na página do produto ---- */
.cot-ver { display: inline-block; margin-top: 4px; padding: 0; border: 0; background: none;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--vm2);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.cot-ver:hover { text-decoration-thickness: 2px; }
.cot-ficha { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px;
  margin: 9px 0 2px; padding: 11px 14px; border-radius: 10px;
  background: var(--fundo); border: 1px solid var(--risco2);
  animation: cot-ficha-abre .22s ease-out both; }
@keyframes cot-ficha-abre { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.cot-ficha dt { margin: 0; font-size: 12.5px; color: var(--ténue); white-space: nowrap; }
.cot-ficha dd { margin: 0; font-size: 12.5px; color: var(--tinta); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .cot-campo.cot-falta input, .cot-campo.cot-falta select, .cot-campo.cot-falta textarea,
  .cot-campo.cot-falta .cot-esc-bot { animation: none; }
  .cot-ficha { animation: none; }
  .cot-voltar, .cot-rail .cot-p { transition: none; }
}

/* =====================================================================
   O CONSELHEIRO (23/09/2026) — a caixa da IA, na etapa 2.
   Fica ANTES da lista e com um ar diferente das caixas do formulário:
   é uma ajuda, não um passo. Quem souber o que quer passa por ela.
   ===================================================================== */
.cot-ia { border: 1px solid #cfeaf0; border-radius: 18px;
  background: linear-gradient(135deg, #f2fbfd, #fff 55%);
  padding: 24px 26px 22px; }
.cot-ia-topo { display: flex; align-items: center; gap: 11px; margin-bottom: 4px; }
.cot-ia-topo h2 { margin: 0; font-size: 19px; font-weight: 800; color: var(--tinta);
  letter-spacing: -.01em; }
.cot-ia-selo { flex: 0 0 auto; padding: 4px 11px; border-radius: 999px;
  background: var(--az); color: #fff; font-size: 11.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; }
.cot-ia .cot-ajuda { padding-left: 0; margin-bottom: 14px; }
.cot-ia-accoes { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; margin-top: 12px; }
.cot-bt-claro { background: var(--az); box-shadow: 0 8px 20px -8px rgba(0,172,200,.7);
  padding: 12px 24px; font-size: 14.5px; }
.cot-bt-claro:hover:not([disabled]) { box-shadow: 0 14px 26px -10px rgba(0,172,200,.75); }

.cot-ia-r { margin-top: 16px; padding: 16px 18px; border-radius: 13px; font-size: 14.5px;
  line-height: 1.55; animation: cot-ficha-abre .25s ease-out both; }
.cot-ia-bom { background: #fff; border: 1px solid var(--risco); }
.cot-ia-mau { background: #fdf3f5; border: 1px solid #f0d3d6; }
.cot-ia-nada { background: var(--fundo); border: 1px solid var(--risco); }
.cot-ia-r p { margin: 0 0 8px; }
.cot-ia-r p:last-child { margin-bottom: 0; }
.cot-ia-tit { font-weight: 700; color: var(--tinta); }
.cot-ia-lista { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 9px; }
.cot-ia-lista li { display: grid; gap: 2px; padding: 11px 14px; border-radius: 11px;
  background: var(--fundo); border: 1px solid var(--risco2); }
.cot-ia-lista b { font-size: 15px; color: var(--tinta); }
.cot-ia-lista span { font-size: 13.5px; color: var(--tinta2); }
.cot-ia-q { font-size: 13px; color: var(--ténue); font-weight: 600; }
.cot-ia-nota { font-size: 13.5px; color: var(--ténue); }

@media (prefers-reduced-motion: reduce) { .cot-ia-r { animation: none; } }

/* =====================================================================
   DUAS COLUNAS, E AR — 23/09/2026

   > «isso estah colado com o heroi e nao pode, deve ter titulo e
   >  descricao como noutras painas, seccoes, cards»
   > «deve ser pagina corporativa empresarial»

   O que estava: uma coluna só, colada ao herói, com o nome da empresa
   numa caixa de 1100 pixéis de largura. Um campo desses não é de
   empresa nenhuma -- é um formulário de telemóvel espalhado num ecrã.

   O que passa a estar: a secção abre como todas as outras páginas da
   casa (`section-v3` > `container` > `section-title`), o formulário fica
   numa coluna de largura de leitura, e à direita o DOCUMENTO A
   FORMAR-SE. A pessoa vê o papel a nascer enquanto o preenche -- que é
   exactamente o que ela veio cá buscar.
   ===================================================================== */
.section-v3 .cot { max-width: none; padding: 0; margin: 0; }

.cot-duas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 336px;
  gap: 38px;
  align-items: start;
}
.cot-col { min-width: 0; display: grid; gap: 20px; }
@media (max-width: 1040px) {
  .cot-duas { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}

/* ---- a coluna do documento ---- */
/* A COLUNA ESTICA-SE À ALTURA DA LINHA, e sem isto o `sticky` não pega.
   Medido: a coluna tinha 662px e o painel também 662 -- exactamente a
   mesma altura. Um elemento colado precisa de FOLGA dentro do pai para
   ter por onde deslizar; sem ela desce com a página e parece que a
   propriedade não está lá. A grelha tem `align-items: start`, que é o
   que faz as duas colunas encolherem ao conteúdo; esta volta a esticar. */
.cot-lado { min-width: 0; align-self: stretch; }
/* A COLUNA SÓ COLA SE NENHUM ANTEPASSADO CORTAR. O `#main` deste tema
   tem `overflow: hidden`, e isso mata qualquer `sticky` lá dentro --
   medido aqui, e já tinha mordido nas páginas legais e na F.A.Q. A
   receita é a mesma daquelas: trocar por `clip`, que corta na mesma e
   não cria um contexto de rolamento. */
@supports (overflow: clip) {
  #main { overflow: clip; }
}
.cot-lado-fixo { position: sticky; top: 92px; display: grid; gap: 12px; }
.cot-doc {
  background: var(--papel);
  border: 1px solid var(--risco);
  border-top: 3px solid var(--vm2);
  border-radius: 4px;                 /* recto: é um documento, não um cartão */
  padding: 22px 22px 20px;
  box-shadow: 0 1px 2px rgba(16,24,32,.04), 0 18px 40px -28px rgba(16,24,32,.5);
}
.cot-doc-tipo {
  margin: 0 0 3px; font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--vm2);
}
.cot-doc-tit { margin: 0 0 16px; font-size: 19px; font-weight: 800; color: var(--tinta);
  letter-spacing: -.01em; }
.cot-doc-quem { margin: 0 0 16px; padding: 0 0 15px; border-bottom: 1px solid var(--risco2);
  display: grid; gap: 5px; }
.cot-doc-quem dt { margin: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ténue); }
.cot-doc-quem dd { margin: 0 0 6px; font-size: 14px; line-height: 1.4; color: var(--tinta); }
.cot-doc-quem dd:last-child { margin-bottom: 0; }
.cot-doc-quem dd b { font-weight: 700; }
.cot-doc .cot-linhas { margin-bottom: 16px; }
.cot-doc .cot-bt { width: 100%; text-align: center; }
.cot-doc-gar { list-style: none; margin: 16px 0 0; padding: 14px 0 0;
  border-top: 1px solid var(--risco2); display: grid; gap: 7px; }
.cot-doc-gar li { position: relative; padding-left: 21px; font-size: 12.8px;
  line-height: 1.45; color: var(--tinta2); }
.cot-doc-gar li::before {
  content: ''; position: absolute; left: 0; top: 4px;
  width: 11px; height: 6px; border-left: 2px solid var(--az);
  border-bottom: 2px solid var(--az); transform: rotate(-45deg);
}
.cot-lado .cot-legal { margin: 0; font-size: 12px; }

/* O RESUMO deixou de flutuar em baixo: mora na coluna. */
.cot-resumo { position: static; box-shadow: none; border: 0; padding: 0;
  display: block; margin: 0; background: none; }

/* ---- os campos com a largura do que levam ---- */
/* Um código postal não precisa de meio ecrã, e um NUIT também não. Dar a
   todos a mesma largura é o que faz um formulário parecer uma folha de
   cálculo em branco. */
.cot-grelha { grid-template-columns: repeat(12, 1fr); gap: 15px 16px; }
.cot-campo { grid-column: span 12; }
.cot-campo.cot-largo { grid-column: 1 / -1; }
.cot-c-4 { grid-column: span 4; }
.cot-c-6 { grid-column: span 6; }
.cot-c-3 { grid-column: span 3; }
@media (max-width: 720px) {
  .cot-c-4, .cot-c-6, .cot-c-3 { grid-column: span 12; }
}

/* ---- a nota fiscal deixa de ser um parágrafo de base de dados ---- */
/* SÓ A QUE VEM DEPOIS DO CAMPO. A mesma classe serve o «(opcional)» que
   vive DENTRO da etiqueta, e a minha regra punha-o em `-webkit-box`:
   o «(opcional)» descia para a linha de baixo, como se fosse um aviso.
   Dentro da etiqueta fica onde estava, ao lado do título do campo. */
.cot-campo > .cot-nota {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: 12px; line-height: 1.45; color: var(--ténue);
}
.cot-campo label .cot-nota {
  display: inline; font-size: 12.5px; font-weight: 400; color: var(--ténue);
}

/* ---- as caixas: mais quietas, menos cartão ---- */
.cot-cx { border-radius: 6px; padding: 26px 26px 22px;
  box-shadow: 0 1px 2px rgba(16,24,32,.035); }
.cot-cx:focus-within { box-shadow: 0 1px 2px rgba(16,24,32,.05); }
.cot-n { border-radius: 4px; }
.cot-campo input, .cot-campo select, .cot-campo textarea,
.cot-esc-bot, .cot-busca-campo { border-radius: 6px; }
.cot-estado-abre, .cot-item, .cot-grupo, .cot-ficha, .cot-ia { border-radius: 6px; }
.cot-cat { border-radius: 4px; }

/* o visto fica discreto: é uma confirmação, não uma medalha */
.cot-campo.cot-feito > label::after { color: #2f8f57; font-size: 11px; opacity: .85; }

/* o aviso do rascunho não é um alarme */
.cot-aviso { background: var(--fundo); border: 1px solid var(--risco);
  border-left: 3px solid var(--az); border-radius: 0 6px 6px 0; }

/* NÃO se desliga o sticky com «movimento reduzido». Tinha-o feito, e
   estava errado: uma coluna que acompanha a leitura não é uma animação,
   é onde a coisa está. O dono navega com essa preferência ligada e foi
   por isso que a barra lhe apareceu solta. Reduzir movimento é tirar
   deslizes, não tirar funções. */

/* =====================================================================
   O RESUMO E A CONSULTA, com mais cuidado — 23/09/2026

   O resumo estava a despejar tudo com o mesmo peso: rótulo, nome da
   empresa, NUIT, morada, pessoa, e-mail, telefone e data, todos em
   linhas iguais. Um documento não se lê assim -- lê-se por blocos, e
   dentro de cada bloco há UMA coisa que importa e as outras que a
   acompanham.
   ===================================================================== */
.cot-doc { padding: 0; overflow: hidden; }
.cot-doc-cab { padding: 18px 22px 14px; background: linear-gradient(180deg, #fbfcfd, #fff); 
  border-bottom: 1px solid var(--risco2); }
.cot-doc-tipo { margin: 0 0 2px; }
.cot-doc-tit { margin: 0; font-size: 17.5px; }
.cot-doc > .cot-doc-corpo { padding: 16px 22px 20px; }

/* o bloco de quem recebe o documento */
.cot-doc-quem { margin: 0 0 15px; padding: 0 0 14px; gap: 0; }
.cot-doc-quem dt {
  margin: 12px 0 4px; font-size: 10px; letter-spacing: .12em;
  color: #96a0ac; font-weight: 700;
}
.cot-doc-quem dt:first-child { margin-top: 0; }
.cot-doc-quem dd { margin: 0 0 2px; font-size: 13.2px; line-height: 1.45; color: var(--tinta2); }
/* a primeira linha de cada bloco é a que se lê primeiro */
.cot-doc-quem dt + dd { font-size: 14.5px; font-weight: 700; color: var(--tinta); margin-bottom: 3px; }
.cot-doc-quem dd b { font-weight: 700; }

/* as contas: os apoios pequenos, o total grande e sozinho */
.cot-doc .cot-linhas { gap: 0; }
.cot-doc .cot-linhas div { padding: 5px 0; font-size: 13.2px; color: var(--tinta2); }
.cot-doc .cot-linhas .cot-t {
  margin-top: 8px; padding: 11px 0 0; border-top: 1px solid var(--risco);
  font-size: 22px; font-weight: 800; color: var(--tinta); align-items: baseline;
}
.cot-doc .cot-vazio {
  margin: 0; padding: 14px 15px; border: 1px dashed var(--risco);
  border-radius: 6px; background: var(--fundo);
  font-size: 12.8px; line-height: 1.45; color: var(--ténue);
}
.cot-doc .cot-bt { margin-top: 15px; padding: 14px 20px; font-size: 15px; }
.cot-doc-gar li { font-size: 12.3px; }

/* ---------------------------------------------- a consulta do estado */
/* Era um bloco sem forma: o botão saía sem estilo nenhum, o campo do
   e-mail ficava vermelho por estar vazio, e as duas acções apareciam
   coladas uma à outra como se fossem a mesma coisa. */
.cot-estado-cx { padding: 24px 26px 22px; }
.cot-estado-cx h2 { font-size: 18px; letter-spacing: -.01em; }
.cot-estado-cx .cot-ajuda { padding-left: 0; margin-bottom: 16px; font-size: 13.8px; }
.cot-estado-cx .cot-grelha { gap: 14px 16px; }
.cot-estado-cx .cot-campo { grid-column: span 6; }
@media (max-width: 720px) { .cot-estado-cx .cot-campo { grid-column: span 12; } }
#cot-est-cod { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: .04em; font-size: 14px; }
/* o campo não se pinta de encarnado só por estar por preencher */
.cot-estado-cx input:invalid:not(:focus):placeholder-shown { border-color: var(--risco); box-shadow: none; }
.cot-estado-accoes { margin-top: 18px; gap: 18px; }
.cot-estado-accoes .cot-bt { padding: 13px 26px; font-size: 15px; }
.cot-estado-fecha { color: var(--ténue); }
.cot-estado-fecha:hover { color: var(--vm2); }

/* ---- «ver os outros planos» (23/09/2026) ---- */
.cot-mais {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 10px 0 0; padding: 10px 18px;
  border: 1px solid var(--risco); border-radius: 999px; background: var(--papel);
  font: inherit; font-size: 13.8px; font-weight: 600; color: var(--tinta2);
  cursor: pointer; transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.cot-mais::after {
  content: ''; width: 7px; height: 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform .2s ease;
}
.cot-mais[data-aberto="1"]::after { transform: rotate(-135deg) translateY(-1px); }
.cot-mais:hover { border-color: var(--vm2); color: var(--vm2); background: var(--fundo); }
@media (prefers-reduced-motion: reduce) { .cot-mais, .cot-mais::after { transition: none; } }

/* =====================================================================
   A PORTADA DAS CATEGORIAS — 23/09/2026

   > «nao mostre os produtos logo, mas sim as categorias/grupos com seus
   >  icons»

   Cartões, não uma lista: quem chega escolhe um género («alojamento»,
   «e-mails»), não um nome de plano. Os ícones são os que a página de
   produto de cada categoria já usa -- verificados um a um na folha do
   tema, porque um ícone que não exista não dá erro nenhum: fica um
   quadrado vazio e ninguém repara.
   ===================================================================== */
.cot-portada {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: 14px; margin: 4px 0 0;
}
@media (max-width: 560px) { .cot-portada { grid-template-columns: 1fr 1fr; gap: 11px; } }

.cot-cartao {
  display: grid; gap: 3px; align-content: start;
  padding: 20px 18px 18px; text-align: left;
  border: 1px solid var(--risco); border-radius: 8px; background: var(--papel);
  font: inherit; cursor: pointer; position: relative;
  transition: border-color .2s ease, box-shadow .25s ease, transform .2s ease;
}
.cot-cartao:hover {
  border-color: #c6d0da;
  box-shadow: 0 8px 26px -14px rgba(16,24,32,.5);
  transform: translateY(-2px);
}
.cot-cartao:focus-visible { outline: 2px solid var(--vm2); outline-offset: 2px; }
.cot-cartao-ic {
  font-size: 30px; line-height: 1; color: var(--vm2); margin-bottom: 9px;
  display: block; height: 32px;
}
.cot-cartao-tit { font-size: 15.5px; font-weight: 700; color: var(--tinta); line-height: 1.3; }
.cot-cartao-sub { font-size: 12.8px; color: var(--ténue); line-height: 1.4; }
.cot-cartao-n {
  position: absolute; top: 12px; right: 12px;
  min-width: 21px; height: 21px; padding: 0 6px; border-radius: 99px;
  background: var(--az); color: #fff; font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.cot-cartao.tem { border-color: var(--az); }

.cot-voltar-cat { margin-bottom: 14px; }

@media (prefers-reduced-motion: reduce) {
  .cot-cartao { transition: none; }
  .cot-cartao:hover { transform: none; }
}

/* ---- a consulta abre e fecha com deslize (23/09/2026) ---- */
.cot-estado-cx.a-abrir {
  overflow: hidden;
  transition: max-height .3s cubic-bezier(.22,.61,.36,1), opacity .22s ease;
}
.cot-estado-cx { opacity: 1; }
.cot-estado-cx.a-abrir[style*="max-height: 0"] { opacity: 0; }
.cot-estado-abre { transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, opacity .2s ease; }

/* o campo do e-mail não se pinta de encarnado só por estar vazio.
   Quem o pintava era o tema, que trata `input[type=email]` sem valor
   como campo com erro -- e aqui não há erro nenhum: a pessoa ainda não
   escreveu. */
.cot-estado-cx input[type="email"],
.cot-estado-cx input[type="email"]:invalid,
.cot-estado-cx input[type="email"]:placeholder-shown {
  border-color: var(--risco); box-shadow: none;
}
.cot-estado-cx input[type="email"]:focus {
  border-color: var(--vm2); box-shadow: 0 0 0 3.5px rgba(175,40,53,.13);
}

@media (prefers-reduced-motion: reduce) {
  .cot-estado-cx.a-abrir { transition: none; }
  .cot-estado-abre { transition: none; }
}

/* ---- a decisão pelos links do e-mail (23/09/2026) ---- */
.cot-decisao {
  margin-top: 18px; padding: 18px 20px;
  border: 1px solid var(--risco); border-left: 3px solid var(--vm2);
  border-radius: 0 6px 6px 0; background: var(--fundo);
  animation: cot-ficha-abre .25s ease-out both;
}
.cot-decisao h3 { margin: 0 0 5px; font-size: 16.5px; font-weight: 800; color: var(--tinta); }
.cot-decisao p { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: var(--tinta2); }
.cot-decisao-bts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.cot-bt-quieto {
  background: var(--papel); color: var(--tinta2);
  border: 1px solid var(--risco); box-shadow: none;
}
.cot-bt-quieto:hover:not([disabled]) {
  background: var(--fundo); border-color: var(--vm2); color: var(--vm2);
  box-shadow: none; transform: none; filter: none;
}
@media (prefers-reduced-motion: reduce) { .cot-decisao { animation: none; } }

/* =====================================================================
   OS PRODUTOS EM CARTÕES, NUMA COLUNA, E O GRUPO ABRE COM MOVIMENTO
   (dono, 23/09/2026: «ao clicar no grupo deve abrir com animacao, e os
   produtos devem estar em cartoes em coluna»)

   Antes eram linhas de tabela separadas por um traço: cada plano parecia
   uma linha de uma lista e não um objecto que se escolhe. Agora cada um é
   um cartão com bordo próprio, e a coluna dá-lhes o mesmo peso.

   O `.cot-lista` passa a grelha de uma coluna com `gap` -- e não margens
   nos filhos, que colapsam entre irmãos e dobram no primeiro e no último.
   ===================================================================== */
.cot-lista {
  display: grid; grid-template-columns: 1fr; gap: 10px;
  padding: 4px 12px 14px;
}
.cot-item {
  background: var(--papel);
  border: 1px solid var(--risco); border-bottom: 1px solid var(--risco);
  border-radius: 12px; padding: 14px 16px;
}
.cot-item:last-child { border-bottom: 1px solid var(--risco); }
.cot-item:hover { background: var(--papel); }
/* O escolhido lê-se pelo bordo inteiro, não por uma barra à esquerda:
   num cartão a barra ficava a meio do ar, sem traço a que se encostar. */
.cot-item.cot-on {
  border-color: var(--vm2); box-shadow: inset 3px 0 0 var(--vm2), 0 2px 10px rgba(175,40,53,.09);
}

/* A FICHA ABERTA NÃO PODE ESTICAR O CARTÃO PARA FORA DA COLUNA.
   Uma grelha dá `min-width:auto` aos filhos, e um <dl> com valores longos
   rebenta a faixa -- já me aconteceu nesta mesma página, com o catálogo a
   ir a 1768px dentro de uma coluna de 736px. */
.cot-item > * { min-width: 0; }

/* ---- o grupo entra quando se carrega no cartão da categoria ---- */
.cot-grupo.cot-entrou { animation: cot-grupo-entra .34s cubic-bezier(.22,.61,.36,1) both; }
@keyframes cot-grupo-entra {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
/* e os cartões entram atrás dele, em degrau. O atraso pára ao sexto: com
   127 domínios, um degrau por cartão punha o último a entrar meio minuto
   depois -- a escada é para se notar o movimento, não para se esperar. */
.cot-grupo.cot-entrou .cot-item { animation: cot-item-entra .3s ease-out both; }
.cot-grupo.cot-entrou .cot-item:nth-child(1) { animation-delay: .04s; }
.cot-grupo.cot-entrou .cot-item:nth-child(2) { animation-delay: .08s; }
.cot-grupo.cot-entrou .cot-item:nth-child(3) { animation-delay: .12s; }
.cot-grupo.cot-entrou .cot-item:nth-child(4) { animation-delay: .16s; }
.cot-grupo.cot-entrou .cot-item:nth-child(5) { animation-delay: .20s; }
.cot-grupo.cot-entrou .cot-item:nth-child(n+6) { animation-delay: .22s; }
@keyframes cot-item-entra {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
/* E A PORTADA ENTRA QUANDO SE VOLTA A ELA -- não sai.
   Escrevi primeiro um `cot-portada-sai` e pu-lo no sítio onde a portada
   REAPARECE: ela voltava a desvanecer-se em vez de chegar. Uma saída a
   sério obriga a esperar pelo fim da animação antes de esconder, e isso é
   maquinaria a mais para o que se ganha; o que faz falta é a chegada. */
.cot-portada.cot-volta { animation: cot-grupo-entra .28s cubic-bezier(.22,.61,.36,1) both; }

@media (max-width: 720px) {
  .cot-lista { padding-inline: 8px; }
  .cot-item { padding: 13px 14px; }
}

/* ===== e desliga-se para quem pediu menos movimento ===== */
@media (prefers-reduced-motion: reduce) {
  .cot-grupo.cot-entrou,
  .cot-grupo.cot-entrou .cot-item,
  .cot-portada.cot-volta { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rlx-anima-on .cot-grupo.cot-entrou { animation: cot-grupo-entra .34s cubic-bezier(.22,.61,.36,1) both; }
  /* AQUI NÃO SE USA O ATALHO `animation`. Os degraus da escada estão em
     regras `:nth-child` com a MESMA especificidade destas (quatro classes
     de um lado, três classes e uma pseudo-classe do outro) e escritas
     ANTES -- por isso um atalho aqui ganha e repõe o `animation-delay` a
     zero. Medido: com a chave `?rlxanima=1` os degraus 5 e 10 saíam ambos
     a 0s e os cartões entravam todos ao mesmo tempo. Em longhand o atraso
     das `:nth-child` sobrevive. */
  .rlx-anima-on .cot-grupo.cot-entrou .cot-item {
    animation-name: cot-item-entra; animation-duration: .3s;
    animation-timing-function: ease-out; animation-fill-mode: both;
  }
  .rlx-anima-on .cot-portada.cot-volta { animation: cot-grupo-entra .28s cubic-bezier(.22,.61,.36,1) both; }
}

/* =====================================================================
   O QUE SE VÊ DEPOIS DE PEDIR (23/09/2026)

   Antes não havia nada disto: o botão fazia um POST nativo e o navegador
   punha o JSON em cru no lugar do site. Este painel é o fim da estrada --
   é a única coisa na página quando aparece, porque o formulário já fez o
   que tinha a fazer e deixá-lo ao lado convida a enviar outra vez.
   ===================================================================== */
.cot-feito { margin: 8px 0 40px; }
.cot-feito-cx {
  max-width: 640px; margin: 0 auto; padding: 34px 32px;
  background: var(--papel); border: 1px solid var(--risco);
  border-top: 3px solid var(--vm2); border-radius: 6px;
  box-shadow: 0 6px 26px rgba(35,48,61,.07);
  animation: cot-grupo-entra .4s cubic-bezier(.22,.61,.36,1) both;
}
.cot-feito-selo {
  margin: 0 0 8px; font-size: 11px; font-weight: 800; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--vm2);
}
.cot-feito-cx h2 { margin: 0 0 14px; font-size: 25px; font-weight: 800; color: var(--tinta);
  letter-spacing: -.015em; }
.cot-feito-txt { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: var(--tinta2); }

/* Os três dados em linhas, e não em cartões: são uma ficha para copiar,
   não três objectos para escolher. */
.cot-feito-dados { margin: 0 0 20px; padding: 16px 18px; border-radius: 6px;
  background: var(--fundo); border: 1px solid var(--risco2); }
.cot-feito-dados > div { display: flex; flex-wrap: wrap; gap: 4px 14px;
  align-items: baseline; padding: 6px 0; }
.cot-feito-dados > div + div { border-top: 1px solid var(--risco2); }
.cot-feito-dados dt { flex: 0 0 96px; font-size: 11px; font-weight: 700;
  letter-spacing: .7px; text-transform: uppercase; color: var(--ténue); }
.cot-feito-dados dd { margin: 0; font-size: 16px; font-weight: 700; color: var(--tinta);
  font-variant-numeric: tabular-nums; }
/* O código tem 32 caracteres e num telemóvel não cabe numa linha: parte-se
   onde der, em vez de esticar a caixa para fora do ecrã. */
.cot-feito-dados code { font-size: 13.5px; font-weight: 400; letter-spacing: .3px;
  overflow-wrap: anywhere; }

.cot-feito-bts { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cot-feito-bts .cot-bt { text-decoration: none; }

/* o recado quando o envio falha, ao lado do botão */
.cot-enviar-mau {
  margin: 10px 0 0; padding: 9px 12px; font-size: 13.5px; line-height: 1.5;
  background: #fdeef2; border-left: 3px solid var(--vm2);
  border-radius: 0 4px 4px 0; color: var(--tinta);
}

@media (max-width: 560px) {
  .cot-feito-cx { padding: 26px 20px; }
  .cot-feito-cx h2 { font-size: 22px; }
  .cot-feito-dados dt { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { .cot-feito-cx { animation: none; } }
@media (prefers-reduced-motion: reduce) {
  .rlx-anima-on .cot-feito-cx { animation: cot-grupo-entra .4s cubic-bezier(.22,.61,.36,1) both; }
}