/* Hero da home (/inicio): duas colunas (título + CTA à esquerda, vídeo
   institucional à direita). O desktop de / não tem mais cabeçalho. */

.home-hero-login {
    width: 100%;
    padding: 0 0 clamp(28px, 5vw, 56px);
}

.home-hero-split {
    display: grid;
    grid-template-areas: "logo" "video" "main";
    gap: clamp(20px, 4vw, 32px);
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 1.5rem;
}
@media (min-width: 1000px) {
    /* Logo no topo da coluna esquerda, alinhada com o topo do vídeo; o bloco de
       texto ocupa a linha de baixo e o vídeo atravessa as duas. */
    .home-hero-split {
        /* Colunas proporcionais: texto e vídeo dividem a largura da div em
           partes iguais, em vez de o texto ter uma largura fixa. */
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto 1fr;
        grid-template-areas: "logo video" "main video";
        column-gap: clamp(28px, 5vw, 56px);
        row-gap: clamp(20px, 3vw, 28px);
        padding: 0 2rem;
        align-items: center;
    }
}

.home-hero-logo-link { grid-area: logo; display: flex; justify-content: center; }
.home-hero-logo-link .login-logo {
    width: clamp(140px, 16vw, 200px); height: auto;
    object-fit: contain;
}

.home-hero-main {
    grid-area: main;
    display: flex; flex-direction: column; justify-content: center;
    gap: clamp(20px, 3vw, 28px);
}

.home-hero-headline {
    margin: 0;
    font-family: var(--ap-display, 'Bricolage Grotesque', sans-serif);
    font-weight: 800; letter-spacing: -.03em;
    color: var(--primary, #1a1a1a);
    font-size: clamp(28px, 3.6vw, 42px); line-height: 1.08;
}

.home-hero-lede {
    margin: 0; color: var(--text-muted, #888);
    font-size: clamp(15px, 1.4vw, 17px); line-height: 1.55;
}

/* Mesmo botão do "Continuar com o Google" do /meulogin (.btn-google):
   retangular, borda fina, fundo branco. */
.home-hero-cta {
    align-self: center;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 0.85rem 2rem; border: 1px solid #d5d9e2; border-radius: 10px;
    background: #fff; color: #1f2937;
    font-size: 0.95rem; font-weight: 600; letter-spacing: .04em;
    text-decoration: none; white-space: nowrap;
    transition: border-color .15s ease, color .15s ease;
}
.home-hero-cta:hover { border-color: var(--primary, #1a1a1a); background: #fff; color: var(--primary, #1a1a1a); }
.home-hero-cta:focus-visible { outline: 2px solid var(--primary, #1a1a1a); outline-offset: 3px; }

@media (max-width: 999px) {
    .home-hero-main { align-items: center; text-align: center; }
    .home-hero-cta { align-self: center; }
}

/* Vídeo institucional: no desktop ocupa a coluna direita inteira; no mobile
   entra logo abaixo da logo (grid-area "video"). */
.home-hero-aside {
    grid-area: video;
    /* overflow visível para os dropdowns institucionais (agora abaixo do vídeo)
       não serem cortados; o arredondamento passa para o próprio vídeo. */
    overflow: visible;
    /* Sem aspect-ratio fixo: a caixa acompanha o vídeo, que aparece inteiro
       na proporção original (nada de corte do object-fit: cover). */
    align-self: start;
    width: 100%; max-width: 420px; margin: 0 auto;
}
.home-hero-aside video {
    width: 100%; height: auto; display: block;
    border-radius: 18px; border: 1px solid var(--border, #e5e5e5);
    box-shadow: 0 24px 60px -28px rgba(0, 0, 0, .18);
    box-sizing: border-box;
}
@media (min-width: 1000px) {
    .home-hero-aside { max-width: none; margin: 0; }
}

/* ===== Controle de som do vídeo institucional =====
   O vídeo começa mudo (autoplay só roda mudo); o botão liga o áudio e o range
   ajusta o volume. Some no impresso e não recebe foco quando escondido. */
.home-hero-aside { position: relative; }
/* "A Empresa" e "Contato" saíram do cabeçalho e vivem aqui, centralizados
   abaixo do botão do hero. */
.home-hero-nav {
    display: flex; justify-content: center; align-items: center; gap: 8px;
    padding: 10px 0 2px;
}
.home-hero-nav .hb-item > summary { justify-content: center; }
.home-hero-nav .hb-panel { left: 50%; transform: translateX(-50%); }


/* Seção de vídeo (tipo `video`): herda o enquadramento do destaque principal
   (.home-hero-login/.home-hero-split); aqui só o que muda. */
.home-video-split {
    /* a coluna do vídeo é maior que a do texto */
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr) !important;
    grid-template-areas: "main video" !important;
    align-items: center;
}
@media (max-width: 999px) {
    .home-video-split {
        grid-template-columns: 1fr !important;
        grid-template-areas: "video" "main" !important;
    }
}
.home-video-headline { font-size: clamp(22px, 2.6vw, 34px); }
.home-video-section .home-hero-main { justify-content: center; }

/* Vídeo da seção: sem moldura — nada de borda, fundo ou sombra em volta.
   O texto e o vídeo ficam próximos, formando um par só: o parágrafo encosta
   na coluna do vídeo e o vídeo encosta no texto. */
.home-video-section .home-hero-aside {
    height: clamp(300px, 36vw, 460px);
    display: flex; align-items: center; justify-content: flex-start;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}
.home-video-section .home-hero-video-wrap {
    height: 100%;
    display: flex; align-items: center; justify-content: center;
}
.home-video-section .home-hero-aside video {
    width: auto;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border: 0;
    border-radius: 14px;
    box-shadow: none;
}
.home-video-split { column-gap: clamp(20px, 2.5vw, 36px) !important; }
.home-video-section .home-hero-main {
    justify-content: center;
    align-items: flex-end;
    text-align: right;
}
.home-video-headline {
    white-space: pre-line;
    max-width: 22ch;
}
@media (max-width: 999px) {
    .home-video-headline { white-space: normal; max-width: none; }
    .home-video-section .home-hero-main { align-items: center; text-align: center; }
    .home-video-section .home-hero-aside { justify-content: center; }
}
@media (max-width: 768px) {
    .home-video-section .home-hero-aside { height: clamp(280px, 66vw, 380px); }
}