/* refino.css — carregado DEPOIS de brand.css e motion.css.
   1) troca o amarelo de template por verde-nota + cobre
   2) conserta a experiência no celular
   Fica em arquivo separado de propósito: é fácil reverter e não conflita
   se o brand.css for regerado. */

/* ============================================================
   1. PALETA — verde-nota + cobre
   ============================================================ */

:root {
  --ink: #0E1A14;      /* verde quase preto: base */
  --green: #1F6F4A;    /* verde-nota: ação */
  --copper: #C97B3C;   /* cobre: destaque */
  --cream: #F4F1E8;    /* creme: superfícies claras */
  --paper: #FBF9F3;    /* creme mais alto: cartões */

  /* os nomes antigos continuam existindo para não quebrar nada no brand.css */
  --yellow: var(--copper);
  --blue: var(--green);
  --light: #EAE5D6;
  --line: #D8D2C2;
  --muted: #5C6259;
}

/* superfícies claras: creme no lugar do branco puro */
main > .section,
.pain:before, .format:before, .fit:before, .faq:before { background: var(--cream); }
.module-list, .price-card { background: var(--paper); }
.program-section { border-block-color: var(--line); }

/* botão principal: verde, para separar ação de enfeite */
.primary {
  background: var(--green);
  color: var(--cream);
  box-shadow: 0 4px 0 #123f2a;
}
.primary:hover { background: #248156; }
.price-card .primary, .hero .primary { color: var(--cream); }

/* cobre nos destaques */
.promo-bar { background: var(--copper); color: #17110A; }
.ticker { background: var(--copper); color: #17110A; border-top-color: var(--ink); }
.brand-mark { background: var(--copper); color: #17110A; }
h1 em, h2 em { color: var(--copper); }
.hero .eyebrow { border-left-color: var(--copper); }
.offer-badge { background: var(--copper); color: #17110A; }
.visual-stats strong { color: var(--copper); }
.benefit-grid article > span { color: var(--copper); }
.module-number { background: var(--copper); color: #17110A; }
.header nav a:hover { color: var(--copper); }
.dream-card .dream-icon { background: var(--copper); color: #17110A; }
.offer-identity strong { color: var(--copper); }
::selection { background: var(--copper); color: #17110A; }

/* cartão de preço e caixa de exemplo */
.price-card { border-color: var(--green); box-shadow: 8px 8px 0 var(--green); }
.format-card { box-shadow: 6px 6px 0 var(--copper); }
.format-card dl .total dd { color: var(--copper); }

/* cartões da seção de dor */
.pain-card.yellow { background: var(--copper); color: #17110A; }
.pain-card.blue { background: var(--green); color: var(--cream); }
.pain-card.blue p { color: #D6E7DD; }
.pain-card.light { background: var(--light); }

/* bloco de modelos e nota de canto */
.toolkit { background: var(--copper); color: #17110A; }
.toolkit li { border-bottom-color: #A9622C; }
.corner-note { background: var(--green); color: var(--cream); border-color: var(--cream); }

/* superfícies escuras ganham o mesmo verde da base */
.hero-visual { background: #17231C; border-color: #33473C; }
.photo-area { border-block-color: #33473C; }
.photo-label { background: var(--copper); color: #17110A; }
/* a caixa da foto era azul e virou cor órfã com a paleta nova;
   o giro de matiz traz ela para o mesmo verde do resto */
.photo-area > img { filter: hue-rotate(-70deg) saturate(.85); }
.dream-section { background: var(--ink); border-top-color: #2A3A31; }
.dream-card { background: #16241D; border-color: #33473C; }
.header { border-bottom-color: #2A3A31; }
.benefit-grid { border-color: #33473C; }
.benefit-grid article { border-right-color: #33473C; }
.visual-stats { border-top-color: #33473C; }
.offer-identity { border-top-color: #33473C; }
.mobile-buy { background: var(--copper); color: #17110A; border-top-color: var(--ink); }
.mobile-buy b { border-color: #17110A; }

/* foco visível coerente com a paleta */
a:focus-visible, summary:focus-visible { outline-color: var(--copper); }

/* ============================================================
   2. BLOCOS NOVOS — âncora de preço no meio e fechamento
   ============================================================ */

.price-anchor { background: var(--copper); color: #17110A; padding-block: 2.2rem; }
.price-anchor .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
}
.price-anchor .anchor-copy { flex: 1 1 22rem; }
.price-anchor .mini-label { margin-bottom: .5rem; }
.price-anchor h3 {
  font-size: 1.75rem; font-weight: 800; letter-spacing: -.04em;
  line-height: 1.18; margin: 0;
}
.price-anchor .anchor-price {
  display: flex; align-items: baseline; gap: .5rem; margin: 0 0 .2rem;
}
.price-anchor .anchor-price s { font-size: .9375rem; opacity: .65; }
.price-anchor .anchor-price strong {
  font: 800 2.9rem/1 'Manrope', Arial, sans-serif; letter-spacing: -.06em;
}
.price-anchor .anchor-action { flex: 0 0 auto; text-align: right; }
.price-anchor .button {
  background: var(--ink); color: var(--cream); box-shadow: 0 4px 0 #071009;
}
.price-anchor .button:hover { background: #17231C; }
.price-anchor .anchor-note { font-size: .8125rem; margin: .7rem 0 0; opacity: .8; }

.final-cta { background: var(--ink); color: var(--cream); padding-block: 4.5rem; text-align: center; }
.final-cta h2 { margin-bottom: 1.2rem; }
.final-cta > .wrap > p { color: #B6C6BC; font-size: 1.1rem; max-width: 34rem; margin: 0 auto 2rem; }
.final-cta .final-actions { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.final-cta .button { min-width: min(26rem, 100%); justify-content: center; gap: .8rem; }
.final-cta .final-guarantee {
  display: flex; align-items: flex-start; gap: .8rem;
  border: 1px solid #33473C; border-radius: .5rem;
  padding: .9rem 1.2rem; font-size: .9375rem; line-height: 1.55; color: #CBDAD1;
  max-width: 34rem; margin: 0 auto; text-align: left;
}
.final-cta .final-guarantee > span { text-align: left; }
.final-cta .final-guarantee strong { color: var(--cream); font-weight: 700; }
.final-cta .guarantee-mark {
  flex: 0 0 auto; color: var(--copper);
  font-weight: 800; font-size: 1.05rem; line-height: 1.5;
}

/* ============================================================
   3. CELULAR
   ============================================================ */

@media (max-width: 760px) {
  /* O essencial primeiro: título, preço e botão antes do texto longo.
     Antes, o preço só aparecia depois de ~79% da rolagem. */
  .hero-copy { display: flex; flex-direction: column; }
  .hero-copy .eyebrow    { order: 1; }
  .hero-copy h1          { order: 2; margin-bottom: 1.4rem; }
  .hero-copy .hero-offer { order: 3; margin-bottom: 1.2rem; }
  .hero-copy .button     { order: 4; }
  .hero-copy .hero-note  { order: 5; }
  .hero-copy .hero-desc  { order: 6; margin: 1.6rem 0 0; }

  /* título um pouco menor para caber com o preço na mesma tela */
  h1 { font-size: clamp(2.05rem, 7.6vw, 3.1rem); }
  .hero { padding-block: 2rem 2.6rem; gap: 2rem; }
  .hero-offer > p strong { font-size: 2.1rem; }

  /* página mais curta: era ~12.200px de rolagem */
  .section, .benefits-section, .program-section, .offer-section,
  .dream-section { padding-block: 2.9rem; }
  .final-cta { padding-block: 3rem; }
  .pain h2 { margin-bottom: 1.4rem; }
  .pain-cards, .dream-grid { gap: .9rem; }
  .toolkit { margin-top: 1.2rem; }

  /* botão de compra não pode quebrar feio */
  .price-card .button, .final-cta .button {
    justify-content: center; text-align: center;
    gap: .6rem; line-height: 1.3;
  }
  .price-card .button span, .final-cta .button span { font-size: 1.1rem; }

  /* âncora de preço empilhada */
  .price-anchor { padding-block: 1.8rem; }
  .price-anchor .wrap { flex-direction: column; align-items: stretch; gap: 1.2rem; }
  /* em coluna, flex-basis vira altura e abre um vão enorme */
  .price-anchor .anchor-copy { flex: 0 0 auto; }
  .price-anchor h3 { font-size: 1.5rem; }
  .price-anchor .anchor-action { text-align: left; }
  .price-anchor .button { width: 100%; justify-content: center; }
  .price-anchor .anchor-price strong { font-size: 2.5rem; }

  .final-guarantee { font-size: .875rem; padding: .75rem 1rem; }
}

@media (max-width: 360px) {
  h1 { font-size: 1.95rem; }
  .price-anchor .anchor-price strong { font-size: 2.2rem; }
}