/* Capa compartilhada: botão oficial Urbano e faixa dinâmica nos quatro layouts. */
html[data-capa] .hero>.actions .button{border-radius:2px;min-height:54px;min-width:0;width:min(100%,330px);max-width:100%;padding:14px 24px;gap:30px;justify-content:space-between;background:var(--accent);color:var(--bg);border:0;text-transform:uppercase;font:700 13px/1.4 UrbanoSpace,'Segoe UI',sans-serif;letter-spacing:.04em;box-shadow:5px 5px 0 var(--accent-soft)}
.hero-intro>.capa-descricao-original{display:none}
.capa-itens{position:relative;isolation:isolate;min-width:0;max-width:100%;flex-shrink:0;margin:20px 0 8px;padding:20px 14px;color:var(--text)}
.capa-itens[hidden]{display:none}
.capa-itens-lista{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 14px;align-items:center;min-height:80px}
.capa-item{display:inline-flex;align-items:center;justify-self:center;gap:7px;max-width:100%;font:500 16px/1.5 UrbanoSpace,'Segoe UI',sans-serif;transform:rotate(-22deg);animation:capa-item-pulso 5s ease-in-out infinite;animation-delay:var(--capa-item-atraso,0s)}
.capa-item>span:last-child{min-width:0;overflow-wrap:anywhere;text-wrap:balance}
.capa-item:nth-child(3n+2){position:relative;top:10px}
.capa-item:nth-child(3n){position:relative;top:-4px}
.capa-item-visto{color:var(--accent);font-size:17px;font-weight:700;flex:none}
.capa-itens:hover .capa-item,.capa-itens:focus-visible .capa-item{animation-play-state:paused}
.capa-itens:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@keyframes capa-item-pulso{0%,65%,100%{transform:rotate(-22deg) translateY(0);opacity:1;text-shadow:none}35%{transform:rotate(-22deg) translateY(-3px);opacity:1;text-shadow:0 0 12px var(--accent-soft)}76%,84%{opacity:.6}80%,88%{opacity:1}}
html[data-capa=editorial] .hero,html[data-capa=centralizado] .hero{grid-template-rows:auto auto auto auto}
html:is([data-capa=editorial],[data-capa=centralizado]) .hero>.capa-itens{grid-column:1;grid-row:2;width:100%;margin:8px 0 0}
html[data-capa=editorial] .hero>.capa-itens{width:calc(100% - 28px);margin-left:28px}
html:is([data-capa=editorial],[data-capa=centralizado]) .hero>.editorial-diferenciais{grid-row:3}
html:is([data-capa=editorial],[data-capa=centralizado]) .hero>.actions{grid-row:4}
html[data-capa=centralizado] .hero>.urbano-vitrine{grid-row:1 / span 4}
html[data-capa=impacto] .hero>.capa-itens{width:min(440px,100%);margin-top:clamp(26px,5svh,64px)}
html[data-capa=impacto] .hero:has(>.capa-itens:not([hidden]))>.editorial-diferenciais{margin-top:0}
@media(max-width:760px){
 html[data-capa] .hero>.actions .button{width:100%;min-height:54px;font-size:13px;padding:14px 20px}
 html[data-capa] .hero>.capa-itens{width:100%;margin:auto 0 22px;padding:18px 10px}
 html[data-capa] .hero:has(>.capa-itens:not([hidden]))>.editorial-diferenciais{margin-top:0}
 html[data-capa=impacto] .hero:not(:has(>.capa-itens:not([hidden])))>.editorial-diferenciais{margin-top:auto}
 html[data-capa=impacto] .hero:not(:has(>.capa-itens:not([hidden]))):not(:has(>.editorial-diferenciais:not([hidden])))>.actions{margin-top:auto}
 .capa-itens-lista{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px}
 .capa-item{font-size:16px}
}
@media(prefers-reduced-motion:reduce){.capa-item{animation:none}}

.capa-itens[data-total="1"] .capa-itens-lista{grid-template-columns:minmax(0,1fr);min-height:64px}
.capa-itens[data-total="1"] .capa-item{width:min(100%,420px);justify-self:center;justify-content:center;font-size:18px;line-height:1.6}
.capa-itens[data-total="1"]{padding-inline:24px;padding-block:26px}

/* Texto livre usa a mesma posição da apresentação por itens, sem rotação ou animação. */
html[data-capa] .hero>.capa-texto-livre{padding:12px 0}
.capa-frase{font:400 16px/1.65 var(--sans);color:var(--text);max-width:52ch;margin:0;text-transform:none;letter-spacing:normal;text-wrap:pretty}

/* Modos explícitos de atendimento, com o mesmo botão oficial em todos os modelos. */
html[data-capa] .hero>.actions.comanda-acoes{display:grid;grid-template-columns:minmax(0,1fr);width:min(100%,660px);max-width:100%;gap:12px}
html[data-capa] .hero>.actions.comanda-acoes-duplas{grid-template-columns:repeat(2,minmax(0,1fr))}
html[data-capa] .hero>.actions.comanda-acoes .button{width:100%;min-width:0}
@media(max-width:760px){html[data-capa] .hero>.actions.comanda-acoes{gap:8px}html[data-capa] .hero>.actions.comanda-acoes-duplas .button{font-size:11px;padding:12px 10px;gap:6px;letter-spacing:0}html[data-capa] .hero>.actions.comanda-acoes-duplas .ui-icon{width:16px;height:16px;flex-shrink:0}}

/* A primeira tela termina nas ações, inclusive com a campanha ativa. */
@media(max-width:760px){
 html:is([data-capa=classico],[data-capa=editorial],[data-capa=impacto]) .hero{
  padding-bottom:max(14px,env(safe-area-inset-bottom));
 }
 html:is([data-capa=editorial],[data-capa=impacto]) .hero{
  min-height:100svh;
  min-height:100dvh;
  padding-top:clamp(88px,14svh,118px);
 }
 html[data-capa=classico] .hero{
  min-height:calc(100dvh - var(--altura-cabecalho,100px));
  padding-top:12px;
 }
 html[data-capa=classico] .hero-intro{margin-bottom:8px}
 html[data-capa=classico] .hero>.gallery .gallery-item img{
  height:clamp(76px,17svh,145px);
  aspect-ratio:auto;
  object-fit:cover;
 }
 html[data-capa=classico] .hero>.gallery-hint{margin-block:5px}
 html[data-capa=editorial] .hero>.editorial-orbita{
  height:clamp(82px,15svh,132px);
  margin:10px 0 6px;
 }
 html[data-capa=editorial] .editorial-foto{width:clamp(44px,15vw,68px)}
 html[data-capa=editorial] .editorial-foto:nth-child(4){bottom:42px}
 html[data-capa=impacto] .hero>.impacto-recortes{
  height:clamp(76px,16svh,142px);
  margin:12px 0 6px;
 }
 html:is([data-capa=classico],[data-capa=editorial],[data-capa=impacto]) .hero>.capa-itens:not(.capa-texto-livre){
  padding-block:4px 10px;
 }
 html:is([data-capa=classico],[data-capa=editorial],[data-capa=impacto]) .hero .capa-itens-lista{
  min-height:0;
  row-gap:9px;
 }
 html:is([data-capa=classico],[data-capa=editorial],[data-capa=impacto]) .hero .capa-itens-lista:has(>.capa-item:nth-child(2)){
  padding-top:14px;
 }
 html:is([data-capa=classico],[data-capa=editorial],[data-capa=impacto]) .hero>.capa-texto-livre{
  margin-bottom:8px;
 }
 html:is([data-capa=classico],[data-capa=editorial],[data-capa=impacto]) .hero>.editorial-diferenciais{
  min-height:0;
  padding-block:4px;
 }
 html:is([data-capa=classico],[data-capa=editorial],[data-capa=impacto]) .hero>.actions{
  margin-top:auto;
  padding-top:8px;
 }
 html:is([data-capa=classico],[data-capa=editorial],[data-capa=impacto]) .hero .promocao-neon{
  margin-block:12px 6px;
 }
}

@media(max-width:760px) and (max-height:680px){
 html:is([data-capa=classico],[data-capa=editorial],[data-capa=impacto]) .hero .promocao-neon-oferta h2{
  font-size:clamp(16px,4.6vw,22px);
 }
 html:is([data-capa=classico],[data-capa=editorial],[data-capa=impacto]) .hero .promocao-neon-oferta{
  padding-inline:9px;
  padding-bottom:5px;
 }
 html:is([data-capa=classico],[data-capa=editorial],[data-capa=impacto]) .hero .capa-frase{
  font-size:14px;
  line-height:1.4;
 }
 html[data-capa=classico] .hero>.gallery .gallery-item>span{padding-block:5px}
}
@media(max-width:760px) and (max-height:600px){
 html[data-capa=classico] body .header{min-height:76px;padding-block:14px}
 html[data-capa=classico] .hero{padding-top:6px}
 html[data-capa=classico] .hero .promocao-neon-oferta p{margin-block:3px;padding-block:3px}
 html[data-capa=classico] .hero .promocao-neon-adorno{font-size:17px;margin-top:2px}
 html[data-capa=classico] .hero>.gallery .gallery-item img{height:62px}
 html[data-capa=classico] .hero>.actions{padding-top:4px}
 html[data-capa=classico] .hero>.editorial-diferenciais .ui-icon{width:20px;height:20px}
 html[data-capa=classico] .hero>.gallery-hint{font-size:10px;margin-block:2px}
 html[data-capa=classico] .hero>.capa-texto-livre{padding-block:4px}
}

/* Galerias da capa no navegador de computador. */
@media(min-width:761px) and (display-mode:browser) and (pointer:fine){
 html[data-capa=classico] .hero>.gallery .gallery-item img{height:clamp(85px,18svh,165px)}
 html[data-capa=classico] .hero>.gallery .gallery-item>span,
 html[data-capa=centralizado] .urbano-vitrine .gallery-item>span{font-size:clamp(12px,1vw,15px);line-height:1.3;white-space:normal;overflow-wrap:anywhere}
 html[data-capa=centralizado] .urbano-destaque{width:min(100%,clamp(160px,31svh,330px))}
 html[data-capa=centralizado] .urbano-vitrine .gallery-item>img{height:clamp(65px,12svh,114px);object-fit:cover}
 html[data-capa=centralizado] .urbano-destaque>span{font-size:clamp(17px,1.4vw,22px)}
}