/* ===========================================================================
   /area-do-cliente IGUAL AO SITE ARCIFI: selo verde + título azul centralizado
   e 3 cartões brancos com ilustração; ao passar o mouse o "ACESSAR AGORA" fica
   verde e aparece o fio verde na base do cartão.
   =========================================================================== */
body { background: var(--cor-site-3); }

.area-acesso { padding: 90px 15px 120px; }

.area-acesso__interno { max-width: 960px; margin-inline: auto; text-align: center; }

.area-acesso__selo {
    display: inline-block;
    margin-bottom: 14px;
    padding: 2px 20px;
    border-radius: 30px;
    background: color-mix(in srgb, var(--cor-site-1) 80%, #fff);
    font-size: 14px;
    font-weight: 600;
    color: var(--cor-branco);
    text-transform: uppercase;
}

.area-acesso__titulo { margin: 0 0 50px; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.25rem); font-weight: 500; color: var(--cor-site-2); }

.area-acesso__grade {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    align-items: start;
}

.area-acesso__grade--1 { grid-template-columns: minmax(0, 320px); justify-content: center; }
.area-acesso__grade--2 { grid-template-columns: repeat(2, minmax(0, 320px)); justify-content: center; }

.area-acesso__cartao {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px 36px;
    border-radius: 20px;
    background: var(--cor-branco);
    box-shadow: 0 5px 20px 0 rgba(23, 44, 82, .1);
    overflow: hidden;
    transition: transform .3s;
}

.area-acesso__cartao::after {
    content: "";
    position: absolute;
    left: 30px;
    right: 30px;
    bottom: 0;
    height: 2px;
    background: var(--cor-site-1);
    opacity: 0;
    transition: opacity .3s;
}

.area-acesso__cartao:hover { transform: translateY(-4px); }
.area-acesso__cartao:hover::after { opacity: 1; }

.area-acesso__imagem { display: block; width: auto; max-width: 100%; height: 180px; margin-bottom: 30px; object-fit: contain; }

.area-acesso__cartao-titulo { margin: 0 0 30px; font-size: 20px; font-weight: 500; color: var(--cor-site-2); }

.area-acesso__botao {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    color: #c4c4c4;
    transition: color .3s;
}

.area-acesso__botao svg { width: 22px; height: 22px; fill: var(--cor-site-1); }
.area-acesso__cartao:hover .area-acesso__botao { color: var(--cor-site-1); }

.area-acesso__vazio { margin: 0; font-size: 15px; color: var(--cor-site-4); }

@media (max-width: 991px) {
    .area-acesso__grade,
    .area-acesso__grade--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575px) {
    .area-acesso { padding: 60px 15px 80px; }
    .area-acesso__grade,
    .area-acesso__grade--1,
    .area-acesso__grade--2 { grid-template-columns: minmax(0, 1fr); }
    .area-acesso__titulo { font-size: 22px; margin-bottom: 36px; }
}