/* ===== Refino: menos bloco, mais leveza =====
   Camada por cima de base.css e components.css (protótipo em neural-refinado.html). A estrutura e o conteúdo não mudam.
   Ideia: o que era caixa preenchida com moldura cheia vira contorno quase invisível, e a cor da marca entra só como um traço no canto. */
:root{ --hair:rgba(245,243,242,.075); --hair-hover:rgba(245,243,242,.13); }

/* cartão de vidro vira página aberta: sem caixa, só uma linha fina no alto com um traço de cor que nasce no começo e se dissolve nela, sem corte seco */
.glass{
  --ac:rgba(245,243,242,.55);
  border:0; border-radius:var(--radius-md);
  background:
    linear-gradient(90deg,var(--ac) 0%,color-mix(in srgb,var(--ac) 45%,transparent) 45%,transparent 100%) top left / 170px 1.5px no-repeat,
    linear-gradient(90deg, rgba(245,243,242,.17), rgba(245,243,242,.04) 62%, transparent) top left / 100% 1px no-repeat,
    transparent;
  box-shadow:none;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  transition:background-size .6s cubic-bezier(.2,.8,.2,1), background-color .4s ease;
}
.glass.plum{ --ac:var(--plum); }
.glass.sage{ --ac:var(--sage); }
.glass.pink{ --ac:var(--pink); }
.glass:hover{
  background:
    linear-gradient(90deg,var(--ac) 0%,color-mix(in srgb,var(--ac) 45%,transparent) 45%,transparent 100%) top left / 300px 1.5px no-repeat,
    linear-gradient(90deg, rgba(245,243,242,.17), rgba(245,243,242,.04) 62%, transparent) top left / 100% 1px no-repeat,
    rgba(245,243,242,.018);
}
.glass-glow::before{ opacity:.08; }

/* mais ar entre as seções, e a linha divisória deixa de ir de ponta a ponta: nasce forte e some */
.section{ border-top:0; padding-top:clamp(84px,13vh,150px); padding-bottom:clamp(84px,13vh,150px); }
.section::before{
  content:""; position:absolute; top:0; left:clamp(20px,5vw,72px); right:clamp(20px,5vw,72px); height:1px;
  background:linear-gradient(90deg, rgba(245,243,242,.2), rgba(245,243,242,.05) 50%, transparent);
}

/* caixa suave e parcial, só nos blocos de destaque (painéis de detalhe e a chamada principal):
   fundo translúcido que some na diagonal e um contorno que só aparece no canto de cima, à esquerda */
.j-panel.glass, .dm-panel.glass, .callout.glass{
  background:
    linear-gradient(90deg,var(--ac) 0%,color-mix(in srgb,var(--ac) 45%,transparent) 45%,transparent 100%) top left / 170px 1.5px no-repeat,
    linear-gradient(90deg, rgba(245,243,242,.17), rgba(245,243,242,.04) 62%, transparent) top left / 100% 1px no-repeat,
    linear-gradient(155deg, rgba(245,243,242,.065) 0%, rgba(245,243,242,.022) 46%, transparent 84%);
}
.j-panel.glass:hover, .dm-panel.glass:hover, .callout.glass:hover{
  background:
    linear-gradient(90deg,var(--ac) 0%,color-mix(in srgb,var(--ac) 45%,transparent) 45%,transparent 100%) top left / 300px 1.5px no-repeat,
    linear-gradient(90deg, rgba(245,243,242,.17), rgba(245,243,242,.04) 62%, transparent) top left / 100% 1px no-repeat,
    linear-gradient(155deg, rgba(245,243,242,.08) 0%, rgba(245,243,242,.03) 46%, transparent 84%);
}
.j-panel.glass::after, .dm-panel.glass::after, .callout.glass::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
  border:1px solid rgba(245,243,242,.17);
  -webkit-mask:linear-gradient(150deg,#000 0%,rgba(0,0,0,.32) 36%,transparent 60%);
          mask:linear-gradient(150deg,#000 0%,rgba(0,0,0,.32) 36%,transparent 60%);
}

/* etiquetas: contorno em vez de preenchimento */
.chip{ background:transparent; border:1px solid rgba(245,243,242,.12); color:var(--ink-dim); }
.chip.plum{ background:transparent; border-color:rgba(160,110,140,.5); color:var(--ink); }
.chip.sage{ background:transparent; border-color:rgba(159,192,185,.45); color:var(--ink); }
.chip.pink{ background:transparent; border-color:rgba(238,171,172,.45); color:var(--ink); }

/* ícones em selo: círculo só de contorno */
.badge-ico{ background:transparent; border-radius:50%; border-color:rgba(245,243,242,.10); }
.badge-ico.plum{ background:transparent; border-color:rgba(160,110,140,.38); }
.badge-ico.sage{ background:transparent; border-color:rgba(159,192,185,.34); }
.badge-ico.pink{ background:transparent; border-color:rgba(238,171,172,.34); }

/* perguntas: sem caixa tracejada, só a linha de cima */
.question{ border:0; border-top:1px solid var(--line-strong); border-radius:0; padding-left:0; padding-right:0; }

/* rótulo de seção com traço de abertura */
.section-label::before{ content:""; display:inline-block; width:26px; height:1px; background:currentColor; opacity:.55; margin-right:12px; vertical-align:middle; transform:translateY(-1px); }

@media (prefers-reduced-motion:reduce){ .glass{ transition:none; } }