/* ============================================================
   home.css — Repaginação editorial da home (ADR-0025)
   A home adota a linguagem que as verticais consolidaram:
   corpo em papel claro (#FAF7F2, mesmo do portal e classificados),
   momento "palco" (noite + brilhos roxo/rosa, canto reto — como
   nos eventos) no hero e no CTA, cor por vertical nos atalhos e
   trilhos do portal reaproveitados (pc-strip, portal-cidade.css).
   Prefixo hm-; mobile-first; tokens da casa reaproveitados.
   ============================================================ */

body.pagina-home {
    --hm-papel: #FAF7F2;
    --hm-tinta: #221D2E;
    --hm-tinta-2: #6E6680;
    --hm-linha: #EFEAE2;
    --hm-noite: #150D24;
    --hm-noite-2: #241436;
    /* Cor por vertical — a mesma paleta dos trilhos do portal */
    --hm-empresas: #7C3AED;
    --hm-autos: #B45309;
    --hm-imoveis: #0E7490;
    --hm-empregos: #047857;
    --hm-eventos: #DB2777;
    --hm-noticias: #2563EB;
    background: var(--hm-papel);
}

/* ── O palco (hero): noite com brilhos, canto reto ─────────── */
.hm-palco {
    background:
        radial-gradient(120% 90% at 15% 0%, rgba(124, 58, 237, .38), transparent 55%),
        radial-gradient(100% 80% at 90% 110%, rgba(244, 63, 94, .28), transparent 55%),
        linear-gradient(160deg, var(--hm-noite-2), var(--hm-noite) 70%);
    border-radius: 0;
    color: #fff;
    padding: 2.4rem 0 2.2rem;
    overflow: hidden;
}

.hm-kicker {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: linear-gradient(90deg, var(--achatudo-roxo, #7C3AED), var(--achatudo-rosa, #F43F5E));
    color: #fff;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .34rem .8rem;
    border-radius: 999px;
}

.hm-palco h1 {
    font-size: clamp(1.9rem, 5.5vw, 3rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.12;
    margin: .8rem 0 .4rem;
    color: #fff;
}

.hm-palco h1 span {
    background: linear-gradient(90deg, #A78BFA, #FB7185);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hm-sub {
    color: rgba(255, 255, 255, .78);
    font-size: .95rem;
    max-width: 620px;
    margin: 0 auto 1.4rem;
}

/* Linha "data · clima · trocar" do palco com cidade (Fase 2) */
.hm-clima {
    color: inherit;
}

.hm-clima i {
    color: #FFD54F;
}

.hm-clima .pc-bc-temp:empty::after {
    content: "--°";
    opacity: .4;
}

.hm-trocar {
    background: none;
    border: 0;
    padding: 0;
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
    text-decoration: underline;
    cursor: pointer;
    opacity: .85;
}

.hm-trocar:hover {
    opacity: 1;
}

/* Selo honesto: cidade definida mas a seção caiu para o Brasil todo */
.hm-selo-brasil {
    display: inline-block;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--hm-tinta-2);
    background: #fff;
    border: 1px solid var(--hm-linha);
    border-radius: 999px;
    padding: .18rem .55rem;
    margin-left: .5rem;
    vertical-align: middle;
}

/* ── Atalhos das verticais (o mapa do que o AchaTudo é) ────── */
.hm-verticais {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .6rem;
    max-width: 720px;
    margin: 1.5rem auto 0;
}

@media (min-width: 768px) {
    .hm-verticais {
        grid-template-columns: repeat(6, 1fr);
    }
}

.hm-vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px; /* controle: rounded ok (seções em canto reto) */
    padding: .85rem .35rem .7rem;
    color: #fff;
    text-decoration: none;
    font-size: .78rem;
    font-weight: 700;
    transition: background .15s ease, transform .15s ease;
}

.hm-vertical:hover {
    background: rgba(255, 255, 255, .15);
    transform: translateY(-2px);
    color: #fff;
}

.hm-vertical i {
    font-size: 1.3rem;
    color: var(--cor, #fff);
}

/* ── Ritmo do corpo: seções sobre o papel ──────────────────── */
.hm-secao {
    padding: 2rem 0;
}

.hm-secao + .hm-secao {
    padding-top: .4rem;
}

/* ── Cabeçalho editorial de seção (kicker colorido + título) ─ */
.hm-cab {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.hm-cab-kicker {
    display: block;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cor, var(--hm-empresas));
    margin-bottom: .15rem;
}

.hm-cab h2 {
    font-size: clamp(1.25rem, 2.6vw, 1.6rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--hm-tinta);
    margin: 0;
}

.hm-vertodos {
    font-size: .82rem;
    font-weight: 800;
    color: var(--hm-tinta-2);
    text-decoration: none;
    white-space: nowrap;
}

.hm-vertodos:hover {
    color: var(--hm-tinta);
}

/* ── Trilhos do portal na home: fundo por vertical ──────────
   (imóveis/autos já têm gradiente no portal-cidade.css; aqui
   entram os que lá ficam sem fundo, com a mesma receita) */
body.pagina-home .pc-strip {
    margin-bottom: 1.1rem;
}

body.pagina-home .pc-strip.eventos {
    background: linear-gradient(135deg, #FBEAF3, #F6DEEC);
}

body.pagina-home .pc-strip.empregos {
    background: linear-gradient(135deg, #E4F5EC, #D8F0E3);
}

/* Preço do card acompanha a cor da vertical do trilho */
body.pagina-home .pc-strip.autos .pc-preco { color: var(--hm-autos); }
body.pagina-home .pc-strip.imoveis .pc-preco { color: var(--hm-imoveis); }
body.pagina-home .pc-strip.empregos .pc-preco { color: var(--hm-empregos); }
body.pagina-home .pc-strip.eventos .pc-preco { color: var(--hm-eventos); }

/* ── CTA final: mesmo momento noite do palco ───────────────── */
.hm-cta {
    background:
        radial-gradient(120% 90% at 85% 0%, rgba(124, 58, 237, .38), transparent 55%),
        radial-gradient(100% 80% at 10% 110%, rgba(244, 63, 94, .28), transparent 55%),
        linear-gradient(200deg, var(--hm-noite-2), var(--hm-noite) 70%);
    border-radius: 0;
    color: #fff;
    padding: 3.5rem 0;
}