/* ==========================================================================
   MOBILE FIXES - Correções específicas para responsividade mobile
   ========================================================================== */

/* ==========================================================================
   0. CORREÇÕES GLOBAIS - Aplicar em todas as resoluções não-desktop
   ========================================================================== */

/* Esconder elementos decorativos em todas as resoluções abaixo de desktop */
@media (max-width: 1200px) {
    .degree-left,
    .degree-right {
        display: none !important;
    }

    /* Remover efeito noise em dispositivos móveis para melhor performance */
    .noise-overlay {
        display: none !important;
    }
}

/* ==========================================================================
   0. CORREÇÕES PARA DESKTOP - Melhorar legibilidade
   ========================================================================== */

/* Melhorar largura do conteúdo em telas grandes */
@media (min-width: 769px) {
    /* Container do blog e posts - largura mais confortável */
    .blog-post-container,
    .ftco-section .container {
        max-width: 900px !important;
        margin: 0 auto !important;
    }

    /* Conteúdo do post - largura ideal para leitura */
    .post-content,
    #post-content {
        max-width: 750px !important;
        margin: 0 auto !important;
        font-size: 17px !important;
        line-height: 1.8 !important;
    }

    .post-content p {
        margin-bottom: 20px !important;
    }

    .post-content h2 {
        margin-top: 40px !important;
        margin-bottom: 20px !important;
    }

    .post-content h3 {
        margin-top: 30px !important;
        margin-bottom: 15px !important;
    }

    /* Blog listing */
    .blog-index-container {
        max-width: 1200px !important;
        margin: 0 auto !important;
        padding: 40px 20px !important;
    }

    /* Busca do blog - melhor layout */
    .blog-search {
        max-width: 600px !important;
        margin: 0 auto 40px auto !important;
    }

    .blog-search form {
        display: flex !important;
        gap: 10px !important;
    }

    .blog-search input[type="text"],
    .blog-search input[type="search"] {
        flex: 1 !important;
        padding: 12px 20px !important;
        font-size: 15px !important;
        border: 2px solid #ddd !important;
        border-radius: 8px !important;
        transition: border-color 0.3s !important;
    }

    .blog-search input:focus {
        border-color: #e8b116 !important;
        outline: none !important;
    }

    .blog-search button {
        padding: 12px 30px !important;
        background: #e8b116 !important;
        color: #fff !important;
        border: none !important;
        border-radius: 8px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        transition: background 0.3s !important;
    }

    .blog-search button:hover {
        background: #d4a014 !important;
    }

    /* Widget "Sobre mim" na sidebar - Layout desktop lado a lado */
    .sidebar .about-widget,
    .sidebar-widget.about,
    #sobre-mim {
        padding: 30px 25px !important;
    }

    .sidebar .about-widget .about-content,
    .sidebar-widget.about .about-content,
    #sobre-mim .about-content {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 20px !important;
        text-align: left !important;
    }

    .sidebar .about-widget img,
    .sidebar-widget.about img,
    #sobre-mim img {
        width: 120px !important;
        height: 120px !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        border: 2px solid #e8b116 !important;
    }

    .sidebar .about-widget p,
    .sidebar-widget.about p,
    #sobre-mim p {
        font-size: 15px !important;
        line-height: 1.7 !important;
        text-align: left !important;
        color: #555 !important;
        margin-bottom: 0 !important;
        flex: 1 !important;
    }

    .sidebar .about-widget .sidebar-links,
    .sidebar-widget.about .sidebar-links,
    #sobre-mim .sidebar-links {
        margin-top: 3px !important;
    }
}

/* ==========================================================================
   1. CORREÇÕES GERAIS DE IMAGENS
   ========================================================================== */

/* Garantir que todas as imagens sejam responsivas e não sejam cortadas */
img {
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* Imagens dentro de containers */
.glitch-container img,
.glitch-container-profile img {
    width: 90% !important;
    object-fit: cover;
    object-position: center;
}

/* ==========================================================================
   2. SEÇÃO SOBRE (ABOUT) - Mobile
   ========================================================================== */

@media (max-width: 768px) {
    /* Container da seção sobre */
    #about .row {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px;
    }

    #about .col-3,
    #about .col-2 {
        width: 100% !important;
        padding: 15px !important;
        text-align: center;
    }

    /* ESCONDER IMAGENS NO MOBILE */
    .glitch-container-profile,
    .glitch-container {
        display: none !important;
    }

    /* Texto da seção sobre */
    #about p {
        font-size: 15px !important;
        line-height: 1.6 !important;
        text-align: left !important;
        padding: 0 10px;
    }

    /* Citação */
    #about blockquote {
        font-size: 14px !important;
        padding: 15px !important;
        margin: 20px 0 !important;
        text-align: center !important;
    }

    /* Reorganizar ordem dos elementos */
    #about .no-padding-bottom {
        display: flex;
        flex-direction: column;
    }
}

/* ==========================================================================
   3. SEÇÃO SKILLS - Corrigir layout "linguiça"
   ========================================================================== */

/* Tablets e acima */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Esconder elementos decorativos que quebram layout */
    .degree-left,
    .degree-right {
        display: none !important;
    }

    .services-section {
        padding: 50px 30px !important;
    }

    .services-section .d-flex {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 25px !important;
    }

    .services-section .col-md-6,
    .services-section .col-lg-3 {
        width: 100% !important;
    }

    .media.block-6 {
        padding: 30px 20px !important;
        height: 100% !important;
    }

    /* Paginação e busca em tablets */
    .blog-search {
        max-width: 500px !important;
        margin: 0 auto 40px auto !important;
    }

    .pagination,
    .blog-pagination {
        margin-top: 50px !important;
    }

    /* Sidebar em tablets */
    .sidebar,
    aside.sidebar {
        padding: 40px 30px !important;
    }

    .sidebar-widget {
        padding: 30px 25px !important;
    }

    /* Seção About / Sobre */
    #about .row {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 30px !important;
    }

    #about .col-3,
    #about .col-2 {
        width: auto !important;
        flex: 1 !important;
        padding: 20px !important;
    }

    #about .glitch-container-profile {
        display: block !important;
        max-width: 300px !important;
    }

    #about p {
        font-size: 16px !important;
        line-height: 1.7 !important;
        text-align: left !important;
    }

    #about blockquote {
        font-size: 15px !important;
        padding: 20px !important;
        margin: 25px 0 !important;
    }
}

/* Mobile */
@media (max-width: 768px) {
    /* Esconder elementos decorativos no mobile também */
    .degree-left,
    .degree-right {
        display: none !important;
    }

    .services-section {
        padding: 40px 20px !important;
        margin-top: 20px !important;
    }

    .services-section .container {
        padding: 0 !important;
        max-width: 100% !important;
    }

    /* Fazer cards ocuparem 100% da largura */
    .services-section .d-flex,
    .services-section .row {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    .services-section .col-md-6,
    .services-section .col-lg-3,
    .services-section [class*='col-'] {
        width: 100% !important;
        flex: none !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Estilizar cards de skills */
    .media.block-6 {
        padding: 30px 20px !important;
        margin-bottom: 0 !important;
        text-align: center !important;
        background: #fff !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    }

    .media.block-6 .icon {
        margin: 0 auto 15px auto !important;
        font-size: 2.5rem !important;
    }

    .media.block-6 h3 {
        font-size: 1.3rem !important;
        margin-bottom: 12px !important;
        line-height: 1.3 !important;
    }

    .media.block-6 p {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }

    /* Botões da seção skills */
    .services-section button,
    .services-section a[style*="padding"],
    #skills button,
    #skills a.button {
        display: block !important;
        width: 100% !important;
        max-width: 350px !important;
        margin: 10px auto !important;
        padding: 15px 25px !important;
        font-size: 15px !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    /* Container dos botões */
    #skills > div[style*="margin-top"],
    .services-section .button-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important;
        padding: 0 20px !important;
        margin-top: 30px !important;
    }
}

/* ==========================================================================
   4. BOTÕES - Quebrar linha corretamente
   ========================================================================== */

@media (max-width: 768px) {
    /* Todos os botões no mobile */
    .button,
    button,
    a.button,
    input[type="submit"],
    .btn {
        display: block !important;
        width: 100% !important;
        max-width: 320px !important;
        margin: 8px auto !important;
        padding: 12px 20px !important;
        font-size: 14px !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    /* Containers com múltiplos botões */
    div[style*="display: flex"] button,
    div[style*="display: flex"] a {
        flex: none !important;
        width: 100% !important;
        max-width: 320px !important;
        margin: 8px auto !important;
    }

    /* Container dos botões da seção skills */
    #skills > div[style*="margin-top"] {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 0 15px !important;
        margin-top: 30px !important;
    }
}

/* ==========================================================================
   5. CARDS DO BLOG - Layout Mobile e Responsivo MELHORADO
   ========================================================================== */

/* Tablets e resoluções intermediárias */
@media (max-width: 1200px) and (min-width: 769px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 25px !important;
        padding: 10px 40px 40px 40px !important;
    }

    .blog-card {
        min-height: 420px !important;
    }

    .blog-card-image {
        height: 220px !important;
    }

    .blog-card-content {
        padding: 20px !important;
    }

    .blog-card-title {
        font-size: 17px !important;
        line-height: 1.4 !important;
        min-height: 50px !important;
    }

    .blog-card-excerpt {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
}

/* Mobile */
@media (max-width: 768px) {
    /* Container do blog - remover padding lateral */
    #blog.bg-light {
        padding: 40px 0 !important;
    }

    .container-blog {
        padding: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .blog-header {
        padding: 0 15px !important;
        margin-bottom: 25px !important;
    }

    .blog-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        padding: 0 15px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .blog-card {
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12) !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        background: #fff !important;
        padding: 0 !important;
    }

    /* Imagem do card - garantir que fique no topo e ocupe toda largura */
    .blog-card > .blog-card-image:first-child,
    .blog-card > .post-image:first-child {
        width: 100% !important;
        height: 250px !important;
        min-width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        flex-shrink: 0 !important;
        position: relative !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        border-top-left-radius: 10px !important;
        border-top-right-radius: 10px !important;
        order: -1 !important;
        display: block !important;
    }

    .blog-card-image img,
    .post-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .blog-card-image a,
    .post-image a {
        display: block !important;
        width: 125% !important;
        height: 100% !important;
    }

    .category-badge {
        position: absolute !important;
        bottom: 15px !important;
        left: 15px !important;
        z-index: 10 !important;
        background: rgba(253, 203, 110, 0.95) !important;
        padding: 6px 12px !important;
        border-radius: 20px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #000 !important;
    }

    .blog-card-content {
        padding: 20px !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .blog-card-title {
        font-size: 1.2rem !important;
        line-height: 1.4 !important;
        margin-bottom: 0 !important;
        font-weight: 700 !important;
        color: #1a1a1a !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .blog-card-meta {
        font-size: 13px !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
        margin-bottom: 0 !important;
        color: #666 !important;
    }

    .blog-card-meta span {
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
    }

    .blog-card-excerpt {
        font-size: 15px !important;
        line-height: 1.6 !important;
        margin: 0 !important;
        color: #555 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* Card "Ver todos" */
    .view-all-card {
        min-height: 180px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .view-all-content {
        text-align: center !important;
        padding: 30px 20px !important;
    }

    /* Busca no blog - FIX TOTAL */
    .blog-search,
    .sidebar-search,
    .search-widget,
    .sidebar-widget.search,
    #blog-search-form {
        padding: 0 !important;
        margin-bottom: 30px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .blog-search form,
    .sidebar-search form,
    .search-widget form,
    #blog-search-form {
        display: flex !important;
        gap: 8px !important;
        flex-direction: row !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        flex-wrap: nowrap !important;
    }

    .blog-search input[type="text"],
    .blog-search input[type="search"],
    .sidebar-search input,
    .search-widget input,
    #blog-search-input {
        flex: 1 !important;
        min-width: 0 !important;
        max-width: calc(100% - 88px) !important;
        padding: 10px 12px !important;
        font-size: 14px !important;
        border: 1px solid #ddd !important;
        border-radius: 5px !important;
        box-sizing: border-box !important;
    }

    .blog-search button,
    .blog-search input[type="submit"],
    .sidebar-search button,
    .search-widget button,
    #blog-search-form button {
        flex-shrink: 0 !important;
        width: 80px !important;
        min-width: 80px !important;
        max-width: 80px !important;
        padding: 10px 12px !important;
        font-size: 13px !important;
        background: #e8b116 !important;
        color: #fff !important;
        border: none !important;
        border-radius: 5px !important;
        cursor: pointer !important;
        font-weight: 600 !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }

    /* Paginação - separar da busca */
    .pagination,
    .blog-pagination,
    #pagination {
        margin-top: 40px !important;
        margin-bottom: 30px !important;
        padding: 20px 0 !important;
        display: flex !important;
        justify-content: center !important;
        gap: 8px !important;
        clear: both !important;
    }

    .pagination a,
    .pagination span,
    .blog-pagination a,
    .blog-pagination span {
        display: inline-block !important;
        min-width: 36px !important;
        height: 36px !important;
        line-height: 36px !important;
        text-align: center !important;
        padding: 0 10px !important;
        font-size: 14px !important;
        border-radius: 5px !important;
        background: #fff !important;
        border: 1px solid #ddd !important;
        color: #333 !important;
        text-decoration: none !important;
    }

    .pagination a:hover,
    .blog-pagination a:hover {
        background: #e8b116 !important;
        color: #fff !important;
        border-color: #e8b116 !important;
    }

    .pagination .current,
    .pagination .active,
    .blog-pagination .current,
    .blog-pagination .active {
        background: #e8b116 !important;
        color: #fff !important;
        border-color: #e8b116 !important;
    }
}

/* ==========================================================================
   5.1. PÁGINA DE POST INDIVIDUAL E SIDEBAR
   ========================================================================== */

@media (max-width: 768px) {
    /* Post individual - MELHORAR LARGURA */
    .post-article,
    .ftco-section .container,
    .blog-post-container {
        /* max-width: 100% !important; */
        /* padding: 20px 20px !important; */
        margin: 0 auto !important;
    }

    .post-header {
        padding: 0 !important;
        margin-bottom: 20px !important;
    }

    .post-title {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        margin-bottom: 15px !important;
    }

    .post-meta-info {
        flex-direction: column !important;
        gap: 8px !important;
        align-items: flex-start !important;
    }

    .post-categories {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .post-category {
        font-size: 12px !important;
        padding: 4px 12px !important;
    }

    .featured-image {
        width: 100% !important;
        height: auto !important;
        margin: 20px 0 !important;
        border-radius: 8px !important;
    }

    /* Conteúdo do post - MELHOR LEGIBILIDADE */
    .post-content,
    #post-content,
    article .post-content {
        max-width: 100% !important;
        font-size: 16px !important;
        line-height: 1.8 !important;
        padding: 0 !important;
    }

    .post-content p {
        margin-bottom: 19px !important;
        text-align: justify !important;
        margin: 10px;
    }

    .post-content h2 {
        font-size: 1.4rem !important;
        margin-top: 35px !important;
        margin-bottom: 15px !important;
        line-height: 1.3 !important;
        margin: 10px;
    }

    .post-content h3 {
        font-size: 1.2rem !important;
        margin-top: 25px !important;
        margin-bottom: 12px !important;
    }

    .post-content h4 {
        font-size: 1.1rem !important;
        margin-top: 20px !important;
    }

    .post-content img {
        max-width: 100% !important;
        height: auto !important;
        margin: 20px 0 !important;
        border-radius: 8px !important;
    }

    .post-content ul,
    .post-content ol {
        padding-left: 25px !important;
        margin-bottom: 18px !important;
    }

    .post-content li {
        margin-bottom: 10px !important;
        line-height: 1.7 !important;
    }

    .post-content blockquote {
        margin: 25px 0 !important;
        padding: 15px 20px !important;
        border-left: 4px solid #e8b116 !important;
        background: #f9f9f9 !important;
        font-style: italic !important;
    }

    /* Code blocks no mobile */
    .post-content pre {
        max-width: 100% !important;
        overflow-x: auto !important;
        margin: 20px 0 !important;
        padding: 15px !important;
        border-radius: 6px !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    .post-content code {
        font-size: 13px !important;
        word-wrap: break-word !important;
    }

    /* Sidebar */
    .sidebar,
    aside.sidebar,
    .blog-sidebar {
        width: 100% !important;
        /* padding: 30px 20px !important; */
        margin-top: 40px !important;
    }

    .sidebar-widget {
        margin-bottom: 30px !important;
        padding: 25px 20px !important;
        background: #fff !important;
        border-radius: 10px !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
    }

    .sidebar h3,
    .sidebar h4 {
        font-size: 1.3rem !important;
        margin-bottom: 20px !important;
        text-align: center !important;
        color: #333 !important;
        font-weight: 700 !important;
    }

    /* Widget de busca na sidebar - FIX TOTAL */
    .sidebar .blog-search,
    .sidebar .search-widget,
    .sidebar-widget.search,
    .sidebar #blog-search-form {
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .sidebar .blog-search form,
    .sidebar .search-widget form,
    .sidebar #blog-search-form {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        flex-wrap: nowrap !important;
    }

    .sidebar .blog-search input[type="text"],
    .sidebar .blog-search input[type="search"],
    .sidebar .search-widget input,
    .sidebar #blog-search-input {
        flex: 1 !important;
        min-width: 0 !important;
        max-width: calc(100% - 78px) !important;
        padding: 10px 12px !important;
        font-size: 14px !important;
        box-sizing: border-box !important;
        border: 1px solid #ddd !important;
        border-radius: 5px !important;
    }

    .sidebar .blog-search button,
    .sidebar .search-widget button,
    .sidebar #blog-search-form button {
        flex-shrink: 0 !important;
        width: 70px !important;
        min-width: 70px !important;
        max-width: 70px !important;
        padding: 10px 8px !important;
        font-size: 13px !important;
        background: #e8b116 !important;
        color: #fff !important;
        border: none !important;
        border-radius: 5px !important;
        font-weight: 600 !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }

    /* Sobre mim na sidebar */
    .sidebar .about-widget,
    .sidebar-widget.about,
    #sobre-mim {
        text-align: center !important;
        padding: 30px 25px !important;
    }

    .sidebar .about-widget img,
    .sidebar-widget.about img,
    #sobre-mim img {
        width: 140px !important;
        height: 140px !important;
        margin: 0 auto 20px auto !important;
        display: block !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        border: 4px solid #e8b116 !important;
    }

    .sidebar .about-widget p,
    .sidebar-widget.about p,
    #sobre-mim p {
        font-size: 15px !important;
        line-height: 1.7 !important;
        text-align: center !important;
        color: #555 !important;
        margin-bottom: 0 !important;
    }

    .sidebar .about-widget h3,
    .sidebar .about-widget h4,
    .sidebar-widget.about h3,
    .sidebar-widget.about h4 {
        margin-bottom: 15px !important;
        font-size: 1.4rem !important;
    }

    /* Tags na sidebar */
    .sidebar .tags-cloud {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .sidebar .tags-cloud a {
        font-size: 12px !important;
        padding: 6px 12px !important;
    }

    /* Posts recentes na sidebar */
    .sidebar .recent-posts {
        list-style: none !important;
        padding: 0 !important;
    }

    .sidebar .recent-posts li {
        margin-bottom: 15px !important;
        padding-bottom: 15px !important;
        border-bottom: 1px solid #e0e0e0 !important;
    }

    .sidebar .recent-posts li:last-child {
        border-bottom: none !important;
    }

    .sidebar .recent-posts a {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
}

/* ==========================================================================
   6. MELHORAR LEGIBILIDADE DE TEXTO
   ========================================================================== */

@media (max-width: 768px) {
    body {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }

    h1 {
        font-size: 1.8rem !important;
        line-height: 1.3 !important;
    }

    h2 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }

    h3 {
        font-size: 1.3rem !important;
        line-height: 1.3 !important;
    }

    p {
        font-size: 15px !important;
        line-height: 1.6 !important;
        margin-bottom: 15px !important;
    }

    /* Padding lateral em seções */
    section {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .section-heading h1 {
        font-size: 1.8rem !important;
    }

    .section-heading h2 {
        font-size: 1.4rem !important;
    }

    .section-heading p,
    .section-subtitle {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
}

/* ==========================================================================
   7. BANNER / HERO SECTION
   ========================================================================== */

@media (max-width: 768px) {
    /* Banner principal */
    #banner {
        height: auto !important;
        min-height: 500px !important;
        background-size: cover !important;
        background-position: center center !important;
    }

    #banner-content {
        height: 500px !important;
        min-height: 500px !important;
        padding: 100px 20px 40px 20px !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }

    #banner-content .col-38 {
        width: 100% !important;
    }

    #banner-content .section-heading {
        margin-bottom: 20px;
        padding: 0;
    }

    #banner-content .section-heading h1 {
        font-size: 1.4rem !important;
        line-height: 1.3 !important;
        text-align: left !important;
        margin-bottom: 15px !important;
        color: #fff !important;
        text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8),
                     -1px -1px 4px rgba(0, 0, 0, 0.6) !important;
        font-weight: 700 !important;
    }

    #banner-content .section-heading h2 {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        text-align: left !important;
        color: #fff !important;
        text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.8),
                     -1px -1px 3px rgba(0, 0, 0, 0.6) !important;
        font-weight: 600 !important;
    }

    #banner-content .scroll_icon {
        display: block !important;
        margin-top: 20px !important;
    }

    /* Seção Introduction - Corrigir texto indo para baixo */
    #introduction,
    .ftco-intro,
    .introduction-section {
        padding: 40px 20px !important;
    }

    #introduction .row,
    .ftco-intro .row {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
    }

    #introduction .col-3,
    #introduction .col-2-3,
    #introduction .col-2,
    #introduction [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
    }

    /* Cards de ícones lado a lado em 2 colunas no tablet */
    #introduction .col-2-3 {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    #introduction .icon-block,
    .media.services {
        text-align: center !important;
        padding: 25px 20px !important;
        background: #fff !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    }

    #introduction .icon {
        margin: 0 auto 15px auto !important;
        font-size: 2.5rem !important;
    }

    #introduction h4 {
        font-size: 1.25rem !important;
        margin-bottom: 12px !important;
        line-height: 1.3 !important;
    }

    #introduction p {
        font-size: 15px !important;
        line-height: 1.6 !important;
        margin-bottom: 0 !important;
    }

    /* Texto principal da introdução */
    #introduction > .row > .col-3 {
        order: -1 !important;
        margin-bottom: 30px !important;
    }
}

/* Tablet - 2 colunas para cards */
@media (min-width: 600px) and (max-width: 768px) {
    #introduction .col-2-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ==========================================================================
   8. FORMULÁRIO DE CONTATO
   ========================================================================== */

@media (max-width: 768px) {
    .contact-section,
    #contact {
        padding: 40px 20px !important;
    }

    .contact-section .row {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    .contact-section .col-2,
    .contact-section [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin-bottom: 30px !important;
    }

    #contact-form,
    .contact-form {
        max-width: 100% !important;
        padding: 0 !important;
        width: 100% !important;
    }

    #contact-form input,
    #contact-form textarea,
    .contact-form input,
    .contact-form textarea {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 15px !important;
        padding: 12px 15px !important;
        margin-bottom: 15px !important;
        box-sizing: border-box !important;
        border: 1px solid #ddd !important;
        border-radius: 5px !important;
    }

    #contact-form textarea,
    .contact-form textarea {
        min-height: 120px !important;
        resize: vertical !important;
    }

    #contact-form button,
    .contact-form button,
    #submit-btn {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 15px !important;
        padding: 15px 25px !important;
        margin-top: 10px !important;
        box-sizing: border-box !important;
    }

    /* Informações de contato (WhatsApp, etc) */
    .contact-info {
        margin-bottom: 25px !important;
    }

    .contact-info a {
        display: inline-block !important;
        margin: 10px 0 !important;
    }
}

/* Tablet - melhor layout */
@media (min-width: 769px) and (max-width: 1024px) {
    .contact-section {
        padding: 50px 30px !important;
    }

    #contact-form {
        max-width: 600px !important;
    }
}

/* ==========================================================================
   9. HEADER E MENU MOBILE - HAMBURGER ICON
   ========================================================================== */

@media (max-width: 1024px) {
    /* Header mobile */
    #header {
        height: 60px !important;
        min-height: 60px !important;
    }

    #header .row {
        padding: 0 15px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        height: 60px !important;
    }

    #header .col-1 {
        width: 100% !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    /* Logo - centralizada usando flex */
    #logo {
        flex: 1 !important;
        height: 60px !important;
        line-height: 60px !important;
        margin: 0 !important;
        text-align: center !important;
        order: 2 !important;
    }

    #logo img {
        max-height: 40px !important;
        vertical-align: middle !important;
        margin-left: 70px;
        margin-top: -20px;
    }

    /* Menu hambúrguer - fixo à direita usando margin-left: auto */
    #nav-trigger {
        display: block !important;
        width: 40px !important;
        height: 60px !important;
        position: relative !important;
        cursor: pointer !important;
        z-index: 9999 !important;
        margin-left: auto !important;
        order: 3 !important;
        flex-shrink: 0 !important;
    }

    /* Espaço vazio à esquerda para balancear */
    #logo::before {
        content: '' !important;
        width: 40px !important;
        height: 60px !important;
        display: inline-block !important;
        position: absolute !important;
        left: 0 !important;
    }

    #nav-trigger span {
        display: block !important;
        position: absolute !important;
        width: 26px !important;
        height: 2px !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        background: #111 !important;
        transition: all 0.3s ease !important;
    }

    #header.nav-solid #nav-trigger span {
        background: #333 !important;
    }

    /* Linha superior */
    #nav-trigger span:before {
        content: '' !important;
        display: block !important;
        position: absolute !important;
        width: 26px !important;
        height: 2px !important;
        background: #111 !important;
        top: -8px !important;
        left: 0 !important;
        transition: all 0.3s ease !important;
    }

    #header.nav-solid #nav-trigger span:before {
        background: #333 !important;
    }

    /* Linha inferior */
    #nav-trigger span:after {
        content: '' !important;
        display: block !important;
        position: absolute !important;
        width: 26px !important;
        height: 2px !important;
        background: #111 !important;
        top: 8px !important;
        left: 0 !important;
        transition: all 0.3s ease !important;
    }

    #header.nav-solid #nav-trigger span:after {
        background: #333 !important;
    }

    /* Quando menu está aberto - transformar em X */
    #nav-trigger span.open {
        background: transparent !important;
    }

    #nav-trigger span.open:before {
        top: 0 !important;
        transform: rotate(45deg) !important;
        background: #111 !important;
    }

    #nav-trigger span.open:after {
        top: 0 !important;
        transform: rotate(-45deg) !important;
        background: #111 !important;
    }

    #header.nav-solid #nav-trigger span.open:before,
    #header.nav-solid #nav-trigger span.open:after {
        background: #333 !important;
    }

    /* Menu mobile dropdown */
    nav#nav-mobile {
        position: absolute !important;
        top: 60px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 9998 !important;
    }

    nav#nav-mobile ul {
        display: none !important;
        background: #fff !important;
        box-shadow: 0 5px 10px rgba(0,0,0,0.1) !important;
        margin: 0 !important;
        padding: 10px 0 !important;
        width: 100% !important;
    }

    nav#nav-mobile ul.expanded {
        display: block !important;
    }

    nav#nav-mobile li {
        text-align: center !important;
        border-bottom: 1px solid #f0f0f0 !important;
        display: block !important;
        width: 100% !important;
    }

    nav#nav-mobile li:last-child {
        border-bottom: none !important;
    }

    nav#nav-mobile a {
        padding: 15px 20px !important;
        display: block !important;
        color: #333 !important;
        text-decoration: none !important;
    }

    nav#nav-mobile a:hover {
        background: #f5f5f5 !important;
    }
}

/* ==========================================================================
   10. FOOTER
   ========================================================================== */

@media (max-width: 768px) {
    /* Footer geral - reduzir espaçamento */
    footer,
    #landing-footer {
        padding: 30px 20px 20px 20px !important;
    }

    footer .row {
        margin-bottom: 15px !important;
    }

    footer .logo-footer {
        width: 180px !important;
        margin: 0 auto 20px auto !important;
    }

    footer .logo-footer img {
        width: 100% !important;
        height: auto !important;
    }

    .footer-social {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
        /* padding: 0 15px !important; */
        /* margin: 0 !important; */
    }

    .footer-social li {
        width: 100% !important;
        max-width: 280px !important;
        text-align: center !important;
        margin: 0 !important;
    }

    .footer-social li a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        padding: 12px 20px !important;
        width: 100% !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
    }

    .footer-social li a i {
        font-size: 18px !important;
    }

    /* Copyright */
    footer .copyright,
    footer p {
        font-size: 13px !important;
        line-height: 1.5 !important;
        margin: 15px 0 0 0 !important;
        padding: 0 !important;
    }
}

/* ==========================================================================
   10. MOBILE PEQUENO (max-width: 480px)
   ========================================================================== */

@media (max-width: 480px) {
    body {
        font-size: 14px !important;
    }

    h1 {
        font-size: 1.5rem !important;
    }

    h2 {
        font-size: 1.3rem !important;
    }

    h3 {
        font-size: 1.1rem !important;
    }

    /* Botões em mobile pequeno */
    .button,
    button,
    a.button {
        max-width: 280px !important;
        font-size: 13px !important;
        padding: 10px 18px !important;
    }

    .services-section {
        padding: 30px 10px !important;
    }

    .media.block-6 {
        padding: 20px 15px !important;
    }

    .blog-card-image {
        height: 200px !important;
    }

    .blog-card-title {
        font-size: 1.05rem !important;
    }

    .blog-card-content {
        padding: 15px !important;
    }

    .post-title {
        font-size: 1.3rem !important;
    }

    .sidebar-widget {
        padding: 15px !important;
    }

    #banner {
        min-height: 450px !important;
    }

    #banner-content {
        height: 450px !important;
        min-height: 450px !important;
        padding: 90px 15px 30px 15px !important;
    }

    #banner-content .section-heading {
        padding: 0;
    }

    #banner-content .section-heading h1 {
        font-size: 1.2rem !important;
        text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.9),
                     -1px -1px 4px rgba(0, 0, 0, 0.7) !important;
    }

    #banner-content .section-heading h2 {
        font-size: 0.85rem !important;
        text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.9),
                     -1px -1px 3px rgba(0, 0, 0, 0.7) !important;
    }

    /* Footer em mobile pequeno */
    footer,
    #landing-footer {
        padding: 25px 15px 15px 15px !important;
    }

    footer .logo-footer {
        width: 250px !important;
        margin: 0 auto 15px auto !important;
    }

    .footer-social {
        gap: 0px !important;
    }

    .footer-social li {
        max-width: 100px !important;
    }

    .footer-social li a {
        padding: 10px 16px !important;
        font-size: 13px !important;
        gap: 8px !important;
    }

    .footer-social li a i {
        font-size: 16px !important;
    }

    footer .copyright,
    footer p {
        font-size: 12px !important;
        margin-top: 12px !important;
    }
}