/* RESET DO DEFAULT */

html{
    font-size:22px;
}
html,body{
    height:auto !important;
    color:var(--lg-3) !important;
    overflow: auto !important;
    background-color:var(--ter) !important;
    background-image: url('../img/bg-header.avif');
    background-position: center;
    background-size:cover;
    background-attachment: fixed;
    font-weight: 400;
}

/* ALTER LANGUAGE */

.alter-language {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 980;
}
.language-switch {
    display: flex;
    align-items: center;
    background-color:var(--qui);
    color:  var(--ter);
    padding: 8px 8px;
    border-radius: 20px;
    font-size: .7rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.lang-label {
    font-weight: 600;
    margin: 0 6px;
    user-select: none;
}
#lang-toggle {
    display: none;
}
.switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 24px;
    background-color: var(--lg-1);
    border-radius: 13px;
    cursor: pointer;
    transition: background-color 0.3s;
}
.switch::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 2px;
    width: 20px;
    height: 20px;
    background-color: var(--pri);
    border-radius: 50%;
    transition: transform 0.3s;
}
#lang-toggle:checked + .switch {
    background-color: var(--ter);
}

#lang-toggle:checked + .switch::before {
    transform: translateX(20px);
}
.navbar-toggler {
    padding: 0.25rem 0.25rem;
    font-size: 0.8rem;
    width: 35px;
    height: 35px;
}
.navbar-toggler-icon {
    background-size: 20px 20px;
}

/* ELEMENTOS */

/* NAVBAR */

.navbar{
    background-color: var(--ter);
    background-image: var(--ter-grad);
    color: var(--lg-1);
    box-shadow: 0 10px 10px rgba(0,0,0,0.1);
}
.navbar-brand{
    font-size: 1rem;
}
.nav-link-btn-login img{
    width: 22px;
    margin-bottom: 4px;
    margin-right: 4px;
}

/* WHATSAPP */

.nav-whatsapp-link{
    display:flex;
    align-items:center;
    gap:7px;
    margin-left:10px;
    padding:8px 14px !important;
    border-radius:999px;
    background-color:#25d366;
    color:#102b19 !important;
    font-weight:700;
    transition:transform .2s ease, background-color .2s ease, box-shadow .2s ease;
    box-shadow:0 6px 16px rgba(0,0,0,.18);
}
.nav-whatsapp-link:hover,
.nav-whatsapp-link:focus-visible{
    background-color:#49e17d;
    color:#102b19 !important;
    transform:translateY(-1px);
    box-shadow:0 8px 20px rgba(0,0,0,.24);
}
.nav-whatsapp-link i{
    font-size:1.05rem;
}
.whatsapp-contact-section{
    padding:0 0 7%;
}
.whatsapp-contact-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
    padding:38px 42px;
    overflow:hidden;
    position:relative;
    border:1px solid rgba(255,255,255,.12);
    border-radius:20px;
    background:linear-gradient(135deg, rgba(49,52,57,.96), rgba(25,27,30,.96));
    box-shadow:0 18px 50px rgba(0,0,0,.22);
}
.whatsapp-contact-card::before{
    content:"";
    position:absolute;
    top:-90px;
    right:-60px;
    width:240px;
    height:240px;
    border-radius:50%;
    background:rgba(37,211,102,.1);
    pointer-events:none;
}
.whatsapp-contact-copy{
    position:relative;
    z-index:1;
}
.whatsapp-contact-eyebrow{
    display:block;
    margin-bottom:7px;
    color:#49e17d;
    font-size:.66rem;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;
}
.whatsapp-contact-card h2{
    margin-bottom:10px;
    color:var(--lg-1);
    font-size:1.65rem;
}
.whatsapp-contact-card p{
    max-width:720px;
    margin-bottom:8px;
    color:var(--lg-3);
    font-size:.82rem;
}
.whatsapp-contact-phone{
    color:var(--lg-1);
    font-size:.78rem;
    font-weight:600;
}
.whatsapp-contact-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-width:220px;
    padding:15px 22px;
    position:relative;
    z-index:1;
    border-radius:999px;
    background-color:#25d366;
    color:#102b19;
    font-size:.75rem;
    font-weight:700;
    box-shadow:0 10px 24px rgba(0,0,0,.22);
    transition:transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.whatsapp-contact-button:hover,
.whatsapp-contact-button:focus-visible{
    background-color:#49e17d;
    color:#102b19;
    transform:translateY(-2px);
    box-shadow:0 14px 30px rgba(0,0,0,.28);
}
.whatsapp-contact-button i{
    font-size:1.2rem;
}
.whatsapp-floating{
    display:flex;
    align-items:center;
    justify-content:center;
    width:64px;
    height:64px;
    position:fixed;
    right:20px;
    bottom:72px;
    z-index:980;
    border:3px solid rgba(255,255,255,.9);
    border-radius:50%;
    background-color:#25d366;
    color:#102b19;
    box-shadow:0 8px 26px rgba(0,0,0,.34);
    transition:transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.whatsapp-floating:hover,
.whatsapp-floating:focus-visible{
    background-color:#49e17d;
    color:#102b19;
    transform:scale(1.07);
    box-shadow:0 10px 30px rgba(0,0,0,.4);
}
.whatsapp-floating i{
    font-size:1.65rem;
    line-height:1;
}

/* PARÁGRAFO */

h1,h2,h3,h4,h5:not(.text-light){
    color: var(--pri);
    font-family: 'Anton';
    text-shadow: 4px 4px 6px rgba(0,0,0,0.2);
    letter-spacing: 2px;
}
h5{
    font-size: 1.1rem;
}

/* ELEMENTOS ÚNICOS */

.klaus-one{
    width: 100%;
    max-width: 440px;
    border-radius: 20px 20px 0 0;
}

.card-large-mv,.card-large-sp,.card-large-bk{
    background-color: rgba(181,140,110,.1);
}
.card-large-sp{
    padding: 20px 28px 24px 28px;
}
.card-large-bk{
    padding: 26px 30px;
}
.ebook-buy-btn{
    width: fit-content;
    padding: 14px 26px 14px 28px;
    font-weight: 600;
    border-radius: 10px;
    background-color: var(--ter);
    background-image: var(--ter-grad);
    color: var(--lg-1);
    box-shadow: 0 0 12px rgba(0,0,0,0.2);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    margin: 0 auto;
    letter-spacing: 2px;
    border: 3px solid var(--lg-3);
}
#popup-btn-cad,#popup-btn-ent{
    width: calc(100% / 2 - 10px);
    border:none;
    padding: 10px 0;
    color: var(--lg-1);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    letter-spacing: 2px;
    font-size: .75rem;
    border-radius: 6px;
}
#popup-btn-cad{
    background-color: var(--pri);
    background-image: var(--pri-grad);
}
#popup-btn-ent{
    background-color: var(--ter);
    background-image: var(--ter-grad);
}

/* FORMULARIO DE CADASTRO */

#popup-form #form-title-cad, #popup-form #form-title-log{
    text-align: center;
    margin: 10px 0 30px 0;
    color: var(--pri);
    text-shadow: none;
}
#popup-form .mb-3{
    width: calc(100% - 22px);
    padding-left:20px;
    border-left: 2px solid var(--pri);
    margin-bottom: 20px;
}
#popup-form .form-control {
    width: 100%;
}
#popup-form .form-control:focus {
    border-color: var(--pri);
    outline: none;
    box-shadow: none;
}
#popup-form .form-label {
    display: block;
    color: var(--pri);
    margin-bottom: 6px;
    font-weight: 600;
}
#pop-form input{
    color: var(--ter);
}
#popup-form .btn {
    background-image: var(--pri-grad);
    background-color: var(--pri);
    border: none;
    padding: 10px 0;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    letter-spacing: 2px;
    border-radius: 8px;
    font-size: .75rem;
    color: var(--lg-1);
    font-weight: 600;
    transition: 0.3s;
}
#popup-form input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color:var(--pri) !important;
    outline: none !important;
    background-color: var(--pri) !important;
    border:none !important;
    box-shadow: none !important;
    cursor: pointer;
}
#popup-form .form-check-label{
    color: var(--pri);
    font-weight: 600;
}
#look, #unlook{
    cursor: pointer;
}
#look{
    display: flex;
}
#unlook{
    display: none;
}
.return-msg-popup{
    width: 100%;
    padding: 20px 0 0 0;
    text-align: center;
    color: var(--ter);
}
.forgot-pass{
    margin-bottom: 20px;
    color: var(--pri);
}
#form-resenha{
    padding: 0 !important;
    margin: 0 !important;
}
#form-resenha input[type=email]{
    margin: 0 0 20px 0;
    width: calc(100%);
    padding-left: 10px;
    border:1px solid var(--lg-4);
    height: 46px;
    color: var(--dk-4);
    background-color: transparent;
}
#form-resenha button{
    width: 100%;
    background-image: var(--pri-grad);
    background-color: var(--pri);
    border: none;
    padding: 10px 0; 
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    letter-spacing: 2px;
    border-radius: 8px;
    font-size: .75rem;
    color: var(--lg-1);
    font-weight: 600;
    transition: 0.3s;
    height: auto;
}
.resenha-msg{
    padding-top:20px;
    display: none;
    color: var(--pri);
    text-align: center;
}
.input-verify{
    color: var(--pri);
}

/* BOOKS */

.books{
    width: 100%;
    flex-wrap: wrap;
    gap: 2rem;
}
.book{
    width: calc(100% / 3);
    border-radius: 6px;
    overflow: hidden;
    box-shadow:0 0 14px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
}
.book-thumbnail{
    position: relative;
    width: 100%;
    aspect-ratio: 3/4;
    overflow: hidden;
    background-color: var(--lg-1);
    background-image: url('../img/loading.gif');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 64px 64px;
}
.book-thumbnail img{
    width: 100%;
}
.book-thumbnail-mask{
    position: absolute;
    height: auto;
    width: 100%;
    text-align: center;
    transition: .2s;
    bottom:10px;
}
.book-thumbnail-mask div{
    width: fit-content;
    padding: 4px 10px;
    border-radius: 2px;
    background-color: var(--qua);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    opacity: .75;
    font-weight: 500;
    color: var(--lg-1);
}
.book-thumbnail:hover .book-thumbnail-mask{
    opacity: 0;
}
.book-info{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: var(--lg-3);
    overflow: hidden;
    width: 100%;
    padding: 0 20px 20px 20px;
    height: auto;
}
.book-name{
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    width: 100%;
    min-height: 120px;
    text-align: center;
    border-bottom: 1px solid var(--pri);
    font-family: 'Anton';
    margin-bottom: 16px;
    font-weight: 500;
    color: var(--dk-4);
}
.book-price-acrescimo{
    width:100%;
    text-align: center;
    padding-bottom:8px;
    color: var(--pri);
    font-weight: 500;
    margin: 0 auto;
}
.book-price{
    width:100%;
    text-align: center;
    color: var(--dk-4);
    font-weight: 600;
    padding-bottom:16px;
}
.book-price span:last-child{
    color: var(--pri);
}
.book-button{
    display: block;
    width: 100%;
    font-weight: 500;
    padding: 12px 0;
    margin-top: 10px;
    border: none;
    border-radius: 6px 6px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .2);
    transition: .6s;
    position: relative;
    overflow: hidden;
    text-align: center;
}
.book-button::after{
    content: "";
    position: absolute;
    top: 0;
    left: -110%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.15);
    transition: all 0.6s ease;
    transform: skewX(-30deg);
}
.book-button:hover::after{
    left: 110%;
}
.book-button:active{
    transform: scale(0.95);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.active{
    background: var(--ter);
    color: var(--lg-1);
}
.shortly{
    color: var(--lg-1);
    background: var(--pri);
    cursor:progress;
}

@media only screen and (max-width:960px) {
    html{
        font-size:20px !important;
    }
    .icon-home{
        display: block;
        margin:0 auto 50px auto;
       font-size: 3rem !important;
    }
    p,.align-justify{
        text-align: center !important;
    }
    .book{
        width: 100%;
        margin-bottom: 6%;
    }
    .book-name{
        min-height: auto;
        height: auto;
        padding: 30px 0;
    }
    .book:last-child{
        margin-bottom: 0;
    }
    .nav-whatsapp-link{
        width:fit-content;
        margin:10px 0 0;
    }
    .whatsapp-contact-section{
        padding-bottom:60px;
    }
    .whatsapp-contact-card{
        flex-direction:column;
        gap:26px;
        padding:34px 24px;
        text-align:center;
    }
    .whatsapp-contact-card p{
        text-align:center !important;
    }
    .whatsapp-contact-button{
        width:100%;
        min-width:0;
    }
    .whatsapp-floating{
        width:58px;
        height:58px;
        right:16px;
        bottom:66px;
    }
    .whatsapp-floating i{
        font-size:1.5rem;
    }
    .alter-language{
        right:16px;
        bottom:16px;
    }
}

/* ===========================================================================
   MARCA — sobreposição de 2026-09-07

   Alinha as páginas antigas (livros, book, missão, serviços) com a home nova.

   REGRA DESTE BLOCO: só estilo. Nenhuma classe, nenhum id e nenhum atributo
   data- é alterado, porque é deles que dependem o langs.js (traduz por id), o
   functions.js (liga .ebook-buy-btn ao Stripe) e os PHP em /functions.
   Mexer em CSS não pode partir a compra nem o login — e é por isso que a
   mudança foi feita assim, e não reescrevendo as páginas.

   Fica no fim do style.css de propósito: é a última folha a ser lida, por isso
   ganha do Bootstrap e do resto sem precisar de !important em quase nada. Onde
   há !important é porque o Bootstrap o usa primeiro (.bg-dark, .text-white).
   =========================================================================== */

:root{
  --mc-ambar:#F5A623;
  --mc-ambar-e:#C98A1E;
  --mc-carvao:#14181F;
  --mc-carvao-2:#1D232C;
  --mc-linha:rgba(255,255,255,.10);
  --mc-linha-f:rgba(255,255,255,.18);
  --mc-texto:#EDE9E2;
  --mc-texto-2:#A8B0BA;
  --mc-disp:"Bricolage Grotesque",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mc-sans:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mc-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

html,body{
  background:var(--mc-carvao) !important;
  color:var(--mc-texto) !important;
  font-family:var(--mc-sans) !important;
}
::selection{background:var(--mc-ambar); color:var(--mc-carvao)}

h1,h2,h3,h4,.book-name,.navbar-brand{
  font-family:var(--mc-disp) !important;
  letter-spacing:-.022em; font-weight:600 !important;
}
/* O título das páginas era âmbar berrante. Na home o âmbar é acento, não
   corpo de texto — os títulos passam a branco e o âmbar fica para o que
   interessa: preços e botões. */
h1.text-secondary-custom, .text-secondary-custom{ color:var(--mc-texto) !important }
#livros-titulo, #bookvalue-h1{ line-height:1.06; letter-spacing:-.028em }
#bookvalue-p-one{ color:var(--mc-texto-2) !important; max-width:56ch; margin-inline:auto }

/* ------------------------------------------------------------ navegação --- */
.navbar{
  background:var(--mc-carvao) !important;
  border-bottom:1px solid var(--mc-linha);
  padding-top:14px; padding-bottom:14px;
}
.navbar-brand span{ color:#fff; letter-spacing:-.02em }
.navbar .nav-link{
  font-family:var(--mc-sans) !important; font-weight:400;
  color:rgba(255,255,255,.72) !important; letter-spacing:0;
}
.navbar .nav-link:hover{ color:#fff !important }
/* "Entrar" com a mesma moldura âmbar da home */
.navbar .nav-link.nav-link-btn-login{
  color:var(--mc-ambar) !important;
  border:1px solid rgba(245,166,35,.42); border-radius:3px;
  padding:6px 14px !important; margin-left:6px;
}
.navbar .nav-link.nav-link-btn-login:hover{ background:var(--mc-ambar); color:var(--mc-carvao) !important }
/* O verde do WhatsApp brigava com o âmbar. Na home o botão de WhatsApp é
   âmbar; aqui fica igual, para o site ter uma cor de ação só. */
.navbar .nav-link.nav-whatsapp-link{
  background:transparent !important; color:var(--mc-ambar) !important;
  border:1px solid rgba(245,166,35,.42) !important; border-radius:999px;
  padding:6px 15px !important;
}
.navbar .nav-link.nav-whatsapp-link:hover{
  background:var(--mc-ambar) !important; color:var(--mc-carvao) !important;
}

/* O seletor de idioma passa a par de botões, como na home */
.alter-language{ background:transparent !important }
.language-switch .lang-label{
  font:600 11px/1 var(--mc-sans); letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.65);
}

/* ------------------------------------------------------------- livros --- */
.books{ gap:26px }
.book{
  background:var(--mc-carvao-2);
  border:1px solid var(--mc-linha);
  border-radius:5px; padding:22px 22px 24px; transition:border-color .16s ease;
}
.book:hover{ border-color:rgba(245,166,35,.45) }
.book-thumbnail img{ border-radius:3px }
.book-name{
  font-size:20px !important; line-height:1.2; color:#fff !important;
  margin-top:16px; text-align:center;
}
/* "ADQUIRA JÁ" era um berro em maiúsculas; passa a etiqueta discreta */
.adquira-ja{
  display:inline-block; font:600 10px/1 var(--mc-sans); letter-spacing:.14em;
  text-transform:uppercase; color:var(--mc-ambar-e);
  border:1px solid rgba(245,166,35,.3); border-radius:2px; padding:5px 9px;
  margin-top:12px;
}
.book-price{
  font-family:var(--mc-mono) !important; font-size:17px !important;
  color:var(--mc-ambar) !important; margin-top:12px; letter-spacing:-.02em;
  display:flex; align-items:baseline; gap:8px; justify-content:center;
}
.book-price .por-apenas{
  font-family:var(--mc-sans) !important; font-size:11px !important;
  letter-spacing:.12em; text-transform:uppercase; color:var(--mc-texto-2) !important;
}
/* Botão secundário: contorno, para não competir com o de comprar */
.book-button, .cta-book{
  display:inline-block; margin-top:18px;
  background:transparent !important; color:var(--mc-ambar) !important;
  border:1px solid rgba(245,166,35,.42) !important; border-radius:4px;
  padding:12px 20px !important; font:600 13px/1 var(--mc-sans) !important;
  letter-spacing:.04em; text-decoration:none;
}
.book-button:hover, .cta-book:hover{ background:var(--mc-ambar) !important; color:var(--mc-carvao) !important }

/* --------------------------------------------------- o botão de comprar ---
   Só aparência. A classe .ebook-buy-btn e o data-book ficam intactos — é por
   eles que o functions.js encontra o botão e sabe que livro é. */
.ebook-buy-btn{
  background:var(--mc-ambar) !important; color:var(--mc-carvao) !important;
  border:0 !important; border-radius:4px;
  padding:16px 30px !important;
  font:600 15px/1 var(--mc-sans) !important; letter-spacing:.01em;
  transition:background .16s ease;
}
.ebook-buy-btn:hover{ background:#FFB84D !important }
.ebook-buy-btn:focus-visible{ outline:2px solid #fff; outline-offset:3px }

/* --------------------------------------------------------- WhatsApp --- */
.whatsapp-contact-section{ background:transparent }
.whatsapp-contact-card{
  background:var(--mc-carvao-2); border:1px solid var(--mc-linha);
  border-radius:5px; padding:34px 32px;
}
.whatsapp-contact-eyebrow{
  font:600 10.5px/1 var(--mc-sans) !important; letter-spacing:.15em;
  text-transform:uppercase; color:var(--mc-ambar-e) !important;
}
.whatsapp-contact-card h2{ color:#fff !important; margin-top:12px }
.whatsapp-contact-card p{ color:var(--mc-texto-2) !important }
.whatsapp-contact-phone{ font-family:var(--mc-mono) !important; color:var(--mc-texto) !important }
.whatsapp-contact-button{
  background:var(--mc-ambar) !important; color:var(--mc-carvao) !important;
  border:0 !important; border-radius:4px; padding:14px 22px !important;
  font:600 14.5px/1 var(--mc-sans) !important;
}
.whatsapp-contact-button:hover{ background:#FFB84D !important }
.whatsapp-floating{
  background:var(--mc-ambar) !important; color:var(--mc-carvao) !important;
  box-shadow:0 6px 20px rgba(0,0,0,.4) !important;
}
.whatsapp-floating i{ color:var(--mc-carvao) !important }

/* ------------------------------------------------------------- popup --- */
.popup{
  background:var(--mc-carvao-2) !important; color:var(--mc-texto) !important;
  border:1px solid var(--mc-linha-f); border-radius:6px;
}
.popup-header{ border-bottom:1px solid var(--mc-linha) }
#popup-title{ font-family:var(--mc-disp) !important; font-weight:600; color:#fff }
.popup-btn-close{ color:var(--mc-texto-2) !important }
.popup-btn-close:hover{ color:#fff !important }
.popup-wallpaper{ background:rgba(10,12,16,.72) !important }
.popup input, .popup select{
  background:var(--mc-carvao) !important; color:var(--mc-texto) !important;
  border:1px solid var(--mc-linha-f) !important; border-radius:3px;
  font-family:var(--mc-sans) !important;
}
.popup button{ font-family:var(--mc-sans) !important }

/* ------------------------------------------------------------ rodapé --- */
footer.bg-dark, footer{
  background:var(--mc-carvao) !important; color:rgba(255,255,255,.45) !important;
  border-top:1px solid var(--mc-linha); padding:34px 0 !important;
}
footer.text-white{ color:rgba(255,255,255,.45) !important }

/* --- acrescentos feitos depois de ver as páginas no ar --------------------- */

/* O miolo do cartão vinha com um cinzento-claro herdado do desenho antigo, que
   fazia um painel pálido dentro de um cartão escuro. */
.book-thumbnail, .book-info{ background:transparent !important }
.book-info{ padding-top:4px }
.book-name{ margin-bottom:6px }
.book-price{ margin-bottom:4px }

/* A janela de compra continuava branca dentro de uma moldura escura, e a barra
   do título vinha com o laranja antigo. Os ids dos botões ficam intactos — é
   por #popup-btn-cad e #popup-btn-ent que o functions.js liga registo e
   entrada. */
.popup-header{ background:var(--mc-carvao) !important; border-bottom:1px solid var(--mc-linha) !important }
#popup-title{ color:var(--mc-ambar) !important; letter-spacing:.02em }
.popup-count{ background:var(--mc-carvao-2) !important; color:var(--mc-texto) !important }
.popup-count p, .popup-count label, .popup-count span{ color:var(--mc-texto) !important }
#popup-btn-cad{
  background:var(--mc-ambar) !important; color:var(--mc-carvao) !important;
  border:0 !important; border-radius:4px; font:600 13px/1 var(--mc-sans) !important;
  letter-spacing:.06em; padding:13px 20px !important;
}
#popup-btn-cad:hover{ background:#FFB84D !important }
#popup-btn-ent{
  background:transparent !important; color:var(--mc-ambar) !important;
  border:1px solid rgba(245,166,35,.42) !important; border-radius:4px;
  font:600 13px/1 var(--mc-sans) !important; letter-spacing:.06em; padding:13px 20px !important;
}
#popup-btn-ent:hover{ background:var(--mc-ambar) !important; color:var(--mc-carvao) !important }

/* ===========================================================================
   PÁGINA DE LIVRO — /book/estrategias_do_sucesso e /book/dominando_o_mundo

   Continua a valer a regra do bloco: só estilo. O que muda aqui é o
   ARRANJO, não o HTML — a página tem quatro blocos irmãos dentro de
   .container-small (título, capa, botão, descrição) e eu limito-me a
   colocá-los numa grelha de duas colunas. Se um dia o HTML mudar, o
   :has() deixa de encontrar o #bookvalue-h1, a grelha não se aplica e a
   página volta ao empilhado de hoje. Falha para o lado seguro.
   =========================================================================== */

/* O ícone do "Entrar" tem src relativo (./assets/img/login-icon.svg). Em
   /book/<livro> isso resolve para /book/assets/… e dá 404 — daí aparecer o
   texto alternativo "Login" ao lado da palavra "Entrar". Corrigir o caminho
   é mexer no PHP das páginas de livro, que está fora dos limites; e o ícone
   não faz falta nenhuma, porque a ligação já diz "Entrar". Esconde-se, e a
   barra fica igual à da home, que também não tem ícone. */
.navbar .nav-link-btn-login img{ display:none }

.container-small:has(#bookvalue-h1){
  max-width:1040px; margin-inline:auto;
  padding:66px 24px 84px !important;
  display:grid;
  grid-template-columns:302px minmax(0,1fr);
  column-gap:64px;
  align-items:start;
}

/* Os blocos vinham todos centrados e com .padding a abrir buracos de 100px
   entre eles. Numa página com um produto só, o centrado espalha o olho em
   vez de o conduzir: fica tudo alinhado à esquerda, numa coluna de leitura. */
.container-small:has(#bookvalue-h1) > *{
  padding:0 !important; margin:0 !important; text-align:left !important;
}
/* O style.css do site centra TODOS os <p> abaixo de 960px
   (@media … { p{ text-align:center !important } }). Numa página de texto isso
   dá prosa centrada no telemóvel, que é onde ela mais custa a ler. Aqui, e só
   aqui, desfaz-se. */
.container-small:has(#bookvalue-h1) p{ text-align:left !important }
.container-small:has(#bookvalue-h1) > :nth-child(1){ grid-column:2; grid-row:1 }
.container-small:has(#bookvalue-h1) > :nth-child(2){ grid-column:1; grid-row:1 / span 3 }
.container-small:has(#bookvalue-h1) > :nth-child(3){ grid-column:2; grid-row:2; margin-top:28px !important }
.container-small:has(#bookvalue-h1) > :nth-child(4){
  grid-column:2; grid-row:3;
  margin-top:34px !important; padding-top:28px !important;
  border-top:1px solid var(--mc-linha);
}

/* A revelação por scroll começa a opacidade 0 e só o JS a liga. Como a
   grelha muda o que está no ecrã ao carregar, forço a visibilidade: uma
   descrição de produto invisível é uma falha cara, e a animação vale pouco
   ao lado disso. */
.container-small:has(#bookvalue-h1) .scroll-reveal{
  opacity:1 !important; transform:none !important;
}

#bookvalue-h1{
  font-size:clamp(30px,4vw,46px) !important; line-height:1.04;
  margin:0 0 14px !important; padding:0 !important;
}
#bookvalue-p-one{
  margin:0 !important; max-width:50ch;
  font-size:17px; line-height:1.55; color:var(--mc-texto-2) !important;
}

/* A capa tinha max-width:260px em atributo style (que o CSS só apanha com
   !important) e a sombra genérica do Bootstrap. Passa a ocupar a coluna,
   com fio fino e sombra funda — igual às miniaturas da home. */
.container-small:has(#bookvalue-h1) > :nth-child(2) img{
  max-width:100% !important; width:100%; height:auto; display:block;
  border:1px solid var(--mc-linha-f); border-radius:4px;
  box-shadow:0 20px 44px rgba(0,0,0,.5) !important;
}

/* A descrição vem num <p> dentro de outro <p> — o browser fecha o de fora e
   sobra um vazio. Esconde-se o vazio e trata-se o resto como prosa. */
.container-small:has(#bookvalue-h1) > :nth-child(4) p{
  max-width:66ch; margin:0 !important;
  font-size:16.5px; line-height:1.7; color:var(--mc-texto-2) !important;
}
/* O texto vem num <p> dentro de outro <p>. O browser fecha o de fora e sobram
   dois <p> sem conteúdo — um com o id, outro só com espaços (e por isso o
   :empty não o apanha). Escondem-se os dois, senão fica uma margem no meio. */
.container-small:has(#bookvalue-h1) > :nth-child(4) p[id^="description_"]{ display:none }
.container-small:has(#bookvalue-h1) > :nth-child(4) p:empty{ display:none }

/* Os parágrafos vêm separados por <br><br><br>: três quebras, duas linhas em
   branco, buraco a mais. Esconde-se a terceira e sobra uma linha em branco —
   o espaço de parágrafo normal.

   Registo do que não resulta, para não voltar a tentar: fazer o <br> ser
   bloco com margem (display:block; height:0; margin-top) não funciona. O
   Chrome ignora o display no <br> e o efeito foi o contrário do desejado —
   as quebras desapareceram e os parágrafos colaram-se todos. */
.container-small:has(#bookvalue-h1) > :nth-child(4) br + br + br{ display:none }

@media (max-width:860px){
  .container-small:has(#bookvalue-h1){
    grid-template-columns:1fr; padding:40px 20px 60px !important;
  }
  .container-small:has(#bookvalue-h1) > *{ grid-column:1 !important; grid-row:auto !important }
  .container-small:has(#bookvalue-h1) > :nth-child(2){ margin-top:26px !important; max-width:232px }
  .container-small:has(#bookvalue-h1) > :nth-child(3){ margin-top:24px !important }
}

/* ------------------------------------------------------ listagem /livros --- */
#livros{ padding-top:60px !important; padding-bottom:74px !important }
#livros-titulo{ font-size:clamp(28px,3.6vw,42px) !important; text-transform:none }

/* ===========================================================================
   CABEÇALHO E RODAPÉ NOVOS — includes/topo.php e includes/rodape.php

   A partir daqui já não é só sobreposição: as páginas antigas passaram a
   incluir um cabeçalho e um rodapé próprios, iguais aos da home. Este bloco é
   o desenho deles. As regras do .navbar antigo ficam acima, inertes, para o
   caso de alguma página ainda não ter sido convertida.
   =========================================================================== */

/* O interruptor de idioma antigo continua no DOM — é a ele que o functions.js
   está ligado, e é ele que os botões PT/EN do cabeçalho acionam. Só deixa de
   se ver: dois seletores de idioma na mesma página é que não. */
.alter-language{ display:none !important }

.mc-topo{
  position:sticky; top:0; z-index:1030;
  background:var(--mc-carvao);
  border-bottom:1px solid var(--mc-linha);
}
.mc-env{
  max-width:1160px; margin:0 auto; padding:0 28px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  min-height:78px; flex-wrap:wrap;
}
.mc-marca{
  display:flex; align-items:center; gap:11px; text-decoration:none;
  font:600 18px/1 var(--mc-disp); letter-spacing:-.02em; color:#fff; white-space:nowrap;
}
.mc-marca img{ display:block; height:46px; width:auto }
@media (max-width:520px){ .mc-marca img{ height:34px } }

.mc-dir{ display:flex; align-items:center; gap:22px; flex-wrap:wrap }
.mc-itens{ display:flex; gap:24px; list-style:none; margin:0; padding:0; flex-wrap:wrap }
.mc-itens a{
  font:400 14.5px/1 var(--mc-sans); color:rgba(255,255,255,.72); text-decoration:none;
}
.mc-itens a:hover{ color:#fff }
.mc-entrar{
  font:400 14.5px/1 var(--mc-sans); color:var(--mc-ambar); text-decoration:none;
  border:1px solid rgba(245,166,35,.4); border-radius:3px; padding:7px 13px;
}
.mc-entrar:hover{ background:var(--mc-ambar); color:var(--mc-carvao) }
.mc-zap{
  font:400 14.5px/1 var(--mc-sans); color:var(--mc-ambar); text-decoration:none;
  border:1px solid rgba(245,166,35,.42); border-radius:999px; padding:7px 15px;
}
.mc-zap:hover{ background:var(--mc-ambar); color:var(--mc-carvao) }
.mc-linguas{
  display:flex; border:1px solid rgba(255,255,255,.2); border-radius:3px;
  overflow:hidden; flex:none;
}
.mc-linguas button{
  font:600 11px/1 var(--mc-sans); letter-spacing:.1em; text-transform:uppercase;
  padding:7px 10px; border:0; background:transparent; color:rgba(255,255,255,.6);
  cursor:pointer;
}
.mc-linguas button[aria-pressed="true"]{ background:var(--mc-ambar); color:var(--mc-carvao) }

/* Botão de menu, só em ecrãs estreitos */
.mc-abrir{
  display:none; width:42px; height:38px; padding:9px 8px; border:1px solid var(--mc-linha-f);
  border-radius:4px; background:transparent; cursor:pointer;
  flex-direction:column; justify-content:space-between;
}
.mc-abrir span{ display:block; height:2px; background:rgba(255,255,255,.8); border-radius:2px }
@media (max-width:900px){
  .mc-abrir{ display:flex }
  .mc-dir{
    display:none; width:100%; flex-direction:column; align-items:flex-start;
    gap:16px; padding:6px 0 22px;
  }
  .mc-dir.aberto{ display:flex }
  .mc-itens{ flex-direction:column; gap:14px }
  .mc-env{ padding-top:14px; padding-bottom:0 }
}

/* ------------------------------------------------------------- rodapé --- */
.mc-rodape{
  background:var(--mc-carvao); color:rgba(255,255,255,.6);
  padding:52px 0 60px; font-size:14px; line-height:1.7;
  border-top:1px solid var(--mc-linha);
}
.mc-rodape .mc-env{ display:block; min-height:0 }
.mc-rodape p{ margin:0; max-width:76ch }
.mc-rodape b{ color:#fff; font-weight:600 }
.mc-rodape a{ color:rgba(255,255,255,.8); text-underline-offset:3px }
.mc-rodape a:hover{ color:var(--mc-ambar) }
.mc-fim{
  margin-top:26px !important; padding-top:22px;
  border-top:1px solid var(--mc-linha); font-size:13px; color:rgba(255,255,255,.45);
}

/* ------------------------------------------- bloco de contacto no fim --- */
.mc-cta-botoes{ display:flex; align-items:center; gap:18px; flex-wrap:wrap }
.mc-cta-form{
  font:400 14px/1 var(--mc-sans); color:var(--mc-ambar-e); text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:.7px; white-space:nowrap;
}
.mc-cta-form:hover{ color:var(--mc-ambar) }

/* --- capa dos livros na listagem ------------------------------------------
   O width/height no HTML existe para a caixa ter área antes de a imagem
   chegar — sem isso o loading="lazy" via uma caixa de 0px e nunca pedia o
   ficheiro, e as capas do /livros não apareciam. Mas depois de carregar esse
   height fixo esmagava a imagem: as duas capas têm proporções diferentes
   (800×1250 e 1241×1755). Com height:auto, os atributos só reservam espaço e
   a proporção verdadeira manda assim que a imagem chega. */
.book-thumbnail img{
  width:auto; height:auto; max-width:100%; max-height:330px;
  margin-inline:auto;
}

/* A caixa da capa tinha altura fixa (508px) herdada do desenho antigo, e a
   capa limitada a 330 deixava 180px de vazio dentro de cada cartão — cada um
   passava dos 870px de altura. Com height:auto o cartão encolhe até ao que
   tem lá dentro. E o título da página vinha com a folga da classe .padding
   por cima e por baixo; corta-se a de baixo, que só afastava os livros. */
#livros .book-thumbnail{ aspect-ratio:auto; height:auto; align-items:flex-start }
#livros > .scroll-reveal.padding{ padding-top:0 !important; padding-bottom:30px !important }