/* Sistema "Serene Wellness" — tokens em stitch_melve_platform_redesign/DESIGN.md
   Compartilhado pelas tres paginas. Editar aqui reflete em todas. */
/* Sistema "Serene Wellness" — tokens do stitch_melve_platform_redesign/DESIGN.md */
  :root{
    --background:#fdf9f4; --surface-container-low:#f7f3ee; --white:#ffffff;
    --deep-berry:#2E2230; --on-surface:#1c1c19; --on-surface-variant:#4b454a;
    --outline:#7c757b; --outline-variant:#cdc4ca; --surface-variant:#e6e2dd;
    --burnt-sienna:#C4715F; --soft-rose:#F6E4DE; --muted-sage:#5E8C6A; --warm-cream:#FAF6F1;
    --soft-shadow:0 24px 24px -12px rgba(46,34,48,.04);
    --shadow-xl:0 20px 25px -5px rgba(46,34,48,.10), 0 8px 10px -6px rgba(46,34,48,.10);
    --shadow-2xl:0 25px 50px -12px rgba(46,34,48,.25);
    --gutter:16px; --gap-md:48px; --gap-lg:80px;
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px}
  body{margin:0; background:var(--background); color:var(--on-surface);
    font-family:'Instrument Sans',system-ui,-apple-system,sans-serif; font-size:16px; line-height:24px}

  /* escala tipografica */
  .display-lg{font-family:'EB Garamond',Georgia,serif; font-size:48px; font-weight:500; line-height:56px; letter-spacing:-.02em; text-wrap:balance}
  .headline-md{font-family:'EB Garamond',Georgia,serif; font-size:32px; font-weight:500; line-height:40px; text-wrap:balance}
  .headline-sm{font-family:'EB Garamond',Georgia,serif; font-size:24px; font-weight:500; line-height:32px}
  .title-lg{font-size:20px; font-weight:600; line-height:28px}
  .body-lg{font-size:18px; font-weight:400; line-height:28px}
  .body-md{font-size:16px; font-weight:400; line-height:24px}
  .label-md{font-size:14px; font-weight:500; line-height:20px; letter-spacing:.01em}
  .label-sm{font-size:12px; font-weight:600; line-height:16px; letter-spacing:.05em}

  .wrap{max-width:1120px; margin:0 auto; padding:0 var(--gutter)}
  a{text-decoration:none; color:inherit}

  /* topo fixo */
  nav{position:fixed; top:0; left:0; right:0; z-index:50;
    background:rgba(255,255,255,.8); backdrop-filter:blur(12px)}
  .nav-in{display:flex; justify-content:space-between; align-items:center; height:80px}
  .logo{display:flex; align-items:center; gap:8px}
  .logo svg{width:32px; height:32px; color:var(--deep-berry)}
  .logo span{color:var(--deep-berry)}
  .nav-links{display:flex; gap:32px}
  .nav-links a{color:var(--on-surface-variant); transition:color .2s}
  .nav-links a:hover{color:var(--burnt-sienna)}
  .btn-pill{background:var(--burnt-sienna); color:#fff; padding:12px 24px; border-radius:9999px;
    border:0; cursor:pointer; font-family:inherit; transition:opacity .2s}
  .btn-pill:hover{opacity:.88}

  main{padding-top:96px; padding-bottom:64px}
  section{padding-top:var(--gap-lg); padding-bottom:var(--gap-lg)}
  section.md{padding-top:var(--gap-md); padding-bottom:var(--gap-md)}

  /* hero */
  .hero{display:flex; align-items:center; gap:48px}
  .hero-txt{width:50%; display:flex; flex-direction:column; align-items:flex-start; gap:24px}
  .hero-txt h1{margin:0; color:var(--deep-berry)}
  .hero-txt p{margin:0; color:var(--on-surface-variant); max-width:512px}
  .hero-cta{display:flex; flex-direction:column; gap:8px; margin-top:16px}
  .btn-lg{background:var(--burnt-sienna); color:#fff; padding:16px 32px; border-radius:16px;
    border:0; cursor:pointer; font-family:inherit; transition:opacity .2s}
  .btn-lg:hover{opacity:.88}
  .hero-cta span{color:var(--outline); text-align:center; margin-top:8px}
  .hero-img{width:50%; display:flex; justify-content:center}
  .fone{position:relative; width:100%; max-width:384px}
  .fone::before{content:''; position:absolute; inset:0; background:var(--soft-rose);
    border-radius:48px; transform:rotate(-3deg) scale(1.05); z-index:0}
  .fone img{position:relative; z-index:10; width:100%; height:auto; border-radius:40px;
    box-shadow:var(--shadow-2xl); border:1px solid var(--surface-variant); display:block}

  /* privacidade */
  .privacidade{background:rgba(246,228,222,.5); border-radius:32px; padding:64px;
    display:flex; flex-direction:column; gap:32px; box-shadow:var(--soft-shadow)}
  .privacidade h2{margin:0; color:var(--deep-berry)}
  .privacidade ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:24px; max-width:768px}
  .privacidade li{display:flex; align-items:flex-start; gap:16px}
  .privacidade li svg{width:24px; height:24px; flex:none; margin-top:4px; stroke:var(--burnt-sienna);
    fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
  .privacidade li b{display:block; margin-bottom:4px; color:var(--deep-berry); font-weight:600;
    font-size:20px; line-height:28px}
  .privacidade li p{margin:0; color:var(--on-surface-variant)}

  /* telas */
  .titulo-centro{text-align:center; max-width:672px; margin:0 auto 64px}
  .titulo-centro h2{margin:0 0 16px; color:var(--deep-berry)}
  .titulo-centro p{margin:0; color:var(--on-surface-variant)}
  .telas{display:grid; grid-template-columns:repeat(3,1fr); gap:32px; align-items:start}
  .tela{display:flex; flex-direction:column; align-items:center; gap:24px}
  .tela:nth-child(2){margin-top:48px}
  .tela:nth-child(3){margin-top:96px}
  .tela img{width:100%; max-width:280px; height:auto; border-radius:32px;
    box-shadow:var(--shadow-xl); border:1px solid var(--surface-variant); display:block}
  .tela span{color:var(--deep-berry); text-align:center}

  /* recursos */
  .caixa{background:var(--surface-container-low); border-radius:24px; margin:32px 0;
    padding:var(--gap-lg) 0}
  .caixa-cab{max-width:768px; margin:0 0 48px; padding:0 48px}
  .caixa-cab h2{margin:0 0 16px; color:var(--deep-berry)}
  .caixa-cab p{margin:0; color:var(--on-surface-variant)}
  .grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px; padding:0 48px}
  .card{background:var(--white); padding:32px; border-radius:16px; box-shadow:var(--soft-shadow);
    transition:box-shadow .3s}
  .card:hover{box-shadow:var(--shadow-xl)}
  .card svg{width:30px; height:30px; margin-bottom:16px; stroke:var(--burnt-sienna); fill:none;
    stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
  .card h3{margin:0 0 8px; color:var(--deep-berry)}
  .card p{margin:0; color:var(--on-surface-variant)}

  /* rodape */
  footer{background:var(--warm-cream); padding:var(--gap-md) 0}
  .rodape-topo{display:flex; justify-content:space-between; gap:48px}
  .rodape-marca{display:flex; flex-direction:column; gap:16px; max-width:384px}
  .rodape-marca p{margin:0; color:var(--on-surface-variant)}
  .rodape-cols{display:flex; gap:48px}
  .rodape-col{display:flex; flex-direction:column; gap:16px}
  .rodape-col span{text-transform:uppercase; color:var(--outline)}
  .rodape-col a{color:var(--on-surface-variant); transition:color .2s}
  .rodape-col a:hover{color:var(--burnt-sienna)}
  .rodape-fim{margin-top:48px; padding-top:32px; border-top:1px solid var(--surface-variant)}
  .rodape-fim > p{margin:0; color:var(--outline-variant); max-width:768px}
  .rodape-linha{display:flex; justify-content:space-between; align-items:center; margin-top:16px;
    color:var(--outline-variant); gap:16px; flex-wrap:wrap}

  @media (max-width:860px){
    .display-lg{font-size:32px; line-height:40px; letter-spacing:-.01em}
    .hero{flex-direction:column; gap:48px}
    .hero-txt, .hero-img{width:100%}
    .nav-links, .btn-pill-wrap{display:none}
    .privacidade{padding:32px}
    .telas{grid-template-columns:1fr; gap:48px}
    .tela:nth-child(2), .tela:nth-child(3){margin-top:0}
    .caixa-cab, .grid{padding:0 16px}
    .grid{grid-template-columns:1fr}
    .rodape-topo{flex-direction:column}
    .rodape-cols{flex-direction:column; gap:32px}
    section{padding-top:var(--gap-md); padding-bottom:var(--gap-md)}
  }

/* ── paginas internas (suporte, privacidade) ───────────────────────────── */
.pagina-cab{max-width:768px; margin:0 0 48px}
.pagina-cab h1{margin:0 0 16px; color:var(--deep-berry)}
.pagina-cab p{margin:0; color:var(--on-surface-variant)}
.pagina-cab .atualizado{display:block; margin-top:16px; color:var(--outline)}
.contato{display:block; max-width:768px; background:rgba(246,228,222,.5); border-radius:24px; padding:32px;
  text-align:center; color:var(--deep-berry); margin-bottom:48px; box-shadow:var(--soft-shadow);
  transition:box-shadow .3s}
.contato:hover{box-shadow:var(--shadow-xl)}
.contato span{display:block; color:var(--on-surface-variant); margin-bottom:8px}
.texto{max-width:768px}
.texto h2{margin:40px 0 12px; color:var(--deep-berry)}
.texto h2:first-child{margin-top:0}
.texto p{margin:0 0 20px; color:var(--on-surface-variant)}
.texto a{color:var(--burnt-sienna)}
.texto a:hover{text-decoration:underline; text-underline-offset:3px}
.texto strong{color:var(--deep-berry); font-weight:600}
.faq{display:flex; flex-direction:column; gap:24px; max-width:768px}
.faq .card h3{margin:0 0 8px}
.faq .card p{margin:0}
.faq .card p + p{margin-top:12px}