/* =========================================================
   Black Friday: ajustes sobre o visual da página do livro (style.css)
   Vermelho só em urgência e escassez, verde nos botões,
   fundo branco, azul escuro #16354D.
   ========================================================= */
:root {
  --color-red: #B42318;
  --color-red-light: #FEF1F0;
  --color-green: #1F8A4C;
  --color-green-hover: #176B3B;
}
html, body { background-color: var(--color-white); }
#oferta { scroll-margin-top: 3.5rem; }

/* Botões verdes */
.btn-green {
  background-color: var(--color-green);
  color: var(--color-white);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 10px 24px rgba(31, 138, 76, 0.28);
}
.btn-green:hover {
  background-color: var(--color-green-hover);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(31, 138, 76, 0.32);
}
.selo-garantia {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-warm-gray-light);
}
.selo-garantia svg { width: 20px; height: 20px; color: var(--color-green); flex-shrink: 0; }
.selo-centro { display: flex; justify-content: center; margin-top: var(--spacing-sm); }

/* Fita */
.lote-fita-dot { background-color: var(--color-white); }

/* Hero: o h1 é o destaque, a subheadline complementa */
.hero { min-height: auto; padding-bottom: var(--spacing-lg); background: linear-gradient(180deg, rgba(232, 238, 243, 0.6) 0%, rgba(255, 255, 255, 0) 100%); }
.hero .author-tag { margin-bottom: 0.75rem; }
.hero h1 { font-size: 2rem; line-height: 1.16; margin-bottom: 0.9rem; }
.hero .subtitle { font-size: 0.98rem; line-height: 1.6; font-weight: 400; color: var(--color-warm-gray-light); max-width: 620px; margin-bottom: 0; }
.hero-ctas { margin-top: 1.4rem; }
.hero-foto { display: none; }
@media (min-width: 768px) {
  .hero h1 { font-size: 3.1rem; }
  .hero .subtitle { font-size: 1.1rem; }
}
@media (min-width: 992px) {
  .hero-foto { display: flex; justify-content: center; position: relative; }
  .hero-foto::before {
    content: ''; position: absolute; width: calc(100% - 40px); height: calc(100% - 40px);
    border: 2px solid var(--color-gold-discrete); bottom: 0; left: 0; transform: translate(15px, 15px); border-radius: 4px; z-index: 1;
  }
  .hero-foto img { max-height: 520px; width: auto; }
}

/* Títulos de seção sempre menores que o h1 */
.section-header h2, .proposal h2 { font-size: 1.55rem; }
@media (min-width: 768px) {
  .section-header h2, .proposal h2 { font-size: 2.3rem; }
}

/* História */
.proposal p { text-align: left; font-size: 1rem; }
@media (min-width: 768px) { .proposal p { font-size: 1.08rem; } }

/* Autoridade (seção azul) */
.target .author-tag { color: var(--color-gold-discrete); }
.target .target-grid { align-items: start; }
.target h2 { font-size: 1.55rem; }
@media (min-width: 768px) { .target h2 { font-size: 2.2rem; } }
.target-sub { color: rgba(255, 255, 255, 0.8); font-weight: 300; margin: var(--spacing-sm) 0 var(--spacing-md); }
.target-crp { color: rgba(255, 255, 255, 0.6); font-size: 0.85rem; letter-spacing: 1px; }
.aut-list { list-style: none; display: grid; gap: var(--spacing-sm); }
.aut-list li {
  background-color: rgba(255, 255, 255, 0.04);
  border-left: 3px solid var(--color-gold-discrete);
  border-radius: 4px;
  padding: 1rem 1.1rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
}
.aut-list li strong, .aut-list li em { color: var(--color-white); }

/* Depoimentos (reservado) */
.reader-proof-header p { color: var(--color-warm-gray-light); margin-top: var(--spacing-xs); }
.depo-vazio {
  max-width: 1000px; margin: 0 auto; border: 2px dashed var(--color-border-light); border-radius: 6px;
  padding: var(--spacing-md); text-align: center; color: var(--color-warm-gray-light); font-weight: 600;
}

/* Para quem é */
.fit-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-md); max-width: 1000px; margin: 0 auto; }
@media (min-width: 768px) { .fit-grid { grid-template-columns: 1.25fr 1fr; } }
.fit-box { background: var(--color-white); border: 1px solid var(--color-border-light); border-radius: 6px; box-shadow: var(--shadow-soft); padding: var(--spacing-md); }
.fit-box h3 { font-size: 1.3rem; margin-bottom: var(--spacing-sm); }
.fit-box ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.fit-box li { position: relative; padding-left: 1.6rem; font-size: 0.95rem; }
.fit-sim { border-top: 3px solid var(--color-green); }
.fit-sim li::before { content: '\2714'; position: absolute; left: 0; color: var(--color-green); font-weight: 700; }
.fit-nao li::before { content: '\2715'; position: absolute; left: 0; color: var(--color-warm-gray-light); font-weight: 700; }
.levar { max-width: 1000px; margin: var(--spacing-lg) auto 0; }
.levar h3 { font-size: 1.5rem; text-align: center; margin-bottom: var(--spacing-xs); }
.levar > p { text-align: center; color: var(--color-warm-gray-light); max-width: 700px; margin: 0 auto var(--spacing-md); }
.levar ol { list-style: none; counter-reset: pilar; display: grid; grid-template-columns: 1fr; column-gap: var(--spacing-lg); }
@media (min-width: 768px) { .levar ol { grid-template-columns: repeat(3, 1fr); } }
.levar ol li { counter-increment: pilar; position: relative; padding: var(--spacing-sm) 0 var(--spacing-sm) 2.4rem; border-bottom: 1px dashed var(--color-border-light); font-size: 0.95rem; }
.levar ol li::before {
  content: counter(pilar); position: absolute; left: 0; top: 0.95rem; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--color-blue-deep); color: var(--color-white); font-family: var(--font-serif); font-weight: 700; font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center;
}
.ia-box { margin-top: var(--spacing-md); border-left: 4px solid var(--color-gold-discrete); background: var(--color-white); box-shadow: var(--shadow-soft); padding: var(--spacing-md); border-radius: 4px; }
.ia-box > p { font-size: 1rem; margin-bottom: var(--spacing-sm); }
.ia-box ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.ia-box li { position: relative; padding-left: 1.5rem; font-size: 0.95rem; }
.ia-box li::before { content: '\2714'; position: absolute; left: 0; color: var(--color-gold-discrete); font-weight: 700; }

/* Ancoragem */
.offer-stack-list li { align-items: center; }
.offer-stack-list li .stack-nome { flex: 1; }
.offer-stack-list li .stack-dir { display: inline-flex; align-items: center; gap: 0.6rem; white-space: nowrap; }
.tag-acesso { font-size: 0.62rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 3px 8px; border-radius: 10px; white-space: nowrap; }
.tag-vit { background: #E7F4EC; color: var(--color-green-hover); }
.tag-ano { background: var(--color-blue-light); color: var(--color-blue-deep); }
.offer-stack-list li strong.txt { text-decoration: none; font-size: 0.85rem; }
.offer-stack-nota { font-weight: 600; color: var(--color-blue-deep); margin: 0 auto var(--spacing-md); max-width: 640px; }
.offer-stack-nota span { color: var(--color-green); }
.offer-stack-total strong { font-size: 1.9rem; }

/* Pergunta decisória */
.decisao { max-width: 720px; margin: 0 auto; text-align: center; }
.decisao .pergunta { font-family: var(--font-serif); font-size: 1.3rem; line-height: 1.5; color: var(--color-blue-deep); margin-bottom: var(--spacing-sm); }
.decisao p { margin-bottom: var(--spacing-sm); }
.decisao .offer-stack-reveal { max-width: 640px; margin-top: var(--spacing-md); }
@media (min-width: 768px) { .decisao .pergunta { font-size: 1.6rem; } }

/* Card de preço */
.price-card .price-value { color: var(--color-blue-deep) !important; font-size: 2.6rem; display: block; }
.price-card .price-value small { font-size: 0.5em; }
.price-pix { display: block; font-size: 1rem; font-weight: 600; color: var(--color-blue-deep); margin-top: 0.2rem; }
.price-pizza { display: block; font-size: 0.85rem; font-style: italic; color: var(--color-warm-gray-light); margin-top: 0.5rem; }
.price-card.featured { border: 2px solid var(--color-blue-deep); }
.price-card.featured .btn { background-color: var(--color-green); }
.price-card.featured .btn:hover { background-color: var(--color-green-hover); box-shadow: 0 10px 24px rgba(31, 138, 76, 0.3); }
.price-card:hover { transform: none; border-color: var(--color-blue-deep); }
.price-card .price-card-price { border-top: none; padding-top: 0; }
.primeiras { text-align: left; background: var(--color-red-light); border: 2px solid var(--color-red); border-radius: 6px; padding: 1rem 1.1rem; margin-bottom: var(--spacing-md); }
.primeiras strong { display: block; color: var(--color-red); font-size: 0.92rem; margin-bottom: 0.35rem; }
.primeiras p { font-size: 0.9rem; color: #5A2A2C; }

/* Bônus */
.bonus-box { max-width: 900px; margin: var(--spacing-lg) auto 0; }
.bonus-box h3 { text-align: center; font-size: 1.5rem; margin-bottom: var(--spacing-md); }
@media (min-width: 768px) { .bonus-box h3 { font-size: 1.8rem; } }
.bonus-box ul { list-style: none; display: flex; flex-direction: column; gap: var(--spacing-sm); }
.bonus-box li { background: var(--color-white); border: 1px solid var(--color-border-light); border-left: 4px solid var(--color-gold-discrete); border-radius: 4px; box-shadow: var(--shadow-soft); padding: 1rem 1.2rem; font-size: 0.95rem; }

/* Lotes: vermelho na escassez */
.offer-lotes .author-tag { color: var(--color-red); }
.lotes-grid { margin-top: var(--spacing-md); }
.lote { padding: 1.4rem 1rem 1rem; }
.lote-badge { background-color: var(--color-red); }
.lote-atual { border: 2px solid var(--color-red); }
.lote small.lote-diferenca { color: var(--color-red); }
.lote-breve { opacity: 0.75; }
.lote-breve .lote-badge { background-color: var(--color-warm-gray-light); }
.lote .lote-pix { font-size: 0.85rem; color: var(--color-warm-gray); }
.lotes-nota { margin-top: var(--spacing-md); font-weight: 600; color: var(--color-blue-deep); font-size: 0.95rem; }

/* Garantia */
.garantia { background: var(--color-white); border-top: 1px solid var(--color-border-light); }
.garantia-card { max-width: 800px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: var(--spacing-md); align-items: center; text-align: center; justify-items: center; }
@media (min-width: 768px) { .garantia-card { grid-template-columns: auto 1fr; text-align: left; justify-items: start; } }
.garantia-card svg { width: 130px; height: 130px; }
.garantia-card h2 { font-size: 1.6rem; margin-bottom: var(--spacing-xs); }

/* Perguntas frequentes */
.faq { background: var(--color-off-white); }
.faq-lista { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.6rem; }
.faq details { background: var(--color-white); border: 1px solid var(--color-border-light); border-radius: 6px; padding: 0 1.1rem; }
.faq summary { cursor: pointer; list-style: none; position: relative; padding: 1rem 2rem 1rem 0; font-weight: 600; color: var(--color-blue-deep); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--color-gold-discrete); font-weight: 400; }
.faq details[open] summary::after { content: '\2212'; }
.faq details p { padding-bottom: 1rem; font-size: 0.95rem; }

/* Fechamento */
.cta-final { padding: var(--spacing-lg) 0; }
.cta-final h2 { font-size: 1.6rem; max-width: 820px; margin-left: auto; margin-right: auto; }
@media (min-width: 768px) { .cta-final h2 { font-size: 2.3rem; } }
.cta-final p { margin-bottom: var(--spacing-md); }

/* Rodapé */
.footer-grid { grid-template-columns: 1fr !important; margin-bottom: var(--spacing-md); }
.footer-brand { display: flex; align-items: center; gap: 0.9rem; }
.footer-brand svg { margin-bottom: 0; flex-shrink: 0; }
.footer-brand .brand-text { display: block; font-family: var(--font-serif); font-size: 1.05rem; }
.footer-brand .brand-subtitle { display: block; font-size: 0.8rem; }

/* Barra fixa de compra no celular */
.barra-cel { display: none; }

/* Celular */
@media (max-width: 767px) {
  .container { padding: 0 1.1rem; }
  section { padding: 3rem 0; }
  .lote-fita-link { font-size: 0.78rem; padding: 0.55rem 0.8rem; gap: 0.6rem; }
  .hero { padding-top: 1.1rem; padding-bottom: 2.4rem; }
  .hero .author-tag { font-size: 0.72rem; letter-spacing: 1.5px; }
  .hero h1 { font-size: 1.72rem; line-height: 1.14; margin-bottom: 0.7rem; }
  .hero .subtitle { font-size: 0.86rem; line-height: 1.55; }
  .hero .author-tag { margin-bottom: 0.5rem; }
  .section-header h2, .proposal h2, .target h2 { font-size: 1.4rem; }
  .hero-ctas { margin-top: 1rem; gap: 0.5rem; align-items: center; }
  .hero-ctas .btn { width: 100%; }
  .section-header { margin-bottom: var(--spacing-md); }
  .section-cta { margin-top: var(--spacing-md); }
  .section-cta .btn { width: 100%; }
  .btn { padding: 1rem 1.2rem; font-size: 0.9rem; }
  .proposal h2 { margin-bottom: var(--spacing-sm); }
  .proposal p { font-size: 0.95rem; margin-bottom: var(--spacing-sm); line-height: 1.7; }
  .target-grid { gap: var(--spacing-md); }
  .aut-list li { font-size: 0.9rem; padding: 0.85rem 0.95rem; }
  .reader-proof-header h3 { font-size: 1.35rem; }
  .fit-box, .ia-box { padding: 1.2rem 1.1rem; }
  .fit-box li, .levar ol li, .ia-box li, .bonus-box li { font-size: 0.9rem; }
  .levar { margin-top: var(--spacing-md); }
  .levar h3, .bonus-box h3 { font-size: 1.3rem; }
  .bonus-box { margin-top: var(--spacing-md); }
  .offer-stack h3 { font-size: 1.25rem; }
  .offer-stack-list li { flex-wrap: wrap; font-size: 0.88rem; row-gap: 0.35rem; }
  .offer-stack-list li .stack-nome { flex-basis: 100%; }
  .offer-stack-list li .stack-dir { width: 100%; justify-content: space-between; }
  .offer-stack-nota { font-size: 0.95rem; }
  .decisao .pergunta { font-size: 1.2rem; }
  .decisao p { font-size: 0.95rem; }
  .price-card { padding: 1.4rem 1.1rem 1.6rem; }
  .price-card .price-value { font-size: 2.3rem; }
  .offer-lotes h3 { font-size: 1.35rem; }
  .garantia-card svg { width: 110px; height: 110px; }
  .garantia-card h2 { font-size: 1.35rem; }
  .faq summary { font-size: 0.95rem; }
  .cta-final h2 { font-size: 1.45rem; }
  .cta-final p { font-size: 0.98rem; }

  .barra-cel {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--color-white);
    border-top: 1px solid var(--color-border-light); box-shadow: 0 -8px 24px rgba(22, 53, 77, 0.12);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); transform: translateY(110%); transition: transform 0.3s ease;
  }
  .barra-cel.ver { transform: none; }
  .barra-cel .btn { width: 100%; box-shadow: none; }
  footer { padding-bottom: 100px; }
}

/* Valor total sem quebrar */
.offer-stack-total strong { white-space: nowrap; }
@media (max-width: 767px) { .offer-stack-total { flex-direction: column; align-items: center; gap: 0.2rem; } }

/* Fonte única: Montserrat em toda a página, inclusive títulos e preços */
:root { --font-serif: 'Montserrat', Helvetica, Arial, sans-serif; }
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.3px; }
.hero h1 { font-weight: 800; letter-spacing: -0.8px; }

/* Título acima da trajetória */
.aut-titulo { color: var(--color-white); font-size: 1.15rem; margin-bottom: var(--spacing-sm); }
@media (min-width: 768px) { .aut-titulo { font-size: 1.35rem; } }

/* Primeira dobra: o início da próxima seção aparece logo abaixo, para gerar curiosidade */
.hero { padding-top: 2.5rem; padding-bottom: 2.5rem; }
#historia { padding-top: 2.5rem; border-top: none; }
@media (min-width: 992px) {
  .hero-foto img { max-height: 440px; }
}
@media (max-width: 767px) {
  .hero { padding-top: 1.1rem; padding-bottom: 1.6rem; }
  #historia { padding-top: 1.6rem; }
}

/* Primeira dobra mais compacta no computador */
@media (min-width: 992px) {
  .hero-grid { grid-template-columns: 1.4fr 0.6fr; gap: 3rem; }
  .hero h1 { font-size: 2.6rem; }
  .hero .subtitle { font-size: 1.02rem; }
  .hero-foto img { max-height: 400px; }
  .hero { padding-top: 2rem; padding-bottom: 2rem; }
  #historia { padding-top: 2rem; }
}
@media (max-width: 767px) {
  .hero { padding-bottom: 1.1rem; }
  #historia { padding-top: 1.1rem; }
}

/* Grifos dourados nos benefícios da subheadline */
.grifo { color: var(--color-blue-deep); font-weight: 600; text-decoration: underline; text-decoration-color: var(--color-gold-discrete); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* Grifos mais discretos */
.grifo { font-weight: 500; text-decoration-thickness: 1px; text-decoration-color: rgba(197, 160, 89, 0.7); text-underline-offset: 3px; }
