/* =====================================================
   01 - ROOT
===================================================== */
:root{

    /* Cores */

    --color-primary:#0F766E;
    --color-primary-light:#14B8A6;
    --color-accent:#F59E0B;

    --color-title:#111827;
    --color-text:#374151;
    --color-text-light:#6B7280;

    --color-white:#FFFFFF;

    --color-bg:#FFFFFF;
    --color-bg-alt:#F8FAFC;

    --color-border:#E5E7EB;

    /* Tipografia */

    --font-title:'Poppins',sans-serif;
    --font-text:'Inter',sans-serif;

    /* Container */

    --container:1120px;

    /* Bordas */

    --radius-sm:10px;
    --radius-md:16px;
    --radius-lg:24px;
    --radius-xl:32px;

    /* Sombras */

    --shadow-sm:0 8px 20px rgba(0,0,0,.05);

    --shadow-md:0 12px 35px rgba(0,0,0,.08);

    --shadow-lg:0 20px 60px rgba(0,0,0,.12);

    /* Transições */

    --transition:.30s ease;

}

/* =====================================================
   02 - BODY
===================================================== */
html{

    font-size:16px;

}

body{

    background:var(--color-bg);

    color:var(--color-text);

    font-family:var(--font-text);

    font-size:18px;

    font-weight:400;

    line-height:1.7;

    overflow-x:hidden;

}

/* =====================================================
   03 - CONTAINER
===================================================== */
.container{

    width:100%;

    max-width:var(--container);

    margin:auto;

    padding-left:24px;

    padding-right:24px;

}

section{

    position:relative;

    padding:96px 0;

}
/* =====================================================
   04 - TIPOGRAFIA
===================================================== */
h1,
h2,
h3,
h4{

    color:var(--color-title);

    font-family:var(--font-title);

    line-height:1.15;

    font-weight:700;

    letter-spacing:-0.02em;

}

h1{

    font-size:clamp(2.4rem,5vw,4rem);

}

h2{

    font-size:clamp(2rem,4vw,3rem);

}

h3{

    font-size:clamp(1.5rem,3vw,2rem);

}

p{

    margin-top:24px;

    color:var(--color-text);

}

strong{

    font-weight:700;

    color:var(--color-title);

}

small{

    font-size:.9rem;

}

.text-center{

    text-align:center;

}

.text-left{

    text-align:left;

}

.text-right{

    text-align:right;

}

/* =====================================================
   05 - BOTÕES
===================================================== */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    min-width:240px;

    min-height:58px;

    padding:16px 36px;

    font-family:var(--font-text);

    font-size:1rem;

    font-weight:700;

    line-height:1;

    text-align:center;

    border:none;

    border-radius:var(--radius-md);

    cursor:pointer;

    transition:var(--transition);

}

.btn-primary{

    color:var(--color-white);

    background:linear-gradient(
        180deg,
        #F8B72D 0%,
        #F59E0B 100%
    );

    box-shadow:
        0 15px 35px rgba(245,158,11,.30);

}

.btn-primary:hover{

    transform:translateY(-3px);

    box-shadow:
        0 22px 45px rgba(245,158,11,.40);

}

.btn-secondary{

    color:var(--color-primary);

    background:#ffffff;

    border:2px solid var(--color-primary);

}

.btn-secondary:hover{

    background:var(--color-primary);

    color:#ffffff;

}



/* =====================================================
   06 - CARDS
===================================================== */

.card{

    background:#ffffff;

    border:1px solid var(--color-border);

    border-radius:var(--radius-lg);

    padding:36px;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.card:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow-md);

}



/* =====================================================
   07 - SECTION TITLE
===================================================== */

.section-header{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}

.section-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 18px;

    margin-bottom:22px;

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

    color:var(--color-primary);

    background:#ECFDF5;

    border-radius:999px;

}

.section-header p{

    max-width:700px;

    margin:24px auto 0;

}



/* =====================================================
   08 - BADGES
===================================================== */

.badges{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:14px;

}

.badge{

    display:flex;

    align-items:center;

    gap:10px;

    padding:14px 20px;

    background:#ffffff;

    border:1px solid var(--color-border);

    border-radius:999px;

    box-shadow:var(--shadow-sm);

    font-size:.95rem;

    font-weight:600;

}

.badge svg{

    width:18px;

    height:18px;

    color:var(--color-primary);

}



/* =====================================================
   09 - VÍDEOS
===================================================== */

.video-wrapper{

    position:relative;

    overflow:hidden;

    border-radius:var(--radius-xl);

    box-shadow:var(--shadow-lg);

}

.video-wrapper iframe,

.video-wrapper video{

    display:block;

    width:100%;

    aspect-ratio:16/9;

}



/* =====================================================
   10 - DIVISORES
===================================================== */

.divider{

    width:100px;

    height:4px;

    margin:26px auto;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        var(--color-primary),
        var(--color-primary-light)
    );

}



/* =====================================================
   11 - UTILITÁRIOS
===================================================== */

.bg-light{

    background:var(--color-bg-alt);

}

.bg-white{

    background:#ffffff;

}

.mb-0{

    margin-bottom:0!important;

}

.mt-0{

    margin-top:0!important;

}

.hidden{

    display:none!important;

}



/* =====================================================
   12 - HOVER GLOBAL
===================================================== */

a{

    transition:var(--transition);

}

img{

    transition:var(--transition);

}

/* =====================================================
   13 - HERO
===================================================== */

.hero{

    position:relative;

    overflow:hidden;

    padding:120px 0 90px;

    background:
    radial-gradient(circle at top right,
    rgba(20,184,166,.12),
    transparent 45%),

    radial-gradient(circle at bottom left,
    rgba(15,118,110,.08),
    transparent 35%),

    #ffffff;

}

.hero-content{

    max-width:900px;

    margin:auto;

    text-align:center;

}

.hero-logo{

    width:170px;

    margin:0 auto 40px;

}

.hero h1{

    margin-bottom:28px;

}

.hero-subtitle{

    max-width:760px;

    margin:0 auto 40px;

    font-size:1.25rem;

    color:var(--color-text-light);

}

.hero-cta{

    margin:45px 0;

}

.hero .video-wrapper{

    margin-top:45px;

}