


       /* Contenedor principal: mismo ancho máximo elegante */
    .container-custom {
      padding: 1.5rem 1.8rem;
      border-top: 1px solid red;
    }

    /* --- Estilo base tipografía: fiel a la imagen 2 (encabezados con #, listas limpias) --- */
    .nav-section {
      margin-bottom: 0;
    }

    .section-heading {
      
      font-weight: 600;
      letter-spacing: -0.3px;
      color: #1e1e2a;
      margin: 0 0 1rem 0;
      padding-bottom: 0.25rem;
      border-bottom: 2px solid #eae6e1;
      display: inline-block;
      width: 100%;
    }

    /* Listas internas: estilo limpio, sin viñetas */
    .section-list {
      list-style: none;
      padding-left: 0;
      margin: 0;
    }

    .section-list li {
      margin-bottom: 0.6rem;
    }

    .section-list a {
      text-decoration: none;
      color: #3c3c44;
      
      font-weight: 450;
      transition: color 0.2s ease, padding-left 0.2s;
      display: inline-block;
    }

    .section-list a:hover {
      color: #000000;
      padding-left: 4px;
    }

    /* --- Estilo del botón collapsible (solo móvil, sin JS, reutilización) --- */
    /* Botón base: oculto en desktop, visible solo cuando colapsamos */
    .collapsible-toggle {
      display: none;
      background: none;
      border: none;
      width: 100%;
      text-align: left;
      padding: 0.8rem 0;
      
      font-weight: 600;
      color: #1e1e2a;
      border-bottom: 1px solid #e2ded9;
      margin-bottom: 0.5rem;
      position: relative;
      cursor: pointer;
      font-family: inherit;
    }

    /* icono + / - usando pseudoclases con Bootstrap Icons (reutilización y automatización) */
    .collapsible-toggle::after {
      content: "\F4FE";   /* icono bi-plus-lg */
      font-family: 'bootstrap-icons';
      
      float: right;
      font-weight: normal;
      transition: transform 0.2s;
      line-height: 1.2;
    }

    /* Cuando el colapsible está abierto (usando el estado 'show' de Bootstrap) cambiamos el contenido a '-' */
    /* Automatización: no repetimos clases, aprovechamos hermano adyacente + target */
    .collapse-target.show + .collapsible-toggle::after,
    .collapsible-toggle[aria-expanded="true"]::after {
      content: "\0336";   /* bi-dash-lg */
      float: left;
    }

    /* El contenido collapsible por defecto oculto (cerrado) */
    .collapse-target {
      transition: all 0.25s ease-out;
    }

    /* REUTILIZACIÓN: estandarización completa: cada bloque tiene la misma estructura sin repetir estilos */
    /* Los bloques en desktop siempre visibles, sin collapsible */
    /* usamos media query para breakpoint 768px: transformar comportamiento */
    @media (min-width: 769px) {
      /* Desktop: los toggles NUNCA se ven, el contenido siempre visible */
      .collapsible-toggle {
        display: none !important;
      }

      .collapse-target {
        display: block !important;
        visibility: visible !important;
        height: auto !important;
        opacity: 1 !important;
        /* anulamos cualquier restricción de collapse de Bootstrap */
      }

      /* Reseteamos cualquier estilo de 'collapse' que pudiera ocultar contenido */
      .row.desktop-grid .collapse-target {
        display: block !important;
      }
      
      /* Aseguramos que las columnas se distribuyan fiel a imagen 2 (grid automática) */
      .custom-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 1.8rem;
      }
    }

    /* MÓVIL Y TABLETS (≤768px) --- activamos collapsible individual */
    @media (max-width: 768px) {
      .container-custom {
        padding: 1.2rem;
      }

      /* reemplazamos el grid por columnas apiladas */
      .row.desktop-grid {E
        display: flex;
        flex-direction: column;
        gap: 0.45rem;
      }

      /* cada bloque ocupa 100% */
      .custom-grid {
        display: flex;
        flex-direction: column;
        gap: 0;
      }

      /* mostramos los botones toggle */
      .collapsible-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 0.2rem;
        cursor: pointer;
        background: transparent;
        border: none;
        outline: none;
        width: 100%;
      }

      /* ocultamos contenido por defecto (cerrado) */
      .collapse-target {
        display: none;
      }

      /* cuando el target está activo (show) gracias a la clase .show que añade Bootstrap tras el click */
      .collapse-target.show {
        display: block;
        padding-bottom: 0.8rem;
      }

      /* reestilizamos encabezado desktop se oculta en móvil? no, se mantiene estructura visual, 
         pero el título también dentro del botón (accesibilidad) y dentro del área collapse? 
         Para ser fiel a la segunda imagen de referencia, dentro del collapsible se deben ver los títulos y la lista. 
         Decidimos: en móvil, cada bloque tendrá su botón (con el título + #) y al abrir se muestran los enlaces.
         Así replicamos el diseño de imagen 1 (menú) + el contenido organizado. 
      */
      .section-heading.desktop-title {
        display: none;   /* ocultamos el título estático en desktop, usamos el del botón */
      }
      
      .collapsible-toggle .heading-text {
        font-weight: 600;
        
        letter-spacing: -0.2px;
        color: #1e1e2a;
      }
      
      /* El contenido interno mantiene el aspecto original */
      .block-inner {
        margin-top: 0.5rem;
      }
      
      .section-list {
        margin-bottom: 0.8rem;
      }
    }

    /* Para pantallas mayores de 768, aseguramos que se vea la cuadrícula exacta como imagen 2 */
    @media (min-width: 769px) {
      .mobile-title-only {
        display: none;
      }
      .desktop-title {
        display: block;
      }
      .desktop-grid {
        display: flex;
        flex-wrap: wrap;
      }
      .custom-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 2rem;
        width: 100%;
      }
      .nav-section {
        break-inside: avoid;
      }
      .section-heading {
        
        margin-bottom: 1.25rem;
        border-bottom: 2px solid #eae2db;
        display: inline-block;
        width: auto;
        padding-right: 2rem;
      }
      .section-list li a {
              }
    }

    /* adicional: toques sutiles para hover */
    .nav-section .section-list a {
      position: relative;
    }
    /* reutilización máxima: bordes y espaciado */
    hr {
      margin: 2rem 0 0.5rem;
      opacity: 0.3;
    }

/* ajuste extra para evitar duplicación visual en desktop: ocultamos el contenido duplicado que podría mostrarse dos veces.
     Pero hemos separado: En desktop se ve .desktop-only-content, en móvil se ve el collapsible.
     Para que NO haya duplicación visual, en desktop ocultamos .collapse-target y mostramos .desktop-only-content.
     En móvil ocultamos .desktop-only-content y mostramos .collapse-target cuando se abre.
     Esto elimina cualquier repetición indeseada */
  @media (min-width: 769px) {
    .collapse-target {
      display: none !important;
    }
    .desktop-only-content {
      display: block !important;
    }
    .collapsible-toggle {
      display: none !important;
    }
    /* garantizar que la cuadrícula se vea perfecta */
    .desktop-only-content .section-list {
      margin-bottom: 1rem;
    }
    .nav-section {
      width: 100%;
    }
  }
  
  @media (max-width: 768px) {
    .desktop-only-content {
      display: none !important;
    }
    .collapse-target {
      display: none;  /* oculto por defecto */
    }
    .collapse-target.show {
      display: block;
    }
    /* mejora del espaciado para móvil */
    .section-list li a {
          padding: 0.2rem 0;
    }
    .collapsible-toggle {
      border-bottom: 1px solid #ece6e0;
      margin: 0;
      padding: 0.4rem 0;
    }
    .collapsible-toggle:focus {
      outline: none;
    }
    .custom-grid {
      gap: 0.1rem;
    }
  }
  
  /* Transición suave para el contenido */
  .collapse-target {
    transition: all 0.25s ease-in-out;
  }
  
  /* Reutilización extrema: un único estilo para todos los bloques */
  .block-inner, .desktop-only-content {
    margin-top: 0.25rem;
  }
  .section-heading.desktop-title {
    font-weight: 620;
  }
  body {
    background: #f5f3ef;
  }
  .container-custom {
    background: white;
    border-radius: 0px;
  }

  /************************/
   #bloque-1{
      border: 2px solid red;
    }

    #bloque-2{
      border: 2px solid blue;
    }
  /************************/







  /******* Responsividad *********/

    /* Large devices max-width (desktops, 992px and up) */
    @media (max-width: 992px) {  
      } 

    /* Extra small devices (portrait phones, less than 576px) */ 
    @media (min-width:250px) and (max-width: 575.98px) {
      }

    /* Small devices (landscape phones, 576px and up) */
    @media (min-width: 576px) and (max-width: 767.98px) {
      } 

  /* Large devices (desktops, 992px and up) */
    @media (min-width: 768px) and (max-width: 991.98px) {
         }  

  /* Large devices (desktops, 992px and up) */
    @media (min-width: 992px) and (max-width: 1199.98px) {
          }

 /* Extra large devices (large desktops, 1200px and up) */
    @media (min-width: 1200px) and (max-width: 1399.98px) {   
      }

    /* XXL devices (larger desktops, 1400px and up) */
    @media (min-width: 1400px) {  
      }