/**
 * Hero interna (famílias, categorias, produto): textura de produto ampliada,
 * levemente escurecida e dissolvendo suavemente no fundo azul.
 */
.internal-hero__texture {
    background-repeat: no-repeat;
    /* Imagem grande — produto “invade” a hero e as bordas somem fora da área */
    background-position: right 12% center;
    background-size: min(135vw, 1080px);
    filter: brightness(0.46) contrast(1.06) saturate(0.92);
    /* Dissolve horizontal longa — sem corte seco */
    -webkit-mask-image: linear-gradient(
        to left,
        black 0%,
        black 12%,
        rgba(0, 0, 0, 0.82) 32%,
        rgba(0, 0, 0, 0.48) 52%,
        rgba(0, 0, 0, 0.18) 72%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to left,
        black 0%,
        black 12%,
        rgba(0, 0, 0, 0.82) 32%,
        rgba(0, 0, 0, 0.48) 52%,
        rgba(0, 0, 0, 0.18) 72%,
        transparent 100%
    );
}

@media (min-width: 641px) {
    .internal-hero__texture {
        -webkit-mask-image:
            linear-gradient(
                to left,
                black 0%,
                black 14%,
                rgba(0, 0, 0, 0.78) 34%,
                rgba(0, 0, 0, 0.42) 54%,
                rgba(0, 0, 0, 0.12) 74%,
                transparent 100%
            ),
            linear-gradient(
                to bottom,
                transparent 0%,
                black 8%,
                black 92%,
                transparent 100%
            );
        mask-image:
            linear-gradient(
                to left,
                black 0%,
                black 14%,
                rgba(0, 0, 0, 0.78) 34%,
                rgba(0, 0, 0, 0.42) 54%,
                rgba(0, 0, 0, 0.12) 74%,
                transparent 100%
            ),
            linear-gradient(
                to bottom,
                transparent 0%,
                black 8%,
                black 92%,
                transparent 100%
            );
        -webkit-mask-composite: source-in;
        mask-composite: intersect;
    }
}

@media (max-width: 640px) {
    .internal-hero__texture {
        background-position: right -18% center;
        background-size: min(175vw, 560px);
        filter: brightness(0.42) contrast(1.05) saturate(0.9);
        -webkit-mask-image: linear-gradient(
            to left,
            black 0%,
            rgba(0, 0, 0, 0.7) 28%,
            rgba(0, 0, 0, 0.25) 55%,
            transparent 88%
        );
        mask-image: linear-gradient(
            to left,
            black 0%,
            rgba(0, 0, 0, 0.7) 28%,
            rgba(0, 0, 0, 0.25) 55%,
            transparent 88%
        );
    }
}

/* --------------------------------------------------------------------------
   Foto institucional (fachada) — Sobre / Contato / Blog / Produtos
   Altura/padding no CSS estático (produção não depende de utilities Tailwind).
   -------------------------------------------------------------------------- */
.internal-hero--photo {
    /* Meio-termo: fachada visível sem ocupar quase a tela toda */
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    min-height: clamp(240px, 28vw, 360px);
    box-sizing: border-box;
}

.internal-hero__texture--photo {
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    /* Equilíbrio: placa + um pouco mais da fachada para baixo */
    background-position: 78% 34%;
    background-size: cover;
    background-repeat: no-repeat;
    filter: brightness(0.72) contrast(1.04) saturate(1.05);
    -webkit-mask-image: linear-gradient(
        to left,
        black 0%,
        black 28%,
        rgba(0, 0, 0, 0.75) 48%,
        rgba(0, 0, 0, 0.35) 68%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to left,
        black 0%,
        black 28%,
        rgba(0, 0, 0, 0.75) 48%,
        rgba(0, 0, 0, 0.35) 68%,
        transparent 100%
    );
}

@media (min-width: 641px) {
    .internal-hero--photo {
        padding-top: 3rem;
        padding-bottom: 3rem;
        min-height: clamp(280px, 26vw, 400px);
    }

    .internal-hero__texture--photo {
        background-position: 80% 30%;
        -webkit-mask-image: linear-gradient(
            to left,
            black 0%,
            black 32%,
            rgba(0, 0, 0, 0.78) 52%,
            rgba(0, 0, 0, 0.32) 72%,
            transparent 100%
        );
        mask-image: linear-gradient(
            to left,
            black 0%,
            black 32%,
            rgba(0, 0, 0, 0.78) 52%,
            rgba(0, 0, 0, 0.32) 72%,
            transparent 100%
        );
        -webkit-mask-composite: unset;
        mask-composite: unset;
    }
}

@media (min-width: 1024px) {
    .internal-hero--photo {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }
}

@media (max-width: 640px) {
    .internal-hero--photo {
        padding-top: 2.25rem;
        padding-bottom: 2.25rem;
        min-height: clamp(220px, 52vw, 300px);
    }

    .internal-hero__texture--photo {
        background-position: 82% 32%;
        background-size: cover;
        filter: brightness(0.62) contrast(1.04) saturate(1.02);
        -webkit-mask-image: linear-gradient(
            to left,
            black 0%,
            rgba(0, 0, 0, 0.85) 35%,
            rgba(0, 0, 0, 0.35) 62%,
            transparent 100%
        );
        mask-image: linear-gradient(
            to left,
            black 0%,
            rgba(0, 0, 0, 0.85) 35%,
            rgba(0, 0, 0, 0.35) 62%,
            transparent 100%
        );
    }
}

/* --------------------------------------------------------------------------
   Arcos minimalistas — traço fino amarelo/branco, alinhado à identidade Detack
   -------------------------------------------------------------------------- */
.internal-hero__arcs {
    z-index: 2;
}

.internal-hero__arc {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

/* Arco principal — enquadra o bloco de título (centralizado) */
.internal-hero__arc--title {
    width: min(74vw, 540px);
    height: min(74vw, 540px);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -54%) rotate(-22deg);
    background: conic-gradient(
        from 228deg,
        transparent 0deg,
        rgba(253, 185, 19, 0.42) 26deg,
        rgba(253, 185, 19, 0.14) 52deg,
        transparent 86deg
    );
    -webkit-mask: radial-gradient(
        farthest-side,
        transparent calc(100% - 1.5px),
        #000 calc(100% - 0.5px)
    );
    mask: radial-gradient(
        farthest-side,
        transparent calc(100% - 1.5px),
        #000 calc(100% - 0.5px)
    );
}

/* Detalhe secundário — arco menor, branco suave */
.internal-hero__arc--accent {
    width: min(36vw, 210px);
    height: min(36vw, 210px);
    top: 14%;
    left: clamp(12%, 18vw, 7rem);
    transform: rotate(14deg);
    background: conic-gradient(
        from 196deg,
        transparent 0deg,
        rgba(255, 255, 255, 0.22) 32deg,
        rgba(255, 255, 255, 0.06) 58deg,
        transparent 82deg
    );
    -webkit-mask: radial-gradient(
        farthest-side,
        transparent calc(100% - 1px),
        #000 calc(100% - 0px)
    );
    mask: radial-gradient(
        farthest-side,
        transparent calc(100% - 1px),
        #000 calc(100% - 0px)
    );
}

/* Arco amplo à direita — equilibra a textura do produto */
.internal-hero__arc--edge {
    width: min(88vw, 640px);
    height: min(88vw, 640px);
    top: 50%;
    right: -10%;
    transform: translateY(-50%) rotate(6deg);
    background: conic-gradient(
        from 118deg,
        transparent 0deg,
        rgba(255, 255, 255, 0.1) 38deg,
        rgba(253, 185, 19, 0.16) 62deg,
        transparent 98deg
    );
    -webkit-mask: radial-gradient(
        farthest-side,
        transparent calc(100% - 1.25px),
        #000 calc(100% - 0.25px)
    );
    mask: radial-gradient(
        farthest-side,
        transparent calc(100% - 1.25px),
        #000 calc(100% - 0.25px)
    );
}

/* Curva inferior — transição suave hero → conteúdo branco */
.internal-hero__curve {
    position: absolute;
    bottom: -1px;
    left: 50%;
    z-index: 5;
    width: 110%;
    height: clamp(18px, 3.5vw, 32px);
    transform: translateX(-50%);
    background: #fff;
    border-radius: 100% 100% 0 0 / 100% 100% 0 0;
    pointer-events: none;
}

@media (max-width: 640px) {
    .internal-hero__arc--title {
        width: min(95vw, 360px);
        height: min(95vw, 360px);
        left: 50%;
        transform: translate(-50%, -58%) rotate(-18deg);
        opacity: 0.75;
    }

    .internal-hero__arc--accent {
        display: none;
    }

    .internal-hero__arc--edge {
        width: min(120vw, 420px);
        right: -28%;
        opacity: 0.65;
    }

    .internal-hero__curve {
        height: clamp(14px, 5vw, 22px);
    }
}