@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@200..900&display=swap');
@font-face {
  font-family: 'Aileron';
  src: url('/src/fonts/Aileron-Bold.woff2') format('woff2');
  font-weight: 700;
}
@font-face {
  font-family: 'Aileron';
  src: url('/src/fonts/Aileron-Regular.woff2') format('woff2');
  font-weight: 400;
}
@font-face {
  font-family: 'Aileron';
  src: url('/src/fonts/Aileron-Thin.woff2') format('woff2');
  font-weight: 100;
}

:root{
--font-scale: 1.0;
/* BRAND */
--primary: #f21503;
--secondary: #FBEEDE;
--tertiary-1: #094C21;
--tertiary-2: #1D1D1B;


--color-brand-primary-accent: #0c0c0c;
--color-brand-secondary-accent: #0c0c0c;

/* TIPOGRAPHY */
--color-text-primary: #364153;
--color-text-secondary: #99A1AF; 

--color-text-primary-dark: #ffffff;
--color-text-secondary-dark: #99A1AF; 

/* SEMANTICAL */
--success: #4fb427;
--error: #b10000;
--warning: #ffa600;
--info: #0032fc;

/* UTILS */
--bg: #fff;
--gray-1: #f7f8f9;
--gray-2: #6a7282;
--gray-3: #364153;

}


html{
    overflow-x: hidden;
    scroll-behavior: smooth;
    font-size: calc(18px * var(--font-scale));
}
body{
    font-family: 'Aileron', sans-serif;
    top: 0 !important;
}
h1, .text-h1{
    font-size: 2.48rem !important;
    font-weight: 800;
    margin: 0;
    line-height: normal;
}
h2, .text-h2{
    font-size: 2.07rem !important;
    font-weight: 800;
    margin: 0;
    line-height: normal;
}
h3, .text-h3{
    font-size: 1.90rem !important;
    font-weight: 800;
    margin: 0;
    line-height: normal;
}
h4, .text-h4{
    font-size: 1.72rem !important;
    font-weight: 700;
    margin: 0;
    line-height: normal;
}
h5, .text-h5{
    font-size: 1.44rem !important;
    font-weight: 700;
    margin: 0; 
    line-height: normal;
}
h6, .text-h6{
    font-size: 1.2rem !important;
    font-weight: 700;
    margin: 0;
    line-height: normal;
}
p{
    font-size: 1.0rem !important;
    font-weight: 400;
    margin: 0;
    color: var(--color-text-primary);
    line-height: normal;
}
.text-caption{
    font-size: 1rem !important;
    font-weight: 400;
    margin: 0;
    color: var(--color-text-secondary);
    line-height: normal;
}
.text-overline{
    font-size: 0.8rem !important;
    font-weight: 400;
    margin: 0;
    color: var(--color-text-secondary);
    line-height: normal;
}
label{
    font-size: 1rem !important;
    font-weight: 500;
    margin: 0;
    color: var(--color-text-primary);
    line-height: normal;
}
li{
    font-size: 1rem !important;
    font-weight: 400;
    margin: 0;
    color: var(--color-text-primary);
    line-height: normal;
}

/* BLOCK TRADUÇÃO */
.icon-traducao{
    width: 25px;
    border-color: rgb(139,187,25, 0);
}
.icon-traducao:hover{
    border: solid;
    border-width: 2px;
    border-color: var(--color-brand-primary);
    border-radius: 50%;
    transition: border-color 0.5s;
}
.icon-traducao-active{
    border: solid;
    border-width: 2px !important;
    border-color: var(--color-brand-secondary);
    border-radius: 50%;
    transition: border-color 0.5s;
}
#elemento-tradutor{
    display: none !important;
}
.skiptranslate {
    display: none !important;
}
.listaLinguas{
    display: inline-block;
}
/* ---- TRADUTOR NAVBAR -----*/


/* CARDS */

.card{
    height: auto;
    border-width: 2px;
    border-color: var(--gray-1);
    border-radius: 20px;
    z-index: 1;
    transition: transform 0.3s ease;
}
.card:hover{
    transform: scale(1.1);
    transition: transform 0.3s ease; /* Transição suave para o efeito de hover */
}
.card-primary{
    background-color: var(--bg);
    gap: 30px;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 250px;
    padding: 20px;
}
.card-secondary{
    background-color: var(--bg);
    display: flex;
    gap: 20px;
    padding: 30px;
    align-items: center;
}
.badge{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: auto;
}
.badge-primary{
    background-color: var(--color-brand-primary);
}



/* BUTTONS */

.btn{
    font-size: 0.85rem;
    height: 40px;
    padding: 0 20px;
    border-radius: 20px;
    border-width: 2px;
    transition: background-color 0.1s ease, border-color 0.1s ease;
}
.btn:hover{
    cursor: pointer;
}
.btn:active {
    transform: scale(0.95); /* Reduz levemente o tamanho ao clicar */
    transition: transform 0.1s ease; /* Transição rápida para o efeito de clique */
}

.btn-primary{
    background-color: var(--color-brand-primary);
    border-color: var(--color-brand-primary);
    color: white;
}
.btn-primary:hover{
    background-color: var(--color-brand-secondary);
    border-color: var(--color-brand-secondary);
    color: white;
}

.btn-secondary{
    background-color: transparent;
    border-color: var(--color-brand-primary);
    color: var(--color-brand-primary);
}
.btn-secondary:hover{
    background-color: var(--color-brand-primary);
    border-color: var(--color-brand-primary);
    color: var(--color-text-primary-dark);
}

/* PERSONALIZAÇÕES */