/* Agilizou Seguro Auto: componentes próprios do site de veículos, por cima do site.css do site principal. */

/* Topo da home: sem o painel roxo que avança sobre ele */
.topo.auto{padding:56px 0 80px}
.topo.auto .lead{max-width:560px}
.selos-topo{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px;font-size:.88rem;color:var(--suave)}
.selos-topo span{display:inline-flex;align-items:center;gap:7px}
.selos-topo .ico{width:17px;height:17px;color:var(--verde)}
.selos-topo b{color:var(--tinta)}

/* Cartão "O que você quer proteger?" no topo */
.escolha{background:var(--cartao);border:1px solid var(--linha);border-radius:var(--r-g);padding:30px;box-shadow:var(--sombra);position:relative}
.escolha h2{font-size:1.35rem;line-height:1.25}
.escolha p.sub{margin-top:6px;font-size:.95rem;color:var(--suave)}
.escolha .veics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}
.escolha .veics a{display:grid;justify-items:center;gap:10px;padding:20px 10px;border:1.5px solid var(--linha);border-radius:18px;text-decoration:none;color:var(--tinta);font:600 .98rem/1.2 var(--titulo);text-align:center;transition:border-color .15s,background .15s,transform .15s}
.escolha .veics a:hover{border-color:var(--laranja);background:var(--laranja-suave);transform:translateY(-2px)}
.escolha .veics .vi{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--lavanda);color:var(--roxo)}
.escolha .veics .vi .ico{width:28px;height:28px}
.escolha .veics small{display:block;font:400 .78rem/1.3 var(--fonte);color:var(--suave)}
.escolha .usos-t{margin-top:22px;font-weight:600;font-size:.9rem;color:var(--tinta)}
.escolha .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.escolha .chips a{padding:8px 14px;border-radius:999px;background:var(--fundo-2);border:1px solid var(--linha);font-size:.9rem;text-decoration:none;color:var(--tinta)}
.escolha .chips a:hover{border-color:var(--laranja);color:var(--laranja-escuro)}
.escolha .rodape{display:flex;align-items:center;gap:10px;margin-top:22px;padding-top:18px;border-top:1px solid var(--linha);font-size:.88rem}
.escolha .rodape b{font-family:var(--titulo);font-size:1.5rem;color:var(--tinta)}
.escolha .rodape .estrelas{color:#F5A524;letter-spacing:1px}

/* Três usos */
.usos{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.uso{background:var(--cartao);border:1px solid var(--linha);border-radius:var(--r);padding:28px;display:flex;flex-direction:column}
.uso .ui{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;background:var(--laranja-suave);color:var(--laranja-escuro)}
.uso .ui .ico{width:26px;height:26px}
.uso h3{font-size:1.25rem;margin-top:16px}
.uso .quem{font-size:.9rem;color:var(--suave);margin-top:4px}
.uso ul{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:10px;font-size:.96rem}
.uso li{display:flex;gap:9px;align-items:flex-start}
.uso li .ico{width:18px;height:18px;color:var(--verde);flex:none;margin-top:3px}
.uso .link{margin-top:auto;padding-top:20px}

/* Faixa de moto na home */
.faixa{background:var(--roxo);color:#fff;border-radius:var(--r-g);padding:40px;display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center}
.faixa h2{color:#fff;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.15}
.faixa p{margin-top:12px;color:#E4DEFF}
.faixa .botoes{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}
.faixa .btn-linha{color:#fff;border-color:rgba(255,255,255,.5)}
.faixa .btn-linha:hover{background:rgba(255,255,255,.1);color:#fff}

/* Moto elétrica */
.eletrica{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start}
.eletrica .tag{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:#E6F7EE;color:#0F7A3B;font:700 .74rem/1.2 var(--fonte);letter-spacing:.12em;text-transform:uppercase}
:root[data-tema="escuro"] .eletrica .tag{background:rgba(22,163,74,.16);color:#6EE7A0}
.eletrica .tag .ico{width:16px;height:16px}
.eletrica h2{font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1.15;margin-top:16px}
.eletrica .txt p{margin-top:16px;font-size:1.05rem}
.eletrica .nota-e{margin-top:20px;padding:16px 18px;border-radius:16px;background:var(--fundo-2);border:1px solid var(--linha);font-size:.92rem}
.eletrica .nota-e b{color:var(--tinta)}

/* Formulário: escolhas em botões */
.opcoes{border:0;padding:0;margin:18px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;border-radius:16px;transition:box-shadow .2s}
/* Veículo: 3 em cima e 2 mais largos embaixo */
#op-veiculo{grid-template-columns:repeat(6,1fr)}
#op-veiculo>label{grid-column:span 2}
#op-veiculo>label:nth-of-type(n+4){grid-column:span 3}
.opcoes.tres{grid-template-columns:repeat(3,1fr)}
.opcoes legend{font-weight:600;font-size:.9rem;color:var(--tinta);padding:0;margin-bottom:8px}
.opcoes label{position:relative;cursor:pointer}
.opcoes input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.opcoes span{display:grid;justify-items:center;gap:6px;height:100%;padding:12px 6px;border:1.5px solid var(--linha);border-radius:14px;background:var(--fundo-2);color:var(--tinta);font:600 .86rem/1.2 var(--fonte);text-align:center;transition:border-color .15s,background .15s}
.opcoes span .ico{width:22px;height:22px;color:var(--roxo)}
:root[data-tema="escuro"] .opcoes span .ico{color:#B9A8FF}
.opcoes small{display:block;font-weight:400;font-size:.74rem;color:var(--suave);margin-top:2px}
.opcoes label:hover span{border-color:var(--laranja)}
.opcoes input:checked+span{border-color:var(--laranja);background:var(--laranja-suave);box-shadow:0 0 0 1px var(--laranja) inset}
.opcoes input:focus-visible+span{outline:3px solid var(--laranja);outline-offset:2px}
.opcoes.falta{box-shadow:0 0 0 3px rgba(241,90,36,.45)}
.lgpd a{color:inherit;font-weight:600}

@media (max-width:1080px){
  .usos{grid-template-columns:1fr}
  .faixa,.eletrica{grid-template-columns:1fr}
  .faixa .botoes{justify-content:flex-start}
}
@media (max-width:720px){
  .topo.auto{padding:32px 0 48px}
  .escolha{padding:22px}
  .escolha .veics{gap:8px}
  .escolha .veics a{padding:14px 6px}
  .escolha .veics .vi{width:44px;height:44px}
  .opcoes{grid-template-columns:repeat(2,1fr)}
  #op-veiculo{grid-template-columns:repeat(2,1fr)}
  #op-veiculo>label,#op-veiculo>label:nth-of-type(n+4){grid-column:auto}
  #op-veiculo>label:nth-of-type(5){grid-column:span 2}
  .opcoes.tres{grid-template-columns:1fr}
  .opcoes.tres span{display:block;text-align:left;padding:12px 14px}
  .opcoes.tres small{display:inline;margin:0 0 0 6px}
  .faixa{padding:28px}
}

/* "Aceitam esse uso": logos das seguradoras de um uso específico */
.aceitam{margin-top:32px;padding:24px 28px;border-radius:var(--r);background:var(--fundo-2);border:1px solid var(--linha)}
.aceitam h3{font-size:1.05rem}
.aceitam p{font-size:.92rem;color:var(--suave);margin-top:4px}
.aceitam .logos{margin-top:16px;grid-template-columns:repeat(auto-fit,minmax(96px,1fr))}
.botoes-e{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}