.abre{
  --foto:min(34.5vw,437px);
  --razao:1.164;                 /* altura ÷ largura da hero-oficial.webp: trocou a foto, troca aqui */
  --ar:clamp(20px,3vw,44px);
  --raio:5px;
  --base:86%;
  position:relative;
  padding:clamp(40px,6vw,72px) 0 clamp(50px,7vw,96px);
  overflow:hidden;
  min-height:calc(var(--foto) * var(--razao) + var(--ar) * 2);
}
.abre__in{max-width:var(--larg);margin:0 auto;padding:0 var(--gut);position:relative}
.abre__fundo{position:absolute;right:-2%;top:50%;transform:translateY(-50%);
  width:var(--foto);z-index:0;pointer-events:none}
/* máscara só de gradiente: com url() de arquivo, o Firefox por file:// recusa e a foto some */
.abre__fundo>img{position:relative;z-index:2;filter:var(--trat);
  -webkit-mask-image:linear-gradient(to bottom,#000 var(--base),transparent 100%);
          mask-image:linear-gradient(to bottom,#000 var(--base),transparent 100%)}

.colcha{position:absolute;inset:0;z-index:0;
  filter:drop-shadow(0 14px 22px rgba(46,42,50,.13))}
/* os seis retalhos viram pétalas de uma lótus aberta atrás dela, cada uma de um pano;
   a máscara é data-URI (não url() de arquivo, que o Firefox recusaria por file://) */
.colcha .costura{display:none}
.colcha .ret{border-radius:0;left:calc(50% - var(--l) / 2);top:auto;bottom:26%;
  width:var(--l);height:var(--a);transform-origin:50% 100%;transform:rotate(var(--g));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 200' preserveAspectRatio='none'%3E%3Cpath d='M50 0C78 30 100 95 92 150C86 190 66 200 50 200C34 200 14 190 8 150C0 95 22 30 50 0Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 200' preserveAspectRatio='none'%3E%3Cpath d='M50 0C78 30 100 95 92 150C86 190 66 200 50 200C34 200 14 190 8 150C0 95 22 30 50 0Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.rt-2{--l:34%;--a:50%;--g:-70deg;--c:var(--salvia);z-index:3}
.rt-5{--l:34%;--a:50%;--g:70deg;--c:var(--salvia);z-index:3}
.rt-3{--l:38%;--a:62%;--g:-40deg;--c:var(--lilas);z-index:2}
.rt-4{--l:38%;--a:62%;--g:40deg;--c:var(--lilas);z-index:2}
.rt-6{--l:40%;--a:70%;--g:-12deg;--c:var(--lavanda);z-index:1}
.rt-1{--l:40%;--a:70%;--g:12deg;--c:var(--lavanda);z-index:1}

.abre__rosa{position:absolute;left:-86px;bottom:-96px;width:min(22%,205px);z-index:0;
  transform:rotate(-12deg);pointer-events:none;opacity:.9}
.abre__rosa img{filter:var(--trat)}

.abre__texto{position:relative;z-index:1;max-width:min(620px,56%)}
.tarja{display:inline-block;background:var(--tinta);color:var(--papel);
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;
  padding:6px 13px;transform:rotate(-1.4deg)}
.abre__tit{font-size:clamp(40px,5.6vw,78px);margin:16px 0 24px;max-width:13ch}
.abre__tit em{color:var(--lilas)}
.abre__lede{max-width:40ch;color:var(--tinta-fraca)}
.abre__acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

@media (max-width:1080px){
  .abre__fundo{right:0}
  .tarja{white-space:nowrap}
  .abre__rosa{bottom:calc(-1 * clamp(50px,7vw,96px))}
  .abre__tit{font-size:45px}
}
@media (max-width:640px){
  /* título e foto lado a lado. A foto continua posicionada: é a caixa dela que a colcha mede */
  .abre__in{display:grid;grid-template-columns:minmax(0,1fr) 44%;column-gap:12px;
    grid-template-areas:"tarja tarja" "tit foto" "lede lede" "acoes acoes";align-items:center}
  .abre__texto{display:contents}
  .tarja{grid-area:tarja;justify-self:start;font-size:11px}
  .abre__tit{grid-area:tit;font-size:32px}
  .abre__lede{grid-area:lede}
  .abre__acoes{grid-area:acoes;display:grid}
  .abre__acoes .btn{text-align:center}
  .abre__fundo{grid-area:foto;position:relative;top:auto;right:auto;transform:none;width:auto;
    margin:16px calc(var(--gut) * -1) 24px 0}
  .abre__rosa{display:none}
}