/* Site da GvLar — a partir do desenho aprovado no Claude Design (29/10/2026).
   Cores da marca: azul #1C3568, vermelho #C71F26, azul-gelo #E4ECF1. Fonte: Source Sans 3. */
:root {
  --azul: #1C3568; --azul-esc: #142850; --verm: #C71F26; --gelo: #E4ECF1; --nevoa: #F4F7FA;
  --texto: #14213D; --apoio: #3D4A63; --cinza: #4A5873; --borda: #C3CFDD; --claro: #D6DFEA;
  --raio: 28px; --larg: 1240px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--texto); font-family: "Source Sans 3", "Source Sans Pro", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; display: block; }
a { color: var(--azul); }
a:hover { color: var(--verm); }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid var(--verm); outline-offset: 3px; }
.cx { max-width: var(--larg); margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1, h2, h3 { margin: 0; color: var(--azul); }
h2 { font-size: clamp(34px, 4vw, 52px); line-height: 1.06; font-weight: 800; letter-spacing: -0.015em; }
.leve { font-weight: 300; }
.bloco { display: block; }
.rotulo { font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--verm); }
.sub { margin: 0; font-size: 18px; line-height: 1.6; color: var(--apoio); }
.secao { padding-top: 104px; padding-bottom: 104px; }
.cab-secao { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.cab-secao > div { display: flex; flex-direction: column; gap: 14px; max-width: 680px; }

/* botões */
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 14px 26px; border-radius: 999px;
  font: inherit; font-weight: 700; font-size: 17px; text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
  transition: transform .15s ease, background-color .2s ease, color .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn svg { flex: none; }
.btn-verm { background: var(--verm); color: #fff; box-shadow: 0 10px 24px rgba(199,31,38,.28); }
.btn-verm:hover { color: #fff; background: #B31A20; }
.btn-azul { background: var(--azul); color: #fff; }
.btn-azul:hover { color: #fff; background: var(--azul-esc); }
.btn-borda { background: transparent; color: var(--azul); border-color: var(--azul); }
.btn-borda:hover { background: var(--azul); color: #fff; }
.btn-claro { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn-claro:hover { background: #fff; color: var(--azul); }
.btn-p { min-height: 44px; padding: 11px 20px; font-size: 15px; }

/* topo */
.topo { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.92); backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--gelo); }
.topo .cx { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 14px; padding-bottom: 14px; }
.topo-logo img { height: 42px; width: auto; }
.nav { display: flex; gap: 30px; font-size: 16px; font-weight: 600; }
.nav a { text-decoration: none; }
.progresso { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--verm); transform-origin: 0 50%; transform: scaleX(0); }
.topo-dir { display: flex; align-items: center; gap: 20px; }
.voltar { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; min-height: 44px; }

/* abertura */
.hero { position: relative; background: var(--gelo); overflow: hidden; }
.hero-deco { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero .cx { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 56px; padding-top: 72px; padding-bottom: 88px; }
.hero-txt { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.selo { display: inline-flex; align-self: flex-start; align-items: center; gap: 10px; background: #fff; border-radius: 999px;
  padding: 8px 16px 8px 10px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--azul); }
.selo i { width: 22px; height: 22px; border-radius: 50%; background: var(--verm); display: inline-flex; align-items: center; justify-content: center; }
.hero h1 { font-size: clamp(42px, 6vw, 76px); line-height: 1.02; letter-spacing: -.02em; font-weight: 800; }
.hero p { margin: 0; font-size: 20px; line-height: 1.55; color: var(--apoio); max-width: 540px; }
.botoes { display: flex; flex-wrap: wrap; gap: 14px; }
.numeros { display: flex; flex-wrap: wrap; gap: 28px; padding-top: 8px; }
.numeros > div { display: flex; flex-direction: column; gap: 2px; }
.numeros b { font-size: 30px; font-weight: 800; color: var(--azul); line-height: 1; }
.numeros b small { font-weight: 400; font-size: 20px; }
.numeros span { font-size: 14px; color: var(--cinza); }
.numeros .fio { width: 1px; background: #B9C6D6; }
.hero-arte { flex: 1 1 480px; min-width: 0; position: relative; min-height: 520px; }
.hero-foto { position: absolute; top: 0; right: 0; width: 88%; height: 420px; border-radius: 40px; overflow: hidden;
  box-shadow: 0 30px 60px rgba(28,53,104,.18); }
.hero-foto img { width: 100%; height: 100%; object-fit: cover; }
.hero-seta { position: absolute; left: -40px; bottom: 96px; width: 110%; height: auto; }
.hero-carro { position: absolute; left: 0; bottom: 0; width: 62%; height: auto; filter: drop-shadow(0 18px 24px rgba(20,33,61,.25)); }
.flutua { position: absolute; top: 28px; left: 0; background: #fff; border-radius: 20px; padding: 14px 18px; display: flex;
  align-items: center; gap: 12px; box-shadow: 0 14px 30px rgba(28,53,104,.14); }
.flutua i { width: 40px; height: 40px; border-radius: 12px; background: var(--gelo); display: inline-flex; align-items: center; justify-content: center; }
.flutua strong { display: block; font-size: 15px; color: var(--azul); }
.flutua span { font-size: 13px; color: var(--cinza); }
.pilula-azul { position: absolute; right: 18px; bottom: 150px; background: var(--azul); color: #fff; border-radius: 999px;
  padding: 10px 18px; font-size: 14px; font-weight: 700; }

/* faixa que corre */
.faixa { background: var(--azul); color: #fff; overflow: hidden; padding: 22px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.faixa-trilho { display: flex; width: max-content; animation: gvCorre 40s linear infinite; font-size: 22px; font-weight: 300; }
.faixa:hover .faixa-trilho { animation-play-state: paused; }
.faixa-trilho > span { display: inline-flex; align-items: center; gap: 34px; padding-right: 34px; white-space: nowrap; }
.faixa-trilho strong { font-weight: 700; }

/* como funciona */
.passos { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; margin-top: 56px; }
.passo { background: var(--nevoa); border-radius: var(--raio); padding: 32px 28px; display: flex; flex-direction: column; gap: 16px; }
.passo h3 { font-size: 22px; font-weight: 700; }
.passo p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--apoio); }
.passo .n { position: relative; z-index: 2; font-size: 15px; font-weight: 800; color: #fff; background: var(--verm); width: 40px; height: 40px;
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.passo.escuro { background: var(--azul); }
.passo.escuro h3 { color: #fff; }
.passo.escuro p { color: var(--claro); }
.passo.escuro .n { background: #fff; color: var(--azul); }
.rota { position: absolute; z-index: 1; left: 48px; right: calc(25% - 63px); top: 50px; height: 4px; pointer-events: none; overflow: visible; }

/* produtos */
.fundo-gelo { background: var(--gelo); }
.fundo-nevoa { background: var(--nevoa); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 10px 18px; border-radius: 999px;
  border: 1.5px solid var(--borda); background: #fff; color: var(--azul); font: inherit; font-size: 16px; font-weight: 700;
  text-decoration: none; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.chip:hover { border-color: var(--verm); color: var(--azul); }
.chip small { font-size: 13px; font-weight: 600; min-width: 26px; padding: 2px 8px; border-radius: 999px; background: var(--gelo); color: var(--azul); text-align: center; }
.chip[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); color: #fff; }
.chip[aria-pressed="true"] small { background: var(--verm); color: #fff; }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.prod { background: #fff; border-radius: 24px; overflow: hidden; display: flex; flex-direction: column;
  animation: gvSurge .45s cubic-bezier(.2,.7,.2,1) both; }
.prod-foto { height: 220px; display: flex; align-items: center; justify-content: center; padding: 16px; border-bottom: 1px solid #EEF2F6; background: #fff; }
.prod-foto img { max-width: 100%; max-height: 100%; object-fit: contain; }
.prod-foto span { font-size: 14px; color: var(--cinza); }
.prod-txt { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.etq { align-self: flex-start; font-size: 12px; font-weight: 600; color: var(--azul); background: var(--gelo); border-radius: 999px; padding: 3px 10px; }
.prod h3 { font-size: 17px; line-height: 1.3; font-weight: 700; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.prod p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--apoio); }
.pedir { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; font-weight: 700; color: var(--verm); text-decoration: none; }
.card-todos { position: relative; overflow: hidden; background: var(--azul); color: #fff; border-radius: 24px; padding: 30px 26px; min-height: 340px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; text-decoration: none; }
.card-todos:hover { color: #fff; }
.card-todos b { font-size: 44px; font-weight: 800; line-height: 1; }
.card-todos span { font-size: 20px; line-height: 1.3; font-weight: 300; }
.card-todos em { font-style: normal; align-self: flex-start; background: var(--verm); border-radius: 999px; padding: 12px 20px; font-weight: 700; font-size: 15px; margin-top: 6px; }
.card-todos svg { position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; }
.nota { margin: 0; font-size: 16px; color: var(--apoio); }
.carregando { grid-column: 1 / -1; color: var(--cinza); }

/* pagamento */
.duas { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.duas > * { flex: 1 1 440px; min-width: 0; }
.coluna { display: flex; flex-direction: column; gap: 20px; }
.pilulas { display: flex; flex-wrap: wrap; gap: 10px; }
.pilulas span { border: 1.5px solid var(--azul); color: var(--azul); border-radius: 999px; padding: 8px 16px; font-size: 15px; font-weight: 600; }
.formas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.forma { background: var(--nevoa); border-radius: var(--raio); padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.forma h3 { font-size: 21px; font-weight: 700; }
.forma p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--apoio); }
.forma.grande { grid-row: span 2; background: var(--azul); position: relative; overflow: hidden; }
.forma.grande h3 { color: #fff; font-size: 26px; }
.forma.grande p { color: var(--claro); font-size: 16px; position: relative; }
.forma.grande .aneis { position: absolute; right: -50px; bottom: -50px; width: 220px; height: 220px; }

/* quem somos */
.fotos-qs { position: relative; height: 520px; }
.fotos-qs .a { position: absolute; left: 0; top: 0; width: 64%; height: 380px; border-radius: 32px; overflow: hidden; }
.fotos-qs .b { position: absolute; right: 0; bottom: 0; width: 52%; height: 330px; border-radius: 32px; overflow: hidden; border: 8px solid var(--nevoa); }
.fotos-qs img { width: 100%; height: 100%; object-fit: cover; }
.anos { position: absolute; left: 24px; bottom: 24px; background: var(--verm); color: #fff; border-radius: 24px; padding: 20px 24px;
  box-shadow: 0 16px 30px rgba(199,31,38,.28); }
.anos b { display: block; font-size: 40px; font-weight: 800; line-height: 1; }
.anos span { font-size: 15px; font-weight: 600; }
blockquote { margin: 8px 0 0; padding: 22px 26px; background: #fff; border-radius: 24px; font-size: 20px; line-height: 1.45; color: var(--azul); font-weight: 600; }
.valores { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.valores div { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.45; color: var(--apoio); }
.valores svg { flex: none; margin-top: 2px; }
.valores strong { color: var(--azul); }

/* dúvidas */
.duvidas { display: flex; flex-wrap: wrap; gap: 56px; }
.duvidas > .coluna { flex: 1 1 340px; min-width: 0; }
.faq { flex: 2 1 560px; min-width: 0; }
.faq details { border-bottom: 1px solid #D5DEE8; }
.faq summary { list-style: none; cursor: pointer; padding: 24px 0; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  font-size: 20px; font-weight: 700; color: var(--azul); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--verm); }
.faq summary i { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--gelo); color: var(--azul); display: inline-flex;
  align-items: center; justify-content: center; font-style: normal; font-size: 22px; transition: transform .25s ease, background-color .2s ease; }
.faq details[open] summary i { background: var(--verm); color: #fff; transform: rotate(45deg); }
.faq p { margin: 0; padding: 0 56px 26px 0; font-size: 17px; line-height: 1.6; color: var(--apoio); }

/* contato */
.contato { position: relative; overflow: hidden; background: var(--azul); color: #fff; }
.contato h2 { color: #fff; font-size: clamp(36px, 4.5vw, 60px); }
.contato .sub { color: var(--claro); max-width: 560px; }
.contato .duas { align-items: flex-start; }
.contato .deco { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.contato .cx { position: relative; }
.logo-branca { height: 54px; width: auto; }
.info { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: var(--raio); padding: 30px; display: flex; flex-direction: column; gap: 22px; }
.info div { display: flex; flex-direction: column; gap: 6px; font-size: 17px; line-height: 1.5; }
.info small { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #AFC0D6; }
.info a { color: #fff; }
.info hr { border: 0; height: 1px; background: rgba(255,255,255,.18); margin: 0; }
.rodape { background: var(--azul-esc); color: #AFC0D6; }
.rodape .cx { padding-top: 26px; padding-bottom: 26px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 14px; }
.rodape a { color: #AFC0D6; }

/* página de produtos */
.vit-topo { background: var(--gelo); position: relative; overflow: hidden; }
.vit-topo .cx { position: relative; padding-top: 64px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 26px; }
.vit-topo h1 { font-size: clamp(40px, 5vw, 64px); line-height: 1.02; letter-spacing: -.02em; font-weight: 800; }
.busca { display: flex; flex-direction: column; gap: 8px; max-width: 560px; }
.busca label { font-size: 15px; font-weight: 700; color: var(--azul); }
.busca div { position: relative; }
.busca svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); }
.busca input { width: 100%; min-height: 54px; padding: 14px 18px 14px 50px; border-radius: 999px; border: 1.5px solid var(--borda); background: #fff;
  font: inherit; font-size: 17px; color: var(--texto); }
.vit-lista .cx { padding-top: 32px; padding-bottom: 88px; display: flex; flex-direction: column; gap: 24px; }
.vazio { background: #fff; border-radius: var(--raio); padding: 40px 32px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.vazio h2 { font-size: 26px; }
.mais { align-self: center; }

/* movimento */
@keyframes gvCorre { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes gvSurge { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes gvEntra { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes gvProg { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes gvAnda { from { transform: translateX(0); } to { transform: translateX(70%); } }
@keyframes gvTraca { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes gvSobe { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@keyframes gvLiftA { from { transform: translateY(40px); } to { transform: translateY(-40px); } }
@keyframes gvLiftB { from { transform: translateY(90px); } to { transform: translateY(-70px); } }
.entra { animation: gvEntra .8s cubic-bezier(.2,.7,.2,1) both; }
.entra.d1 { animation-delay: .08s; } .entra.d2 { animation-delay: .18s; } .entra.d3 { animation-delay: .3s; } .entra.d4 { animation-delay: .42s; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .progresso { animation: gvProg linear both; animation-timeline: scroll(root); }
    .hero-carro { animation: gvAnda linear both; animation-timeline: view(); animation-range: cover 45% cover 100%; }
    .passos { view-timeline-name: --passos; }
    .rota path { stroke-dasharray: 1; animation: gvTraca linear both; animation-timeline: --passos; animation-range: entry 40% cover 55%; }
    .passo { animation: gvSobe linear both; animation-timeline: --passos; }
    .passo:nth-child(2) { animation-range: entry 30% cover 35%; }
    .passo:nth-child(3) { animation-range: entry 45% cover 42%; }
    .passo:nth-child(4) { animation-range: entry 60% cover 49%; }
    .passo:nth-child(5) { animation-range: entry 75% cover 56%; }
    section h2 { animation: gvSobe linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
    .fotos-qs .a { animation: gvLiftA linear both; animation-timeline: view(); animation-range: cover; }
    .fotos-qs .b { animation: gvLiftB linear both; animation-timeline: view(); animation-range: cover; }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .faixa-trilho, .prod, .entra { animation: none !important; }
}
@media (max-width: 1100px) { .rota { display: none; } }
@media (max-width: 860px) {
  .nav, .so-largo { display: none !important; }
  .secao { padding-top: 72px; padding-bottom: 72px; }
  .hero-arte { min-height: 400px; }
  .hero-foto { height: 320px; }
  .fotos-qs { height: 420px; }
  .fotos-qs .a { height: 300px; }
  .fotos-qs .b { height: 250px; }
}
@media (max-width: 520px) {
  .topo .btn { padding: 10px 14px; font-size: 14px; }
  .topo-logo img { height: 36px; }
  .hero .cx { padding-top: 48px; }
  .hero-arte { min-height: 330px; }
  .hero-foto { height: 260px; width: 94%; }
  .pilula-azul { bottom: 110px; }
  .faq p { padding-right: 0; }
}