/* JEP · Imersão de Produto — mesma identidade do Caderno ANIMA_L */
:root {
  --bege: #EFDAD3;
  --bege-novo: #DDD0C8;
  --offwhite: #FEEEE1;
  --terracota: #B37A64;
  --peach: #FFBE98;
  --vermelho: #892230;
  --verde: #014040;
  --laranja: #E37342;
  --branco: #FFFFFF;

  --fonte-titulo: "Plus Jakarta Sans", sans-serif;
  --fonte-corpo: "Inter", sans-serif;

  --radius: 16px;
  --pilula: 9999px;
  --sombra: 0 8px 24px rgba(0, 0, 0, 0.07);
  --menu-w: 280px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (min-width: 1024px) { html { scroll-padding-top: 24px; } }

body {
  margin: 0;
  font-family: var(--fonte-corpo);
  font-size: 15px;
  line-height: 1.65;
  color: var(--verde);
  background: var(--bege);
}
@media (min-width: 400px) { body { font-size: 16px; } }
@media (min-width: 768px) { body { font-size: 18px; } }

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  text-wrap: balance;
  overflow-wrap: break-word;
}
h1 { font-size: 32px; }
h2 { font-size: 26px; }
h3 { font-size: 20px; }
h4 { font-size: 17px; }
@media (min-width: 768px) {
  h1 { font-size: 52px; }
  h2 { font-size: 36px; }
  h3 { font-size: 23px; }
  h4 { font-size: 19px; }
}
p { margin: 0 0 14px; text-wrap: pretty; }
ul, ol { padding-left: 1.2em; margin: 0 0 14px; }
li { margin-bottom: 6px; text-wrap: pretty; }
strong { font-weight: 700; }

button { font-family: inherit; cursor: pointer; }

/* ===== Layout com menu lateral ===== */
.layout { display: block; }
@media (min-width: 1024px) {
  .layout { display: grid; grid-template-columns: var(--menu-w) 1fr; }
}

.menu {
  display: none;
}
@media (min-width: 1024px) {
  .menu {
    display: block;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    background: var(--offwhite);
    border-right: 1px solid var(--bege-novo);
    padding: 28px 20px;
  }
}
.menu .marca {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terracota);
  margin-bottom: 18px;
}
.menu a {
  display: block;
  color: var(--verde);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.35;
  padding: 6px 10px;
  border-radius: 10px;
}
.menu a:hover { background: var(--bege); }
.menu a.ativo { background: var(--verde); color: var(--branco); }
.menu .grupo {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 13px;
  margin: 16px 0 4px;
  padding-left: 10px;
  color: var(--laranja);
}
.menu .sub { padding-left: 22px; font-size: 13px; }

/* barra do celular */
.barra-mobile {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--offwhite);
  border-bottom: 1px solid var(--bege-novo);
  padding: 10px 16px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.barra-mobile label { font-family: var(--fonte-titulo); font-weight: 800; font-size: 13px; white-space: nowrap; }
.barra-mobile select {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--bege-novo);
  background: var(--branco);
  color: var(--verde);
}
@media (min-width: 1024px) { .barra-mobile { display: none; } }

.conteudo { min-width: 0; }
.container { max-width: 980px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 768px) { .container { padding-inline: 40px; } }

section.bloco { padding-block: 40px; }
@media (min-width: 768px) { section.bloco { padding-block: 64px; } }
section.bloco + section.bloco { border-top: 1px solid var(--bege-novo); }

/* ===== Capa ===== */
.capa {
  background: var(--offwhite);
  text-align: center;
  padding-block: 56px 48px;
}
@media (min-width: 768px) { .capa { padding-block: 96px 80px; } }
.kicker {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terracota);
  margin-bottom: 14px;
}
@media (min-width: 768px) { .kicker { font-size: 14px; } }
.capa .subtitulo {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 18px;
  color: var(--laranja);
  margin-bottom: 28px;
}
.frase-mae {
  max-width: 720px;
  margin: 0 auto 24px;
  font-family: var(--fonte-titulo);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.35;
  text-wrap: balance;
}
.frase-mae span { color: var(--vermelho); }
@media (min-width: 768px) { .frase-mae { font-size: 30px; } }
.mantra {
  display: inline-block;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.1em;
  padding: 8px 18px;
  border-radius: var(--pilula);
  background: var(--verde);
  color: var(--branco);
}
.rascunho {
  background: var(--peach);
  color: var(--verde);
  font-size: 14px;
  text-align: center;
  padding: 8px 16px;
}

/* ===== Cabeçalho de parte ===== */
.cabeca-parte {
  background: var(--offwhite);
  text-align: center;
  padding-block: 48px;
}
@media (min-width: 768px) { .cabeca-parte { padding-block: 80px; } }
.cabeca-parte .numero {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 64px;
  line-height: 1;
  color: var(--peach);
}
@media (min-width: 768px) { .cabeca-parte .numero { font-size: 96px; } }

/* ===== Etiquetas de camada ===== */
.camada {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--pilula);
  margin-bottom: 14px;
}
@media (min-width: 768px) { .camada { font-size: 12px; } }
.camada-conceito { background: var(--bege); color: var(--verde); }
.camada-mao { background: var(--laranja); color: var(--branco); }
.camada-ativacao { background: rgba(255,255,255,0.15); color: var(--peach); }

.item-num {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  color: var(--laranja);
  font-size: 15px;
  margin-bottom: 4px;
}

/* ===== Card de conceito ===== */
.card-conceito {
  background: var(--branco);
  border-radius: var(--radius);
  box-shadow: var(--sombra);
  padding: 22px 18px;
  margin-bottom: 20px;
}
@media (min-width: 768px) { .card-conceito { padding: 36px 40px; } }
.card-conceito .lead { font-size: 1.05em; }

.formula {
  background: var(--offwhite);
  border-left: 4px solid var(--vermelho);
  border-radius: 0 12px 12px 0;
  padding: 14px 16px;
  font-weight: 600;
  margin: 16px 0;
}

/* exemplos A e B */
.exemplos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 18px; }
@media (min-width: 768px) { .exemplos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.exemplo {
  min-width: 0;
  background: var(--offwhite);
  border-radius: 12px;
  padding: 16px;
  font-size: 0.93em;
}
.exemplo .quem {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 13px;
  color: var(--terracota);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.exemplo ul { margin-bottom: 8px; }
.exemplo .principal {
  border-top: 1px dashed var(--terracota);
  padding-top: 8px;
  margin: 8px 0 0;
}
.exemplo .principal b { color: var(--vermelho); }
.exemplo.largo { grid-column: 1 / -1; }
.exemplo dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; }
.exemplo dt { font-weight: 700; }
.exemplo dd { margin: 0; }
@media (max-width: 479px) {
  .exemplo dl { grid-template-columns: 1fr; gap: 0; }
  .exemplo dd { margin-bottom: 8px; }
}

/* tabela */
.tabela-wrap { overflow-x: auto; margin: 10px 0 16px; }
table { width: 100%; border-collapse: collapse; font-size: 0.92em; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--bege-novo); vertical-align: top; }
th { font-family: var(--fonte-titulo); font-weight: 800; background: var(--bege); }

/* ===== Card mão na massa ===== */
.card-mao {
  background: var(--offwhite);
  border: 2px solid var(--laranja);
  border-radius: var(--radius);
  padding: 22px 18px;
  margin-bottom: 20px;
}
@media (min-width: 768px) { .card-mao { padding: 36px 40px; } }
.card-mao .topo-mao {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.card-mao .topo-mao .camada { margin-bottom: 0; }
.tempo {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 13px;
  color: var(--laranja);
}
.dica-origem {
  font-size: 0.88em;
  background: var(--branco);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 10px 0 18px;
}
.pergunta { margin-top: 20px; }
.pergunta:first-of-type { margin-top: 10px; }
.pergunta .q {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 1em;
  margin-bottom: 4px;
}
.pergunta .ajuda { font-size: 0.88em; opacity: 0.85; margin-bottom: 8px; }
.pergunta textarea, .lacuna textarea {
  width: 100%;
  min-height: 96px;
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
  color: var(--verde);
  background: var(--branco);
  border: 1px solid var(--bege-novo);
  border-radius: 12px;
  padding: 12px 14px;
  resize: vertical;
}
.pergunta textarea:focus, .lacuna textarea:focus { outline: 2px solid var(--laranja); border-color: transparent; }

.lacuna {
  background: var(--branco);
  border-radius: 12px;
  padding: 16px;
  font-style: italic;
  line-height: 1.8;
  margin: 10px 0 14px;
}
.lacuna .branco {
  display: inline-block;
  min-width: 90px;
  border-bottom: 2px solid var(--terracota);
  font-style: normal;
  font-size: 0.82em;
  color: var(--terracota);
  text-align: center;
  line-height: 1.3;
}

/* tabelas editáveis (SDP, Jornada) */
.grade { margin: 14px 0 6px; }
.grade-cab { display: none; }
.grade-linha {
  display: grid;
  gap: 6px;
  background: var(--bege);
  border-radius: 12px;
  padding: 8px;
  margin-bottom: 10px;
}
.grade-linha textarea {
  width: 100%;
  min-height: 56px;
  font: inherit;
  font-size: 15px;
  line-height: 1.4;
  color: var(--verde);
  background: var(--branco);
  border: 1px solid var(--bege-novo);
  border-radius: 10px;
  padding: 10px 12px;
  resize: vertical;
}
.grade-linha textarea:focus { outline: 2px solid var(--laranja); border-color: transparent; }
.grade-linha textarea::placeholder { color: var(--terracota); opacity: 0.7; }
.n-sessao {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  color: var(--laranja);
  font-size: 13px;
}
.n-sessao::before { content: "Sessão "; }
@media (min-width: 768px) {
  .grade-cab {
    display: grid;
    gap: 6px;
    padding: 0 8px 6px;
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--terracota);
  }
  .grade-3 .grade-cab, .grade-3 .grade-linha { grid-template-columns: 1fr 1fr 1fr; }
  .grade-jornada .grade-cab, .grade-jornada .grade-linha { grid-template-columns: 56px 1fr 1fr; }
  .grade-linha { background: transparent; padding: 0 8px; margin-bottom: 6px; }
  .n-sessao { align-self: center; text-align: center; font-size: 18px; }
  .n-sessao::before { content: ""; }
}

/* ===== Template Final ===== */
.t-grupo {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vermelho);
  border-bottom: 2px solid var(--peach);
  padding-bottom: 6px;
  margin: 28px 0 12px;
}
.t-grupo:first-child { margin-top: 8px; }
.t-item {
  background: var(--branco);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
}
.t-item.t-destaque { border-left: 5px solid var(--vermelho); }
.t-item .q, .pergunta label.q {
  display: block;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  margin-bottom: 2px;
}
.t-item .ajuda { font-size: 0.85em; opacity: 0.8; margin-bottom: 8px; }
.t-item textarea {
  width: 100%;
  min-height: 92px;
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
  color: var(--verde);
  background: var(--offwhite);
  border: 1px solid var(--bege-novo);
  border-radius: 10px;
  padding: 10px 12px;
  resize: vertical;
}
.t-item textarea:focus { outline: 2px solid var(--laranja); border-color: transparent; }
.ver-caderno { margin-top: 8px; font-size: 0.85em; }
.ver-caderno summary { cursor: pointer; color: var(--terracota); font-weight: 600; }
.ver-texto {
  white-space: pre-wrap;
  background: var(--bege);
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 8px;
}

/* botões */
.botoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 2px solid var(--verde);
  border-radius: var(--pilula);
  background: var(--verde);
  color: var(--branco);
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 14px;
  padding: 12px 22px;
  text-decoration: none;
  text-align: center;
}
.btn:hover { filter: brightness(1.15); }
.btn-claro { background: transparent; color: var(--verde); }
@media (max-width: 479px) { .botoes .btn { width: 100%; } }

/* card da IA (destaque verde) */
.card-ia {
  background: var(--verde);
  color: var(--offwhite);
  border-radius: var(--radius);
  padding: 24px 20px;
  margin-bottom: 20px;
}
@media (min-width: 768px) { .card-ia { padding: 40px 48px; } }
.card-ia h3 { color: var(--branco); }
.camada-ia { background: var(--peach); color: var(--verde); }
.card-ia .btn { background: var(--peach); border-color: var(--peach); color: var(--verde); }
.card-ia .btn-claro { background: transparent; color: var(--peach); }
.previa-prompt {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--fonte-corpo);
  font-size: 13px;
  line-height: 1.5;
  background: rgba(255,255,255,0.08);
  color: var(--offwhite);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 16px 0 0;
  max-height: 420px;
  overflow: auto;
}
.aviso-ia { font-size: 0.88em; opacity: 0.85; margin: 14px 0 0; }

/* ===== Bônus ===== */
.cabeca-bonus { background: var(--peach); }
.cabeca-bonus .numero { color: var(--branco); }
.cabeca-bonus .btn-claro { border-color: var(--verde); }
@media (min-width: 768px) { .mapa.mapa-2 { grid-template-columns: 1fr 1fr; } }
.regras li { margin-bottom: 10px; }

.roteiro { display: grid; gap: 14px; margin-top: 16px; }
@media (min-width: 900px) { .roteiro { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
.r-bloco {
  background: var(--branco);
  border-radius: var(--radius);
  box-shadow: var(--sombra);
  padding: 18px;
  min-width: 0;
}
.r-topo { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 8px; }
.r-topo h4 { margin: 0 0 2px; }
.r-n {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--laranja);
  color: var(--branco);
  font-family: var(--fonte-titulo);
  font-weight: 800;
  display: grid; place-items: center;
}
.r-alimenta { font-size: 0.82em; font-weight: 600; color: var(--terracota); }
.r-bloco ul { margin: 0; font-size: 0.94em; }

.colheita {
  background: var(--branco);
  border-radius: 12px;
  margin-bottom: 10px;
  padding: 0 14px;
}
.colheita summary {
  cursor: pointer;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  padding: 12px 0;
}
.colheita .c-nome { font-weight: 600; color: var(--terracota); }
.c-grade { display: grid; grid-template-columns: minmax(0,1fr); gap: 4px 12px; padding-bottom: 14px; }
.c-grade label { font-size: 0.82em; font-weight: 700; color: var(--terracota); margin-top: 6px; }
.c-grade textarea {
  width: 100%;
  min-height: 64px;
  font: inherit;
  font-size: 15px;
  line-height: 1.45;
  color: var(--verde);
  background: var(--offwhite);
  border: 1px solid var(--bege-novo);
  border-radius: 10px;
  padding: 8px 12px;
  resize: vertical;
}
.c-grade textarea:focus { outline: 2px solid var(--laranja); border-color: transparent; }

/* checklist */
.check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid var(--bege-novo);
  cursor: pointer;
}
.check:last-child { border-bottom: none; }
.check input { width: 24px; height: 24px; flex: none; margin: 2px 0 0; accent-color: var(--verde); }
.check input:checked + span { text-decoration: line-through; opacity: 0.6; }

/* aviso de "copiado" */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 20px);
  background: var(--verde);
  color: var(--branco);
  font-weight: 600;
  font-size: 14px;
  padding: 12px 20px;
  border-radius: var(--pilula);
  box-shadow: 0 8px 24px rgba(1,64,64,0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
  z-index: 40;
  max-width: calc(100vw - 32px);
  text-align: center;
}
.toast.visivel { opacity: 1; transform: translate(-50%, 0); }

.aviso-salvo {
  font-size: 13px;
  opacity: 0.8;
  margin-top: 14px;
}

/* ===== Ativação (verde = destaque) ===== */
.card-ativacao {
  background: var(--verde);
  color: var(--offwhite);
  border-radius: var(--radius);
  padding: 26px 20px;
  margin-block: 8px;
}
@media (min-width: 768px) { .card-ativacao { padding: 44px 48px; } }
.card-ativacao h3 { color: var(--branco); }
.card-ativacao .duracao {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 13px;
  color: var(--peach);
  margin-bottom: 14px;
}
.card-ativacao .colher {
  background: rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 16px;
  font-size: 0.94em;
}
.card-ativacao .colher b { color: var(--peach); }

/* ===== Síntese (destaque) ===== */
.sintese .card-conceito { border-top: 6px solid var(--vermelho); }
.selo-sintese {
  display: inline-block;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vermelho);
  margin-bottom: 8px;
}
.citacao {
  font-size: 0.95em;
  font-style: italic;
  background: var(--offwhite);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
}

/* mapa da imersão */
.mapa { display: grid; gap: 12px; margin-top: 10px; }
@media (min-width: 768px) { .mapa { grid-template-columns: repeat(4, 1fr); } }
.mapa .passo {
  background: var(--offwhite);
  border-radius: 12px;
  padding: 16px;
}
.mapa .passo .n { font-family: var(--fonte-titulo); font-weight: 800; color: var(--laranja); font-size: 13px; }
.mapa .passo h4 { margin: 4px 0 6px; }
.mapa .passo p { font-size: 0.88em; margin: 0; }
.mapa .passo.bonus { background: var(--peach); }

.legenda { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.legenda .camada { margin: 0; }
.legenda .camada-ativacao { background: var(--verde); color: var(--peach); }

/* rodapé */
.rodape {
  text-align: center;
  font-size: 13px;
  padding: 32px 16px;
  opacity: 0.8;
}

/* ===== Modo apresentação ===== */
.btn-apresentar {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 30;
  border: none;
  border-radius: var(--pilula);
  background: var(--verde);
  color: var(--branco);
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 13px;
  padding: 12px 18px;
  box-shadow: 0 8px 24px rgba(1,64,64,0.35);
}
@media (max-width: 1023px) { .btn-apresentar { display: none; } }
body.apresentar { font-size: 22px; }
body.apresentar .layout { grid-template-columns: 1fr; }
body.apresentar .menu, body.apresentar .rascunho { display: none; }
body.apresentar .container { max-width: 1200px; }
body.apresentar h1 { font-size: 68px; }
body.apresentar h2 { font-size: 46px; }
body.apresentar h3 { font-size: 28px; }
body.apresentar .pergunta textarea { font-size: 18px; }