/* 
        ========================================
        CSS Reset & Globals
        ========================================
        */
 :root {
     /* Palette */
     --color-primary: #1DB954;
     --color-primary-darker: #1AA34A;
     --color-bg-dark: #0A0A0A;
     --color-bg-content: #161616;
     --color-bg-elevated: #242424;
     --color-text-primary: #EFEFEF;
     --color-text-secondary: #9E9E9E;
     --color-text-tertiary: #5E5E5E;
     --color-border: #2D2D2D;
     --color-accent-yellow: #FBBF24;

     --brand-primary: #1DB954;
     --brand-bg-dark: #0D0D0D;
     --brand-bg-content: #161616;
     --brand-text-primary: #EFEFEF;
     --brand-text-secondary: #B3B3B3;
     --font-family-sans: 'Inter', sans-serif;

     --brand-bg-elevated: #282828;
     --brand-border: #282828;

     /* Typography */
     --font-sans: 'Inter', sans-serif;
     --fs-xs: 0.75rem;
     /* 12px */
     --fs-sm: 0.875rem;
     /* 14px */
     --fs-base: 1rem;
     /* 16px */
     --fs-lg: 1.125rem;
     /* 18px */
     --fs-xl: 1.25rem;
     /* 20px */
     --fs-2xl: 1.5rem;
     /* 24px */
     --fs-3xl: 1.875rem;
     /* 30px */
     --fs-4xl: 2.25rem;
     /* 36px */
     --fs-5xl: 3rem;
     --fs-5xl2: 3.75rem;
     /* 48px */

     /* Spacing */
     --spacing-1: 0.25rem;
     --spacing-2: 0.5rem;
     --spacing-2-1: 0.75rem;
     --spacing-2-2: 0.875rem;
     --spacing-3: 0.75rem;
     /* 12px - (NOVA E CORRIGIDA) */
     --spacing-4: 1rem;
     --spacing-6: 1.5rem;
     --spacing-8: 2rem;
     --spacing-10: 2.5rem;
     --spacing-12: 3rem;

     /* Others */
     --border-radius-sm: 0.25rem;
     --border-radius-md: 0.5rem;
     --border-radius-lg: 0.75rem;
     --border-radius-full: 9999px;
     --transition-fast: all 0.2s ease-in-out;
     --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);

     /* Cores do Skeleton */
     --skeleton-bg: #2a2a2a;
     /* Cor base dos placeholders */
     --skeleton-shine: #3a3a3a;
     /* Cor do brilho que passa por cima */
     --skeleton-animation-duration: 1.5s;
 }

 *,
 *::before,
 *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 body {
     background-color: var(--color-bg-dark);
     color: var(--color-text-secondary);
     font-family: var(--font-sans);
     font-size: var(--fs-base);
     line-height: 1.6;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }

 a {
     color: inherit;
     text-decoration: none;
 }

 img,
 picture,
 video,
 canvas,
 svg {
     display: block;
     max-width: 100%;
 }

 input,
 button,
 textarea,
 select {
     font: inherit;
 }

 .container {
     width: 100%;
     max-width: 1280px;
     margin-left: auto;
     margin-right: auto;
     padding-left: var(--spacing-6);
     padding-right: var(--spacing-6);
 }

 @media (max-width: 640px) {
     .container {
         padding-left: var(--spacing-4);
         padding-right: var(--spacing-4);
     }
 }

 /* 
        ========================================
        Component Styles
        ========================================
        */

 .main-header {
     position: sticky;
     top: 0;
     z-index: 40;
     background-color: rgba(10, 10, 10, 0.8);
     backdrop-filter: blur(8px);
     box-shadow: var(--shadow-md);
 }

 .main-header__top-bar {
     display: flex;
     align-items: center;
     justify-content: space-between;
     height: 3.8rem;
 }

 .main-header__logo {
     display: flex;
     align-items: center;
     gap: var(--spacing-2);
     font-size: var(--fs-xl);
     font-weight: 800;
     color: var(--color-text-primary);
 }

 .-mx-4 {
     margin-left: -1rem;
     margin-right: -1rem;
 }

 .main-header__logo .ri-search-eye-line {
     color: var(--color-primary);
     font-size: var(--fs-3xl);
 }

 .main-header__actions .btn {
     display: none;
 }

 .main-header__actions .btn--mobile {
     display: block;
     background-color: var(--color-bg-elevated);
     padding: var(--spacing-2) var(--spacing-3);
     border-radius: var(--border-radius-full);
     color: var(--color-text-secondary);
 }

 /* --- Header Menu --- */
 .header-menu-wrapper {
     border-top: 1px solid var(--color-border);
 }

 .header-menu {
     display: flex;
     overflow-x: auto;
     gap: var(--spacing-2);
     padding: var(--spacing-2) var(--spacing-6);
 }

 .header-menu::-webkit-scrollbar {
     height: 0;
 }

 .menu-chip {
     flex-shrink: 0;
     white-space: nowrap;
     /*background-color: var(--color-bg-elevated);*/
     color: var(--color-text-secondary);
     padding: var(--spacing-1) var(--spacing-2-2);
     border-radius: var(--border-radius-full);
     font-size: var(--fs-sm);
     font-weight: 500;
     transition: var(--transition-fast);
     display: inline-flex;
     align-items: center;
     gap: var(--spacing-2);
 }

 .menu-chip:hover {
     background-color: var(--color-primary);
     color: var(--color-bg-dark);
 }

 .menu-chip.active {
     background-color: var(--color-primary);
     color: var(--color-bg-dark);
     font-weight: 600;
 }

 @media (max-width: 1023px) {

     /* Em telas menores, o padding acompanha o container */
     .header-menu {
         padding-left: var(--spacing-6);
         padding-right: var(--spacing-6);
     }

     @media (max-width: 640px) {
         .header-menu {
             padding-left: var(--spacing-4);
             padding-right: var(--spacing-4);
         }

         .search-form__input-placeholder {
             font-size: var(--fs-sm) !important;
             padding: var(--spacing-2) var(--spacing-4) var(--spacing-3) 3.5rem !important;
         }

         .search-modal__input {
             font-size: var(--fs-sm) !important;
             padding-left: unset !important;
             width: 91% !important;
         }

         .search-modal__content {
             gap: var(--spacing-2) !important;
         }
     }
 }

 @media (min-width: 1024px) {

     /* Desktop: Centraliza o menu */
     .header-menu {
         justify-content: center;
         overflow-x: hidden;
     }
 }

 .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: var(--spacing-2) var(--spacing-2-2);
     border-radius: var(--border-radius-full);
     font-weight: 600;
     border: 1px solid transparent;
     cursor: pointer;
     font-size: 0.875rem;
     line-height: 1.25rem;
     transition: var(--transition-fast);
 }

 .btn--primary {
     background-color: var(--color-primary);
     color: var(--color-bg-dark);
 }

 .btn--primary:hover {
     background-color: var(--color-primary-darker);
 }

 .hero-section {
     text-align: center;
     padding: var(--spacing-6) 0;
 }

 .hero-section__icon {
     color: var(--color-primary);
     font-size: var(--fs-5xl2);
     margin-bottom: var(--spacing-2-1);
     display: inline-block;
 }

 .hero-section__title {
     font-size: var(--fs-3xl);
     font-weight: 900;
     color: var(--color-text-primary);
     margin-bottom: var(--spacing-2-1);
     line-height: 2.25rem;
 }

 .hero-section__subtitle {
     max-width: 600px;
     margin: 0 auto var(--spacing-2-1);
     font-size: var(--fs-base);
 }

 .search-form {
     position: relative;
     max-width: 600px;
     margin: 0 auto;
 }

 .search-form__icon {
     position: absolute;
     left: var(--spacing-4);
     top: 50%;
     transform: translateY(-50%);
     color: var(--color-text-tertiary);
     font-size: var(--fs-xl);
 }

 .search-form__input {
     width: 100%;
     background-color: var(--color-bg-content);
     border: 1px solid var(--color-border);
     color: var(--color-text-primary);
     padding: var(--spacing-4) var(--spacing-4) var(--spacing-4) 3.5rem;
     border-radius: var(--border-radius-full);
     font-size: var(--fs-base);
     transition: var(--transition-fast);
 }

 .search-form__input::placeholder {
     color: var(--color-text-tertiary);
 }

 .search-form__input:focus {
     outline: none;
     box-shadow: 0 0 0 2px var(--color-primary);
 }

 .section {
     margin-bottom: var(--spacing-12);
 }

 .section__header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: var(--spacing-2);
 }

 .truncate {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }

 .section__title {
     font-size: var(--fs-xl);
     line-height: 1.75rem;
     font-weight: 700;
     color: var(--color-text-primary);
     display: flex;
     align-items: center;
     gap: var(--spacing-2);
 }

 .section__title i {
     color: var(--color-primary);
 }

 .section__title .ri-fire-fill {
     color: var(--color-accent-yellow);
 }

 .section__view-all {
     font-size: var(--fs-sm);
     font-weight: 500;
     color: var(--color-primary);
     display: none;
 }

 .carousel {
     display: flex;
     overflow-x: auto;
     gap: var(--spacing-4);
     padding-bottom: var(--spacing-4);
     margin: 0 calc(var(--spacing-4) * -1);
     padding-left: var(--spacing-4);
     padding-right: var(--spacing-4);
 }

 .carousel .card {
     width: 9rem;
 }

 .carousel::-webkit-scrollbar {
     height: 0;
 }

 .carousel::-webkit-scrollbar-track {
     background: transparent;
 }

 .carousel::-webkit-scrollbar-thumb {
     background: var(--color-bg-elevated);
     border-radius: var(--border-radius-full);
 }

 .card {
     flex: 0 0 150px;
     background-color: var(--color-bg-content);
     padding: var(--spacing-4);
     border-radius: var(--border-radius-lg);
     transition: var(--transition-fast);
     cursor: pointer;
 }

 .card:hover {
     background-color: var(--color-bg-elevated);
 }

 .card__image {
     width: 100%;
     aspect-ratio: 1 / 1;
     object-fit: cover;
     border-radius: var(--border-radius-md);
     margin-bottom: var(--spacing-2);
 }

 .card__title {
     font-size: var(--fs-sm);
     font-weight: 600;
     color: var(--color-text-primary);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 .card__subtitle {
     font-size: var(--fs-xs);
     color: var(--color-text-tertiary);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 .genre-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: var(--spacing-4);
 }

 .genre-card {
     background-color: var(--color-bg-content);
     padding: var(--spacing-6);
     border-radius: var(--border-radius-lg);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
     transition: var(--transition-fast);
 }

 .genre-card:hover {
     background-color: var(--color-bg-elevated);
     transform: translateY(-4px);
 }

 .genre-card__icon {
     font-size: var(--fs-4xl);
     margin-bottom: var(--spacing-2);
     color: var(--color-primary);
 }

 .genre-card__title {
     font-weight: 600;
     color: var(--color-text-primary);
 }

 .artist-card {
     text-align: center;
 }

 .artist-card__image {
     width: 120px;
     height: 120px;
     border-radius: var(--border-radius-full);
     object-fit: cover;
     margin: 0 auto var(--spacing-2);
     border: 2px solid var(--color-border);
     transition: var(--transition-fast);
 }

 .card:hover .artist-card__image {
     border-color: var(--color-primary);
     transform: scale(1.05);
 }

 .main-footer {
     background-color: var(--color-bg-content);
     border-top: 1px solid var(--color-border);
     text-align: center;
     padding: var(--spacing-8);
     margin-top: var(--spacing-12);
 }

 .main-footer p {
     font-size: var(--fs-xs);
     color: var(--color-text-tertiary);
 }

 /*
========================================
File: search-modal.css
========================================
*/

 .search-modal {
     position: fixed;
     inset: 0;
     z-index: 50;
     background-color: rgba(10, 10, 10, 0.9);
     backdrop-filter: blur(10px);
     padding: var(--spacing-4);
     display: flex;
     flex-direction: column;
     align-items: center;

     /* Animação */
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.3s ease, visibility 0.3s ease;
 }

 .search-modal.open {
     opacity: 1;
     visibility: visible;
 }

 .search-modal__content {
     width: 100%;
     max-width: 700px;
     display: flex;
     flex-direction: column;
     gap: var(--spacing-6);

     /* Animação */
     transform: translateY(-20px);
     transition: transform 0.3s ease;
 }

 .search-modal.open .search-modal__content {
     transform: translateY(0);
 }


 .search-modal__header {
     display: flex;
     align-items: center;
     gap: var(--spacing-4);
     width: 100%;
     justify-content: space-between;
 }

 .search-modal__input {
     flex-grow: 1;
     background-color: var(--color-bg-elevated);
     border: 1px solid var(--color-border);
     color: var(--color-text-primary);
     padding: var(--spacing-1) var(--spacing-4) var(--spacing-1) 3rem;
     border-radius: var(--border-radius-full);
     font-size: var(--fs-lg);
     transition: var(--transition-fast);
     padding-left: 20px;
     padding-right: 20px;
 }

 .search-modal__input::placeholder {
     color: var(--color-text-tertiary);
 }

 .search-modal__input:focus {
     outline: none;
     box-shadow: 0 0 0 2px var(--color-primary);
 }

 .search-modal__close-btn {
     background: none;
     border: none;
     color: var(--color-text-secondary);
     padding: var(--spacing-2);
     cursor: pointer;
     transition: var(--transition-fast);
 }

 .search-modal__close-btn:hover {
     color: var(--color-text-primary);
     transform: rotate(90deg);
 }

 .search-modal__results {
     background-color: var(--color-bg-content);
     border-radius: var(--border-radius-lg);
     padding: var(--spacing-2);
     max-height: 70vh;
     overflow-y: auto;
     border: 1px solid var(--color-border);
 }

 .search-modal__results::-webkit-scrollbar {
     width: 6px;
 }

 .search-modal__results::-webkit-scrollbar-track {
     background: transparent;
 }

 .search-modal__results::-webkit-scrollbar-thumb {
     background: var(--color-bg-elevated);
     border-radius: var(--border-radius-full);
 }

 .search-result__category {
     padding: var(--spacing-2) var(--spacing-4);
     font-size: var(--fs-xs);
     font-weight: 600;
     text-transform: uppercase;
     color: var(--color-text-tertiary);
     border-bottom: 1px solid var(--color-border);
 }

 .search-result__item {
     display: flex;
     align-items: center;
     gap: var(--spacing-4);
     padding: var(--spacing-3) var(--spacing-4);
     border-radius: var(--border-radius-md);
     transition: var(--transition-fast);
 }

 .search-result__item:hover {
     background-color: var(--color-bg-elevated);
 }

 .search-result__item-image {
     width: 48px;
     height: 48px;
     object-fit: cover;
     border-radius: var(--border-radius-sm);
     flex-shrink: 0;
 }

 .search-result__item-image--artist {
     border-radius: var(--border-radius-full);
 }

 .search-result__item-info {
     overflow: hidden;
     /* Para o text-overflow funcionar */
 }

 .search-result__item-title {
     font-weight: 600;
     color: var(--color-text-primary);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 .search-result__item-subtitle {
     font-size: var(--fs-sm);
     color: var(--color-text-secondary);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 .search-form__input-placeholder {
     width: 100%;
     text-align: left;
     background-color: var(--color-bg-content);
     border: 1px solid var(--color-border);
     color: var(--color-text-tertiary);
     padding: var(--spacing-4) var(--spacing-4) var(--spacing-4) 3.5rem;
     border-radius: var(--border-radius-full);
     font-size: var(--fs-base);
     cursor: pointer;
     transition: var(--transition-fast);
 }

 .search-form:hover .search-form__input-placeholder {
     border-color: var(--color-text-tertiary);
 }

 .search-modal__initial-state {
     text-align: center;
     padding: var(--spacing-8) 0;
     color: var(--color-text-tertiary);
 }

 /* --- Filtros --- */
 .filters-container {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: var(--spacing-2);
     margin-bottom: var(--spacing-10);
 }

 .filter-chip {
     background-color: var(--color-bg-content);
     color: var(--color-text-secondary);
     border: 1px solid var(--color-border);
     padding: var(--spacing-1) var(--spacing-4);
     border-radius: var(--border-radius-full);
     font-size: var(--fs-sm);
     font-weight: 500;
     cursor: pointer;
     transition: var(--transition-fast);
 }

 .filter-chip:hover:not(.active) {
     background-color: var(--color-bg-elevated);
     border-color: var(--color-text-tertiary);
 }

 .filter-chip.active {
     background-color: var(--color-primary);
     color: var(--color-bg-dark);
     border-color: var(--color-primary);
 }


 /* --- Paginação --- */
 .pagination {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: var(--spacing-2);
     margin-top: var(--spacing-12);
 }

 .pagination__btn,
 .pagination__page {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 32px;
     height: 32px;
     border-radius: var(--border-radius-sm);
     background-color: var(--color-bg-content);
     color: var(--color-text-secondary);
     border: 1px solid var(--color-border);
     font-size: var(--fs-sm);
     font-weight: 500;
     transition: var(--transition-fast);
 }

 .pagination__btn:hover,
 .pagination__page:hover:not(.active) {
     background-color: var(--color-bg-elevated);
     color: var(--color-text-primary);
 }

 .pagination__page.active {
     background-color: var(--color-primary);
     color: var(--color-bg-dark);
     border-color: var(--color-primary);
 }

 .pagination__ellipsis {
     color: var(--color-text-tertiary);
 }


 /*
========================================
File: (main.css - Adições) ou <style>
========================================
*/

 /* --- Footer --- (Substituir o .main-footer anterior) */
 .site-footer {
     background-color: var(--color-bg-content);
     color: var(--color-text-secondary);
     padding: var(--spacing-12) 0;
     /* Mais padding vertical */
     border-top: 1px solid var(--color-border);
     font-size: var(--fs-sm);
     margin-top: var(--spacing-12);
 }

 .site-footer__grid {
     display: grid;
     grid-template-columns: repeat(1, 1fr);
     /* Mobile: 1 coluna */
     gap: var(--spacing-8);
 }

 @media (min-width: 640px) {

     /* sm */
     .site-footer__grid {
         grid-template-columns: repeat(2, 1fr);
         /* 2 colunas */
     }
 }

 @media (min-width: 1024px) {

     /* lg */
     .site-footer__grid {
         grid-template-columns: 1.5fr repeat(3, 1fr);
         /* 4 colunas com a primeira maior */
     }
 }

 .site-footer__about-section .logo {
     display: flex;
     align-items: center;
     gap: var(--spacing-2);
     font-size: var(--fs-xl);
     font-weight: 800;
     color: var(--color-text-primary);
     margin-bottom: var(--spacing-4);
 }

 .site-footer__about-section .logo i {
     color: var(--color-primary);
     font-size: var(--fs-3xl);
 }

 .site-footer__about-section p {
     max-width: 300px;
     /* Limita largura do texto "sobre" */
     line-height: 1.7;
 }

 .site-footer__social-links {
     display: flex;
     gap: var(--spacing-4);
     margin-top: var(--spacing-6);
 }

 .site-footer__social-links a {
     color: var(--color-text-tertiary);
     font-size: var(--fs-2xl);
     transition: var(--transition-fast);
 }

 .site-footer__social-links a:hover {
     color: var(--color-primary);
     transform: translateY(-2px);
 }

 .site-footer__nav-section h3 {
     font-size: var(--fs-base);
     font-weight: 600;
     color: var(--color-text-primary);
     margin-bottom: var(--spacing-4);
     text-transform: uppercase;
     letter-spacing: 0.05em;
 }

 .site-footer__nav-list {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: var(--spacing-2);
 }

 .site-footer__nav-list a {
     transition: var(--transition-fast);
 }

 .site-footer__nav-list a:hover {
     color: var(--color-primary);
     padding-left: var(--spacing-1);
 }

 .newsletter-form {
     display: flex;
     flex-direction: column;
     gap: var(--spacing-2);
     margin-top: var(--spacing-2);
 }

 .newsletter-form__input {
     width: 100%;
     background-color: var(--color-bg-dark);
     border: 1px solid var(--color-border);
     color: var(--color-text-primary);
     padding: var(--spacing-2) var(--spacing-3);
     border-radius: var(--border-radius-md);
     font-size: var(--fs-sm);
 }

 .newsletter-form__input:focus {
     outline: none;
     box-shadow: 0 0 0 2px var(--color-primary);
 }

 .newsletter-form__btn {
     background-color: var(--color-primary);
     color: var(--color-bg-dark);
     padding: var(--spacing-2) var(--spacing-3);
     border: none;
     border-radius: var(--border-radius-md);
     font-weight: 600;
     cursor: pointer;
     transition: var(--transition-fast);
 }

 .newsletter-form__btn:hover {
     background-color: var(--color-primary-darker);
 }

 .site-footer__bottom-bar {
     border-top: 1px solid var(--color-border);
     margin-top: var(--spacing-8);
     padding-top: var(--spacing-6);
     text-align: center;
     font-size: var(--fs-xs);
     color: var(--color-text-tertiary);
 }

 @media (min-width: 640px) {

     /* sm */
     .card {
         flex-basis: 180px;
     }

     .genre-grid {
         grid-template-columns: repeat(3, 1fr);
     }
 }

 @media (min-width: 768px) {

     /* md */
     .main-header__actions .btn {
         display: inline-flex;
     }

     .main-header__actions .btn--mobile {
         display: none;
     }

     .section__view-all {
         display: block;
     }

     .genre-grid {
         grid-template-columns: repeat(4, 1fr);
     }
 }

 .copyly_en::after {
     content: "The information provided is based on queries obtained from reliable sources, user contributions, and respects the copyright provisions of Law No. 9,610/98. If you are the owner and identify any incorrect or missing information, please contact us. We are committed to correcting any inconsistencies immediately. We do not claim ownership of any lyrics, music, or related media. LyricLens does not host, control, or manage the content displayed in the YouTube player, limiting itself to integrating it in compliance with the platform's public permissions and policies.";
     display: block;
     clear: both;
     font-size: .8em;
     margin-top: 20px;
 }

 .copyly_en span {
     display: block;
     line-height: 1.5em;
 }

 .copyly_pt::after {
     content: 'As informações foram disponibilizadas com base em consultas obtidas de fontes confiáveis, contribuições de usuários e respeitando os direitos autorais previstos na Lei nº 9.610/98. Caso você seja o titular e identifique alguma informação incorreta ou ausente, entre em contato conosco. Estamos comprometidos em corrigir eventuais inconsistências imediatamente. Não reivindicamos a propriedade de nenhuma letra, música ou mídea relacionada. A LyricLens não hospeda, controla ou gerencia o conteúdo exibido no player do YouTube, limitando-se a integrá-lo em conformidade com as permissões e políticas públicas da plataforma.';
     display: block;
     clear: both;
     font-size: .8em;
     margin-top: 20px;
 }

 .copyly_pt span {
     display: block;
     line-height: 1.5em;
 }

 .copyly_es::after {
     content: 'La información proporcionada se basa en consultas obtenidas de fuentes confiables, contribuciones de usuarios y respeta las disposiciones de derechos de autor de la Ley Nº 9.610/98. Si usted es el titular e identifica alguna información incorrecta o ausente, contáctenos. Estamos comprometidos a corregir cualquier inconsistencia de inmediato. No reclamamos la propiedad de ninguna letra, música o medio relacionado. LyricLens no aloja, controla ni gestiona el contenido mostrado en el reproductor de YouTube, limitándose a integrarlo de conformidad con los permisos y políticas públicas de la plataforma.';
     display: block;
     clear: both;
     font-size: .8em;
     margin-top: 20px;
 }

 .copyly_es span {
     display: block;
     line-height: 1.5em;
 }

 /* ... (dentro dos estilos do Header) ... */
 .main-header__top-bar {
     display: flex;
     align-items: center;
     justify-content: space-between;
     height: 4.5rem;
 }

 /* NOVO: Classe para agrupar logo e botão mobile */
 .main-header__left-group {
     display: flex;
     align-items: center;
     gap: var(--spacing-2);
 }

 .main-header__actions .btn {
     /*display: none;*/
     /* Escondido por padrão (mobile) */
 }

 @media (min-width: 768px) {

     /* md */
     .main-header__actions .btn {
         display: inline-flex;
         /* Mostra o botão "Entrar" textual em telas maiores */
     }

     .main-header__actions .btn--mobile {
         display: none;
     }
 }

 .ai-insights h3,
 .ai-insights h4 {
     color: #fff;
 }

 .ai-insights p {
     font-size: var(--fs-xs);
 }

 .ai-insights p,
 .ai-insights li {
     margin-bottom: 10px;
     font-size: var(--fs-xs);
 }

 .ai-insights strong {
     color: var(--color-primary);
     font-size: var(--fs-sm) !important;
 }

 .ai-insights ul {
     margin-left: 25px;
 }

 .community-qa h2 {
     display: flex;
     align-items: center;
     gap: var(--spacing-3);
     font-size: var(--fs-lg);
     font-weight: 700;
     margin-bottom: var(--spacing-4);
     color: #fff;
 }

 .community-qa h3,
 .community-qa h4 {
     color: #fff;
     font-size: var(--fs-sm);
 }

 .community-qa p {
     font-size: var(--fs-xs);
 }

 .community-qa div {
     margin-bottom: 10px;
 }

 .community-qa ul {
     margin-left: 20px;
 }

 .community-qa ul li {
     margin-bottom: 2px;
 }

 /* ======================================== */
 /*          Componente de Paginação           */
 /* ======================================== */

 .pagination-nav {
     display: flex;
     justify-content: center;
     /* Centraliza a lista de paginação */
     margin-top: 2.5rem;
     animation: fadeInUp 0.8s ease-out;
     /* Reutilizando a animação */
 }

 .pagination {
     display: inline-flex;
     /* Para que a lista se comporte como um bloco inline */
     align-items: center;
     list-style: none;
     padding: 0;
     margin: 0;
     /*background-color: var(--brand-bg-content);*/
     /* Fundo sutil */
     /*border-radius: 9999px;*/
     /* Formato de pílula */
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
     /*border: 1px solid var(--brand-border);*/
 }

 .pagination li {
     margin: 0;
 }

 .pagination a,
 .pagination span {
     display: flex;
     align-items: center;
     justify-content: center;
     min-width: 40px;
     /* Largura mínima para cada item */
     height: 40px;
     /* Altura para cada item */
     padding: 0.25rem 0.75rem;
     font-size: 0.875rem;
     /* 14px */
     font-weight: 500;
     color: var(--brand-text-secondary);
     border-radius: 9999px;
     /* Cada item também é arredondado */
     transition: all 0.2s ease-in-out;
     line-height: 1;
     /* Para alinhamento vertical do texto */
 }

 /* Estilo para links (não ativos) no hover */
 .pagination a:hover {
     background-color: var(--brand-bg-elevated);
     color: var(--brand-text-primary);
 }

 /* Estilo para o item da página atual */
 .pagination .active span {
     background-color: var(--brand-primary);
     color: var(--brand-bg-dark);
     font-weight: 700;
     transform: scale(1.1);
     box-shadow: 0 0 10px rgba(29, 185, 84, 0.3);
 }

 /* Estilo para itens desativados (primeira/última página, "...") */
 .pagination .disabled span {
     color: var(--brand-text-tertiary);
     cursor: not-allowed;
     background-color: transparent;
 }

 /* Específico para os botões "prev" e "next" */
 .pagination a[rel="prev"],
 .pagination a[rel="next"] {
     font-size: 1.25rem;
     /* Ícones maiores */
 }

 .pagination .disabled[aria-label*="previous"] span,
 .pagination .disabled[aria-label*="next"] span {
     opacity: 0.5;
 }

 .pagination-container {
     margin-top: 35px;
 }

 /* ======================================== */
 /*        Estilo Base do Skeleton           */
 /* ======================================== */

 /* Animação do Brilho (Shimmer Effect) */
 @keyframes shimmer {
     0% {
         transform: translateX(-100%);
     }

     100% {
         transform: translateX(100%);
     }
 }

 .skeleton {
     background-color: var(--skeleton-bg);
     border-radius: 0.25rem;
     /* 4px */
     position: relative;
     /* Necessário para o pseudo-elemento */
     overflow: hidden;
     /* Esconde o brilho fora do elemento */
 }

 /* O brilho em si */
 .skeleton::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, var(--skeleton-shine), transparent);
     animation: shimmer var(--skeleton-animation-duration) infinite linear;
 }

 /* Modificadores de forma */
 .skeleton-avatar {
     border-radius: 50%;
 }

 .skeleton-line {
     height: 1em;
     /* Altura baseada no tamanho da fonte */
 }

 /* Modificadores de largura (simulando classes de utilidade) */
 .w-full {
     width: 100%;
 }

 .w-3\/4 {
     width: 75%;
 }

 .w-1\/2 {
     width: 50%;
 }

 .w-1\/3 {
     width: 33.33%;
 }

 .w-16 {
     width: 4rem;
     height: 4rem;
 }

 /* Para avatares/imagens */
 .w-8 {
     width: 2.3rem;
     height: 2.3rem;
 }

 .w-12 {
     width: 3rem;
     height: 3rem;
 }

 .w-24 {
     width: 6rem;
     height: 6rem;
 }

 .aspect-square {
     aspect-ratio: 1 / 1;
 }

 /* ======================================== */
 /*      Componente: Skeleton de Comentários */
 /* ======================================== */
 .comments-skeleton-container {
     display: flex;
     flex-direction: column;
     gap: 1.5rem;
 }

 .comment-skeleton-item {
     display: flex;
     gap: 1rem;
     align-items: flex-start;
 }

 .comment-skeleton-item .text-lines {
     flex-grow: 1;
     display: flex;
     flex-direction: column;
     gap: 0.75rem;
 }

 /* ======================================== */
 /*    Componente: Skeleton de Interpretações */
 /* ======================================== */
 .interpretations-skeleton-container {
     background-color: var(--brand-bg-content);
     border-radius: 0.5rem;
     width: 100%;
     max-width: 400px;
 }

 .interpretations-skeleton-container .header-lines {
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
     padding-bottom: 1rem;
     margin-bottom: 1rem;
     border-bottom: 1px solid var(--brand-border);
 }

 /* ======================================== */
 /*      Componente: Skeleton de Busca Modal */
 /* ======================================== */
 .search-modal-skeleton-wrapper {
     background-color: var(--brand-bg-content);
     padding: 1.5rem;
     border-radius: 0.75rem;
     width: 100%;
     max-width: 500px;
     padding-top: 8px;
 }

 .search-modal-skeleton-wrapper h3 {
     font-size: 0.875rem;
     font-weight: 500;
     color: var(--brand-text-secondary);
 }

 .search-modal-skeleton-wrapper h3:first-of-type {
     margin-top: 0;
 }

 .search-results-container {
     display: flex;
     flex-direction: column;
     gap: .7rem;
 }

 .search-result-item {
     display: flex;
     align-items: center;
     gap: 1rem;
 }

 .search-result-item .text-lines {
     flex-grow: 1;
     display: flex;
     flex-direction: column;
     gap: 0.6rem;
 }

 .skeleton-pr {
     display: flex;
     flex-direction: column;
     row-gap: 20px;
 }


 /* ======================================== */
 /*      Estilo do Painel Flutuante          */
 /* ======================================== */

 @keyframes slideUp {
     from {
         transform: translateY(100%);
         opacity: 0;
     }

     to {
         transform: translateY(0);
         opacity: 1;
     }
 }

 .consent-banner {
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
     z-index: 1000;
     background-color: var(--brand-bg-content);
     color: var(--brand-text-secondary);
     padding: 1rem;
     box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
     border-top: 1px solid #282828;

     /* Animação de entrada */
     animation: slideUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;

     /* Escondido por padrão, o JS irá mostrar se necessário */
     display: none;
 }

 .consent-banner.show {
     display: block;
 }

 .consent-banner-content {
     display: flex;
     flex-direction: column;
     /* Layout mobile first */
     align-items: center;
     justify-content: center;
     gap: 1rem;
     width: 100%;
     max-width: 1200px;
     /* Largura máxima do conteúdo interno */
     margin: 0 auto;
 }

 .consent-banner-text {
     font-size: 0.8rem;
     line-height: 1.5;
     text-align: center;
     /* Centralizado em mobile */
 }

 .consent-banner-text a {
     color: var(--brand-primary);
     text-decoration: none;
     font-weight: 500;
 }

 .consent-banner-text a:hover {
     text-decoration: underline;
 }

 .consent-banner-actions {
     flex-shrink: 0;
     /* Evita que os botões encolham */
 }

 .consent-btn-accept {
     background-color: var(--brand-primary);
     color: black;
     border: none;
     padding: 0.6rem 1.5rem;
     border-radius: 9999px;
     font-size: 0.875rem;
     font-weight: 700;
     cursor: pointer;
     transition: background-color 0.2s ease, transform 0.1s ease;
     white-space: nowrap;
     /* Evita quebra de linha */
 }

 .consent-btn-accept:hover {
     background-color: #1AA34A;
     /* brand-primary-darker */
 }

 .consent-btn-accept:active {
     transform: scale(0.98);
 }

 /* Estilos para telas maiores (desktop) */
 @media (min-width: 768px) {
     .consent-banner {
         padding: 1.25rem;
     }

     .consent-banner-content {
         flex-direction: row;
         /* Layout horizontal */
         justify-content: space-between;
     }

     .consent-banner-text {
         font-size: 0.875rem;
         text-align: left;
         /* Alinhado à esquerda em desktop */
         margin-right: 1.5rem;
     }
 }

 /* Layout do Conteúdo Legal */
 .legal-container {
     width: 90%;
     max-width: 800px;
     /* Largura ideal para leitura de texto */
     margin: 3rem auto;
     animation: fadeIn 0.5s ease-out;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 .legal-header {
     text-align: center;
     margin-bottom: 2.5rem;
     padding-bottom: 1rem;
     border-bottom: 1px solid var(--brand-border);
 }

 .legal-header h1 {
     font-size: 2.5rem;
     font-weight: 800;
     letter-spacing: -0.025em;
 }

 .legal-header p {
     margin-top: 0.5rem;
     font-size: 0.9rem;
     color: var(--brand-text-tertiary);
 }

 .legal-content section {
     margin-bottom: 2rem;
 }

 .legal-content h2 {
     font-size: 1.5rem;
     margin-bottom: 1rem;
     padding-bottom: 0.5rem;
     border-bottom: 1px solid var(--brand-border);
 }

 .legal-content p,
 .legal-content li {
     font-size: 0.95rem;
     margin-bottom: 1rem;
 }

 .legal-content ul {
     list-style: disc;
     padding-left: 1.5rem;
 }

 .legal-content ul li {
     margin-bottom: 0.5rem;
 }

 .legal-content a {
     color: var(--brand-primary);
     text-decoration: none;
 }

 .legal-content a:hover {
     text-decoration: underline;
 }

 .legal-content h1,
 .legal-content h2,
 .legal-content h3 {
     color: var(--brand-text-primary);
     font-weight: 700;
 }

 .legal-content strong {
     color: var(--brand-text-primary);
     font-weight: 600;
 }