/**
 * El pie del sitio.
 *
 * El ancho interior es el mismo que el del encabezado —1360 px con 1 rem de
 * aire—, que era lo que se pidió al homologarlos: el fondo ocupa todo el
 * ancho, el contenido se alinea con el resto de la página.
 *
 * Los logos de medios de pago llevan `width`/`height` en el HTML y una altura
 * fija acá, con `object-fit: contain`. Las dos cosas juntas: los atributos le
 * reservan el espacio al navegador para que el pie no salte al cargar, y el
 * `contain` impide que un logo de proporción distinta se deforme. Esta semana
 * quedó claro que poner los atributos sin la regla que los acompaña deforma
 * las imágenes.
 */

.pp-footer {
    background: #06038d;
    color: #c9cbe8;
    margin-top: 3rem;
    padding: 0;
    border: 0;
    font-family: 'AvenirNextLTPro', -apple-system, BlinkMacSystemFont, sans-serif;
}

.pp-footer__inner {
    max-width: 1360px;
    margin: 0 auto;
    padding: 2.75rem 1rem 1.25rem;
}

/* ── Columnas ─────────────────────────────────────────────────────────── */

.pp-footer__cols {
    display: grid;
    grid-template-columns: 1.15fr repeat(3, 1fr);
    gap: 2rem;
    padding-bottom: 2rem;
}

/*
 * El logo va en blanco sólido.
 *
 * El archivo original combina rojo y AZUL MARCA, y sobre este fondo —que es
 * ese mismo azul— la mitad del logo desaparecería. `brightness(0)` lo aplasta
 * a negro y `invert(1)` lo levanta a blanco, sin necesidad de mantener una
 * segunda versión del archivo.
 */
.pp-footer__logo {
    width: 148px;
    height: auto;
    display: block;
    margin-bottom: 0.9rem;
    filter: brightness(0) invert(1);
}

.pp-footer__lema {
    margin: 0 0 1.15rem;
    max-width: 24ch;
    color: #c9cbe8;
    font-size: 0.87rem;
    font-weight: 400;
    line-height: 1.45;
}

.pp-footer__lema sup { font-size: 0.6em; }

.pp-footer__titulo {
    margin: 0 0 0.9rem;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.pp-footer__col ul,
.pp-footer__redes,
.pp-footer__logos,
.pp-footer__legal ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pp-footer__col li { margin-bottom: 0.55rem; }

.pp-footer a {
    color: #c9cbe8;
    font-size: 0.9rem;
    text-decoration: none;
    transition: color 0.16s ease;
}

.pp-footer a:hover,
.pp-footer a:focus-visible {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── Redes ────────────────────────────────────────────────────────────── */

.pp-footer__redes {
    display: flex;
    gap: 0.6rem;
}

.pp-footer__redes a {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    color: #fff;
    transition: background 0.16s ease, border-color 0.16s ease;
}

.pp-footer__redes a:hover,
.pp-footer__redes a:focus-visible {
    background: #eb1c25;
    border-color: #eb1c25;
    text-decoration: none;
}

/* ── Tiras de logos ───────────────────────────────────────────────────── */

.pp-footer__tiras {
    display: grid;
    grid-template-columns: 2.6fr 1fr;
    gap: 2rem;
    padding: 1.75rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.pp-footer__logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/*
 * Fichas de ancho FIJO, no ajustadas al logo.
 *
 * Con ancho libre quedaban dispares —MACH ocupaba el doble que Mercado Pago,
 * que es casi cuadrado— y la fila desbordaba a lo ancho en pantallas
 * angostas, porque su medida dependía de la proporción de cada archivo. Con
 * una ficha fija la grilla es previsible y se lee como un conjunto.
 */
.pp-footer__logos li {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 40px;
    padding: 0 0.45rem;
    background: #fff;
    border-radius: 6px;
}

/* La ficha manda la medida; la imagen entra dentro sin deformarse, venga en
   la proporción que venga. */
.pp-footer__logos img {
    max-width: 100%;
    max-height: 24px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.pp-footer__tira--apps .pp-footer__logos li { width: 92px; }

/* ── Barra legal ──────────────────────────────────────────────────────── */

.pp-footer__legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 1.25rem;
    font-size: 0.82rem;
}

.pp-footer__legal p { margin: 0; }
.pp-footer__legal sup { font-size: 0.65em; }

.pp-footer__razon {
    display: block;
    margin-top: 0.2rem;
    opacity: 0.75;
}

.pp-footer__legal ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.pp-footer__legal a { font-size: 0.82rem; }

/* ── Angosto ──────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
    .pp-footer__cols  { grid-template-columns: 1fr 1fr; gap: 1.75rem; }
    .pp-footer__tiras { grid-template-columns: 1fr; gap: 1.5rem; }
}

@media (max-width: 575px) {
    .pp-footer__inner { padding-top: 2rem; }
    .pp-footer__cols  { grid-template-columns: 1fr; gap: 1.5rem; }

    /* Todo alineado a la izquierda. Centrar sólo el bloque de marca lo dejaba
       peleado con las columnas de abajo, que van alineadas: se leía como dos
       diseños pegados. */
    .pp-footer__lema  { max-width: none; }

    /* La barra legal en columna y con el texto libre de partirse: en una
       pantalla angosta "Todos los derechos reservados" no entra en la misma
       línea y estaba desbordando hacia la derecha. */
    .pp-footer__legal    { flex-direction: column; align-items: flex-start; }
    .pp-footer__legal ul { gap: 1rem; }
}

/*
 * Nada del pie puede empujar la página a lo ancho.
 *
 * Las tiras de logos son la parte con más riesgo: son elementos de ancho fijo
 * en una fila, y si no pueden partirse fuerzan una barra de scroll horizontal
 * en toda la página.
 */
.pp-footer *,
.pp-footer *::before,
.pp-footer *::after { box-sizing: border-box; }

.pp-footer__inner,
.pp-footer__cols,
.pp-footer__tiras,
.pp-footer__tira,
.pp-footer__legal { min-width: 0; }

.pp-footer__legal p { overflow-wrap: anywhere; }

/* El pie viejo salía de widgets de Storefront. Si quedara alguno declarado,
   no debe dibujarse encima del nuevo. */
.pp-footer .footer-widgets,
.pp-footer .site-info { display: none; }