/*======================================================
CEETEC EAD
STYLE.CSS - PARTE 1
======================================================*/

:root {

    --primary: #071D49;
    --primary-dark: #04132F;
    --secondary: #C89B3C;
    --secondary-light: #E8C96D;

    --white: #FFFFFF;

    --background: #F8FAFD;

    --text: #22314E;
    --text-light: #64748B;

    --border: #E6EBF2;

    --radius: 22px;

    --shadow:
        0 25px 60px rgba(7, 29, 73, .08);

    --transition: .35s ease;

}

/*========================*/

* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

}

body {

    font-family: 'Inter', sans-serif;

    background: var(--background);

    color: var(--text);

    overflow-x: hidden;

}

img {

    display: block;

    max-width: 100%;

}

a {

    text-decoration: none;

    color: inherit;

}

.container {

    width: min(1180px, 92%);

    margin: auto;

}

/*========================*/

h1,
h2,
h3 {

    font-family: 'Sora', sans-serif;

    line-height: 1.15;

}

p {

    line-height: 1.8;

    color: var(--text-light);

}

/*==========================
HEADER
==========================*/

.header {

    position: fixed;

    top: 0;

    width: 100%;

    z-index: 999;

    padding: 22px 0;

    transition: .35s;

}

.header.active {

    background: rgba(7, 29, 73, .96);

    backdrop-filter: blur(18px);

    box-shadow: 0 15px 45px rgba(0, 0, 0, .15);

}

.header__container {

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.logo img {

    height: 58px;

}

.menu {

    display: flex;

    align-items: center;

    gap: 38px;

}

.menu a {

    color: white;

    font-weight: 500;

    position: relative;

}

.menu a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -8px;

    width: 0;

    height: 2px;

    background: var(--secondary);

    transition: .35s;

}

.menu a:hover::after {

    width: 100%;

}

.btn-header {

    background: var(--secondary);

    color: white;

    padding: 15px 26px;

    border-radius: 12px;

    font-weight: 700;

    transition: .3s;

}

.btn-header:hover {

    transform: translateY(-3px);

    background: var(--secondary-light);

}

.menu-mobile {

    display: none;

}

/*==========================
HERO
==========================*/

.hero {

    position: relative;

    overflow: hidden;

    min-height: 100vh;

    display: flex;

    align-items: center;

    background:

        linear-gradient(135deg,

            #071D49 0%,

            #0B2C73 60%,

            #143C8F 100%);

}

.hero__blur {

    position: absolute;

    border-radius: 50%;

    filter: blur(90px);

}

.hero__blur--1 {

    width: 380px;

    height: 380px;

    background: #C89B3C;

    top: -120px;

    right: -80px;

    opacity: .25;

}

.hero__blur--2 {

    width: 450px;

    height: 450px;

    background: #FFFFFF;

    bottom: -180px;

    left: -180px;

    opacity: .08;

}

.hero__container {

    display: grid;

    grid-template-columns: 1.1fr .9fr;

    gap: 70px;

    align-items: center;

}

.hero__content {

    position: relative;

    z-index: 2;

}

.hero__tag {

    display: inline-flex;

    align-items: center;

    padding: 10px 22px;

    border-radius: 50px;

    background: rgba(255, 255, 255, .08);

    border: 1px solid rgba(255, 255, 255, .15);

    color: white;

    font-size: .9rem;

    margin-bottom: 28px;

}

.hero h1 {

    color: white;

    font-size: 4rem;

    margin-bottom: 28px;

}

.hero h1 strong {

    color: var(--secondary);

}

.hero p {

    color: rgba(255, 255, 255, .85);

    font-size: 1.08rem;

    max-width: 620px;

    margin-bottom: 42px;

}

.hero__buttons {

    display: flex;

    gap: 18px;

    flex-wrap: wrap;

}

.btn-primary {

    background: var(--secondary);

    color: white;

    padding: 18px 34px;

    border-radius: 14px;

    font-weight: 700;

    transition: .35s;

}

.btn-primary:hover {

    transform: translateY(-4px);

    box-shadow: 0 20px 45px rgba(200, 155, 60, .35);

}

.btn-outline {

    border: 2px solid rgba(255, 255, 255, .18);

    color: white;

    padding: 18px 34px;

    border-radius: 14px;

    transition: .35s;

}

.btn-outline:hover {

    background: white;

    color: var(--primary);

}

/*==========================
VISUAL HERO
==========================*/

.hero__visual {

    position: relative;

    height: 640px;

}

.hero-device {

    position: absolute;

    right: 0;

    top: 140px;

    transform: none;

    width: 550px;

    z-index: 2;

    background: white;

    border-radius: 28px;

    padding: 16px;

    box-shadow:

        0 35px 70px rgba(0, 0, 0, .25);

}

.hero-device img {
    border-radius: 18px;
}

.hero-card {

    position: absolute;

    background: white;

    padding: 22px;

    border-radius: 18px;

    box-shadow: var(--shadow);

    min-width: 180px;

}

.hero-card span {

    display: block;

    font-weight: 800;

    color: var(--primary);

    font-size: 1.25rem;

}

.hero-card small {

    color: var(--text-light);

}

.hero-card--top {

    top: 0;

    left: -35px;

    z-index: 3;

}

.hero-card--right {

    top: 155px;

    right: -155px;

    z-index: 3;

}

.hero-card--bottom {

    bottom: 10px;

    left: 10px;

    z-index: 3;

}

/*======================================================
SEÇÕES
======================================================*/

section {

    position: relative;

    padding: 110px 0;

}

.section-tag {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    background: rgba(200, 155, 60, .12);

    color: var(--secondary);

    padding: 10px 22px;

    border-radius: 40px;

    font-size: .85rem;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

    margin-bottom: 22px;

}

.section-header {

    max-width: 720px;

    margin: 0 auto 70px;

    text-align: center;

}

.section-header h2 {

    font-size: 2.7rem;

    color: var(--primary);

    margin-bottom: 18px;

}

/*======================================================
INSTITUTIONAL
======================================================*/

.institutional {

    background: #ffffff;

}

.institutional__grid {

    display: grid;

    grid-template-columns: .95fr 1.05fr;

    gap: 80px;

    align-items: center;

}

.institutional__left h2 {

    font-size: 3rem;

    color: var(--primary);

}

.institutional__right {

    position: relative;

    padding-left: 35px;

}

.institutional__right::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 5px;

    height: 100%;

    border-radius: 20px;

    background: linear-gradient(180deg,

            var(--secondary),

            transparent);

}

.institutional__right p {

    margin-bottom: 24px;

    font-size: 1.08rem;

}

.institutional__right p:last-child {

    margin-bottom: 0;

}

/*======================================================
POSSÍVEL
======================================================*/

.possivel {

    background:

        linear-gradient(180deg,

            #F8FAFD,

            #FFFFFF);

}

.possivel__box {

    display: grid;

    grid-template-columns: 380px 1fr;

    gap: 70px;

    background: white;

    border-radius: 30px;

    padding: 60px;

    box-shadow: var(--shadow);

    overflow: hidden;

    position: relative;

}

.possivel__box::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 8px;

    height: 100%;

    background: var(--secondary);

}

.possivel__title span {

    color: var(--secondary);

    font-size: .9rem;

    font-weight: 700;

    text-transform: uppercase;

}

.possivel__title h2 {

    margin: 18px 0 25px;

    font-size: 2.3rem;

    color: var(--primary);

}

.possivel__title strong {

    font-size: 5rem;

    color: var(--secondary);

    font-family: 'Sora', sans-serif;

}

.possivel__text {

    display: flex;

    flex-direction: column;

    justify-content: center;

}

.possivel__text p {

    margin-bottom: 24px;

    font-size: 1.06rem;

}

.possivel__text p:last-child {

    margin-bottom: 0;

}

/*======================================================
PREPARAÇÃO
======================================================*/

.preparation {

    background: #ffffff;

}

.timeline {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 30px;

}

.timeline__item {

    display: flex;

    gap: 24px;

    align-items: flex-start;

    background: #ffffff;

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

    border-radius: 22px;

    padding: 30px;

    transition: var(--transition);

}

.timeline__item:hover {

    transform: translateY(-8px);

    border-color: var(--secondary);

    box-shadow: 0 20px 50px rgba(7, 29, 73, .08);

}

.timeline__number {

    min-width: 70px;

    height: 70px;

    border-radius: 18px;

    display: flex;

    justify-content: center;

    align-items: center;

    background: linear-gradient(135deg,

            var(--secondary),

            var(--secondary-light));

    color: white;

    font-family: 'Sora', sans-serif;

    font-size: 1.4rem;

    font-weight: 700;

}

.timeline__item h3 {

    color: var(--primary);

    margin-bottom: 12px;

    font-size: 1.2rem;

}

.timeline__item p {

    margin: 0;

}

.study-box {

    margin-top: 70px;

    border-radius: 28px;

    background:

        linear-gradient(135deg,

            var(--primary),

            var(--primary-dark));

    color: white;

    padding: 65px;

    text-align: center;

    position: relative;

    overflow: hidden;

}

.study-box::before {

    content: "";

    position: absolute;

    width: 450px;

    height: 450px;

    border-radius: 50%;

    background: rgba(255, 255, 255, .04);

    top: -220px;

    right: -120px;

}

.study-box h3 {

    color: white;

    font-size: 2.2rem;

    margin-bottom: 18px;

    position: relative;

}

.study-box p {

    color: rgba(255, 255, 255, .82);

    max-width: 760px;

    margin: auto;

    position: relative;

}

/*======================================================
CTA
======================================================*/

.cta__box {

    position: relative;
    z-index: 2;

    background: #fff;

    border-radius: 34px;

    padding: 80px;

    max-width: 980px;

    margin: auto;

    text-align: center;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 22px;

    box-shadow: 0 40px 90px rgba(0, 0, 0, .18);

}

.cta__box p {

    max-width: 760px;

    margin: 0;

}

.cta__box .btn-primary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin: 10px 0;

}

.cta__box strong {

    margin: 0;

    display: block;

    max-width: 700px;

    line-height: 1.5;

    text-align: center;

}

/*======================================================
TRANSPARÊNCIA
======================================================*/

.transparency {

    background: #F8FAFD;

}

.transparency__box {

    max-width: 980px;

    margin: auto;

    background: #FFFFFF;

    padding: 70px;

    border-radius: 30px;

    box-shadow: var(--shadow);

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

    position: relative;

    overflow: hidden;

}

.transparency__box::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 6px;

    background: linear-gradient(90deg,

            var(--secondary),

            var(--secondary-light));

}

.transparency__box h2 {

    color: var(--primary);

    margin: 20px 0 30px;

    font-size: 2.3rem;

}

.transparency__box p {

    margin-bottom: 20px;

    font-size: 1.05rem;

}

.transparency__box p:last-child {

    margin-bottom: 0;

}

/*=========================================
FOOTER
=========================================*/

.footer{

    background:var(--primary-dark);

    color:#fff;

    padding:70px 0 25px;

}

.footer__container{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:80px;

    padding-bottom:45px;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.footer__brand{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.footer__brand img{

    width:210px;

}

.footer__brand small{

    color:rgba(255,255,255,.55);

    font-size:.95rem;

}

.footer__contact{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.footer__contact h3{

    color:#fff;

    font-size:1.4rem;

}

.footer__contact>a{

    display:flex;

    align-items:center;

    gap:12px;

    color:rgba(255,255,255,.82);

    transition:.3s;

}

.footer__contact>a:hover{

    color:var(--secondary);

}

.footer__contact>a i{

    color:var(--secondary);

    width:22px;

    font-size:20px;

}

.footer__social{

    display:flex;

    gap:14px;

    margin-top:5px;

}

.footer__social a{

    width:46px;

    height:46px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(255,255,255,.06);

    color:#fff;

    font-size:20px;

    transition:.3s;

    border:1px solid rgba(255,255,255,.08);

}

.footer__social a:hover{

    background:var(--secondary);

    color:#fff;

    transform:translateY(-4px);

}

.footer__bottom{

    max-width: 1180px;
    margin: 0 auto;

    padding-top: 28px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:40px;

    border-top:1px solid rgba(255,255,255,.08);

}

.footer__bottom p{

    color:rgba(255,255,255,.55);

    font-size:.92rem;

}

.footer__bottom a{

    color:var(--secondary);

    font-weight:700;

}

.footer__bottom a:hover{

    color:var(--secondary-light);

}

/*======================================================
BOTÃO WHATSAPP
======================================================*/

.whatsapp{

    position:fixed;

    right:28px;

    bottom:28px;

    width:68px;

    height:68px;

    border-radius:50%;

    background:#25D366;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:2rem;

    z-index:9999;

    transition:.3s;

    animation:whatsappPulse 2.2s infinite;

}

.whatsapp.show {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}

.whatsapp:hover{

    animation-play-state:paused;

    transform:scale(1.12);

    background:#1EBE57;

}

/*======================================================
ANIMAÇÕES
======================================================*/

.reveal {

    opacity: 0;

    transform: translateY(50px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.reveal.active {

    opacity: 1;

    transform: translateY(0);

}

/*======================================================
RESPONSIVO TABLET
======================================================*/

@media(max-width:1024px) {

    .hero__container,

    .institutional__grid,

    .possivel__box {

        grid-template-columns: 1fr;

    }

    .hero {

        padding: 150px 0 90px;

        min-height: auto;

    }

    .hero__visual {

        height: auto;

        margin-top: 70px;

    }

    .hero-device {

        position: relative;

        transform: none;

        right: auto;

        margin: auto;

    }

    .hero-card {

        display: none;

    }

    .timeline {

        grid-template-columns: 1fr;

    }

    .footer__container {

        flex-direction: column;

        gap: 45px;

    }

}

/*======================================================
RESPONSIVO CELULAR
======================================================*/

@media (max-width:768px) {

    .hero {

        min-height: auto;

        padding: 120px 0 60px;

    }

    .hero__container {

        display: flex;

        flex-direction: column;

        gap: 40px;

    }

    .hero__content {

        order: 1;

        width: 100%;

    }

    .hero__visual {

        order: 2;

        width: 100%;

        height: auto;

        margin: 0;

        display: flex;

        justify-content: center;

        align-items: center;

    }

    .hero-device {

        position: relative;

        top: 0;

        right: 0;

        transform: none;

        width: 100%;

        max-width: 360px;

        margin: 0 auto;

        padding: 14px;

    }

    .hero-device img {

        width: 100%;

        display: block;

    }

    .btn-header {

        display: none;

    }

    /* Esconde os cards no celular */

    .hero-card {

        display: none;

    }

    .hero h1 {

        font-size: 2.3rem;

    }

    .hero p {

        margin-bottom: 28px;

    }

    .hero__buttons {

        display: flex;

        flex-direction: column;

        gap: 16px;

    }

    .btn-primary,

    .btn-outline {

        width: 100%;

    }

}

/*======================================================
CELULARES PEQUENOS
======================================================*/

@media(max-width:480px) {

    section {

        padding: 80px 0;

    }

    .container {

        width: 92%;

    }

    h1 {

        font-size: 2rem !important;

    }

    h2 {

        font-size: 1.7rem !important;

    }

    .hero-device {

        width: 100%;

    }

    .timeline__item {

        flex-direction: column;

        align-items: flex-start;

    }

    .timeline__number {

        width: 60px;

        height: 60px;

        min-width: 60px;

        font-size: 1.2rem;

    }

    .whatsapp {

        width: 60px;

        height: 60px;

        right: 18px;

        bottom: 18px;

        font-size: 1.7rem;

    }

    .hero {

        padding-top: 105px;

    }

    .hero h1 {

        font-size: 1.9rem !important;

    }

    .hero__tag {

        display: none;

    }

}

/*======================================================
SELEÇÃO
======================================================*/

::selection {

    background: var(--secondary);

    color: white;

}

body.menu-open {

    overflow: hidden;

}

@media (max-width:768px) {

    .menu {

        position: fixed;

        top: 84px;
        left: -100%;

        width: 100%;
        height: calc(100vh - 84px);

        background: var(--primary);

        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;

        gap: 0;

        padding: 30px;

        transition: .35s;

        z-index: 998;

    }

    .menu.active {

        left: 0;

    }

    .menu a {

        width: 100%;

        padding: 18px 0;

        color: #fff;

        border-bottom: 1px solid rgba(255, 255, 255, .08);

    }

    .menu-mobile {

        display: flex;

        flex-direction: column;

        gap: 6px;

        cursor: pointer;

        background: none;

        border: none;

        z-index: 999;

    }

    .menu-mobile span {

        width: 28px;

        height: 3px;

        border-radius: 20px;

        background: #fff;

    }

}

@media (max-width:768px) {

    .hero__buttons {

        width: 100%;

        display: flex;

        flex-direction: column;

        gap: 16px;

    }

    .hero__buttons a {

        width: 100%;

        max-width: 320px;

        margin: 0 auto;

        display: flex;

        justify-content: center;

        align-items: center;

        padding: 18px 24px;

    }

}

@media (max-width:768px){

    .header__container{

        display:flex;

        justify-content:space-between;

        align-items:center;

    }

    .btn-header{

        display:none;

    }

    .logo img{

        height:48px;

    }

}

@media (max-width:768px){

.footer{

    text-align:center;

}

.footer__container{

    flex-direction:column;

    align-items:center;

    gap:40px;

}

.footer__brand{

    align-items:center;

}

.footer__brand img{

    width:180px;

}

.footer__contact{

    align-items:center;

}

.footer__contact>a{

    justify-content:center;

}

.footer__social{

    justify-content:center;

    flex-wrap:wrap;

}

.footer__bottom{

    flex-direction:column;

    text-align:center;

    gap:12px;

}

}

.whatsapp.show{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

@keyframes whatsappPulse{

    0%{

        transform:scale(1);

        box-shadow:
            0 0 0 0 rgba(37,211,102,.55);

    }

    70%{

        transform:scale(1.08);

        box-shadow:
            0 0 0 18px rgba(37,211,102,0);

    }

    100%{

        transform:scale(1);

        box-shadow:
            0 0 0 0 rgba(37,211,102,0);

    }

}