/* =====================================================================
   Bee Saúde — pele da página de conceito (/conceito/).

   Carregada só nesta página, depois de bee.css.

   =====================================================================
   O PADRÃO, EM UMA FRASE
   =====================================================================
   Um eixo à esquerda para tudo. Texto corrido para em 68ch. Tudo que NÃO
   é texto corrido usa a largura inteira do cabeçalho.

   Isso é o sistema completo. Se algo nesta página não se explica por essa
   frase, é erro, não exceção.

   ---------------------------------------------------------------------
   POR QUE A COLUNA DE TEXTO É ESTREITA, E POR QUE ISSO NÃO É "ESPREMER"
   ---------------------------------------------------------------------
   Medida de leitura confortável é 45 a 75 caracteres por linha, com ~65
   no ponto ideal. Não é preferência estética: acima disso o olho perde a
   linha ao voltar para a esquerda. Encher 1280px de texto corrido daria
   ~140 caracteres por linha, quase o dobro do limite.

   O erro da versão anterior não foi a coluna estreita. Foi CENTRALIZAR um
   bloco de 1000px dentro de um wrap de 1280: sobrava margem dos dois
   lados, sem função, e o resultado lê como aperto.

   Agora tudo começa na borda esquerda do wrap, o mesmo eixo do logo no
   cabeçalho. A largura livre fica toda de um lado só, o que lê como
   composição assimétrica em vez de sobra. E os elementos que não são
   texto (diagrama, pilares) ocupam a largura inteira, então a página usa
   a tela que tem.

   ---------------------------------------------------------------------
   O QUE ESTAVA ERRADO ANTES, PARA NÃO VOLTAR
   ---------------------------------------------------------------------
   · Quatro escalas de título escolhidas a dedo, uma por seção. Agora há
     uma ESCALA MODULAR: uma razão (1,25) gera todos os tamanhos, e cada
     papel tem exatamente um degrau.
   · Rótulo de seção que aparecia em algumas seções e sumia em outras.
     Agora TODA seção tem um, no mesmo lugar, no mesmo tamanho.
   · O diagrama ocupava uma largura própria, diferente de todo o resto.
   · Manifesto e fechamento centralizados enquanto o resto ficava à
     esquerda: três alinhamentos numa página só.
   · Antes disso ainda, quatro fundos diferentes. O tom é um só.

   A coerência com a LP vem da paleta, da tipografia e dos elementos da
   marca. Não de repetir a estrutura de uma página de conversão, que tem
   outro trabalho a fazer.
   ===================================================================== */

.pg-conceito {
  background: var(--off-white);

  /* ---------------------------------------------------------------
     ESCALA MODULAR — razão 1,25 (terça maior) sobre base 1,0625rem.

     Cada degrau tem UM papel. Nenhum tamanho de fonte nesta folha pode
     ser escrito à mão: ou é um destes, ou o papel não existe no
     sistema.

     Os clamp mantêm a mesma razão nas duas pontas, então a hierarquia
     não se achata no mobile.
     --------------------------------------------------------------- */
  --t-1: clamp(.79rem, .77rem + .09vw, .85rem);      /* rótulo, nota, legenda */
  --t0:  clamp(1rem, .97rem + .16vw, 1.0625rem);     /* corpo */
  --t1:  clamp(1.16rem, 1.09rem + .3vw, 1.33rem);    /* lede, destaque */
  --t2:  clamp(1.3rem, 1.19rem + .45vw, 1.66rem);    /* h3 */
  --t3:  clamp(1.55rem, 1.31rem + 1vw, 2.08rem);     /* TODO h2, sem exceção */
  --t4:  clamp(2rem, 1.58rem + 1.75vw, 2.6rem);      /* h1 e manifesto */

  /* espaço, derivado da mesma razão */
  --e1: .53rem;
  --e2: .83rem;
  --e3: 1.3rem;
  --e4: 2.03rem;
  --e5: 3.17rem;
  --e6: 4.95rem;

  --medida: 68ch;      /* teto do texto corrido */
}

/* ---------- migalha ---------- */
.pg-conceito .cc-migalha {
  padding: var(--e3) 0 0;
  font-size: var(--t-1);
  color: var(--ink-soft);
}
.pg-conceito .cc-migalha .wrap { display: flex; gap: var(--e2); align-items: center; }
.pg-conceito .cc-migalha a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.pg-conceito .cc-migalha a:hover { color: var(--ink); }
.pg-conceito .cc-migalha span[aria-current] { color: var(--ink); font-weight: 600; }


/* =====================================================================
   A SEÇÃO
   ---------------------------------------------------------------------
   Sem fundo, sem grade interna. O .wrap já dá o eixo esquerdo, o mesmo
   do cabeçalho. Quem separa é o fio e o espaço.
   ===================================================================== */
.pg-conceito .cc-sec { padding: var(--e6) 0; background: transparent; }
.pg-conceito .cc-sec + .cc-sec { border-top: 1px solid var(--line); }

/* O texto corrido, e só ele, para em 68ch. */
.pg-conceito .cc-texto { max-width: var(--medida); }

/* ---------------------------------------------------------------------
   O RÓTULO DE SEÇÃO
   Toda seção tem um, inclusive a abertura e o manifesto. Zero exceções:
   era a inconsistência mais visível da versão anterior.

   Mesma anatomia do eyebrow da LP (hexágono + texto em caixa alta), mas
   sem a pílula amarela: aqui o amarelo é reservado, e um acento em toda
   seção deixa de ser acento.
   --------------------------------------------------------------------- */
.pg-conceito .cc-rotulo {
  display: flex;
  align-items: center;
  gap: var(--e1);
  margin: 0 0 var(--e3);
  font-size: var(--t-1);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.pg-conceito .cc-rotulo::before {
  content: "";
  flex: 0 0 auto;
  width: 9px; height: 10px;
  background: var(--amarelo);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

/* ---------------------------------------------------------------------
   TIPOGRAFIA — cada papel num degrau da escala, e nada fora dela
   --------------------------------------------------------------------- */
.pg-conceito h1 {
  font-size: var(--t4);
  line-height: 1.06;
  letter-spacing: -.032em;
  max-width: 17ch;
  margin: 0 0 var(--e3);
}
/* TODO h2 no mesmo degrau. Era aqui que a página perdia a coerência: a
   primeira seção num tamanho, a segunda noutro, a terceira grande de
   novo. */
.pg-conceito h2 {
  font-size: var(--t3);
  line-height: 1.14;
  letter-spacing: -.028em;
  max-width: 22ch;
  margin: 0 0 var(--e3);
}
.pg-conceito .cc-lede {
  font-size: var(--t1);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 52ch;
  margin: 0;
}
.pg-conceito .cc-texto p {
  font-size: var(--t0);
  line-height: 1.75;
  color: var(--ink);
  margin: 0 0 var(--e3);
}
.pg-conceito .cc-texto p:last-child { margin-bottom: 0; }

/* O propósito é a frase de §04, palavra por palavra: é a resposta ao
   título da seção, não mais um parágrafo. */
.pg-conceito .cc-destaque {
  font-family: var(--display);
  font-size: var(--t1) !important;
  font-weight: 600;
  line-height: 1.32 !important;
  letter-spacing: -.02em;
  margin-bottom: var(--e4) !important;
}

/* A ressalva jurídica: grifo do sistema, não caixa de aviso. */
.pg-conceito .cc-texto strong {
  color: var(--ink);
  font-weight: 700;
  padding: .1em .24em;
  margin: 0 -.08em;
  background-color: color-mix(in srgb, var(--amarelo) 88%, transparent);
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}


/* =====================================================================
   SEÇÃO COM FIGURA
   ---------------------------------------------------------------------
   Duas colunas: o texto para em 68ch e a figura ocupa o resto até a borda
   do wrap. É a mesma regra de sempre — texto corrido tem teto, o que não é
   texto usa a largura — só que aqui as duas coisas convivem na mesma linha
   em vez de se sucederem.

   A figura alinha pelo TOPO com o rótulo da seção, não com o parágrafo:
   assim o eixo horizontal superior da seção é um só.
   ===================================================================== */
.pg-conceito .cc-sec--fig > .wrap {
  display: grid;
  grid-template-columns: minmax(0, var(--medida)) minmax(0, 1fr);
  gap: 0 var(--e5);
  align-items: start;
}
.pg-conceito .cc-sec--fig .cc-rotulo,
.pg-conceito .cc-sec--fig .cc-texto { grid-column: 1; }
.pg-conceito .cc-fig { grid-column: 2; grid-row: 1 / span 2; }

@media (max-width: 1040px) {
  /* Abaixo disto a coluna da figura fica estreita demais para valer a pena.
     A figura desce para baixo do texto e cresce até a medida de leitura. */
  .pg-conceito .cc-sec--fig > .wrap { grid-template-columns: minmax(0, 1fr); }
  .pg-conceito .cc-fig {
    grid-column: 1;
    grid-row: auto;
    margin-top: var(--e4);
    max-width: var(--medida);
  }
}

.pg-conceito .cc-fig { margin: 0; }
/* Canto arredondado igual ao da home. A home usa 12px em toda mídia
   (hero, card do passo a passo) e o /conceito/ vinha reto, o que fazia as
   duas páginas parecerem de projetos diferentes. O favo da marca é curvo:
   moldura em canto vivo briga com ele. */
.pg-conceito .cc-fig img,
.pg-conceito .cc-fig svg {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-lg);
}
/* O SVG do encaixe não leva raio: é desenho técnico sobre o fundo da página,
   não fotografia dentro de uma moldura. */
.pg-conceito .cc-fig svg { border-radius: 0; }
.pg-conceito .cc-fig figcaption {
  margin-top: var(--e2);
  font-size: var(--t-1);
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------------
   O SLOT VAZIO — visível SÓ em localhost
   ---------------------------------------------------------------------
   Quando o arquivo de imagem ainda não existe, o `onerror` marca a figura
   como vazia. O que acontece a seguir depende de onde a página está sendo
   servida:

     · em localhost, aparece o marcador com a especificação do que entra
       ali (proporção, tamanho e assunto);
     · em produção, a figura COLAPSA e a seção vira uma coluna de texto
       normal. Nada de caixa cinza escrita "placeholder" no ar.

   É a mesma trava dos preços de preview em js/b2c/vitrine.js, presa ao
   hostname pelo mesmo motivo: o que serve para trabalhar não pode vazar.
   Quando o arquivo real chegar, o marcador desaparece sozinho, sem tocar
   em código.
   --------------------------------------------------------------------- */
/* Padrão: a figura sem imagem não existe, e o marcador nunca aparece.
   Os dois só ligam quando o documento está marcado como local. */
.pg-conceito .cc-fig.is-vazio { display: none; }
.pg-conceito .cc-slot { display: none; }

[data-ambiente="local"] .pg-conceito .cc-fig.is-vazio { display: block; }
[data-ambiente="local"] .pg-conceito .cc-fig.is-vazio .cc-slot {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--e1);
  aspect-ratio: var(--proporcao, 4 / 5);
  padding: var(--e3);
  border: 1px dashed var(--ambar-texto);
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(
      -45deg,
      transparent 0 9px,
      color-mix(in srgb, var(--amarelo) 13%, transparent) 9px 18px
    );
}
[data-ambiente="local"] .pg-conceito .cc-slot b {
  font-family: var(--display);
  font-size: var(--t-1);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ambar-texto);
}
[data-ambiente="local"] .pg-conceito .cc-slot span {
  font-size: var(--t-1);
  line-height: 1.5;
  color: var(--ink);
}
[data-ambiente="local"] .pg-conceito .cc-slot code {
  font-size: var(--t-1);
  color: var(--ink-soft);
}


/* =====================================================================
   MANIFESTO
   ---------------------------------------------------------------------
   Mesmo eixo, mesmo tom, mesmo rótulo. O que muda é a ESCALA: a frase de
   abertura sobe para o degrau do h1, porque é declaração de página, não
   título de seção.

   Antes era uma seção PRETA CENTRALIZADA. Duas quebras de sistema de uma
   vez: um bloco de cor numa página de tom único e um alinhamento que
   nenhuma outra seção usava.
   ===================================================================== */
.pg-conceito .cc-manifesto-abre {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t4);
  line-height: 1.06;
  letter-spacing: -.032em;
  color: var(--ink);
  max-width: 15ch;
  margin: 0 0 var(--e4);
}
.pg-conceito .cc-manifesto-corpo { max-width: var(--medida); }
.pg-conceito .cc-manifesto-corpo p {
  font-size: var(--t0);
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0 0 var(--e3);
}
.pg-conceito .cc-manifesto-corpo p:last-child { margin-bottom: 0; }

/* O fecho é frase de campanha aprovada (§07). O grifo é o único lugar em
   que o amarelo pode tocar texto, porque o texto por cima é preto. */
.pg-conceito .cc-manifesto-fecha {
  margin: var(--e4) 0 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t2);
  line-height: 1.3;
  letter-spacing: -.025em;
}
.pg-conceito .cc-manifesto-fecha .bee-grifo { padding: .12em .3em; }


/* =====================================================================
   O DIAGRAMA — largura inteira
   ---------------------------------------------------------------------
   Não é texto corrido, então usa a largura do cabeçalho. É metade da
   razão de a página não parecer apertada: a tela é ocupada onde ocupar
   faz sentido.

   Três nós assentados sobre a LINHA DE VOO, e a própria linha nomeada
   como o quarto elemento na legenda.

   §11 define a linha de voo como "conector proprietário da marca, EM
   SUBSTITUIÇÃO À SETA CONVENCIONAL", com uso em "diagramas de jornada".
   Esta é a primeira e única aparição dela no site, e é legítima porque
   aqui ela CONECTA. Enquanto não houver outro diagrama de jornada de
   verdade (a apresentação B2B de §13, o onboarding do app), ela não deve
   aparecer em mais nenhum lugar.

   A curva vem de dois cúbicos cujos pontos de ancoragem caem em x=167,
   500 e 833 de um viewBox de 1000 — o centro exato de cada coluna do
   grid de três. É o que faz os nós assentarem na linha em qualquer
   largura.

   `preserveAspectRatio="none"` deixa a curva acompanhar a largura;
   `vector-effect="non-scaling-stroke"` impede que traço e pontilhado
   estiquem junto. Sem o segundo, os pontos viram travessões em tela
   larga.
   ===================================================================== */
.pg-conceito .fluxo {
  position: relative;
  margin: var(--e5) 0 0;
}

.pg-conceito .fluxo-linha {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 130px;
  color: var(--ambar-texto);
  opacity: .5;
  pointer-events: none;
}

.pg-conceito .fluxo-nos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e4);
}
.pg-conceito .fluxo-nos > li { min-width: 0; text-align: center; }

/* O nó é .bee-ic-hex, o componente de §12 ("ícone inscrito em hexágono").
   Aqui só o posicionamento.

   Antes os três nós eram hexágonos VAZIOS e idênticos. O diagrama nomeava
   abelha, favo e mel e desenhava a mesma forma três vezes: rótulo com
   moldura, não diagrama. Agora cada nó mostra o que nomeia, com glifos que
   saem da mesma malha hexagonal (scripts/gerar-glifos-fluxo.py).

   O nó não tem mais campo de fundo colorido: o hexágono é o arquivo do kit,
   em contorno, e o fundo da página aparece por dentro dele. Por isso sumiu
   daqui o `color-mix` que casava o tom com o off-white — não há mais tom a
   casar. */
/* 36px e não 33px: a curva da linha de voo passa em y=65 do SVG de 130px de
   altura, e o nó precisa ficar centrado NELA. Com o hexágono do kit o nó
   passou de 64px para 58px de altura, então o deslocamento subiu junto —
   36 + 29 = 65. Mexer na altura do nó sem mexer aqui desalinha os três da
   curva, e o desalinho é de 3px, do tipo que se vê sem saber nomear. */
.pg-conceito .fluxo-hex {
  margin: 36px auto var(--e3);
}
/* O mel é o único nó cheio: é o que a rede produz, o fim do trajeto. É um
   dos três usos de amarelo da página.

   O seletor precisa das DUAS classes porque a regra acima (`.pg-conceito
   .fluxo-hex`) tem especificidade 0-2-0 e venceria o `.bee-ic-hex--cheio`
   do componente, que é 0-1-0. Sem isto o nó do mel sai com o mesmo tom
   pálido dos outros e o único acento da seção some. */
.pg-conceito .bee-ic-hex--cheio.fluxo-hex { background-image: url("../assets/marca/hex-cheio.svg"); }

.pg-conceito .fluxo-nos h3 {
  font-family: var(--display);
  font-size: var(--t2);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 var(--e1);
  max-width: none;
}
.pg-conceito .fluxo-papel {
  margin: 0 0 var(--e2);
  font-size: var(--t-1);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ambar-texto);
}
.pg-conceito .fluxo-desc {
  margin: 0;
  font-size: var(--t0);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 34ch;
  margin-inline: auto;
}

/* A legenda nomeia a própria linha. Uma amostra do pontilhado liga o
   texto ao desenho sem precisar de "veja acima". */
.pg-conceito .fluxo-legenda {
  display: grid;
  grid-template-columns: 56px minmax(0, var(--medida));
  gap: var(--e3);
  align-items: start;
  margin: var(--e5) 0 0;
  padding-top: var(--e3);
  border-top: 1px solid var(--line);
  font-size: var(--t0);
  line-height: 1.65;
  color: var(--ink-soft);
}
.pg-conceito .fluxo-legenda b { color: var(--ink); font-weight: 600; }
.pg-conceito .fluxo-legenda-linha {
  margin-top: .62em;
  height: 3px;
  border-radius: 3px;
  background-image: radial-gradient(circle, var(--ambar-texto) 1.2px, transparent 1.3px);
  background-size: 11px 3px;
  background-repeat: repeat-x;
  opacity: .5;
}

@media (max-width: 760px) {
  /* No mobile a curva não cabe: os nós empilham e a linha de voo vira
     vertical, com o mesmo pontilhado. O elemento continua conectando,
     que é a função dele. */
  .pg-conceito .fluxo-linha { display: none; }
  .pg-conceito .fluxo-nos { grid-template-columns: 1fr; gap: 0; }
  .pg-conceito .fluxo-nos > li {
    text-align: left;
    display: grid;
    grid-template-columns: 67px 1fr;   /* = largura do nó; ver .bee-ic-hex */
    gap: 0 var(--e3);
    padding-bottom: var(--e4);
  }
  .pg-conceito .fluxo-nos > li:last-child { padding-bottom: 0; }
  .pg-conceito .fluxo-nos > li:not(:last-child)::before {
    content: "";
    grid-column: 1; grid-row: 1 / -1;
    justify-self: center; align-self: stretch;
    width: 3px;
    /* 94px = os 36px de margem do nó mais os 58px de altura dele. O valor
       anterior (70px) começava DENTRO do nó, e funcionava só porque o
       hexágono tinha fundo opaco e escondia os pontos. Com o hexágono do
       kit, que é vazado, os pontos apareceriam através dele. */
    margin-top: 94px;
    background-image: radial-gradient(circle, var(--ambar-texto) 1.2px, transparent 1.3px);
    background-size: 3px 11px;
    background-repeat: repeat-y;
    opacity: .5;
  }
  .pg-conceito .fluxo-hex { grid-column: 1; grid-row: 1; margin: 0 auto; }
  .pg-conceito .fluxo-nos h3,
  .pg-conceito .fluxo-papel,
  .pg-conceito .fluxo-desc { grid-column: 2; }
  .pg-conceito .fluxo-nos h3 { grid-row: 1; align-self: center; }
  .pg-conceito .fluxo-desc { margin-inline: 0; max-width: none; }
  .pg-conceito .fluxo-legenda { grid-template-columns: 1fr; gap: var(--e2); }
  .pg-conceito .fluxo-legenda-linha { width: 56px; margin-top: 0; }
}


/* =====================================================================
   PILARES — largura inteira, quatro colunas
   ---------------------------------------------------------------------
   Também não é texto corrido, então também ocupa a largura do cabeçalho.
   Quatro lado a lado reforçam o que eles são: princípios PARALELOS.

   Sem numerador. A versão anterior usava os numeradores hexagonais de
   §12 (01 a 04) e estava errado: numerar implica sequência, e Rede,
   Acesso, Continuidade e Coletivo são simultâneos. Numerar o que não é
   sequência é decoração fingindo ser estrutura. Os numeradores seguem em
   uso na LP, onde o passo a passo é sequência de verdade.
   ===================================================================== */
/* =====================================================================
   MOSAICO DE "ONDE QUEREMOS CHEGAR"
   ---------------------------------------------------------------------
   Grade IRREGULAR de 12 colunas em três linhas, que fecham em 12 cada:
   7+5, 4+4+4, 3+4+5. A irregularidade é o componente — grade uniforme lê
   como tabela e some no meio da página; o que dá ritmo é a largura
   desigual e as duas texturas caindo em pontos diferentes de cada linha.

   POR QUE VIVE FORA DO .cc-texto: a regra do topo deste arquivo diz que
   texto corrido para em 68ch e que tudo que NÃO é texto corrido usa a
   largura inteira. Aninhado no .cc-texto, o bloco herdava o teto de 68ch.

   SEIS ITENS DE CONTEÚDO. O propósito e o espaço que a marca ocupa eram
   parágrafos soltos acima da grade, repetindo em prosa o que ela ia dizer
   em blocos. Viraram células. Os outros quatro são os pilares de §04.

   TODAS AS OITO POSIÇÕES SÃO EXPLÍCITAS. Com `auto-flow` os dois
   pseudo-elementos cairiam no fim da grade em vez da diagonal.
   ===================================================================== */
.pg-conceito .cc-mosaico {
  list-style: none;
  margin: var(--e5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(190px, auto);
  gap: 1px;
  background: var(--line);          /* o gap vira o fio */
  border: 1px solid var(--line);
  /* Arredonda só as QUATRO pontas externas. Os fios internos continuam
     retos: é uma grade, e grade de canto redondo em cada célula viraria
     um monte de cartõezinhos soltos em vez de um bloco. */
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.pg-conceito .cc-mos {
  display: flex;
  flex-direction: column;
  padding: var(--e3) var(--e3) var(--e4);
  background: var(--off-white);
}
/* Duas linhas de três, com as larguras ESPELHADAS: 5-4-3 em cima e 3-4-5
   embaixo. A irregularidade é o componente — grade de colunas iguais lê
   como tabela. O espelho evita que a irregularidade vire bagunça: há um
   padrão, ele só não é o óbvio. */
.pg-conceito .cc-mos:nth-child(1) { grid-area: 1 / 1  / 2 / 6;  }  /* propósito  · 5 */
.pg-conceito .cc-mos:nth-child(2) { grid-area: 1 / 6  / 2 / 10; }  /* rede       · 4 */
.pg-conceito .cc-mos:nth-child(3) { grid-area: 1 / 10 / 2 / 13; }  /* acesso     · 3 */
.pg-conceito .cc-mos:nth-child(4) { grid-area: 2 / 1  / 3 / 4;  }  /* o espaço   · 3 */
.pg-conceito .cc-mos:nth-child(5) { grid-area: 2 / 4  / 3 / 8;  }  /* continuid. · 4 */
.pg-conceito .cc-mos:nth-child(6) { grid-area: 2 / 8  / 3 / 13; }  /* coletivo   · 5 */

.pg-conceito .cc-mosaico h3 {
  font-family: var(--display);
  font-size: var(--t1);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 var(--e2);
  max-width: none;
}
.pg-conceito .cc-mosaico p {
  margin: 0;
  font-size: var(--t0);
  line-height: 1.6;
  color: var(--ink-soft);
}

/* A única célula PRETA do bloco, e ela carrega o propósito. Preto é a base
   da marca (§09); amarelo aqui seria superfície, que a mesma seção proíbe.

   É TAMBÉM A ÚNICA COM FOTO, e as duas coisas se sustentam: o preto que já
   estava aqui vira o véu da imagem. Isso importa porque a foto pode mudar e
   o contraste do texto não pode mudar junto — é o mesmo mecanismo dos cards
   de cobertura da LP. Com o véu em 72%, título em amarelo e corpo em branco
   ficam legíveis sobre qualquer imagem que entre depois.

   E se a foto NÃO entrar, a célula continua sendo o que é hoje: preta e
   legível. Nenhum estado quebrado, nenhuma caixa cinza no ar. */
.pg-conceito .cc-mos--destaque { background: var(--preto); }

.pg-conceito .cc-mos--foto { position: relative; overflow: hidden; }
.pg-conceito .cc-mos--foto > .cc-mos-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  /* Quase nada. A foto entra praticamente como foi feita. */
  filter: saturate(.95) brightness(.96);
}

/* ⚠️ O VÉU É LATERAL, NÃO GERAL. E ISSO É DIREÇÃO DE ARTE, NÃO CSS.
   ---------------------------------------------------------------------
   A primeira versão escurecia a IMAGEM INTEIRA em brightness(.32). Passava
   em contraste e estava errada pelo motivo que contraste não mede: para um
   rosto sobreviver a um véu desses, a foto tinha que ser de claro-escuro
   duro, e claro-escuro duro puxa a direção para casa escura e pessoa
   sofrida. O filtro acabava escrevendo o briefing da foto. Isto é uma LP,
   não uma reportagem: quem chega aqui não pode topar com uma imagem pesada.

   A correção: o escuro fica onde o TEXTO está, à esquerda, e some antes de
   chegar na pessoa, à direita. Assim a foto pode ser clara, quente e viva,
   e o contraste continua garantido — na verdade melhora.

   Medido no pior caso possível, uma foto branca inteira:
     · esquerda (.90) — corpo branco 15,6:1 · título amarelo 9,4:1
     · meio    (.86) — corpo branco 11,7:1 · título amarelo 7,0:1
   Contra os 4,5:1 de AA. O véu antigo entregava 7,9:1 e 4,7:1. */
.pg-conceito .cc-mos--foto::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg,
    rgba(0, 0, 0, .90)   0%,
    rgba(0, 0, 0, .86)  38%,
    rgba(0, 0, 0, .55)  68%,
    rgba(0, 0, 0, .15) 100%);
}
.pg-conceito .cc-mos--foto > h3,
.pg-conceito .cc-mos--foto > p { position: relative; z-index: 2; }

/* Etiqueta de canto, só em localhost e só enquanto a foto não chegou. Não
   cobre o texto de propósito: a célula é utilizável sem a imagem, então o
   marcador precisa lembrar sem atrapalhar. */
.pg-conceito .cc-mos-pendente { display: none; }
[data-ambiente="local"] .pg-conceito .cc-mos--foto.is-vazio .cc-mos-pendente {
  display: block;
  position: absolute; right: 0; bottom: 0; z-index: 3;
  padding: 5px 10px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 11px; letter-spacing: .02em;
  color: var(--preto); background: var(--amarelo);
}
.pg-conceito .cc-mos--destaque h3 { color: var(--amarelo); }
.pg-conceito .cc-mos--destaque p {
  color: #fff;
  font-family: var(--display);
  font-size: var(--t2);
  line-height: 1.25;
  letter-spacing: -.01em;
}

/* =====================================================================
   AS DUAS TEXTURAS — CONSTRUÍDAS, E ATRÁS DO TEXTO
   ---------------------------------------------------------------------
   Não há arquivo de imagem: a textura é gradiente. Zero requisição, zero
   peso, nítida em qualquer densidade de tela e ajustável numa linha.

   ELA FICA SOB UMA CÉLULA DE TEXTO, não em célula própria. Uma versão
   anterior dava uma célula inteira a cada textura, e o bloco ficava com
   dois buracos no meio de uma grade que existe para dizer seis coisas.

   O texto por cima passa em AA com folga, medido no ponto MAIS ESCURO de
   cada textura: 5,31:1 no tecido e 5,56:1 na onda, contra os 4,5 do AA.
   Se alguém escurecer as paradas, é isso que precisa ser refeito.

   ⚠️ NADA DE ELEMENTO DA MARCA AQUI. Favo, hexágono e abelha estão
   proibidos nestas células, e não é por variedade: o favo já é a marca
   d'água desta página, e repeti-lo dentro do bloco é a marca falando de
   si mesma justamente onde ela deveria dar respiro.

   ⚠️ E NADA DE LISTRA DURA. O que separa dobra de listra é a TRANSIÇÃO:
   as paradas aqui são largas e nenhuma banda tem a largura da vizinha.
   Apertar essas paradas transforma tecido em zebra.
   ===================================================================== */

/* TECIDO: dobras largas de larguras diferentes, atravessadas por uma luz
   rasante. A sombra é preta em opacidade baixa, para a textura ficar no
   mesmo neutro quente da página em vez de puxar para cinza. */
.pg-conceito .cc-mos--tecido {
  background-image:
    repeating-linear-gradient(101deg,
      rgba(0, 0, 0, .075) 0px,
      rgba(0, 0, 0, .010) 26px,
      rgba(0, 0, 0, .055) 61px,
      rgba(0, 0, 0, .014) 84px,
      rgba(0, 0, 0, .090) 127px,
      rgba(0, 0, 0, .012) 168px,
      rgba(0, 0, 0, .075) 214px),
    linear-gradient(118deg,
      #FFFFFF 0%,
      var(--off-white) 46%,
      color-mix(in srgb, var(--ambar-texto) 7%, var(--off-white)) 100%);
}

/* ONDA: elipses concêntricas partindo de fora da célula, com espaçamento
   crescente — é o que dá leitura de superfície de água em vez de alvo. */
.pg-conceito .cc-mos--onda {
  background-image:
    repeating-radial-gradient(ellipse 190% 78% at 18% 118%,
      rgba(0, 0, 0, .068) 0px,
      rgba(0, 0, 0, .008) 19px,
      rgba(0, 0, 0, .052) 46px,
      rgba(0, 0, 0, .010) 72px,
      rgba(0, 0, 0, .068) 104px),
    linear-gradient(160deg,
      color-mix(in srgb, var(--ambar-texto) 6%, var(--off-white)) 0%,
      var(--off-white) 55%,
      #FFFFFF 100%);
}

@media (max-width: 900px) {
  /* Em duas colunas o desenho de 12 não faz sentido: as posições explícitas
     saem e as células voltam a fluir, com o destaque ocupando a linha. */
  .pg-conceito .cc-mosaico { grid-template-columns: repeat(2, 1fr); }
  .pg-conceito .cc-mos:nth-child(n) { grid-area: auto; }
  .pg-conceito .cc-mos--destaque { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .pg-conceito .cc-mosaico { grid-template-columns: 1fr; }
}


/* =====================================================================
   FECHAMENTO
   ---------------------------------------------------------------------
   Mesmo eixo, mesmo degrau de h2 que todas as outras seções. Antes era
   centralizado e com escala própria, herdada do fechamento da LP, que é
   outra página e outro ritmo.
   ===================================================================== */
.pg-conceito .cc-final .cc-texto p { color: var(--ink-soft); font-size: var(--t1); }
.pg-conceito .cc-final .btn { margin-top: var(--e3); }
.pg-conceito .cc-final-nota {
  margin: var(--e3) 0 0 !important;
  font-size: var(--t-1) !important;
  color: var(--ink-soft) !important;
}