/* Botões */
button {
    background: none;
    border: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

/* Base */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 4.4rem;
    padding: 0 2.4rem;
    border-radius: var(--radius-1xl);
    border: 0;
    font-size: var(--size-base);
    font-family: var(--font-body);
    font-weight: 500;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}

/* ícone com leve animação */
.btn .lucide {
  transition: transform .4s ease;
}

/* Tamanhos */
.btn-xs { 
    height: 3.8rem;
    padding: 0 1.6rem;
    font-size: var(--size-sm);
}

.btn-sm { 
    height: 4rem;
    padding: 0 2rem;
    font-size: var(--size-sm);
    border-radius: var(--radius-lg);
    box-shadow: none!important;
}

.btn-md { 
    height: 4.8rem;
    padding: 0 3.2rem;
}

.btn-lg { 
    height: 5.6rem;
    padding: 0 3.2rem;
}

/* Variantes */
.btn-primario {
    background: var(--cor-marca-primaria);
    color: var(--cor-texto-branco);
    /* sombra base bem sutil */
    box-shadow: 0 5px 6px rgba(35, 68, 162, 0.22);
}

.btn-primario:hover { 
    background: var(--cor-primaria-2); 
    transform: translateY(-2px);
}

.btn-primario:hover .lucide {
  transform: translateX(6px);
}

.btn-chip {
    border-radius: var(--radius-xl);
}

/* TAB */
.btn-tab {
    width: 100%;
    border-radius: var(--radius-xl);
    text-transform: uppercase;
    font-size: var(--size-2xs);
    font-weight: 500;
}

@media (min-width: 768px) {
    .btn-tab {
        font-size: var(--size-xs);
    }
}

.btn-tab.active {
    background-color: var(--cor-primaria-6);
    border: 1.5px solid var(--cor-fundo-branco);
    color: var(--cor-marca-primaria);
}

.btn-tab:not(.active) {
    background-color: transparent;
    color: var(--cor-texto-secundario);
}
/* FIM Botões */

/* Anima botões independentes */

.anima-btn {
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.anima-btn:hover {
    transform: translateY(-2px);
}

/* FIM Anima botões independentes */

/* Ícones fundo circular */
.icon-circ {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xl);
    width: 4.4rem;
    height: 4.4rem;
    color: var(--cor-icone);
}

.icon-circ-azul {
    background-color: var(--cor-primaria-6);
}

.icon-circ-azul .lucide {
    width: var(--icon-md);
    color: var(--cor-marca-primaria);
}

.icon-especial {
    width: 4.8rem;
    height: 4.8rem;
    border: 1px solid var(--cor-primaria-6);
    color: var(--cor-secundaria-3);
    background: #E6FAF0;
    background: linear-gradient(0deg, rgba(219, 234, 254, 1) 0%, rgba(230, 250, 240, 1) 100%);
}

.icon-especial .lucide {
    width: var(--icon-md);
}

.icon-circ-sombra {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: var(--radius-xl);
    background-color: var(--cor-primaria-5);
    padding: 2.8px;
}

.icon-circ-sombra span {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-circ-sombra .lucide {
    width: var(--icon-2xl);
    color: var(--cor-fundo-azul);
    stroke-width: 2.5px;
}

/* Badge */
.badge {
    height: 4rem;
    display: inline-flex;
    justify-self: start; /* Ocupa só seu conteúdo */
    padding: 0 1.6rem;
    margin: 0 auto;
    gap: 0.8rem;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--cor-secundaria-3);
    font-size: var(--size-sm);
    border: 1px solid var(--cor-borda);
    border-radius: 8px 16px 8px 16px;
    box-shadow: 0 2px 4px rgba(219, 234, 254, 0.85);
}
/* FIM Badge */

/* Bordas */
.borda-color {
    border: 1px solid transparent;
    background: linear-gradient(var(--cor-fundo), var(--cor-fundo)) padding-box, /* fundo sólido */
                linear-gradient(135deg, #4796FF 0%, #8EF0CF 50%, #7EB4FB 100%) border-box; /* borda gradiente */
}
/* FIM Bordas */

/* Linha com gradiente para sumir */
@media (min-width: 768px) {
    /* linha gradiente */
    .linha::before,
    .linha::after {
        content: "";
        position: absolute;
        top: 0; bottom: 0;
        width: 1px;             
    }

    /* borda esquerda */
    .linha::before {
        left: 0;
        background: linear-gradient( to bottom, var(--cor-borda) 0%, var(--cor-fundo) 100%);
    }

    /* borda direita */
    .linha::after {
        right: 0;
        background: linear-gradient(to bottom, var(--cor-borda) 0%, var(--cor-fundo) 100%);
    }
}
/* FIM Linha com gradiente para sumir */

/* Divisor de conteúdo */
.divisor-container {
    padding: 4.8rem 0;
}

.divisor {
    position: relative;
    width: 100%;
    max-width: 54rem;
    display: block;
    margin: 0 auto;
}

.divisor::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(
        to right,
        rgba(226, 232, 240, 0) 0%,
        rgba(226, 232, 240, 1) 50%,
        rgba(226, 232, 240, 0) 100%
    );
}
/* FIM Divisor de conteúdo */

/* Card colorido */
.card-colorido {
    border-radius: var(--radius-lg);
    padding-bottom: 2.4rem;
    overflow: hidden;
    border: 1px solid transparent; /* necessário */
    background: 
    linear-gradient(var(--cor-fundo)) padding-box, /* fundo do card */
    linear-gradient(to bottom, #DBEAFE 0%, #E2E8F0 100%) border-box; /* gradiente da borda */
}

.card-colorido div {
    padding: 2.4rem 2rem;
    margin-bottom: 2rem;
    background: linear-gradient(45deg, #DBEAFE 0%, #DBEAFE 50%, #E6FAF0 100% );
}

.card-colorido div span {
    display: grid;
    place-items: center;
    width: 5.6rem;
    height: 5.6rem;
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, var(--cor-primaria-6) 0%, var(--cor-primaria-5) 100%);
}

.card-colorido span .lucide {
    width: var(--icon-lg);
    height: var(--icon-lg);
    color: var(--cor-icone);
    stroke-width: 1px;
}

.card-colorido article {
    padding: 0 2rem;
}

.card-colorido article h3 {
    font-size: var(--size-lg);
    margin-bottom: 0.8rem;
}

.card-colorido article p {
    color: var(--cor-texto-secundario);
    font-size: var(--size-sm);
}
/* FIM Card colorido */