/* ============================================================
   Achadinhos da Nô — estilo compartilhado pelas 3 páginas
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}

:root{
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,"Helvetica Neue",Arial,sans-serif;
  --cream:#fff7f1; --paper:#fffdfb; --ink:#2a1c25; --ink-dim:#7c6873; --line:#f0e0d6;
  --rose:#e8456b; --amber:#f59e0b; --wpp:#1fac55; --wpp-d:#17904a;
  --r:18px; --shadow:0 10px 30px rgba(120,70,90,.09); --shadow-sm:0 4px 14px rgba(120,70,90,.07);
  --cta-h:58px;
  --a1:var(--rose); --a2:var(--amber);           /* acentos — trocados por página */
}
/* paleta por grupo */
body.g-casa{--a1:#2f9e8f;--a2:#7cc6b6}
body.g-crianca{--a1:#e8456b;--a2:#ffb3c7}

body{
  font-family:var(--font);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased;
  background:var(--cream);
  background-image:radial-gradient(circle at 12% 4%,rgba(232,69,107,.09),transparent 42%),
                   radial-gradient(circle at 92% 18%,rgba(245,158,11,.12),transparent 40%);
  background-attachment:fixed;
  padding-bottom:calc(var(--cta-h) + env(safe-area-inset-bottom) + 26px);
}
body.g-casa{background-image:radial-gradient(circle at 12% 4%,rgba(47,158,143,.12),transparent 42%),
                             radial-gradient(circle at 92% 18%,rgba(245,158,11,.1),transparent 40%)}
body.g-crianca{background-image:radial-gradient(circle at 12% 4%,rgba(232,69,107,.12),transparent 42%),
                                radial-gradient(circle at 92% 18%,rgba(124,160,255,.12),transparent 40%)}

.wrap{width:100%;max-width:520px;margin:0 auto;padding:0 20px}

/* ---------- topo ---------- */
.topbar{background:var(--ink);color:#fff8f3;text-align:center;font-size:.8rem;font-weight:600;letter-spacing:.2px;padding:9px 16px}
.topbar b{color:#ffcf8a}

.me{display:flex;align-items:center;gap:13px;padding:22px 0 0}
.me img{width:62px;height:62px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:var(--shadow-sm);flex:0 0 auto}
.me .nm{font-weight:800;font-size:1.02rem;letter-spacing:-.2px}
.me .hd{font-size:.82rem;color:var(--ink-dim)}
.badge{display:inline-flex;align-items:center;gap:5px;margin-top:4px;padding:3px 9px;border-radius:999px;
  font-size:.7rem;font-weight:800;letter-spacing:.3px;text-transform:uppercase;
  color:#8a4b00;background:#ffeccd;border:1px solid #ffd99a}

h1{font-size:clamp(1.75rem,8vw,2.35rem);font-weight:800;line-height:1.14;letter-spacing:-1px;margin:26px 0 12px}
h1 em{font-style:normal;position:relative;white-space:nowrap}
h1 em::after{content:"";position:absolute;left:-2px;right:-2px;bottom:.06em;height:.42em;
  background:rgba(245,158,11,.38);
  background:linear-gradient(90deg,color-mix(in srgb,var(--a2) 55%,transparent),color-mix(in srgb,var(--a1) 35%,transparent));
  border-radius:4px;z-index:-1}
.lede{font-size:1.04rem;color:var(--ink-dim);margin-bottom:22px}
.lede b{color:var(--ink);font-weight:700}

/* ---------- mock de conversa ---------- */
.chat{background:var(--paper);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);overflow:hidden;margin-bottom:10px}
.chat-top{display:flex;align-items:center;gap:9px;padding:11px 14px;background:#fbf1ea;border-bottom:1px solid var(--line)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--wpp);box-shadow:0 0 0 3px rgba(31,172,85,.16)}
.chat-top span{font-size:.78rem;font-weight:700;color:var(--ink-dim)}
.msgs{padding:16px 14px;display:flex;flex-direction:column;gap:9px}
.b{max-width:88%;padding:10px 13px;border-radius:16px 16px 16px 5px;background:#f6eee9;font-size:.9rem;
  box-shadow:var(--shadow-sm);opacity:0;animation:pop .5s cubic-bezier(.2,.8,.2,1) forwards}
.b:nth-child(1){animation-delay:.2s}.b:nth-child(2){animation-delay:.9s}.b:nth-child(3){animation-delay:1.6s}
.b strong{display:block;font-weight:800;margin-bottom:1px}
.b small{color:var(--ink-dim);font-size:.8rem}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.chat-foot{text-align:center;font-size:.72rem;color:var(--ink-dim);padding:0 14px 13px}

/* ---------- botao ---------- */
.cta{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:var(--cta-h);
  padding:0 20px;border-radius:999px;font-size:1.05rem;font-weight:800;letter-spacing:.2px;color:#fff;text-decoration:none;
  background:linear-gradient(180deg,var(--wpp),var(--wpp-d));
  box-shadow:0 8px 22px rgba(31,172,85,.32),inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .15s ease,box-shadow .15s ease}
.cta:active{transform:translateY(2px);box-shadow:0 4px 12px rgba(31,172,85,.3)}
.ic{width:23px;height:23px;fill:currentColor;flex:0 0 auto}
.under{text-align:center;font-size:.78rem;color:var(--ink-dim);margin-top:10px}

/* ---------- secoes ---------- */
section{padding:40px 0 0}
.kicker{font-size:.72rem;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--a1);margin-bottom:7px}
h2{font-size:1.4rem;font-weight:800;letter-spacing:-.5px;line-height:1.2;margin-bottom:18px}

.steps{list-style:none;position:relative;padding-left:40px}
.steps::before{content:"";position:absolute;left:14px;top:12px;bottom:12px;width:2px;background:linear-gradient(180deg,var(--a1),var(--a2))}
.steps li{position:relative;margin-bottom:20px}
.steps li:last-child{margin-bottom:0}
.steps .n{position:absolute;left:-40px;top:-1px;width:29px;height:29px;border-radius:50%;display:grid;place-items:center;
  font-size:.82rem;font-weight:800;color:#fff;background:var(--ink);box-shadow:0 0 0 5px var(--cream)}
.steps h3{font-size:1rem;font-weight:800;margin-bottom:2px}
.steps p{font-size:.92rem;color:var(--ink-dim)}

.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags span{padding:8px 13px;border-radius:999px;font-size:.87rem;font-weight:600;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-sm)}

.note{margin-top:14px;padding:20px;border-radius:var(--r);background:var(--paper);border:1px solid var(--line);
  border-left:4px solid var(--a2);box-shadow:var(--shadow-sm)}
.note h3{font-size:1.02rem;font-weight:800;margin-bottom:6px}
.note p{font-size:.93rem;color:var(--ink-dim)}
.note p+p{margin-top:8px}

details{background:var(--paper);border:1px solid var(--line);border-radius:14px;margin-bottom:9px;box-shadow:var(--shadow-sm);overflow:hidden}
summary{cursor:pointer;list-style:none;padding:14px 16px;font-size:.95rem;font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:10px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.25rem;font-weight:700;color:var(--a1);line-height:1}
details[open] summary::after{content:"–"}
details p{padding:0 16px 15px;font-size:.9rem;color:var(--ink-dim)}

/* ---------- outros grupos ---------- */
.others{display:flex;flex-direction:column;gap:10px}
.others a{display:flex;align-items:center;gap:13px;padding:14px 16px;border-radius:var(--r);text-decoration:none;color:inherit;
  background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:transform .15s ease}
.others a:active{transform:scale(.99)}
.others .emo{width:42px;height:42px;flex:0 0 auto;display:grid;place-items:center;font-size:1.3rem;border-radius:13px;
  background:#f6eee9;background:color-mix(in srgb,var(--a1) 12%,transparent)}
.others .tt{font-weight:800;font-size:.97rem}
.others .ds{font-size:.84rem;color:var(--ink-dim)}
.others .arw{margin-left:auto;color:var(--a1);font-weight:800;font-size:1.1rem}

/* ---------- final ---------- */
.final{margin-top:42px;padding:30px 22px;border-radius:26px;text-align:center;color:#fff;
  background:linear-gradient(150deg,#3a2230,#2a1c25 60%,#40202e);box-shadow:0 16px 40px rgba(42,28,37,.28)}
.final h2{color:#fff;margin-bottom:8px}
.final p{font-size:.95rem;color:#d6c3ce;margin-bottom:20px}
.final .under{color:#b8a4b0}

footer{padding:26px 0 14px;text-align:center;font-size:.74rem;line-height:1.7;color:var(--ink-dim)}

.sticky{position:fixed;left:0;right:0;bottom:0;z-index:50;padding:10px 20px calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(0deg,var(--cream) 70%,transparent);transform:translateY(130%);
  transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.sticky.show{transform:none}
.sticky .inner{max-width:480px;margin:0 auto}

.rv{opacity:0;transform:translateY(14px);animation:rv .6s cubic-bezier(.2,.8,.2,1) forwards}
.d1{animation-delay:.05s}.d2{animation-delay:.15s}.d3{animation-delay:.28s}.d4{animation-delay:.4s}
@keyframes rv{to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv,.b{opacity:1;transform:none}}