/* =============================================
   Rogério Rodapé Profissional v2.1 Premium
   Layout 4 colunas tipo grandes lojas
   Fonte: Montserrat (fallback sans-serif)
   Azul Royal: #0052cc
   Hover Azul Claro: #3399ff
   Modo claro/escuro automático via prefers-color-scheme
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap');

:root {
    --footer-bg-light: #ffffff;
    --footer-text-light: #555555;
    --footer-heading-light: #0052cc;
    --footer-hover-light: #3399ff;
    --footer-border-light: rgba(0,0,0,0.08);

    --footer-bg-dark: #1a1a1d;
    --footer-text-dark: #dddddd;
    --footer-heading-dark: #4d88ff;
    --footer-hover-dark: #66aaff;
    --footer-border-dark: rgba(255,255,255,0.12);

    --transition-fast: 0.25s ease;
    --radius-soft: 10px;
    --max-width-footer: 1280px;
    --padding-desktop-y: 3rem;
    --padding-mobile-y: 2rem;
    --gap-col: 2rem;
    --title-size: 0.95rem;
    --text-size: 0.9rem;
    --copy-size: 0.8rem;
}

/* ===========================
   WRAPPER GERAL DO RODAPÉ
   =========================== */
.rogerio-footer {
    font-family: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    border-top: 1px solid var(--footer-border-light);
    background: var(--footer-bg-light);
    color: var(--footer-text-light);
    transition: background var(--transition-fast), color var(--transition-fast), border var(--transition-fast), box-shadow var(--transition-fast);
    box-shadow: 0 -20px 60px rgba(0,0,0,0.12);
}

@media (prefers-color-scheme: dark) {
    .rogerio-footer {
        background: var(--footer-bg-dark);
        color: var(--footer-text-dark);
        border-top: 1px solid var(--footer-border-dark);
        box-shadow: 0 -30px 80px rgba(0,0,0,0.8),
                    0 0 40px rgba(0,82,204,0.22);
    }
}

/* ===========================
   ÁREA SUPERIOR (4 COLUNAS)
   =========================== */
.rogerio-footer-inner {
    max-width: var(--max-width-footer);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: var(--padding-desktop-y);
    padding-bottom: var(--padding-desktop-y);

    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: var(--gap-col);
}

@media(max-width:1024px){
    .rogerio-footer-inner{
        grid-template-columns: repeat(2,minmax(0,1fr));
        row-gap: 2.5rem;
        column-gap: 2rem;
        padding-top: var(--padding-mobile-y);
        padding-bottom: var(--padding-mobile-y);
    }
}
@media(max-width:600px){
    .rogerio-footer-inner{
        grid-template-columns: 1fr;
        row-gap: 2rem;
    }
}

/* ===========================
   COLUNAS
   =========================== */
.rogerio-footer-col {
    min-width: 0;
}

.rogerio-footer-title {
    font-size: var(--title-size);
    font-weight: 600;
    line-height: 1.4;
    color: var(--footer-heading-light);
    margin: 0 0 0.75rem 0;
    text-transform: uppercase;
    letter-spacing: -0.03em;
    display: flex;
    align-items: center;
    gap: .5rem;
    text-shadow: 0 0 10px rgba(0,82,204,0.4);
    transition: color var(--transition-fast), text-shadow var(--transition-fast);
}

@media (prefers-color-scheme: dark) {
    .rogerio-footer-title {
        color: var(--footer-heading-dark);
        text-shadow: 0 0 8px rgba(77,136,255,0.8),
                     0 0 24px rgba(77,136,255,0.4);
    }
}

.rogerio-footer-title .rogerio-ico {
    font-size: 1rem;
    line-height: 1;
}

/* LISTA */
.rogerio-footer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--text-size);
    line-height: 1.5;
    display: grid;
    gap: 0.6rem;
}

.rogerio-footer-list li {
    color: var(--footer-text-light);
    transition: color var(--transition-fast), filter var(--transition-fast), text-shadow var(--transition-fast);
    word-break: break-word;
}

@media (prefers-color-scheme: dark) {
    .rogerio-footer-list li {
        color: var(--footer-text-dark);
    }
}

.rogerio-footer-list strong {
    font-weight: 600;
    color: var(--footer-heading-light);
    text-shadow: 0 0 10px rgba(0,82,204,0.4);
    transition: color var(--transition-fast), text-shadow var(--transition-fast);
}

@media (prefers-color-scheme: dark) {
    .rogerio-footer-list strong {
        color: var(--footer-heading-dark);
        text-shadow: 0 0 8px rgba(77,136,255,0.8),
                     0 0 24px rgba(77,136,255,0.4);
    }
}

.rogerio-footer-list a {
    color: var(--footer-text-light);
    text-decoration: none;
    position: relative;
    display: inline-block;
    font-weight: 500;
    transition: all var(--transition-fast);
    text-shadow: 0 0 6px rgba(0,0,0,0.4);
}

@media (prefers-color-scheme: dark) {
    .rogerio-footer-list a {
        color: var(--footer-text-dark);
        text-shadow: 0 0 8px rgba(0,82,204,0.7);
    }
}

/* Hover dos links */
.rogerio-footer-list a:hover {
    color: var(--footer-hover-light);
    text-shadow: 0 0 10px rgba(51,153,255,0.8),
                 0 0 32px rgba(51,153,255,0.5);
    filter: brightness(1.15);
    transform: translateY(-1px) scale(1.02);
}
@media (prefers-color-scheme: dark) {
    .rogerio-footer-list a:hover {
        color: var(--footer-hover-dark);
        text-shadow: 0 0 10px rgba(102,170,255,0.9),
                     0 0 32px rgba(102,170,255,0.6);
    }
}

/* Icone dentro de itens */
.rogerio-ico {
    color: var(--footer-heading-light);
    font-weight: 600;
    font-size: 0.9rem;
    text-shadow: 0 0 10px rgba(0,82,204,0.6);
    transition: all var(--transition-fast);
}
@media (prefers-color-scheme: dark) {
    .rogerio-ico {
        color: var(--footer-heading-dark);
        text-shadow: 0 0 10px rgba(77,136,255,0.9),
                     0 0 32px rgba(77,136,255,0.6);
    }
}

/* ===========================
   BARRA INFERIOR COPYRIGHT
   =========================== */
.rogerio-footer-bottom {
    border-top: 1px solid var(--footer-border-light);
    background: rgba(0,0,0,0.02);
    transition: background var(--transition-fast), border var(--transition-fast);
    text-align: center;
}

@media (prefers-color-scheme: dark) {
    .rogerio-footer-bottom {
        border-top: 1px solid var(--footer-border-dark);
        background: rgba(255,255,255,0.03);
    }
}

.rogerio-footer-bottom-inner{
    max-width: var(--max-width-footer);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 1rem;
    padding-bottom: 1.5rem;
}

.rogerio-copy {
    font-size: var(--copy-size);
    color: var(--footer-text-light);
    margin: 0;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: -0.02em;
    text-shadow: 0 0 6px rgba(0,0,0,0.4);
    transition: color var(--transition-fast), text-shadow var(--transition-fast);
}

@media (prefers-color-scheme: dark) {
    .rogerio-copy {
        color: var(--footer-text-dark);
        text-shadow: 0 0 8px rgba(0,82,204,0.6),
                     0 0 22px rgba(0,82,204,0.4);
    }
}

/* ===========================
   AJUSTES RESPONSIVOS TIPOGRAFIA
   =========================== */
@media(max-width:600px){
    .rogerio-footer-title{
        font-size: 0.9rem;
    }
    .rogerio-footer-list{
        font-size: 0.85rem;
    }
    .rogerio-copy{
        font-size: 0.75rem;
    }
}