/* ============================================================
   Estilos específicos desta página
   Extraído do HTML para facilitar manutenção.
   ============================================================ */

:root {
  --green: #00C853;
  --green-dim: #00A844;
  --green-border: rgba(0,200,83,0.22);
  --bg: #080B0A;
  --bg-2: #0E1412;
  --bg-card: #111815;
  --white: #F0F4F2;
  --muted-1: #DDE7E2;
  --muted-2: #6B8C76;
  --muted-3: rgba(221,231,226,0.12);
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --font-serif: 'Playfair Display', serif;
  --font-body: 'Outfit', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--muted-1); font-family: var(--font-body); font-size: 16px; line-height: 1.7; overflow-x: hidden; }

/* PAGE */
.page-wrap { max-width: 900px; margin: 0 auto; padding: 0 32px 96px; }
.page-hero { padding: 8rem 0 3rem; }

/* HERO */
.eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.ey-line { width: 32px; height: 1px; background: var(--green); }
.ey-txt { font-size: 11px; letter-spacing: 3px; color: var(--green); text-transform: uppercase; font-weight: 500; }
.page-eyebrow { display: inline-flex !important; align-items: center; gap: 0.6rem; font-size: 0.75rem; letter-spacing: 2.5px; text-transform: uppercase; color: var(--green) !important; margin-bottom: 1.2rem; font-weight: 500; }
.eyebrow-line { width: 28px; height: 1px; background: var(--green); }
h1 { font-family: var(--font-serif); font-size: clamp(36px, 5vw, 54px); font-weight: 900; line-height: 1.05; letter-spacing: -1.5px; margin-bottom: 20px; }
h1 em { color: var(--green); font-style: italic; }
.lead { font-size: 17px; color: var(--muted-2); line-height: 1.8; max-width: 620px; margin-bottom: 64px; font-weight: 300; }
.lead strong { color: var(--muted-1); font-weight: 500; }

/* STEPS */
.steps { display: flex; flex-direction: column; gap: 0; }
.step { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 56px 0; border-bottom: 0.5px solid var(--muted-3); }
.step:last-child { border-bottom: none; }
.step.flip .step-visual { order: -1; }
.step-num { font-size: 11px; letter-spacing: 2px; color: #3D6B4F; text-transform: uppercase; margin-bottom: 14px; font-weight: 500; }
.step-title { font-family: var(--font-serif); font-size: 26px; font-weight: 700; color: var(--muted-1); margin-bottom: 16px; line-height: 1.2; }
.step-title em { color: var(--green); font-style: italic; }
.step-body { font-size: 15px; color: var(--muted-2); line-height: 1.85; }
.step-body strong { color: var(--muted-1); font-weight: 500; }
.step-highlight { background: rgba(0,200,83,0.07); border: 0.5px solid rgba(0,200,83,0.18); border-radius: var(--radius-md); padding: 14px 18px; margin-top: 20px; font-size: 13px; color: var(--green-dim); line-height: 1.6; }
.step-visual { display: flex; align-items: flex-end; justify-content: center; background: #0A0F0C; border: 0.5px solid var(--muted-3); border-radius: var(--radius-lg); padding: 28px; min-height: 200px; }

/* DIVISOR DE SEÇÃO */
.sec-divider { border: none; border-top: 0.5px solid var(--muted-3); margin: 64px 0; }
.sec-label { font-size: 11px; letter-spacing: 3px; color: #3D6B4F; text-transform: uppercase; font-weight: 500; margin-bottom: 40px; display: flex; align-items: center; gap: 16px; }
.sec-label::after { content:''; flex:1; height:0.5px; background: var(--muted-3); }

/* COMPARAÇÃO */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 64px; }
.compare-card { border-radius: var(--radius-lg); padding: 28px; }
.compare-card.simple { background: #0E1510; border: 0.5px solid var(--muted-3); }
.compare-card.compound { background: linear-gradient(135deg, #0E1F15, #0A1A11); border: 1px solid var(--green-border); }
.compare-tag { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; margin-bottom: 12px; }
.compare-tag.s { color: #3D6B4F; }
.compare-tag.c { color: var(--green); }
.compare-num { font-family: var(--font-serif); font-size: 38px; font-weight: 700; margin-bottom: 8px; }
.compare-num.s { color: #3D6B4F; }
.compare-num.c { color: var(--green); }
.compare-desc { font-size: 13px; color: var(--muted-2); line-height: 1.6; }

/* SIMULADOR */
.sim-card { background: linear-gradient(135deg, #0E1F15, #0A1A11); border: 1px solid var(--green-border); border-radius: var(--radius-xl); padding: 44px; }
.sim-title { font-family: var(--font-serif); font-size: 26px; font-weight: 700; color: var(--muted-1); margin-bottom: 32px; }
.sim-title em { color: var(--green); font-style: italic; }
.sim-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.sl { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.sl-top { display: flex; justify-content: space-between; align-items: center; }
.sl-k { font-size: 10px; color: #3D6B4F; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 500; }
.sl-v { font-size: 13px; font-weight: 600; color: var(--muted-1); }
input[type=range] { -webkit-appearance: none; width: 100%; height: 3px; background: #1A2E21; border-radius: 2px; outline: none; cursor: pointer; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--green); cursor: pointer; border: 2px solid #0A0F0C; }
.sim-result { display: flex; flex-direction: column; gap: 16px; }
.sim-main { background: rgba(0,200,83,0.06); border: 0.5px solid rgba(0,200,83,0.15); border-radius: var(--radius-md); padding: 24px; }
.sim-main-label { font-size: 10px; letter-spacing: 2px; color: #3D6B4F; text-transform: uppercase; margin-bottom: 8px; }
.sim-main-val { font-family: var(--font-serif); font-size: 42px; font-weight: 700; color: var(--green); line-height: 1; margin-bottom: 4px; }
.sim-main-sub { font-size: 12px; color: #3D6B4F; }
.sim-rows { display: flex; flex-direction: column; gap: 10px; }
.sim-row { display: flex; justify-content: space-between; font-size: 13px; }
.sim-rl { color: #3D6B4F; }
.sim-rv { color: var(--muted-2); }
.sim-rv.g { color: var(--green); font-weight: 600; }
.btn-sim { display: block; background: var(--green); color: #0A0F0C; font-size: 14px; font-weight: 700; padding: 14px; border-radius: var(--radius-md); border: none; cursor: pointer; width: 100%; text-align: center; font-family: var(--font-body); text-decoration: none; margin-top: 4px; transition: opacity 0.2s; }
.btn-sim:hover { opacity: 0.9; }

/* MOBILE */
@media (max-width: 680px) {
  .page-wrap { padding: 48px 20px 72px; }
  .step { grid-template-columns: 1fr; gap: 32px; }
  .step.flip .step-visual { order: 0; }
  .compare { grid-template-columns: 1fr; }
  .sim-grid { grid-template-columns: 1fr; }
}

/* HEADER/FOOTER - estilos necessários para os componentes */
nav{display:flex;justify-content:space-between;align-items:center;padding:1.4rem 2.5rem;position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(8,11,10,0.9);backdrop-filter:blur(20px);border-bottom:1px solid var(--muted-3);}
.logo{font-family:'Playfair Display',serif;font-weight:700;font-size:1.5rem;color:var(--white);letter-spacing:-0.5px;display:flex;align-items:center;gap:0.5rem;text-decoration:none;}
.nav-links{display:flex;gap:2.5rem;list-style:none;padding:0;margin:0;}
.nav-links a{color:var(--muted-1);text-decoration:none;font-size:0.875rem;font-weight:400;transition:color 0.2s;}
.nav-links a:hover{color:var(--white);}
.nav-hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;background:none;border:none;}
.nav-hamburger span{display:block;width:22px;height:2px;background:var(--white);border-radius:2px;transition:transform 0.25s,opacity 0.25s;}
.nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-hamburger.open span:nth-child(2){opacity:0;}
.nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.nav-mobile-menu{display:none;position:fixed;top:57px;left:0;right:0;background:rgba(8,11,10,0.97);backdrop-filter:blur(20px);border-bottom:1px solid var(--muted-3);padding:1.5rem 1.25rem;z-index:99;flex-direction:column;}
.nav-mobile-menu.open{display:flex;}
.nav-mobile-menu a{color:var(--muted-1);text-decoration:none;font-size:1rem;padding:0.9rem 0;border-bottom:1px solid var(--muted-3);transition:color 0.2s;}
footer{border-top:1px solid var(--muted-3);padding:2rem 2.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;max-width:1200px;margin:0 auto;}
.footer-links{display:flex;gap:1.5rem;}
.footer-links a{color:var(--muted-2);text-decoration:none;font-size:0.8rem;transition:color 0.2s;}
.footer-links a:hover{color:var(--green);}
.footer-copy{color:var(--muted-2);font-size:0.75rem;}
@media(max-width:768px){nav{padding:1rem 1.25rem;}.nav-links{display:none;}.nav-hamburger{display:flex;}footer{flex-direction:column;align-items:flex-start;padding:2rem 1.25rem;}}

/* ARTICLE META — tempo de leitura e nível */
.article-meta{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;padding:1rem 0;border-top:1px solid var(--muted-3);border-bottom:1px solid var(--muted-3);margin-bottom:2.5rem;}
.meta-item{font-size:0.78rem;color:var(--muted-2);display:flex;align-items:center;gap:0.4rem;}
.meta-dot{width:4px;height:4px;border-radius:50%;background:rgba(221,231,226,0.2);}