/* ==========================================================================
   declar.ar — Footer compartido (includes/site-footer.php)
   Autocontenido: no depende de landing.css ni de las reglas .footer viejas.
   ========================================================================== */
.sf {
    --sf-ink: #12161f;
    --sf-link: #3a404b;
    --sf-muted: #7a808c;
    --sf-bg: #eef2fa;
    --sf-line: #dadee6;
    --sf-accent: #242c4f;
    --sf-pad-x: 32px;
    margin-top: 0;
    background: var(--sf-bg);
    border-radius: 32px 32px 0 0;
    color: var(--sf-ink);
    font-family: var(--dc-sans, 'Manrope', system-ui, sans-serif);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
.sf a { color: inherit; text-decoration: none; }
.sf p, .sf ul { margin: 0; padding: 0; }
.sf ul { list-style: none; }

.sf-inner {
    max-width: var(--dc-frame, 1400px);
    margin: 0 auto;
    padding: 72px var(--sf-pad-x) 36px;
}

/* ---- Columnas ---- */
.sf-grid {
    display: grid;
    grid-template-columns: 1fr repeat(4, minmax(0, 1fr)) 1.35fr;
    gap: 40px 28px;
}
.sf-main { display: grid; gap: 18px; align-content: start; }
.sf .sf-main a {
    font-family: var(--dc-sans, 'Manrope', system-ui, sans-serif);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--sf-ink);
    transition: color .16s ease;
}
.sf .sf-main a:hover { color: var(--sf-accent); opacity: .75; }

.sf-title {
    font-family: var(--dc-sans, 'Manrope', system-ui, sans-serif);
    font-size: 19px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--sf-ink);
    margin: 0 0 20px;
}
.sf-col ul { display: grid; gap: 12px; }
.sf .sf-col a { font-size: 14.5px; color: var(--sf-link); transition: color .16s ease; }
.sf .sf-col a:hover { color: var(--sf-ink); }

/* ---- Fila inferior ---- */
/* Redes a la izquierda, medios de pago a la derecha */
.sf-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 64px;
}
.sf-social { display: flex; gap: 10px; }
.sf-social a {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(14, 23, 38, .06), 0 4px 14px rgba(14, 23, 38, .08);
    display: grid;
    place-items: center;
    transition: transform .16s ease, box-shadow .16s ease;
}
.sf-social a:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(14, 23, 38, .08), 0 8px 20px rgba(14, 23, 38, .12); }
/* Íconos con los colores reales de cada marca */
.sf-social img { width: 20px; height: 20px; display: block; }
.sf-social .sf-gh { width: 21px; height: 21px; display: block; fill: #181717; }

.sf-pay {
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(14, 23, 38, .06), 0 4px 14px rgba(14, 23, 38, .08);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.sf-pay-title { font-size: 13px; color: var(--sf-muted); margin-right: 4px; }
.sf-pay img { height: 22px; width: auto; display: block; }
/* El SVG de Mercado Pago trae mucho aire interno: más alto para que se lea */
.sf-pay img.sf-pay-mp { height: 34px; margin: -6px 0; }
.sf-pay span:last-child { font-size: 13px; color: var(--sf-muted); }

/* ---- Legal ---- */
.sf-legal {
    border-top: 1px solid var(--sf-line);
    margin-top: 44px;
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    gap: 8px 24px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--sf-muted);
}
.sf-legal p + p { margin-top: 4px; }

/* ---- Marca gigante al pie, cortada por el borde inferior ---- */
.sf { overflow: hidden; }
.sf-wordmark {
    max-width: var(--dc-frame, 1400px);
    margin: 8px auto -0.19em; /* corta la base de las letras pero deja ver el punto */
    padding: 0 var(--sf-pad-x);
    text-align: center;
    font-family: var(--dc-sans, 'Manrope', system-ui, sans-serif);
    font-size: clamp(84px, 18.5vw, 290px);
    font-weight: 600;
    letter-spacing: -0.055em;
    line-height: 1;
    white-space: nowrap;
    background: linear-gradient(100deg, #242c4f 0%, #33427c 55%, #4a5fa8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    user-select: none;
    pointer-events: none;
}

@media (max-width: 1024px) {
    .sf-grid { grid-template-columns: repeat(3, 1fr); }
    .sf-main { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; gap: 28px; }
    .sf-bar { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
    .sf { --sf-pad-x: 20px; border-radius: 24px 24px 0 0; }
    .sf-inner { padding-top: 52px; }
    .sf-grid { grid-template-columns: 1fr 1fr; }
    .sf-main { grid-auto-flow: row; }
}