/*
 Theme Name: Ast-Template
 Description: Sistema de Design Independente - Bootstrap 5 Nativo.
 Author: Américo
 Version: 1.0.0
*/

/* 1. FUNDO DO NAVEGADOR */
body {
    background-color: #C5C5C5; 
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* 2. A DIV MÃE (O Bloco Branco Centralizado) */
.site-wrapper {
    display: flex !important;
    flex-direction: column;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0 !important;    /* FORÇA ZERO NO TOPO */
    margin-bottom: 0 !important; /* FORÇA ZERO NO FUNDO */
    width: 100% !important;
    max-width: 1400px !important;
    background-color: #FFFFFF !important;
    flex-grow: 1; 
    box-shadow: 0 0 40px rgba(0,0,0,0.1);
    float: none !important;
}

/* --- MENU DESKTOP --- */
ul.tpl-menu-lista {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    gap: 25px;
}

.tpl-menu-lista li a {
    display: inline-block;
    color: var(--MenuTextColor, #634CCE) !important; /* Mantém o texto branco */
    padding: 5px 0;           /* Removi o padding lateral que dava corpo ao botão */
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;          /* Aumentei um pouco para dar mais leitura */
    transition: 0.3s;
    background-color: transparent !important; /* GARANTE que não tenha fundo */
    border-radius: 0;         /* Remove arredondamento */
}

.tpl-menu-lista li a:hover {
    color: var(--MenuMouseOver, #634CCE) !important; /* Muda levemente a cor ao passar o mouse */
    filter: brightness(1.2);
    transform: none;           /* Removi o pulinho para ficar mais sóbrio */
}

/* --- MENU MOBILE --- */
.tpl-menu-lista-mobile {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tpl-menu-lista-mobile li a {
    display: block;
    background-color: var(--MenuMobileBgColor, #634CCE);
    color: #ffffff !important;
    padding: 12px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
}

/* Estilo do Menu Mobile Branco (TPL) */
#menuOp2 .tpl-menu-lista-mobile a {
    color: var(--MenuMobileTextColor) !important;
    display: block;
    padding: 10px 0;
    text-decoration: none;
    font-weight: bold;
    border-bottom: 1px solid #f0f0f0;
}

/* Remove a borda do último item para ficar limpo */
#menuOp2 .tpl-menu-lista-mobile li:last-child a {
    border-bottom: none;
}

/* --- RESPONSIVIDADE (Ajustada para zerar margens) --- */
@media (min-width: 1401px) {
    .site-wrapper {
        /* Removi as margens de 20px e o border-radius para colar na tela */
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        border-radius: 0; 
    }
}

/* Para o Footer */
footer {
    background-image: 
        linear-gradient(rgba(115, 30, 227, 0.95), rgba(99, 76, 206, 0.77)), 
        url('https://theperfectloops.com/wp-content/uploads/2026/04/BackgroundSeamless-512x512-v01.jpg');
    
    background-repeat: repeat;
    background-position: top left;
    background-size: 100px auto; /* Tamanho que você está experimentando */
}
header {
    /* O primeiro valor é a cor do overlay, o segundo é a sua imagem */
    background-image: 
        linear-gradient(rgba(115, 30, 227, 0.95), rgba(99, 76, 206, 0.77)), 
        url('https://theperfectloops.com/wp-content/uploads/2026/04/BackgroundSeamless-512x512-v01.jpg');
    
    background-repeat: repeat;
    background-position: top left;
    background-size: 100px auto; /* Tamanho que você está experimentando */
}

/* ---------------------------------------------------------------------------------------------------------------------------------------------------- */

/* Cor do número e do link (Estado Normal) */
.pagination .page-link {
    color: #634CCE !important; /* O roxo que você usa no TPL */
    background-color: #fff;
    border-color: #dee2e6;
}

/* Cor de quando você passa o mouse (Hover) */
.pagination .page-link:hover {
    color: #fff !important;
    background-color: #634CCE;
    border-color: #634CCE;
}

/* Cor do número da página onde você está (Ativo) */
.pagination .page-item.active .page-link {
    background-color: var(--TPL2) !important;
    border-color: var(--TPL2) !important;
    color: #fff !important;
}

/* Cor das setas e números desativados */
.pagination .page-item.disabled .page-link {
    color: #666;
    background-color: #f8f9fa;
}

/* Formulários----------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Centraliza o container oficial do Contact Form 7 */
.wpcf7 {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Estiliza o nosso container interno */
.tpl-newsletter-container {
    background-color: var(--TPL2);
    color: #fff;
    padding: 40px;
    border-radius: 25px;
    text-align: center;
    width: 100%;
    max-width: 600px; /* Ajuste a largura que você preferir */
}

/* Ajuste do grupo de entrada para não quebrar */
.custom-news-group {
    display: flex !important;
    width: 100%;
    max-width: 500px;
    margin: 0 auto 15px auto !important;
}

/* OBRIGATÓRIO: Faz o span do CF7 se comportar como coluna do Bootstrap */
.custom-news-group .wpcf7-form-control-wrap {
    flex-grow: 1;
}

.custom-news-group .form-control {
    border-radius: 10px 0 0 10px !important;
    border: none;
    padding: 12px 20px;
}

.custom-news-group .btn-dark {
    border-radius: 0 10px 10px 0 !important;
    padding: 0 25px;
    background-color: #212529;
    border: none;
}

.tpl-spam-text {
    display: block;
    opacity: 0.7;
    font-size: 0.8rem;
}

/*	MENU ------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* --- AJUSTE DEFINITIVO DO MENU TPL --- */

/* 1. Reduzir o espaço entre os itens (o gap de 25px era muito grande) */
ul.tpl-menu-lista {
    gap: 12px !important; /* Diminuído de 25px para 12px */
}

/* 2. Ajuste fino nos links para ganhar espaço horizontal */
.tpl-menu-lista li a {
    font-size: 15px !important;    /* Reduzi 1px (estava 16px) */
    padding: 5px 2px !important;   /* Mínimo de respiro lateral */
    white-space: nowrap !important; /* Garante que o texto não quebre linha */
}

/* 3. Ajuste do Submenu (Dropdown) */
/* Se você estiver usando o padrão do WP, os submenus aparecem em <ul> dentro da <li> */
.tpl-menu-lista li {
    position: relative;
}

/* Estilo básico para o submenu não quebrar o layout quando aparecer */
.tpl-menu-lista li ul {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    display: none; /* Esconde por padrão */
    padding: 10px;
    z-index: 999;
    min-width: 180px;
}

.tpl-menu-lista li:hover > ul {
    display: block; /* Mostra ao passar o mouse */
}

.tpl-menu-lista li ul li {
    display: block !important;
}

.tpl-menu-lista li ul li a {
    color: var(--TPL2, #634CCE) !important;
    font-size: 14px !important;
    display: block;
}
/*	/MENU ------------------------------------------------------------------------------------------------------------------------------------------------------------------- */


    /* O SEU AJUSTE CIRÚRGICO DO BURACO (223px) */
    .search-results-grid {
        display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; 
        padding: 223px 5px 40px 5px !important; margin-top: 65px !important; 
    }

    /* MODAIS E WIDGETS */
    /* MODAL TELA CHEIA */
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.98);
        z-index: 10000;
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center; 
        overflow-y: auto;
        padding: 20px !important;
    }
    /* Modal Clean */
    .modal-content-clean {
        background: #FFFFFF;
        width: 100%;
        max-width: 520px;
        padding: 40px 25px;
        border-radius: 20px;
        text-align: center;
        box-sizing: border-box;
    }
    .modal-content-clean h2 {
        font-size: 1.6rem !important;
        color: #1a1a1a;
        font-style: italic;
        font-weight: 900;
        margin-bottom: 25px;
        line-height: 1;
        white-space: nowrap; 
    }

    .modal-content-clean input[type="text"] {
        font-size: 2rem !important;
        padding: 20px !important;
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 20px;
        border: 2px solid #ddd;
        border-radius: 12px;
        text-align: center;
        font-weight: bold;
    }

    .modal-content-wrapper {
        width: 100%;
        max-width: 550px;
        text-align: center;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .modal-x-btn {
        font-size: 5rem;
        color: white;
        text-decoration: none;
        font-weight: bold;
        display: inline-block;
        margin-bottom: 20px;
        line-height: 1;
        cursor: pointer;
    }


    .btn-submit-tpl {
        background: var(--TPL2);
        color: white;
        border: none;
        padding: 22px;
        width: 100%;
        border-radius: 12px;
        font-weight: 900;
        text-transform: uppercase;
        font-size: 1.1rem;
        cursor: pointer;
    }

    .text-divider {
        color: #333;
        font-weight: 900;
        font-size: 1.0rem;
        margin: 20px 0;
        display: block;
    }

    /* ESTILO DO WIDGET ESTILO */
    .widget-estilo-container { width: 100%; }
    .widget-estilo-container .d-flex.align-items-center.justify-content-center { height: auto !important; padding: 18px 10px !important; }
    .widget-estilo-container h5.card-title { font-size: 35px !important; letter-spacing: 1px !important; margin: 0 !important; text-transform: uppercase !important; line-height: 1.2 !important; }
    .widget-estilo-container i.fa-music { font-size: 26px !important; margin-right: 12px; }
    .widget-estilo-container a.badge { font-size: 1.8rem !important; padding: 20px 35px !important; border-radius: 60px !important; margin: 10px !important; display: inline-block !important; }

    .modal-x-btn { font-size: 5rem; color: white; text-decoration: none; font-weight: bold; margin-bottom: 20px; cursor: pointer; }
    .text-divider { color: #333; font-weight: 900; font-size: 1.6rem; margin: 20px 0; display: block; }

    .widget-estilo-container { width: 100%; }
    .widget-estilo-container a.badge { font-size: 0.8rem !important; padding: 10px 35px !important; border-radius: 60px !important; margin: 10px !important; display: inline-block !important; }


    /* 4. O AJUSTE CIRÚRGICO DO AMÉRICO (O BURACO) */
    .mobile-loop-container {
        padding-top: 223px !important; 
        margin-top: 65px !important;  
        width: 100%;
        background-color: #FFFFFF;
        box-sizing: border-box;
    }

    /* 5. HERO CENTRALIZADO (CROP 5%) */
    .mobile-loop-hero {
        width: 100% !important;
        height: 400px !important; /* Define a altura no container pai */
        overflow: hidden !important;
        background-color: #ffffff !important; /* Se vazar algo, vaza branco! */
        margin: 0 !important;
        padding: 0 !important;
    }
    .mobile-loop-hero img {
        width: 100%; height: 50%; 
        object-fit: cover; position: absolute; top: 40%; left: 0;
        transform: translateY(-48%); display: block;
    }


    /* 6. CONTEÚDO MASSIVO */
    .mobile-details-body { padding: 45px 30px; }
    .mobile-date { font-size: 1.25rem; color: #777; margin-bottom: 20px; font-weight: 600; }
    .mobile-title { 
        font-size: 2rem; font-weight: 900; font-style: italic; color: #000; 
        line-height: 0.95; text-transform: uppercase; margin-bottom: 35px; letter-spacing: -1.5px;
    }
    .mobile-post-content { font-size: 1.4rem !important; line-height: 1.4; color: #111; margin-bottom: 60px; }
    .mobile-post-content p { margin-bottom: 35px; }

    /* 7. REDES E TAGS */
    .mobile-social-section, .mobile-tags-section { padding: 50px 0; border-top: 3px solid #f5f5f5; }
    .social-grid { display: flex; flex-wrap: wrap; gap: 45px; justify-content: center; margin-top: 30px; }
    .tag-cloud { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 30px; }
    .btn-tag-mobile { 
        padding: 20px 40px; background-color: var(--TPL2, #634CCE); color: #fff; 
        font-size: 1.6rem; font-weight: 800; text-decoration: none; border-radius: 60px; text-transform: uppercase;
    }
    .mobile-author { margin-top: 60px; font-size: 1.8rem; color: #333; }

    .loop-item-wrapper { display: flex; aspect-ratio: 1 / 1; }
    .loop-thumb { width: 100%; height: 100%; background-color: #111; display: flex; justify-content: center; align-items: center; overflow: hidden; position: relative; }
    .loop-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .loop-thumb::after { content: "\f04b"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: white; font-size: 1.5rem; position: absolute; opacity: 0.4; }

.android-folder-view {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important; 
        gap: 5px !important; 
        padding: 223px 5px 40px 5px !important;
        margin-top: 65px !important; 
        width: 100% !important;
        box-sizing: border-box !important;
    }

/* Estilo Bento para Títulos TPL --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */


.tpl-bento-header h2 {
    display: flex;
    align-items: center;
    width: 100%;
    font-family: 'Syne', sans-serif !important;
    font-weight: 800 !important;
    font-style: italic !important;
    font-size: clamp(2.4rem, 5vw, 4rem) !important;
    color: var(--TPL2, #634CCE) !important;
    margin: 0;
    line-height: 0.95;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    text-transform: uppercase;
    
    /* AQUI O POUPANÇA-FITNESS DA FONTE: */
    -webkit-text-stroke: 1.5px var(--TPL2); /* 1.5px já dá uma diferença brutal */
    paint-order: stroke fill;
}

/* O sinal de menos (Ajustado para acompanhar o peso novo) */
.tpl-bento-header h2::after {
    content: "";
    flex-grow: 1;
    height: 3px; /* Aumentei um pouco para não parecer fino perto do texto ultra-bold */
    background-color: var(--TPL2, #634CCE);
    margin-left: 15px;
    border-radius: 2px;
}
/* No Mobile, a gente diminui a espessura da linha */
@media (max-width: 768px) {
    .tpl-bento-header h2::after {
        height: 8px;
        margin-left: 15px;
    }
}

/* /Estilo Bento para Títulos TPL --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */


/* Estilização do botão de envio do CF7 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.wpcf7-submit {
    background-color: var(--TPL2) !important;
    color: #fff !important;
    border-radius: 50px !important;
    transition: opacity 0.3s ease;
}

.wpcf7-submit:hover {
    opacity: 0.9;
}

/* /Estilização do botão de envio do CF7 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* Esconde a área de resposta padrão do CF7 para não quebrar o layout ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Isso impede que a div de resposta desloque qualquer elemento na home */
.wpcf7-form.sent .wpcf7-response-output, 
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-response-output {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    position: absolute !important; /* Tira totalmente do fluxo de renderização */
}
/* Remove o spinner de carregamento que quebra o layout */
.wpcf7-spinner {
    display: none !important;
    visibility: hidden !important;
    margin: 0 !important;
    width: 0 !important;
}

/* Garante que a div de resposta não apareça de jeito nenhum */
.wpcf7-response-output {
    display: none !important;
}
/* Impede que mensagens de erro de validação desloquem o layout */
.tpl-newsletter-container .wpcf7-not-valid-tip {
    display: none !important;
}

/* Garante que o container não mude de tamanho */
.tpl-newsletter-container {
    height: auto !important;
    overflow: hidden !important;
}

/* Esconde qualquer resposta automática do plugin */
.wpcf7-response-output {
    display: none !important;
}
/* /Esconde a área de resposta padrão do CF7 para não quebrar o layout ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */


/* ============================================================
   ESTILO DEFINITIVO TPL - CABEÇALHO MOBILE (AJUSTE DE MARGENS)
   ============================================================ */

/* 1. REMOVE A BARRA DE ADMIN NO MOBILE */
@media (max-width: 600px) {
    #wpadminbar {
        display: none !important;
    }
    html {
        margin-top: 0 !important;
    }
    * html body {
        margin-top: 0 !important;
    }
}

/* 2. CONTAINER RAIZ DO HEADER */
#tpl-mobile-header-root {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 140px !important;
    background-color: #000000 !important;
    display: flex !important;
    z-index: 99999 !important;
    border-bottom: 2px solid #1a1a1a !important;
    overflow: hidden !important;
}

/* COLUNA DO LOGO */
#tpl-mobile-header-root .header-left-col {
    width: 110px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#tpl-main-logo-mobile {
    width: 80px !important;
    height: 80px !important;
    object-fit: contain !important;
}

/* COLUNA DA DIREITA (CONTEÚDO) */
#tpl-mobile-header-root .header-right-col {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    padding-right: 0 !important; /* Resetado para usar margens específicas nos filhos */
    justify-content: space-around !important;
}

/* --- LINHA 1: BOTÕES --- */
#tpl-mobile-header-root .nav-buttons-row {
    display: flex !important;
    flex-direction: row !important;
    
    /* >>> AJUSTE AQUI: Espaçamento entre os botões <<< */
    gap: 5px !important; 
    
    /* >>> AJUSTE AQUI: Margem no topo (afasta do teto) <<< */
    margin-top: 25px !important; 

    /* >>> AJUSTE AQUI: Margem à direita dos botões <<< */
    margin-right: 15px !important;
}

.nav-item-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-decoration: none !important;
    min-width: 60px !important;
}

/* >>> AJUSTE AQUI: Tamanho do ícone do botão <<< */
.nav-item-box i {
    font-size: 20px !important; 
    color: #ffffff !important;
    margin-bottom: 4px !important;
}

/* >>> AJUSTE AQUI: Tamanho do texto abaixo do ícone <<< */
.nav-item-box .btn-text {
    font-size: 8px !important; 
    color: #ffffff !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    text-align: center !important;
    line-height: 1 !important;
}

/* --- LINHA 2: TÍTULO (LOOPS) --- */
.page-title-row {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;

    /* >>> AJUSTE AQUI: Margem à direita do título <<< */
    margin-right: 25px !important; 
}

#tpl-header-title-main {
    color: #ffffff !important;
    font-weight: 950 !important;
    font-style: italic !important;
    text-transform: uppercase !important;
    line-height: 0.8 !important;
    letter-spacing: -2px !important;
    text-shadow: 2px 2px 0px #634CCE !important;
    display: block !important;

    /* >>> AJUSTE AQUI: Tamanho do título principal <<< */
    font-size: 1.5rem !important; 
}

/* --- LINHA 3: COMPLEMENTO (INFO) --- */
.info-row {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;

    /* >>> AJUSTE AQUI: Margem à direita da info <<< */
    margin-right: 15px !important; 
}

.tpl-info-text-style {
    color: #ffffff !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    
    /* >>> AJUSTE AQUI: Tamanho do texto de info <<< */
    font-size: 10px !important; 
}
/* 3. REMOÇÃO DA FAIXA PRETA NO MEIO */
/* Ajustamos o padding para 138px (encostar no border-bottom) e 
   forçamos o fundo a ser contínuo */
.mobile-loop-container, 
#main-content-mobile,
.android-folder-view { 
    padding-top: 78px !important; 
    background-color: transparent !important;
}

/* Garante que a lista de artistas não fique escondida sob o menu mobile */
.page-template-page-artistas-completo #main-content-mobile,
.page-template-page-artistas-completo .conteudo-artistas {
    padding-top: 140px !important;
    background-color: #000000; /* Ou a cor que preferir para o fundo da lista */
}

/* Esconde sidebar no mobile por segurança se o template não for exclusivo */
@media (max-width: 768px) {
    .page-template-page-artistas-completo .sidebar {
        display: none !important;
    }
}

/* CLASSES EXCLUSIVAS TPL MOBILE - WIDGET DE ESTILOS ======================================================================================================================================================================================================================================= */

/* Container da lista de botões na modal */
.tpl-m-estilo-list {
    width: 100% !important;
    text-align: center !important;
    padding: 10px !important;
}

/* O botão de estilo individual (badge) */
.tpl-m-badge-style {
    font-size: 0.85rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    color: #FFFFFF !important;
    background-color: #634CCE !important; /* Roxo TPL */
    padding: 12px 20px !important;
    border-radius: 50px !important;
    display: inline-block !important;
    text-decoration: none !important;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3) !important;

    /* >>> CONTROLE DE ENTRELINHAS (VERTICAL E HORIZONTAL) <<< */
    /* O primeiro valor (12px) afasta os botões de cima e baixo */
    /* O segundo valor (8px) afasta os botões dos lados */
    margin: 12px 8px !important; 
    
    line-height: 1 !important;
    border: none !important;
}

.tpl-m-badge-style:active {
    transform: scale(0.95) !important;
    background-color: #4b3a9c !important;
}

/* /CLASSES EXCLUSIVAS TPL MOBILE - WIDGET DE ESTILOS ======================================================================================================================================================================================================================================= */







/* --- COMPORTAMENTO EXCLUSIVO PARA CELULARES (TELAS PEQUENAS) --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */



@media (max-width: 767px) {
    
    /* 1. PERMITE QUE O OVERLAY ESCORREGUE CASO O CONTEÚDO SEJA GRANDE */
    .modal-overlay {
        /* FORÇA O MODAL A FICAR POR CIMA DO MENU DE 99999 */
        z-index: 999999 !important; 
        
        padding: 10px !important;
        justify-content: flex-start !important;
        overflow-y: auto !important;
    }

    /* 2. REDUZ AS MARGENS E O TAMANHO DA CAIXA BRANCA DO MODAL */
    .modal-content-clean {
        max-width: 92% !important; /* Deixa uma bordinha nas laterais no celular */
        padding: 20px 15px !important; /* Reduz o espaçamento interno pela metade */
        border-radius: 15px !important;
        margin-top: 20px !important; /* Garante que ele desgrude do teto do celular */
    }

    /* 3. DIMINUI O TAMANHO DOS TEXTOS E INPUTS PARA CABER NA TELA MINI */
    .modal-content-clean h2 {
        font-size: 1.2rem !important; /* Diminuído para não estourar */
        margin-bottom: 15px !important;
        white-space: normal !important; /* Permite quebrar linha se o título for longo */
    }

    .modal-content-clean input[type="text"] {
        font-size: 1.3rem !important; /* Diminuído de 2rem para 1.3rem */
        padding: 12px !important; /* Caixa de texto mais fina */
        margin-bottom: 15px !important;
    }

    .btn-submit-tpl {
        padding: 14px !important; /* Botão de buscar mais magro no celular */
        font-size: 1rem !important;
    }

    /* 4. REDUZ O TAMANHO DO BOTÃO DE FECHAR (X) PARA ELE NÃO SUBIR DEMAIS */
    .modal-x-btn {
        font-size: 3.5rem !important; /* Diminuído de 5rem para 3.5rem */
        margin-bottom: 10px !important;
    }
	
	
	
	
	
	
	
	
    .mobile-loop-hero {
        width: 100% !important;
        height: 400px !important; /* Define a Distância */
        overflow: hidden !important;
        background-color: #ffffff !important; /* Se vazar algo, vaza branco! */
        margin: 0 !important;
        padding: 0 !important;
    }
    .mobile-loop-hero img {
        width: 100%; height: 65%;  /* Altura da Imagem */
        object-fit: cover; position: absolute; top: 52%; left: 0; /* Distância do Topo da Imagem */
        transform: translateY(-50%); display: block;
    }


    /* 6. CONTEÚDO MASSIVO */
    .mobile-details-body { padding: 45px 30px; }
    .mobile-date { font-size: 1.25rem; color: #777; margin-bottom: 20px; font-weight: 600; }
    .mobile-title { 
        font-size: 2rem; font-weight: 900; font-style: italic; color: #000; 
        line-height: 0.95; text-transform: uppercase; margin-bottom: 35px; letter-spacing: -1.5px;
    }
    .mobile-post-content { font-size: 1.4rem !important; line-height: 1.4; color: #111; margin-bottom: 60px; }
    .mobile-post-content p { margin-bottom: 35px; }

    /* 7. REDES E TAGS */
    .mobile-social-section, .mobile-tags-section { padding: 50px 0; border-top: 3px solid #f5f5f5; }
    .social-grid { display: flex; flex-wrap: wrap; gap: 45px; justify-content: center; margin-top: 30px; }
    .tag-cloud { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 30px; }
    .btn-tag-mobile { 
        padding: 20px 40px; background-color: var(--TPL2, #634CCE); color: #fff; 
        font-size: 1.6rem; font-weight: 800; text-decoration: none; border-radius: 60px; text-transform: uppercase;
    }
    .mobile-author { margin-top: 60px; font-size: 1.8rem; color: #333; }		
}









/* ============================================================ -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
   GAUGE IPAD DE PÉ (PORTRAIT) - Resolução padrão de 768px até 1024px
   ============================================================ */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    
    /* iPad de pé */

    .mobile-loop-hero {
        width: 100% !important;
        height: 850px !important; /* Define a Distância */
        overflow: hidden !important;
        background-color: #ffffff !important; /* Se vazar algo, vaza branco! */
        margin: 0 !important;
        padding: 0 !important;
    }
    .mobile-loop-hero img {
        width: 100%; height: 80%;  /* Altura da Imagem */
        object-fit: cover; position: absolute; top: 52%; left: 0; /* Distância do Topo da Imagem */
        transform: translateY(-48%); display: block;
    }
}

/* ============================================================
   GAUGE IPAD DEITADO CORRIGIDO (Suporta iPad Pro, Air e Mini)
   ============================================================ */
@media (min-width: 768px) and (max-width: 1366px) and (orientation: landscape) {
    
    /* Ipad deitado */

    .mobile-loop-hero {
        width: 100% !important;
        height: 1225px !important; 
        overflow: hidden !important;
        background-color: #ffffff !important; 
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .mobile-loop-hero img {
        /* width: 100% !important; */
        height: 175% !important;  /* Nota: 10% vai esmagar bastante a foto, ajuste se precisar */
        object-fit: cover !important; 
        position: absolute !important; 
        top: 20% !important; 
        left: 0 !important; 
        transform: translateY(0%) !important; 
        display: block !important;
    }   
}

@media (max-width: 400px) {
	.mobile-loop-hero {
		width: 100% !important;
		height: 400px !important; /* Define a Distância */
		overflow: hidden !important;
		background-color: #ffffff !important; /* Se vazar algo, vaza branco! */
		margin: 0 !important;
		padding: 0 !important;
    }
    .mobile-loop-hero img {
        width: 100%; height: 50%;  /* Altura da Imagem */
        object-fit: cover; position: absolute; top: 40%; left: 0; /* Distância do Topo da Imagem */
        transform: translateY(-48%); display: block;
    }
}