/* Takumi Oficina — só os componentes desta página (roteiro do encontro, ficha de uso, para quem, formatos).
   A base vem de takumi.css; sumi + cinábrio só em gesto, alerta e destaque. */

/* ------------------------------------------------ cena do hero */
.stage .cena { width: 100%; }
.cena { position: relative; display: grid; gap: 16px; min-width: 0; }
@media (min-width: 760px) { .cena { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 22px; align-items: start; } }

/* roteiro de um encontro de 4 h */
.roteiro { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 2px 4px rgba(30,31,36,.06), 0 28px 56px -26px rgba(30,31,36,.4); overflow: hidden; }
.roteiro-cab { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: var(--text); color: #fff; font-weight: 600; font-size: .9rem; }
.roteiro-cab small { margin-left: auto; font: 400 .7rem/1 var(--mono); color: #A7ADB8; white-space: nowrap; }
.roteiro ol { list-style: none; margin: 0; padding: 6px 0; }
.roteiro li { display: grid; grid-template-columns: 46px 1fr; gap: 10px; padding: 10px 14px; position: relative; transition: background-color .35s; }
.roteiro li + li { border-top: 1px solid #EEF0F2; }
.roteiro li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; transition: background-color .35s; }
.roteiro .h { font: 500 .74rem/1.5 var(--mono); color: var(--muted); padding-top: 1px; }
.roteiro b { display: block; font-size: .9rem; line-height: 1.3; }
.roteiro span.d { display: block; font-size: .8rem; color: var(--muted); line-height: 1.4; margin-top: 2px; }
.roteiro li.agora { background: var(--mist); }
.roteiro li.agora::before { background: var(--ai); }
.roteiro li.agora .h { color: var(--ai); }

/* ficha de uso que cada participante leva */
.ficha { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 2px 4px rgba(30,31,36,.06), 0 28px 56px -26px rgba(30,31,36,.45); padding: 14px 14px 12px; font-size: .84rem; line-height: 1.4; min-width: 0; }
.ficha-cab { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px dashed var(--line-2); }
.ficha-cab .t { display: block; font: 500 .6875rem/1.2 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.ficha-cab .linha { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 5px; }
.ficha-cab .quem { font-weight: 600; font-size: .86rem; }
.selo-ok { display: inline-flex; align-items: center; gap: 5px; font: 500 .6875rem/1 var(--mono); color: var(--text); border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 8px; white-space: nowrap; }
.selo-ok svg { width: 11px; height: 11px; color: var(--ai); }
.ficha dl { margin: 0; display: grid; gap: 8px; }
.ficha dt { font: 500 .6875rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ficha dd { margin: 2px 0 0; }
.ficha dd.cuidado { display: flex; gap: 7px; align-items: flex-start; }
.ficha dd.cuidado svg { width: 15px; height: 15px; flex: none; color: var(--ai); margin-top: 2px; }
.instrucao { margin: 10px 0 0; padding: 10px 11px; background: var(--text); color: #E6E7EA; border-radius: 8px; font: 400 .74rem/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.instrucao .c { color: var(--ai-night); }
.instrucao .rot-i { display: block; color: #9A9DA6; margin-bottom: 4px; }
@media (min-width: 760px) { .cena .ficha { margin-top: 38px; } }

/* ------------------------------------------------ o que se trabalha */
.frentes .cel .icon { margin-bottom: 18px; }
.frentes h3 { font-size: 18px; }
.frentes .ex { display: block; margin-top: 12px; font: 400 12.5px/1.5 var(--mono); color: var(--muted); }

/* ------------------------------------------------ para quem */
.pra-quem { display: grid; gap: 16px; }
@media (min-width: 860px) { .pra-quem { grid-template-columns: 1fr 1fr; gap: 22px; } }
.quadro { border-radius: var(--radius); padding: 24px; }
.quadro h3 { font-size: 1.1rem; margin: 0 0 14px; }
.quadro ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.quadro li { display: flex; gap: .65em; align-items: flex-start; line-height: 1.45; }
.quadro li svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.quadro-sim { background: var(--text); color: #fff; }
.quadro-sim h3 { color: #fff; }
.quadro-sim li svg { color: var(--ai-night); }
.quadro-nao { background: #fff; border: 1px solid var(--line); }
.quadro-nao li svg { color: var(--muted); }
.quadro-nao a { color: var(--ai); font-weight: 600; border-bottom: 1px solid rgba(200,48,42,.3); }

/* ------------------------------------------------ exemplos (em .sec-dark) */
.abas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.aba { display: inline-flex; align-items: center; gap: .5em; min-height: 46px; padding: .6em 1.05em; font: 600 .95rem/1.2 var(--sans); color: var(--mist); background: transparent; border: 1.5px solid #4A4C54; border-radius: 10px; cursor: pointer; }
.aba .n { font: 500 .72rem/1 var(--mono); color: #9A9DA6; }
.aba:hover { border-color: #8C8F96; }
.aba[aria-selected="true"] { background: #fff; border-color: #fff; color: var(--text); }
.aba[aria-selected="true"] .n { color: var(--text); }
.aba { flex: none; scroll-snap-align: start; }
.aba:focus-visible { outline: 2px solid var(--ai-night); outline-offset: 3px; }
@media (max-width: 640px) {
  .abas { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 4px; scrollbar-width: none; margin-right: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 6px 4px; margin-left: -4px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
  .abas::-webkit-scrollbar { display: none; }
}
.demo { display: grid; gap: 32px; align-items: start; }
.demo[hidden] { display: none; }
.demo > * { min-width: 0; }
@media (min-width: 960px) { .demo { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 48px; } }
.demo-texto h3 { font: 600 1.6rem/1.2 var(--sans); color: var(--mist); margin: 0 0 .5em; }
.demo-texto p { color: #C9CBD2; }
.demo-texto .empresa { font: 500 .78rem/1.5 var(--mono); color: #A7ADB8; margin-bottom: .8em; }
.demo-texto ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.demo-texto li { display: flex; gap: .6em; align-items: flex-start; color: var(--mist); }
.demo-texto li svg { width: 18px; height: 18px; color: var(--ai-night); flex: none; margin-top: 4px; }
.demo-quadro { color: var(--text); }
.demo-quadro .ficha { box-shadow: none; }
.demo-quadro .rotulo { margin-top: 12px; }
html:not(.js) .demo[hidden] { display: grid; }
html:not(.js) .abas { display: none; }
html:not(.js) .demo + .demo { margin-top: 72px; }

/* automação construída com o time */
.auto { background: #fff; border-radius: var(--radius); padding: 16px; font-size: .86rem; }
.auto-cab { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font: 500 .6875rem/1.2 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.auto-cab svg { width: 15px; height: 15px; color: var(--ai); }
.auto ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.auto li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; position: relative; padding-bottom: 16px; }
.auto li:last-child { padding-bottom: 0; }
.auto li::after { content: ""; position: absolute; left: 16px; top: 34px; bottom: 2px; width: 2px; background: var(--line); }
.auto li:last-child::after { display: none; }
.auto .ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--mist); border: 1px solid var(--line); }
.auto .ic svg { width: 17px; height: 17px; }
.auto li.ia .ic { background: var(--text); border-color: var(--text); color: #fff; }
.auto li.pessoa .ic { border-color: var(--ai); color: var(--ai); background: #fff; }
.auto b { display: block; line-height: 1.3; padding-top: 2px; }
.auto small { display: block; color: var(--muted); font-size: .8rem; line-height: 1.4; margin-top: 2px; }
.auto .quem { font: 500 .6875rem/1 var(--mono); text-transform: uppercase; letter-spacing: .04em; margin-left: 6px; padding: 2px 6px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); vertical-align: 1px; white-space: nowrap; }

/* ------------------------------------------------ formatos e preços */
.conversa { display: grid; gap: 18px; align-items: center; background: var(--mist); border: 1px solid var(--line); border-radius: 20px; padding: 22px; margin: 0 0 20px; }
@media (min-width: 860px) { .conversa { grid-template-columns: auto 1fr auto; gap: 28px; padding: 24px 28px; } }
.conversa .preco-gratis { font: 500 1.6rem/1 var(--mono); }
.conversa .preco-gratis small { display: block; font: 400 .72rem/1.3 var(--mono); color: var(--muted); margin-top: 6px; }
.conversa h3 { font-size: 20px; margin: 0 0 4px; }
.conversa p { margin: 0; color: var(--muted); font-size: 14.5px; }
.conversa .btn { width: 100%; }
@media (min-width: 860px) { .conversa .btn { width: auto; } }
.passo-zero { display: inline-block; font: 400 11px/1 var(--mono); color: var(--ai); border: 1px solid rgba(200,48,42,.3); border-radius: 999px; padding: 4px 8px; margin-bottom: 8px; }

/* combinados em 3 colunas no desktop */
@media (min-width: 1000px) { .combinados-lista { columns: 2; column-gap: 40px; } .combinados-lista li { break-inside: avoid; margin-bottom: 14px; } }

.sob-medida-dica { display: grid; gap: 14px; align-items: center; margin-top: 20px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px; }
@media (min-width: 760px) { .sob-medida-dica { grid-template-columns: auto 1fr auto; gap: 22px; } }
.sob-medida-dica p { margin: 0; color: var(--muted); }
.sob-medida-dica b { color: var(--text); }

@media (max-width: 400px) {
  .roteiro li { grid-template-columns: 40px 1fr; padding: 9px 11px; gap: 8px; }
  .ficha, .auto { padding: 12px; }
  .quadro { padding: 20px; }
}
.nq { white-space: nowrap; }

/* hero: "com a mão na massa." inteiro numa linha */
.l2-grupo { white-space: nowrap; }
@media (max-width: 380px) { .hero h1 { font-size: 34px; } }
.nota-guia { margin: -8px 0 18px; font-size: 13px; line-height: 1.45; color: var(--muted); }