/* Sectores de servicio — sector tiles (built on .tile from main.css).
   The photo fills the top band and fades into navy; the title overlaps the fade and the
   paragraph + button sit on the dark part, so the photo subject stays visible at every width. */

.sector-grid { --img-h: 290px; }

/* Two columns filled top-to-bottom, like the original page (left: Minero…Aviación, right: Hotelero…Transporte),
   while the source order stays the same for mobile and screen readers. */
@media (min-width: 768px) {
  .sector-grid { grid-auto-flow: column; grid-template-rows: repeat(4, auto); }
}

.sector-grid > li { display: flex; }
.sector-tile {
  flex: 1; justify-content: flex-start; min-height: 0;
  padding-top: calc(var(--img-h) - 5.5rem);
}
.sector-tile .tile__img { bottom: auto; height: var(--img-h); }
/* The overlay runs 2rem past the photo (solid navy there) so the hover zoom never shows a photo edge. */
.sector-tile::before {
  bottom: auto; height: calc(var(--img-h) + 2rem);
  background: linear-gradient(180deg, rgba(8, 11, 45, .06) 0, rgba(8, 11, 45, .22) calc(var(--img-h) * .45),
    rgba(8, 11, 45, .82) calc(var(--img-h) * .8), var(--navy-900) var(--img-h));
}
.sector-tile .tile__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; }
.sector-tile__title { margin-bottom: .6rem; font-size: var(--fs-h4); text-shadow: 0 1px 12px rgba(8, 11, 45, .6); }
.sector-tile .tile__body p { max-width: 52ch; margin-bottom: 1.5rem; }
.sector-tile .tile__body .btn { margin-top: auto; }
/* Hotelero photo: a bright yellow beam runs along its top edge. Make the image box 8% taller than the
   band, bottom-aligned, so the beam sits above the tile and gets clipped at every width. */
.sector-tile .sector-tile__img--trim-top { top: calc(var(--img-h) * -.08); height: calc(var(--img-h) * 1.08); }

@media (max-width: 767px) {
  .sector-grid { --img-h: 240px; }
}