/* =====================================================================
   composicao.css · Agência 24por7 · layout da página (v4.3)
   Só tokens.css e components.css. Zero px/hex/rgba/ms fora de breakpoints,
   env() e das duas transições de 280ms do seletor (curva aprovada).
   Blocos, na ordem da página: nav, topo (texto + 3D), roteiro (Como funciona),
   feed (Operação), quatro + mini (Soluções), pq2 (Para quem), contato/quem, rodape.
   ===================================================================== */



/* Nav */
.nav { position: fixed; top: calc(var(--esp-16) + env(safe-area-inset-top, 0px)); left: 0; right: 0; z-index: var(--z-nav); }
.nav__barra { display: flex; align-items: center; gap: var(--esp-8); height: var(--nav-altura); padding-inline: var(--esp-24) var(--esp-8); border-radius: var(--raio-pilula); }
.nav__links { display: none; gap: var(--esp-24); margin-inline: auto; }
.nav__links .s-btn { color: var(--texto-2); text-decoration: none; }
.nav__links .s-btn:hover { color: var(--texto); }
.nav__acoes { display: flex; gap: var(--esp-8); margin-left: auto; }
@media (min-width: 1024px) { .nav__links { display: flex; } .nav__acoes { margin-left: 0; } }

/* Topo v4.3: uma tela, uma ideia. Texto à esquerda, 3D à direita na altura da tela  */
.topo { padding-top: calc(var(--esp-16) + var(--nav-altura) + var(--esp-32) + env(safe-area-inset-top, 0px)); }
.topo__grade { display: grid; gap: var(--esp-32); align-items: center; }
.topo__texto { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-24); }
.topo__texto .s-h1 { font-size: var(--t-display); max-width: 14ch; margin: 0; }
.topo__texto .s-p { max-width: 40ch; margin: 0; }
.topo__acoes { display: flex; flex-wrap: wrap; gap: var(--esp-16) var(--esp-24); align-items: center; margin-top: var(--esp-8); }
.topo__video { padding: var(--esp-12); justify-self: center; width: 100%; max-width: 26rem; }
.topo__video video { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 40%; border-radius: var(--raio-s); }
@media (min-width: 1024px) {
  .topo__grade { grid-template-columns: minmax(0, 1fr) auto; gap: var(--esp-64); }
  .topo__video { max-width: none; width: auto; }
  /* a seção inteira cabe na tela: altura da tela menos o respiro de cima, o de baixo e a borda do vidro */
  .topo__video video { width: auto; height: clamp(20rem, calc(100svh - var(--esp-16) - var(--nav-altura) - var(--esp-32) - var(--secao-y) / 2 - 2 * var(--esp-12)), 44rem); }
}

.valor { font-size: var(--t-sub); font-weight: var(--peso-titulo); white-space: nowrap; }

/* Como funciona v4.3: roteiro em 9 etapas em volta do negócio
   Lista vertical por padrão (celular, tablet, sem JS).
   .roteiro--radial liga o palco de 1200 × 790 só quando a escala fica ≥ 0,9. */
.roteiro__cabecalho { text-align: center; margin-inline: auto; }
.roteiro__cabecalho > * { margin-inline: auto; }
.roteiro .s-selo { width: calc(var(--esp-48) + var(--esp-8)); height: calc(var(--esp-48) + var(--esp-8)); margin: 0; flex: none; }
.roteiro__num { font-family: var(--fonte-mono); font-size: var(--t-legenda); font-weight: var(--peso-regular); color: var(--acento); letter-spacing: 0; margin-right: var(--esp-12); }
.roteiro__cartao { padding: var(--esp-16) var(--esp-24); display: grid; gap: var(--esp-8); }
.roteiro__cartao .s-h3 { font-size: var(--t-corpo); margin: 0; display: flex; align-items: baseline; }
.roteiro__cartao .s-p { margin: 0; color: var(--texto-2); }
.roteiro__painel, .roteiro__fios, .roteiro__centro { display: none; }

/* lista: selo à esquerda, cartão à direita, um fio ligando os selos */
.roteiro__lista { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: var(--esp-16); max-width: 40rem; }
.roteiro__etapa { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--esp-16); align-items: start; }
.roteiro__etapa:not(:last-child)::before { content: ""; position: absolute; left: calc((var(--esp-48) + var(--esp-8)) / 2); top: calc(var(--esp-48) + var(--esp-16)); bottom: calc(var(--esp-8) - var(--esp-16)); width: var(--borda); background: color-mix(in srgb, var(--texto) 22%, transparent); }

/* palco radial */
.roteiro--radial .roteiro__palco { position: relative; height: calc(var(--roteiro-altura) * var(--escala, 1)); }
.roteiro--radial .roteiro__tela { position: absolute; left: 0; top: 0; width: var(--roteiro-largura); height: var(--roteiro-altura); transform-origin: 0 0; transform: scale(var(--escala, 1)); }
.roteiro--radial .roteiro__painel { display: block; position: absolute; padding: 0; left: calc(230 * var(--unidade-palco)); top: calc(190 * var(--unidade-palco)); width: calc(740 * var(--unidade-palco)); height: calc(400 * var(--unidade-palco)); border-radius: var(--raio-m); background: var(--vidro); }
.roteiro--radial .roteiro__fios { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.roteiro__fios path { fill: none; stroke-width: 1.25; }
.roteiro__fios .fio-centro { stroke: color-mix(in srgb, var(--acento) 50%, transparent); }
.roteiro__fios .fio-cartao { stroke: color-mix(in srgb, var(--texto) 26%, transparent); }
.roteiro--radial .roteiro__centro { display: flex; align-items: center; justify-content: center; gap: var(--esp-12); position: absolute; z-index: var(--z-conteudo); left: calc(490 * var(--unidade-palco)); top: calc(358 * var(--unidade-palco)); width: calc(220 * var(--unidade-palco)); height: calc(var(--esp-64)); padding: 0 var(--esp-16); border-radius: var(--raio-pilula); font-size: var(--t-sub); font-weight: var(--peso-titulo); letter-spacing: var(--tracking-titulo); box-shadow: 0 0 0 var(--esp-8) color-mix(in srgb, var(--texto) 6%, transparent), var(--sombra-card); }
.roteiro--radial .roteiro__centro .s-selo { width: var(--esp-32); height: var(--esp-32); }
.roteiro--radial .roteiro__centro .s-selo::before { display: none; }
.roteiro--radial .roteiro__centro .s-selo > svg { width: 1.125rem; height: 1.125rem; }
.roteiro--radial .roteiro__lista { position: absolute; inset: 0; max-width: none; margin: 0; display: block; }
.roteiro--radial .roteiro__etapa { position: absolute; display: block; left: calc(var(--x) * var(--unidade-palco)); top: calc(var(--y) * var(--unidade-palco)); width: var(--roteiro-cartao); }
.roteiro--radial .roteiro__etapa::before { display: none; }
.roteiro--radial .roteiro__etapa .s-selo { position: absolute; z-index: var(--z-conteudo); left: calc(var(--sx) * var(--unidade-palco)); top: calc(var(--sy) * var(--unidade-palco)); }

/* Feed */
.feed { font-family: var(--fonte-mono); font-size: var(--t-legenda); }
.feed__topo { display: flex; justify-content: space-between; align-items: center; gap: var(--esp-16); flex-wrap: wrap; }
.feed__lista { list-style: none; margin: 0; padding: 0; }
.feed__item { display: grid; grid-template-columns: auto 1fr; gap: var(--esp-16); padding-block: var(--esp-12); border-top: var(--borda) solid var(--linha); color: var(--texto-2); }
.feed__item:first-child { border-top: 0; }
.feed__hora { color: var(--texto-3); }
.feed__evento { display: flex; flex-wrap: wrap; gap: var(--esp-8) var(--esp-12); align-items: baseline; }
.feed__canal { color: var(--texto); }
.feed__acao { color: var(--acento); }
.feed__item--vivo .feed__acao { text-shadow: var(--acento-brilho); }

/* Soluções: 4 iguais, mesma altura */
.quatro { display: grid; gap: var(--esp-24); grid-template-columns: 1fr; }
@media (min-width: 768px) { .quatro { grid-template-columns: repeat(2, 1fr); } }
/* 4 colunas só quando cada mini-UI tem largura para ler; entre 768 e 1279, duas */
@media (min-width: 1280px) {
  .quatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* em 4 colunas o mini-UI precisa de largura: card e moldura com respiro menor */
  .quatro > .s-painel { padding: var(--esp-24); }
  .quatro .mini { padding: var(--esp-8); }
}
/* filho direto: o .mini__ui também é .s-painel e NÃO pode virar coluna flex */
.quatro > .s-painel { display: flex; flex-direction: column; }
.quatro > .s-painel > :last-child { margin-top: auto; padding-top: var(--esp-16); align-self: flex-start; }
.quatro__num { font-family: var(--fonte-mono); font-size: var(--t-legenda); color: var(--acento); }
.centro { text-align: center; margin: var(--esp-32) 0 0; }  /* sem a margem padrão do <p>, que somava 17 px ao vão */

/* Contato: dois painéis da MESMA altura */
.contato__grade { display: grid; gap: var(--esp-24); grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 1024px) { .contato__grade { grid-template-columns: 1fr 1fr; gap: var(--esp-32); } }
.quem { display: flex; flex-direction: column; gap: var(--esp-16); }
.quem > .s-h3 { max-width: 20ch; }
.quem__foto { aspect-ratio: 16 / 10; position: relative; overflow: hidden; border-radius: var(--raio-s); }
.quem__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }


.quem__acoes { display: flex; flex-wrap: wrap; gap: var(--esp-16); align-items: center; margin-top: auto; }

/* Para quem: 4 cards, foto 16:10, selo sobreposto no canto */
.pq { display: grid; gap: var(--esp-24); grid-template-columns: 1fr; }
@media (min-width: 768px) { .pq { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pq { grid-template-columns: repeat(4, 1fr); } }
.pq .s-painel { padding: var(--esp-16); display: flex; flex-direction: column; }
.pq .s-h3, .pq .s-p { padding-inline: var(--esp-8); }
.pq .s-p { padding-bottom: var(--esp-8); }




/* ===== Padrão Amigo 1: seletor "Para quem" (lista à esquerda, foto + mini-card à direita) ===== */
.pq2 { display: grid; gap: var(--esp-32); align-items: stretch; }
@media (min-width: 1024px) { .pq2 { grid-template-columns: 5fr 7fr; gap: var(--esp-64); } }
.pq2__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--esp-8); }
.pq2__item { display: flex; align-items: center; gap: var(--esp-16); width: 100%; text-align: left; background: none; border: 0; padding: var(--esp-16) var(--esp-8); border-radius: var(--raio-s); color: var(--texto-3); font: inherit; font-size: var(--t-titulo); font-weight: var(--peso-titulo); letter-spacing: var(--tracking-titulo); line-height: 1.1; cursor: pointer; transition: color var(--dur-curta) var(--suave), background-color var(--dur-curta) var(--suave); }
.pq2__item:hover { color: var(--texto-2); }
.pq2__item[aria-selected="true"] { color: var(--texto); }
.pq2__item { position: relative; }
.pq2__item::after { content: ""; position: absolute; left: var(--esp-8); right: var(--esp-8); bottom: 0; height: var(--borda); background: var(--linha); transform-origin: left; transform: scaleX(0); }
.pq2__item[aria-selected="true"]::after { background: var(--acento); animation: pq2-progresso var(--pq2-tempo, 6s) linear forwards; }
.pq2.pausado .pq2__item[aria-selected="true"]::after { animation-play-state: paused; }
@keyframes pq2-progresso { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .pq2__item[aria-selected="true"]::after { animation: none; transform: scaleX(1); } }
.pq2__item .s-selo { flex: none; opacity: 0; transform: scale(.8); transition: opacity var(--dur-curta) var(--suave), transform var(--dur-curta) var(--suave); }
.pq2__item[aria-selected="true"] .s-selo { opacity: 1; transform: none; }
.pq2__item:focus-visible { outline: var(--foco-largura) solid var(--foco); outline-offset: var(--foco-offset); }
@media (max-width: 1023px) { .pq2__item { font-size: var(--t-sub); } .pq2__lista { flex-direction: row; flex-wrap: wrap; } .pq2__item { width: auto; } }
.pq2__painel { display: grid; gap: var(--esp-24); align-items: center; }
@media (min-width: 768px) { .pq2__painel { grid-template-columns: minmax(0, 22rem) 1fr; gap: var(--esp-32); } }
.pq2__foto { position: relative; aspect-ratio: 4 / 5; border-radius: var(--raio-m); overflow: hidden; }
.pq2__foto img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--raio-m); border: var(--borda) solid var(--vidro-borda); }
.pq2__mini { position: absolute; left: var(--esp-12); bottom: var(--esp-12); max-width: calc(100% - var(--esp-24)); padding: var(--esp-12); display: grid; gap: var(--esp-4); background: color-mix(in srgb, var(--fundo) 72%, transparent); -webkit-backdrop-filter: blur(var(--vidro-blur)) saturate(140%); backdrop-filter: blur(var(--vidro-blur)) saturate(140%); }
.pq2__mini .s-status { font-size: var(--t-legenda); }
.pq2__mini .pq2__exemplo { font-size: var(--t-legenda); color: var(--exemplo-texto); margin-left: var(--esp-8); }
.pq2__mini .valor { font-size: var(--t-pequeno); white-space: normal; line-height: var(--lh-pequeno); }

.pq2__texto { display: flex; flex-direction: column; gap: var(--esp-12); }
.pq2__paineis { position: relative; display: grid; }
.pq2 [data-perfil] { grid-area: 1 / 1; opacity: 0; transform: translateY(var(--esp-8)); pointer-events: none; transition: opacity 280ms cubic-bezier(.25, 1, .5, 1), transform 280ms cubic-bezier(.25, 1, .5, 1); }
.pq2 [data-perfil].ativo { opacity: 1; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .pq2 [data-perfil] { transition: none; } }

/* ===== Padrão Amigo 2: card de feature com mini-UI (Soluções) ===== */
.quatro .s-selo { margin-bottom: var(--esp-12); }
.mini { height: 12rem; display: flex; padding: var(--esp-12); margin: 0 0 var(--esp-16); border-radius: var(--raio-s); background: linear-gradient(135deg, var(--vidro-forte), transparent); border: var(--borda) solid var(--linha); }
.mini__ui { width: 100%; min-width: 0; height: 100%; padding: var(--esp-12); font-size: var(--t-legenda); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; align-items: center; gap: var(--esp-8); }
.mini__ui .s-status, .mini__ui .s-legenda, .mini__linha > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini__ui > * { margin: 0; }
.mini__linha { display: flex; justify-content: space-between; gap: var(--esp-8); align-items: center; min-height: var(--esp-24); }
/* o texto da esquerda encolhe com reticências; o valor ou a tag da direita nunca é cortado */
.mini__linha > :first-child { flex: 1 1 auto; min-width: 0; }
.mini__linha > :last-child { flex: none; }
.mini .s-tag { padding-inline: var(--esp-8); }
.mini__barra { height: var(--esp-8); border-radius: var(--raio-pilula); background: color-mix(in srgb, var(--texto) 12%, transparent); overflow: hidden; }
.mini__barra > span { display: block; height: 100%; width: 62%; background: var(--acento); box-shadow: var(--acento-brilho); }
.mini__bolha { display: inline-block; justify-self: start; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: var(--esp-8) var(--esp-12); border-radius: var(--raio-m); background: color-mix(in srgb, var(--texto) 10%, transparent); font-size: var(--t-legenda); line-height: 1.3; }
.mini__bolha--agente { justify-self: end; background: color-mix(in srgb, var(--acento) 16%, transparent); }
.mini__campo { height: var(--esp-32); border-radius: var(--raio-s); border: var(--borda) solid var(--linha); background: color-mix(in srgb, var(--texto) 5%, transparent); }
.mini .s-legenda { font-size: var(--t-legenda); }

/* Rodapé */
.rodape { padding-block: var(--esp-48); border-top: var(--borda) solid var(--linha); }
.rodape__grade { display: flex; flex-wrap: wrap; gap: var(--esp-24); justify-content: space-between; align-items: center; }
.rodape__links { display: flex; flex-wrap: wrap; gap: var(--esp-16) var(--esp-24); }
.rodape .s-link { display: inline-flex; align-items: center; min-height: var(--alvo-toque); font-size: var(--t-pequeno); color: var(--texto-2); text-decoration: none; }
.rodape .s-link:hover { color: var(--acento); }


/* Menu celular: tela inteira, fundo sólido, sem vidro */
.nav__menu {
  display: none; flex-direction: column;
  position: fixed; inset: 0; z-index: calc(var(--z-nav) - 1);
  padding-top: calc(var(--nav-altura) + var(--esp-16) + env(safe-area-inset-top, 0px) + var(--esp-8));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-inline: var(--esp-24);
  overflow-y: auto;
  background: var(--fundo);
  background-image: radial-gradient(ellipse 600px 500px at 10% 20%, rgba(139,255,169,.08), transparent 70%);
}
.nav__menu[hidden] { display: none !important; }
.nav__menu:not([hidden]) { display: flex; }
.nav__menu-links { display: flex; flex-direction: column; flex: 1; }
.nav__menu-item {
  display: flex; align-items: center; min-height: 52px;
  font-family: var(--fonte-texto); font-size: var(--t-menu); font-weight: 600;
  color: var(--texto); text-decoration: none; border: none; background: none;
  padding: 0; cursor: pointer; width: 100%; text-align: left;
}
.nav__menu-item--sub { padding-left: var(--esp-16); color: var(--texto-2); }
.nav__menu-accordion { gap: var(--esp-8); }
.nav__menu-seta { transition: transform .2s; flex: none; }
.nav__menu-accordion[aria-expanded="true"] .nav__menu-seta { transform: rotate(180deg); }
.nav__menu-sub[hidden] { display: none; }
.nav__menu-sub:not([hidden]) { display: flex; flex-direction: column; }
.nav__menu-grupo { display: flex; flex-direction: column; }
.nav__menu-rodape {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: var(--esp-16); margin-top: auto;
  border-top: 1px solid var(--linha);
}
.nav__menu-rotulo { font-size: var(--t-pequeno); color: var(--texto-2); }
.nav__menu-tema { display: flex; border-radius: var(--raio-pilula); overflow: hidden; border: 1px solid var(--linha); }
.nav__menu-tema-btn {
  padding: var(--esp-4) var(--esp-16); border: none; background: none;
  min-height: var(--alvo-toque); font-family: var(--fonte-texto); font-size: var(--t-pequeno); font-weight: 600; color: var(--texto-2); cursor: pointer;
}
.nav__menu-tema-btn[aria-pressed="true"] { background: var(--acento); color: var(--acento-texto); }
@media (min-width: 1024px) { .nav__menu { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .nav__menu-seta { transition: none; } }

/* Responsivo */
@media (max-width: 1023px) {
  .nav__barra { padding-inline: var(--esp-16) var(--esp-8); }
  .nav__acoes .s-btn:not(.s-btn--icone) { padding-inline: var(--esp-16); }
}
.nav__links .s-btn--link { min-height: 0; padding-block: 0; }