/**
 * Footer Option 02 — Multi-columna + newsletter (DESKTOP)
 * Migrado desde assets/css/footer-option02.css. El original no tenía
 * ningún bloque @media; desktop y mobile son idénticos.
 */
.footer-option02 {
    background: var(--bg-inverse, #14120f);
    color: #fff;
    padding: 72px 0 32px;
}

.footer-option02 .footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    margin-bottom: 44px;
}

.footer-option02 .footer-col h5 {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 18px;
}

.footer-option02 .footer-col ul { list-style: none; padding: 0; }
.footer-option02 .footer-col li { margin-bottom: 12px; }

.footer-option02 .footer-col a {
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    font-size: var(--text-sm);
    transition: color var(--duration-fast) var(--ease-out);
}

.footer-option02 .footer-col a:hover { color: #fff; }

.footer-option02 .newsletter h5 { color: #fff; font-size: var(--text-base); text-transform: none; letter-spacing: normal; }

.footer-option02 .newsletter input {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border-radius: var(--radius-md);
    margin-bottom: 10px;
    font-size: var(--text-sm);
}

.footer-option02 .newsletter button { width: 100%; }

.footer-option02 .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 26px;
    text-align: center;
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.4);
}