@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;9..144,700&display=swap');

/* Jardim de Conversas: soft editorial modernism; #277C73 é o Verde Alga Mansa proprietário. */
:root { --background:#f8f6f0; --foreground:#173b3a; --card:#fffdf8; --card-foreground:#173b3a; --primary:#277c73; --primary-foreground:#fffdf8; --muted:#e8eee8; --muted-foreground:#6b7d78; --border:#dfe7df; --sage:#dce9df; --clay:#f1dfd0; --teal-soft:#d7ece7; --cream:#f8f6f0; --ink:#173b3a; --terracotta:#c4775d; --shadow:0 16px 42px rgba(36,73,68,.08); --shadow-sm:0 7px 24px rgba(36,73,68,.07); --ease-out:cubic-bezier(.23,1,.32,1); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:var(--background); color:var(--foreground); font-family:'DM Sans',sans-serif; -webkit-font-smoothing:antialiased; }
button { font:inherit; color:inherit; border:0; background:none; cursor:pointer; }
button:focus-visible { outline:3px solid rgba(39,124,115,.35); outline-offset:3px; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { font-family:'Fraunces',serif; font-weight:600; letter-spacing:-.025em; }
.app-shell { min-height:100vh; background:radial-gradient(circle at 92% 2%, rgba(219,235,226,.6), transparent 26rem), var(--background); }
.topbar { height:78px; max-width:1200px; margin:0 auto; padding:0 32px; display:flex; justify-content:space-between; align-items:center; }
.brand-mark { display:flex; align-items:center; gap:11px; }
.brand-symbol { position:relative; width:29px; height:29px; }
.brand-symbol span { position:absolute; width:18px; height:11px; border-radius:100% 0 100% 0; transform:rotate(42deg); top:8px; }
.brand-symbol span:first-child { left:0; background:var(--primary); }
.brand-symbol span:last-child { right:0; background:var(--terracotta); transform:rotate(138deg); }
.brand-name { font-family:'Fraunces',serif; font-size:20px; color:var(--ink); letter-spacing:-.04em; }.brand-name em { color:var(--primary); font-style:normal; }
.topbar-actions { display:flex; align-items:center; gap:10px; }.avatar-button { width:35px; height:35px; display:grid; place-items:center; border-radius:50%; background:#d9e8df; color:var(--primary); font-size:11px; font-weight:700; letter-spacing:.04em; transition:transform .18s var(--ease-out); }.avatar-button:active { transform:scale(.97); }.mobile-menu { display:none!important; }
.app-main { max-width:1200px; margin:0 auto; padding:35px 32px 110px; }.home-view { animation:rise .38s var(--ease-out); }.welcome-row { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:34px; }.eyebrow { display:block; color:var(--muted-foreground); font-size:10px; font-weight:700; letter-spacing:.15em; line-height:1.4; }.welcome-row h1 { font-size:clamp(34px,5vw,54px); line-height:1.03; margin-top:11px; }.welcome-row h1 em,.done-view h1 em { color:var(--primary); font-style:normal; }.lede { margin-top:13px; color:var(--muted-foreground); max-width:470px; font-size:16px; line-height:1.55; }.sun-orbit { width:84px; height:84px; border:1px solid #cadfd3; border-radius:50%; display:grid; place-items:center; color:var(--terracotta); font-size:25px; position:relative; margin:10px 45px 0 0; }.sun-orbit:before,.sun-orbit:after { content:""; position:absolute; border:1px solid #dbe7dd; border-radius:50%; }.sun-orbit:before { inset:-11px 11px 11px -11px; }.sun-orbit:after { inset:11px -11px -11px 11px; }
.hero-card { min-height:306px; display:grid; grid-template-columns:1.06fr .94fr; overflow:hidden; border-radius:22px; background:#dce9df; box-shadow:var(--shadow); }.hero-copy { padding:42px 40px 38px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }.hero-kicker { display:flex; align-items:center; gap:7px; color:var(--primary); font-size:10px; font-weight:700; letter-spacing:.14em; }.hero-copy h2 { font-size:clamp(29px,3.6vw,46px); line-height:1.03; max-width:440px; margin-top:15px; }.hero-copy p { max-width:415px; color:#51706b; line-height:1.55; margin:16px 0 24px; }.hero-art { min-height:306px; overflow:hidden; position:relative; }.hero-art:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#dce9df 0%,transparent 25%); }.hero-art img { height:100%; width:100%; object-fit:cover; }
.primary-button,.secondary-button { min-height:46px; display:inline-flex; align-items:center; justify-content:center; gap:9px; border-radius:11px; padding:0 17px; font-weight:700; font-size:13px; transition:transform .16s var(--ease-out), box-shadow .16s var(--ease-out), background .16s; }.primary-button { background:var(--primary); color:#fff; box-shadow:0 9px 18px rgba(39,124,115,.2); }.primary-button:hover { background:#206960; box-shadow:0 12px 23px rgba(39,124,115,.25); transform:translateY(-2px); }.primary-button:active,.secondary-button:active { transform:scale(.98); }.secondary-button { border:1px solid var(--border); color:var(--primary); background:#fffdf8; }.secondary-button:hover { background:var(--teal-soft); }.wide-button { width:100%; margin-top:28px; }.text-button { display:flex; align-items:center; gap:4px; color:var(--primary); font-size:12px; font-weight:700; }.home-grid { margin-top:42px; display:grid; grid-template-columns:minmax(0,1.6fr) minmax(280px,.8fr); gap:40px; }.section-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }.section-heading h2 { font-size:26px; margin-top:8px; }.mini-activity,.resume-card,.list-card { display:flex; align-items:center; gap:15px; width:100%; text-align:left; border:1px solid var(--border); background:var(--card); transition:transform .18s var(--ease-out),box-shadow .18s; }.mini-activity { border-radius:16px; padding:18px; margin-top:18px; }.mini-activity:hover,.resume-card:hover,.list-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-sm); }.mini-icon,.list-icon { flex:0 0 45px; width:45px; height:45px; display:grid; place-items:center; border-radius:13px; font-size:23px; }.sage { background:var(--sage); color:#4d7768; }.clay { background:var(--clay); color:#aa6651; }.teal { background:var(--teal-soft); color:var(--primary); }.card-meta { display:block; color:var(--muted-foreground); font-size:10px; font-weight:700; letter-spacing:.11em; }.mini-activity h3 { font-size:20px; margin:5px 0 3px; }.mini-activity p { color:var(--muted-foreground); font-size:13px; }.mini-activity>svg { margin-left:auto; color:var(--primary); }.progress-panel { padding:22px; border:1px solid #dce8dd; border-radius:17px; background:#eff5ec; }.progress-number { color:var(--primary); font:600 31px 'Fraunces',serif; }.progress-panel h3 { font-size:24px; margin:17px 0 15px; }.progress-line { height:7px; background:#d4e5d7; border-radius:8px; overflow:hidden; }.progress-line span { display:block; height:100%; background:var(--primary); border-radius:8px; transition:width .3s var(--ease-out); }.progress-panel p { color:var(--muted-foreground); font-size:13px; line-height:1.45; margin:13px 0 17px; }.progress-panel .secondary-button { min-height:39px; font-size:12px; }.resume-card { margin-top:30px; border-radius:14px; padding:13px 16px; max-width:550px; }.resume-symbol { width:31px; height:31px; display:grid; place-items:center; background:var(--primary); color:#fff; border-radius:50%; }.resume-card strong,.resume-card small { display:block; }.resume-card strong { font:600 16px 'Fraunces',serif; margin-top:3px; }.resume-card small { color:var(--muted-foreground); font-size:12px; margin-top:2px; }.resume-card>svg { margin-left:auto; color:var(--primary); }
.page-title { max-width:630px; margin-bottom:30px; }.page-title h1 { font-size:clamp(34px,5vw,50px); line-height:1.02; margin-top:10px; }.page-title p { margin-top:13px; color:var(--muted-foreground); line-height:1.55; max-width:540px; }.back-button { display:flex; align-items:center; gap:7px; color:var(--primary); font-size:12px; font-weight:700; margin-bottom:20px; }.step-dots { display:flex; gap:8px; margin:25px 0 27px; }.step-dots span { width:36px; height:4px; border-radius:6px; background:#dfe8df; transition:background .2s; }.step-dots span.done { background:var(--primary); }.choice-list { display:grid; gap:10px; max-width:680px; }.choice-card { display:flex; align-items:center; text-align:left; gap:14px; border:1px solid var(--border); border-radius:15px; background:var(--card); padding:17px 18px; transition:.18s var(--ease-out); }.choice-card:hover { border-color:#9ac6bb; transform:translateX(3px); }.choice-card.selected { border-color:var(--primary); background:#f0f8f3; box-shadow:0 0 0 2px rgba(39,124,115,.08); }.choice-card strong,.choice-card small { display:block; }.choice-card strong { font-size:15px; }.choice-card small { color:var(--muted-foreground); font-size:12px; margin-top:3px; }.choice-card>svg { margin-left:auto; color:#a1b6af; }.choice-check { display:grid; place-items:center; width:23px; height:23px; border-radius:50%; border:1px solid #c8d8cd; color:#fff; }.selected .choice-check { background:var(--primary); border-color:var(--primary); }.discover-note { display:flex; gap:9px; align-items:flex-start; color:var(--muted-foreground); font-size:12px; line-height:1.5; max-width:600px; margin-top:30px; }.discover-note svg { color:var(--primary); flex:0 0 auto; margin-top:1px; }
.activity-header { display:flex; justify-content:space-between; gap:30px; max-width:850px; }.category-pill { display:inline-flex; border-radius:20px; padding:6px 10px; font-size:10px; font-weight:700; letter-spacing:.06em; }.category-pill.sage { background:var(--sage); color:#4d7768; }.category-pill.clay { background:var(--clay); color:#aa6651; }.category-pill.teal { background:var(--teal-soft); color:var(--primary); }.activity-header h1 { font-size:clamp(35px,5vw,58px); line-height:1.03; margin-top:13px; }.activity-objective { color:var(--muted-foreground); line-height:1.55; max-width:620px; margin-top:13px; }.round-action { width:45px; height:45px; display:grid; place-items:center; border-radius:50%; background:#fffdf8; border:1px solid var(--border); color:var(--primary); }.round-action.liked { color:var(--terracotta); background:var(--clay); border-color:transparent; }.activity-meta { display:flex; flex-wrap:wrap; gap:17px; margin:21px 0 30px; color:var(--muted-foreground); font-size:12px; }.activity-meta span { display:flex; align-items:center; gap:6px; }.activity-meta svg { color:var(--primary); }.activity-layout { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(250px,.65fr); align-items:start; gap:22px; }.activity-main-card,.materials-card { border:1px solid var(--border); border-radius:19px; background:var(--card); }.activity-main-card { padding:30px; }.question-block { background:#eff5ec; padding:25px 27px; border-radius:14px; }.question-block blockquote { font:600 clamp(23px,3vw,31px)/1.16 'Fraunces',serif; color:var(--ink); max-width:660px; margin:16px 0 19px; }.question-line { display:block; width:46px; height:3px; background:var(--terracotta); border-radius:4px; }.steps-block { margin-top:31px; }.step-count { color:var(--muted-foreground); font-size:11px; }.step-row { display:flex; gap:18px; padding:17px 0; border-bottom:1px solid #edf0eb; }.step-row>span { color:var(--terracotta); font:600 14px 'Fraunces',serif; }.step-row p { font-size:14px; line-height:1.5; }.adaptation-box { display:flex; gap:12px; align-items:flex-start; margin-top:24px; padding:16px 17px; background:#fbf2eb; border-radius:13px; }.adaptation-mark { color:var(--terracotta); font-size:23px; }.adaptation-box p { color:#6c6961; font-size:13px; line-height:1.5; margin-top:5px; }.activity-footer-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }.materials-card { padding:24px; }.materials-card h3 { font-size:24px; margin:9px 0 20px; }.material-row { display:flex; gap:9px; align-items:flex-start; color:var(--muted-foreground); font-size:13px; line-height:1.45; padding:11px 0; border-bottom:1px solid #edf0eb; }.material-row svg { color:var(--primary); flex:0 0 auto; margin-top:1px; }.note-card { margin-top:22px; padding:16px; background:var(--teal-soft); border-radius:13px; display:flex; gap:9px; }.note-card span { color:var(--primary); }.note-card p { color:#4d706b; font-size:12px; line-height:1.45; }
.done-view { min-height:65vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; max-width:560px; margin:0 auto; }.done-orbit { position:relative; width:130px; height:130px; display:grid; place-items:center; margin-bottom:25px; border:1px solid #c8dfd1; border-radius:50%; color:var(--terracotta); }.done-orbit:before { content:""; position:absolute; inset:14px -16px -16px 14px; border:1px solid #e5d6ca; border-radius:50%; }.done-orbit span { position:absolute; }.done-orbit span:nth-of-type(1) { top:8px; right:14px; }.done-orbit span:nth-of-type(2) { bottom:20px; left:3px; }.done-orbit span:nth-of-type(3) { top:30px; left:-5px; }.done-check { width:58px; height:58px; display:grid; place-items:center; border-radius:50%; background:var(--primary); color:#fff; }.done-view h1 { font-size:48px; margin-top:12px; }.done-view>p { color:var(--muted-foreground); line-height:1.55; margin-top:12px; }.done-summary { display:flex; justify-content:center; gap:60px; margin:30px 0; padding:18px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); width:100%; }.done-summary strong { display:block; font:600 16px 'Fraunces',serif; margin-top:6px; }.done-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; }
.activity-list { display:grid; gap:11px; max-width:800px; }.list-card { border-radius:15px; padding:15px; }.list-card-copy { flex:1; min-width:0; }.list-card-copy h3 { font-size:20px; margin:4px 0 4px; }.list-card-copy p { color:var(--muted-foreground); font-size:12px; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.list-card>svg { color:var(--primary); }.empty-state { max-width:500px; text-align:center; padding:64px 20px; border:1px dashed #c8d8cd; border-radius:18px; }.empty-icon { font-size:34px; color:var(--terracotta); }.empty-state h3 { font-size:23px; margin:15px 0 7px; }.empty-state p { color:var(--muted-foreground); font-size:13px; }
.category-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; max-width:850px; }.category-card { min-height:190px; padding:21px; text-align:left; border-radius:17px; border:1px solid transparent; transition:transform .18s var(--ease-out),box-shadow .18s; }.category-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-sm); }.category-card.sage { background:var(--sage); color:var(--ink); }.category-card.clay { background:var(--clay); }.category-card.teal { background:var(--teal-soft); }.category-symbol { font:28px 'Fraunces',serif; margin-bottom:19px; }.category-card h3 { font-size:23px; margin:7px 0 7px; }.category-card p { color:#5c716b; font-size:12px; line-height:1.45; max-width:290px; }.category-card>svg { float:right; margin-top:-20px; color:var(--primary); }
.library-feature { display:grid; grid-template-columns:.9fr 1.1fr; gap:30px; padding:21px; background:#dce9df; border-radius:19px; max-width:900px; align-items:center; }.library-feature img { width:100%; height:230px; object-fit:cover; border-radius:13px; }.library-feature h2 { font-size:30px; line-height:1.08; margin:12px 0; }.library-feature p { color:#58726c; line-height:1.5; font-size:13px; margin-bottom:19px; }.bonus-list { max-width:900px; margin-top:23px; display:grid; gap:9px; }.bonus-row { display:flex; align-items:center; gap:15px; border-bottom:1px solid var(--border); padding:16px 6px; }.bonus-icon { width:39px; height:39px; display:grid; place-items:center; border-radius:11px; background:var(--clay); color:var(--terracotta); }.bonus-row>div:nth-child(2) { flex:1; }.bonus-row h3 { font-size:18px; margin:4px 0; }.bonus-row p { color:var(--muted-foreground); font-size:12px; }.bonus-row>svg { color:var(--primary); }
.settings-card { max-width:700px; border:1px solid var(--border); border-radius:18px; background:var(--card); padding:23px; }.profile-row { display:flex; gap:15px; align-items:center; padding-bottom:22px; border-bottom:1px solid var(--border); }.profile-avatar { width:49px; height:49px; display:grid; place-items:center; border-radius:50%; background:var(--primary); color:#fff; font-weight:700; font-size:12px; }.profile-row h3 { font-size:22px; margin:4px 0; }.profile-row p { color:var(--muted-foreground); font-size:12px; }.settings-line { display:flex; align-items:center; justify-content:space-between; padding:18px 0; border-bottom:1px solid #edf0eb; font-size:13px; }.settings-line strong { color:var(--primary); font-size:12px; }.settings-line svg { color:var(--primary); }.privacy-note { display:flex; gap:9px; max-width:550px; color:var(--muted-foreground); font-size:12px; line-height:1.5; margin-top:22px; }.privacy-note svg { color:var(--primary); flex:0 0 auto; }
.bottom-nav { position:fixed; z-index:20; bottom:17px; left:50%; transform:translateX(-50%); display:flex; gap:5px; padding:7px; border:1px solid rgba(223,231,223,.9); border-radius:18px; background:rgba(255,253,248,.92); box-shadow:0 12px 35px rgba(35,72,68,.15); backdrop-filter:blur(14px); }.bottom-nav button { min-width:83px; min-height:53px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; border-radius:13px; color:#8a9a94; font-size:10px; font-weight:600; transition:.18s; }.bottom-nav button.active { color:var(--primary); background:#eaf3eb; }.bottom-nav button:hover { color:var(--primary); }.menu-overlay { position:fixed; inset:0; z-index:40; background:rgba(23,59,58,.18); backdrop-filter:blur(3px); }.side-menu { width:min(320px,86vw); height:100%; padding:30px 24px; background:var(--card); box-shadow:20px 0 50px rgba(23,59,58,.16); animation:slide .25s var(--ease-out); }.menu-close { float:right; color:var(--muted-foreground); }.menu-intro { clear:both; padding:38px 0 28px; color:var(--muted-foreground); line-height:1.5; font-size:14px; }.side-menu>button:not(.menu-close) { display:flex; align-items:center; gap:11px; width:100%; padding:15px 0; border-bottom:1px solid var(--border); color:var(--ink); font-size:14px; }.side-menu>button svg { color:var(--primary); }
@keyframes rise { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } } @keyframes slide { from { opacity:0; transform:translateX(-15px); } to { opacity:1; transform:translateX(0); } }
@media (max-width:800px) { .topbar { padding:0 20px; height:68px; }.mobile-menu { display:grid!important; }.topbar .brand-mark { margin-right:auto; margin-left:12px; }.app-main { padding:26px 20px 105px; }.hero-card { grid-template-columns:1fr; }.hero-copy { padding:29px 24px 26px; }.hero-art { min-height:180px; }.hero-art:after { background:linear-gradient(0deg,#dce9df 0%,transparent 40%); }.home-grid { grid-template-columns:1fr; gap:24px; margin-top:29px; }.welcome-row { margin-bottom:25px; }.sun-orbit { transform:scale(.7); margin-right:5px; }.activity-layout,.library-feature { grid-template-columns:1fr; }.materials-card { order:-1; }.library-feature img { height:190px; }.category-grid { grid-template-columns:1fr; }.category-card { min-height:160px; }.done-view h1 { font-size:41px; } }
@media (max-width:520px) { .bottom-nav { width:calc(100% - 24px); justify-content:space-around; bottom:10px; }.bottom-nav button { min-width:0; flex:1; }.hero-copy h2 { font-size:33px; }.hero-art { min-height:155px; }.activity-main-card { padding:17px; }.question-block { padding:20px; }.question-block blockquote { font-size:24px; }.activity-footer-actions .primary-button { width:100%; }.activity-footer-actions .secondary-button { flex:1; }.done-summary { gap:27px; }.welcome-row h1 { font-size:39px; }.lede { font-size:14px; }.sun-orbit { width:65px; height:65px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }

.toast{position:fixed;left:50%;bottom:92px;transform:translateX(-50%);z-index:100;background:#173b3a;color:#fff;padding:11px 16px;border-radius:12px;font-size:13px;box-shadow:0 10px 30px rgba(0,0,0,.18)}.material-empty{color:var(--muted-foreground);font-size:13px}.library-art{height:230px;border-radius:13px;background:radial-gradient(circle at 35% 35%,#fffdf8 0 14%,transparent 15%),radial-gradient(circle at 65% 55%,#d7ece7 0 22%,transparent 23%),#dce9df;display:grid;place-items:center;font-size:72px;color:#277c73}
/* MENTE ATIVA — CORREÇÃO DEFINITIVA DE TOQUE/CLIQUE NOS CARDS DO PASSO 4
   Aplicar no FINAL do styles.css.
   Esta correção é independente do sw.js.
*/

/* Garante que cada opção seja uma área de toque real e estável */
.choice-list{
  position:relative;
  z-index:1;
  width:100%;
  max-width:680px;
  isolation:isolate;
}

.choice-card{
  position:relative;
  z-index:2;
  display:flex;
  width:100%;
  min-height:68px;
  align-items:center;
  text-align:left;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  cursor:pointer;
}

/* Os elementos internos não podem "roubar" o alvo do toque */
.choice-card > *{
  pointer-events:none;
}

/* Evita que o efeito hover de touchscreen desloque o alvo do toque */
@media (hover:none){
  .choice-card:hover{
    border-color:var(--border);
    transform:none;
  }
}

/* Em telas pequenas, deixa espaço real para o menu fixo inferior.
   Assim ele nunca fica por cima dos cards. */
@media (max-width:800px){
  .app-main{
    padding-bottom:145px;
  }

  .choice-list{
    margin-bottom:20px;
  }

  .choice-card{
    min-height:72px;
  }
}

/* Em aparelhos muito pequenos, aumenta ainda mais a área de toque. */
@media (max-width:520px){
  .choice-card{
    min-height:76px;
    padding:18px 16px;
  }

  .choice-card strong{
    font-size:16px;
  }

  .choice-card small{
    font-size:13px;
  }
}