/*Botoes fixos*/

 .fixed-share-buttons {
     position: fixed;
     top: 50%;
     /* 
    50% da tela + metade da largura do container (450px) 
    - um offset de 20px para que o botão fique parcialmente fora
    */
     left: calc(50% + 513px - 20px);
     transform: translateY(-50%);
     display: flex;
     flex-direction: column;
     gap: 10px;
     z-index: 9999;
 }

 /* Estilos dos botões */
 .fixed-share-buttons .material-symbols-outlined {
     background-color: #333;
     color: #fff;
     border-radius: 50%;
     padding: 10px;
     font-size: 24px;
     cursor: pointer;
     transition: all 0.3s ease;
     text-align: center;
 }

 /* Efeito de hover (opcional) */
 .fixed-share-buttons .material-symbols-outlined:hover {
     background-color: #444;
     /* Escurece levemente no hover */
 }

 /* Ícone de coração preenchido (fica oculto inicialmente) */
 .heart-filled {
     font-variation-settings:
         'FILL' 1;
     color: #ff0000;
     display: none;
 }

 /* Quando o mouse passa sobre o outline, oculta o outline e exibe o preenchido */
 .heart-outline:hover {
     display: none;
 }

 .heart-outline:hover+.heart-filled {
     display: inline;
 }

 /* Configuração padrão para os ícones */
 .material-symbols-outlined {
     font-variation-settings:
         'FILL' 0,
         /* Ícone sem preenchimento (outline) */
         'wght' 400,
         'GRAD' 0,
         'opsz' 24;
     cursor: pointer;
     transition: color 0.3s ease;
 }

 /* Ícone preenchido (Filled) */
 .heart-filled {
     font-variation-settings:
         'FILL' 1;
     /* Ícone preenchido */
     color: #ff0000;
     /* Cor vermelha */
     display: none;
     /* Inicialmente oculto */
 }

 /* Alternar entre os ícones */
 .heart-outline:hover {
     display: none;
 }

 .heart-outline:hover+.heart-filled {
     display: inline;
     
 }

 .text-reader {
     display: flex;
     justify-content: center;
     align-items: center;
     margin-top: 20px;
     gap: 15px;
     background-color: #f3f3f3cc;
     border-radius: 27px;
 }

 .text-reader button {
     background: none;
     border: none;
     cursor: pointer;
     padding: 10px;
     transition: transform 0.2s ease;
     outline: none;
 }

 .text-reader button img {
     width: 25px;
     height: 25px;
 }

 .text-reader button:active {
     transform: scale(0.9);

 }