/* Carrossel da abertura. Acrescenta sobre style.css: as fotos, frases, setas, arraste, botão e seta para baixo
   continuam os mesmos. Foto com aproximação lenta, sombra neutra para leitura, frase que sobe linha a linha,
   barra de andamento clicável e a onda do site na borda de baixo. */
.hero{--hm:var(--m);--hero-ease:cubic-bezier(.16,1,.3,1);overflow:hidden;background:#0b2f3d}
.hero{--x:var(--m)}
body:not(:has(.workspace))>header{padding-left:var(--m);padding-right:var(--m)}
.hero .slides img{transition:opacity 1.1s ease;transform-origin:50% 55%}
@media (prefers-reduced-motion:no-preference){
 .hero .slides img{animation:kb-a 22s ease-in-out infinite alternate}
 .hero .slides img:nth-child(4n+2){animation-name:kb-b;animation-duration:24s}
 .hero .slides img:nth-child(4n+3){animation-name:kb-c;animation-duration:20s}
 .hero .slides img:nth-child(4n){animation-name:kb-d;animation-duration:26s}
}
@keyframes kb-a{from{transform:scale(1.03)}to{transform:scale(1.13) translate(-1.5%,-1%)}}
@keyframes kb-b{from{transform:scale(1.12) translate(1.5%,0)}to{transform:scale(1.03)}}
@keyframes kb-c{from{transform:scale(1.05) translate(0,1.5%)}to{transform:scale(1.13) translate(1%,-1%)}}
@keyframes kb-d{from{transform:scale(1.11) translate(-1%,-1%)}to{transform:scale(1.03) translate(1%,1%)}}

/* Sombra neutra só do lado esquerdo (onde fica a frase) e no topo (menu) */
.hero .hero-shade{display:block;background:linear-gradient(90deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.16) 30%,rgba(0,0,0,0) 48%),linear-gradient(180deg,rgba(0,0,0,.22) 0%,rgba(0,0,0,0) 15%)}
.hero .hero-copy h1,.hero[data-copy-position] .hero-copy p{text-shadow:0 1px 14px rgba(0,0,0,.28)}

/* Frase: compacta, encostada à esquerda, muda de altura a cada foto (alto, meio, embaixo) */
.hero[data-copy-position] .hero-copy{--x:var(--m);position:absolute;left:var(--x);right:auto;width:min(760px,calc(100% - 2 * var(--x)));max-width:none;transform:none;text-align:left;padding:0;z-index:3;top:auto;bottom:auto}
.hero[data-spot="alto"] .hero-copy{top:clamp(130px,22vh,210px)}
.hero[data-spot="meio"] .hero-copy{top:38%}
.hero[data-spot="baixo"] .hero-copy{bottom:clamp(120px,9vw,170px)}
.hero .hero-copy h1{font:700 clamp(34px,3.9vw,64px)/1.03 Manrope,sans-serif;letter-spacing:-.045em;color:#fff;text-shadow:none;white-space:normal;margin:0 0 14px;text-wrap:balance}
.hero .hero-copy h1 .hl{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.hero .hero-copy h1 .hl>span{display:block}
@media (prefers-reduced-motion:no-preference){
 .hero .hero-copy h1 .hl>span{animation:hl-up .9s var(--hero-ease) both;animation-delay:calc(var(--i) * 110ms + 60ms)}
 .hero[data-copy-position] .hero-copy p{animation:hero-fade .8s ease .3s both}
}
@keyframes hl-up{from{transform:translateY(106%)}}
@keyframes hero-fade{from{opacity:0;transform:translateY(8px)}}
.hero[data-copy-position] .hero-copy p{font-size:clamp(16px,1.15vw,20px);line-height:1.5;max-width:40ch;color:rgba(255,255,255,.9);text-shadow:none;margin:0 0 22px}

/* Botão: retângulo normal; no hover a borda de baixo vira onda (efeito comum aos botões, em secoes.css) */
.hero .button.light{display:inline-flex;align-items:center;gap:14px;min-height:0;padding:16px 26px;border:0;border-radius:0;background:#9bd6cc;color:#063b50;font-size:15px;font-weight:700;letter-spacing:0}
.hero .button.light:hover{background:#b3e2d9;color:#063b50;border:0;text-shadow:none}
.hero .button.light span{display:inline-block;transition:transform .4s var(--hero-ease)}
.hero .button.light:hover span{transform:translateY(3px)}

/* Controles numa linha só, acima da onda: andamento, setas e seta para baixo */
.hero-progress{display:flex;gap:4px;align-items:center;height:28px;width:min(240px,100%);margin-top:18px}
.hero-progress button{flex:1;height:28px;padding:0;border:0;background:none;cursor:pointer;display:flex;align-items:center}
.hero-progress i{display:block;width:100%;height:3px;background:rgba(255,255,255,.3);position:relative;overflow:hidden;transition:height .2s ease}
.hero-progress button:hover i,.hero-progress button:focus-visible i{height:6px}
.hero-progress i:after{content:'';position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left}
.hero-progress .done i:after{transform:none}
.hero-progress .on i:after{animation:hero-prog var(--slide-ms,7000ms) linear forwards}
.hero:has(.hero-copy:hover,.hero-progress:hover,.carousel-side:hover,.down:hover,:focus-visible) .hero-progress .on i:after{animation-play-state:paused}
@keyframes hero-prog{to{transform:none}}
.hero .carousel-side,.hero .down{position:absolute;z-index:4;top:auto;bottom:clamp(60px,5vw,88px);width:48px;height:44px;border:0;border-radius:0;background:rgba(255,255,255,.16);color:#fff;display:grid;place-items:center;transform:none;transition:background-color .25s ease,color .25s ease}
.hero .carousel-side{font-size:30px;line-height:1;padding:0 0 3px}
.hero .carousel-side:hover,.hero .down:hover{background:#fff;color:#063b50}
.hero .carousel-side.prev{left:auto;right:calc(var(--x,64px) + 112px)}
.hero .carousel-side.next{right:calc(var(--x,64px) + 56px)}
.hero .down{left:auto;right:var(--x,64px)}
.hero .down:hover:before{border-color:#063b50}



/* Mar na borda de baixo: a mesma onda dos separadores do site, baixa e fina.
   A onda branca e a linha verde-água têm o mesmo desenho e a mesma velocidade, então andam juntas. */
.hero .hero-wave{--a:360px;--b:520px;--wl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 60' preserveAspectRatio='none'%3E%3Cpath d='M0 34Q60 10 120 34T240 34' fill='none' stroke='%23000' stroke-width='2.6'/%3E%3C/svg%3E");position:absolute;left:0;right:0;bottom:-1px;margin:0;height:clamp(40px,3.4vw,60px);z-index:3;background:transparent;overflow:hidden}
.hero .hero-wave:before,.hero .hero-wave:after,.hero .hero-wave i{content:'';position:absolute;left:0;bottom:0;width:calc(100% + var(--a));height:100%;-webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;-webkit-mask-size:var(--a) 100%;mask-size:var(--a) 100%;-webkit-mask-position:0 100%;mask-position:0 100%;will-change:transform;animation:hw-a 18s linear infinite}
.hero .hero-wave:before{background:#fff;-webkit-mask-image:var(--wave-below);mask-image:var(--wave-below);z-index:2}
.hero .hero-wave:after{background:var(--mint);-webkit-mask-image:var(--wl);mask-image:var(--wl);z-index:3;opacity:.85}
.hero .hero-wave i{display:block;width:calc(100% + var(--b));background:rgba(255,255,255,.3);-webkit-mask-image:var(--wave-below);mask-image:var(--wave-below);-webkit-mask-size:var(--b) 100%;mask-size:var(--b) 100%;-webkit-mask-position:-140px 100%;mask-position:-140px 100%;animation:hw-b 30s linear infinite reverse;z-index:1}
@keyframes hw-a{to{transform:translateX(calc(-1 * var(--a)))}}
@keyframes hw-b{to{transform:translateX(calc(-1 * var(--b)))}}
@media(max-width:650px){.hero .hero-wave{--a:240px;--b:380px;height:34px}}
@media (prefers-reduced-motion:reduce){
 .hero .hero-wave:before,.hero .hero-wave:after,.hero .hero-wave i{animation:none}
 .hero .slides img{animation:none}
 .hero-progress .on i:after{animation:none;transform:none}
}
@media(max-width:650px){
 .hero .hero-shade{background:linear-gradient(90deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,.14) 100%),linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 16%)}
 .hero[data-copy-position] .hero-copy{--x:20px;width:calc(100% - 40px)}
 .hero[data-spot="alto"] .hero-copy{top:120px}
 .hero[data-spot="meio"] .hero-copy{top:38%}
 .hero[data-spot="baixo"] .hero-copy{bottom:116px}
 .hero .hero-copy h1{font-size:clamp(30px,8.6vw,38px);margin-bottom:10px}
 .hero[data-copy-position] .hero-copy p{font-size:16px;margin-bottom:16px}
 .hero .carousel-side,.hero .down{bottom:56px;width:44px}
 .hero .carousel-side.prev{right:120px}.hero .carousel-side.next{right:70px}
 .hero .down{left:auto;right:20px}
}