/* Tus clases CenturyGothic existentes */
  .CenturyGothic20grisoxford {
    font-family: "Century Gothic", sans-serif;
    font-size: 1.25rem; /* ~20px */
    color: #6c757d; /* Un gris oscuro de ejemplo */
  }

  .CenturyGothic20naranja {
    font-family: "Century Gothic", sans-serif;
    font-size: 1.25rem; /* ~20px */
    color: #fd7e14; /* Un naranja de ejemplo */
  }

  .CenturyGothic16grisoxford {
    font-family: "Century Gothic", sans-serif;
    font-size: 1rem; /* ~16px */
    color: #6c757d; /* Un gris oscuro de ejemplo */
  }

  .CenturyGothic16naranja {
    font-family: "Century Gothic", sans-serif;
    font-size: 1rem; /* ~16px */
    color: #fd7e14; /* Un naranja de ejemplo */
  }

  /* Tonos de naranja específicos */
  :root {
    --orange-tone-1: #f38f01; /* Naranja Vibrante */
    --orange-tone-2: #ff6000; /* Naranja Suave */
    --orange-tone-3: #ff7200; /* Naranja Claro */
    --orange-tone-4: #ff7e00; /* Naranja Muy Claro */
    --white-bg-navbar: #fff; /* Fondo blanco para el navbar responsive */
    --offcanvas-bg: #f8f9fa; /* Color de fondo del offcanvas (gris claro de Bootstrap) */
    --bg-orange: #FFB30F; /* Color de fondo naranja para el menú */
    --bg-green: #92C344; /* Color de fondo verde*/
    --bg-blue: #1655AD; /* Color de fondo azul */
    --bg-yellow: #FFC600; /* Color de fondo amarillo */
    --bg-turquoise: #42B0B7; /* Color de fondo turquesa */
    --bg-purple: #9E83B2; /* Color de fondo púrpura */
  }

  .bg-blue {
    background-color: var(--bg-blue) !important; /* Azul para el banner */
  }
  .bg-green {
    background-color: var(--bg-green) !important; /* Verde para el banner */
  }
  .bg-orange {
    background-color: var(--orange-tone-2) !important; /* Naranja para el banner */
  }
  .bg-yellow {
    background-color: var(--bg-yellow) !important; /* Amarillo para el banner */
  }
  .bg-turquoise {
    background-color: var(--bg-turquoise) !important; /* Turquesa para el banner */
  }
  .bg-purple {
    background-color: var(--bg-purple) !important; /* Púrpura para el banner */
  }


  /* Estilos para el navbar personalizado (desktop) */
  .custom-navbar {
    background-color: transparent; /* Por defecto transparente para desktop */
    padding: 0.5rem 0;
  }

  /* Color del icono del toggler (negro) para móvil */
  .custom-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }

  /* Estilos de los enlaces del menú para desktop (originales) */
  .navbar-dark .navbar-nav .nav-link {
    color: #fff; /* Texto blanco para los enlaces en desktop */
    font-weight: bold;
    padding: 0.5rem 0.8rem;
    transition: background-color 0.3s ease;
  }

  .navbar-dark .navbar-nav .nav-link:hover,
  .navbar-dark .navbar-nav .nav-link:focus {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 5px;
  }

  /* Para pantallas grandes (min-width: 992px) */
  @media (min-width: 992px) {
    .menu-degradado {
      background: none; /* Elimina el background general del UL para aplicar a cada LI */
      overflow: hidden;
      display: flex; /* Asegura que los elementos se distribuyan bien */
      justify-content: center; /* Centra los elementos del menú */
    }

    .navbar-nav .nav-item {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /* Asignación de tonos por posición para el degradado en escritorio */
    .menu-degradado .nav-item:nth-child(1) {
      background-color: var(--orange-tone-1);
    }
    .menu-degradado .nav-item:nth-child(2) {
      background-color: var(--orange-tone-2);
    }
    .menu-degradado .nav-item:nth-child(3) {
      background-color: var(--orange-tone-3);
    }
    .menu-degradado .nav-item:nth-child(4) {
      background-color: var(--orange-tone-4);
    }
    .menu-degradado .nav-item:nth-child(5) {
      background-color: var(--orange-tone-1);
    }
    .menu-degradado .nav-item:nth-child(6) {
      background-color: var(--orange-tone-2);
    }
    .menu-degradado .nav-item:nth-child(7) {
      background-color: var(--orange-tone-3);
    }

    /* Asegurar que el navbar es transparente en desktop */
    .custom-navbar {
      background-color: transparent;
    }

    /* Asegurar que el contenido del navbar se centre */
    .navbar-expand-lg .container-fluid {
        justify-content: center;
    }

    /* Ocultar elementos específicos de móvil en desktop */
    .custom-toggler,
    .navbar-brand.mx-auto.d-lg-none,
    .d-flex.align-items-center.d-lg-none,
    .offcanvas {
      display: none !important;
    }

    /* Para el menú de navegación en desktop, que esté a lo ancho */
    #navbarNav {
        display: flex !important; /* Asegura que el collapse esté visible */
        width: 100%;
        justify-content: center; /* Centra los nav-items */
    }

    /* ESTILO PARA EL FONDO AMARILLO DE ANCHO COMPLETO */
    /* Este div mantiene su color original para desktop */
    .menu-full-width-bg- {
        background-color: var(--bg-orange); /* Usa tu color de escritorio si es diferente al warning */
        /* Aquí puedes definir un color específico para desktop, si bg-warning no es suficiente */
    }
  }

  /* Para pantallas pequeñas (max-width: 991.98px) */
  @media (max-width: 991.98px) {
    /* Navbar blanco para pantallas pequeñas */
    .custom-navbar {
      background-color: var(--white-bg-navbar); /* Fondo blanco */
    }

    /* Configuración del contenedor fluido para móvil */
    .custom-navbar .container-fluid {
        display: flex;
        justify-content: space-between; /* Distribuye espacio entre elementos */
        align-items: center;
    }

    /* Fuerza el orden de los elementos en el navbar móvil */
    .custom-toggler { order: 0; } /* Botón a la izquierda */
    .navbar-brand.mx-auto.d-lg-none {
        order: 1; /* Logo centrado */
        margin-right: auto;
        margin-left: auto;
    }
    .d-flex.align-items-center.d-lg-none { order: 2; } /* Redes sociales a la derecha */

    /* Ocultar elementos de desktop en móvil */
    .navbar-brand.me-auto.d-none.d-lg-block,
    #navbarNav {
      display: none !important; /* Oculta el menú de navegación normal */
    }

    /* Estilos para el Offcanvas (el contenido del menú) */
    .offcanvas {
        background-color: var(--offcanvas-bg); /* Fondo del offcanvas */
    }

    .offcanvas-body .navbar-nav .nav-link {
        color: #333; /* Color de los enlaces en el offcanvas */
        padding: 0.8rem 1rem;
        border-bottom: 1px solid rgba(0,0,0,0.1); /* Separador sutil */
    }

    .offcanvas-body .navbar-nav .nav-item:last-child .nav-link {
        border-bottom: none;
    }

    .offcanvas-body .navbar-nav .nav-link.active {
        color: var(--orange-tone-1); /* Color para el enlace activo en offcanvas */
        font-weight: bold;
    }

    .offcanvas-body .navbar-nav .nav-link:hover {
        background-color: rgba(0,0,0,0.05);
    }
  }

  /* Color del icono del toggler (negro) para móvil */
  .custom-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }

  /* Eliminar el borde negro al hacer clic (foco) del navbar-toggler */
  .custom-toggler:focus {
    outline: none; /* Elimina el borde estándar */
    box-shadow: none; /* Elimina cualquier sombra de foco que Bootstrap pueda añadir */
  }

  .menu-degradado li a {
    color: #FFF;
  }

  /* Estilos de los enlaces del menú para desktop */
  .navbar-nav .nav-link {
    /* ... (Propiedades existentes como color, font-weight, padding, display, width) ... */
    cursor: pointer; /* Fuerza el cursor pointer */
  }

  /* Para pantallas grandes (min-width: 992px) */
  @media (min-width: 992px) {
    /* ... (Estilos existentes) ... */

    /* Asegúrate de que el li completo tenga el cursor pointer en desktop */
    .menu-degradado .nav-item {
      cursor: pointer;
    }

    /* ... (El resto de tus estilos para desktop) ... */
  }

  /* Para pantallas pequeñas (max-width: 991.98px) */
  @media (max-width: 991.98px) {
    /* ... (Estilos existentes) ... */

    /* Estilos para los enlaces dentro del offcanvas */
    .offcanvas-body .navbar-nav .nav-link {
        /* ... (Propiedades existentes como color, padding, border-bottom, display, width) ... */
        cursor: pointer; /* Fuerza el cursor pointer en offcanvas */
    }

    /* Asegúrate de que el li completo tenga el cursor pointer en el offcanvas */
    .offcanvas-body .navbar-nav .nav-item {
      cursor: pointer;
    }

    /* ... (El resto de tus estilos para móvil) ... */
  }