/**
 * Hero Futura APP — Figma node 358:520  (1920px canvas)
 *
 * Proporções do Figma convertidas em vw para escalar entre 1024–1920px:
 *   padding-left:    241px / 1920 = 12.55vw
 *   content-width:   585px / 1920 = 30.47vw
 *   brand font:       84px / 1920 =  4.38vw
 *   headline font:    32px / 1920 =  1.67vw
 *   body font:        20px / 1920 =  1.04vw
 *   section height:  700px / 1920 = 36.46vw
 *   gap copy items:   32px / 1920 =  1.67vw
 *   gap content-btn:  56px / 1920 =  2.92vw
 *   padding-right:    64px / 1920 =  3.33vw
 */

.sjpr-hero-futura {
    --sjpr-hf-gold:        #ba9e2e;
    --sjpr-hf-gold-border: #b5992a;
    --sjpr-hf-grey:        #d4d4d4;
    position: relative;
    min-height: clamp(500px, 36.46vw, 700px);
    display: flex;
    align-items: stretch;
    overflow: hidden;
    background: #0a0a0a;
    font-family: "Inter", system-ui, sans-serif;
}

/* ── Fundo (foto) ── */
.sjpr-hero-futura__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.sjpr-hero-futura__bg-img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
}

.sjpr-hero-futura__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.52);
    pointer-events: none;
}

/* ── Inner: full-width, padding só à esquerda ── */
.sjpr-hero-futura__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    /* padding-top e padding-left proporcionais ao canvas 1920px */
    padding: clamp(32px, 2.71vw, 52px) 0 0 clamp(24px, 12.55vw, 241px);
    display: flex;
    align-items: stretch;      /* ambas colunas ocupam a altura da seção */
    box-sizing: border-box;
}

/* ── Conteúdo (esquerda) ── */
.sjpr-hero-futura__content {
    flex: 0 1 clamp(280px, 30.47vw, 585px);  /* proporcional ao canvas */
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;   /* inicia no topo, igual ao Figma */
    gap: clamp(32px, 2.92vw, 56px);
    padding-right: clamp(20px, 3.33vw, 64px);
    padding-bottom: clamp(32px, 2.5vw, 48px);
    box-sizing: border-box;
}

.sjpr-hero-futura__copy {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 1.67vw, 32px);
    align-items: flex-start;
}

/* "Futura" — Kanit, gradiente dourado */
.sjpr-hero-futura__brand {
    margin: 0;
    font-family: "Kanit", "Inter", system-ui, sans-serif;
    font-size: clamp(2.25rem, 4.38vw, 5.28rem);   /* 84px@1920 → ~60px@1360 */
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.03em;
    background: linear-gradient(122deg, rgb(181, 137, 42) 25.6%, rgb(255, 229, 128) 85.7%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Logo via imagem */
.sjpr-hero-futura__logo-img-wrap {
    line-height: 0;
    max-width: clamp(160px, 14.6vw, 280px);
}

.sjpr-hero-futura__logo-img {
    width: auto;
    height: auto;
    max-width: 100%;
    display: block;
}

/* Headline principal — 32px@1920 */
.sjpr-hero-futura__title {
    margin: 0;
    font-size: clamp(1.125rem, 1.67vw, 2rem);
    font-weight: 400;
    line-height: 1.2;
    color: var(--sjpr-hf-grey);
}

/* Corpo — 20px@1920 */
.sjpr-hero-futura__lead {
    margin: 0;
    font-size: clamp(0.875rem, 1.04vw, 1.25rem);
    font-weight: 400;
    line-height: 1.5;
    color: var(--sjpr-hf-grey);
}

.sjpr-hero-futura__lead p {
    margin: 0 0 0.75em;
}

.sjpr-hero-futura__lead p:last-child {
    margin-bottom: 0;
}

/* Botão "Try it today!" — ghost, borda dourada */
.sjpr-hero-futura__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    padding: clamp(14px, 1.25vw, 24px) clamp(20px, 2.08vw, 40px);
    border-radius: 48px;
    border: 1px solid var(--sjpr-hf-gold-border);
    background: transparent;
    color: var(--sjpr-hf-gold);
    font-size: clamp(0.875rem, 1.04vw, 1.25rem);
    font-weight: 400;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: filter 0.15s ease, background-color 0.15s ease;
}

.sjpr-hero-futura__cta:hover {
    filter: brightness(1.08);
    background: rgba(186, 158, 46, 0.08);
}

/* ── Mockup: ocupa o restante, imagem alinhada à base-direita ── */
.sjpr-hero-futura__mockup {
    flex: 1 1 clamp(300px, 40vw, 800px);
    min-width: 0;
    display: flex;
    align-items: flex-end;       /* laptop alinhado à base */
    justify-content: flex-end;   /* colado à direita */
    overflow: hidden;
    align-self: center;
}

.sjpr-hero-futura__mockup-img {
    display: block;
    width: 100%;
    max-width: 1052px;
    height: auto;
    object-fit: contain;
    object-position: bottom right;
}

/* ── Responsivo: empilha abaixo de 1024px ── */
@media (max-width: 1024px) {
    .sjpr-hero-futura {
        min-height: auto;
    }

    .sjpr-hero-futura__inner {
        flex-wrap: wrap;
        align-items: flex-start;
        padding: 40px 24px 0;
    }

    .sjpr-hero-futura__content {
        flex: 1 1 100%;
        padding-right: 0;
        gap: 32px;
    }

    .sjpr-hero-futura__copy {
        gap: 20px;
    }

    .sjpr-hero-futura__brand {
        font-size: clamp(2rem, 8vw, 3.5rem);
    }

    .sjpr-hero-futura__title {
        font-size: clamp(1.125rem, 3.5vw, 1.75rem);
    }

    .sjpr-hero-futura__lead {
        font-size: clamp(0.9375rem, 2.5vw, 1.125rem);
    }

    .sjpr-hero-futura__mockup {
        flex: 1 1 100%;
        justify-content: center;
        align-self: auto;
    }

    .sjpr-hero-futura__mockup-img {
        max-width: min(100%, 720px);
    }
}

@media (max-width: 640px) {
    .sjpr-hero-futura__inner {
        padding: 40px 20px 0;
    }

    .sjpr-hero-futura__content {
        gap: 28px;
        padding-bottom: 32px;
    }

    .sjpr-hero-futura__cta {
        padding: 14px 24px;
        white-space: normal;
        text-align: center;
    }
}