/* ============================================================
   FOOTER ESTÁNDAR DINAUP (ft2 — fat footer de columnas, oscuro)
   Fuente: Identidad Corporativa / nav-y-footer.html
   Hoja única del footer: la cargan la home, las landings
   (OTC/Partners/Legal) y _Host (páginas Blazor).
   El markup vive en Components/FooterDinaup.razor.
   ============================================================ */
.ft2 {
    width: 100%;
    box-sizing: border-box;
    background: #16222e;
    font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: rgba(255, 255, 255, 0.7);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.ft2-in {
    max-width: 1180px;
    margin: 0 auto;
    padding: 3rem 2rem 2rem;
    display: grid;
    grid-template-columns: 1.4fr 3fr;
    gap: 3rem;
}

.ft2-brandcol img { height: 24px; display: block; margin-bottom: 0.75rem; }

.ft2-brandcol p {
    font-size: 0.86rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.6);
    max-width: 30ch;
    margin: 0 0 0.75rem;
}

.ft2-fiscal { font-size: 0.76rem; color: rgba(255, 255, 255, 0.45); line-height: 1.6; }

.ft2-social { display: flex; gap: 0.75rem; margin-top: 1rem; }

.ft2-social a {
    display: inline-flex;
    color: rgba(255, 255, 255, 0.55);
    border-radius: 7px;
    transition: color 0.15s ease, transform 0.15s ease;
}

.ft2-social a:hover { color: #fff; transform: translateY(-2px); }
.ft2-social a:focus-visible { outline: 2px solid #00bffe; outline-offset: 2px; }
.ft2-social svg { width: 22px; height: 22px; }

.ft2-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }

.ft2-cols h3 {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 600;
    margin: 0 0 0.75rem;
}

.ft2-cols a {
    display: block;
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    font-size: 0.86rem;
    padding: 0.25rem 0;
    border-radius: 7px;
}

.ft2-cols a:hover { color: #fff; }
.ft2-cols a:focus-visible { outline: 2px solid #00bffe; outline-offset: 2px; }

.ft2-bar {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    max-width: 1180px;
    margin: 0 auto;
    padding: 0.75rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.55);
}

.ft2-end { display: flex; align-items: center; gap: 1rem; }
.ft2-end a { color: rgba(255, 255, 255, 0.7); text-decoration: none; }
.ft2-end a:hover { color: #fff; }

@media (max-width: 820px) {
    .ft2-in { grid-template-columns: 1fr; gap: 2rem; }
    .ft2-cols { grid-template-columns: repeat(2, 1fr); }
}