/* ==========================================================================
   Ducor · o app. Fase 5, entrega B (08/10, pedidos do Victor):
   5 abas (Caminho · Rotina · Objetivos · Insights · Comunidade), o "Hoje" logo abaixo da contagem do cérebro,
   o Perfil no avatar (foto, descrição, insígnias), Insights, "Estudar com a Ducor", "De onde veio isso?" e o tutorial.
   Usa as peças de ducor.css (fase 1) e o cartão de cerebro.css (fase 2).
   ========================================================================== */
[hidden] { display: none !important; } /* nada que o app esconde volta a aparecer por causa de um display de classe */

.app { overflow: hidden; }
.tela { position: fixed; inset: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--fundo); }
.tela[hidden] { display: none; }
.tela-corpo { padding: 16px var(--margem) calc(env(safe-area-inset-bottom, 0px) + 140px); }
.espaco-abas { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 104px); }
.formulario { display: grid; gap: 22px; align-content: start; }

/* O pé da tela: o botão principal fica sempre ao alcance do polegar. */
.tela-pe {
  position: fixed; z-index: 4; left: 0; right: 0; bottom: 0;
  padding: 22px var(--margem) calc(env(safe-area-inset-bottom, 0px) + 18px);
  background: linear-gradient(180deg, rgba(17, 11, 8, 0) 0%, var(--fundo) 34%);
}
.botao:disabled { opacity: .38; cursor: default; transform: none; }
.botao svg { width: 20px; height: 20px; flex: none; }
.nota-prototipo {
  margin-top: 14px; text-align: center;
  font: 500 10.5px/1.4 var(--f-texto); letter-spacing: .18em; text-transform: uppercase; color: var(--texto-3);
}
button.link-pe { width: 100%; border: 0; background: none; font-family: var(--f-texto); cursor: pointer; }
.link-pe { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 4px; font-size: 14.5px; font-weight: 500; color: var(--texto-2); text-decoration: none; }

/* Topo com volta */
.topo-voltar { display: grid; place-items: center; width: 44px; height: 44px; margin-left: -12px; color: var(--linho); }
.topo-voltar svg { width: 24px; height: 24px; }

/* Os passos da entrada (1 de 4 ... 4 de 4) */
.passos { display: flex; gap: 5px; }
.passos i { width: 22px; height: 4px; border-radius: 2px; background: rgba(241, 233, 220, .16); transition: background-color .4s ease; }
.passos i.on { background: var(--linho); }
.passos[hidden], .plano-atualizado[hidden] { display: none; }

/* ---------- Campos da conta ---------- */
.erro { min-height: 0; font-size: 13px; line-height: 1.35; color: #EC9A6B; }
.erro:empty { display: none; }
.erro a { display: inline-block; margin: -13px -4px; padding: 13px 4px; color: var(--linho); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } /* link dentro da frase, com área de toque de dedo */
.entrada[aria-invalid="true"] { border-color: rgba(236, 154, 107, .7); }
.entrada-senha { position: relative; display: block; }
.entrada-senha .entrada { padding-right: 52px; }
.ver-senha { position: absolute; top: 5px; right: 4px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: var(--texto-3); cursor: pointer; }
.ver-senha svg { width: 21px; height: 21px; }
.ver-senha[aria-pressed="true"] { color: var(--linho); }
input[type="date"].entrada, input[type="time"].entrada, select.entrada { appearance: none; -webkit-appearance: none; line-height: 52px; }
input[type="date"].entrada::-webkit-calendar-picker-indicator, input[type="time"].entrada::-webkit-calendar-picker-indicator { filter: invert(.85); opacity: .6; }
select.entrada { padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, var(--texto-2) 50%), linear-gradient(135deg, var(--texto-2) 50%, transparent 50%); background-position: calc(100% - 17px) 24px, calc(100% - 12px) 24px; background-size: 5px 5px; background-repeat: no-repeat; }
.opcional { letter-spacing: .08em; color: var(--texto-3); text-transform: none; font-size: 11px; }
.dica-campo { margin-top: -2px; font-size: 13px; color: var(--texto-3); }
.aviso-prototipo { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: 13px; line-height: 1.45; color: var(--texto-2); }
.aviso-prototipo svg { width: 19px; height: 19px; margin-top: 1px; color: var(--couro); }
.responsavel { display: grid; gap: 12px; padding: 14px; border: 1px solid rgba(169, 128, 89, .35); border-radius: 18px; background: rgba(169, 128, 89, .07); }
.responsavel[hidden] { display: none; }
.responsavel:not([hidden]) { animation: cascata .45s cubic-bezier(.2, .8, .2, 1) both; }
.opcoes-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.opcoes-dias .opcao { padding: 0; }
.opcoes-materias .opcao { min-height: 44px; padding: 0 14px; font-size: 14px; }

/* ---------- Abertura ---------- */
.tela-abertura {
  display: grid; grid-template-rows: auto 1fr auto;
  background: radial-gradient(110% 62% at 50% 44%, rgba(74, 45, 28, .5) 0%, rgba(17, 11, 8, 0) 62%), var(--fundo);
}
.tela-abertura .topo { justify-content: flex-end; }
.abertura-centro { display: grid; justify-items: center; align-content: center; gap: 26px; padding: 0 30px 40px; text-align: center; }
.abertura-centro .logotipo { width: 210px; height: auto; aspect-ratio: 723.28 / 236; color: var(--linho); }
.abertura-centro .titulo-grande { font-size: 36px; }
.abertura-centro .subtitulo { max-width: 300px; margin-top: -10px; }
.tela-pe-solto { position: static; background: none; }
.abertura-pe { display: grid; gap: 10px; }

/* ---------- Lendo o seu contexto ---------- */
.constelacao { display: block; width: 64%; height: auto; margin: 26px 0 18px 30%; overflow: visible; }
.constelacao .linhas path { fill: none; stroke: rgba(241, 233, 220, .55); stroke-width: .6; }
.constelacao circle { fill: var(--linho); }
.constelacao .brasa { fill: var(--brasa); filter: drop-shadow(0 0 3px rgba(224, 122, 63, .8)); }
.constelacao path[data-passo] { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s cubic-bezier(.65, 0, .35, 1); }
.constelacao path[data-passo].on { stroke-dashoffset: 0; }
.constelacao circle[data-passo] { transform-box: fill-box; transform-origin: 50% 50%; transform: scale(0); transition: transform .55s cubic-bezier(.2, 1.6, .4, 1) .35s; }
.constelacao circle[data-passo].on { transform: scale(1); }
.constelacao .brasa { transform-box: fill-box; transform-origin: 50% 50%; animation: brasa-respira 1.8s ease-in-out infinite; }
@keyframes brasa-respira { 50% { transform: scale(1.35); } }

/* ---------- Aba Caminho: o Cérebro, a contagem e, logo abaixo dela, o "Hoje" (pedido do Victor, 08/10) ---------- */
.tela-inicio { overflow: hidden; overscroll-behavior: none; }
.tela-inicio #cerebro { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.topo-sobre {
  position: absolute; z-index: 9; top: 0; left: 0; right: 0;
  background: linear-gradient(180deg, var(--fundo) 0%, rgba(17, 11, 8, .88) 62%, rgba(17, 11, 8, 0) 100%);
}
/* O avatar fica no alto de todas as abas: tocar nele abre o perfil, como em qualquer app. */
.avatar-toque { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-right: -8px; border-radius: 50%; text-decoration: none; }
.avatar {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; overflow: hidden;
  background: linear-gradient(180deg, #4A3221, #2C1F15); border: 1px solid rgba(241, 233, 220, .22);
  font: 600 15px/1 var(--f-titulo); color: var(--linho); text-decoration: none;
}
.avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.avatar.com-foto { border-color: rgba(241, 233, 220, .45); }
.inicio-topo {
  position: absolute; z-index: 8; top: calc(env(safe-area-inset-top, 0px) + 52px); left: 10px; right: 10px;
  max-width: 460px; margin: 0 auto; display: grid; gap: 12px; pointer-events: none;
}
.inicio-cabeca { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-left: calc(var(--margem) - 10px); }
.saudacao { font: 600 22px/1.15 var(--f-titulo); letter-spacing: -0.03em; margin-bottom: 4px; }
.caminho-contagem { font-size: 13px; color: var(--texto-2); }
.caminho-contagem .rotulo { margin-right: 10px; }
.caminho-contagem b { font: 600 19px/1 var(--f-titulo); letter-spacing: -0.03em; color: var(--texto); margin-right: 2px; }
.inicio-cabeca .botao-redondo { pointer-events: auto; width: 44px; height: 44px; }
.inicio-cabeca .botao-redondo svg { width: 20px; height: 20px; }

.hoje {
  pointer-events: auto; padding: 12px 14px 6px;
  background: linear-gradient(180deg, #1F160F 0%, #18110D 100%);
  border: 1px solid rgba(241, 233, 220, .12); border-radius: 22px; box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
  transition: transform .62s cubic-bezier(.2, .8, .2, 1), opacity .4s ease;
}
.hoje.escondida { transform: translateY(-16px); opacity: 0; pointer-events: none; }
.com-cartao .hoje { transform: translateY(-10px); opacity: 0; pointer-events: none; transition-duration: .3s; }
.hoje-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; }
.hoje-topo h2 { display: flex; align-items: baseline; gap: 10px; font: 500 14px/1.2 var(--f-texto); color: var(--texto-2); }
.hoje-link { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; margin-right: -6px; padding: 0 6px; font-size: 13.5px; font-weight: 500; color: var(--texto); text-decoration: none; }
.hoje-link svg { width: 16px; height: 16px; color: var(--texto-3); }
.tela-inicio .cerebro-cartao { bottom: calc(env(safe-area-inset-bottom, 0px) + 76px); max-height: 54vh; }
.cartao-acao { margin: 6px 0 2px; min-height: 48px; font-size: 15px; }
.cartao-acao svg { width: 20px; height: 20px; }

/* ---------- As tarefas (no Hoje, na Rotina e no Destino) ---------- */
.lista-tarefas > li { overflow: hidden; }
.tarefa-linha { display: grid; grid-template-columns: 44px 1fr; align-items: center; border-top: 1px solid var(--linha); }
.hoje .lista-tarefas > li:first-child, .dia-bloco .lista-tarefas > li:first-child { border-top: 0; }
.feito { display: grid; place-items: center; width: 44px; height: 48px; margin-left: -10px; border: 0; background: none; cursor: pointer; }
.feito > span {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid rgba(241, 233, 220, .38); color: transparent; transition: background-color .2s ease, border-color .2s ease;
}
.feito svg { width: 12px; height: 12px; }
.feito[aria-pressed="true"] > span { background: var(--linho); border-color: var(--linho); color: var(--ebano); animation: estoura .38s cubic-bezier(.2, 1.6, .4, 1); }
.feito-espaco { width: 44px; }
.tarefa-abrir {
  display: grid; grid-template-columns: 46px 1fr auto; align-items: center; column-gap: 8px; min-height: 52px; padding: 7px 0;
  border: 0; background: none; text-align: left; color: inherit; font: inherit; cursor: pointer;
}
.tarefa-abrir:active { background: rgba(241, 233, 220, .04); }
.tarefa-abrir .hora { font: 500 13px/1 var(--f-texto); color: var(--texto-2); }
.tarefa-abrir .hora small { display: block; margin-bottom: 4px; font-size: 11px; letter-spacing: .06em; color: var(--rotulo); }
.tarefa-abrir .o-que { min-width: 0; font-size: 13px; line-height: 1.35; color: var(--texto-2); }
.tarefa-abrir .o-que b { display: block; font-size: 14.5px; font-weight: 600; color: var(--texto); }
.tarefa-linha.vida .o-que b::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 7px 2px 0; border-radius: 50%;
  background: var(--couro); vertical-align: middle;
}
.tarefa-linha.prova .hora { color: var(--brasa); }
.selo-prova { font: 600 11px/1 var(--f-texto); color: var(--ebano); background: var(--brasa); border-radius: 999px; padding: 5px 9px; }
.tarefa-linha.feita .o-que b, .tarefa-linha.feita .o-que span { text-decoration: line-through; text-decoration-color: rgba(241, 233, 220, .35); color: var(--texto-3); }
.tarefa-vazia { padding: 12px 0 10px; font-size: 13.5px; color: var(--texto-3); }
.hoje .tarefa-vazia { padding: 6px 0 12px; }
.tarefa-mais { display: flex; align-items: center; justify-content: center; min-height: 44px; font-size: 13px; color: var(--texto-2); text-decoration: none; border-top: 1px solid var(--linha); }

/* ---------- Aba Rotina ---------- */
.rotina-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.horarios {
  display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; width: 100%; min-height: 66px; margin-top: 18px;
  padding: 10px 14px 10px 10px; border: 1px solid var(--linha); border-radius: 18px; background: var(--cartao);
  text-align: left; color: inherit; font: inherit; cursor: pointer;
}
.horarios:active { background: #20170F; }
.horarios b { display: block; font-size: 15px; font-weight: 600; }
.horarios small { display: block; font-size: 13px; line-height: 1.35; color: var(--texto-2); }
.horarios-editar { font-size: 13.5px; font-weight: 500; color: var(--couro); }
.dias { display: grid; gap: 12px; margin-top: 22px; }
.dia-bloco { padding: 6px 14px 4px; border: 1px solid var(--linha); border-radius: 20px; background: var(--cartao); }
.dia-bloco.hoje-bloco { border-color: rgba(224, 122, 63, .32); }
.dia-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; border-bottom: 1px solid var(--linha); }
.dia-topo h3 { display: flex; align-items: baseline; gap: 8px; font: 600 15px/1.2 var(--f-texto); }
.dia-topo h3 small { font-size: 13px; font-weight: 400; color: var(--texto-2); }
.hoje-bloco .dia-topo h3 { color: var(--brasa); }
.dia-somar { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -12px; border: 0; background: none; color: var(--texto-2); cursor: pointer; }
.dia-somar svg { width: 20px; height: 20px; }
.refazer { margin-top: 22px; }

/* ---------- Aba Objetivos e o Destino ---------- */
.objetivos { display: grid; gap: 14px; margin-top: 22px; }
a.objetivo { display: block; color: inherit; text-decoration: none; }
a.objetivo:active { filter: brightness(1.08); }
.objetivo .titulo-tela { margin-top: 8px; font-size: 26px; }
.objetivo .subtitulo { margin-top: 4px; font-size: 14px; }
.objetivo-vida { background: linear-gradient(180deg, #2A1D13 0%, #1E150E 100%); }
.objetivo-vida .trilha-h .feita > .marco, .objetivo-vida .trilha-h .fim > .marco { background: var(--couro); border-color: var(--couro); }
.objetivo-ver { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linha); font-size: 14px; font-weight: 500; color: var(--texto); }
.objetivo-ver svg { width: 18px; height: 18px; color: var(--texto-3); }

.secao-titulo { margin-top: 38px; font: 600 21px/1.2 var(--f-titulo); letter-spacing: -0.03em; }
.lista-areas { display: grid; gap: 8px; margin-top: 16px; }
.linha-area {
  display: grid; grid-template-columns: 40px 1fr 20px; align-items: center; gap: 12px; width: 100%; min-height: 66px;
  padding: 10px 12px 10px 10px; border: 1px solid var(--linha); border-radius: 18px; background: var(--cartao);
  text-align: left; color: inherit; font: inherit; text-decoration: none; cursor: pointer;
}
.linha-area:active { background: #20170F; }
.linha-area b { display: block; font-size: 15px; font-weight: 600; }
.linha-area small { display: block; font-size: 13px; line-height: 1.35; color: var(--texto-2); }
.linha-area > svg { width: 18px; height: 18px; color: var(--texto-3); }
.linha-area.vida .icone-caixa, .area-opcao .icone-caixa, .aviso .icone-caixa.vida { color: var(--couro); background: rgba(169, 128, 89, .13); }
.linha-area.nova { border-style: dashed; border-color: rgba(169, 128, 89, .5); background: transparent; }
.linha-area.nova .icone-caixa { color: var(--linho); background: rgba(169, 128, 89, .2); }

.destino-corpo { display: grid; gap: 26px; align-content: start; }
button.destino { width: 100%; text-align: left; color: inherit; font: inherit; cursor: pointer; }
button.destino:active { filter: brightness(1.08); }
.destino-vida { background: linear-gradient(180deg, #2A1D13 0%, #1E150E 100%); }
.destino-vida .simbolo { color: var(--couro); }
.bloco { display: grid; gap: 12px; }
.bloco-titulo { font: 600 17px/1.2 var(--f-titulo); letter-spacing: -0.02em; }
.etapa-toque { position: absolute; left: -8px; right: 0; top: -8px; bottom: 6px; border: 0; background: none; cursor: pointer; border-radius: 12px; }
.etapa-toque:active { background: rgba(241, 233, 220, .05); }
.etapa:last-child .etapa-toque { bottom: -8px; }

/* ---------- Aba Insights (entrega B): cada ideia com o seu porquê ---------- */
.tela[data-tela="insights"] .titulo-grande { margin-top: 6px; }
.insights { display: grid; gap: 4px; }
.insight-secao { display: grid; gap: 10px; }
.insight-secao .secao-titulo { margin-top: 28px; }
.insight { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--linha); border-radius: 20px; background: var(--cartao); }
.insight-topo { display: flex; align-items: center; gap: 10px; }
.insight-topo .icone-caixa { width: 34px; height: 34px; border-radius: 10px; color: var(--couro); background: rgba(169, 128, 89, .13); }
.insight-topo .icone-caixa svg { width: 18px; height: 18px; }
.insight h3 { margin-top: 2px; font: 600 18px/1.25 var(--f-titulo); letter-spacing: -0.02em; }
.insight-autor { margin-top: -4px; font-size: 13px; color: var(--texto-3); }
.insight-texto { font-size: 14.5px; line-height: 1.45; }
.insight-porque { font-size: 14px; line-height: 1.45; color: var(--texto-2); }
.insight-porque b { display: block; margin-bottom: 3px; font: 500 11px/1.2 var(--f-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--brasa); }
.insight-acoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; margin-top: 4px; }
.botao-curto { width: auto; min-height: 44px; padding: 0 16px; border-radius: 14px; font-size: 14.5px; }
.botao-curto svg { width: 18px; height: 18px; }
.botao.aplicado { opacity: 1; border-color: var(--brasa-borda); color: var(--brasa); }
.origem-botao {
  min-height: 44px; padding: 0 2px; border: 0; background: none; cursor: pointer;
  font: 500 13.5px/1.2 var(--f-texto); color: var(--texto-2); text-decoration: underline; text-decoration-color: rgba(180, 154, 126, .45); text-underline-offset: 3px;
}
.origem-botao[aria-expanded="true"] { color: var(--linho); }
.origem { display: grid; gap: 10px; padding: 12px; border: 1px dashed rgba(241, 233, 220, .16); border-radius: 14px; background: rgba(241, 233, 220, .035); }
.origem:not([hidden]) { animation: cascata .35s cubic-bezier(.2, .8, .2, 1) both; }
.origem-linha { display: grid; gap: 5px; font-size: 13.5px; line-height: 1.4; }
.origem-selo { justify-self: start; padding: 4px 8px; border-radius: 999px; font: 600 10.5px/1 var(--f-texto); letter-spacing: .08em; text-transform: uppercase; }
.origem-selo.escola { color: var(--areia); background: rgba(169, 128, 89, .16); border: 1px solid rgba(169, 128, 89, .42); }
.origem-selo.ducor { color: var(--brasa); background: var(--brasa-fundo); border: 1px solid var(--brasa-borda); }
.origem-selo.voce { color: var(--linho); background: rgba(241, 233, 220, .08); border: 1px solid var(--linha-forte); }

/* ---------- Aba Comunidade ---------- */
.tela[data-tela="comunidade"] .titulo-grande { margin: 6px 0 22px; }
.conversa-grupo { justify-self: start; margin-bottom: 2px; font: 500 11px/1.2 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--rotulo); }
.conquistas li.falta { color: var(--texto-3); }
.conquistas li.falta .ponto-check { background: transparent; border: 1.5px dashed rgba(241, 233, 220, .3); }
.alem-link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin-top: 6px; font-size: 14px; font-weight: 500; color: var(--texto); text-decoration: none; }
.alem-link svg { width: 16px; height: 16px; color: var(--texto-3); }

/* ---------- Nova área ---------- */
.grade-areas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.area-opcao {
  display: flex; align-items: center; gap: 10px; min-height: 62px; padding: 8px 10px;
  border: 1px solid var(--linha); border-radius: 16px; background: var(--cartao);
  text-align: left; color: var(--texto); font: inherit; cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}
.area-opcao .icone-caixa { width: 38px; height: 38px; flex: none; }
.area-opcao .icone-caixa svg { width: 20px; height: 20px; }
.area-opcao b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.25; }
.area-opcao small { display: block; font-size: 11.5px; line-height: 1.3; color: var(--texto-3); }
.area-opcao[aria-checked="true"] { border-color: var(--couro); background: rgba(169, 128, 89, .15); box-shadow: inset 0 0 0 1px var(--couro); }
.area-opcao:disabled { opacity: .5; cursor: default; }
.area-campos { display: grid; gap: 22px; }
.area-campos[hidden], [data-campo-nome][hidden] { display: none; }

/* ---------- Seu perfil: a sua página (o que os outros vão ver) e, embaixo, o que só você vê ---------- */
.perfil-corpo { display: grid; gap: 30px; align-content: start; }
.perfil-capa {
  display: grid; justify-items: center; gap: 6px; padding: 22px 18px 18px; text-align: center;
  border: 1px solid var(--linha); border-radius: 24px;
  background: radial-gradient(120% 80% at 50% 0%, rgba(74, 45, 28, .55) 0%, rgba(24, 17, 14, 0) 70%), var(--cartao);
}
.perfil-foto { position: relative; margin-bottom: 8px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.avatar-grande { width: 92px; height: 92px; font-size: 36px; }
.perfil-camera { position: absolute; right: -2px; bottom: 2px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--linho); color: var(--ebano); box-shadow: 0 0 0 3px var(--cartao); }
.perfil-camera svg { width: 15px; height: 15px; }
.perfil-capa .titulo-tela { font-size: 26px; }
.perfil-linha { font-size: 14px; color: var(--texto-2); }
.perfil-bio { max-width: 310px; margin-top: 6px; font-size: 15px; line-height: 1.45; }
.perfil-bio.vazia { font-size: 14px; font-style: italic; color: var(--texto-3); }
.perfil-destino { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 12px; border: 1px solid var(--brasa-borda); border-radius: 999px; background: var(--brasa-fundo); font-size: 13px; font-weight: 500; }
.perfil-destino svg { width: 14px; height: 14px; color: var(--brasa); }
.perfil-vitrine { display: flex; gap: 8px; margin: 10px 0 2px; }
.perfil-vitrine:empty { display: none; }
.vitrine-item, .insignia.ganha .insignia-icone {
  color: var(--ebano); background: radial-gradient(circle at 35% 30%, #F2B184, var(--brasa)); box-shadow: 0 0 14px rgba(224, 122, 63, .42);
}
.vitrine-item { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; }
.vitrine-item svg { width: 18px; height: 18px; }
.perfil-capa .botao-curto { margin-top: 10px; }
.bloco-cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bloco-conta { font-size: 13.5px; color: var(--texto-2); }
.bloco-sub { margin-top: -6px; font-size: 13.5px; color: var(--texto-3); }
.insignias { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.insignia { display: grid; justify-items: start; align-content: start; gap: 4px; padding: 14px 12px; border: 1px dashed rgba(241, 233, 220, .14); border-radius: 18px; }
.insignia b { font-size: 14.5px; font-weight: 600; line-height: 1.25; color: var(--texto-2); }
.insignia small { font-size: 12px; line-height: 1.35; color: var(--texto-3); }
.insignia .insignia-progresso { color: var(--couro); }
.insignia-icone { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 4px; border-radius: 50%; border: 1.5px dashed rgba(241, 233, 220, .22); color: var(--texto-3); }
.insignia-icone svg { width: 19px; height: 19px; }
.insignia.ganha { border-style: solid; border-color: var(--brasa-borda); background: linear-gradient(180deg, rgba(224, 122, 63, .12), rgba(224, 122, 63, .03)); }
.insignia.ganha b { color: var(--linho); }
.insignia.ganha small { color: var(--texto-2); }
.insignia.ganha .insignia-icone { border: 0; }
.dados { display: grid; margin: 4px 0 0; padding: 4px 16px; border: 1px solid var(--linha); border-radius: 18px; background: var(--cartao); }
.dados div { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--linha); font-size: 14.5px; }
.dados div:first-child { border-top: 0; }
.dados dt { color: var(--texto-2); }
.dados dd { margin: 0; text-align: right; font-weight: 500; overflow-wrap: anywhere; }
.responsavel-cartao { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 12px; padding: 12px 14px 12px 10px; border: 1px solid rgba(169, 128, 89, .35); border-radius: 18px; background: rgba(169, 128, 89, .07); }
.responsavel-cartao .icone-caixa { color: var(--couro); background: rgba(169, 128, 89, .13); }
.responsavel-cartao b { display: block; font-size: 15px; font-weight: 600; }
.responsavel-cartao small { display: block; font-size: 13px; line-height: 1.4; color: var(--texto-2); }
.sair { margin-top: 6px; }
.apagar-conta { justify-content: center; width: 100%; }

/* Editar o perfil (uma folha, como a da tarefa) */
.foto-campo { display: flex; align-items: center; gap: 16px; }
.foto-campo .avatar-grande { width: 76px; height: 76px; font-size: 30px; }
.foto-botoes { display: grid; justify-items: start; gap: 2px; }
.foto-escolher { position: relative; overflow: hidden; }
.so-leitor { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.entrada-texto { height: auto; min-height: 96px; padding: 14px 16px; line-height: 1.45; resize: none; font-family: var(--f-texto); }

/* ---------- A folha da tarefa (editar, criar, apagar) ---------- */
.folha-fundo { position: fixed; inset: 0; z-index: 31; background: rgba(5, 3, 2, .58); opacity: 0; transition: opacity .3s ease; }
.folha-fundo.visivel { opacity: 1; }
.folha-fundo[hidden] { display: none; }
.folha {
  position: fixed; z-index: 32; left: 0; right: 0; bottom: 0; max-width: 520px; max-height: 88vh; margin: 0 auto; overflow-y: auto;
  display: grid; gap: 16px; padding: 10px var(--margem) calc(env(safe-area-inset-bottom, 0px) + 18px);
  background: #1E150F; border: 1px solid rgba(241, 233, 220, .14); border-bottom: 0; border-radius: 26px 26px 0 0;
  box-shadow: 0 -18px 50px rgba(0, 0, 0, .55);
  transform: translateY(105%); visibility: hidden; transition: transform .38s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .38s;
}
.folha.aberta { transform: none; visibility: visible; transition: transform .42s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
.folha-cabeca { display: flex; align-items: center; justify-content: space-between; margin-right: -10px; }
.folha-linha { display: grid; grid-template-columns: 1.45fr 1fr .9fr; gap: 8px; }
.folha-linha .entrada { padding: 0 10px; }
.folha-linha select.entrada { padding-right: 24px; background-position: calc(100% - 15px) 24px, calc(100% - 10px) 24px; }
.folha-acoes { display: grid; gap: 4px; }
.folha-mais { display: flex; justify-content: space-between; }
.folha-mais .botao-texto { padding: 0 6px; gap: 6px; }
.folha-mais [hidden] { display: none; }
.perigo { color: #EC9A6B; }
.estudar-cartao {
  display: grid; grid-template-columns: 40px 1fr 18px; align-items: center; gap: 12px; width: 100%; min-height: 64px;
  padding: 10px 12px 10px 10px; border: 1px solid var(--brasa-borda); border-radius: 18px;
  background: linear-gradient(180deg, rgba(224, 122, 63, .16), rgba(224, 122, 63, .06)); color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.estudar-cartao:active { filter: brightness(1.1); }
.estudar-cartao .icone-caixa { color: var(--brasa); background: rgba(224, 122, 63, .16); }
.estudar-cartao b { display: block; font-size: 15px; font-weight: 600; }
.estudar-cartao small { display: block; font-size: 13px; line-height: 1.35; color: var(--texto-2); }
.estudar-cartao > svg { width: 18px; height: 18px; color: var(--brasa); }
.origem-bloco { display: grid; gap: 6px; margin-top: -6px; }

/* ---------- Avisos que descem do alto ---------- */
.aviso-topo {
  position: fixed; z-index: 30; left: 10px; right: 10px; top: calc(env(safe-area-inset-top, 0px) + 8px);
  max-width: 440px; margin: 0 auto; pointer-events: none;
  transform: translateY(calc(-100% - 24px)); transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.aviso-topo.visivel { transform: none; pointer-events: auto; }
.aviso-topo .aviso { width: 100%; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.aviso .aviso-texto { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.4; color: var(--texto-2); }

/* ---------- A barra de abas: 5 abas, só nas telas do dia a dia ---------- */
body:not(.com-abas) .abas { display: none; }
.abas { z-index: 20; grid-template-columns: repeat(5, 1fr); padding-left: 4px; padding-right: 4px; }
.aba { font-size: 10.5px; letter-spacing: 0; }
.aba svg { width: 23px; height: 23px; }
.aba-novidade { position: absolute; top: 7px; left: calc(50% + 8px); width: 8px; height: 8px; border-radius: 50%; background: var(--brasa); box-shadow: 0 0 0 2px var(--fundo), 0 0 10px var(--brasa-brilho); }
.aba-novidade[hidden] { display: none; }

/* Sem barra de rolagem aparente (no celular ela já some; no computador ela cortava o cartão). */
.tela, .cerebro-cartao, .folha { scrollbar-width: none; }
.tela::-webkit-scrollbar, .cerebro-cartao::-webkit-scrollbar, .folha::-webkit-scrollbar { display: none; }

/* ---------- Vinheta de abertura (pedido do Victor, 08/10: "como é com os sites que produzimos") ----------
   0,0 s  acende o Você (a brasa do filme)
   0,3 s  o anel se risca em volta dele
   0,85 s a agulha gira e para apontando o caminho; a brasa se apaga embaixo dela (o logo não tem brasa)
   1,3 s  "Ducor", letra por letra
   1,85 s "Cada aluno, guiado."
   2,45 s sai, esmaecendo e crescendo um pouco (0,62 s) */
.pular-vinheta { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.vinheta {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; cursor: pointer;
  background: radial-gradient(90% 55% at 50% 46%, rgba(59, 36, 23, .55) 0%, rgba(15, 10, 7, 0) 70%), var(--ebano);
  color: var(--linho); -webkit-tap-highlight-color: transparent;
  animation: v-sai .62s cubic-bezier(.4, 0, .2, 1) 2.45s forwards;
}
.pular-vinheta:checked + .vinheta { display: none; }
.vinheta-centro { display: grid; justify-items: center; gap: 22px; margin-top: -8vh; }
.vinheta-marca { width: 236px; height: auto; aspect-ratio: 723.28 / 236; overflow: visible; }
.vinheta .v-brasa { transform-box: fill-box; transform-origin: 50% 50%; animation: v-nasce .38s cubic-bezier(.2, .8, .2, 1) both, v-apaga .32s ease 1.12s forwards; }
.vinheta .v-anel { stroke-dasharray: 1; stroke-dashoffset: 1; animation: v-risca .78s cubic-bezier(.65, 0, .35, 1) .3s forwards; }
.vinheta .v-agulha { transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; animation: v-aponta .78s cubic-bezier(.22, 1.3, .42, 1) .85s forwards; }
.vinheta .v-letra { opacity: 0; animation: v-letra-svg .42s cubic-bezier(.2, .8, .2, 1) calc(1.3s + var(--i) * 85ms) forwards; }
.vinheta-frase { font: 600 25px/1.1 var(--f-titulo); letter-spacing: -0.035em; opacity: 0; animation: v-letra .5s ease 1.85s forwards; }
.vinheta-nota {
  position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 28px); text-align: center;
  font: 500 10.5px/1 var(--f-texto); letter-spacing: .18em; text-transform: uppercase; color: var(--texto-3);
  opacity: 0; animation: v-letra .5s ease 1.9s forwards;
}
@keyframes v-nasce { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes v-apaga { to { opacity: 0; } }
@keyframes v-risca { to { stroke-dashoffset: 0; } }
@keyframes v-aponta { 0% { opacity: 0; transform: rotate(-300deg) scale(.6); } 25% { opacity: 1; } 100% { opacity: 1; transform: rotate(0) scale(1); } }
@keyframes v-letra { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes v-letra-svg { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } /* dentro do desenho a unidade é a do logo: 26 ≈ 8 px na tela */
@keyframes v-sai { to { opacity: 0; transform: scale(1.04); visibility: hidden; } }
/* Vinheta é enfeite: quem pede menos movimento vai direto ao app, sem perder nada (a abertura repete nome e frase). */
@media (prefers-reduced-motion: reduce) { .vinheta { display: none; } }

/* ==========================================================================
   O movimento (fase 4). Tudo some para quem desliga animação no celular
   (a regra geral está em ducor.css; o que depende de JS checa a mesma preferência).
   ========================================================================== */

/* As telas entram em cascata: cada bloco marcado com data-cascata sobe um pouco depois do anterior. */
.entrando [data-cascata] > * { animation: cascata .55s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(80ms + var(--i, 0) * 55ms); }
@keyframes cascata { from { opacity: 0; transform: translateY(14px); } }

/* A leitura: a barra corre, o ✓ estoura. */
.progresso-trilho i { transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.estado-ok { animation: estoura .42s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes estoura { from { transform: scale(.3); opacity: 0; } }

/* A brasa que voa da constelação até o Você do Cérebro. */
.voo-brasa {
  position: fixed; z-index: 40; width: 10px; height: 10px; border-radius: 50%; pointer-events: none;
  background: var(--brasa); box-shadow: 0 0 0 6px rgba(224, 122, 63, .18), 0 0 26px 6px rgba(224, 122, 63, .55);
}

/* "Você está aqui": a etapa atual respira, na trilha e nos objetivos. */
.agora > .marco { animation: voce-respira 2.6s ease-in-out infinite; }
@keyframes voce-respira {
  0%, 100% { box-shadow: 0 0 0 5px var(--brasa-halo), 0 0 18px var(--brasa-brilho); }
  50% { box-shadow: 0 0 0 10px rgba(224, 122, 63, .06), 0 0 30px rgba(224, 122, 63, .62); }
}
/* A aba escolhida: o ponto de brasa nasce estourando. A novidade na Rotina pisca devagar. */
.aba.ativa::after { animation: estoura .4s cubic-bezier(.2, 1.6, .4, 1) both; }
.aba-novidade:not([hidden]) { animation: estoura .5s cubic-bezier(.2, 1.6, .4, 1) both, novidade 2.4s ease-in-out .6s infinite; }
@keyframes novidade { 50% { box-shadow: 0 0 0 2px var(--fundo), 0 0 16px rgba(224, 122, 63, .8); } }

/* O aviso desce com mola e sobe rápido. */
.aviso-topo { transition: transform .32s cubic-bezier(.4, 0, 1, 1); }
.aviso-topo.visivel { transition: transform .62s cubic-bezier(.18, 1.32, .4, 1); }
.aviso-topo.visivel .icone-caixa svg { animation: balanca .7s ease .5s both; }
@keyframes balanca { 20% { transform: rotate(-12deg); } 45% { transform: rotate(9deg); } 70% { transform: rotate(-5deg); } 100% { transform: none; } }

/* O plano se refaz na frente do aluno: o que saiu encolhe, o que entrou chega com um brilho de brasa. */
.lista-tarefas > li.chegou { animation: tarefa-chega .55s cubic-bezier(.2, .8, .2, 1) both; }
.lista-tarefas > li.chegou .tarefa-abrir { animation: tarefa-brilha 2.2s ease .35s both; }
.lista-tarefas > li.saindo { animation: tarefa-sai .32s ease forwards; }
@keyframes tarefa-chega { from { max-height: 0; opacity: 0; } to { max-height: 90px; opacity: 1; } }
@keyframes tarefa-brilha { from { background: rgba(224, 122, 63, .16); } to { background: transparent; } }
@keyframes tarefa-sai { from { max-height: 90px; } to { max-height: 0; opacity: 0; } }
.plano-atualizado.chegou { animation: estoura .5s cubic-bezier(.2, 1.6, .4, 1) .3s both; }

/* Nova área: o que foi escolhido estoura e os campos chegam deslizando. */
.area-opcao[aria-checked="true"] .icone-caixa { animation: estoura .4s cubic-bezier(.2, 1.6, .4, 1); }
.area-campos:not([hidden]) { animation: cascata .45s cubic-bezier(.2, .8, .2, 1) both; }

/* ==========================================================================
   Entrega B (08/10): a sessão com a Ducor, o tutorial e a marca da conta de exemplo.
   ========================================================================== */

/* ---------- Estudar com a Ducor: uma conversa curta, roteirizada, que acaba no cérebro ---------- */
.estudo-corpo { display: grid; gap: 18px; align-content: start; }
.estudo-cabeca { display: grid; gap: 8px; }
.estudo-cabeca .titulo-tela { font-size: 30px; }
.estudo-conversa { display: grid; gap: 10px; }
.estudo-fala { max-width: 88%; padding: 11px 14px; border-radius: 18px; font-size: 15px; line-height: 1.45; }
.estudo-fala.ducor { justify-self: start; background: rgba(241, 233, 220, .07); border: 1px solid var(--linha); border-bottom-left-radius: 6px; }
.estudo-fala.voce { justify-self: end; background: var(--linho); color: var(--ebano); border-bottom-right-radius: 6px; font-weight: 500; }
.estudo-fala:not(.espera) { animation: cascata .4s cubic-bezier(.2, .8, .2, 1) both; }
.estudo-fala.espera { padding: 14px 16px; }
.estudo-num { display: block; margin-bottom: 4px; font: 500 11px/1.2 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--rotulo); }
.digitando { display: inline-flex; gap: 5px; }
.digitando i { width: 6px; height: 6px; border-radius: 50%; background: var(--texto-2); animation: digita 1s ease-in-out infinite; }
.digitando i:nth-child(2) { animation-delay: .15s; }
.digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes digita { 0%, 80%, 100% { opacity: .3; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }
.estudo-opcoes { display: grid; gap: 8px; margin: 2px 0 4px; animation: cascata .4s cubic-bezier(.2, .8, .2, 1) both; }
.estudo-opcao {
  display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px 10px 10px;
  border: 1px solid var(--linha-forte); border-radius: 16px; background: var(--campo); color: var(--texto);
  font: 500 15px/1.35 var(--f-texto); text-align: left; cursor: pointer; transition: border-color .2s ease, background-color .2s ease;
}
.estudo-opcao:active { background: var(--campo-foco); }
.estudo-letra { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: rgba(241, 233, 220, .08); font: 600 13px/1 var(--f-texto); color: var(--texto-2); }
.estudo-opcao:disabled { cursor: default; opacity: .5; }
.estudo-opcao.certa { opacity: 1; border-color: var(--brasa); background: var(--brasa-fundo); }
.estudo-opcao.certa .estudo-letra { background: var(--brasa); color: var(--ebano); }
.estudo-opcao.errada { opacity: 1; border-color: rgba(236, 154, 107, .5); }
.estudo-opcao.errada span:last-child { text-decoration: line-through; text-decoration-color: rgba(241, 233, 220, .45); }
.estudo-fala.resultado { justify-self: stretch; max-width: none; display: grid; gap: 6px; padding: 16px; }
.estudo-fala.resultado.passou { border-color: var(--brasa-borda); background: linear-gradient(180deg, rgba(224, 122, 63, .15), rgba(224, 122, 63, .05)); }
.estudo-placar { font: 600 34px/1 var(--f-titulo); letter-spacing: -0.02em; word-spacing: .12em; color: var(--linho); }
.tela-estudo .topo { position: sticky; top: 0; z-index: 5; background: linear-gradient(180deg, var(--fundo) 0%, var(--fundo) 78%, rgba(17, 11, 8, 0) 100%); }
.estudo-duvida { display: grid; gap: 8px; margin-top: 10px; }
.estudo-duvida-linha { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.estudo-pe { display: grid; gap: 4px; }

/* ---------- O tutorial do aluno novo: um foco no que tocar, o resto escurecido, e um balão curto ---------- */
.tutorial { position: fixed; inset: 0; z-index: 26; pointer-events: none; }
.tutorial-bloco { position: fixed; left: 0; top: 0; pointer-events: auto; }
.tutorial-foco {
  position: fixed; left: 0; top: 0; pointer-events: none; border-radius: 22px;
  box-shadow: 0 0 0 200vmax rgba(8, 5, 3, .68), inset 0 0 0 1.5px rgba(224, 122, 63, .9), 0 0 24px 2px rgba(224, 122, 63, .35);
  transition: transform .42s cubic-bezier(.2, .8, .2, 1), width .42s cubic-bezier(.2, .8, .2, 1), height .42s cubic-bezier(.2, .8, .2, 1), border-radius .42s ease;
}
.tutorial.so-olhar .tutorial-foco { pointer-events: auto; }
.tutorial-balao {
  position: fixed; left: 0; top: 0; pointer-events: auto; display: grid; gap: 10px;
  padding: 14px 16px 8px; border: 1px solid rgba(241, 233, 220, .16); border-radius: 20px;
  background: #241911; box-shadow: 0 18px 50px rgba(0, 0, 0, .6);
  transition: transform .42s cubic-bezier(.2, .8, .2, 1);
}
.tutorial.parado .tutorial-foco, .tutorial.parado .tutorial-balao { transition: none; }
.tutorial-balao.chegou { animation: tutorial-chega .4s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes tutorial-chega { from { opacity: 0; translate: 0 8px; } }
.tutorial-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tutorial-pontos { display: flex; align-items: center; gap: 5px; }
.tutorial-pontos i { width: 6px; height: 6px; border-radius: 3px; background: rgba(241, 233, 220, .18); transition: width .3s ease; }
.tutorial-pontos i.foi { background: var(--couro); }
.tutorial-pontos i.agora { width: 16px; background: var(--brasa); }
.tutorial-texto { font-size: 15.5px; line-height: 1.45; }
.tutorial-texto b { font-weight: 600; color: var(--linho); }
.tutorial-dica { display: flex; align-items: center; gap: 10px; font: 600 14px/1.3 var(--f-texto); color: var(--brasa); }
.tutorial-toque { position: relative; flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--brasa); box-shadow: 0 0 0 4px rgba(224, 122, 63, .22); }
.tutorial-toque::after { content: ""; position: absolute; inset: -4px; border: 2px solid var(--brasa); border-radius: 50%; animation: toque 1.4s ease-out infinite; }
@keyframes toque { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.1); opacity: 0; } }
.tutorial-acoes { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; }
.tutorial-pular { min-height: 44px; padding: 0 4px; border: 0; background: none; font: 500 14px/1 var(--f-texto); color: var(--texto-2); cursor: pointer; }

/* ---------- A conta de exemplo nunca se passa por outra: o selo diz que é exemplo ---------- */
.modo-exemplo .selo-prototipo::after { content: " · exemplo"; }