/* Page title banner (every inner page): now a real full-bleed photo, back to
   the theme's default cover/center sizing. Darken it (blended with a navy
   background-color) so the dark h1 text/breadcrumb stay legible over
   whatever part of the photo lands behind them. */
.page-title {
  background-size: cover;
  background-position: center;
  background-color: rgba(6, 26, 58, 0.55);
  background-blend-mode: multiply;
}

.page-title h1 {
  color: #ffffff;
}

/* The theme's breadcrumb "Home" link is dark navy (style.css), which
   disappears against the darkened photo background above. The current-page
   crumb already renders in cyan via color.css since it's plain text, not a
   link. */
.page-title .bread-crumb li a {
  color: #ffffff;
}

.page-title .bread-crumb li:before {
  background-color: #ffffff;
}

/* Footer logo: the theme puts no width cap on it, so it renders at the full
   width of its column. Cap it to a smaller, more proportionate size. */
.main-footer .logo-widget .footer-logo img {
  max-width: 180px;
}

/* Header logo: our logo is a taller mark than the theme's original short,
   wide wordmark. Keep .logo-box a normal flex item (like the original
   template) so .outer-box's `justify-content: space-between` still spaces
   logo / menu / search out the same way the theme intends — the earlier
   fix took the logo out of flow with a fixed absolute position + a flat
   margin on .menu-area, which broke that spacing and crammed the menu
   against the logo. Instead, cap the logo's own box to a modest height and
   let just the <img> overflow it (position/overflow visible) so the row
   doesn't stretch to the image's full 139px. */
.main-header .logo-box {
  height: 90px;
  padding: 0;
  overflow: visible;
}

.main-header .logo-box .logo {
  position: relative;
  display: block;
  width: 267px;
  max-width: none;
  height: 100%;
}

.main-header .logo-box .logo img {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: auto;
  height: 139px;
}

.sticky-header .logo-box .logo {
  max-width: none;
}

.sticky-header .logo-box .logo img {
  width: auto;
  height: 42px;
}

/* Location map (home page) — fixed coordinates, not editable via the CMS.
   Plain iframe embed (no Google Maps API key configured), so no JS
   dependency like the Contact page's styled map. */
.location-section {
  padding: 30px 0 0;
  background-color: #ffffff;
}

.location-section .section-title {
  margin-bottom: 30px;
}

/* Full-bleed: break the map out of .auto-container's 1200px max-width so
   it spans the entire viewport with no side margins, regardless of where
   the section itself sits in the page's centered layout. */
.location-map {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.location-map iframe {
  display: block;
}

/* About teaser: the theme's .about-section .image-box img rule sets
   max-width: none, intended for a specific pre-cropped asset. Any
   normal-sized photo uploaded through the CMS renders at full native
   width and overflows out of its half-width column. Cap it so it scales
   down to fit like a normal responsive image. */
.about-section .image-box img {
  max-width: 100%;
  height: auto;
}

/* The theme gives .about-section 150px of bottom padding (on top of the
   next section's own top padding), leaving a big empty gap before
   Soluciones. Trim it down. */
.about-section {
  padding-bottom: 60px;
}

/* Features section: the theme uses h4 for each feature block's title,
   directly under the section's own h2 — skipping h3. Moved the markup to
   h3 to keep heading levels sequential; re-declare the theme's h4 styling
   against h3 so it looks identical. */
.feature-block-one .inner-box h3 {
  display: block;
  font-size: 20px;
  line-height: 30px;
  font-weight: 500;
  margin-bottom: 15px;
}

/* Hero slider: the equipment/background photo sits too low inside its
   700px-tall box by default (theme's .image-2 is bottom: 0), and its
   negative right offset pushes it flush against the page's right edge.
   Lift it up and pull it in a bit so it has breathing room on both. */
.banner-carousel .inner-box .image-box .image-2 {
  bottom: 120px;
  right: -100px;
}

/* Owl Carousel's base .owl-carousel rule sets z-index: 1 on the carousel
   root, which creates its own stacking context — so the whole carousel,
   nav included, was capped below .banner-section .shape (z-index: 2) no
   matter what z-index the nav itself had. Raise the carousel's own
   stacking level so its nav can render above the shape. */
.banner-carousel.owl-carousel {
  z-index: 3;
}

/* The theme's default nav-arrow position (vertically centered, left:50px)
   collides with the hero text column. Move both arrows to the bottom
   right, near the image, clear of the text and CTA buttons. Also clear
   of the Features section's floating card, which overlaps 100px up over
   the banner's bottom edge (.feature-section .inner-container has
   margin-top: -100px) and would otherwise render on top of the arrows. */
.banner-carousel .owl-nav {
  top: auto;
  bottom: 180px;
  transform: none;
}

.banner-carousel .owl-nav button {
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.banner-carousel .owl-nav button.owl-prev {
  left: auto;
  right: 130px;
}

.banner-carousel .owl-nav button.owl-next {
  right: 50px;
}

/* Solutions grid section (home page) — custom component, no equivalent
   markup in the vendor theme, so it's styled entirely here rather than
   forcing it into existing theme classes. */
.solutions-section {
  padding: 100px 0;
  background-color: #ffffff;
}

.section-title {
  max-width: 700px;
  margin: 0 auto 50px;
  text-align: center;
}

.section-title .eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  color: #00d1f9;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.section-title h2 {
  margin-bottom: 15px;
  color: #002c8f;
  font-size: 36px;
  line-height: 1.25;
  font-weight: 700;
}

.section-title p {
  color: #6f7787;
  font-size: 16px;
  line-height: 1.7;
}

.solutions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-bottom: 50px;
}

.solution-card {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background-color: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 44, 143, 0.08);
  transition: transform 300ms ease, box-shadow 300ms ease;
}

.solution-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 34px rgba(0, 44, 143, 0.14);
}

.solution-card-image {
  margin: 0;
  height: 180px;
}

.solution-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.solution-card-body {
  position: relative;
  padding: 24px 46px 24px 24px;
}

.solution-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  border-radius: 50%;
  background-color: #e6f7fe;
  color: #00a8e0;
  font-size: 18px;
}

.solution-card-body h3 {
  margin-bottom: 8px;
  color: #14213d;
  font-size: 18px;
  font-weight: 700;
}

.solution-card-body p {
  color: #6f7787;
  font-size: 14px;
  line-height: 1.6;
}

.solution-card-arrow {
  position: absolute;
  right: 24px;
  bottom: 24px;
  color: #00a8e0;
  font-size: 16px;
}

.trust-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 30px;
  border-radius: 12px;
  background-color: #eef7fd;
}

.trust-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.trust-item-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: #00a8e0;
  font-size: 18px;
}

.trust-item-body h4,
.trust-item-body h3 {
  margin-bottom: 4px;
  color: #14213d;
  font-size: 15px;
  font-weight: 700;
}

.trust-item-body p {
  color: #6f7787;
  font-size: 13px;
  line-height: 1.5;
}

/* Categories grid section (home page) — same "eyebrow + heading + text"
   header and trust-bar as the solutions section above (shared via the
   section_title/trust_bar includes), but a simpler icon-only card with
   no photo or description. */
.categories-section {
  padding: 100px 0;
  background-color: #f7fbfe;
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  margin-bottom: 50px;
}

.category-card {
  display: block;
  padding: 30px 20px;
  border-radius: 12px;
  background-color: #ffffff;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 44, 143, 0.08);
  transition: transform 300ms ease, box-shadow 300ms ease;
}

.category-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 34px rgba(0, 44, 143, 0.14);
}

.category-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  margin: 0 auto 18px;
}

.category-card-icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.category-card h3 {
  margin-bottom: 12px;
  color: #14213d;
  font-size: 16px;
  font-weight: 700;
}

.category-card-arrow {
  color: #00a8e0;
  font-size: 16px;
}

/* Brands grid section (home page) — plain logo cards, no title/link,
   display only. Same header + trust-bar pattern as solutions/categories. */
.brands-section {
  padding: 100px 0 50px;
  background-color: #ffffff;
}

.brands-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  margin-bottom: 50px;
}

.brand-card {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  padding: 20px;
  border-radius: 12px;
  background-color: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 44, 143, 0.08);
}

.brand-card-logo {
  margin: 0;
}

.brand-card-logo img {
  max-width: 100%;
  max-height: 60px;
  object-fit: contain;
}

@media (max-width: 991px) {
  .solutions-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .categories-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .brands-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .trust-bar {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* The theme's footer normally starts with a "Please Call Us" banner
   (.footer-top, 260px of top padding) before the logo/widget row. We don't
   use that banner, but the footer's decorative white wave background
   (.pattern-layer .pattern-3, pinned to the top 165px of the footer) was
   designed to sit behind it. Without that banner, the wave is left exposed
   right where the logo now starts, so the logo renders on white instead of
   the footer's navy background. Push the widget row down below the wave. */
.main-footer .widget-section {
  padding-top: 190px;
}

/* "Open Hours" was an <h6> (theme's .schedule-box h6 rule below), which
   skipped from the page's h4s straight to h6. Changed the tag to h4 to
   keep heading levels sequential; this re-declares the theme's original
   h6 styling against the new h4 selector so it looks identical. */
.main-footer .logo-widget .schedule-box h4 {
  display: block;
  margin-bottom: 15px;
  color: #fff;
  font-size: 16px;
  line-height: 26px;
  font-weight: 600;
}

@media (max-width: 575px) {
  .solutions-grid {
    grid-template-columns: 1fr;
  }

  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .brands-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .trust-bar {
    grid-template-columns: 1fr;
  }
}

/* Category filter chips on the products listing page (?categoria=<slug>). */
.category-filter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
}

.category-filter-list li a {
  display: inline-block;
  padding: 10px 22px;
  border: 1px solid #e2e8f0;
  border-radius: 30px;
  color: #14213d;
  font-size: 14px;
  font-weight: 600;
  transition: all 300ms ease;
}

.category-filter-list li a:hover,
.category-filter-list li.current a {
  background-color: #002c8f;
  border-color: #002c8f;
  color: #ffffff;
}

/* About page: floating caption badge over the teaser image. */
.image-caption-badge {
  position: absolute;
  left: 30px;
  bottom: 30px;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 320px;
  padding: 20px 24px;
  border-radius: 12px;
  background-color: rgba(0, 26, 86, 0.9);
  z-index: 2;
}

.image-caption-badge .icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #00a8e0;
  color: #ffffff;
  font-size: 18px;
}

.image-caption-badge p {
  margin: 0;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.5;
}

/* About page: Misión / Visión / Valores three-card section. */
.mvv-section {
  padding: 0 0 100px;
  background-color: #ffffff;
}

.mvv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.mvv-card {
  padding: 40px 34px;
  border-radius: 12px;
  background-color: #f7fbfe;
  box-shadow: 0 10px 30px rgba(0, 44, 143, 0.08);
}

.mvv-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 22px;
  border-radius: 50%;
  background-color: #e6f7fe;
  color: #002c8f;
  font-size: 26px;
}

.mvv-card h3 {
  margin-bottom: 16px;
  color: #14213d;
  font-size: 20px;
  font-weight: 700;
}

.mvv-card p {
  color: #6f7787;
  font-size: 15px;
  line-height: 1.7;
}

.mvv-checklist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mvv-checklist li {
  position: relative;
  margin-bottom: 16px;
  padding-left: 28px;
  color: #6f7787;
  font-size: 15px;
  line-height: 1.6;
}

.mvv-checklist li:last-child {
  margin-bottom: 0;
}

.mvv-checklist li i {
  position: absolute;
  left: 0;
  top: 3px;
  color: #00a8e0;
}

.mvv-checklist li strong {
  color: #14213d;
}

@media (max-width: 991px) {
  .mvv-grid {
    grid-template-columns: 1fr;
  }
}