﻿.ProductHeader {
  position: sticky;
  top: 0;
  z-index: 50;
}

.ProductPage {
  background: #f2f2f2;
  padding-top: 14px;
}

.ProductDetail,
.ProductFullSpecs,
.RelatedProducts {
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
}

.ProductFullSpecs,
.RelatedProducts {
  margin-top: 20px;
}

.ProductDetail {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 28px;
}

.ProductGallery {
  padding: 12px 0 0;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.ProductMainImageWrap {
  position: relative;
  background:
    radial-gradient(circle at 75% 12%, rgba(255, 61, 61, 0.2) 0%, rgba(255, 61, 61, 0) 52%),
    linear-gradient(155deg, #f8f8f8 0%, #e8e8e8 100%);
  min-height: 420px;
  height: 420px;
  overflow: hidden;
  cursor: zoom-in;
  touch-action: pan-y;
  grid-column: 2;
  grid-row: 1;
}

.ProductMainImageWrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: scale(1);
  transform-origin: 50% 50%;
  transition: transform 120ms ease-out;
  will-change: transform;
}

.ProductGalleryStatus {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(8, 15, 27, 0.78);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  pointer-events: none;
}

.ProductLightbox {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(6, 10, 18, 0.94);
  backdrop-filter: blur(2px);
}

.ProductLightbox.is-open {
  display: flex;
}

.ProductLightboxImage {
  width: min(96vw, 1560px);
  height: min(92vh, 980px);
  object-fit: contain;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
}

.ProductLightboxStatus {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  min-width: 58px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(9, 15, 27, 0.72);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  pointer-events: none;
}

.ProductLightboxNav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  background: rgba(9, 15, 27, 0.66);
  color: #ffffff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ProductLightboxNav--prev {
  left: 14px;
}

.ProductLightboxNav--next {
  right: 14px;
}

.ProductLightboxClose {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  background: rgba(9, 15, 27, 0.66);
  color: #ffffff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.ProductLightboxClose:hover,
.ProductLightboxClose:focus-visible {
  border-color: #ff0000;
  color: #ff0000;
  outline: none;
}

.ProductLightboxNav:hover,
.ProductLightboxNav:focus-visible {
  border-color: #ff0000;
  color: #ff0000;
  outline: none;
}

body.has-lightbox-open {
  overflow: hidden;
}

.ProductThumbs {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 0;
  max-height: 420px;
  overflow-y: auto;
  overflow-x: hidden;
}

.ProductThumb {
  border: 1px solid #d8d8d8;
  background: #fff;
  padding: 2px;
  width: 72px;
  height: 54px;
  cursor: pointer;
  opacity: 0.72;
  filter: saturate(0.88) brightness(0.95);
  transition: border-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
}

.ProductThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.ProductThumb:hover,
.ProductThumb.is-active {
  border-color: #e90f0f;
  opacity: 1;
  filter: none;
}

.ProductThumb:hover {
  transform: translateY(-1px);
}

.ProductInfo {
  padding: 6px 0 0;
}

.ProductTag {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  margin-bottom: 10px;
  background: #e90f0f;
  color: #fff;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.045em;
  line-height: 1.15;
}

.ProductInfo h2,
.ProductFullSpecs h2,
.RelatedHead h2 {
  margin: 0 0 10px;
  font-family: "TASA Orbiter", "Rubik", sans-serif;
  font-size: 28px;
  line-height: 1.2;
}

.ProductInfo p {
  margin: 0;
  color: #282828;
  line-height: 1.58;
}

.ProductSubhead {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.ProductInfo > p:not(.ProductSubhead) {
  font-size: 16.5px;
  max-width: 52ch;
}

.ProductShare {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ProductShareLabel {
  font-size: 12px;
  color: #555;
}

.ProductShareLink {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #d0d0d0;
  border-radius: 50%;
  color: #1e1e1e;
  background: #fff;
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.2s ease, color 0.2s ease;
}

.ProductShareLink svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.ProductShareLink:hover {
  transform: translateY(-1px);
  border-color: #e90f0f;
  color: #e90f0f;
}

.ProductShareNote {
  min-height: 14px;
  font-size: 11px;
  color: #6a6a6a;
}

.ProductActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 18px 0 12px;
}

.ProductFullSpecs {
  padding: 22px 0 0;
}

.SpecsTableWrap {
  overflow-x: auto;
}

.SpecsTable {
  width: 100%;
  border-collapse: collapse;
}

.SpecsTable th,
.SpecsTable td {
  border-top: 1px solid #d8d8d8;
  padding: 12px 10px;
  text-align: left;
  font-size: 15px;
}

.SpecsTable th {
  width: 36%;
  color: #111;
  font-weight: 700;
}

.SpecsTable td {
  color: #333;
}

.RelatedProducts {
  margin-bottom: 0;
  padding: 22px 0 34px;
}

.RelatedHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.RelatedHead a {
  color: #e90f0f;
  text-decoration: none;
  font-weight: 700;
}

.RelatedGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.RelatedCard {
  border-top: 1px solid #ebebeb;
  padding: 12px 0 0;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  align-content: start;
  gap: 8px;
  --related-content-offset: 14%;
  --related-content-right: 6%;
}

.RelatedTitleRow {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: var(--related-content-offset);
  margin-right: var(--related-content-right);
}

.RelatedMedia {
  min-height: 136px;
  position: relative;
  isolation: isolate;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 8px 12px;
}

.RelatedMedia::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 7% 15% 9%;
  border-radius: 10px;
  transform: skewX(-12deg);
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.16)),
    linear-gradient(160deg, rgba(255,213,74,.22), rgba(255,0,0,.08)),
    url('https://img.freepik.com/fotos-premium/estacionamiento-subterraneo-vacio-filas-plazas-estacionamiento-iluminación-tenue-imagen-muestra-pisos-hormigon-lisos-limpios-senales-direccionales-claras-paredes_1077320-11371.jpg?semt=ais_hybrid&w=740&q=80');
  background-size: cover;
  background-position: center;
  border: 1px solid #e6e6e6;
  box-shadow: 0 8px 14px rgba(255,213,74,.18);
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease, filter .3s ease;
}

.RelatedMedia img {
  position: relative;
  z-index: 2;
  width: 78%;
  max-height: 128px;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.26));
  transform-origin: 50% 100%;
  transition: transform .48s cubic-bezier(.2,.75,.2,1), filter .36s ease;
}

.RelatedCard h3 {
  margin: 0;
  font-size: 19px;
  line-height: 1.15;
  font-family: "TASA Orbiter", "Rubik", sans-serif;
}

.RelatedCatTag {
  display: inline-flex;
  width: max-content;
  align-items: center;
  padding: 3px 8px;
  border: 1px solid #c9d7ee;
  border-radius: 999px;
  background: #eef4ff;
  color: #2b5c9e;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.RelatedCard p {
  margin: 0;
  color: #373737;
  line-height: 1.52;
  font-size: 16px;
  max-width: 36ch;
  margin-left: var(--related-content-offset);
  margin-right: var(--related-content-right);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.RelatedCard a {
  color: #e90f0f;
  text-decoration: none;
  font-weight: 700;
}

.RelatedCard .CotizarBtn {
  width: max-content;
  padding: 0.5vw 0.92vw;
  font-size: 0.72vw;
  line-height: 1;
  letter-spacing: 0.01vw;
  text-decoration: none;
  color: #ffffff !important;
  margin-left: var(--related-content-offset);
  margin-top: 2px;
}

.RelatedCard .CotizarBtn:hover,
.RelatedCard .CotizarBtn:focus-visible {
  color: #ffffff !important;
}

.RelatedCard:hover .RelatedMedia::before {
  border-color: #ff0000;
  box-shadow: 0 11px 18px rgba(255,0,0,.28), 0 0 0 1px rgba(255,0,0,.16);
  transform: skewX(-12deg) translateY(-2px);
  filter: saturate(1.04);
}

.RelatedCard:hover .RelatedMedia img {
  transform: translateY(-3px) scale(1.03) rotate(-0.2deg);
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.38));
}

.RelatedCard:hover h3 {
  color: #ff0000;
  text-shadow: 0 0 8px rgba(255,0,0,.28);
}

@media (max-width: 980px) {
  .ProductDetail {
    grid-template-columns: 1fr;
    margin-top: 0;
  }

  .ProductGallery {
    grid-template-columns: 1fr;
  }

  .ProductMainImageWrap,
  .ProductThumbs {
    grid-column: auto;
    grid-row: auto;
  }

  .ProductThumbs {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 10px;
    max-height: none;
    overflow: visible;
  }

  .ProductMainImageWrap {
    min-height: 320px;
    height: 320px;
  }

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

@media (max-width: 700px) {
  .ProductDetail,
  .ProductFullSpecs,
  .RelatedProducts {
    width: min(1200px, calc(100% - 24px));
  }

  .ProductGallery,
  .ProductInfo,
  .ProductFullSpecs {
    padding: 12px 0 0;
  }

  .RelatedProducts {
    padding: 12px 0 20px;
  }

  .ProductActions {
    grid-template-columns: 1fr;
  }

  .ProductInfo h2 {
    font-size: 30px;
  }

  .ProductInfo > p:not(.ProductSubhead) {
    font-size: 16px;
    line-height: 1.6;
  }

  .ProductThumb {
    width: 64px;
    height: 48px;
  }

  .ProductMainImageWrap {
    height: 260px;
  }

  .ProductLightbox {
    padding: 12px;
  }

  .ProductLightboxClose {
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    font-size: 24px;
  }

  .ProductLightboxNav {
    width: 38px;
    height: 38px;
    font-size: 26px;
  }

  .ProductLightboxNav--prev {
    left: 8px;
  }

  .ProductLightboxNav--next {
    right: 8px;
  }

  .ProductLightboxStatus {
    bottom: 10px;
    font-size: 11px;
    padding: 4px 9px;
  }

  .ProductGalleryStatus {
    display: inline-flex;
  }

  .RelatedGrid {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding: 0 2px 6px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .RelatedGrid::-webkit-scrollbar {
    height: 6px;
  }

  .RelatedGrid::-webkit-scrollbar-thumb {
    background: rgba(233, 15, 15, 0.35);
    border-radius: 999px;
  }

  .RelatedCard {
    flex: 0 0 84%;
    scroll-snap-align: start;
    padding: 10px 0 0;
    --related-content-offset: 10%;
    --related-content-right: 4%;
  }

  .RelatedCard img {
    height: auto;
  }

  .RelatedMedia {
    min-height: 126px;
  }

  .RelatedMedia img {
    width: 84%;
    max-height: 114px;
  }

  .RelatedCard p {
    -webkit-line-clamp: 3;
  }

  .RelatedCard .CotizarBtn {
    padding: 1.8vw 3.9vw;
    font-size: 2.65vw;
    border-width: 0.2vw;
  }
}

body.dark-mode .ProductPage {
  background: #121212;
}

body.dark-mode .ProductGallery,
body.dark-mode .ProductInfo,
body.dark-mode .ProductFullSpecs,
body.dark-mode .RelatedProducts {
  background: transparent;
  border-color: transparent;
}

body.dark-mode .ProductMainImageWrap {
  background:
    radial-gradient(circle at 75% 12%, rgba(255, 77, 77, 0.2) 0%, rgba(255, 77, 77, 0) 52%),
    linear-gradient(155deg, #232323 0%, #1e1e1e 100%);
}

body.dark-mode .ProductThumb {
  background: #1e1e1e;
  border-color: rgba(255, 255, 255, 0.12);
}

body.dark-mode .ProductThumb:hover,
body.dark-mode .ProductThumb.is-active {
  border-color: #ff0000;
}

body.dark-mode .ProductInfo h2,
body.dark-mode .ProductFullSpecs h2,
body.dark-mode .RelatedHead h2,
body.dark-mode .ProductSpecs h3,
body.dark-mode .RelatedCard h3 {
  color: #eef4ff;
}

body.dark-mode .ProductInfo p,
body.dark-mode .RelatedCard p,
body.dark-mode .SpecsTable td {
  color: #ffffff;
}

body.dark-mode .ProductSubhead,
body.dark-mode .ProductShareLabel,
body.dark-mode .ProductShareNote {
  color: #ffffff;
}

body.dark-mode .ProductShareLink {
  background: #1e1e1e;
  border-color: rgba(255, 255, 255, 0.12);
  color: #eef4ff;
}

body.dark-mode .ProductGalleryStatus {
  background: rgba(30, 30, 30, 0.86);
  color: #ffffff;
}

body.dark-mode .ProductShareLink:hover {
  border-color: #ff0000;
  color: #ff0000;
}

body.dark-mode .SpecsTable th {
  color: #eef4ff;
}

body.dark-mode .SpecsTable th,
body.dark-mode .SpecsTable td {
  border-top-color: rgba(255, 255, 255, 0.12);
}

body.dark-mode .RelatedCatTag {
  border-color: rgba(255, 255, 255, 0.12);
  background: #232323;
  color: #eef4ff;
}
body.dark-mode .RelatedCard {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.12);
}

body.dark-mode .RelatedMedia::before {
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.3)),
    linear-gradient(160deg, rgba(255,213,74,.18), rgba(255,0,0,.08)),
    url('https://img.freepik.com/fotos-premium/estacionamiento-subterraneo-vacio-filas-plazas-estacionamiento-iluminación-tenue-imagen-muestra-pisos-hormigon-lisos-limpios-senales-direccionales-claras-paredes_1077320-11371.jpg?semt=ais_hybrid&w=740&q=80');
  background-size: cover;
  background-position: center;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 14px rgba(0,0,0,.34);
}

body.dark-mode .RelatedCard:hover .RelatedMedia::before {
  border-color: #ff0000;
  box-shadow: 0 11px 18px rgba(255,0,0,.24), 0 0 0 1px rgba(255,0,0,.2);
}

body.dark-mode .RelatedCard:hover h3 {
  color: #ff0000;
  text-shadow: 0 0 10px rgba(255,0,0,.35);
}

@media (hover: none), (pointer: coarse) {
  .ProductMainImageWrap {
    cursor: default;
  }

  .ProductMainImageWrap img {
    transform: scale(1) !important;
    transition: none;
  }
}











.ProductInfo h2 {
  margin-bottom: 16px;
}

.ProductSubhead {
  margin-bottom: 14px;
}

.ProductInfo > p:not(.ProductSubhead) {
  margin-top: 8px;
}


.ProductFullSpecs h2 {
  font-size: 24px;
}


.ProductFullSpecs.is-collapsed .SpecsTableWrap {
  max-height: 260px;
  overflow: hidden;
  position: relative;
}

.ProductFullSpecs.is-collapsed .SpecsTableWrap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 84px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(242, 242, 242, 0) 0%, rgba(242, 242, 242, 1) 100%);
}

.SpecsToggleBtn {
  margin: 10px auto 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: #e90f0f;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.SpecsToggleArrow {
  transition: transform 0.2s ease;
}

.ProductFullSpecs:not(.is-collapsed) .SpecsToggleArrow {
  transform: rotate(180deg);
}

body.dark-mode .ProductFullSpecs.is-collapsed .SpecsTableWrap::after {
  background: linear-gradient(to bottom, rgba(30, 30, 30, 0) 0%, rgba(30, 30, 30, 1) 100%);
}

body.dark-mode .SpecsToggleBtn {
  color: #ff8080;
}


/* Specs Toggle Override */
.SpecsToggleBtn {
  margin: 10px auto 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: max-content;
  text-align: center;
}

.SpecsToggleText {
  display: block;
  text-align: center;
}

.SpecsToggleArrow {
  display: block;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.ProductFullSpecs:not(.is-collapsed) .SpecsToggleArrow {
  transform: rotate(-135deg);
}


/* Specs Center Fix */
.ProductFullSpecs .SpecsToggleBtn {
  display: flex;
  margin: 10px auto 0;
  width: max-content;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Specs Color Override */
.ProductFullSpecs .SpecsToggleBtn {
  color: #2f5d9f;
}

body.dark-mode .ProductFullSpecs .SpecsToggleBtn {
  color: #9ec1ff;
}

/* Menu Blue Sync */
.ProductSubhead,
.ProductFullSpecs .SpecsToggleBtn {
  color: #44517d;
}

body.dark-mode .ProductSubhead,
body.dark-mode .ProductFullSpecs .SpecsToggleBtn {
  color: #ffffff;
}

/* Subtitle Color Fix */
.ProductInfo .ProductSubhead {
  color: #44517d !important;
}

body.dark-mode .ProductInfo .ProductSubhead {
  color: #ffffff !important;
}

/* Specs Hover Red */
.ProductFullSpecs .SpecsToggleBtn:hover,
.ProductFullSpecs .SpecsToggleBtn:focus-visible {
  color: #ff0000;
}

.ProductThumb:focus-visible,
.ProductShareLink:focus-visible,
.RelatedCard .CotizarBtn:focus-visible,
.RelatedHead a:focus-visible,
.ProductFullSpecs .SpecsToggleBtn:focus-visible {
  outline: 2px solid #ff0000;
  outline-offset: 2px;
}

body.dark-mode .ProductFullSpecs .SpecsToggleBtn:hover,
body.dark-mode .ProductFullSpecs .SpecsToggleBtn:focus-visible {
  color: #ff0000;
}

/* Unified Red Button Hover (excluding header FooterCTA) */
.BotonHV,
.BotonHV2,
.BotonHV33,
.BotonHV33z,
.BotonHVF1,
.CotizarBtn,
.MobileCTA {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.BotonHV::before,
.BotonHV2::before,
.BotonHV33::before,
.BotonHV33z::before,
.BotonHVF1::before,
.CotizarBtn::before,
.MobileCTA::before {
  content: "";
  position: absolute;
  top: -35%;
  left: -45%;
  width: 32%;
  height: 170%;
  background: linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.52) 48%, rgba(255,255,255,0) 100%);
  opacity: 0;
  transform: translateX(-240%) rotate(18deg);
  pointer-events: none;
}

.BotonHV:hover::before,
.BotonHV2:hover::before,
.BotonHV33:hover::before,
.BotonHV33z:hover::before,
.BotonHVF1:hover::before,
.CotizarBtn:hover::before,
.MobileCTA:hover::before,
.BotonHV:focus-visible::before,
.BotonHV2:focus-visible::before,
.BotonHV33:focus-visible::before,
.BotonHV33z:focus-visible::before,
.BotonHVF1:focus-visible::before,
.CotizarBtn:focus-visible::before,
.MobileCTA:focus-visible::before {
  animation: redBtnShine 0.56s cubic-bezier(0.22, 0.61, 0.36, 1) 1;
}

@keyframes redBtnShine {
  0% {
    opacity: 0;
    transform: translateX(-240%) rotate(18deg);
  }
  12% {
    opacity: 1;
  }
  74% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(430%) rotate(18deg);
  }
}

.BotonHV:hover,
.BotonHV2:hover,
.BotonHV33:hover,
.BotonHV33z:hover,
.BotonHVF1:hover,
.CotizarBtn:hover,
.MobileCTA:hover,
.BotonHV:focus-visible,
.BotonHV2:focus-visible,
.BotonHV33:focus-visible,
.BotonHV33z:focus-visible,
.BotonHVF1:focus-visible,
.CotizarBtn:focus-visible,
.MobileCTA:focus-visible {
  transform: translateY(-0.18vw);
  box-shadow: 0 0.7vw 1.5vw rgba(255, 0, 0, 0.45);
  filter: brightness(1.04);
}

.BotonHV2:disabled,
.BotonHV33:disabled,
.BotonHV33z:disabled,
.MobileCTA:disabled {
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* FooterCTA Hover Sync */
.FooterCTA {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.FooterCTA::before {
  content: "";
  position: absolute;
  top: -35%;
  left: -45%;
  width: 32%;
  height: 170%;
  background: linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.52) 48%, rgba(255,255,255,0) 100%);
  opacity: 0;
  transform: translateX(-240%) rotate(18deg);
  pointer-events: none;
}

.FooterCTA:hover::before,
.FooterCTA:focus-visible::before {
  animation: redBtnShine 0.56s cubic-bezier(0.22, 0.61, 0.36, 1) 1;
}

.FooterCTA:hover,
.FooterCTA:focus-visible {
  transform: translateY(-0.18vw);
  box-shadow: 0 0.7vw 1.5vw rgba(255, 0, 0, 0.45);
  filter: brightness(1.04);
}

/* Unified White Button Hover */
.FichaBtn,
.BotonHVF1 {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.FichaBtn::before,
.BotonHVF1::before {
  content: "";
  position: absolute;
  top: -35%;
  left: -45%;
  width: 32%;
  height: 170%;
  background: linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.72) 48%, rgba(255,255,255,0) 100%);
  opacity: 0;
  transform: translateX(-240%) rotate(18deg);
  pointer-events: none;
}

.FichaBtn:hover::before,
.FichaBtn:focus-visible::before,
.BotonHVF1:hover::before,
.BotonHVF1:focus-visible::before {
  animation: whiteBtnShine 0.56s cubic-bezier(0.22, 0.61, 0.36, 1) 1;
}

@keyframes whiteBtnShine {
  0% {
    opacity: 0;
    transform: translateX(-240%) rotate(18deg);
  }
  12% {
    opacity: 1;
  }
  74% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(430%) rotate(18deg);
  }
}

.FichaBtn:hover,
.FichaBtn:focus-visible,
.BotonHVF1:hover,
.BotonHVF1:focus-visible {
  transform: translateY(-0.16vw);
  box-shadow: 0 0.65vw 1.35vw rgba(68, 81, 125, 0.28), 0 0 0 0.08vw rgba(68, 81, 125, 0.28);
  filter: brightness(1.03);
  border-color: #44517d;
  color: #44517d;
}

body.dark-mode .FichaBtn:hover,
body.dark-mode .FichaBtn:focus-visible,
body.dark-mode .BotonHVF1:hover,
body.dark-mode .BotonHVF1:focus-visible {
  box-shadow: 0 0.7vw 1.45vw rgba(255, 0, 0, 0.25), 0 0 0 0.08vw rgba(255, 0, 0, 0.22);
  border-color: #ffffff;
  color: #eef4ff;
}








/* Product Hover Sync: image + buttons */
.CamionCard:hover .CotizarBtn::before,
.CamionCard:focus-within .CotizarBtn::before,
.CamionCard:hover .BotonHV::before,
.CamionCard:focus-within .BotonHV::before,
.CamionCard:hover .BotonHV2::before,
.CamionCard:focus-within .BotonHV2::before,
.CamionCard:hover .BotonHV33::before,
.CamionCard:focus-within .BotonHV33::before,
.CamionCard:hover .BotonHV33z::before,
.CamionCard:focus-within .BotonHV33z::before,
.CamionCard:hover .MobileCTA::before,
.CamionCard:focus-within .MobileCTA::before,
.RelatedCard:hover .CotizarBtn::before,
.RelatedCard:focus-within .CotizarBtn::before {
  animation: redBtnShine 0.56s cubic-bezier(0.22, 0.61, 0.36, 1) 1;
}

.CamionCard:hover .CotizarBtn,
.CamionCard:focus-within .CotizarBtn,
.CamionCard:hover .BotonHV,
.CamionCard:focus-within .BotonHV,
.CamionCard:hover .BotonHV2,
.CamionCard:focus-within .BotonHV2,
.CamionCard:hover .BotonHV33,
.CamionCard:focus-within .BotonHV33,
.CamionCard:hover .BotonHV33z,
.CamionCard:focus-within .BotonHV33z,
.CamionCard:hover .MobileCTA,
.CamionCard:focus-within .MobileCTA,
.RelatedCard:hover .CotizarBtn,
.RelatedCard:focus-within .CotizarBtn {
  transform: translateY(-0.18vw);
  box-shadow: 0 0.7vw 1.5vw rgba(255, 0, 0, 0.45);
  filter: brightness(1.04);
}

.CamionCard:hover .FichaBtn::before,
.CamionCard:focus-within .FichaBtn::before,
.CamionCard:hover .BotonHVF1::before,
.CamionCard:focus-within .BotonHVF1::before,
.RelatedCard:hover .FichaBtn::before,
.RelatedCard:focus-within .FichaBtn::before {
  animation: whiteBtnShine 0.56s cubic-bezier(0.22, 0.61, 0.36, 1) 1;
}

.CamionCard:hover .FichaBtn,
.CamionCard:focus-within .FichaBtn,
.CamionCard:hover .BotonHVF1,
.CamionCard:focus-within .BotonHVF1,
.RelatedCard:hover .FichaBtn,
.RelatedCard:focus-within .FichaBtn {
  transform: translateY(-0.16vw);
  box-shadow: 0 0.65vw 1.35vw rgba(68, 81, 125, 0.28), 0 0 0 0.08vw rgba(68, 81, 125, 0.28);
  filter: brightness(1.03);
  border-color: #44517d;
  color: #44517d;
}

body.dark-mode .CamionCard:hover .FichaBtn,
body.dark-mode .CamionCard:focus-within .FichaBtn,
body.dark-mode .CamionCard:hover .BotonHVF1,
body.dark-mode .CamionCard:focus-within .BotonHVF1,
body.dark-mode .RelatedCard:hover .FichaBtn,
body.dark-mode .RelatedCard:focus-within .FichaBtn {
  box-shadow: 0 0.7vw 1.45vw rgba(255, 0, 0, 0.25), 0 0 0 0.08vw rgba(255, 0, 0, 0.22);
  border-color: #ffffff;
  color: #eef4ff;
}



/* Product UX Enhancements v20260301 */
.ProductTopHead {
  grid-column: 1 / -1;
  padding: 4px 0 10px;
}

.ProductTopHead .ProductTag {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  margin-bottom: 10px;
  background: #e90f0f;
  color: #fff;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.045em;
  line-height: 1.15;
}

.ProductTopHead h2 {
  margin: 0 0 10px;
  font-family: "TASA Orbiter", "Rubik", sans-serif;
  font-size: 28px;
  line-height: 1.2;
}

.ProductTopHead .ProductSubhead {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.ProductInfo {
  padding-top: 0;
}

.ProductMobileDots {
  display: none;
}

.ProductDescToggle {
  display: none;
}

@media (max-width: 700px) {
  .ProductTopHead {
    padding: 4px 0 8px;
  }

  .ProductTopHead h2 {
    font-size: 30px;
  }

  .ProductThumbs {
    display: none !important;
  }

  .ProductGalleryStatus {
    display: none !important;
  }

  .ProductMobileDots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 10px 0 0;
  }

  .ProductMobileDot {
    width: 8px;
    height: 8px;
    border: 0;
    border-radius: 999px;
    background: rgba(68, 81, 125, 0.32);
    padding: 0;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
  }

  .ProductMobileDot.is-active {
    background: #e90f0f;
    transform: scale(1.22);
  }

  .ProductInfo .ProductDescText {
    position: relative;
  }

  .ProductInfo .ProductDescText.is-collapsed {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }

  .ProductInfo .ProductDescText.is-collapsed::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2.2em;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(242, 242, 242, 0), rgba(242, 242, 242, 1));
  }

  .ProductDescToggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 8px 0 0;
    border: 0;
    background: transparent;
    color: #44517d;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0;
    cursor: pointer;
  }

  .ProductDescToggle:hover,
  .ProductDescToggle:focus-visible {
    color: #ff0000;
    outline: none;
  }
}

body.dark-mode .ProductTopHead h2 {
  color: #eef4ff;
}

body.dark-mode .ProductTopHead .ProductSubhead {
  color: #ffffff;
}

@media (max-width: 700px) {
  body.dark-mode .ProductMobileDot {
    background: rgba(255, 255, 255, 0.18);
  }

  body.dark-mode .ProductMobileDot.is-active {
    background: #ff0000;
  }

  body.dark-mode .ProductInfo .ProductDescText.is-collapsed::after {
    background: linear-gradient(to bottom, rgba(30, 30, 30, 0), rgba(30, 30, 30, 1));
  }

  body.dark-mode .ProductDescToggle {
    color: #ffffff;
  }

  body.dark-mode .ProductDescToggle:hover,
  body.dark-mode .ProductDescToggle:focus-visible {
    color: #ff0000;
  }
}

/* ProductInfo Desktop Vertical Center v20260302 */
@media (min-width: 981px) {
  .ProductDetail {
    align-items: center;
  }

  .ProductInfo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 420px;
  }
}

/* Product Description Unified Size v20260302 */
.ProductInfo > p:not(.ProductSubhead) {
  font-size: 15px;
  line-height: 1.56;
}

/* Mega Menu Backdrop Sync v20260302 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, visibility 0.22s ease;
  z-index: 1190;
}

body.mega-menu-open::before {
  opacity: 1;
  visibility: visible;
}


/* Hierarchy Red Cintillos */
.ProductInfo h2,
.ProductFullSpecs h2,
.RelatedHead h2,
.CapacityBlock h3,
.VehicleBlock h3 {
  position: relative;
  padding-bottom: 10px;
}

.ProductInfo h2::after,
.ProductFullSpecs h2::after,
.RelatedHead h2::after,
.CapacityBlock h3::after,
.VehicleBlock h3::after {
  content: "";
  display: block;
  width: 62px;
  max-width: 38%;
  height: 3px;
  border-radius: 99px;
  margin-top: 8px;
  background: #ff0000;
  box-shadow: 0 1px 10px rgba(255, 0, 0, 0.22);
}

@media (max-width: 700px) {
  .ProductInfo h2,
  .ProductFullSpecs h2,
  .RelatedHead h2,
  .CapacityBlock h3,
  .VehicleBlock h3 {
    padding-bottom: 8px;
  }

  .ProductInfo h2::after,
  .ProductFullSpecs h2::after,
  .RelatedHead h2::after,
  .CapacityBlock h3::after,
  .VehicleBlock h3::after {
    width: 52px;
    height: 2px;
    margin-top: 7px;
  }
}

.RelatedMedia > a {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}







/* === CORPORATE OVERRIDES (global) === */
:root{
  --corp-text:#15181c;
  --corp-muted:#4b5361;
  --corp-line:#e2e6ef;
  --corp-surface:#f5f6f8;
  --corp-radius:.6vw;
  --corp-shadow:0 .35vw .85vw rgba(0,0,0,.08);
  --corp-shadow-strong:0 .55vw 1.2vw rgba(0,0,0,.12);
}

body{color:var(--corp-text);line-height:1.6}

p,li{
  color:var(--corp-muted);
  font-size:clamp(14px,.95vw,16px);
  line-height:1.6;
}

h1,h2,h3{
  letter-spacing:.01em;
  line-height:1.2;
}

h1{font-size:clamp(28px,2.9vw,44px)}
h2{font-size:clamp(22px,2.05vw,34px)}
h3{font-size:clamp(18px,1.25vw,24px)}

/* Header más sobrio */
.Footer.is-scrolled{box-shadow:0 .25vw .7vw rgba(0,0,0,.12)}

/* Filtros más corporativos */
body:not(.dark-mode) .FiltrosWrap{box-shadow:0 .18vw .6vw rgba(15,22,32,.08)}
body:not(.dark-mode) .FiltroBtn:hover{
  box-shadow:0 .2vw .6vw rgba(0,0,0,.08);
  border-color:#e5e8ef;
  background:#fff;
  color:#111827;
}
body:not(.dark-mode) .FiltroBtn.is-active{
  background:#ff0000;
  border-color:#ff0000;
  color:#fff;
  box-shadow:0 .25vw .7vw rgba(0,0,0,.12);
}

/* Hero más sobrio */
.CamionesHero{
  background:linear-gradient(180deg,#15171c 0%, #0f1216 100%);
}
body.dark-mode .CamionesHero{
  background:linear-gradient(180deg,#0e1014 0%, #0a0c10 100%);
}

/* Separadores sobrios */
.CamionCard{border-bottom:.06vw solid var(--corp-line)}
body.dark-mode .CamionCard{border-bottom:.06vw solid #273142}

/* Ajustes en modo oscuro */
body.dark-mode{color:#ffffff}
body.dark-mode p,body.dark-mode li{color:#ffffff}

