/* ==========================================================================
   Página "Troca de óleo de câmbio automático" — complementa pneus.css, servicos.css e oleo.css (.ol-ico, .ol-checks).
   Ritmo: escuro (hero) > escuro (fluido) > claro (avaliação) > cinza (tecnologia) > escuro (como funciona) > claro (quando) > cinza (diferenciais) > escuro (FAQ) > âmbar (CTA) > claro
   ========================================================================== */
.cb .hl { color: var(--c-amber); }
.pn.cb h2 { font-size: clamp(26px, 3vw, 40px); }

/* 01 · Hero: a máquina fica inteira à direita (altura proporcional à arte 1832x859) */
.cb-hero { --cb-hdr: 92px; position: relative; display: flex; align-items: flex-start; height: calc(var(--cb-hdr) + clamp(560px, 46.7vw, 760px)); padding-top: var(--cb-hdr); background: #050505; overflow: hidden; }
.cb-hero__bg { position: absolute; left: 0; right: 0; bottom: 0; top: var(--cb-hdr); width: 100%; height: calc(100% - var(--cb-hdr)); object-fit: cover; object-position: 88% 50%; }
.cb-hero__shade { position: absolute; left: 0; right: 0; bottom: 0; top: var(--cb-hdr); background: linear-gradient(90deg, rgba(5,5,5,0.92) 0%, rgba(5,5,5,0.72) 36%, rgba(5,5,5,0.18) 58%, rgba(5,5,5,0) 70%); }
.cb-hero__inner { position: relative; width: 100%; padding-top: 56px; padding-bottom: 72px; }
.cb-hero__content { max-width: 560px; }
.pn.cb .cb-hero h1 { color: #fff; font-size: clamp(34px, 3.9vw, 56px); line-height: 1.02; letter-spacing: -0.02em; margin-bottom: 24px; }
.pn.cb .cb-hero__lead { color: rgba(255,255,255,0.84); font-size: 18px; max-width: 500px; margin: 0 0 32px; }

/* 02 · Funções do fluido (escuro) */
.cb-fluid { background: #0a0a0a; padding: 100px 0; border-top: 1px solid rgba(254,190,14,0.18); overflow: hidden; }
.cb-fluid::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 50% 60% at 0% 100%, rgba(254,190,14,0.1), transparent 70%); }
.cb-fluid__grid { position: relative; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
.cb-fluid__grid.has-art { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.pn.cb .cb-fluid h2 { color: #fff; }
.cb-fluid__text p { color: rgba(255,255,255,0.74); max-width: 48ch; }
.cb-fluid__fig { grid-column: 2; grid-row: 1 / span 2; margin: 0; border-radius: 22px; overflow: hidden; border: 1px solid rgba(254,190,14,0.22); }
.cb-fluid__fig img { display: block; width: 100%; height: auto; }
.cb-fluid__list { display: grid; gap: 22px; align-content: start; }
.cb-fluid__list li { display: flex; gap: 18px; align-items: flex-start; padding: 20px 22px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); border-radius: 16px; }
.pn.cb .cb-fluid__list h3 { color: #fff; font-size: 17px; margin: 2px 0 6px; line-height: 1.25; }
.pn.cb .cb-fluid__list p { color: rgba(255,255,255,0.7); font-size: 15.5px; margin: 0; }
.cb-fluid__grid:not(.has-art) .cb-fluid__list { grid-column: 2; }

/* 03 · Avaliação prévia (claro) */
.cb-eval { background: #fff; padding: 100px 0; }
.cb-eval .pn-split { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.cb-eval__fig { margin: 0; max-width: 480px; justify-self: center; }
.cb-eval__fig img { display: block; width: 100%; height: auto; border-radius: 22px; box-shadow: 0 30px 60px -30px rgba(10,10,10,0.5); }
.cb-eval__fig figcaption { margin-top: 12px; font-size: 13.5px; line-height: 1.5; color: var(--c-gray-600); }
.cb-eval .btn { margin-top: 22px; }

/* 04 · Tecnologia (cinza claro, composição menor e documental) */
.cb-tech { background: var(--c-gray-100); padding: 90px 0; }
.cb-tech__grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 64px; align-items: center; max-width: 960px; }
.cb-tech__fig { margin: 0; }
.cb-tech__fig img { display: block; width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--c-gray-200); box-shadow: 0 24px 48px -28px rgba(10,10,10,0.5); }
.cb-tech__text p { max-width: 54ch; }

/* 05 · Como funciona (escuro) */
.cb-how { background: #050505; padding: 100px 0; border-top: 1px solid rgba(254,190,14,0.18); }
.cb-how__head { max-width: 760px; margin: 0 auto 36px; text-align: center; }
.pn.cb .cb-how h2 { color: #fff; margin: 0; }
.cb-how__fig { margin: 0 auto; max-width: 1100px; border-radius: 22px; overflow: hidden; border: 1px solid rgba(254,190,14,0.22); background: #050505; }
.cb-how__fig img { display: block; width: 100%; height: auto; }
.cb-how__steps { max-width: 1100px; margin: 36px auto 0; }
.pn.cb .cb-how__steps h3 { color: #fff; font-size: 17px; margin-bottom: 18px; }
.cb-how__steps ol { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; list-style: none; padding: 0; margin: 0; counter-reset: st; }
.cb-how__steps li { position: relative; padding-top: 16px; border-top: 2px solid rgba(254,190,14,0.5); display: grid; gap: 6px; align-content: start; }
.cb-how__steps strong { color: #fff; font-size: 15.5px; line-height: 1.3; }
.cb-how__steps span { color: rgba(255,255,255,0.68); font-size: 14.5px; line-height: 1.55; }

/* 06 · Quando procurar (claro) */
.cb-when { background: #fff; padding: 100px 0; }
.cb-when__head { margin-bottom: 40px; max-width: 760px; }
.cb-when__head h2 { margin: 0; }
.cb-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; list-style: none; padding: 0; margin: 0 0 40px; }
.cb-cards li { margin: 0; }
.cb-cards img { display: block; width: 100%; height: auto; aspect-ratio: 522 / 720; object-fit: cover; border-radius: 20px; box-shadow: 0 22px 44px -28px rgba(10,10,10,0.5); }
.cb-when__list { max-width: 860px; }
.cb-when .pn-note { margin-top: 22px; }

/* ---------- Tablet / mobile ---------- */
@media (max-width: 1100px) {
	.cb-fluid__grid { gap: 40px; }
	.cb-tech__grid { gap: 44px; }
	.cb-how__steps ol { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 980px) {
	.cb-fluid, .cb-eval, .cb-how, .cb-when { padding: 80px 0; }
	.cb-tech { padding: 72px 0; }
	.cb-fluid__grid, .cb-fluid__grid.has-art { grid-template-columns: 1fr; }
	.cb-fluid__fig, .cb-fluid__grid:not(.has-art) .cb-fluid__list { grid-column: 1; grid-row: auto; }
	.cb-eval .pn-split { grid-template-columns: 1fr; }
	.cb-eval__fig { justify-self: start; max-width: 420px; }
	.cb-cards { grid-template-columns: 1fr 1fr; }
	.cb-cards li:last-child { grid-column: 1 / -1; max-width: calc(50% - 12px); }
}
@media (max-width: 760px) {
	.cb-hero { display: block; height: auto; }
	.cb-hero__bg { position: relative; top: auto; left: auto; right: auto; bottom: auto; display: block; width: 100%; height: auto; aspect-ratio: 1832 / 859; object-position: 85% 50%; }
	.cb-hero__shade { top: var(--cb-hdr); bottom: auto; height: 46.9vw; background: linear-gradient(180deg, rgba(5,5,5,0) 60%, #050505 100%); }
	.cb-hero__inner { padding-top: 28px; padding-bottom: 60px; }
	.cb-hero__content { max-width: none; }
	.pn.cb .cb-hero h1 { font-size: clamp(30px, 8.6vw, 42px); }
	.pn.cb .cb-hero__lead { font-size: 16px; }
	.cb-hero .btn { width: 100%; justify-content: center; white-space: normal; text-align: center; }
}
@media (max-width: 620px) {
	.cb-hero { --cb-hdr: 74px; }
	.cb-fluid, .cb-eval, .cb-how, .cb-when { padding: 64px 0; }
	.cb-tech { padding: 60px 0; }
	.cb-eval__fig { max-width: none; justify-self: stretch; }
	.cb-eval .btn { width: 100%; justify-content: center; }
	.cb-tech__grid { grid-template-columns: 1fr; gap: 28px; }
	.cb-tech__fig { max-width: 240px; }
	.cb-how__head { text-align: left; }
	.cb-how__fig { border-radius: 16px; }
	.cb-how__steps ol { grid-template-columns: 1fr; gap: 18px; }
	.cb-cards { grid-template-columns: 1fr; gap: 18px; }
	.cb-cards li:last-child { max-width: none; }
	.cb-cards img { border-radius: 18px; }
}

/* Etapas em fotos (substituem o infográfico); os arquivos rota92-cambio-etapa-N-*.webp podem ser trocados pelas fotos reais */
.cb-etapas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; list-style: none; padding: 0; margin: 0 auto; max-width: 1100px; }
.cb-etapas li { margin: 0; display: grid; gap: 14px; align-content: start; }
.cb-etapas__head { display: flex; align-items: center; gap: 14px; padding: 0 2px; }
.cb-etapas__num { font-family: var(--font-display); font-size: 40px; line-height: 1; color: var(--c-amber); padding-right: 14px; border-right: 1px solid rgba(254,190,14,0.4); }
.cb-etapas__head div { display: grid; gap: 2px; }
.cb-etapas__head strong { color: #fff; font-size: 19px; line-height: 1.2; }
.cb-etapas__head span:not(.cb-etapas__num) { color: rgba(255,255,255,0.7); font-size: 14px; line-height: 1.4; }
.cb-etapas figure { margin: 0; border-radius: 18px; overflow: hidden; border: 1px solid rgba(254,190,14,0.22); background: #050505; }
.cb-etapas img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; }
.pn .cb-how__note { max-width: 1100px; margin: 22px auto 0; text-align: center; font-size: 13px; color: rgba(255,255,255,0.55); }
@media (max-width: 980px) { .cb-etapas { grid-template-columns: 1fr 1fr; } .cb-etapas li:last-child { grid-column: 1 / -1; max-width: calc(50% - 11px); } }
@media (max-width: 620px) { .cb-etapas { grid-template-columns: 1fr; gap: 28px; } .cb-etapas li:last-child { max-width: none; } .cb-etapas__num { font-size: 34px; } }