:root{--ink:#292929;--yellow:#f2e500;--ease-out:cubic-bezier(.23,1,.32,1)}
*{box-sizing:border-box}body{margin:0;background:#fff;color:var(--ink);font-family:Montserrat,Arial,sans-serif;-webkit-font-smoothing:antialiased}h1,h2,h3,p,figure,blockquote,ol{margin:0;padding:0}ol{list-style:none}svg{display:block;max-width:100%}button{font:inherit;color:inherit}::selection{background:#f2e500;color:#292929}:focus-visible{outline:2px solid #536eb7;outline-offset:5px}
/* A complete document remains available without motion or JavaScript. */
.canvas{max-width:1300px;margin:auto;padding:30px 24px}.opening{display:flex;align-items:center;justify-content:center;gap:25px;min-height:260px}.opening h1{font-weight:700;width:335px}.opening h1>span{display:block;font-size:25px;line-height:1.06;text-transform:uppercase;letter-spacing:-.02em}.opening em{display:block;font:normal 145px/.8 Manuscrita,cursive;letter-spacing:-.02em;margin-top:-12px;white-space:nowrap}.opening-rule{height:1px;width:245px;background:#545454;transform-origin:0 50%}.axes-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;max-width:980px;margin:25px auto}.axis{border:1px solid #b5b5b5;background:#fff;border-radius:0 27px 0 27px;min-height:132px;display:flex;align-items:center;justify-content:center;padding:18px 12px;text-align:center;transform-origin:0 0}.axis h2{font-size:12px;line-height:1.35;text-transform:uppercase;letter-spacing:-.03em;color:#080808;font-weight:700}.yellow-art,.axis-links,.experience-line,.pink-art{display:none}.experience-list{max-width:980px;margin:55px auto;display:flex;flex-wrap:wrap;justify-content:center;gap:22px 30px}.experience{font-size:12px;text-transform:uppercase;text-align:center;line-height:1.4}.ods-heading{text-align:center;margin:70px auto 35px}.ods-heading h2{font:normal 92px/1 Manuscrita,cursive}.ods-heading p{font-size:11px;text-transform:uppercase;letter-spacing:.12em;margin-top:15px}.carousel{margin:0 auto 65px;width:min(720px,100%)}.carousel-window{width:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;scroll-snap-type:x mandatory;cursor:grab;touch-action:pan-x pan-y}.carousel-window::-webkit-scrollbar{display:none}.carousel-window.dragging{scroll-snap-type:none;cursor:grabbing;user-select:none}.carousel-track{display:flex;gap:24px;padding:0 max(0px,calc((100% - 320px)/2)) 12px;width:max-content;min-width:100%}.sdg{flex:0 0 320px;height:320px;padding:18px 16px;background:var(--sdg);color:#fff;position:relative;scroll-snap-align:center;scroll-snap-stop:always;user-select:text}.sdg-top{display:flex;gap:10px;align-items:flex-start}.sdg-number{font-family:'Arial Narrow',Arial,sans-serif;font-size:58px;line-height:.95;font-weight:700}.sdg h3{font-family:'Arial Narrow',Arial,sans-serif;font-size:21px;line-height:1.12;text-transform:uppercase;font-weight:700;max-width:228px;letter-spacing:-.025em}.sdg-icon{position:absolute;left:5%;bottom:5%;width:90%;height:57%}.carousel-controls{display:none;align-items:center;justify-content:center;gap:25px;margin-top:22px}.js .carousel-controls{display:flex}.carousel-controls button{display:grid;place-items:center;width:46px;height:44px;border:1px solid #d1d1cc;border-radius:0;background:#fff;cursor:pointer;transition:background-color 160ms var(--ease-out),opacity 160ms var(--ease-out)}.carousel-controls button:disabled{opacity:.28;cursor:default}.carousel-controls svg{width:25px;fill:none;stroke:currentColor;stroke-width:1.2}.carousel-count{font-size:12px;letter-spacing:.08em;min-width:60px;text-align:center;font-variant-numeric:tabular-nums}.testimonials{max-width:980px;margin:70px auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.testimonial{min-height:290px;padding:43px 20px 30px;text-align:center;color:#fff;transform-origin:0 0}.testimonial blockquote{font-family:AvenirHeavy,Arial,sans-serif;font-size:14px;line-height:1.58;font-weight:400}.testimonial figcaption{font-family:LuloClean,Montserrat,sans-serif;font-size:12px;line-height:1.6;font-weight:400;letter-spacing:.08em;text-transform:uppercase;margin-top:30px}.testimonial-yellow{background:#f2bf5e}.testimonial-blue{background:#536eb7}.testimonial-green{background:#75cba8}.testimonial-coral{background:#ff6161}.closing{padding:30px 0 65px}.closing figure{max-width:639px;margin:auto;text-align:center}.closing blockquote{font:400 61px/1 Sail,Georgia,serif;letter-spacing:-.05em}.closing figcaption{font-size:12px;font-weight:300;text-transform:uppercase;margin-top:37px;line-height:1.4}
/* One sticky stage; the scroll changes poses inside it. */
.is-motion .story{height:560svh;position:relative}.is-motion .stage{position:sticky;top:0;height:100svh;overflow:hidden;background:#fff;isolation:isolate}.is-motion .canvas{position:absolute;left:50%;top:50%;max-width:none;margin:0;padding:0;transform-origin:50% 50%;isolation:isolate}.is-motion .layer{position:absolute;inset:0;visibility:hidden;pointer-events:none;transform-origin:50% 50%}.is-motion .layer.is-active{pointer-events:auto}.is-motion .opening{min-height:0}.is-motion .axes-grid,.is-motion .experience-list,.is-motion .testimonials{display:block;margin:0;max-width:none}.is-motion .axis{position:absolute;left:0;top:0;width:400px;height:320px;padding:30px;border-radius:0 83px 0 83px;min-height:0;border-width:3.4px;will-change:transform,opacity}.is-motion .axis h2{font-size:38px;line-height:1.35;letter-spacing:-.035em}.is-motion .yellow-art{display:block;position:absolute;left:0;top:0;width:1300px;height:731px;max-width:none;pointer-events:none;z-index:-1}.is-motion .axis-links{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.yellow-reveal,.pink-reveal{stroke-dasharray:1;stroke-dashoffset:1}.axis-links path,.timeline-path{stroke-dasharray:1;stroke-dashoffset:1}.is-motion .experience-line{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.is-motion .experience{position:absolute;left:0;top:0;width:138px;font-size:12px;line-height:1.4;letter-spacing:-.025em;transform-origin:50% 50%}.is-motion .experience span{display:block}.is-motion .pink-art{display:block;position:absolute;left:0;top:-250px;width:1300px;height:731px;max-width:none;pointer-events:none;z-index:-1}.is-motion .ods-heading{position:absolute;left:0;top:0;width:100%;margin:0;transform-origin:50% 0}.is-motion .ods-heading h2{font-size:100px;line-height:1}.is-motion .ods-heading p{font-size:12px;margin-top:15px}.is-motion .carousel{position:absolute;left:290px;top:260px;width:720px;margin:0;transform-origin:50% 50%}.is-motion .testimonials{position:absolute;inset:0}.is-motion .testimonial{position:absolute;left:0;top:0;width:380px;height:455px;min-height:0;padding:50px 36px 30px;will-change:transform,opacity}.is-motion .testimonial blockquote{font-size:22px;line-height:1.58}.is-motion .testimonial figcaption{font-size:18px;line-height:1.6;margin-top:36px}.is-motion .closing{display:flex;align-items:center;justify-content:center;padding:0}.is-motion .closing figure{margin:0}.is-motion .closing blockquote{font-size:61px}.is-motion .closing figcaption{font-size:12px}
.is-motion .canvas[data-layout=compact] .opening{gap:12px}.is-motion .canvas[data-layout=compact] .opening h1{width:247px}.is-motion .canvas[data-layout=compact] .opening h1>span{font-size:19px}.is-motion .canvas[data-layout=compact] .opening em{font-size:107px;margin-top:-8px}.is-motion .canvas[data-layout=compact] .opening-rule{width:44px}.is-motion .canvas[data-layout=compact] .axis{width:300px;height:240px;padding:25px;border-width:2.3px;border-radius:0 60px 0 60px}.is-motion .canvas[data-layout=compact] .axis h2{font-size:28px}.is-motion .canvas[data-layout=compact] .yellow-art{top:290px;width:390px;height:219.3px}.is-motion .canvas[data-layout=compact] .experience{width:152px;font-size:12px;line-height:1.3}.is-motion .canvas[data-layout=compact] .pink-art{top:65px;width:390px;height:219.3px}.is-motion .canvas[data-layout=compact] .ods-heading h2{font-size:78px}.is-motion .canvas[data-layout=compact] .ods-heading p{font-size:10px;line-height:1.7;letter-spacing:.08em;max-width:300px;margin:8px auto 0}.is-motion .canvas[data-layout=compact] .carousel{left:20px;top:255px;width:350px}.is-motion .canvas[data-layout=compact] .carousel-track{gap:18px;padding-inline:43px}.is-motion .canvas[data-layout=compact] .sdg{flex-basis:264px;height:264px;padding:16px 13px}.is-motion .canvas[data-layout=compact] .sdg-number{font-size:49px}.is-motion .canvas[data-layout=compact] .sdg h3{font-size:18px}.is-motion .canvas[data-layout=compact] .carousel-controls{margin-top:25px}.is-motion .canvas[data-layout=compact] .testimonial{width:320px;height:410px;padding:36px 26px}.is-motion .canvas[data-layout=compact] .testimonial blockquote{font-size:19px}.is-motion .canvas[data-layout=compact] .testimonial figcaption{font-size:14px;line-height:1.7;margin-top:28px}.is-motion .canvas[data-layout=compact] .closing figure{width:346px}.is-motion .canvas[data-layout=compact] .closing blockquote{font-size:44px;line-height:1.06}.is-motion .canvas[data-layout=compact] .closing figcaption{font-size:11px;margin-top:30px}
@media(hover:hover) and (pointer:fine){.carousel-controls button:not(:disabled):hover{background:#f4f4ef}}
@media(max-width:800px){.canvas:not([data-layout]){padding:25px 20px}.opening-rule{width:40px}.opening{gap:12px}.opening h1{width:247px}.opening h1>span{font-size:19px}.opening em{font-size:107px;margin-top:-8px}.axes-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.experience-list{font-size:11px;gap:20px}.testimonials{grid-template-columns:repeat(2,minmax(0,1fr))}.closing blockquote{font-size:43px}.closing figure{max-width:560px}}
@media(max-width:500px){.testimonials{grid-template-columns:1fr}.testimonial{min-height:270px}.ods-heading h2{font-size:76px}.ods-heading p{font-size:9px;line-height:1.7}.carousel-track{gap:18px;padding-inline:max(0px,calc((100% - 264px)/2))}.sdg{flex-basis:264px;height:264px}.sdg-number{font-size:49px}.sdg h3{font-size:18px}.closing blockquote{font-size:38px}}
@media(prefers-reduced-motion:reduce){.carousel-controls button{transition:none}}

/* Ritmo mais curto e cenas separadas para explicar a passagem entre os conteúdos. */
.experiences-heading{text-align:center;margin:60px auto 30px;max-width:850px}
.experiences-heading h2{font-size:38px;line-height:1.2;font-weight:600;letter-spacing:-.04em}
.experiences-heading p{font-size:25px;line-height:1.45;margin-top:14px}
.ods-context{text-align:center;font-size:16px;line-height:1.4;text-transform:uppercase;letter-spacing:.08em;margin:20px auto}
.families-intro{text-align:center;margin:70px auto 30px}
.families-intro h2{font:400 145px/1 Manuscrita,cursive}
.is-motion .experiences-heading{position:absolute;left:0;top:0;width:100%;max-width:none;margin:0;transform-origin:50% 0}
.is-motion .experiences-heading h2{font-size:48px}
.is-motion .experiences-heading p{font-size:30px;margin:17px auto 0;max-width:850px}
.is-motion .experience{width:192px;font-size:23px;line-height:1.35;letter-spacing:-.035em}
.is-motion .ods-heading h2{font-size:148px;line-height:1.1}
.is-motion .ods-heading p{font-size:25px;letter-spacing:0;text-transform:none;line-height:1.5;margin-top:20px}
.is-motion .ods-context{position:absolute;left:0;top:150px;width:100%;margin:0;font-size:19px}
.is-motion .carousel{left:124px;top:315px;width:1052px}
.is-motion .canvas[data-layout=wide] .carousel-track{gap:20px;padding-inline:0}
.is-motion .canvas[data-layout=wide] .sdg{flex-basis:248px;height:248px;padding:15px 12px;scroll-snap-align:start}
.is-motion .canvas[data-layout=wide] .sdg-number{font-size:45px}
.is-motion .canvas[data-layout=wide] .sdg h3{font-size:17px;line-height:1.15}
.is-motion .families-intro{display:flex;align-items:center;justify-content:center;margin:0}
.is-motion .families-intro h2{font-size:165px;line-height:1.1}
.is-motion .canvas[data-layout=compact] .experiences-heading h2{font-size:30px;line-height:1.25;max-width:350px;margin:auto}
.is-motion .canvas[data-layout=compact] .experiences-heading p{font-size:20px;line-height:1.45;max-width:340px;margin-top:16px}
.is-motion .canvas[data-layout=compact] .experience{width:160px;font-size:16px;line-height:1.3}
.is-motion .canvas[data-layout=compact] .ods-heading h2{font-size:107px;line-height:1.1}
.is-motion .canvas[data-layout=compact] .ods-heading p{font-size:20px;letter-spacing:0;line-height:1.5;max-width:330px;margin:15px auto 0}
.is-motion .canvas[data-layout=compact] .ods-context{top:140px;font-size:13px;line-height:1.7;max-width:350px;left:20px}
.is-motion .canvas[data-layout=compact] .families-intro h2{font-size:112px}
@media(max-width:540px){.experiences-heading h2{font-size:28px}.experiences-heading p{font-size:18px}.families-intro h2{font-size:100px}}

/* Nomes longos permanecem inteiros dentro de sua área de leitura. */
.is-motion .canvas[data-layout=wide] .experience[data-experience="4"]{font-size:19.5px}
.is-motion .canvas[data-layout=wide] .experience[data-experience="5"]{font-size:17px}
.is-motion .canvas[data-layout=compact] .experience[data-experience="5"]{font-size:14px}

/* Símbolos dos arquivos vetoriais oficiais: proporção original e margem de segurança. */
.sdg-icon{left:10%;bottom:7%;width:80%;height:55%;overflow:visible}
/* Títulos preferencialmente em uma linha, com no máximo dois blocos de texto. */
.chapter-title{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;column-gap:16px;row-gap:0;width:max-content;max-width:calc(100% - 40px);margin-inline:auto;text-align:center}
.chapter-title .title-label{display:block;flex:0 0 auto;white-space:nowrap;font-family:Montserrat,Arial,sans-serif;font-style:normal;font-size:25px;line-height:1.15;font-weight:700;letter-spacing:-.02em;text-transform:uppercase}
.chapter-title .title-script{display:block;flex:0 0 auto;font-family:Manuscrita,cursive;font-size:112px;line-height:.95;font-style:normal;font-weight:400;letter-spacing:-.02em;margin:0;white-space:nowrap}
.opening h1.chapter-title{width:max-content;max-width:calc(100% - 64px)}
.opening .opening-rule{flex:1 1 0;min-width:12px;max-width:225px}
.is-motion .canvas[data-layout=compact] .opening h1.chapter-title{width:max-content;max-width:calc(100% - 64px)}
.is-motion .canvas[data-layout=compact] .chapter-title{column-gap:12px}
.is-motion .canvas[data-layout=compact] .chapter-title .title-label{font-size:17px;line-height:1.15}
.is-motion .canvas[data-layout=compact] .chapter-title .title-script{font-size:88px;line-height:.95;margin:0}
@media(max-width:800px){.chapter-title{column-gap:12px}.chapter-title .title-label{font-size:17px}.chapter-title .title-script{font-size:88px;margin:0}}

/* A mesma moldura de linhas acompanha todos os títulos de capítulo. */
.title-row{display:flex;align-items:center;justify-content:center;gap:25px;width:100%;min-width:0}
.title-row .chapter-title{flex:0 1 auto;margin-inline:0;max-width:calc(100% - 64px)}
.title-rule{display:block;height:1px;background:#545454;flex:1 1 0;min-width:12px;max-width:225px}
.is-motion .canvas[data-layout=compact] .title-row{gap:12px}
@media(max-width:800px){.title-row{gap:12px}}

/* Uma pausa para apresentar a proposta bilíngue entre os eixos e as experiências. */
.bilingual-layer{padding:90px 24px;text-align:center}
.bilingual-content{max-width:840px;margin:auto}
.bilingual-kicker{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#565656}
.bilingual-content h2{margin:24px auto 0;font-size:38px;line-height:1.26;font-weight:600;letter-spacing:-.035em}
.bilingual-content h2 em{display:block;font:normal 3.8em/.85 Manuscrita,cursive;letter-spacing:0;color:#292929}
.bilingual-stroke{display:block;width:104px;height:7px;margin:36px auto 32px;background:#f2e500;border-radius:60% 42% 60% 40%;transform:rotate(-2deg)}
.bilingual-copy{max-width:690px;margin:auto;font-size:20px;line-height:1.7}
.is-motion .story{height:700svh}
.is-motion .bilingual-layer{display:flex;align-items:center;justify-content:center;padding:0}
.is-motion .bilingual-content{width:860px}
.is-motion .bilingual-content h2{font-size:48px}
.is-motion .bilingual-copy{font-size:23px;line-height:1.7}
.is-motion .canvas[data-layout=compact] .bilingual-content{width:340px}
.is-motion .canvas[data-layout=compact] .bilingual-content h2{font-size:29px;line-height:1.45}
.is-motion .canvas[data-layout=compact] .bilingual-content h2 em{font-size:3.4em;line-height:.85}
.is-motion .canvas[data-layout=compact] .bilingual-copy{font-size:17px;line-height:1.7}
.is-motion .canvas[data-layout=compact] .bilingual-stroke{margin:28px auto}
@media(max-width:540px){.bilingual-layer{padding:65px 0}.bilingual-content h2{font-size:27px;line-height:1.45}.bilingual-copy{font-size:16px;line-height:1.7}}

@media(max-width:540px){.bilingual-content h2 em{font-size:3.4em;line-height:.85}}

/* Centraliza a linha e os rótulos juntos depois da saída do título. */
.is-motion .experience-line,.is-motion .experience{translate:0 -65px}
.is-motion .canvas[data-layout=compact] .experience-line,.is-motion .canvas[data-layout=compact] .experience{translate:0 -85px}

/* Quatro depoimentos legíveis na composição de duas colunas. */
.is-motion .canvas[data-layout=compact] .testimonial blockquote{font-size:22px}
.is-motion .canvas[data-layout=compact] .testimonial figcaption{font-size:17px;line-height:1.4;margin-top:24px}

/* Faixa dos ODS: movimento automático, sem navegação horizontal. */
.carousel-window{overflow:hidden;scroll-snap-type:none;cursor:default;touch-action:pan-y}
.carousel-track{padding:0;list-style:none}
.sdg-copy{pointer-events:none}
.is-motion .ods-context{top:225px}
.is-motion .carousel{top:300px}
.is-motion .canvas[data-layout=compact] .ods-context{top:225px}
.is-motion .canvas[data-layout=compact] .carousel{top:300px}
.is-motion .canvas[data-layout=compact] .carousel-track{gap:14px;padding:0}
.is-motion .canvas[data-layout=compact] .sdg{flex-basis:110px;height:110px;padding:8px 6px}
.is-motion .canvas[data-layout=compact] .sdg-number{font-size:24px}
.is-motion .canvas[data-layout=compact] .sdg h3{font-size:9px;line-height:1.15}
.is-motion .canvas[data-layout=compact] .sdg-top{gap:5px}
@media(prefers-reduced-motion:reduce){
 .carousel{width:100%}
 .carousel-track{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;width:100%;padding:0;transform:none!important}
 .carousel-track .sdg{width:100%;height:auto;aspect-ratio:1;padding:12px}
 .carousel-track .sdg-number{font-size:32px}
 .carousel-track .sdg h3{font-size:13px}
 .sdg-copy{display:none}
}

html:not(.is-motion) .carousel{width:100%}
html:not(.is-motion) .carousel-track{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;width:100%;padding:0}
html:not(.is-motion) .carousel-track .sdg{width:100%;height:auto;aspect-ratio:1;padding:12px}
html:not(.is-motion) .carousel-track .sdg-number{font-size:32px}
html:not(.is-motion) .carousel-track .sdg h3{font-size:13px}
html:not(.is-motion) .sdg-copy{display:none}

/* Frase principal com destaque manuscrito; o traço fica abaixo da faixa de cards. */
.ods-heading .chapter-title{column-gap:14px;row-gap:4px}
.ods-heading .chapter-title .title-label{white-space:normal}
.ods-context{font-weight:800}
.is-motion .pink-art{top:575px;height:140px;transform:scaleY(-1);overflow:hidden}
.is-motion .canvas[data-layout=compact] .pink-art{top:440px;height:80px}
.is-motion .canvas[data-layout=compact] .ods-heading .chapter-title{column-gap:10px;row-gap:4px}
@media(max-width:800px){
 .ods-heading .chapter-title .title-label{font-size:17px}
 .ods-heading .chapter-title .title-script{font-size:88px}
}

/* Título e descrição formam um único cabeçalho com espaçamento natural. */
.is-motion .ods-heading .ods-context{position:static;width:auto;max-width:none;margin:12px 24px 0;font-size:19px;line-height:1.4;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.is-motion .canvas[data-layout=compact] .ods-heading .ods-context{position:static;max-width:350px;margin:10px auto 0;font-size:13px;line-height:1.7}

/* O traço acompanha apenas “bilí”, deixando livre a descendente do g. */
.bilingual-word{display:inline-block;white-space:nowrap}
.bilingual-lead{display:inline-block;position:relative}
.bilingual-lead::after{content:"";position:absolute;left:.04em;right:.02em;bottom:-.035em;height:.045em;min-height:3px;background:#f2e500;border-radius:60% 42% 60% 40%;transform:rotate(-2deg);pointer-events:none}

/* Uma cena: título fixo e ramificações alinhadas às duas faixas de nomes. */
.experience-branch{fill:none;stroke:#525252;stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:1}
.experience-node{fill:#525252;opacity:0}
.experience-branch-arrow{fill:none;stroke:#525252;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.is-motion .experience-line,.is-motion .experience{translate:none}
.is-motion .experience{display:flex;flex-direction:column;align-items:center;height:95px;font-size:22px}
.is-motion .experience[data-side=above]{justify-content:flex-end}
.is-motion .experience[data-side=below]{justify-content:flex-start}
.is-motion .canvas[data-layout=wide] .experience[data-experience="4"]{font-size:18px}
.is-motion .canvas[data-layout=wide] .experience[data-experience="5"]{font-size:17px}
.is-motion .canvas[data-layout=compact] .experience{width:142px;height:62px;font-size:14px;justify-content:center;align-items:stretch}
.is-motion .canvas[data-layout=compact] .experience[data-side=left]{text-align:right}
.is-motion .canvas[data-layout=compact] .experience[data-side=right]{text-align:left}
.is-motion .experiences-heading .chapter-title{column-gap:12px;row-gap:4px}
.experience span{word-break:normal;overflow-wrap:normal;hyphens:none}
.experience[data-experience="4"] span,.experience[data-experience="5"] span{white-space:nowrap}
.is-motion .canvas[data-layout=compact] .experience[data-experience="4"],.is-motion .canvas[data-layout=compact] .experience[data-experience="5"]{font-size:12px}