@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
html {
  scroll-behavior: smooth;
  font-size: clamp(var(--base-font-size-mobile), 2vw, var(--base-font-size-desktop)) !important;

}

/* Primitives: Typography - Mode 1 */
:root {

    --base-font-size-desktop: 16px;
    --base-font-size-mobile: 14px;

    --font-family-main: "Poppins", sans-serif;
    --font-weight-regular: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --letter-spacing-default: 0;

    --line-height-display: 120%;
    --line-height-heading: 120%;
    --line-height-body: 150%;
    --line-height-caption: 120%;

    --font-size-display-md: 4rem;

    --font-size-heading-xl: 3rem;
    --font-size-heading-lg: 2.5rem;
    --font-size-heading-md: 2rem;
    --font-size-heading-sm: 1.5rem;


    --font-size-body-lg: 1.25rem;
    --font-size-body-md: 1rem;
    --font-size-body-sm: 0.875rem;


    --font-size-caption-md: 0.875rem;
    --font-size-caption-sm: 0.75rem;


/*
  --Font-Family-main: Poppins;
  --Font-weight-regular: Regular;
  --Font-weight-bold: Bold;
  --Font-weight-semibold: SemiBold;
  --Line-height-77: 77px;
  --Line-height-58: 58px;
  --Line-height-48: 48px;
  --Line-height-38: 38px;
  --Line-height-29: 29px;
  --Line-height-30: 30px;
  --Line-height-24: 24px;
  --Line-height-22: 22px;
  --Line-height-21: 21px;
  --Line-height-17: 17px;
  --Line-height-12: 12px;
  --Line-height-14: 14px;
  --Font-size-64: 64px;
  --Font-size-48: 48px;
  --Font-size-40: 40px;
  --Font-size-32: 32px;
  --Font-size-24: 24px;
  --Font-size-20: 20px;
  --Font-size-18: 18px;
  --Font-size-16: 16px;
  --Font-size-14: 14px;
  --Font-size-12: 12px;
  --Font-size-10: 10px;
  --Letter-spacing-0: 0px;

  --Heading-xl-bold-Font-weight: var(--Font-weight-bold);
  --Heading-xl-bold-Font-size: var(--Font-size-64);
  --Heading-xl-bold-Line-height: var(--Line-height-77);
  --Heading-xl-bold-Letter-spacing: var(--Letter-spacing-0); 
  --Heading-lg-bold-Font-weight: var(--Font-weight-bold);
  --Heading-lg-bold-Font-size: var(--Font-size-48);
  --Heading-lg-bold-Line-height: var(--Line-height-58);
  --Heading-lg-bold-Letter-spacing: var(--Letter-spacing-0);
  --Heading-md-bold-Font-weight: var(--Font-weight-bold);
  --Heading-md-bold-Font-size: var(--Font-size-32);
  --Heading-md-bold-Line-height: var(--Line-height-38);
  --Heading-md-bold-Letter-spacing: var(--Letter-spacing-0);
  --Heading-sm-bold-Font-weight: var(--Font-weight-bold);
  --Heading-sm-bold-Font-size: var(--Font-size-24);
  --Heading-sm-bold-Line-height: var(--Line-height-29);
  --Heading-sm-bold-Letter-spacing: var(--Letter-spacing-0);
  --Body-lg-regular-Font-weight: var(--Font-weight-regular);
  --Body-lg-regular-Font-size: var(--Font-size-20);
  --Body-lg-regular-Line-height: var(--Line-height-30);
  --Body-lg-regular-Letter-spacing: var(--Letter-spacing-0);
  --Body-md-regular-Font-weight: var(--Font-weight-regular);
  --Body-md-regular-Font-size: var(--Font-size-16);
  --Body-md-regular-Line-height: var(--Line-height-24);
  --Body-md-regular-Letter-spacing: var(--Letter-spacing-0);
  --Caption-lg-bold-Font-weight: var(--Font-weight-bold);
  --Caption-lg-bold-Font-size: var(--Font-size-14);
  --Caption-lg-bold-Line-height: var(--Line-height-17);
  --Caption-lg-bold-Letter-spacing: var(--Letter-spacing-0);
  --Caption-sm-bold-Font-weight: var(--Font-weight-bold);
  --Caption-sm-bold-Font-size: var(--Font-size-12);
  --Caption-sm-bold-Line-height: var(--Line-height-14);
  --Caption-sm-bold-Letter-spacing: var(--Letter-spacing-0);
  --Body-sm-regular-Font-weight: var(--Font-weight-regular);
  --Body-sm-regular-Font-size: var(--Font-size-14);
  --Body-sm-regular-Line-height: var(--Line-height-21);
  --Body-sm-regular-Letter-spacing: var(--Letter-spacing-0);

*/
}
/*------------------------------ TYPOGRAPHY -----------------------*/
 

.heading-xl {
    font-family: var(--font-family-main);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-heading-xl);
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-default);
}

.heading-lg {
    font-family: var(--font-family-main);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-heading-lg);
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-default);
}

.heading-md {
    font-family: var(--font-family-main);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-heading-md);
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-default);
}

.heading-sm {
    font-family: var(--font-family-main);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-heading-sm);
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-default);
}

.body-lg {
    font-family: var(--font-family-main);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-body-lg);
    line-height: var(--line-height-body);
    letter-spacing: var(--letter-spacing-default);
}

.body-md {
    font-family: var(--font-family-main);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-body-md);
    line-height: var(--line-height-body);
    letter-spacing: var(--letter-spacing-default);
}

.body-sm {
    font-family: var(--font-family-main);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-body-sm);
    line-height: var(--line-height-body);
    letter-spacing: var(--letter-spacing-default);
}


.caption-md {
    font-family: var(--font-family-main);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-caption-md);
    line-height: var(--line-height-caption);
    letter-spacing: var(--letter-spacing-default);
    text-transform: uppercase;
}

.caption-sm {
    font-family: var(--font-family-main);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-caption-sm);
    line-height: var(--line-height-caption);
    letter-spacing: var(--letter-spacing-default);
    text-transform: uppercase;
}





/*------------------------------GENERAL-----------------------*/
.header {
  display: inline-flex;
  padding: 18px 150px;
  justify-content: center;
  align-items: center;
  background: #444E7D;
  width: 100%;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.acnhor-link {
  color: #FFF;
  font-family: var(--Font-Family-main, Poppins);
  font-size: var(--Body-md-regular-Font-size, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--Body-md-regular-Line-height, 24px);
  letter-spacing: var(--Body-md-regular-Letter-spacing, 0);
  text-decoration: none;
  transition: color 0.2s ease;
}

.acnhor-link:hover {
  color: rgba(255, 255, 255, 0.8);
}

h1.header-title {
  color: #FFF;
  margin:0px !important;
}

 
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 28px;
  color: #FFF;
  cursor: pointer;
  width: 32px;
  height: 32px;
  justify-content: center;
  align-items: center;
}

 
@media (max-width: 768px) {
  .header {
    padding: 18px 20px;
  }

  .header-nav {
    display: none;
    flex-direction: column;
    gap: 16px;
    background: #444E7D;
    position: absolute;
    top: 100px;
    right: 0;
    padding: 20px;
    width: 100%;
  }

  .header-nav.active {
    display: flex;
  }

  .menu-toggle {
    display: flex;
  }
}


.subsection.dark p.paragraph{
  color: #FFF;
}

.subsection.dark h2{
  color: #FFF;
}
.subsection{
  padding: 60px 0px;
  background: #FAFAFA;
}
.subsection.dark{
  background: #444E7D;
}
.acnhor-link {
  color: #FFF;
  font-family: var(--Font-Family-main, Poppins);
  font-size: var(--Body-md-regular-Font-size, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--Body-md-regular-Line-height, 24px);
  letter-spacing: var(--Body-md-regular-Letter-spacing, 0);
  text-decoration: none;
  transition: color 0.2s ease;
}

.acnhor-link:hover {
  color: rgba(255, 255, 255, 0.8); 
}
.link-card{
  border-radius: 16px;
  border: 1px solid rgba(75, 75, 75, 0.10);
  background: #FFF;
  box-shadow: 2px 2px 16px 0 rgba(75, 75, 75, 0.10);
  display: flex;
  width: 100%;
  padding: 16px 24px;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  transition: all 0.25s ease;
}
.link-card:hover{
transform: translateY(-2px);
  box-shadow: 4px 6px 20px rgba(75, 75, 75, 0.15);
  text-decoration: none;
}
.link-card-title{
  color: #444E7D;
  font-weight: bold;
  margin: 0 !important;
}

.tabs-container{
  display: flex;
  padding: 8px;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  border-radius: 24px;
  border: 1px solid rgba(75, 75, 75, 0.20);
  background: #FFF;
}
.tab-button {
  outline: none;
  display: flex;
  padding: 10px 22px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex: 1 0 0;
  border-radius: 16px;
  border: 1px solid rgba(75, 75, 75, 0.20);
  background: #FFF;
  box-shadow: 0 4px 24px 0 rgba(75, 75, 75, 0.10);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  color: #4B4B4B;

  /* Caption/lg */
  font-family: var(--Font-Family-main, Poppins);
  font-size: clamp(
    var(--Caption-sm-bold-Font-size, 12px),
    2vw + 1rem,
    var(--Caption-lg-bold-Font-size, 14px)
  );

  font-style: normal;
  font-weight: 700;
  line-height: var(--Caption-lg-bold-Line-height, 17px); /* 121.429% */
  letter-spacing: var(--Caption-lg-bold-Letter-spacing, 0);
  text-transform: uppercase;
  cursor: pointer;
}

.tab-button:hover {
  border-color: rgba(75, 75, 75, 0.6);
  box-shadow: 0 6px 18px rgba(75, 75, 75, 0.15);
}
.tab-button.active{
  border-radius: 16px;
  border: 1px solid rgba(75, 75, 75, 0.20);
  background: #444E7D;
  box-shadow: 0 4px 24px 0 rgba(75, 75, 75, 0.10);
  color: #FFF;
}
button:focus {
  outline: none;
}

.tabs-content{
  display: flex;
  padding: 32px;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  border-radius: 24px;
  border: 1px solid rgba(75, 75, 75, 0.20);
  background: #FFF;????????
}
 
.description-small {
  color: #FFF;
  font-family: var(--Font-Family-main, Poppins);
  font-size: var(--Body-md-regular-Font-size, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--Body-md-regular-Line-height, 24px); /* 150% */
  letter-spacing: var(--Body-md-regular-Letter-spacing, 0);
}

.description-small a {
  color: #FFF;
  font-family: var(--Font-Family-main, Poppins);
  font-size: var(--Body-md-regular-Font-size, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--Body-md-regular-Line-height, 24px);
  letter-spacing: var(--Body-md-regular-Letter-spacing, 0);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}
 
button.accordion {
  border: none;
  background: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding: 16px 16px 24px 16px;
  color: #FFF;
  font-family: var(--Font-Family-main, Poppins);
  font-size: var(--Body-lg-regular-Font-size, 20px);
  font-weight: 400;
  line-height: var(--Body-lg-regular-Line-height, 30px);
  text-align: start;
  border-bottom: 1px solid rgba(255, 255, 255, 0.50);
  cursor: pointer;
}

 
.panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0 16px;
}
.panel p {
  color: #B7B7B7;
  font-family: var(--Font-Family-main, Poppins);
  font-size: var(--Body-md-regular-Font-size, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--Body-md-regular-Line-height, 24px);
  letter-spacing: var(--Body-md-regular-Letter-spacing, 0);
}
 
.accordion.active + .panel {
  max-height: 500px;  
  padding: 16px;
}

.accordion .icon {
  transition: transform 0.5s ease;
}

.accordion.active .icon {
  transform: rotate(180deg);
}

.box{
  border-radius: 16px;
  border: 1px solid rgba(75, 75, 75, 0.10);
  background: #FFF;
  padding: 24px;
 
}
.link-doc{
  display: flex;
  padding: 16px 24px;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  align-self: stretch;
  border-radius: 16px;
  border: 1px solid rgba(75, 75, 75, 0.10);
  background: #FFF;
  box-shadow: 2px 2px 16px 0 rgba(75, 75, 75, 0.10);
  transition: all 0.3s ease; /* animação suave */
    
}
.link-doc:hover {
  transform: translateY(-4px); 
  box-shadow: 4px 4px 24px 0 rgba(75, 75, 75, 0.15);  
  border-color: rgba(75, 75, 75, 0.20);  
  text-decoration:none;
}

.link-doc-title{
  color: #4B4B4B;
  margin:0;
}
.link-doc-description{
  color: #A1A0A0;
 
  margin:0;
}

.box-title{
  color: #4B4B4B;

  /* Heading/sm */
  font-family: var(--Font-Family-main, Poppins);
  font-size: var(--Heading-sm-bold-Font-size, 24px);
  font-style: normal;
  font-weight: 700;
  line-height: var(--Heading-sm-bold-Line-height, 29px); /* 120.833% */
  letter-spacing: var(--Heading-sm-bold-Letter-spacing, 0);
}

.small-box{
  display: flex;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  border-radius: 16px;
  border: 1px solid rgba(75, 75, 75, 0.10);
}
.small-box-title{
  margin: 0;
  color: #4B4B4B;
  text-transform: uppercase;
}
.small-box-info-title{
  margin: 0 !important;
  color: #757575; 
  text-transform: uppercase;
}

.tab-paragraph{
  color: #4B4B4B;
}
.subtitle{
  color: #4B4B4B;
  margin:0;
}

.check-content{
  color: #4B4B4B;
  font-family: var(--Font-Family-main, Poppins);
  font-size: var(--Body-sm-regular-Font-size, 14px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--Body-sm-regular-Line-height, 21px);
  letter-spacing: var(--Body-sm-regular-Letter-spacing, 0);
  align-items: center;
  text-wrap: nowrap;
}
 
.subtitle-complement{
  color: #757575;
  font-family: var(--Font-Family-main, Poppins);
  font-size: var(--Caption-sm-bold-Font-size, 12px);
  font-style: normal;
  font-weight: 700;
  line-height: var(--Caption-sm-bold-Line-height, 14px);
  letter-spacing: var(--Caption-sm-bold-Letter-spacing, 0);
  text-transform: uppercase;
}
.small-box-info{
  color: #4B4B4B;
  margin:0;
}
 
 
/*--------------------------------utils-----------------------------*/
.flex{
  display: flex;
}
.flex-col{
  flex-direction: column;
}
.gap-4{
  gap:4px;
}
.gap-8{
  gap:8px;
}
.gap-16{
  gap: 16px;
}
.gap-32{
  gap: 32px;
}
.gap-48{
  gap: 48px;
}
.gap-64{
  gap:64px;
}
.icon {
  width: 24px;        
  height: 24px;       
  flex-shrink: 0;    
}
.hidden{
  display:none;
}
.gap-24{
  gap: 24px;
}
.flex-1{
  flex:1;
}
.flex-2{
  flex:2;
}
.space-between{
  justify-content: space-between;
}
.w-full{
  width: 100%;
}
.mt-8{
  margin-top:8px;
}
/*==================MD=================*/
@media (min-width: 768px) and (max-width: 1024px) {
   .md-col{
     flex-direction: column;
   }
   .md-mt-40{
     margin-top:40px;
   }
   .md-mt-32{
     margin-top:32px;
   }
}

/*==================SM=================*/
@media (max-width: 767px) {
 .tabs-container{
   flex-direction: column;
 }
 .tab-button{
   width: 100%;
 }
 .tabs-content{
  padding: 32px 24px;
 }
 .small-box{
  margin-top:32px;
  padding: 24px;
 
 }
 .link-doc{
   padding: 16px;
 }
 
 
 /*---------utils-------*/
 .sm-col{
     flex-direction: column;
 }
 .sm-mt-4{
   margin-top: 16px;  
 }
 .sm-mt-40{
     margin-top:40px;
 }
 .md-mt-32{
     margin-top:32px;
 }
}