/* ===================================
    Crafto - Logistics 
====================================== */
/* font */
@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
/* variable */
:root {      
    --alt-font: "Urbanist", sans-serif;
    --primary-font: "Montserrat", sans-serif;
    --base-color: #c63637;
    --dark-gray: #261f21;
    --medium-gray: #707070;
    --aluminium-grey: rgba(255, 255, 255, 0.4);
}
/* reset */
body{
    font-size: 18px;
    line-height: 30px;
}
a:hover{
    color: var(--dark-gray);
}

.linea-circle {
width: 45px;
height: 45px;
border-radius: 50%;
background: #e9ecef;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
cursor: pointer;
transition: 0.3s;
    font-size:14px;
}

.linea-circle:hover {
background: #ced4da;
}

.lineas-wrapper {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 15px;
}

.recorrido-text {
padding: 20px 40px;
background: #f8f9fa;
margin-bottom: 10px;
  font-size: 12px;
}

#corredores button {
  transition: transform 0.4s ease, background-color 0.2s ease;
}

#corredores button.active {
  transform: scale(1.2); /* lo agranda un 10% */
}
/* Línea activa */
.linea-circle.active {
  background-color: #198754;
  color: white;
  border: 2px solid #145c39;
}        


.icon-hover {
  display: inline-block;
  border-radius: 8px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.icon-hover:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Efecto de cambio de color del ícono al hacer hover */
.icon-hover img {
  transition: filter 0.3s ease;
}

.icon-hover:hover img {
  filter: brightness(0) saturate(100%) invert(37%) sepia(85%) saturate(443%) hue-rotate(84deg) brightness(94%) contrast(91%);
  /* Este filtro tiñe el PNG a un verde (puedes ajustar los valores para otro color) */
}
.icon-hover2 {
  display: inline-block;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.icon-hover2:hover {
  transform: scale(1.05);
}

/* Efecto de cambio de color del ícono al hacer hover */
.icon-hover2 img {
  transition: filter 0.3s ease;
}

.icon-hover2:hover img {
  filter: brightness(0) saturate(100%) invert(37%) sepia(85%) saturate(443%) hue-rotate(84deg) brightness(94%) contrast(91%);
  /* Este filtro tiñe el PNG a un verde (puedes ajustar los valores para otro color) */
}

/* header */
.navbar .navbar-nav .nav-link {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
}
.navbar .navbar-nav .dropdown.open .dropdown-menu {
    background-color: var(--white);
}
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a {
    font-size: 12px;
    font-weight: 500;
    color: var(--dark);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.circle-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 45px; /* Ajustá según el tamaño que quieras */
  height: 45px;
  border-radius: 50%; /* Azul, podés cambiarlo */
  color: white;
  font-weight: bold;
  transition: all 0.3s ease;
  cursor: default;
  position: relative;
  z-index: 1;
    font-size: 14px;
}

/* Colores personalizados con números */
.circle-number-b {
  background-color: #007bff; /* Azul */
}

.circle-number-r {
  background-color: #ff4136; /* Rojo */
}

.circle-number-y {
  background-color: #ffcc00; 
}

.circle-number-g {
  background-color: #019355; 
}


.circle-number:hover {
  transform: scale(1.1);
  box-shadow: 0 0 10px rgba(0, 123, 255, 0.6);
}

header .navbar-brand img {
    max-height: 35px;
}
.header-top-bar div>a {
    color: var(--light-gray);
}
.header-top-bar div>a:hover {
    color: var(--white);
}
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a i {
    font-size: 30px;
}
.navbar .navbar-nav .dropdown .dropdown-menu a i {
    width: 35px;
}
header .btn.btn-box-shadow.btn-base-color,
.btn.btn-base-color {
    color: var(--white);
}
header .btn.btn-box-shadow.btn-base-color:hover,
.btn.btn-box-shadow.btn-base-color:hover {
    color: var(--white);
}
header .btn.btn-small {
    font-size: 15px; 
    padding: 10px 18px;
}
/* btn */
.btn.btn-hover-animation-switch.btn-link {
    padding-top: 0;
}
.btn { 
    text-transform: inherit;
    font-weight: 600;
    letter-spacing: 0;
}
.btn.btn-extra-large {
    font-size: 18px;
    padding: 16px 32px;
}
.btn.btn-large {
    font-size: 17px;
    padding: 14px 28px;
}
.btn.btn-medium {
    font-size: 16px; 
    padding: 12px 24px;
}
.btn.btn-small {
    font-size: 15px;
}
.btn.btn-very-small {
    font-size: 14px; 
    padding: 9px 20px;
}

button.disabled2:hover {
  background-color: var(--base-color)!important;
    color:#fff!important;
    cursor: default!important;
}


button.disabled3:hover {
  background-color: var(--green)!important;
    color:#fff!important;
    cursor: default!important;
}


button.disabled4:hover {
  background-color: var(--yellow)!important;
    color:#fff!important;
    cursor: default!important;
}


/* counter style */
.counter-style-04 .vertical-counter:after {
    color: var(--base-color);
}
.review-star-icon i {
    color: var(--base-color);
}

/* footer style */
footer ul li {
    margin-bottom: 0px;
}
footer p {
    line-height: 26px;
}
/* page title */
.page-title-double-large h1 {
    font-size: 4.375rem;
    line-height: 4.688rem;
}
.page-title-double-large h2 {
    font-size: 16px;
    line-height: 28px;
}

/* top bottom left right class */
.right-12 {
    right: 12%;
}

.bg-jungle-green {
    background-color: #2ebb79;
}
/* Outside box */
.outside-box-top-205px {
    margin-top: -205px;
}
/* Transparent background color */
.bg-gradient-gray-light-dark-transparent {
    background-image: linear-gradient(to top, #f7f7f7 0%, transparent 100%);
}
@media (max-width: 1399px) {
    .xl-h-180px {
        height: 180px;
    }
    .xl-w-180px {
        width: 180px;
    }
}
@media (max-width: 1199px) {
    .outside-box-top-200px {
        margin-top: -150px;
    }
}
@media (max-width: 991px) {
    .outside-box-top-200px {
        margin-top: 0;
    }
    .navbar .navbar-nav .dropdown.open .dropdown-menu {
        padding-bottom: 15px;
    }
}

.dropdown-toggle::after{
    display: none!important;
    
  }  

.recorrido {
  position: relative;
  border-left: 2px solid #ccc;
  margin-left: 30px;
  padding-left: 30px;
}

.ciudad{
 margin-left: -10px;
    font-size: 14px;
}

.punto {
  position: relative;
  margin: 10px 0;
}

.punto::before {
  content: '';
  position: absolute;
  left: -40px;
  top: 8px;
  width: 16px;
  height: 16px;
  background: #e63946;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
}

.punto::after {
  content: '';
  position: absolute;
  left: -36px;
  top: 12px;
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
}

.punto:hover::before {
  transform: scale(1.2);
}
.puntov {
  position: relative;
  margin: 10px 0;
}

.puntov::before {
  content: '';
  position: absolute;
  left: -40px;
  top: 8px;
  width: 16px;
  height: 16px;
  background: #019355;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
}

.puntov::after {
  content: '';
  position: absolute;
  left: -36px;
  top: 12px;
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
}

.puntov:hover::before {
  transform: scale(1.2);
}

.punto.sub {
  padding-left: 10px;
}

.punto.sub::before {
  left: -30px;
  top: 11px;
  width: 12px;
  height: 12px;
  background: #e63946;
}

.punto.sub::after {
  left: -26px;
  top: 13px;
  width: 6px;
  height: 6px;
}

.punto.sub::before {
  background: #e63946;
}

/* Línea horizontal desde el eje central al subpunto */
.punto.sub::before {
  box-shadow: none;
}
.punto.sub::after {
  background: white;
}

.punto.sub::before {
  content: '';
  position: absolute;
  left: -30px;
  top: 15px;
  width: 10px;
  height: 2px;
  background: #ccc;
  border-radius: 2px;
}

.punto.sub::after {
  content: '';
  position: absolute;
  left: -20px;
  top: 11px;
  width: 10px;
  height: 10px;
  background: #e63946;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
}

.punto.sub:hover::after {
  transform: scale(1.2);
}

@media (max-width: 576px) {
  .fs-sm-6 { font-size: 0.875rem; }
  .fs-sm-5 { font-size: 1rem; }
  .fs-sm-4 { font-size: 1.25rem; }
}