/* S03 — Muito além de um perfil. CSS grid fluido; composição medida da arte-mãe (faixa de 682 px):
   texto 60–283 | janela de perfil 283–522 | recursos 562–666. Cena ESCURA (alterna com a S02 clara).
   Acima de 900 px: 3 colunas. Abaixo: coluna única (texto, janela, recursos em 2×2). Sem JS a cena aparece completa. */
.d03{--acc:#e72b6c;--ink:#fff;position:relative;z-index:1;overflow:hidden;background:#050407;color:var(--ink);font-family:var(--font-body,"Helvetica Neue",Helvetica,Arial,sans-serif);container-type:inline-size}
.d03::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 90% at 62% 50%,rgba(231,43,108,.10),transparent 70%);pointer-events:none}
.d03-arc{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}   /* dentro de .d03-in: coordenadas do contêiner */
.d03-arc path{fill:none;stroke:var(--acc);stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 5px rgba(231,43,108,.75)) drop-shadow(0 0 14px rgba(231,43,108,.35))}
.d03-arc--b path{stroke-width:1.6;opacity:.85}
.d03-in{box-sizing:border-box;position:relative;z-index:1;max-width:1320px;margin:0 auto;display:grid;align-items:center;
  grid-template-columns:minmax(0,223fr) minmax(0,239fr) minmax(0,104fr);column-gap:clamp(20px,3.1cqw,44px);
  padding:clamp(40px,7.2cqw,92px) clamp(16px,3.87cqw,48px)}
.d03-copy,.d03-win,.d03-feat{position:relative;z-index:1}
.d03-copy h2{margin:0 0 clamp(10px,1.4cqw,18px);font-family:var(--font-title,inherit);font-size:clamp(24px,3.39cqw,42px);line-height:1.1;letter-spacing:-.01em}
.d03-copy h2 span{display:block}
.d03-h-l{font-weight:300}
.d03-h-b{font-weight:800}
.d03-copy p{margin:0;max-width:30ch;font-size:clamp(14px,1.45cqw,18px);line-height:1.5;color:rgba(255,255,255,.82)}

/* janela de perfil (decorativa, role="img") */
.d03-win{box-sizing:border-box;display:grid;grid-template-columns:32% minmax(0,1fr);gap:clamp(8px,1.1cqw,14px);aspect-ratio:239/135;padding:clamp(6px,.9cqw,11px);
  background:linear-gradient(160deg,#121015,#0a090c);border:1px solid rgba(255,255,255,.09);border-radius:clamp(12px,1.5cqw,18px);
  box-shadow:0 0 0 1px rgba(231,43,108,.18),0 18px 50px rgba(0,0,0,.6),0 0 46px rgba(231,43,108,.16);position:relative}
.d03-ph{position:relative;overflow:hidden;border-radius:clamp(8px,1cqw,12px);background:#16131a;min-height:0}
.d03-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
.d03-ph--empty{background:linear-gradient(165deg,#2a1c25,#120e14 60%,#1c1017)}
.d03-ui{display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:clamp(6px,.9cqw,12px);min-width:0;min-height:0}
.d03-head{display:flex;align-items:center;gap:clamp(6px,.8cqw,10px);min-width:0}
.d03-av{flex:none;width:clamp(22px,2.6cqw,34px);aspect-ratio:1;border-radius:50%;background:#2a2230 27% 32.3%/119% auto no-repeat;border:1px solid rgba(255,255,255,.18)}   /* recorte do retrato: rosto com queixo e pescoço */
.d03-id{display:grid;min-width:0;line-height:1.2}
.d03-id b{font-size:clamp(10px,1.1cqw,14px);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d03-id small{font-size:clamp(8.5px,.85cqw,11px);color:rgba(255,255,255,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d03-ctl{margin-left:auto;display:flex;gap:3px}
.d03-ctl i{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.4)}
.d03-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(4px,.6cqw,8px)}
.d03-stats span{display:grid;justify-items:center;align-content:center;aspect-ratio:5/4;gap:clamp(3px,.5cqw,7px);padding:2px;border-radius:clamp(6px,.8cqw,10px);background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07)}
.d03-stats i{width:clamp(14px,1.9cqw,26px);height:4px;border-radius:9px;background:linear-gradient(90deg,var(--acc),#ff7aa5)}
.d03-stats b{font-size:clamp(8px,.82cqw,11px);font-weight:600;color:rgba(255,255,255,.78);white-space:nowrap}
.d03-gal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(4px,.6cqw,8px);min-height:0}
.d03-tile{display:block;min-height:0;aspect-ratio:4/5;border-radius:clamp(5px,.7cqw,9px);background:#1a161d center/cover;border:1px solid rgba(255,255,255,.07)}

/* recursos */
.d03-feat{list-style:none;margin:0;padding:0;display:grid;gap:clamp(10px,1.6cqw,20px)}
.d03-feat li{display:flex;align-items:center;gap:clamp(8px,1cqw,14px);font-size:clamp(12.5px,1.15cqw,15px);color:rgba(255,255,255,.9);line-height:1.25}
.d03-ic{flex:none;display:grid;place-items:center;width:clamp(34px,3.2cqw,42px);aspect-ratio:1;border-radius:50%;border:1px solid rgba(231,43,108,.55);color:#ff8fb3;background:rgba(231,43,108,.07)}

/* abaixo de 900 px: coluna única */
@container (max-width:899.98px){
  .d03-in{grid-template-columns:minmax(0,1fr);row-gap:clamp(22px,5cqw,36px);padding-top:calc(clamp(36px,9cqw,64px) + 14px);padding-bottom:calc(clamp(36px,9cqw,64px) + 14px)}
  .d03-copy p{max-width:44ch}
  /* empilhado: os arcos viram faixas nas margens de cima e de baixo, sem cruzar texto */
  .d03-arc--a{inset:0 0 auto 0;height:clamp(36px,9cqw,64px)}
  .d03-arc--b{inset:auto 0 0 0;height:clamp(36px,9cqw,64px)}
  .d03-win{aspect-ratio:auto;grid-template-columns:36% minmax(0,1fr);min-height:clamp(210px,56cqw,330px)}
  .d03-feat{grid-template-columns:repeat(2,minmax(0,1fr))}
  .d03-stats span{aspect-ratio:auto;padding:clamp(5px,1.4cqw,9px) 2px}
  .d03-feat li{font-size:clamp(13px,3.4cqw,15px)}
}
@container (max-width:420px){
  .d03-stats b{font-size:7.5px}
  .d03-tile{border-radius:4px}
}
@media (prefers-reduced-motion:reduce){.d03 *{animation:none!important;transition:none!important}}