/* S02 — Dois caminhos. CSS grid fluido; composição medida do piloto SR6 (26/10/2026). Fonte: tools/sr6-lab-compiler/s02/. */
/* Cartões de UI da S02 (fonte única das duas variantes). Unidades em px: o tamanho
   exibido é o do desenho; o PNG da variante SR6 é renderizado a 3x deste mesmo HTML. */
.uic{box-sizing:border-box;font-family:Arial,Helvetica,sans-serif;background:#f7f7f7;border:1px solid #dedede;border-radius:16px;box-shadow:0 10px 26px rgba(20,20,20,.2);overflow:hidden;position:relative;display:block}
.uic *{box-sizing:border-box}
.uic-photo{display:block;position:absolute;inset:0 0 auto 0;height:52%;background-size:cover;background-position:center 18%}
.uic-top{position:absolute;top:8px;left:10px;right:10px;display:flex;align-items:center;gap:5px;color:#fff;font-size:10px;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.uic-dot{width:6px;height:6px;border-radius:50%;background:#e72b6c;flex:none}
.uic-float{position:absolute;left:10px;right:10px;top:46%;height:27%;background:#fff;border-radius:11px;box-shadow:0 3px 10px rgba(0,0,0,.14);display:flex;align-items:center;gap:8px;padding:6px 8px}
.uic-av{width:34px;height:34px;border-radius:10px;background-size:cover;background-position:center;flex:none}
.uic-lines{flex:1;display:grid;gap:7px}
.uic-lines i{display:block;height:4px;border-radius:9px;background:#d1d1d1}
.uic-lines i:last-child{width:62%;background:#ecb0c7}
.uic-foot{position:absolute;left:10px;right:10px;bottom:9px;height:20px;display:flex;align-items:center;justify-content:space-between}
.uic-pill{width:62px;height:16px;border-radius:10px;background:#e72b6c}
.uic-stats{display:flex;gap:5px}.uic-stats i{width:8px;height:8px;border-radius:50%;background:#d1d1d1}
/* variantes */
.uic--p{width:172px;height:224px}
.uic--s{width:150px;height:84px;background:#e9e6e2;border-color:#d9d4cf;padding:10px;display:flex;flex-direction:column;justify-content:space-between}
.uic--s .uic-lines{flex:none;width:100%}
.uic--s .uic-pill{width:56px;height:14px}
.uic--w{width:178px;height:216px}
.uic-ava{display:flex}
.uic-ava span{width:46px;height:46px;border-radius:50%;background-size:cover;background-position:center;border:3px solid #fff;box-shadow:0 3px 10px rgba(0,0,0,.18);margin-right:-10px}

/* S02 sem SR6, com a COMPOSIÇÃO do módulo SR6 aprovada pelo Owner (26/10/2026):
   grade de 1240 px centralizada, 4 colunas iguais [copy A | retrato A | copy B | retrato B],
   mesmos tamanhos/espaçamentos (d: 26/42 título, 27 h3, 16/24 texto, CTA 54, copy a 88 px do topo,
   retrato 100% da coluna colado na base, cartões à direita/base). Abaixo de 1240 as fontes
   acompanham a largura (cqw), como o canvas do SR6, mas com piso legível (12,5 px).
   Diferença de propósito: quebra em coluna única abaixo de 640 px (o SR6 quebra em 479 e fica com retratos de 134 px aos 600). */
.d02{--ink:#111;--acc:#e72b6c;background:#f0ece8;color:var(--ink);font-family:var(--font-body,"Helvetica Neue",Helvetica,Arial,sans-serif);container-type:inline-size;position:relative;z-index:1}
.d02-in{box-sizing:border-box;max-width:1240px;margin:0 auto;padding:clamp(20px,2.9cqw,36px) clamp(16px,3.87cqw,48px) clamp(18px,2.6cqw,34px)}
.d02-head{margin:0 0 clamp(12px,1.55cqw,20px)}
.d02-k{margin:0 0 2px;font-size:clamp(17px,2.1cqw,26px);line-height:1.15;font-weight:400}
.d02-head h2{margin:0;font-family:var(--font-title,inherit);font-size:clamp(24px,3.39cqw,42px);line-height:1.1;font-weight:800;letter-spacing:-.01em}
.d02-paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.d02-path{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:end}
.d02-copy{align-self:start;padding:clamp(24px,7.1cqw,88px) clamp(8px,1.45cqw,18px) 24px 0}
.d02-path + .d02-path .d02-copy{padding-left:clamp(8px,1.45cqw,18px)}
.d02-copy h3{margin:0;font-family:var(--font-title,inherit);font-size:clamp(18px,2.18cqw,27px);line-height:1.26;font-weight:700;letter-spacing:-.01em}
.d02-copy p{margin:12px 0 0;font-size:clamp(12.5px,1.29cqw,16px);line-height:1.5;color:#3b3b3b}
.d02-cta{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;margin-top:clamp(14px,1.8cqw,22px);
  border:1.5px solid var(--acc);border-radius:50%;color:var(--acc);text-decoration:none;transition:background .2s,color .2s}
.d02-cta:hover,.d02-cta:focus-visible{background:var(--acc);color:#fff}
.d02-cta:focus-visible{outline:3px solid #111;outline-offset:3px}
.d02-media{position:relative;container-type:inline-size;align-self:end}
.d02-media>img{display:block;width:100%;height:auto;aspect-ratio:928/1152;border-radius:clamp(14px,6.5cqw,28px);box-shadow:0 24px 48px -20px rgba(12,6,16,.5)}
.d02-ui{position:absolute;z-index:3;--z:.7}
.d02-ui .uic{zoom:var(--z)}
.d02-ui .uic-ava{zoom:calc(var(--z)*1.5)}
.d02-ui--a1{right:1.4%;top:40%}.d02-ui--a2{left:3%;bottom:6%}
.d02-ui--b1{right:2%;top:5.6%}.d02-ui--b2{right:1.4%;bottom:10%}
@container (min-width:380px){.d02-ui{--z:.9}}
@container (min-width:330px) and (max-width:379.98px){.d02-ui{--z:.8}}
@container (min-width:280px) and (max-width:329.98px){.d02-ui{--z:.7}}
@container (min-width:230px) and (max-width:279.98px){.d02-ui{--z:.58}}
@container (max-width:229.98px){.d02-ui{--z:.47}}
@media (max-width:639.98px){
  .d02-in{padding-left:24px;padding-right:24px}
  .d02-paths{grid-template-columns:minmax(0,1fr)}
  .d02-path{grid-template-columns:minmax(0,1fr)}
  .d02-copy,.d02-path + .d02-path .d02-copy{padding:20px 0 16px}
  .d02-copy h3{font-size:30px;line-height:1.13}
  .d02-copy p{font-size:17px;line-height:1.47}
  .d02-k{font-size:22px}.d02-head h2{font-size:28px}
}
@media (prefers-reduced-motion:reduce){.d02 *{transition:none!important}}
/* Fios e grade decorativos (L041, L049, L050, L051): só enfeite, sem pointer-events e fora do fluxo. */
.d02{position:relative}
.d02-grid{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;color:#1b1b1b;opacity:.045;-webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 45%,#000 20%,transparent 78%);mask-image:radial-gradient(ellipse 70% 80% at 50% 45%,#000 20%,transparent 78%)}
.d02-in{position:relative;z-index:1}
.d02-path{position:relative}
.d02-thread{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
.d02-thread path{fill:none;stroke:#e72b6c;stroke-width:1.4;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.85;filter:drop-shadow(0 0 3px rgba(231,43,108,.4))}
.d02-thread circle{fill:#e72b6c;filter:drop-shadow(0 0 4px rgba(231,43,108,.6))}
.d02-divider{position:absolute;left:22%;right:22%;width:56%;bottom:clamp(4px,1cqw,12px);height:3px;overflow:visible;pointer-events:none}
@media (max-width:639.98px){.d02-thread{display:none}.d02-divider{left:15%;right:15%;width:70%}}
@media (prefers-reduced-motion:reduce){.d02-thread path{stroke-dasharray:none}}