/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Grupo Concisa — Tela de Entrada  |  Premium UI (4 empresas)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --c-gestao:    #005645;
    --c-gestao-dk: #002b21;
    --c-gestao-lg: #007a60;
    --c-gestao-ac: #aeca52;

    --c-contab:    #004f9e;
    --c-contab-dk: #002150;
    --c-contab-lg: #1569c4;
    --c-contab-ac: #009ee2;

    --c-clique:    #4e2973;
    --c-clique-dk: #260f3d;
    --c-clique-lg: #7040a8;
    --c-clique-ac: #c492f5;

    --c-money:     #b68111;
    --c-money-dk:  #5c4000;
    --c-money-lg:  #d9a224;
    --c-money-ac:  #f5c84a;

    --ease:     cubic-bezier(0.77, 0, 0.175, 1);
    --dur:      0.65s;
    --dur-fast: 0.35s;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'Montserrat', sans-serif;
    background: #060810;
    animation: pageIn 0.8s ease both;
}

@keyframes pageIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* --- Header ---------------------------------------- */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.6rem 2rem 1.3rem;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(6,8,16,0.85) 0%, transparent 100%);
    animation: headerIn 1.1s var(--ease) 0.3s both;
}

@keyframes headerIn {
    from { opacity: 0; transform: translateY(-14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.site-header__eyebrow {
    font-size: 0.48rem;
    font-weight: 600;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.28);
    margin-bottom: 0.45rem;
}

.site-header__title {
    font-size: 0.88rem;
    font-weight: 300;
    text-align: center;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
}

/* --- Wrapper --------------------------------------- */

.wrapper {
    position: relative;
    display: flex;
    width: 100%;
    height: 100vh;
    z-index: 1;
}

/* --- Panels ---------------------------------------- */

.panel {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
    transition: flex var(--dur) var(--ease);
    animation: panelIn 1s var(--ease) both;
}

.panel:last-child { border-right: none; }

.panel--gestao { animation-delay: 0.00s; }
.panel--contab { animation-delay: 0.08s; }
.panel--clique { animation-delay: 0.16s; }
.panel--money  { animation-delay: 0.24s; }

@keyframes panelIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* --- Color Overlay ---------------------------------- */

.panel__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    transition: opacity var(--dur) var(--ease);
}

.panel--gestao .panel__overlay {
    background: linear-gradient(155deg, var(--c-gestao-dk) 0%, var(--c-gestao) 55%, var(--c-gestao-lg) 100%);
}
.panel--contab .panel__overlay {
    background: linear-gradient(215deg, var(--c-contab-dk) 0%, var(--c-contab) 55%, var(--c-contab-lg) 100%);
}
.panel--clique .panel__overlay {
    background: linear-gradient(155deg, var(--c-clique-dk) 0%, var(--c-clique) 55%, var(--c-clique-lg) 100%);
}
.panel--money .panel__overlay {
    background: linear-gradient(215deg, var(--c-money-dk) 0%, var(--c-money) 55%, var(--c-money-lg) 100%);
}

/* Diagonal texture */
.panel::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        -52deg,
        transparent              0,
        transparent              44px,
        rgba(255,255,255,0.012) 44px,
        rgba(255,255,255,0.012) 45px
    );
}

/* Bottom vignette */
.panel::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    z-index: 3;
    background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, transparent 100%);
    pointer-events: none;
}

/* --- Panel Content ---------------------------------- */

.panel__content {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.7rem;
    padding: 3rem 2.5rem;
    text-align: center;
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
    will-change: transform, opacity;
}

/* --- Hover Expansion -------------------------------- */

.wrapper:has(.panel--gestao:hover) .panel--gestao { flex: 1.55; }
.wrapper:has(.panel--gestao:hover) .panel--contab,
.wrapper:has(.panel--gestao:hover) .panel--clique,
.wrapper:has(.panel--gestao:hover) .panel--money  { flex: 0.82; }

.wrapper:has(.panel--contab:hover) .panel--contab { flex: 1.55; }
.wrapper:has(.panel--contab:hover) .panel--gestao,
.wrapper:has(.panel--contab:hover) .panel--clique,
.wrapper:has(.panel--contab:hover) .panel--money  { flex: 0.82; }

.wrapper:has(.panel--clique:hover) .panel--clique { flex: 1.55; }
.wrapper:has(.panel--clique:hover) .panel--gestao,
.wrapper:has(.panel--clique:hover) .panel--contab,
.wrapper:has(.panel--clique:hover) .panel--money  { flex: 0.82; }

.wrapper:has(.panel--money:hover) .panel--money  { flex: 1.55; }
.wrapper:has(.panel--money:hover) .panel--gestao,
.wrapper:has(.panel--money:hover) .panel--contab,
.wrapper:has(.panel--money:hover) .panel--clique { flex: 0.82; }

.wrapper:has(.panel:hover) .panel:not(:hover) .panel__content { opacity: 0.25; }

/* --- Touch is-active -------------------------------- */

.wrapper:has(.panel--gestao.is-active) .panel--gestao { flex: 1.55; }
.wrapper:has(.panel--gestao.is-active) .panel--contab,
.wrapper:has(.panel--gestao.is-active) .panel--clique,
.wrapper:has(.panel--gestao.is-active) .panel--money  { flex: 0.82; }

.wrapper:has(.panel--contab.is-active) .panel--contab { flex: 1.55; }
.wrapper:has(.panel--contab.is-active) .panel--gestao,
.wrapper:has(.panel--contab.is-active) .panel--clique,
.wrapper:has(.panel--contab.is-active) .panel--money  { flex: 0.82; }

.wrapper:has(.panel--clique.is-active) .panel--clique { flex: 1.55; }
.wrapper:has(.panel--clique.is-active) .panel--gestao,
.wrapper:has(.panel--clique.is-active) .panel--contab,
.wrapper:has(.panel--clique.is-active) .panel--money  { flex: 0.82; }

.wrapper:has(.panel--money.is-active) .panel--money  { flex: 1.55; }
.wrapper:has(.panel--money.is-active) .panel--gestao,
.wrapper:has(.panel--money.is-active) .panel--contab,
.wrapper:has(.panel--money.is-active) .panel--clique { flex: 0.82; }

.wrapper:has(.panel.is-active) .panel:not(.is-active) .panel__content { opacity: 0.25; }

/* --- Logo ------------------------------------------- */

.panel__logo {
    display: block;
    width: 185px;
    max-width: 74%;
    filter: brightness(0) invert(1);
    transition: filter var(--dur-fast) ease, transform var(--dur) var(--ease);
}

.panel:hover .panel__logo,
.panel.is-active .panel__logo {
    transform: scale(1.05) translateY(-3px);
}

.panel--gestao:hover .panel__logo,
.panel--gestao.is-active .panel__logo {
    filter: brightness(0) invert(1) drop-shadow(0 6px 32px rgba(174,202,82,0.55));
}
.panel--contab:hover .panel__logo,
.panel--contab.is-active .panel__logo {
    filter: brightness(0) invert(1) drop-shadow(0 6px 32px rgba(0,158,226,0.55));
}
.panel--clique:hover .panel__logo,
.panel--clique.is-active .panel__logo {
    filter: brightness(0) invert(1) drop-shadow(0 6px 32px rgba(196,146,245,0.55));
}
.panel--money:hover .panel__logo,
.panel--money.is-active .panel__logo {
    filter: brightness(0) invert(1) drop-shadow(0 6px 32px rgba(245,200,74,0.55));
}

/* --- Tagline ---------------------------------------- */

.panel__tagline {
    font-size: 0.63rem;
    font-weight: 300;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    line-height: 2.2;
    color: rgba(255,255,255,0.42);
    transition: color var(--dur-fast) ease;
}

.panel__tagline::before {
    content: '';
    display: block;
    width: 28px;
    height: 1px;
    margin: 0 auto 1.1rem;
    background: rgba(255,255,255,0.16);
    transition: width var(--dur) var(--ease), background var(--dur-fast) ease;
}

.panel:hover .panel__tagline,
.panel.is-active .panel__tagline {
    color: rgba(255,255,255,0.88);
}

.panel--gestao:hover .panel__tagline::before,
.panel--gestao.is-active .panel__tagline::before { width: 50px; background: var(--c-gestao-ac); }

.panel--contab:hover .panel__tagline::before,
.panel--contab.is-active .panel__tagline::before { width: 50px; background: var(--c-contab-ac); }

.panel--clique:hover .panel__tagline::before,
.panel--clique.is-active .panel__tagline::before { width: 50px; background: var(--c-clique-ac); }

.panel--money:hover .panel__tagline::before,
.panel--money.is-active .panel__tagline::before  { width: 50px; background: var(--c-money-ac); }

/* --- CTA Button ------------------------------------- */

.panel__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.82rem 2rem;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.78);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    border-radius: 2px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all var(--dur-fast) ease;
    opacity: 0;
    transform: translateY(14px);
}

.panel:hover .panel__cta,
.panel.is-active .panel__cta {
    opacity: 1;
    transform: translateY(0);
}

.panel--gestao:hover .panel__cta,
.panel--gestao.is-active .panel__cta {
    border-color: var(--c-gestao-ac);
    color: var(--c-gestao-ac);
    background: rgba(174,202,82,0.08);
    box-shadow: 0 0 28px rgba(174,202,82,0.15), inset 0 0 10px rgba(174,202,82,0.05);
}
.panel--contab:hover .panel__cta,
.panel--contab.is-active .panel__cta {
    border-color: var(--c-contab-ac);
    color: var(--c-contab-ac);
    background: rgba(0,158,226,0.08);
    box-shadow: 0 0 28px rgba(0,158,226,0.15), inset 0 0 10px rgba(0,158,226,0.05);
}
.panel--clique:hover .panel__cta,
.panel--clique.is-active .panel__cta {
    border-color: var(--c-clique-ac);
    color: var(--c-clique-ac);
    background: rgba(196,146,245,0.08);
    box-shadow: 0 0 28px rgba(196,146,245,0.15), inset 0 0 10px rgba(196,146,245,0.05);
}
.panel--money:hover .panel__cta,
.panel--money.is-active .panel__cta {
    border-color: var(--c-money-ac);
    color: var(--c-money-ac);
    background: rgba(245,200,74,0.08);
    box-shadow: 0 0 28px rgba(245,200,74,0.15), inset 0 0 10px rgba(245,200,74,0.05);
}

.panel__cta svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    transition: transform var(--dur-fast) cubic-bezier(0.34, 1.56, 0.64, 1);
}

.panel:hover .panel__cta svg,
.panel.is-active .panel__cta svg {
    transform: translateX(5px);
}

/* --- URL label -------------------------------------- */

.panel__url {
    position: absolute;
    bottom: 1.8rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    font-size: 0.46rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    color: rgba(255,255,255,0.14);
    text-transform: lowercase;
    white-space: nowrap;
    transition: color var(--dur-fast) ease;
    user-select: none;
}

.panel:hover .panel__url,
.panel.is-active .panel__url {
    color: rgba(255,255,255,0.38);
}

/* --- Responsive ------------------------------------- */

@media (pointer: coarse) {
    .panel__cta {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 900px) {
    html, body {
        overflow-x: hidden;
        overflow-y: auto;
        height: auto;
    }

    /* Header sai do fixed e entra no fluxo */
    .site-header {
        position: relative;
        background: rgba(6,8,16,0.95);
        padding: 1.2rem 1.5rem 1rem;
        pointer-events: auto;
        animation: none;
        opacity: 1;
        transform: none;
    }

    .site-header__title { font-size: 0.7rem; }

    .wrapper {
        flex-direction: column;
        height: auto;
    }

    .panel {
        flex: none !important;
        width: 100%;
        height: 220px;
        border-right: none;
        border-bottom: none;
        /* divisor absolutamente posicionado, não ocupa espaço */
        box-shadow: inset 0 -1px 0 rgba(255,255,255,0.12);
        transition: none;
    }

    .panel:last-child { box-shadow: none; }

    .wrapper:has(.panel:hover) .panel .panel__content,
    .wrapper:has(.panel.is-active) .panel .panel__content {
        opacity: 1 !important;
    }

    .panel__logo    { width: 140px; }
    .panel__content { padding: 1.5rem 2rem; gap: 1rem; }
    .panel__tagline { display: none; }
    .panel__url     { bottom: 0.9rem; }
}

@media (max-width: 480px) {
    .panel { height: 190px; }
    .panel__logo    { width: 115px; }
    .panel__content { padding: 1.2rem 1.5rem; gap: 0.85rem; }
}