/* Offside · pie nuevo con fotos de fútbol de 1920 (dominio público, CREDITS-FOTOS.md), newsletter (maqueta),
   avisos push, selector de equipo, pago y envío. Sustituye las reglas .site-footer / .foot-* de main.css. */

/* Pie pegado abajo: la página corta no deja banda blanca bajo el footer. Los elementos fixed (appbar, menú, cookie) quedan fuera del flujo. */
body { display: flex; flex-direction: column; min-height: 100dvh; }
main#contenido { flex: 1 0 auto; }
@media (max-width: 899px) {
	body { padding-bottom: 0; } /* app.css lo ponía en body; el fondo oscuro del pie sigue bajo la barra inferior */
	.site-footer { padding-bottom: calc(16px + var(--appbar-h, 64px) + env(safe-area-inset-bottom, 0px)) !important; }
}

/* El pie: oscuro, con el estadio al fondo tras una veladura */
.site-footer { position: relative; margin: 0; padding: 22px 0 16px; background: #0b0d12 var(--img) center 60% / cover no-repeat; color: #c9cbd3; font-size: .92rem; isolation: isolate; }
.site-footer::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 13, 18, .96) 0, rgba(11, 13, 18, .92) 45%, rgba(11, 13, 18, .86) 100%); }
.site-footer a { transition: color .2s; }
.site-footer a:hover { color: #fff; }
.site-footer h2 { font: 650 .74rem/1 var(--font-b); letter-spacing: .06em; text-transform: uppercase; color: #fff; margin-bottom: 8px; }
.site-footer li + li { margin-top: 4px; }
.site-footer .fine { color: #8d909c; }
.site-footer :focus-visible { outline-color: #fff; }

.foot-top { display: grid; gap: 18px; padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.foot-brand { display: grid; gap: 8px; justify-items: start; }
.foot-logo { display: inline-flex; align-items: center; gap: 12px; color: #fff; }
.foot-logo-mark { width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 4px 14px rgba(10, 132, 255, .3); }
.foot-logo-name { font: 800 1.15rem/1 var(--font-d); font-stretch: 112%; letter-spacing: -.03em; text-transform: uppercase; }
.foot-logo-name small { font-size: .7em; font-weight: 650; color: #a9acb8; letter-spacing: .04em; }
.foot-claim { font-family: var(--font-d); font-weight: 750; font-stretch: 112%; font-size: 1rem; line-height: 1.2; letter-spacing: -.01em; color: #fff; max-width: 32ch; text-wrap: balance; }
.foot-social { display: flex; flex-wrap: wrap; gap: 10px; }
.foot-social a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: var(--r-s); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); color: #fff; font-weight: 600; font-size: .9rem; transition: background-color .25s, transform .35s var(--ease); }
.foot-social a:hover { background: rgba(255, 255, 255, .12); transform: translateY(-2px); }
.foot-social svg { width: 18px; height: 18px; }
.foot-social small { font-size: .72rem; font-weight: 500; color: #a9acb8; }

.foot-news h2 { font: 750 1.05rem/1.1 var(--font-d); font-stretch: 112%; letter-spacing: -.02em; text-transform: none; margin-bottom: 6px; }
.foot-news > p { color: #a9acb8; }
.news-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 8px; max-width: 480px; }
.news-form input { min-height: 40px; padding: 0 18px; border-radius: var(--pill); border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .08); color: #fff; }
.news-form input::placeholder { color: #8d909c; }
.news-form input:focus { outline: 3px solid var(--brand); outline-offset: 2px; }
.news-form .btn { padding-inline: 22px; }
.news-form.is-done .btn { background: #1f9d55; }
.news-msg { margin-top: 6px; font-size: .76rem; }
.foot-push { margin-top: 8px; font-size: .82rem; }
.foot-push summary { cursor: pointer; color: #a9acb8; width: max-content; }
.foot-push summary:hover { color: #fff; }

/* Avisos push (inc/pwa.php) */
.push-panel { margin-top: 8px; padding: 10px 12px; border-radius: var(--r-m); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); display: grid; gap: 12px; max-width: 480px; }
.push-panel[hidden] { display: none; }
.push-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.push-head strong { color: #fff; font-weight: 650; }
.push-panel .btn { min-height: 40px; padding-inline: 18px; font-size: .9rem; }
.push-prefs { display: grid; gap: 8px; }
.push-prefs label { display: flex; align-items: center; gap: 10px; font-size: .9rem; cursor: pointer; }
.push-prefs input { width: 18px; height: 18px; accent-color: var(--brand); }
.push-state { font-size: .82rem; color: #a9acb8; }
.push-state.is-on { color: #7ed49e; }
.push-state.is-off { color: #f3a0a0; }

.foot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px 0; font-size: .85rem; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.foot-grid a { color: #c9cbd3; }

.foot-team { display: grid; gap: 6px; align-content: start; grid-column: 1 / -1; }
.foot-team h2 { margin-bottom: 2px; }
.foot-team p { color: #a9acb8; font-size: .82rem; }
.foot-team .team-pick-panel, .foot-team .team-pick-btn { color: var(--ink); }
.foot-team .team-pick-panel .fine { color: var(--ink-3); }

.foot-trust { display: grid; gap: 10px; padding: 12px 0 0; }
.foot-pay { display: flex; flex-wrap: wrap; gap: 6px; }
.foot-pay li { display: block; }
.foot-pay svg { display: block; width: 42px; height: 28px; border-radius: 5px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }
.foot-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.foot-badges li { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; padding: 0 10px; border-radius: var(--pill); border: 1px solid rgba(255, 255, 255, .14); color: #e4e6ec; font-size: .78rem; font-weight: 550; }
.foot-badges svg { width: 16px; height: 16px; color: #fff; }

.foot-legal { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .12); display: grid; gap: 6px; font-size: .74rem; color: #8d909c; }
.foot-legal-links { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.foot-legal-links li + li { margin-top: 0; }
.foot-legal a { text-decoration: underline; text-underline-offset: 2px; }

@media (min-width: 720px) {
	.foot-top { grid-template-columns: 1fr 1.2fr; align-items: start; gap: 32px; }
	.foot-grid { grid-template-columns: 1fr 1fr 1fr 1.4fr; }
	.foot-team { grid-column: auto; }
	.foot-trust { grid-template-columns: auto 1fr; justify-content: space-between; }
	.foot-trust .foot-badges:last-child { justify-content: end; }
}
@media (min-width: 1100px) { .foot-legal { grid-template-columns: 1fr auto; align-items: start; } }
@media (prefers-reduced-motion: reduce) { .foot-social a, .news-form .btn { transition: none; } }

/* Página de créditos de fotos (inc/creditos.php) */
.credits { padding: 48px 0 72px; display: grid; gap: 28px; }
.credits-list { display: grid; gap: 20px; }
.credits-list li { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--bg-2); }
.credits-list img { width: 100%; aspect-ratio: 2.4; object-fit: cover; border-radius: var(--r-s); filter: grayscale(1); }
.credits-list h2 { font-size: 1.1rem; margin-bottom: 6px; }
.credits-list p { color: var(--ink-2); font-size: .92rem; }
.credits-list a { color: var(--brand-600); text-decoration: underline; }
@media (min-width: 720px) { .credits-list li { grid-template-columns: 300px 1fr; align-items: center; } }