.codes-main { min-height: 72vh; color: #29231f; background: #fbf7f2 }
        .codes-wrap { width: var(--content); margin: 0 auto; padding: 48px 0 78px }
        .codes-intro { max-width: 760px; margin-bottom: 35px }
        .codes-kicker { margin: 0 0 12px; color: #d94b22; font-size: 10px; font-weight: 950; letter-spacing: .15em; text-transform: uppercase }
        .codes-intro h1 { margin: 0; color: #181311; font-family: Impact, Arial Black, sans-serif; font-size: clamp(42px, 5vw, 66px); font-weight: 500; letter-spacing: .01em; line-height: .96; text-transform: uppercase }
        .codes-intro > p:last-child { margin: 18px 0 0; color: #665d56; font-size: 16px; line-height: 1.65 }
        .codes-heading { margin: 0 0 18px; color: #211914; font-family: Impact, Arial Black, sans-serif; font-size: 30px; font-weight: 500; text-transform: uppercase }
        .codes-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 14px }
        .code-card { display: flex; flex-direction: column; height: 100%; padding: 22px; border: 1px solid #e6cdbd; border-radius: 13px; background: #fff; box-shadow: 0 10px 24px rgba(74,41,20,.08) }
        .code-value { display: block; margin-bottom: 18px; color: #a83e1c; font-family: Consolas, monospace; font-size: 22px; font-weight: 900; letter-spacing: .04em; overflow-wrap: anywhere }
        .code-meta { display: grid; gap: 8px; margin-bottom: 18px; color: #665d56; font-size: 12px; line-height: 1.5 }
        .code-meta strong { color: #302720 }
        .code-copy { width: 100%; min-height: 42px; margin-top: auto; padding: 0 17px; border: 0; border-radius: 8px; color: #fff; background: linear-gradient(135deg, #d95f27, #a93617); font-size: 11px; font-weight: 950; cursor: pointer }
        .codes-empty { padding: clamp(28px, 5vw, 48px); border: 1px dashed #ddb89f; border-radius: 14px; text-align: center; background: rgba(255,255,255,.68) }
        .codes-empty strong { display: block; margin-bottom: 9px; color: #2b211c; font-size: 17px }
        .codes-empty p { max-width: 620px; margin: 0 auto; color: #756960; font-size: 13px; line-height: 1.65 }
        .codes-notice { margin-top: 24px; padding: 22px 24px; border-left: 4px solid #d95f27; border-radius: 10px; background: #fff }
        .codes-notice strong { display: block; margin-bottom: 7px; color: #2b211c }
        .codes-notice p { margin: 0; color: #6a5f57; font-size: 13px; line-height: 1.65 }
        .codes-redeem { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: clamp(24px, 4vw, 44px); margin-top: 24px; padding: clamp(24px, 4vw, 38px); border: 1px solid #e6cdbd; border-radius: 14px; background: radial-gradient(circle at 0 0, rgba(225,95,39,.13), transparent 38%), #fff; box-shadow: 0 12px 28px rgba(74,41,20,.08) }
        .codes-redeem-copy, .codes-redeem-media { min-width: 0; overflow-wrap: anywhere }
        .codes-redeem-kicker { margin: 0 0 10px; color: #d94b22; font-size: 9px; font-weight: 950; letter-spacing: .14em; text-transform: uppercase }
        .codes-redeem .codes-heading { margin-bottom: 13px }
        .codes-redeem-copy > p:not(.codes-redeem-kicker) { margin: 0; color: #665d56; font-size: 13px; line-height: 1.65 }
        .codes-redeem-steps { display: grid; gap: 12px; margin: 22px 0; padding-left: 24px; color: #4e4239; font-size: 13px; line-height: 1.65; list-style: decimal }
        .codes-redeem-steps li { padding-left: 5px }
        .codes-redeem-steps li::marker { color: #a83e1c; font-weight: 900 }
        .codes-redeem-ios { padding: 16px 18px; border: 1px solid #ecd0bd; border-radius: 10px; background: #fff7ef }
        .codes-redeem-ios h3 { margin: 0 0 6px; color: #302720; font-size: 14px; line-height: 1.5 }
        .codes-redeem-ios p { margin: 0; color: #665d56; font-size: 13px; line-height: 1.65 }
        .codes-redeem-ios-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 6px; color: #a83e1c; font-size: 13px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px }
        .codes-redeem-ios-link::after { content: '\2197'; font-size: 15px }
        .codes-redeem-ios-link:hover { color: #70290f }
        .codes-redeem-ios-link:focus-visible, .codes-redeem-link:focus-visible { outline: 2px solid #a83e1c; outline-offset: 4px }
        .codes-redeem-link { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; margin-top: 19px; padding: 0 17px; border-radius: 8px; color: #fff; background: linear-gradient(135deg, #d95f27, #a93617); font-size: 10px; font-weight: 950; letter-spacing: .05em; text-decoration: none; text-transform: uppercase }
        .codes-redeem-link::after { content: '\2197'; font-size: 15px }
        .codes-video { position: relative; overflow: hidden; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; background: #171311; box-shadow: 0 12px 24px rgba(40,24,16,.18) }
        .codes-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0 }
        @media(max-width:820px) {
            .codes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
            .codes-redeem { grid-template-columns: 1fr }
        }
        @media(max-width:620px) {
            .codes-wrap { padding: 33px 0 58px }
            .codes-grid { grid-template-columns: 1fr }
            .codes-intro { margin-bottom: 30px }
            .codes-intro > p:last-child { font-size: 14px }
            .codes-redeem { grid-template-columns: 1fr; padding: 22px 18px }
        }

/* Cards de códigos: sem contorno, usando sombra e contraste de superfície. */
.code-card,
.codes-redeem,
.codes-redeem-ios,
.codes-empty {
    border: 0;
}

.code-card {
    border-radius: 18px;
    background:
        radial-gradient(circle at 92% 3%, rgba(217, 95, 39, .11), transparent 34%),
        linear-gradient(150deg, #fff, #fffaf6);
    box-shadow: 0 17px 38px rgba(74, 41, 20, .1);
    transition: transform .22s ease, box-shadow .22s ease;
}

.code-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 24px 46px rgba(74, 41, 20, .15);
}

.codes-redeem {
    border-radius: 20px;
    box-shadow: 0 18px 42px rgba(74, 41, 20, .105);
}

.codes-redeem-ios {
    background: linear-gradient(145deg, #fff8f1, #fff3e8);
    box-shadow: inset 0 1px rgba(255, 255, 255, .9), 0 8px 20px rgba(74, 41, 20, .055);
}

.codes-empty {
    box-shadow: 0 14px 34px rgba(74, 41, 20, .08);
}

.codes-notice {
    border-left: 0;
    border-radius: 14px;
    box-shadow: 0 13px 30px rgba(74, 41, 20, .075);
}