/* FRIATO — Estrutura: cadeia produtiva "do campo à mesa" */
/* Etapas */
.fr-stages { padding: clamp(48px, 7vw, 110px) 0; overflow: hidden; }
.fr-stage {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(32px, 6vw, 88px);
    align-items: center;
    scroll-margin-top: calc(var(--fr-header-h) + 80px);
}
.fr-stage.is-reverse .fr-stage__visual { order: 2; }
.fr-stage__visual { position: relative; }
/* bloco colorido deslocado atrás da foto */
.fr-stage__visual::before {
    content: "";
    position: absolute;
    inset: 22px -22px -22px 22px;
    border-radius: var(--fr-radius-card);
    background: var(--fr-g-brand);
    transform: rotate(2deg);
}
.fr-stage.is-reverse .fr-stage__visual::before { inset: 22px 22px -22px -22px; transform: rotate(-2deg); }
.fr-stage:nth-of-type(3n) .fr-stage__visual::before { background: linear-gradient(135deg, var(--fr-gold) 0%, var(--fr-orange) 100%); }
.fr-stage__media { position: relative; border-radius: var(--fr-radius-card); overflow: hidden; aspect-ratio: 3 / 2; background: var(--fr-sand-light); box-shadow: 0 24px 56px rgba(58, 18, 8, .16); }
.fr-stage__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s var(--fr-ease); }
.fr-stage:hover .fr-stage__media img { transform: scale(1.04); }
.fr-stage__title { font-weight: 400; font-size: clamp(26px, 2.8vw, 38px); line-height: 1.12; letter-spacing: -.02em; color: var(--fr-red); margin: 0 0 16px; }
.fr-stage__text, .fr-stage__text p { font-size: 16px; line-height: 1.8; color: var(--fr-ink); }
.fr-stage__text p:last-child { margin-bottom: 0; }
.fr-stage__text strong, .fr-stage__text b { color: var(--fr-red); font-weight: 800; }

/* Ligação entre etapas: tracejado que "corre" para baixo, como a produção */
.fr-stage__link { display: flex; justify-content: center; padding: clamp(28px, 4vw, 48px) 0; }
.fr-stage__link span {
    position: relative;
    width: 3px;
    height: clamp(56px, 7vw, 88px);
    background: repeating-linear-gradient(180deg, var(--fr-orange) 0 8px, transparent 8px 16px);
    background-size: 3px 16px;
    animation: fr-flow 1.1s linear infinite;
}
.fr-stage__link span::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    border-right: 3px solid var(--fr-red);
    border-bottom: 3px solid var(--fr-red);
    transform: rotate(45deg);
}
@keyframes fr-flow { to { background-position: 0 16px; } }

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .fr-stage__visual { animation: fr-stage-in linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
        .fr-stage.is-reverse .fr-stage__visual { animation-name: fr-stage-in-rev; }
        @keyframes fr-stage-in { from { opacity: 0; transform: translateX(-60px) rotate(-3deg); } to { opacity: 1; transform: none; } }
@keyframes fr-stage-in-rev { from { opacity: 0; transform: translateX(60px) rotate(3deg); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fr-stage__link span { animation: none; } }

@media (max-width: 991.98px) {
    .fr-stage { grid-template-columns: 1fr; }
    .fr-stage.is-reverse .fr-stage__visual { order: 0; }
    .fr-stage__visual::before, .fr-stage.is-reverse .fr-stage__visual::before { inset: 14px -10px -14px 10px; }
}