/* Item 57 — banner publicitário não fixo do cabeçalho. */

.item57-wrap {
  position: relative;
  z-index: 8;
  width: 100%;
  padding: 14px clamp(10px, 2vw, 28px);
  background:
    linear-gradient(135deg, rgba(8, 37, 58, .98), rgba(10, 77, 119, .95)),
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(255,255,255,.03) 12px 13px);
  border-bottom: 1px solid rgba(255,255,255,.18);
}

.item57-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--item57-width, 60cm);
  margin: 0 auto;
  padding: clamp(18px, 2.4vw, 30px);
  overflow: hidden;
  text-align: center;
  background: #fffdf7;
  border: 3px solid #e8b93f;
  border-radius: 18px;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .24), inset 0 0 0 1px rgba(255,255,255,.8);
}

.item57-label {
  display: inline-block;
  align-self: center;
  margin-bottom: 12px;
  padding: 6px 13px;
  color: #fff;
  background: #09253a;
  border-radius: 999px;
  font: 800 12px/1.2 "Trebuchet MS", sans-serif;
  letter-spacing: .13em;
  text-align: center;
}

.item57-line {
  width: 100%;
  margin: 9px auto;
  max-width: 55ch;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--item57-font, 25px);
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.item57-renewal { color: var(--item57-renewal, #000); }
.item57-plan { color: var(--item57-plan, #15803d); text-transform: none; }
.item57-spec { color: var(--item57-spec, #000); }
.item57-cta { color: var(--item57-cta, #dc2626); }

.item57-button {
  display: inline-flex;
  align-self: center;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin-top: 12px;
  padding: 12px 28px;
  color: #fff !important;
  background: var(--item57-button, #0759d8);
  border: 2px solid rgba(0,0,0,.14);
  border-radius: 10px;
  box-shadow: 0 8px 0 rgba(0, 35, 100, .24);
  font: 800 20px/1.15 "Trebuchet MS", sans-serif;
  text-align: center;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.item57-button:hover,
.item57-button:focus-visible {
  color: #fff;
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 10px 0 rgba(0, 35, 100, .22);
}

.item57-button:focus-visible { outline: 4px solid #f4c84a; outline-offset: 3px; }

@media (max-width: 720px) {
  .item57-wrap { padding: 9px 7px; }
  .item57-banner { padding: 17px 12px 20px; border-radius: 12px; }
  .item57-line { font-size: var(--item57-font, 25px); line-height: 1.22; }
  .item57-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .item57-button { transition: none; }
}

/* Versão compacta quando o banner integra a pilha fixa do cabeçalho. */
.global-header-stack .item57-wrap{z-index:15;padding:6px clamp(7px,1.5vw,18px);background:linear-gradient(110deg,#061d2e,#0a4d77 55%,#061d2e)}
.global-header-stack .item57-banner{display:grid;grid-template-columns:auto repeat(4,minmax(120px,1fr)) auto;align-items:center;gap:clamp(5px,1vw,12px);max-width:60cm;padding:7px 9px;border-width:2px;border-radius:10px;box-shadow:0 5px 14px rgba(0,0,0,.2)}
.global-header-stack .item57-label{margin:0;padding:5px 8px;font-size:9px;letter-spacing:.08em}
.global-header-stack .item57-line{max-width:none;margin:0;font-family:"Trebuchet MS",sans-serif;font-size:clamp(10px,.82vw,13px)!important;line-height:1.18;text-wrap:pretty}
.global-header-stack .item57-button{min-height:36px;margin:0;padding:7px 12px;border-radius:8px;box-shadow:0 4px 0 rgba(0,35,100,.24);font-size:12px;white-space:nowrap}
@media(max-width:1100px){.global-header-stack .item57-banner{grid-template-columns:auto repeat(2,minmax(0,1fr)) auto}.global-header-stack .item57-label{grid-row:1/3}.global-header-stack .item57-button{grid-column:-2;grid-row:1/3}.global-header-stack .item57-line{font-size:10px!important}}
@media(max-width:620px){.global-header-stack .item57-wrap{padding:4px}.global-header-stack .item57-banner{grid-template-columns:1fr 1fr;gap:3px 7px;padding:5px 7px}.global-header-stack .item57-label{grid-row:auto;grid-column:1}.global-header-stack .item57-button{grid-row:auto;grid-column:2;min-height:28px;padding:4px 7px;font-size:10px}.global-header-stack .item57-line{font-size:9px!important;line-height:1.1}.global-header-stack .item57-renewal,.global-header-stack .item57-spec{grid-column:1/-1}}

/* Item 57 fora da pilha fixa: preserva o visual compacto e rola com a página. */
.global-header-unpinned .item57-wrap{z-index:15;padding:6px clamp(7px,1.5vw,18px);background:linear-gradient(110deg,#061d2e,#0a4d77 55%,#061d2e)}
.global-header-unpinned .item57-banner{display:grid;grid-template-columns:auto repeat(4,minmax(120px,1fr)) auto;align-items:center;gap:clamp(5px,1vw,12px);max-width:60cm;padding:7px 9px;border-width:2px;border-radius:10px;box-shadow:0 5px 14px rgba(0,0,0,.2)}
.global-header-unpinned .item57-label{margin:0;padding:5px 8px;font-size:9px;letter-spacing:.08em}
.global-header-unpinned .item57-line{max-width:none;margin:0;font-family:"Trebuchet MS",sans-serif;font-size:clamp(10px,.82vw,13px)!important;line-height:1.18;text-wrap:pretty}
.global-header-unpinned .item57-button{min-height:36px;margin:0;padding:7px 12px;border-radius:8px;box-shadow:0 4px 0 rgba(0,35,100,.24);font-size:12px;white-space:nowrap}
@media(max-width:1100px){.global-header-unpinned .item57-banner{grid-template-columns:auto repeat(2,minmax(0,1fr)) auto}.global-header-unpinned .item57-label{grid-row:1/3}.global-header-unpinned .item57-button{grid-column:-2;grid-row:1/3}.global-header-unpinned .item57-line{font-size:10px!important}}
@media(max-width:620px){.global-header-unpinned .item57-wrap{padding:4px}.global-header-unpinned .item57-banner{grid-template-columns:1fr 1fr;gap:3px 7px;padding:5px 7px}.global-header-unpinned .item57-label{grid-row:auto;grid-column:1}.global-header-unpinned .item57-button{grid-row:auto;grid-column:2;min-height:28px;padding:4px 7px;font-size:10px}.global-header-unpinned .item57-line{font-size:9px!important;line-height:1.1}.global-header-unpinned .item57-renewal,.global-header-unpinned .item57-spec{grid-column:1/-1}}

/* ---------------------------------------------------------------------
 * Item 53 — rotação de banners publicitários (tempo por banner).
 * ------------------------------------------------------------------ */
.item57-rotator{position:relative;width:100%;max-width:var(--item57-width,60cm);margin:0 auto}
.item57-rotator .item57-banner{display:none;width:100%;max-width:none;margin:0;text-align:left}
.item57-rotator .item57-banner.is-active{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(8px,1.4vw,20px)}
.item57-ad-media{display:block;flex:0 0 auto}
.item57-ad-media img{display:block;width:clamp(90px,14vw,220px);height:auto;border-radius:10px}
.item57-ad-body{display:flex;flex-direction:column;gap:5px;min-width:0}
.item57-rotator .item57-label{align-self:flex-start;margin:0}
.item57-ad-title{font:800 clamp(14px,1.5vw,22px)/1.2 "Trebuchet MS",sans-serif;color:#09253a;overflow-wrap:break-word}
.item57-ad-text{font:600 clamp(11px,1.05vw,16px)/1.35 Georgia,"Times New Roman",serif;color:#0f172a;overflow-wrap:break-word}
.item57-rotator .item57-button{align-self:center;margin:0;min-height:44px;padding:10px 20px;font-size:15px;white-space:nowrap}

.item57-rotator-controls{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:9px}
.item57-rotator-controls button{cursor:pointer;padding:5px 11px;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);border-radius:8px;font:800 13px/1 "Trebuchet MS",sans-serif}
.item57-rotator-controls button:hover,.item57-rotator-controls button:focus-visible{background:rgba(255,255,255,.26)}
.item57-rotator-controls span{color:#fff;font:700 13px/1 "Trebuchet MS",sans-serif;letter-spacing:.08em}

.item57-rotator-progress{display:block;height:3px;margin-top:6px;background:rgba(255,255,255,.22);border-radius:999px;overflow:hidden}
.item57-rotator-progress i{display:block;width:0;height:100%;background:#f4c84a}
.item57-rotator-progress i.is-running{animation:item57-rotator-progress linear forwards}
@keyframes item57-rotator-progress{from{width:0}to{width:100%}}

@media (max-width:720px){
  .item57-rotator .item57-banner.is-active{grid-template-columns:1fr;text-align:center;justify-items:center}
  .item57-ad-media img{width:100%;max-width:100%}
  .item57-ad-body{align-items:center}
  .item57-rotator .item57-label{align-self:center}
  .item57-rotator .item57-button{width:100%;white-space:normal}
}

@media (prefers-reduced-motion:reduce){
  .item57-rotator-progress i.is-running{animation:none}
}