/* =========================
     Variáveis (ajuste à vontade)
     ========================= */
   :root {
       --seta1: "➤";
       --seta2: ▷;
       --seta3: ➣;
       --raio: 12px;

       --largura-a: 2rem;
       /* largura total da aba A */

       --peek: 2.2rem;
       /* quanto do A fica visível quando recolhido */
       /* --largura-b: min(18vw, 22vw); */

       --largura-b: 16vw;
       /* largura do painel B */

       --altura-max: 50vh;
       /* requisito: max-height em ambos */

       --fonte-b: 0.8rem;
       /* requisito: tipografia menor em B */

       --tempo: 600ms;
       --curva: cubic-bezier(.22, .61, .36, 1);

       /* --laranja-1: #fc601d; */
       /* --laranja-2: #fffcf5; */
       /* --texto-claro: white; */
       /* --texto-escuro: #a52a2a; */

       /* --sombra: -5px 5px 15px rgba(35, 35, 35, 0.8); */
   }

   /* =========================
     Container fixo à direita, centralizado verticalmente
     ========================= */
   .sumario-cortina {
       position: fixed;
       top: 40%;
       right: 0;
       transform: translateY(-50%);
       z-index: auto;

       /* mede o conjunto (A+B) para acomodar o translate */
       width: calc(var(--largura-a) + var(--largura-b));
       max-height: var(--altura-max);
       pointer-events: none;
       /* evita capturar cliques fora do bloco interno */
   }

   /* =========================
     Conjunto (A + B) — uma única entidade
     - aplica gradient, raio e sombra uma única vez
     - começa FORA com translateX(...)
     ========================= */
   .sumario-cortina__wrap {
       width: 100%;
       max-height: var(--altura-max);
       display: flex;
       align-items: stretch;
       pointer-events: auto;

       background-color: rgba(222, 34, 34, 0.8);

       color: whitesmoke;
       border-radius: calc(var(--raio)*4) 0 0 calc(var(--raio)*4);

       box-shadow: 0px 0px 18px 3px rgba(65, 65, 65, 0.5),
           inset 5px 7px 10px rgba(200, 0, 0, 0.9);
       /* box-shadow: -1px 4px 5px 3px rgba(121, 120, 120, 0.5),
           inset 5px 7px 10px rgba(200, 0, 0, 0.9); */

       backdrop-filter: blur(3px);
       -webkit-backdrop-filter: blur(3px);

       overflow: hidden;
       /* garante borda contínua */

       /* Estado recolhido:
       Desloca para a direita a soma de B + (A - peek),
       deixando só o “peek” visível encostado na margem. */
       transform: translateX(calc(var(--largura-b) + var(--largura-a) - var(--peek)));
       transition: transform var(--tempo) var(--curva), filter var(--tempo) var(--curva);
       will-change: transform;
   }

   /* Ao hover/focus do bloco, traga tudo para dentro (efeito: B empurra A) */
   .sumario-cortina__wrap:hover,
   .sumario-cortina__wrap:focus-within {
       transform: translateX(0);
       filter: drop-shadow(-4px 5px 3px 3px rgba(40, 40, 40, 0.7));
   }

   /* =========================
     Retângulo A (aba “Sumário”)
     ========================= */
   .painel-a {
       width: var(--largura-a);
       max-height: var(--altura-max);

       /* sem novo fundo: mantém unidade visual do conjunto */
       background: transparent;
       border: none;

       display: grid;
       place-items: center;
       /* cursor: pointer; */
       -webkit-tap-highlight-color: transparent;
       user-select: none;
   }

   .painel-a__rotulo {
       writing-mode: vertical-lr;
       /* texto em pé: de baixo p/ cima */
       transform: rotate(180deg);
       /* leitura de cima p/ baixo */
       color: whitesmoke;
       /* #fffcf5; */
       letter-spacing: .95rem;
       font-weight: 500;
       font-size: clamp(0.85rem, 1.1vw + .4rem, 1.18rem);
       text-shadow: 0 1px 2px rgba(0, 0, 0, .35);

   }

   /* feedback sutil no A quando o conjunto está aberto */
   .sumario-cortina__wrap:hover .painel-a,
   .sumario-cortina__wrap:focus-within .painel-a {
       filter: brightness(1.06);
   }

   /* =========================
     Retângulo B (conteúdo rolável)
     ========================= */
   .painel-b {
       width: var(--largura-b);
       max-height: var(--altura-max);
       font-family: Roboto, "Helvetica Neue", Arial, sans-serif;

       background: rgb(234, 233, 233);
       background-image: linear-gradient(90deg,
               rgb(201, 166, 166) 0%,
               rgb(241, 230, 230) 18%,
               rgb(255, 255, 255) 45%,
               rgb(241, 230, 230) 73%,
               rgb(201, 166, 166) 100%);

       /* overlay suave para contraste do texto sem “emenda” visual */

       /* background: #fffcf5; */
       /* linear-gradient(rgba(#b5b4b4) 35%, rgba(#fffdfd) 50%, rgba(#b5b4b4)100%); */
       /* #fffcf5; */
       /* color: #a52a2a; */
       border-radius: calc(var(--raio)*2) 0 0 calc(var(--raio)*2);
       opacity: 1;
       overflow-y: auto;
       overflow-x: hidden;
       /* requisito: rolagem */
       scrollbar-gutter: stable;
       padding-right: .5rem;
       margin: .8px;
       font-size: var(--fonte-b);
       /* border-top: 0rem solid #f6eabe79; */
       /* border-bottom: 0rem solid #f6eabe79; */
       border-left: 1px solid rgba(143, 3, 3, 0.2);


       scrollbar-width: thin;
       scrollbar-color: rgba(255, 254, 254, 0.8) transparent;
       /* #fc601d transparent; */



       /* line-height: 1.35; */
       box-shadow: inset 0px 0px 8px rgba(117, 117, 117, 0.5);
   }

   /****** APARÊNCIA DOS ITENS DO SUMÁRIO   ******/
   .sumario a {
       color: rgb(58, 58, 58);
       /* #a52a2a; */
       text-decoration: none;
       border-radius: 5px;
       padding: .25em 1rem;
       display: inline-table;
       hyphens: auto;
       /* transition: background-color 160ms ease, transform 160ms ease; */
   }

   /****** COMPORTAMENTO DOS ITENS DO SUMÁRIO DURANTE O FOCO/HOVER  ******/
   .sumario a:hover,
   .sumario a:focus-visible {
       background: rgba(255, 254, 254, 0.4);
       /* rgba(201, 154, 154, 0.7); */
       box-shadow: inset 2px -1px 1px rgba(164, 151, 151, 0.5);
       color: rgb(122, 8, 8);
       text-shadow: 0px 1px 2px rgb(250, 247, 247);


       /* border-bottom: 2px solid rgba(246, 245, 249, 0.6); */
       /* border-left: 2px solid rgba(230, 185, 171); */

   }

   /***** LINHA HORIZONTAL *****/
   .sumario hr {
       border: 0px;
       border-top: 1px dotted rgba(252, 5, 5, 0.8);
       width: 75%;
   }

   /* .sumario ul li::before {
       content: "";

       display: inline-block;
       margin-left: .5em;

   } */

   /* Ou "➜", "➔", "➤" */
   /* color: red; */
   /* Cor do bullet */
   /* font-weight: bold;
   display: inline-block;
   width: 2em; */
   /* Espaço entre a seta e o texto */
   /* margin-left: -1em; */
   /* Alinha a seta */
   /* } */


   /* =========================
     Acessibilidade e robustez
     ========================= */
   @media (prefers-reduced-motion: reduce) {
       .sumario-cortina__wrap {
           transition: none;
       }
   }

   @media (max-width: 480px) {
       :root {
           --largura-a: 64px;
           --peek: 34px;
           --largura-b: min(75vw, 420px);
       }
   }

   @media (max-height: 520px) {
       :root {
           --altura-max: 62vh;
       }
   }


   /* ============= ALINHAMENTO DE BULLETS ================ */

   .lista-grid {
       list-style-type: none;
       margin-top: 20;
       /* margin-bottom: 10;*/
       padding: 0;

       /* Personalização */
       --indent: .8em;
       /* AFASTAR o bullet para a direita */
       --gap: .5em;
       /* Espaço entre bullet e texto */
       --marker-size: .5rem;
       /* TAMANHO do bullet */

   }

   .lista-grid li {
       display: grid;
       grid-template-columns: 1 1fr;
       /* col 1: marcador | col 2: texto */
       align-items: center;
       /* centraliza verticalmente o marcador */
       column-gap: var(--gap);
       margin: .4rem 0;
       margin-block: .2rem;
       padding-inline-start: var(--indent);
       /* recuo */
   }


   .lista-grid li::before {
       /* content: ""; */
       /* ← seu marcador */
       font-size: var(--marker-size);
       line-height: 1;
       /* evita desalinhamento vertical */

       inline-size: var(--marker-size);
       /* block-size: var(--marker-size); */
       /* border-radius: 50%; */
       background: rgb(216, 4, 100);
   }





   /* Barra de rolagem (webkit/blink) .painel-b::-webkit-scrollbar {
       width: 10px;
   } */

   /* .painel-b::-webkit-scrollbar-track:hover {
       background: red;
       /* rgba(0, 0, 0, .12); 
       border-radius: 10px;
   }

   .painel-b::-webkit-scrollbar-thumb:hover {
       background: green;
       /* rgba(255, 255, 255, .28); 
       border-radius: 10px;
       border: 2px solid transparent;
       background-clip: padding-box;
   } */