/* =========================================================
   Rose Life — CSS profissional (proposta)
   Design system com tokens, escala de espaçamento e
   componentes consistentes. Funciona junto do Bootstrap 5
   (substitui o roselife.css) ou sozinho, como neste preview.
   ========================================================= */

/* 1. TOKENS / VARIÁVEIS ---------------------------------- */
:root {
    /* Marca — um único lugar para trocar a identidade */
    --rl-primary:        #0568a6;   /* azul institucional Rose Life (legível c/ branco) */
    --rl-primary-600:    #04547f;   /* hover */
    --rl-primary-700:    #033f63;   /* hover/active (escuro) */
    --rl-primary-050:    #e7f6fe;   /* fundos suaves (tom do #00AFEF) */
    --rl-accent:         #0cfade;   /* verde-água da marca (destaque) */
    --rl-primary-brilho: #00afef;   /* azul claro da marca (gradientes) */
    --rl-primary-medio:  #03a0e3;   /* azul médio da marca (gradientes) */

    /* Neutros */
    --rl-bg:             #f5f7fa;
    --rl-surface:        #ffffff;
    --rl-border:         #e3e8ef;
    --rl-text:           #1f2a37;
    --rl-text-muted:     #667085;
    --rl-text-invert:    #ffffff;

    /* Feedback */
    --rl-danger:         #d92d20;
    --rl-danger-bg:      #fef3f2;
    --rl-success:        #15803d;
    --rl-success-bg:     #ecfdf3;

    /* Tipografia */
    --rl-font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    --rl-fs-sm: 0.875rem;
    --rl-fs-base: 1rem;
    --rl-fs-lg: 1.125rem;
    --rl-fs-h2: 1.375rem;
    --rl-fs-h1: 1.75rem;

    /* Espaçamento (escala 4px) */
    --rl-space-1: 4px;
    --rl-space-2: 8px;
    --rl-space-3: 12px;
    --rl-space-4: 16px;
    --rl-space-5: 24px;
    --rl-space-6: 32px;
    --rl-space-8: 48px;

    /* Raios e sombras */
    --rl-radius: 10px;
    --rl-radius-sm: 6px;
    --rl-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
    --rl-shadow-md: 0 4px 12px rgba(16, 24, 40, .08);
    --rl-shadow-lg: 0 12px 32px rgba(16, 24, 40, .12);

    --rl-transition: 160ms ease;
}

/* 2. BASE ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background-color: var(--rl-bg);
    color: var(--rl-text);
    font-family: var(--rl-font);
    font-size: var(--rl-fs-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Alinhamento à esquerda lê melhor que justificado em telas */
p { margin: 0 0 var(--rl-space-3); }

a {
    color: var(--rl-primary);
    text-decoration: none;
    transition: color var(--rl-transition);
}
a:hover { color: var(--rl-primary-700); text-decoration: underline; }

h1, h2, h3, h4 { color: var(--rl-text); line-height: 1.25; margin: 0 0 var(--rl-space-3); }

.container {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 var(--rl-space-5);
}

/* Foco visível e acessível em tudo que é interativo */
:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--rl-primary) 40%, transparent);
    outline-offset: 2px;
    border-radius: var(--rl-radius-sm);
}

/* 3. TOPO / NAVBAR --------------------------------------- */
.bg-top {
    background: linear-gradient(180deg, var(--rl-primary) 0%, var(--rl-primary-600) 100%);
    color: var(--rl-text-invert);
    box-shadow: var(--rl-shadow-md);
}
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rl-space-4);
    min-height: 64px;
    padding: var(--rl-space-2) 0;
}
.navbar .logo {
    font-size: var(--rl-fs-lg);
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--rl-text-invert);
    display: inline-flex;
    align-items: center;
    gap: var(--rl-space-2);
}
.navbar .logo .dot {
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--rl-accent);
}
.navbar .logo .logo-mark { height: 30px; width: auto; display: block; }
.navbar-nav {
    display: flex;
    align-items: center;
    gap: var(--rl-space-1);
    list-style: none;
    margin: 0; padding: 0;
}
.nav-link {
    color: rgba(255, 255, 255, .85);
    padding: var(--rl-space-2) var(--rl-space-3);
    border-radius: var(--rl-radius-sm);
    font-size: var(--rl-fs-sm);
    font-weight: 500;
    transition: background var(--rl-transition), color var(--rl-transition);
}
.nav-link:hover { color: #fff; background: rgba(255, 255, 255, .12); text-decoration: none; }
.nav-link.active { color: #fff; background: rgba(255, 255, 255, .18); }

/* 4. CARDS ----------------------------------------------- */
.card {
    background: var(--rl-surface);
    border: 1px solid var(--rl-border);
    border-radius: var(--rl-radius);
    box-shadow: var(--rl-shadow-sm);
    transition: box-shadow var(--rl-transition), transform var(--rl-transition);
}
.card + .card { margin-top: var(--rl-space-5); }
.card-body { padding: var(--rl-space-5); }
.card-title { font-size: var(--rl-fs-h2); margin: 0 0 var(--rl-space-2); }
.card-subtitle { color: var(--rl-text-muted); margin: 0; font-weight: 400; }

.blocos-home {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--rl-space-5);
}
.blocos-home .card { text-align: center; }
.blocos-home .card:hover { box-shadow: var(--rl-shadow-md); transform: translateY(-2px); }
.blocos-home .icon {
    width: 56px; height: 56px; margin: 0 auto var(--rl-space-3);
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--rl-primary-050);
    color: var(--rl-primary);
    font-size: 28px;
}

/* 5. BOTÕES ---------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rl-space-2);
    padding: 10px 18px;
    border-radius: var(--rl-radius-sm);
    border: 1px solid transparent;
    font-size: var(--rl-fs-sm);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background var(--rl-transition), border-color var(--rl-transition),
                box-shadow var(--rl-transition), transform var(--rl-transition);
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--rl-primary); border-color: var(--rl-primary); color: #fff; }
.btn-primary:hover { background: var(--rl-primary-700); border-color: var(--rl-primary-700); color: #fff; }

.btn-outline-primary { background: transparent; border-color: var(--rl-primary); color: var(--rl-primary); }
.btn-outline-primary:hover { background: var(--rl-primary-050); }

.btn-ghost { background: transparent; border-color: var(--rl-border); color: var(--rl-text); }
.btn-ghost:hover { background: var(--rl-bg); }

.btn-link { background: none; border: none; color: var(--rl-primary); padding: var(--rl-space-2); }
.btn-link:hover { text-decoration: underline; }

.buttons { display: flex; gap: var(--rl-space-3); justify-content: flex-end; }

/* 6. FORMULÁRIOS ----------------------------------------- */
.form-group { margin-bottom: var(--rl-space-4); }
.form-label { display: block; font-size: var(--rl-fs-sm); font-weight: 600; margin-bottom: var(--rl-space-2); }
.form-control {
    width: 100%;
    padding: 10px 14px;
    font-size: var(--rl-fs-base);
    color: var(--rl-text);
    background: var(--rl-surface);
    border: 1px solid var(--rl-border);
    border-radius: var(--rl-radius-sm);
    transition: border-color var(--rl-transition), box-shadow var(--rl-transition);
}
.form-control::placeholder { color: var(--rl-text-muted); }
.form-control:focus {
    outline: none;
    border-color: var(--rl-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rl-primary) 18%, transparent);
}

/* Estado de erro acessível (substitui a borda vermelha "crua") */
.cpf-invalido, .is-invalid {
    border-color: var(--rl-danger) !important;
    animation: rl-shake .35s;
}
.invalid-feedback { color: var(--rl-danger); font-size: var(--rl-fs-sm); margin-top: var(--rl-space-1); }
@keyframes rl-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}

/* 7. TABELA / LISTAGEM ----------------------------------- */
.table-card { overflow: hidden; padding: 0; }
.table { width: 100%; border-collapse: collapse; font-size: var(--rl-fs-sm); }
.table th, .table td {
    text-align: left;
    padding: var(--rl-space-3) var(--rl-space-4);
    border-bottom: 1px solid var(--rl-border);
}
.table thead th {
    background: var(--rl-primary-050);
    color: var(--rl-primary-700);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    font-size: .75rem;
}
.table tbody tr { transition: background var(--rl-transition); }
.table tbody tr:hover { background: var(--rl-bg); }
.table tbody tr:last-child td { border-bottom: none; }

.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
}
.badge-success { background: var(--rl-success-bg); color: var(--rl-success); }
.badge-pending { background: #fff7e6; color: #b54708; }
.badge-danger  { background: var(--rl-danger-bg); color: var(--rl-danger); }

/* 7b. BOLETOS -------------------------------------------- */
.boleto {
    display: flex;
    align-items: center;
    gap: var(--rl-space-4);
    padding: var(--rl-space-4);
    border: 1px solid var(--rl-border);
    border-radius: var(--rl-radius-sm);
    flex-wrap: wrap;
}
.boleto + .boleto { margin-top: var(--rl-space-3); }
.boleto .info { flex: 1 1 220px; }
.boleto .info strong { display: block; }
.boleto .value { font-size: var(--rl-fs-lg); font-weight: 700; color: var(--rl-text); }
.boleto .actions { display: flex; gap: var(--rl-space-2); flex-wrap: wrap; }
.boleto.is-paid { opacity: .65; }

.barcode {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: .8rem;
    background: var(--rl-bg);
    border: 1px dashed var(--rl-border);
    border-radius: var(--rl-radius-sm);
    padding: var(--rl-space-2) var(--rl-space-3);
    word-break: break-all;
}

/* 7c. TROCA DE TELAS (views) ----------------------------- */
.view { display: none; }
.view.active { display: block; animation: rl-fade .25s ease; }
@keyframes rl-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* 7d. MODAL ---------------------------------------------- */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(16, 24, 40, .5);
    display: none;
    align-items: center; justify-content: center;
    padding: var(--rl-space-4);
    z-index: 27000;
}
.modal-overlay.open { display: flex; animation: rl-fade .2s ease; }
.modal {
    background: var(--rl-surface);
    border-radius: var(--rl-radius);
    box-shadow: var(--rl-shadow-lg);
    width: 100%; max-width: 480px;
    overflow: hidden;
}
.modal.lg { max-width: min(960px, 95vw); }
.pdf-frame {
    width: 100%;
    height: 72vh;
    border: 1px solid var(--rl-border);
    border-radius: var(--rl-radius-sm);
    background: var(--rl-bg);
}
.modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--rl-space-4) var(--rl-space-5);
    border-bottom: 1px solid var(--rl-border);
}
.modal-header h3 { margin: 0; }
.modal-close { background: none; border: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--rl-text-muted); }
.modal-body { padding: var(--rl-space-5); }
.modal-footer { padding: var(--rl-space-4) var(--rl-space-5); border-top: 1px solid var(--rl-border); display: flex; justify-content: flex-end; gap: var(--rl-space-3); }
.detail-row { display: flex; justify-content: space-between; padding: var(--rl-space-2) 0; border-bottom: 1px solid var(--rl-border); }
.detail-row:last-child { border-bottom: none; }
.detail-row span:first-child { color: var(--rl-text-muted); }

/* 7e. TOAST ---------------------------------------------- */
.toast-wrap { position: fixed; right: var(--rl-space-5); bottom: var(--rl-space-5); z-index: 28000; display: flex; flex-direction: column; gap: var(--rl-space-2); }
.toast {
    background: var(--rl-text);
    color: #fff;
    padding: var(--rl-space-3) var(--rl-space-4);
    border-radius: var(--rl-radius-sm);
    box-shadow: var(--rl-shadow-lg);
    font-size: var(--rl-fs-sm);
    animation: rl-toast-in .25s ease;
}
.toast.success { background: var(--rl-success); }
.toast.danger  { background: var(--rl-danger); }
@keyframes rl-toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* 8. ALERTAS / MENSAGENS --------------------------------- */
.alert {
    border-radius: var(--rl-radius-sm);
    padding: var(--rl-space-3) var(--rl-space-4);
    margin-bottom: var(--rl-space-4);
    border: 1px solid transparent;
    font-size: var(--rl-fs-sm);
}
.alert-success { background: var(--rl-success-bg); border-color: #abefc6; color: var(--rl-success); }
.alert-danger  { background: var(--rl-danger-bg);  border-color: #fecdca; color: var(--rl-danger); }

/* 9. COOKIES --------------------------------------------- */
.cookies {
    position: fixed; left: 0; right: 0; bottom: 0;
    background: var(--rl-surface);
    border-top: 1px solid var(--rl-border);
    box-shadow: var(--rl-shadow-lg);
    padding: var(--rl-space-4) 0;
    z-index: 26000;
}
.cookies .inner {
    display: flex; align-items: center; gap: var(--rl-space-5);
    flex-wrap: wrap; justify-content: space-between;
}
.cookies p { margin: 0; font-size: var(--rl-fs-sm); color: var(--rl-text-muted); max-width: 720px; }

/* 10. RODAPÉ --------------------------------------------- */
.footer {
    margin-top: var(--rl-space-8);
    padding: var(--rl-space-6) 0;
    color: var(--rl-text-muted);
    font-size: var(--rl-fs-sm);
    text-align: center;
}

/* 11. UTILITÁRIOS / LAYOUT ------------------------------- */
.section { padding: var(--rl-space-6) 0; }
.stack > * + * { margin-top: var(--rl-space-4); }
.text-muted { color: var(--rl-text-muted); }

/* 12. RESPONSIVO ---------------------------------------- */
@media (max-width: 768px) {
    .navbar { flex-direction: column; align-items: stretch; gap: var(--rl-space-2); }
    .navbar-nav { flex-wrap: wrap; justify-content: center; }
    .buttons { justify-content: stretch; flex-direction: column; }
    .cookies .inner { flex-direction: column; align-items: flex-start; }
}

/* 13. ACESSIBILIDADE: respeita quem reduz animações ------ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* =========================================================
   14. BOLETOS — visual e funções da versão original
   (acordeao por ano + Declaracao de Quitacao + Pagar/Pix + WhatsApp)
   ========================================================= */
:root {
    --azul: #0568a6; --azul-escuro: #04547f; --azul-btn: #03a0e3; --azul-btn-hover: #0568a6;
    --navy: #033f63; --verde-escuro: #2c8c46; --cinza: #6b7280; --cinza-card: #f3f4f6;
    --borda: #e2e8f0; --vermelho: #c81e1e; --laranja: #b45309; --branco: #ffffff;
    --sombra-suave: 0 2px 10px rgba(30, 50, 80, .05);
}
/* sobrescreve o .boleto flex do design novo APENAS na lista de boletos */
#lista-boletos .boleto {
    display: block;
    border: 1px solid var(--borda);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 14px;
    transition: box-shadow .15s, border-color .15s;
}
#lista-boletos .boleto:hover { box-shadow: var(--sombra-suave); border-color: #cdd7e3; }
.boleto-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.boleto-desc { font-weight: 600; font-size: 15px; color: var(--navy); }
.tag-tipo { display: inline-block; font-size: 13px; font-weight: 600; padding: 3px 12px; border-radius: 999px; }
.tag-tipo.mensalidade { background: #eef2ff; color: #3730a3; }
.tag-tipo.acordo { background: #fdf2f8; color: #9d174d; }
.boleto-venc { font-size: 13px; color: var(--cinza); margin: 4px 0 6px; }
.boleto-valor { font-size: 20px; font-weight: 700; color: var(--navy); white-space: nowrap; }
.status { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .3px; }
.status.aberto { background: #eff6ff; color: #1d4ed8; }
.status.vencido { background: #fef2f2; color: var(--vermelho); }
.status.pago { background: #ecfdf5; color: var(--verde-escuro); }
.boleto-acoes { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.boleto-acoes button, .boleto-acoes a {
    flex: 1; min-width: 140px; text-align: center; text-decoration: none;
    padding: 11px 14px; border-radius: 8px; font-weight: 600; font-size: 14px;
    cursor: pointer; border: 1.5px solid var(--azul-btn);
}
.btn-pdf { background: var(--azul-btn); color: var(--branco); }
.btn-pdf:hover { background: var(--azul-btn-hover); }
.btn-whatsapp { background: #25d366; color: var(--branco); border-color: #1faa52 !important; }
.btn-whatsapp:hover { background: #1faa52; }
.boleto-indisponivel { margin: 12px 0 0; padding: 10px 12px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; font-size: 13px; color: var(--laranja); }
.sem-boletos { text-align: center; color: var(--cinza); padding: 24px 0; }
/* acordeao por ano + declaracao */
.ano-drop { border: 1px solid var(--borda); border-radius: 14px; background: var(--branco); box-shadow: var(--sombra-suave); margin-bottom: 16px; overflow: hidden; }
.ano-drop > summary { list-style: none; cursor: pointer; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 14px 20px; font-weight: 600; color: var(--navy); user-select: none; }
.ano-drop > summary::-webkit-details-marker { display: none; }
.ano-drop > summary::after { content: "\25BE"; margin-left: 8px; color: var(--cinza); transition: transform .2s; }
.ano-drop[open] > summary::after { transform: rotate(180deg); }
.ano-drop > summary:hover { background: var(--cinza-card); }
.ano-titulo { font-size: 1.05rem; }
.ano-meta { font-size: .9rem; font-weight: 500; color: var(--cinza); display: flex; align-items: center; gap: 10px; }
.ano-status { font-weight: 600; padding: 3px 10px; border-radius: 999px; font-size: .82rem; }
.ano-status.ok { background: #e7f6ec; color: var(--verde-escuro); }
.ano-status.pend { background: #fef3e6; color: var(--laranja); }
.ano-corpo { padding: 8px 20px 18px; border-top: 1px solid var(--borda); }
.btn-declaracao { margin-left: auto; border: 0; border-radius: 8px; padding: 9px 16px; font-size: .9rem; font-weight: 600; cursor: pointer; white-space: nowrap; background: var(--azul); color: var(--branco); transition: background .15s; }
.btn-declaracao:hover:not(:disabled) { background: var(--azul-escuro); }
.btn-declaracao:disabled { background: var(--cinza-card); color: var(--cinza); cursor: not-allowed; }

/* =========================================================
   15. FICHA FASEC + CONTRATAÇÃO
   ========================================================= */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.form-grid .col-2 { grid-column: span 2; }
.check { display: flex; gap: 8px; align-items: flex-start; font-size: .9rem; margin: 10px 0; cursor: pointer; line-height: 1.5; }
.check input { margin-top: 3px; flex: 0 0 auto; }
.sign-wrap { border: 1.5px dashed var(--rl-border); border-radius: var(--rl-radius-sm); background: #fff; height: 180px; overflow: hidden; }
.sign-wrap canvas { width: 100%; height: 180px; display: block; touch-action: none; cursor: crosshair; }
.radios { display: flex; gap: 20px; flex-wrap: wrap; }
.radios label { display: flex; gap: 8px; align-items: center; cursor: pointer; }

/* upload por item, com check */
.doc-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--rl-border); border-radius: 8px; margin-bottom: 8px; cursor: pointer; transition: border-color .15s, background .15s; }
.doc-row:hover { border-color: var(--rl-primary); }
.doc-row.ok { border-color: #abefc6; background: var(--rl-success-bg); }
.doc-row .doc-label { flex: 1 1 auto; font-size: .9rem; font-weight: 500; }
.doc-row .doc-file { font-size: .78rem; color: var(--rl-text-muted); max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-row .btn-anexar { font-size: .8rem; font-weight: 600; color: var(--rl-primary); border: 1px solid var(--rl-primary); border-radius: 6px; padding: 5px 12px; white-space: nowrap; }
.doc-row .ck { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1.5px solid var(--rl-border); color: transparent; flex: 0 0 auto; font-size: 13px; font-weight: 700; }
.doc-row.ok .ck { background: var(--rl-success); border-color: var(--rl-success); color: #fff; }
.dep-card { border: 1px solid var(--rl-border); border-radius: 10px; padding: 16px; margin-bottom: 12px; background: var(--rl-bg); }
.dep-card .dep-head { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.dep-card .dep-head .form-group { margin-bottom: 0; flex: 1 1 180px; }
.dep-remove { background: none; border: none; color: var(--rl-danger); font-weight: 600; cursor: pointer; font-size: .85rem; padding: 6px; }

/* =========================================================
   16. HERO COMERCIAL + CARROSSEL DE PRODUTOS (página inicial)
   Versão moderna/chamativa — v2
   ========================================================= */
.hero-comercial {
    position: relative;
    overflow: hidden;
    min-height: 460px;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, var(--rl-primary-brilho) 0%, var(--rl-primary-medio) 45%, var(--rl-primary) 100%);
    color: var(--rl-text-invert);
    border-radius: var(--rl-radius);
    padding: 56px var(--rl-space-6);
    box-shadow: var(--rl-shadow-lg);
}
.hero-photo {
    position: absolute; z-index: 0; inset: 0;
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; }
.hero-content { position: relative; z-index: 1; max-width: 560px; }
.hero-visual-badge {
    position: absolute; z-index: 2; right: var(--rl-space-6); bottom: var(--rl-space-5);
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; color: var(--rl-primary-700);
    font-size: .85rem; font-weight: 700;
    padding: 10px 18px;
    border-radius: 999px;
    box-shadow: var(--rl-shadow-lg);
    white-space: nowrap;
}
.hero-visual-badge .shield-check { flex: 0 0 auto; }
.hero-visual-badge .badge-mark { flex: 0 0 auto; width: 24px; height: 24px; object-fit: contain; }
@media (max-width: 880px) {
    .hero-photo, .hero-visual-badge { display: none; }
    .hero-comercial { min-height: 0; }
}
.hero-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
    font-size: .78rem; font-weight: 600;
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: var(--rl-space-4);
    backdrop-filter: blur(4px);
}
.hero-comercial h1 {
    color: #fff;
    font-size: clamp(1.8rem, 4.2vw, 2.7rem);
    line-height: 1.15;
    margin-bottom: var(--rl-space-3);
}
.hero-comercial h1 .accent { color: #5cf1e3; }
.hero-comercial .hero-sub {
    color: rgba(255, 255, 255, .92);
    font-size: var(--rl-fs-lg);
    max-width: 560px;
    margin: 0;
}
.hero-cta-row { display: flex; gap: var(--rl-space-3); flex-wrap: wrap; margin-top: var(--rl-space-6); }
.btn-hero-primary, .btn-hero-ghost {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .95rem; font-weight: 700;
    padding: 14px 26px;
    border-radius: 999px;
    cursor: pointer;
    transition: transform var(--rl-transition), box-shadow var(--rl-transition), background var(--rl-transition);
    white-space: nowrap;
}
.btn-hero-primary {
    background: #fff; color: var(--rl-primary-700); border: none;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
}
.btn-hero-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0, 0, 0, .22); }
.btn-hero-ghost {
    background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .55); text-decoration: none;
}
.btn-hero-ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; text-decoration: none; }

.hero-trust { display: flex; gap: var(--rl-space-5); flex-wrap: wrap; margin-top: var(--rl-space-5); }
.hero-trust span { font-size: .82rem; font-weight: 500; color: rgba(255, 255, 255, .85); }

.produtos-section { margin-top: var(--rl-space-8); }
.produtos-eyebrow {
    display: block;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    font-size: .78rem;
    font-weight: 700;
    color: var(--rl-primary-medio);
    margin-bottom: var(--rl-space-1);
}
.produtos-section h2 { font-size: clamp(1.35rem, 2.6vw, 1.7rem); }
.produtos-section > .text-muted { margin-bottom: var(--rl-space-6); }

.carousel-wrap { position: relative; }
.carousel-track {
    display: flex;
    gap: var(--rl-space-5);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: var(--rl-space-2) var(--rl-space-2) var(--rl-space-3);
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }

.produto-card {
    --card-color: var(--rl-primary);
    position: relative;
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: 250px;
    background: var(--rl-surface);
    border: 1px solid var(--rl-border);
    border-radius: 18px;
    box-shadow: var(--rl-shadow-sm);
    padding: var(--rl-space-5);
    text-align: center;
    overflow: hidden;
    transition: box-shadow var(--rl-transition), transform var(--rl-transition), border-color var(--rl-transition);
}
.produto-card::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px;
    background: var(--card-color);
}
.produto-card:hover { box-shadow: var(--rl-shadow-lg); transform: translateY(-4px) scale(1.015); border-color: color-mix(in srgb, var(--card-color) 40%, var(--rl-border)); }
.produto-card .icon {
    width: 64px; height: 64px; margin: var(--rl-space-2) auto var(--rl-space-3);
    display: grid; place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--card-color) 15%, white);
    font-size: 30px;
}
.produto-card h3 { font-size: 1.05rem; margin-bottom: var(--rl-space-2); }
.produto-card p { font-size: .88rem; color: var(--rl-text-muted); min-height: 58px; }
.produto-card .btn-link-produto {
    display: inline-block;
    font-family: inherit;
    font-weight: 700;
    font-size: .85rem;
    color: var(--card-color);
    background: color-mix(in srgb, var(--card-color) 12%, white);
    padding: 8px 16px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--rl-transition), color var(--rl-transition);
}
.produto-card .btn-link-produto:hover { background: var(--card-color); color: #fff; text-decoration: none; }

.produto-card.cor-fasec-saude { --card-color: var(--rl-primary); }
.produto-card.cor-odonto      { --card-color: #059669; }
.produto-card.cor-auto        { --card-color: #3b82f6; }
.produto-card.cor-residencial { --card-color: #f97316; }
.produto-card.cor-viagem      { --card-color: #8b5cf6; }
.produto-card.cor-vida        { --card-color: #ec4899; }
.produto-card.cor-acidentes   { --card-color: #14b8a6; }

.produto-card.destaque { border-color: color-mix(in srgb, var(--card-color) 45%, var(--rl-border)); }
.produto-card .ribbon {
    position: absolute; top: 24px; right: -56px;
    width: 200px;
    transform: rotate(45deg);
    transform-origin: center;
    text-align: center;
    background: var(--card-color); color: #fff;
    font-size: .64rem; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
    padding: 5px 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

.carousel-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--rl-surface);
    border: 1px solid var(--rl-border);
    box-shadow: var(--rl-shadow-md);
    display: grid; place-items: center;
    cursor: pointer;
    color: var(--rl-primary);
    font-size: 1.3rem;
    line-height: 1;
    z-index: 5;
    transition: background var(--rl-transition), opacity var(--rl-transition);
}
.carousel-btn:hover { background: var(--rl-primary-050); }
.carousel-btn:disabled { opacity: .35; cursor: not-allowed; }
.carousel-btn.prev { left: -8px; }
.carousel-btn.next { right: -8px; }
@media (max-width: 900px) { .carousel-btn { display: none; } }

@media (max-width: 640px) {
    .hero-comercial { padding: 36px var(--rl-space-4); }
    .hero-cta-row { flex-direction: column; align-items: stretch; }
}

/* botão verde (Enviar Informações) e bloco de termos */
.btn-success { background: var(--rl-success); border-color: var(--rl-success); color: #fff; }
.btn-success:hover { background: #0f6e34; border-color: #0f6e34; color: #fff; }
.termos { font-size: .88rem; line-height: 1.6; color: var(--rl-text); margin: 18px 0 6px; }
.termos h4 { margin: 16px 0 8px; font-size: 1.02rem; }
.termos p { margin: 8px 0; text-align: justify; }

/* =========================================================
   17. MEUS PLANOS (planos ativos + faixa etária + reajustes)
   ========================================================= */
.plano-card {
    border: 1px solid var(--rl-border);
    border-radius: var(--rl-radius);
    padding: var(--rl-space-5);
    background: var(--rl-surface);
}
.plano-card + .plano-card { margin-top: var(--rl-space-5); }
.plano-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--rl-space-4); flex-wrap: wrap;
    padding-bottom: var(--rl-space-4);
    border-bottom: 1px solid var(--rl-border);
}
.plano-nome { font-size: 1.2rem; margin: 0 0 4px; color: var(--rl-primary-700); }
.plano-meta { display: flex; gap: var(--rl-space-4); flex-wrap: wrap; font-size: var(--rl-fs-sm); color: var(--rl-text-muted); }
.plano-status {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--rl-success-bg); color: var(--rl-success);
    font-size: .8rem; font-weight: 700;
    padding: 5px 12px; border-radius: 999px; white-space: nowrap;
}

/* chips de reajuste */
.reajustes-row { display: flex; gap: var(--rl-space-4); flex-wrap: wrap; margin: var(--rl-space-4) 0; }
.reajustes-vazio {
    margin: var(--rl-space-4) 0;
    background: var(--rl-success-bg); color: var(--rl-success);
    border: 1px solid #abefc6; border-radius: var(--rl-radius-sm);
    padding: var(--rl-space-3) var(--rl-space-4); font-size: var(--rl-fs-sm); font-weight: 600;
}
.reajuste-chip {
    flex: 1 1 240px;
    display: flex; align-items: flex-start; gap: var(--rl-space-3);
    background: var(--rl-bg);
    border: 1px solid var(--rl-border);
    border-radius: var(--rl-radius-sm);
    padding: var(--rl-space-4);
}
.reajuste-chip.destaque { background: #fff7e6; border-color: #fde3b0; }
.reajuste-chip .chip-ico { font-size: 1.4rem; line-height: 1.2; }
.reajuste-chip .chip-label { display: block; font-size: .78rem; color: var(--rl-text-muted); font-weight: 600; margin-bottom: 2px; }
.reajuste-chip strong { font-size: 1.05rem; color: var(--rl-text); }
.reajuste-chip .chip-sub { font-size: .82rem; color: var(--rl-text-muted); }
.reajuste-chip .chip-extra { font-size: .82rem; color: var(--rl-primary-700); font-weight: 600; margin-top: 2px; }

/* tabela de beneficiários */
.tabela-planos-wrap { overflow-x: auto; margin-top: var(--rl-space-2); }
.tabela-planos { width: 100%; border-collapse: collapse; font-size: var(--rl-fs-sm); min-width: 560px; }
.tabela-planos th, .tabela-planos td {
    text-align: left; padding: var(--rl-space-3) var(--rl-space-3);
    border-bottom: 1px solid var(--rl-border); vertical-align: top;
}
.tabela-planos thead th {
    background: var(--rl-primary-050); color: var(--rl-primary-700);
    font-size: .72rem; text-transform: uppercase; letter-spacing: .4px; font-weight: 700;
}
.tabela-planos .col-idade, .tabela-planos .col-valor { white-space: nowrap; }
.tabela-planos .col-valor { text-align: right; font-weight: 600; }
.tabela-planos tbody tr:hover { background: var(--rl-bg); }
.tabela-planos tfoot td {
    font-weight: 700; color: var(--rl-text); border-top: 2px solid var(--rl-border); border-bottom: none;
}
.tabela-planos tfoot .col-valor { text-align: right; color: var(--rl-primary-700); }
.tabela-planos .col-prox strong { display: block; }
.tabela-planos .faixa-nova { display: block; font-size: .78rem; color: var(--rl-text-muted); }

.vinculo-badge {
    display: inline-block; margin-left: 8px;
    background: var(--rl-border); color: var(--rl-text-muted);
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
    padding: 2px 8px; border-radius: 999px; vertical-align: middle;
}
.vinculo-badge.titular { background: var(--rl-primary-050); color: var(--rl-primary-700); }

.plano-obs {
    margin: var(--rl-space-4) 0 0; font-size: .8rem; color: var(--rl-text-muted);
    background: var(--rl-bg); border-radius: var(--rl-radius-sm); padding: var(--rl-space-3) var(--rl-space-4);
}
.contratos-pdf { margin-top: var(--rl-space-5); }
.contratos-pdf .sub-secao { font-size: 1rem; margin-bottom: var(--rl-space-3); }

/* Proposta cancelada continua listada, mas não se parece com a vigente.
   Espelho de `public/css/portal-telas.css` no Laravel. */
.contratos-pdf .contrato-cancelado { opacity: .7; background: var(--rl-bg); }

.situacao-proposta {
    display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 700;
    padding: 3px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .3px;
    background: #eff6ff; color: #1d4ed8;
}
.situacao-proposta.implantada { background: #ecfdf5; color: #2c8c46; }
.situacao-proposta.cancelada { background: #fef2f2; color: #c81e1e; }

/* ===================== 18. Contas / login / LGPD ===================== */
.auth-tabs { display: flex; gap: 6px; background: var(--rl-bg); padding: 4px; border-radius: 10px; }
.auth-tab {
  flex: 1 1 0; padding: 9px 12px; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--rl-text-muted); border-radius: 8px; transition: background .15s, color .15s;
}
.auth-tab.active { background: #fff; color: var(--rl-primary); box-shadow: 0 1px 3px rgba(16,24,40,.08); }
.link-suave { color: var(--rl-primary); font-size: .9rem; text-decoration: none; }
.link-suave:hover { text-decoration: underline; }

.aviso-lgpd {
  background: var(--rl-primary-bg, #eef4fb); border: 1px solid var(--rl-border);
  border-radius: var(--rl-radius-sm); padding: 12px 16px; font-size: .85rem;
  color: var(--rl-text-muted); margin-bottom: 18px;
}
.aviso-lgpd a { color: var(--rl-primary); }

.cookie-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center;
  background: #1f2a37; color: #eef2f7; padding: 14px 18px; border-radius: 12px;
  box-shadow: 0 8px 30px rgba(16,24,40,.25); font-size: .85rem; max-width: 980px; margin: 0 auto;
}
.cookie-banner a { color: #9ecbff; }
.cookie-banner .btn { flex: 0 0 auto; }
/* o atributo hidden precisa vencer o display:flex acima */
.cookie-banner[hidden] { display: none; }