/* =====================================================================
   ENSINE PRO — SISTEMA VISUAL
   ---------------------------------------------------------------------
   Um único arquivo de estilos para todas as ferramentas.
   Mesma estrutura do Clube do 1% (muito espaço em branco, cartões
   arredondados, uma pergunta por tela), com a paleta própria da
   Ensine Pro: azul-marinho, verde-água, coral e amarelo-pêssego.

   Para mudar uma cor ou fonte em tudo, altere só a seção 1.
   ===================================================================== */

/* 1. VARIÁVEIS ------------------------------------------------------- */
:root {
  /* Cores (paleta da marca: clara, inovadora, confiante, cheia de energia) */
  --azul: #13385A;              /* "clear": botões, títulos, capa do mapa */
  --azul-escuro: #0C2840;       /* textos fortes */
  --agua: #99D3CD;              /* "innovative": acento suave */
  --agua-clara: #D5EEEB;        /* fundos suaves, barra de progresso vazia */
  --coral: #EF7866;             /* "confident": detalhes, progresso, pontos */
  --coral-texto: #C9503E;       /* coral mais escuro, para letras pequenas legíveis */
  --amarelo: #FACD8F;           /* "energetic": linhas, selos, nome no mapa */
  --amarelo-claro: #FDE6C4;     /* destaque atrás das palavras */
  --creme: #FEF7EC;             /* fundo dos cartões */
  --fundo: #FFFFFF;
  --texto: #13283B;
  --texto-2: #3A4C5C;
  --suave: #7D8994;
  --linha: #E6E3DE;
  --erro: #C2453A;
  --ok: #3F8F7F;

  /* Fontes (as mesmas do Clube) */
  --serif: "Fraunces", Georgia, serif;
  --sans: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --script: "Sacramento", cursive;   /* use pouco: só em assinaturas e no mapa final */

  --raio: 20px;
  --raio-grande: 26px;
  --sombra: 0 18px 50px rgba(19, 56, 90, 0.08);
}

/* 2. BASE ------------------------------------------------------------ */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--fundo); color: var(--texto); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
body { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }

.shell { max-width: 580px; margin: 0 auto; padding: 16px 20px 80px; min-height: 100dvh; }

/* 3. TOPO E PROGRESSO ------------------------------------------------ */
.marca { font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--azul); text-decoration: none; }
.marca b { color: var(--coral); font-weight: 600; }
.topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin-bottom: 20px; }
.topo a, .topo button { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 8px 0; color: var(--suave); font-size: 13px; letter-spacing: .06em; text-decoration: none; cursor: pointer; }
.topo svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.progresso { flex: 1; height: 3px; background: var(--agua-clara); border-radius: 3px; overflow: hidden; max-width: 180px; }
.progresso i { display: block; height: 100%; background: var(--coral); border-radius: 3px; transition: width .4s; }
.passo { font-size: 12px; color: var(--suave); letter-spacing: .08em; white-space: nowrap; }

/* 4. TELAS E TIPOGRAFIA --------------------------------------------- */
.tela { display: flex; flex-direction: column; gap: 22px; animation: sobe .5s cubic-bezier(.2,.7,.2,1) both; }
@keyframes sobe { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.olho { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--coral-texto); font-weight: 600; }
.titulo { font-family: var(--serif); font-size: clamp(28px, 7.4vw, 38px); line-height: 1.15; letter-spacing: -.01em; color: var(--azul-escuro); text-wrap: balance; }
.titulo em { font-style: normal; background: linear-gradient(transparent 58%, var(--amarelo-claro) 58%); padding: 0 2px; }
.h2 { font-family: var(--serif); font-size: 22px; line-height: 1.3; color: var(--azul-escuro); }
.h3 { font-weight: 600; font-size: 15px; color: var(--texto); }
.lead { color: var(--texto-2); font-size: 16.5px; }
.suave { color: var(--suave); }
.pequeno { font-size: 14px; }
.manuscrito { font-family: var(--script); font-size: 40px; line-height: 1.1; color: var(--coral-texto); font-weight: 400; }
.centro { text-align: center; align-items: center; }
.pilha { display: flex; flex-direction: column; gap: 12px; }
.linha { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.divisor { height: 1px; background: var(--linha); border: 0; margin: 4px 0; }
.filete { width: 36px; height: 2px; background: var(--coral); border-radius: 2px; }

/* 5. BOTÕES ---------------------------------------------------------- */
.botao { display: inline-flex; justify-content: center; align-items: center; gap: 8px; width: 100%; min-height: 54px; padding: 14px 26px; border-radius: 999px; border: 1px solid var(--azul); background: var(--azul); color: #fff; font: 500 12px/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .2s, opacity .2s; }
.botao:hover { background: var(--azul-escuro); }
.botao:disabled { opacity: .35; cursor: not-allowed; }
.botao--contorno { background: transparent; color: var(--azul); }
.botao--contorno:hover { background: var(--creme); }
.botao--coral { background: var(--coral); border-color: var(--coral); }
.botao--coral:hover { background: var(--coral-texto); }
.botao--texto { background: none; border: 0; min-height: 44px; color: var(--suave); text-transform: none; letter-spacing: .02em; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; width: auto; padding: 8px; }
.botao--texto:hover { background: none; color: var(--azul); }
.botao--pequeno { min-height: 40px; padding: 8px 16px; font-size: 11px; width: auto; }

/* 6. CARTÕES --------------------------------------------------------- */
.cartao { background: var(--creme); border: 1px solid transparent; border-radius: var(--raio); padding: 20px; }
.cartao--branco { background: #fff; border-color: var(--linha); }
.cartao--azul { background: var(--azul); color: #fff; }
.cartao--azul .olho { color: var(--amarelo); }
.cartao--azul .h2 { color: #fff; }
.ferramenta { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start; text-decoration: none; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-grande); padding: 22px; transition: box-shadow .2s, border-color .2s; }
.ferramenta:hover { box-shadow: var(--sombra); border-color: var(--amarelo); }
.ferramenta__num { width: 52px; height: 52px; border-radius: 50%; background: var(--agua-clara); display: grid; place-items: center; font-family: var(--serif); font-size: 24px; color: var(--azul); }
.ferramenta__estado { font-size: 12px; color: var(--suave); margin-top: 8px; display: flex; align-items: center; gap: 8px; }
.ferramenta__estado i { display: inline-block; height: 4px; width: 70px; background: var(--agua-clara); border-radius: 4px; overflow: hidden; }
.ferramenta__estado i b { display: block; height: 100%; background: var(--coral); }

/* 7. CAMPOS ---------------------------------------------------------- */
.campo { display: flex; flex-direction: column; gap: 8px; }
.campo > span { font-size: 14px; color: var(--texto-2); font-weight: 500; }
.campo small { color: var(--suave); font-size: 13px; }
input[type=text], textarea, select { width: 100%; border: 1px solid #D6D2C8; border-radius: 14px; padding: 14px 16px; background: #fff; font-size: 16px; line-height: 1.5; }
textarea { min-height: 110px; resize: vertical; }
input[type=text]:focus, textarea:focus, select:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px var(--agua-clara); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1px solid #D6D2C8; background: #fff; border-radius: 999px; padding: 9px 14px; font-size: 14px; cursor: pointer; transition: all .15s; }
.chip[aria-pressed=true] { background: var(--azul); border-color: var(--azul); color: #fff; }
.chip:disabled { opacity: .35; cursor: default; }
.opcao { display: flex; gap: 14px; align-items: flex-start; text-align: left; width: 100%; border: 1px solid #D6D2C8; background: #fff; border-radius: 16px; padding: 16px; cursor: pointer; }
.opcao[aria-pressed=true] { border-color: var(--azul); box-shadow: 0 0 0 1px var(--azul); background: var(--agua-clara); }
.opcao .ponto { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #BDBAB2; margin-top: 2px; }
.opcao[aria-pressed=true] .ponto { border: 6px solid var(--azul); }
.opcao small { display: block; color: var(--suave); font-size: 13px; margin-top: 2px; }

/* Lista de itens que a pessoa vai adicionando */
.itens { display: flex; flex-direction: column; gap: 8px; }
.item { display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 1px solid var(--linha); border-radius: 14px; padding: 12px 14px; font-size: 15px; }
.item p { flex: 1; overflow-wrap: anywhere; }
.item button { flex: none; background: none; border: 0; color: var(--suave); cursor: pointer; padding: 0 4px; font-size: 18px; line-height: 1; }
.adicionar { display: flex; gap: 8px; }
.adicionar input { flex: 1; }
.adicionar .botao { width: auto; min-height: 50px; padding: 10px 18px; }

/* 8. PONTOS DE INTEGRAÇÃO (só no protótipo) -------------------------- */
/* Caixas tracejadas que mostram onde entra o que vem da plataforma */
.integra { border: 1.5px dashed var(--coral); border-radius: 16px; padding: 14px 16px; background: #FFF9F2; font-size: 14px; color: var(--texto-2); display: flex; flex-direction: column; gap: 6px; }
.integra__rotulo { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--coral-texto); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.integra__rotulo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); }
.integra ul { display: flex; flex-direction: column; gap: 4px; }
.integra li::before { content: "· "; color: var(--coral); }
.integra .chips { margin-top: 4px; }

/* 9. MAPA FINAL ------------------------------------------------------ */
.mapa { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-grande); overflow: hidden; }
.mapa__cab { background: var(--azul); color: #fff; padding: 28px 22px 24px; text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.mapa__cab .olho { color: var(--amarelo); }
.mapa__cab .titulo { color: #fff; font-size: clamp(26px, 6.5vw, 34px); }
.mapa__cab .manuscrito { color: var(--amarelo); font-size: 44px; }
.mapa__corpo { padding: 22px; display: flex; flex-direction: column; gap: 18px; }
.mapa__grade { display: grid; gap: 12px; }
.bloco { border-radius: 18px; padding: 16px 18px; background: var(--creme); break-inside: avoid; }
.bloco--azul { background: var(--agua-clara); }
.bloco--contorno { background: #fff; border: 1px solid var(--amarelo); }
.bloco__t { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--coral-texto); font-weight: 600; margin-bottom: 8px; }
.bloco--azul .bloco__t { color: var(--azul); }
.bloco ul { display: flex; flex-direction: column; gap: 6px; }
.bloco li { font-size: 14.5px; line-height: 1.5; color: var(--texto-2); padding-left: 14px; position: relative; overflow-wrap: anywhere; }
.bloco li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); }
.bloco p { font-size: 15px; color: var(--texto-2); }
.mapa__rodape { padding: 14px 22px 20px; text-align: center; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--suave); border-top: 1px solid var(--linha); }

/* Desenho do Ikigai */
.roda svg { width: 100%; height: auto; display: block; max-width: 420px; margin: 0 auto; }

/* Linha do tempo (Evidências) */
.tempo { display: flex; flex-direction: column; gap: 0; position: relative; }
.marco { display: grid; grid-template-columns: 22px 1fr; gap: 14px; position: relative; padding-bottom: 18px; }
.marco::before { content: ""; position: absolute; left: 10px; top: 22px; bottom: 0; width: 2px; background: var(--amarelo); }
.marco:last-child::before { display: none; }
.marco__ponto { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--coral); margin-top: 2px; }
.marco--feito .marco__ponto { background: var(--coral); }
.marco__data { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--suave); }
.marco h4 { margin: 2px 0 6px; font-family: var(--serif); font-weight: 400; font-size: 18px; color: var(--azul-escuro); }
.marco dl { margin: 0; display: grid; gap: 6px; }
.marco dt { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--coral-texto); font-weight: 600; }
.marco dd { margin: 0 0 4px; font-size: 14.5px; color: var(--texto-2); overflow-wrap: anywhere; }

/* Etiquetas */
.etiqueta { display: inline-block; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: var(--amarelo-claro); color: var(--azul); }
.etiqueta--coral { background: var(--amarelo); color: #7A4E10; }

/* Aviso rápido */
.aviso { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--azul-escuro); color: #fff; padding: 12px 18px; border-radius: 999px; font-size: 14px; z-index: 9; max-width: calc(100% - 32px); text-align: center; }

/* 10. COMPUTADOR ----------------------------------------------------- */
/* Grupos de cartões (ferramentas na página inicial, fichas do guia) */
.grupo { display: flex; flex-direction: column; gap: 12px; }

@media (min-width: 900px) {
  /* Tela cheia: o conteúdo ocupa a largura da janela, com margens confortáveis */
  .shell, .shell--estreito { max-width: 1440px; padding: 32px clamp(40px, 5vw, 96px) 96px; }
  .topo { margin-bottom: 32px; }
  .progresso { max-width: 420px; }
  .tela { gap: 30px; }
  .titulo { font-size: clamp(44px, 3.6vw, 60px); }
  .lead { font-size: 20px; max-width: 900px; }
  .h2 { font-size: 26px; }
  .pequeno { font-size: 15px; }
  .tela > .botao, .tela > .pilha > .botao, .acoes > .botao { width: auto; min-width: 300px; align-self: flex-start; }
  .tela.centro > .botao, .tela.centro > .pilha > .botao { align-self: center; }
  .acoes, .tela > .pilha:has(> .botao + .botao) { flex-direction: row; flex-wrap: wrap; }
  .chip { font-size: 16px; padding: 11px 18px; }
  input[type=text], textarea, select { font-size: 18px; }
  textarea { min-height: 150px; }
  .cartao { padding: 32px; }
  .integra { font-size: 15px; padding: 18px 22px; }
  /* Opções e listas em duas colunas */
  .tela > .pilha:has(> .opcao) { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .itens { display: grid; grid-template-columns: 1fr 1fr; }
  .tela > .campo, .tela > label.campo { max-width: 1100px; }
  /* Cartões lado a lado */
  .grupo { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 18px; align-items: stretch; }
  .grupo > .olho { grid-column: 1 / -1; }
  .ferramenta { padding: 28px; }
  /* Mapa final */
  .mapa__cab { padding: 44px 32px 36px; }
  .mapa__cab .titulo { font-size: 42px; }
  .mapa__cab .manuscrito { font-size: 56px; }
  .mapa__corpo { padding: 40px; gap: 24px; }
  .mapa__grade { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .mapa__grade .bloco--largo { grid-column: 1 / -1; }
  .bloco { padding: 20px 22px; }
  .bloco li, .bloco p { font-size: 15.5px; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .mapa__grade { grid-template-columns: 1fr 1fr; }
}

/* 11. IMPRESSÃO / PDF ------------------------------------------------ */
@media print {
  @page { margin: 12mm; }
  body { padding: 0; }
  .shell { max-width: none; padding: 0; }
  .nao-imprime, .topo, .integra, .aviso { display: none !important; }
  .tela { animation: none; }
  .mapa { border: 0; }
  .mapa__grade { grid-template-columns: 1fr 1fr; }
  .mapa__grade .bloco--largo { grid-column: 1 / -1; }
  .mapa, .mapa * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}