/* Campinas: o texto à esquerda, embaixo, e a Torre do Castelo desenhada na coluna da direita, de pé na
   linha de baixo da seção. O traço se desenha de baixo para cima quando a seção aparece (data-anima,
   estilo/site.js), como no reel de 13/10; sem JavaScript ou com movimento reduzido, já aparece pronta. */
.comp-cidade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block: 1px solid var(--linha); }
.comp-cidade-txt { display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 40px 24px; }
.comp-cidade-arte { display: flex; align-items: flex-end; justify-content: center; padding-top: 56px; border-left: 1px dashed var(--linha);
  background: var(--superficie-suave); }
.comp-torre { display: block; width: auto; height: 440px; max-width: 100%; overflow: visible; }
.comp-torre path { fill: none; stroke: var(--texto); stroke-width: 1.5px; vector-effect: non-scaling-stroke; stroke-linejoin: miter;
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: comp-desenha 1s cubic-bezier(.3, .6, .3, 1) var(--d, 0s) both paused; }
.comp-torre .f { fill: var(--superficie-suave); }
.comp-torre.visivel path { animation-play-state: running; }
@keyframes comp-desenha { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .comp-torre path { animation: none; stroke-dashoffset: 0; } }

/* O que a Bases faz: o título à esquerda e o texto à direita (o "Designed to scale" da Harvey) */
.comp-duas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 96px 24px 0; }
.comp-duas-txt { display: flex; flex-direction: column; gap: 16px; }
.comp-duas-txt p { max-width: 520px; font-size: 18px; line-height: 28px; letter-spacing: -0.2px; color: var(--texto-2); text-wrap: pretty; }

/* Os cofundadores */
.comp-pessoas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--linha); }
.comp-pessoa { display: flex; flex-direction: column; gap: 4px; padding: 40px 24px; }
.comp-pessoa + .comp-pessoa { border-left: 1px dashed var(--linha); }
img.comp-iniciais { object-fit: cover; }
.comp-iniciais { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin-bottom: 24px; border-radius: 50%;
  border: 1px solid var(--linha); background: var(--terciaria); font-size: 22px; line-height: 28px; font-weight: 500; letter-spacing: 0.5px; color: var(--texto); }
.comp-pessoa-txt { display: flex; flex-direction: column; gap: 4px; }
.comp-cargo { font-size: 15px; line-height: 24px; letter-spacing: -0.2px; color: var(--texto-3); }

/* Como a Bases trabalha: a grade de dois por dois da Profound, cada princípio com uma tela pequena que o
   mostra acontecendo (no molde das de "Feita para times", em Funcionalidades) */
.comp-principios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block: 1px solid var(--linha); }
.comp-principio { display: flex; flex-direction: column; gap: 8px; padding: 40px 32px; min-width: 0; }
.cilu { display: flex; align-items: center; justify-content: center; min-height: 248px; margin-bottom: 24px; }
.cilu-painel { width: 100%; max-width: 420px; overflow: hidden; border: 1px solid var(--linha); border-radius: 12px; background: var(--superficie);
  font-size: 13px; line-height: 18px; letter-spacing: -0.1px; color: var(--texto-2); }
.cilu-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--linha); color: var(--texto); }
.cilu-cab small { font-size: 12px; color: var(--texto-3); }
.cilu-linha { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 16px; }
.cilu-linha + .cilu-linha { border-top: 1px solid var(--linha); }
.cilu-linha > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cilu-linha b { font-weight: 500; color: var(--texto); }
.cilu-ic { display: flex; flex: 0 0 14px; width: 14px; height: 14px; color: var(--texto-3); }
.cilu-ic svg { width: 14px; height: 14px; }
.cilu-ok .cilu-ic, .cilu-ok-cor { color: #05DF72; }
.cilu-alerta .cilu-ic { color: var(--aviso); }
.cilu-chip { position: relative; flex: none; margin-left: auto; padding: 1px 8px; border: 1px solid var(--linha); border-radius: 6px; font-size: 12px;
  line-height: 16px; color: var(--texto-2); white-space: nowrap; }
.cilu-chip svg { display: inline-block; width: 10px; height: 10px; margin-right: 4px; vertical-align: -1px; fill: currentColor; }
.cilu-chip-ok { color: #05DF72; border-color: rgba(5, 223, 114, .3); background: rgba(3, 46, 21, .7); }
.cilu-chip-alerta { color: var(--aviso); border-color: rgba(255, 139, 26, .3); background: var(--aviso-fundo); }
.cilu-acoes { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--linha); }
.cilu-btn { padding: 4px 10px; border: 1px solid var(--linha); border-radius: 6px; font-size: 12px; line-height: 16px; color: var(--texto); }
.cilu-btn-claro { border-color: var(--texto); background: var(--texto); color: var(--fundo); }
.cilu-logo { flex: 0 0 20px; width: 20px; height: 20px; }
.cilu-sub { display: block; font-size: 12px; line-height: 16px; color: var(--texto-3); }
/* A auditoria: o código como o robô lê; a faixa de leitura desce e os resultados entram um a um */
.cilu-cod { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 12px/18px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--texto-3); }
.cilu-k { color: var(--texto); }
.cilu-v { color: var(--texto-2); }
.cilu-res { display: flex; flex: none; margin-left: auto; }
.cilu-res .cilu-chip { margin-left: 0; }
.cilu-corpo { position: relative; }
.cilu-leitura .cilu-res { opacity: 0; animation: cilu-entra .25s ease var(--t) both paused; }
.cilu-leitura.visivel .cilu-res { animation-play-state: running; }
.cilu-leitura .cilu-corpo::after { content: ""; position: absolute; inset: 0 0 auto; height: 36px; opacity: 0; pointer-events: none;
  animation: cilu-varre 1.7s cubic-bezier(.45, 0, .55, 1) .15s both paused;
  background: linear-gradient(180deg, transparent, rgba(84, 162, 255, .10), transparent); border-bottom: 1px solid rgba(84, 162, 255, .35); }
.cilu-leitura.visivel .cilu-corpo::after { animation-play-state: running; }
@keyframes cilu-varre { 0% { opacity: 1; transform: translateY(-36px); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(190px); } }
.cilu-dias { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--linha); }
.cilu-semana { display: flex; gap: 6px; }
.cilu-dia { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10px; line-height: 12px; color: var(--texto-3); }
.cilu-dia i { width: 8px; height: 8px; border-radius: 2px; background: rgba(5, 223, 114, .55); }
.cilu-hoje { color: var(--texto); }
.cilu-hoje i { background: #05DF72; box-shadow: 0 0 0 3px rgba(5, 223, 114, .18); }

@keyframes cilu-sai { to { opacity: 0; } }
@keyframes cilu-entra { to { opacity: 1; } }

/* Os dados, só leitura: os logos, as setas de mão única e o interruptor de escrita desligado */
.cilu-leitura-dados svg { display: block; width: 100%; max-width: 420px; overflow: visible; font: 11px/1 var(--fonte); }
.cl-no rect { fill: var(--superficie); stroke: var(--linha); }
.cl-no text { fill: var(--texto-2); }
.cl-seta { fill: none; stroke: #05DF72; stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 1; animation: cf-traca .45s ease var(--t) both paused; }
.cl-ponta { fill: none; stroke: #05DF72; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; animation: cf-acende .2s ease .7s both paused; }
.cl-rot { fill: var(--texto-2); }
.cl-rot-nao { fill: var(--texto-3); }
.cl-volta { fill: none; stroke: var(--texto-3); stroke-width: 1.2; stroke-dasharray: 3 4; }
.cl-x { transform-box: fill-box; transform-origin: center; opacity: 0; animation: cf-surge .25s ease var(--t) both paused; }
.cl-x path { fill: none; stroke: var(--aviso); stroke-width: 1.8; stroke-linecap: round; }
.cl-trilho { fill: var(--terciaria); stroke: var(--linha); }
.cl-botao { fill: var(--superficie-suave); stroke: var(--texto-3); }
.cl-cadeado rect { fill: var(--texto-2); }
.cl-cadeado path { fill: none; stroke: var(--texto-2); stroke-width: 1.4; }
.cl-cadeado { transform-box: fill-box; transform-origin: center; opacity: 0; animation: cf-surge .3s ease 1.3s both paused; }
.cl-chave-rot { font-size: 12px; fill: var(--texto); }
.cl-chave-estado { font-size: 12px; fill: var(--texto-3); }
.cilu-leitura-dados .visivel, .cilu-leitura-dados .visivel * { animation-play-state: running; }

/* Os robôs: um fluxo sobre a grade de pontos, com a comporta onde o IP é conferido */
.cilu-fluxo { padding: 8px 0; background: radial-gradient(circle, var(--terciaria) 1px, transparent 1.4px) 0 0 / 16px 16px; }
.cilu-fluxo svg { display: block; width: 100%; max-width: 420px; overflow: visible; font: 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.cf-pedido rect, .cf-destino rect { fill: var(--superficie); stroke: var(--linha); }
.cf-pedido text { fill: var(--texto); }
.cf-barrado { animation: cf-apaga .3s ease .8s both paused; }
.cf-linha { fill: none; stroke: var(--texto-3); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 1; animation: cf-traca .4s ease var(--t) both paused; }
.cf-linha.cf-ok { stroke: #05DF72; }
.cf-portao { fill: var(--superficie); stroke: var(--linha); }
.cf-escudo { fill: var(--terciaria); stroke: var(--texto-2); stroke-width: 1.2; }
.cf-escudo-ok { fill: none; stroke: #05DF72; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cf-legenda { font: 10px/1 var(--fonte); fill: var(--texto-3); }
.cf-x { transform-box: fill-box; transform-origin: center; opacity: 0; animation: cf-surge .25s ease var(--t) both paused; }
.cf-x path { fill: none; stroke-width: 1.8; stroke-linecap: round; }
.cf-x-alerta path { stroke: var(--aviso); }
.cf-x-cinza path { stroke: var(--texto-3); }
.cf-destino { opacity: .35; animation: cf-acende .3s ease 1.45s both paused; }
.cf-destino rect { stroke: rgba(5, 223, 114, .45); fill: rgba(3, 46, 21, .7); }
.cf-destino text { fill: #05DF72; }
.cf-destino .cf-num { font-weight: 600; }
.cf-fora { opacity: 0; animation: cf-acende .3s ease 1s both paused; }
.cf-fora text { font: 11px/1 var(--fonte); fill: var(--texto-3); }
.cilu-fluxo .visivel, .cilu-fluxo .visivel * { animation-play-state: running; }
@keyframes cf-traca { to { stroke-dashoffset: 0; } }
@keyframes cf-apaga { to { opacity: .45; } }
@keyframes cf-surge { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes cf-acende { to { opacity: 1; } }

/* O rascunho: um documento em edição; o texto se escreve, a frase sem apoio é marcada, o cursor aprova */
.cd-papel { position: relative; width: 100%; max-width: 400px; padding: 16px 18px 14px; border: 1px solid var(--linha); border-radius: 12px;
  background: var(--superficie); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.cd-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; font-size: 12px; line-height: 16px; }
.cd-agente { display: inline-flex; align-items: center; gap: 6px; color: var(--texto-2); }
.cd-agente svg { width: 12px; height: 12px; fill: currentColor; }
.cd-estado { display: inline-grid; }
.cd-estado > * { grid-area: 1 / 1; justify-self: end; display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 6px;
  border: 1px solid var(--linha); white-space: nowrap; }
.cd-rasc { color: var(--texto-2); animation: cilu-sai .2s ease 2.15s both paused; }
.cd-aprov { opacity: 0; color: #05DF72; border-color: rgba(5, 223, 114, .3) !important; background: rgba(3, 46, 21, .7);
  animation: cilu-entra .25s ease 2.2s both paused; }
.cd-aprov svg { width: 11px; height: 11px; fill: currentColor; }
.cd-texto { display: flex; flex-direction: column; gap: 4px; margin: 0 0 16px; font-size: 14px; line-height: 22px; color: var(--texto); }
.cd-l { align-self: flex-start; clip-path: inset(0 100% 0 0); animation: cd-escreve .42s linear var(--t) both paused; }
.cd-sem { padding: 0 3px; margin-left: -3px; border-radius: 3px;
  animation: cd-escreve .42s linear var(--t) both paused, cd-marca .3s ease 1.1s both paused, cd-corta .3s ease 1.75s both paused; }
/* o comentário de revisão, logo abaixo da frase (na margem, cobria o texto no celular) */
.cd-nota { align-self: flex-start; margin-top: 2px; padding: 3px 8px; border-radius: 2px 8px 8px 8px; border: 1px solid rgba(255, 139, 26, .35);
  background: var(--aviso-fundo); font-size: 11px; line-height: 14px; color: var(--aviso); opacity: 0; transform: translateY(-3px);
  animation: cd-balao .3s ease 1.25s both paused; }
.cd-acoes { display: flex; justify-content: flex-end; gap: 8px; }
.cd-aprovar { animation: cd-aperta .22s ease 2s both paused; }
.cd-cursor { position: absolute; right: 26px; bottom: 6px; width: 16px; height: 20px; opacity: 0; transform: translate(70px, 46px);
  animation: cd-cursor 1.05s cubic-bezier(.3, .7, .3, 1) 1.15s both paused; }
.cd-cursor path { fill: var(--texto); stroke: var(--fundo); stroke-width: 1.2; }
.cd-papel.visivel, .cd-papel.visivel * { animation-play-state: running; }
@keyframes cd-escreve { to { clip-path: inset(0 0 0 0); } }
@keyframes cd-marca { to { background: var(--aviso-fundo); box-shadow: inset 0 -1px 0 var(--aviso); } }
@keyframes cd-corta { to { opacity: .5; text-decoration: line-through; text-decoration-color: var(--aviso); } }
@keyframes cd-balao { to { opacity: 1; transform: none; } }
@keyframes cd-aperta { 50% { transform: scale(.94); } }
@keyframes cd-cursor { 0% { opacity: 0; transform: translate(70px, 46px); } 15% { opacity: 1; } 75% { transform: none; }
  85% { transform: scale(.85); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .cilu-leitura .cilu-res { opacity: 1; }
  .cilu-leitura .cilu-res, .cilu-leitura .cilu-corpo::after { animation: none; }
  .cilu-fluxo *, .cilu-fluxo .visivel *, .cilu-leitura-dados * { animation: none !important; }
  .cl-seta { stroke-dashoffset: 0; }
  .cl-ponta, .cl-x, .cl-cadeado { opacity: 1; }
  .cf-linha { stroke-dashoffset: 0; }
  .cf-x, .cf-fora, .cf-destino { opacity: 1; }
  .cf-barrado { opacity: .45; }
  .cd-papel * { animation: none !important; }
  .cd-l { clip-path: none; }
  .cd-sem { background: var(--aviso-fundo); box-shadow: inset 0 -1px 0 var(--aviso); opacity: .5; text-decoration: line-through; text-decoration-color: var(--aviso); }
  .cd-nota, .cd-aprov { opacity: 1; transform: none; }
  .cd-rasc, .cd-cursor { opacity: 0; }
}
.comp-principio:nth-child(even) { border-left: 1px dashed var(--linha); }
.comp-principio:nth-child(n+3) { border-top: 1px dashed var(--linha); }

/* A citação, grande, como a da Harvey: aqui é do manifesto da própria Bases */
.comp-citacao { margin: 0; padding: 96px 24px 0; }
.comp-citacao blockquote { margin: 0; max-width: 820px; font-size: 40px; line-height: 48px; letter-spacing: -1px; font-weight: 500; color: var(--texto); text-wrap: balance; }
.comp-citacao figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 20px; font-size: 14px; line-height: 20px; letter-spacing: -0.17px; color: var(--texto-3); }
.comp-citacao a { display: inline-flex; align-items: center; gap: 6px; color: var(--texto); }
.comp-citacao a .bloco-link-seta { color: var(--texto); }

@media (max-width: 1024px) {
  .comp-pessoas { grid-template-columns: minmax(0, 1fr); }
  .comp-pessoa + .comp-pessoa { border-left: 0; border-top: 1px dashed var(--linha); }
}
@media (max-width: 767px) {
  .comp-cidade { grid-template-columns: minmax(0, 1fr); }
  .comp-cidade-txt { padding: 40px 16px; }
  .comp-cidade-arte { border-left: 0; border-top: 1px dashed var(--linha); padding-top: 40px; }
  .comp-torre { height: 340px; }
  .cilu { min-height: 0; }
  .comp-duas { grid-template-columns: minmax(0, 1fr); padding: 64px 16px 0; }
  .comp-duas-txt p { font-size: 16px; line-height: 26px; }
  .comp-pessoa, .comp-principio { padding: 24px 16px 32px; }
  /* no celular, as iniciais ao lado do nome: os três cabem sem virar uma coluna comprida */
  .comp-pessoa { flex-direction: row; align-items: center; gap: 16px; padding-bottom: 24px; }
  .comp-iniciais { width: 56px; height: 56px; margin-bottom: 0; font-size: 18px; }
  .comp-principios { grid-template-columns: minmax(0, 1fr); }
  .comp-principio:nth-child(even) { border-left: 0; }
  .comp-principio + .comp-principio { border-top: 1px dashed var(--linha); }
  .comp-citacao { padding: 64px 16px 0; }
  .comp-citacao blockquote { font-size: 28px; line-height: 36px; letter-spacing: -0.6px; }
}