/* FRIATO — Missão, visão e valores */
.fr-guide__pair { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(18px, 3vw, 32px); align-items: stretch; }
.fr-guide__card { position: relative; overflow: hidden; isolation: isolate; padding: clamp(32px, 4.4vw, 64px); border-radius: 28px; }
.fr-guide__label { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 22px; }
.fr-guide__label::before { content: ""; width: 30px; height: 3px; border-radius: 3px; background: currentColor; }
.fr-guide__statement { position: relative; font-size: clamp(22px, 2.3vw, 30px); line-height: 1.38; letter-spacing: -.012em; margin: 0; text-wrap: pretty; }

/* Missão: gradiente da marca, aspas gigantes e anel tracejado girando */
.fr-guide__card--mission { background: var(--fr-g-brand); color: var(--fr-white); box-shadow: 0 30px 60px rgba(212, 38, 31, .3); }
.fr-guide__card--mission .fr-guide__label { color: var(--fr-gold-light); }
.fr-guide__card--mission::before {
    content: "\201C";
    position: absolute;
    z-index: -1;
    right: 22px;
    top: -34px;
    font-size: 240px;
    font-weight: 800;
    line-height: 1;
    color: rgba(255, 212, 90, .28);
}
.fr-guide__ring {
    position: absolute;
    z-index: -1;
    width: 360px;
    aspect-ratio: 1;
    right: -120px;
    bottom: -170px;
    border-radius: 50%;
    border: 2px dashed rgba(255, 212, 90, .5);
    animation: fr-spin 40s linear infinite;
}
.fr-guide__ring::after { content: ""; position: absolute; width: 16px; height: 16px; left: 14%; top: 14%; border-radius: 50%; background: var(--fr-gold-light); box-shadow: 0 0 0 8px rgba(255, 212, 90, .22); }

/* Visão: cartão branco com borda em gradiente */
.fr-guide__card--vision {
    border: 3px solid transparent;
    background: linear-gradient(var(--fr-white), var(--fr-white)) padding-box, var(--fr-g-brand) border-box;
}
.fr-guide__card--vision .fr-guide__label { color: var(--fr-red); }
.fr-guide__card--vision .fr-guide__statement { color: var(--fr-wine); }
.fr-guide__card--vision::after { content: ""; position: absolute; z-index: -1; width: 220px; aspect-ratio: 1; right: -70px; top: -70px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 212, 90, .45), rgba(255, 212, 90, 0) 70%); }
@media (max-width: 991.98px) { .fr-guide__pair { grid-template-columns: 1fr; } }

/* Valores: cartões numerados que se enchem de cor no hover */
.fr-guide__values-title { font-size: clamp(30px, 3.4vw, 46px); }
.fr-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: clamp(14px, 2vw, 22px); list-style: none; margin: 0; padding: 0; }
.fr-value {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 28px 24px 30px;
    border-radius: 24px;
    background: var(--fr-white);
    box-shadow: 0 1px 0 var(--fr-sand), 0 14px 30px rgba(58, 18, 8, .06);
    transition: transform .4s var(--fr-ease), box-shadow .4s var(--fr-ease), color .3s;
}
.fr-value::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--fr-g-red);
    transform: translateY(101%);
    transition: transform .5s var(--fr-ease);
}
.fr-value:hover { transform: translateY(-6px); box-shadow: 0 26px 50px rgba(212, 38, 31, .25); }
.fr-value:hover::before { transform: none; }
.fr-value__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--fr-g-card-2); color: var(--fr-white); box-shadow: 0 10px 22px rgba(212, 38, 31, .25); transition: background .3s, color .3s, transform .4s var(--fr-ease); }
.fr-value__icon svg { width: 28px; height: 28px; }
.fr-value__title { margin: 6px 0 0; font-size: 20px; font-weight: 800; line-height: 1.2; color: var(--fr-red); transition: color .3s; }
.fr-value__text { margin: 0; font-size: 15px; line-height: 1.65; color: var(--fr-ink); transition: color .3s; }
.fr-value:hover .fr-value__title { color: var(--fr-gold-light); }
.fr-value:hover .fr-value__text { color: var(--fr-white); }
.fr-value:hover .fr-value__icon { background: var(--fr-white); color: var(--fr-red); transform: rotate(-8deg) scale(1.06); }
.fr-value:hover @keyframes fr-value-in { from { opacity: 0; transform: translateY(40px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .fr-guide__ring { animation: none; }
    .fr-value, .fr-value::before { transition: none; }
}