/* 
 * ZC-MAYORISTAS | E-COMMERCE Template
 * Copyright 2024 Company zc mayoristas s.a
 * Theme styles
 */
/*!
  * Author: ZC MAYORISTAS | Departamento Marketing 
  * Description: Description
  * Version: 1.0.0
  * 
  */
:root {
  --zc-bg-blue-gulf: #000F58;
  --zc-bg-blue: #0000F0;
  --zc-bg-blue-700: #0000F8;
  --zc-bg-blue-picton: #07B7FD;
  --zc-bg-blue-alice-50: #F0F7FE;
  --zc-solitude: #DEEDFB;
  --zc-bg-mariner: #2D65C8;
  --zc-coral-red: #EF4444;
  --zc-bg-radical-red: #FA3C6A;
  --zc-bg-roman: #E75A5A;
  --zc-bg-green-600: #00AA52;
  --zc-bg-apple: #2BA430;
  --zc-bg-mountain-meadow-500: #00BA88;
  --zc-bg-lemon: #FFEA00;
  --zc-bg-supernova: #FFC500;
  --zc-bg-gamboge: #EE9C06;
  --zc-bg-bunker: #191C1F;
  --zc-bg-stone: #1F2937;
  --zc-bg-white: #ffffff;
  --zc-bg-alabaster: #F9FAFB;
  --zc-bg-athens-gray: #E5E7EB;
  --zc-bg-alto: #D9D9D9;
  --zc-bg-dove-gray-100: #E7E7E7;
  --zc-bg-dove-gray-400: #888888;
  --zc-bg-dove-gray-500: #6D6D6D;
  --zc-bg-dove-gray-600: #5D5D5D;
  --zc-bg-dove-gray-700: #4F4F4F;
  --zc-bg-gray: #808080;
  --zc-bg-iron: #D1D1D1;
  --zc-bg-mercury: #E4E7E9;
  --zc-bg-wild-sand: #F3F4F6;
  --zc-bg-wild-sand-50: #F6F6F6;
  --zc-bg-rolling-stone: #77878F;
  --zc-bg-porcelain: #F2F4F5;
  --zc-bg-blue-gulf-rgba: 0, 15, 88;
  --zc-bg-blue-rgba-700: 0, 0, 248;
}

.avatar-xl {
  height: 3rem;
  width: 3rem;
}

.avatar-xl .avatar-name {
  font-size: 1.5789473684rem;
  line-height: 1.2;
}

.avatar-xl .avatar-emoji {
  font-size: 3rem;
}

.avatar-xl[class*=status-]:before {
  border: 2px solid var(--phoenix-emphasis-bg);
  height: 12px;
  width: 12px;
  left: 1px;
  bottom: 1px;
}

.avatar-xl .rounded-soft {
  border-radius: 0.5rem !important;
}

.avatar-xl .rounded-none {
  border-radius: 0 !important;
}

.col-0 {
  flex: 0 0 auto;
  width: 0;
}

/* .form-control{color: var(--zc-bg-bunker) !important;} */
.fs-xss {
  font-size: 0.625rem !important;
}
.letter-truncate-10 {
  width: 10ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.text-truncate-60 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
.text-truncate-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.text-justify {
  text-align: justify;
}

/* Clases para tamaños pequeños */
.placeholder-sm::placeholder {
  font-size: 0.75rem;
}

/* Clases para tamaños medianos */
.placeholder-md::placeholder {
  font-size: 1rem;
}

/* Clases para tamaños grandes */
.placeholder-lg::placeholder {
  font-size: 1.25rem;
}

/* Clases para tamaños extra grandes */
.placeholder-xl::placeholder {
  font-size: 1.5rem;
}

/* Clases para tamaños personalizados */
.placeholder-xxl::placeholder {
  font-size: 2rem;
}

.position-initial {
  position: initial;
}

.w-25 {
  width: 25%;
}

.w-75 {
  width: 75%;
}

.zc-accordion-privacy-policy .accordion-button:not(.collapsed) {
  background-color: var(--zc-bg-blue-gulf);
  color: var(--zc-bg-white);
}

.zc-shadow-1 {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}

.zc-shadow-2 {
  box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
}
.zc-shadow-3{
  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}
.zc-accordion-privacy-policy .accordion-button::after {
  background-image: none !important;
  font-family: 'bootstrap-icons';
  content: "\F64D";
  color: var(--zc-bg-rolling-stone);
}

.zc-accordion-privacy-policy .accordion-button:not(.collapsed)::after {
  font-family: 'bootstrap-icons';
  content: "\F63B";
  color: var(--zc-bg-white);
}

.zc-alert-primary {
  color: var(--zc-bg-bunker);
  background-color: var(--zc-bg-blue-alice-50);
  border-color: var(--zc-bg-blue-700);
}

.zc-border-primary {
  --zc-border-opacity: 1;
  border-color: rgba(var(--zc-bg-blue-rgba-700), var(--zc-border-opacity)) !important;
}

.zc-button-primary {
  background-color: var(--zc-bg-blue-700);
  color: var(--zc-bg-white);
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.zc-button-primary:hover {
  background-color: var(--zc-bg-white);
  color: var(--zc-bg-blue-700);
  border-color: var(--zc-bg-blue-700);
  transform: translateY(-2px);
}

.zc-button-primary:active {
  background-color: #0000D1 !important;
  border-color: #0000D1 !important;
  color: var(--zc-bg-white) !important;
  transform: translateY(0) !important;
}

.zc-button-primary:focus {
  outline: none;
  box-shadow: none !important;
}

.zc-button-primary:focus-visible {
  background-color: var(--zc-bg-blue-700);
  color: var(--zc-bg-white);
  outline: 2px solid rgba(var(--zc-bg-blue-700), 0.8);
  outline-offset: 4px;
}

.zc-button-primary:disabled {
  background-color: var(--zc-bg-dove-gray-500);
  color: #ffffff;
  border: 2px solid var(--zc-bg-dove-gray-500);
  opacity: 0.99;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}

.zc-button-primary:disabled:hover {
  background-color: var(--zc-bg-dove-gray-500);
  color: #ffffff;
}

.zc-button-outline-primary {
  background-color: var(--zc-bg-white);
  color: var(--zc-bg-blue-700);
  border-color: var(--zc-bg-blue-700);
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.zc-button-outline-primary:hover {
  background-color: var(--zc-bg-blue-700);
  color: var(--zc-bg-white);
  transform: translateY(-2px);
}

.zc-button-outline-primary:active {
  background-color: #0000D1 !important;
  border-color: #0000D1 !important;
  color: var(--zc-bg-white) !important;
  transform: translateY(0) !important;
}

.zc-button-outline-primary:focus {
  outline: none;
  box-shadow: none !important;
}

.zc-button-outline-primary:disabled {
  background-color: var(--zc-bg-dove-gray-500);
  color: #ffffff;
  border: 2px solid var(--zc-bg-dove-gray-500);
  opacity: 0.99;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}

.zc-button-outline-primary:disabled:hover {
  background-color: var(--zc-bg-dove-gray-500);
  color: #ffffff;
}

.zc-button-secondary {
  background-color: var(--zc-bg-dove-gray-500);
  color: var(--zc-bg-white);
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.zc-button-secondary:hover {
  background-color: var(--zc-bg-white);
  color: var(--zc-bg-dove-gray-600);
  border-color: var(--zc-bg-dove-gray-600);
  transform: translateY(-2px);
}

.zc-button-secondary:active {
  background-color: var(--zc-bg-dove-gray-700) !important;
  border-color: var(--zc-bg-dove-gray-700) !important;
  color: var(--zc-bg-white) !important;
  transform: translateY(0) !important;
}

.zc-button-secondary:focus {
  outline: none;
  box-shadow: none !important;
}

.zc-button-secondary:disabled {
  background-color: var(--zc-bg-dove-gray-100);
  color: var(--zc-bg-dove-gray-400);
  border: 2px solid var(--zc-bg-dove-gray-100);
  opacity: 0.99;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}

.zc-button-secondary:disabled:hover {
  background-color: var(--zc-bg-dove-gray-500);
  color: var(--zc-bg-dove-gray-400);
}

.zc-button-offer {
  background-color: var(--zc-bg-mountain-meadow-500);
  color: var(--zc-bg-lemon) !important;
  border: none;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.zc-button-offer:hover,
.zc-button-offer:focus {
  background-color: #009b72;
  transform: translateY(-3px);
  outline: none;
}

.zc-button-offer:active {
  background-color: #007e5a !important;
  transform: translateY(0) !important;
}

.zc-button-offer:disabled {
  background-color: #A9A9A9;
  color: #ffffff;
  opacity: 0.7;
}

[data-bs-theme="light"] .zc-btn-outline-secondary {
  color: #333d4c;
}

.zc-bg-primary {
  --zc-bg-opacity: 1;
  background-color: rgba(var(--zc-bg-blue-rgba-700), var(--zc-bg-opacity));
}

/* .zc-bg-christmas {
  --zc-bg-opacity: 1;
  background-color: rgba(176, 27, 27, var(--zc-bg-opacity));
  background-image: 
    linear-gradient(45deg, rgba(0, 100, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 100, 0, 0.1) 75%, rgba(0, 100, 0, 0.1)),
    linear-gradient(45deg, rgba(0, 100, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 100, 0, 0.1) 75%, rgba(0, 100, 0, 0.1));
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
} */

.zc-bg-blue-gulf {
  --zc-bg-opacity: 1;
  background-color: rgba(var(--zc-bg-blue-gulf-rgba), var(--zc-bg-opacity));
}

.zc-bg-gradient-primary {
  background: linear-gradient(90deg, rgba(0, 15, 88, 0.95) 0%, rgba(0, 0, 248, 0.95) 100%);
}

.zc-bg-gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(29, 46, 81, 0) 30%, rgba(0, 0, 248, 0.93) 100%);
  z-index: 1;
}

.zc-bg-liner-gradient-n90-700 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(-90deg, rgba(29, 46, 81, 0) 20%, rgba(0, 0, 248, 0.95) 80%);
  z-index: 1;
}

.zc-bg-liner-gradient-blue-n90 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(0, 0, 248, 0.80) 72%, rgba(0, 0, 248, 0.80) 48%);
  z-index: 1;
}

.zc-bg-img-mv {
  background-image: url('/commerce/assets/img/about/zc/bg-2.png'), url('/commerce/assets/img/about/zc/bg-1.png');
  background-position: left top, right top;
  background-repeat: no-repeat, no-repeat;
  background-size: contain, contain;
  position: relative;
  /* padding: 2rem 1rem; */
}

.zc-bg-img-time-map {
  background-image: url('/commerce/assets/img/about/zc/svg/zc-time-map-v2.svg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  aspect-ratio: 16 / 9;
  width: 100%;
}

/* .zc-tag-discount::before {
  position: absolute;
  height: 100%;
  width: 100%;
  border-radius: .25rem;
  --tw-bg-opacity: 1;
  background-color: rgb(252 59 78/var(--tw-bg-opacity));
  content: "";
  left: 15%;
  transform: skew(-18deg);
} */

/* .card-footer {
    background: #f8f9fa;
    padding: 1rem;
    border-top: 1px solid #dee2e6;
} */

.price {
  font-size: 1rem;
  color: #343a40;
}

.original-price {
  font-size: 0.9rem;
  color: #adb5bd;
  margin-right: 0.5rem;
}

.current-price {
  font-weight: bold;
  color: #28a745;
}

.zc-tag-discount {
  position: relative;
  display: inline-block;
  padding: 0.25rem 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(252 59 78/var(--tw-bg-opacity));
  border-radius: 0.25rem;
  transform: skew(-10deg);
  overflow: hidden;
  width: auto;
  min-width: 60px;
  text-align: center;
  left: 8%;
}

.zc-tag-discount::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(252, 59, 78);
  transform: skew(-18deg);
  z-index: -1;
}

.discount-text {
  font-size: 0.975rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: relative;
  transform: skew(10deg);
}


span.zc-v-dividing-linea::after {
  display: block;
  height: 140px;
  content: "";
  background: #EE9C06;
  border-left: 0.0975rem solid;
}

span.zc-vlinea-primary::after {
  display: block;
  height: 100%;
  background: var(--zc-bg-blue-700);
  content: "";
  border-left: 0.0975rem solid var(--zc-bg-blue-700);
}

.same-height-image {
  height: 450px;
  /* Ajusta la altura según lo necesario */
  width: auto;
  /* Mantiene la proporción original */
  object-fit: cover;
  /* Opcional: Asegura que la imagen llene el contenedor */
  display: block;
  /* Para asegurarte de que no haya problemas con alineación */
  margin: auto;
  /* Centra la imagen dentro del contenedor */
}


[data-bs-theme="light"] .zc-btn-blue-gulf-light {
  background-color: var(--zc-bg-blue-gulf);
  color: var(--zc-bg-white);
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

[data-bs-theme="light"] .zc-bg-gulf-blue {
  background: var(--zc-bg-blue-gulf);
}

[data-bs-theme="light"] .zc-bg-spindle-link-light {
  /* background: linear-gradient(360deg, #ADCCEE 0%, #E3EDFC 18%, #E3EDFC 100%); */
  /* background: linear-gradient(0deg, rgba(173, 204, 238, 1) 0%, rgba(227, 237, 252, 1) 18%); */
  background: rgb(173, 204, 238);
  background: linear-gradient(0deg, rgba(173, 204, 238, 1) 0%, rgba(227, 237, 252, 1) 30%);
}

[data-bs-theme="light"] .zc-text-primary-light {
  color: var(--zc-bg-blue-700);
}

[data-bs-theme="light"] .zc-text-blue-gulf-light {
  color: var(--zc-bg-blue-gulf);
}

[data-bs-theme="light"] .zc-text-dove-gray-light {
  color: var(--zc-bg-dove-gray-600);
}

[data-bs-theme="light"] .zc-text-mariner {
  color: var(--zc-bg-mariner);
}

[data-bs-theme="light"] .zc-text-green-6 {
  color: var(--zc-bg-green-600);
}

[data-bs-theme="light"] .form-control.zc-form {
  border-color: #cad0d9;
  color: var(--zc-bg-bunker);
}

[data-bs-theme="light"] .zc-text-gradient-blue {
  background: linear-gradient(to right, #000F58, #0000F8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.zc-input-elevate {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
  transition: all 0.3s ease-in-out;
  box-shadow: none;
}

.zc-input-elevate:focus {
  background-color: var(--zc-bg-white);
  border-color: var(--zc-bg-mariner) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
  transform: translateY(-2px);
}

.zc-text-primary {
  color: var(--zc-bg-blue-700);
}

.zc-text-bunker {
  color: var(--zc-bg-bunker)
}

.zc-text-mountain {
  color: var(--zc-bg-mountain-meadow-500);
}

.zc-text-blue-gulf {
  color: var(--zc-bg-blue-gulf);
}

.zc-text-blue-picton {
  color: var(--zc-bg-blue-picton);
}

.zc-text-supernova {
  color: var(--zc-bg-supernova);
}

.zc-text-gamboge {
  color: var(--zc-bg-gamboge);
}

.navbar-stuck {
  box-shadow: 0px 2px 15px rgba(25, 119, 204, 0.1);
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .w-sm-25 {
    width: 25% !important;
  }

  .w-sm-50 {
    width: 50% !important;
  }

  .w-sm-75 {
    width: 75% !important;
  }

  .w-sm-100 {
    width: 100% !important;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .w-md-25 {
    width: 25% !important;
  }

  .w-md-50 {
    width: 50% !important;
  }

  .w-md-75 {
    width: 75% !important;
  }

  .w-md-100 {
    width: 100% !important;
  }

  .same-height-image {
    height: 350px;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .w-lg-25 {
    width: 25% !important;
  }

  .w-lg-50 {
    width: 50% !important;
  }

  .w-lg-75 {
    width: 75% !important;
  }

  .w-lg-100 {
    width: 100% !important;
  }

  .same-height-image {
    height: 450px;
  }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .w-xl-25 {
    width: 25% !important;
  }

  .w-xl-50 {
    width: 50% !important;
  }

  .w-xl-75 {
    width: 75% !important;
  }

  .w-xl-100 {
    width: 100% !important;
  }

  [data-bs-theme="light"] .offcanvas.zc-offcanvas {
    background-color: var(--zc-bg-dove-gray-100) !important;
  }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {}


/* `sm` applies to x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  .same-height-image {
    height: 235px;
  }
}

/* `md` applies to small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
  .zc-bg-img-mv {
    background-size: 75%, 75%;
    background-position: left bottom, right top;
  }
}

/* `lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {}

/* `xl` applies to large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {}

/* `xxl` applies to x-large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {}

/* Chrome, Safari, Edge, Opera */
input.zc-input-elevate::-webkit-outer-spin-button,
input.zc-input-elevate::-webkit-inner-spin-button,
input.zc-number::-webkit-outer-spin-button,
input.zc-number::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input.zc-input-elevate[type=number],
input.zc-number[type=number] {
  -moz-appearance: textfield;
}










.timeline-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.timeline-circle {
  width: 105px;
  height: 105px;
  /* background-color: var(--zc-bg-blue); */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2rem;
}

.timeline-year {
  width: 80px;
  height: 40px;
  /* background-color: var(--zc-bg-blue); */
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-top: -1px;
  border-radius: 8px;
}

.timeline-connector {
  width: 8px;
  height: 32px;
  /* background-color: var(--zc-bg-blue); */
  margin-top: -1px;
}

/* Nuevo estilo para el círculo pequeño */
.timeline-dot {
  width: 22px;
  height: 22px;
  /* background-color: var(--zc-bg-blue); */
  border-radius: 50%;
  margin-top: -1px;
}

/* Estilos responsive */
@media (max-width: 992px) {
  .timeline-item {
    margin-bottom: 2rem;
  }
}