/* ==========================================================================
   MUNDO SEGURO — /cotacao
   Frame 186:37 do Figma. Especificação de conteúdo em documentacao/paginas/cotacao.md.
   O Figma desenha o estado inicial (etapa 1); as etapas 2 e 3, a confirmação e
   os estados de erro seguem a mesma linguagem.
   ========================================================================== */

/* ==========================================================================
   1. TOPO — foto em caixa arredondada sobre a faixa azul-marinho
   ========================================================================== */

.cot-hero {
  padding-block: clamp(var(--sp-6), 5.7vw, 82px) 21px;
  background: var(--c-navy);
}

/* Mais larga que o .container--wide (1280): ocupa a tela até 1400px, com
   20px de respiro de cada lado. */
.cot-hero > .container--wide { max-width: 1440px; padding-inline: 20px; }

.cot-hero__foto {
  position: relative;
  min-height: 559px;
  overflow: hidden;
  isolation: isolate;
  border-radius: 12px;
}

.cot-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 44% 29%;
}

/* Figma: gradiente #06162e da esquerda até ~76% da largura */
.cot-hero__foto::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    90deg,
    rgb(6 22 46 / 0.92) 0%,
    rgb(6 22 46 / 0.7) 28%,
    rgb(6 22 46 / 0.25) 55%,
    rgb(6 22 46 / 0) 76%
  );
}

.cot-hero__conteudo {
  position: relative;
  z-index: 3;
  padding-block: 91px 90px;
}

.cot-hero__title {
  max-width: 300px;
  font-size: var(--fs-28);
  font-weight: var(--fw-semibold);
  line-height: 1.22;
  color: var(--c-white);
}

.cot-hero__lead {
  max-width: 310px;
  margin-top: var(--sp-10);
  font-size: var(--fs-16);
  font-weight: var(--fw-regular);
  line-height: 1.2;
  color: var(--c-white);
}

/* ---------- escolha da intenção: cartões de vidro ---------- */

.cot-intencoes { margin: 44px 0 0; padding: 0; border: 0; min-width: 0; }

.cot-intencoes__lista {
  display: grid;
  grid-template-columns: minmax(0, 285fr) minmax(0, 310fr) minmax(0, 310fr);
  gap: 18px;
  max-width: 940px;
}

.cot-intencao {
  position: relative;
  display: grid;
  align-content: center;
  min-height: 84px;
  padding: var(--sp-3) var(--sp-4) var(--sp-3) 71px;
  background: rgb(243 243 243 / 0.2);
  border: 1px solid rgb(255 255 255 / 0.3);
  border-top: 7px solid var(--c-gray-200);
  border-radius: var(--r-input);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.cot-intencao:hover { background: rgb(243 243 243 / 0.3); }

/* "Regularizar" é o público com urgência (item 8.2): barra verde */
.cot-intencao--urgente { border-top-color: var(--c-green); }

/* o rádio real continua focável e clicável por cima do cartão todo */
.cot-intencao input {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.cot-intencao__radio {
  position: absolute;
  left: 27px;
  top: 50%;
  width: 27px; height: 27px;
  translate: 0 -50%;
  border: 1.5px solid var(--c-white);
  border-radius: var(--r-pill);
}
.cot-intencao__radio::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  background: var(--c-blue);
  scale: 0;
  transition: scale var(--dur) var(--ease-out);
}

.cot-intencao__titulo {
  font-size: var(--fs-18);
  font-weight: var(--fw-semibold);
  line-height: 1.15;
  color: var(--c-gray-100);
}

.cot-intencao__sub {
  font-size: 0.8125rem;   /* 13px */
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  color: var(--c-gray-200);
}

.cot-intencao:has(input:checked) { background: rgb(217 217 217 / 0.54); }
.cot-intencao:has(input:checked) .cot-intencao__radio::after { scale: 1; }
.cot-intencao:has(input:checked) .cot-intencao__sub { color: var(--c-navy); }
.cot-intencao:has(input:focus-visible) { outline: 3px solid var(--c-blue); outline-offset: 2px; }

/* ==========================================================================
   2. CORPO: formulário + coluna lateral
   ========================================================================== */

/* A faixa azul-marinho continua 46px por trás do topo dos cartões */
.cot-corpo {
  padding-bottom: var(--sp-20);
  background: linear-gradient(var(--c-navy) 46px, var(--c-gray-100) 46px);
}

.cot-grid {
  display: grid;
  grid-template-columns: minmax(0, 579fr) minmax(0, 429fr);
  gap: 34px;
  align-items: start;
}

.cot-resumo { display: none; }

/* O atributo hidden só esconde por padrão do navegador, e qualquer `display`
   do CSS (as etapas são grid) passa por cima dele. As etapas, a confirmação e
   os campos condicionais dependem de hidden funcionar. */
.cot-corpo [hidden] { display: none !important; }

.cot-cartao {
  padding: 63px clamp(var(--sp-6), 5vw, 72px) 42px;
  background: var(--c-white);
  border-radius: 12px;
}

/* ---------- indicador de etapas ---------- */

.cot-passos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) 28px;
  margin: 0 0 36px;
  padding: 0;
  list-style: none;
}

.cot-passos__item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 var(--sp-3) 4px 10px;
  margin-left: -10px;
  font-size: var(--fs-14);
  color: var(--text-muted);
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.cot-passos__num {
  display: grid;
  place-items: center;
  width: 19px; height: 19px;
  flex: none;
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  border-radius: var(--r-pill);
  background: var(--c-gray-200);
  color: var(--c-gray-300);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.cot-passos__item[aria-current="step"] { color: var(--c-navy); border-bottom-color: var(--c-blue); }
.cot-passos__item[aria-current="step"] .cot-passos__num,
.cot-passos__item[data-feito] .cot-passos__num { background: var(--c-blue); color: var(--c-navy); }
.cot-passos__item[data-feito] { color: var(--c-navy); }

/* ---------- etapas ---------- */

.cot-etapa { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: var(--sp-6); }

/* sem JS as três etapas aparecem empilhadas; separamos com uma linha */
.cot-form:not([data-js]) .cot-etapa + .cot-etapa {
  margin-top: var(--sp-10);
  padding-top: var(--sp-10);
  border-top: 1px solid var(--c-gray-200);
}

.cot-etapa__titulo:focus { outline: none; }

.cot-campos { display: grid; gap: 15px var(--sp-5); }
.cot-campos--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* campos do Figma: 46px, fundo #f3f3f3, nome dentro do campo em 14px */
.cot-form .field { gap: var(--sp-2); }
.cot-form .field__input { min-height: 46px; padding-inline: 21px; }
.cot-form .field__input::placeholder { font-size: var(--fs-14); font-weight: var(--fw-medium); color: var(--text-muted); }
.cot-form .field__error:empty { display: none; }

.cot-dica {
  margin-left: var(--sp-1);
  font-size: var(--fs-12);
  font-weight: var(--fw-regular);
  color: var(--c-gray-300);
}

.cot-select {
  appearance: none;
  padding-right: var(--sp-10);
  cursor: pointer;
}

/* A seta é repetida nos estados porque o hover e o focus globais de
   .field__input usam o atalho `background:`, que apaga background-image. */
.cot-select,
.cot-select:hover,
.cot-select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath stroke='%23717171' stroke-width='1.6' d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-5) center;
}
.cot-select:invalid, .cot-select option[value=""] { color: var(--text-muted); }

.cot-textarea { min-height: 110px; padding-block: var(--sp-3); resize: vertical; line-height: 1.5; }

/* ---------- grupos de opções ---------- */

.cot-grupo { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: var(--sp-3); }
.cot-grupo > legend { padding: 0; margin-bottom: var(--sp-3); }

.cot-subgrupo + .cot-subgrupo { margin-top: var(--sp-2); }

.cot-subgrupo__titulo {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-gray-300);
}

.cot-pilulas { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.cot-pilula { position: relative; cursor: pointer; }

/* o input continua no fluxo de foco; só o desenho é da pílula */
.cot-pilula input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.cot-pilula span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 var(--sp-4);
  font-size: var(--fs-14);
  color: var(--text-muted);
  background: var(--c-gray-100);
  border: 1px solid transparent;
  border-radius: var(--r-input);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.cot-pilula:hover span { border-color: var(--c-gray-200); }

.cot-pilula input:checked + span {
  background: rgb(0 182 255 / 0.12);
  border-color: var(--c-blue);
  color: var(--c-navy);
}

.cot-pilula input:focus-visible + span { outline: 3px solid var(--c-blue); outline-offset: 2px; }

.cot-pilula--orientacao span { border-color: var(--c-gray-200); border-style: dashed; }

/* erro num grupo inteiro: contorna as pílulas */
.cot-grupo[aria-invalid="true"] .cot-pilula span { border-color: #f1a39b; }

/* ---------- navegação e envio ---------- */

.cot-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: 4px;
}

/* botões do Figma: 37px de altura, raio 4, texto 16/700 */
.cot-nav .btn {
  min-height: 37px;
  padding: 0 28px;
  border-radius: var(--r-input);
  font-weight: var(--fw-semibold);
}

/* No dedo, 37px é pouco para a ação principal do formulário. A regra geral de
   alvo de toque está em components.css, mas `.cot-nav .btn` tem a mesma
   especificidade e esta folha carrega depois: por ordem, ela vence. Então a
   exceção mora aqui, ao lado da medida que ela ajusta. */
@media (pointer: coarse) {
  .cot-nav .btn { min-height: 44px; }
}

.cot-nav__avancar,
.cot-nav__enviar { margin-left: auto; }

/* sem JS não há etapas: os botões de navegação não fazem sentido */
.cot-form:not([data-js]) [data-avancar],
.cot-form:not([data-js]) [data-voltar] { display: none; }

.cot-consentimento { font-size: var(--fs-14); color: var(--text-muted); }
.cot-consentimento a { text-decoration: underline; }

.cot-status { margin-top: var(--sp-4); }
.cot-status:empty { display: none; }

/* ---------- confirmação ---------- */

.cot-sucesso { display: grid; justify-items: start; gap: var(--sp-4); }
.cot-sucesso:focus { outline: none; }

.cot-sucesso__icone {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  background: var(--c-green);
  border-radius: var(--r-pill);
  color: var(--c-navy);
}
.cot-sucesso__icone svg { width: 28px; height: 28px; }

.cot-sucesso__titulo { font-size: var(--fs-28); font-weight: var(--fw-semibold); color: var(--c-navy); }
.cot-sucesso__texto { max-width: 520px; font-size: var(--fs-16); line-height: 1.5; color: var(--text-muted); }

.cot-sucesso__links {
  width: 100%;
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-gray-150);
}
.cot-sucesso__rotulo {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
}
.cot-sucesso__links ul { display: grid; gap: var(--sp-3); list-style: none; padding: 0; margin: 0; }

/* ==========================================================================
   3. COLUNA LATERAL
   ==========================================================================
   Gruda ao lado do formulário enquanto a pessoa preenche. */

.cot-lateral {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-5));
  display: grid;
  gap: 10px;
}

/* Coluna fixa mais alta que a tela esconde o fim dela até o formulário
   acabar. Em telas mais baixas que a coluna, ela rola junto com a página. */
@media (max-height: 820px) {
  .cot-lateral { position: static; }
}

.cot-bloco {
  padding: 40px 33px 30px;
  background: var(--c-white);
  border-radius: 12px;
}

.cot-bloco__titulo {
  margin-bottom: 9px;
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
}

/* linha do tempo numerada */
.cot-linha { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; counter-reset: passo; }
.cot-linha li {
  position: relative;
  padding-left: 34px;
  font-size: var(--fs-14);
  line-height: 1.35;
  color: var(--text-muted);
  counter-increment: passo;
}
.cot-linha li::before {
  content: counter(passo);
  position: absolute;
  left: 0; top: 0;
  display: grid;
  place-items: center;
  width: 19px; height: 19px;
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  background: var(--c-blue);
  color: var(--c-navy);
  border-radius: var(--r-pill);
}
.cot-linha li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 9px; top: 19px; bottom: calc(-1 * var(--sp-3));
  width: 1px;
  background: var(--c-blue);
}
.cot-linha strong { font-weight: var(--fw-semibold); }

/* checklist em duas colunas, marcador de check circular */
/* Duas colunas do tamanho do próprio texto (max-content), e não metade/metade.
   Com colunas iguais, "Tipo e valor médio da carga" quebrava dentro da sua
   e deixava um vão na vizinha. Se a coluna lateral estreitar e o texto não
   couber, cai para uma coluna só (ver responsivo). */
.cot-checklist {
  display: grid;
  grid-template-columns: max-content max-content;
  justify-content: space-between;
  gap: 7px var(--sp-4);
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.cot-checklist li { white-space: nowrap; }
.cot-checklist li {
  position: relative;
  padding-left: 17px;
  font-size: var(--fs-14);
  line-height: 1.5;
  color: var(--text-muted);
}
.cot-checklist li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.5em;
  width: 10px; height: 10px;
  border: 1px solid var(--c-blue);
  border-radius: var(--r-pill);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='5' fill='none'%3E%3Cpath stroke='%2300b6ff' stroke-width='1.2' d='m.6 2.4 1.6 1.6L5.4.8'/%3E%3C/svg%3E") center / 6px 5px no-repeat;
}

/* 14px, não 12: isto é instrução que a pessoa precisa ler antes de preencher,
   não crédito de rodapé. O 12 fica reservado a nota de fonte. */
.cot-bloco__nota {
  margin: 18px -13px 0;
  padding: 14px 13px 0;
  font-size: var(--fs-14);
  line-height: 1.5;
  color: var(--text-muted);
  border-top: 1px solid var(--c-gray-200);
}

/* WhatsApp */
.cot-bloco--whats { padding-bottom: 20px; }
.cot-bloco--whats .btn {
  margin-top: 13px;
  min-height: 46px;
  border-radius: var(--r-btn);
  font-weight: var(--fw-semibold);
}
.cot-bloco__tel { margin-top: 6px; text-align: center; font-size: var(--fs-14); color: var(--text-muted); }

/* números: faixa azul-marinho baixa */
.cot-bloco--numeros { padding: 18px 26px 18px 38px; background: var(--c-navy); border-radius: var(--r-card); }
.cot-numeros { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: var(--sp-3); margin: 0; }
.cot-numeros div { display: flex; flex-direction: column-reverse; }
.cot-numeros dd { margin: 0; font-size: var(--fs-18); font-weight: var(--fw-semibold); color: var(--c-blue); line-height: 1.1; white-space: nowrap; }
.cot-numeros dt { font-size: var(--fs-12); line-height: 1.3; color: var(--c-gray-100); }

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */

@media (max-width: 1000px) {
  .cot-grid { grid-template-columns: minmax(0, 1fr); }

  /* A coluna desce para depois do formulário; o "o que acontece depois"
     sobe resumido em uma linha antes dele. */
  .cot-lateral { position: static; order: 2; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
  .cot-bloco--depois { display: none; }

  .cot-resumo {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1) var(--sp-2);
    order: 0;
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-14);
    font-weight: var(--fw-regular);
    color: var(--c-navy);
    background: var(--c-white);
    border-radius: var(--r-card);
  }
  .cot-cartao { order: 1; }

  .cot-intencoes__lista { grid-template-columns: minmax(0, 1fr); max-width: 420px; gap: var(--sp-3); }
}

@media (max-width: 720px) {
  .cot-hero .container--wide { padding-inline: 0; }
  .cot-hero__foto { min-height: 0; border-radius: 0; }
  .cot-hero__conteudo { padding-block: var(--sp-10) var(--sp-8); }
  .cot-hero__foto::before { background: linear-gradient(180deg, rgb(6 22 46 / 0.82), rgb(6 22 46 / 0.9)); }
  .cot-hero__title, .cot-hero__lead { max-width: none; }
  .cot-hero__lead { margin-top: var(--sp-4); }
  .cot-intencoes { margin-top: var(--sp-6); }

  .cot-cartao { padding: var(--sp-8) var(--sp-5) var(--sp-6); }
  .cot-campos--2 { grid-template-columns: minmax(0, 1fr); }

  /* só o número de cada etapa, com o nome da atual */
  .cot-passos { gap: var(--sp-2) var(--sp-4); }
  .cot-passos__item:not([aria-current="step"]) { font-size: 0; gap: 0; }
  .cot-passos__item:not([aria-current="step"]) .cot-passos__num { font-size: var(--fs-12); }

  .cot-nav { flex-wrap: wrap; }
  .cot-nav .btn { flex: 1 1 auto; }

  .cot-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
  .cot-bloco--numeros { padding: var(--sp-5) var(--sp-6); }
}

/* A lista decide pela largura do BLOCO, não da tela: o bloco estreita tanto
   no desktop menor quanto no tablet, onde os blocos ficam lado a lado.
   As duas colunas precisam de ~372px (174 + 181 + 16 de espaço). */
.cot-bloco { container-type: inline-size; }
@container (max-width: 371px) {
  .cot-checklist { grid-template-columns: max-content; }
}