/* passada de design da home, 07/10/2026 · secao #como (Como funciona). Dono: agente COMO.
   Le so os tokens de base.css (--ds-*). Seletores presos a section#como; !important so onde ha estilo embutido ou regra !important de outro arquivo (refino.css) a vencer.
   Nao mexe em opacity, transform, transition nem animation dos itens que entram na tela (data-reveal): as entradas, a linha do tempo e os pontos dourados seguem como eram. */

/* ============ 0. compasso da secao: sem respiro de cima (a faixa de cinema sangra ate a borda) e respiro de baixo menor ============ */
section#como{
  --cx-px:var(--ds-gutter);
  padding:0 var(--cx-px) clamp(64px,5.6vw,92px)!important;
}
section#como>div[style*="max-width"]{max-width:var(--ds-max)!important}

/* ============ 1. COMPUTADOR e tablet largo: faixa de cinema sem moldura ============ */
section#como .cx-film.elite-film{
  margin:0 calc(50% - 50vw) clamp(8px,1.4vw,20px)!important;   /* sangra ate as bordas da secao (o fundo e cortado pelo overflow da secao) */
  min-height:clamp(400px,31vw,460px);aspect-ratio:auto;
  align-items:flex-end;justify-content:center;
  border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent;
}
/* a imagem de fundo fica; so ganha mais presenca e sai de dentro da caixa (esmaece em cima e embaixo, sem borda) */
section#como .cx-film .elite-film-art{
  opacity:.82;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 66%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 66%,transparent 100%);
}
section#como .cx-film .elite-film-art>span{opacity:.1}
/* veu so do lado do texto, para a leitura (contraste AA), tambem esmaecido em cima e embaixo */
section#como .cx-film::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(14,13,12,.94) 0%,rgba(14,13,12,.78) 36%,rgba(14,13,12,.28) 62%,rgba(14,13,12,0) 80%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 66%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 66%,transparent 100%);
}
section#como .cx-film figcaption{
  position:relative;z-index:1;box-sizing:border-box;
  width:100%;max-width:calc(var(--ds-max) + 2*var(--cx-px));
  padding:clamp(72px,6.4vw,100px) var(--cx-px) clamp(44px,3.8vw,60px);
  background:none;
}
/* sobrancelha: fio de 28 px + mono do sistema */
section#como .cx-eyebrow{display:flex;align-items:center;gap:14px;margin:0 0 22px;font-family:var(--ds-mono);font-weight:500;line-height:1.2;letter-spacing:var(--ds-rotulo-esp);text-transform:uppercase;color:var(--ouro)}
section#como .cx-eyebrow i{width:28px;background:var(--ouro)}
/* titulo: a escala unica de secao */
section#como .cx-film h2{
  margin:0!important;max-width:12em!important;
  font-family:var(--ds-serif)!important;font-weight:500!important;
  font-size:var(--ds-h2)!important;line-height:1!important;letter-spacing:-.015em!important;
  color:var(--marfim);text-wrap:balance;
}
section#como .cx-film h2 i{display:block;font-weight:400;color:var(--ouro2)}
/* apoio em italico, uma ou duas linhas */
section#como .cx-film .cx-lede{max-width:26em;margin:26px 0 0;font:italic 400 calc(var(--ds-lead)*1.45)/1.28 var(--ds-serif);color:var(--marfim)}
/* o aviso de verdade vira UMA etiqueta curta, de uma linha (mesmo texto) */
section#como .cx-film .cx-fict{
  display:inline-flex;align-self:flex-start;align-items:center;gap:10px;max-width:100%;margin:28px 0 0;padding:8px 16px 8px 14px;
  border:1px solid rgba(201,165,94,.4);border-radius:99px;background:rgba(14,13,12,.5);
  font-family:var(--ds-mono);font-weight:500;font-size:13px!important;line-height:1.2;letter-spacing:.03em;text-transform:none;color:var(--ouro2);white-space:nowrap;
}
section#como .cx-film .cx-fict::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--ouro2);box-shadow:0 0 10px rgba(228,192,120,.7)}

/* ============ 2. passos (computador, acima de 900 px) ============ */
@media(min-width:901px){
  section#como .cx-row{grid-template-columns:minmax(0,1fr) 72px minmax(0,1.14fr);padding:clamp(18px,2.1vw,30px) 0}
  section#como .cx-alt{grid-template-columns:minmax(0,1.14fr) 72px minmax(0,1fr)}
  section#como .cx-txt{display:grid;grid-template-columns:clamp(96px,8.8vw,136px) minmax(0,1fr);column-gap:clamp(14px,1.6vw,24px);align-content:center;align-items:start;padding-right:clamp(0px,2.4vw,36px)}
  section#como .cx-alt .cx-txt{padding:0 0 0 clamp(0px,2.4vw,36px)}
  section#como .cx-txt>*{grid-column:2;min-width:0}
  /* numeral grande e leve (so contorno dourado), ao lado do bloco de texto */
  section#como .cx-txt>.cx-num{grid-column:1;grid-row:1 / span 6;align-self:start;margin:-.07em 0 0;font:italic 300 clamp(5rem,8vw,8.6rem)/.9 var(--ds-serif);letter-spacing:-.045em;color:rgba(201,165,94,.09);-webkit-text-stroke:1px rgba(228,192,120,.72)}
  section#como .cx-lab{display:flex;align-items:center;gap:12px;margin:0;font-weight:500;letter-spacing:var(--ds-rotulo-esp);color:var(--ouro)}
  section#como .cx-lab::before{content:"";flex:none;width:28px;height:1px;background:var(--ouro)}
  section#como .cx-txt h3{margin:16px 0 0;max-width:13em;font:500 var(--ds-h3)/1.04 var(--ds-serif);letter-spacing:-.012em;color:var(--marfim);text-wrap:balance}
  section#como .cx-txt p{margin:16px 0 0;max-width:29em;font-size:var(--ds-corpo);line-height:1.68;color:var(--m2)}
  section#como .cx-ator{margin-top:22px}
  section#como a.cx-ir{margin-top:16px}
  section#como .cx-node i{width:16px;height:16px;margin:-8px 0 0 -8px}
}
/* "quem age": caixa baixa, uma linha, mono menor, com o tracejado (IA) ou o fio cheio (pessoa) antes */
section#como .cx-ator,section#como .cx-ator *{font-size:13px!important}
section#como .cx-ator{display:flex;align-items:center;gap:10px;font-family:var(--ds-mono);font-weight:500;letter-spacing:.05em;text-transform:none;color:var(--m3)}
section#como .cx-ator b{color:var(--marfim)}
section#como a.cx-ir{justify-self:start;letter-spacing:.12em;padding:0 2px 4px;border-bottom-color:rgba(228,192,120,.5)}

/* computador estreito (901 a 1139 px): colunas um pouco mais justas para o rotulo e a barra dos cartoes nao quebrarem */
@media(min-width:901px) and (max-width:1139px){
  section#como .cx-row{grid-template-columns:minmax(0,1.04fr) 52px minmax(0,1.1fr)}
  section#como .cx-alt{grid-template-columns:minmax(0,1.1fr) 52px minmax(0,1.04fr)}
  section#como .cx-txt{grid-template-columns:clamp(68px,7vw,84px) minmax(0,1fr);column-gap:12px;padding-right:12px}
  section#como .cx-alt .cx-txt{padding:0 0 0 12px}
  section#como .cx-txt>.cx-num{font-size:clamp(4.2rem,7vw,5rem)}
  section#como .cx-lab{letter-spacing:.12em}
  section#como .cx-bar,section#como .cx-qh{padding:14px 18px;letter-spacing:.07em}
  section#como .cx-qh span:not(.cx-av){display:none}   /* so o complemento 'a equipe responde'; o titulo e o selo EXEMPLO ficam */
}

/* ============ 3. cartoes de maquete: o mesmo padrao nos tres ============ */
section#como .cx-ui{border:1px solid rgba(244,236,222,.12);border-radius:var(--ds-raio);box-shadow:var(--ds-sombra-cartao),0 0 0 1px rgba(0,0,0,.35)}
section#como .cx-bar,section#como .cx-qh{gap:12px;padding:15px 22px}
section#como .cx-bar{background:rgba(244,236,222,.035)}
section#como .cx-qh{border-radius:var(--ds-raio) var(--ds-raio) 0 0;background:linear-gradient(rgba(244,236,222,.035),rgba(244,236,222,.035)),linear-gradient(165deg,rgba(36,27,38,.94),rgba(18,13,16,.96))}
section#como .cx-av{width:36px;height:36px}
/* o selo EXEMPLO: mesma forma, mesmo tamanho, nos tres */
section#como .cx-bar em,section#como .cx-qh em{margin-left:auto;padding:6px 12px;border:1px solid rgba(201,165,94,.5);border-radius:99px;background:rgba(201,165,94,.08);font-size:12px!important;font-weight:500;line-height:1;letter-spacing:.16em;color:var(--ouro2)}
section#como .cx-msgs{gap:10px;padding:22px 22px 20px}
section#como .cx-m{max-width:84%;padding:12px 16px;border-radius:16px;font-size:1rem;line-height:1.5}
section#como .cx-m-p{border-bottom-left-radius:4px}
section#como .cx-m-r{border-bottom-right-radius:4px}
section#como .cx-m small{font-size:12px!important;margin-bottom:4px}
section#como .cx-dl>div{grid-template-columns:136px minmax(0,1fr);gap:16px;padding:12px 22px}
section#como .cx-dl dd{font-size:1.0625rem;line-height:1.4}
section#como .cx-foot{padding:14px 22px}
section#como .cx-q{gap:8px;padding:20px 22px 22px}
section#como .cx-q:last-child{border-radius:0 0 var(--ds-raio) var(--ds-raio);box-shadow:var(--ds-sombra-cartao)}
section#como .cx-q-h{font:500 clamp(1.45rem,1.2vw + 1rem,1.8rem)/1.12 var(--ds-serif)}
section#como .cx-q-path{margin-top:12px}

/* ============ 4. tablet em pe e celular: linha do tempo estreita, numeral na linha da sobrancelha ============ */
@media(max-width:900px){
  section#como .cx-row,section#como .cx-alt{grid-template-columns:18px minmax(0,1fr);column-gap:clamp(10px,3vw,20px);padding:12px 0 16px}
  section#como .cx-txt,section#como .cx-alt .cx-txt{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:center;padding:0}
  section#como .cx-txt>*{grid-column:1 / -1;min-width:0}
  section#como .cx-txt>.cx-num{grid-column:1;grid-row:1;margin:-.06em 0 0;font:italic 300 clamp(3rem,12vw,4.2rem)/.9 var(--ds-serif);letter-spacing:-.045em;color:rgba(201,165,94,.09);-webkit-text-stroke:1px rgba(228,192,120,.72)}
  section#como .cx-txt>.cx-lab{grid-column:2;grid-row:1;display:flex;align-items:center;gap:10px;margin:0;font-weight:500;letter-spacing:var(--ds-rotulo-esp);color:var(--ouro)}
  section#como .cx-lab::before{content:"";flex:none;width:20px;height:1px;background:var(--ouro)}
  section#como .cx-txt h3{margin:8px 0 0;max-width:15em;font:500 var(--ds-h3)/1.06 var(--ds-serif);letter-spacing:-.01em;color:var(--marfim);text-wrap:balance}
  section#como .cx-txt p{margin:8px 0 0;max-width:34em;font-size:var(--ds-corpo);line-height:1.55;color:var(--m2)}
  section#como .cx-ator{margin-top:10px}
  section#como a.cx-ir{margin-top:2px}
  section#como .cx-ui,section#como .cx-alt .cx-ui,section#como .cx-r3 .cx-qh{margin-top:14px}
  /* linha do tempo: o ponto fica na altura da sobrancelha */
  section#como .cx-node::before,section#como .cx-node::after,section#como .cx-r1 .cx-node::before,section#como .cx-r1 .cx-node::after{top:20px;bottom:0}
  section#como .cx-r3 .cx-node::before,section#como .cx-r3 .cx-node::after{top:0;bottom:auto;height:20px}
  section#como .cx-r2 .cx-node::before,section#como .cx-r2 .cx-node::after{top:0;bottom:0}
  section#como .cx-node i{top:20px}
}

/* tablet em pe (760 a 900 px): pilha com respiro maior que o do celular */
@media(min-width:760px) and (max-width:900px){
  section#como .cx-row,section#como .cx-alt{padding:20px 0 28px}
  section#como .cx-txt h3{margin-top:12px}
  section#como .cx-txt p{margin-top:12px}
  section#como .cx-ator{margin-top:16px}
  section#como .cx-ui,section#como .cx-alt .cx-ui,section#como .cx-r3 .cx-qh{margin-top:22px}
  section#como .cx-txt>.cx-num{font-size:4.6rem}
}

/* ============ 5. celular (ate 759 px): faixa mais baixa, cartoes mais justos, nada abaixo de 12 px ============ */
@media(max-width:759px){
  section#como{--cx-px:18px;padding-bottom:48px!important}
  section#como .cx-film.elite-film{min-height:0;padding-top:60px;margin-bottom:10px!important;display:block}
  section#como .cx-film .elite-film-art>span{top:-2%;right:3%;font-size:7.5rem}
  section#como .cx-film::after{background:linear-gradient(180deg,rgba(14,13,12,0) 0,rgba(14,13,12,.7) 38%,rgba(14,13,12,.94) 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%)}
  section#como .cx-film figcaption{max-width:none;padding:12px var(--cx-px) 18px}
  section#como .cx-eyebrow{margin:0 0 10px;font-size:12px!important}
  section#como .cx-film .cx-lede{margin-top:12px;font-size:1.22rem;line-height:1.25}
  /* etiqueta de verdade em UMA linha tambem no celular: sem o ponto, tracking levemente fechado; em tela muito estreita perde a caixa e fica so o texto */
  section#como .cx-film .cx-fict{margin-top:14px;padding:6px 10px;gap:0;font-family:var(--ds-sans);font-size:12px!important;letter-spacing:-.012em;white-space:nowrap}
  section#como .cx-film .cx-fict::before{display:none}
  section#como .cx-lab{font-size:12px!important}
  /* cartoes: mais justos, texto de maquete sempre >= 12 px */
  section#como .cx-bar,section#como .cx-qh{gap:9px;padding:10px 12px}
  section#como .cx-av{width:28px;height:28px}
  section#como .cx-bar,section#como .cx-bar *,section#como .cx-qh,section#como .cx-qh *{font-size:12px!important}
  section#como .cx-bar{letter-spacing:.06em}
  section#como .cx-bar em,section#como .cx-qh em{padding:5px 9px;letter-spacing:.12em}
  section#como .cx-msgs{gap:6px;padding:11px 11px 9px}
  section#como .cx-m{max-width:95%;padding:8px 11px;font-size:.9375rem;line-height:1.4}
  section#como .cx-m small{margin-bottom:1px}
  section#como .cx-dl>div{grid-template-columns:96px minmax(0,1fr);gap:8px;padding:7px 12px}
  section#como .cx-dl dt{font-size:12px!important;letter-spacing:.03em;padding-top:.2em}
  section#como .cx-dl dd{font-size:.9375rem;line-height:1.35}
  section#como .cx-dl .cx-falta dd span{font-size:.9375rem;padding:2px 9px}
  section#como .cx-foot{gap:7px;padding:9px 12px;font-size:12px!important;line-height:1.35}
  section#como .cx-foot::before{width:10px}
  section#como .cx-q{gap:3px;padding:10px 12px 12px}
  section#como .cx-q-k{font-size:12px!important;letter-spacing:.06em}
  section#como .cx-q-h{font-size:1.22rem;line-height:1.1}
  section#como .cx-q-path{margin-top:4px;gap:6px 8px}
  section#como .cx-q-path span{font-size:12.5px!important}
  section#como .cx-ator,section#como .cx-ator *{font-size:12.5px!important}
}
@media(max-width:380px){
  section#como .cx-bar,section#como .cx-bar *{letter-spacing:.03em}
  section#como .cx-film .cx-fict{padding:2px 0;border-color:transparent;background:none}
}

/* refino ad6466d7 07/10 (revisão crítica da home cffe492) */

/* como-cockpit[0]: o separador sai do fim do chip e entra no INICIO do chip seguinte; se a trilha quebrar, a 2a linha comeca com o separador e nenhuma seta fica pendurada. Celular (<=759) nao muda: o index.html ja esconde o separador la. O span ja e position:relative (index.html). */
@media(min-width:760px){
  section#como .cx-q-path{gap:8px 18px}   /* como-cockpit[0] */
  section#como .cx-q-path span:not(:last-child)::after{content:none}   /* como-cockpit[0] */
  section#como .cx-q-path span:not(:first-child)::before{content:"\203A";position:absolute;left:-13px;top:50%;transform:translateY(-52%);font-size:1rem;line-height:1;color:var(--m3)}   /* como-cockpit[0] */
}

/* como-cockpit[1] parte (a): colunas iguais nas duas grades, para o fio dourado dos 3 passos cair no mesmo eixo (o fio e a animacao dele ficam como eram; a parte (b), respiro entre trechos, NAO foi aplicada) */
@media(min-width:901px){
  section#como .cx-row{grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr)}   /* como-cockpit[1] */
  section#como .cx-alt{grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr)}   /* como-cockpit[1] */
}
@media(min-width:901px) and (max-width:1139px){
  section#como .cx-row{grid-template-columns:minmax(0,1.07fr) 52px minmax(0,1.07fr)}   /* como-cockpit[1] */
  section#como .cx-alt{grid-template-columns:minmax(0,1.07fr) 52px minmax(0,1.07fr)}   /* como-cockpit[1] */
}

/* como-cockpit[3]: a pulsacao do chip 'Rafaela assumiu' continua (mesma duracao, atraso e repeticao); so o piso sobe de .35 para .62. !important porque a animacao e estilo embutido. */
@keyframes cxPulsaSuave{50%{opacity:.62}}
section#como .cx-q-path span[style*="pulsa"]{animation-name:cxPulsaSuave!important}   /* como-cockpit[3] */

/* como-cockpit[4]: apoio da faixa de cinema sem artigo orfao no fim da linha (celular) */
section#como .cx-film .cx-lede{text-wrap:balance}   /* como-cockpit[4] */

/* como-cockpit[6]: no computador estreito a faixa sangra ate a borda da secao sem depender da barra de rolagem (100vw inclui a barra), e o conteudo dela alinha com a grade */
@media(max-width:1347px){
  section#como .cx-film.elite-film{margin-left:calc(-1*var(--cx-px))!important;margin-right:calc(-1*var(--cx-px))!important}   /* como-cockpit[6] */
}

/* como-cockpit[7] (parte do como.css), celular de 360 px: o selo de verdade ganha uma marca (fio dourado a esquerda) em vez de virar texto solto; texto igual e em uma linha */
@media(max-width:380px){
  section#como .cx-film .cx-fict{padding:2px 0 2px 8px;border:0;border-left:2px solid rgba(201,165,94,.55);border-radius:0;background:none;letter-spacing:-.022em}   /* como-cockpit[7] */
}
/* como-cockpit[7]: capsula 'Carteirinha do convenio' deixa de esticar quando o texto quebra em 2 linhas */
@media(max-width:389px){
  section#como .cx-dl .cx-falta dd span{border-radius:14px;line-height:1.25}   /* como-cockpit[7] */
}

/* entrada[3]: sombra do topo do Como em vinho quente (era preto/cinza neutro), mais curta; !important porque a sombra atual e embutida. Mantida apos comparacao lado a lado a 1440 e 390 (pico de sombra de rgb 175 para 212 sobre o creme, faixa de ~75 para ~35 px). */
section#como{box-shadow:0 -22px 56px -32px rgba(58,20,30,.5)!important}   /* entrada[3] */