:root {
    --br-orange: #FF5F00;
    --br-navy: #002D57;
    --br-gray: #595959;
}

.banner-section {
  background-color: #ff4500;
  min-height: 400px;
  display: flex;
  align-items: center;
  border-radius: 30px;
}


/* Versión Mobile */
@media (max-width: 768px) {
  .banner-section {
  background-color: #ff4500;
    min-height: 250px;
    /* puedes ajustar altura en mobile */
    border-radius: 20px;
    /* opcional */
  }

}

@media (max-width: 768px) {
  .banner-section {
    background-position: right center;
  }

}

/* * 1. ESTADO BASE
 * Forzamos el subrayado y definimos el color y la transición.
 */
.btn.btn-link.text-banregio-orange_neon {
  color: #FF4D00; /* Tu color naranja */
  text-decoration: underline; /* ¡Siempre subrayado! */
  transition: color 0.3s ease;
}

/* * 2. ESTADO :HOVER
 * Definimos el nuevo color y nos aseguramos de que MANTENGA el subrayado.
 */
.btn.btn-link.text-banregio-orange_neon:hover {
  color: #CC3E00; /* Tu color naranja más oscuro para el hover */
  text-decoration: underline; /* Mantenemos el subrayado */
}


.nav-pills .nav-link {
  border-radius: 50px;
  /* redondeo tipo pill */
  border: 1px solid #D9D9D9;
  /* borde naranja */
  color: #666666;
  /* texto naranja */
  font-weight: 500;
  padding: 8px 20px;
  transition: all 0.3s ease;
}

/* Estado activo */
.nav-pills .nav-link.active {
  background-color: #FF4D00;
  color: #fff;
  border-color: #ff4500;
}

/* Hover para los inactivos */
.nav-pills .nav-link:not(.active):hover {
  border-color: #FF4D00;     /* el borde cambia a naranja */
  color: #FF4D00;            /* el texto también cambia a naranja */
  background-color: rgba(255, 77, 0, 0.1); /* fondo sutil naranja */
}


h2{
  color:#414141;
}

h3 {
  font-size: 22px;
  color:#414141;
}

  .btn-pill {
    background-color: #F4F5EB; /* color de fondo */
    color: #FF4D00;              /* color del texto */
    padding: 8px 24px;
    border: none;
    border-radius: 50px;      /* efecto pill */
    font-weight: 500;
    cursor: pointer;
    text-decoration: none; 
    transition: background 0.3s ease;
  }

  .btn-pill:hover {
    background-color: #FF4D00; /* hover más oscuro */
    border-color: #F4F5EB;
    border: #F4F5EB  solid 1px;
  }

/* Hover */
a.btn-pill:hover {
  background-color: #FF4D00;    /* cambia a naranja */
  color: #F4F5EB;                  /* texto blanco */
  border: 1px solid #F4F5EB;
}

/* --- Estilos para Navegación Móvil Optimizada --- */
@media (max-width: 768px) {
  .nav-pills {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
    justify-content: flex-start !important;
    scrollbar-width: none; /* Oculta scroll en Firefox */
  }
  .nav-pills::-webkit-scrollbar {
    display: none; /* Oculta scroll en Chrome/Safari */
  }
  .nav-item {
    white-space: nowrap; /* Evita que el texto se rompa en dos líneas */
  }
  .accordion-button {
    padding: 1rem; /* Más compacto en móvil */
    font-size: 0.95rem;
  }
}


/* Overlay para mejorar la legibilidad del texto sobre la imagen */
.banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  /* Asegura que esté debajo del contenido */
}

/* Asegura que el contenido esté encima del overlay */
.banner-content {
  position: relative;
  z-index: 1;
}

.banner-dudas {
  background-color: #FF4D00;
  border-radius: 24px;
}

.social-icon {
  width: 20px;
}

@media (min-width: 768px) {
  .social-icon {
    width: 40px;
  }
}


.accordion-item {
  border-color: transparent;
}

.accordion-button {
  background-color: #707070;
  color: #414141;
  border-bottom: none !important;
  box-shadow: none !important;
  /* Por si Bootstrap añade sombra también */
}

.accordion-button:not(.collapsed) {
  background-color: transparent;
  color: #414141;
}

.accordion-button::after {
  content: "";
  display: inline-block;
  width: 32px;
  height: 32px;
  border: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
  transition: transform 0.3s ease;
  margin-left: auto;
}

/* Cuando el acordeón está abierto, gira la flecha hacia arriba */
.accordion-button:not(.collapsed)::after {
  transform: rotate(180deg);
}

  .accordion-body {
    word-wrap: break-word;     /* Para navegadores viejos */
    overflow-wrap: break-word; /* Standard */
    word-break: break-word;    /* Como fallback */
  }

  /* Opcional: para que las URLs se corten correctamente */
  .accordion-body a {
    white-space: normal;
    word-break: break-all;
  }

.accordion-body {
  background-color: transparent;
  /* Color de fondo del contenido */
  color: #707070;
  /* Color del texto del contenido */
}

/* Puedes añadir más estilos para elementos específicos como p, a, etc. dentro del acordeón */
.accordion-body p {
  color: #333;
  /* Un color específico para los párrafos dentro del body */
}


.no-top-border {
  border-bottom: 2px solid transparent !important;
  /* o el color que prefieras */
}

/* Acordeones Estilo Premium */
.accordion-item {
    border: none !important;
    margin-bottom: 1rem;
    border-radius: 8px !important;
    overflow: hidden;
}

.accordion-button {
    background-color: #fff !important;
    color: var(--br-navy) !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
}

.accordion-button:not(.collapsed) {
    color: var(--br-orange) !important;
    box-shadow: none !important;
}

/* Badges de impuestos (Refrendo, Multas) */
.tax-badge {
    background-color: #F4F5EB;
    color: var(--br-navy);
    font-weight: 600;
    border: 1px solid #dee2e6;
    padding: 6px 15px;
}

/* --- Estilos para Navegación Móvil Optimizada --- */
@media (max-width: 768px) {
  .nav-pills {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
    justify-content: flex-start !important;
    scrollbar-width: none; /* Oculta scroll en Firefox */
  }
  .nav-pills::-webkit-scrollbar {
    display: none; /* Oculta scroll en Chrome/Safari */
  }
  .nav-item {
    white-space: nowrap; /* Evita que el texto se rompa en dos líneas */
  }
  .accordion-button {
    padding: 1rem; /* Más compacto en móvil */
    font-size: 0.95rem;
  }
}

/* Contenedor principal del acordeón */
.accordion-banregio .accordion-item {
    border: none;
    background: transparent;
    margin-bottom: 15px; /* Espacio entre bloques */
}

/* El botón (Encabezado) que se parece al estilo "Cajero" */
.accordion-banregio .accordion-button {
    background-color: #DDE5E3 !important; /* El color de fondo de tu captura */
    border-radius: 25px !important; /* Bordes muy redondeados */
    color: #4A4A4A !important;
    font-weight: 700;
    padding: 20px 25px;
    box-shadow: none !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Ajuste para cuando el acordeón está cerrado */
.accordion-banregio .accordion-button.collapsed {
    border-radius: 25px !important;
}

/* Estilo del Icono Circular a la derecha */
.accordion-banregio .accordion-button::after {
    background-image: none; /* Quitamos la flecha de Bootstrap */
    content: '\F282'; /* Icono chevron de Bootstrap Icons */
    font-family: 'bootstrap-icons';
    background-color: #4A4A4A; /* Círculo oscuro */
    color: white;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* Lo hace círculo */
    transition: transform 0.3s ease;
    font-size: 14px;
}

/* Rotación del icono cuando se abre */
.accordion-banregio .accordion-button:not(.collapsed)::after {
    transform: rotate(180deg);
}