/* Artes compostas (slides e gerador do painel). Tudo em cqmin: escala com o tamanho da peça. */
.arte{position:absolute;inset:0;container-type:size;overflow:hidden;font-family:var(--sans);color:#fff;background:var(--dark);
  --a-pad:6cqmin}
.arte p,.arte h2{margin:0}
.arte .a-in{position:absolute;inset:0}
.arte .a-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.arte .a-title{font:700 10cqmin/1.02 var(--title);letter-spacing:-.02em;text-wrap:balance}
.arte .a-title mark{background:none;color:var(--primary)}
.arte .a-kicker{font:600 3.4cqmin/1.2 var(--title);text-transform:uppercase;letter-spacing:.12em;margin-bottom:2cqmin}
.arte .a-sub{font:400 3.6cqmin/1.35 var(--sans);margin-top:2.4cqmin;max-width:40ch}
.arte .a-credit{position:absolute;left:var(--a-pad);bottom:1.2cqmin;font-size:1.8cqmin;opacity:.75}
.arte .a-logo{height:7cqmin;width:auto}

/* Campanha: moldura colorida, filete interno, frase grande e faixa de assinatura */
.arte-campanha .a-in{background:var(--soft);padding:3.4cqmin 3.4cqmin 5.4cqmin}
.arte-campanha .a-frame{position:relative;width:100%;height:100%;overflow:hidden;background:var(--warm)}
.arte-campanha .a-frame::after{content:"";position:absolute;inset:1.6cqmin;border:.35cqmin solid rgba(255,255,255,.85);pointer-events:none}
.arte-campanha .a-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.05) 70%)}
.arte-campanha .a-kicker{position:absolute;left:var(--a-pad);top:var(--a-pad);color:var(--soft)}
.arte-campanha .a-title{position:absolute;left:var(--a-pad);right:var(--a-pad);top:50%;translate:0 -62%;font-size:12cqmin;max-width:16ch;text-shadow:0 .4cqmin 2cqmin rgba(0,0,0,.35)}
.arte-campanha .a-strip{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:3cqmin;
  padding:2.6cqmin var(--a-pad);background:color-mix(in srgb,var(--dark) 82%,transparent);font:600 3cqmin/1.25 var(--title)}
.arte-campanha .a-strip .a-logo{height:6.5cqmin}
.arte-campanha .a-credit{color:var(--dark);bottom:1.2cqmin;left:3.6cqmin}

/* Anúncio: foto com mancha orgânica de cor no canto */
.arte-anuncio .a-blob{position:absolute;left:0;top:0;width:58%;height:78%;fill:color-mix(in srgb,var(--dark) 90%,transparent)}
.arte-anuncio .a-box{position:absolute;left:var(--a-pad);top:var(--a-pad);width:44%}
.arte-anuncio .a-kicker{color:var(--soft)}
.arte-anuncio .a-title{font-size:9cqmin}
.arte-anuncio .a-cta{display:inline-block;margin-top:3cqmin;font:700 3.4cqmin var(--title);color:var(--primary);border-bottom:.4cqmin solid currentColor;padding-bottom:.4cqmin}
.arte-anuncio .a-flower{position:absolute;left:50%;top:6cqmin;width:9cqmin;height:9cqmin;color:var(--primary);--flower-center:var(--dark)}
.arte-anuncio .a-credit{left:auto;right:2cqmin}
.arte-anuncio.sem-foto .a-in{background:linear-gradient(135deg,var(--warm),var(--deep))}

/* Chamada: painel escuro + foto recortada em forma de folha */
.arte-chamada .a-in{display:grid;grid-template-columns:54% 46%;background:var(--dark)}
.arte-chamada .a-panel{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;padding:var(--a-pad) 4cqmin var(--a-pad) var(--a-pad);overflow:hidden}
.arte-chamada .a-palm{position:absolute;width:70cqmin;height:70cqmin;left:-24cqmin;bottom:-30cqmin;color:color-mix(in srgb,var(--warm) 45%,var(--dark));z-index:-1}
.arte-chamada .a-kicker{color:var(--soft)}
.arte-chamada .a-title{font-size:8.6cqmin}
.arte-chamada .a-pill{align-self:flex-start;margin-top:3.6cqmin;padding:1.6cqmin 3.6cqmin;border-radius:99cqmin;background:var(--primary);color:var(--dark);
  font:700 2.8cqmin var(--title);text-transform:uppercase;letter-spacing:.04em}
.arte-chamada .a-logo{margin-top:auto;padding-top:4cqmin;height:6cqmin;align-self:flex-start}
.arte-chamada .a-side{position:relative;background:var(--warm);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M22 0H100V100H8C2 84 14 72 10 58 5 40 20 34 16 20 13 10 18 4 22 0Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M22 0H100V100H8C2 84 14 72 10 58 5 40 20 34 16 20 13 10 18 4 22 0Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.arte-chamada .a-fern{position:absolute;inset:10%;width:80%;height:80%;color:color-mix(in srgb,var(--soft) 60%,var(--warm))}
.arte-chamada .a-flower{position:absolute;left:calc(54% - 6cqmin);bottom:8cqmin;width:11cqmin;height:11cqmin;color:var(--primary);--flower-center:var(--dark);z-index:2}

/* Marco: selo (número dentro do anel da logo) + texto ao lado + foto em círculo */
.arte-marco .a-in{background:var(--warm);display:flex;align-items:center}
.arte-marco .a-palm{position:absolute;width:70cqmin;height:70cqmin;left:-18cqmin;bottom:-26cqmin;color:color-mix(in srgb,var(--dark) 18%,var(--warm));rotate:20deg}
.arte-marco .a-box{position:relative;z-index:1;display:flex;align-items:center;gap:5cqmin;width:60%;padding:0 3cqmin 0 var(--a-pad)}
.arte-marco .a-badge{position:relative;flex:none;width:44cqmin;height:44cqmin;display:grid;place-items:center}
.arte-marco .a-ring{position:absolute;inset:0;width:100%;height:100%}
.arte-marco .a-num{position:relative;font:700 calc(24cqmin / var(--k,1))/1 var(--title);letter-spacing:-.04em;color:var(--primary);margin-top:-1cqmin}
.arte-marco .a-copy{display:grid;gap:1.4cqmin;min-width:0}
.arte-marco .a-kicker{color:var(--soft);margin:0}
.arte-marco .a-unit{font:700 9cqmin/1 var(--title);text-transform:uppercase;letter-spacing:.04em;color:#fff}
.arte-marco .a-sub{margin:0;max-width:30ch}
.arte-marco .a-copy .a-logo{height:5.5cqmin;margin-top:2.5cqmin;justify-self:start}
.arte-marco .a-copy .a-title{font-size:8cqmin}
.arte-marco .a-side{position:absolute;right:4cqmin;top:50%;width:min(40%,70cqmin);aspect-ratio:1;translate:0 -50%;border-radius:50%;overflow:hidden;
  box-shadow:0 0 0 1.2cqmin var(--primary)}
.arte-marco .a-side .a-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Só foto */
.arte-foto .a-shade{position:absolute;inset:0;background:linear-gradient(200deg,transparent 35%,rgba(0,0,0,.7))}
.arte-foto .a-box{position:absolute;right:var(--a-pad);bottom:var(--a-pad);max-width:52%;text-align:right}
.arte-foto .a-kicker{color:var(--soft)}
.arte-foto .a-title{font-size:7cqmin}
.arte-foto .a-sub{margin-left:auto}

/* Formatos em pé (post 4:5 e stories): empilha os elementos */
@container (aspect-ratio < 1.1) {
  .a-in{--a-pad:7cqmin}
  .arte .a-title{font-size:11cqmin;hyphens:auto}
  .arte-chamada .a-title{font-size:9.5cqmin}
  .arte .a-sub{font-size:4.6cqmin}
  .arte .a-kicker{font-size:4.2cqmin}
  .arte-campanha .a-title{top:auto;bottom:22cqmin;translate:none;font-size:13cqmin}
  .arte-anuncio .a-blob{width:100%;height:62%}
  .arte-anuncio .a-box{width:auto;right:var(--a-pad)}
  .arte-anuncio .a-flower{left:auto;right:7cqmin;top:auto;bottom:42%}
  .arte-chamada .a-in{grid-template-columns:1fr;grid-template-rows:42% 58%}
  .arte-chamada .a-side{grid-row:1;
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V86C84 96 70 88 56 94 38 101 22 92 0 98Z'/%3E%3C/svg%3E");
            mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V86C84 96 70 88 56 94 38 101 22 92 0 98Z'/%3E%3C/svg%3E")}
  .arte-chamada .a-panel{grid-row:2;justify-content:flex-start;padding-top:4cqmin}
  .arte-chamada .a-flower{left:auto;right:8cqmin;bottom:auto;top:calc(42% - 9cqmin)}
  .arte-marco .a-in{flex-direction:column;justify-content:center;gap:6cqmin}
  .arte-marco .a-box{flex-direction:column;width:auto;padding:0 var(--a-pad);text-align:center;gap:4cqmin}
  .arte-marco .a-badge{width:52cqmin;height:52cqmin}
  .arte-marco .a-num{font-size:calc(29cqmin / var(--k,1))}
  .arte-marco .a-copy{justify-items:center}
  .arte-marco .a-copy .a-logo{justify-self:center}
  .arte-marco .a-unit{font-size:11cqmin}
  .arte-marco .a-sub{margin-inline:auto}
  .arte-marco .a-side{position:relative;right:auto;top:auto;translate:none;width:40cqmin}
  .arte-foto .a-box{max-width:none;left:var(--a-pad)}
}