/* FRIATO — Institucional: Grupo Tomazini (linha do tempo). Intro e CTA compartilhados por Estrutura e Diretrizes. */
.fr-inst__intro-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: end; }
.fr-inst__statement {
    font-weight: 400;
    font-size: clamp(28px, 3.6vw, 46px);
    line-height: 1.14;
    letter-spacing: -.02em;
    color: var(--fr-red);
    margin: 0;
    text-wrap: balance;
}
.fr-inst__next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; }
.fr-inst__next-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 991.98px) { .fr-inst__intro-grid { grid-template-columns: 1fr; } }

/* Atalhos por década (a década visível fica em destaque) */
.fr-decades { position: sticky; top: var(--fr-header-h); z-index: 20; background: rgba(255, 253, 247, .97); border-bottom: 1px solid var(--fr-sand); box-shadow: 0 8px 20px rgba(58, 18, 8, .05); }
.fr-decades ul { display: flex; gap: 6px; list-style: none; margin: 0; padding: 10px 0; overflow-x: auto; scrollbar-width: none; }
.fr-decades ul::-webkit-scrollbar { display: none; }
.fr-decades a {
    display: inline-flex;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--fr-wine) !important;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    transition: background-color .2s, color .2s, transform .2s var(--fr-ease);
}
.fr-decades a:hover { background: var(--fr-glow); color: var(--fr-red) !important; }
.fr-decades a.is-active { background: var(--fr-g-pill); color: var(--fr-white) !important; transform: scale(1.04); }

/* Linha do tempo */
.fr-timeline-wrap { position: relative; padding: clamp(40px, 6vw, 96px) 0; overflow: hidden; }
.fr-timeline { position: relative; list-style: none; padding: 0; margin: 0 auto; max-width: 1080px; }
.fr-timeline::before, .fr-timeline::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    margin-left: -2px;
    border-radius: 4px;
    background: var(--fr-sand);
}
.fr-timeline::after { background: linear-gradient(180deg, #CC3B1B 0%, #D4261F 35%, #D56221 70%, var(--fr-gold) 100%); transform-origin: top; }
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .fr-timeline::after { animation: fr-line-fill linear both; animation-timeline: view(); animation-range: entry 10% exit 90%; }
    }
}
@keyframes fr-line-fill { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* Marco de década: pílula sobre a linha + número gigante de fundo */
.fr-timeline__era { position: relative; display: flex; justify-content: center; padding: 8px 0 44px; scroll-margin-top: calc(var(--fr-header-h) + 80px); }
.fr-timeline__era span {
    position: relative;
    z-index: 1;
    padding: 10px 22px;
    border-radius: 999px;
    background: var(--fr-g-brand);
    color: var(--fr-white);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    box-shadow: 0 0 0 6px var(--fr-cream), 0 14px 30px rgba(212, 38, 31, .28);
}
.fr-timeline__era::before {
    content: attr(data-year);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -62%);
    font-size: clamp(90px, 16vw, 220px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.05em;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(212, 38, 31, .12);
    white-space: nowrap;
    pointer-events: none;
}

.fr-timeline__item { position: relative; width: 50%; padding: 0 52px 52px 0; scroll-margin-top: calc(var(--fr-header-h) + 80px); }
.fr-timeline__item.is-right { margin-left: 50%; padding: 0 0 52px 52px; }
.fr-timeline__dot {
    position: absolute;
    top: 26px;
    right: -11px;
    z-index: 1;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--fr-white);
    border: 5px solid var(--fr-red);
    box-shadow: 0 0 0 6px var(--fr-cream);
}
.fr-timeline__item.is-right .fr-timeline__dot { right: auto; left: -11px; }
.fr-timeline__card {
    position: relative;
    border-radius: var(--fr-radius-card);
    overflow: hidden;
    background: var(--fr-white);
    box-shadow: 0 1px 0 var(--fr-sand), 0 14px 34px rgba(58, 18, 8, .07);
    transition: transform .4s var(--fr-ease), box-shadow .4s var(--fr-ease);
}
.fr-timeline__card:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 24px 50px rgba(58, 18, 8, .14); }
.fr-timeline__item.is-right .fr-timeline__card:hover { transform: translateY(-4px) rotate(.4deg); }
.fr-timeline__media { aspect-ratio: 16 / 10; background: var(--fr-sand-light); overflow: hidden; }
.fr-timeline__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--fr-ease); }
.fr-timeline__card:hover .fr-timeline__media img { transform: scale(1.05); }
.fr-timeline__body { padding: 22px 26px 28px; }
.fr-timeline__year {
    display: inline-block;
    font-size: clamp(40px, 4.4vw, 60px);
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
    color: var(--fr-red); /* número em cor sólida (antes: texto em degradê) */
}
.fr-timeline__badge { display: inline-block; margin-left: 10px; padding: 4px 12px; border-radius: 999px; background: var(--fr-gold); color: var(--fr-wine-dark); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; vertical-align: 14px; }
.fr-timeline__title { font-size: 20px; font-weight: 800; color: var(--fr-wine); margin: 12px 0 8px; line-height: 1.3; }
.fr-timeline__text, .fr-timeline__text p { font-size: 15px; line-height: 1.7; color: var(--fr-ink); margin: 0; }

/* 1998: nasce a Friato — cartão em destaque */
.fr-timeline__item.is-brand .fr-timeline__card { background: var(--fr-g-red); box-shadow: 0 30px 60px rgba(212, 38, 31, .35); }
.fr-timeline__item.is-brand .fr-timeline__year { background: none; color: var(--fr-gold-light); }
.fr-timeline__item.is-brand .fr-timeline__title,
.fr-timeline__item.is-brand .fr-timeline__text,
.fr-timeline__item.is-brand .fr-timeline__text p { color: var(--fr-white); }
.fr-timeline__item.is-brand .fr-timeline__dot { background: var(--fr-gold); border-color: var(--fr-red); width: 30px; height: 30px; top: 22px; right: -15px; animation: fr-pulse 2.4s ease-out infinite; }
.fr-timeline__item.is-brand.is-right .fr-timeline__dot { right: auto; left: -15px; }
@keyframes fr-pulse { 0% { box-shadow: 0 0 0 6px var(--fr-cream), 0 0 0 6px rgba(245, 181, 27, .5); } 100% { box-shadow: 0 0 0 6px var(--fr-cream), 0 0 0 26px rgba(245, 181, 27, 0); } }

/* Entrada dos cartões ao rolar, em qualquer navegador (fr-rise + IntersectionObserver do friato-ds.js):
   cada marco desliza do seu lado da linha e a bolinha "acende" logo depois */
.fr-motion .fr-timeline__item.fr-rise { transform: translateX(-56px) rotate(-1.5deg); }
.fr-motion .fr-timeline__item.fr-rise.is-right { transform: translateX(56px) rotate(1.5deg); }
.fr-motion .fr-timeline__era.fr-rise { transform: scale(.85); }
.fr-motion .fr-timeline__item.fr-rise.is-in, .fr-motion .fr-timeline__era.fr-rise.is-in { transform: none; }
.fr-motion .fr-timeline__item.fr-rise .fr-timeline__dot { transform: scale(.2); opacity: 0; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1) .35s, opacity .3s .35s; }
.fr-motion .fr-timeline__item.fr-rise.is-in .fr-timeline__dot { transform: none; opacity: 1; }
@media (max-width: 767.98px) { .fr-motion .fr-timeline__item.fr-rise.is-right { transform: translateX(-56px) rotate(-1.5deg); } }

@media (max-width: 767.98px) {
    .fr-timeline::before, .fr-timeline::after { left: 11px; }
    .fr-timeline__era { justify-content: flex-start; padding-left: 0; }
    .fr-timeline__item, .fr-timeline__item.is-right { width: auto; margin-left: 0; padding: 0 0 32px 44px; }
    .fr-timeline__dot, .fr-timeline__item.is-right .fr-timeline__dot { left: 0; right: auto; }
    .fr-timeline__item.is-brand .fr-timeline__dot, .fr-timeline__item.is-brand.is-right .fr-timeline__dot { left: -4px; }
}