/* --- Colores Basados en la Imagen --- */
:root {

        --dark-bg: #151927; /* Fondo principal oscuro (Navy muy oscuro) */

        --card-bg: #212531; /* Fondo de tarjetas y secciones */

        --text-light: #f8f9fa; /* Texto principal claro */

        --text-muted: #adb5bd; /* Texto secundario grisáceo */

        --accent: #5e72e4; /* Color de acento (Azul/Morado) */

        --input-bg: #2d3345; /* Fondo de inputs/selects */

        --btn-custom: #7868e6; /* Botón principal, ligeramente más morado */

        --text-info-custom: #17a2b8; /* Precio en turquesa para contraste, usado para títulos secundarios */

      }
      /* ==================================== */
/* Sobreescribir estilos del Range Slider */
/* ==================================== */

/* Hace más pequeños los números de rango (Mínimo, Máximo, y los valores From/To) */
.irs-from, .irs-to, .irs-single {
    font-size: 11px; /* Letras de los valores seleccionados (From/To) */
    line-height: 1.2;
    padding: 2px 4px;
    top: 5px !important; /* Ajusta la posición vertical si se superpone */
}

/* Hace más pequeña la etiqueta de los límites (100k y 600k en la barra) */
.irs-min, .irs-max {
    font-size: 10px; /* Letras de los límites Min y Max */
    line-height: 1.2;
}
      
      /* Asegurando que body y navbar usen tus colores */
      body {
        background-color: var(--dark-bg);
        color: var(--text-light);
      }
      .navbar {
        background-color: #0d1016 !important;
      }

      /* Estilos para el título principal en MAIN */
      .main-content h3.fw-bold {
        color: var(--text-light) !important;
        border-bottom: 3px solid var(--accent);
        padding-bottom: 5px;
        display: inline-block;
        margin-bottom: 25px !important;
      }

      /* Estilos para las tarjetas de auto (ajustados a tus clases .card) */
      .card {
        background-color: var(--card-bg);
        border: 1px solid #3d4458;
        color: var(--text-light);
      }
      .card p.text-light-50 {
          color: var(--text-muted) !important;
      }
      .card .text-info {
          color: var(--text-info-custom) !important; /* Precio Desde */
      }
      .card .text-success {
          color: var(--text-light) !important; /* Precio Contado */
          font-weight: 700;
      }
      .card a.btn-outline-info {
          color: var(--accent);
          border-color: var(--accent);
      }
      .card a.btn-outline-info:hover {
          background-color: var(--accent);
          color: var(--text-light);
      }

      /* Sidebar: Hero y Filtros */
      /* Estos estilos son para el hero, que ahora es horizontal */
      .hero-sidebar h1 {
        font-size: 1.8rem; /* Ajuste para el hero horizontal */
      }
      .hero-sidebar p {
        font-size: 0.95rem;
        color: var(--text-muted) !important;
      }
      .filters-box {
        background-color: var(--card-bg);
        border: 1px solid #3d4458;
      }
      .filters-box .form-control,
      .filters-box .form-select {
        background-color: var(--input-bg);
        border: 1px solid #3d4458;
        color: var(--text-light);
      }
      .filters-box .form-label {
        color: var(--text-light);
      }


      /* Estilos para Cotización y Contacto (utility-section) */
      .utility-section {
        background-color: var(--card-bg);
        padding: 25px;
        border-radius: 8px;
        margin-bottom: 30px;
        border: 1px solid #3d4458;
      }
      .utility-section h3 {
        color: var(--text-light) !important;
        border-bottom: 3px solid var(--text-info-custom); /* Turquesa para separar estas secciones */
        padding-bottom: 5px;
        display: inline-block;
      }
      .utility-section .form-control,
      .utility-section .form-select {
        background-color: var(--input-bg);
        border: 1px solid #3d4458;
        color: var(--text-light);
      }
      .btn-submit-custom { /* Botón de Submit y Botón de Filtro en móvil */
        background-color: var(--btn-custom);
        border-color: var(--btn-custom);
        color: var(--text-light);
        font-weight: 600;
        transition: background-color 0.2s ease;
      }
      .btn-submit-custom:hover {
        background-color: #695ac9;
        border-color: #695ac9;
      }
      .contact-info .bi {
        color: var(--accent);
      }
      
      /* Estilos para la Nueva Publicidad (Promo Section) */
      .promo-section {
        margin-top: 25px;
        background-color: #1a1e2a !important; /* Un poco más oscuro que card-bg */
      }
      .promo-section h4 {
        color: var(--accent) !important;
        font-weight: 700;
        margin-bottom: 15px;
      }
      .promo-section .carousel-item img {
        height: auto; 
        object-fit: cover; 
        border-radius: 8px; 
        border: 1px solid var(--accent); /* Borde de acento para destacar */
      }
      .carousel-control-prev-icon,
      .carousel-control-next-icon {
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 4px;
      }

      /* ESTILOS NUEVOS PARA EL CARRUSEL DE MARCAS */
      .brands-carousel {
        margin-bottom: 40px;
      }
      .brands-carousel .carousel-inner {
          padding: 10px 0; /* Espacio vertical para sombras si se añaden */
      }
      .brands-carousel .carousel-item {
          text-align: center;
      }
      .brand-card {
        background-color: var(--card-bg);
        border: 1px solid #3d4458;
        border-radius: 8px;
        padding: 15px;
        margin: 0 5px; /* Espacio entre tarjetas */
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100%;
      }
      .brand-card img {
          width: 80px; /* Tamaño del logo */
          height: 80px; 
          object-fit: contain;
          margin-bottom: 10px;
          filter: grayscale(10%) brightness(120%); /* Efecto visual en oscuro */
      }
      .brand-card h6 {
          color: var(--accent);
          font-weight: 600;
      }
      .brand-card p {
          color: var(--text-muted);
          font-size: 0.8rem;
      }
      /* Estilos para mostrar múltiples tarjetas por slide (RESPONSIVE) */
      .carousel-multiple .carousel-inner .carousel-item > div {
          display: flex;
          gap: 10px;
          justify-content: space-around;
      }
      .carousel-multiple .carousel-inner .carousel-item > div > div {
          flex: 0 0 32%; /* 3 columnas */
      }

      /* Media Queries para carrusel de marcas */
      @media (max-width: 991px) {
          .carousel-multiple .carousel-inner .carousel-item > div > div {
              flex: 0 0 48%; /* 2 columnas en MD */
          }
      }
      @media (max-width: 767px) {
          .carousel-multiple .carousel-inner .carousel-item > div > div {
              flex: 0 0 100%; /* 1 columna en SM */
          }
      }

      /* Footer */
      footer {
        background-color: #0d1016; /* Color de Navbar */
        color: var(--text-muted);
        border-top: 1px solid #3d4458;
      }
      footer a {
        color: var(--accent);
      }
      /* Estilo del botón de WhatsApp flotante */
.whatsapp-btn {
  position: fixed; /* Hace que el botón flote y se mantenga visible */
  bottom: 25px;    /* Distancia desde el borde inferior */
  right: 25px;     /* Distancia desde el borde derecho */
  background-color: #25d366; /* Verde WhatsApp */
  color: white;
  border-radius: 50%; /* Lo hace circular */
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  z-index: 1000; /* Asegura que esté por encima de otros elementos */
  transition: transform 0.3s ease-in-out;
}
.whatsapp-btn:hover {
  transform: scale(1.1); /* Efecto de crecimiento al pasar el ratón */
  color: white; 
}

.pagination-smart {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 24px;
}

.pagination-smart a {
    min-width: 42px;
    height: 42px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: center;

    background: #1f2433;
    color: #cfd3ff;

    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;

    box-shadow: 0 4px 10px rgba(0,0,0,.25);
    transition: all .25s ease;
}




/* --- Paginación Oscura Personalizada --- */