/*
 * ====================================================================
 * I. ⚙️ LLAMA CORE - ESTILOS BASE (SIMPLIFICADO E MODULAR)
 * ====================================================================
 */

:root {
    /* ---------------------- CORES DE MARCA E TEXTO ---------------------- */
    --llama-color-title: #343a40;          /* Preto escuro (Títulos, Negrito) */
    --llama-color-text: #495057;           /* Cinza principal (Corpo de Texto) */
    --llama-color-secondary: #6c757d;      /* Cinza médio (Descrições, Texto Secundário) */
    --llama-color-link: #ff3902;           /* Link: Cor ajustada para ser mais visível */
    --llama-color-link-hover: #cc3002;     /* NOVO: Cor do link ao passar o mouse */
    
    /* ---------------------- CORES DE FUNDO E BORDAS ---------------------- */
    --llama-color-bg-subtle: #f0f0f0;      /* Fundo suave */
    --llama-color-bg-desc: #e9ecef;        /* Fundo de descrição/preço */
    --llama-color-bg-desc-links: #ede9ef;  /* Fundo de descrição (Links) */
    --llama-color-border: #e0e0e0;         /* Borda sutil */
    --llama-color-border-desc: #dee2e6;    /* Borda de descrição */
    --llama-color-white: white;            /* Branco */
    --llama-color-background: white;       /* NOVO: Fundo principal de módulos (equivalente a --llama-color-white usado antes) */

    /* ---------------------- CORES DE AÇÃO (BOTÃO) ---------------------- */
    --llama-color-action-button: #ffc107; /* Amarelo atrativo */
    --llama-color-action-text: #212529;   /* Cor do texto do botão (Preto escuro) */
    --llama-color-action-hover: #e0a800;  /* Amarelo mais escuro ao passar o mouse */

    /* ---------------------- TIPOGRAFIA E ESPAÇAMENTO ---------------------- */
    --llama-font-family: Arial, sans-serif;
}

/* Aplicação de estilos globais */
body {
    font-family: var(--llama-font-family);
    margin: 0;
    padding: 0;
    background-color: var(--llama-color-white);
}

/* --------------------------------------------------------------------
 * II. 🎨 ESTILOS DE PADRONIZAÇÃO (TÍTULOS, TEXTOS, LINKS)
 * -------------------------------------------------------------------- */

/* Estilo do link no título (para evitar underline duplo) */
.title-link { 
    text-decoration: none;
    color: inherit;
}
.title-link:hover { 
    text-decoration: underline;
}

/* Estilo para o link "Compre aqui" - HERDA DO CORE */
.backlinks-text-link,
.backlinks-text-link-horizontal {
    /* Herda propriedades de estilo do .llama-action-link do Core */
    padding: 10px 0 0 0; /* Propriedade específica */
    font-family: var(--llama-font-family);
    
    display: block;
    font-weight: 600;
    text-decoration: none;
    color: var(--llama-color-link);
    font-size: 1em;
}

.backlinks-text-link:hover,
.backlinks-text-link-horizontal:hover {
    text-decoration: underline;
    color: var(--llama-color-link-hover);
}

/* Estilo para textos de preço, descrição e créditos */
.backlinks-text {
    font-size: 0.9em;
    color: var(--llama-color-text);
    line-height: 1.4;
    margin: 0;
    font-family: var(--llama-font-family);
}

.backlinks-text b {
    color: var(--llama-color-title);
    font-weight: 700;
}

/* Título do Produto (Maior e em destaque) */
.text-container_titulo {
    font-size: 1.5em;
    font-weight: 700;
    color: var(--llama-color-title);
    line-height: 1.2;
    margin-bottom: 5px;
    font-family: var(--llama-font-family);
}

/* Estilo do Título para Posts/Links (Mantido do original) */
.posts_tabela-container h2 {
    color: var(--llama-color-title);
    font-size: 1.2em;
    margin: 0 0 5px 0;
}

/* --------------------------------------------------------------------
 * III. 🏷️ MÓDULO LLAMA ADS
 * -------------------------------------------------------------------- */

/* Contêiner de Imagens - AJUSTE CRÍTICO: USO DE FLEXBOX PARA ALINHAMENTO COLADO */
.ads_imagens-container {
    width: 100%;
    margin: 0; 
    /* CORREÇÃO CRÍTICA: Adiciona Flexbox */
    display: flex; 
    justify-content: center; /* Centraliza o par de 50% */
    align-items: flex-start; /* Alinha o conteúdo ao topo (se houver diferenças de altura) */
    font-size: initial; 
}

/* Link da Imagem ESQUERDA - Alinhada à direita em seu espaço (50% cada) */
.image-link-colado-esq {
    /* CORREÇÃO: Usa flex para distribuição */
    display: block; 
    flex: 1 1 50%; /* Ocupa 50% */
    text-align: right; /* Alinha a imagem dentro do seu espaço de 50% para a DIREITA (colado ao centro) */
    margin: 0; 
    padding: 0;
    vertical-align: top;
}

/* Link da Imagem DIREITA - Alinhada à esquerda em seu espaço (50% cada) */
.image-link-colado-dir {
    /* CORREÇÃO: Usa flex para distribuição */
    display: block; 
    flex: 1 1 50%; /* Ocupa 50% */
    text-align: left; /* Alinha a imagem dentro do seu espaço de 50% para a ESQUERDA (colado ao centro) */
    margin: 0; 
    padding: 0;
    vertical-align: top;
}

/* Imagens dentro dos links colados (Garante o 100% da largura do link) */
.bannerimage-colado,
.productimagem-colado {
    /* Garante que ocupe todo o espaço do link e seja responsiva */
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    padding: 0;
}

/* Tabela (Div) de Produto Único ou Item no Multiplus */
.ads_tabela-unica { 
    width: 100%; 
    max-width: 500px; 

    margin: 0 auto 20px auto; /* Centraliza + espaçamento inferior */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
    border-radius: 8px; /* Cantos arredondados */
    overflow: hidden; /* Garante que o box-shadow seja contido */
    background-color: var(--llama-color-background); 
}

/* Contêiner de Texto/Descrição */
.ads_descricao-llama { 
    width: 100%;
    /* CORREÇÃO: Usa padding para espaçamento interno */
    margin: 0; 
    padding: 10px; 
    box-sizing: border-box; /* Garante que padding não adicione largura */
    text-align: center;
}

/* Contêiner Principal do Módulo (Contém o ads_tabela-unica) */
.ads_tabela-container, 
.ads_tabela-container-horizontal { 
    max-width: 100%; /* Largura máxima para contêiner externo */
    margin: 0 auto;
    text-align: center;
    padding: 20px 10px;
}

/* MÓDULO HORIZONTAL (PRODUTO ÚNICO OU LISTA) */

/* Wrapper para o produto no layout horizontal */
.ads_produto-horizontal-wrapper { 
    display: flex; 
    align-items: center; /* Alinha verticalmente os elementos */
    background-color: var(--llama-color-background);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    border-radius: 8px;
    overflow: hidden;
    width: 100%; 
    margin: 0 auto 20px auto;
}

/* Ajuste para o logo no wrapper horizontal */
.ads_produto-horizontal-wrapper .posts_imagem-logo-llama-novo {
    /* Logo (20%) */
    flex: 0 0 20%; 
    max-width: 20%;
    padding: 15px;
    text-align: center;
}

/* Ajuste para o contêiner de imagens no wrapper horizontal */
.ads_produto-horizontal-wrapper .ads_imagens-container { 
    /* Imagens Coladas (40%) - Totaliza 60% com o Logo */
    flex: 0 0 40%; 
    max-width: 40%; 
    margin: 0;
    padding: 15px 0;
}

/* Ajuste para a descrição no wrapper horizontal */
.ads_produto-horizontal-wrapper .ads_descricao-llama { 
    /* Descrição (40%) - Ocupa o restante (100% - 20% - 40%) */
    flex: 1 1 40%; 
    text-align: left;
    padding: 15px;
}

/* Ajuste para a imagem única (productImage) no layout horizontal */
.ads_produto-horizontal-wrapper .ads_imagens-container img { 
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
}


/* --------------------------------------------------------------------
 * IV. 📰 MÓDULO LLAMA POSTS
 * -------------------------------------------------------------------- */

.posts_tabela-container {
    background-color: var(--llama-color-bg-subtle);
    border: 1px solid var(--llama-color-border);
    border-radius: 6px;
    margin-bottom: 10px;
    padding: 15px;
    text-align: left;
}

.posts_tabela-container span {
    display: block;
    margin-top: 5px;
    font-size: 0.8em;
    color: var(--llama-color-secondary);
}

.posts_tabela-container p {
    margin: 0;
    padding: 0;
}

/* --------------------------------------------------------------------
 * V. 🔗 MÓDULO LLAMA LINKS
 * -------------------------------------------------------------------- */

.links_tabela-container {
    margin-bottom: 15px;
    
    /* Restaurando estilos de contorno */
    background-color: var(--llama-color-bg-subtle);
    border: 1px solid var(--llama-color-border);
    border-radius: 6px;
    padding: 15px;
    
    /* Estilos de layout de coluna */
    display: flex;
    flex-wrap: wrap; 
    gap: 20px; /* Espaço entre os links */
}

.links_tabela-container h3 {
    color: var(--llama-color-title);
    font-size: 1.1em;
    border-bottom: 2px solid var(--llama-color-border);
    padding-bottom: 5px;
    margin-top: 15px;
    margin-bottom: 10px;
    
    /* Garante que o H3 ocupe 100% da largura no layout Flex */
    flex-basis: 100%; 
}

.llama-link-item {
    /* Largura padrão para 3 colunas em telas grandes */
    flex: 1 1 calc(33.333% - 13.333px); 
    
    padding: 5px 0;
    border-bottom: 1px dashed var(--llama-color-border);
}

.links_tabela-container p {
    margin: 0;
    padding: 0;
}

.links_tabela-container p a {
    color: var(--llama-color-link);
    text-decoration: none;
    font-weight: 600;
}

.links_tabela-container p a:hover {
    text-decoration: underline;
}

/* --------------------------------------------------------------------
 * VI. 🖼️ LOGO LLAMA
 * -------------------------------------------------------------------- */

.posts_imagem-logo-llama-novo {
    text-align: center;
    padding: 10px 0 0 0; 
    margin-bottom: 10px;
}

.posts_imagem-logo-llama-novo img {
    max-width: 100%;
    height: auto;
}

/* * ====================================================================
 * 7. MEDIA QUERIES (Garante Responsividade Total)
 * ====================================================================
 */

/* --------------------------------------------------------------------
 * BREAKPOINT BASE: LARGURAS > 750px (Desktops e Monitores)
 * -------------------------------------------------------------------- */
/* Garante que os containers não fiquem gigantes em telas muito largas */

/* Módulos Verticais (Ads, Posts) */
.ads_tabela-unica,
.posts_tabela-container { 
    max-width: 500px; 
    width: 100%;
    margin: 15px auto; /* Centraliza */
}

/* Módulo Horizontal (Ads) */
.ads_produto-horizontal-wrapper {
    max-width: 750px;
    margin: 15px auto;
}

/* Módulo Links - 3 Colunas Padrão para telas grandes (Regra já aplicada no V) */
.links_tabela-container {
    max-width: 750px;
    margin: 15px auto;
}


/* --------------------------------------------------------------------
 * BREAKPOINT: LARGURAS entre 501px e 768px (Tablets e Telas Médias)
 * -------------------------------------------------------------------- */
@media (min-width: 501px) and (max-width: 768px) { 
    /* Módulos Verticais (Ads, Posts) - Mantêm largura máxima, mas centralizados */
    .ads_tabela-unica,
    .posts_tabela-container { 
        width: 100%; 
        max-width: 100%; 
        margin: 0 auto 10px auto; 
    }
    
    /* Módulo Horizontal (Ads) - Transforma em Stack Vertical */ 
    .ads_produto-horizontal-wrapper { 
        width: 100%;
        max-width: 100%;
        margin: 0 auto 10px auto; 
        display: block; /* Volta para bloco vertical */
    }
    
    .ads_produto-horizontal-wrapper .posts_imagem-logo-llama-novo {
        flex-basis: auto; 
        max-width: 100%; 
        width: 100%;
    }

    .ads_produto-horizontal-wrapper .ads_imagens-container { 
        flex-basis: auto; 
        max-width: 100%; 
        width: 100%;
        padding: 15px;
    }

    .ads_produto-horizontal-wrapper .ads_descricao-llama { 
        flex-basis: auto;
        max-width: 100%; 
        text-align: center;
        padding: 15px;
    }
    
    /* Módulo Links - Passa para 2 colunas (Original) */
    .links_tabela-container {
        max-width: 700px;
        margin: 10px auto;
    }
    .llama-link-item {
        /* Largura para 2 colunas, subtraindo o gap de 20px */
        flex: 1 1 calc(50% - 10px); 
    }
    
    /* Reduz um pouco o padding interno dos containers (Original) */
    .ads_tabela-container, 
    .ads_tabela-container-horizontal,
    .posts_tabela-container { 
        padding: 10px;
    }
}

/* --------------------------------------------------------------------
 * BREAKPOINT: LARGURAS entre 251px e 500px (Celulares)
 * -------------------------------------------------------------------- */
@media (max-width: 500px) { 
    /* Módulos Verticais e Posts - Ocupam largura total com margens suaves */
    .ads_tabela-unica,
    .posts_tabela-container { 
        width: 95%; /* 95% para margem lateral */
        max-width: 100%; 
        margin: 10px auto; 
    }
    
    /* Módulo Links - 1 Coluna (Lista Vertical) */
    .links_tabela-container {
        width: 95%;
        max-width: 100%;
        margin: 10px auto;
    }
    .llama-link-item {
        /* Ocupa 100% da largura, forçando coluna única */
        flex: 1 1 100%; 
    }
    
    /* Reduz padding interno (Original) */
    .ads_tabela-container, 
    .ads_tabela-container-horizontal,
    .posts_tabela-container { 
        padding: 8px;
    }
    
    /* Ajusta tamanho da fonte dos títulos para telas menores (Original) */
    .text-container_titulo, 
    .posts_tabela-container h2 {
        font-size: 1.1em;
    }
    
    /* Ajusta tamanho da fonte do texto/descrição (Original) */
    .backlinks-text {
        font-size: 0.9em;
    }
}

/* --------------------------------------------------------------------
 * BREAKPOINT: LARGURAS <= 250px (Dispositivos Ultra-pequenos)
 * -------------------------------------------------------------------- */
@media (max-width: 250px) {
    /* Módulos Verticais e Posts - Ocupam largura total com margens mínimas */
    .ads_tabela-unica,
    .posts_tabela-container,
    .ads_produto-horizontal-wrapper,
    .links_tabela-container { 
        width: 100%; /* Largura total */
        max-width: 100%; 
        margin: 5px 0; /* Margem vertical mínima, horizontal zero */
        padding: 5px;
    }
    
    /* Módulo Links - Coluna Única em telas <= 250px */
    .llama-link-item {
        /* Garante 100% da largura na tela ultra-pequena */
        flex: 1 1 100%; 
    }
    
    /* Força fonte mínima para legibilidade */
    .text-container_titulo, 
    .posts_tabela-container h2 {
        font-size: 1em; 
    }
    .backlinks-text {
        font-size: 0.8em;
    }
    
    /* Remove padding interno onde for possível para maximizar espaço */
    .ads_tabela-container, 
    .ads_tabela-container-horizontal,
    .posts_tabela-container { 
        padding: 5px;
    }
}

/* ====================================================================
 * NOVO ESTILO: CENTRALIZAÇÃO DO BLOCO .logollamas (A pedido do usuário)
 * ==================================================================== */

.logollamas {
    /* Centraliza o conteúdo inline (o link <a> e a <picture>) */
    text-align: center;
    /* Garante que o contêiner ocupe a largura total */
    width: 100%;
    /* Adiciona margem vertical para separação */
    margin: 15px auto; 
    padding: 10px 0 0 0;
}

/* Garante que a imagem dentro seja responsiva */
.logollamas a picture img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* ====================================================================
 * NOVO ESTILO: FOOTER (A pedido do usuário)
 * ==================================================================== */

.footer {
    /* Centraliza o texto (conteúdo inline) */
    text-align: center;
    /* Reduz o tamanho da fonte para 50% do tamanho padrão (equivalente a 0.5em) */
    font-size: 1em;
    /* Adiciona um pequeno espaçamento no topo */
    padding: 5px 0;
    /* Garante que o texto use a cor padrão, se não estiver definido */
    color: var(--llama-color-secondary); 
}

/* Estilo para o link dentro do footer (mantendo a cor do link) */
.footer a {
    color: var(--llama-color-link); 
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
}