/* BASE */
html, body {
  overflow-x: hidden;
}

body {
    margin: 0;
    font-family: 'Merriweather', serif;
    background-color: #E5E4E2;
}

/* CONTAINER */
.mobile-container {
    max-width: 95%;
    margin: auto;
}

/* BOOK SECTION */
.book-section {
    text-align: center;
    max-width: 700px;
    margin: auto;
    padding: 20px;
}


.book-cover {
    width: 100%;
    max-width: 675px; /* Aumentado em 50% (era 450px) */
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}


/* Efeito opcional: a sombra aumenta levemente ao passar o mouse */
.book-cover:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
}
/* Agora aplicamos ao 'p' dentro da div */
.book-description p {
    text-align: justify;
    line-height: 1.6;
    font-size: 1rem;
    margin: 0; /* Remove o espaço automático entre parágrafos */
    text-indent: 2em; /* O recuo que você deseja */
    padding-bottom: 5px; /* Um ajuste fino de respiro, opcional */
}

/* 1. CONTAINER DO GRUPO (Obrigatório para alinhar lado a lado) */
.button-group {
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center;     /* Alinha as bases dos botões */
    gap: 15px;               /* Espaço fixo entre eles */
    margin: 25px 0;          /* Espaço externo em cima e embaixo */
    width: 100%;
}

/* 2. ESTILO DOS BOTÕES (Limpo e unificado) */
.sample-button,
.amazon-button {
    flex: 1;                 /* Faz os dois terem a mesma largura proporcional */
    max-width: 180px;        /* Largura máxima elegante */
    padding: 12px 0;         /* Padding vertical constante */
    border-radius: 5px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    transition: 0.3s;
    text-decoration: none;   /* Remove sublinhado do link */
    text-align: center;      /* Centraliza o texto */
    font-size: 14px;
    display: block;          /* Importante para o Flexbox interno */
}

/* 3. CORES ESPECÍFICAS */
.sample-button {
    background: #007bff;
    color: #fff;
}

.sample-button:hover {
    background: #0056b3;
}

.amazon-button {
    background: #ff9900;
    color: #fff;
}

.amazon-button:hover {
    background: #e68a00;
}

/* 1. Ajuste no bloco principal */
.sample-text {
    display: none;
    background: #fdf8f1;
    padding: 10px;
    
    /* ALTERAÇÃO: Trocamos o 'auto' para controlar as laterais separadamente */
    margin: 10px 2% 10px 0; /* 0 na esquerda para colar mais, e 2% na direita para afastar das abas */
    
    border-left: 5px solid #007bff;
    border-radius: 8px;
    text-align: justify;
    
    /* AJUSTE: Reduzimos de 98% para 94% para garantir que não encoste na borda direita das abas */
    max-width: 99%; 

    white-space: normal; 
    line-height: 1.6;
    font-family: 'Merriweather', serif;
    font-size: 1.1rem;
}

/* 2. ADICIONE ESTA REGRA NOVA PARA OS PARÁGRAFOS */
.sample-text p {
    margin: 0 0 10px 0; /* Margem de apenas 10px na parte de baixo de cada parágrafo */
    text-indent: 1.8em;  /* O recuo deve ficar aqui para funcionar em todos os <p> */
}

.sample-text.show {
    display: block;
}



@media screen and (max-width: 600px) {
    .mobile-container {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: auto;
        padding-right: 50px; /* reserva espaço para as abas */
    }
}

	
	
	
    .sample-text {
        /* Puxa a div para a esquerda removendo a centralização */
        margin-left: 5px !important; 
        
        /* Abre um espaço na direita para as abas não sobreporem o texto */
        margin-right: 40px !important; 
        
        /* Ajusta a largura para compensar a margem da direita */
        width: calc(100% - 50px) !important;
        max-width: none !important;
        
        padding: 15px 10px !important;
    }


    /* 2. Alarga a div da amostra para 98% da largura disponível */
    .sample-text {
        width: 98% !important;
        max-width: 98% !important;
        padding: 15px 10px !important; /* Texto interno chega mais perto das bordas */
		
        margin: 10px 60px 10px 0 !important;
        border-radius: 4px; /* Cantos menos arredondados em telas pequenas */
    }

    /* 3. Ajusta os parágrafos para não ficarem tão apertados no celular */
    .sample-text p {
        font-size: 1rem; /* Fonte levemente menor para celulares */
        line-height: 1.5;
    }

/* RESPONSIVE */
@media (min-width: 1024px) {
    .mobile-container {
        
        width: 100%;
    }
}


.see-also {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px double #dcdcdc; /* Linha dupla fina estilo editorial */
    text-align: center;
}

.see-also small {
    display: block;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #777;
    margin-bottom: 10px;
}

.see-also-links {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.see-also-links a {
    font-size: 0.9rem;
    color: #007bff;
    text-decoration: none;
    transition: 0.3s;
    border-bottom: 1px solid transparent;
}

.see-also-links a:hover {
    color: #0056b3;
    border-bottom: 1px solid #0056b3;
}

/* Separador visual entre os links (opcional) */
.see-also-links a:not(:last-child)::after {
    content: "•";
    margin-left: 15px;
    color: #ccc;
    pointer-events: none;
}
/* FORÇAR TAMANHO DO CARROSSEL EM 50% A MAIS */
.book-carousel {
    max-width: 100% !important; /* Libera o container pai */
    padding: 40px 0;
}

.carousel-track {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px; /* Espaço entre as capas */
    width: 600px !important;
}

/* Alvo direto nos links e imagens do carrossel */
.carousel-track a img {
    width: 600px !important;  /* Força a largura para 300px (50% maior que o padrão comum) */
    height: auto !important;
    max-width: none !important; /* Remove qualquer trava de segurança */
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    transition: transform 0.3s ease;
}

/* Ajuste específico para Celular (Mobile) */
@media screen and (max-width: 600px) {
    .carousel-track a img {
        width: 180px !important; /* No celular também aumentamos para não ficar minúsculo */
        gap: 15px;
    }
}

/* Estilo das Abas Laterais */
.side-tabs-container {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tab-button {
    background-color: #04AA6D;
    color: white;
    padding: 15px 10px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    cursor: pointer;
    border: none;
    border-radius: 5px 0 0 5px;
    font-weight: bold;
    box-shadow: -2px 0 5px rgba(0,0,0,0.3);
    transition: 0.3s;
}
/* Container Principal */
/* Estilo da Nova Div de Info Kindle */
.kindle-info-box {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    margin: 20px auto;
    max-width: 700px;
    gap: 15px;
}

.info-column {
    flex: 1;
    text-align: center;
}

.info-column p {
    font-size: 0.9rem;
    margin-bottom: 10px;
    color: #333;
}

.store-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.store-buttons img {
    height: 35px; /* Tamanho elegante para os logos */
    transition: transform 0.2s;
}

.store-buttons img:hover {
    transform: scale(1.05);
}

.divider {
    width: 1px;
    height: 60px;
    background-color: #ccc;
}

.amazon-direct-link {
    display: inline-block;
    background-color: #ff9900;
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 0.85rem;
    transition: background 0.3s;
}

.amazon-direct-link:hover {
    background-color: #e68a00;
}

/* Ajuste para Celular */
@media screen and (max-width: 600px) {
    .kindle-info-box {
        flex-direction: column;
    }
    .divider {
        width: 80%;
        height: 1px;
    }
}