:root {
      --brand: #f2b705;
      --dark: #1f2933;
      --soft: #f7f7f4;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: #263238;
      background: #ffffff;
    }

    .navbar {
      transition: all .25s ease;
    }

    .navbar.scrolled {
      box-shadow: 0 8px 24px rgba(0,0,0,.12);
      background: rgba(31, 41, 51, .96) !important;
      backdrop-filter: blur(8px);
    }

    .navbar-brand span {
      color: var(--brand);
    }

    .hero-carousel .carousel-item {
      min-height: 92vh;
      background: #111;
      position: relative;
    }

    .hero-carousel img,
    .hero-carousel video {
      width: 100%;
      height: 92vh;
      object-fit: cover;
      opacity: .56;
    }

    .hero-content {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      z-index: 2;
    }

    .hero-card {
      max-width: 720px;
      background: rgba(0,0,0,.48);
      border: 1px solid rgba(255,255,255,.2);
      border-radius: 28px;
      padding: 36px;
      color: #fff;
      backdrop-filter: blur(6px);
    }

    .hero-card h1 {
      font-size: clamp(2.2rem, 5vw, 4.8rem);
      font-weight: 800;
      line-height: .98;
    }

    .btn-brand {
      background: var(--brand);
      border: none;
      color: #1b1b1b;
      font-weight: 700;
      padding: 12px 22px;
      border-radius: 999px;
    }

    .btn-brand:hover {
      background: #ffd447;
      color: #000;
    }

    section {
      scroll-margin-top: 88px;
      padding: 25px 0;
    }

    .section-soft {
      background: var(--soft);
    }

    .service-card {
      border: 0;
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 14px 35px rgba(0,0,0,.08);
      transition: transform .25s ease, box-shadow .25s ease;
      height: 100%;
    }

    .service-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 18px 42px rgba(0,0,0,.14);
    }

    .service-card img {
      height: 220px;
      object-fit: cover;
    }

    .icon-box {
      width: 54px;
      height: 54px;
      border-radius: 18px;
      display: inline-grid;
      place-items: center;
      background: rgba(242,183,5,.16);
      color: #9a7200;
      font-size: 1.6rem;
    }

    .process-step {
      background: #fff;
      border-radius: 22px;
      padding: 28px;
      height: 100%;
      box-shadow: 0 10px 28px rgba(0,0,0,.06);
    }

    .gallery-img {
      height: 260px;
      width: 100%;
      object-fit: cover;
      border-radius: 24px;
      box-shadow: 0 12px 32px rgba(0,0,0,.1);
    }

    .cta-box {
      border-radius: 32px;
      background: linear-gradient(135deg, #1f2933, #111827);
      color: #fff;
      padding: 48px;
      overflow: hidden;
      position: relative;
    }

    .cta-box::after {
      content: "";
      position: absolute;
      width: 260px;
      height: 260px;
      right: -80px;
      bottom: -80px;
      background: var(--brand);
      opacity: .18;
      border-radius: 50%;
    }

    .whatsapp-float {
      position: fixed;
      right: 22px;
      bottom: 22px;
      width: 62px;
      height: 62px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: #25d366;
      color: #fff;
      font-size: 2rem;
      z-index: 9999;
      text-decoration: none;
      box-shadow: 0 12px 28px rgba(37,211,102,.45);
      animation: pulse 1.8s infinite;
    }

    .whatsapp-float:hover {
      color: #fff;
      transform: scale(1.06);
    }

    @keyframes pulse {
      0% { box-shadow: 0 0 0 0 rgba(37,211,102,.5); }
      70% { box-shadow: 0 0 0 18px rgba(37,211,102,0); }
      100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
    }

    footer {
      background: #111827;
      color: #cbd5e1;
      padding: 36px 0;
    }

    @media (max-width: 768px) {
      .hero-card {
        padding: 26px;
        margin: 0 12px;
      }

      .hero-carousel .carousel-item,
      .hero-carousel img,
      .hero-carousel video {
        height: 86vh;
        min-height: 86vh;
      }

      section {
        padding: 64px 0;
      }
    }

/* Branding profesional PANELMEX sin logotipo gráfico */
:root {
  --brand: #f2b705;
  --brand-orange: #ff8a12;
  --brand-yellow: #ffd83d;
  --dark: #1f2933;
  --dark-deep: #111827;
  --industrial-gray: #667078;
  --soft: #f7f7f4;
}
.panelmex-wordmark{display:inline-flex;flex-direction:column;line-height:.88;text-decoration:none}
.panelmex-wordmark__name{color:#fff;font-size:1.62rem;font-weight:900;letter-spacing:.045em}
.panelmex-wordmark__accent{color:var(--brand-yellow)}
.panelmex-wordmark__tagline{margin-top:7px;color:rgba(255,255,255,.72);font-size:.58rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.brand-stripe{display:inline-grid;grid-template-columns:repeat(3,9px);gap:3px;align-items:stretch;height:34px;margin-right:12px;transform:skewX(-8deg)}
.brand-stripe span:nth-child(1){background:#686d72}.brand-stripe span:nth-child(2){background:var(--brand-yellow)}.brand-stripe span:nth-child(3){background:var(--brand-orange)}
.hero-brand-label{display:inline-flex;align-items:center;gap:10px;color:var(--brand-yellow);font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.hero-brand-label:before{content:"";width:38px;height:4px;border-radius:999px;background:linear-gradient(90deg,#686d72 0 33%,var(--brand-yellow) 33% 66%,var(--brand-orange) 66%)}
.material-card-link{display:inline-flex;align-items:center;gap:8px;color:var(--dark-deep);font-weight:800;text-decoration:none}.material-card-link:hover{color:var(--brand-orange)}
.material-tag{display:inline-block;margin-bottom:14px;padding:7px 12px;border-radius:999px;background:rgba(242,183,5,.17);color:#805d00;font-size:.77rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.manufacturer-highlight{color:var(--brand-orange)}
footer .panelmex-wordmark__name{font-size:1.45rem}footer .panelmex-wordmark__tagline{color:#9ca3af}
@media(max-width:575.98px){.panelmex-wordmark__tagline{display:none}.panelmex-wordmark__name{font-size:1.34rem}}


/* =========================================================
   DETALLE DE PRODUCTO
   ========================================================= */

.product-page { padding-top: 64px; }

.product-breadcrumb {
  padding: 26px 0 8px;
  background: var(--soft);
}

.product-breadcrumb .breadcrumb { margin-bottom: 0; }

.product-breadcrumb a {
  color: #6b7280;
  text-decoration: none;
}

.product-breadcrumb a:hover { color: var(--brand-orange); }

.product-detail-section { padding-top: 48px; }

.product-gallery-main {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background: #eef0ed;
  box-shadow: 0 18px 42px rgba(0,0,0,.11);
}

.product-gallery-main img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  display: block;
}

.product-gallery-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  padding: 9px 15px;
  border-radius: 999px;
  background: var(--brand-yellow);
  color: var(--dark-deep);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.product-thumbnails {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 16px;
}

.product-thumbnail {
  width: 100%;
  height: 105px;
  padding: 0;
  overflow: hidden;
  border: 3px solid transparent;
  border-radius: 16px;
  background: transparent;
  cursor: pointer;
  transition: border-color .2s ease, transform .2s ease;
}

.product-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-thumbnail:hover,
.product-thumbnail.active {
  border-color: var(--brand-orange);
  transform: translateY(-3px);
}

.product-summary {
  position: sticky;
  top: 105px;
  padding: 34px;
  border: 1px solid #e6e7e3;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(0,0,0,.09);
}

.product-category {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 15px;
  color: #8a5600;
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.product-title {
  margin-bottom: 18px;
  color: var(--dark-deep);
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 900;
  line-height: .95;
}

.product-lead {
  color: #667078;
  font-size: 1.1rem;
}

.product-price {
  margin-top: 24px;
  color: var(--dark-deep);
  font-size: 2rem;
  font-weight: 900;
}

.product-price small {
  display: block;
  margin-top: 5px;
  color: #7b8085;
  font-size: .82rem;
  font-weight: 500;
}

.product-features {
  display: grid;
  gap: 12px;
  margin: 26px 0;
}

.product-feature {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.product-feature i {
  margin-top: 2px;
  color: var(--brand-orange);
}

.product-feature strong {
  display: block;
  color: var(--dark-deep);
}

.product-feature span {
  color: #72787e;
  font-size: .92rem;
}

.product-info-card {
  height: 100%;
  padding: 28px;
  border: 1px solid #e5e7e2;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(0,0,0,.07);
}

.product-info-card h3 {
  color: var(--dark-deep);
  font-size: 1.15rem;
  font-weight: 850;
}

.product-spec-table th {
  width: 42%;
  color: var(--dark-deep);
  font-weight: 800;
}

.product-spec-table td { color: #667078; }

.application-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 5px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--soft);
  color: #454a4f;
  font-weight: 700;
}

.related-banner {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  background: linear-gradient(135deg, var(--dark-deep), var(--dark));
  color: #fff;
  box-shadow: 0 22px 55px rgba(0,0,0,.18);
}

.related-banner::after {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -120px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: var(--brand-orange);
  opacity: .16;
}

.related-banner__heading {
  position: relative;
  z-index: 1;
  padding: 38px 38px 20px;
}

.related-banner__products {
  position: relative;
  z-index: 1;
  padding: 0 22px 28px;
}

.related-product {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
  padding: 17px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 20px;
  background: rgba(255,255,255,.07);
  color: #fff;
  text-decoration: none;
  transition: transform .2s ease, background .2s ease;
}

.related-product:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,.13);
  color: #fff;
}

.related-product img {
  width: 92px;
  height: 82px;
  flex: 0 0 92px;
  border-radius: 14px;
  object-fit: cover;
}

.related-product small {
  display: block;
  color: var(--brand-yellow);
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.related-product strong {
  display: block;
  margin-top: 3px;
  font-size: 1.05rem;
}

.related-product span {
  display: block;
  margin-top: 4px;
  color: #d6d9dc;
  font-size: .84rem;
}

@media (max-width: 991.98px) {
  .product-summary { position: static; }
  .product-gallery-main img { height: 410px; }
}

@media (max-width: 575.98px) {
  .product-page { padding-top: 72px; }
  .product-gallery-main img { height: 310px; }
  .product-thumbnails { gap: 8px; }
  .product-thumbnail { height: 78px; }
  .product-summary { padding: 26px; }
  .related-banner__heading { padding: 30px 24px 16px; }
  .related-banner__products { padding: 0 14px 22px; }
  .related-product img {
    width: 76px;
    height: 70px;
    flex-basis: 76px;
  }
}


/* Carrusel automático de productos relacionados */
.related-carousel {
  padding: 0 64px 54px;
}

.related-carousel .carousel-inner {
  overflow: visible;
}

.related-carousel .carousel-item {
  transition: transform .65s ease-in-out, opacity .45s ease-in-out;
}

.related-carousel__control {
  top: 50%;
  bottom: auto;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  background: rgba(255,255,255,.10);
  transform: translateY(-50%);
  opacity: 1;
  backdrop-filter: blur(8px);
}

.related-carousel__control:hover {
  background: var(--brand-orange);
}

.related-carousel__control--prev {
  left: 12px;
}

.related-carousel__control--next {
  right: 12px;
}

.related-carousel__control .carousel-control-prev-icon,
.related-carousel__control .carousel-control-next-icon {
  width: 1.2rem;
  height: 1.2rem;
}

.related-carousel__indicators {
  bottom: 16px;
  margin-bottom: 0;
}

.related-carousel__indicators [data-bs-target] {
  width: 28px;
  height: 5px;
  border: 0;
  border-radius: 999px;
  background-color: rgba(255,255,255,.45);
}

.related-carousel__indicators .active {
  background-color: var(--brand-yellow);
}

@media (max-width: 767.98px) {
  .related-carousel {
    padding: 0 18px 56px;
  }

  .related-carousel__control {
    display: none;
  }

  .related-carousel .carousel-item .row {
    row-gap: 14px;
  }
}


/* =========================================================
   MEGAMENÚ DE PRODUCTOS
   ========================================================= */

.mega-nav-item {
  position: static;
}

.mega-menu {
  left: 50% !important;
  width: min(880px, calc(100vw - 40px));
  margin-top: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0 0 22px 22px;
  background: #25282b;
  box-shadow: 0 24px 55px rgba(0,0,0,.30);
  transform: translateX(-50%);
}

.mega-menu.show {
  display: grid;
  grid-template-columns: 320px 1fr;
}

.mega-menu__categories {
  padding: 16px 0;
  background: #26292c;
}

.mega-category {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 20px;
  border: 0;
  background: transparent;
  color: #aeb2b6;
  text-align: left;
  font-size: .92rem;
  font-weight: 650;
  text-transform: uppercase;
  transition: background .18s ease, color .18s ease;
}

.mega-category:hover,
.mega-category:focus,
.mega-category.active {
  background: #303438;
  color: #fff;
}

.mega-category small {
  color: #858b90;
  font-size: .82rem;
}

.mega-category i {
  font-size: .82rem;
}

.mega-menu__products {
  min-height: 460px;
  padding: 20px;
  background: #2b2e31;
}

.mega-products-panel {
  display: none;
}

.mega-products-panel.active {
  display: block;
}

.mega-products-panel h3 {
  margin: 0 0 16px;
  color: var(--brand-yellow);
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.mega-products-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 28px;
}

.mega-products-list a {
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  color: #c2c5c7;
  font-size: .93rem;
  text-decoration: none;
  transition: color .18s ease, padding-left .18s ease;
}

.mega-products-list a:hover {
  padding-left: 6px;
  color: var(--brand-yellow);
}

.mega-view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  color: var(--brand-orange);
  font-weight: 850;
  text-decoration: none;
}

.mega-view-all:hover {
  color: var(--brand-yellow);
}

@media (min-width: 992px) {
  .mega-nav-item:hover > .mega-menu {
    display: grid;
    grid-template-columns: 320px 1fr;
  }
}

@media (max-width: 991.98px) {
  .mega-nav-item {
    position: relative;
  }

  .mega-menu {
    left: auto !important;
    width: 100%;
    max-height: 70vh;
    overflow-y: auto;
    border-radius: 14px;
    transform: none;
  }

  .mega-menu.show {
    display: block;
  }

  .mega-menu__categories {
    padding-bottom: 0;
  }

  .mega-menu__products {
    min-height: 0;
    padding-top: 12px;
  }

  .mega-products-list {
    grid-template-columns: 1fr;
  }

  .mega-category {
    padding: 13px 16px;
  }
}


/* =========================================================
   CORRECCIÓN DE PERMANENCIA DEL MEGAMENÚ
   ========================================================= */

.mega-nav-item {
  position: static;
}

.mega-nav-item::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 18px;
  pointer-events: none;
}

.mega-nav-item.mega-menu-open::after,
.mega-nav-item:hover::after {
  pointer-events: auto;
}

.mega-menu {
  top: calc(100% - 1px) !important;
  margin-top: 0 !important;
}

.mega-menu::before {
  content: "";
  position: absolute;
  top: -18px;
  left: 0;
  width: 100%;
  height: 18px;
  background: transparent;
}

.mega-menu.show,
.mega-nav-item.mega-menu-open > .mega-menu {
  display: grid;
  grid-template-columns: 320px 1fr;
}

@media (max-width: 991.98px) {
  .mega-nav-item::after,
  .mega-menu::before {
    display: none;
  }

  .mega-menu.show,
  .mega-nav-item.mega-menu-open > .mega-menu {
    display: block;
  }
}


/* =========================================================
   NAVEGACIÓN DE CATEGORÍAS EN DETALLE DE PRODUCTO
   ========================================================= */

.product-category-nav-section {
  padding: 22px 0 0;
  background: var(--soft);
  padding-bottom: 20px;
}

.product-category-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  overflow: hidden;
  border: 1px solid #e2e4df;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}

.product-category-nav__label {
  display: flex;
  align-items: center;
  gap: 9px;
  align-self: stretch;
  padding: 16px 20px;
  background: var(--dark-deep);
  color: #fff;
  font-weight: 850;
  white-space: nowrap;
}

.product-category-nav__label i {
  color: var(--brand-yellow);
}

.product-category-nav__scroll {
  display: flex;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
  padding: 10px 14px 10px 0;
  scrollbar-width: thin;
}

.product-category-nav__scroll a {
  padding: 9px 14px;
  border-radius: 999px;
  color: #555c61;
  font-size: .9rem;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
}

.product-category-nav__scroll a:hover,
.product-category-nav__scroll a.active {
  background: rgba(255,216,61,.24);
  color: var(--dark-deep);
}

.category-product-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 4px 0;
}

.category-product-links > span {
  margin-right: 4px;
  color: #676d72;
  font-size: .85rem;
  font-weight: 800;
}

.category-product-links a {
  padding: 7px 11px;
  border: 1px solid #dadeda;
  border-radius: 10px;
  background: #fff;
  color: #5f666c;
  font-size: .84rem;
  font-weight: 700;
  text-decoration: none;
}

.category-product-links a:hover,
.category-product-links a.active {
  border-color: var(--brand-orange);
  color: var(--brand-orange);
}

@media (max-width: 767.98px) {
  .product-category-nav {
    display: block;
  }

  .product-category-nav__label {
    padding: 13px 16px;
  }

  .product-category-nav__scroll {
    padding: 10px;
  }
}


/* =========================================================
   CATEGORÍAS CON MUCHOS PRODUCTOS
   ========================================================= */

.category-product-links {
  display: block;
  padding: 16px 4px 0;
}

.category-products-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 12px;
}

.category-products-header strong {
  display: block;
  color: var(--dark-deep);
  font-size: .95rem;
  font-weight: 850;
}

.category-products-header span {
  display: block;
  margin-top: 2px;
  color: #757b80;
  font-size: .78rem;
}

.category-products-search {
  position: relative;
  width: min(280px, 100%);
}

.category-products-search i {
  position: absolute;
  top: 50%;
  left: 13px;
  z-index: 2;
  transform: translateY(-50%);
  color: #7c8287;
}

.category-products-search .form-control {
  height: 42px;
  padding-left: 38px;
  border-radius: 999px;
  font-size: .86rem;
}

.category-products-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  transition: max-height .3s ease;
}

.category-products-list a {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid #dadeda;
  border-radius: 10px;
  background: #fff;
  color: #5f666c;
  font-size: .84rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.category-products-list a:hover,
.category-products-list a.active {
  border-color: var(--brand-orange);
  color: var(--brand-orange);
}

.category-products-list.is-collapsed {
  max-height: 84px;
}

.category-products-list.is-collapsed a:nth-child(n+9) {
  display: none;
}

.category-products-list.is-expanded {
  max-height: 600px;
}

.category-products-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,216,61,.22);
  color: var(--dark-deep);
  font-size: .82rem;
  font-weight: 850;
  cursor: pointer;
}

.category-products-toggle:hover {
  background: var(--brand-yellow);
}

@media (max-width: 767.98px) {
  .category-products-header {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .category-products-search {
    width: 100%;
  }

  .category-products-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    max-height: none !important;
    padding-bottom: 7px;
    scrollbar-width: thin;
  }

  .category-products-list.is-collapsed a:nth-child(n+9) {
    display: inline-flex;
  }

  .category-products-toggle {
    display: none;
  }
}


/* =========================================================
   PÁGINA DE CONTACTO PANELMEX
   ========================================================= */

.contact-page {
  padding-top: 64px;
}

.contact-hero {
  position: relative;
  overflow: hidden;
  padding: 105px 0 82px;
  color: #fff;
  background:
    linear-gradient(110deg, rgba(17,24,39,.97), rgba(31,41,51,.88)),
    url("https://images.unsplash.com/photo-1503387762-592deb58ef4e?auto=format&fit=crop&w=1800&q=85") center/cover no-repeat;
}

.contact-hero::after {
  content: "";
  position: absolute;
  right: -130px;
  bottom: -210px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: var(--brand-orange);
  opacity: .16;
}

.contact-hero .container {
  position: relative;
  z-index: 1;
}

.contact-hero__title {
  max-width: 850px;
  margin: 0;
  font-size: clamp(3rem, 7vw, 6.3rem);
  font-weight: 900;
  line-height: .93;
  letter-spacing: -.045em;
}

.contact-hero__copy {
  max-width: 720px;
  margin-top: 23px;
  color: #e2e5e7;
  font-size: 1.18rem;
}

.contact-hero__panel {
  padding: 32px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 28px;
  background: rgba(255,255,255,.09);
  box-shadow: 0 22px 55px rgba(0,0,0,.20);
  backdrop-filter: blur(12px);
}

.contact-checklist {
  display: grid;
  gap: 15px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.contact-checklist li {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #e5e7e9;
}

.contact-checklist i {
  color: var(--brand-yellow);
}

.contact-details-section {
  padding-bottom: 74px;
}

.contact-info-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 230px;
  padding: 27px;
  border: 1px solid #e4e6e2;
  border-radius: 24px;
  background: #fff;
  color: var(--dark);
  text-decoration: none;
  box-shadow: 0 12px 32px rgba(0,0,0,.07);
  transition: transform .22s ease, box-shadow .22s ease;
}

.contact-info-card:hover {
  transform: translateY(-7px);
  color: var(--dark);
  box-shadow: 0 20px 44px rgba(0,0,0,.13);
}

.contact-info-card__icon {
  display: grid;
  place-items: center;
  width: 55px;
  height: 55px;
  margin-bottom: 25px;
  border-radius: 18px;
  background: rgba(255,216,61,.25);
  color: #9a6100;
  font-size: 1.5rem;
}

.contact-info-card__icon--whatsapp {
  background: rgba(37,211,102,.15);
  color: #158843;
}

.contact-info-card__label {
  margin-bottom: 5px;
  color: #81868a;
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.contact-info-card strong {
  overflow-wrap: anywhere;
  color: var(--dark-deep);
  font-size: 1.08rem;
}

.contact-info-card small {
  margin-top: auto;
  padding-top: 16px;
  color: var(--brand-orange);
  font-weight: 800;
}

.contact-main-section {
  padding-top: 84px;
}

.contact-map-card,
.contact-form-card {
  height: 100%;
  overflow: hidden;
  border: 1px solid #e2e4df;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(0,0,0,.08);
}

.contact-map-card__header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  padding: 30px;
}

.contact-map-wrapper {
  min-height: 505px;
  background: #dfe2de;
}

.contact-map-wrapper iframe {
  display: block;
  width: 100%;
  height: 505px;
  border: 0;
}

.contact-form-card {
  padding: 32px;
}

.contact-form-card .form-label {
  color: var(--dark-deep);
  font-size: .88rem;
  font-weight: 800;
}

.contact-form-card .form-control,
.contact-form-card .form-select {
  min-height: 49px;
  border-color: #d9dcd8;
  border-radius: 13px;
}

.contact-form-card textarea.form-control {
  min-height: 130px;
  resize: vertical;
}

.contact-form-card .form-control:focus,
.contact-form-card .form-select:focus {
  border-color: var(--brand-orange);
  box-shadow: 0 0 0 .22rem rgba(255,138,18,.13);
}

.contact-form-note {
  margin: 16px 0 0;
  color: #858a8e;
  font-size: .78rem;
  text-align: center;
}

.contact-address-section {
  padding-top: 18px;
}

.contact-address-banner {
  position: relative;
  overflow: hidden;
  padding: 48px;
  border-radius: 32px;
  background: linear-gradient(135deg, var(--dark-deep), var(--dark));
  color: #fff;
  box-shadow: 0 22px 55px rgba(0,0,0,.17);
}

.contact-address-banner::after {
  content: "";
  position: absolute;
  right: -100px;
  bottom: -145px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: var(--brand-yellow);
  opacity: .13;
}

.contact-footer-link {
  display: block;
  margin-bottom: 8px;
  color: #cfd2d4;
  text-decoration: none;
}

.contact-footer-link:hover {
  color: var(--brand-yellow);
}

@media (max-width: 991.98px) {
  .contact-page {
    padding-top: 72px;
  }

  .contact-hero {
    padding: 80px 0 65px;
  }

  .contact-map-card__header {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 575.98px) {
  .contact-hero__title {
    font-size: 3rem;
  }

  .contact-hero__panel,
  .contact-form-card {
    padding: 25px;
  }

  .contact-map-card__header {
    padding: 25px;
  }

  .contact-map-wrapper,
  .contact-map-wrapper iframe {
    min-height: 390px;
    height: 390px;
  }

  .contact-address-banner {
    padding: 34px 26px;
  }
}


/* =========================================================
   CATÁLOGO DESDE JSON
   ========================================================= */

.mega-menu-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px;
  color: #aeb2b6;
  font-size: .9rem;
}

.catalog-load-error {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 16px;
  padding: 16px;
  border: 1px solid rgba(255,138,18,.35);
  border-radius: 14px;
  background: rgba(255,138,18,.10);
  color: #f1f2f3;
}

.catalog-load-error i {
  color: var(--brand-orange);
  font-size: 1.3rem;
}

.catalog-load-error strong,
.catalog-load-error span {
  display: block;
}

.catalog-load-error span {
  margin-top: 3px;
  color: #c3c7ca;
  font-size: .82rem;
}

#productCategoryNav {
  min-height: 55px;
}

#productCategoryNav > .spinner-border {
  flex: 0 0 auto;
  color: var(--brand-orange);
}


/* Ficha completa dinámica desde JSON */
.product-thumbnails {
  grid-template-columns: repeat(auto-fit, minmax(82px, 1fr));
}

.product-thumbnails:empty {
  display: none;
}

#productLongDescription p:last-child {
  margin-bottom: 1.5rem;
}

#productApplications:empty::after,
#productFeatures:empty::after,
#productAdvantages:empty::after {
  content: "Información disponible bajo solicitud.";
  color: #7b8085;
  font-size: .9rem;
}

.product-spec-table tbody:empty::after {
  content: "Especificaciones disponibles bajo solicitud.";
  display: block;
  padding: 18px;
  color: #7b8085;
}

/* =========================================================
   AJUSTE TÁCTIL DEL MEGAMENÚ EN NAVBAR COLAPSADO
   ========================================================= */
@media (max-width: 991.98px) {
  #productsMegaMenu,
  .mega-category,
  .mega-products-list a,
  .mega-view-all {
    touch-action: manipulation;
  }

  .mega-menu.show {
    display: block !important;
  }

  .mega-menu__products {
    max-height: 48vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}


/* =========================================================
   MEGAMENÚ: DOS COLUMNAS EN WEB Y ACORDEÓN EN MÓVIL
   ========================================================= */

/*
 * Las listas móviles existen en el HTML generado,
 * pero se ocultan completamente en escritorio.
 */
.mega-mobile-products,
.mega-mobile-view-all {
  display: none;
}

.mega-nav-item > .mega-menu {
  visibility: hidden;
  pointer-events: none;
}

.mega-nav-item.mega-menu-open > .mega-menu,
.mega-nav-item > .mega-menu.show {
  visibility: visible;
  pointer-events: auto;
}

/* Escritorio: conserva las dos columnas actuales. */
@media (min-width: 992px) {
  .mega-nav-item.mega-menu-open > .mega-menu,
  .mega-nav-item:hover > .mega-menu,
  .mega-nav-item > .mega-menu.show {
    display: grid !important;
    grid-template-columns: 320px 1fr;
  }

  .mega-mobile-category {
    display: contents;
  }
}

/* Móvil/tableta: acordeón por categoría. */
@media (max-width: 991.98px) {
  .mega-nav-item {
    position: relative;
  }

  .mega-nav-item > .mega-menu {
    position: static !important;
    left: auto !important;
    width: 100%;
    max-height: 72vh;
    margin: 8px 0 0 !important;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 14px;
    transform: none !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .mega-nav-item:not(.mega-menu-open) > .mega-menu {
    display: none !important;
  }

  .mega-nav-item.mega-menu-open > .mega-menu,
  .mega-nav-item > .mega-menu.show {
    display: block !important;
  }

  /*
   * La columna derecha de escritorio se oculta.
   * Los productos se mostrarán debajo de cada categoría.
   */
  .mega-menu__products {
    display: none !important;
  }

  .mega-menu__categories {
    width: 100%;
    padding: 6px;
    background: #26292c;
  }

  .mega-mobile-category {
    overflow: hidden;
    margin-bottom: 4px;
    border-radius: 11px;
    background: #2b2e31;
  }

  .mega-mobile-category:last-child {
    margin-bottom: 0;
  }

  .mega-category {
    width: 100%;
    min-height: 50px;
    padding: 14px 15px;
    border-radius: 11px;
    touch-action: manipulation;
  }

  .mega-category.active,
  .mega-mobile-category.is-open > .mega-category {
    background: #34383c;
    color: #fff;
  }

  /*
   * El listado queda debajo del botón de la categoría.
   */
  .mega-mobile-products {
    display: none;
    padding: 4px 14px 14px 22px;
    border-top: 1px solid rgba(255,255,255,.06);
    background: #2b2e31;
  }

  .mega-mobile-category.is-open >
  .mega-mobile-products {
    display: grid;
  }

  .mega-mobile-products a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 4px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    color: #c4c7ca;
    font-size: .9rem;
    text-decoration: none;
    touch-action: manipulation;
  }

  .mega-mobile-products a:last-child {
    border-bottom: 0;
  }

  .mega-mobile-products a:hover,
  .mega-mobile-products a:focus,
  .mega-mobile-products a:active {
    color: var(--brand-yellow);
  }

  .mega-mobile-view-all {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    color: var(--brand-orange) !important;
    font-weight: 850;
  }

  /*
   * Impide que reglas anteriores de hover o Bootstrap
   * oculten el menú después de tocar una categoría.
   */
  .mega-nav-item.mega-menu-open .mega-menu {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}