/* Wireframe e pilares conectados, sobre preto com pontilhado variável. */
.tela.brand-showcase {
  height:calc(100vh - var(--nav-h));
  height:calc(100svh - var(--nav-h));
  min-height:640px;
  padding:0;
  overflow:hidden;
  isolation:isolate;
  background:#000;
}
/* Mesma malha do diagnóstico: base discreta e focos de maior contraste. */
.brand-showcase.sec-dotted::before {
  background-image:radial-gradient(circle,rgba(196,196,191,.13) .8px,transparent 1.1px);
}
.brand-showcase.sec-dotted::after {
  content:"";
  background-image:radial-gradient(circle,rgba(196,196,191,.36) .8px,transparent 1.1px);
  -webkit-mask-image:radial-gradient(ellipse 48% 65% at 0% 85%,#000 5%,transparent 90%),radial-gradient(ellipse 52% 65% at 100% 10%,#000 5%,transparent 90%);
  mask-image:radial-gradient(ellipse 48% 65% at 0% 85%,#000 5%,transparent 90%),radial-gradient(ellipse 52% 65% at 100% 10%,#000 5%,transparent 90%);
}
.brand-showcase-layout {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:center;
  height:100%;
}
.brand-copy {
  min-width:0;
  padding-right:clamp(28px,4vw,64px);
  text-align:left;
}
.brand-copy .eyebrow { margin-bottom:24px; }
.brand-copy .text-h2 { max-width:23ch; }
.brand-copy .text-body { margin-top:24px; max-width:56ch; }
.brand-graphic {
  min-width:0;
  container:brand-graphic / inline-size;
}
.brand-symbol {
  position:relative;
  width:100%;
  height:clamp(520px,72svh,600px);
}
.brand-symbol-canvas {
  display:block;
  width:100%;
  height:100%;
  opacity:0;
  touch-action:pan-y;
}
.brand-symbol-fallback {
  position:absolute;
  inset:0 auto 0 0;
  width:52%;
  height:100%;
  margin:0;
}
.brand-symbol.is-ready .brand-symbol-canvas { opacity:1; }
.brand-symbol.is-ready .brand-symbol-fallback { display:none; }
.brand-connections {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
}
.brand-connection path {
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.connection-clearance { stroke:#000; stroke-width:4px; }
.connection-line { stroke:var(--ink-text-2); stroke-width:1px; opacity:.72; }
.brand-connection circle { fill:var(--ink-text); }
.brand-pillars {
  position:absolute;
  inset:8% 0 8% 50%;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:12px;
  margin:0;
  padding:0;
  list-style:none;
  color:var(--ink-text);
  font-family:var(--font-body);
  font-size:22px;
  font-weight:500;
  line-height:1.25;
  letter-spacing:-.025em;
}
.brand-pillars li { min-width:0; }
.brand-pillar { margin:0; }
.brand-pillar summary {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:0;
  color:var(--ink-text);
  list-style:none;
  cursor:pointer;
  transition:color 180ms ease;
}
.brand-pillar summary::-webkit-details-marker { display:none; }
.brand-pillar summary::marker { content:""; }
.brand-pillar summary:focus-visible {
  outline:2px solid var(--color-primary-on-ink);
  outline-offset:5px;
  border-radius:2px;
}
.brand-pillar[open] summary,.brand-pillar summary:focus-visible { color:var(--color-primary-on-ink); }
@media (hover:hover) {
  .brand-pillar summary:hover { color:var(--color-primary-on-ink); }
}
.brand-pillar-icon {
  position:relative;
  flex:0 0 22px;
  width:22px;
  height:22px;
  border:1px solid currentColor;
  border-radius:50%;
}
.brand-pillar-icon::before,.brand-pillar-icon::after {
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  background:currentColor;
}
.brand-pillar-icon::before { width:10px; height:1.5px; }
.brand-pillar-icon::after { width:1.5px; height:10px; transition:transform 180ms ease; }
.brand-pillar[open] .brand-pillar-icon::after { transform:scaleY(0); }
.brand-pillar p {
  margin:6px 0 0 32px;
  max-width:44ch;
  font-size:13px;
  font-weight:400;
  line-height:1.5;
  letter-spacing:0;
  color:var(--ink-text-2);
}
@media (max-width:959px) {
  .tela.brand-showcase { height:auto; min-height:0; padding-block:64px 32px; scroll-margin-top:var(--nav-h); }
  .brand-showcase-layout { grid-template-columns:minmax(0,1fr); gap:32px; height:auto; }
  .brand-copy { padding-right:0; }
  .brand-copy .text-h2 { max-width:24ch; }
  .brand-symbol { height:520px; }
}
@container brand-graphic (max-width:520px) {
  .brand-symbol { height:auto; padding:290px 0 24px; }
  .brand-symbol-canvas { position:absolute; inset:0; }
  .brand-symbol-fallback { inset:12px 0 auto; width:90%; height:260px; margin-inline:auto; }
  .brand-pillars {
    position:relative;
    inset:auto;
    margin:0 0 0 42px;
    font-size:20px;
    letter-spacing:-.025em;
  }
  .brand-connection circle { r:1.5px; }
}
@container brand-graphic (max-width:360px) {
  .brand-pillar p { margin-left:0; }
}