@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,600&display=swap');

:root {
  --ink: #172b3a;
  --ink-soft: #52616a;
  --ink-faint: #829099;
  --paper: #f6f2ea;
  --paper-deep: #ece5d9;
  --white: #fffdf8;
  --line: #ddd6c9;
  --terracotta: #b9674a;
  --terracotta-dark: #914f3a;
  --moss: #526454;
  --gold: #d5a868;
  --shadow: 0 18px 50px rgba(39, 45, 38, .08);
  --radius-lg: 28px;
  --radius-md: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'DM Sans', system-ui, -apple-system, sans-serif; font-size: 15px; line-height: 1.5; }
button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

.app-shell { min-height: 100vh; display: flex; }
.sidebar { width: 245px; min-height: 100vh; padding: 32px 26px 24px; border-right: 1px solid var(--line); display: flex; flex-direction: column; background: rgba(246,242,234,.84); position: fixed; z-index: 5; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 22px; font-weight: 700; letter-spacing: -.06em; width: max-content; }
.brand-mark { width: 23px; height: 25px; position: relative; display: inline-block; }
.brand-mark span { position: absolute; display: block; border: 2px solid var(--terracotta); border-radius: 50%; transform: rotate(26deg); }
.brand-mark span:nth-child(1) { width: 12px; height: 18px; left: 0; top: 3px; }
.brand-mark span:nth-child(2) { width: 12px; height: 18px; left: 6px; top: 1px; }
.brand-mark span:nth-child(3) { width: 9px; height: 15px; left: 12px; top: 6px; }
.sidebar-kicker { margin: 12px 0 45px 35px; text-transform: uppercase; letter-spacing: .14em; font-size: 9px; color: var(--ink-faint); }
.main-nav { display: grid; gap: 7px; }
.main-nav a { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 12px; color: var(--ink-soft); font-size: 14px; transition: background .2s, color .2s, transform .2s; }
.main-nav a:hover { color: var(--ink); background: rgba(255,253,248,.6); transform: translateX(2px); }
.main-nav a.active { color: var(--ink); background: var(--white); box-shadow: 0 5px 18px rgba(38,49,42,.06); font-weight: 600; }
.nav-icon { color: var(--terracotta); width: 18px; text-align: center; font-size: 17px; }
.sidebar-note { margin-top: auto; padding: 18px 14px; border-top: 1px solid var(--line); }
.mini-spark { display: block; color: var(--gold); font-size: 20px; margin-bottom: 8px; }
.sidebar-note p { margin: 0 0 6px; font-family: Fraunces, Georgia, serif; font-size: 15px; }
.sidebar-note small { display: block; color: var(--ink-faint); font-size: 11px; line-height: 1.5; }
.sidebar-footer { color: var(--ink-faint); font-size: 10px; margin-top: 28px; }
.mobile-header { display: none; }

#app { width: calc(100% - 245px); margin-left: 245px; min-height: 100vh; }
.page { max-width: 1190px; margin: 0 auto; padding: 45px 58px 68px; animation: page-in .35s ease both; }
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.page-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; margin-bottom: 42px; }
.eyebrow { display: flex; align-items: center; gap: 9px; color: var(--terracotta); font-size: 11px; text-transform: uppercase; font-weight: 700; letter-spacing: .14em; }
.eyebrow::before { content: ''; width: 20px; height: 1px; background: currentColor; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: Fraunces, Georgia, serif; font-weight: 500; letter-spacing: -.05em; line-height: 1.02; }
h1 { font-size: clamp(42px, 5vw, 70px); max-width: 650px; margin: 17px 0 20px; }
h2 { font-size: clamp(32px, 4vw, 52px); margin: 13px 0 18px; }
h3 { font-size: 17px; margin-bottom: 8px; letter-spacing: -.02em; }
.lede { max-width: 480px; color: var(--ink-soft); font-size: 16px; line-height: 1.65; }
.muted { color: var(--ink-faint); }

.button { border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 45px; padding: 0 18px; border-radius: 99px; font-weight: 600; font-size: 13px; transition: transform .2s, box-shadow .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button:focus-visible, .icon-button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid rgba(185,103,74,.35); outline-offset: 3px; }
.button-primary { background: var(--terracotta); color: white; box-shadow: 0 10px 22px rgba(185,103,74,.18); }
.button-primary:hover { background: var(--terracotta-dark); box-shadow: 0 13px 25px rgba(185,103,74,.26); }
.button-quiet { background: transparent; color: var(--ink-soft); border-color: var(--line); }
.button-quiet:hover { background: var(--white); color: var(--ink); }
.button-ghost { padding: 0; min-height: 30px; color: var(--terracotta); background: transparent; }
.button-danger { color: #9b453d; border-color: #e7c9c0; background: #fff8f4; }
.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

.home-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(350px, .9fr); align-items: center; min-height: 540px; gap: 60px; }
.home-copy { padding-bottom: 15px; }
.hero-meta { margin-top: 29px; display: flex; align-items: center; gap: 17px; font-size: 11px; color: var(--ink-faint); }
.hero-meta span + span { border-left: 1px solid var(--line); padding-left: 17px; }
.hand-visual { min-height: 460px; display: grid; place-items: center; position: relative; }
.hand-orbit { width: min(100%, 430px); aspect-ratio: 1; border: 1px solid var(--line); border-radius: 50%; position: absolute; }
.hand-orbit::before, .hand-orbit::after { content: ''; position: absolute; border: 1px solid var(--line); border-radius: 50%; opacity: .6; }
.hand-orbit::before { inset: 34px; }
.hand-orbit::after { inset: 72px; }
.hand-svg { width: min(80%, 300px); position: relative; z-index: 1; filter: drop-shadow(0 20px 20px rgba(27,44,53,.09)); }
.hand-caption { position: absolute; right: 0; bottom: 18px; max-width: 145px; font-size: 11px; line-height: 1.5; color: var(--ink-faint); }
.hand-caption strong { display: block; color: var(--terracotta); font-size: 12px; margin-bottom: 2px; }
.section-rule { border-top: 1px solid var(--line); margin-top: 28px; padding-top: 26px; }
.home-lower { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.info-card, .panel { background: rgba(255,253,248,.74); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 24px; }
.info-card { min-height: 190px; display: flex; flex-direction: column; justify-content: space-between; }
.info-card p { color: var(--ink-soft); font-size: 13px; max-width: 340px; margin-bottom: 0; }
.card-index { color: var(--terracotta); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }

.reading-page { max-width: 960px; }
.back-link { color: var(--ink-faint); font-size: 12px; display: inline-flex; gap: 8px; align-items: center; margin-bottom: 32px; }
.back-link:hover { color: var(--terracotta); }
.progress-line { display: flex; align-items: center; gap: 8px; margin: 25px 0 44px; }
.progress-dot { width: 28px; height: 28px; border-radius: 50%; background: var(--paper-deep); color: var(--ink-faint); display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.progress-dot.active { background: var(--terracotta); color: white; }
.progress-dot.done { background: var(--moss); color: white; }
.progress-bar { height: 1px; background: var(--line); width: 50px; }
.reading-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 44px; align-items: start; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 30px 0; }
.choice-card { position: relative; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,253,248,.65); padding: 23px; text-align: left; transition: border .2s, background .2s, transform .2s; }
.choice-card:hover { transform: translateY(-3px); border-color: var(--terracotta); }
.choice-card.selected { border: 2px solid var(--terracotta); background: #fffaf2; padding: 22px; }
.choice-card input { position: absolute; opacity: 0; }
.choice-symbol { font-family: Fraunces, Georgia, serif; font-size: 34px; color: var(--terracotta); line-height: 1; margin-bottom: 14px; }
.choice-card strong { display: block; margin-bottom: 5px; }
.choice-card span { color: var(--ink-faint); font-size: 12px; }
.upload-zone { background: var(--white); border: 1px dashed #c9bdae; min-height: 265px; border-radius: 19px; display: grid; place-items: center; padding: 25px; text-align: center; position: relative; overflow: hidden; }
.upload-zone.dragging { border-color: var(--terracotta); background: #fff6ee; box-shadow: inset 0 0 0 2px rgba(185,103,74,.08); }
.upload-zone.has-preview { padding: 0; border-style: solid; }
.upload-inner { max-width: 280px; }
.upload-icon { margin: 0 auto 15px; width: 49px; height: 49px; border-radius: 50%; background: #f2e3d9; color: var(--terracotta); display: grid; place-items: center; font-size: 22px; }
.upload-zone h3 { margin-bottom: 6px; }
.upload-zone p { color: var(--ink-faint); font-size: 12px; margin-bottom: 16px; }
.upload-preview { width: 100%; height: 265px; object-fit: cover; display: block; }
.upload-overlay { position: absolute; inset: auto 0 0; padding: 16px; color: white; background: linear-gradient(transparent, rgba(22,39,50,.78)); display: flex; justify-content: space-between; align-items: end; font-size: 12px; }
input[type=file] { display: none; }
.check-list { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; }
.check-list li { display: flex; gap: 11px; color: var(--ink-soft); font-size: 12px; }
.check-list li::before { content: '✓'; color: var(--moss); font-weight: 700; }
.aside-note { padding: 20px; border-left: 2px solid var(--gold); margin-top: 17px; }
.aside-note p { color: var(--ink-soft); font-size: 12px; margin-bottom: 0; }

.analysis-page { min-height: 85vh; display: grid; place-items: center; text-align: center; }
.analysis-wrap { max-width: 470px; width: 100%; }
.analysis-orbit { width: 180px; aspect-ratio: 1; margin: 0 auto 34px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; position: relative; }
.analysis-orbit::after { content: ''; position: absolute; inset: 18px; border: 1px dashed var(--gold); border-radius: 50%; animation: rotate 8s linear infinite; }
@keyframes rotate { to { transform: rotate(360deg); } }
.analysis-hand { font-size: 62px; color: var(--terracotta); transform: rotate(-14deg); animation: breathe 2.2s ease-in-out infinite; }
@keyframes breathe { 50% { transform: rotate(-14deg) scale(1.06); } }
.progress-track { height: 5px; background: var(--paper-deep); border-radius: 9px; margin: 28px 0 10px; overflow: hidden; }
.progress-fill { height: 100%; width: 0; background: var(--terracotta); border-radius: inherit; transition: width .5s ease; }
.progress-label { display: flex; justify-content: space-between; color: var(--ink-faint); font-size: 11px; }

.result-header { display: flex; align-items: end; justify-content: space-between; gap: 25px; margin-bottom: 32px; }
.result-header h1 { margin-bottom: 8px; }
.result-date { color: var(--ink-faint); font-size: 12px; }
.result-banner { background: var(--ink); color: #f7f0e6; border-radius: var(--radius-lg); padding: 26px 28px; display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-bottom: 17px; position: relative; overflow: hidden; }
.result-banner::after { content: '✦'; position: absolute; right: 24px; top: 9px; font-size: 60px; color: rgba(213,168,104,.25); }
.result-banner p { color: #c6c8c2; font-size: 13px; max-width: 580px; margin: 0; }
.badge { color: #f3ca93; text-transform: uppercase; letter-spacing: .12em; font-size: 10px; font-weight: 700; display: block; margin-bottom: 7px; }
.result-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.insight-card { min-height: 185px; display: flex; flex-direction: column; background: rgba(255,253,248,.7); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 23px; }
.insight-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 25px; }
.insight-icon { width: 35px; height: 35px; border-radius: 50%; background: #f0e3d8; display: grid; place-items: center; color: var(--terracotta); }
.insight-tag { font-size: 10px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .1em; }
.insight-card p { margin-top: auto; color: var(--ink-soft); font-size: 13px; line-height: 1.55; margin-bottom: 0; }
.result-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 27px; padding-top: 24px; border-top: 1px solid var(--line); }
.disclaimer { font-size: 11px; color: var(--ink-faint); max-width: 550px; }

.simple-page { max-width: 930px; }
.history-list { display: grid; gap: 10px; margin-top: 28px; }
.history-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 18px 20px; background: rgba(255,253,248,.7); border: 1px solid var(--line); border-radius: 16px; }
.history-info { display: flex; align-items: center; gap: 14px; }
.history-thumb { width: 44px; height: 44px; border-radius: 13px; background: #f1e0d5; display: grid; place-items: center; color: var(--terracotta); font-size: 22px; }
.history-info strong { display: block; font-size: 13px; margin-bottom: 2px; }
.history-info span { font-size: 11px; color: var(--ink-faint); }
.empty-state { background: rgba(255,253,248,.65); border: 1px dashed #cfc4b5; border-radius: 20px; padding: 55px 24px; text-align: center; margin-top: 28px; }
.empty-symbol { font-size: 38px; color: var(--gold); margin-bottom: 12px; }
.empty-state p { color: var(--ink-soft); max-width: 300px; margin: 0 auto 20px; font-size: 13px; }
.settings-list { display: grid; gap: 1px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; margin-top: 33px; }
.setting { background: rgba(255,253,248,.7); padding: 20px 22px; display: flex; justify-content: space-between; align-items: center; gap: 25px; }
.setting + .setting { border-top: 1px solid var(--line); }
.setting strong { font-size: 13px; display: block; margin-bottom: 3px; }
.setting p { margin: 0; font-size: 12px; color: var(--ink-faint); }
.switch { width: 40px; height: 23px; border: 0; padding: 3px; border-radius: 99px; background: var(--moss); flex: 0 0 auto; }
.switch::after { content: ''; display: block; width: 17px; height: 17px; border-radius: 50%; background: white; transform: translateX(17px); transition: transform .2s; }
.switch.off { background: var(--paper-deep); }
.switch.off::after { transform: translateX(0); }

.toast-region { position: fixed; right: 24px; bottom: 24px; z-index: 20; display: grid; gap: 10px; }
.toast { color: white; background: var(--ink); box-shadow: var(--shadow); padding: 13px 16px; border-radius: 12px; font-size: 12px; max-width: 310px; animation: toast-in .25s ease both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 900px) {
  .sidebar { display: none; }
  .mobile-header { display: flex; height: 72px; padding: 0 22px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(246,242,234,.92); position: sticky; top: 0; z-index: 6; }
  .mobile-header .brand { font-size: 20px; }
  .icon-button { border: 0; background: transparent; color: var(--ink); font-size: 22px; }
  #app { width: 100%; margin-left: 0; }
  .page { padding: 34px 24px 55px; }
  .home-hero { min-height: auto; grid-template-columns: 1fr; gap: 20px; }
  .hand-visual { min-height: 360px; order: -1; }
  .home-copy { padding-bottom: 30px; }
  .hand-caption { right: 6%; bottom: 5px; }
}
@media (max-width: 620px) {
  h1 { font-size: 45px; }
  h2 { font-size: 38px; }
  .page-top, .result-header { display: block; margin-bottom: 27px; }
  .page-top .button, .result-header .button-row { margin-top: 20px; }
  .home-lower, .choice-grid, .result-grid { grid-template-columns: 1fr; }
  .reading-layout { grid-template-columns: 1fr; gap: 30px; }
  .progress-line { margin: 20px 0 31px; }
  .progress-bar { flex: 1; }
  .result-banner, .result-footer { display: block; }
  .result-banner .button { margin-top: 18px; }
  .result-footer .button-row { margin-top: 19px; }
  .history-row { align-items: flex-start; }
  .history-row .button { padding: 0; min-height: 30px; }
  .setting { align-items: flex-start; }
}

/* Módulos adicionais do app linhas da Alma */
.compare-hero { display: flex; align-items: center; justify-content: center; gap: 35px; min-height: 210px; margin-top: 28px; }
.compare-person { display: grid; justify-items: center; gap: 4px; text-align: center; }
.compare-person small { color: var(--ink-faint); font-size: 11px; }
.compare-avatar { width: 67px; height: 67px; border-radius: 50%; display: grid; place-items: center; background: #f0ded1; color: var(--terracotta); font-family: Fraunces, Georgia, serif; font-size: 28px; border: 1px solid #e3c8b7; }
.muted-avatar { background: var(--paper-deep); color: var(--ink-faint); border-style: dashed; }
.compare-plus { font-family: Fraunces, Georgia, serif; font-size: 30px; color: var(--gold); }
.feature-row { display: flex; align-items: flex-start; gap: 18px; padding: 21px 0; border-top: 1px solid var(--line); }
.feature-row p { margin-bottom: 0; font-size: 13px; }
.feature-number, .guide-index { color: var(--terracotta); font-size: 11px; letter-spacing: .1em; font-weight: 700; }
.journal-compose textarea { display: block; width: 100%; resize: vertical; margin: 14px 0 16px; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: #fffdf8; color: var(--ink); line-height: 1.6; }
.journal-compose textarea::placeholder { color: #a9a39a; }
.journal-list { display: grid; gap: 12px; margin-top: 20px; }
.journal-entry { padding: 19px 22px; background: rgba(255,253,248,.68); border: 1px solid var(--line); border-radius: 15px; }
.journal-entry span { color: var(--terracotta); text-transform: uppercase; letter-spacing: .1em; font-size: 10px; }
.journal-entry p { margin: 9px 0 0; color: var(--ink-soft); font-family: Fraunces, Georgia, serif; font-size: 17px; }
.guide-list { display: grid; gap: 9px; margin-top: 30px; }
.guide-row { display: grid; grid-template-columns: 30px 45px 1fr 24px; align-items: center; gap: 13px; padding: 20px 21px; background: rgba(255,253,248,.7); border: 1px solid var(--line); border-radius: 15px; }
.guide-row h3 { margin: 4px 0 6px; }
.guide-row p { margin: 0; color: var(--ink-soft); font-size: 12px; max-width: 610px; }
.guide-icon { width: 35px; height: 35px; border-radius: 50%; display: grid; place-items: center; background: #f1e2d6; color: var(--terracotta); }
.guide-arrow { color: var(--terracotta); }
.premium-badge { display: inline-flex; color: var(--terracotta); font-weight: 700; letter-spacing: .14em; font-size: 11px; margin-bottom: 13px; }
.premium-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; margin-top: 32px; }
.premium-card { background: rgba(255,253,248,.72); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 27px; }
.premium-card.featured { background: var(--ink); color: #f8f0e6; border-color: var(--ink); }
.premium-card.featured .card-index, .premium-card.featured .check-list li::before { color: #e4b97f; }
.premium-card .check-list { margin: 26px 0; }
.premium-card .price { display: block; font-family: Fraunces, Georgia, serif; font-size: 31px; font-weight: 500; margin-top: 18px; }
.premium-card .price small { font-family: 'DM Sans', system-ui, sans-serif; font-size: 12px; color: var(--ink-faint); }
.premium-card.featured .price small { color: #bbc0ba; }
@media (max-width: 620px) { .compare-hero { gap: 16px; } .premium-grid { grid-template-columns: 1fr; } .guide-row { grid-template-columns: 24px 35px 1fr; } .guide-arrow { display: none; } }

/* Bootstrap 5 bridge: o layout usa grid, utilities, offcanvas e componentes Bootstrap. */
.offcanvas-lg.sidebar { background: rgba(246,242,234,.98); }
.navbar-toggler { padding: .35rem .55rem; border: 1px solid var(--line); border-radius: 12px; }
.navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(185,103,74,.2); }
.btn-close:focus { box-shadow: 0 0 0 .2rem rgba(185,103,74,.2); }
.btn, .form-control, .form-select, .form-check-input { border-radius: 12px; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--terracotta); box-shadow: 0 0 0 .2rem rgba(185,103,74,.15); }

@media (min-width: 992px) {
  .sidebar.offcanvas-lg { visibility: visible !important; transform: none !important; position: fixed !important; width: 245px; height: 100vh; }
  .sidebar.offcanvas-lg .offcanvas-body { overflow-y: auto; }
}
@media (max-width: 991.98px) {
  .sidebar.offcanvas-lg { width: min(320px, 88vw); border-right: 0; box-shadow: 12px 0 40px rgba(23,43,58,.15); }
  .sidebar.offcanvas-lg .offcanvas-body { padding: 0 24px 24px !important; }
  .sidebar.offcanvas-lg .sidebar-kicker { margin: 10px 0 28px 35px; }
  .sidebar.offcanvas-lg .sidebar-note { margin-top: 32px; }
  .mobile-header { min-height: 68px; padding: 0 18px; background: rgba(246,242,234,.96); backdrop-filter: blur(12px); }
  #app { min-height: calc(100vh - 68px); }
  .page { padding: 30px 18px 50px; }
}
@media (max-width: 575.98px) {
  .page { padding-inline: 16px; }
  .home-hero { gap: 4px; }
  .hand-visual { min-height: 295px; }
  .hand-svg { width: min(68%, 240px); }
  .hand-caption { right: 0; max-width: 126px; font-size: 10px; }
  .button-row > .button, .button-row > a.button { flex: 1 1 100%; width: 100%; }
  .button-row > .button-ghost { width: auto; flex-basis: auto; }
  .upload-zone { min-height: 230px; }
  .result-header .button-row { display: grid; grid-template-columns: 1fr 1fr; }
  .result-header .button-row .button { width: 100%; }
  .result-header .button-row .button-primary { grid-column: 1 / -1; }
  .compare-hero { min-height: 180px; }
  .compare-person strong { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Landing de chegada — linhas da Alma */
.landing-shell { padding: 2px 0 12px; }
.landing-topbar { display:flex; align-items:center; justify-content:space-between; gap:20px; padding: 0 0 22px; border-bottom:1px solid var(--line); }
.landing-label { color:var(--ink); font-size:10px; font-weight:700; letter-spacing:.18em; }
.landing-status { color:var(--ink-faint); font-size:10px; margin-left:18px; }
.landing-status i { display:inline-block; width:6px; height:6px; border-radius:50%; background:#748c6c; margin-right:6px; vertical-align:1px; box-shadow:0 0 0 4px rgba(116,140,108,.12); }
.button-small { min-height:38px; padding:0 15px; font-size:12px; }
.button-large { min-height:52px; padding:0 22px; }
.landing-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,.9fr); gap:54px; align-items:center; min-height:650px; }
.landing-copy { padding:28px 0 28px 7px; position:relative; z-index:2; }
.landing-copy h1 { font-size:clamp(45px,5.6vw,80px); max-width:710px; margin:18px 0 23px; }
.landing-copy h1 em { color:var(--terracotta); font-style:normal; }
.landing-lede { max-width:570px; color:var(--ink-soft); font-size:17px; line-height:1.7; }
.landing-actions { margin-top:31px; }
.landing-proof { display:flex; align-items:center; gap:13px; margin-top:33px; color:var(--ink-soft); }
.landing-proof > span { color:var(--gold); font-size:22px; }
.landing-proof strong, .landing-proof small { display:block; }
.landing-proof strong { font-family:Fraunces, Georgia, serif; font-size:16px; font-weight:500; }
.landing-proof small { color:var(--ink-faint); font-size:11px; margin-top:3px; }
.landing-portrait { min-height:620px; position:relative; overflow:hidden; border-radius:30px; background:#1c2831; box-shadow:0 24px 60px rgba(23,43,58,.16); isolation:isolate; }
.landing-portrait::before { content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(18,31,39,.08) 35%,rgba(18,31,39,.78) 100%); pointer-events:none; }
.landing-portrait img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; object-position:center; z-index:0; }
.portrait-glow { position:absolute; width:220px; height:220px; border-radius:50%; background:rgba(220,169,113,.2); filter:blur(35px); top:-45px; right:-30px; z-index:1; }
.portrait-orbit { position:absolute; z-index:2; width:75%; aspect-ratio:1; border:1px solid rgba(243,202,147,.48); border-radius:50%; top:9%; left:12%; transform:rotate(-18deg); }
.portrait-orbit::before { content:'✦'; position:absolute; top:4%; right:16%; color:#f3ca93; font-size:19px; }
.portrait-caption { position:absolute; z-index:3; left:28px; right:28px; bottom:27px; color:#fff9ee; display:grid; grid-template-columns:35px 1fr; column-gap:11px; align-items:center; }
.portrait-caption span { grid-row:span 2; color:#e9bc82; font:500 25px/1 Fraunces, Georgia, serif; }
.portrait-caption strong { font:500 19px/1.1 Fraunces, Georgia, serif; }
.portrait-caption small { color:rgba(255,249,238,.7); font-size:11px; margin-top:4px; }
.landing-divider { border-top:1px solid var(--line); }
.technique-section { display:grid; grid-template-columns:minmax(240px,.82fr) minmax(0,1.18fr); gap:70px; padding:60px 7px 54px; }
.technique-intro h2 { font-size:clamp(32px,3.8vw,50px); margin:13px 0 18px; }
.technique-intro p { color:var(--ink-soft); font-size:13px; line-height:1.7; max-width:395px; }
.text-link { color:var(--terracotta); font-size:12px; font-weight:700; display:inline-flex; gap:8px; align-items:center; margin-top:10px; }
.text-link:hover { color:var(--terracotta-dark); }
.technique-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:11px; align-items:stretch; }
.technique-card { min-height:205px; padding:20px 18px; border:1px solid var(--line); border-radius:16px; background:rgba(255,253,248,.64); }
.technique-card:hover { border-color:#caa38d; transform:translateY(-3px); transition:transform .2s,border .2s; }
.technique-number { display:block; color:var(--terracotta); font:500 25px/1 Fraunces, Georgia, serif; margin-bottom:30px; }
.technique-card h3 { font:500 21px/1 Fraunces, Georgia, serif; }
.technique-card p { color:var(--ink-faint); font-size:11px; line-height:1.5; margin-bottom:0; }
.landing-footer-note { display:flex; justify-content:space-between; gap:20px; padding:15px 7px 0; border-top:1px solid var(--line); color:var(--ink-faint); font-size:10px; }
.landing-footer-note span:first-child { color:var(--terracotta); font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.auth-modal { border:1px solid var(--line); border-radius:22px; background:var(--paper); box-shadow:0 25px 80px rgba(23,43,58,.2); }
.auth-modal .modal-header { align-items:flex-start; border-bottom:0; padding:30px 30px 7px; }
.auth-modal .modal-header h2 { font-size:35px; margin:10px 0 0; }
.auth-modal .modal-body { padding:13px 30px 30px; }
.auth-modal label { display:block; color:var(--ink-soft); font-size:12px; font-weight:600; margin:15px 0 6px; }
.auth-modal .form-control { border-color:var(--line); background:var(--white); min-height:46px; font-size:13px; }
.auth-switch, .auth-terms { color:var(--ink-faint); font-size:11px; margin:18px 0 0; text-align:center; }
.auth-switch button { border:0; padding:0; background:transparent; color:var(--terracotta); font-weight:700; }

@media (max-width: 991.98px) {
  .landing-hero { grid-template-columns:1fr; gap:30px; min-height:0; padding:34px 0 46px; }
  .landing-copy { padding:0; }
  .landing-portrait { min-height:510px; max-width:560px; width:100%; margin:0 auto; order:-1; }
  .technique-section { grid-template-columns:1fr; gap:30px; padding-top:42px; }
}
@media (max-width: 575.98px) {
  .landing-shell { padding-top:4px; }
  .landing-topbar { align-items:flex-start; }
  .landing-status { display:block; margin:5px 0 0; }
  .landing-topbar .button-row { gap:7px; }
  .landing-topbar .button-small { min-height:35px; padding:0 11px; font-size:11px; }
  .landing-copy h1 { font-size:46px; }
  .landing-lede { font-size:15px; }
  .landing-actions { display:grid; grid-template-columns:1fr; }
  .landing-portrait { min-height:420px; border-radius:22px; }
  .portrait-caption { left:20px; right:20px; bottom:20px; }
  .technique-cards { grid-template-columns:1fr; }
  .technique-card { min-height:0; }
  .technique-number { margin-bottom:17px; }
  .landing-footer-note { display:grid; gap:7px; }
  .auth-modal .modal-header, .auth-modal .modal-body { padding-left:22px; padding-right:22px; }
}

/* Home de entrada: sem navegação global */
body.landing-mode .sidebar, body.landing-mode .mobile-header { display:none !important; }
body.landing-mode #app { width:100%; margin-left:0; }
body.landing-mode .page { max-width:1380px; padding-left:clamp(22px,5vw,80px); padding-right:clamp(22px,5vw,80px); }
body.landing-mode .landing-shell { max-width:1240px; margin:0 auto; }
.future-section { border-top:1px solid var(--line); padding:58px 7px 52px; }
.future-heading { display:grid; grid-template-columns:minmax(240px,.75fr) minmax(250px,.7fr) minmax(250px,1fr); gap:35px; align-items:start; }
.future-heading h2 { font-size:clamp(32px,3.8vw,50px); margin:12px 0 0; }
.future-heading p { color:var(--ink-soft); font-size:13px; line-height:1.7; max-width:385px; margin:28px 0 0; }
.future-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:11px; margin-top:35px; }
.future-card { min-height:190px; display:flex; gap:15px; padding:20px 18px; border:1px solid var(--line); border-radius:16px; background:rgba(255,253,248,.64); }
.future-card:hover { border-color:#caa38d; transform:translateY(-3px); transition:transform .2s,border .2s; }
.future-symbol { flex:0 0 auto; color:var(--gold); font:500 28px/1 Fraunces,Georgia,serif; }
.future-label { color:var(--terracotta); text-transform:uppercase; letter-spacing:.12em; font-size:9px; font-weight:700; }
.future-card h3 { font:500 19px/1.1 Fraunces,Georgia,serif; margin:8px 0 11px; }
.future-card p { color:var(--ink-faint); font-size:11px; line-height:1.5; margin:0; }
.future-swatches { display:flex; flex-direction:column; gap:5px; padding-top:2px; }
.future-swatches i { width:25px; height:25px; border-radius:50%; display:block; border:2px solid rgba(255,255,255,.75); box-shadow:0 2px 5px rgba(23,43,58,.1); }
.future-swatches i:nth-child(1) { background:var(--terracotta); }
.future-swatches i:nth-child(2) { background:#233a4d; }
.future-swatches i:nth-child(3) { background:var(--gold); }
.future-disclaimer { color:var(--ink-faint); font-size:10px; line-height:1.5; margin:24px 0 0; padding-left:40px; }
@media (max-width:991.98px) {
  .future-heading { grid-template-columns:1fr 1fr; gap:20px; }
  .future-heading p { margin-top:0; }
  .future-cards { grid-template-columns:1fr; }
}
@media (max-width:575.98px) {
  body.landing-mode .page { padding-left:16px; padding-right:16px; }
  .future-section { padding-top:42px; }
  .future-heading { grid-template-columns:1fr; gap:12px; }
  .future-heading p { margin-top:0; }
  .future-disclaimer { padding-left:0; }
}

/* Autenticação — entrada editorial sem navegação lateral */
body.auth-mode .sidebar, body.auth-mode .mobile-header { display:none !important; }
body.auth-mode #app { width:100%; margin-left:0; }
body.auth-mode .page { max-width:1380px; padding:0 clamp(22px,5vw,80px) 35px; }
.auth-page { max-width:1240px; min-height:100vh; margin:0 auto; }
.auth-brandbar { display:flex; align-items:center; justify-content:space-between; padding:27px 0 20px; border-bottom:1px solid var(--line); }
.auth-brandbar .brand { color:var(--ink); }
.auth-back { color:var(--ink-faint); font-size:11px; }
.auth-back:hover { color:var(--terracotta); }
.auth-layout { display:grid; grid-template-columns:minmax(0,.88fr) minmax(400px,1.12fr); gap:80px; align-items:center; min-height:calc(100vh - 90px); padding:45px 4vw 65px; }
.register-layout { grid-template-columns:minmax(0,1.08fr) minmax(370px,.92fr); align-items:start; padding-top:70px; }
.auth-form-column { max-width:480px; }
.auth-form-column h1, .register-info h1 { font-size:clamp(48px,5vw,74px); margin:18px 0 20px; }
.auth-form-column h1 em, .register-info h1 em { color:var(--terracotta); font-style:normal; }
.auth-lede { color:var(--ink-soft); font-size:15px; line-height:1.7; max-width:425px; }
.auth-form { margin-top:28px; }
.auth-form label { display:block; color:var(--ink-soft); font-size:12px; font-weight:600; margin:16px 0 7px; }
.auth-form .form-control { min-height:48px; border-color:var(--line); background:var(--white); font-size:13px; }
.auth-form .form-control::placeholder { color:#a9a39a; }
.auth-form-row { display:flex; align-items:center; justify-content:space-between; gap:15px; margin:15px 0 24px; }
.auth-form-row .text-link { margin:0; font-size:11px; }
.remember-label, .terms-label { display:flex !important; align-items:center; gap:7px; margin:0 !important; font-size:11px !important; font-weight:400 !important; color:var(--ink-faint) !important; }
.remember-label input, .terms-label input { accent-color:var(--terracotta); }
.auth-switch { color:var(--ink-faint); font-size:12px; text-align:center; margin:20px 0 0; }
.auth-switch a { color:var(--terracotta); font-weight:700; }
.auth-portrait { height:610px; border-radius:28px; overflow:hidden; position:relative; background:#1c2831; box-shadow:0 24px 60px rgba(23,43,58,.15); isolation:isolate; }
.auth-portrait img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.auth-portrait-shade { position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(18,31,39,.02) 32%,rgba(18,31,39,.85) 100%); }
.auth-portrait-copy { position:absolute; z-index:2; left:31px; bottom:30px; color:#fff9ee; }
.auth-portrait-copy .card-index { color:#e9bc82; }
.auth-portrait-copy h2 { font-size:42px; margin:12px 0 10px; }
.auth-portrait-copy p { color:rgba(255,249,238,.76); font-size:12px; margin:0; }
.auth-portrait-mark { position:absolute; z-index:2; top:28px; right:30px; color:#e9bc82; font-size:25px; }
.register-info { max-width:570px; }
.register-info .auth-lede { max-width:490px; }
.palmistry-note { display:flex; gap:16px; padding:24px 0 24px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:37px; }
.note-symbol { flex:0 0 auto; color:var(--gold); font:500 32px/1 Fraunces,Georgia,serif; }
.palmistry-note h3 { font:500 22px/1.1 Fraunces,Georgia,serif; margin:9px 0 10px; }
.palmistry-note p { color:var(--ink-soft); font-size:12px; line-height:1.7; margin:0; }
.register-pill-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.register-pill-row span { color:var(--terracotta); border:1px solid #e1c6b7; border-radius:99px; padding:7px 11px; font-size:10px; }
.register-form-card { width:100%; background:rgba(255,253,248,.72); border:1px solid var(--line); border-radius:22px; padding:31px; box-shadow:0 18px 50px rgba(39,45,38,.05); }
.form-card-header h2 { font-size:37px; margin:12px 0 4px; }
.form-card-header p { color:var(--ink-faint); font-size:12px; margin:0; }
.register-form-card .auth-form { margin-top:17px; }
.register-form-card .terms-label { align-items:flex-start; margin:20px 0 23px !important; line-height:1.45; }
.auth-disclaimer { color:var(--ink-faint); font-size:10px; text-align:center; margin:0; }
@media (max-width:991.98px) {
  .auth-layout, .register-layout { grid-template-columns:1fr; gap:35px; min-height:0; padding:45px 0 50px; }
  .auth-form-column, .register-info { max-width:650px; }
  .auth-portrait { order:-1; height:440px; max-width:560px; width:100%; }
  .register-form-card { max-width:570px; }
}
@media (max-width:575.98px) {
  body.auth-mode .page { padding-left:16px; padding-right:16px; }
  .auth-brandbar { padding-top:19px; }
  .auth-brandbar .brand { font-size:20px; }
  .auth-layout, .register-layout { padding-top:30px; }
  .auth-form-column h1, .register-info h1 { font-size:48px; }
  .auth-portrait { height:380px; border-radius:22px; }
  .auth-portrait-copy { left:21px; bottom:22px; }
  .auth-portrait-copy h2 { font-size:33px; }
  .register-form-card { padding:22px 19px; }
  .auth-form-row { align-items:flex-start; flex-direction:column; }
}