/* =========================================================================
   AGENDA CHEIA BEAUTY — área de membros
   Mobile primeiro. Sem framework, sem fonte externa, sem animação.
   Para trocar a identidade visual, mexa só nos tokens do :root abaixo.

   HIERARQUIA — cada cartão tem três camadas, e elas não se parecem:
     1. O PRONTO   o que ela copia e publica. Caixa própria, texto maior.
     2. A AÇÃO     o botão Copiar.
     3. A INSTRUÇÃO como montar e quando usar. Menor, cinza, com rótulo.
   Se em algum momento essas três camadas voltarem a ter o mesmo tamanho e
   a mesma cor, a tela vira parede de texto de novo.
   ========================================================================= */

:root{
  --creme:   #FEF9F5;
  --creme-2: #FCF2EE;
  --branco:  #FFFFFF;
  --rosa:    #D41F54;
  --rosa-d:  #B01243;
  --rosa-cl: #FDE7ED;
  --vinho:   #56173A;
  --tinta:   #170B12;
  --tinta-2: #6E5C65;
  --tinta-3: #8C7B83;
  --linha:   #F0DAE1;

  /* Escala com degraus visíveis. Antes eram 17,5 / 15,5 / 14,5 / 13,5:
     diferenças de 1px que ninguém enxerga, e por isso tudo parecia igual. */
  --t-xxl: 26px;   /* título de módulo */
  --t-xl:  20px;   /* headline do post, título de página do guia */
  --t-lg:  17px;   /* o texto pronto, que é o que se lê de verdade */
  --t-md:  15px;   /* instruções */
  --t-sm:  13.5px; /* dicas e meta */
  --t-xs:  11px;   /* rótulos em caixa alta */

  --raio: 14px;
  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }

/* O atributo hidden vem do navegador como display:none, mas qualquer regra
   nossa com display: vence a do navegador. Sem esta linha, .canva e .filtros
   apareciam mesmo escondidos por JavaScript. */
[hidden]{ display:none !important; }

body{
  font-family:var(--fonte);
  font-size:16px;
  line-height:1.55;
  color:var(--tinta);
  background:var(--creme);
  -webkit-text-size-adjust:100%;
  overflow-wrap:break-word;
}
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ list-style:none; padding:0; }
:focus-visible{ outline:2px solid var(--rosa); outline-offset:3px; border-radius:6px; }

.wrap{ max-width:720px; margin:0 auto; padding:0 16px 56px; }

/* ---------- topo ---------- */
.topo{
  background:var(--vinho); color:#FDF6F3;
  text-align:center;
  padding:22px 16px 20px;
}
.marca{ font-size:21px; font-weight:700; letter-spacing:-.01em; }
.marca em{ color:#F27A9E; font-style:italic; }
.topo__frase{ font-size:var(--t-md); color:rgba(253,246,243,.78); margin-top:4px; }

/* ---------- cartões dos módulos ---------- */
.cards{ display:grid; gap:12px; margin-top:22px; }

.card{
  background:var(--branco);
  border:1px solid var(--linha);
  border-radius:var(--raio);
  padding:18px 18px 16px;
}
/* O "Comece Aqui" é o primeiro passo, não mais um módulo da lista. */
.card--destaque{ background:var(--rosa-cl); border-color:#F3C6D3; }
.card__ico{
  display:inline-grid; place-items:center;
  width:34px; height:34px; margin-bottom:10px;
  border-radius:50%;
  background:var(--rosa-cl); color:var(--rosa);
  font-size:16px; line-height:1;
}
.card--destaque .card__ico{ background:var(--branco); }
.card__nome{ font-size:19px; font-weight:700; line-height:1.25; letter-spacing:-.01em; }
.card__frase{ font-size:var(--t-md); color:var(--tinta-2); margin:3px 0 14px; }

.btn{
  display:block; width:100%;
  min-height:48px; padding:12px 18px;
  border-radius:999px;
  background:var(--rosa); color:#fff;
  font-size:var(--t-md); font-weight:600; letter-spacing:.03em;
  text-transform:uppercase; text-align:center;
}
.btn:hover{ background:var(--rosa-d); }

/* ---------- tela de módulo ---------- */
.voltar{
  display:inline-block; margin:16px 0 10px;
  padding:8px 14px 8px 0;
  font-size:var(--t-md); font-weight:600; color:var(--rosa);
}
.mod__titulo{ font-size:var(--t-xxl); font-weight:700; line-height:1.15; letter-spacing:-.02em; }
.mod__frase{ font-size:var(--t-md); color:var(--tinta-2); margin-top:5px; }

.canva{
  display:inline-block; margin-top:14px;
  padding:9px 16px;
  border:1px solid var(--rosa); border-radius:999px;
  color:var(--rosa); font-size:14px; font-weight:600; text-decoration:none;
}

/* ---------- filtros ---------- */
.filtros{ display:flex; flex-wrap:wrap; gap:7px; margin:18px 0 4px; }
.filtro{
  padding:8px 14px;
  border:1px solid var(--linha); border-radius:999px;
  background:var(--branco);
  font-size:13.5px; font-weight:600; color:var(--tinta-2);
}
.filtro[aria-pressed="true"]{ background:var(--rosa); border-color:var(--rosa); color:#fff; }

.contagem{ font-size:var(--t-sm); color:var(--tinta-3); margin:12px 0 4px; }

/* ---------- cabeçalho de grupo ----------
   Sem isto, "Todos" era uma fita de 30 cartões iguais sem nenhum marco
   para a vista se apoiar. */
.grupo{
  display:flex; align-items:center; gap:10px;
  margin:26px 0 12px;
  font-size:var(--t-xs); font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--rosa-d);
}
.grupo::after{ content:""; flex:1; height:1px; background:var(--linha); }
.grupo span{
  font-size:11px; font-weight:700; letter-spacing:0;
  color:var(--tinta-3);
}

/* ---------- cartão de item ---------- */
.itens{ display:grid; gap:14px; }

.item{
  background:var(--branco);
  border:1px solid var(--linha);
  border-radius:var(--raio);
  padding:16px 16px 18px;
}
.item__topo{ display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.item__id{
  font-size:12px; font-weight:700; letter-spacing:.08em;
  color:var(--rosa);
}
.item__cat{
  font-size:var(--t-xs); font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--tinta-2);
  padding:3px 9px;
  background:var(--creme-2); border-radius:999px;
}

/* A situação da mensagem é o que ela procura enquanto rola. Fica em negrito
   escuro, mas menor que o texto pronto: acha rápido, lê depois. */
.item__sit{
  font-size:16px; font-weight:700; line-height:1.3;
  letter-spacing:-.01em;
  margin-bottom:10px;
}

/* =============== CAMADA 1: O PRONTO =============== */
/* Tudo que ela publica ou envia mora aqui dentro, junto, numa superfície
   só. Antes a chamada estava solta lá embaixo, no mesmo cinza da instrução
   de layout, e não parecia fazer parte do conteúdo. */
.pronto{
  background:var(--creme-2);
  border-left:3px solid var(--rosa);
  border-radius:0 10px 10px 0;
  padding:14px 16px 15px;
}
.pronto__h{
  font-size:var(--t-xl); font-weight:700; line-height:1.22;
  letter-spacing:-.015em;
  margin-bottom:7px;
}
.pronto__t{
  white-space:pre-wrap;
  font-size:var(--t-lg); line-height:1.5;
  color:var(--tinta);
}
.pronto__t + .pronto__t{ margin-top:7px; }
/* A chamada é a última linha do que ela publica: mesma caixa, cor de ação. */
.pronto__cta{
  display:flex; gap:7px;
  margin-top:11px; padding-top:11px;
  border-top:1px solid #EFDCE2;
  font-size:var(--t-md); font-weight:600; color:var(--rosa-d);
}
.pronto__cta::before{ content:"↳"; color:var(--rosa); font-weight:400; }

/* =============== CAMADA 2: A AÇÃO =============== */
.copiar{
  display:block; width:100%;
  margin-top:12px;
  min-height:46px; padding:11px 16px;
  border:1.5px solid var(--rosa); border-radius:999px;
  color:var(--rosa); font-size:13.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
}
.copiar:hover{ background:var(--rosa); color:#fff; }

/* =============== CAMADA 3: A INSTRUÇÃO =============== */
/* Rótulo pequeno em caixa alta + texto cinza. Nunca compete com o pronto. */
.nota{ margin-top:14px; }
.nota__rot{
  font-size:var(--t-xs); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--tinta-3);
  margin-bottom:3px;
}
.nota__t{ font-size:var(--t-md); line-height:1.5; color:var(--tinta-2); }

/* A dica é comentário, não instrução. Separada por um fio e menor ainda. */
.dica{
  display:flex; gap:8px;
  margin-top:14px; padding-top:12px;
  border-top:1px solid var(--linha);
  font-size:var(--t-sm); line-height:1.5; color:var(--tinta-3);
}
.dica::before{ content:"💡"; flex:none; }

.tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:5px; }
.tag{
  font-size:12.5px; font-weight:600;
  padding:4px 9px;
  background:var(--rosa-cl); color:var(--rosa-d);
  border-radius:6px;
}

/* ---------- calendário ---------- */
/* O número do dia vira âncora visual: ela procura "dia 14", não "prova". */
.dia__topo{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.dia__num{
  flex:none;
  display:grid; place-items:center;
  width:46px; height:46px;
  background:var(--vinho); color:#FDF6F3;
  border-radius:12px;
  font-size:19px; font-weight:700; line-height:1;
}
.dia__num small{ display:block; font-size:9px; font-weight:600; letter-spacing:.1em; opacity:.7; }
/* Formato é o que fazer, objetivo é por quê. Antes eram duas pílulas iguais. */
.dia__fmt{ display:block; font-size:16px; font-weight:700; line-height:1.2; }
.dia__obj{
  display:block;
  font-size:var(--t-xs); font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--tinta-3); margin-top:2px;
}
.item__h{
  font-size:var(--t-xl); font-weight:700; line-height:1.22;
  letter-spacing:-.015em; margin-bottom:10px;
}

/* ---------- guia ---------- */
.pagina{
  background:var(--branco);
  border:1px solid var(--linha);
  border-radius:var(--raio);
  padding:20px 18px 22px;
}
.pagina__num{
  font-size:var(--t-xs); font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--rosa);
}
.pagina__t{
  font-size:23px; font-weight:700; line-height:1.2;
  letter-spacing:-.02em; margin:3px 0 12px;
}
/* A primeira frase de cada página carrega a ideia. Sai do corpo. */
.pagina__lead{ font-size:var(--t-lg); line-height:1.5; margin-bottom:10px; }
.pagina p{ font-size:var(--t-md); line-height:1.6; color:var(--tinta-2); }
.pagina p + p{ margin-top:9px; }
.pagina b{ color:var(--tinta); }

/* Blocos do tipo "Termo: explicação" viram par, não parágrafo corrido. */
.def{
  display:grid; grid-template-columns:auto 1fr; gap:4px 10px;
  padding:9px 0;
  border-top:1px solid var(--linha);
}
.def + .def{ margin-top:0; }
.def b{
  grid-column:1; font-size:var(--t-md); font-weight:700; color:var(--rosa-d);
  white-space:nowrap;
}
.def span{ grid-column:2; font-size:var(--t-md); line-height:1.5; color:var(--tinta-2); }

/* ---------- tabela de nichos ---------- */
.nichos{ margin-top:14px; display:grid; gap:0; }
.nicho{ display:grid; gap:2px; padding:10px 0; border-top:1px solid var(--linha); }
.nicho b{ font-size:var(--t-md); color:var(--rosa-d); }
.nicho span{ font-size:var(--t-md); color:var(--tinta-2); }

/* ---------- rodapé ---------- */
.rodape{
  background:var(--tinta); color:rgba(253,246,243,.72);
  text-align:center; padding:26px 18px 30px;
  font-size:14px;
}
.rodape__legal{ font-size:13px; line-height:1.6; margin:8px auto 0; max-width:52ch; }

/* ---------- aviso de copiado ---------- */
.aviso{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  padding:11px 20px;
  background:var(--tinta); color:#fff;
  border-radius:999px; font-size:14px; font-weight:600;
  opacity:0; pointer-events:none;
}
.aviso.ver{ opacity:1; }

/* ---------- telas maiores ---------- */
@media (min-width:640px){
  .cards{ grid-template-columns:repeat(2,1fr); }
  .card--destaque{ grid-column:1 / -1; }
  :root{ --t-xxl:30px; --t-xl:21px; }
  .copiar{ width:auto; min-width:220px; }
}

/* Impressão: serve para quem quiser o calendário no papel. */
@media print{
  .topo, .rodape, .voltar, .filtros, .copiar, .canva, .aviso{ display:none; }
  .item, .pagina{ break-inside:avoid; border-color:#ccc; }
  body{ background:#fff; }
}