/*
 * Rodapé do site (roda_pe.php). Prefixo fr-; paleta igual à do cabeçalho e da home.
 * Seletores com .fr para não herdar estilos antigos de "footer" das páginas.
 */
.fr {
    --fr-verde: #07a698;
    --fr-verde-claro: #2fd0bf;
    --fr-petroleo: #0f2a2e;
    --fr-petroleo-2: #0a1f22;
    --fr-texto: rgba(255, 255, 255, .72);
    --fr-borda: rgba(255, 255, 255, .1);
    position: relative;
    margin: 80px 0 0;   /* espaço para a faixa da ouvidoria, que sobe metade acima do rodapé */
    padding: 0;
    background:
        radial-gradient(700px 360px at 100% 0%, rgba(47, 208, 191, .12), transparent 70%),
        linear-gradient(180deg, var(--fr-petroleo), var(--fr-petroleo-2));
    color: var(--fr-texto);
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 15.5px;
    line-height: 1.6;
    text-align: left;
}
.fr *, .fr *::before, .fr *::after { box-sizing: border-box; }
.fr ul { list-style: none; margin: 0; padding: 0; }
.fr a { color: inherit; text-decoration: none; transition: color .2s; }
.fr a:hover { color: #fff; }
.fr h2 { margin: 0; font-family: inherit; }
.fr-container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 24px; }   /* mesma largura do cabeçalho */

/* ---------- ouvidoria ---------- */
.fr-ouvidoria {
    position: relative;
    top: 0;
    display: grid;
    grid-template-columns: minmax(240px, .8fr) 1.6fr;
    align-items: center;
    gap: 28px;
    padding: 28px 32px;
    transform: translateY(-50%);
    margin-bottom: -40px;
    border-radius: 24px;
    background: linear-gradient(120deg, #07a698, #05786e);
    box-shadow: 0 30px 60px -30px rgba(5, 120, 110, .8);
    color: #fff;
}
.fr-ouvidoria-texto { display: flex; align-items: center; gap: 16px; }
.fr-ouvidoria-icone {
    flex: 0 0 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: rgba(255, 255, 255, .16);
    font-size: 24px;
}
.fr-ouvidoria h2 { color: #fff; font-size: 22px; font-weight: 700; line-height: 1.2; }
.fr-ouvidoria p { margin: 4px 0 0; color: rgba(255, 255, 255, .88); font-size: 15px; }
.fr-form {
    display: grid;
    grid-template-columns: 1fr 1.4fr auto;
    gap: 10px;
    align-items: center;
}
.fr-form-campo { position: relative; }
.fr-form-campo > i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #5b6463;
    font-size: 14px;
    pointer-events: none;
}
.fr-form input {
    width: 100%;
    height: 52px;
    padding: 0 16px 0 42px;
    border: 2px solid transparent;
    border-radius: 999px;
    background: #fff;
    color: #12201f;
    font: 400 15.5px 'Outfit', system-ui, sans-serif;
}
.fr-form input::placeholder { color: #6b7574; }
.fr-form input:focus { outline: none; border-color: #ffbf47; }
.fr-form-botao {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 24px;
    border: 0;
    border-radius: 999px;
    background: var(--fr-petroleo);
    color: #fff;
    font: 600 15.5px 'Outfit', system-ui, sans-serif;
    cursor: pointer;
    transition: background .2s, transform .2s;
}
.fr-form-botao:hover { background: #163b40; transform: translateY(-1px); }
.fr-form-botao:disabled { opacity: .7; cursor: wait; }
.fr-form-status { grid-column: 1 / -1; margin: 0; min-height: 0; font-size: 14.5px; font-weight: 500; }
.fr-form-status:empty { display: none; }
.fr-form-status.erro { color: #fff2c4; }
.fr-form-status.ok { color: #fff; }

/* ---------- colunas ---------- */
.fr-grade {
    display: grid;
    grid-template-columns: 1.25fr .85fr 1fr .9fr 1.35fr 184px;   /* a última coluna é o QR do e-MEC */
    gap: 32px;
    padding-top: 24px;
    padding-bottom: 48px;
}
.fr-logo {
    display: inline-block;
    padding: 10px 16px;
    border-radius: 16px;
    background: #fff;
    line-height: 0;
}
.fr-logo img { width: auto; height: 52px; }
.fr-marca p { margin: 18px 0 20px; color: var(--fr-texto); }
.fr-sociais { display: flex; gap: 8px; }
.fr-sociais a {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid var(--fr-borda);
    border-radius: 50%;
    color: #fff;
    font-size: 16px;
    transition: background .2s, border-color .2s, transform .2s;
}
.fr-sociais a:hover { background: var(--fr-verde); border-color: var(--fr-verde); transform: translateY(-2px); }
.fr-coluna h2 {
    margin-bottom: 18px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .02em;
}
.fr-coluna li + li { margin-top: 10px; }
.fr-coluna a { display: inline-flex; align-items: center; min-height: 24px; color: var(--fr-texto); }
.fr-coluna nav a:hover, .fr-coluna a:hover { color: var(--fr-verde-claro); }
.fr-atendimento li { display: flex; gap: 12px; align-items: flex-start; }
.fr-atendimento li > i { width: 16px; margin-top: 5px; color: var(--fr-verde-claro); text-align: center; }
.fr-atendimento a { display: inline; }
/* QR Code do e-MEC: coluna própria, grande o bastante para a câmera do celular ler na tela */
.fr-emec {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 184px;
    color: var(--fr-texto);
    text-align: center;
}
.fr-emec img {
    display: block;
    width: 100%;
    height: auto;
    padding: 8px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 0 0 1px var(--fr-borda), 0 18px 36px -18px rgba(0, 0, 0, .6);
    transition: transform .25s, box-shadow .25s;
}
.fr-emec:hover img { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--fr-verde-claro), 0 22px 40px -18px rgba(0, 0, 0, .7); }
.fr-emec span { font-size: 13px; line-height: 1.4; }
.fr-emec:hover span { color: #fff; }

/* ---------- barra final ---------- */
.fr-base { border-top: 1px solid var(--fr-borda); }
.fr-base-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 14px;
}
.fr-base p { margin: 0; color: rgba(255, 255, 255, .6); }
.fr-base ul { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.fr-base a, .fr-link-botao {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 24px;
    padding: 0;
    border: 0;
    background: none;
    color: rgba(255, 255, 255, .72);
    font: inherit;
    cursor: pointer;
}
.fr-base a:hover, .fr-link-botao:hover { color: #fff; }
.fr-topo i { font-size: 12px; }

/* botão flutuante "voltar ao topo" do tema: no padrão do site */
#scrollup .scroll-to-top {
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #05786e;
    color: #fff;
    box-shadow: 0 10px 24px -10px rgba(5, 120, 110, .9);
}

/* ---------- responsivo ---------- */
@media (max-width: 1199px) {
    /* telas médias: marca em cima; links em 3 colunas; atendimento e QR lado a lado embaixo */
    .fr-grade { grid-template-columns: repeat(3, 1fr); }
    .fr-marca { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; }
    .fr-marca p { margin: 0; }
    .fr-atendimento { grid-column: 1 / 3; }
    .fr-emec-coluna { grid-column: 3; }
}
@media (max-width: 991px) {
    .fr { margin-top: 56px; }
    .fr-ouvidoria { grid-template-columns: 1fr; transform: translateY(-40px); margin-bottom: -16px; }
}
@media (max-width: 767px) {
    .fr-grade { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
    .fr-marca { display: block; }
    .fr-marca p { margin: 16px 0 18px; }
    .fr-atendimento { grid-column: 1 / -1; }
    .fr-emec-coluna { grid-column: 1 / -1; }
    .fr-emec { flex-direction: row; max-width: 360px; text-align: left; gap: 16px; }   /* celular: QR e texto lado a lado */
    .fr-emec img { flex: 0 0 150px; width: 150px; }
    .fr-form { grid-template-columns: 1fr; }
    .fr-form-botao { justify-content: center; }
}
@media (max-width: 575px) {
    .fr-container { padding: 0 16px; }
    .fr-ouvidoria { padding: 22px 18px; border-radius: 20px; }
    .fr-coluna:not(.fr-atendimento):not(.fr-emec-coluna) { grid-column: span 1; }
    .fr-base-inner { flex-direction: column; align-items: flex-start; padding-bottom: 84px; }   /* espaço para os botões flutuantes não cobrirem os links */
    .fr-grade { padding-bottom: 36px; }
    .fr-emec-coluna { margin-bottom: 8px; }
}
@media print {
    .fr-ouvidoria, .fr-sociais, #scrollup { display: none; }
}