/* Combustibles + Lubricantes — white intro card overlapping the hero (as on the original pages),
   fuel boxes, lubricant check-list and the "Cotiza con nosotros" photo band. */
.page-combustibles, .page-lubricantes { --prod-overlap: clamp(2.5rem, 1rem + 4vw, 5rem); }

.prod-hero { padding-bottom: calc(clamp(4rem, 2rem + 8vw, 8.5rem) + var(--prod-overlap)); }
.page-combustibles .prod-hero .page-hero__bg { object-position: 30% 50%; }

/* Intro card */
.prod-intro { padding-top: 0; }
.prod-card { position: relative; max-width: var(--container-narrow); margin: calc(var(--prod-overlap) * -1) auto 0; text-align: center; }
.prod-card__icon { display: block; width: 60px; height: 60px; margin: 0 auto 1rem; color: var(--lime); }
.prod-card__icon svg { width: 100%; height: 100%; }
.prod-card .heading-bar::after { margin-inline: auto; }
.prod-card .lead { max-width: 62ch; margin-inline: auto; }

/* Lubricant line */
.prod-list { max-width: 40rem; margin: clamp(1.5rem, 1.2rem + 1vw, 2rem) auto 0; text-align: left; }
.prod-list li { font-weight: 500; color: var(--navy); }
.prod-card__cta {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .75rem 1.25rem;
  margin-top: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); padding-top: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  border-top: 1px solid var(--gray-200);
}
.prod-card__cta p { margin: 0; font-size: var(--fs-lead); color: var(--navy); }

/* Fuel boxes */
.prod-fuels { margin-top: clamp(2rem, 1.2rem + 3vw, 3.5rem); }
.fuel-card { display: flex; flex-direction: column; align-items: center; text-align: center; }
.fuel-card .feature__icon { margin-bottom: 1.25rem; }
.fuel-card .info-card__label { margin-bottom: .6rem; }
.info-card.fuel-card p { color: var(--gray-600); }
.fuel-card .link-arrow { margin-top: auto; padding-top: 1.25rem; }

/* "Cotiza con nosotros": photo band with the text on the left, like the original.
   The section also has .section--navy, so headings, eyebrow and focus ring follow the shared dark-surface rules. */
.prod-quote {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(4rem, 2rem + 7vw, 8rem); background: var(--navy-900);
}
.prod-quote__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.prod-quote::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(8, 11, 45, .94) 0%, rgba(14, 20, 84, .82) 45%, rgba(14, 20, 84, .3) 100%);
}
.prod-quote__body { max-width: 36rem; }
.prod-quote p { color: rgba(255, 255, 255, .88); }
.prod-quote .btn-row { margin-top: 2rem; }

/* Product cards: the card of the page being viewed is not a link and gets a label instead of "Ver más" */
.prod-current .prod-here { margin-bottom: 0; font-size: var(--fs-small); letter-spacing: .08em; text-transform: uppercase; color: var(--green-ink); }

@media (max-width: 767px) {
  .prod-card { padding: 2rem 1.25rem; }
  .prod-quote::before { background: linear-gradient(180deg, rgba(8, 11, 45, .88), rgba(14, 20, 84, .8)); }
}