/* =============================================================================
   assinantes.css — landing + checkout + login + recuperar senha
   BEM com prefixos cw-assin-*, cw-plano-*, cw-checkout-*, cw-auth-*
   Uso compartilhado de cw-campo-* (vindo de vendedor.css... mas aqui escopado).
   ============================================================================= */

/* ============================================================
   LANDING (/assinantes/)
   ============================================================ */
.cw-assin {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--espaco-5) var(--espaco-4) var(--espaco-7);
}

.cw-assin__breadcrumb {
    font-size: var(--texto-sm);
    color: var(--cor-texto-suave);
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    flex-wrap: wrap;
    margin-bottom: var(--espaco-4);
}
.cw-assin__breadcrumb-link  { color: var(--cor-marca); text-decoration: none; }
.cw-assin__breadcrumb-link:hover { text-decoration: underline; }
.cw-assin__breadcrumb-sep   { color: var(--cor-texto-fraco); }
.cw-assin__breadcrumb-atual { color: var(--cor-texto); font-weight: 500; }

.cw-assin__hero {
    text-align: center;
    padding: var(--espaco-6) var(--espaco-4);
    background: linear-gradient(135deg, var(--cor-marca) 0%, var(--cor-marca-escura) 100%);
    color: #fff;
    border-radius: var(--raio-xl);
    margin-bottom: var(--espaco-5);
}

.cw-assin__titulo {
    font-size: var(--texto-2xl);
    color: #fff;
    margin: 0 0 var(--espaco-3);
    line-height: 1.2;
}

.cw-assin__subtitulo {
    font-size: var(--texto-lg);
    margin: 0;
    opacity: 0.95;
}

.cw-assin__hero-cta {
    margin: var(--espaco-4) 0 0;
}

.cw-assin__intro {
    text-align: center;
    margin-bottom: var(--espaco-6);
}

.cw-assin__intro-titulo {
    font-size: var(--texto-xl);
    color: var(--cor-texto);
    margin: 0 0 var(--espaco-3);
}

.cw-assin__intro-texto {
    font-size: var(--texto-lg);
    color: var(--cor-texto-suave);
    margin: 0;
    line-height: 1.6;
}

/* Cards de info */
.cw-assin__card {
    background: var(--cor-fundo);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-xl);
    padding: var(--espaco-5);
    margin-bottom: var(--espaco-5);
    box-shadow: var(--sombra-sm);
}

.cw-assin__card-header {
    display: flex;
    align-items: center;
    gap: var(--espaco-3);
    flex-wrap: wrap;
    margin-bottom: var(--espaco-4);
}

.cw-assin__card-icone {
    width: 44px;
    height: 44px;
    border-radius: var(--raio-md);
    background: rgba(255, 193, 7, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.cw-assin__card-icone--verde {
    background: rgba(0, 138, 32, 0.12);
}

.cw-assin__card-titulo {
    font-size: var(--texto-xl);
    color: var(--cor-texto);
    margin: 0;
    flex: 1;
    line-height: 1.2;
}

.cw-assin__card-badge {
    background: rgba(255, 193, 7, 0.18);
    color: #7a5a00;
    padding: var(--espaco-2) var(--espaco-3);
    border-radius: var(--raio-pill);
    font-weight: 700;
    font-size: var(--texto-sm);
}

.cw-assin__card-badge--verde {
    background: rgba(0, 138, 32, 0.12);
    color: var(--cor-marca-escura);
}

.cw-assin__card-texto {
    color: var(--cor-texto);
    font-size: var(--texto-md);
    line-height: 1.7;
    margin: 0 0 var(--espaco-3);
}

.cw-assin__card-lista {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--espaco-2);
}

.cw-assin__card-lista li {
    padding-left: var(--espaco-5);
    position: relative;
    color: var(--cor-texto);
    line-height: 1.6;
}

.cw-assin__card-lista li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--cor-marca);
    font-weight: 700;
}

/* Passos */
.cw-assin__passos {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--espaco-3);
    margin: var(--espaco-4) 0;
}

.cw-assin__passo {
    background: var(--cor-fundo-suave);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-lg);
    padding: var(--espaco-4);
}

.cw-assin__passo-titulo {
    font-size: var(--texto-md);
    font-weight: 700;
    color: var(--cor-texto);
    margin: 0 0 var(--espaco-2);
}

.cw-assin__passo p {
    margin: 0;
    color: var(--cor-texto-suave);
    line-height: 1.6;
    font-size: var(--texto-sm);
}

/* Regras */
.cw-assin__regras {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--espaco-3);
    margin-top: var(--espaco-4);
}

.cw-assin__regra {
    padding: var(--espaco-4);
    border-radius: var(--raio-lg);
    background: var(--cor-fundo);
    border: 1px dashed var(--cor-borda-forte);
}

.cw-assin__regra--principal {
    background: rgba(0, 138, 32, 0.06);
    border: 0;
    border-left: 4px solid var(--cor-marca);
}

.cw-assin__regra-titulo {
    font-size: var(--texto-md);
    font-weight: 700;
    color: var(--cor-texto);
    margin: 0 0 var(--espaco-2);
}

.cw-assin__regra ul {
    padding-left: var(--espaco-5);
    margin: 0;
}

.cw-assin__regra li {
    line-height: 1.7;
    margin-bottom: var(--espaco-2);
    color: var(--cor-texto);
}

.cw-assin__regra p {
    margin: 0;
    line-height: 1.7;
    color: var(--cor-texto);
}

.cw-assin__cta-meio {
    text-align: center;
    margin-top: var(--espaco-5);
}

/* ============================================================
   PLANOS
   ============================================================ */
.cw-assin__planos {
    padding: var(--espaco-6) 0;
    scroll-margin-top: var(--espaco-5);
}

.cw-assin__planos-titulo {
    text-align: center;
    font-size: var(--texto-2xl);
    color: var(--cor-texto);
    margin: 0 0 var(--espaco-5);
}

.cw-assin__planos-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--espaco-4);
    margin-bottom: var(--espaco-4);
}

.cw-plano {
    position: relative;
    background: var(--cor-fundo);
    border: 2px solid var(--cor-borda);
    border-radius: var(--raio-xl);
    padding: var(--espaco-5);
    text-align: center;
    display: flex;
    flex-direction: column;
    transition: transform var(--transicao-media), box-shadow var(--transicao-media);
}

.cw-plano:hover {
    transform: translateY(-4px);
    box-shadow: var(--sombra-lg);
}

.cw-plano--destaque {
    border-color: var(--cor-marca);
    background: linear-gradient(180deg, rgba(0, 138, 32, 0.04) 0%, var(--cor-fundo) 60%);
    transform: translateY(-8px);
    box-shadow: var(--sombra-lg);
}

.cw-plano--destaque:hover {
    transform: translateY(-12px);
}

.cw-plano__selo-destaque {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--cor-marca);
    color: #fff;
    padding: var(--espaco-1) var(--espaco-4);
    border-radius: var(--raio-pill);
    font-size: var(--texto-xs);
    font-weight: 800;
    letter-spacing: 0.06em;
    box-shadow: var(--sombra-md);
}

.cw-plano__badge {
    display: inline-block;
    background: var(--cor-atencao);
    color: #7a5a00;
    padding: var(--espaco-1) var(--espaco-3);
    border-radius: var(--raio-pill);
    font-size: var(--texto-xs);
    font-weight: 800;
    letter-spacing: 0.05em;
    margin-bottom: var(--espaco-3);
    align-self: center;
}

.cw-plano__titulo {
    font-size: var(--texto-lg);
    color: var(--cor-texto);
    margin: 0 0 var(--espaco-3);
    font-weight: 700;
}

.cw-plano__preco {
    font-size: var(--texto-3xl);
    font-weight: 900;
    color: var(--cor-marca);
    line-height: 1;
}

.cw-plano__preco-periodo {
    font-size: var(--texto-sm);
    color: var(--cor-texto-suave);
    margin-bottom: var(--espaco-3);
}

.cw-plano__preco-arte {
    background: var(--cor-fundo-suave);
    border-radius: var(--raio-md);
    padding: var(--espaco-3);
    margin-bottom: var(--espaco-4);
    font-size: var(--texto-sm);
    color: var(--cor-texto-suave);
    line-height: 1.5;
}

.cw-plano__preco-vs {
    display: block;
    font-size: var(--texto-xs);
    color: var(--cor-texto-fraco);
    margin-top: var(--espaco-1);
}

.cw-plano__beneficios {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--espaco-5);
    display: flex;
    flex-direction: column;
    gap: var(--espaco-2);
    text-align: left;
    flex: 1;
}

.cw-plano__beneficios li {
    padding-left: var(--espaco-5);
    position: relative;
    font-size: var(--texto-sm);
    color: var(--cor-texto);
    line-height: 1.5;
}

.cw-plano__beneficios li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--cor-marca);
    font-weight: 700;
}

.cw-plano__cta {
    margin-top: auto;
}

.cw-assin__ja-sou {
    text-align: center;
    font-size: var(--texto-sm);
    color: var(--cor-texto-suave);
    margin: 0;
}

.cw-assin__ja-sou a {
    color: var(--cor-marca);
    font-weight: 700;
    text-decoration: underline;
}

/* ============================================================
   FAQ
   ============================================================ */
.cw-assin__faq {
    padding: var(--espaco-6) 0;
    border-top: 1px solid var(--cor-borda);
    margin-top: var(--espaco-5);
}

.cw-assin__faq-titulo {
    text-align: center;
    font-size: var(--texto-2xl);
    color: var(--cor-texto);
    margin: 0 0 var(--espaco-5);
}

.cw-assin__faq-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--espaco-4);
}

.cw-assin__faq-item {
    background: var(--cor-fundo);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-lg);
    padding: var(--espaco-4);
}

.cw-assin__faq-item h3 {
    font-size: var(--texto-md);
    color: var(--cor-texto);
    margin: 0 0 var(--espaco-2);
    font-weight: 700;
}

.cw-assin__faq-item p {
    margin: 0;
    color: var(--cor-texto-suave);
    line-height: 1.6;
    font-size: var(--texto-sm);
}

/* ============================================================
   CHECKOUT
   ============================================================ */
.cw-checkout {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--espaco-5) var(--espaco-4) var(--espaco-7);
}

.cw-checkout__breadcrumb {
    font-size: var(--texto-sm);
    color: var(--cor-texto-suave);
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    flex-wrap: wrap;
    margin-bottom: var(--espaco-4);
}
.cw-checkout__breadcrumb-link  { color: var(--cor-marca); text-decoration: none; }
.cw-checkout__breadcrumb-link:hover { text-decoration: underline; }
.cw-checkout__breadcrumb-sep   { color: var(--cor-texto-fraco); }
.cw-checkout__breadcrumb-atual { color: var(--cor-texto); font-weight: 500; }

.cw-checkout__header {
    margin-bottom: var(--espaco-5);
    text-align: center;
}

.cw-checkout__titulo {
    font-size: var(--texto-2xl);
    color: var(--cor-texto);
    margin: 0 0 var(--espaco-2);
}

.cw-checkout__subtitulo {
    color: var(--cor-texto-suave);
    margin: 0;
    line-height: 1.6;
}

.cw-checkout__plano-box {
    background: var(--cor-fundo-suave);
    border: 2px dashed var(--cor-marca-clara);
    border-radius: var(--raio-lg);
    padding: var(--espaco-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaco-3);
    flex-wrap: wrap;
    margin-bottom: var(--espaco-5);
}

.cw-checkout__plano-nome {
    font-size: var(--texto-lg);
    color: var(--cor-texto);
    margin: 0 0 var(--espaco-1);
}

.cw-checkout__plano-preco {
    font-size: var(--texto-2xl);
    font-weight: 900;
    color: var(--cor-marca);
    margin: 0;
}

.cw-checkout__plano-preco span {
    font-size: var(--texto-sm);
    color: var(--cor-texto-suave);
    font-weight: 500;
}

.cw-checkout__trocar {
    color: var(--cor-marca);
    font-size: var(--texto-sm);
    text-decoration: underline;
}

.cw-checkout__aviso {
    padding: var(--espaco-4);
    background: #fffbeb;
    border-left: 4px solid #f59e0b;
    border-radius: var(--raio-lg);
    margin-bottom: var(--espaco-4);
    font-size: var(--texto-sm);
    line-height: 1.6;
}

.cw-checkout__erro {
    padding: var(--espaco-4);
    background: #fef2f2;
    border-left: 4px solid var(--cor-alerta);
    border-radius: var(--raio-lg);
    margin-bottom: var(--espaco-4);
    color: var(--cor-alerta);
}

.cw-checkout__form {
    background: var(--cor-fundo);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-xl);
    padding: var(--espaco-5);
    box-shadow: var(--sombra-sm);
}

.cw-checkout__secao {
    border: 0;
    padding: 0;
    margin: 0 0 var(--espaco-6);
}

.cw-checkout__secao:last-of-type { margin-bottom: var(--espaco-4); }

.cw-checkout__secao legend {
    padding: 0;
    width: 100%;
    margin-bottom: var(--espaco-3);
}

.cw-checkout__secao-titulo {
    font-size: var(--texto-md);
    color: var(--cor-marca-escura);
    margin: 0;
    padding-bottom: var(--espaco-1);
    border-bottom: 2px solid var(--cor-marca);
    display: inline-block;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-size: var(--texto-sm);
}

.cw-checkout__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--espaco-3);
}

.cw-checkout__radio-grupo {
    display: flex;
    gap: var(--espaco-4);
    flex-wrap: wrap;
    margin-bottom: var(--espaco-3);
}

.cw-checkout__radio {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    cursor: pointer;
    font-size: var(--texto-sm);
    color: var(--cor-texto);
}

.cw-checkout__radio input {
    accent-color: var(--cor-marca);
}

.cw-checkout__cep-linha {
    display: flex;
    gap: var(--espaco-2);
}

.cw-checkout__cep-linha .cw-campo__input {
    flex: 1;
}

.cw-campo__input--uppercase {
    text-transform: uppercase;
}

.cw-checkout__acoes {
    margin-top: var(--espaco-5);
    padding-top: var(--espaco-4);
    border-top: 1px solid var(--cor-borda);
    text-align: center;
}

.cw-checkout__submit {
    width: 100%;
    max-width: 400px;
}

.cw-checkout__voltar {
    margin: var(--espaco-4) 0 0;
    font-size: var(--texto-sm);
}

.cw-checkout__voltar a {
    color: var(--cor-texto-suave);
    text-decoration: none;
}

.cw-checkout__voltar a:hover {
    color: var(--cor-marca);
}

/* Modal (reusado do vendedor) */
.cw-checkout-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--espaco-4);
    animation: cw-ck-fade 0.2s ease-out;
}
.cw-checkout-modal[hidden] { display: none; }
.cw-checkout-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
    cursor: pointer;
}
.cw-checkout-modal__box {
    position: relative;
    background: var(--cor-fundo);
    border-radius: var(--raio-xl);
    padding: var(--espaco-6) var(--espaco-5);
    max-width: 480px;
    width: 100%;
    text-align: center;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espaco-3);
    animation: cw-ck-slide 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.cw-checkout-modal__icone {
    width: 72px; height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    font-weight: 900;
    background: #fee2e2;
    color: var(--cor-alerta);
}
.cw-checkout-modal__icone::before { content: '✕'; }
.cw-checkout-modal__titulo {
    font-size: var(--texto-xl);
    margin: 0;
    color: var(--cor-alerta);
}
.cw-checkout-modal__msg {
    font-size: var(--texto-md);
    line-height: 1.6;
    color: var(--cor-texto-suave);
    margin: 0;
}
.cw-checkout-modal__ok {
    margin-top: var(--espaco-3);
    min-width: 160px;
}
@keyframes cw-ck-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cw-ck-slide {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================================
   AUTH (login, recuperar, redefinir)
   ============================================================ */
.cw-auth {
    max-width: 460px;
    margin: 0 auto;
    padding: var(--espaco-6) var(--espaco-4);
}

.cw-auth__caixa {
    background: var(--cor-fundo);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-xl);
    padding: var(--espaco-6) var(--espaco-5);
    box-shadow: var(--sombra-md);
    text-align: center;
}

.cw-auth__icone {
    width: 64px;
    height: 64px;
    background: rgba(0, 138, 32, 0.1);
    border-radius: 50%;
    margin: 0 auto var(--espaco-3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
}

.cw-auth__titulo {
    font-size: var(--texto-xl);
    color: var(--cor-texto);
    margin: 0 0 var(--espaco-2);
}

.cw-auth__texto {
    color: var(--cor-texto-suave);
    font-size: var(--texto-sm);
    margin: 0 0 var(--espaco-5);
    line-height: 1.5;
}

.cw-auth__form {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-3);
    text-align: left;
}

.cw-auth__erro,
.cw-auth__sucesso {
    padding: var(--espaco-3);
    border-radius: var(--raio-md);
    margin-bottom: var(--espaco-3);
    font-size: var(--texto-sm);
    line-height: 1.4;
}

.cw-auth__erro {
    background: #fef2f2;
    border-left: 4px solid var(--cor-alerta);
    color: var(--cor-alerta);
}

.cw-auth__sucesso {
    background: #ecfdf5;
    border-left: 4px solid var(--cor-marca);
    color: var(--cor-marca-escura);
}

.cw-auth__submit {
    margin-top: var(--espaco-3);
    width: 100%;
}

.cw-auth__links {
    margin-top: var(--espaco-5);
    padding-top: var(--espaco-4);
    border-top: 1px solid var(--cor-borda);
    display: flex;
    flex-direction: column;
    gap: var(--espaco-2);
    font-size: var(--texto-sm);
}

.cw-auth__link {
    color: var(--cor-marca);
    text-decoration: none;
}

.cw-auth__link:hover {
    text-decoration: underline;
}

.cw-auth__link--secundario {
    color: var(--cor-texto-suave);
}

.cw-auth__email {
    font-weight: 700;
    color: var(--cor-marca-escura);
}

/* ============================================================
   DESKTOP
   ============================================================ */
@media (min-width: 600px) {
    .cw-assin__planos-grid {
        grid-template-columns: repeat(3, 1fr);
        align-items: stretch;
    }

    .cw-assin__passos {
        grid-template-columns: repeat(3, 1fr);
    }

    .cw-assin__regras {
        grid-template-columns: 2fr 1fr;
    }

    .cw-assin__faq-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 768px) {
    .cw-assin,
    .cw-checkout {
        padding: var(--espaco-6) var(--espaco-5) var(--espaco-8);
    }

    .cw-assin__titulo,
    .cw-assin__planos-titulo,
    .cw-assin__faq-titulo {
        font-size: var(--texto-3xl);
    }

    .cw-assin__hero {
        padding: var(--espaco-8) var(--espaco-6);
    }

    .cw-checkout__form {
        padding: var(--espaco-6);
    }

    /* Checkout grid 2 colunas */
    .cw-checkout__grid {
        grid-template-columns: 1fr 1fr;
    }

    .cw-campo--full  { grid-column: 1 / -1; }
    .cw-campo--2\/3  { grid-column: span 1; }
    .cw-campo--1\/3  { grid-column: span 1; }
}