/* ==========================================================================
   Página "Troca de óleo e filtros" (/troca-de-oleo-macae/)
   Complementa pneus.css (base .pn, .pn-crumb, .pn-split, .pn-media, .pn-note, .faq, .location).
   Ritmo: escuro (hero) > escuro (lubrificação) > claro > escuro (etapas) > cinza > claro > escuro (FAQ) > escuro (CTA) > claro
   ========================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ol .hl { color: var(--c-amber); }
.ol-ico svg { display: block; width: 28px; height: 28px; }
.ol-ico { display: inline-flex; flex: 0 0 52px; width: 52px; height: 52px; align-items: center; justify-content: center; border-radius: 14px; background: rgba(254,190,14,0.12); color: var(--c-amber); }

/* 01 · Hero (começa depois do header fixo; --ol-hdr = altura do header) */
.ol-hero { --ol-hdr: 92px; display: flex; align-items: flex-start; min-height: calc(var(--ol-hdr) + clamp(560px, 66vh, 640px)); padding-top: var(--ol-hdr); background: #050505; overflow: hidden; }
.ol-hero__bg { position: absolute; left: 0; right: 0; bottom: 0; top: var(--ol-hdr); width: 100%; height: calc(100% - var(--ol-hdr)); object-fit: cover; object-position: 75% 50%; }
.ol-hero__shade { position: absolute; left: 0; right: 0; bottom: 0; top: var(--ol-hdr); background: linear-gradient(90deg, rgba(5,5,5,0.9) 0%, rgba(5,5,5,0.55) 40%, rgba(5,5,5,0) 62%); }
.ol-hero__inner { position: relative; width: 100%; padding-top: 56px; padding-bottom: 88px; }
.ol-hero__content { max-width: 600px; }
.pn.ol .ol-hero h1 { color: #fff; font-size: clamp(36px, 4.3vw, 60px); line-height: 1; letter-spacing: -0.02em; margin-bottom: 26px; }
.pn.ol .ol-hero__lead { color: rgba(255,255,255,0.84); font-size: 18px; max-width: 540px; margin: 0 0 34px; }

/* 02 · Por que o óleo é importante (escuro) */
.ol-why { background: #0a0a0a; padding: 110px 0; border-top: 1px solid rgba(254,190,14,0.18); overflow: hidden; }
.ol-why::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 50% 50% at 90% 70%, rgba(254,190,14,0.1), transparent 70%); }
.ol-why .wrap { position: relative; }
.ol-why__head { max-width: 760px; margin-bottom: 48px; }
.pn.ol .ol-why h2, .pn.ol .ol-steps h2 { color: #fff; }
.ol-why__head p { color: rgba(255,255,255,0.74); }
.ol-why__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.9fr); gap: 56px; align-items: center; }
.ol-why__fig { margin: 0; border-radius: 22px; overflow: hidden; border: 1px solid rgba(254,190,14,0.22); background: #050505; }
.ol-why__fig img { display: block; width: 100%; height: auto; }
.ol-why__list { display: grid; gap: 26px; }
.ol-why__list li { display: flex; gap: 18px; align-items: flex-start; }
.pn.ol .ol-why__list h3 { color: #fff; font-size: 18px; margin: 2px 0 6px; }
.pn.ol .ol-why__list p { color: rgba(255,255,255,0.7); font-size: 15.5px; margin: 0; }

/* 03 · Óleo e filtros adequados (claro) */
.ol-spec { background: #fff; padding: 110px 0; }
.ol-checks { display: grid; gap: 12px; margin: 26px 0 22px; }
.ol-checks li { position: relative; padding-left: 38px; font-weight: 600; color: var(--c-black); font-size: 17px; line-height: 1.45; }
.ol-checks li::before { content: ""; position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%; background: var(--c-amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; }

/* 04 · Etapas (escuro) */
.ol-steps { background: #050505; padding: 110px 0; border-top: 1px solid rgba(254,190,14,0.18); }
.ol-steps__head { max-width: 1180px; margin: 0 auto 40px; text-align: center; }
.ol-steps__head p { color: rgba(255,255,255,0.76); }
.pn.ol .ol-steps__note { max-width: 760px; margin: 28px auto 0; text-align: center; font-size: 14.5px; color: rgba(255,255,255,0.6); }

/* 05 · Quando trocar (cinza claro) */
.ol-when { background: var(--c-gray-100); padding: 110px 0; }
.ol-when__head { max-width: 760px; margin-bottom: 44px; }
.ol-when__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.ol-when__list li { padding: 4px 32px; border-left: 1px solid rgba(10,10,10,0.14); }
.ol-when__list li:first-child { padding-left: 0; border-left: 0; }
.ol-when .ol-ico { margin-bottom: 18px; background: #0a0a0a; }
.pn.ol .ol-when__list h3 { font-size: 18px; margin-bottom: 8px; }
.pn.ol .ol-when__list p { font-size: 15.5px; margin: 0; }

/* 06 · Atendimento e transparência (claro) */
.ol-care { background: #fff; padding: 110px 0; }
.ol-care__panel { background: #0a0a0a; border-radius: 22px; padding: 38px 36px; border-left: 4px solid var(--c-amber); }
.ol-care__panel ul { display: grid; gap: 24px; }
.ol-care__panel li { display: grid; gap: 4px; }
.ol-care__panel strong { color: #fff; font-family: var(--font-display); text-transform: uppercase; font-size: 17px; letter-spacing: -0.01em; }
.ol-care__panel span { color: rgba(255,255,255,0.7); font-size: 16px; line-height: 1.55; }

/* 08 · CTA final (escuro, detalhe gráfico discreto) */
.ol-cta { position: relative; background: #111; padding: 84px 0; overflow: hidden; border-top: 1px solid rgba(254,190,14,0.25); }
.ol-cta::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 40% 120% at 100% 50%, rgba(254,190,14,0.22), transparent 70%), repeating-linear-gradient(115deg, rgba(254,190,14,0.05) 0 3px, transparent 3px 26px); }
.ol-cta__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.pn.ol .ol-cta h2 { color: #fff; margin-bottom: 10px; font-size: clamp(28px, 3.6vw, 44px); }
.pn.ol .ol-cta p { margin: 0; color: rgba(255,255,255,0.78); font-size: 18px; max-width: 46ch; }

/* ---------- Tablet / mobile ---------- */
@media (max-width: 1100px) {
	.ol-why__grid { gap: 40px; }
}
@media (max-width: 980px) {
	.ol-why, .ol-spec, .ol-steps, .ol-when, .ol-care { padding: 84px 0; }
	.ol-why__grid { grid-template-columns: 1fr; }
	.ol-hero__shade { background: linear-gradient(90deg, rgba(5,5,5,0.9) 0%, rgba(5,5,5,0.7) 50%, rgba(5,5,5,0.3) 100%); }
	.ol-cta { padding: 68px 0; }
}
@media (max-width: 760px) {
	.ol-hero { display: block; min-height: 0; }
	.ol-hero__bg { position: relative; top: auto; left: auto; right: auto; bottom: auto; display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-position: 82% 50%; }
	.ol-hero__shade { top: var(--ol-hdr); bottom: auto; height: 62.5vw; background: linear-gradient(180deg, rgba(5,5,5,0) 55%, #050505 100%); }
	.ol-hero__inner { padding-top: 28px; padding-bottom: 60px; }
	.pn.ol .ol-hero h1 { font-size: clamp(32px, 9vw, 44px); }
	.pn.ol .ol-hero__lead { font-size: 16px; }
	.ol-hero .btn { width: 100%; justify-content: center; }
}
@media (max-width: 620px) {
	.ol-hero { --ol-hdr: 74px; }
	.ol-why, .ol-spec, .ol-steps, .ol-when, .ol-care { padding: 64px 0; }
	.ol-steps__head { text-align: left; }
	.ol-when__list { grid-template-columns: 1fr; }
	.ol-when__list li { padding: 22px 0; border-left: 0; border-top: 1px solid rgba(10,10,10,0.14); }
	.ol-when__list li:first-child { border-top: 0; padding-top: 0; }
	.ol-care__panel { padding: 28px 24px; }
	.ol-cta { padding: 56px 0; }
	.ol-cta .btn { width: 100%; justify-content: center; }
}

/* Espaçamento e leitura das etapas em telas menores. */
@media (min-width: 981px) {
 .ol-why, .ol-spec, .ol-steps, .ol-when, .ol-care { padding: 100px 0; }
}
@media (min-width: 621px) and (max-width: 980px) {
 .ol-when__list { grid-template-columns: 1fr; }
 .ol-when__list li { padding: 24px 0; border-left: 0; border-top: 1px solid rgba(10,10,10,0.14); }
 .ol-when__list li:first-child { padding-top: 0; border-top: 0; }
}

/* Mesma assinatura (versão âmbar sobre o CTA escuro) */
.ol-cta::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7px; background: repeating-linear-gradient(90deg, var(--c-amber) 0 26px, transparent 26px 44px); }
.ol-figcap { padding: 10px 14px; font-size: 12.5px; color: rgba(255,255,255,0.7); background: #0a0a0a; }

/* Título em duas linhas (branco + dourado) e cartões das etapas */
.pn.ol .ol-steps__title { margin: 0 0 22px; font-size: clamp(26px, 3.9vw, 50px); line-height: 1.06; letter-spacing: -0.01em; }
.pn.ol .ol-steps__title span { display: block; }
.ol-steps__gold { background: linear-gradient(180deg, #ffe08a 0%, var(--c-amber) 55%, #c98f00 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ol-steps__head { position: relative; padding-bottom: 26px; margin-bottom: 44px; }
.ol-steps__head::after { content: ""; position: absolute; left: 50%; bottom: 0; width: min(520px, 70%); height: 2px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--c-amber), transparent); }
.ol-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; list-style: none; padding: 0; margin: 0 auto; max-width: 1180px; }
.ol-cards li { position: relative; margin: 0; }
.ol-cards img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; border: 1px solid rgba(254,190,14,0.28); box-shadow: 0 26px 48px -30px rgba(0,0,0,0.9); }
.ol-cards li:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -22px; width: 22px; height: 22px; margin-top: -11px; z-index: 2; border-radius: 50%; background: #050505 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23febe0e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / 14px no-repeat; border: 1.5px solid var(--c-amber); }
@media (max-width: 980px) { .ol-cards { grid-template-columns: 1fr 1fr; gap: 18px; } .ol-cards li::after { display: none; } }
@media (max-width: 620px) { .ol-cards { grid-template-columns: 1fr; gap: 16px; max-width: 420px; } .ol-cards img { border-radius: 16px; } .ol-steps__head { text-align: center; } }
@media (max-width: 620px) { .pn.ol .ol-steps__title { font-size: 21px; } }