e não : quem carrega
desce mesmo, e quem navega por teclado apanha-o na ordem certa. */
.hero__scroll{
position:absolute; left:50%; bottom:clamp(1.75rem,4vw,3rem);
z-index:2;
display:grid; place-items:center;
padding:.35rem;
color:#fff; text-decoration:none;
animation:hero-saltar 2.2s var(--ease) infinite;
}
.hero__mouse{
display:block; width:26px; height:42px;
/* raio pela metade da largura: sem isto deixa de se ler como um rato */
border:2px solid rgba(255,255,255,.6);
border-radius:13px;
transition:border-color .25s var(--ease);
}
.hero__wheel{
display:block; width:3px; height:8px;
margin:7px auto 0;
border-radius:2px;
background:rgba(255,255,255,.9);
animation:hero-roda 2.2s var(--ease) infinite;
}
.hero__scroll:hover .hero__mouse,
.hero__scroll:focus-visible .hero__mouse{ border-color:#fff; }
/* O salto leva o translateX(-50%) dentro: sem ele o rato saltava para o
lado ao arrancar a animação. */
@keyframes hero-saltar{
0%,100%{ transform:translate(-50%,0); }
50% { transform:translate(-50%,8px); }
}
@keyframes hero-roda{
0% { opacity:0; transform:translateY(-4px); }
30% { opacity:1; }
70% { opacity:1; transform:translateY(10px); }
100%{ opacity:0; transform:translateY(10px); }
}
/* Em ecrãs baixos ao deitado o hero mal tem altura: o rato só roubava espaço. */
@media (max-width:960px) and (orientation:landscape) and (max-height:520px){
.hero__scroll{ display:none; }
}
@media (prefers-reduced-motion:reduce){
.hero__scroll{ animation:none !important; transform:translateX(-50%) !important; }
.hero__wheel{ animation:none !important; }
}
/* ---------- 29. Botão de contacto no topo, em ecrã estreito ---------- */
/* Deixou de viver na gaveta e passou a partilhar a barra com os ícones:
encolhe para caber ao lado deles sem empurrar a marca. */
@media (max-width:960px){
.nav__cta .btn{ padding:.6rem 1rem; font-size:.9rem; }
}
@media (max-width:560px){
.nav__cta .btn{ padding:.55rem .8rem; font-size:.84rem; }
}
/* ---------- 31. Cartão de produto no telemóvel ---------- */
/*
* O que este bloco escondia — referência comprida, selo de disponibilidade,
* preço encostado ao botão — saiu do cartão da homepage com o desenho novo.
* Sobrou fotografia, família, nome e uma acção, que cabem nas duas colunas
* de telemóvel sem se atropelarem.
*
* A regra que fica é a da família: em coluna estreita, é a única linha de
* monoespaçado do cartão e não pode partir a meio de uma palavra.
*/
@media (max-width:680px){
.produtos--destaque .prod__ref{ overflow-wrap:anywhere; }
}