/* S04 — Sua presença do seu jeito. CSS grid fluido; composição medida da arte-mãe (faixa de 682 px):
   texto 59–235 | celular 289–372 | colunas 379–447 e 454–524 | foto larga 534–632 | letreiro 532–654.
   Cena CLARA (alterna com a S03 escura). Acima de 900 px: texto e mosaico lado a lado. Abaixo: coluna única e mosaico em 2 colunas.
   Sem JS a cena aparece completa. */
.d04{--acc:#e72b6c;--ink:#111;position:relative;z-index:1;overflow:hidden;background:#f3efea;color:var(--ink);font-family:var(--font-body,"Helvetica Neue",Helvetica,Arial,sans-serif);container-type:inline-size}
.d04-in{position:relative;box-sizing:border-box;max-width:1320px;margin:0 auto;display:grid;align-items:center;
  grid-template-columns:minmax(0,176fr) minmax(0,343fr);column-gap:clamp(20px,6.4cqw,84px);
  padding:clamp(36px,6.2cqw,84px) clamp(16px,3.87cqw,48px)}
.d04-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;font-weight:300}
.d04-copy h2 b{font-weight:800}
.d04-h-l,.d04-h-b{display:block}
.d04-copy p{margin:0 0 clamp(14px,2cqw,26px);max-width:30ch;font-size:clamp(14px,1.45cqw,18px);line-height:1.5;color:#2c2a28}
.d04-cta{display:inline-grid;place-items:center;width:clamp(40px,3.8cqw,52px);aspect-ratio:1;border-radius:50%;border:1.5px solid var(--acc);color:var(--acc);text-decoration:none;transition:background .2s,color .2s}
.d04-cta:hover,.d04-cta:focus-visible{background:var(--acc);color:#fff}
.d04-cta:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* mosaico: celular alto à esquerda, 4 quadros e a foto larga; o letreiro ocupa o canto superior direito */
.d04-mosaic{display:grid;gap:clamp(5px,1.1cqw,12px);align-items:end;position:relative;
  grid-template-columns:83fr 68fr 66fr 98fr;grid-template-areas:"ph a b note" "ph c d wide"}
.d04-ph{position:relative;margin:0;overflow:hidden;border-radius:clamp(6px,.9cqw,12px);background:#2a2420;box-shadow:0 8px 22px rgba(30,20,10,.16);min-width:0}
.d04-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 24%;display:block}
.d04-ph--empty{background:linear-gradient(160deg,#d9cfc6,#bfb1a5 60%,#cdbfb3)}
.d04-ph--a{grid-area:a;aspect-ratio:1}
.d04-ph--b{grid-area:b;aspect-ratio:1}
.d04-ph--c{grid-area:c;aspect-ratio:1}
.d04-ph--d{grid-area:d;aspect-ratio:1}
.d04-ph--wide{grid-area:wide;aspect-ratio:98/76}
.d04-ph--phone{grid-area:ph;align-self:stretch;border:clamp(2px,.4cqw,4px) solid #14110f;border-radius:clamp(12px,1.9cqw,24px);background:#14110f;box-shadow:0 10px 28px rgba(30,20,10,.28)}
.d04-ph--phone.d04-ph--empty{background:linear-gradient(160deg,#cdbfb3,#a99a8d)}
.d04-ph--phone img{border-radius:inherit}
.d04-notch{position:absolute;z-index:2;top:0;left:50%;width:32%;height:3.2%;min-height:5px;transform:translateX(-50%);background:#14110f;border-radius:0 0 8px 8px}

/* letreiro manuscrito (decorativo; o SVG desenhado A043 o substitui quando for entregue) */
.d04-note{grid-area:note;align-self:start;margin:0;color:var(--acc);font-family:"Segoe Script","Bradley Hand","Snell Roundhand","Lucida Handwriting","Brush Script MT",cursive;font-size:clamp(13px,2.05cqw,27px);line-height:1.25;transform:rotate(-6deg);transform-origin:left center;white-space:nowrap}
.d04-note span{display:block}
.d04-note span:last-child{padding-left:1.1em}

/* efeitos padrão (home-cinematic-shared-fx.js): fio botão -> foto e elevação ao passar o mouse.
   O GSAP trava `scale`/`translate`/`rotate` com `none` inline nos elementos que anima (flutuação e parallax), então o hover NÃO usa essas
   propriedades. Ele usa o que o GSAP não escreve: sombra, anel e filtro na moldura, e `inset` negativo na imagem (amplia sem transform). */
.hmfx-thread{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:3}
.hmfx-thread path{fill:none;stroke:var(--acc);stroke-width:1.4;stroke-linecap:round;opacity:.85;filter:drop-shadow(0 0 3px rgba(231,43,108,.4))}
.hmfx-thread circle{fill:var(--acc);filter:drop-shadow(0 0 4px rgba(231,43,108,.6))}
.hmfx-thread .hmfx-o{fill:none;stroke:var(--acc);stroke-width:1.4}
@media (hover:hover) and (pointer:fine){
  .hmfx-lift{transition:box-shadow .4s,filter .4s}
  .hmfx-lift img{transition:top .6s cubic-bezier(.2,.7,.2,1),left .6s cubic-bezier(.2,.7,.2,1),width .6s cubic-bezier(.2,.7,.2,1),height .6s cubic-bezier(.2,.7,.2,1)}
  .hmfx-lift:hover{z-index:2;filter:brightness(1.06) saturate(1.08);box-shadow:0 18px 40px rgba(30,20,10,.34),0 0 0 2px rgba(231,43,108,.65)}
  .hmfx-lift:hover img{top:-4%;left:-4%;width:108%;height:108%}
}

/* abaixo de 900 px: coluna única, mosaico em 2 colunas */
@container (max-width:899.98px){
  .d04-in{grid-template-columns:minmax(0,1fr);row-gap:clamp(20px,5cqw,34px)}
  .d04-copy p{max-width:44ch}
  .hmfx-thread{display:none}
  .d04-mosaic{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"ph a" "ph b" "c d" "wide note";align-items:stretch}
  .d04-ph--wide{aspect-ratio:1}
  .d04-note{align-self:center;justify-self:center;font-size:clamp(14px,4.2cqw,22px);margin:0;transform-origin:center}
}
@media (prefers-reduced-motion:reduce){.d04 *{animation:none!important;transition:none!important}}