/* ==========================================================================
   Hero — Layout split (texto esquerda, imagem direita)
   ========================================================================== */

.hero {
    display: flex;
    flex-direction: column;
    min-height: var(--hero-viewport-min);
    background-color: var(--color-bg);
    overflow: hidden;
}

.hero__container {
    flex: 1;
    min-height: 0;
    width: 100%;
    max-width: 1216px;
    margin: 0 auto;
    padding: var(--hero-pad-block) var(--hero-pad-inline) var(--hero-pad-block-end);
    display: flex;
    align-items: center;
    gap: var(--hero-gap-block);
}

/* ===== Lado esquerdo: Texto ===== */

.hero__content {
    flex: 1;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    gap: var(--hero-gap-content);
}

/* Badge */
.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: clamp(6px, 0.5vw, 8px);
    padding: clamp(5px, 0.4vw, 6px) clamp(12px, calc(8px + 0.5vw), 16px);
    background-color: var(--color-white);
    border-radius: var(--radius-full);
    font-size: var(--hero-badge-size);
    font-weight: 500;
    color: #252B37;
    width: fit-content;
}

.hero__badge img {
    width: clamp(14px, calc(12px + 0.25vw), 16px);
    height: clamp(14px, calc(12px + 0.25vw), 16px);
}

/* Título */
.hero__title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--hero-title-size);
    line-height: var(--font-hero-lh);
    color: var(--color-dark);
    letter-spacing: var(--font-hero-ls);
}

.hero__title-highlight {
    position: relative;
    padding: 0 6px;
    isolation: isolate;
}

.hero__title-highlight::before {
    content: '';
    position: absolute;
    inset: -2px -4px;
    background-color: #AECA37;
    aspect-ratio: 4.806;
    clip-path: shape(from 2.85% 14.47%, curve to 6.55% 0% with 3.21% 6.04% / 4.76% 0%, hline to 96.22%, curve to 99.9% 22.22% with 98.64% 0% / 100.44% 10.84%, line to 96.89% 85.86%, curve to 93.2% 100% with 96.5% 94.13% / 94.97% 100%, hline to 3.78%, curve to 0.08% 78.1% with 1.38% 100% / -0.41% 89.4%, line to 2.85% 14.47%, close);
    z-index: -1;
}

/* Subtítulo */
.hero__subtitle {
    font-size: var(--hero-subtitle-size);
    line-height: 1.7;
    color: var(--color-text-muted);
}

.hero__subtitle strong {
    color: var(--color-dark);
    font-weight: 600;
}

/* Checkmarks */
.hero__checks {
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 0.6vw, 10px);
}

.hero__check {
    display: flex;
    align-items: flex-start;
    gap: clamp(8px, 0.6vw, 10px);
    font-size: var(--hero-body-size);
    line-height: 1.5;
    color: #414651;
}

.hero__check strong {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
}

.hero__check-icon {
    flex-shrink: 0;
    width: clamp(18px, calc(16px + 0.25vw), 20px);
    height: clamp(18px, calc(16px + 0.25vw), 20px);
    margin-top: 1px;
}

.hero__check-icon path {
    stroke: #414651;
}

/* CTA */
.hero__cta {
    display: inline-flex;
    align-items: center;
    gap: clamp(10px, 0.75vw, 12px);
    padding: clamp(6px, 0.5vw, 8px) clamp(6px, 0.5vw, 8px) clamp(6px, 0.5vw, 8px) clamp(20px, calc(14px + 0.75vw), 28px);
    background-color: var(--color-button);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--hero-cta-size);
    font-weight: 500;
    border-radius: var(--radius-full);
    border: none;
    cursor: pointer;
    transition: background-color var(--transition-fast);
    width: fit-content;
}

.hero__cta:hover {
    background-color: #0f1d36;
}

.hero__cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(32px, calc(28px + 0.5vw), 36px);
    height: clamp(32px, calc(28px + 0.5vw), 36px);
    background-color: var(--color-white);
    border-radius: 50%;
    flex-shrink: 0;
    color: var(--color-dark);
}

.hero__cta-icon svg {
    width: clamp(16px, calc(14px + 0.25vw), 18px);
    height: clamp(16px, calc(14px + 0.25vw), 18px);
}

/* Social proof */
.hero__proof {
    display: flex;
    align-items: center;
    gap: clamp(10px, 0.75vw, 12px);
}

.hero__avatars {
    display: flex;
    flex-shrink: 0;
}

/* Vale para <img> (com foto) e <svg> placeholder (sem foto) — os avatares
   reaproveitam os 3 primeiros depoimentos, espelhando seu estado. */
.hero__avatar {
    flex-shrink: 0;
    width: clamp(32px, calc(28px + 0.5vw), 36px);
    height: clamp(32px, calc(28px + 0.5vw), 36px);
    border-radius: 50%;
    border: 2px solid var(--color-white);
    object-fit: cover;
}

.hero__avatar:not(:first-child) {
    margin-left: clamp(-8px, -0.6vw, -10px);
}

.hero__proof-text {
    font-size: var(--hero-caption-size);
    line-height: 1.4;
    color: var(--color-text-muted);
}

.hero__proof-text strong {
    color: var(--color-dark);
    font-weight: 500;
}

/* ===== Lado direito: Imagem ===== */

.hero__visual {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: var(--hero-visual-max-w);
    min-height: 0;
}

.hero__image {
    width: 100%;
    border-radius: var(--radius-lg);
}

/* ===== Separador + Scroll button ===== */

.hero__divider {
    position: relative;
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hero__divider::before {
    content: '';
    position: absolute;
    left: var(--container-padding);
    right: var(--container-padding);
    top: 50%;
    height: 1px;
    background-color: var(--color-border);
}

.hero__scroll {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    width: clamp(36px, calc(32px + 0.5vw), 40px);
    height: clamp(36px, calc(32px + 0.5vw), 40px);
    border-radius: 50%;
    background-color: var(--color-bg);
    border: 1px solid #E9EAEB;
    color: #475580;
    flex-shrink: 0;
    transition: background-color var(--transition-fast);
}

.hero__scroll:hover {
    background-color: #F5F5F5;
}

.hero__scroll-arrow {
    animation: scrollPulse 2s ease-in-out infinite;
}

.hero__scroll-arrow--bottom {
    animation-delay: 0.3s;
}

@keyframes scrollPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.15; }
}

/* ===== About: Consultoria + Dashboard ===== */

.hero__about {
    width: 100%;
    padding: clamp(48px, calc(29.71px + 1.79vw), 64px) 0 var(--space-section);
}

.hero__about-container {
    width: 100%;
    max-width: 1216px;
    margin: 0 auto;
    padding: 0 var(--hero-pad-inline);
    display: flex;
    align-items: center;
    gap: var(--hero-gap-block);
}

.hero__about-content {
    flex: 1;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    gap: var(--hero-gap-content);
}

.hero__about-title {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: var(--section-title-size);
    line-height: 1.1;
    color: var(--color-dark);
}

.hero__about-text {
    display: flex;
    flex-direction: column;
    gap: var(--hero-gap-content);
}

.hero__about-text p {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--hero-subtitle-size);
    line-height: 1.5;
    color: var(--color-text-muted);
}

.hero__about-cta {
    display: inline-flex;
    align-items: center;
    gap: clamp(10px, 0.75vw, 12px);
    padding: clamp(6px, 0.5vw, 8px) clamp(6px, 0.5vw, 8px) clamp(6px, 0.5vw, 8px) clamp(20px, calc(14px + 0.75vw), 28px);
    background-color: var(--color-button);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--hero-cta-size);
    font-weight: 500;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background-color var(--transition-fast);
    width: fit-content;
}

.hero__about-cta:hover {
    background-color: #0f1d36;
}

.hero__about-cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(32px, calc(28px + 0.5vw), 36px);
    height: clamp(32px, calc(28px + 0.5vw), 36px);
    background-color: var(--color-white);
    border-radius: 50%;
    flex-shrink: 0;
    color: var(--color-dark);
}

.hero__about-cta-icon svg {
    width: clamp(16px, calc(14px + 0.25vw), 18px);
    height: clamp(16px, calc(14px + 0.25vw), 18px);
}

.hero__about-visual {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: var(--hero-visual-max-w);
}

.hero__about-image {
    width: 100%;
    border-radius: var(--radius-lg);
}

/* ===== Mobile ===== */

@media (max-width: 768px) {
    .hero {
        min-height: auto;
    }

    .hero__container {
        flex-direction: column;
        text-align: center;
        padding: var(--hero-pad-block) var(--hero-pad-inline) var(--hero-pad-block-end);
    }

    .hero__content {
        max-width: 100%;
        align-items: center;
    }

    .hero__checks {
        align-items: flex-start;
        text-align: left;
    }

    .hero__cta {
        width: fit-content;
    }

    .hero__proof {
        justify-content: center;
    }

    /* Imagem do herói (homem com laptop) é exclusiva do desktop —
       o design mobile não a exibe. */
    .hero__visual {
        display: none;
    }

    .hero__divider::before {
        left: var(--hero-pad-inline);
        right: var(--hero-pad-inline);
    }

    .hero__about {
        padding: var(--hero-pad-block) 0 var(--space-section);
    }

    /* Mobile (design Figma): texto do bloco TWED vem antes do dashboard.
       column-reverse inverte a ordem visual [visual, content] => [content, visual]. */
    .hero__about-container {
        flex-direction: column-reverse;
        text-align: center;
    }

    .hero__about-content {
        max-width: 100%;
        align-items: center;
    }

    /* No mobile, deixa o título quebrar naturalmente conforme a largura */
    .hero__about-title-break {
        display: none;
    }

    .hero__about-cta {
        width: fit-content;
    }

    .hero__about-visual {
        max-width: 100%;
        width: 100%;
    }
}