/* Ravel Automóveis: o pátio da loja (LEITURA.md). Piso de bloquete em espinha de peixe das fotos, tinta de demarcação no
   amarelo do logo, preto do cabeçalho atual, Poppins do site atual (esticada na vertical só nas letras pintadas no chão). */
:root {
  --fundo: #f2f1ef;
  --tinta: #0e0e0e;
  --suave: #57554f;
  --marca: #FEE100;
  --marca-2: #0e0e0e;
  --amarelo: #FEE100;
  --concreto: #5f5c56;
  --linha: #d8d6d1;
  --cartao: #ffffff;
  --fonte-titulo: "Poppins", system-ui, sans-serif;
  --fonte-texto: "Poppins", system-ui, sans-serif;
  --raio: 6px;
  --wa-cor: #FEE100;
  --wa-tinta: #0e0e0e;
}
body { font-size: clamp(15px, 1vw, 17px); }
h1, h2, h3 { font-weight: 800; letter-spacing: -0.025em; }
:focus-visible { outline-color: var(--tinta); }
.patio :focus-visible, .busca :focus-visible, .hero :focus-visible, .topo :focus-visible, .rodape :focus-visible, .financiar :focus-visible { outline-color: var(--amarelo); }

/* botão: preto sobre amarelo (amarelo claro, texto escuro) */
.botao { --b-tinta: var(--tinta); border-radius: var(--raio); font-weight: 600; }
.botao--amarelo { --b-fundo: var(--amarelo); --b-tinta: #0e0e0e; }
.botao--amarelo:hover { box-shadow: 0 0 0 3px #0e0e0e, 0 0 0 5px var(--amarelo); }
.wa-flutuante { background: var(--amarelo); color: #0e0e0e; }

/* letras pintadas no chão (tinta de pavimento): Poppins 800 esticada na vertical, sempre em caixa alta */
.pintado { display: block; width: fit-content; font-family: var(--fonte-titulo); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; line-height: 1; color: var(--amarelo); transform: scaleY(1.75); transform-origin: 0 0; margin: 0 0 .75em; }
.seta-chao { width: 28px; height: auto; color: var(--amarelo); flex: none; }

/* piso de bloquete */
.patio { position: relative; background: #4e4b46 url("../img/piso-escuro.svg") repeat; background-size: 56px 56px; color: #f4f3f0; }
.patio::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(14 14 14 / .38), rgb(14 14 14 / .1) 30%, rgb(14 14 14 / .1) 70%, rgb(14 14 14 / .38)); pointer-events: none; }
.patio > .wrap { position: relative; }

/* cabeçalho preto como o do site atual */
.topo { position: sticky; top: 0; z-index: 50; background: #0e0e0e; color: #f4f3f0; }
.topo.rolou { box-shadow: 0 10px 30px -18px rgb(0 0 0 / .7); }
.topo__linha { display: flex; align-items: center; gap: 28px; min-height: 76px; }
.topo__logo img { width: 168px; height: auto; }
.topo__nav { display: flex; gap: 26px; margin-left: auto; font-weight: 500; font-size: 15px; }
.topo__nav a { padding-block: 8px; border-bottom: 3px solid transparent; }
.topo__nav a:hover { border-color: var(--amarelo); }
.topo__wa { padding: .75em 1.1em; font-size: .92rem; }
.topo__menu { display: none; width: 46px; height: 46px; border: 1px solid #3a3a3a; border-radius: var(--raio); background: #0e0e0e; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 6px; }
.topo__menu span { display: block; width: 20px; height: 2px; background: #f4f3f0; transition: transform .3s; }
.menu-aberto .topo__menu span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-aberto .topo__menu span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* hero: texto no preto à esquerda; à direita a foto do pátio e, embaixo dela, as 3 faixas pintadas no bloquete */
.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: #0e0e0e; color: #f4f3f0; }
.hero__texto { display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: clamp(40px, 6vw, 96px) clamp(20px, 4vw, 64px); }
.hero h1 { font-size: clamp(38px, 4.6vw, 72px); line-height: 1.02; }
.hero__lead { font-size: clamp(16px, 1.25vw, 19px); color: #d9d8d4; max-width: 34em; }
.hero__texto .botao { align-self: flex-start; }
.hero__onde { font-size: 14px; color: #a9a7a2; max-width: 32em; }
.hero__patio { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-width: 0; }
.hero__foto { margin: 0; position: relative; overflow: hidden; min-height: 0; aspect-ratio: 16 / 10; }
.hero__foto img { position: absolute; inset: -6% 0 auto; width: 100%; height: 112%; object-fit: cover; object-position: 50% 30%; }
.hero__faixas { position: relative; background: #4e4b46 url("../img/piso-escuro.svg") repeat; background-size: 56px 56px; padding: 14px clamp(12px, 2vw, 28px) 18px; }
.hero__faixas-rot { position: relative; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #ecebe7; margin-bottom: 10px; }
.entradas { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* divisão de faixa: tracejado branco entre as faixas, linha contínua amarela nas bordas */
.entradas::before, .entradas::after { content: ""; position: absolute; top: 0; bottom: 0; width: 6px; background: var(--amarelo); }
.entradas::before { left: 0; }
.entradas::after { right: 0; }
.entrada { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 12px; padding: 10px 14px 4px 18px; min-height: 120px; color: #f4f3f0; }
.entrada + .entrada { background: repeating-linear-gradient(180deg, #f2f1ef 0 22px, transparent 22px 40px) left top / 5px 100% no-repeat; }
.entrada .seta-chao { grid-row: span 2; width: 22px; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.entrada:hover .seta-chao, .entrada:focus-visible .seta-chao { transform: translateY(-6px); }
.entrada__pintado { font-size: clamp(18px, 1.7vw, 26px); margin-bottom: 1.55em; }
.entrada__resumo { font-size: 13px; line-height: 1.35; color: #e4e2de; }

/* cabeças de seção */
.sec-cab { display: grid; gap: 12px; max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); }
.sec-cab h2 { font-size: clamp(30px, 3.4vw, 50px); }
.sec-cab p { color: var(--suave); font-size: clamp(15px, 1.1vw, 18px); }
.sec-cab--claro p { color: #e2e0dc; }

/* vagas demarcadas: duas faixas amarelas nas laterais e a de fundo, ano pintado na cabeceira, foto e ficha */
.novidades, .estoque, .encomenda, .loja { padding-block: clamp(56px, 8vw, 112px); }
.vagas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 36px); }
.vaga { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 14px 16px 0; border: 6px solid var(--amarelo); border-bottom: 0; }
.vaga::after { content: ""; position: absolute; left: -6px; right: -6px; bottom: -22px; height: 22px; border-inline: 6px solid var(--amarelo); pointer-events: none; }
.vaga__ano { font-size: clamp(26px, 2.4vw, 34px); margin: 2px 0 calc(.75em + 4px) 2px; }
.vaga__foto { margin: 0; position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 3px; background: #3d3b37; min-height: 0; }
.vaga__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vaga__ficha { display: flex; flex-direction: column; gap: 6px; flex: 1; margin: 12px -16px 0; padding: 16px 16px 18px; background: var(--cartao); color: var(--tinta); }
.vaga__ficha h3 { font-size: clamp(18px, 1.35vw, 21px); line-height: 1.2; letter-spacing: -0.01em; }
.vaga__ficha h3 span { display: block; font-size: 13px; font-weight: 500; color: var(--suave); letter-spacing: 0; margin-top: 2px; }
.vaga__dados { font-size: 13.5px; color: var(--suave); }
.vaga__preco { font-size: clamp(22px, 1.8vw, 27px); font-weight: 800; letter-spacing: -0.02em; margin-top: 2px; }
.vaga__checks { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 2px 0 0; padding: 0; list-style: none; font-size: 13px; color: #33312d; }
.vaga__checks li { display: flex; align-items: center; gap: 6px; }
.vaga__checks li::before { content: ""; width: 11px; height: 6px; border-left: 2.5px solid var(--tinta); border-bottom: 2.5px solid var(--tinta); transform: rotate(-45deg) translateY(-2px); }
.vaga__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: auto; padding-top: 12px; }
.vaga__acoes .botao { padding: .7em 1em; font-size: .9rem; }
.vaga__link { display: inline-flex; align-items: center; min-height: 40px; font-size: 14px; font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--amarelo); }
.vaga__link:hover { text-decoration-color: currentColor; }
.vaga--grande .vaga__ano { font-size: clamp(30px, 3vw, 44px); }
.vaga--grande .vaga__ficha h3 { font-size: clamp(20px, 1.6vw, 24px); }

/* três faixas de rolamento: nome e seta pintados no começo, tracejado branco entre uma faixa e outra */
.faixa-rol { position: relative; padding-block: clamp(36px, 5vw, 64px) clamp(56px, 6vw, 80px); }
.faixa-rol + .faixa-rol::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: repeating-linear-gradient(90deg, #f2f1ef 0 46px, transparent 46px 84px); }
.faixa-rol__cab { display: flex; align-items: flex-start; gap: 18px; margin-bottom: clamp(26px, 3vw, 40px); }
.faixa-rol__cab .seta-chao { width: 30px; margin-top: 4px; }
.faixa-rol__num { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #e7e5e1; margin-bottom: 8px; }
.faixa-rol__nome { font-size: clamp(34px, 4.4vw, 64px); }
.faixa-rol__resumo { font-size: 15px; color: #ecebe7; margin-top: -0.2em; }

/* busca e marcas (blocos 5 e 6 do site atual) */
.busca { background: #0e0e0e; color: #f4f3f0; padding-block: clamp(48px, 6vw, 80px); }
.busca__titulo { font-size: clamp(26px, 2.6vw, 38px); margin-bottom: 22px; }
.busca__form { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) auto; gap: 12px; align-items: end; }
.busca .campo span { color: #bdbbb6; }
.busca select { background: #1c1c1c; color: #f4f3f0; border-color: #3a3a3a; }
.busca__form .botao { min-height: 50px; padding-inline: 2em; }
.marcas__titulo { font-size: clamp(20px, 1.8vw, 26px); margin: clamp(40px, 5vw, 64px) 0 18px; }
.marcas { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.marcas a { display: grid; justify-items: center; gap: 6px; padding: 14px 8px 10px; border-radius: var(--raio); background: #fff; color: var(--tinta); transition: transform .3s; }
.marcas a:hover { transform: translateY(-3px); box-shadow: 0 0 0 3px var(--amarelo); }
.marcas img { width: 100%; max-width: 96px; height: 48px; object-fit: contain; }
.marcas span { font-size: 12px; font-weight: 600; color: var(--suave); }

/* campos */
.form { display: grid; gap: 16px; }
.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.campo { display: grid; gap: 6px; min-width: 0; font-size: 14px; }
.campo--largo { grid-column: 1 / -1; }
.campo span { font-weight: 600; font-size: 13px; color: var(--suave); }
.campo i { font-style: normal; font-weight: 400; }
.campo input, .campo select, .campo textarea { width: 100%; min-height: 48px; padding: 11px 13px; border: 1.5px solid #c9c7c2; border-radius: var(--raio); background: #fff; color: var(--tinta); font-size: 15px; }
.campo textarea { resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--tinta); box-shadow: 0 0 0 3px var(--amarelo); }
.radios { display: flex; gap: 18px; min-height: 48px; align-items: center; }
.radios label { display: flex; align-items: center; gap: 8px; font-weight: 500; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { font-weight: 800; font-size: 15px; margin-bottom: 10px; padding: 0; }
.form .botao { justify-self: start; }
.form__ok { color: var(--tinta); }

/* proposta, troca e contato: chão claro */
.proposta, .troca, .contato { padding-block: clamp(56px, 8vw, 104px); }
.proposta { background: #fff; }
.proposta__grade, .troca__grade, .contato__grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.troca { background: var(--fundo); }
.form--avaliacao fieldset + fieldset { margin-top: 6px; }

/* encomenda: a vaga vazia */
.encomenda__grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.vaga--vazia { min-height: clamp(260px, 26vw, 380px); justify-content: center; align-items: center; padding: 24px; }
.vaga--vazia::after { bottom: -28px; height: 28px; }
.vaga__palavra { font-size: clamp(30px, 3.6vw, 56px); margin: 0 0 1.4em; }
.encomenda__texto { display: grid; gap: 18px; justify-items: start; }
.encomenda__texto h2 { font-size: clamp(30px, 3.4vw, 50px); }
.encomenda__texto > p { color: #e7e5e1; font-size: clamp(15px, 1.1vw, 18px); }
.fala { margin: 0; padding: 18px 20px; background: #fff; color: var(--tinta); border-radius: var(--raio); max-width: 36em; }
.fala blockquote { margin: 0 0 8px; font-size: clamp(16px, 1.2vw, 19px); font-weight: 500; line-height: 1.45; }
.fala figcaption { font-size: 13px; color: var(--suave); }
.fala a { text-decoration: underline; text-underline-offset: 3px; }
.fala__link { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px; }

/* financiar: preto, ficha recolhida */
.financiar { background: #0e0e0e; color: #f4f3f0; padding-block: clamp(56px, 8vw, 104px); }
.financiar__grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.ficha { background: #fff; color: var(--tinta); border-radius: var(--raio); }
.ficha__abrir { width: 100%; border: 0; background: none; color: inherit; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; padding: 14px 20px; font-weight: 700; font-size: 17px; cursor: pointer; list-style: none; }
.ficha__abrir b { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--amarelo); font-size: 22px; line-height: 1; transition: transform .3s; }
.ficha__abrir[aria-expanded="true"] b { transform: rotate(45deg); }
.ficha .form { padding: 4px 20px 22px; gap: 22px; }
.form--ficha fieldset { padding-top: 16px; border-top: 1px solid var(--linha); }

/* a loja e a nota pintada no chão */
.loja__grade { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.loja__texto { display: grid; gap: 16px; }
.loja__texto h2 { font-size: clamp(30px, 3.4vw, 50px); }
.loja__texto p { color: #ecebe7; font-size: clamp(15px, 1.1vw, 18px); max-width: 38em; }
.nota-chao { display: grid; gap: 0; justify-items: start; padding: 22px 26px 18px; border-left: 6px solid var(--amarelo); }
.nota-chao__n { font-size: clamp(32px, 3.6vw, 54px); margin-bottom: .9em; }
.nota-chao__t { font-size: 15px; font-weight: 600; color: #f4f3f0; text-decoration: underline; text-decoration-color: var(--amarelo); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.nota-chao:hover .nota-chao__t { text-decoration-color: #fff; }

/* contato */
.contato { background: #fff; }
.contato__texto { display: grid; gap: 18px; }
.contato__texto h2 { font-size: clamp(30px, 3.4vw, 50px); }
.contato__texto > p { color: var(--suave); }
.contato__dados { display: grid; gap: 14px; margin: 6px 0 0; }
.contato__dados div { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 12px; padding-top: 12px; border-top: 1px solid var(--linha); }
.contato__dados dt { font-weight: 700; font-size: 14px; }
.contato__dados dd { margin: 0; font-size: 15px; }
.contato__dados a[data-wa], .contato__dados a[data-email] { text-decoration: underline; text-underline-offset: 3px; }

/* rodapé preto */
.rodape { background: #0e0e0e; color: #cfcdc8; padding-block: 56px 40px; font-size: 14px; }
.rodape__grade { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
.rodape__marca img { width: 190px; margin-bottom: 14px; }
.rodape__rot { font-weight: 700; color: #fff; margin-bottom: 8px; }
.rodape ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.rodape a { text-decoration: underline; text-decoration-color: #555; text-underline-offset: 3px; }
.rodape a:hover { text-decoration-color: var(--amarelo); }
.rodape__miudo { grid-column: 1 / -1; padding-top: 22px; border-top: 1px solid #2a2a2a; font-size: 12.5px; color: #8f8d88; }

/* telas médias */
@media (max-width: 1180px) {
  .marcas { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .busca__form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero__texto { padding-block: 44px 36px; }
  .vagas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proposta__grade, .troca__grade, .contato__grade, .financiar__grade, .encomenda__grade, .loja__grade { grid-template-columns: minmax(0, 1fr); }
  .vaga--vazia { max-width: 420px; }
}
@media (max-width: 900px) {
  .topo__nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; padding: 8px 20px 16px; background: #0e0e0e; border-bottom: 1px solid #2a2a2a; }
  .menu-aberto .topo__nav { display: flex; }
  .topo__nav a { border-bottom: 1px solid #2a2a2a; }
  .topo__menu { display: flex; }
  .topo__wa { margin-left: auto; }
}
@media (max-width: 640px) {
  .topo__linha { min-height: 64px; gap: 12px; }
  .topo__logo img { width: 132px; }
  .topo__wa { display: none; }
  .topo__menu { margin-left: auto; }
  .hero h1 { font-size: clamp(34px, 10vw, 44px); }
  .hero__foto { aspect-ratio: 4 / 3; }
  .entrada { grid-template-columns: minmax(0, 1fr); padding: 8px 8px 4px 14px; min-height: 0; }
  .entrada .seta-chao { grid-row: auto; width: 16px; margin-bottom: 8px; }
  .entrada__pintado { font-size: 18px; }
  .entrada__resumo { font-size: 12px; }
  .vagas { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .vaga { padding: 12px 12px 0; }
  .vaga__ficha { margin-inline: -12px; padding: 14px 14px 16px; }
  .vaga__acoes .botao { flex: 1 1 100%; }
  .vaga__acoes .vaga__link { min-height: 44px; }
  .faixa-rol__cab { gap: 12px; }
  .faixa-rol__cab .seta-chao { width: 22px; }
  .busca__form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .busca__form .botao { grid-column: 1 / -1; }
  .marcas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .campos { grid-template-columns: minmax(0, 1fr); }
  .form .botao { justify-self: stretch; }
  .contato__dados div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .rodape__grade { grid-template-columns: minmax(0, 1fr); }
  .nota-chao { padding: 16px 0 12px 18px; }
  /* no celular, as vagas das faixas ficam compactas: foto à esquerda, ficha à direita (as novidades seguem grandes) */
  .faixa-rol .vagas { gap: 40px; }
  .faixa-rol .vaga { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); column-gap: 10px; padding: 10px 10px 0; }
  .faixa-rol .vaga__ano { grid-column: 1 / -1; font-size: 24px; }
  .faixa-rol .vaga__foto { align-self: start; }
  .faixa-rol .vaga__ficha { margin: 0; padding: 10px 10px 12px; gap: 4px; }
  .faixa-rol .vaga__ficha h3 { font-size: 16px; }
  .faixa-rol .vaga__ficha h3 span { font-size: 12px; }
  .faixa-rol .vaga__dados { font-size: 12.5px; }
  .faixa-rol .vaga__preco { font-size: 20px; }
  .faixa-rol .vaga__checks { display: none; }
  .faixa-rol .vaga__acoes { gap: 0 12px; padding-top: 6px; }
  .faixa-rol .vaga__acoes .botao { padding: .6em .8em; }
  .faixa-rol .vaga__link { font-size: 13px; }
}