/* HERO -------------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 500px at 88% -8%, rgba(4, 119, 191, .10), transparent 60%),
    linear-gradient(180deg, #fff 0%, var(--gray-50) 100%);
  padding-block: clamp(48px, 7vw, 88px) clamp(56px, 8vw, 96px);
}
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero__copy .eyebrow { margin-bottom: 1.1rem; }
.hero h1 { margin-bottom: 1.2rem; max-width: 15ch; }
.hero h1 .hl { color: var(--azul); position: relative; white-space: nowrap; }
.hero h1 .hl::after { content: ""; position: absolute; left: 0; right: 0; bottom: .08em; height: .18em; background: var(--amarelo); border-radius: 3px; z-index: -1; }
.hero__lead { font-size: 1.14rem; max-width: 46ch; margin-bottom: 2rem; color: var(--gray-600); }
.hero__cta { display: flex; gap: .9rem; flex-wrap: wrap; margin-bottom: 2rem; }
.hero__chips { display: grid; gap: .6rem; }
.hero__chips li { display: flex; align-items: center; gap: .6rem; font-size: .96rem; font-weight: 500; color: var(--gray-700); }
.hero__chips svg { width: 18px; height: 18px; color: #1c9e5a; flex-shrink: 0; }

@media (max-width: 940px) {
  .hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero__card { order: -1; }
}

/* Card de cotação (assinatura) */
.hero__card { position: relative; }
.quote {
  background: #fff; border: 1px solid var(--linha); border-radius: 18px;
  box-shadow: var(--shadow-lg); padding: 1.5rem; max-width: 420px; margin-inline: auto;
  transform: rotate(-.6deg);
}
.quote__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.15rem; }
.quote__tag { font-family: var(--display); font-weight: 800; color: var(--azul); letter-spacing: -.01em; }
.quote__eta { font-size: .78rem; font-weight: 700; color: #1a1400; background: var(--amarelo); padding: .3rem .6rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; }
.quote__part { padding: .85rem 1rem; background: var(--gray-50); border-radius: 10px; margin-bottom: 1rem; }
.quote__label { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--gray-500); margin-bottom: .15rem; }
.quote__part strong { font-size: 1.02rem; }
.quote__offers { display: grid; gap: .55rem; margin-bottom: 1.2rem; }
.offer { display: flex; justify-content: space-between; align-items: center; padding: .7rem .9rem; border: 1.5px solid var(--linha); border-radius: 10px; font-size: .92rem; }
.offer span { color: var(--gray-600); }
.offer b { font-family: var(--display); }
.offer--best { border-color: var(--azul); background: rgba(4, 119, 191, .05); }
.offer--best em { display: inline-block; font-style: normal; font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; color: #fff; background: var(--azul); padding: .12rem .4rem; border-radius: 5px; margin-left: .35rem; vertical-align: middle; }
.offer--best b { color: var(--azul); }
/* Card de cotação — busca pela placa */
.quote__plate { margin-bottom: .85rem; }
.quote__plateinput { display: flex; align-items: center; gap: .5rem; border: 1.5px solid var(--linha); border-radius: 10px; padding: .58rem .8rem; background: #fff; font-family: var(--display); font-weight: 800; letter-spacing: .16em; color: var(--azul); font-size: 1.08rem; min-height: 44px; }
.quote__platebadge { font-family: var(--corpo); font-size: .58rem; font-weight: 700; letter-spacing: .06em; background: var(--azul); color: #fff; padding: .18rem .34rem; border-radius: 4px; }
.quote__caret { width: 2px; height: 1.05em; background: var(--azul); display: inline-block; animation: quoteCaret .8s steps(1) infinite; }
@keyframes quoteCaret { 50% { opacity: 0; } }
.quote__vehicle[hidden] { display: none; }
.quote__vehicle { display: flex; align-items: center; gap: .65rem; padding: .6rem .85rem; background: rgba(14, 44, 82, .05); border: 1px solid rgba(14, 44, 82, .1); border-radius: 10px; margin-bottom: 1rem; animation: quoteReveal .4s var(--ease); }
.quote__vehicle svg { width: 26px; height: 26px; color: var(--azul); flex: 0 0 auto; }
.quote__vehicle b { display: block; font-size: .95rem; color: var(--preto); line-height: 1.2; }
.quote__vehicle > div span { font-size: .8rem; color: var(--gray-600); }

/* Card de cotação — busca + melhor preço */
.quote__search { margin-bottom: 1.2rem; }
.quote__searchhead { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--gray-600); margin-bottom: .6rem; }
.quote__searchhead b { color: var(--azul); font-family: var(--display); }
.quote__spinner { width: 16px; height: 16px; border: 2.5px solid var(--gray-200); border-top-color: var(--amarelo); border-radius: 50%; animation: quoteSpin .7s linear infinite; flex: 0 0 auto; }
@keyframes quoteSpin { to { transform: rotate(360deg); } }
.quote__progress { height: 8px; background: var(--gray-100); border-radius: 999px; overflow: hidden; }
.quote__progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--azul), var(--amarelo)); border-radius: 999px; transition: width .25s var(--ease); }
.quote__result { margin-bottom: 1.2rem; animation: quoteReveal .45s var(--ease); }
@keyframes quoteReveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.quote__best { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .9rem 1rem; border: 2px solid var(--azul); background: rgba(14, 44, 82, .04); border-radius: 12px; }
.quote__bestlabel { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--azul); font-weight: 700; margin-bottom: .1rem; }
.quote__bestprice { font-family: var(--display); font-size: 1.55rem; color: var(--azul); line-height: 1; }
.quote__besttag { font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: #fff; background: var(--azul); padding: .2rem .45rem; border-radius: 6px; font-weight: 700; }
.quote__resultmeta { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .65rem; }
.quote__cmp { font-size: .72rem; font-weight: 700; color: #1a1400; background: var(--amarelo); padding: .25rem .55rem; border-radius: 999px; }
.quote__foot { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; }
.quote__save { font-size: .92rem; color: var(--gray-600); }
.quote__save b { color: #1c9e5a; font-family: var(--display); }
.quote__btn { --pad-y: .6rem; --pad-x: 1.2rem; font-size: .9rem; }
.hero__badge {
  display: inline-flex; align-items: center; gap: .5rem; margin: 1.25rem auto 0; max-width: 420px;
  font-size: .86rem; font-weight: 600; color: var(--azul-800);
}
.hero__badge svg { width: 20px; height: 20px; color: var(--amarelo-600); }

/* FAIXA DE CONFIANÇA ------------------------------------------------------ */
.stripe { background: var(--azul); color: #fff; }
.stripe__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; padding-block: 2.4rem; }
.stripe__item { text-align: center; border-right: 1px solid rgba(255, 255, 255, .18); padding-inline: .5rem; }
.stripe__item:last-child { border-right: 0; }
.stripe__item b { display: block; font-family: var(--display); font-weight: 800; font-size: 1.5rem; letter-spacing: -.02em; }
.stripe__item span { font-size: .88rem; color: #cfe6f6; }
@media (max-width: 720px) {
  .stripe__grid { grid-template-columns: 1fr 1fr; gap: 1.6rem 1rem; }
  .stripe__item:nth-child(2) { border-right: 0; }
}

/* PASSOS ------------------------------------------------------------------ */
.passos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; counter-reset: p; }
@media (max-width: 860px) { .passos { grid-template-columns: 1fr; } }
.passo { position: relative; background: #fff; border: 1px solid var(--linha); border-radius: var(--radius); padding: 1.75rem; }
.passo__num { font-family: var(--display); font-weight: 800; font-size: 1.4rem; color: var(--amarelo-600); display: inline-block; margin-bottom: .9rem; }
.passo h3 { margin-bottom: .45rem; }
.passo p { font-size: .95rem; }
@media (min-width: 861px) {
  .passo:not(:last-child)::after { content: ""; position: absolute; top: 2.35rem; right: -.75rem; width: 1.5rem; height: 2px; background: var(--gray-300); }
}

/* DIFERENCIAIS ------------------------------------------------------------ */
.dif__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 860px) { .dif__grid { grid-template-columns: 1fr; } }
.dif__head h2 { margin: 1rem 0 1rem; }
.dif__head p { margin-bottom: 1.8rem; max-width: 42ch; }
.dif__list { display: grid; gap: 1rem; }
.dif__list li { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); border-left: 3px solid var(--amarelo); border-radius: 10px; padding: 1.1rem 1.25rem; color: #cfe2f0; font-size: 1rem; }
.dif__list b { color: #fff; }

/* FORM BLOCK -------------------------------------------------------------- */
.form-block { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 900px) { .form-block { grid-template-columns: 1fr; } }
.form-block__side { position: sticky; top: 96px; }
.form-block__side h2 { margin: 1rem 0 .9rem; }
.form-block__side > p { margin-bottom: 1.6rem; max-width: 40ch; }
.form-block__list { display: grid; gap: .8rem; }
.form-block__list li { display: flex; align-items: center; gap: .6rem; font-weight: 500; color: var(--gray-700); }
.form-block__list svg { width: 18px; height: 18px; color: #1c9e5a; flex-shrink: 0; }
.form-block__card { background: #fff; border: 1px solid var(--linha); border-radius: 16px; box-shadow: var(--shadow-md); padding: clamp(1.5rem, 3vw, 2.25rem); }
@media (max-width: 900px) { .form-block__side { position: static; } }