:root{
    --sub-bg:#ffffff;
    --sub-surface:#ffffff;
    --sub-surface-alt:#f6f8fb;
    --sub-line:#dfe5ec;
    --sub-text:#10204a;
    --sub-muted:#71839d;
    --sub-accent:#1689f4;
    --sub-button:#ffc800;
    --sub-button-text:#0d1738;
    --sub-button-hover:#f3bd00;
    --sub-button-hover-text:#0d1738;
    --sub-price:#0875d7;
    --sub-green:#14b86d;
    --sub-shadow:0 13px 34px rgba(18,48,84,.10);
}

*{
    box-sizing:border-box;
}

html{
    min-height:100%;
    background:var(--sub-bg);
}

body{
    margin:0;
    min-height:100vh;
    background:var(--sub-bg);
    color:var(--sub-text);
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    -webkit-font-smoothing:antialiased;
}

button,
a{
    font:inherit;
}

.subscription-topbar{
    border-top:1px solid var(--sub-line);
    border-bottom:1px solid var(--sub-line);
    background:var(--sub-surface);
}

.subscription-topbar-inner{
    width:min(1180px,calc(100% - 36px));
    min-height:76px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
}

.subscription-brand{
    display:flex;
    align-items:center;
    gap:11px;
}

.subscription-brand-logo{
    width:168px;
    max-width:34vw;
    height:auto;
    display:block;
    object-fit:contain;
}

.subscription-brand-context{
    padding-left:12px;
    border-left:1px solid var(--sub-line);
}

.subscription-brand strong,
.subscription-brand span{
    display:block;
}

.subscription-brand strong{
    font-size:14px;
    font-weight:800;
}

.subscription-brand span{
    margin-top:2px;
    color:var(--sub-muted);
    font-size:11px;
}

.subscription-back{
    min-height:40px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 15px;
    border:1px solid color-mix(in srgb,var(--sub-accent) 70%,#fff);
    border-radius:11px;
    color:var(--sub-accent);
    background:transparent;
    font-size:12px;
    font-weight:800;
    text-decoration:none;
}

.subscription-added-bar{
    min-height:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:12px 20px;
    background:var(--sub-surface-alt);
    color:#243557;
    font-size:13px;
}

.subscription-added-bar strong{
    color:var(--sub-green);
}

.subscription-check{
    width:21px;
    height:21px;
    display:inline-grid;
    place-items:center;
    border:2px solid var(--sub-green);
    border-radius:50%;
    color:var(--sub-green);
    font-size:12px;
    font-weight:900;
}

.subscription-main{
    width:min(1180px,calc(100% - 36px));
    margin:0 auto;
    padding:62px 0 52px;
}

.subscription-heading{
    max-width:980px;
    margin:0 auto 52px;
    text-align:center;
}

.subscription-step{
    display:none;
}

.subscription-heading h1{
    margin:0;
    color:var(--sub-text);
    font-size:clamp(28px,3.2vw,44px);
    line-height:1.08;
    letter-spacing:-1.35px;
    font-weight:850;
}

.subscription-heading p{
    margin:22px 0 0;
    color:color-mix(in srgb,var(--sub-text) 88%,#fff);
    font-size:17px;
}

.subscription-options{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:22px;
    align-items:start;
}

.subscription-card{
    min-width:0;
    overflow:hidden;
    border:1px solid var(--sub-line);
    border-radius:12px;
    background:var(--sub-surface);
    box-shadow:none;
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

.subscription-card:hover{
    transform:translateY(-2px);
    box-shadow:var(--sub-shadow);
}

.subscription-card.is-selected{
    border-color:var(--sub-accent);
    box-shadow:0 0 0 1px color-mix(in srgb,var(--sub-accent) 28%,transparent),var(--sub-shadow);
}

.subscription-card-select{
    width:100%;
    min-height:62px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:15px 17px 10px;
    border:0;
    background:transparent;
    color:var(--sub-text);
    cursor:pointer;
    text-align:left;
}

.subscription-radio{
    width:19px;
    height:19px;
    flex:0 0 auto;
    display:grid;
    place-items:center;
    border:2px solid color-mix(in srgb,var(--sub-text) 82%,#fff);
    border-radius:50%;
    transition:border-color .15s ease;
}

.subscription-radio span{
    width:9px;
    height:9px;
    border-radius:50%;
    background:transparent;
    transition:background .15s ease;
}

.subscription-card.is-selected .subscription-radio{
    border-color:var(--sub-accent);
}

.subscription-card.is-selected .subscription-radio span{
    background:var(--sub-accent);
}

.subscription-period-name{
    font-size:14px;
    font-weight:850;
    white-space:nowrap;
}

.subscription-discount{
    margin-left:auto;
    padding:3px 7px;
    border-radius:999px;
    background:#c8efdc;
    color:#082f24;
    font-size:10px;
    font-weight:900;
    white-space:nowrap;
}

.subscription-card-body{
    min-height:188px;
    padding:4px 17px 19px;
}

.subscription-old-price{
    min-height:23px;
    margin-top:2px;
    color:#263550;
    font-size:11px;
    text-decoration:line-through;
    text-decoration-thickness:1px;
}

.subscription-old-price-placeholder{
    text-decoration:none;
    color:var(--sub-muted);
}

.subscription-current-price{
    display:flex;
    align-items:baseline;
    gap:4px;
    margin:1px 0 5px;
    color:var(--sub-price);
}

.subscription-current-price small{
    font-size:11px;
}

.subscription-current-price strong{
    font-size:clamp(32px,3.4vw,43px);
    line-height:1;
    letter-spacing:-1.8px;
    font-weight:850;
}

.subscription-current-price span{
    font-size:12px;
}

.subscription-period-total{
    min-height:23px;
    color:#223450;
    font-size:11px;
}

.subscription-saving{
    width:max-content;
    max-width:100%;
    margin-top:12px;
    padding:6px 9px;
    border:1px solid #b8e5d1;
    border-radius:9px;
    color:#122340;
    background:#fff;
    font-size:11px;
    font-weight:750;
}

.subscription-saving strong{
    font-weight:900;
}

.subscription-tip{
    margin:14px -17px -19px;
    padding:16px 17px;
    background:#f5f5f8;
    color:#172341;
    font-size:11px;
    line-height:1.35;
}

.subscription-benefit{
    min-height:57px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:14px 16px;
    border-top:1px solid var(--benefit-border,var(--sub-line));
    background:var(--benefit-bg,#f4f6f9);
    color:var(--benefit-color,var(--sub-text));
    font-size:11px;
}

.subscription-card.is-selected .subscription-benefit{
    background:var(--benefit-bg,var(--sub-accent));
    color:var(--benefit-color,#fff);
}

.subscription-benefit strong{
    font-weight:700;
}

.subscription-benefit-help{
    width:18px;
    height:18px;
    display:grid;
    place-items:center;
    margin-left:auto;
    padding:0;
    border:1px solid currentColor;
    border-radius:50%;
    color:inherit;
    background:transparent;
    font-size:10px;
    font-weight:900;
    cursor:help;
}

.subscription-benefit-help::after{
    content:attr(data-tooltip);
    position:fixed;
    left:50%;
    bottom:18px;
    width:min(420px,calc(100vw - 34px));
    padding:10px 12px;
    border-radius:9px;
    background:#071525;
    color:#fff;
    box-shadow:0 8px 25px rgba(0,0,0,.25);
    font-size:11px;
    line-height:1.4;
    opacity:0;
    pointer-events:none;
    transform:translateX(-50%) translateY(8px);
    transition:opacity .15s ease,transform .15s ease;
    z-index:99;
}

.subscription-benefit-help:hover::after,
.subscription-benefit-help:focus-visible::after{
    opacity:1;
    transform:translateX(-50%) translateY(0);
}

.subscription-conditions{
    margin-top:18px;
    text-align:right;
    color:var(--sub-accent);
    font-size:10px;
}

.subscription-action-panel{
    margin:30px auto 0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
}

.subscription-action-summary{
    display:none;
}

.subscription-checkout{
    min-width:275px;
    min-height:52px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    padding:0 22px;
    border-radius:10px;
    background:var(--sub-button);
    color:var(--sub-button-text);
    text-decoration:none;
    font-size:13px;
    font-weight:900;
    transition:background .16s ease,transform .16s ease;
}

.subscription-checkout:hover{
    background:var(--sub-button-hover);
    color:var(--sub-button-hover-text);
    transform:translateY(-1px);
}

.subscription-checkout.is-disabled{
    opacity:.45;
    pointer-events:none;
}

.subscription-checkout span{
    font-size:20px;
}

/* Tema escuro */
.subscription-theme-dark{
    --sub-bg:#071525;
    --sub-surface:#0d2034;
    --sub-surface-alt:#0a1b2d;
    --sub-line:#29415f;
    --sub-text:#f4f8fc;
    --sub-muted:#90a7c0;
    --sub-shadow:0 14px 36px rgba(0,0,0,.28);
}

.subscription-theme-dark .subscription-added-bar{
    color:#d8e5f3;
}

.subscription-theme-dark .subscription-old-price,
.subscription-theme-dark .subscription-period-total,
.subscription-theme-dark .subscription-tip{
    color:#d8e5f3;
}

.subscription-theme-dark .subscription-tip,
.subscription-theme-dark .subscription-benefit{
    background:#0a1b2d;
}

.subscription-theme-dark .subscription-saving{
    background:#0b1d30;
    color:#f4f8fc;
}

@media(max-width:760px){
    .subscription-topbar-inner{
        width:min(100% - 26px,640px);
        min-height:66px;
    }

    .subscription-brand strong{
        max-width:175px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .subscription-back{
        padding:0 11px;
        font-size:10.5px;
    }

    .subscription-added-bar{
        min-height:48px;
        padding:10px 15px;
        font-size:11px;
    }

    .subscription-main{
        width:min(100% - 28px,520px);
        padding:31px 0 120px;
    }

    .subscription-heading{
        margin-bottom:25px;
    }

    .subscription-step{
        display:block;
        margin-bottom:8px;
        color:var(--sub-accent);
        font-size:10px;
        font-weight:800;
        text-transform:uppercase;
        letter-spacing:.7px;
    }

    .subscription-heading h1{
        font-size:27px;
        line-height:1.13;
        letter-spacing:-.7px;
    }

    .subscription-heading p{
        margin-top:14px;
        font-size:13px;
        line-height:1.45;
    }

    .subscription-options{
        grid-template-columns:1fr;
        gap:16px;
    }

    .subscription-card{
        border-radius:11px;
    }

    .subscription-card-body{
        min-height:0;
        padding-bottom:18px;
    }

    .subscription-current-price strong{
        font-size:36px;
    }

    .subscription-benefit{
        min-height:52px;
    }

    .subscription-conditions{
        margin:13px 2px 0;
        text-align:left;
        font-size:9px;
    }

    .subscription-action-panel{
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        z-index:80;
        min-height:104px;
        margin:0;
        display:grid;
        grid-template-columns:1fr;
        gap:9px;
        padding:11px max(16px,calc((100vw - 520px)/2));
        border-top:1px solid var(--sub-line);
        background:color-mix(in srgb,var(--sub-surface) 96%,transparent);
        box-shadow:0 -8px 28px rgba(0,0,0,.12);
        backdrop-filter:blur(10px);
    }

    .subscription-action-summary{
        display:grid;
        grid-template-columns:auto 1fr;
        align-items:baseline;
        gap:3px 8px;
        padding:0 2px;
    }

    .subscription-action-summary span{
        color:var(--sub-muted);
        font-size:9px;
    }

    .subscription-action-summary strong{
        font-size:12px;
    }

    .subscription-action-summary small{
        grid-column:1 / -1;
        color:var(--sub-muted);
        font-size:9.5px;
    }

    .subscription-checkout{
        width:100%;
        min-width:0;
        min-height:46px;
        border-radius:9px;
        font-size:12px;
    }
}


/* V90 - fluxo linear e interação de periodicidades */
.subscription-checkout{
    background:#6aa8d0 !important;
    color:#ffffff !important;
}

.subscription-checkout:hover{
    background:#5798c3 !important;
    color:#ffffff !important;
}

/* Todo o card funciona como área clicável. */
.subscription-card{
    cursor:pointer;
}

.subscription-card *{
    cursor:pointer;
}

.subscription-benefit-help,
.subscription-benefit-help *{
    cursor:help !important;
}

/* Mantém feedback visual em toda a área do card. */
.subscription-card:hover{
    border-color:color-mix(in srgb,var(--sub-accent) 58%,var(--sub-line));
}

@media(max-width:760px){
    .subscription-brand-logo{
        width:122px;
        max-width:42vw;
    }

    .subscription-brand-context{
        padding-left:8px;
    }
}


/* V92 - legibilidade dos preços no mobile */
@media(max-width:760px){
    .subscription-old-price{
        font-size:12px !important;
        line-height:1.4 !important;
        text-decoration-color:#e53935 !important;
        text-decoration-thickness:2px !important;
    }

    .subscription-discount{
        font-size:11px !important;
        line-height:1.25 !important;
        padding:4px 8px !important;
    }

    .subscription-saving{
        font-size:12px !important;
        line-height:1.3 !important;
        padding:7px 10px !important;
    }
}


/* V93 - textos auxiliares com o mesmo tamanho do selo Economize no mobile */
@media(max-width:760px){
    .subscription-old-price,
    .subscription-period-total{
        font-size:12px !important;
    }
}


/* V94 - reforço final de legibilidade no rodapé e preços mobile */
@media(max-width:760px){
    /* De R$ ... e Economize ficam com o mesmo peso visual */
    .subscription-old-price,
    .subscription-saving{
        font-size:14px !important;
        line-height:1.35 !important;
    }

    /* Total do período, ex.: R$ 304,98 por 1 ano */
    .subscription-period-total{
        font-size:14px !important;
        line-height:1.35 !important;
    }

    /* Resumo fixo acima do botão */
    .subscription-action-summary span{
        font-size:11px !important;
        line-height:1.3 !important;
    }

    .subscription-action-summary strong{
        font-size:14px !important;
        line-height:1.3 !important;
    }

    .subscription-action-summary small{
        font-size:12px !important;
        line-height:1.35 !important;
    }

    /* Texto principal do CTA */
    .subscription-checkout{
        font-size:14px !important;
        font-weight:900 !important;
    }
}


/* V95 - identidade azul PageHost */
:root{
    --sub-accent:#6aa8d0 !important;
    --sub-price:#6aa8d0 !important;
    --sub-button:#6aa8d0 !important;
    --sub-button-hover:#5798c3 !important;
}

/* Links e ações principais */
.subscription-back,
.subscription-conditions{
    color:#6aa8d0 !important;
}

.subscription-back{
    border-color:#6aa8d0 !important;
}

/* Seleção dos cards */
.subscription-card.is-selected{
    border-color:#6aa8d0 !important;
    box-shadow:0 0 0 1px rgba(106,168,208,.28),var(--sub-shadow) !important;
}

.subscription-card.is-selected .subscription-radio{
    border-color:#6aa8d0 !important;
}

.subscription-card.is-selected .subscription-radio span{
    background:#6aa8d0 !important;
}

/* Preços e informações em azul */
.subscription-current-price,
.subscription-current-price small,
.subscription-current-price strong,
.subscription-current-price span{
    color:#6aa8d0 !important;
}

/* Economia: mantém o box claro, mas substitui o azul interno */
.subscription-saving{
    border-color:rgba(106,168,208,.48) !important;
}

.subscription-saving strong{
    color:#6aa8d0 !important;
}

/* Texto auxiliar/links azuis */
.subscription-step{
    color:#6aa8d0 !important;
}

/* CTA */
.subscription-checkout{
    background:#6aa8d0 !important;
    color:#ffffff !important;
}

.subscription-checkout:hover{
    background:#5798c3 !important;
    color:#ffffff !important;
}

/* Hover dos cards */
.subscription-card:hover{
    border-color:rgba(106,168,208,.72) !important;
}