/* ============================================================
   PIE DE PÁGINA
   Depende de tokens.css
   ============================================================ */

.ta-pie {
    background: var(--ta-carbon);
    color: rgba(255, 251, 245, 0.78);
    padding-block: var(--esp-8) var(--esp-5);
    font-size: var(--txt-sm);
}

.ta-pie__interior {
    max-width: var(--ancho-max);
    margin-inline: auto;
    padding-inline: var(--esp-4);
}

@media (min-width: 768px) {
    .ta-pie__interior {
        padding-inline: var(--esp-6);
    }
}

/* ---- Rejilla de columnas ---- */

.ta-pie__columnas {
    display: grid;
    gap: var(--esp-7);
    grid-template-columns: 1fr;
}

@media (min-width: 600px) {
    .ta-pie__columnas {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 900px) {
    /* La columna de marca pesa más que las de enlaces. */
    .ta-pie__columnas {
        grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
        gap: var(--esp-6);
    }
}

/* ---- Columna de marca ---- */

.ta-pie__marca {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    margin-bottom: var(--esp-4);
}

.ta-pie__logo {
    height: 52px;
    width: auto;
}

.ta-pie__nombre {
    font-family: var(--ta-fuente-titulo);
    font-size: var(--txt-2xl);
    text-transform: uppercase;
    color: var(--ta-blanco);
    line-height: 1;
}

.ta-pie__lema {
    color: rgba(255, 251, 245, 0.62);
    max-width: 32ch;
}

/* ---- Títulos de columna ---- */

.ta-pie__titulo {
    font-family: var(--ta-fuente-titulo);
    font-size: var(--txt-lg);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ta-amarillo);
    margin-bottom: var(--esp-4);
}

/* ---- Listas de enlaces ---- */

.ta-pie__lista {
    list-style: none;
    display: grid;
    gap: var(--esp-3);
}

.ta-pie__enlace {
    color: rgba(255, 251, 245, 0.78);
    transition: color var(--trans-rapida), padding-inline-start var(--trans-rapida);
    display: inline-block;
}

.ta-pie__enlace:hover {
    color: var(--ta-amarillo);
    padding-inline-start: var(--esp-2);
}

/* ---- Horario ---- */

.ta-pie__horario {
    display: grid;
    gap: var(--esp-2);
    list-style: none;
}

.ta-horario-fila {
    display: flex;
    justify-content: space-between;
    gap: var(--esp-3);
    padding-block: var(--esp-1);
}

/* El día de hoy se resalta para que no haya que contar renglones. */
.ta-horario-fila--hoy {
    color: var(--ta-amarillo);
    font-weight: var(--peso-fuerte);
}

.ta-horario-fila--cerrado {
    color: rgba(255, 251, 245, 0.42);
}

.ta-pie__estado {
    margin-top: var(--esp-4);
}

/* ---- Contacto ---- */

.ta-pie__contacto {
    display: grid;
    gap: var(--esp-3);
    list-style: none;
}

.ta-pie__contacto-fila {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--esp-3);
    align-items: start;
}

.ta-pie__contacto-fila svg {
    color: var(--ta-amarillo);
    flex-shrink: 0;
    margin-top: 2px;
}

/* ---- Redes sociales ---- */

.ta-redes {
    display: flex;
    gap: var(--esp-3);
    margin-top: var(--esp-5);
    list-style: none;
}

.ta-red {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 251, 245, 0.10);
    color: var(--ta-blanco);
    transition: background-color var(--trans-rapida), transform var(--trans-rapida);
}

.ta-red:hover {
    background: var(--ta-naranja);
    color: var(--ta-blanco);
    transform: translateY(-3px);
}

/* ---- Barra inferior ---- */

.ta-pie__barra {
    margin-top: var(--esp-7);
    padding-top: var(--esp-5);
    border-top: 1px solid rgba(255, 251, 245, 0.14);
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-3) var(--esp-5);
    align-items: center;
    justify-content: space-between;
    color: rgba(255, 251, 245, 0.52);
    font-size: var(--txt-xs);
}

.ta-pie__legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-4);
    list-style: none;
}

.ta-pie__legal a {
    color: inherit;
}

.ta-pie__legal a:hover {
    color: var(--ta-amarillo);
}