.closing-panel,
.closing-banner {
    container-type: inline-size;
    min-width: 0;
    font-family: var(--cartao-font-body, Inter, Arial, sans-serif);
}

.closing-panel {
    padding: clamp(6px, .95vw, 13px) clamp(10px, 2vw, 23px);
    border: 1px solid #e7ebf0;
    border-radius: clamp(12px, 2vw, 20px);
    background: linear-gradient(148deg, #fff, #f2f5f9);
    color: #071536;
    box-shadow: 0 3px 8px #16325425;
}

.closing-panel .cartao-product-muted { margin: 6px 0 0; font-size: .85rem; }

.closing-icon {
    display: block;
    flex: none;
    width: 1.2em;
    height: 1.2em;
    color: #c98716;
}

.natal-campaign .closing-heading {
    display: flex;
    align-items: center;
    gap: clamp(5px, 1.2cqw, 16px);
    margin: 0 0 clamp(4px, .7cqw, 9px);
    color: #071536;
    font: 800 clamp(.88rem, 2.5cqw, 1.66rem)/1.05 var(--cartao-font-heading, "Plus Jakarta Sans", Arial, sans-serif);
    letter-spacing: -.035em;
}

.closing-heading::after, .closing-heading-centered::before {
    flex: 1;
    height: 1px;
    background: #dc9b28;
    content: "";
}
.closing-heading-centered { justify-content: center; }
.closing-heading-centered::before, .closing-heading-centered::after { flex: 0 1 clamp(29px, 11cqw, 102px); }
.closing-heading .closing-icon { width: 1.25em; height: 1.25em; }

.closing-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(5px, 1.05cqw, 13px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.closing-steps > li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: clamp(3px, 1.05cqw, 13px);
    min-width: 0;
    padding: clamp(5px, 1cqw, 13px);
    border: 1px solid #fff;
    border-radius: clamp(8px, 1.4cqw, 15px);
    background: linear-gradient(150deg, #fbfcfd, #f0f1f4);
    box-shadow: 0 2px 4px #0b254424;
}
.closing-steps > li > .closing-icon { width: clamp(15px, 3.9cqw, 44px); height: auto; }
.closing-steps h3, .closing-ranking-main h3 {
    margin: 0;
    color: #071536;
    font: 800 clamp(.5rem, 1.4cqw, 1rem)/1.1 var(--cartao-font-heading, "Plus Jakarta Sans", Arial, sans-serif);
}
.closing-steps h3 > span {
    display: inline-grid;
    place-items: center;
    width: 1.32em;
    height: 1.32em;
    margin-right: .35em;
    border-radius: 50%;
    background: #06285b;
    color: #fff;
}
.closing-steps p {
    margin: .42em 0 0;
    color: #071536;
    font: 400 clamp(.4rem, 1.24cqw, .85rem)/1.1 Arial, sans-serif;
}

.closing-ranking-layout {
    display: grid;
    grid-template-columns: minmax(0, 28fr) minmax(0, 72fr);
    align-items: stretch;
    gap: clamp(8px, 2.1cqw, 24px);
}
.closing-ranking-no-totals { grid-template-columns: minmax(0, 1fr); }
.closing-ranking-stats {
    display: grid;
    grid-auto-rows: 1fr;
    gap: clamp(5px, 1cqw, 11px);
    margin: 0;
}
.closing-ranking-stats > div {
    display: flex;
    align-items: center;
    gap: clamp(5px, 1.55cqw, 18px);
    min-width: 0;
    padding: clamp(4px, .85cqw, 10px) clamp(6px, 1.5cqw, 18px);
    border: 1px solid #eab64b6b;
    border-radius: clamp(8px, 1.4cqw, 14px);
    background: linear-gradient(#fff1bd, #ffc65b);
    box-shadow: 0 2px 4px #895b1238;
}
.closing-ranking-stats > div + div {
    border-color: #dce3ef;
    background: linear-gradient(#fbfdff, #dce5f1);
    box-shadow: 0 2px 4px #16325425;
}
.closing-ranking-stats .closing-icon { width: clamp(16px, 4.4cqw, 45px); height: auto; }
.closing-ranking-stats dt { font-size: clamp(.53rem, 1.45cqw, .9rem); font-weight: 700; }
.closing-ranking-stats dd {
    margin: 0;
    font: 800 clamp(.73rem, 2.55cqw, 1.58rem)/1.05 var(--cartao-font-heading, "Plus Jakarta Sans", Arial, sans-serif);
    overflow-wrap: anywhere;
}
.closing-ranking-main { min-width: 0; }
.closing-ranking-main h3 {
    display: flex;
    align-items: center;
    gap: .42em;
    margin-bottom: 4px;
    font-size: clamp(.55rem, 1.55cqw, 1rem);
}
.closing-ranking-table { overflow: hidden; border: 1px solid #e0e7f0; border-radius: 8px; box-shadow: 0 2px 4px #16325416; }
.closing-ranking-table table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    background: #fbfcfd;
    font: 400 clamp(.44rem, 1.25cqw, .84rem)/1.08 Arial, sans-serif;
}
.closing-ranking-table th, .closing-ranking-table td {
    padding: clamp(1px, .19cqw, 3px) 4px;
    border-bottom: 1px solid #dce4ef;
    text-align: center;
    overflow-wrap: anywhere;
}
.closing-ranking-table th { background: #dde6f3; font-weight: 800; }
.closing-ranking-table th:first-child { width: 16%; }
.closing-ranking-table :is(th, td):nth-child(2) { text-align: left; }
.closing-ranking-table th:last-child { width: 22%; }
.closing-ranking-table tbody tr:nth-child(even) { background: #f1f4f8; }
.closing-ranking-table tr:last-child td { border-bottom: 0; }
.closing-rank-position { display: inline-block; min-width: 2.05em; border-radius: 99px; font-weight: 800; }
.closing-medal-1 { background: linear-gradient(#fff5ae, #f9bd25 65%, #d79710); }
.closing-medal-2 { background: linear-gradient(#f7fbff, #c5cfdf 65%, #a5b4c9); }
.closing-medal-3 { background: linear-gradient(#ffe5b1, #d98a35 75%, #c67526); }

.closing-banner {
    position: relative;
    display: grid;
    grid-template-columns: 28% minmax(0, 1fr);
    align-items: stretch;
    overflow: hidden;
    border: 1px solid #eaf0f9;
    border-radius: clamp(13px, 1.9vw, 22px);
    background: radial-gradient(ellipse at 58% 42%, #092b55, #03152d 85%);
    color: #fff;
    box-shadow: 0 3px 8px #16325446;
}
.closing-banner-art { position: relative; min-width: 0; }
.closing-banner-art .natal-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    mask-image: linear-gradient(90deg, #000 66%, transparent);
}
.closing-banner-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(4px, .7cqw, 9px) clamp(5px, 1cqw, 13px);
    padding: clamp(6px, 1cqw, 14px) clamp(6px, 1.4cqw, 20px) clamp(6px, 1cqw, 14px) 3px;
}
.natal-campaign .closing-banner h2 {
    margin: 0;
    color: #fff;
    font: 800 clamp(.73rem, 2.55cqw, 1.78rem)/1.04 var(--cartao-font-heading, "Plus Jakarta Sans", Arial, sans-serif);
    letter-spacing: -.035em;
}
.closing-banner h2 strong { color: #ffd35a; font-weight: 800; }
.natal-campaign .closing-banner-buy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55em;
    padding: .58em 1em;
    border: 1px solid #ffe89d;
    border-radius: 999px;
    background: linear-gradient(#ffe68a, #f1b93d);
    color: #111723;
    box-shadow: 0 1px 5px #e8a72e50;
    font: 800 clamp(.49rem, 1.4cqw, .99rem)/1.14 var(--cartao-font-body, Inter, Arial, sans-serif);
    text-align: center;
    text-decoration: none;
}
.closing-banner-buy:hover { background: linear-gradient(#fff1af, #ffca58); }
.closing-banner-buy:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.closing-banner-buy .closing-icon { color: inherit; }
.closing-banner-benefits {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, auto));
    align-items: center;
    justify-content: space-between;
    gap: 3px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.closing-banner-benefits li { display: flex; align-items: center; gap: .45em; font-size: clamp(.42rem, 1.16cqw, .82rem); line-height: 1.15; }
.closing-banner-benefits .closing-icon { width: 1.65em; height: 1.65em; color: #ffd25c; }

@media (min-width: 521px) and (max-width: 640px) {
    .closing-panel { padding-block: 4px 6px; }
    .closing-steps > li { padding: 3px; }
    .closing-steps h3 { font: 800 7.25px/1.04 Arial, sans-serif; }
    .closing-steps p { margin-top: .28em; }
}

@media (max-width: 520px) {
    .closing-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .closing-steps h3, .closing-ranking-main h3 { font-size: .72rem; }
    .closing-steps p, .closing-ranking-table table { font-size: .65rem; }
    .closing-ranking-layout { grid-template-columns: minmax(0, 1fr); }
    .closing-ranking-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .closing-ranking-stats dt { font-size: .65rem; }
    .closing-ranking-stats dd { font-size: .87rem; }
    .closing-banner-content { grid-template-columns: minmax(0, 1fr); gap: 7px; padding: 10px 9px 10px 2px; }
    .natal-campaign .closing-banner h2 { font-size: .9rem; }
    .closing-banner-break { display: none; }
    .natal-campaign .closing-banner-buy { font-size: .72rem; min-height: 36px; }
    .closing-banner-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .closing-banner-benefits li { font-size: .59rem; }
    .closing-banner-art .natal-art { top: 50%; height: auto; transform: translateY(-50%); }
}
