/*
 * Tema "clearicons2": o clearicons com o topo da página inicial em fundo claro e a ilustração
 * do site (totem, TV e a linha que liga os dois, em hero.svg). Este arquivo é carregado depois
 * do style.css do clearicons e só traz o que muda.
 */

.hero {
    background: #ffffff;
    border-block-end: 1px solid var(--line);
}

.hero__title {
    color: var(--ink);
}

.hero .search {
    border: 1px solid var(--line-strong);
    box-shadow: 0 10px 28px rgb(20 32 58 / 0.1);
}

.hero .search:focus-within {
    border-color: var(--nav-line);
    box-shadow: 0 0 0 4px rgb(66 141 255 / 0.22), 0 10px 28px rgb(20 32 58 / 0.1);
}

.hero__popular {
    color: var(--muted);
}

.hero__popular a {
    color: var(--link);
    font-weight: 600;
    text-decoration: none;
}

.hero__popular a:hover {
    color: var(--brand-hover);
    text-decoration: underline;
}

.hero__popular a + a::before {
    color: var(--muted);
}