/* ===========================================================
   /metodo — Apresentação do Método HERO
   Usa os tokens de hero.css (navy #071739, dourado #a68768, verde)
   =========================================================== */

.page { width: 100%; max-width: 720px; margin: 0 auto; padding: 0 22px 60px; }

/* Barra de topo */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 18px 0 8px;
}
.back {
  font-size: 13px; color: rgba(234,227,209,0.75); text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 12px; border-radius: 999px;
  border: 1px solid rgba(234,227,209,0.16);
  transition: background 0.16s ease;
}
.back:hover { background: rgba(234,227,209,0.08); }
.topbrand { display: flex; align-items: center; gap: 9px; }
.topbrand .brasao {
  width: 34px; height: 34px; border-radius: 9px;
  background: rgba(7,23,57,0.5); border: 1px solid rgba(200,166,126,0.4);
  display: flex; align-items: center; justify-content: center; padding: 5px;
}
.topbrand .brasao img { width: 100%; height: auto; display: block; }
.topbrand .word { height: 15px; width: auto; display: block; }

/* HERO */
.mhero { text-align: center; padding: 40px 0 44px; }
.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--dourado-claro); margin-bottom: 16px;
}
.mhero h1 {
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(30px, 8vw, 46px); line-height: 1.12; color: var(--branco);
  text-wrap: balance; letter-spacing: 0.01em;
}
.mhero h1 .gold { color: var(--dourado-claro); font-style: italic; }
.mhero .lead {
  margin: 20px auto 0; max-width: 46ch;
  font-size: 15.5px; line-height: 1.65; color: rgba(234,227,209,0.78); text-wrap: balance;
}

/* Botões */
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; }
.cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px; border-radius: 999px; font-size: 15px; font-weight: 600;
  text-decoration: none; transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
  -webkit-tap-highlight-color: transparent;
}
.cta:active { transform: translateY(1px); }
.cta-wa {
  background: linear-gradient(135deg, #bd9a6d 0%, #a68768 100%);
  color: #10230f; box-shadow: 0 10px 26px rgba(166,135,104,0.34);
}
.cta-wa:hover { background: linear-gradient(135deg, #c8a67e 0%, #b09372 100%); }
.cta-wa svg { width: 20px; height: 20px; }
.cta-ghost {
  background: transparent; color: var(--creme);
  border: 1px solid rgba(200,166,126,0.5);
}
.cta-ghost:hover { background: rgba(200,166,126,0.1); }

/* Seções */
.sec { padding: 30px 0; border-top: 1px solid rgba(234,227,209,0.09); }
.sec-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--dourado-claro); margin-bottom: 10px;
}
.sec h2 {
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(24px, 6vw, 32px); line-height: 1.18; color: var(--branco);
  text-wrap: balance; margin-bottom: 8px;
}
.sec .sub { font-size: 15px; line-height: 1.65; color: rgba(234,227,209,0.76); max-width: 56ch; }
.sec .sub strong { color: var(--creme); font-weight: 600; }
.sec .sub em { color: var(--dourado-claro); font-style: italic; }

/* Sobre o Emerson (foto + credenciais) */
.about { display: flex; flex-direction: column; gap: 22px; align-items: center; margin-top: 8px; }
@media (min-width: 560px) { .about { flex-direction: row; align-items: center; gap: 28px; } }
.about-photo {
  position: relative; flex-shrink: 0;
  width: 100%; max-width: 250px;
  border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(200,166,126,0.42);
  box-shadow: 0 22px 50px rgba(0,0,0,0.5);
}
.about-photo img { width: 100%; height: auto; display: block; }
.about-photo::after {
  content: ""; position: absolute; inset: 0; border-radius: 18px;
  box-shadow: inset 0 -60px 60px -30px rgba(7,23,57,0.85);
  pointer-events: none;
}
.about-text { flex: 1; }
.about-text h2 { margin-bottom: 10px; }

/* Card de destaque (o que é / promessa) */
.quote-card {
  margin-top: 6px; padding: 22px 24px; border-radius: 16px;
  background: rgba(61,91,71,0.28); border: 1px solid rgba(166,194,151,0.22);
}
.quote-card .q {
  font-family: var(--font-serif); font-size: clamp(19px,5vw,24px); font-style: italic;
  line-height: 1.35; color: var(--branco); text-wrap: balance;
}
.quote-card .q .gold { color: var(--dourado-claro); }

/* Grid de cards */
.grid { display: grid; gap: 14px; margin-top: 22px; }
.grid.g2 { grid-template-columns: repeat(2, 1fr); }
.grid.g4 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 560px) { .grid.g2, .grid.g4 { grid-template-columns: 1fr; } }

.card {
  padding: 18px 18px; border-radius: 14px;
  background: rgba(234,227,209,0.05); border: 1px solid rgba(234,227,209,0.13);
}
.card .n {
  font-family: var(--font-serif); font-size: 15px; font-weight: 600;
  color: var(--dourado-claro); margin-bottom: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px;
  background: rgba(166,135,104,0.16); border: 1px solid rgba(166,135,104,0.3);
}
.card h3 { font-size: 15.5px; font-weight: 600; color: var(--branco); margin-bottom: 6px; letter-spacing: 0.01em; }
.card p { font-size: 13.5px; line-height: 1.55; color: rgba(234,227,209,0.72); }

/* Pilares */
.pillars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 22px; }
@media (max-width: 560px) { .pillars { grid-template-columns: 1fr; } }
.pillar {
  padding: 20px; border-radius: 14px; text-align: center;
  background: rgba(61,91,71,0.24); border: 1px solid rgba(166,194,151,0.2);
}
.pillar .letter {
  font-family: var(--font-serif); font-size: 42px; font-weight: 600;
  color: var(--dourado-claro); line-height: 1;
}
.pillar h3 { font-size: 16px; font-weight: 600; color: var(--branco); margin: 8px 0 5px; }
.pillar p { font-size: 13px; line-height: 1.5; color: rgba(234,227,209,0.72); }

/* Passos (como funciona) */
.steps { margin-top: 22px; display: flex; flex-direction: column; gap: 4px; }
.step { display: flex; gap: 16px; padding: 14px 0; }
.step:not(:last-child) { border-bottom: 1px solid rgba(234,227,209,0.09); }
.step .sn {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: 17px; font-weight: 600; color: var(--dourado-claro);
  background: rgba(7,23,57,0.5); border: 1px solid rgba(200,166,126,0.4);
}
.step h3 { font-size: 15.5px; font-weight: 600; color: var(--branco); margin-bottom: 3px; }
.step p { font-size: 13.5px; line-height: 1.55; color: rgba(234,227,209,0.72); }

/* Planos */
.plans { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-top: 22px; }
@media (max-width: 560px) { .plans { grid-template-columns: 1fr; } }
.plan {
  padding: 16px 16px; border-radius: 13px;
  background: rgba(234,227,209,0.05); border: 1px solid rgba(234,227,209,0.13);
}
.plan.hl { border-color: rgba(200,166,126,0.5); background: rgba(166,135,104,0.08); }
.plan .tag { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dourado-claro); }
.plan h3 { font-family: var(--font-serif); font-size: 18px; font-weight: 600; color: var(--branco); margin: 3px 0 5px; }
.plan p { font-size: 12.5px; line-height: 1.5; color: rgba(234,227,209,0.72); }

/* Nota de investimento (a partir de) */
.price-note {
  margin-top: 22px; text-align: center;
  padding: 26px 22px; border-radius: 18px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(166,135,104,0.16) 0%, rgba(166,135,104,0) 60%), rgba(166,135,104,0.06);
  border: 1px solid rgba(200,166,126,0.4);
}
.price-note .from { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(234,227,209,0.68); }
.price-note .val { font-family: var(--font-serif); font-size: clamp(30px,9vw,40px); font-weight: 600; color: var(--dourado-claro); line-height: 1.05; margin: 6px 0 3px; }
.price-note .val small { font-size: 17px; font-weight: 500; color: rgba(234,227,209,0.78); }
.price-note .plan-ref { font-size: 12.5px; color: rgba(234,227,209,0.62); }
.price-note p { font-size: 14.5px; line-height: 1.6; color: rgba(234,227,209,0.82); max-width: 42ch; margin: 14px auto 0; text-wrap: balance; }
.price-note .cta { margin-top: 20px; }

/* CTA final */
.final {
  margin-top: 34px; text-align: center;
  padding: 40px 26px; border-radius: 20px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(166,135,104,0.18) 0%, rgba(166,135,104,0) 60%), rgba(61,91,71,0.22);
  border: 1px solid rgba(200,166,126,0.28);
}
.final h2 { font-family: var(--font-serif); font-weight: 600; font-size: clamp(24px,6vw,32px); color: var(--branco); text-wrap: balance; }
.final p { font-size: 15px; line-height: 1.6; color: rgba(234,227,209,0.78); max-width: 44ch; margin: 14px auto 0; text-wrap: balance; }

.foot { text-align: center; padding-top: 34px; }
.foot a { color: var(--dourado-claro); text-decoration: none; font-weight: 600; }
.foot .seal { margin-top: 8px; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(234,227,209,0.4); }

/* Animação de entrada por scroll (simples fade-up ao carregar) */
.reveal { opacity: 0; transform: translateY(16px); animation: mrise 0.6s cubic-bezier(0.22,0.61,0.36,1) forwards; }
@keyframes mrise { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; animation: none; } }