/* ============================================================
   MOC Assessoria Contábil — Estilos Principais
   Paleta: #990000 | #C0C0C0 | #315E8A | #F1F2EA | #333333
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Poppins:wght@500;600;700&display=swap');

/* --- Cursor personalizado (pena) — apenas em elementos clicáveis --- */
a, button, [role="button"], .btn, label[for], select, input[type="submit"], input[type="button"], input[type="reset"] {
    cursor: url('../img/cursor/pena.cur'), pointer;
}

/* Exceção: não sobrescrever cursor do vLibras */
[vw] *, [vw-plugin-wrapper] *, .vw-access-button *, [vw-access-button] * {
    cursor: auto !important;
}

/* --- Variáveis --- */
:root {
    --moc-primary:    #990000;
    --moc-primary-dk: #6b0000;
    --moc-silver:     #C0C0C0;
    --moc-link:       #315E8A;
    --moc-text:       #333333;
    --moc-bg:         #F1F2EA;
    --moc-white:      #FFFFFF;
    --moc-topbar-h:   36px;
}

html { font-size: 16px; scroll-behavior: smooth; }

body {
    font-family: 'Roboto', sans-serif;
    color: var(--moc-text);
    background: #fff;
    overflow-x: hidden;
}

/* ============================================================
   CONTEÚDO RICO (HTML vindo do editor do admin, já sanitizado)
   ============================================================ */
.wysiwyg-content { line-height: 1.7; }
.wysiwyg-content :first-child { margin-top: 0; }
.wysiwyg-content :last-child { margin-bottom: 0; }
.wysiwyg-content h1, .wysiwyg-content h2, .wysiwyg-content h3,
.wysiwyg-content h4, .wysiwyg-content h5, .wysiwyg-content h6 {
    color: var(--moc-primary);
    font-family: 'Poppins', sans-serif;
    margin-top: 1.2em;
}
.wysiwyg-content p { margin-bottom: 1em; }
.wysiwyg-content ul, .wysiwyg-content ol { margin-bottom: 1em; padding-left: 1.5em; }
.wysiwyg-content a { color: var(--moc-link); }
.wysiwyg-content table { width: 100%; margin-bottom: 1em; border-collapse: collapse; }
.wysiwyg-content table td, .wysiwyg-content table th { border: 1px solid #dee2e6; padding: .5em; }
.wysiwyg-content blockquote { border-left: 3px solid var(--moc-primary); padding-left: 1em; color: #666; margin-left: 0; }
.wysiwyg-content img { max-width: 100%; height: auto; }

/* ============================================================
   ACESSIBILIDADE — CONTRASTE
   ============================================================ */
body.alto-contraste { background: #000 !important; color: #fff !important; }
body.alto-contraste .moc-topbar  { background: #111 !important; }
body.alto-contraste .moc-header  { background: #1a1a1a !important; border-color: #444 !important; }
body.alto-contraste .moc-navbar  { background: #222 !important; }
body.alto-contraste .moc-footer  { background: #0a0a0a !important; }
body.alto-contraste .moc-footer-bottom { background: #000 !important; border-color: #555 !important; }
body.alto-contraste .card,
body.alto-contraste .moc-card,
body.alto-contraste .moc-home-card,
body.alto-contraste .servico-card { background: #111 !important; color: #fff !important; border-color: #444 !important; }
body.alto-contraste .card-header,
body.alto-contraste .moc-home-card .card-header { background: #2a0000 !important; }
body.alto-contraste .dropdown-menu { background: #222 !important; border-color: #444 !important; }
body.alto-contraste .dropdown-item { color: #fff !important; }
body.alto-contraste .dropdown-item:hover { background: #333 !important; }
body.alto-contraste a:not(.btn):not(.nav-link):not(.dropdown-item):not(.util-btn) { color: #ff0 !important; }
body.alto-contraste .cab-brand-name { color: #ff6666 !important; }
body.alto-contraste .util-btn { border-color: #555 !important; color: #fff !important; }
body.alto-contraste .topbar-link,
body.alto-contraste .topbar-text,
body.alto-contraste .topbar-social { color: #fff !important; }
body.alto-contraste .footer-links a,
body.alto-contraste .footer-contact a { color: #ff0 !important; }
body.alto-contraste .section-title { color: #ff6666 !important; }
body.alto-contraste .page-hero { background: linear-gradient(135deg, #1a0000, #000) !important; }


/* --- Skip link --- */
.skip-link {
    position: absolute; top: 0; left: 0; z-index: 99999;
    background: var(--moc-primary); color: #fff;
    padding: .6rem 1rem; transform: translateY(-120%);
    transition: transform .2s ease; text-decoration: none;
    font-size: .875rem;
}
.skip-link:focus { transform: translateY(0); }

/* ============================================================
   BARRA DE TOPO
   ============================================================ */
.moc-topbar {
    background: var(--moc-primary);
    height: var(--moc-topbar-h);
    display: flex;
    align-items: center;
    font-size: .78rem;
}

.topbar-link {
    color: rgba(255,255,255,.88);
    text-decoration: none;
    transition: color .15s;
}
.topbar-link:hover { color: #fff; text-decoration: none; }

.topbar-text { color: rgba(255,255,255,.75); }

.topbar-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    color: rgba(255,255,255,.85);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 50%;
    font-size: .8rem;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.topbar-social:hover {
    background: rgba(255,255,255,.2);
    color: #fff;
    text-decoration: none;
}

.topbar-sep { color: rgba(255,255,255,.35); margin: 0 .15rem; }

/* ============================================================
   CABEÇALHO (sticky junto com navbar)
   ============================================================ */
.moc-sticky-wrap {
    position: sticky;
    top: 0;
    z-index: 1040;
    box-shadow: 0 2px 12px rgba(0,0,0,.18);
}

.moc-header {
    background: #fff;
    padding: .55rem 0;
    border-bottom: 1px solid rgba(153,0,0,.12);
}

.moc-header .logo-img {
    max-height: 76px;
    width: auto;
    transition: transform .2s;
}
.moc-header .logo-img:hover { transform: scale(1.03); }

/* Bloco logo + texto de marca lado a lado */
.cab-brand-wrap { cursor: pointer; }
.cab-brand-wrap:hover .logo-img { transform: scale(1.03); }

.cab-brand-text { line-height: 1; }

/* "Assessoria Contábil" — continua visual do "MOC" no logo */
.cab-brand-name {
    font-family: 'Poppins', 'Roboto', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--moc-primary);
    letter-spacing: -.01em;
    white-space: nowrap;
}

.cab-sub {
    font-size: .78rem;
    color: #555;
    margin: .25rem 0 0;
}

.cab-badge {
    display: inline-flex;
    align-items: center;
    font-size: .7rem;
    font-weight: 600;
    color: #666;
    background: #f4f4f4;
    border: 1px solid #e0e0e0;
    border-radius: 3rem;
    padding: .12rem .55rem;
    line-height: 1.4;
    gap: .2rem;
}

.cab-badge.cab-years {
    background: #fef0f0;
    border-color: rgba(153,0,0,.2);
    color: var(--moc-primary);
}

/* Botões de utilidade no cabeçalho */
.header-utils {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.util-btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .32rem .65rem;
    border: 1.5px solid rgba(153,0,0,.22);
    border-radius: .45rem;
    color: var(--moc-primary);
    background: rgba(153,0,0,.03);
    font-size: .78rem;
    font-weight: 500;
    text-decoration: none;
    transition: all .15s ease;
    white-space: nowrap;
    line-height: 1;
    cursor: pointer;
}
.util-btn:hover, .util-btn:focus {
    background: var(--moc-primary);
    color: #fff;
    border-color: var(--moc-primary);
    text-decoration: none;
}
.util-btn i { font-size: .82rem; }

.util-btn.util-btn-admin {
    border-color: rgba(49,94,138,.28);
    color: var(--moc-link);
    background: rgba(49,94,138,.04);
}
.util-btn.util-btn-admin:hover {
    background: var(--moc-link);
    color: #fff;
    border-color: var(--moc-link);
}

.util-btn .dropdown-toggle::after { display: none; }

.util-label { display: none; }

/* Dropdown acessibilidade */
.util-dd-label {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: #aaa;
    text-transform: uppercase;
}

/* ============================================================
   NAVEGAÇÃO PRINCIPAL
   ============================================================ */
.moc-navbar {
    background: var(--moc-primary);
    padding: 0;
}

.moc-navbar .navbar-nav .nav-link {
    color: rgba(255,255,255,.92) !important;
    font-size: .87rem;
    font-weight: 500;
    padding: .72rem 1rem !important;
    border-bottom: 2px solid transparent;
    transition: border-color .15s, background .15s;
    letter-spacing: .01em;
}
.moc-navbar .navbar-nav .nav-link:hover,
.moc-navbar .navbar-nav .nav-link.active {
    border-bottom-color: var(--moc-silver);
    background: var(--moc-primary-dk);
    color: #fff !important;
}

.moc-navbar .dropdown-menu {
    background: #fff;
    border: none;
    border-radius: .55rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.14);
    min-width: 220px;
    padding: .4rem 0;
    margin-top: 0;
}
.moc-navbar .dropdown-item {
    font-size: .86rem;
    color: var(--moc-text);
    padding: .48rem 1.1rem;
    transition: background .1s;
}
.moc-navbar .dropdown-item:hover {
    background: #fce8e8;
    color: var(--moc-primary);
}
.moc-navbar .dropdown-item i { opacity: .55; }
.moc-navbar .dropdown-divider { border-color: #f0f0f0; }

/* Submenu 3° nível */
.moc-navbar .dropdown-submenu { position: relative; }
.moc-navbar .dropdown-submenu .dropdown-menu {
    top: 0; left: 100%; margin-top: -4px; display: none;
}
.moc-navbar .dropdown-submenu:hover > .dropdown-menu { display: block; }

.navbar-toggler { border-color: rgba(255,255,255,.4); box-shadow: none !important; }
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ============================================================
   CONTEÚDO
   ============================================================ */
.moc-page-content { min-height: calc(100vh - 300px); padding: 2rem 0 4rem; }

/* Carousel — slides são 1920x640 (proporção 3:1); usar aspect-ratio evita
   que a caixa fique "mais larga" que a imagem e corte topo/base com object-fit:cover. */
.moc-carousel .carousel-item img {
    width: 100%;
    aspect-ratio: 3 / 1;
    max-height: 600px;
    object-fit: cover;
}
.moc-carousel .carousel-control-prev,
.moc-carousel .carousel-control-next { width: 5%; }

/* Imagens de páginas públicas (Admin > Configurações > Imagens) — enviadas como 800x600
   (proporção 4:3). aspect-ratio mantém a caixa na mesma proporção da imagem, evitando que
   ela estique junto com a coluna vizinha e corte a imagem via object-fit:cover. */
.moc-page-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    max-height: 420px;
    object-fit: cover;
}

/* Garante o cursor de pena também nas setas do carrossel (o ícone interno
   precisa da regra explícita, não basta herdar do botão em alguns navegadores). */
.moc-carousel .carousel-control-prev,
.moc-carousel .carousel-control-next,
.moc-carousel .carousel-control-prev-icon,
.moc-carousel .carousel-control-next-icon {
    cursor: url('../img/cursor/pena.cur'), pointer !important;
}

/* Herói de página interna */
.page-hero {
    background: linear-gradient(135deg, var(--moc-primary) 0%, var(--moc-primary-dk) 100%);
    color: #fff;
    padding: 2.2rem 0 3rem;
    margin-bottom: -1.5rem;
}
.page-hero h1 { font-family: 'Poppins', sans-serif; font-size: 1.65rem; font-weight: 700; margin: 0; }
.page-hero p  { margin: .35rem 0 0; opacity: .85; font-size: .94rem; }

/* Título de seção */
.section-title {
    font-family: 'Poppins', sans-serif;
    color: var(--moc-primary);
    font-weight: 700;
    font-size: 1.3rem;
    border-left: 4px solid var(--moc-primary);
    padding-left: .75rem;
    margin-bottom: 1.25rem;
}

/* Cards da home */
.moc-home-card {
    border: none;
    border-radius: .8rem;
    box-shadow: 0 4px 20px rgba(0,0,0,.08);
    height: 100%;
    overflow: hidden;
}
.moc-home-card .card-header {
    background: var(--moc-primary);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    padding: .75rem 1.2rem;
}
.moc-home-card .card-body { background: var(--moc-bg); }
.moc-home-card .card-body ul li { color: var(--moc-primary); }
.moc-home-card .card-body ul li span { color: var(--moc-text); }

/* Cards de serviços */
.servico-card {
    border: none;
    border-radius: .8rem;
    box-shadow: 0 3px 14px rgba(0,0,0,.07);
    transition: transform .2s, box-shadow .2s;
    height: 100%;
}
.servico-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(153,0,0,.14);
}
.servico-card .card-icon {
    font-size: 2.2rem;
    color: var(--moc-primary);
    margin-bottom: .6rem;
}

/* Botões */
.btn-moc {
    background: var(--moc-primary);
    color: #fff;
    border: none;
    border-radius: .45rem;
    padding: .45rem 1rem;
    font-size: .87rem;
    transition: background .15s, box-shadow .15s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}
.btn-moc:hover { background: var(--moc-primary-dk); color: #fff; box-shadow: 0 4px 12px rgba(153,0,0,.3); }

.btn-moc-outline {
    background: transparent;
    color: var(--moc-primary);
    border: 1.5px solid var(--moc-primary);
    border-radius: .45rem;
    padding: .42rem .95rem;
    font-size: .87rem;
    transition: all .15s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}
.btn-moc-outline:hover { background: var(--moc-primary); color: #fff; }

/* Links */
a { color: var(--moc-link); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--moc-primary); }

/* Tabelas */
.moc-table thead { background: var(--moc-primary); color: #fff; }
.moc-table thead th { background: var(--moc-primary); color: #fff; border: none; }
.moc-table tbody tr:hover { background: #fce8e8; }
/* Nomes longos (razão social etc.) quebram só entre palavras, nunca no meio de uma palavra */
.moc-table td { white-space: normal; word-break: normal; overflow-wrap: normal; }
/* Tabelas com coluna de nome/razão social: largura da coluna fixa, pra quebrar em ~2 linhas sem espremer as demais colunas */
.moc-table-nomes { table-layout: fixed; width: 100%; }

/* Modal links */
.imgsizep {
    width: 90px; height: 45px;
    object-fit: contain;
    border-radius: .3rem;
    margin: 4px;
    transition: opacity .15s;
    border: 1px solid #e5e5e5;
    background: #fff;
    padding: 2px;
}
.imgsizep:hover { opacity: .8; }
.imgsizep-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: .65rem;
    font-weight: 600;
    line-height: 1.1;
    color: #444;
    overflow: hidden;
}

/* ============================================================
   RODAPÉ PRINCIPAL
   ============================================================ */
.moc-footer { background: #1c1c1c; }

.moc-footer-main {
    padding: 3rem 0 2rem;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.footer-logo {
    max-height: 65px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: .85;
}

.footer-about {
    font-size: .84rem;
    color: rgba(255,255,255,.6);
    line-height: 1.65;
    margin: 0;
}

.footer-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border: 1.5px solid rgba(255,255,255,.25);
    border-radius: 50%;
    color: rgba(255,255,255,.7);
    font-size: .9rem;
    text-decoration: none;
    transition: all .18s;
}
.footer-social-btn:hover {
    background: var(--moc-primary);
    border-color: var(--moc-primary);
    color: #fff;
    text-decoration: none;
}

.footer-heading {
    font-family: 'Poppins', sans-serif;
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: rgba(255,255,255,.5);
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-links li { margin-bottom: .42rem; }
.footer-links a {
    font-size: .84rem;
    color: rgba(255,255,255,.65);
    text-decoration: none;
    transition: color .15s, padding-left .12s;
    display: block;
}
.footer-links a:hover {
    color: var(--moc-silver);
    padding-left: 3px;
    text-decoration: none;
}
.footer-links a i {
    font-size: .6rem;
    opacity: .5;
    margin-right: .2rem;
}

.footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: .9rem;
    font-size: .84rem;
}
.footer-contact li > i {
    color: var(--moc-primary);
    font-size: .95rem;
    margin-top: .15rem;
    flex-shrink: 0;
    width: 1rem;
    text-align: center;
}
.footer-contact li > div { color: rgba(255,255,255,.65); line-height: 1.55; }
.footer-contact a { color: rgba(255,255,255,.75); text-decoration: none; }
.footer-contact a:hover { color: var(--moc-silver); text-decoration: none; }
.footer-contact-label {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255,255,255,.4);
}

/* Barra inferior do footer */
.moc-footer-bottom {
    background: #111;
    padding: .75rem 0;
    border-top: 2px solid var(--moc-primary);
}

.moc-footer-bottom,
.moc-footer-bottom a {
    font-size: .77rem;
    color: rgba(255,255,255,.45);
    text-decoration: none;
}
.moc-footer-bottom a:hover { color: rgba(255,255,255,.7); }

.footer-dev { font-style: italic; padding-right: 64px; }
.footer-dev strong { color: rgba(255,255,255,.55); }

/* Espaço reservado pro botão flutuante do WhatsApp (getbutton.io), que fica fixo
   no canto inferior direito e sobrepunha o texto do rodapé nessa mesma faixa. */
@media (max-width: 767.98px) {
    .footer-dev { padding-right: 56px; }
}

/* ============================================================
   vLIBRAS — posiciona widget, NÃO força o painel aberto
   ============================================================ */
[vw] {
    position: fixed !important;
    bottom: 50px !important;   /* acima da barra de rodapé fixo */
    right: 0 !important;
    z-index: 9980 !important;
}

/* ============================================================
   RODAPÉ INFERIOR FIXO
   ============================================================ */
.moc-footer-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9500;
}

/* Espaço para a barra não cobrir o conteúdo / footer principal */
body { padding-bottom: 42px; }

/* ============================================================
   RESPONSIVIDADE
   ============================================================ */
@media (max-width: 767.98px) {
    .cab-brand-name { font-size: 1rem; }
    .logo-img { max-height: 58px !important; }
    .page-hero h1 { font-size: 1.25rem; }
    .moc-footer-main { padding: 2rem 0 1.5rem; }
}

@media (max-width: 991.98px) {
    .header-utils { flex-wrap: nowrap; }
    .moc-navbar .navbar-collapse { padding: .5rem 0; }
}