/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER — sanquintin-theme
   El footer es siempre oscuro (como el header nav), con ligeros ajustes
   entre modo claro y oscuro.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Variables propias del footer ── */
:root {
    --f-bg:           #1A202C;
    --f-surface:      #2D3748;
    --f-surface-alt:  #374151;
    --f-text:         #E2E8F0;
    --f-text-sec:     #A0AEC0;
    --f-border:       rgba(255,255,255,.10);
    --f-accent:       #A30000;
    --f-accent-wa:    #25D366;
    --f-accent-tg:    #2CA5E0;
}
[data-theme="dark"] {
    --f-bg:           #0D1117;
    --f-surface:      #161B22;
    --f-surface-alt:  #21262D;
    --f-text:         #CDD9E5;
    --f-text-sec:     #768390;
    --f-border:       rgba(255,255,255,.08);
    --f-accent:       #C0392B;
}

/* ── Contenedor ── */
.diario-footer {
    background: var(--f-bg);
    color:      var(--f-text);
    font-family: var(--f-sans, -apple-system, sans-serif);
    font-size:  .9rem;
    margin-top: 48px;
    border-top: 3px solid var(--f-accent);
}

/* ── Zona principal: columnas ── */
.diario-footer__main {
    padding: 48px 0 32px;
}
.diario-footer__inner {
    max-width: 1200px;
    margin:    0 auto;
    padding:   0 24px;
    display:   grid;
    grid-template-columns: 1fr 1fr 2fr;
    gap:       40px;
    align-items: start;
}

/* ── Encabezado de columna ── */
.diario-footer__heading {
    font-family: var(--f-serif, Georgia, serif);
    font-size:   1rem;
    font-weight: 700;
    color:       var(--f-text);
    margin:      0 0 16px;
    padding-bottom: 10px;
    border-bottom:  2px solid var(--f-border);
    position:    relative;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.diario-footer__heading::after {
    content:  '';
    position: absolute;
    bottom:   -2px;
    left:     0;
    width:    36px;
    height:   2px;
    background: var(--f-accent);
}

/* ── Lista de links ── */
.diario-footer__links {
    list-style: none;
    margin:     0;
    padding:    0;
}
.diario-footer__links li {
    margin-bottom: 10px;
}
.diario-footer__links a {
    color:           var(--f-text-sec);
    text-decoration: none;
    transition:      color .18s, padding-left .18s;
    display:         inline-block;
}
.diario-footer__links a:hover {
    color:        var(--f-text);
    padding-left: 4px;
}

/* ── Tarjetas de canal (WhatsApp / Telegram) ── */
.diario-footer__cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:     12px;
    margin-bottom: 24px;
}
.diario-footer__card {
    display:         flex;
    align-items:     center;
    gap:             12px;
    background:      var(--f-surface);
    border:          1px solid var(--f-border);
    border-radius:   10px;
    padding:         14px;
    text-decoration: none;
    color:           var(--f-text);
    transition:      background .2s, transform .2s;
}
.diario-footer__card:hover {
    background:  var(--f-surface-alt);
    transform:   translateY(-2px);
}
.diario-footer__card-icon {
    width:           44px;
    height:          44px;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
}
.diario-footer__card-icon--wa {
    background: var(--f-accent-wa);
    color:      #fff;
}
.diario-footer__card-icon--tg {
    background: var(--f-accent-tg);
    color:      #fff;
}
.diario-footer__card-body {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    min-width:      0;
}
.diario-footer__card-body strong {
    font-size:   .9rem;
    font-weight: 700;
    color:       var(--f-text);
}
.diario-footer__card-body span {
    font-size:  .78rem;
    color:      var(--f-text-sec);
    font-weight: 600;
}
.diario-footer__card-body em {
    font-style: normal;
    font-size:  .72rem;
    color:      var(--f-text-sec);
}

/* ── Boletín ── */
.diario-footer__newsletter {
    background:    var(--f-surface);
    border:        1px solid var(--f-border);
    border-radius: 10px;
    padding:       20px;
}
.diario-footer__newsletter-sub {
    margin:     0 0 12px;
    color:      var(--f-text-sec);
    font-size:  .85rem;
}
.diario-footer__form {
    display:  flex;
    gap:      0;
    border:   1px solid var(--f-border);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 8px;
}
.diario-footer__form input[type="email"] {
    flex:        1;
    background:  var(--f-surface-alt);
    border:      none;
    color:       var(--f-text);
    padding:     10px 14px;
    font-size:   .85rem;
    outline:     none;
    min-width:   0;
}
.diario-footer__form input[type="email"]::placeholder {
    color: var(--f-text-sec);
}
.diario-footer__form button {
    background: var(--f-accent);
    border:     none;
    color:      #fff;
    padding:    10px 14px;
    cursor:     pointer;
    display:    flex;
    align-items:     center;
    justify-content: center;
    transition: background .18s;
    flex-shrink: 0;
}
.diario-footer__form button:hover {
    background: color-mix(in srgb, var(--f-accent) 85%, white);
}
.diario-footer__newsletter-legal {
    font-size: .72rem;
    color:     var(--f-text-sec);
    margin:    0;
}
.diario-footer__newsletter-legal a {
    color:           var(--f-text-sec);
    text-decoration: underline;
}

/* ── Barra inferior ── */
.diario-footer__bottom {
    border-top: 1px solid var(--f-border);
    padding:    16px 24px;
    max-width:  1200px;
    margin:     0 auto;
    display:    flex;
    align-items:     center;
    justify-content: space-between;
    gap:        16px;
    flex-wrap:  wrap;
}
.diario-footer__copy {
    color:     var(--f-text-sec);
    font-size: .8rem;
}
.diario-footer__copy strong {
    color:      var(--f-text);
    font-weight: 600;
}

/* ── Iconos sociales ── */
.diario-footer__socials {
    display: flex;
    gap:     8px;
    align-items: center;
}
.diario-footer__socials a {
    width:           36px;
    height:          36px;
    border-radius:   50%;
    background:      var(--f-surface);
    border:          1px solid var(--f-border);
    color:           var(--f-text-sec);
    display:         flex;
    align-items:     center;
    justify-content: center;
    text-decoration: none;
    transition:      background .18s, color .18s, border-color .18s;
}
.diario-footer__socials a:hover {
    background:   var(--f-accent);
    border-color: var(--f-accent);
    color:        #fff;
}

/* ── Botón Subir ── */
.diario-footer__top {
    display:     flex;
    align-items: center;
    gap:         6px;
    background:  var(--f-surface);
    border:      1px solid var(--f-border);
    color:       var(--f-text-sec);
    font-size:   .8rem;
    font-family: var(--f-sans);
    padding:     8px 14px;
    border-radius: 20px;
    cursor:      pointer;
    transition:  background .18s, color .18s;
}
.diario-footer__top:hover {
    background: var(--f-surface-alt);
    color:      var(--f-text);
}

/* ══════════════ RESPONSIVE ══════════════ */
@media (max-width: 900px) {
    .diario-footer__inner {
        grid-template-columns: 1fr 1fr;
    }
    .diario-footer__col--wide {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    .diario-footer__inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .diario-footer__cards {
        grid-template-columns: 1fr;
    }
    .diario-footer__bottom {
        flex-direction: column;
        align-items:    flex-start;
        gap: 12px;
    }
    .diario-footer__top {
        align-self: flex-end;
    }
}