/* =========================================================================
   SECTION — Hero
   Mobile-first: a estrutura base é a do celular; o desktop entra a partir
   de 1024px, onde a vitrine assume as três colunas da referência.
   ====================================================================== */

.hero {
    position: relative;
    isolation: isolate;
    padding-top: clamp(2rem, 1.25rem + 2.4vw, 3.25rem);
    padding-bottom: clamp(3rem, 1.75rem + 5vw, 5.5rem);
    overflow: hidden;
}

/* -------------------------------------------------------------------------
   Fundo — apenas a malha técnica (`.tech-grid`, em components) sobre branco,
   sem halos de cor. Toda a cor da seção vem dos elementos sólidos da marca.
   ---------------------------------------------------------------------- */
.hero__backdrop {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

/* -------------------------------------------------------------------------
   Bloco de texto
   ---------------------------------------------------------------------- */
.hero__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
    text-align: center;
}

.hero__title {
    display: flex;
    flex-direction: column;
    /* Largura travada para manter as duas linhas equilibradas em telas largas. */
    max-width: 17ch;
    font-size: var(--fs-hero);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tighter);
    color: var(--color-text);
}

.hero__title-line {
    display: block;
}

/* Palavra destacada + sublinhado desenhado à mão. */
.hero__accent {
    position: relative;
    display: inline-block;
    color: var(--brand-500);
    white-space: nowrap;
}

.hero__underline {
    position: absolute;
    left: 0;
    bottom: -0.12em;
    width: 100%;
    height: 0.24em;
    color: var(--brand-300);
    overflow: visible;
}

.hero__underline path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

/* O traço só é desenhado quando o título entra em tela. */
.hero__title.is-revealed .hero__underline path,
.no-js .hero__underline path {
    animation: draw-stroke var(--dur-slower) var(--ease-out) 320ms forwards;
}

.hero__subtitle {
    max-width: var(--content-max);
    font-size: var(--fs-md);
    line-height: var(--lh-relaxed);
    color: var(--color-text-soft);
}

.hero__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    width: 100%;
    max-width: 340px;
    margin-top: var(--space-2);
}

/* No celular o CTA ocupa a largura toda: alvo de toque generoso. */
.hero__actions .btn-pair {
    justify-content: center;
}

.hero__actions .btn-pair .btn {
    flex: 1;
}

/* -------------------------------------------------------------------------
   Vitrine — retrato, cards laterais e métricas
   ---------------------------------------------------------------------- */
.hero__showcase {
    display: grid;
    gap: var(--space-6);
    margin-top: clamp(2rem, 1rem + 4vw, 3.5rem);
}

/* Abaixo do desktop a leitura é vertical e a ordem do HTML (que existe para
   colocar o retrato no centro das três colunas) não serve: o retrato tem de
   vir primeiro, seguido pelos números e só então pelas provas sociais. */
@media (max-width: 1023px) {
    .hero__figure   { order: 1; }
    .hero__metrics  { order: 2; }
    .hero__aside--right { order: 3; }
    .hero__aside--left  { order: 4; }

    /* O número desta coluna já aparece na faixa de métricas. */
    .hero__aside--left .hero__stat {
        display: none;
    }
}

/* Retrato sobre o arco vermelho (assinatura da referência).
   A geometria é governada pela ALTURA: o retrato é de corpo inteiro
   (proporção ~1:2,9), então é a altura que define a presença dele na
   composição — o arco fica mais estreito e a figura o ultrapassa em cima,
   exatamente como no layout de referência. */
.hero__figure {
    position: relative;
    display: grid;
    place-items: end center;
    width: 100%;
    max-width: 460px;
    height: clamp(380px, 108vw, 520px);
    margin-inline: auto;
}

.hero__arc {
    position: absolute;
    left: 50%;
    bottom: 0;
    /* Domo largo e baixo, com a cabeça acima da curva — é essa relação
       figura/fundo que a referência usa. No celular fica contido na coluna
       para não encostar nas bordas da tela. */
    width: min(100%, 340px);
    height: 56%;
    background-color: var(--brand-500);
    border-radius: 50% 50% var(--radius-2xl) var(--radius-2xl) / 42% 42% var(--radius-2xl) var(--radius-2xl);
    box-shadow: var(--shadow-lg);
    transform: translateX(-50%);
}

.hero__portrait {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-2xl);
}

.hero__portrait img {
    object-fit: contain;
    object-position: bottom center;
    /* Sombra que acompanha o recorte do PNG, não a caixa da imagem.
       O raio é curto de propósito: drop-shadow sobre imagem com canal alfa
       é caro de pintar, e num celular um blur grande atrasa visivelmente
       o primeiro desenho da foto. */
    filter: drop-shadow(0 10px 16px rgba(20, 16, 15, 0.20));
}

/* Enquanto o retrato definitivo não chega, o marcador fica translúcido
   para não esconder o arco da marca que está atrás dele. */
.hero__portrait.is-empty .media-slot__fallback {
    color: rgba(255, 255, 255, 0.9);
    background-color: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.45);
}

.hero__portrait.is-empty .media-slot__fallback small {
    color: rgba(255, 255, 255, 0.7);
}

/* Ícones em órbita — flutuam e reagem ao mouse (parallax). */
.hero__orbit {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: clamp(40px, 9vw, 52px);
    aspect-ratio: 1;
    color: var(--brand-600);
    background-color: var(--glass-bg-strong);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    animation: float-soft 6s var(--ease-in-out) infinite;
    /* O parallax escreve --px/--py; a flutuação continua no keyframe. */
    translate: var(--px, 0) var(--py, 0);
}

/* No celular os ícones ficam dentro da caixa do retrato; no desktop podem
   avançar para fora, ganhando o ar de composição solta da referência. */
.hero__orbit--1 { top: 14%;   left: 0;   animation-delay: 0s; }
.hero__orbit--2 { top: 5%;    right: 0;  animation-delay: 1.2s; }
.hero__orbit--3 { bottom: 30%; left: 0;  animation-delay: 2.4s; }
.hero__orbit--4 { bottom: 16%; right: 0; animation-delay: 3.6s; }

/* Cards laterais em vidro. */
.hero__aside {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5);
    background-color: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

.hero__quote {
    position: relative;
    display: grid;
    gap: var(--space-2);
}

.hero__quote-mark {
    font-size: 2.5rem;
    font-weight: var(--fw-bold);
    line-height: 0.6;
    color: var(--brand-200);
}

.hero__quote blockquote {
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
    color: var(--color-text-soft);
}

.hero__quote figcaption {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--ink-400);
}

.hero__stat {
    display: grid;
    gap: var(--space-1);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.hero__stat-value {
    font-family: var(--font-numeric);
    font-size: var(--fs-stat);
    font-weight: var(--fw-bold);
    line-height: 1;
    letter-spacing: var(--ls-tighter);
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.hero__stat-label {
    max-width: 22ch;
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
    color: var(--color-text-muted);
}

/* Avaliação. */
.hero__rating {
    display: flex;
    gap: 2px;
    color: #F5A623;
}

.hero__star .icon {
    width: 16px;
    height: 16px;
    fill: currentColor;
    stroke-width: 1;
}

.hero__review {
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
    color: var(--color-text-soft);
}

.hero__reviewer {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.hero__avatar {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 50%;
    box-shadow: var(--shadow-xs);
}

.hero__reviewer-info {
    display: grid;
    line-height: var(--lh-snug);
}

.hero__reviewer-info strong {
    font-size: var(--fs-sm);
}

.hero__reviewer-info small {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
}

/* Métricas — versão condensada dos cards laterais, exibida até o desktop.
   Três colunas fixas: nada cortado na borda da tela, sem rolagem lateral. */
.hero__metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
}

.hero__metric {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-3);
    background-color: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.hero__metric-value {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-tight);
    color: var(--brand-600);
    font-variant-numeric: tabular-nums;
}

.hero__metric-label {
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
    color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------
   Prova social
   ---------------------------------------------------------------------- */
.hero__trust {
    margin-top: clamp(2.5rem, 1.5rem + 4vw, 4rem);
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-border);
    text-align: center;
}

.hero__trust-label {
    max-width: 46ch;
    margin-inline: auto;
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--ink-400);
}

.hero__trust-logos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) var(--space-6);
    align-items: center;
    margin-top: var(--space-6);
}

.hero__trust-item {
    height: 44px;
    filter: grayscale(1);
    opacity: 0.55;
    transition:
        filter var(--dur-base) var(--ease-out),
        opacity var(--dur-base) var(--ease-out);
}

.hero__trust-item:hover {
    filter: grayscale(0);
    opacity: 1;
}

/* =========================================================================
   Breakpoints
   ====================================================================== */

/* Tablet — CTAs lado a lado e logos em três colunas. */
@media (min-width: 600px) {
    .hero__actions {
        flex-direction: row;
        justify-content: center;
        max-width: none;
    }

    .hero__actions .btn-pair .btn {
        flex: none;
    }

    .hero__trust-logos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .hero__showcase {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    /* O retrato ocupa a linha inteira acima dos cards. */
    .hero__figure {
        grid-column: 1 / -1;
    }

    .hero__metrics {
        grid-column: 1 / -1;
        gap: var(--space-4);
    }

    .hero__metric {
        padding: var(--space-4);
    }
}

/* Desktop — composição em três colunas da referência:
   card | retrato | card, com os cards avançando sobre o arco. */
@media (min-width: 1024px) {
    .hero__showcase {
        grid-template-columns: minmax(0, 1fr) minmax(360px, 1.35fr) minmax(0, 1fr);
        align-items: center;
        gap: clamp(1rem, -1rem + 4vw, 2.5rem);
        margin-top: clamp(1rem, -1rem + 4vw, 2rem);
    }

    .hero__figure {
        grid-column: 2;
        grid-row: 1;
        max-width: 460px;
        height: clamp(520px, 44vw, 660px);
    }

    /* A vitrine inteira entra na mesma dobra: o escalonamento das entradas
       só existe aqui. Abaixo do desktop cada bloco aparece sozinho durante a
       rolagem, e qualquer atraso viraria espera. */
    .hero__aside--left  { --delay: 260ms; }
    .hero__aside--right { --delay: 300ms; }
    .hero__trust        { --delay: 160ms; }

    .hero__portrait img {
        filter: drop-shadow(0 24px 40px rgba(20, 16, 15, 0.22));
    }

    /* No desktop há espaço lateral: o domo transborda a coluna e os ícones
       flutuam para fora, soltando a composição. */
    .hero__arc {
        width: min(124%, 540px);
    }

    .hero__orbit--1 { left: -6%; }
    .hero__orbit--2 { right: -4%; }
    .hero__orbit--3 { left: -9%; }
    .hero__orbit--4 { right: -7%; }

    .hero__aside {
        grid-row: 1;
        background-color: transparent;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border-color: transparent;
        box-shadow: none;
        padding: 0;
    }

    .hero__aside--left {
        grid-column: 1;
        justify-self: start;
        max-width: 300px;
        /* Alinha o bloco com a curva do arco, como no layout de referência. */
        margin-bottom: clamp(0rem, -4rem + 8vw, 4rem);
    }

    .hero__aside--right {
        grid-column: 3;
        justify-self: end;
        max-width: 300px;
        text-align: left;
        margin-bottom: clamp(0rem, -6rem + 10vw, 6rem);
    }

    .hero__stat,
    .hero__reviewer {
        border-top-color: var(--color-border);
    }

    /* As métricas são a versão condensada dos cards: só no mobile/tablet. */
    .hero__metrics {
        display: none;
    }

    .hero__trust-logos {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: var(--space-8);
    }
}

@media (min-width: 1440px) {
    .hero__figure {
        max-width: 500px;
        height: 680px;
    }

    .hero__aside--left,
    .hero__aside--right {
        max-width: 320px;
    }
}

/* Sem suporte a backdrop-filter: superfícies sólidas equivalentes. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .hero__aside,
    .hero__metric,
    .hero__orbit {
        background-color: rgba(255, 255, 255, 0.94);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero__orbit {
        animation: none;
    }

    .hero__underline path {
        stroke-dashoffset: 0;
    }
}