html { 
    scroll-behavior: smooth;
    font-size: 10px; /* 1rem = 10px */
    color-scheme: light;
}

body {
    background: var(--cor-fundo);
    color: var(--cor-texto-primario);
}

*,
*::before,
*::after { box-sizing: border-box; }

a { text-decoration: none;}

ul, ol { list-style: none; padding: 0; margin: 0; }

figure {
    padding: 0;
    margin: 0;
}

/* Tokens */
:root {
    /* Cores Marca */
    --cor-marca-primaria: #2344a2;
    --cor-primaria-2: #182f71;
    --cor-primaria-3: #1e3a8a;
    --cor-primaria-4: #284eba;
    --cor-primaria-5: #dbeafe;
    --cor-primaria-6: #eff6ff;

    --cor-marca-secundaria: #10b981;
    --cor-secundaria-2: #0a7853;
    --cor-secundaria-3: #0D9769;
    --cor-secundaria-4: #13dd9a;
    --cor-secundaria-5: #8ef0cf;
    --cor-secundaria-6: #e6faf0;

    /* Cores Texto */
    --cor-texto-primario: #16285a;
    --cor-texto-secundario: #616a83;
    --cor-texto-branco: #f9fafb;
    --cor-texto-inativo: #9ca3af;

    /* Cores Fundo */
    --cor-fundo: #f9fafb;
    --cor-fundo-branco: #fafafa;
    --cor-fundo-solido: #ffffff;
    --cor-fundo-azul: #7EB4FB;

    /* Cores Neutras */
    --cor-borda: #e2e8f0;
    --cor-borda-ativa: #94a3b8;
    --cor-icone: #616a83;

    /* Fontes principais */
    --font-body: "Inter", system-ui, sans-serif;
    --font-heading: "Poppins", system-ui, sans-serif;


    /* Escala fluida (min, preferido, max) */
    --size-6xl: clamp(5rem, 6vw, 7.2rem); 
    --size-5xl: clamp(4rem, 5vw, 5.6rem);  
    --size-4xl: clamp(3.6rem, 4.2vw, 4.8rem);
    --size-3xl: clamp(3rem, 3.6vw, 4rem);
    --size-2xl: clamp(2.4rem, 2.8vw, 2.8rem);
    --size-xl:  clamp(2rem, 2.2vw, 2.4rem);
    --size-lg:  clamp(1.8rem, 1.8vw, 2rem);
    --size-md:  clamp(1.6rem, 1.6vw, 1.8rem);
    --size-base: 1.6rem;
    --size-sm:  1.4rem;
    --size-xs:  1.2rem;
    --size-2xs: 1rem;

    /* Line-heights */
    --lh-h1: 1.15;
    --lh-h2h3: 1.20;
    --lh-others: 1.40;
    --lh-p: 1.50;

    /* Radius */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-1xl: 2rem;
    --radius-xl: 999px;

    /* Icone Sizes */
    --icon-2xl: 12px;
    --icon-xs: 16px;
    --icon-sm: 20px;
    --icon-md: 24px;
    --icon-lg: 32px;
}

/* Ajuste fontes para pequenos dispositivos */
@media (max-width: 480px) {
  :root {
    --size-6xl: clamp(4rem, 9vw, 4.8rem);   
    --size-5xl: clamp(3.2rem, 7.2vw, 3.6rem); 
    --size-4xl: clamp(2.8rem, 6vw, 3.2rem); 
    --size-3xl: clamp(2.4rem, 3.6vw, 2.8rem); 
  }
}
/* FIM Tokens */

/* Estilo básicos ícones */
.lucide {
    /**
    height: 4rem;
    color: var(--cor-preto);**/
    width: var(--icon-sm);
    stroke-width: 1.5px;
}
/* FIM Estilo básicos ícones */

/* Header/Banner global */
body > header {
    background: #7EB4FB;
    background: linear-gradient(0deg,rgba(126, 180, 251, 0.85) 0%, rgba(239, 246, 255, 0.5) 50%, rgba(255, 255, 255, 1) 100%);
    position: relative;
    overflow: hidden;
}

body > header > * {
  position: relative;
  z-index: 1; /* conteúdo do header */
}
/* FIM Header/Banner global */

/* Aplicação das Fontes */
h1, h2, h3, h4, h5, h6, p, a, li {
    margin: 0;
    padding: 0;
}

body, p, a, li {
    font-family: var(--font-body);
    font-size: var(--size-base);
    font-weight: 400; /* Regular */
    line-height: var(--lh-p);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 500; /* Medium */
}

h1 { font-size: var(--size-6xl); line-height: var(--lh-h1);}
h2 { font-size: var(--size-5xl); line-height: var(--lh-h2h3); }
h3 { font-size: var(--size-4xl); line-height: var(--lh-h2h3);}
h4 { font-size: var(--size-3xl); line-height: var(--lh-others);}
h5 { font-size: var(--size-2xl); line-height: var(--lh-others);}
h6 { font-size: var(--size-xl);  line-height: var(--lh-others);}

h1, h2, h3 {
  overflow-wrap: anywhere; /*Quebra o texto quando for grande para dispositivos pequenos*/
}
/* FIM Aplicação das Fontes */

/* Efeito de circulos Banner */
.elipse,
.elipse-verde,
.elipse-sobre,
.elipse-sobre2,
.elipse-solucoes,
.elipse-solucoes2 {
  position: absolute;
  z-index: 0;                  /* atrás do conteúdo do header, à frente do bg */
  border-radius: 50%;
}

.elipse {
    width: 90rem;
    height: 90rem;
    background: linear-gradient(to bottom, #FFFFFF 0%, rgba(219, 234, 254, 0.25) 100%);
    top: -96px;
    left: 0;
}

.elipse-verde {
    width: 80rem;
    height: 80rem;
    background-color: rgba(230, 250, 240, 0.3);
    top: 466PX;
    right: 0;
}

.elipse-sobre {
    width: 80rem;
    height: 80rem;
    border: 3px solid var(--cor-fundo-solido);
    background: linear-gradient(to bottom, #FAFAFA 0%, rgba(219, 234, 254, 0.8) 100%);
    top: 200px;
    left: -400px;
}

.elipse-sobre2 {
    width: 150rem;
    height: 150rem;
    background: linear-gradient(to bottom,#FFFFFF 0%, rgba(219, 234, 254, 0.6) 50%, rgba(219, 234, 254, 0.1) 100%);
    top: 0;
    left: -400px;
}

.elipse-solucoes {
    width: 150rem;
    height: 150rem;
    background: linear-gradient(to bottom, #FAFAFA 0%, rgba(219, 234, 254, 0.05) 100%);
    top: -100px;
    left: -400px;
}

.elipse-solucoes2 {
    width: 90rem;
    height: 90rem;
    background: linear-gradient(to bottom,#FAFAFA 0%, rgba(230, 250, 240, 0.3) 100%);
    top: -280px;
    left: 460px;
}

@media (min-width: 768px) {
    .elipse-sobre {
        width: 100rem;
        height: 100rem;
    }
}
/* FIM Efeito de circulos Banner */

/* Padding das seções */
.padding-secoes {
    padding: 5.6rem 0;
}

@media (min-width:768px) {
    .padding-secoes {
        padding: 9.6rem 4rem;
    }
}
/* FIM Padding das seções */

/* Bordas layout */
@media (min-width:768px) {
    .bordas-layout {
        border-left: 1px solid var(--cor-borda);
        border-right: 1px solid var(--cor-borda);
    }
}
/* FIM Bordas layout */

/* Esconder item */
.visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important;
  margin: -1px !important; padding: 0 !important; overflow: hidden !important;
  clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important;
}

/* Atributo que esconde blocos da Tab */
[hidden] { display: none !important; }


.esconder-desk {
    padding: 0!important;
}

@media (min-width: 768px) {
    .esconder-desk {
        display: none;
    }
}
/* FIM Esconder item */

/* Acessibilidade */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation: none !important; transition: none !important; }
}