/* ============================================================================
   Home Alpha Convites — composição editorial premium (2026)
   ----------------------------------------------------------------------------
   Escopo: tudo abaixo vive sob .ha-home para não colidir com styles.css,
   home-premium.css e mobile-premium.css.
   Tipografia: usa exclusivamente var(--font-display) e var(--font-body)
   definidas em css/fonts.css. Nenhuma família nova é declarada aqui.
   ========================================================================== */

.ha-home {
    /* Tinta e neutros (herdados da paleta grafite da marca) */
    --ha-ink: #0b0b0c;
    --ha-ink-2: #16181d;
    --ha-graphite: #3a4048;
    --ha-muted: #6c7079;
    --ha-line: #e7e6e3;
    --ha-line-2: #d8d6d1;
    --ha-paper: #ffffff;
    --ha-off: #f6f5f2;
    --ha-off-2: #efedE8;
    /* Detalhe de destaque, usado com parcimônia.
       Os nomes seguem "gold" por historico: os valores agora sao o vermelho
       da marca (--primary-color: #e31b23, em css/styles.css) e uma versao
       mais clara dele. Trocar so aqui repinta todos os detalhes de uma vez. */
    --ha-gold: #e31b23;
    --ha-gold-2: #ef4a52;

    /* Métrica */
    --ha-max: 1320px;
    --ha-gutter: clamp(20px, 4.4vw, 48px);
    --ha-section: clamp(68px, 8.5vw, 132px);
    --ha-radius: 6px;
    --ha-radius-lg: 10px;
    --ha-ease: cubic-bezier(.22, .61, .36, 1);

    background: var(--ha-paper);
    color: var(--ha-ink);
    font-family: var(--font-body);
    overflow-x: clip;
}

.ha-home *,
.ha-home *::before,
.ha-home *::after {
    box-sizing: border-box;
}

.ha-home h1,
.ha-home h2,
.ha-home h3,
.ha-home h4 {
    font-family: var(--font-display);
    color: var(--ha-ink);
    margin: 0;
    letter-spacing: -0.015em;
    line-height: 1.06;
    text-wrap: balance;
}

.ha-home p {
    margin: 0;
    color: var(--ha-graphite);
    line-height: 1.62;
}

.ha-home a {
    color: inherit;
    text-decoration: none;
}

.ha-home img,
.ha-home video {
    display: block;
    max-width: 100%;
}

.ha-home :focus-visible {
    outline: 2px solid var(--ha-ink);
    outline-offset: 3px;
    border-radius: 2px;
}

.ha-home section:focus-visible {
    outline-offset: -4px;
}

/* ---------------------------------------------------------------- estrutura */

.ha-shell {
    width: 100%;
    max-width: var(--ha-max);
    margin-inline: auto;
    padding-inline: var(--ha-gutter);
}

.ha-section {
    padding-block: var(--ha-section);
}

.ha-section--tight {
    padding-block: clamp(48px, 6vw, 88px);
}

.ha-section--off {
    background: var(--ha-off);
}

/* Cabeçalho de seção: alinhado à esquerda, sem títulos centralizados repetidos */
.ha-head {
    display: grid;
    gap: 16px;
    max-width: 62ch;
    margin-bottom: clamp(32px, 4vw, 56px);
}

.ha-head--flush {
    margin-bottom: 0;
}

.ha-head--split {
    max-width: none;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 24px 40px;
}

.ha-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ha-muted);
}

.ha-eyebrow::before {
    content: "";
    width: 24px;
    height: 1px;
    background: var(--ha-gold);
}

.ha-title {
    font-size: clamp(28px, 3.6vw, 46px);
    font-weight: 700;
}

.ha-title--lg {
    font-size: clamp(34px, 5.2vw, 66px);
}

.ha-lead {
    font-size: clamp(15px, 1.15vw, 17px);
    max-width: 56ch;
}

/* ------------------------------------------------------------------ botões */

.ha-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 0 26px;
    border: 1px solid transparent;
    border-radius: var(--ha-radius);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .01em;
    cursor: pointer;
    transition: background .28s var(--ha-ease), color .28s var(--ha-ease),
        border-color .28s var(--ha-ease), transform .28s var(--ha-ease);
}

.ha-home .ha-btn--solid {
    background: var(--ha-ink);
    color: #fff;
    border-color: var(--ha-ink);
}

.ha-home .ha-btn--solid:hover {
    background: var(--ha-ink-2);
    transform: translateY(-1px);
}

.ha-home .ha-btn--ghost {
    background: transparent;
    color: var(--ha-ink);
    border-color: var(--ha-line-2);
}

.ha-home .ha-btn--ghost:hover {
    border-color: var(--ha-ink);
    transform: translateY(-1px);
}

.ha-home .ha-btn--light {
    background: #fff;
    color: var(--ha-ink);
    border-color: #fff;
}

.ha-home .ha-btn--light:hover {
    background: #f1efea;
    border-color: #f1efea;
    transform: translateY(-1px);
}

.ha-home .ha-btn--outline-light {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .42);
}

.ha-home .ha-btn--outline-light:hover {
    border-color: #fff;
    transform: translateY(-1px);
}

.ha-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Link com sublinhado animado */
.ha-home .ha-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ha-ink);
    padding-bottom: 3px;
    position: relative;
}

.ha-home .ha-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .45s var(--ha-ease);
}

.ha-home .ha-link:hover::after,
.ha-home .ha-link:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left;
}

.ha-home .ha-link i {
    font-size: 12px;
    transition: transform .35s var(--ha-ease);
}

.ha-home .ha-link:hover i {
    transform: translateX(3px);
}

/* ------------------------------------------- slots de mídia e placeholders */

.ha-media {
    position: relative;
    overflow: hidden;
    margin: 0;
    background: var(--ha-off-2);
    border-radius: var(--ha-radius);
}

.ha-media > img,
.ha-media > video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s var(--ha-ease);
}

.ha-media--zoom:hover > img,
.ha-media--zoom:hover > video {
    transform: scale(1.03);
}

/* Placeholder: neutro, discreto, com nome e dimensão recomendada */
.ha-ph {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px;
    text-align: center;
    background:
        repeating-linear-gradient(-45deg, #eceae5 0 2px, #f3f1ec 2px 10px);
    color: #8b8a86;
}

.ha-ph-name {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #6f6e6a;
}

.ha-ph-dim {
    font-size: 11.5px;
    letter-spacing: .03em;
    color: #93918c;
}

.ha-ph-hint {
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #a5a39e;
}

/* proporções */
.ha-r-16-9 { aspect-ratio: 16 / 9; }
.ha-r-4-5  { aspect-ratio: 4 / 5; }
.ha-r-1-1  { aspect-ratio: 1 / 1; }
.ha-r-7-5  { aspect-ratio: 7 / 5; }
.ha-r-9-11 { aspect-ratio: 9 / 11; }
.ha-r-5-6  { aspect-ratio: 5 / 6; }
.ha-r-9-16 { aspect-ratio: 9 / 16; }
.ha-r-3-2  { aspect-ratio: 3 / 2; }
.ha-r-12-5 { aspect-ratio: 12 / 5; }

/* ------------------------------------------------------- reveal no scroll */

.ha-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s var(--ha-ease), transform .7s var(--ha-ease);
    will-change: opacity, transform;
}

.ha-reveal.is-in {
    opacity: 1;
    transform: none;
}

.ha-reveal[data-delay="1"] { transition-delay: .08s; }
.ha-reveal[data-delay="2"] { transition-delay: .16s; }
.ha-reveal[data-delay="3"] { transition-delay: .24s; }

/* =========================================================== 4. categorias */

.ha-cats {
    background: var(--ha-paper);
    padding-block: clamp(40px, 5vw, 64px);
}

.ha-cats-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: clamp(20px, 2.4vw, 30px);
}

.ha-cats-head h2 {
    font-size: clamp(19px, 1.7vw, 23px);
    letter-spacing: -0.005em;
}

/* Flex em vez de grid de propósito: com um número de categorias que não fecha
   a linha (5 em 6 colunas, ou 5 em 3), o grid deixa a sobra encostada à
   esquerda. O flex com justify-content: center centraliza a linha órfã
   sozinho, sem precisar acertar a contagem de colunas na mão. */
.ha-cat-track {
    --cat-gap: clamp(14px, 1.6vw, 26px);
    list-style: none;
    margin: 0;
    padding: clamp(22px, 2.4vw, 34px) 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--cat-gap);
}

.ha-cat-item {
    /* Largura de uma coluna de 6, embora hoje sejam 5 categorias: o circulo
       fica do tamanho de antes e a linha, mais curta, e centralizada pelo
       justify-content. Sem isso os 5 itens esticariam para 1/5 da largura. */
    flex: 0 0 calc((100% - 5 * var(--cat-gap)) / 6);
    min-width: 0;
}

.ha-cat-link {
    display: grid;
    gap: 12px;
    height: 100%;
}

/* Disco claro; a peça recortada escapa dele, criando profundidade. */
.ha-cat-media {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: var(--ha-off);
    border: 1px solid var(--ha-line);
    overflow: visible;
    display: grid;
    place-items: center;
    transition: background .45s var(--ha-ease), border-color .45s var(--ha-ease),
        transform .45s var(--ha-ease), box-shadow .45s var(--ha-ease);
}

/* contain + object-position: a peça aparece inteira, sem corte nem distorção,
   apoiada na base do disco e transbordando para cima. */
.ha-cat-media > img {
    position: absolute;
    left: 50%;
    bottom: 4%;
    width: 116%;
    height: 128%;
    object-fit: contain;
    object-position: bottom center;
    transform: translateX(-50%);
    transform-origin: 50% 92%;
    filter: drop-shadow(0 16px 24px rgba(11, 11, 12, .20));
    transition: transform .65s var(--ha-ease), filter .45s var(--ha-ease);
}

.ha-cat-link:hover .ha-cat-media,
.ha-cat-link:focus-visible .ha-cat-media {
    background: var(--ha-paper);
    border-color: var(--ha-line-2);
    transform: translateY(-4px);
    box-shadow: 0 16px 38px rgba(11, 11, 12, .08);
}

.ha-cat-link:hover .ha-cat-media > img,
.ha-cat-link:focus-visible .ha-cat-media > img {
    transform: translateX(-50%) scale(1.055);
    filter: drop-shadow(0 22px 30px rgba(11, 11, 12, .26));
}

/* Categoria ainda sem foto (Combos): selo discreto dentro do disco. */
.ha-cat-media--soon {
    background: var(--ha-off-2);
}

.ha-soon {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px;
    border: 1px solid var(--ha-line-2);
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ha-muted);
    background: rgba(255, 255, 255, .72);
}

.ha-soon::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ha-gold);
}

.ha-cat-name {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    font-family: var(--font-display);
    font-size: clamp(13.5px, 1.05vw, 15.5px);
    font-weight: 700;
    color: var(--ha-ink);
}

.ha-cat-name i {
    font-size: 10px;
    color: var(--ha-muted);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .35s var(--ha-ease), transform .35s var(--ha-ease);
}

.ha-cat-link:hover .ha-cat-name i,
.ha-cat-link:focus-visible .ha-cat-name i {
    opacity: 1;
    transform: none;
}

@media (max-width: 1024px) {
    .ha-cat-item {
        flex-basis: calc((100% - 2 * var(--cat-gap)) / 3);
    }
}

@media (max-width: 560px) {
    .ha-cats-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

@media (max-width: 680px) {
    .ha-cat-track {
        display: flex;
        /* nowrap explicito: a regra base usa wrap para centralizar a linha no
           desktop, e sem isto o scroller do celular quebra em varias linhas. */
        flex-wrap: nowrap;
        justify-content: flex-start;   /* centralizado cortaria o 1o item */
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--ha-gutter);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-block: 52px 4px;
        /* sangria até a borda da tela, sem overflow horizontal na página */
        margin-inline: calc(var(--ha-gutter) * -1);
        padding-inline: var(--ha-gutter);
    }

    .ha-cat-track::-webkit-scrollbar {
        display: none;
    }

    .ha-cat-item {
        flex: 0 0 36%;
        max-width: 150px;
        scroll-snap-align: start;
    }

    /* dentro de um scroller o excedente vertical é cortado: escape mais curto */
    .ha-cat-media > img {
        width: 112%;
        height: 120%;
    }

    .ha-cat-link:hover .ha-cat-media > img,
    .ha-cat-link:focus-visible .ha-cat-media > img {
        transform: translateX(-50%) scale(1.03);
    }
}

/* ============ 5. COLEÇÃO EM DESTAQUE — vídeo 16:9 + painel branco 3D ======
   Sem sticky, sem altura artificial, sem vínculo com a rolagem: o vídeo toca
   sozinho em loop e é ele que define a altura da composição.
   As cores do fundo bege são lidas da borda direita do próprio vídeo (JS);
   os valores abaixo são o fallback amostrado do cenário real. */

.collection-showcase {
    --bg-1: #e2c8ac;
    --bg-2: #dcc2a6;
    --bg-3: #d6bc9f;
    --bg-4: #d2b493;
    --panel-w: clamp(380px, 33%, 600px);
    /* a perspectiva projeta a face ~45px à direita da caixa de layout:
       a margem já desconta isso para o painel não encostar na borda */
    --panel-right: clamp(62px, 5.4vw, 104px);
    /* teto de altura: impede a composição de crescer demais em telas largas
       ou baixas (o 16:9 é preservado — quem encolhe é a largura) */
    --video-max: min(1140px, calc(80vh * 16 / 9));
    --panel-face: #faf9f6;
    --panel-back: #16160f;
    --panel-ink: #111111;

    position: relative;
    width: 100%;
    padding-block: clamp(24px, 3vw, 40px);
    background: linear-gradient(180deg,
            var(--bg-1) 0%,
            var(--bg-2) 38%,
            var(--bg-3) 72%,
            var(--bg-4) 100%);
}

.showcase-frame {
    position: relative;
    width: 100%;
    overflow: visible;   /* a placa traseira do painel pode extravasar */
}

/* ------------------------------------------------------------------ vídeo -- */

.showcase-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;   /* proporção original preservada */
    overflow: hidden;
    background: var(--bg-2);
}

/* container e vídeo têm a MESMA proporção: nada é cortado */
.showcase-video > video,
.showcase-video > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

/* ------------------------------------------------------------- painel ----- */

.showcase-stage {
    position: relative;
    width: 100%;
    min-width: 0;
    margin-top: clamp(18px, 2.4vw, 26px);
}

.showcase-panel {
    position: relative;
    width: 100%;
    min-width: 0;
    transform-origin: right bottom;
}

/* placa traseira: aparece como espessura à direita e embaixo */
.showcase-panel-back {
    position: absolute;
    top: 16px;
    left: 14px;
    right: -15px;
    bottom: -17px;
    border-radius: 2px;
    /* levemente translúcida: o cenário atravessa e o grafite deixa de ser um
       bloco chapado */
    background: linear-gradient(158deg,
            rgba(40, 40, 31, .84) 0%,
            rgba(22, 22, 15, .88) 58%,
            rgba(10, 10, 6, .92) 100%);
}

.showcase-panel-face {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    display: grid;
    gap: clamp(14px, 1.4vw, 20px);
    justify-items: start;
    align-content: start;
    padding: clamp(30px, 6vw, 44px);
    border-radius: 2px;
    /* tom sobre a face: a aresta que vem à frente recebe mais luz que o fundo */
    /* branco levemente translúcido (sem blur): a cena aparece de leve por
       trás e a superfície deixa de parecer um retângulo chapado */
    background: linear-gradient(104deg,
            rgba(238, 233, 224, .92) 0%,
            rgba(246, 243, 238, .93) 30%,
            rgba(250, 249, 246, .94) 66%,
            rgba(255, 255, 255, .95) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .95),
        inset -1px 0 0 rgba(255, 255, 255, .7),
        inset 0 -1px 0 rgba(112, 96, 76, .12),
        -14px 20px 34px -22px rgba(46, 30, 16, .46),
        -30px 42px 66px -34px rgba(46, 30, 16, .40);
}

.showcase-kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-body);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--panel-ink);
}

.showcase-kicker::before {
    content: "";
    width: 26px;
    height: 1px;
    background: var(--panel-ink);
}

.showcase-panel-face h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(24px, 5.6vw, 32px);
    line-height: 1.06;
    letter-spacing: -0.018em;
    color: var(--panel-ink);
    max-width: 16ch;
}

.showcase-panel-face p {
    margin: 0;
    max-width: min(42ch, 100%);
    font-size: 15px;
    line-height: 1.62;
    color: #26262a;
}

.showcase-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
    padding-bottom: 6px;
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--panel-ink);
    text-decoration: none;
}

.showcase-cta::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--panel-ink);
    transform: scaleX(.4);
    transform-origin: left;
    transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

.showcase-cta:hover::after,
.showcase-cta:focus-visible::after {
    transform: scaleX(1);
}

.showcase-cta i {
    font-size: 11px;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}

.showcase-cta:hover i {
    transform: translateX(4px);
}

/* =============== DESKTOP: painel sobreposto à direita do vídeo =========== */

@media (min-width: 1200px) {

    /* Vídeo encostado na lateral esquerda, no topo e na base: o bege sobra
       apenas à direita, onde o painel se apoia. */
    .collection-showcase {
        padding-block: 0;
    }

    /* O vídeo pode encolher pelo teto de altura sem arrastar o painel junto. */
    .showcase-video {
        width: min(72%, var(--video-max));
        /* A borda direita dissolve no fundo — e o fundo é amostrado dessa mesma
           borda, então a divisão some tanto no bege quanto no close-up escuro.
           É máscara de opacidade, não desfoque: o vídeo não é alterado. */
        -webkit-mask-image: linear-gradient(90deg,
                #000 0%, #000 84%, rgba(0, 0, 0, .55) 93%, rgba(0, 0, 0, 0) 100%);
        mask-image: linear-gradient(90deg,
                #000 0%, #000 84%, rgba(0, 0, 0, .55) 93%, rgba(0, 0, 0, 0) 100%);
    }

    .showcase-stage {
        position: absolute;
        z-index: 2;
        left: auto;
        right: var(--panel-right);
        top: clamp(24px, 3vw, 52px);
        width: var(--panel-w);
        margin: 0;
        perspective: 1600px;
        perspective-origin: 30% 50%;
    }

    .showcase-panel {
        transform-style: preserve-3d;
        transform: rotateY(-6.5deg) rotateX(1.2deg);
        display: grid;
    }

    .showcase-panel-face {
        padding: clamp(28px, 2.4vw, 42px);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .95),
            inset -1px 0 0 rgba(255, 255, 255, .7),
            inset 0 -1px 0 rgba(112, 96, 76, .12),
            -20px 30px 46px -22px rgba(46, 30, 16, .54),
            -46px 66px 96px -36px rgba(46, 30, 16, .46);
    }

    .showcase-panel-face h2 {
        font-size: clamp(25px, 1.95vw, 34px);
    }

    .showcase-panel-face p {
        max-width: 34ch;
    }
}

/* -------------------------------------------------- entrada (uma vez) ----- */

@media (prefers-reduced-motion: no-preference) {

    .collection-showcase .showcase-video {
        opacity: 0;
        transition: opacity .8s cubic-bezier(.22, 1, .36, 1);
    }

    .collection-showcase .showcase-panel {
        opacity: 0;
        transition: opacity .8s cubic-bezier(.22, 1, .36, 1),
            transform .8s cubic-bezier(.22, 1, .36, 1);
    }

    .collection-showcase.is-in .showcase-video,
    .collection-showcase.is-in .showcase-panel {
        opacity: 1;
    }
}

@media (min-width: 1200px) and (prefers-reduced-motion: no-preference) {

    .collection-showcase .showcase-panel {
        transform: rotateY(-12deg) rotateX(1.2deg) translate3d(46px, 0, 0);
    }

    .collection-showcase.is-in .showcase-panel {
        transform: rotateY(-6.5deg) rotateX(1.2deg) translate3d(0, 0, 0);
        transition-delay: .1s;
    }
}

/* ============================================================= 6. produtos */

.ha-products-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px 40px;
    flex-wrap: wrap;
    margin-bottom: clamp(28px, 3.4vw, 46px);
}

.ha-products-head > div {
    display: grid;
    gap: 14px;
    max-width: 56ch;
}

.ha-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 1.8vw, 28px) clamp(14px, 1.6vw, 24px);
}

.ha-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: transparent;
}

.ha-card-link {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
}

.ha-card-media {
    position: relative;
    overflow: hidden;
    border-radius: var(--ha-radius);
    background: var(--ha-off-2);
    aspect-ratio: 1 / 1;
}

.ha-card-media > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s var(--ha-ease);
}

.ha-card-link:hover .ha-card-media > img {
    transform: scale(1.035);
}

.ha-card-body {
    display: grid;
    gap: 7px;
    align-content: start;
    padding-inline: 2px;
}

.ha-card-cat {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ha-muted);
}

.ha-card-name {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ha-ink);
}

.ha-card-price {
    font-size: 15px;
    font-weight: 700;
    color: var(--ha-ink);
}

.ha-card-price--quote {
    font-weight: 600;
    color: var(--ha-graphite);
}

.ha-card-parcel {
    font-size: 12.5px;
    color: var(--ha-muted);
}

.ha-card-action {
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ha-ink);
}

.ha-card-action span {
    position: relative;
    padding-bottom: 2px;
}

.ha-card-action span::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .45s var(--ha-ease);
}

.ha-card-link:hover .ha-card-action span::after,
.ha-card-link:focus-visible .ha-card-action span::after {
    transform: scaleX(1);
    transform-origin: left;
}

.ha-card-action i {
    font-size: 11px;
    transition: transform .35s var(--ha-ease);
}

.ha-card-link:hover .ha-card-action i {
    transform: translateX(3px);
}

.ha-skeleton {
    border-radius: var(--ha-radius);
    background: linear-gradient(90deg, #f1efeb 25%, #e9e7e2 37%, #f1efeb 63%);
    background-size: 400% 100%;
    animation: ha-shimmer 1.3s ease-in-out infinite;
    aspect-ratio: 1 / 1.28;
}

@keyframes ha-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

.ha-products-foot {
    margin-top: clamp(30px, 3.4vw, 46px);
    padding-top: 22px;
    border-top: 1px solid var(--ha-line);
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 1024px) {
    .ha-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .ha-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .ha-grid {
        display: flex;
        gap: 14px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--ha-gutter);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-inline: calc(var(--ha-gutter) * -1);
        padding-inline: var(--ha-gutter);
        padding-bottom: 4px;
    }

    .ha-grid::-webkit-scrollbar {
        display: none;
    }

    .ha-card,
    .ha-skeleton {
        flex: 0 0 72%;
        max-width: 300px;
        scroll-snap-align: start;
    }

    .ha-products-foot {
        justify-content: flex-start;
    }
}

/* ========================================================= 7. bloco escuro */

.ha-dark {
    background: var(--ha-ink) url('../assets/banners/banner0.png') center / cover no-repeat;
    color: #fff;
}

.ha-dark-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    gap: clamp(28px, 4vw, 68px);
    align-items: center;
}

.ha-dark h2 {
    color: #fff;
    font-size: clamp(26px, 3vw, 42px);
    max-width: 18ch;
}

.ha-dark p {
    color: rgba(255, 255, 255, .74);
}

.ha-dark .ha-eyebrow {
    color: rgba(255, 255, 255, .66);
}

.ha-dark .ha-eyebrow::before {
    background: var(--ha-gold-2);
}

.ha-dark-copy {
    display: grid;
    gap: clamp(18px, 2vw, 26px);
    justify-items: start;
}

.ha-dark-list {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: grid;
    gap: 0;
    width: 100%;
    max-width: 460px;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.ha-dark-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    font-size: 14px;
    color: rgba(255, 255, 255, .86);
}

.ha-dark-list i {
    display: inline-grid;
    place-items: center;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border: 1px solid rgba(185, 188, 194, .24);
    border-radius: 50%;
    background: rgba(255, 255, 255, .035);
    color: #a5a7ab;
    font-size: 12px;
}

@media (max-width: 900px) {
    .ha-dark {
        background-position: 62% center;
    }

    .ha-dark-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* No celular a coluna vira uma so e o texto dividia espaco com o cracha:
   em 26px o titulo ocupava quase a tela inteira. Aqui ele encolhe e a lista
   fica mais compacta, sobrando ar para o cracha respirar. */
@media (max-width: 680px) {
    .ha-dark h2 {
        font-size: clamp(21px, 5.6vw, 26px);
        max-width: 15ch;
    }

    .ha-dark p {
        font-size: 14.5px;
        line-height: 1.55;
    }

    .ha-dark-copy {
        gap: 14px;
    }

    .ha-dark-list li {
        padding: 10px 0;
        font-size: 13px;
        gap: 10px;
    }

    .ha-dark-list i {
        flex: 0 0 22px;
        width: 22px;
        height: 22px;
        font-size: 11px;
    }
}

/* ============================================= 8. experiência responsiva */

.ha-mockup-showcase {
    overflow: hidden;
    padding-block: clamp(44px, 5vw, 72px);
    background: #fbfaf7;
}

.ha-mockup-showcase__shell {
    max-width: 1440px;
}

.ha-mockup-feature {
    display: grid;
    justify-items: center;
    gap: clamp(12px, 1.6vw, 22px);
    margin: 0;
}

.ha-mockup-slot {
    display: grid;
    place-items: center;
    width: 100%;
}

.ha-mockup-slot > picture {
    display: block;
    width: min(100%, 1180px);
}

.ha-mockup-slot img {
    width: 100%;
    height: auto;
    object-fit: contain;
    /* A sombra original chega até a borda esquerda do PNG. O degradê
       completa essa saída sem criar o corte vertical no fundo claro. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 100%);
}

.ha-mockup-copy {
    display: grid;
    justify-items: center;
    gap: 10px;
    max-width: 700px;
    text-align: center;
}

.ha-mockup-title {
    max-width: 24ch;
    font-family: var(--font-display);
    font-size: clamp(30px, 3.2vw, 46px);
    font-weight: 700;
    line-height: .98;
    letter-spacing: -.035em;
}

.ha-mockup-copy p {
    max-width: 66ch;
    color: var(--ha-graphite);
    font-size: clamp(14px, 1.25vw, 16px);
    line-height: 1.5;
}

@media (max-width: 680px) {
    .ha-mockup-showcase {
        padding-block: 36px 44px;
    }

    .ha-mockup-feature {
        gap: 14px;
    }

    .ha-mockup-title {
        max-width: 17ch;
        font-size: clamp(27px, 8vw, 34px);
    }

    .ha-mockup-copy p {
        max-width: 35ch;
    }
}

/* ============================================================== 9. galeria */

.ha-gallery-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: clamp(120px, 13vw, 190px);
    gap: clamp(12px, 1.4vw, 20px);
}

.ha-tile {
    position: relative;
    overflow: hidden;
    border-radius: var(--ha-radius);
    background: var(--ha-off-2);
    margin: 0;
}

.ha-tile picture {
    display: contents;
}

.ha-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s var(--ha-ease);
}

.ha-tile:hover img {
    transform: scale(1.03);
}

.ha-tile-cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 30px 16px 14px;
    /* Manrope tem peso 700 de verdade; a fonte de titulo so existe em
       Demibold e nao daria contraste de peso nenhum aqui. */
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    color: #d9d9d5;
    text-shadow: 0 1px 2px rgba(8, 8, 9, .45);
    background: linear-gradient(180deg, rgba(8, 8, 9, 0), rgba(8, 8, 9, .68));
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .45s var(--ha-ease), transform .45s var(--ha-ease);
}

.ha-tile:hover .ha-tile-cap,
.ha-tile:focus-within .ha-tile-cap {
    opacity: 1;
    transform: none;
}

/* mosaico assimétrico */
.ha-tile--a { grid-column: span 2; grid-row: span 2; }
.ha-tile--b { grid-column: span 4; grid-row: span 1; }
.ha-tile--c { grid-column: span 2; grid-row: span 1; }
.ha-tile--d { grid-column: span 2; grid-row: span 2; }
.ha-tile--e { grid-column: span 4; grid-row: span 1; }

@media (max-width: 900px) {
    .ha-gallery-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-auto-rows: clamp(110px, 22vw, 170px);
    }

    .ha-tile--a { grid-column: span 2; grid-row: span 2; }
    .ha-tile--b { grid-column: span 2; grid-row: span 1; }
    .ha-tile--c { grid-column: span 2; grid-row: span 1; }
    .ha-tile--d { grid-column: span 2; grid-row: span 2; }
    .ha-tile--e { grid-column: span 2; grid-row: span 1; }
}

@media (max-width: 560px) {
    .ha-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: clamp(120px, 32vw, 165px);
    }

    .ha-tile--a { grid-column: span 2; grid-row: span 2; }
    .ha-tile--c,
    .ha-tile--d { grid-column: span 1; grid-row: span 1; }
    .ha-tile--b,
    .ha-tile--e { grid-column: span 2; grid-row: span 1; }

    .ha-tile-cap {
        opacity: 1;
        transform: none;
        font-size: 11px;
        padding: 24px 12px 10px;
    }
}

/* ========================================================= 10. prova social */

.ha-voice-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    gap: clamp(26px, 4vw, 62px);
    align-items: center;
}

/* Mockup de celular em volta do video do depoimento. Feito em CSS puro:
   nada para baixar e sem serrilhado em tela retina, em qualquer tamanho.
   A largura manda; a altura sai da proporcao 9:16 da tela. */
.ha-phone {
    position: relative;
    width: min(100%, 314px);
    margin: 0 auto;
    padding: 11px;
    border-radius: 46px;
    background: linear-gradient(158deg, #43464c 0%, #1b1d21 30%, #0f1113 66%, #34373d 100%);
    box-shadow:
        0 34px 64px -32px rgba(14, 14, 16, .55),
        0 10px 26px -18px rgba(14, 14, 16, .38),
        inset 0 0 0 1px rgba(255, 255, 255, .09);
}

.ha-phone-screen {
    position: relative;
    aspect-ratio: 9 / 16;
    border-radius: 36px;
    overflow: hidden;
    background: #0a0a0b;
}

.ha-phone-screen > video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ilha central */
.ha-phone-screen::after {
    content: '';
    position: absolute;
    top: 11px;
    left: 50%;
    transform: translateX(-50%);
    width: 33%;
    height: 21px;
    border-radius: 999px;
    background: #08090a;
    z-index: 2;
}

/* botoes laterais: volume a esquerda, power a direita */
.ha-phone::before,
.ha-phone::after {
    content: '';
    position: absolute;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, #4c4f56, #26282d);
}

.ha-phone::before {
    left: -3px;
    top: 27%;
    height: 9%;
}

.ha-phone::after {
    right: -3px;
    top: 32%;
    height: 13%;
}

@media (prefers-reduced-motion: no-preference) {
    .ha-phone {
        transition: transform .6s var(--ha-ease);
    }
}

.ha-voice-body {
    display: grid;
    gap: clamp(20px, 2.2vw, 28px);
    align-content: center;
}

.ha-quote {
    margin: 0;
    display: grid;
    gap: 20px;
    min-height: clamp(180px, 18vw, 210px);
    align-content: start;
}

/* Corpo, nao titulo: a Europa Grotesk so existe no corte Demibold, entao
   qualquer font-weight nela sai em negrito. O texto do depoimento usa a
   Manrope (--font-body), que tem peso normal de verdade. */
.ha-quote-text {
    font-family: var(--font-body);
    font-size: clamp(19px, 2vw, 27px);
    font-weight: 400;
    line-height: 1.34;
    color: var(--ha-ink);
    letter-spacing: -0.01em;
    max-width: 30ch;
    transition: opacity .4s var(--ha-ease);
}

.ha-quote.is-fading .ha-quote-text,
.ha-quote.is-fading .ha-quote-by {
    opacity: 0;
}

.ha-quote-by {
    display: grid;
    gap: 3px;
    transition: opacity .4s var(--ha-ease);
}

.ha-quote-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--ha-ink);
}

.ha-quote-ctx {
    font-size: 12.5px;
    color: var(--ha-muted);
}

.ha-voice-controls {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ha-ctrl {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ha-line-2);
    border-radius: 50%;
    background: transparent;
    color: var(--ha-ink);
    cursor: pointer;
    transition: border-color .3s var(--ha-ease), background .3s var(--ha-ease), color .3s var(--ha-ease);
}

.ha-ctrl:hover {
    border-color: var(--ha-ink);
    background: var(--ha-ink);
    color: #fff;
}

.ha-ctrl i {
    font-size: 12px;
}

.ha-voice-index {
    font-size: 12.5px;
    letter-spacing: .1em;
    color: var(--ha-muted);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
    .ha-voice-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ha-voice-media {
        order: 2;
    }

    .ha-phone {
        width: min(100%, 286px);
    }

    .ha-quote {
        min-height: 0;
    }

    .ha-quote-text {
        max-width: none;
    }
}

/* ========================================================== 11. CTA final */

.ha-cta {
    position: relative;
    isolation: isolate;
    background: var(--ha-ink-2);
    color: #fff;
    overflow: hidden;
}

.ha-cta-media {
    position: absolute;
    inset: 0;
    margin: 0;
    overflow: hidden;
    background: #14161a;
}

.ha-cta-media > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ha-cta-veil {
    position: absolute;
    inset: 0;
    background: rgba(8, 8, 9, .62);
    pointer-events: none;
}

.ha-cta-inner {
    position: relative;
    z-index: 2;
    max-width: var(--ha-max);
    margin-inline: auto;
    padding: clamp(64px, 8vw, 116px) var(--ha-gutter);
    display: grid;
    gap: 22px;
    justify-items: start;
    max-inline-size: min(var(--ha-max), 100%);
}

.ha-cta .ha-eyebrow {
    color: rgba(255, 255, 255, .72);
}

.ha-cta .ha-eyebrow::before {
    background: var(--ha-gold-2);
}

.ha-cta h2 {
    color: #fff;
    font-size: clamp(28px, 3.6vw, 48px);
    max-width: 17ch;
}

.ha-cta p {
    color: rgba(255, 255, 255, .78);
    max-width: 52ch;
    font-size: clamp(15px, 1.15vw, 17px);
}

.ha-cta .ha-ph {
    background: repeating-linear-gradient(-45deg, #1b1e23 0 2px, #212429 2px 10px);
    color: #8d9199;
}

.ha-cta .ha-ph-name { color: #b6bac1; }
.ha-cta .ha-ph-dim  { color: #8d9199; }
.ha-cta .ha-ph-hint { color: #767a82; }

/* ================================================= seção do contrato (aluno) */

.ha-home .home-section--exclusive {
    max-width: var(--ha-max);
    margin-inline: auto;
    padding-inline: var(--ha-gutter);
    padding-block: clamp(48px, 6vw, 88px);
}

/* ==================================================== movimento reduzido */

@media (prefers-reduced-motion: reduce) {

    .ha-home *,
    .ha-home *::before,
    .ha-home *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    .ha-reveal {
        opacity: 1;
        transform: none;
    }
}