/* S07 — Confiança em cada conexão. MOBILE-FIRST (ADR-023): a base é o celular; o desktop só acrescenta, a partir de 900 px de contêiner.
   Arte-mãe (faixa de 682 px): texto 59–281 (8,7–41,2%) | retrato 308–527 (45,2–77,3%) | frase 548–654 (80,4–95,9%). Cena ESCURA.
   Celular: texto, atributos, retrato, frase e botão (texto antes do retrato, como pede o manifesto A060). "Luz CSS sutil": brilho ESTÁTICO
   (gradiente), sem animação contínua. Sem JS a cena aparece completa. */
.d07{--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}
.d07::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 60% 45%,rgba(231,43,108,.10),transparent 70%);pointer-events:none}
.d07-in{box-sizing:border-box;position:relative;z-index:1;max-width:1320px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);row-gap:clamp(22px,5cqw,40px);padding:clamp(36px,8cqw,84px) clamp(16px,3.87cqw,48px)}
.d07 .d07-copy h2{color:var(--ink)}   /* especificidade (0,2,1): vence [data-bx-mode] h2 do tema (0,1,1), que vem depois na folha; só a COR (lição 49) */
.d07-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}
.d07-h-l{display:block;font-weight:300}
.d07-h-b{display:block;font-weight:800}
.d07-copy p{margin:0 0 clamp(14px,2.2cqw,24px);max-width:38ch;font-size:clamp(14px,1.45cqw,18px);line-height:1.5;color:rgba(255,255,255,.82)}
.d07-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(10px,1.6cqw,16px)}
.d07-list li{display:flex;align-items:center;gap:12px;font-size:clamp(13px,1.3cqw,16px);line-height:1.3;color:rgba(255,255,255,.9)}
.d07-ico{--d:clamp(30px,3.4cqw,40px);flex:none;box-sizing:border-box;width:var(--d);height:var(--d);padding:calc(var(--d)*.24);border-radius:50%;border:1.5px solid var(--acc);background:rgba(231,43,108,.12);fill:none;stroke:#ff7fae;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* retrato: janela grande, sangrando nas bordas da cena no desktop; no celular um bloco de largura total */
.d07-ph{position:relative;margin:0;min-width:0;aspect-ratio:4/5;overflow:hidden;border-radius:clamp(10px,1.6cqw,18px);background:linear-gradient(160deg,#241c2b,#0e0b12);box-shadow:0 0 0 1px rgba(255,255,255,.06),0 18px 44px rgba(0,0,0,.5),0 0 38px rgba(231,43,108,.14)}
.d07-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
.d07-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,4,7,.42),transparent 38%,transparent 70%,rgba(5,4,7,.55));pointer-events:none}

.d07-pledge{display:grid;gap:clamp(14px,2cqw,24px);align-content:center;justify-items:start}
.d07-quote{margin:0;font-size:clamp(22px,2.6cqw,36px);line-height:1.15;font-weight:300;letter-spacing:-.005em;color:rgba(255,255,255,.88)}
.d07-quote span{white-space:nowrap}
.d07-quote b{font-weight:800;color:var(--acc);display:inline-block}
.d07-cta{display:inline-grid;place-items:center;width:clamp(42px,3.8cqw,54px);aspect-ratio:1;border-radius:50%;border:1.5px solid var(--acc);color:var(--acc);text-decoration:none;transition:background .2s,color .2s}
.d07-cta svg{width:46%;height:46%;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.d07-cta:hover,.d07-cta:focus-visible{background:var(--acc);color:#fff}
.d07-cta:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* >=600 px: atributos em grade 2x2 e o retrato deixa de ocupar a largura toda */
@container (min-width:600px){
  .d07-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(14px,3cqw,28px)}
  .d07-ph{width:100%;max-width:min(100%,420px);justify-self:center}   /* width:100% é obrigatório: a <img> é absoluta e, sem largura, o item centralizado encolhe para 0 */
}
/* >=900 px: 3 colunas como a arte-mãe (texto 8,7–41,2% | retrato 45,2–77,3% | frase 80,4–95,9%). O retrato SANGRA de cima a baixo da cena:
   o contêiner perde o padding vertical e as colunas de texto o assumem. */
@container (min-width:900px){
  .d07-in{max-width:none;grid-template-columns:minmax(0,222fr) minmax(0,27fr) minmax(0,219fr) minmax(0,21fr) minmax(0,106fr);column-gap:0;align-items:stretch;padding-block:0;padding-inline:8.65cqw 4.1cqw}
  .d07-copy{grid-column:1}
  .d07-ph{grid-column:3}
  .d07-pledge{grid-column:5}
  .d07-copy,.d07-pledge{padding-block:clamp(36px,6.5cqw,84px)}
  .d07-copy{align-self:center}
  .d07-copy h2{font-size:clamp(20px,2.15cqw,31px)}
  .d07-ph{max-width:none;justify-self:stretch;aspect-ratio:auto;min-height:clamp(260px,26cqw,380px);border-radius:0;box-shadow:0 0 38px rgba(231,43,108,.12)}
  .d07-ph img{object-position:50% 30%}
  .d07-quote{font-size:clamp(18px,2.15cqw,30px)}
  .d07-quote span{display:block}
  .d07-quote b{display:block}
}