/*
 * ====================================================================
 * LLAMA ADS - FOLHA DE ESTILO PRINCIPAL
 * ORGANIZAÇÃO: GERAL > SIMPLES/VERTICAL > HORIZONTAL > MÚLTIPLA (Placeholder)
 * ====================================================================
 */


/* --------------------------------------------------------------------
 * 1. ESTILOS GERAIS (APLICÁVEIS A QUALQUER LAYOUT)
 * -------------------------------------------------------------------- */

/* Estilo do link no título (para evitar underline duplo) */
.title-link {
    text-decoration: none; /* Remove sublinhado do link do título */
    color: inherit; /* Mantém a cor do H2 pai */
}

.title-link:hover {
    text-decoration: underline;
}

/* Estilo para o link "Compre aqui" */
.backlinks-text-link, 
.backlinks-text-link-horizontal { /* Aplica-se a ambas as versões */
    display: block; 
    font-weight: 600; 
    text-decoration: none;
    color: #007bff; 
    padding: 10px 0 0 0;
    font-size: 1em;
}

.backlinks-text-link:hover,
.backlinks-text-link-horizontal:hover {
    text-decoration: underline;
}

/* --------------------------------------------------------------------
 * 2. VARIAÇÃO: EXIBIÇÃO SIMPLES (VERTICAL/PADRÃO)
 * -------------------------------------------------------------------- */

/* Contêiner principal (Vertical) */
.tabela-container {
    background-color: #f7f7f7; 
    padding: 20px 0; 
}

/* Box do Produto (Tabela Única) */
.tabela-unica {
    width: 90%; 
    margin: 0 auto 20px auto; 

    background-color: white; 
    
    border-collapse: collapse;
    border: 1px solid #e0e0e0; 
    border-radius: 4px; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); 
    
    display: flex;
    flex-direction: column; 
}

/* CONTÊINER PRINCIPAL DAS IMAGENS (Horizontal dentro do layout Vertical) */
.imagens-container {
    display: flex; /* Habilita Lado a Lado */
    padding: 0; 
    width: 100%; 
    line-height: 0; 
}

.image-link {
    flex: 1; /* Faz as imagens ocuparem 50% cada */
    display: block;
    margin: 0; 
    padding: 0;
}

/* IMAGENS RESPONSIVAS (Vertical) */
.bannerimage, .productimagem {
    max-width: 100%; 
    height: auto;    
    display: block;
    margin: 0; 
    border-radius: 0; 
    box-shadow: none; 
}

/* Garantia de bordas arredondadas no topo */
.tabela-unica .bannerimage {
    border-top-left-radius: 4px; 
}

.tabela-unica .productimagem {
    border-top-right-radius: 4px; 
}

/* Descrição e Texto (Vertical) */
.descricao-llama {
    width: 90%; 
    margin: 10px auto 25px auto; 
    
    background-color: #e9ecef;
    padding: 20px; 
    border: 1px solid #dee2e6; 
    border-radius: 4px; 
    box-shadow: 0 1px 2px rgba(0,0,0,0.08); 

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 
    color: #495057; 
    font-size: 1em;
    line-height: 1.6; 
    font-weight: 400; 
}

.descricao-llama b {
    font-weight: 700; 
    color: #343a40; 
}

/* Título (Vertical) */
.text-container_titulo {
    font-size: 1.5em; 
    margin-top: 0; 
    margin-bottom: 10px; 
    color: #343a40; 
    line-height: 1.3;
}

.text-container_titulo b {
    font-weight: 700;
}

/* Texto de Backlinks/Descrição (Vertical) */
.backlinks-text {
    margin: 4px 0; 
    font-size: 1em; 
    color: #6c757d; 
}

/* Estilos do Logo (Vertical) */
.container-logo-llama {
    text-align: center; 
    width: 90%; 
    margin: 0 auto 20px auto; 
    padding: 20px 0; 
}

.container-logo-llama a {
    display: inline-block; 
    line-height: 0;
}

.imagem-logo-llama {
    max-width: 100%; 
    height: auto; 
    display: block; 
    margin: 0 auto;
    max-height: 210px; 
    opacity: 0.9; 
}

/* --------------------------------------------------------------------
 * 3. VARIAÇÃO: HORIZONTAL (LAYOUT DE TABELA 1x3)
 * -------------------------------------------------------------------- */

/* Contêiner principal (Horizontal) */
.tabela-container-horizontal {
    background-color: #f7f7f7; 
    padding: 20px 0; 
}

/* A Tabela em si e o Wrapper */
.produto-horizontal-wrapper table {
    width: 90%; 
    margin: 0 auto 20px auto; /* Centraliza a tabela */
    background-color: white; 
    border-collapse: collapse; 
    border: 1px solid #e0e0e0; 
    border-radius: 4px; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); 
}

.produto-horizontal-wrapper tr {
    display: table-row;
    width: 100%;
}

/* Estilos BÁSICOS de Células (Colunas) */
.produto-horizontal-wrapper td {
    padding: 10px; 
    vertical-align: top; 
    border: none; 
}

/* DEFINIÇÕES DE LARGURA POR COLUNA (CONFORME SOLICITADO) */

/* Coluna 1: Logo Llama (10%) */
.produto-horizontal-wrapper td:nth-child(1) {
    width: 10%; 
    min-width: 60px; 
    text-align: center;
    padding-left: 15px;
    padding-right: 5px;
}

/* Coluna 2: As Duas Imagens (45%) */
.produto-horizontal-wrapper td:nth-child(2) {
    width: 45%; 
    padding: 0; 
    line-height: 0; 
}

/* Coluna 3: Título, Descrição e Preço (45%) */
.produto-horizontal-wrapper td:nth-child(3) {
    width: 45%; 
    padding-right: 15px;
    padding-left: 5px;
}

/* IMAGENS E LOGO NA HORIZONTAL */

.logo-horizontal {
    max-width: 100%;
    height: auto;
    max-height: 60px; 
    display: block;
    margin: 0 auto;
    opacity: 0.9; 
}

.bannerimage-horizontal, .productimagem-horizontal {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0;
}

/* DESCRIÇÃO E TEXTO NA HORIZONTAL */

.descricao-llama-horizontal {
    padding: 0; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 
    color: #495057; 
}

.text-container_titulo-horizontal {
    font-size: 1.5em; 
    margin-top: 0; 
    margin-bottom: 5px; 
    color: #343a40; 
    line-height: 1.3;
}

.backlinks-text-horizontal {
    margin: 4px 0; 
    font-size: 0.95em; 
    color: #6c757d; 
}

.preco-horizontal {
    font-weight: 600;
    color: #343a40;
    margin-bottom: 5px;
}

.backlinks-text-link-horizontal {
    padding: 5px 0 0 0;
    font-size: 0.9em;
}

/* --------------------------------------------------------------------
 * 4. MEDIA QUERIES PARA RESPONSIVIDADE (APLICADO AO LAYOUT HORIZONTAL)
 * -------------------------------------------------------------------- */

@media (max-width: 600px) {
    /* Força a tabela a se comportar como blocos empilhados */
    .produto-horizontal-wrapper table,
    .produto-horizontal-wrapper tr {
        display: block; 
        width: 100%;
    }

    /* Cada célula (coluna) se torna um bloco de largura total */
    .produto-horizontal-wrapper td {
        display: block; 
        width: auto !important; /* Sobrescreve as larguras de 45% */
        padding: 10px 15px; 
        text-align: left;
    }

    /* Ajuste para o bloco de imagens (para não ter padding extra) */
    .produto-horizontal-wrapper td:nth-child(2) {
        padding: 0; 
    }
    
    /* Centraliza o logo no celular */
    .produto-horizontal-wrapper td:nth-child(1) {
        text-align: center;
        padding-top: 15px;
    }
}

/* --------------------------------------------------------------------
 * ESTILO ADICIONAL: Footer e Créditos
 * -------------------------------------------------------------------- */
.backlinks-text.footer-credits {
    /* Centralização: max-width + margin: 0 auto */
    max-width: 1000px; /* Garante a largura máxima de 1000px */
    margin: 0 auto;    /* Centraliza o bloco na tela */
    
    /* Alinhamento do Conteúdo Interno */
    text-align: center; /* Centraliza o texto e os elementos inline dentro do bloco */
    
    /* Font e Estilo */
    font-size: 0.9em; /* Torna a fonte um pouco menor que o padrão de 1em */
    line-height: 1.5; /* Melhora a leitura */
    padding: 15px 15px 10px 15px; /* Adiciona um respiro interno */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 
    color: #495057; 
}