/*
====================================================================
  SISTEMA DE TÍTULOS DESKTOP - MEDIA QUERIES
  Local: sites/public/componentes/titulos/desktop/titulos_desktop_media.css
  
  DESCRIÇÃO:
    Media queries específicas para desktop do sistema de títulos.
    Breakpoints: 1400px+, 1200px+, 992px+, 768px+
  
  PADRÃO:
    - Desktop First (min-width)
    - 4 breakpoints: 1400px+, 1200px+, 992px+, 768px+
    - Sem duplicatas

  Autor: #@HD
  Data de criação: 15/08/2025
  Última atualização: 15/08/2025
====================================================================
*/

/* ====================================================================
   MEDIA QUERIES DESKTOP - TÍTULOS
   ==================================================================== */

/* Telas muito grandes (1400px+) - Escala máxima */
@media (min-width: 1400px) {
    .titulo-principal-desktop {
        font-size: var(--desktop-titulos-principal-tamanho-1400px, 3rem);
        letter-spacing: 2.5px;
    }
    
    .titulo-secundario-desktop {
        font-size: var(--desktop-titulos-secundario-tamanho-1400px, 2.2rem);
        letter-spacing: 1.5px;
    }
    
    .subtitulo-principal-desktop,
    .subtitulo-simples-desktop {
        font-size: var(--desktop-titulos-subtitulo-tamanho-1400px, 1.3rem);
        letter-spacing: 1.5px;
    }
    
    .titulos-styled {
        padding: 0 2rem;
    }
}

/* Desktops grandes (1200px+) - Escala alta */
@media (min-width: 1200px) and (max-width: 1399px) {
    .titulo-principal-desktop {
        font-size: var(--desktop-titulos-principal-tamanho-1200px, 2.5rem);
        letter-spacing: 2px;
    }
    
    .titulo-secundario-desktop {
        font-size: var(--desktop-titulos-secundario-tamanho-1200px, 2rem);
        letter-spacing: 1.2px;
    }
    
    .subtitulo-principal-desktop,
    .subtitulo-simples-desktop {
        font-size: var(--desktop-titulos-subtitulo-tamanho-1200px, 1.2rem);
        letter-spacing: 1.2px;
    }
    
    .titulos-styled {
        padding: 0 0rem;
    }
}

/* Notebooks/Desktops pequenos (992px+) - Escala média */
@media (min-width: 992px) and (max-width: 1199px) {
    .titulo-principal-desktop {
        font-size: var(--desktop-titulos-principal-tamanho-992px, 2.2rem);
        letter-spacing: 1.8px;
    }
    
    .titulo-secundario-desktop {
        font-size: var(--desktop-titulos-secundario-tamanho-992px, 1.8rem);
        letter-spacing: 1px;
    }
    
    .subtitulo-principal-desktop,
    .subtitulo-simples-desktop {
        font-size: var(--desktop-titulos-subtitulo-tamanho-992px, 1.1rem);
        letter-spacing: 1px;
    }
    
    .titulos-styled {
        padding: 0 1rem;
    }
}

/* Tablets (768px+) - Escala base */
@media (min-width: 768px) and (max-width: 991px) {
    .titulo-principal-desktop {
        font-size: var(--desktop-titulos-principal-tamanho-768px, 2rem);
        letter-spacing: 1.5px;
    }
    
    .titulo-secundario-desktop {
        font-size: var(--desktop-titulos-secundario-tamanho-768px, 1.6rem);
        letter-spacing: 0.8px;
    }
    
    .subtitulo-principal-desktop,
    .subtitulo-simples-desktop {
        font-size: var(--desktop-titulos-subtitulo-tamanho-768px, 1rem);
        letter-spacing: 0.8px;
    }
    
    .titulos-styled {
        padding: 0 0.8rem;
    }
}

/* ====================================================================
   AJUSTES ESPECÍFICOS POR CONTEXTO - DESKTOP
   ==================================================================== */

/* Títulos em seções principais */
@media (min-width: 768px) {
    .titulos-secao-container .titulo-principal-desktop {
        margin-bottom: 1rem;
    }
    
    .titulos-secao-container .subtitulo-principal-desktop {
        margin-top: 0.5rem;
        margin-bottom: 0;
    }
}

/* Títulos em cards */
@media (min-width: 768px) {
    .titulos-card-container .titulo-secundario-desktop {
        margin-bottom: 0.5rem;
    }
    
    .titulos-card-container .subtitulo-principal-desktop {
        margin-top: 0.3rem;
        margin-bottom: 0;
    }
}

/* Títulos em modais */
@media (min-width: 768px) {
    .titulos-modal-container .titulo-principal-desktop {
        margin-bottom: 0.8rem;
    }
    
    .titulos-modal-container .subtitulo-principal-desktop {
        margin-top: 0.4rem;
        margin-bottom: 0;
    }
}

/* Títulos em formulários */
@media (min-width: 768px) {
    .titulos-form-container .titulo-principal-desktop {
        margin-bottom: 0.8rem;
    }
    
    .titulos-form-container .subtitulo-principal-desktop {
        margin-top: 0.4rem;
        margin-bottom: 0;
    }
}

/* Títulos de navegação */
@media (min-width: 768px) {
    .titulos-nav-container .titulo-principal-desktop {
        margin-bottom: 0.5rem;
    }
    
    .titulos-nav-container .subtitulo-principal-desktop {
        margin-top: 0.3rem;
        margin-bottom: 0;
    }
}

/* Títulos de footer */
@media (min-width: 768px) {
    .titulos-footer-container .titulo-secundario-desktop {
        margin-bottom: 0.4rem;
    }
    
    .titulos-footer-container .subtitulo-principal-desktop {
        margin-top: 0.2rem;
        margin-bottom: 0;
    }
}

/* ====================================================================
   HOVER EFFECTS - DESKTOP
   ==================================================================== */

@media (min-width: 768px) {
    .titulo-principal-desktop:hover {
        transform: translateY(-2px);
        text-shadow: 0 0 25px var(--desktop-titulos-principal-sombra-cor, rgba(18, 247, 255, 0.5));
    }
    
    .titulo-secundario-desktop:hover {
        transform: translateY(-1px);
        text-shadow: 0 0 15px var(--desktop-titulos-secundario-sombra-cor, rgba(18, 247, 255, 0.3));
    }
    
    .subtitulo-principal-desktop:hover,
    .subtitulo-simples-desktop:hover {
        transform: translateY(-1px);
        opacity: 1;
    }
}

/* ====================================================================
   ANIMAÇÕES - DESKTOP
   ==================================================================== */

@media (min-width: 768px) {
    .titulo-principal-desktop,
    .titulo-secundario-desktop,
    .subtitulo-principal-desktop,
    .subtitulo-simples-desktop {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .titulos-styled {
        transition: all 0.3s ease;
    }
}

/* ====================================================================
   MEDIA QUERIES RESPONSIVAS - DESKTOP (ARQUIVO ORIGINAL)
   ==================================================================== */

/* Desktop acima de 1400px - Telas muito grandes */
@media (min-width: 1400px) {
    .titulos-section .section-container {
        max-width: 1400px;
    }
    
    .section-title h2 {
        font-size: 3rem;
        letter-spacing: 3px;
    }
    
    .section-title .section-subtitle {
        font-size: 1.3rem;
        letter-spacing: 1.5px;
    }
    
    .section-stats {
        gap: 3rem;
    }
    
    .section-stats .stat-item {
        min-width: 150px;
        padding: 1.5rem;
    }
    
    .section-stats .stat-value {
        font-size: 1.3rem;
    }
    
    .section-description p {
        font-size: 1.1rem;
        line-height: 1.7;
    }
}

/* Desktop 1200px - Telas grandes */
@media (min-width: 1200px) and (max-width: 1399px) {
    .titulos-section .section-container {
        max-width: 1200px;
    }
    
    .section-title h2 {
        font-size: 2.8rem;
        letter-spacing: 2.5px;
    }
    
    .section-title .section-subtitle {
        font-size: 1.25rem;
        letter-spacing: 1.3px;
    }
    
    .section-stats {
        gap: 2.5rem;
    }
    
    .section-stats .stat-item {
        min-width: 140px;
        padding: 1.3rem;
    }
    
    .section-stats .stat-value {
        font-size: 1.2rem;
    }
    
    .section-description p {
        font-size: 1.05rem;
        line-height: 1.65;
    }
}

/* Desktop 992px - Telas médias */
@media (min-width: 992px) and (max-width: 1199px) {
    .titulos-section .section-container {
        max-width: 1000px;
    }
    
    .section-title h2 {
        font-size: 2.5rem;
        letter-spacing: 2px;
    }
    
    .section-title .section-subtitle {
        font-size: 1.2rem;
        letter-spacing: 1px;
    }
    
    .section-stats {
        gap: 2rem;
    }
    
    .section-stats .stat-item {
        min-width: 130px;
        padding: 1.2rem;
    }
    
    .section-stats .stat-value {
        font-size: 1.1rem;
    }
    
    .section-description p {
        font-size: 1rem;
        line-height: 1.6;
    }
}