/* Light mode */
/*## ###############################################################################
## Desktop ( min: 993, max: 2560 )
## ###############################################################################*/


:root {
    --family-title:'Poppins'; 
    --family-body:'Open';

    --Background-Background-1: #F5F2EB;
    --Background-Background-2: #FFFFFF;
    
    --Background-Background-1-Dark: #0A0E12;
    --Background-Background-2-Dark: #1A2433;

    --GradientLightToDark: linear-gradient(0deg, var(--Background-Background-1, #F5F2EB) 0%, var(--Background-Background-2, #FFF) 100%);
    --GradientDarkToLight: linear-gradient(180deg, var(--Background-Background-1, #F5F2EB) 0%, var(--Background-Background-2, #FFF) 100%);
    

    --CTA-Primary-Active: #0F6FF5;
    --CTA-Primary-Hover: #0853BB;
    --CTA-Primary-Focused-Fill: #0F6FF5;
    --CTA-Primary-Focused-stroke: #05377D;
    --CTA-Primary-Focused-Pressed: #4B93F8;
    --CTA-Primary-Focused-Inactive: #DFDFDF;


    --CTA-Secondary-Active: #D8E8FF;
    --CTA-Secondary-Active-Text: #0853BB;    
    --CTA-Secondary-Hover: #87B7FA;
    --CTA-Secondary-Focused-Fill: #FFFFFF;
    --CTA-Secondary-Focused-stroke: #05377D;
    --CTA-Secondary-Pressed: #D8E8FF;
    --CTA-Secondary-Inactive: #414141;


    --CTA-Tertiary-Active: #D8E8FF;
    --CTA-Tertiary-Active-Text: #0853BB;    
    --CTA-Tertiary-Hover: #87B7FA;
    --CTA-Tertiary-Focused-Fill: #FFFFFF;
    --CTA-Tertiary-Focused-stroke: #05377D;
    --CTA-Tertiary-Pressed: #D8E8FF;
    --CTA-Tertiary-Inactive: #414141;


    --Text-Title: #0A0E12;
    --Text-Content: #0A0E12;
    --Text-CTA-Primary: #FFFFFF;
    --Text-CTA-Inactive-Primary: #414141;
    --Text-CTA-Secondary: #0853BB;
    --Text-CTA-Tertiary: #0853BB;
    --Text-CTA-Inactive-Secondary: #DFDFDF;    


    --Generico-Arena-500: #314566;
    --Generico-Arena-700: #51709F;
    --Generico-Azul-Grandeza-500:#FFFFFF;
    --Generico-Blanco-Disabled:#DFDFDF;
    --Generico-Blanco-600:#414141;
    --Generico-Blanco-500:#0A0E12;
    --Generico-Azul-Acompañamiento-400:#F5F2EB;
    --Generico-Azul-Acompañamiento-300:#FAF9F5;
    --Generico-Azul-Acompañamiento-200:#CDBE9B;
    --Generico-Blanco-800:#808080;

    --Contents-Arena-702:#314566;
    

    --spacing-1:4px;
    --spacing-2:6px;
    --spacing-3:8px;
    --spacing-4:12px;
    --spacing-5:16px;
    --spacing-6:24px;
    --spacing-7:32px;
    --spacing-8:40px;
    --spacing-9:48px;
    --spacing-10:56px;
    --spacing-11:64px;
    --spacing-12:72px;
    --spacing-13:80px;

    --border-radius-xxs:8px;
    --border-radius-xs:16px;
    --border-radius-s:24px;
    --border-radius-m:32px;
    --border-radius-l:80px;
    --border-radius-xl:160px;
    --border-radius-xxl:200px;
    --border-radius-xxl:240px;

    --size-h1: 72px;
    --size-h2: 56px;
    --size-h3: 48px;
    --size-h4: 32px;    
    --size-h5: 24px;
    --size-h6: 20px;
    --size-pl: 18px;
    --size-p: 16px;
    --size-ps: 14px;
    --size-link: 16px;
    
    --line-height-h1: 80px;
    --line-height-h2: 64px;
    --line-height-h3: 56px;
    --line-height-h4: 40px;
    --line-height-h5: 32px;
    --line-height-h6: 28px;
    --line-height-pl: 24px;
    --line-height-p: 22px;
    --line-height-ps: 22px;
    --line-height-link: 24px;
}

.fullBoxWrapper {
  width: 100%;
  margin: 0 auto;
  clear: both;
  position: relative;
}

.fullBox {
  width: 90%;
  max-width: 960px;
  margin: 0 auto;
  clear: both;
  position: relative;
}

.fullBox1000 {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
  clear: both;
  position: relative;
}

.fullBox1200 {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  clear: both;
  position: relative;
}


.fullBox1440 {
  width: 90%;
  max-width: 1440px;
  margin: 0 auto;
  clear: both;
  position: relative;
}

body {
  font-family: var(--family-body), sans-serif;
  font-size: var(--size-p), 16px;
  line-height: var(--line-height-p);
  color: var(--Text-Content);
}


p {
  font-family: var(--family-body), sans-serif;
  font-size: var(--size-p), 16px;
  line-height: var(--line-height-p);
  color: var(--Text-Content);
  font-style: normal;
  font-weight: 400;
}

h1 {
  font-family: var(--family-title), sans-serif;
  font-size: var(--size-h1);
  line-height: var(--line-height-h1);
  color: var(--Text-Title);
  font-style: normal;
  font-weight: 700;
}

h1 .light {
  font-weight: 400;
}  
h2 {
  font-family: var(--family-title), sans-serif;
  font-size: var(--size-h2);
  line-height: var(--line-height-h2);
  color: var(--Text-Title);
  font-style: normal;
  font-weight: 700;
}
h2 .light {
  font-weight: 400;
}
h3 {
  font-family: var(--family-title), sans-serif;
  font-size: var(--size-h3);
  line-height: var(--line-height-h3);
  color: var(--Text-Title);
  font-style: normal;
  font-weight: 700;
}
h3 .light {
  font-weight: 400;
}
h4 {
  font-family: var(--family-title), sans-serif;
  font-size: var(--size-h4);
  line-height: var(--line-height-h4);
  color: var(--Text-Title);
  font-style: normal;
  font-weight: 700;
}
h4 .light {
  font-weight: 400;
}
h5 {
  font-family: var(--family-title), sans-serif;
  font-size: var(--size-h5);
  line-height: var(--line-height-h5);
  color: var(--Text-Title);
  font-style: normal;
  font-weight: 700;
}
h5 .light {
  font-weight: 400;
}
h6 {
  font-family: var(--family-title), sans-serif;
  font-size: var(--size-h6);
  line-height: var(--line-height-h6);
  color: var(--Text-Title);
  font-style: normal;
  font-weight: 700;
}
h6 .light {
  font-weight: 400;
}   




/*## ###############################################################################
## Tablet ( max: 768 )
## ###############################################################################*/

@media (min-width: 376px) and (max-width: 768px) {

    .fullBox,
    .fullBox1000,
    .fullBox1200,
    .fullBox1440{
        width: 90%;
        max-width: 768px;
    }

    :root {
        --spacing-1:4px;
        --spacing-2:6px;
        --spacing-3:8px;
        --spacing-4:12px;
        --spacing-5:16px;
        --spacing-6:24px;
        --spacing-7:32px;
        --spacing-8:32px;
        --spacing-9:40px;
        --spacing-10:48px;
        --spacing-11:56px;
        --spacing-12:64px;
        --spacing-13:72px;

        --size-h1: 56px;
        --size-h2: 44px;
        --size-h3: 40px;
        --size-h4: 24px;    
        --size-h5: 20px;
        --size-h6: 18px;
        --size-pl: 18px;
        --size-p: 16px;
        --size-ps: 14px;
        --size-link: 16px;
        
        --line-height-h1: 64px;
        --line-height-h2: 56px;
        --line-height-h3: 48px;
        --line-height-h4: 32px;
        --line-height-h5: 28px;
        --line-height-h6: 26px;
        --line-height-pl: 24px;
        --line-height-p: 24px;
        --line-height-ps: 22px;
        --line-height-link: 24px;
                
    }

}



/*## ###############################################################################
## Mobile ( max: 375 )
## ###############################################################################*/

@media only screen and (max-width: 375px) {


    .fullBox,
    .fullBox1000,
    .fullBox1200,
    .fullBox1440{
        width: 90%;
        max-width: 375px;
    }

    :root {
        --spacing-1:4px;
        --spacing-2:6px;
        --spacing-3:8px;
        --spacing-4:12px;
        --spacing-5:16px;
        --spacing-6:24px;
        --spacing-7:32px;
        --spacing-8:24px;
        --spacing-9:32px;
        --spacing-10:40px;
        --spacing-11:48px;
        --spacing-12:56px;
        --spacing-13:64px;

        --size-h1: 40px;
        --size-h2: 30px;        
        --size-h3: 32px;
        --size-h4: 20px;    
        --size-h5: 18px;
        --size-h6: 16px;
        --size-pl: 18px;
        --size-p: 16px;
        --size-ps: 14px;
        --size-link: 14px;
        
        --line-height-h1: 64px;
        --line-height-h2: 56px;
        --line-height-h3: 48px;
        --line-height-h4: 32px;
        --line-height-h5: 28px;
        --line-height-h6: 26px;
        --line-height-pl: 24px;
        --line-height-p: 24px;
        --line-height-ps: 22px;
        --line-height-link: 24px;
                        
    }    
}