:root {
    --bs-primary: rgb(230, 70, 38);
    --bs-primary-rgb: 230, 70, 38;
    --bs-btn-color: #fff;
    --bs-focus-ring-color: rgba(230, 70, 38, 0.25);
    --bs-link-color: var(--bs-primary);
    --bs-link-hover-color: rgb(200, 50, 20);
    --bs-link-color-rgb: var(--bs-primary-rgb);
    --bs-primary-bg-subtle: rgba(230, 70, 38, 0.1);
    --bs-primary-border-subtle: rgba(230, 70, 38, 0.175);
}
/* Sobrescritura de BORDES */
.border-primary,
.border-2, /* Para bordes de grosor 2 */
.border-top, .border-bottom, .border-start, .border-end {
    border-color: var(--bs-primary) !important;
}

/* Sobrescritura de TEXTOS */
.text-primary,
.link-primary { /* La clase .link-primary también puede dar problemas */
    color: var(--bs-primary) !important;
}

/* Sobrescritura de FONDOS (si alguno sigue azul) */
.bg-primary {
    background-color: var(--bs-primary) !important;
}

/* Sobrescritura para el FOCO/ANILLO azul que a veces se resiste */
:focus {
    outline-color: rgba(230, 70, 38, 0.5) !important;
}


/* Initial transparent state of the navbar */
.navbar-transparent {
    background-color: transparent !important;
    transition: background-color 0.3s ease-in-out; /* Smooth transition for background */
}
.form-control {
    background-color: var(--bs-dark) !important; 
}
   ::placeholder {
  color: #ffffff !important;  /* blanco */
  opacity: 1; /* asegura que no esté transparente */
}
.nav-link:hover {
 
  color: rgb(253, 86, 49) !important; /* Asegura contraste si el texto es oscuro */
}

/* Solid state of the navbar when scrolled */
.navbar-scrolled {
    background-color: var(--bs-dark) !important; /* Use Bootstrap's dark color or a specific color like #212529 */
    /* Or if you want a specific non-dark color, e.g.: background-color: #2c3e50 !important; */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; /* Optional: add a subtle shadow */
}
        /* Direct override for primary buttons */
    .btn-primary {
    background-color: rgb(253, 86, 49) !important;
    border-color: rgb(253, 86, 49) !important;
    color: #fff !important;
}

.btn-primary:hover {
    background-color: rgb(230, 70, 38) !important; /* un poco más oscuro */
    border-color: rgb(230, 70, 38) !important;
    color: #fff !important; /* mantener blanco */
}

.btn-outline-light {
  color: #fff !important;
  border-color: #fff !important;
  background-color: transparent !important;
}

/* Hover: fondo un poco más oscuro, texto sigue blanco */
.btn-outline-light:hover {
  background-color: rgba(255, 255, 255, 0.1) !important; /* apenas más oscuro */
 
  color: #fff !important;
}
.btn-outline-nb {
   color: #fff !important;
  border-color: #fff !important;
  background-color: transparent !important;
}

/* Hover: fondo un poco más oscuro, texto sigue blanco */
.btn-outline-bn:hover {
  background-color: rgba(255, 255, 255, 0.1) !important; /* apenas más oscuro */
 
  color: #fff !important;
}

        /* Google Fonts */
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');

        body {
            font-family: 'Noto Sans', sans-serif;
        }

        h1, h2, h3, h4, h5, h6 {
            font-family: 'Noto Sans', sans-serif;
            font-weight: 700;
            color:#ffffff;
        }

        p, span, div, a, li, input, button {
            font-family: 'Noto Sans', sans-serif;
            font-weight: 400;
        }

        .mt-navbar {
            margin-top: 150px; /* Ajustado para evitar solapamiento con navbar fijo */
        }

        @media (max-width: 991.98px) {
            .mt-navbar {
                margin-top: 120px; /* Valor menor en móviles donde el navbar puede ser más pequeño */
            }
        }
        /* Your existing link color override - careful if it clashes with new primary */
        a {
            text-decoration: none !important;
            color: white !important;
        }

        /* Ensure link hover color matches the new primary color */
        a:hover {
            color: rgb(253, 86, 49) !important; /* Use the new primary variable */
        }

        /* Card custom styling for clearer background */
        .card-custom-light {
            background-color: #191919 !important;
            border: 1px solid rgba(255, 255, 255, 0.2) !important; /* A light, subtle border */
           
        }

        .card-custom-light .card-title,
        .card-custom-light .card-text {
            color: #fff !important; /* Ensure text remains white for contrast with transparent background */
        }

       
       

        /* CUSTOM CAROUSEL STYLES FOR EXTERNAL ARROWS */
        /* Make space for the arrows on the sides of the carousel inner content */
        #whyChooseCarousel .carousel-inner {
            padding-left: 40px; /* Space for left arrow */
            padding-right: 40px; /* Space for right arrow */
        }

        /* Position the actual arrow buttons over the padding */
        #whyChooseCarousel .carousel-control-prev,
        #whyChooseCarousel .carousel-control-next {
            width: 40px; /* Match padding width */
        }

        /* Hide indicators on smaller screens if desired */
        @media (max-width: 767.98px) {
            #whyChooseCarousel .carousel-indicators {
                display: none;
            }
        }

        /* Adjust padding for arrows on smaller screens if they become too wide */
        @media (max-width: 575.98px) {
            #whyChooseCarousel .carousel-inner {
                padding-left: 20px; /* Less space on very small screens */
                padding-right: 20px;
            }
            #whyChooseCarousel .carousel-control-prev,
            #whyChooseCarousel .carousel-control-next {
                width: 20px; /* Smaller width for controls */
            }
        }
        /* Custom style for black background and white text accordion */
.accordion-dark-custom .accordion-item {
    background-color: rgb(33, 37, 41) !important; /* Solid black background for items */
    
    margin-bottom: 10px; /* Add some space between items */
    border-radius: var(--bs-border-radius); /* Use Bootstrap's default border-radius */
}

.accordion-dark-custom .accordion-button {
    background-color: rgb(33, 37, 41) !important; /* Solid black background for buttons */
    color: #fff !important; /* White text color for buttons */
    font-weight: bold;
    border-radius: var(--bs-border-radius);
    padding: 1rem 1.25rem; /* Default Bootstrap padding for buttons */
}

.accordion-dark-custom .accordion-button:not(.collapsed) {
    background-color: #222 !important; /* Slightly lighter black on active */
    color: #fff !important;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.1); /* Subtle shadow on active */
}

.accordion-dark-custom .accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(253, 86, 49, 0.5) !important; /* Primary color focus ring */
}

.accordion-dark-custom .accordion-body {
    background-color: rgb(33, 37, 41) !important; /* Solid black background for body */
    color: #fff !important; /* White text color for body */
    opacity: 0.9; /* Slightly less transparent white text */
    
    padding: 1rem 1.25rem; /* Default Bootstrap padding for body */
}

/* Adjust arrow color for dark accordion */
.accordion-dark-custom .accordion-button::after {
    filter: invert(1) grayscale(100%) brightness(200%); /* Makes the arrow white */
}
/* Custom styling for Reviews Section */
.card-review-custom {
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle light border for cards */
    background-color: #1a1a1a !important; /* Slightly lighter black than full #000 for depth */
}

.card-review-custom .blockquote {
    position: relative;
    padding-top: 2rem; /* Space for the large quote icon */
}

.card-review-custom .blockquote p {
    color: #fff !important; /* Ensure white text for the review content */
}

.card-review-custom .blockquote::before {
    content: "\201C"; /* Left double quotation mark */
    font-family: serif; /* Use a serif font for a classic look */
    font-size: 8em; /* Large size for the quote */
    color: rgba(255, 255, 255, 0.2); /* Semi-transparent white */
    position: absolute;
    top: -1rem;
    left: 0.5rem;
    z-index: 0;
    line-height: 1; /* Adjust line height to prevent too much space */
}


   .icon-circle {
      background-color: #212529; /* bg-dark */
      transition: background-color 0.3s ease;
      width: 4.5rem;
      height: 4.5rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
    }

   .icon-circle img {
  transition: filter 0.3s ease;
}

.icon-circle:hover img {
    filter: invert(100%);
  
}
.icon-box-media:hover img {
    filter: invert(100%);
  
}
.card-img-hover .bg-size-cover {
  min-height: 250px; /* o usa height: 100%; si el contenedor padre tiene altura */
  background-size: cover;
  background-position: center;
  border-radius: 0.5rem;
}
.accordion-button::after {
  filter: brightness(0) invert(1); /* convierte la flecha a blanco */
}
.img-partners-container {
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.img-partners-container::-webkit-scrollbar {
  display: none;
}
.partner-img {
  max-height: 80px;
  transition: filter 0.3s ease;
  filter: grayscale(100%);
}
.partner-img:hover {
  filter: grayscale(0%) brightness(1.1);
}
.partner-img {
  max-height: 80px;
  transition: transform 0.3s ease, filter 0.3s ease;
  filter: grayscale(100%);
  background: transparent; /* asegura transparencia */
}
.partner-img:hover {
  filter: grayscale(0%) brightness(1.1);
  transform: scale(1.05);
}
.fs-xs {
  font-size: 0.70rem;
}

  .accordion-button {
    color: white;
    background-color: #212529;
  }
  .accordion-button:not(.collapsed) {
    background-color: #343a40;
    color: white;
  }
  .accordion-button::after {
    filter: invert(1);
  }
  /* Reduce padding lateral en móviles */
@media (max-width: 576px) {
  footer .container,
  footer .container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
  }
 footer a {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: 1.0rem;
    white-space: nowrap;
  }

  footer i {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.875rem;
  }
  footer .nav-link {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: 1.5rem;
    white-space: nowrap;
  }

  footer .btn-icon {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.875rem;
  }
}
@media (max-width: 768px) {
  footer .container,
  footer .container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  footer a {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: 1rem;
    white-space: nowrap;
  }

  footer i {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.875rem;
  }
}

.bottom-navbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.bottom-navbar .content {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  justify-content: space-between;
}
.float-start {
  max-width: 40%;
}
@media (max-width: 768px) {
  .float-start {
    max-width: 100%;
    float: none;
    margin-bottom: 1rem;
  }
}
.text-8 {
  font-size: 2.5rem;
}

@media (min-width: 992px) {
  .text-8 {
    font-size: 3.5rem;
  }
}
@media only screen 
  and (device-width: 375px) 
  and (device-height: 812px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {
    
  /* Estilos para iPhone XS en vertical */
  body {
    font-size: 16px;
    padding: 1rem;
  }

  footer {
    font-size: 14px;
    padding: 1rem;
  }

  .bottom-navbar {
    font-size: 15px;
  }
   footer a {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: 1rem;
    white-space: nowrap;
  }

  footer i {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.875rem;
  }
}
.dropdown-menu-dark .dropdown-item:active,
.dropdown-menu-dark .dropdown-item:focus {
  background-color: transparent !important;
  color: #fff !important; /* o el color que estés usando */
}
@font-face {
  font-family: 'bootstrap-icons';
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url('/fonts/bootstrap-icons.woff2') format('woff2'),
       url('/fonts/bootstrap-icons.woff') format('woff');
}

blockquote .bi-quote {
 color: rgb(255, 102, 51);
 font-size: 2rem; /* Ajusta el tamaño del icono */
}
.text-primary {
  color: rgb(253, 86, 49); 
}
#address-container:hover * {
            color: var(--color-primary) !important;
           
        }
        /* Estilo para que el párrafo se vea como un bloque interactivo */
        #address-container {
            cursor: pointer;
            max-width: 400px;
            text-align: left;
            }

        /* Opcional: Oscurece ligeramente el fondo del bloque al hacer hover */
        #address-container:hover {
            color: rgb(253, 86, 49);
        }
  html, body {
    overflow-x: hidden !important;
  }
  footer .container {
    max-width: 100%;
  }        

.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* relación 16:9 */
  height: 0;
  overflow: hidden;
  background: #000;
  border-radius: 0 0 1rem 1rem;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Modal más grande en pantallas grandes */
@media (min-width: 1200px) {
  .modal-xl {
    max-width: 90%; /* aprovecha casi todo el ancho */
  }
}

/* Mejora el tamaño en móviles */
@media (max-width: 767.98px) {
  .modal-content {
    border-radius: 0;
  }
  .video-container {
    padding-bottom: 60%; /* un poco más alto en móviles */
  }
}