/* Base visual: tokens, reset, cabeçalho, páginas, componentes e rodapé. */
:root    {
    --teal:#2A6680;
    --dark:#24586C;
    --orange:#F39A08;
    --yellow:#F7B52B;
    --cream:#F5EDE0;
    --white:#FFFDF8;
    --ink:#184F67;
    --muted:#55727E;
    --line:#E8D8BD;
}

*    {
    box-sizing:border-box;
    margin:0;
    padding:0;
}

html    {
    scroll-behavior:smooth;
}

body    {
    font-family:Arial,Helvetica,sans-serif;
    background:var(--cream);
    color:var(--ink);
    line-height:1.55;
}

a    {
    text-decoration:none;
    color:inherit;
}

.container    {
    width:min(1180px,calc(100% - 48px));
    margin:auto
}

.header   {
    height:104px;
    background:var(--teal);
    display:flex;
    align-items:center;
    padding:0 4%;
    gap:50px;
    color:#fff
}

.brand    {
    width:205px;
}

.brand img    {
    width:190px;
}

.header nav    {
    display:flex;
    gap:34px;
    font-weight:700;
}

.header nav a    {
    padding:38px 0 34px;
    border-bottom:3px solid transparent
}

.header nav a.active,.header nav a:hover    {
    border-color:var(--yellow)
}

.tools   {
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:18px;
}

.settings    {
    width:62px;
    height:62px;
    border:0;
    border-radius:50%;
    background:var(--orange)
}

.settings img    {
    width:34px;
}

.eyebrow    {
    display:block;
    color:var(--orange);
    font-size:13px;
    letter-spacing:1.4px;
    font-weight:900;
    margin-bottom:10px;
}

.light   {
    color:var(--yellow)
}

h1,h2    {
    line-height:1.05;
}

h1 span,h2 span    {
    color:var(--orange)
}

.hero    {
    min-height:610px;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:35px;
    padding:70px 0;
}

.hero h1,.about h1    {
    font-size:clamp(44px,5vw,70px);
    margin-bottom:24px;
    letter-spacing:-1.8px;
}

.hero p,.about p    {
    max-width:580px;
    color:var(--muted);
    font-size:18px;
    margin-bottom:30px;
}

.btn    {
    display:inline-block;
    background:var(--orange);
    color:#fff;
    padding:15px 25px;
    border-radius:999px;
    font-weight:900;
}

.btn:hover    {
    background:var(--yellow)
}

.app-download-copy {
    margin:22px 0 10px;
    font-size:15px !important;
}

.app-download {
    background:var(--blue, #2A6680);
}

.app-download:hover {
    background:#214f63;
}

.hero-art    {
    height:430px;
    position:relative;
}

.blob    {
    position:absolute;
    width:350px;
    height:310px;
    right:40px;
    top:45px;
    border-radius:50%;
    background:#D4E9EE
}

.student    {
    position:absolute;
    right:60px;
    bottom:10px;
    width:320px;
    height:330px
}

.hair    {
    position:absolute;
    width:145px;
    height:112px;
    background:#4A2B20;
    border-radius:60%;
    top:20px;
    left:76px
}

.face    {
    position:absolute;
    z-index:2;
    width:122px;
    height:118px;
    background:#C98258;
    border-radius:50%;
    top:58px;
    left:88px
}

.face i    {
    position:absolute;
    width:7px;
    height:10px;
    background:#26353B;
    border-radius:50%;
    top:48px
}

.face i:first-child    {
    left:33px
}

.face i:nth-child(2)    {
    right:33px
}

.face em    {
    position:absolute;
    width:33px;
    height:14px;
    border-bottom:4px solid #703C2D;
    border-radius:0 0 40px 40px;
    left:44px;
    top:76px
}

.body    {
    position:absolute;
    width:205px;
    height:175px;
    background:var(--orange);
    left:55px;
    top:170px;
    border-radius:55px 55px 20px 20px
}

.tablet   {
    position:absolute;
    z-index:3;
    left:126px;
    top:220px;
    width:190px;
    height:125px;
    background:#173E4C;
    border-radius:14px;
    padding:8px;
    transform:rotate(-4deg);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px
}

.tablet b    {
    background:#fff;
    padding:10px;
    border-radius:8px;
    font-size:23px
}

.spark    {
    position:absolute;
    color:var(--orange);
    font-size:30px
}

.s1    {
    left:40px;
    top:110px
}

.s2    {
    right:10px;
    top:155px
}

.how    {
    background:var(--white);
    padding:85px 0
}

.heading    {
    text-align:center;
    margin-bottom:45px
}

.heading h2    {
    font-size:42px
}

.steps    {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px
}

.steps article    {
    background:var(--cream);
    border:1px solid var(--line);
    border-radius:20px;
    padding:27px;
    display:flex;
    gap:18px
}

.icon    {
    width:58px;
    height:58px;
    border-radius:50%;
    display:grid;
    place-items:center;
    flex:none
}

.icon img    {
    width:30px
}

.orange    {
    background:var(--orange)
}

.blue    {
    background:var(--teal)
}

.steps h3    {
    margin-bottom:8px
}

.steps p,.value-grid p,.mission p    {
    color:var(--muted);
    font-size:14px
}

.callout    {
    margin-top:70px;
    margin-bottom:70px;
    background:var(--teal);
    color:#fff;
    border-radius:28px;
    min-height:215px;
    padding:38px 50px;
    display:grid;
    grid-template-columns:230px 1fr;
    align-items:center
}

.callout h2    {
    font-size:36px;
    margin-bottom:12px
}

.callout p    {
    margin-bottom:18px;
    color:#e8f5f6
}

.callout-art    {
    height:145px;
    position:relative
}

.callout-art:after    {
    content:'😊';
    position:absolute;
    left:45px;
    bottom:-20px;
    width:105px;
    height:105px;
    border-radius:50%;
    background:var(--orange);
    display:grid;
    place-items:center;
    font-size:50px;
    border:14px solid #D4E9EE
}

/* Rodapé compartilhado pelas páginas do site. */
.site-footer  {
    width: 100%;
    background: var(--dark);
    color: #fff;
    padding: 28px max(5%, calc((100% - 1180px) / 2));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px 32px;
    font-size: 14px;
}

.site-footer img  {
    display: block;
    width: 145px;
    max-height: 56px;
    object-fit: contain;
}

.site-footer a  {
    color: #fff;
    font-weight: 700;
}

.site-footer a:hover  {
    color: var(--yellow);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.site-footer a:focus-visible  {
    outline: 3px solid var(--yellow);
    outline-offset: 5px;
    border-radius: 2px;
}

.about    {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:55px;
    align-items:center;
    padding:80px 0 60px
}

.about h1    {
    font-size:58px
}

.about-art    {
    height:320px;
    background:#D6EAEF;
    border-radius:48%;
    position:relative;
    overflow:hidden
}

.bubble    {
    position:absolute;
    z-index:3;
    top:25px;
    left:47%;
    background:#fff;
    border:2px solid #E4B66A;
    padding:10px 16px;
    border-radius:16px;
    color:#EF5B45;
    font-size:27px
}

.person    {
    position:absolute;
    bottom:-15px;
    border-radius:70px 70px 20px 20px
}

.person.a    {
    width:155px;
    height:225px;
    background:var(--teal);
    left:70px
}

.person.b    {
    width:165px;
    height:210px;
    background:var(--orange);
    right:55px
}

.person:before    {
    content:'';
    position:absolute;
    width:92px;
    height:92px;
    border-radius:50%;
    top:-54px;
    left:31px;
    background:#C98258
}

.person.b:before    {
    background:#5D382B
}

.mission    {
    background:#F9EEDB;
    border:1px solid var(--line);
    border-radius:22px;
    padding:30px 40px;
    display:grid;
    grid-template-columns:70px 1fr 1px 1fr;
    gap:25px;
    align-items:center;
    margin-bottom:75px
}

.mission-icon    {
    width:64px;
    height:64px;
    border-radius:18px;
    background:var(--orange);
    display:grid;
    place-items:center
}

.mission-icon img    {
    width:31px
}

.mission h2    {
    font-size:32px
}

.divider    {
    height:70px;
    background:#D6B77E
}

.story    {
    background:var(--teal);
    color:#fff;
    padding:80px 0
}

.story-grid    {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    align-items:center
}

.story h2    {
    font-size:46px;
    margin-bottom:25px
}

.story p    {
    max-width:600px;
    color:#e5f0f2;
    margin-bottom:15px
}

.story-art    {
    height:290px;
    position:relative
}

.tablet2    {
    position:absolute;
    width:260px;
    height:165px;
    background:#143C4A;
    border:9px solid #193947;
    border-radius:17px;
    right:65px;
    top:30px;
    transform:rotate(-4deg)
}

.story-person    {
    position:absolute;
    width:130px;
    height:180px;
    background:var(--orange);
    border-radius:65px 65px 20px 20px;
    right:10px;
    bottom:0
}

.story-person:before    {
    content:'';
    position:absolute;
    width:90px;
    height:90px;
    background:#8E513D;
    border-radius:50%;
    top:-48px;
    left:20px
}

.values    {
    padding:80px 0
}

.value-grid    {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px
}

.value-grid article    {
    background:var(--white);
    border:1px solid var(--line);
    border-radius:20px;
    padding:25px;
    text-align:center
}

.value-grid article>div    {
    width:58px;
    height:58px;
    border-radius:50%;
    background:var(--orange);
    display:grid;
    place-items:center;
    margin:auto auto 16px;
    font-size:25px
}

.value-grid h3    {
    margin-bottom:7px
}

@media(max-width:950px)
   {
    .header nav   {
        margin-left:auto
    }

    .hero,.about,.story-grid   {
        grid-template-columns:1fr
    }

    .hero   {
        text-align:center
    }

    .hero p   {
        margin-inline:auto
    }

    .hero-art   {
        max-width:520px;
        width:100%;
        margin:auto
    }

    .steps   {
        grid-template-columns:1fr
    }

    .value-grid   {
        grid-template-columns:repeat(2,1fr)
    }

    .mission   {
        grid-template-columns:70px 1fr
    }

    .divider   {
        display:none
    }

    .mission p   {
        grid-column:1/-1
    }

}

@media(max-width:600px)
   {
    .header   {
        height:auto;
        min-height:78px;
        padding:0 16px;
        gap:15px;
        flex-wrap:wrap
    }

    .brand   {
        width:140px
    }

    .brand img   {
        width:135px
    }

    .header nav   {
        gap:15px;
        font-size:13px;
        order:3;
        width:100%;
        justify-content:center
    }

    .header nav a   {
        padding:27px 0 23px
    }

    .tools   {
        display:flex;
        margin-left:0
    }

    .settings   {
        width:46px;
        height:46px
    }

    .container   {
        width:calc(100% - 30px)
    }

    .hero   {
        padding:50px 0
    }

    .hero h1,.about h1   {
        font-size:40px
    }

    .hero-art   {
        height:340px
    }

    .student   {
        right:0;
        transform:scale(.85);
        transform-origin:bottom right
    }

    .how,.story,.values   {
        padding:60px 0
    }

    .heading h2   {
        font-size:33px
    }

    .callout   {
        grid-template-columns:1fr;
        padding:30px;
        margin-top:45px
    }

    .callout-art   {
        display:none
    }

    .site-footer  {
        flex-direction: column;
        text-align: center;
        padding: 28px 20px;
        gap: 14px;
    }

    .about-art   {
        height:260px
    }

    .mission   {
        grid-template-columns:1fr;
        text-align:center;
        padding:25px
    }

    .mission-icon   {
        margin:auto
    }

    .story h2   {
        font-size:36px
    }

    .value-grid   {
        grid-template-columns:1fr
    }

}

/* Ilustração em coluna própria: não se desloca quando o texto ou botões mudam. */
.hero    {
    position:relative;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}

.hero-copy    {
    min-width:0;
}

.hero-art    {
    height:430px;
    min-width:0;
    position:relative;
}

.hero-art .blob    {
    right:25px;
    top:45px;
}

.hero-art .student    {
    right:45px;
    bottom:0;
}

.hero-art .spark    {
    position:absolute;
    color:var(--orange);
    font-size:30px;
}

.hero-art .s1    {
    right:20px;
    top:65px;
}

.hero-art .s2    {
    left:35px;
    top:110px;
}

@media(max-width:760px)    {
    .hero    {
        grid-template-columns:1fr;
        gap:10px;
        padding:45px 0 25px;
    }

    .hero-art    {
        width:min(100%,430px);
        margin:0 auto;
        height:360px;
    }

    .hero-art .blob    {
        right:25px;
        top:25px;
        width:300px;
        height:280px;
    }

    .hero-art .student    {
        right:35px;
        bottom:0;
        transform:scale(.88);
        transform-origin:bottom right;
    }

}