@property --title-line { syntax: "<number>"; inherits: true; initial-value: 1; }
/* Movimento v2: interacção visível, sem interferir com a navegação. */
.site-header{position:sticky;top:0;z-index:30;isolation:isolate;transition:height .32s cubic-bezier(.22,1,.36,1)}
.site-header::before{content:"";position:absolute;inset:0 auto 0 50%;width:100vw;transform:translateX(-50%);background:var(--ivory);z-index:-1;border-bottom:1px solid transparent;transition:border-color .3s}
.site-header.is-scrolled{height:76px}.site-header.is-scrolled::before{border-color:var(--line)}
.reading-progress{position:fixed;top:0;left:0;width:100%;height:3px;background:var(--green);transform:scaleX(var(--reading-progress,0));transform-origin:left;z-index:80;pointer-events:none}
.home-hero h1>.title-line{display:block;overflow:clip;padding-bottom:.09em;margin-bottom:-.09em}
.home-hero h1>.title-line>span{display:block;transform-origin:left bottom}
.title-practice{width:max-content;max-width:100%;position:relative;padding-right:.08em}
.title-practice::after{content:"";height:3px;background:var(--green);position:absolute;left:0;right:0;bottom:0;transform:scaleX(var(--title-line,1));transform-origin:left;opacity:.38}
.motion-ready .hero-type{transform:translateY(var(--hero-y,0px));will-change:transform}
.learning-panorama{overflow:hidden;clip-path:inset(0 var(--panorama-inset,0%) 0 var(--panorama-inset,0%));transition:clip-path .12s linear}
.learning-panorama img{transform:scale(var(--panorama-scale,1));will-change:transform;transition:transform .18s linear}
.area-row,.area-sport{grid-template-columns:minmax(250px,1fr) minmax(180px,.72fr) minmax(170px,.58fr) 40px;gap:28px;min-height:168px;padding-block:18px;transition:background .25s,min-height .35s}
.area-row h2{font-size:clamp(44px,5.3vw,76px);transition:transform .45s cubic-bezier(.22,1,.36,1);transform-origin:left center}
.area-row p,.area-sport p{width:auto;max-width:26ch;font-size:18px;padding:0}
.area-visual{height:126px;width:100%;overflow:hidden;clip-path:inset(9% 7% 9% 7%);transition:clip-path .55s cubic-bezier(.22,1,.36,1);pointer-events:none}
.area-row .area-visual img{display:block;position:static;width:100%;height:100%;object-fit:cover;opacity:.58;z-index:auto;transform:scale(1.08) translate(var(--image-x,0px),var(--image-y,0px));transition:opacity .4s,transform .6s cubic-bezier(.22,1,.36,1)}
.area-row:hover,.area-row:focus-visible{background:transparent}.area-row::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--sage);opacity:0;transform:scaleY(.7);transition:opacity .3s,transform .5s var(--ease)}
.area-row:hover::before,.area-row:focus-visible::before{opacity:.18;transform:scaleY(1)}
.area-row:hover h2,.area-row:focus-visible h2{transform:translateX(10px)}
.area-row:hover .area-visual,.area-row:focus-visible .area-visual{clip-path:inset(0)}
.area-row:hover .area-visual img,.area-row:focus-visible .area-visual img{opacity:1;transform:scale(1.02) translate(var(--image-x,0px),var(--image-y,0px))}
.area-row>.icon{transition:transform .35s var(--ease)}.area-row:hover>.icon,.area-row:focus-visible>.icon{transform:translateX(5px) rotate(-35deg)}
.practice-band{position:relative;overflow:clip}
.practice-band::before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:var(--sage);transform:scaleX(var(--band-progress,0));transform-origin:left}
.practice-steps li{padding-top:16px;border-top:1px solid #ffffff60}
.practice-steps li:not(:last-child)::after{content:"";width:22px;height:12px;border-top:1px solid currentColor;top:37px;right:-24px;transform:translateY(0)}
.practice-steps li:not(:last-child)::before{content:"";width:8px;height:8px;border-top:1px solid currentColor;border-right:1px solid currentColor;position:absolute;right:-24px;top:33px;transform:rotate(45deg)}
.portrait{overflow:hidden}.portrait img{transition:transform .9s var(--ease);transform:scale(1.025)}.portrait:hover img{transform:scale(1)}
.learning-step{display:none}.learning-step-fallback{display:inline}.motion-ready .learning-step{display:inline-flex;align-items:center;gap:16px;border:0;background:transparent;padding:8px 0;text-align:left;color:inherit;font:inherit;letter-spacing:inherit;line-height:1.1}
.motion-ready .learning-step-fallback{display:none}
.learning-step::after{content:"";width:12px;height:12px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(-45deg);transition:transform .3s}
.learning-step[aria-pressed="true"]::after{transform:rotate(45deg)}
.training-route-list li{position:relative;transition:background .3s}
.training-route-list li::after{content:"";position:absolute;left:0;right:0;top:-1px;height:3px;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.training-route-list li:has(.learning-step[aria-pressed="true"])::after{transform:scaleX(1)}
.learning-focus:not([hidden]){display:grid;grid-template-columns:.22fr 1fr 1.2fr;gap:32px;align-items:start;margin-top:36px;border-top:1px solid var(--line);padding:30px 0 0;min-height:145px}
.learning-focus .section-label{margin:6px 0 0}.learning-focus h3{font-size:28px;line-height:1.15;max-width:19ch}.learning-focus p[data-focus-copy]{font-size:18px;color:var(--ink)}
.training-example{transition:box-shadow .3s}.training-example:has(details[open]){box-shadow:inset 3px 0 0 var(--green);padding-left:24px;transition:padding .3s,box-shadow .3s}
@media(max-width:1199px){.area-row,.area-sport{grid-template-columns:minmax(240px,1fr) minmax(150px,.65fr) minmax(140px,.55fr) 30px;gap:18px}.area-row h2{font-size:60px}.area-row p,.area-sport p{font-size:16px}.area-visual{height:112px}}
@media(max-width:959px){.area-row,.area-sport{grid-template-columns:minmax(200px,1fr) minmax(140px,.7fr) minmax(110px,.5fr) 28px;gap:16px}.area-row h2{font-size:48px}.area-row p,.area-sport p{font-size:15px}.learning-focus:not([hidden]){grid-template-columns:1fr 1.2fr;gap:20px}.learning-focus>.section-label{grid-column:1/-1}}
@media(max-width:767px){.area-row,.area-sport{grid-template-columns:minmax(0,1fr) 30px;min-height:0;padding:26px 0;gap:10px 20px}.area-row h2{grid-column:1;grid-row:1;font-size:47px}.area-row p,.area-sport p{grid-column:1;grid-row:2;font-size:17px;max-width:34ch}.area-row>.icon{grid-column:2;grid-row:1/3}.area-visual{display:none}.area-row:hover h2,.area-row:focus-visible h2{transform:none}.area-row:active::before{opacity:.18}.site-header.is-scrolled{height:72px}.practice-steps li{grid-template-columns:1fr;gap:0;padding-block:22px}.practice-steps h3,.practice-steps p{grid-column:1}.practice-steps li:not(:last-child)::before,.practice-steps li:not(:last-child)::after{display:none}.learning-panorama img{will-change:auto}.learning-panorama{transition:none}.hero-type{will-change:auto}}
@media(max-width:639px){.learning-focus:not([hidden]){display:block;margin-top:20px;padding-top:24px;min-height:210px}.learning-focus .section-label{margin:0 0 18px}.learning-focus h3{font-size:27px;margin-bottom:16px}.learning-focus p[data-focus-copy]{font-size:17px}.training-example:has(details[open]){padding-left:16px}.title-practice::after{height:2px}.motion-ready .learning-step{gap:12px}.area-row h2{font-size:43px}}
@media(max-width:359px){.area-row h2{font-size:39px}}
@media(prefers-reduced-motion:reduce){.hero-type,.learning-panorama img{transform:none!important}.learning-panorama,.area-visual{clip-path:none!important}.area-row:hover h2,.area-row:focus-visible h2{transform:none}.area-row img{transform:none!important}.title-practice::after{transform:none!important}::view-transition-old(root),::view-transition-new(root){animation:none!important}}
html.motion-reduced .hero-type,html.motion-reduced .learning-panorama img{transform:none!important}html.motion-reduced .learning-panorama,html.motion-reduced .area-visual{clip-path:none!important}html.motion-reduced .area-row img{transform:none!important}html.motion-reduced .title-practice::after{transform:none!important}html.motion-reduced::view-transition-old(root),html.motion-reduced::view-transition-new(root){animation:none!important}

/* A faixa do cabeçalho é pintura, não acrescenta largura à página. */
.site-header::before{inset:0;width:auto;transform:none;box-shadow:0 0 0 100vmax var(--ivory);clip-path:inset(0 -100vmax)}

