/* =========================================================
   TeleAlarme Security Group | Formulário de qualificação
   Cores e tipografia conforme o Manual da Marca 2026
   ========================================================= */

:root{
  /* Cores oficiais da marca */
  --vermelho:      #D50000;
  --vermelho-forte:#A80000;
  --amarelo:       #F9D600;
  --branco:        #FFFFFF;
  --tinta:         #1A1A1A;

  /* Neutros de apoio */
  --fundo:      #F2F2F5;
  --linha:      #E1E1E8;
  --cinza-texto:#55555F;
  --vermelho-lavado:#FFF3F3;

  /* Chanfro (detalhe da marca) */
  --ch-btn:  13px;
  --ch-card: 24px;

  --largura: 34rem;
  --sombra: 0 10px 30px rgba(26,26,26,.07);
}

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

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

body{
  margin:0;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  background:var(--fundo);
  color:var(--tinta);
  font-family:"Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:"Poppins", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.18;
  margin:0;
}

a{ color:inherit; }

img{ max-width:100%; height:auto; display:block; }

button{ font:inherit; color:inherit; }

:focus-visible{ outline:3px solid var(--tinta); outline-offset:3px; }

/* títulos recebem foco por programação ao trocar de tela, sem moldura */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible{ outline:none; }

.pular{
  position:absolute; left:-9999px; top:0; z-index:20;
  background:var(--tinta); color:#fff; padding:.7rem 1rem; font-weight:500;
}
.pular:focus{ left:.5rem; top:.5rem; }

/* ---------- Topo ---------- */

.topo{
  position:sticky; top:0; z-index:10;
  background:var(--branco);
  border-bottom:1px solid var(--linha);
  padding-top:env(safe-area-inset-top);
}

.topo__linha{
  max-width:var(--largura);
  margin:0 auto;
  height:58px;
  padding:0 1rem;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:.5rem;
}

.topo__logo{
  height:26px; width:auto;
  grid-column:2;
  justify-self:center;
}

.voltar{
  grid-column:1;
  justify-self:start;
  display:inline-flex; align-items:center; gap:.15rem;
  background:none; border:0; cursor:pointer;
  padding:.5rem .5rem .5rem .25rem;
  font-size:.875rem; font-weight:500;
  color:var(--cinza-texto);
}
.voltar[hidden]{ display:none; }
.voltar svg{ width:18px; height:18px; }
.voltar:hover{ color:var(--vermelho); }

.topo__etapa{
  grid-column:3;
  justify-self:end;
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--cinza-texto);
  white-space:nowrap;
}

.barra[hidden]{ display:none; }
.barra{
  height:5px;
  background:var(--linha);
  overflow:hidden;
}
.barra__preenchida{
  height:100%;
  width:0;
  background:var(--amarelo);
  border-right:2px solid var(--branco);
  transition:width .35s cubic-bezier(.4,.9,.3,1);
}

/* ---------- Palco / telas ---------- */

.palco{
  flex:1 0 auto;
  width:100%;
  max-width:var(--largura);
  margin:0 auto;
  padding:1.5rem 1rem 2.5rem;
}

.tela{
  animation:entra .32s cubic-bezier(.2,.7,.3,1) both;
}
.tela--volta{ animation-name:entra-volta; }

@keyframes entra{
  from{ opacity:0; transform:translate3d(14px,0,0); }
  to  { opacity:1; transform:none; }
}
@keyframes entra-volta{
  from{ opacity:0; transform:translate3d(-14px,0,0); }
  to  { opacity:1; transform:none; }
}

@media (prefers-reduced-motion: reduce){
  .tela{ animation:none; }
  .barra__preenchida{ transition:none; }
  .abertura__selo .ponto{ animation:none; }
}

.tela__titulo{
  font-size:1.5rem;
  margin-bottom:.4rem;
}
.tela__titulo:focus{ outline:none; }

.tela__apoio{
  margin:0 0 1.5rem;
  color:var(--cinza-texto);
  font-size:.975rem;
}

/* ---------- Opções (botões de resposta) ---------- */

.opcoes{
  display:flex;
  flex-direction:column;
  gap:.7rem;
}

.opcao{
  display:block;
  width:100%;
  padding:2px;                 /* vira a "borda" chanfrada */
  border:0;
  background:var(--linha);
  cursor:pointer;
  text-align:left;
  clip-path:polygon(var(--ch-btn) 0, 100% 0, 100% calc(100% - var(--ch-btn)), calc(100% - var(--ch-btn)) 100%, 0 100%, 0 var(--ch-btn));
  transition:background .15s ease, transform .12s ease;
}
.opcao__conteudo{
  display:flex;
  align-items:center;
  gap:.85rem;
  min-height:60px;
  padding:.85rem 1rem;
  background:var(--branco);
  font-weight:500;
  clip-path:polygon(calc(var(--ch-btn) - 2px) 0, 100% 0, 100% calc(100% - var(--ch-btn) + 2px), calc(100% - var(--ch-btn) + 2px) 100%, 0 100%, 0 calc(var(--ch-btn) - 2px));
}
.opcao__marca{
  flex:0 0 4px;
  height:22px;
  align-self:center;
  background:var(--linha);
  transition:background .15s ease, height .15s ease;
}
.opcao__texto{ flex:1; }
.opcao__icone{ width:26px; height:26px; color:var(--vermelho); flex:0 0 auto; }
.opcao__seta{ width:18px; height:18px; color:#B9B9C4; flex:0 0 auto; transition:color .15s ease, transform .15s ease; }

.opcao:hover{ background:var(--vermelho); }
.opcao:hover .opcao__conteudo{ background:var(--vermelho-lavado); }
.opcao:hover .opcao__marca{ background:var(--amarelo); height:30px; }
.opcao:hover .opcao__seta{ color:var(--vermelho); transform:translateX(3px); }
.opcao:active{ transform:scale(.99); }

.opcao:focus-visible{
  outline:none;
  padding:3px;
  background:var(--tinta);
}
.opcao:focus-visible .opcao__marca{ background:var(--amarelo); }

.opcao[aria-pressed="true"]{ background:var(--vermelho); }
.opcao[aria-pressed="true"] .opcao__conteudo{ background:var(--vermelho-lavado); }
.opcao[aria-pressed="true"] .opcao__marca{ background:var(--amarelo); height:30px; }
.opcao[aria-pressed="true"] .opcao__seta{ color:var(--vermelho); }

/* ---------- Cartão ---------- */

.cartao{
  background:var(--branco);
  padding:1.5rem 1.25rem;
  box-shadow:var(--sombra);
  clip-path:polygon(var(--ch-card) 0, 100% 0, 100% calc(100% - var(--ch-card)), calc(100% - var(--ch-card)) 100%, 0 100%, 0 var(--ch-card));
}

/* ---------- Abertura ---------- */

.abertura{
  padding-top:1rem;
}
.abertura__selo{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--branco);
  border:1px solid var(--linha);
  padding:.4rem .8rem .4rem .55rem;
  font-size:.8rem; font-weight:500;
  color:var(--tinta);
  margin-bottom:1.1rem;
  clip-path:polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
/* luz vermelha piscando, como a de uma câmera gravando */
.abertura__selo .ponto{
  width:9px; height:9px; background:var(--vermelho); border-radius:50%;
  box-shadow:0 0 0 4px rgba(213,0,0,.14);
  animation:gravando 2s ease-in-out infinite;
}
@keyframes gravando{
  0%, 44%  { opacity:1;   box-shadow:0 0 0 4px rgba(213,0,0,.16); }
  60%, 96% { opacity:.28; box-shadow:0 0 0 4px rgba(213,0,0,0); }
  100%     { opacity:1;   box-shadow:0 0 0 4px rgba(213,0,0,.16); }
}
.abertura h1{
  font-size:1.9rem;
  margin-bottom:.75rem;
}
/* traço amarelo embaixo da palavra-chave, no espírito do símbolo da marca */
.grifo{
  white-space:nowrap;
  text-decoration:underline;
  text-decoration-color:var(--amarelo);
  text-decoration-thickness:.15em;
  text-underline-offset:.1em;
  text-decoration-skip-ink:none;
}
.abertura__sub{
  font-size:1.0625rem;
  color:var(--cinza-texto);
  margin:0 0 1.75rem;
  max-width:30rem;
}
.abertura__nota{
  margin:.9rem 0 0;
  font-size:.85rem;
  color:var(--cinza-texto);
}
/* faixa de prova: números concretos, sem frase de efeito */
.provas{
  list-style:none;
  margin:2rem 0 0;
  padding:1.35rem 0 0;
  border-top:1px solid var(--linha);
  display:grid;
  gap:.65rem;
}
.provas li{
  padding-left:.85rem;
  border-left:3px solid var(--amarelo);
  font-size:.925rem;
  line-height:1.4;
  color:var(--cinza-texto);
}
.provas strong{
  font-family:"Poppins", system-ui, sans-serif;
  font-weight:800;
  font-size:1rem;
  color:var(--tinta);
  margin-right:.35rem;
}

/* ---------- Botão principal ---------- */

.principal{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  text-decoration:none;
  width:100%;
  min-height:58px;
  padding:1rem 1.5rem;
  border:0;
  background:var(--vermelho);
  color:var(--branco);
  font-family:"Poppins", system-ui, sans-serif;
  font-weight:700;
  font-size:1.0625rem;
  cursor:pointer;
  clip-path:polygon(var(--ch-btn) 0, 100% 0, 100% calc(100% - var(--ch-btn)), calc(100% - var(--ch-btn)) 100%, 0 100%, 0 var(--ch-btn));
  transition:background .15s ease, transform .12s ease;
}
.principal:hover{ background:var(--vermelho-forte); }
.principal:active{ transform:scale(.99); }
.principal:focus-visible{ outline:3px solid var(--tinta); outline-offset:3px; }
.principal[disabled]{ background:var(--vermelho-forte); cursor:progress; opacity:.9; }
.principal svg{ width:20px; height:20px; }
.principal--espaco{ margin-top:1.25rem; }

/* ---------- Campos ---------- */

.campo{ margin-bottom:1.15rem; }
.campo label{
  display:block;
  font-weight:500;
  font-size:.925rem;
  margin-bottom:.4rem;
}
/* a "borda" é a caixa de fora, para o chanfro não abrir os cantos */
.campo__caixa{
  padding:2px;
  background:var(--linha);
  clip-path:polygon(var(--ch-btn) 0, 100% 0, 100% calc(100% - var(--ch-btn)), calc(100% - var(--ch-btn)) 100%, 0 100%, 0 var(--ch-btn));
  transition:background .15s ease;
}
.campo__caixa:hover{ background:#CBCBD6; }
.campo__caixa:focus-within{ background:var(--vermelho); }
.campo__caixa--erro{ background:var(--vermelho); }

.campo input[type="text"],
.campo input[type="tel"]{
  display:block;
  width:100%;
  min-height:52px;
  padding:.8rem .9rem;
  font:inherit;
  color:var(--tinta);
  background:var(--branco);
  border:0;
  border-radius:0;
  clip-path:polygon(calc(var(--ch-btn) - 2px) 0, 100% 0, 100% calc(100% - var(--ch-btn) + 2px), calc(100% - var(--ch-btn) + 2px) 100%, 0 100%, 0 calc(var(--ch-btn) - 2px));
}
.campo input::placeholder{ color:#9C9CA8; }
.campo input:focus{ outline:none; }
.campo input:focus-visible{ outline:none; }
.campo__caixa--erro input{ background:var(--vermelho-lavado); }

.erro{
  display:block;
  margin-top:.35rem;
  font-size:.85rem;
  font-weight:500;
  color:var(--vermelho-forte);
}
.erro:empty{ display:none; }

.consentimento{
  display:flex;
  align-items:flex-start;
  gap:.7rem;
  margin:1.35rem 0 .4rem;
  font-size:.925rem;
  line-height:1.45;
  cursor:pointer;
}
.consentimento input{
  flex:0 0 auto;
  width:22px; height:22px;
  margin:1px 0 0;
  accent-color:var(--vermelho);
  cursor:pointer;
}
.consentimento small{
  display:block;
  color:var(--cinza-texto);
  font-size:.8rem;
  margin-top:.2rem;
}

.aviso-envio{
  margin:1rem 0 0;
  padding:.85rem 1rem;
  background:var(--vermelho-lavado);
  border-left:4px solid var(--vermelho);
  font-size:.9rem;
  font-weight:500;
  color:var(--vermelho-forte);
}
.aviso-envio:empty{ display:none; }

/* ---------- Cidade fora da área ---------- */

.outra-cidade[hidden]{ display:none; }
.outra-cidade{
  margin-top:1rem;
  padding-top:1.15rem;
  border-top:1px dashed var(--linha);
}

/* ---------- Tela final ---------- */

.final{
  text-align:center;
  padding:2rem 1.5rem 2.25rem;
}
.final__icone{
  width:66px; height:66px;
  margin:0 auto 1.25rem;
  display:grid; place-items:center;
  background:var(--vermelho);
  color:var(--branco);
  clip-path:polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
}
.final__icone svg{ width:32px; height:32px; }
.final h1{ font-size:1.5rem; margin-bottom:.7rem; }
.final p{ color:var(--cinza-texto); margin:0 auto; max-width:26rem; }
.final__chamada{
  margin-top:1.5rem;
  font-size:.9rem;
}
.final__whats{ margin-top:.65rem; width:100%; }
.final__whats svg{ width:22px; height:22px; }
.final__extra{
  margin-top:1.25rem;
  font-size:.9rem;
}
.final__extra a{ color:var(--vermelho); font-weight:500; }

/* ---------- Rodapé ---------- */

.rodape{
  flex:0 0 auto;
  background:var(--vermelho);
  color:var(--branco);
  text-align:center;
  padding:1.75rem 1rem calc(1.75rem + env(safe-area-inset-bottom));
}
.rodape__logo{
  height:24px; width:auto;
  margin:0 auto 1rem;
}
.rodape p{ margin:0; font-size:.85rem; }
.rodape__contato{ font-weight:500; }
.rodape .sep{ opacity:.55; margin:0 .35rem; }
.rodape__legal{ margin-top:.4rem; opacity:.82; font-size:.8rem; }
.rodape a{ color:var(--branco); text-decoration:underline; text-underline-offset:3px; }
.rodape a:hover{ color:var(--amarelo); }
.rodape :focus-visible{ outline:3px solid var(--amarelo); outline-offset:3px; }

/* ---------- Telas maiores ---------- */

@media (min-width:640px){
  .palco{ padding:2.5rem 1.5rem 3.5rem; }
  .topo__linha{ height:66px; padding:0 1.5rem; }
  .topo__logo{ height:30px; }
  .abertura h1{ font-size:2.35rem; }
  .tela__titulo{ font-size:1.75rem; }
  .cartao{ padding:2rem 1.75rem; }
  .principal{ width:auto; min-width:15rem; }
  .principal--bloco{ width:100%; }
}

@media (min-width:900px){
  body{ background:var(--fundo); }
  .palco{ padding-top:3rem; }
}