/* ==========================================================================
   Sobre · Figma 1:616 (1180 × 692) e Para quem é? · 1:702 (painel 1180 × 212)
   Respiros do Figma: countdown → Sobre 84 · cards → painel 55 ·
   o painel "pisa" 76px no Submeter (que compensa no padding-top).
   Mobile (aprovado): cards empilhados e baixos; perfis empilhados, sobreposição 40.
   ========================================================================== */

/* ---------- Sobre ---------- */
.cn-sobre { padding-top: var(--sobre-pad-top); }

.cn-sobre__head { display: flex; flex-direction: column; align-items: center; gap: var(--space-16); text-align: center; }
.cn-sobre__lead { max-width: var(--sobre-desc-w); color: var(--text-body); }

/* Rótulo "O que você vai encontrar" (1:621): linha · texto + seta · linha */
.cn-sobre__label { display: flex; align-items: center; gap: var(--space-24); margin-top: var(--space-48); }
.cn-sobre__line { flex: 1; height: 1px; background: var(--lilac-400); }
.cn-sobre__label-mid { display: flex; align-items: center; gap: var(--space-14); }
.cn-sobre__label-text { color: var(--text-strong); white-space: nowrap; }
.cn-sobre__arrow {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--purple-700); color: var(--white);
}
/* Marca-texto atrás de "encontrar": 13px de altura colado na base da linha (1:627) */
.cn-sobre__mark { position: relative; isolation: isolate; display: inline-block; }
.cn-sobre__mark::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 13px;
  background: var(--lilac-300);
  transform-origin: left center;
}

/* Cards (1:633): 4 × 280 × 360, gap 20 */
.cn-sobre__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-20); margin-top: var(--space-48); }
.cn-sobre__card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  height: 360px; padding: var(--space-28);
  border-radius: var(--radius-card);
  background: var(--surface-dark-card); color: var(--white);
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
/* Forma decorativa no canto superior direito (frame "brilho" 1:635, 196 × 198).
   SVG inline via <use> (sprite no topo do body): como máscara CSS ela sumia ao abrir por file:// */
.cn-sobre__forma {
  position: absolute; z-index: -1; top: 0; right: 0; width: 196px; height: 198px;
  color: var(--purple-750);
  transition: transform var(--dur-slow) var(--ease-out);
}
.cn-sobre__marca { display: block; width: 28px; height: 28px; color: var(--white); }
.cn-sobre__card-body { display: flex; flex-direction: column; gap: var(--space-14); }
.cn-sobre__card-text { display: flex; flex-direction: column; gap: var(--space-10); min-height: 136px; } /* 1:647 tem altura fixa */
.cn-sobre__card-text .t-body-s { color: var(--gray-200); }
.cn-sobre__card .cn-tile--glow { transition: box-shadow var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }

/* Hover (PROPOSTA): sobe, a forma desliza e o tile brilha mais */
@media (hover: hover) {
  .cn-sobre__card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px color-mix(in srgb, var(--purple-900) 35%, transparent); }
  .cn-sobre__card:hover .cn-sobre__forma { transform: translate(10px, -10px) scale(1.06); }
  .cn-sobre__card:hover .cn-tile--glow { transform: scale(1.06); box-shadow: inset 0 4px 35px var(--lilac-500), 0 6px 44px color-mix(in srgb, var(--lilac-500) 80%, transparent); }
}

/* Entrada do rótulo (js/modules/sobre.js marca .is-in): linhas crescem do centro
   para fora e o marca-texto se desenha. Sem JS fica tudo no estado final. */
@media (prefers-reduced-motion: no-preference) {
  .js .cn-sobre__label .cn-sobre__line { transition: transform 1.1s var(--ease-out); }
  .js .cn-sobre__label .cn-sobre__line:first-child { transform-origin: right center; }
  .js .cn-sobre__label .cn-sobre__line:last-child  { transform-origin: left center; }
  .js .cn-sobre__mark::before { transition: transform .9s var(--ease-out) .35s; }
  .js .cn-sobre__label:not(.is-in) .cn-sobre__line,
  .js .cn-sobre__label:not(.is-in) .cn-sobre__mark::before { transform: scaleX(0); }
  /* seta "respirando" */
  .cn-sobre__arrow svg { animation: cn-breathe 2.4s ease-in-out infinite; }
}
@keyframes cn-breathe { 50% { transform: translateY(3px); } }

/* ---------- Para quem é? ---------- */
.cn-publico {
  position: relative; z-index: 2;
  margin-top: var(--publico-gap);
  margin-bottom: calc(-1 * var(--publico-overlap));
}
.cn-publico__panel {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: 30px; /* 1:702 */
  padding: 49px 36px;
  border-radius: var(--radius-lg);
  /* brilhos por cima do gradiente que desliza (só o 3º fundo se move) */
  /* roxo à esquerda → lilás bem claro na ponta direita (cards claros, texto escuro); sombra roxa no canto do título */
  background: radial-gradient(55% 60% at 0% 0%, color-mix(in srgb, var(--purple-900) 25%, transparent), transparent 70%), var(--grad-publico);
  box-shadow: var(--shadow-panel), inset 0 1px 0 color-mix(in srgb, var(--white) 22%, transparent);
}
/* borda em degradê */
.cn-publico__panel::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--white) 40%, transparent), color-mix(in srgb, var(--white) 6%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* meia borboleta saindo pelo canto direito (ocupa o vazio ao lado do título) */
.cn-publico__borboleta {
  position: absolute; z-index: -1; top: -78px; right: -96px; width: 250px; height: 218px; pointer-events: none;
  color: color-mix(in srgb, var(--purple-700) 10%, transparent); rotate: -14deg;
}
.cn-publico__title { color: var(--white); text-align: center; }
.cn-publico__title em { color: var(--lilac-150); }
.cn-publico__perfis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-20); }
/* perfil: mini card de vidro */
.cn-publico__perfil {
  position: relative; isolation: isolate;
  display: flex; align-items: center; gap: var(--space-16);
  padding: var(--space-16) var(--space-20) var(--space-16) var(--space-14);
  border-radius: var(--radius-tile); background: var(--publico-card-glass);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 10px 24px -16px color-mix(in srgb, var(--purple-900) 45%, transparent);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.cn-publico__perfil::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--publico-card-border);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  transition: opacity .3s;
}
.cn-publico__perfil p { display: flex; flex-direction: column; gap: var(--space-2); color: var(--purple-900); }
.cn-publico__perfil p span { color: var(--text-body); }

/* mini ilustrações (64px) */
.cn-publico__ilu {
  flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--radius-sm);
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--lilac-300) 55%, transparent), transparent 72%);
}
.cn-pub-ilu { width: 56px; height: 56px; overflow: visible; }
.cn-pub-ilu * { transform-box: fill-box; }
.cn-pub-ilu__papel { fill: var(--white); stroke: var(--purple-500); stroke-width: 1.5; stroke-linejoin: round; }
.cn-pub-ilu__claro { fill: var(--lilac-400); }
.cn-pub-ilu__furo { fill: var(--lilac-400); }
.cn-pub-ilu__cordao { stroke: var(--purple-500); stroke-width: 2.4; stroke-linecap: round; }
.cn-pub-ilu__cracha { transform-origin: 50% 0%; }
.cn-pub-ilu__coracao { fill: var(--purple-700); transform-origin: center; }
.cn-pub-ilu__livro { stroke: var(--purple-500); stroke-width: 1.5; }
.cn-pub-ilu__livro--a { fill: var(--lilac-300); }
.cn-pub-ilu__livro--b { fill: var(--white); }
.cn-pub-ilu__pagina { stroke: var(--lilac-400); stroke-width: 1.4; stroke-linecap: round; opacity: .7; }
.cn-pub-ilu__capelo { transform-origin: center bottom; }
.cn-pub-ilu__borla path { stroke: var(--purple-700); stroke-width: 1.6; stroke-linecap: round; }
.cn-pub-ilu__borla circle { fill: var(--purple-700); }
.cn-pub-ilu__borla { transform-origin: 50% 0%; }
.cn-pub-ilu__linha { stroke: var(--lilac-400); stroke-width: 2; stroke-linecap: round; }
.cn-pub-ilu__barra { fill: var(--lilac-400); transform-origin: center bottom; }
.cn-pub-ilu__barra:nth-of-type(3) { fill: var(--purple-700); }
.cn-pub-ilu__lente { fill: color-mix(in srgb, var(--lilac-200) 70%, transparent); stroke: var(--purple-700); stroke-width: 2.4; }
.cn-pub-ilu__cabo { stroke: var(--purple-700); stroke-width: 3.2; stroke-linecap: round; }

@media (hover: hover) and (pointer: fine) {
  .cn-publico__perfil:hover { transform: translateY(-4px); box-shadow: 0 18px 32px -18px color-mix(in srgb, var(--purple-900) 55%, transparent); }
  .cn-publico__perfil:hover::before { background: linear-gradient(180deg, var(--purple-500), color-mix(in srgb, var(--purple-500) 30%, transparent)); }
}

/* Ilustrações em loop calmo (pausam fora da tela; hover acelera) */
@media (prefers-reduced-motion: no-preference) {
  .cn-pub-ilu__cracha { animation: cn-pub-balanca 3.6s ease-in-out infinite alternate; }
  .cn-pub-ilu__coracao { animation: cn-pub-pulso 1.6s ease-in-out infinite; }
  .cn-pub-ilu__capelo { animation: cn-pub-flutua 3.2s ease-in-out infinite alternate; }
  .cn-pub-ilu__borla { animation: cn-pub-borla 2.4s ease-in-out infinite alternate; }
  .cn-pub-ilu__pagina { animation: cn-pub-pagina 3.2s ease-in-out infinite; }
  .cn-pub-ilu__barra { animation: cn-pub-barra 3.6s var(--ease-out) infinite; }
  .cn-pub-ilu__barra:nth-of-type(2) { animation-delay: .2s; }
  .cn-pub-ilu__barra:nth-of-type(3) { animation-delay: .4s; }
  .cn-pub-ilu__lupa { animation: cn-pub-lupa 3.6s ease-in-out infinite; }
  .cn-publico.is-offscreen .cn-pub-ilu * { animation-play-state: paused; }
  @media (hover: hover) and (pointer: fine) {
    .cn-publico__perfil:hover .cn-pub-ilu * { animation-duration: 1.4s; }
  }
}
@keyframes cn-pub-balanca { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes cn-pub-pulso { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.25); } 60% { transform: scale(.95); } }
@keyframes cn-pub-flutua { from { transform: translateY(1px) rotate(-2deg); } to { transform: translateY(-3px) rotate(2deg); } }
@keyframes cn-pub-borla { from { transform: rotate(-14deg); } to { transform: rotate(16deg); } }
@keyframes cn-pub-pagina { 0%, 60%, 100% { transform: scaleX(1); opacity: .7; } 75% { transform: scaleX(.3); opacity: .2; } }
@keyframes cn-pub-barra { 0%, 10% { transform: scaleY(.25); } 45%, 85% { transform: scaleY(1); } 100% { transform: scaleY(.25); } }
@keyframes cn-pub-lupa { 0%, 100% { transform: translate(-14px, 4px); } 50% { transform: translate(2px, -2px); } }

/* ---------- ≤1023 ---------- */
@media (max-width: 1023px) {
  .cn-sobre__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cn-publico__perfis { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
  .cn-publico__borboleta { top: -50px; right: -96px; width: 200px; height: 175px; }
  .cn-publico__panel { background: radial-gradient(55% 60% at 0% 0%, color-mix(in srgb, var(--purple-900) 25%, transparent), transparent 70%), var(--grad-publico-m); }
  .cn-publico__perfil { gap: var(--space-14); padding: var(--space-12) var(--space-16) var(--space-12) var(--space-10); }
  .cn-publico__ilu { width: 56px; height: 56px; }
  .cn-pub-ilu { width: 50px; height: 50px; }
}

/* ---------- ≤767 ---------- */
@media (max-width: 767px) {
  .cn-sobre__label { justify-content: center; margin-top: var(--space-40); }
  .cn-sobre__line { display: none; }
  .cn-sobre__cards { grid-template-columns: minmax(0, 1fr); gap: var(--space-16); margin-top: var(--space-32); }
  /* card baixo: marca em cima, tile ao lado do texto */
  .cn-sobre__card { height: auto; padding: var(--space-24); gap: var(--space-20); }
  .cn-sobre__forma { width: 140px; height: 141px; }
  .cn-sobre__card-body { flex-direction: row; align-items: flex-start; gap: var(--space-16); }
  .cn-sobre__card-text { min-height: 0; gap: var(--space-6); }

  .cn-publico { margin-top: var(--space-48); margin-bottom: calc(-1 * var(--publico-overlap-m)); }
  .cn-publico__panel { padding: var(--space-28) var(--space-20); gap: var(--space-24); }
}